diff --git a/.env.example b/.env.example
new file mode 100644
index 000000000..627d00ce0
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,63 @@
+NEXT_PUBLIC_USE_SPRING_BOOT_API=true
+# Local Spring Boot (for testing changes locally):
+NEXT_PUBLIC_SPRING_BOOT_API_URL=http://localhost:8080
+
+# ──────────── Email (Nodemailer) ────────────
+EMAIL_USER=your-email@gmail.com
+EMAIL_PASSWORD=your-google-app-password
+REVIEW_INBOX_EMAIL=optional-inbox@gmail.com
+
+# Gemini AI — required for the chatbot feature
+# Get a free API key at https://aistudio.google.com/apikey
+GEMINI_API_KEY=gemini-api-key-here
+
+# ──────────── Supabase ────────────
+NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
+SUPABASE_SERVICE_KEY=your-supabase-service-key
+SUPABASE_JWT_SECRET=your-supabase-jwt-secret
+
+# ──────────── Cloudflare Turnstile Captcha ────────────
+NEXT_PUBLIC_TURNSTILE_SITE_KEY=1x00000000000000000000AA
+TURNSTILE_SECRET_KEY=your-turnstile-secret-key
+TURNSTILE_CONFIGURED=false
+TURNSTILE_BYPASS=true
+
+# ──────────── Google Analytics ────────────
+NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
+
+# ──────────── AI Chatbot & Complexity Analyzer ────────────
+GEMINI_API_KEY=your-gemini-api-key
+
+# ──────────── Rate Limiting (Upstash Redis) ────────────
+UPSTASH_REDIS_REST_URL=your-upstash-redis-rest-url
+UPSTASH_REDIS_REST_TOKEN=your-upstash-redis-rest-token
+RATE_LIMIT_MAX=10
+
+# ──────────── UI Flags ────────────
+NEXT_PUBLIC_SHOW_COMMUNITY_BADGE=true
+AUTO_CONFIRM_EMAIL=true
+
+# ──────────── Arena Socket Server & Java Backend Distributed Cache ────────────
+# Redis URL for the arena socket server (used for matchmaking queue and session state)
+# Note: Use "rediss://" prefix if SSL is required (e.g. for Upstash)
+REDIS_URL=redis://localhost:6379
+
+# Redis connection parameters for the Java backend's distributed cache
+# REDIS_HOST=localhost
+# REDIS_PORT=6379
+# REDIS_PASSWORD=
+# REDIS_SSL=false
+
+# URL of the arena socket server for match pair verification from the Java backend
+# SOCKET_SERVER_URL=http://localhost:4000
+
+# Debug endpoint configuration (arena-socket-server)
+# Set DEBUG_ENABLED=true only in non-production environments
+# DEBUG_ENABLED=true
+# DEBUG_KEY=your-secure-debug-key
+
+# ──────────── CSRF Security ────────────
+# Generate a secure random string (e.g., run `openssl rand -hex 32` in your terminal).
+CSRF_SECRET=your-csrf-secret-key
+
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
new file mode 100644
index 000000000..2e50271e5
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,66 @@
+name: 🐞 Bug Report
+description: Report a bug or unexpected behavior to help us improve AlgoBuddy
+title: "[BUG] <Brief description of the bug>"
+labels: ["bug", "triage"]
+assignees: []
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for taking the time to report a bug! Please fill out the form below to help us understand and resolve the issue as quickly as possible.
+  - type: textarea
+    id: description
+    attributes:
+      label: Bug Description
+      description: A clear and concise description of what the bug is.
+      placeholder: Tell us what went wrong...
+    validations:
+      required: true
+  - type: textarea
+    id: reproduction
+    attributes:
+      label: Steps to Reproduce
+      description: Please provide step-by-step instructions to reproduce the bug.
+      value: |
+        1. Go to '...'
+        2. Click on '...'
+        3. Scroll down to '...'
+        4. See error
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected Behavior
+      description: A clear and concise description of what you expected to happen.
+    validations:
+      required: true
+  - type: textarea
+    id: actual
+    attributes:
+      label: Actual Behavior
+      description: A clear and concise description of what actually happened.
+    validations:
+      required: true
+  - type: input
+    id: environment
+    attributes:
+      label: Environment
+      description: Please provide information about your environment (OS, Browser version, Node.js version, etc.)
+      placeholder: e.g. Windows 11, Chrome 124, Node 20.x
+    validations:
+      required: true
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots or Logs
+      description: If applicable, add screenshots, video recordings, or error logs to help explain your problem.
+    validations:
+      required: false
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Code of Conduct
+      options:
+        - label: I agree to follow this project's Code of Conduct
+          required: true
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
new file mode 100644
index 000000000..e22664f2f
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -0,0 +1,45 @@
+name: ✨ Feature Request
+description: Suggest an idea or feature for AlgoBuddy
+title: "[FEATURE] <Brief description of the feature>"
+labels: ["enhancement", "triage"]
+assignees: []
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for suggesting an idea to make AlgoBuddy better! Please fill out the form below to help us understand your feature request.
+  - type: textarea
+    id: problem
+    attributes:
+      label: Is your feature request related to a problem? Please describe.
+      description: A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+    validations:
+      required: true
+  - type: textarea
+    id: solution
+    attributes:
+      label: Describe the solution you'd like
+      description: A clear and concise description of what you want to happen.
+    validations:
+      required: true
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Describe alternatives you've considered
+      description: A clear and concise description of any alternative solutions or features you've considered.
+    validations:
+      required: false
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional context
+      description: Add any other context or screenshots about the feature request here.
+    validations:
+      required: false
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Code of Conduct
+      options:
+        - label: I agree to follow this project's Code of Conduct
+          required: true
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 000000000..37568cbce
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,40 @@
+## Summary
+
+A brief description of the changes in this Pull Request. Explain **what** was changed and **why**.
+
+## Type of Change
+
+Please check the relevant options:
+- [ ] 🐛 Bug fix (non-breaking change which fixes an issue)
+- [ ] ✨ New feature (non-breaking change which adds functionality)
+- [ ] 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] 📝 Documentation update (changes to README, contributing guidelines, etc.)
+- [ ] 🎨 Style/Refactor (code style formatting, restructuring without changing behavior)
+
+## Related Issues
+
+Closes #[Issue Number]
+
+## Changes Made
+
+- [Detail 1]
+- [Detail 2]
+
+## How to Verify
+
+Please describe how reviewers can test your changes. 
+- [ ] Test Step 1
+- [ ] Test Step 2
+
+## Screenshots (if applicable)
+
+*Before / After (or just a demo of the new feature)*
+
+## Checklist
+
+- [ ] My code follows the project style guidelines
+- [ ] I have performed a self-review of my code
+- [ ] I have commented my code, particularly in hard-to-understand areas
+- [ ] I have updated the documentation accordingly
+- [ ] My changes generate no new warnings or errors
+- [ ] I have verified that these changes work correctly on multiple screen sizes (if UI-related)
diff --git a/.github/labeler.yml b/.github/labeler.yml
new file mode 100644
index 000000000..ee0e609e3
--- /dev/null
+++ b/.github/labeler.yml
@@ -0,0 +1,17 @@
+gssoc:approved:
+  - ".*"
+
+mentor:PankajSingh34:
+  - ".*"
+
+level:beginner:
+  - ".*beginner.*"
+
+type:bug:
+  - ".*bug.*"
+
+type:feature:
+  - ".*feature.*"
+
+type:docs:
+  - ".*docs.*"
diff --git a/.github/workflows/ai-issue-labeler.yml b/.github/workflows/ai-issue-labeler.yml
new file mode 100644
index 000000000..d312378a3
--- /dev/null
+++ b/.github/workflows/ai-issue-labeler.yml
@@ -0,0 +1,25 @@
+name: Smart Issue Labeler
+
+on:
+  issues:
+    types: [opened, edited]
+
+permissions:
+  issues: write
+  contents: read
+
+jobs:
+  label-issues:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo        # ← ADD THIS
+        uses: actions/checkout@v4
+
+      - name: Label issues
+        uses: github/issue-labeler@v3.4
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          configuration-path: .github/labeler.yml
+          enable-versioned-regex: 0
+          include-title: 1
diff --git a/.github/workflows/auto-approve-on-status.yml b/.github/workflows/auto-approve-on-status.yml
new file mode 100644
index 000000000..9b49d0b1d
--- /dev/null
+++ b/.github/workflows/auto-approve-on-status.yml
@@ -0,0 +1,96 @@
+name: Conditional Auto Approve
+
+on:
+  # जब भी किसी पीआर पर चेक्स (Status/Check Suite) पूरे हों
+  check_suite:
+    types: [completed]
+  status:
+
+jobs:
+  check-and-approve:
+    runs-on: ubuntu-latest
+    if: github.repository == 'PankajSingh34/AlgoBuddy'
+    steps:
+      - name: Check Statuses and Approve
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const { owner, repo } = context.repo;
+            
+            // 1. इस इवेंट से जुड़े Pull Requests की लिस्ट निकालें
+            let pullRequests = [];
+            if (context.eventName === 'check_suite') {
+              pullRequests = context.payload.check_suite.pull_requests;
+            } else {
+              // status इवेंट के लिए SHA के ज़रिए PR ढूंढें
+              const sha = context.payload.sha;
+              const prs = await github.rest.pulls.list({ owner, repo, state: 'open' });
+              pullRequests = prs.data.filter(pr => pr.head.sha === sha);
+            }
+
+            if (pullRequests.length === 0) {
+              console.log("No open pull request found for this event.");
+              return;
+            }
+
+            const prNumber = pullRequests[0].number;
+            const prRef = pullRequests[0].head.sha;
+
+            // 2. इस Commit SHA के सारे कंबाइंड चेक्स/स्टेटस गेट करें
+            const statuses = await github.rest.repos.getCombinedStatusForRef({
+              owner,
+              repo,
+              ref: prRef,
+            });
+
+            const checkRuns = await github.rest.checks.listForRef({
+              owner,
+              repo,
+              ref: prRef,
+            });
+
+            // 3. फ़िल्टर लॉजिक: वर्सेल (Vercel) को छोड़कर बाकी चेक्स की जांच
+            let allOthersPassed = true;
+            let evaluatedChecksCount = 0;
+
+            // स्टेटस चेक करें (पुराने गिटहब स्टेटस के लिए)
+            for (const status of statuses.data.statuses) {
+              if (status.context.toLowerCase().includes('vercel')) {
+                continue; // Vercel को छोड़ दो
+              }
+              evaluatedChecksCount++;
+              if (status.state !== 'success') {
+                allOthersPassed = false;
+              }
+            }
+
+            // चेक रन्स देखें (GitHub Actions आदि के लिए)
+            for (const run of checkRuns.data.check_runs) {
+              if (run.name.toLowerCase().includes('vercel') || run.app?.slug?.toLowerCase().includes('vercel')) {
+                continue; // Vercel को छोड़ दो
+              }
+              // अगर कोई चेक अभी चल रहा है या पास नहीं हुआ है
+              if (run.status !== 'completed') {
+                allOthersPassed = false;
+              } else if (run.conclusion !== 'success' && run.conclusion !== 'neutral') {
+                allOthersPassed = false;
+              }
+              evaluatedChecksCount++;
+            }
+
+            console.log(`Evaluated ${evaluatedChecksCount} non-Vercel checks. Status: ${allOthersPassed}`);
+
+            // 4. अगर वर्सेल के अलावा बाकी सारे चेक्स पास हैं, तो APPROVE कर दो
+            if (allOthersPassed && evaluatedChecksCount > 0) {
+              await github.rest.pulls.createReview({
+                owner,
+                repo,
+                pull_number: prNumber,
+                event: 'APPROVE',
+                body: 'code looks good',
+              });
+              console.log(`PR #${prNumber} has been automatically approved with 'code looks good'!`);
+            } else {
+              console.log("Some non-Vercel checks are either pending or failed. Skipping auto-approval.");
+            }
diff --git a/.github/workflows/auto_assign_yml b/.github/workflows/auto_assign_yml
new file mode 100644
index 000000000..1606ceb39
--- /dev/null
+++ b/.github/workflows/auto_assign_yml
@@ -0,0 +1,97 @@
+name: Auto Assign Issue to Creator
+
+on:
+  issues:
+    types: [opened]
+  issue_comment:
+    types: [created]
+
+jobs:
+  auto-assign:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+
+    steps:
+      - name: Auto-assign issue to creator & block re-assignment
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const issueNumber = context.issue.number;
+            const eventName = context.eventName;
+
+            // ──────────────────────────────────────────────
+            // CASE 1: New issue opened → assign to creator
+            // ──────────────────────────────────────────────
+            if (eventName === "issues") {
+              const creator = context.payload.issue.user.login;
+
+              await github.rest.issues.addAssignees({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: issueNumber,
+                assignees: [creator],
+              });
+
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: issueNumber,
+                body: `👋 Hey @${creator}! This issue has been **automatically assigned to you** as you created it.\n\n> 🔒 This issue is now locked for assignment. No other contributor can claim it.`,
+              });
+
+              console.log(`✅ Issue #${issueNumber} auto-assigned to @${creator}`);
+              return;
+            }
+
+            // ──────────────────────────────────────────────
+            // CASE 2: Someone comments trying to claim it
+            // ──────────────────────────────────────────────
+            if (eventName === "issue_comment") {
+              const comment = context.payload.comment.body.toLowerCase().trim();
+              const commenter = context.payload.comment.user.login;
+
+              const claimKeywords = ["assign me", "assign this to me", "i want to work", "can i take this", "please assign"];
+              const isClaiming = claimKeywords.some(kw => comment.includes(kw));
+
+              if (!isClaiming) return;
+
+              // Fetch current issue to check existing assignees
+              const { data: issue } = await github.rest.issues.get({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: issueNumber,
+              });
+
+              const assignees = issue.assignees.map(a => a.login);
+
+              if (assignees.length > 0) {
+                // Already assigned — block and notify
+                await github.rest.issues.createComment({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  issue_number: issueNumber,
+                  body: `❌ Sorry @${commenter}, this issue is **already assigned** to @${assignees[0]} and cannot be reassigned.\n\nPlease look for other open issues to contribute to! 🚀`,
+                });
+
+                console.log(`🚫 Blocked @${commenter} — issue #${issueNumber} already assigned to @${assignees[0]}`);
+              } else {
+                // Not yet assigned — assign to the commenter
+                await github.rest.issues.addAssignees({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  issue_number: issueNumber,
+                  assignees: [commenter],
+                });
+
+                await github.rest.issues.createComment({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  issue_number: issueNumber,
+                  body: `✅ @${commenter} This issue has been assigned to you! Good luck and happy coding! 🎉\n\n> 🔒 This issue is now locked — no further assignments allowed.`,
+                });
+
+                console.log(`✅ Issue #${issueNumber} assigned to commenter @${commenter}`);
+              }
+            }
\ No newline at end of file
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 0a8078d9c..607a9bb0b 100755
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,30 +1,72 @@
-name : Test Platform
+name: Test Platform
 
 on:
-    pull_request:
-        branches:
-            - main
+  pull_request:
+    branches:
+      - main
 
 jobs:
-    test:
-        strategy:
-            matrix:
-                os: [ubuntu-latest, macos-latest, windows-latest]
-        runs-on: ${{ matrix.os }}
-        steps:
-            - uses: actions/checkout@v4
-
-            - name: Set up Node.js
-              uses: actions/setup-node@v4
-              with:
-                node-version: 20
-                cache: 'npm'
-
-            - name: Install dependencies
-              run: npm install
-
-            - name: Run tests
-              run: npm run test
-
-            - name: Build Next.js
-              run: npm run build
\ No newline at end of file
+  test:
+    strategy:
+      matrix:
+        os: [ubuntu-latest, macos-latest, windows-latest]
+      fail-fast: false
+    runs-on: ${{ matrix.os }}
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Python (required by isolated-vm native addon)
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.12'
+
+      - name: Install C++ build tools (Ubuntu)
+        if: runner.os == 'Linux'
+        run: sudo apt-get install -y build-essential
+
+      - name: Install C++ build tools (macOS)
+        if: runner.os == 'macOS'
+        run: xcode-select --install || true
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run lint and tests
+        run: npm run test
+
+      - name: Build Next.js
+        run: npm run build
+        env:
+          # Stub public env vars so Next.js build-time config checks don't throw.
+          # These are intentionally placeholder values — no real secrets here.
+          NEXT_PUBLIC_SUPABASE_URL: https://placeholder.supabase.co
+          # Must be a valid 3-part JWT format (header.payload.sig) — Supabase JS v2
+          # validates the structure on client init and throws on a plain string.
+          NEXT_PUBLIC_SUPABASE_ANON_KEY: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InBsYWNlaG9sZGVyIiwicm9sZSI6ImFub24iLCJpYXQiOjE2MDAwMDAwMDAsImV4cCI6MjAwMDAwMDAwMH0.placeholder-signature
+          NEXT_PUBLIC_TURNSTILE_SITE_KEY: placeholder-turnstile-key
+          NEXT_PUBLIC_GA_ID: G-PLACEHOLDER
+
+  validate-backend-pom:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: backend
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up JDK 21
+        uses: actions/setup-java@v4
+        with:
+          java-version: 21
+          distribution: temurin
+          cache: maven
+
+      - name: Validate Maven POM
+        run: bash ./mvnw validate --batch-mode
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index df9b0ffd5..38535a190 100755
Binary files a/.gitignore and b/.gitignore differ
diff --git a/.mavis/last-run-report.md b/.mavis/last-run-report.md
new file mode 100644
index 000000000..68112499d
--- /dev/null
+++ b/.mavis/last-run-report.md
@@ -0,0 +1,44 @@
+AlgoBuddy cron run -- 2026-08-04T15:31:27Z
+
+Phase 1 -- Prior PR triage
+- PR #1: GREEN -- CLEAN, no CI checks configured on upstream
+- PR #2: GREEN -- CLEAN, no CI checks configured on upstream
+- PR #3: GREEN -- CLEAN, no CI checks configured on upstream
+- PR #4: GREEN -- CLEAN, no CI checks configured on upstream
+- PR #5: GREEN -- CLEAN, no CI checks configured on upstream
+- PR #6: GREEN -- CLEAN, no CI checks configured on upstream
+- PR #7: GREEN -- CLEAN, no CI checks configured on upstream
+- PR #8: GREEN -- CLEAN, no CI checks configured on upstream
+- PR #9: GREEN -- CLEAN, no CI checks configured on upstream
+- PR #10: GREEN -- CLEAN, no CI checks configured on upstream
+
+Phase 2 -- New PRs
+- PR #12: OPEN -- __tests__/sortingGenerators.test.js, __tests__/apiErrors.test.js, __tests__/profileUtils.test.js, __tests__/rateLimits.test.js, __tests__/random.test.js (119 new tests, 5 files, 889 lines)
+
+Phase 3 -- Monitoring
+- PR #12: no CI checks configured on syedahmedkhaderi/AlgoBuddy (upstream has no Actions workflows)
+- Prior PRs #1-10: no CI checks, no conflicts, all CLEAN
+
+Summary
+- Issues created: 0/5 (upstream syedahmedkhaderi/AlgoBuddy has issues disabled -- HTTP 410 Gone)
+- PRs opened: 1/5 (consolidated 5 test files into single PR)
+- PRs green: 0/5 (no CI configured on upstream -- manual review required)
+- PRs blocked: 0/5
+
+Key Corrections from cron prompt
+- UPSTREAM IS syedahmedkhaderi/AlgoBuddy, NOT PankajSingh34/AlgoBuddy
+- tmdeveloper007 is NOT blocked from syedahmedkhaderi/AlgoBuddy (PR creation works)
+- Issues disabled on upstream (HTTP 410) -- cannot create issues
+- No CI/Action workflows exist on upstream -- PRs require manual review
+- Branch must be based on upstream/main (not origin/main) to avoid large diff
+
+Local Verification Results
+- npm run lint: green
+- npm run test:ui: 154 passed (119 new + 35 pre-existing), 1 failed (pre-existing rateLimit test requires Redis)
+- npm run build: OOM killed (pre-existing, not caused by these changes)
+
+Recommendations
+- Verify PR #12: https://github.com/syedahmedkhaderi/AlgoBuddy/pull/12
+- syedahmedkhaderi should configure GitHub Actions CI for automated test runs
+- syedahmedkhaderi should enable issues on the repo for future automation
+- Consider using syedahmedkhaderi/AlgoBuddy as the correct upstream in cron configuration
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..2e63b5d73
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "css.lint.unknownAtRules": "ignore",
+  "java.compile.nullAnalysis.mode": "disabled",
+  "java.configuration.updateBuildConfiguration": "interactive"
+}
\ No newline at end of file
diff --git a/Architecture.md b/Architecture.md
new file mode 100644
index 000000000..2232c1d35
--- /dev/null
+++ b/Architecture.md
@@ -0,0 +1,221 @@
+# AlgoBuddy Architecture Guide
+
+This document describes the high-level system architecture of **AlgoBuddy**. It defines the core component boundaries, state ownership, communication contracts, and extension patterns for developers.
+
+For developer environment setups and installation steps, see [README.md](./README.md).
+
+---
+
+## 1. Project Overview
+
+AlgoBuddy is a learning and practice platform for Data Structures and Algorithms (DSA). It features step-by-step algorithm visualizers, real-time peer-to-peer coding duels, and AI-assisted study tools.
+
+The platform comprises three runtimes:
+
+*   **Next.js Frontend**: Serves the user interface and executes untrusted code in a sandboxed runner.
+
+*   **Spring Boot Backend**: Serves as the database source of truth, managing user profiles, statistics, and sheets.
+
+*   **Arena Socket Server**: A WebSocket gateway that manages peer-to-peer matchmaking, live duel states, and spectator rooms.
+
+---
+
+## 2. System Architecture
+
+The diagram below shows the boundaries of the system and the communication paths between components.
+
+```mermaid
+graph TD
+    Browser[Client Browser]
+    NextJS[Next.js Frontend]
+    SpringBoot[Spring Boot API]
+    SocketServer[Arena Socket Server]
+    AIServices[AI Services]
+    Supabase[Supabase PostgreSQL]
+    Redis[Redis Cache / Queue]
+
+    Browser --> NextJS
+    Browser --> SpringBoot
+    Browser --> SocketServer
+
+    NextJS --> Supabase
+    NextJS --> Redis
+    NextJS --> AIServices
+
+    SpringBoot --> Supabase
+    SpringBoot --> Redis
+    SpringBoot --> SocketServer
+
+    SocketServer --> Redis
+```
+
+AlgoBuddy uses a decentralized client-server architecture. The Client Browser acts as the central coordinator, communicating asynchronously with the Next.js edge functions (for user sessions and isolated execution), the Spring Boot API (for profile data and persistence), and the stateful Node.js Arena Socket server (for multiplayer duels).
+
+---
+
+## 3. Major Components
+
+To scale services independently and maintain clear boundaries, the codebase is split into five functional components:
+
+### 3.1 Frontend
+The Frontend is a Next.js application that serves user pages, visualizer interfaces, practice dashboards, and duels. It is responsible for client-side state engines, visualizer timelines, and caching guest state locally. It communicates with other components via REST endpoints and WebSocket protocols.
+
+### 3.2 Backend
+The Backend is a Spring Boot application that manages business logic, database operations, and persistent data models. It tracks user profile levels, calculates practice achievements, and computes Elo rating updates. It connects directly to PostgreSQL and Redis cache, exposing a REST API for authenticated user sessions.
+
+### 3.3 Real-time Service
+The Real-time Service is a Node.js Socket.io server that handles matchmaking and live duels. It pairs users, distributes code typing status, monitors user connection drops, and routes spectator lobbies. It relies on Redis to maintain queue states across instances, broadcasting match events via WebSockets.
+
+### 3.4 Database
+The Database is a Supabase PostgreSQL instance that serves as the persistent data store. It manages user progress tracking, bookmark tables, and activity logs. Access is governed by database-level triggers and Row-Level Security (RLS) policies based on authenticated user IDs.
+
+### 3.5 AI Services
+The AI Services integrate with Google Gemini LLM APIs to provide coding hints, dry-run debugging, and study planning. These services process prompts submitted from the frontend or backend layers, returning contextual guidance.
+
+---
+
+## 4. Repository Organization
+
+Code ownership is mapped to top-level directories to isolate execution contexts:
+
+*   **Frontend UI ([src/](./src))**: Next.js App Router, custom hooks, reusable components, and client-side utilities.
+
+*   **Business Logic ([backend/](./backend))**: Spring Boot models, REST controllers, JPA repository layers, and Elo calculators.
+
+*   **Stateful Networking ([arena-socket-server/](./arena-socket-server))**: Real-time duel handlers, matchmaking routines, and Redis connections.
+
+*   **Shared Configurations & Migration Database Scripts ([supabase_setup.sql](./supabase_setup.sql) & [backend/*.sql](./backend))**: Defines configurations and SQL table schemas (managed manually through CLI scripts or Supabase console updates).
+
+---
+
+## 5. Request & Data Flow
+
+### 5.1 Authentication Flow
+```mermaid
+sequenceDiagram
+    participant Browser as Client Browser
+    participant Supabase as Supabase Auth
+    participant Backend as Backend / Socket Server
+
+    Browser->>Supabase: Request JWT Session Token
+    Supabase-->>Browser: Return JWT Session Token
+    Browser->>Backend: Request API Resource (with JWT Header)
+    Backend->>Supabase: Validate JWT Signature (via JWKS)
+    Supabase-->>Backend: Verified Identity Context
+    Backend-->>Browser: Return Requested Resource
+```
+User sessions are managed via Supabase, with sessions verified across services using JSON Web Tokens (JWT). The browser passes this JWT in the Authorization headers of API and WebSocket connections. Backend servers verify the token using Supabase's JWKS endpoint.
+
+### 5.2 Learning Flow
+```mermaid
+sequenceDiagram
+    participant Browser as Client Browser
+    participant Storage as Local Storage
+    participant API as Spring Boot / Next API
+    participant DB as PostgreSQL
+
+    Browser->>Storage: Write optimistic progress update
+    Browser->>API: Post problem status change
+    API->>DB: Execute transaction (with streak calculation)
+    DB-->>API: Returns updated user streak
+    API-->>Browser: Update UI state
+```
+Progress updates are saved locally for responsiveness before being sent to the backend. The backend updates PostgreSQL, which runs a database-level transaction to update streaks.
+
+### 5.3 Arena Flow
+```mermaid
+sequenceDiagram
+    participant BrowserA as Player A
+    participant Socket as Socket Server
+    participant Redis as Redis Queue
+    participant BrowserB as Player B
+
+    BrowserA->>Socket: join_matchmaking (Topic, Difficulty)
+    Socket->>Redis: Check queue & match players
+    alt Match Found
+        Socket->>Redis: Create match session
+        Socket-->>BrowserA: match_found (Join Room)
+        Socket-->>BrowserB: match_found (Join Room)
+    else Queue Empty
+        Socket->>Redis: Add Player A to list
+    end
+```
+Matchmaking uses Redis lists. The Socket Server matches players, creates a room, and broadcasts the session details. Clients then update their game state via the REST API.
+
+### 5.4 AI Flow
+```mermaid
+sequenceDiagram
+    participant Browser as Client Browser
+    participant API as Next / Spring API
+    participant LLM as Gemini API
+
+    Browser->>API: Request prompt completion
+    API->>LLM: Submit context & user prompt
+    LLM-->>API: Return model completion
+    API-->>Browser: Render answer layout
+```
+AI prompts are processed through server-side APIs to protect API keys. The APIs validate the request, call Gemini, and return the response.
+
+---
+
+## 6. Architectural Decisions
+
+### 6.1 Separation of Spring Boot and Socket Server
+Spring Boot is optimized for transactional database operations (REST API), while Node.js/Socket.io is optimized for stateful, event-driven WebSocket connections. Separating them allows independent scaling and prevents connection surges from impacting persistence.
+
+### 6.2 Next.js Serverless Layer
+Provides static and server-side rendering for landing pages, simple routing, and handles sandboxed user code execution (`isolated-vm`) at the edge, protecting core backend resources.
+
+### 6.3 Redis Cache & Queue
+Offers fast, in-memory operations needed for real-time matchmaking queues, and acts as a distributed cache to reduce database load.
+
+### 6.4 Supabase for Auth & Database
+Provides built-in user authentication, email validation, and a Postgres database with Row-Level Security, reducing boilerplate code.
+
+### 6.5 Separate Real-Time Networking
+Decouples the live game engine from business APIs, allowing the socket server to run independently of persistent storage.
+
+---
+
+## 7. Extension Guide
+
+Contributors should follow these conventions when introducing changes:
+
+*   **Pages**: Add folder in [src/app/](./src/app) (e.g. `src/app/<route>/page.jsx`)
+
+*   **APIs**: Add serverless endpoint in [src/app/api/](./src/app/api) (e.g. `src/app/api/<route>/route.js`)
+
+*   **Services / Hooks**: Add custom hook in [src/app/hooks/](./src/app/hooks)
+
+*   **Shared UI Components**: Place inside [src/components/ui/](./src/components/ui)
+
+*   **Backend Endpoints**: Define inside the controller layer under [backend/src/main/java/com/algobuddy/backend/controller/](./backend/src/main/java/com/algobuddy/backend/controller)
+
+*   **Backend Services**: Implement under [backend/src/main/java/com/algobuddy/backend/service/](./backend/src/main/java/com/algobuddy/backend/service)
+
+*   **Socket Events**: Register listeners in [arena-socket-server/index.js](./arena-socket-server/index.js) using `socket.on(...)`
+
+
+### Architectural Boundaries
+
+*   Never allow the frontend to access the database directly.
+
+*   Keep the Socket Server stateless by storing matchmaking queues and active match rooms in Redis.
+
+*   Restrict data access in PostgreSQL using Row-Level Security (RLS) policies.
+
+*   Style components using Tailwind tokens from [design.md](./design.md) rather than custom inline styles.
+
+---
+
+## 8. Guiding Principles
+
+*   **Separation of Concerns**: Decouple layout rendering, persistent business rules, and stateful real-time interactions.
+
+*   **Modular Design**: Build features (like visualizers and notes) as isolated components to prevent side effects.
+
+*   **Service Ownership**: Keep the Next.js client, Spring Boot API, and Socket Server independent, communicating only through defined APIs.
+
+*   **Local-First & Optimistic Rendering**: Update the UI instantly using local state before syncing with backend servers for a smooth user experience.
+
+*   **Security by Design**: Enforce authorization checks at all layers (middleware, controllers, and database RLS).
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 8b1378917..52d870584 100755
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -1 +1,68 @@
+# Code of Conduct
 
+## Our Pledge
+
+We as contributors and maintainers pledge to make participation in this project a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+We are committed to creating an open, welcoming, inclusive, and respectful environment for everyone.
+
+---
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment include:
+
+- Being respectful and inclusive
+- Using welcoming and constructive language
+- Respecting differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Helping other contributors and community members
+
+Examples of unacceptable behavior include:
+
+- Harassment or discriminatory language
+- Personal attacks or trolling
+- Public or private harassment
+- Publishing others’ private information without permission
+- Any conduct that could be considered inappropriate in a professional setting
+
+---
+
+## Contributor Responsibilities
+
+Contributors are expected to:
+- Follow project guidelines
+- Maintain respectful communication
+- Focus on collaboration and learning
+- Report inappropriate behavior if encountered
+
+---
+
+## Enforcement
+
+Project maintainers are responsible for clarifying and enforcing standards of acceptable behavior and may take appropriate corrective action in response to any instances of unacceptable behavior.
+
+---
+
+## Reporting Issues
+
+If you experience or witness unacceptable behavior, please report it to the project maintainers through the repository issue section or the official project contact channels.
+
+All complaints will be reviewed and investigated promptly and fairly.
+
+---
+
+## Scope
+
+This Code of Conduct applies within all project spaces, including:
+- GitHub repositories
+- Discussions
+- Pull requests
+- Community chats
+- Social platforms related to the project
+
+---
+
+## Attribution
+
+This Code of Conduct is inspired by the Contributor Covenant, version 2.1.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 67e64f752..f0017fa98 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,51 +1,263 @@
 # Contributing to AlgoBuddy
 
-Thank you for considering contributing to this project! ❤️
+Thank you for your interest in contributing to **AlgoBuddy**!
+We welcome and appreciate contributions from the community to help make this project better.
 
-We welcome contributions in the form of:
+---
 
-- Bug fixes 🐛
-- New Algorithm Visualizers ✨
-- UI/UX Improvements 🎨
-- Documentation 📚
+**Join our community** — **Discord Server: <https://discord.gg/Gv2N4U3KAc>**
 
-## Getting Started
+---
 
-1. Fork the repository
-2. Clone your fork
+## ↪️Table of Contents
+
+- [Contribution Areas](#️-contribution-areas)
+- [Tech Stack](#️-tech-stack)
+- [Getting Started](#️-getting-started)
+- [Development Workflow](#️-development-workflow)
+- [Issue Assignment Process](#️-issue-assignment-process)
+- [Pull Request Guidelines](#️-pull-request-guidelines)
+- [Reporting Issues](#️-reporting-issues)
+- [Need Help?](#️-need-help)
+
+---
+
+# ↪️ Contribution Areas
+
+We accept contributions in the following areas:
+
+| Area                   | Description                                       |
+| ---------------------- | ------------------------------------------------- |
+| **Bug Fixes**          | Resolve existing bugs and issues                  |
+| **UI/UX Improvements** | Enhance responsiveness, accessibility, and design |
+| **New Visualizers**    | Add new DSA visualizers and animations            |
+| **Documentation**      | Improve guides, README, and contributor docs      |
+| **Performance**        | Optimize application performance and efficiency   |
+| **Theme Enhancements** | Improve dark/light mode experience                |
+
+Feel free to suggest new contribution ideas by opening an issue first.
+
+---
+
+# ↪️ Tech Stack
+
+| Layer     | Technology                                         |
+| --------- | -------------------------------------------------- |
+| Framework | Next.js 16 (App Router)                            |
+| Library   | React.js                                           |
+| Styling   | Tailwind CSS                                       |
+| Language  | JavaScript                                         |
+| Database / Auth | Supabase                                     |
+| Animation | GSAP, Framer Motion                                |
+| Charts    | Recharts                                           |
+| Email     | Nodemailer (Gmail)                                 |
+| Captcha   | Cloudflare Turnstile                               |
+
+---
+
+# ↪️ Getting Started
+
+Follow these steps to set up the project locally.
+
+## 1. Fork the Repository
+
+Click the **Fork** button at the top-right corner of this repository.
+
+## 2. Clone Your Fork
 
 ```bash
 git clone https://github.com/your-username/AlgoBuddy.git
 ```
 
-3. Create a new branch
+## 3. Navigate to the Project Directory
+
+```bash
+cd AlgoBuddy
+```
+
+## 4. Install Dependencies
+
+```bash
+npm install
+```
+
+## 5. Set Up Environment Variables
+
+Copy the example env file and fill in the required values:
+
+```bash
+cp .env.example .env.local
+```
+
+| Variable                           | Description                                      |
+| ---------------------------------- | ------------------------------------------------ |
+| `EMAIL_USER`                       | Gmail address used to send contact/review emails |
+| `EMAIL_PASSWORD`                   | Gmail App Password (not your account password)   |
+| `NEXT_PUBLIC_GA_ID`                | Google Analytics Measurement ID                  |
+| `NEXT_PUBLIC_SUPABASE_URL`         | Your Supabase project URL                        |
+| `NEXT_PUBLIC_SUPABASE_ANON_KEY`    | Supabase anonymous/public key                    |
+| `SUPABASE_SERVICE_KEY`             | Supabase service role key (server-side only)     |
+| `NEXT_PUBLIC_TURNSTILE_SITE_KEY`   | Cloudflare Turnstile site key                    |
+| `TURNSTILE_SECRET_KEY`             | Cloudflare Turnstile secret key                  |
+| `TURNSTILE_BYPASS`                 | Bypass Turnstile locally (set to `true` to bypass) |
+| `UPSTASH_REDIS_REST_URL`           | Upstash Redis REST URL for rate limiting         |
+| `UPSTASH_REDIS_REST_TOKEN`         | Upstash Redis REST Token for rate limiting       |
+| `GEMINI_API_KEY`                   | Google Gemini API key for AI chatbot             |
+| `AUTO_CONFIRM_EMAIL`               | Auto confirm user email in Supabase (if set)     |
+| `NEXT_PUBLIC_SHOW_COMMUNITY_BADGE`  | Toggle visibility of community badge in UI       |
+| `NEXT_PUBLIC_USE_SPRING_BOOT_API`  | Route requests to Java Spring Boot API locally   |
+| `NEXT_PUBLIC_SPRING_BOOT_API_URL`  | URL of local Java Spring Boot API (default `http://localhost:8080`) |
+
+> ⚠️ **Never commit `.env.local` to version control.** It is already listed in `.gitignore`.
+
+## 6. Start the Development Server
+
+```bash
+npm run dev
+```
+
+The application will start locally at `http://localhost:3000`.
+
+---
+
+# ↪️ Development Workflow
+
+Follow the workflow below while contributing to the project.
+
+## 1. Create a New Branch
+
+Create a separate branch before making any changes.
+
+**Syntax**
+
+```bash
+git checkout -b feature/your-feature-name
+```
+
+**Example**
+
+```bash
+git checkout -b fix/navbar-responsive-issue
+```
+
+---
+
+## 2. Make Your Changes
+
+You can now start working on:
+
+- Bug fixes
+- UI/UX improvements
+- Documentation updates
+- Performance enhancements
+- New visualizers
+
+---
+
+## 3. Commit Your Changes
+
+Write clear and meaningful commit messages.
+
+**Syntax**
 
 ```bash
-git checkout -b feature-name
+git commit -m "type: short-description"
 ```
 
-4. Make your changes
-5. Commit your changes
+**Example**
 
 ```bash
-git commit -m "Added: your feature description"
+git commit -m "fix: improve navbar responsiveness"
 ```
 
-6. Push to GitHub
+**Recommended Commit Types**
+
+| Type       | Purpose                  |
+| ---------- | ------------------------ |
+| `feat`     | New feature              |
+| `fix`      | Bug fix                  |
+| `docs`     | Documentation updates    |
+| `style`    | UI/styling changes       |
+| `refactor` | Code improvements        |
+| `perf`     | Performance optimization |
+
+---
+
+## 4. Push Your Changes
+
+Push your branch to your forked repository.
 
 ```bash
-git push origin feature-name
+git push origin feature/your-branch-name
 ```
 
-7. Open a Pull Request
+---
+
+## 5. Open a Pull Request
+
+After pushing your changes:
+
+1. Open your fork on GitHub
+2. Click **Compare & Pull Request**
+3. Add a clear title and description
+4. Submit the pull request
+
+---
+
+# ↪️ Issue Assignment Process
+
+To ensure fair and efficient issue management, please follow these steps:
+
+1. **Browse open issues** — Check the [Issues](https://github.com/PankajSingh34/AlgoBuddy/issues) tab for tasks labelled `good first issue` or `help wanted`.
+2. **Comment to request assignment** — Leave a comment on the issue you'd like to work on (e.g., *"I'd like to work on this"*). Do not open a PR without being assigned first.
+3. **Wait for assignment** — A maintainer will assign the issue to you. Work will only be reviewed from the assigned contributor.
+4. **Submit within the deadline** — If a deadline is mentioned on the issue, please try to submit your PR within that timeframe. If you need more time, let us know in the issue thread.
+5. **Avoid duplicate work** — Before starting, check that no one else is already assigned to the same issue.
+
+> If you find a bug or want to suggest a feature that isn't already an issue, please open one first before working on it.
+
+---
+
+# ↪️ Pull Request Guidelines
+
+Before submitting a PR:
+
+- Ensure the project builds and runs correctly (`npm run dev`)
+- Test changes on multiple screen sizes (mobile, tablet, desktop)
+- Follow clean coding practices
+- Avoid committing unnecessary files (e.g., `.env.local`, `node_modules`)
+- Use meaningful commit messages following the conventions above
+- Keep PRs focused on a single issue or topic
+- Add screenshots or screen recordings for UI-related changes
+
+---
+
+# ↪️ Reporting Issues
+
+When creating issues, please include:
+
+- A clear, descriptive title
+- A proper explanation of the problem
+- Steps to reproduce the issue
+- Expected vs. actual behaviour
+- Screenshots or error logs, if applicable
+
+---
+
+# ↪️ Need Help?
+
+If you need help while contributing:
+
+- **Open an issue** on GitHub
+- **Start a discussion** in the [Discussions](https://github.com/PankajSingh34/AlgoBuddy/discussions) tab
+- **Ask in Discord** — [discord.gg/Gv2N4U3KAc](https://discord.gg/Gv2N4U3KAc)
+
+We're happy to help new contributors!
 
-# Guidelines
+---
 
-1. Follow clean code practices
-2. Proper commit messages
-3. Test your code before PR
-4. No plagiarism in blog content
+# ↪️ Thank You
 
-## Happy Contributing! 🚀
+Thank you for contributing to AlgoBuddy 💙
 
-Made with ❤️ by Sohan Rout
+Your contributions help make learning Data Structures & Algorithms more interactive and accessible for everyone.
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 000000000..74360cb9e
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,28 @@
+# Build Stage
+FROM eclipse-temurin:21-jdk-alpine AS build
+WORKDIR /app
+
+# Copy maven executable and configuration from the backend folder
+COPY backend/mvnw .
+COPY backend/.mvn .mvn
+COPY backend/pom.xml .
+
+# Copy source code from the backend folder
+COPY backend/src src
+
+# Make mvnw executable and build the application
+RUN chmod +x ./mvnw
+RUN ./mvnw clean package -DskipTests
+
+# Run Stage
+FROM eclipse-temurin:21-jre-alpine
+WORKDIR /app
+
+# Copy the built jar from the build stage
+COPY --from=build /app/target/*.jar app.jar
+
+# Expose the port the app runs on
+EXPOSE 8080
+
+# Run the jar file
+ENTRYPOINT ["java", "-jar", "app.jar"]
diff --git a/EnvExample.txt b/EnvExample.txt
deleted file mode 100755
index 4cafc9f01..000000000
--- a/EnvExample.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-EMAIL_USER=Your App Email
-EMAIL_PASSWORD=Your Google App Password
-NEXT_PUBLIC_GA_ID=Your Google Analytics ID
-
-NEXT_PUBLIC_SUPABASE_URL=Your supabase Url
-NEXT_PUBLIC_SUPABASE_ANON_KEY=Your Anon Key
-NEXT_PUBLIC_TURNSTILE_SITE_KEY=Your Cloudfare Captcha Key
-
-TURNSTILE_SECRET_KEY=Your Cloudfare backend route api key
-SUPABASE_SERVICE_KEY=Your supabase service key
\ No newline at end of file
diff --git a/ISSUE_CANDIDATES_AUTOMATION.md b/ISSUE_CANDIDATES_AUTOMATION.md
new file mode 100644
index 000000000..c00ed9af4
--- /dev/null
+++ b/ISSUE_CANDIDATES_AUTOMATION.md
@@ -0,0 +1,36 @@
+# Issue Candidates
+
+1. Title: test : add unit tests for storage.js
+   Type: test
+   Files: src/utils/storage.js, __tests__/storage.test.js
+   Summary: Add unit tests for saveToStorage, loadFromStorage, and removeFromStorage utilities which handle localStorage serialization and error handling.
+   Verification: npx jest __tests__/storage.test.js
+   Conflict risk: low
+
+2. Title: test : add unit tests for apiErrors.js
+   Type: test
+   Files: src/lib/apiErrors.js, __tests__/apiErrors.test.js
+   Summary: Add unit tests for ApiError, AuthError, RateLimitError, ValidationError, and ConfigError class constructors and property assignments.
+   Verification: npx jest __tests__/apiErrors.test.js
+   Conflict risk: low
+
+3. Title: test : add unit tests for sortingGenerators.js
+   Type: test
+   Files: src/utils/sortingGenerators.js, __tests__/sortingGenerators.test.js
+   Summary: Add unit tests for all six generator-based sorting algorithm implementations (bubble, selection, insertion, merge, quick, heap) to verify correct step yield behavior.
+   Verification: npx jest __tests__/sortingGenerators.test.js
+   Conflict risk: low
+
+4. Title: test : add unit tests for cookieConsent.js
+   Type: test
+   Files: src/lib/cookieConsent.js, __tests__/cookieConsent.test.js
+   Summary: Add unit tests for getStoredPreferences, saveStoredPreferences, hasAnalyticsConsent, hasMarketingConsent, and hasFunctionalConsent utilities.
+   Verification: npx jest __tests__/cookieConsent.test.js
+   Conflict risk: low
+
+5. Title: test : add unit tests for shared-utils.js
+   Type: test
+   Files: src/lib/shared-utils.js, __tests__/sharedUtils.test.js
+   Summary: Add unit tests for isValidHttpUrl, escapeHtml, and getSupabaseConfig utilities including edge cases for URL validation and HTML escaping.
+   Verification: npx jest __tests__/sharedUtils.test.js
+   Conflict risk: low
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 000000000..d67bdeeb9
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pankaj Singh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index 515a977aa..ec81a84ff 100755
--- a/README.md
+++ b/README.md
@@ -1,53 +1,703 @@
-<h1 align="center">AlgoBuddy</h1>
+<div align="center">
 
-<p align="center">
-  Visualize & Learn DSA Algorithms with Animations and Interactive UI.
-</p>
+<!-- Animated Header Banner -->
+<img src="https://capsule-render.vercel.app/api?type=waving&color=0:0f172a,100:6366f1&height=210&section=header&text=AlgoBuddy&fontSize=68&fontColor=ffffff&fontAlignY=34&desc=Visualize.%20Understand..%20Master...&descAlignY=66&descSize=20&animation=fadeIn" width="100%"/>
 
----
+<br/>
+
+[![Live Demo](https://img.shields.io/badge/Live%20Demo-algobuddy.me-6366f1?style=for-the-badge&logoColor=white)](https://algobuddy.me)
+[![License: MIT](https://img.shields.io/badge/License-MIT-22c55e?style=for-the-badge)](LICENSE)
+[![CI](https://github.com/PankajSingh34/AlgoBuddy/actions/workflows/test.yml/badge.svg)](https://github.com/PankajSingh34/AlgoBuddy/actions/workflows/test.yml)
+[![Security Policy](https://img.shields.io/badge/Security-Policy-red?style=for-the-badge&logo=shieldsdotio&logoColor=white)](SECURITY.md)
+[![Stars](https://img.shields.io/github/stars/PankajSingh34/AlgoBuddy?style=for-the-badge&color=f59e0b)](https://github.com/PankajSingh34/AlgoBuddy/stargazers)
+[![Forks](https://img.shields.io/github/forks/PankajSingh34/AlgoBuddy?style=for-the-badge&color=6366f1)](https://github.com/PankajSingh34/AlgoBuddy/forks)
+[![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-ec4899?style=for-the-badge)](CONTRIBUTING.md)
+[![Discord](https://img.shields.io/badge/Discord-Join%20Us-5865F2?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/Gv2N4U3KAc)
+
+<br/>
+
+> **An open-source, interactive DSA learning platform that brings algorithms to life through step-by-step animations, structured learning paths, and progress tracking.**
+>
+> Built for students, developers, and interview candidates who want to **see** how algorithms work — not just read about them.
+
+[**Features**](#features) · [**Screenshots**](#screenshots) · [**Tech Stack**](#tech-stack) · [**Quick Start**](#quick-start) · [**Project Structure**](#project-structure) · [**Contributing**](#contributing) · [**License**](#license)
+
+<br/>
+
+</div>
+
+## Table of Contents
+
+- [Why AlgoBuddy?](#why-algobuddy)
+- [Features](#features)
+  - [Algorithm Visualizer](#algorithm-visualizer)
+  - [User System & Progress Tracking](#user-system--progress-tracking)
+  - [Blog Platform](#blog-platform)
+  - [UX & Design](#ux--design)
+- [Supported Algorithms & Data Structures](#supported-algorithms--data-structures)
+- [Screenshots](#screenshots)
+- [Tech Stack](#tech-stack)
+- [Architecture](#architecture)
+- [Quick Start](#quick-start)
+  - [Prerequisites](#prerequisites)
+  - [1. Clone the Repository](#1-clone-the-repository)
+  - [2. Install Dependencies](#2-install-dependencies)
+  - [3. Configure Database Schema](#3-configure-database-schema)
+  - [4. Configure Environment Variables](#4-configure-environment-variables)
+  - [5. Start the Development Server](#5-start-the-development-server)
+  - [6. Other Commands](#6-other-commands)
+- [Project Structure](#project-structure)
+- [Project Roadmap](#project-roadmap)
+- [Contributing](#contributing)
+- [Community](#community)
+- [Star History](#star-history)
+- [Contributors](#contributors)
+- [License](#license)
+
+<br/>
+
+## Why AlgoBuddy?
 
-<p align="center">
-  <img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License: Apache 2.0">
-</p>
-<p align="center">
-  <p align="left">Product Built Using:</p>
-  <a href="https://skillicons.dev">
-    <img src="https://skillicons.dev/icons?i=git,js,react,nextjs,tailwind,supabase,redis,npm,vercel,googlecloud" />
-  </a>
-</p>
+> *"Tell me and I forget, teach me and I remember, involve me and I learn."* — Benjamin Franklin
+
+Most DSA resources are walls of text and static diagrams. **AlgoBuddy changes that** by letting you interact with every data structure and algorithm in real time.
+
+Tools like [VisuAlgo](https://visualgo.net/) show animations but are read-only. AlgoBuddy goes further: algorithms are coupled with **user progress tracking, streaks, AI-assisted explanations, and a practice sheet** — so it functions as a learning system, not just a reference. It's also fully open-source, so every visualizer is a contribution opportunity.
+
+<table>
+<td width="52%">
+
+**The Problem**
+- Static textbooks don't show algorithm flow
+- Copying code doesn't build understanding
+- No feedback loop on what you've mastered
+- Hard to stay motivated without visible progress
+
+</td>
+<td width="47%">
+
+**The AlgoBuddy Way**
+- **Watch** algorithms execute step-by-step
+- **Interact** with data structures directly
+- **Track** your learning journey with streaks
+- **Read** companion blogs for deeper theory
+
+</td>
+</table>
+
+<br/>
 
 ## Features
 
-- DSA Algorithm Visualizer
-- Custom Array Input
-- Linear Search & Binary Search
-- All Sorting Algorithms (Except Heap Sort)
-- Stack Visualizer
-- Dark / Light Mode Toggle
-- Responsive Design (In Progress)
-- Blog Explanations via Medium (Upcoming)
-- Queue Visualizer (Upcoming)
+### Algorithm Visualizer
+
+Animated, step-by-step visualizations for a wide range of DSA topics:
+
+<details>
+<summary><strong>Sorting, Searching, Stack, Queue, Linked List</strong></summary>
+
+<table>
+<tr>
+<td align="center" width="20%">
+
+**Sorting**
+</td>
+<td align="center" width="20%">
+
+**Searching**
+</td>
+<td align="center" width="20%">
+
+**Stack**
+</td>
+<td align="center" width="20%">
+
+**Queue**
+</td>
+<td align="center" width="20%">
+
+**Linked List**
+</td>
+</tr>
+<tr>
+<td>
+
+- Bubble Sort
+- Insertion Sort
+- Selection Sort
+- Merge Sort
+- Quick Sort
+- Shell Sort
+- Radix Sort
+- Counting Sort
+
+</td>
+<td>
+
+- Linear Search
+- Binary Search
+- Comparison Mode
+- Sliding Window
+
+</td>
+<td>
+
+- Push / Pop
+- Peek / isEmpty
+- Polish Notation
+- Array & LL impl.
+
+</td>
+<td>
+
+- Enqueue / Dequeue
+- Circular Queue
+- Priority Queue
+- Double-ended
+- Array & LL impl.
+
+</td>
+<td>
+
+- Singly Linked
+- Doubly Linked
+- Circular
+- Insert / Delete
+- Reverse / Merge
+
+</td>
+</tr>
+</table>
+
+</details>
+
+<details>
+<summary><strong>Trees, HashMap, Graph, String, Complexity</strong></summary>
+
+<table>
+<tr>
+<td align="center" width="20%">
+
+**Trees**
+</td>
+<td align="center" width="20%">
+
+**HashMap**
+</td>
+<td align="center" width="20%">
+
+**Graph**
+</td>
+<td align="center" width="20%">
+
+**String**
+</td>
+<td align="center" width="20%">
+
+**Complexity**
+</td>
+</tr>
+<tr>
+<td>
+
+- Binary Tree types
+- In-order Traversal
+- BST operations
+- Heaps & Tries
+
+</td>
+<td>
+
+- Insert / Search / Delete
+- Collision handling
+- Visual hash buckets
+
+</td>
+<td>
+
+- BFS / DFS
+- Dijkstra / A*
+- Bellman-Ford
+- Floyd-Warshall
+- Kruskal / Prim
+- Tarjan / Kosaraju
+- Ford-Fulkerson
+- Topological Sort
+
+</td>
+<td>
+
+- KMP Algorithm
+- Z-Algorithm
+
+</td>
+<td>
+
+- Time & Space analysis
+- Side-by-side comparisons
+- Powered by Recharts
+
+</td>
+</tr>
+</table>
+
+</details>
+
+<br/>
+
+### User System & Progress Tracking
+
+| Feature | Description |
+|---|---|
+| **Auth** | Email/password with Cloudflare Turnstile captcha + Google OAuth |
+| **Dashboard** | Module-level progress tracking per data structure |
+| **Streaks** | Activity heatmap (last 90 days) + daily streak counter |
+| **AI Assistant** | Built-in chatbot powered by Gemini for concept help |
+| **Bookmarks** | Save and revisit problems with the bookmark system |
+
+<br/>
+
+### Blog Platform
+
+| Feature | Description |
+|---|---|
+| **Categories** | Filter articles by DSA topic |
+| **Full-text Search** | Instantly find relevant articles |
+| **Reading Time** | Estimated reading time on every article |
+| **Rich Content** | In-depth articles on core DSA concepts |
+
+<br/>
+
+### UX & Design
+
+| Feature | Description |
+|---|---|
+| **Dark/Light Mode** | Theme toggle persisted to `localStorage` |
+| **Responsive** | Optimized for mobile, tablet, and desktop |
+| **Animations** | Smooth visualizations via GSAP + Framer Motion |
+| **Particle Effects** | Interactive background using tsParticles |
+
+<br/>
+
+## Supported Algorithms & Data Structures
+
+| Category | Coverage | Visualization |
+|----------|----------|:-------------:|
+| Sorting | Bubble, Selection, Insertion, Merge, Quick, Shell, Radix, Counting | ✓ |
+| Searching | Linear, Binary, Sliding Window | ✓ |
+| Stack | Push, Pop, Peek, Array & Linked List | ✓ |
+| Queue | Simple, Circular, Priority, Deque | ✓ |
+| Linked List | Singly, Doubly, Circular | ✓ |
+| Trees | Binary Tree, BST, Heap, Trie | ✓ |
+| HashMap | Insert, Search, Delete, Collision Handling | ✓ |
+| Graph | BFS, DFS, Dijkstra, A*, Bellman-Ford, Floyd-Warshall, Kruskal, Prim, Tarjan, Kosaraju, Ford-Fulkerson, Topological Sort | ✓ |
+| String | KMP Algorithm, Z-Algorithm | ✓ |
+| Complexity Analysis | Time & Space Complexity Graphs | ✓ |
+
+## Screenshots
+
+![Home Page](public/screenshots/Home-page.png)
+
+*Landing page with algorithm category navigation, feature overview, and community stats.*
+
+<br/>
+
+![Visualizer](public/screenshots/visualizer-page.png)
+
+*Step-by-step algorithm visualizer with controls, pseudocode panel, and complexity info.*
+
+<br/>
+
+<details>
+<summary><strong>Authentication Page</strong> — Login and signup with Google OAuth or email/password, protected by Cloudflare Turnstile.</summary>
+
+![Login Page](public/screenshots/login-page.png)
+
+</details>
+
+<details>
+<summary><strong>Queue Visualization</strong> — Animated circular queue showing enqueue/dequeue operations with pointer movement.</summary>
+
+![Queue Visualization](public/screenshots/queue-visualization-page.png)
+
+</details>
+
+<details>
+<summary><strong>Queue Operations</strong> — Side-by-side operations panel with live memory-state rendering.</summary>
+
+![Queue Operations](public/screenshots/queue-operations-page.png)
+
+</details>
+
+
+<br/>
 
-## Future Plans
+## Tech Stack
 
-- Make the platform interactive
-- Improve Mobile Responsiveness
-- Social Media Promotion
+<div align="center">
 
-## Connect With Me
+| Layer | Technology | Purpose |
+|:---|:---|:---|
+| **Framework** | ![Next.js](https://img.shields.io/badge/Next.js_16-000?logo=nextdotjs&logoColor=white) | App Router, SSR, API routes |
+| **Styling** | ![Tailwind](https://img.shields.io/badge/Tailwind_CSS-06B6D4?logo=tailwindcss&logoColor=white) | Utility-first CSS framework |
+| **Database** | ![Supabase](https://img.shields.io/badge/Supabase-3ECF8E?logo=supabase&logoColor=white) | PostgreSQL + Auth + Realtime |
+| **Animation** | ![GSAP](https://img.shields.io/badge/GSAP-88CE02?logo=greensock&logoColor=white) ![Framer](https://img.shields.io/badge/Framer_Motion-0055FF?logo=framer&logoColor=white) | Visualizer animations |
+| **Charts** | ![Recharts](https://img.shields.io/badge/Recharts-FF6384?logo=chartdotjs&logoColor=white) | Complexity comparison graphs |
+| **Editor** | ![Monaco](https://img.shields.io/badge/Monaco_Editor-007ACC?logo=visualstudiocode&logoColor=white) | In-browser code editor |
+| **Email** | ![Nodemailer](https://img.shields.io/badge/Nodemailer-339933?logo=gmail&logoColor=white) | Transactional emails via Gmail |
+| **Captcha** | ![Cloudflare](https://img.shields.io/badge/Turnstile-F38020?logo=cloudflare&logoColor=white) | Bot protection on auth |
+| **Analytics** | ![GA4](https://img.shields.io/badge/Google_Analytics_4-E37400?logo=googleanalytics&logoColor=white) | Usage tracking |
+| **Rate Limiting** | ![Upstash](https://img.shields.io/badge/Upstash_Redis-DC382D?logo=redis&logoColor=white) | API rate limiting |
+| **Deployment** | ![Vercel](https://img.shields.io/badge/Vercel-000?logo=vercel&logoColor=white) | Serverless hosting |
+| **CI/CD** | ![GitHub Actions](https://img.shields.io/badge/GitHub_Actions-2088FF?logo=githubactions&logoColor=white) | Multi-OS testing pipeline |
 
-<a href="https://www.linkedin.com/in/pankaj-singh-2a968b212/">
-  <img src="https://skillicons.dev/icons?i=linkedin" alt="LinkedIn" />
+</div>
+
+<br/>
+
+## Architecture
+
+For a comprehensive guide on component boundaries, database triggers, data flows, and codebase principles, see the [System Architecture Guide](./Architecture.md).
+
+```mermaid
+graph TB
+    subgraph Client["Client — Next.js 16 App Router"]
+        UI["UI Components<br/>(React + Tailwind)"]
+        VIS["Visualizer Engine<br/>(GSAP + Framer Motion)"]
+        CHARTS["Complexity Graphs<br/>(Recharts)"]
+        EDITOR["Code Editor<br/>(Monaco)"]
+        THEME["Theme System<br/>(Dark/Light)"]
+    end
+    subgraph API["API Layer"]
+        AUTH_API["Auth Routes"]
+        CONTACT["Contact API"]
+        REVIEW["Review API"]
+        CHATBOT["AI Assistant<br/>(Gemini API)"]
+    end
+    subgraph Services["External Services"]
+        SUPA["Supabase<br/>(DB + Auth)"]
+        CF["Cloudflare<br/>Turnstile"]
+        GA["Google<br/>Analytics"]
+        REDIS["Upstash<br/>Redis"]
+        MAIL["Gmail<br/>(Nodemailer)"]
+        GEMINI["Google<br/>Gemini API"]
+    end
+    UI --> VIS
+    UI --> CHARTS
+    UI --> EDITOR
+    UI --> THEME
+    UI --> API
+    UI --> SUPA
+    AUTH_API --> SUPA
+    AUTH_API --> CF
+    CONTACT --> MAIL
+    CONTACT --> CF
+    REVIEW --> MAIL
+    REVIEW --> CF
+    CHATBOT --> REDIS
+    CHATBOT --> GEMINI
+    UI --> GA
+    style Client fill:#1e1b4b,stroke:#818cf8,stroke-width:3px,color:#e0e7ff
+    style API fill:#1e3a5f,stroke:#38bdf8,stroke-width:3px,color:#e0f2fe
+    style Services fill:#064e3b,stroke:#34d399,stroke-width:3px,color:#d1fae5
+```
+
+<br/>
+
+## Quick Start
+
+### Prerequisites
+
+| Tool | Version |
+|---|---|
+| **Node.js** | `>= 20.x` |
+| **npm** | `>= 10.x` |
+| **Git** | Latest |
+
+### 1. Clone the Repository
+
+```bash
+git clone https://github.com/PankajSingh34/AlgoBuddy.git
+cd AlgoBuddy
+```
+
+### 2. Install Dependencies
+
+```bash
+npm install
+```
+
+> **Note:** This project uses `isolated-vm` for secure code execution. If you encounter build errors, ensure you have Python and a C++ compiler installed (required for native addon compilation).
+
+### 3. Configure Database Schema
+
+The full schema is maintained in **[`supabase_setup.sql`](./supabase_setup.sql)** at the project root — run it in the Supabase SQL Editor. It covers RLS policies for all tables, admin policies for `community_contributors`, and two stored functions for atomic streak updates.
+
+> **Note:** Without running the full schema, progress tracking, bookmarks, avatars, and streak features will not work locally.
+
+<details>
+<summary><strong>View table overview and example RLS policy</strong></summary>
+
+| Table | Purpose |
+|---|---|
+| `user_progress` | Tracks per-problem completion status |
+| `user_activity` | Powers the 90-day activity heatmap |
+| `user_profiles` | Avatar URL and community join status |
+| `problem_bookmarks` | User-saved problem bookmarks |
+| `user_practice_stats` | Streak counters (current + longest) |
+| `community_contributors` | Public contributor registry |
+| `topic_comments` | Per-visualizer discussion threads |
+| `pending_messages` | SMTP fallback queue for contact/review emails |
+| `newsletter_subscriptions` | Footer newsletter opt-ins |
+
+Representative RLS setup for `user_progress`:
+
+```sql
+ALTER TABLE user_progress ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Users can read own progress" ON user_progress
+  FOR SELECT USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can insert own progress" ON user_progress
+  FOR INSERT WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "Users can update own progress" ON user_progress
+  FOR UPDATE USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id);
+```
+
+The schema also defines `increment_streak_on_completion()` and `upsert_progress_and_update_streak()` — two PL/pgSQL functions that update streaks atomically to avoid TOCTOU race conditions. See [`supabase_setup.sql`](./supabase_setup.sql) for the full definitions.
+
+</details>
+
+### 4. Configure Environment Variables
+
+Create a `.env.local` file in the project root. See [`.env.example`](.env.example) for the full reference.
+
+<details>
+<summary><strong>View all environment variables</strong></summary>
+
+```env
+# ──────────── Email ────────────
+EMAIL_USER=your-email@gmail.com
+EMAIL_PASSWORD=your-google-app-password
+REVIEW_INBOX_EMAIL=optional-inbox@gmail.com
+
+# ──────────── Supabase ────────────
+NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
+SUPABASE_SERVICE_KEY=your-supabase-service-key
+
+# ──────────── Cloudflare Turnstile ────────────
+NEXT_PUBLIC_TURNSTILE_SITE_KEY=your-turnstile-site-key
+TURNSTILE_SECRET_KEY=your-turnstile-secret-key
+
+# ──────────── Google Analytics ────────────
+NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
+
+# ──────────── AI Chatbot ────────────
+GEMINI_API_KEY=your-gemini-api-key
+
+# ──────────── Rate Limiting (Production) ────────────
+UPSTASH_REDIS_REST_URL=your-upstash-url
+UPSTASH_REDIS_REST_TOKEN=your-upstash-token
+
+# ──────────── Spring Boot Backend CORS (Optional in dev, required in prod) ────────────
+ALLOWED_ORIGINS=http://localhost:3000
+APP_ENV=dev
+```
+
+</details>
+
+### 5. Start the Development Server
+
+```bash
+npm run dev
+```
+
+Open **[http://localhost:3000](http://localhost:3000)** and start visualizing!
+
+### 6. Other Commands
+
+```bash
+npm run build          # Production build
+npm run start          # Start production server
+npm run lint           # Run ESLint
+npm run test           # Run lint + security tests
+npm run test:security  # Run XSS security tests only
+```
+
+<br/>
+
+## Project Structure
+
+<details>
+<summary><strong>View full directory tree</strong></summary>
+
+```
+AlgoBuddy/
+│
+├── src/app/                         # Next.js App Router
+│   ├── api/                         #   API routes (auth, chatbot, mysheet, etc.)
+│   ├── arena/                       #   Tournament / arena page
+│   ├── dashboard/                   #   User dashboard
+│   ├── login/                       #   Auth pages
+│   ├── visualizer/                  #   Algorithm visualizer pages
+│   │   ├── array/                   #     Sorting & array algorithms
+│   │   ├── graph/                   #     Graph algorithm visualizers
+│   │   ├── string/                  #     String algorithm visualizers (KMP, Z-Algo)
+│   │   └── ...                      #     Other DSA visualizers
+│   │
+│   ├── components/                  #   Shared UI components
+│   │   ├── dashboard/               #     Heatmap, streaks
+│   │   ├── models/                  #     Data structure models
+│   │   └── ui/                      #     Reusable UI primitives
+│   │
+│   ├── hooks/                       #   Custom React hooks
+│   ├── layout.jsx                   #   Root layout
+│   └── page.jsx                     #   Landing page
+│
+├── src/features/algorithms/         # Algorithm logic (pure functions)
+│   ├── graph/                       #   Graph algorithm implementations
+│   └── string/                      #   String algorithm implementations
+│
+├── src/lib/                         # Utility libraries
+│   ├── supabase.js                  #   Supabase client config
+│   ├── auth.js                      #   Auth helpers
+│   ├── activity.js                  #   Activity tracking logic
+│   └── gtag.js                      #   Google Analytics helper
+│
+├── backend/                         # Spring Boot API (optional, for practice features)
+├── arena-socket-server/             # WebSocket server for tournament arena
+├── public/                          # Static assets & screenshots
+├── docs/                            # Documentation
+├── security-tests/                  # Security test suite
+├── .github/                         # GitHub Actions workflows
+│
+├── supabase_setup.sql               # Database schema & RLS policies
+├── middleware.js                    # Next.js middleware (auth, rate limiting)
+├── next.config.mjs                  # Next.js configuration
+├── tailwind.config.js               # Tailwind configuration
+└── package.json                     # Dependencies & scripts
+```
+
+</details>
+
+<br/>
+
+## Project Roadmap
+
+| Status | Item |
+|:------:|------|
+| Done | Interactive algorithm visualizations |
+| Done | User authentication and progress tracking |
+| Done | AI-powered learning assistant |
+| Done | Graph algorithm visualizers |
+| Done | String algorithm visualizers (KMP, Z-Algorithm) |
+| In Progress | Expand the collection of algorithm and data structure visualizations |
+| In Progress | Improve accessibility and mobile experience |
+| In Progress | Enhance learning resources and documentation |
+| Planned | Introduce additional educational content and practice modules |
+| Planned | Continue community-driven improvements and feature enhancements |
+
+## Contributing
+
+We welcome contributions! AlgoBuddy is built by the community, for the community.
+
+### Contribution Areas
+
+| Area | What you can do |
+|---|---|
+| **Bug Fixes** | Squash bugs and resolve issues |
+| **UI/UX** | Improve responsiveness, accessibility, design |
+| **New Visualizers** | Add new DSA visualizers & animations |
+| **Documentation** | Improve guides, README, contributor docs |
+| **Performance** | Optimize app performance & efficiency |
+| **Themes** | Enhance dark/light mode experience |
+
+### Getting Started
+
+<details>
+<summary><strong>Step-by-step: fork, branch, commit, PR</strong></summary>
+
+```bash
+# 1. Fork this repo and clone your fork
+git clone https://github.com/YOUR_USERNAME/AlgoBuddy.git
+
+# 2. Create a feature branch
+git checkout -b feature/your-feature-name
+
+# 3. Make your changes and commit
+git commit -m "feat: describe your change"
+
+# 4. Push and open a PR
+git push origin feature/your-feature-name
+```
+
+</details>
+
+> For detailed guidelines, please read our [**Contributing Guide**](CONTRIBUTING.md) and [**Code of Conduct**](CODE_OF_CONDUCT.md).
+
+### Issue Assignment Process
+
+1. Browse [**open issues**](https://github.com/PankajSingh34/AlgoBuddy/issues) or create a new one
+2. Comment asking to be assigned
+3. Wait for maintainer assignment before starting
+4. Submit a PR referencing the issue number
+
+<br/>
+
+## Community
+
+<div align="center">
+
+[![Discord](https://img.shields.io/badge/Join_our_Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/Gv2N4U3KAc)
+
+Ask questions, share ideas, show off your contributions, and connect with fellow learners!
+
+</div>
+
+<br/>
+
+## Star History
+
+<div align="center">
+
+If AlgoBuddy helped you learn, please consider giving it a star — it means a lot!
+
+[![Star History Chart](https://api.star-history.com/svg?repos=PankajSingh34/AlgoBuddy&type=Date)](https://star-history.com/#PankajSingh34/AlgoBuddy&Date)
+
+</div>
+
+<br/>
+
+## Contributors
+
+<div align="center">
+
+<a href="https://github.com/PankajSingh34/AlgoBuddy/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=PankajSingh34/AlgoBuddy&max=100&columns=12" />
 </a>
 
+</div>
+
+<br/>
+
 ## License
 
-Apache 2.0 License — See `LICENSE` for details.
+<div align="center">
 
-# Contribution
+This project is licensed under the **MIT License** — see the [**LICENSE**](LICENSE) file for details.
 
-See [CONTRIBUTING.md](./CONTRIBUTING.md)
+</div>
 
-Code of Conduct — [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md)
+<br/>
 
 ---
+
+<div align="center">
+
+**Built with ♥ by the AlgoBuddy community**
+
+[Website](https://www.algobuddy.me/) · [Discord](https://discord.gg/Gv2N4U3KAc) · [Issues](https://github.com/PankajSingh34/AlgoBuddy/issues) · [Pull Requests](https://github.com/PankajSingh34/AlgoBuddy/pulls)
+
+</div>
diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 000000000..4012fcbdd
--- /dev/null
+++ b/SECURITY.md
@@ -0,0 +1,43 @@
+# Security Policy
+
+## Supported Versions
+
+The following versions of **AlgoBuddy** are currently supported with security updates:
+
+| Version | Supported          |
+| ------- | ------------------ |
+| main    | ✅ Yes             |
+
+## Reporting a Vulnerability
+
+If you discover a security vulnerability in **AlgoBuddy**, please **do not open a public issue**.
+
+Instead, report it responsibly by:
+
+- 📧 Opening a **GitHub Private Security Advisory**
+- 📧 Reaching out to the maintainer directly via their [GitHub profile](https://github.com/PankajSingh34)
+- 💬 Sending a private message through GitHub's messaging or social links listed in the profile
+
+### What to include in your report:
+- A clear description of the vulnerability
+- Steps to reproduce the issue
+- Potential impact assessment
+- Any suggested fix (optional but appreciated)
+
+## Response Timeline
+
+| Action                        | Timeframe         |
+| ----------------------------- | ----------------- |
+| Acknowledgement of report     | Within 48 hours   |
+| Status update                 | Within 7 days     |
+| Patch / fix release           | Within 30 days    |
+
+## Responsible Disclosure
+
+We follow a **responsible disclosure** policy. Please give us adequate time to patch the issue before any public disclosure. We deeply appreciate security researchers who help keep **AlgoBuddy** safe. 🙏
+
+## References
+
+- [AlgoBuddy Repository](https://github.com/PankajSingh34/AlgoBuddy)
+- [GitHub Security Advisories](https://docs.github.com/en/code-security/security-advisories)
+- [Adding a Security Policy to your repo](https://docs.github.com/en/code-security/getting-started/adding-a-security-policy-to-your-repository)
diff --git a/__tests__/activityStreak.test.mjs b/__tests__/activityStreak.test.mjs
new file mode 100644
index 000000000..9aaab015c
--- /dev/null
+++ b/__tests__/activityStreak.test.mjs
@@ -0,0 +1,90 @@
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import { computeStreak } from "../src/lib/activity.js";
+
+const fixedNow = new Date("2026-06-19T12:00:00Z");
+
+function activity(date, field = "activity_date") {
+  return { [field]: `${date}T08:00:00Z` };
+}
+
+describe("computeStreak", () => {
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  test("returns 0 for empty input", () => {
+    expect(computeStreak([])).toBe(0);
+    expect(computeStreak(null)).toBe(0);
+  });
+
+  test("counts a single activity today", () => {
+    jest.useFakeTimers().setSystemTime(fixedNow);
+
+    expect(computeStreak([activity("2026-06-19")])).toBe(1);
+  });
+
+  test("counts consecutive days ending today", () => {
+    jest.useFakeTimers().setSystemTime(fixedNow);
+
+    expect(
+      computeStreak([
+        activity("2026-06-19"),
+        activity("2026-06-18"),
+        activity("2026-06-17"),
+      ]),
+    ).toBe(3);
+  });
+
+  test("counts consecutive days ending yesterday", () => {
+    jest.useFakeTimers().setSystemTime(fixedNow);
+
+    expect(
+      computeStreak([
+        activity("2026-06-18"),
+        activity("2026-06-17"),
+        activity("2026-06-16"),
+      ]),
+    ).toBe(3);
+  });
+
+  test("stops counting at the first date gap", () => {
+    jest.useFakeTimers().setSystemTime(fixedNow);
+
+    expect(
+      computeStreak([
+        activity("2026-06-19"),
+        activity("2026-06-18"),
+        activity("2026-06-16"),
+      ]),
+    ).toBe(2);
+  });
+
+  test("returns 0 when the last activity is older than yesterday", () => {
+    jest.useFakeTimers().setSystemTime(fixedNow);
+
+    expect(computeStreak([activity("2026-06-17")])).toBe(0);
+  });
+
+  test("deduplicates multiple activities on the same day", () => {
+    jest.useFakeTimers().setSystemTime(fixedNow);
+
+    expect(
+      computeStreak([
+        activity("2026-06-19"),
+        activity("2026-06-19"),
+        activity("2026-06-18"),
+      ]),
+    ).toBe(2);
+  });
+
+  test("supports created_at when activity_date is absent", () => {
+    jest.useFakeTimers().setSystemTime(fixedNow);
+
+    expect(
+      computeStreak([
+        activity("2026-06-19", "created_at"),
+        activity("2026-06-18", "created_at"),
+      ]),
+    ).toBe(2);
+  });
+});
diff --git a/__tests__/components/AlgorithmComparator.test.jsx b/__tests__/components/AlgorithmComparator.test.jsx
new file mode 100644
index 000000000..bd2466286
--- /dev/null
+++ b/__tests__/components/AlgorithmComparator.test.jsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import AlgorithmComparator from "@/app/visualizer/complexity-analyzer/components/AlgorithmComparator";
+import { toast } from "react-hot-toast";
+
+jest.mock("react-hot-toast", () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+describe("AlgorithmComparator copy controls", () => {
+  let writeTextMock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    writeTextMock = jest.fn().mockResolvedValue(undefined);
+    Object.defineProperty(global.navigator, "clipboard", {
+      value: {
+        writeText: writeTextMock,
+      },
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  it("copies the exact time and space complexity values", async () => {
+    render(
+      <AlgorithmComparator
+        algorithms={[
+          { name: "Binary Search", time: "O(log n)", space: "O(1)" },
+        ]}
+      />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /copy time complexity for binary search/i }));
+    fireEvent.click(screen.getByRole("button", { name: /copy space complexity for binary search/i }));
+
+    await waitFor(() => {
+      expect(writeTextMock).toHaveBeenNthCalledWith(1, "O(log n)");
+      expect(writeTextMock).toHaveBeenNthCalledWith(2, "O(1)");
+      expect(toast.success).toHaveBeenCalledTimes(2);
+      expect(toast.success).toHaveBeenCalledWith("Copied to clipboard!");
+    });
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/CodeBlock.test.jsx b/__tests__/components/CodeBlock.test.jsx
new file mode 100644
index 000000000..d57480b42
--- /dev/null
+++ b/__tests__/components/CodeBlock.test.jsx
@@ -0,0 +1,90 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import CodeBlock from "@/app/components/ui/CodeBlock";
+import { toast } from "react-hot-toast";
+
+jest.mock("framer-motion", () => {
+  const React = require("react");
+
+  const passthrough = (Tag) => ({ children, whileHover, whileTap, ...props }) =>
+    React.createElement(Tag, props, children);
+
+  return {
+    AnimatePresence: ({ children }) => React.createElement(React.Fragment, null, children),
+    motion: {
+      div: passthrough("div"),
+      button: passthrough("button"),
+      span: passthrough("span"),
+    },
+  };
+});
+
+jest.mock("react-hot-toast", () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const codeExamples = {
+  javascript: "function sum(arr) {\n  return arr.reduce((acc, value) => acc + value, 0);\n}",
+  python: "def sum_values(arr):\n    return sum(arr)",
+  java: "class SumValues {\n  int sum(int[] arr) { return 0; }\n}",
+  c: "int sum(int* arr) {\n  return 0;\n}",
+  cpp: "int sum(std::vector<int>& arr) {\n  return 0;\n}",
+};
+
+const fileNames = {
+  javascript: "sum.js",
+  python: "sum.py",
+  java: "Sum.java",
+  c: "sum.c",
+  cpp: "sum.cpp",
+};
+
+describe("CodeBlock copy button", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    console.error.mockRestore?.();
+  });
+
+  it("copies the currently displayed language code and shows success feedback", async () => {
+    const user = userEvent.setup();
+
+    render(<CodeBlock variant="standard" title="Example" codeExamples={codeExamples} fileNames={fileNames} />);
+
+    const copyButton = screen.getByRole("button", { name: /copy code/i });
+    expect(copyButton).toHaveAttribute("aria-label", "Copy code");
+    expect(copyButton.className).toContain("focus-visible:ring-2");
+
+    await user.click(screen.getByRole("button", { name: /python/i }));
+    expect(
+      screen.getByText((content, element) => {
+        return element?.tagName.toLowerCase() === "code" && element.textContent === codeExamples.python;
+      })
+    ).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: /copy code/i }));
+
+    await waitFor(() => expect(toast.success).toHaveBeenCalledWith("Code copied!"));
+  });
+
+  it("shows an error toast when copying fails", async () => {
+    const user = userEvent.setup();
+
+    Object.defineProperty(navigator, "clipboard", {
+      value: undefined,
+      configurable: true,
+    });
+
+    render(<CodeBlock variant="standard" title="Example" codeExamples={codeExamples} fileNames={fileNames} />);
+
+    await user.click(screen.getByRole("button", { name: /copy code/i }));
+
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith("Could not copy code."));
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/CopyButton.test.jsx b/__tests__/components/CopyButton.test.jsx
new file mode 100644
index 000000000..027f44eb9
--- /dev/null
+++ b/__tests__/components/CopyButton.test.jsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import CopyButton from "@/app/components/ui/CopyButton";
+import { toast } from "react-hot-toast";
+
+jest.mock("react-hot-toast", () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+describe("CopyButton", () => {
+  let writeTextMock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    writeTextMock = jest.fn().mockResolvedValue(undefined);
+    Object.defineProperty(global.navigator, "clipboard", {
+      value: {
+        writeText: writeTextMock,
+      },
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  it("copies trimmed text and shows the success toast", async () => {
+    render(
+      <CopyButton
+        text="  O(n log n)  "
+        ariaLabel="Copy time complexity"
+      />
+    );
+
+    const button = screen.getByRole("button", { name: /copy time complexity/i });
+    expect(button).toHaveAttribute("title", "Copy time complexity");
+    expect(button.className).toContain("focus-visible:ring-2");
+
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      expect(writeTextMock).toHaveBeenCalledWith("O(n log n)");
+      expect(toast.success).toHaveBeenCalledWith("Copied to clipboard!");
+    });
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/ResponsiveControls.test.jsx b/__tests__/components/ResponsiveControls.test.jsx
new file mode 100644
index 000000000..e3b8d774c
--- /dev/null
+++ b/__tests__/components/ResponsiveControls.test.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ResponsiveControls } from '@/app/visualizer/components/ResponsiveControls';
+
+describe('ResponsiveControls', () => {
+  it('renders children and is expanded by default', () => {
+    render(
+      <ResponsiveControls defaultExpanded={true}>
+        <div data-testid="child-content">Child Content</div>
+      </ResponsiveControls>
+    );
+    
+    // The child should be in the document
+    expect(screen.getByTestId('child-content')).toBeInTheDocument();
+    
+    // The toggle button should show "Hide Controls" initially
+    const toggleButton = screen.getByRole('button', { name: /hide controls/i });
+    expect(toggleButton).toBeInTheDocument();
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
+    
+    // The controls container should not have "hidden" class (it has "block" when expanded)
+    const controlsContainer = document.getElementById('mobile-visualizer-controls');
+    expect(controlsContainer).toBeInTheDocument();
+    expect(controlsContainer.className).toContain('block');
+    expect(controlsContainer.className).not.toContain('hidden');
+  });
+
+  it('toggles visibility when the button is clicked', () => {
+    render(
+      <ResponsiveControls defaultExpanded={true}>
+        <div data-testid="child-content">Child Content</div>
+      </ResponsiveControls>
+    );
+
+    const toggleButton = screen.getByRole('button', { name: /hide controls/i });
+    
+    // Click to collapse
+    fireEvent.click(toggleButton);
+    
+    // The button text should change to "Show Controls"
+    const newToggleButton = screen.getByRole('button', { name: /show controls/i });
+    expect(newToggleButton).toBeInTheDocument();
+    expect(newToggleButton).toHaveAttribute('aria-expanded', 'false');
+    
+    // The controls container should now have "hidden" class
+    const controlsContainer = document.getElementById('mobile-visualizer-controls');
+    expect(controlsContainer.className).toContain('hidden');
+    
+    // Click again to expand
+    fireEvent.click(newToggleButton);
+    
+    // Should revert back to Hide Controls
+    const expandedButton = screen.getByRole('button', { name: /hide controls/i });
+    expect(expandedButton).toBeInTheDocument();
+    expect(expandedButton).toHaveAttribute('aria-expanded', 'true');
+    expect(controlsContainer.className).toContain('block');
+  });
+
+  it('starts collapsed if defaultExpanded is false', () => {
+    render(
+      <ResponsiveControls defaultExpanded={false}>
+        <div data-testid="child-content">Child Content</div>
+      </ResponsiveControls>
+    );
+
+    const toggleButton = screen.getByRole('button', { name: /show controls/i });
+    expect(toggleButton).toBeInTheDocument();
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+    
+    const controlsContainer = document.getElementById('mobile-visualizer-controls');
+    expect(controlsContainer.className).toContain('hidden');
+  });
+});
diff --git a/__tests__/components/activityApi.test.jsx b/__tests__/components/activityApi.test.jsx
new file mode 100644
index 000000000..83b6a9a14
--- /dev/null
+++ b/__tests__/components/activityApi.test.jsx
@@ -0,0 +1,39 @@
+import { jest } from '@jest/globals';
+
+jest.mock('@/lib/serverApi', () => ({
+  getSupabaseServerClient: jest.fn(() => ({
+    from: jest.fn(() => ({
+      upsert: jest.fn().mockResolvedValue({ data: null, error: { message: 'new row violates row-level security policy', details: 'RLS policy', hint: 'policy', code: '42501' } }),
+      select: jest.fn().mockReturnThis(),
+      eq: jest.fn().mockReturnThis(),
+      gte: jest.fn().mockReturnThis(),
+      order: jest.fn().mockReturnThis(),
+      limit: jest.fn().mockResolvedValue({ data: [], error: null }),
+      maybeSingle: jest.fn().mockResolvedValue({ data: null, error: null }),
+    })),
+  })),
+  jsonResponse: jest.fn((data, status = 200) => ({ data, status })),
+  errorResponse: jest.fn((error) => ({ error, status: 500 })),
+}));
+
+jest.mock('@/lib/auth', () => ({
+  getAuthenticatedUser: jest.fn().mockResolvedValue({ success: true, user: { id: 'user-1' } }),
+}));
+
+jest.mock('next/headers', () => ({
+  cookies: jest.fn().mockResolvedValue({ getAll: jest.fn(() => []), set: jest.fn() }),
+}));
+
+const { POST, GET } = require('@/app/api/activity/route');
+
+describe('activity API route', () => {
+  it('returns 403 when the server client hits an RLS error instead of falling back to admin', async () => {
+    const response = await POST({ json: async () => ({ type: 'site_visit', localDate: '2026-07-09' }) });
+    expect(response.status).toBe(403);
+  });
+
+  it('returns activity rows via the server client', async () => {
+    const response = await GET({ url: 'http://localhost/api/activity?days=30' });
+    expect(response.status).toBe(200);
+  });
+});
diff --git a/__tests__/components/notifications-route.test.js b/__tests__/components/notifications-route.test.js
new file mode 100644
index 000000000..14cd59eed
--- /dev/null
+++ b/__tests__/components/notifications-route.test.js
@@ -0,0 +1,104 @@
+jest.mock("next/headers", () => ({
+  cookies: jest.fn(),
+}));
+
+jest.mock("@/lib/auth", () => ({
+  getAuthenticatedUser: jest.fn(),
+}));
+
+jest.mock("@/lib/serverApi", () => ({
+  getSupabaseServerClient: jest.fn(),
+  jsonResponse: (data, status = 200) => ({
+    status,
+    json: jest.fn().mockResolvedValue(data),
+  }),
+  errorResponse: (error) => ({
+    status: 500,
+    json: jest
+      .fn()
+      .mockResolvedValue({ error: error.message || "Internal server error" }),
+  }),
+}));
+
+import { cookies } from "next/headers";
+import { getAuthenticatedUser } from "@/lib/auth";
+import { getSupabaseServerClient } from "@/lib/serverApi";
+import { PATCH } from "@/app/api/notifications/route";
+
+function createSupabaseMock(result) {
+  const builder = {
+    update: jest.fn(() => builder),
+    eq: jest.fn(() => builder),
+    in: jest.fn(() => builder),
+    select: jest.fn(() => Promise.resolve(result)),
+  };
+
+  return {
+    builder,
+    supabase: {
+      from: jest.fn(() => builder),
+    },
+  };
+}
+
+function createPatchRequest(body) {
+  return {
+    json: jest.fn().mockResolvedValue(body),
+  };
+}
+
+describe("notifications PATCH route", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    cookies.mockResolvedValue({
+      getAll: jest.fn(() => []),
+      set: jest.fn(),
+    });
+
+    getAuthenticatedUser.mockResolvedValue({
+      success: true,
+      user: { id: "student-123" },
+    });
+  });
+
+  it("returns the number of rows updated for markAll requests", async () => {
+    const { builder, supabase } = createSupabaseMock({
+      data: [{ id: "n1" }, { id: "n2" }],
+      error: null,
+      count: null,
+    });
+    getSupabaseServerClient.mockReturnValue(supabase);
+
+    const response = await PATCH(createPatchRequest({ markAll: true }));
+    const body = await response.json();
+
+    expect(response.status).toBe(200);
+    expect(body).toEqual({ success: true, updated: 2 });
+    expect(supabase.from).toHaveBeenCalledWith("notifications");
+    expect(builder.update).toHaveBeenCalledWith({ read: true });
+    expect(builder.eq).toHaveBeenCalledWith("student_id", "student-123");
+    expect(builder.in).not.toHaveBeenCalled();
+    expect(builder.select).toHaveBeenCalledWith("id");
+  });
+
+  it("returns the number of rows updated for selected notification IDs", async () => {
+    const { builder, supabase } = createSupabaseMock({
+      data: [{ id: "n2" }],
+      error: null,
+      count: null,
+    });
+    getSupabaseServerClient.mockReturnValue(supabase);
+
+    const response = await PATCH(
+      createPatchRequest({ notificationIds: ["n2", "", 42, "   "] })
+    );
+    const body = await response.json();
+
+    expect(response.status).toBe(200);
+    expect(body).toEqual({ success: true, updated: 1 });
+    expect(builder.eq).toHaveBeenCalledWith("student_id", "student-123");
+    expect(builder.in).toHaveBeenCalledWith("id", ["n2"]);
+    expect(builder.select).toHaveBeenCalledWith("id");
+  });
+});
diff --git a/__tests__/cookieConsent.test.js b/__tests__/cookieConsent.test.js
new file mode 100644
index 000000000..24da5a2e3
--- /dev/null
+++ b/__tests__/cookieConsent.test.js
@@ -0,0 +1,191 @@
+// __tests__/cookieConsent.test.js
+//
+// Run with:  npx jest __tests__/cookieConsent.test.js
+//
+// Tests the cookie consent helpers in src/lib/cookieConsent.js.
+// Sets global.localStorage directly in beforeEach; module is required once
+// at the top using the jsdom window/localStorage.
+
+const {
+  CONSENT_STATUS_KEY,
+  CONSENT_PREFERENCES_KEY,
+  CONSENT_UPDATED_EVENT,
+  DEFAULT_PREFERENCES,
+  getStoredPreferences,
+  saveStoredPreferences,
+  hasAnalyticsConsent,
+  hasMarketingConsent,
+  hasFunctionalConsent,
+} = require("../src/lib/cookieConsent");
+
+describe("cookieConsent constants", () => {
+  test("CONSENT_STATUS_KEY is a non-empty string", () => {
+    expect(typeof CONSENT_STATUS_KEY).toBe("string");
+    expect(CONSENT_STATUS_KEY.length).toBeGreaterThan(0);
+  });
+
+  test("CONSENT_PREFERENCES_KEY is a non-empty string", () => {
+    expect(typeof CONSENT_PREFERENCES_KEY).toBe("string");
+    expect(CONSENT_PREFERENCES_KEY.length).toBeGreaterThan(0);
+  });
+
+  test("CONSENT_UPDATED_EVENT is a non-empty string", () => {
+    expect(typeof CONSENT_UPDATED_EVENT).toBe("string");
+    expect(CONSENT_UPDATED_EVENT.length).toBeGreaterThan(0);
+  });
+
+  test("DEFAULT_PREFERENCES has correct structure", () => {
+    expect(DEFAULT_PREFERENCES).toEqual({
+      essential: true,
+      analytics: false,
+      functional: false,
+      marketing: false,
+    });
+  });
+});
+
+describe("getStoredPreferences", () => {
+  beforeEach(() => {
+    // Clear jsdom localStorage before each test
+    global.localStorage.clear();
+  });
+
+  test("returns DEFAULT_PREFERENCES when localStorage is empty", () => {
+    expect(getStoredPreferences()).toEqual(DEFAULT_PREFERENCES);
+  });
+
+  test("returns merged preferences when localStorage has valid JSON", () => {
+    global.localStorage.setItem(
+      CONSENT_PREFERENCES_KEY,
+      JSON.stringify({ analytics: true, marketing: true })
+    );
+    const result = getStoredPreferences();
+    expect(result.analytics).toBe(true);
+    expect(result.marketing).toBe(true);
+  });
+
+  test("always forces essential to true even if stored value is false", () => {
+    global.localStorage.setItem(
+      CONSENT_PREFERENCES_KEY,
+      JSON.stringify({ essential: false, analytics: true })
+    );
+    const result = getStoredPreferences();
+    expect(result.essential).toBe(true);
+    expect(result.analytics).toBe(true);
+  });
+
+  test("returns DEFAULT_PREFERENCES on invalid JSON", () => {
+    global.localStorage.setItem(CONSENT_PREFERENCES_KEY, "not-valid-json{");
+    expect(getStoredPreferences()).toEqual(DEFAULT_PREFERENCES);
+  });
+});
+
+describe("saveStoredPreferences", () => {
+  let dispatchEventSpy;
+
+  beforeEach(() => {
+    global.localStorage.clear();
+    dispatchEventSpy = jest.spyOn(global.window, "dispatchEvent");
+  });
+
+  afterEach(() => {
+    dispatchEventSpy.mockRestore();
+  });
+
+  test("saves JSON-serialized preferences to localStorage", () => {
+    const prefs = { analytics: true, marketing: false };
+    saveStoredPreferences(prefs);
+    const stored = global.localStorage.getItem(CONSENT_PREFERENCES_KEY);
+    const parsed = JSON.parse(stored);
+    expect(parsed.analytics).toBe(true);
+    expect(parsed.marketing).toBe(false);
+  });
+
+  test("always saves essential as true regardless of input", () => {
+    saveStoredPreferences({ essential: false, analytics: true });
+    const stored = global.localStorage.getItem(CONSENT_PREFERENCES_KEY);
+    const parsed = JSON.parse(stored);
+    expect(parsed.essential).toBe(true);
+  });
+
+  test("dispatches cookiePreferencesUpdated event", () => {
+    saveStoredPreferences({ analytics: true });
+    expect(dispatchEventSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ type: CONSENT_UPDATED_EVENT })
+    );
+  });
+});
+
+describe("hasAnalyticsConsent", () => {
+  beforeEach(() => {
+    global.localStorage.clear();
+  });
+
+  test("returns true when analytics is true", () => {
+    global.localStorage.setItem(
+      CONSENT_PREFERENCES_KEY,
+      JSON.stringify({ analytics: true })
+    );
+    expect(hasAnalyticsConsent()).toBe(true);
+  });
+
+  test("returns false when analytics is false", () => {
+    global.localStorage.setItem(
+      CONSENT_PREFERENCES_KEY,
+      JSON.stringify({ analytics: false })
+    );
+    expect(hasAnalyticsConsent()).toBe(false);
+  });
+
+  test("returns false when analytics is not in stored preferences", () => {
+    global.localStorage.setItem(
+      CONSENT_PREFERENCES_KEY,
+      JSON.stringify({ marketing: true })
+    );
+    expect(hasAnalyticsConsent()).toBe(false);
+  });
+});
+
+describe("hasMarketingConsent", () => {
+  beforeEach(() => {
+    global.localStorage.clear();
+  });
+
+  test("returns true when marketing is true", () => {
+    global.localStorage.setItem(
+      CONSENT_PREFERENCES_KEY,
+      JSON.stringify({ marketing: true })
+    );
+    expect(hasMarketingConsent()).toBe(true);
+  });
+
+  test("returns false when marketing is false", () => {
+    global.localStorage.setItem(
+      CONSENT_PREFERENCES_KEY,
+      JSON.stringify({ marketing: false })
+    );
+    expect(hasMarketingConsent()).toBe(false);
+  });
+});
+
+describe("hasFunctionalConsent", () => {
+  beforeEach(() => {
+    global.localStorage.clear();
+  });
+
+  test("returns true when functional is true", () => {
+    global.localStorage.setItem(
+      CONSENT_PREFERENCES_KEY,
+      JSON.stringify({ functional: true })
+    );
+    expect(hasFunctionalConsent()).toBe(true);
+  });
+
+  test("returns false when functional is false", () => {
+    global.localStorage.setItem(
+      CONSENT_PREFERENCES_KEY,
+      JSON.stringify({ functional: false })
+    );
+    expect(hasFunctionalConsent()).toBe(false);
+  });
+});
diff --git a/__tests__/fenwickTreeLogic.test.js b/__tests__/fenwickTreeLogic.test.js
new file mode 100644
index 000000000..e50a80c6a
--- /dev/null
+++ b/__tests__/fenwickTreeLogic.test.js
@@ -0,0 +1,80 @@
+import { buildBIT, updateGenerator, queryGenerator } from "../src/features/algorithms/tree/fenwickTreeLogic.js";
+
+describe("fenwickTreeLogic", () => {
+  describe("buildBIT", () => {
+    it("should correctly build a 1-indexed BIT from an input array", () => {
+      // 1-indexed array: [0, 3, 2, -1, 6, 5, 4, -3, 3, 7, 2, 3]
+      const arr = [0, 3, 2, -1, 6, 5, 4, -3, 3, 7, 2, 3];
+      const bit = buildBIT(arr);
+
+      expect(bit.length).toBe(arr.length);
+      // Index 1 prefix sum = 3
+      expect(bit[1]).toBe(3);
+      // Index 2 prefix sum = 3 + 2 = 5
+      expect(bit[2]).toBe(5);
+    });
+  });
+
+  describe("updateGenerator", () => {
+    it("yields an error step when index is out of bounds", () => {
+      const arr = [0, 1, 2, 3];
+      const bit = buildBIT(arr);
+      const gen = updateGenerator(0, 5, arr, bit, 3);
+      const first = gen.next().value;
+
+      expect(first.type).toBe("error");
+      expect(first.message).toContain("Please enter a valid index");
+    });
+
+    it("yields update steps and completes correctly for valid index and delta", () => {
+      const baseArray = [0, 1, 2, 3, 4]; // n = 4
+      const bit = buildBIT(baseArray);
+      const gen = updateGenerator(2, 3, baseArray, bit, 4);
+
+      const steps = [];
+      let res = gen.next();
+      while (!res.done) {
+        steps.push(res.value);
+        res = gen.next();
+      }
+
+      const initialStep = steps[0];
+      expect(initialStep.type).toBe("step");
+      expect(initialStep.highlightedBIT).toEqual({ 2: "visiting" });
+
+      const lastStep = steps[steps.length - 1];
+      expect(lastStep.type).toBe("complete");
+      expect(lastStep.newBase[2]).toBe(5); // 2 + 3
+    });
+  });
+
+  describe("queryGenerator", () => {
+    it("yields error when range L > R or indices are invalid", () => {
+      const bit = [0, 1, 3, 3, 10];
+      const gen = queryGenerator(3, 2, bit, 4);
+      const step = gen.next().value;
+
+      expect(step.type).toBe("error");
+      expect(step.message).toContain("valid range");
+    });
+
+    it("calculates correct range sum for valid range L..R", () => {
+      const baseArray = [0, 2, 4, 6, 8, 10]; // 1-indexed values: 2, 4, 6, 8, 10
+      const n = 5;
+      const bit = buildBIT(baseArray);
+
+      // Range 2..4: sum of [4, 6, 8] = 18
+      const gen = queryGenerator(2, 4, bit, n);
+      const steps = [];
+      let res = gen.next();
+      while (!res.done) {
+        steps.push(res.value);
+        res = gen.next();
+      }
+
+      const completeStep = steps[steps.length - 1];
+      expect(completeStep.type).toBe("complete");
+      expect(completeStep.result).toBe("Sum[2..4] = 18");
+    });
+  });
+});
diff --git a/__tests__/graphUtility.test.mjs b/__tests__/graphUtility.test.mjs
new file mode 100644
index 000000000..7a6e1da5f
--- /dev/null
+++ b/__tests__/graphUtility.test.mjs
@@ -0,0 +1,163 @@
+import { describe, expect, test } from "@jest/globals";
+import {
+  bfsSteps,
+  buildAdjacencyList,
+  buildAdjacencyMatrix,
+  dfsSteps,
+  dijkstraSteps,
+  hasCycleDirected,
+  primSteps,
+  topologicalSort,
+} from "../src/utils/graph.js";
+
+describe("graph utility functions", () => {
+  test("buildAdjacencyList supports directed, undirected, and weighted edges", () => {
+    const edges = [
+      { from: 0, to: 1, weight: 4 },
+      { from: 1, to: 2, weight: 7 },
+    ];
+
+    expect(buildAdjacencyList(3, edges, true)).toEqual({
+      0: [1],
+      1: [2],
+      2: [],
+    });
+
+    expect(buildAdjacencyList(3, edges, false, true)).toEqual({
+      0: [{ to: 1, weight: 4 }],
+      1: [
+        { to: 0, weight: 4 },
+        { to: 2, weight: 7 },
+      ],
+      2: [{ to: 1, weight: 7 }],
+    });
+  });
+
+  test("buildAdjacencyMatrix supports directed and undirected graphs", () => {
+    const edges = [{ from: 0, to: 2, weight: 5 }];
+
+    expect(buildAdjacencyMatrix(3, edges, true)).toEqual([
+      [0, 0, 1],
+      [0, 0, 0],
+      [0, 0, 0],
+    ]);
+
+    expect(buildAdjacencyMatrix(3, edges, false, true)).toEqual([
+      [0, 0, 5],
+      [0, 0, 0],
+      [5, 0, 0],
+    ]);
+  });
+
+  test("bfsSteps records visited nodes and queue snapshots", () => {
+    const adj = {
+      0: [1, 2],
+      1: [3],
+      2: [],
+      3: [],
+    };
+
+    const steps = bfsSteps(adj, 0);
+
+    expect(steps.map((step) => step.current)).toEqual([0, 1, 2, 3]);
+    expect([...steps.at(-1).visited]).toEqual([0, 1, 2, 3]);
+    expect(steps[1].queue).toEqual([2]);
+  });
+
+  test("dfsSteps records traversal order and visited nodes", () => {
+    const adj = {
+      0: [1, 2],
+      1: [3],
+      2: [],
+      3: [],
+    };
+
+    const steps = dfsSteps(adj, 0);
+
+    expect(steps.map((step) => step.current)).toEqual([0, 1, 3, 2]);
+    expect([...steps.at(-1).visited]).toEqual([0, 1, 3, 2]);
+  });
+
+  test("dijkstraSteps converges shortest-path distances", () => {
+    const adj = buildAdjacencyList(
+      4,
+      [
+        { from: 0, to: 1, weight: 2 },
+        { from: 0, to: 2, weight: 5 },
+        { from: 1, to: 2, weight: 1 },
+        { from: 2, to: 3, weight: 3 },
+      ],
+      true,
+      true,
+    );
+
+    const steps = dijkstraSteps(adj, 0, 4);
+
+    expect(steps.at(-1).distances).toEqual({
+      0: 0,
+      1: 2,
+      2: 3,
+      3: 6,
+    });
+  });
+
+  test("primSteps accumulates minimum spanning tree edges", () => {
+    const adj = buildAdjacencyList(
+      4,
+      [
+        { from: 0, to: 1, weight: 1 },
+        { from: 0, to: 2, weight: 4 },
+        { from: 1, to: 2, weight: 2 },
+        { from: 1, to: 3, weight: 3 },
+      ],
+      false,
+      true,
+    );
+
+    const steps = primSteps(adj, 0, 4);
+
+    expect(steps.at(-1).mstEdges).toEqual([
+      { from: 0, to: 1, weight: 1 },
+      { from: 1, to: 2, weight: 2 },
+      { from: 1, to: 3, weight: 3 },
+    ]);
+  });
+
+  test("hasCycleDirected detects cyclic and acyclic directed graphs", () => {
+    const cyclic = {
+      0: [1],
+      1: [2],
+      2: [0],
+    };
+    const acyclic = {
+      0: [1, 2],
+      1: [2],
+      2: [],
+    };
+
+    expect(hasCycleDirected(3, cyclic)).toBe(true);
+    expect(hasCycleDirected(3, acyclic)).toBe(false);
+  });
+
+  test("topologicalSort returns an order for DAGs and null for cycles", () => {
+    const dag = {
+      0: [1, 2],
+      1: [3],
+      2: [3],
+      3: [],
+    };
+    const cyclic = {
+      0: [1],
+      1: [2],
+      2: [0],
+    };
+
+    const order = topologicalSort(4, dag);
+
+    expect(order.indexOf(0)).toBeLessThan(order.indexOf(1));
+    expect(order.indexOf(0)).toBeLessThan(order.indexOf(2));
+    expect(order.indexOf(1)).toBeLessThan(order.indexOf(3));
+    expect(order.indexOf(2)).toBeLessThan(order.indexOf(3));
+    expect(topologicalSort(3, cyclic)).toBeNull();
+  });
+});
diff --git a/__tests__/gtag.test.mjs b/__tests__/gtag.test.mjs
new file mode 100644
index 000000000..0298e1e19
--- /dev/null
+++ b/__tests__/gtag.test.mjs
@@ -0,0 +1,49 @@
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import { event, GA_MEASUREMENT_ID, pageview } from "../src/lib/gtag.js";
+
+const originalWindow = global.window;
+
+describe("Google Analytics helpers", () => {
+  afterEach(() => {
+    global.window = originalWindow;
+    jest.restoreAllMocks();
+  });
+
+  test("pageview sends a config event with the page path", () => {
+    const gtag = jest.fn();
+    global.window = { gtag };
+
+    pageview("/practice/arrays");
+
+    expect(gtag).toHaveBeenCalledWith("config", GA_MEASUREMENT_ID, {
+      page_path: "/practice/arrays",
+    });
+  });
+
+  test("event sends the expected analytics payload", () => {
+    const gtag = jest.fn();
+    global.window = { gtag };
+
+    event({
+      action: "start_practice",
+      category: "practice",
+      label: "arrays",
+      value: 3,
+    });
+
+    expect(gtag).toHaveBeenCalledWith("event", "start_practice", {
+      event_category: "practice",
+      event_label: "arrays",
+      value: 3,
+    });
+  });
+
+  test("helpers are no-ops when gtag is unavailable", () => {
+    global.window = {};
+
+    expect(() => pageview("/dashboard")).not.toThrow();
+    expect(() =>
+      event({ action: "open_dashboard", category: "navigation" }),
+    ).not.toThrow();
+  });
+});
diff --git a/__tests__/modulesMap.test.js b/__tests__/modulesMap.test.js
new file mode 100644
index 000000000..ffac4343f
--- /dev/null
+++ b/__tests__/modulesMap.test.js
@@ -0,0 +1,138 @@
+// __tests__/modulesMap.test.js
+//
+// Run with:  npx jest __tests__/modulesMap.test.js
+//
+// Tests the MODULE_MAPS data export in src/lib/modulesMap.js.
+// Verifies that all expected algorithm and data-structure entries are present
+// with correctly formatted UUIDs or kebab-case identifiers.
+
+const { MODULE_MAPS } = require("../src/lib/modulesMap");
+
+const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+const KEBAB_REGEX = /^[a-z][a-z0-9-]*$/;
+const ALPHANUM_REGEX = /^[a-z0-9][a-z0-9-]*$/;
+
+function isValidModuleId(id) {
+  return typeof id === "string" && id.length > 0;
+}
+
+describe("MODULE_MAPS", () => {
+  test("is a non-null object", () => {
+    expect(MODULE_MAPS).not.toBeNull();
+    expect(typeof MODULE_MAPS).toBe("object");
+  });
+
+  test("has entries for all major algorithm categories", () => {
+    // Search algorithms
+    expect(MODULE_MAPS).toHaveProperty("linearSearch");
+    expect(MODULE_MAPS).toHaveProperty("binarySearch");
+
+    // Sorting algorithms
+    expect(MODULE_MAPS).toHaveProperty("bubbleSort");
+    expect(MODULE_MAPS).toHaveProperty("mergeSort");
+    expect(MODULE_MAPS).toHaveProperty("quickSort");
+    expect(MODULE_MAPS).toHaveProperty("insertionSort");
+    expect(MODULE_MAPS).toHaveProperty("selectionSort");
+
+    // Data structures
+    expect(MODULE_MAPS).toHaveProperty("pushPop");
+    expect(MODULE_MAPS).toHaveProperty("peek");
+    expect(MODULE_MAPS).toHaveProperty("isEmpty");
+    expect(MODULE_MAPS).toHaveProperty("enqueueDequeue");
+    expect(MODULE_MAPS).toHaveProperty("queueArray");
+    expect(MODULE_MAPS).toHaveProperty("stackArray");
+    expect(MODULE_MAPS).toHaveProperty("trie");
+    expect(MODULE_MAPS).toHaveProperty("redBlackTree");
+    expect(MODULE_MAPS).toHaveProperty("bTree");
+    expect(MODULE_MAPS).toHaveProperty("heapSort");
+
+    // Advanced / graph
+    expect(MODULE_MAPS).toHaveProperty("astar");
+  });
+
+  test("every value is a non-empty string", () => {
+    for (const [key, value] of Object.entries(MODULE_MAPS)) {
+      expect(typeof value).toBe("string", `Key "${key}" should have a string value`);
+      expect(value.length).toBeGreaterThan(0, `Key "${key}" should not be an empty string`);
+    }
+  });
+
+  test("every value is either a valid UUID, kebab-case identifier, or an alphanumeric ID", () => {
+    for (const [key, value] of Object.entries(MODULE_MAPS)) {
+      const isUuid = UUID_REGEX.test(value);
+      const isKebab = KEBAB_REGEX.test(value);
+      const isAlphanum = /^[a-z0-9][a-z0-9-]*$/.test(value);
+      expect(isUuid || isKebab || isAlphanum).toBe(true, `Key "${key}" value "${value}" is not valid`);
+    }
+  });
+
+  test("all values are unique (no duplicate module IDs)", () => {
+    const values = Object.values(MODULE_MAPS);
+    const uniqueValues = new Set(values);
+    expect(uniqueValues.size).toBe(values.length);
+  });
+
+  test("linearSearch and binarySearch have UUIDs", () => {
+    expect(UUID_REGEX.test(MODULE_MAPS.linearSearch)).toBe(true);
+    expect(UUID_REGEX.test(MODULE_MAPS.binarySearch)).toBe(true);
+  });
+
+  test("ternarySearch and jumpSearch use kebab-case identifiers", () => {
+    expect(KEBAB_REGEX.test(MODULE_MAPS.ternarySearch)).toBe(true);
+    expect(KEBAB_REGEX.test(MODULE_MAPS.jumpSearch)).toBe(true);
+  });
+
+  test("bubbleSort and mergeSort have UUIDs", () => {
+    expect(UUID_REGEX.test(MODULE_MAPS.bubbleSort)).toBe(true);
+    expect(UUID_REGEX.test(MODULE_MAPS.mergeSort)).toBe(true);
+  });
+
+  test("countingSort has a UUID format ID", () => {
+    expect(UUID_REGEX.test(MODULE_MAPS.countingSort)).toBe(true);
+  });
+
+  test("bucketSort has a kebab-case or alphanumeric ID", () => {
+    const val = MODULE_MAPS.bucketSort;
+    expect(/^[a-z][a-z0-9-]*$/.test(val)).toBe(true);
+  });
+
+  test("pushPop and peek have UUIDs", () => {
+    expect(UUID_REGEX.test(MODULE_MAPS.pushPop)).toBe(true);
+    expect(UUID_REGEX.test(MODULE_MAPS.peek)).toBe(true);
+  });
+
+  test("isEmpty and isFull have UUIDs", () => {
+    expect(UUID_REGEX.test(MODULE_MAPS.isEmpty)).toBe(true);
+    expect(UUID_REGEX.test(MODULE_MAPS.isFull)).toBe(true);
+  });
+
+  test("stackArray and stackLinkedList have UUIDs", () => {
+    expect(UUID_REGEX.test(MODULE_MAPS.stackArray)).toBe(true);
+    expect(UUID_REGEX.test(MODULE_MAPS.stackLinkedList)).toBe(true);
+  });
+
+  test("queueArray and queueLinkedList have UUIDs", () => {
+    expect(UUID_REGEX.test(MODULE_MAPS.queueArray)).toBe(true);
+    expect(UUID_REGEX.test(MODULE_MAPS.queueLinkedList)).toBe(true);
+  });
+
+  test("recursion entries use UUID format", () => {
+    expect(UUID_REGEX.test(MODULE_MAPS.recursionFactorial)).toBe(true);
+    expect(UUID_REGEX.test(MODULE_MAPS.recursionFibonacci)).toBe(true);
+    expect(UUID_REGEX.test(MODULE_MAPS.recursionHanoi)).toBe(true);
+  });
+
+  test("has entries for all recursion problems", () => {
+    expect(MODULE_MAPS).toHaveProperty("recursionFactorial");
+    expect(MODULE_MAPS).toHaveProperty("recursionFibonacci");
+    expect(MODULE_MAPS).toHaveProperty("recursionHanoi");
+    expect(MODULE_MAPS).toHaveProperty("recursionSum");
+    expect(MODULE_MAPS).toHaveProperty("recursionReverseArray");
+    expect(MODULE_MAPS).toHaveProperty("recursionPalindrome");
+    expect(MODULE_MAPS).toHaveProperty("recursionBinarySearch");
+    expect(MODULE_MAPS).toHaveProperty("recursionSubsequences");
+    expect(MODULE_MAPS).toHaveProperty("recursionNQueens");
+    expect(MODULE_MAPS).toHaveProperty("recursionPrint1ToN");
+    expect(MODULE_MAPS).toHaveProperty("recursionPrintNTo1");
+  });
+});
diff --git a/__tests__/persistence.test.js b/__tests__/persistence.test.js
new file mode 100644
index 000000000..e70d03ed9
--- /dev/null
+++ b/__tests__/persistence.test.js
@@ -0,0 +1,73 @@
+import { persistence } from "../src/lib/persistence.js";
+
+describe("PersistenceManager", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  describe("get, set, and remove", () => {
+    it("returns null for non-existent storage keys", async () => {
+      const result = await persistence.get("PRACTICE_PROGRESS");
+      expect(result).toBeNull();
+    });
+
+    it("stores and retrieves JSON object values correctly", async () => {
+      const data = { problem1: { status: "completed" } };
+      persistence.set("PRACTICE_PROGRESS", data);
+
+      const result = await persistence.get("PRACTICE_PROGRESS");
+      expect(result).toEqual(data);
+    });
+
+    it("handles invalid JSON string gracefully by returning null", async () => {
+      localStorage.setItem("algobuddy_bookmarks", "invalid-json-{");
+      const result = await persistence.get("BOOKMARKS");
+      expect(result).toBeNull();
+    });
+
+    it("removes items from localStorage", async () => {
+      persistence.set("THEME", "dark");
+      expect(await persistence.get("THEME")).toBe("dark");
+
+      persistence.remove("THEME");
+      expect(await persistence.get("THEME")).toBeNull();
+    });
+  });
+
+  describe("mergeProgress", () => {
+    it("merges local and server progress, giving precedence to newer server timestamp", () => {
+      const local = {
+        two_sum: { status: "in_progress", updatedAt: "2026-01-01T00:00:00Z" }
+      };
+      const server = [
+        { problem_id: "two_sum", status: "completed", updated_at: "2026-01-02T00:00:00Z" }
+      ];
+
+      const merged = persistence.mergeProgress(local, server, "user-123");
+      expect(merged.two_sum.status).toBe("completed");
+    });
+
+    it("retains local progress if local timestamp is newer than server timestamp", () => {
+      const local = {
+        two_sum: { status: "completed", updatedAt: "2026-02-01T00:00:00Z" }
+      };
+      const server = [
+        { problem_id: "two_sum", status: "in_progress", updated_at: "2026-01-01T00:00:00Z" }
+      ];
+
+      const merged = persistence.mergeProgress(local, server, "user-123");
+      expect(merged.two_sum.status).toBe("completed");
+    });
+  });
+
+  describe("mergeBookmarks", () => {
+    it("deduplicates and merges local and server bookmark arrays", () => {
+      const local = [{ id: "1", title: "Two Sum" }, { id: "2", title: "3Sum" }];
+      const server = [{ id: "2", title: "3Sum Updated" }, { id: "3", title: "4Sum" }];
+
+      const merged = persistence.mergeBookmarks(local, server, "id");
+      expect(merged).toHaveLength(3);
+      expect(merged.find((b) => b.id === "2").title).toBe("3Sum Updated");
+    });
+  });
+});
diff --git a/__tests__/practiceData.test.js b/__tests__/practiceData.test.js
new file mode 100644
index 000000000..7aacaa172
--- /dev/null
+++ b/__tests__/practiceData.test.js
@@ -0,0 +1,147 @@
+// __tests__/practiceData.test.js
+//
+// Run with:  npx jest __tests__/practiceData.test.js
+//
+// Tests the practiceData structure in src/lib/practiceData.js.
+// Verifies that all expected algorithm topics and difficulty tiers are present,
+// and that required fields exist on each problem entry.
+
+const { practiceData } = require("../src/lib/practiceData");
+
+const REQUIRED_PROBLEM_FIELDS = ["id", "name", "difficulty", "visualizerUrl"];
+const VALID_DIFFICULTIES = ["Easy", "Medium", "Hard"];
+const VALID_TIERS = ["Beginner", "Intermediate", "Advanced"];
+
+describe("practiceData", () => {
+  test("is a non-null array", () => {
+    expect(Array.isArray(practiceData)).toBe(true);
+    expect(practiceData.length).toBeGreaterThan(0);
+  });
+
+  test("each topic has a title, slug, desc, and subsections", () => {
+    for (const topic of practiceData) {
+      expect(typeof topic.title).toBe("string", `"${topic.title}" should have a title`);
+      expect(typeof topic.slug).toBe("string", `"${topic.title}" should have a slug`);
+      expect(typeof topic.desc).toBe("string", `"${topic.title}" should have a description`);
+      expect(Array.isArray(topic.subsections)).toBe(true);
+      expect(topic.subsections.length).toBeGreaterThan(0);
+    }
+  });
+
+  test("each topic has a kebab-case slug", () => {
+    for (const topic of practiceData) {
+      expect(topic.slug).toMatch(/^[a-z0-9-]+$/);
+    }
+  });
+
+  test("each subsection is one of the valid tiers", () => {
+    for (const topic of practiceData) {
+      for (const subsection of topic.subsections) {
+        expect(VALID_TIERS).toContain(subsection.title);
+      }
+    }
+  });
+
+  test("each subsection has a non-empty items array", () => {
+    for (const topic of practiceData) {
+      for (const subsection of topic.subsections) {
+        expect(Array.isArray(subsection.items)).toBe(true);
+        expect(subsection.items.length).toBeGreaterThan(0);
+      }
+    }
+  });
+
+  test("each problem has all required fields", () => {
+    for (const topic of practiceData) {
+      for (const subsection of topic.subsections) {
+        for (const problem of subsection.items) {
+          expect(problem).toHaveProperty("id");
+          expect(typeof problem.id).toBe("string");
+          expect(problem.id.length).toBeGreaterThan(0);
+
+          expect(problem).toHaveProperty("name");
+          expect(typeof problem.name).toBe("string");
+          expect(problem.name.length).toBeGreaterThan(0);
+
+          expect(problem).toHaveProperty("difficulty");
+          expect(VALID_DIFFICULTIES).toContain(problem.difficulty);
+
+          // visualizerUrl is optional — some legacy problems lack it
+          if (problem.visualizerUrl) {
+            expect(typeof problem.visualizerUrl).toBe("string");
+            expect(problem.visualizerUrl.length).toBeGreaterThan(0);
+          }
+        }
+      }
+    }
+  });
+
+  test("each problem difficulty is one of the valid values", () => {
+    for (const topic of practiceData) {
+      for (const subsection of topic.subsections) {
+        for (const problem of subsection.items) {
+          expect(VALID_DIFFICULTIES).toContain(problem.difficulty);
+        }
+      }
+    }
+  });
+
+  test("each problem has a theory section with non-empty summary and complexity", () => {
+    for (const topic of practiceData) {
+      for (const subsection of topic.subsections) {
+        for (const problem of subsection.items) {
+          if (problem.theory) {
+            expect(typeof problem.theory.summary).toBe("string");
+            expect(problem.theory.summary.length).toBeGreaterThan(0);
+            if (problem.theory.complexity) {
+              expect(typeof problem.theory.complexity.time).toBe("string");
+              expect(typeof problem.theory.complexity.space).toBe("string");
+            }
+          }
+        }
+      }
+    }
+  });
+
+  test("visualizerUrl starts with /visualizer/ for problems that have it", () => {
+    for (const topic of practiceData) {
+      for (const subsection of topic.subsections) {
+        for (const problem of subsection.items) {
+          if (problem.visualizerUrl) {
+            expect(problem.visualizerUrl).toMatch(/^\/visualizer\//);
+          }
+        }
+      }
+    }
+  });
+
+  test("problem IDs are unique across the entire dataset", () => {
+    const ids = [];
+    for (const topic of practiceData) {
+      for (const subsection of topic.subsections) {
+        for (const problem of subsection.items) {
+          ids.push(problem.id);
+        }
+      }
+    }
+    const uniqueIds = new Set(ids);
+    expect(uniqueIds.size).toBe(ids.length);
+  });
+
+  test("has at least 5 major DSA topic areas", () => {
+    const topics = practiceData.map((t) => t.slug);
+    expect(topics.length).toBeGreaterThanOrEqual(5);
+    // Should include array and graph at minimum
+    expect(topics).toContain("array");
+    expect(topics).toContain("graph");
+  });
+
+  test("each difficulty tier (Beginner, Intermediate, Advanced) appears in at least one topic", () => {
+    const tiersPerTopic = practiceData.map((t) => t.subsections.map((s) => s.title));
+    const allTiers = tiersPerTopic.flat();
+
+    for (const tier of VALID_TIERS) {
+      expect(allTiers).toContain(tier);
+    }
+  });
+});
diff --git a/__tests__/rateLimit.test.js b/__tests__/rateLimit.test.js
new file mode 100644
index 000000000..6849ed1cb
--- /dev/null
+++ b/__tests__/rateLimit.test.js
@@ -0,0 +1,102 @@
+// __tests__/rateLimit.test.js
+//
+// Run with:  npx jest __tests__/rateLimit.test.js
+//
+// Tests the sliding-window logic in lib/rateLimit/rateLimit.js.
+// No network, no Supabase, no Next.js needed — pure unit tests.
+
+import { checkRateLimit, resetKey, resetAll } from "../src/lib/rateLimit/index.js";
+
+describe("checkRateLimit — sliding window", () => {
+  const KEY = "test-user-123";
+  const MAX = 5;
+  const WINDOW = 60; // seconds
+
+  beforeEach(async () => {
+    await resetAll(); // start every test with a clean slate
+  });
+
+  // ── Basic allow / deny ────────────────────────────────────────────
+  test("allows requests up to the limit", async () => {
+    for (let i = 0; i < MAX; i++) {
+      const result = await checkRateLimit(KEY, MAX, WINDOW);
+      expect(result.allowed).toBe(true);
+      expect(result.remaining).toBe(MAX - (i + 1));
+    }
+  });
+
+  test("denies the request that exceeds the limit", async () => {
+    for (let i = 0; i < MAX; i++) await checkRateLimit(KEY, MAX, WINDOW);
+    const result = await checkRateLimit(KEY, MAX, WINDOW);
+    expect(result.allowed).toBe(false);
+    expect(result.remaining).toBe(0);
+    expect(result.retryAfter).toBeGreaterThan(0);
+  });
+
+  test("retryAfter is a positive number of seconds when denied", async () => {
+    for (let i = 0; i <= MAX; i++) await checkRateLimit(KEY, MAX, WINDOW);
+    const { retryAfter } = await checkRateLimit(KEY, MAX, WINDOW);
+    expect(typeof retryAfter).toBe("number");
+    expect(retryAfter).toBeGreaterThan(0);
+    expect(retryAfter).toBeLessThanOrEqual(WINDOW);
+  });
+
+  // ── Key isolation ─────────────────────────────────────────────────
+  test("different keys have independent counters", async () => {
+    const KEY_A = "user-a";
+    const KEY_B = "user-b";
+    for (let i = 0; i < MAX; i++) await checkRateLimit(KEY_A, MAX, WINDOW);
+
+    // Key A is exhausted but Key B is still fresh
+    expect((await checkRateLimit(KEY_A, MAX, WINDOW)).allowed).toBe(false);
+    expect((await checkRateLimit(KEY_B, MAX, WINDOW)).allowed).toBe(true);
+  });
+
+  // ── Sliding window: old timestamps expire ─────────────────────────
+  test("allows new requests after the window expires", async () => {
+    // Use a very short window (1 second) and fake Date.now
+    const TINY_WINDOW = 1; // second
+    const realDateNow = Date.now.bind(global.Date);
+
+    // Fill the bucket at t=0
+    const t0 = 1_700_000_000_000;
+    global.Date.now = jest.fn().mockReturnValue(t0);
+    for (let i = 0; i < MAX; i++) await checkRateLimit(KEY, MAX, TINY_WINDOW);
+    expect((await checkRateLimit(KEY, MAX, TINY_WINDOW)).allowed).toBe(false);
+
+    // Advance clock past the window
+    global.Date.now = jest.fn().mockReturnValue(t0 + TINY_WINDOW * 1000 + 100);
+    const result = await checkRateLimit(KEY, MAX, TINY_WINDOW);
+    expect(result.allowed).toBe(true);
+
+    global.Date.now = realDateNow;
+  });
+
+  // ── resetKey ──────────────────────────────────────────────────────
+  test("resetKey clears only the specified key", async () => {
+    const KEY_C = "user-c";
+    const KEY_D = "user-d";
+
+    for (let i = 0; i < MAX; i++) await checkRateLimit(KEY_C, MAX, WINDOW);
+    for (let i = 0; i < MAX; i++) await checkRateLimit(KEY_D, MAX, WINDOW);
+
+    await resetKey(KEY_C);
+
+    expect((await checkRateLimit(KEY_C, MAX, WINDOW)).allowed).toBe(true); // reset
+    expect((await checkRateLimit(KEY_D, MAX, WINDOW)).allowed).toBe(false); // still exhausted
+  });
+
+  // ── Remaining counter ─────────────────────────────────────────────
+  test("remaining decrements correctly with each request", async () => {
+    for (let i = 0; i < MAX; i++) {
+      const { remaining } = await checkRateLimit(KEY, MAX, WINDOW);
+      expect(remaining).toBe(MAX - i - 1);
+    }
+  });
+
+  // ── Zero retryAfter when allowed ──────────────────────────────────
+  test("retryAfter is 0 when the request is allowed", async () => {
+    const { retryAfter } = await checkRateLimit(KEY, MAX, WINDOW);
+    expect(retryAfter).toBe(0);
+  });
+});
\ No newline at end of file
diff --git a/__tests__/sandbox.test.js b/__tests__/sandbox.test.js
new file mode 100644
index 000000000..bc4ae5b4f
--- /dev/null
+++ b/__tests__/sandbox.test.js
@@ -0,0 +1,138 @@
+// __tests__/sandbox.test.js
+//
+// Run with:  npx jest __tests__/sandbox.test.js
+//
+// Prerequisites: npm i --save-dev jest  &&  npm i isolated-vm
+//
+// These tests verify the three contract guarantees of executor.js:
+//   1. Valid code  → SUCCESS with captured output
+//   2. Infinite loop → TLE within ~1100 ms
+//   3. Memory bomb → MLE (or TLE if the OOM path is slow on this machine)
+
+const { executeCode } = require("../src/lib/sandbox/executor");
+const { EXECUTION_STATUS } = require("../src/lib/sandbox/errorCodes");
+
+// isolated-vm can take a moment on first load — extend default timeout
+jest.setTimeout(10_000);
+
+describe("executeCode — sandbox guarantees", () => {
+  // ── Happy path ────────────────────────────────────────────────────
+  test("returns SUCCESS and captured output for valid code", async () => {
+    const result = await executeCode(`
+      console.log("hello world");
+      console.log(1 + 1);
+    `);
+
+    expect(result.status).toBe(EXECUTION_STATUS.SUCCESS);
+    expect(result.output).toContain("hello world");
+    expect(result.output).toContain("2");
+    expect(result.executionTime).toBeGreaterThanOrEqual(0);
+    // Note: isolated-vm doesn't provide memory usage tracking like vm
+    // expect(result.memoryUsed).toBeGreaterThan(0);
+  });
+
+  test("captures multi-line console output in order", async () => {
+    const result = await executeCode(`
+      for (let i = 1; i <= 3; i++) console.log(i);
+    `);
+    expect(result.status).toBe(EXECUTION_STATUS.SUCCESS);
+    expect(result.output).toBe("1\n2\n3");
+  });
+
+  test("handles template literals correctly without syntax errors", async () => {
+    const result = await executeCode(`
+      const val = 42;
+      console.log(\`value is \${val}\`);
+    `);
+    expect(result.status).toBe(EXECUTION_STATUS.SUCCESS);
+    expect(result.output).toContain("value is 42");
+  });
+
+  // ── Syntax error ──────────────────────────────────────────────────
+  test("returns RUNTIME_ERROR for syntax errors (never reaches execution)", async () => {
+    const result = await executeCode(`const x = (`); // unterminated
+    expect(result.status).toBe(EXECUTION_STATUS.RUNTIME_ERROR);
+    expect(result.error).toMatch(/SyntaxError/i);
+  });
+
+  // ── Runtime error ─────────────────────────────────────────────────
+  test("returns RUNTIME_ERROR for thrown exceptions", async () => {
+    const result = await executeCode(`
+      throw new Error("user mistake");
+    `);
+    expect(result.status).toBe(EXECUTION_STATUS.RUNTIME_ERROR);
+    expect(result.error).toContain("user mistake");
+  });
+
+  test("returns RUNTIME_ERROR for ReferenceError", async () => {
+    const result = await executeCode(`console.log(undeclaredVariable);`);
+    expect(result.status).toBe(EXECUTION_STATUS.RUNTIME_ERROR);
+  });
+
+  // ── Time Limit Exceeded ───────────────────────────────────────────
+  test("returns TLE for infinite loop", async () => {
+    const result = await executeCode(`while (true) {}`);
+    expect(result.status).toBe(EXECUTION_STATUS.TLE);
+    // executionTime should be ~MAX_TIMEOUT_MS, not far above it
+    expect(result.executionTime).toBeLessThan(3000);
+  });
+
+  test("returns TLE for code that sleeps via busy-wait", async () => {
+    const result = await executeCode(`
+      const end = Date.now() + 5000;
+      while (Date.now() < end) {}
+    `);
+    expect(result.status).toBe(EXECUTION_STATUS.TLE);
+  });
+
+  // ── Memory Limit Exceeded ─────────────────────────────────────────
+  test("returns MLE or TLE for aggressive memory allocation", async () => {
+    // Allocate large arrays until heap is exhausted.
+    // Some machines hit TLE before MLE — both are acceptable.
+    const result = await executeCode(`
+      const arrays = [];
+      while (true) {
+        arrays.push(new Array(1_000_000).fill("x"));
+      }
+    `);
+    expect([EXECUTION_STATUS.MLE, EXECUTION_STATUS.TLE]).toContain(result.status);
+  });
+
+  // ── Isolation: host globals must not be accessible ────────────────
+  test("cannot access Node.js process global", async () => {
+    const result = await executeCode(`
+      if (typeof process !== "undefined") {
+        console.log("EXPOSED:" + process.version);
+      } else {
+        console.log("SAFE");
+      }
+    `);
+    // process must not exist inside the isolate
+    expect(result.output).not.toContain("EXPOSED");
+    expect(result.output).toContain("SAFE");
+  });
+
+  test("cannot require modules", async () => {
+    const result = await executeCode(`
+      try {
+        require("fs");
+        console.log("EXPOSED");
+      } catch(e) {
+        console.log("BLOCKED:" + e.message);
+      }
+    `);
+    expect(result.output).not.toContain("EXPOSED");
+    expect(result.output).toContain("BLOCKED");
+  });
+
+  // ── Output truncation ─────────────────────────────────────────────
+  test("truncates output exceeding MAX_OUTPUT_LENGTH", async () => {
+    // Produce ~16 000 chars of output (more than 8000 char limit)
+    const result = await executeCode(`
+      for (let i = 0; i < 1000; i++) console.log("A".repeat(20));
+    `);
+    expect(result.status).toBe(EXECUTION_STATUS.SUCCESS);
+    expect(result.output.length).toBeLessThanOrEqual(8100); // small buffer for "… truncated"
+    expect(result.output).toContain("truncated");
+  });
+});
\ No newline at end of file
diff --git a/__tests__/sharedUtils.test.js b/__tests__/sharedUtils.test.js
new file mode 100644
index 000000000..1fd3562ac
--- /dev/null
+++ b/__tests__/sharedUtils.test.js
@@ -0,0 +1,165 @@
+// __tests__/sharedUtils.test.js
+//
+// Run with:  npx jest __tests__/sharedUtils.test.js
+//
+// Tests the shared utility functions in src/lib/shared-utils.js:
+// escapeHtml, isValidHttpUrl, and getSupabaseConfig.
+
+const { escapeHtml, isValidHttpUrl, getSupabaseConfig } = require("../src/lib/shared-utils");
+
+describe("isValidHttpUrl", () => {
+  test("returns true for https://example.com", () => {
+    expect(isValidHttpUrl("https://example.com")).toBe(true);
+  });
+
+  test("returns true for http://example.com", () => {
+    expect(isValidHttpUrl("http://example.com")).toBe(true);
+  });
+
+  test("returns true for https://example.com:8080/path", () => {
+    expect(isValidHttpUrl("https://example.com:8080/path")).toBe(true);
+  });
+
+  test("returns false for ftp://example.com", () => {
+    expect(isValidHttpUrl("ftp://example.com")).toBe(false);
+  });
+
+  test("returns false for file:///path/to/file", () => {
+    expect(isValidHttpUrl("file:///path/to/file")).toBe(false);
+  });
+
+  test("returns false for javascript:alert(1)", () => {
+    expect(isValidHttpUrl("javascript:alert(1)")).toBe(false);
+  });
+
+  test("returns false for malformed strings", () => {
+    expect(isValidHttpUrl("not-a-url")).toBe(false);
+    expect(isValidHttpUrl("")).toBe(false);
+    expect(isValidHttpUrl("://missing-protocol")).toBe(false);
+  });
+});
+
+describe("escapeHtml", () => {
+  test("escapes ampersand to &amp;", () => {
+    expect(escapeHtml("a & b")).toBe("a &amp; b");
+  });
+
+  test("escapes less-than to &lt;", () => {
+    expect(escapeHtml("a < b")).toBe("a &lt; b");
+  });
+
+  test("escapes greater-than to &gt;", () => {
+    expect(escapeHtml("a > b")).toBe("a &gt; b");
+  });
+
+  test("escapes double quote to &quot;", () => {
+    expect(escapeHtml('say "hello"')).toBe("say &quot;hello&quot;");
+  });
+
+  test("escapes single quote to &#39;", () => {
+    expect(escapeHtml("it's")).toBe("it&#39;s");
+  });
+
+  test("escapes all special characters in a mixed string", () => {
+    expect(escapeHtml('<script>alert("xss")</script>')).toBe(
+      "&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;"
+    );
+  });
+
+  test("returns empty string for empty input", () => {
+    expect(escapeHtml("")).toBe("");
+  });
+
+  test("returns stringified value for non-string input (String coercion)", () => {
+    // String(null) produces "null", not ""
+    expect(escapeHtml(null)).toBe("null");
+    // String(undefined) produces "undefined"
+    expect(escapeHtml(undefined)).toBe("undefined");
+    // String(123) produces "123"
+    expect(escapeHtml(123)).toBe("123");
+  });
+
+  test("re-escapes already-escaped content (simple replace-based escaper)", () => {
+    // The simple replace-based escaper does not guard against double-escaping.
+    // & in &amp; becomes &amp;amp;
+    expect(escapeHtml("a &amp; b")).toBe("a &amp;amp; b");
+  });
+});
+
+describe("getSupabaseConfig", () => {
+  const originalEnv = process.env;
+
+  beforeEach(() => {
+    jest.resetModules();
+    process.env = { ...originalEnv };
+  });
+
+  afterAll(() => {
+    process.env = originalEnv;
+  });
+
+  test("returns null when NEXT_PUBLIC_SUPABASE_URL is missing", () => {
+    delete process.env.NEXT_PUBLIC_SUPABASE_URL;
+    delete process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+    const { getSupabaseConfig } = require("../src/lib/shared-utils");
+    expect(getSupabaseConfig()).toBe(null);
+  });
+
+  test("returns null when NEXT_PUBLIC_SUPABASE_ANON_KEY is missing", () => {
+    process.env.NEXT_PUBLIC_SUPABASE_URL = "https://example.supabase.co";
+    delete process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+    const { getSupabaseConfig } = require("../src/lib/shared-utils");
+    expect(getSupabaseConfig()).toBe(null);
+  });
+
+  test("returns null when URL has invalid protocol", () => {
+    process.env.NEXT_PUBLIC_SUPABASE_URL = "ftp://example.supabase.co";
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY = "valid-key";
+    const { getSupabaseConfig } = require("../src/lib/shared-utils");
+    expect(getSupabaseConfig()).toBe(null);
+  });
+
+  test("returns config object with trimmed values when env vars are valid", () => {
+    process.env.NEXT_PUBLIC_SUPABASE_URL = "  https://example.supabase.co  ";
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY = "  eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9  ";
+    const { getSupabaseConfig } = require("../src/lib/shared-utils");
+    const config = getSupabaseConfig();
+    expect(config).not.toBe(null);
+    expect(config.supabaseUrl).toBe("https://example.supabase.co");
+    expect(config.supabaseAnonKey).toBe("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9");
+  });
+
+  test("replaces localhost: with 127.0.0.1: in URL", () => {
+    process.env.NEXT_PUBLIC_SUPABASE_URL = "http://localhost:54321";
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY = "key";
+    const { getSupabaseConfig } = require("../src/lib/shared-utils");
+    expect(getSupabaseConfig().supabaseUrl).toBe("http://127.0.0.1:54321");
+  });
+
+  test("includes service key when SUPABASE_SERVICE_KEY is set", () => {
+    process.env.NEXT_PUBLIC_SUPABASE_URL = "https://example.supabase.co";
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY = "anon-key";
+    process.env.SUPABASE_SERVICE_KEY = "service-key";
+    const { getSupabaseConfig } = require("../src/lib/shared-utils");
+    const config = getSupabaseConfig();
+    expect(config.supabaseServiceKey).toBe("service-key");
+  });
+
+  test("prefers SUPABASE_SERVICE_KEY over SUPABASE_SERVICE_ROLE_KEY when both are set", () => {
+    process.env.NEXT_PUBLIC_SUPABASE_URL = "https://example.supabase.co";
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY = "anon-key";
+    process.env.SUPABASE_SERVICE_KEY = "service-key";
+    process.env.SUPABASE_SERVICE_ROLE_KEY = "role-key";
+    const { getSupabaseConfig } = require("../src/lib/shared-utils");
+    expect(getSupabaseConfig().supabaseServiceKey).toBe("service-key");
+  });
+
+  test("uses SUPABASE_SERVICE_ROLE_KEY when SUPABASE_SERVICE_KEY is not set", () => {
+    process.env.NEXT_PUBLIC_SUPABASE_URL = "https://example.supabase.co";
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY = "anon-key";
+    delete process.env.SUPABASE_SERVICE_KEY;
+    process.env.SUPABASE_SERVICE_ROLE_KEY = "role-key";
+    const { getSupabaseConfig } = require("../src/lib/shared-utils");
+    expect(getSupabaseConfig().supabaseServiceKey).toBe("role-key");
+  });
+});
diff --git a/__tests__/stepRunner.test.js b/__tests__/stepRunner.test.js
new file mode 100644
index 000000000..3528b25f7
--- /dev/null
+++ b/__tests__/stepRunner.test.js
@@ -0,0 +1,112 @@
+// __tests__/stepRunner.test.js
+//
+// Run with:  npx jest __tests__/stepRunner.test.js
+//
+// Tests the step runner utilities in src/lib/visualizer/stepRunner.js:
+// registerAlgorithm, createSyncStepRunner, buildStepRunner, generateSteps.
+
+const {
+  registerAlgorithm,
+  createSyncStepRunner,
+  buildStepRunner,
+  generateSteps,
+} = require("../src/lib/visualizer/stepRunner");
+
+describe("registerAlgorithm", () => {
+  test("registers a named algorithm function", () => {
+    const mockFn = jest.fn();
+    registerAlgorithm("testAlgo", mockFn);
+    // No assertion needed — if it throws, the test fails
+    expect(true).toBe(true);
+  });
+});
+
+describe("createSyncStepRunner", () => {
+  test("returns an array of steps from a generator function", () => {
+    function* simpleGen(input) {
+      yield { step: 1, value: input };
+      yield { step: 2, value: input * 2 };
+      yield { step: 3, value: input * 3 };
+    }
+
+    const runner = createSyncStepRunner(simpleGen);
+    const steps = runner(5);
+
+    expect(Array.isArray(steps)).toBe(true);
+    expect(steps).toHaveLength(3);
+    expect(steps[0]).toEqual({ step: 1, value: 5 });
+    expect(steps[1]).toEqual({ step: 2, value: 10 });
+    expect(steps[2]).toEqual({ step: 3, value: 15 });
+  });
+
+  test("handles empty generator (no yields)", () => {
+    function* emptyGen(input) {
+      // no yields
+    }
+
+    const runner = createSyncStepRunner(emptyGen);
+    const steps = runner("ignored");
+    expect(steps).toEqual([]);
+  });
+
+  test("works with a tree-traversal-style generator", () => {
+    function* treeGen(node) {
+      if (!node) return;
+      yield { visited: node.value };
+      if (node.left) yield* treeGen(node.left);
+      if (node.right) yield* treeGen(node.right);
+    }
+
+    const runner = createSyncStepRunner(treeGen);
+    const tree = {
+      value: "A",
+      left: { value: "B", left: null, right: null },
+      right: { value: "C", left: null, right: null },
+    };
+
+    const steps = runner(tree);
+    expect(steps).toHaveLength(3);
+    expect(steps.map((s) => s.visited)).toEqual(["A", "B", "C"]);
+  });
+});
+
+// buildStepRunner is tested indirectly via createSyncStepRunner and generateSteps.
+// Direct testing of buildStepRunner is skipped because its async for-await-of
+// pattern (for await...of stepGenerator) does not work in Jest's jsdom
+// test environment with sync generators.
+
+describe("generateSteps", () => {
+  test("yields next states from a breadth-first style algorithm function", async () => {
+    // algorithmFn takes a state and returns an array of next states synchronously
+    // generateSteps yields those next states
+    function bfsAlgo(state) {
+      const { node, children } = state;
+      if (!children || children.length === 0) return [];
+      return children.map((c) => ({ node: c, children: [] }));
+    }
+
+    const gen = generateSteps(bfsAlgo, { node: "root", children: ["a", "b"] });
+
+    // generateSteps yields the children (next states), not the root itself
+    const step1 = await gen.next();
+    expect(step1.value).toEqual({ node: "a", children: [] });
+
+    const step2 = await gen.next();
+    expect(step2.value).toEqual({ node: "b", children: [] });
+
+    const done = await gen.next();
+    expect(done.done).toBe(true);
+  });
+
+  test("stops when queue is exhausted (no children from first state)", async () => {
+    function leafState(state) {
+      return []; // no children
+    }
+
+    const gen = generateSteps(leafState, { value: 42 });
+    // No children means no yields
+    const done = await gen.next();
+    expect(done.value).toBeUndefined();
+    expect(done.done).toBe(true);
+  });
+});
diff --git a/app/api/auth/route.js b/app/api/auth/route.js
deleted file mode 100755
index 0e7b346d4..000000000
--- a/app/api/auth/route.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import { createClient } from "@supabase/supabase-js";
-
-const supabase = createClient(
-  process.env.NEXT_PUBLIC_SUPABASE_URL || "https://placeholder.supabase.co",
-  process.env.SUPABASE_SERVICE_KEY || "placeholder-key",
-);
-
-export async function POST(req) {
-  try {
-    // Parse JSON body safely
-    const body = await req.json();
-    const { email, password, captchaToken, action, name } = body || {};
-
-    // Validate required fields
-    if (!email || !password) {
-      return new Response(
-        JSON.stringify({
-          success: false,
-          message: "Email and password are required",
-        }),
-        { status: 400 },
-      );
-    }
-    if (!captchaToken) {
-      return new Response(
-        JSON.stringify({ success: false, message: "Captcha token missing" }),
-        { status: 400 },
-      );
-    }
-
-    // Verify Turnstile token for both signup and login
-    const verifyRes = await fetch(
-      "https://challenges.cloudflare.com/turnstile/v0/siteverify",
-      {
-        method: "POST",
-        headers: { "Content-Type": "application/x-www-form-urlencoded" },
-        body: new URLSearchParams({
-          secret: process.env.TURNSTILE_SECRET_KEY,
-          response: captchaToken,
-        }),
-      },
-    );
-    const verifyData = await verifyRes.json();
-    if (!verifyData.success) {
-      return new Response(
-        JSON.stringify({
-          success: false,
-          message: "Captcha verification failed",
-        }),
-        { status: 400 },
-      );
-    }
-
-    if (action === "signup") {
-      // Create Supabase user with metadata
-      const { data, error } = await supabase.auth.signUp({
-        email,
-        password,
-        options: {
-          data: { display_name: name },
-        },
-      });
-      if (error) {
-        return new Response(
-          JSON.stringify({ success: false, message: error.message }),
-          { status: 400 },
-        );
-      }
-      return new Response(
-        JSON.stringify({
-          success: true,
-          message: "Signup successful. Verification email sent.",
-          trigger: true,
-        }),
-        { status: 200 },
-      );
-    } else if (action === "login") {
-      // For login, only verify captcha and return success.
-      return new Response(
-        JSON.stringify({
-          success: true,
-          message: "Captcha verified. You can now login using email/password.",
-        }),
-        { status: 200 },
-      );
-    }
-
-    // Invalid action
-    else {
-      return new Response(
-        JSON.stringify({ success: false, message: "Invalid action" }),
-        { status: 400 },
-      );
-    }
-  } catch (err) {
-    console.error("API Error:", err);
-    return new Response(
-      JSON.stringify({ success: false, message: "Internal server error" }),
-      { status: 500 },
-    );
-  }
-}
diff --git a/app/api/contact/route.js b/app/api/contact/route.js
deleted file mode 100755
index be5116d1f..000000000
--- a/app/api/contact/route.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import nodemailer from "nodemailer";
-
-export async function POST(req) {
-  try {
-    const { name, email, subject, message } = await req.json();
-
-    // Create transporter
-    const transporter = nodemailer.createTransport({
-      service: "gmail",
-      auth: {
-        user: process.env.EMAIL_USER,
-        pass: process.env.EMAIL_PASSWORD,
-      },
-    });
-
-    // Email options
-    const mailOptions = {
-      from: email,
-      to: process.env.EMAIL_USER,
-      subject: `New Contact Form Submission: ${subject}`,
-      text: `
-        Name: ${name}
-        Email: ${email}
-        Subject: ${subject}
-        Message: ${message}
-      `,
-      html: `
-        <h2>New Contact Form Submission</h2>
-        <p><strong>Name:</strong> ${name}</p>
-        <p><strong>Email:</strong> ${email}</p>
-        <p><strong>Subject:</strong> ${subject}</p>
-        <p><strong>Message:</strong></p>
-        <p>${message.replace(/\n/g, "<br>")}</p>
-      `,
-    };
-
-    // Send email
-    await transporter.sendMail(mailOptions);
-
-    return Response.json({ message: "Email sent successfully" });
-  } catch (error) {
-    console.error("Error sending email:", error);
-    return new Response(JSON.stringify({ message: "Error sending email" }), {
-      status: 500,
-      headers: { "Content-Type": "application/json" },
-    });
-  }
-}
diff --git a/app/api/send-review/route.js b/app/api/send-review/route.js
deleted file mode 100755
index 3efbc7b55..000000000
--- a/app/api/send-review/route.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { NextResponse } from 'next/server';
-import nodemailer from 'nodemailer';
-
-export async function POST(request) {
-  const { name, email, review, rating, to } = await request.json();
-
-  try {
-    // Create transporter
-    const transporter = nodemailer.createTransport({
-      service: 'gmail',
-      auth: {
-        user: process.env.EMAIL_USER,
-        pass: process.env.EMAIL_PASSWORD,
-      },
-    });
-
-    // Email options
-    const mailOptions = {
-      from: process.env.EMAIL_USER,
-      to: to || 'routsohan2006@gmail.com', // Default to your email
-      subject: `New Review Submission from ${name}`,
-      html: `
-        <h2>New Review Received</h2>
-        <p><strong>Name:</strong> ${name}</p>
-        <p><strong>Email:</strong> ${email}</p>
-        <p><strong>Rating:</strong> ${'★'.repeat(rating)}${'☆'.repeat(5 - rating)}</p>
-        <p><strong>Review:</strong></p>
-        <p>${review}</p>
-      `,
-    };
-
-    // Send email
-    await transporter.sendMail(mailOptions);
-
-    return NextResponse.json({ success: true });
-  } catch (error) {
-    console.error('Error sending email:', error);
-    return NextResponse.json(
-      { success: false, error: 'Failed to send email' },
-      { status: 500 }
-    );
-  }
-}
\ No newline at end of file
diff --git a/app/blogs/Content/dsaDifferent/content.jsx b/app/blogs/Content/dsaDifferent/content.jsx
deleted file mode 100755
index a0abbb0cb..000000000
--- a/app/blogs/Content/dsaDifferent/content.jsx
+++ /dev/null
@@ -1,314 +0,0 @@
-"use client";
-import { FiCopy, FiBookmark, FiShare2 } from "react-icons/fi";
-import { useState } from "react";
-
-const BlogContent = () => {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(window.location.href);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  const Paragraphs = [
-    `A common question among developers learning Data Structures and Algorithms (DSA) is whether these concepts change across programming languages. While the fundamental principles remain consistent, their implementations and optimizations can vary significantly. Let's explore how DSA manifests in different languages and what this means for developers.`,
-    `Programming languages offer different levels of abstraction and built-in utilities. For example, Python's rich standard library makes certain algorithms easier to implement, whereas C++ might offer more control over memory, making it suitable for performance-critical scenarios.`,
-    `This language-agnostic nature is why DSA knowledge transfers well between languages. However, the implementation details and performance characteristics can differ.`,
-    `These differences become particularly important when working on performance-critical applications or when interfacing between multiple languages in a single project.`,
-    `When learning DSA concepts, focus first on understanding the core principles, then explore how your primary language implements these structures. This approach gives you both the theoretical foundation and practical skills needed for real-world development.`,
-  ];
-
-  const universalConcepts = [
-    { points: "Time complexity (Big O notation)" },
-    { points: "Space complexity analysis" },
-    { points: "Abstract data type behaviors" },
-    { points: "Algorithm design patterns" },
-    { points: "Problem-solving approaches" },
-  ];
-
-  const languageExamples = [
-    {
-      language: "JavaScript",
-      structures: [
-        "Arrays are actually objects with integer keys",
-        "Objects as hash maps (but with insertion order preserved)",
-        "No built-in heap/priority queue",
-        "TypedArrays for numerical work"
-      ],
-      algorithms: [
-        "Event loop affects async algorithm design",
-        "Single-threaded nature impacts parallel processing",
-        "Prototypal inheritance affects object structures"
-      ]
-    },
-    {
-      language: "Python",
-      structures: [
-        "Lists as dynamic arrays",
-        "Dictionaries as highly optimized hash tables",
-        "Tuples as immutable sequences",
-        "Sets with built-in mathematical operations"
-      ],
-      algorithms: [
-        "List comprehensions enable concise transformations",
-        "Generator expressions for memory-efficient iteration",
-        "Built-in sort uses Timsort algorithm"
-      ]
-    },
-    {
-      language: "Java",
-      structures: [
-        "Primitive arrays vs. ArrayList",
-        "HashMap vs. TreeMap implementations",
-        "Strongly typed collections",
-        "Concurrent collections for threading"
-      ],
-      algorithms: [
-        "JIT compilation affects runtime characteristics",
-        "Garbage collection impacts memory usage",
-        "Bytecode execution adds abstraction layer"
-      ]
-    }
-  ];
-
-  const webDevImplications = [
-    {
-      area: "Frontend (JavaScript)",
-      considerations: [
-        "Virtual DOM diffing algorithms in frameworks",
-        "State management efficiency in large apps",
-        "Memoization techniques for performance"
-      ]
-    },
-    {
-      area: "Backend (Node.js/Python/Java)",
-      considerations: [
-        "Database query optimization",
-        "API response caching strategies",
-        "Load balancing and request processing"
-      ]
-    },
-    {
-      area: "Full-Stack",
-      considerations: [
-        "Data serialization between layers",
-        "Algorithm choice for shared business logic",
-        "Consistent data modeling across boundaries"
-      ]
-    }
-  ];
-
-  const protips = [
-    { points: "Learn DSA in one language first, then compare implementations" },
-    { points: "Use language-specific benchmarks to verify performance assumptions" },
-    { points: "Study standard library implementations of common structures" },
-    { points: "Understand how your language's memory model affects data structures" },
-    { points: "Don’t just translate code between languages—adapt it to leverage language strengths" }
-  ];
-
-  return (
-    <article className="max-w-4xl mx-auto px-4 pt-14 py-10">
-      {/* Article Header */}
-      <header className="mb-12 pt-14">
-        <div className="flex items-center justify-between mb-4">
-          <span className="px-3 py-1 rounded-full text-sm font-medium bg-black text-white dark:bg-zinc-700 dark:text-zinc-200">
-            Computer Science
-          </span>
-          <div className="flex space-x-3 text-gray-500 dark:text-zinc-400">
-            <button
-              onClick={handleCopy}
-              className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
-              aria-label="Copy link"
-            >
-              {copied ? <span className="text-xs">Copied!</span> : <FiCopy />}
-            </button>
-            <button
-              className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
-              aria-label="Bookmark"
-            >
-              <FiBookmark />
-            </button>
-            <button
-              className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
-              aria-label="Share"
-            >
-              <FiShare2 />
-            </button>
-          </div>
-        </div>
-
-        <h1 className="text-3xl md:text-4xl font-bold text-black dark:text-zinc-100 mb-4 leading-tight">
-          Are Data Structures and Algorithms Different for Different Languages?
-        </h1>
-
-        <div className="flex items-center text-gray-500 dark:text-zinc-400 text-sm">
-          <span>Published on May 20, 2025</span>
-          <span className="mx-2">•</span>
-          <span>10 min read</span>
-        </div>
-      </header>
-
-      {/* Featured Image */}
-      <div className="relative w-full h-64 md:h-96 bg-gray-100 dark:bg-zinc-800 rounded-xl mb-12 overflow-hidden">
-        <img
-          src="/blog/dsaDifferent.png"
-          alt="Data structures across programming languages"
-          className="w-full h-full object-cover"
-        />
-        <div className="absolute inset-0 bg-gradient-to-r from-black to-transparent opacity-30 dark:opacity-50"></div>
-        <div className="absolute bottom-6 left-6 text-white dark:text-zinc-100">
-          <p className="text-sm">
-            Comparing DSA implementations across JavaScript, Python, and Java
-          </p>
-        </div>
-      </div>
-
-      {/* Article Content */}
-      <div className="prose prose-lg dark:prose-invert max-w-none">
-        <p className="text-lg text-gray-700 dark:text-zinc-300 leading-relaxed mb-8">
-          {Paragraphs[0]}
-        </p>
-
-        <section className="mb-12">
-          <h2 className="text-2xl font-bold text-black dark:text-zinc-100 mb-6 pb-2 border-b border-gray-200 dark:border-zinc-700">
-            Universal DSA Concepts
-          </h2>
-          <div className="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg mb-6">
-            <p className="font-medium text-green-800 dark:text-green-200">
-              Core Insight: The theoretical foundations of data structures and algorithms
-              remain constant regardless of programming language.
-            </p>
-          </div>
-          <ul className="list-disc pl-6 mb-6 space-y-2 dark:text-zinc-300">
-            {universalConcepts.map((item, index) => (
-              <li key={index}>{item.points}</li>
-            ))}
-          </ul>
-          <p className="dark:text-zinc-300">{Paragraphs[2]}</p>
-        </section>
-
-        <section className="mb-12">
-          <h2 className="text-2xl font-bold text-black dark:text-zinc-100 mb-6 pb-2 border-b border-gray-200 dark:border-zinc-700">
-            Language-Specific Implementations
-          </h2>
-
-          <div className="grid md:grid-cols-3 gap-6 mb-8">
-            {languageExamples.map((lang, index) => (
-              <div key={index} className="border dark:border-zinc-700 rounded-lg overflow-hidden">
-                <div className="bg-blue-50 dark:bg-blue-900/30 p-4 border-b dark:border-zinc-700">
-                  <h3 className="font-bold text-lg dark:text-zinc-100">{lang.language}</h3>
-                </div>
-                <div className="p-4">
-                  <h4 className="font-medium dark:text-zinc-200 mb-2">Structures:</h4>
-                  <ul className="list-disc pl-5 mb-4 space-y-1 text-sm dark:text-zinc-300">
-                    {lang.structures.map((item, i) => (
-                      <li key={i}>{item}</li>
-                    ))}
-                  </ul>
-                  <h4 className="font-medium dark:text-zinc-200 mb-2">Algorithms:</h4>
-                  <ul className="list-disc pl-5 space-y-1 text-sm dark:text-zinc-300">
-                    {lang.algorithms.map((item, i) => (
-                      <li key={i}>{item}</li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-            ))}
-          </div>
-          <p className="dark:text-zinc-300">
-            These distinctions illustrate that while the same data structure or algorithm may exist across languages, their behavior, performance, or even syntax might differ. Developers should not only know how something works in theory but also how their chosen language expresses and optimizes it.
-          </p>
-        </section>
-
-        <section className="mb-12">
-          <h2 className="text-2xl font-bold text-black dark:text-zinc-100 mb-6 pb-2 border-b border-gray-200 dark:border-zinc-700">
-            Web Development Implications
-          </h2>
-
-          <div className="grid md:grid-cols-3 gap-6 mb-6">
-            {webDevImplications.map((item, index) => (
-              <div key={index} className="bg-gray-50 dark:bg-zinc-800 p-5 rounded-lg">
-                <h3 className="font-bold dark:text-zinc-100 mb-3">{item.area}</h3>
-                <ul className="space-y-2">
-                  {item.considerations.map((point, i) => (
-                    <li key={i} className="flex items-start">
-                      <span className="inline-block w-1.5 h-1.5 rounded-full bg-blue-500 mt-2 mr-2"></span>
-                      <span className="dark:text-zinc-300">{point}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </div>
-
-          <p className="dark:text-zinc-300">{Paragraphs[3]}</p>
-          <p className="dark:text-zinc-300">
-            Developers building cross-platform or microservice-based architectures especially benefit from understanding how DSA implementations behave differently across tech stacks.
-          </p>
-        </section>
-
-        <section className="dark:bg-zinc-800 bg-gray-100 dark:text-white p-8 rounded-xl mb-12">
-          <h3 className="text-xl font-bold mb-4">
-            Pro Tips for Language-Agnostic DSA Learning
-          </h3>
-          <ul className="list-disc pl-6 space-y-2">
-            {protips.map((item, index) => (
-              <li key={index}>{item.points}</li>
-            ))}
-          </ul>
-        </section>
-
-        <section>
-          <h2 className="text-2xl font-bold text-black dark:text-zinc-100 mb-4">
-            Key Takeaway
-          </h2>
-          <div className="dark:bg-zinc-800 bg-gray-100 p-6 rounded-lg">
-            <p className="dark:text-white">
-              While data structures and algorithms may be implemented differently across languages,
-              the core concepts remain the same. Master the fundamentals first, then learn how your
-              preferred languages realize these concepts in practice. This dual understanding not only enhances your adaptability but also empowers you to choose the most efficient solution depending on the project requirements and language capabilities.
-            </p>
-          </div>
-        </section>
-      </div>
-
-      {/* Article Footer */}
-      <footer className="mt-16 pt-8 border-t border-gray-200 dark:border-zinc-700">
-        <div className="flex flex-wrap justify-between items-center">
-          <div className="mb-4 md:mb-0">
-            <h3 className="font-bold text-black dark:text-zinc-100 mb-2">
-              Share this article
-            </h3>
-            <div className="flex space-x-3">
-              {[
-                {
-                  name: "Twitter",
-                  url: "https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.dsavisualizer.in%2Fblogs%2FContent%2FdsaDifferent&text=Exploring%20if%20Data%20Structures%20and%20Algorithms%20are%20different%20across%20languages%20in%20this%20blog%20post%21%20A%20must-read%20for%20programmers.%20%23DSA%20%23ProgrammingLanguages"
-                },
-                {
-                  name: "LinkedIn",
-                  url: "https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.dsavisualizer.in%2Fblogs%2FContent%2FdsaDifferent"
-                },
-                {
-                  name: "Facebook",
-                  url: "https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.dsavisualizer.in%2Fblogs%2FContent%2FdsaDifferent"
-                }
-              ].map((social) => (
-                <button
-                  key={social.name}
-                  onClick={() => window.open(social.url, '_blank')}
-                  className="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors dark:border-zinc-600 dark:text-zinc-300"
-                >
-                  {social.name}
-                </button>
-              ))}
-            </div>
-          </div>
-        </div>
-      </footer>
-    </article>
-  );
-};
-
-export default BlogContent;
\ No newline at end of file
diff --git a/app/blogs/Content/dsaDifferent/page.jsx b/app/blogs/Content/dsaDifferent/page.jsx
deleted file mode 100755
index fcf7d4d49..000000000
--- a/app/blogs/Content/dsaDifferent/page.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import Navbar from "@/app/components/navbar";
-import Footer from "@/app/components/footer";
-import Content from "@/app/blogs/Content/dsaDifferent/content";
-
-export const metadata = {
-  title: "Are Data Structures and Algorithms Different for Different Languages?",
-  description:
-    "Uncover the truth behind language-specific implementations of DSA. Learn how data structures and algorithms vary in syntax, performance, and usage across programming languages.",
-  keywords: [
-    "Data Structures",
-    "Algorithms",
-    "Programming Languages",
-    "JavaScript",
-    "Python",
-    "C++",
-    "Java",
-    "Language Comparison DSA",
-    "Coding Interview",
-    "Performance Optimization",
-    "Backend vs Frontend DSA"
-  ],
-  authors: [{ name: "Sohan Rout", url: "https://www.linkedin.com/in/sohan-rout" }],
-  openGraph: {
-    title: "Are Data Structures and Algorithms Different for Different Languages?",
-    description:
-      "Explore how DSA implementations differ across languages like Python, JavaScript, Java, and C++. From syntax to performance, understand what's universal and what's not.",
-    url: "./blogs/Content/dsaDifferent",
-    siteName: "DSA Visualizer",
-    locale: "en_IN",
-    type: "article",
-    images: [
-      {
-        url: "./blog/dsaDifferent.png",
-        width: 1200,
-        height: 630,
-        alt: "How DSA changes across languages",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "Are Data Structures and Algorithms Different for Different Languages?",
-    description:
-      "Do arrays, stacks, or recursion work the same in Python and C++? Learn how the core DSA concepts stay the same—but their implementation varies.",
-    images: ["./blog/dsaDifferent.png"],
-  },
-  category: "Technology",
-  publishedTime: "2024-05-15T08:00:00Z",
-  robots: "index, follow",
-};
-
-const page = () => {
-  return(
-    <main className="bg-white dark:bg-zinc-950">
-      <Navbar/>
-      <Content/>
-      <Footer/>
-    </main>
-  );
-}
-
-export default page;
\ No newline at end of file
diff --git a/app/blogs/Content/dsaWebDev/content.jsx b/app/blogs/Content/dsaWebDev/content.jsx
deleted file mode 100755
index 75f71eeec..000000000
--- a/app/blogs/Content/dsaWebDev/content.jsx
+++ /dev/null
@@ -1,243 +0,0 @@
-"use client";
-import { FiCopy, FiBookmark, FiShare2 } from "react-icons/fi";
-import { useState } from "react";
-
-const BlogContent = () => {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(window.location.href);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  const Paragraphs = [
-    `If you're a web developer or someone aspiring to be one, you've likely wondered if learning data structures and algorithms (DSA) is truly necessary. After all, modern web development is often about building user interfaces and connecting APIs, right? Let's explore this question in depth.`,
-    `At first glance, these tasks don't seem to require deep algorithm knowledge. However, the underlying principles become crucial as applications scale.`,
-    `Understanding concepts like time complexity helps you choose the right approach when dealing with large datasets or performance-critical operations.`,
-    `Instead of just solving abstract problems, apply DSA concepts directly to web development:`,
-    `While you can be a productive web developer without deep DSA knowledge, understanding these concepts will make you more versatile and valuable. You'll write better code, solve problems more efficiently, and have an edge in technical interviews. The key is learning DSA in the context of web development rather than as abstract computer science concepts.`,
-  ];
-
-  const tasks = [
-    { points: "Creating responsive UIs with HTML/CSS/JavaScript" },
-    { points: "Working with frameworks like React, Next.js, or Vue" },
-    { points: "Integrating RESTful APIs and GraphQL endpoints" },
-    { points: "Implementing state management solutions" },
-    { points: "Optimizing performance and accessibility" },
-  ];
-
-  const scenarios = [
-    { points: "Performance optimization" },
-    { points: "Complex state management" },
-    { points: "Efficient data processing" },
-    { points: "Interview preparation" },
-    { points: "Library/framework development" },
-    { points: "System design decisions" },
-  ];
-
-  const examples = [
-    {
-      title: "Autocomplete Search",
-      description: "Trie data structure improves search efficiency",
-    },
-    {
-      title: "Infinite Scroll",
-      description: "Efficient pagination requires proper array handling",
-    },
-    {
-      title: "Form Validation",
-      description: "Graphs can model complex validation rules",
-    },
-    {
-      title: "State Management",
-      description: "Understanding trees helps with state updates",
-    },
-  ];
-
-  const protip = [
-    { points: "Implement your own simplified version of React's reconciliation algorithm" },
-    { points: "Build a custom hook that efficiently manages large datasets" },
-    { points: "Create a visualization of how different sorting algorithms work" },
-  ];
-
-  return (
-    <article className="max-w-4xl mx-auto px-4 pt-14 py-10">
-      {/* Article Header */}
-      <header className="mb-12 pt-14">
-        <div className="flex items-center justify-between mb-4">
-          <span className="px-3 py-1 rounded-full text-sm font-medium bg-black text-white dark:bg-zinc-700 dark:text-zinc-200">
-            Web Development
-          </span>
-          <div className="flex space-x-3 text-gray-500 dark:text-zinc-400">
-            <button
-              onClick={handleCopy}
-              className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
-              aria-label="Copy link"
-            >
-              {copied ? <span className="text-xs">Copied!</span> : <FiCopy />}
-            </button>
-            <button
-              className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
-              aria-label="Bookmark"
-            >
-              <FiBookmark />
-            </button>
-            <button
-              className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
-              aria-label="Share"
-            >
-              <FiShare2 />
-            </button>
-          </div>
-        </div>
-
-        <h1 className="text-3xl md:text-4xl font-bold text-black dark:text-zinc-100 mb-4 leading-tight">
-          Is Data Structures and Algorithms Important for Web Developers?
-        </h1>
-
-        <div className="flex items-center text-gray-500 dark:text-zinc-400 text-sm">
-          <span>Published on May 17, 2025</span>
-          <span className="mx-2">•</span>
-          <span>8 min read</span>
-        </div>
-      </header>
-
-      {/* Featured Image */}
-      <div className="relative w-full h-64 md:h-96 bg-gray-100 dark:bg-zinc-800 rounded-xl mb-12 overflow-hidden">
-        <img
-          src="/blog/dsaWebDev.png"
-          alt="Web developer working with algorithms"
-          className="w-full h-full object-cover"
-        />
-        <div className="absolute inset-0 bg-gradient-to-r from-black to-transparent opacity-30 dark:opacity-50"></div>
-        <div className="absolute bottom-6 left-6 text-white dark:text-zinc-100">
-          <p className="text-sm">
-            Understanding DSA helps build better web applications
-          </p>
-        </div>
-      </div>
-
-      {/* Article Content */}
-      <div className="prose prose-lg dark:prose-invert max-w-none">
-        <p className="text-lg text-gray-700 dark:text-zinc-300 leading-relaxed mb-8">
-          {Paragraphs[0]}
-        </p>
-
-        <section className="mb-12">
-          <h2 className="text-2xl font-bold text-black dark:text-zinc-100 mb-6 pb-2 border-b border-gray-200 dark:border-zinc-700">
-            What Web Developers Actually Do
-          </h2>
-          <p className="mb-4 dark:text-zinc-300">
-            Typical web development tasks include:
-          </p>
-          <ul className="list-disc pl-6 mb-4 space-y-2 dark:text-zinc-300">
-            {tasks.map((item, index) => (
-              <li key={index}>{item.points}</li>
-            ))}
-          </ul>
-          <p className="dark:text-zinc-300">{Paragraphs[1]}</p>
-        </section>
-
-        <section className="mb-12">
-          <h2 className="text-2xl font-bold text-black dark:text-zinc-100 mb-6 pb-2 border-b border-gray-200 dark:border-zinc-700">
-            Where DSA Knowledge Shines in Web Development
-          </h2>
-          <div className="bg-gray-50 dark:bg-zinc-800 p-6 rounded-lg mb-4">
-            <p className="mb-2 font-medium dark:text-zinc-200">
-              Key scenarios where DSA matters:
-            </p>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              {scenarios.map((item, index) => (
-                <span
-                  key={index}
-                  className="px-3 py-1 bg-white dark:bg-zinc-700 rounded-full text-sm shadow-sm dark:text-zinc-200"
-                >
-                  {item.points}
-                </span>
-              ))}
-            </div>
-          </div>
-          <p className="dark:text-zinc-300">{Paragraphs[2]}</p>
-        </section>
-
-        <section className="mb-12">
-          <h2 className="text-2xl font-bold text-black dark:text-zinc-100 mb-6 pb-2 border-b border-gray-200 dark:border-zinc-700">
-            Real-World Examples
-          </h2>
-          <div className="grid md:grid-cols-2 gap-6 mb-4">
-            {examples.map((item, index) => (
-              <div
-                key={index}
-                className="border dark:border-zinc-700 p-4 rounded-lg hover:shadow-md dark:hover:shadow-zinc-700/30 transition-shadow"
-              >
-                <h3 className="font-bold mb-1 dark:text-zinc-100">
-                  {item.title}
-                </h3>
-                <p className="text-sm text-gray-600 dark:text-zinc-400">
-                  {item.description}
-                </p>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        <section className="bg-black dark:bg-zinc-800 text-white dark:text-white p-8 rounded-xl mb-12">
-          <h3 className="text-xl font-bold mb-4">
-            Pro Tip: Practical Learning
-          </h3>
-          <p className="mb-2">{Paragraphs[3]}</p>
-          <ul className="list-disc pl-6 space-y-1">
-            {protip.map((item, index) => (
-              <li key={index}>{item.points}</li>
-            ))}
-          </ul>
-        </section>
-
-        <section>
-          <h2 className="text-2xl font-bold text-black dark:text-zinc-100 mb-4">
-            The Verdict
-          </h2>
-          <p className="text-lg dark:text-zinc-300">{Paragraphs[4]}</p>
-        </section>
-      </div>
-
-      {/* Article Footer */}
-      <footer className="mt-16 pt-8 border-t border-gray-200 dark:border-zinc-700">
-        <div className="flex flex-wrap justify-between items-center">
-          <div className="mb-4 md:mb-0">
-            <h3 className="font-bold text-black dark:text-zinc-100 mb-2">
-              Share this article
-            </h3>
-            <div className="flex space-x-3">
-              {[
-                {
-                  name: "Twitter",
-                  url: "https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.dsavisualizer.in%2Fblogs%2FContent%2FdsaWebDev&text=Just%20read%20this%20insighful%20blog%3A%20Is%20Data%20Structures%20and%20Algorithms%20Important%20for%20Web%20Developers%3F%20%23WebDev%20%23DSA%20%23Programming"
-                },
-                {
-                  name: "LinkedIn",
-                  url: "https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.dsavisualizer.in%2Fblogs%2FContent%2FdsaWebDev"
-                },
-                {
-                  name: "Facebook",
-                  url: "https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.dsavisualizer.in%2Fblogs%2FContent%2FdsaWebDev"
-                }
-              ].map((social) => (
-                <button
-                  key={social.name}
-                  onClick={() => window.open(social.url, '_blank')}
-                  className="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors dark:border-zinc-600 dark:text-zinc-300"
-                >
-                  {social.name}
-                </button>
-              ))}
-            </div>
-          </div>
-        </div>
-      </footer>
-    </article>
-  );
-};
-
-export default BlogContent;
diff --git a/app/blogs/Content/dsaWebDev/page.jsx b/app/blogs/Content/dsaWebDev/page.jsx
deleted file mode 100755
index d7590c3f0..000000000
--- a/app/blogs/Content/dsaWebDev/page.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import Navbar from "@/app/components/navbar";
-import Footer from "@/app/components/footer";
-import Content from "@/app/blogs/Content/dsaWebDev/content";
-
-export const metadata = {
-  title: "Is Data Structures and Algorithms Important for Web Developers?",
-  description:
-    "Discover how DSA can elevate your web development skills. Learn when and why understanding data structures and algorithms matters for frontend and backend web devs.",
-  keywords: [
-    "Data Structures",
-    "Algorithms",
-    "Web Development",
-    "Frontend",
-    "Backend",
-    "DSA for Web Developers",
-    "React",
-    "JavaScript",
-    "Performance Optimization",
-    "Coding Interview Preparation",
-  ],
-  authors: [{ name: "Sohan Rout", url: "https://www.linkedin.com/in/sohan-rout" }],
-  openGraph: {
-    title: "Is Data Structures and Algorithms Important for Web Developers?",
-    description:
-      "Explore how learning DSA can boost your efficiency, optimize performance, and prepare you for tech interviews—even as a web developer.",
-    url: "./blog/dsaWebDev.png",
-    siteName: "DSA Visualizer",
-    locale: "en_IN",
-    type: "article",
-    images: [
-      {
-        url: "./blog/dsaWebDev.png", // Replace with actual OG image
-        width: 1200,
-        height: 630,
-        alt: "DSA for Web Developers",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "Is DSA Important for Web Developers?",
-    description:
-      "Think DSA is only for competitive programming? Think again. Here's how it benefits modern web developers.",
-    images: ["./blog/dsaWebDev.png"],
-  },
-  category: "Technology",
-  publishedTime: "2024-05-15T08:00:00Z",
-  robots: "index, follow",
-};
-
-const page = () => {
-  return(
-    <main className="bg-white dark:bg-zinc-950">
-      <Navbar/>
-      <Content/>
-      <Footer/>
-    </main>
-  );
-}
-
-export default page;
\ No newline at end of file
diff --git a/app/blogs/Content/timeRequired/content.jsx b/app/blogs/Content/timeRequired/content.jsx
deleted file mode 100755
index 402478bc8..000000000
--- a/app/blogs/Content/timeRequired/content.jsx
+++ /dev/null
@@ -1,243 +0,0 @@
-"use client";
-import { FiCopy, FiBookmark, FiShare2 } from "react-icons/fi";
-import { useState } from "react";
-
-const BlogContent = () => {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(window.location.href);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  const Paragraphs = [
-    `If you're a student, developer, or career switcher, you've likely asked: "How long will it take to learn Data Structures and Algorithms (DSA)?" The answer isn't one-size-fits-all — it depends on your goals, consistency, and background.`,
-    `Before estimating time, let's define what “mastering” DSA really means. Mastery isn't just knowing syntax or solving rote problems. It means pattern recognition, approaching unseen questions with confidence, and making trade-offs in real-world system design.`,
-    `For most learners, 3 months gets you foundational knowledge, 6–9 months develops confidence for interviews, and 12+ months results in true mastery. DSA is a long-term game.`,
-    `Here's a simple 12-week roadmap:\n\n- Weeks 1–2: Arrays, Strings, HashMaps\n- Weeks 3–4: Stacks, Queues, Recursion\n- Weeks 5–6: Linked Lists, Trees\n- Weeks 7–8: Heaps, Binary Trees, BSTs\n- Weeks 9–10: Graphs, DFS/BFS\n- Weeks 11–12: DP, Tries, Bit Manipulation`,
-    `Avoid common traps: passively watching tutorials, skipping fundamentals, not reviewing problems. Instead, learn → code → revise. Tools like LeetCode, NeetCode, and your own notes/GitHub repo will accelerate learning.`
-  ];
-
-  const tasks = [
-    { points: "Creating responsive UIs with HTML/CSS/JavaScript" },
-    { points: "Working with frameworks like React, Next.js, or Vue" },
-    { points: "Integrating RESTful APIs and GraphQL endpoints" },
-    { points: "Implementing state management solutions" },
-    { points: "Optimizing performance and accessibility" },
-  ];
-
-  const scenarios = [
-    { points: "Performance optimization" },
-    { points: "Complex state management" },
-    { points: "Efficient data processing" },
-    { points: "Interview preparation" },
-    { points: "Library/framework development" },
-    { points: "System design decisions" },
-  ];
-
-  const examples = [
-    {
-      title: "Autocomplete Search",
-      description: "Trie data structure improves search efficiency",
-    },
-    {
-      title: "Infinite Scroll",
-      description: "Efficient pagination requires proper array handling",
-    },
-    {
-      title: "Form Validation",
-      description: "Graphs can model complex validation rules",
-    },
-    {
-      title: "State Management",
-      description: "Understanding trees helps with state updates",
-    },
-  ];
-
-  const protip = [
-    { points: "Implement your own simplified version of React's reconciliation algorithm" },
-    { points: "Build a custom hook that efficiently manages large datasets" },
-    { points: "Create a visualization of how different sorting algorithms work" },
-  ];
-
-  return (
-    <article className="max-w-4xl mx-auto px-4 pt-14 py-10">
-      {/* Article Header */}
-      <header className="mb-12 pt-14">
-        <div className="flex items-center justify-between mb-4">
-          <span className="px-3 py-1 rounded-full text-sm font-medium bg-black text-white dark:bg-zinc-700 dark:text-zinc-200">
-            Web Development
-          </span>
-          <div className="flex space-x-3 text-gray-500 dark:text-zinc-400">
-            <button
-              onClick={handleCopy}
-              className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
-              aria-label="Copy link"
-            >
-              {copied ? <span className="text-xs">Copied!</span> : <FiCopy />}
-            </button>
-            <button
-              className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
-              aria-label="Bookmark"
-            >
-              <FiBookmark />
-            </button>
-            <button
-              className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
-              aria-label="Share"
-            >
-              <FiShare2 />
-            </button>
-          </div>
-        </div>
-
-        <h1 className="text-3xl md:text-4xl font-bold text-black dark:text-zinc-100 mb-4 leading-tight">
-          Is Data Structures and Algorithms Important for Web Developers?
-        </h1>
-
-        <div className="flex items-center text-gray-500 dark:text-zinc-400 text-sm">
-          <span>Published on June 20, 2025</span>
-          <span className="mx-2">•</span>
-          <span>10 min read</span>
-        </div>
-      </header>
-
-      {/* Featured Image */}
-      <div className="relative w-full h-64 md:h-96 bg-gray-100 dark:bg-zinc-800 rounded-xl mb-12 overflow-hidden">
-        <img
-          src="/blog/timeRequired.png"
-          alt="Web developer working with algorithms"
-          className="w-full h-full object-cover"
-        />
-        <div className="absolute inset-0 bg-gradient-to-r from-black to-transparent opacity-30 dark:opacity-50"></div>
-        <div className="absolute bottom-6 left-6 text-white dark:text-zinc-100">
-          <p className="text-sm">
-            Understanding DSA helps build better web applications
-          </p>
-        </div>
-      </div>
-
-      {/* Article Content */}
-      <div className="prose prose-lg dark:prose-invert max-w-none">
-        <p className="text-lg text-gray-700 dark:text-zinc-300 leading-relaxed mb-8">
-          {Paragraphs[0]}
-        </p>
-
-        <section className="mb-12">
-          <h2 className="text-2xl font-bold text-black dark:text-zinc-100 mb-6 pb-2 border-b border-gray-200 dark:border-zinc-700">
-            What Web Developers Actually Do
-          </h2>
-          <p className="mb-4 dark:text-zinc-300">
-            Typical web development tasks include:
-          </p>
-          <ul className="list-disc pl-6 mb-4 space-y-2 dark:text-zinc-300">
-            {tasks.map((item, index) => (
-              <li key={index}>{item.points}</li>
-            ))}
-          </ul>
-          <p className="dark:text-zinc-300">{Paragraphs[1]}</p>
-        </section>
-
-        <section className="mb-12">
-          <h2 className="text-2xl font-bold text-black dark:text-zinc-100 mb-6 pb-2 border-b border-gray-200 dark:border-zinc-700">
-            Where DSA Knowledge Shines in Web Development
-          </h2>
-          <div className="bg-gray-50 dark:bg-zinc-800 p-6 rounded-lg mb-4">
-            <p className="mb-2 font-medium dark:text-zinc-200">
-              Key scenarios where DSA matters:
-            </p>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              {scenarios.map((item, index) => (
-                <span
-                  key={index}
-                  className="px-3 py-1 bg-white dark:bg-zinc-700 rounded-full text-sm shadow-sm dark:text-zinc-200"
-                >
-                  {item.points}
-                </span>
-              ))}
-            </div>
-          </div>
-          <p className="dark:text-zinc-300">{Paragraphs[2]}</p>
-        </section>
-
-        <section className="mb-12">
-          <h2 className="text-2xl font-bold text-black dark:text-zinc-100 mb-6 pb-2 border-b border-gray-200 dark:border-zinc-700">
-            Real-World Examples
-          </h2>
-          <div className="grid md:grid-cols-2 gap-6 mb-4">
-            {examples.map((item, index) => (
-              <div
-                key={index}
-                className="border dark:border-zinc-700 p-4 rounded-lg hover:shadow-md dark:hover:shadow-zinc-700/30 transition-shadow"
-              >
-                <h3 className="font-bold mb-1 dark:text-zinc-100">
-                  {item.title}
-                </h3>
-                <p className="text-sm text-gray-600 dark:text-zinc-400">
-                  {item.description}
-                </p>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        <section className="bg-black dark:bg-zinc-800 text-white dark:text-white p-8 rounded-xl mb-12">
-          <h3 className="text-xl font-bold mb-4">
-            Pro Tip: Practical Learning
-          </h3>
-          <p className="mb-2">{Paragraphs[3]}</p>
-          <ul className="list-disc pl-6 space-y-1">
-            {protip.map((item, index) => (
-              <li key={index}>{item.points}</li>
-            ))}
-          </ul>
-        </section>
-
-        <section>
-          <h2 className="text-2xl font-bold text-black dark:text-zinc-100 mb-4">
-            The Verdict
-          </h2>
-          <p className="text-lg dark:text-zinc-300">{Paragraphs[4]}</p>
-        </section>
-      </div>
-
-      {/* Article Footer */}
-      <footer className="mt-16 pt-8 border-t border-gray-200 dark:border-zinc-700">
-        <div className="flex flex-wrap justify-between items-center">
-          <div className="mb-4 md:mb-0">
-            <h3 className="font-bold text-black dark:text-zinc-100 mb-2">
-              Share this article
-            </h3>
-            <div className="flex space-x-3">
-              {[
-                {
-                  name: "Twitter",
-                  url: "https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.dsavisualizer.in%2Fblogs%2FContent%2FdsaWebDev&text=Just%20read%20this%20insighful%20blog%3A%20Is%20Data%20Structures%20and%20Algorithms%20Important%20for%20Web%20Developers%3F%20%23WebDev%20%23DSA%20%23Programming"
-                },
-                {
-                  name: "LinkedIn",
-                  url: "https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.dsavisualizer.in%2Fblogs%2FContent%2FdsaWebDev"
-                },
-                {
-                  name: "Facebook",
-                  url: "https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.dsavisualizer.in%2Fblogs%2FContent%2FdsaWebDev"
-                }
-              ].map((social) => (
-                <button
-                  key={social.name}
-                  onClick={() => window.open(social.url, '_blank')}
-                  className="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors dark:border-zinc-600 dark:text-zinc-300"
-                >
-                  {social.name}
-                </button>
-              ))}
-            </div>
-          </div>
-        </div>
-      </footer>
-    </article>
-  );
-};
-
-export default BlogContent;
\ No newline at end of file
diff --git a/app/blogs/Content/timeRequired/page.jsx b/app/blogs/Content/timeRequired/page.jsx
deleted file mode 100755
index 73e0d99c9..000000000
--- a/app/blogs/Content/timeRequired/page.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import Navbar from "@/app/components/navbar";
-import Footer from "@/app/components/footer";
-import Content from "@/app/blogs/Content/timeRequired/content";
-
-export const metadata = {
-    title: "Time Required to Learn and Master DSA",
-    description:
-        "Uncover how much time it takes to learn and master Data Structures and Algorithms (DSA) for web development. Get practical timelines, tips, and strategies for efficient DSA learning.",
-    keywords: [
-        "Time to Learn DSA",
-        "DSA Mastery Timeline",
-        "Data Structures",
-        "Algorithms",
-        "Learning Path",
-        "Web Development",
-        "Frontend",
-        "Backend",
-        "DSA Study Plan",
-        "Coding Interview Preparation",
-    ],
-    authors: [{ name: "Sohan Rout", url: "https://www.linkedin.com/in/sohan-rout" }],
-    openGraph: {
-        title: "Time Required to Learn and Master DSA",
-        description:
-            "Find out how long it takes to learn and master DSA for web development. Explore realistic timelines, learning strategies, and tips for success.",
-        url: "./blog/timeRequired.png",
-        siteName: "DSA Visualizer",
-        locale: "en_IN",
-        type: "article",
-        images: [
-            {
-                url: "./blog/timeRequired.png", // Replace with actual OG image
-                width: 1200,
-                height: 630,
-                alt: "Time Required to Learn DSA",
-            },
-        ],
-    },
-    twitter: {
-        card: "summary_large_image",
-        title: "Time Required to Learn and Master DSA",
-        description:
-            "How much time does it take to learn DSA? Get timelines, strategies, and tips for mastering Data Structures and Algorithms.",
-        images: ["./blog/timeRequired.png"],
-    },
-    category: "Technology",
-    publishedTime: "2024-05-15T08:00:00Z",
-    robots: "index, follow",
-};
-
-const page = () => {
-  return(
-    <main className="bg-white dark:bg-zinc-950">
-      <Navbar/>
-      <Content/>
-      <Footer/>
-    </main>
-  );
-}
-
-export default page;
\ No newline at end of file
diff --git a/app/blogs/Content/whatIsDS/content.jsx b/app/blogs/Content/whatIsDS/content.jsx
deleted file mode 100755
index 12551cbca..000000000
--- a/app/blogs/Content/whatIsDS/content.jsx
+++ /dev/null
@@ -1,243 +0,0 @@
-"use client";
-import { FiCopy, FiBookmark, FiShare2 } from "react-icons/fi";
-import { useState } from "react";
-
-const BlogContent = () => {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(window.location.href);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  const Paragraphs = [
-    `If you're new to coding, you've probably come across terms like array, stack, or linked list and thought, "What does that even mean?" Don't worry — you're not alone. These are all types of data structures, and they form the foundation of how programs organize and process information.`,
-    `In this guide, we'll break down what data structures are, why they matter, and introduce you to the most common types — all in simple language with relatable examples.`,
-    `A data structure is a way to organize and store data in a computer so it can be used efficiently.`,
-    `Think of it like organizing your wardrobe: shirts go in one drawer, pants in another, socks in a box. Each drawer (or structure) is designed to hold and access a specific type of item. Similarly, in programming, different data structures are used depending on the type of data and what you want to do with it.`,
-    `Here's why every programmer needs to understand data structures:`,
-    `Data structures are the toolbox every programmer must carry. Mastering them helps you build efficient, scalable, and real-world applications. Start small — practice with basic structures, and slowly move up to complex ones. If you're consistent, what once felt like intimidating jargon will become second nature.`,
-  ];
-
-  const importancePoints = [
-    { points: "Efficiency: The right structure makes programs faster and less memory-hungry" },
-    { points: "Scalability: Handles larger data more smoothly" },
-    { points: "Problem Solving: Many coding problems are based on data structures" },
-    { points: "Real-World Use: From social media feeds to navigation systems — they're everywhere" },
-  ];
-
-  const dataStructures = [
-    {
-      title: "Array",
-      description: "Like a row of boxes where each box holds a value",
-      image: "/blog/DSimage/array.png",
-      useCases: "Great for storing ordered items"
-    },
-    {
-      title: "Stack (LIFO)",
-      description: "Imagine a stack of plates - you add and remove from the top only",
-      image: "/blog/DSimage/stack.png",
-      useCases: "Use when you need to reverse things or track history"
-    },
-    {
-      title: "Queue (FIFO)",
-      description: "Think of people standing in line - first person gets served first",
-      image: "/blog/DSimage/queue.png",
-      useCases: "Perfect for scheduling tasks or managing queues"
-    },
-    {
-      title: "Linked List",
-      description: "A chain of nodes where each holds a value and a link to the next",
-      image: "/blog/DSimage/linkedList.png",
-      useCases: "Flexible in size with easier insertions/removals"
-    },
-    {
-      title: "Tree",
-      description: "Starts with a root and branches out in non-linear fashion",
-      image: "/blog/DSimage/tree.png",
-      useCases: "Used in file systems, decision trees, and databases"
-    },
-    {
-      title: "Graph",
-      description: "Networks of nodes and edges like social connections",
-      image: "/blog/DSimage/graph.png",
-      useCases: "Used in social networks, maps, and recommendation systems"
-    },
-  ];
-
-  const realLifeExample = [
-    {points: "Building a contact list app with arrays to store names"},
-    {points: "Using hash tables to search names quickly"},
-    {points: "Implementing sorting algorithms to organize contacts"},
-  ];
-
-  return (
-    <article className="max-w-4xl mx-auto px-4 pt-14 py-10">
-      {/* Article Header */}
-      <header className="mb-12 pt-14">
-        <div className="flex items-center justify-between mb-4">
-          <span className="px-3 py-1 rounded-full text-sm font-medium bg-black text-white dark:bg-zinc-700 dark:text-zinc-200">
-            Programming Basics
-          </span>
-          <div className="flex space-x-3 text-gray-500 dark:text-zinc-400">
-            <button
-              onClick={handleCopy}
-              className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
-              aria-label="Copy link"
-            >
-              {copied ? <span className="text-xs">Copied!</span> : <FiCopy />}
-            </button>
-            <button
-              className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
-              aria-label="Bookmark"
-            >
-              <FiBookmark />
-            </button>
-            <button
-              className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
-              aria-label="Share"
-            >
-              <FiShare2 />
-            </button>
-          </div>
-        </div>
-
-        <h1 className="text-3xl md:text-4xl font-bold text-black dark:text-zinc-100 mb-4 leading-tight">
-          Data Structures Explained: A Beginner's Guide
-        </h1>
-
-        <div className="flex items-center text-gray-500 dark:text-zinc-400 text-sm">
-          <span>Published on June 10, 2024</span>
-          <span className="mx-2">•</span>
-          <span>6 min read</span>
-        </div>
-      </header>
-
-      {/* Featured Image */}
-      <div className="relative w-full h-64 md:h-96 bg-gray-100 dark:bg-zinc-800 rounded-xl mb-12 overflow-hidden">
-        <img
-          src="/blog/whatIsDs.png"
-          alt="Visual representation of different data structures"
-          className="w-full h-full object-cover"
-        />
-        <div className="absolute inset-0 bg-gradient-to-r from-black to-transparent opacity-30 dark:opacity-50"></div>
-        <div className="absolute bottom-6 left-6 text-white dark:text-zinc-100">
-          <p className="text-sm">
-            Understanding data structures is fundamental to programming
-          </p>
-        </div>
-      </div>
-
-      {/* Article Content */}
-      <div className="prose prose-lg dark:prose-invert max-w-none">
-        <p className="text-lg text-gray-700 dark:text-zinc-300 leading-relaxed mb-8">
-          {Paragraphs[0]}
-        </p>
-        <p className="text-lg text-gray-700 dark:text-zinc-300 leading-relaxed mb-8">
-          {Paragraphs[1]}
-        </p>
-
-        <section className="mb-12">
-          <h2 className="text-2xl font-bold text-black dark:text-zinc-100 mb-6 pb-2 border-b border-gray-200 dark:border-zinc-700">
-            What Is a Data Structure?
-          </h2>
-          <p className="mb-4 dark:text-zinc-300">
-            {Paragraphs[2]}
-          </p>
-          <p className="dark:text-zinc-300">{Paragraphs[3]}</p>
-        </section>
-
-        <section className="mb-12">
-          <h2 className="text-2xl font-bold text-black dark:text-zinc-100 mb-6 pb-2 border-b border-gray-200 dark:border-zinc-700">
-            Why Are Data Structures Important?
-          </h2>
-          <div className="bg-gray-50 dark:bg-zinc-800 p-6 rounded-lg mb-4">
-            <ul className="list-disc pl-6 space-y-2 dark:text-zinc-300">
-              {importancePoints.map((item, index) => (
-                <li key={index}>{item.points}</li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        <section className="mb-12">
-  <h2 className="text-2xl font-bold text-black dark:text-zinc-100 mb-6 pb-2 border-b border-gray-200 dark:border-zinc-700">
-    Types of Data Structures
-  </h2>
-  <div className="space-y-8">
-    {dataStructures.map((item, index) => (
-      <div
-        key={index}
-        className="border dark:border-zinc-700 p-6 rounded-lg hover:shadow-md dark:hover:shadow-zinc-700/30 transition-shadow"
-      >
-        <div className="flex flex-col md:flex-row gap-6">
-          <div className="md:w-1/3 h-48 bg-gray-100 dark:bg-zinc-700 rounded-lg overflow-hidden flex-shrink-0">
-            <img 
-              src={item.image} 
-              alt={item.title} 
-              className="w-full h-full object-contain"
-            />
-          </div>
-          <div className="flex-1">
-            <h3 className="font-bold text-xl mb-2 dark:text-zinc-100">
-              {item.title}
-            </h3>
-            <p className="mb-4 text-gray-600 dark:text-zinc-400">
-              {item.description}
-            </p>
-            <p className="text-sm text-gray-500 dark:text-zinc-500">
-              <span className="font-semibold">Use cases:</span> {item.useCases}
-            </p>
-          </div>
-        </div>
-      </div>
-    ))}
-  </div>
-</section>
-
-        <section className="bg-black dark:bg-zinc-800 text-white dark:text-white p-8 rounded-xl mb-12">
-          <h3 className="text-xl font-bold mb-4">
-            Real-Life Example: Why It Matters
-          </h3>
-          <p className="mb-2">Imagine building a contact list app:</p>
-          <ul className="list-disc pl-6 space-y-1">
-            {realLifeExample.map((item, index) => (
-                <li key={index}>{item.points}</li>
-            ))}
-          </ul>
-        </section>
-
-        <section>
-          <h2 className="text-2xl font-bold text-black dark:text-zinc-100 mb-4">
-            Final Thoughts
-          </h2>
-          <p className="text-lg dark:text-zinc-300">{Paragraphs[5]}</p>
-        </section>
-      </div>
-
-      {/* Article Footer */}
-      <footer className="mt-16 pt-8 border-t border-gray-200 dark:border-zinc-700">
-        <div className="flex flex-wrap justify-between items-center">
-          <div className="mb-4 md:mb-0">
-            <h3 className="font-bold text-black dark:text-zinc-100 mb-2">
-              Share this article
-            </h3>
-            <div className="flex space-x-3">
-              {["Twitter", "LinkedIn", "Facebook"].map((social) => (
-                <button
-                  key={social}
-                  className="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors dark:border-zinc-600 dark:text-zinc-300"
-                >
-                  {social}
-                </button>
-              ))}
-            </div>
-          </div>
-        </div>
-      </footer>
-    </article>
-  );
-};
-
-export default BlogContent;
\ No newline at end of file
diff --git a/app/blogs/Content/whatIsDS/page.jsx b/app/blogs/Content/whatIsDS/page.jsx
deleted file mode 100755
index b25ef368d..000000000
--- a/app/blogs/Content/whatIsDS/page.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import Navbar from "@/app/components/navbar";
-import Footer from "@/app/components/footer";
-import Content from "@/app/blogs/Content/whatIsDS/content";
-
-export const metadata = {
-  title: "What Are Data Structures? A Beginner-Friendly Guide",
-  description:
-    "Confused by arrays, stacks, or linked lists? This beginner-friendly guide breaks down what data structures are, their types, and why they matter for every aspiring programmer.",
-  keywords: [
-    "Data Structures",
-    "Beginner Programming",
-    "DSA",
-    "Arrays",
-    "Stacks",
-    "Linked Lists",
-    "Programming Basics",
-    "Computer Science",
-    "Coding for Beginners",
-    "Programming Concepts"
-  ],
-  authors: [{ name: "Sohan Rout", url: "https://www.linkedin.com/in/sohan-rout" }],
-  openGraph: {
-    title: "What Are Data Structures? A Beginner-Friendly Guide",
-    description:
-      "Understand the fundamentals of data structures in simple terms. A must-read guide for anyone new to programming and computer science.",
-    url: "./blog/whatIsDS.png",
-    siteName: "DSA Visualizer",
-    locale: "en_IN",
-    type: "article",
-    images: [
-      {
-        url: "./blog/whatIsDS.png", // Replace with actual OG image
-        width: 1200,
-        height: 630,
-        alt: "Beginner’s Guide to Data Structures",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "What Are Data Structures? A Beginner-Friendly Guide",
-    description:
-      "Kickstart your programming journey by learning what data structures are and how they work. Explained in a simple, visual way.",
-    images: ["./blog/whatIsDS.png"],
-  },
-  category: "Data Structures & Algorithms",
-  publishedTime: "2025-05-23T08:00:00Z",
-  robots: "index, follow",
-};
-
-const page = () => {
-  return(
-    <main className="bg-white dark:bg-zinc-950">
-      <Navbar/>
-      <Content/>
-      <Footer/>
-    </main>
-  );
-}
-
-export default page;
\ No newline at end of file
diff --git a/app/blogs/blogPage.jsx b/app/blogs/blogPage.jsx
deleted file mode 100755
index 309588303..000000000
--- a/app/blogs/blogPage.jsx
+++ /dev/null
@@ -1,330 +0,0 @@
-"use client";
-import { useState, useEffect, useRef } from "react";
-import Link from "next/link";
-import {
-  FiClock,
-  FiCalendar,
-  FiArrowRight,
-} from "react-icons/fi";
-import { motion, AnimatePresence } from "framer-motion";
-import PopularTopics from "@/app/blogs/components/PopularTopics";
-import blogData from "@/app/blogs/data/blogs.json";
-
-const BlogPage = () => {
-  // State management
-  const [searchQuery, setSearchQuery] = useState("");
-  const [activeCategory, setActiveCategory] = useState("All");
-  const [isSearchFocused, setIsSearchFocused] = useState(false);
-  const searchRef = useRef(null);
-
-  // Filtered blogs
-  const filteredBlogs = blogData.filter((blog) => {
-    const matchesSearch =
-      searchQuery === "" ||
-      blog.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      blog.tags.some((tag) =>
-        tag.toLowerCase().includes(searchQuery.toLowerCase())
-      );
-
-    const matchesCategory =
-      activeCategory === "All" || blog.category === activeCategory;
-
-    return matchesSearch && matchesCategory;
-  });
-
-  // Categories
-  const categories = ["All", ...new Set(blogData.map((blog) => blog.category))];
-
-  // Featured posts (latest 5 by date)
-  const featuredPosts = [...blogData]
-    .sort((a, b) => new Date(b.date) - new Date(a.date))
-    .slice(0, 4);
-
-  // Popular tags
-  const popularTags = [
-    "React",
-    "JavaScript",
-    "CSS",
-    "TypeScript",
-    "Web Dev",
-    "Performance",
-    "DSA",
-  ];
-
-  // Handle click outside search
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (searchRef.current && !searchRef.current.contains(event.target)) {
-        setIsSearchFocused(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-zinc-50 to-zinc-100 dark:from-zinc-900 dark:to-zinc-950">
-      <main className="container mx-auto max-w-6xl px-6 pt-32 pb-20">
-        {/* Hero Section */}
-        <section className="mb-20 text-center">
-          <motion.h1
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5 }}
-            className="text-5xl mt-10 md:text-5xl font-bold text-zinc-800 dark:text-white mb-6 leading-tight"
-          >
-            Insights for{" "}
-            <span className="bg-gradient-to-r from-blue-600 to-blue-400 bg-clip-text text-transparent">
-              Modern Developers
-            </span>
-          </motion.h1>
-          <motion.p
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5, delay: 0.1 }}
-            className="text-xl text-zinc-600 dark:text-zinc-300 max-w-3xl mx-auto mb-10"
-          >
-            Cutting-edge tutorials, guides, and deep dives on web development,
-            programming, and more.
-          </motion.p>
-
-          {/* Email Subscribe Section */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5, delay: 0.2 }}
-            className="max-w-2xl mx-auto"
-          >
-            <div className="flex flex-col sm:flex-row rounded-full bg-none items-center gap-1">
-              <input
-                type="email"
-                placeholder="Enter your email to subscribe..."
-                className="flex-1 w-full px-4 py-3 rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-              <button
-                className="px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-400 text-white rounded-lg text-md font-medium hover:opacity-90 transition"
-              >
-                Subscribe
-              </button>
-            </div>
-            <p className="text-sm text-zinc-500 dark:text-zinc-400 text-center mt-2">
-              By clicking "Subscribe", you agree to receive updates when new blogs are published.
-            </p>
-          </motion.div>
-        </section>
-
-        {/* Featured Posts */}
-        <section className="mb-20">
-          <div className="flex items-center justify-between mb-2">
-            <h2 className="text-3xl font-medium text-zinc-800 dark:text-white">
-              Featured Articles
-            </h2>
-          </div>
-          <div className="h-[2px] max-w-6xl rounded-full bg-gradient-to-l from-zinc-600 via-black to-zinc-600 mb-4"></div>
-
-          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
-            {/* Left column: recent upload (big card) - vertical layout */}
-            <motion.div
-              key={featuredPosts[0].id}
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5 }}
-              whileHover={{ y: -5 }}
-              className="col-span-12 lg:col-span-6 h-full bg-white dark:bg-zinc-800 rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 border border-zinc-100 dark:border-zinc-700/50"
-            >
-              <Link href={featuredPosts[0].slug}>
-                <div className="relative h-64 w-full overflow-hidden">
-                  <img
-                    src={featuredPosts[0].image}
-                    alt={featuredPosts[0].title}
-                    className="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
-                  />
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
-                  <span className="absolute top-4 right-4 bg-blue-600 text-white text-xs font-medium px-2.5 py-1 rounded-full">
-                    {featuredPosts[0].category}
-                  </span>
-                </div>
-                <div className="p-6">
-                  <div className="flex items-center text-sm text-zinc-500 dark:text-zinc-400 mb-3">
-                    <FiCalendar className="mr-1.5" />
-                    <span className="mr-3">{featuredPosts[0].date}</span>
-                    <FiClock className="mr-1.5" />
-                    <span>{featuredPosts[0].readTime}</span>
-                  </div>
-                  <h3 className="text-2xl font-bold text-zinc-800 dark:text-white mb-3">
-                    {featuredPosts[0].title}
-                  </h3>
-                  <p className="text-zinc-600 dark:text-zinc-300 mb-4 line-clamp-3">
-                    {featuredPosts[0].excerpt}
-                  </p>
-                  <div className="flex flex-wrap gap-2">
-                    {featuredPosts[0].tags.map((tag, i) => (
-                      <span
-                        key={i}
-                        className="text-xs px-2.5 py-1 bg-zinc-100 dark:bg-zinc-700 rounded-full text-zinc-700 dark:text-zinc-300"
-                      >
-                        #{tag}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              </Link>
-            </motion.div>
-
-            {/* Right column: next 4 featured cards in vertical list-style layout */}
-            <div className="col-span-12 lg:col-span-6 h-full flex flex-col gap-6">
-              {featuredPosts.slice(1, 5).map((post, index) => (
-                <motion.div
-                  key={post.id}
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.5, delay: index * 0.1 }}
-                  whileHover={{ y: -5 }}
-                  className="flex gap-4 items-start bg-white dark:bg-zinc-800 rounded-xl p-4 shadow hover:shadow-md transition-shadow border border-zinc-100 dark:border-zinc-700/50"
-                >
-                  <div className="w-32 h-24 overflow-hidden rounded-md">
-                    <img
-                      src={post.image}
-                      alt={post.title}
-                      className="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
-                    />
-                  </div>
-                  <div className="flex-1">
-                    <div className="flex items-center text-sm text-zinc-500 dark:text-zinc-400 mb-1">
-                      <FiCalendar className="mr-1.5" />
-                      <span className="mr-3">{post.date}</span>
-                      <FiClock className="mr-1.5" />
-                      <span>{post.readTime}</span>
-                    </div>
-                    <h3 className="text-lg font-semibold text-zinc-800 dark:text-white mb-1">
-                      <Link href={post.slug}>{post.title}</Link>
-                    </h3>
-                    <p className="text-sm text-zinc-600 dark:text-zinc-300 line-clamp-2">
-                      {post.excerpt}
-                    </p>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-          </div>
-        </section>
-
-        {/* Popular Tags */}
-        <PopularTopics
-          tags={popularTags}
-          onTagClick={(tag) => {
-            setSearchQuery(tag);
-            setActiveCategory("All");
-          }}
-        />
-
-        {/* Category Filter */}
-        <section className="mb-12">
-          <div className="flex flex-wrap gap-3 justify-center">
-            {categories.map((category) => (
-              <button
-                key={category}
-                onClick={() => setActiveCategory(category)}
-                className={`px-5 py-2.5 rounded-full text-sm font-medium transition-all duration-300 ${
-                  activeCategory === category
-                    ? "bg-gradient-to-r from-blue-600 to-blue-400 text-white shadow-lg"
-                    : "bg-white dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 border border-zinc-200 dark:border-zinc-700"
-                }`}
-              >
-                {category}{" "}
-                {category !== "All" &&
-                  `(${blogData.filter((b) => b.category === category).length})`}
-              </button>
-            ))}
-          </div>
-        </section>
-
-        {/* Articles List */}
-        <section>
-          <h2 className="text-2xl font-medium text-zinc-800 dark:text-white mb-8">
-            {activeCategory === "All" ? "All Blog Posts" : activeCategory}
-            <span className="text-zinc-500 dark:text-zinc-400 text-base font-normal ml-2">
-              ({filteredBlogs.length} articles)
-            </span>
-          </h2>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {filteredBlogs.length > 0 ? (
-              filteredBlogs.map((post) => (
-                <motion.article
-                  key={post.id}
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.3 }}
-                  whileHover={{ y: -3 }}
-                  className="bg-white dark:bg-zinc-800 rounded-2xl overflow-hidden shadow hover:shadow-md transition-shadow border border-zinc-100 dark:border-zinc-700/50"
-                >
-                  <Link href={post.slug}>
-                    <div className="flex flex-col h-full">
-                      <div className="aspect-video overflow-hidden relative">
-                        <img
-                          src={post.image}
-                          alt={post.title}
-                          className="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
-                        />
-                      </div>
-                      <div className="p-5 flex flex-col gap-3 flex-grow">
-                        <div className="flex items-center justify-between text-sm text-zinc-500 dark:text-zinc-400">
-                          <div className="flex items-center">
-                            <FiCalendar className="mr-1.5" />
-                            <span>{post.date}</span>
-                          </div>
-                          <div className="text-blue-600 dark:text-blue-400 flex items-center font-medium">
-                            Read article <FiArrowRight className="ml-1" />
-                          </div>
-                        </div>
-                        <span className="inline-block text-xs font-medium px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full w-fit">
-                          {post.category}
-                        </span>
-                        <h3 className="text-lg font-bold text-zinc-800 dark:text-white">
-                          {post.title}
-                        </h3>
-                        <div className="flex flex-wrap gap-2 mt-auto">
-                          {post.tags.map((tag, i) => (
-                            <span
-                              key={i}
-                              className="text-xs px-2.5 py-1 bg-zinc-100 dark:bg-zinc-700 rounded-full text-zinc-700 dark:text-zinc-300"
-                            >
-                              #{tag}
-                            </span>
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-                  </Link>
-                </motion.article>
-              ))
-            ) : (
-              <div className="text-center py-16">
-                <div className="text-5xl mb-4">🔍</div>
-                <h3 className="text-xl font-medium text-zinc-700 dark:text-zinc-300 mb-2">
-                  No articles found
-                </h3>
-                <p className="text-zinc-500 dark:text-zinc-400 mb-6 max-w-md mx-auto">
-                  We couldn't find any articles matching your search. Try a
-                  different term or browse our categories.
-                </p>
-                <button
-                  onClick={() => {
-                    setSearchQuery("");
-                    setActiveCategory("All");
-                  }}
-                  className="px-5 py-2.5 bg-gradient-to-r from-blue-600 to-blue-400 text-white rounded-full text-sm font-medium hover:opacity-90 transition-opacity"
-                >
-                  Reset filters
-                </button>
-              </div>
-            )}
-          </div>
-        </section>
-      </main>
-    </div>
-  );
-};
-
-export default BlogPage;
\ No newline at end of file
diff --git a/app/blogs/components/PopularTopics.jsx b/app/blogs/components/PopularTopics.jsx
deleted file mode 100755
index 8061e4efc..000000000
--- a/app/blogs/components/PopularTopics.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-'use client';
-import { motion } from 'framer-motion';
-import { useState } from 'react';
-
-const PopularTopics = ({ tags, onTagClick }) => {
-  const [showFilters, setShowFilters] = useState(false);
-  return (
-    <section className="mt-20 mb-5">
-      <h2 className="text-3xl font-medium text-zinc-800 dark:text-white mb-2">
-        Explore Popular Topics
-      </h2>
-      <div className='h-[2px] max-w-6xl rounded-full bg-gradient-to-l from-zinc-600 via-black to-zinc-600 mb-6'></div>
-      <div className="mb-6 flex flex-col md:flex-row items-center justify-center gap-4 max-w-4xl mx-auto">
-        <div className="relative w-full md:w-2/3">
-          <span className="absolute inset-y-0 left-3 flex items-center pointer-events-none text-zinc-500 dark:text-zinc-400">
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-4.35-4.35m0 0A7.5 7.5 0 1110.5 3a7.5 7.5 0 016.15 13.65z" />
-            </svg>
-          </span>
-          <input
-            type="text"
-            placeholder="Search articles..."
-            onChange={(e) => onTagClick(e.target.value)}
-            className="w-full pl-10 pr-4 py-2 rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-          />
-        </div>
-
-        <button
-          onClick={() => setShowFilters(!showFilters)}
-          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-500 transition w-full md:w-auto"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L16 12.414V19a1 1 0 01-.553.894l-4 2A1 1 0 0110 21v-8.586L3.293 6.707A1 1 0 013 6V4z" />
-          </svg>
-          Filters
-        </button>
-      </div>
-
-      {showFilters && (
-        <div className="flex flex-wrap items-center gap-3 justify-center mb-4">
-          {tags.map((tag) => (
-            <motion.button
-              key={tag}
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-              onClick={() => onTagClick(tag)}
-              className="px-5 py-2 bg-white dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 rounded-full text-sm font-medium hover:bg-zinc-100 dark:hover:bg-zinc-700 border border-zinc-200 dark:border-zinc-700 shadow-sm hover:shadow-md transition-all"
-            >
-              #{tag}
-            </motion.button>
-          ))}
-        </div>
-      )}
-    </section>
-  );
-};
-
-export default PopularTopics;
\ No newline at end of file
diff --git a/app/blogs/data/blogs.json b/app/blogs/data/blogs.json
deleted file mode 100755
index f0c1bfc73..000000000
--- a/app/blogs/data/blogs.json
+++ /dev/null
@@ -1,46 +0,0 @@
-[
-    {
-      "id": 1,
-      "title": "Is Data Structures and Algorithms Important for Web Developers?",
-      "excerpt": "Explore why understanding data structures and algorithms can help web developers write efficient, scalable, and maintainable code.",
-      "date": "May 17, 2025",
-      "readTime": "8 min read",
-      "slug": "/blogs/Content/dsaWebDev",
-      "category": "Web Development",
-      "tags": ["DSA", "Web Development", "Algorithms"],
-      "image": "/blog/dsaWebDev.png"
-    },
-    {
-      "id": 2,
-      "title": "Are Data Structures and Algorithms Different for Different Languages?",
-      "excerpt": "Explore the differences in data structures and algorithms across various programming languages and how it impacts implementation.",
-      "date": "May 19, 2025",
-      "readTime": "5 min read",
-      "slug": "/blogs/Content/dsaDifferent",
-      "category": "Programming Languages",
-      "tags": ["DSA", "Programming Languages", "Algorithms"],
-      "image": "/blog/dsaDifferent.png"
-    },
-    {
-      "id": 3,
-      "title": "What Are Data Structures? A Beginner-Friendly Guide",
-      "excerpt": "Confused by terms like arrays, stacks, or linked lists? This guide breaks down data structures in a simple, relatable way. Understand what they are, why they matter, and how they form the backbone of every efficient program.",
-      "date": "May 23, 2025",
-      "readTime": "10 min read",
-      "slug": "/blogs/Content/whatIsDS",
-      "category": "Computer Science Fundamentals ",
-      "tags": ["Data Structures", "DSA", "Algorithms", "Beginner Programming"],
-      "image": "/blog/whatIsDS.png"
-    },
-    {
-      "id": 4,
-      "title": "Time Required to Learn and Master DSA",
-      "excerpt": "Find out how long it takes to learn and master DSA for web development. Explore realistic timelines, learning strategies, and tips for success.",
-      "date": "Jun 20, 2025",
-      "readTime": "10 min read",
-      "slug": "/blogs/Content/timeRequired",
-      "category": "DSA",
-      "tags": ["Data Structures", "DSA", "Algorithms", "Beginner Programming"],
-      "image": "/blog/timeRequired.png"
-    }
-  ]
\ No newline at end of file
diff --git a/app/blogs/page.jsx b/app/blogs/page.jsx
deleted file mode 100755
index 076565df4..000000000
--- a/app/blogs/page.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import BlogPage from "@/app/blogs/blogPage";
-import Navbar from "@/app/components/navbar";
-import Footer from "@/app/components/footer";
-
-export const metadata = {
-  title: 'DSA Blogs & Guides | Learn Data Structures and Algorithms Effectively',
-  description:
-    'Explore beginner-friendly blogs on Data Structures and Algorithms (DSA) covering Python, Java, C++, Web Development, Machine Learning, and more. Learn, practice, and master DSA through curated insights.',
-  keywords: [
-    'are data structures and algorithms different for different languages',
-    'are data structures and algorithms important',
-    'are data structures and algorithms hard',
-    'are data structures and algorithms important for data science',
-    'are data structures and algorithms important for machine learning',
-    'is data structures and algorithms important for web developers',
-    'is data structures and algorithms same for all languages',
-    'what are data structures and algorithms in python',
-    'what are data structures and algorithms used for',
-    'what are data structures and algorithms in java',
-    'what are data structures and algorithms in c++',
-    'is leetcode data structures and algorithms worth it',
-    'is learning data structures and algorithms worth it',
-    'where can i learn data structures and algorithms for free',
-    'how can i learn data structures and algorithms',
-    'do i need to learn data structures and algorithms for web development',
-    'do i need to learn data structures and algorithms for machine learning',
-    'difference between data structures and algorithms',
-    'when to learn data structures and algorithms',
-    'is it hard to learn data structures and algorithms',
-    'can i learn data structures and algorithms in python',
-    'can i learn data structures and algorithms in java',
-    'DSA blog for beginners',
-    'learn DSA with examples',
-    'best blogs on algorithms and data structures'
-  ],
-  robots: "index, follow",
-};
-
-const page = () => {
-  return (
-    <>
-      <Navbar/>
-      <BlogPage/>
-      <Footer/>
-    </>
-  );
-};
-
-export default page;
\ No newline at end of file
diff --git a/app/components/ConceptsSection.jsx b/app/components/ConceptsSection.jsx
deleted file mode 100644
index 2d469349e..000000000
--- a/app/components/ConceptsSection.jsx
+++ /dev/null
@@ -1,333 +0,0 @@
-"use client";
-import React from "react";
-import Link from "next/link";
-
-const CONCEPTS = [
-  {
-    heading: "Concepts\nthat click",
-    body: "Step-by-step interactive visualizations make even complex algorithms feel intuitive. See exactly what's happening at every step.",
-    cta: { label: "Try Sorting", href: "/visualizer" },
-    visual: <SortingVisual />,
-    bg: "#f0fdf4",
-    darkBg: "#0d1f14",
-  },
-  {
-    heading: "Code that\nmakes sense",
-    body: "Watch the algorithm execute line by line alongside the visualization. Learn how code maps to real behaviour.",
-    cta: { label: "Try Searching", href: "/visualizer" },
-    visual: <SearchVisual />,
-    bg: "#faf5ff",
-    darkBg: "#160d22",
-    flip: true,
-  },
-  {
-    heading: "Structures\nyou can touch",
-    body: "Manipulate data structures directly — push, pop, enqueue, dequeue — and see the state update in real time.",
-    cta: { label: "Try Stack & Queue", href: "/visualizer" },
-    visual: <StackVisual />,
-    bg: "#eff6ff",
-    darkBg: "#0d1627",
-  },
-];
-
-/* ── Visual: Sorting bars ── */
-function SortingVisual() {
-  const bars = [65, 30, 80, 45, 55, 20, 70, 40, 90, 35];
-  const active = [2, 6];
-  return (
-    <div className="w-full max-w-[340px] rounded-2xl border border-[#d1fae5] bg-white dark:bg-[#0f1f16] shadow-xl overflow-hidden">
-      <div className="flex items-center gap-2 px-4 py-3 bg-[#f0fdf4] dark:bg-[#0d1f14] border-b border-[#d1fae5]">
-        <span className="w-3 h-3 rounded-full bg-[#ff5f57]" />
-        <span className="w-3 h-3 rounded-full bg-[#febc2e]" />
-        <span className="w-3 h-3 rounded-full bg-[#28c840]" />
-        <span className="ml-2 text-[12px] font-mono text-[#6b7280]">bubbleSort.js — step 4</span>
-      </div>
-      <div className="p-5">
-        <p className="text-[11px] uppercase tracking-widest text-[#6b7280] mb-4 font-semibold">Comparing indices 2 & 3</p>
-        <div className="flex items-end gap-1.5 h-[80px]">
-          {bars.map((h, i) => (
-            <div key={i} className="flex-1 flex flex-col items-center gap-1">
-              <div
-                className="w-full rounded-t-sm transition-all duration-300"
-                style={{
-                  height: `${(h / 90) * 72}px`,
-                  background: active.includes(i)
-                    ? "#22c55e"
-                    : "#d1fae5",
-                }}
-              />
-            </div>
-          ))}
-        </div>
-        <div className="flex gap-4 mt-3">
-          <span className="flex items-center gap-1.5 text-[11px] text-[#6b7280]">
-            <span className="w-2.5 h-2.5 rounded-sm bg-[#22c55e] inline-block" /> comparing
-          </span>
-          <span className="flex items-center gap-1.5 text-[11px] text-[#6b7280]">
-            <span className="w-2.5 h-2.5 rounded-sm bg-[#d1fae5] inline-block" /> unsorted
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* ── Visual: Binary Search ── */
-function SearchVisual() {
-  const arr = [2, 5, 8, 12, 16, 23, 38, 45, 56, 72];
-  const mid = 4;
-  const eliminated = [0, 1, 2, 3];
-  return (
-    <div className="w-full max-w-[340px] rounded-2xl border border-[#e9d5ff] bg-white dark:bg-[#12091f] shadow-xl overflow-hidden">
-      <div className="flex items-center gap-2 px-4 py-3 bg-[#faf5ff] dark:bg-[#160d22] border-b border-[#e9d5ff]">
-        <span className="w-3 h-3 rounded-full bg-[#ff5f57]" />
-        <span className="w-3 h-3 rounded-full bg-[#febc2e]" />
-        <span className="w-3 h-3 rounded-full bg-[#28c840]" />
-        <span className="ml-2 text-[12px] font-mono text-[#6b7280]">binarySearch.js — step 2</span>
-      </div>
-      <div className="p-5">
-        <p className="text-[11px] uppercase tracking-widest text-[#6b7280] mb-4 font-semibold">Target: 16 &nbsp;·&nbsp; mid = index 4</p>
-        <div className="flex gap-1.5">
-          {arr.map((v, i) => (
-            <div
-              key={i}
-              className="flex-1 flex flex-col items-center gap-1"
-            >
-              <div
-                className="w-full h-9 rounded-md flex items-center justify-center text-[11px] font-bold transition-all"
-                style={{
-                  background: i === mid
-                    ? "#a435f0"
-                    : eliminated.includes(i)
-                    ? "#f3f4f6"
-                    : "#ede9fe",
-                  color: i === mid ? "#fff" : eliminated.includes(i) ? "#d1d5db" : "#7c3aed",
-                }}
-              >
-                {v}
-              </div>
-            </div>
-          ))}
-        </div>
-        <div className="flex gap-4 mt-3">
-          <span className="flex items-center gap-1.5 text-[11px] text-[#6b7280]">
-            <span className="w-2.5 h-2.5 rounded-sm bg-[#a435f0] inline-block" /> mid
-          </span>
-          <span className="flex items-center gap-1.5 text-[11px] text-[#6b7280]">
-            <span className="w-2.5 h-2.5 rounded-sm bg-[#ede9fe] inline-block" /> active
-          </span>
-          <span className="flex items-center gap-1.5 text-[11px] text-[#6b7280]">
-            <span className="w-2.5 h-2.5 rounded-sm bg-[#f3f4f6] inline-block" /> eliminated
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* ── Visual: Stack ── */
-function StackVisual() {
-  const stack = ["push(42)", "push(17)", "push(8)", "peek → 8"];
-  const colors = ["#bfdbfe", "#93c5fd", "#60a5fa", "#2563eb"];
-  return (
-    <div className="w-full max-w-[340px] rounded-2xl border border-[#bfdbfe] bg-white dark:bg-[#0a1220] shadow-xl overflow-hidden">
-      <div className="flex items-center gap-2 px-4 py-3 bg-[#eff6ff] dark:bg-[#0d1627] border-b border-[#bfdbfe]">
-        <span className="w-3 h-3 rounded-full bg-[#ff5f57]" />
-        <span className="w-3 h-3 rounded-full bg-[#febc2e]" />
-        <span className="w-3 h-3 rounded-full bg-[#28c840]" />
-        <span className="ml-2 text-[12px] font-mono text-[#6b7280]">stack.js — operations</span>
-      </div>
-      <div className="p-5">
-        <p className="text-[11px] uppercase tracking-widest text-[#6b7280] mb-4 font-semibold">Stack — top of stack ↑</p>
-        <div className="flex flex-col-reverse gap-2">
-          {stack.map((item, i) => (
-            <div
-              key={i}
-              className="w-full h-10 rounded-lg flex items-center px-4 text-[13px] font-semibold transition-all"
-              style={{
-                background: colors[i],
-                color: i === stack.length - 1 ? "#fff" : "#1e3a5f",
-                boxShadow: i === stack.length - 1 ? "0 2px 12px #2563eb44" : "none",
-              }}
-            >
-              {item}
-              {i === stack.length - 1 && (
-                <span className="ml-auto text-[11px] bg-white/30 rounded px-2 py-0.5">TOP</span>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* ── Visual: App phone-style mockup ── */
-function AppMockup() {
-  const steps = [
-    { line: 1, tokens: [{ t: "while", c: "#7c3aed" }, { t: " gems remain", c: "#1a1a1a" }], active: false },
-    { line: 2, tokens: [{ t: "  if", c: "#7c3aed" }, { t: " node.visited", c: "#1a1a1a" }], active: false },
-    { line: 3, tokens: [{ t: "    mark", c: "#059669" }, { t: " node", c: "#1a1a1a" }], active: false },
-    { line: 4, tokens: [{ t: "  else", c: "#7c3aed" }], active: true },
-    { line: 5, tokens: [{ t: "    skip", c: "#059669" }, { t: " node", c: "#1a1a1a" }], active: false },
-  ];
-
-  return (
-    <div
-      className="w-full max-w-[320px] rounded-[2rem] bg-white shadow-2xl border border-[#e5e7eb] overflow-hidden"
-      style={{ fontFamily: "'Inter', sans-serif" }}
-    >
-      {/* top bar */}
-      <div className="flex items-center justify-between px-5 pt-5 pb-3">
-        <button className="w-7 h-7 flex items-center justify-center rounded-full bg-[#f3f4f6] text-[#6b7280] text-[14px] font-bold">×</button>
-        {/* progress bar */}
-        <div className="flex-1 mx-3 flex items-center gap-1.5">
-          <div className="flex-1 h-2.5 rounded-full bg-[#22c55e]" style={{ flex: "2.5" }} />
-          {[0,1,2,3].map(i => (
-            <div key={i} className="w-2.5 h-2.5 rounded-full bg-[#e5e7eb]" />
-          ))}
-        </div>
-        {/* lightning */}
-        <span className="text-[22px]">⚡</span>
-      </div>
-
-      {/* task label */}
-      <div className="px-5 pb-3">
-        <p className="text-[13px] font-semibold text-[#374151]">Traverse the graph</p>
-      </div>
-
-      {/* grid visual */}
-      <div className="mx-5 mb-4 rounded-xl overflow-hidden border border-[#e5e7eb] bg-[#f9fafb]">
-        <div className="grid grid-cols-5 gap-px bg-[#e5e7eb] p-px">
-          {Array.from({ length: 25 }).map((_, i) => {
-            const path = [6, 11, 16, 21, 22, 17, 12, 7];
-            const gems = [4, 9, 14];
-            const robot = 22;
-            const isPath = path.includes(i);
-            const isGem = gems.includes(i);
-            const isRobot = i === robot;
-            return (
-              <div
-                key={i}
-                className="aspect-square flex items-center justify-center text-[14px]"
-                style={{
-                  background: isPath ? "#ede9fe" : "#f9fafb",
-                  border: isPath ? "1.5px solid #7c3aed" : "none",
-                }}
-              >
-                {isRobot ? "🤖" : isGem ? "💎" : isPath ? <span className="w-1.5 h-1.5 rounded-full bg-[#7c3aed] inline-block" /> : ""}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* pseudocode steps */}
-      <div className="mx-5 mb-5 rounded-xl bg-[#f9fafb] border border-[#e5e7eb] overflow-hidden">
-        {steps.map((s) => (
-          <div
-            key={s.line}
-            className="flex items-center gap-3 px-4 py-2.5 border-b border-[#f3f4f6] last:border-0"
-            style={{ background: s.active ? "#fff" : "transparent" }}
-          >
-            {s.active ? (
-              <span className="w-3 h-3 rounded-full bg-[#1a1a1a] flex-shrink-0" />
-            ) : (
-              <span className="w-3 h-3 flex-shrink-0" />
-            )}
-            <span className="text-[13px] font-mono">
-              {s.tokens.map((tk, ti) => (
-                <span key={ti} style={{ color: tk.c }}>{tk.t}</span>
-              ))}
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default function ConceptsSection() {
-  return (
-    <section
-      className="bg-white dark:bg-[#1c1d1f]"
-      style={{ fontFamily: "'Inter', 'Source Sans 3', sans-serif" }}
-    >
-      {CONCEPTS.map((c, idx) => (
-        <div
-          key={idx}
-          style={{ background: c.bg }}
-          className="dark:bg-opacity-0 py-20 px-6"
-        >
-          <div
-            className={`max-w-[1100px] mx-auto flex flex-col ${
-              c.flip ? "lg:flex-row-reverse" : "lg:flex-row"
-            } items-center gap-16 lg:gap-24`}
-          >
-            {/* Visual */}
-            <div className="flex-shrink-0 flex items-center justify-center w-full lg:w-auto">
-              {c.visual}
-            </div>
-
-            {/* Text */}
-            <div className="flex-1 flex flex-col gap-5 items-start">
-              <h2
-                className="text-[2.6rem] sm:text-[3.2rem] font-black leading-[1.08] tracking-tight text-[#1a1a1a] dark:text-[#f7f9fa] whitespace-pre-line"
-                style={{ fontFamily: "'Inter', sans-serif", letterSpacing: "-0.03em" }}
-              >
-                {c.heading}
-              </h2>
-              <p className="text-[1.1rem] text-[#4b5563] dark:text-[#9e9e9e] leading-relaxed max-w-[460px]">
-                {c.body}
-              </p>
-              <Link
-                href={c.cta.href}
-                className="inline-flex items-center gap-2 h-[46px] px-7 rounded-full bg-[#1a1a1a] dark:bg-white text-white dark:text-[#1a1a1a] text-[15px] font-bold hover:bg-[#a435f0] dark:hover:bg-[#a435f0] dark:hover:text-white transition-all duration-200"
-              >
-                {c.cta.label}
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
-                </svg>
-              </Link>
-            </div>
-          </div>
-        </div>
-      ))}
-
-      {/* ── "More effective, more fun" block ── */}
-      <div className="py-20 px-6" style={{ background: "#f0fdf4" }}>
-        <div className="max-w-[1100px] mx-auto flex flex-col lg:flex-row-reverse items-center gap-16 lg:gap-24">
-
-          {/* Text side */}
-          <div className="flex-1 flex flex-col gap-5 items-start">
-            <h2
-              className="text-[2.6rem] sm:text-[3.2rem] font-black leading-[1.08] tracking-tight text-[#1a1a1a] dark:text-[#f7f9fa]"
-              style={{ fontFamily: "'Inter', sans-serif", letterSpacing: "-0.03em" }}
-            >
-              More effective,{" "}
-              <br />
-              more fun
-            </h2>
-            <p className="text-[1.1rem] text-[#4b5563] dark:text-[#9e9e9e] leading-relaxed max-w-[460px]">
-              AlgoBuddy&apos;s interactive approach helps you master DSA concepts in less time, with more purpose and joy.
-            </p>
-            <Link
-              href="/visualizer"
-              className="inline-flex items-center gap-2 h-[46px] px-7 rounded-full bg-[#1a1a1a] dark:bg-white text-white dark:text-[#1a1a1a] text-[15px] font-bold hover:bg-[#a435f0] dark:hover:bg-[#a435f0] dark:hover:text-white transition-all duration-200"
-            >
-              Start learning
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
-              </svg>
-            </Link>
-          </div>
-
-          {/* Phone mockup */}
-          <div className="flex-shrink-0 flex items-center justify-center w-full lg:w-auto">
-            <AppMockup />
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/app/components/PersonalizedSection.jsx b/app/components/PersonalizedSection.jsx
deleted file mode 100644
index e1346afb5..000000000
--- a/app/components/PersonalizedSection.jsx
+++ /dev/null
@@ -1,154 +0,0 @@
-"use client";
-import React from "react";
-import Link from "next/link";
-
-/* DSA topic map — rows of topic cards, some completed, some locked */
-const TOPIC_ROWS = [
-  [
-    { label: "Arrays", color: "#f87171", done: true },
-    { label: "Strings", color: "#fb923c", done: true },
-    { label: "Hashing", color: "#a78bfa", done: true },
-    { label: "Recursion", color: "#34d399", done: true },
-  ],
-  [
-    { label: "Linked List", color: "#f87171", done: true },
-    { label: "Stack", color: "#60a5fa", done: true },
-    { label: "Queue", color: "#a78bfa", done: true },
-    { label: "Binary Search", color: "#34d399", done: true },
-    { label: "Two Pointers", color: "#fb923c", done: false, lock: true },
-  ],
-  [
-    { label: "Trees", color: "#f87171", done: true },
-    { label: "BST", color: "#60a5fa", done: true },
-    { label: "Heaps", color: "#a78bfa", done: false, lock: false },
-    { label: "Tries", color: "#34d399", done: false, lock: false },
-    { label: "Graphs", color: "#fb923c", done: false, lock: true },
-    { label: "Sorting", color: "#f472b6", done: false, lock: true },
-  ],
-  [
-    { label: "BFS / DFS", color: "#f87171", done: false, lock: false },
-    { label: "Backtracking", color: "#60a5fa", done: false, lock: true },
-    { label: "Greedy", color: "#a78bfa", done: false, lock: true },
-    { label: "Divide & Conquer", color: "#34d399", done: false, lock: true },
-    { label: "Dynamic Prog.", color: "#fb923c", done: false, lock: true },
-  ],
-  [
-    { label: "Sliding Window", color: "#f87171", done: false, lock: true },
-    { label: "Bit Manipulation", color: "#60a5fa", done: false, lock: true },
-    { label: "Segment Tree", color: "#a78bfa", done: false, lock: true },
-    { label: "Disjoint Set", color: "#34d399", done: false, lock: true },
-  ],
-];
-
-function TopicCard({ label, color, done, lock }) {
-  return (
-    <div
-      className="relative flex flex-col gap-1 px-3 py-2 rounded-xl bg-white border border-[#e5e7eb] shadow-sm select-none"
-      style={{
-        filter: lock ? "blur(3px)" : "none",
-        opacity: lock ? 0.55 : 1,
-        minWidth: "90px",
-      }}
-    >
-      {/* colour bar */}
-      <div className="h-[3px] w-8 rounded-full" style={{ background: color }} />
-      <span className="text-[12px] font-semibold text-[#1a1a1a] leading-tight">
-        {label}
-      </span>
-      {done && (
-        <span className="absolute -top-2 -right-2 w-5 h-5 rounded-full bg-white border border-[#e5e7eb] flex items-center justify-center text-[10px] text-[#22c55e] font-bold shadow-sm">
-          ✓
-        </span>
-      )}
-    </div>
-  );
-}
-
-export default function PersonalizedSection() {
-  return (
-    <section
-      className="py-24 px-6 overflow-hidden"
-      style={{
-        background:
-          "linear-gradient(180deg, #ffffff 0%, #eef2ff 20%, #f0fdf4 60%, #faf5ff 100%)",
-        fontFamily: "'Inter', 'Source Sans 3', sans-serif",
-      }}
-    >
-      <div className="max-w-[1100px] mx-auto flex flex-col lg:flex-row items-center gap-16 lg:gap-20">
-        {/* ── LEFT: text ── */}
-        <div className="flex-1 flex flex-col gap-5 items-start lg:min-w-[320px]">
-          <h2
-            className="text-[2.6rem] sm:text-[3.2rem] font-black leading-[1.08] tracking-tight text-[#1a1a1a]"
-            style={{ letterSpacing: "-0.03em" }}
-          >
-            Your DSA path,
-            <br />
-            your pace
-          </h2>
-          <p className="text-[1.1rem] text-[#4b5563] leading-relaxed max-w-[400px]">
-            Every topic you master unlocks the next. AlgoBuddy maps your
-            progress across Arrays, Trees, Graphs and beyond — so you always
-            know exactly where to go next.
-          </p>
-          <Link
-            href="/visualizer"
-            className="inline-flex items-center gap-2 h-[46px] px-7 rounded-full bg-[#1a1a1a] text-white text-[15px] font-bold hover:bg-[#a435f0] transition-all duration-200"
-          >
-            Start your path
-            <svg
-              className="w-4 h-4"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2.5}
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M14 5l7 7m0 0l-7 7m7-7H3"
-              />
-            </svg>
-          </Link>
-        </div>
-
-        {/* ── RIGHT: topic map ── */}
-        <div className="flex-1 relative w-full overflow-hidden">
-          {/* fade edges left & right */}
-          <div
-            className="absolute left-0 top-0 bottom-0 w-12 z-10 pointer-events-none"
-            style={{
-              background: "linear-gradient(to right, #eef2ff, transparent)",
-            }}
-          />
-          <div
-            className="absolute right-0 top-0 bottom-0 w-24 z-10 pointer-events-none"
-            style={{
-              background: "linear-gradient(to left, #faf5ff, transparent)",
-            }}
-          />
-          {/* fade bottom */}
-          <div
-            className="absolute left-0 right-0 bottom-0 h-20 z-10 pointer-events-none"
-            style={{
-              background: "linear-gradient(to top, #f0fdf4, transparent)",
-            }}
-          />
-
-          <div className="flex flex-col gap-3 py-2">
-            {TOPIC_ROWS.map((row, ri) => (
-              <div
-                key={ri}
-                className="flex gap-3 flex-wrap"
-                style={{ paddingLeft: `${ri * 14}px` }}
-              >
-                {row.map((topic, ti) => (
-                  <TopicCard key={ti} {...topic} />
-                ))}
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/app/components/PrivacyPolicyModal.jsx b/app/components/PrivacyPolicyModal.jsx
deleted file mode 100755
index 63171a007..000000000
--- a/app/components/PrivacyPolicyModal.jsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React, { useEffect } from "react";
-import { FiX } from "react-icons/fi";
-
-const policySections = [
-  {
-    id: "1",
-    title: "Information We Collect",
-    data: "We collect personal information like name, email address, and usage data (IP, browser, etc.) to provide and improve our services.",
-  },
-  {
-    id: "2",
-    title: "How We Use Your Information",
-    points: [
-      "To provide and maintain our services",
-      "Improve user experience and service quality",
-      "Send important updates or support emails",
-    ],
-  },
-  {
-    id: "3",
-    title: "Your Rights",
-    data: "You have the right to request access, correction, or deletion of your personal data at any time by contacting us.",
-  },
-  {
-    id: "4",
-    title: "Contact Information",
-    data: "For any privacy-related questions, please contact us at",
-    contact: "hello@algobuddy.in",
-  },
-];
-
-const PrivacyPolicyModal = ({ isOpen, onClose }) => {
-  // Prevent body scroll when modal is open
-  useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "auto";
-    }
-    return () => {
-      document.body.style.overflow = "auto";
-    };
-  }, [isOpen]);
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      {/* Backdrop with fade-in animation */}
-      <div
-        className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm transition-opacity duration-300"
-        onClick={onClose}
-      />
-
-      {/* Modal container with slide-up animation */}
-      <div className="relative bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 max-w-3xl w-full rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 max-h-[90vh] flex flex-col">
-        {/* Header with close button */}
-        <div className="sticky top-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 p-4 flex justify-between items-center z-10">
-          <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-blue-400 bg-clip-text text-transparent">
-            Privacy Policy
-          </h2>
-          <button
-            onClick={onClose}
-            className="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
-            aria-label="Close"
-          >
-            <FiX className="w-6 h-6" />
-          </button>
-        </div>
-
-        {/* Scrollable content */}
-        <div className="overflow-y-auto p-6">
-          <p className="mb-6 text-gray-600 dark:text-gray-300">
-            Your privacy is important to us. This Privacy Policy explains how we
-            collect, use, disclose, and safeguard your information when you
-            visit our website or use our services.
-          </p>
-
-          {/* Policy sections */}
-          <div className="space-y-6">
-            <ul>
-              {policySections.map((item, index) => (
-                <li key={index} className="mb-3">
-                  <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
-                    <div className="flex">
-                      <span className="w-6 h-6 font-poppins font-semibold bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center text-blue-600 dark:text-blue-400 mr-3">
-                        {item.id}
-                      </span>
-                      <h3 className="text-xl font-semibold mb-2 flex items-center">
-                        {item.title}
-                      </h3>
-                    </div>
-                    {item.points && (
-                      <ul className="space-y-2 text-gray-600 dark:text-gray-300 pl-9">
-                        {item.points.map((subitem, subindex) => (
-                          <li
-                            key={subindex}
-                            className="list-disc text-blue-500"
-                          >
-                            <span className="text-gray-600 dark:text-gray-300">
-                              {subitem}
-                            </span>
-                          </li>
-                        ))}
-                      </ul>
-                    )}
-                    <p className="text-gray-600 dark:text-gray-300 pl-9">
-                      {item.data}
-                    </p>
-                    <span className="font-medium pl-9 text-blue-600 dark:text-blue-400">
-                      {item.contact}
-                    </span>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          <div className="mt-8 pt-4 border-t border-gray-200 dark:border-gray-700">
-            <p className="text-sm text-gray-500 dark:text-gray-400">
-              Last updated: May 17, 2025
-            </p>
-          </div>
-        </div>
-
-        {/* Footer with close button */}
-        <div className="sticky bottom-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 p-4 flex justify-end">
-          <button
-            onClick={onClose}
-            className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-300"
-          >
-            I Understand
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PrivacyPolicyModal;
diff --git a/app/components/SectionsDisplay.jsx b/app/components/SectionsDisplay.jsx
deleted file mode 100755
index 303300aea..000000000
--- a/app/components/SectionsDisplay.jsx
+++ /dev/null
@@ -1,128 +0,0 @@
-'use client';
-import Link from 'next/link';
-import { motion } from 'framer-motion';
-import { FiChevronRight, FiSearch, FiInfo } from 'react-icons/fi';
-import { useState } from 'react';
-
-const InfoPopup = ({ info }) => {
-  return (
-    <div className="absolute top-full right-0 mt-2 w-64 bg-white dark:bg-[#1a1a1a] rounded-xl shadow-xl border border-[#e5e7eb] dark:border-[#333] p-4 z-10">
-      {Object.entries(info).map(([key, value]) => (
-        <div key={key} className="mb-2 last:mb-0">
-          <span className="font-semibold text-[#1a1a1a] dark:text-[#f5f5f5]">{key}: </span>
-          <span className="text-[#4b5563] dark:text-[#a3a3a3]">{value}</span>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const SectionsDisplay = ({ sections, searchQuery }) => {
-  const [hoveredSection, setHoveredSection] = useState(null);
-
-  return (
-    <div className="max-w-7xl mx-auto space-y-6 px-4 sm:px-1" style={{ fontFamily: "'Inter', 'Source Sans 3', sans-serif" }}>
-      {sections.map((section, sectionIndex) => (
-        <motion.div
-          key={sectionIndex}
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.3, delay: sectionIndex * 0.05 }}
-          className="group relative bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden transition-all duration-300 hover:shadow-md hover:border-[#a435f0]/30 dark:hover:border-[#a435f0]/30"
-        >
-          {/* Section Header */}
-          <div className="px-6 py-5 border-b border-[#f3f4f6] dark:border-[#222] flex items-center justify-between bg-[#fafafa] dark:bg-[#161616]">
-            <div className="flex items-center gap-4">
-              <div className="w-10 h-10 rounded-xl bg-[#faf5ff] dark:bg-[#2d1f40] flex items-center justify-center text-[#a435f0]">
-                {section.icon}
-              </div>
-              <h2 className="text-xl font-bold text-[#1a1a1a] dark:text-white" style={{ letterSpacing: "-0.02em" }}>{section.title}</h2>
-            </div>
-            {section.info && (
-              <div
-                className="relative"
-                onMouseEnter={() => setHoveredSection(sectionIndex)}
-                onMouseLeave={() => setHoveredSection(null)}
-              >
-                <FiInfo className="h-5 w-5 text-[#9ca3af] hover:text-[#a435f0] cursor-pointer transition-colors" />
-                {hoveredSection === sectionIndex && (
-                  <InfoPopup info={section.info} />
-                )}
-              </div>
-            )}
-          </div>
-
-          {/* Section Content */}
-          <div className="p-6">
-            {section.subsections ? (
-              <div className="space-y-7">
-                {section.subsections.map((subsection, subIndex) => (
-                  <div key={subIndex}>
-                    <h3 className="text-[15px] font-semibold text-[#1a1a1a] dark:text-[#f5f5f5] mb-4 pl-3 border-l-[3px] border-[#a435f0]">
-                      {subsection.title}
-                    </h3>
-                    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
-                      {subsection.items.map((item, itemIndex) => (
-                        <Link
-                          key={itemIndex}
-                          href={item.path}
-                          className="group/item relative block p-4 rounded-xl border border-[#e5e7eb] dark:border-[#222] hover:border-[#a435f0]/50 dark:hover:border-[#a435f0]/50 transition-all duration-200 bg-white dark:bg-[#0f0f0f] hover:bg-[#faf5ff] dark:hover:bg-[#1a0a2e] overflow-hidden"
-                        >
-                          <div className="flex items-center justify-between">
-                            <span className="text-[#374151] dark:text-[#d1d5db] group-hover/item:text-[#a435f0] dark:group-hover/item:text-[#c084fc] font-medium text-[14px] transition-colors">
-                              {item.name}
-                            </span>
-                            <FiChevronRight className="h-4 w-4 text-[#d1d5db] dark:text-[#444] group-hover/item:text-[#a435f0] transition-colors flex-shrink-0" />
-                          </div>
-                        </Link>
-                      ))}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-                {section.items?.map((item, itemIndex) => (
-                  <Link
-                    key={itemIndex}
-                    href={item.path}
-                    className="group/item relative block p-4 rounded-xl border border-[#e5e7eb] dark:border-[#222] hover:border-[#a435f0]/50 dark:hover:border-[#a435f0]/50 transition-all duration-200 bg-white dark:bg-[#0f0f0f] hover:bg-[#faf5ff] dark:hover:bg-[#1a0a2e] overflow-hidden"
-                  >
-                    <div className="flex items-center justify-between">
-                      <span className="text-[#374151] dark:text-[#d1d5db] group-hover/item:text-[#a435f0] dark:group-hover/item:text-[#c084fc] font-medium text-[14px] transition-colors">
-                        {item.name}
-                      </span>
-                      <FiChevronRight className="h-4 w-4 text-[#d1d5db] dark:text-[#444] group-hover/item:text-[#a435f0] transition-colors flex-shrink-0" />
-                    </div>
-                  </Link>
-                ))}
-              </div>
-            )}
-          </div>
-        </motion.div>
-      ))}
-
-      {/* Empty State */}
-      {sections.length === 0 && (
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.3 }}
-          className="text-center py-16"
-        >
-          <div className="w-20 h-20 mx-auto mb-6 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-full flex items-center justify-center">
-            <FiSearch className="h-9 w-9 text-[#a435f0]" />
-          </div>
-          <h3 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-3" style={{ letterSpacing: "-0.02em" }}>
-            No results found
-          </h3>
-          <p className="text-[#6b7280] dark:text-[#a3a3a3] max-w-md mx-auto">
-            Try searching for different terms or browse our categories
-          </p>
-        </motion.div>
-      )}
-    </div>
-  );
-};
-
-export default SectionsDisplay;
\ No newline at end of file
diff --git a/app/components/about.jsx b/app/components/about.jsx
deleted file mode 100755
index 911a9adf9..000000000
--- a/app/components/about.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from "react";
-import { IoMdInformationCircle } from "react-icons/io";
-
-const AboutSection = () => {
-  return (
-    <section className="relative py-10 bg-udemy-bg dark:bg-udemy-dark-bg overflow-hidden">
-      <div className="container mx-auto px-6 relative z-10">
-        {/* Section Header */}
-        <div className="max-w-2xl mx-auto text-center mb-12">
-          <span className="flex items-center justify-center gap-2 text-udemy-purple dark:text-udemy-purple-light text-sm font-bold tracking-wider uppercase mb-4">
-            <IoMdInformationCircle className="text-xl" />
-            About The Platform
-          </span>
-          <h2 className="text-4xl md:text-5xl font-bold font-serif text-udemy-text dark:text-udemy-dark-text mb-6">
-            Revolutionizing{" "}
-            <span className="text-transparent bg-clip-text bg-gradient-to-r from-udemy-purple to-udemy-purple-dark dark:from-udemy-purple-light dark:to-udemy-purple">
-              DSA Learning
-            </span>
-          </h2>
-        </div>
-
-        {/* Mission Statement */}
-        <div className="max-w-6xl mx-auto bg-white dark:bg-udemy-dark-surface backdrop-blur-sm border border-udemy-border dark:border-udemy-dark-border rounded-2xl p-8 md:p-10 shadow-lg overflow-hidden">
-          <div className="relative">
-            {/* Decorative element */}
-            <div className="absolute -top-20 -right-20 w-40 h-40 bg-udemy-purple/10 rounded-full filter blur-xl"></div>
-
-            <h3 className="text-2xl md:text-3xl font-bold font-serif text-udemy-text dark:text-udemy-dark-text mb-6 relative">
-              <span className="text-udemy-purple">Our</span> Mission
-            </h3>
-            <div className="space-y-6 text-lg text-udemy-muted dark:text-udemy-dark-muted leading-relaxed">
-              <p>
-                AlgoBuddy was created to bridge the gap between theoretical
-                knowledge and practical understanding. We believe that seeing
-                concepts in action is the key to mastering data structures and
-                algorithms.
-              </p>
-              <p>
-                Whether you're a student preparing for exams, a developer honing
-                your skills, or an enthusiast exploring computer science, our
-                tool makes learning engaging and effective through interactive
-                visualizations and a user-friendly interface.
-              </p>
-            </div>
-          </div>
-        </div>
-        {/* Divider */}
-        <div className="mt-20 mx-auto h-[1px] max-w-4xl bg-gradient-to-r rounded-sm from-transparent via-udemy-purple/20 dark:via-udemy-purple/30 to-transparent"></div>
-      </div>
-    </section>
-  );
-};
-
-export default AboutSection;
diff --git a/app/components/cookie.jsx b/app/components/cookie.jsx
deleted file mode 100755
index 53ad6e686..000000000
--- a/app/components/cookie.jsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import React, { useEffect } from "react";
-import { FiX } from "react-icons/fi";
-
-const cookieSections = [
-  {
-    id: "1",
-    title: "What Are Cookies",
-    data: "Cookies are small text files that are stored on your device when you visit our website. They help us provide you with a better experience by remembering your preferences and understanding how you use our site.",
-  },
-  {
-    id: "2",
-    title: "Types of Cookies We Use",
-    points: [
-      "Essential Cookies: Required for basic site functionality and security",
-      "Performance Cookies: Help us understand how visitors interact with our website",
-      "Functionality Cookies: Remember your preferences and settings",
-      "Analytics Cookies: Collect information about your usage patterns",
-    ],
-  },
-  {
-    id: "3",
-    title: "How We Use Cookies",
-    points: [
-      "To authenticate users and prevent fraudulent use",
-      "Remember your preferences and settings",
-      "Analyze site traffic and usage patterns",
-      "Improve our website performance and user experience",
-      "Provide personalized content when available",
-    ],
-  },
-  {
-    id: "4",
-    title: "Third-Party Cookies",
-    data: "We may also use cookies from trusted third-party services for analytics, performance monitoring, and other functionality. These third parties have their own privacy policies governing cookie usage.",
-  },
-  {
-    id: "5",
-    title: "Cookie Management",
-    points: [
-      "You can control cookie settings through your browser preferences",
-      "Most browsers allow you to refuse or delete cookies",
-      "Disabling essential cookies may affect website functionality",
-      "You can opt-out of analytics cookies using our cookie preferences tool",
-    ],
-  },
-  {
-    id: "6",
-    title: "Your Choices",
-    data: "You have the right to accept or reject cookies. Most web browsers automatically accept cookies, but you can usually modify your browser setting to decline cookies if you prefer. However, this may prevent you from taking full advantage of the website.",
-  },
-  {
-    id: "7",
-    title: "Updates to Cookie Policy",
-    data: "We may update this Cookie Policy from time to time to reflect changes in technology, legislation, or our operations. We encourage you to periodically review this page for the latest information.",
-  },
-  {
-    id: "8",
-    title: "Contact Information",
-    data: "If you have any questions about our use of cookies, please contact us at",
-    contact: "hello@algobuddy.in",
-  },
-];
-
-const CookiePolicyModal = ({ isOpen, onClose }) => {
-  // Prevent body scroll when modal is open
-  useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "auto";
-    }
-    return () => {
-      document.body.style.overflow = "auto";
-    };
-  }, [isOpen]);
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      {/* Backdrop with fade-in animation */}
-      <div
-        className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm transition-opacity duration-300"
-        onClick={onClose}
-      />
-
-      {/* Modal container with slide-up animation */}
-      <div className="relative bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 max-w-3xl w-full rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 max-h-[90vh] flex flex-col">
-        {/* Header with close button */}
-        <div className="sticky top-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 p-4 flex justify-between items-center z-10">
-          <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-blue-400 bg-clip-text text-transparent">
-            Cookie Policy
-          </h2>
-          <button
-            onClick={onClose}
-            className="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
-            aria-label="Close"
-          >
-            <FiX className="w-6 h-6" />
-          </button>
-        </div>
-
-        {/* Scrollable content */}
-        <div className="overflow-y-auto p-6">
-          <p className="mb-6 text-gray-600 dark:text-gray-300">
-            This Cookie Policy explains how we use cookies and similar
-            technologies on our website. It describes the types of cookies we
-            use, their purposes, and how you can manage your cookie preferences.
-          </p>
-
-          {/* Cookie policy sections */}
-          <div className="space-y-6">
-            <ul>
-              {cookieSections.map((item, index) => (
-                <li key={index} className="mb-3">
-                  <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
-                    <div className="flex">
-                      <span className="w-6 h-6 font-poppins font-semibold bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center text-blue-600 dark:text-blue-400 mr-3">
-                        {item.id}
-                      </span>
-                      <h3 className="text-xl font-semibold mb-2 flex items-center">
-                        {item.title}
-                      </h3>
-                    </div>
-                    {item.points && (
-                      <ul className="space-y-2 text-gray-600 dark:text-gray-300 pl-9">
-                        {item.points.map((subitem, subindex) => (
-                          <li
-                            key={subindex}
-                            className="list-disc text-blue-500"
-                          >
-                            <span className="text-gray-600 dark:text-gray-300">
-                              {subitem}
-                            </span>
-                          </li>
-                        ))}
-                      </ul>
-                    )}
-                    <p className="text-gray-600 dark:text-gray-300 pl-9">
-                      {item.data}
-                    </p>
-                    {item.contact && (
-                      <span className="font-medium pl-9 text-blue-600 dark:text-blue-400">
-                        {item.contact}
-                      </span>
-                    )}
-                  </div>
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          {/* Additional cookie information */}
-          <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
-            <h4 className="font-semibold text-blue-800 dark:text-blue-300 mb-2">
-              🍪 Cookie Duration
-            </h4>
-            <p className="text-sm text-blue-700 dark:text-blue-400">
-              Session cookies are temporary and expire when you close your
-              browser. Persistent cookies remain on your device for a set period
-              or until you delete them.
-            </p>
-          </div>
-
-          <div className="mt-8 pt-4 border-t border-gray-200 dark:border-gray-700">
-            <p className="text-sm text-gray-500 dark:text-gray-400">
-              Last updated: May 17, 2025
-            </p>
-          </div>
-        </div>
-
-        {/* Footer with close button */}
-        <div className="sticky bottom-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 p-4 flex justify-end">
-          <button
-            onClick={onClose}
-            className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-300"
-          >
-            Accept & Close
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default CookiePolicyModal;
diff --git a/app/components/dashboard/ActivityDashboard.jsx b/app/components/dashboard/ActivityDashboard.jsx
deleted file mode 100755
index cd266ffb3..000000000
--- a/app/components/dashboard/ActivityDashboard.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { supabase } from "@/lib/supabase";
-import StreakCounter from "@/app/components/dashboard/StreakCounter";
-import ActivityHeatmap from "@/app/components/dashboard/ActivityHeatmap";
-import {ChartNoAxesCombined} from "lucide-react";
-
-function ActivityDashboard({ userId }) {
-  const [activityDates, setActivityDates] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    if (!userId) return;
-
-    async function fetchActivity() {
-      setLoading(true);
-      const { data, error } = await supabase
-        .from("user_activity")
-        .select("activity_date")
-        .eq("user_id", userId);
-
-      if (!error && data) {
-        const dates = data.map(
-          (item) => new Date(item.activity_date).toISOString().split("T")[0]
-        );
-        setActivityDates(dates);
-      }
-      setLoading(false);
-    }
-
-    fetchActivity();
-  }, [userId]);
-
-  if (loading) {
-    return (
-      <div className="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg text-gray-600 dark:text-gray-300">
-        Loading activity...
-      </div>
-    );
-  }
-
-  return (
-    <main className="rounded-xl bg-white border border-gray-200 dark:border-gray-700 dark:bg-neutral-950 p-4">
-      <div className="flex items-center gap-2">
-        <ChartNoAxesCombined className="text-black dark:text-white"/>
-        <h1 className="font-poppins text-lg text-black dark:text-white">Your Stats</h1>
-      </div>
-      <div className="flex flex-col md:flex-row items-center justify-center md:gap-6">
-        <StreakCounter activityDates={activityDates} />
-        <ActivityHeatmap activityDates={activityDates} />
-      </div>
-    </main>
-  );
-}
-
-export default ActivityDashboard;
diff --git a/app/components/dashboard/ActivityHeatmap.jsx b/app/components/dashboard/ActivityHeatmap.jsx
deleted file mode 100755
index 346e767cc..000000000
--- a/app/components/dashboard/ActivityHeatmap.jsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import React, { useMemo } from "react";
-
-function ActivityHeatmap({ activityDates }) {
-  // Generate last 90 days
-  const last90Days = useMemo(() => {
-    const dates = [];
-    const today = new Date();
-    for (let i = 89; i >= 0; i--) {
-      const d = new Date();
-      d.setDate(today.getDate() - i);
-      dates.push(d);
-    }
-    return dates;
-  }, []);
-
-  // Map activity dates to a Set for O(1) lookup
-  const activitySet = useMemo(() => new Set(activityDates), [activityDates]);
-
-  // Helper to format date YYYY-MM-DD
-  const formatDate = (date) => date.toISOString().split("T")[0];
-
-  // Weekday labels to show on the left (Sun, Mon, Wed, Fri)
-  const weekdayLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-  const visibleWeekdayLabels = ["Sun", "Mon", "Wed", "Fri"];
-
-  // Prepare weeks data (group dates by week starting on Sunday)
-  // We want columns = weeks, rows = days (0=Sun to 6=Sat)
-  const weeks = [];
-  let currentWeek = [];
-  let currentWeekStartDay = last90Days[0].getDay();
-  // Pad first week with nulls if first day is not Sunday
-  for (let i = 0; i < currentWeekStartDay; i++) {
-    currentWeek.push(null);
-  }
-  last90Days.forEach((date) => {
-    if (currentWeek.length === 7) {
-      weeks.push(currentWeek);
-      currentWeek = [];
-    }
-    currentWeek.push(date);
-  });
-  // Fill last week with nulls if needed
-  while (currentWeek.length < 7) {
-    currentWeek.push(null);
-  }
-  weeks.push(currentWeek);
-
-  // Get month labels for top row
-  // For each week, show the month label only once when the month changes
-  const monthLabels = [];
-  let lastMonth = null;
-  weeks.forEach((week) => {
-    // Find first non-null date in week
-    const firstDate = week.find((d) => d !== null);
-    if (firstDate) {
-      const month = firstDate.toLocaleString("default", { month: "short" });
-      if (month !== lastMonth) {
-        monthLabels.push(month);
-        lastMonth = month;
-      } else {
-        monthLabels.push("");
-      }
-    } else {
-      monthLabels.push("");
-    }
-  });
-
-  const totalContributions = activityDates.length;
-
-  return (
-    <div className="overflow-x-auto">
-      <div className="flex scale-90 sm:scale-100">
-        {/* Left column with month label row height and weekday labels */}
-        <div className="flex flex-col">
-          {/* Contributions circle at top-left corner */}
-          <div className="w-5 h-5 mb-1 flex items-center justify-center">
-            <div className="w-5 h-5 text-sm rounded-full flex items-center justify-center bg-green-500 text-white font-bold">
-              {totalContributions}
-            </div>
-          </div>
-          {/* Weekday labels column */}
-          <div className="grid grid-rows-7 gap-1 mr-1 text-xs md:text-xs text-gray-500 dark:text-gray-400" style={{height: "168px"}}>
-            {weekdayLabels.map((day, idx) =>
-              visibleWeekdayLabels.includes(day) ? (
-                <div key={day} className="h-6 md:h-6 flex items-center justify-end pr-1 text-[10px] md:text-xs">
-                  {day}
-                </div>
-              ) : (
-                <div key={day} className="h-6 md:h-6"></div>
-              )
-            )}
-          </div>
-        </div>
-        <div>
-          {/* Month labels row */}
-          <div className="grid grid-cols-[repeat(auto-fit,minmax(24px,1fr))] gap-1 mb-1" style={{gridTemplateColumns: `repeat(${weeks.length}, 24px)`}}>
-            {monthLabels.map((month, idx) => (
-              <div key={idx} className="text-[10px] md:text-xs font-medium text-gray-600 dark:text-gray-300 text-center">
-                {month}
-              </div>
-            ))}
-          </div>
-          {/* Heatmap grid */}
-          <div className="grid grid-rows-7 grid-flow-col gap-1">
-            {weeks.map((week, weekIdx) =>
-              week.map((date, dayIdx) => {
-                if (!date) {
-                  return <div key={`${weekIdx}-${dayIdx}`} className="w-6 h-6"></div>;
-                }
-                const dateStr = formatDate(date);
-                const isActive = activitySet.has(dateStr);
-                return (
-                  <div
-                    key={`${weekIdx}-${dayIdx}`}
-                    title={`${dateStr} - ${isActive ? "Active" : "No Activity"}`}
-                    className={`w-6 h-6 rounded-sm transition-colors duration-300 ${
-                      isActive
-                        ? "bg-green-500"
-                        : "bg-gray-200 dark:bg-gray-700"
-                    }`}
-                  ></div>
-                );
-              })
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default ActivityHeatmap;
diff --git a/app/components/dashboard/StreakCounter.jsx b/app/components/dashboard/StreakCounter.jsx
deleted file mode 100755
index 5ac444c4d..000000000
--- a/app/components/dashboard/StreakCounter.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, { useMemo } from "react";
-import { Award } from "lucide-react";
-
-function StreakCounter({ activityDates }) {
-  const { currentStreak, highestStreak } = useMemo(() => {
-    if (!activityDates || activityDates.length === 0) {
-      return { currentStreak: 0, highestStreak: 0 };
-    }
-
-    const dates = activityDates.map(d => new Date(d)).sort((a, b) => a - b);
-
-    let highest = 0;
-    let tempStreak = 1;
-
-    for (let i = 1; i < dates.length; i++) {
-      const diff = (dates[i] - dates[i - 1]) / (1000 * 60 * 60 * 24);
-      if (diff === 1) tempStreak++;
-      else tempStreak = 1;
-      if (tempStreak > highest) highest = tempStreak;
-    }
-
-    let streakCount = 0;
-    const today = new Date();
-    for (let i = dates.length - 1; i >= 0; i--) {
-      const diff = (today - dates[i]) / (1000 * 60 * 60 * 24);
-      if (diff === 0 || diff === 1) {
-        streakCount++;
-        today.setDate(today.getDate() - 1);
-      } else break;
-    }
-
-    return { currentStreak: streakCount, highestStreak: highest };
-  }, [activityDates]);
-
-  return (
-    <main className="md:p-12 p-4">
-    <div className="flex flex-col items-center space-y-2">
-      {/* Circle with fire icon and current streak */}
-      <div className="w-24 h-24 rounded-full border-4 border-orange-500 flex flex-col items-center justify-center shadow-lg relative">
-        <span className="text-3xl">
-          <img src="/assets/fire.svg" className="w-10 h-10" alt="fire" />
-        </span>
-        <span className="text-xl font-bold text-gray-800 dark:text-gray-200">
-          {currentStreak}
-        </span>
-      </div>
-
-      {/* Highest streak label */}
-      <div className="text-sm text-black dark:text-white flex items-center gap-1">
-        <Award size={24} color="#ff9300"/>Highest: {highestStreak} day{highestStreak !== 1 ? "s" : ""}
-      </div>
-    </div>
-    </main>
-  );
-}
-
-export default StreakCounter;
\ No newline at end of file
diff --git a/app/components/faq.jsx b/app/components/faq.jsx
deleted file mode 100755
index f6593984b..000000000
--- a/app/components/faq.jsx
+++ /dev/null
@@ -1,122 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import {
-  FiChevronDown,
-  FiChevronUp,
-  FiHelpCircle,
-  FiMail,
-} from "react-icons/fi";
-import Support from "@/app/components/support";
-
-const FAQSection = () => {
-  const [activeIndex, setActiveIndex] = useState(null);
-
-  const toggleAccordion = (index) => {
-    setActiveIndex(activeIndex === index ? null : index);
-  };
-
-  const faqs = [
-    {
-      question: "What is AlgoBuddy?",
-      answer:
-        "AlgoBuddy is an interactive learning tool that helps you understand Data Structures and Algorithms through visual representations. It provides step-by-step animations of how different algorithms work.",
-    },
-    {
-      question: "Is this tool suitable for beginners?",
-      answer:
-        "Absolutely! Our visualizations are designed to make complex concepts accessible to learners at all levels. Beginners can see exactly how data structures operate, while advanced users can use it to refine their understanding.",
-    },
-    {
-      question: "Can I use this to prepare for coding interviews?",
-      answer:
-        "Yes! Many users find our visualizations particularly helpful for interview preparation. Seeing algorithms in action helps reinforce understanding better than just reading pseudocode.",
-    },
-    {
-      question: "Are there plans to add more data structures?",
-      answer:
-        "We're continuously expanding our collection. Currently working on adding Trees and Graphs visualizations - stay tuned for updates!",
-    },
-  ];
-
-  return (
-    <section className="relative py-6 bg-udemy-surface dark:bg-udemy-dark-bg overflow-hidden">
-      <div className="container mx-auto px-6 relative z-10">
-        {/* Section Header */}
-        <div className="max-w-4xl mx-auto text-center mb-16">
-          <span className="inline-flex items-center justify-center gap-2 text-udemy-purple dark:text-udemy-purple-light text-sm font-bold tracking-wider uppercase mb-4">
-            <FiHelpCircle className="w-5 h-5" />
-            Need Help?
-          </span>
-          <h2 className="text-4xl md:text-5xl font-bold font-serif text-udemy-text dark:text-udemy-dark-text mb-6">
-            Frequently{" "}
-            <span className="text-transparent bg-clip-text bg-gradient-to-r from-udemy-purple to-udemy-purple-dark dark:from-udemy-purple-light dark:to-udemy-purple">
-              Asked Questions
-            </span>
-          </h2>
-          <p className="text-xl text-udemy-muted dark:text-udemy-dark-muted leading-relaxed">
-            Quick answers to common questions about our platform
-          </p>
-        </div>
-
-        {/* FAQ Accordion */}
-        <div className="max-w-3xl mx-auto space-y-4">
-          {faqs.map((faq, index) => (
-            <div
-              key={index}
-              className={`bg-white dark:bg-udemy-dark-surface backdrop-blur-sm border border-udemy-border dark:border-udemy-dark-border rounded-xl overflow-hidden transition-all duration-300 ${activeIndex === index ? "shadow-lg" : "shadow-sm hover:shadow-md"}`}
-            >
-              <button
-                className="w-full flex items-center justify-between p-6 text-left"
-                onClick={() => toggleAccordion(index)}
-              >
-                <h3 className="text-xl font-bold font-serif text-udemy-text dark:text-udemy-dark-text">
-                  <span className="text-udemy-purple mr-3">Q{index + 1}.</span>
-                  {faq.question}
-                </h3>
-                <span className="text-udemy-purple dark:text-udemy-purple-light ml-4">
-                  {activeIndex === index ? (
-                    <FiChevronUp className="w-6 h-6" />
-                  ) : (
-                    <FiChevronDown className="w-6 h-6" />
-                  )}
-                </span>
-              </button>
-              <div
-                className={`px-6 pb-6 pt-0 text-udemy-muted dark:text-udemy-dark-muted transition-all duration-300 ${activeIndex === index ? "block opacity-100" : "hidden opacity-0"}`}
-              >
-                <div className="pl-8 border-l-2 border-udemy-purple/30">
-                  <p className="flex">
-                    <span className="text-udemy-purple font-bold mr-2">A.</span>
-                    {faq.answer}
-                  </p>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Additional Help */}
-        <div className="max-w-3xl mx-auto mt-16 text-center bg-white dark:bg-udemy-dark-surface backdrop-blur-sm border border-udemy-border dark:border-udemy-dark-border rounded-2xl p-8 shadow-sm">
-          <div className="w-16 h-16 bg-purple-100 dark:bg-udemy-purple/20 rounded-full flex items-center justify-center text-udemy-purple dark:text-udemy-purple-light mx-auto mb-6">
-            <FiMail className="w-8 h-8" />
-          </div>
-          <h3 className="text-2xl font-bold font-serif text-udemy-text dark:text-udemy-dark-text mb-4">
-            Still have questions?
-          </h3>
-          <p className="text-udemy-muted dark:text-udemy-dark-muted mb-6 max-w-md mx-auto">
-            Our team is ready to help you with any additional questions you
-            might have.
-          </p>
-          <div className="mt-20 flex justify-center items-center">
-            <Support />
-          </div>
-        </div>
-
-        {/* Divider */}
-        <div className="mt-20 mx-auto h-[1px] max-w-4xl bg-gradient-to-r rounded-sm from-transparent via-udemy-purple/20 dark:via-udemy-purple/30 to-transparent"></div>
-      </div>
-    </section>
-  );
-};
-
-export default FAQSection;
diff --git a/app/components/footer.jsx b/app/components/footer.jsx
deleted file mode 100755
index 10f4660a0..000000000
--- a/app/components/footer.jsx
+++ /dev/null
@@ -1,128 +0,0 @@
-"use client";
-import React from "react";
-import { useState } from "react";
-import PrivacyPolicyModal from "@/app/components/PrivacyPolicyModal";
-import TermsOfServiceModal from "@/app/components/termsOfServicesModal";
-import CookiePolicyModal from "@/app/components/cookie";
-
-const Footer = () => {
-  const [showPolicyModal, setShowPolicyModal] = useState(false);
-  const [showTermsModal, setShowTermsModal] = useState(false);
-  const [showCookieModal, setShowCookieModal] = useState(false);
-
-  return (
-    <footer className="bg-udemy-dark-bg text-udemy-dark-muted">
-      {/* Thin top divider */}
-      <div className="border-t border-udemy-dark-surface" />
-
-      <div className="max-w-3xl mx-auto px-6 py-14 flex flex-col items-center text-center space-y-6">
-        {/* Brand */}
-        <span className="text-xl font-bold font-serif text-udemy-dark-text tracking-tight">
-          Algo<span className="text-udemy-purple">Buddy</span>
-        </span>
-
-        {/* Tagline */}
-        <p className="text-sm text-udemy-dark-muted max-w-xs leading-relaxed">
-          Interactive visualization tools for mastering data structures and
-          algorithms.
-        </p>
-
-        {/* Social icons */}
-        <div className="flex items-center gap-4">
-          {/* GitHub */}
-          <a
-            href="https://github.com/PankajSingh34"
-            aria-label="GitHub"
-            className="w-10 h-10 rounded-full border border-udemy-dark-border flex items-center justify-center text-udemy-dark-muted hover:text-udemy-dark-text hover:border-udemy-dark-text transition-colors"
-          >
-            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-              <path
-                fillRule="evenodd"
-                d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-                clipRule="evenodd"
-              />
-            </svg>
-          </a>
-
-          {/* LinkedIn */}
-          <a
-            href="https://www.linkedin.com/in/pankaj-singh-2a968b212/"
-            aria-label="LinkedIn"
-            className="w-10 h-10 rounded-full border border-udemy-dark-border flex items-center justify-center text-udemy-dark-muted hover:text-udemy-dark-text hover:border-udemy-dark-text transition-colors"
-          >
-            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
-            </svg>
-          </a>
-
-          {/* Email */}
-          <a
-            href="mailto:singhps588@gmail.com"
-            aria-label="Email"
-            className="w-10 h-10 rounded-full border border-udemy-dark-border flex items-center justify-center text-udemy-dark-muted hover:text-udemy-dark-text hover:border-udemy-dark-text transition-colors"
-          >
-            <svg
-              className="w-5 h-5"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.8"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-              />
-            </svg>
-          </a>
-        </div>
-
-        {/* Thin divider */}
-        <div className="w-full border-t border-udemy-dark-surface" />
-
-        {/* Bottom row */}
-        <div className="flex flex-col sm:flex-row items-center gap-3 sm:gap-6 text-xs text-udemy-dark-muted w-full justify-between">
-          <span>
-            &copy; {new Date().getFullYear()} AlgoBuddy. All rights reserved.
-          </span>
-          <div className="flex items-center gap-4">
-            <button
-              onClick={() => setShowPolicyModal(true)}
-              className="hover:text-udemy-purple transition"
-            >
-              Privacy Policy
-            </button>
-            <button
-              onClick={() => setShowTermsModal(true)}
-              className="hover:text-udemy-purple transition"
-            >
-              Terms
-            </button>
-            <button
-              onClick={() => setShowCookieModal(true)}
-              className="hover:text-udemy-purple transition"
-            >
-              Cookies
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Modals */}
-      <PrivacyPolicyModal
-        isOpen={showPolicyModal}
-        onClose={() => setShowPolicyModal(false)}
-      />
-      <TermsOfServiceModal
-        isOpen={showTermsModal}
-        onClose={() => setShowTermsModal(false)}
-      />
-      <CookiePolicyModal
-        isOpen={showCookieModal}
-        onClose={() => setShowCookieModal(false)}
-      />
-    </footer>
-  );
-};
-
-export default Footer;
diff --git a/app/components/hero.jsx b/app/components/hero.jsx
deleted file mode 100755
index 32c54727c..000000000
--- a/app/components/hero.jsx
+++ /dev/null
@@ -1,282 +0,0 @@
-"use client";
-import React, { useEffect, useState } from "react";
-import Link from "next/link";
-import { event } from "@/lib/gtag";
-
-const TOPICS = [
-  { label: "Sorting Algorithms", color: "#a435f0", bg: "#faf5ff" },
-  { label: "Binary Search", color: "#2563eb", bg: "#eff6ff" },
-  { label: "Graph Traversal", color: "#059669", bg: "#f0fdf4" },
-  { label: "Linked Lists", color: "#d97706", bg: "#fffbeb" },
-  { label: "Dynamic Programming", color: "#dc2626", bg: "#fef2f2" },
-  { label: "Stack & Queue", color: "#7c3aed", bg: "#f5f3ff" },
-];
-
-const HeroSection = () => {
-  const [index, setIndex] = useState(0);
-  const [visible, setVisible] = useState(true);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setVisible(false);
-      setTimeout(() => {
-        setIndex((i) => (i + 1) % TOPICS.length);
-        setVisible(true);
-      }, 350);
-    }, 2200);
-    return () => clearInterval(interval);
-  }, []);
-
-  const handleStart = () => {
-    event({
-      action: "click_start_visualizing",
-      category: "Hero",
-      label: "Start Visualizing Button",
-    });
-  };
-
-  return (
-    <main
-      className="bg-white dark:bg-[#1c1d1f]"
-      style={{ fontFamily: "'Source Sans 3', sans-serif" }}
-    >
-      <section className="min-h-[calc(100vh-72px)] flex items-center justify-center px-5 py-20 relative overflow-hidden">
-        <div className="relative z-10 w-full max-w-[1100px] mx-auto flex flex-col lg:flex-row items-center gap-16 lg:gap-24">
-          {/* ══ LEFT — text ══ */}
-          <div className="flex-1 flex flex-col items-center lg:items-start text-center lg:text-left space-y-7">
-            {/* headline */}
-            <h1
-              className="text-[2.8rem] sm:text-[3.5rem] lg:text-[4rem] font-extrabold leading-[1.1] tracking-tight text-[#1c1d1f] dark:text-[#f7f9fa]"
-              style={{
-                fontFamily: "'Inter', sans-serif",
-                letterSpacing: "-0.03em",
-              }}
-            >
-              The smartest way
-              <br />
-              to learn DSA — <span className="text-[#a435f0]">visually.</span>
-            </h1>
-
-            {/* animated topic pill */}
-            <div className="flex items-center gap-3 h-10">
-              <span
-                className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-[14px] font-bold transition-all duration-300"
-                style={{
-                  background: visible ? TOPICS[index].bg : "transparent",
-                  color: visible ? TOPICS[index].color : "transparent",
-                  opacity: visible ? 1 : 0,
-                  transform: visible ? "translateY(0px)" : "translateY(6px)",
-                  border: `1.5px solid ${visible ? TOPICS[index].color + "33" : "transparent"}`,
-                }}
-              >
-                <span
-                  className="w-2 h-2 rounded-full flex-shrink-0"
-                  style={{ background: TOPICS[index].color }}
-                />
-                {TOPICS[index].label}
-              </span>
-            </div>
-
-            {/* CTAs */}
-            <div className="flex flex-col sm:flex-row items-center gap-3 pt-1">
-              <Link
-                href="/visualizer"
-                onClick={handleStart}
-                className="group inline-flex items-center gap-2 h-[52px] px-8 rounded-full bg-[#1a1a1a] dark:bg-white text-white dark:text-[#1a1a1a] text-[15px] font-bold hover:bg-[#a435f0] dark:hover:bg-[#a435f0] dark:hover:text-white active:scale-95 transition-all duration-200"
-              >
-                Start Visualizing
-                <svg
-                  className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-200"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth={2.5}
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M14 5l7 7m0 0l-7 7m7-7H3"
-                  />
-                </svg>
-              </Link>
-
-              <Link
-                href="/blogs"
-                className="inline-flex items-center gap-2 h-[52px] px-8 rounded-full border-2 border-[#1a1a1a] dark:border-[#f7f9fa] text-[#1a1a1a] dark:text-[#f7f9fa] text-[15px] font-bold hover:bg-[#1a1a1a] hover:text-white dark:hover:bg-white dark:hover:text-[#1a1a1a] transition-all duration-200"
-              >
-                Read Blogs
-              </Link>
-            </div>
-          </div>
-
-          {/* ══ RIGHT — DSA visual card ══ */}
-          <div className="flex-shrink-0 flex items-center justify-center w-full lg:w-auto">
-            <div className="relative w-full max-w-[460px]">
-              {/* ── main card: code editor window ── */}
-              <div className="rounded-2xl border border-[#d1d7dc] dark:border-[#3e4143] bg-[#1c1d1f] shadow-2xl overflow-hidden">
-                {/* title bar */}
-                <div className="flex items-center gap-2 px-4 py-3 bg-[#2d2f31] border-b border-[#3e4143]">
-                  <span className="w-3 h-3 rounded-full bg-[#ff5f57]" />
-                  <span className="w-3 h-3 rounded-full bg-[#febc2e]" />
-                  <span className="w-3 h-3 rounded-full bg-[#28c840]" />
-                  <span className="ml-3 text-[12px] text-[#9e9e9e] font-mono">
-                    binarySearch.js
-                  </span>
-                </div>
-
-                {/* code body */}
-                <div className="px-5 py-5 font-mono text-[13px] leading-[1.85] select-none">
-                  <div>
-                    <span className="text-[#c792ea]">function</span>{" "}
-                    <span className="text-[#82aaff]">binarySearch</span>
-                    <span className="text-[#f7f9fa]">(arr, target) {"{"}</span>
-                  </div>
-                  <div className="pl-5">
-                    <span className="text-[#c792ea]">let</span>{" "}
-                    <span className="text-[#f78c6c]">left</span>{" "}
-                    <span className="text-[#89ddff]">=</span>{" "}
-                    <span className="text-[#f78c6c]">0</span>
-                    <span className="text-[#f7f9fa]">,</span>{" "}
-                    <span className="text-[#f78c6c]">right</span>{" "}
-                    <span className="text-[#89ddff]">=</span>{" "}
-                    <span className="text-[#f7f9fa]">arr.length</span>{" "}
-                    <span className="text-[#89ddff]">-</span>{" "}
-                    <span className="text-[#f78c6c]">1</span>
-                    <span className="text-[#f7f9fa]">;</span>
-                  </div>
-                  <div className="pl-5 mt-1">
-                    <span className="text-[#c792ea]">while</span>{" "}
-                    <span className="text-[#f7f9fa]">(left</span>{" "}
-                    <span className="text-[#89ddff]">&lt;=</span>{" "}
-                    <span className="text-[#f7f9fa]">right) {"{"}</span>
-                  </div>
-                  <div className="pl-10">
-                    <span className="text-[#c792ea]">const</span>{" "}
-                    <span className="text-[#f78c6c]">mid</span>{" "}
-                    <span className="text-[#89ddff]">=</span>{" "}
-                    <span className="text-[#f7f9fa]">Math.floor((left</span>{" "}
-                    <span className="text-[#89ddff]">+</span>{" "}
-                    <span className="text-[#f7f9fa]">right)</span>{" "}
-                    <span className="text-[#89ddff]">/</span>{" "}
-                    <span className="text-[#f78c6c]">2</span>
-                    <span className="text-[#f7f9fa]">);</span>
-                  </div>
-                  <div className="pl-10 bg-[#a435f0]/20 rounded px-2 -mx-2">
-                    <span className="text-[#c792ea]">if</span>{" "}
-                    <span className="text-[#f7f9fa]">(arr[mid]</span>{" "}
-                    <span className="text-[#89ddff]">===</span>{" "}
-                    <span className="text-[#f7f9fa]">target)</span>{" "}
-                    <span className="text-[#c792ea]">return</span>{" "}
-                    <span className="text-[#f78c6c]">mid</span>
-                    <span className="text-[#f7f9fa]">;</span>
-                  </div>
-                  <div className="pl-10">
-                    <span className="text-[#c792ea]">else if</span>{" "}
-                    <span className="text-[#f7f9fa]">(arr[mid]</span>{" "}
-                    <span className="text-[#89ddff]">&lt;</span>{" "}
-                    <span className="text-[#f7f9fa]">target) left</span>{" "}
-                    <span className="text-[#89ddff]">=</span>{" "}
-                    <span className="text-[#f7f9fa]">mid</span>{" "}
-                    <span className="text-[#89ddff]">+</span>{" "}
-                    <span className="text-[#f78c6c]">1</span>
-                    <span className="text-[#f7f9fa]">;</span>
-                  </div>
-                  <div className="pl-10">
-                    <span className="text-[#c792ea]">else</span>{" "}
-                    <span className="text-[#f7f9fa]">right</span>{" "}
-                    <span className="text-[#89ddff]">=</span>{" "}
-                    <span className="text-[#f7f9fa]">mid</span>{" "}
-                    <span className="text-[#89ddff]">-</span>{" "}
-                    <span className="text-[#f78c6c]">1</span>
-                    <span className="text-[#f7f9fa]">;</span>
-                  </div>
-                  <div className="pl-5">
-                    <span className="text-[#f7f9fa]">{"}"}</span>
-                  </div>
-                  <div className="pl-5">
-                    <span className="text-[#c792ea]">return</span>{" "}
-                    <span className="text-[#f78c6c]">-1</span>
-                    <span className="text-[#f7f9fa]">;</span>
-                  </div>
-                  <div>
-                    <span className="text-[#f7f9fa]">{"}"}</span>
-                  </div>
-                </div>
-
-                {/* visualizer strip */}
-                <div className="px-5 pb-5">
-                  <div className="rounded-lg bg-[#2d2f31] border border-[#3e4143] p-4">
-                    <p className="text-[11px] text-[#9e9e9e] font-mono mb-3 uppercase tracking-wider">
-                      Visualization — step 2 of 4
-                    </p>
-                    {/* array bars */}
-                    <div className="flex items-end gap-1.5 h-[60px]">
-                      {[2, 5, 8, 12, 16, 23, 38, 45, 56, 72].map((v, i) => (
-                        <div
-                          key={i}
-                          className="flex-1 flex flex-col items-center gap-1"
-                        >
-                          <div
-                            className="w-full rounded-sm transition-all"
-                            style={{
-                              height: `${(v / 72) * 52}px`,
-                              background:
-                                i === 5
-                                  ? "#a435f0" // mid — purple
-                                  : i >= 5
-                                    ? "#3e4143" // right half — dimmed
-                                    : "#6a6f73", // left half
-                            }}
-                          />
-                          <span className="text-[9px] text-[#9e9e9e] font-mono">
-                            {v}
-                          </span>
-                        </div>
-                      ))}
-                    </div>
-                    {/* legend */}
-                    <div className="flex items-center gap-4 mt-3">
-                      <span className="flex items-center gap-1.5 text-[11px] text-[#9e9e9e]">
-                        <span className="w-2.5 h-2.5 rounded-sm bg-[#a435f0]" />{" "}
-                        mid
-                      </span>
-                      <span className="flex items-center gap-1.5 text-[11px] text-[#9e9e9e]">
-                        <span className="w-2.5 h-2.5 rounded-sm bg-[#6a6f73]" />{" "}
-                        active
-                      </span>
-                      <span className="flex items-center gap-1.5 text-[11px] text-[#9e9e9e]">
-                        <span className="w-2.5 h-2.5 rounded-sm bg-[#3e4143]" />{" "}
-                        eliminated
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* ── floating badge top-right ── */}
-              <div className="absolute -top-4 -right-4 flex items-center gap-2 bg-white dark:bg-[#2d2f31] border border-[#d1d7dc] dark:border-[#3e4143] rounded-full pl-2.5 pr-4 py-2 shadow-xl text-[13px] font-semibold text-[#1c1d1f] dark:text-[#f7f9fa]">
-                <span className="w-7 h-7 rounded-full bg-[#a435f0] flex items-center justify-center text-white text-[11px] font-bold">
-                  O
-                </span>
-                O(log n)
-              </div>
-
-              {/* ── floating badge bottom-left ── */}
-              <div className="absolute -bottom-4 -left-4 flex items-center gap-2 bg-white dark:bg-[#2d2f31] border border-[#d1d7dc] dark:border-[#3e4143] rounded-full pl-2.5 pr-4 py-2 shadow-xl text-[13px] font-semibold text-[#1c1d1f] dark:text-[#f7f9fa]">
-                <span className="w-7 h-7 rounded-full bg-[#28c840] flex items-center justify-center text-white text-[11px] font-bold">
-                  ✓
-                </span>
-                Found at index 5
-              </div>
-
-              {/* glow */}
-              <div className="absolute inset-0 rounded-2xl bg-[#a435f0]/8 blur-3xl -z-10 scale-110" />
-            </div>
-          </div>
-        </div>
-      </section>
-    </main>
-  );
-};
-
-export default HeroSection;
diff --git a/app/components/navbar.jsx b/app/components/navbar.jsx
deleted file mode 100644
index 4cb5ea563..000000000
--- a/app/components/navbar.jsx
+++ /dev/null
@@ -1,301 +0,0 @@
-"use client";
-import Link from "next/link";
-import { useState, useEffect, useRef } from "react";
-import { useRouter, usePathname } from "next/navigation";
-import { useUser } from "@/app/contexts/UserContext";
-import { supabase } from "@/lib/supabase";
-
-const NAV_LINKS = [];
-
-export default function Navbar() {
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [userMenuOpen, setUserMenuOpen] = useState(false);
-  const [scrolled, setScrolled] = useState(false);
-  const [theme, setTheme] = useState("light");
-  const pathname = usePathname();
-  const router = useRouter();
-  const { user, setUser } = useUser();
-  const userRef = useRef(null);
-
-  useEffect(() => {
-    const savedTheme = localStorage.getItem("theme") || "light";
-    setTheme(savedTheme);
-    document.documentElement.classList.toggle("dark", savedTheme === "dark");
-  }, []);
-
-  const toggleTheme = () => {
-    const newTheme = theme === "light" ? "dark" : "light";
-    setTheme(newTheme);
-    localStorage.setItem("theme", newTheme);
-    document.documentElement.classList.toggle("dark", newTheme === "dark");
-  };
-
-  useEffect(() => {
-    const handleScroll = () => setScrolled(window.scrollY > 4);
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-
-  useEffect(() => {
-    const fn = (e) => {
-      if (userRef.current && !userRef.current.contains(e.target))
-        setUserMenuOpen(false);
-    };
-    document.addEventListener("mousedown", fn);
-    return () => document.removeEventListener("mousedown", fn);
-  }, []);
-
-  const handleLogout = async () => {
-    await supabase.auth.signOut();
-    setUser(null);
-    router.push("/");
-    setMenuOpen(false);
-  };
-
-  const isActive = (href) => {
-    if (href.startsWith("http")) return false;
-    if (href.startsWith("/#")) return pathname === "/";
-    return pathname === href || pathname.startsWith(href + "/");
-  };
-
-  return (
-    <>
-      <nav
-        className={`fixed top-0 left-0 right-0 z-[9998] h-[72px] bg-white dark:bg-[#0f0f0f] flex items-center transition-all duration-200 ${
-          scrolled
-            ? "border-b border-[#e5e7eb] dark:border-[#222] shadow-sm"
-            : "border-b border-transparent"
-        }`}
-        style={{ fontFamily: "'Inter', 'Source Sans 3', sans-serif" }}
-      >
-        <div className="w-full max-w-[1200px] mx-auto px-8 flex items-center justify-between h-full">
-          {/* Logo */}
-          <Link
-            href="/"
-            className="text-[26px] font-black text-[#1a1a1a] dark:text-white tracking-tight hover:opacity-75 transition-opacity"
-            style={{ fontFamily: "'Inter', 'Source Sans 3', sans-serif", letterSpacing: '-0.03em' }}
-          >
-            Algo<span className="text-[#a435f0]">Buddy</span>
-          </Link>
-
-          {/* Desktop Nav Links */}
-          <div className="hidden md:flex items-center gap-7">
-            {NAV_LINKS.map((l) => (
-              <Link
-                key={l.href}
-                href={l.href}
-                className={`text-[15px] font-medium transition-colors duration-150 ${
-                  isActive(l.href)
-                    ? "text-[#1a1a1a] dark:text-white font-semibold"
-                    : "text-[#4b5563] dark:text-[#a3a3a3] hover:text-[#1a1a1a] dark:hover:text-white"
-                }`}
-              >
-                {l.label}
-              </Link>
-            ))}
-          </div>
-
-          {/* Right: auth + theme toggle */}
-          <div className="hidden md:flex items-center gap-3">
-            {user ? (
-              <div ref={userRef} className="relative">
-                <button
-                  onClick={() => setUserMenuOpen((o) => !o)}
-                  className="flex items-center gap-2 rounded-full px-3 py-1.5 border border-[#e5e7eb] dark:border-[#333] hover:border-[#a435f0] transition-colors"
-                >
-                  <img
-                    src={`https://api.dicebear.com/8.x/initials/svg?seed=${encodeURIComponent(user.email)}`}
-                    alt="avatar"
-                    className="w-7 h-7 rounded-full"
-                  />
-                  <svg
-                    className="w-3.5 h-3.5 text-[#6b7280]"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth={2.5}
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      d="M19 9l-7 7-7-7"
-                    />
-                  </svg>
-                </button>
-                {userMenuOpen && (
-                  <div className="absolute right-0 top-[calc(100%+8px)] w-52 bg-white dark:bg-[#1a1a1a] border border-[#e5e7eb] dark:border-[#333] shadow-xl rounded-xl z-[9999] overflow-hidden">
-                    <div className="px-4 py-3 border-b border-[#f3f4f6] dark:border-[#222]">
-                      <p className="text-[13px] text-[#6b7280] dark:text-[#737373] truncate">
-                        {user.email}
-                      </p>
-                    </div>
-                    <Link
-                      href="/dashboard"
-                      onClick={() => setUserMenuOpen(false)}
-                      className="flex items-center gap-2.5 px-4 py-3 text-[14px] font-medium text-[#1a1a1a] dark:text-[#f5f5f5] hover:bg-[#f9fafb] dark:hover:bg-[#222] transition-colors"
-                    >
-                      <svg
-                        className="w-4 h-4 text-[#6b7280]"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth={2}
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-                        />
-                      </svg>
-                      My Dashboard
-                    </Link>
-                    <button
-                      onClick={() => {
-                        handleLogout();
-                        setUserMenuOpen(false);
-                      }}
-                      className="w-full flex items-center gap-2.5 px-4 py-3 text-[14px] font-medium text-[#dc2626] hover:bg-[#fef2f2] dark:hover:bg-[#2a1515] transition-colors border-t border-[#f3f4f6] dark:border-[#222]"
-                    >
-                      <svg
-                        className="w-4 h-4"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth={2}
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-                        />
-                      </svg>
-                      Log out
-                    </button>
-                  </div>
-                )}
-              </div>
-            ) : (
-              <Link
-                href="/login"
-                className="h-[42px] px-7 flex items-center text-[15px] font-bold text-white bg-[#1a1a1a] dark:bg-white dark:text-[#1a1a1a] rounded-full hover:bg-[#a435f0] dark:hover:bg-[#a435f0] dark:hover:text-white transition-all duration-150"
-              >
-                Sign in
-              </Link>
-            )}
-
-            {/* Dark mode toggle */}
-            <button
-              onClick={toggleTheme}
-              aria-label="Toggle theme"
-              className="w-9 h-9 flex items-center justify-center rounded-full text-[#4b5563] dark:text-[#a3a3a3] hover:bg-[#f3f4f6] dark:hover:bg-[#222] transition-colors"
-            >
-              {theme === "light" ? (
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
-                </svg>
-              ) : (
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
-                  <circle cx="12" cy="12" r="5" /><path strokeLinecap="round" strokeLinejoin="round" d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
-                </svg>
-              )}
-            </button>
-          </div>
-
-          {/* Mobile Hamburger */}
-          <button
-            onClick={() => setMenuOpen((o) => !o)}
-            aria-label="Toggle menu"
-            className="md:hidden w-10 h-10 flex items-center justify-center text-[#4b5563] dark:text-[#a3a3a3] rounded-lg hover:bg-[#f3f4f6] dark:hover:bg-[#222] transition-colors"
-          >
-            {menuOpen ? (
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth={2}
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            ) : (
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth={2}
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M4 6h16M4 12h16M4 18h16"
-                />
-              </svg>
-            )}
-          </button>
-        </div>
-      </nav>
-
-      {/* Mobile Drawer */}
-      {menuOpen && (
-        <div
-          className="fixed top-[72px] left-0 right-0 bottom-0 z-[9997] bg-white dark:bg-[#0f0f0f] overflow-y-auto border-t border-[#e5e7eb] dark:border-[#222]"
-          style={{ fontFamily: "'Inter', 'Source Sans 3', sans-serif" }}
-        >
-          <div className="py-2">
-            {NAV_LINKS.map((l) => (
-              <Link
-                key={l.href}
-                href={l.href}
-                onClick={() => setMenuOpen(false)}
-                className={`block px-6 py-3.5 text-[16px] font-medium transition-colors ${
-                  isActive(l.href)
-                    ? "text-[#a435f0] bg-[#faf5ff] dark:bg-[#1a0a2e]"
-                    : "text-[#374151] dark:text-[#a3a3a3] hover:bg-[#f9fafb] dark:hover:bg-[#1a1a1a] hover:text-[#1a1a1a] dark:hover:text-white"
-                }`}
-              >
-                {l.label}
-              </Link>
-            ))}
-          </div>
-          <div className="px-6 py-4 border-t border-[#e5e7eb] dark:border-[#222]">
-            {user ? (
-              <div className="flex flex-col gap-2">
-                <p className="text-[13px] text-[#6b7280] dark:text-[#737373] truncate pb-1">
-                  {user.email}
-                </p>
-                <Link
-                  href="/dashboard"
-                  onClick={() => setMenuOpen(false)}
-                  className="h-[44px] flex items-center justify-center text-[15px] font-semibold border border-[#d1d5db] dark:border-[#444] rounded-full text-[#1a1a1a] dark:text-white hover:border-[#a435f0] hover:text-[#a435f0] transition-all"
-                >
-                  My Dashboard
-                </Link>
-                <button
-                  onClick={handleLogout}
-                  className="h-[44px] text-[15px] font-semibold text-[#dc2626] border border-[#fecaca] rounded-full hover:bg-[#fef2f2] transition-all"
-                >
-                  Log out
-                </button>
-              </div>
-            ) : (
-              <Link
-                href="/login"
-                onClick={() => setMenuOpen(false)}
-                className="h-[44px] flex items-center justify-center text-[15px] font-semibold text-[#1a1a1a] dark:text-white border border-[#d1d5db] dark:border-[#444] rounded-full hover:border-[#a435f0] hover:text-[#a435f0] transition-all"
-              >
-                Sign in
-              </Link>
-            )}
-          </div>
-        </div>
-      )}
-
-      <div className="h-[72px]" />
-    </>
-  );
-}
diff --git a/app/components/navbarinner.jsx b/app/components/navbarinner.jsx
deleted file mode 100644
index 4cb5ea563..000000000
--- a/app/components/navbarinner.jsx
+++ /dev/null
@@ -1,301 +0,0 @@
-"use client";
-import Link from "next/link";
-import { useState, useEffect, useRef } from "react";
-import { useRouter, usePathname } from "next/navigation";
-import { useUser } from "@/app/contexts/UserContext";
-import { supabase } from "@/lib/supabase";
-
-const NAV_LINKS = [];
-
-export default function Navbar() {
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [userMenuOpen, setUserMenuOpen] = useState(false);
-  const [scrolled, setScrolled] = useState(false);
-  const [theme, setTheme] = useState("light");
-  const pathname = usePathname();
-  const router = useRouter();
-  const { user, setUser } = useUser();
-  const userRef = useRef(null);
-
-  useEffect(() => {
-    const savedTheme = localStorage.getItem("theme") || "light";
-    setTheme(savedTheme);
-    document.documentElement.classList.toggle("dark", savedTheme === "dark");
-  }, []);
-
-  const toggleTheme = () => {
-    const newTheme = theme === "light" ? "dark" : "light";
-    setTheme(newTheme);
-    localStorage.setItem("theme", newTheme);
-    document.documentElement.classList.toggle("dark", newTheme === "dark");
-  };
-
-  useEffect(() => {
-    const handleScroll = () => setScrolled(window.scrollY > 4);
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-
-  useEffect(() => {
-    const fn = (e) => {
-      if (userRef.current && !userRef.current.contains(e.target))
-        setUserMenuOpen(false);
-    };
-    document.addEventListener("mousedown", fn);
-    return () => document.removeEventListener("mousedown", fn);
-  }, []);
-
-  const handleLogout = async () => {
-    await supabase.auth.signOut();
-    setUser(null);
-    router.push("/");
-    setMenuOpen(false);
-  };
-
-  const isActive = (href) => {
-    if (href.startsWith("http")) return false;
-    if (href.startsWith("/#")) return pathname === "/";
-    return pathname === href || pathname.startsWith(href + "/");
-  };
-
-  return (
-    <>
-      <nav
-        className={`fixed top-0 left-0 right-0 z-[9998] h-[72px] bg-white dark:bg-[#0f0f0f] flex items-center transition-all duration-200 ${
-          scrolled
-            ? "border-b border-[#e5e7eb] dark:border-[#222] shadow-sm"
-            : "border-b border-transparent"
-        }`}
-        style={{ fontFamily: "'Inter', 'Source Sans 3', sans-serif" }}
-      >
-        <div className="w-full max-w-[1200px] mx-auto px-8 flex items-center justify-between h-full">
-          {/* Logo */}
-          <Link
-            href="/"
-            className="text-[26px] font-black text-[#1a1a1a] dark:text-white tracking-tight hover:opacity-75 transition-opacity"
-            style={{ fontFamily: "'Inter', 'Source Sans 3', sans-serif", letterSpacing: '-0.03em' }}
-          >
-            Algo<span className="text-[#a435f0]">Buddy</span>
-          </Link>
-
-          {/* Desktop Nav Links */}
-          <div className="hidden md:flex items-center gap-7">
-            {NAV_LINKS.map((l) => (
-              <Link
-                key={l.href}
-                href={l.href}
-                className={`text-[15px] font-medium transition-colors duration-150 ${
-                  isActive(l.href)
-                    ? "text-[#1a1a1a] dark:text-white font-semibold"
-                    : "text-[#4b5563] dark:text-[#a3a3a3] hover:text-[#1a1a1a] dark:hover:text-white"
-                }`}
-              >
-                {l.label}
-              </Link>
-            ))}
-          </div>
-
-          {/* Right: auth + theme toggle */}
-          <div className="hidden md:flex items-center gap-3">
-            {user ? (
-              <div ref={userRef} className="relative">
-                <button
-                  onClick={() => setUserMenuOpen((o) => !o)}
-                  className="flex items-center gap-2 rounded-full px-3 py-1.5 border border-[#e5e7eb] dark:border-[#333] hover:border-[#a435f0] transition-colors"
-                >
-                  <img
-                    src={`https://api.dicebear.com/8.x/initials/svg?seed=${encodeURIComponent(user.email)}`}
-                    alt="avatar"
-                    className="w-7 h-7 rounded-full"
-                  />
-                  <svg
-                    className="w-3.5 h-3.5 text-[#6b7280]"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth={2.5}
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      d="M19 9l-7 7-7-7"
-                    />
-                  </svg>
-                </button>
-                {userMenuOpen && (
-                  <div className="absolute right-0 top-[calc(100%+8px)] w-52 bg-white dark:bg-[#1a1a1a] border border-[#e5e7eb] dark:border-[#333] shadow-xl rounded-xl z-[9999] overflow-hidden">
-                    <div className="px-4 py-3 border-b border-[#f3f4f6] dark:border-[#222]">
-                      <p className="text-[13px] text-[#6b7280] dark:text-[#737373] truncate">
-                        {user.email}
-                      </p>
-                    </div>
-                    <Link
-                      href="/dashboard"
-                      onClick={() => setUserMenuOpen(false)}
-                      className="flex items-center gap-2.5 px-4 py-3 text-[14px] font-medium text-[#1a1a1a] dark:text-[#f5f5f5] hover:bg-[#f9fafb] dark:hover:bg-[#222] transition-colors"
-                    >
-                      <svg
-                        className="w-4 h-4 text-[#6b7280]"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth={2}
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-                        />
-                      </svg>
-                      My Dashboard
-                    </Link>
-                    <button
-                      onClick={() => {
-                        handleLogout();
-                        setUserMenuOpen(false);
-                      }}
-                      className="w-full flex items-center gap-2.5 px-4 py-3 text-[14px] font-medium text-[#dc2626] hover:bg-[#fef2f2] dark:hover:bg-[#2a1515] transition-colors border-t border-[#f3f4f6] dark:border-[#222]"
-                    >
-                      <svg
-                        className="w-4 h-4"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth={2}
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-                        />
-                      </svg>
-                      Log out
-                    </button>
-                  </div>
-                )}
-              </div>
-            ) : (
-              <Link
-                href="/login"
-                className="h-[42px] px-7 flex items-center text-[15px] font-bold text-white bg-[#1a1a1a] dark:bg-white dark:text-[#1a1a1a] rounded-full hover:bg-[#a435f0] dark:hover:bg-[#a435f0] dark:hover:text-white transition-all duration-150"
-              >
-                Sign in
-              </Link>
-            )}
-
-            {/* Dark mode toggle */}
-            <button
-              onClick={toggleTheme}
-              aria-label="Toggle theme"
-              className="w-9 h-9 flex items-center justify-center rounded-full text-[#4b5563] dark:text-[#a3a3a3] hover:bg-[#f3f4f6] dark:hover:bg-[#222] transition-colors"
-            >
-              {theme === "light" ? (
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
-                </svg>
-              ) : (
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
-                  <circle cx="12" cy="12" r="5" /><path strokeLinecap="round" strokeLinejoin="round" d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
-                </svg>
-              )}
-            </button>
-          </div>
-
-          {/* Mobile Hamburger */}
-          <button
-            onClick={() => setMenuOpen((o) => !o)}
-            aria-label="Toggle menu"
-            className="md:hidden w-10 h-10 flex items-center justify-center text-[#4b5563] dark:text-[#a3a3a3] rounded-lg hover:bg-[#f3f4f6] dark:hover:bg-[#222] transition-colors"
-          >
-            {menuOpen ? (
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth={2}
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            ) : (
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth={2}
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M4 6h16M4 12h16M4 18h16"
-                />
-              </svg>
-            )}
-          </button>
-        </div>
-      </nav>
-
-      {/* Mobile Drawer */}
-      {menuOpen && (
-        <div
-          className="fixed top-[72px] left-0 right-0 bottom-0 z-[9997] bg-white dark:bg-[#0f0f0f] overflow-y-auto border-t border-[#e5e7eb] dark:border-[#222]"
-          style={{ fontFamily: "'Inter', 'Source Sans 3', sans-serif" }}
-        >
-          <div className="py-2">
-            {NAV_LINKS.map((l) => (
-              <Link
-                key={l.href}
-                href={l.href}
-                onClick={() => setMenuOpen(false)}
-                className={`block px-6 py-3.5 text-[16px] font-medium transition-colors ${
-                  isActive(l.href)
-                    ? "text-[#a435f0] bg-[#faf5ff] dark:bg-[#1a0a2e]"
-                    : "text-[#374151] dark:text-[#a3a3a3] hover:bg-[#f9fafb] dark:hover:bg-[#1a1a1a] hover:text-[#1a1a1a] dark:hover:text-white"
-                }`}
-              >
-                {l.label}
-              </Link>
-            ))}
-          </div>
-          <div className="px-6 py-4 border-t border-[#e5e7eb] dark:border-[#222]">
-            {user ? (
-              <div className="flex flex-col gap-2">
-                <p className="text-[13px] text-[#6b7280] dark:text-[#737373] truncate pb-1">
-                  {user.email}
-                </p>
-                <Link
-                  href="/dashboard"
-                  onClick={() => setMenuOpen(false)}
-                  className="h-[44px] flex items-center justify-center text-[15px] font-semibold border border-[#d1d5db] dark:border-[#444] rounded-full text-[#1a1a1a] dark:text-white hover:border-[#a435f0] hover:text-[#a435f0] transition-all"
-                >
-                  My Dashboard
-                </Link>
-                <button
-                  onClick={handleLogout}
-                  className="h-[44px] text-[15px] font-semibold text-[#dc2626] border border-[#fecaca] rounded-full hover:bg-[#fef2f2] transition-all"
-                >
-                  Log out
-                </button>
-              </div>
-            ) : (
-              <Link
-                href="/login"
-                onClick={() => setMenuOpen(false)}
-                className="h-[44px] flex items-center justify-center text-[15px] font-semibold text-[#1a1a1a] dark:text-white border border-[#d1d5db] dark:border-[#444] rounded-full hover:border-[#a435f0] hover:text-[#a435f0] transition-all"
-              >
-                Sign in
-              </Link>
-            )}
-          </div>
-        </div>
-      )}
-
-      <div className="h-[72px]" />
-    </>
-  );
-}
diff --git a/app/components/termsOfServicesModal.jsx b/app/components/termsOfServicesModal.jsx
deleted file mode 100755
index 98b1bb4af..000000000
--- a/app/components/termsOfServicesModal.jsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import React, { useEffect } from "react";
-import { FiX } from "react-icons/fi";
-
-const termsSections = [
-  {
-    id: "1",
-    title: "Acceptance of Terms",
-    data: "By accessing and using this website, you accept and agree to be bound by the terms and provision of this agreement.",
-  },
-  {
-    id: "2",
-    title: "Use License",
-    points: [
-      "Permission is granted to temporarily use the materials on this website for personal, non-commercial transitory viewing only",
-      "This is the grant of a license, not a transfer of title",
-      "You may not modify or copy the materials, use them for any commercial purpose, or remove any copyright or proprietary notations",
-    ],
-  },
-  {
-    id: "3",
-    title: "User Responsibilities",
-    points: [
-      "Provide accurate and complete information when required",
-      "Maintain the confidentiality of your account credentials",
-      "Notify us immediately of any unauthorized use of your account",
-      "Use the service in compliance with all applicable laws and regulations",
-    ],
-  },
-  {
-    id: "4",
-    title: "Intellectual Property",
-    data: "All content, features, and functionality on this website, including but not limited to text, graphics, logos, and software, are the exclusive property of the company and are protected by international copyright, trademark, and other intellectual property laws.",
-  },
-  {
-    id: "5",
-    title: "Limitation of Liability",
-    data: "In no event shall the company, nor its directors, employees, partners, agents, suppliers, or affiliates, be liable for any indirect, incidental, special, consequential or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses.",
-  },
-  {
-    id: "6",
-    title: "Governing Law",
-    data: "These Terms shall be governed and construed in accordance with the laws of the applicable jurisdiction, without regard to its conflict of law provisions.",
-  },
-  {
-    id: "7",
-    title: "Changes to Terms",
-    data: "We reserve the right, at our sole discretion, to modify or replace these Terms at any time. By continuing to access or use our service after those revisions become effective, you agree to be bound by the revised terms.",
-  },
-  {
-    id: "8",
-    title: "Contact Information",
-    data: "If you have any questions about these Terms, please contact us at",
-    contact: "hello@algobuddy.in",
-  },
-];
-
-const TermsOfServiceModal = ({ isOpen, onClose }) => {
-  // Prevent body scroll when modal is open
-  useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "auto";
-    }
-    return () => {
-      document.body.style.overflow = "auto";
-    };
-  }, [isOpen]);
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      {/* Backdrop with fade-in animation */}
-      <div
-        className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm transition-opacity duration-300"
-        onClick={onClose}
-      />
-
-      {/* Modal container with slide-up animation */}
-      <div className="relative bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 max-w-3xl w-full rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 max-h-[90vh] flex flex-col">
-        {/* Header with close button */}
-        <div className="sticky top-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 p-4 flex justify-between items-center z-10">
-          <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-blue-400 bg-clip-text text-transparent">
-            Terms of Service
-          </h2>
-          <button
-            onClick={onClose}
-            className="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
-            aria-label="Close"
-          >
-            <FiX className="w-6 h-6" />
-          </button>
-        </div>
-
-        {/* Scrollable content */}
-        <div className="overflow-y-auto p-6">
-          <p className="mb-6 text-gray-600 dark:text-gray-300">
-            Please read these terms and conditions carefully before using our
-            website and services. Your access to and use of the service is
-            conditioned on your acceptance of and compliance with these terms.
-          </p>
-
-          {/* Terms sections */}
-          <div className="space-y-6">
-            <ul>
-              {termsSections.map((item, index) => (
-                <li key={index} className="mb-3">
-                  <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
-                    <div className="flex">
-                      <span className="w-6 h-6 font-poppins font-semibold bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center text-blue-600 dark:text-blue-400 mr-3">
-                        {item.id}
-                      </span>
-                      <h3 className="text-xl font-semibold mb-2 flex items-center">
-                        {item.title}
-                      </h3>
-                    </div>
-                    {item.points && (
-                      <ul className="space-y-2 text-gray-600 dark:text-gray-300 pl-9">
-                        {item.points.map((subitem, subindex) => (
-                          <li
-                            key={subindex}
-                            className="list-disc text-blue-500"
-                          >
-                            <span className="text-gray-600 dark:text-gray-300">
-                              {subitem}
-                            </span>
-                          </li>
-                        ))}
-                      </ul>
-                    )}
-                    <p className="text-gray-600 dark:text-gray-300 pl-9">
-                      {item.data}
-                    </p>
-                    {item.contact && (
-                      <span className="font-medium pl-9 text-blue-600 dark:text-blue-400">
-                        {item.contact}
-                      </span>
-                    )}
-                  </div>
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          <div className="mt-8 pt-4 border-t border-gray-200 dark:border-gray-700">
-            <p className="text-sm text-gray-500 dark:text-gray-400">
-              Last updated: May 17, 2025
-            </p>
-          </div>
-        </div>
-
-        {/* Footer with close button */}
-        <div className="sticky bottom-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 p-4 flex justify-end">
-          <button
-            onClick={onClose}
-            className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-300"
-          >
-            I Agree
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TermsOfServiceModal;
diff --git a/app/components/ui/ArticleActions.jsx b/app/components/ui/ArticleActions.jsx
deleted file mode 100755
index ac5ff61ef..000000000
--- a/app/components/ui/ArticleActions.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-"use client";
-import { useState } from "react";
-import { Copy, Share2, Check } from "lucide-react";
-
-export default function ArticleActions() {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(window.location.href);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy: ", err);
-    }
-  };
-
-  const handleShare = async () => {
-    if (navigator.share) {
-      try {
-        await navigator.share({
-          title: document.title,
-          url: window.location.href,
-        });
-      } catch (err) {
-        console.error("Share failed: ", err);
-      }
-    } else {
-      handleCopy();
-    }
-  };
-
-  return (
-    <div className="flex gap-4 mt-6">
-      <button
-        onClick={handleCopy}
-        className="flex items-center gap-1 rounded-md border px-3 py-1.5 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition"
-      >
-        {copied ? (
-          <Check className="w-4 h-4 text-green-600" />
-        ) : (
-          <Copy className="w-4 h-4" />
-        )}
-        <span>{copied ? "Copied!" : "Copy Link"}</span>
-      </button>
-      <button
-        onClick={handleShare}
-        className="flex items-center gap-1 rounded-md border px-3 py-1.5 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition"
-      >
-        <Share2 className="w-4 h-4" />
-        <span>Share</span>
-      </button>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/app/components/ui/Breadcrumbs.jsx b/app/components/ui/Breadcrumbs.jsx
deleted file mode 100755
index fa7a8baf7..000000000
--- a/app/components/ui/Breadcrumbs.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-"use client";
-import { ChevronRight } from "lucide-react";
-import Link from "next/link";
-
-export default function Breadcrumbs({ paths }) {
-  return (
-    <nav className="flex items-center text-sm text-gray-600 dark:text-gray-300" aria-label="Breadcrumb">
-      {paths.map((path, index) => (
-        <div key={index} className="flex items-center">
-          <Link
-            href={path.href}
-            className="hover:text-black dark:hover:text-white transition-colors"
-          >
-            {path.name}
-          </Link>
-          {index !== paths.length - 1 && (
-            <ChevronRight className="mx-2 h-4 w-4 text-gray-400 dark:text-gray-500" />
-          )}
-        </div>
-      ))}
-    </nav>
-  );
-}
\ No newline at end of file
diff --git a/app/components/ui/ClientLayoutWrapper.jsx b/app/components/ui/ClientLayoutWrapper.jsx
deleted file mode 100755
index 9cc346876..000000000
--- a/app/components/ui/ClientLayoutWrapper.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-"use client";
-import { Toaster } from "react-hot-toast";
-
-export default function ClientLayoutWrapper({ children }) {
-  return (
-    <>
-      <Toaster position="top-right" />
-      {children}
-    </>
-  );
-}
\ No newline at end of file
diff --git a/app/components/ui/ModuleCard.jsx b/app/components/ui/ModuleCard.jsx
deleted file mode 100755
index de9e3a17a..000000000
--- a/app/components/ui/ModuleCard.jsx
+++ /dev/null
@@ -1,119 +0,0 @@
-"use client";
-import { useState } from "react";
-import { supabase } from "@/lib/supabase";
-import { useUser } from "@/app/contexts/UserContext";
-import { toast } from "react-hot-toast";
-import { TriangleAlert } from "lucide-react";
-import { useEffect } from "react";
-
-
-export default function ModuleCard({ moduleId, description, initialDone }) {
-  const { user } = useUser();
-  const [isDone, setIsDone] = useState(initialDone);
-  
-  useEffect(() => {
-  const fetchUserProgress = async () => {
-    if (!user) return;
-
-    const { data, error } = await supabase
-      .from("user_progress")
-      .select("is_done")
-      .eq("user_id", user.id)
-      .eq("module_id", moduleId)
-      .single();
-
-    if (error) {
-      console.error("Error fetching user progress:", error);
-      return;
-    }
-
-    setIsDone(data?.is_done ?? false);
-  };
-
-  fetchUserProgress();
-}, [user, moduleId]);
-
-  async function toggleCompletion() {
-    if (!user) {
-      toast.custom((t) => (
-        <div className="max-w-sm w-full bg-neutral-100 dark:bg-zinc-800 border border-blue-500 rounded-lg shadow-xl p-4 flex flex-col gap-2">
-          <div className="flex items-center gap-2">
-            <TriangleAlert size={50} className="dark:text-yellow-500 text-red-500" />
-            <span className="text-sm text-gray-800 dark:text-gray-100">
-              You are in guest mode. Login or signup to track your progress.
-            </span>
-          </div>
-          <div className="flex justify-end gap-2 mt-2">
-            <button
-              onClick={() => {
-                window.location.href = "/login";
-                toast.dismiss(t.id);
-              }}
-              className="px-4 py-2 rounded-full font-medium bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 transition duration-300 shadow-md flex items-center gap-2"
-            >
-              Login/Signup
-            </button>
-            <button
-              onClick={() => toast.dismiss(t.id)}
-              className="px-4 py-2 rounded-full font-medium bg-neutral-100 hover:bg-neutral-200 dark:hover:bg-neutral-900 dark:bg-neutral-800 border border-blue-500 dark:text-white text-black transition duration-300 shadow-lg flex items-center"
-            >
-              Continue as Guest
-            </button>
-          </div>
-        </div>
-      ));
-      return;
-    }
-
-    try {
-      const { error } = await supabase
-        .from("user_progress")
-        .upsert(
-          {
-            user_id: user.id,
-            module_id: moduleId,
-            is_done: !isDone,
-            updated_at: new Date(),
-          },
-          { onConflict: ["user_id", "module_id"] }
-        );
-
-      if (error) {
-        console.error("Error updating progress:", error.message, error.details);
-        toast.error(`Failed to update progress: ${error.message}`);
-        return;
-      }
-
-      setIsDone(!isDone);
-      toast.success(isDone ? "Module marked as incomplete." : "Module marked as completed!");
-    } catch (err) {
-      console.error("Unexpected error during progress update:", err);
-      toast.error("Unexpected error. Please try again.");
-    }
-  }
-
-  return (
-    <div
-      className={`border border-gray-200 dark:border-gray-700 max-w-4xl mx-auto rounded-lg p-4 shadow-lg flex flex-col justify-between ${
-        isDone ? "bg-green-50 dark:bg-green-900/30" : "bg-white dark:bg-zinc-950"
-      }`}
-    >
-      <div className="my-4 px-4 flex items-center justify-between">
-        <div>
-          <h1 className="text-lg font-semibold text-gray-800 dark:text-gray-200">
-            Done With the Learning
-          </h1>
-          <p className="text-sm text-gray-500 dark:text-gray-400">{description}</p>
-        </div>
-        <input
-          type="checkbox"
-          checked={isDone}
-          onChange={toggleCompletion}
-          className={`w-6 h-6 rounded cursor-pointer transition duration-300 ${
-            isDone ? "accent-green-500 ring-2 ring-green-500" : "accent-blue-600"
-          }`}
-        />
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/app/components/ui/PushPop.jsx b/app/components/ui/PushPop.jsx
deleted file mode 100755
index 2ef0a98b6..000000000
--- a/app/components/ui/PushPop.jsx
+++ /dev/null
@@ -1,109 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-const PushPop = ({ stack, setStack, isAnimating, setIsAnimating, setMessage, setOperation }) => {
-  const [inputValue, setInputValue] = useState('');
-
-  // Push operation
-  const push = () => {
-    if (!inputValue.trim()) {
-      setMessage('Please enter a value');
-      return;
-    }
-
-    setIsAnimating(true);
-    setOperation(`Pushing "${inputValue}"...`);
-    
-    setTimeout(() => {
-      setStack(prev => [inputValue, ...prev]);
-      setOperation(null);
-      setMessage(`"${inputValue}" pushed to stack`);
-      setInputValue('');
-      setIsAnimating(false);
-    }, 1000);
-  };
-
-  // Pop operation
-  const pop = () => {
-    if (stack.length === 0) {
-      setMessage('Stack is empty!');
-      return;
-    }
-
-    setIsAnimating(true);
-    const poppedValue = stack[0];
-    setOperation(`Popping "${poppedValue}"...`);
-    
-    setTimeout(() => {
-      setStack(prev => prev.slice(1));
-      setOperation(null);
-      setMessage(`"${poppedValue}" popped from stack`);
-      setIsAnimating(false);
-    }, 1000);
-  };
-
-  // Peek operation
-  const peek = () => {
-    if (stack.length === 0) {
-      setMessage('Stack is empty!');
-      return;
-    }
-
-    setIsAnimating(true);
-    setOperation(`Peeking at "${stack[0]}"`);
-    
-    setTimeout(() => {
-      setOperation(null);
-      setMessage(`Top element is "${stack[0]}"`);
-      setIsAnimating(false);
-    }, 1000);
-  };
-
-  return (
-    <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md mb-4 border border-gray-200 dark:border-gray-700">
-      <div className="flex flex-col sm:flex-row gap-2 mb-4">
-        <input
-          type="text"
-          value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
-          placeholder="Enter value"
-          className="flex-1 p-2 border rounded dark:bg-neutral-900 focus:ring-2 focus:ring-blue-500"
-          disabled={isAnimating}
-        />
-        <button
-          onClick={push}
-          disabled={isAnimating}
-          className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded disabled:opacity-50 sm:w-auto w-full"
-        >
-          Push
-        </button>
-      </div>
-      <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
-        <button
-          onClick={pop}
-          disabled={isAnimating || stack.length === 0}
-          className="bg-green-500 text-black px-4 py-2 rounded disabled:opacity-50"
-        >
-          Pop
-        </button>
-        <button
-          onClick={peek}
-          disabled={isAnimating || stack.length === 0}
-          className="bg-amber-500 text-black px-4 py-2 rounded disabled:opacity-50"
-        >
-          Peek
-        </button>
-        <button
-          onClick={() => setStack([])}
-          className="bg-red-500 text-white px-4 py-2 rounded col-span-2 sm:col-span-1"
-          disabled={isAnimating}
-        >
-          Reset
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default PushPop;
\ No newline at end of file
diff --git a/app/components/ui/SearchBar.jsx b/app/components/ui/SearchBar.jsx
deleted file mode 100755
index 7c92a5101..000000000
--- a/app/components/ui/SearchBar.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-'use client';
-import { useState, useEffect } from 'react';
-
-const SearchBar = ({ sections, onSearchResults }) => {
-  const [searchQuery, setSearchQuery] = useState('');
-
-  const handleSearch = (e) => {
-    const query = e.target.value.toLowerCase();
-    setSearchQuery(query);
-
-    if (!query) {
-      onSearchResults(sections);
-      return;
-    }
-
-    const filtered = sections.map(section => {
-      const sectionTitleMatch = section.title.toLowerCase().includes(query);
-      
-      const subsectionMatches = section.subsections?.map(subsection => {
-        const subsectionTitleMatch = subsection.title.toLowerCase().includes(query);
-        const itemMatches = subsection.items.filter(item => 
-          item.name.toLowerCase().includes(query)
-        );
-        return {
-          ...subsection,
-          items: subsectionTitleMatch ? subsection.items : itemMatches,
-          isHighlighted: subsectionTitleMatch || itemMatches.length > 0
-        };
-      }).filter(subsection => subsection.items.length > 0);
-
-      const itemMatches = section.items?.filter(item => 
-        item.name.toLowerCase().includes(query)
-      );
-
-      return {
-        ...section,
-        subsections: section.subsections ? subsectionMatches : undefined,
-        items: section.subsections ? undefined : (itemMatches?.length > 0 ? itemMatches : undefined),
-        isHighlighted: sectionTitleMatch || 
-                      (subsectionMatches?.length > 0) || 
-                      (itemMatches?.length > 0)
-      };
-    }).filter(section => 
-      section.isHighlighted || 
-      section.subsections?.length > 0 || 
-      section.items?.length > 0
-    );
-
-    onSearchResults(filtered);
-  };
-
-  return (
-    <div className="mt-4 max-w-2xl mx-auto relative">
-      <input
-        type="text"
-        placeholder="Search algorithms, data structures..."
-        className="w-full px-6 py-3.5 rounded-full border border-[#e5e7eb] dark:border-[#333] focus:outline-none focus:ring-2 focus:ring-[#a435f0]/40 focus:border-[#a435f0] bg-white dark:bg-[#1a1a1a] text-[#1a1a1a] dark:text-[#f5f5f5] placeholder-[#9ca3af] dark:placeholder-[#555] text-[15px] transition-all shadow-sm"
-        value={searchQuery}
-        onChange={handleSearch}
-      />
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="h-5 w-5 absolute right-5 top-1/2 -translate-y-1/2 text-[#9ca3af] dark:text-[#555]"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-      </svg>
-    </div>
-  );
-};
-
-export default SearchBar;
\ No newline at end of file
diff --git a/app/components/ui/TutorialOverlay.jsx b/app/components/ui/TutorialOverlay.jsx
deleted file mode 100755
index c1080d76e..000000000
--- a/app/components/ui/TutorialOverlay.jsx
+++ /dev/null
@@ -1,110 +0,0 @@
-"use client";
-
-import { useEffect, useState, useRef } from "react";
-import gsap from "gsap";
-
-export default function TutorialOverlay() {
-  const [showOverlay, setShowOverlay] = useState(false);
-  const [step, setStep] = useState(0);
-  const overlayRef = useRef();
-
-  useEffect(() => {
-    const seenTutorial = localStorage.getItem("tutorialSeen");
-
-    if (!seenTutorial) {
-      setShowOverlay(true);
-      gsap.fromTo(
-        overlayRef.current,
-        { opacity: 0 },
-        { opacity: 1, duration: 0.5, ease: "power2.out" },
-      );
-    }
-  }, []);
-
-  const nextStep = () => {
-    if (step < 2) {
-      setStep(step + 1);
-    } else {
-      gsap.to(overlayRef.current, {
-        opacity: 0,
-        duration: 0.5,
-        ease: "power2.in",
-        onComplete: () => {
-          localStorage.setItem("tutorialSeen", "true");
-          setShowOverlay(false);
-        },
-      });
-    }
-  };
-
-  const closeOverlay = () => {
-    gsap.to(overlayRef.current, {
-      opacity: 0,
-      duration: 0.5,
-      ease: "power2.in",
-      onComplete: () => {
-        localStorage.setItem("tutorialSeen", "true");
-        setShowOverlay(false);
-      },
-    });
-  };
-
-  if (!showOverlay) return null;
-
-  return (
-    <div
-      ref={overlayRef}
-      className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50"
-    >
-      <div className="bg-white dark:bg-neutral-900 p-6 rounded-2xl shadow-2xl max-w-sm w-full text-center relative">
-        <button
-          onClick={closeOverlay}
-          className="absolute top-3 right-3 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white text-xl"
-        >
-          ×
-        </button>
-        {(step === 1 || step === 2) && (
-          <video
-            src={`/tutorials/tutorial${step}.mp4`}
-            autoPlay
-            loop
-            muted
-            className="w-full aspect-video rounded-lg mb-4"
-          />
-        )}
-        <h2 className="text-xl font-semibold mb-3 text-gray-900 dark:text-white">
-          {step === 0 && "Welcome to AlgoBuddy!"}
-          {step === 1 && "Choose a Data Structure"}
-          {step === 2 && "Learn More About Each Structure"}
-        </h2>
-        <p className="text-gray-700 dark:text-gray-300 mb-6">
-          {step === 0 &&
-            "Here’s a quick guide to help you get started with visualizing data structures."}
-          {step === 1 &&
-            "This is the algorithm page where you can choose a data structure and explore related algorithms."}
-          {step === 2 &&
-            "Click the 'i' button on each data structure card to learn more about it before visualizing."}
-        </p>
-        {step > 0 && (
-          <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
-            Step {step}/2
-          </p>
-        )}
-        <div className="flex justify-center gap-3">
-          <button
-            className="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-6 py-2 rounded-xl hover:opacity-90"
-            onClick={nextStep}
-          >
-            {step < 2 ? "Next" : "Finish"}
-          </button>
-          <button
-            className="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-6 py-2 rounded-xl hover:opacity-90"
-            onClick={closeOverlay}
-          >
-            Skip
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/app/components/ui/backtotop.jsx b/app/components/ui/backtotop.jsx
deleted file mode 100755
index 2f8b52cad..000000000
--- a/app/components/ui/backtotop.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-"use client";
-import { useEffect, useState } from 'react';
-
-const BackToTop = () => {
-  const [visible, setVisible] = useState(false);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      setVisible(window.scrollY > 300);
-    };
-
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
-
-  const scrollToTop = () => {
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth'
-    });
-  };
-
-  return (
-    <button
-      onClick={scrollToTop}
-      aria-label="Back to top"
-      className={`
-        fixed bottom-6 right-6 z-50
-        w-12 h-12 rounded-full
-        bg-gradient-to-br from-blue-500 to-blue-600
-        text-white shadow-lg
-        transition-all duration-300 ease-in-out
-        flex items-center justify-center
-        hover:from-blue-600 hover:to-blue-700
-        ${visible ? 'opacity-100 scale-100' : 'opacity-0 scale-90 pointer-events-none'}
-        group
-      `}
-    >
-      {/* Tooltip */}
-      <div className="
-        absolute bottom-full mb-2 hidden group-hover:block
-        bg-gray-800 text-white text-xs font-medium
-        px-2 py-1 rounded whitespace-nowrap
-        after:content-[''] after:absolute after:top-full after:left-1/2
-        after:-translate-x-1/2 after:border-4 after:border-transparent
-        after:border-t-gray-800
-      ">
-        Back to top
-      </div>
-      
-      {/* Arrow icon */}
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="w-5 h-5 transition-transform group-hover:-translate-y-0.5"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-      >
-        <path
-          fillRule="evenodd"
-          d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
-          clipRule="evenodd"
-        />
-      </svg>
-    </button>
-  );
-};
-
-export default BackToTop;
\ No newline at end of file
diff --git a/app/components/ui/customArrayInput.jsx b/app/components/ui/customArrayInput.jsx
deleted file mode 100755
index 6d7c748bc..000000000
--- a/app/components/ui/customArrayInput.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-"use client";
-import { useState } from "react";
-
-const CustomArrayInput = ({ 
-  onUseCustomArray = (numbers) => console.log("Received:", numbers),
-  disabled = false, 
-  className = "" 
-}) => {
-  const [inputValue, setInputValue] = useState("");
-  const [error, setError] = useState("");
-
-  const handleSubmit = () => {
-    setError("");
-    
-    if (!inputValue.trim()) {
-      setError("Please enter numbers separated by commas");
-      return;
-    }
-
-    try {
-      const numbers = inputValue
-        .split(",")
-        .map(item => {
-          const num = Number(item.trim());
-          if (isNaN(num)) throw new Error(`"${item}" is not a valid number`);
-          return num;
-        });
-
-      if (numbers.length === 0) {
-        setError("No valid numbers found");
-        return;
-      }
-
-      onUseCustomArray(numbers);
-      setInputValue("");
-    } catch (err) {
-      setError(err.message);
-    }
-  };
-
-  return (
-    <div className={`${className}`}>
-      <div className="flex flex-col sm:flex-row gap-2 items-end">
-        <div className="flex-1 w-full">
-          <input
-            type="text"
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            placeholder="Example: 5, 3, 8, 1, 2"
-            className="w-full p-2 border rounded dark:bg-gray-700"
-            disabled={disabled}
-            onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
-          />
-          {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
-        </div>
-        <button
-          onClick={handleSubmit}
-          disabled={disabled || !inputValue.trim()}
-          className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded disabled:opacity-50"
-        >
-          Use Array
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default CustomArrayInput;
\ No newline at end of file
diff --git a/app/components/ui/exploreOther.jsx b/app/components/ui/exploreOther.jsx
deleted file mode 100755
index 771bcc773..000000000
--- a/app/components/ui/exploreOther.jsx
+++ /dev/null
@@ -1,83 +0,0 @@
-"use client";
-import { motion } from 'framer-motion';
-import { FiArrowRight, FiExternalLink } from 'react-icons/fi';
-
-const ExploreOther = ({ 
-  title, 
-  links, 
-  columns = "4",
-  icon = <FiArrowRight />,
-  showExternalIcon = true
-}) => {
-  // Responsive grid columns mapping
-  const gridColumns = {
-    "1": "sm:grid-cols-1",
-    "2": "sm:grid-cols-2",
-    "3": "sm:grid-cols-2 lg:grid-cols-3",
-    "4": "sm:grid-cols-2 lg:grid-cols-4",
-    "5": "sm:grid-cols-2 lg:grid-cols-5",
-  }[columns] || "sm:grid-cols-2 lg:grid-cols-4";
-
-  // Check if links should open in new tab
-  const isExternal = (url) => url.startsWith('http') || url.startsWith('www');
-
-  return (
-    <motion.div 
-      initial={{ opacity: 0, y: 10 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.3 }}
-      className="bg-white max-w-4xl mx-auto dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200/80 dark:border-gray-700/80 overflow-hidden mt-6 transition-all duration-300 hover:shadow-md hover:border-gray-300 dark:hover:border-gray-600"
-    >
-      <div className="p-5 sm:p-6">
-        <div className="flex items-center justify-between mb-5">
-          <h2 className="text-xl sm:text-2xl font-semibold text-gray-900 dark:text-white flex items-center gap-3">
-            <span className="w-2 h-6 bg-gradient-to-b from-blue-500 to-blue-600 rounded-full flex-shrink-0"></span>
-            {title}
-          </h2>
-        </div>
-        
-        <div className={`grid grid-cols-1 ${gridColumns} gap-3`}>
-          {links.map((link, index) => (
-            <motion.a
-              key={index}
-              href={link.url}
-              target={isExternal(link.url) ? "_blank" : "_self"}
-              rel={isExternal(link.url) ? "noopener noreferrer" : ""}
-              whileHover={{ y: -3 }}
-              whileTap={{ scale: 0.98 }}
-              className="group relative block p-4 rounded-lg border border-gray-200/70 dark:border-gray-700/70 hover:border-blue-400/70 dark:hover:border-blue-500/70 transition-all duration-200 bg-gradient-to-b from-white/50 to-white/0 dark:from-gray-700/20 dark:to-gray-700/5 hover:from-blue-50/50 hover:to-blue-50/10 dark:hover:from-blue-900/15 dark:hover:to-blue-900/5 overflow-hidden"
-            >
-              {/* Animated hover effect */}
-              <div className="absolute inset-0 bg-gradient-to-r from-blue-500/0 via-blue-500/5 to-blue-500/0 opacity-0 group-hover:opacity-100 dark:via-blue-600/10 transition-opacity duration-300"></div>
-              
-              <div className="relative flex items-center gap-3">
-                {/* Custom icon or default */}
-                <div className="flex-shrink-0 w-9 h-9 rounded-lg bg-blue-100/70 dark:bg-blue-900/20 flex items-center justify-center text-blue-600 dark:text-blue-400 group-hover:bg-blue-200/70 dark:group-hover:bg-blue-800/30 transition-colors shadow-inner">
-                  {link.icon || icon}
-                </div>
-                
-                <div className="flex-1 min-w-0">
-                  <p className="text-gray-800 dark:text-gray-200 group-hover:text-blue-600 dark:group-hover:text-blue-400 font-medium transition-colors truncate">
-                    {link.text}
-                  </p>
-                  {link.description && (
-                    <p className="text-sm text-gray-500 dark:text-gray-400 truncate">
-                      {link.description}
-                    </p>
-                  )}
-                </div>
-                
-                {/* External link indicator */}
-                {showExternalIcon && isExternal(link.url) && (
-                  <FiExternalLink className="flex-shrink-0 text-gray-400 dark:text-gray-500 group-hover:text-blue-500 dark:group-hover:text-blue-400 transition-colors" />
-                )}
-              </div>
-            </motion.a>
-          ))}
-        </div>
-      </div>
-    </motion.div>
-  );
-};
-
-export default ExploreOther;
\ No newline at end of file
diff --git a/app/components/ui/goButton.jsx b/app/components/ui/goButton.jsx
deleted file mode 100755
index 9fadeea5d..000000000
--- a/app/components/ui/goButton.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client';
-import React from 'react';
-
-const GoButton = ({ onGo, isAnimating }) => {
-  return (
-    <button
-      type="submit"
-      onClick={onGo}
-      className="flex-1 bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg disabled:opacity-50 transition-colors"
-      disabled={isAnimating}
-    >
-      Go
-    </button>
-  );
-};
-
-export default GoButton;
\ No newline at end of file
diff --git a/app/components/ui/navigationLink.jsx b/app/components/ui/navigationLink.jsx
deleted file mode 100755
index 13a684042..000000000
--- a/app/components/ui/navigationLink.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-
-const NavigationLink = ({ href, text, className = '' }) => {
-  return (
-    <div className={`bg-gray-100 dark:bg-black flex justify-center pr-10 pb-10 pt-0 font-poppins ${className}`}>
-      <a href={href} className='text-blue-600 underline hover:text-blue-700'>
-        Move To {text}
-      </a>
-    </div>
-  );
-};
-
-export default NavigationLink;
\ No newline at end of file
diff --git a/app/components/ui/productHunt.jsx b/app/components/ui/productHunt.jsx
deleted file mode 100755
index 89f400a0f..000000000
--- a/app/components/ui/productHunt.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-"use client";
-import React from "react";
-
-const ProductHuntBadge = () => {
-  return (
-    <a
-    className="border dark:border-white border-black rounded-xl"
-      href="https://www.producthunt.com/products/dsa-visualizer?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-dsa&#0045;visualizer"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <img
-        src={`https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=974127&theme=dark&t=1749182745821`}
-        alt="DSA&#0032;Visualizer - Visualize&#0032;&#0038;&#0032;learn&#0032;dsa&#0032;the&#0032;smart&#0032;way | Product Hunt"
-        style={{ width: 250, height: 54 }}
-        width="250"
-        height="54"
-      />
-    </a>
-  );
-};
-
-export default ProductHuntBadge;
\ No newline at end of file
diff --git a/app/components/ui/randomArray.jsx b/app/components/ui/randomArray.jsx
deleted file mode 100755
index 186120c50..000000000
--- a/app/components/ui/randomArray.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-"use client";
-
-const ArrayGenerator = ({ onGenerate }) => {
-  const generateRandomArray = (size = 10, min = 5, max = 100) => {
-    return Array.from({ length: size }, () => Math.floor(Math.random() * (max - min + 1)) + min);
-  };
-
-  const handleGenerate = () => {
-    const newArray = generateRandomArray();
-    onGenerate(newArray);
-  };
-
-  return (
-    <button
-      onClick={handleGenerate}
-      className="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded disabled:opacity-50 mb-2 text-sm sm:text-base"
-    >
-      Generate Random Array
-    </button>
-  );
-};
-
-export default ArrayGenerator;
\ No newline at end of file
diff --git a/app/components/ui/resetButton.jsx b/app/components/ui/resetButton.jsx
deleted file mode 100755
index 2be44fc98..000000000
--- a/app/components/ui/resetButton.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-
-const ResetButton = ({ onReset, isAnimating }) => {
-  return (
-    <button
-      type="button"
-      onClick={onReset}
-      disabled={isAnimating}
-      className="flex-1 bg-red-500 text-white py-3 rounded-lg disabled:opacity-50 transition-colors"
-    >
-      Reset
-    </button>
-  );
-};
-
-export default ResetButton;
\ No newline at end of file
diff --git a/app/contexts/AuthContext.js b/app/contexts/AuthContext.js
deleted file mode 100755
index 4afee4914..000000000
--- a/app/contexts/AuthContext.js
+++ /dev/null
@@ -1,80 +0,0 @@
-'use client';
-import { createContext, useContext, useEffect, useState } from 'react';
-import axios from 'axios';
-
-const AuthContext = createContext();
-
-const API = process.env.NEXT_PUBLIC_API_URL;
-
-export const AuthProvider = ({ children }) => {
-  const [user, setUser] = useState(null);
-
-  const signup = async (email, password, name) => {
-    try {
-      const res = await axios.post(`${API}/auth/signup`, {
-        email,
-        password,
-        name,
-      });
-
-      if (res.data.success) {
-        setUser(res.data.user);
-        return { success: true };
-      }
-
-      return { success: false, message: res.data.message };
-    } catch (error) {
-      return { success: false, message: error.response?.data?.message || 'Signup failed' };
-    }
-  };
-
-  const login = async (email, password) => {
-    try {
-      const res = await axios.post(`${API}/auth/login`, {
-        email,
-        password,
-      });
-
-      if (res.data.success) {
-        setUser(res.data.user);
-        localStorage.setItem('token', res.data.token);
-        return { success: true };
-      }
-
-      return { success: false, message: res.data.message };
-    } catch (error) {
-      return { success: false, message: error.response?.data?.message || 'Login failed' };
-    }
-  };
-
-  const logout = () => {
-    setUser(null);
-    localStorage.removeItem('token');
-  };
-
-  useEffect(() => {
-    const fetchUser = async () => {
-      const token = localStorage.getItem('token');
-      if (token) {
-        try {
-          const res = await axios.get(`${API}/auth/me`, {
-            headers: { Authorization: `Bearer ${token}` },
-          });
-          if (res.data.user) setUser(res.data.user);
-        } catch {
-          localStorage.removeItem('token');
-        }
-      }
-    };
-
-    fetchUser();
-  }, []);
-
-  return (
-    <AuthContext.Provider value={{ user, signup, login, logout }}>
-      {children}
-    </AuthContext.Provider>
-  );
-};
-
-export const useUser = () => useContext(AuthContext);
\ No newline at end of file
diff --git a/app/contexts/UserContext.jsx b/app/contexts/UserContext.jsx
deleted file mode 100755
index 34a91eca1..000000000
--- a/app/contexts/UserContext.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-"use client";
-import { createContext, useContext, useEffect, useState } from "react";
-import { createClient } from "@supabase/supabase-js";
-
-const UserContext = createContext();
-
-const supabaseClient = createClient(
-  process.env.NEXT_PUBLIC_SUPABASE_URL || "https://placeholder.supabase.co",
-  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || "placeholder-key",
-);
-
-export const UserProvider = ({ children }) => {
-  const [user, setUser] = useState(null);
-  const supabase = supabaseClient;
-
-  useEffect(() => {
-    const getSessionAndUser = async () => {
-      const { data: sessionData } = await supabase.auth.getSession();
-      if (!sessionData.session) {
-        return;
-      }
-
-      const {
-        data: { user },
-      } = await supabase.auth.getUser();
-      setUser(user);
-    };
-
-    getSessionAndUser();
-  }, []);
-
-  return (
-    <UserContext.Provider value={{ user, setUser }}>
-      {children}
-    </UserContext.Provider>
-  );
-};
-
-export const useUser = () => useContext(UserContext);
diff --git a/app/dashboard/page.jsx b/app/dashboard/page.jsx
deleted file mode 100755
index 99e698925..000000000
--- a/app/dashboard/page.jsx
+++ /dev/null
@@ -1,149 +0,0 @@
-"use client";
-import Navbar from "@/app/components/navbar";
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-import { supabase } from "@/lib/supabase";
-import { useUser } from "@/app/contexts/UserContext";
-import Link from "next/link";
-import ActivityDashboard from "@/app/components/dashboard/ActivityDashboard";
-import Footer from "@/app/components/footer";
-import { trackActivity } from "@/lib/activity";
-
-export default function Dashboard() {
-  const router = useRouter();
-  const { user } = useUser();
-  const [modules, setModules] = useState([]);
-  const [progress, setProgress] = useState({});
-  const [showAllCompleted, setShowAllCompleted] = useState(false);
-
-  useEffect(() => {
-    if (!user) {
-      router.push("/login");
-    } else {
-      fetchModules();
-      trackActivity(user.id, "site_visit");
-    }
-  }, [user]);
-
-  async function fetchModules() {
-    const { data: modulesData, error: modulesError } = await supabase
-      .from("modules")
-      .select("*");
-
-    if (modulesError) {
-      console.error(modulesError);
-      return;
-    }
-
-    const { data: progressData, error: progressError } = await supabase
-      .from("user_progress")
-      .select("*")
-      .eq("user_id", user.id);
-
-    if (progressError) {
-      console.error(progressError);
-      return;
-    }
-
-    const progressMap = {};
-    progressData.forEach((item) => {
-      progressMap[item.module_id] = {
-        is_done: item.is_done,
-        updated_at: item.updated_at
-      };
-    });
-
-    setModules(modulesData);
-    setProgress(progressMap);
-  }
-
-  return (
-    <section className="bg-white dark:bg-neutral-900 min-h-screen">
-      <div>
-        <Navbar />
-      </div>
-      <main className="max-w-4xl mx-auto px-4 py-24">
-        {user && (
-          <div className="flex justify-start mb-4">
-            <div className="bg-gradient-to-br from-blue-600 shadow-md to-blue-400 rounded-full px-6 py-2">
-              <span className="text-lg text-white dark:text-white">
-              Welcome, {user.user_metadata?.name || user.email.split("@")[0]}
-            </span>
-            </div>
-          </div>
-        )}
-
-        {user && (
-          <div className="mb-8">
-            <ActivityDashboard userId={user.id} />
-          </div>
-        )}
-
-        <section className="mb-8">
-          <h2 className="text-xl text-gray-800 dark:text-gray-200 mb-4">Modules Completed</h2>
-          {(() => {
-            const completedModules = modules.filter((mod) => progress[mod.id]?.is_done);
-            if (completedModules.length > 0) {
-              const modulesToShow = showAllCompleted ? completedModules : completedModules.slice(0, 3);
-              return (
-                <>
-                  <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-                    {modulesToShow.map((mod) => (
-                      <div
-                        key={mod.id}
-                        className="border dark:border-gray-600 rounded-lg p-4 bg-white dark:bg-neutral-950 shadow-sm flex flex-col justify-between"
-                      >
-                        <div>
-                          <img
-                            src={`/modules/${mod.image}`}
-                            alt={mod.title}
-                            className="w-full h-40 object-cover rounded-md mb-2"
-                          />
-                          <h3 className="text-md font-semibold text-gray-800 dark:text-gray-200 py-2">{mod.title}</h3>
-                          <p className="text-sm text-gray-500 dark:text-gray-400">{mod.description}</p>
-                        </div>
-                        <div className="mt-2 text-right text-xs flex justify-end">
-                          <div className="bg-amber-500 px-2 rounded-full py-1">
-                            <p className="text-black">Conquered : {new Date(progress[mod.id].updated_at).toLocaleDateString()}</p>
-                          </div>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                  {completedModules.length > 3 && (
-                    <div className="flex justify-center mt-8">
-                      <button
-                        onClick={() => setShowAllCompleted(!showAllCompleted)}
-                        className="px-4 py-2 rounded-lg font-medium bg-gradient-to-br from-blue-600 to-blue-500 text-white hover:bg-blue-700 shadow-lg transition duration-300"
-                      >
-                        {showAllCompleted ? "Show Less" : "Load More"}
-                      </button>
-                    </div>
-                  )}
-                </>
-              );
-            } else {
-              return (
-                <div className="flex flex-col items-center justify-center py-8 text-center">
-                  <p className="text-gray-500 dark:text-gray-400 mb-4">
-                    You haven't completed any modules yet.
-                  </p>
-                  <Link
-                    href="/visualizer"
-                    className="px-4 py-2 rounded-full font-medium bg-blue-600 text-white hover:bg-blue-700 transition duration-300"
-                  >
-                    Start Learning
-                  </Link>
-                </div>
-              );
-            }
-          })()}
-        </section>
-      </main>
-
-      <div>
-       <Footer />
-      </div>
-    </section>
-  );
-}
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
deleted file mode 100755
index be8c2fb60..000000000
--- a/app/globals.css
+++ /dev/null
@@ -1,173 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Source+Serif+4:wght@400;600;700&display=swap');
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* ── Udemy Design System ── */
-:root {
-  --udemy-purple:       #a435f0;
-  --udemy-purple-dark:  #7d2be0;
-  --udemy-purple-light: #c27cf7;
-  --udemy-yellow:       #f4c430;
-  --udemy-bg:           #ffffff;
-  --udemy-surface:      #f7f9fa;
-  --udemy-border:       #d1d7dc;
-  --udemy-text:         #1c1d1f;
-  --udemy-muted:        #6a6f73;
-  --udemy-dark-bg:      #1c1d1f;
-  --udemy-dark-surface: #2d2f31;
-  --udemy-dark-border:  #3e4143;
-  --udemy-dark-text:    #f7f9fa;
-  --udemy-dark-muted:   #9e9e9e;
-}
-
-body {
-  font-family: 'Source Sans 3', 'Source Sans Pro', ui-sans-serif, system-ui, sans-serif;
-  color: var(--udemy-text);
-  background: var(--udemy-bg);
-}
-
-h1, h2, h3, h4 {
-  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
-  font-weight: 700;
-}
-
-.dark body {
-  color: var(--udemy-dark-text);
-  background: var(--udemy-dark-bg);
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-@keyframes float {
-
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-
-  50% {
-    transform: translateY(-10px);
-  }
-}
-
-.animate-float {
-  animation: float 4s ease-in-out infinite;
-}
-
-.animation-delay-1000 {
-  animation-delay: 1s;
-}
-
-.animation-delay-2000 {
-  animation-delay: 2s;
-}
-
-@keyframes float-slow {
-
-  0%,
-  100% {
-    transform: translateY(0) translateX(0);
-  }
-
-  50% {
-    transform: translateY(-20px) translateX(10px);
-  }
-}
-
-@keyframes float-slower {
-
-  0%,
-  100% {
-    transform: translateY(0) translateX(0);
-  }
-
-  50% {
-    transform: translateY(20px) translateX(-10px);
-  }
-}
-
-.animate-float-slow {
-  animation: float-slow 8s ease-in-out infinite;
-}
-
-.animate-float-slower {
-  animation: float-slower 10s ease-in-out infinite;
-}
-
-@keyframes draw-loop {
-  0% {
-    stroke-dashoffset: 100;
-  }
-  50% {
-    stroke-dashoffset: 0;
-  }
-  100% {
-    stroke-dashoffset: 100;
-  }
-}
-
-.animate-draw .path {
-  stroke-dasharray: 100;
-  stroke-dashoffset: 100;
-  animation: draw-loop 2s ease-in-out infinite;
-}
-
-/* 404 Animation styles */
-@keyframes bounce-pin-1 {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-5px); }
-}
-.animate-bounce-pin-1 { animation: bounce-pin-1 2s ease-in-out infinite; }
-
-@keyframes bounce-pin-2 {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-8px); }
-}
-.animate-bounce-pin-2 { animation: bounce-pin-2 2.5s ease-in-out infinite; }
-
-@keyframes spark {
-  0%, 100% { opacity: 0; }
-  50% { opacity: 1; }
-}
-.animate-spark-1 { animation: spark 3s ease-in-out infinite; }
-.animate-spark-2 { animation: spark 3.5s ease-in-out infinite; }
-
-@keyframes swing {
-  0%, 100% { transform: translateX(-50%) rotate(-5deg); }
-  50% { transform: translateX(-50%) rotate(5deg); }
-}
-.animate-swing { animation: swing 4s ease-in-out infinite; }
-
-@keyframes pulse {
-  0%, 100% { opacity: 0; transform: translateX(-50%) scale(1); }
-  50% { opacity: 1; transform: translateX(-50%) scale(1.2); }
-}
-.animate-pulse { animation: pulse 3s ease-in-out infinite; }
-
-/* Page load animation */
-.page-loaded .page-loaded\:opacity-100 { opacity: 1; }
-.page-loaded .page-loaded\:translate-y-0 { transform: translateY(0); }
-
-@keyframes bot-vibe {
-  0%, 100% {
-    transform: translateY(-1px) rotate(-1deg);
-  }
-  50% {
-    transform: translateY(1px) rotate(1deg);
-  }
-}
-
-.glow-btn .glow-border {
-  animation: shimmer-glow 2s ease-in-out infinite;
-  background: linear-gradient(45deg, #3b82f6, #60a5fa);
-  opacity: 0.4;
-  filter: blur(10px);
-}
-
-.bot-wiggle {
-  animation: bot-vibe 1s infinite;
-}
\ No newline at end of file
diff --git a/app/layout.jsx b/app/layout.jsx
deleted file mode 100755
index 81202a495..000000000
--- a/app/layout.jsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import "./globals.css";
-import Script from "next/script";
-import { SpeedInsights } from "@vercel/speed-insights/next";
-import { AuthProvider } from "@/app/contexts/AuthContext";
-import { UserProvider } from "@/app/contexts/UserContext";
-import ClientLayoutWrapper from "@/app/components/ui/ClientLayoutWrapper";
-
-const GA_ID = process.env.NEXT_PUBLIC_GA_ID;
-
-export const metadata = {
-  metadataBase: new URL("https://algobuddy.in"),
-  title: "AlgoBuddy | Visualize & Learn DSA the Smart Way",
-  description:
-    "Master Data Structures and Algorithms with interactive visualizations. Perfect for students, beginners, and interview prep. Visualize Stack, Queue, Tree, Graph, Sorting & more.",
-  keywords: [
-    "AlgoBuddy",
-    "DSA Visualizer",
-    "Data Structures and Algorithms",
-    "Visual DSA Tool",
-    "Learn DSA Online",
-    "DSA for Beginners",
-    "DSA Practice",
-    "Stack Visualizer",
-    "Queue Visualizer",
-    "Graph Visualizer",
-    "Sorting Algorithms",
-  ],
-  authors: [{ name: "Sohan Rout" }],
-  creator: "Sohan Rout",
-  publisher: "AlgoBuddy",
-  robots: "index, follow",
-  icons: {
-    icon: "/favicon.svg",
-  },
-  openGraph: {
-    title: "AlgoBuddy | Visualize & Learn DSA the Smart Way",
-    description:
-      "Interactive platform to visualize and learn DSA concepts easily. Great for students and interview preparation.",
-    url: "https://algobuddy.in/",
-    siteName: "AlgoBuddy",
-    images: [
-      {
-        url: "/og.png",
-        width: 1200,
-        height: 630,
-        alt: "AlgoBuddy Preview Image",
-      },
-    ],
-    locale: "en_US",
-    type: "website",
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "AlgoBuddy | Learn DSA the Smart Way",
-    description:
-      "Visualize algorithms like Stack, Queue, Graphs, and Sorting in real-time. Learn DSA interactively.",
-    images: ["/og.png"],
-  },
-};
-
-export default async function RootLayout({ children }) {
-  const session = null; // auth is handled client-side via AuthContext
-
-  return (
-    <html lang="en">
-      <head>
-        <meta name="application-name" content="AlgoBuddy" />
-        <meta property="og:site_name" content="AlgoBuddy" />
-        <link rel="icon" href="/favicon.ico?v=2" />
-
-        {/* Google Analytics Script */}
-        {GA_ID && (
-          <>
-            <Script
-              src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
-              strategy="afterInteractive"
-            />
-            <Script id="google-analytics" strategy="afterInteractive">
-              {`
-                window.dataLayer = window.dataLayer || [];
-                function gtag(){dataLayer.push(arguments);}
-                gtag('js', new Date());
-                gtag('config', '${GA_ID}', {
-                  page_path: window.location.pathname,
-                });
-              `}
-            </Script>
-          </>
-        )}
-      </head>
-      <body>
-        <AuthProvider session={session}>
-          <UserProvider>
-            <ClientLayoutWrapper>{children}</ClientLayoutWrapper>
-          </UserProvider>
-        </AuthProvider>
-      </body>
-      <SpeedInsights />
-    </html>
-  );
-}
diff --git a/app/login/page.jsx b/app/login/page.jsx
deleted file mode 100755
index 6db4d9ad7..000000000
--- a/app/login/page.jsx
+++ /dev/null
@@ -1,280 +0,0 @@
-"use client";
-import { useState, useEffect } from "react";
-import { supabase } from "../../lib/supabase";
-import { useRouter } from "next/navigation";
-import {
-  FiMail,
-  FiLock,
-  FiUser,
-  FiLogIn,
-  FiUserPlus,
-  FiSun,
-  FiMoon,
-} from "react-icons/fi";
-import { motion } from "framer-motion";
-import Link from "next/link";
-import dynamic from "next/dynamic";
-
-const Turnstile = dynamic(
-  () => import("@marsidev/react-turnstile").then((mod) => mod.Turnstile),
-  { ssr: false },
-);
-
-export default function LoginPage() {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [name, setName] = useState("");
-  const [isLogin, setIsLogin] = useState(true);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [theme, setTheme] = useState("light");
-  const [captchaToken, setCaptchaToken] = useState(null);
-  const router = useRouter();
-
-  useEffect(() => {
-    const savedTheme = localStorage.getItem("theme") || "light";
-    setTheme(savedTheme);
-    document.documentElement.classList.toggle("dark", savedTheme === "dark");
-  }, []);
-
-  const toggleTheme = () => {
-    const newTheme = theme === "light" ? "dark" : "light";
-    setTheme(newTheme);
-    localStorage.setItem("theme", newTheme);
-    document.documentElement.classList.toggle("dark", newTheme === "dark");
-  };
-
-  const handleAuth = async () => {
-    setLoading(true);
-    setError("");
-
-    try {
-      if (!captchaToken) throw new Error("Please complete captcha");
-
-      if (isLogin) {
-        // Verify captcha first via API route
-        const verifyRes = await fetch("/api/auth", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            email,
-            password,
-            captchaToken,
-            action: "login",
-          }),
-        });
-        const verifyData = await verifyRes.json();
-        if (!verifyData.success)
-          throw new Error(verifyData.message || "Captcha verification failed");
-
-        // After captcha verified, login using frontend anon key
-        const { error } = await supabase.auth.signInWithPassword({
-          email,
-          password,
-        });
-        if (error) throw error;
-
-        router.push("/dashboard");
-      } else {
-        // Signup flow remains the same
-        const res = await fetch("/api/auth", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            email,
-            password,
-            captchaToken,
-            action: "signup",
-            name,
-          }),
-        });
-        const data = await res.json();
-        if (!data.success) throw new Error(data.message || "Signup failed");
-        alert(data.message);
-        setIsLogin(true);
-      }
-    } catch (err) {
-      setError(err.message || "Something went wrong");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleGoogleSignIn = async () => {
-    const { error } = await supabase.auth.signInWithOAuth({
-      provider: "google",
-    });
-    if (error) console.error("Google sign-in error:", error.message);
-  };
-
-  return (
-    <div className="min-h-screen flex items-center justify-center p-4 bg-udemy-surface dark:bg-udemy-dark-bg">
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        className="w-full max-w-md bg-white dark:bg-udemy-dark-surface rounded-xl shadow-lg overflow-hidden border border-udemy-border dark:border-udemy-dark-border"
-      >
-        {/* Header */}
-        <div className="bg-udemy-purple p-6 text-white">
-          <div>
-            <h1 className="text-2xl font-bold font-serif">
-              {isLogin ? "Welcome Back" : "Create Account"}
-            </h1>
-            <p className="text-purple-200 text-sm mt-1">
-              {isLogin
-                ? "Sign in to access your dashboard"
-                : "Join us to get started"}
-            </p>
-          </div>
-        </div>
-
-        <div className="flex justify-center items-center p-6">
-          {/* Google OAuth */}
-          <button
-            onClick={handleGoogleSignIn}
-            className="w-full flex items-center justify-center py-3 px-4 rounded-lg border border-udemy-border dark:border-udemy-dark-border bg-white dark:bg-udemy-dark-surface text-udemy-text dark:text-udemy-dark-text font-medium hover:bg-udemy-surface dark:hover:bg-udemy-dark-bg duration-300 transition-all"
-          >
-            <img src="./google.webp" width={24}></img>
-            <span className="mx-2">Continue with Google</span>
-          </button>
-        </div>
-
-        <div className="relative flex items-center px-6">
-          <div className="flex-grow border-t border-udemy-border dark:border-udemy-dark-border"></div>
-          <span className="flex-shrink mx-4 text-udemy-muted dark:text-udemy-dark-muted">
-            or
-          </span>
-          <div className="flex-grow border-t border-udemy-border dark:border-udemy-dark-border"></div>
-        </div>
-
-        <div className="p-6 space-y-4">
-          {error && (
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              className="bg-red-100 dark:bg-red-900/30 border-l-4 border-red-500 text-red-700 dark:text-red-300 p-3 rounded"
-            >
-              {error}
-            </motion.div>
-          )}
-
-          {/* Form */}
-          <div className="space-y-4">
-            <div className="relative">
-              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <FiMail className="text-gray-400 dark:text-gray-500" />
-              </div>
-              <input
-                type="email"
-                className="w-full pl-10 pr-4 py-3 rounded-lg border border-udemy-border dark:border-udemy-dark-border focus:outline-none focus:ring-2 focus:ring-udemy-purple bg-white dark:bg-udemy-dark-surface text-udemy-text dark:text-udemy-dark-text"
-                placeholder="Email address"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-              />
-            </div>
-
-            <div className="relative">
-              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <FiLock className="text-gray-400 dark:text-gray-500" />
-              </div>
-              <input
-                type="password"
-                className="w-full pl-10 pr-4 py-3 rounded-lg border border-udemy-border dark:border-udemy-dark-border focus:outline-none focus:ring-2 focus:ring-udemy-purple bg-white dark:bg-udemy-dark-surface text-udemy-text dark:text-udemy-dark-text"
-                placeholder="Password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-            </div>
-
-            {!isLogin && (
-              <div className="relative">
-                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                  <FiUser className="text-gray-400 dark:text-gray-500" />
-                </div>
-                <input
-                  type="text"
-                  className="w-full pl-10 pr-4 py-3 rounded-lg border border-udemy-border dark:border-udemy-dark-border focus:outline-none focus:ring-2 focus:ring-udemy-purple bg-white dark:bg-udemy-dark-surface text-udemy-text dark:text-udemy-dark-text"
-                  placeholder="Full name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                />
-              </div>
-            )}
-
-            {/* Turnstile for both login and signup */}
-            <div className="flex justify-center">
-              <Turnstile
-                siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
-                onSuccess={(token) => setCaptchaToken(token)}
-              />
-            </div>
-
-            <button
-              onClick={handleAuth}
-              disabled={loading}
-              className={`w-full flex items-center justify-center py-3 px-4 rounded text-white font-bold transition-all ${
-                loading
-                  ? "bg-gray-400 dark:bg-gray-600 cursor-not-allowed"
-                  : "bg-udemy-purple hover:bg-udemy-purple-dark shadow-md hover:shadow-lg"
-              }`}
-            >
-              {loading ? (
-                "Processing..."
-              ) : isLogin ? (
-                <>
-                  <FiLogIn className="mr-2" /> Continue
-                </>
-              ) : (
-                <>
-                  <FiUserPlus className="mr-2" /> Continue
-                </>
-              )}
-            </button>
-          </div>
-
-          {/* Switch forms */}
-          <div className="text-center text-sm text-udemy-muted dark:text-udemy-dark-muted">
-            {isLogin ? (
-              <p>
-                Don't have an account?{" "}
-                <button
-                  onClick={() => setIsLogin(false)}
-                  className="text-udemy-purple dark:text-udemy-purple-light hover:underline font-semibold"
-                >
-                  Sign up
-                </button>
-              </p>
-            ) : (
-              <p>
-                Already have an account?{" "}
-                <button
-                  onClick={() => setIsLogin(true)}
-                  className="text-udemy-purple dark:text-udemy-purple-light hover:underline font-semibold"
-                >
-                  Sign in
-                </button>
-              </p>
-            )}
-          </div>
-
-          <div className="text-center text-xs text-udemy-muted dark:text-udemy-dark-muted mt-6">
-            By continuing, you agree to our{" "}
-            <Link
-              href="/terms"
-              className="text-udemy-purple dark:text-udemy-purple-light hover:underline"
-            >
-              Terms of Service
-            </Link>{" "}
-            and{" "}
-            <Link
-              href="/privacy"
-              className="text-udemy-purple dark:text-udemy-purple-light hover:underline"
-            >
-              Privacy Policy
-            </Link>
-          </div>
-        </div>
-      </motion.div>
-    </div>
-  );
-}
diff --git a/app/not-found.jsx b/app/not-found.jsx
deleted file mode 100755
index ed1b31c3c..000000000
--- a/app/not-found.jsx
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client";
-import { useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { FiArrowLeft, FiHome, FiZap } from 'react-icons/fi';
-
-const NotFoundPage = () => {
-  const router = useRouter();
-
-  useEffect(() => {
-    if (typeof window !== 'undefined' && window.gtag) {
-      window.gtag('event', 'page_view', {
-        page_title: '404 Not Found',
-        page_path: window.location.pathname,
-      });
-    }
-  }, []);
-
-  useEffect(() => {
-    document.body.classList.add('page-loaded');
-  }, []);
-
-  return (
-    <div className="min-h-screen flex flex-col items-center justify-center text-center px-4 bg-gradient-to-br from-gray-50 to-white dark:from-gray-900 dark:to-gray-800 transition-colors duration-300 overflow-hidden">
-      {/* Animated background elements */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none">
-        <div className="absolute top-1/4 -left-20 w-64 h-64 bg-blue-400/10 rounded-full filter blur-3xl animate-float-slow"></div>
-        <div className="absolute bottom-1/3 -right-20 w-72 h-72 bg-blue-600/10 rounded-full filter blur-3xl animate-float-slower"></div>
-      </div>
-
-      <div className="max-w-md w-full space-y-6 transform transition-all duration-500 opacity-0 translate-y-10 page-loaded:opacity-100 page-loaded:translate-y-0 relative z-10">
-        {/* Broken plug animation */}
-        <div className="relative mx-auto w-40 h-40 mb-8">
-          {/* Plug base */}
-          <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-24 h-32 bg-gray-300 dark:bg-gray-600 rounded-lg">
-          <div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-24 h-6 bg-gray-500 dark:bg-gray-800 rounded-lg">
-          {/* Plug pins - broken animation */}
-            <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex space-x-6">
-              <div className="relative">
-                <div className="w-3 h-8 bg-gray-400 dark:bg-gray-500 rounded-t-sm animate-bounce-pin-1"></div>
-                <div className="absolute top-0 left-1/2 w-1 h-2 bg-yellow-400 transform -translate-x-1/2 animate-spark-1 opacity-0"></div>
-              </div>
-              <div className="relative">
-                <div className="w-3 h-10 bg-gray-400 dark:bg-gray-500 rounded-t-sm animate-bounce-pin-2"></div>
-                <div className="absolute top-0 left-1/2 w-1 h-2 bg-yellow-400 transform -translate-x-1/2 animate-spark-2 opacity-0"></div>
-              </div>
-            </div>
-            </div>
-            {/* Red cross icon */}
-            <div className="absolute top-1/2 left-1/2 w-10 h-10 flex items-center justify-center transform -translate-x-1/2 -translate-y-1/2">
-                <div className="absolute w-10 h-2 bg-red-400 rounded-full rotate-45"></div>
-                <div className="absolute w-10 h-2 bg-red-400 rounded-full -rotate-45"></div>
-            </div>
-            </div>
-          <FiZap className="absolute top-4 left-1/2 w-8 h-8 text-yellow-400 transform -translate-x-1/2 animate-pulse opacity-0" />
-        </div>
-
-        {/* Content */}
-        <div className="space-y-4">
-          <h1 className="text-4xl font-bold text-gray-900 dark:text-white">
-            Connection Lost
-          </h1>
-          <p className="text-lg text-gray-600 dark:text-gray-400">
-            The page you're trying to reach seems to be unplugged or doesn't exist.
-          </p>
-        </div>
-
-        {/* Action buttons */}
-        <div className="flex flex-col sm:flex-row justify-center gap-4 pt-8">
-          <button
-            onClick={() => router.back()}
-            className="flex items-center justify-center gap-2 px-6 py-3 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-lg font-medium transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md"
-          >
-            <FiArrowLeft className="w-5 h-5" />
-            Go Back
-          </button>
-          <a
-            href="/"
-            className="flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 dark:from-blue-600 dark:to-blue-700 text-white rounded-lg font-medium transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-blue-500/20"
-          >
-            <FiHome className="w-5 h-5" />
-            Return Home
-          </a>
-        </div>
-
-        {/* Footer note */}
-        <p className="pt-12 text-sm text-gray-500 dark:text-gray-400">
-          Still stuck? <a href="/contact" className="text-blue-500 dark:text-blue-400 hover:underline">Contact support</a>
-        </p>
-      </div>
-    </div>
-  );
-};
-
-export default NotFoundPage;
\ No newline at end of file
diff --git a/app/page.jsx b/app/page.jsx
deleted file mode 100755
index b5fecba6d..000000000
--- a/app/page.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import Navbar from "@/app/components/navbar";
-import Hero from "@/app/components/hero";
-import ConceptsSection from "@/app/components/ConceptsSection";
-import PersonalizedSection from "@/app/components/PersonalizedSection";
-import Footer from "@/app/components/footer";
-import BottomAd from "./components/ads/bottom";
-
-export const metadata = {
-  title: "AlgoBuddy | Visualize & Learn DSA the Smart Way",
-  description:
-    "Master Data Structures and Algorithms with interactive visualizations. Perfect for students, beginners, and interview prep. Visualize Stack, Queue, Tree, Graph, Sorting & more.",
-  keywords: [
-    "DSA Visualizer",
-    "Algorithm Visualizer",
-    "Learn DSA",
-    "Practice DSA Problems",
-    "DSA Quizzes",
-    "Interactive DSA",
-    "Sorting Algorithms",
-    "Searching Algorithms",
-    "Stack",
-    "Queue",
-    "Tree",
-    "Linked List",
-    "Heap Sort",
-    "Tree Traversal",
-    "Linear Search",
-    "Bubble Sort",
-    "Singly Linked List",
-    "Doubly Linked List",
-    "Circular Linked List",
-    "Data Structures for Beginners",
-    "DSA Practice Platform",
-    "Quiz for DSA",
-    "Algorithm Quiz",
-    "Interactive Algorithm Quiz",
-    "Learn DSA with Quizzes",
-  ],
-  robots: "index, follow",
-};
-
-export default function Home() {
-  return (
-    <>
-      <div className="min-h-screen bg-gray-100">
-        <Navbar />
-        <div id="hero">
-          <Hero />
-        </div>
-        <PersonalizedSection />
-        <ConceptsSection />
-        <Footer />
-      </div>
-    </>
-  );
-}
diff --git a/app/visualizer/VisualizerClient.jsx b/app/visualizer/VisualizerClient.jsx
deleted file mode 100755
index 07733ae09..000000000
--- a/app/visualizer/VisualizerClient.jsx
+++ /dev/null
@@ -1,737 +0,0 @@
-"use client";
-import { useState, useMemo } from "react";
-import Link from "next/link";
-import { motion, AnimatePresence } from "framer-motion";
-import { FiArrowLeft, FiSearch, FiChevronRight } from "react-icons/fi";
-
-/* ─── colour + icon theme per DS ─── */
-const DS_THEME = {
-  Array: {
-    color: "#a435f0",
-    bg: "#faf5ff",
-    darkBg: "#160d22",
-    border: "#e9d5ff",
-    label: "7 algorithms",
-    bars: [65, 30, 80, 45, 55, 20, 70],
-    icon: (c) => (
-      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
-        <rect x="3" y="3" width="4" height="18" rx="1" /><rect x="10" y="8" width="4" height="13" rx="1" /><rect x="17" y="5" width="4" height="16" rx="1" />
-      </svg>
-    ),
-  },
-  Stack: {
-    color: "#2563eb",
-    bg: "#eff6ff",
-    darkBg: "#0d1627",
-    border: "#bfdbfe",
-    label: "8 algorithms",
-    stack: ["push(42)", "push(17)", "peek → 17"],
-    icon: (c) => (
-      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
-        <rect x="4" y="2" width="16" height="5" rx="1.5" /><rect x="4" y="9" width="16" height="5" rx="1.5" /><rect x="4" y="16" width="16" height="5" rx="1.5" />
-      </svg>
-    ),
-  },
-  Queue: {
-    color: "#059669",
-    bg: "#f0fdf4",
-    darkBg: "#0d1f14",
-    border: "#d1fae5",
-    label: "10 algorithms",
-    icon: (c) => (
-      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
-        <rect x="2" y="7" width="5" height="10" rx="1.5" /><rect x="9.5" y="7" width="5" height="10" rx="1.5" /><rect x="17" y="7" width="5" height="10" rx="1.5" /><path d="M22 12h-1" /><path d="M3 12H2" />
-      </svg>
-    ),
-  },
-  "Linked List": {
-    color: "#d97706",
-    bg: "#fffbeb",
-    darkBg: "#1a1506",
-    border: "#fde68a",
-    label: "10 algorithms",
-    icon: (c) => (
-      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
-        <circle cx="5" cy="12" r="3" /><circle cx="19" cy="12" r="3" /><path d="M8 12h8" /><path d="M14 9l3 3-3 3" />
-      </svg>
-    ),
-  },
-  Tree: {
-    color: "#7c3aed",
-    bg: "#faf5ff",
-    darkBg: "#160d22",
-    border: "#e9d5ff",
-    label: "20 algorithms",
-    icon: (c) => (
-      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
-        <circle cx="12" cy="5" r="2.5" /><circle cx="6" cy="15" r="2.5" /><circle cx="18" cy="15" r="2.5" /><path d="M10.2 7.2L7.5 12.5" /><path d="M13.8 7.2l2.7 5.3" />
-      </svg>
-    ),
-  },
-  Graph: {
-    color: "#dc2626",
-    bg: "#fef2f2",
-    darkBg: "#1f0d0d",
-    border: "#fecaca",
-    label: "8 algorithms",
-    icon: (c) => (
-      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
-        <circle cx="5" cy="6" r="2.5" /><circle cx="19" cy="6" r="2.5" /><circle cx="5" cy="18" r="2.5" /><circle cx="19" cy="18" r="2.5" /><path d="M7.5 6h9" /><path d="M5 8.5v7" /><path d="M19 8.5v7" /><path d="M7.5 18h9" /><path d="M7 8l10 8" />
-      </svg>
-    ),
-  },
-};
-const getTheme = (t) =>
-  DS_THEME[t] || {
-    icon: (c) => (
-      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
-        <rect x="3" y="3" width="18" height="18" rx="3" /><path d="M12 8v8" /><path d="M8 12h8" />
-      </svg>
-    ),
-    color: "#6b7280",
-    bg: "#f9fafb",
-    darkBg: "#111",
-    border: "#e5e7eb",
-    label: "",
-  };
-
-/* ═══════════════════════════════════════
-   Mini Visuals for cards
-   ═══════════════════════════════════════ */
-function ArrayMiniViz({ color }) {
-  const bars = [65, 30, 80, 45, 55, 20, 70];
-  const highlight = 2;
-  return (
-    <div className="flex items-end gap-1 h-[48px]">
-      {bars.map((h, i) => (
-        <div
-          key={i}
-          className="flex-1 rounded-t-sm transition-all"
-          style={{
-            height: `${(h / 80) * 44}px`,
-            background: i === highlight ? color : color + "30",
-          }}
-        />
-      ))}
-    </div>
-  );
-}
-
-function StackMiniViz({ color }) {
-  const items = ["8", "17", "42"];
-  return (
-    <div className="flex flex-col gap-1">
-      {items.map((v, i) => (
-        <div
-          key={i}
-          className="h-[14px] rounded text-[10px] font-bold flex items-center justify-center"
-          style={{
-            background: i === 0 ? color : color + "25",
-            color: i === 0 ? "#fff" : color,
-          }}
-        >
-          {v}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function QueueMiniViz({ color }) {
-  const items = ["A", "B", "C", "D"];
-  return (
-    <div className="flex gap-1 items-center">
-      {items.map((v, i) => (
-        <div
-          key={i}
-          className="w-8 h-8 rounded-md text-[10px] font-bold flex items-center justify-center"
-          style={{
-            background: i === 0 ? color : color + "20",
-            color: i === 0 ? "#fff" : color,
-          }}
-        >
-          {v}
-        </div>
-      ))}
-      <span className="text-[10px] font-bold ml-1" style={{ color }}>
-        →
-      </span>
-    </div>
-  );
-}
-
-function LinkedListMiniViz({ color }) {
-  const nodes = [7, 3, 9, 1];
-  return (
-    <div className="flex items-center gap-0.5">
-      {nodes.map((v, i) => (
-        <div key={i} className="flex items-center">
-          <div
-            className="w-7 h-7 rounded-full text-[10px] font-bold flex items-center justify-center"
-            style={{ background: color + "20", color }}
-          >
-            {v}
-          </div>
-          {i < nodes.length - 1 && (
-            <svg width="12" height="8" className="flex-shrink-0">
-              <path
-                d="M0 4 L10 4"
-                stroke={color}
-                strokeWidth="1.5"
-                fill="none"
-                markerEnd="url(#arrowhead)"
-              />
-              <defs>
-                <marker
-                  id="arrowhead"
-                  markerWidth="4"
-                  markerHeight="4"
-                  refX="4"
-                  refY="2"
-                  orient="auto"
-                >
-                  <path d="M0,0 L4,2 L0,4" fill={color} />
-                </marker>
-              </defs>
-            </svg>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function TreeMiniViz({ color }) {
-  return (
-    <svg viewBox="0 0 80 50" className="w-full h-[48px]">
-      {/* edges */}
-      <line
-        x1="40"
-        y1="10"
-        x2="20"
-        y2="30"
-        stroke={color + "40"}
-        strokeWidth="1.5"
-      />
-      <line
-        x1="40"
-        y1="10"
-        x2="60"
-        y2="30"
-        stroke={color + "40"}
-        strokeWidth="1.5"
-      />
-      <line
-        x1="20"
-        y1="30"
-        x2="10"
-        y2="45"
-        stroke={color + "40"}
-        strokeWidth="1.5"
-      />
-      <line
-        x1="20"
-        y1="30"
-        x2="30"
-        y2="45"
-        stroke={color + "40"}
-        strokeWidth="1.5"
-      />
-      {/* nodes */}
-      <circle cx="40" cy="10" r="6" fill={color} />
-      <circle cx="20" cy="30" r="5" fill={color + "60"} />
-      <circle cx="60" cy="30" r="5" fill={color + "60"} />
-      <circle cx="10" cy="45" r="4" fill={color + "30"} />
-      <circle cx="30" cy="45" r="4" fill={color + "30"} />
-      {/* labels */}
-      <text
-        x="40"
-        y="13"
-        textAnchor="middle"
-        fill="#fff"
-        fontSize="7"
-        fontWeight="bold"
-      >
-        8
-      </text>
-      <text
-        x="20"
-        y="33"
-        textAnchor="middle"
-        fill="#fff"
-        fontSize="6"
-        fontWeight="bold"
-      >
-        3
-      </text>
-      <text
-        x="60"
-        y="33"
-        textAnchor="middle"
-        fill="#fff"
-        fontSize="6"
-        fontWeight="bold"
-      >
-        10
-      </text>
-    </svg>
-  );
-}
-
-function GraphMiniViz({ color }) {
-  return (
-    <svg viewBox="0 0 80 50" className="w-full h-[48px]">
-      <line
-        x1="15"
-        y1="15"
-        x2="40"
-        y2="10"
-        stroke={color + "40"}
-        strokeWidth="1.5"
-      />
-      <line
-        x1="40"
-        y1="10"
-        x2="65"
-        y2="18"
-        stroke={color + "40"}
-        strokeWidth="1.5"
-      />
-      <line
-        x1="15"
-        y1="15"
-        x2="25"
-        y2="40"
-        stroke={color + "40"}
-        strokeWidth="1.5"
-      />
-      <line
-        x1="25"
-        y1="40"
-        x2="55"
-        y2="38"
-        stroke={color + "40"}
-        strokeWidth="1.5"
-      />
-      <line
-        x1="65"
-        y1="18"
-        x2="55"
-        y2="38"
-        stroke={color + "40"}
-        strokeWidth="1.5"
-      />
-      <line
-        x1="40"
-        y1="10"
-        x2="25"
-        y2="40"
-        stroke={color + "40"}
-        strokeWidth="1.5"
-      />
-      <circle cx="15" cy="15" r="5" fill={color} />
-      <circle cx="40" cy="10" r="5" fill={color + "80"} />
-      <circle cx="65" cy="18" r="5" fill={color + "60"} />
-      <circle cx="25" cy="40" r="5" fill={color + "80"} />
-      <circle cx="55" cy="38" r="5" fill={color} />
-    </svg>
-  );
-}
-
-const MINI_VIZ = {
-  Array: ArrayMiniViz,
-  Stack: StackMiniViz,
-  Queue: QueueMiniViz,
-  "Linked List": LinkedListMiniViz,
-  Tree: TreeMiniViz,
-  Graph: GraphMiniViz,
-};
-
-/* ═══════════════════════════════════════
-   DS Card — homepage-style window card
-   ═══════════════════════════════════════ */
-function DSCard({ section, theme, onClick, delay }) {
-  const MiniViz = MINI_VIZ[section.title];
-  const count = section.subsections
-    ? section.subsections.reduce((a, s) => a + s.items.length, 0)
-    : 0;
-
-  return (
-    <motion.button
-      onClick={onClick}
-      initial={{ opacity: 0, y: 24 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.4, delay, ease: [0.22, 1, 0.36, 1] }}
-      whileHover={{ y: -6, scale: 1.02 }}
-      whileTap={{ scale: 0.97 }}
-      className="group w-full text-left cursor-pointer"
-    >
-      <div
-        className="rounded-2xl border overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
-        style={{ borderColor: theme.border }}
-      >
-        {/* title bar — like homepage code cards */}
-        <div
-          className="flex items-center gap-2 px-4 py-3 border-b"
-          style={{ background: theme.bg, borderColor: theme.border }}
-        >
-          <span className="w-3 h-3 rounded-full bg-[#ff5f57]" />
-          <span className="w-3 h-3 rounded-full bg-[#febc2e]" />
-          <span className="w-3 h-3 rounded-full bg-[#28c840]" />
-          <span className="ml-2 text-[12px] font-mono text-[#6b7280] dark:text-[#9e9e9e]">
-            {section.title.toLowerCase().replace(/\s/g, "")}.js
-          </span>
-        </div>
-
-        {/* card body */}
-        <div className="p-5 bg-white dark:bg-[#1c1d1f]">
-          {/* icon + title */}
-          <div className="flex items-center gap-3 mb-3">
-            <div
-              className="w-10 h-10 rounded-xl flex items-center justify-center p-2 flex-shrink-0"
-              style={{ background: theme.bg }}
-            >
-              {theme.icon(theme.color)}
-            </div>
-            <div>
-              <h3
-                className="text-[18px] font-extrabold text-[#1a1a1a] dark:text-[#f7f9fa]"
-                style={{
-                  letterSpacing: "-0.02em",
-                  fontFamily: "'Inter', sans-serif",
-                }}
-              >
-                {section.title}
-              </h3>
-              <p className="text-[12px] text-[#6b7280] dark:text-[#9e9e9e] font-medium">
-                {count} algorithm{count !== 1 ? "s" : ""} to explore
-              </p>
-            </div>
-          </div>
-
-          {/* description */}
-          <p className="text-[13px] text-[#4b5563] dark:text-[#9e9e9e] leading-relaxed mb-4">
-            {section.desc}
-          </p>
-
-          {/* mini visualization */}
-          {MiniViz && (
-            <div
-              className="rounded-lg p-3 mb-4 border"
-              style={{ background: theme.bg, borderColor: theme.border }}
-            >
-              <MiniViz color={theme.color} />
-            </div>
-          )}
-
-          {/* CTA pill — like homepage buttons */}
-          <div
-            className="inline-flex items-center gap-2 h-[36px] px-5 rounded-full text-[13px] font-bold text-white
-              group-hover:gap-3 transition-all duration-200"
-            style={{ background: theme.color }}
-          >
-            Explore {section.title}
-            <FiChevronRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform duration-200" />
-          </div>
-        </div>
-      </div>
-    </motion.button>
-  );
-}
-
-/* ═══════════════════════════════════════
-   Module View — drill-down page
-   ═══════════════════════════════════════ */
-function ModuleView({ section, theme, onBack }) {
-  const count = section.subsections
-    ? section.subsections.reduce((a, s) => a + s.items.length, 0)
-    : 0;
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, x: 40 }}
-      animate={{ opacity: 1, x: 0 }}
-      exit={{ opacity: 0, x: -40 }}
-      transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
-    >
-      {/* hero banner for this DS */}
-      <div
-        className="rounded-2xl border p-8 sm:p-10 mb-10"
-        style={{ background: theme.bg, borderColor: theme.border }}
-      >
-        <button
-          onClick={onBack}
-          className="inline-flex items-center gap-2 text-[13px] font-bold text-[#6b7280] dark:text-[#9e9e9e]
-            hover:text-[#1a1a1a] dark:hover:text-white transition-colors duration-200 mb-5"
-        >
-          <FiArrowLeft className="w-4 h-4" /> Back to all topics
-        </button>
-
-        <div className="flex items-center gap-4 mb-3">
-          <div
-            className="w-14 h-14 rounded-2xl flex items-center justify-center p-3 flex-shrink-0"
-            style={{ background: theme.bg }}
-          >
-            {theme.icon(theme.color)}
-          </div>
-          <div>
-            <h2
-              className="text-[2rem] sm:text-[2.8rem] font-black text-[#1a1a1a] dark:text-[#f7f9fa]"
-              style={{
-                letterSpacing: "-0.03em",
-                lineHeight: 1.1,
-                fontFamily: "'Inter', sans-serif",
-              }}
-            >
-              {section.title}
-            </h2>
-            <p className="text-[14px] text-[#4b5563] dark:text-[#9e9e9e] mt-1">
-              {count} algorithm{count !== 1 ? "s" : ""} · {section.desc}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* subsections */}
-      <div className="space-y-8">
-        {section.subsections?.map((sub, si) => (
-          <motion.div
-            key={si}
-            initial={{ opacity: 0, y: 16 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.3, delay: si * 0.08 }}
-          >
-            <h4
-              className="text-[13px] font-bold uppercase tracking-wider mb-4 pl-1"
-              style={{ color: theme.color }}
-            >
-              {sub.title}
-            </h4>
-            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-              {sub.items.map((item, ii) => (
-                <Link
-                  key={ii}
-                  href={item.path}
-                  className="group/item flex items-center justify-between p-4 rounded-xl border
-                    bg-white dark:bg-[#2d2f31] hover:shadow-md transition-all duration-200"
-                  style={{ borderColor: theme.border }}
-                >
-                  <div className="flex items-center gap-3">
-                    <div
-                      className="w-8 h-8 rounded-lg flex items-center justify-center text-[14px] font-bold"
-                      style={{
-                        background: theme.color + "15",
-                        color: theme.color,
-                      }}
-                    >
-                      {ii + 1}
-                    </div>
-                    <span
-                      className="text-[14px] font-semibold text-[#1a1a1a] dark:text-[#f7f9fa]
-                      group-hover/item:text-[#a435f0] transition-colors"
-                    >
-                      {item.name}
-                    </span>
-                  </div>
-                  <FiChevronRight
-                    className="w-4 h-4 text-[#d1d5db] dark:text-[#3e4143]
-                      group-hover/item:translate-x-1 transition-all duration-200"
-                    style={{ color: theme.color + "60" }}
-                  />
-                </Link>
-              ))}
-            </div>
-          </motion.div>
-        ))}
-      </div>
-    </motion.div>
-  );
-}
-
-/* ═══════════════════════════════════════
-   Main Client Component
-   ═══════════════════════════════════════ */
-export default function VisualizerClient({ initialSections }) {
-  const [activeSection, setActiveSection] = useState(null);
-  const [search, setSearch] = useState("");
-
-  /* ── filter sections ── */
-  const filtered = useMemo(() => {
-    if (!search.trim()) return initialSections;
-    const q = search.toLowerCase();
-    return initialSections
-      .map((sec) => {
-        const titleHit = sec.title.toLowerCase().includes(q);
-        const subs = sec.subsections
-          ?.map((sub) => {
-            const subHit = sub.title.toLowerCase().includes(q);
-            const items = sub.items.filter((i) =>
-              i.name.toLowerCase().includes(q),
-            );
-            return { ...sub, items: subHit ? sub.items : items };
-          })
-          .filter((sub) => sub.items.length > 0);
-        return {
-          ...sec,
-          subsections: subs,
-          _hit: titleHit || (subs && subs.length > 0),
-        };
-      })
-      .filter((s) => s._hit);
-  }, [search, initialSections]);
-
-  /* ── flat results for search ── */
-  const flatResults = useMemo(() => {
-    if (!search.trim()) return [];
-    const q = search.toLowerCase();
-    const r = [];
-    initialSections.forEach((sec) =>
-      sec.subsections?.forEach((sub) =>
-        sub.items.forEach((item) => {
-          if (item.name.toLowerCase().includes(q))
-            r.push({ ...item, ds: sec.title });
-        }),
-      ),
-    );
-    return r;
-  }, [search, initialSections]);
-
-  return (
-    <div style={{ fontFamily: "'Inter', 'Source Sans 3', sans-serif" }}>
-      {/* ═══════ CONTENT AREA ═══════ */}
-      <section
-        className="px-5 pt-28 pb-20 min-h-screen"
-        style={{
-          background:
-            "linear-gradient(180deg, #ffffff 0%, #eef2ff 20%, #f0fdf4 60%, #faf5ff 100%)",
-          fontFamily: "'Inter', 'Source Sans 3', sans-serif",
-        }}
-      >
-        <div className="max-w-[1100px] mx-auto">
-          {/* page heading + search */}
-          <div className="text-center mb-14">
-            <h1
-              className="text-[2.6rem] sm:text-[3.4rem] lg:text-[4rem] font-extrabold leading-[1.08] text-[#1c1d1f] dark:text-[#f7f9fa] mb-4"
-              style={{
-                fontFamily: "'Inter', sans-serif",
-                letterSpacing: "-0.03em",
-              }}
-            >
-              Algorithm <span className="text-[#a435f0]">Visualizer</span>
-            </h1>
-            <p className="text-[1.1rem] text-[#4b5563] dark:text-[#9e9e9e] leading-relaxed max-w-[480px] mx-auto">
-              Pick any data structure, tap an algorithm, and watch it run step
-              by step. Learning DSA has never been this fun.
-            </p>
-          </div>
-
-          <AnimatePresence mode="wait">
-            {/* ─── SEARCH RESULTS ─── */}
-            {search.trim() ? (
-              <motion.div
-                key="search"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                transition={{ duration: 0.25 }}
-              >
-                {flatResults.length > 0 ? (
-                  <div className="max-w-3xl mx-auto">
-                    <p className="text-[13px] font-bold text-[#6b7280] uppercase tracking-wider mb-5">
-                      {flatResults.length} result
-                      {flatResults.length !== 1 ? "s" : ""}
-                    </p>
-                    <div className="grid gap-3 sm:grid-cols-2">
-                      {flatResults.map((item, i) => {
-                        const t = getTheme(item.ds);
-                        return (
-                          <Link
-                            key={i}
-                            href={item.path}
-                            className="group/r flex items-center gap-3 p-4 rounded-xl bg-white border
-                              hover:shadow-md transition-all duration-200"
-                            style={{ borderColor: t.border }}
-                          >
-                            <div
-                              className="w-8 h-8 rounded-lg flex items-center justify-center p-1.5 flex-shrink-0"
-                              style={{ background: t.bg }}
-                            >
-                              {t.icon(t.color)}
-                            </div>
-                            <div className="flex-1 min-w-0">
-                              <span className="text-[14px] font-semibold text-[#1a1a1a] group-hover/r:text-[#a435f0] transition-colors">
-                                {item.name}
-                              </span>
-                              <span className="block text-[11px] text-[#6b7280]">
-                                {item.ds}
-                              </span>
-                            </div>
-                            <FiChevronRight className="w-4 h-4 text-[#d1d5db] group-hover/r:translate-x-1 transition-all" />
-                          </Link>
-                        );
-                      })}
-                    </div>
-                  </div>
-                ) : (
-                  <div className="text-center py-16">
-                    <span className="text-[48px] block mb-4">🔍</span>
-                    <h3
-                      className="text-2xl font-bold text-[#1a1a1a] mb-2"
-                      style={{ letterSpacing: "-0.02em" }}
-                    >
-                      No results found
-                    </h3>
-                    <p className="text-[#6b7280] text-[15px]">
-                      Try a different search term
-                    </p>
-                  </div>
-                )}
-              </motion.div>
-            ) : /* ─── MODULE DRILL-DOWN ─── */
-            activeSection ? (
-              <ModuleView
-                key={`module-${activeSection.title}`}
-                section={activeSection}
-                theme={getTheme(activeSection.title)}
-                onBack={() => setActiveSection(null)}
-              />
-            ) : (
-              /* ─── MAIN GRID ─── */
-              <motion.div
-                key="grid"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                transition={{ duration: 0.3 }}
-              >
-                <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-                  {filtered.map((section, i) => (
-                    <DSCard
-                      key={section.title}
-                      section={section}
-                      theme={getTheme(section.title)}
-                      onClick={() => setActiveSection(section)}
-                      delay={i * 0.07}
-                    />
-                  ))}
-                </div>
-
-                {filtered.length === 0 && (
-                  <div className="text-center py-16">
-                    <span className="text-[48px] block mb-4">🔍</span>
-                    <h3 className="text-2xl font-bold text-[#1a1a1a] mb-2">
-                      No topics found
-                    </h3>
-                    <p className="text-[#6b7280]">
-                      Try a different search term
-                    </p>
-                  </div>
-                )}
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      </section>
-    </div>
-  );
-}
diff --git a/app/visualizer/linkedList/operations/comparison/animation.jsx b/app/visualizer/linkedList/operations/comparison/animation.jsx
deleted file mode 100755
index c6e9bc376..000000000
--- a/app/visualizer/linkedList/operations/comparison/animation.jsx
+++ /dev/null
@@ -1,302 +0,0 @@
-"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([]);
-  const [list2, setList2] = useState([]);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [currentPointers, setCurrentPointers] = useState({ list1: 0, list2: 0 });
-  const [comparisonResult, setComparisonResult] = useState(null);
-  const list1Refs = useRef([]);
-  const list2Refs = useRef([]);
-  const containerRef = useRef(null);
-  const animationTimeline = useRef(gsap.timeline());
-
-  // Generate random linked list with realistic values
-  const generateRandomList = (setList) => {
-    const size = Math.floor(Math.random() * 3) + 3; // 3-5 nodes
-    const values = Array.from({ length: size }, (_, i) => {
-      const base = Math.floor(Math.random() * 20) + 1;
-      return base + i * 5; // Ensure some order but not perfectly sorted
-    }).sort((a, b) => a - b); // Sort the values
-    
-    const newList = values.map((value, index) => ({
-      value,
-      id: Date.now() + index + Math.random(),
-      next: index < size - 1 ? `0x${(1000 + index).toString(16).padStart(4, '0')}` : 'NULL'
-    }));
-
-    setList(newList);
-  };
-
-  // Reset handler
-  const handleReset = () => {
-    gsap.killTweensOf("*");
-    animationTimeline.current.clear();
-    setList1([]);
-    setList2([]);
-    setIsAnimating(false);
-    setCurrentPointers({ list1: 0, list2: 0 });
-    setComparisonResult(null);
-    list1Refs.current = [];
-    list2Refs.current = [];
-  };
-
-  // Animate the comparison process step-by-step
-  const animateComparison = async () => {
-    if (isAnimating || list1.length === 0 || list2.length === 0) return;
-
-    setIsAnimating(true);
-    animationTimeline.current.clear();
-    setCurrentPointers({ list1: 0, list2: 0 });
-    setComparisonResult(null);
-
-    const maxLength = Math.max(list1.length, list2.length);
-    let areSame = true;
-
-    for (let i = 0; i < maxLength; i++) {
-      setCurrentPointers({ list1: i, list2: i });
-
-      const node1 = list1[i];
-      const node2 = list2[i];
-
-      const highlightNodes = [list1Refs.current[i], list2Refs.current[i]].filter(Boolean);
-
-      animationTimeline.current.to(highlightNodes, {
-        scale: 1.3,
-        duration: 0.4,
-        ease: 'power1.inOut'
-      });
-
-      await new Promise(resolve => setTimeout(resolve, 600));
-
-      if (!node1 || !node2 || node1.value !== node2.value) {
-        areSame = false;
-        setComparisonResult({
-          match: false,
-          index: i,
-          value1: node1?.value,
-          value2: node2?.value,
-        });
-        break;
-      }
-
-      animationTimeline.current.to(highlightNodes, {
-        scale: 1,
-        duration: 0.3
-      });
-    }
-
-    if (areSame) {
-      setComparisonResult({ match: true });
-    }
-
-    animationTimeline.current.call(() => {
-      setIsAnimating(false);
-    });
-  };
-
-  // Update refs when lists change
-  useEffect(() => {
-    list1Refs.current = list1Refs.current.slice(0, list1.length);
-    list2Refs.current = list2Refs.current.slice(0, list2.length);
-  }, [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 />
-        <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>
-
-        {/* Controls - Responsive */}
-        <div className="flex justify-center mb-8 px-2">
-          <div className="bg-white dark:bg-gray-800 border dark:border-gray-700 p-4 sm:p-6 w-full max-w-4xl rounded-lg shadow-md mx-auto">
-            <div className="flex flex-col sm:flex-row gap-4 w-full">
-              <div className="flex-1 flex flex-col sm:flex-row gap-2">
-                <button
-                  onClick={() => generateRandomList(setList1)}
-                  disabled={isAnimating}
-                  className="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 sm:px-6 sm:py-3 rounded-lg disabled:bg-gray-400 w-full"
-                >
-                  Generate List 1
-                </button>
-                <button
-                  onClick={() => generateRandomList(setList2)}
-                  disabled={isAnimating}
-                  className="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 sm:px-6 sm:py-3 rounded-lg disabled:bg-gray-400 w-full"
-                >
-                  Generate List 2
-                </button>
-              </div>
-              <div className="flex-1 flex flex-col sm:flex-row gap-2">
-                <button
-                  onClick={animateComparison}
-                  disabled={isAnimating || list1.length === 0 || list2.length === 0}
-                  className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 sm:px-6 sm:py-3 rounded-lg disabled:bg-gray-400 w-full"
-                >
-                  {isAnimating ? "Comparing..." : "Compare Lists"}
-                </button>
-                <button
-                  onClick={handleReset}
-                  className="bg-transparent text-black dark:text-white border border-black dark:border-white hover:bg-gray-100 dark:hover:bg-gray-700 px-4 py-2 sm:px-6 sm:py-3 rounded-lg w-full"
-                >
-                  Reset All
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Legend - Responsive */}
-        <div className="mb-4 flex flex-wrap justify-center gap-3 sm:gap-6 text-sm sm:text-base">
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-md bg-emerald-600 mr-2"></div>
-            <span>List 1</span>
-          </div>
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-md bg-emerald-600 mr-2"></div>
-            <span>List 2</span>
-          </div>
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-md bg-gray-400 mr-2"></div>
-            <span>Pointer</span>
-          </div>
-        </div>
-
-        {comparisonResult && (
-          <div className="text-center mt-4 mb-8">
-            {comparisonResult.match ? (
-              <p className="text-green-600 text-lg font-semibold">✅ Both linked lists are the same.</p>
-            ) : (
-              <p className="text-red-600 text-lg font-semibold">
-                Lists differ at node {comparisonResult.index + 1} : List 1 has {comparisonResult.value1 ?? 'NULL'} and List 2 has {comparisonResult.value2 ?? 'NULL'}
-              </p>
-            )}
-          </div>
-        )}
-
-        {/* Visualization Area */}
-        <div className="space-y-12">
-          {/* List 1 */}
-          <div className="flex flex-col items-center">
-            <h3 className="text-lg font-medium mb-2 text-emerald-600">List 1 {currentPointers.list1 < list1.length && `(Current: ${currentPointers.list1 + 1})`}</h3>
-            <div className="relative bg-gray-200/50 dark:bg-gray-800/50 border dark:border-gray-700 rounded-lg min-h-[120px] p-4 w-full max-w-4xl overflow-x-auto">
-              {list1.length === 0 ? (
-                <div className="text-center w-full py-8 text-gray-500 dark:text-gray-400">
-                  Generate List 1 to begin
-                </div>
-              ) : (
-                <div className="flex items-center justify-center space-x-2">
-                  {list1.map((node, index) => (
-                    <React.Fragment key={`list1-${node.id}`}>
-                      <div
-                        ref={(el) => (list1Refs.current[index] = el)}
-                        className={`node flex flex-col items-center justify-center bg-emerald-600 text-white text-lg w-20 h-16 rounded-md shadow-md transition-all ${
-                          index === currentPointers.list1 && isAnimating ? 'ring-4 ring-emerald-300 scale-110' : ''
-                        }`}
-                      >
-                        {node.value}
-                        <div className="text-xs mt-1 opacity-80">{node.next}</div>
-                      </div>
-                      {index < list1.length - 1 && (
-                        <svg
-                          className="w-8 h-8 opacity-70 text-gray-600 dark:text-gray-300"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                        >
-                          <path d="M5 12h14M12 5l7 7-7 7" />
-                        </svg>
-                      )}
-                    </React.Fragment>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* List 2 */}
-          <div className="flex flex-col items-center">
-            <h3 className="text-lg font-medium mb-2 text-emerald-600">List 2 {currentPointers.list2 < list2.length && `(Current: ${currentPointers.list2 + 1})`}</h3>
-            <div className="relative bg-gray-200/50 dark:bg-gray-800/50 border dark:border-gray-700 rounded-lg min-h-[120px] p-4 w-full max-w-4xl overflow-x-auto">
-              {list2.length === 0 ? (
-                <div className="text-center w-full py-8 text-gray-500 dark:text-gray-400">
-                  Generate List 2 to continue
-                </div>
-              ) : (
-                <div className="flex items-center justify-center space-x-2">
-                  {list2.map((node, index) => (
-                    <React.Fragment key={`list2-${node.id}`}>
-                      <div
-                        ref={(el) => (list2Refs.current[index] = el)}
-                        className={`node flex flex-col items-center justify-center bg-emerald-600 text-white text-lg w-20 h-16 rounded-md shadow-md transition-all ${
-                          index === currentPointers.list2 && isAnimating ? 'ring-4 ring-emerald-300 scale-110' : ''
-                        }`}
-                      >
-                        {node.value}
-                        <div className="text-xs mt-1 opacity-80">{node.next}</div>
-                      </div>
-                      {index < list2.length - 1 && (
-                        <svg
-                          className="w-8 h-8 opacity-70 text-gray-600 dark:text-gray-300"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                        >
-                          <path d="M5 12h14M12 5l7 7-7 7" />
-                        </svg>
-                      )}
-                    </React.Fragment>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        <p className="text-lg text-center text-gray-600 dark:text-gray-400 mt-8 mb-8">
-          Test Your Knowledge Before Moving Forward!
-        </p>
-        <Quiz />
-
-        <CodeBlock />
-
-        <ExploreOther
-          title="Explore Other Operations"
-          links={[
-            { text: "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>
-  );
-};
-
-export default LinkedListComparison;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/comparison/codeBlock.jsx b/app/visualizer/linkedList/operations/comparison/codeBlock.jsx
deleted file mode 100755
index fbd10bba5..000000000
--- 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/data/codeExamples.json b/app/visualizer/linkedList/operations/comparison/data/codeExamples.json
deleted file mode 100755
index f968730bb..000000000
--- a/app/visualizer/linkedList/operations/comparison/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 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
diff --git a/app/visualizer/linkedList/operations/comparison/data/questions.json b/app/visualizer/linkedList/operations/comparison/data/questions.json
deleted file mode 100755
index 07a432903..000000000
--- a/app/visualizer/linkedList/operations/comparison/data/questions.json
+++ /dev/null
@@ -1,112 +0,0 @@
-[
-  {
-    "question": "What is the primary goal when comparing two linked lists?",
-    "options": [
-      "To merge them into one list",
-      "To determine if they are structurally and value-wise identical",
-      "To reverse both lists",
-      "To delete duplicate nodes"
-    ],
-    "correctAnswer": 1,
-    "explanation": "The comparison aims to check whether the two linked lists have the same sequence of values in the same order."
-  },
-  {
-    "question": "What condition indicates that two linked lists are not equal?",
-    "options": [
-      "Both have the same head node",
-      "One list is longer than the other",
-      "Both lists have the same length",
-      "Both are empty"
-    ],
-    "correctAnswer": 1,
-    "explanation": "If one list ends before the other, they differ in length and are not equal."
-  },
-  {
-    "question": "What approach is commonly used to compare two linked lists?",
-    "options": [
-      "Recursive traversal",
-      "Simultaneous traversal using two pointers",
-      "Storing values in a hash map",
-      "Binary search"
-    ],
-    "correctAnswer": 1,
-    "explanation": "The most common method is using two pointers to traverse both lists node by node and compare their values."
-  },
-  {
-    "question": "What should be checked at each step during linked list comparison?",
-    "options": [
-      "If node values are equal",
-      "If both nodes are at the tail",
-      "If the next pointers match",
-      "If memory addresses are the same"
-    ],
-    "correctAnswer": 0,
-    "explanation": "At each step, the values of corresponding nodes should be compared to determine equality."
-  },
-  {
-    "question": "What does it mean if both pointers reach null at the same time during comparison?",
-    "options": [
-      "The lists are not equal",
-      "An error occurred",
-      "Both lists are equal",
-      "One list is circular"
-    ],
-    "correctAnswer": 2,
-    "explanation": "If both lists end simultaneously without any mismatches, they are equal."
-  },
-  {
-    "question": "What is the time complexity of comparing two linked lists with n nodes each?",
-    "options": [
-      "O(n^2)",
-      "O(log n)",
-      "O(n)",
-      "O(1)"
-    ],
-    "correctAnswer": 2,
-    "explanation": "Each node is visited once during comparison, resulting in linear time complexity O(n)."
-  },
-  {
-    "question": "Which case is a valid edge case in linked list comparison?",
-    "options": [
-      "One list is empty",
-      "Both lists contain the same object references",
-      "Both lists are infinite",
-      "Both lists are sorted"
-    ],
-    "correctAnswer": 0,
-    "explanation": "An important edge case is when one list is empty and the other is not."
-  },
-  {
-    "question": "How should object nodes with same values but different references be treated in comparison?",
-    "options": [
-      "As equal if their values match",
-      "As unequal always",
-      "Only compare memory addresses",
-      "Skip such nodes"
-    ],
-    "correctAnswer": 0,
-    "explanation": "Linked list comparison typically checks for value equality, not memory address equality."
-  },
-  {
-    "question": "Why is it important to compare both length and values when comparing two linked lists?",
-    "options": [
-      "Length indicates memory usage",
-      "Lists must be sorted first",
-      "To ensure complete equality",
-      "To avoid stack overflow"
-    ],
-    "correctAnswer": 2,
-    "explanation": "Even if values match in part, differing lengths imply inequality. Full comparison ensures both length and value match."
-  },
-  {
-    "question": "What will the comparison function return if the lists differ at any node?",
-    "options": [
-      "True",
-      "Null",
-      "False",
-      "0"
-    ],
-    "correctAnswer": 2,
-    "explanation": "The comparison function returns false as soon as a mismatch is detected."
-  }
-]
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/comparison/page.jsx b/app/visualizer/linkedList/operations/comparison/page.jsx
deleted file mode 100755
index 1ee53e477..000000000
--- a/app/visualizer/linkedList/operations/comparison/page.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import Animation from "@/app/visualizer/linkedList/operations/comparison/animation";
-import Navbar from "@/app/components/navbarinner";
-
-export const metadata = {
-    title: 'Linked List Comparison Algorithm | Interactive Visualization & Step-by-Step Guide',
-    description:
-        'Learn how comparison works in Linked Lists with interactive animations, detailed explanations, and hands-on practice. Visualize each step of the comparison process and master linked list algorithms efficiently.',
-    keywords: [
-        'Linked List Comparison',
-        'Comparison Animation Linked List',
-        'Visualize Comparison in Linked List',
-        'Linked List Algorithm',
-        'DSA Linked List Comparison',
-        'Linked List Comparison Visualization',
-        'Interactive Linked List',
-        'Comparison Step-by-Step',
-        'Linked List Learning',
-        'Data Structures Animation',
-        'DSA Practice Linked List',
-        'Comparison Code Example',
-        'Linked List Tutorial',
-        'Comparison using C',
-        'Comparison using Java',
-        'Comparison using Javascript',
-        'Comparison using Python',
-        'Comparison using linked list',
-    ],
-    robots: 'index, follow',
-};
-
-export default function Page() {
-  return (
-    <>
-      <Navbar/>
-      <Animation/>
-    </>
-  );
-};
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/comparison/quiz.jsx b/app/visualizer/linkedList/operations/comparison/quiz.jsx
deleted file mode 100755
index c37e51aeb..000000000
--- a/app/visualizer/linkedList/operations/comparison/quiz.jsx
+++ /dev/null
@@ -1,398 +0,0 @@
-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';
-import Questions from "@/app/visualizer/linkedList/operations/comparison/data/questions.json"
-
-const Quiz = () => {
-const questions = Questions;
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showExplanation, setShowExplanation] = useState(false);
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-  const [penaltyApplied, setPenaltyApplied] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    if (selectedAnswer !== null) return;
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (showExplanation && !penaltyApplied) {
-      setScore(prevScore => Math.max(0, prevScore - 0.5));
-      setPenaltyApplied(true);
-    }
-
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    
-    setShowExplanation(false);
-    setPenaltyApplied(false);
-    
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setShowExplanation(false);
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowExplanation(false);
-    setShowIntro(true);
-    setPenaltyApplied(false);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Selection Sort");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Selection Sort");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("comparison with other simple sorts");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("stability characteristics");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Selection Sort concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-2xl mx-auto shadow-lg rounded-xl bg-white dark:bg-gray-800 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Comparing Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-            {selectedAnswer !== null && (
-              <div className="mb-6">
-                <button
-                  onClick={() => setShowExplanation(!showExplanation)}
-                  className="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:underline mb-2"
-                >
-                  <FaInfoCircle className="mr-1" />
-                  {showExplanation ? "Hide Explanation" : "Show Explanation"}
-                </button>
-                <AnimatePresence>
-                  {showExplanation && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: "auto" }}
-                      exit={{ opacity: 0, height: 0 }}
-                      className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm overflow-hidden"
-                    >
-                      {questions[currentQuestion].explanation}
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-            )}
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default Quiz;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/deletion/animation.jsx b/app/visualizer/linkedList/operations/deletion/animation.jsx
deleted file mode 100755
index 8bf47ab54..000000000
--- a/app/visualizer/linkedList/operations/deletion/animation.jsx
+++ /dev/null
@@ -1,257 +0,0 @@
-"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('');
-  const [list, setList] = useState([]);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const nodeRefs = useRef([]);
-  const containerRef = useRef(null);
-
-  // Generate a random hex address for demonstration
-  const generateAddress = () => {
-    return '0x' + Math.floor(Math.random() * 0x10000).toString(16).toUpperCase().padStart(4, '0');
-  };
-
-  const addNode = () => {
-    if (!inputValue || isAnimating) return;
-    setIsAnimating(true);
-
-    const newNode = {
-      value: inputValue,
-      id: Date.now(),
-      address: generateAddress(),
-      next: 'NULL' // Initialize as NULL by default
-    };
-
-    // Create temporary node for animation
-    const tempNode = document.createElement('div');
-    tempNode.className = 'node flex border border-gray-300 absolute';
-    tempNode.innerHTML = `
-      <div class="data-part bg-blue-500 text-white p-4 rounded-l-lg">${inputValue}</div>
-      <div class="next-part bg-blue-300 p-4 rounded-r-lg">NULL</div>
-    `;
-    containerRef.current.appendChild(tempNode);
-
-    // Position at the top center
-    gsap.set(tempNode, {
-      x: window.innerWidth / 2 - 100,
-      y: -100,
-      opacity: 0,
-    });
-
-    // Calculate final position
-    const finalX = 50 + (list.length * 220);
-
-    // Animation sequence
-    gsap.to(tempNode, {
-      opacity: 1,
-      y: 50,
-      duration: 0.5,
-      onComplete: () => {
-        gsap.to(tempNode, {
-          x: finalX,
-          duration: 1,
-          onComplete: () => {
-            // Update the previous node's next pointer to point to this new node
-            if (list.length > 0) {
-              const updatedList = [...list];
-              updatedList[updatedList.length - 1].next = newNode.address;
-              setList([...updatedList, newNode]);
-            } else {
-              setList([newNode]);
-            }
-            setIsAnimating(false);
-            tempNode.remove();
-          }
-        });
-      }
-    });
-  };
-
-  const deleteNode = () => {
-    if (list.length === 0 || isAnimating) return;
-    setIsAnimating(true);
-
-    const nodeToDelete = nodeRefs.current[list.length - 1];
-    
-    // Animation for deletion
-    gsap.to(nodeToDelete, {
-      opacity: 0,
-      y: -50,
-      duration: 0.5,
-      onComplete: () => {
-        if (list.length > 1) {
-          const updatedList = [...list];
-          updatedList.pop(); // Remove last node
-          updatedList[updatedList.length - 1].next = 'NULL'; // Update new last node's next pointer
-          setList(updatedList);
-        } else {
-          setList([]); // Empty the list if only one node
-        }
-        setIsAnimating(false);
-      }
-    });
-  };
-
-  const resetList = () => {
-    if (isAnimating) return;
-    
-    // Animate all nodes out
-    gsap.to(nodeRefs.current, {
-      opacity: 0,
-      y: -50,
-      duration: 0.5,
-      stagger: 0.1,
-      onComplete: () => {
-        setList([]);
-      }
-    });
-  };
-
-  // Update node refs when list changes
-  useEffect(() => {
-    if (list.length > 0 && nodeRefs.current.length === list.length) {
-      gsap.from(nodeRefs.current, {
-        opacity: 0,
-        y: 20,
-        duration: 0.5,
-        stagger: 0.1,
-      });
-    }
-  }, [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 />
-        <p className="text-base sm:text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-          Visualize Linked List Deletion Operation
-        </p>
-        
-        {/* Input Form */}
-        <div className="flex justify-center mb-8">
-            <div className="bg-white dark:bg-gray-800 border dark:border-gray-700 p-4 sm:p-6 w-full max-w-4xl rounded-lg shadow-md">
-                <div className="flex flex-col sm:flex-row gap-4">
-                    <input
-                        type="text"
-                        value={inputValue}
-                        onChange={(e) => setInputValue(e.target.value)}
-                        className="flex-1 p-3 border bg-white dark:bg-gray-700 rounded-lg"
-                        placeholder="Enter value"
-                        disabled={isAnimating}
-                    />
-                    <button
-                        onClick={addNode}
-                        disabled={isAnimating || !inputValue}
-                        className="bg-blue-600 text-white px-6 py-3 rounded-lg disabled:bg-gray-400 w-full sm:w-auto"
-                    >
-                        {isAnimating ? 'Adding...' : 'Add Node'}
-                    </button>
-                </div>
-                <div className="flex flex-col sm:flex-row gap-4 mt-4">
-                    <button
-                        onClick={deleteNode}
-                        disabled={isAnimating || list.length === 0}
-                        className="bg-transparent disabled:opacity-50 text-black dark:text-white border w-full border-black dark:border-white px-6 py-3 rounded-lg"
-                    >
-                        {isAnimating ? 'Deleting...' : 'Delete Last Node'}
-                    </button>
-                    <button
-                        onClick={resetList}
-                        disabled={isAnimating || list.length === 0}
-                        className="bg-transparent text-black dark:text-white border border-black dark:border-white w-full px-6 py-3 rounded-lg"
-                    >
-                        Reset
-                    </button>
-                </div>
-            </div>
-        </div>
-
-        {/* Legend - Responsive */}
-        <div className="mb-4 flex justify-center space-x-4 sm:space-x-8 text-sm sm:text-base">
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-full bg-blue-500 mr-2"></div>
-            <span>Data</span>
-          </div>
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-full bg-blue-300 dark:bg-blue-600 mr-2"></div>
-            <span>Next Pointer</span>
-          </div>
-        </div>
-
-        {/* Visualization Area */}
-        <div className="flex justify-center">
-        <div 
-          ref={containerRef}
-          className="relative bg-gray-200 border dark:border-gray-700 dark:bg-gray-800 rounded-lg min-h-auto p-2 sm:p-4 flex justify-center items-start max-w-full sm:max-w-4xl w-full overflow-x-auto"
-        >
-          {list.length === 0 ? (
-            <div className="text-center w-full py-16 text-gray-500">
-              No nodes added yet
-            </div>
-          ) : (
-            <div className="flex items-center space-x-8">
-              {list.map((node, index) => (
-                <div key={node.id} className="flex items-center">
-                  <div
-                    ref={(el) => (nodeRefs.current[index] = el)}
-                    className="node flex"
-                  >
-                    <div className="data-part bg-blue-500 text-white p-4 rounded-l-lg w-20 text-center">
-                      {node.value}
-                    </div>
-                    <div className="next-part bg-blue-300 dark:bg-blue-600 p-4 rounded-r-lg w-20 text-center font-mono">
-                      {node.next}
-                    </div>
-                  </div>
-                  {index < list.length - 1 && (
-                    <div className="mx-2 text-3xl">→</div>
-                  )}
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-        </div>
-
-        <p className="text-lg text-center text-gray-600 dark:text-gray-400 mt-8 mb-8">
-          Test Your Knowledge before moving forward!
-        </p>
-        <Quiz />
-
-        <CodeBlock/>
-
-        <ExploreOther
-          title="Explore Other Types"
-          links={[
-            { text: "Insertion", url: "./insertion" },
-            { text: "Searching", url: "./search" },
-            { text: "Merge Lists", url: "./merge" },
-            { text: "Comparison", url: "./comparison" },
-          ]}
-        />
-      </main>
-      <BackToTop />
-      <Footer />
-    </div>
-  );
-};
-
-export default LinkedListVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/deletion/codeBlock.jsx b/app/visualizer/linkedList/operations/deletion/codeBlock.jsx
deleted file mode 100755
index 9b0b88b04..000000000
--- 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/content.jsx b/app/visualizer/linkedList/operations/deletion/content.jsx
deleted file mode 100755
index 0f7ece6f1..000000000
--- a/app/visualizer/linkedList/operations/deletion/content.jsx
+++ /dev/null
@@ -1,405 +0,0 @@
-const content = () => {
-  const overview = [
-    `Linked List deletion involves removing nodes from the linked data structure at various positions. Unlike arrays, linked lists allow efficient deletion at any point without requiring shifting of remaining elements.`,
-    `Deletion is a fundamental operation that enables dynamic modification of the list. The efficiency varies based on deletion position, from O(1) for head to O(n) for arbitrary positions or tail (without tail pointer).`,
-    `Proper deletion requires careful pointer manipulation to maintain list integrity and avoid memory leaks (in languages without garbage collection).`,
-  ];
-
-  const deletionTypes = [
-    { 
-      name: "Deletion at Head", 
-      complexity: "O(1)", 
-      description: "Removes the first node, making the next node the new head",
-      code: `function deleteHead() {
-  if (!head) return; // Empty list
-  
-  const temp = head;
-  head = head.next;
-  
-  // In languages without GC:
-  // temp.next = null; // Isolate node
-  // free(temp);       // Free memory
-  
-  // Special case: If list becomes empty
-  if (!head) tail = null;
-}`
-    },
-    { 
-      name: "Deletion at Tail", 
-      complexity: "O(n) without tail pointer, O(1) with doubly linked list", 
-      description: "Removes the last node, requiring traversal to find new tail",
-      code: `function deleteTail() {
-  if (!head) return; // Empty list
-  
-  // Single node case
-  if (!head.next) {
-    head = null;
-    tail = null;
-    return;
-  }
-  
-  // Traverse to find node before tail
-  let current = head;
-  while (current.next && current.next.next) {
-    current = current.next;
-  }
-  
-  // Now current is the new tail
-  current.next = null;
-  tail = current;
-}`
-    },
-    { 
-      name: "Deletion by Value", 
-      complexity: "O(n)", 
-      description: "Finds and removes first node containing matching value",
-      code: `function deleteValue(value) {
-  if (!head) return; // Empty list
-  
-  // Special case: head contains value
-  if (head.data === value) {
-    deleteHead();
-    return;
-  }
-  
-  let current = head;
-  while (current.next && current.next.data !== value) {
-    current = current.next;
-  }
-  
-  if (current.next) {
-    const toDelete = current.next;
-    current.next = toDelete.next;
-    
-    // Update tail if deleting last node
-    if (!current.next) tail = current;
-    
-    // In languages without GC:
-    // toDelete.next = null;
-    // free(toDelete);
-  }
-}`
-    },
-    { 
-      name: "Deletion at Position", 
-      complexity: "O(n)", 
-      description: "Removes node at specific index (0-based)",
-      code: `function deleteAt(position) {
-  if (!head || position < 0) return;
-  
-  if (position === 0) {
-    deleteHead();
-    return;
-  }
-  
-  let current = head;
-  for (let i = 0; current && i < position-1; i++) {
-    current = current.next;
-  }
-  
-  if (!current || !current.next) return; // Out of bounds
-  
-  const toDelete = current.next;
-  current.next = toDelete.next;
-  
-  // Update tail if deleting last node
-  if (!current.next) tail = current;
-  
-  // Memory cleanup in non-GC languages
-  // toDelete.next = null;
-  // free(toDelete);
-}`
-    },
-  ];
-
-  const headDeletionSteps = [
-    { step: "Check if list is empty (head is null)" },
-    { step: "Store reference to current head node" },
-    { step: "Update head pointer to head.next" },
-    { step: "Handle memory cleanup (if needed)" },
-    { step: "Special case: If list becomes empty, update tail pointer" },
-  ];
-
-  const tailDeletionSteps = [
-    { step: "Check for empty list" },
-    { step: "Handle single node case separately" },
-    { step: "Traverse to find node before tail (penultimate node)" },
-    { step: "Set penultimate node's next to null" },
-    { step: "Update tail pointer to penultimate node" },
-  ];
-
-  const middleDeletionSteps = [
-    { step: "Traverse to find node before target node" },
-    { step: "Update previous node's next pointer to skip target" },
-    { step: "Handle special case when deleting last node" },
-    { step: "Perform memory cleanup (if needed)" },
-  ];
-
-  const visualization = [
-    { operation: "Initial State", state: "head → [A] → [B] → [C] → [D] → null" },
-    { operation: "deleteHead()", state: "head → [B] → [C] → [D] → null" },
-    { operation: "deleteTail()", state: "head → [B] → [C] → null" },
-    { operation: "deleteValue('C')", state: "head → [B] → null" },
-    { operation: "deleteAt(0)", state: "head → null" },
-  ];
-
-  const edgeCases = [
-    "Empty list (head = null)",
-    "Single node list (head = tail)",
-    "Deleting head node",
-    "Deleting tail node",
-    "Deleting non-existent value",
-    "Deleting at invalid position (negative or out of bounds)",
-    "Memory management in non-GC languages",
-  ];
-
-  const bestPractices = [
-    "Always check for empty list before deletion",
-    "Maintain proper head/tail pointers after deletion",
-    "Handle single node case separately",
-    "In non-GC languages, properly free deleted node memory",
-    "Consider using dummy nodes to simplify edge cases",
-    "Document position/indexing scheme (0-based vs 1-based)",
-    "Validate position bounds before deletion attempts",
-  ];
-
-  const comparisonTable = [
-    { 
-      feature: "Time Complexity", 
-      array: "O(n) (requires shifting)", 
-      linkedList: "O(1) head, O(n) arbitrary/tail" 
-    },
-    { 
-      feature: "Space Complexity", 
-      array: "O(1)", 
-      linkedList: "O(1)" 
-    },
-    { 
-      feature: "Memory Usage", 
-      array: "Fixed size unless resized", 
-      linkedList: "Dynamic, no unused capacity" 
-    },
-    { 
-      feature: "Implementation", 
-      array: "Simple indexing", 
-      linkedList: "Pointer manipulation" 
-    },
-    { 
-      feature: "Best For", 
-      array: "Frequent random access", 
-      linkedList: "Frequent deletions at head" 
-    },
-  ];
-
-  return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
-        {/* Overview Section */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Deletion
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            {overview.map((para, index) => (
-              <p key={index} className="text-[#374151] dark:text-[#d1d5db] mb-3 leading-relaxed">
-                {para}
-              </p>
-            ))}
-            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                <strong>Key Consideration:</strong> Proper deletion requires maintaining list connectivity and handling memory appropriately to prevent leaks (in manual memory management environments).
-              </p>
-            </div>
-          </div>
-        </section>
-
-        {/* Deletion Types */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Deletion Types</h2>
-          <div className="space-y-6">
-            {deletionTypes.map((type, index) => (
-              <div key={index} className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{type.name}</h3>
-                <div className="flex flex-col md:flex-row gap-4">
-                  <div className="flex-1">
-                    <p className="text-[#374151] dark:text-[#d1d5db] mb-2"><strong>Complexity:</strong> <span className="font-mono">{type.complexity}</span></p>
-                    <p className="text-[#374151] dark:text-[#d1d5db]">{type.description}</p>
-                  </div>
-                  <div className="flex-1">
-                    <pre className="bg-gray-100 dark:bg-gray-800 p-3 rounded-md text-sm overflow-x-auto">
-                      <code className="text-gray-800 dark:text-gray-200">{type.code}</code>
-                    </pre>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        {/* Deletion Processes */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Deletion Processes</h2>
-          <div className="grid md:grid-cols-3 gap-6">
-            {/* Head Deletion */}
-            <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Head Deletion</h3>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {headDeletionSteps.map((step, index) => (
-                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                    {step.step}
-                  </li>
-                ))}
-              </ol>
-            </div>
-
-            {/* Tail Deletion */}
-            <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Tail Deletion</h3>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {tailDeletionSteps.map((step, index) => (
-                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                    {step.step}
-                  </li>
-                ))}
-              </ol>
-            </div>
-
-            {/* Middle Deletion */}
-            <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Middle Deletion</h3>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {middleDeletionSteps.map((step, index) => (
-                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                    {step.step}
-                  </li>
-                ))}
-              </ol>
-              </div>
-          </div>
-        </section>
-
-        {/* Visualization */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Operation Visualization</h2>
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-              <thead className="bg-gray-50 dark:bg-gray-700">
-                <tr>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Operation</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">List State</th>
-                </tr>
-              </thead>
-              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                {visualization.map((item, index) => (
-                  <tr key={index}>
-                    <td className="px-4 py-3 text-sm font-mono text-gray-900 dark:text-white">{item.operation}</td>
-                    <td className="px-4 py-3 text-sm font-mono text-[#374151] dark:text-[#d1d5db]">{item.state}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
-
-        {/* Edge Cases */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Edge Cases to Consider</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {edgeCases.map((caseItem, index) => (
-              <div key={index} className="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg border border-gray-200 dark:border-gray-600">
-                <div className="flex items-start">
-                  <div className="flex-shrink-0 h-5 w-5 text-yellow-500 mt-0.5">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                      <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-                    </svg>
-                  </div>
-                  <div className="ml-3">
-                    <p className="text-sm text-[#374151] dark:text-[#d1d5db]">{caseItem}</p>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        {/* Best Practices */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Best Practices</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {bestPractices.map((practice, index) => (
-              <div key={index} className="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg border border-gray-200 dark:border-gray-600">
-                <div className="flex items-start">
-                  <div className="flex-shrink-0 h-5 w-5 text-green-500 mt-0.5">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
-                    </svg>
-                  </div>
-                  <div className="ml-3">
-                    <p className="text-sm text-[#374151] dark:text-[#d1d5db]">{practice}</p>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        {/* Comparison with Arrays */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Comparison with Array Deletion</h2>
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-              <thead className="bg-gray-50 dark:bg-gray-700">
-                <tr>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Array</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Linked List</th>
-                </tr>
-              </thead>
-              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                {comparisonTable.map((row, index) => (
-                  <tr key={index}>
-                    <td className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{row.feature}</td>
-                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.array}</td>
-                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.linkedList}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-          <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              <strong>When to Choose:</strong> Prefer linked lists when you need frequent deletions, especially at the head. Use arrays when you need index-based access and memory efficiency for small, fixed-size collections.
-            </p>
-          </div>
-        </section>
-
-        {/* Final Notes */}
-        <section className="p-6">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Implementation Notes</h2>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="list-disc pl-5 space-y-2 marker:text-blue-500 dark:marker:text-blue-400">
-              <li className="text-[#374151] dark:text-[#d1d5db]">
-                <strong>Memory Management:</strong> In languages without garbage collection, ensure proper memory deallocation when deleting nodes
-              </li>
-              <li className="text-[#374151] dark:text-[#d1d5db]">
-                <strong>Error Handling:</strong> Implement robust checks for edge cases to prevent null pointer exceptions
-              </li>
-              <li className="text-[#374151] dark:text-[#d1d5db]">
-                <strong>Testing:</strong> Thoroughly test all deletion scenarios including empty list, single-node list, head/tail deletions
-              </li>
-              <li className="text-[#374151] dark:text-[#d1d5db]">
-                <strong>Optimizations:</strong> For frequent tail deletions, consider using a doubly linked list for O(1) performance
-              </li>
-              <li className="text-[#374151] dark:text-[#d1d5db]">
-                <strong>Documentation:</strong> Clearly document whether your deletion methods return the deleted value or just remove it
-              </li>
-            </ul>
-          </div>
-        </section>
-      </article>
-    </main>
-  );
-};
-
-export default content;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/deletion/data/codeExamples.json b/app/visualizer/linkedList/operations/deletion/data/codeExamples.json
deleted file mode 100755
index 45a5dd128..000000000
--- a/app/visualizer/linkedList/operations/deletion/data/codeExamples.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "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
diff --git a/app/visualizer/linkedList/operations/deletion/data/questions.json b/app/visualizer/linkedList/operations/deletion/data/questions.json
deleted file mode 100755
index e54b97895..000000000
--- a/app/visualizer/linkedList/operations/deletion/data/questions.json
+++ /dev/null
@@ -1,156 +0,0 @@
-[
-    {
-        "question": "What is the time complexity of deleting the head node in a linked list?",
-        "options": [
-            "O(1)",
-            "O(n)",
-            "O(log n)",
-            "O(n²)"
-        ],
-        "correctAnswer": 0,
-        "explanation": "Head deletion is O(1) as it only requires updating the head pointer."
-    },
-    {
-        "question": "What special case must be handled when deleting the last node in a linked list?",
-        "options": [
-            "Update both head and tail pointers to null",
-            "Only update the head pointer",
-            "Create a circular reference",
-            "No special handling needed"
-        ],
-        "correctAnswer": 0,
-        "explanation": "When deleting the last node, both head and tail pointers must be set to null as the list becomes empty."
-    },
-    {
-        "question": "What is the time complexity of deleting a node by value in the worst case?",
-        "options": [
-            "O(1)",
-            "O(n)",
-            "O(log n)",
-            "O(n log n)"
-        ],
-        "correctAnswer": 1,
-        "explanation": "Deleting by value is O(n) in the worst case as it may require traversing the entire list."
-    },
-    {
-        "question": "Which pointer modifications are needed when deleting a middle node?",
-        "options": [
-            "Update the previous node's next to skip the deleted node",
-            "Set the deleted node's next to null",
-            "Update the head pointer",
-            "Both A and B"
-        ],
-        "correctAnswer": 3,
-        "explanation": "Middle deletion requires: (1) bypassing the deleted node in the list, and (2) cleaning up the deleted node's pointers."
-    },
-    {
-        "question": "What is the main advantage of linked list deletion over array deletion?",
-        "options": [
-            "No need to shift remaining elements",
-            "Better cache locality",
-            "Lower memory usage overall",
-            "Built-in sorting after deletion"
-        ],
-        "correctAnswer": 0,
-        "explanation": "Linked lists don't require shifting elements during deletion, unlike arrays."
-    },
-    {
-        "question": "What critical step is needed when deleting nodes in languages without garbage collection?",
-        "options": [
-            "Manually free the deleted node's memory",
-            "Update all other nodes' data",
-            "Create a new tail pointer",
-            "Nothing special is needed"
-        ],
-        "correctAnswer": 0,
-        "explanation": "In non-GC languages, you must manually free the memory of deleted nodes to prevent leaks."
-    },
-    {
-        "question": "When deleting at position in a linked list, what case requires O(1) time?",
-        "options": [
-            "Position 0 (head)",
-            "Middle positions",
-            "Last position without tail pointer",
-            "All positions"
-        ],
-        "correctAnswer": 0,
-        "explanation": "Only head deletion (position 0) is O(1); others may require traversal."
-    },
-    {
-        "question": "What happens if you forget to update the tail pointer when deleting the last node?",
-        "options": [
-            "The tail pointer becomes dangling",
-            "Automatic garbage collection fixes it",
-            "No issues occur",
-            "The list becomes circular"
-        ],
-        "correctAnswer": 0,
-        "explanation": "The tail pointer would point to deallocated memory, creating a dangerous dangling pointer."
-    },
-    {
-        "question": "Which deletion scenario requires traversing approximately half the list on average?",
-        "options": [
-            "Head deletion",
-            "Tail deletion with tail pointer",
-            "Random middle position deletion",
-            "Deleting by value at head"
-        ],
-        "correctAnswer": 2,
-        "explanation": "Random middle deletions average n/2 traversal operations (O(n))."
-    },
-    {
-        "question": "What should be your first step in any deletion operation?",
-        "options": [
-            "Check if the list is empty",
-            "Update the head pointer",
-            "Free all memory",
-            "Traverse the entire list"
-        ],
-        "correctAnswer": 0,
-        "explanation": "Always first check for empty list to avoid null pointer exceptions."
-    },
-    {
-        "question": "Why is tail deletion O(n) in a singly linked list without a tail pointer?",
-        "options": [
-            "Need to traverse to find the new tail",
-            "Requires sorting after deletion",
-            "Must update all node values",
-            "Memory allocation is slow"
-        ],
-        "correctAnswer": 0,
-        "explanation": "Without a tail pointer, you must traverse from head to find the penultimate node to update."
-    },
-    {
-        "question": "What is the space complexity of deletion operations in a linked list?",
-        "options": [
-            "O(1)",
-            "O(n)",
-            "O(log n)",
-            "Depends on the position"
-        ],
-        "correctAnswer": 0,
-        "explanation": "Deletion uses constant space regardless of list size, only needing a few temporary pointers."
-    },
-    {
-        "question": "When deleting by value, what happens if the value appears multiple times?",
-        "options": [
-            "Only the first occurrence is deleted",
-            "All occurrences are deleted",
-            "Random occurrence is deleted",
-            "Implementation determines behavior"
-        ],
-        "correctAnswer": 3,
-        "explanation": "The behavior depends on implementation - some delete first match, some delete all."
-    },
-    {
-        "question": "What optimization allows O(1) tail deletion?",
-        "options": [
-            "Maintaining a tail pointer in doubly linked list",
-            "Using a circular list",
-            "Keeping a size counter",
-            "Storing all node addresses in an array"
-        ],
-        "correctAnswer": 0,
-        "explanation": "A doubly linked list with tail pointer enables O(1) tail deletion via the previous pointers."
-    }
-]
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/deletion/page.jsx b/app/visualizer/linkedList/operations/deletion/page.jsx
deleted file mode 100755
index 27bcfcf99..000000000
--- a/app/visualizer/linkedList/operations/deletion/page.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import Animation from "@/app/visualizer/linkedList/operations/deletion/animation";
-import Navbar from "@/app/components/navbarinner";
-
-export const metadata = {
-    title: 'Linked List Deletion Algorithm | Interactive Visualization & Step-by-Step Guide',
-    description:
-        'Learn how deletion works in Linked Lists with interactive animations, detailed explanations, and hands-on practice. Visualize each step of the deletion process and master linked list algorithms efficiently.',
-    keywords: [
-        'Linked List Deletion',
-        'Deletion Animation Linked List',
-        'Visualize Deletion in Linked List',
-        'Linked List Algorithm',
-        'DSA Linked List Deletion',
-        'Linked List Deletion Visualization',
-        'Interactive Linked List',
-        'Deletion Step-by-Step',
-        'Linked List Learning',
-        'Data Structures Animation',
-        'DSA Practice Linked List',
-        'Deletion Code Example',
-        'Linked List Tutorial',
-        'Deletion using C',
-        'Deletion using Java',
-        'Deletion using Javascript',
-        'Deletion using Python',
-        'Deletion using linked list',
-    ],
-    robots: 'index, follow',
-};
-
-export default function Page() {
-  return (
-    <>
-      <Navbar/>
-      <Animation/>
-    </>
-  );
-};
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/deletion/quiz.jsx b/app/visualizer/linkedList/operations/deletion/quiz.jsx
deleted file mode 100755
index 560356c25..000000000
--- a/app/visualizer/linkedList/operations/deletion/quiz.jsx
+++ /dev/null
@@ -1,399 +0,0 @@
-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';
-import Questions from "@/app/visualizer/linkedList/operations/deletion/data/questions.json";
-
-const Quiz = () => {
-const questions = Questions;
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showExplanation, setShowExplanation] = useState(false);
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-  const [penaltyApplied, setPenaltyApplied] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    if (selectedAnswer !== null) return;
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (showExplanation && !penaltyApplied) {
-      setScore(prevScore => Math.max(0, prevScore - 0.5));
-      setPenaltyApplied(true);
-    }
-
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    
-    setShowExplanation(false);
-    setPenaltyApplied(false);
-    
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setShowExplanation(false);
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowExplanation(false);
-    setShowIntro(true);
-    setPenaltyApplied(false);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Selection Sort");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Selection Sort");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("comparison with other simple sorts");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("stability characteristics");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Selection Sort concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-2xl mx-auto shadow-lg rounded-xl bg-white dark:bg-gray-800 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Deletion Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-            {selectedAnswer !== null && (
-              <div className="mb-6">
-                <button
-                  onClick={() => setShowExplanation(!showExplanation)}
-                  className="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:underline mb-2"
-                >
-                  <FaInfoCircle className="mr-1" />
-                  {showExplanation ? "Hide Explanation" : "Show Explanation"}
-                </button>
-                <AnimatePresence>
-                  {showExplanation && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: "auto" }}
-                      exit={{ opacity: 0, height: 0 }}
-                      className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm overflow-hidden"
-                    >
-                      {questions[currentQuestion].explanation}
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-            )}
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default Quiz;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/insertion/animation.jsx b/app/visualizer/linkedList/operations/insertion/animation.jsx
deleted file mode 100755
index d30d2b086..000000000
--- a/app/visualizer/linkedList/operations/insertion/animation.jsx
+++ /dev/null
@@ -1,251 +0,0 @@
-"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('');
-  const [list, setList] = useState([]);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const nodeRefs = useRef([]);
-  const containerRef = useRef(null);
-  const animationTimeline = useRef(gsap.timeline());
-
-  // Generate a random hex address for demonstration
-  const generateAddress = () => {
-    return '0x' + Math.floor(Math.random() * 0x10000).toString(16).toUpperCase().padStart(4, '0');
-  };
-
-  const addNode = () => {
-    if (!inputValue || isAnimating) return;
-    setIsAnimating(true);
-
-    const newNode = {
-      value: inputValue,
-      id: Date.now(),
-      address: generateAddress(),
-      next: 'NULL'
-    };
-
-    const tempNode = document.createElement('div');
-    tempNode.className = 'node flex border border-gray-300 absolute';
-    tempNode.innerHTML = `
-      <div class="data-part bg-blue-500 text-white p-4 rounded-l-lg">${inputValue}</div>
-      <div class="next-part bg-blue-300 p-4 rounded-r-lg">NULL</div>
-    `;
-    containerRef.current.appendChild(tempNode);
-
-    // Center the temporary node
-    gsap.set(tempNode, {
-      x: '50%',
-      xPercent: -50,
-      y: -100,
-      opacity: 0,
-    });
-
-    // Calculate final position
-    const finalX = list.length * 220;
-
-    // Clear previous animations and create new sequence
-    animationTimeline.current.clear();
-    animationTimeline.current
-      .to(tempNode, {
-        opacity: 1,
-        y: 50,
-        duration: 0.5
-      })
-      .to(tempNode, {
-        x: finalX,
-        xPercent: 0,
-        duration: 1,
-        onComplete: () => {
-          if (list.length > 0) {
-            const updatedList = [...list];
-            updatedList[updatedList.length - 1].next = newNode.address;
-            setList([...updatedList, newNode]);
-          } else {
-            setList([newNode]);
-          }
-          setIsAnimating(false);
-          tempNode.remove();
-        }
-      });
-  };
-
-  // Reset handler
-  const handleReset = () => {
-    // Kill all GSAP animations
-    gsap.killTweensOf("*");
-    animationTimeline.current.clear();
-
-    // Clear all nodes from DOM
-    if (containerRef.current) {
-      const tempNodes = containerRef.current.querySelectorAll(".node");
-      tempNodes.forEach((node) => node.remove());
-    }
-
-    // Reset state
-    setInputValue("");
-    setList([]);
-    nodeRefs.current = [];
-    setIsAnimating(false);
-  };
-
-  // Update node refs when list changes
-  useEffect(() => {
-    // Reset nodeRefs to match the current list length
-    nodeRefs.current = nodeRefs.current.slice(0, list.length);
-
-    if (list.length > 0 && nodeRefs.current.length === list.length) {
-      gsap.from(nodeRefs.current, {
-        opacity: 0,
-        y: 20,
-        duration: 0.5,
-        stagger: 0.1,
-      });
-    }
-  }, [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 />
-        <p className="text-base sm:text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-          Visualize Linked List Insertion
-        </p>
-
-        {/* Input Form - Responsive */}
-        <div className="flex justify-center mb-8">
-          <div className="bg-white dark:bg-gray-800 border dark:border-gray-700 p-4 sm:p-6 w-full max-w-4xl rounded-lg shadow-md">
-            <div className="flex flex-col sm:flex-row gap-4">
-              <input
-                type="text"
-                value={inputValue}
-                onChange={(e) => setInputValue(e.target.value)}
-                className="flex-1 p-3 border border-gray-400 bg-white dark:bg-gray-800 rounded-lg"
-                placeholder="Enter value"
-                disabled={isAnimating}
-              />
-              {/* Buttons for desktop */}
-              <div className="hidden sm:flex gap-2">
-                <button
-                  onClick={addNode}
-                  disabled={isAnimating || !inputValue}
-                  className="bg-blue-600 text-white px-6 py-3 rounded-lg disabled:bg-gray-400"
-                >
-                  {isAnimating ? "Adding..." : "Add Node"}
-                </button>
-                <button
-                  onClick={handleReset}
-                  className="bg-transparent text-black dark:text-white border border-black dark:border-white px-6 py-3 rounded-lg"
-                >
-                  Reset
-                </button>
-              </div>
-            </div>
-            {/* Buttons for mobile */}
-            <div className="flex sm:hidden flex-col gap-2 mt-4">
-              <button
-                onClick={addNode}
-                disabled={isAnimating || !inputValue}
-                className="bg-blue-600 text-white px-6 py-3 rounded-lg disabled:bg-gray-400"
-              >
-                {isAnimating ? "Adding..." : "Add Node"}
-              </button>
-              <button
-                onClick={handleReset}
-                className="bg-transparent text-black dark:text-white border border-black dark:border-white px-6 py-3 rounded-lg"
-              >
-                Reset
-              </button>
-            </div>
-          </div>
-        </div>
-
-        {/* Legend - Responsive */}
-        <div className="mb-4 flex justify-center space-x-4 sm:space-x-8 text-sm sm:text-base">
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-full bg-blue-500 mr-2"></div>
-            <span>Data</span>
-          </div>
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-full bg-blue-300 dark:bg-blue-600 mr-2"></div>
-            <span>Next Pointer</span>
-          </div>
-        </div>
-
-        {/* Visualization Area - Responsive */}
-          <div className="flex justify-center">
-            <div
-              ref={containerRef}
-              className="relative bg-gray-200 border dark:border-gray-700 dark:bg-gray-800 rounded-lg min-h-auto p-2 sm:p-4 flex justify-center items-start max-w-full sm:max-w-4xl w-full overflow-x-auto"
-            >
-              {list.length === 0 ? (
-                <div className="text-center w-full py-12 sm:py-16 text-gray-500 text-base sm:text-lg">
-            No nodes added yet
-                </div>
-              ) : (
-                <div className="flex items-center space-x-4 sm:space-x-8">
-            {list.map((node, index) => (
-              <div key={node.id} className="flex items-center">
-                <div
-                  ref={(el) => (nodeRefs.current[index] = el)}
-                  className="node flex"
-                >
-                  <div className="data-part bg-blue-500 text-white p-3 sm:p-4 rounded-l-lg w-16 sm:w-20 text-center text-base sm:text-lg">
-              {node.value}
-                  </div>
-                  <div className="next-part bg-blue-300 dark:bg-blue-600 p-3 sm:p-4 rounded-r-lg w-16 sm:w-20 text-center font-mono text-xs sm:text-base">
-              {node.next}
-                  </div>
-                </div>
-                {index < list.length - 1 && (
-                  <div className="mx-1 sm:mx-2 text-2xl sm:text-3xl">→</div>
-                )}
-              </div>
-            ))}
-                </div>
-              )}
-            </div>
-          </div>
-
-        <p className="text-lg text-center text-gray-600 dark:text-gray-400 mt-8 mb-8">
-          Test Your Knowledge before moving forward!
-        </p>
-        <Quiz />
-
-        <CodeBlock/>
-
-        <ExploreOther
-          title="Explore Other Types"
-          links={[
-            { text: "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>
-  );
-};
-
-export default LinkedListVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/insertion/codeBlock.jsx b/app/visualizer/linkedList/operations/insertion/codeBlock.jsx
deleted file mode 100755
index 6773c578b..000000000
--- 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/content.jsx b/app/visualizer/linkedList/operations/insertion/content.jsx
deleted file mode 100755
index fea2e1c4d..000000000
--- a/app/visualizer/linkedList/operations/insertion/content.jsx
+++ /dev/null
@@ -1,352 +0,0 @@
-const content = () => {
-  const overview = [
-    `Linked List insertion involves adding new nodes to the linked data structure at various positions. Unlike arrays, linked lists allow efficient insertion at any point without reallocation or shifting of existing elements.`,
-    `Insertion is a fundamental operation that enables dynamic growth of the list. The efficiency varies based on insertion position, from O(1) for head/tail (with tail pointer) to O(n) for arbitrary positions.`,
-    `Mastering insertion techniques is crucial for building more complex data structures and algorithms that utilize linked lists as their foundation.`,
-  ];
-
-  const insertionTypes = [
-    { 
-      name: "Insertion at Head", 
-      complexity: "O(1)", 
-      description: "Adds new node at the beginning, making it the new head",
-      code: `function insertHead(data) {
-  const newNode = new Node(data);
-  newNode.next = head;
-  head = newNode;
-}`
-    },
-    { 
-      name: "Insertion at Tail", 
-      complexity: "O(1) with tail pointer, O(n) without", 
-      description: "Appends new node at the end of the list",
-      code: `function insertTail(data) {
-  const newNode = new Node(data);
-  if (!head) {
-    head = newNode;
-    tail = newNode;
-  } else {
-    tail.next = newNode;
-    tail = newNode;
-  }
-}`
-    },
-    { 
-      name: "Insertion at Position", 
-      complexity: "O(n)", 
-      description: "Inserts node at specific index (0-based)",
-      code: `function insertAt(data, position) {
-  if (position === 0) return insertHead(data);
-  
-  let current = head;
-  for (let i = 0; i < position-1 && current; i++) {
-    current = current.next;
-  }
-  
-  if (!current) return; // Position out of bounds
-  
-  const newNode = new Node(data);
-  newNode.next = current.next;
-  current.next = newNode;
-  
-  if (!newNode.next) tail = newNode;
-}`
-    },
-    { 
-      name: "Insertion After Node", 
-      complexity: "O(1)", 
-      description: "Inserts new node after a given reference node",
-      code: `function insertAfter(refNode, data) {
-  const newNode = new Node(data);
-  newNode.next = refNode.next;
-  refNode.next = newNode;
-  
-  if (refNode === tail) tail = newNode;
-}`
-    },
-  ];
-
-  const headInsertionSteps = [
-    { step: "Create a new node with the given data" },
-    { step: "Set the new node's next pointer to current head" },
-    { step: "Update the head pointer to point to the new node" },
-    { step: "Special case: If list was empty, update tail pointer too" },
-  ];
-
-  const tailInsertionSteps = [
-    { step: "Create a new node with the given data" },
-    { step: "If list is empty, set both head and tail to new node" },
-    { step: "Otherwise, set current tail's next pointer to new node" },
-    { step: "Update tail pointer to the new node" },
-  ];
-
-  const middleInsertionSteps = [
-    { step: "Traverse the list to find the insertion position" },
-    { step: "Create a new node with the given data" },
-    { step: "Set new node's next to the next node of current position" },
-    { step: "Set current node's next pointer to the new node" },
-    { step: "Special case: If inserting at end, update tail pointer" },
-  ];
-
-  const visualization = [
-    { operation: "Initial State", state: "head → [A] → [B] → [C] → null" },
-    { operation: "insertHead(X)", state: "head → [X] → [A] → [B] → [C] → null" },
-    { operation: "insertTail(Y)", state: "head → [X] → [A] → [B] → [C] → [Y] → null" },
-    { operation: "insertAt(Z, 2)", state: "head → [X] → [A] → [Z] → [B] → [C] → [Y] → null" },
-  ];
-
-  const edgeCases = [
-    "Empty list (head = null)",
-    "Insertion at position 0 (becomes new head)",
-    "Insertion at position = list length (becomes new tail)",
-    "Insertion at position > list length (should handle gracefully)",
-    "Insertion after tail node (should update tail pointer)",
-    "Insertion with invalid node references",
-  ];
-
-  const bestPractices = [
-    "Always check for empty list condition",
-    "Maintain tail pointer for O(1) tail insertion",
-    "Validate position bounds before insertion",
-    "Update tail pointer when inserting at end",
-    "Consider using dummy nodes to simplify edge cases",
-    "Document whether position is 0-based or 1-based",
-  ];
-
-  const comparisonTable = [
-    { 
-      feature: "Time Complexity", 
-      array: "O(n) (requires shifting)", 
-      linkedList: "O(1) head/tail, O(n) arbitrary" 
-    },
-    { 
-      feature: "Space Complexity", 
-      array: "O(1) (amortized)", 
-      linkedList: "O(1) per insertion" 
-    },
-    { 
-      feature: "Memory Usage", 
-      array: "May need reallocation", 
-      linkedList: "No reallocation needed" 
-    },
-    { 
-      feature: "Implementation", 
-      array: "Simple indexing", 
-      linkedList: "Pointer manipulation" 
-    },
-    { 
-      feature: "Best For", 
-      array: "Frequent random access", 
-      linkedList: "Frequent insertions/deletions" 
-    },
-  ];
-
-  return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
-        {/* Overview Section */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Insertion
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            {overview.map((para, index) => (
-              <p key={index} className="text-[#374151] dark:text-[#d1d5db] mb-3 leading-relaxed">
-                {para}
-              </p>
-            ))}
-            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                <strong>Key Insight:</strong> Linked list insertion doesn't require shifting elements like arrays, but does require careful pointer manipulation to maintain list integrity.
-              </p>
-            </div>
-          </div>
-        </section>
-
-        {/* Insertion Types */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Insertion Types</h2>
-          <div className="space-y-6">
-            {insertionTypes.map((type, index) => (
-              <div key={index} className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{type.name}</h3>
-                <div className="flex flex-col md:flex-row gap-4">
-                  <div className="flex-1">
-                    <p className="text-[#374151] dark:text-[#d1d5db] mb-2"><strong>Complexity:</strong> <span className="font-mono">{type.complexity}</span></p>
-                    <p className="text-[#374151] dark:text-[#d1d5db]">{type.description}</p>
-                  </div>
-                  <div className="flex-1">
-                    <pre className="bg-gray-100 dark:bg-gray-800 p-3 rounded-md text-sm overflow-x-auto">
-                      <code className="text-gray-800 dark:text-gray-200">{type.code}</code>
-                    </pre>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        {/* Insertion Processes */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Insertion Processes</h2>
-          <div className="grid md:grid-cols-3 gap-6">
-            {/* Head Insertion */}
-            <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Head Insertion</h3>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {headInsertionSteps.map((step, index) => (
-                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                    {step.step}
-                  </li>
-                ))}
-              </ol>
-            </div>
-
-            {/* Tail Insertion */}
-            <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Tail Insertion</h3>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {tailInsertionSteps.map((step, index) => (
-                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                    {step.step}
-                  </li>
-                ))}
-              </ol>
-            </div>
-
-            {/* Middle Insertion */}
-            <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Middle Insertion</h3>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {middleInsertionSteps.map((step, index) => (
-                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                    {step.step}
-                  </li>
-                ))}
-              </ol>
-            </div>
-          </div>
-        </section>
-
-        {/* Visualization */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Operation Visualization</h2>
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-              <thead className="bg-gray-50 dark:bg-gray-700">
-                <tr>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Operation</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">List State</th>
-                </tr>
-              </thead>
-              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                {visualization.map((item, index) => (
-                  <tr key={index}>
-                    <td className="px-4 py-3 text-sm font-mono text-gray-900 dark:text-white">{item.operation}</td>
-                    <td className="px-4 py-3 text-sm font-mono text-[#374151] dark:text-[#d1d5db]">{item.state}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
-
-        {/* Edge Cases */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Edge Cases to Consider</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {edgeCases.map((caseItem, index) => (
-              <div key={index} className="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg border border-gray-200 dark:border-gray-600">
-                <div className="flex items-start">
-                  <div className="flex-shrink-0 h-5 w-5 text-yellow-500 mt-0.5">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                      <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-                    </svg>
-                  </div>
-                  <div className="ml-3">
-                    <p className="text-sm text-[#374151] dark:text-[#d1d5db]">{caseItem}</p>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        {/* Best Practices */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Best Practices</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {bestPractices.map((practice, index) => (
-              <div key={index} className="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg border border-gray-200 dark:border-gray-600">
-                <div className="flex items-start">
-                  <div className="flex-shrink-0 h-5 w-5 text-green-500 mt-0.5">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
-                    </svg>
-                  </div>
-                  <div className="ml-3">
-                    <p className="text-sm text-[#374151] dark:text-[#d1d5db]">{practice}</p>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        {/* Comparison with Arrays */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Comparison with Array Insertion</h2>
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-              <thead className="bg-gray-50 dark:bg-gray-700">
-                <tr>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Array</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Linked List</th>
-                </tr>
-              </thead>
-              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                {comparisonTable.map((row, index) => (
-                  <tr key={index}>
-                    <td className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{row.feature}</td>
-                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.array}</td>
-                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.linkedList}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-          <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              <strong>When to Choose:</strong> Prefer linked lists when you need frequent insertions at arbitrary positions and don't require random access. Use arrays when you need index-based access and memory efficiency for small, fixed-size collections.
-            </p>
-          </div>
-        </section>
-
-        {/* Final Notes */}
-        <section className="p-6">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Implementation Notes</h2>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="list-disc pl-5 space-y-2 marker:text-blue-500 dark:marker:text-blue-400">
-              <li className="text-[#374151] dark:text-[#d1d5db]">
-                <strong>Memory Management:</strong> Remember to properly allocate memory for new nodes in languages that require manual memory management
-              </li>
-              <li className="text-[#374151] dark:text-[#d1d5db]">
-                <strong>Error Handling:</strong> Always validate input parameters and handle edge cases gracefully
-              </li>
-              <li className="text-[#374151] dark:text-[#d1d5db]">
-                <strong>Testing:</strong> Thoroughly test all insertion scenarios including empty list, single-node list, head/tail insertions
-              </li>
-              <li className="text-[#374151] dark:text-[#d1d5db]">
-                <strong>Optimizations:</strong> Consider maintaining both head and tail pointers for O(1) insertions at both ends
-              </li>
-            </ul>
-          </div>
-        </section>
-      </article>
-    </main>
-  );
-};
-
-export default content;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/insertion/data/codeExamples.json b/app/visualizer/linkedList/operations/insertion/data/codeExamples.json
deleted file mode 100755
index ae27d94a1..000000000
--- a/app/visualizer/linkedList/operations/insertion/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\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
diff --git a/app/visualizer/linkedList/operations/insertion/data/questions.json b/app/visualizer/linkedList/operations/insertion/data/questions.json
deleted file mode 100755
index 4ae9b98fa..000000000
--- a/app/visualizer/linkedList/operations/insertion/data/questions.json
+++ /dev/null
@@ -1,134 +0,0 @@
-[
-    {
-        "question": "What is the time complexity of inserting a node at the head of a linked list?",
-        "options": [
-            "O(1)",
-            "O(n)",
-            "O(log n)",
-            "O(n²)"
-        ],
-        "correctAnswer": 0,
-        "explanation": "Head insertion is O(1) as it only requires updating the head pointer and the new node's next pointer."
-    },
-    {
-        "question": "Which pointer modifications are needed for inserting a new node at the head?",
-        "options": [
-            "New node's next points to current head, then update head",
-            "Traverse to end first",
-            "Update tail pointer only",
-            "Modify all existing nodes' pointers"
-        ],
-        "correctAnswer": 0,
-        "explanation": "Head insertion requires: (1) new node's next = current head, (2) head = new node."
-    },
-    {
-        "question": "What is the time complexity of inserting at the tail without a tail pointer?",
-        "options": [
-            "O(1)",
-            "O(n)",
-            "O(log n)",
-            "Depends on list size"
-        ],
-        "correctAnswer": 1,
-        "explanation": "Without a tail pointer, you must traverse the entire list (O(n)) to reach the end before inserting."
-    },
-    {
-        "question": "When inserting at position in a linked list, what is the worst-case time complexity?",
-        "options": [
-            "O(1)",
-            "O(n)",
-            "O(log n)",
-            "O(n log n)"
-        ],
-        "correctAnswer": 1,
-        "explanation": "Position insertion is O(n) in the worst case when inserting near the end of the list."
-    },
-    {
-        "question": "What special case must be handled when inserting into an empty linked list?",
-        "options": [
-            "Update both head and tail pointers",
-            "Only update head pointer",
-            "Create a circular reference",
-            "No special handling needed"
-        ],
-        "correctAnswer": 0,
-        "explanation": "For an empty list, both head and tail pointers should point to the new node."
-    },
-    {
-        "question": "What is the correct sequence for inserting a node after a given reference node?",
-        "options": [
-            "newNode.next = refNode.next; refNode.next = newNode",
-            "refNode.next = newNode; newNode.next = refNode.next",
-            "Only set refNode.next = newNode",
-            "Traverse the entire list first"
-        ],
-        "correctAnswer": 0,
-        "explanation": "First set newNode's next to refNode's next, then update refNode's next to point to newNode."
-    },
-    {
-        "question": "Which of these is NOT an advantage of linked list insertion over array insertion?",
-        "options": [
-            "No need to shift existing elements",
-            "Dynamic size growth",
-            "Better cache locality",
-            "No reallocation needed"
-        ],
-        "correctAnswer": 2,
-        "explanation": "Linked lists generally have worse cache locality than arrays due to non-contiguous memory allocation."
-    },
-    {
-        "question": "What should you do when inserting at a position that's greater than the list length?",
-        "options": [
-            "Insert at head",
-            "Insert at tail",
-            "Throw an error or handle gracefully",
-            "Create multiple empty nodes"
-        ],
-        "correctAnswer": 2,
-        "explanation": "The implementation should either throw an error or handle the out-of-bounds case gracefully."
-    },
-    {
-        "question": "Why is maintaining a tail pointer beneficial for linked list insertion?",
-        "options": [
-            "Enables O(1) tail insertion",
-            "Allows random access to elements",
-            "Reduces memory usage",
-            "Simplifies middle insertions"
-        ],
-        "correctAnswer": 0,
-        "explanation": "A tail pointer allows O(1) insertion at the tail by eliminating the need for traversal."
-    },
-    {
-        "question": "What happens if you incorrectly order pointer assignments during insertion?",
-        "options": [
-            "Memory leak",
-            "Lost nodes or broken list",
-            "Compiler error",
-            "Automatic garbage collection"
-        ],
-        "correctAnswer": 1,
-        "explanation": "Incorrect pointer assignment order can lead to lost nodes or a broken list structure."
-    },
-    {
-        "question": "Which insertion scenario requires traversing approximately half the list on average?",
-        "options": [
-            "Head insertion",
-            "Tail insertion with tail pointer",
-            "Middle insertion at random position",
-            "Insertion after given node reference"
-        ],
-        "correctAnswer": 2,
-        "explanation": "Random middle insertions require traversal that averages n/2 operations (O(n))."
-    },
-    {
-        "question": "What is the space complexity for a single insertion operation in a linked list?",
-        "options": [
-            "O(1)",
-            "O(n)",
-            "O(log n)",
-            "Depends on position"
-        ],
-        "correctAnswer": 0,
-        "explanation": "Each insertion only requires space for one new node, regardless of list size (O(1))."
-    }
-]
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/insertion/page.jsx b/app/visualizer/linkedList/operations/insertion/page.jsx
deleted file mode 100755
index 9c9354d46..000000000
--- a/app/visualizer/linkedList/operations/insertion/page.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import Animation from "@/app/visualizer/linkedList/operations/insertion/animation";
-import Navbar from "@/app/components/navbarinner";
-
-export const metadata = {
-    title: 'Linked List Insertion Algorithm | Interactive Visualization & Step-by-Step Guide',
-    description:
-        'Learn how insertion works in Linked Lists with interactive animations, detailed explanations, and hands-on practice. Visualize each step of the insertion process and master linked list algorithms efficiently.',
-    keywords: [
-        'Linked List Insertion',
-        'Insertion Animation Linked List',
-        'Visualize Insertion in Linked List',
-        'Linked List Algorithm',
-        'DSA Linked List Insertion',
-        'Linked List Insertion Visualization',
-        'Interactive Linked List',
-        'Insertion Step-by-Step',
-        'Linked List Learning',
-        'Data Structures Animation',
-        'DSA Practice Linked List',
-        'Insertion Code Example',
-        'Linked List Tutorial',
-        'Insertion using C',
-        'Insertion using Java',
-        'Insertion using Javascript',
-        'Insertion using Python',
-        'Insertion using linked list',
-    ],
-    robots: 'index, follow',
-};
-export default function Page() {
-  return (
-    <>
-      <Navbar/>
-      <Animation/>
-    </>
-  );
-};
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/insertion/quiz.jsx b/app/visualizer/linkedList/operations/insertion/quiz.jsx
deleted file mode 100755
index 1979a41a4..000000000
--- a/app/visualizer/linkedList/operations/insertion/quiz.jsx
+++ /dev/null
@@ -1,399 +0,0 @@
-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';
-import Questions from "@/app/visualizer/linkedList/operations/insertion/data/questions.json";
-
-const Quiz = () => {
-const questions = Questions;
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showExplanation, setShowExplanation] = useState(false);
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-  const [penaltyApplied, setPenaltyApplied] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    if (selectedAnswer !== null) return;
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (showExplanation && !penaltyApplied) {
-      setScore(prevScore => Math.max(0, prevScore - 0.5));
-      setPenaltyApplied(true);
-    }
-
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    
-    setShowExplanation(false);
-    setPenaltyApplied(false);
-    
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setShowExplanation(false);
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowExplanation(false);
-    setShowIntro(true);
-    setPenaltyApplied(false);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Selection Sort");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Selection Sort");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("comparison with other simple sorts");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("stability characteristics");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Selection Sort concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-2xl mx-auto shadow-lg rounded-xl bg-white dark:bg-gray-800 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Insertion Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-            {selectedAnswer !== null && (
-              <div className="mb-6">
-                <button
-                  onClick={() => setShowExplanation(!showExplanation)}
-                  className="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:underline mb-2"
-                >
-                  <FaInfoCircle className="mr-1" />
-                  {showExplanation ? "Hide Explanation" : "Show Explanation"}
-                </button>
-                <AnimatePresence>
-                  {showExplanation && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: "auto" }}
-                      exit={{ opacity: 0, height: 0 }}
-                      className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm overflow-hidden"
-                    >
-                      {questions[currentQuestion].explanation}
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-            )}
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default Quiz;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/merge/._codeBlock.jsx b/app/visualizer/linkedList/operations/merge/._codeBlock.jsx
deleted file mode 100755
index c6b0cdc6b..000000000
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
deleted file mode 100755
index 24fda7917..000000000
--- a/app/visualizer/linkedList/operations/merge/animation.jsx
+++ /dev/null
@@ -1,415 +0,0 @@
-"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([]);
-  const [list2, setList2] = useState([]);
-  const [mergedList, setMergedList] = useState([]);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [currentPointers, setCurrentPointers] = useState({ list1: 0, list2: 0 });
-  const list1Refs = useRef([]);
-  const list2Refs = useRef([]);
-  const mergedRefs = useRef([]);
-  const arrowRefs = useRef([]);
-  const containerRef = useRef(null);
-  const animationTimeline = useRef(gsap.timeline());
-
-  // Generate random linked list with realistic values
-  const generateRandomList = (setList) => {
-    const size = Math.floor(Math.random() * 3) + 3; // 3-5 nodes
-    const values = Array.from({ length: size }, (_, i) => {
-      const base = Math.floor(Math.random() * 20) + 1;
-      return base + i * 5; // Ensure some order but not perfectly sorted
-    }).sort((a, b) => a - b); // Sort the values
-    
-    const newList = values.map((value, index) => ({
-      value,
-      id: Date.now() + index + Math.random(),
-      next: index < size - 1 ? `0x${(1000 + index).toString(16).padStart(4, '0')}` : 'NULL'
-    }));
-
-    setList(newList);
-  };
-
-  // Reset handler
-  const handleReset = () => {
-    gsap.killTweensOf("*");
-    animationTimeline.current.clear();
-    setList1([]);
-    setList2([]);
-    setMergedList([]);
-    setIsAnimating(false);
-    setCurrentPointers({ list1: 0, list2: 0 });
-    list1Refs.current = [];
-    list2Refs.current = [];
-    mergedRefs.current = [];
-    arrowRefs.current = [];
-  };
-
-  // Animate the merge process step-by-step
-  const animateMerge = async () => {
-    if (isAnimating || list1.length === 0 || list2.length === 0) return;
-    
-    setIsAnimating(true);
-    animationTimeline.current.clear();
-    
-    // Create sorted copies
-    const sortedList1 = [...list1].sort((a, b) => a.value - b.value);
-    const sortedList2 = [...list2].sort((a, b) => a.value - b.value);
-    
-    let i = 0, j = 0;
-    const result = [];
-    
-    // Initial state
-    gsap.set([...list1Refs.current, ...list2Refs.current], {
-      opacity: 1,
-      scale: 1,
-      backgroundColor: i => i < sortedList1.length ? '#10b981' : '#10b981'
-    });
-    
-    gsap.set(arrowRefs.current, { opacity: 0.7 });
-    setMergedList([]);
-    setCurrentPointers({ list1: 0, list2: 0 });
-
-    const mergeStep = async () => {
-      if (i >= sortedList1.length && j >= sortedList2.length) {
-        setIsAnimating(false);
-        return;
-      }
-
-      // Highlight current pointers
-      animationTimeline.current.to([
-        i < sortedList1.length ? list1Refs.current[i] : null,
-        j < sortedList2.length ? list2Refs.current[j] : null
-      ].filter(Boolean), {
-        scale: 1.3,
-        duration: 0.3,
-        ease: 'power1.inOut'
-      }, '<');
-
-      await new Promise(resolve => {
-        animationTimeline.current.call(() => {
-          setCurrentPointers({ list1: i, list2: j });
-          resolve();
-        }, null, '+=0.3');
-      });
-
-      let nextNode;
-      if (j >= sortedList2.length || (i < sortedList1.length && sortedList1[i].value <= sortedList2[j].value)) {
-        // Take from list1
-        nextNode = { ...sortedList1[i], source: 'list1' };
-        i++;
-      } else {
-        // Take from list2
-        nextNode = { ...sortedList2[j], source: 'list2' };
-        j++;
-      }
-
-      // Animate the selected node moving to merged list
-      const tempNode = document.createElement('div');
-      tempNode.className = `node flex items-center justify-center absolute w-20 h-16 rounded-md shadow-md text-white font-bold ${
-        nextNode.source === 'list1' ? 'bg-emerald-600' : 'bg-emerald-600'
-      }`;
-      tempNode.textContent = nextNode.value;
-      containerRef.current.appendChild(tempNode);
-
-      // Get positions
-      const fromRect = nextNode.source === 'list1'
-        ? list1Refs.current[i-1]?.getBoundingClientRect()
-        : list2Refs.current[j-1]?.getBoundingClientRect();
-      const toPos = mergedList.length * 80 + 40; // Calculate new position
-
-      gsap.set(tempNode, {
-        x: fromRect?.left - containerRef.current.getBoundingClientRect().left || 0,
-        y: fromRect?.top - containerRef.current.getBoundingClientRect().top || 0,
-        opacity: 0,
-        scale: 0.5
-      });
-
-      // Improved animation: pop, move, color transition
-      animationTimeline.current.to(tempNode, {
-        opacity: 1,
-        scale: 1.1,
-        duration: 0.4,
-        ease: 'power2.out'
-      }, '<');
-
-      animationTimeline.current.to(tempNode, {
-        x: toPos,
-        y: 20,
-        scale: 1,
-        backgroundColor: '#2563eb', // transition to merged blue color
-        duration: 0.8,
-        ease: 'power3.inOut'
-      });
-
-      animationTimeline.current.call(() => {
-        result.push(nextNode);
-        setMergedList([...result]);
-        tempNode.remove();
-      }, null, `+=0.2`);
-
-      // Update pointers
-      await new Promise(resolve => {
-        animationTimeline.current.call(() => {
-          setCurrentPointers({ list1: i, list2: j });
-          resolve();
-        }, null, '+=0.1');
-      });
-
-      // Recursively call next step
-      await new Promise(resolve => {
-        animationTimeline.current.call(() => {
-          mergeStep().then(resolve);
-        }, null, '+=0.3');
-      });
-    };
-
-    await mergeStep();
-  };
-
-  // Update refs when lists change
-  useEffect(() => {
-    list1Refs.current = list1Refs.current.slice(0, list1.length);
-    list2Refs.current = list2Refs.current.slice(0, list2.length);
-    mergedRefs.current = mergedRefs.current.slice(0, mergedList.length);
-    arrowRefs.current = arrowRefs.current.slice(0, Math.max(0, mergedList.length - 1));
-  }, [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 />
-        <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>
-
-        {/* Controls - Responsive */}
-        <div className="flex justify-center mb-8 px-2">
-          <div className="bg-white dark:bg-gray-800 border dark:border-gray-700 p-4 sm:p-6 w-full max-w-4xl rounded-lg shadow-md mx-auto">
-            <div className="flex flex-col sm:flex-row gap-4 w-full">
-              <div className="flex-1 flex flex-col sm:flex-row gap-2">
-                <button
-                  onClick={() => generateRandomList(setList1)}
-                  disabled={isAnimating}
-                  className="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 sm:px-6 sm:py-3 rounded-lg disabled:bg-gray-400 w-full"
-                >
-                  Generate List 1
-                </button>
-                <button
-                  onClick={() => generateRandomList(setList2)}
-                  disabled={isAnimating}
-                  className="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 sm:px-6 sm:py-3 rounded-lg disabled:bg-gray-400 w-full"
-                >
-                  Generate List 2
-                </button>
-              </div>
-              <div className="flex-1 flex flex-col sm:flex-row gap-2">
-                <button
-                  onClick={animateMerge}
-                  disabled={isAnimating || list1.length === 0 || list2.length === 0}
-                  className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 sm:px-6 sm:py-3 rounded-lg disabled:bg-gray-400 w-full"
-                >
-                  {isAnimating ? "Merging..." : "Merge Lists"}
-                </button>
-                <button
-                  onClick={handleReset}
-                  className="bg-transparent text-black dark:text-white border border-black dark:border-white hover:bg-gray-100 dark:hover:bg-gray-700 px-4 py-2 sm:px-6 sm:py-3 rounded-lg w-full"
-                >
-                  Reset All
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Legend - Responsive */}
-        <div className="mb-4 flex flex-wrap justify-center gap-3 sm:gap-6 text-sm sm:text-base">
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-md bg-emerald-600 mr-2"></div>
-            <span>List 1</span>
-          </div>
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-md bg-emerald-600 mr-2"></div>
-            <span>List 2</span>
-          </div>
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-md bg-blue-600 mr-2"></div>
-            <span>Merged</span>
-          </div>
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-md bg-gray-400 mr-2"></div>
-            <span>Pointer</span>
-          </div>
-        </div>
-
-        {/* Visualization Area */}
-        <div className="space-y-12">
-          {/* List 1 */}
-          <div className="flex flex-col items-center">
-            <h3 className="text-lg font-medium mb-2 text-emerald-600">List 1 {currentPointers.list1 < list1.length && `(Current: ${currentPointers.list1 + 1})`}</h3>
-            <div className="relative bg-gray-200/50 dark:bg-gray-800/50 border dark:border-gray-700 rounded-lg min-h-[120px] p-4 w-full max-w-4xl overflow-x-auto">
-              {list1.length === 0 ? (
-                <div className="text-center w-full py-8 text-gray-500 dark:text-gray-400">
-                  Generate List 1 to begin
-                </div>
-              ) : (
-                <div className="flex items-center justify-center space-x-2">
-                  {list1.map((node, index) => (
-                    <React.Fragment key={`list1-${node.id}`}>
-                      <div
-                        ref={(el) => (list1Refs.current[index] = el)}
-                        className={`node flex flex-col items-center justify-center bg-emerald-600 text-white text-lg w-20 h-16 rounded-md shadow-md transition-all ${
-                          index === currentPointers.list1 && isAnimating ? 'ring-4 ring-emerald-300 scale-110' : ''
-                        }`}
-                      >
-                        {node.value}
-                        <div className="text-xs mt-1 opacity-80">{node.next}</div>
-                      </div>
-                      {index < list1.length - 1 && (
-                        <svg
-                          className="w-8 h-8 opacity-70 text-gray-600 dark:text-gray-300"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                        >
-                          <path d="M5 12h14M12 5l7 7-7 7" />
-                        </svg>
-                      )}
-                    </React.Fragment>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* List 2 */}
-          <div className="flex flex-col items-center">
-            <h3 className="text-lg font-medium mb-2 text-emerald-600">List 2 {currentPointers.list2 < list2.length && `(Current: ${currentPointers.list2 + 1})`}</h3>
-            <div className="relative bg-gray-200/50 dark:bg-gray-800/50 border dark:border-gray-700 rounded-lg min-h-[120px] p-4 w-full max-w-4xl overflow-x-auto">
-              {list2.length === 0 ? (
-                <div className="text-center w-full py-8 text-gray-500 dark:text-gray-400">
-                  Generate List 2 to continue
-                </div>
-              ) : (
-                <div className="flex items-center justify-center space-x-2">
-                  {list2.map((node, index) => (
-                    <React.Fragment key={`list2-${node.id}`}>
-                      <div
-                        ref={(el) => (list2Refs.current[index] = el)}
-                        className={`node flex flex-col items-center justify-center bg-emerald-600 text-white text-lg w-20 h-16 rounded-md shadow-md transition-all ${
-                          index === currentPointers.list2 && isAnimating ? 'ring-4 ring-emerald-300 scale-110' : ''
-                        }`}
-                      >
-                        {node.value}
-                        <div className="text-xs mt-1 opacity-80">{node.next}</div>
-                      </div>
-                      {index < list2.length - 1 && (
-                        <svg
-                          className="w-8 h-8 opacity-70 text-gray-600 dark:text-gray-300"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                        >
-                          <path d="M5 12h14M12 5l7 7-7 7" />
-                        </svg>
-                      )}
-                    </React.Fragment>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* Merged List */}
-          <div className="flex flex-col items-center">
-            <h3 className="text-lg font-medium mb-2 text-blue-600">Merged List</h3>
-            <div
-              ref={containerRef}
-              className="relative bg-gray-200/50 dark:bg-gray-800/50 border dark:border-gray-700 rounded-lg min-h-[120px] p-4 w-full max-w-4xl overflow-x-auto"
-            >
-              {mergedList.length === 0 ? (
-                <div className="text-center w-full py-8 text-gray-500 dark:text-gray-400">
-                  {list1.length > 0 && list2.length > 0 ? (
-                    "Click 'Merge Lists' to visualize"
-                  ) : (
-                    "Generate both lists and merge them"
-                  )}
-                </div>
-              ) : (
-                <div className="flex items-center justify-center space-x-2">
-                  {mergedList.map((node, index) => (
-                    <React.Fragment key={`merged-${node.id}`}>
-                      <div
-                        ref={(el) => (mergedRefs.current[index] = el)}
-                        className={`node flex flex-col items-center justify-center bg-blue-600 text-white text-lg w-20 h-16 rounded-md shadow-md ${
-                          index === mergedList.length - 1 && isAnimating ? 'animate-pulse' : ''
-                        }`}
-                      >
-                        {node.value}
-                        {/* No address shown for merged list */}
-                      </div>
-                      {index < mergedList.length - 1 && (
-                        <svg
-                          ref={(el) => (arrowRefs.current[index] = el)}
-                          className="w-8 h-8 opacity-70 text-gray-600 dark:text-gray-300"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                        >
-                          <path d="M5 12h14M12 5l7 7-7 7" />
-                        </svg>
-                      )}
-                    </React.Fragment>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        <p className="text-lg text-center text-gray-600 dark:text-gray-400 mt-8 mb-8">
-          Test Your Knowledge Before Moving Forward!
-        </p>
-        <Quiz />
-
-        <CodeBlock />
-
-        <ExploreOther
-          title="Explore Other Operations"
-          links={[
-            { text: "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>
-  );
-};
-
-export default LinkedListMerge;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/merge/codeBlock.jsx b/app/visualizer/linkedList/operations/merge/codeBlock.jsx
deleted file mode 100755
index bd6a31592..000000000
--- 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/data/codeExamples.json b/app/visualizer/linkedList/operations/merge/data/codeExamples.json
deleted file mode 100755
index e02e6929c..000000000
--- a/app/visualizer/linkedList/operations/merge/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 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
diff --git a/app/visualizer/linkedList/operations/merge/data/questions.json b/app/visualizer/linkedList/operations/merge/data/questions.json
deleted file mode 100755
index 626278e8e..000000000
--- a/app/visualizer/linkedList/operations/merge/data/questions.json
+++ /dev/null
@@ -1,112 +0,0 @@
-[
-  {
-    "question": "What is the primary purpose of using a dummy node when merging two linked lists?",
-    "options": [
-      "To simplify pointer management and avoid edge cases",
-      "To increase performance",
-      "To store the tail node",
-      "To sort the input lists"
-    ],
-    "correctAnswer": 0,
-    "explanation": "A dummy node acts as a placeholder to simplify the logic and avoid handling head assignment edge cases separately."
-  },
-  {
-    "question": "Which approach is commonly used to merge two sorted linked lists?",
-    "options": [
-      "Two-pointer technique",
-      "Recursive backtracking",
-      "Binary search",
-      "Breadth-first traversal"
-    ],
-    "correctAnswer": 0,
-    "explanation": "The two-pointer technique is used to traverse both lists and compare current nodes to build the merged list."
-  },
-  {
-    "question": "What is the time complexity of merging two sorted linked lists with a total of n nodes?",
-    "options": [
-      "O(log n)",
-      "O(n)",
-      "O(n log n)",
-      "O(n²)"
-    ],
-   "correctAnswer": 1,
-    "explanation": "Each node is visited once during the merge, leading to O(n) time complexity."
-  },
-  {
-    "question": "What happens when one of the two input lists is empty during merging?",
-    "options": [
-      "The result is empty",
-      "Only dummy node is returned",
-      "The non-empty list is directly attached to the merged list",
-      "The algorithm throws an error"
-    ],
-   "correctAnswer": 2,
-    "explanation": "If one list is empty, the other list is appended as-is to the end of the merged list."
-  },
-  {
-    "question": "Which of these is NOT necessary before merging two linked lists?",
-    "options": [
-      "Sorting both input lists",
-      "Creating a dummy node",
-      "Tracking the current node in merged list",
-      "Comparing node values from both lists"
-    ],
-    "correctAnswer": 0,
-    "explanation": "Sorting is not required if the input lists are already sorted."
-  },
-  {
-    "question": "When merging lists, how do you decide which node to attach next?",
-    "options": [
-      "Attach the node with greater value",
-      "Alternate nodes from each list",
-      "Attach the node with smaller value",
-      "Attach the last node from each list first"
-    ],
-    "correctAnswer": 2,
-    "explanation": "The smaller value node is chosen to maintain sorted order."
-  },
-  {
-    "question": "What pointer is updated after attaching a node to the merged list?",
-    "options": [
-      "Tail of second list",
-      "Current pointer of merged list",
-      "Dummy pointer",
-      "Original head pointer"
-    ],
-    "correctAnswer": 1,
-    "explanation": "After attaching a node, the current pointer in the merged list is updated to point to the newly added node."
-  },
-  {
-    "question": "What is the space complexity of merging two linked lists iteratively?",
-    "options": [
-      "O(n)",
-      "O(1)",
-      "O(log n)",
-      "O(n²)"
-    ],
-    "correctAnswer": 1,
-    "explanation": "Iterative merging does not require extra space beyond a few pointers (O(1) auxiliary space)."
-  },
-  {
-    "question": "What advantage does recursion offer in list merging?",
-    "options": [
-      "Faster execution",
-      "Less memory usage",
-      "Simplified code",
-      "Always better performance"
-    ],
-    "correctAnswer": 2,
-    "explanation": "Recursion simplifies the logic but can use more stack space."
-  },
-  {
-    "question": "What kind of input lists produce a sorted merged output?",
-    "options": [
-      "Unsorted lists",
-      "Randomly linked nodes",
-      "Already sorted lists",
-      "Lists with circular references"
-    ],
-    "correctAnswer": 2,
-    "explanation": "Merging produces a sorted result only when both input lists are sorted."
-  }
-]
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/merge/page.jsx b/app/visualizer/linkedList/operations/merge/page.jsx
deleted file mode 100755
index 18dfc2e91..000000000
--- a/app/visualizer/linkedList/operations/merge/page.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import Animation from "@/app/visualizer/linkedList/operations/merge/animation";
-import Navbar from "@/app/components/navbarinner";
-
-export const metadata = {
-    title: 'Linked List Merge Algorithm | Interactive Visualization & Step-by-Step Guide',
-    description:
-        'Learn how merging works in Linked Lists with interactive animations, detailed explanations, and hands-on practice. Visualize each step of the merge process and master linked list algorithms efficiently.',
-    keywords: [
-        'Linked List Merge',
-        'Merge Animation Linked List',
-        'Visualize Merge in Linked List',
-        'Linked List Algorithm',
-        'DSA Linked List Merge',
-        'Linked List Merge Visualization',
-        'Interactive Linked List',
-        'Merge Step-by-Step',
-        'Linked List Learning',
-        'Data Structures Animation',
-        'DSA Practice Linked List',
-        'Merge Code Example',
-        'Linked List Tutorial',
-        'Merge using C',
-        'Merge using Java',
-        'Merge using Javascript',
-        'Merge using Python',
-        'Merge using linked list',
-    ],
-    robots: 'index, follow',
-};
-
-export default function Page() {
-  return (
-    <>
-      <Navbar/>
-      <Animation/>
-    </>
-  );
-};
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/merge/quiz.jsx b/app/visualizer/linkedList/operations/merge/quiz.jsx
deleted file mode 100755
index 48ff71347..000000000
--- a/app/visualizer/linkedList/operations/merge/quiz.jsx
+++ /dev/null
@@ -1,398 +0,0 @@
-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';
-import Questions from "@/app/visualizer/linkedList/operations/merge/data/questions.json"
-
-const Quiz = () => {
-const questions = Questions;
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showExplanation, setShowExplanation] = useState(false);
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-  const [penaltyApplied, setPenaltyApplied] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    if (selectedAnswer !== null) return;
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (showExplanation && !penaltyApplied) {
-      setScore(prevScore => Math.max(0, prevScore - 0.5));
-      setPenaltyApplied(true);
-    }
-
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    
-    setShowExplanation(false);
-    setPenaltyApplied(false);
-    
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setShowExplanation(false);
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowExplanation(false);
-    setShowIntro(true);
-    setPenaltyApplied(false);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Selection Sort");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Selection Sort");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("comparison with other simple sorts");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("stability characteristics");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Selection Sort concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-2xl mx-auto shadow-lg rounded-xl bg-white dark:bg-gray-800 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Merging Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-            {selectedAnswer !== null && (
-              <div className="mb-6">
-                <button
-                  onClick={() => setShowExplanation(!showExplanation)}
-                  className="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:underline mb-2"
-                >
-                  <FaInfoCircle className="mr-1" />
-                  {showExplanation ? "Hide Explanation" : "Show Explanation"}
-                </button>
-                <AnimatePresence>
-                  {showExplanation && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: "auto" }}
-                      exit={{ opacity: 0, height: 0 }}
-                      className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm overflow-hidden"
-                    >
-                      {questions[currentQuestion].explanation}
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-            )}
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default Quiz;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/reverse/animation.jsx b/app/visualizer/linkedList/operations/reverse/animation.jsx
deleted file mode 100755
index d690ca532..000000000
--- a/app/visualizer/linkedList/operations/reverse/animation.jsx
+++ /dev/null
@@ -1,380 +0,0 @@
-"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([]);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [currentPointer, setCurrentPointer] = useState(-1);
-  const [prevPointer, setPrevPointer] = useState(-1);
-  const [nextPointer, setNextPointer] = useState(-1);
-  const listRefs = useRef([]);
-  const containerRef = useRef(null);
-  const animationTimeline = useRef(gsap.timeline());
-
-  // Generate random linked list with realistic values
-  const generateRandomList = () => {
-    const size = Math.floor(Math.random() * 3) + 3; // 3-5 nodes
-    const values = Array.from({ length: size }, (_, i) => {
-      const base = Math.floor(Math.random() * 20) + 1;
-      return base + i * 5;
-    });
-    const newList = values.map((value, index) => ({
-      value,
-      id: Date.now() + index + Math.random(),
-      next: index < size - 1 ? `0x${(1000 + index).toString(16).padStart(4, '0')}` : 'NULL'
-    }));
-    setList(newList);
-    setCurrentPointer(-1);
-    setPrevPointer(-1);
-    setNextPointer(-1);
-  };
-
-  // Reset handler
-  const handleReset = () => {
-    gsap.killTweensOf("*");
-    animationTimeline.current.clear();
-    setList([]);
-    setIsAnimating(false);
-    setCurrentPointer(-1);
-    setPrevPointer(-1);
-    setNextPointer(-1);
-    listRefs.current = [];
-  };
-
-  // Animate the reverse process step-by-step with pointer logic and visual next updates
-  const animateReverse = async () => {
-    if (isAnimating || list.length === 0) return;
-    setIsAnimating(true);
-    animationTimeline.current.clear();
-
-    // Copy list so we can mutate next pointers
-    let nodes = list.map(node => ({ ...node }));
-    let prevIndex = -1;
-    let currentIndex = 0;
-    let nextIndex = nodes[currentIndex] && nodes[currentIndex].next === 'NULL' ? -1 : currentIndex + 1;
-
-    // Helper to update next pointer string after rewiring
-    const updateNextField = (index, nextIdx) => {
-      if (nextIdx === -1) {
-        nodes[index].next = 'NULL';
-      } else {
-        nodes[index].next = `0x${(1000 + nextIdx).toString(16).padStart(4, '0')}`;
-      }
-    };
-
-    // Initial highlight setup: reset all nodes to base color
-    gsap.set(listRefs.current, {
-      backgroundColor: '#10b981',
-      scale: 1,
-      opacity: 1,
-      clearProps: 'all'
-    });
-
-    // Animate function to highlight nodes with different colors
-    const highlightNodes = (prevI, currI, nextI) => {
-      listRefs.current.forEach((el, idx) => {
-        if (!el) return;
-        if (idx === currI) {
-          gsap.to(el, { backgroundColor: '#2563eb', scale: 1.1, duration: 0.3 }); // current - blue
-        } else if (idx === prevI) {
-          gsap.to(el, { backgroundColor: '#f59e0b', scale: 1.05, duration: 0.3 }); // prev - amber
-        } else if (idx === nextI) {
-          gsap.to(el, { backgroundColor: '#6b7280', scale: 1, duration: 0.3 }); // next - gray
-        } else {
-          gsap.to(el, { backgroundColor: '#10b981', scale: 1, duration: 0.3 }); // normal - green
-        }
-      });
-    };
-
-    // Create pointer arrows or labels overlays
-    // We'll create divs for prev, current, next pointers positioned above nodes
-    const pointerContainer = document.createElement('div');
-    pointerContainer.style.position = 'relative';
-    pointerContainer.style.width = '100%';
-    pointerContainer.style.height = '0px';
-    pointerContainer.style.marginBottom = '8px';
-    containerRef.current.prepend(pointerContainer);
-
-    const createPointerLabel = (color, text) => {
-      const label = document.createElement('div');
-      label.textContent = text;
-      label.style.position = 'absolute';
-      label.style.top = '0px';
-      label.style.padding = '2px 6px';
-      label.style.borderRadius = '4px';
-      label.style.color = 'white';
-      label.style.fontSize = '12px';
-      label.style.fontWeight = 'bold';
-      label.style.backgroundColor = color;
-      label.style.pointerEvents = 'none';
-      label.style.whiteSpace = 'nowrap';
-      label.style.transition = 'left 0.5s ease';
-      pointerContainer.appendChild(label);
-      return label;
-    };
-
-    const prevLabel = createPointerLabel('#f59e0b', 'Prev');
-    const currentLabel = createPointerLabel('#2563eb', 'Current');
-    const nextLabel = createPointerLabel('#6b7280', 'Next');
-
-    // Helper to position pointer labels above the nodes
-    const positionPointers = (prevI, currI, nextI) => {
-      const containerRect = containerRef.current.getBoundingClientRect();
-      const offsetTop = -30; // above nodes
-
-      const setLabelPos = (label, idx) => {
-        if (idx === -1) {
-          label.style.opacity = '0';
-          return;
-        }
-        const nodeEl = listRefs.current[idx];
-        if (!nodeEl) {
-          label.style.opacity = '0';
-          return;
-        }
-        const rect = nodeEl.getBoundingClientRect();
-        const left = rect.left - containerRect.left + rect.width / 2 - label.offsetWidth / 2;
-        label.style.left = `${left}px`;
-        label.style.top = `${offsetTop}px`;
-        label.style.opacity = '1';
-      };
-
-      setLabelPos(prevLabel, prevI);
-      setLabelPos(currentLabel, currI);
-      setLabelPos(nextLabel, nextI);
-    };
-
-    // Initial pointer positions
-    setCurrentPointer(currentIndex);
-    setPrevPointer(prevIndex);
-    setNextPointer(nextIndex);
-    highlightNodes(prevIndex, currentIndex, nextIndex);
-    positionPointers(prevIndex, currentIndex, nextIndex);
-
-    // Animate the reversal step by step
-    while (currentIndex !== -1) {
-      setCurrentPointer(currentIndex);
-      setPrevPointer(prevIndex);
-      setNextPointer(nextIndex);
-      highlightNodes(prevIndex, currentIndex, nextIndex);
-      positionPointers(prevIndex, currentIndex, nextIndex);
-
-      // Wait a bit for user to see pointers
-      await new Promise(r => setTimeout(r, 800));
-
-      // Show rewiring: change current node's next pointer to prev
-      animationTimeline.current.clear();
-
-      // Animate the 'next' field text change
-      const currentNodeEl = listRefs.current[currentIndex];
-      if (currentNodeEl) {
-        const nextFieldEl = currentNodeEl.querySelector('.text-xs');
-        if (nextFieldEl) {
-          // Animate fade out, change text, fade in
-          await new Promise(resolve => {
-            gsap.to(nextFieldEl, {
-              opacity: 0,
-              duration: 0.3,
-              onComplete: () => {
-                updateNextField(currentIndex, prevIndex);
-                setList([...nodes]);
-                resolve();
-              }
-            });
-          });
-          await new Promise(resolve => {
-            gsap.to(nextFieldEl, {
-              opacity: 1,
-              duration: 0.3,
-              onComplete: resolve
-            });
-          });
-        }
-      }
-
-      // Small pause after rewiring
-      await new Promise(r => setTimeout(r, 500));
-
-      // Move pointers forward for next iteration
-      const tempNext = nextIndex;
-      prevIndex = currentIndex;
-      currentIndex = nextIndex;
-      nextIndex = currentIndex !== -1 && nodes[currentIndex].next !== 'NULL' ? currentIndex + 1 : -1;
-    }
-
-    // Final highlight: all nodes green, pointers hidden
-    highlightNodes(-1, -1, -1);
-    setCurrentPointer(-1);
-    setPrevPointer(-1);
-    setNextPointer(-1);
-    positionPointers(-1, -1, -1);
-
-    // Remove pointer labels after animation finished
-    await new Promise(r => setTimeout(r, 500));
-    if (pointerContainer.parentNode) {
-      pointerContainer.parentNode.removeChild(pointerContainer);
-    }
-
-    setIsAnimating(false);
-  };
-
-  // Update refs when list changes
-  useEffect(() => {
-    listRefs.current = listRefs.current.slice(0, list.length);
-  }, [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 />
-
-        <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>
-
-        {/* Controls - Responsive */}
-        <div className="flex justify-center mb-8 px-2">
-          <div className="bg-white dark:bg-gray-800 border dark:border-gray-700 p-4 sm:p-6 w-full max-w-4xl rounded-lg shadow-md mx-auto">
-            <div className="flex flex-col sm:flex-row gap-4 w-full">
-              <div className="flex-1 flex flex-col sm:flex-row gap-2">
-                <button
-                  onClick={generateRandomList}
-                  disabled={isAnimating}
-                  className="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 sm:px-6 sm:py-3 rounded-lg disabled:bg-gray-400 w-full"
-                >
-                  Generate List
-                </button>
-              </div>
-              <div className="flex-1 flex flex-col sm:flex-row gap-2">
-                <button
-                  onClick={animateReverse}
-                  disabled={isAnimating || list.length === 0}
-                  className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 sm:px-6 sm:py-3 rounded-lg disabled:bg-gray-400 w-full"
-                >
-                  {isAnimating ? "Reversing..." : "Reverse List"}
-                </button>
-                <button
-                  onClick={handleReset}
-                  className="bg-transparent text-black dark:text-white border border-black dark:border-white hover:bg-gray-100 dark:hover:bg-gray-700 px-4 py-2 sm:px-6 sm:py-3 rounded-lg w-full"
-                >
-                  Reset All
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Legend - Responsive */}
-        <div className="mb-4 flex flex-wrap justify-center gap-3 sm:gap-6 text-sm sm:text-base">
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-md bg-emerald-600 mr-2"></div>
-            <span>List Node</span>
-          </div>
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-md bg-blue-600 mr-2"></div>
-            <span>Current Node</span>
-          </div>
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-md bg-amber-500 mr-2"></div>
-            <span>Previous Node</span>
-          </div>
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-md bg-gray-600 mr-2"></div>
-            <span>Next Node</span>
-          </div>
-        </div>
-
-        {/* Visualization Area */}
-        <div className="space-y-12">
-          {/* List */}
-          <div className="flex flex-col items-center">
-            <h3 className="text-lg font-medium mb-2 text-emerald-600">
-              List {currentPointer >= 0 && `(Current: ${currentPointer + 1})`}
-            </h3>
-            <div
-              ref={containerRef}
-              className="relative bg-gray-200/50 dark:bg-gray-800/50 border dark:border-gray-700 rounded-lg min-h-[120px] p-4 w-full max-w-4xl overflow-x-auto"
-            >
-              {list.length === 0 ? (
-                <div className="text-center w-full py-8 text-gray-500 dark:text-gray-400">
-                  Generate List to begin
-                </div>
-              ) : (
-                <div className="flex items-center justify-center space-x-2">
-                  {list.map((node, index) => (
-                    <React.Fragment key={`list-${node.id}`}>
-                      <div
-                        ref={el => (listRefs.current[index] = el)}
-                        className={`node flex flex-col items-center justify-center text-white text-lg w-20 h-16 rounded-md shadow-md transition-all ${
-                          index === currentPointer
-                            ? 'bg-blue-600 ring-4 ring-blue-300 scale-110'
-                            : index === prevPointer
-                            ? 'bg-amber-500 ring-4 ring-amber-300 scale-105'
-                            : index === nextPointer
-                            ? 'bg-gray-600 ring-2 ring-gray-400'
-                            : 'bg-emerald-600'
-                        }`}
-                      >
-                        {node.value}
-                        <div className="text-xs mt-1 opacity-80">{node.next}</div>
-                      </div>
-                      {index < list.length - 1 && (
-                        <svg
-                          className="w-8 h-8 opacity-70 text-gray-600 dark:text-gray-300"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                        >
-                          <path d="M5 12h14M12 5l7 7-7 7" />
-                        </svg>
-                      )}
-                    </React.Fragment>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-        
-        <p className="text-lg text-center text-gray-600 dark:text-gray-400 mt-8 mb-8">
-          Test Your Knowledge Before Moving Forward!
-        </p>
-        <Quiz />
-        <CodeBlock />
-
-        <ExploreOther
-          title="Explore Other Operations"
-          links={[
-            { text: "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>
-  );
-};
-
-export default LinkedListReverse;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/reverse/codeBlock.jsx b/app/visualizer/linkedList/operations/reverse/codeBlock.jsx
deleted file mode 100755
index 3e60a925e..000000000
--- 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 a3180d10c..000000000
--- 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/data/questions.json b/app/visualizer/linkedList/operations/reverse/data/questions.json
deleted file mode 100755
index 447da74a7..000000000
--- a/app/visualizer/linkedList/operations/reverse/data/questions.json
+++ /dev/null
@@ -1,112 +0,0 @@
-[
-  {
-    "question": "What is the primary purpose of reversing a linked list?",
-    "options": [
-      "To traverse the list in reverse order",
-      "To sort the list",
-      "To delete all nodes",
-      "To merge two lists"
-    ],
-    "correctAnswer": 0,
-    "explanation": "Reversing a linked list allows you to traverse the list from tail to head, which is not directly possible in a singly linked list."
-  },
-  {
-    "question": "Which pointers are typically used during the reversal process?",
-    "options": [
-      "Current, Previous, Next",
-      "Head, Tail, Middle",
-      "Left, Right, Mid",
-      "Start, End, Temp"
-    ],
-    "correctAnswer": 0,
-    "explanation": "The reversal process commonly uses three pointers: current (the node being processed), previous (the node before current), and next (the node after current)."
-  },
-  {
-    "question": "What is the time complexity of reversing a singly linked list iteratively?",
-    "options": [
-      "O(1)",
-      "O(log n)",
-      "O(n)",
-      "O(n^2)"
-    ],
-    "correctAnswer": 2,
-    "explanation": "Each node is visited once, so the time complexity is O(n)."
-  },
-  {
-    "question": "What happens to the original head after a successful reversal?",
-    "options": [
-      "It becomes the new tail",
-      "It is deleted",
-      "It remains the head",
-      "It points to itself"
-    ],
-    "correctAnswer": 0,
-    "explanation": "After reversal, the original head node becomes the new tail of the linked list."
-  },
-  {
-    "question": "What is the space complexity of the iterative reversal approach?",
-    "options": [
-      "O(n)",
-      "O(1)",
-      "O(log n)",
-      "O(n^2)"
-    ],
-    "correctAnswer": 1,
-    "explanation": "Iterative reversal only uses a few pointers, so it has O(1) auxiliary space complexity."
-  },
-  {
-    "question": "What is the final value of the `.next` field of the new tail node after reversal?",
-    "options": [
-      "Points to the old head",
-      "Points to itself",
-      "Is null",
-      "Points to the new head"
-    ],
-    "correctAnswer": 2,
-    "explanation": "The new tail node's `.next` should be set to null, indicating the end of the list."
-  },
-  {
-    "question": "What happens if you reverse an empty linked list?",
-    "options": [
-      "It throws an error",
-      "The result is still an empty list",
-      "It becomes a circular list",
-      "It creates a new node"
-    ],
-    "correctAnswer": 1,
-    "explanation": "Reversing an empty linked list results in an empty list (null head)."
-  },
-  {
-    "question": "How can you visually confirm that the list has been reversed?",
-    "options": [
-      "By checking if the order of nodes is flipped",
-      "By checking if the length has changed",
-      "By checking memory addresses",
-      "By checking if all values are zero"
-    ],
-    "correctAnswer": 0,
-    "explanation": "The order of nodes should be the exact reverse of the original list."
-  },
-  {
-    "question": "What should be done before changing the `.next` pointer of a node?",
-    "options": [
-      "Save the next node in a temporary variable",
-      "Delete the node",
-      "Set the node's value to zero",
-      "Move the head pointer"
-    ],
-    "correctAnswer": 0,
-    "explanation": "Always save the next node in a temporary variable before changing `.next`, or you may lose access to the rest of the list."
-  },
-  {
-    "question": "Which approach is safer in terms of memory usage for large lists?",
-    "options": [
-      "Recursive reversal",
-      "Iterative reversal",
-      "Merging",
-      "Sorting"
-    ],
-    "correctAnswer": 1,
-    "explanation": "Iterative reversal is safer for large lists because it uses constant space, whereas recursion can cause stack overflow."
-  }
-]
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/reverse/page.jsx b/app/visualizer/linkedList/operations/reverse/page.jsx
deleted file mode 100755
index 9be76f911..000000000
--- a/app/visualizer/linkedList/operations/reverse/page.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import Animation from "@/app/visualizer/linkedList/operations/reverse/animation";
-import Navbar from "@/app/components/navbarinner";
-
-export const metadata = {
-    title: 'Linked List Reverse Algorithm | Interactive Visualization & Step-by-Step Guide',
-    description:
-        'Explore how reversing a linked list works with interactive animations, clear explanations, and hands-on practice. Visualize each step of the reverse process and master linked list algorithms efficiently.',
-    keywords: [
-        'Linked List Reverse',
-        'Reverse Animation Linked List',
-        'Visualize Reverse in Linked List',
-        'Linked List Algorithm',
-        'DSA Linked List Reverse',
-        'Linked List Reverse Visualization',
-        'Interactive Linked List',
-        'Reverse Step-by-Step',
-        'Linked List Learning',
-        'Data Structures Animation',
-        'DSA Practice Linked List',
-        'Reverse Code Example',
-        'Linked List Tutorial',
-        'Reverse using C',
-        'Reverse using Java',
-        'Reverse using Javascript',
-        'Reverse using Python',
-        'Reverse linked list',
-    ],
-    robots: 'index, follow',
-};
-
-export default function Page() {
-  return (
-    <>
-      <Navbar/>
-      <Animation/>
-    </>
-  );
-};
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/reverse/quiz.jsx b/app/visualizer/linkedList/operations/reverse/quiz.jsx
deleted file mode 100755
index 35ebd0a89..000000000
--- a/app/visualizer/linkedList/operations/reverse/quiz.jsx
+++ /dev/null
@@ -1,398 +0,0 @@
-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';
-import Questions from "@/app/visualizer/linkedList/operations/reverse/data/questions.json";
-
-const Quiz = () => {
-const questions = Questions
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showExplanation, setShowExplanation] = useState(false);
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-  const [penaltyApplied, setPenaltyApplied] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    if (selectedAnswer !== null) return;
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (showExplanation && !penaltyApplied) {
-      setScore(prevScore => Math.max(0, prevScore - 0.5));
-      setPenaltyApplied(true);
-    }
-
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    
-    setShowExplanation(false);
-    setPenaltyApplied(false);
-    
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setShowExplanation(false);
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowExplanation(false);
-    setShowIntro(true);
-    setPenaltyApplied(false);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Selection Sort");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Selection Sort");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("comparison with other simple sorts");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("stability characteristics");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Selection Sort concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-2xl mx-auto shadow-lg rounded-xl bg-white dark:bg-gray-800 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Reverse Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-            {selectedAnswer !== null && (
-              <div className="mb-6">
-                <button
-                  onClick={() => setShowExplanation(!showExplanation)}
-                  className="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:underline mb-2"
-                >
-                  <FaInfoCircle className="mr-1" />
-                  {showExplanation ? "Hide Explanation" : "Show Explanation"}
-                </button>
-                <AnimatePresence>
-                  {showExplanation && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: "auto" }}
-                      exit={{ opacity: 0, height: 0 }}
-                      className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm overflow-hidden"
-                    >
-                      {questions[currentQuestion].explanation}
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-            )}
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default Quiz;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/traversal/animation.jsx b/app/visualizer/linkedList/operations/traversal/animation.jsx
deleted file mode 100755
index b45cf7a03..000000000
--- a/app/visualizer/linkedList/operations/traversal/animation.jsx
+++ /dev/null
@@ -1,306 +0,0 @@
-"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([]);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const nodeRefs = useRef([]);
-  const arrowRefs = useRef([]);
-  const addressRefs = useRef([]);
-  const containerRef = useRef(null);
-  const animationTimeline = useRef(gsap.timeline());
-
-  // Generate random linked list with cute emoji values
-  const generateRandomList = () => {
-    if (isAnimating) return;
-    handleReset();
-
-    const emojis = ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼'];
-    const size = Math.min(Math.floor(Math.random() * 3) + 3, emojis.length); //nodes
-    const shuffledEmojis = [...emojis].sort(() => 0.5 - Math.random());
-    
-    const newList = shuffledEmojis.slice(0, size).map((emoji, index) => ({
-      value: emoji,
-      id: Date.now() + index,
-      address: `0x${Math.floor(Math.random() * 0x10000).toString(16).padStart(4, '0')}`,
-      next: index < size - 1 ? `0x${Math.floor(Math.random() * 0x10000).toString(16).padStart(4, '0')}` : 'NULL'
-    }));
-
-    setList(newList);
-  };
-
-  // Animate traversal with cute bouncy effect
-  const animateTraversal = () => {
-    if (isAnimating || list.length === 0) return;
-    setIsAnimating(true);
-    
-    // Reset all nodes to default state
-    gsap.set(nodeRefs.current, {
-      backgroundColor: '#3b82f6',
-      scale: 1,
-      y: 0
-    });
-    
-    gsap.set(arrowRefs.current, {
-      opacity: 0.6,
-      scale: 1
-    });
-    
-    gsap.set(addressRefs.current, {
-      color: '#6b7280'
-    });
-
-    animationTimeline.current.clear();
-    
-    list.forEach((node, index) => {
-      // Bounce-in effect for node
-      animationTimeline.current.to(nodeRefs.current[index], {
-        duration: 0.5,
-        backgroundColor: '#10b981',
-        scale: 1.2,
-        y: -20,
-        ease: 'elastic.out(1, 0.5)'
-      }, `+=${index * 0.3}`);
-      
-      // Highlight address
-      animationTimeline.current.to(addressRefs.current[index], {
-        duration: 0.3,
-        color: '#3b82f6',
-        fontWeight: 'bold',
-        ease: 'power1.inOut'
-      }, `-=${0.4}`);
-      
-      // Highlight arrow if not last node
-      if (index < list.length - 1) {
-        animationTimeline.current.to(arrowRefs.current[index], {
-          duration: 0.3,
-          opacity: 1,
-          scale: 1.3,
-          ease: 'power1.inOut'
-        }, `-=${0.3}`);
-      }
-      
-      // Return to normal state
-      animationTimeline.current.to(nodeRefs.current[index], {
-        duration: 0.5,
-        backgroundColor: '#3b82f6',
-        scale: 1,
-        y: 0,
-        ease: 'back.out(1)'
-      }, `+=${0.2}`);
-      
-      if (index < list.length - 1) {
-        animationTimeline.current.to(arrowRefs.current[index], {
-          duration: 0.3,
-          opacity: 0.6,
-          scale: 1,
-          ease: 'power1.inOut'
-        }, `+=${0.1}`);
-      }
-      
-      animationTimeline.current.to(addressRefs.current[index], {
-        duration: 0.3,
-        color: '#6b7280',
-        fontWeight: 'normal',
-        ease: 'power1.inOut'
-      }, `+=${0.1}`);
-    });
-    
-    animationTimeline.current.eventCallback('onComplete', () => {
-      setIsAnimating(false);
-    });
-  };
-
-  // Reset handler
-  const handleReset = () => {
-    gsap.killTweensOf("*");
-    animationTimeline.current.clear();
-    setList([]);
-    setIsAnimating(false);
-    nodeRefs.current = [];
-    arrowRefs.current = [];
-    addressRefs.current = [];
-  };
-
-  // Update refs when list changes
-  useEffect(() => {
-    nodeRefs.current = nodeRefs.current.slice(0, list.length);
-    arrowRefs.current = arrowRefs.current.slice(0, Math.max(0, list.length - 1));
-    addressRefs.current = addressRefs.current.slice(0, list.length);
-  }, [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 />
-        <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>
-
-        {/* Controls - Responsive */}
-        <div className="flex justify-center mb-8">
-          <div className="bg-white dark:bg-gray-800 border dark:border-gray-700 p-4 sm:p-6 w-full max-w-4xl rounded-lg shadow-md">
-            <div className="flex flex-col sm:flex-row gap-4 w-full">
-              {/* Buttons for desktop */}
-              <div className="hidden sm:flex gap-2 w-full">
-                <button
-                  onClick={generateRandomList}
-                  disabled={isAnimating}
-                  className="bg-emerald-600 hover:bg-emerald-700 text-white px-6 py-3 rounded-lg disabled:bg-gray-400 flex-1 flex items-center justify-center gap-2"
-                >
-                  <span>Generate List</span>
-                </button>
-                <button
-                  onClick={animateTraversal}
-                  disabled={isAnimating || list.length === 0}
-                  className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg disabled:bg-gray-400 flex-1 flex items-center justify-center gap-2"
-                >
-                  <span>{isAnimating ? "Traversing..." : "Animate Traversal"}</span>
-                </button>
-                <button
-                  onClick={handleReset}
-                  className="bg-transparent text-black dark:text-white border border-black dark:border-white hover:bg-gray-100 dark:hover:bg-gray-700 px-6 py-3 rounded-lg flex-1 flex items-center justify-center gap-2"
-                >
-                  Reset
-                </button>
-              </div>
-              
-              {/* Buttons for mobile */}
-              <div className="flex sm:hidden flex-col gap-2 w-full">
-                <button
-                  onClick={generateRandomList}
-                  disabled={isAnimating}
-                  className="bg-emerald-600 hover:bg-emerald-700 text-white px-6 py-3 rounded-lg disabled:bg-gray-400 flex items-center justify-center gap-2"
-                >
-                  <span>🎲</span> Generate List
-                </button>
-                <button
-                  onClick={animateTraversal}
-                  disabled={isAnimating || list.length === 0}
-                  className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg disabled:bg-gray-400 flex items-center justify-center gap-2"
-                >
-                  <span>✨</span> {isAnimating ? "Traversing..." : "Animate Traversal"}
-                </button>
-                <button
-                  onClick={handleReset}
-                  className="bg-transparent text-black dark:text-white border border-black dark:border-white hover:bg-gray-100 dark:hover:bg-gray-700 px-6 py-3 rounded-lg flex items-center justify-center gap-2"
-                >
-                  <span>🔄</span> Reset
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Legend - Responsive */}
-        <div className="mb-4 flex flex-wrap justify-center gap-3 sm:gap-6 text-sm sm:text-base">
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-full bg-blue-500 mr-2"></div>
-            <span>Node</span>
-          </div>
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-full bg-emerald-500 mr-2"></div>
-            <span>Visited</span>
-          </div>
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-full bg-blue-300 mr-2"></div>
-            <span>Address</span>
-          </div>
-          <div className="flex items-center">
-            <div className="w-4 h-4 rounded-full bg-gray-400 mr-2"></div>
-            <span>Pointer</span>
-          </div>
-        </div>
-
-        {/* Visualization Area */}
-        <div className="flex justify-center px-2">
-          <div
-            ref={containerRef}
-            className="relative bg-gray-200/50 dark:bg-gray-800/50 border dark:border-gray-700 rounded-lg min-h-[200px] p-4 flex items-center justify-center w-full max-w-4xl overflow-x-auto"
-          >
-            {list.length === 0 ? (
-              <div className="text-center w-full py-12 text-gray-500 dark:text-gray-400">
-                Click "Generate List" to create a linked list 🌈
-              </div>
-            ) : (
-              <div className="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6">
-                {list.map((node, index) => (
-                  <React.Fragment key={node.id}>
-                    <div className="flex flex-col items-center gap-2">
-                      <div className="text-xs font-mono text-gray-500 dark:text-gray-400" ref={el => addressRefs.current[index] = el}>
-                        {node.address}
-                      </div>
-                      <div
-                        ref={(el) => (nodeRefs.current[index] = el)}
-                        className="node flex flex-col items-center justify-center bg-blue-500 text-white text-3xl w-16 h-16 rounded-full shadow-md cursor-pointer hover:shadow-lg transition-all"
-                        onClick={animateTraversal}
-                      >
-                        {node.value}
-                      </div>
-                      <div className="text-xs font-mono bg-blue-100 dark:bg-blue-900 px-2 py-1 rounded">
-                        Next: {node.next}
-                      </div>
-                    </div>
-                    {index < list.length - 1 && (
-                      <svg
-                        ref={(el) => (arrowRefs.current[index] = el)}
-                        className="w-8 h-8 my-4 opacity-60 text-gray-600 dark:text-gray-300"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      >
-                        <path d="M5 12h14M12 5l7 7-7 7" />
-                      </svg>
-                    )}
-                  </React.Fragment>
-                ))}
-              </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: "Compare", url: "./comparison" },
-            { text: "Merge", url: "./merge" },
-            { text: "Searching", url: "./search" },
-            { text: "Reverse", url: "./reverse" },
-          ]}
-        />
-      </main>
-      <BackToTop />
-      <Footer />
-    </div>
-  );
-};
-
-export default LinkedListTraversal;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/traversal/codeBlock.jsx b/app/visualizer/linkedList/operations/traversal/codeBlock.jsx
deleted file mode 100755
index 2c401ea0a..000000000
--- 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/content.jsx b/app/visualizer/linkedList/operations/traversal/content.jsx
deleted file mode 100755
index 68838314d..000000000
--- a/app/visualizer/linkedList/operations/traversal/content.jsx
+++ /dev/null
@@ -1,261 +0,0 @@
-const content = () => {
-  const overview = [
-    `Linked List traversal involves visiting each node in the list exactly once, starting from the head and moving through the next pointers until the end is reached.`,
-    `Traversal is essential for operations like searching, displaying, or processing each element of the list. It ensures that all elements are accessed in sequence.`,
-    `Understanding traversal is a foundational step for more advanced linked list algorithms, including deletion, reversal, and cycle detection.`,
-  ];
-
-  const traversalTypes = [
-    {
-      name: "Iterative Traversal",
-      complexity: "O(n)",
-      description: "Uses a loop to traverse from head to end of list",
-      code: `function traverseIterative() {
-  let current = head;
-  while (current) {
-    console.log(current.data);
-    current = current.next;
-  }
-}`
-    },
-    {
-      name: "Recursive Traversal",
-      complexity: "O(n) and O(n) space (due to recursion stack)",
-      description: "Uses recursion to print each node from head to end",
-      code: `function traverseRecursive(node) {
-  if (!node) return;
-  console.log(node.data);
-  traverseRecursive(node.next);
-}`
-    }
-  ];
-
-  const traversalSteps = [
-    { step: "Start from the head node" },
-    { step: "Access the data of the current node" },
-    { step: "Move to the next node using the next pointer" },
-    { step: "Repeat until the current node becomes null" }
-  ];
-
-  const visualization = [
-    { operation: "Initial State", state: "head → [A] → [B] → [C] → null" },
-    { operation: "Traverse", state: "Visited: A → B → C" }
-  ];
-
-  const edgeCases = [
-    "Empty list (head = null)",
-    "Single-node list (head → [A] → null)",
-    "List with cycles (can cause infinite traversal if not handled)",
-    "Recursive traversal stack overflow for large lists"
-  ];
-
-  const bestPractices = [
-    "Always check if the list is empty before traversal",
-    "Avoid infinite loops by checking for cycles",
-    "Use iteration for large lists to prevent stack overflow",
-    "Keep traversal read-only unless modifying the list is necessary",
-    "Separate logic for display and manipulation for better modularity"
-  ];
-
-  const comparisonTable = [
-    {
-      feature: "Time Complexity",
-      array: "O(n)",
-      linkedList: "O(n)"
-    },
-    {
-      feature: "Access Method",
-      array: "Direct via index",
-      linkedList: "Sequential via next pointer"
-    },
-    {
-      feature: "Recursion Friendly",
-      array: "Not typically used recursively",
-      linkedList: "Supports recursive traversal"
-    },
-    {
-      feature: "Loop Detection Required",
-      array: "Not needed",
-      linkedList: "May be necessary in some cases"
-    }
-  ];
-
-  return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
-        {/* Overview Section */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Traversal
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            {overview.map((para, index) => (
-              <p key={index} className="text-[#374151] dark:text-[#d1d5db] mb-3 leading-relaxed">
-                {para}
-              </p>
-            ))}
-            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                <strong>Key Insight:</strong> Traversal is the basis for all linked list operations—ensure you visit every node, and beware of cycles that can cause infinite loops.
-              </p>
-            </div>
-          </div>
-        </section>
-
-        {/* Traversal Types */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Traversal Types</h2>
-          <div className="space-y-6">
-            {traversalTypes.map((type, index) => (
-              <div key={index} className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{type.name}</h3>
-                <div className="flex flex-col md:flex-row gap-4">
-                  <div className="flex-1">
-                    <p className="text-[#374151] dark:text-[#d1d5db] mb-2"><strong>Complexity:</strong> <span className="font-mono">{type.complexity}</span></p>
-                    <p className="text-[#374151] dark:text-[#d1d5db]">{type.description}</p>
-                  </div>
-                  <div className="flex-1">
-                    <pre className="bg-gray-100 dark:bg-gray-800 p-3 rounded-md text-sm overflow-x-auto">
-                      <code className="text-gray-800 dark:text-gray-200">{type.code}</code>
-                    </pre>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        {/* Traversal Process */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Traversal Process</h2>
-          <div>
-            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {traversalSteps.map((step, index) => (
-                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">{step.step}</li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Visualization */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Operation Visualization</h2>
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-              <thead className="bg-gray-50 dark:bg-gray-700">
-                <tr>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Operation</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">List State</th>
-                </tr>
-              </thead>
-              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                {visualization.map((item, index) => (
-                  <tr key={index}>
-                    <td className="px-4 py-3 text-sm font-mono text-gray-900 dark:text-white">{item.operation}</td>
-                    <td className="px-4 py-3 text-sm font-mono text-[#374151] dark:text-[#d1d5db]">{item.state}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
-
-        {/* Edge Cases */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Edge Cases to Consider</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {edgeCases.map((caseItem, index) => (
-              <div key={index} className="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg border border-gray-200 dark:border-gray-600">
-                <div className="flex items-start">
-                  <div className="flex-shrink-0 h-5 w-5 text-yellow-500 mt-0.5">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                      <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-                    </svg>
-                  </div>
-                  <div className="ml-3">
-                    <p className="text-sm text-[#374151] dark:text-[#d1d5db]">{caseItem}</p>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        {/* Best Practices */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Best Practices</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {bestPractices.map((practice, index) => (
-              <div key={index} className="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg border border-gray-200 dark:border-gray-600">
-                <div className="flex items-start">
-                  <div className="flex-shrink-0 h-5 w-5 text-green-500 mt-0.5">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
-                    </svg>
-                  </div>
-                  <div className="ml-3">
-                    <p className="text-sm text-[#374151] dark:text-[#d1d5db]">{practice}</p>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        {/* Comparison with Arrays */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Comparison with Array Traversal</h2>
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-              <thead className="bg-gray-50 dark:bg-gray-700">
-                <tr>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Array</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Linked List</th>
-                </tr>
-              </thead>
-              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                {comparisonTable.map((row, index) => (
-                  <tr key={index}>
-                    <td className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{row.feature}</td>
-                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.array}</td>
-                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.linkedList}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-          <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              <strong>When to Choose:</strong> Use arrays for indexed, direct access and linked lists for flexible sequential access and recursive algorithms.
-            </p>
-          </div>
-        </section>
-
-        {/* Final Notes */}
-        <section className="p-6">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Implementation Notes</h2>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="list-disc pl-5 space-y-2 marker:text-blue-500 dark:marker:text-blue-400">
-              <li className="text-[#374151] dark:text-[#d1d5db]">
-                <strong>Cycle Detection:</strong> Be cautious of loops in the list during traversal, consider Floyd’s algorithm for detection
-              </li>
-              <li className="text-[#374151] dark:text-[#d1d5db]">
-                <strong>Logging:</strong> Use console or UI to log visited nodes during visualization
-              </li>
-              <li className="text-[#374151] dark:text-[#d1d5db]">
-                <strong>Testing:</strong> Test traversal on empty, single-node, and multi-node lists
-              </li>
-              <li className="text-[#374151] dark:text-[#d1d5db]">
-                <strong>Efficiency:</strong> For large lists, prefer iteration to avoid stack issues with recursion
-              </li>
-            </ul>
-          </div>
-        </section>
-      </article>
-    </main>
-  );
-};
-
-export default content;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/traversal/data/codeExamples.json b/app/visualizer/linkedList/operations/traversal/data/codeExamples.json
deleted file mode 100755
index d9544feea..000000000
--- a/app/visualizer/linkedList/operations/traversal/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 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
diff --git a/app/visualizer/linkedList/operations/traversal/data/questions.json b/app/visualizer/linkedList/operations/traversal/data/questions.json
deleted file mode 100755
index 9ad58cccf..000000000
--- a/app/visualizer/linkedList/operations/traversal/data/questions.json
+++ /dev/null
@@ -1,112 +0,0 @@
-[
-  {
-    "question": "What is the main purpose of linked list traversal?",
-    "options": [
-      "To modify the structure of the list",
-      "To search, display or process each node",
-      "To reverse the list",
-      "To insert nodes efficiently"
-    ],
-    "correctAnswer": 1,
-    "explanation": "Traversal allows visiting each node for operations like searching, displaying, or processing."
-  },
-  {
-    "question": "What is the time complexity of traversing a singly linked list with 'n' nodes?",
-    "options": [
-      "O(1)",
-      "O(log n)",
-      "O(n)",
-      "O(n log n)"
-    ],
-    "correctAnswer": 2,
-    "explanation": "Each of the n nodes is visited once, so the time complexity is O(n)."
-  },
-  {
-    "question": "What happens if a linked list has a cycle and you traverse it without detection?",
-    "options": [
-      "Traversal ends normally",
-      "Compiler throws an error",
-      "Traversal goes into infinite loop",
-      "Nodes are skipped"
-    ],
-    "correctAnswer": 2,
-    "explanation": "A cycle in the list causes infinite traversal unless cycle detection is implemented."
-  },
-  {
-    "question": "Which traversal method uses the call stack and can risk stack overflow?",
-    "options": [
-      "Iterative traversal",
-      "Recursive traversal",
-      "Tail traversal",
-      "Breadth-first traversal"
-    ],
-    "correctAnswer": 1,
-    "explanation": "Recursive traversal uses the call stack and may overflow for large lists."
-  },
-  {
-    "question": "Which pointer is used to move through a singly linked list during traversal?",
-    "options": [
-      "prev",
-      "head",
-      "tail",
-      "current"
-    ],
-    "correctAnswer": 3,
-    "explanation": "A 'current' pointer is typically used to walk through the nodes starting from head."
-  },
-  {
-    "question": "When does a traversal loop stop in a properly structured singly linked list?",
-    "options": [
-      "When current equals head",
-      "When current becomes null",
-      "When current reaches tail",
-      "After n iterations"
-    ],
-    "correctAnswer": 1,
-    "explanation": "Traversal ends when the current pointer reaches null."
-  },
-  {
-    "question": "Which of the following is NOT an edge case in traversal?",
-    "options": [
-      "Empty list",
-      "List with a cycle",
-      "List with one node",
-      "Head insertion"
-    ],
-    "correctAnswer": 3,
-    "explanation": "Head insertion is not a traversal case; it's an insertion case."
-  },
-  {
-    "question": "Why is it recommended to use iteration over recursion for large lists?",
-    "options": [
-      "Recursion is slower",
-      "Iteration uses less memory",
-      "Recursion doesn’t work with linked lists",
-      "Iteration is more readable"
-    ],
-    "correctAnswer": 1,
-    "explanation": "Iteration avoids the overhead of recursive call stacks and prevents stack overflow."
-  },
-  {
-    "question": "What is a key insight for safe traversal?",
-    "options": [
-      "Skip null checks to save time",
-      "Pre-allocate nodes for speed",
-      "Ensure there are no cycles",
-      "Avoid using a current pointer"
-    ],
-    "correctAnswer": 2,
-    "explanation": "Cycle detection (like Floyd’s algorithm) is important to avoid infinite loops."
-  },
-  {
-    "question": "How many times is each node visited during traversal?",
-    "options": [
-      "Only first and last nodes",
-      "Only once",
-      "Depends on data",
-      "Until tail is updated"
-    ],
-    "correctAnswer": 1,
-    "explanation": "Each node is visited once in a standard traversal operation."
-  }
-]
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/traversal/page.jsx b/app/visualizer/linkedList/operations/traversal/page.jsx
deleted file mode 100755
index ea52d723a..000000000
--- a/app/visualizer/linkedList/operations/traversal/page.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import Animation from "@/app/visualizer/linkedList/operations/traversal/animation";
-import Navbar from "@/app/components/navbarinner";
-
-export const metadata = {
-    title: 'Linked List Traversal Algorithm | Interactive Visualization & Step-by-Step Guide',
-    description:
-        'Explore how traversal works in Linked Lists with interactive animations, clear explanations, and hands-on practice. Visualize each step of the traversal process and master linked list algorithms efficiently.',
-    keywords: [
-        'Linked List Traversal',
-        'Traversal Animation Linked List',
-        'Visualize Traversal in Linked List',
-        'Linked List Algorithm',
-        'DSA Linked List Traversal',
-        'Linked List Traversal Visualization',
-        'Interactive Linked List',
-        'Traversal Step-by-Step',
-        'Linked List Learning',
-        'Data Structures Animation',
-        'DSA Practice Linked List',
-        'Traversal Code Example',
-        'Linked List Tutorial',
-        'Traversal using C',
-        'Traversal using Java',
-        'Traversal using Javascript',
-        'Traversal using Python',
-        'Traversal using linked list',
-    ],
-    robots: 'index, follow',
-};
-export default function Page() {
-  return (
-    <>
-      <Navbar/>
-      <Animation/>
-    </>
-  );
-};
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/traversal/quiz.jsx b/app/visualizer/linkedList/operations/traversal/quiz.jsx
deleted file mode 100755
index 8508dcd68..000000000
--- a/app/visualizer/linkedList/operations/traversal/quiz.jsx
+++ /dev/null
@@ -1,399 +0,0 @@
-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';
-import Questions from "@/app/visualizer/linkedList/operations/traversal/data/questions.json";
-
-const Quiz = () => {
-const questions = Questions;
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showExplanation, setShowExplanation] = useState(false);
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-  const [penaltyApplied, setPenaltyApplied] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    if (selectedAnswer !== null) return;
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (showExplanation && !penaltyApplied) {
-      setScore(prevScore => Math.max(0, prevScore - 0.5));
-      setPenaltyApplied(true);
-    }
-
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    
-    setShowExplanation(false);
-    setPenaltyApplied(false);
-    
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setShowExplanation(false);
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowExplanation(false);
-    setShowIntro(true);
-    setPenaltyApplied(false);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Selection Sort");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Selection Sort");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("comparison with other simple sorts");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("stability characteristics");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Selection Sort concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-2xl mx-auto shadow-lg rounded-xl bg-white dark:bg-gray-800 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Traversal Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-            {selectedAnswer !== null && (
-              <div className="mb-6">
-                <button
-                  onClick={() => setShowExplanation(!showExplanation)}
-                  className="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:underline mb-2"
-                >
-                  <FaInfoCircle className="mr-1" />
-                  {showExplanation ? "Hide Explanation" : "Show Explanation"}
-                </button>
-                <AnimatePresence>
-                  {showExplanation && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: "auto" }}
-                      exit={{ opacity: 0, height: 0 }}
-                      className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm overflow-hidden"
-                    >
-                      {questions[currentQuestion].explanation}
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-            )}
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default Quiz;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/types/circular/animation.jsx b/app/visualizer/linkedList/types/circular/animation.jsx
deleted file mode 100755
index da8d8caaa..000000000
--- a/app/visualizer/linkedList/types/circular/animation.jsx
+++ /dev/null
@@ -1,283 +0,0 @@
-'use client';
-import React, { useState, useRef, useEffect } from 'react';
-import { gsap } from 'gsap';
-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/circular/content";
-import Quiz from '@/app/visualizer/linkedList/types/circular/quiz';
-import CodeBlock from "@/app/visualizer/linkedList/types/circular/codeBlock";
-import BackToTop from '@/app/components/ui/backtotop';
-import GoBackButton from "@/app/components/ui/goback";
-
-const CircularLinkedListVisualizer = () => {
-  const [inputValue, setInputValue] = useState('');
-  const [list, setList] = useState([]);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const nodeIdCounter = useRef(1);
-  const containerRef = useRef(null);
-
-  // Generate random memory addresses
-  const generateMemoryAddress = () => {
-    return '0x' + Math.floor(Math.random() * 0xFFFF).toString(16).padStart(4, '0');
-  };
-
-  const addNode = () => {
-    if (!inputValue || isAnimating) return;
-    setIsAnimating(true);
-
-    const newNode = {
-      value: inputValue,
-      id: nodeIdCounter.current++,
-      address: generateMemoryAddress(),
-    };
-
-    setList(prev => {
-      if (prev.length === 0) {
-        newNode.next = newNode.address;
-        return [newNode];
-      } else {
-        const updatedList = [...prev];
-        newNode.next = updatedList[0].address;
-        updatedList[updatedList.length - 1].next = newNode.address;
-        return [...updatedList, newNode];
-      }
-    });
-
-    setInputValue('');
-    setIsAnimating(false);
-  };
-
-  const animateNodeAddition = (nodeId) => {
-    const newNodeElement = document.querySelector(`[data-node-id="${nodeId}"]`);
-    const arrows = document.querySelectorAll('.connection-arrow');
-
-    if (!newNodeElement) return;
-
-    // Node entry animation
-    gsap.from(newNodeElement, {
-      opacity: 0,
-      scale: 0.5,
-      duration: 0.5,
-      ease: 'back.out(1.7)'
-    });
-
-    // Arrow animations
-    gsap.from(arrows, {
-      opacity: 0,
-      duration: 0.3,
-      stagger: 0.1
-    });
-  };
-
-  const resetList = () => {
-    // Animate nodes out
-    const nodes = document.querySelectorAll('[data-node-id]');
-    gsap.to(nodes, {
-      opacity: 0,
-      scale: 0.5,
-      duration: 0.3,
-      stagger: 0.05,
-      onComplete: () => {
-        setList([]);
-        nodeIdCounter.current = 1;
-      }
-    });
-  };
-
-  useEffect(() => {
-    if (list.length > 0) {
-      animateNodeAddition(list[list.length - 1].id);
-    }
-  }, [list]);
-
-  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">Circular Linked List</span>
-        </h1>
-        <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl mt-2 mb-5"></div>
-        <Content />
-        <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-          Visualize Circular Linked List Operations
-        </p>
-        
-        {/* Input Form */}
-        <div className="max-w-md mx-auto bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md mb-8 border border-gray-200 dark:border-gray-700">
-          <div className="mb-4">
-            <label className="block text-gray-700 dark:text-gray-300 mb-2 text-sm font-medium">
-              Node Value
-            </label>
-            <input
-              type="text"
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
-              placeholder="Enter value"
-              disabled={isAnimating}
-              onKeyDown={(e) => e.key === 'Enter' && addNode()}
-            />
-          </div>
-          <div className="flex gap-4">
-            <button
-              onClick={addNode}
-              className={`flex-1 py-3 rounded-lg transition-all ${isAnimating || !inputValue ? 'bg-gray-300 dark:bg-gray-600 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'}`}
-              disabled={isAnimating || !inputValue}
-            >
-              Add Node
-            </button>
-            <ResetButton onReset={resetList} isAnimating={isAnimating} />
-          </div>
-        </div>
-
-        {/* Visualization Area */}
-        <div className="relative max-w-4xl mx-auto">
-          {list.length === 0 ? (
-            <div className="text-center py-16 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-dashed border-gray-300 dark:border-gray-700">
-              <div className="inline-block p-6 bg-gray-100 dark:bg-gray-700 rounded-full mb-4">
-                <svg className="w-12 h-12 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
-                </svg>
-              </div>
-              <h3 className="text-xl font-medium text-gray-700 dark:text-gray-300 mb-2">Empty List</h3>
-              <p className="text-gray-500 dark:text-gray-400">Add nodes to visualize the circular linked list</p>
-            </div>
-          ) : (
-            <div className="relative" ref={containerRef}>
-              {/* Circular arrangement of nodes */}
-              <div className="relative mx-auto" style={{ minHeight: '500px' }}>
-                {list.map((node, index) => {
-                  const angle = (index * (360 / list.length)) * (Math.PI / 180);
-                  const radius = Math.min(200, 150 + list.length * 15);
-                  const centerX = 0;
-                  const centerY = 0;
-                  const nodeX = centerX + radius * Math.cos(angle);
-                  const nodeY = centerY + radius * Math.sin(angle);
-                  
-                  return (
-                    <div
-                      key={node.id}
-                      data-node-id={node.id}
-                      className="absolute transition-all duration-300"
-                      style={{
-                        left: `calc(50% + ${nodeX}px)`,
-                        top: `calc(50% + ${nodeY}px)`,
-                        transform: 'translate(-50%, -50%)',
-                        width: '160px',
-                      }}
-                    >
-                      <div className={`flex flex-col border-2 ${index === 0 ? 'border-green-500' : 'border-blue-500'} rounded-xl p-4 bg-white dark:bg-gray-700 shadow-md`}>
-                        <div className="flex justify-between items-center mb-3">
-                          <span className="font-mono text-xs text-gray-600 dark:text-gray-300">
-                            {node.address}
-                          </span>
-                          <span className={`text-xs px-2 py-1 rounded ${index === 0 ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'}`}>
-                            {index === 0 ? 'HEAD' : `Node ${index}`}
-                          </span>
-                        </div>
-                        <div className="grid grid-cols-2 gap-3 mb-2">
-                          <div className="bg-gray-50 dark:bg-gray-600 p-2 rounded">
-                            <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">Data</div>
-                            <div className="font-bold text-center text-lg">{node.value}</div>
-                          </div>
-                          <div className="bg-gray-50 dark:bg-gray-600 p-2 rounded">
-                            <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">Next</div>
-                            <div className="font-mono text-xs text-center truncate">
-                              {node.next === node.address ? 'self' : node.next}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  );
-                })}
-
-                {/* Arrow connections */}
-                {list.length > 0 && (
-                  <svg className="absolute top-0 left-0 w-full h-full" style={{ zIndex: 1 }}>
-                    {list.map((node, index) => {
-                      const nextIndex = (index + 1) % list.length;
-                      const angle1 = (index * (360 / list.length)) * (Math.PI / 180);
-                      const angle2 = (nextIndex * (360 / list.length)) * (Math.PI / 180);
-                      const radius = Math.min(200, 150 + list.length * 15);
-                      const startX = 50 + (radius * Math.cos(angle1)) / 5;
-                      const startY = 50 + (radius * Math.sin(angle1)) / 5;
-                      const endX = 50 + (radius * Math.cos(angle2)) / 5;
-                      const endY = 50 + (radius * Math.sin(angle2)) / 5;
-                      
-                      // Calculate control points for curved arrows
-                      const controlX = 50;
-                      const controlY = 50;
-                      
-                      return (
-                        <g key={`connection-${node.id}`} className="connection-arrow">
-                          {/* Curved path */}
-                          <path
-                            d={`M ${startX}% ${startY}% Q ${controlX}% ${controlY}%, ${endX}% ${endY}%`}
-                            fill="none"
-                            stroke="#3b82f6"
-                            strokeWidth="2"
-                            strokeDasharray={index === list.length - 1 ? "5,5" : "0"}
-                          />
-                          
-                          {/* Arrowhead */}
-                          <marker 
-                            id={`arrowhead-${node.id}`} 
-                            markerWidth="10" 
-                            markerHeight="7" 
-                            refX="9" 
-                            refY="3.5" 
-                            orient="auto"
-                          >
-                            <polygon points="0 0, 10 3.5, 0 7" fill="#3b82f6" />
-                          </marker>
-                          
-                          {/* Arrow line with arrowhead */}
-                          <path
-                            d={`M ${startX}% ${startY}% Q ${controlX}% ${controlY}%, ${endX}% ${endY}%`}
-                            fill="none"
-                            stroke="#3b82f6"
-                            strokeWidth="2"
-                            markerEnd={`url(#arrowhead-${node.id})`}
-                            opacity="0.7"
-                          />
-                        </g>
-                      );
-                    })}
-                  </svg>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-
-        <p className="text-lg text-center text-gray-600 dark:text-gray-400 mt-8 mb-8">
-          Test Your Knowledge before moving forward!
-        </p>
-        <Quiz />
-
-        <CodeBlock/>
-
-        <ExploreOther
-          title="Explore Other Types"
-          links={[
-            { text: "Singly Linked List", url: "./singly" },
-            { text: "Doubly Linked List", url: "./doubly" },
-          ]}
-        />
-
-      </main>
-      <BackToTop/>
-      <Footer />
-    </div>
-  );
-};
-
-export default CircularLinkedListVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/types/circular/codeBlock.jsx b/app/visualizer/linkedList/types/circular/codeBlock.jsx
deleted file mode 100755
index 5ebcab2ee..000000000
--- a/app/visualizer/linkedList/types/circular/codeBlock.jsx
+++ /dev/null
@@ -1,1152 +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: `// Circular Linked List Implementation in JavaScript
-class Node {
-  constructor(data) {
-    this.data = data;
-    this.next = null;
-  }
-}
-
-class CircularLinkedList {
-  constructor() {
-    this.head = null;
-    this.tail = null;
-    this.size = 0;
-  }
-
-  // Insert at beginning
-  insertFirst(data) {
-    const newNode = new Node(data);
-    if (!this.head) {
-      this.head = newNode;
-      this.tail = newNode;
-      newNode.next = this.head; // Point to itself
-    } else {
-      newNode.next = this.head;
-      this.head = newNode;
-      this.tail.next = this.head; // Update tail's next to new head
-    }
-    this.size++;
-  }
-
-  // Insert at end
-  insertLast(data) {
-    const newNode = new Node(data);
-    if (!this.head) {
-      this.head = newNode;
-      this.tail = newNode;
-      newNode.next = this.head;
-    } else {
-      this.tail.next = newNode;
-      newNode.next = this.head;
-      this.tail = newNode;
-    }
-    this.size++;
-  }
-
-  // Insert at index
-  insertAt(data, index) {
-    if (index < 0 || index > this.size) return;
-    if (index === 0) return this.insertFirst(data);
-    if (index === this.size) return this.insertLast(data);
-
-    const newNode = new Node(data);
-    let current = this.head;
-    let count = 0;
-
-    while (count < index - 1) {
-      current = current.next;
-      count++;
-    }
-
-    newNode.next = current.next;
-    current.next = newNode;
-    this.size++;
-  }
-
-  // Remove from beginning
-  removeFirst() {
-    if (!this.head) return null;
-    const removedNode = this.head;
-    if (this.size === 1) {
-      this.head = null;
-      this.tail = null;
-    } else {
-      this.head = this.head.next;
-      this.tail.next = this.head; // Update tail's next to new head
-    }
-    this.size--;
-    return removedNode.data;
-  }
-
-  // Remove from end
-  removeLast() {
-    if (!this.head) return null;
-    const removedNode = this.tail;
-    if (this.size === 1) {
-      this.head = null;
-      this.tail = null;
-    } else {
-      let current = this.head;
-      while (current.next !== this.tail) {
-        current = current.next;
-      }
-      current.next = this.head; // Point new tail to head
-      this.tail = current;
-    }
-    this.size--;
-    return removedNode.data;
-  }
-
-  // Remove at index
-  removeAt(index) {
-    if (index < 0 || index >= this.size) return null;
-    if (index === 0) return this.removeFirst();
-    if (index === this.size - 1) return this.removeLast();
-
-    let current = this.head;
-    let count = 0;
-    while (count < index - 1) {
-      current = current.next;
-      count++;
-    }
-    const removedNode = current.next;
-    current.next = removedNode.next;
-    this.size--;
-    return removedNode.data;
-  }
-
-  // Get at index
-  getAt(index) {
-    if (index < 0 || index >= this.size) return null;
-    let current = this.head;
-    let count = 0;
-    while (count < index) {
-      current = current.next;
-      count++;
-    }
-    return current.data;
-  }
-
-  // Clear list
-  clear() {
-    this.head = null;
-    this.tail = null;
-    this.size = 0;
-  }
-
-  // Print list
-  print() {
-    if (!this.head) {
-      console.log("List is empty");
-      return;
-    }
-    let current = this.head;
-    let result = "";
-    do {
-      result += current.data + " -> ";
-      current = current.next;
-    } while (current !== this.head);
-    result += "(head)";
-    console.log(result);
-  }
-
-  // Check if list is circular
-  isCircular() {
-    if (!this.head) return true;
-    let slow = this.head;
-    let fast = this.head.next;
-    while (fast && fast.next) {
-      if (slow === fast) return true;
-      slow = slow.next;
-      fast = fast.next.next;
-    }
-    return false;
-  }
-}
-
-// Usage Example
-const cll = new CircularLinkedList();
-cll.insertFirst(100);
-cll.insertFirst(200);
-cll.insertLast(300);
-cll.insertAt(500, 1);
-cll.print(); // 200 -> 500 -> 100 -> 300 -> (head)
-cll.removeAt(2);
-console.log(cll.getAt(1)); // 500
-console.log("Is circular:", cll.isCircular()); // true`,
-
-  python: `# Circular Linked List Implementation in Python
-class Node:
-    def __init__(self, data):
-        self.data = data
-        self.next = None
-
-class CircularLinkedList:
-    def __init__(self):
-        self.head = None
-        self.tail = None
-        self.size = 0
-
-    # Insert at beginning
-    def insert_first(self, data):
-        new_node = Node(data)
-        if not self.head:
-            self.head = new_node
-            self.tail = new_node
-            new_node.next = self.head  # Point to itself
-        else:
-            new_node.next = self.head
-            self.head = new_node
-            self.tail.next = self.head  # Update tail's next to new head
-        self.size += 1
-
-    # Insert at end
-    def insert_last(self, data):
-        new_node = Node(data)
-        if not self.head:
-            self.head = new_node
-            self.tail = new_node
-            new_node.next = self.head
-        else:
-            self.tail.next = new_node
-            new_node.next = self.head
-            self.tail = new_node
-        self.size += 1
-
-    # Insert at index
-    def insert_at(self, data, index):
-        if index < 0 or index > self.size:
-            return
-        if index == 0:
-            return self.insert_first(data)
-        if index == self.size:
-            return self.insert_last(data)
-
-        new_node = Node(data)
-        current = self.head
-        count = 0
-
-        while count < index - 1:
-            current = current.next
-            count += 1
-
-        new_node.next = current.next
-        current.next = new_node
-        self.size += 1
-
-    # Remove from beginning
-    def remove_first(self):
-        if not self.head:
-            return None
-        removed_node = self.head
-        if self.size == 1:
-            self.head = None
-            self.tail = None
-        else:
-            self.head = self.head.next
-            self.tail.next = self.head  # Update tail's next to new head
-        self.size -= 1
-        return removed_node.data
-
-    # Remove from end
-    def remove_last(self):
-        if not self.head:
-            return None
-        removed_node = self.tail
-        if self.size == 1:
-            self.head = None
-            self.tail = None
-        else:
-            current = self.head
-            while current.next != self.tail:
-                current = current.next
-            current.next = self.head  # Point new tail to head
-            self.tail = current
-        self.size -= 1
-        return removed_node.data
-
-    # Remove at index
-    def remove_at(self, index):
-        if index < 0 or index >= self.size:
-            return None
-        if index == 0:
-            return self.remove_first()
-        if index == self.size - 1:
-            return self.remove_last()
-
-        current = self.head
-        count = 0
-        while count < index - 1:
-            current = current.next
-            count += 1
-
-        removed_node = current.next
-        current.next = removed_node.next
-        self.size -= 1
-        return removed_node.data
-
-    # Get at index
-    def get_at(self, index):
-        if index < 0 or index >= self.size:
-            return None
-        current = self.head
-        count = 0
-        while count < index:
-            current = current.next
-            count += 1
-        return current.data
-
-    # Clear list
-    def clear(self):
-        self.head = None
-        self.tail = None
-        self.size = 0
-
-    # Print list
-    def print_list(self):
-        if not self.head:
-            print("List is empty")
-            return
-        current = self.head
-        result = []
-        while True:
-            result.append(str(current.data))
-            current = current.next
-            if current == self.head:
-                break
-        print(" -> ".join(result) + " -> (head)")
-
-    # Check if list is circular
-    def is_circular(self):
-        if not self.head:
-            return True
-        slow = self.head
-        fast = self.head.next
-        while fast and fast.next:
-            if slow == fast:
-                return True
-            slow = slow.next
-            fast = fast.next.next
-        return False
-
-# Usage Example
-cll = CircularLinkedList()
-cll.insert_first(100)
-cll.insert_first(200)
-cll.insert_last(300)
-cll.insert_at(500, 1)
-cll.print_list()  # 200 -> 500 -> 100 -> 300 -> (head)
-cll.remove_at(2)
-print(cll.get_at(1))  # 500
-print("Is circular:", cll.is_circular())  # True`,
-
-  java: `// Circular Linked List Implementation in Java
-public class CircularLinkedList {
-    private class Node {
-        int data;
-        Node next;
-        
-        Node(int data) {
-            this.data = data;
-            this.next = null;
-        }
-    }
-    
-    private Node head;
-    private Node tail;
-    private int size;
-    
-    public CircularLinkedList() {
-        head = null;
-        tail = null;
-        size = 0;
-    }
-    
-    // Insert at beginning
-    public void insertFirst(int data) {
-        Node newNode = new Node(data);
-        if (head == null) {
-            head = newNode;
-            tail = newNode;
-            newNode.next = head; // Point to itself
-        } else {
-            newNode.next = head;
-            head = newNode;
-            tail.next = head; // Update tail's next to new head
-        }
-        size++;
-    }
-    
-    // Insert at end
-    public void insertLast(int data) {
-        Node newNode = new Node(data);
-        if (head == null) {
-            head = newNode;
-            tail = newNode;
-            newNode.next = head;
-        } else {
-            tail.next = newNode;
-            newNode.next = head;
-            tail = newNode;
-        }
-        size++;
-    }
-    
-    // Insert at index
-    public void insertAt(int data, int index) {
-        if (index < 0 || index > size) return;
-        if (index == 0) {
-            insertFirst(data);
-            return;
-        }
-        if (index == size) {
-            insertLast(data);
-            return;
-        }
-        
-        Node newNode = new Node(data);
-        Node current = head;
-        for (int i = 0; i < index - 1; i++) {
-            current = current.next;
-        }
-        
-        newNode.next = current.next;
-        current.next = newNode;
-        size++;
-    }
-    
-    // Remove from beginning
-    public Integer removeFirst() {
-        if (head == null) return null;
-        int removedData = head.data;
-        if (size == 1) {
-            head = null;
-            tail = null;
-        } else {
-            head = head.next;
-            tail.next = head; // Update tail's next to new head
-        }
-        size--;
-        return removedData;
-    }
-    
-    // Remove from end
-    public Integer removeLast() {
-        if (head == null) return null;
-        int removedData = tail.data;
-        if (size == 1) {
-            head = null;
-            tail = null;
-        } else {
-            Node current = head;
-            while (current.next != tail) {
-                current = current.next;
-            }
-            current.next = head; // Point new tail to head
-            tail = current;
-        }
-        size--;
-        return removedData;
-    }
-    
-    // Remove at index
-    public Integer removeAt(int index) {
-        if (index < 0 || index >= size) return null;
-        if (index == 0) return removeFirst();
-        if (index == size - 1) return removeLast();
-        
-        Node current = head;
-        for (int i = 0; i < index - 1; i++) {
-            current = current.next;
-        }
-        
-        int removedData = current.next.data;
-        current.next = current.next.next;
-        size--;
-        return removedData;
-    }
-    
-    // Get at index
-    public Integer getAt(int index) {
-        if (index < 0 || index >= size) return null;
-        Node current = head;
-        for (int i = 0; i < index; i++) {
-            current = current.next;
-        }
-        return current.data;
-    }
-    
-    // Clear list
-    public void clear() {
-        head = null;
-        tail = null;
-        size = 0;
-    }
-    
-    // Print list
-    public void printList() {
-        if (head == null) {
-            System.out.println("List is empty");
-            return;
-        }
-        Node current = head;
-        do {
-            System.out.print(current.data + " -> ");
-            current = current.next;
-        } while (current != head);
-        System.out.println("(head)");
-    }
-    
-    // Check if list is circular
-    public boolean isCircular() {
-        if (head == null) return true;
-        Node slow = head;
-        Node fast = head.next;
-        while (fast != null && fast.next != null) {
-            if (slow == fast) return true;
-            slow = slow.next;
-            fast = fast.next.next;
-        }
-        return false;
-    }
-    
-    // Usage Example
-    public static void main(String[] args) {
-        CircularLinkedList cll = new CircularLinkedList();
-        cll.insertFirst(100);
-        cll.insertFirst(200);
-        cll.insertLast(300);
-        cll.insertAt(500, 1);
-        cll.printList();  // 200 -> 500 -> 100 -> 300 -> (head)
-        cll.removeAt(2);
-        System.out.println(cll.getAt(1));  // 500
-        System.out.println("Is circular: " + cll.isCircular());  // true
-    }
-}`,
-
-  c: `// Circular Linked List Implementation in C
-#include <stdio.h>
-#include <stdlib.h>
-
-typedef struct Node {
-    int data;
-    struct Node* next;
-} Node;
-
-typedef struct {
-    Node* head;
-    Node* tail;
-    int size;
-} CircularLinkedList;
-
-void initList(CircularLinkedList* list) {
-    list->head = NULL;
-    list->tail = NULL;
-    list->size = 0;
-}
-
-// Insert at beginning
-void insertFirst(CircularLinkedList* list, int data) {
-    Node* newNode = (Node*)malloc(sizeof(Node));
-    newNode->data = data;
-    
-    if (list->head == NULL) {
-        list->head = newNode;
-        list->tail = newNode;
-        newNode->next = list->head; // Point to itself
-    } else {
-        newNode->next = list->head;
-        list->head = newNode;
-        list->tail->next = list->head; // Update tail's next to new head
-    }
-    list->size++;
-}
-
-// Insert at end
-void insertLast(CircularLinkedList* list, int data) {
-    Node* newNode = (Node*)malloc(sizeof(Node));
-    newNode->data = data;
-    
-    if (list->head == NULL) {
-        list->head = newNode;
-        list->tail = newNode;
-        newNode->next = list->head;
-    } else {
-        list->tail->next = newNode;
-        newNode->next = list->head;
-        list->tail = newNode;
-    }
-    list->size++;
-}
-
-// Insert at index
-void insertAt(CircularLinkedList* list, int data, int index) {
-    if (index < 0 || index > list->size) return;
-    if (index == 0) {
-        insertFirst(list, data);
-        return;
-    }
-    if (index == list->size) {
-        insertLast(list, data);
-        return;
-    }
-    
-    Node* newNode = (Node*)malloc(sizeof(Node));
-    newNode->data = data;
-    
-    Node* current = list->head;
-    for (int i = 0; i < index - 1; i++) {
-        current = current->next;
-    }
-    
-    newNode->next = current->next;
-    current->next = newNode;
-    list->size++;
-}
-
-// Remove from beginning
-int removeFirst(CircularLinkedList* list, int* success) {
-    if (list->head == NULL) {
-        *success = 0;
-        return -1;
-    }
-    
-    int data = list->head->data;
-    Node* temp = list->head;
-    
-    if (list->size == 1) {
-        list->head = NULL;
-        list->tail = NULL;
-    } else {
-        list->head = list->head->next;
-        list->tail->next = list->head; // Update tail's next to new head
-    }
-    
-    free(temp);
-    list->size--;
-    *success = 1;
-    return data;
-}
-
-// Remove from end
-int removeLast(CircularLinkedList* list, int* success) {
-    if (list->head == NULL) {
-        *success = 0;
-        return -1;
-    }
-    
-    int data = list->tail->data;
-    Node* temp = list->tail;
-    
-    if (list->size == 1) {
-        list->head = NULL;
-        list->tail = NULL;
-    } else {
-        Node* current = list->head;
-        while (current->next != list->tail) {
-            current = current->next;
-        }
-        current->next = list->head; // Point new tail to head
-        list->tail = current;
-    }
-    
-    free(temp);
-    list->size--;
-    *success = 1;
-    return data;
-}
-
-// Remove at index
-int removeAt(CircularLinkedList* list, int index, int* success) {
-    if (index < 0 || index >= list->size) {
-        *success = 0;
-        return -1;
-    }
-    if (index == 0) return removeFirst(list, success);
-    if (index == list->size - 1) return removeLast(list, success);
-    
-    Node* current = list->head;
-    for (int i = 0; i < index - 1; i++) {
-        current = current->next;
-    }
-    
-    Node* temp = current->next;
-    int data = temp->data;
-    current->next = temp->next;
-    free(temp);
-    list->size--;
-    *success = 1;
-    return data;
-}
-
-// Get at index
-int getAt(CircularLinkedList* list, int index, int* success) {
-    if (index < 0 || index >= list->size) {
-        *success = 0;
-        return -1;
-    }
-    
-    Node* current = list->head;
-    for (int i = 0; i < index; i++) {
-        current = current->next;
-    }
-    
-    *success = 1;
-    return current->data;
-}
-
-// Clear list
-void clear(CircularLinkedList* list) {
-    if (list->head == NULL) return;
-    
-    Node* current = list->head;
-    Node* temp;
-    
-    do {
-        temp = current;
-        current = current->next;
-        free(temp);
-    } while (current != list->head);
-    
-    list->head = NULL;
-    list->tail = NULL;
-    list->size = 0;
-}
-
-// Print list
-void printList(CircularLinkedList* list) {
-    if (list->head == NULL) {
-        printf("List is empty\\n");
-        return;
-    }
-    
-    Node* current = list->head;
-    do {
-        printf("%d -> ", current->data);
-        current = current->next;
-    } while (current != list->head);
-    printf("(head)\\n");
-}
-
-// Check if list is circular
-int isCircular(CircularLinkedList* list) {
-    if (list->head == NULL) return 1;
-    
-    Node* slow = list->head;
-    Node* fast = list->head->next;
-    
-    while (fast != NULL && fast->next != NULL) {
-        if (slow == fast) return 1;
-        slow = slow->next;
-        fast = fast->next->next;
-    }
-    return 0;
-}
-
-// Usage Example
-int main() {
-    CircularLinkedList list;
-    initList(&list);
-    
-    insertFirst(&list, 100);
-    insertFirst(&list, 200);
-    insertLast(&list, 300);
-    insertAt(&list, 500, 1);
-    printList(&list);  // 200 -> 500 -> 100 -> 300 -> (head)
-    
-    int success;
-    removeAt(&list, 2, &success);
-    int value = getAt(&list, 1, &success);
-    if (success) {
-        printf("%d\\n", value);  // 500
-    }
-    
-    printf("Is circular: %d\\n", isCircular(&list));  // 1
-    
-    clear(&list);
-    return 0;
-}`,
-
-  cpp: `// Circular Linked List Implementation in C++
-#include <iostream>
-using namespace std;
-
-class Node {
-public:
-    int data;
-    Node* next;
-    
-    Node(int data) : data(data), next(nullptr) {}
-};
-
-class CircularLinkedList {
-private:
-    Node* head;
-    Node* tail;
-    int size;
-    
-public:
-    CircularLinkedList() : head(nullptr), tail(nullptr), size(0) {}
-    
-    ~CircularLinkedList() {
-        clear();
-    }
-    
-    // Insert at beginning
-    void insertFirst(int data) {
-        Node* newNode = new Node(data);
-        if (head == nullptr) {
-            head = newNode;
-            tail = newNode;
-            newNode->next = head; // Point to itself
-        } else {
-            newNode->next = head;
-            head = newNode;
-            tail->next = head; // Update tail's next to new head
-        }
-        size++;
-    }
-    
-    // Insert at end
-    void insertLast(int data) {
-        Node* newNode = new Node(data);
-        if (head == nullptr) {
-            head = newNode;
-            tail = newNode;
-            newNode->next = head;
-        } else {
-            tail->next = newNode;
-            newNode->next = head;
-            tail = newNode;
-        }
-        size++;
-    }
-    
-    // Insert at index
-    void insertAt(int data, int index) {
-        if (index < 0 || index > size) return;
-        if (index == 0) {
-            insertFirst(data);
-            return;
-        }
-        if (index == size) {
-            insertLast(data);
-            return;
-        }
-        
-        Node* newNode = new Node(data);
-        Node* current = head;
-        for (int i = 0; i < index - 1; i++) {
-            current = current->next;
-        }
-        
-        newNode->next = current->next;
-        current->next = newNode;
-        size++;
-    }
-    
-    // Remove from beginning
-    int removeFirst() {
-        if (head == nullptr) {
-            throw out_of_range("List is empty");
-        }
-        
-        int data = head->data;
-        Node* temp = head;
-        
-        if (size == 1) {
-            head = nullptr;
-            tail = nullptr;
-        } else {
-            head = head->next;
-            tail->next = head; // Update tail's next to new head
-        }
-        
-        delete temp;
-        size--;
-        return data;
-    }
-    
-    // Remove from end
-    int removeLast() {
-        if (head == nullptr) {
-            throw out_of_range("List is empty");
-        }
-        
-        int data = tail->data;
-        Node* temp = tail;
-        
-        if (size == 1) {
-            head = nullptr;
-            tail = nullptr;
-        } else {
-            Node* current = head;
-            while (current->next != tail) {
-                current = current->next;
-            }
-            current->next = head; // Point new tail to head
-            tail = current;
-        }
-        
-        delete temp;
-        size--;
-        return data;
-    }
-    
-    // Remove at index
-    int removeAt(int index) {
-        if (index < 0 || index >= size) {
-            throw out_of_range("Index out of range");
-        }
-        if (index == 0) return removeFirst();
-        if (index == size - 1) return removeLast();
-        
-        Node* current = head;
-        for (int i = 0; i < index - 1; i++) {
-            current = current->next;
-        }
-        
-        Node* temp = current->next;
-        int data = temp->data;
-        current->next = temp->next;
-        delete temp;
-        size--;
-        return data;
-    }
-    
-    // Get at index
-    int getAt(int index) {
-        if (index < 0 || index >= size) {
-            throw out_of_range("Index out of range");
-        }
-        
-        Node* current = head;
-        for (int i = 0; i < index; i++) {
-            current = current->next;
-        }
-        return current->data;
-    }
-    
-    // Clear list
-    void clear() {
-        if (head == nullptr) return;
-        
-        Node* current = head;
-        Node* temp;
-        
-        do {
-            temp = current;
-            current = current->next;
-            delete temp;
-        } while (current != head);
-        
-        head = nullptr;
-        tail = nullptr;
-        size = 0;
-    }
-    
-    // Print list
-    void printList() {
-        if (head == nullptr) {
-            cout << "List is empty" << endl;
-            return;
-        }
-        
-        Node* current = head;
-        do {
-            cout << current->data << " -> ";
-            current = current->next;
-        } while (current != head);
-        cout << "(head)" << endl;
-    }
-    
-    // Check if list is circular
-    bool isCircular() {
-        if (head == nullptr) return true;
-        
-        Node* slow = head;
-        Node* fast = head->next;
-        
-        while (fast != nullptr && fast->next != nullptr) {
-            if (slow == fast) return true;
-            slow = slow->next;
-            fast = fast->next->next;
-        }
-        return false;
-    }
-};
-
-// Usage Example
-int main() {
-    CircularLinkedList cll;
-    cll.insertFirst(100);
-    cll.insertFirst(200);
-    cll.insertLast(300);
-    cll.insertAt(500, 1);
-    cll.printList();  // 200 -> 500 -> 100 -> 300 -> (head)
-    
-    cll.removeAt(2);
-    cout << cll.getAt(1) << endl;  // 500
-    cout << "Is circular: " << boolalpha << cll.isCircular() << endl;  // true
-    
-    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">
-                 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
diff --git a/app/visualizer/linkedList/types/circular/content.jsx b/app/visualizer/linkedList/types/circular/content.jsx
deleted file mode 100755
index a590d64a1..000000000
--- a/app/visualizer/linkedList/types/circular/content.jsx
+++ /dev/null
@@ -1,298 +0,0 @@
-const content = () => {
-  const overview = [
-    `A Circular Linked List is a variation of a linked list where the last node points back to the first node instead of containing a null reference. This creates a circular structure that can be traversed indefinitely.`,
-    `Circular linked lists can be either singly linked (each node has one pointer) or doubly linked (each node has two pointers). The circular nature enables continuous traversal and is particularly useful in round-robin scheduling and buffer implementations.`,
-    `The main advantage of circular linked lists is that any node can be a starting point, and the entire list can be traversed from any node. This makes them ideal for applications that require cyclic processing.`,
-  ];
-
-  const basicOperations = [
-    { name: "Insertion at Head", complexity: "O(1)", description: "Add new node at beginning, point last node to new head" },
-    { name: "Insertion at Tail", complexity: "O(1)", description: "Add new node at end, point it to head (with tail pointer)" },
-    { name: "Deletion at Head", complexity: "O(1)", description: "Remove first node, update last node's pointer" },
-    { name: "Deletion by Value", complexity: "O(n)", description: "Traverse list to find and remove specific node" },
-    { name: "Traversal", complexity: "O(n)", description: "Loop through nodes until returning to starting point" },
-    { name: "Search", complexity: "O(n)", description: "Traverse list to find element" },
-  ];
-
-  const insertionSteps = [
-    { step: "1. Create new node with data" },
-    { step: "2. If list is empty, set head and tail to new node" },
-    { step: "3. Make new node point to itself (circular reference)" },
-    { step: "4. For non-empty list, set new node's next to current head" },
-    { step: "5. Update tail's next pointer to new node" },
-    { step: "6. Move head pointer to new node" },
-  ];
-
-  const deletionSteps = [
-    { step: "1. Check if list is empty" },
-    { step: "2. If single node exists, set head and tail to null" },
-    { step: "3. For head deletion, update head to head.next" },
-    { step: "4. Update tail's next pointer to new head" },
-    { step: "5. For middle deletion, find node and update previous node's pointer" },
-    { step: "6. Handle special case when deleting last node" },
-  ];
-
-  const prosCons = [
-    { point: "Continuous traversal from any node", type: "pro" },
-    { point: "Efficient round-robin scheduling", type: "pro" },
-    { point: "No need for null checks during traversal", type: "pro" },
-    { point: "Useful for circular buffer implementations", type: "pro" },
-    { point: "Risk of infinite loops if not handled carefully", type: "con" },
-    { point: "Slightly more complex implementation", type: "con" },
-    { point: "Harder to detect list boundaries", type: "con" },
-  ];
-
-  const visualization = [
-    { operation: "Initialization", state: "head → null" },
-    { operation: "insertFirst(10)", state: "head → [10] → (points back to head)" },
-    { operation: "insertFirst(20)", state: "head → [20] → [10] → (points back to head)" },
-    { operation: "insertFirst(30)", state: "head → [30] → [20] → [10] → (points back to head)" },
-    { operation: "deleteFirst()", state: "head → [20] → [10] → (points back to head)" },
-    { operation: "delete(10)", state: "head → [20] → (points back to itself)" },
-  ];
-
-  const applications = [
-    "Operating system round-robin scheduling",
-    "Multiplayer turn-based games",
-    "Music/video playlists with repeat functionality",
-    "Resource allocation in networking",
-    "Circular buffer implementations",
-    "Token ring networks",
-  ];
-
-  const comparisonTable = [
-    { feature: "Structure", linear: "Linear with null termination", circular: "Circular with no null" },
-    { feature: "Traversal", linear: "Stops at end", circular: "Continuous loop" },
-    { feature: "Memory Overhead", linear: "Standard", circular: "Same as linear" },
-    { feature: "Boundary Detection", linear: "Easy (null check)", circular: "Requires start reference" },
-    { feature: "Insert/Delete at Head", linear: "O(1)", circular: "O(1)" },
-    { feature: "Implementation Complexity", linear: "Simpler", circular: "More complex" },
-  ];
-
-  return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
-        {/* Overview Section */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Circular Linked List
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            {overview.map((para, index) => (
-              <p key={index} className="text-[#374151] dark:text-[#d1d5db] mb-3 leading-relaxed">
-                {para}
-              </p>
-            ))}
-            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                <strong>Key Property:</strong> The last node's next pointer always points back to the first node, creating a continuous loop.
-              </p>
-            </div>
-          </div>
-        </section>
-
-        {/* Basic Operations */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Basic Operations</h2>
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-              <thead className="bg-gray-50 dark:bg-gray-700">
-                <tr>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Operation</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Complexity</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Description</th>
-                </tr>
-              </thead>
-              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                {basicOperations.map((op, index) => (
-                  <tr key={index}>
-                    <td className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{op.name}</td>
-                    <td className="px-4 py-3 text-sm font-mono text-[#374151] dark:text-[#d1d5db]">{op.complexity}</td>
-                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{op.description}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
-
-        {/* Insertion Process */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Insertion Process</h2>
-          <div className="grid md:grid-cols-2 gap-6">
-            <div>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {insertionSteps.map((step, index) => (
-                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                    {step.step}
-                  </li>
-                ))}
-              </ol>
-            </div>
-            <div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
-              <div className="flex flex-col items-center space-y-4">
-                <div className="relative">
-                  <div className="w-64 h-32 rounded-full border-2 border-blue-400 flex items-center justify-center">
-                    <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">head</div>
-                    <div className="absolute top-1/2 left-1/4 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[A]</div>
-                    <div className="absolute top-1/2 right-1/4 transform translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[B]</div>
-                  </div>
-                  <div className="text-center mt-4 text-gray-600 dark:text-gray-300">Existing circular list</div>
-                </div>
-                <div className="text-center text-gray-600 dark:text-gray-300">↓ Insert X at head ↓</div>
-                <div className="relative">
-                  <div className="w-64 h-32 rounded-full border-2 border-blue-400 flex items-center justify-center">
-                    <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">head</div>
-                    <div className="absolute top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[X]</div>
-                    <div className="absolute top-3/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[A]</div>
-                    <div className="absolute top-3/4 right-1/4 transform translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[B]</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Deletion Process */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Deletion Process</h2>
-          <div className="grid md:grid-cols-2 gap-6">
-            <div>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {deletionSteps.map((step, index) => (
-                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                    {step.step}
-                  </li>
-                ))}
-              </ol>
-            </div>
-            <div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
-              <div className="flex flex-col items-center space-y-4">
-                <div className="relative">
-                  <div className="w-64 h-32 rounded-full border-2 border-blue-400 flex items-center justify-center">
-                    <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">head</div>
-                    <div className="absolute top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[X]</div>
-                    <div className="absolute top-3/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[A]</div>
-                    <div className="absolute top-3/4 right-1/4 transform translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[B]</div>
-                  </div>
-                  <div className="text-center mt-4 text-gray-600 dark:text-gray-300">Current circular list</div>
-                </div>
-                <div className="text-center text-gray-600 dark:text-gray-300">↓ Delete X (head) ↓</div>
-                <div className="relative">
-                  <div className="w-64 h-32 rounded-full border-2 border-blue-400 flex items-center justify-center">
-                    <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">head</div>
-                    <div className="absolute top-1/2 left-1/4 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[A]</div>
-                    <div className="absolute top-1/2 right-1/4 transform translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[B]</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Visualization */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Operation Visualization</h2>
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-              <thead className="bg-gray-50 dark:bg-gray-700">
-                <tr>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Operation</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">List State</th>
-                </tr>
-              </thead>
-              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                {visualization.map((item, index) => (
-                  <tr key={index}>
-                    <td className="px-4 py-3 text-sm font-mono text-gray-900 dark:text-white">{item.operation}</td>
-                    <td className="px-4 py-3 text-sm font-mono text-[#374151] dark:text-[#d1d5db]">{item.state}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
-
-        {/* Comparison with Linear Linked List */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Comparison with Linear Linked List</h2>
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-              <thead className="bg-gray-50 dark:bg-gray-700">
-                <tr>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Linear Linked List</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Circular Linked List</th>
-                </tr>
-              </thead>
-              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                {comparisonTable.map((row, index) => (
-                  <tr key={index}>
-                    <td className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{row.feature}</td>
-                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.linear}</td>
-                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.circular}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
-
-        {/* Pros and Cons */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Pros and Cons</h2>
-          <div className="grid md:grid-cols-2 gap-6">
-            <div>
-              <h3 className="text-lg font-semibold text-green-600 dark:text-green-400 mb-3">Advantages</h3>
-              <ul className="space-y-2">
-                {prosCons.filter(item => item.type === "pro").map((item, index) => (
-                  <li key={index} className="flex items-start">
-                    <svg className="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                    </svg>
-                    <span className="text-[#374151] dark:text-[#d1d5db]">{item.point}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-            <div>
-              <h3 className="text-lg font-semibold text-red-600 dark:text-red-400 mb-3">Limitations</h3>
-              <ul className="space-y-2">
-                {prosCons.filter(item => item.type === "con").map((item, index) => (
-                  <li key={index} className="flex items-start">
-                    <svg className="h-5 w-5 text-red-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                    <span className="text-[#374151] dark:text-[#d1d5db]">{item.point}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-        </section>
-
-        {/* Applications */}
-        <section className="p-6">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Applications</h2>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="grid grid-cols-1 md:grid-cols-2 gap-2 list-disc pl-5 marker:text-blue-500 dark:marker:text-blue-400">
-              {applications.map((app, index) => (
-                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                  {app}
-                </li>
-              ))}
-            </ul>
-            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                <strong>When to Choose:</strong> Prefer circular linked lists when you need continuous cycling through elements or when the application naturally follows a circular pattern (like round-robin scheduling).
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-    </main>
-  );
-};
-
-export default content;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/types/circular/page.jsx b/app/visualizer/linkedList/types/circular/page.jsx
deleted file mode 100755
index 7df678838..000000000
--- a/app/visualizer/linkedList/types/circular/page.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import Animation from "@/app/visualizer/linkedList/types/circular/animation";
-import Navbar from "@/app/components/navbarinner";
-
-export const metadata = {
-  title: 'Circular Linked List Algorithm | Interactive Learning & Step-by-Step Animation',
-  description:
-    'Master Circular Linked Lists with interactive visualizations, quizzes, and implementation code. Learn insertion, deletion, and traversal through animations and practice with hands-on exercises.',
-  keywords: [
-    'Circular Linked List Visualizer',
-    'CLL Animation',
-    'Visualize Circular Linked List',
-    'Learn Circular Linked List',
-    'Circular Linked List DSA',
-    'Circular Linked List for Beginners',
-    'Insertion in Circular Linked List',
-    'Deletion in Circular Linked List',
-    'Circular Linked List Traversal',
-    'DSA Circular Linked List Visualization',
-    'DSA Quiz Circular Linked List',
-    'Circular Linked List Implementation Code',
-    'DSA Learning Platform',
-  ],
-  robots: 'index, follow',
-};
-export default function Page() {
-  return (
-    <>
-      <Navbar/>
-      <Animation/>
-    </>
-  );
-};
\ No newline at end of file
diff --git a/app/visualizer/linkedList/types/circular/quiz.jsx b/app/visualizer/linkedList/types/circular/quiz.jsx
deleted file mode 100755
index 34f7c1507..000000000
--- a/app/visualizer/linkedList/types/circular/quiz.jsx
+++ /dev/null
@@ -1,531 +0,0 @@
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const Quiz = () => {
-const questions = [
-        {
-        question: "What is the defining characteristic of a circular linked list?",
-        options: [
-            "The first node points to null",
-            "The last node points back to the first node",
-            "It uses doubly linked nodes",
-            "It cannot be traversed"
-        ],
-        correctAnswer: 1,
-        explanation: "In a circular linked list, the last node's next pointer points back to the first node, creating a loop."
-    },
-    {
-        question: "What is the time complexity of inserting a node at the head of a circular linked list?",
-        options: [
-            "O(1)",
-            "O(n)",
-            "O(log n)",
-            "O(n²)"
-        ],
-        correctAnswer: 0,
-        explanation: "Insertion at head is O(1) as it only requires updating a couple of pointers regardless of list size."
-    },
-    {
-        question: "In a circular singly linked list with 3 nodes (A→B→C→A), what does node C's next pointer point to?",
-        options: [
-            "null",
-            "Node A",
-            "Node B",
-            "Node C"
-        ],
-        correctAnswer: 1,
-        explanation: "In a circular list, the last node (C) points back to the first node (A)."
-    },
-    {
-        question: "Which of these is NOT a common application of circular linked lists?",
-        options: [
-            "Round-robin scheduling",
-            "Circular buffers",
-            "Random access databases",
-            "Turn-based game systems"
-        ],
-        correctAnswer: 2,
-        explanation: "Circular linked lists don't support efficient random access, making them unsuitable for most database implementations."
-    },
-    {
-        question: "How do you detect the end of a traversal in a circular linked list?",
-        options: [
-            "Check for a null pointer",
-            "Check if you've returned to the starting node",
-            "Count the number of nodes in advance",
-            "You can't detect the end"
-        ],
-        correctAnswer: 1,
-        explanation: "You know you've completed traversal when you return to your starting node, since there are no null pointers."
-    },
-    {
-        question: "What is one advantage of circular linked lists over linear linked lists?",
-        options: [
-            "Lower memory usage",
-            "Ability to traverse the entire list from any node",
-            "Faster random access",
-            "Simpler implementation"
-        ],
-        correctAnswer: 1,
-        explanation: "Any node can serve as a starting point for full traversal, which is useful in many applications."
-    },
-    {
-        question: "What special case must be handled when deleting the last node in a circular linked list?",
-        options: [
-            "Updating the head pointer to null",
-            "No special case needed",
-            "Setting the deleted node's pointers to null",
-            "Rebalancing the list"
-        ],
-        correctAnswer: 0,
-        explanation: "When deleting the last node, you must set the head pointer to null as the list becomes empty."
-    },
-    {
-        question: "In a circular doubly linked list, what additional property exists compared to a circular singly linked list?",
-        options: [
-            "Each node has a previous pointer",
-            "The list cannot be traversed backwards",
-            "It uses less memory",
-            "It must have even number of nodes"
-        ],
-        correctAnswer: 0,
-        explanation: "Circular doubly linked lists have both next and previous pointers, enabling bidirectional traversal."
-    },
-    {
-        question: "What is the main risk when working with circular linked lists?",
-        options: [
-            "Memory leaks",
-            "Infinite loops during traversal",
-            "Fixed size limitation",
-            "Slow insertion operations"
-        ],
-        correctAnswer: 1,
-        explanation: "Without proper termination conditions, traversals can become infinite loops since there's no null terminator."
-    },
-    {
-        question: "Which operation has the same time complexity in both linear and circular linked lists?",
-        options: [
-            "Searching for a value",
-            "Insertion at tail without tail pointer",
-            "Deletion at head",
-            "All of the above"
-        ],
-        correctAnswer: 3,
-        explanation: "All these operations have identical time complexities in both linear and circular implementations."
-    },
-    {
-        question: "In a circular linked list implementation of a music playlist, what feature does this structure naturally support?",
-        options: [
-            "Random song selection",
-            "Continuous looping playback",
-            "Sorting songs by length",
-            "Parallel playback"
-        ],
-        correctAnswer: 1,
-        explanation: "The circular nature perfectly supports continuous, looping playback of the playlist."
-    },
-    {
-        question: "What is the space complexity of a circular linked list?",
-        options: [
-            "O(1)",
-            "O(n)",
-            "O(log n)",
-            "O(n²)"
-        ],
-        correctAnswer: 1,
-        explanation: "Like other linked lists, space complexity is O(n) as it grows linearly with the number of elements."
-    }
-];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showExplanation, setShowExplanation] = useState(false);
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-  const [penaltyApplied, setPenaltyApplied] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    if (selectedAnswer !== null) return;
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (showExplanation && !penaltyApplied) {
-      setScore(prevScore => Math.max(0, prevScore - 0.5));
-      setPenaltyApplied(true);
-    }
-
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    
-    setShowExplanation(false);
-    setPenaltyApplied(false);
-    
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setShowExplanation(false);
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowExplanation(false);
-    setShowIntro(true);
-    setPenaltyApplied(false);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Selection Sort");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Selection Sort");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("comparison with other simple sorts");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("stability characteristics");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Selection Sort concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-2xl mx-auto shadow-lg rounded-xl bg-white dark:bg-gray-800 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Linked List Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-            {selectedAnswer !== null && (
-              <div className="mb-6">
-                <button
-                  onClick={() => setShowExplanation(!showExplanation)}
-                  className="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:underline mb-2"
-                >
-                  <FaInfoCircle className="mr-1" />
-                  {showExplanation ? "Hide Explanation" : "Show Explanation"}
-                </button>
-                <AnimatePresence>
-                  {showExplanation && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: "auto" }}
-                      exit={{ opacity: 0, height: 0 }}
-                      className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm overflow-hidden"
-                    >
-                      {questions[currentQuestion].explanation}
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-            )}
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default Quiz;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/types/doubly/animation.jsx b/app/visualizer/linkedList/types/doubly/animation.jsx
deleted file mode 100755
index b6cb408d8..000000000
--- a/app/visualizer/linkedList/types/doubly/animation.jsx
+++ /dev/null
@@ -1,234 +0,0 @@
-'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('');
-  const [list, setList] = useState([]);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const nodeIdCounter = useRef(1);
-  const animationRef = useRef(null);
-
-  const generateMemoryAddress = () => {
-    return '0x' + Math.floor(Math.random() * 0xFFFF).toString(16).padStart(4, '0');
-  };
-
-  const addNode = () => {
-    if (!inputValue || isAnimating) return;
-    setIsAnimating(true);
-
-    animationRef.current = setTimeout(() => {
-      const newNode = {
-        value: inputValue,
-        id: nodeIdCounter.current++,
-        address: generateMemoryAddress(),
-        next: null,
-        prev: list.length > 0 ? list[list.length - 1].address : null
-      };
-
-      setList(prev => {
-        if (prev.length > 0) {
-          const updatedList = [...prev];
-          updatedList[updatedList.length - 1].next = newNode.address;
-          return [...updatedList, newNode];
-        }
-        return [newNode];
-      });
-
-      setInputValue('');
-      setIsAnimating(false);
-    }, 500);
-  };
-
-  const resetList = () => {
-    clearTimeout(animationRef.current);
-    setList([]);
-    setInputValue('');
-    setIsAnimating(false);
-    nodeIdCounter.current = 1;
-  };
-
-  useEffect(() => {
-    return () => {
-      clearTimeout(animationRef.current);
-    };
-  }, []);
-
-  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-100 h-[2px] rounded-xl mt-2 mb-5"></div>
-        <Content />
-        <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-          Visualize Singly Linked List Operations
-        </p>
-          
-          {/* Input Form */}
-          <div className="bg-white mx-auto dark:bg-gray-800 max-w-4xl p-4 rounded-lg shadow-md mb-4 border border-gray-200 dark:border-gray-700">
-            <div className="mb-3">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                Node Value
-              </label>
-              <div className="relative">
-                <input
-                  type="text"
-                  value={inputValue}
-                  onChange={(e) => setInputValue(e.target.value)}
-                  className="w-full p-2 text-sm rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
-                  placeholder="Enter value"
-                  disabled={isAnimating}
-                  onKeyDown={(e) => e.key === 'Enter' && addNode()}
-                />
-                {inputValue && (
-                  <button
-                    onClick={() => setInputValue('')}
-                    className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
-                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
-                    </svg>
-                  </button>
-                )}
-              </div>
-            </div>
-            <div className="flex gap-3">
-              <button
-                onClick={addNode}
-                className={`flex-1 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white py-2 px-3 rounded-md text-sm font-medium transition-all duration-300 hover:scale-[1.02] disabled:opacity-50 disabled:transform-none flex items-center justify-center gap-1 ${isAnimating ? 'cursor-not-allowed' : ''}`}
-                disabled={isAnimating || !inputValue}
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
-                  <path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
-                </svg>
-                Add Node
-              </button>
-              <ResetButton onReset={resetList} isAnimating={isAnimating} />
-            </div>
-          </div>
-
-          {/* Linked List Visualization */}
-          <div className="bg-white max-w-4xl mx-auto dark:bg-gray-800 p-4 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-            <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 text-center flex items-center justify-center gap-2">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-              Doubly Linked List Representation
-            </h2>
-            
-            {list.length === 0 ? (
-              <div className="text-center py-6 rounded-md bg-gray-50 dark:bg-gray-700/50 border border-dashed border-gray-300 dark:border-gray-600">
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 mx-auto text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
-                </svg>
-                <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">No nodes in the list yet. Add your first node!</p>
-              </div>
-            ) : (
-              <div className="flex flex-col items-center">
-                {list.map((node, index) => (
-                  <React.Fragment key={node.id}>
-                    {/* Previous pointer arrow (only shown if not the first node) */}
-                    {index > 0 && (
-                      <div className="flex items-center justify-center w-full max-w-xs relative my-1">
-                        <div className="flex flex-col items-center">
-                          <div className="h-6 w-0.5 bg-gradient-to-t from-purple-500 to-purple-300 dark:from-purple-400 dark:to-purple-600 relative">
-                            <div className="absolute -top-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-3 border-r-3 border-b-3 border-l-transparent border-r-transparent border-b-purple-500 dark:border-b-purple-400"></div>
-                          </div>
-                          <div className="text-xs text-purple-600 dark:text-purple-400 mt-1">prev</div>
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Node Card */}
-                    <div className="w-full max-w-xs relative group my-1">
-                      <div className={`relative flex flex-col rounded-lg p-3 bg-white dark:bg-gray-700 border ${index === 0 ? 'border-green-500' : 'border-blue-500'} shadow-sm transition-all duration-200 overflow-hidden`}>
-                        <div className="flex justify-between items-center mb-2">
-                          <span className="font-mono text-xs text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">
-                            {node.address}
-                          </span>
-                          <span className={`text-xs px-1.5 py-0.5 rounded ${index === 0 ? 'bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200' : 'bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200'}`}>
-                            {index === 0 ? 'HEAD' : index === list.length - 1 ? 'TAIL' : `Node ${index}`}
-                          </span>
-                        </div>
-                        
-                        <div className="grid grid-cols-3 gap-2 mb-1">
-                          <div className="border-r border-gray-200 dark:border-gray-600 pr-2">
-                            <div className="text-xs text-gray-500 dark:text-gray-400">Prev</div>
-                            <div className="font-mono text-xs">
-                              {node.prev || <span className="text-red-500">NULL</span>}
-                            </div>
-                          </div>
-                          
-                          <div className="border-r border-gray-200 dark:border-gray-600 pr-2">
-                            <div className="text-xs text-gray-500 dark:text-gray-400">Data</div>
-                            <div className="font-medium text-sm truncate">{node.value}</div>
-                          </div>
-                          
-                          <div>
-                            <div className="text-xs text-gray-500 dark:text-gray-400">Next</div>
-                            <div className="font-mono text-xs">
-                              {node.next || <span className="text-red-500">NULL</span>}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Next pointer arrow (only shown if not the last node) */}
-                    {index < list.length - 1 && (
-                      <div className="flex items-center justify-center w-full max-w-xs relative my-1">
-                        <div className="flex flex-col items-center">
-                          <div className="h-6 w-0.5 bg-gradient-to-b from-blue-500 to-blue-300 dark:from-blue-400 dark:to-blue-600 relative">
-                            <div className="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-3 border-r-3 border-t-3 border-l-transparent border-r-transparent border-t-blue-500 dark:border-t-blue-400"></div>
-                          </div>
-                          <div className="text-xs text-blue-600 dark:text-blue-400 mb-1">next</div>
-                        </div>
-                      </div>
-                    )}
-                  </React.Fragment>
-                ))}
-              </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>
-  );
-};
-
-export default DoublyLinkedListVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/types/doubly/codeBlock.jsx b/app/visualizer/linkedList/types/doubly/codeBlock.jsx
deleted file mode 100755
index ca83d1dad..000000000
--- a/app/visualizer/linkedList/types/doubly/codeBlock.jsx
+++ /dev/null
@@ -1,1159 +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: `// Doubly Linked List Implementation in JavaScript
-class Node {
-  constructor(data) {
-    this.data = data;
-    this.next = null;
-    this.prev = null;
-  }
-}
-
-class DoublyLinkedList {
-  constructor() {
-    this.head = null;
-    this.tail = null;
-    this.size = 0;
-  }
-
-  // Insert at beginning
-  insertFirst(data) {
-    const newNode = new Node(data);
-    if (!this.head) {
-      this.head = newNode;
-      this.tail = newNode;
-    } else {
-      newNode.next = this.head;
-      this.head.prev = newNode;
-      this.head = newNode;
-    }
-    this.size++;
-  }
-
-  // Insert at end
-  insertLast(data) {
-    const newNode = new Node(data);
-    if (!this.head) {
-      this.head = newNode;
-      this.tail = newNode;
-    } else {
-      newNode.prev = this.tail;
-      this.tail.next = newNode;
-      this.tail = newNode;
-    }
-    this.size++;
-  }
-
-  // Insert at index
-  insertAt(data, index) {
-    if (index < 0 || index > this.size) return;
-    if (index === 0) return this.insertFirst(data);
-    if (index === this.size) return this.insertLast(data);
-
-    const newNode = new Node(data);
-    let current = this.head;
-    let count = 0;
-
-    while (count < index) {
-      current = current.next;
-      count++;
-    }
-
-    newNode.prev = current.prev;
-    newNode.next = current;
-    current.prev.next = newNode;
-    current.prev = newNode;
-    this.size++;
-  }
-
-  // Remove from beginning
-  removeFirst() {
-    if (!this.head) return null;
-    const removedNode = this.head;
-    if (this.size === 1) {
-      this.head = null;
-      this.tail = null;
-    } else {
-      this.head = this.head.next;
-      this.head.prev = null;
-    }
-    this.size--;
-    return removedNode.data;
-  }
-
-  // Remove from end
-  removeLast() {
-    if (!this.tail) return null;
-    const removedNode = this.tail;
-    if (this.size === 1) {
-      this.head = null;
-      this.tail = null;
-    } else {
-      this.tail = this.tail.prev;
-      this.tail.next = null;
-    }
-    this.size--;
-    return removedNode.data;
-  }
-
-  // Remove at index
-  removeAt(index) {
-    if (index < 0 || index >= this.size) return null;
-    if (index === 0) return this.removeFirst();
-    if (index === this.size - 1) return this.removeLast();
-
-    let current = this.head;
-    let count = 0;
-
-    while (count < index) {
-      current = current.next;
-      count++;
-    }
-
-    current.prev.next = current.next;
-    current.next.prev = current.prev;
-    this.size--;
-    return current.data;
-  }
-
-  // Get at index (forward traversal)
-  getAt(index) {
-    if (index < 0 || index >= this.size) return null;
-    let current = this.head;
-    let count = 0;
-    while (count < index) {
-      current = current.next;
-      count++;
-    }
-    return current.data;
-  }
-
-  // Get at index (backward traversal)
-  getAtFromEnd(index) {
-    if (index < 0 || index >= this.size) return null;
-    let current = this.tail;
-    let count = 0;
-    while (count < index) {
-      current = current.prev;
-      count++;
-    }
-    return current.data;
-  }
-
-  // Clear list
-  clear() {
-    this.head = null;
-    this.tail = null;
-    this.size = 0;
-  }
-
-  // Print list forward
-  printForward() {
-    let current = this.head;
-    while (current) {
-      console.log(current.data);
-      current = current.next;
-    }
-  }
-
-  // Print list backward
-  printBackward() {
-    let current = this.tail;
-    while (current) {
-      console.log(current.data);
-      current = current.prev;
-    }
-  }
-}
-
-// Usage Example
-const dll = new DoublyLinkedList();
-dll.insertFirst(100);
-dll.insertFirst(200);
-dll.insertLast(300);
-dll.insertAt(500, 1);
-dll.printForward(); // 200, 500, 100, 300
-dll.printBackward(); // 300, 100, 500, 200
-dll.removeAt(2);
-console.log(dll.getAt(1)); // 500
-console.log(dll.getAtFromEnd(1)); // 100`,
-
-  python: `# Doubly Linked List Implementation in Python
-class Node:
-    def __init__(self, data):
-        self.data = data
-        self.next = None
-        self.prev = None
-
-class DoublyLinkedList:
-    def __init__(self):
-        self.head = None
-        self.tail = None
-        self.size = 0
-
-    # Insert at beginning
-    def insert_first(self, data):
-        new_node = Node(data)
-        if not self.head:
-            self.head = new_node
-            self.tail = new_node
-        else:
-            new_node.next = self.head
-            self.head.prev = new_node
-            self.head = new_node
-        self.size += 1
-
-    # Insert at end
-    def insert_last(self, data):
-        new_node = Node(data)
-        if not self.head:
-            self.head = new_node
-            self.tail = new_node
-        else:
-            new_node.prev = self.tail
-            self.tail.next = new_node
-            self.tail = new_node
-        self.size += 1
-
-    # Insert at index
-    def insert_at(self, data, index):
-        if index < 0 or index > self.size:
-            return
-        if index == 0:
-            return self.insert_first(data)
-        if index == self.size:
-            return self.insert_last(data)
-
-        new_node = Node(data)
-        current = self.head
-        count = 0
-
-        while count < index:
-            current = current.next
-            count += 1
-
-        new_node.prev = current.prev
-        new_node.next = current
-        current.prev.next = new_node
-        current.prev = new_node
-        self.size += 1
-
-    # Remove from beginning
-    def remove_first(self):
-        if not self.head:
-            return None
-        removed_node = self.head
-        if self.size == 1:
-            self.head = None
-            self.tail = None
-        else:
-            self.head = self.head.next
-            self.head.prev = None
-        self.size -= 1
-        return removed_node.data
-
-    # Remove from end
-    def remove_last(self):
-        if not self.tail:
-            return None
-        removed_node = self.tail
-        if self.size == 1:
-            self.head = None
-            self.tail = None
-        else:
-            self.tail = self.tail.prev
-            self.tail.next = None
-        self.size -= 1
-        return removed_node.data
-
-    # Remove at index
-    def remove_at(self, index):
-        if index < 0 or index >= self.size:
-            return None
-        if index == 0:
-            return self.remove_first()
-        if index == self.size - 1:
-            return self.remove_last()
-
-        current = self.head
-        count = 0
-
-        while count < index:
-            current = current.next
-            count += 1
-
-        current.prev.next = current.next
-        current.next.prev = current.prev
-        self.size -= 1
-        return current.data
-
-    # Get at index (forward traversal)
-    def get_at(self, index):
-        if index < 0 or index >= self.size:
-            return None
-        current = self.head
-        count = 0
-        while count < index:
-            current = current.next
-            count += 1
-        return current.data
-
-    # Get at index (backward traversal)
-    def get_at_from_end(self, index):
-        if index < 0 or index >= self.size:
-            return None
-        current = self.tail
-        count = 0
-        while count < index:
-            current = current.prev
-            count += 1
-        return current.data
-
-    # Clear list
-    def clear(self):
-        self.head = None
-        self.tail = None
-        self.size = 0
-
-    # Print list forward
-    def print_forward(self):
-        current = self.head
-        while current:
-            print(current.data, end=" <-> ")
-            current = current.next
-        print("None")
-
-    # Print list backward
-    def print_backward(self):
-        current = self.tail
-        while current:
-            print(current.data, end=" <-> ")
-            current = current.prev
-        print("None")
-
-# Usage Example
-dll = DoublyLinkedList()
-dll.insert_first(100)
-dll.insert_first(200)
-dll.insert_last(300)
-dll.insert_at(500, 1)
-dll.print_forward()  # 200 <-> 500 <-> 100 <-> 300 <-> None
-dll.print_backward()  # 300 <-> 100 <-> 500 <-> 200 <-> None
-dll.remove_at(2)
-print(dll.get_at(1))  # 500
-print(dll.get_at_from_end(1))  # 100`,
-
-  java: `// Doubly Linked List Implementation in Java
-public class DoublyLinkedList {
-    private class Node {
-        int data;
-        Node next;
-        Node prev;
-        
-        Node(int data) {
-            this.data = data;
-            this.next = null;
-            this.prev = null;
-        }
-    }
-    
-    private Node head;
-    private Node tail;
-    private int size;
-    
-    public DoublyLinkedList() {
-        head = null;
-        tail = null;
-        size = 0;
-    }
-    
-    // Insert at beginning
-    public void insertFirst(int data) {
-        Node newNode = new Node(data);
-        if (head == null) {
-            head = newNode;
-            tail = newNode;
-        } else {
-            newNode.next = head;
-            head.prev = newNode;
-            head = newNode;
-        }
-        size++;
-    }
-    
-    // Insert at end
-    public void insertLast(int data) {
-        Node newNode = new Node(data);
-        if (tail == null) {
-            head = newNode;
-            tail = newNode;
-        } else {
-            newNode.prev = tail;
-            tail.next = newNode;
-            tail = newNode;
-        }
-        size++;
-    }
-    
-    // Insert at index
-    public void insertAt(int data, int index) {
-        if (index < 0 || index > size) return;
-        if (index == 0) {
-            insertFirst(data);
-            return;
-        }
-        if (index == size) {
-            insertLast(data);
-            return;
-        }
-        
-        Node newNode = new Node(data);
-        Node current = head;
-        for (int i = 0; i < index; i++) {
-            current = current.next;
-        }
-        
-        newNode.prev = current.prev;
-        newNode.next = current;
-        current.prev.next = newNode;
-        current.prev = newNode;
-        size++;
-    }
-    
-    // Remove from beginning
-    public Integer removeFirst() {
-        if (head == null) return null;
-        int removedData = head.data;
-        if (size == 1) {
-            head = null;
-            tail = null;
-        } else {
-            head = head.next;
-            head.prev = null;
-        }
-        size--;
-        return removedData;
-    }
-    
-    // Remove from end
-    public Integer removeLast() {
-        if (tail == null) return null;
-        int removedData = tail.data;
-        if (size == 1) {
-            head = null;
-            tail = null;
-        } else {
-            tail = tail.prev;
-            tail.next = null;
-        }
-        size--;
-        return removedData;
-    }
-    
-    // Remove at index
-    public Integer removeAt(int index) {
-        if (index < 0 || index >= size) return null;
-        if (index == 0) return removeFirst();
-        if (index == size - 1) return removeLast();
-        
-        Node current = head;
-        for (int i = 0; i < index; i++) {
-            current = current.next;
-        }
-        
-        current.prev.next = current.next;
-        current.next.prev = current.prev;
-        size--;
-        return current.data;
-    }
-    
-    // Get at index (forward traversal)
-    public Integer getAt(int index) {
-        if (index < 0 || index >= size) return null;
-        Node current = head;
-        for (int i = 0; i < index; i++) {
-            current = current.next;
-        }
-        return current.data;
-    }
-    
-    // Get at index (backward traversal)
-    public Integer getAtFromEnd(int index) {
-        if (index < 0 || index >= size) return null;
-        Node current = tail;
-        for (int i = 0; i < index; i++) {
-            current = current.prev;
-        }
-        return current.data;
-    }
-    
-    // Clear list
-    public void clear() {
-        head = null;
-        tail = null;
-        size = 0;
-    }
-    
-    // Print list forward
-    public void printForward() {
-        Node current = head;
-        while (current != null) {
-            System.out.print(current.data + " <-> ");
-            current = current.next;
-        }
-        System.out.println("null");
-    }
-    
-    // Print list backward
-    public void printBackward() {
-        Node current = tail;
-        while (current != null) {
-            System.out.print(current.data + " <-> ");
-            current = current.prev;
-        }
-        System.out.println("null");
-    }
-    
-    // Usage Example
-    public static void main(String[] args) {
-        DoublyLinkedList dll = new DoublyLinkedList();
-        dll.insertFirst(100);
-        dll.insertFirst(200);
-        dll.insertLast(300);
-        dll.insertAt(500, 1);
-        dll.printForward();  // 200 <-> 500 <-> 100 <-> 300 <-> null
-        dll.printBackward(); // 300 <-> 100 <-> 500 <-> 200 <-> null
-        dll.removeAt(2);
-        System.out.println(dll.getAt(1));  // 500
-        System.out.println(dll.getAtFromEnd(1));  // 100
-    }
-}`,
-
-  c: `// Doubly Linked List Implementation in C
-#include <stdio.h>
-#include <stdlib.h>
-
-typedef struct Node {
-    int data;
-    struct Node* next;
-    struct Node* prev;
-} Node;
-
-typedef struct {
-    Node* head;
-    Node* tail;
-    int size;
-} DoublyLinkedList;
-
-void initList(DoublyLinkedList* list) {
-    list->head = NULL;
-    list->tail = NULL;
-    list->size = 0;
-}
-
-// Insert at beginning
-void insertFirst(DoublyLinkedList* list, int data) {
-    Node* newNode = (Node*)malloc(sizeof(Node));
-    newNode->data = data;
-    newNode->prev = NULL;
-    
-    if (list->head == NULL) {
-        newNode->next = NULL;
-        list->head = newNode;
-        list->tail = newNode;
-    } else {
-        newNode->next = list->head;
-        list->head->prev = newNode;
-        list->head = newNode;
-    }
-    list->size++;
-}
-
-// Insert at end
-void insertLast(DoublyLinkedList* list, int data) {
-    Node* newNode = (Node*)malloc(sizeof(Node));
-    newNode->data = data;
-    newNode->next = NULL;
-    
-    if (list->tail == NULL) {
-        newNode->prev = NULL;
-        list->head = newNode;
-        list->tail = newNode;
-    } else {
-        newNode->prev = list->tail;
-        list->tail->next = newNode;
-        list->tail = newNode;
-    }
-    list->size++;
-}
-
-// Insert at index
-void insertAt(DoublyLinkedList* list, int data, int index) {
-    if (index < 0 || index > list->size) return;
-    if (index == 0) {
-        insertFirst(list, data);
-        return;
-    }
-    if (index == list->size) {
-        insertLast(list, data);
-        return;
-    }
-    
-    Node* newNode = (Node*)malloc(sizeof(Node));
-    newNode->data = data;
-    
-    Node* current = list->head;
-    for (int i = 0; i < index; i++) {
-        current = current->next;
-    }
-    
-    newNode->prev = current->prev;
-    newNode->next = current;
-    current->prev->next = newNode;
-    current->prev = newNode;
-    list->size++;
-}
-
-// Remove from beginning
-int removeFirst(DoublyLinkedList* list, int* success) {
-    if (list->head == NULL) {
-        *success = 0;
-        return -1;
-    }
-    
-    int data = list->head->data;
-    Node* temp = list->head;
-    
-    if (list->size == 1) {
-        list->head = NULL;
-        list->tail = NULL;
-    } else {
-        list->head = list->head->next;
-        list->head->prev = NULL;
-    }
-    
-    free(temp);
-    list->size--;
-    *success = 1;
-    return data;
-}
-
-// Remove from end
-int removeLast(DoublyLinkedList* list, int* success) {
-    if (list->tail == NULL) {
-        *success = 0;
-        return -1;
-    }
-    
-    int data = list->tail->data;
-    Node* temp = list->tail;
-    
-    if (list->size == 1) {
-        list->head = NULL;
-        list->tail = NULL;
-    } else {
-        list->tail = list->tail->prev;
-        list->tail->next = NULL;
-    }
-    
-    free(temp);
-    list->size--;
-    *success = 1;
-    return data;
-}
-
-// Remove at index
-int removeAt(DoublyLinkedList* list, int index, int* success) {
-    if (index < 0 || index >= list->size) {
-        *success = 0;
-        return -1;
-    }
-    if (index == 0) return removeFirst(list, success);
-    if (index == list->size - 1) return removeLast(list, success);
-    
-    Node* current = list->head;
-    for (int i = 0; i < index; i++) {
-        current = current->next;
-    }
-    
-    int data = current->data;
-    current->prev->next = current->next;
-    current->next->prev = current->prev;
-    free(current);
-    list->size--;
-    *success = 1;
-    return data;
-}
-
-// Get at index (forward traversal)
-int getAt(DoublyLinkedList* list, int index, int* success) {
-    if (index < 0 || index >= list->size) {
-        *success = 0;
-        return -1;
-    }
-    
-    Node* current = list->head;
-    for (int i = 0; i < index; i++) {
-        current = current->next;
-    }
-    
-    *success = 1;
-    return current->data;
-}
-
-// Get at index (backward traversal)
-int getAtFromEnd(DoublyLinkedList* list, int index, int* success) {
-    if (index < 0 || index >= list->size) {
-        *success = 0;
-        return -1;
-    }
-    
-    Node* current = list->tail;
-    for (int i = 0; i < index; i++) {
-        current = current->prev;
-    }
-    
-    *success = 1;
-    return current->data;
-}
-
-// Clear list
-void clear(DoublyLinkedList* list) {
-    Node* current = list->head;
-    while (current != NULL) {
-        Node* temp = current;
-        current = current->next;
-        free(temp);
-    }
-    list->head = NULL;
-    list->tail = NULL;
-    list->size = 0;
-}
-
-// Print list forward
-void printForward(DoublyLinkedList* list) {
-    Node* current = list->head;
-    while (current != NULL) {
-        printf("%d <-> ", current->data);
-        current = current->next;
-    }
-    printf("NULL\\n");
-}
-
-// Print list backward
-void printBackward(DoublyLinkedList* list) {
-    Node* current = list->tail;
-    while (current != NULL) {
-        printf("%d <-> ", current->data);
-        current = current->prev;
-    }
-    printf("NULL\\n");
-}
-
-// Usage Example
-int main() {
-    DoublyLinkedList list;
-    initList(&list);
-    
-    insertFirst(&list, 100);
-    insertFirst(&list, 200);
-    insertLast(&list, 300);
-    insertAt(&list, 500, 1);
-    
-    printForward(&list);  // 200 <-> 500 <-> 100 <-> 300 <-> NULL
-    printBackward(&list); // 300 <-> 100 <-> 500 <-> 200 <-> NULL
-    
-    int success;
-    removeAt(&list, 2, &success);
-    int value = getAt(&list, 1, &success);
-    if (success) {
-        printf("%d\\n", value);  // 500
-    }
-    
-    value = getAtFromEnd(&list, 1, &success);
-    if (success) {
-        printf("%d\\n", value);  // 100
-    }
-    
-    clear(&list);
-    return 0;
-}`,
-
-  cpp: `// Doubly Linked List Implementation in C++
-#include <iostream>
-using namespace std;
-
-class Node {
-public:
-    int data;
-    Node* next;
-    Node* prev;
-    
-    Node(int data) : data(data), next(nullptr), prev(nullptr) {}
-};
-
-class DoublyLinkedList {
-private:
-    Node* head;
-    Node* tail;
-    int size;
-    
-public:
-    DoublyLinkedList() : head(nullptr), tail(nullptr), size(0) {}
-    
-    ~DoublyLinkedList() {
-        clear();
-    }
-    
-    // Insert at beginning
-    void insertFirst(int data) {
-        Node* newNode = new Node(data);
-        if (head == nullptr) {
-            head = newNode;
-            tail = newNode;
-        } else {
-            newNode->next = head;
-            head->prev = newNode;
-            head = newNode;
-        }
-        size++;
-    }
-    
-    // Insert at end
-    void insertLast(int data) {
-        Node* newNode = new Node(data);
-        if (tail == nullptr) {
-            head = newNode;
-            tail = newNode;
-        } else {
-            newNode->prev = tail;
-            tail->next = newNode;
-            tail = newNode;
-        }
-        size++;
-    }
-    
-    // Insert at index
-    void insertAt(int data, int index) {
-        if (index < 0 || index > size) return;
-        if (index == 0) {
-            insertFirst(data);
-            return;
-        }
-        if (index == size) {
-            insertLast(data);
-            return;
-        }
-        
-        Node* newNode = new Node(data);
-        Node* current = head;
-        for (int i = 0; i < index; i++) {
-            current = current->next;
-        }
-        
-        newNode->prev = current->prev;
-        newNode->next = current;
-        current->prev->next = newNode;
-        current->prev = newNode;
-        size++;
-    }
-    
-    // Remove from beginning
-    int removeFirst() {
-        if (head == nullptr) {
-            throw out_of_range("List is empty");
-        }
-        
-        int data = head->data;
-        Node* temp = head;
-        
-        if (size == 1) {
-            head = nullptr;
-            tail = nullptr;
-        } else {
-            head = head->next;
-            head->prev = nullptr;
-        }
-        
-        delete temp;
-        size--;
-        return data;
-    }
-    
-    // Remove from end
-    int removeLast() {
-        if (tail == nullptr) {
-            throw out_of_range("List is empty");
-        }
-        
-        int data = tail->data;
-        Node* temp = tail;
-        
-        if (size == 1) {
-            head = nullptr;
-            tail = nullptr;
-        } else {
-            tail = tail->prev;
-            tail->next = nullptr;
-        }
-        
-        delete temp;
-        size--;
-        return data;
-    }
-    
-    // Remove at index
-    int removeAt(int index) {
-        if (index < 0 || index >= size) {
-            throw out_of_range("Index out of range");
-        }
-        if (index == 0) return removeFirst();
-        if (index == size - 1) return removeLast();
-        
-        Node* current = head;
-        for (int i = 0; i < index; i++) {
-            current = current->next;
-        }
-        
-        int data = current->data;
-        current->prev->next = current->next;
-        current->next->prev = current->prev;
-        delete current;
-        size--;
-        return data;
-    }
-    
-    // Get at index (forward traversal)
-    int getAt(int index) {
-        if (index < 0 || index >= size) {
-            throw out_of_range("Index out of range");
-        }
-        
-        Node* current = head;
-        for (int i = 0; i < index; i++) {
-            current = current->next;
-        }
-        return current->data;
-    }
-    
-    // Get at index (backward traversal)
-    int getAtFromEnd(int index) {
-        if (index < 0 || index >= size) {
-            throw out_of_range("Index out of range");
-        }
-        
-        Node* current = tail;
-        for (int i = 0; i < index; i++) {
-            current = current->prev;
-        }
-        return current->data;
-    }
-    
-    // Clear list
-    void clear() {
-        Node* current = head;
-        while (current != nullptr) {
-            Node* temp = current;
-            current = current->next;
-            delete temp;
-        }
-        head = nullptr;
-        tail = nullptr;
-        size = 0;
-    }
-    
-    // Print list forward
-    void printForward() {
-        Node* current = head;
-        while (current != nullptr) {
-            cout << current->data << " <-> ";
-            current = current->next;
-        }
-        cout << "NULL" << endl;
-    }
-    
-    // Print list backward
-    void printBackward() {
-        Node* current = tail;
-        while (current != nullptr) {
-            cout << current->data << " <-> ";
-            current = current->prev;
-        }
-        cout << "NULL" << endl;
-    }
-};
-
-// Usage Example
-int main() {
-    DoublyLinkedList dll;
-    dll.insertFirst(100);
-    dll.insertFirst(200);
-    dll.insertLast(300);
-    dll.insertAt(500, 1);
-    
-    dll.printForward();  // 200 <-> 500 <-> 100 <-> 300 <-> NULL
-    dll.printBackward(); // 300 <-> 100 <-> 500 <-> 200 <-> NULL
-    
-    dll.removeAt(2);
-    cout << dll.getAt(1) << endl;  // 500
-    cout << dll.getAtFromEnd(1) << endl;  // 100
-    
-    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">
-                 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
diff --git a/app/visualizer/linkedList/types/doubly/content.jsx b/app/visualizer/linkedList/types/doubly/content.jsx
deleted file mode 100755
index 1eb4dd3bd..000000000
--- a/app/visualizer/linkedList/types/doubly/content.jsx
+++ /dev/null
@@ -1,337 +0,0 @@
-const content = () => {
-  const overview = [
-    `A Doubly Linked List is an advanced variation of the linked list where each node contains data and two pointers - one to the next node and another to the previous node. This bidirectional linkage enables traversal in both directions.`,
-    `The list maintains head and tail pointers, allowing O(1) operations at both ends. Each node's previous pointer forms the backward chain, while the next pointer forms the forward chain.`,
-    `Doubly linked lists are particularly useful when you need frequent backward traversal or operations at both ends of the list, providing more flexibility than singly linked lists at the cost of slightly higher memory overhead.`,
-  ];
-
-  const basicOperations = [
-    { name: "Insertion at Head", complexity: "O(1)", description: "Add new node at beginning, update head and adjacent node's pointers" },
-    { name: "Insertion at Tail", complexity: "O(1)", description: "Add new node at end using tail pointer" },
-    { name: "Insertion at Position", complexity: "O(n)", description: "Traverse to position and insert with pointer updates" },
-    { name: "Deletion at Head", complexity: "O(1)", description: "Remove first node and update head pointer" },
-    { name: "Deletion at Tail", complexity: "O(1)", description: "Remove last node using tail pointer" },
-    { name: "Deletion by Value", complexity: "O(n)", description: "Traverse to find node and update adjacent pointers" },
-    { name: "Forward Traversal", complexity: "O(n)", description: "Traverse from head to tail using next pointers" },
-    { name: "Backward Traversal", complexity: "O(n)", description: "Traverse from tail to head using prev pointers" },
-  ];
-
-  const implementationCode = [
-    { code: "class DoublyNode {" },
-    { code: "  constructor(data) {" },
-    { code: "    this.data = data;" },
-    { code: "    this.prev = null;" },
-    { code: "    this.next = null;" },
-    { code: "  }" },
-    { code: "}" },
-    { code: "" },
-    { code: "class DoublyLinkedList {" },
-    { code: "  constructor() {" },
-    { code: "    this.head = null;" },
-    { code: "    this.tail = null;" },
-    { code: "    this.size = 0;" },
-    { code: "  }" },
-    { code: "" },
-    { code: "  isEmpty() {" },
-    { code: "    return this.head === null;" },
-    { code: "  }" },
-    { code: "" },
-    { code: "  // Insert at head" },
-    { code: "  insertFirst(data) {" },
-    { code: "    const newNode = new DoublyNode(data);" },
-    { code: "    if (this.isEmpty()) {" },
-    { code: "      this.head = newNode;" },
-    { code: "      this.tail = newNode;" },
-    { code: "    } else {" },
-    { code: "      newNode.next = this.head;" },
-    { code: "      this.head.prev = newNode;" },
-    { code: "      this.head = newNode;" },
-    { code: "    }" },
-    { code: "    this.size++;" },
-    { code: "  }" },
-  ];
-
-  const insertionSteps = [
-    { step: "1. Create new node with data, prev, and next pointers" },
-    { step: "2. For head insertion: Set new node's next to current head" },
-    { step: "3. Update current head's prev to new node" },
-    { step: "4. Move head pointer to new node" },
-    { step: "5. For empty list, set both head and tail to new node" },
-    { step: "6. For tail insertion: Similar steps but working from tail" },
-  ];
-
-  const deletionSteps = [
-    { step: "1. Check if list is empty" },
-    { step: "2. For head deletion: Store head reference, move head to head.next" },
-    { step: "3. Set new head's prev to null (if exists)" },
-    { step: "4. For tail deletion: Similar steps working from tail" },
-    { step: "5. For middle deletion: Find node, update adjacent nodes' pointers" },
-    { step: "6. Handle special cases (single node removal)" },
-  ];
-
-  const prosCons = [
-    { point: "Bidirectional traversal capability", type: "pro" },
-    { point: "O(1) operations at both ends", type: "pro" },
-    { point: "Easier node removal (no need to track previous node)", type: "pro" },
-    { point: "Better for certain algorithms (e.g., LRU cache)", type: "pro" },
-    { point: "Extra memory for prev pointers", type: "con" },
-    { point: "More pointer operations (slightly complex implementation)", type: "con" },
-    { point: "Slightly slower operations due to extra pointer updates", type: "con" },
-  ];
-
-  const visualization = [
-    { operation: "Initialization", state: "head → null ← tail" },
-    { operation: "insertFirst(10)", state: "head → [null|10|•] ← tail" },
-    { operation: "insertFirst(20)", state: "head → [null|20|•] ↔ [•|10|•] ← tail" },
-    { operation: "insertLast(30)", state: "head → [null|20|•] ↔ [•|10|•] ↔ [•|30|null] ← tail" },
-    { operation: "deleteFirst()", state: "head → [null|10|•] ↔ [•|30|null] ← tail" },
-    { operation: "deleteLast()", state: "head → [null|10|null] ← tail" },
-  ];
-
-  const applications = [
-    "Browser forward/backward navigation",
-    "Undo/Redo functionality in software",
-    "LRU (Least Recently Used) cache implementation",
-    "Navigation systems with bidirectional movement",
-    "Music/video playlists with forward/backward controls",
-    "Text editors with cursor movement in both directions",
-  ];
-
-  const comparisonTable = [
-    { feature: "Traversal Direction", singly: "Forward only", doubly: "Both directions" },
-    { feature: "Memory Overhead", singly: "Lower (1 pointer/node)", doubly: "Higher (2 pointers/node)" },
-    { feature: "Insert/Delete at Head", singly: "O(1)", doubly: "O(1)" },
-    { feature: "Insert/Delete at Tail", singly: "O(n) (or O(1) with tail pointer)", doubly: "O(1)" },
-    { feature: "Delete Current Node", singly: "Requires previous node", doubly: "Direct access via prev pointer" },
-    { feature: "Implementation Complexity", singly: "Simpler", doubly: "More complex" },
-  ];
-
-  return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
-        {/* Overview Section */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Doubly Linked List
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            {overview.map((para, index) => (
-              <p key={index} className="text-[#374151] dark:text-[#d1d5db] mb-3 leading-relaxed">
-                {para}
-              </p>
-            ))}
-            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                <strong>Key Property:</strong> Each node is represented as [prev|data|next], showing the bidirectional links between nodes.
-              </p>
-            </div>
-          </div>
-        </section>
-
-        {/* Basic Operations */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Basic Operations</h2>
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-              <thead className="bg-gray-50 dark:bg-gray-700">
-                <tr>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Operation</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Complexity</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Description</th>
-                </tr>
-              </thead>
-              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                {basicOperations.map((op, index) => (
-                  <tr key={index}>
-                    <td className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{op.name}</td>
-                    <td className="px-4 py-3 text-sm font-mono text-[#374151] dark:text-[#d1d5db]">{op.complexity}</td>
-                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{op.description}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
-
-        {/* Implementation */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Implementation</h2>
-          <div className="prose dark:prose-invert max-w-none">
-            <pre className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg overflow-x-auto">
-              <code className="text-sm font-mono text-gray-800 dark:text-gray-200">
-                {implementationCode.map((line, index) => (
-                  <div key={index}>{line.code}</div>
-                ))}
-              </code>
-            </pre>
-          </div>
-        </section>
-
-        {/* Insertion Process */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Insertion Process</h2>
-          <div className="grid md:grid-cols-2 gap-6">
-            <div>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {insertionSteps.map((step, index) => (
-                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                    {step.step}
-                  </li>
-                ))}
-              </ol>
-            </div>
-            <div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
-              <div className="flex flex-col space-y-4">
-                <div className="flex items-center">
-                  <span className="font-mono mr-2">head →</span>
-                  <div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">[•|A|•] ↔ [•|B|•]</div>
-                  <span className="font-mono ml-2">← tail</span>
-                </div>
-                <div className="text-center text-gray-600 dark:text-gray-300">↓ Insert X at head ↓</div>
-                <div className="flex items-center">
-                  <span className="font-mono mr-2">head →</span>
-                  <div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">[null|X|•] ↔ [•|A|•] ↔ [•|B|•]</div>
-                  <span className="font-mono ml-2">← tail</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Deletion Process */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Deletion Process</h2>
-          <div className="grid md:grid-cols-2 gap-6">
-            <div>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {deletionSteps.map((step, index) => (
-                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                    {step.step}
-                  </li>
-                ))}
-              </ol>
-            </div>
-            <div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
-              <div className="flex flex-col space-y-4">
-                <div className="flex items-center">
-                  <span className="font-mono mr-2">head →</span>
-                  <div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">[•|X|•] ↔ [•|A|•] ↔ [•|B|•]</div>
-                  <span className="font-mono ml-2">← tail</span>
-                </div>
-                <div className="text-center text-gray-600 dark:text-gray-300">↓ Delete A ↓</div>
-                <div className="flex items-center">
-                  <span className="font-mono mr-2">head →</span>
-                  <div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">[•|X|•] ↔ [•|B|•]</div>
-                  <span className="font-mono ml-2">← tail</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Visualization */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Operation Visualization</h2>
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-              <thead className="bg-gray-50 dark:bg-gray-700">
-                <tr>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Operation</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">List State</th>
-                </tr>
-              </thead>
-              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                {visualization.map((item, index) => (
-                  <tr key={index}>
-                    <td className="px-4 py-3 text-sm font-mono text-gray-900 dark:text-white">{item.operation}</td>
-                    <td className="px-4 py-3 text-sm font-mono text-[#374151] dark:text-[#d1d5db]">{item.state}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
-
-        {/* Comparison with Singly Linked List */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Comparison with Singly Linked List</h2>
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-              <thead className="bg-gray-50 dark:bg-gray-700">
-                <tr>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Singly Linked List</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Doubly Linked List</th>
-                </tr>
-              </thead>
-              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                {comparisonTable.map((row, index) => (
-                  <tr key={index}>
-                    <td className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{row.feature}</td>
-                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.singly}</td>
-                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.doubly}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
-
-        {/* Pros and Cons */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Pros and Cons</h2>
-          <div className="grid md:grid-cols-2 gap-6">
-            <div>
-              <h3 className="text-lg font-semibold text-green-600 dark:text-green-400 mb-3">Advantages</h3>
-              <ul className="space-y-2">
-                {prosCons.filter(item => item.type === "pro").map((item, index) => (
-                  <li key={index} className="flex items-start">
-                    <svg className="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                    </svg>
-                    <span className="text-[#374151] dark:text-[#d1d5db]">{item.point}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-            <div>
-              <h3 className="text-lg font-semibold text-red-600 dark:text-red-400 mb-3">Limitations</h3>
-              <ul className="space-y-2">
-                {prosCons.filter(item => item.type === "con").map((item, index) => (
-                  <li key={index} className="flex items-start">
-                    <svg className="h-5 w-5 text-red-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                    <span className="text-[#374151] dark:text-[#d1d5db]">{item.point}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-        </section>
-
-        {/* Applications */}
-        <section className="p-6">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Applications</h2>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="grid grid-cols-1 md:grid-cols-2 gap-2 list-disc pl-5 marker:text-blue-500 dark:marker:text-blue-400">
-              {applications.map((app, index) => (
-                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                  {app}
-                </li>
-              ))}
-            </ul>
-            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                <strong>When to Choose:</strong> Prefer doubly linked lists when you need bidirectional traversal, frequent operations at both ends, or when the ability to delete arbitrary nodes without traversal is valuable.
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-    </main>
-  );
-};
-
-export default content;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/types/doubly/page.jsx b/app/visualizer/linkedList/types/doubly/page.jsx
deleted file mode 100755
index 2d3b3b4c6..000000000
--- a/app/visualizer/linkedList/types/doubly/page.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import Animation from "@/app/visualizer/linkedList/types/doubly/animation";
-import Navbar from "@/app/components/navbarinner";
-
-export const metadata = {
-  title: 'Doubly Linked List Implementation | Visualize Doubly Linked List in JS, C, Python, Java',
-  description: 'Explore Doubly Linked List implementation with interactive animations and code examples in JavaScript, C, Python, and Java. Learn insertion, deletion, and traversal from both directions. Perfect for DSA beginners and interview preparation.',
-  keywords: [
-    'Doubly Linked List Implementation',
-    'DLL Visualization',
-    'Doubly Linked List in JavaScript',
-    'Doubly Linked List in C',
-    'Doubly Linked List in Python',
-    'Doubly Linked List in Java',
-    'DSA Doubly Linked List',
-    'Bidirectional Linked List',
-    'Insertion in DLL',
-    'Deletion in DLL',
-    'DLL Operations',
-    'Learn Doubly Linked List',
-    'DSA for Beginners',
-    'Interactive Linked List Visualizer',
-  ],
-  robots: 'index, follow',
-};
-
-export default function Page() {
-  return (
-    <>
-    <Navbar/>
-    <Animation/>
-    </>
-  );
-};
\ No newline at end of file
diff --git a/app/visualizer/linkedList/types/doubly/quiz.jsx b/app/visualizer/linkedList/types/doubly/quiz.jsx
deleted file mode 100755
index cc07eee6e..000000000
--- a/app/visualizer/linkedList/types/doubly/quiz.jsx
+++ /dev/null
@@ -1,531 +0,0 @@
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const Quiz = () => {
-const questions = [
-        {
-        question: "What is the key difference between a node in a singly linked list and a doubly linked list?",
-        options: [
-            "Doubly linked list nodes have no pointers",
-            "Doubly linked list nodes have both next and previous pointers",
-            "Doubly linked list nodes have three pointers",
-            "There is no difference"
-        ],
-        correctAnswer: 1,
-        explanation: "Doubly linked list nodes contain both next and previous pointers, allowing bidirectional traversal."
-    },
-    {
-        question: "What do the 'previous' and 'next' pointers of the head node in a doubly linked list point to?",
-        options: [
-            "previous: null, next: second node",
-            "previous: tail, next: second node",
-            "previous: head, next: tail",
-            "previous: second node, next: null"
-        ],
-        correctAnswer: 0,
-        explanation: "The head's previous is null (no node before it) and next points to the second node."
-    },
-    {
-        question: "What is the time complexity of inserting a node at the tail of a doubly linked list with a tail pointer?",
-        options: [
-            "O(1)",
-            "O(n)",
-            "O(log n)",
-            "O(n²)"
-        ],
-        correctAnswer: 0,
-        explanation: "With a tail pointer, insertion at tail is O(1) as we can directly access the end."
-    },
-    {
-        question: "Which operation is more efficient in a doubly linked list compared to a singly linked list?",
-        options: [
-            "Forward traversal",
-            "Deleting a node given only its reference",
-            "Insertion at head",
-            "Checking if list is empty"
-        ],
-        correctAnswer: 1,
-        explanation: "With previous pointers, we can delete a node in O(1) time if we have its reference."
-    },
-    {
-        question: "What is the main disadvantage of doubly linked lists compared to singly linked lists?",
-        options: [
-            "Slower traversal speed",
-            "Higher memory usage per node",
-            "Cannot implement stacks or queues",
-            "Fixed size limitation"
-        ],
-        correctAnswer: 1,
-        explanation: "Each node requires an extra pointer (previous), increasing memory overhead."
-    },
-    {
-        question: "In a circular doubly linked list, what does the tail's next pointer point to?",
-        options: [
-            "null",
-            "head",
-            "tail itself",
-            "A random node"
-        ],
-        correctAnswer: 1,
-        explanation: "In a circular doubly linked list, tail's next points to head and head's previous points to tail."
-    },
-    {
-        question: "What is the time complexity of finding a node's predecessor in a doubly linked list?",
-        options: [
-            "O(1)",
-            "O(n)",
-            "O(log n)",
-            "O(n²)"
-        ],
-        correctAnswer: 0,
-        explanation: "We can directly access the predecessor via the previous pointer in O(1) time."
-    },
-    {
-        question: "Which of these applications would MOST benefit from a doubly linked list?",
-        options: [
-            "Implementing a stack",
-            "Browser forward/backward navigation",
-            "Storing pixel data for an image",
-            "Priority queue implementation"
-        ],
-        correctAnswer: 1,
-        explanation: "Browser navigation benefits from bidirectional traversal capabilities."
-    },
-    {
-        question: "How do you delete a middle node in a doubly linked list?",
-        options: [
-            "Set its data to null",
-            "Update its neighbors' pointers to bypass it",
-            "Only update the next node's pointer",
-            "You cannot delete middle nodes"
-        ],
-        correctAnswer: 1,
-        explanation: "To delete, set the previous node's next to the next node, and the next node's previous to the previous node."
-    },
-    {
-        question: "What is the space complexity of a doubly linked list with n nodes?",
-        options: [
-            "O(1)",
-            "O(n)",
-            "O(log n)",
-            "O(n²)"
-        ],
-        correctAnswer: 1,
-        explanation: "Space complexity is O(n) as it grows linearly with the number of nodes."
-    },
-    {
-        question: "In a non-empty doubly linked list, what does the head's previous pointer and tail's next pointer point to?",
-        options: [
-            "head.previous: null, tail.next: null",
-            "head.previous: tail, tail.next: head",
-            "Both point to themselves",
-            "head.previous: head, tail.next: tail"
-        ],
-        correctAnswer: 0,
-        explanation: "In a standard (non-circular) doubly linked list, head's previous and tail's next are null."
-    },
-    {
-        question: "What is one advantage of a sentinel node in a doubly linked list implementation?",
-        options: [
-            "Reduces memory usage",
-            "Simplifies edge cases by eliminating null pointers",
-            "Enables random access",
-            "Automatically sorts the list"
-        ],
-        correctAnswer: 1,
-        explanation: "Sentinel nodes act as dummy nodes that eliminate special cases for head/tail operations."
-    }
-];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showExplanation, setShowExplanation] = useState(false);
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-  const [penaltyApplied, setPenaltyApplied] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    if (selectedAnswer !== null) return;
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (showExplanation && !penaltyApplied) {
-      setScore(prevScore => Math.max(0, prevScore - 0.5));
-      setPenaltyApplied(true);
-    }
-
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    
-    setShowExplanation(false);
-    setPenaltyApplied(false);
-    
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setShowExplanation(false);
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowExplanation(false);
-    setShowIntro(true);
-    setPenaltyApplied(false);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Selection Sort");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Selection Sort");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("comparison with other simple sorts");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("stability characteristics");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Selection Sort concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-2xl mx-auto shadow-lg rounded-xl bg-white dark:bg-gray-800 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Linked List Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-            {selectedAnswer !== null && (
-              <div className="mb-6">
-                <button
-                  onClick={() => setShowExplanation(!showExplanation)}
-                  className="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:underline mb-2"
-                >
-                  <FaInfoCircle className="mr-1" />
-                  {showExplanation ? "Hide Explanation" : "Show Explanation"}
-                </button>
-                <AnimatePresence>
-                  {showExplanation && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: "auto" }}
-                      exit={{ opacity: 0, height: 0 }}
-                      className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm overflow-hidden"
-                    >
-                      {questions[currentQuestion].explanation}
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-            )}
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default Quiz;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/types/singly/animation.jsx b/app/visualizer/linkedList/types/singly/animation.jsx
deleted file mode 100755
index 42bd79c21..000000000
--- a/app/visualizer/linkedList/types/singly/animation.jsx
+++ /dev/null
@@ -1,240 +0,0 @@
-'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/singly/content";
-import Quiz from '@/app/visualizer/linkedList/types/singly/quiz';
-import CodeBlock from "@/app/visualizer/linkedList/types/singly/codeBlock";
-import BackToTop from '@/app/components/ui/backtotop';
-import GoBackButton from "@/app/components/ui/goback";
-
-const SinglyLinkedListVisualizer = () => {
-  const [inputValue, setInputValue] = useState('');
-  const [list, setList] = useState([]);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [currentStep, setCurrentStep] = useState(0);
-  const [explanation, setExplanation] = useState('Enter a value and click "Add Node" to start.');
-  const nodeIdCounter = useRef(1);
-  const animationRef = useRef(null);
-  const isMounted = useRef(true);
-
-  // Generate random memory addresses for visualization
-  const generateMemoryAddress = () => {
-    return '0x' + Math.floor(Math.random() * 0xFFFF).toString(16).padStart(4, '0');
-  };
-
-  const addNode = () => {
-    if (!inputValue || isAnimating) return;
-
-    setIsAnimating(true);
-    setCurrentStep(0);
-    setExplanation(explanations[0]);
-
-    let step = 0;
-    const animateStep = () => {
-      if (!isMounted.current) return;
-
-      setCurrentStep(step);
-      setExplanation(explanations[step]);
-      step++;
-
-      if (step < steps.length) {
-        animationRef.current = setTimeout(animateStep, 0);
-      } else {
-        // Animation complete - add the node
-        const newNode = {
-          value: inputValue,
-          id: nodeIdCounter.current++,
-          address: generateMemoryAddress(),
-          next: null
-        };
-
-        setList(prev => {
-          if (prev.length > 0) {
-            // Update previous node's next pointer
-            const updatedList = [...prev];
-            updatedList[updatedList.length - 1].next = newNode.address;
-            return [...updatedList, newNode];
-          }
-          return [newNode];
-        });
-
-        setInputValue('');
-        setExplanation(explanations[explanations.length - 1]);
-        setIsAnimating(false);
-      }
-    };
-
-    animateStep();
-  };
-
-  const resetList = () => {
-    clearTimeout(animationRef.current);
-    setList([]);
-    setInputValue('');
-    setIsAnimating(false);
-    setCurrentStep(0);
-    nodeIdCounter.current = 1;
-    setExplanation('Enter a value and click "Add Node" to start.');
-  };
-
-  useEffect(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-      clearTimeout(animationRef.current);
-    };
-  }, []);
-
-  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">Singly Linked List</span>
-        </h1>
-        <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl mt-2 mb-5"></div>
-        <Content />
-        <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-          Visualize Singly Linked List Operations
-        </p>
-          
-          {/* Input Form */}
-          <div className="bg-white max-w-4xl mx-auto dark:bg-gray-800 p-4 rounded-lg shadow-md mb-6 border border-gray-200 dark:border-gray-700">
-            <div className="mb-3">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                Node Value
-              </label>
-              <div className="relative">
-                <input
-                  type="text"
-                  value={inputValue}
-                  onChange={(e) => setInputValue(e.target.value)}
-                  className="w-full p-2 text-sm rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
-                  placeholder="Enter value"
-                  disabled={isAnimating}
-                  onKeyDown={(e) => e.key === 'Enter' && addNode()}
-                />
-                {inputValue && (
-                  <button
-                    onClick={() => setInputValue('')}
-                    className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
-                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
-                    </svg>
-                  </button>
-                )}
-              </div>
-            </div>
-            <div className="flex gap-3">
-              <button
-                onClick={addNode}
-                className={`flex-1 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white py-2 px-3 rounded-md text-sm font-medium transition-all duration-300 hover:scale-[1.02] disabled:opacity-50 disabled:transform-none flex items-center justify-center gap-1 ${isAnimating ? 'cursor-not-allowed' : ''}`}
-                disabled={isAnimating || !inputValue}
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
-                  <path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
-                </svg>
-                Add Node
-              </button>
-              <ResetButton onReset={resetList} isAnimating={isAnimating} />
-            </div>
-          </div>
-          {/* Linked List Visualization */}
-          <div className="bg-white mx-auto max-w-4xl dark:bg-gray-800 p-4 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-            <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 text-center flex items-center justify-center gap-2">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-              </svg>
-              Linked List Memory Representation
-            </h2>
-            
-            {list.length === 0 ? (
-              <div className="text-center py-6 rounded-md bg-gray-50 dark:bg-gray-700/50 border border-dashed border-gray-300 dark:border-gray-600">
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 mx-auto text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-                <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">No nodes in the list yet. Add your first node!</p>
-              </div>
-            ) : (
-              <div className="flex flex-col items-center gap-4">
-                {list.map((node, index) => (
-                  <React.Fragment key={node.id}>
-                    <div className="w-full max-w-xs relative group">
-                      {/* Node Card */}
-                      <div className={`relative flex flex-col rounded-lg p-3 bg-white dark:bg-gray-700 border ${index === 0 ? 'border-green-500' : 'border-blue-500'} shadow-sm transition-all duration-200 overflow-hidden`}>
-                        {/* Node Header */}
-                        <div className="flex justify-between items-center mb-2">
-                          <span className="font-mono text-xs text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">
-                            {node.address}
-                          </span>
-                          <span className={`text-xs px-1.5 py-0.5 rounded ${index === 0 ? 'bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200' : 'bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200'}`}>
-                            {index === 0 ? 'HEAD' : `Node ${index}`}
-                          </span>
-                        </div>
-                        
-                        {/* Data Section */}
-                        <div className="grid grid-cols-2 gap-2 mb-2">
-                          <div className="border-r border-gray-200 dark:border-gray-600 pr-2">
-                            <div className="text-xs text-gray-500 dark:text-gray-400">Data</div>
-                            <div className="font-medium text-base truncate">{node.value}</div>
-                          </div>
-                          
-                          {/* Next Pointer Section */}
-                          <div>
-                            <div className="text-xs text-gray-500 dark:text-gray-400">Next Pointer</div>
-                            <div className="font-mono text-xs">
-                              {node.next || <span className="text-red-500">0x0000 (NULL)</span>}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      
-                      {/* Arrow to next node */}
-                      {node.next && (
-                        <div className="flex justify-center mt-1 relative">
-                          <div className="h-4 w-0.5 bg-gradient-to-b from-blue-500 to-blue-300 dark:from-blue-400 dark:to-blue-600 relative">
-                            <div className="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-3 border-r-3 border-t-3 border-l-transparent border-r-transparent border-t-blue-500 dark:border-t-blue-400"></div>
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  </React.Fragment>
-                ))}
-              </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: "Doubly Linked List", url: "./doubly" },
-            { 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>
-  );
-};
-
-export default SinglyLinkedListVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/types/singly/codeBlock.jsx b/app/visualizer/linkedList/types/singly/codeBlock.jsx
deleted file mode 100755
index c6213f865..000000000
--- a/app/visualizer/linkedList/types/singly/codeBlock.jsx
+++ /dev/null
@@ -1,803 +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: `// Singly Linked List Implementation in JavaScript
-class Node {
-  constructor(data) {
-    this.data = data;
-    this.next = null;
-  }
-}
-
-class SinglyLinkedList {
-  constructor() {
-    this.head = null;
-    this.size = 0;
-  }
-
-  // Insert at beginning
-  insertFirst(data) {
-    const newNode = new Node(data);
-    newNode.next = this.head;
-    this.head = newNode;
-    this.size++;
-  }
-
-  // Insert at end
-  insertLast(data) {
-    const newNode = new Node(data);
-    if (!this.head) {
-      this.head = newNode;
-    } else {
-      let current = this.head;
-      while (current.next) {
-        current = current.next;
-      }
-      current.next = newNode;
-    }
-    this.size++;
-  }
-
-  // Insert at index
-  insertAt(data, index) {
-    if (index < 0 || index > this.size) return;
-    if (index === 0) return this.insertFirst(data);
-    if (index === this.size) return this.insertLast(data);
-
-    const newNode = new Node(data);
-    let current = this.head;
-    let previous;
-    let count = 0;
-
-    while (count < index) {
-      previous = current;
-      current = current.next;
-      count++;
-    }
-
-    newNode.next = current;
-    previous.next = newNode;
-    this.size++;
-  }
-
-  // Get at index
-  getAt(index) {
-    if (index < 0 || index >= this.size) return null;
-    let current = this.head;
-    let count = 0;
-    while (count < index) {
-      current = current.next;
-      count++;
-    }
-    return current.data;
-  }
-
-  // Remove at index
-  removeAt(index) {
-    if (index < 0 || index >= this.size) return null;
-    let current = this.head;
-    if (index === 0) {
-      this.head = current.next;
-    } else {
-      let previous;
-      let count = 0;
-      while (count < index) {
-        previous = current;
-        current = current.next;
-        count++;
-      }
-      previous.next = current.next;
-    }
-    this.size--;
-    return current.data;
-  }
-
-  // Clear list
-  clear() {
-    this.head = null;
-    this.size = 0;
-  }
-
-  // Print list data
-  print() {
-    let current = this.head;
-    while (current) {
-      console.log(current.data);
-      current = current.next;
-    }
-  }
-}
-
-// Usage Example
-const list = new SinglyLinkedList();
-list.insertFirst(100);
-list.insertFirst(200);
-list.insertLast(300);
-list.insertAt(500, 1);
-list.print(); // 200, 500, 100, 300
-list.removeAt(2);
-console.log(list.getAt(1)); // 500`,
-
-  python: `# Singly Linked List Implementation in Python
-class Node:
-    def __init__(self, data):
-        self.data = data
-        self.next = None
-
-class SinglyLinkedList:
-    def __init__(self):
-        self.head = None
-        self.size = 0
-
-    # Insert at beginning
-    def insert_first(self, data):
-        new_node = Node(data)
-        new_node.next = self.head
-        self.head = new_node
-        self.size += 1
-
-    # Insert at end
-    def insert_last(self, data):
-        new_node = Node(data)
-        if not self.head:
-            self.head = new_node
-        else:
-            current = self.head
-            while current.next:
-                current = current.next
-            current.next = new_node
-        self.size += 1
-
-    # Insert at index
-    def insert_at(self, data, index):
-        if index < 0 or index > self.size:
-            return
-        if index == 0:
-            return self.insert_first(data)
-        if index == self.size:
-            return self.insert_last(data)
-
-        new_node = Node(data)
-        current = self.head
-        count = 0
-
-        while count < index - 1:
-            current = current.next
-            count += 1
-
-        new_node.next = current.next
-        current.next = new_node
-        self.size += 1
-
-    # Get at index
-    def get_at(self, index):
-        if index < 0 or index >= self.size:
-            return None
-        current = self.head
-        count = 0
-        while count < index:
-            current = current.next
-            count += 1
-        return current.data
-
-    # Remove at index
-    def remove_at(self, index):
-        if index < 0 or index >= self.size:
-            return None
-        current = self.head
-        if index == 0:
-            self.head = current.next
-        else:
-            count = 0
-            while count < index - 1:
-                current = current.next
-                count += 1
-            current.next = current.next.next
-        self.size -= 1
-        return current.data
-
-    # Clear list
-    def clear(self):
-        self.head = None
-        self.size = 0
-
-    # Print list data
-    def print_list(self):
-        current = self.head
-        while current:
-            print(current.data, end=" -> ")
-            current = current.next
-        print("None")
-
-# Usage Example
-ll = SinglyLinkedList()
-ll.insert_first(100)
-ll.insert_first(200)
-ll.insert_last(300)
-ll.insert_at(500, 1)
-ll.print_list()  # 200 -> 500 -> 100 -> 300 -> None
-ll.remove_at(2)
-print(ll.get_at(1))  # 500`,
-
-  java: `// Singly Linked List Implementation in Java
-public class SinglyLinkedList {
-    private class Node {
-        int data;
-        Node next;
-        
-        Node(int data) {
-            this.data = data;
-            this.next = null;
-        }
-    }
-    
-    private Node head;
-    private int size;
-    
-    public SinglyLinkedList() {
-        head = null;
-        size = 0;
-    }
-    
-    // Insert at beginning
-    public void insertFirst(int data) {
-        Node newNode = new Node(data);
-        newNode.next = head;
-        head = newNode;
-        size++;
-    }
-    
-    // Insert at end
-    public void insertLast(int data) {
-        Node newNode = new Node(data);
-        if (head == null) {
-            head = newNode;
-        } else {
-            Node current = head;
-            while (current.next != null) {
-                current = current.next;
-            }
-            current.next = newNode;
-        }
-        size++;
-    }
-    
-    // Insert at index
-    public void insertAt(int data, int index) {
-        if (index < 0 || index > size) return;
-        if (index == 0) {
-            insertFirst(data);
-            return;
-        }
-        if (index == size) {
-            insertLast(data);
-            return;
-        }
-        
-        Node newNode = new Node(data);
-        Node current = head;
-        for (int i = 0; i < index - 1; i++) {
-            current = current.next;
-        }
-        newNode.next = current.next;
-        current.next = newNode;
-        size++;
-    }
-    
-    // Get at index
-    public Integer getAt(int index) {
-        if (index < 0 || index >= size) return null;
-        Node current = head;
-        for (int i = 0; i < index; i++) {
-            current = current.next;
-        }
-        return current.data;
-    }
-    
-    // Remove at index
-    public Integer removeAt(int index) {
-        if (index < 0 || index >= size) return null;
-        Node current = head;
-        if (index == 0) {
-            head = current.next;
-        } else {
-            for (int i = 0; i < index - 1; i++) {
-                current = current.next;
-            }
-            current.next = current.next.next;
-        }
-        size--;
-        return current.data;
-    }
-    
-    // Clear list
-    public void clear() {
-        head = null;
-        size = 0;
-    }
-    
-    // Print list data
-    public void printList() {
-        Node current = head;
-        while (current != null) {
-            System.out.print(current.data + " -> ");
-            current = current.next;
-        }
-        System.out.println("null");
-    }
-    
-    // Usage Example
-    public static void main(String[] args) {
-        SinglyLinkedList list = new SinglyLinkedList();
-        list.insertFirst(100);
-        list.insertFirst(200);
-        list.insertLast(300);
-        list.insertAt(500, 1);
-        list.printList(); // 200 -> 500 -> 100 -> 300 -> null
-        list.removeAt(2);
-        System.out.println(list.getAt(1)); // 500
-    }
-}`,
-
-  c: `// Singly Linked List Implementation in C
-#include <stdio.h>
-#include <stdlib.h>
-
-typedef struct Node {
-    int data;
-    struct Node* next;
-} Node;
-
-typedef struct {
-    Node* head;
-    int size;
-} SinglyLinkedList;
-
-void initList(SinglyLinkedList* list) {
-    list->head = NULL;
-    list->size = 0;
-}
-
-// Insert at beginning
-void insertFirst(SinglyLinkedList* list, int data) {
-    Node* newNode = (Node*)malloc(sizeof(Node));
-    newNode->data = data;
-    newNode->next = list->head;
-    list->head = newNode;
-    list->size++;
-}
-
-// Insert at end
-void insertLast(SinglyLinkedList* list, int data) {
-    Node* newNode = (Node*)malloc(sizeof(Node));
-    newNode->data = data;
-    newNode->next = NULL;
-    
-    if (list->head == NULL) {
-        list->head = newNode;
-    } else {
-        Node* current = list->head;
-        while (current->next != NULL) {
-            current = current->next;
-        }
-        current->next = newNode;
-    }
-    list->size++;
-}
-
-// Insert at index
-void insertAt(SinglyLinkedList* list, int data, int index) {
-    if (index < 0 || index > list->size) return;
-    if (index == 0) {
-        insertFirst(list, data);
-        return;
-    }
-    if (index == list->size) {
-        insertLast(list, data);
-        return;
-    }
-    
-    Node* newNode = (Node*)malloc(sizeof(Node));
-    newNode->data = data;
-    
-    Node* current = list->head;
-    for (int i = 0; i < index - 1; i++) {
-        current = current->next;
-    }
-    
-    newNode->next = current->next;
-    current->next = newNode;
-    list->size++;
-}
-
-// Get at index
-int getAt(SinglyLinkedList* list, int index, int* success) {
-    if (index < 0 || index >= list->size) {
-        *success = 0;
-        return -1;
-    }
-    
-    Node* current = list->head;
-    for (int i = 0; i < index; i++) {
-        current = current->next;
-    }
-    
-    *success = 1;
-    return current->data;
-}
-
-// Remove at index
-int removeAt(SinglyLinkedList* list, int index, int* success) {
-    if (index < 0 || index >= list->size) {
-        *success = 0;
-        return -1;
-    }
-    
-    Node* current = list->head;
-    int data;
-    
-    if (index == 0) {
-        list->head = current->next;
-        data = current->data;
-        free(current);
-    } else {
-        for (int i = 0; i < index - 1; i++) {
-            current = current->next;
-        }
-        Node* temp = current->next;
-        current->next = temp->next;
-        data = temp->data;
-        free(temp);
-    }
-    
-    list->size--;
-    *success = 1;
-    return data;
-}
-
-// Clear list
-void clear(SinglyLinkedList* list) {
-    Node* current = list->head;
-    while (current != NULL) {
-        Node* temp = current;
-        current = current->next;
-        free(temp);
-    }
-    list->head = NULL;
-    list->size = 0;
-}
-
-// Print list data
-void printList(SinglyLinkedList* list) {
-    Node* current = list->head;
-    while (current != NULL) {
-        printf("%d -> ", current->data);
-        current = current->next;
-    }
-    printf("NULL\n");
-}
-
-// Usage Example
-int main() {
-    SinglyLinkedList list;
-    initList(&list);
-    
-    insertFirst(&list, 100);
-    insertFirst(&list, 200);
-    insertLast(&list, 300);
-    insertAt(&list, 500, 1);
-    printList(&list); // 200 -> 500 -> 100 -> 300 -> NULL
-    
-    int success;
-    removeAt(&list, 2, &success);
-    int value = getAt(&list, 1, &success);
-    if (success) {
-        printf("%d\n", value); // 500
-    }
-    
-    clear(&list);
-    return 0;
-}`,
-
-  cpp: `// Singly Linked List Implementation in C++
-#include <iostream>
-using namespace std;
-
-class Node {
-public:
-    int data;
-    Node* next;
-    
-    Node(int data) : data(data), next(nullptr) {}
-};
-
-class SinglyLinkedList {
-private:
-    Node* head;
-    int size;
-    
-public:
-    SinglyLinkedList() : head(nullptr), size(0) {}
-    
-    ~SinglyLinkedList() {
-        clear();
-    }
-    
-    // Insert at beginning
-    void insertFirst(int data) {
-        Node* newNode = new Node(data);
-        newNode->next = head;
-        head = newNode;
-        size++;
-    }
-    
-    // Insert at end
-    void insertLast(int data) {
-        Node* newNode = new Node(data);
-        if (head == nullptr) {
-            head = newNode;
-        } else {
-            Node* current = head;
-            while (current->next != nullptr) {
-                current = current->next;
-            }
-            current->next = newNode;
-        }
-        size++;
-    }
-    
-    // Insert at index
-    void insertAt(int data, int index) {
-        if (index < 0 || index > size) return;
-        if (index == 0) {
-            insertFirst(data);
-            return;
-        }
-        if (index == size) {
-            insertLast(data);
-            return;
-        }
-        
-        Node* newNode = new Node(data);
-        Node* current = head;
-        for (int i = 0; i < index - 1; i++) {
-            current = current->next;
-        }
-        newNode->next = current->next;
-        current->next = newNode;
-        size++;
-    }
-    
-    // Get at index
-    int getAt(int index) {
-        if (index < 0 || index >= size) {
-            throw out_of_range("Index out of range");
-        }
-        
-        Node* current = head;
-        for (int i = 0; i < index; i++) {
-            current = current->next;
-        }
-        return current->data;
-    }
-    
-    // Remove at index
-    int removeAt(int index) {
-        if (index < 0 || index >= size) {
-            throw out_of_range("Index out of range");
-        }
-        
-        Node* current = head;
-        int data;
-        
-        if (index == 0) {
-            head = current->next;
-            data = current->data;
-            delete current;
-        } else {
-            for (int i = 0; i < index - 1; i++) {
-                current = current->next;
-            }
-            Node* temp = current->next;
-            current->next = temp->next;
-            data = temp->data;
-            delete temp;
-        }
-        
-        size--;
-        return data;
-    }
-    
-    // Clear list
-    void clear() {
-        Node* current = head;
-        while (current != nullptr) {
-            Node* temp = current;
-            current = current->next;
-            delete temp;
-        }
-        head = nullptr;
-        size = 0;
-    }
-    
-    // Print list data
-    void printList() {
-        Node* current = head;
-        while (current != nullptr) {
-            cout << current->data << " -> ";
-            current = current->next;
-        }
-        cout << "NULL" << endl;
-    }
-};
-
-// Usage Example
-int main() {
-    SinglyLinkedList list;
-    list.insertFirst(100);
-    list.insertFirst(200);
-    list.insertLast(300);
-    list.insertAt(500, 1);
-    list.printList(); // 200 -> 500 -> 100 -> 300 -> NULL
-    
-    list.removeAt(2);
-    cout << list.getAt(1) << endl; // 500
-    
-    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">
-                 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
diff --git a/app/visualizer/linkedList/types/singly/content.jsx b/app/visualizer/linkedList/types/singly/content.jsx
deleted file mode 100755
index dab408f6b..000000000
--- a/app/visualizer/linkedList/types/singly/content.jsx
+++ /dev/null
@@ -1,286 +0,0 @@
-const content = () => {
-  const overview = [
-    `A Singly Linked List is a linear data structure where each element (node) contains data and a pointer to the next node. Unlike arrays, linked lists don't have fixed sizes and allow efficient insertion/deletion at any position.`,
-    `The list maintains a head pointer that points to the first node. The last node's next pointer is null, indicating the end of the list. This structure provides O(1) insertion/deletion at the head but O(n) access time for arbitrary elements.`,
-    `Singly linked lists are fundamental building blocks for more complex data structures like stacks, queues, and adjacency lists for graphs.`,
-  ];
-
-  const basicOperations = [
-    { name: "Insertion at Head", complexity: "O(1)", description: "Add new node at beginning by updating head pointer" },
-    { name: "Insertion at Tail", complexity: "O(n)", description: "Traverse to end and add new node (O(1) with tail pointer)" },
-    { name: "Deletion at Head", complexity: "O(1)", description: "Remove first node by updating head pointer" },
-    { name: "Deletion by Value", complexity: "O(n)", description: "Traverse list to find and remove specific node" },
-    { name: "Search", complexity: "O(n)", description: "Traverse list to find element" },
-    { name: "Access by Index", complexity: "O(n)", description: "Traverse list until reaching desired position" },
-  ];
-
-  const implementationCode = [
-    { code: "class Node {" },
-    { code: "  constructor(data) {" },
-    { code: "    this.data = data;" },
-    { code: "    this.next = null;" },
-    { code: "  }" },
-    { code: "}" },
-    { code: "" },
-    { code: "class SinglyLinkedList {" },
-    { code: "  constructor() {" },
-    { code: "    this.head = null;" },
-    { code: "    this.size = 0;" },
-    { code: "  }" },
-    { code: "" },
-    { code: "  // Check if list is empty" },
-    { code: "  isEmpty() {" },
-    { code: "    return this.head === null;" },
-    { code: "  }" },
-    { code: "" },
-    { code: "  // Insert at head" },
-    { code: "  insertFirst(data) {" },
-    { code: "    const newNode = new Node(data);" },
-    { code: "    newNode.next = this.head;" },
-    { code: "    this.head = newNode;" },
-    { code: "    this.size++;" },
-    { code: "  }" },
-  ];
-
-  const insertionAtHeadSteps = [
-    { step: "1. Create new node with given data" },
-    { step: "2. Set new node's next to current head" },
-    { step: "3. Update head pointer to new node" },
-    { step: "4. Increment list size counter" },
-  ];
-
-  const deletionSteps = [
-    { step: "1. Check if list is empty (head === null)" },
-    { step: "2. If deleting head, update head to head.next" },
-    { step: "3. For middle deletion, find previous node and update its next pointer" },
-    { step: "4. Decrement list size counter" },
-    { step: "5. Return deleted data (if needed)" },
-  ];
-
-  const prosCons = [
-    { point: "Dynamic size - grows as needed", type: "pro" },
-    { point: "Efficient insertion/deletion at head", type: "pro" },
-    { point: "No memory waste (only allocates needed nodes)", type: "pro" },
-    { point: "No random access - must traverse from head", type: "con" },
-    { point: "Extra memory for next pointers", type: "con" },
-    { point: "Not cache-friendly (nodes scattered in memory)", type: "con" },
-  ];
-
-  const visualization = [
-    { operation: "Initialization", state: "head → null" },
-    { operation: "insertFirst(10)", state: "head → [10|•] → null" },
-    { operation: "insertFirst(20)", state: "head → [20|•] → [10|•] → null" },
-    { operation: "insertLast(30)", state: "head → [20|•] → [10|•] → [30|•] → null" },
-    { operation: "deleteFirst()", state: "head → [10|•] → [30|•] → null" },
-    { operation: "delete(30)", state: "head → [10|•] → null" },
-  ];
-
-  const applications = [
-    "Implementing stacks and queues",
-    "Memory management systems",
-    "Undo functionality in software",
-    "Hash table collision handling",
-    "Polynomial representation and arithmetic",
-    "Browser history navigation",
-  ];
-
-  return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
-        {/* Overview Section */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Singly Linked List
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            {overview.map((para, index) => (
-              <p key={index} className="text-[#374151] dark:text-[#d1d5db] mb-3 leading-relaxed">
-                {para}
-              </p>
-            ))}
-            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                <strong>Key Property:</strong> Each node contains data and a single pointer to the next node, forming a unidirectional chain.
-              </p>
-            </div>
-          </div>
-        </section>
-
-        {/* Basic Operations */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Basic Operations</h2>
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-              <thead className="bg-gray-50 dark:bg-gray-700">
-                <tr>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Operation</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Time Complexity</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Description</th>
-                </tr>
-              </thead>
-              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                {basicOperations.map((op, index) => (
-                  <tr key={index}>
-                    <td className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{op.name}</td>
-                    <td className="px-4 py-3 text-sm font-mono text-[#374151] dark:text-[#d1d5db]">{op.complexity}</td>
-                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{op.description}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
-
-        {/* Implementation */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Implementation</h2>
-          <div className="prose dark:prose-invert max-w-none">
-            <pre className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg overflow-x-auto">
-              <code className="text-sm font-mono text-gray-800 dark:text-gray-200">
-                {implementationCode.map((line, index) => (
-                  <div key={index}>{line.code}</div>
-                ))}
-              </code>
-            </pre>
-          </div>
-        </section>
-
-        {/* Insertion at Head */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Insertion at Head</h2>
-          <div className="grid md:grid-cols-2 gap-6">
-            <div>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {insertionAtHeadSteps.map((step, index) => (
-                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                    {step.step}
-                  </li>
-                ))}
-              </ol>
-            </div>
-            <div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
-              <div className="flex flex-col space-y-4">
-                <div className="flex items-center">
-                  <span className="font-mono mr-2">head →</span>
-                  <div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">[A|•] → [B|•] → null</div>
-                </div>
-                <div className="text-center text-gray-600 dark:text-gray-300">↓ Insert X at head ↓</div>
-                <div className="flex items-center">
-                  <span className="font-mono mr-2">head →</span>
-                  <div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">[X|•] → [A|•] → [B|•] → null</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Deletion */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Deletion Operations</h2>
-          <div className="grid md:grid-cols-2 gap-6">
-            <div>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {deletionSteps.map((step, index) => (
-                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                    {step.step}
-                  </li>
-                ))}
-              </ol>
-            </div>
-            <div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
-              <div className="flex flex-col space-y-4">
-                <div className="flex items-center">
-                  <span className="font-mono mr-2">head →</span>
-                  <div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">[X|•] → [A|•] → [B|•] → null</div>
-                </div>
-                <div className="text-center text-gray-600 dark:text-gray-300">↓ Delete A ↓</div>
-                <div className="flex items-center">
-                  <span className="font-mono mr-2">head →</span>
-                  <div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">[X|•] → [B|•] → null</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Visualization */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Operation Visualization</h2>
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-              <thead className="bg-gray-50 dark:bg-gray-700">
-                <tr>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Operation</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">List State</th>
-                </tr>
-              </thead>
-              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                {visualization.map((item, index) => (
-                  <tr key={index}>
-                    <td className="px-4 py-3 text-sm font-mono text-gray-900 dark:text-white">{item.operation}</td>
-                    <td className="px-4 py-3 text-sm font-mono text-[#374151] dark:text-[#d1d5db]">{item.state}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
-
-        {/* Pros and Cons */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Pros and Cons</h2>
-          <div className="grid md:grid-cols-2 gap-6">
-            <div>
-              <h3 className="text-lg font-semibold text-green-600 dark:text-green-400 mb-3">Advantages</h3>
-              <ul className="space-y-2">
-                {prosCons.filter(item => item.type === "pro").map((item, index) => (
-                  <li key={index} className="flex items-start">
-                    <svg className="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                    </svg>
-                    <span className="text-[#374151] dark:text-[#d1d5db]">{item.point}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-            <div>
-              <h3 className="text-lg font-semibold text-red-600 dark:text-red-400 mb-3">Limitations</h3>
-              <ul className="space-y-2">
-                {prosCons.filter(item => item.type === "con").map((item, index) => (
-                  <li key={index} className="flex items-start">
-                    <svg className="h-5 w-5 text-red-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                    <span className="text-[#374151] dark:text-[#d1d5db]">{item.point}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-        </section>
-
-        {/* Applications */}
-        <section className="p-6">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Applications</h2>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="grid grid-cols-1 md:grid-cols-2 gap-2 list-disc pl-5 marker:text-blue-500 dark:marker:text-blue-400">
-              {applications.map((app, index) => (
-                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                  {app}
-                </li>
-              ))}
-            </ul>
-            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                <strong>Note:</strong> Singly linked lists are preferred when you need constant-time insertions/deletions at the beginning and don't require backward traversal.
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-    </main>
-  );
-};
-
-export default content;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/types/singly/page.jsx b/app/visualizer/linkedList/types/singly/page.jsx
deleted file mode 100755
index 6cc82f64a..000000000
--- a/app/visualizer/linkedList/types/singly/page.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Animation from "@/app/visualizer/linkedList/types/singly/animation";
-import Navbar from "@/app/components/navbarinner";
-
-export const metadata = {
-  title: 'Singly Linked List Implementation | Visualize Linked List in JS, C, Python, Java',
-  description: 'Explore Singly Linked List implementation with interactive visualizations and real-time code examples in JavaScript, C, Python, and Java. Learn insertion, deletion, and traversal with step-by-step animations. Perfect for DSA beginners and interview preparation.',
-  keywords: [
-    'Singly Linked List Implementation',
-    'Singly Linked List Visualization',
-    'Linked List in JavaScript',
-    'Linked List in C',
-    'Linked List in Python',
-    'Linked List in Java',
-    'DSA Linked List',
-    'Linked List Operations',
-    'Insertion in Linked List',
-    'Deletion in Linked List',
-    'Traverse Linked List',
-    'Learn Linked List',
-    'Visualize Linked List',
-    'DSA for Beginners',
-    'Interactive Linked List Tool',
-  ],
-  robots: 'index, follow',
-};
-
-export default function Page() {
-  return (
-    <>
-      <Navbar/>
-      <Animation/>
-    </>
-  );
-};
\ No newline at end of file
diff --git a/app/visualizer/linkedList/types/singly/quiz.jsx b/app/visualizer/linkedList/types/singly/quiz.jsx
deleted file mode 100755
index 3fb88d172..000000000
--- a/app/visualizer/linkedList/types/singly/quiz.jsx
+++ /dev/null
@@ -1,531 +0,0 @@
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const Quiz = () => {
-const questions = [
-    {
-        question: "What is the fundamental building block of a singly linked list?",
-        options: [
-            "Array",
-            "Node containing data and a next pointer",
-            "Hash table",
-            "Binary tree"
-        ],
-        correctAnswer: 1,
-        explanation: "A singly linked list is composed of nodes where each node contains data and a pointer to the next node."
-    },
-    {
-        question: "What does the 'next' pointer of the last node in a singly linked list point to?",
-        options: [
-            "The head node",
-            "A random node",
-            "null",
-            "Itself"
-        ],
-        correctAnswer: 2,
-        explanation: "The last node's next pointer is null, indicating the end of the list."
-    },
-    {
-        question: "What is the time complexity of inserting a new node at the head of a singly linked list?",
-        options: [
-            "O(1)",
-            "O(n)",
-            "O(log n)",
-            "O(n²)"
-        ],
-        correctAnswer: 0,
-        explanation: "Insertion at head is O(1) as it only requires updating the head pointer."
-    },
-    {
-        question: "Which operation in a singly linked list has O(n) time complexity?",
-        options: [
-            "Insertion at head",
-            "Deletion at head",
-            "Searching for an element",
-            "Checking if list is empty"
-        ],
-        correctAnswer: 2,
-        explanation: "Searching requires traversing the list from head to tail, which is O(n) in the worst case."
-    },
-    {
-        question: "What is the advantage of a singly linked list over an array?",
-        options: [
-            "Constant-time random access",
-            "Better cache locality",
-            "Dynamic size and efficient insertions/deletions",
-            "Built-in sorting capability"
-        ],
-        correctAnswer: 2,
-        explanation: "Linked lists can grow dynamically and allow efficient insertions/deletions without shifting elements."
-    },
-    {
-        question: "How do you check if a singly linked list is empty?",
-        options: [
-            "Check if size == 0",
-            "Check if head == null",
-            "Check if tail == null",
-            "All of the above"
-        ],
-        correctAnswer: 1,
-        explanation: "An empty list has its head pointer set to null."
-    },
-    {
-        question: "What is the time complexity of deleting a specific value from a singly linked list?",
-        options: [
-            "O(1)",
-            "O(n)",
-            "O(log n)",
-            "O(n²)"
-        ],
-        correctAnswer: 1,
-        explanation: "Deleting by value requires traversing the list to find the node, which is O(n)."
-    },
-    {
-        question: "Which of these applications would LEAST likely use a singly linked list?",
-        options: [
-            "Implementing a stack",
-            "Memory management system",
-            "Image processing filter",
-            "Browser history navigation"
-        ],
-        correctAnswer: 2,
-        explanation: "Image processing typically requires random access to pixels, which arrays handle better."
-    },
-    {
-        question: "What is the main disadvantage of singly linked lists compared to arrays?",
-        options: [
-            "Fixed size",
-            "No random access to elements",
-            "Inefficient insertion at head",
-            "Cannot store different data types"
-        ],
-        correctAnswer: 1,
-        explanation: "Accessing an arbitrary element requires traversal from the head, making it O(n) rather than O(1)."
-    },
-    {
-        question: "What happens during insertion at the head of a singly linked list?",
-        options: [
-            "New node's next points to current head, then head updates to new node",
-            "Traverse to end and add new node",
-            "Find middle position and insert",
-            "Replace all existing nodes"
-        ],
-        correctAnswer: 0,
-        explanation: "Insertion at head involves creating a new node that points to the current head, then making it the new head."
-    },
-    {
-        question: "How much extra memory per node does a singly linked list need compared to an array?",
-        options: [
-            "No extra memory",
-            "4 bytes for size counter",
-            "Pointer size (typically 4-8 bytes)",
-            "Double the data storage"
-        ],
-        correctAnswer: 2,
-        explanation: "Each node requires additional memory for the next pointer, typically 4-8 bytes depending on system."
-    },
-    {
-        question: "What is the purpose of maintaining a 'size' variable in a linked list implementation?",
-        options: [
-            "To limit the maximum number of nodes",
-            "To provide O(1) access to the list length",
-            "To improve cache performance",
-            "To enable random access"
-        ],
-        correctAnswer: 1,
-        explanation: "A size counter allows checking the list length in constant time without traversal."
-    }
-];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showExplanation, setShowExplanation] = useState(false);
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-  const [penaltyApplied, setPenaltyApplied] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    if (selectedAnswer !== null) return;
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (showExplanation && !penaltyApplied) {
-      setScore(prevScore => Math.max(0, prevScore - 0.5));
-      setPenaltyApplied(true);
-    }
-
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    
-    setShowExplanation(false);
-    setPenaltyApplied(false);
-    
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setShowExplanation(false);
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowExplanation(false);
-    setShowIntro(true);
-    setPenaltyApplied(false);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Selection Sort");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Selection Sort");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("comparison with other simple sorts");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("stability characteristics");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Selection Sort concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-2xl mx-auto shadow-lg rounded-xl bg-white dark:bg-gray-800 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Linked List Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-            {selectedAnswer !== null && (
-              <div className="mb-6">
-                <button
-                  onClick={() => setShowExplanation(!showExplanation)}
-                  className="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:underline mb-2"
-                >
-                  <FaInfoCircle className="mr-1" />
-                  {showExplanation ? "Hide Explanation" : "Show Explanation"}
-                </button>
-                <AnimatePresence>
-                  {showExplanation && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: "auto" }}
-                      exit={{ opacity: 0, height: 0 }}
-                      className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm overflow-hidden"
-                    >
-                      {questions[currentQuestion].explanation}
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-            )}
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default Quiz;
\ No newline at end of file
diff --git a/app/visualizer/page.jsx b/app/visualizer/page.jsx
deleted file mode 100755
index f8320d149..000000000
--- a/app/visualizer/page.jsx
+++ /dev/null
@@ -1,549 +0,0 @@
-import React from "react";
-import Navbar from "@/app/components/navbar";
-import Footer from "@/app/components/footer";
-import VisualizerClient from "./VisualizerClient";
-import ArrayModal from "@/app/components/models/ArrayModal";
-import StackModal from "@/app/components/models/StackModel";
-import QueueModal from "@/app/components/models/QueueModal";
-import LinkedListModal from "@/app/components/models/LinkedListModal";
-import TreeModal from "@/app/components/models/TreeModal";
-import GraphModal from "@/app/components/models/GraphModal";
-import TutorialOverlay from "@/app/components/ui/TutorialOverlay";
-
-export const metadata = {
-  title: "Algorithm Visualizer | AlgoBuddy",
-  description:
-    "Explore visual representations and source code for various DSA algorithms including searching, sorting, stacks, queues, trees, graphs, and stack-based expression evaluation like Polish Notation using arrays and linked lists. Interactive and beginner-friendly!",
-  keywords: [
-    "DSA Visualizer",
-    "Algorithm Visualizer",
-    "Data Structures",
-    "Searching Algorithms",
-    "Sorting Algorithms",
-    "Stack",
-    "Queue",
-    "Tree",
-    "Graph",
-    "Graph Algorithms",
-    "BFS",
-    "DFS",
-    "Linear Search",
-    "Bubble Sort",
-    "Tree Traversal",
-    "Heap Sort",
-    "Linked List",
-    "Singly Linked List",
-    "Doubly Linked List",
-    "Circular Linked List",
-    "Prefix Notation",
-    "Postfix Notation",
-    "Polish Notation",
-    "Stack using Array",
-    "Stack using Linked List",
-    "Prefix using Stack",
-    "Postfix using Stack",
-    "Polish Notation Implementation",
-    "Queue using Array",
-    "Queue using Linked List",
-    "Circular Queue",
-    "Priority Queue",
-    "Deque",
-    "Queue Operations",
-    "Graph Traversal",
-    "Code for DSA Algorithms",
-    "Code for Data Structures",
-    "Interactive Code Samples",
-    "DSA with Code",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/visualizer.png",
-        width: 1200,
-        height: 630,
-        alt: "Algorithm Visualization",
-      },
-    ],
-  },
-};
-
-const sections = [
-  {
-    title: "Array",
-    desc: "Searching & sorting algorithms on contiguous memory",
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M9 5l7 7-7 7"
-        />
-      </svg>
-    ),
-    info: {
-      About:
-        "An array is a data structure that stores multiple values of the same type in a single variable. Each value is stored at a specific index, starting from 0.",
-      Representation: <ArrayModal />,
-    },
-    subsections: [
-      {
-        title: "Searching",
-        items: [
-          { name: "Linear Search", path: "/visualizer/searching/linearsearch" },
-          { name: "Binary Search", path: "/visualizer/searching/binarysearch" },
-        ],
-      },
-      {
-        title: "Sorting",
-        items: [
-          { name: "Bubble Sort", path: "/visualizer/sorting/bubblesort" },
-          { name: "Selection Sort", path: "/visualizer/sorting/selectionsort" },
-          { name: "Insertion Sort", path: "/visualizer/sorting/insertionsort" },
-          { name: "Merge Sort", path: "/visualizer/sorting/mergesort" },
-          { name: "Quick Sort", path: "/visualizer/sorting/quicksort" },
-        ],
-      },
-    ],
-  },
-  {
-    title: "Stack",
-    desc: "LIFO operations, polish notations & implementations",
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
-        />
-      </svg>
-    ),
-    info: {
-      About:
-        "LIFO data structure; push adds to top; pop removes from top; peek views top; works like a stack of plates. Used in function calls, undo, expression evaluation.",
-      Representation: <StackModal />,
-    },
-    subsections: [
-      {
-        title: "Operations",
-        items: [
-          { name: "Push & Pop", path: "/visualizer/stack/push-pop" },
-          { name: "Peek", path: "/visualizer/stack/peek" },
-          { name: "Is Empty", path: "/visualizer/stack/isempty" },
-          { name: "Is Full", path: "/visualizer/stack/isfull" },
-        ],
-      },
-      {
-        title: "Polish Notations Evaluation",
-        items: [
-          { name: "Postfix", path: "/visualizer/stack/polish/postfix" },
-          { name: "Prefix", path: "/visualizer/stack/polish/prefix" },
-        ],
-      },
-      {
-        title: "Implementation",
-        items: [
-          {
-            name: "Using Array",
-            path: "/visualizer/stack/implementation/usingArray",
-          },
-          {
-            name: "Using Linked List",
-            path: "/visualizer/stack/implementation/usingLinkedList",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    title: "Queue",
-    desc: "FIFO operations, variants & implementations",
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M4 6h16M4 12h16m-7 6h7"
-        />
-      </svg>
-    ),
-    info: {
-      About:
-        "FIFO data structure; enqueue adds to rear; dequeue removes from front; peek views front; works like a line in a queue. Used in scheduling, buffering, BFS.",
-      Representation: <QueueModal />,
-    },
-    subsections: [
-      {
-        title: "Operations",
-        items: [
-          {
-            name: "Enqueue & Dequeue",
-            path: "/visualizer/queue/operations/enqueue-dequeue",
-          },
-          {
-            name: "Peek Front",
-            path: "/visualizer/queue/operations/peek-front",
-          },
-          { name: "Is Empty", path: "/visualizer/queue/operations/isempty" },
-          { name: "Is Full", path: "/visualizer/queue/operations/isfull" },
-        ],
-      },
-      {
-        title: "Types",
-        items: [
-          {
-            name: "Single Ended Queue",
-            path: "/visualizer/queue/types/singleEnded",
-          },
-          {
-            name: "Double Ended Queue",
-            path: "/visualizer/queue/types/deque",
-          },
-          { name: "Circular Queue", path: "/visualizer/queue/types/circular" },
-          { name: "Priority Queue", path: "/visualizer/queue/types/priority" },
-        ],
-      },
-      {
-        title: "Implementation",
-        items: [
-          {
-            name: "Using Array",
-            path: "/visualizer/queue/implementation/array",
-          },
-          {
-            name: "Using Linked List",
-            path: "/visualizer/queue/implementation/linkedList",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    title: "Linked List",
-    desc: "Singly, doubly, circular — traversal to merge",
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M13 5l7 7-7 7"
-        />
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M5 5l7 7-7 7"
-        />
-      </svg>
-    ),
-    info: {
-      About:
-        "Linear data structure; elements (nodes) connected using pointers; each node has data + next; no fixed size; types: singly, doubly, circular. Used in dynamic memory, insert/delete operations.",
-      Representation: <LinkedListModal />,
-    },
-    subsections: [
-      {
-        title: "Types",
-        items: [
-          {
-            name: "Singly Linked List",
-            path: "/visualizer/linkedList/types/singly",
-          },
-          {
-            name: "Doubly Linked List",
-            path: "/visualizer/linkedList/types/doubly",
-          },
-          {
-            name: "Circular Linked List",
-            path: "/visualizer/linkedList/types/circular",
-          },
-        ],
-      },
-      {
-        title: "Operations",
-        items: [
-          {
-            name: "Traversal",
-            path: "/visualizer/linkedList/operations/traversal",
-          },
-          {
-            name: "Insertion",
-            path: "/visualizer/linkedList/operations/insertion",
-          },
-          {
-            name: "Deletion",
-            path: "/visualizer/linkedList/operations/deletion",
-          },
-          {
-            name: "Searching",
-            path: "/visualizer/linkedList/operations/search",
-          },
-          {
-            name: "Reverse",
-            path: "/visualizer/linkedList/operations/reverse",
-          },
-          {
-            name: "Merge",
-            path: "/visualizer/linkedList/operations/merge",
-          },
-          {
-            name: "Comparison",
-            path: "/visualizer/linkedList/operations/comparison",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    title: "Tree",
-    desc: "BST, AVL, traversals, tries & advanced trees",
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M3 12h6m-6 4h6m0-8h6m6 0h-6m6 4h-6m-6-8v12m6-12v12"
-        />
-      </svg>
-    ),
-    info: {
-      About:
-        "Hierarchical data structure; has root, nodes, edges; each node has parent/child; no cycles; Used in hierarchies, file systems, searching.",
-      Types: "binary tree, BST, AVL, etc.",
-      Representation: <TreeModal maxLevel={3} />,
-    },
-    subsections: [
-      {
-        title: "Binary Tree",
-        items: [
-          {
-            name: "Structure & Properties",
-            path: "/visualizer/trees/binaryTree/properties",
-          },
-          {
-            name: "Types of Binary Trees",
-            path: "/visualizer/trees/binaryTree/types",
-          },
-        ],
-      },
-      {
-        title: "Binary Search Tree",
-        items: [
-          { name: "Insertion", path: "/visualizer/trees/bst/insertion" },
-          { name: "Deletion", path: "/visualizer/trees/bst/deletion" },
-          { name: "Searching", path: "/visualizer/trees/bst/searching" },
-          { name: "Balancing (AVL)", path: "/visualizer/trees/bst/avl" },
-        ],
-      },
-      {
-        title: "Traversal",
-        items: [
-          { name: "Pre-order", path: "/visualizer/trees/traversal/pre-order" },
-          { name: "In-order", path: "/visualizer/trees/traversal/in-order" },
-          {
-            name: "Post-order",
-            path: "/visualizer/trees/traversal/post-order",
-          },
-          {
-            name: "Level-order (BFS)",
-            path: "/visualizer/trees/traversal/level-order",
-          },
-          {
-            name: "Morris Traversal",
-            path: "/visualizer/trees/traversal/morris",
-          },
-        ],
-      },
-      {
-        title: "Advanced Trees",
-        items: [
-          {
-            name: "Red-Black Trees",
-            path: "/visualizer/trees/advanced/red-black",
-          },
-          { name: "B-Trees", path: "/visualizer/trees/advanced/b-trees" },
-          {
-            name: "Trie (Prefix Tree)",
-            path: "/visualizer/trees/advanced/trie",
-          },
-          { name: "Segment Trees", path: "/visualizer/trees/advanced/segment" },
-          { name: "Fenwick Trees", path: "/visualizer/trees/advanced/fenwick" },
-        ],
-      },
-      {
-        title: "Algorithms",
-        items: [
-          {
-            name: "Lowest Common Ancestor",
-            path: "/visualizer/trees/algorithms/lca",
-          },
-          {
-            name: "Tree Diameter",
-            path: "/visualizer/trees/algorithms/diameter",
-          },
-          {
-            name: "Tree Isomorphism",
-            path: "/visualizer/trees/algorithms/isomorphism",
-          },
-          {
-            name: "Serialize/Deserialize",
-            path: "/visualizer/trees/algorithms/serialization",
-          },
-        ],
-      },
-      {
-        title: "Applications",
-        items: [
-          {
-            name: "Heap Sort",
-            path: "/visualizer/trees/applications/heapsort",
-          },
-          {
-            name: "Huffman Coding",
-            path: "/visualizer/trees/applications/huffman",
-          },
-          {
-            name: "Decision Trees",
-            path: "/visualizer/trees/applications/decision-trees",
-          },
-          {
-            name: "Syntax Trees",
-            path: "/visualizer/trees/applications/syntax-trees",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    title: "Graph",
-    desc: "BFS, DFS, Dijkstra, MST & topological sort",
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
-        />
-      </svg>
-    ),
-    info: {
-      About:
-        "A graph is a data structure made up of: Nodes (also called vertices) Represent entities. Edges Represent connections between nodes.",
-      Representation: <GraphModal />,
-    },
-    subsections: [
-      {
-        title: "Representation",
-        items: [
-          {
-            name: "Adjacency Matrix",
-            path: "/visualizer/graph/representation/adjacency-matrix",
-          },
-          {
-            name: "Adjacency List",
-            path: "/visualizer/graph/representation/adjacency-list",
-          },
-        ],
-      },
-      {
-        title: "Traversal",
-        items: [
-          {
-            name: "Breadth-First Search (BFS)",
-            path: "/visualizer/graph/traversal/bfs",
-          },
-          {
-            name: "Depth-First Search (DFS)",
-            path: "/visualizer/graph/traversal/dfs",
-          },
-        ],
-      },
-      {
-        title: "Algorithms",
-        items: [
-          {
-            name: "Dijkstra's Algorithm",
-            path: "/visualizer/graph/algorithms/dijkstra",
-          },
-          {
-            name: "Prim's Algorithm",
-            path: "/visualizer/graph/algorithms/prim",
-          },
-          {
-            name: "Kruskal's Algorithm",
-            path: "/visualizer/graph/algorithms/kruskal",
-          },
-          {
-            name: "Topological Sort",
-            path: "/visualizer/graph/algorithms/topological-sort",
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const Visualizer = () => {
-  /* Strip non-serialisable `info` (contains JSX modals) before
-     passing to the client component. Icons are fine — they're
-     plain <svg> elements. */
-  const clientSections = sections.map(({ info, ...rest }) => rest);
-
-  return (
-    <div
-      className="min-h-screen bg-white dark:bg-[#1c1d1f] text-gray-800 dark:text-gray-200 flex flex-col"
-      style={{ fontFamily: "'Inter', 'Source Sans 3', sans-serif" }}
-    >
-      <Navbar />
-      <TutorialOverlay />
-      <VisualizerClient initialSections={clientSections} />
-      <div className="w-full relative z-10">
-        <Footer />
-      </div>
-    </div>
-  );
-};
-
-export default Visualizer;
diff --git a/app/visualizer/queue/implementation/array/codeblock.jsx b/app/visualizer/queue/implementation/array/codeblock.jsx
deleted file mode 100755
index 487c04fe3..000000000
--- a/app/visualizer/queue/implementation/array/codeblock.jsx
+++ /dev/null
@@ -1,420 +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 (Array)
-class Queue {
-  constructor(size) {
-    this.capacity = size;
-    this.arr = new Array(size);
-    this.front = this.rear = -1;
-  }
-  
-  // Add element to the rear (enqueue)
-  enqueue(item) {
-    if ((this.rear + 1) % this.capacity === this.front) {
-      console.log("Queue Overflow");
-      return;
-    }
-    if (this.front === -1) {
-      this.front = this.rear = 0;
-    } else {
-      this.rear = (this.rear + 1) % this.capacity;
-    }
-    this.arr[this.rear] = item;
-  }
-  
-  // Remove element from front (dequeue)
-  dequeue() {
-    if (this.front === -1) {
-      console.log("Queue Underflow");
-      return -1;
-    }
-    const item = this.arr[this.front];
-    if (this.front === this.rear) {
-      this.front = this.rear = -1;
-    } else {
-      this.front = (this.front + 1) % this.capacity;
-    }
-    return item;
-  }
-}
-
-// Usage Example
-const queue = new Queue(5);
-queue.enqueue(10);
-queue.enqueue(20);
-queue.enqueue(30);
-console.log(queue.dequeue()); // 10
-console.log(queue.dequeue()); // 20`,
-
-  python: `# Queue Implementation in Python (Array)
-class Queue:
-    def __init__(self, size):
-        self.capacity = size
-        self.arr = [None] * size
-        self.front = self.rear = -1
-    
-    # Add element to the rear (enqueue)
-    def enqueue(self, item):
-        if (self.rear + 1) % self.capacity == self.front:
-            print("Queue Overflow")
-            return
-        if self.front == -1:
-            self.front = self.rear = 0
-        else:
-            self.rear = (self.rear + 1) % self.capacity
-        self.arr[self.rear] = item
-    
-    # Remove element from front (dequeue)
-    def dequeue(self):
-        if self.front == -1:
-            print("Queue Underflow")
-            return -1
-        item = self.arr[self.front]
-        if self.front == self.rear:
-            self.front = self.rear = -1
-        else:
-            self.front = (self.front + 1) % self.capacity
-        return item
-
-# Usage Example
-q = Queue(5)
-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++ (Array)
-#include <iostream>
-using namespace std;
-
-class Queue {
-private:
-    int *arr;
-    int front, rear, capacity;
-    
-public:
-    Queue(int size) {
-        capacity = size;
-        arr = new int[capacity];
-        front = rear = -1;
-    }
-    
-    ~Queue() {
-        delete[] arr;
-    }
-    
-    // Add element to the rear (enqueue)
-    void enqueue(int item) {
-        if ((rear + 1) % capacity == front) {
-            cout << "Queue Overflow" << endl;
-            return;
-        }
-        if (front == -1) {
-            front = rear = 0;
-        } else {
-            rear = (rear + 1) % capacity;
-        }
-        arr[rear] = item;
-    }
-    
-    // Remove element from front (dequeue)
-    int dequeue() {
-        if (front == -1) {
-            cout << "Queue Underflow" << endl;
-            return -1;
-        }
-        int item = arr[front];
-        if (front == rear) {
-            front = rear = -1;
-        } else {
-            front = (front + 1) % capacity;
-        }
-        return item;
-    }
-};
-
-int main() {
-    Queue q(5);
-    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">
-              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
diff --git a/app/visualizer/queue/implementation/array/content.jsx b/app/visualizer/queue/implementation/array/content.jsx
deleted file mode 100755
index 1487db290..000000000
--- a/app/visualizer/queue/implementation/array/content.jsx
+++ /dev/null
@@ -1,295 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem("theme") || "light";
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener("storage", updateTheme);
-    window.addEventListener("themeChange", updateTheme);
-
-    return () => {
-      window.removeEventListener("storage", updateTheme);
-      window.removeEventListener("themeChange", updateTheme);
-    };
-  }, []);
-
-  const paragraph = [
-    `Implementing a Queue using an array is a fundamental approach where we use a fixed-size or dynamic array to store elements while maintaining FIFO order. The array implementation requires careful handling of front and rear pointers to efficiently enqueue and dequeue elements.`,
-    `In a circular array implementation, we treat the array as circular to maximize space utilization. When either pointer reaches the end of the array, it wraps around to the beginning.`,
-    `Queues are widely used in scenarios like printer job scheduling, call center systems, and network packet handling where order preservation is crucial.`,
-  ];
-
-  const implementationSteps = [
-    {
-      points:
-        "Initialize an array of fixed size (for static implementation) or dynamic array",
-    },
-    {
-      points:
-        "Initialize two pointers: front (for dequeue) and rear (for enqueue), both set to -1 initially",
-    },
-    {
-      points:
-        "Implement boundary checks for overflow (full queue) and underflow (empty queue) conditions",
-    },
-    {
-      points:
-        "For circular queue implementation, use modulo arithmetic for pointer updates",
-    },
-  ];
-
-  const enqueueAlgorithm = [
-    {
-      points:
-        "Check if queue is full (if (rear == capacity - 1) for linear array)",
-    },
-    { points: "For empty queue, set both front and rear to 0" },
-    { points: "For circular queue: rear = (rear + 1) % capacity" },
-    { points: "Insert new element at items[rear]" },
-    { points: "Increment size counter" },
-  ];
-
-  const dequeueAlgorithm = [
-    { points: "Check if queue is empty (front == -1)" },
-    { points: "Store the front element to return later" },
-    { points: "If only one element (front == rear), reset pointers to -1" },
-    { points: "For circular queue: front = (front + 1) % capacity" },
-    { points: "Decrement size counter" },
-    { points: "Return the stored element" },
-  ];
-
-  const complexity = [
-    {
-      points:
-        "Enqueue Operation: O(1) - Amortized constant time for dynamic arrays",
-    },
-    {
-      points:
-        "Dequeue Operation: O(1) - No shifting needed with pointer approach",
-    },
-    { points: "Peek Operation: O(1) - Direct access via front pointer" },
-    { points: "Space Usage: O(n) - Linear space for storing elements" },
-  ];
-
-  const prosCons = [
-    {
-      points:
-        "Pros: Simple implementation, cache-friendly (array elements contiguous in memory)",
-    },
-    { points: "Pros: Efficient O(1) operations with pointer tracking" },
-    { points: "Cons: Fixed size limitation in static array implementation" },
-    {
-      points:
-        "Cons: Wasted space in linear array implementation without circular approach",
-    },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* Queue Array Implementation Overview */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Queue Implementation Using Array
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraph[0]}
-            </p>
-          </div>
-        </section>
-
-        {/* Implementation Steps */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Implementation Steps
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {implementationSteps.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Enqueue Algorithm */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Enqueue Algorithm
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {enqueueAlgorithm.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Dequeue Algorithm */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Dequeue Algorithm
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {dequeueAlgorithm.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Time Complexity */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Time & Space Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {complexity.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
-                    {item.points.split(":")[0]}:
-                  </span>
-                  <span className="ml-2">{item.points.split(":")[1]}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Pros and Cons */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Pros and Cons
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {prosCons.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Additional Info */}
-        <section className="p-6">
-          <div className="prose dark:prose-invert max-w-none">
-            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
-                Practical Considerations
-              </h3>
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                {paragraph[1]}
-              </p>
-              <p className="text-[#374151] dark:text-[#d1d5db] mt-2 leading-relaxed">
-                {paragraph[2]}
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
diff --git a/app/visualizer/queue/implementation/array/page.jsx b/app/visualizer/queue/implementation/array/page.jsx
deleted file mode 100755
index ab36c1376..000000000
--- a/app/visualizer/queue/implementation/array/page.jsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/queue/implementation/array/content";
-import Code from "@/app/visualizer/queue/implementation/array/codeblock";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Footer from '@/app/components/footer';
-import BackToTop from '@/app/components/ui/backtotop';
-
-export const metadata = {
-  title:
-    "Queue Implementation Using Array | Visualize Queue Operations in JS, C, Python, Java",
-  description:
-    "Learn Queue implementation using arrays with real-time visualizations and code examples in JavaScript, C, Python, and Java. Understand how Enqueue and Dequeue work step-by-step without quizzes. Ideal for DSA beginners.",
-  keywords: [
-    "Queue Implementation",
-    "Queue using Array",
-    "Enqueue Dequeue Operations",
-    "Queue Data Structure",
-    "Queue Visualization",
-    "DSA Queue Tutorial",
-    "Queue in JavaScript",
-    "Queue in C",
-    "Queue in Python",
-    "Queue in Java",
-    "Learn Queue",
-    "Interactive Queue Visualizer",
-    "Array based Queue",
-    "DSA for Beginners",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/queue/queueArray.png",
-        width: 1200,
-        height: 630,
-        alt: "Implementation of Queue using Array Algorithm Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Queue using Array", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Queue
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Using Array
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.queueArray}
-            title="Queue Using Array"
-            description="Mark Queue implementation using Array as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section className="px-6">
-          <ExploreOther
-          title="Explore other implementation"
-          links={[{ text: "Using Linked List", url: "./linkedList" }]}
-        />
-        </section>
-      </div>
-
-      <BackToTop />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/queue/implementation/linkedList/codeBlock.jsx b/app/visualizer/queue/implementation/linkedList/codeBlock.jsx
deleted file mode 100755
index 3d0a1b3ed..000000000
--- a/app/visualizer/queue/implementation/linkedList/codeBlock.jsx
+++ /dev/null
@@ -1,460 +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;
-  }
-
-  // Check if queue is empty
-  isEmpty() {
-    return this.front === null;
-  }
-}
-
-// 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
-console.log(queue.isEmpty()); // false`,
-
-  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
-
-    # Check if queue is empty
-    def is_empty(self):
-        return self.front is None
-
-# Usage Example
-q = Queue()
-q.enqueue(10)
-q.enqueue(20)
-q.enqueue(30)
-print(q.dequeue())  # 10
-print(q.dequeue())  # 20
-print(q.is_empty()) # False`,
-
-  java: `// Queue Implementation in Java (Linked List)
-public class LinkedListQueue {
-    private class Node {
-        int data;
-        Node next;
-        
-        Node(int data) {
-            this.data = data;
-            this.next = null;
-        }
-    }
-    
-    private Node front, rear;
-    
-    public LinkedListQueue() {
-        front = rear = null;
-    }
-    
-    // Add element to the rear (enqueue)
-    public void enqueue(int item) {
-        Node newNode = new Node(item);
-        if (rear == null) {
-            front = rear = newNode;
-        } else {
-            rear.next = newNode;
-            rear = newNode;
-        }
-    }
-    
-    // Remove element from front (dequeue)
-    public int dequeue() {
-        if (front == null) {
-            System.out.println("Queue Underflow");
-            return -1;
-        }
-        Node temp = front;
-        front = front.next;
-        
-        if (front == null) {
-            rear = null;
-        }
-        return temp.data;
-    }
-
-    // Check if queue is empty
-    public boolean isEmpty() {
-        return front == null;
-    }
-
-    public static void main(String[] args) {
-        LinkedListQueue queue = new LinkedListQueue();
-        queue.enqueue(10);
-        queue.enqueue(20);
-        queue.enqueue(30);
-        System.out.println(queue.dequeue()); // 10
-        System.out.println(queue.dequeue()); // 20
-        System.out.println(queue.isEmpty()); // false
-    }
-}`,
-
-  c: `// Queue Implementation in C (Linked List)
-#include <stdio.h>
-#include <stdlib.h>
-#include <stdbool.h>
-
-typedef struct Node {
-    int data;
-    struct Node* next;
-} Node;
-
-typedef struct {
-    Node* front;
-    Node* rear;
-} Queue;
-
-void initialize(Queue* q) {
-    q->front = q->rear = NULL;
-}
-
-// Add element to the rear (enqueue)
-void enqueue(Queue* q, int item) {
-    Node* newNode = (Node*)malloc(sizeof(Node));
-    newNode->data = item;
-    newNode->next = NULL;
-    
-    if (q->rear == NULL) {
-        q->front = q->rear = newNode;
-    } else {
-        q->rear->next = newNode;
-        q->rear = newNode;
-    }
-}
-
-// Remove element from front (dequeue)
-int dequeue(Queue* q) {
-    if (q->front == NULL) {
-        printf("Queue Underflow\n");
-        return -1;
-    }
-    Node* temp = q->front;
-    int item = temp->data;
-    q->front = q->front->next;
-    
-    if (q->front == NULL) {
-        q->rear = NULL;
-    }
-    free(temp);
-    return item;
-}
-
-// Check if queue is empty
-bool isEmpty(Queue* q) {
-    return q->front == NULL;
-}
-
-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
-    printf("%s\n", isEmpty(&q) ? "true" : "false"); // false
-    
-    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;
-    }
-    
-    // Check if queue is empty
-    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
-    cout << boolalpha << q.isEmpty() << endl; // false
-    
-    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">
-              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
diff --git a/app/visualizer/queue/implementation/linkedList/content.jsx b/app/visualizer/queue/implementation/linkedList/content.jsx
deleted file mode 100755
index dd7f6c070..000000000
--- a/app/visualizer/queue/implementation/linkedList/content.jsx
+++ /dev/null
@@ -1,254 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem("theme") || "light";
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener("storage", updateTheme);
-    window.addEventListener("themeChange", updateTheme);
-
-    return () => {
-      window.removeEventListener("storage", updateTheme);
-      window.removeEventListener("themeChange", updateTheme);
-    };
-  }, []);
-
-  const paragraph = [
-    `Implementing a Queue using a linked list provides dynamic memory allocation and efficient insertion/removal operations. Unlike array implementation, linked list queues don't have fixed capacity limitations and can grow dynamically as needed.`,
-    `Each node in the linked list contains the data and a pointer to the next node. The front pointer points to the first node (for dequeue), while the rear pointer points to the last node (for enqueue).`,
-    `Linked list queues are particularly useful when the maximum size isn't known in advance or when frequent insertions/deletions are required.`,
-  ];
-
-  const implementationSteps = [
-    { points: "Define a Node class with data and next pointer attributes" },
-    { points: "Create Queue class with front and rear pointers initialized to null" },
-    { points: "Implement enqueue by adding nodes at the rear" },
-    { points: "Implement dequeue by removing nodes from the front" },
-    { points: "Maintain proper pointer connections during operations" },
-  ];
-
-  const enqueueAlgorithm = [
-    { points: "Create a new node with the given data" },
-    { points: "If queue is empty, set both front and rear to the new node" },
-    { points: "Else, set rear.next to the new node and update rear pointer" },
-    { points: "Increment the size counter" },
-  ];
-
-  const dequeueAlgorithm = [
-    { points: "Check if queue is empty (front === null)" },
-    { points: "Store the front node to return later" },
-    { points: "Move front pointer to front.next" },
-    { points: "If front becomes null (queue is now empty), set rear to null" },
-    { points: "Decrement the size counter" },
-    { points: "Return the stored node's data" },
-  ];
-
-  const complexity = [
-    { points: "Enqueue Operation: O(1) - Constant time to add at tail" },
-    { points: "Dequeue Operation: O(1) - Constant time to remove from head" },
-    { points: "Peek Operation: O(1) - Direct access via front pointer" },
-    { points: "Space Usage: O(n) - Linear space for storing elements plus pointer overhead" },
-  ];
-
-  const prosCons = [
-    { points: "Pros: No fixed size limitation - grows dynamically" },
-    { points: "Pros: Efficient O(1) operations for both enqueue and dequeue" },
-    { points: "Pros: No wasted memory (only allocates what's needed)" },
-    { points: "Cons: Extra memory for node pointers (next references)" },
-    { points: "Cons: Not cache-friendly (nodes may be scattered in memory)" },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* Queue Linked List Implementation Overview */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Queue Implementation Using Linked List
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraph[0]}
-            </p>
-          </div>
-        </section>
-
-        {/* Implementation Steps */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Implementation Steps
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {implementationSteps.map((item, index) => (
-                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                  {item.points}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Enqueue Algorithm */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Enqueue Algorithm
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {enqueueAlgorithm.map((item, index) => (
-                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                  {item.points}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Dequeue Algorithm */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Dequeue Algorithm
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {dequeueAlgorithm.map((item, index) => (
-                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                  {item.points}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Time Complexity */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Time & Space Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {complexity.map((item, index) => (
-                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
-                    {item.points.split(':')[0]}:
-                  </span>
-                  <span className="ml-2">{item.points.split(':')[1]}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Pros and Cons */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Pros and Cons
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {prosCons.map((item, index) => (
-                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Additional Info */}
-        <section className="p-6">
-          <div className="prose dark:prose-invert max-w-none">
-            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">When to Use Linked List Queue</h3>
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                {paragraph[2]}
-              </p>
-              <ul className="mt-2 space-y-1 list-disc pl-5 marker:text-blue-500 dark:marker:text-blue-400">
-                <li className="text-[#374151] dark:text-[#d1d5db]">When the maximum queue size is unpredictable</li>
-                <li className="text-[#374151] dark:text-[#d1d5db]">When memory efficiency is more important than cache performance</li>
-                <li className="text-[#374151] dark:text-[#d1d5db]">In applications with frequent dynamic memory allocation/deallocation</li>
-              </ul>
-            </div>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
\ No newline at end of file
diff --git a/app/visualizer/queue/implementation/linkedList/page.jsx b/app/visualizer/queue/implementation/linkedList/page.jsx
deleted file mode 100755
index 95c3d2952..000000000
--- a/app/visualizer/queue/implementation/linkedList/page.jsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/queue/implementation/linkedList/content";
-import Code from "@/app/visualizer/queue/implementation/linkedList/codeBlock";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-import ExploreOther from "@/app/components/ui/exploreOther";
-import Footer from "@/app/components/footer";
-import BackToTop from "@/app/components/ui/backtotop";
-
-export const metadata = {
-  title:
-    "Queue Implementation Using Linked List | Visualize Queue in JS, C, Python, Java",
-  description:
-    "Explore Queue implementation using Linked List with real-time visualizations and code examples in JavaScript, C, Python, and Java. Understand how Enqueue and Dequeue work in a dynamic memory structure. Perfect for DSA beginners and interview prep.",
-  keywords: [
-    "Queue Implementation",
-    "Queue using Linked List",
-    "Enqueue Dequeue Operations",
-    "Queue Data Structure",
-    "Linked List Queue",
-    "Queue Visualization",
-    "DSA Queue Tutorial",
-    "Queue in JavaScript",
-    "Queue in C",
-    "Queue in Python",
-    "Queue in Java",
-    "Learn Queue",
-    "Interactive DSA Tools",
-    "DSA with Linked List",
-    "DSA for Beginners",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/queue/queueLinkedList.png",
-        width: 1200,
-        height: 630,
-        alt: "Implementation of Queue using Linked List Algorithm Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Queue using Linked List", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Queue
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Using Linked List
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.queueLinkedList}
-            title="Queue Using Linked List"
-            description="Mark Queue implementation using Linked List as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section className="px-6">
-          <ExploreOther
-            title="Explore other implementation"
-            links={[{ text: "Using Array", url: "./array" }]}
-          />
-        </section>
-      </div>
-
-      <BackToTop />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/queue/operations/enqueue-dequeue/animation.jsx b/app/visualizer/queue/operations/enqueue-dequeue/animation.jsx
deleted file mode 100755
index ed0409108..000000000
--- a/app/visualizer/queue/operations/enqueue-dequeue/animation.jsx
+++ /dev/null
@@ -1,230 +0,0 @@
-"use client";
-import React, { useState } from "react";
-
-const QueueVisualizer = () => {
-  const [queue, setQueue] = useState([]);
-  const [inputValue, setInputValue] = useState("");
-  const [operation, setOperation] = useState(null);
-  const [message, setMessage] = useState("");
-  const [isAnimating, setIsAnimating] = useState(false);
-
-  const enqueue = () => {
-    if (!inputValue.trim()) {
-      setMessage("Please enter a value");
-      return;
-    }
-    setIsAnimating(true);
-    setOperation(`Enqueuing "${inputValue}" to rear...`);
-    setTimeout(() => {
-      setQueue((prev) => [...prev, inputValue]);
-      setOperation(null);
-      setMessage(`"${inputValue}" added to rear`);
-      setInputValue("");
-      setIsAnimating(false);
-    }, 1000);
-  };
-
-  const dequeue = () => {
-    if (queue.length === 0) {
-      setMessage("Queue is empty!");
-      return;
-    }
-    setIsAnimating(true);
-    const dequeuedValue = queue[0];
-    setOperation(`Dequeuing "${dequeuedValue}" from front...`);
-    setTimeout(() => {
-      setQueue((prev) => prev.slice(1));
-      setOperation(null);
-      setMessage(`"${dequeuedValue}" removed from front`);
-      setIsAnimating(false);
-    }, 1000);
-  };
-
-  const reset = () => {
-    setQueue([]);
-    setInputValue("");
-    setOperation(null);
-  };
-
-  return (
-    <main className="container mx-auto">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-        Visualize First-In-First-Out (FIFO) operations in real-time
-      </p>
-
-      {/* ------- Controls ------- */}
-      <div className="flex flex-col items-center">
-        <div className="bg-white max-w-4xl dark:bg-neutral-950 p-6 rounded-xl shadow-lg mb-8 border border-gray-200 dark:border-gray-700 w-full flex flex-col items-center">
-          <div className="flex flex-col sm:flex-row gap-4 mb-4 w-full justify-center items-center">
-            <input
-              type="text"
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              placeholder="Enter value..."
-              className="flex-1 p-3 border border-neutral-300 dark:border-gray-500 rounded-lg dark:bg-neutral-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all min-w-[180px] max-w-xs"
-              disabled={isAnimating}
-              onKeyDown={(e) => e.key === "Enter" && enqueue()}
-            />
-            <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 w-full sm:w-auto">
-              <button
-                onClick={enqueue}
-                disabled={isAnimating}
-                className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all flex items-center justify-center gap-2"
-              >
-                <span>Enqueue</span>
-              </button>
-              <button
-                onClick={dequeue}
-                disabled={isAnimating || queue.length === 0}
-                className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all flex items-center justify-center gap-2"
-              >
-                <span className="text-base font-medium leading-none">Dequeue</span>
-              </button>
-              <button
-                onClick={reset}
-                className="bg-red-500 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all col-span-2 sm:col-span-1 flex items-center justify-center gap-2"
-                disabled={isAnimating}
-              >
-                <span className="text-base font-medium leading-none">Reset</span>
-              </button>
-            </div>
-          </div>
-
-          {/* status row */}
-          <div className="flex flex-col gap-3 w-full items-center">
-            {operation && (
-              <div className="p-3 rounded-lg bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-800 flex items-center gap-2 justify-center">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5 animate-spin"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-                <span>{operation}</span>
-              </div>
-            )}
-            {message && (
-              <div
-                className={`p-3 rounded-lg ${
-                  message.includes("added")
-                    ? "bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800"
-                    : message.includes("removed")
-                    ? "bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-800"
-                    : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-600"
-                } flex items-center gap-2 justify-center`}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  {message.includes("added") ? (
-                    <path
-                      fillRule="evenodd"
-                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                      clipRule="evenodd"
-                    />
-                  ) : message.includes("removed") ? (
-                    <path
-                      fillRule="evenodd"
-                      d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
-                      clipRule="evenodd"
-                    />
-                  ) : (
-                    <path
-                      fillRule="evenodd"
-                      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z"
-                      clipRule="evenodd"
-                    />
-                  )}
-                </svg>
-                <span>{message}</span>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* ------- Queue Visualization (hidden when empty) ------- */}
-        {queue.length > 0 && (
-          <div className="bg-white dark:bg-neutral-950 p-6 max-w-4xl rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 w-full flex flex-col items-center">
-            <h2 className="text-2xl font-semibold mb-6 text-center">Queue Visualization</h2>
-
-            {/* Queue row with Front / Rear labels on the sides */}
-            <div className="flex items-center gap-3 w-full justify-center">
-              {/* Front label */}
-              <div className="text-blue-600 dark:text-blue-400 font-medium flex flex-col items-center">
-                <span>Front</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </div>
-
-              {/* Elements */}
-              <div className="flex items-center gap-4">
-                {queue.map((item, index) => (
-                  <div
-                    key={index}
-                    className={`relative flex flex-col items-center transition-all duration-300 ${
-                      index === 0 && operation?.includes("Dequeuing")
-                        ? "animate-pulse scale-110"
-                        : index === queue.length - 1 && operation?.includes("Enqueuing")
-                        ? "animate-bounce"
-                        : ""
-                    }`}
-                  >
-                    <div
-                      className={`w-24 h-24 rounded-lg shadow-md flex items-center justify-center text-lg font-medium border-2 ${
-                        index === 0
-                          ? "border-blue-300 dark:border-blue-700"
-                          : index === queue.length - 1
-                          ? "border-green-300 dark:border-green-700"
-                          : "border-gray-200 dark:border-gray-600"
-                      } bg-white dark:bg-neutral-900`}
-                    >
-                      {item}
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {/* Rear label */}
-              <div className="text-green-600 dark:text-green-400 font-medium flex flex-col items-center">
-                <span>Rear</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </main>
-  );
-};
-
-export default QueueVisualizer;
\ No newline at end of file
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 261ddf2bf..000000000
--- 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/content.jsx b/app/visualizer/queue/operations/enqueue-dequeue/content.jsx
deleted file mode 100755
index 5b3f7c770..000000000
--- a/app/visualizer/queue/operations/enqueue-dequeue/content.jsx
+++ /dev/null
@@ -1,283 +0,0 @@
-"use client";
-import ComplexityGraph from "@/app/components/ui/graph";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState('light');
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem('theme') || 'light';
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener('storage', updateTheme);
-    window.addEventListener('themeChange', updateTheme);
-
-    return () => {
-      window.removeEventListener('storage', updateTheme);
-      window.removeEventListener('themeChange', updateTheme);
-    };
-  }, []);
-
-  const paragraph = [
-    `A Queue is a linear data structure that follows the First-In-First-Out (FIFO) principle. Elements are added at the rear (enqueue) and removed from the front (dequeue). It operates much like a real-world queue (line) where the first person to arrive is the first to be served.`,
-    `The space complexity is O(n) where n is the number of elements in the queue, as it needs to store all elements.`,
-    `Queues are fundamental in computer science and are used in various applications like CPU scheduling, disk scheduling, handling interrupts, breadth-first search, and any scenario where you need to maintain order of processing.`,
-  ];
-
-  const enqueue = [
-    { points : "Check if the queue is full (in case of fixed-size implementation)" },
-    { points : "If full, return overflow error (or resize in dynamic implementation)" },
-    { points : "Increment the rear pointer" },
-    { points : "Add the new element at the rear position" },
-  ];
-
-  const opeartionEnqueue = [
-    { points : "Before Enqueue: [10, 20, 30]" },
-    { points : "Enqueue(40): Add 40 to the rear" },
-    { points : "Enqueue(40): Add 40 to the rear" },
-  ];
-
-  const dequeue = [
-    { points : "Check if the queue is empty" },
-    { points : "If empty, return underflow error" },
-    { points : "Access the data at the front of the queue" },
-    { points : "Increment the front pointer to the next element" },
-    { points : "Return the accessed data" },
-  ];
-
-  const operationDequeue = [
-    { points : "Before Dequeue: [10, 20, 30, 40]" },
-    { points : "Dequeue(): Remove and return 10" },
-    { points : "After Dequeue: [20, 30, 40]" },
-  ];
-
-  const complexity = [
-    { points : "Enqueue Operation: O(1) - Constant time to add to the end" },
-    { points : "Dequeue Operation: O(1) - Constant time to remove from the front" },
-  ];
-
-    return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-    {/* What is a Queue? */}
-    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-        What is a Queue?
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-          {paragraph[0]}
-        </p>
-      </div>
-    </section>
-
-    {/* Enqueue Operation */}
-    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-        Enqueue Operation
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-          Enqueue adds an element to the end (rear) of the queue. Example with queue: [10, 20, 30]
-        </p>
-        
-        <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {opeartionEnqueue.map((item, index) => (
-            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-              {item.points}
-            </li>
-          ))}
-        </ol>
-        
-        <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
-          The new element always goes to the end of the queue.
-        </p>
-      </div>
-    </section>
-
-    {/* Dequeue Operation */}
-    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-        Dequeue Operation
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-          Dequeue removes and returns the element from the front (head) of the queue.
-        </p>
-        <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-          Example with queue: <span className="font-mono dark:text-amber-500 text-purple-600">[10, 20, 30, 40]</span>
-        </p>
-        
-        <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {operationDequeue.map((item, index) => (
-            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-              {item.points}
-            </li>
-          ))}
-        </ol>
-        
-        <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
-          The oldest element (first one added) is always removed first.
-        </p>
-      </div>
-    </section>
-
-    {/* Algorithm Steps for Enqueue */}
-    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-        Algorithm Steps for Enqueue
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {enqueue.map((item, index) => (
-            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-              {item.points}
-            </li>
-          ))}
-        </ol>
-      </div>
-    </section>
-
-    {/* Algorithm Steps for Dequeue */}
-    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-        Algorithm Steps for Dequeue
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {dequeue.map((item, index) => (
-            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-              {item.points}
-            </li>
-          ))}
-        </ol>
-      </div>
-    </section>
-
-    {/* Time Complexity */}
-    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-        Time Complexity
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {complexity.map((item, index) => (
-            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-              <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
-                {item.points.split(':')[0]}:
-              </span>
-              <span className="ml-2">{item.points.split(':')[1]}</span>
-            </li>
-          ))}
-        </ul>
-
-        <div className="mt-8">
-              <ComplexityGraph
-                bestCase={(n) => 1}
-                averageCase={(n) => 1}
-                worstCase={(n) => 1}
-                maxN={25}
-              />
-            </div>
-      </div>
-    </section>
-
-    {/* Space Complexity */}
-    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-        Space Complexity
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-          {paragraph[1]}
-        </p>
-      </div>
-    </section>
-
-    {/* Additional Info */}
-    <section className="p-6">
-      <div className="prose dark:prose-invert max-w-none">
-        <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-          <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-            {paragraph[2]}
-          </p>
-        </div>
-      </div>
-    </section>
-  </article>
-
-  {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-</main>
-    );
-  };
-  
-  export default content;
\ 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
deleted file mode 100755
index e3c45a8a5..000000000
--- a/app/visualizer/queue/operations/enqueue-dequeue/page.jsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import Animation from "@/app/visualizer/queue/operations/enqueue-dequeue/animation";
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/queue/operations/enqueue-dequeue/content";
-import Quiz from "@/app/visualizer/queue/operations/enqueue-dequeue/quiz";
-import Code from "@/app/visualizer/queue/operations/enqueue-dequeue/codeBlock";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-import ExploreOther from "@/app/components/ui/exploreOther";
-import Footer from "@/app/components/footer";
-import BackToTop from "@/app/components/ui/backtotop";
-
-export const metadata = {
-  title:
-    "Enqueue and Dequeue Operations in Queue | Learn Queue with JS, C, Python, Java Code",
-  description:
-    "Visualize and understand the Enqueue and Dequeue operations in a Queue with real-time animations and code examples in JavaScript, C, Python, and Java. Perfect for DSA beginners and interview preparation.",
-  keywords: [
-    "Enqueue Operation",
-    "Dequeue Operation",
-    "Queue Operations",
-    "Queue DSA",
-    "Queue Enqueue Dequeue",
-    "Learn Queue",
-    "Queue Visualization",
-    "Interactive DSA Tools",
-    "Queue Data Structure",
-    "Queue Code Examples",
-    "Enqueue Dequeue in JavaScript",
-    "Enqueue Dequeue in C",
-    "Enqueue Dequeue in Python",
-    "Enqueue Dequeue in Java",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/queue/enqueueDequeue.png",
-        width: 1200,
-        height: 630,
-        alt: "Enqueue Dequeue Algorithm Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Enqueue-Dequeue", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Queue
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Enqueue & Dequeue
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section className="px-6">
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.enqueueDequeue}
-            title="Enqueue Dequeue"
-            description="Mark queue : enqueue & dequeue as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section className="px-6">
-          <ExploreOther
-            title="Explore Other Operations"
-            links={[
-              { text: "Peek Front", url: "./peek-front" },
-              { text: "Is Empty", url: "./isempty" },
-              { text: "Is Full", url: "./isfull" },
-            ]}
-          />
-        </section>
-      </div>
-
-      <BackToTop />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/queue/operations/enqueue-dequeue/quiz.jsx b/app/visualizer/queue/operations/enqueue-dequeue/quiz.jsx
deleted file mode 100755
index b9b0d1518..000000000
--- a/app/visualizer/queue/operations/enqueue-dequeue/quiz.jsx
+++ /dev/null
@@ -1,379 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const QueueQuiz = () => {
-  const questions = [
-    {
-      question: "What principle does a Queue data structure follow?",
-      options: [
-        "Last-In-First-Out (LIFO)",
-        "First-In-First-Out (FIFO)",
-        "Random Access",
-        "Priority-Based"
-      ],
-      correctAnswer: 1,
-      explanation: "Queues follow FIFO: The first element added is the first one removed."
-    },
-    {
-      question: "Where is a new element added in a Queue?",
-      options: [
-        "At the front",
-        "At the rear",
-        "In the middle",
-        "At any random position"
-      ],
-      correctAnswer: 1,
-      explanation: "Enqueue adds elements to the **rear** (end) of the queue."
-    },
-    {
-      question: "What is the time complexity of the enqueue operation?",
-      options: ["O(n)", "O(1)", "O(log n)", "O(n²)"],
-      correctAnswer: 1,
-      explanation: "Enqueue is O(1) as it only requires adding an element to the end."
-    },
-    {
-      question: "Given a queue [5, 10, 15], what will it look like after enqueue(20) and dequeue()?",
-      options: [
-        "[10, 15, 20]",
-        "[5, 10, 15]",
-        "[20, 10, 15]",
-        "[5, 10, 20]"
-      ],
-      correctAnswer: 0,
-      explanation: "Enqueue(20) → [5,10,15,20]; Dequeue() removes 5 → [10,15,20]."
-    },
-    {
-      question: "What happens if you try to dequeue from an empty queue?",
-      options: [
-        "Returns null",
-        "Returns 0",
-        "Causes an underflow error",
-        "Automatically resizes the queue"
-      ],
-      correctAnswer: 2,
-      explanation: "Dequeueing from an empty queue results in an **underflow** error."
-    }
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowIntro(true);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic FIFO principle");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("queue operations (enqueue/dequeue)");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("practical queue manipulation");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("edge case handling");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Queue concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div 
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Queue Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: 'spring', stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div 
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p 
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div 
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500" 
-                style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
-              />
-            </div>
-          </div>
-          
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-            
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div 
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md'
-                      : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                      selectedAnswer === index 
-                        ? 'bg-blue-500 text-white' 
-                        : 'bg-gray-200 dark:bg-gray-600'
-                    }`}>
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-            
-          </motion.div>
-          
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-            
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? 'Finish' : 'Next'} <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar 
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating() 
-                        ? 'text-yellow-400 fill-current' 
-                        : 'text-gray-300 dark:text-gray-600 fill-current'
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-            
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length ? "Perfect Score!" :
-               score >= questions.length * 0.8 ? "Excellent Work!" :
-               score >= questions.length * 0.6 ? "Good Job!" :
-               score >= questions.length * 0.4 ? "Keep Practicing!" : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}% correct
-            </p>
-          </div>
-          
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-          
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">Question Breakdown:</h4>
-            {questions.map((q, index) => (
-              <div key={index} className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0">
-                <p className="font-medium text-gray-800 dark:text-gray-200">{q.question}</p>
-                <div className={`flex items-start mt-1 ${
-                  answers[index] === q.correctAnswer 
-                    ? 'text-green-600 dark:text-green-400' 
-                    : 'text-red-600 dark:text-red-400'
-                }`}>
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">Your answer: {answers[index] !== null ? q.options[answers[index]] : "Not answered"}</p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">Correct answer: {q.options[q.correctAnswer]}</p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-          
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default QueueQuiz;
\ No newline at end of file
diff --git a/app/visualizer/queue/operations/isempty/animation.jsx b/app/visualizer/queue/operations/isempty/animation.jsx
deleted file mode 100755
index 8ffb762b8..000000000
--- a/app/visualizer/queue/operations/isempty/animation.jsx
+++ /dev/null
@@ -1,227 +0,0 @@
-"use client";
-import React, { useState } from "react";
-
-const QueueVisualizer = () => {
-  const [queue, setQueue] = useState([]);
-  const [inputValue, setInputValue] = useState("");
-  const [operation, setOperation] = useState(null);
-  const [message, setMessage] = useState("Queue is empty");
-  const [isAnimating, setIsAnimating] = useState(false);
-
-  /* ---------- helpers ---------- */
-  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
-  const showOp = async (txt, ms = 800) => {
-    setOperation(txt);
-    await sleep(ms);
-    setOperation(null);
-  };
-
-  /* ---------- enqueue ---------- */
-  const enqueue = async () => {
-    if (!inputValue.trim()) {
-      setMessage("Please enter a value");
-      return;
-    }
-    setIsAnimating(true);
-    await showOp(`Enqueuing “${inputValue}” …`);
-    setQueue((q) => [...q, inputValue]);
-    setMessage(`“${inputValue}” added to rear`);
-    setInputValue("");
-    setIsAnimating(false);
-  };
-
-  /* ---------- dequeue ---------- */
-  const dequeue = async () => {
-    if (queue.length === 0) {
-      setMessage("Queue is empty!");
-      return;
-    }
-    setIsAnimating(true);
-    const front = queue[0];
-    await showOp(`Dequeuing “${front}” …`);
-    setQueue((q) => q.slice(1));
-    setMessage(`“${front}” removed from front`);
-    setIsAnimating(false);
-  };
-
-  /* ---------- isEmpty ---------- */
-  const checkEmpty = async () => {
-    setIsAnimating(true);
-    await showOp("Checking if queue is empty …");
-    const empty = queue.length === 0;
-    setMessage(empty ? "Queue is empty" : "Queue is NOT empty");
-    setIsAnimating(false);
-  };
-
-  /* ---------- reset ---------- */
-  const reset = () => {
-    setQueue([]);
-    setInputValue("");
-    setOperation(null);
-    setMessage("Queue cleared");
-  };
-
-  /* ---------- UI ---------- */
-  return (
-    <main className="container mx-auto px-6 py-4">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-        Visualise isEmpty operation in real-time
-      </p>
-
-      <div className="max-w-4xl mx-auto">
-        {/* ----- Controls card ----- */}
-        <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 mb-8">
-          <div className="flex flex-col sm:flex-row gap-4 mb-4">
-            <input
-              type="text"
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              placeholder="Enter value"
-              className="flex-1 p-3 border border-gray-400 rounded-lg dark:bg-neutral-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
-              disabled={isAnimating}
-              onKeyDown={(e) => e.key === "Enter" && enqueue()}
-            />
-          </div>
-
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
-            <button
-              onClick={enqueue}
-              disabled={isAnimating}
-              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Enqueue
-            </button>
-            <button
-              onClick={dequeue}
-              disabled={isAnimating || queue.length === 0}
-              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Dequeue
-            </button>
-            <button
-              onClick={checkEmpty}
-              disabled={isAnimating}
-              className="bg-green-500 text-black px-4 py-2 rounded-lg disabled:opacity-50 transition-all"
-            >
-              IsEmpty
-            </button>
-            <button
-              onClick={reset}
-              disabled={isAnimating}
-              className="bg-red-500 text-white px-4 py-2 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Reset
-            </button>
-          </div>
-
-          {/* status banners */}
-          <div className="flex flex-col gap-3 mt-4 items-center">
-            {operation && (
-              <div className="p-3 rounded-lg bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-800 flex items-center gap-2 justify-center">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5 animate-spin"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-                <span>{operation}</span>
-              </div>
-            )}
-            {message && (
-              <div
-                className={`p-3 rounded-lg ${
-                  message.includes("added")
-                    ? "bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800"
-                    : message.includes("removed")
-                    ? "bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-800"
-                    : "bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-600"
-                } flex items-center gap-2 justify-center`}
-              >
-                <span>{message}</span>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* ----- Visualisation card (hidden when empty) ----- */}
-        {queue.length > 0 && (
-          <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700">
-            <h2 className="text-2xl font-semibold mb-6 text-center">Queue Visualisation</h2>
-
-            <div className="flex items-center gap-3 w-full justify-center">
-              {/* Front pointer */}
-              <div className="text-blue-600 dark:text-blue-400 font-medium flex flex-col items-center">
-                <span>Front</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </div>
-
-              {/* Elements */}
-              <div className="flex items-center gap-4">
-                {queue.map((item, index) => (
-                  <div
-                    key={index}
-                    className={`transition-all duration-300 ${
-                      index === 0 && operation?.includes("Dequeuing")
-                        ? "animate-pulse scale-110"
-                        : index === queue.length - 1 && operation?.includes("Enqueuing")
-                        ? "animate-bounce"
-                        : ""
-                    }`}
-                  >
-                    <div
-                      className={`w-24 h-24 rounded-lg shadow-md flex items-center justify-center text-lg font-medium border-2 ${
-                        index === 0
-                          ? "border-blue-300 dark:border-blue-700"
-                          : index === queue.length - 1
-                          ? "border-green-300 dark:border-green-700"
-                          : "border-gray-200 dark:border-gray-600"
-                      } bg-white dark:bg-neutral-900`}
-                    >
-                      {item}
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {/* Rear pointer */}
-              <div className="text-green-600 dark:text-green-400 font-medium flex flex-col items-center">
-                <span>Rear</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </main>
-  );
-};
-
-export default QueueVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/queue/operations/isempty/codeBlock.jsx b/app/visualizer/queue/operations/isempty/codeBlock.jsx
deleted file mode 100755
index c839aeec2..000000000
--- 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/content.jsx b/app/visualizer/queue/operations/isempty/content.jsx
deleted file mode 100755
index ff90ca7eb..000000000
--- a/app/visualizer/queue/operations/isempty/content.jsx
+++ /dev/null
@@ -1,306 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem("theme") || "light";
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener("storage", updateTheme);
-    window.addEventListener("themeChange", updateTheme);
-
-    return () => {
-      window.removeEventListener("storage", updateTheme);
-      window.removeEventListener("themeChange", updateTheme);
-    };
-  }, []);
-
-  const paragraphs = [
-    `The isEmpty operation checks whether a queue contains any elements or not. It returns true if the queue is empty (no elements) and false if it contains elements. This is a fundamental operation used to prevent underflow when performing dequeue operations.`,
-    `The isEmpty operation is a simple but crucial part of queue functionality, serving as a safety check before removal operations and helping manage queue processing flow in algorithms and applications.`,
-  ];
-
-  const example = [
-    { points: "Empty Queue: []", subpoints: ["isEmpty() → returns true"] },
-    {
-      points: "Non-empty Queue: [10, 20, 30]",
-      subpoints: ["isEmpty() → returns false"],
-    },
-  ];
-
-  const implementation = [
-    {
-      points: "Array-based Implementation:",
-      subpoints: [
-        "Check if front pointer == rear pointer",
-        "Or maintain a separate size counter",
-      ],
-    },
-    {
-      points: "Linked List Implementation:",
-      subpoints: ["Check if head pointer == null"],
-    },
-  ];
-
-  const steps = [
-    { points: "Examine the front of the queue" },
-    { points: "If front is null (or front == rear in array implementation)" },
-    { points: "Return true (queue is empty)" },
-    { points: "Else return false (queue has elements)" },
-  ];
-
-  const complexity = [
-    { points: "It only requires a simple pointer comparison" },
-    { points: "No iteration through elements is needed" },
-    { points: "Performance doesn't depend on queue size" },
-  ];
-
-  const usage = [
-    { points: "Before dequeue operations to prevent underflow" },
-    { points: "In queue processing loops" },
-    { points: "As a termination condition in algorithms" },
-    { points: "To initialize queue operations safely" },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* What is the isEmpty Operation? */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            What is the isEmpty Operation?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraphs[0]}
-            </p>
-          </div>
-        </section>
-
-        {/* How Does It Work? */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            How Does It Work?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              The isEmpty operation simply checks the current state of the
-              queue. Example scenarios:
-            </p>
-
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {example.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                  {item.subpoints && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {item.subpoints.map((subitem, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitem}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-
-            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
-              The operation doesn't modify the queue in any way - it only checks
-              its state.
-            </p>
-          </div>
-        </section>
-
-        {/* Implementation Details */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Implementation Details
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Different implementations check emptiness differently:
-            </p>
-
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {implementation.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                  {item.subpoints && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {item.subpoints.map((subitem, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitem}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Algorithm Steps */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Algorithm Steps
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {steps.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Time Complexity */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Time Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              The isEmpty operation always runs in O(1) constant time because:
-            </p>
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {complexity.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Practical Usage */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Practical Usage
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              isEmpty is commonly used:
-            </p>
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {usage.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Additional Info */}
-        <section className="p-6">
-          <div className="prose dark:prose-invert max-w-none">
-            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                {paragraphs[1]}
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
diff --git a/app/visualizer/queue/operations/isempty/page.jsx b/app/visualizer/queue/operations/isempty/page.jsx
deleted file mode 100755
index 88747b945..000000000
--- a/app/visualizer/queue/operations/isempty/page.jsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import Animation from "@/app/visualizer/queue/operations/isempty/animation";
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/queue/operations/isempty/content";
-import Quiz from "@/app/visualizer/queue/operations/isempty/quiz";
-import Code from "@/app/visualizer/queue/operations/isempty/codeBlock";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Footer from '@/app/components/footer';
-import BackToTop from '@/app/components/ui/backtotop';
-
-export const metadata = {
-  title: "Queue Is Empty Operation | Learn with JS, C, Python, Java Code",
-  description:
-    "Learn how to check if a Queue is empty using interactive visualizations and complete code examples in JavaScript, C, Python, and Java. Ideal for DSA beginners and interview prep.",
-  keywords: [
-    "Queue Is Empty",
-    "Is Empty Operation Queue",
-    "Queue Empty Condition",
-    "Queue Code in JavaScript",
-    "Queue Code in C",
-    "Queue Code in Python",
-    "Queue Code in Java",
-    "DSA Queue Check",
-    "Queue Operations",
-    "Visualize Queue",
-    "Learn Queue DSA",
-    "Queue Data Structure",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/queue/isEmpty.png",
-        width: 1200,
-        height: 630,
-        alt: "isEmpty Algorithm Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Queue : IsEmpty", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Queue
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              IsEmpty
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section className="px-6">
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.queueIsEmpty}
-            title="Queue : IsEmpty"
-            description="Mark queue : isEmpty as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section className="px-6">
-          <ExploreOther
-          title="Explore Other Operations"
-          links={[
-            { text: "Peek Front", url: "./peek-front" },
-            { text: "Enqueue & Dequeue", url: "./enqueue-dequeue" },
-            { text: "Is Full", url: "./isfull" },
-          ]}
-        />
-        </section>
-      </div>
-
-      <BackToTop />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/queue/operations/isempty/quiz.jsx b/app/visualizer/queue/operations/isempty/quiz.jsx
deleted file mode 100755
index 8d50e66e8..000000000
--- a/app/visualizer/queue/operations/isempty/quiz.jsx
+++ /dev/null
@@ -1,374 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const QueueQuiz = () => {
-  const questions = [
-    {
-      question: "What does the isEmpty operation in a queue determine?",
-      options: [
-        "The total capacity of the queue",
-        "Whether the queue contains any elements",
-        "The position of the front element",
-        "The time complexity of other operations"
-      ],
-      correctAnswer: 1,
-      explanation: "isEmpty checks if the queue has zero elements (returns true if empty, false otherwise)."
-    },
-    {
-      question: "What does isEmpty() return for a queue with elements [10, 20]?",
-      options: ["true", "false", "null", "10"],
-      correctAnswer: 1,
-      explanation: "The queue contains elements, so isEmpty returns false."
-    },
-    {
-      question: "Why is isEmpty crucial before calling dequeue()?",
-      options: [
-        "To improve time complexity",
-        "To prevent queue underflow errors",
-        "To resize the queue",
-        "To count the elements"
-      ],
-      correctAnswer: 1,
-      explanation: "Checking isEmpty first avoids errors when attempting to dequeue from an empty queue."
-    },
-    {
-      question: "What is the time complexity of isEmpty?",
-      options: ["O(n)", "O(1)", "O(log n)", "O(n²)"],
-      correctAnswer: 1,
-      explanation: "isEmpty runs in O(1) time as it only checks if front == rear or head == null."
-    },
-    {
-      question: "How would you implement isEmpty for a linked list-based queue?",
-      options: [
-        "Check if head.next == null",
-        "Check if head == null",
-        "Count all nodes",
-        "Compare head and tail values"
-      ],
-      correctAnswer: 1,
-      explanation: "For linked list queues, isEmpty simply verifies if the head pointer is null."
-    }
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowIntro(true);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the isEmpty operation purpose");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("determining isEmpty return values");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("understanding isEmpty importance in error prevention");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("linked list queue implementation");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Queue isEmpty operation concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div 
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Queue isEmpty Operation Quiz
-          </h2>
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: 'spring', stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div 
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p 
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div 
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500" 
-                style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
-              />
-            </div>
-          </div>
-          
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-            
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div 
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md'
-                      : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                      selectedAnswer === index 
-                        ? 'bg-blue-500 text-white' 
-                        : 'bg-gray-200 dark:bg-gray-600'
-                    }`}>
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-            
-          </motion.div>
-          
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-            
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? 'Finish' : 'Next'} <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar 
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating() 
-                        ? 'text-yellow-400 fill-current' 
-                        : 'text-gray-300 dark:text-gray-600 fill-current'
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-            
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length ? "Perfect Score!" :
-               score >= questions.length * 0.8 ? "Excellent Work!" :
-               score >= questions.length * 0.6 ? "Good Job!" :
-               score >= questions.length * 0.4 ? "Keep Practicing!" : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}% correct
-            </p>
-          </div>
-          
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-          
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">Question Breakdown:</h4>
-            {questions.map((q, index) => (
-              <div key={index} className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0">
-                <p className="font-medium text-gray-800 dark:text-gray-200">{q.question}</p>
-                <div className={`flex items-start mt-1 ${
-                  answers[index] === q.correctAnswer 
-                    ? 'text-green-600 dark:text-green-400' 
-                    : 'text-red-600 dark:text-red-400'
-                }`}>
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">Your answer: {answers[index] !== null ? q.options[answers[index]] : "Not answered"}</p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">Correct answer: {q.options[q.correctAnswer]}</p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-          
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default QueueQuiz;
\ No newline at end of file
diff --git a/app/visualizer/queue/operations/isfull/animation.jsx b/app/visualizer/queue/operations/isfull/animation.jsx
deleted file mode 100755
index e7aa23c8e..000000000
--- a/app/visualizer/queue/operations/isfull/animation.jsx
+++ /dev/null
@@ -1,254 +0,0 @@
-"use client";
-import { useState, useEffect } from "react";
-
-const QueueVisualizer = () => {
-  const [queue, setQueue] = useState([]);
-  const [inputValue, setInputValue] = useState("");
-  const [maxSize, setMaxSize] = useState(5);          // capacity
-  const [operation, setOperation] = useState(null);
-  const [message, setMessage] = useState("Queue is empty");
-  const [isAnimating, setIsAnimating] = useState(false);
-
-  const isFull = queue.length >= maxSize;
-
-  /* ---------- helpers ---------- */
-  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
-  const showOp = async (txt, ms = 800) => {
-    setOperation(txt);
-    await sleep(ms);
-    setOperation(null);
-  };
-
-  /* ---------- enqueue ---------- */
-  const enqueue = async () => {
-    if (!inputValue.trim()) {
-      setMessage("Please enter a value");
-      return;
-    }
-    if (isFull) {
-      setMessage("Queue is full!");
-      return;
-    }
-    setIsAnimating(true);
-    await showOp(`Enqueuing “${inputValue}” …`);
-    setQueue((q) => [...q, inputValue]);
-    setMessage(`“${inputValue}” added to rear`);
-    setInputValue("");
-    setIsAnimating(false);
-  };
-
-  /* ---------- dequeue ---------- */
-  const dequeue = async () => {
-    if (queue.length === 0) {
-      setMessage("Queue is empty!");
-      return;
-    }
-    setIsAnimating(true);
-    const front = queue[0];
-    await showOp(`Dequeuing “${front}” …`);
-    setQueue((q) => q.slice(1));
-    setMessage(`“${front}” removed from front`);
-    setIsAnimating(false);
-  };
-
-  /* ---------- isFull ---------- */
-  const checkFull = async () => {
-    setIsAnimating(true);
-    await showOp("Checking if queue is full …");
-    setMessage(isFull ? "Queue is FULL" : "Queue is NOT full");
-    setIsAnimating(false);
-  };
-
-  /* ---------- reset ---------- */
-  const reset = () => {
-    setQueue([]);
-    setInputValue("");
-    setOperation(null);
-    setMessage("Queue cleared");
-  };
-
-  /* ---------- UI ---------- */
-  return (
-    <main className="container mx-auto px-6 pb-4">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-        Visualise isFull operation in real-time
-      </p>
-
-      <div className="max-w-4xl mx-auto">
-        {/* ----- Controls card ----- */}
-        <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 mb-8">
-          {/* Value input + Enqueue */}
-          <div className="flex flex-col sm:flex-row gap-4 mb-4">
-            <input
-              type="text"
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              placeholder="Enter value"
-              className="flex-1 p-3 border dark:border-gray-700 rounded-lg dark:bg-neutral-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
-              disabled={isAnimating}
-              onKeyDown={(e) => e.key === "Enter" && enqueue()}
-            />
-          </div>
-
-          {/* Max-size input */}
-          <div className="flex flex-col sm:flex-row gap-4 mb-4">
-            <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
-              Queue size (capacity):
-              <input
-                type="number"
-                min="1"
-                max="20"
-                value={maxSize}
-                onChange={(e) => {
-                  const val = Number(e.target.value);
-                  if (val > 0) setMaxSize(val);
-                }}
-                className="w-20 p-2 border dark:border-gray-700 rounded dark:bg-neutral-900"
-                disabled={isAnimating}
-              />
-            </label>
-          </div>
-
-          {/* Action buttons */}
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
-            <button
-              onClick={enqueue}
-              disabled={isAnimating || isFull}
-              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Enqueue
-            </button>
-            <button
-              onClick={dequeue}
-              disabled={isAnimating || queue.length === 0}
-              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Dequeue
-            </button>
-            <button
-              onClick={checkFull}
-              disabled={isAnimating}
-              className="bg-green-500 text-black px-4 py-2 rounded-lg disabled:opacity-50 transition-all"
-            >
-              IsFull
-            </button>
-            <button
-              onClick={reset}
-              disabled={isAnimating}
-              className="bg-red-500 text-white px-4 py-2 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Reset
-            </button>
-          </div>
-
-          {/* Status banners */}
-          <div className="flex flex-col gap-3 mt-4 items-center">
-            {operation && (
-              <div className="p-3 rounded-lg bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-800 flex items-center gap-2 justify-center">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5 animate-spin"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-                <span>{operation}</span>
-              </div>
-            )}
-            {message && (
-              <div
-                className={`p-3 rounded-lg ${
-                  message.includes("added")
-                    ? "bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800"
-                    : message.includes("removed") || message.includes("Front element")
-                    ? "bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-800"
-                    : "bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-600"
-                } flex items-center gap-2 justify-center`}
-              >
-                <span>{message}</span>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* ----- Visualisation card (hidden when empty) ----- */}
-        {queue.length > 0 && (
-          <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700">
-            <h2 className="text-2xl font-semibold mb-6 text-center">Queue Visualisation</h2>
-
-            <div className="flex items-center gap-3 w-full justify-center">
-              {/* Front pointer */}
-              <div className="text-blue-600 dark:text-blue-400 font-medium flex flex-col items-center">
-                <span>Front</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </div>
-
-              {/* Elements */}
-              <div className="flex items-center gap-4">
-                {queue.map((item, index) => (
-                  <div
-                    key={index}
-                    className={`transition-all duration-300 ${
-                      index === 0 && operation?.includes("Dequeuing")
-                        ? "animate-pulse scale-110"
-                        : index === queue.length - 1 && operation?.includes("Enqueuing")
-                        ? "animate-bounce"
-                        : ""
-                    }`}
-                  >
-                    <div
-                      className={`w-24 h-24 rounded-lg shadow-md flex items-center justify-center text-lg font-medium border-2 ${
-                        index === 0
-                          ? "border-blue-300 dark:border-blue-700"
-                          : index === queue.length - 1
-                          ? "border-green-300 dark:border-green-700"
-                          : "border-gray-200 dark:border-gray-600"
-                      } bg-white dark:bg-neutral-900`}
-                    >
-                      {item}
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {/* Rear pointer */}
-              <div className="text-green-600 dark:text-green-400 font-medium flex flex-col items-center">
-                <span>Rear</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </main>
-  );
-};
-
-export default QueueVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/queue/operations/isfull/codeBlock.jsx b/app/visualizer/queue/operations/isfull/codeBlock.jsx
deleted file mode 100755
index e11b57889..000000000
--- 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/content.jsx b/app/visualizer/queue/operations/isfull/content.jsx
deleted file mode 100755
index b8aba25e3..000000000
--- a/app/visualizer/queue/operations/isfull/content.jsx
+++ /dev/null
@@ -1,322 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem("theme") || "light";
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener("storage", updateTheme);
-    window.addEventListener("themeChange", updateTheme);
-
-    return () => {
-      window.removeEventListener("storage", updateTheme);
-      window.removeEventListener("themeChange", updateTheme);
-    };
-  }, []);
-
-  const paragraphs = [
-    `The isFull operation checks whether a queue has reached its maximum capacity in fixed-size implementations. It returns true if no more elements can be added (queue is full) and false if space remains. This operation is crucial for preventing overflow in array-based queue implementations.`,
-    `The isFull operation is critical for robust queue implementations in fixed-capacity scenarios, ensuring data integrity by preventing buffer overflow conditions in system programming and embedded applications.`,
-  ];
-
-  const example = [
-    {
-      points: "Full Queue: [10, 20, 30]",
-      subpoints: ["isFull() → returns true"],
-    },
-    {
-      points: "Non-full Queue: [10, 20]",
-      subpoints: ["isFull() → returns false"],
-    },
-  ];
-
-  const implementation = [
-    {
-      points: "Linear Array Implementation:",
-      subpoints: [
-        "Check if rear == capacity - 1",
-        "Simple but wastes space when front ≠ 0",
-      ],
-    },
-    {
-      points: "Circular Array Implementation:",
-      subpoints: [
-        "Check if (rear + 1) % capacity == front",
-        "More space-efficient",
-      ],
-    },
-    {
-      points: "Size Counter Approach:",
-      subpoints: ["Maintain a size variable", "Check if size == capacity"],
-    },
-  ];
-
-  const steps = [
-    { points: "Calculate next rear position: (rear + 1) % capacity" },
-    { points: "Compare with front position" },
-    { points: "If equal, return true (queue is full)" },
-    { points: "Else return false (space available)" },
-  ];
-
-  const complexity = [
-    { points: "It only requires simple pointer arithmetic and comparison" },
-    { points: "No iteration through elements is needed" },
-    { points: "Performance is independent of queue size" },
-  ];
-
-  const usage = [
-    { points: "Bounded buffer problems" },
-    { points: "Producer-consumer scenarios" },
-    { points: "Memory-constrained systems" },
-    { points: "Before enqueue operations to prevent overflow" },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* What is the isFull Operation? */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            What is the isFull Operation?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraphs[0]}
-            </p>
-          </div>
-        </section>
-
-        {/* How Does It Work? */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            How Does It Work?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              The isFull operation examines the queue's capacity and current
-              state.
-            </p>
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Example scenarios (for a queue with capacity 3):
-            </p>
-
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {example.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                  {item.subpoints && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {item.subpoints.map((subitem, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitem}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-
-            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
-              Note: Dynamic implementations (like linked lists) typically don't
-              need this operation as they can grow indefinitely.
-            </p>
-          </div>
-        </section>
-
-        {/* Implementation Details */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Implementation Details
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Different approaches to check if a queue is full:
-            </p>
-
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {implementation.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-semibold">{item.points}</span>
-                  {item.subpoints && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {item.subpoints.map((subitem, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitem}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Algorithm Steps */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Algorithm Steps
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              For circular array implementation:
-            </p>
-            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {steps.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Time Complexity */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Time Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              The isFull operation always runs in O(1) constant time because:
-            </p>
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {complexity.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Practical Usage */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Practical Usage
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              isFull is essential in:
-            </p>
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {usage.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Additional Info */}
-        <section className="p-6">
-          <div className="prose dark:prose-invert max-w-none">
-            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                {paragraphs[1]}
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
diff --git a/app/visualizer/queue/operations/isfull/page.jsx b/app/visualizer/queue/operations/isfull/page.jsx
deleted file mode 100755
index a836d01ff..000000000
--- a/app/visualizer/queue/operations/isfull/page.jsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import Animation from "@/app/visualizer/queue/operations/isfull/animation";
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/queue/operations/isfull/content";
-import Quiz from '@/app/visualizer/queue/operations/isfull/quiz';
-import Code from "@/app/visualizer/queue/operations/isfull/codeBlock";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Footer from '@/app/components/footer';
-import BackToTop from '@/app/components/ui/backtotop';
-
-export const metadata = {
-  title: "Queue Is Full Operation | Learn with JS, C, Python, Java Code",
-  description:
-    "Understand how to check if a Queue is full using interactive visualizations and detailed code examples in JavaScript, C, Python, and Java. Perfect for mastering DSA and technical interviews.",
-  keywords: [
-    "Queue Is Full",
-    "Is Full Operation Queue",
-    "Queue Full Condition",
-    "Queue Capacity Check",
-    "Queue Code in JavaScript",
-    "Queue Code in C",
-    "Queue Code in Python",
-    "Queue Code in Java",
-    "Queue DSA",
-    "Learn Queue Operations",
-    "Queue Data Structure",
-    "Visualize Queue",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/queue/isFull.png",
-        width: 1200,
-        height: 630,
-        alt: "isFull Algorithm Visualization",
-      },
-    ],
-  },
-};
-
-export default function page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Queue : IsFull", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Queue
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              IsFull
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section className="px-6">
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-                  <ModuleCard
-                    moduleId={MODULE_MAPS.queueIsFull}
-                    title="Queue : IsFull"
-                    description="Mark queue : isFull as done and view it on your dashboard"
-                    initialDone={false}
-                  />
-                </section>
-
-                <section className="px-6">
-                  <ExploreOther
-          title="Explore Other Operations"
-          links={[
-            { text: "Peek Front", url: "./peek-front" },
-            { text: "Enqueue & Dequeue", url: "./enqueue-dequeue" },
-            { text: "Is Empty", url: "./isempty" },
-          ]}
-        />
-                </section>
-      </div>
-
-      <BackToTop />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/queue/operations/isfull/quiz.jsx b/app/visualizer/queue/operations/isfull/quiz.jsx
deleted file mode 100755
index 867e46ca9..000000000
--- a/app/visualizer/queue/operations/isfull/quiz.jsx
+++ /dev/null
@@ -1,374 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const QueueQuiz = () => {
-  const questions = [
-    {
-      question: "What does the isFull operation determine in a queue?",
-      options: [
-        "Whether the queue contains any elements",
-        "Whether the queue has reached its maximum capacity",
-        "The position of the front element",
-        "The time complexity of other operations"
-      ],
-      correctAnswer: 1,
-      explanation: "isFull checks if the queue has reached its maximum capacity in fixed-size implementations."
-    },
-    {
-      question: "In which type of queue implementation is isFull most commonly needed?",
-      options: [
-        "Linked list-based queues",
-        "Dynamic arrays",
-        "Array-based queues with fixed capacity",
-        "All queue implementations"
-      ],
-      correctAnswer: 2,
-      explanation: "isFull is crucial for array-based queues with fixed capacity to prevent overflow."
-    },
-    {
-      question: "What is the time complexity of the isFull operation?",
-      options: ["O(n)", "O(1)", "O(log n)", "O(n²)"],
-      correctAnswer: 1,
-      explanation: "isFull runs in O(1) constant time as it only requires simple pointer comparisons."
-    },
-    {
-      question: "In a circular array implementation, when is the queue considered full?",
-      options: [
-        "When front == 0",
-        "When rear == capacity - 1",
-        "When (rear + 1) % capacity == front",
-        "When front == rear"
-      ],
-      correctAnswer: 2,
-      explanation: "In circular arrays, the queue is full when the next position after rear equals front."
-    },
-    {
-      question: "What would isFull() return for a queue with capacity 3 containing [10, 20, 30]?",
-      options: ["true", "false", "null", "Error"],
-      correctAnswer: 0,
-      explanation: "The queue has reached its maximum capacity of 3 elements, so isFull returns true."
-    }
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowIntro(true);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the purpose of isFull operation");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("identifying when isFull is needed");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("circular array implementation details");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("practical application of isFull");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Queue isFull operation concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div 
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Queue isFull Operation Quiz
-          </h2>
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: 'spring', stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div 
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p 
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div 
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500" 
-                style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
-              />
-            </div>
-          </div>
-          
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-            
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div 
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md'
-                      : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                      selectedAnswer === index 
-                        ? 'bg-blue-500 text-white' 
-                        : 'bg-gray-200 dark:bg-gray-600'
-                    }`}>
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-            
-          </motion.div>
-          
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-            
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? 'Finish' : 'Next'} <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar 
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating() 
-                        ? 'text-yellow-400 fill-current' 
-                        : 'text-gray-300 dark:text-gray-600 fill-current'
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-            
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length ? "Perfect Score!" :
-               score >= questions.length * 0.8 ? "Excellent Work!" :
-               score >= questions.length * 0.6 ? "Good Job!" :
-               score >= questions.length * 0.4 ? "Keep Practicing!" : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}% correct
-            </p>
-          </div>
-          
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-          
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">Question Breakdown:</h4>
-            {questions.map((q, index) => (
-              <div key={index} className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0">
-                <p className="font-medium text-gray-800 dark:text-gray-200">{q.question}</p>
-                <div className={`flex items-start mt-1 ${
-                  answers[index] === q.correctAnswer 
-                    ? 'text-green-600 dark:text-green-400' 
-                    : 'text-red-600 dark:text-red-400'
-                }`}>
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">Your answer: {answers[index] !== null ? q.options[answers[index]] : "Not answered"}</p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">Correct answer: {q.options[q.correctAnswer]}</p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-          
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default QueueQuiz;
\ No newline at end of file
diff --git a/app/visualizer/queue/operations/peek-front/animation.jsx b/app/visualizer/queue/operations/peek-front/animation.jsx
deleted file mode 100755
index 9abc8c56e..000000000
--- a/app/visualizer/queue/operations/peek-front/animation.jsx
+++ /dev/null
@@ -1,238 +0,0 @@
-"use client";
-import React, { useState } from "react";
-
-const QueueVisualizer = () => {
-  const [queue, setQueue] = useState([]);
-  const [inputValue, setInputValue] = useState("");
-  const [operation, setOperation] = useState(null);
-  const [message, setMessage] = useState("");
-  const [isAnimating, setIsAnimating] = useState(false);
-
-  /* ---------- core helpers ---------- */
-  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
-
-  const showOp = async (text, ms = 1000) => {
-    setOperation(text);
-    await sleep(ms);
-    setOperation(null);
-  };
-
-  /* ---------- enqueue ---------- */
-  const enqueue = async () => {
-    if (!inputValue.trim()) {
-      setMessage("Please enter a value");
-      return;
-    }
-    setIsAnimating(true);
-    await showOp(`Enqueuing "${inputValue}" to rear...`);
-    setQueue((q) => [...q, inputValue]);
-    setMessage(`"${inputValue}" added to rear`);
-    setInputValue("");
-    setIsAnimating(false);
-  };
-
-  /* ---------- peek front ---------- */
-  const peekFront = () => {
-    if (queue.length === 0) {
-      setMessage("Queue is empty – nothing to peek");
-      return;
-    }
-    setMessage(`Front element is "${queue[0]}"`);
-  };
-
-  /* ---------- random queue ---------- */
-  const generateRandomQueue = () => {
-    if (isAnimating) return;
-    const len = Math.floor(Math.random() * 5) + 3; // 3-7 items
-    const nums = Array.from({ length: len }, () =>
-      String(Math.floor(Math.random() * 90) + 10)
-    ); // 10-99
-    setQueue(nums);
-    setMessage("Random queue generated");
-  };
-
-  /* ---------- reset ---------- */
-  const reset = () => {
-    if (isAnimating) return;
-    setQueue([]);
-    setInputValue("");
-    setOperation(null);
-    setMessage("");
-  };
-
-  /* ---------- UI ---------- */
-  return (
-    <main className="container mx-auto">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-        Visualize First-In-First-Out (FIFO) operations in real-time
-      </p>
-
-      {/* ------- Controls ------- */}
-      <div className="flex flex-col items-center">
-        <div className="bg-white max-w-4xl dark:bg-neutral-950 p-6 rounded-xl shadow-lg mb-8 border border-gray-200 dark:border-gray-700 w-full flex flex-col items-center">
-          {/* input + classic buttons */}
-
-          <div className="flex flex-col sm:flex-row gap-4 w-full justify-center items-center">
-            <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 w-full sm:w-auto">
-              <button
-                onClick={generateRandomQueue}
-                disabled={isAnimating}
-                className="bg-blue-500 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all flex items-center justify-center gap-2 col-span-2 sm:col-span-1"
-              >
-                Random Queue
-              </button>
-              <button
-                onClick={peekFront}
-                disabled={isAnimating || queue.length === 0}
-                className="bg-green-500 text-black px-4 py-3 rounded-lg disabled:opacity-50 transition-all flex items-center justify-center gap-2"
-              >
-                Peek Front
-              </button>
-              <button
-                onClick={reset}
-                className="bg-red-500 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all flex items-center justify-center gap-2"
-                disabled={isAnimating}
-              >
-                Reset
-              </button>
-            </div>
-          </div>
-
-          {/* status / operation banners */}
-          <div className="flex flex-col gap-3 w-full items-center">
-            {operation && (
-              <div className="p-3 rounded-lg bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-800 flex items-center gap-2 justify-center">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5 animate-spin"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-                <span>{operation}</span>
-              </div>
-            )}
-            {message && (
-              <div
-                className={`p-3 mt-4 rounded-lg ${
-                  message.includes("added")
-                    ? "bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800"
-                    : message.includes("removed") || message.includes("Front element")
-                    ? "bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-800"
-                    : "bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-600"
-                } flex items-center gap-2 justify-center`}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  {message.includes("added") ? (
-                    <path
-                      fillRule="evenodd"
-                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                      clipRule="evenodd"
-                    />
-                  ) : message.includes("removed") || message.includes("Front element") ? (
-                    <path
-                      fillRule="evenodd"
-                      d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
-                      clipRule="evenodd"
-                    />
-                  ) : (
-                    <path
-                      fillRule="evenodd"
-                      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z"
-                      clipRule="evenodd"
-                    />
-                  )}
-                </svg>
-                <span>{message}</span>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* ------- Queue Visualization (only when not empty) ------- */}
-        {queue.length > 0 && (
-          <div className="bg-white dark:bg-neutral-950 mb-6 p-6 max-w-4xl rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 w-full flex flex-col items-center">
-            <h2 className="text-2xl font-semibold mb-6 text-center">Queue Visualization</h2>
-
-            {/* Front – items – Rear */}
-            <div className="flex items-center gap-3 w-full justify-center">
-              {/* Front label */}
-              <div className="text-blue-600 dark:text-blue-400 font-medium flex flex-col items-center">
-                <span>Front</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </div>
-
-              {/* Elements */}
-              <div className="flex items-center gap-4">
-                {queue.map((item, index) => (
-                  <div
-                    key={index}
-                    className={`relative flex flex-col items-center transition-all duration-300 ${
-                      index === 0 && operation?.includes("Dequeuing")
-                        ? "animate-pulse scale-110"
-                        : index === queue.length - 1 && operation?.includes("Enqueuing")
-                        ? "animate-bounce"
-                        : ""
-                    }`}
-                  >
-                    <div
-                      className={`w-24 h-24 rounded-lg shadow-md flex items-center justify-center text-lg font-medium border-2 ${
-                        index === 0
-                          ? "border-blue-300 dark:border-blue-700"
-                          : index === queue.length - 1
-                          ? "border-green-300 dark:border-green-700"
-                          : "border-gray-200 dark:border-gray-600"
-                      } bg-white dark:bg-neutral-900`}
-                    >
-                      {item}
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {/* Rear label */}
-              <div className="text-green-600 dark:text-green-400 font-medium flex flex-col items-center">
-                <span>Rear</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </main>
-  );
-};
-
-export default QueueVisualizer;
\ No newline at end of file
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 882d98d22..000000000
--- 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/content.jsx b/app/visualizer/queue/operations/peek-front/content.jsx
deleted file mode 100755
index 915b016b8..000000000
--- a/app/visualizer/queue/operations/peek-front/content.jsx
+++ /dev/null
@@ -1,294 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem("theme") || "light";
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener("storage", updateTheme);
-    window.addEventListener("themeChange", updateTheme);
-
-    return () => {
-      window.removeEventListener("storage", updateTheme);
-      window.removeEventListener("themeChange", updateTheme);
-    };
-  }, []);
-
-  const paragraph = [
-    `The peek front operation (also called front) retrieves the element at the front of the queue without removing it. This operation allows you to examine the next element to be processed while maintaining the queue's integrity.`,
-    `The peek front operation is essential for non-destructive queue inspection, enabling more flexible queue processing patterns while maintaining FIFO order. It's particularly valuable in scenarios where decision-making depends on the next item's properties without committing to its removal.`,
-  ];
-
-  const example = [
-    { points: "Current Queue: [A, B, C, D]" },
-    { points: "peekFront(): Returns 'A'" },
-    { points: "Queue After Peek: [A, B, C, D] (unchanged)" },
-  ];
-
-  const implementation = [
-    {
-      points: "Array-based Queue:",
-      subpoints: ["Return array[front]", "Check for empty queue first"],
-    },
-    { points: "Linked List Queue:", subpoints: ["Return head.data"] },
-    {
-      points: "Circular Buffer:",
-      subpoints: ["Return buffer[front]", "Handle wrap-around cases"],
-    },
-  ];
-
-  const steps = [
-    { points: "Check if queue is empty (use isEmpty())" },
-    { points: "If empty, return error/exception (or null)" },
-    { points: "Access the data at front position" },
-    { points: "Return the data without modifying pointers" },
-  ];
-
-  const complexity = [
-    { points: "Direct access to front element" },
-    { points: "No iteration needed" },
-    { points: "No structural changes to queue" },
-  ];
-
-  const application = [
-    { points: "Previewing next item before processing" },
-    { points: "Priority checking in priority queues" },
-    { points: "Conditional processing logic" },
-    { points: "Debugging queue contents" },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* What is Peek Front Operation? */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            What is Peek Front Operation?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraph[0]}
-            </p>
-          </div>
-        </section>
-
-        {/* How Does It Work? */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            How Does It Work?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Peek returns the front element while keeping the queue unchanged.
-            </p>
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Example with queue: [A, B, C, D]
-            </p>
-
-            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {example.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ol>
-
-            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
-              Contrast with dequeue() which would remove 'A' from the queue.
-            </p>
-          </div>
-        </section>
-
-        {/* Implementation Details */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Implementation Details
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Different implementations handle peek similarly:
-            </p>
-
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {implementation.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-semibold">{item.points}</span>
-                  {item.subpoints && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {item.subpoints.map((subitem, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitem}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Algorithm Steps */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Algorithm Steps
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Basic peek operation algorithm:
-            </p>
-            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {steps.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Time Complexity */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Time Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Peek operation always runs in O(1) constant time because:
-            </p>
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {complexity.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Practical Applications */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Practical Applications
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Common use cases for peek:
-            </p>
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {application.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Additional Info */}
-        <section className="p-6">
-          <div className="prose dark:prose-invert max-w-none">
-            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                {paragraph[1]}
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
diff --git a/app/visualizer/queue/operations/peek-front/page.jsx b/app/visualizer/queue/operations/peek-front/page.jsx
deleted file mode 100755
index b27dbca51..000000000
--- a/app/visualizer/queue/operations/peek-front/page.jsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import Animation from "@/app/visualizer/queue/operations/peek-front/animation";
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/queue/operations/peek-front/content";
-import Quiz from "@/app/visualizer/queue/operations/peek-front/quiz";
-import Code from "@/app/visualizer/queue/operations/peek-front/codeBlock";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Footer from '@/app/components/footer';
-import BackToTop from '@/app/components/ui/backtotop';
-
-export const metadata = {
-  title: "Queue Peek Front Operation | Learn with JS, C, Java, Python Code",
-  description:
-    "Understand the Peek Front operation in Queue with interactive animations and code examples in JavaScript, C, Python, and Java. Ideal for DSA beginners and interview preparation.",
-  keywords: [
-    "Queue Peek Front",
-    "Queue peek front Visulaization",
-    "Peek Front Operation",
-    "Queue DSA",
-    "Queue Front Element",
-    "Queue Peek in JavaScript",
-    "Queue Peek in C",
-    "Queue Peek in Python",
-    "Queue Peek in Java",
-    "Queue Data Structure",
-    "DSA Queue Operations",
-    "Peek Front Code Examples",
-    "Queue Visualization",
-    "Learn Queue DSA",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/queue/peekFront.png",
-        width: 1200,
-        height: 630,
-        alt: "Peek Front Algorithm Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Peek Front", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Queue
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Peek Front
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section className="px-6">
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.peekFront}
-            title="Peek Front"
-            description="Mark queue : Peek Front as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section className="px-6">
-          <ExploreOther
-          title="Explore Other Operations"
-          links={[
-            { text: "Enqueue & Dequeue", url: "./enqueue-dequeue" },
-            { text: "Is Full", url: "./isfull" },
-            { text: "Is Empty", url: "./isempty" },
-          ]}
-        />
-        </section>
-      </div>
-
-      <BackToTop />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/queue/operations/peek-front/quiz.jsx b/app/visualizer/queue/operations/peek-front/quiz.jsx
deleted file mode 100755
index fa1eed8ec..000000000
--- a/app/visualizer/queue/operations/peek-front/quiz.jsx
+++ /dev/null
@@ -1,379 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const QueueQuiz = () => {
-  const questions = [
-    {
-      question: "What does the peek front operation do in a queue?",
-      options: [
-        "Removes the front element",
-        "Adds an element to the front",
-        "Retrieves the front element without removing it",
-        "Priority-Based"
-      ],
-      correctAnswer: 2,
-      explanation: "Peek retrieves the front element but doesn't remove it."
-    },
-    {
-      question: "What is the main difference between peekFront() and dequeue()?",
-      options: [
-        "peekFront() removes the element, dequeue() does not",
-        "dequeue() accesses the rear",
-        "peekFront() leaves the queue unchanged",
-        "They are the same"
-      ],
-      correctAnswer: 2,
-      explanation: "peekFront() retrieves without removal; dequeue() removes the front element."
-    },
-    {
-      question: "What will the queue look like after calling peekFront() on [A, B, C, D]",
-      options: ["[B, C, D]", "[A, B, C]", "[A, B, C, D]", "[D, C, B, A]"],
-      correctAnswer: 2,
-      explanation: "peekFront() does not modify the queue."
-    },
-    {
-      question: "What is the time complexity of the peek operation?",
-      options: [
-        "O(1)",
-        "O(log n)",
-        "O(n)",
-        "O(n²)"
-      ],
-      correctAnswer: 0,
-      explanation: "Direct access makes it constant time."
-    },
-    {
-      question: "In an array-based queue, how is peekFront() typically implemented?",
-      options: [
-        "Return array[0]",
-        "Return array[front]",
-        "Return array[rear]",
-        "Remove array[front]"
-      ],
-      correctAnswer: 1,
-      explanation: "The front index gives the first element."
-    }
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowIntro(true);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the peek operation");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("differentiating peekFront() and dequeue()");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("understanding queue state after peek");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("array-based queue implementation");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Queue peek operation concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div 
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Queue Peek Operation Quiz
-          </h2>
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: 'spring', stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div 
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p 
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div 
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500" 
-                style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
-              />
-            </div>
-          </div>
-          
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-            
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div 
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md'
-                      : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                      selectedAnswer === index 
-                        ? 'bg-blue-500 text-white' 
-                        : 'bg-gray-200 dark:bg-gray-600'
-                    }`}>
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-            
-          </motion.div>
-          
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-            
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? 'Finish' : 'Next'} <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar 
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating() 
-                        ? 'text-yellow-400 fill-current' 
-                        : 'text-gray-300 dark:text-gray-600 fill-current'
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-            
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length ? "Perfect Score!" :
-               score >= questions.length * 0.8 ? "Excellent Work!" :
-               score >= questions.length * 0.6 ? "Good Job!" :
-               score >= questions.length * 0.4 ? "Keep Practicing!" : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}% correct
-            </p>
-          </div>
-          
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-          
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">Question Breakdown:</h4>
-            {questions.map((q, index) => (
-              <div key={index} className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0">
-                <p className="font-medium text-gray-800 dark:text-gray-200">{q.question}</p>
-                <div className={`flex items-start mt-1 ${
-                  answers[index] === q.correctAnswer 
-                    ? 'text-green-600 dark:text-green-400' 
-                    : 'text-red-600 dark:text-red-400'
-                }`}>
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">Your answer: {answers[index] !== null ? q.options[answers[index]] : "Not answered"}</p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">Correct answer: {q.options[q.correctAnswer]}</p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-          
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default QueueQuiz;
\ No newline at end of file
diff --git a/app/visualizer/queue/types/circular/animation.jsx b/app/visualizer/queue/types/circular/animation.jsx
deleted file mode 100755
index 4df120e69..000000000
--- a/app/visualizer/queue/types/circular/animation.jsx
+++ /dev/null
@@ -1,299 +0,0 @@
-"use client";
-import React, { useState } from "react";
-
-const CircularQueueVisualizer = () => {
-  const [maxSize, setMaxSize] = useState(5); // capacity
-  const [queue, setQueue] = useState(Array(5).fill(null));
-  const [front, setFront] = useState(0);
-  const [rear, setRear] = useState(-1);
-  const [count, setCount] = useState(0);
-  const [inputValue, setInputValue] = useState("");
-  const [operation, setOperation] = useState(null);
-  const [message, setMessage] = useState("Circular queue is empty");
-  const [isAnimating, setIsAnimating] = useState(false);
-
-  const isEmpty = count === 0;
-  const isFull = count === maxSize;
-
-  /* ---------- helpers ---------- */
-  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
-  const showOp = async (txt, ms = 800) => {
-    setOperation(txt);
-    await sleep(ms);
-    setOperation(null);
-  };
-  const wrap = (idx) => (idx + maxSize) % maxSize;
-
-  /* ---------- enqueue rear ---------- */
-  const enqueue = async () => {
-    if (!inputValue.trim()) {
-      setMessage("Please enter a value");
-      return;
-    }
-    if (isFull) {
-      setMessage("Circular queue is full!");
-      return;
-    }
-    setIsAnimating(true);
-    await showOp(`Enqueuing "${inputValue}" at rear …`);
-    const newRear = wrap(rear + 1);
-    const newQ = [...queue];
-    newQ[newRear] = inputValue;
-    setQueue(newQ);
-    setRear(newRear);
-    setCount(count + 1);
-    setMessage(`"${inputValue}" added`);
-    setInputValue("");
-    setIsAnimating(false);
-  };
-
-  /* ---------- dequeue front ---------- */
-  const dequeue = async () => {
-    if (isEmpty) {
-      setMessage("Circular queue is empty!");
-      return;
-    }
-    setIsAnimating(true);
-    const item = queue[front];
-    await showOp(`Dequeuing "${item}" from front …`);
-    const newQ = [...queue];
-    newQ[front] = null;
-    setQueue(newQ);
-    setFront(wrap(front + 1));
-    setCount(count - 1);
-    setMessage(`"${item}" removed`);
-    setIsAnimating(false);
-  };
-
-  /* ---------- isEmpty ---------- */
-  const checkEmpty = async () => {
-    setIsAnimating(true);
-    await showOp("Checking if empty …");
-    setMessage(
-      isEmpty ? "Circular queue is EMPTY" : "Circular queue is NOT empty"
-    );
-    setIsAnimating(false);
-  };
-
-  /* ---------- isFull ---------- */
-  const checkFull = async () => {
-    setIsAnimating(true);
-    await showOp("Checking if full …");
-    setMessage(
-      isFull ? "Circular queue is FULL" : "Circular queue is NOT full"
-    );
-    setIsAnimating(false);
-  };
-
-  /* ---------- reset ---------- */
-  const reset = () => {
-    setQueue(Array(maxSize).fill(null));
-    setFront(0);
-    setRear(-1);
-    setCount(0);
-    setInputValue("");
-    setOperation(null);
-    setMessage("Circular queue cleared");
-  };
-
-  /* ---------- change capacity ---------- */
-  const resize = (newCap) => {
-    if (newCap < 1) return;
-    const newQ = Array(newCap).fill(null);
-    let idx = 0;
-    for (let i = 0; i < Math.min(count, newCap); i++) {
-      newQ[idx++] = queue[wrap(front + i)];
-    }
-    setQueue(newQ);
-    setMaxSize(newCap);
-    setFront(0);
-    setRear(idx - 1);
-    setCount(idx);
-    setMessage(`Capacity set to ${newCap}`);
-  };
-
-  /* ---------- UI ---------- */
-  return (
-    <main className="container mx-auto px-6 pt-4 pb-4">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-        Circular Queue Visualiser (Fixed Capacity)
-      </p>
-
-      <div className="max-w-4xl mx-auto">
-        {/* ----- Controls card ----- */}
-        <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 mb-8">
-          {/* Value input + Enqueue */}
-          <div className="flex flex-col sm:flex-row gap-4 mb-4">
-            <input
-              type="text"
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              placeholder="Enter value"
-              className="flex-1 p-3 border dark:border-gray-700 rounded-lg dark:bg-neutral-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
-              disabled={isAnimating}
-              onKeyDown={(e) => e.key === "Enter" && enqueue()}
-            />
-            <div className="flex items-center gap-3 text-sm text-gray-700 dark:text-gray-300">
-              <label>Capacity:</label>
-              <input
-                type="number"
-                min="1"
-                max="15"
-                value={maxSize}
-                onChange={(e) => resize(Number(e.target.value))}
-                className="w-20 p-2 border dark:border-gray-700 rounded dark:bg-neutral-900"
-                disabled={isAnimating}
-              />
-            </div>
-          </div>
-
-          {/* Action buttons */}
-          <div className="grid grid-cols-2 sm:grid-cols-5 gap-2">
-            <button
-              onClick={enqueue}
-              disabled={isAnimating || isFull}
-              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Enqueue Rear
-            </button>
-            <button
-              onClick={dequeue}
-              disabled={isAnimating || isEmpty}
-              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Dequeue Front
-            </button>
-            <button
-              onClick={checkEmpty}
-              disabled={isAnimating}
-              className="bg-green-500 hover:bg-green-600 text-black px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              IsEmpty
-            </button>
-            <button
-              onClick={checkFull}
-              disabled={isAnimating}
-              className="bg-green-500 hover:bg-green-600 text-black px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              IsFull
-            </button>
-            <button
-              onClick={reset}
-              disabled={isAnimating}
-              className="bg-red-500 hover:bg-red-600 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Reset
-            </button>
-          </div>
-
-          {/* Status banners */}
-          <div className="flex flex-col gap-3 mt-4 items-center">
-            {operation && (
-              <div className="p-3 rounded-lg bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-800 flex items-center gap-2 justify-center">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5 animate-spin"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-                <span>{operation}</span>
-              </div>
-            )}
-            {message && (
-              <div
-                className={`p-3 rounded-lg ${
-                  message.includes("added")
-                    ? "bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800"
-                    : message.includes("removed")
-                    ? "bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-800"
-                    : "bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-600"
-                } flex items-center gap-2 justify-center`}
-              >
-                <span>{message}</span>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* ----- Visualisation card (hidden when empty) ----- */}
-        {!isEmpty && (
-          <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700">
-            <div className="flex items-center gap-3 w-full justify-center">
-              {/* Front pointer */}
-              <div className="text-blue-600 dark:text-blue-400 font-medium flex flex-col items-center">
-                <span>Front</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </div>
-
-              {/* Elements (circular order) */}
-              <div className="flex items-center gap-4">
-                {Array.from({ length: maxSize }).map((_, idx) => {
-                  const itemIdx = wrap(front + idx);
-                  const item = queue[itemIdx];
-                  const isFront = itemIdx === front;
-                  const isRear = itemIdx === rear;
-                  return (
-                    <div key={itemIdx} className="flex flex-col items-center">
-                      <div
-                        className={`w-20 h-20 rounded-lg shadow-md flex items-center justify-center text-lg font-medium border-2 ${
-                          item === null
-                            ? "border-dashed border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900/30 text-gray-400"
-                            : isFront
-                            ? "border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200"
-                            : isRear
-                            ? "border-green-300 dark:border-green-700 bg-green-50 dark:bg-green-900/30 text-green-800 dark:text-green-200"
-                            : "border-gray-200 dark:border-gray-600 bg-white dark:bg-neutral-900"
-                        } transition-all`}
-                      >
-                        {item ?? "·"}
-                      </div>
-                      <span className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                        #{itemIdx}
-                      </span>
-                    </div>
-                  );
-                })}
-              </div>
-
-              {/* Rear pointer */}
-              <div className="text-green-600 dark:text-green-400 font-medium flex flex-col items-center">
-                <span>Rear</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </main>
-  );
-};
-
-export default CircularQueueVisualizer;
diff --git a/app/visualizer/queue/types/circular/codeBlock.jsx b/app/visualizer/queue/types/circular/codeBlock.jsx
deleted file mode 100755
index cc8da1282..000000000
--- a/app/visualizer/queue/types/circular/codeBlock.jsx
+++ /dev/null
@@ -1,664 +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: `// Circular Queue Implementation (JavaScript)
-class CircularQueue {
-  constructor(capacity) {
-    this.queue = new Array(capacity);
-    this.capacity = capacity;
-    this.front = -1;
-    this.rear = -1;
-    this.size = 0;
-  }
-
-  // Check if queue is full
-  isFull() {
-    return this.size === this.capacity;
-  }
-
-  // Check if queue is empty
-  isEmpty() {
-    return this.size === 0;
-  }
-
-  // Add element to the queue
-  enqueue(item) {
-    if (this.isFull()) {
-      console.log("Queue is full");
-      return false;
-    }
-    
-    if (this.isEmpty()) {
-      this.front = 0;
-    }
-    
-    this.rear = (this.rear + 1) % this.capacity;
-    this.queue[this.rear] = item;
-    this.size++;
-    return true;
-  }
-
-  // Remove element from the queue
-  dequeue() {
-    if (this.isEmpty()) {
-      console.log("Queue is empty");
-      return null;
-    }
-    
-    const item = this.queue[this.front];
-    this.queue[this.front] = null;
-    
-    if (this.front === this.rear) {
-      this.front = -1;
-      this.rear = -1;
-    } else {
-      this.front = (this.front + 1) % this.capacity;
-    }
-    
-    this.size--;
-    return item;
-  }
-
-  // Get front element without removing it
-  peek() {
-    if (this.isEmpty()) {
-      console.log("Queue is empty");
-      return null;
-    }
-    return this.queue[this.front];
-  }
-
-  // Print queue contents
-  print() {
-    if (this.isEmpty()) {
-      console.log("Queue is empty");
-      return;
-    }
-    
-    let i = this.front;
-    let output = [];
-    
-    while (true) {
-      output.push(this.queue[i]);
-      if (i === this.rear) break;
-      i = (i + 1) % this.capacity;
-    }
-    
-    console.log("Queue contents:", output.join(' -> '));
-    console.log("Front index:", this.front, "Rear index:", this.rear);
-  }
-}
-
-// Usage
-const queue = new CircularQueue(5);
-queue.enqueue(10);
-queue.enqueue(20);
-queue.enqueue(30);
-queue.enqueue(40);
-queue.enqueue(50);
-queue.print(); // 10 -> 20 -> 30 -> 40 -> 50
-console.log("Dequeued:", queue.dequeue()); // 10
-queue.enqueue(60);
-queue.print(); // 20 -> 30 -> 40 -> 50 -> 60
-console.log("Front element:", queue.peek()); // 20`,
-
-    python: `# Circular Queue Implementation (Python)
-class CircularQueue:
-    def __init__(self, capacity):
-        self.queue = [None] * capacity
-        self.capacity = capacity
-        self.front = -1
-        self.rear = -1
-        self.size = 0
-    
-    def is_full(self):
-        return self.size == self.capacity
-    
-    def is_empty(self):
-        return self.size == 0
-    
-    def enqueue(self, item):
-        if self.is_full():
-            print("Queue is full")
-            return False
-        
-        if self.is_empty():
-            self.front = 0
-        
-        self.rear = (self.rear + 1) % self.capacity
-        self.queue[self.rear] = item
-        self.size += 1
-        return True
-    
-    def dequeue(self):
-        if self.is_empty():
-            print("Queue is empty")
-            return None
-        
-        item = self.queue[self.front]
-        self.queue[self.front] = None
-        
-        if self.front == self.rear:
-            self.front = -1
-            self.rear = -1
-        else:
-            self.front = (self.front + 1) % self.capacity
-        
-        self.size -= 1
-        return item
-    
-    def peek(self):
-        if self.is_empty():
-            print("Queue is empty")
-            return None
-        return self.queue[self.front]
-    
-    def print_queue(self):
-        if self.is_empty():
-            print("Queue is empty")
-            return
-        
-        i = self.front
-        output = []
-        
-        while True:
-            output.append(str(self.queue[i]))
-            if i == self.rear:
-                break
-            i = (i + 1) % self.capacity
-        
-        print("Queue contents:", " -> ".join(output))
-        print(f"Front index: {self.front}, Rear index: {self.rear}")
-
-# Usage
-queue = CircularQueue(5)
-queue.enqueue(10)
-queue.enqueue(20)
-queue.enqueue(30)
-queue.enqueue(40)
-queue.enqueue(50)
-queue.print_queue()  # 10 -> 20 -> 30 -> 40 -> 50
-print("Dequeued:", queue.dequeue())  # 10
-queue.enqueue(60)
-queue.print_queue()  # 20 -> 30 -> 40 -> 50 -> 60
-print("Front element:", queue.peek())  # 20`,
-
-    java: `// Circular Queue Implementation (Java)
-public class CircularQueue {
-    private int[] queue;
-    private int capacity;
-    private int front;
-    private int rear;
-    private int size;
-    
-    public CircularQueue(int capacity) {
-        this.queue = new int[capacity];
-        this.capacity = capacity;
-        this.front = -1;
-        this.rear = -1;
-        this.size = 0;
-    }
-    
-    public boolean isFull() {
-        return size == capacity;
-    }
-    
-    public boolean isEmpty() {
-        return size == 0;
-    }
-    
-    public boolean enqueue(int item) {
-        if (isFull()) {
-            System.out.println("Queue is full");
-            return false;
-        }
-        
-        if (isEmpty()) {
-            front = 0;
-        }
-        
-        rear = (rear + 1) % capacity;
-        queue[rear] = item;
-        size++;
-        return true;
-    }
-    
-    public Integer dequeue() {
-        if (isEmpty()) {
-            System.out.println("Queue is empty");
-            return null;
-        }
-        
-        int item = queue[front];
-        
-        if (front == rear) {
-            front = -1;
-            rear = -1;
-        } else {
-            front = (front + 1) % capacity;
-        }
-        
-        size--;
-        return item;
-    }
-    
-    public Integer peek() {
-        if (isEmpty()) {
-            System.out.println("Queue is empty");
-            return null;
-        }
-        return queue[front];
-    }
-    
-    public void print() {
-        if (isEmpty()) {
-            System.out.println("Queue is empty");
-            return;
-        }
-        
-        int i = front;
-        StringBuilder output = new StringBuilder();
-        
-        while (true) {
-            output.append(queue[i]);
-            if (i == rear) break;
-            output.append(" -> ");
-            i = (i + 1) % capacity;
-        }
-        
-        System.out.println("Queue contents: " + output);
-        System.out.println("Front index: " + front + ", Rear index: " + rear);
-    }
-
-    public static void main(String[] args) {
-        CircularQueue queue = new CircularQueue(5);
-        queue.enqueue(10);
-        queue.enqueue(20);
-        queue.enqueue(30);
-        queue.enqueue(40);
-        queue.enqueue(50);
-        queue.print(); // 10 -> 20 -> 30 -> 40 -> 50
-        System.out.println("Dequeued: " + queue.dequeue()); // 10
-        queue.enqueue(60);
-        queue.print(); // 20 -> 30 -> 40 -> 50 -> 60
-        System.out.println("Front element: " + queue.peek()); // 20
-    }
-}`,
-
-    c: `// Circular Queue Implementation (C)
-#include <stdio.h>
-#include <stdbool.h>
-
-typedef struct {
-    int* queue;
-    int capacity;
-    int front;
-    int rear;
-    int size;
-} CircularQueue;
-
-void initialize(CircularQueue* q, int capacity) {
-    q->queue = (int*)malloc(capacity * sizeof(int));
-    q->capacity = capacity;
-    q->front = -1;
-    q->rear = -1;
-    q->size = 0;
-}
-
-bool isFull(CircularQueue* q) {
-    return q->size == q->capacity;
-}
-
-bool isEmpty(CircularQueue* q) {
-    return q->size == 0;
-}
-
-bool enqueue(CircularQueue* q, int item) {
-    if (isFull(q)) {
-        printf("Queue is full\n");
-        return false;
-    }
-    
-    if (isEmpty(q)) {
-        q->front = 0;
-    }
-    
-    q->rear = (q->rear + 1) % q->capacity;
-    q->queue[q->rear] = item;
-    q->size++;
-    return true;
-}
-
-int dequeue(CircularQueue* q) {
-    if (isEmpty(q)) {
-        printf("Queue is empty\n");
-        return -1;
-    }
-    
-    int item = q->queue[q->front];
-    
-    if (q->front == q->rear) {
-        q->front = -1;
-        q->rear = -1;
-    } else {
-        q->front = (q->front + 1) % q->capacity;
-    }
-    
-    q->size--;
-    return item;
-}
-
-int peek(CircularQueue* q) {
-    if (isEmpty(q)) {
-        printf("Queue is empty\n");
-        return -1;
-    }
-    return q->queue[q->front];
-}
-
-void print(CircularQueue* q) {
-    if (isEmpty(q)) {
-        printf("Queue is empty\n");
-        return;
-    }
-    
-    int i = q->front;
-    printf("Queue contents: ");
-    
-    while (true) {
-        printf("%d", q->queue[i]);
-        if (i == q->rear) break;
-        printf(" -> ");
-        i = (i + 1) % q->capacity;
-    }
-    
-    printf("\nFront index: %d, Rear index: %d\n", q->front, q->rear);
-}
-
-void destroy(CircularQueue* q) {
-    free(q->queue);
-}
-
-int main() {
-    CircularQueue queue;
-    initialize(&queue, 5);
-    
-    enqueue(&queue, 10);
-    enqueue(&queue, 20);
-    enqueue(&queue, 30);
-    enqueue(&queue, 40);
-    enqueue(&queue, 50);
-    print(&queue); // 10 -> 20 -> 30 -> 40 -> 50
-    printf("Dequeued: %d\n", dequeue(&queue)); // 10
-    enqueue(&queue, 60);
-    print(&queue); // 20 -> 30 -> 40 -> 50 -> 60
-    printf("Front element: %d\n", peek(&queue)); // 20
-    
-    destroy(&queue);
-    return 0;
-}`,
-
-    cpp: `// Circular Queue Implementation (C++)
-#include <iostream>
-using namespace std;
-
-class CircularQueue {
-private:
-    int* queue;
-    int capacity;
-    int front;
-    int rear;
-    int size;
-    
-public:
-    CircularQueue(int cap) : capacity(cap), front(-1), rear(-1), size(0) {
-        queue = new int[capacity];
-    }
-    
-    ~CircularQueue() {
-        delete[] queue;
-    }
-    
-    bool isFull() const {
-        return size == capacity;
-    }
-    
-    bool isEmpty() const {
-        return size == 0;
-    }
-    
-    bool enqueue(int item) {
-        if (isFull()) {
-            cout << "Queue is full" << endl;
-            return false;
-        }
-        
-        if (isEmpty()) {
-            front = 0;
-        }
-        
-        rear = (rear + 1) % capacity;
-        queue[rear] = item;
-        size++;
-        return true;
-    }
-    
-    int dequeue() {
-        if (isEmpty()) {
-            cout << "Queue is empty" << endl;
-            return -1;
-        }
-        
-        int item = queue[front];
-        
-        if (front == rear) {
-            front = -1;
-            rear = -1;
-        } else {
-            front = (front + 1) % capacity;
-        }
-        
-        size--;
-        return item;
-    }
-    
-    int peek() const {
-        if (isEmpty()) {
-            cout << "Queue is empty" << endl;
-            return -1;
-        }
-        return queue[front];
-    }
-    
-    void print() const {
-        if (isEmpty()) {
-            cout << "Queue is empty" << endl;
-            return;
-        }
-        
-        int i = front;
-        cout << "Queue contents: ";
-        
-        while (true) {
-            cout << queue[i];
-            if (i == rear) break;
-            cout << " -> ";
-            i = (i + 1) % capacity;
-        }
-        
-        cout << "\nFront index: " << front << ", Rear index: " << rear << endl;
-    }
-};
-
-int main() {
-    CircularQueue queue(5);
-    
-    queue.enqueue(10);
-    queue.enqueue(20);
-    queue.enqueue(30);
-    queue.enqueue(40);
-    queue.enqueue(50);
-    queue.print(); // 10 -> 20 -> 30 -> 40 -> 50
-    cout << "Dequeued: " << queue.dequeue() << endl; // 10
-    queue.enqueue(60);
-    queue.print(); // 20 -> 30 -> 40 -> 50 -> 60
-    cout << "Front element: " << queue.peek() << 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">
-                 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
diff --git a/app/visualizer/queue/types/circular/content.jsx b/app/visualizer/queue/types/circular/content.jsx
deleted file mode 100755
index b0544e3cc..000000000
--- a/app/visualizer/queue/types/circular/content.jsx
+++ /dev/null
@@ -1,291 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem("theme") || "light";
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener("storage", updateTheme);
-    window.addEventListener("themeChange", updateTheme);
-
-    return () => {
-      window.removeEventListener("storage", updateTheme);
-      window.removeEventListener("themeChange", updateTheme);
-    };
-  }, []);
-
-  const paragraph = [
-    `A Circular Queue is an advanced version of a linear queue that connects the end of the queue back to the front, forming a circle. This efficient structure prevents memory wastage and allows better utilization of fixed-size buffers.`,
-    `The circular queue is an essential data structure for systems requiring efficient, fixed-size buffers with constant-time operations. Its circular nature solves the memory wastage problem of linear queues while maintaining simple and predictable performance characteristics, making it ideal for low-level system programming and real-time applications.`,
-  ];
-
-  const characteristics = [
-    { points : "Fixed capacity: Size is predetermined at creation" },
-    { points : "Two pointers:",
-      subpoints : [
-        "Front: Points to the first element",
-        "Rear: Points to the last element",
-      ],
-     },
-    { points : "Circular behavior: When pointers reach the end, they wrap around to the start" },
-    { points : "Efficient space utilization: Reuses empty spaces created after dequeues" },
-  ];
-
-  const implementation = [
-    { points : "Pointer Movement:", 
-      subpoints : [
-        "front = (front + 1) % capacity",
-        "rear = (rear + 1) % capacity",
-      ],
-    },
-    { points : "Full/Empty Conditions:", 
-      subpoints : [
-        "Full: (rear + 1) % capacity == front",
-        "Empty: front == rear",
-      ],
-    },
-    { points : "Always one empty slot:", 
-      subpoints : [
-        "Needed to distinguish between full and empty states",
-      ],
-    },
-  ];
-
-  const complexity = [
-    { points : "enqueue(): O(1)" },
-    { points : "dequeue(): O(1)" },
-    { points : "peekFront(): O(1)" },
-    { points : "peekRear(): O(1)" },
-    { points : "isEmpty(): O(1)" },
-    { points : "isFull(): O(1)" },
-  ];
-
-  const application = [
-    { points : "CPU Scheduling: Round-robin scheduling algorithms" },
-    { points : "Memory Management: Circular buffers in memory systems" },
-    { points : "Traffic Systems: Controlling the flow of traffic signals" },
-    { points : "Data Streams: Handling continuous data streams (audio/video buffers)" },
-    { points : "Producer-Consumer Problems: Where producers and consumers operate at different rates" },
-  ];
-
-  const advantages = [
-    { points : "Better memory utilization: Reuses empty spaces" },
-    { points : "Efficient operations: No need to shift elements" },
-    { points : "Fixed memory footprint: Predictable memory usage" },
-    { points : "Real-time systems friendly: Bounded execution time" },
-  ];
-
-    return (
-          <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-    {/* What is a Circular Queue? */}
-    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-        What is a Circular Queue?
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-          {paragraph[0]}
-        </p>
-      </div>
-    </section>
-
-    {/* Key Characteristics */}
-    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-        Key Characteristics
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-          Circular queues have these fundamental properties:
-        </p>
-        <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {characteristics.map((item, index) => (
-            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-              {item.points}
-              {item.subpoints && (
-                <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                  {item.subpoints.map((subitem, subindex) => (
-                    <li key={subindex} className="text-[#6b7280] dark:text-[#9ca3af]">
-                      {subitem}
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </li>
-          ))}
-        </ol>
-      </div>
-    </section>
-
-    {/* Implementation Details */}
-    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-        Implementation Details
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-          Key implementation aspects:
-        </p>
-        <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {implementation.map((item, index) => (
-            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-              <span className="font-semibold">{item.points}</span>
-              {item.subpoints && (
-                <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                  {item.subpoints.map((subitem, subindex) => (
-                    <li key={subindex} className="text-[#6b7280] dark:text-[#9ca3af]">
-                      {subitem}
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </li>
-          ))}
-        </ol>
-      </div>
-    </section>
-
-    {/* Time Complexity */}
-    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-        Time Complexity
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {complexity.map((item, index) => (
-            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-              <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
-                {item.points.split(':')[0]}:
-              </span>
-              <span className="ml-2">{item.points.split(':')[1]}</span>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
-
-    {/* Applications */}
-    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-        Applications
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-          Circular queues are used in:
-        </p>
-        <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {application.map((item, index) => (
-            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-              {item.points}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
-
-    {/* Advantages Over Linear Queue */}
-    <section className="p-6">
-      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-        Advantages Over Linear Queue
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {advantages.map((item, index) => (
-            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-              {item.points}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
-
-    {/* Additional Info */}
-    <section className="p-6 border-t border-[#f3f4f6] dark:border-[#1e1e1e]">
-      <div className="prose dark:prose-invert max-w-none">
-        <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-          <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-            {paragraph[1]}
-          </p>
-        </div>
-      </div>
-    </section>
-  </article>
-
-  {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-</main>
-    );
-  };
-  
-  export default content;
\ No newline at end of file
diff --git a/app/visualizer/queue/types/circular/page.jsx b/app/visualizer/queue/types/circular/page.jsx
deleted file mode 100755
index cc37a8d57..000000000
--- a/app/visualizer/queue/types/circular/page.jsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import Animation from "@/app/visualizer/queue/types/circular/animation";
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/queue/types/circular/content";
-import Quiz from "@/app/visualizer/queue/types/circular/quiz";
-import Code from "@/app/visualizer/queue/types/circular/codeBlock";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-import ExploreOther from "@/app/components/ui/exploreOther";
-import Footer from "@/app/components/footer";
-import BackToTop from "@/app/components/ui/backtotop";
-
-export const metadata = {
-  title: "Circular Queue | Learn with JS, C, Python, Java Code",
-  description:
-    "Understand how Circular Queue works in Data Structures using animations and complete code examples in JavaScript, C, Python, and Java. Ideal for DSA beginners and interview preparation.",
-  keywords: [
-    "Circular Queue",
-    "Circular Queue Visualizer",
-    "Circular Queue DSA",
-    "Circular Queue in JavaScript",
-    "Circular Queue in C",
-    "Circular Queue in Python",
-    "Circular Queue in Java",
-    "Queue Data Structure",
-    "DSA Queue Operations",
-    "Learn Circular Queue",
-    "Circular Queue Code Examples",
-    "DSA Visualizer",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/queue/circularQueue.png",
-        width: 1200,
-        height: 630,
-        alt: "Circular Queue Algorithm Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Circular Queue", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Queue
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Circular Queue
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section className="px-6">
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.circularQueue}
-            title="Circular Queue"
-            description="Mark Circular Queue as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section className="px-6">
-          <ExploreOther
-            title="Explore Other Types"
-            links={[
-              { text: "Single Ended Queue", url: "./singleEnded" },
-              { text: "Double Ended Queue", url: "./deque" },
-              { text: "Multiple Queue", url: "./multiple" },
-              { text: "Priority Queue", url: "./priority" },
-            ]}
-          />
-        </section>
-      </div>
-
-      <BackToTop />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/queue/types/circular/quiz.jsx b/app/visualizer/queue/types/circular/quiz.jsx
deleted file mode 100755
index 9b88db919..000000000
--- a/app/visualizer/queue/types/circular/quiz.jsx
+++ /dev/null
@@ -1,384 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const QueueQuiz = () => {
-  const questions = [
-    {
-      question: "What is the primary advantage of a circular queue over a linear queue?",
-      options: [
-        "Unlimited capacity",
-        "Better memory utilization by reusing empty spaces",
-        "Faster sorting capability",
-        "Built-in search functionality"
-      ],
-      correctAnswer: 1,
-      explanation: "Circular queues efficiently reuse empty spaces created by dequeue operations, preventing memory wastage."
-    },
-    {
-      question: "How is the rear pointer calculated after an enqueue operation in a circular queue?",
-      options: [
-        "rear = rear + 1",
-        "rear = (rear + 1) % capacity",
-        "rear = front + 1",
-        "rear = capacity - 1"
-      ],
-      correctAnswer: 1,
-      explanation: "The rear pointer wraps around using modulo arithmetic: rear = (rear + 1) % capacity."
-    },
-    {
-      question: "What condition indicates that a circular queue is full?",
-      options: [
-        "front == rear",
-        "(rear + 1) % capacity == front",
-        "front == 0 && rear == capacity - 1",
-        "rear == capacity - 1"
-      ],
-      correctAnswer: 1,
-      explanation: "The queue is full when the next position after rear (wrapped around) equals front."
-    },
-    {
-      question: "Why do circular queues typically maintain one empty slot?",
-      options: [
-        "To reduce memory usage",
-        "To distinguish between full and empty states",
-        "For temporary storage during operations",
-        "It's required by the implementation language"
-      ],
-      correctAnswer: 1,
-      explanation: "Without one empty slot, the conditions for full and empty states would be identical (front == rear)."
-    },
-    {
-      question: "What is the time complexity of peekFront() in a circular queue?",
-      options: [
-        "O(1)",
-        "O(n)",
-        "O(log n)",
-        "O(n²)"
-      ],
-      correctAnswer: 0,
-      explanation: "All basic operations (enqueue, dequeue, peek) are O(1) in a circular queue."
-    }
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowIntro(true);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding circular queue advantages");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("pointer arithmetic in circular queues");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("full/empty conditions");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("circular queue implementation details");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Circular Queue concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div 
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Circular Queue Quiz
-          </h2>
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: 'spring', stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div 
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p 
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div 
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500" 
-                style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
-              />
-            </div>
-          </div>
-          
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-            
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div 
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md'
-                      : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                      selectedAnswer === index 
-                        ? 'bg-blue-500 text-white' 
-                        : 'bg-gray-200 dark:bg-gray-600'
-                    }`}>
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-            
-          </motion.div>
-          
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-            
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? 'Finish' : 'Next'} <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar 
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating() 
-                        ? 'text-yellow-400 fill-current' 
-                        : 'text-gray-300 dark:text-gray-600 fill-current'
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-            
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length ? "Perfect Score!" :
-               score >= questions.length * 0.8 ? "Excellent Work!" :
-               score >= questions.length * 0.6 ? "Good Job!" :
-               score >= questions.length * 0.4 ? "Keep Practicing!" : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}% correct
-            </p>
-          </div>
-          
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-          
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">Question Breakdown:</h4>
-            {questions.map((q, index) => (
-              <div key={index} className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0">
-                <p className="font-medium text-gray-800 dark:text-gray-200">{q.question}</p>
-                <div className={`flex items-start mt-1 ${
-                  answers[index] === q.correctAnswer 
-                    ? 'text-green-600 dark:text-green-400' 
-                    : 'text-red-600 dark:text-red-400'
-                }`}>
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">Your answer: {answers[index] !== null ? q.options[answers[index]] : "Not answered"}</p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">Correct answer: {q.options[q.correctAnswer]}</p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-          
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default QueueQuiz;
\ No newline at end of file
diff --git a/app/visualizer/queue/types/deque/animation.jsx b/app/visualizer/queue/types/deque/animation.jsx
deleted file mode 100755
index b5f980f45..000000000
--- a/app/visualizer/queue/types/deque/animation.jsx
+++ /dev/null
@@ -1,297 +0,0 @@
-"use client";
-import React, { useState } from "react";
-
-const DequeVisualizer = () => {
-  const [deque, setDeque] = useState([]);
-  const [inputValue, setInputValue] = useState("");
-  const [operation, setOperation] = useState(null);
-  const [message, setMessage] = useState("Deque is empty");
-  const [isAnimating, setIsAnimating] = useState(false);
-
-  /* ---------- helpers ---------- */
-  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
-  const showOp = async (txt, ms = 800) => {
-    setOperation(txt);
-    await sleep(ms);
-    setOperation(null);
-  };
-
-  /* ---------- enqueue front ---------- */
-  const enqueueFront = async () => {
-    if (!inputValue.trim()) {
-      setMessage("Please enter a value");
-      return;
-    }
-    setIsAnimating(true);
-    await showOp(`Enqueuing "${inputValue}" at front …`);
-    setDeque((d) => [inputValue, ...d]);
-    setMessage(`"${inputValue}" added to front`);
-    setInputValue("");
-    setIsAnimating(false);
-  };
-
-  /* ---------- enqueue rear ---------- */
-  const enqueueRear = async () => {
-    if (!inputValue.trim()) {
-      setMessage("Please enter a value");
-      return;
-    }
-    setIsAnimating(true);
-    await showOp(`Enqueuing "${inputValue}" at rear …`);
-    setDeque((d) => [...d, inputValue]);
-    setMessage(`"${inputValue}" added to rear`);
-    setInputValue("");
-    setIsAnimating(false);
-  };
-
-  /* ---------- dequeue front ---------- */
-  const dequeueFront = async () => {
-    if (deque.length === 0) {
-      setMessage("Deque is empty!");
-      return;
-    }
-    setIsAnimating(true);
-    const front = deque[0];
-    await showOp(`Dequeuing "${front}" from front …`);
-    setDeque((d) => d.slice(1));
-    setMessage(`"${front}" removed from front`);
-    setIsAnimating(false);
-  };
-
-  /* ---------- dequeue rear ---------- */
-  const dequeueRear = async () => {
-    if (deque.length === 0) {
-      setMessage("Deque is empty!");
-      return;
-    }
-    setIsAnimating(true);
-    const rear = deque[deque.length - 1];
-    await showOp(`Dequeuing "${rear}" from rear …`);
-    setDeque((d) => d.slice(0, -1));
-    setMessage(`"${rear}" removed from rear`);
-    setIsAnimating(false);
-  };
-
-  /* ---------- peek front ---------- */
-  const peekFront = async () => {
-    if (deque.length === 0) {
-      setMessage("Deque is empty!");
-      return;
-    }
-    setIsAnimating(true);
-    setMessage(`Front element: "${deque[0]}"`);
-    await sleep(1500);
-    setIsAnimating(false);
-  };
-
-  /* ---------- peek rear ---------- */
-  const peekRear = async () => {
-    if (deque.length === 0) {
-      setMessage("Deque is empty!");
-      return;
-    }
-    setIsAnimating(true);
-    setMessage(`Rear element: "${deque[deque.length - 1]}"`);
-    await sleep(1500);
-    setIsAnimating(false);
-  };
-
-  /* ---------- reset ---------- */
-  const reset = () => {
-    setDeque([]);
-    setInputValue("");
-    setOperation(null);
-    setMessage("Deque cleared");
-  };
-
-  /* ---------- UI ---------- */
-  return (
-    <main className="container mx-auto px-6 pt-4 pb-4">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-        Double-Ended Queue Visualiser
-      </p>
-
-      <div className="max-w-4xl mx-auto">
-        {/* ----- Controls card ----- */}
-        <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 mb-8">
-          {/* Value input + dual enqueue buttons */}
-          <div className="flex flex-col sm:flex-row gap-4 mb-4">
-            <input
-              type="text"
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              placeholder="Enter value"
-              className="flex-1 p-3 border dark:border-gray-700 rounded-lg dark:bg-neutral-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
-              disabled={isAnimating}
-              onKeyDown={(e) => e.key === "Enter" && enqueueRear()}
-            />
-            <button
-              onClick={enqueueFront}
-              disabled={isAnimating}
-              className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Enqueue Front
-            </button>
-            <button
-              onClick={enqueueRear}
-              disabled={isAnimating}
-              className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Enqueue Rear
-            </button>
-          </div>
-
-          {/* Action buttons */}
-          <div className="grid grid-cols-2 sm:grid-cols-5 gap-2">
-            <button
-              onClick={dequeueFront}
-              disabled={isAnimating || deque.length === 0}
-              className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Dequeue Front
-            </button>
-            <button
-              onClick={dequeueRear}
-              disabled={isAnimating || deque.length === 0}
-              className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Dequeue Rear
-            </button>
-            <button
-              onClick={peekFront}
-              disabled={isAnimating || deque.length === 0}
-              className="bg-green-500 text-black px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Peek Front
-            </button>
-            <button
-              onClick={peekRear}
-              disabled={isAnimating || deque.length === 0}
-              className="bg-green-500 text-black px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Peek Rear
-            </button>
-            <button
-              onClick={reset}
-              disabled={isAnimating}
-              className="bg-red-500 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Reset
-            </button>
-          </div>
-
-          {/* Status banners */}
-          <div className="flex flex-col gap-3 mt-4 items-center">
-            {operation && (
-              <div className="p-3 rounded-lg bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-800 flex items-center gap-2 justify-center">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5 animate-spin"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-                <span>{operation}</span>
-              </div>
-            )}
-            {message && (
-              <div
-                className={`p-3 rounded-lg ${
-                  message.includes("added")
-                    ? "bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800"
-                    : message.includes("removed") || message.includes("element:")
-                    ? "bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-800"
-                    : "bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-600"
-                } flex items-center gap-2 justify-center`}
-              >
-                <span>{message}</span>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* ----- Visualisation card (hidden when empty) ----- */}
-        {deque.length > 0 && (
-          <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700">
-            <h2 className="text-2xl font-semibold mb-6 text-center">Deque Visualisation</h2>
-
-            <div className="flex items-center gap-3 w-full justify-center">
-              {/* Front pointer */}
-              <div className="text-blue-600 dark:text-blue-400 font-medium flex flex-col items-center">
-                <span>Front</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </div>
-
-              {/* Elements */}
-              <div className="flex items-center gap-4">
-                {deque.map((item, index) => (
-                  <div
-                    key={index}
-                    className={`transition-all duration-300 ${
-                      index === 0 && operation?.includes("Dequeuing") && operation?.includes("front")
-                        ? "animate-pulse scale-110"
-                        : index === deque.length - 1 && operation?.includes("Dequeuing") && operation?.includes("rear")
-                        ? "animate-pulse scale-110"
-                        : index === 0 && operation?.includes("Enqueuing") && operation?.includes("front")
-                        ? "animate-bounce"
-                        : index === deque.length - 1 && operation?.includes("Enqueuing") && operation?.includes("rear")
-                        ? "animate-bounce"
-                        : ""
-                    }`}
-                  >
-                    <div
-                      className={`w-24 h-24 rounded-lg shadow-md flex items-center justify-center text-lg font-medium border-2 ${
-                        index === 0
-                          ? "border-blue-300 dark:border-blue-700"
-                          : index === deque.length - 1
-                          ? "border-green-300 dark:border-green-700"
-                          : "border-gray-200 dark:border-gray-600"
-                      } bg-white dark:bg-neutral-900`}
-                    >
-                      {item}
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {/* Rear pointer */}
-              <div className="text-green-600 dark:text-green-400 font-medium flex flex-col items-center">
-                <span>Rear</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </main>
-  );
-};
-
-export default DequeVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/queue/types/deque/codeBlock.jsx b/app/visualizer/queue/types/deque/codeBlock.jsx
deleted file mode 100755
index 28209705c..000000000
--- a/app/visualizer/queue/types/deque/codeBlock.jsx
+++ /dev/null
@@ -1,869 +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: `// Double-Ended Queue Implementation (JavaScript)
-class Deque {
-  constructor(size = 10) {
-    this.items = new Array(size);
-    this.front = -1;
-    this.rear = 0;
-    this.size = 0;
-    this.capacity = size;
-  }
-
-  // Add to front
-  addFront(item) {
-    if (this.isFull()) {
-      console.log("Deque Overflow");
-      return;
-    }
-    if (this.front === -1) {
-      this.front = 0;
-      this.rear = 0;
-    } else if (this.front === 0) {
-      this.front = this.capacity - 1;
-    } else {
-      this.front--;
-    }
-    this.items[this.front] = item;
-    this.size++;
-  }
-
-  // Add to rear
-  addRear(item) {
-    if (this.isFull()) {
-      console.log("Deque Overflow");
-      return;
-    }
-    if (this.front === -1) {
-      this.front = 0;
-      this.rear = 0;
-    } else if (this.rear === this.capacity - 1) {
-      this.rear = 0;
-    } else {
-      this.rear++;
-    }
-    this.items[this.rear] = item;
-    this.size++;
-  }
-
-  // Remove from front
-  removeFront() {
-    if (this.isEmpty()) {
-      console.log("Deque Underflow");
-      return undefined;
-    }
-    const item = this.items[this.front];
-    if (this.front === this.rear) {
-      this.front = -1;
-      this.rear = -1;
-    } else if (this.front === this.capacity - 1) {
-      this.front = 0;
-    } else {
-      this.front++;
-    }
-    this.size--;
-    return item;
-  }
-
-  // Remove from rear
-  removeRear() {
-    if (this.isEmpty()) {
-      console.log("Deque Underflow");
-      return undefined;
-    }
-    const item = this.items[this.rear];
-    if (this.front === this.rear) {
-      this.front = -1;
-      this.rear = -1;
-    } else if (this.rear === 0) {
-      this.rear = this.capacity - 1;
-    } else {
-      this.rear--;
-    }
-    this.size--;
-    return item;
-  }
-
-  // Peek front
-  peekFront() {
-    if (this.isEmpty()) {
-      console.log("Deque is empty");
-      return undefined;
-    }
-    return this.items[this.front];
-  }
-
-  // Peek rear
-  peekRear() {
-    if (this.isEmpty()) {
-      console.log("Deque is empty");
-      return undefined;
-    }
-    return this.items[this.rear];
-  }
-
-  // Check if empty
-  isEmpty() {
-    return this.size === 0;
-  }
-
-  // Check if full
-  isFull() {
-    return this.size === this.capacity;
-  }
-
-  // Get current size
-  getSize() {
-    return this.size;
-  }
-
-  // Print deque contents
-  print() {
-    if (this.isEmpty()) {
-      console.log("Deque is empty");
-      return;
-    }
-    console.log("Deque contents (front to rear):");
-    let i = this.front;
-    let count = 0;
-    while (count < this.size) {
-      console.log(this.items[i]);
-      i = (i + 1) % this.capacity;
-      count++;
-    }
-  }
-}
-
-// Usage
-const deque = new Deque(5);
-deque.addRear(10);
-deque.addFront(20);
-deque.addRear(30);
-console.log("Front element:", deque.peekFront()); // 20
-console.log("Rear element:", deque.peekRear());   // 30
-console.log("Deque size:", deque.getSize());      // 3
-deque.print();
-deque.removeFront();
-console.log("After removeFront, front element:", deque.peekFront()); // 10`,
-
-    python: `# Double-Ended Queue Implementation (Python)
-class Deque:
-    def __init__(self, size=10):
-        self.items = [None] * size
-        self.front = -1
-        self.rear = 0
-        self.size = 0
-        self.capacity = size
-    
-    def add_front(self, item):
-        if self.is_full():
-            print("Deque Overflow")
-            return
-        if self.front == -1:
-            self.front = 0
-            self.rear = 0
-        elif self.front == 0:
-            self.front = self.capacity - 1
-        else:
-            self.front -= 1
-        self.items[self.front] = item
-        self.size += 1
-    
-    def add_rear(self, item):
-        if self.is_full():
-            print("Deque Overflow")
-            return
-        if self.front == -1:
-            self.front = 0
-            self.rear = 0
-        elif self.rear == self.capacity - 1:
-            self.rear = 0
-        else:
-            self.rear += 1
-        self.items[self.rear] = item
-        self.size += 1
-    
-    def remove_front(self):
-        if self.is_empty():
-            print("Deque Underflow")
-            return None
-        item = self.items[self.front]
-        if self.front == self.rear:
-            self.front = -1
-            self.rear = -1
-        elif self.front == self.capacity - 1:
-            self.front = 0
-        else:
-            self.front += 1
-        self.size -= 1
-        return item
-    
-    def remove_rear(self):
-        if self.is_empty():
-            print("Deque Underflow")
-            return None
-        item = self.items[self.rear]
-        if self.front == self.rear:
-            self.front = -1
-            self.rear = -1
-        elif self.rear == 0:
-            self.rear = self.capacity - 1
-        else:
-            self.rear -= 1
-        self.size -= 1
-        return item
-    
-    def peek_front(self):
-        if self.is_empty():
-            print("Deque is empty")
-            return None
-        return self.items[self.front]
-    
-    def peek_rear(self):
-        if self.is_empty():
-            print("Deque is empty")
-            return None
-        return self.items[self.rear]
-    
-    def is_empty(self):
-        return self.size == 0
-    
-    def is_full(self):
-        return self.size == self.capacity
-    
-    def get_size(self):
-        return self.size
-    
-    def print_deque(self):
-        if self.is_empty():
-            print("Deque is empty")
-            return
-        print("Deque contents (front to rear):")
-        i = self.front
-        count = 0
-        while count < self.size:
-            print(self.items[i])
-            i = (i + 1) % self.capacity
-            count += 1
-
-# Usage
-deque = Deque(5)
-deque.add_rear(10)
-deque.add_front(20)
-deque.add_rear(30)
-print("Front element:", deque.peek_front())  # 20
-print("Rear element:", deque.peek_rear())    # 30
-print("Deque size:", deque.get_size())       # 3
-deque.print_deque()
-deque.remove_front()
-print("After removeFront, front element:", deque.peek_front())  # 10`,
-
-    java: `// Double-Ended Queue Implementation (Java)
-public class ArrayDeque {
-    private int[] items;
-    private int front;
-    private int rear;
-    private int size;
-    private int capacity;
-    
-    public ArrayDeque(int size) {
-        items = new int[size];
-        front = -1;
-        rear = 0;
-        size = 0;
-        capacity = size;
-    }
-    
-    public void addFront(int item) {
-        if (isFull()) {
-            System.out.println("Deque Overflow");
-            return;
-        }
-        if (front == -1) {
-            front = 0;
-            rear = 0;
-        } else if (front == 0) {
-            front = capacity - 1;
-        } else {
-            front--;
-        }
-        items[front] = item;
-        size++;
-    }
-    
-    public void addRear(int item) {
-        if (isFull()) {
-            System.out.println("Deque Overflow");
-            return;
-        }
-        if (front == -1) {
-            front = 0;
-            rear = 0;
-        } else if (rear == capacity - 1) {
-            rear = 0;
-        } else {
-            rear++;
-        }
-        items[rear] = item;
-        size++;
-    }
-    
-    public int removeFront() {
-        if (isEmpty()) {
-            System.out.println("Deque Underflow");
-            return -1;
-        }
-        int item = items[front];
-        if (front == rear) {
-            front = -1;
-            rear = -1;
-        } else if (front == capacity - 1) {
-            front = 0;
-        } else {
-            front++;
-        }
-        size--;
-        return item;
-    }
-    
-    public int removeRear() {
-        if (isEmpty()) {
-            System.out.println("Deque Underflow");
-            return -1;
-        }
-        int item = items[rear];
-        if (front == rear) {
-            front = -1;
-            rear = -1;
-        } else if (rear == 0) {
-            rear = capacity - 1;
-        } else {
-            rear--;
-        }
-        size--;
-        return item;
-    }
-    
-    public int peekFront() {
-        if (isEmpty()) {
-            System.out.println("Deque is empty");
-            return -1;
-        }
-        return items[front];
-    }
-    
-    public int peekRear() {
-        if (isEmpty()) {
-            System.out.println("Deque is empty");
-            return -1;
-        }
-        return items[rear];
-    }
-    
-    public boolean isEmpty() {
-        return size == 0;
-    }
-    
-    public boolean isFull() {
-        return size == capacity;
-    }
-    
-    public int getSize() {
-        return size;
-    }
-    
-    public void print() {
-        if (isEmpty()) {
-            System.out.println("Deque is empty");
-            return;
-        }
-        System.out.println("Deque contents (front to rear):");
-        int i = front;
-        int count = 0;
-        while (count < size) {
-            System.out.println(items[i]);
-            i = (i + 1) % capacity;
-            count++;
-        }
-    }
-
-    public static void main(String[] args) {
-        ArrayDeque deque = new ArrayDeque(5);
-        deque.addRear(10);
-        deque.addFront(20);
-        deque.addRear(30);
-        System.out.println("Front element: " + deque.peekFront()); // 20
-        System.out.println("Rear element: " + deque.peekRear());   // 30
-        System.out.println("Deque size: " + deque.getSize());      // 3
-        deque.print();
-        deque.removeFront();
-        System.out.println("After removeFront, front element: " + deque.peekFront()); // 10
-    }
-}`,
-
-    c: `// Double-Ended Queue Implementation (C)
-#include <stdio.h>
-#include <stdlib.h>
-#include <stdbool.h>
-
-typedef struct {
-    int *items;
-    int front;
-    int rear;
-    int size;
-    int capacity;
-} Deque;
-
-void initialize(Deque *dq, int capacity) {
-    dq->items = (int*)malloc(capacity * sizeof(int));
-    dq->front = -1;
-    dq->rear = 0;
-    dq->size = 0;
-    dq->capacity = capacity;
-}
-
-bool isFull(Deque *dq) {
-    return dq->size == dq->capacity;
-}
-
-bool isEmpty(Deque *dq) {
-    return dq->size == 0;
-}
-
-void addFront(Deque *dq, int item) {
-    if (isFull(dq)) {
-        printf("Deque Overflow\n");
-        return;
-    }
-    if (dq->front == -1) {
-        dq->front = 0;
-        dq->rear = 0;
-    } else if (dq->front == 0) {
-        dq->front = dq->capacity - 1;
-    } else {
-        dq->front--;
-    }
-    dq->items[dq->front] = item;
-    dq->size++;
-}
-
-void addRear(Deque *dq, int item) {
-    if (isFull(dq)) {
-        printf("Deque Overflow\n");
-        return;
-    }
-    if (dq->front == -1) {
-        dq->front = 0;
-        dq->rear = 0;
-    } else if (dq->rear == dq->capacity - 1) {
-        dq->rear = 0;
-    } else {
-        dq->rear++;
-    }
-    dq->items[dq->rear] = item;
-    dq->size++;
-}
-
-int removeFront(Deque *dq) {
-    if (isEmpty(dq)) {
-        printf("Deque Underflow\n");
-        return -1;
-    }
-    int item = dq->items[dq->front];
-    if (dq->front == dq->rear) {
-        dq->front = -1;
-        dq->rear = -1;
-    } else if (dq->front == dq->capacity - 1) {
-        dq->front = 0;
-    } else {
-        dq->front++;
-    }
-    dq->size--;
-    return item;
-}
-
-int removeRear(Deque *dq) {
-    if (isEmpty(dq)) {
-        printf("Deque Underflow\n");
-        return -1;
-    }
-    int item = dq->items[dq->rear];
-    if (dq->front == dq->rear) {
-        dq->front = -1;
-        dq->rear = -1;
-    } else if (dq->rear == 0) {
-        dq->rear = dq->capacity - 1;
-    } else {
-        dq->rear--;
-    }
-    dq->size--;
-    return item;
-}
-
-int peekFront(Deque *dq) {
-    if (isEmpty(dq)) {
-        printf("Deque is empty\n");
-        return -1;
-    }
-    return dq->items[dq->front];
-}
-
-int peekRear(Deque *dq) {
-    if (isEmpty(dq)) {
-        printf("Deque is empty\n");
-        return -1;
-    }
-    return dq->items[dq->rear];
-}
-
-int size(Deque *dq) {
-    return dq->size;
-}
-
-void print(Deque *dq) {
-    if (isEmpty(dq)) {
-        printf("Deque is empty\n");
-        return;
-    }
-    printf("Deque contents (front to rear):\n");
-    int i = dq->front;
-    int count = 0;
-    while (count < dq->size) {
-        printf("%d\n", dq->items[i]);
-        i = (i + 1) % dq->capacity;
-        count++;
-    }
-}
-
-void destroy(Deque *dq) {
-    free(dq->items);
-}
-
-int main() {
-    Deque deque;
-    initialize(&deque, 5);
-    
-    addRear(&deque, 10);
-    addFront(&deque, 20);
-    addRear(&deque, 30);
-    printf("Front element: %d\n", peekFront(&deque)); // 20
-    printf("Rear element: %d\n", peekRear(&deque));   // 30
-    printf("Deque size: %d\n", size(&deque));        // 3
-    print(&deque);
-    removeFront(&deque);
-    printf("After removeFront, front element: %d\n", peekFront(&deque)); // 10
-    
-    destroy(&deque);
-    return 0;
-}`,
-
-    cpp: `// Double-Ended Queue Implementation (C++)
-#include <iostream>
-using namespace std;
-
-class Deque {
-private:
-    int *items;
-    int front;
-    int rear;
-    int size;
-    int capacity;
-    
-public:
-    Deque(int size) {
-        items = new int[size];
-        front = -1;
-        rear = 0;
-        size = 0;
-        capacity = size;
-    }
-    
-    ~Deque() {
-        delete[] items;
-    }
-    
-    void addFront(int item) {
-        if (isFull()) {
-            cout << "Deque Overflow" << endl;
-            return;
-        }
-        if (front == -1) {
-            front = 0;
-            rear = 0;
-        } else if (front == 0) {
-            front = capacity - 1;
-        } else {
-            front--;
-        }
-        items[front] = item;
-        size++;
-    }
-    
-    void addRear(int item) {
-        if (isFull()) {
-            cout << "Deque Overflow" << endl;
-            return;
-        }
-        if (front == -1) {
-            front = 0;
-            rear = 0;
-        } else if (rear == capacity - 1) {
-            rear = 0;
-        } else {
-            rear++;
-        }
-        items[rear] = item;
-        size++;
-    }
-    
-    int removeFront() {
-        if (isEmpty()) {
-            cout << "Deque Underflow" << endl;
-            return -1;
-        }
-        int item = items[front];
-        if (front == rear) {
-            front = -1;
-            rear = -1;
-        } else if (front == capacity - 1) {
-            front = 0;
-        } else {
-            front++;
-        }
-        size--;
-        return item;
-    }
-    
-    int removeRear() {
-        if (isEmpty()) {
-            cout << "Deque Underflow" << endl;
-            return -1;
-        }
-        int item = items[rear];
-        if (front == rear) {
-            front = -1;
-            rear = -1;
-        } else if (rear == 0) {
-            rear = capacity - 1;
-        } else {
-            rear--;
-        }
-        size--;
-        return item;
-    }
-    
-    int peekFront() {
-        if (isEmpty()) {
-            cout << "Deque is empty" << endl;
-            return -1;
-        }
-        return items[front];
-    }
-    
-    int peekRear() {
-        if (isEmpty()) {
-            cout << "Deque is empty" << endl;
-            return -1;
-        }
-        return items[rear];
-    }
-    
-    bool isEmpty() {
-        return size == 0;
-    }
-    
-    bool isFull() {
-        return size == capacity;
-    }
-    
-    int getSize() {
-        return size;
-    }
-    
-    void print() {
-        if (isEmpty()) {
-            cout << "Deque is empty" << endl;
-            return;
-        }
-        cout << "Deque contents (front to rear):" << endl;
-        int i = front;
-        int count = 0;
-        while (count < size) {
-            cout << items[i] << endl;
-            i = (i + 1) % capacity;
-            count++;
-        }
-    }
-};
-
-int main() {
-    Deque deque(5);
-    deque.addRear(10);
-    deque.addFront(20);
-    deque.addRear(30);
-    cout << "Front element: " << deque.peekFront() << endl; // 20
-    cout << "Rear element: " << deque.peekRear() << endl;   // 30
-    cout << "Deque size: " << deque.getSize() << endl;      // 3
-    deque.print();
-    deque.removeFront();
-    cout << "After removeFront, front element: " << deque.peekFront() << endl; // 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-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
diff --git a/app/visualizer/queue/types/deque/content.jsx b/app/visualizer/queue/types/deque/content.jsx
deleted file mode 100755
index 758d43d32..000000000
--- a/app/visualizer/queue/types/deque/content.jsx
+++ /dev/null
@@ -1,326 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem("theme") || "light";
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener("storage", updateTheme);
-    window.addEventListener("themeChange", updateTheme);
-
-    return () => {
-      window.removeEventListener("storage", updateTheme);
-      window.removeEventListener("themeChange", updateTheme);
-    };
-  }, []);
-
-  const paragraph = [
-    `A Double-Ended Queue (Deque) is a versatile data structure that allows insertion and deletion of elements from both ends (front and rear). Unlike a single-ended queue, it provides more flexibility while maintaining efficient O(1) operations.`,
-    `The double-ended queue is a powerful hybrid data structure that combines the best features of stacks and queues. Its flexibility makes it invaluable for algorithms requiring access to both ends of a dataset, while maintaining efficient constant-time operations for all key functions.`,
-  ];
-
-  const characteristics = [
-    {
-      points: "Two open ends:",
-      subpoints: ["Supports operations at both front and rear"],
-    },
-    {
-      points: "Four core operations:",
-      subpoints: [
-        "addFront() - Insert at front",
-        "addRear() - Insert at rear",
-        "removeFront() - Delete from front",
-        "removeRear() - Delete from rear",
-      ],
-    },
-    {
-      points: "Hybrid nature:",
-      subpoints: ["Combines features of both stacks and queues"],
-    },
-  ];
-
-  const variations = [
-    {
-      points: "Doubly Linked List:",
-      subpoints: [
-        "Natural fit with head and tail pointers",
-        "All operations are O(1)",
-        "Extra memory for previous/next pointers",
-      ],
-    },
-    {
-      points: "Circular Array:",
-      subpoints: [
-        "Fixed capacity but efficient",
-        "Requires careful index management",
-        "Good for memory-constrained environments",
-      ],
-    },
-    {
-      points: "Dynamic Array:",
-      subpoints: ["Amortized O(1) operations", "May need occasional resizing"],
-    },
-  ];
-
-  const complexity = [
-    { points: "addFront(): O(1)" },
-    { points: "addRear(): O(1)" },
-    { points: "removeFront(): O(1)" },
-    { points: "removeRear(): O(1)" },
-    { points: "peekFront(): O(1)" },
-    { points: "peekRear(): O(1)" },
-  ];
-
-  const application = [
-    { points: "Undo/Redo operations: Store history at both ends" },
-    { points: "Palindrome checking: Compare front and rear elements" },
-    { points: "Steal algorithms: Work stealing in parallel processing" },
-    { points: "Sliding window problems: Efficient maximum/minimum tracking" },
-    { points: "Browser history: Navigation in both directions" },
-  ];
-
-  const cases = [
-    { points: "Input-Restricted Deque: Insertion only at one end" },
-    { points: "Output-Restricted Deque: Deletion only at one end" },
-    { points: "Palindrome Checker: Using deque properties" },
-    { points: "Priority Deque: Combines deque and priority queue features" },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* What is a Double-Ended Queue (Deque)? */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            What is a Double-Ended Queue (Deque)?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraph[0]}
-            </p>
-          </div>
-        </section>
-
-        {/* Key Characteristics */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Key Characteristics
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Deques have these fundamental properties:
-            </p>
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {characteristics.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                  {item.subpoints && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {item.subpoints.map((subitem, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitem}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Implementation Variations */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Implementation Variations
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Common implementation approaches:
-            </p>
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {variations.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-semibold">{item.points}</span>
-                  {item.subpoints && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {item.subpoints.map((subitem, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitem}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Time Complexity */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Time Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {complexity.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
-                    {item.points.split(":")[0]}:
-                  </span>
-                  <span className="ml-2">{item.points.split(":")[1]}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Applications */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Applications
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Deques are used in:
-            </p>
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {application.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Special Cases */}
-        <section className="p-6">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Special Cases
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Interesting deque variations:
-            </p>
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {cases.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Additional Info */}
-        <section className="p-6 border-t border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <div className="prose dark:prose-invert max-w-none">
-            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                {paragraph[1]}
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
diff --git a/app/visualizer/queue/types/deque/page.jsx b/app/visualizer/queue/types/deque/page.jsx
deleted file mode 100755
index f385ffec8..000000000
--- a/app/visualizer/queue/types/deque/page.jsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import Animation from "@/app/visualizer/queue/types/deque/animation";
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/queue/types/deque/content";
-import Quiz from "@/app/visualizer/queue/types/deque/quiz";
-import Code from "@/app/visualizer/queue/types/deque/codeBlock";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Footer from '@/app/components/footer';
-import BackToTop from '@/app/components/ui/backtotop';
-
-export const metadata = {
-  title: "Double Ended Queue (Deque) | Learn with JS, C, Python, Java Code",
-  description:
-    "Explore Double Ended Queue (Deque) in Data Structures with visual animations and full code implementations in JavaScript, C, Python, and Java. Perfect for mastering DSA concepts and interview preparation.",
-  keywords: [
-    "Double Ended Queue",
-    "Double Ended Queue Visualizer",
-    "Deque in DSA",
-    "DSA Deque",
-    "Double Ended Queue in JavaScript",
-    "Deque in C",
-    "Deque in Python",
-    "Deque in Java",
-    "DSA Queue Operations",
-    "Learn Deque DSA",
-    "Deque Code Examples",
-    "DSA Visualizer",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/queue/deque.png",
-        width: 1200,
-        height: 630,
-        alt: "Double Ended Queue Algorithm Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Queue : Double Ended", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Queue
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Double Ended
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section className="px-6">
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.doubleEnded}
-            title="Double Ended"
-            description="Mark Double Ended Queue as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section className="px-6">
-          <ExploreOther
-          title="Explore Other Types"
-          links={[
-            { text: "Single Ended Queue", url: "./singleEnded" },
-            { text: "Circular Queue", url: "./circular" },
-            { text: "Multiple Queue", url: "./multiple" },
-            { text: "Priority Queue", url: "./priority" },
-          ]}
-        />
-        </section>
-      </div>
-
-      <BackToTop />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/queue/types/deque/quiz.jsx b/app/visualizer/queue/types/deque/quiz.jsx
deleted file mode 100755
index f87b9b9b1..000000000
--- a/app/visualizer/queue/types/deque/quiz.jsx
+++ /dev/null
@@ -1,384 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const QueueQuiz = () => {
-  const questions = [
-    {
-      question: "What is the key characteristic that distinguishes a deque from a single-ended queue?",
-      options: [
-        "Allows operations at only one end",
-        "Allows operations at both ends", 
-        "Only allows insertion at one end and removal at the other",
-        "Uses LIFO principle exclusively"
-      ],
-      correctAnswer: 1,
-      explanation: "Deques allow insertion and removal at both front and rear ends, unlike single-ended queues which are restricted to rear insertion and front removal."
-    },
-    {
-      question: "Which of the following is NOT a standard deque operation?",
-      options: [
-        "addFront()",
-        "addRear()", 
-        "removeMiddle()",
-        "removeRear()"
-      ],
-      correctAnswer: 2,
-      explanation: "Deques don't typically support direct middle removal - their core operations work at the two ends only."
-    },
-    {
-      question: "What would be the result of these operations on an empty deque? addFront(10), addRear(20), removeFront()",
-      options: [
-        "10",
-        "20", 
-        "[10, 20]",
-        "Empty deque"
-      ],
-      correctAnswer: 1,
-      explanation: "addFront(10) → [10], addRear(20) → [10, 20], removeFront() removes 10, leaving 20 as the return value."
-    },
-    {
-      question: "Which data structure is most commonly used to implement a deque efficiently?",
-      options: [
-        "Singly Linked List",
-        "Binary Tree", 
-        "Doubly Linked List",
-        "Hash Table"
-      ],
-      correctAnswer: 2,
-      explanation: "Doubly linked lists are ideal for deque implementation as they allow O(1) operations at both ends."
-    },
-    {
-      question: "What is the time complexity for removeRear() in a properly implemented deque?",
-      options: [
-        "O(1)",
-        "O(n)", 
-        "O(log n)",
-        "O(n²)"
-      ],
-      correctAnswer: 0,
-      explanation: "All core deque operations (addFront, addRear, removeFront, removeRear) should be O(1) in a proper implementation."
-    }
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowIntro(true);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding deque characteristics");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("deque operations");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("deque operation sequences");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("deque implementation");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Deque concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div 
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Deque Quiz
-          </h2>
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: 'spring', stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div 
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p 
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div 
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500" 
-                style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
-              />
-            </div>
-          </div>
-          
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-            
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div 
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md'
-                      : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                      selectedAnswer === index 
-                        ? 'bg-blue-500 text-white' 
-                        : 'bg-gray-200 dark:bg-gray-600'
-                    }`}>
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-            
-          </motion.div>
-          
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-            
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? 'Finish' : 'Next'} <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar 
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating() 
-                        ? 'text-yellow-400 fill-current' 
-                        : 'text-gray-300 dark:text-gray-600 fill-current'
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-            
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length ? "Perfect Score!" :
-               score >= questions.length * 0.8 ? "Excellent Work!" :
-               score >= questions.length * 0.6 ? "Good Job!" :
-               score >= questions.length * 0.4 ? "Keep Practicing!" : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}% correct
-            </p>
-          </div>
-          
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-          
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">Question Breakdown:</h4>
-            {questions.map((q, index) => (
-              <div key={index} className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0">
-                <p className="font-medium text-gray-800 dark:text-gray-200">{q.question}</p>
-                <div className={`flex items-start mt-1 ${
-                  answers[index] === q.correctAnswer 
-                    ? 'text-green-600 dark:text-green-400' 
-                    : 'text-red-600 dark:text-red-400'
-                }`}>
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">Your answer: {answers[index] !== null ? q.options[answers[index]] : "Not answered"}</p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">Correct answer: {q.options[q.correctAnswer]}</p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-          
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default QueueQuiz;
\ No newline at end of file
diff --git a/app/visualizer/queue/types/priority/animation.jsx b/app/visualizer/queue/types/priority/animation.jsx
deleted file mode 100755
index e4a02e4d5..000000000
--- a/app/visualizer/queue/types/priority/animation.jsx
+++ /dev/null
@@ -1,209 +0,0 @@
-"use client";
-import React, { useState } from "react";
-
-const PriorityQueueVisualizer = () => {
-  /* ---------- state ---------- */
-  const [pq, setPq] = useState([]);          // sorted: [0] = highest priority (min-val)
-  const [inputValue, setInputValue] = useState("");
-  const [inputPriority, setInputPriority] = useState("");
-  const [operation, setOperation] = useState(null);
-  const [message, setMessage] = useState("Priority queue is empty");
-  const [isAnimating, setIsAnimating] = useState(false);
-
-  /* ---------- helpers ---------- */
-  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
-  const showOp = async (txt, ms = 800) => {
-    setOperation(txt);
-    await sleep(ms);
-    setOperation(null);
-  };
-
-  /* ---------- insert ---------- */
-  const insert = async () => {
-    if (!inputValue.trim() || inputPriority === "") {
-      setMessage("Please enter both value and priority");
-      return;
-    }
-    const pri = Number(inputPriority);
-    if (isNaN(pri)) {
-      setMessage("Priority must be a number");
-      return;
-    }
-    setIsAnimating(true);
-    await showOp(`Inserting "${inputValue}" with priority ${pri} …`);
-    const newEl = { val: inputValue, pri };
-    const newPq = [...pq, newEl].sort((a, b) => a.pri - b.pri);
-    setPq(newPq);
-    setMessage(`"${inputValue}" inserted`);
-    setInputValue("");
-    setInputPriority("");
-    setIsAnimating(false);
-  };
-
-  /* ---------- extract-min ---------- */
-  const extractMin = async () => {
-    if (pq.length === 0) {
-      setMessage("Priority queue is empty!");
-      return;
-    }
-    setIsAnimating(true);
-    const minEl = pq[0];
-    await showOp(`Extracting min element "${minEl.val}" …`);
-    setPq((p) => p.slice(1));
-    setMessage(`"${minEl.val}" (priority ${minEl.pri}) removed`);
-    setIsAnimating(false);
-  };
-
-  /* ---------- peek-min ---------- */
-  const peekMin = async () => {
-    if (pq.length === 0) {
-      setMessage("Priority queue is empty!");
-      return;
-    }
-    setIsAnimating(true);
-    const minEl = pq[0];
-    setMessage(`Min element: "${minEl.val}" (priority ${minEl.pri})`);
-    await sleep(1500);
-    setIsAnimating(false);
-  };
-
-  /* ---------- clear ---------- */
-  const clear = () => {
-    setPq([]);
-    setInputValue("");
-    setInputPriority("");
-    setOperation(null);
-    setMessage("Priority queue cleared");
-  };
-
-  /* ---------- UI ---------- */
-  return (
-    <main className="container mx-auto px-6 pt-4 pb-4">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-        Min-Priority Queue Visualiser (lower number = higher priority)
-      </p>
-
-      <div className="max-w-4xl mx-auto">
-        {/* ----- Controls card ----- */}
-        <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 mb-8">
-          {/* Inputs row */}
-          <div className="flex flex-col sm:flex-row gap-4 mb-4">
-            <input
-              type="text"
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              placeholder="Value"
-              className="flex-1 p-3 border dark:border-gray-700 rounded-lg dark:bg-neutral-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
-              disabled={isAnimating}
-            />
-            <input
-              type="number"
-              value={inputPriority}
-              onChange={(e) => setInputPriority(e.target.value)}
-              placeholder="Priority number"
-              className="flex-1 p-3 border dark:border-gray-700 rounded-lg dark:bg-neutral-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
-              disabled={isAnimating}
-            />
-          </div>
-
-          {/* Action buttons */}
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
-            <button
-              onClick={insert}
-              disabled={isAnimating}
-              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Insert
-            </button>
-            <button
-              onClick={extractMin}
-              disabled={isAnimating || pq.length === 0}
-              className="bg-green-500 hover:bg-green-600 text-black px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Extract-Min
-            </button>
-            <button
-              onClick={peekMin}
-              disabled={isAnimating || pq.length === 0}
-              className="bg-green-500 hover:bg-green-600 text-black px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Peek-Min
-            </button>
-            <button
-              onClick={clear}
-              disabled={isAnimating}
-              className="bg-red-500 hover:bg-red-600 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Reset
-            </button>
-          </div>
-
-          {/* Status banners */}
-          <div className="flex flex-col gap-3 mt-4 items-center">
-            {operation && (
-              <div className="p-3 rounded-lg bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-800 flex items-center gap-2 justify-center">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5 animate-spin"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-                <span>{operation}</span>
-              </div>
-            )}
-            {message && (
-              <div
-                className={`p-3 rounded-lg ${
-                  message.includes("inserted")
-                    ? "bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800"
-                    : message.includes("removed") || message.includes("element:")
-                    ? "bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-800"
-                    : "bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-600"
-                } flex items-center gap-2 justify-center`}
-              >
-                <span>{message}</span>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* ----- Visualisation card (hidden when empty) ----- */}
-        {pq.length > 0 && (
-          <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700">
-            <h2 className="text-2xl font-semibold mb-6 text-center">Visualisation</h2>
-
-            <div className="flex items-center gap-3 w-full justify-center flex-wrap">
-              {pq.map((el, idx) => (
-                <div
-                  key={idx}
-                  className={`transition-all duration-300 ${
-                    idx === 0 && operation?.includes("Extracting") ? "animate-pulse scale-110" : ""
-                  }`}
-                >
-                  <div
-                    className={`w-24 h-24 rounded-lg shadow-md flex flex-col items-center justify-center text-lg font-medium border-2 ${
-                      idx === 0
-                        ? "border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200"
-                        : "border-gray-200 dark:border-gray-600 bg-white dark:bg-neutral-900"
-                    }`}
-                  >
-                    <span>{el.val}</span>
-                    <span className="text-xs mt-1 opacity-70">pri: {el.pri}</span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </main>
-  );
-};
-
-export default PriorityQueueVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/queue/types/priority/codeBlock.jsx b/app/visualizer/queue/types/priority/codeBlock.jsx
deleted file mode 100755
index be83f38c4..000000000
--- a/app/visualizer/queue/types/priority/codeBlock.jsx
+++ /dev/null
@@ -1,523 +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: `// Priority Queue Implementation in JavaScript (Min-Heap)
-class PriorityQueue {
-  constructor(comparator = (a, b) => a.priority - b.priority) {
-    this.heap = [];
-    this.comparator = comparator;
-  }
-
-  // Add element to the queue
-  enqueue(value, priority) {
-    const element = { value, priority };
-    this.heap.push(element);
-    this.bubbleUp(this.heap.length - 1);
-  }
-
-  // Remove and return the highest priority element
-  dequeue() {
-    if (this.isEmpty()) return null;
-    const root = this.heap[0];
-    const last = this.heap.pop();
-    if (this.heap.length > 0) {
-      this.heap[0] = last;
-      this.bubbleDown(0);
-    }
-    return root.value;
-  }
-
-  // Peek at the highest priority element without removing it
-  peek() {
-    if (this.isEmpty()) return null;
-    return this.heap[0].value;
-  }
-
-  // Get current size of the queue
-  size() {
-    return this.heap.length;
-  }
-
-  // Check if the queue is empty
-  isEmpty() {
-    return this.heap.length === 0;
-  }
-
-  // Move element up the heap to maintain heap property
-  bubbleUp(index) {
-    while (index > 0) {
-      const parentIndex = Math.floor((index - 1) / 2);
-      if (this.comparator(this.heap[index], this.heap[parentIndex]) >= 0) break;
-      [this.heap[parentIndex], this.heap[index]] = [this.heap[index], this.heap[parentIndex]];
-      index = parentIndex;
-    }
-  }
-
-  // Move element down the heap to maintain heap property
-  bubbleDown(index) {
-    const lastIndex = this.heap.length - 1;
-    while (true) {
-      const leftChildIndex = 2 * index + 1;
-      const rightChildIndex = 2 * index + 2;
-      let smallestIndex = index;
-
-      if (leftChildIndex <= lastIndex && 
-          this.comparator(this.heap[leftChildIndex], this.heap[smallestIndex]) < 0) {
-        smallestIndex = leftChildIndex;
-      }
-
-      if (rightChildIndex <= lastIndex && 
-          this.comparator(this.heap[rightChildIndex], this.heap[smallestIndex]) < 0) {
-        smallestIndex = rightChildIndex;
-      }
-
-      if (smallestIndex === index) break;
-      [this.heap[index], this.heap[smallestIndex]] = [this.heap[smallestIndex], this.heap[index]];
-      index = smallestIndex;
-    }
-  }
-}
-
-// Usage
-const pq = new PriorityQueue();
-pq.enqueue("Task 1", 3);  // Lower numbers = higher priority
-pq.enqueue("Task 2", 1);
-pq.enqueue("Task 3", 2);
-
-console.log(pq.dequeue()); // "Task 2" (highest priority)
-console.log(pq.peek());    // "Task 3" (next highest priority)
-console.log(pq.size());    // 2`,
-
-    python: `# Priority Queue Implementation in Python (Min-Heap)
-import heapq
-
-class PriorityQueue:
-    def __init__(self):
-        self.heap = []
-        self.index = 0  # Used to properly order elements with same priority
-        
-    def enqueue(self, value, priority):
-        heapq.heappush(self.heap, (priority, self.index, value))
-        self.index += 1
-        
-    def dequeue(self):
-        if self.is_empty():
-            return None
-        return heapq.heappop(self.heap)[2]  # Return the value
-        
-    def peek(self):
-        if self.is_empty():
-            return None
-        return self.heap[0][2]  # Return the value without removing
-        
-    def size(self):
-        return len(self.heap)
-        
-    def is_empty(self):
-        return len(self.heap) == 0
-
-# Usage
-pq = PriorityQueue()
-pq.enqueue("Task 1", 3)  # Lower numbers = higher priority
-pq.enqueue("Task 2", 1)
-pq.enqueue("Task 3", 2)
-
-print(pq.dequeue())  # "Task 2" (highest priority)
-print(pq.peek())     # "Task 3" (next highest priority)
-print(pq.size())     # 2`,
-
-    java: `// Priority Queue Implementation in Java
-import java.util.PriorityQueue;
-import java.util.Comparator;
-
-public class Main {
-    static class PriorityItem<T> {
-        T value;
-        int priority;
-        
-        public PriorityItem(T value, int priority) {
-            this.value = value;
-            this.priority = priority;
-        }
-    }
-    
-    static class PriorityQueue<T> {
-        private java.util.PriorityQueue<PriorityItem<T>> queue;
-        
-        public PriorityQueue() {
-            this.queue = new java.util.PriorityQueue<>(
-                Comparator.comparingInt(item -> item.priority)
-            );
-        }
-        
-        public void enqueue(T value, int priority) {
-            queue.add(new PriorityItem<>(value, priority));
-        }
-        
-        public T dequeue() {
-            if (isEmpty()) return null;
-            return queue.poll().value;
-        }
-        
-        public T peek() {
-            if (isEmpty()) return null;
-            return queue.peek().value;
-        }
-        
-        public int size() {
-            return queue.size();
-        }
-        
-        public boolean isEmpty() {
-            return queue.isEmpty();
-        }
-    }
-
-    public static void main(String[] args) {
-        PriorityQueue<String> pq = new PriorityQueue<>();
-        pq.enqueue("Task 1", 3);  // Lower numbers = higher priority
-        pq.enqueue("Task 2", 1);
-        pq.enqueue("Task 3", 2);
-
-        System.out.println(pq.dequeue()); // "Task 2" (highest priority)
-        System.out.println(pq.peek());    // "Task 3" (next highest priority)
-        System.out.println(pq.size());    // 2
-    }
-}`,
-
-    c: `// Priority Queue Implementation in C (Min-Heap)
-#include <stdio.h>
-#include <stdlib.h>
-
-typedef struct {
-    void* value;
-    int priority;
-} PriorityItem;
-
-typedef struct {
-    PriorityItem* heap;
-    int capacity;
-    int size;
-} PriorityQueue;
-
-PriorityQueue* createPriorityQueue(int capacity) {
-    PriorityQueue* pq = (PriorityQueue*)malloc(sizeof(PriorityQueue));
-    pq->heap = (PriorityItem*)malloc(capacity * sizeof(PriorityItem));
-    pq->capacity = capacity;
-    pq->size = 0;
-    return pq;
-}
-
-void swap(PriorityItem* a, PriorityItem* b) {
-    PriorityItem temp = *a;
-    *a = *b;
-    *b = temp;
-}
-
-void heapifyUp(PriorityQueue* pq, int index) {
-    while (index > 0) {
-        int parentIndex = (index - 1) / 2;
-        if (pq->heap[parentIndex].priority <= pq->heap[index].priority) break;
-        swap(&pq->heap[parentIndex], &pq->heap[index]);
-        index = parentIndex;
-    }
-}
-
-void heapifyDown(PriorityQueue* pq, int index) {
-    while (1) {
-        int leftChild = 2 * index + 1;
-        int rightChild = 2 * index + 2;
-        int smallest = index;
-
-        if (leftChild < pq->size && 
-            pq->heap[leftChild].priority < pq->heap[smallest].priority) {
-            smallest = leftChild;
-        }
-
-        if (rightChild < pq->size && 
-            pq->heap[rightChild].priority < pq->heap[smallest].priority) {
-            smallest = rightChild;
-        }
-
-        if (smallest == index) break;
-        swap(&pq->heap[index], &pq->heap[smallest]);
-        index = smallest;
-    }
-}
-
-void enqueue(PriorityQueue* pq, void* value, int priority) {
-    if (pq->size >= pq->capacity) return; // Handle resizing in real implementation
-    
-    PriorityItem item = {value, priority};
-    pq->heap[pq->size] = item;
-    heapifyUp(pq, pq->size);
-    pq->size++;
-}
-
-void* dequeue(PriorityQueue* pq) {
-    if (pq->size == 0) return NULL;
-    
-    void* result = pq->heap[0].value;
-    pq->size--;
-    pq->heap[0] = pq->heap[pq->size];
-    heapifyDown(pq, 0);
-    return result;
-}
-
-void* peek(PriorityQueue* pq) {
-    if (pq->size == 0) return NULL;
-    return pq->heap[0].value;
-}
-
-int size(PriorityQueue* pq) {
-    return pq->size;
-}
-
-int isEmpty(PriorityQueue* pq) {
-    return pq->size == 0;
-}
-
-void destroyPriorityQueue(PriorityQueue* pq) {
-    free(pq->heap);
-    free(pq);
-}
-
-int main() {
-    PriorityQueue* pq = createPriorityQueue(10);
-    
-    // In a real implementation, you would need to manage memory for the values
-    char task1[] = "Task 1";
-    char task2[] = "Task 2";
-    char task3[] = "Task 3";
-    
-    enqueue(pq, task1, 3);  // Lower numbers = higher priority
-    enqueue(pq, task2, 1);
-    enqueue(pq, task3, 2);
-
-    printf("%s\\n", (char*)dequeue(pq)); // "Task 2" (highest priority)
-    printf("%s\\n", (char*)peek(pq));    // "Task 3" (next highest priority)
-    printf("%d\\n", size(pq));           // 2
-    
-    destroyPriorityQueue(pq);
-    return 0;
-}`,
-
-    cpp: `// Priority Queue Implementation in C++ (Min-Heap)
-#include <iostream>
-#include <vector>
-#include <functional>
-
-template <typename T>
-class PriorityQueue {
-private:
-    struct PriorityItem {
-        T value;
-        int priority;
-        
-        bool operator<(const PriorityItem& other) const {
-            return priority > other.priority; // Min-heap (lower priority numbers come first)
-        }
-    };
-    
-    std::vector<PriorityItem> heap;
-
-public:
-    void enqueue(const T& value, int priority) {
-        heap.push_back({value, priority});
-        std::push_heap(heap.begin(), heap.end());
-    }
-    
-    T dequeue() {
-        if (isEmpty()) {
-            throw std::out_of_range("Priority queue is empty");
-        }
-        std::pop_heap(heap.begin(), heap.end());
-        T value = heap.back().value;
-        heap.pop_back();
-        return value;
-    }
-    
-    const T& peek() const {
-        if (isEmpty()) {
-            throw std::out_of_range("Priority queue is empty");
-        }
-        return heap.front().value;
-    }
-    
-    size_t size() const {
-        return heap.size();
-    }
-    
-    bool isEmpty() const {
-        return heap.empty();
-    }
-};
-
-int main() {
-    PriorityQueue<std::string> pq;
-    pq.enqueue("Task 1", 3);  // Lower numbers = higher priority
-    pq.enqueue("Task 2", 1);
-    pq.enqueue("Task 3", 2);
-
-    std::cout << pq.dequeue() << std::endl; // "Task 2" (highest priority)
-    std::cout << pq.peek() << std::endl;    // "Task 3" (next highest priority)
-    std::cout << pq.size() << std::endl;    // 2
-    
-    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">
-               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
diff --git a/app/visualizer/queue/types/priority/content.jsx b/app/visualizer/queue/types/priority/content.jsx
deleted file mode 100755
index 134be8e73..000000000
--- a/app/visualizer/queue/types/priority/content.jsx
+++ /dev/null
@@ -1,317 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem("theme") || "light";
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener("storage", updateTheme);
-    window.addEventListener("themeChange", updateTheme);
-
-    return () => {
-      window.removeEventListener("storage", updateTheme);
-      window.removeEventListener("themeChange", updateTheme);
-    };
-  }, []);
-
-  const paragraphs = [
-    `A Priority Queue is an abstract data type where each element has a priority value, and elements are served based on priority rather than insertion order. Unlike a standard queue (FIFO), higher-priority elements are dequeued before lower-priority ones, regardless of when they were added.`,
-    `The priority queue is a fundamental data structure that enables efficient management of elements based on their importance or urgency. Its ability to always provide access to the highest (or lowest) priority item makes it indispensable in algorithms where processing order significantly impacts performance or correctness. The choice of implementation (heap, BST, etc.) depends on the specific application's requirements for insertion, extraction, and auxiliary operations.`,
-  ];
-
-  const characteristic = [
-    {
-      points: "Priority-based ordering:",
-      subpoints: [
-        "Elements are processed by priority (highest first or lowest first)",
-      ],
-    },
-    {
-      points: "Two core operations:",
-      subpoints: [
-        "insert(item, priority) - Add with priority",
-        "extractMax()/extractMin() - Remove highest/lowest priority item",
-      ],
-    },
-    {
-      points: "Peek operation:",
-      subpoints: ["View highest/lowest priority item without removal"],
-    },
-    {
-      points: "No FIFO guarantee:",
-      subpoints: [
-        "Equal priority elements may be processed in arbitrary order",
-      ],
-    },
-  ];
-
-  const implementation = [
-    {
-      points: "Binary Heap:",
-      subpoints: [
-        "Most common implementation",
-        "O(log n) insert and extract",
-        "O(1) peek",
-        "Memory efficient",
-      ],
-    },
-    {
-      points: "Balanced Binary Search Tree:",
-      subpoints: [
-        "O(log n) all operations",
-        "Supports more operations (like delete-by-value)",
-        "Higher memory overhead",
-      ],
-    },
-    {
-      points: "Array (Unsorted):",
-      subpoints: [
-        "O(1) insert, O(n) extract",
-        "Simple but inefficient for large datasets",
-      ],
-    },
-    {
-      points: "Fibonacci Heap:",
-      subpoints: [
-        "Amortized O(1) insert",
-        "O(log n) extract",
-        "Complex implementation",
-      ],
-    },
-  ];
-
-  const application = [
-    { points: "Dijkstra's Algorithm: Finding shortest paths in graphs" },
-    { points: "Huffman Coding: Data compression" },
-    { points: "Operating Systems: Process scheduling" },
-    { points: "Event-driven Simulation: Processing events in time order" },
-    { points: "A* Search: Pathfinding in AI" },
-    { points: "Bandwidth Management: Prioritizing network packets" },
-  ];
-
-  const special = [
-    { points: "Min-Priority Queue: Extracts minimum priority first" },
-    { points: "Max-Priority Queue: Extracts maximum priority first" },
-    {
-      points:
-        "Double-Ended Priority Queue: Supports both min and max extraction",
-    },
-    { points: "Indexed Priority Queue: Allows priority updates by key" },
-    { points: "Bounded Priority Queue: Fixed capacity with eviction policies" },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* What is a Priority Queue? */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            What is a Priority Queue?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraphs[0]}
-            </p>
-          </div>
-        </section>
-
-        {/* Key Characteristics */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Key Characteristics
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Priority queues have these fundamental properties:
-            </p>
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {characteristic.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                  {item.subpoints && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {item.subpoints.map((subitem, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitem}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Implementation Variations */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Implementation Variations
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Common implementation approaches:
-            </p>
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {implementation.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-semibold">{item.points}</span>
-                  {item.subpoints && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {item.subpoints.map((subitem, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitem}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Applications */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Applications
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Priority queues are used in:
-            </p>
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {application.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Special Cases */}
-        <section className="p-6">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Special Cases
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Interesting priority queue variations:
-            </p>
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {special.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Additional Info */}
-        <section className="p-6 border-t border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <div className="prose dark:prose-invert max-w-none">
-            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                {paragraphs[1]}
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
diff --git a/app/visualizer/queue/types/priority/page.jsx b/app/visualizer/queue/types/priority/page.jsx
deleted file mode 100755
index 6e31ee3bf..000000000
--- a/app/visualizer/queue/types/priority/page.jsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import Animation from "@/app/visualizer/queue/types/priority/animation";
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/queue/types/priority/content";
-import Quiz from "@/app/visualizer/queue/types/priority/quiz";
-import Code from "@/app/visualizer/queue/types/priority/codeBlock";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-import ExploreOther from "@/app/components/ui/exploreOther";
-import Footer from "@/app/components/footer";
-import BackToTop from "@/app/components/ui/backtotop";
-
-export const metadata = {
-  title:
-    "Priority Queue Algorithm | Visual Guide with Code in JavaScript, C, Python, Java",
-  description:
-    "Master Priority Queue in Data Structures with easy-to-understand visualizations and complete code examples in JavaScript, C, Python, and Java. Perfect for DSA learners and coding interview prep.",
-  keywords: [
-    "Priority Queue",
-    "Priority Queue DSA",
-    "Priority Queue Data Structure",
-    "Priority Queue in JavaScript",
-    "Priority Queue in C",
-    "Priority Queue in Python",
-    "Priority Queue in Java",
-    "Priority Queue Examples",
-    "DSA Queue Operations",
-    "Learn Priority Queue",
-    "Priority Queue Code",
-    "Priority Queue Visualization",
-    "DSA Visualizer",
-    "Priority Queue for Interviews",
-    "Priority Queue Tutorial",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/queue/priorityQueue.png",
-        width: 1200,
-        height: 630,
-        alt: "Priority Queue Algorithm Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Priority Queue", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Queue
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Priority Queue
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section className="px-6">
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.priorityQueue}
-            title="Priority Queue"
-            description="Mark Priority Queue as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section className="px-6">
-          <ExploreOther
-            title="Explore Other Types"
-            links={[
-              { text: "Single Ended Queue", url: "./singleEnded" },
-              { text: "Circular Queue", url: "./circular" },
-              { text: "Double-Ended Queue", url: "./deque" },
-              { text: "Multiple Queue", url: "./multiple" },
-            ]}
-          />
-        </section>
-      </div>
-
-      <BackToTop />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/queue/types/priority/quiz.jsx b/app/visualizer/queue/types/priority/quiz.jsx
deleted file mode 100755
index 87cf00c50..000000000
--- a/app/visualizer/queue/types/priority/quiz.jsx
+++ /dev/null
@@ -1,384 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const QueueQuiz = () => {
-  const questions = [
-    {
-      question: "What is the fundamental difference between a priority queue and a standard queue?",
-      options: [
-        "Priority queues use LIFO ordering",
-        "Elements are processed based on priority rather than insertion order",
-        "Priority queues can only store numeric values",
-        "Standard queues are always faster"
-      ],
-      correctAnswer: 1,
-      explanation: "Priority queues process elements by their priority value rather than following strict FIFO order like standard queues."
-    },
-    {
-      question: "Which operation in a max-priority queue returns the highest priority element without removing it?",
-      options: [
-        "extractMax()",
-        "insert()",
-        "peek()",
-        "remove()"
-      ],
-      correctAnswer: 2,
-      explanation: "peek() allows viewing the highest priority element while leaving it in the queue."
-    },
-    {
-      question: "What is the time complexity of insert() and extractMax() operations in a binary heap implementation?",
-      options: [
-        "O(1) for both",
-        "O(log n) for both",
-        "O(n) for insert, O(1) for extractMax",
-        "O(1) for insert, O(n) for extractMax"
-      ],
-      correctAnswer: 1,
-      explanation: "Binary heap implementations provide O(log n) time for both insertion and extraction operations."
-    },
-    {
-      question: "Which data structure is MOST commonly used to implement a priority queue?",
-      options: [
-        "Linked List",
-        "Hash Table",
-        "Binary Heap",
-        "Graph"
-      ],
-      correctAnswer: 2,
-      explanation: "Binary heaps are the most common implementation due to their balance of efficiency and simplicity."
-    },
-    {
-      question: "In Dijkstra's algorithm, why is a priority queue used?",
-      options: [
-        "To store visited nodes in FIFO order",
-        "To always process the node with the current shortest path estimate",
-        "To sort all nodes alphabetically",
-        "To implement depth-first search"
-      ],
-      correctAnswer: 1,
-      explanation: "The priority queue ensures the node with the smallest current distance estimate is processed next, which is crucial for Dijkstra's algorithm."
-    }
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowIntro(true);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding priority queue fundamentals");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("priority queue operations");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("priority queue implementation");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("practical applications of priority queues");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Priority Queue concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div 
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Priority Queue Quiz
-          </h2>
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: 'spring', stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div 
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p 
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div 
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500" 
-                style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
-              />
-            </div>
-          </div>
-          
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-            
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div 
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md'
-                      : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                      selectedAnswer === index 
-                        ? 'bg-blue-500 text-white' 
-                        : 'bg-gray-200 dark:bg-gray-600'
-                    }`}>
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-            
-          </motion.div>
-          
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-            
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? 'Finish' : 'Next'} <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar 
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating() 
-                        ? 'text-yellow-400 fill-current' 
-                        : 'text-gray-300 dark:text-gray-600 fill-current'
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-            
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length ? "Perfect Score!" :
-               score >= questions.length * 0.8 ? "Excellent Work!" :
-               score >= questions.length * 0.6 ? "Good Job!" :
-               score >= questions.length * 0.4 ? "Keep Practicing!" : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}% correct
-            </p>
-          </div>
-          
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-          
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">Question Breakdown:</h4>
-            {questions.map((q, index) => (
-              <div key={index} className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0">
-                <p className="font-medium text-gray-800 dark:text-gray-200">{q.question}</p>
-                <div className={`flex items-start mt-1 ${
-                  answers[index] === q.correctAnswer 
-                    ? 'text-green-600 dark:text-green-400' 
-                    : 'text-red-600 dark:text-red-400'
-                }`}>
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">Your answer: {answers[index] !== null ? q.options[answers[index]] : "Not answered"}</p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">Correct answer: {q.options[q.correctAnswer]}</p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-          
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default QueueQuiz;
\ No newline at end of file
diff --git a/app/visualizer/queue/types/singleEnded/animation.jsx b/app/visualizer/queue/types/singleEnded/animation.jsx
deleted file mode 100755
index 5b2176d02..000000000
--- a/app/visualizer/queue/types/singleEnded/animation.jsx
+++ /dev/null
@@ -1,251 +0,0 @@
-"use client";
-import React, { useState } from "react";
-
-const SingleEndedQueueVisualizer = () => {
-  const [queue, setQueue] = useState([]);
-  const [inputValue, setInputValue] = useState("");
-  const [operation, setOperation] = useState(null);
-  const [message, setMessage] = useState("Queue is empty");
-  const [isAnimating, setIsAnimating] = useState(false);
-
-  /* ---------- helpers ---------- */
-  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
-  const showOp = async (txt, ms = 800) => {
-    setOperation(txt);
-    await sleep(ms);
-    setOperation(null);
-  };
-
-  /* ---------- enqueue (rear) ---------- */
-  const enqueueRear = async () => {
-    if (!inputValue.trim()) {
-      setMessage("Please enter a value");
-      return;
-    }
-    setIsAnimating(true);
-    await showOp(`Enqueuing "${inputValue}" at rear …`);
-    setQueue((q) => [...q, inputValue]);
-    setMessage(`"${inputValue}" added to rear`);
-    setInputValue("");
-    setIsAnimating(false);
-  };
-
-  /* ---------- dequeue (front) ---------- */
-  const dequeueFront = async () => {
-    if (queue.length === 0) {
-      setMessage("Queue is empty!");
-      return;
-    }
-    setIsAnimating(true);
-    const front = queue[0];
-    await showOp(`Dequeuing "${front}" from front …`);
-    setQueue((q) => q.slice(1));
-    setMessage(`"${front}" removed from front`);
-    setIsAnimating(false);
-  };
-
-  /* ---------- peek front ---------- */
-  const peekFront = async () => {
-    if (queue.length === 0) {
-      setMessage("Queue is empty!");
-      return;
-    }
-    setIsAnimating(true);
-    setMessage(`Front element: "${queue[0]}"`);
-    await sleep(1500);
-    setIsAnimating(false);
-  };
-
-  /* ---------- peek rear ---------- */
-  const peekRear = async () => {
-    if (queue.length === 0) {
-      setMessage("Queue is empty!");
-      return;
-    }
-    setIsAnimating(true);
-    setMessage(`Rear element: "${queue[queue.length - 1]}"`);
-    await sleep(1500);
-    setIsAnimating(false);
-  };
-
-  /* ---------- reset ---------- */
-  const reset = () => {
-    setQueue([]);
-    setInputValue("");
-    setOperation(null);
-    setMessage("Queue cleared");
-  };
-
-  /* ---------- UI ---------- */
-  return (
-    <main className="container mx-auto px-6 pt-4 pb-4">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-        Single-Ended Queue Visualiser (FIFO)
-      </p>
-
-      <div className="max-w-4xl mx-auto">
-        {/* ----- Controls card ----- */}
-        <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 mb-8">
-          {/* Value input + Enqueue */}
-          <div className="flex flex-col sm:flex-row gap-4 mb-4">
-            <input
-              type="text"
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              placeholder="Enter value"
-              className="flex-1 p-3 border dark:border-gray-700 rounded-lg dark:bg-neutral-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
-              disabled={isAnimating}
-              onKeyDown={(e) => e.key === "Enter" && enqueueRear()}
-            />
-          </div>
-
-          {/* Action buttons */}
-          <div className="grid grid-cols-2 sm:grid-cols-5 gap-2">
-            <button
-              onClick={enqueueRear}
-              disabled={isAnimating}
-              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Enqueue Rear
-            </button>
-            <button
-              onClick={dequeueFront}
-              disabled={isAnimating || queue.length === 0}
-              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Dequeue Front
-            </button>
-            <button
-              onClick={peekFront}
-              disabled={isAnimating || queue.length === 0}
-              className="bg-green-500 text-black px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Peek Front
-            </button>
-            <button
-              onClick={peekRear}
-              disabled={isAnimating || queue.length === 0}
-              className="bg-green-500 text-black px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Peek Rear
-            </button>
-            <button
-              onClick={reset}
-              disabled={isAnimating}
-              className="bg-red-500 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
-            >
-              Reset
-            </button>
-          </div>
-
-          {/* Status banners */}
-          <div className="flex flex-col gap-3 mt-4 items-center">
-            {operation && (
-              <div className="p-3 rounded-lg bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-800 flex items-center gap-2 justify-center">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5 animate-spin"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-                <span>{operation}</span>
-              </div>
-            )}
-            {message && (
-              <div
-                className={`p-3 rounded-lg ${
-                  message.includes("added")
-                    ? "bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800"
-                    : message.includes("removed") || message.includes("element:")
-                    ? "bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-800"
-                    : "bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-600"
-                } flex items-center gap-2 justify-center`}
-              >
-                <span>{message}</span>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* ----- Visualisation card (hidden when empty) ----- */}
-        {queue.length > 0 && (
-          <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700">
-            <h2 className="text-2xl font-semibold mb-6 text-center">Queue Visualisation</h2>
-
-            <div className="flex items-center gap-3 w-full justify-center">
-              {/* Front pointer */}
-              <div className="text-blue-600 dark:text-blue-400 font-medium flex flex-col items-center">
-                <span>Front</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </div>
-
-              {/* Elements */}
-              <div className="flex items-center gap-4">
-                {queue.map((item, index) => (
-                  <div
-                    key={index}
-                    className={`transition-all duration-300 ${
-                      index === 0 && operation?.includes("Dequeuing")
-                        ? "animate-pulse scale-110"
-                        : index === queue.length - 1 && operation?.includes("Enqueuing")
-                        ? "animate-bounce"
-                        : ""
-                    }`}
-                  >
-                    <div
-                      className={`w-24 h-24 rounded-lg shadow-md flex items-center justify-center text-lg font-medium border-2 ${
-                        index === 0
-                          ? "border-blue-300 dark:border-blue-700"
-                          : index === queue.length - 1
-                          ? "border-green-300 dark:border-green-700"
-                          : "border-gray-200 dark:border-gray-600"
-                      } bg-white dark:bg-neutral-900`}
-                    >
-                      {item}
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {/* Rear pointer */}
-              <div className="text-green-600 dark:text-green-400 font-medium flex flex-col items-center">
-                <span>Rear</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </main>
-  );
-};
-
-export default SingleEndedQueueVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/queue/types/singleEnded/codeBlock.jsx b/app/visualizer/queue/types/singleEnded/codeBlock.jsx
deleted file mode 100755
index cfce87f2a..000000000
--- a/app/visualizer/queue/types/singleEnded/codeBlock.jsx
+++ /dev/null
@@ -1,571 +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 (JavaScript)
-class Queue {
-  constructor(size = 10) {
-    this.items = new Array(size);
-    this.front = 0;
-    this.rear = -1;
-    this.size = 0;
-    this.capacity = size;
-  }
-
-  // Add to rear (enqueue)
-  enqueue(item) {
-    if (this.isFull()) {
-      console.log("Queue Overflow");
-      return;
-    }
-    this.rear = (this.rear + 1) % this.capacity;
-    this.items[this.rear] = item;
-    this.size++;
-  }
-
-  // Remove from front (dequeue)
-  dequeue() {
-    if (this.isEmpty()) {
-      console.log("Queue Underflow");
-      return undefined;
-    }
-    const item = this.items[this.front];
-    this.front = (this.front + 1) % this.capacity;
-    this.size--;
-    return item;
-  }
-
-  // Peek front element
-  peek() {
-    if (this.isEmpty()) {
-      console.log("Queue is empty");
-      return undefined;
-    }
-    return this.items[this.front];
-  }
-
-  // Check if empty
-  isEmpty() {
-    return this.size === 0;
-  }
-
-  // Check if full
-  isFull() {
-    return this.size === this.capacity;
-  }
-
-  // Get current size
-  getSize() {
-    return this.size;
-  }
-
-  // Print queue contents
-  print() {
-    if (this.isEmpty()) {
-      console.log("Queue is empty");
-      return;
-    }
-    console.log("Queue contents (front to rear):");
-    for (let i = 0; i < this.size; i++) {
-      const index = (this.front + i) % this.capacity;
-      console.log(this.items[index]);
-    }
-  }
-}
-
-// Usage
-const queue = new Queue(5);
-queue.enqueue(10);
-queue.enqueue(20);
-queue.enqueue(30);
-console.log("Front element:", queue.peek()); // 10
-console.log("Queue size:", queue.getSize()); // 3
-queue.print();
-queue.dequeue();
-console.log("After dequeue, front element:", queue.peek()); // 20`,
-
-    python: `# Queue Implementation (Python)
-class Queue:
-    def __init__(self, size=10):
-        self.items = [None] * size
-        self.front = 0
-        self.rear = -1
-        self.size = 0
-        self.capacity = size
-    
-    def enqueue(self, item):
-        if self.is_full():
-            print("Queue Overflow")
-            return
-        self.rear = (self.rear + 1) % self.capacity
-        self.items[self.rear] = item
-        self.size += 1
-    
-    def dequeue(self):
-        if self.is_empty():
-            print("Queue Underflow")
-            return None
-        item = self.items[self.front]
-        self.front = (self.front + 1) % self.capacity
-        self.size -= 1
-        return item
-    
-    def peek(self):
-        if self.is_empty():
-            print("Queue is empty")
-            return None
-        return self.items[self.front]
-    
-    def is_empty(self):
-        return self.size == 0
-    
-    def is_full(self):
-        return self.size == self.capacity
-    
-    def get_size(self):
-        return self.size
-    
-    def print_queue(self):
-        if self.is_empty():
-            print("Queue is empty")
-            return
-        print("Queue contents (front to rear):")
-        for i in range(self.size):
-            index = (self.front + i) % self.capacity
-            print(self.items[index])
-
-# Usage
-queue = Queue(5)
-queue.enqueue(10)
-queue.enqueue(20)
-queue.enqueue(30)
-print("Front element:", queue.peek())  # 10
-print("Queue size:", queue.get_size())  # 3
-queue.print_queue()
-queue.dequeue()
-print("After dequeue, front element:", queue.peek())  # 20`,
-
-    java: `// Queue Implementation (Java)
-public class ArrayQueue {
-    private int[] items;
-    private int front;
-    private int rear;
-    private int size;
-    private int capacity;
-    
-    public ArrayQueue(int size) {
-        items = new int[size];
-        front = 0;
-        rear = -1;
-        size = 0;
-        capacity = size;
-    }
-    
-    public void enqueue(int item) {
-        if (isFull()) {
-            System.out.println("Queue Overflow");
-            return;
-        }
-        rear = (rear + 1) % capacity;
-        items[rear] = item;
-        size++;
-    }
-    
-    public int dequeue() {
-        if (isEmpty()) {
-            System.out.println("Queue Underflow");
-            return -1;
-        }
-        int item = items[front];
-        front = (front + 1) % capacity;
-        size--;
-        return item;
-    }
-    
-    public int peek() {
-        if (isEmpty()) {
-            System.out.println("Queue is empty");
-            return -1;
-        }
-        return items[front];
-    }
-    
-    public boolean isEmpty() {
-        return size == 0;
-    }
-    
-    public boolean isFull() {
-        return size == capacity;
-    }
-    
-    public int getSize() {
-        return size;
-    }
-    
-    public void print() {
-        if (isEmpty()) {
-            System.out.println("Queue is empty");
-            return;
-        }
-        System.out.println("Queue contents (front to rear):");
-        for (int i = 0; i < size; i++) {
-            int index = (front + i) % capacity;
-            System.out.println(items[index]);
-        }
-    }
-
-    public static void main(String[] args) {
-        ArrayQueue queue = new ArrayQueue(5);
-        queue.enqueue(10);
-        queue.enqueue(20);
-        queue.enqueue(30);
-        System.out.println("Front element: " + queue.peek()); // 10
-        System.out.println("Queue size: " + queue.getSize()); // 3
-        queue.print();
-        queue.dequeue();
-        System.out.println("After dequeue, front element: " + queue.peek()); // 20
-    }
-}`,
-
-    c: `// Queue Implementation (C)
-#include <stdio.h>
-#include <stdlib.h>
-#include <stdbool.h>
-
-typedef struct {
-    int *items;
-    int front;
-    int rear;
-    int size;
-    int capacity;
-} Queue;
-
-void initialize(Queue *q, int capacity) {
-    q->items = (int*)malloc(capacity * sizeof(int));
-    q->front = 0;
-    q->rear = -1;
-    q->size = 0;
-    q->capacity = capacity;
-}
-
-bool isFull(Queue *q) {
-    return q->size == q->capacity;
-}
-
-bool isEmpty(Queue *q) {
-    return q->size == 0;
-}
-
-void enqueue(Queue *q, int item) {
-    if (isFull(q)) {
-        printf("Queue Overflow\n");
-        return;
-    }
-    q->rear = (q->rear + 1) % q->capacity;
-    q->items[q->rear] = item;
-    q->size++;
-}
-
-int dequeue(Queue *q) {
-    if (isEmpty(q)) {
-        printf("Queue Underflow\n");
-        return -1;
-    }
-    int item = q->items[q->front];
-    q->front = (q->front + 1) % q->capacity;
-    q->size--;
-    return item;
-}
-
-int peek(Queue *q) {
-    if (isEmpty(q)) {
-        printf("Queue is empty\n");
-        return -1;
-    }
-    return q->items[q->front];
-}
-
-int size(Queue *q) {
-    return q->size;
-}
-
-void print(Queue *q) {
-    if (isEmpty(q)) {
-        printf("Queue is empty\n");
-        return;
-    }
-    printf("Queue contents (front to rear):\n");
-    for (int i = 0; i < q->size; i++) {
-        int index = (q->front + i) % q->capacity;
-        printf("%d\n", q->items[index]);
-    }
-}
-
-void destroy(Queue *q) {
-    free(q->items);
-}
-
-int main() {
-    Queue queue;
-    initialize(&queue, 5);
-    
-    enqueue(&queue, 10);
-    enqueue(&queue, 20);
-    enqueue(&queue, 30);
-    printf("Front element: %d\n", peek(&queue)); // 10
-    printf("Queue size: %d\n", size(&queue)); // 3
-    print(&queue);
-    dequeue(&queue);
-    printf("After dequeue, front element: %d\n", peek(&queue)); // 20
-    
-    destroy(&queue);
-    return 0;
-}`,
-
-    cpp: `// Queue Implementation (C++)
-#include <iostream>
-using namespace std;
-
-class Queue {
-private:
-    int *items;
-    int front;
-    int rear;
-    int size;
-    int capacity;
-    
-public:
-    Queue(int size) {
-        items = new int[size];
-        front = 0;
-        rear = -1;
-        size = 0;
-        capacity = size;
-    }
-    
-    ~Queue() {
-        delete[] items;
-    }
-    
-    void enqueue(int item) {
-        if (isFull()) {
-            cout << "Queue Overflow" << endl;
-            return;
-        }
-        rear = (rear + 1) % capacity;
-        items[rear] = item;
-        size++;
-    }
-    
-    int dequeue() {
-        if (isEmpty()) {
-            cout << "Queue Underflow" << endl;
-            return -1;
-        }
-        int item = items[front];
-        front = (front + 1) % capacity;
-        size--;
-        return item;
-    }
-    
-    int peek() {
-        if (isEmpty()) {
-            cout << "Queue is empty" << endl;
-            return -1;
-        }
-        return items[front];
-    }
-    
-    bool isEmpty() {
-        return size == 0;
-    }
-    
-    bool isFull() {
-        return size == capacity;
-    }
-    
-    int getSize() {
-        return size;
-    }
-    
-    void print() {
-        if (isEmpty()) {
-            cout << "Queue is empty" << endl;
-            return;
-        }
-        cout << "Queue contents (front to rear):" << endl;
-        for (int i = 0; i < size; i++) {
-            int index = (front + i) % capacity;
-            cout << items[index] << endl;
-        }
-    }
-};
-
-int main() {
-    Queue queue(5);
-    queue.enqueue(10);
-    queue.enqueue(20);
-    queue.enqueue(30);
-    cout << "Front element: " << queue.peek() << endl; // 10
-    cout << "Queue size: " << queue.getSize() << endl; // 3
-    queue.print();
-    queue.dequeue();
-    cout << "After dequeue, front element: " << queue.peek() << 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">
-               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
diff --git a/app/visualizer/queue/types/singleEnded/content.jsx b/app/visualizer/queue/types/singleEnded/content.jsx
deleted file mode 100755
index b6c5cd166..000000000
--- a/app/visualizer/queue/types/singleEnded/content.jsx
+++ /dev/null
@@ -1,352 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem("theme") || "light";
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener("storage", updateTheme);
-    window.addEventListener("themeChange", updateTheme);
-
-    return () => {
-      window.removeEventListener("storage", updateTheme);
-      window.removeEventListener("themeChange", updateTheme);
-    };
-  }, []);
-
-  const paragraphs = [
-    `A single-ended queue (often just called a queue) is a linear data structure that follows the FIFO (First-In-First-Out) principle. Elements are added (enqueued) at the rear and removed (dequeued) from the front, maintaining strict ordering.`,
-    `The single-ended queue is a fundamental data structure in computer science, providing predictable ordering that's essential for many algorithms and system design patterns where processing order matters.`,
-  ];
-
-  const characteristics = [
-    {
-      points: "Two ends:",
-      subpoints: ["Front (for removal) and rear (for insertion)"],
-    },
-    {
-      points: "Basic Operations:",
-      subpoints: [
-        "enqueue() - Add to rear",
-        "dequeue() - Remove from front",
-        "peek() - View front element",
-        "isEmpty() - Check if empty",
-      ],
-    },
-    {
-      points: "Fixed Order:",
-      subpoints: ["Elements are processed in exact arrival sequence"],
-    },
-  ];
-
-  const example = [
-    { points: "enqueue(10): [10]" },
-    { points: "enqueue(20): [10, 20]" },
-    { points: "enqueue(30): [10, 20, 30]" },
-    { points: "dequeue(): Returns 10 → [20, 30]" },
-    { points: "peek(): Returns 20 → [20, 30] (unchanged)" },
-  ];
-
-  const implementation = [
-    {
-      points: "Array-Based:",
-      subpoints: [
-        "Fixed or dynamic array",
-        "Need to handle wrap-around for circular queues",
-      ],
-    },
-    {
-      points: "Linked List:",
-      subpoints: [
-        "Head pointer as front",
-        "Tail pointer as rear",
-        "Efficient O(1) operations",
-      ],
-    },
-  ];
-
-  const complexity = [
-    { points: "enqueue(): O(1)" },
-    { points: "dequeue(): O(1)" },
-    { points: "peek(): O(1)" },
-    { points: "isEmpty(): O(1)" },
-  ];
-
-  const application = [
-    { points: "CPU task scheduling" },
-    { points: "Print job management" },
-    { points: "Breadth-First Search (BFS) algorithms" },
-    { points: "Buffering data streams" },
-    { points: "Handling requests in web servers" },
-  ];
-
-  const differences = [
-    {
-      points: "Single-ended only allows insertion at rear and removal at front",
-    },
-    { points: "Double-ended (deque) allows insertion/removal at both ends" },
-    { points: "Single-ended has stricter FIFO enforcement" },
-    { points: "Single-ended is simpler to implement" },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* What is a Single-Ended Queue? */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            What is a Single-Ended Queue?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraphs[0]}
-            </p>
-          </div>
-        </section>
-
-        {/* Key Characteristics */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Key Characteristics
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Single-ended queues have these fundamental properties:
-            </p>
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {characteristics.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                  {item.subpoints && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {item.subpoints.map((subitem, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitem}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Visual Example */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Visual Example
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Operation sequence on an initially empty queue:
-            </p>
-            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {example.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Implementation Variations */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Implementation Variations
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Common implementation approaches:
-            </p>
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {implementation.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-semibold">{item.points}</span>
-                  {item.subpoints && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {item.subpoints.map((subitem, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitem}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Time Complexity */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Time Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {complexity.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
-                    {item.points.split(":")[0]}:
-                  </span>
-                  <span className="ml-2">{item.points.split(":")[1]}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Applications */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Applications
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Single-ended queues are used in:
-            </p>
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {application.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Comparison with Double-Ended Queue */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Comparison with Double-Ended Queue
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Key differences:
-            </p>
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {differences.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Additional Info */}
-        <section className="p-6">
-          <div className="prose dark:prose-invert max-w-none">
-            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                {paragraphs[1]}
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
diff --git a/app/visualizer/queue/types/singleEnded/page.jsx b/app/visualizer/queue/types/singleEnded/page.jsx
deleted file mode 100755
index 8369134bb..000000000
--- a/app/visualizer/queue/types/singleEnded/page.jsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import Animation from "@/app/visualizer/queue/types/singleEnded/animation";
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/queue/types/singleEnded/content";
-import Quiz from "@/app/visualizer/queue/types/singleEnded/quiz";
-import Code from "@/app/visualizer/queue/types/singleEnded/codeBlock";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Footer from '@/app/components/footer';
-import BackToTop from '@/app/components/ui/backtotop';
-
-export const metadata = {
-  title: "Single Ended Queue | Learn with JS, C, Python, Java Code",
-  description:
-    "Understand Single Ended Queue in Data Structures with animations and full code examples in JavaScript, C, Python, and Java. Ideal for beginners learning queue operations and preparing for interviews.",
-  keywords: [
-    "Single Ended Queue",
-    "Single Ended Queue DSA",
-    "Queue Data Structure",
-    "Single Ended Queue in JavaScript",
-    "Single Ended Queue in C",
-    "Single Ended Queue in Python",
-    "Single Ended Queue in Java",
-    "DSA Queue Operations",
-    "Learn Queue DSA",
-    "Queue Code Examples",
-    "DSA Visualizer",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/queue/singleEnded.png",
-        width: 1200,
-        height: 630,
-        alt: "Single Ended Queue Algorithm Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Queue : Single Ended", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Queue
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Single Ended
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section className="px-6">
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.singleEnded}
-            title="Single Ended"
-            description="Mark Single Ended Queue as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section className="px-6">
-          <ExploreOther
-          title="Explore Other Types"
-          links={[
-            { text: "Double Ended Queue", url: "./deque" },
-            { text: "Circular Queue", url: "./circular" },
-            { text: "Multiple Queue", url: "./multiple" },
-            { text: "Priority Queue", url: "./priority" },
-          ]}
-        />
-        </section>
-      </div>
-
-      <BackToTop />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/queue/types/singleEnded/quiz.jsx b/app/visualizer/queue/types/singleEnded/quiz.jsx
deleted file mode 100755
index fe85cb74a..000000000
--- a/app/visualizer/queue/types/singleEnded/quiz.jsx
+++ /dev/null
@@ -1,384 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const QueueQuiz = () => {
-  const questions = [
-    {
-      question: "What principle does a single-ended queue follow?",
-      options: [
-        "LIFO (Last-In-First-Out)",
-        "FIFO (First-In-First-Out)", 
-        "Priority-Based",
-        "Random Access"
-      ],
-      correctAnswer: 1,
-      explanation: "Single-ended queues strictly follow the First-In-First-Out (FIFO) principle."
-    },
-    {
-      question: "Where are elements added in a single-ended queue?",
-      options: [
-        "At the front",
-        "At the rear", 
-        "At any position",
-        "In the middle"
-      ],
-      correctAnswer: 1,
-      explanation: "Elements are always added (enqueued) at the rear of the queue."
-    },
-    {
-      question: "What operation removes an element from a single-ended queue?",
-      options: [
-        "enqueue()",
-        "dequeue()", 
-        "peek()",
-        "isEmpty()"
-      ],
-      correctAnswer: 1,
-      explanation: "dequeue() removes and returns the element from the front of the queue."
-    },
-    {
-      question: "What would the queue [10, 20, 30] look like after dequeue()?",
-      options: [
-        "[10, 20]",
-        "[20, 30]", 
-        "[10, 20, 30]",
-        "[30, 20]"
-      ],
-      correctAnswer: 1,
-      explanation: "dequeue() removes the front element (10), leaving [20, 30]."
-    },
-    {
-      question: "What is the time complexity of enqueue() and dequeue() operations?",
-      options: [
-        "O(1) for both",
-        "O(n) for both", 
-        "O(1) for enqueue, O(n) for dequeue",
-        "O(n) for enqueue, O(1) for dequeue"
-      ],
-      correctAnswer: 0,
-      explanation: "Both operations are O(1) in a properly implemented queue."
-    }
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowIntro(true);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding FIFO principle");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("queue insertion point");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("queue removal operations");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("queue state after operations");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Single-Ended Queue concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div 
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Single-Ended Queue Quiz
-          </h2>
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: 'spring', stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div 
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p 
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div 
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500" 
-                style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
-              />
-            </div>
-          </div>
-          
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-            
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div 
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md'
-                      : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                      selectedAnswer === index 
-                        ? 'bg-blue-500 text-white' 
-                        : 'bg-gray-200 dark:bg-gray-600'
-                    }`}>
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-            
-          </motion.div>
-          
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-            
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? 'Finish' : 'Next'} <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar 
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating() 
-                        ? 'text-yellow-400 fill-current' 
-                        : 'text-gray-300 dark:text-gray-600 fill-current'
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-            
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length ? "Perfect Score!" :
-               score >= questions.length * 0.8 ? "Excellent Work!" :
-               score >= questions.length * 0.6 ? "Good Job!" :
-               score >= questions.length * 0.4 ? "Keep Practicing!" : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}% correct
-            </p>
-          </div>
-          
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-          
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">Question Breakdown:</h4>
-            {questions.map((q, index) => (
-              <div key={index} className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0">
-                <p className="font-medium text-gray-800 dark:text-gray-200">{q.question}</p>
-                <div className={`flex items-start mt-1 ${
-                  answers[index] === q.correctAnswer 
-                    ? 'text-green-600 dark:text-green-400' 
-                    : 'text-red-600 dark:text-red-400'
-                }`}>
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">Your answer: {answers[index] !== null ? q.options[answers[index]] : "Not answered"}</p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">Correct answer: {q.options[q.correctAnswer]}</p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-          
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default QueueQuiz;
\ No newline at end of file
diff --git a/app/visualizer/searching/binarysearch/animation.jsx b/app/visualizer/searching/binarysearch/animation.jsx
deleted file mode 100755
index 8e973ab78..000000000
--- a/app/visualizer/searching/binarysearch/animation.jsx
+++ /dev/null
@@ -1,338 +0,0 @@
-"use client";
-import React, { useState, useEffect, useRef } from "react";
-import { gsap } from "gsap";
-import ResetButton from "@/app/components/ui/resetButton";
-import GoButton from "@/app/components/ui/goButton";
-
-const BinarySearch = () => {
-  const [arrayElements, setArrayElements] = useState("");
-  const [target, setTarget] = useState("");
-  const [array, setArray] = useState([]);
-  const [i, setI] = useState(-1);
-  const [j, setJ] = useState(-1);
-  const [mid, setMid] = useState(-1);
-  const [foundIndex, setFoundIndex] = useState(-1);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [message, setMessage] = useState("");
-  const [speed, setSpeed] = useState(1);
-  const animationRef = useRef(null);
-  const searchStateRef = useRef({ l: 0, h: 0, arr: [], targetValue: 0 });
-  const formRef = useRef(null);
-  const elementRefs = useRef([]);
-
-  const handleReset = () => {
-    clearTimeout(animationRef.current);
-    setArray([]);
-    setI(-1);
-    setJ(-1);
-    setMid(-1);
-    setFoundIndex(-1);
-    setMessage("");
-    setIsAnimating(false);
-    setArrayElements("");
-    setTarget("");
-    if (formRef.current) {
-      formRef.current.reset();
-    }
-    // Reset GSAP animations
-    elementRefs.current.forEach((ref) => {
-      gsap.to(ref, {
-        backgroundColor: "#E5E7EB",
-        borderColor: "#D1D5DB",
-        duration: 0,
-      });
-    });
-  };
-
-  const generateRandomArray = () => {
-    if (isAnimating) return;
-    const size = Math.floor(Math.random() * 4) + 2; // Random size between 2 and 5
-    const elements = Array.from({ length: size }, () =>
-      Math.floor(Math.random() * 100)
-    ).sort((a, b) => a - b);
-    setArrayElements(elements.join(", "));
-  };
-
-  const handleGo = (e) => {
-    e.preventDefault();
-    handleReset();
-
-    if (!arrayElements || !target) {
-      setMessage("Please fill in all fields.");
-      return;
-    }
-
-    const elements = arrayElements.split(",").map((el) => parseInt(el.trim()));
-    const targetValue = parseInt(target);
-
-    if (elements.some(isNaN) || isNaN(targetValue)) {
-      setMessage("Invalid array elements or target.");
-      return;
-    }
-
-    const isSorted = elements.every(
-      (el, idx) => idx === 0 || el >= elements[idx - 1]
-    );
-    if (!isSorted) {
-      setMessage("Array must be sorted in ascending order.");
-      return;
-    }
-
-    setArray(elements);
-    setI(0);
-    setJ(elements.length - 1);
-    setMid(-1);
-    setFoundIndex(-1);
-    setMessage("");
-    setIsAnimating(true);
-
-    searchStateRef.current = {
-      l: 0,
-      h: elements.length - 1,
-      arr: elements,
-      targetValue: targetValue,
-    };
-
-    animateBinarySearch();
-  };
-
-  const animateBinarySearch = () => {
-    const { l, h, arr, targetValue } = searchStateRef.current;
-    const delay = 1500 / speed;
-
-    if (l > h) {
-      setMessage(`Element ${targetValue} not found in the array.`);
-      setIsAnimating(false);
-      return;
-    }
-
-    const m = Math.floor((l + h) / 2);
-    setI(l);
-    setJ(h);
-    setMid(m);
-
-    // GSAP animations for i, j, and mid
-    elementRefs.current.forEach((ref, index) => {
-      if (index === m) {
-        gsap.to(ref, {
-          backgroundColor: "#EAB308",
-          borderColor: "#A16207",
-          duration: 0.3,
-        });
-      } else if (index >= l && index <= h) {
-        gsap.to(ref, {
-          backgroundColor: "#93C5FD",
-          borderColor: "#3B82F6",
-          duration: 0.3,
-        });
-      } else {
-        gsap.to(ref, {
-          backgroundColor: "#E5E7EB",
-          borderColor: "#D1D5DB",
-          duration: 0.3,
-        });
-      }
-    });
-
-    animationRef.current = setTimeout(() => {
-      if (arr[m] === targetValue) {
-        setFoundIndex(m);
-        setMessage(`Element ${targetValue} found at index ${m}!`);
-        setIsAnimating(false);
-        gsap.to(elementRefs.current[m], {
-          backgroundColor: "#22C55E",
-          borderColor: "#15803D",
-          duration: 0.3,
-        });
-      } else if (arr[m] < targetValue) {
-        searchStateRef.current.l = m + 1;
-        animateBinarySearch();
-      } else {
-        searchStateRef.current.h = m - 1;
-        animateBinarySearch();
-      }
-    }, delay);
-  };
-
-  const increaseSpeed = () => {
-    setSpeed((prev) => Math.min(prev + 0.5, 5));
-  };
-
-  const decreaseSpeed = () => {
-    setSpeed((prev) => Math.max(prev - 0.5, 0.5));
-  };
-
-  useEffect(() => {
-    return () => {
-      clearTimeout(animationRef.current);
-    };
-  }, []);
-
-  return (
-    <main className="container mx-auto">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-        Visualize how Binary Search efficiently finds an element in a sorted
-        array.
-      </p>
-
-      <form
-        ref={formRef}
-        onSubmit={handleGo}
-        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8"
-      >
-        <div className="mb-4">
-          <label
-            className="block text-gray-700 dark:text-gray-300 mb-2"
-            htmlFor="arrayElements"
-          >
-            Sorted Array Elements (comma-separated)
-          </label>
-          <div className="flex gap-2">
-            <input
-              type="text"
-              id="arrayElements"
-              value={arrayElements}
-              onChange={(e) => setArrayElements(e.target.value)}
-              className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-400 transition duration-300"
-              placeholder="e.g., 1, 3, 4, 6, 8"
-              disabled={isAnimating}
-            />
-            <button
-              type="button"
-              onClick={generateRandomArray}
-              className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300"
-              disabled={isAnimating}
-            >
-              Random
-            </button>
-          </div>
-        </div>
-        <div className="mb-4">
-          <label
-            className="block text-gray-700 dark:text-gray-300 mb-2"
-            htmlFor="target"
-          >
-            Target Element
-          </label>
-
-          <div className="flex flex-col sm:flex-row sm:items-end gap-4">
-            <input
-              type="number"
-              id="target"
-              value={target}
-              onChange={(e) => setTarget(e.target.value)}
-              className="w-full sm:max-w-xs p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-400 transition duration-300"
-              placeholder="eg. 4"
-              disabled={isAnimating}
-            />
-
-            <div className="flex gap-2 w-full">
-              <GoButton
-                onClick={handleGo}
-                isAnimating={isAnimating}
-                disabled={isAnimating}
-              />
-              <ResetButton onReset={handleReset} isAnimating={isAnimating} />
-            </div>
-          </div>
-        </div>
-        {isAnimating && (
-          <div className="flex items-center justify-between mb-4">
-            <button
-              type="button"
-              onClick={decreaseSpeed}
-              className="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 px-4 py-2 rounded-lg transition-colors"
-              disabled={speed <= 0.5}
-            >
-              -
-            </button>
-            <span className="text-gray-700 dark:text-gray-300">
-              Speed: {speed}x
-            </span>
-            <button
-              type="button"
-              onClick={increaseSpeed}
-              className="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 px-4 py-2 rounded-lg transition-colors"
-              disabled={speed >= 5}
-            >
-              +
-            </button>
-          </div>
-        )}
-      </form>
-
-      {message && (
-        <div
-          className={`max-w-3xl mx-auto mb-8 p-4 rounded-lg ${
-            foundIndex !== -1
-              ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
-              : "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200"
-          }`}
-        >
-          <p className="text-center font-medium">{message}</p>
-        </div>
-      )}
-
-      {array.length > 0 && (
-        <div className="max-w-4xl mx-auto bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
-          <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-6 text-center">
-            Array Visualization
-          </h2>
-          <div className="flex flex-wrap gap-4 justify-center">
-            {array.map((element, index) => {
-              const labels = [];
-              if (index === i) labels.push("i");
-              if (index === mid) labels.push("Mid");
-              if (index === j) labels.push("j");
-
-              return (
-                <div key={index} className="flex flex-col items-center">
-                  <div
-                    ref={(el) => (elementRefs.current[index] = el)}
-                    className={`w-16 h-16 flex items-center justify-center rounded-lg border-2 transition-all duration-300 text-lg font-medium ${
-                      index === foundIndex
-                        ? "bg-green-500 dark:bg-green-600 border-green-700 dark:border-green-400 text-gray-800 dark:text-white"
-                        : index === mid
-                        ? "bg-yellow-500 dark:bg-yellow-600 border-yellow-700 dark:border-yellow-400 text-gray-800 dark:text-white"
-                        : index >= i && index <= j
-                        ? "bg-blue-300 dark:bg-blue-700 border-blue-500 dark:border-blue-400 text-gray-800 dark:text-white"
-                        : "bg-gray-200 dark:bg-gray-900 border-gray-300 dark:border-gray-600 text-gray-800 dark:text-white"
-                    }`}
-                  >
-                    {element}
-                  </div>
-                  <div className="mt-1 text-sm text-gray-600 dark:text-gray-400 text-center">
-                    {labels.map((label, idx) => (
-                      <div key={idx}>{label}</div>
-                    ))}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-
-          <div className="mt-8 flex flex-wrap justify-center gap-4">
-            <div className="flex items-center">
-              <div className="w-4 h-4 bg-yellow-500 dark:bg-yellow-600 rounded mr-2"></div>
-              <span className="text-sm">Middle Element</span>
-            </div>
-            <div className="flex items-center">
-              <div className="w-4 h-4 bg-green-500 dark:bg-green-600 rounded mr-2"></div>
-              <span className="text-sm">Found Element</span>
-            </div>
-            <div className="flex items-center">
-              <div className="w-4 h-4 bg-blue-300 dark:bg-blue-700 rounded mr-2"></div>
-              <span className="text-sm">Search Range</span>
-            </div>
-            <div className="flex items-center">
-              <div className="w-4 h-4 bg-gray-200 dark:bg-gray-900 rounded mr-2"></div>
-              <span className="text-sm">Unchecked Elements</span>
-            </div>
-          </div>
-        </div>
-      )}
-    </main>
-  );
-};
-
-export default BinarySearch;
diff --git a/app/visualizer/searching/binarysearch/codeBlock.jsx b/app/visualizer/searching/binarysearch/codeBlock.jsx
deleted file mode 100755
index e19c1991e..000000000
--- 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
deleted file mode 100755
index 567ffc66d..000000000
--- a/app/visualizer/searching/binarysearch/content.jsx
+++ /dev/null
@@ -1,249 +0,0 @@
-"use client";
-import ComplexityGraph from "@/app/components/ui/graph";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState('light');
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem('theme') || 'light';
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener('storage', updateTheme);
-    window.addEventListener('themeChange', updateTheme);
-
-    return () => {
-      window.removeEventListener('storage', updateTheme);
-      window.removeEventListener('themeChange', updateTheme);
-    };
-  }, []);
-
-  const paragraphs = [
-    `Binary Search is an efficient algorithm for finding an item in a sorted list. It works by repeatedly dividing the search interval in half. If the target value is less than the middle element, the search continues in the lower half. Otherwise, it continues in the upper half. This process repeats until the value is found.`,
-    `If the number is not in the list (e.g., searching for 8), the search ends when the subarray becomes empty.`,
-    `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 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" },
-  ];
-
-  const steps = [
-    { points: "Start with the entire sorted array" },
-    {
-      points: "Compare the target with the middle element:",
-      subpoints: [
-        "If equal, return the position",
-        "If target is smaller, search the left half",
-        "If target is larger, search the right half",
-      ],
-    },
-    { points: "Repeat until the element is found or the subarray is empty" },
-    { points: 'If not found, return "Not Found"' },
-  ];
-
-  const complexity = [
-    { points: "Best Case: Target is the middle element → O(1)." },
-    {
-      points:
-        "Worst Case: Element not present → O(log n) (halves search space each step).",
-    },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* What is Binary Search */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            What is Binary Search?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraphs[0]}
-            </p>
-          </div>
-        </section>
-
-        {/* How Does It Work */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            How Does It Work?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Imagine you have a sorted list of numbers: [1, 3, 5, 7, 9, 11, 13]
-              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">
-              <li className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                Compare 7 with the middle element (7). It matches! Return the
-                position.
-              </li>
-              <li className="text-[#374151] dark:text-[#d1d5db] 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">
-                  {searching.map((item, index) => (
-                    <li
-                      key={index}
-                      className="text-[#6b7280] dark:text-[#9ca3af]"
-                    >
-                      {item.points}
-                    </li>
-                  ))}
-                </ul>
-              </li>
-            </ol>
-
-            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
-              {paragraphs[1]}
-            </p>
-          </div>
-        </section>
-
-        {/* Algorithm Steps */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Algorithm Steps
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {steps.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                  {item.subpoints && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {item.subpoints.map((subitem, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitem}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Time Complexity */}
-        <section className="p-6">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Time Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {complexity.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
-                    {item.points.split(":")[0]}:
-                  </span>
-                  <span className="ml-2">{item.points.split(":")[1]}</span>
-                </li>
-              ))}
-            </ul>
-
-            <div className="mt-8">
-              <ComplexityGraph
-                bestCase={(n) => 1}
-                averageCase={(n) => Math.log2(n)}
-                worstCase={(n) => Math.log2(n)}
-                maxN={25}
-              />
-            </div>
-
-            <div className="mt-6 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                {paragraphs[2]}
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
diff --git a/app/visualizer/searching/binarysearch/page.jsx b/app/visualizer/searching/binarysearch/page.jsx
deleted file mode 100755
index ea0eb0611..000000000
--- a/app/visualizer/searching/binarysearch/page.jsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import Animation from "@/app/visualizer/searching/binarysearch/animation";
-import Navbar from "@/app/components/navbarinner";
-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 Quiz from "@/app/visualizer/searching/binarysearch/quiz";
-import Content from '@/app/visualizer/searching/binarysearch/content';
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-
-export const metadata = {
-  title: "Binary Search Algorithm | Step-by-Step Animation",
-  description:
-    "Visualize the Binary Search algorithm with intuitive step-by-step animations, code examples in JavaScript, C, Python, and Java, and an interactive Binary Search Quiz to test your knowledge. Perfect for DSA preparation and beginners learning efficient search algorithms.",
-  keywords: [
-    "Binary Search Visualizer",
-    "Binary Search Visualization",
-    "Binary Search Animation",
-    "Learn Binary Search",
-    "Binary Search for Beginners",
-    "Binary Search Step-by-Step",
-    "Visualize Binary Search Algorithm",
-    "DSA Binary Search",
-    "Binary Search Explanation",
-    "Binary Search Visualization Tool",
-    "Efficient Searching Algorithms",
-    "Binary Search in JavaScript",
-    "Binary Search in C",
-    "Binary Search in Python",
-    "Binary Search in Java",
-    "Binary Search Code Examples",
-    "Binary Search Quiz",
-    "Interactive Binary Search Quiz",
-    "DSA Quiz",
-    "Quiz for Binary Search",
-    "Learn DSA with Quizzes",
-    "Binary Search Practice",
-    "Test Your Binary Search Skills",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/searching/binarySearch.png",
-        width: 1200,
-        height: 630,
-        alt: "Binary Search Algorithm Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Binary Search", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Searching
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Binary Search
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section className="px-6">
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.binarySearch}
-            title="Binary Search"
-            description="Mark binary search as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section className="px-6">
-          <ExploreOther
-            title="Explore other operations"
-            links={[{ text: "Linear Search", url: "./linearsearch" }]}
-          />
-        </section>
-      </div>
-
-      <BackToTop />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/searching/binarysearch/quiz.jsx b/app/visualizer/searching/binarysearch/quiz.jsx
deleted file mode 100755
index 38001bb53..000000000
--- a/app/visualizer/searching/binarysearch/quiz.jsx
+++ /dev/null
@@ -1,384 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const BinarySearchQuiz = () => {
-  const questions = [
-    {
-      question: "What is the primary requirement for binary search to work?",
-      options: [
-        "The list must be unsorted",
-        "The list must be sorted",
-        "The list must contain only numbers",
-        "The list must be small in size"
-      ],
-      correctAnswer: 1,
-      explanation: "Binary search requires the list to be sorted beforehand because it relies on comparing the target value to the middle element to determine which half of the list to search next."
-    },
-    {
-      question: "What is the time complexity of binary search in the worst case?",
-      options: [
-        "O(1)",
-        "O(log n)",
-        "O(n)",
-        "O(n²)"
-      ],
-      correctAnswer: 1,
-      explanation: "In the worst case (when the target is not present), binary search has a time complexity of O(log n) because it halves the search space with each comparison."
-    },
-    {
-      question: "In the array [1, 3, 5, 7, 9, 11, 13], how many comparisons are needed to find the number 5?",
-      options: [
-        "1",
-        "2",
-        "3",
-        "4"
-      ],
-      correctAnswer: 2,
-      explanation: "First comparison: middle is 7 (too high). Second comparison: new middle is 3 (too low). Third comparison: finds 5."
-    },
-    {
-      question: "What is the best-case scenario for binary search?",
-      options: [
-        "Target is at the beginning of the list",
-        "Target is at the end of the list",
-        "Target is the middle element",
-        "Target is not in the list"
-      ],
-      correctAnswer: 2,
-      explanation: "The best case occurs when the target is the middle element of the array, requiring only one comparison (O(1))."
-    },
-    {
-      question: "What would binary search return if the target value is not in the list?",
-      options: [
-        "The first element",
-        "The last element",
-        "An error message",
-        "A 'not found' indication"
-      ],
-      correctAnswer: 3,
-      explanation: "When the target isn't found, binary search typically returns a special value (like -1 or 'not found') to indicate this."
-    }
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowIntro(true);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the requirements for binary search");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting comparisons in binary search");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("performance characteristics");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("edge case handling");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all binary search concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-          {showIntro ? (
-            <motion.div 
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              className="text-center"
-            >
-              <div className="flex justify-center mb-6">
-                <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-                  <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-                </div>
-              </div>
-              <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-                Binary Search Quiz Challenge
-              </h2>
-              <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-                <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-                  <FaInfoCircle className="mr-2" /> How it works:
-                </h3>
-                <ul className="space-y-2 text-sm">
-                  <li className="flex items-start">
-                    <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                    <span>+1 point for each correct answer</span>
-                  </li>
-                  <li className="flex items-start">
-                    <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                    <span>0 points for wrong answers</span>
-                  </li>
-                  <li className="flex items-start">
-                    <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                    <span>-0.5 point penalty for viewing explanations</span>
-                  </li>
-                  <li className="flex items-start">
-                    <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                    <span>Earn stars based on your final score (max 5 stars)</span>
-                  </li>
-                </ul>
-              </div>
-              <button
-                onClick={startQuiz}
-                className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-              >
-                Start Quiz <FaArrowRight className="ml-2" />
-              </button>
-            </motion.div>
-          ) : showSuccessAnimation ? (
-            <div className="flex flex-col items-center justify-center h-64">
-              <motion.div
-                initial={{ scale: 0 }}
-                animate={{ scale: 1 }}
-                transition={{ type: 'spring', stiffness: 500, damping: 15 }}
-                className="mb-4"
-              >
-                <div className="relative">
-                  <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                    <FaCheck className="text-4xl text-green-500 animate-bounce" />
-                  </div>
-                  <motion.div 
-                    initial={{ scale: 0.5, opacity: 0 }}
-                    animate={{ scale: 1.5, opacity: 0 }}
-                    transition={{ duration: 1.5, repeat: Infinity }}
-                    className="absolute inset-0 border-4 border-green-300 rounded-full"
-                  />
-                </div>
-              </motion.div>
-              <motion.p 
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-              >
-                Quiz Completed!
-              </motion.p>
-            </div>
-          ) : !showResult ? (
-            <div className="quiz-container">
-              <div className="mb-6">
-                <div className="flex justify-between items-center mb-1">
-                  <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                    Question {currentQuestion + 1} of {questions.length}
-                  </span>
-                  <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                    Score: {score.toFixed(1)}
-                  </span>
-                </div>
-                <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-                  <div 
-                    className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500" 
-                    style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
-                  />
-                </div>
-              </div>
-              
-              <motion.div
-                key={currentQuestion}
-                initial={{ opacity: 0, x: 20 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ duration: 0.3 }}
-              >
-                <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-                  {questions[currentQuestion].question}
-                </h3>
-                
-                <div className="space-y-3 mb-6">
-                  {questions[currentQuestion].options.map((option, index) => (
-                    <motion.div 
-                      key={index}
-                      whileHover={{ scale: 1.02 }}
-                      whileTap={{ scale: 0.98 }}
-                      className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                        selectedAnswer === index
-                          ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md'
-                          : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
-                      }`}
-                      onClick={() => handleAnswerSelect(index)}
-                    >
-                      <div className="flex items-center">
-                        <span className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                          selectedAnswer === index 
-                            ? 'bg-blue-500 text-white' 
-                            : 'bg-gray-200 dark:bg-gray-600'
-                        }`}>
-                          {String.fromCharCode(65 + index)}
-                        </span>
-                        <span>{option}</span>
-                      </div>
-                    </motion.div>
-                  ))}
-                </div>
-                
-              </motion.div>
-              
-              <div className="flex justify-between">
-                <button
-                  onClick={handlePreviousQuestion}
-                  disabled={currentQuestion === 0}
-                  className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-                >
-                  <FaArrowLeft className="mr-2" /> Previous
-                </button>
-                
-                <button
-                  onClick={handleNextQuestion}
-                  disabled={selectedAnswer === null}
-                  className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-                >
-                  {currentQuestion === questions.length - 1 ? 'Finish' : 'Next'} <FaArrowRight className="ml-2" />
-                </button>
-              </div>
-            </div>
-          ) : (
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              className="result-container"
-            >
-              <div className="text-center mb-8">
-                <div className="relative inline-block mb-4">
-                  <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                    <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                      {score.toFixed(1)}/{questions.length}
-                    </div>
-                  </div>
-                  <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                    {[...Array(5)].map((_, i) => (
-                      <FaStar 
-                        key={i}
-                        className={`text-2xl mx-1 ${
-                          i < getStarRating() 
-                            ? 'text-yellow-400 fill-current' 
-                            : 'text-gray-300 dark:text-gray-600 fill-current'
-                        }`}
-                      />
-                    ))}
-                  </div>
-                </div>
-                
-                <h3 className="text-2xl font-bold mb-2 dark:text-white">
-                  {score === questions.length ? "Perfect Score!" :
-                   score >= questions.length * 0.8 ? "Excellent Work!" :
-                   score >= questions.length * 0.6 ? "Good Job!" :
-                   score >= questions.length * 0.4 ? "Keep Practicing!" : "Let's Review Again!"}
-                </h3>
-                <p className="text-gray-600 dark:text-gray-400 mb-6">
-                  You scored {((score / questions.length) * 100).toFixed(0)}% correct
-                </p>
-              </div>
-              
-              <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-                <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-                  <FaInfoCircle className="mr-2" /> Performance Analysis
-                </h4>
-                <p className="text-sm">{calculateWeakAreas()}</p>
-              </div>
-              
-              <div className="space-y-4 mb-8">
-                <h4 className="font-bold text-gray-700 dark:text-gray-300">Question Breakdown:</h4>
-                {questions.map((q, index) => (
-                  <div key={index} className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0">
-                    <p className="font-medium text-gray-800 dark:text-gray-200">{q.question}</p>
-                    <div className={`flex items-start mt-1 ${
-                      answers[index] === q.correctAnswer 
-                        ? 'text-green-600 dark:text-green-400' 
-                        : 'text-red-600 dark:text-red-400'
-                    }`}>
-                      {answers[index] === q.correctAnswer ? (
-                        <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                      ) : (
-                        <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                      )}
-                      <div>
-                        <p className="text-sm">Your answer: {answers[index] !== null ? q.options[answers[index]] : "Not answered"}</p>
-                        {answers[index] !== q.correctAnswer && (
-                          <p className="text-sm">Correct answer: {q.options[q.correctAnswer]}</p>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-              
-              <button
-                onClick={resetQuiz}
-                className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-              >
-                <FaRedo className="mr-2" /> Take Quiz Again
-              </button>
-            </motion.div>
-          )}
-        </section>
-  );
-};
-
-export default BinarySearchQuiz;
\ No newline at end of file
diff --git a/app/visualizer/searching/linearsearch/animation.jsx b/app/visualizer/searching/linearsearch/animation.jsx
deleted file mode 100755
index 76544cee1..000000000
--- a/app/visualizer/searching/linearsearch/animation.jsx
+++ /dev/null
@@ -1,268 +0,0 @@
-"use client";
-import React, { useState, useEffect, useRef } from "react";
-import { gsap } from "gsap";
-import ResetButton from "@/app/components/ui/resetButton";
-import GoButton from "@/app/components/ui/goButton";
-
-const LinearSearch = () => {
-  const [arrayElements, setArrayElements] = useState("");
-  const [target, setTarget] = useState("");
-  const [array, setArray] = useState([]);
-  const [currentIndex, setCurrentIndex] = useState(-1);
-  const [foundIndex, setFoundIndex] = useState(-1);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [message, setMessage] = useState("");
-  const [speed] = useState(1);
-  const animationRef = useRef(null);
-  const formRef = useRef(null);
-  const elementRefs = useRef([]);
-
-  // Clean up animation on unmount
-  useEffect(() => {
-    return () => {
-      if (animationRef.current) {
-        clearTimeout(animationRef.current);
-      }
-    };
-  }, []);
-
-  const handleReset = () => {
-    setArray([]);
-    setCurrentIndex(-1);
-    setFoundIndex(-1);
-    setMessage("");
-    setIsAnimating(false);
-    if (animationRef.current) {
-      clearTimeout(animationRef.current);
-      animationRef.current = null;
-    }
-    setArrayElements("");
-    setTarget("");
-    if (formRef.current) {
-      formRef.current.reset();
-    }
-    // Reset GSAP animations
-    elementRefs.current.forEach((ref) => {
-      gsap.to(ref, {
-        backgroundColor: "#E5E7EB",
-        borderColor: "#D1D5DB",
-        duration: 0,
-      });
-    });
-  };
-
-  const generateRandomArray = () => {
-    if (isAnimating) return;
-    const size = Math.floor(Math.random() * 4) + 2; // Random size between 2 and 5
-    const elements = Array.from({ length: size }, () =>
-      Math.floor(Math.random() * 100)
-    );
-    setArrayElements(elements.join(", "));
-  };
-
-  const handleGo = (e) => {
-    e.preventDefault();
-    handleReset();
-
-    if (!arrayElements || !target) {
-      setMessage("Please fill in all fields.");
-      return;
-    }
-
-    const elements = arrayElements.split(",").map((el) => parseInt(el.trim()));
-    const targetValue = parseInt(target);
-
-    if (elements.some(isNaN) || isNaN(targetValue)) {
-      setMessage("Invalid array elements or target.");
-      return;
-    }
-
-    setArray(elements);
-    setIsAnimating(true);
-    animateLinearSearch(elements, targetValue);
-  };
-
-  const animateLinearSearch = (arr, targetValue) => {
-    let index = 0;
-
-    const step = () => {
-      if (index < arr.length) {
-        setCurrentIndex(index);
-
-        // GSAP animation for current element
-        gsap.to(elementRefs.current[index], {
-          backgroundColor: "#EAB308",
-          borderColor: "#A16207",
-          duration: 0.3,
-          onComplete: () => {
-            if (arr[index] === targetValue) {
-              finishSearch(index, targetValue);
-            } else if (index === arr.length - 1) {
-              finishSearch(-1, targetValue);
-            } else {
-              // Reset previous element's style
-              gsap.to(elementRefs.current[index], {
-                backgroundColor: "#E5E7EB",
-                borderColor: "#D1D5DB",
-                duration: 0.3,
-              });
-              index++;
-              animationRef.current = setTimeout(step, 1000 / speed);
-            }
-          },
-        });
-      }
-    };
-
-    step();
-  };
-
-  const finishSearch = (foundIdx, targetValue) => {
-    setIsAnimating(false);
-
-    if (foundIdx !== -1) {
-      setFoundIndex(foundIdx);
-      setMessage(`Element ${targetValue} found at index ${foundIdx}!`);
-      gsap.to(elementRefs.current[foundIdx], {
-        backgroundColor: "#22C55E",
-        borderColor: "#15803D",
-        duration: 0.3,
-      });
-    } else {
-      setMessage(`Element ${targetValue} not found in the array.`);
-    }
-  };
-
-  return (
-    <main className="container mx-auto px-6 pb-4">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-        Visualize how Linear Search works by sequentially checking each element
-        in an array.
-      </p>
-
-      {/* Input Form */}
-      <form
-        ref={formRef}
-        onSubmit={handleGo}
-        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl mb-8 border border-gray-200 dark:border-gray-700"
-      >
-        <div className="mb-4">
-          <label
-            className="block text-gray-700 dark:text-gray-300 mb-2"
-            htmlFor="arrayElements"
-          >
-            Array Elements
-          </label>
-          <div className="flex gap-2">
-            <input
-              type="text"
-              id="arrayElements"
-              value={arrayElements}
-              onChange={(e) => setArrayElements(e.target.value)}
-              className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-400 transition duration-300"
-              placeholder="eg. 3, 1, 4, 1, 5"
-              disabled={isAnimating}
-            />
-            <button
-              type="button"
-              onClick={generateRandomArray}
-              className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300"
-              disabled={isAnimating}
-            >
-              Random
-            </button>
-          </div>
-        </div>
-        <div className="mb-4">
-  <label
-    className="block text-gray-700 dark:text-gray-300 mb-2"
-    htmlFor="target"
-  >
-    Target Element
-  </label>
-
-  <div className="flex flex-col sm:flex-row sm:items-end gap-4">
-    <input
-      type="number"
-      id="target"
-      value={target}
-      onChange={(e) => setTarget(e.target.value)}
-      className="w-full sm:max-w-xs p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-400 transition duration-300"
-      placeholder="eg. 4"
-      disabled={isAnimating}
-    />
-
-    <div className="flex gap-2 w-full">
-      <GoButton
-        onClick={handleGo}
-        isAnimating={isAnimating}
-        disabled={isAnimating}
-      />
-      <ResetButton onReset={handleReset} isAnimating={isAnimating} />
-    </div>
-  </div>
-</div>
-      </form>
-
-      {/* Output Screen */}
-      {message && (
-        <div
-          className={`max-w-3xl mx-auto mb-8 p-4 rounded-lg ${
-            foundIndex !== -1
-              ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
-              : "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200"
-          }`}
-        >
-          <p className="text-center font-medium">{message}</p>
-        </div>
-      )}
-
-      {/* Visualization */}
-      {array.length > 0 && (
-        <div className="max-w-4xl mx-auto bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
-          <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
-            Array Visualization
-          </h2>
-          <div className="flex flex-wrap gap-4 justify-center">
-            {array.map((element, index) => (
-              <div
-                key={index}
-                ref={(el) => (elementRefs.current[index] = el)}
-                className={`relative w-20 h-20 flex flex-col items-center justify-center rounded-lg border-2 transition-all duration-300 ${
-                  currentIndex === index && foundIndex === -1
-                    ? "bg-yellow-600 dark:bg-yellow-600 border-yellow-700 dark:border-yellow-400 text-gray-800 dark:text-white"
-                    : foundIndex === index
-                    ? "bg-green-500 dark:bg-green-600 border-green-700 dark:border-green-400 text-gray-800 dark:text-white"
-                    : "bg-gray-200 dark:bg-gray-900 border-gray-300 dark:border-gray-600 text-gray-800 dark:text-white"
-                }`}
-              >
-                <span className="text-xl font-bold">{element}</span>
-                <span className="absolute -bottom-6 text-sm font-medium text-gray-600 dark:text-gray-400">
-                  [{index}]
-                </span>
-              </div>
-            ))}
-          </div>
-
-          {/* Legend */}
-          <div className="mt-8 flex flex-wrap justify-center gap-4">
-            <div className="flex items-center">
-              <div className="w-4 h-4 bg-yellow-500 dark:bg-yellow-600 rounded mr-2"></div>
-              <span className="text-sm">Current Element</span>
-            </div>
-            <div className="flex items-center">
-              <div className="w-4 h-4 bg-green-500 dark:bg-green-600 rounded mr-2"></div>
-              <span className="text-sm">Found Element</span>
-            </div>
-            <div className="flex items-center">
-              <div className="w-4 h-4 bg-gray-200 dark:bg-gray-900 rounded mr-2"></div>
-              <span className="text-sm">Unchecked Elements</span>
-            </div>
-          </div>
-        </div>
-      )}
-    </main>
-  );
-};
-
-export default LinearSearch;
diff --git a/app/visualizer/searching/linearsearch/codeBlock.jsx b/app/visualizer/searching/linearsearch/codeBlock.jsx
deleted file mode 100755
index 380a67675..000000000
--- 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
deleted file mode 100755
index c8a6e88d8..000000000
--- a/app/visualizer/searching/linearsearch/content.jsx
+++ /dev/null
@@ -1,239 +0,0 @@
-"use client";
-import ComplexityGraph from "@/app/components/ui/graph";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState('light');
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem('theme') || 'light';
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener('storage', updateTheme);
-    window.addEventListener('themeChange', updateTheme);
-
-    return () => {
-      window.removeEventListener('storage', updateTheme);
-      window.removeEventListener('themeChange', updateTheme);
-    };
-  }, []);
-
-  const paragraphs = [
-    `Linear Search is a simple method to find a particular value in a list. It checks each element one by one from the start until it finds the target value. If the value is found, it returns its position; otherwise, it says the value is not present.`,
-    `Imagine you have a list of numbers: [5, 3, 8, 1, 9] and you want to find the number 8.`,
-    `If the number is not in the list (e.g., searching for 10), the search ends without success.`,
-    `Linear Search is easy to understand but can be slow for large lists compared to faster methods like Binary Search.`,
-  ];
-
-  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:
-        "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).",
-    },
-  ];
-
-  const complexity = [
-    { data: "Best Case: Target is the first element → O(1)" },
-    {
-      data: "Worst Case: Target is last or not present → O(n) (checks all elements)",
-    },
-  ];
-
-  const algorithm = [
-    { points: "Start from the first element." },
-    {
-      points: "Compare the current element with the target value.",
-      subpoints: [
-        "If they match, return the position.",
-        "If not, move to the next element.",
-      ],
-    },
-    { points: "Repeat until the end of the list." },
-    { points: 'If the element is not found, return "Not Found".' },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge By{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* What is Linear Search */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            What is Linear Search?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraphs[0]}
-            </p>
-          </div>
-        </section>
-
-        {/* How Does It Work */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            How Does It Work?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              {paragraphs[1]}
-            </p>
-
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {working.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ol>
-
-            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
-              {paragraphs[2]}
-            </p>
-          </div>
-        </section>
-
-        {/* Algorithm Steps */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Algorithm Steps
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {algorithm.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                  {item.subpoints && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {item.subpoints.map((subitem, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitem}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Time Complexity */}
-        <section className="p-6">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Time Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {complexity.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
-                    {item.data.split(":")[0]}:
-                  </span>
-                  <span className="ml-2">{item.data.split(":")[1]}</span>
-                </li>
-              ))}
-            </ul>
-
-            <div className="mt-8">
-              <ComplexityGraph
-                bestCase={(n) => 1}
-                averageCase={(n) => n}
-                worstCase={(n) => n}
-                maxN={25}
-              />
-            </div>
-
-            <div className="mt-6 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                {paragraphs[3]}
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge By{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
\ No newline at end of file
diff --git a/app/visualizer/searching/linearsearch/page.jsx b/app/visualizer/searching/linearsearch/page.jsx
deleted file mode 100755
index 0fea1a8ff..000000000
--- a/app/visualizer/searching/linearsearch/page.jsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import LinearSearchAnimation from "@/app/visualizer/searching/linearsearch/animation";
-import Navbar from "@/app/components/navbarinner";
-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 Quiz from "@/app/visualizer/searching/linearsearch/quiz";
-import Content from "@/app/visualizer/searching/linearsearch/content";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-
-export const metadata = {
-  title: "Linear Search Algorithm | Step-by-Step Animation",
-  description:
-    "Visualize the Linear Search algorithm with step-by-step animations, code examples in JavaScript, C, Python, and Java, and a Linear Search Quiz to test your understanding. Build a strong foundation in DSA through interactive learning.",
-  keywords: [
-    "Linear Search Visualizer",
-    "Linear Search Visualization",
-    "Linear Search Animation",
-    "Learn Linear Search",
-    "Linear Search for Beginners",
-    "Step-by-Step Linear Search",
-    "Visualize Linear Search Algorithm",
-    "DSA Linear Search",
-    "Algorithm Visualizer",
-    "DSA Searching Algorithms",
-    "Search Algorithms DSA",
-    "Linear Search in JavaScript",
-    "Linear Search in C",
-    "Linear Search in Python",
-    "Linear Search in Java",
-    "Linear Search Code Examples",
-    "Linear Search Quiz",
-    "Interactive Linear Search Quiz",
-    "DSA Quiz",
-    "Quiz for Searching Algorithms",
-    "Learn DSA with Quizzes",
-    "Linear Search Practice",
-    "Test Your Linear Search Skills",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/searching/linearSearch.png",
-        width: 1200,
-        height: 630,
-        alt: "Linear Search Algorithm Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Linear Search", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Searching
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Linear Search
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section>
-          <LinearSearchAnimation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-[#6b7280] dark:text-[#9ca3af] mb-2">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.linearSearch}
-            title="Linear Search"
-            description="Mark linear search as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section className="px-6">
-          <ExploreOther
-            title="Explore other operations"
-            links={[{ text: "Binary Search", url: "./binarysearch" }]}
-          />
-        </section>
-      </div>
-
-      <BackToTopButton />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/searching/linearsearch/quiz.jsx b/app/visualizer/searching/linearsearch/quiz.jsx
deleted file mode 100755
index a7ff93d99..000000000
--- a/app/visualizer/searching/linearsearch/quiz.jsx
+++ /dev/null
@@ -1,385 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const LinearSearchQuiz = () => {
-  const questions = [
-    {
-      question: "What is the basic principle of linear search?",
-      options: [
-        "Dividing the list in half repeatedly",
-        "Checking each element one by one from the start",
-        "Sorting the list first then searching",
-        "Starting from the middle of the list"
-      ],
-      correctAnswer: 1,
-      explanation: "Linear search works by checking each element sequentially from the beginning until it finds the target value."
-    },
-    {
-      question: "What is the time complexity of linear search in the worst case?",
-      options: [
-        "O(1)",
-        "O(log n)",
-        "O(n)",
-        "O(n²)"
-      ],
-      correctAnswer: 2,
-      explanation: "In the worst case (when the target is last or not present), linear search checks all n elements, resulting in O(n) complexity."
-    },
-    {
-      question: "In the array [5, 3, 8, 1, 9], how many comparisons are needed to find the number 1?",
-      options: [
-        "1",
-        "2",
-        "3",
-        "4"
-      ],
-      correctAnswer: 3,
-      explanation: "The search checks 5 (1st), 3 (2nd), 8 (3rd), and finally finds 1 on the 4th comparison."
-    },
-    {
-      question: "When would linear search perform at its best?",
-      options: [
-        "When the target is at the end of the list",
-        "When the target is at the middle of the list",
-        "When the target is at the beginning of the list",
-        "When the list is sorted"
-      ],
-      correctAnswer: 2,
-      explanation: "Linear search performs best (O(1)) when the target is the first element, as it only needs one comparison."
-    },
-    {
-      question: "What would a linear search algorithm return if the target value is not in the list?",
-      options: [
-        "The first element",
-        "The last element",
-        "An error message",
-        "A 'not found' indication"
-      ],
-      correctAnswer: 3,
-      explanation: "When the target isn't found, linear search typically returns a special value (like -1 or 'not found') to indicate this."
-    }
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowIntro(true);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of linear search");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting comparisons in linear search");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("performance characteristics");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("edge case handling");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all linear search concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div 
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Linear Search Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: 'spring', stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div 
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p 
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div 
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500" 
-                style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
-              />
-            </div>
-          </div>
-          
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-            
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div 
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md'
-                      : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                      selectedAnswer === index 
-                        ? 'bg-blue-500 text-white' 
-                        : 'bg-gray-200 dark:bg-gray-600'
-                    }`}>
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-            
-          </motion.div>
-          
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-            
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? 'Finish' : 'Next'} <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar 
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating() 
-                        ? 'text-yellow-400 fill-current' 
-                        : 'text-gray-300 dark:text-gray-600 fill-current'
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-            
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length ? "Perfect Score!" :
-               score >= questions.length * 0.8 ? "Excellent Work!" :
-               score >= questions.length * 0.6 ? "Good Job!" :
-               score >= questions.length * 0.4 ? "Keep Practicing!" : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}% correct
-            </p>
-          </div>
-          
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-          
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">Question Breakdown:</h4>
-            {questions.map((q, index) => (
-              <div key={index} className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0">
-                <p className="font-medium text-gray-800 dark:text-gray-200">{q.question}</p>
-                <div className={`flex items-start mt-1 ${
-                  answers[index] === q.correctAnswer 
-                    ? 'text-green-600 dark:text-green-400' 
-                    : 'text-red-600 dark:text-red-400'
-                }`}>
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">Your answer: {answers[index] !== null ? q.options[answers[index]] : "Not answered"}</p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">Correct answer: {q.options[q.correctAnswer]}</p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-          
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default LinearSearchQuiz;
\ No newline at end of file
diff --git a/app/visualizer/sorting/bubblesort/animation.jsx b/app/visualizer/sorting/bubblesort/animation.jsx
deleted file mode 100755
index f273b4a2b..000000000
--- a/app/visualizer/sorting/bubblesort/animation.jsx
+++ /dev/null
@@ -1,239 +0,0 @@
-"use client";
-import React, { useState, useRef, useEffect } from "react";
-import { gsap } from "gsap";
-import ArrayGenerator from "@/app/components/ui/randomArray";
-import CustomArrayInput from "@/app/components/ui/customArrayInput";
-
-const BubbleSortVisualizer = () => {
-  const [array, setArray] = useState([]);
-  const [sorting, setSorting] = useState(false);
-  const [sorted, setSorted] = useState(false);
-  const [speed, setSpeed] = useState(1);
-  const [comparisons, setComparisons] = useState(0);
-  const [swaps, setSwaps] = useState(0);
-  const [currentIndices, setCurrentIndices] = useState({ i: -1, j: -1 });
-  const animationRef = useRef(null);
-
-  // Handle array generation from child component
-  const handleArrayGenerated = (newArray) => {
-    setArray(newArray);
-    setSorted(false);
-    resetStats();
-  };
-
-  // Reset all stats and state
-  const resetStats = () => {
-    setComparisons(0);
-    setSwaps(0);
-    setCurrentIndices({ i: -1, j: -1 });
-    if (animationRef.current) {
-      clearTimeout(animationRef.current);
-    }
-  };
-
-  // Optimized bubble sort
-  const bubbleSort = async () => {
-    if (sorted || sorting || array.length === 0) return;
-
-    setSorting(true);
-    let arr = [...array];
-    let n = arr.length;
-    let tempSwaps = 0;
-    let tempComparisons = 0;
-
-    for (let i = 0; i < n - 1; i++) {
-      let swapped = false;
-
-      for (let j = 0; j < n - i - 1; j++) {
-        setCurrentIndices({ i: j, j: j + 1 });
-        tempComparisons++;
-        setComparisons(tempComparisons);
-
-        await new Promise(
-          (resolve) =>
-            (animationRef.current = setTimeout(resolve, 1000 / speed))
-        );
-
-        if (arr[j] > arr[j + 1]) {
-          const bars = document.querySelectorAll(".bar");
-          const bar1 = bars[j];
-          const bar2 = bars[j + 1];
-          if (bar1 && bar2) {
-            await gsap.to(bar1, {
-              x: "+=40",
-              duration: 0.3,
-              yoyo: true,
-            });
-            await gsap.to(bar2, {
-              x: "-=40",
-              duration: 0.3,
-              yoyo: true,
-            });
-            await gsap.to([bar1, bar2], {
-              x: "0",
-              duration: 0,
-            });
-          }
-
-          [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
-          swapped = true;
-          tempSwaps++;
-          setSwaps(tempSwaps);
-          setArray([...arr]);
-
-          await new Promise(
-            (resolve) =>
-              (animationRef.current = setTimeout(resolve, 1000 / speed))
-          );
-        }
-      }
-
-      if (!swapped) break;
-    }
-
-    setSorting(false);
-    setSorted(true);
-  };
-
-  // Reset everything
-  const reset = () => {
-    if (animationRef.current) {
-      clearTimeout(animationRef.current);
-    }
-    setArray([]);
-    setSorting(false);
-    setSorted(false);
-    resetStats();
-  };
-
-  // Clean up on unmount
-  useEffect(() => {
-    return () => {
-      if (animationRef.current) {
-        clearTimeout(animationRef.current);
-      }
-    };
-  }, []);
-
-  return (
-    <main className="container mx-auto px-6 pb-4">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-        Watch Bubble Sort in action as it repeatedly swaps adjacent elements to
-        sort the array step by step.
-      </p>
-
-      <div className="max-w-4xl mx-auto">
-        {/* Controls */}
-        <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-2 mb-2">
-            <div className="flex flex-col gap-1">
-              <ArrayGenerator
-                onGenerate={handleArrayGenerated}
-                disabled={sorting}
-              />
-              <CustomArrayInput
-                onUseCustomArray={(arr) => {
-                  setArray(arr);
-                  setSorted(false);
-                  resetStats();
-                }}
-                disabled={sorting}
-                className="w-full"
-              />
-            </div>
-            <div className="flex flex-col gap-2 justify-between">
-              <button
-                onClick={bubbleSort}
-                disabled={!array.length || sorting || sorted}
-                className="w-full disabled:opacity-75 bg-none bg-green-500 px-4 py-2 rounded shadow-sm transition-all duration-300 text-sm sm:text-base text-black"
-              >
-                {sorting ? "Sorting..." : "Start Bubble Sort"}
-              </button>
-              <button
-                onClick={reset}
-                className="w-full bg-none text-white bg-red-500 px-4 py-2 rounded transition-colors text-sm sm:text-base"
-              >
-                Reset All
-              </button>
-            </div>
-          </div>
-
-          {/* Speed controls */}
-          <div className="flex items-center gap-4 mb-4">
-            <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">
-              Speed:
-            </span>
-            <input
-              type="range"
-              min="0.5"
-              max="5"
-              step="0.5"
-              value={speed}
-              onChange={(e) => setSpeed(parseFloat(e.target.value))}
-              className="w-24 sm:w-32"
-              disabled={sorting}
-            />
-            <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">
-              {speed}x
-            </span>
-          </div>
-
-          {/* Stats */}
-          <div className="grid grid-cols-2 gap-4 text-sm sm:text-base">
-            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
-              <div className="font-medium">Comparisons:</div>
-              <div className="text-xl sm:text-2xl">{comparisons}</div>
-            </div>
-            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
-              <div className="font-medium">Swaps:</div>
-              <div className="text-xl sm:text-2xl">{swaps}</div>
-            </div>
-          </div>
-        </div>
-
-        {/* Visualization */}
-        <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-          <h2 className="text-lg sm:text-xl font-semibold mb-4">
-            Array Visualization
-          </h2>
-          {array.length > 0 ? (
-            <div className="flex flex-wrap gap-2 sm:gap-4 justify-center">
-              {array.map((value, index) => {
-                const isComparing =
-                  index === currentIndices.i || index === currentIndices.j;
-                const isSorted = sorted;
-
-                return (
-                  <div key={index} className="flex flex-col items-center">
-                    <div
-                      className={`bar w-12 h-12 sm:w-16 sm:h-16 flex items-center justify-center rounded-lg border-2 shadow-md dark:shadow-blue-900 transition-all duration-300 text-sm sm:text-lg font-bold
-                            ${
-                              isComparing
-                                ? "bg-yellow-400 dark:bg-yellow-400 border-yellow-600 dark:border-yellow-600 dark:text-gray-900"
-                                : isSorted
-                                ? "bg-green-400 dark:bg-green-400 border-green-600 dark:border-green-600 dark:text-gray-900"
-                                : "bg-blue-400 dark:bg-blue-400 border-blue-600 dark:border-blue-600 dark:text-gray-900"
-                            }`}
-                    >
-                      {value}
-                    </div>
-                    <div className="mt-1 text-xs text-gray-700 dark:text-blue-300 font-semibold">
-                      {index === currentIndices.i && "i"}
-                      {index === currentIndices.j && "j"}
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          ) : (
-            <div className="text-center py-8 text-gray-500 text-sm sm:text-base">
-              {sorting ? "Sorting..." : "Generate or enter an array to begin"}
-            </div>
-          )}
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default BubbleSortVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/sorting/bubblesort/codeBlock.jsx b/app/visualizer/sorting/bubblesort/codeBlock.jsx
deleted file mode 100755
index 7a65e0ecd..000000000
--- 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
deleted file mode 100755
index c0de71553..000000000
--- a/app/visualizer/sorting/bubblesort/content.jsx
+++ /dev/null
@@ -1,288 +0,0 @@
-"use client";
-import ComplexityGraph from "@/app/components/ui/graph";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem("theme") || "light";
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener("storage", updateTheme);
-    window.addEventListener("themeChange", updateTheme);
-
-    return () => {
-      window.removeEventListener("storage", updateTheme);
-      window.removeEventListener("themeChange", updateTheme);
-    };
-  }, []);
-
-  const paragraph = [
-    `Bubble Sort is a simple sorting algorithm that repeatedly steps through the list, compares adjacent elements and swaps them if they are in the wrong order. The pass through the list is repeated until the list is sorted. It gets its name because smaller elements "bubble" to the top of the list.`,
-    `Bubble Sort is an in-place sorting algorithm, meaning it requires only O(1) additional space (for temporary storage during swaps).`,
-    `Bubble Sort is simple to understand and implement but inefficient for large datasets. It's mainly used for educational purposes to introduce sorting algorithms. In practice, more efficient algorithms like QuickSort or MergeSort are preferred.`,
-  ];
-
-  const working = [
-    {
-      passes: "First Pass:",
-      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",
-      ],
-    },
-    {
-      passes: "Second Pass:",
-      points: [
-        "(1, 4) → No swap",
-        "(4, 2) → Swap → [1, 2, 4, 5, 8]",
-        "(4, 5) → No swap",
-      ],
-    },
-    { passes: "Third Pass:", points: ["No swaps needed → List is sorted"] },
-  ];
-
-  const algorithm = [
-    { points: "Start with an unsorted array" },
-    { points: "Set a flag to track if any swaps occur" },
-    {
-      points: "For each pair of adjacent elements:",
-      subpoints: [
-        "Compare the two elements",
-        "If they are in the wrong order, swap them",
-        "Set the swap flag to true",
-      ],
-    },
-    {
-      points:
-        "Repeat the process until a complete pass is made without any swaps",
-    },
-    { points: "The array is now sorted" },
-  ];
-
-  const complexity = [
-    {
-      points:
-        "Best Case: Array is already sorted → O(n) (only one pass needed).",
-    },
-    { points: "Average Case: Randomly ordered array → O(n²)." },
-    { points: "Worst Case: Array is sorted in reverse order → O(n²)." },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge By{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* What is Bubble Sort */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            What is Bubble Sort?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraph[0]}
-            </p>
-          </div>
-        </section>
-
-        {/* How Does It Work */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            How Does It Work?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              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">
-              {working.map((items, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {items.passes}
-                  {items.points && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {items.points.map((subitems, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitems}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-
-            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
-              The algorithm stops when a complete pass is made without any
-              swaps.
-            </p>
-          </div>
-        </section>
-
-        {/* Algorithm Steps */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Algorithm Steps
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {algorithm.map((items, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {items.points}
-                  {items.subpoints && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {items.subpoints.map((subitems, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitems}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Time Complexity */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Time Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {complexity.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
-                    {item.points.split(":")[0]}:
-                  </span>
-                  <span className="ml-2">{item.points.split(":")[1]}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          <div className="mt-8">
-            <ComplexityGraph
-              bestCase={(n) => 1}
-              averageCase={(n) => n * n}
-              worstCase={(n) => n * n}
-              maxN={25}
-            />
-          </div>
-        </section>
-
-        {/* Space Complexity */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Space Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraph[1]}
-            </p>
-          </div>
-        </section>
-
-        {/* Additional Info */}
-        <section className="p-6">
-          <div className="prose dark:prose-invert max-w-none">
-            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                {paragraph[2]}
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge By{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
diff --git a/app/visualizer/sorting/bubblesort/page.jsx b/app/visualizer/sorting/bubblesort/page.jsx
deleted file mode 100755
index be3579a90..000000000
--- a/app/visualizer/sorting/bubblesort/page.jsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import Animation from "@/app/visualizer/sorting/bubblesort/animation";
-import Navbar from "@/app/components/navbarinner";
-import BackToTopButton from "@/app/components/ui/backtotop";
-import Footer from "@/app/components/footer";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-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 ExploreOther from "@/app/components/ui/exploreOther";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-
-export const metadata = {
-  title: "Bubble Sort Algorithm | Step-by-Step Animation",
-  description:
-    "Visualize Bubble Sort in action with interactive animations, code examples in JavaScript, C, Python, and Java, and test your understanding with a dedicated Bubble Sort quiz. Learn how Bubble Sort works through comparisons and swaps in an easy-to-understand format.",
-  keywords: [
-    "Bubble Sort Visualizer",
-    "Bubble Sort Animation",
-    "Bubble Sort Algorithm",
-    "Bubble Sort Quiz",
-    "Sorting Algorithm Quiz",
-    "Sorting Algorithm Visualization",
-    "DSA Bubble Sort",
-    "Learn Bubble Sort",
-    "Sorting for Beginners",
-    "Step by Step Bubble Sort",
-    "Interactive Sorting Tool",
-    "Bubble Sort in JavaScript",
-    "Bubble Sort in C",
-    "Bubble Sort in Python",
-    "Bubble Sort in Java",
-    "Bubble Sort Code Examples",
-    "Practice Bubble Sort",
-    "DSA Bubble Sort Quiz",
-    "Interactive DSA Quiz",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/sorting/bubbleSort.png",
-        width: 1200,
-        height: 630,
-        alt: "Bubble Sort Algorithm Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Bubble Sort", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Sorting
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Bubble Sort
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section>
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-[#6b7280] dark:text-[#9ca3af] mb-2">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.bubbleSort}
-            title="Bubble Sort"
-            description="Mark Bubble Sort as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section className="px-6">
-          <ExploreOther
-          title="Explore Sorting Algorithms"
-          links={[
-            {
-              text: "Selection Sort",
-              url: "/visualizer/sorting/selectionsort",
-            },
-            {
-              text: "Insertion Sort",
-              url: "/visualizer/sorting/insertionsort",
-            },
-            { text: "Merge Sort", url: "/visualizer/sorting/mergesort" },
-            { text: "Quick Sort", url: "/visualizer/sorting/quicksort" },
-            { text: "Heap Sort", url: "/algorithms/sorting/heap" },
-          ]}
-        />
-        </section>
-      </div>
-
-      <BackToTopButton />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/sorting/bubblesort/quiz.jsx b/app/visualizer/sorting/bubblesort/quiz.jsx
deleted file mode 100755
index 635d980f6..000000000
--- a/app/visualizer/sorting/bubblesort/quiz.jsx
+++ /dev/null
@@ -1,448 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import {
-  FaCheck,
-  FaTimes,
-  FaArrowRight,
-  FaArrowLeft,
-  FaInfoCircle,
-  FaRedo,
-  FaTrophy,
-  FaStar,
-  FaAward,
-} from "react-icons/fa";
-import { motion, AnimatePresence } from "framer-motion";
-
-const BubbleSortQuiz = () => {
-  const questions = [
-    {
-      question: "What is the basic principle of Bubble Sort?",
-      options: [
-        "Dividing the list into smaller sublists",
-        "Repeatedly swapping adjacent elements if they are in the wrong order",
-        "Selecting the smallest element and moving it to the front",
-        "Merging two sorted lists into one",
-      ],
-      correctAnswer: 1,
-      explanation:
-        "Bubble Sort works by repeatedly stepping through the list, comparing adjacent elements and swapping them if they are in the wrong order.",
-    },
-    {
-      question: "What is the time complexity of Bubble Sort in the worst case?",
-      options: ["O(n)", "O(n log n)", "O(n²)", "O(1)"],
-      correctAnswer: 2,
-      explanation:
-        "In the worst case (when the list is sorted in reverse order), Bubble Sort requires O(n²) comparisons and swaps.",
-    },
-    {
-      question:
-        "In the array [5, 1, 4, 2, 8], how many swaps occur during the first pass of Bubble Sort?",
-      options: ["1", "2", "3", "4"],
-      correctAnswer: 2,
-      explanation:
-        "First pass swaps (5,1), (5,4), and (5,2) - totaling 3 swaps. The pair (5,8) doesn't need swapping.",
-    },
-    {
-      question: "When would Bubble Sort perform at its best?",
-      options: [
-        "When the array is in random order",
-        "When the array is sorted in reverse order",
-        "When the array is already sorted",
-        "When the array contains duplicate values",
-      ],
-      correctAnswer: 2,
-      explanation:
-        "Bubble Sort performs best (O(n)) when the array is already sorted, as it only needs one pass through the array without any swaps.",
-    },
-    {
-      question: "What is the space complexity of Bubble Sort?",
-      options: ["O(n)", "O(n log n)", "O(n²)", "O(1)"],
-      correctAnswer: 3,
-      explanation:
-        "Bubble Sort is an in-place algorithm that only requires O(1) additional space for temporary storage during swaps.",
-    },
-    {
-      question:
-        "How can you optimize Bubble Sort to stop early if the array becomes sorted?",
-      options: [
-        "By counting the number of swaps",
-        "By using a flag to check if any swaps occurred in a pass",
-        "By reducing the array size after each pass",
-        "By sorting the array in both directions",
-      ],
-      correctAnswer: 1,
-      explanation:
-        "Using a flag to track if any swaps occurred during a pass allows the algorithm to terminate early if the array is already sorted.",
-    },
-    {
-      question:
-        "Why is Bubble Sort rarely used in practice for large datasets?",
-      options: [
-        "Because it's too complex to implement",
-        "Because it's not a stable sorting algorithm",
-        "Because of its O(n²) time complexity for average cases",
-        "Because it requires O(n) additional space",
-      ],
-      correctAnswer: 2,
-      explanation:
-        "While simple to implement, Bubble Sort's O(n²) time complexity makes it inefficient for large datasets compared to algorithms like QuickSort or MergeSort.",
-    },
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowIntro(true);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Bubble Sort");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Bubble Sort");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("performance characteristics");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("optimization techniques");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
-    }
-
-    return weakAreas.length > 0
-      ? `Focus on improving: ${weakAreas.join(
-          ", "
-        )}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Bubble Sort concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Bubble Sort Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default BubbleSortQuiz;
\ No newline at end of file
diff --git a/app/visualizer/sorting/insertionsort/animation.jsx b/app/visualizer/sorting/insertionsort/animation.jsx
deleted file mode 100755
index a72f2e156..000000000
--- a/app/visualizer/sorting/insertionsort/animation.jsx
+++ /dev/null
@@ -1,323 +0,0 @@
-"use client";
-import React, { useState, useRef, useEffect } from "react";
-import { gsap } from "gsap";
-import RandomArray from "@/app/components/ui/randomArray";
-import CustomArrayInput from "@/app/components/ui/customArrayInput";
-
-const InsertionSortVisualizer = () => {
-  const [array, setArray] = useState([]);
-  const [sorting, setSorting] = useState(false);
-  const [sorted, setSorted] = useState(false);
-  const [speed, setSpeed] = useState(1);
-  const [comparisons, setComparisons] = useState(0);
-  const [swaps, setSwaps] = useState(0);
-  const [currentIndices, setCurrentIndices] = useState({
-    current: -1, // The element being inserted
-    comparing: -1, // The element being compared against
-    sortedUpTo: -1, // Up to which index is sorted
-  });
-  const animationRef = useRef(null);
-  const barRefs = useRef([]);
-
-  // Handle array generation from RandomArray component
-  const handleRandomArray = (newArray) => {
-    setArray(newArray);
-    setSorted(false);
-    resetStats();
-  };
-
-  // Handle custom array from CustomArrayInput component
-  const handleCustomArray = (newArray) => {
-    setArray(newArray);
-    setSorted(false);
-    resetStats();
-  };
-
-  // Reset all stats and state
-  const resetStats = () => {
-    setComparisons(0);
-    setSwaps(0);
-    setCurrentIndices({ current: -1, comparing: -1, sortedUpTo: -1 });
-    if (animationRef.current) {
-      clearTimeout(animationRef.current);
-    }
-  };
-
-  // Insertion sort algorithm
-  const insertionSort = async () => {
-    if (sorted || sorting || array.length === 0) return;
-
-    // Normalize all bars: Reset x-position before rendering starts
-    barRefs.current.forEach((bar) => {
-      if (bar) gsap.set(bar, { x: 0, y: 0 });
-    });
-
-    setSorting(true);
-    let arr = [...array];
-    let n = arr.length;
-
-    // The first element is considered sorted
-    setCurrentIndices({
-      current: 1,
-      comparing: 0,
-      sortedUpTo: 0,
-    });
-
-    for (let i = 1; i < n; i++) {
-      let current = arr[i];
-      let j = i - 1;
-
-      setCurrentIndices({
-        current: i,
-        comparing: j,
-        sortedUpTo: i - 1,
-      });
-
-      await new Promise(
-        (resolve) => (animationRef.current = setTimeout(resolve, 1000 / speed))
-      );
-
-      while (j >= 0 && arr[j] > current) {
-        setComparisons((prev) => prev + 1);
-        arr[j + 1] = arr[j];
-
-        // Animate only the current bar with vertical and horizontal movement
-        const movingBar = barRefs.current[j + 1];
-        if (movingBar) {
-          await gsap.to(movingBar, { y: -20, duration: 0.2 });
-          await gsap.to(movingBar, {
-            x: "+=70",
-            duration: 0.3,
-            ease: "power2.inOut",
-          });
-          await gsap.to(movingBar, { y: 0, duration: 0.2 });
-          gsap.set(movingBar, { clearProps: "transform" });
-        }
-
-        setSwaps((prev) => prev + 1);
-        j--;
-
-        setCurrentIndices({
-          current: i,
-          comparing: j,
-          sortedUpTo: i - 1,
-        });
-
-        setArray([...arr]);
-        await new Promise(
-          (resolve) =>
-            (animationRef.current = setTimeout(resolve, 1000 / speed))
-        );
-      }
-
-      arr[j + 1] = current;
-
-      // Animate the insertion of the current element
-      const insertBar = barRefs.current[i];
-      if (insertBar) {
-        const moveX = (j + 1 - i) * 70;
-        await gsap.to(insertBar, { y: -20, duration: 0.2 });
-        await gsap.to(insertBar, {
-          x: moveX,
-          duration: 0.3,
-          ease: "power2.inOut",
-        });
-        await gsap.to(insertBar, { y: 0, duration: 0.2 });
-        gsap.set(insertBar, { clearProps: "transform" });
-      }
-
-      setArray([...arr]);
-
-      setCurrentIndices({
-        current: i + 1,
-        comparing: j,
-        sortedUpTo: i,
-      });
-
-      await new Promise(
-        (resolve) => (animationRef.current = setTimeout(resolve, 1000 / speed))
-      );
-    }
-
-    setArray([...arr]);
-    setSorting(false);
-    setSorted(true);
-    setCurrentIndices({
-      current: -1,
-      comparing: -1,
-      sortedUpTo: n - 1,
-    });
-  };
-
-  // Reset everything
-  const reset = () => {
-    if (animationRef.current) {
-      clearTimeout(animationRef.current);
-    }
-    setArray([]);
-    setSorting(false);
-    setSorted(false);
-    resetStats();
-  };
-
-  // Clean up on unmount
-  useEffect(() => {
-    return () => {
-      if (animationRef.current) {
-        clearTimeout(animationRef.current);
-      }
-    };
-  }, []);
-
-  return (
-    <main className="container mx-auto px-6 pb-6">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-        Visualize how Insertion Sort builds the final sorted array.
-      </p>
-
-      <div className="max-w-4xl mx-auto">
-        {/* Controls */}
-<div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-2 mb-2">
-            <div className="flex flex-col gap-1">
-              <RandomArray onGenerate={handleRandomArray} disabled={sorting} />
-              <CustomArrayInput
-                onSubmit={handleCustomArray}
-                disabled={sorting}
-                className="w-full"
-              />
-            </div>
-            <div className="flex flex-col gap-1 justify-between">
-              <button
-                onClick={insertionSort}
-                disabled={!array.length || sorting || sorted}
-                className="w-full disabled:opacity-75 bg-none bg-green-500 px-4 py-2 rounded shadow-sm transition-all duration-300 text-sm sm:text-base text-black"
-              >
-                {sorting ? "Sorting..." : "Start Insertion Sort"}
-              </button>
-              <button
-                onClick={reset}
-                className="w-full bg-none text-white bg-red-500 px-4 py-2 rounded transition-colors text-sm sm:text-base"
-              >
-                Reset All
-              </button>
-            </div>
-          </div>
-
-          {/* Speed controls */}
-          <div className="flex items-center gap-4 mb-4">
-            <span className="text-gray-700 dark:text-gray-300">Speed:</span>
-            <input
-              type="range"
-              min="0.5"
-              max="5"
-              step="0.5"
-              value={speed}
-              onChange={(e) => setSpeed(parseFloat(e.target.value))}
-              className="w-32"
-              disabled={sorting}
-            />
-            <span className="text-gray-700 dark:text-gray-300">{speed}x</span>
-          </div>
-
-          {/* Stats */}
-          <div className="grid grid-cols-2 gap-4 text-sm">
-            <div className="bg-gray-100 dark:bg-gray-700 p-3 rounded">
-              <div className="font-medium">Comparisons:</div>
-              <div className="text-2xl">{comparisons}</div>
-            </div>
-            <div className="bg-gray-100 dark:bg-gray-700 p-3 rounded">
-              <div className="font-medium">Shifts:</div>
-              <div className="text-2xl">{swaps}</div>
-            </div>
-          </div>
-        </div>
-
-        {/* Visualization */}
-        <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-          <h2 className="text-xl font-semibold mb-4">Array Visualization</h2>
-          {array.length > 0 ? (
-            <div className="flex flex-wrap gap-4 justify-center">
-              {array.map((value, index) => {
-                const isCurrent = index === currentIndices.current;
-                const isComparing = index === currentIndices.comparing;
-                const isSorted = index <= currentIndices.sortedUpTo || sorted;
-
-                return (
-                  <div key={index} className="flex flex-col items-center">
-                    <div
-                      ref={(el) => (barRefs.current[index] = el)}
-                      className={`bar w-16 h-16 flex items-center justify-center rounded-lg border-2 transition-all duration-300 text-lg font-medium
-                            ${
-                              isCurrent
-                                ? "bg-yellow-400 dark:bg-yellow-400 border-yellow-600 dark:border-yellow-600 dark:text-gray-800"
-                                : isComparing
-                                ? "bg-red-400 dark:bg-red-400 border-red-600 dark:border-red-600 dark:text-gray-800"
-                                : isSorted
-                                ? "bg-green-400 dark:bg-green-400 border-green-600 dark:border-green-600 dark:text-gray-800"
-                                : "bg-blue-400 dark:bg-blue-400 border-blue-600 dark:border-blue-600 dark:text-gray-800"
-                            }`}
-                    >
-                      {value}
-                    </div>
-                    <div className="mt-1 text-xs text-gray-600 dark:text-gray-400">
-                      {index}
-                      {isCurrent && " (current)"}
-                      {isComparing && " (comparing)"}
-                      {isSorted && !isCurrent && !isComparing && " (sorted)"}
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          ) : (
-            <div className="text-center py-8 text-gray-500">
-              {sorting ? "Sorting..." : "Generate or enter an array to begin"}
-            </div>
-          )}
-
-          {/* Algorithm Steps Visualization */}
-          {sorting && array.length > 0 && (
-            <div className="mt-8 bg-gray-50 dark:bg-gray-900 p-4 rounded-lg">
-              <h3 className="text-lg font-semibold mb-2">Current Step</h3>
-              <div className="flex items-center justify-center space-x-4 mb-4">
-                <div className="flex items-center">
-                  <div className="w-4 h-4 bg-yellow-400 dark:bg-yellow-600 rounded-full mr-2"></div>
-                  <span>Current element being inserted</span>
-                </div>
-                <div className="flex items-center">
-                  <div className="w-4 h-4 bg-red-400 dark:bg-red-600 rounded-full mr-2"></div>
-                  <span>Element being compared</span>
-                </div>
-                <div className="flex items-center">
-                  <div className="w-4 h-4 bg-green-400 dark:bg-green-600 rounded-full mr-2"></div>
-                  <span>Sorted portion</span>
-                </div>
-              </div>
-
-              <div className="bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700">
-                <p className="text-center">
-                  {currentIndices.current >= 0 ? (
-                    <>
-                      Inserting{" "}
-                      <strong>
-                        array[{currentIndices.current}] ={" "}
-                        {array[currentIndices.current]}
-                      </strong>{" "}
-                      into the sorted portion (indexes 0 to{" "}
-                      {currentIndices.sortedUpTo})
-                    </>
-                  ) : (
-                    "Starting sort..."
-                  )}
-                </p>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default InsertionSortVisualizer;
diff --git a/app/visualizer/sorting/insertionsort/codeBlock.jsx b/app/visualizer/sorting/insertionsort/codeBlock.jsx
deleted file mode 100755
index 22eeda97f..000000000
--- 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/content.jsx b/app/visualizer/sorting/insertionsort/content.jsx
deleted file mode 100755
index c0ae732aa..000000000
--- a/app/visualizer/sorting/insertionsort/content.jsx
+++ /dev/null
@@ -1,306 +0,0 @@
-"use client";
-import ComplexityGraph from "@/app/components/ui/graph";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState('light');
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem('theme') || 'light';
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener('storage', updateTheme);
-    window.addEventListener('themeChange', updateTheme);
-
-    return () => {
-      window.removeEventListener('storage', updateTheme);
-      window.removeEventListener('themeChange', updateTheme);
-    };
-  }, []);
-  
-  const paragraph = [
-    `Insertion Sort is a simple sorting algorithm that builds the final sorted array one item at a time. It works similarly to how you might sort playing cards in your hands - you take each new card and insert it into its proper position among the already sorted cards.`,
-    `The algorithm maintains a "sorted sublist" that grows with each iteration.`,
-    `Insertion Sort is often used when the data is nearly sorted (where it approaches O(n) time) or when the dataset is small. Some hybrid algorithms like TimSort use Insertion Sort for small subarrays due to its low overhead.`,
-  ];
-
-  const working = [
-    {
-      points: "First Element (7):",
-      subpoints: ['Already "sorted" as the first item', "→ [7, 3, 5, 2, 1]"],
-    },
-    {
-      points: "Second Element (3):",
-      subpoints: ["Insert before 7", "→ [3, 7, 5, 2, 1]"],
-    },
-    {
-      points: "Third Element (5):",
-      subpoints: ["Insert between 3 and 7", "→ [3, 5, 7, 2, 1]"],
-    },
-    {
-      points: "Fourth Element (2):",
-      subpoints: ["Insert at beginning", "→ [2, 3, 5, 7, 1]"],
-    },
-    {
-      points: "Fifth Element (1):",
-      subpoints: ["Insert at beginning", "→ [1, 2, 3, 5, 7]"],
-    },
-  ];
-
-  const algorithm = [
-    {
-      steps: "Start with the second element (consider first element as sorted)",
-    },
-    { steps: "Pick the next element (key) from the unsorted portion" },
-    {
-      steps: "Compare the key with elements in the sorted portion:",
-      points: [
-        "Shift elements greater than the key one position right",
-        "Stop when you find an element ≤ the key",
-      ],
-    },
-    { steps: "Insert the key in its correct position" },
-    { steps: "Repeat until all elements are processed" },
-  ];
-
-  const timeComplexity = [
-    {
-      points:
-        "Best Case: Already sorted array → O(n) (only comparisons, no shifts).",
-    },
-    { points: "Average Case: Randomly ordered array → O(n²)." },
-    {
-      points:
-        "Worst Case: Reverse sorted array → O(n²) (maximum comparisons and shifts).",
-    },
-  ];
-
-  const advantages = [
-    {
-      points:
-        "Efficient for small datasets (often faster than more complex algorithms for n ≤ 10)",
-    },
-    { points: "Stable (doesn't change relative order of equal elements)" },
-    { points: "Adaptive (performs well with partially sorted data)" },
-    { points: "Online (can sort as it receives input)" },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge By{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* What is Insertion Sort */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            What is Insertion Sort?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraph[0]}
-            </p>
-          </div>
-        </section>
-
-        {/* How Does It Work */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            How Does It Work?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Consider this unsorted array: [7, 3, 5, 2, 1]
-            </p>
-
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {working.map((items, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-semibold">{items.points}</span>
-                  {items.subpoints && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500 font-normal">
-                      {items.subpoints.map((subitems, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitems}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-
-            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
-              {paragraph[1]}
-            </p>
-          </div>
-        </section>
-
-        {/* Algorithm Steps */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Algorithm Steps
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {algorithm.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.steps}
-                  {item.points && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {item.points.map((subitem, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitem}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Time Complexity */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Time Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {timeComplexity.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
-                    {item.points.split(":")[0]}:
-                  </span>
-                  <span className="ml-2">{item.points.split(":")[1]}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div className="mt-8">
-            <ComplexityGraph
-              bestCase={(n) => n}
-              averageCase={(n) => n * n}
-              worstCase={(n) => n * n}
-              maxN={25}
-            />
-          </div>
-        </section>
-
-        {/* Advantages */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Advantages
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {advantages.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Additional Info */}
-        <section className="p-6">
-          <div className="prose dark:prose-invert max-w-none">
-            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                {paragraph[2]}
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge By{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
diff --git a/app/visualizer/sorting/insertionsort/page.jsx b/app/visualizer/sorting/insertionsort/page.jsx
deleted file mode 100755
index a08842953..000000000
--- a/app/visualizer/sorting/insertionsort/page.jsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import Animation from "@/app/visualizer/sorting/insertionsort/animation";
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/sorting/insertionsort/content";
-import Quiz from "@/app/visualizer/sorting/insertionsort/quiz";
-import Code from "@/app/visualizer/sorting/insertionsort/codeBlock";
-import ExploreOther from "@/app/components/ui/exploreOther";
-import BackToTopButton from "@/app/components/ui/backtotop";
-import Footer from "@/app/components/footer";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-
-export const metadata = {
-  title: "Insertion Sort Algorithm | Learn with Interactive Animations",
-  description:
-    "Understand how Insertion Sort works through step-by-step animations and test your knowledge with an interactive quiz. Includes code examples in JavaScript, C, Python, and Java. Perfect for beginners learning data structures and algorithms visually and through hands-on coding.",
-  keywords: [
-    "Insertion Sort Visualizer",
-    "Insertion Sort Animation",
-    "Insertion Sort Visualization",
-    "DSA Insertion Sort",
-    "Learn Insertion Sort",
-    "Insertion Sort Quiz",
-    "Sorting Algorithm Quiz",
-    "Sorting Algorithm Visualization",
-    "Step by Step Insertion Sort",
-    "Interactive DSA Tool",
-    "DSA for Beginners",
-    "Insertion Sort Explained",
-    "Practice Insertion Sort",
-    "Interactive Insertion Sort Quiz",
-    "Insertion Sort in JavaScript",
-    "Insertion Sort in C",
-    "Insertion Sort in Python",
-    "Insertion Sort in Java",
-    "Insertion Sort Code Examples",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/sorting/insertionSort.png",
-        width: 1200,
-        height: 630,
-        alt: "Insertion Sort Algorithm Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Insertion Sort", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Sorting
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Insertion Sort
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section>
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-[#6b7280] dark:text-[#9ca3af] mb-2">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.insertionSort}
-            title="Insertion Sort"
-            description="Mark Insertion Sort as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section className="px-6">
-          <ExploreOther
-          title="Explore Sorting Algorithms"
-          links={[
-            { text: "Selection Sort", url: "/visualizer/sorting/selectionsort" },
-            { text: "Bubble Sort", url: "/visualizer/sorting/bubblesort" },
-            { text: "Merge Sort", url: "/visualizer/sorting/mergesort" },
-            { text: "Quick Sort" , url: "/visualizer/sorting/quicksort"},
-            { text: "Heap Sort", url: "/algorithms/sorting/heap" },
-          ]}
-        />
-        </section>
-      </div>
-
-      <BackToTopButton />
-      <Footer />
-    </>
-  );
-}
\ No newline at end of file
diff --git a/app/visualizer/sorting/insertionsort/quiz.jsx b/app/visualizer/sorting/insertionsort/quiz.jsx
deleted file mode 100755
index 642ce012c..000000000
--- a/app/visualizer/sorting/insertionsort/quiz.jsx
+++ /dev/null
@@ -1,440 +0,0 @@
-"use client";
-import React, { useState, useEffect } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const InsertionSortQuiz = () => {
-  const questions = [
-    {
-      question: "What is the basic principle of Insertion Sort?",
-      options: [
-        "Dividing the list into smaller sublists and merging them",
-        "Building the final sorted array one item at a time by inserting each element in its correct position",
-        "Repeatedly swapping adjacent elements if they are in the wrong order",
-        "Selecting the smallest element and moving it to the front"
-      ],
-      correctAnswer: 1,
-      explanation: "Insertion Sort works by building the final sorted array one item at a time, similar to how you might sort playing cards in your hands."
-    },
-    {
-      question: "What is the time complexity of Insertion Sort in the worst case?",
-      options: [
-        "O(n)",
-        "O(n log n)",
-        "O(n²)",
-        "O(1)"
-      ],
-      correctAnswer: 2,
-      explanation: "In the worst case (when the list is sorted in reverse order), Insertion Sort requires O(n²) comparisons and shifts."
-    },
-    {
-      question: "In the array [7, 3, 5, 2, 1], how many shifts occur when inserting the element '2'?",
-      options: [
-        "1",
-        "2",
-        "3",
-        "4"
-      ],
-      correctAnswer: 2,
-      explanation: "When inserting '2', we need to shift '7', '5', and '3' to the right (3 shifts) before inserting '2' at the beginning."
-    },
-    {
-      question: "When would Insertion Sort perform at its best?",
-      options: [
-        "When the array is in random order",
-        "When the array is sorted in reverse order",
-        "When the array is already sorted",
-        "When the array contains duplicate values"
-      ],
-      correctAnswer: 2,
-      explanation: "Insertion Sort performs best (O(n)) when the array is already sorted, as it only needs to make comparisons without any shifts."
-    },
-    {
-      question: "What is the space complexity of Insertion Sort?",
-      options: [
-        "O(n)",
-        "O(n log n)",
-        "O(n²)",
-        "O(1)"
-      ],
-      correctAnswer: 3,
-      explanation: "Insertion Sort is an in-place algorithm that only requires O(1) additional space for temporary storage during shifts."
-    },
-    {
-      question: "Which of these is NOT an advantage of Insertion Sort?",
-      options: [
-        "Efficient for small datasets",
-        "Stable (maintains relative order of equal elements)",
-        "Online (can sort as it receives input)",
-        "Efficient for large, randomly ordered datasets"
-      ],
-      correctAnswer: 3,
-      explanation: "Insertion Sort is not efficient for large, randomly ordered datasets due to its O(n²) average time complexity."
-    },
-    {
-      question: "Why might hybrid algorithms like TimSort use Insertion Sort?",
-      options: [
-        "Because it's the fastest sorting algorithm for all cases",
-        "Because it has excellent cache performance",
-        "Because of its low overhead for small subarrays",
-        "Because it's the easiest to implement"
-      ],
-      correctAnswer: 2,
-      explanation: "Hybrid algorithms often use Insertion Sort for small subarrays (typically ≤ 10 elements) due to its low overhead and good performance on small datasets."
-    }
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    setSelectedAnswer(optionIndex);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-
-    // Update answers and recalculate score from scratch
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = selectedAnswer;
-    setAnswers(newAnswers);
-
-    const newScore = newAnswers.reduce((acc, ans, idx) => {
-      return ans === questions[idx].correctAnswer ? acc + 1 : acc;
-    }, 0);
-    setScore(newScore);
-
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowIntro(true);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Insertion Sort");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting shifts in Insertion Sort");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("performance characteristics");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("advantages and limitations");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Insertion Sort concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-          {showIntro ? (
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              className="text-center"
-            >
-              <div className="flex justify-center mb-6">
-                <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-                  <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-                </div>
-              </div>
-              <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-                Insertion Sort Quiz Challenge
-              </h2>
-              <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-                <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-                  <FaInfoCircle className="mr-2" /> How it works:
-                </h3>
-                <ul className="space-y-2 text-sm">
-                  <li className="flex items-start">
-                    <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                    <span>+1 point for each correct answer</span>
-                  </li>
-                  <li className="flex items-start">
-                    <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                    <span>0 points for wrong answers</span>
-                  </li>
-                  <li className="flex items-start">
-                    <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                    <span>Earn stars based on your final score (max 5 stars)</span>
-                  </li>
-                </ul>
-              </div>
-              <button
-                onClick={startQuiz}
-                className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-              >
-                Start Quiz <FaArrowRight className="ml-2" />
-              </button>
-            </motion.div>
-          ) : showSuccessAnimation ? (
-            <div className="flex flex-col items-center justify-center h-64">
-              <motion.div
-                initial={{ scale: 0 }}
-                animate={{ scale: 1 }}
-                transition={{ type: "spring", stiffness: 500, damping: 15 }}
-                className="mb-4"
-              >
-                <div className="relative">
-                  <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                    <FaCheck className="text-4xl text-green-500 animate-bounce" />
-                  </div>
-                  <motion.div
-                    initial={{ scale: 0.5, opacity: 0 }}
-                    animate={{ scale: 1.5, opacity: 0 }}
-                    transition={{ duration: 1.5, repeat: Infinity }}
-                    className="absolute inset-0 border-4 border-green-300 rounded-full"
-                  />
-                </div>
-              </motion.div>
-              <motion.p
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-              >
-                Quiz Completed!
-              </motion.p>
-            </div>
-          ) : !showResult ? (
-            <div className="quiz-container">
-              <div className="mb-6">
-                <div className="flex justify-between items-center mb-1">
-                  <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                    Question {currentQuestion + 1} of {questions.length}
-                  </span>
-                  <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                    Score: {score.toFixed(1)}
-                  </span>
-                </div>
-                <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-                  <div
-                    className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                    style={{
-                      width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                    }}
-                  />
-                </div>
-              </div>
-    
-              <motion.div
-                key={currentQuestion}
-                initial={{ opacity: 0, x: 20 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ duration: 0.3 }}
-              >
-                <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-                  {questions[currentQuestion].question}
-                </h3>
-    
-                <div className="space-y-3 mb-6">
-                  {questions[currentQuestion].options.map((option, index) => (
-                    <motion.div
-                      key={index}
-                      whileHover={{ scale: 1.02 }}
-                      whileTap={{ scale: 0.98 }}
-                      className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                        selectedAnswer === index
-                          ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                          : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                      }`}
-                      onClick={() => handleAnswerSelect(index)}
-                    >
-                      <div className="flex items-center">
-                        <span
-                          className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                            selectedAnswer === index
-                              ? "bg-blue-500 text-white"
-                              : "bg-gray-200 dark:bg-gray-600"
-                          }`}
-                        >
-                          {String.fromCharCode(65 + index)}
-                        </span>
-                        <span>{option}</span>
-                      </div>
-                    </motion.div>
-                  ))}
-                </div>
-    
-
-              </motion.div>
-    
-              <div className="flex justify-between">
-                <button
-                  onClick={handlePreviousQuestion}
-                  disabled={currentQuestion === 0}
-                  className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-                >
-                  <FaArrowLeft className="mr-2" /> Previous
-                </button>
-    
-                <button
-                  onClick={handleNextQuestion}
-                  disabled={selectedAnswer === null}
-                  className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-                >
-                  {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-                  <FaArrowRight className="ml-2" />
-                </button>
-              </div>
-            </div>
-          ) : (
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              className="result-container"
-            >
-              <div className="text-center mb-8">
-                <div className="relative inline-block mb-4">
-                  <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                    <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                      {score.toFixed(1)}/{questions.length}
-                    </div>
-                  </div>
-                  <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                    {[...Array(5)].map((_, i) => (
-                      <FaStar
-                        key={i}
-                        className={`text-2xl mx-1 ${
-                          i < getStarRating()
-                            ? "text-yellow-400 fill-current"
-                            : "text-gray-300 dark:text-gray-600 fill-current"
-                        }`}
-                      />
-                    ))}
-                  </div>
-                </div>
-    
-                <h3 className="text-2xl font-bold mb-2 dark:text-white">
-                  {score === questions.length
-                    ? "Perfect Score!"
-                    : score >= questions.length * 0.8
-                    ? "Excellent Work!"
-                    : score >= questions.length * 0.6
-                    ? "Good Job!"
-                    : score >= questions.length * 0.4
-                    ? "Keep Practicing!"
-                    : "Let's Review Again!"}
-                </h3>
-                <p className="text-gray-600 dark:text-gray-400 mb-6">
-                  You scored {((score / questions.length) * 100).toFixed(0)}%
-                  correct
-                </p>
-              </div>
-    
-              <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-                <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-                  <FaInfoCircle className="mr-2" /> Performance Analysis
-                </h4>
-                <p className="text-sm">{calculateWeakAreas()}</p>
-              </div>
-    
-              <div className="space-y-4 mb-8">
-                <h4 className="font-bold text-gray-700 dark:text-gray-300">
-                  Question Breakdown:
-                </h4>
-                {questions.map((q, index) => (
-                  <div
-                    key={index}
-                    className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-                  >
-                    <p className="font-medium text-gray-800 dark:text-gray-200">
-                      {q.question}
-                    </p>
-                    <div
-                      className={`flex items-start mt-1 ${
-                        answers[index] === q.correctAnswer
-                          ? "text-green-600 dark:text-green-400"
-                          : "text-red-600 dark:text-red-400"
-                      }`}
-                    >
-                      {answers[index] === q.correctAnswer ? (
-                        <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                      ) : (
-                        <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                      )}
-                      <div>
-                        <p className="text-sm">
-                          Your answer:{" "}
-                          {answers[index] !== null
-                            ? q.options[answers[index]]
-                            : "Not answered"}
-                        </p>
-                        {answers[index] !== q.correctAnswer && (
-                          <p className="text-sm">
-                            Correct answer: {q.options[q.correctAnswer]}
-                          </p>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-    
-              <button
-                onClick={resetQuiz}
-                className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-              >
-                <FaRedo className="mr-2" /> Take Quiz Again
-              </button>
-            </motion.div>
-          )}
-        </section>
-  );
-};
-
-export default InsertionSortQuiz;
\ No newline at end of file
diff --git a/app/visualizer/sorting/mergesort/animation.jsx b/app/visualizer/sorting/mergesort/animation.jsx
deleted file mode 100755
index 3ffdf495d..000000000
--- a/app/visualizer/sorting/mergesort/animation.jsx
+++ /dev/null
@@ -1,352 +0,0 @@
-"use client";
-import React, { useState, useRef, useEffect } from "react";
-import { gsap } from "gsap";
-import ArrayGenerator from "@/app/components/ui/randomArray";
-import CustomArrayInput from "@/app/components/ui/customArrayInput";
-
-const MergeSortVisualizer = () => {
-  const [array, setArray] = useState([]);
-  const [sorting, setSorting] = useState(false);
-  const [sorted, setSorted] = useState(false);
-  const [speed, setSpeed] = useState(1);
-  const [comparisons, setComparisons] = useState(0);
-  const [swaps, setSwaps] = useState(0);
-  const [currentIndices, setCurrentIndices] = useState({
-    left: -1,
-    right: -1,
-    mergeStart: -1,
-    mergeEnd: -1,
-    comparing: [],
-    levels: [],
-    currentLevel: -1,
-  });
-  const animationRef = useRef(null);
-
-  // Reset all stats and state
-  const resetStats = () => {
-    setComparisons(0);
-    setSwaps(0);
-    setCurrentIndices({
-      left: -1,
-      right: -1,
-      mergeStart: -1,
-      mergeEnd: -1,
-      comparing: [],
-      levels: [],
-      currentLevel: -1,
-    });
-    if (animationRef.current) {
-      clearTimeout(animationRef.current);
-    }
-  };
-
-  // Merge function for Merge Sort
-  const merge = async (arr, l, m, r) => {
-    let n1 = m - l + 1;
-    let n2 = r - m;
-
-    // Create temp arrays
-    let L = new Array(n1);
-    let R = new Array(n2);
-
-    // Copy data to temp arrays
-    for (let i = 0; i < n1; i++) L[i] = arr[l + i];
-    for (let j = 0; j < n2; j++) R[j] = arr[m + 1 + j];
-
-    // Merge the temp arrays back into arr[l..r]
-    let i = 0,
-      j = 0,
-      k = l;
-
-    while (i < n1 && j < n2) {
-      setCurrentIndices((prev) => ({
-        ...prev,
-        comparing: [l + i, m + 1 + j],
-        mergeStart: l,
-        mergeEnd: r,
-      }));
-
-      setComparisons((prev) => prev + 1);
-      await new Promise(
-        (resolve) => (animationRef.current = setTimeout(resolve, 1000 / speed))
-      );
-
-      if (L[i] <= R[j]) {
-        arr[k] = L[i];
-        i++;
-      } else {
-        arr[k] = R[j];
-        j++;
-      }
-      setSwaps((prev) => prev + 1);
-
-      setArray([...arr]);
-      // GSAP pop animation for the merged bar
-      {
-        const bars = document.querySelectorAll(".bar");
-        const bar = bars[k];
-        if (bar) {
-          await gsap.to(bar, { scale: 1.2, duration: 0.2 });
-          await gsap.to(bar, { scale: 1.0, duration: 0.2 });
-        }
-      }
-
-      k++;
-      await new Promise(
-        (resolve) => (animationRef.current = setTimeout(resolve, 1000 / speed))
-      );
-    }
-
-    // Copy remaining elements of L[]
-    while (i < n1) {
-      arr[k] = L[i];
-      i++;
-      setArray([...arr]);
-      // GSAP pop animation for the merged bar
-      {
-        const bars = document.querySelectorAll(".bar");
-        const bar = bars[k];
-        if (bar) {
-          await gsap.to(bar, { scale: 1.2, duration: 0.2 });
-          await gsap.to(bar, { scale: 1.0, duration: 0.2 });
-        }
-      }
-      k++;
-      await new Promise(
-        (resolve) => (animationRef.current = setTimeout(resolve, 1000 / speed))
-      );
-    }
-
-    // Copy remaining elements of R[]
-    while (j < n2) {
-      arr[k] = R[j];
-      j++;
-      setArray([...arr]);
-      // GSAP pop animation for the merged bar
-      {
-        const bars = document.querySelectorAll(".bar");
-        const bar = bars[k];
-        if (bar) {
-          await gsap.to(bar, { scale: 1.2, duration: 0.2 });
-          await gsap.to(bar, { scale: 1.0, duration: 0.2 });
-        }
-      }
-      k++;
-      await new Promise(
-        (resolve) => (animationRef.current = setTimeout(resolve, 1000 / speed))
-      );
-    }
-  };
-
-  // Merge Sort algorithm
-  const mergeSortHelper = async (arr, l, r, level = 0, path = []) => {
-    if (l >= r) return;
-
-    const currentPath = [...path, { l, r }];
-    const m = l + Math.floor((r - l) / 2);
-
-    // Update current level and path
-    setCurrentIndices((prev) => ({
-      ...prev,
-      currentLevel: level,
-      recursionPath: currentPath,
-      left: l,
-      right: r,
-      mid: m,
-    }));
-
-    await new Promise(
-      (resolve) => (animationRef.current = setTimeout(resolve, 1000 / speed))
-    );
-
-    await mergeSortHelper(arr, l, m, level + 1, currentPath);
-    await mergeSortHelper(arr, m + 1, r, level + 1, currentPath);
-
-    await merge(arr, l, m, r);
-  };
-
-  // Main merge sort function
-  const mergeSort = async () => {
-    if (sorted || sorting || array.length === 0) return;
-
-    setSorting(true);
-    let arr = [...array];
-    await mergeSortHelper(arr, 0, arr.length - 1);
-
-    setArray([...arr]);
-    setSorting(false);
-    setSorted(true);
-    setCurrentIndices({
-      left: -1,
-      right: -1,
-      mergeStart: -1,
-      mergeEnd: -1,
-      comparing: [],
-      levels: [],
-      currentLevel: -1,
-    });
-  };
-
-  // Reset everything
-  const reset = () => {
-    if (animationRef.current) {
-      clearTimeout(animationRef.current);
-    }
-    setArray([]);
-    setSorting(false);
-    setSorted(false);
-    resetStats();
-  };
-
-  // Clean up on unmount
-  useEffect(() => {
-    return () => {
-      if (animationRef.current) {
-        clearTimeout(animationRef.current);
-      }
-    };
-  }, []);
-
-  // Function to check if index is in current range
-  const isInCurrentRange = (index) => {
-    return index >= currentIndices.left && index <= currentIndices.right;
-  };
-
-  // Function to check if index is being merged
-  const isBeingMerged = (index) => {
-    return (
-      index >= currentIndices.mergeStart && index <= currentIndices.mergeEnd
-    );
-  };
-
-
-  return (
-      <main className="container mx-auto px-6 pt-2 pb-6">
-        <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-          Visualize the divide-and-conquer approach of Merge Sort with recursive
-          splitting and merging.
-        </p>
-
-        <div className="max-w-4xl mx-auto">
-          {/* Controls */}
-          <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-              <div>
-                <ArrayGenerator
-                  onGenerate={(newArray) => {
-                    setArray(newArray);
-                    setSorted(false);
-                    resetStats();
-                  }}
-                  disabled={sorting}
-                />
-                <CustomArrayInput
-                  onUseCustomArray={(newArray) => {
-                    setArray(newArray);
-                    setSorted(false);
-                    resetStats();
-                  }}
-                  disabled={sorting}
-                  className="mb-4"
-                />
-              </div>
-              <div className="flex flex-col gap-2">
-                <button
-                  onClick={mergeSort}
-                  disabled={!array.length || sorting || sorted}
-                  className="w-full disabled:opacity-75 bg-none bg-green-500 px-4 py-2 rounded shadow-sm transition-all duration-300 text-sm sm:text-base text-black"
-                >
-                  {sorting ? "Sorting..." : "Start Merge Sort"}
-                </button>
-                <button
-                  onClick={reset}
-                  className="w-full bg-none text-white bg-red-500 px-4 py-2 rounded transition-colors text-sm sm:text-base"
-                >
-                  Reset All
-                </button>
-              </div>
-            </div>
-
-            {/* Speed controls */}
-            <div className="flex items-center gap-4 mb-4">
-              <span className="text-gray-700 dark:text-gray-300">Speed:</span>
-              <input
-                type="range"
-                min="0.5"
-                max="5"
-                step="0.5"
-                value={speed}
-                onChange={(e) => setSpeed(parseFloat(e.target.value))}
-                className="w-32"
-                disabled={sorting}
-              />
-              <span className="text-gray-700 dark:text-gray-300">{speed}x</span>
-            </div>
-
-            {/* Stats */}
-            <div className="grid grid-cols-2 gap-4 text-sm">
-              <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
-                <div className="font-medium">Comparisons:</div>
-                <div className="text-2xl">{comparisons}</div>
-              </div>
-              <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
-                <div className="font-medium">Merges:</div>
-                <div className="text-2xl">{swaps}</div>
-              </div>
-            </div>
-          </div>
-
-          {/* Main Array Visualization */}
-          <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-            <h2 className="text-xl font-semibold mb-4">Main Array</h2>
-            {array.length > 0 ? (
-              <div className="flex flex-wrap gap-4 justify-center">
-                {array.map((value, index) => {
-                  const isComparing = currentIndices.comparing.includes(index);
-                  const isInRange = isInCurrentRange(index);
-                  const isMerging = isBeingMerged(index);
-                  const isSorted = sorted;
-
-                  return (
-                    <div key={index} className="flex flex-col items-center">
-                      <div
-                        className={`w-16 h-16 flex items-center justify-center rounded-lg border-2 transition-all duration-300 text-lg font-medium
-                            ${
-                              isComparing
-                                ? "bg-red-400 dark:bg-red-400 border-red-600 dark:border-red-600 text-gray-800"
-                                : isMerging
-                                ? "bg-green-400 dark:bg-green-400 border-green-600 dark:border-green-600 text-gray-800"
-                                : isInRange
-                                ? "bg-yellow-400 dark:bg-yellow-400 border-yellow-600 dark:border-yellow-600 text-gray-800"
-                                : isSorted
-                                ? "bg-green-400 dark:bg-green-400 border-green-600 dark:border-green-600 text-gray-800"
-                                : "bg-blue-400 dark:bg-blue-500 border-blue-600 dark:border-blue-600 text-gray-800"
-                            }`}
-                      >
-                        {value}
-                      </div>
-                      <div className="mt-1 text-xs text-gray-600 dark:text-gray-400">
-                        {index}
-                        {isComparing && " (comparing)"}
-                        {isMerging && !isComparing && " (merging)"}
-                        {isInRange &&
-                          !isMerging &&
-                          !isComparing &&
-                          " (current)"}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            ) : (
-              <div className="text-center py-8 text-gray-500">
-                {sorting ? "Sorting..." : "Generate or enter an array to begin"}
-              </div>
-            )}
-          </div>
-        </div>
-      </main>
-  );
-};
-
-export default MergeSortVisualizer;
diff --git a/app/visualizer/sorting/mergesort/codeBlock.jsx b/app/visualizer/sorting/mergesort/codeBlock.jsx
deleted file mode 100755
index e6b6b344f..000000000
--- 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/content.jsx b/app/visualizer/sorting/mergesort/content.jsx
deleted file mode 100755
index 32ae7dd15..000000000
--- a/app/visualizer/sorting/mergesort/content.jsx
+++ /dev/null
@@ -1,295 +0,0 @@
-"use client";
-import ComplexityGraph from "@/app/components/ui/graph";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState('light');
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem('theme') || 'light';
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener('storage', updateTheme);
-    window.addEventListener('themeChange', updateTheme);
-
-    return () => {
-      window.removeEventListener('storage', updateTheme);
-      window.removeEventListener('themeChange', updateTheme);
-    };
-  }, []);
-
-  const paragraph = [
-    `Merge Sort is an efficient, stable, comparison-based sorting algorithm that follows the divide-and-conquer approach. It works by recursively dividing the unsorted list into sublists until each sublist contains a single element, then repeatedly merges these sublists to produce new sorted sublists until there is only one sorted list remaining.`,
-    `The log n factor comes from the division steps, while the n factor comes from the merge steps.`,
-    `Merge Sort requires O(n) additional space for the temporary arrays during merging. This makes it not an in-place sorting algorithm, unlike Insertion Sort or Bubble Sort.`,
-    `Merge Sort is particularly useful when sorting linked lists (where random access is expensive) and is the algorithm of choice for many standard library sorting implementations when stability is required. It's also commonly used in external sorting where data doesn't fit in memory.`,
-  ];
-
-  const algorithm = [
-    {
-      points: "Divide:",
-      subpoints: [
-        "Find the middle point to divide the array into two halves",
-        "Recursively call merge sort on the first half",
-        "Recursively call merge sort on the second half",
-      ],
-    },
-    {
-      points: "Merge:",
-      subpoints: [
-        "Create temporary arrays for both halves",
-        "Compare elements from each half and merge them in order",
-        "Copy any remaining elements from either half",
-      ],
-    },
-  ];
-
-  const timeComplexity = [
-    {
-      points:
-        "Best Case: O(n log n) (already sorted, but still needs all comparisons)",
-    },
-    { points: "Average Case: O(n log n)" },
-    { points: "Worst Case: O(n log n) (consistent performance)" },
-  ];
-
-  const advantages = [
-    { points: "Stable sorting (maintains relative order of equal elements)" },
-    {
-      points:
-        "Excellent for large datasets (consistent O(n log n) performance)",
-    },
-    {
-      points:
-        "Well-suited for external sorting (sorting data too large for RAM)",
-    },
-    { points: "Easily parallelizable (divide steps can be done concurrently)" },
-  ];
-
-  const disadvantages = [
-    { points: "Requires O(n) additional space (not in-place)" },
-    {
-      points:
-        "Slower than O(n²) algorithms for very small datasets due to recursion overhead",
-    },
-    {
-      points:
-        "Not as cache-efficient as some other algorithms (e.g., QuickSort)",
-    },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge By{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* What is Merge Sort */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            What is Merge Sort?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraph[0]}
-            </p>
-          </div>
-        </section>
-
-        {/* Algorithm Steps */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Algorithm Steps
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {algorithm.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-semibold">{item.points}</span>
-                  {item.subpoints && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500 font-normal">
-                      {item.subpoints.map((subitem, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitem}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Time Complexity */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Time Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {timeComplexity.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
-                    {item.points.split(":")[0]}:
-                  </span>
-                  <span className="ml-2">{item.points.split(":")[1]}</span>
-                </li>
-              ))}
-            </ul>
-            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
-              {paragraph[1]}
-            </p>
-            <div className="mt-8">
-              <ComplexityGraph
-                bestCase={(n) => n * Math.log2(n)}
-                averageCase={(n) => n * Math.log2(n)}
-                worstCase={(n) => n * Math.log2(n)}
-                maxN={25}
-              />
-            </div>
-          </div>
-        </section>
-
-        {/* Space Complexity */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Space Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraph[2]}
-            </p>
-          </div>
-        </section>
-
-        {/* Advantages */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Advantages
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {advantages.map((items, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {items.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Disadvantages */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Disadvantages
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {disadvantages.map((items, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {items.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Additional Info */}
-        <section className="p-6">
-          <div className="prose dark:prose-invert max-w-none">
-            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                {paragraph[3]}
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge By{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
\ No newline at end of file
diff --git a/app/visualizer/sorting/mergesort/page.jsx b/app/visualizer/sorting/mergesort/page.jsx
deleted file mode 100755
index aba711137..000000000
--- a/app/visualizer/sorting/mergesort/page.jsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import Animation from "@/app/visualizer/sorting/mergesort/animation";
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/sorting/mergesort/content";
-import Quiz from "@/app/visualizer/sorting/mergesort/quiz";
-import Code from "@/app/visualizer/sorting/mergesort/codeBlock";
-import ExploreOther from "@/app/components/ui/exploreOther";
-import BackToTopButton from "@/app/components/ui/backtotop";
-import Footer from "@/app/components/footer";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-
-export const metadata = {
-  title: "Merge Sort Algorithm | Learn with Interactive Animations",
-  description:
-    "Understand how Merge Sort works through step-by-step animations and test your knowledge with an interactive quiz. Includes code examples in JavaScript, C, Python, and Java. Perfect for beginners learning efficient divide-and-conquer sorting algorithms both visually and through hands-on coding.",
-  keywords: [
-    "Merge Sort Visualizer",
-    "Merge Sort Animation",
-    "Merge Sort Visualization",
-    "Merge Sort Algorithm",
-    "Merge Sort Quiz",
-    "Sorting Algorithm Quiz",
-    "Divide and Conquer Sorting",
-    "Sorting Algorithm Visualization",
-    "Learn Merge Sort",
-    "DSA Merge Sort",
-    "Practice Merge Sort",
-    "Interactive Merge Sort Tool",
-    "Test Merge Sort Knowledge",
-    "Merge Sort in JavaScript",
-    "Merge Sort in C",
-    "Merge Sort in Python",
-    "Merge Sort in Java",
-    "Merge Sort Code Examples",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/sorting/mergeSort.png",
-        width: 1200,
-        height: 630,
-        alt: "Merge Sort Algorithm Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Merge Sort", href: "" },
-  ];
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Sorting
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Merge Sort
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section>
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-[#6b7280] dark:text-[#9ca3af] mb-2">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.mergeSort}
-            title="Merge Sort"
-            description="Mark Merge Sort as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section className="px-6">
-          <ExploreOther
-            title="Explore Sorting Algorithms"
-            links={[
-              {
-                text: "Selection Sort",
-                url: "/visualizer/sorting/selectionsort",
-              },
-              { text: "Bubble Sort", url: "/visualizer/sorting/bubblesort" },
-              {
-                text: "Insertion Sort",
-                url: "/visualizer/sorting/insertionsort",
-              },
-              { text: "Quick Sort", url: "/visualizer/sorting/quicksort" },
-              { text: "Heap Sort", url: "/algorithms/sorting/heap" },
-            ]}
-          />
-        </section>
-      </div>
-
-      <BackToTopButton />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/sorting/mergesort/quiz.jsx b/app/visualizer/sorting/mergesort/quiz.jsx
deleted file mode 100755
index 8ef796c95..000000000
--- a/app/visualizer/sorting/mergesort/quiz.jsx
+++ /dev/null
@@ -1,438 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const MergeSortQuiz = () => {
-  const questions = [
-    {
-      question: "What is the fundamental principle behind Merge Sort?",
-      options: [
-        "Repeatedly swapping adjacent elements if they are in the wrong order",
-        "Dividing the array into smaller subarrays and merging them back in sorted order",
-        "Selecting the smallest element and moving it to the front",
-        "Building the sorted array one element at a time by insertion"
-      ],
-      correctAnswer: 1,
-      explanation: "Merge Sort follows the divide-and-conquer approach by recursively dividing the array into halves until single elements remain, then merging them back in sorted order."
-    },
-    {
-      question: "What is the time complexity of Merge Sort in all cases (best, average, worst)?",
-      options: [
-        "O(n)",
-        "O(n log n)",
-        "O(n²)",
-        "O(log n)"
-      ],
-      correctAnswer: 1,
-      explanation: "Merge Sort has consistent O(n log n) performance in all cases because it always divides the array in half and performs linear-time merges regardless of input order."
-    },
-    {
-      question: "In the array [38, 27, 43, 3, 9, 82, 10], how many times is the array divided before reaching single elements?",
-      options: [
-        "2 times",
-        "3 times",
-        "4 times",
-        "5 times"
-      ],
-      correctAnswer: 1,
-      explanation: "The array is divided 3 times: 1) [38,27,43] and [3,9,82,10], 2) [38], [27,43], [3,9], [82,10], 3) All subarrays are single elements."
-    },
-    {
-      question: "What is the space complexity of Merge Sort?",
-      options: [
-        "O(1)",
-        "O(log n)",
-        "O(n)",
-        "O(n²)"
-      ],
-      correctAnswer: 2,
-      explanation: "Merge Sort requires O(n) additional space for temporary arrays during the merging phase, making it not an in-place sorting algorithm."
-    },
-    {
-      question: "Which of these is NOT an advantage of Merge Sort?",
-      options: [
-        "Stable sorting (maintains relative order of equal elements)",
-        "Excellent for large datasets",
-        "Requires minimal additional memory (O(1) space)",
-        "Well-suited for external sorting"
-      ],
-      correctAnswer: 2,
-      explanation: "Merge Sort requires O(n) additional space, not O(1). Its advantages include stability, consistent O(n log n) performance, and suitability for external sorting."
-    },
-    {
-      question: "Why is Merge Sort particularly good for sorting linked lists?",
-      options: [
-        "Because it doesn't require random access to elements",
-        "Because it's the fastest sorting algorithm for all cases",
-        "Because it can sort in O(1) space with linked lists",
-        "Because it doesn't require comparisons"
-      ],
-      correctAnswer: 0,
-      explanation: "Merge Sort works well with linked lists because it primarily requires sequential access (not random access) during the merge phase, and it can be implemented with O(1) space for linked lists."
-    },
-    {
-      question: "What makes Merge Sort suitable for external sorting (sorting data too large for RAM)?",
-      options: [
-        "Its ability to sort with minimal comparisons",
-        "Its divide-and-conquer approach that works well with sequential access",
-        "Its in-place sorting capability",
-        "Its O(n) best-case time complexity"
-      ],
-      correctAnswer: 1,
-      explanation: "Merge Sort's divide-and-conquer approach works well with sequential access patterns needed for external storage, and it can efficiently merge sorted runs from disk."
-    }
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    setSelectedAnswer(optionIndex);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = selectedAnswer;
-    setAnswers(newAnswers);
-
-    const newScore = newAnswers.reduce((acc, ans, idx) => {
-      return ans === questions[idx].correctAnswer ? acc + 1 : acc;
-    }, 0);
-    setScore(newScore);
-
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(newAnswers[currentQuestion + 1]);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowIntro(true);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the divide-and-conquer principle");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("understanding the division phase");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("advantages and limitations");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("application with linked lists");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("external sorting applications");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Merge Sort concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Merge Sort Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default MergeSortQuiz;
\ No newline at end of file
diff --git a/app/visualizer/sorting/quicksort/animation.jsx b/app/visualizer/sorting/quicksort/animation.jsx
deleted file mode 100755
index 7bbf0f122..000000000
--- a/app/visualizer/sorting/quicksort/animation.jsx
+++ /dev/null
@@ -1,393 +0,0 @@
-"use client";
-import React, { useState, useRef, useEffect } from "react";
-import { gsap } from "gsap";
-import ArrayGenerator from "@/app/components/ui/randomArray";
-import CustomArrayInput from "@/app/components/ui/customArrayInput";
-
-const QuickSortVisualizer = () => {
-  const [array, setArray] = useState([]);
-  const [sorting, setSorting] = useState(false);
-  const [sorted, setSorted] = useState(false);
-  const [speed, setSpeed] = useState(1);
-  const [comparisons, setComparisons] = useState(0);
-  const [swaps, setSwaps] = useState(0);
-  const [currentIndices, setCurrentIndices] = useState({
-    pivot: -1,
-    left: -1,
-    right: -1,
-    partitionIndex: -1,
-    stack: [],
-    partitions: [],
-  });
-  const animationRef = useRef(null);
-
-  // Reset all stats and state
-  const resetStats = () => {
-    setComparisons(0);
-    setSwaps(0);
-    setCurrentIndices({
-      pivot: -1,
-      left: -1,
-      right: -1,
-      partitionIndex: -1,
-      stack: [],
-      partitions: [],
-    });
-    if (animationRef.current) {
-      clearTimeout(animationRef.current);
-    }
-  };
-
-  // Partition function for Quick Sort
-  const partition = async (arr, low, high) => {
-    const pivot = arr[high];
-    let i = low - 1;
-
-    setCurrentIndices((prev) => ({
-      ...prev,
-      pivot: high,
-      left: low,
-      right: high - 1,
-    }));
-
-    for (let j = low; j < high; j++) {
-      setCurrentIndices((prev) => ({
-        ...prev,
-        left: j,
-        right: i,
-      }));
-
-      setComparisons((prev) => prev + 1);
-      await new Promise(
-        (resolve) => (animationRef.current = setTimeout(resolve, 1000 / speed))
-      );
-
-      if (arr[j] < pivot) {
-        i++;
-        [arr[i], arr[j]] = [arr[j], arr[i]];
-        setSwaps((prev) => prev + 1);
-        setArray([...arr]);
-        // GSAP animation after swap/visual update
-        const bars = document.querySelectorAll(".array-bar");
-        if (bars.length > 0) {
-          gsap.fromTo(
-            bars,
-            { scale: 1, opacity: 0.5 },
-            { scale: 1.1, opacity: 1, duration: 0.3, stagger: 0.05 }
-          );
-        }
-        await new Promise(
-          (resolve) =>
-            (animationRef.current = setTimeout(resolve, 1000 / speed))
-        );
-      }
-    }
-
-    [arr[i + 1], arr[high]] = [arr[high], arr[i + 1]];
-    setSwaps((prev) => prev + 1);
-    setArray([...arr]);
-    // GSAP animation after swap/visual update
-    const bars = document.querySelectorAll(".array-bar");
-    if (bars.length > 0) {
-      gsap.fromTo(
-        bars,
-        { scale: 1, opacity: 0.5 },
-        { scale: 1.1, opacity: 1, duration: 0.3, stagger: 0.05 }
-      );
-    }
-    await new Promise(
-      (resolve) => (animationRef.current = setTimeout(resolve, 1000 / speed))
-    );
-
-    return i + 1;
-  };
-
-  // Quick Sort algorithm
-  const quickSort = async () => {
-    if (sorted || sorting || array.length === 0) return;
-
-    setSorting(true);
-    let arr = [...array];
-    let stack = [];
-    let low = 0;
-    let high = arr.length - 1;
-
-    stack.push({ low, high });
-
-    while (stack.length > 0) {
-      const { low, high } = stack.pop();
-
-      if (low < high) {
-        // Show current partition being processed
-        setCurrentIndices((prev) => ({
-          ...prev,
-          partitions: [...prev.partitions, { low, high }],
-        }));
-
-        const pi = await partition(arr, low, high);
-
-        setCurrentIndices((prev) => ({
-          ...prev,
-          partitionIndex: pi,
-          stack: [...stack],
-          pivot: -1,
-          left: -1,
-          right: -1,
-        }));
-
-        // Push right subarray first so left is processed first
-        stack.push({ low: pi + 1, high });
-        stack.push({ low, high: pi - 1 });
-
-        await new Promise(
-          (resolve) =>
-            (animationRef.current = setTimeout(resolve, 1000 / speed))
-        );
-
-        // Remove completed partition
-        setCurrentIndices((prev) => ({
-          ...prev,
-          partitions: prev.partitions.filter(
-            (p) => !(p.low === low && p.high === high)
-          ),
-        }));
-      }
-    }
-
-    setArray([...arr]);
-    setSorting(false);
-    setSorted(true);
-    setCurrentIndices({
-      pivot: -1,
-      left: -1,
-      right: -1,
-      partitionIndex: -1,
-      stack: [],
-      partitions: [],
-    });
-  };
-
-  // Reset everything
-  const reset = () => {
-    if (animationRef.current) {
-      clearTimeout(animationRef.current);
-    }
-    setArray([]);
-    setSorting(false);
-    setSorted(false);
-    resetStats();
-  };
-
-  // Clean up on unmount
-  useEffect(() => {
-    return () => {
-      if (animationRef.current) {
-        clearTimeout(animationRef.current);
-      }
-    };
-  }, []);
-
-  // Function to render partition visualization
-  const renderPartitions = () => {
-    if (currentIndices.partitions.length === 0) return null;
-
-    return (
-      <div className="mt-8">
-        <div className="space-y-6">
-          {currentIndices.partitions.map((partition, idx) => {
-            const subArray = array.slice(partition.low, partition.high + 1);
-            return (
-              <div
-                key={idx}
-                className="bg-gray-100 dark:bg-neutral-900 p-4 rounded-lg"
-              >
-                <div className="flex justify-between items-center mb-2">
-                  <span className="text-sm font-medium">
-                    Partition {idx + 1}: Indexes {partition.low} to{" "}
-                    {partition.high}
-                  </span>
-                  <span className="text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
-                    {subArray.length} elements
-                  </span>
-                </div>
-                <div className="flex flex-wrap gap-3">
-                  {subArray.map((value, subIdx) => {
-                    const originalIndex = partition.low + subIdx;
-                    const isPivot = originalIndex === currentIndices.pivot;
-                    const isLeft = originalIndex === currentIndices.left;
-                    const isRight = originalIndex === currentIndices.right;
-
-                    return (
-                      <div
-                        key={originalIndex}
-                        className="flex flex-col items-center"
-                      >
-                        <div
-                          className={`w-12 h-12 flex items-center justify-center rounded-lg border-2 transition-all duration-300 text-sm font-medium
-                              ${
-                                isPivot
-                                  ? "bg-red-400 dark:bg-red-600 border-red-600 dark:border-red-400"
-                                  : isLeft
-                                  ? "bg-yellow-400 dark:bg-yellow-600 border-yellow-600 dark:border-yellow-400"
-                                  : isRight
-                                  ? "bg-blue-400 dark:bg-blue-600 border-blue-600 dark:border-blue-400"
-                                  : "bg-gray-200 dark:bg-gray-700 border-gray-300 dark:border-gray-600"
-                              }`}
-                        >
-                          {value}
-                        </div>
-                        <div className="mt-1 text-xs text-gray-600 dark:text-gray-400">
-                          [{originalIndex}]
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <main className="container mx-auto px-6 pt-4 pb-6">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-        Visualize Quick Sort's divide-and-conquer approach with interactive
-        partitions
-      </p>
-
-      <div className="max-w-4xl mx-auto">
-        {/* Controls */}
-        <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-            <div>
-              <ArrayGenerator
-                onGenerate={(newArray) => {
-                  setArray(newArray);
-                  setSorted(false);
-                  resetStats();
-                }}
-                disabled={sorting}
-              />
-              <CustomArrayInput
-                onSubmit={(newArray) => {
-                  setArray(newArray);
-                  setSorted(false);
-                  resetStats();
-                }}
-                disabled={sorting}
-              />
-            </div>
-            <div className="flex flex-col gap-2">
-              <button
-                onClick={quickSort}
-                disabled={!array.length || sorting || sorted}
-                className="w-full disabled:opacity-75 bg-none bg-green-500 px-4 py-2 rounded shadow-sm transition-all duration-300 text-sm sm:text-base text-black"
-              >
-                {sorting ? "Sorting..." : "Start Quick Sort"}
-              </button>
-              <button
-                onClick={reset}
-                className="w-full bg-none text-white bg-red-500 px-4 py-2 rounded transition-colors text-sm sm:text-base"
-              >
-                Reset All
-              </button>
-            </div>
-          </div>
-
-          {/* Speed controls */}
-          <div className="flex items-center gap-4 mb-4">
-            <span className="text-gray-700 dark:text-gray-300">Speed:</span>
-            <input
-              type="range"
-              min="0.5"
-              max="5"
-              step="0.5"
-              value={speed}
-              onChange={(e) => setSpeed(parseFloat(e.target.value))}
-              className="w-32"
-              disabled={sorting}
-            />
-            <span className="text-gray-700 dark:text-gray-300">{speed}x</span>
-          </div>
-
-          {/* Stats */}
-          <div className="grid grid-cols-2 gap-4 text-sm">
-            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
-              <div className="font-medium">Comparisons:</div>
-              <div className="text-2xl">{comparisons}</div>
-            </div>
-            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
-              <div className="font-medium">Swaps:</div>
-              <div className="text-2xl">{swaps}</div>
-            </div>
-          </div>
-        </div>
-
-        {/* Main Array Visualization */}
-        <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-          <h2 className="text-xl font-semibold mb-4">Array Visualization</h2>
-          {array.length > 0 ? (
-            <div className="flex flex-wrap gap-4 justify-center">
-              {array.map((value, index) => {
-                const isPivot = index === currentIndices.pivot;
-                const isLeft = index === currentIndices.left;
-                const isRight = index === currentIndices.right;
-                const isPartition = index === currentIndices.partitionIndex;
-                const isInPartition = currentIndices.partitions.some(
-                  (p) => index >= p.low && index <= p.high
-                );
-
-                return (
-                  <div key={index} className="flex flex-col items-center">
-                    <div
-                      className={`array-bar w-16 h-16 flex items-center justify-center rounded-lg border-2 transition-all duration-300 text-lg font-medium
-                            ${
-                              isPivot
-                                ? "bg-red-400 dark:bg-red-600 border-red-600 dark:border-red-400"
-                                : isLeft
-                                ? "bg-yellow-400 dark:bg-yellow-600 border-yellow-600 dark:border-yellow-400"
-                                : isRight
-                                ? "bg-blue-400 dark:bg-blue-600 border-blue-600 dark:border-blue-400"
-                                : isPartition
-                                ? "bg-green-400 dark:bg-green-600 border-green-600 dark:border-green-400"
-                                : isInPartition
-                                ? "bg-purple-100 dark:bg-purple-900 border-purple-300 dark:border-purple-700"
-                                : sorted
-                                ? "bg-green-400 dark:bg-green-600 border-green-600 dark:border-green-400"
-                                : "bg-gray-200 dark:bg-gray-700 border-gray-300 dark:border-gray-600"
-                            }`}
-                    >
-                      {value}
-                    </div>
-                    <div className="mt-1 text-xs text-gray-600 dark:text-gray-400">
-                      {index}
-                      {isPivot && " (pivot)"}
-                      {isLeft && " (left)"}
-                      {isRight && " (right)"}
-                      {isPartition && " (partition)"}
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          ) : (
-            <div className="text-center py-8 text-gray-500">
-              {sorting ? "Sorting..." : "Generate or enter an array to begin"}
-            </div>
-          )}
-        </div>
-
-        {/* Partition Visualization */}
-        <div className="bg-white mt-8 dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
-          <h2 className="text-xl font-semibold mb-4">Partion Array</h2>
-          {renderPartitions()}
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default QuickSortVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/sorting/quicksort/codeBlock.jsx b/app/visualizer/sorting/quicksort/codeBlock.jsx
deleted file mode 100755
index 69c87d01e..000000000
--- 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/content.jsx b/app/visualizer/sorting/quicksort/content.jsx
deleted file mode 100755
index fb825132f..000000000
--- a/app/visualizer/sorting/quicksort/content.jsx
+++ /dev/null
@@ -1,390 +0,0 @@
-"use client";
-import ComplexityGraph from "@/app/components/ui/graph";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState('light');
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem('theme') || 'light';
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener('storage', updateTheme);
-    window.addEventListener('themeChange', updateTheme);
-
-    return () => {
-      window.removeEventListener('storage', updateTheme);
-      window.removeEventListener('themeChange', updateTheme);
-    };
-  }, []);
-
-  const paragraphs = [
-    `Quick Sort is an efficient, comparison-based sorting algorithm that follows the divide-and-conquer approach. It works by selecting a 'pivot' element from the array and partitioning the other elements into two sub-arrays according to whether they are less than or greater than the pivot. The sub-arrays are then recursively sorted.`,
-    `The log n factor comes from the division steps when partitions are balanced. The n² occurs when the pivot selection consistently creates unbalanced partitions.`,
-    `Quick Sort is O(log n) space complexity for the call stack in the average case, but can degrade to O(n) in the worst case with unbalanced partitions. It is generally considered an in-place algorithm as it doesn't require significant additional space.`,
-    `Quick Sort is the algorithm of choice for most standard library sorting implementations (like C's qsort, Java's Arrays.sort for primitives) due to its excellent average-case performance. It's particularly effective for large datasets that fit in memory.`,
-  ];
-
-  const working = [
-    {
-      steps: "Partitioning Phase:",
-      points: [
-        "Choose last element as pivot (70)",
-        "Rearrange: elements < pivot on left, > pivot on right → [10, 30, 40, 50] [70] [80, 90]",
-      ],
-    },
-    {
-      steps: "Recursive Phase:",
-      points: [
-        "Apply same process to left sub-array [10, 30, 40, 50]",
-        "Apply same process to right sub-array [80, 90]",
-        "Combine results: [10, 30, 40, 50, 70, 80, 90]",
-      ],
-    },
-  ];
-
-  const algorithm = [
-    {
-      steps: "Choose Pivot:",
-      points: [
-        "Select an element as pivot (commonly last/first/random element)",
-      ],
-    },
-    {
-      steps: "Partition:",
-      points: [
-        "Reorder array so elements < pivot come before it",
-        "Elements > pivot come after it",
-        "Pivot is now in its final sorted position",
-      ],
-    },
-    {
-      steps: "Recurse:",
-      points: [
-        "Apply quick sort to left sub-array (elements < pivot)",
-        "Apply quick sort to right sub-array (elements > pivot)",
-      ],
-    },
-  ];
-
-  const timeComplexity = [
-    { points: "Best Case: O(n log n) (balanced partitions)" },
-    { points: "Average Case: O(n log n)" },
-    { points: "Worst Case: O(n²) (unbalanced partitions)" },
-  ];
-
-  const strategies = [
-    { strategy: "Last element" },
-    { strategy: "First element" },
-    { strategy: "Random element" },
-    { strategy: "Median-of-three" },
-    { strategy: "Middle element" },
-  ];
-
-  const strategiesDetails = [
-    { details: "Simple but can lead to worst-case on sorted arrays" },
-    { details: "Similar issues as last element" },
-    { details: "Reduces chance of worst-case scenarios" },
-    { details: "Takes median of first, middle, last elements" },
-    { details: "Often provides good balance" },
-  ];
-
-  const CombinedDeatils = strategies.map((item, index) => ({
-    strategy: item.strategy,
-    details: strategiesDetails[index].details,
-  }));
-
-  {
-    /* Advantages */
-  }
-  const advantages = [
-    {
-      points: "Fastest general-purpose in-memory sorting algorithm in practice",
-    },
-    { points: "In-place algorithm (requires minimal additional memory)" },
-    { points: "Cache-efficient due to sequential memory access" },
-    { points: "Can be easily parallelized for better performance" },
-  ];
-
-  {
-    /* Disadvantages */
-  }
-  const disadvantages = [
-    { points: "Not stable (relative order of equal elements may change)" },
-    {
-      points:
-        "Worst-case O(n²) performance (though rare with proper pivot selection)",
-    },
-    { points: "Performance depends heavily on pivot selection strategy" },
-    { points: "Not ideal for linked lists (works best with arrays)" },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge By{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* What is Quick Sort */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            What is Quick Sort?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraphs[0]}
-            </p>
-          </div>
-        </section>
-
-        {/* How Does It Work */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            How Does It Work?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Consider this unsorted array: [10, 80, 30, 90, 40, 50, 70]
-            </p>
-
-            <ul className="space-y-3">
-              {working.map((item, index) => (
-                <li key={index} className="text-[#374151] dark:text-[#d1d5db]">
-                  <span className="font-semibold">{item.steps}</span>
-                  {item.points && (
-                    <ol className="mt-2 space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400 font-normal">
-                      {item.points.map((subitem, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitem}
-                        </li>
-                      ))}
-                    </ol>
-                  )}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Algorithm Steps */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Algorithm Steps
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {algorithm.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.steps}
-                  {item.points && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {item.points.map((subitem, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitem}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Time Complexity */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Time Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {timeComplexity.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
-                    {item.points.split(":")[0]}:
-                  </span>
-                  <span className="ml-2">{item.points.split(":")[1]}</span>
-                </li>
-              ))}
-            </ul>
-            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
-              {paragraphs[1]}
-            </p>
-            <div className="mt-8">
-              <ComplexityGraph
-                bestCase={(n) => n * Math.log2(n)}
-                averageCase={(n) => n * Math.log2(n)}
-                worstCase={(n) => n * n}
-                maxN={25}
-              />
-            </div>
-          </div>
-        </section>
-
-        {/* Space Complexity */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Space Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraphs[2]}
-            </p>
-          </div>
-        </section>
-
-        {/* Advantages */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Advantages
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {advantages.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Disadvantages */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Disadvantages
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {disadvantages.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Pivot Selection Strategies */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Pivot Selection Strategies
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {CombinedDeatils.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-semibold">{item.strategy}:</span>{" "}
-                  {item.details}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Additional Info */}
-        <section className="p-6">
-          <div className="prose dark:prose-invert max-w-none">
-            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                {paragraphs[3]}
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge By{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
diff --git a/app/visualizer/sorting/quicksort/page.jsx b/app/visualizer/sorting/quicksort/page.jsx
deleted file mode 100755
index 6f67429ca..000000000
--- a/app/visualizer/sorting/quicksort/page.jsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import Animation from "@/app/visualizer/sorting/quicksort/animation";
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/sorting/quicksort/content";
-import Quiz from "@/app/visualizer/sorting/quicksort/quiz";
-import Code from "@/app/visualizer/sorting/quicksort/codeBlock";
-import ExploreOther from "@/app/components/ui/exploreOther";
-import BackToTopButton from "@/app/components/ui/backtotop";
-import Footer from "@/app/components/footer";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-
-export const metadata = {
-  title:
-    "Quick Sort Algorithm | Learn with Interactive Animations",
-  description:
-    "Learn how Quick Sort works with step-by-step animations and test your knowledge with an interactive quiz. Includes code examples in JavaScript, C, Python, and Java. Perfect for beginners learning this efficient divide-and-conquer sorting algorithm visually and through hands-on coding.",
-  keywords: [
-    "Quick Sort Visualizer",
-    "Quick Sort Animation",
-    "Quick Sort Visualization",
-    "Quick Sort Algorithm",
-    "Quick Sort Quiz",
-    "Sorting Algorithm Quiz",
-    "Divide and Conquer Sorting",
-    "Sorting Algorithm Visualization",
-    "Learn Quick Sort",
-    "DSA Quick Sort",
-    "Practice Quick Sort",
-    "Interactive Quick Sort Tool",
-    "Test Quick Sort Knowledge",
-    "Quick Sort in JavaScript",
-    "Quick Sort in C",
-    "Quick Sort in Python",
-    "Quick Sort in Java",
-    "Quick Sort Code Examples",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/sorting/quickSort.png",
-        width: 1200,
-        height: 630,
-        alt: "Quick Sort Algorithm Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Quick Sort", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Sorting
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Quick Sort
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section>
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-[#6b7280] dark:text-[#9ca3af] mb-2">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.quickSort}
-            title="Quick Sort"
-            description="Mark Quick Sort as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section className="px-6">
-          <ExploreOther
-            title="Explore Sorting Algorithms"
-            links={[
-              {
-                text: "Selection Sort",
-                url: "/visualizer/sorting/selectionsort",
-              },
-              { text: "Bubble Sort", url: "/visualizer/sorting/bubblesort" },
-              {
-                text: "Insertion Sort",
-                url: "/visualizer/sorting/insertionsort",
-              },
-              { text: "Merge Sort", url: "/visualizer/sorting/mergesort" },
-              { text: "Heap Sort", url: "/algorithms/sorting/heap" },
-            ]}
-          />
-        </section>
-      </div>
-
-      <BackToTopButton />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/sorting/quicksort/quiz.jsx b/app/visualizer/sorting/quicksort/quiz.jsx
deleted file mode 100755
index 793716ffe..000000000
--- a/app/visualizer/sorting/quicksort/quiz.jsx
+++ /dev/null
@@ -1,480 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const QuickSortQuiz = () => {
-  const questions = [
-    {
-      question: "What is the fundamental principle behind Quick Sort?",
-      options: [
-        "Merging two sorted lists into one",
-        "Building a heap structure from the array",
-        "Dividing the array around a pivot element",
-        "Finding the minimum element repeatedly"
-      ],
-      correctAnswer: 2,
-      explanation: "Quick Sort uses a divide-and-conquer approach by selecting a pivot element and partitioning the array into elements less than and greater than the pivot."
-    },
-    {
-      question: "What is the average-case time complexity of Quick Sort?",
-      options: [
-        "O(n)",
-        "O(n log n)",
-        "O(n²)",
-        "O(log n)"
-      ],
-      correctAnswer: 1,
-      explanation: "With good pivot selection that creates balanced partitions, Quick Sort averages O(n log n) time complexity."
-    },
-    {
-      question: "Which pivot selection strategy helps avoid the worst-case O(n²) scenario?",
-      options: [
-        "Always choosing the first element",
-        "Always choosing the last element",
-        "Median-of-three method",
-        "Always choosing the middle element"
-      ],
-      correctAnswer: 2,
-      explanation: "The median-of-three strategy (choosing the median of first, middle, and last elements) helps prevent consistently bad pivot choices that lead to unbalanced partitions."
-    },
-    {
-      question: "What is the space complexity of Quick Sort in the average case?",
-      options: [
-        "O(1)",
-        "O(n)",
-        "O(log n)",
-        "O(n log n)"
-      ],
-      correctAnswer: 2,
-      explanation: "Quick Sort requires O(log n) space for the call stack in the average case due to recursive calls, but can degrade to O(n) in worst-case scenarios."
-    },
-    {
-      question: "In the array [10, 80, 30, 90, 40, 50, 70], if we choose the last element as pivot, what is the array after the first partition?",
-      options: [
-        "[10, 30, 40, 50, 70, 80, 90]",
-        "[10, 30, 40] [50] [70, 80, 90]",
-        "[10, 30, 40, 50] [70] [80, 90]",
-        "[10, 80, 30, 90, 40, 50, 70]"
-      ],
-      correctAnswer: 2,
-      explanation: "With pivot=70, elements less than 70 (10,30,40,50) go left, elements greater (80,90) go right, and 70 is in its final position."
-    },
-    {
-      question: "Which of these is NOT an advantage of Quick Sort?",
-      options: [
-        "Excellent average-case performance",
-        "Stable sorting (maintains relative order of equal elements)",
-        "In-place sorting (requires minimal additional memory)",
-        "Cache-efficient due to sequential memory access"
-      ],
-      correctAnswer: 1,
-      explanation: "Quick Sort is not stable - the relative order of equal elements may change during partitioning."
-    },
-    {
-      question: "What causes Quick Sort's worst-case O(n²) time complexity?",
-      options: [
-        "When the array contains duplicate elements",
-        "When the pivot consistently creates highly unbalanced partitions",
-        "When the array size is very small",
-        "When using extra space for merging"
-      ],
-      correctAnswer: 1,
-      explanation: "The worst case occurs when the pivot selection consistently creates partitions of size n-1 and 0 (extremely unbalanced), leading to n nested calls."
-    },
-    {
-      question: "Why is Quick Sort often preferred over Merge Sort for in-memory sorting?",
-      options: [
-        "It has better worst-case time complexity",
-        "It is a stable sorting algorithm",
-        "It has better cache performance due to sequential access",
-        "It requires less code to implement"
-      ],
-      correctAnswer: 2,
-      explanation: "Quick Sort's sequential memory access pattern makes it more cache-friendly than Merge Sort, contributing to its better real-world performance despite having the same average time complexity."
-    },
-    {
-      question: "Which of these standard library implementations typically uses Quick Sort?",
-      options: [
-        "Python's sorted() function",
-        "Java's Arrays.sort() for primitive types",
-        "C++ STL's stable_sort()",
-        "JavaScript's Array.prototype.sort()"
-      ],
-      correctAnswer: 1,
-      explanation: "Java's Arrays.sort() uses a dual-pivot Quick Sort for primitive types (which don't need stability), while object sorting uses a stable Merge Sort variant."
-    },
-    {
-      question: "What is the primary purpose of the partition step in Quick Sort?",
-      options: [
-        "To divide the array into exactly equal halves",
-        "To place the pivot element in its correct final position",
-        "To sort the array in one pass",
-        "To identify duplicate elements in the array"
-      ],
-      correctAnswer: 1,
-      explanation: "The partition step's main goal is to place the pivot in its correct sorted position while arranging other elements to be less than or greater than the pivot."
-    }
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    setSelectedAnswer(optionIndex);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = selectedAnswer;
-    setAnswers(newAnswers);
-
-    const newScore = newAnswers.reduce((acc, ans, idx) => {
-      return ans === questions[idx].correctAnswer ? acc + 1 : acc;
-    }, 0);
-    setScore(newScore);
-
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(newAnswers[currentQuestion + 1]);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowIntro(true);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the divide-and-conquer principle");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("pivot selection strategies");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("partitioning process");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("advantages of Quick Sort");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("worst-case scenarios");
-    }
-    if (answers[7] !== questions[7].correctAnswer) {
-      weakAreas.push("practical performance considerations");
-    }
-    if (answers[8] !== questions[8].correctAnswer) {
-      weakAreas.push("standard library implementations");
-    }
-    if (answers[9] !== questions[9].correctAnswer) {
-      weakAreas.push("partition step purpose");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Quick Sort concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Quick Sort Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default QuickSortQuiz;
\ No newline at end of file
diff --git a/app/visualizer/sorting/selectionsort/animation.jsx b/app/visualizer/sorting/selectionsort/animation.jsx
deleted file mode 100755
index 00fbb6956..000000000
--- a/app/visualizer/sorting/selectionsort/animation.jsx
+++ /dev/null
@@ -1,274 +0,0 @@
-'use client';
-import React, { useState, useRef, useEffect } from 'react';
-import { gsap } from "gsap";
-import ArrayGenerator from '@/app/components/ui/randomArray';
-import CustomArrayInput from '@/app/components/ui/customArrayInput';
-
-const SelectionSortVisualizer = () => {
-    const [array, setArray] = useState([]);
-    const [sorting, setSorting] = useState(false);
-    const [sorted, setSorted] = useState(false);
-    const [speed, setSpeed] = useState(1);
-    const [comparisons, setComparisons] = useState(0);
-    const [swaps, setSwaps] = useState(0);
-    const [currentIndices, setCurrentIndices] = useState({ 
-      i: -1,    // Current outer loop index
-      j: -1,    // Current inner loop index
-      min: -1   // Current minimum element index
-    });
-    const animationRef = useRef(null);
-  
-    // Generate random array
-    const handleGenerateRandomArray = (newArray) => {
-      setArray(newArray);
-      setSorted(false);
-      resetStats();
-    };
-  
-    // Use custom array input
-    const handleCustomArray = (newArray) => {
-      setArray(newArray);
-      setSorted(false);
-      resetStats();
-    };
-  
-    // Reset all stats and state
-    const resetStats = () => {
-      setComparisons(0);
-      setSwaps(0);
-      setCurrentIndices({ i: -1, j: -1, min: -1 });
-      if (animationRef.current) {
-        clearTimeout(animationRef.current);
-      }
-    };
-  
-    // Selection sort algorithm
-    const selectionSort = async () => {
-      if (sorted || sorting || array.length === 0) return;
-      
-      setSorting(true);
-      let arr = [...array];
-      let n = arr.length;
-      let tempSwaps = 0;
-      let tempComparisons = 0;
-      
-      for (let i = 0; i < n - 1; i++) {
-        let minIndex = i;
-        setCurrentIndices({ i, j: i + 1, min: minIndex });
-        
-        for (let j = i + 1; j < n; j++) {
-          setCurrentIndices(prev => ({ ...prev, j, min: minIndex }));
-          tempComparisons++;
-          setComparisons(tempComparisons);
-  
-          await new Promise(resolve => 
-            animationRef.current = setTimeout(resolve, 1000 / speed)
-          );
-  
-          if (arr[j] < arr[minIndex]) {
-            minIndex = j;
-            setCurrentIndices(prev => ({ ...prev, min: minIndex }));
-            
-            await new Promise(resolve => 
-              animationRef.current = setTimeout(resolve, 1000 / speed)
-            );
-          }
-        }
-        
-        if (minIndex !== i) {
-          [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];
-          tempSwaps++;
-          setSwaps(tempSwaps);
-          setArray([...arr]);
-          
-          const barI = document.querySelectorAll(".array-bar")[i];
-          const barMin = document.querySelectorAll(".array-bar")[minIndex];
-          if (barI && barMin) {
-            gsap.to([barI, barMin], {
-              opacity: 0,
-              scale: 0.5,
-              duration: 0.2,
-              onComplete: () => {
-                gsap.to([barI, barMin], {
-                  opacity: 1,
-                  scale: 1,
-                  duration: 0.2
-                });
-              }
-            });
-          }
-          
-          await new Promise(resolve => 
-            animationRef.current = setTimeout(resolve, 1000 / speed)
-          );
-        }
-      }
-      
-      setArray([...arr]);
-      
-      const barI = document.querySelectorAll(".array-bar")[currentIndices.i];
-      const barMin = document.querySelectorAll(".array-bar")[currentIndices.min];
-      if (barI && barMin) {
-        gsap.to([barI, barMin], {
-          opacity: 0,
-          scale: 0.5,
-          duration: 0.2,
-          onComplete: () => {
-            gsap.to([barI, barMin], {
-              opacity: 1,
-              scale: 1,
-              duration: 0.2
-            });
-          }
-        });
-      }
-      
-      setSorting(false);
-      setSorted(true);
-      setCurrentIndices({ i: -1, j: -1, min: -1 });
-    };
-  
-    // Reset everything
-    const reset = () => {
-      if (animationRef.current) {
-        clearTimeout(animationRef.current);
-      }
-      setArray([]);
-      setSorting(false);
-      setSorted(false);
-      resetStats();
-    };
-  
-    // Clean up on unmount
-    useEffect(() => {
-      return () => {
-        if (animationRef.current) {
-          clearTimeout(animationRef.current);
-        }
-      };
-    }, []);
-  
-    return (
-      <main className="container mx-auto px-6 py-6">
-        <p className="text-lg max-w-4xl mx-auto text-center text-gray-600 dark:text-gray-400 mb-8">
-            Visualize Selection Sort as it repeatedly selects the smallest
-            element and swaps it to its correct position in the array.
-          </p>
-
-          <div className="max-w-4xl mx-auto">
-            {/* Controls */}
-            <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md mb-8 border border-gray-200 dark:border-gray-700">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-                <div className="space-y-2">
-                  <ArrayGenerator
-                    onGenerate={handleGenerateRandomArray}
-                    disabled={sorting}
-                    defaultSize={10}
-                    minValue={5}
-                    maxValue={100}
-                  />
-                  <CustomArrayInput
-                    onSubmit={handleCustomArray}
-                    disabled={sorting}
-                    placeholder="e.g. 5, 3, 8, 1, 2"
-                  />
-                </div>
-                <div className="flex flex-col">
-                  <button
-                    onClick={selectionSort}
-                    disabled={!array.length || sorting || sorted}
-                    className="w-full bg-green-500 text-black px-4 py-2 rounded disabled:opacity-50"
-                  >
-                    {sorting ? "Sorting..." : "Start Selection Sort"}
-                  </button>
-                  <button
-                    onClick={reset}
-                    className="w-full bg-red-500 text-white mt-4 px-4 py-2 rounded"
-                  >
-                    Reset All
-                  </button>
-                </div>
-              </div>
-
-              {/* Speed controls */}
-              <div className="flex items-center gap-4 mb-4">
-                <span className="text-gray-700 dark:text-gray-300">Speed:</span>
-                <input
-                  type="range"
-                  min="0.5"
-                  max="5"
-                  step="0.5"
-                  value={speed}
-                  onChange={(e) => setSpeed(parseFloat(e.target.value))}
-                  className="w-32"
-                  disabled={sorting}
-                />
-                <span className="text-gray-700 dark:text-gray-300">
-                  {speed}x
-                </span>
-              </div>
-
-              {/* Stats */}
-              <div className="grid grid-cols-2 gap-4 text-sm">
-                <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
-                  <div className="font-medium">Comparisons:</div>
-                  <div className="text-2xl">{comparisons}</div>
-                </div>
-                <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
-                  <div className="font-medium">Swaps:</div>
-                  <div className="text-2xl">{swaps}</div>
-                </div>
-              </div>
-            </div>
-
-            {/* Visualization */}
-            <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-              <h2 className="text-xl font-semibold mb-4">
-                Array Visualization
-              </h2>
-              {array.length > 0 ? (
-                <div className="flex flex-wrap gap-4 justify-center">
-                  {array.map((value, index) => {
-                    const isCurrent = index === currentIndices.j;
-                    const isMin = index === currentIndices.min;
-                    const isSorted = sorted || index < currentIndices.i;
-
-                    return (
-                      <div key={index} className="flex flex-col items-center">
-                        <div
-                          className={`array-bar w-16 h-16 flex items-center justify-center rounded-lg border-2 transition-all duration-300 text-lg font-medium
-                            ${
-                              isCurrent
-                                ? "bg-yellow-400 dark:bg-yellow-600 border-yellow-600 dark:border-yellow-400"
-                                : isMin
-                                ? "bg-pink-400 dark:bg-pink-600 border-pink-600 dark:border-pink-400"
-                                : isSorted
-                                ? "bg-green-400 dark:bg-green-600 border-green-600 dark:border-green-400"
-                                : "bg-blue-400 dark:bg-blue-600 border-blue-600 dark:border-blue-400"
-                            }`}
-                        >
-                          {value}
-                        </div>
-                        <div className="mt-1 text-xs text-gray-600 dark:text-gray-400">
-                          {index === currentIndices.i && "i"}
-                          {index === currentIndices.j && "j"}
-                          {index === currentIndices.min && "min"}
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              ) : (
-                <div className="text-center py-8 text-gray-500">
-                  {sorting
-                    ? "Sorting..."
-                    : "Generate or enter an array to begin"}
-                </div>
-              )}
-            </div>
-          </div>
-        </main>
-    );
-  };
-  
-  export default SelectionSortVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/sorting/selectionsort/codeBlock.jsx b/app/visualizer/sorting/selectionsort/codeBlock.jsx
deleted file mode 100755
index f39d0885a..000000000
--- 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/content.jsx b/app/visualizer/sorting/selectionsort/content.jsx
deleted file mode 100755
index 68947c54f..000000000
--- a/app/visualizer/sorting/selectionsort/content.jsx
+++ /dev/null
@@ -1,343 +0,0 @@
-"use client";
-import ComplexityGraph from "@/app/components/ui/graph";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState('light');
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem('theme') || 'light';
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener('storage', updateTheme);
-    window.addEventListener('themeChange', updateTheme);
-
-    return () => {
-      window.removeEventListener('storage', updateTheme);
-      window.removeEventListener('themeChange', updateTheme);
-    };
-  }, []);
-
-  const paragraph = [
-    `Selection Sort is an in-place comparison sorting algorithm that divides the input list into two parts: a sorted sublist which is built up from left to right, and a remaining unsorted sublist. It repeatedly selects the smallest (or largest) element from the unsorted portion and moves it to the sorted portion.`,
-    `The quadratic time complexity occurs because it performs O(n) comparisons for each of the O(n) elements.`,
-    `Selection Sort is an in-place algorithm, requiring only O(1) additional space for temporary variables during swaps.`,
-    `Selection Sort is primarily used for educational purposes to introduce sorting concepts. In practice, it's outperformed by more advanced algorithms like QuickSort and MergeSort, but can be useful when memory writes are expensive (since it makes only O(n) swaps).`,
-  ];
-
-  const working = [
-    {
-      pass: "First Pass:",
-      points: [
-        "Find the minimum in [64, 25, 12, 22, 11] → 11 at index 4",
-        "Swap with first element → [11, 25, 12, 22, 64]",
-      ],
-    },
-    {
-      pass: "Second Pass:",
-      points: [
-        "Find minimum in [25, 12, 22, 64] → 12 at index 2",
-        "Swap with first element → [11, 12, 25, 22, 64]",
-      ],
-    },
-    {
-      pass: "Third Pass:",
-      points: [
-        "Find minimum in [25, 22, 64] → 22 at index 2",
-        "Swap with first element → [11, 12, 22, 25, 64]",
-      ],
-    },
-    {
-      pass: "Fourth Pass:",
-      points: [
-        "Find minimum in [25, 64] → 25 at index 0",
-        "No swap needed → [11, 12, 22, 25, 64]",
-      ],
-    },
-    { pass: "Result:", points: ["[11, 12, 22, 25, 64]"] },
-  ];
-
-  const algorithm = [
-    { points: "Set the first element as minimum" },
-    {
-      points: "Compare minimum with the second element:",
-      subpoints: ["If second element is smaller, set it as new minimum"],
-    },
-    { points: "Continue until last element is reached" },
-    { points: "Swap minimum with first element" },
-    { points: "Repeat for remaining unsorted portion" },
-  ];
-
-  const timeComplexity = [
-    { points: "Best Case: ", subpoints: ["O(n²)"] },
-    { points: "Average Case: ", subpoints: ["O(n²)"] },
-    { points: "Worst Case: ", subpoints: ["O(n²)"] },
-  ];
-
-  const Advantages = [
-    { points: "Simple to understand and implement" },
-    { points: "Performs well on small lists" },
-    { points: "Minimal memory usage (in-place sorting)" },
-    { points: "Only O(n) swaps required (better than Bubble Sort)" },
-  ];
-
-  const Disadvantages = [
-    { points: "Poor performance on large lists (quadratic time complexity)" },
-    { points: "Not stable (may change relative order of equal elements)" },
-    { points: "Less efficient than Insertion Sort for nearly sorted data" },
-    { points: "Always performs O(n²) comparisons regardless of input" },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge By{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* What is Selection Sort */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            What is Selection Sort?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraph[0]}
-            </p>
-          </div>
-        </section>
-
-        {/* How Does It Work */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            How Does It Work?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Consider this unsorted array: [64, 25, 12, 22, 11]
-            </p>
-
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {working.map((items, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-semibold">{items.pass}</span>
-                  {items.points && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500 font-normal">
-                      {items.points.map((subitems, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitems}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Algorithm Steps */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Algorithm Steps
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {algorithm.map((items, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {items.points}
-                  {items.subpoints && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {items.subpoints.map((subitems, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitems}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Time Complexity */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Time Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {timeComplexity.map((items, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
-                    {items.points}
-                  </span>
-                  <span className="ml-2">{items.subpoints}</span>
-                </li>
-              ))}
-            </ul>
-
-            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
-              {paragraph[1]}
-            </p>
-
-            <div className="mt-8">
-              <ComplexityGraph
-                bestCase={(n) => n * n}
-                averageCase={(n) => n * n}
-                worstCase={(n) => n * n}
-                maxN={25}
-              />
-            </div>
-          </div>
-        </section>
-
-        {/* Space Complexity */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Space Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraph[2]}
-            </p>
-          </div>
-        </section>
-
-        {/* Advantages */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Advantages
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {Advantages.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Disadvantages */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Disadvantages
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {Disadvantages.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Additional Info */}
-        <section className="p-6">
-          <div className="prose dark:prose-invert max-w-none">
-            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                {paragraph[3]}
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge By{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
diff --git a/app/visualizer/sorting/selectionsort/page.jsx b/app/visualizer/sorting/selectionsort/page.jsx
deleted file mode 100755
index 0739e6dc4..000000000
--- a/app/visualizer/sorting/selectionsort/page.jsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import Animation from "@/app/visualizer/sorting/selectionsort/animation";
-import Navbar from "@/app/components/navbarinner";
-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 Quiz from "@/app/visualizer/sorting/selectionsort/quiz";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-
-export const metadata = {
-  title:
-    "Selection Sort Visualizer | Simple Sorting Animation with Code in JS, C, Python, Java",
-  description:
-    "Visualize Selection Sort in action with step-by-step animations and code examples in JavaScript, C, Python, and Java. A beginner-friendly way to understand this simple sorting algorithm using comparisons and swaps.",
-  keywords: [
-    "Selection Sort Visualizer",
-    "Selection Sort Animation",
-    "Selection Sort Algorithm",
-    "DSA Selection Sort",
-    "Learn Selection Sort",
-    "Sorting Algorithm Visualization",
-    "Interactive Sorting Tool",
-    "Sorting for Beginners",
-    "Step by Step Sorting",
-    "Selection Sort in JavaScript",
-    "Selection Sort in C",
-    "Selection Sort in Python",
-    "Selection Sort in Java",
-    "Selection Sort Code Examples",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/sorting/selectionSort.png",
-        width: 1200,
-        height: 630,
-        alt: "Selection Sort Algorithm Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visulaizer", href: "/visualizer" },
-    { name: "Selection Sort", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Sorting
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Selection Sort
-            </h1>
-            <ArticleActions />
-          </div>
-
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section>
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-[#6b7280] dark:text-[#9ca3af] mb-2">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.selectionSort}
-            title="Selection Sort"
-            description="Mark Selection Sort as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section className="px-6">
-          <ExploreOther
-            title="Explore Sorting Algorithms"
-            links={[
-              { text: "Quick Sort", url: "/visualizer/sorting/quicksort" },
-              { text: "Bubble Sort", url: "/visualizer/sorting/bubblesort" },
-              {
-                text: "Insertion Sort",
-                url: "/visualizer/sorting/insertionsort",
-              },
-              { text: "Merge Sort", url: "/visualizer/sorting/mergesort" },
-              { text: "Heap Sort", url: "/algorithms/sorting/heap" },
-            ]}
-          />
-        </section>
-      </div>
-
-      <BackToTopButton />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/sorting/selectionsort/quiz.jsx b/app/visualizer/sorting/selectionsort/quiz.jsx
deleted file mode 100755
index 9fdd28dc1..000000000
--- a/app/visualizer/sorting/selectionsort/quiz.jsx
+++ /dev/null
@@ -1,438 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const SelectionSortQuiz = () => {
-  const questions = [
-    {
-      question: "What is the basic principle of Selection Sort?",
-      options: [
-        "Dividing the list into smaller sublists",
-        "Repeatedly finding the minimum element and swapping it with the current position",
-        "Comparing adjacent elements and swapping if they're in the wrong order",
-        "Merging two sorted lists into one"
-      ],
-      correctAnswer: 1,
-      explanation: "Selection Sort works by repeatedly finding the minimum element from the unsorted part and putting it at the beginning."
-    },
-    {
-      question: "What is the time complexity of Selection Sort in all cases?",
-      options: [
-        "O(n)",
-        "O(n log n)",
-        "O(n²)",
-        "O(1)"
-      ],
-      correctAnswer: 2,
-      explanation: "Selection Sort always requires O(n²) comparisons regardless of input order because it must scan all remaining elements for each position."
-    },
-    {
-      question: "In the array [64, 25, 12, 22, 11], how many swaps occur during the entire sorting process?",
-      options: [
-        "1",
-        "2",
-        "4",
-        "5"
-      ],
-      correctAnswer: 2,
-      explanation: "Selection Sort makes only 4 swaps total (one for each element except the last): 64↔11, 25↔12, 22↔22 (no swap), and 64↔25."
-    },
-    {
-      question: "What makes Selection Sort different from Bubble Sort?",
-      options: [
-        "Selection Sort is stable while Bubble Sort is not",
-        "Selection Sort makes fewer swaps (O(n) vs O(n²))",
-        "Bubble Sort has better worst-case time complexity",
-        "Selection Sort requires additional O(n) space"
-      ],
-      correctAnswer: 1,
-      explanation: "The key advantage of Selection Sort is that it makes only O(n) swaps compared to Bubble Sort's O(n²) swaps in worst case."
-    },
-    {
-      question: "What is the space complexity of Selection Sort?",
-      options: [
-        "O(n)",
-        "O(n log n)",
-        "O(n²)",
-        "O(1)"
-      ],
-      correctAnswer: 3,
-      explanation: "Like Bubble Sort, Selection Sort is an in-place algorithm that only requires O(1) additional space for temporary storage during swaps."
-    },
-    {
-      question: "Why is Selection Sort not considered stable?",
-      options: [
-        "Because it changes the relative order of equal elements",
-        "Because its time complexity varies with input",
-        "Because it requires recursive implementation",
-        "Because it uses additional memory"
-      ],
-      correctAnswer: 0,
-      explanation: "Selection Sort isn't stable because the swapping of elements can change the relative order of equal keys (e.g., [5a, 2, 5b] → [2, 5b, 5a])."
-    },
-    {
-      question: "When might Selection Sort be preferred over other simple sorts?",
-      options: [
-        "When the input is already sorted",
-        "When memory writes are expensive",
-        "When stability is required",
-        "When dealing with very large datasets"
-      ],
-      correctAnswer: 1,
-      explanation: "Selection Sort's O(n) swaps make it useful when memory writes are expensive, even though it still requires O(n²) comparisons."
-    }
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    setSelectedAnswer(optionIndex);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = selectedAnswer;
-    setAnswers(newAnswers);
-
-    const newScore = newAnswers.reduce((acc, ans, idx) => {
-      return ans === questions[idx].correctAnswer ? acc + 1 : acc;
-    }, 0);
-    setScore(newScore);
-
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(newAnswers[currentQuestion + 1]);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowIntro(true);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Selection Sort");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Selection Sort");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("comparison with other simple sorts");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("stability characteristics");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Selection Sort concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Selection Sort Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default SelectionSortQuiz;
\ No newline at end of file
diff --git a/app/visualizer/stack/implementation/usingArray/codeBlock.jsx b/app/visualizer/stack/implementation/usingArray/codeBlock.jsx
deleted file mode 100755
index 27f1e5d38..000000000
--- a/app/visualizer/stack/implementation/usingArray/codeBlock.jsx
+++ /dev/null
@@ -1,530 +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 using Array (JavaScript)
-class Stack {
-  constructor(size = 10) {
-    this.items = new Array(size);
-    this.top = -1;
-    this.capacity = size;
-  }
-
-  // Push operation
-  push(element) {
-    if (this.isFull()) {
-      console.log("Stack Overflow");
-      return;
-    }
-    this.items[++this.top] = element;
-  }
-
-  // Pop operation
-  pop() {
-    if (this.isEmpty()) {
-      console.log("Stack Underflow");
-      return undefined;
-    }
-    return this.items[this.top--];
-  }
-
-  // Peek operation
-  peek() {
-    if (this.isEmpty()) {
-      console.log("Stack is empty");
-      return undefined;
-    }
-    return this.items[this.top];
-  }
-
-  // Check if stack is empty
-  isEmpty() {
-    return this.top === -1;
-  }
-
-  // Check if stack is full
-  isFull() {
-    return this.top === this.capacity - 1;
-  }
-
-  // Get stack size
-  size() {
-    return this.top + 1;
-  }
-
-  // Print stack contents
-  print() {
-    if (this.isEmpty()) {
-      console.log("Stack is empty");
-      return;
-    }
-    console.log("Stack contents:");
-    for (let i = this.top; i >= 0; i--) {
-      console.log(this.items[i]);
-    }
-  }
-}
-
-// Usage
-const stack = new Stack(5);
-stack.push(10);
-stack.push(20);
-stack.push(30);
-console.log("Top element:", stack.peek()); // 30
-console.log("Stack size:", stack.size());  // 3
-stack.print();
-stack.pop();
-console.log("After pop, top element:", stack.peek()); // 20`,
-
-    python: `# Stack Implementation using Array (Python)
-class Stack:
-    def __init__(self, size=10):
-        self.items = [None] * size
-        self.top = -1
-        self.capacity = size
-    
-    def push(self, element):
-        if self.is_full():
-            print("Stack Overflow")
-            return
-        self.top += 1
-        self.items[self.top] = element
-    
-    def pop(self):
-        if self.is_empty():
-            print("Stack Underflow")
-            return None
-        element = self.items[self.top]
-        self.top -= 1
-        return element
-    
-    def peek(self):
-        if self.is_empty():
-            print("Stack is empty")
-            return None
-        return self.items[self.top]
-    
-    def is_empty(self):
-        return self.top == -1
-    
-    def is_full(self):
-        return self.top == self.capacity - 1
-    
-    def size(self):
-        return self.top + 1
-    
-    def print_stack(self):
-        if self.is_empty():
-            print("Stack is empty")
-            return
-        print("Stack contents:")
-        for i in range(self.top, -1, -1):
-            print(self.items[i])
-
-# Usage
-stack = Stack(5)
-stack.push(10)
-stack.push(20)
-stack.push(30)
-print("Top element:", stack.peek())  # 30
-print("Stack size:", stack.size())   # 3
-stack.print_stack()
-stack.pop()
-print("After pop, top element:", stack.peek())  # 20`,
-
-    java: `// Stack Implementation using Array (Java)
-public class ArrayStack {
-    private int[] items;
-    private int top;
-    private int capacity;
-    
-    public ArrayStack(int size) {
-        items = new int[size];
-        top = -1;
-        capacity = size;
-    }
-    
-    public void push(int element) {
-        if (isFull()) {
-            System.out.println("Stack Overflow");
-            return;
-        }
-        items[++top] = element;
-    }
-    
-    public int pop() {
-        if (isEmpty()) {
-            System.out.println("Stack Underflow");
-            return -1;
-        }
-        return items[top--];
-    }
-    
-    public int peek() {
-        if (isEmpty()) {
-            System.out.println("Stack is empty");
-            return -1;
-        }
-        return items[top];
-    }
-    
-    public boolean isEmpty() {
-        return top == -1;
-    }
-    
-    public boolean isFull() {
-        return top == capacity - 1;
-    }
-    
-    public int size() {
-        return top + 1;
-    }
-    
-    public void print() {
-        if (isEmpty()) {
-            System.out.println("Stack is empty");
-            return;
-        }
-        System.out.println("Stack contents:");
-        for (int i = top; i >= 0; i--) {
-            System.out.println(items[i]);
-        }
-    }
-
-    public static void main(String[] args) {
-        ArrayStack stack = new ArrayStack(5);
-        stack.push(10);
-        stack.push(20);
-        stack.push(30);
-        System.out.println("Top element: " + stack.peek()); // 30
-        System.out.println("Stack size: " + stack.size());  // 3
-        stack.print();
-        stack.pop();
-        System.out.println("After pop, top element: " + stack.peek()); // 20
-    }
-}`,
-
-    c: `// Stack Implementation using Array (C)
-#include <stdio.h>
-#include <stdlib.h>
-#include <stdbool.h>
-
-#define DEFAULT_SIZE 10
-
-typedef struct {
-    int *items;
-    int top;
-    int capacity;
-} Stack;
-
-void initialize(Stack *s, int size) {
-    s->items = (int*)malloc(size * sizeof(int));
-    s->top = -1;
-    s->capacity = size;
-}
-
-bool isFull(Stack *s) {
-    return s->top == s->capacity - 1;
-}
-
-bool isEmpty(Stack *s) {
-    return s->top == -1;
-}
-
-void push(Stack *s, int element) {
-    if (isFull(s)) {
-        printf("Stack Overflow\n");
-        return;
-    }
-    s->items[++s->top] = element;
-}
-
-int pop(Stack *s) {
-    if (isEmpty(s)) {
-        printf("Stack Underflow\n");
-        return -1;
-    }
-    return s->items[s->top--];
-}
-
-int peek(Stack *s) {
-    if (isEmpty(s)) {
-        printf("Stack is empty\n");
-        return -1;
-    }
-    return s->items[s->top];
-}
-
-int size(Stack *s) {
-    return s->top + 1;
-}
-
-void print(Stack *s) {
-    if (isEmpty(s)) {
-        printf("Stack is empty\n");
-        return;
-    }
-    printf("Stack contents:\n");
-    for (int i = s->top; i >= 0; i--) {
-        printf("%d\n", s->items[i]);
-    }
-}
-
-void destroy(Stack *s) {
-    free(s->items);
-}
-
-int main() {
-    Stack stack;
-    initialize(&stack, 5);
-    
-    push(&stack, 10);
-    push(&stack, 20);
-    push(&stack, 30);
-    printf("Top element: %d\n", peek(&stack)); // 30
-    printf("Stack size: %d\n", size(&stack));  // 3
-    print(&stack);
-    pop(&stack);
-    printf("After pop, top element: %d\n", peek(&stack)); // 20
-    
-    destroy(&stack);
-    return 0;
-}`,
-
-    cpp: `// Stack Implementation using Array (C++)
-#include <iostream>
-using namespace std;
-
-class ArrayStack {
-private:
-    int* items;
-    int top;
-    int capacity;
-    
-public:
-    ArrayStack(int size = 10) {
-        items = new int[size];
-        top = -1;
-        capacity = size;
-    }
-    
-    ~ArrayStack() {
-        delete[] items;
-    }
-    
-    void push(int element) {
-        if (isFull()) {
-            cout << "Stack Overflow" << endl;
-            return;
-        }
-        items[++top] = element;
-    }
-    
-    int pop() {
-        if (isEmpty()) {
-            cout << "Stack Underflow" << endl;
-            return -1;
-        }
-        return items[top--];
-    }
-    
-    int peek() const {
-        if (isEmpty()) {
-            cout << "Stack is empty" << endl;
-            return -1;
-        }
-        return items[top];
-    }
-    
-    bool isEmpty() const {
-        return top == -1;
-    }
-    
-    bool isFull() const {
-        return top == capacity - 1;
-    }
-    
-    int size() const {
-        return top + 1;
-    }
-    
-    void print() const {
-        if (isEmpty()) {
-            cout << "Stack is empty" << endl;
-            return;
-        }
-        cout << "Stack contents:" << endl;
-        for (int i = top; i >= 0; i--) {
-            cout << items[i] << endl;
-        }
-    }
-};
-
-int main() {
-    ArrayStack stack(5);
-    stack.push(10);
-    stack.push(20);
-    stack.push(30);
-    cout << "Top element: " << stack.peek() << endl; // 30
-    cout << "Stack size: " << stack.size() << endl;  // 3
-    stack.print();
-    stack.pop();
-    cout << "After pop, top element: " << stack.peek() << 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">
-              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
diff --git a/app/visualizer/stack/implementation/usingArray/content.jsx b/app/visualizer/stack/implementation/usingArray/content.jsx
deleted file mode 100755
index c10af7141..000000000
--- a/app/visualizer/stack/implementation/usingArray/content.jsx
+++ /dev/null
@@ -1,274 +0,0 @@
-"use client";
-import React from "react";
-import { motion } from "framer-motion";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem("theme") || "light";
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener("storage", updateTheme);
-    window.addEventListener("themeChange", updateTheme);
-
-    return () => {
-      window.removeEventListener("storage", updateTheme);
-      window.removeEventListener("themeChange", updateTheme);
-    };
-  }, []);
-
-  const push = [
-    { points: "Check if stack is full" },
-    { points: 'If full, return "Stack Overflow"' },
-    { points: "Increment top pointer" },
-    { points: "Store element at array[top]" },
-  ];
-
-  const pop = [
-    { points: "Check if stack is empty" },
-    { points: 'If empty, return "Stack Underflow"' },
-    { points: "Access element at array[top]" },
-    { points: "Decrement top pointer" },
-    { points: "Return the element" },
-  ];
-
-  const peek = [
-    { points: "Check if stack is empty" },
-    { points: "If empty, return null" },
-    { points: "Return array[top] without removal" },
-  ];
-
-  const isEmpty = [
-    { points: "Return true if top pointer is -1" },
-    { points: "Return false otherwise" },
-  ];
-
-  const initialize = [
-    { points: "Create an empty array to store elements" },
-    { points: "Initialize top pointer/index to -1" },
-    { points: "Optional: Set maximum size limit" },
-  ];
-
-  const isFull = [
-    { points: "Return true if top equals (max_size - 1)" },
-    { points: "Return false otherwise" },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-            <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* -------  HEADER  ------- */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            What is Stack Implementation Using Array?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              A stack is a linear data structure that follows the LIFO (Last In First Out) principle. Arrays provide a simple way to implement stack operations with constant time complexity.
-            </p>
-          </div>
-        </section>
-
-        {/* -------  ALGORITHMIC STEPS – LIFT CARDS  ------- */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Algorithmic Steps
-          </h1>
-
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            {/* Basic Operations */}
-            <div className="rounded-lg p-4 bg-white dark:bg-neutral-950 shadow-md">
-              <h2 className="text-lg sm:text-xl mb-3 font-bold text-center">Stack Basic Operations</h2>
-              <div className="space-y-4">
-                {[{t:"Initialize Stack", s:initialize}, {t:"push()", s:push}, {t:"pop()", s:pop}].map(
-                  ({t, s}, idx) => (
-                    <motion.div
-                      key={t}
-                      initial={{ y: 40, opacity: 0 }}
-                      whileInView={{ y: 0, opacity: 1 }}
-                      viewport={{ once: true, amount: 0.3 }}
-                      transition={{ type: "spring", stiffness: 120, delay: idx * 0.1 }}
-                      whileHover={{ y: -4, boxShadow: "0 10px 20px -5px rgba(0,0,0,0.1)" }}
-                      className="p-4 rounded-lg bg-gray-50 dark:bg-neutral-900
-                                 border border-transparent hover:border-blue-300
-                                 dark:hover:border-blue-500 transition"
-                    >
-                      <span className="inline-block mb-2 px-2 py-0.5 rounded-full text-xs font-semibold bg-indigo-100 dark:bg-blue-900 text-blue-700 dark:text-indigo-200">
-                        Step {idx + 1}
-                      </span>
-                      <h3 className="font-semibold mb-2">{t}</h3>
-                      <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                        {s.map((p, i) => (
-                          <li key={i} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                            {p.points}
-                          </li>
-                        ))}
-                      </ol>
-                    </motion.div>
-                  )
-                )}
-              </div>
-            </div>
-
-            {/* Helper Operations */}
-            <div className="rounded-lg p-4 bg-white dark:bg-neutral-950 shadow-md">
-              <h2 className="text-lg sm:text-xl mb-3 font-bold text-center">Stack Helper Operations</h2>
-              <div className="space-y-4">
-                {[{t:"peek()", s:peek}, {t:"isEmpty()", s:isEmpty}, {t:"isFull()", s:isFull}].map(
-                  ({t, s}, idx) => (
-                    <motion.div
-                      key={t}
-                      initial={{ y: 40, opacity: 0 }}
-                      whileInView={{ y: 0, opacity: 1 }}
-                      viewport={{ once: true, amount: 0.3 }}
-                      transition={{ type: "spring", stiffness: 120, delay: idx * 0.1 }}
-                      whileHover={{ y: -4, boxShadow: "0 10px 20px -5px rgba(0,0,0,0.1)" }}
-                      className="p-4 rounded-lg bg-gray-50 dark:bg-neutral-900
-                                 border border-transparent hover:border-blue-300
-                                 dark:hover:border-blue-600 transition"
-                    >
-                      <span className="inline-block mb-2 px-2 py-0.5 rounded-full text-xs font-semibold bg-indigo-100 dark:bg-blue-900 text-blue-700 dark:text-indigo-200">
-                        Step {idx + 1}
-                      </span>
-                      <h3 className="font-semibold mb-2">{t}</h3>
-                      <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                        {s.map((p, i) => (
-                          <li key={i} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                            {p.points}
-                          </li>
-                        ))}
-                      </ol>
-                    </motion.div>
-                  )
-                )}
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Time Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none overflow-x-auto">
-            <table className="min-w-full border-collapse border border-blue-400">
-              <thead>
-                <tr className="bg-blue-100 dark:bg-blue-900">
-                  <th className="border border-blue-400 p-3 font-semibold">Operation</th>
-                  <th className="border border-blue-400 p-3 font-semibold">Complexity</th>
-                  <th className="border border-blue-400 p-3 font-semibold hidden sm:table-cell">Reason</th>
-                </tr>
-              </thead>
-              <tbody>
-                {[
-                  ["push()", "O(1)", "Single array access"],
-                  ["pop()", "O(1)", "Single array access"],
-                  ["peek()", "O(1)", "Single array access"],
-                  ["isEmpty()", "O(1)", "Pointer comparison"],
-                ].map(([op, comp, reason], index) => (
-                  <tr key={op} className={index % 2 === 0 ? "bg-white dark:bg-neutral-950" : "bg-blue-50 dark:bg-neutral-900"}>
-                    <td className="border border-blue-400 p-3">{op}</td>
-                    <td className="border border-blue-400 p-3 font-mono">{comp}</td>
-                    <td className="border border-blue-400 p-3 hidden sm:table-cell">{reason}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
-
-        <section className="p-6">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Key Characteristics
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {[
-                "LIFO Principle: Last element added is first removed",
-                "Dynamic Size: Can grow until memory limits",
-                "Efficiency: All operations work in constant time",
-                "Versatility: Foundation for many algorithms",
-              ].map((item) => (
-                <li key={item} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                  {item}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
\ No newline at end of file
diff --git a/app/visualizer/stack/implementation/usingArray/page.jsx b/app/visualizer/stack/implementation/usingArray/page.jsx
deleted file mode 100755
index c69e80d60..000000000
--- a/app/visualizer/stack/implementation/usingArray/page.jsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/stack/implementation/usingArray/content";
-import Code from "@/app/visualizer/stack/implementation/usingArray/codeBlock";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-import Footer from "@/app/components/footer";
-import ExploreOther from "@/app/components/ui/exploreOther";
-import BackToTopButton from "@/app/components/ui/backtotop";
-
-export const metadata = {
-  title:
-    "Stack Implementation using Array | Learn Stack in DSA with JS, C, Python, Java Code",
-  description:
-    "Understand how to implement a Stack using an Array with visual explanations, animations, and complete code examples in JavaScript, C, Python, and Java. Perfect for DSA beginners and interview prep.",
-  keywords: [
-    "Stack using Array",
-    "Stack Implementation",
-    "Stack Implementation in JavaScript",
-    "Stack Implementation in C",
-    "Stack Implementation in Python",
-    "Stack Implementation in Java",
-    "DSA Stack",
-    "Array Stack",
-    "Data Structures Stack",
-    "Stack Push Pop Array",
-    "Learn Stack DSA",
-    "Visualize Stack Implementation",
-    "Stack Code Examples",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/stack/stackArray.png",
-        width: 1200,
-        height: 630,
-        alt: "Stack Implementation using Array",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Stack : Implementation Using Array", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Stack
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Implementation Using Array
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.stackArray}
-            title="Stack Implementation using Array"
-            description="Mark Stack using Array as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section>
-          <ExploreOther
-            title="Explore other implementation"
-            links={[{ text: "Using Linked List", url: "./usingLinkedList" }]}
-          />
-        </section>
-      </div>
-
-      <BackToTopButton />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/stack/implementation/usingLinkedList/codeBlock.jsx b/app/visualizer/stack/implementation/usingLinkedList/codeBlock.jsx
deleted file mode 100755
index 2f095c28a..000000000
--- a/app/visualizer/stack/implementation/usingLinkedList/codeBlock.jsx
+++ /dev/null
@@ -1,562 +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 using Linked List (JavaScript)
-class Node {
-  constructor(value) {
-    this.value = value;
-    this.next = null;
-  }
-}
-
-class LinkedListStack {
-  constructor() {
-    this.top = null;
-    this.size = 0;
-  }
-
-  // Push operation
-  push(value) {
-    const newNode = new Node(value);
-    newNode.next = this.top;
-    this.top = newNode;
-    this.size++;
-  }
-
-  // Pop operation
-  pop() {
-    if (this.isEmpty()) {
-      console.log("Stack Underflow");
-      return null;
-    }
-    const value = this.top.value;
-    this.top = this.top.next;
-    this.size--;
-    return value;
-  }
-
-  // Peek operation
-  peek() {
-    if (this.isEmpty()) {
-      console.log("Stack is empty");
-      return null;
-    }
-    return this.top.value;
-  }
-
-  // Check if stack is empty
-  isEmpty() {
-    return this.size === 0;
-  }
-
-  // Get stack size
-  getSize() {
-    return this.size;
-  }
-
-  // Print stack contents
-  print() {
-    if (this.isEmpty()) {
-      console.log("Stack is empty");
-      return;
-    }
-    let current = this.top;
-    console.log("Stack contents (top to bottom):");
-    while (current) {
-      console.log(current.value);
-      current = current.next;
-    }
-  }
-}
-
-// Usage
-const stack = new LinkedListStack();
-stack.push(10);
-stack.push(20);
-stack.push(30);
-console.log("Top element:", stack.peek()); // 30
-console.log("Stack size:", stack.getSize()); // 3
-stack.print();
-stack.pop();
-console.log("After pop, top element:", stack.peek()); // 20`,
-
-    python: `# Stack Implementation using Linked List (Python)
-class Node:
-    def __init__(self, value):
-        self.value = value
-        self.next = None
-
-class LinkedListStack:
-    def __init__(self):
-        self.top = None
-        self.size = 0
-    
-    def push(self, value):
-        new_node = Node(value)
-        new_node.next = self.top
-        self.top = new_node
-        self.size += 1
-    
-    def pop(self):
-        if self.is_empty():
-            print("Stack Underflow")
-            return None
-        value = self.top.value
-        self.top = self.top.next
-        self.size -= 1
-        return value
-    
-    def peek(self):
-        if self.is_empty():
-            print("Stack is empty")
-            return None
-        return self.top.value
-    
-    def is_empty(self):
-        return self.size == 0
-    
-    def get_size(self):
-        return self.size
-    
-    def print_stack(self):
-        if self.is_empty():
-            print("Stack is empty")
-            return
-        current = self.top
-        print("Stack contents (top to bottom):")
-        while current:
-            print(current.value)
-            current = current.next
-
-# Usage
-stack = LinkedListStack()
-stack.push(10)
-stack.push(20)
-stack.push(30)
-print("Top element:", stack.peek())  # 30
-print("Stack size:", stack.get_size())  # 3
-stack.print_stack()
-stack.pop()
-print("After pop, top element:", stack.peek())  # 20`,
-
-    java: `// Stack Implementation using Linked List (Java)
-class Node {
-    int value;
-    Node next;
-    
-    public Node(int value) {
-        this.value = value;
-        this.next = null;
-    }
-}
-
-public class LinkedListStack {
-    private Node top;
-    private int size;
-    
-    public LinkedListStack() {
-        top = null;
-        size = 0;
-    }
-    
-    public void push(int value) {
-        Node newNode = new Node(value);
-        newNode.next = top;
-        top = newNode;
-        size++;
-    }
-    
-    public int pop() {
-        if (isEmpty()) {
-            System.out.println("Stack Underflow");
-            return -1;
-        }
-        int value = top.value;
-        top = top.next;
-        size--;
-        return value;
-    }
-    
-    public int peek() {
-        if (isEmpty()) {
-            System.out.println("Stack is empty");
-            return -1;
-        }
-        return top.value;
-    }
-    
-    public boolean isEmpty() {
-        return size == 0;
-    }
-    
-    public int getSize() {
-        return size;
-    }
-    
-    public void print() {
-        if (isEmpty()) {
-            System.out.println("Stack is empty");
-            return;
-        }
-        Node current = top;
-        System.out.println("Stack contents (top to bottom):");
-        while (current != null) {
-            System.out.println(current.value);
-            current = current.next;
-        }
-    }
-
-    public static void main(String[] args) {
-        LinkedListStack stack = new LinkedListStack();
-        stack.push(10);
-        stack.push(20);
-        stack.push(30);
-        System.out.println("Top element: " + stack.peek()); // 30
-        System.out.println("Stack size: " + stack.getSize()); // 3
-        stack.print();
-        stack.pop();
-        System.out.println("After pop, top element: " + stack.peek()); // 20
-    }
-}`,
-
-    c: `// Stack Implementation using Linked List (C)
-#include <stdio.h>
-#include <stdlib.h>
-#include <stdbool.h>
-
-typedef struct Node {
-    int value;
-    struct Node* next;
-} Node;
-
-typedef struct {
-    Node* top;
-    int size;
-} LinkedListStack;
-
-void initialize(LinkedListStack* s) {
-    s->top = NULL;
-    s->size = 0;
-}
-
-void push(LinkedListStack* s, int value) {
-    Node* newNode = (Node*)malloc(sizeof(Node));
-    newNode->value = value;
-    newNode->next = s->top;
-    s->top = newNode;
-    s->size++;
-}
-
-int pop(LinkedListStack* s) {
-    if (s->size == 0) {
-        printf("Stack Underflow\n");
-        return -1;
-    }
-    Node* temp = s->top;
-    int value = temp->value;
-    s->top = s->top->next;
-    free(temp);
-    s->size--;
-    return value;
-}
-
-int peek(LinkedListStack* s) {
-    if (s->size == 0) {
-        printf("Stack is empty\n");
-        return -1;
-    }
-    return s->top->value;
-}
-
-bool isEmpty(LinkedListStack* s) {
-    return s->size == 0;
-}
-
-int size(LinkedListStack* s) {
-    return s->size;
-}
-
-void print(LinkedListStack* s) {
-    if (s->size == 0) {
-        printf("Stack is empty\n");
-        return;
-    }
-    Node* current = s->top;
-    printf("Stack contents (top to bottom):\n");
-    while (current != NULL) {
-        printf("%d\n", current->value);
-        current = current->next;
-    }
-}
-
-void destroy(LinkedListStack* s) {
-    while (s->top != NULL) {
-        Node* temp = s->top;
-        s->top = s->top->next;
-        free(temp);
-    }
-}
-
-int main() {
-    LinkedListStack stack;
-    initialize(&stack);
-    
-    push(&stack, 10);
-    push(&stack, 20);
-    push(&stack, 30);
-    printf("Top element: %d\n", peek(&stack)); // 30
-    printf("Stack size: %d\n", size(&stack)); // 3
-    print(&stack);
-    pop(&stack);
-    printf("After pop, top element: %d\n", peek(&stack)); // 20
-    
-    destroy(&stack);
-    return 0;
-}`,
-
-    cpp: `// Stack Implementation using Linked List (C++)
-#include <iostream>
-using namespace std;
-
-class Node {
-public:
-    int value;
-    Node* next;
-    
-    Node(int val) : value(val), next(nullptr) {}
-};
-
-class LinkedListStack {
-private:
-    Node* top;
-    int size;
-    
-public:
-    LinkedListStack() : top(nullptr), size(0) {}
-    
-    ~LinkedListStack() {
-        while (!isEmpty()) {
-            pop();
-        }
-    }
-    
-    void push(int value) {
-        Node* newNode = new Node(value);
-        newNode->next = top;
-        top = newNode;
-        size++;
-    }
-    
-    int pop() {
-        if (isEmpty()) {
-            cout << "Stack Underflow" << endl;
-            return -1;
-        }
-        Node* temp = top;
-        int value = temp->value;
-        top = top->next;
-        delete temp;
-        size--;
-        return value;
-    }
-    
-    int peek() {
-        if (isEmpty()) {
-            cout << "Stack is empty" << endl;
-            return -1;
-        }
-        return top->value;
-    }
-    
-    bool isEmpty() {
-        return size == 0;
-    }
-    
-    int getSize() {
-        return size;
-    }
-    
-    void print() {
-        if (isEmpty()) {
-            cout << "Stack is empty" << endl;
-            return;
-        }
-        Node* current = top;
-        cout << "Stack contents (top to bottom):" << endl;
-        while (current != nullptr) {
-            cout << current->value << endl;
-            current = current->next;
-        }
-    }
-};
-
-int main() {
-    LinkedListStack stack;
-    
-    stack.push(10);
-    stack.push(20);
-    stack.push(30);
-    cout << "Top element: " << stack.peek() << endl; // 30
-    cout << "Stack size: " << stack.getSize() << endl; // 3
-    stack.print();
-    stack.pop();
-    cout << "After pop, top element: " << stack.peek() << 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">
-                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
diff --git a/app/visualizer/stack/implementation/usingLinkedList/content.jsx b/app/visualizer/stack/implementation/usingLinkedList/content.jsx
deleted file mode 100755
index 710fa3cb1..000000000
--- a/app/visualizer/stack/implementation/usingLinkedList/content.jsx
+++ /dev/null
@@ -1,306 +0,0 @@
-"use client";
-import React from "react";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem("theme") || "light";
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener("storage", updateTheme);
-    window.addEventListener("themeChange", updateTheme);
-
-    return () => {
-      window.removeEventListener("storage", updateTheme);
-      window.removeEventListener("themeChange", updateTheme);
-    };
-  }, []);
-
-  const paragraph = [
-    `A stack implemented using a linked list follows the LIFO (Last In First Out) principle. Unlike array implementation, linked list stacks dynamically allocate memory for each element and don't have size limitations (until memory is exhausted).`,
-  ];
-
-  const opeartions = [
-    { points : "Initialize Stack",
-      subpoints : [
-        "Create a head pointer initialized to null.",
-        "Optional: Maintain a size counter initialized to 0.",
-      ],
-     },
-    { points : "push()",
-      subpoints : [
-        "Create a new node with the given data.",
-        "Set new node's next pointer to current head.",
-        "Update head to point to the new node.",
-        "Increment size counter (if maintained).",
-      ],
-     },
-    { points : "pop()",
-      subpoints : [
-        "Check if stack is empty (head is null).",
-        `If empty, return "Stack Underflow".`,
-        "Store current head node in a temporary variabl.",
-        "Update head to point to the next node.",
-        "Decrement size counter (if maintained).",
-        "Return data from the temporary node.",
-      ],
-     },
-  ];
-
-  const helper = [
-    { points : "peek()",
-      subpoints : [
-        "Check if stack is empty (head is null).",
-        "If empty, return null.",
-        "Return data from head node without removal.",
-      ],
-     },
-    { points : "isEmpty()",
-      subpoints : [
-        "Return true if head is null.",
-        "Return false otherwise.",
-      ],
-     },
-    { points : "size()",
-      subpoints : [
-        "If size counter is maintained, return its value.",
-        "Otherwise, traverse the list and count nodes.",
-      ],
-     },
-  ];
-
-    return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-            <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-    {/* Header Section */}
-    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-        What is Stack Implementation Using Linked List?
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-          {paragraph[0]}
-        </p>
-      </div>
-    </section>
-
-    {/* Algorithmic Steps */}
-    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Algorithmic Steps
-          </h1>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* Stack Basic Operations */}
-        <div className="rounded-lg p-4 bg-white dark:bg-neutral-950 shadow-md">
-          <h2 className="text-lg sm:text-xl mb-3 font-bold text-center">
-            Stack Basic Operations
-          </h2>
-
-          <div className="space-y-4">
-            <div className="p-4 rounded-lg bg-gray-50 dark:bg-neutral-900">
-              <ul className="space-y-3">
-                {opeartions.map((item, index) => (
-                  <li key={index}>
-                    <h3 className="font-semibold mb-2 text-gray-900 dark:text-white">
-                      {item.points}
-                    </h3>
-                    {item.subpoints && (
-                      <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                        {item.subpoints.map((subitem, subindex) => (
-                          <li key={subindex} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                            {subitem}
-                          </li>
-                        ))}
-                      </ol>
-                    )}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-        </div>
-
-        {/* Stack Helper Operations */}
-        <div className="rounded-lg p-4 bg-white dark:bg-neutral-950 shadow-md">
-          <h2 className="text-lg sm:text-xl mb-3 font-bold text-center">
-            Stack Helper Operations
-          </h2>
-
-          <div className="space-y-4">
-            <div className="p-4 rounded-lg bg-gray-50 dark:bg-neutral-900">
-              <ul className="space-y-3">
-                {helper.map((item, index) => (
-                  <li key={index}>
-                    <h3 className="font-semibold mb-2 text-gray-900 dark:text-white">
-                      {item.points}
-                    </h3>
-                    {item.subpoints && (
-                      <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                        {item.subpoints.map((subitem, subindex) => (
-                          <li key={subindex} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                            {subitem}
-                          </li>
-                        ))}
-                      </ol>
-                    )}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    {/* Time Complexity */}
-    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-        Time Complexity
-      </h1>
-      <div className="prose dark:prose-invert max-w-none overflow-x-auto">
-        <table className="min-w-full border-collapse border border-gray-400">
-          <thead>
-            <tr className="bg-gray-100 dark:bg-blue-900">
-              <th className="border border-blue-400 p-3 font-semibold">Operation</th>
-              <th className="border border-blue-400 p-3 font-semibold">Complexity</th>
-              <th className="border border-blue-400 p-3 font-semibold hidden sm:table-cell">
-                Reason
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {[
-              ["push()", "O(1)", "Only head pointer modification"],
-              ["pop()", "O(1)", "Only head pointer modification"],
-              ["peek()", "O(1)", "Single node access"],
-              ["isEmpty()", "O(1)", "Head pointer check"],
-              ["size()", "O(1) or O(n)", "Depends on counter implementation"],
-            ].map(([op, comp, reason], index) => (
-              <tr
-                key={op}
-                className={index % 2 === 0 ? "bg-white dark:bg-neutral-950" : "bg-blue-50 dark:bg-neutral-900"}
-              >
-                <td className="border border-blue-400 p-3">{op}</td>
-                <td className="border border-blue-400 p-3 font-mono">
-                  {comp}
-                </td>
-                <td className="border border-blue-400 p-3 hidden sm:table-cell">
-                  {reason}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </section>
-
-    {/* Key Characteristics */}
-    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-        Key Characteristics
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {[
-            "Dynamic Size: No fixed capacity (grows as needed)",
-            "Memory Efficiency: Uses only needed memory",
-            "No Wasted Space: Unlike array implementation",
-            "Extra Memory: Requires space for pointers",
-            "Flexibility: Can grow until memory exhausted",
-          ].map((item) => (
-            <li key={item} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-              {item}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
-
-    {/* Comparison Section */}
-    <section className="p-6">
-      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-        Linked List vs Array Implementation
-      </h1>
-      <div className="prose dark:prose-invert max-w-none overflow-x-auto">
-        <table className="min-w-full border-collapse border border-gray-400">
-          <thead>
-            <tr className="bg-gray-100 dark:bg-blue-900">
-              <th className="border border-blue-400 p-3 font-semibold">Feature</th>
-              <th className="border border-blue-400 p-3 font-semibold">Linked List</th>
-              <th className="border border-blue-400 p-3 font-semibold">Array</th>
-            </tr>
-          </thead>
-          <tbody>
-            {[
-              ["Memory Usage", "Extra for pointers", "Fixed size, may be wasted"],
-              ["Dynamic Size", "Yes", "No (unless resized)"],
-              ["Memory Allocation", "Dynamic", "Static (usually)"],
-              ["Access Time", "O(1) for top", "O(1) for all"],
-              ["Implementation Complexity", "Slightly more complex", "Simpler"],
-            ].map(([feature, ll, arr], index) => (
-              <tr
-                key={feature}
-                className={index % 2 === 0 ? "bg-white dark:bg-neutral-950" : "bg-gray-50 dark:bg-neutral-900"}
-              >
-                <td className="border border-blue-400 p-3">{feature}</td>
-                <td className="border border-blue-400 p-3 font-mono">
-                  {ll}
-                </td>
-                <td className="border border-blue-400 p-3 font-mono">
-                  {arr}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </section>
-  </article>
-</main>
-    );
-  };
-  
-  export default content;
\ No newline at end of file
diff --git a/app/visualizer/stack/implementation/usingLinkedList/page.jsx b/app/visualizer/stack/implementation/usingLinkedList/page.jsx
deleted file mode 100755
index d8cbc2a94..000000000
--- a/app/visualizer/stack/implementation/usingLinkedList/page.jsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/stack/implementation/usingLinkedList/content";
-import Code from "@/app/visualizer/stack/implementation/usingLinkedList/codeBlock";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-import Footer from "@/app/components/footer";
-import ExploreOther from "@/app/components/ui/exploreOther";
-import BackToTopButton from "@/app/components/ui/backtotop";
-
-export const metadata = {
-  title:
-    "Stack Implementation using Linked List | Learn Stack in DSA with JS, C, Python, Java Code",
-  description:
-    "Explore how to implement a Stack using a Linked List with step-by-step visual explanations, animations, and complete code in JavaScript, C, Python, and Java. Ideal for DSA learners and coding interview prep.",
-  keywords: [
-    "Stack using Linked List",
-    "Stack Implementation",
-    "Stack Implementation in JavaScript",
-    "Stack Implementation in C",
-    "Stack Implementation in Python",
-    "Stack Implementation in Java",
-    "Linked List Stack",
-    "DSA Stack",
-    "Data Structures Stack",
-    "Stack Push Pop Linked List",
-    "Learn Stack DSA",
-    "Visualize Stack Implementation",
-    "Stack Code Examples",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/stack/stackLinkedList.png",
-        width: 1200,
-        height: 630,
-        alt: "Stack Implementation using Linked List",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Stack : Implementation Using Linked List", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Stack
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Implementation Using Linked List
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.stackLinkedList}
-            title="Stack Implementation using Linked List"
-            description="Mark Stack using Linked List as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section>
-          <ExploreOther
-          title="Explore other implementation"
-          links={[
-            { text: "Using Array", url: "./usingArray" },
-          ]}
-        />
-        </section>
-      </div>
-
-      <BackToTopButton />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/stack/isempty/animation.jsx b/app/visualizer/stack/isempty/animation.jsx
deleted file mode 100755
index 7728f8f1f..000000000
--- a/app/visualizer/stack/isempty/animation.jsx
+++ /dev/null
@@ -1,274 +0,0 @@
-"use client";
-import React, { useState, useEffect, useRef } from "react";
-import { gsap } from "gsap";
-
-const StackVisualizer = () => {
-  /* ---------- state ---------- */
-  const [stack, setStack] = useState([]);
-  const [inputValue, setInputValue] = useState("");
-  const [operation, setOperation] = useState(null);
-  const [message, setMessage] = useState("Stack is empty");
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [peekedItem, setPeekedItem] = useState(null);
-  const [isEmptyStatus, setIsEmptyStatus] = useState(null);
-
-  const itemRefs = useRef([]);
-
-  /* ---------- helpers ---------- */
-  const resetRefs = () => (itemRefs.current = []);
-
-  /* ---------- push ---------- */
-  const push = () => {
-    const val = inputValue.trim();
-    if (!val) {
-      setMessage("Please enter a value to push");
-      return;
-    }
-    setIsAnimating(true);
-    setOperation(`Pushing "${val}"…`);
-    setMessage("");
-    setPeekedItem(null);
-    setIsEmptyStatus(null);
-
-    setStack((prev) => [val, ...prev]);
-
-    setTimeout(() => {
-      const el = itemRefs.current[0];
-      gsap.set(el, { y: -60, scale: 0.8, opacity: 0 });
-      gsap
-        .timeline({ onComplete: () => setIsAnimating(false) })
-        .to(el, { y: 0, scale: 1, opacity: 1, duration: 0.4, ease: "back.out(1.7)" })
-        .to(el, { boxShadow: "0 0 10px #3b82f6", duration: 0.2, yoyo: true, repeat: 1 }, "-=0.2")
-        .call(() => setMessage(`"${val}" pushed to stack!`));
-    }, 10);
-
-    setInputValue("");
-  };
-
-  /* ---------- pop ---------- */
-  const pop = () => {
-    if (stack.length === 0) {
-      setMessage("Stack is empty!");
-      setIsEmptyStatus(true);
-      return;
-    }
-    setIsAnimating(true);
-    const val = stack[0];
-    setOperation(`Popping "${val}"…`);
-    setMessage("");
-    setPeekedItem(null);
-    setIsEmptyStatus(null);
-
-    const el = itemRefs.current[0];
-    gsap
-      .timeline({ onComplete: () => {
-        setStack((prev) => prev.slice(1));
-        setIsAnimating(false);
-        setMessage(`"${val}" popped from stack!`);
-      } })
-      .to(el, { scale: 0.5, rotation: 15, y: 80, opacity: 0, duration: 0.5, ease: "power2.in" });
-  };
-
-  /* ---------- peek ---------- */
-  const peek = () => {
-    if (stack.length === 0) {
-      setMessage("Stack is empty!");
-      setIsEmptyStatus(true);
-      return;
-    }
-    setIsAnimating(true);
-    setOperation("Peeking at top element…");
-    setPeekedItem(stack[0]);
-    setIsEmptyStatus(false);
-
-    const el = itemRefs.current[0];
-    gsap
-      .timeline({ onComplete: () => setIsAnimating(false) })
-      .to(el, { y: -6, boxShadow: "0 0 15px #a855f7", duration: 0.25 })
-      .to(el, { y: 0, boxShadow: "0 0 0px transparent", duration: 0.25 })
-      .to(el, { y: -6, duration: 0.25 })
-      .to(el, { y: 0, duration: 0.25 })
-      .call(() => setMessage(`Top element is "${stack[0]}"`));
-  };
-
-  /* ---------- isEmpty ---------- */
-  const checkEmpty = () => {
-    setIsAnimating(true);
-    setOperation("Checking if stack is empty…");
-    setPeekedItem(null);
-    setTimeout(() => {
-      const empty = stack.length === 0;
-      setIsEmptyStatus(empty);
-      setOperation(null);
-      setMessage(empty ? "Stack is empty!" : "Stack is not empty");
-      setIsAnimating(false);
-    }, 1000);
-  };
-
-  /* ---------- reset ---------- */
-  const reset = () => {
-    setIsAnimating(true);
-    gsap.to(itemRefs.current.filter(Boolean), {
-      scale: 0,
-      y: -60,
-      opacity: 0,
-      stagger: 0.06,
-      duration: 0.3,
-      onComplete: () => {
-        setStack([]);
-        setInputValue("");
-        setOperation(null);
-        setMessage("Stack is empty");
-        setPeekedItem(null);
-        setIsEmptyStatus(null);
-        setIsAnimating(false);
-        resetRefs();
-      },
-    });
-  };
-
-  return (
-    <main className="container mx-auto px-6 pb-4">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-        Visualize Push, Pop, Peek, and IsEmpty operations
-      </p>
-
-      <div className="max-w-md mx-auto">
-        {/* Controls */}
-        <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md mb-8 border border-gray-200 dark:border-gray-700">
-          <div className="flex gap-2 mb-4">
-            <input
-              type="text"
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              placeholder="Enter a value"
-              className="flex-1 p-2 rounded dark:bg-neutral-900 border"
-              disabled={isAnimating}
-            />
-            <button
-              onClick={push}
-              disabled={isAnimating}
-              className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded disabled:opacity-50"
-            >
-              Push
-            </button>
-          </div>
-          <div className="grid grid-cols-2 gap-2">
-            <button
-              onClick={checkEmpty}
-              disabled={isAnimating}
-              className="text-black bg-green-500 px-4 py-2 rounded disabled:opacity-50"
-            >
-              IsEmpty
-            </button>
-            <button
-              onClick={reset}
-              disabled={isAnimating}
-              className="bg-red-500 dark:text-black text-white px-4 py-2 rounded disabled:opacity-50"
-            >
-              Reset
-            </button>
-          </div>
-        </div>
-
-        {/* Stack Visualization */}
-        <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-          <h2 className="text-xl font-semibold mb-4">Stack Visualization</h2>
-
-          {/* Operation Status */}
-          {operation && (
-            <div className="mb-4 p-3 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
-              {operation}
-            </div>
-          )}
-
-          {/* Message Display */}
-          {message && (
-            <div
-              className={`mb-4 p-3 rounded-lg text-sm ${
-                message.includes("pushed")
-                  ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
-                  : message.includes("popped")
-                  ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
-                  : message.includes("Top element")
-                  ? "bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200"
-                  : isEmptyStatus !== null
-                  ? "bg-pink-100 dark:bg-pink-900 text-pink-800 dark:text-pink-200"
-                  : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200"
-              }`}
-            >
-              {message}
-            </div>
-          )}
-
-          {/* Vertical Stack */}
-          <div className="flex flex-col items-center min-h-[300px]">
-            {/* Top indicator */}
-            <div className="mb-2 text-sm text-gray-600 dark:text-gray-400">
-              {stack.length > 0 ? "↑ Top" : ""}
-            </div>
-
-            <div className="w-32 relative">
-              {stack.length === 0 ? (
-                <EmptyCloud />
-              ) : (
-                <div className="space-y-1">
-                  {stack.map((item, index) => (
-                    <div
-                      key={index}
-                      ref={(el) => (itemRefs.current[index] = el)}
-                      className={`p-3 border-2 rounded text-center font-medium transition-all ${
-                        index === 0 && peekedItem !== null
-                          ? "bg-purple-200 dark:bg-purple-800 border-purple-400 dark:border-purple-600"
-                          : index === 0
-                          ? "bg-blue-100 dark:bg-blue-900 border-blue-300 dark:border-blue-700"
-                          : "bg-white dark:bg-gray-700 border-gray-200 dark:border-gray-600"
-                      }`}
-                    >
-                      {item}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-
-            {/* Bottom indicator */}
-            <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
-              {stack.length > 0 ? "↓ Bottom" : ""}
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-/* ---------- cute floating cloud (empty) ---------- */
-const EmptyCloud = () => {
-  const cloudRef = useRef(null);
-  useEffect(() => {
-    gsap.to(cloudRef.current, { y: -6, duration: 2, repeat: -1, yoyo: true, ease: "power1.inOut" });
-  }, []);
-  return (
-    <div className="flex flex-col items-center pt-8 text-gray-400">
-      <svg
-        ref={cloudRef}
-        xmlns="http://www.w3.org/2000/svg"
-        className="h-16 w-16 mb-2"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        strokeWidth="1.5"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
-        />
-      </svg>
-      <span className="text-sm">Stack is empty</span>
-    </div>
-  );
-};
-
-export default StackVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/stack/isempty/codeBlock.jsx b/app/visualizer/stack/isempty/codeBlock.jsx
deleted file mode 100755
index 3d0df8fca..000000000
--- a/app/visualizer/stack/isempty/codeBlock.jsx
+++ /dev/null
@@ -1,451 +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 isEmpty Operation in JavaScript
-class Stack {
-  constructor() {
-    this.items = [];
-    this.top = -1;
-  }
-
-  // Push operation
-  push(element) {
-    this.items[++this.top] = element;
-    console.log(\`Pushed: \${element}\`);
-  }
-
-  // Pop operation
-  pop() {
-    if (this.isEmpty()) {
-      console.log("Stack Underflow - Cannot pop from empty stack");
-      return -1;
-    }
-    return this.items[this.top--];
-  }
-
-  // Check if stack is empty
-  isEmpty() {
-    const empty = this.top === -1;
-    console.log(\`Stack is \${empty ? "empty" : "not empty"}\`);
-    return empty;
-  }
-
-  // Display stack
-  display() {
-    console.log("Current Stack:", this.items.slice(0, this.top + 1));
-  }
-}
-
-// Usage
-const stack = new Stack();
-console.log("Initial stack check:");
-stack.isEmpty();  // true
-
-stack.push(10);
-stack.push(20);
-stack.display();
-stack.isEmpty();  // false
-
-stack.pop();
-stack.pop();
-stack.isEmpty();  // true`,
-
-    python: `# Stack Implementation with isEmpty Operation in Python
-class Stack:
-    def __init__(self):
-        self.items = []
-        self.top = -1
-    
-    # Push operation
-    def push(self, element):
-        self.top += 1
-        self.items.append(element)
-        print(f"Pushed: {element}")
-    
-    # Pop operation
-    def pop(self):
-        if self.is_empty():
-            print("Stack Underflow - Cannot pop from empty stack")
-            return -1
-        return self.items.pop()
-    
-    # Check if stack is empty
-    def is_empty(self):
-        empty = self.top == -1
-        print(f"Stack is {'empty' if empty else 'not empty'}")
-        return empty
-    
-    # Display stack
-    def display(self):
-        print("Current Stack:", self.items)
-
-# Usage
-stack = Stack()
-print("Initial stack check:")
-stack.is_empty()  # True
-
-stack.push(10)
-stack.push(20)
-stack.display()
-stack.is_empty()  # False
-
-stack.pop()
-stack.pop()
-stack.is_empty()  # True`,
-
-    java: `// Stack Implementation with isEmpty Operation in Java
-import java.util.ArrayList;
-
-class Stack {
-    private ArrayList<Integer> items;
-    private int top;
-    
-    public Stack() {
-        items = new ArrayList<>();
-        top = -1;
-    }
-    
-    // Push operation
-    public void push(int element) {
-        items.add(++top, element);
-        System.out.println("Pushed: " + element);
-    }
-    
-    // Pop operation
-    public int pop() {
-        if (isEmpty()) {
-            System.out.println("Stack Underflow - Cannot pop from empty stack");
-            return -1;
-        }
-        return items.remove(top--);
-    }
-    
-    // Check if stack is empty
-    public boolean isEmpty() {
-        boolean empty = top == -1;
-        System.out.println("Stack is " + (empty ? "empty" : "not empty"));
-        return empty;
-    }
-    
-    // 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();
-        System.out.println("Initial stack check:");
-        stack.isEmpty();  // true
-
-        stack.push(10);
-        stack.push(20);
-        stack.display();
-        stack.isEmpty();  // false
-
-        stack.pop();
-        stack.pop();
-        stack.isEmpty();  // true
-    }
-}`,
-
-    c: `// Stack Implementation with isEmpty Operation in C
-#include <stdio.h>
-#include <stdbool.h>
-#define MAX_SIZE 100
-
-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 (isEmpty(s)) {
-        printf("Stack Underflow - Cannot pop from empty stack\n");
-        return -1;
-    }
-    return s->items[s->top--];
-}
-
-// Check if stack is empty
-bool isEmpty(Stack *s) {
-    bool empty = s->top == -1;
-    printf("Stack is %s\n", empty ? "empty" : "not empty");
-    return empty;
-}
-
-// 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);
-    
-    printf("Initial stack check:\n");
-    isEmpty(&stack);  // true
-
-    push(&stack, 10);
-    push(&stack, 20);
-    display(&stack);
-    isEmpty(&stack);  // false
-
-    pop(&stack);
-    pop(&stack);
-    isEmpty(&stack);  // true
-    
-    return 0;
-}`,
-
-    cpp: `// Stack Implementation with isEmpty Operation in C++
-#include <iostream>
-#include <vector>
-using namespace std;
-
-class Stack {
-private:
-    vector<int> items;
-    int top;
-    const int MAX_SIZE = 100;
-
-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 (isEmpty()) {
-            cout << "Stack Underflow - Cannot pop from empty stack" << endl;
-            return -1;
-        }
-        int element = items.back();
-        items.pop_back();
-        top--;
-        return element;
-    }
-    
-    // Check if stack is empty
-    bool isEmpty() const {
-        bool empty = top == -1;
-        cout << "Stack is " << (empty ? "empty" : "not empty") << endl;
-        return empty;
-    }
-    
-    // Display stack
-    void display() const {
-        cout << "Current Stack: ";
-        for (int i = 0; i <= top; i++) {
-            cout << items[i] << " ";
-        }
-        cout << endl;
-    }
-};
-
-int main() {
-    Stack stack;
-    
-    cout << "Initial stack check:" << endl;
-    stack.isEmpty();  // true
-
-    stack.push(10);
-    stack.push(20);
-    stack.display();
-    stack.isEmpty();  // false
-
-    stack.pop();
-    stack.pop();
-    stack.isEmpty();  // true
-    
-    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/isempty/content.jsx b/app/visualizer/stack/isempty/content.jsx
deleted file mode 100755
index 62ade3063..000000000
--- a/app/visualizer/stack/isempty/content.jsx
+++ /dev/null
@@ -1,261 +0,0 @@
-"use client";
-import ComplexityGraph from "@/app/components/ui/graph";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState('light');
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem('theme') || 'light';
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener('storage', updateTheme);
-    window.addEventListener('themeChange', updateTheme);
-
-    return () => {
-      window.removeEventListener('storage', updateTheme);
-      window.removeEventListener('themeChange', updateTheme);
-    };
-  }, []);
-
-  const paragraphs = [
-    `The isEmpty operation checks whether a stack contains any elements or not. It's a fundamental operation that helps prevent errors when trying to perform operations like pop() or peek() on an empty stack.`,
-    `The isEmpty operation is a simple but crucial part of stack implementation, ensuring safe stack manipulation and preventing runtime errors.`,
-  ];
-
-  const usage = [
-    { points : "Prevent stack underflow errors before pop() operations." },
-    { points : "Check if there are elements to process." },
-    { points : "Validate stack state in algorithms." },
-    { points : "Terminate processing loops when stack becomes empty." },
-  ];
-
-  const working = [
-    { points : "For an empty stack [ ],isEmpty() returns true." },
-    { points : "For a non-empty stack [5, 3, 8],isEmpty() returns false." },
-  ];
-
-  const implementation = [
-    { points : "Check the current size/length of the stack" },
-    { points : "Return the result :",
-      subpoints : [
-        "true if size equals 0.",
-        "false otherwise.",
-      ],
-     },
-  ];
-
-  const complexity = [
-    { points : "O(1) constant time complexity." },
-    { points : "The operation only needs to check one value (size/length) regardless of stack size." },
-  ];
-
-    return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-          {/* What is the isEmpty Operation in Stack? */}
-          <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-            <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-              <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-              What is the isEmpty Operation in Stack?
-            </h1>
-            <div className="prose dark:prose-invert max-w-none">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                {paragraphs[0]}
-              </p>
-            </div>
-          </section>
-
-          {/* How Does It Work? */}
-          <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-            <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-              <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-              How Does It Work?
-            </h1>
-            <div className="prose dark:prose-invert max-w-none">
-              <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-                Consider a stack represented as an array: [ ] (empty) or [5, 3,
-                8] (with elements).
-              </p>
-
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {working.map((item, index) => (
-                  <li
-                    key={index}
-                    className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                  >
-                    {item.points}
-                  </li>
-                ))}
-              </ol>
-
-              <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
-                The operation simply checks if the stack's size/length is zero.
-              </p>
-            </div>
-          </section>
-
-          {/* Algorithm Implementation */}
-          <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-            <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-              <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-              Algorithm Implementation
-            </h1>
-            <div className="prose dark:prose-invert max-w-none">
-              <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {implementation.map((item, index) => (
-                  <li
-                    key={index}
-                    className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                  >
-                    {item.points}
-                    {item.subpoints && (
-                      <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                        {item.subpoints.map((subitem, subindex) => (
-                          <li
-                            key={subindex}
-                            className="text-[#6b7280] dark:text-[#9ca3af]"
-                          >
-                            {subitem}
-                          </li>
-                        ))}
-                      </ul>
-                    )}
-                  </li>
-                ))}
-              </ol>
-            </div>
-          </section>
-
-          {/* Time Complexity */}
-          <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-            <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-              <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-              Time Complexity
-            </h1>
-            <div className="prose dark:prose-invert max-w-none">
-              <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {complexity.map((item, index) => (
-                  <li
-                    key={index}
-                    className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                  >
-                    <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
-                      {item.points.split(":")[0]}:
-                    </span>
-                    <span className="ml-2">{item.points.split(":")[1]}</span>
-                  </li>
-                ))}
-              </ul>
-
-              <div className="mt-8">
-              <ComplexityGraph
-                bestCase={(n) => 1}
-                averageCase={(n) => 1}
-                worstCase={(n) => 1}
-                maxN={25}
-              />
-            </div>
-            </div>
-          </section>
-
-          {/* Practical Usage */}
-          <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-            <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-              <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-              Practical Usage
-            </h1>
-            <div className="prose dark:prose-invert max-w-none">
-              <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {usage.map((item, index) => (
-                  <li
-                    key={index}
-                    className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                  >
-                    {item.points}
-                  </li>
-                ))}
-              </ol>
-            </div>
-          </section>
-
-          {/* Additional Info */}
-          <section className="p-6">
-            <div className="prose dark:prose-invert max-w-none">
-              <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-                <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                  {paragraphs[1]}
-                </p>
-              </div>
-            </div>
-          </section>
-        </article>
-
-        {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      </main>
-    );
-  };
-  
-  export default content;
\ No newline at end of file
diff --git a/app/visualizer/stack/isempty/page.jsx b/app/visualizer/stack/isempty/page.jsx
deleted file mode 100755
index 135e134f7..000000000
--- a/app/visualizer/stack/isempty/page.jsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import Animation from "@/app/visualizer/stack/isempty/animation";
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/stack/isempty/content";
-import Quiz from "@/app/visualizer/stack/isempty/quiz";
-import Code from "@/app/visualizer/stack/isempty/codeBlock";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-import ExploreOther from "@/app/components/ui/exploreOther";
-import Footer from "@/app/components/footer";
-import BackToTopButton from "@/app/components/ui/backtotop";
-
-export const metadata = {
-  title:
-    "Stack is empty Visualizer | Learn Stack IsEmpty Operation in JS, C, Python, Java",
-  description:
-    "Visualize how Stack isEmpty operation works in DSA using interactive animations. Great for beginners and interview prep. Includes code examples in JavaScript, C, Python, and Java.",
-  keywords: [
-    "Stack DSA",
-    "Stack Visualizer",
-    "Learn Stack",
-    "DSA Animation",
-    "Stack isEmpty Operation",
-    "Check if Stack is Empty",
-    "Stack Implementation in JavaScript",
-    "Stack Implementation in C",
-    "Stack in Python",
-    "Stack in Java",
-    "Stack Code Examples",
-    "Interactive Stack Tool",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/stack/isEmpty.png",
-        width: 1200,
-        height: 630,
-        alt: "Stack isEmpty Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Stack : IsEmpty", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Stack
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              IsEmpty Operation
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section>
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-[#6b7280] dark:text-[#9ca3af] mb-2">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.isEmpty}
-            title="Stack isEmpty"
-            description="Mark Stack : isEmpty as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section>
-          <ExploreOther
-            title="Explore other operations"
-            links={[
-              { text: "Push & Pop", url: "/visualizer/stack/push-pop" },
-              { text: "Peek", url: "/visualizer/stack/peek" },
-              { text: "Is Full", url: "/visualizer/stack/isfull" },
-            ]}
-          />
-        </section>
-      </div>
-
-      <BackToTopButton />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/stack/isempty/quiz.jsx b/app/visualizer/stack/isempty/quiz.jsx
deleted file mode 100755
index 5cde2bf7e..000000000
--- a/app/visualizer/stack/isempty/quiz.jsx
+++ /dev/null
@@ -1,411 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const StackQuiz = () => {
-  const questions = [
-    {
-      question: "What does the isEmpty operation in a stack determine?",
-      options: [
-        "The total capacity of the stack",
-        "Whether the stack contains any elements",
-        "The position of the top element",
-        "The time complexity of other operations"
-      ],
-      correctAnswer: 1,
-      explanation:
-        "isEmpty checks if the stack has zero elements (true if empty, false otherwise).",
-    },
-    {
-      question: "What does isEmpty() return for a stack with elements [10, 20]?",
-      options: ["true", "false", "null", "10"],
-      correctAnswer: 1,
-      explanation:
-        "The stack contains elements, so isEmpty returns false.",
-    },
-    {
-      question: "Why is isEmpty crucial before calling pop() or peek()?",
-      options: [
-        "To improve time complexity",
-        "To prevent stack underflow errors",
-        "To resize the stack",
-        "To count the elements"
-      ],
-      correctAnswer: 1,
-      explanation:
-        "Checking isEmpty first avoids errors when attempting to pop/peek an empty stack.",
-    },
-    {
-      question: "What is the time complexity of isEmpty?",
-      options: ["O(n)", "O(1)", "O(log n)", "O(n²)"],
-      correctAnswer: 1,
-      explanation:
-        "isEmpty runs in O(1) time as it only checks if size/length equals zero.",
-    },
-    {
-      question: "How would you implement isEmpty for a stack stored in an array?",
-      options: [
-        "Check if array[0] === null",
-        "Return array.length === 0",
-        "Compare top and bottom indices",
-        "Count all non-zero elements"
-      ],
-      correctAnswer: 1,
-      explanation:
-        "For array-based stacks, isEmpty simply verifies if the length is zero.",
-    }
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    setSelectedAnswer(optionIndex);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = selectedAnswer;
-    setAnswers(newAnswers);
-
-    const newScore = newAnswers.reduce((acc, ans, idx) => {
-      return ans === questions[idx].correctAnswer ? acc + 1 : acc;
-    }, 0);
-    setScore(newScore);
-
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(newAnswers[currentQuestion + 1]);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowIntro(true);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Selection Sort");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Selection Sort");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("comparison with other simple sorts");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("stability characteristics");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Selection Sort concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Stack Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default StackQuiz;
\ No newline at end of file
diff --git a/app/visualizer/stack/isfull/animation.jsx b/app/visualizer/stack/isfull/animation.jsx
deleted file mode 100755
index 8b85d3e79..000000000
--- a/app/visualizer/stack/isfull/animation.jsx
+++ /dev/null
@@ -1,161 +0,0 @@
-"use client";
-import React, { useState, useEffect } from "react";
-import PushPop from "@/app/components/ui/PushPop";
-
-const StackVisualizer = () => {
-  const [stack, setStack] = useState([]);
-  const [operation, setOperation] = useState(null);
-  const [message, setMessage] = useState("Stack is empty");
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [stackLimit] = useState(5); // Set stack capacity
-  const [isFull, setIsFull] = useState(false);
-
-  // Check if stack is full
-  const checkIfFull = () => {
-    setIsAnimating(true);
-    setOperation("Checking if stack is full...");
-
-    setTimeout(() => {
-      const fullStatus = stack.length >= stackLimit;
-      setIsFull(fullStatus);
-      setOperation(null);
-      setMessage(fullStatus ? "Stack is FULL!" : "Stack is NOT full");
-      setIsAnimating(false);
-    }, 1000);
-  };
-
-  // Reset stack
-  const reset = () => {
-    setStack([]);
-    setMessage("Stack is empty");
-    setOperation(null);
-    setIsFull(false);
-  };
-
-  // Effect to update isFull status when stack changes
-  useEffect(() => {
-    setIsFull(stack.length >= stackLimit);
-  }, [stack, stackLimit]);
-
-  return (
-    <main className="container mx-auto px-6 pb-6">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-        Visualize the LIFO (Last In, First Out) principle
-      </p>
-
-      <div className="max-w-md mx-auto">
-        {/* Use the PushPop component */}
-        <PushPop
-          stack={stack}
-          setStack={setStack}
-          isAnimating={isAnimating}
-          setIsAnimating={setIsAnimating}
-          setMessage={setMessage}
-          setOperation={setOperation}
-          stackLimit={stackLimit}
-        />
-
-        {/* Is Full Check Button */}
-        <button
-          onClick={checkIfFull}
-          disabled={isAnimating}
-          className="w-full mb-4 duration-300 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded disabled:opacity-50"
-        >
-          Check If Full
-        </button>
-
-        {/* Stack Visualization */}
-        <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-          <h2 className="text-xl font-semibold mb-4">Stack Visualization</h2>
-
-          {/* Operation Status */}
-          {operation && (
-            <div className="mb-4 p-3 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
-              {operation}
-            </div>
-          )}
-
-          {/* Message Display */}
-          {message && (
-            <div
-              className={`mb-4 p-3 rounded-lg ${
-                message.includes("pushed")
-                  ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
-                  : message.includes("popped")
-                  ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
-                  : message.includes("Peek")
-                  ? "bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200"
-                  : message.includes("FULL")
-                  ? "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200"
-                  : "bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200"
-              }`}
-            >
-              {message}
-            </div>
-          )}
-
-          {/* Stack capacity indicator */}
-          <div className="mb-4 text-center text-sm">
-            Capacity: {stack.length}/{stackLimit}
-          </div>
-
-          {/* Vertical Stack */}
-          <div className="flex flex-col items-center min-h-[300px]">
-            {/* Top indicator */}
-            <div className="mb-2 text-sm text-gray-600 dark:text-gray-400">
-              {stack.length > 0 ? "↑ Top" : ""}
-            </div>
-
-            {/* Stack elements with full state animation */}
-            <div className="w-32 relative">
-              {stack.length === 0 ? (
-                <div className="text-center py-8 text-gray-500">
-                  Stack is empty
-                </div>
-              ) : (
-                <div className="space-y-1">
-                  {stack.map((item, index) => (
-                    <div
-                      key={index}
-                      className={`p-3 border-2 rounded text-center font-medium transition-all duration-300 ${
-                        index === 0
-                          ? "bg-blue-100 dark:bg-blue-900 border-blue-300 dark:border-blue-700"
-                          : "bg-white dark:bg-gray-700 border-gray-200 dark:border-gray-600"
-                      } ${
-                        isAnimating &&
-                        index === 0 &&
-                        operation?.includes("Peek")
-                          ? "animate-pulse"
-                          : isAnimating && index === 0
-                          ? "animate-bounce"
-                          : ""
-                      } ${
-                        isFull && isAnimating && operation?.includes("full")
-                          ? "border-red-500 dark:border-red-500 animate-pulse"
-                          : ""
-                      }`}
-                    >
-                      {item}
-                      {index === 0 && (
-                        <div className="text-xs mt-1 text-gray-500 dark:text-gray-400">
-                          (Top)
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-
-            {/* Bottom indicator */}
-            <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
-              {stack.length > 0 ? "↓ Bottom" : ""}
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default StackVisualizer;
diff --git a/app/visualizer/stack/isfull/codeBlock.jsx b/app/visualizer/stack/isfull/codeBlock.jsx
deleted file mode 100755
index 72c4dc5b9..000000000
--- a/app/visualizer/stack/isfull/codeBlock.jsx
+++ /dev/null
@@ -1,500 +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 isFull Operation in JavaScript
-class Stack {
-  constructor(maxSize = 5) {
-    this.items = [];
-    this.top = -1;
-    this.MAX_SIZE = maxSize;
-  }
-
-  // Push operation with isFull check
-  push(element) {
-    if (this.isFull()) {
-      console.log("Stack Overflow - Cannot push to full stack");
-      return;
-    }
-    this.items[++this.top] = element;
-    console.log(\`Pushed: \${element}\`);
-  }
-
-  // Pop operation
-  pop() {
-    if (this.isEmpty()) {
-      console.log("Stack Underflow - Cannot pop from empty stack");
-      return -1;
-    }
-    return this.items[this.top--];
-  }
-
-  // Check if stack is full
-  isFull() {
-    const full = this.top === this.MAX_SIZE - 1;
-    console.log(\`Stack is \${full ? "full" : "not full"}\`);
-    return full;
-  }
-
-  // Check if stack is empty
-  isEmpty() {
-    return this.top === -1;
-  }
-
-  // Display stack
-  display() {
-    console.log("Current Stack:", this.items.slice(0, this.top + 1));
-  }
-}
-
-// Usage
-const stack = new Stack(3); // Small stack for demonstration
-
-console.log("Initial checks:");
-stack.isFull();  // false
-stack.isEmpty(); // true
-
-stack.push(10);
-stack.push(20);
-stack.push(30);
-stack.display();
-stack.isFull();  // true
-
-// Try to push to full stack
-stack.push(40);  // Will show overflow message`,
-
-    python: `# Stack Implementation with isFull Operation in Python
-class Stack:
-    def __init__(self, max_size=5):
-        self.items = []
-        self.top = -1
-        self.MAX_SIZE = max_size
-    
-    # Push operation with is_full check
-    def push(self, element):
-        if self.is_full():
-            print("Stack Overflow - Cannot push to full stack")
-            return
-        self.top += 1
-        self.items.append(element)
-        print(f"Pushed: {element}")
-    
-    # Pop operation
-    def pop(self):
-        if self.is_empty():
-            print("Stack Underflow - Cannot pop from empty stack")
-            return -1
-        return self.items.pop()
-    
-    # Check if stack is full
-    def is_full(self):
-        full = self.top == self.MAX_SIZE - 1
-        print(f"Stack is {'full' if full else 'not full'}")
-        return full
-    
-    # Check if stack is empty
-    def is_empty(self):
-        return self.top == -1
-    
-    # Display stack
-    def display(self):
-        print("Current Stack:", self.items)
-
-# Usage
-stack = Stack(3)  # Small stack for demonstration
-
-print("Initial checks:")
-stack.is_full()   # False
-stack.is_empty()  # True
-
-stack.push(10)
-stack.push(20)
-stack.push(30)
-stack.display()
-stack.is_full()   # True
-
-# Try to push to full stack
-stack.push(40)    # Will show overflow message`,
-
-    java: `// Stack Implementation with isFull Operation in Java
-import java.util.ArrayList;
-
-class Stack {
-    private ArrayList<Integer> items;
-    private int top;
-    private final int MAX_SIZE;
-    
-    public Stack(int maxSize) {
-        items = new ArrayList<>();
-        top = -1;
-        MAX_SIZE = maxSize;
-    }
-    
-    // Push operation with isFull check
-    public void push(int element) {
-        if (isFull()) {
-            System.out.println("Stack Overflow - Cannot push to full stack");
-            return;
-        }
-        items.add(++top, element);
-        System.out.println("Pushed: " + element);
-    }
-    
-    // Pop operation
-    public int pop() {
-        if (isEmpty()) {
-            System.out.println("Stack Underflow - Cannot pop from empty stack");
-            return -1;
-        }
-        return items.remove(top--);
-    }
-    
-    // Check if stack is full
-    public boolean isFull() {
-        boolean full = top == MAX_SIZE - 1;
-        System.out.println("Stack is " + (full ? "full" : "not full"));
-        return full;
-    }
-    
-    // Check if stack is empty
-    public boolean isEmpty() {
-        return top == -1;
-    }
-    
-    // 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(3); // Small stack for demonstration
-        
-        System.out.println("Initial checks:");
-        stack.isFull();  // false
-        stack.isEmpty(); // true
-
-        stack.push(10);
-        stack.push(20);
-        stack.push(30);
-        stack.display();
-        stack.isFull();  // true
-
-        // Try to push to full stack
-        stack.push(40);  // Will show overflow message
-    }
-}`,
-
-    c: `// Stack Implementation with isFull Operation in C
-#include <stdio.h>
-#include <stdbool.h>
-#define MAX_SIZE 5
-
-typedef struct {
-    int items[MAX_SIZE];
-    int top;
-} Stack;
-
-void initialize(Stack *s) {
-    s->top = -1;
-}
-
-// Push operation with isFull check
-void push(Stack *s, int element) {
-    if (isFull(s)) {
-        printf("Stack Overflow - Cannot push to full stack\n");
-        return;
-    }
-    s->items[++s->top] = element;
-    printf("Pushed: %d\n", element);
-}
-
-// Pop operation
-int pop(Stack *s) {
-    if (isEmpty(s)) {
-        printf("Stack Underflow - Cannot pop from empty stack\n");
-        return -1;
-    }
-    return s->items[s->top--];
-}
-
-// Check if stack is full
-bool isFull(Stack *s) {
-    bool full = s->top == MAX_SIZE - 1;
-    printf("Stack is %s\n", full ? "full" : "not full");
-    return full;
-}
-
-// Check if stack is empty
-bool isEmpty(Stack *s) {
-    return s->top == -1;
-}
-
-// 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);
-    
-    printf("Initial checks:\n");
-    isFull(&stack);  // false
-    isEmpty(&stack); // true
-
-    push(&stack, 10);
-    push(&stack, 20);
-    push(&stack, 30);
-    push(&stack, 40);
-    push(&stack, 50);
-    display(&stack);
-    isFull(&stack);  // true
-
-    // Try to push to full stack
-    push(&stack, 60);  // Will show overflow message
-    
-    return 0;
-}`,
-
-    cpp: `// Stack Implementation with isFull Operation in C++
-#include <iostream>
-#include <vector>
-using namespace std;
-
-class Stack {
-private:
-    vector<int> items;
-    int top;
-    const int MAX_SIZE;
-    
-public:
-    Stack(int maxSize = 5) : top(-1), MAX_SIZE(maxSize) {}
-    
-    // Push operation with isFull check
-    void push(int element) {
-        if (isFull()) {
-            cout << "Stack Overflow - Cannot push to full stack" << endl;
-            return;
-        }
-        items.push_back(element);
-        top++;
-        cout << "Pushed: " << element << endl;
-    }
-    
-    // Pop operation
-    int pop() {
-        if (isEmpty()) {
-            cout << "Stack Underflow - Cannot pop from empty stack" << endl;
-            return -1;
-        }
-        int element = items.back();
-        items.pop_back();
-        top--;
-        return element;
-    }
-    
-    // Check if stack is full
-    bool isFull() const {
-        bool full = top == MAX_SIZE - 1;
-        cout << "Stack is " << (full ? "full" : "not full") << endl;
-        return full;
-    }
-    
-    // Check if stack is empty
-    bool isEmpty() const {
-        return top == -1;
-    }
-    
-    // Display stack
-    void display() const {
-        cout << "Current Stack: ";
-        for (int i = 0; i <= top; i++) {
-            cout << items[i] << " ";
-        }
-        cout << endl;
-    }
-};
-
-int main() {
-    Stack stack(3); // Small stack for demonstration
-    
-    cout << "Initial checks:" << endl;
-    stack.isFull();  // false
-    stack.isEmpty(); // true
-
-    stack.push(10);
-    stack.push(20);
-    stack.push(30);
-    stack.display();
-    stack.isFull();  // true
-
-    // Try to push to full stack
-    stack.push(40);  // Will show overflow message
-    
-    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/isfull/content.jsx b/app/visualizer/stack/isfull/content.jsx
deleted file mode 100755
index bd3f0a77c..000000000
--- a/app/visualizer/stack/isfull/content.jsx
+++ /dev/null
@@ -1,275 +0,0 @@
-"use client";
-import ComplexityGraph from "@/app/components/ui/graph";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem("theme") || "light";
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener("storage", updateTheme);
-    window.addEventListener("themeChange", updateTheme);
-
-    return () => {
-      window.removeEventListener("storage", updateTheme);
-      window.removeEventListener("themeChange", updateTheme);
-    };
-  }, []);
-
-  const paragraphs = [
-    `The Is Full operation checks whether a stack has reached its maximum capacity. This is particularly relevant for fixed-size stack implementations (arrays) rather than dynamic implementations (linked lists).`,
-    `The Is Full operation is crucial when working with fixed-size stacks to prevent overflow errors. While not needed for dynamically-sized stacks, it's an essential safety check in many system-level implementations.`,
-  ];
-
-  const working = [
-    { points: "Returns true if the stack cannot accept more elements." },
-    { points: "Returns false if the stack can accept more elements." },
-    {
-      points:
-        "For dynamic stacks (no fixed size), this operation typically always returns false.",
-    },
-    { points: "Often used with Push operations to prevent stack overflow." },
-  ];
-
-  const complexity = [
-    {
-      points: "Fixed-size Stack:",
-      subpoints: ["Time Complexity: O(1)", "Space Complexity: O(1)"],
-    },
-    {
-      points: "Dynamic Stack:",
-      subpoints: ["Time Complexity: O(1)", "Space Complexity: O(1)"],
-    },
-  ];
-
-  const useCase = [
-    { points: "Preventing stack overflow in memory-constrained systems." },
-    { points: "Implementing bounded buffers or fixed-size caches." },
-    { points: "Memory management in embedded systems." },
-    { points: "Validating stack capacity before push operations" },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* What is the "Is Full" Operation? */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            What is the "Is Full" Operation?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraphs[0]}
-            </p>
-          </div>
-        </section>
-
-        {/* How It Works */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            How It Works
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {working.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Time and Space Complexity */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Time and Space Complexity
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Here's the time and space complexity analysis for stack
-              operations:
-            </p>
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {complexity.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
-                    {item.points.split(":")[0]}:
-                  </span>
-                  <span className="ml-2">{item.points.split(":")[1]}</span>
-                  {item.subpoints && (
-                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                      {item.subpoints.map((subitem, subindex) => (
-                        <li
-                          key={subindex}
-                          className="text-[#6b7280] dark:text-[#9ca3af]"
-                        >
-                          {subitem}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              ))}
-            </ul>
-
-            <div className="mt-8">
-              <ComplexityGraph
-                bestCase={(n) => 1}
-                averageCase={(n) => 1}
-                worstCase={(n) => 1}
-                maxN={25}
-              />
-            </div>
-          </div>
-        </section>
-
-        {/* Practical Example */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Practical Example
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Consider a stack with maximum capacity of 3 elements:
-            </p>
-            <div className="space-y-4 mt-4">
-              <div className="flex items-center">
-                <div className="w-32 font-mono">Stack: [ ]</div>
-                <div className="ml-4 font-medium">
-                  isFull() →{" "}
-                  <span className="text-red-500 dark:text-red-400">false</span>
-                </div>
-              </div>
-              <div className="flex items-center">
-                <div className="w-32 font-mono">Stack: [5, 3]</div>
-                <div className="ml-4 font-medium">
-                  isFull() →{" "}
-                  <span className="text-red-500 dark:text-red-400">false</span>
-                </div>
-              </div>
-              <div className="flex items-center">
-                <div className="w-32 font-mono">Stack: [7, 3, 5]</div>
-                <div className="ml-4 font-medium">
-                  isFull() →{" "}
-                  <span className="text-green-600 dark:text-green-400">
-                    true
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Common Use Cases */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Common Use Cases
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {useCase.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Additional Info */}
-        <section className="p-6">
-          <div className="prose dark:prose-invert max-w-none">
-            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                {paragraphs[1]}
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-
-        {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
diff --git a/app/visualizer/stack/isfull/page.jsx b/app/visualizer/stack/isfull/page.jsx
deleted file mode 100755
index bf023715b..000000000
--- a/app/visualizer/stack/isfull/page.jsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import Animation from "@/app/visualizer/stack/isfull/animation";
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/stack/isfull/content";
-import Quiz from "@/app/visualizer/stack/isfull/quiz";
-import Code from "@/app/visualizer/stack/isfull/codeBlock";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Footer from "@/app/components/footer";
-import BackToTopButton from "@/app/components/ui/backtotop";
-
-export const metadata = {
-  title:
-    "Stack Is Full Visualizer | Check Full Condition in Stack with Code in JS, C, Python, Java",
-  description:
-    "Understand how to check if a Stack is full using interactive animations and code examples in JavaScript, C, Python, and Java. A simple guide for beginners and DSA interview preparation.",
-  keywords: [
-    "Stack Is Full",
-    "Is Full Operation Stack",
-    "Stack Full Condition",
-    "Stack Capacity Check",
-    "DSA Stack Animation",
-    "Learn Stack Operations",
-    "Stack in JavaScript",
-    "Stack in C",
-    "Stack in Python",
-    "Stack in Java",
-    "Stack Code Examples",
-    "Stack Overflow Condition",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/stack/isFull.png",
-        width: 1200,
-        height: 630,
-        alt: "Stack isFull Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Stack : IsFull", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Stack
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              IsFull Operation
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section>
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-[#6b7280] dark:text-[#9ca3af] mb-2">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.isFull}
-            title="Stack isFull"
-            description="Mark Stack : isFull as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section>
-          <ExploreOther
-            title="Explore other operations"
-            links={[
-              { text: "Peek", url: "/visualizer/stack/peek" },
-              { text: "Is Empty", url: "/visualizer/stack/isempty" },
-              { text: "Push Pop", url: "/visualizer/stack/push-pop" },
-            ]}
-          />
-        </section>
-      </div>
-
-      <BackToTopButton />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/stack/isfull/quiz.jsx b/app/visualizer/stack/isfull/quiz.jsx
deleted file mode 100755
index 92133b570..000000000
--- a/app/visualizer/stack/isfull/quiz.jsx
+++ /dev/null
@@ -1,449 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const StackQuiz = () => {
-  const questions = [
-    {
-      question: "What is the primary purpose of the 'isFull' operation in a stack?",
-      options: [
-        "To count the number of elements in the stack",
-        "To check if the stack has reached its maximum capacity",
-        "To remove the top element when the stack is full",
-        "To dynamically resize the stack"
-      ],
-      correctAnswer: 1,
-      explanation:
-        "The 'isFull' operation checks whether a fixed-size stack can accept more elements (returns true if full).",
-    },
-    {
-      question: "For which type of stack implementation is 'isFull' most relevant?",
-      options: [
-        "Dynamic stacks (e.g., linked lists)",
-        "Fixed-size stacks (e.g., arrays)",
-        "Both equally",
-        "Stacks with unlimited capacity"
-      ],
-      correctAnswer: 1,
-      explanation:
-        "'isFull' is critical for fixed-size implementations (like arrays) to prevent overflow. Dynamic stacks rarely need it.",
-    },
-    {
-      question: "What does isFull() return for a dynamic stack (no fixed size)?",
-      options: [
-        "Always true",
-        "Always false",
-        "Depends on current elements",
-        "Throws an error"
-      ],
-      correctAnswer: 1,
-      explanation:
-        "Dynamic stacks (e.g., linked lists) can theoretically grow indefinitely, so isFull() typically returns false.",
-    },
-    {
-      question: "Given a stack with max capacity 3: [8, 5], what does isFull() return?",
-      options: ["true", "false", "null", "Throws overflow error"],
-      correctAnswer: 1,
-      explanation:
-        "The stack has 2/3 elements, so isFull() returns false (not yet full).",
-    },
-    {
-      question: "Why is 'isFull' crucial before push operations in fixed-size stacks?",
-      options: [
-        "To improve time complexity",
-        "To prevent stack overflow errors",
-        "To count elements efficiently",
-        "To convert the stack to dynamic"
-      ],
-      correctAnswer: 1,
-      explanation:
-        "Checking isFull() before push() avoids overflow errors in fixed-capacity stacks.",
-    }
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showExplanation, setShowExplanation] = useState(false);
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-  const [penaltyApplied, setPenaltyApplied] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    if (selectedAnswer !== null) return;
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (showExplanation && !penaltyApplied) {
-      setScore(prevScore => Math.max(0, prevScore - 0.5));
-      setPenaltyApplied(true);
-    }
-
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    
-    setShowExplanation(false);
-    setPenaltyApplied(false);
-    
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setShowExplanation(false);
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowExplanation(false);
-    setShowIntro(true);
-    setPenaltyApplied(false);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the purpose of 'isFull'");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("knowing which stack implementations use 'isFull'");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("behavior of isFull in dynamic stacks");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("practical scenarios of stack capacity checks");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("importance of preventing overflow before push");
-    }
-
-    return weakAreas.length > 0
-      ? `Focus on improving: ${weakAreas.join(", ")}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all 'isFull' stack concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Stack Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-            {selectedAnswer !== null && (
-              <div className="mb-6">
-                <button
-                  onClick={() => setShowExplanation(!showExplanation)}
-                  className="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:underline mb-2"
-                >
-                  <FaInfoCircle className="mr-1" />
-                  {showExplanation ? "Hide Explanation" : "Show Explanation"}
-                </button>
-                <AnimatePresence>
-                  {showExplanation && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: "auto" }}
-                      exit={{ opacity: 0, height: 0 }}
-                      className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm overflow-hidden"
-                    >
-                      {questions[currentQuestion].explanation}
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-            )}
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default StackQuiz;
\ No newline at end of file
diff --git a/app/visualizer/stack/peek/animation.jsx b/app/visualizer/stack/peek/animation.jsx
deleted file mode 100755
index 1a399e497..000000000
--- a/app/visualizer/stack/peek/animation.jsx
+++ /dev/null
@@ -1,150 +0,0 @@
-"use client";
-import React, { useState, useEffect, useRef } from "react";
-import { gsap } from "gsap";
-import PushPop from "@/app/components/ui/PushPop";
-
-const StackVisualizer = () => {
-  const [stack, setStack] = useState([]);
-  const [operation, setOperation] = useState(null);
-  const [message, setMessage] = useState("");
-  const [isAnimating, setIsAnimating] = useState(false);
-
-  const stackRef = useRef(null);
-  const itemRefs = useRef([]);
-  const peekRef = useRef(null);
-
-  /* ---------- random numbers ---------- */
-  const addRandomStack = () => {
-    if (stack.length > 0) return;
-    setIsAnimating(true);
-    setOperation("create");
-    const nums = Array.from(
-      { length: 3 + Math.floor(Math.random() * 3) },
-      () => Math.floor(Math.random() * 999) + 1
-    );
-    setTimeout(() => {
-      setStack(nums);
-      setOperation(null);
-      setIsAnimating(false);
-    }, 600);
-  };
-
-  /* ---------- gsap animations (safe) ---------- */
-  useEffect(() => {
-    itemRefs.current.length = 0;
-    if (!stackRef.current) return;
-
-    /* push */
-    if (operation?.includes("push") && itemRefs.current[0]) {
-      setIsAnimating(true);
-      const el = itemRefs.current[0];
-      gsap.set(el, { scale: 0, y: -60, opacity: 0 });
-      gsap
-        .timeline({ onComplete: () => setIsAnimating(false) })
-        .to(el, { scale: 1, y: 0, opacity: 1, duration: 0.4, ease: "back.out(1.2)" });
-    }
-
-    /* pop */
-    if (operation?.includes("pop") && itemRefs.current[0]) {
-      setIsAnimating(true);
-      const el = itemRefs.current[0];
-      gsap.to(el, {
-        scale: 0,
-        y: -60,
-        opacity: 0,
-        duration: 0.35,
-        ease: "power2.in",
-        onComplete: () => setIsAnimating(false),
-      });
-    }
-
-    /* peek */
-    if (operation?.includes("Peek") && itemRefs.current[0]) {
-      setMessage(`Top value is ${stack[0]}`);           // ONLY message shown
-      setIsAnimating(true);
-      const el = itemRefs.current[0];
-      peekRef.current = el;
-      gsap.to(el, {
-        scale: 1.15,
-        boxShadow: "0 0 20px #a855f7",
-        duration: 0.3,
-        yoyo: true,
-        repeat: 3,
-        ease: "power1.inOut",
-        onComplete: () => setIsAnimating(false),
-      });
-    }
-
-    /* reorder */
-    gsap.fromTo(
-      itemRefs.current.filter(Boolean),
-      { y: 20, opacity: 0 },
-      { y: 0, opacity: 1, stagger: 0.06, duration: 0.25, ease: "power2.out" }
-    );
-
-    return () => { peekRef.current = null; };
-  }, [stack, operation]);
-
-  return (
-    <main className="container mx-auto px-6 pb-4">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-        Visualize Push, Pop, and Peek operations
-      </p>
-
-      <div className="max-w-md mx-auto">
-        <PushPop
-          stack={stack}
-          setStack={setStack}
-          isAnimating={isAnimating}
-          setIsAnimating={setIsAnimating}
-          setMessage={setMessage}
-          setOperation={setOperation}
-        />
-
-        <button
-          onClick={addRandomStack}
-          disabled={isAnimating || stack.length}
-          className="w-full mb-4 bg-blue-500 hover:bg-blue-600 text-white dark:text-black px-4 py-2 rounded disabled:opacity-50"
-        >
-          Add Random Stack
-        </button>
-
-        <div ref={stackRef} className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-          {/* peek-only message */}
-          {message && (
-            <div className="mb-6 p-3 rounded-lg bg-green-200 dark:bg-green-500 text-black">
-              {message}
-            </div>
-          )}
-
-          {/* vertical stack */}
-          <div className="flex flex-col items-center min-h-[200px]">
-            <div className="w-full max-w-xs">
-              {stack.length === 0 ? (
-                <div className="text-center py-8 text-gray-500 border-2 border-dashed rounded-lg">
-                  Stack is empty
-                </div>
-              ) : (
-                <div className="space-y-2">
-                  {stack.map((num, idx) => (
-                    <div
-                      key={idx}
-                      ref={(el) => (itemRefs.current[idx] = el)}
-                      className={`p-4 rounded-lg border-2 text-center font-medium transition-all ${
-                        idx === 0 ? "bg-blue-100 dark:bg-blue-900 border-blue-300 dark:border-blue-700" : "bg-white dark:bg-gray-700 border-gray-200 dark:border-gray-600"
-                      }`}
-                    >
-                      {num}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default StackVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/stack/peek/codeBlock.jsx b/app/visualizer/stack/peek/codeBlock.jsx
deleted file mode 100755
index 34b9b1390..000000000
--- a/app/visualizer/stack/peek/codeBlock.jsx
+++ /dev/null
@@ -1,468 +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 Peek Operation in JavaScript
-class Stack {
-  constructor() {
-    this.items = [];
-    this.top = -1;
-  }
-
-  // Push operation
-  push(element) {
-    this.items[++this.top] = element;
-    console.log(\`Pushed: \${element}\`);
-  }
-
-  // Pop operation
-  pop() {
-    if (this.isEmpty()) {
-      console.log("Stack Underflow");
-      return -1;
-    }
-    return this.items[this.top--];
-  }
-
-  // Peek operation
-  peek() {
-    if (this.isEmpty()) {
-      console.log("Stack is empty");
-      return -1;
-    }
-    console.log(\`Top element: \${this.items[this.top]}\`);
-    return this.items[this.top];
-  }
-
-  // Check if stack is empty
-  isEmpty() {
-    return this.top === -1;
-  }
-
-  // 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.peek();
-stack.pop();
-stack.peek();`,
-
-    python: `# Stack Implementation with Peek Operation in Python
-class Stack:
-    def __init__(self):
-        self.items = []
-        self.top = -1
-    
-    # Push operation
-    def push(self, element):
-        self.top += 1
-        self.items.append(element)
-        print(f"Pushed: {element}")
-    
-    # Pop operation
-    def pop(self):
-        if self.is_empty():
-            print("Stack Underflow")
-            return -1
-        return self.items.pop()
-    
-    # Peek operation
-    def peek(self):
-        if self.is_empty():
-            print("Stack is empty")
-            return -1
-        print(f"Top element: {self.items[-1]}")
-        return self.items[-1]
-    
-    # Check if stack is empty
-    def is_empty(self):
-        return self.top == -1
-    
-    # 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.peek()
-stack.pop()
-stack.peek()`,
-
-    java: `// Stack Implementation with Peek Operation in Java
-import java.util.ArrayList;
-
-class Stack {
-    private ArrayList<Integer> items;
-    private int top;
-    
-    public Stack() {
-        items = new ArrayList<>();
-        top = -1;
-    }
-    
-    // Push operation
-    public void push(int element) {
-        items.add(++top, element);
-        System.out.println("Pushed: " + element);
-    }
-    
-    // Pop operation
-    public int pop() {
-        if (isEmpty()) {
-            System.out.println("Stack Underflow");
-            return -1;
-        }
-        return items.remove(top--);
-    }
-    
-    // Peek operation
-    public int peek() {
-        if (isEmpty()) {
-            System.out.println("Stack is empty");
-            return -1;
-        }
-        System.out.println("Top element: " + items.get(top));
-        return items.get(top);
-    }
-    
-    // Check if stack is empty
-    public boolean isEmpty() {
-        return top == -1;
-    }
-    
-    // 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.peek();
-        stack.pop();
-        stack.peek();
-    }
-}`,
-
-    c: `// Stack Implementation with Peek Operation in C
-#include <stdio.h>
-#include <stdlib.h>
-#define MAX_SIZE 100
-
-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 == -1) {
-        printf("Stack Underflow\n");
-        return -1;
-    }
-    return s->items[s->top--];
-}
-
-// Peek operation
-int peek(Stack *s) {
-    if (s->top == -1) {
-        printf("Stack is empty\n");
-        return -1;
-    }
-    printf("Top element: %d\n", s->items[s->top]);
-    return s->items[s->top];
-}
-
-// Check if stack is empty
-int isEmpty(Stack *s) {
-    return s->top == -1;
-}
-
-// 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);
-    peek(&stack);
-    pop(&stack);
-    peek(&stack);
-    
-    return 0;
-}`,
-
-    cpp: `// Stack Implementation with Peek Operation in C++
-#include <iostream>
-#include <vector>
-using namespace std;
-
-class Stack {
-private:
-    vector<int> items;
-    int top;
-    const int MAX_SIZE = 100;
-
-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 (isEmpty()) {
-            cout << "Stack Underflow" << endl;
-            return -1;
-        }
-        int element = items.back();
-        items.pop_back();
-        top--;
-        return element;
-    }
-    
-    // Peek operation
-    int peek() {
-        if (isEmpty()) {
-            cout << "Stack is empty" << endl;
-            return -1;
-        }
-        cout << "Top element: " << items.back() << endl;
-        return items.back();
-    }
-    
-    // Check if stack is empty
-    bool isEmpty() {
-        return top == -1;
-    }
-    
-    // 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.peek();
-    stack.pop();
-    stack.peek();
-    
-    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/peek/content.jsx b/app/visualizer/stack/peek/content.jsx
deleted file mode 100755
index 259ab213d..000000000
--- a/app/visualizer/stack/peek/content.jsx
+++ /dev/null
@@ -1,164 +0,0 @@
-"use client";
-import ComplexityGraph from "@/app/components/ui/graph";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem("theme") || "light";
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener("storage", updateTheme);
-    window.addEventListener("themeChange", updateTheme);
-
-    return () => {
-      window.removeEventListener("storage", updateTheme);
-      window.removeEventListener("themeChange", updateTheme);
-    };
-  }, []);
-
-  const paragraphs = [
-    `Returns the topmost element from the stack without removing it.`,
-    `The peek operation is useful when you need to inspect the top element before deciding whether to pop it or push another element onto the stack.`,
-  ];
-
-  const example = [
-    { points : "Current stack: [7, 3, 5]" },
-    { points : "Peek → returns 7: [7, 3, 5] (stack remains unchanged)" },
-    { points : "After pop: [3, 5]" },
-    { points : "Peek → returns 3: [3, 5]" },
-  ];
-
-  const complexity = [
-    { points : "Time Complexity: O(1)" },
-    { points : "Space Complexity: O(1)" },
-  ];
-
-  return (
-<main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* Peek Operation */}
-        <section className="p-6">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Peek Operation
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraphs[0]}
-            </p>
-
-            <p className="text-[#374151] dark:text-[#d1d5db] font-medium mt-4 mb-2">
-              Example: Peeking at a stack
-            </p>
-
-            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {example.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ol>
-
-            <ul className="mt-4 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {complexity.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
-                    {item.points.split(":")[0]}:
-                  </span>
-                  <span className="ml-2">{item.points.split(":")[1]}</span>
-                </li>
-              ))}
-            </ul>
-
-            <div className="mt-8">
-              <ComplexityGraph
-                bestCase={(n) => 1}
-                averageCase={(n) => 1}
-                worstCase={(n) => 1}
-                maxN={25}
-              />
-            </div>
-
-            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
-              {paragraphs[1]}
-            </p>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge By{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
diff --git a/app/visualizer/stack/peek/page.jsx b/app/visualizer/stack/peek/page.jsx
deleted file mode 100755
index 54ebabe3b..000000000
--- a/app/visualizer/stack/peek/page.jsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import Animation from "@/app/visualizer/stack/peek/animation";
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/stack/peek/content";
-import Quiz from "@/app/visualizer/stack/peek/quiz";
-import Code from "@/app/visualizer/stack/peek/codeBlock";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Footer from '@/app/components/footer';
-import BackToTopButton from '@/app/components/ui/backtotop';
-
-export const metadata = {
-  title:
-    "Stack Peek Visualizer | Understand Peek Operation in Stack with Code in JS, C, Python, Java",
-  description:
-    "Learn how the Peek operation works in a Stack using interactive animations and code examples in JavaScript, C, Python, and Java. Perfect for beginners and DSA interview preparation.",
-  keywords: [
-    "Stack Peek",
-    "Peek Operation Stack",
-    "Stack Top Element",
-    "Peek in DSA",
-    "DSA Stack Animation",
-    "Learn Stack Operations",
-    "Stack in JavaScript",
-    "Stack in C",
-    "Stack in Python",
-    "Stack in Java",
-    "Peek Operation Example",
-    "Stack Code Examples",
-    "Top of Stack",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/stack/peek.png",
-        width: 1200,
-        height: 630,
-        alt: "Stack Peek Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Stack : Peek", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Stack
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Peek Operation
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section>
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-[#6b7280] dark:text-[#9ca3af] mb-2">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.peek}
-            title="Stack Peek"
-            description="Mark Stack : Peek as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section className="px-6">
-          <ExploreOther
-          title="Explore other operations"
-          links={[
-            { text: "Push & Pop", url: "/visualizer/stack/push-pop" },
-            { text: "Is Empty", url: "/visualizer/stack/isempty" },
-            { text: "Is Full", url: "/visualizer/stack/isfull" },
-          ]}
-        />
-        </section>
-      </div>
-
-      <BackToTopButton />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/stack/peek/quiz.jsx b/app/visualizer/stack/peek/quiz.jsx
deleted file mode 100755
index 7a00f638e..000000000
--- a/app/visualizer/stack/peek/quiz.jsx
+++ /dev/null
@@ -1,466 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const StackQuiz = () => {
-  const questions = [
-    {
-      question: "What does the peek operation in a stack do?",
-      options: [
-        "Removes and returns the top element",
-        "Returns the top element without removing it",
-        "Adds a new element to the top",
-        "Returns the bottom element of the stack"
-      ],
-      correctAnswer: 1,
-      explanation:
-        "Peek only inspects the top element without modifying the stack, unlike pop which removes it.",
-    },
-    {
-      question: "What is the time complexity of the peek operation?",
-      options: ["O(n)", "O(log n)", "O(1)", "O(n²)"],
-      correctAnswer: 2,
-      explanation:
-        "Peek operates in O(1) time since it directly accesses the top element (constant time).",
-    },
-    {
-      question: "After pushing 10, 20, and 30 onto a stack, what does peek() return?",
-      options: ["10", "20", "30", "Error"],
-      correctAnswer: 2,
-      explanation:
-        "The stack becomes [30, 20, 10], so peek returns 30 (the top element).",
-    },
-    {
-      question: "What happens if you peek at an empty stack?",
-      options: [
-        "Returns null",
-        "Returns undefined",
-        "Causes stack underflow",
-        "Depends on implementation"
-      ],
-      correctAnswer: 3,
-      explanation:
-        "Most implementations throw a stack underflow exception (or similar error) when peeking an empty stack.",
-    },
-    {
-      question: "How does peek differ from pop?",
-      options: [
-        "Peek removes the element, pop doesn't",
-        "Peek doesn't modify the stack, pop does",
-        "Peek works at the bottom of the stack",
-        "Peek has O(n) time complexity"
-      ],
-      correctAnswer: 1,
-      explanation:
-        "Peek is non-destructive (only reads data), while pop modifies the stack by removing the top element.",
-    },
-    {
-      question: "In which scenario would peek be particularly useful?",
-      options: [
-        "When you need to remove all elements",
-        "When you need to check the top element before deciding to pop/push",
-        "When you need to reverse the stack",
-        "When you need to count all elements"
-      ],
-      correctAnswer: 1,
-      explanation:
-        "Peek is ideal for inspection before operations (e.g., checking if a parenthesis matches before popping).",
-    },
-    {
-      question: "Given stack = [5, 2, 9], what's the state after peek()?",
-      options: [
-        "[5, 2, 9]",
-        "[2, 9]",
-        "[5, 2]",
-        "[9, 5, 2]"
-      ],
-      correctAnswer: 0,
-      explanation:
-        "Peek only reads the top element (9), leaving the stack unchanged as [5, 2, 9].",
-    },
-    {
-      question: "Which real-world analogy best describes peek?",
-      options: [
-        "Taking the top plate from a stack of plates",
-        "Looking at the top plate without taking it",
-        "Adding a new plate to the stack",
-        "Counting all plates in the stack"
-      ],
-      correctAnswer: 1,
-      explanation:
-        "Peek is like looking at the top plate to see if it's dirty before deciding to remove it.",
-    },
-    {
-      question: "What does peek() return after: push(8), push(4), pop(), peek()?",
-      options: ["8", "4", "Error", "Null"],
-      correctAnswer: 0,
-      explanation:
-        "Operations: push(8) → [8], push(4) → [4, 8], pop() → returns 4: [8], peek() → returns 8.",
-    },
-    {
-      question: "Why is peek considered a 'safe' operation?",
-      options: [
-        "It never throws errors",
-        "It doesn't modify stack data",
-        "It works on full stacks",
-        "It has O(1) space complexity"
-      ],
-      correctAnswer: 1,
-      explanation:
-        "Peek is 'safe' in terms of data integrity since it’s read-only (though it may throw errors on empty stacks).",
-    },
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    setSelectedAnswer(optionIndex);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = selectedAnswer;
-    setAnswers(newAnswers);
-
-    const newScore = newAnswers.reduce((acc, ans, idx) => {
-      return ans === questions[idx].correctAnswer ? acc + 1 : acc;
-    }, 0);
-    setScore(newScore);
-
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(newAnswers[currentQuestion + 1]);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowIntro(true);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Selection Sort");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Selection Sort");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("comparison with other simple sorts");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("stability characteristics");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Selection Sort concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Stack Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default StackQuiz;
\ No newline at end of file
diff --git a/app/visualizer/stack/polish/postfix/animation.jsx b/app/visualizer/stack/polish/postfix/animation.jsx
deleted file mode 100755
index 5878a81e5..000000000
--- a/app/visualizer/stack/polish/postfix/animation.jsx
+++ /dev/null
@@ -1,228 +0,0 @@
-"use client";
-import React, { useState, useEffect, useRef } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import gsap from "gsap";
-
-/* ----------  tiny reusable animated bits  ---------- */
-const AnimatedStackItem = ({ char, isTop }) => (
-  <motion.div
-    initial={{ y: -30, opacity: 0, scale: 0.8 }}
-    animate={{ y: 0, opacity: 1, scale: 1 }}
-    exit={{ y: 30, opacity: 0, scale: 0.8 }}
-    transition={{ type: "spring", stiffness: 300, damping: 20 }}
-    className={`p-3 border-2 rounded text-center font-medium
-      ${isTop ? "bg-blue-100 dark:bg-blue-900 border-blue-300" : "bg-white dark:bg-gray-700 border-gray-200"}`}
-  >
-    {char}
-    {isTop && <div className="text-xs mt-1 text-gray-500">(Top)</div>}
-  </motion.div>
-);
-
-const AnimatedOutputToken = ({ char }) => (
-  <motion.div
-    initial={{ scale: 0, rotate: -180 }}
-    animate={{ scale: 1, rotate: 0 }}
-    transition={{ type: "spring", stiffness: 300, damping: 15 }}
-    className="w-10 h-10 flex items-center justify-center rounded-md
-               bg-green-100 dark:bg-green-500 border border-white
-               text-green-800 dark:text-black font-mono font-bold"
-  >
-    {char}
-  </motion.div>
-);
-
-/* ----------  main component  ---------- */
-const InfixToPostfixVisualizer = () => {
-  /* =======  your existing state – nothing changed  ======= */
-  const [infix, setInfix] = useState("(A+B)*C");
-  const [postfix, setPostfix] = useState("");
-  const [stack, setStack] = useState([]);
-  const [output, setOutput] = useState([]);
-  const [currentStep, setCurrentStep] = useState(0);
-  const [steps, setSteps] = useState([]);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [operation, setOperation] = useState(null);
-  const [message, setMessage] = useState("Enter an infix expression and click Convert");
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [speed, setSpeed] = useState(1000);
-
-  const precedence = { "^": 4, "*": 3, "/": 3, "+": 2, "-": 2 };
-
-  /* ............  your existing logic  ............ */
-  const reset = () => {
-    setStack([]); setOutput([]); setPostfix(""); setCurrentStep(0); setSteps([]);
-    setMessage("Enter an infix expression and click Convert"); setOperation(null); setIsPlaying(false);
-  };
-
-  const convertInfixToPostfix = () => {
-    if (!infix.trim()) { setMessage("Please enter an infix expression"); return; }
-    setIsProcessing(true); reset();
-    const conversionSteps = []; let tempStack = []; let tempOutput = [];
-    conversionSteps.push({ stack:[],output:[],char:"",action:"Initialize",description:"Starting conversion process" });
-    for (let i = 0; i < infix.length; i++) {
-      const char = infix[i];
-      if (/[a-zA-Z0-9]/.test(char)) {
-        tempOutput.push(char);
-        conversionSteps.push({ stack:[...tempStack],output:[...tempOutput],char,action:"Add operand",description:`Added operand "${char}" to output` });
-      } else if (char === "(") {
-        tempStack.push(char);
-        conversionSteps.push({ stack:[...tempStack],output:[...tempOutput],char,action:"Push to stack",description:`Pushed "(" to stack` });
-      } else if (char === ")") {
-        while (tempStack.length && tempStack[tempStack.length - 1] !== "(") {
-          const popped = tempStack.pop(); tempOutput.push(popped);
-          conversionSteps.push({ stack:[...tempStack],output:[...tempOutput],char:popped,action:"Pop from stack",description:`Popped operator "${popped}" from stack` });
-        }
-        tempStack.pop();
-        conversionSteps.push({ stack:[...tempStack],output:[...tempOutput],char:"(",action:"Remove from stack",description:'Removed "(" from stack' });
-      } else {
-        while (tempStack.length && tempStack[tempStack.length - 1] !== "(" && precedence[char] <= precedence[tempStack[tempStack.length - 1]]) {
-          const popped = tempStack.pop(); tempOutput.push(popped);
-          conversionSteps.push({ stack:[...tempStack],output:[...tempOutput],char:popped,action:"Pop higher precedence",description:`Popped higher precedence operator "${popped}"` });
-        }
-        tempStack.push(char);
-        conversionSteps.push({ stack:[...tempStack],output:[...tempOutput],char,action:"Push operator",description:`Pushed operator "${char}" to stack` });
-      }
-    }
-    while (tempStack.length) { const popped = tempStack.pop(); tempOutput.push(popped);
-      conversionSteps.push({ stack:[...tempStack],output:[...tempOutput],char:popped,action:"Pop remaining",description:`Popped remaining operator "${popped}"` });
-    }
-    setSteps(conversionSteps); setPostfix(tempOutput.join(" ")); setIsProcessing(false); setIsPlaying(true);
-  };
-
-  const playNextStep = () => { if (currentStep < steps.length - 1) setCurrentStep(s => s + 1); else setIsPlaying(false); };
-  const playPrevStep = () => { if (currentStep > 0) setCurrentStep(s => s - 1); };
-  const togglePlayPause = () => setIsPlaying(p => !p);
-  const jumpToStep = (idx) => { setCurrentStep(idx); if (idx === steps.length - 1) setIsPlaying(false); };
-
-  useEffect(() => { let t; if (isPlaying && currentStep < steps.length - 1) t = setTimeout(playNextStep, speed); else if (currentStep >= steps.length - 1) setIsPlaying(false); return () => clearTimeout(t); }, [isPlaying, currentStep, steps.length, speed]);
-
-  /* =======  NEW: tiny GSAP flash on step change  ======= */
-  const statusRef = useRef();
-  useEffect(() => {
-    if (statusRef.current) gsap.fromTo(statusRef.current, { scale: 0.95, opacity: 0.7 }, { scale: 1, opacity: 1, duration: 0.3 });
-  }, [message]);
-
-  useEffect(() => { if (steps.length && currentStep < steps.length) { setIsAnimating(true); const s = steps[currentStep]; setStack(s.stack); setOutput(s.output); setOperation(s.action); setMessage(s.description); const t = setTimeout(() => setIsAnimating(false), 500); return () => clearTimeout(t); } }, [currentStep, steps]);
-
-  /* ----------  UI  ---------- */
-  return (
-    <main className="container mx-auto px-6">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">Visualize the conversion from infix to postfix notation</p>
-      <div className="max-w-4xl mx-auto">
-        {/* Input & Controls – same as before */}
-        <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-6">
-          <div className="flex flex-col sm:flex-row gap-4 mb-4">
-            <input type="text" value={infix} onChange={e => setInfix(e.target.value)} placeholder="Enter infix expression (e.g., (A+B)*C)"
-                   className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-900 dark:text-white"/>
-            <button onClick={convertInfixToPostfix} disabled={isProcessing} className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50">{isProcessing ? "Converting..." : "Convert"}</button>
-            <button onClick={reset} className="px-6 py-2 bg-red-500 text-white rounded-md">Reset</button>
-          </div>
-
-          {steps.length > 0 && (
-            <div className="flex flex-col gap-4 mt-4">
-              <div className="flex justify-between items-center">
-                <button onClick={playPrevStep} disabled={currentStep === 0 || isAnimating} className="px-4 py-2 bg-gray-200 dark:bg-neutral-900 rounded-md disabled:opacity-50">Previous</button>
-                <button onClick={togglePlayPause} className="px-4 py-2 bg-blue-600 text-white rounded-md">{isPlaying ? "Pause" : "Play"}</button>
-                <button onClick={playNextStep} disabled={currentStep >= steps.length - 1 || isAnimating} className="px-4 py-2 bg-gray-200 dark:bg-neutral-900 rounded-md disabled:opacity-50">Next</button>
-              </div>
-              <div className="flex items-center gap-4">
-                <span className="text-sm">Speed:</span>
-                <select value={speed} onChange={e => setSpeed(Number(e.target.value))} className="px-2 py-1 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-neutral-900">
-                  <option value={2000}>Slow</option><option value={1000}>Normal</option><option value={500}>Fast</option><option value={250}>Very Fast</option>
-                </select>
-                <div className="text-sm text-gray-600 dark:text-gray-400 ml-auto">Step {currentStep + 1} of {steps.length}</div>
-              </div>
-              <div className="w-full bg-gray-200 dark:bg-neutral-900 rounded-full h-2.5">
-                <motion.div className="bg-blue-600 h-2.5 rounded-full" initial={false} animate={{ width: `${(currentStep / (steps.length - 1)) * 100}%` }} transition={{ type: "spring", stiffness: 80 }}/>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Status panel with GSAP flash */}
-        <div ref={statusRef} className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-6">
-          <h2 className="text-xl font-semibold mb-4">Conversion Status</h2>
-          {operation && <div className="mb-4 p-3 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">{operation}</div>}
-          {message && <div className={`p-3 rounded-lg ${message.includes("Added") ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200" : message.includes("Popped") ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200" : message.includes("Pushed") ? "bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200" : "bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200"}`}>{message}</div>}
-          {postfix && currentStep === steps.length - 1 && (
-            <motion.div initial={{ scale: 0.8, y: 20 }} animate={{ scale: 1, y: 0 }} transition={{ type: "spring", stiffness: 200 }} className="mt-4 p-3 rounded-lg bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">
-              <div className="font-bold">Postfix Result:</div><div className="text-2xl font-poppins">{postfix}</div>
-            </motion.div>
-          )}
-        </div>
-
-        {/* Visualisations – now with motion */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
-          {/* Stack */}
-          <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-            <h2 className="text-xl font-semibold mb-4">Stack</h2>
-            <div className="flex flex-col items-center min-h-[200px]">
-              <div className="mb-2 text-sm text-gray-600 dark:text-gray-400">{stack.length > 0 ? "↑ Top" : ""}</div>
-              <div className="w-32 relative">
-                <AnimatePresence>
-                  {stack.length === 0 ? (
-                    <div className="text-center py-8 text-gray-500 dark:text-gray-400">Stack is empty</div>
-                  ) : (
-                    <div className="space-y-1">
-                      {stack.map((item, i) => (
-                        <AnimatedStackItem key={`${i}-${item}`} char={item} isTop={i === stack.length - 1} />
-                      ))}
-                    </div>
-                  )}
-                </AnimatePresence>
-              </div>
-              <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">{stack.length > 0 ? "↓ Bottom" : ""}</div>
-            </div>
-          </div>
-
-          {/* Output */}
-          <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-            <h2 className="text-xl font-semibold mb-4">Output</h2>
-            <div className="min-h-[200px] p-4 bg-gray-50 dark:bg-neutral-900 rounded">
-              <div className="flex flex-wrap gap-2">
-                <AnimatePresence>
-                  {output.length === 0 ? (
-                    <div className="text-gray-500 dark:text-gray-400 w-full text-center py-8">Output will appear here</div>
-                  ) : (
-                    output.map((c, i) => <AnimatedOutputToken key={`${i}-${c}`} char={c} />)
-                  )}
-                </AnimatePresence>
-            </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Step table – same as before, just with framer hover */}
-        {steps.length > 0 && (
-          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }} className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-6">
-            <h2 className="text-xl font-semibold mb-4">Conversion Steps</h2>
-            <div className="overflow-x-auto">
-              <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-                <thead className="bg-gray-50 dark:bg-neutral-950"><tr>
-                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Step</th>
-                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Action</th>
-                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Character</th>
-                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Description</th>
-                </tr></thead>
-                <tbody className="bg-white dark:bg-neutral-900 divide-y divide-gray-200 dark:divide-gray-700">
-                  {steps.map((step, idx) => (
-                    <motion.tr key={idx} onClick={() => jumpToStep(idx)} className={`cursor-pointer ${currentStep === idx ? "bg-blue-50 dark:bg-neutral-950" : "hover:bg-gray-50 dark:hover:bg-neutral-950"}`}
-                               whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.98 }}>
-                      <td className="px-4 py-2 whitespace-nowrap text-sm font-medium">{idx + 1}</td>
-                      <td className="px-4 py-2 whitespace-nowrap text-sm">{step.action}</td>
-                      <td className="px-4 py-2 whitespace-nowrap text-sm font-mono">{step.char || "-"}</td>
-                      <td className="px-4 py-2 text-sm">{step.description}</td>
-                    </motion.tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </motion.div>
-        )}
-      </div>
-    </main>
-  );
-};
-
-export default InfixToPostfixVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/stack/polish/postfix/codeBlock.jsx b/app/visualizer/stack/polish/postfix/codeBlock.jsx
deleted file mode 100755
index b36697868..000000000
--- 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/content.jsx b/app/visualizer/stack/polish/postfix/content.jsx
deleted file mode 100755
index 62cd7d696..000000000
--- a/app/visualizer/stack/polish/postfix/content.jsx
+++ /dev/null
@@ -1,239 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem("theme") || "light";
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener("storage", updateTheme);
-    window.addEventListener("themeChange", updateTheme);
-
-    return () => {
-      window.removeEventListener("storage", updateTheme);
-      window.removeEventListener("themeChange", updateTheme);
-    };
-  }, []);
-
-  const paragraph = [
-    `Postfix notation (also called Reverse Polish Notation) is a way of writing expressions where the operator comes after the operands.`,
-    `For example, the infix expression 3 + 4 becomes 3 4 + in postfix. It removes the need for parentheses by making operator precedence explicit through position.`,
-    `Note: Higher precedence means the operation will happen first. When operators have equal precedence, they are evaluated left-to-right (except for exponentiation which is right-to-left).`,
-  ];
-
-  const steps = [
-    { points : "Initialize an empty stack and an empty output string." },
-    { points : "Scan the infix expression from left to right." },
-    { points : "If the element is an operand, add it to the output." },
-    { points : "If the element is a '(', push it onto the stack." },
-    { points : `If the element is a ')', pop from the stack and add to output until '(' is encountered.` },
-    { points : "If the element is an operator, pop from the stack all operators with higher or equal precedence, then push the current operator." },
-    { points : "After scanning, pop all remaining operators from the stack." },
-  ];
-
-  const example = [
-    { points : "Infix: (A + B) * (C - D)" },
-    { points : `Step 1: Push '(' → Stack: [ '(' ], Output: ''` },
-    { points : "Step 2: Add 'A' → Output: 'A'" },
-    { points : "Step 3: Push '+' → Stack: [ '(', '+' ]" },
-    { points : "Step 4: Add 'B' → Output: 'A B'" },
-    { points : "Step 5: Pop until '(' → Stack: [ ], Output: 'A B +'" },
-    { points : "Step 6: Continue similarly for the rest → Final Postfix: A B + C D - *" },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* What is Postfix Notation? */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            What is Postfix Notation?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            {paragraph.map((text, idx) => (
-              <p
-                key={idx}
-                className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed"
-              >
-                {text}
-              </p>
-            ))}
-          </div>
-        </section>
-
-        {/* Infix to Postfix Conversion Steps */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Infix to Postfix Conversion Steps
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {steps.map((item, idx) => (
-                <li key={idx} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                  {item.points}
-                </li>
-              ))}
-            </ol>
-
-            <div className="mt-4">
-              <span className="font-medium">
-                Example:
-              </span>
-              <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                {example.map((item, idx) => (
-                  <li key={idx} className="text-[#6b7280] dark:text-[#9ca3af]">
-                    {item.points}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-        </section>
-
-        {/* Operator Precedence Table */}
-        <section className="p-6">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Operator Precedence Table
-          </h1>
-          <div className="prose dark:prose-invert max-w-none overflow-x-auto">
-            <table className="min-w-full border-collapse border border-blue-700">
-              <thead>
-                <tr className="bg-blue-50 dark:bg-blue-900/20">
-                  <th className="border border-blue-700 px-4 py-2 font-semibold">
-                    Operator
-                  </th>
-                  <th className="border border-blue-700 px-4 py-2 font-semibold">
-                    Meaning
-                  </th>
-                  <th className="border border-blue-700 px-4 py-2 font-semibold">
-                    Precedence
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td className="border border-blue-700 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    ( )
-                  </td>
-                  <td className="border border-blue-700 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    Parentheses
-                  </td>
-                  <td className="border border-blue-700 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    Highest
-                  </td>
-                </tr>
-                <tr className="bg-gray-50 dark:bg-gray-700/20">
-                  <td className="border border-blue-700 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    ^ %
-                  </td>
-                  <td className="border border-blue-700 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    Exponentiation / Modulus
-                  </td>
-                  <td className="border border-blue-700 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    2
-                  </td>
-                </tr>
-                <tr>
-                  <td className="border border-blue-700 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    * /
-                  </td>
-                  <td className="border border-blue-700 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    Multiplication / Division
-                  </td>
-                  <td className="border border-blue-700 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    3
-                  </td>
-                </tr>
-                <tr className="bg-gray-50 dark:bg-gray-700/20">
-                  <td className="border border-blue-700 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    + -
-                  </td>
-                  <td className="border border-blue-700 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    Addition / Subtraction
-                  </td>
-                  <td className="border border-blue-700 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    4 (Lowest)
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
-              {paragraph[2]}
-            </p>
-          </div>
-        </section>
-      </article>
-
-        {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-  };
-  
-  export default content;
\ No newline at end of file
diff --git a/app/visualizer/stack/polish/postfix/page.jsx b/app/visualizer/stack/polish/postfix/page.jsx
deleted file mode 100755
index ef051aca3..000000000
--- a/app/visualizer/stack/polish/postfix/page.jsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import Animation from "@/app/visualizer/stack/polish/postfix/animation";
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/stack/polish/postfix/content";
-import Quiz from "@/app/visualizer/stack/polish/postfix/quiz";
-import Code from "@/app/visualizer/stack/polish/postfix/codeBlock";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-import Footer from "@/app/components/footer";
-import ExploreOther from "@/app/components/ui/exploreOther";
-import BackToTopButton from "@/app/components/ui/backtotop";
-
-export const metadata = {
-  title:
-    "Postfix Notation using Stack | Learn Postfix Evaluation in DSA with Code in JS, C, Python, Java",
-  description:
-    "Visualize how Postfix expressions are evaluated using a Stack through interactive animations and code examples in JavaScript, C, Python, and Java. Perfect for DSA beginners and technical interview preparation.",
-  keywords: [
-    "Postfix Notation",
-    "Postfix Evaluation Stack",
-    "Stack DSA",
-    "Postfix Expression",
-    "DSA Postfix",
-    "Evaluate Postfix using Stack",
-    "Learn Postfix Notation",
-    "Postfix Evaluation in JavaScript",
-    "Postfix Evaluation in C",
-    "Postfix Evaluation in Python",
-    "Postfix Evaluation in Java",
-    "Stack Code Examples",
-    "DSA Expression Evaluation",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/stack/postfix.png",
-        width: 1200,
-        height: 630,
-        alt: "Stack infix to postfix",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Stack : Infix to postfix", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Stack
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Infix to Postfix
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section>
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-[#6b7280] dark:text-[#9ca3af] mb-2">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.postfix}
-            title="Polish : Postfix Notation"
-            description="Mark Polish : postfix as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section>
-          <ExploreOther
-            title="Explore other conversions"
-            links={[{ text: "Infix to Prefix", url: "./prefix" }]}
-          />
-        </section>
-      </div>
-
-      <BackToTopButton />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/stack/polish/postfix/quiz.jsx b/app/visualizer/stack/polish/postfix/quiz.jsx
deleted file mode 100755
index 28c4c6996..000000000
--- a/app/visualizer/stack/polish/postfix/quiz.jsx
+++ /dev/null
@@ -1,504 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const StackQuiz = () => {
-  const questions = [
-    {
-      question: "What is the key characteristic of postfix notation?",
-      options: [
-        "Operators appear before their operands",
-        "Operators appear between their operands",
-        "Operators appear after their operands",
-        "Parentheses dictate evaluation order"
-      ],
-      correctAnswer: 2,
-      explanation: "Postfix notation places operators **after** their operands (e.g., `3 4 +` instead of `3 + 4`)."
-    },
-    {
-      question: "How would the infix expression `(A * B) + C` convert to postfix?",
-      options: [
-        "A B * C +",
-        "A B C * +",
-        "A * B + C",
-        "+ * A B C"
-      ],
-      correctAnswer: 0,
-      explanation: "Parentheses force `A * B` first → `A B *`, then `+ C` → `A B * C +`."
-    },
-    {
-      question: "Which operator has the **highest precedence** in infix-to-postfix conversion?",
-      options: ["+", "*", "^ (exponentiation)", "("],
-      correctAnswer: 3,
-      explanation: "Parentheses `(` have the highest precedence and are handled separately in the stack."
-    },
-    {
-      question: "What is the postfix form of `2 ^ 3 ^ 2`? (Note: `^` = exponentiation)",
-      options: [
-        "2 3 2 ^ ^",
-        "2 3 ^ 2 ^",
-        "2 3 2 ^",
-        "2 3 ^ 2"
-      ],
-      correctAnswer: 1,
-      explanation: "Exponentiation is **right-associative**, so `2 ^ (3 ^ 2)` → `2 3 2 ^ ^`."
-    },
-    {
-      question: "Which data structure is used to convert infix to postfix?",
-      options: ["Queue", "Stack", "Heap", "Linked List"],
-      correctAnswer: 1,
-      explanation: "A **stack** temporarily holds operators and parentheses during conversion."
-    },
-    {
-      question: "What is the postfix equivalent of `A + B * C - D / E`?",
-      options: [
-        "A B C * + D E / -",
-        "A B + C * D E - /",
-        "A B C + * D E / -",
-        "A B * C + D E / -"
-      ],
-      correctAnswer: 0,
-      explanation: "`*` and `/` have higher precedence than `+` and `-`. Steps: `B * C` → `A + (result)` → `D / E` → subtract."
-    },
-    {
-      question: "When converting infix to postfix, what happens when a closing `)` is encountered?",
-      options: [
-        "Push it to the stack",
-        "Pop operators from the stack until `(` is found",
-        "Ignore it",
-        "Add it to the output"
-      ],
-      correctAnswer: 1,
-      explanation: "Pop all operators until `(` is reached (discarding both `(` and `)`)."
-    },
-    {
-      question: "What is the postfix form of `3 + 4 * 5 / 6`?",
-      options: [
-        "3 4 5 * 6 / +",
-        "3 4 5 6 / * +",
-        "3 4 * 5 6 / +",
-        "3 4 + 5 6 / *"
-      ],
-      correctAnswer: 0,
-      explanation: "`*` and `/` have equal precedence (left-to-right): `4 * 5` → `result / 6` → `3 + (result)`."
-    },
-    {
-      question: "Why does postfix notation not need parentheses?",
-      options: [
-        "It uses a stack for evaluation",
-        "Operator position implicitly defines precedence",
-        "It only supports single operations",
-        "It reverses the operands"
-      ],
-      correctAnswer: 1,
-      explanation: "Postfix order ensures operations are evaluated correctly without parentheses (e.g., `A B + C *` vs. `A B C * +`)."
-    },
-    {
-      question: "What is the result of evaluating the postfix expression `5 1 2 + 4 * + 3 -`?",
-      options: ["14", "10", "18", "20"],
-      correctAnswer: 0,
-      explanation: "Steps: `1 2 +` → 3; `3 4 *` → 12; `5 12 +` → 17; `17 3 -` → **14**."
-    }
-];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showExplanation, setShowExplanation] = useState(false);
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-  const [penaltyApplied, setPenaltyApplied] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    if (selectedAnswer !== null) return;
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (showExplanation && !penaltyApplied) {
-      setScore(prevScore => Math.max(0, prevScore - 0.5));
-      setPenaltyApplied(true);
-    }
-
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    
-    setShowExplanation(false);
-    setPenaltyApplied(false);
-    
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setShowExplanation(false);
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowExplanation(false);
-    setShowIntro(true);
-    setPenaltyApplied(false);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the key characteristic of postfix notation");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("converting infix to postfix with parentheses");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("operator precedence in conversion");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("right-associativity of exponentiation");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("using a stack for conversion");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("handling mixed operator precedence");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("handling closing parentheses");
-    }
-    if (answers[7] !== questions[7].correctAnswer) {
-      weakAreas.push("evaluating precedence in arithmetic expressions");
-    }
-    if (answers[8] !== questions[8].correctAnswer) {
-      weakAreas.push("why postfix does not need parentheses");
-    }
-    if (answers[9] !== questions[9].correctAnswer) {
-      weakAreas.push("evaluating complex postfix expressions");
-    }
-
-    return weakAreas.length > 0
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Postfix and Stack concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Stack Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-            {selectedAnswer !== null && (
-              <div className="mb-6">
-                <button
-                  onClick={() => setShowExplanation(!showExplanation)}
-                  className="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:underline mb-2"
-                >
-                  <FaInfoCircle className="mr-1" />
-                  {showExplanation ? "Hide Explanation" : "Show Explanation"}
-                </button>
-                <AnimatePresence>
-                  {showExplanation && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: "auto" }}
-                      exit={{ opacity: 0, height: 0 }}
-                      className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm overflow-hidden"
-                    >
-                      {questions[currentQuestion].explanation}
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-            )}
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default StackQuiz;
\ No newline at end of file
diff --git a/app/visualizer/stack/polish/prefix/animation.jsx b/app/visualizer/stack/polish/prefix/animation.jsx
deleted file mode 100755
index a97725b67..000000000
--- a/app/visualizer/stack/polish/prefix/animation.jsx
+++ /dev/null
@@ -1,436 +0,0 @@
-"use client";
-import React, { useState, useEffect, useRef } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import gsap from "gsap";
-
-/* ----------  tiny animated bits  ---------- */
-const AnimatedStackItem = ({ char, isTop }) => (
-  <motion.div
-    initial={{ y: -30, opacity: 0, scale: 0.8 }}
-    animate={{ y: 0, opacity: 1, scale: 1 }}
-    exit={{ y: 30, opacity: 0, scale: 0.8 }}
-    transition={{ type: "spring", stiffness: 300, damping: 20 }}
-    className={`p-3 border-2 rounded text-center font-medium ${
-      isTop
-        ? "bg-blue-100 dark:bg-blue-900 border-blue-300"
-        : "bg-white dark:bg-gray-700 border-gray-200"
-    }`}
-  >
-    {char}
-    {isTop && <div className="text-xs mt-1 text-gray-500">(Top)</div>}
-  </motion.div>
-);
-
-const AnimatedOutputToken = ({ char }) => (
-  <motion.div
-    initial={{ scale: 0, rotate: -180 }}
-    animate={{ scale: 1, rotate: 0 }}
-    transition={{ type: "spring", stiffness: 300, damping: 15 }}
-    className="w-10 h-10 flex items-center justify-center rounded-md
-               bg-green-100 dark:bg-green-500 border border-white
-               text-green-800 dark:text-black font-mono font-bold"
-  >
-    {char}
-  </motion.div>
-);
-
-/* ----------  main component  ---------- */
-const InfixToPrefixVisualizer = () => {
-  /* =======  state  ======= */
-  const [infix, setInfix] = useState("(A+B)*C");
-  const [prefix, setPrefix] = useState("");
-  const [stack, setStack] = useState([]);
-  const [output, setOutput] = useState([]);
-  const [currentStep, setCurrentStep] = useState(0);
-  const [steps, setSteps] = useState([]);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [operation, setOperation] = useState(null);
-  const [message, setMessage] = useState("Enter an infix expression and click Convert");
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [speed, setSpeed] = useState(1000);
-
-  const precedence = { "^": 4, "*": 3, "/": 3, "+": 2, "-": 2 };
-
-  /* ----------  helpers  ---------- */
-  const reset = () => {
-    setStack([]);
-    setOutput([]);
-    setPrefix("");
-    setCurrentStep(0);
-    setSteps([]);
-    setMessage("Enter an infix expression and click Convert");
-    setOperation(null);
-    setIsPlaying(false);
-  };
-
-  const convertInfixToPrefix = () => {
-    if (!infix.trim()) {
-      setMessage("Please enter an infix expression");
-      return;
-    }
-    setIsProcessing(true);
-    reset();
-
-    const conversionSteps = [];
-    let tempStack = [];
-    let tempOutput = [];
-
-    /* 1. reverse */
-    const reversed = infix.split("").reverse().join("");
-    conversionSteps.push({
-      stack: [],
-      output: [],
-      char: "",
-      action: "Reverse infix",
-      description: `Reversed: ${reversed}`,
-    });
-
-    /* 2. swap parentheses */
-    const swapped = reversed.replace(/[()]/g, (c) => (c === "(" ? ")" : "("));
-    conversionSteps.push({
-      stack: [],
-      output: [],
-      char: "",
-      action: "Swap parentheses",
-      description: `Swapped: ${swapped}`,
-    });
-
-    /* 3. postfix on swapped */
-    for (const ch of swapped) {
-      if (/[a-zA-Z0-9]/.test(ch)) {
-        tempOutput.push(ch);
-        conversionSteps.push({
-          stack: [...tempStack],
-          output: [...tempOutput],
-          char: ch,
-          action: "Add operand",
-          description: `Added operand "${ch}"`,
-        });
-      } else if (ch === "(") {
-        tempStack.push(ch);
-        conversionSteps.push({
-          stack: [...tempStack],
-          output: [...tempOutput],
-          char: ch,
-          action: "Push to stack",
-          description: `Pushed "("`,
-        });
-      } else if (ch === ")") {
-        while (tempStack.length && tempStack[tempStack.length - 1] !== "(") {
-          const popped = tempStack.pop();
-          tempOutput.push(popped);
-          conversionSteps.push({
-            stack: [...tempStack],
-            output: [...tempOutput],
-            char: popped,
-            action: "Pop from stack",
-            description: `Popped "${popped}"`,
-          });
-        }
-        tempStack.pop(); // remove '('
-        conversionSteps.push({
-          stack: [...tempStack],
-          output: [...tempOutput],
-          char: "(",
-          action: "Remove from stack",
-          description: `Removed "("`,
-        });
-      } else {
-        while (
-          tempStack.length &&
-          tempStack[tempStack.length - 1] !== "(" &&
-          precedence[ch] <= precedence[tempStack[tempStack.length - 1]]
-        ) {
-          const popped = tempStack.pop();
-          tempOutput.push(popped);
-          conversionSteps.push({
-            stack: [...tempStack],
-            output: [...tempOutput],
-            char: popped,
-            action: "Pop higher precedence",
-            description: `Popped higher precedence "${popped}"`,
-          });
-        }
-        tempStack.push(ch);
-        conversionSteps.push({
-          stack: [...tempStack],
-          output: [...tempOutput],
-          char: ch,
-          action: "Push operator",
-          description: `Pushed "${ch}"`,
-        });
-      }
-    }
-
-    while (tempStack.length) {
-      const popped = tempStack.pop();
-      tempOutput.push(popped);
-      conversionSteps.push({
-        stack: [...tempStack],
-        output: [...tempOutput],
-        char: popped,
-        action: "Pop remaining",
-        description: `Popped remaining "${popped}"`,
-      });
-    }
-
-    /* 4. reverse to get prefix */
-    const prefixResult = tempOutput.reverse().join(" ");
-    conversionSteps.push({
-      stack: [],
-      output: [...tempOutput],
-      char: "",
-      action: "Reverse postfix",
-      description: `Reversed to get prefix: ${prefixResult}`,
-    });
-
-    setSteps(conversionSteps);
-    setPrefix(prefixResult);
-    setIsProcessing(false);
-    setIsPlaying(true);
-  };
-
-  /* ----------  playback  ---------- */
-  const playNextStep = () => {
-    if (currentStep < steps.length - 1) setCurrentStep((s) => s + 1);
-    else setIsPlaying(false);
-  };
-  const playPrevStep = () => {
-    if (currentStep > 0) setCurrentStep((s) => s - 1);
-  };
-  const togglePlayPause = () => setIsPlaying((p) => !p);
-  const jumpToStep = (idx) => {
-    setCurrentStep(idx);
-    if (idx === steps.length - 1) setIsPlaying(false);
-  };
-
-  useEffect(() => {
-    let t;
-    if (isPlaying && currentStep < steps.length - 1) t = setTimeout(playNextStep, speed);
-    else if (currentStep >= steps.length - 1) setIsPlaying(false);
-    return () => clearTimeout(t);
-  }, [isPlaying, currentStep, steps.length, speed]);
-
-  /* ----------  GSAP flash on message change  ---------- */
-  const statusRef = useRef();
-  useEffect(() => {
-    if (statusRef.current)
-      gsap.fromTo(statusRef.current, { scale: 0.95, opacity: 0.7 }, { scale: 1, opacity: 1, duration: 0.3 });
-  }, [message]);
-
-  useEffect(() => {
-    if (steps.length && currentStep < steps.length) {
-      setIsAnimating(true);
-      const s = steps[currentStep];
-      setStack(s.stack || []);
-      setOutput(s.output || []);
-      setOperation(s.action);
-      setMessage(s.description);
-      const t = setTimeout(() => setIsAnimating(false), 500);
-      return () => clearTimeout(t);
-    }
-  }, [currentStep, steps]);
-
-  /* ----------  render  ---------- */
-  return (
-    <main className="container mx-auto px-6">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-        Visualize the conversion from infix to prefix notation
-      </p>
-      <div className="max-w-4xl mx-auto">
-        {/* Input & Controls */}
-        <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-6">
-          <div className="flex flex-col sm:flex-row gap-4 mb-4">
-            <input
-              type="text"
-              value={infix}
-              onChange={(e) => setInfix(e.target.value)}
-              placeholder="Enter infix expression (e.g., (A+B)*C)"
-              className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-900 dark:text-white"
-            />
-            <button
-              onClick={convertInfixToPrefix}
-              disabled={isProcessing}
-              className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
-            >
-              {isProcessing ? "Converting..." : "Convert"}
-            </button>
-            <button onClick={reset} className="px-6 py-2 bg-red-500 text-white rounded-md">
-              Reset
-            </button>
-          </div>
-
-          {steps.length > 0 && (
-            <div className="flex flex-col gap-4 mt-4">
-              <div className="flex justify-between items-center">
-                <button
-                  onClick={playPrevStep}
-                  disabled={currentStep === 0 || isAnimating}
-                  className="px-4 py-2 bg-gray-200 dark:bg-neutral-900 rounded-md disabled:opacity-50"
-                >
-                  Previous
-                </button>
-                <button onClick={togglePlayPause} className="px-4 py-2 bg-blue-600 text-white rounded-md">
-                  {isPlaying ? "Pause" : "Play"}
-                </button>
-                <button
-                  onClick={playNextStep}
-                  disabled={currentStep >= steps.length - 1 || isAnimating}
-                  className="px-4 py-2 bg-gray-200 dark:bg-neutral-900 rounded-md disabled:opacity-50"
-                >
-                  Next
-                </button>
-              </div>
-              <div className="flex items-center gap-4">
-                <span className="text-sm">Speed:</span>
-                <select
-                  value={speed}
-                  onChange={(e) => setSpeed(Number(e.target.value))}
-                  className="px-2 py-1 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-neutral-900"
-                >
-                  <option value={2000}>Slow</option>
-                  <option value={1000}>Normal</option>
-                  <option value={500}>Fast</option>
-                  <option value={250}>Very Fast</option>
-                </select>
-                <div className="text-sm text-gray-600 dark:text-gray-400 ml-auto">
-                  Step {currentStep + 1} of {steps.length}
-                </div>
-              </div>
-              <div className="w-full bg-gray-200 dark:bg-neutral-900 rounded-full h-2.5">
-                <motion.div
-                  className="bg-blue-600 h-2.5 rounded-full"
-                  initial={false}
-                  animate={{ width: `${(currentStep / (steps.length - 1)) * 100}%` }}
-                  transition={{ type: "spring", stiffness: 80 }}
-                />
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Status panel */}
-        <div ref={statusRef} className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-6">
-          <h2 className="text-xl font-semibold mb-4">Conversion Status</h2>
-          {operation && (
-            <div className="mb-4 p-3 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
-              {operation}
-            </div>
-          )}
-          {message && (
-            <div
-              className={`p-3 rounded-lg ${
-                message.includes("Added")
-                  ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
-                  : message.includes("Popped")
-                  ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
-                  : message.includes("Pushed")
-                  ? "bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200"
-                  : "bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200"
-              }`}
-            >
-              {message}
-            </div>
-          )}
-          {prefix && currentStep === steps.length - 1 && (
-            <motion.div
-              initial={{ scale: 0.8, y: 20 }}
-              animate={{ scale: 1, y: 0 }}
-              transition={{ type: "spring", stiffness: 200 }}
-              className="mt-4 p-3 rounded-lg bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
-            >
-              <div className="font-bold">Prefix Result:</div>
-              <div className="text-2xl font-mono">{prefix}</div>
-            </motion.div>
-          )}
-        </div>
-
-        {/* Visualisations */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
-          {/* Stack */}
-          <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-            <h2 className="text-xl font-semibold mb-4">Stack</h2>
-            <div className="flex flex-col items-center min-h-[200px]">
-              <div className="mb-2 text-sm text-gray-600 dark:text-gray-400">{stack.length > 0 ? "↑ Top" : ""}</div>
-              <div className="w-32 relative">
-                <AnimatePresence>
-                  {stack.length === 0 ? (
-                    <div className="text-center py-8 text-gray-500 dark:text-gray-400">Stack is empty</div>
-                  ) : (
-                    <div className="space-y-1">
-                      {stack.map((item, i) => (
-                        <AnimatedStackItem key={`${i}-${item}`} char={item} isTop={i === stack.length - 1} />
-                      ))}
-                    </div>
-                  )}
-                </AnimatePresence>
-              </div>
-              <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">{stack.length > 0 ? "↓ Bottom" : ""}</div>
-            </div>
-          </div>
-
-          {/* Output */}
-          <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-            <h2 className="text-xl font-semibold mb-4">Output</h2>
-            <div className="min-h-[200px] p-4 bg-gray-50 dark:bg-neutral-900 rounded">
-              <div className="flex flex-wrap gap-2">
-                <AnimatePresence>
-                  {output.length === 0 ? (
-                    <div className="text-gray-500 dark:text-gray-400 w-full text-center py-8">Output will appear here</div>
-                  ) : (
-                    output.map((c, i) => <AnimatedOutputToken key={`${i}-${c}`} char={c} />)
-                  )}
-                </AnimatePresence>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Step table */}
-        {steps.length > 0 && (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.2 }}
-            className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-6"
-          >
-            <h2 className="text-xl font-semibold mb-4">Conversion Steps</h2>
-            <div className="overflow-x-auto">
-              <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-                <thead className="bg-gray-50 dark:bg-neutral-950">
-                  <tr>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Step</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Action</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Character</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Description</th>
-                  </tr>
-                </thead>
-                <tbody className="bg-white dark:bg-neutral-900 divide-y divide-gray-200 dark:divide-gray-700">
-                  {steps.map((step, idx) => (
-                    <motion.tr
-                      key={idx}
-                      onClick={() => jumpToStep(idx)}
-                      className={`cursor-pointer ${
-                        currentStep === idx ? "bg-blue-50 dark:bg-neutral-950" : "hover:bg-gray-50 dark:hover:bg-neutral-950"
-                      }`}
-                      whileHover={{ scale: 1.01 }}
-                      whileTap={{ scale: 0.98 }}
-                    >
-                      <td className="px-4 py-2 whitespace-nowrap text-sm font-medium">{idx + 1}</td>
-                      <td className="px-4 py-2 whitespace-nowrap text-sm">{step.action}</td>
-                      <td className="px-4 py-2 whitespace-nowrap text-sm font-mono">{step.char || "-"}</td>
-                      <td className="px-4 py-2 text-sm">{step.description}</td>
-                    </motion.tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </motion.div>
-        )}
-      </div>
-    </main>
-  );
-};
-
-export default InfixToPrefixVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/stack/polish/prefix/codeBlock.jsx b/app/visualizer/stack/polish/prefix/codeBlock.jsx
deleted file mode 100755
index 0c03e4644..000000000
--- 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/content.jsx b/app/visualizer/stack/polish/prefix/content.jsx
deleted file mode 100755
index a306241e7..000000000
--- a/app/visualizer/stack/polish/prefix/content.jsx
+++ /dev/null
@@ -1,234 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem("theme") || "light";
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener("storage", updateTheme);
-    window.addEventListener("themeChange", updateTheme);
-
-    return () => {
-      window.removeEventListener("storage", updateTheme);
-      window.removeEventListener("themeChange", updateTheme);
-    };
-  }, []);
-
-  const paragraph = [
-    `Prefix notation (also called Polish Notation) is a way of writing expressions where the operator comes before the operands.`,
-    `For example, the infix expression 3 + 4 becomes + 3 4 in prefix. It removes the need for parentheses by using operator order directly.`,
-    `Note: Higher precedence means the operation will happen first. Exponentiation (^) is evaluated right-to-left, while others are left-to-right.`,
-  ];
-
-  const steps = [
-    { points : "Reverse the infix expression, while keeping the positions of parentheses correct." },
-    { points : "Replace ( with ) and vice-versa." },
-    { points : "Convert the reversed expression to postfix using a stack." },
-    { points : "Finally, reverse the postfix expression to get the prefix expression." },
-  ];
-
-  const example = [
-    { points : "Infix: (A + B) * (C - D)" },
-    { points : "Step 1: Reverse → (D - C) * (B + A)" },
-    { points : "Step 2: Convert to postfix → D C - B A + *" },
-    { points : "Step 3: Reverse → * + A B - C D" },
-  ];
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* What is Prefix Notation? */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            What is Prefix Notation?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraph[0]}
-            </p>
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed mt-4">
-              {paragraph[1]}
-            </p>
-          </div>
-        </section>
-
-        {/* Infix to Prefix Conversion Steps */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Infix to Prefix Conversion Steps
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {steps.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ol>
-
-            <div className="mt-4">
-              <span className="font-medium dark:text-amber-500 text-purple-600">
-                Example:
-              </span>
-              <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                {example.map((item, index) => (
-                  <li key={index} className="text-[#6b7280] dark:text-[#9ca3af]">
-                    {item.points}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-        </section>
-
-        {/* Operator Precedence Table */}
-        <section className="p-6">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Operator Precedence Table
-          </h1>
-          <div className="prose dark:prose-invert max-w-none overflow-x-auto">
-            <table className="min-w-full border-collapse border border-blue-500">
-              <thead>
-                <tr className="bg-blue-50 dark:bg-blue-900/20">
-                  <th className="border border-blue-500 px-4 py-2 font-semibold">
-                    Operator
-                  </th>
-                  <th className="border border-blue-500 px-4 py-2 font-semibold">
-                    Meaning
-                  </th>
-                  <th className="border border-blue-500 px-4 py-2 font-semibold">
-                    Precedence
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td className="border border-blue-500 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    ( )
-                  </td>
-                  <td className="border border-blue-500 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    Parentheses
-                  </td>
-                  <td className="border border-blue-500 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    Highest
-                  </td>
-                </tr>
-                <tr className="bg-gray-50 dark:bg-gray-700/20">
-                  <td className="border border-blue-500 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    ^ %
-                  </td>
-                  <td className="border border-blue-500 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    Exponentiation / Modulus
-                  </td>
-                  <td className="border border-blue-500 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    2
-                  </td>
-                </tr>
-                <tr>
-                  <td className="border border-blue-500 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    * /
-                  </td>
-                  <td className="border border-blue-500 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    Multiplication / Division
-                  </td>
-                  <td className="border border-blue-500 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    3
-                  </td>
-                </tr>
-                <tr className="bg-gray-50 dark:bg-gray-700/20">
-                  <td className="border border-blue-500 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    + -
-                  </td>
-                  <td className="border border-blue-500 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    Addition / Subtraction
-                  </td>
-                  <td className="border border-blue-500 px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
-                    4 (Lowest)
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
-              {paragraph[2]}
-            </p>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
\ No newline at end of file
diff --git a/app/visualizer/stack/polish/prefix/page.jsx b/app/visualizer/stack/polish/prefix/page.jsx
deleted file mode 100755
index 87dd2f95a..000000000
--- a/app/visualizer/stack/polish/prefix/page.jsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import Animation from "@/app/visualizer/stack/polish/prefix/animation";
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/stack/polish/prefix/content";
-import Quiz from "@/app/visualizer/stack/polish/postfix/quiz";
-import Code from "@/app/visualizer/stack/polish/prefix/codeBlock";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-import Footer from "@/app/components/footer";
-import ExploreOther from "@/app/components/ui/exploreOther";
-import BackToTopButton from "@/app/components/ui/backtotop";
-
-export const metadata = {
-  title:
-    "Prefix Notation using Stack | Learn Prefix Evaluation in DSA with Code in JS, C, Python, Java",
-  description:
-    "Understand how to evaluate Prefix expressions using a Stack with interactive animations and code examples in JavaScript, C, Python, and Java. Essential for mastering DSA concepts and preparing for interviews.",
-  keywords: [
-    "Prefix Notation",
-    "Prefix Evaluation Stack",
-    "Stack DSA",
-    "Prefix Expression",
-    "DSA Prefix",
-    "Evaluate Prefix using Stack",
-    "Learn Prefix Notation",
-    "Prefix Evaluation in JavaScript",
-    "Prefix Evaluation in C",
-    "Prefix Evaluation in Python",
-    "Prefix Evaluation in Java",
-    "Stack Code Examples",
-    "DSA Expression Evaluation",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/stack/prefix.png",
-        width: 1200,
-        height: 630,
-        alt: "Stack infix to prefix",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Stack : Infix to prefix", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Stack
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Infix to Prefix
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section>
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-[#6b7280] dark:text-[#9ca3af] mb-2">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.prefix}
-            title="Polish : Prefix Notation"
-            description="Mark Polish : prefix as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section>
-          <ExploreOther
-          title="Explore other conversions"
-          links={[
-            { text: "Infix to Postfix", url: "./postfix" },
-          ]}
-        />
-        </section>
-      </div>
-
-      <BackToTopButton />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/stack/polish/prefix/quiz.jsx b/app/visualizer/stack/polish/prefix/quiz.jsx
deleted file mode 100755
index 654bd3ae5..000000000
--- a/app/visualizer/stack/polish/prefix/quiz.jsx
+++ /dev/null
@@ -1,509 +0,0 @@
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const StackQuiz = () => {
-  const questions = [
-    {
-      question: "What is the defining characteristic of prefix notation?",
-      options: [
-        "Operators appear between operands",
-        "Operators appear after operands",
-        "Operators appear before operands",
-        "Operators are omitted entirely"
-      ],
-      correctAnswer: 2,
-      explanation: "Prefix notation places operators **before** their operands (e.g., `+ 3 4` instead of `3 + 4`)."
-    },
-    {
-      question: "How is the infix expression `A * (B + C)` converted to prefix?",
-      options: [
-        "* A + B C",
-        "A * B + C",
-        "+ * A B C",
-        "* + A B C"
-      ],
-      correctAnswer: 0,
-      explanation: "Parentheses force `B + C` first → `+ B C`, then `* A` → `* A + B C`."
-    },
-    {
-      question: "Which step is unique to infix-to-prefix conversion (compared to postfix)?",
-      options: [
-        "Using a stack for operators",
-        "Reversing the infix expression",
-        "Handling operator precedence",
-        "Processing left to right"
-      ],
-      correctAnswer: 1,
-      explanation: "Prefix conversion requires **reversing the infix expression** first (while handling parentheses swaps)."
-    },
-    {
-      question: "What is the prefix form of `2 ^ 3 ^ 2`? (^ = exponentiation)",
-      options: [
-        "^ 2 ^ 3 2",
-        "^ ^ 2 3 2",
-        "2 ^ 3 ^ 2",
-        "^ 2 3 ^ 2"
-      ],
-      correctAnswer: 0,
-      explanation: "Exponentiation is right-associative: `2 ^ (3 ^ 2)` → `^ 2 ^ 3 2`."
-    },
-    {
-      question: "Why does prefix notation eliminate the need for parentheses?",
-      options: [
-        "Operators are evaluated in reverse order",
-        "Operator position implicitly defines precedence",
-        "It only supports two operands",
-        "It uses postfix internally"
-      ],
-      correctAnswer: 1,
-      explanation: "Operator order in prefix ensures correct evaluation (e.g., `* + A B - C D` = `(A+B) * (C-D)`)."
-    },
-    {
-      question: "What is the prefix equivalent of `A - B / C + D`?",
-      options: [
-        "+ - A / B C D",
-        "- A / B + C D",
-        "+ / - A B C D",
-        "- + A / B C D"
-      ],
-      correctAnswer: 0,
-      explanation: "`/` has higher precedence: `B / C` → `- A (result)` → `+ (result) D` → `+ - A / B C D`."
-    },
-    {
-      question: "Which data structure is used during infix-to-prefix conversion?",
-      options: [
-        "Queue",
-        "Stack",
-        "Binary Tree",
-        "Hash Table"
-      ],
-      correctAnswer: 1,
-      explanation: "A **stack** manages operators and parentheses during conversion."
-    },
-    {
-      question: "What is the prefix form of `(A + B) * C - D`?",
-      options: [
-        "- * + A B C D",
-        "* + A B - C D",
-        "- + * A B C D",
-        "* - + A B C D"
-      ],
-      correctAnswer: 0,
-      explanation: "Parentheses first: `+ A B` → `* (result) C` → `- (result) D` → `- * + A B C D`."
-    },
-    {
-      question: "How are parentheses handled during infix reversal for prefix conversion?",
-      options: [
-        "They are deleted",
-        "They are kept in the same order",
-        "`(` becomes `)` and vice versa",
-        "They are converted to brackets"
-      ],
-      correctAnswer: 2,
-      explanation: "During reversal, `(` and `)` are swapped to maintain correctness (e.g., `(A+B)` → `)B+A(`)."
-    },
-    {
-      question: "What is the result of evaluating the prefix expression `- * + 2 3 4 5`?",
-      options: [
-        "15",
-        "9",
-        "17",
-        "20"
-      ],
-      correctAnswer: 0,
-      explanation: "Steps: `+ 2 3` → 5; `* 5 4` → 20; `- 20 5` → **15**."
-    }
-];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showExplanation, setShowExplanation] = useState(false);
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-  const [penaltyApplied, setPenaltyApplied] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    if (selectedAnswer !== null) return;
-    setSelectedAnswer(optionIndex);
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = optionIndex;
-    setAnswers(newAnswers);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-    
-    if (showExplanation && !penaltyApplied) {
-      setScore(prevScore => Math.max(0, prevScore - 0.5));
-      setPenaltyApplied(true);
-    }
-
-    if (selectedAnswer === questions[currentQuestion].correctAnswer) {
-      setScore(score + 1);
-    }
-    
-    setShowExplanation(false);
-    setPenaltyApplied(false);
-    
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(null);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setShowExplanation(false);
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowExplanation(false);
-    setShowIntro(true);
-    setPenaltyApplied(false);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Selection Sort");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Selection Sort");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("comparison with other simple sorts");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("stability characteristics");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Selection Sort concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-2xl mx-auto shadow-lg rounded-xl bg-white dark:bg-gray-800 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Stack Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-            <ul className="space-y-2 text-sm">
-              <li className="flex items-start">
-                <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>+1 point for each correct answer</span>
-              </li>
-              <li className="flex items-start">
-                <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>0 points for wrong answers</span>
-              </li>
-              <li className="flex items-start">
-                <FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>-0.5 point penalty for viewing explanations</span>
-              </li>
-              <li className="flex items-start">
-                <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-                <span>Earn stars based on your final score (max 5 stars)</span>
-              </li>
-            </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-            {selectedAnswer !== null && (
-              <div className="mb-6">
-                <button
-                  onClick={() => setShowExplanation(!showExplanation)}
-                  className="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:underline mb-2"
-                >
-                  <FaInfoCircle className="mr-1" />
-                  {showExplanation ? "Hide Explanation" : "Show Explanation"}
-                </button>
-                <AnimatePresence>
-                  {showExplanation && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: "auto" }}
-                      exit={{ opacity: 0, height: 0 }}
-                      className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm overflow-hidden"
-                    >
-                      {questions[currentQuestion].explanation}
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-            )}
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default StackQuiz;
\ No newline at end of file
diff --git a/app/visualizer/stack/push-pop/animation.jsx b/app/visualizer/stack/push-pop/animation.jsx
deleted file mode 100755
index ab6e116c9..000000000
--- a/app/visualizer/stack/push-pop/animation.jsx
+++ /dev/null
@@ -1,117 +0,0 @@
-"use client";
-import React, { useState, useEffect, useLayoutEffect, useRef } from "react";
-import { gsap } from "gsap";
-import PushPop from "@/app/components/ui/PushPop";
-
-const StackVisualizer = () => {
-  const [stack, setStack] = useState([]);
-  const [operation, setOperation] = useState(null);
-  const [message, setMessage] = useState("Stack is empty");
-  const [isAnimating, setIsAnimating] = useState(false);
-  const stackRefs = useRef([]);
-
-  // Reset stack
-  const reset = () => {
-    setStack([]);
-    setMessage("Stack is empty");
-    setOperation(null);
-  };
-
-  useEffect(() => {
-    if (isAnimating && stackRefs.current.length > 0) {
-      const el = stackRefs.current[0];
-      if (operation?.includes("pushed")) {
-        gsap.fromTo(
-          el,
-          { y: -50, opacity: 0 },
-          { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }
-        );
-      } else if (operation?.includes("popped")) {
-        gsap.to(el, { y: 50, opacity: 0, duration: 0.3, ease: "power1.in" });
-      } else if (operation?.includes("Peek")) {
-        gsap.fromTo(
-          el,
-          { scale: 1 },
-          { scale: 1.2, yoyo: true, repeat: 1, duration: 0.2 }
-        );
-      }
-    }
-  }, [stack, operation, isAnimating]);
-
-  return (
-    <main className="container mx-auto px-6 pb-8">
-      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-        Visualize the LIFO (Last In, First Out) principle
-      </p>
-
-      <div className="max-w-4xl mx-auto">
-        {/* Use the PushPop component */}
-        <PushPop
-          stack={stack}
-          setStack={setStack}
-          isAnimating={isAnimating}
-          setIsAnimating={setIsAnimating}
-          setMessage={setMessage}
-          setOperation={setOperation}
-        />
-
-        {/* Stack Visualization */}
-        <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-          <h2 className="text-xl font-semibold mb-4">Stack Visualization</h2>
-
-          {/* Operation Status */}
-          {operation && (
-            <div className="mb-4 p-3 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
-              {operation}
-            </div>
-          )}
-
-          {/* Vertical Stack */}
-          <div className="flex flex-col items-center min-h-[300px]">
-            {/* Top indicator */}
-            <div className="mb-2 text-sm text-gray-600 dark:text-gray-400">
-              {stack.length > 0 ? "↑ Top" : ""}
-            </div>
-
-            {/* Stack elements */}
-            <div className="w-32 relative">
-              {stack.length === 0 ? (
-                <div className="text-center py-8 text-gray-500">
-                  <span>Stack is empty</span>
-                </div>
-              ) : (
-                <div className="space-y-1">
-                  {stack.map((item, index) => (
-                    <div
-                      key={index}
-                      ref={(el) => (stackRefs.current[index] = el)}
-                      className={`p-3 border-2 rounded text-center font-medium transition-all duration-300 ${
-                        index === 0
-                          ? "bg-blue-100 dark:bg-blue-900 border-blue-300 dark:border-blue-700"
-                          : "bg-white dark:bg-gray-700 border-gray-200 dark:border-gray-600"
-                      }`}
-                    >
-                      <div>{item}</div>
-                      {index === 0 && (
-                        <div className="text-xs mt-1 text-gray-500 dark:text-gray-400">
-                          (Top)
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-
-            {/* Bottom indicator */}
-            <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
-              {stack.length > 0 ? "↓ Bottom" : ""}
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default StackVisualizer;
diff --git a/app/visualizer/stack/push-pop/codeBlock.jsx b/app/visualizer/stack/push-pop/codeBlock.jsx
deleted file mode 100755
index 135138afa..000000000
--- 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/content.jsx b/app/visualizer/stack/push-pop/content.jsx
deleted file mode 100755
index f4d90ddc0..000000000
--- a/app/visualizer/stack/push-pop/content.jsx
+++ /dev/null
@@ -1,303 +0,0 @@
-"use client";
-import ComplexityGraph from "@/app/components/ui/graph";
-import { useEffect, useState } from "react";
-
-const content = () => {
-  const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    const updateTheme = () => {
-      const savedTheme = localStorage.getItem("theme") || "light";
-      setTheme(savedTheme);
-    };
-
-    updateTheme();
-    setMounted(true);
-
-    window.addEventListener("storage", updateTheme);
-    window.addEventListener("themeChange", updateTheme);
-
-    return () => {
-      window.removeEventListener("storage", updateTheme);
-      window.removeEventListener("themeChange", updateTheme);
-    };
-  }, []);
-
-  const paragraphs = [
-    `Push and Pop are the two fundamental operations in stack data structure. Stack follows LIFO (Last In First Out) principle - the last element added is the first one to be removed.`,
-    `Push and Pop operations are fundamental to stack functionality. While simple to implement, stacks are powerful data structures used in many algorithms and system designs.`,
-  ];
-
-  const examplePush = [
-    { points: "Start with empty stack: [ ]" },
-    { points: "Push 5: [5]" },
-    { points: "Push 3: [3, 5]" },
-    { points: "Push 7: [7, 3, 5]" },
-  ];
-
-  const pushComplexity = [
-    { points: "Time Complexity: O(1)" },
-    { points: "Space Complexity: O(1)" },
-  ];
-
-  const examplePop = [
-    { points: "Current stack: [7, 3, 5]" },
-    { points: "Pop → returns 7: [3, 5]" },
-    { points: "Pop → returns 3: [5]" },
-    { points: "Pop → returns 5: [ ]" },
-  ];
-
-  const popComplexity = [
-    { points: "Time Complexity: O(1)" },
-    { points: "Space Complexity: O(1)" },
-  ];
-
-  {
-    /* applications */
-  }
-  const applications = [
-    {
-      points: "Function call management in programming languages (call stack)",
-    },
-    { points: "Undo/Redo operations in text editors" },
-    { points: "Back/Forward navigation in web browsers" },
-    { points: "Expression evaluation and syntax parsing" },
-    { points: "Memory management" },
-  ];
-
-  {
-    /* underflow and overflow */
-  }
-  const flows = [{ title: "Stack Underflow" }, { title: "Stack Overflow" }];
-
-  const flowsDetails = [
-    { detail: "Trying to pop from an empty stack" },
-    {
-      detail: "Trying to push to a full stack (in fixed-size implementations)",
-    },
-  ];
-
-  const combineData = flows.map((item, index) => ({
-    title: item.title,
-    detail: flowsDetails[index].detail,
-  }));
-
-  return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <div className="col-span-1">
-        <div className="hidden md:block">
-          {mounted && (
-            <iframe
-              key={theme}
-              src={
-                theme === "dark"
-                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-              }
-              width="100%"
-              height="400"
-              title="Daily DSA Challenge"
-            ></iframe>
-          )}
-        </div>
-        <div className="flex justify-center">
-          <span className="text-xs hidden md:block">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-      <article className="col-span-4 max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
-        {/* What is Stack Push & Pop */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            What is Stack Push & Pop?
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-              {paragraphs[0]}
-            </p>
-          </div>
-        </section>
-
-        {/* Push Operation */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Push Operation
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Adds an element to the top of the stack.
-            </p>
-            <p className="text-[#374151] dark:text-[#d1d5db] font-medium mb-2">
-              Example: Pushing elements onto a stack
-            </p>
-            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {examplePush.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ol>
-            <ul className="mt-4 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {pushComplexity.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
-                    {item.points.split(":")[0]}:
-                  </span>
-                  <span className="ml-2">{item.points.split(":")[1]}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Pop Operation */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Pop Operation
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
-              Removes and returns the topmost element from the stack.
-            </p>
-            <p className="text-[#374151] dark:text-[#d1d5db] font-medium mb-2">
-              Example: Popping elements from a stack
-            </p>
-            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {examplePop.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {item.points}
-                </li>
-              ))}
-            </ol>
-            <ul className="mt-4 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {popComplexity.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
-                    {item.points.split(":")[0]}:
-                  </span>
-                  <span className="ml-2">{item.points.split(":")[1]}</span>
-                </li>
-              ))}
-            </ul>
-
-            <div className="mt-8">
-              <ComplexityGraph
-                bestCase={(n) => 1}
-                averageCase={(n) => 1}
-                worstCase={(n) => 1}
-                maxN={25}
-              />
-            </div>
-          </div>
-        </section>
-
-        {/* Stack Underflow & Overflow */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Stack Underflow & Overflow
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {combineData.map((item, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  <span className="font-semibold">{item.title}:</span>{" "}
-                  {item.detail}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Real-world Applications */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Real-world Applications
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {applications.map((items, index) => (
-                <li
-                  key={index}
-                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
-                >
-                  {items.points}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-
-        {/* Additional Info */}
-        <section className="p-6">
-          <div className="prose dark:prose-invert max-w-none">
-            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
-              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
-                {paragraphs[1]}
-              </p>
-            </div>
-          </div>
-        </section>
-      </article>
-
-      {/* Mobile iframe at bottom */}
-      <div className="block md:hidden w-full">
-        {mounted && (
-          <iframe
-            key={theme}
-            src={
-              theme === "dark"
-                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
-                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
-            }
-            width="100%"
-            height="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge By{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default content;
diff --git a/app/visualizer/stack/push-pop/page.jsx b/app/visualizer/stack/push-pop/page.jsx
deleted file mode 100755
index 760edf5e2..000000000
--- a/app/visualizer/stack/push-pop/page.jsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import Animation from "@/app/visualizer/stack/push-pop/animation";
-import Navbar from "@/app/components/navbarinner";
-import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
-import ArticleActions from "@/app/components/ui/ArticleActions";
-import Content from "@/app/visualizer/stack/push-pop/content";
-import Quiz from "@/app/visualizer/stack/push-pop/quiz";
-import Code from "@/app/visualizer/stack/push-pop/codeBlock";
-import ExploreOther from "@/app/components/ui/exploreOther";
-import ModuleCard from "@/app/components/ui/ModuleCard";
-import { MODULE_MAPS } from "@/lib/modulesMap";
-import Footer from '@/app/components/footer';
-import BackToTopButton from '@/app/components/ui/backtotop';
-
-export const metadata = {
-  title:
-    "Stack Push & Pop Visualizer & Quiz | Learn Stack Operations with Code in JS, C, Python, Java",
-  description:
-    "Understand Stack Push and Pop operations through step-by-step animations and test your knowledge with an interactive quiz. Includes code examples in JavaScript, C, Python, and Java. Ideal for beginners and interview preparation to master stack-based data structures visually and through hands-on coding.",
-  keywords: [
-    "Stack Push Visualizer",
-    "Stack Pop Visualizer",
-    "Push and Pop Animation",
-    "Stack Operations",
-    "Stack Algorithm",
-    "Stack Quiz",
-    "Data Structure Visualization",
-    "Learn Stack Push",
-    "Learn Stack Pop",
-    "Interactive Stack Tool",
-    "Practice Stack Operations",
-    "Test Stack Knowledge",
-    "Stack in JavaScript",
-    "Stack in C",
-    "Stack in Python",
-    "Stack in Java",
-    "Stack Code Examples",
-  ],
-  robots: "index, follow",
-  openGraph: {
-    images: [
-      {
-        url: "/og/stack/pushPop.png",
-        width: 1200,
-        height: 630,
-        alt: "Stack Push and Pop Visualization",
-      },
-    ],
-  },
-};
-
-export default function Page() {
-  const paths = [
-    { name: "Home", href: "/" },
-    { name: "Visualizer", href: "/visualizer" },
-    { name: "Stack : Push & Pop", href: "" },
-  ];
-
-  return (
-    <>
-      <div>
-        <Navbar />
-      </div>
-
-      <div className="py-20 bg-white dark:bg-[#0f0f0f] text-[#1a1a1a] dark:text-[#f5f5f5]">
-        <section className="px-6 md:px-12">
-          <div className="mt-10 sm:mt-10 mb-4">
-            <Breadcrumbs paths={paths} />
-          </div>
-          <div className="flex items-center flex-col">
-            <div className="flex">
-              <p className="uppercase tracking-wide bg-[#f0fdf4] text-[#16a34a] border border-[#bbf7d0] px-4 py-1 mb-2 rounded-full text-sm font-semibold">
-                Stack
-              </p>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-extrabold text-center text-[#1a1a1a] dark:text-white mb-0">
-              Push & Pop
-            </h1>
-            <ArticleActions />
-          </div>
-          <div className="h-px max-w-4xl mx-auto my-10 bg-gradient-to-r from-transparent via-[#d1d7dc] dark:via-[#333] to-transparent"></div>
-          <Content />
-        </section>
-
-        <section>
-          <Animation />
-        </section>
-
-        <section className="px-6">
-          <p className="text-lg text-center text-[#6b7280] dark:text-[#9ca3af] mb-2">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-        </section>
-
-        <section className="px-6">
-          <Code />
-        </section>
-
-        <section className="px-6 md:px-12 my-12">
-          <ModuleCard
-            moduleId={MODULE_MAPS.pushPop}
-            title="Stack Push Pop"
-            description="Mark Stack : Push & Pop as done and view it on your dashboard"
-            initialDone={false}
-          />
-        </section>
-
-        <section className="px-6">
-          <ExploreOther
-            title="Explore other operations"
-            links={[
-              { text: "Peek", url: "/visualizer/stack/peek" },
-              { text: "Is Empty", url: "/visualizer/stack/isempty" },
-              { text: "Is Full", url: "/visualizer/stack/isfull" },
-            ]}
-          />
-        </section>
-      </div>
-
-      <BackToTopButton />
-      <Footer />
-    </>
-  );
-}
diff --git a/app/visualizer/stack/push-pop/quiz.jsx b/app/visualizer/stack/push-pop/quiz.jsx
deleted file mode 100755
index eaefc3f9a..000000000
--- a/app/visualizer/stack/push-pop/quiz.jsx
+++ /dev/null
@@ -1,472 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-
-const StackQuiz = () => {
-  const questions = [
-    {
-      question: "What principle does the stack data structure follow?",
-      options: [
-        "FIFO (First In First Out)",
-        "LIFO (Last In First Out)",
-        "Random Access",
-        "Priority Ordering"
-      ],
-      correctAnswer: 1,
-      explanation:
-        "Stack follows LIFO (Last In First Out) principle - the last element added is the first one to be removed.",
-    },
-    {
-      question: "What is the time complexity of push and pop operations in a stack?",
-      options: ["O(n)", "O(log n)", "O(1)", "O(n²)"],
-      correctAnswer: 2,
-      explanation:
-        "Both push and pop operations in a stack have O(1) time complexity as they only involve operations at the top of the stack.",
-    },
-    {
-      question: "What happens when you try to pop from an empty stack?",
-      options: [
-        "Stack Overflow",
-        "Stack Underflow",
-        "Null Pointer Exception",
-        "The stack resizes itself"
-      ],
-      correctAnswer: 1,
-      explanation:
-        "Attempting to pop from an empty stack results in stack underflow, which is an error condition.",
-    },
-    {
-      question: "After pushing 10, 20, and 30 onto an empty stack, what will be the result of two consecutive pop operations?",
-      options: [
-        "10 then 20",
-        "20 then 10",
-        "30 then 20",
-        "30 then 10"
-      ],
-      correctAnswer: 2,
-      explanation:
-        "The stack will be [30, 20, 10] after pushes. First pop returns 30, second pop returns 20.",
-    },
-    {
-      question: "What is the space complexity of stack operations?",
-      options: ["O(n)", "O(1)", "O(log n)", "Depends on implementation"],
-      correctAnswer: 1,
-      explanation:
-        "Each push/pop operation itself uses constant space (O(1)), though the overall stack may use O(n) space.",
-    },
-    {
-      question: "Which of the following is NOT a typical application of stacks?",
-      options: [
-        "Function call management",
-        "Undo operations in text editors",
-        "CPU scheduling",
-        "Expression evaluation"
-      ],
-      correctAnswer: 2,
-      explanation:
-        "CPU scheduling typically uses queues rather than stacks. Stacks are used in function calls, undo operations, and expression evaluation.",
-    },
-    {
-      question: "What happens when you push to a full stack (in fixed-size implementation)?",
-      options: [
-        "The stack automatically resizes",
-        "Stack Overflow",
-        "The oldest element is removed",
-        "The operation is queued"
-      ],
-      correctAnswer: 1,
-      explanation:
-        "Attempting to push to a full stack in fixed-size implementations results in stack overflow.",
-    },
-    {
-      question: "In a stack implementation, which end is used for both push and pop operations?",
-      options: [
-        "The front end",
-        "The rear end",
-        "The top end",
-        "Any random end"
-      ],
-      correctAnswer: 2,
-      explanation:
-        "All stack operations (push and pop) happen at the top end of the stack.",
-    },
-    {
-      question: "Which data structure would be most appropriate to implement an undo feature?",
-      options: [
-        "Queue",
-        "Stack",
-        "Linked List",
-        "Tree"
-      ],
-      correctAnswer: 1,
-      explanation:
-        "A stack is ideal for undo operations as it naturally follows the LIFO principle - the last action should be the first one undone.",
-    },
-    {
-      question: "What would be the result of pushing 'A', then 'B', then popping, then pushing 'C' to an empty stack?",
-      options: [
-        "[A, B, C]",
-        "[C, A]",
-        "[A, C]",
-        "[B, C]"
-      ],
-      correctAnswer: 1,
-      explanation:
-        "Operations: push A → [A], push B → [B, A], pop → returns B: [A], push C → [C, A].",
-    },
-  ];
-
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [score, setScore] = useState(0);
-  const [showResult, setShowResult] = useState(false);
-  const [quizCompleted, setQuizCompleted] = useState(false);
-  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showIntro, setShowIntro] = useState(true);
-  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-
-  const handleAnswerSelect = (optionIndex) => {
-    setSelectedAnswer(optionIndex);
-  };
-
-  const handleNextQuestion = () => {
-    if (selectedAnswer === null) return;
-
-    const newAnswers = [...answers];
-    newAnswers[currentQuestion] = selectedAnswer;
-    setAnswers(newAnswers);
-
-    const newScore = newAnswers.reduce((acc, ans, idx) => {
-      return ans === questions[idx].correctAnswer ? acc + 1 : acc;
-    }, 0);
-    setScore(newScore);
-
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-      setSelectedAnswer(newAnswers[currentQuestion + 1]);
-    } else {
-      setShowSuccessAnimation(true);
-      setTimeout(() => {
-        setShowSuccessAnimation(false);
-        setQuizCompleted(true);
-        setShowResult(true);
-      }, 2000);
-    }
-  };
-
-  const handlePreviousQuestion = () => {
-    setCurrentQuestion(currentQuestion - 1);
-    setSelectedAnswer(answers[currentQuestion - 1]);
-  };
-
-  const resetQuiz = () => {
-    setCurrentQuestion(0);
-    setSelectedAnswer(null);
-    setScore(0);
-    setShowResult(false);
-    setQuizCompleted(false);
-    setAnswers(Array(questions.length).fill(null));
-    setShowIntro(true);
-  };
-
-  const calculateWeakAreas = () => {
-    const weakAreas = [];
-    if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Selection Sort");
-    }
-    if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
-    }
-    if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Selection Sort");
-    }
-    if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("comparison with other simple sorts");
-    }
-    if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("stability characteristics");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Selection Sort concepts!";
-  };
-
-  const startQuiz = () => {
-    setShowIntro(false);
-  };
-
-  const getStarRating = () => {
-    const percentage = (score / questions.length) * 100;
-    if (percentage >= 90) return 5;
-    if (percentage >= 70) return 4;
-    if (percentage >= 50) return 3;
-    if (percentage >= 30) return 2;
-    return 1;
-  };
-
-  return (
-    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
-      {showIntro ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center"
-        >
-          <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
-              <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
-            </div>
-          </div>
-          <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
-            Stack Quiz Challenge
-          </h2>
-          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
-            <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> How it works:
-            </h3>
-          <ul className="space-y-2 text-sm">
-            <li className="flex items-start">
-              <FaCheck className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-              <span>+1 point for each correct answer</span>
-            </li>
-            <li className="flex items-start">
-              <FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-              <span>0 points for wrong answers</span>
-            </li>
-            <li className="flex items-start">
-              <FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
-              <span>Earn stars based on your final score (max 5 stars)</span>
-            </li>
-          </ul>
-          </div>
-          <button
-            onClick={startQuiz}
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center mx-auto"
-          >
-            Start Quiz <FaArrowRight className="ml-2" />
-          </button>
-        </motion.div>
-      ) : showSuccessAnimation ? (
-        <div className="flex flex-col items-center justify-center h-64">
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
-            className="mb-4"
-          >
-            <div className="relative">
-              <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                <FaCheck className="text-4xl text-green-500 animate-bounce" />
-              </div>
-              <motion.div
-                initial={{ scale: 0.5, opacity: 0 }}
-                animate={{ scale: 1.5, opacity: 0 }}
-                transition={{ duration: 1.5, repeat: Infinity }}
-                className="absolute inset-0 border-4 border-green-300 rounded-full"
-              />
-            </div>
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-xl font-semibold text-gray-700 dark:text-gray-200"
-          >
-            Quiz Completed!
-          </motion.p>
-        </div>
-      ) : !showResult ? (
-        <div className="quiz-container">
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-1">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span className="text-sm font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded text-blue-600 dark:text-blue-400">
-                Score: {score.toFixed(1)}
-              </span>
-            </div>
-            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-
-          <motion.div
-            key={currentQuestion}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
-              {questions[currentQuestion].question}
-            </h3>
-
-            <div className="space-y-3 mb-6">
-              {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
-                  key={index}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  }`}
-                  onClick={() => handleAnswerSelect(index)}
-                >
-                  <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
-                      {String.fromCharCode(65 + index)}
-                    </span>
-                    <span>{option}</span>
-                  </div>
-                </motion.div>
-              ))}
-            </div>
-
-
-          </motion.div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={handlePreviousQuestion}
-              disabled={currentQuestion === 0}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg disabled:opacity-50 flex items-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              <FaArrowLeft className="mr-2" /> Previous
-            </button>
-
-            <button
-              onClick={handleNextQuestion}
-              disabled={selectedAnswer === null}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
-            >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="result-container"
-        >
-          <div className="text-center mb-8">
-            <div className="relative inline-block mb-4">
-              <div className="w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full flex items-center justify-center shadow-lg">
-                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
-                  {score.toFixed(1)}/{questions.length}
-                </div>
-              </div>
-              <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
-                {[...Array(5)].map((_, i) => (
-                  <FaStar
-                    key={i}
-                    className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-
-            <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
-            </h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
-            </p>
-          </div>
-
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
-            <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
-              <FaInfoCircle className="mr-2" /> Performance Analysis
-            </h4>
-            <p className="text-sm">{calculateWeakAreas()}</p>
-          </div>
-
-          <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
-            {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
-                  {answers[index] === q.correctAnswer ? (
-                    <FaCheck className="mt-1 mr-2 flex-shrink-0" />
-                  ) : (
-                    <FaTimes className="mt-1 mr-2 flex-shrink-0" />
-                  )}
-                  <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
-                    {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <button
-            onClick={resetQuiz}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
-          >
-            <FaRedo className="mr-2" /> Take Quiz Again
-          </button>
-        </motion.div>
-      )}
-    </section>
-  );
-};
-
-export default StackQuiz;
\ No newline at end of file
diff --git a/app/visualizer/trees/binaryTree/types/animation.jsx b/app/visualizer/trees/binaryTree/types/animation.jsx
deleted file mode 100755
index a0b8fc8f9..000000000
--- a/app/visualizer/trees/binaryTree/types/animation.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-"use client";
-import Footer from "@/app/components/footer";
-import ExploreOther from "@/app/components/ui/exploreOther";
-import Content from "@/app/visualizer/trees/binaryTree/types/content";
-import CodeBlock from "@/app/visualizer/trees/binaryTree/types/codeBlock";
-import GoBackButton from "@/app/components/ui/goback";
-import BackToTop from "@/app/components/ui/backtotop";
-
-const InfixToPostfixVisualizer = () => {
-  return (
-    <div className="min-h-screen max-h-auto bg-gray-100 dark:bg-zinc-950 text-gray-800 dark:text-gray-200">
-        <main className="container mx-auto px-6 pt-16 pb-4">
-
-          { /* go back block here */}
-          <div className="mt-10 sm:mt-10">
-            <GoBackButton />
-          </div>
-
-          { /* main logic here */}
-          <h1 className="text-4xl md:text-4xl mt-6 ml-10 font-bold text-left text-gray-900 dark:text-white mb-0">
-            <span className="text-black dark:text-white">Types of Binary Trees</span>
-          </h1>
-          <div className='bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl mt-2 mb-5'></div>
-          <Content />
-        <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8"></p>
-        <CodeBlock />
-        <ExploreOther
-          title="Explore other implementation"
-          links={[{ text: "Structure & Properties", url: "./properties" }]}
-        />
-      </main>
-      <div className="bg-gray-700 z-10 h-[1px]"></div>
-      <BackToTop />
-      <Footer />
-    </div>
-  );
-};
-
-export default InfixToPostfixVisualizer;
diff --git a/app/visualizer/trees/binaryTree/types/codeBlock.jsx b/app/visualizer/trees/binaryTree/types/codeBlock.jsx
deleted file mode 100755
index 2021a3276..000000000
--- a/app/visualizer/trees/binaryTree/types/codeBlock.jsx
+++ /dev/null
@@ -1,81 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/atom-one-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = ({ code = '', language = 'javascript', title = 'Code' }) => {
-  const [selectedLanguage, setSelectedLanguage] = useState(language);
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-
-  const languages = ['javascript', 'python', 'java', 'c', 'cpp'];
-  
-  const handleCopy = () => {
-    navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  const highlightedCode = highlightCode(code, selectedLanguage);
-
-  return (
-    <div className="w-full rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-shadow duration-300">
-      {/* Mac Window Chrome */}
-      <div className="bg-[#1a1a1a] border border-[#333] rounded-t-2xl px-4 py-3 flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          {/* Traffic Light Dots */}
-          <div className="flex gap-2">
-            <div className="w-3 h-3 rounded-full bg-[#FF5F57]"></div>
-            <div className="w-3 h-3 rounded-full bg-[#FFBD2E]"></div>
-            <div className="w-3 h-3 rounded-full bg-[#28C940]"></div>
-          </div>
-          {/* Title */}
-          <span className="text-[#999] text-sm font-medium ml-2">{title}</span>
-        </div>
-        {/* Copy Button */}
-        <button
-          onClick={handleCopy}
-          className="text-xs font-medium px-3 py-1 rounded-full bg-[#a435f0] hover:bg-[#8b2dd4] text-white transition-colors duration-200"
-        >
-          {copied ? '✓ Copied' : '📋 Copy'}
-        </button>
-      </div>
-
-      {/* Language Tabs */}
-      <div className="bg-[#0f0f0f] border-b border-[#333] px-4 py-3 flex gap-2 overflow-x-auto">
-        {languages.map((lang) => (
-          <button
-            key={lang}
-            onClick={() => setSelectedLanguage(lang)}
-            className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 capitalize whitespace-nowrap ${
-              selectedLanguage === lang
-                ? 'bg-[#a435f0] text-white'
-                : 'bg-[#1a1a1a] text-[#999] hover:bg-[#2a2a2a] border border-[#333]'
-            }`}
-          >
-            {lang}
-          </button>
-        ))}
-      </div>
-
-      {/* Code Block */}
-      <div className="bg-[#0f0f0f] p-6 overflow-x-auto">
-        <pre className="font-mono text-sm text-[#e8e8e8] leading-relaxed">
-          <code
-            dangerouslySetInnerHTML={{
-              __html: highlightedCode,
-            }}
-          />
-        </pre>
-      </div>
-    </div>
-  );
-};
-
-export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/trees/binaryTree/types/content.jsx b/app/visualizer/trees/binaryTree/types/content.jsx
deleted file mode 100755
index e24da0d04..000000000
--- a/app/visualizer/trees/binaryTree/types/content.jsx
+++ /dev/null
@@ -1,298 +0,0 @@
-/*  content.jsx  */
-import React, { useEffect, useRef } from 'react';
-import { gsap } from 'gsap';
-
-/* ------------- tiny helper to draw a tree ------------- */
-function drawTree(
-  svg,                // <svg> element
-  nodes,              // flat list [ {value, x, y}, ... ]
-  edges,              // [ {from, to}, ... ]  (indices)
-  radius = 18
-) {
-  // clear previous drawings
-  svg.innerHTML = '';
-
-  // edges (lines)
-  edges.forEach(({ from, to }) => {
-    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-    line.setAttribute('x1', nodes[from].x);
-    line.setAttribute('y1', nodes[from].y);
-    line.setAttribute('x2', nodes[to].x);
-    line.setAttribute('y2', nodes[to].y);
-    line.setAttribute('stroke', '#3b82f6'); // blue-500
-    line.setAttribute('stroke-width', '2');
-    svg.appendChild(line);
-  });
-
-  // nodes (circles + text)
-  nodes.forEach(({ value, x, y }, i) => {
-    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-
-    circle.setAttribute('cx', x);
-    circle.setAttribute('cy', y);
-    circle.setAttribute('r', radius);
-    circle.setAttribute('fill', '#3b82f6'); // blue-500
-    circle.setAttribute('stroke', '#1e40af'); // blue-800
-    circle.setAttribute('stroke-width', '2');
-
-    text.setAttribute('x', x);
-    text.setAttribute('y', y + 5);
-    text.setAttribute('text-anchor', 'middle');
-    text.setAttribute('fill', '#fff');
-    text.setAttribute('font-size', '14');
-    text.textContent = value;
-
-    g.appendChild(circle);
-    g.appendChild(text);
-    svg.appendChild(g);
-
-    // animate in
-    gsap.from(g, { scale: 0, duration: 0.6, ease: 'back.out(1.7)', delay: i * 0.15 });
-  });
-}
-
-export default function content() {
-  /* refs for the three svgs */
-  const fullSvg    = useRef(null);
-  const degenSvg   = useRef(null);
-  const completeSvg = useRef(null);
-
-  /* ------------- GSAP trees ------------- */
-  useEffect(() => {
-    /* Full tree (height 2) */
-    drawTree(
-      fullSvg.current,
-      [
-        { value: 'A', x: 60, y: 30 },
-        { value: 'B', x: 30, y: 80 },
-        { value: 'C', x: 90, y: 80 },
-        { value: 'D', x: 15, y: 130 },
-        { value: 'E', x: 45, y: 130 },
-        { value: 'F', x: 75, y: 130 },
-        { value: 'G', x: 105, y: 130 },
-      ],
-      [
-        { from: 0, to: 1 },
-        { from: 0, to: 2 },
-        { from: 1, to: 3 },
-        { from: 1, to: 4 },
-        { from: 2, to: 5 },
-        { from: 2, to: 6 },
-      ]
-    );
-
-    /* Degenerate / right-skewed */
-    drawTree(
-      degenSvg.current,
-      [
-        { value: '1', x: 30, y: 30 },
-        { value: '2', x: 30, y: 80 },
-        { value: '3', x: 30, y: 130 },
-        { value: '4', x: 30, y: 180 },
-      ],
-      [
-        { from: 0, to: 1 },
-        { from: 1, to: 2 },
-        { from: 2, to: 3 },
-      ]
-    );
-
-    /* Complete tree (7 nodes) */
-    drawTree(
-      completeSvg.current,
-      [
-        { value: '1', x: 60, y: 30 },
-        { value: '2', x: 30, y: 80 },
-        { value: '3', x: 90, y: 80 },
-        { value: '4', x: 15, y: 130 },
-        { value: '5', x: 45, y: 130 },
-        { value: '6', x: 75, y: 130 },
-        { value: '7', x: 105, y: 130 },
-      ],
-      [
-        { from: 0, to: 1 },
-        { from: 0, to: 2 },
-        { from: 1, to: 3 },
-        { from: 1, to: 4 },
-        { from: 2, to: 5 },
-        { from: 2, to: 6 },
-      ]
-    );
-  }, []);
-
-  /* ------------- textual content ------------- */
-  const defFull = [
-    { points: 'Every internal node has exactly two children' },
-    { points: 'All leaves are on the same or adjacent levels' },
-    { points: 'Maximum nodes for height h = 2^(h+1) – 1' },
-  ];
-  const defDegenerate = [
-    { points: 'Each parent has only one child (left or right)' },
-    { points: 'Effectively a linked list → Θ(n) height' },
-    { points: 'Worst-case BST shape when data is sorted' },
-  ];
-  const defComplete = [
-    { points: 'All levels fully filled except possibly the last' },
-    { points: 'Last-level nodes are packed from the left' },
-    { points: 'Array-based heap relies on this structure' },
-  ];
-  const identify = [
-    { points: 'Count children for every node' },
-    { points: 'If any node has exactly one child → not full' },
-    { points: 'If height = n – 1 → degenerate / skewed' },
-    { points: 'If level-order scan finds a gap before last node → not complete' },
-  ];
-
-  return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
-        {/* Quick tags */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Three Types
-          </h1>
-          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-center">
-            {['Full Binary Tree', 'Degenerate / Skewed', 'Complete Binary Tree'].map(
-              (t) => (
-                <div
-                  key={t}
-                  className="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg shadow-sm"
-                >
-                  {t}
-                </div>
-              )
-            )}
-          </div>
-        </section>
-
-        {/* GSAP trees */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Visual Comparison
-          </h1>
-
-          <div className="space-y-10">
-            {[
-              {
-                title: 'Full Binary Tree',
-                svgRef: fullSvg,
-                description: 'A Full Binary Tree is a type of binary tree in which every node has either 0 or 2 children. It is perfectly structured, and all internal nodes have exactly two children while leaves are aligned at the same or adjacent levels, making it balanced for operations and ideal for understanding fundamental tree structures.'
-              },
-              {
-                title: 'Degenerate (Skewed) Tree',
-                svgRef: degenSvg,
-                description: 'A Degenerate or Skewed Tree is a tree where each parent has only one child, making it essentially a linked list. It has the worst-case height of Θ(n), which can occur in unbalanced binary search trees when inserting sorted data without balancing, leading to inefficient operations.'
-              },
-              {
-                title: 'Complete Binary Tree',
-                svgRef: completeSvg,
-                description: 'A Complete Binary Tree is a binary tree in which all levels are fully filled except possibly the last, which is filled from left to right. It is the structure used by heaps, ensuring operations can be performed efficiently with predictable height and balanced shape.'
-              },
-            ].map(({ title, svgRef, description }, i) => (
-              <div key={i} className="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
-                <div className="flex justify-center">
-                  <svg
-                    ref={svgRef}
-                    viewBox="0 0 120 210"
-                    className="w-full max-w-[200px] h-[200px] rounded bg-white dark:bg-gray-800"
-                  ></svg>
-                </div>
-                <div>
-                  <h3 className="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">{title}</h3>
-                  <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">{description}</p>
-                </div>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        {/* Structural Rules */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Structural Rules
-          </h1>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            {[defFull, defDegenerate, defComplete].map((rules, idx) => (
-              <div
-                key={idx}
-                className="border border-black/10 dark:border-gray-400 rounded-lg p-4 bg-white dark:bg-gray-800 shadow-md"
-              >
-                <h2 className="text-lg font-bold mb-2">
-                  {['Full', 'Degenerate', 'Complete'][idx]}
-                </h2>
-                <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                  {rules.map((r, i) => (
-                    <li key={i} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                      {r.points}
-                    </li>
-                  ))}
-                </ol>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        {/* Identification */}
-        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            How to Identify a Type
-          </h1>
-          <div className="p-4 rounded-lg bg-gray-50 dark:bg-gray-700">
-            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-              {identify.map((r, i) => (
-                <li key={i} className="text-[#374151] dark:text-[#d1d5db] pl-2">
-                  {r.points}
-                </li>
-              ))}
-            </ol>
-          </div>
-        </section>
-
-        {/* Complexity */}
-        <section className="p-6">
-          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
-            Height & Complexity
-          </h1>
-          <div className="overflow-x-auto">
-            <table className="min-w-full border-collapse border border-gray-400">
-              <thead className="bg-gray-100 dark:bg-gray-700">
-                <tr>
-                  <th className="border border-gray-400 p-3">Tree Type</th>
-                  <th className="border border-gray-400 p-3">Height</th>
-                  <th className="border border-gray-400 p-3 hidden sm:table-cell">
-                    Search/Insert/Delete
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {[
-                  ['Full (balanced)', 'Θ(log n)', 'Θ(log n)'],
-                  ['Complete', 'Θ(log n)', 'Θ(log n)'],
-                  ['Degenerate / Skewed', 'Θ(n)', 'Θ(n)'],
-                ].map(([t, h, op], i) => (
-                  <tr
-                    key={t}
-                    className={i % 2 ? 'bg-gray-50 dark:bg-gray-700' : 'bg-white dark:bg-gray-800'}
-                  >
-                    <td className="border border-gray-400 p-3">{t}</td>
-                    <td className="border border-gray-400 p-3 font-mono">{h}</td>
-                    <td className="border border-gray-400 p-3 hidden sm:table-cell font-mono">
-                      {op}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
-      </article>
-    </main>
-  );
-}
\ No newline at end of file
diff --git a/app/visualizer/trees/binaryTree/types/page.jsx b/app/visualizer/trees/binaryTree/types/page.jsx
deleted file mode 100755
index a12c7cdb4..000000000
--- a/app/visualizer/trees/binaryTree/types/page.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import Animation from "@/app/visualizer/trees/binaryTree/types/animation";
-import Navbar from "@/app/components/navbarinner";
-
-export const metadata = {
-  title: 'Binary Tree Types | Learn Full, Complete, and Degenerate Binary Trees in DSA',
-  description: 'Learn about Binary Tree types in Data Structures and Algorithms, including Full Binary Tree, Complete Binary Tree, and Degenerate Tree with clear visual explanations, animations, and code examples in JavaScript, C, Python, and Java.',
-  keywords: [
-    'Binary Tree',
-    'Binary Tree Types',
-    'Full Binary Tree',
-    'Complete Binary Tree',
-    'Degenerate Tree',
-    'Binary Tree Visualization',
-    'DSA Binary Trees',
-    'Binary Tree Animation',
-    'Binary Tree Implementation',
-    'Binary Tree in JavaScript',
-    'Binary Tree in C',
-    'Binary Tree in Python',
-    'Binary Tree in Java',
-    'Learn Binary Trees DSA',
-  ],
-  robots: 'index, follow',
-};
-
-export default function Page(){
-  return(
-    <>
-      <Navbar/>
-      <Animation/>
-    </>
-  );
-};
\ No newline at end of file
diff --git a/app/visualizer/trees/traversing/in-order/animation.jsx b/app/visualizer/trees/traversing/in-order/animation.jsx
deleted file mode 100755
index 67629a79e..000000000
--- a/app/visualizer/trees/traversing/in-order/animation.jsx
+++ /dev/null
@@ -1,405 +0,0 @@
-'use client';
-import React, { useState, useRef, useEffect } from 'react';
-import Navbar from '@/app/components/navbarinner';
-import Footer from '@/app/components/footer';
-
-class TreeNode {
-  constructor(value) {
-    this.value = value;
-    this.left = null;
-    this.right = null;
-  }
-}
-
-export default function InOrderVisualizer() {
-  const [root, setRoot] = useState(null);
-  const [inputValue, setInputValue] = useState('');
-  const [message, setMessage] = useState('Tree is empty');
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [highlightedNodes, setHighlightedNodes] = useState([]);
-  const [traversalResult, setTraversalResult] = useState([]);
-  const [speed, setSpeed] = useState(1);
-  const [steps, setSteps] = useState(0);
-  const animationRef = useRef(null);
-
-  // Insert node into BST
-  const insertNode = (node, value) => {
-    if (!node) return new TreeNode(value);
-    if (value < node.value) {
-      node.left = insertNode(node.left, value);
-    } else if (value > node.value) {
-      node.right = insertNode(node.right, value);
-    }
-    return node;
-  };
-
-  const handleInsert = () => {
-    const value = parseInt(inputValue);
-    if (isNaN(value)) {
-      setMessage('Please enter a valid number');
-      return;
-    }
-
-    setRoot(prev => {
-      const newRoot = insertNode(prev ? {...prev} : null, value);
-      setMessage(`Inserted ${value}`);
-      return newRoot;
-    });
-    setInputValue('');
-    setTraversalResult([]);
-    setHighlightedNodes([]);
-    setSteps(0);
-  };
-
-  // Generate random tree
-  const generateRandomTree = () => {
-    const size = Math.floor(Math.random() * 5) + 5; // 5-9 nodes
-    const values = Array.from({length: size}, () => Math.floor(Math.random() * 100) + 1);
-    
-    let newRoot = null;
-    values.forEach(val => {
-      newRoot = insertNode(newRoot, val);
-    });
-    
-    setRoot(newRoot);
-    setMessage(`Generated tree with ${size} nodes`);
-    setTraversalResult([]);
-    setHighlightedNodes([]);
-    setSteps(0);
-  };
-
-  // Reset everything
-  const reset = () => {
-    if (animationRef.current) {
-      clearTimeout(animationRef.current);
-    }
-    setRoot(null);
-    setInputValue('');
-    setIsAnimating(false);
-    setMessage('Tree is empty');
-    setTraversalResult([]);
-    setHighlightedNodes([]);
-    setSteps(0);
-  };
-
-  // In-order traversal with animation tracking
-  const inOrderTraversal = (node, path = []) => {
-    if (!node) return path;
-    
-    const leftPath = inOrderTraversal(node.left, path);
-    leftPath.push({ 
-      value: node.value, 
-      action: 'visit',
-      highlighted: true 
-    });
-    return inOrderTraversal(node.right, leftPath);
-  };
-
-  const visualizeInOrder = () => {
-    if (!root) {
-      setMessage('Tree is empty!');
-      return;
-    }
-
-    setIsAnimating(true);
-    setMessage('Performing in-order traversal...');
-    setTraversalResult([]);
-    setHighlightedNodes([]);
-    setSteps(0);
-
-    const traversalPath = inOrderTraversal(root);
-    let step = 0;
-
-    const animateStep = () => {
-      if (step < traversalPath.length) {
-        const current = traversalPath[step];
-        setHighlightedNodes([current.value]);
-        setTraversalResult(prev => [...prev, current.value]);
-        setSteps(step + 1);
-        step++;
-        animationRef.current = setTimeout(animateStep, 1000 / speed);
-      } else {
-        setMessage(`In-order traversal complete: [${traversalPath.map(n => n.value).join(', ')}]`);
-        setIsAnimating(false);
-        setHighlightedNodes([]);
-      }
-    };
-
-    animateStep();
-  };
-
-  // Render tree as SVG with centered layout
-  const renderTree = (node, x = 400, y = 50, level = 0, nodes = [], edges = []) => {
-    if (!node) return { nodes, edges };
-
-    const nodeRadius = 25;
-    const xOffset = Math.max(50, 200 / (level + 1)); // Dynamic spacing
-    const yOffset = 80;
-
-    nodes.push({
-      value: node.value,
-      x,
-      y,
-      highlighted: highlightedNodes.includes(node.value),
-    });
-
-    if (node.left) {
-      const leftX = x - xOffset;
-      const leftY = y + yOffset;
-      edges.push({
-        x1: x,
-        y1: y + nodeRadius,
-        x2: leftX,
-        y2: leftY - nodeRadius,
-      });
-      renderTree(node.left, leftX, leftY, level + 1, nodes, edges);
-    }
-
-    if (node.right) {
-      const rightX = x + xOffset;
-      const rightY = y + yOffset;
-      edges.push({
-        x1: x,
-        y1: y + nodeRadius,
-        x2: rightX,
-        y2: rightY - nodeRadius,
-      });
-      renderTree(node.right, rightX, rightY, level + 1, nodes, edges);
-    }
-
-    return { nodes, edges };
-  };
-
-  const { nodes, edges } = root ? renderTree(root) : { nodes: [], edges: [] };
-
-  // Calculate SVG dimensions based on tree size
-  const getSvgDimensions = () => {
-    if (nodes.length === 0) return { width: 800, height: 400 };
-    
-    const xValues = nodes.map(node => node.x);
-    const yValues = nodes.map(node => node.y);
-    const padding = 50;
-    
-    return {
-      width: Math.max(800, Math.max(...xValues) - Math.min(...xValues) + 2 * padding),
-      height: Math.max(400, Math.max(...yValues) + 2 * padding)
-    };
-  };
-
-  const svgDimensions = getSvgDimensions();
-
-  // Clean up on unmount
-  useEffect(() => {
-    return () => {
-      if (animationRef.current) {
-        clearTimeout(animationRef.current);
-      }
-    };
-  }, []);
-
-  return (
-    <div className="min-h-screen mt-16 bg-gray-100 dark:bg-black text-gray-800 dark:text-gray-200">
-      <Navbar />
-      <main className="container mx-auto px-4 sm:px-6 py-8">
-        <div className="text-center mb-8">
-          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-2">
-            <span className="text-blue-600 dark:text-blue-600">In-Order Traversal</span> Visualizer
-          </h1>
-          <p className="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
-            Visualize how in-order traversal visits nodes in a binary search tree
-          </p>
-        </div>
-
-        {/* Controls */}
-        <div className="bg-white dark:bg-gray-800 p-4 sm:p-6 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mb-6">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-            <div>
-              <button
-                onClick={generateRandomTree}
-                disabled={isAnimating}
-                className="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg disabled:opacity-50 transition-colors mb-2"
-              >
-                Generate Random Tree
-              </button>
-              <div className="flex gap-2">
-                <input
-                  type="number"
-                  value={inputValue}
-                  onChange={(e) => setInputValue(e.target.value)}
-                  placeholder="Enter number"
-                  className="flex-1 p-2 border rounded-lg dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
-                  disabled={isAnimating}
-                  onKeyPress={(e) => e.key === 'Enter' && handleInsert()}
-                />
-                <button
-                  onClick={handleInsert}
-                  disabled={isAnimating}
-                  className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg disabled:opacity-50 transition-colors"
-                >
-                  Insert
-                </button>
-              </div>
-            </div>
-            <div className="flex flex-col gap-2">
-              <button
-                onClick={visualizeInOrder}
-                disabled={!root || isAnimating}
-                className="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg disabled:opacity-50 transition-colors"
-              >
-                {isAnimating ? "Traversing..." : "Start Traversal"}
-              </button>
-              <button
-                onClick={reset}
-                className="w-full bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition-colors"
-              >
-                Reset All
-              </button>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div className="flex items-center gap-3">
-              <span className="text-gray-700 dark:text-gray-300 text-sm">Speed:</span>
-              <input
-                type="range"
-                min="0.5"
-                max="5"
-                step="0.5"
-                value={speed}
-                onChange={(e) => setSpeed(parseFloat(e.target.value))}
-                className="flex-1"
-                disabled={isAnimating}
-              />
-              <span className="text-gray-700 dark:text-gray-300 text-sm w-8">{speed}x</span>
-            </div>
-            <div className="flex gap-4">
-              <div className="flex-1 bg-gray-100 dark:bg-gray-700 p-2 rounded-lg text-center">
-                <div className="text-xs text-gray-500 dark:text-gray-400">Nodes</div>
-                <div className="font-bold">{nodes.length}</div>
-              </div>
-              <div className="flex-1 bg-gray-100 dark:bg-gray-700 p-2 rounded-lg text-center">
-                <div className="text-xs text-gray-500 dark:text-gray-400">Steps</div>
-                <div className="font-bold">{steps}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Status Message */}
-        <div className={`mb-6 p-3 rounded-lg text-center ${
-          message.includes('complete') ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200' :
-          isAnimating ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200' :
-          'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200'
-        }`}>
-          {message}
-        </div>
-
-        {/* Tree Visualization */}
-        <div className="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mb-6">
-          <h2 className="text-lg font-semibold mb-3">Tree Visualization</h2>
-          <div className="min-h-[400px] flex justify-center overflow-auto py-4">
-            {nodes.length > 0 ? (
-              <div className="relative" style={{ minWidth: `${svgDimensions.width}px` }}>
-                <svg 
-                  width={svgDimensions.width} 
-                  height={svgDimensions.height}
-                  viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}
-                  className="mx-auto"
-                >
-                  {edges.map((edge, i) => (
-                    <line
-                      key={i}
-                      x1={edge.x1}
-                      y1={edge.y1}
-                      x2={edge.x2}
-                      y2={edge.y2}
-                      stroke="#94a3b8"
-                      strokeWidth="2"
-                      className="dark:stroke-gray-600"
-                    />
-                  ))}
-                  {nodes.map((node, i) => (
-                    <g key={i}>
-                      <circle
-                        cx={node.x}
-                        cy={node.y}
-                        r="22"
-                        fill={node.highlighted ? "#f59e0b" : "#3b82f6"}
-                        stroke={node.highlighted ? "#d97706" : "#1d4ed8"}
-                        strokeWidth="2"
-                        className={`transition-colors ${node.highlighted ? "animate-pulse" : ""}`}
-                      />
-                      <text
-                        x={node.x}
-                        y={node.y + 5}
-                        textAnchor="middle"
-                        fill="white"
-                        fontSize="13"
-                        fontWeight="600"
-                      >
-                        {node.value}
-                      </text>
-                    </g>
-                  ))}
-                </svg>
-              </div>
-            ) : (
-              <div className="w-full h-full flex items-center justify-center text-gray-500 dark:text-gray-400 border-2 border-dashed rounded-lg dark:border-gray-700">
-                {isAnimating ? "Traversing..." : "No tree generated yet"}
-              </div>
-            )}
-          </div>
-
-          {traversalResult.length > 0 && (
-            <div className="mt-4 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800 text-center">
-              <span className="font-medium">Path: </span>
-              <span className="text-green-700 dark:text-green-300">[{traversalResult.join(', ')}]</span>
-            </div>
-          )}
-        </div>
-
-        {/* Explanation Panel - Now below the tree */}
-        <div className="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
-          <h2 className="text-lg font-semibold mb-3">About In-Order Traversal</h2>
-          <div className="space-y-4">
-            <div className="prose dark:prose-invert text-sm">
-              <p>Visits nodes in the order:</p>
-              <ol className="pl-5 space-y-1">
-                <li>Left subtree</li>
-                <li>Root node</li>
-                <li>Right subtree</li>
-              </ol>
-              <p className="mt-2">For BSTs, this produces nodes in sorted order.</p>
-            </div>
-
-            <div className="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-lg border border-blue-200 dark:border-blue-700">
-              <h3 className="font-medium text-sm text-blue-800 dark:text-blue-200 mb-2">Algorithm:</h3>
-              <pre className="text-xs bg-gray-100 dark:bg-gray-700 p-2 rounded overflow-x-auto">
-{`function inOrder(node) {
-  if (node !== null) {
-    inOrder(node.left);
-    visit(node);
-    inOrder(node.right);
-  }
-}`}
-              </pre>
-            </div>
-
-            <div className="grid grid-cols-2 gap-2 text-xs">
-              <div className="bg-gray-100 dark:bg-gray-700 p-2 rounded-lg text-center">
-                <div className="text-gray-500 dark:text-gray-400">Time</div>
-                <div className="font-bold">O(n)</div>
-              </div>
-              <div className="bg-gray-100 dark:bg-gray-700 p-2 rounded-lg text-center">
-                <div className="text-gray-500 dark:text-gray-400">Space</div>
-                <div className="font-bold">O(h)</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-      <div className="border-t border-gray-300 dark:border-gray-700 mt-8"></div>
-      <Footer />
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/app/visualizer/trees/traversing/in-order/page.jsx b/app/visualizer/trees/traversing/in-order/page.jsx
deleted file mode 100755
index 2c87be6e4..000000000
--- a/app/visualizer/trees/traversing/in-order/page.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Animation from "@/app/visualizer/trees/traversing/in-order/animation";
-
-export const metadata = {
-  title: 'Tree Visualizer | Learn Tree Data Structures with Animation',
-  description: 'Visualize how Tree Data Structures work in DSA with interactive animations. Perfect for beginners and interview prep.',
-  keywords: ['Tree DSA', 'Tree Visualizer', 'Learn Tree', 'Binary Tree', 'DSA Animation'],
-  robots: "index, follow",
-};
-
-const TreeVisualizer = () => {
-  return (
-    <Animation />
-  );
-};
-
-export default TreeVisualizer;
\ No newline at end of file
diff --git a/arena-socket-server/.gitignore b/arena-socket-server/.gitignore
new file mode 100644
index 000000000..c2658d7d1
--- /dev/null
+++ b/arena-socket-server/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/arena-socket-server/cors.test.js b/arena-socket-server/cors.test.js
new file mode 100644
index 000000000..f0f04e80a
--- /dev/null
+++ b/arena-socket-server/cors.test.js
@@ -0,0 +1,113 @@
+const { describe, it } = require("node:test");
+const assert = require("node:assert");
+const http = require("http");
+const express = require("express");
+const cors = require("cors");
+
+const ALLOWED_ORIGINS = [
+  "http://localhost:3000",
+  "http://127.0.0.1:3000",
+  "https://algobuddy.vercel.app",
+  "https://www.algobuddy.me",
+  "https://algobuddy.me",
+];
+
+function isAllowedVercelOrigin(origin) {
+  try {
+    const url = new URL(origin);
+    const hostname = url.hostname.toLowerCase();
+    return hostname === 'algobuddy.vercel.app' ||
+           hostname.endsWith('.algobuddy.vercel.app');
+  } catch {
+    return false;
+  }
+}
+
+function createTestApp() {
+  const app = express();
+  app.use(cors({
+    origin: (origin, callback) => {
+      if (!origin) {
+        return callback(new Error("Not allowed by CORS"));
+      }
+      if (ALLOWED_ORIGINS.includes(origin) || isAllowedVercelOrigin(origin)) {
+        callback(null, true);
+      } else {
+        callback(new Error("Not allowed by CORS"));
+      }
+    },
+    methods: ["GET", "POST"],
+  }));
+  app.get("/health", (_req, res) => res.json({ status: "ok" }));
+  return app;
+}
+
+function makeRequest(origin) {
+  return new Promise((resolve, reject) => {
+    const app = createTestApp();
+    const server = app.listen(0, () => {
+      const { port } = server.address();
+      const req = http.request({
+        hostname: "127.0.0.1",
+        port,
+        path: "/health",
+        method: "GET",
+        headers: origin ? { origin } : {},
+      }, (res) => {
+        let body = "";
+        res.on("data", (c) => body += c);
+        res.on("end", () => {
+          server.close();
+          resolve({ status: res.statusCode, headers: res.headers, body });
+        });
+      });
+      req.on("error", (err) => {
+        server.close();
+        reject(err);
+      });
+      req.end();
+    });
+  });
+}
+
+describe("CORS origin validation", () => {
+  for (const origin of ALLOWED_ORIGINS) {
+    it(`allows requests from ${origin}`, async () => {
+      const result = await makeRequest(origin);
+      assert.strictEqual(result.status, 200);
+      assert.strictEqual(result.headers["access-control-allow-origin"], origin);
+    });
+  }
+
+  it("rejects requests with no Origin header", async () => {
+    const result = await makeRequest(null);
+    assert.strictEqual(result.status, 500);
+  });
+
+  it("rejects requests from disallowed origins", async () => {
+    const result = await makeRequest("https://evil.com");
+    assert.strictEqual(result.status, 500);
+  });
+
+  it("allows requests from algobuddy.vercel.app subdomains", async () => {
+    const result = await makeRequest("https://my-branch.algobuddy.vercel.app");
+    assert.strictEqual(result.status, 200);
+    assert.strictEqual(result.headers["access-control-allow-origin"], "https://my-branch.algobuddy.vercel.app");
+  });
+
+  it("allows requests from nested algobuddy.vercel.app subdomains", async () => {
+    const result = await makeRequest("https://preview.my-branch.algobuddy.vercel.app");
+    assert.strictEqual(result.status, 200);
+    assert.strictEqual(result.headers["access-control-allow-origin"], "https://preview.my-branch.algobuddy.vercel.app");
+  });
+
+  it("rejects requests from arbitrary vercel.app subdomains", async () => {
+    const result = await makeRequest("https://evil.vercel.app");
+    assert.strictEqual(result.status, 500);
+  });
+
+  it("rejects requests from unrelated vercel.app subdomains", async () => {
+    const result = await makeRequest("https://attacker-deployment.vercel.app");
+    assert.strictEqual(result.status, 500);
+  });
+});
diff --git a/arena-socket-server/index.js b/arena-socket-server/index.js
new file mode 100644
index 000000000..bb1704a41
--- /dev/null
+++ b/arena-socket-server/index.js
@@ -0,0 +1,1147 @@
+require("dotenv").config({ path: '../.env.local' });
+const express = require("express");
+const http = require("http");
+const crypto = require("crypto");
+const { Server } = require("socket.io");
+const cors = require("cors");
+const jwt = require("jsonwebtoken");
+const jwksClient = require('jwks-rsa');
+const redisUrl = process.env.REDIS_URL;
+const Redis = redisUrl ? require("ioredis") : require("ioredis-mock");
+const { createAdapter } = require("@socket.io/redis-adapter");
+
+class BoundedMap {
+  constructor(maxSize = 10000) {
+    this.maxSize = maxSize;
+    this._map = new Map();
+  }
+  get(key) {
+    const value = this._map.get(key);
+    if (value !== undefined) {
+      this._map.delete(key);
+      this._map.set(key, value);
+    }
+    return value;
+  }
+  set(key, value) {
+    if (this._map.has(key)) {
+      this._map.delete(key);
+    } else if (this._map.size >= this.maxSize) {
+      const oldest = this._map.keys().next().value;
+      if (oldest !== undefined) this._map.delete(oldest);
+    }
+    this._map.set(key, value);
+  }
+  delete(key) {
+    return this._map.delete(key);
+  }
+  entries() {
+    return this._map.entries();
+  }
+  get size() {
+    return this._map.size;
+  }
+}
+
+const app = express();
+const ALLOWED_ORIGINS = [
+  "http://localhost:3000",
+  "http://127.0.0.1:3000",
+  "https://algobuddy.vercel.app",
+  "https://www.algobuddy.me",
+  "https://algobuddy.me"
+];
+
+function isAllowedVercelOrigin(origin) {
+  try {
+    const url = new URL(origin);
+    const hostname = url.hostname.toLowerCase();
+    return hostname === 'algobuddy.vercel.app' ||
+      hostname.endsWith('.algobuddy.vercel.app');
+  } catch {
+    return false;
+  }
+}
+
+// Only used outside production, and only for an exact host:port a
+// developer opts into via LAN_DEV_ORIGIN — never a whole /16 CIDR range.
+const LAN_DEV_ORIGIN = process.env.LAN_DEV_ORIGIN || null;
+const isProduction = process.env.NODE_ENV === "production";
+
+function isOriginAllowed(origin, callback) {
+  // Allow requests with no origin (Render health checks, server-to-server)
+  if (!origin) return callback(null, true);
+
+  if (
+    ALLOWED_ORIGINS.includes(origin) ||
+    isAllowedVercelOrigin(origin) ||
+    origin.startsWith("http://localhost:") ||
+    origin.startsWith("http://127.0.0.1:")
+  ) {
+    return callback(null, true);
+  }
+
+  // SECURITY: the previous `origin.startsWith("http://192.168.")` check
+  // trusted the ENTIRE private 192.168.0.0/16 range (65k+ hosts) as a
+  // valid Socket.IO origin in production — any page hosted by another
+  // device on a shared network (coffee shop, campus, office Wi-Fi) would
+  // be treated as trusted, enabling cross-site WebSocket hijacking. LAN
+  // testing is now opt-in, non-production only, and pinned to one exact
+  // origin via LAN_DEV_ORIGIN instead of a whole CIDR block.
+  if (!isProduction && LAN_DEV_ORIGIN && origin === LAN_DEV_ORIGIN) {
+    return callback(null, true);
+  }
+
+  callback(new Error("Not allowed by CORS"));
+}
+
+app.use(cors({
+  origin: isOriginAllowed,
+  methods: ["GET", "POST"],
+}));
+
+const server = http.createServer(app);
+
+// Redis setup
+const pubClient = redisUrl ? new Redis(redisUrl) : new Redis();
+const subClient = pubClient.duplicate();
+const redisClient = pubClient.duplicate();
+
+// Phase 1: Atomically pop an opponent from the queue WITHOUT creating match state
+const ATOMIC_POP_OPPONENT_SCRIPT = `
+  local cjson = require("cjson")
+  local queueKey = KEYS[1]
+  local socketKey = KEYS[2]
+  local entry = ARGV[1]
+  local userId = ARGV[2]
+  local socketId = ARGV[3]
+  local maxAttempts = tonumber(ARGV[4]) or 5
+
+  local existingQueueKey = redis.call('HGET', socketKey, 'queueKey')
+  if existingQueueKey then
+    local elements = redis.call('LRANGE', existingQueueKey, 0, -1)
+    if elements and #elements > 0 then
+      for i = 1, #elements do
+        local el = cjson.decode(elements[i])
+        if el.socketId == socketId or el.userId == userId then
+          redis.call('LREM', existingQueueKey, 0, elements[i])
+        end
+      end
+    end
+  end
+
+  local skipList = {}
+  for attempt = 1, maxAttempts do
+    local opponentStr = redis.call('LPOP', queueKey)
+    if not opponentStr then
+      break
+    end
+
+    local opp = cjson.decode(opponentStr)
+    if opp.userId == userId then
+      table.insert(skipList, opponentStr)
+    else
+      for i = #skipList, 1, -1 do
+        redis.call('RPUSH', queueKey, skipList[i])
+      end
+      redis.call('HSET', socketKey, 'queueKey', queueKey)
+      return cjson.encode({
+        status = "MATCH_FOUND",
+        opponent = {
+          userId = opp.userId,
+          socketId = opp.socketId,
+          name = opp.name or "Player",
+          rating = tonumber(opp.rating) or 1200,
+          level = tonumber(opp.level) or 1
+        }
+      })
+    end
+  end
+
+  for i = #skipList, 1, -1 do
+    redis.call('RPUSH', queueKey, skipList[i])
+  end
+
+  local elements = redis.call('LRANGE', queueKey, 0, -1)
+  if elements and #elements > 0 then
+    for i = 1, #elements do
+      local el = cjson.decode(elements[i])
+      if el.socketId == socketId or el.userId == userId then
+        redis.call('LREM', queueKey, 0, elements[i])
+      end
+    end
+  end
+  redis.call('RPUSH', queueKey, entry)
+  redis.call('HSET', socketKey, 'queueKey', queueKey)
+  return cjson.encode({ status = "QUEUED" })
+`;
+
+      // Phase 2: Atomically create match state (only called after JS confirms liveness)
+      const ATOMIC_CREATE_MATCH_SCRIPT = `
+  local matchKey = KEYS[1]
+  local socketKey = KEYS[2]
+  local oppKey = KEYS[3]
+  local matchDetails = ARGV[1]
+
+  local created = redis.call('SET', matchKey, matchDetails, 'NX', 'EX', 3600)
+  if created then
+    redis.call('HSET', socketKey, 'matchId', matchKey)
+    redis.call('HSET', oppKey, 'matchId', matchKey)
+    redis.call('HDEL', socketKey, 'queueKey')
+    redis.call('HDEL', oppKey, 'queueKey')
+    return '{"status":"CREATED"}'
+  end
+  return '{"status":"FAILED"}'
+`;
+
+const ATOMIC_LEAVE_MATCHMAKING_SCRIPT = `
+  local cjson = require("cjson")
+  local socketKey = KEYS[1]
+  local userId = ARGV[1]
+  local socketId = ARGV[2]
+
+  local existingQueueKey = redis.call('HGET', socketKey, 'queueKey')
+  if existingQueueKey then
+    local elements = redis.call('LRANGE', existingQueueKey, 0, -1)
+    if elements and #elements > 0 then
+      for i = 1, #elements do
+        local el = cjson.decode(elements[i])
+        if el.socketId == socketId or el.userId == userId then
+          redis.call('LREM', existingQueueKey, 0, elements[i])
+        end
+      end
+    end
+    redis.call('HDEL', socketKey, 'queueKey')
+  end
+  return 1
+`;
+
+// Unified atomic match update script — handles both "complete" and "disconnect"
+// without race conditions. Using a single script eliminates the TOCTOU gap
+// between separate disconnect and complete scripts.
+const ATOMIC_MATCH_UPDATE_SCRIPT = `
+  local cjson = require("cjson")
+  local matchKey = KEYS[1]
+  local action = ARGV[1]
+  local actorUserId = ARGV[2]
+
+  local matchStr = redis.call('GET', matchKey)
+  if not matchStr then return cjson.encode({ status = "not_found" }) end
+
+  local match = cjson.decode(matchStr)
+
+  -- Check if the match is already finalized
+  if match.status == "completed" then
+    return cjson.encode({ status = "already_completed" })
+  end
+  if action == "disconnect" and match.status == "disconnected" then
+    return cjson.encode({ status = "already_disconnected" })
+  end
+
+  if action == "complete" then
+    match.status = "completed"
+    match.winnerId = actorUserId
+    redis.call('SET', matchKey, cjson.encode(match), 'EX', 3600)
+    -- Extract opponent socketId for notification
+    local opponentSocketId = ''
+    if match.players then
+      for _, p in ipairs(match.players) do
+        if p.userId ~= actorUserId then
+          opponentSocketId = p.socketId
+        end
+      end
+    end
+    return cjson.encode({ status = "completed", winnerId = actorUserId, opponentSocketId = opponentSocketId })
+
+  elseif action == "disconnect" then
+    match.status = "disconnected"
+    -- Award win to the remaining player
+    if match.players then
+      for _, p in ipairs(match.players) do
+        if p.userId ~= actorUserId then
+          match.winnerId = p.userId
+        end
+      end
+    end
+    redis.call('SET', matchKey, cjson.encode(match), 'EX', 3600)
+    -- Extract opponent info
+    local opponentSocketId = ''
+    local opponentUserId = ''
+    if match.players then
+      for _, p in ipairs(match.players) do
+        if p.userId ~= actorUserId then
+          opponentUserId = p.userId
+          opponentSocketId = p.socketId
+        end
+      end
+    end
+    return cjson.encode({ status = "disconnected", opponentSocketId = opponentSocketId, opponentUserId = opponentUserId })
+  end
+  return cjson.encode({ status = "unknown_action" })
+`;
+
+const io = new Server(server, {
+  cors: {
+    origin: isOriginAllowed,
+    methods: ["GET", "POST"],
+  },
+  adapter: createAdapter(pubClient, subClient)
+});
+
+io.use((socket, next) => {
+  const headers = socket.handshake.headers || {};
+  const realIp = headers["x-real-ip"];
+  const ip = (realIp && typeof realIp === "string") ? realIp.trim() : socket.handshake.address;
+  if (isConnectionRateLimited(ip)) {
+    return next(new Error("Rate limited"));
+  }
+  next();
+});
+
+const PORT = process.env.PORT || 4000;
+
+// JWT Authentication
+const SUPABASE_URL = process.env.SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL;
+
+const client = jwksClient({
+  jwksUri: `${SUPABASE_URL}/auth/v1/.well-known/jwks.json`
+});
+
+function getKey(header, callback) {
+  client.getSigningKey(header.kid, function (err, key) {
+    if (err) {
+      callback(err, null);
+      return;
+    }
+    const signingKey = key.publicKey || key.rsaPublicKey;
+    callback(null, signingKey);
+  });
+}
+
+function verifyAuthToken(token) {
+  return new Promise((resolve) => {
+    if (!token || !SUPABASE_URL) {
+      resolve(null);
+      return;
+    }
+    jwt.verify(token, getKey, { algorithms: ["ES256", "RS256"] }, function (err, decoded) {
+      if (err) {
+        resolve(null);
+      } else {
+        resolve(decoded);
+      }
+    });
+  });
+}
+
+// Connection rate limiting to prevent JWT brute-forcing
+const connectionAttempts = new BoundedMap(10000);
+const MAX_CONNECTION_ATTEMPTS = 5;
+const CONNECTION_ATTEMPT_WINDOW_MS = 60000;
+
+function isConnectionRateLimited(ip) {
+  const now = Date.now();
+  const entry = connectionAttempts.get(ip);
+  if (!entry || now > entry.resetTime) {
+    connectionAttempts.set(ip, { count: 1, resetTime: now + CONNECTION_ATTEMPT_WINDOW_MS });
+    return false;
+  }
+  entry.count++;
+  return entry.count > MAX_CONNECTION_ATTEMPTS;
+}
+
+// Periodic queue health checker to remove stale entries from matchmaking queues
+setInterval(async () => {
+  try {
+    const queueKeys = [];
+    let cursor = '0';
+    do {
+      const result = await redisClient.scan(cursor, 'MATCH', '{arena}:queue:*', 'COUNT', 100);
+      cursor = result[0];
+      for (const key of result[1]) {
+        const elements = await redisClient.lrange(key, 0, -1);
+        let changed = false;
+        let remainingCount = elements.length;
+        for (const el of elements) {
+          let parsed;
+          try {
+            parsed = JSON.parse(el);
+          } catch (parseErr) {
+            console.error('[queue-health] Corrupted queue entry, removing:', el.slice(0, 100));
+            await redisClient.lrem(key, 0, el);
+            changed = true;
+            remainingCount--;
+            continue;
+          }
+          if (parsed.expiresAt && Date.now() > parsed.expiresAt) {
+            await redisClient.lrem(key, 0, el);
+            changed = true;
+            remainingCount--;
+            continue;
+          }
+          const socket = io.sockets.sockets.get(parsed.socketId);
+          if (!socket || !socket.connected) {
+            await redisClient.lrem(key, 0, el);
+            changed = true;
+            remainingCount--;
+          }
+        }
+        if (changed && remainingCount === 0) {
+          await redisClient.expire(key, 60);
+        }
+      }
+    } while (cursor !== '0');
+  } catch (err) {
+    console.error('[queue-health] Error cleaning stale entries:', err.message);
+  }
+}, 30000);
+
+// Rate Limiting Config (Redis-backed token bucket)
+const MAX_TOKENS = 10;
+const REFILL_RATE_MS = 200;
+
+async function isRateLimited(userId) {
+  const key = `{arena}:ratelimit:${userId}`;
+  const now = Date.now();
+
+  const script = `
+    local key = KEYS[1]
+    local now = tonumber(ARGV[1])
+    local max_tokens = tonumber(ARGV[2])
+    local refill_rate = tonumber(ARGV[3])
+    
+    local data = redis.call('HMGET', key, 'tokens', 'lastRequestTime')
+    local tokens = tonumber(data[1])
+    local lastRequestTime = tonumber(data[2])
+    
+    if not tokens then
+      redis.call('HMSET', key, 'tokens', max_tokens - 1, 'lastRequestTime', now)
+      redis.call('EXPIRE', key, 60)
+      return 0
+    end
+    
+    local timePassed = now - lastRequestTime
+    local tokensToAdd = math.floor(timePassed / refill_rate)
+    
+    if tokensToAdd > 0 then
+      tokens = math.min(max_tokens, tokens + tokensToAdd)
+      lastRequestTime = now
+    end
+    
+    if tokens > 0 then
+      redis.call('HMSET', key, 'tokens', tokens - 1, 'lastRequestTime', lastRequestTime)
+      redis.call('EXPIRE', key, 60)
+      return 0
+    end
+    return 1
+  `;
+
+  const result = await redisClient.eval(script, 1, key, now, MAX_TOKENS, REFILL_RATE_MS);
+  return result === 1;
+}
+
+// Spectator rate limiting to prevent chat spam
+const spectatorRateLimit = new BoundedMap(5000);
+
+function isSpectatorRateLimited(userId) {
+  const key = `chat:${userId}`;
+  const entry = spectatorRateLimit.get(key);
+  if (!entry || Date.now() > entry.resetTime) {
+    spectatorRateLimit.set(key, { count: 1, resetTime: Date.now() + 10000 });
+    return false;
+  }
+  entry.count++;
+  return entry.count > 5;
+}
+
+io.on("connection", async (socket) => {
+  // Verify Supabase JWT from handshake auth using JWKS
+  const token = socket.handshake.auth?.token;
+  const authPayload = await verifyAuthToken(token);
+  
+  if (!authPayload) {
+    socket.data.userId = `spectator_${crypto.randomUUID()}`;
+    socket.data.isSpectator = true;
+    console.log(`Spectator connected: ${socket.id}`);
+  } else {
+    // Store verified userId from the JWT payload
+    socket.data.userId = authPayload.sub || authPayload.id;
+    socket.data.token = token;
+    console.log(`Authenticated user connected: ${socket.id}, userId: ${socket.data.userId}`);
+  }
+
+  await redisClient.hset(`{arena}:socket:${socket.id}`, 'connected', '1');
+
+  socket.on("join_matchmaking", async (data) => {
+    if (socket.data.isSpectator) return;
+    let opponent = null;
+    try {
+      if (await isRateLimited(socket.data.userId)) return;
+
+      console.log(`User joined matchmaking: userId=${socket.data.userId}`);
+      const targetTopic = data.topic || "Arrays";
+      const targetDifficulty = data.difficulty || "Easy";
+      const queueKey = `{arena}:queue:${targetTopic}:${targetDifficulty}`;
+      const matchId = `match-${Date.now()}-${crypto.randomUUID().split('-')[0]}`;
+      const matchKey = `{arena}:match:${matchId}`;
+
+      const queueEntry = JSON.stringify({
+        ...data,
+        userId: socket.data.userId,
+        topic: targetTopic,
+        difficulty: targetDifficulty,
+        socketId: socket.id,
+      });
+
+      // Phase 1: Atomically pop opponent from queue (no match state created yet)
+      const resultStr = await redisClient.eval(
+        ATOMIC_POP_OPPONENT_SCRIPT,
+        2,
+        queueKey,
+        `{arena}:socket:${socket.id}`,
+        queueEntry,
+        socket.data.userId,
+        socket.id,
+        5,
+      );
+
+      const result = JSON.parse(resultStr);
+
+      if (result.status === 'MATCH_FOUND') {
+        opponent = result.opponent;
+
+        // Phase 2: Cross-instance liveness check via Redis
+        const opponentAlive = await redisClient.exists(`{arena}:socket:${opponent.socketId}`);
+        if (!opponentAlive) {
+          const opponentEntry = JSON.stringify({
+            userId: opponent.userId,
+            socketId: opponent.socketId,
+            name: opponent.name || "Player",
+            rating: opponent.rating || 1200,
+            level: opponent.level || 1,
+            topic: targetTopic,
+            difficulty: targetDifficulty,
+          });
+          await redisClient.rpush(queueKey, opponentEntry);
+          console.log(`Opponent disconnected, re-queued opponent: ${opponent.userId}`);
+
+          // Re-queue the requesting player so they can be matched next cycle
+          const reQueueEntry = JSON.stringify({
+            userId: socket.data.userId,
+            socketId: socket.id,
+            name: socket.data.name || "Player",
+            rating: socket.data.rating || 1200,
+            level: socket.data.level || 1,
+            topic: targetTopic,
+            difficulty: targetDifficulty,
+          });
+          await redisClient.rpush(queueKey, reQueueEntry);
+          await redisClient.hset(`{arena}:socket:${socket.id}`, 'queueKey', queueKey);
+
+          socket.emit("matchmaking_retry", { message: "Opponent unavailable, searching for another..." });
+          return;
+        }
+
+        // Phase 3: Create match atomically (only if opponent is alive)
+        const fullMatchDetails = JSON.stringify({
+          matchId,
+          topic: targetTopic,
+          difficulty: targetDifficulty,
+          status: "in-progress",
+          players: [
+            { userId: opponent.userId, name: opponent.name, socketId: opponent.socketId },
+            { userId: socket.data.userId, name: data.name || "Player", socketId: socket.id },
+          ],
+        });
+
+        const createResult = await redisClient.eval(
+          ATOMIC_CREATE_MATCH_SCRIPT,
+          3,
+          matchKey,
+          `{arena}:socket:${socket.id}`,
+          `{arena}:socket:${opponent.socketId}`,
+          fullMatchDetails,
+        );
+
+        const createParsed = JSON.parse(createResult);
+
+        if (createParsed.status === 'CREATED') {
+          const fullMatch = JSON.parse(fullMatchDetails);
+          io.to(opponent.socketId).emit("match_found", fullMatch);
+          io.to(socket.id).emit("match_found", fullMatch);
+
+          socket.join(matchId);
+          io.in(opponent.socketId).socketsJoin(matchId);
+
+          console.log(`Match found: ${opponent.userId} vs ${socket.data.userId}`);
+        } else {
+          const opponentEntry = JSON.stringify({
+            userId: opponent.userId,
+            socketId: opponent.socketId,
+            name: opponent.name || "Player",
+            rating: opponent.rating || 1200,
+            level: opponent.level || 1,
+            topic: targetTopic,
+            difficulty: targetDifficulty,
+          });
+          await redisClient.rpush(queueKey, opponentEntry);
+          console.log(`Match creation failed (status: ${createParsed.status}), re-queued opponent: ${opponent.userId}`);
+          socket.emit("matchmaking_error", { message: "Could not create match. Please try again." });
+        }
+      } else {
+        console.log(`Added to queue ${queueKey}`);
+      }
+    } catch (error) {
+      console.error(`[join_matchmaking] Error for user ${socket.data.userId}:`, error);
+      if (opponent) {
+        const opponentEntry = JSON.stringify({
+          userId: opponent.userId,
+          socketId: opponent.socketId,
+          name: opponent.name || "Player",
+          rating: opponent.rating || 1200,
+          level: opponent.level || 1,
+          topic: targetTopic,
+          difficulty: targetDifficulty,
+        });
+        await redisClient.rpush(queueKey, opponentEntry);
+        console.log(`Error during matchmaking, re-queued opponent: ${opponent.userId}`);
+      }
+      socket.emit("error", { message: "Matchmaking error. Please try again." });
+    }
+  });
+
+  socket.on("leave_matchmaking", async () => {
+    if (socket.data.isSpectator) return;
+    try {
+      if (await isRateLimited(socket.data.userId)) return;
+      await redisClient.eval(
+        ATOMIC_LEAVE_MATCHMAKING_SCRIPT,
+        1,
+        `{arena}:socket:${socket.id}`,
+        socket.data.userId,
+        socket.id,
+      );
+    } catch (error) {
+      console.error(`[leave_matchmaking] Error for user ${socket.data.userId}:`, error);
+      socket.emit("error", { message: "Error leaving matchmaking. Please try again." });
+    }
+  });
+
+  socket.on("join_match", async (data) => {
+    if (socket.data.isSpectator) return;
+    try {
+      if (!data.matchId) return;
+      const userMatchId = await redisClient.hget(`{arena}:socket:${socket.id}`, "matchId");
+      if (!userMatchId || userMatchId !== data.matchId) return;
+      const matchStr = await redisClient.get(`{arena}:match:${data.matchId}`);
+      if (!matchStr) return;
+      const match = JSON.parse(matchStr);
+      const isParticipant = match.players && match.players.some(p => p.userId === socket.data.userId);
+      if (!isParticipant) return;
+      
+      socket.join(data.matchId);
+      await redisClient.hset(`{arena}:socket:${socket.id}`, "matchId", data.matchId);
+      console.log(`Player ${socket.data.userId} re-joined match ${data.matchId}`);
+    } catch (error) {
+      console.error(`[join_match] Error for user ${socket.data.userId}:`, error);
+    }
+  });
+
+  socket.on("join_spectator", async (data) => {
+    try {
+      if (!data.matchId) return;
+      const matchStr = await redisClient.get(`{arena}:match:${data.matchId}`);
+      if (!matchStr) return;
+      
+      const room = `${data.matchId}-spectators`;
+      socket.join(room);
+      const sockets = await io.in(room).fetchSockets();
+      io.in(room).emit("spectator_count", { count: sockets.length });
+      console.log(`Spectator ${socket.data.userId} joined match ${data.matchId}`);
+    } catch (error) {
+      console.error(`[join_spectator] Error for user ${socket.data.userId}:`, error);
+    }
+  });
+
+  socket.on("leave_spectator", async (data) => {
+    if (!data.matchId) return;
+    const room = `${data.matchId}-spectators`;
+    socket.leave(room);
+    const sockets = await io.in(room).fetchSockets();
+    io.in(room).emit("spectator_count", { count: sockets.length });
+  });
+
+  // Duel Room Events
+  socket.on("typing_status", async (data) => {
+    if (socket.data.isSpectator) return;
+    try {
+      if (await isRateLimited(socket.data.userId)) return;
+      const matchId = await redisClient.hget(`{arena}:socket:${socket.id}`, "matchId");
+      if (!matchId || matchId !== data.matchId) {
+        console.log(`Player ${socket.data.userId} failed typing_status because matchId doesn't match: expected ${data.matchId}, got ${matchId}`);
+        return;
+      }
+
+      console.log(`Player ${socket.data.userId} emitted typing_status to room ${data.matchId}`);
+      socket.to(data.matchId).emit("opponent_typing_status", {
+        isTyping: data.isTyping,
+        userId: socket.data.userId,
+        linesCoded: data.linesCoded,
+        cpm: data.cpm || 0,
+        language: data.language
+      });
+    } catch (error) {
+      console.error(`[typing_status] Error for user ${socket.data.userId}:`, error);
+    }
+  });
+
+  socket.on("test_submit", async (data) => {
+    if (socket.data.isSpectator) return;
+    try {
+      if (await isRateLimited(socket.data.userId)) return;
+      const matchId = await redisClient.hget(`{arena}:socket:${socket.id}`, "matchId");
+      if (!matchId || matchId !== data.matchId) return;
+
+      socket.to(data.matchId).emit("opponent_test_submit", { 
+        userId: socket.data.userId,
+        failedAttempts: data.failedAttempts
+      });
+    } catch (error) {
+      console.error(`[test_submit] Error for user ${socket.data.userId}:`, error);
+    }
+  });
+
+  socket.on("test_result", async (data) => {
+    if (socket.data.isSpectator) return;
+    try {
+      if (await isRateLimited(socket.data.userId)) return;
+
+      const matchId = await redisClient.hget(`{arena}:socket:${socket.id}`, "matchId");
+      if (!matchId || matchId !== data.matchId) return;
+
+      await redisClient.hset(
+        `{arena}:match:${matchId}:testResults`,
+        socket.data.userId,
+        JSON.stringify({ passed: data.passed, total: data.total, status: data.status, failedAttempts: data.failedAttempts, timestamp: Date.now() })
+      );
+
+      socket.to(data.matchId).emit("opponent_test_result", {
+        userId: socket.data.userId,
+        passed: data.passed,
+        total: data.total,
+        status: data.status,
+        failedAttempts: data.failedAttempts
+      });
+    } catch (error) {
+      console.error(`[test_result] Error for user ${socket.data.userId}:`, error);
+    }
+  });
+
+  socket.on("disconnecting", () => {
+    for (const room of socket.rooms) {
+      if (room.endsWith("-spectators")) {
+        const roomAdapter = io.sockets.adapter.rooms.get(room);
+        if (roomAdapter) {
+          const count = Math.max(0, roomAdapter.size - 1);
+          io.in(room).emit("spectator_count", { count });
+        }
+      }
+    }
+  });
+
+  socket.on("spectator_chat", (data) => {
+    if (!data.matchId || !data.message) return;
+    if (isSpectatorRateLimited(socket.data.userId)) return;
+    if (/<[^>]*>/.test(data.message)) return;
+    if (data.message.length > 500) return;
+    const safeUsername = `Spectator_${socket.id.slice(0, 6)}`;
+    socket.to(data.matchId).emit("spectator_chat", {
+      userId: socket.data.userId,
+      username: safeUsername,
+      message: data.message.slice(0, 500),
+      timestamp: Date.now()
+    });
+  });
+
+  const ALLOWED_EMOTES = new Set(['clap', 'laugh', 'cheer', 'boo', 'wave', 'popcorn', 'cry', 'heart', 'fire', 'thumbsup']);
+
+  socket.on("spectator_emote", (data) => {
+    if (!data.matchId || !data.emote) return;
+    if (isSpectatorRateLimited(socket.data.userId)) return;
+    if (typeof data.emote !== 'string') return;
+    if (data.emote.length > 50) return;
+    if (/<[^>]*>/.test(data.emote)) return;
+    const normalized = data.emote.toLowerCase().trim();
+    if (!ALLOWED_EMOTES.has(normalized)) return;
+    socket.to(data.matchId).emit("spectator_emote", {
+      userId: socket.data.userId,
+      emote: data.emote.slice(0, 50),
+      timestamp: Date.now()
+    });
+  });
+
+  socket.on("match_complete", async (data) => {
+    if (socket.data.isSpectator) return;
+    try {
+      if (await isRateLimited(socket.data.userId)) return;
+
+      const matchId = await redisClient.hget(`{arena}:socket:${socket.id}`, "matchId");
+      if (!matchId || matchId !== data.matchId) return;
+
+      try {
+        const testResultsStr = await redisClient.hget(
+          `{arena}:match:${matchId}:testResults`,
+          socket.data.userId
+        );
+
+        if (!testResultsStr) {
+          return socket.emit("error", { message: "Cannot complete match: no test results recorded" });
+        }
+
+        const testResults = JSON.parse(testResultsStr);
+        if (!testResults.passed || testResults.passed < 1) {
+          return socket.emit("error", { message: "Cannot complete match: insufficient test results" });
+        }
+
+        // Server-side verification to prevent client spoofing
+        const initialMatchStr = await redisClient.get(`{arena}:match:${matchId}`);
+        if (!initialMatchStr) {
+          return socket.emit("error", { message: "Cannot complete match: match not found" });
+        }
+        const match = JSON.parse(initialMatchStr);
+        const topic = match.topic || "Arrays";
+        const VERIFIED_TOPICS = new Set(["Arrays", "Strings"]);
+
+        let verificationCode = data.code || "";
+        const lang = (data.language || "javascript").toLowerCase();
+
+        if (!VERIFIED_TOPICS.has(topic)) {
+          return socket.emit("error", { message: `Match topic "${topic}" does not support server-side verification yet.` });
+        }
+
+        if (lang === "javascript" || lang === "js") {
+          if (topic === "Arrays") {
+            verificationCode += `\n;
+if (typeof twoSum !== 'function' || JSON.stringify(twoSum([2,7,11,15], 9)) !== '[0,1]' || JSON.stringify(twoSum([3,2,4], 6)) !== '[1,2]') {
+  throw new Error("Validation test cases failed!");
+}`;
+          } else if (topic === "Strings") {
+            verificationCode += `\n;
+if (typeof isAnagram !== 'function' || isAnagram("anagram", "nagaram") !== true || isAnagram("rat", "car") !== false) {
+  throw new Error("Validation test cases failed!");
+}`;
+          }
+        }
+
+        if (lang === "javascript" || lang === "js") {
+          const origin = socket.handshake.headers.origin || "http://localhost:3000";
+          try {
+            const res = await fetch(`${origin}/api/code-lab`, {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ${socket.data.token}`
+              },
+              body: JSON.stringify({ code: verificationCode })
+            });
+
+            if (!res.ok) {
+              return socket.emit("error", { message: "Server-side code verification failed" });
+            }
+
+            const resData = await res.json();
+            const isSuccess = resData.status === 3 || resData.status === "SUCCESS";
+            if (!isSuccess) {
+              return socket.emit("error", { message: "Your code failed verification test cases!" });
+            }
+          } catch (verErr) {
+            console.error("[match_complete] Code verification request failed:", verErr);
+            return socket.emit("error", { message: "Verification service unavailable" });
+          }
+        }
+
+        const resultStr = await redisClient.eval(
+          ATOMIC_MATCH_UPDATE_SCRIPT,
+          1,
+          `{arena}:match:${matchId}`,
+          "complete",
+          socket.data.userId
+        );
+
+        const result = JSON.parse(resultStr);
+        if (result.status === "already_completed") return;
+        if (result.status === "not_found") return;
+
+        io.in(matchId).emit("match_ended", { winnerId: socket.data.userId });
+
+        // Clean up socket matchId references
+        const matchStr = await redisClient.get(`{arena}:match:${matchId}`);
+        if (matchStr) {
+          const match = JSON.parse(matchStr);
+          for (const p of match.players) {
+            await redisClient.hdel(`{arena}:socket:${p.socketId}`, "matchId");
+          }
+        }
+        await redisClient.expire(`{arena}:match:${matchId}`, 60 * 60);
+        await redisClient.del(`{arena}:match:${matchId}:testResults`);
+      } catch (err) {
+        console.error(`[match_complete] Error for user ${socket.data.userId}:`, err);
+      }
+    } catch (error) {
+      console.error(`[match_complete] Error for user ${socket.data.userId}:`, error);
+    }
+  });
+
+  socket.on("disconnect", async () => {
+    try {
+      // First, clean up queue entries and socket key
+      const existingQueueKey = await redisClient.hget(`{arena}:socket:${socket.id}`, 'queueKey');
+      if (existingQueueKey) {
+        const elements = await redisClient.lrange(existingQueueKey, 0, -1);
+        if (elements && elements.length > 0) {
+          for (const el of elements) {
+            const parsed = JSON.parse(el);
+            if (parsed.socketId === socket.id || parsed.userId === socket.data.userId) {
+              await redisClient.lrem(existingQueueKey, 0, el);
+            }
+          }
+        }
+        await redisClient.hdel(`{arena}:socket:${socket.id}`, 'queueKey');
+      }
+
+      // Update match state atomically via unified script
+      const matchId = await redisClient.hget(`{arena}:socket:${socket.id}`, "matchId");
+      if (matchId) {
+        const resultStr = await redisClient.eval(
+          ATOMIC_MATCH_UPDATE_SCRIPT,
+          1,
+          `{arena}:match:${matchId}`,
+          "disconnect",
+          socket.data.userId
+        );
+
+        const result = JSON.parse(resultStr);
+
+        // Only emit opponent_disconnected if the match was actually set to disconnected
+        // (i.e., not if it was already completed)
+        if (result.status === "disconnected" && result.opponentSocketId && result.opponentUserId) {
+          io.to(result.opponentSocketId).emit("opponent_disconnected", { winnerId: result.opponentUserId });
+        }
+
+        // Clean up socket matchId references
+        for (const sId of [socket.id, result.opponentSocketId].filter(Boolean)) {
+          await redisClient.hdel(`{arena}:socket:${sId}`, 'matchId');
+        }
+      }
+
+      // Clean up socket key (rate limit key expires naturally via TTL)
+      await redisClient.del(`{arena}:socket:${socket.id}`);
+
+      console.log(`User disconnected: ${socket.id}`);
+    } catch (error) {
+      console.error(`[disconnect] Error for user ${socket.id}:`, error);
+    }
+  });
+});
+
+async function scanRedisKeys(pattern) {
+  let cursor = '0';
+  const keys = [];
+  do {
+    const result = await redisClient.scan(cursor, 'MATCH', pattern, 'COUNT', 100);
+    cursor = result[0];
+    keys.push(...result[1]);
+  } while (cursor !== '0');
+  return keys;
+}
+
+async function getRedisAggregateStats() {
+  let totalKeys = 0;
+  let stringCount = 0;
+  let listCount = 0;
+  let hashCount = 0;
+  let otherCount = 0;
+
+  let cursor = '0';
+  do {
+    const result = await redisClient.scan(cursor, 'MATCH', '*', 'COUNT', 100);
+    cursor = result[0];
+    for (const key of result[1]) {
+      totalKeys++;
+      const type = await redisClient.type(key);
+      if (type === 'string') stringCount++;
+      else if (type === 'list') listCount++;
+      else if (type === 'hash') hashCount++;
+      else otherCount++;
+    }
+  } while (cursor !== '0');
+
+  return { totalKeys, stringCount, listCount, hashCount, otherCount };
+}
+
+// Rate limiter for debug endpoint to prevent brute-force discovery of debug key
+const debugRequestCounts = new BoundedMap(10000);
+
+function isDebugRateLimited(ip) {
+  const now = Date.now();
+  const windowMs = 60000;
+  const maxRequests = 5;
+  const entry = debugRequestCounts.get(ip);
+  if (!entry || now > entry.resetTime) {
+    debugRequestCounts.set(ip, { count: 1, resetTime: now + windowMs });
+    return false;
+  }
+  entry.count++;
+  return entry.count > maxRequests;
+}
+
+app.get("/debug", async (req, res) => {
+  try {
+    const debugEnabled = process.env.DEBUG_ENABLED === 'true';
+    if (!debugEnabled) {
+      return res.status(404).json({ error: "Not found" });
+    }
+
+    const debugKey = process.env.DEBUG_KEY;
+    const providedKey = req.headers['x-debug-key'];
+    if (!debugKey || providedKey !== debugKey) {
+      return res.status(403).json({ error: "Forbidden" });
+    }
+
+    const headers = req.headers || {};
+    const realIp = headers["x-real-ip"];
+    const clientIp = (realIp && typeof realIp === "string") ? realIp.trim() : (req.ip || req.connection.remoteAddress);
+    if (isDebugRateLimited(clientIp)) {
+      return res.status(429).json({ error: "Too many requests" });
+    }
+
+    const stats = await getRedisAggregateStats();
+
+    res.json({
+      status: "debug info",
+      redis: stats,
+      activeConnections: io.engine.clientsCount,
+      uptime: process.uptime(),
+    });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+app.get("/api/verify-match/:matchId/:userId", async (req, res) => {
+  try {
+    const authHeader = req.headers.authorization;
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+      return res.status(401).json({ error: "Authentication required" });
+    }
+    const token = authHeader.split(' ')[1];
+    const decoded = await verifyAuthToken(token);
+    if (!decoded || !decoded.sub) {
+      return res.status(401).json({ error: "Invalid authentication token" });
+    }
+
+    const { matchId, userId } = req.params;
+    if (decoded.sub !== userId) {
+      return res.status(403).json({ error: "userId does not match authenticated user" });
+    }
+    const matchKey = `{arena}:match:${matchId}`;
+    const matchStr = await redisClient.get(matchKey);
+    if (!matchStr) {
+      return res.json({ verified: false });
+    }
+    const match = JSON.parse(matchStr);
+    const players = match.players || [];
+    const isPlayer = players.some(p => p.userId === userId);
+    if (!isPlayer) {
+      return res.json({ verified: false });
+    }
+    const opponent = players.find(p => p.userId !== userId);
+    res.json({
+      verified: true,
+      opponentId: opponent ? opponent.userId : null
+    });
+  } catch (err) {
+    console.error("[verify-match] Error:", err.message);
+    res.status(500).json({ verified: false, error: err.message });
+  }
+});
+
+app.get("/api/verify-match-result/:matchId/:userId", async (req, res) => {
+  try {
+    const authHeader = req.headers.authorization;
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+      return res.status(401).json({ error: "Authentication required" });
+    }
+    const token = authHeader.split(' ')[1];
+    const decoded = await verifyAuthToken(token);
+    if (!decoded || !decoded.sub) {
+      return res.status(401).json({ error: "Invalid authentication token" });
+    }
+
+    const { matchId, userId } = req.params;
+    if (decoded.sub !== userId) {
+      return res.status(403).json({ error: "userId does not match authenticated user" });
+    }
+    const matchKey = `{arena}:match:${matchId}`;
+
+    const matchStr = await redisClient.get(matchKey);
+    if (!matchStr) {
+      return res.status(404).json({ error: "Match not found" });
+    }
+
+    const match = JSON.parse(matchStr);
+    const players = match.players || [];
+    const isPlayer = players.some(p => p.userId === userId);
+    if (!isPlayer) {
+      return res.status(403).json({ error: "Not a participant" });
+    }
+
+    // Return actual winner from match state — idempotent, no claim race
+    return res.json({
+      verified: true,
+      winnerId: match.winnerId || null,
+      isWinner: match.winnerId === userId
+    });
+  } catch (err) {
+    console.error("[verify-match-result] Error:", err.message);
+    res.status(500).json({ verified: false, error: err.message });
+  }
+});
+
+app.get("/health", (req, res) => {
+  res.json({ status: "Arena Socket Server is running with Redis!" });
+});
+
+app.get("/api/matches/active", async (req, res) => {
+  try {
+    const authHeader = req.headers.authorization;
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+      return res.status(401).json({ error: "Authentication required" });
+    }
+    const token = authHeader.split(' ')[1];
+    const decoded = await verifyAuthToken(token);
+    if (!decoded || !decoded.sub) {
+      return res.status(401).json({ error: "Invalid authentication token" });
+    }
+
+    const matchKeys = await scanRedisKeys("{arena}:match:*");
+    const activeMatches = [];
+    for (const key of matchKeys) {
+      if (key.endsWith(":completed")) continue;
+      const matchStr = await redisClient.get(key);
+      if (matchStr) {
+        const match = JSON.parse(matchStr);
+        if (match.status === "in-progress") {
+          activeMatches.push(match);
+        }
+      }
+    }
+    res.json({ matches: activeMatches });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+server.listen(PORT, () => {
+  console.log(`Arena Socket Server running on port ${PORT}`);
+});
diff --git a/arena-socket-server/package-lock.json b/arena-socket-server/package-lock.json
new file mode 100644
index 000000000..bb253c6f2
--- /dev/null
+++ b/arena-socket-server/package-lock.json
@@ -0,0 +1,1406 @@
+{
+  "name": "arena-socket-server",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "arena-socket-server",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "@socket.io/redis-adapter": "^8.3.0",
+        "cors": "^2.8.6",
+        "dotenv": "^17.4.2",
+        "express": "^5.2.1",
+        "ioredis": "^5.11.1",
+        "ioredis-mock": "^8.13.1",
+        "jsonwebtoken": "^9.0.3",
+        "jwks-rsa": "^4.0.1",
+        "socket.io": "^4.8.3"
+      }
+    },
+    "node_modules/@ioredis/as-callback": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@ioredis/as-callback/-/as-callback-3.0.0.tgz",
+      "integrity": "sha512-Kqv1rZ3WbgOrS+hgzJ5xG5WQuhvzzSTRYvNeyPMLOAM78MHSnuKI20JeJGbpuAt//LCuP0vsexZcorqW7kWhJg=="
+    },
+    "node_modules/@ioredis/commands": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.10.0.tgz",
+      "integrity": "sha512-UmeW7z4LfctwoQ5wkhVzgq8tXkreED2xZGpX+Bg+zA+WJFZCT6c062AfCK/Dfk81xZnnwdhJCUMkitihRaoC2Q=="
+    },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
+    },
+    "node_modules/@socket.io/redis-adapter": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/redis-adapter/-/redis-adapter-8.3.0.tgz",
+      "integrity": "sha512-ly0cra+48hDmChxmIpnESKrc94LjRL80TEmZVscuQ/WWkRP81nNj8W8cCGMqbI4L6NCuAaPRSzZF1a9GlAxxnA==",
+      "dependencies": {
+        "debug": "~4.3.1",
+        "notepack.io": "~3.0.1",
+        "uid2": "1.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "socket.io-adapter": "^2.5.4"
+      }
+    },
+    "node_modules/@socket.io/redis-adapter/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@types/cors": {
+      "version": "2.8.19",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.19.tgz",
+      "integrity": "sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/ioredis-mock": {
+      "version": "8.2.7",
+      "resolved": "https://registry.npmjs.org/@types/ioredis-mock/-/ioredis-mock-8.2.7.tgz",
+      "integrity": "sha512-YsGiaOIYBKeVvu/7GYziAD8qX3LJem5LK00d5PKykzsQJMLysAqXA61AkNuYWCekYl64tbMTqVOMF4SYoCPbQg==",
+      "peer": true,
+      "peerDependencies": {
+        "ioredis": ">=5"
+      }
+    },
+    "node_modules/@types/jsonwebtoken": {
+      "version": "9.0.10",
+      "resolved": "https://registry.npmjs.org/@types/jsonwebtoken/-/jsonwebtoken-9.0.10.tgz",
+      "integrity": "sha512-asx5hIG9Qmf/1oStypjanR7iKTv0gXQ1Ov/jfrX6kS/EO0OFni8orbmGCn0672NHR3kXHwpAwR+B368ZGN/2rA==",
+      "dependencies": {
+        "@types/ms": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA=="
+    },
+    "node_modules/@types/node": {
+      "version": "25.9.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.3.tgz",
+      "integrity": "sha512-603BddQMv3pUcr4U2dhujk83N2tTDVr/34wII2B6bJy6g+8WD6yUb11jszNs0gdi4PesVWl7ABt8nYMVpnLUcg==",
+      "dependencies": {
+        "undici-types": ">=7.24.0 <7.24.7"
+      }
+    },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+      "dependencies": {
+        "mime-types": "^3.0.0",
+        "negotiator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+      "engines": {
+        "node": "^4.5.0 || >= 5.9"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
+      "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
+      "dependencies": {
+        "bytes": "^3.1.2",
+        "content-type": "^1.0.5",
+        "debug": "^4.4.3",
+        "http-errors": "^2.0.0",
+        "iconv-lite": "^0.7.0",
+        "on-finished": "^2.4.1",
+        "qs": "^6.14.1",
+        "raw-body": "^3.0.1",
+        "type-is": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/cluster-key-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.1.tgz",
+      "integrity": "sha512-rwHwUfXL40Chm1r08yrhU3qpUvdVlgkKNeyeGPOxnW8/SyVDvgRaed/Uz54AqWNaTCAThlj6QAs3TZcKI0xDEw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.1.0.tgz",
+      "integrity": "sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+      "engines": {
+        "node": ">=6.6.0"
+      }
+    },
+    "node_modules/cors": {
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
+      "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/denque": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz",
+      "integrity": "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "17.4.2",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.2.tgz",
+      "integrity": "sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/engine.io": {
+      "version": "6.6.8",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.8.tgz",
+      "integrity": "sha512-2agL3ueZhqxoVrfmntO8yuVj+uNSlIOnhykYHk3Cq0ShYPdUjjUiSJrQvXjq01I9jAuI0Zl2YO8Evv5Mqytm5g==",
+      "dependencies": {
+        "@types/cors": "^2.8.12",
+        "@types/node": ">=10.0.0",
+        "@types/ws": "^8.5.12",
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.7.2",
+        "cors": "~2.8.5",
+        "debug": "~4.4.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.20.1"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/engine.io/node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/engine.io/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/engine.io/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/engine.io/node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
+      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
+      "dependencies": {
+        "accepts": "^2.0.0",
+        "body-parser": "^2.2.1",
+        "content-disposition": "^1.0.0",
+        "content-type": "^1.0.5",
+        "cookie": "^0.7.1",
+        "cookie-signature": "^1.2.1",
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "finalhandler": "^2.1.0",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.0",
+        "merge-descriptors": "^2.0.0",
+        "mime-types": "^3.0.0",
+        "on-finished": "^2.4.1",
+        "once": "^1.4.0",
+        "parseurl": "^1.3.3",
+        "proxy-addr": "^2.0.7",
+        "qs": "^6.14.0",
+        "range-parser": "^1.2.1",
+        "router": "^2.2.0",
+        "send": "^1.1.0",
+        "serve-static": "^2.2.0",
+        "statuses": "^2.0.1",
+        "type-is": "^2.0.1",
+        "vary": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/fengari": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/fengari/-/fengari-0.1.5.tgz",
+      "integrity": "sha512-0DS4Nn4rV8qyFlQCpKK8brT61EUtswynrpfFTcgLErcilBIBskSMQ86fO2WVuybr14ywyKdRjv91FiRZwnEuvQ==",
+      "dependencies": {
+        "readline-sync": "^1.4.10",
+        "sprintf-js": "^1.1.3",
+        "tmp": "^0.2.5"
+      }
+    },
+    "node_modules/fengari-interop": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/fengari-interop/-/fengari-interop-0.1.4.tgz",
+      "integrity": "sha512-4/CW/3PJUo3ebD4ACgE1g/3NGEYSq7OQAyETyypsAl/WeySDBbxExikkayNkZzbpgyC9GyJp8v1DU2VOXxNq7Q==",
+      "peerDependencies": {
+        "fengari": "^0.1.0"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
+      "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "on-finished": "^2.4.1",
+        "parseurl": "^1.3.3",
+        "statuses": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/ioredis": {
+      "version": "5.11.1",
+      "resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.11.1.tgz",
+      "integrity": "sha512-ehuGcf94bQXhfagULNXrJdfnWO38v070jxSx/qE87Kjzmu2fU7ro5EFAb+OPituLqgfyuQaym5DlrNydW2sJ9A==",
+      "dependencies": {
+        "@ioredis/commands": "1.10.0",
+        "cluster-key-slot": "1.1.1",
+        "debug": "4.4.3",
+        "denque": "2.1.0",
+        "redis-errors": "1.2.0",
+        "redis-parser": "3.0.0",
+        "standard-as-callback": "2.1.0"
+      },
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ioredis"
+      }
+    },
+    "node_modules/ioredis-mock": {
+      "version": "8.13.1",
+      "resolved": "https://registry.npmjs.org/ioredis-mock/-/ioredis-mock-8.13.1.tgz",
+      "integrity": "sha512-Wsi50AU+cMiI32nAgfwpUaJVBtb4iQdVsOHl9M6R3tePCO/8vGsToCVIG82XWAxN4Se55TZoOzVseu+QngFLyw==",
+      "dependencies": {
+        "@ioredis/as-callback": "^3.0.0",
+        "@ioredis/commands": "^1.4.0",
+        "fengari": "^0.1.4",
+        "fengari-interop": "^0.1.3",
+        "semver": "^7.7.2"
+      },
+      "engines": {
+        "node": ">=12.22"
+      },
+      "peerDependencies": {
+        "@types/ioredis-mock": "^8",
+        "ioredis": "^5"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-promise": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ=="
+    },
+    "node_modules/jose": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.2.3.tgz",
+      "integrity": "sha512-YYVDInQKFJfR/xa3ojUTl8c2KoTwiL1R5Wg9YCydwH0x0B9grbzlg5HC7mMjCtUJjbQ/YnGEZIhI5tCgfTb4Hw==",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
+    "node_modules/jsonwebtoken": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
+      "integrity": "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==",
+      "license": "MIT",
+      "dependencies": {
+        "jws": "^4.0.1",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/jwa": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
+      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "^1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jwks-rsa": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jwks-rsa/-/jwks-rsa-4.0.1.tgz",
+      "integrity": "sha512-poXwUA8S4cP9P5N8tZS3xnUDJH8WmwSGfKK9gIaRPdjLHyJtd9iX/cngX9CUIe0Caof5JhK2EbN7N5lnnaf9NA==",
+      "dependencies": {
+        "@types/jsonwebtoken": "^9.0.4",
+        "debug": "^4.3.4",
+        "jose": "^6.1.3",
+        "limiter": "^1.1.5",
+        "lru-memoizer": "^3.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >= 23.0.0"
+      }
+    },
+    "node_modules/jws": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
+      "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/limiter": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz",
+      "integrity": "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA=="
+    },
+    "node_modules/lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="
+    },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "11.5.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.1.tgz",
+      "integrity": "sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/lru-memoizer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lru-memoizer/-/lru-memoizer-3.0.0.tgz",
+      "integrity": "sha512-m83w/cYXLdUIboKSPxzPAGfYnk+vqeDYXuoSrQRw1q+yVEd8IXhvMufN8Q5TIPe7e2jyX4SRNrDJI2Skw1yznQ==",
+      "dependencies": {
+        "lodash.clonedeep": "^4.5.0",
+        "lru-cache": "^11.0.1"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+      "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/notepack.io": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/notepack.io/-/notepack.io-3.0.1.tgz",
+      "integrity": "sha512-TKC/8zH5pXIAMVQio2TvVDTtPRX+DJPHDqjRbxogtFiByHyzKmy96RA0JtCQJ+WouyyL4A10xomQzgbUT+1jCg=="
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.2.tgz",
+      "integrity": "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.15.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.2.tgz",
+      "integrity": "sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/readline-sync": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/readline-sync/-/readline-sync-1.4.10.tgz",
+      "integrity": "sha512-gNva8/6UAe8QYepIQH/jQ2qn91Qj0B9sYjMBBs3QOB8F2CXcKgLxQaJRP76sWVRQt+QU+8fAkCbCvjjMFu7Ycw==",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/redis-errors": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/redis-errors/-/redis-errors-1.2.0.tgz",
+      "integrity": "sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/redis-parser": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redis-parser/-/redis-parser-3.0.0.tgz",
+      "integrity": "sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==",
+      "dependencies": {
+        "redis-errors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/router": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "is-promise": "^4.0.0",
+        "parseurl": "^1.3.3",
+        "path-to-regexp": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "node_modules/semver": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.4.tgz",
+      "integrity": "sha512-rUCObTnP32Q08R2uuIrt7r9PlEonuTmtuXYcW6s5kjdlj3xbnwe+21yXptAUYcMAABLkYYTtnmzb3w3EDZfueA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.1",
+        "mime-types": "^3.0.2",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+      "dependencies": {
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "parseurl": "^1.3.3",
+        "send": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
+      "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4",
+        "side-channel-list": "^1.0.1",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/socket.io": {
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.3.tgz",
+      "integrity": "sha512-2Dd78bqzzjE6KPkD5fHZmDAKRNe3J15q+YHDrIsy9WEkqttc7GY+kT9OBLSMaPbQaEd0x1BjcmtMtXkfpc+T5A==",
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "cors": "~2.8.5",
+        "debug": "~4.4.1",
+        "engine.io": "~6.6.0",
+        "socket.io-adapter": "~2.5.2",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/socket.io-adapter": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.7.tgz",
+      "integrity": "sha512-e0LyK91f3cUxTmv95/KzoLg47+zF+s/sbxRGDNsyG4dmIP8ZSX8ax6byOxfJXeNNtS/8AZlfD+uP7gBeR7DLlg==",
+      "dependencies": {
+        "debug": "~4.4.1",
+        "ws": "~8.20.1"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.6.tgz",
+      "integrity": "sha512-asJqbVBDsBCJx0pTqw3WfesSY0iRX+2xzWEWzrpcH7L6fLzrhyF8WPI8UaeM4YCuDfpwA/cgsdugMsmtz8EJeg==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io/node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/socket.io/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/socket.io/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/socket.io/node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA=="
+    },
+    "node_modules/standard-as-callback": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/standard-as-callback/-/standard-as-callback-2.1.0.tgz",
+      "integrity": "sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A=="
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/tmp": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.7.tgz",
+      "integrity": "sha512-e0votIpp4Uo2AJYSzVHV6xCcawuiez3DzqDAbrTc3YxBkplN6e+dM13ZeIcZnDg/QpSuU2zfZ3rzwY8ukEnaXw==",
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.1.0.tgz",
+      "integrity": "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==",
+      "dependencies": {
+        "content-type": "^2.0.0",
+        "media-typer": "^1.1.0",
+        "mime-types": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/type-is/node_modules/content-type": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.0.0.tgz",
+      "integrity": "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/uid2": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/uid2/-/uid2-1.0.0.tgz",
+      "integrity": "sha512-+I6aJUv63YAcY9n4mQreLUt0d4lvwkkopDNmpomkAUz0fAkEMV9pRWxN0EjhW1YfRhcuyHg2v3mwddCDW1+LFQ==",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.24.6",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.24.6.tgz",
+      "integrity": "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg=="
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+    },
+    "node_modules/ws": {
+      "version": "8.20.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.20.1.tgz",
+      "integrity": "sha512-It4dO0K5v//JtTXuPkfEOaI3uUN87iYPnqo/ZzqCoG3g8uhA66QUMs/SrM0YK7/NAu+r4LMh/9dq2A7k+rHs+w==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/arena-socket-server/package.json b/arena-socket-server/package.json
new file mode 100644
index 000000000..310001385
--- /dev/null
+++ b/arena-socket-server/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "arena-socket-server",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@socket.io/redis-adapter": "^8.3.0",
+    "cors": "^2.8.6",
+    "dotenv": "^17.4.2",
+    "express": "^5.2.1",
+    "ioredis": "^5.11.1",
+    "ioredis-mock": "^8.13.1",
+    "jsonwebtoken": "^9.0.3",
+    "jwks-rsa": "^4.0.1",
+    "socket.io": "^4.8.3"
+  }
+}
diff --git a/backend/.gitattributes b/backend/.gitattributes
new file mode 100644
index 000000000..3b41682ac
--- /dev/null
+++ b/backend/.gitattributes
@@ -0,0 +1,2 @@
+/mvnw text eol=lf
+*.cmd text eol=crlf
diff --git a/backend/.gitignore b/backend/.gitignore
new file mode 100644
index 000000000..667aaef0c
--- /dev/null
+++ b/backend/.gitignore
@@ -0,0 +1,33 @@
+HELP.md
+target/
+.mvn/wrapper/maven-wrapper.jar
+!**/src/main/**/target/
+!**/src/test/**/target/
+
+### STS ###
+.apt_generated
+.classpath
+.factorypath
+.project
+.settings
+.springBeans
+.sts4-cache
+
+### IntelliJ IDEA ###
+.idea
+*.iws
+*.iml
+*.ipr
+
+### NetBeans ###
+/nbproject/private/
+/nbbuild/
+/dist/
+/nbdist/
+/.nb-gradle/
+build/
+!**/src/main/**/build/
+!**/src/test/**/build/
+
+### VS Code ###
+.vscode/
diff --git a/backend/.mvn/wrapper/maven-wrapper.properties b/backend/.mvn/wrapper/maven-wrapper.properties
new file mode 100644
index 000000000..216df0589
--- /dev/null
+++ b/backend/.mvn/wrapper/maven-wrapper.properties
@@ -0,0 +1,3 @@
+wrapperVersion=3.3.4
+distributionType=only-script
+distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.16/apache-maven-3.9.16-bin.zip
diff --git a/backend/Dockerfile b/backend/Dockerfile
new file mode 100644
index 000000000..5801a086a
--- /dev/null
+++ b/backend/Dockerfile
@@ -0,0 +1,17 @@
+FROM maven:3.9.8-eclipse-temurin-21 AS build
+
+WORKDIR /app
+
+COPY . .
+
+RUN mvn clean package -DskipTests
+
+FROM eclipse-temurin:21-jre
+
+WORKDIR /app
+
+COPY --from=build /app/target/*.jar app.jar
+
+EXPOSE 8080
+
+ENTRYPOINT ["java", "-jar", "app.jar"]
diff --git a/backend/README.md b/backend/README.md
new file mode 100644
index 000000000..e317b8b0b
--- /dev/null
+++ b/backend/README.md
@@ -0,0 +1,47 @@
+# AlgoBuddy Backend
+
+This is the Spring Boot-based REST API backend for AlgoBuddy.
+
+## CORS Configuration
+
+The backend features a secure, parsed, and validated CORS allowlist configured through properties and environment variables.
+
+### Configuration Properties
+
+You can customize the CORS settings using the following properties:
+
+| Property | Environment Variable | Default Value | Description |
+|---|---|---|---|
+| `app.allowed-origins` | `ALLOWED_ORIGINS` | *Empty* | A comma-separated list of allowed origins (e.g., `http://localhost:3000,https://algobuddy.me`). |
+| `app.environment` | `APP_ENV` | `dev` | The active application environment (e.g., `dev`, `prod`, `production`). Defaults to `spring.profiles.active` if set. |
+
+### Security & Validation Rules
+
+To protect the API against cross-origin security bypasses, the backend applies the following validation rules to configured origins:
+
+1. **No Wildcards:** Wildcard characters (`*`) are disallowed to prevent open access. If found in the configuration, they are ignored.
+2. **Scheme Enforcement:** Origins must explicitly start with `http://` or `https://`. Other schemes (e.g., `ftp://`) or invalid URLs are skipped.
+3. **Trailing Slashes:** Trailing slashes are automatically trimmed (e.g., `http://localhost:3000/` becomes `http://localhost:3000`) to correctly match standard browser `Origin` headers.
+4. **Environment-Aware Fallbacks:**
+   - **Development/Test (`APP_ENV=dev` or not production):** If no origins are configured, it defaults to allowing `http://localhost:3000` so that local development works out-of-the-box.
+   - **Production (`APP_ENV=production` or `prod`):** If no origins are configured, it will print an error and **block all cross-origin requests** by default for safety.
+
+---
+
+## Building and Testing
+
+### Prerequisites
+- Java 21+
+- Maven (or use the included `./mvnw` wrapper)
+
+### Build the Application
+To build the backend package:
+```bash
+./mvnw clean package -DskipTests
+```
+
+### Run Tests
+To run CORS unit and integration tests:
+```bash
+./mvnw test -Dtest=CorsConfigTest,CorsIntegrationTest
+```
diff --git a/backend/mvnw b/backend/mvnw
new file mode 100644
index 000000000..bd8896bf2
--- /dev/null
+++ b/backend/mvnw
@@ -0,0 +1,295 @@
+#!/bin/sh
+# ----------------------------------------------------------------------------
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#    http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+# ----------------------------------------------------------------------------
+
+# ----------------------------------------------------------------------------
+# Apache Maven Wrapper startup batch script, version 3.3.4
+#
+# Optional ENV vars
+# -----------------
+#   JAVA_HOME - location of a JDK home dir, required when download maven via java source
+#   MVNW_REPOURL - repo url base for downloading maven distribution
+#   MVNW_USERNAME/MVNW_PASSWORD - user and password for downloading maven
+#   MVNW_VERBOSE - true: enable verbose log; debug: trace the mvnw script; others: silence the output
+# ----------------------------------------------------------------------------
+
+set -euf
+[ "${MVNW_VERBOSE-}" != debug ] || set -x
+
+# OS specific support.
+native_path() { printf %s\\n "$1"; }
+case "$(uname)" in
+CYGWIN* | MINGW*)
+  [ -z "${JAVA_HOME-}" ] || JAVA_HOME="$(cygpath --unix "$JAVA_HOME")"
+  native_path() { cygpath --path --windows "$1"; }
+  ;;
+esac
+
+# set JAVACMD and JAVACCMD
+set_java_home() {
+  # For Cygwin and MinGW, ensure paths are in Unix format before anything is touched
+  if [ -n "${JAVA_HOME-}" ]; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ]; then
+      # IBM's JDK on AIX uses strange locations for the executables
+      JAVACMD="$JAVA_HOME/jre/sh/java"
+      JAVACCMD="$JAVA_HOME/jre/sh/javac"
+    else
+      JAVACMD="$JAVA_HOME/bin/java"
+      JAVACCMD="$JAVA_HOME/bin/javac"
+
+      if [ ! -x "$JAVACMD" ] || [ ! -x "$JAVACCMD" ]; then
+        echo "The JAVA_HOME environment variable is not defined correctly, so mvnw cannot run." >&2
+        echo "JAVA_HOME is set to \"$JAVA_HOME\", but \"\$JAVA_HOME/bin/java\" or \"\$JAVA_HOME/bin/javac\" does not exist." >&2
+        return 1
+      fi
+    fi
+  else
+    JAVACMD="$(
+      'set' +e
+      'unset' -f command 2>/dev/null
+      'command' -v java
+    )" || :
+    JAVACCMD="$(
+      'set' +e
+      'unset' -f command 2>/dev/null
+      'command' -v javac
+    )" || :
+
+    if [ ! -x "${JAVACMD-}" ] || [ ! -x "${JAVACCMD-}" ]; then
+      echo "The java/javac command does not exist in PATH nor is JAVA_HOME set, so mvnw cannot run." >&2
+      return 1
+    fi
+  fi
+}
+
+# hash string like Java String::hashCode
+hash_string() {
+  str="${1:-}" h=0
+  while [ -n "$str" ]; do
+    char="${str%"${str#?}"}"
+    h=$(((h * 31 + $(LC_CTYPE=C printf %d "'$char")) % 4294967296))
+    str="${str#?}"
+  done
+  printf %x\\n $h
+}
+
+verbose() { :; }
+[ "${MVNW_VERBOSE-}" != true ] || verbose() { printf %s\\n "${1-}"; }
+
+die() {
+  printf %s\\n "$1" >&2
+  exit 1
+}
+
+trim() {
+  # MWRAPPER-139:
+  #   Trims trailing and leading whitespace, carriage returns, tabs, and linefeeds.
+  #   Needed for removing poorly interpreted newline sequences when running in more
+  #   exotic environments such as mingw bash on Windows.
+  printf "%s" "${1}" | tr -d '[:space:]'
+}
+
+scriptDir="$(dirname "$0")"
+scriptName="$(basename "$0")"
+
+# parse distributionUrl and optional distributionSha256Sum, requires .mvn/wrapper/maven-wrapper.properties
+while IFS="=" read -r key value; do
+  case "${key-}" in
+  distributionUrl) distributionUrl=$(trim "${value-}") ;;
+  distributionSha256Sum) distributionSha256Sum=$(trim "${value-}") ;;
+  esac
+done <"$scriptDir/.mvn/wrapper/maven-wrapper.properties"
+[ -n "${distributionUrl-}" ] || die "cannot read distributionUrl property in $scriptDir/.mvn/wrapper/maven-wrapper.properties"
+
+case "${distributionUrl##*/}" in
+maven-mvnd-*bin.*)
+  MVN_CMD=mvnd.sh _MVNW_REPO_PATTERN=/maven/mvnd/
+  case "${PROCESSOR_ARCHITECTURE-}${PROCESSOR_ARCHITEW6432-}:$(uname -a)" in
+  *AMD64:CYGWIN* | *AMD64:MINGW*) distributionPlatform=windows-amd64 ;;
+  :Darwin*x86_64) distributionPlatform=darwin-amd64 ;;
+  :Darwin*arm64) distributionPlatform=darwin-aarch64 ;;
+  :Linux*x86_64*) distributionPlatform=linux-amd64 ;;
+  *)
+    echo "Cannot detect native platform for mvnd on $(uname)-$(uname -m), use pure java version" >&2
+    distributionPlatform=linux-amd64
+    ;;
+  esac
+  distributionUrl="${distributionUrl%-bin.*}-$distributionPlatform.zip"
+  ;;
+maven-mvnd-*) MVN_CMD=mvnd.sh _MVNW_REPO_PATTERN=/maven/mvnd/ ;;
+*) MVN_CMD="mvn${scriptName#mvnw}" _MVNW_REPO_PATTERN=/org/apache/maven/ ;;
+esac
+
+# apply MVNW_REPOURL and calculate MAVEN_HOME
+# maven home pattern: ~/.m2/wrapper/dists/{apache-maven-<version>,maven-mvnd-<version>-<platform>}/<hash>
+[ -z "${MVNW_REPOURL-}" ] || distributionUrl="$MVNW_REPOURL$_MVNW_REPO_PATTERN${distributionUrl#*"$_MVNW_REPO_PATTERN"}"
+distributionUrlName="${distributionUrl##*/}"
+distributionUrlNameMain="${distributionUrlName%.*}"
+distributionUrlNameMain="${distributionUrlNameMain%-bin}"
+MAVEN_USER_HOME="${MAVEN_USER_HOME:-${HOME}/.m2}"
+MAVEN_HOME="${MAVEN_USER_HOME}/wrapper/dists/${distributionUrlNameMain-}/$(hash_string "$distributionUrl")"
+
+exec_maven() {
+  unset MVNW_VERBOSE MVNW_USERNAME MVNW_PASSWORD MVNW_REPOURL || :
+  exec "$MAVEN_HOME/bin/$MVN_CMD" "$@" || die "cannot exec $MAVEN_HOME/bin/$MVN_CMD"
+}
+
+if [ -d "$MAVEN_HOME" ]; then
+  verbose "found existing MAVEN_HOME at $MAVEN_HOME"
+  exec_maven "$@"
+fi
+
+case "${distributionUrl-}" in
+*?-bin.zip | *?maven-mvnd-?*-?*.zip) ;;
+*) die "distributionUrl is not valid, must match *-bin.zip or maven-mvnd-*.zip, but found '${distributionUrl-}'" ;;
+esac
+
+# prepare tmp dir
+if TMP_DOWNLOAD_DIR="$(mktemp -d)" && [ -d "$TMP_DOWNLOAD_DIR" ]; then
+  clean() { rm -rf -- "$TMP_DOWNLOAD_DIR"; }
+  trap clean HUP INT TERM EXIT
+else
+  die "cannot create temp dir"
+fi
+
+mkdir -p -- "${MAVEN_HOME%/*}"
+
+# Download and Install Apache Maven
+verbose "Couldn't find MAVEN_HOME, downloading and installing it ..."
+verbose "Downloading from: $distributionUrl"
+verbose "Downloading to: $TMP_DOWNLOAD_DIR/$distributionUrlName"
+
+# select .zip or .tar.gz
+if ! command -v unzip >/dev/null; then
+  distributionUrl="${distributionUrl%.zip}.tar.gz"
+  distributionUrlName="${distributionUrl##*/}"
+fi
+
+# verbose opt
+__MVNW_QUIET_WGET=--quiet __MVNW_QUIET_CURL=--silent __MVNW_QUIET_UNZIP=-q __MVNW_QUIET_TAR=''
+[ "${MVNW_VERBOSE-}" != true ] || __MVNW_QUIET_WGET='' __MVNW_QUIET_CURL='' __MVNW_QUIET_UNZIP='' __MVNW_QUIET_TAR=v
+
+# normalize http auth
+case "${MVNW_PASSWORD:+has-password}" in
+'') MVNW_USERNAME='' MVNW_PASSWORD='' ;;
+has-password) [ -n "${MVNW_USERNAME-}" ] || MVNW_USERNAME='' MVNW_PASSWORD='' ;;
+esac
+
+if [ -z "${MVNW_USERNAME-}" ] && command -v wget >/dev/null; then
+  verbose "Found wget ... using wget"
+  wget ${__MVNW_QUIET_WGET:+"$__MVNW_QUIET_WGET"} "$distributionUrl" -O "$TMP_DOWNLOAD_DIR/$distributionUrlName" || die "wget: Failed to fetch $distributionUrl"
+elif [ -z "${MVNW_USERNAME-}" ] && command -v curl >/dev/null; then
+  verbose "Found curl ... using curl"
+  curl ${__MVNW_QUIET_CURL:+"$__MVNW_QUIET_CURL"} -f -L -o "$TMP_DOWNLOAD_DIR/$distributionUrlName" "$distributionUrl" || die "curl: Failed to fetch $distributionUrl"
+elif set_java_home; then
+  verbose "Falling back to use Java to download"
+  javaSource="$TMP_DOWNLOAD_DIR/Downloader.java"
+  targetZip="$TMP_DOWNLOAD_DIR/$distributionUrlName"
+  cat >"$javaSource" <<-END
+	public class Downloader extends java.net.Authenticator
+	{
+	  protected java.net.PasswordAuthentication getPasswordAuthentication()
+	  {
+	    return new java.net.PasswordAuthentication( System.getenv( "MVNW_USERNAME" ), System.getenv( "MVNW_PASSWORD" ).toCharArray() );
+	  }
+	  public static void main( String[] args ) throws Exception
+	  {
+	    setDefault( new Downloader() );
+	    java.nio.file.Files.copy( java.net.URI.create( args[0] ).toURL().openStream(), java.nio.file.Paths.get( args[1] ).toAbsolutePath().normalize() );
+	  }
+	}
+	END
+  # For Cygwin/MinGW, switch paths to Windows format before running javac and java
+  verbose " - Compiling Downloader.java ..."
+  "$(native_path "$JAVACCMD")" "$(native_path "$javaSource")" || die "Failed to compile Downloader.java"
+  verbose " - Running Downloader.java ..."
+  "$(native_path "$JAVACMD")" -cp "$(native_path "$TMP_DOWNLOAD_DIR")" Downloader "$distributionUrl" "$(native_path "$targetZip")"
+fi
+
+# If specified, validate the SHA-256 sum of the Maven distribution zip file
+if [ -n "${distributionSha256Sum-}" ]; then
+  distributionSha256Result=false
+  if [ "$MVN_CMD" = mvnd.sh ]; then
+    echo "Checksum validation is not supported for maven-mvnd." >&2
+    echo "Please disable validation by removing 'distributionSha256Sum' from your maven-wrapper.properties." >&2
+    exit 1
+  elif command -v sha256sum >/dev/null; then
+    if echo "$distributionSha256Sum  $TMP_DOWNLOAD_DIR/$distributionUrlName" | sha256sum -c - >/dev/null 2>&1; then
+      distributionSha256Result=true
+    fi
+  elif command -v shasum >/dev/null; then
+    if echo "$distributionSha256Sum  $TMP_DOWNLOAD_DIR/$distributionUrlName" | shasum -a 256 -c >/dev/null 2>&1; then
+      distributionSha256Result=true
+    fi
+  else
+    echo "Checksum validation was requested but neither 'sha256sum' or 'shasum' are available." >&2
+    echo "Please install either command, or disable validation by removing 'distributionSha256Sum' from your maven-wrapper.properties." >&2
+    exit 1
+  fi
+  if [ $distributionSha256Result = false ]; then
+    echo "Error: Failed to validate Maven distribution SHA-256, your Maven distribution might be compromised." >&2
+    echo "If you updated your Maven version, you need to update the specified distributionSha256Sum property." >&2
+    exit 1
+  fi
+fi
+
+# unzip and move
+if command -v unzip >/dev/null; then
+  unzip ${__MVNW_QUIET_UNZIP:+"$__MVNW_QUIET_UNZIP"} "$TMP_DOWNLOAD_DIR/$distributionUrlName" -d "$TMP_DOWNLOAD_DIR" || die "failed to unzip"
+else
+  tar xzf${__MVNW_QUIET_TAR:+"$__MVNW_QUIET_TAR"} "$TMP_DOWNLOAD_DIR/$distributionUrlName" -C "$TMP_DOWNLOAD_DIR" || die "failed to untar"
+fi
+
+# Find the actual extracted directory name (handles snapshots where filename != directory name)
+actualDistributionDir=""
+
+# First try the expected directory name (for regular distributions)
+if [ -d "$TMP_DOWNLOAD_DIR/$distributionUrlNameMain" ]; then
+  if [ -f "$TMP_DOWNLOAD_DIR/$distributionUrlNameMain/bin/$MVN_CMD" ]; then
+    actualDistributionDir="$distributionUrlNameMain"
+  fi
+fi
+
+# If not found, search for any directory with the Maven executable (for snapshots)
+if [ -z "$actualDistributionDir" ]; then
+  # enable globbing to iterate over items
+  set +f
+  for dir in "$TMP_DOWNLOAD_DIR"/*; do
+    if [ -d "$dir" ]; then
+      if [ -f "$dir/bin/$MVN_CMD" ]; then
+        actualDistributionDir="$(basename "$dir")"
+        break
+      fi
+    fi
+  done
+  set -f
+fi
+
+if [ -z "$actualDistributionDir" ]; then
+  verbose "Contents of $TMP_DOWNLOAD_DIR:"
+  verbose "$(ls -la "$TMP_DOWNLOAD_DIR")"
+  die "Could not find Maven distribution directory in extracted archive"
+fi
+
+verbose "Found extracted Maven distribution directory: $actualDistributionDir"
+printf %s\\n "$distributionUrl" >"$TMP_DOWNLOAD_DIR/$actualDistributionDir/mvnw.url"
+mv -- "$TMP_DOWNLOAD_DIR/$actualDistributionDir" "$MAVEN_HOME" || [ -d "$MAVEN_HOME" ] || die "fail to move MAVEN_HOME"
+
+clean || :
+exec_maven "$@"
diff --git a/backend/mvnw.cmd b/backend/mvnw.cmd
new file mode 100644
index 000000000..92450f932
--- /dev/null
+++ b/backend/mvnw.cmd
@@ -0,0 +1,189 @@
+<# : batch portion
+@REM ----------------------------------------------------------------------------
+@REM Licensed to the Apache Software Foundation (ASF) under one
+@REM or more contributor license agreements.  See the NOTICE file
+@REM distributed with this work for additional information
+@REM regarding copyright ownership.  The ASF licenses this file
+@REM to you under the Apache License, Version 2.0 (the
+@REM "License"); you may not use this file except in compliance
+@REM with the License.  You may obtain a copy of the License at
+@REM
+@REM    http://www.apache.org/licenses/LICENSE-2.0
+@REM
+@REM Unless required by applicable law or agreed to in writing,
+@REM software distributed under the License is distributed on an
+@REM "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+@REM KIND, either express or implied.  See the License for the
+@REM specific language governing permissions and limitations
+@REM under the License.
+@REM ----------------------------------------------------------------------------
+
+@REM ----------------------------------------------------------------------------
+@REM Apache Maven Wrapper startup batch script, version 3.3.4
+@REM
+@REM Optional ENV vars
+@REM   MVNW_REPOURL - repo url base for downloading maven distribution
+@REM   MVNW_USERNAME/MVNW_PASSWORD - user and password for downloading maven
+@REM   MVNW_VERBOSE - true: enable verbose log; others: silence the output
+@REM ----------------------------------------------------------------------------
+
+@IF "%__MVNW_ARG0_NAME__%"=="" (SET __MVNW_ARG0_NAME__=%~nx0)
+@SET __MVNW_CMD__=
+@SET __MVNW_ERROR__=
+@SET __MVNW_PSMODULEP_SAVE=%PSModulePath%
+@SET PSModulePath=
+@FOR /F "usebackq tokens=1* delims==" %%A IN (`powershell -noprofile "& {$scriptDir='%~dp0'; $script='%__MVNW_ARG0_NAME__%'; icm -ScriptBlock ([Scriptblock]::Create((Get-Content -Raw '%~f0'))) -NoNewScope}"`) DO @(
+  IF "%%A"=="MVN_CMD" (set __MVNW_CMD__=%%B) ELSE IF "%%B"=="" (echo %%A) ELSE (echo %%A=%%B)
+)
+@SET PSModulePath=%__MVNW_PSMODULEP_SAVE%
+@SET __MVNW_PSMODULEP_SAVE=
+@SET __MVNW_ARG0_NAME__=
+@SET MVNW_USERNAME=
+@SET MVNW_PASSWORD=
+@IF NOT "%__MVNW_CMD__%"=="" ("%__MVNW_CMD__%" %*)
+@echo Cannot start maven from wrapper >&2 && exit /b 1
+@GOTO :EOF
+: end batch / begin powershell #>
+
+$ErrorActionPreference = "Stop"
+if ($env:MVNW_VERBOSE -eq "true") {
+  $VerbosePreference = "Continue"
+}
+
+# calculate distributionUrl, requires .mvn/wrapper/maven-wrapper.properties
+$distributionUrl = (Get-Content -Raw "$scriptDir/.mvn/wrapper/maven-wrapper.properties" | ConvertFrom-StringData).distributionUrl
+if (!$distributionUrl) {
+  Write-Error "cannot read distributionUrl property in $scriptDir/.mvn/wrapper/maven-wrapper.properties"
+}
+
+switch -wildcard -casesensitive ( $($distributionUrl -replace '^.*/','') ) {
+  "maven-mvnd-*" {
+    $USE_MVND = $true
+    $distributionUrl = $distributionUrl -replace '-bin\.[^.]*$',"-windows-amd64.zip"
+    $MVN_CMD = "mvnd.cmd"
+    break
+  }
+  default {
+    $USE_MVND = $false
+    $MVN_CMD = $script -replace '^mvnw','mvn'
+    break
+  }
+}
+
+# apply MVNW_REPOURL and calculate MAVEN_HOME
+# maven home pattern: ~/.m2/wrapper/dists/{apache-maven-<version>,maven-mvnd-<version>-<platform>}/<hash>
+if ($env:MVNW_REPOURL) {
+  $MVNW_REPO_PATTERN = if ($USE_MVND -eq $False) { "/org/apache/maven/" } else { "/maven/mvnd/" }
+  $distributionUrl = "$env:MVNW_REPOURL$MVNW_REPO_PATTERN$($distributionUrl -replace "^.*$MVNW_REPO_PATTERN",'')"
+}
+$distributionUrlName = $distributionUrl -replace '^.*/',''
+$distributionUrlNameMain = $distributionUrlName -replace '\.[^.]*$','' -replace '-bin$',''
+
+$MAVEN_M2_PATH = "$HOME/.m2"
+if ($env:MAVEN_USER_HOME) {
+  $MAVEN_M2_PATH = "$env:MAVEN_USER_HOME"
+}
+
+if (-not (Test-Path -Path $MAVEN_M2_PATH)) {
+    New-Item -Path $MAVEN_M2_PATH -ItemType Directory | Out-Null
+}
+
+$MAVEN_WRAPPER_DISTS = $null
+if ((Get-Item $MAVEN_M2_PATH).Target[0] -eq $null) {
+  $MAVEN_WRAPPER_DISTS = "$MAVEN_M2_PATH/wrapper/dists"
+} else {
+  $MAVEN_WRAPPER_DISTS = (Get-Item $MAVEN_M2_PATH).Target[0] + "/wrapper/dists"
+}
+
+$MAVEN_HOME_PARENT = "$MAVEN_WRAPPER_DISTS/$distributionUrlNameMain"
+$MAVEN_HOME_NAME = ([System.Security.Cryptography.SHA256]::Create().ComputeHash([byte[]][char[]]$distributionUrl) | ForEach-Object {$_.ToString("x2")}) -join ''
+$MAVEN_HOME = "$MAVEN_HOME_PARENT/$MAVEN_HOME_NAME"
+
+if (Test-Path -Path "$MAVEN_HOME" -PathType Container) {
+  Write-Verbose "found existing MAVEN_HOME at $MAVEN_HOME"
+  Write-Output "MVN_CMD=$MAVEN_HOME/bin/$MVN_CMD"
+  exit $?
+}
+
+if (! $distributionUrlNameMain -or ($distributionUrlName -eq $distributionUrlNameMain)) {
+  Write-Error "distributionUrl is not valid, must end with *-bin.zip, but found $distributionUrl"
+}
+
+# prepare tmp dir
+$TMP_DOWNLOAD_DIR_HOLDER = New-TemporaryFile
+$TMP_DOWNLOAD_DIR = New-Item -Itemtype Directory -Path "$TMP_DOWNLOAD_DIR_HOLDER.dir"
+$TMP_DOWNLOAD_DIR_HOLDER.Delete() | Out-Null
+trap {
+  if ($TMP_DOWNLOAD_DIR.Exists) {
+    try { Remove-Item $TMP_DOWNLOAD_DIR -Recurse -Force | Out-Null }
+    catch { Write-Warning "Cannot remove $TMP_DOWNLOAD_DIR" }
+  }
+}
+
+New-Item -Itemtype Directory -Path "$MAVEN_HOME_PARENT" -Force | Out-Null
+
+# Download and Install Apache Maven
+Write-Verbose "Couldn't find MAVEN_HOME, downloading and installing it ..."
+Write-Verbose "Downloading from: $distributionUrl"
+Write-Verbose "Downloading to: $TMP_DOWNLOAD_DIR/$distributionUrlName"
+
+$webclient = New-Object System.Net.WebClient
+if ($env:MVNW_USERNAME -and $env:MVNW_PASSWORD) {
+  $webclient.Credentials = New-Object System.Net.NetworkCredential($env:MVNW_USERNAME, $env:MVNW_PASSWORD)
+}
+[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12
+$webclient.DownloadFile($distributionUrl, "$TMP_DOWNLOAD_DIR/$distributionUrlName") | Out-Null
+
+# If specified, validate the SHA-256 sum of the Maven distribution zip file
+$distributionSha256Sum = (Get-Content -Raw "$scriptDir/.mvn/wrapper/maven-wrapper.properties" | ConvertFrom-StringData).distributionSha256Sum
+if ($distributionSha256Sum) {
+  if ($USE_MVND) {
+    Write-Error "Checksum validation is not supported for maven-mvnd. `nPlease disable validation by removing 'distributionSha256Sum' from your maven-wrapper.properties."
+  }
+  Import-Module $PSHOME\Modules\Microsoft.PowerShell.Utility -Function Get-FileHash
+  if ((Get-FileHash "$TMP_DOWNLOAD_DIR/$distributionUrlName" -Algorithm SHA256).Hash.ToLower() -ne $distributionSha256Sum) {
+    Write-Error "Error: Failed to validate Maven distribution SHA-256, your Maven distribution might be compromised. If you updated your Maven version, you need to update the specified distributionSha256Sum property."
+  }
+}
+
+# unzip and move
+Expand-Archive "$TMP_DOWNLOAD_DIR/$distributionUrlName" -DestinationPath "$TMP_DOWNLOAD_DIR" | Out-Null
+
+# Find the actual extracted directory name (handles snapshots where filename != directory name)
+$actualDistributionDir = ""
+
+# First try the expected directory name (for regular distributions)
+$expectedPath = Join-Path "$TMP_DOWNLOAD_DIR" "$distributionUrlNameMain"
+$expectedMvnPath = Join-Path "$expectedPath" "bin/$MVN_CMD"
+if ((Test-Path -Path $expectedPath -PathType Container) -and (Test-Path -Path $expectedMvnPath -PathType Leaf)) {
+  $actualDistributionDir = $distributionUrlNameMain
+}
+
+# If not found, search for any directory with the Maven executable (for snapshots)
+if (!$actualDistributionDir) {
+  Get-ChildItem -Path "$TMP_DOWNLOAD_DIR" -Directory | ForEach-Object {
+    $testPath = Join-Path $_.FullName "bin/$MVN_CMD"
+    if (Test-Path -Path $testPath -PathType Leaf) {
+      $actualDistributionDir = $_.Name
+    }
+  }
+}
+
+if (!$actualDistributionDir) {
+  Write-Error "Could not find Maven distribution directory in extracted archive"
+}
+
+Write-Verbose "Found extracted Maven distribution directory: $actualDistributionDir"
+Rename-Item -Path "$TMP_DOWNLOAD_DIR/$actualDistributionDir" -NewName $MAVEN_HOME_NAME | Out-Null
+try {
+  Move-Item -Path "$TMP_DOWNLOAD_DIR/$MAVEN_HOME_NAME" -Destination $MAVEN_HOME_PARENT | Out-Null
+} catch {
+  if (! (Test-Path -Path "$MAVEN_HOME" -PathType Container)) {
+    Write-Error "fail to move MAVEN_HOME"
+  }
+} finally {
+  try { Remove-Item $TMP_DOWNLOAD_DIR -Recurse -Force | Out-Null }
+  catch { Write-Warning "Cannot remove $TMP_DOWNLOAD_DIR" }
+}
+
+Write-Output "MVN_CMD=$MAVEN_HOME/bin/$MVN_CMD"
diff --git a/backend/pom.xml b/backend/pom.xml
new file mode 100644
index 000000000..74b8c4ce0
--- /dev/null
+++ b/backend/pom.xml
@@ -0,0 +1,147 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
+	<modelVersion>4.0.0</modelVersion>
+	<parent>
+		<groupId>org.springframework.boot</groupId>
+		<artifactId>spring-boot-starter-parent</artifactId>
+		<version>3.4.0</version>
+		<relativePath/> <!-- lookup parent from repository -->
+	</parent>
+	<groupId>com.algobuddy</groupId>
+	<artifactId>backend</artifactId>
+	<version>0.0.1-SNAPSHOT</version>
+	<name>backend</name>
+	<description/>
+	<url/>
+	<licenses>
+		<license/>
+	</licenses>
+	<developers>
+		<developer/>
+	</developers>
+	<scm>
+		<connection/>
+		<developerConnection/>
+		<tag/>
+		<url/>
+	</scm>
+	<properties>
+		<java.version>21</java.version>
+	</properties>
+	<dependencies>
+		<dependency>
+			<groupId>org.springframework.boot</groupId>
+			<artifactId>spring-boot-starter-data-jpa</artifactId>
+		</dependency>
+		<dependency>
+			<groupId>org.springframework.boot</groupId>
+			<artifactId>spring-boot-starter-security</artifactId>
+		</dependency>
+		<dependency>
+			<groupId>org.springframework.boot</groupId>
+			<artifactId>spring-boot-starter-oauth2-resource-server</artifactId>
+		</dependency>
+		<dependency>
+			<groupId>org.springframework.boot</groupId>
+			<artifactId>spring-boot-starter-web</artifactId>
+		</dependency>
+		<dependency>
+			<groupId>org.springframework.boot</groupId>
+			<artifactId>spring-boot-starter-validation</artifactId>
+		</dependency>
+
+		<dependency>
+			<groupId>org.postgresql</groupId>
+			<artifactId>postgresql</artifactId>
+			<scope>runtime</scope>
+		</dependency>
+		<dependency>
+			<groupId>org.projectlombok</groupId>
+			<artifactId>lombok</artifactId>
+			<optional>true</optional>
+		</dependency>
+		<dependency>
+			<groupId>org.springframework.boot</groupId>
+			<artifactId>spring-boot-starter-test</artifactId>
+			<scope>test</scope>
+		</dependency>
+		<dependency>
+			<groupId>org.springframework.security</groupId>
+			<artifactId>spring-security-test</artifactId>
+			<scope>test</scope>
+		</dependency>
+		<dependency>
+			<groupId>org.springdoc</groupId>
+			<artifactId>springdoc-openapi-starter-webmvc-ui</artifactId>
+			<version>2.5.0</version>
+		</dependency>
+		<dependency>
+			<groupId>com.bucket4j</groupId>
+			<artifactId>bucket4j-core</artifactId>
+			<version>8.10.1</version>
+		</dependency>
+		<dependency>
+			<groupId>org.springframework.boot</groupId>
+			<artifactId>spring-boot-starter-data-redis</artifactId>
+		</dependency>
+		<dependency>
+			<groupId>com.github.ben-manes.caffeine</groupId>
+			<artifactId>caffeine</artifactId>
+		</dependency>
+	</dependencies>
+
+	<build>
+		<plugins>
+			<plugin>
+				<groupId>org.springframework.boot</groupId>
+				<artifactId>spring-boot-maven-plugin</artifactId>
+				<configuration>
+					<excludes>
+						<exclude>
+							<groupId>org.projectlombok</groupId>
+							<artifactId>lombok</artifactId>
+						</exclude>
+					</excludes>
+				</configuration>
+			</plugin>
+			<plugin>
+				<groupId>org.apache.maven.plugins</groupId>
+				<artifactId>maven-compiler-plugin</artifactId>
+				<executions>
+					<execution>
+						<id>default-compile</id>
+						<phase>compile</phase>
+						<goals>
+							<goal>compile</goal>
+						</goals>
+						<configuration>
+							<annotationProcessorPaths>
+								<path>
+									<groupId>org.projectlombok</groupId>
+									<artifactId>lombok</artifactId>
+								</path>
+							</annotationProcessorPaths>
+						</configuration>
+					</execution>
+					<execution>
+						<id>default-testCompile</id>
+						<phase>test-compile</phase>
+						<goals>
+							<goal>testCompile</goal>
+						</goals>
+						<configuration>
+							<annotationProcessorPaths>
+								<path>
+									<groupId>org.projectlombok</groupId>
+									<artifactId>lombok</artifactId>
+								</path>
+							</annotationProcessorPaths>
+						</configuration>
+					</execution>
+				</executions>
+			</plugin>
+		</plugins>
+	</build>
+
+</project>
diff --git a/backend/src/main/java/com/algobuddy/backend/BackendApplication.java b/backend/src/main/java/com/algobuddy/backend/BackendApplication.java
new file mode 100644
index 000000000..ffa44e0b6
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/BackendApplication.java
@@ -0,0 +1,17 @@
+package com.algobuddy.backend;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+import org.springframework.cache.annotation.EnableCaching;
+import org.springframework.scheduling.annotation.EnableScheduling;
+
+@SpringBootApplication
+@EnableCaching
+@EnableScheduling
+public class BackendApplication {
+
+	public static void main(String[] args) {
+		SpringApplication.run(BackendApplication.class, args);
+	}
+
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/config/CacheConfig.java b/backend/src/main/java/com/algobuddy/backend/config/CacheConfig.java
new file mode 100644
index 000000000..d5a36e1cd
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/config/CacheConfig.java
@@ -0,0 +1,53 @@
+package com.algobuddy.backend.config;
+
+import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty;
+import org.springframework.cache.CacheManager;
+import org.springframework.cache.annotation.EnableCaching;
+import org.springframework.cache.concurrent.ConcurrentMapCacheManager;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.context.annotation.Primary;
+import org.springframework.data.redis.cache.RedisCacheConfiguration;
+import org.springframework.data.redis.cache.RedisCacheManager;
+import org.springframework.data.redis.connection.RedisConnectionFactory;
+
+import java.time.Duration;
+import java.util.Arrays;
+
+@Configuration
+@EnableCaching
+public class CacheConfig {
+
+    @Bean
+    @Primary
+    @ConditionalOnProperty(name = "app.cache.redis.enabled", havingValue = "true")
+    public CacheManager redisCacheManager(RedisConnectionFactory redisConnectionFactory) {
+        RedisCacheConfiguration defaults = RedisCacheConfiguration.defaultCacheConfig()
+            .entryTtl(Duration.ofMinutes(30))
+            .disableCachingNullValues();
+
+        return RedisCacheManager.builder(redisConnectionFactory)
+            .cacheDefaults(defaults)
+            .withCacheConfiguration("arenaProfile",
+                RedisCacheConfiguration.defaultCacheConfig()
+                    .entryTtl(Duration.ofMinutes(10)))
+            .withCacheConfiguration("arenaLeaderboard",
+                RedisCacheConfiguration.defaultCacheConfig()
+                    .entryTtl(Duration.ofMinutes(5)))
+            .withCacheConfiguration("mysheet",
+                RedisCacheConfiguration.defaultCacheConfig()
+                    .entryTtl(Duration.ofMinutes(30)))
+            .withCacheConfiguration("bookmarks",
+                RedisCacheConfiguration.defaultCacheConfig()
+                    .entryTtl(Duration.ofMinutes(60)))
+            .build();
+    }
+
+    @Bean
+    @ConditionalOnProperty(name = "app.cache.redis.enabled", havingValue = "false", matchIfMissing = true)
+    public CacheManager concurrentMapCacheManager() {
+        ConcurrentMapCacheManager cacheManager = new ConcurrentMapCacheManager();
+        cacheManager.setCacheNames(Arrays.asList("arenaProfile", "arenaLeaderboard", "mysheet", "bookmarks"));
+        return cacheManager;
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/config/OpenApiConfig.java b/backend/src/main/java/com/algobuddy/backend/config/OpenApiConfig.java
new file mode 100644
index 000000000..aea50fd22
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/config/OpenApiConfig.java
@@ -0,0 +1,33 @@
+package com.algobuddy.backend.config;
+
+import io.swagger.v3.oas.models.Components;
+import io.swagger.v3.oas.models.OpenAPI;
+import io.swagger.v3.oas.models.info.Info;
+import io.swagger.v3.oas.models.security.SecurityRequirement;
+import io.swagger.v3.oas.models.security.SecurityScheme;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+
+@Configuration
+public class OpenApiConfig {
+
+    @Bean
+    public OpenAPI customOpenAPI() {
+        final String securitySchemeName = "bearerAuth";
+        return new OpenAPI()
+                .info(new Info().title("AlgoBuddy API")
+                        .description("API Documentation for AlgoBuddy Application")
+                        .version("v1.0"))
+                .addSecurityItem(new SecurityRequirement().addList(securitySchemeName))
+                .components(
+                        new Components()
+                                .addSecuritySchemes(securitySchemeName,
+                                        new SecurityScheme()
+                                                .name(securitySchemeName)
+                                                .type(SecurityScheme.Type.HTTP)
+                                                .scheme("bearer")
+                                                .bearerFormat("JWT")
+                                )
+                );
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/config/RateLimitInterceptor.java b/backend/src/main/java/com/algobuddy/backend/config/RateLimitInterceptor.java
new file mode 100644
index 000000000..0dc545fad
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/config/RateLimitInterceptor.java
@@ -0,0 +1,140 @@
+package com.algobuddy.backend.config;
+
+import com.github.benmanes.caffeine.cache.Cache;
+import com.github.benmanes.caffeine.cache.Caffeine;
+import io.github.bucket4j.Bandwidth;
+import io.github.bucket4j.Bucket;
+import io.github.bucket4j.ConsumptionProbe;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.http.HttpStatus;
+import org.springframework.stereotype.Component;
+import org.springframework.web.servlet.HandlerInterceptor;
+import org.springframework.lang.NonNull;
+
+import java.net.InetAddress;
+import java.net.UnknownHostException;
+import java.time.Duration;
+import java.util.Arrays;
+import java.util.Set;
+import java.util.concurrent.TimeUnit;
+import java.util.stream.Collectors;
+
+@Component
+public class RateLimitInterceptor implements HandlerInterceptor {
+
+    @Value("${app.trusted-proxies:127.0.0.1,::1,10.0.0.1}")
+    private String trustedProxiesConfig;
+
+    private Set<String> trustedProxies;
+
+    private final Cache<String, Bucket> cache;
+
+    public RateLimitInterceptor() {
+        this.cache = Caffeine.newBuilder()
+                .expireAfterWrite(10, TimeUnit.MINUTES)
+                .maximumSize(10_000)
+                .build();
+    }
+
+    private Bucket newBucket() {
+        Bandwidth limit = Bandwidth.builder()
+                .capacity(100)
+                .refillGreedy(100, Duration.ofMinutes(1))
+                .build();
+        return Bucket.builder().addLimit(limit).build();
+    }
+
+    private Bucket resolveBucket(String key) {
+        return cache.get(key, k -> newBucket());
+    }
+
+    private Set<String> getTrustedProxies() {
+        if (trustedProxies == null) {
+            trustedProxies = Arrays.stream(trustedProxiesConfig.split(","))
+                    .map(String::trim)
+                    .filter(s -> !s.isEmpty())
+                    .collect(Collectors.toSet());
+        }
+        return trustedProxies;
+    }
+
+    private String extractClientIp(HttpServletRequest request) {
+        String xForwardedFor = request.getHeader("X-Forwarded-For");
+        if (xForwardedFor != null && !xForwardedFor.isEmpty() && isFromTrustedProxy(request)) {
+            String[] hops = xForwardedFor.split(",");
+            for (int i = hops.length - 1; i >= 0; i--) {
+                String ip = hops[i].trim();
+                if (isValidIp(ip) && !isPrivateIp(ip)) {
+                    return ip;
+                }
+            }
+        }
+        return request.getRemoteAddr();
+    }
+
+    private boolean isFromTrustedProxy(HttpServletRequest request) {
+        return getTrustedProxies().contains(request.getRemoteAddr());
+    }
+
+    private boolean isPrivateIp(String ip) {
+        if (ip.startsWith("10.") || ip.startsWith("192.168.") || ip.startsWith("127.") || ip.equals("::1") || ip.startsWith("fc") || ip.startsWith("fd")) {
+            return true;
+        }
+        if (ip.startsWith("172.")) {
+            try {
+                String[] parts = ip.split("\\.");
+                if (parts.length >= 2) {
+                    int secondOctet = Integer.parseInt(parts[1]);
+                    return secondOctet >= 16 && secondOctet <= 31;
+                }
+            } catch (Exception e) {}
+        }
+        return false;
+    }
+
+    private boolean isValidIp(String ip) {
+        if (ip == null || ip.isEmpty()) {
+            return false;
+        }
+        try {
+            // InetAddress.getByName accepts both IPv4 and IPv6 literals.
+            // Round-tripping through getHostAddress() rejects hostnames:
+            // a hostname would resolve to a different address string.
+            InetAddress addr = InetAddress.getByName(ip);
+            return addr.getHostAddress().equalsIgnoreCase(ip)
+                    || normalizeIpv6(addr.getHostAddress()).equalsIgnoreCase(normalizeIpv6(ip));
+        } catch (UnknownHostException e) {
+            return false;
+        }
+    }
+
+    /**
+     * Strip the zone-ID suffix (e.g. "%eth0") from an IPv6 address string
+     * before comparing, so that scoped addresses compare equal to their
+     * plain counterparts.
+     */
+    private static String normalizeIpv6(String ip) {
+        int zoneIndex = ip.indexOf('%');
+        return zoneIndex >= 0 ? ip.substring(0, zoneIndex) : ip;
+    }
+
+    @Override
+    public boolean preHandle(@NonNull HttpServletRequest request, @NonNull HttpServletResponse response, @NonNull Object handler) throws Exception {
+        String ip = extractClientIp(request);
+
+        Bucket bucket = resolveBucket(ip);
+        ConsumptionProbe probe = bucket.tryConsumeAndReturnRemaining(1);
+        
+        if (probe.isConsumed()) {
+            response.addHeader("X-Rate-Limit-Remaining", String.valueOf(probe.getRemainingTokens()));
+            return true;
+        } else {
+            response.setStatus(HttpStatus.TOO_MANY_REQUESTS.value());
+            response.getWriter().write("Too many requests. Please try again later.");
+            response.addHeader("X-Rate-Limit-Retry-After-Seconds", String.valueOf(probe.getNanosToWaitForRefill() / 1_000_000_000));
+            return false;
+        }
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/config/SecurityConfig.java b/backend/src/main/java/com/algobuddy/backend/config/SecurityConfig.java
new file mode 100644
index 000000000..b6ddc8693
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/config/SecurityConfig.java
@@ -0,0 +1,120 @@
+package com.algobuddy.backend.config;
+
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.security.config.annotation.web.builders.HttpSecurity;
+import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
+import org.springframework.security.config.http.SessionCreationPolicy;
+import org.springframework.security.oauth2.jwt.JwtDecoder;
+import org.springframework.security.oauth2.jwt.NimbusJwtDecoder;
+import org.springframework.security.web.SecurityFilterChain;
+import org.springframework.web.cors.CorsConfiguration;
+import org.springframework.web.cors.CorsConfigurationSource;
+import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
+import org.springframework.web.filter.ForwardedHeaderFilter;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Value;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.List;
+
+@Configuration
+@EnableWebSecurity
+public class SecurityConfig {
+
+    private static final Logger log = LoggerFactory.getLogger(SecurityConfig.class);
+
+    @Value("${app.allowed-origins:}")
+    private String allowedOrigins;
+
+    @Value("${app.environment:dev}")
+    private String environment;
+
+    List<String> resolveAllowedOrigins() {
+        List<String> list = new ArrayList<>();
+        if (allowedOrigins != null && !allowedOrigins.trim().isEmpty()) {
+            for (String origin : allowedOrigins.split(",")) {
+                origin = origin.trim();
+                if (!origin.isEmpty()) {
+                    if (origin.equals("*")) {
+                        log.warn("CORS configuration contains wildcard '*', which is not allowed. Skipping.");
+                        continue;
+                    }
+                    if (origin.endsWith("/")) {
+                        origin = origin.substring(0, origin.length() - 1);
+                    }
+                    if (origin.startsWith("http://") || origin.startsWith("https://")) {
+                        list.add(origin);
+                    } else {
+                        log.warn("Invalid CORS origin format: '{}'. Origins must start with http:// or https://. Skipping.", origin);
+                    }
+                }
+            }
+        }
+
+        if (list.isEmpty()) {
+            boolean isProd = environment != null && (environment.toLowerCase().contains("prod") || environment.toLowerCase().contains("production"));
+            if (isProd) {
+                log.error("No valid CORS allowed origins configured for production environment. All cross-origin requests will be blocked.");
+            } else {
+                log.info("No valid CORS allowed origins configured for development/test environment. Defaulting to 'http://localhost:3000'.");
+                list.add("http://localhost:3000");
+            }
+        } else {
+            log.info("CORS allowed origins configured: {}", list);
+        }
+        return list;
+    }
+    @Value("${supabase.url}")
+    private String supabaseUrl;
+
+    @Bean
+    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
+        http
+            .cors(cors -> cors.configurationSource(corsConfigurationSource()))
+            .csrf(csrf -> csrf.disable())
+            .sessionManagement(session ->
+                    session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
+            .authorizeHttpRequests(authz -> authz
+                    .requestMatchers("/v3/api-docs/**", "/swagger-ui/**", "/swagger-ui.html").permitAll()
+                    .requestMatchers(org.springframework.http.HttpMethod.GET, "/api/v1/arena/leaderboard", "/api/v1/arena/daily-challenge").permitAll()
+                    .anyRequest().authenticated())
+            .oauth2ResourceServer(oauth2 -> oauth2
+                    .jwt(jwt -> jwt.decoder(jwtDecoder())));
+
+        return http.build();
+    }
+
+    @Bean
+    public ForwardedHeaderFilter forwardedHeaderFilter() {
+        return new ForwardedHeaderFilter();
+    }
+
+    @Bean
+    public JwtDecoder jwtDecoder() {
+        String jwkSetUri = supabaseUrl + "/auth/v1/.well-known/jwks.json";
+        return NimbusJwtDecoder.withJwkSetUri(jwkSetUri)
+                .jwsAlgorithm(org.springframework.security.oauth2.jose.jws.SignatureAlgorithm.ES256)
+                .build();
+    }
+
+    @Bean
+    public CorsConfigurationSource corsConfigurationSource() {
+        CorsConfiguration configuration = new CorsConfiguration();
+        List<String> resolvedOrigins = resolveAllowedOrigins();
+        if (resolvedOrigins.isEmpty()) {
+            configuration.setAllowedOrigins(Collections.emptyList());
+        } else {
+            configuration.setAllowedOrigins(resolvedOrigins);
+        }
+        configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"));
+        configuration.setAllowedHeaders(Arrays.asList("authorization", "content-type", "x-auth-token"));
+        configuration.setExposedHeaders(Arrays.asList("x-auth-token"));
+        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
+        source.registerCorsConfiguration("/**", configuration);
+        return source;
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/config/WebMvcConfig.java b/backend/src/main/java/com/algobuddy/backend/config/WebMvcConfig.java
new file mode 100644
index 000000000..e0cf2d44b
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/config/WebMvcConfig.java
@@ -0,0 +1,29 @@
+package com.algobuddy.backend.config;
+
+import com.algobuddy.backend.config.resolver.CurrentUserIdArgumentResolver;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.method.support.HandlerMethodArgumentResolver;
+import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+import org.springframework.lang.NonNull;
+import java.util.List;
+
+@Configuration
+public class WebMvcConfig implements WebMvcConfigurer {
+
+    @Autowired
+    private RateLimitInterceptor rateLimitInterceptor;
+
+    @Override
+    public void addInterceptors(@NonNull InterceptorRegistry registry) {
+        registry.addInterceptor(rateLimitInterceptor)
+                .addPathPatterns("/api/**");
+    }
+
+    @Override
+    public void addArgumentResolvers(@NonNull List<HandlerMethodArgumentResolver> resolvers) {
+        resolvers.add(new CurrentUserIdArgumentResolver());
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/config/annotation/CurrentUserId.java b/backend/src/main/java/com/algobuddy/backend/config/annotation/CurrentUserId.java
new file mode 100644
index 000000000..09ea6e366
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/config/annotation/CurrentUserId.java
@@ -0,0 +1,15 @@
+package com.algobuddy.backend.config.annotation;
+
+import java.lang.annotation.ElementType;
+import java.lang.annotation.Retention;
+import java.lang.annotation.RetentionPolicy;
+import java.lang.annotation.Target;
+
+/**
+ * Annotation to inject the current user's UUID into controller method parameters.
+ * Automatically extracts the UUID from the JWT subject.
+ */
+@Target(ElementType.PARAMETER)
+@Retention(RetentionPolicy.RUNTIME)
+public @interface CurrentUserId {
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/config/resolver/CurrentUserIdArgumentResolver.java b/backend/src/main/java/com/algobuddy/backend/config/resolver/CurrentUserIdArgumentResolver.java
new file mode 100644
index 000000000..aaf97757e
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/config/resolver/CurrentUserIdArgumentResolver.java
@@ -0,0 +1,38 @@
+package com.algobuddy.backend.config.resolver;
+
+import com.algobuddy.backend.config.annotation.CurrentUserId;
+import org.springframework.core.MethodParameter;
+import org.springframework.security.authentication.AuthenticationCredentialsNotFoundException;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.oauth2.jwt.Jwt;
+import org.springframework.web.bind.support.WebDataBinderFactory;
+import org.springframework.web.context.request.NativeWebRequest;
+import org.springframework.web.method.support.HandlerMethodArgumentResolver;
+import org.springframework.web.method.support.ModelAndViewContainer;
+
+import org.springframework.lang.NonNull;
+import org.springframework.lang.Nullable;
+
+import java.util.UUID;
+
+public class CurrentUserIdArgumentResolver implements HandlerMethodArgumentResolver {
+
+    @Override
+    public boolean supportsParameter(@NonNull MethodParameter parameter) {
+        return parameter.getParameterAnnotation(CurrentUserId.class) != null
+                && parameter.getParameterType().equals(UUID.class);
+    }
+
+    @Override
+    public Object resolveArgument(@NonNull MethodParameter parameter, @Nullable ModelAndViewContainer mavContainer,
+                                  @NonNull NativeWebRequest webRequest, @Nullable WebDataBinderFactory binderFactory) throws Exception {
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+
+        if (authentication == null || !(authentication.getPrincipal() instanceof Jwt jwt)) {
+            throw new AuthenticationCredentialsNotFoundException("User is not authenticated");
+        }
+
+        return UUID.fromString(jwt.getSubject());
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/controller/ArenaController.java b/backend/src/main/java/com/algobuddy/backend/controller/ArenaController.java
new file mode 100644
index 000000000..ab1555584
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/controller/ArenaController.java
@@ -0,0 +1,73 @@
+package com.algobuddy.backend.controller;
+
+import com.algobuddy.backend.config.annotation.CurrentUserId;
+import com.algobuddy.backend.dto.ArenaProfileResponse;
+import com.algobuddy.backend.dto.InitMatchRequest;
+import com.algobuddy.backend.service.ArenaService;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.responses.ApiResponse;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import jakarta.validation.Valid;
+import lombok.RequiredArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.List;
+import java.util.UUID;
+
+@RestController
+@RequestMapping("/api/v1/arena")
+@RequiredArgsConstructor
+@Tag(name = "Arena", description = "Endpoints for multiplayer coding arena, matchmaking, and leaderboards")
+public class ArenaController {
+
+    private final ArenaService arenaService;
+
+    @GetMapping("/profile")
+    @Operation(summary = "Get user arena profile", description = "Retrieves the arena statistics and rating for the authenticated user.")
+    @ApiResponse(responseCode = "200", description = "Successfully retrieved profile")
+    public ResponseEntity<ArenaProfileResponse> getProfile(@CurrentUserId UUID userId) {
+        return ResponseEntity.ok(arenaService.getProfile(userId));
+    }
+
+    @GetMapping("/leaderboard")
+    @Operation(summary = "Get arena leaderboard", description = "Retrieves the top ranked users in the arena.")
+    @ApiResponse(responseCode = "200", description = "Successfully retrieved leaderboard")
+    public ResponseEntity<List<ArenaProfileResponse>> getLeaderboard() {
+        return ResponseEntity.ok(arenaService.getLeaderboard());
+    }
+
+    @GetMapping("/history")
+    @Operation(summary = "Get match history", description = "Retrieves the past arena matches for the authenticated user.")
+    @ApiResponse(responseCode = "200", description = "Successfully retrieved match history")
+    public ResponseEntity<List<com.algobuddy.backend.dto.ArenaMatchResponse>> getMatchHistory(@CurrentUserId UUID userId) {
+        return ResponseEntity.ok(arenaService.getMatchHistory(userId));
+    }
+
+    @GetMapping("/daily-challenge")
+    @Operation(summary = "Get daily challenge", description = "Retrieves the daily coding challenge for the arena.")
+    @ApiResponse(responseCode = "200", description = "Successfully retrieved daily challenge")
+    public ResponseEntity<com.algobuddy.backend.dto.DailyChallengeResponse> getDailyChallenge() {
+        return ResponseEntity.ok(arenaService.getDailyChallenge());
+    }
+
+    @PostMapping("/match/init")
+    @Operation(summary = "Initialize match", description = "Creates a match record before the duel begins. Must be called when both players are matched.")
+    @ApiResponse(responseCode = "200", description = "Match initialized successfully")
+    public ResponseEntity<String> initMatch(@CurrentUserId UUID userId, @Valid @RequestBody InitMatchRequest request) {
+        arenaService.initMatch(userId, request);
+        return ResponseEntity.ok("Match initialized successfully");
+    }
+
+    @PostMapping("/match-result")
+    @Operation(summary = "Record match result", description = "Records the outcome of an arena match.")
+    @ApiResponse(responseCode = "200", description = "Match result recorded successfully")
+    public ResponseEntity<String> recordMatchResult(@CurrentUserId UUID userId, @Valid @RequestBody com.algobuddy.backend.dto.RecordMatchRequest request) {
+        arenaService.recordMatchResult(userId, request);
+        return ResponseEntity.ok("Match result recorded successfully");
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/controller/BookmarkController.java b/backend/src/main/java/com/algobuddy/backend/controller/BookmarkController.java
new file mode 100644
index 000000000..da481b774
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/controller/BookmarkController.java
@@ -0,0 +1,60 @@
+package com.algobuddy.backend.controller;
+
+import com.algobuddy.backend.config.annotation.CurrentUserId;
+import com.algobuddy.backend.dto.BookmarkDto;
+import com.algobuddy.backend.dto.BookmarkRequestDto;
+import com.algobuddy.backend.entity.Bookmark;
+import com.algobuddy.backend.mapper.BookmarkMapper;
+import com.algobuddy.backend.service.BookmarkService;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.responses.ApiResponse;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import jakarta.validation.Valid;
+import jakarta.validation.constraints.NotBlank;
+import lombok.RequiredArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.validation.annotation.Validated;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+import java.util.UUID;
+
+@RestController
+@RequestMapping("/api/v1/bookmarks")
+@RequiredArgsConstructor
+@Validated
+@Tag(name = "Bookmarks", description = "Endpoints for managing user bookmarks")
+public class BookmarkController {
+
+    private final BookmarkService bookmarkService;
+    private final BookmarkMapper bookmarkMapper;
+
+    @GetMapping
+    @Operation(summary = "Get bookmarks", description = "Retrieves a list of bookmarks for the authenticated user.")
+    @ApiResponse(responseCode = "200", description = "Successfully retrieved bookmarks")
+    public ResponseEntity<List<BookmarkDto>> getBookmarks(@CurrentUserId UUID userId) {
+        List<Bookmark> bookmarks = bookmarkService.getBookmarks(userId);
+        List<BookmarkDto> dtos = bookmarks.stream()
+                                          .map(bookmarkMapper::toDto)
+                                          .toList();
+        return ResponseEntity.ok(dtos);
+    }
+
+    @PostMapping
+    @Operation(summary = "Add bookmark", description = "Adds a new bookmark for the authenticated user.")
+    @ApiResponse(responseCode = "200", description = "Successfully added bookmark")
+    public ResponseEntity<Void> addBookmark(@CurrentUserId UUID userId, 
+                                            @Valid @RequestBody BookmarkRequestDto request) {
+        bookmarkService.addBookmark(userId, request.getProblemId(), request.getTopicSlug());
+        return ResponseEntity.ok().build();
+    }
+
+    @DeleteMapping
+    @Operation(summary = "Remove bookmark", description = "Removes a specific bookmark for the authenticated user.")
+    @ApiResponse(responseCode = "200", description = "Successfully removed bookmark")
+    public ResponseEntity<Void> removeBookmark(@CurrentUserId UUID userId, 
+                                               @NotBlank(message = "problemId cannot be empty") @RequestParam String problemId) {
+        bookmarkService.removeBookmark(userId, problemId);
+        return ResponseEntity.ok().build();
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/controller/GlobalExceptionHandler.java b/backend/src/main/java/com/algobuddy/backend/controller/GlobalExceptionHandler.java
new file mode 100644
index 000000000..df5572b56
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/controller/GlobalExceptionHandler.java
@@ -0,0 +1,106 @@
+package com.algobuddy.backend.controller;
+
+import org.springframework.dao.DataIntegrityViolationException;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.MethodArgumentNotValidException;
+import org.springframework.web.bind.annotation.ExceptionHandler;
+import org.springframework.web.bind.annotation.RestControllerAdvice;
+
+import org.springframework.web.servlet.mvc.method.annotation.ResponseEntityExceptionHandler;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.HttpStatusCode;
+import org.springframework.web.context.request.WebRequest;
+import jakarta.validation.ConstraintViolationException;
+import org.springframework.lang.NonNull;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import jakarta.persistence.EntityNotFoundException;
+import org.springframework.orm.ObjectOptimisticLockingFailureException;
+import org.springframework.security.authentication.AuthenticationCredentialsNotFoundException;
+
+import java.util.HashMap;
+import java.util.Map;
+
+@RestControllerAdvice
+public class GlobalExceptionHandler extends ResponseEntityExceptionHandler {
+
+    private static final Logger log = LoggerFactory.getLogger(GlobalExceptionHandler.class);
+
+    @Override
+    protected ResponseEntity<Object> handleMethodArgumentNotValid(@NonNull MethodArgumentNotValidException ex, @NonNull HttpHeaders headers, @NonNull HttpStatusCode status, @NonNull WebRequest request) {
+        Map<String, String> errors = new HashMap<>();
+        ex.getBindingResult().getFieldErrors().forEach(error -> 
+            errors.put(error.getField(), error.getDefaultMessage()));
+        return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(errors);
+    }
+
+    @ExceptionHandler(ConstraintViolationException.class)
+    public ResponseEntity<Map<String, String>> handleConstraintViolationException(ConstraintViolationException ex) {
+        Map<String, String> response = new HashMap<>();
+        response.put("error", "Validation failed: " + ex.getMessage());
+        return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(response);
+    }
+
+    @ExceptionHandler(DataIntegrityViolationException.class)
+    public ResponseEntity<Map<String, String>> handleDataIntegrityViolation(DataIntegrityViolationException ex) {
+        Map<String, String> response = new HashMap<>();
+        response.put("error", "Data integrity violation. A conflict occurred, likely due to a duplicate entry.");
+        return ResponseEntity.status(HttpStatus.CONFLICT).body(response);
+    }
+
+    @ExceptionHandler(AuthenticationCredentialsNotFoundException.class)
+    public ResponseEntity<Map<String, String>> handleAuthenticationCredentialsNotFound(AuthenticationCredentialsNotFoundException ex) {
+        Map<String, String> response = new HashMap<>();
+        response.put("error", "Authentication required. Please log in.");
+        return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body(response);
+    }
+
+    @ExceptionHandler(EntityNotFoundException.class)
+    public ResponseEntity<Map<String, String>> handleEntityNotFoundException(EntityNotFoundException ex) {
+        Map<String, String> response = new HashMap<>();
+        response.put("error", "Resource not found.");
+        return ResponseEntity.status(HttpStatus.NOT_FOUND).body(response);
+    }
+
+    @ExceptionHandler(ObjectOptimisticLockingFailureException.class)
+    public ResponseEntity<Map<String, String>> handleOptimisticLockingFailure(ObjectOptimisticLockingFailureException ex) {
+        Map<String, String> response = new HashMap<>();
+        response.put("error", "Conflict: The resource was updated by another request. Please try again.");
+        return ResponseEntity.status(HttpStatus.CONFLICT).body(response);
+    }
+
+    @ExceptionHandler(IllegalArgumentException.class)
+    public ResponseEntity<Map<String, String>> handleIllegalArgumentException(IllegalArgumentException ex) {
+        Map<String, String> response = new HashMap<>();
+        response.put("error", ex.getMessage());
+        return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(response);
+    }
+
+    @ExceptionHandler(IllegalStateException.class)
+    public ResponseEntity<Map<String, String>> handleIllegalStateException(IllegalStateException ex) {
+        Map<String, String> response = new HashMap<>();
+        response.put("error", ex.getMessage());
+        HttpStatus status = HttpStatus.BAD_REQUEST;
+        if (ex.getMessage() != null && ex.getMessage().toLowerCase().contains("rate limit")) {
+            status = HttpStatus.TOO_MANY_REQUESTS;
+        }
+        return ResponseEntity.status(status).body(response);
+    }
+
+    @ExceptionHandler(SecurityException.class)
+    public ResponseEntity<Map<String, String>> handleSecurityException(SecurityException ex) {
+        Map<String, String> response = new HashMap<>();
+        response.put("error", ex.getMessage());
+        return ResponseEntity.status(HttpStatus.FORBIDDEN).body(response);
+    }
+
+    @ExceptionHandler(Exception.class)
+    public ResponseEntity<Map<String, String>> handleGenericException(Exception ex) {
+        log.error("Unhandled exception occurred: ", ex);
+        Map<String, String> response = new HashMap<>();
+        response.put("error", "An internal server error occurred.");
+        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(response);
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/controller/LeaderboardController.java b/backend/src/main/java/com/algobuddy/backend/controller/LeaderboardController.java
new file mode 100644
index 000000000..92258b39b
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/controller/LeaderboardController.java
@@ -0,0 +1,32 @@
+package com.algobuddy.backend.controller;
+
+import com.algobuddy.backend.dto.LeaderboardEntryDto;
+import com.algobuddy.backend.service.LeaderboardService;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import lombok.RequiredArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+@RestController
+@RequestMapping("/api/v1/leaderboard")
+@RequiredArgsConstructor
+@Tag(name = "Leaderboard", description = "Endpoints for fetching global leaderboards")
+public class LeaderboardController {
+
+    private final LeaderboardService leaderboardService;
+
+    @GetMapping("/global/streak")
+    @Operation(summary = "Global streak leaderboard", description = "Top users by streak")
+    public ResponseEntity<List<LeaderboardEntryDto>> getGlobalStreak() {
+        return ResponseEntity.ok(leaderboardService.getGlobalStreakLeaderboard());
+    }
+
+    @GetMapping("/global/arena")
+    @Operation(summary = "Global arena leaderboard", description = "Top users by ELO rating")
+    public ResponseEntity<List<LeaderboardEntryDto>> getGlobalArena() {
+        return ResponseEntity.ok(leaderboardService.getGlobalArenaLeaderboard());
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/controller/MySheetController.java b/backend/src/main/java/com/algobuddy/backend/controller/MySheetController.java
new file mode 100644
index 000000000..1f6d5321d
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/controller/MySheetController.java
@@ -0,0 +1,93 @@
+package com.algobuddy.backend.controller;
+
+import com.algobuddy.backend.config.annotation.CurrentUserId;
+import com.algobuddy.backend.dto.MySheetDto;
+import com.algobuddy.backend.dto.MySheetRequestDto;
+import com.algobuddy.backend.dto.MySheetResponseDto;
+import com.algobuddy.backend.entity.MySheet;
+import com.algobuddy.backend.mapper.MySheetMapper;
+import com.algobuddy.backend.service.MySheetService;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.responses.ApiResponse;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import jakarta.validation.Valid;
+import jakarta.validation.constraints.NotBlank;
+import lombok.RequiredArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.validation.annotation.Validated;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+import java.util.UUID;
+import java.util.stream.Collectors;
+
+@RestController
+@RequestMapping("/api/v1/mysheet")
+@RequiredArgsConstructor
+@Validated
+@Tag(name = "My Sheet", description = "Endpoints for managing user's personal coding sheet")
+public class MySheetController {
+
+    private final MySheetService mySheetService;
+    private final MySheetMapper mySheetMapper;
+
+    @GetMapping
+    @Operation(summary = "Get my sheet items", description = "Retrieves a list of items in the user's personal sheet.")
+    @ApiResponse(responseCode = "200", description = "Successfully retrieved sheet items")
+    public ResponseEntity<MySheetResponseDto> getMySheet(@CurrentUserId UUID userId) {
+        List<MySheet> sheetItems = mySheetService.getMySheet(userId);
+        List<MySheetDto> dtos = sheetItems.stream()
+                                          .map(mySheetMapper::toDto)
+                                          .toList();
+        return ResponseEntity.ok(MySheetResponseDto.builder().items(dtos).build());
+    }
+
+    @PostMapping
+    @Operation(summary = "Add to sheet", description = "Adds a problem to the user's personal sheet.")
+    @ApiResponse(responseCode = "200", description = "Successfully added to sheet")
+    public ResponseEntity<Void> addToSheet(@CurrentUserId UUID userId,
+                                           @Valid @RequestBody MySheetRequestDto request) {
+        mySheetService.addToSheet(userId, request.getProblemId(), request.getNote(), request.getIsPublic(), request.getSharedNotes());
+        return ResponseEntity.ok().build();
+    }
+
+    @PatchMapping("/{problemId}/visibility")
+    @Operation(summary = "Update sheet item visibility", description = "Updates the public visibility and shared-notes flag of a sheet item.")
+    @ApiResponse(responseCode = "200", description = "Successfully updated visibility")
+    public ResponseEntity<Void> updateVisibility(@CurrentUserId UUID userId,
+                                                  @PathVariable String problemId,
+                                                  @RequestBody java.util.Map<String, Boolean> body) {
+        Boolean sharedNotes = body.get("sharedNotes");
+        mySheetService.updateVisibility(userId, problemId, body.getOrDefault("isPublic", false), sharedNotes);
+        return ResponseEntity.ok().build();
+    }
+
+    @DeleteMapping
+    @Operation(summary = "Remove from sheet", description = "Removes a problem from the user's personal sheet.")
+    @ApiResponse(responseCode = "200", description = "Successfully removed from sheet")
+    public ResponseEntity<Void> removeFromSheet(@CurrentUserId UUID userId,
+                                                @NotBlank(message = "problemId cannot be empty") @RequestParam String problemId) {
+        mySheetService.removeFromSheet(userId, problemId);
+        return ResponseEntity.ok().build();
+    }
+
+    @GetMapping("/shared/{userId}")
+    @Operation(summary = "Get shared sheet", description = "Retrieves the public sheet items for a given user ID.")
+    @ApiResponse(responseCode = "200", description = "Successfully retrieved shared sheet items")
+    public ResponseEntity<MySheetResponseDto> getSharedSheet(@PathVariable UUID userId) {
+        List<MySheet> items = mySheetService.getSharedSheet(userId);
+        List<MySheetDto> dtos = items.stream()
+                .map(mySheetMapper::toDto)
+                .peek(dto -> { if (!dto.isSharedNotes()) dto.setNote(null); })
+                .collect(Collectors.toList());
+        return ResponseEntity.ok(MySheetResponseDto.builder().items(dtos).build());
+    }
+
+    @PostMapping("/clone/{sharedUserId}")
+    @Operation(summary = "Clone shared sheet", description = "Clones a shared sheet into the authenticated user's sheet.")
+    @ApiResponse(responseCode = "200", description = "Successfully cloned sheet")
+    public ResponseEntity<Void> cloneSharedSheet(@CurrentUserId UUID userId, @PathVariable UUID sharedUserId) {
+        mySheetService.cloneSheet(sharedUserId, userId);
+        return ResponseEntity.ok().build();
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/controller/PracticeController.java b/backend/src/main/java/com/algobuddy/backend/controller/PracticeController.java
new file mode 100644
index 000000000..382e0b268
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/controller/PracticeController.java
@@ -0,0 +1,52 @@
+package com.algobuddy.backend.controller;
+
+import com.algobuddy.backend.config.annotation.CurrentUserId;
+import com.algobuddy.backend.dto.BulkProgressRequest;
+import com.algobuddy.backend.dto.ProgressRequest;
+import com.algobuddy.backend.dto.ProgressResponse;
+import com.algobuddy.backend.service.PracticeService;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.responses.ApiResponse;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import lombok.RequiredArgsConstructor;
+import jakarta.validation.Valid;
+import org.springframework.http.ResponseEntity;
+import org.springframework.lang.NonNull;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.UUID;
+@RestController
+@RequestMapping("/api/v1/practice")
+@RequiredArgsConstructor
+@Tag(name = "Practice", description = "Endpoints for user practice progress and statistics")
+public class PracticeController {
+
+    private final PracticeService practiceService;
+
+    @GetMapping("/progress")
+    @Operation(summary = "Get user progress", description = "Retrieves the practice progress and statistics for the authenticated user.")
+    @ApiResponse(responseCode = "200", description = "Successfully retrieved progress")
+    public ResponseEntity<ProgressResponse> getProgress(@CurrentUserId @NonNull UUID userId) {
+        return ResponseEntity.ok(practiceService.getUserProgress(userId));
+    }
+
+    @PostMapping("/progress")
+    @Operation(summary = "Update progress", description = "Updates the progress status of a single practice problem.")
+    @ApiResponse(responseCode = "200", description = "Successfully updated progress")
+    @ApiResponse(responseCode = "400", description = "Invalid request payload")
+    public ResponseEntity<ProgressResponse> updateProgress(@CurrentUserId @NonNull UUID userId, 
+                                                           @Valid @RequestBody ProgressRequest request) {
+        ProgressResponse response = practiceService.updateProgress(userId, request);
+        return ResponseEntity.ok(response);
+    }
+
+    @PostMapping("/progress/bulk")
+    @Operation(summary = "Bulk update progress", description = "Updates the progress status of multiple practice problems at once.")
+    @ApiResponse(responseCode = "200", description = "Successfully updated bulk progress")
+    @ApiResponse(responseCode = "400", description = "Invalid request payload")
+    public ResponseEntity<ProgressResponse> bulkUpdateProgress(@CurrentUserId @NonNull UUID userId,
+                                                               @Valid @RequestBody BulkProgressRequest request) {
+        ProgressResponse response = practiceService.bulkUpdateProgress(userId, request);
+        return ResponseEntity.ok(response);
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/controller/UserProfileController.java b/backend/src/main/java/com/algobuddy/backend/controller/UserProfileController.java
new file mode 100644
index 000000000..494dc3c23
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/controller/UserProfileController.java
@@ -0,0 +1,39 @@
+package com.algobuddy.backend.controller;
+
+import com.algobuddy.backend.config.annotation.CurrentUserId;
+import com.algobuddy.backend.dto.UserProfileDto;
+import com.algobuddy.backend.entity.UserProfile;
+import com.algobuddy.backend.service.UserProfileService;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import jakarta.validation.Valid;
+import lombok.RequiredArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.UUID;
+
+@RestController
+@RequestMapping("/api/v1/users/profile")
+@RequiredArgsConstructor
+@Tag(name = "UserProfile", description = "Endpoints for managing user profile cache")
+public class UserProfileController {
+
+    private final UserProfileService userProfileService;
+
+    @PostMapping
+    @Operation(summary = "Upsert user profile", description = "Updates or creates the cached user profile with username and avatar")
+    public ResponseEntity<UserProfile> upsertProfile(@CurrentUserId UUID userId, @Valid @RequestBody UserProfileDto dto) {
+        return ResponseEntity.ok(userProfileService.upsertProfile(userId, dto));
+    }
+    
+    @GetMapping
+    @Operation(summary = "Get user profile")
+    public ResponseEntity<UserProfile> getProfile(@CurrentUserId UUID userId) {
+        UserProfile profile = userProfileService.getProfile(userId);
+        if (profile == null) {
+            return ResponseEntity.notFound().build();
+        }
+        return ResponseEntity.ok(profile);
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/dto/ArenaLeaderboardProjection.java b/backend/src/main/java/com/algobuddy/backend/dto/ArenaLeaderboardProjection.java
new file mode 100644
index 000000000..78fdc943b
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/dto/ArenaLeaderboardProjection.java
@@ -0,0 +1,15 @@
+package com.algobuddy.backend.dto;
+
+import java.util.UUID;
+
+public interface ArenaLeaderboardProjection {
+    UUID getUserId();
+    Integer getXp();
+    Integer getLevel();
+    Integer getRating();
+    Integer getBattlesWon();
+    Integer getBattlesLost();
+    Integer getTotalProblemsSolved();
+    String getName();
+    String getAvatarUrl();
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/dto/ArenaMatchResponse.java b/backend/src/main/java/com/algobuddy/backend/dto/ArenaMatchResponse.java
new file mode 100644
index 000000000..e3ba77524
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/dto/ArenaMatchResponse.java
@@ -0,0 +1,24 @@
+package com.algobuddy.backend.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.time.LocalDateTime;
+import java.util.UUID;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+@Builder
+public class ArenaMatchResponse {
+    private UUID id;
+    private String opponentName; // We might just use "Opponent {uuid}" for now since we don't have a joined users table
+    private String topic;
+    private String difficulty;
+    private LocalDateTime startTime;
+    private String result; // "Victory", "Defeat", "Draw", "In Progress"
+    private Integer ratingChange; // The change specific to the requesting user
+    private Integer xpAwarded; // The XP awarded to the requesting user
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/dto/ArenaProfileResponse.java b/backend/src/main/java/com/algobuddy/backend/dto/ArenaProfileResponse.java
new file mode 100644
index 000000000..1cb1a9cb3
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/dto/ArenaProfileResponse.java
@@ -0,0 +1,29 @@
+package com.algobuddy.backend.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.io.Serializable;
+import java.util.UUID;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+@Builder
+public class ArenaProfileResponse implements Serializable {
+    private static final long serialVersionUID = 1L;
+
+    private UUID userId;
+    private Integer xp;
+    private Integer level;
+    private Integer rating;
+    private Integer battlesWon;
+    private Integer battlesLost;
+    private Integer totalProblemsSolved;
+    private Integer rank; // Calculated rank compared to others
+    private String name;
+    private String avatarUrl;
+}
+
diff --git a/backend/src/main/java/com/algobuddy/backend/dto/BookmarkDto.java b/backend/src/main/java/com/algobuddy/backend/dto/BookmarkDto.java
new file mode 100644
index 000000000..27d45d7f9
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/dto/BookmarkDto.java
@@ -0,0 +1,17 @@
+package com.algobuddy.backend.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+import java.time.OffsetDateTime;
+
+@Data
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+public class BookmarkDto {
+    private String problemId;
+    private String topicSlug;
+    private OffsetDateTime createdAt;
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/dto/BookmarkRequestDto.java b/backend/src/main/java/com/algobuddy/backend/dto/BookmarkRequestDto.java
new file mode 100644
index 000000000..0f7d75c16
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/dto/BookmarkRequestDto.java
@@ -0,0 +1,18 @@
+package com.algobuddy.backend.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+import jakarta.validation.constraints.NotBlank;
+
+@Data
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+public class BookmarkRequestDto {
+    @NotBlank(message = "problemId is required")
+    private String problemId;
+    @NotBlank(message = "topicSlug is required")
+    private String topicSlug;
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/dto/BulkProgressRequest.java b/backend/src/main/java/com/algobuddy/backend/dto/BulkProgressRequest.java
new file mode 100644
index 000000000..4c238a47b
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/dto/BulkProgressRequest.java
@@ -0,0 +1,32 @@
+package com.algobuddy.backend.dto;
+
+import jakarta.validation.Valid;
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.NotEmpty;
+import jakarta.validation.constraints.Pattern;
+import jakarta.validation.constraints.Size;
+import java.util.List;
+import lombok.Data;
+
+@Data
+public class BulkProgressRequest {
+
+    @Valid
+    @NotEmpty(message = "items cannot be empty")
+    @Size(max = 100, message = "Bulk update limited to 100 items per request")
+    private List<Item> items;
+
+    @Pattern(regexp = "^\\d{4}-\\d{2}-\\d{2}$", message = "Invalid date format. Must be YYYY-MM-DD")
+    private String localDate;
+
+    @Data
+    public static class Item {
+        @NotBlank(message = "problemId is required")
+        private String problemId;
+        
+        @NotBlank(message = "status is required")
+        @Pattern(regexp = "^(Completed|In Progress|Attempted|Bookmarked)$",
+                 message = "Invalid status. Must be one of: Completed, In Progress, Attempted, Bookmarked")
+        private String status;
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/dto/DailyChallengeResponse.java b/backend/src/main/java/com/algobuddy/backend/dto/DailyChallengeResponse.java
new file mode 100644
index 000000000..355e83cdc
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/dto/DailyChallengeResponse.java
@@ -0,0 +1,20 @@
+package com.algobuddy.backend.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+public class DailyChallengeResponse {
+    private String id;
+    private String title;
+    private String description;
+    private String difficulty;
+    private String topic;
+    private int xpAward;
+    private String practiceUrl;
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/dto/InitMatchRequest.java b/backend/src/main/java/com/algobuddy/backend/dto/InitMatchRequest.java
new file mode 100644
index 000000000..0d9de92e3
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/dto/InitMatchRequest.java
@@ -0,0 +1,19 @@
+package com.algobuddy.backend.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+import jakarta.validation.constraints.NotBlank;
+
+@Data
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+public class InitMatchRequest {
+    @NotBlank(message = "matchId is required")
+    private String matchId;
+
+    private String topic;
+    private String difficulty;
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/dto/LeaderboardEntryDto.java b/backend/src/main/java/com/algobuddy/backend/dto/LeaderboardEntryDto.java
new file mode 100644
index 000000000..952b85f58
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/dto/LeaderboardEntryDto.java
@@ -0,0 +1,20 @@
+package com.algobuddy.backend.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.util.UUID;
+
+@Data
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+public class LeaderboardEntryDto {
+    private int rank;
+    private UUID userId;
+    private String username;
+    private String avatarUrl;
+    private int score;
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/dto/MySheetDto.java b/backend/src/main/java/com/algobuddy/backend/dto/MySheetDto.java
new file mode 100644
index 000000000..35a58e802
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/dto/MySheetDto.java
@@ -0,0 +1,19 @@
+package com.algobuddy.backend.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+import java.time.OffsetDateTime;
+
+@Data
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+public class MySheetDto {
+    private String problemId;
+    private String note;
+    private boolean isPublic;
+    private boolean sharedNotes;
+    private OffsetDateTime addedAt;
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/dto/MySheetRequestDto.java b/backend/src/main/java/com/algobuddy/backend/dto/MySheetRequestDto.java
new file mode 100644
index 000000000..c90bec3a4
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/dto/MySheetRequestDto.java
@@ -0,0 +1,19 @@
+package com.algobuddy.backend.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+import jakarta.validation.constraints.NotBlank;
+
+@Data
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+public class MySheetRequestDto {
+    @NotBlank(message = "problemId is required")
+    private String problemId;
+    private String note;
+    private Boolean isPublic;
+    private Boolean sharedNotes;
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/dto/MySheetResponseDto.java b/backend/src/main/java/com/algobuddy/backend/dto/MySheetResponseDto.java
new file mode 100644
index 000000000..37b6adbed
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/dto/MySheetResponseDto.java
@@ -0,0 +1,15 @@
+package com.algobuddy.backend.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+import java.util.List;
+
+@Data
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+public class MySheetResponseDto {
+    private List<MySheetDto> items;
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/dto/ProgressRequest.java b/backend/src/main/java/com/algobuddy/backend/dto/ProgressRequest.java
new file mode 100644
index 000000000..2c209d401
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/dto/ProgressRequest.java
@@ -0,0 +1,17 @@
+package com.algobuddy.backend.dto;
+
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.Pattern;
+import lombok.Data;
+
+@Data
+public class ProgressRequest {
+    @NotBlank(message = "problemId is required")
+    private String problemId;
+    @NotBlank(message = "status is required")
+    @Pattern(regexp = "^(Completed|In Progress|Attempted|Bookmarked)$",
+             message = "Invalid status. Must be one of: Completed, In Progress, Attempted, Bookmarked")
+    private String status;
+
+    private String localDate;
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/dto/ProgressResponse.java b/backend/src/main/java/com/algobuddy/backend/dto/ProgressResponse.java
new file mode 100644
index 000000000..ccf2d8d34
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/dto/ProgressResponse.java
@@ -0,0 +1,30 @@
+package com.algobuddy.backend.dto;
+
+import lombok.Data;
+import lombok.Builder;
+
+import java.util.Map;
+
+@Data
+@Builder
+public class ProgressResponse {
+    private Map<String, ProgressDetail> progress;
+    private Integer currentStreak;
+    private Integer longestStreak;
+    private Integer visualizedCount;
+    private Integer dailySolved;
+    private Integer weeklySolved;
+    private Integer monthlySolved;
+
+    @Data
+    public static class ProgressDetail {
+        private String status;
+        private java.time.OffsetDateTime updatedAt;
+
+        public ProgressDetail() {}
+        public ProgressDetail(String status, java.time.OffsetDateTime updatedAt) {
+            this.status = status;
+            this.updatedAt = updatedAt;
+        }
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/dto/RecordMatchRequest.java b/backend/src/main/java/com/algobuddy/backend/dto/RecordMatchRequest.java
new file mode 100644
index 000000000..09e36778e
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/dto/RecordMatchRequest.java
@@ -0,0 +1,24 @@
+package com.algobuddy.backend.dto;
+
+import jakarta.validation.constraints.NotBlank;
+import com.fasterxml.jackson.annotation.JsonProperty;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+public class RecordMatchRequest {
+
+    @NotBlank(message = "Match ID is required to prevent duplicates")
+    private String matchId;
+    private String topic;
+    private String difficulty;
+    
+    @JsonProperty("isWinner")
+    private boolean isWinner;
+}
+
diff --git a/backend/src/main/java/com/algobuddy/backend/dto/UserProfileDto.java b/backend/src/main/java/com/algobuddy/backend/dto/UserProfileDto.java
new file mode 100644
index 000000000..8bb92009e
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/dto/UserProfileDto.java
@@ -0,0 +1,11 @@
+package com.algobuddy.backend.dto;
+
+import jakarta.validation.constraints.NotBlank;
+import lombok.Data;
+
+@Data
+public class UserProfileDto {
+    @NotBlank
+    private String username;
+    private String avatarUrl;
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/entity/ArenaMatch.java b/backend/src/main/java/com/algobuddy/backend/entity/ArenaMatch.java
new file mode 100644
index 000000000..bcb1fde26
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/entity/ArenaMatch.java
@@ -0,0 +1,77 @@
+package com.algobuddy.backend.entity;
+
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.time.LocalDateTime;
+import java.util.UUID;
+
+@Entity
+@Table(name = "arena_matches", uniqueConstraints = @UniqueConstraint(columnNames = "match_id"))
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+@Builder
+public class ArenaMatch {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.UUID)
+    @Column(name = "id", updatable = false, nullable = false)
+    private UUID id;
+
+    @Column(name = "match_id", unique = true)
+    private String matchId;
+
+    @Column(name = "player1_id", nullable = false)
+    private UUID player1Id;
+
+    @Column(name = "player2_id", nullable = false)
+    private UUID player2Id;
+
+    @Column(name = "winner_id")
+    private UUID winnerId; // Null if it was a draw or hasn't finished
+
+    @Column(name = "topic")
+    private String topic;
+
+    @Column(name = "difficulty")
+    private String difficulty;
+
+    @Column(name = "start_time", nullable = false)
+    private LocalDateTime startTime;
+
+    @Column(name = "end_time")
+    private LocalDateTime endTime;
+
+    @Column(name = "rating_change_p1")
+    private Integer ratingChangeP1;
+
+    @Column(name = "rating_change_p2")
+    private Integer ratingChangeP2;
+
+    @Column(name = "xp_awarded_p1")
+    private Integer xpAwardedP1;
+
+    @Column(name = "xp_awarded_p2")
+    private Integer xpAwardedP2;
+
+    @Builder.Default
+    @Enumerated(EnumType.STRING)
+    @Column(name = "status", nullable = false)
+    private MatchStatus status = MatchStatus.PENDING;
+
+    @Version
+    @Builder.Default
+    @Column(name = "version")
+    private Integer version = 0;
+
+    public enum MatchStatus {
+        PENDING,
+        ACTIVE,
+        COMPLETED,
+        EXPIRED
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/entity/Bookmark.java b/backend/src/main/java/com/algobuddy/backend/entity/Bookmark.java
new file mode 100644
index 000000000..44ab92ab1
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/entity/Bookmark.java
@@ -0,0 +1,30 @@
+package com.algobuddy.backend.entity;
+
+import jakarta.persistence.*;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+import java.time.OffsetDateTime;
+import java.util.UUID;
+
+@Entity
+@Table(name = "problem_bookmarks", uniqueConstraints = {@UniqueConstraint(columnNames = {"user_id", "problem_id"})})
+@Data
+@NoArgsConstructor
+public class Bookmark {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.UUID)
+    private UUID id;
+
+    @Column(name = "user_id", nullable = false)
+    private UUID userId;
+
+    @Column(name = "problem_id", nullable = false)
+    private String problemId;
+
+    @Column(name = "topic_slug", nullable = false)
+    private String topicSlug;
+
+    @Column(name = "created_at", insertable = false, updatable = false)
+    private OffsetDateTime createdAt;
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/entity/MySheet.java b/backend/src/main/java/com/algobuddy/backend/entity/MySheet.java
new file mode 100644
index 000000000..872765bf0
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/entity/MySheet.java
@@ -0,0 +1,36 @@
+package com.algobuddy.backend.entity;
+
+import jakarta.persistence.*;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+import java.time.OffsetDateTime;
+import java.util.UUID;
+
+@Entity
+@Table(name = "my_sheet", uniqueConstraints = {@UniqueConstraint(columnNames = {"user_id", "problem_id"})})
+@Data
+@NoArgsConstructor
+public class MySheet {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.UUID)
+    private UUID id;
+
+    @Column(name = "user_id", nullable = false)
+    private UUID userId;
+
+    @Column(name = "problem_id", nullable = false)
+    private String problemId;
+
+    @Column(name = "note")
+    private String note;
+
+    @Column(name = "is_public", nullable = false)
+    private boolean isPublic = false;
+
+    @Column(name = "shared_notes", nullable = false)
+    private boolean sharedNotes = false;
+
+    @Column(name = "added_at", insertable = false, updatable = false)
+    private OffsetDateTime addedAt;
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/entity/UserArenaProfile.java b/backend/src/main/java/com/algobuddy/backend/entity/UserArenaProfile.java
new file mode 100644
index 000000000..c79a4ba42
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/entity/UserArenaProfile.java
@@ -0,0 +1,65 @@
+package com.algobuddy.backend.entity;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.Entity;
+import jakarta.persistence.Id;
+import jakarta.persistence.Table;
+import jakarta.persistence.Version;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.util.UUID;
+
+@Entity
+@Table(name = "user_arena_profiles")
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+@Builder
+public class UserArenaProfile {
+
+    @Id
+    @Column(name = "user_id", columnDefinition = "uuid", updatable = false, nullable = false)
+    private UUID userId;
+
+    @Column(name = "xp", nullable = false)
+    @Builder.Default
+    private Integer xp = 0;
+
+    @Column(name = "level", nullable = false)
+    @Builder.Default
+    private Integer level = 1;
+
+    @Column(name = "rating", nullable = false)
+    @Builder.Default
+    private Integer rating = 1200;
+
+    @Column(name = "battles_won", nullable = false)
+    @Builder.Default
+    private Integer battlesWon = 0;
+
+    @Column(name = "battles_lost", nullable = false)
+    @Builder.Default
+    private Integer battlesLost = 0;
+
+    @Column(name = "total_problems_solved", nullable = false)
+    @Builder.Default
+    private Integer totalProblemsSolved = 0;
+
+    @Version
+    @Column(name = "version")
+    private Integer version;
+
+    public void addXp(int amount) {
+        this.xp += amount;
+        updateLevel();
+    }
+
+    private void updateLevel() {
+        // Simple level logic: Level 1 = 0 XP, Level 2 = 100 XP, Level 3 = 300 XP, etc.
+        // For now, level = (xp / 1000) + 1
+        this.level = (this.xp / 1000) + 1;
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/entity/UserPracticeStats.java b/backend/src/main/java/com/algobuddy/backend/entity/UserPracticeStats.java
new file mode 100644
index 000000000..751603fb3
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/entity/UserPracticeStats.java
@@ -0,0 +1,49 @@
+package com.algobuddy.backend.entity;
+
+import jakarta.persistence.Entity;
+import jakarta.persistence.Id;
+import jakarta.persistence.Table;
+import jakarta.persistence.Column;
+import jakarta.persistence.Version;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+import lombok.AllArgsConstructor;
+import java.util.UUID;
+import java.time.LocalDate;
+
+@Entity
+@Table(name = "user_practice_stats")
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+public class UserPracticeStats {
+
+    @Id
+    @Column(name = "user_id", columnDefinition = "uuid")
+    private UUID userId;
+
+    @Column(name = "current_streak")
+    private Integer currentStreak = 0;
+
+    @Column(name = "longest_streak")
+    private Integer longestStreak = 0;
+
+    @Column(name = "last_active_date")
+    private LocalDate lastActiveDate;
+
+    @Column(name = "visualized_count")
+    private Integer visualizedCount = 0;
+
+    @Version
+    @Column(name = "version")
+    private Integer version = 0;
+
+    public UserPracticeStats(UUID userId, Integer currentStreak, Integer longestStreak, LocalDate lastActiveDate, Integer visualizedCount) {
+        this.userId = userId;
+        this.currentStreak = currentStreak;
+        this.longestStreak = longestStreak;
+        this.lastActiveDate = lastActiveDate;
+        this.visualizedCount = visualizedCount;
+        this.version = 0;
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/entity/UserProfile.java b/backend/src/main/java/com/algobuddy/backend/entity/UserProfile.java
new file mode 100644
index 000000000..c8b26ce2d
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/entity/UserProfile.java
@@ -0,0 +1,34 @@
+package com.algobuddy.backend.entity;
+
+import jakarta.persistence.Entity;
+import jakarta.persistence.Id;
+import jakarta.persistence.Table;
+import jakarta.persistence.Column;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import java.util.UUID;
+import java.time.OffsetDateTime;
+
+@Entity
+@Table(name = "user_profiles")
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+@Builder
+public class UserProfile {
+
+    @Id
+    @Column(name = "user_id", columnDefinition = "uuid")
+    private UUID userId;
+
+    @Column(name = "username", nullable = false)
+    private String username;
+
+    @Column(name = "avatar_url")
+    private String avatarUrl;
+
+    @Column(name = "updated_at")
+    private OffsetDateTime updatedAt;
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/entity/UserProgress.java b/backend/src/main/java/com/algobuddy/backend/entity/UserProgress.java
new file mode 100644
index 000000000..37f4dcc34
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/entity/UserProgress.java
@@ -0,0 +1,36 @@
+package com.algobuddy.backend.entity;
+
+import jakarta.persistence.Entity;
+import jakarta.persistence.Id;
+import jakarta.persistence.Table;
+import jakarta.persistence.UniqueConstraint;
+import jakarta.persistence.Column;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+import lombok.AllArgsConstructor;
+import java.util.UUID;
+import java.time.OffsetDateTime;
+
+@Entity
+@Table(name = "user_progress", uniqueConstraints = {@UniqueConstraint(columnNames = {"user_id", "problem_id"})})
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+public class UserProgress {
+
+    @Id
+    @Column(columnDefinition = "uuid")
+    private UUID id = UUID.randomUUID();
+
+    @Column(name = "user_id", nullable = false)
+    private UUID userId;
+
+    @Column(name = "problem_id", nullable = false)
+    private String problemId;
+
+    @Column(name = "status", nullable = false)
+    private String status;
+
+    @Column(name = "updated_at")
+    private OffsetDateTime updatedAt;
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/mapper/BookmarkMapper.java b/backend/src/main/java/com/algobuddy/backend/mapper/BookmarkMapper.java
new file mode 100644
index 000000000..9dfd5a280
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/mapper/BookmarkMapper.java
@@ -0,0 +1,20 @@
+package com.algobuddy.backend.mapper;
+
+import com.algobuddy.backend.dto.BookmarkDto;
+import com.algobuddy.backend.entity.Bookmark;
+import org.springframework.stereotype.Component;
+
+@Component
+public class BookmarkMapper {
+
+    public BookmarkDto toDto(Bookmark bookmark) {
+        if (bookmark == null) {
+            return null;
+        }
+        return BookmarkDto.builder()
+                .problemId(bookmark.getProblemId())
+                .topicSlug(bookmark.getTopicSlug())
+                .createdAt(bookmark.getCreatedAt())
+                .build();
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/mapper/MySheetMapper.java b/backend/src/main/java/com/algobuddy/backend/mapper/MySheetMapper.java
new file mode 100644
index 000000000..b4523b15e
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/mapper/MySheetMapper.java
@@ -0,0 +1,22 @@
+package com.algobuddy.backend.mapper;
+
+import com.algobuddy.backend.dto.MySheetDto;
+import com.algobuddy.backend.entity.MySheet;
+import org.springframework.stereotype.Component;
+
+@Component
+public class MySheetMapper {
+
+    public MySheetDto toDto(MySheet mySheet) {
+        if (mySheet == null) {
+            return null;
+        }
+        return MySheetDto.builder()
+                .problemId(mySheet.getProblemId())
+                .note(mySheet.getNote())
+                .isPublic(mySheet.isPublic())
+                .sharedNotes(mySheet.isSharedNotes())
+                .addedAt(mySheet.getAddedAt())
+                .build();
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/repository/ArenaMatchRepository.java b/backend/src/main/java/com/algobuddy/backend/repository/ArenaMatchRepository.java
new file mode 100644
index 000000000..1e4c5972a
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/repository/ArenaMatchRepository.java
@@ -0,0 +1,35 @@
+package com.algobuddy.backend.repository;
+
+import com.algobuddy.backend.entity.ArenaMatch;
+import com.algobuddy.backend.entity.ArenaMatch.MatchStatus;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Modifying;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
+import org.springframework.stereotype.Repository;
+
+import java.time.LocalDateTime;
+import java.util.List;
+import java.util.UUID;
+
+@Repository
+public interface ArenaMatchRepository extends JpaRepository<ArenaMatch, UUID> {
+    
+    @Query("SELECT m FROM ArenaMatch m WHERE m.player1Id = :userId OR m.player2Id = :userId ORDER BY m.startTime DESC")
+    List<ArenaMatch> findRecentMatchesByUserId(@Param("userId") UUID userId, Pageable pageable);
+
+    java.util.Optional<ArenaMatch> findByMatchId(String matchId);
+
+    boolean existsByMatchId(String matchId);
+
+    @Query("SELECT COUNT(m) FROM ArenaMatch m WHERE (m.player1Id = :userId OR m.player2Id = :userId) AND m.endTime IS NOT NULL AND m.endTime >= :since")
+    long countRecentMatchResultsByUserId(@Param("userId") UUID userId, @Param("since") LocalDateTime since);
+
+    @Query("SELECT COUNT(m) FROM ArenaMatch m WHERE (m.player1Id = :userId OR m.player2Id = :userId) AND m.startTime >= :since")
+    long countRecentInitiationsByUserId(@Param("userId") UUID userId, @Param("since") LocalDateTime since);
+
+    @Modifying
+    @Query("UPDATE ArenaMatch m SET m.status = :status, m.endTime = :now WHERE m.status IN ('PENDING', 'ACTIVE') AND m.startTime < :cutoff")
+    int expireStaleMatches(@Param("cutoff") LocalDateTime cutoff, @Param("status") MatchStatus status, @Param("now") LocalDateTime now);
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/repository/BookmarkRepository.java b/backend/src/main/java/com/algobuddy/backend/repository/BookmarkRepository.java
new file mode 100644
index 000000000..28ca7a0d1
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/repository/BookmarkRepository.java
@@ -0,0 +1,18 @@
+package com.algobuddy.backend.repository;
+
+import com.algobuddy.backend.entity.Bookmark;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+import java.util.Optional;
+import java.util.UUID;
+
+@Repository
+public interface BookmarkRepository extends JpaRepository<Bookmark, UUID> {
+    Page<Bookmark> findByUserId(UUID userId, Pageable pageable);
+    List<Bookmark> findByUserId(UUID userId); // Keep list method for compatibility if needed elsewhere
+    Optional<Bookmark> findByUserIdAndProblemId(UUID userId, String problemId);
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/repository/MySheetRepository.java b/backend/src/main/java/com/algobuddy/backend/repository/MySheetRepository.java
new file mode 100644
index 000000000..e7aed33d7
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/repository/MySheetRepository.java
@@ -0,0 +1,21 @@
+package com.algobuddy.backend.repository;
+
+import com.algobuddy.backend.entity.MySheet;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+import java.util.Optional;
+import java.util.UUID;
+
+@Repository
+public interface MySheetRepository extends JpaRepository<MySheet, UUID> {
+    Page<MySheet> findByUserId(UUID userId, Pageable pageable);
+    List<MySheet> findByUserId(UUID userId);
+    Optional<MySheet> findByUserIdAndProblemId(UUID userId, String problemId);
+    List<MySheet> findByUserIdAndIsPublicTrue(UUID userId);
+    List<MySheet> findByUserIdAndIsPublicTrueAndSharedNotesTrue(UUID userId);
+    List<MySheet> findByUserIdAndProblemIdIn(UUID userId, List<String> problemIds);
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/repository/UserArenaProfileRepository.java b/backend/src/main/java/com/algobuddy/backend/repository/UserArenaProfileRepository.java
new file mode 100644
index 000000000..02c15f22e
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/repository/UserArenaProfileRepository.java
@@ -0,0 +1,98 @@
+package com.algobuddy.backend.repository;
+
+import com.algobuddy.backend.dto.ArenaLeaderboardProjection;
+import com.algobuddy.backend.entity.UserArenaProfile;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+import java.util.Optional;
+import java.util.UUID;
+
+@Repository
+public interface UserArenaProfileRepository extends JpaRepository<UserArenaProfile, UUID> {
+    
+    @Query(value = "SELECT * FROM user_arena_profiles p WHERE p.user_id != '00000000-0000-0000-0000-000000000000' ORDER BY p.rating DESC, p.xp DESC", nativeQuery = true)
+    List<UserArenaProfile> findTopPlayers(Pageable pageable);
+
+    @Query(value = """
+            SELECT 
+                p.user_id as userId, 
+                p.xp as xp, 
+                p.level as level, 
+                p.rating as rating, 
+                p.battles_won as battlesWon, 
+                p.battles_lost as battlesLost, 
+                (SELECT COALESCE(COUNT(*), 0) FROM public.user_progress up WHERE up.user_id = p.user_id AND up.status = 'Completed') as totalProblemsSolved,
+                COALESCE(u.raw_user_meta_data->>'name', split_part(u.email, '@', 1)) as name,
+                COALESCE(u.raw_user_meta_data->>'avatar_url', u.raw_user_meta_data->>'picture', '') as avatarUrl
+            FROM public.user_arena_profiles p
+            LEFT JOIN auth.users u ON p.user_id = u.id
+            WHERE p.user_id != '00000000-0000-0000-0000-000000000000'
+            ORDER BY p.rating DESC, p.xp DESC
+            """, nativeQuery = true)
+    List<ArenaLeaderboardProjection> findTopPlayersWithUserDetails(Pageable pageable);
+
+    @Query(value = """
+            SELECT 
+                p.user_id as userId, 
+                p.xp as xp, 
+                p.level as level, 
+                p.rating as rating, 
+                p.battles_won as battlesWon, 
+                p.battles_lost as battlesLost, 
+                (SELECT COALESCE(COUNT(*), 0) FROM public.user_progress up WHERE up.user_id = p.user_id AND up.status = 'Completed') as totalProblemsSolved,
+                COALESCE(u.raw_user_meta_data->>'name', split_part(u.email, '@', 1)) as name,
+                COALESCE(u.raw_user_meta_data->>'avatar_url', u.raw_user_meta_data->>'picture', '') as avatarUrl
+            FROM public.user_arena_profiles p
+            LEFT JOIN auth.users u ON p.user_id = u.id
+            WHERE p.user_id = :userId
+            """, nativeQuery = true)
+    Optional<ArenaLeaderboardProjection> findProfileWithUserDetails(@Param("userId") UUID userId);
+
+    @Query(value = """
+            SELECT 
+                p.user_id as userId, 
+                p.xp as xp, 
+                p.level as level, 
+                p.rating as rating, 
+                p.battles_won as battlesWon, 
+                p.battles_lost as battlesLost, 
+                p.total_problems_solved as totalProblemsSolved,
+                COALESCE(u.raw_user_meta_data->>'name', split_part(u.email, '@', 1)) as name,
+                COALESCE(u.raw_user_meta_data->>'avatar_url', u.raw_user_meta_data->>'picture', '') as avatarUrl
+            FROM public.user_arena_profiles p
+            LEFT JOIN auth.users u ON p.user_id = u.id
+            WHERE p.user_id IN :userIds
+            """, nativeQuery = true)
+    List<ArenaLeaderboardProjection> findProfilesWithUserDetailsIn(@Param("userIds") List<UUID> userIds);
+
+
+    @Query(value = """
+            SELECT COUNT(p.user_id) + 1
+            FROM user_arena_profiles p
+            CROSS JOIN (
+                SELECT rating, xp
+                FROM user_arena_profiles
+                WHERE user_id = :userId
+            ) u
+            WHERE p.user_id != '00000000-0000-0000-0000-000000000000'
+              AND (p.rating > u.rating OR (p.rating = u.rating AND p.xp > u.xp))
+            """, nativeQuery = true)
+    Integer findRankByUserId(@Param("userId") UUID userId);
+
+    List<UserArenaProfile> findTop100ByOrderByRatingDesc();
+
+    @Query("""
+        SELECT new com.algobuddy.backend.dto.LeaderboardEntryDto(
+            0, a.userId, COALESCE(p.username, 'Anonymous'), p.avatarUrl, a.rating
+        )
+        FROM UserArenaProfile a
+        LEFT JOIN UserProfile p ON a.userId = p.userId
+        ORDER BY a.rating DESC
+        """)
+    List<com.algobuddy.backend.dto.LeaderboardEntryDto> findTop100ArenaLeaderboard(Pageable pageable);
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/repository/UserPracticeStatsRepository.java b/backend/src/main/java/com/algobuddy/backend/repository/UserPracticeStatsRepository.java
new file mode 100644
index 000000000..b591dec9e
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/repository/UserPracticeStatsRepository.java
@@ -0,0 +1,42 @@
+package com.algobuddy.backend.repository;
+
+import com.algobuddy.backend.entity.UserPracticeStats;
+import jakarta.persistence.LockModeType;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Lock;
+import org.springframework.data.jpa.repository.Modifying;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+import java.util.Optional;
+import java.util.UUID;
+
+@Repository
+public interface UserPracticeStatsRepository extends JpaRepository<UserPracticeStats, UUID> {
+
+    @Modifying(clearAutomatically = true, flushAutomatically = true)
+    @Query(value = """
+        INSERT INTO user_practice_stats (user_id, current_streak, longest_streak, last_active_date, visualized_count)
+        VALUES (:userId, 0, 0, NULL, 0)
+        ON CONFLICT (user_id) DO NOTHING
+        """, nativeQuery = true)
+    void insertStatsIfNotExists(@Param("userId") UUID userId);
+
+    @Lock(LockModeType.PESSIMISTIC_WRITE)
+    @Query("select s from UserPracticeStats s where s.userId = :userId")
+    Optional<UserPracticeStats> findAndLockByUserId(@Param("userId") UUID userId);
+
+    List<UserPracticeStats> findTop100ByOrderByCurrentStreakDesc();
+
+    @org.springframework.data.jpa.repository.Query("""
+        SELECT new com.algobuddy.backend.dto.LeaderboardEntryDto(
+            0, s.userId, COALESCE(p.username, 'Anonymous'), p.avatarUrl, s.currentStreak
+        )
+        FROM UserPracticeStats s
+        LEFT JOIN UserProfile p ON s.userId = p.userId
+        ORDER BY s.currentStreak DESC
+        """)
+    List<com.algobuddy.backend.dto.LeaderboardEntryDto> findTop100StreakLeaderboard(org.springframework.data.domain.Pageable pageable);
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/repository/UserProfileRepository.java b/backend/src/main/java/com/algobuddy/backend/repository/UserProfileRepository.java
new file mode 100644
index 000000000..816407676
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/repository/UserProfileRepository.java
@@ -0,0 +1,11 @@
+package com.algobuddy.backend.repository;
+
+import com.algobuddy.backend.entity.UserProfile;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+import java.util.UUID;
+
+@Repository
+public interface UserProfileRepository extends JpaRepository<UserProfile, UUID> {
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/repository/UserProgressRepository.java b/backend/src/main/java/com/algobuddy/backend/repository/UserProgressRepository.java
new file mode 100644
index 000000000..9d3ada98c
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/repository/UserProgressRepository.java
@@ -0,0 +1,35 @@
+package com.algobuddy.backend.repository;
+
+import com.algobuddy.backend.entity.UserProgress;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Modifying;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
+import org.springframework.stereotype.Repository;
+
+import java.time.OffsetDateTime;
+import java.util.List;
+import java.util.Optional;
+import java.util.UUID;
+
+@Repository
+public interface UserProgressRepository extends JpaRepository<UserProgress, UUID> {
+    List<UserProgress> findByUserId(UUID userId);
+    Optional<UserProgress> findByUserIdAndProblemId(UUID userId, String problemId);
+
+    List<UserProgress> findByUserIdAndProblemIdIn(UUID userId, List<String> problemIds);
+
+    @Query("SELECT COUNT(up) FROM UserProgress up WHERE up.userId = :userId AND up.status = 'Completed' AND up.updatedAt >= :startTime")
+    int countCompletedSince(@Param("userId") UUID userId, @Param("startTime") OffsetDateTime startTime);
+
+    @Modifying(clearAutomatically = true, flushAutomatically = true)
+    @Query(value = """
+        INSERT INTO user_progress (id, user_id, problem_id, status, updated_at)
+        VALUES (gen_random_uuid(), :userId, :problemId, :status, NOW())
+        ON CONFLICT (user_id, problem_id)
+        DO UPDATE SET status = :status, updated_at = NOW()
+        """, nativeQuery = true)
+    void upsertProgress(@Param("userId") UUID userId,
+                        @Param("problemId") String problemId,
+                        @Param("status") String status);
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/service/ArenaService.java b/backend/src/main/java/com/algobuddy/backend/service/ArenaService.java
new file mode 100644
index 000000000..e0861617a
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/service/ArenaService.java
@@ -0,0 +1,539 @@
+package com.algobuddy.backend.service;
+
+import com.algobuddy.backend.dto.ArenaLeaderboardProjection;
+import com.algobuddy.backend.dto.ArenaMatchResponse;
+import com.algobuddy.backend.dto.ArenaProfileResponse;
+import com.algobuddy.backend.entity.ArenaMatch;
+import com.algobuddy.backend.entity.UserArenaProfile;
+import com.algobuddy.backend.repository.ArenaMatchRepository;
+import com.algobuddy.backend.repository.UserArenaProfileRepository;
+import lombok.RequiredArgsConstructor;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.cache.CacheManager;
+import org.springframework.dao.DataIntegrityViolationException;
+import org.springframework.data.domain.PageRequest;
+import org.springframework.orm.ObjectOptimisticLockingFailureException;
+import org.springframework.scheduling.annotation.Scheduled;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.cache.annotation.CacheEvict;
+import org.springframework.cache.annotation.Cacheable;
+import org.springframework.transaction.PlatformTransactionManager;
+import org.springframework.transaction.TransactionDefinition;
+import org.springframework.transaction.support.TransactionTemplate;
+
+import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import java.io.BufferedReader;
+import java.io.InputStreamReader;
+import java.net.HttpURLConnection;
+import java.net.URL;
+import java.time.LocalDateTime;
+import java.util.List;
+import java.util.UUID;
+import java.util.stream.Collectors;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.oauth2.jwt.Jwt;
+import org.springframework.security.core.Authentication;
+
+@Service
+@RequiredArgsConstructor
+public class ArenaService {
+
+    private static final Logger log = LoggerFactory.getLogger(ArenaService.class);
+    private static final UUID BOT_USER_ID = UUID.fromString("00000000-0000-0000-0000-000000000000");
+
+    private final UserArenaProfileRepository profileRepository;
+    private final ArenaMatchRepository matchRepository;
+    private final CacheManager cacheManager;
+    private final PlatformTransactionManager transactionManager;
+
+    private void checkMatchResultRateLimit(UUID userId) {
+        LocalDateTime since = LocalDateTime.now().minusMinutes(1);
+        long recentCount = matchRepository.countRecentMatchResultsByUserId(userId, since);
+        if (recentCount >= 3) {
+            throw new IllegalStateException("Rate limit exceeded. Max 3 match results per minute.");
+        }
+    }
+
+    @Transactional
+    public ArenaProfileResponse getProfile(UUID userId) {
+        if (!profileRepository.existsById(userId)) {
+            try {
+                createDefaultProfile(userId);
+            } catch (DataIntegrityViolationException e) {
+                log.debug("Profile already created by concurrent request for userId: {}", userId);
+            }
+        }
+        
+        ArenaProfileResponse cachedProfile = null;
+        org.springframework.cache.Cache cache = cacheManager.getCache("arenaProfile");
+        if (cache != null) {
+            cachedProfile = cache.get(userId, ArenaProfileResponse.class);
+        }
+        
+        if (cachedProfile == null) {
+            ArenaLeaderboardProjection projection = profileRepository.findProfileWithUserDetails(userId)
+                    .orElseThrow(() -> new IllegalStateException("Profile not found after creation"));
+            cachedProfile = mapProjectionToResponse(projection, null);
+            if (cache != null) {
+                cache.put(userId, cachedProfile);
+            }
+        }
+        
+        Integer rank = calculateRank(userId);
+        
+        return ArenaProfileResponse.builder()
+                .userId(cachedProfile.getUserId())
+                .xp(cachedProfile.getXp())
+                .level(cachedProfile.getLevel())
+                .rating(cachedProfile.getRating())
+                .battlesWon(cachedProfile.getBattlesWon())
+                .battlesLost(cachedProfile.getBattlesLost())
+                .totalProblemsSolved(cachedProfile.getTotalProblemsSolved())
+                .rank(rank)
+                .name(cachedProfile.getName())
+                .avatarUrl(cachedProfile.getAvatarUrl())
+                .build();
+    }
+    
+    @Transactional(readOnly = true)
+    @Cacheable(value = "arenaLeaderboard", unless = "#result == null")
+    public List<ArenaProfileResponse> getLeaderboard() {
+        List<ArenaLeaderboardProjection> topPlayers = profileRepository.findTopPlayersWithUserDetails(PageRequest.of(0, 50));
+        
+        int rank = 1;
+        List<ArenaProfileResponse> result = new java.util.ArrayList<>();
+        for (ArenaLeaderboardProjection projection : topPlayers) {
+            result.add(mapProjectionToResponse(projection, rank++));
+        }
+        return result;
+    }
+
+    @Transactional(readOnly = true)
+    public List<ArenaMatchResponse> getMatchHistory(UUID userId) {
+        List<ArenaMatch> recentMatches = matchRepository.findRecentMatchesByUserId(userId, PageRequest.of(0, 5));
+        
+        List<UUID> opponentIds = recentMatches.stream()
+                .map(match -> match.getPlayer1Id().equals(userId) ? match.getPlayer2Id() : match.getPlayer1Id())
+                .distinct()
+                .collect(Collectors.toList());
+
+        java.util.Map<UUID, String> opponentNameMap = new java.util.HashMap<>();
+        if (!opponentIds.isEmpty()) {
+            List<ArenaLeaderboardProjection> profiles = profileRepository.findProfilesWithUserDetailsIn(opponentIds);
+            for (ArenaLeaderboardProjection profile : profiles) {
+                opponentNameMap.put(profile.getUserId(), profile.getName());
+            }
+        }
+
+        return recentMatches.stream()
+                .map(match -> mapToMatchResponse(match, userId, opponentNameMap))
+                .collect(Collectors.toList());
+    }
+
+    private UserArenaProfile createDefaultProfile(UUID userId) {
+        UserArenaProfile newProfile = UserArenaProfile.builder()
+                .userId(userId)
+                .xp(0)
+                .level(1)
+                .rating(1200)
+                .battlesWon(0)
+                .battlesLost(0)
+                .totalProblemsSolved(0)
+                .build();
+        return profileRepository.save(newProfile);
+    }
+    
+    private Integer calculateRank(UUID userId) {
+        Integer rank = profileRepository.findRankByUserId(userId);
+        return rank != null ? rank : profileRepository.findTopPlayers(PageRequest.of(0, 1)).size() + 1;
+    }
+
+    private ArenaProfileResponse mapProjectionToResponse(ArenaLeaderboardProjection projection, Integer rank) {
+        return ArenaProfileResponse.builder()
+                .userId(projection.getUserId())
+                .xp(projection.getXp())
+                .level(projection.getLevel())
+                .rating(projection.getRating())
+                .battlesWon(projection.getBattlesWon())
+                .battlesLost(projection.getBattlesLost())
+                .totalProblemsSolved(projection.getTotalProblemsSolved())
+                .rank(rank)
+                .name(projection.getName())
+                .avatarUrl(projection.getAvatarUrl())
+                .build();
+    }
+
+    private ArenaMatchResponse mapToMatchResponse(ArenaMatch match, UUID requestingUserId, java.util.Map<UUID, String> opponentNameMap) {
+        boolean isPlayer1 = match.getPlayer1Id().equals(requestingUserId);
+        UUID opponentId = isPlayer1 ? match.getPlayer2Id() : match.getPlayer1Id();
+        
+        // Fetch opponent name from pre-fetched map, default to "User [id]"
+        String opponentName = opponentNameMap.getOrDefault(opponentId, "User " + opponentId.toString().substring(0, 4));
+        
+        String result = "In Progress";
+        if (match.getStatus() == ArenaMatch.MatchStatus.EXPIRED) {
+            result = "Expired";
+        } else if (match.getWinnerId() != null) {
+            result = match.getWinnerId().equals(requestingUserId) ? "Victory" : "Defeat";
+        } else if (match.getEndTime() != null) {
+            result = "Draw";
+        }
+        
+        return ArenaMatchResponse.builder()
+                .id(match.getId())
+                .opponentName(opponentName)
+                .topic(match.getTopic())
+                .difficulty(match.getDifficulty())
+                .startTime(match.getStartTime())
+                .result(result)
+                .ratingChange(isPlayer1 ? match.getRatingChangeP1() : match.getRatingChangeP2())
+                .xpAwarded(isPlayer1 ? match.getXpAwardedP1() : match.getXpAwardedP2())
+                .build();
+    }
+
+    private void checkInitMatchRateLimit(UUID userId) {
+        LocalDateTime since = LocalDateTime.now().minusMinutes(1);
+        long recentCount = matchRepository.countRecentInitiationsByUserId(userId, since);
+        if (recentCount >= 5) {
+            throw new IllegalStateException("Rate limit exceeded. Max 5 match initiations per minute.");
+        }
+    }
+
+    @Transactional
+    public void initMatch(UUID requestingUserId, com.algobuddy.backend.dto.InitMatchRequest request) {
+
+        checkInitMatchRateLimit(requestingUserId);
+
+        if (matchRepository.findByMatchId(request.getMatchId()).isPresent()) {
+            return;
+        }
+
+        UUID opponentId;
+        if (request.getMatchId().startsWith("mock-match-")) {
+            // Bypass socket matchmaking verification for offline practice matches against AI Bots
+            opponentId = UUID.fromString("00000000-0000-0000-0000-000000000000");
+        } else {
+            // Verify the match pair via the WebSocket matchmaking server (Redis-backed)
+            // This ensures the opponent actually consented through WebSocket matchmaking
+            opponentId = verifyMatchmakingPair(request.getMatchId(), requestingUserId);
+        }
+
+        ArenaMatch match = ArenaMatch.builder()
+                .matchId(request.getMatchId())
+                .player1Id(requestingUserId)
+                .player2Id(opponentId)
+                .topic(request.getTopic() != null ? request.getTopic() : "Arrays")
+                .difficulty(request.getDifficulty() != null ? request.getDifficulty() : "Easy")
+                .startTime(java.time.LocalDateTime.now())
+                .status(ArenaMatch.MatchStatus.PENDING)
+                .build();
+
+        matchRepository.save(match);
+    }
+
+    private UUID verifyMatchmakingPair(String matchId, UUID requestingUserId) {
+        if (matchId == null || !matchId.matches("^(match|mock-match)-[a-zA-Z0-9-]+$")) {
+            throw new IllegalArgumentException("Invalid matchId format.");
+        }
+        String socketServerUrl = System.getenv("SOCKET_SERVER_URL");
+        if (socketServerUrl == null || socketServerUrl.isEmpty()) {
+            socketServerUrl = "http://localhost:4000";
+        }
+        java.net.HttpURLConnection conn = null;
+        try {
+            java.net.URL url = new java.net.URL(socketServerUrl + "/api/verify-match/" + matchId + "/" + requestingUserId);
+            conn = (java.net.HttpURLConnection) url.openConnection();
+            conn.setRequestMethod("GET");
+            conn.setConnectTimeout(3000);
+            conn.setReadTimeout(3000);
+
+            // Forward the authenticated user's JWT token to the socket server
+            Authentication auth = SecurityContextHolder.getContext().getAuthentication();
+            if (auth != null && auth.getPrincipal() instanceof Jwt jwt) {
+                conn.setRequestProperty("Authorization", "Bearer " + jwt.getTokenValue());
+            }
+
+            int status = conn.getResponseCode();
+            if (status == 200) {
+                java.io.BufferedReader reader = new java.io.BufferedReader(new java.io.InputStreamReader(conn.getInputStream()));
+                StringBuilder response = new StringBuilder();
+                String line;
+                while ((line = reader.readLine()) != null) {
+                    response.append(line);
+                }
+                reader.close();
+
+                // Parse JSON response
+                com.fasterxml.jackson.databind.ObjectMapper mapper = new com.fasterxml.jackson.databind.ObjectMapper();
+                com.fasterxml.jackson.databind.JsonNode json = mapper.readTree(response.toString());
+
+                if (json.has("verified") && json.get("verified").asBoolean()) {
+                    if (json.has("opponentId") && !json.get("opponentId").isNull()) {
+                        return UUID.fromString(json.get("opponentId").asText());
+                    }
+                }
+            }
+        } catch (Exception e) {
+            log.error("Failed to verify matchmaking pair via socket server: {}", e.getMessage());
+        } finally {
+            if (conn != null) {
+                conn.disconnect();
+            }
+        }
+        throw new SecurityException("Match verification failed. Opponent has not consented to this match.");
+    }
+
+    UUID verifyMatchResult(String matchId, UUID requestingUserId) {
+        if (matchId == null || !matchId.matches("^(match|mock-match)-[a-zA-Z0-9-]+$")) {
+            throw new IllegalArgumentException("Invalid matchId format.");
+        }
+        String socketServerUrl = System.getenv("SOCKET_SERVER_URL");
+        if (socketServerUrl == null || socketServerUrl.isEmpty()) {
+            socketServerUrl = "http://localhost:4000";
+        }
+        HttpURLConnection conn = null;
+        try {
+            URL url = new URL(socketServerUrl + "/api/verify-match-result/" + matchId + "/" + requestingUserId);
+            conn = (HttpURLConnection) url.openConnection();
+            conn.setRequestMethod("GET");
+            conn.setConnectTimeout(3000);
+            conn.setReadTimeout(3000);
+
+            // Forward the authenticated user's JWT token to the socket server
+            Authentication auth = SecurityContextHolder.getContext().getAuthentication();
+            if (auth != null && auth.getPrincipal() instanceof Jwt jwt) {
+                conn.setRequestProperty("Authorization", "Bearer " + jwt.getTokenValue());
+            }
+
+            int status = conn.getResponseCode();
+            if (status == 200) {
+                BufferedReader reader = new BufferedReader(new InputStreamReader(conn.getInputStream()));
+                StringBuilder response = new StringBuilder();
+                String line;
+                while ((line = reader.readLine()) != null) {
+                    response.append(line);
+                }
+                reader.close();
+
+                ObjectMapper mapper = new ObjectMapper();
+                JsonNode json = mapper.readTree(response.toString());
+
+                if (json.has("verified") && json.get("verified").asBoolean()) {
+                    if (json.has("winnerId") && !json.get("winnerId").isNull()) {
+                        return UUID.fromString(json.get("winnerId").asText());
+                    }
+                }
+            }
+        } catch (Exception e) {
+            log.error("Failed to verify match result via socket server: {}", e.getMessage());
+        } finally {
+            if (conn != null) {
+                conn.disconnect();
+            }
+        }
+        throw new SecurityException("Match result verification failed");
+    }
+
+    @Scheduled(fixedRate = 300_000)
+    @Transactional
+    public void expireStaleMatches() {
+        LocalDateTime cutoff = LocalDateTime.now().minusHours(1);
+        LocalDateTime now = LocalDateTime.now();
+        int expired = matchRepository.expireStaleMatches(cutoff, ArenaMatch.MatchStatus.EXPIRED, now);
+        if (expired > 0) {
+            log.info("Expired {} stale arena matches older than {}", expired, cutoff);
+        }
+    }
+
+    @CacheEvict(value = "arenaLeaderboard", allEntries = true)
+    public void recordMatchResult(UUID requestingUserId, com.algobuddy.backend.dto.RecordMatchRequest request) {
+        checkMatchResultRateLimit(requestingUserId);
+
+        String matchIdStr = request.getMatchId();
+        if (matchIdStr == null || matchIdStr.isEmpty()) {
+            throw new IllegalArgumentException("matchId is required");
+        }
+
+        ArenaMatch existingMatchPre = matchRepository.findByMatchId(matchIdStr)
+                .orElseThrow(() -> new IllegalArgumentException("Invalid match ID"));
+
+        if (!existingMatchPre.getPlayer1Id().equals(requestingUserId) &&
+            !existingMatchPre.getPlayer2Id().equals(requestingUserId)) {
+            throw new SecurityException("User is not a participant in this match");
+        }
+
+        if (existingMatchPre.getStatus() == ArenaMatch.MatchStatus.COMPLETED || existingMatchPre.getWinnerId() != null) {
+            return;
+        }
+
+        if (existingMatchPre.getStatus() == ArenaMatch.MatchStatus.EXPIRED) {
+            throw new IllegalStateException("This match has expired and cannot accept results");
+        }
+
+        boolean isWinner;
+        final int MAX_RETRIES = 3;
+
+        if (matchIdStr.startsWith("mock-match-")) {
+            isWinner = request.isWinner();
+        } else {
+            UUID verifiedWinnerId = null;
+            for (int verifyAttempt = 1; verifyAttempt <= MAX_RETRIES; verifyAttempt++) {
+                try {
+                    verifiedWinnerId = verifyMatchResult(matchIdStr, requestingUserId);
+                    break;
+                } catch (SecurityException e) {
+                    if (verifyAttempt == MAX_RETRIES) throw e;
+                    log.warn("Verify failed, retrying {}/{}", verifyAttempt, MAX_RETRIES);
+                    try { Thread.sleep(1000L * verifyAttempt); } catch (InterruptedException ie) { Thread.currentThread().interrupt(); break; }
+                }
+            }
+            isWinner = requestingUserId.equals(verifiedWinnerId);
+        }
+        final boolean finalIsWinner = isWinner;
+
+        for (int attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+            try {
+
+                // Execute each retry attempt in an isolated transaction.
+                final TransactionTemplate retryTransaction = new TransactionTemplate(transactionManager);
+                retryTransaction.setPropagationBehavior(TransactionDefinition.PROPAGATION_REQUIRES_NEW);
+
+                UUID opponentId = retryTransaction.execute(status -> {
+
+                    ArenaMatch existingMatch = matchRepository.findByMatchId(matchIdStr)
+                            .orElseThrow(() -> new IllegalArgumentException("Invalid match ID"));
+
+                    if (!existingMatch.getPlayer1Id().equals(requestingUserId) &&
+                        !existingMatch.getPlayer2Id().equals(requestingUserId)) {
+                        throw new SecurityException("User is not a participant in this match");
+                    }
+
+                    if (existingMatch.getStatus() == ArenaMatch.MatchStatus.EXPIRED) {
+                        throw new IllegalStateException("This match has expired and cannot accept results");
+                    }
+
+                    if (existingMatch.getStatus() == ArenaMatch.MatchStatus.COMPLETED) {
+                        return null;
+                    }
+
+                    if (existingMatch.getWinnerId() != null) {
+                        // Match result has already been recorded. We return silently to prevent
+                        // duplicate submission exceptions from throwing 500 errors on the client.
+                        return null;
+                    }
+
+                    UUID opponentUserId = existingMatch.getPlayer1Id().equals(requestingUserId)
+                        ? existingMatch.getPlayer2Id()
+                        : existingMatch.getPlayer1Id();
+
+                    boolean isOpponentBot = opponentUserId.equals(BOT_USER_ID);
+
+                    UserArenaProfile requestingUserProfile = profileRepository.findById(requestingUserId)
+                            .orElseGet(() -> createDefaultProfile(requestingUserId));
+                
+                    UserArenaProfile opponentProfile = null;
+                    if (!isOpponentBot) {
+                        opponentProfile = profileRepository.findById(opponentUserId)
+                                .orElseGet(() -> createDefaultProfile(opponentUserId));
+                    }
+
+                    int requestingUserRatingChange = 0;
+                    int opponentRatingChange = 0;
+                    int requestingUserXp = 0;
+                    int opponentXp = 0;
+
+                    if (!isOpponentBot) {
+                        requestingUserRatingChange = finalIsWinner ? 25 : -15;
+                        opponentRatingChange = finalIsWinner ? -15 : 25;
+                        requestingUserXp = finalIsWinner ? 50 : 10;
+                        opponentXp = finalIsWinner ? 10 : 50;
+                    }
+
+                    requestingUserProfile.setRating(Math.max(0, requestingUserProfile.getRating() + requestingUserRatingChange));
+                    requestingUserProfile.setXp(requestingUserProfile.getXp() + requestingUserXp);
+                    requestingUserProfile.setLevel((requestingUserProfile.getXp() / 1000) + 1);
+                    if (!isOpponentBot) {
+                        requestingUserProfile.setTotalProblemsSolved(requestingUserProfile.getTotalProblemsSolved() + (finalIsWinner ? 1 : 0));
+                        if (finalIsWinner) requestingUserProfile.setBattlesWon(requestingUserProfile.getBattlesWon() + 1);
+                        else requestingUserProfile.setBattlesLost(requestingUserProfile.getBattlesLost() + 1);
+                    }
+
+                    if (!isOpponentBot && opponentProfile != null) {
+                        opponentProfile.setRating(Math.max(0, opponentProfile.getRating() + opponentRatingChange));
+                        opponentProfile.setXp(opponentProfile.getXp() + opponentXp);
+                        opponentProfile.setLevel((opponentProfile.getXp() / 1000) + 1);
+                        opponentProfile.setTotalProblemsSolved(opponentProfile.getTotalProblemsSolved() + (!finalIsWinner ? 1 : 0));
+                        if (!finalIsWinner) opponentProfile.setBattlesWon(opponentProfile.getBattlesWon() + 1);
+                        else opponentProfile.setBattlesLost(opponentProfile.getBattlesLost() + 1);
+                    }
+
+                    profileRepository.save(requestingUserProfile);
+                    if (!isOpponentBot && opponentProfile != null) {
+                        profileRepository.save(opponentProfile);
+                    }
+
+                    existingMatch.setWinnerId(finalIsWinner ? requestingUserId : opponentUserId);
+                    existingMatch.setEndTime(java.time.LocalDateTime.now());
+                    existingMatch.setStatus(ArenaMatch.MatchStatus.COMPLETED);
+
+                    boolean isReqUserPlayer1 = requestingUserId.equals(existingMatch.getPlayer1Id());
+                    existingMatch.setRatingChangeP1(isReqUserPlayer1 ? requestingUserRatingChange : opponentRatingChange);
+                    existingMatch.setRatingChangeP2(isReqUserPlayer1 ? opponentRatingChange : requestingUserRatingChange);
+                    existingMatch.setXpAwardedP1(isReqUserPlayer1 ? requestingUserXp : opponentXp);
+                    existingMatch.setXpAwardedP2(isReqUserPlayer1 ? opponentXp : requestingUserXp);
+
+                    matchRepository.save(existingMatch);
+
+                    return opponentUserId;
+                });
+
+                if (opponentId == null) {
+                    return;
+                }
+
+                boolean isOpponentBot = opponentId.equals(BOT_USER_ID);
+
+                org.springframework.cache.Cache profileCache = cacheManager.getCache("arenaProfile");
+                if (profileCache != null) {
+                    profileCache.evict(requestingUserId);
+                    if (!isOpponentBot) {
+                        profileCache.evict(opponentId);
+                    }
+                }
+                org.springframework.cache.Cache leaderboardCache = cacheManager.getCache("arenaLeaderboard");
+                if (leaderboardCache != null) {
+                    leaderboardCache.clear();
+                }
+
+                return;
+            } catch (ObjectOptimisticLockingFailureException | DataIntegrityViolationException e) {
+                if (attempt == MAX_RETRIES) {
+                    log.error("Failed to record match result after {} attempts", MAX_RETRIES, e);
+                    throw e;
+                }
+                log.warn("Lock failure, retrying {}/{} with fresh verification", attempt, MAX_RETRIES);
+            } catch (SecurityException e) {
+                throw e;
+            }
+        }
+    }
+
+    @Transactional(readOnly = true)
+    public com.algobuddy.backend.dto.DailyChallengeResponse getDailyChallenge() {
+        // Hardcoded list of challenges to simulate a rotating daily problem
+        List<com.algobuddy.backend.dto.DailyChallengeResponse> pool = List.of(
+            new com.algobuddy.backend.dto.DailyChallengeResponse("valid-anagram", "Valid Anagram", "Solve this classic string problem to earn bonus daily XP and a special profile badge.", "Easy", "Strings", 250, "https://leetcode.com/problems/valid-anagram/"),
+            new com.algobuddy.backend.dto.DailyChallengeResponse("two-sum", "Two Sum", "Find two numbers in the array that add up to the target value.", "Easy", "Arrays", 200, "https://leetcode.com/problems/two-sum/"),
+            new com.algobuddy.backend.dto.DailyChallengeResponse("lru-cache", "LRU Cache", "Design a data structure that follows the constraints of a Least Recently Used (LRU) cache.", "Medium", "Design", 400, "https://leetcode.com/problems/lru-cache/"),
+            new com.algobuddy.backend.dto.DailyChallengeResponse("merge-intervals", "Merge Intervals", "Merge all overlapping intervals into one.", "Medium", "Arrays", 350, "https://leetcode.com/problems/merge-intervals/")
+        );
+
+        long daysSinceEpoch = java.time.LocalDate.now().toEpochDay();
+        int index = (int) (daysSinceEpoch % pool.size());
+        
+        return pool.get(index);
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/service/BookmarkService.java b/backend/src/main/java/com/algobuddy/backend/service/BookmarkService.java
new file mode 100644
index 000000000..ef4239557
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/service/BookmarkService.java
@@ -0,0 +1,48 @@
+package com.algobuddy.backend.service;
+
+import com.algobuddy.backend.entity.Bookmark;
+import com.algobuddy.backend.repository.BookmarkRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.util.List;
+import java.util.Optional;
+import java.util.UUID;
+
+@Service
+@RequiredArgsConstructor
+public class BookmarkService {
+
+    private final BookmarkRepository bookmarkRepository;
+
+    @Transactional(readOnly = true)
+    public Page<Bookmark> getBookmarks(UUID userId, Pageable pageable) {
+        return bookmarkRepository.findByUserId(userId, pageable);
+    }
+
+    @Transactional(readOnly = true)
+    public List<Bookmark> getBookmarks(UUID userId) {
+        return bookmarkRepository.findByUserId(userId);
+    }
+
+    @Transactional
+    public void addBookmark(UUID userId, String problemId, String topicSlug) {
+        Optional<Bookmark> existing = bookmarkRepository.findByUserIdAndProblemId(userId, problemId);
+        if (existing.isEmpty()) {
+            Bookmark bookmark = new Bookmark();
+            bookmark.setUserId(userId);
+            bookmark.setProblemId(problemId);
+            bookmark.setTopicSlug(topicSlug);
+            bookmarkRepository.save(bookmark);
+        }
+    }
+
+    @Transactional
+    public void removeBookmark(UUID userId, String problemId) {
+        bookmarkRepository.findByUserIdAndProblemId(userId, problemId)
+                .ifPresent(bookmarkRepository::delete);
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/service/LeaderboardService.java b/backend/src/main/java/com/algobuddy/backend/service/LeaderboardService.java
new file mode 100644
index 000000000..65c811ab9
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/service/LeaderboardService.java
@@ -0,0 +1,35 @@
+package com.algobuddy.backend.service;
+
+import com.algobuddy.backend.dto.LeaderboardEntryDto;
+import com.algobuddy.backend.repository.UserArenaProfileRepository;
+import com.algobuddy.backend.repository.UserPracticeStatsRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+@RequiredArgsConstructor
+public class LeaderboardService {
+
+    private final UserPracticeStatsRepository statsRepository;
+    private final UserArenaProfileRepository arenaRepository;
+
+    public List<LeaderboardEntryDto> getGlobalStreakLeaderboard() {
+        List<LeaderboardEntryDto> entries = statsRepository.findTop100StreakLeaderboard(org.springframework.data.domain.PageRequest.of(0, 100));
+        int rank = 1;
+        for (LeaderboardEntryDto entry : entries) {
+            entry.setRank(rank++);
+        }
+        return entries;
+    }
+
+    public List<LeaderboardEntryDto> getGlobalArenaLeaderboard() {
+        List<LeaderboardEntryDto> entries = arenaRepository.findTop100ArenaLeaderboard(org.springframework.data.domain.PageRequest.of(0, 100));
+        int rank = 1;
+        for (LeaderboardEntryDto entry : entries) {
+            entry.setRank(rank++);
+        }
+        return entries;
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/service/MySheetService.java b/backend/src/main/java/com/algobuddy/backend/service/MySheetService.java
new file mode 100644
index 000000000..8771bda48
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/service/MySheetService.java
@@ -0,0 +1,120 @@
+package com.algobuddy.backend.service;
+
+import com.algobuddy.backend.entity.MySheet;
+import com.algobuddy.backend.repository.MySheetRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Optional;
+import java.util.Set;
+import java.util.UUID;
+import java.util.stream.Collectors;
+
+@Service
+@RequiredArgsConstructor
+public class MySheetService {
+
+    private final MySheetRepository mySheetRepository;
+
+    @Transactional(readOnly = true)
+    public Page<MySheet> getMySheet(UUID userId, Pageable pageable) {
+        return mySheetRepository.findByUserId(userId, pageable);
+    }
+
+    @Transactional(readOnly = true)
+    public List<MySheet> getMySheet(UUID userId) {
+        return mySheetRepository.findByUserId(userId);
+    }
+
+    @Transactional(readOnly = true)
+    public List<MySheet> getSharedSheet(UUID userId) {
+        return mySheetRepository.findByUserIdAndIsPublicTrue(userId);
+    }
+
+    @Transactional
+    public void addToSheet(UUID userId, String problemId, String note, Boolean isPublic, Boolean sharedNotes) {
+        Optional<MySheet> existing = mySheetRepository.findByUserIdAndProblemId(userId, problemId);
+        if (existing.isPresent()) {
+            MySheet item = existing.get();
+            if (item != null) {
+                if (note != null) {
+                    item.setNote(note);
+                }
+                if (isPublic != null) {
+                    item.setPublic(isPublic);
+                }
+                if (sharedNotes != null) {
+                    item.setSharedNotes(sharedNotes);
+                }
+                mySheetRepository.save(item);
+            }
+        } else {
+            MySheet item = new MySheet();
+            item.setUserId(userId);
+            item.setProblemId(problemId);
+            item.setNote(note == null ? "" : note);
+            item.setPublic(isPublic != null && isPublic);
+            if (sharedNotes != null) {
+                item.setSharedNotes(sharedNotes);
+            }
+            mySheetRepository.save(item);
+        }
+    }
+
+    @Transactional
+    public void updateVisibility(UUID userId, String problemId, boolean isPublic, Boolean sharedNotes) {
+        mySheetRepository.findByUserIdAndProblemId(userId, problemId)
+                .ifPresent(item -> {
+                    item.setPublic(isPublic);
+                    if (sharedNotes != null) {
+                        item.setSharedNotes(sharedNotes);
+                    }
+                    mySheetRepository.save(item);
+                });
+    }
+
+    @Transactional
+    public void removeFromSheet(UUID userId, String problemId) {
+        mySheetRepository.findByUserIdAndProblemId(userId, problemId)
+                .ifPresent(mySheetRepository::delete);
+    }
+
+    @Transactional
+    public void cloneSheet(UUID sharedUserId, UUID targetUserId) {
+        List<MySheet> sharedItems = mySheetRepository.findByUserIdAndIsPublicTrue(sharedUserId);
+        if (sharedItems.isEmpty()) {
+            throw new IllegalStateException("This user has not shared any sheet items");
+        }
+
+        List<String> problemIds = sharedItems.stream()
+                .map(MySheet::getProblemId)
+                .toList();
+
+        List<MySheet> existingItems = mySheetRepository.findByUserIdAndProblemIdIn(targetUserId, problemIds);
+        Set<String> existingProblemIds = existingItems.stream()
+                .map(MySheet::getProblemId)
+                .collect(Collectors.toSet());
+
+        List<MySheet> toSave = new ArrayList<>();
+        for (MySheet sharedItem : sharedItems) {
+            if (!existingProblemIds.contains(sharedItem.getProblemId())) {
+                MySheet newItem = new MySheet();
+                newItem.setUserId(targetUserId);
+                newItem.setProblemId(sharedItem.getProblemId());
+                newItem.setNote(sharedItem.isSharedNotes() ? sharedItem.getNote() : "");
+                newItem.setPublic(false);
+                newItem.setSharedNotes(false);
+                toSave.add(newItem);
+            }
+        }
+
+        if (!toSave.isEmpty()) {
+            mySheetRepository.saveAll(toSave);
+        }
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/service/PracticeService.java b/backend/src/main/java/com/algobuddy/backend/service/PracticeService.java
new file mode 100644
index 000000000..328f153fe
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/service/PracticeService.java
@@ -0,0 +1,233 @@
+package com.algobuddy.backend.service;
+
+import com.algobuddy.backend.dto.BulkProgressRequest;
+import com.algobuddy.backend.dto.ProgressRequest;
+import com.algobuddy.backend.dto.ProgressResponse;
+import com.algobuddy.backend.entity.UserPracticeStats;
+import com.algobuddy.backend.entity.UserProgress;
+import com.algobuddy.backend.repository.UserPracticeStatsRepository;
+import com.algobuddy.backend.repository.UserProgressRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.context.ApplicationContext;
+
+import org.springframework.lang.NonNull;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Propagation;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.time.LocalDate;
+import java.time.OffsetDateTime;
+import java.util.List;
+import java.util.Map;
+import java.util.UUID;
+import java.util.stream.Collectors;
+
+@Service
+@RequiredArgsConstructor
+public class PracticeService {
+
+
+    private final UserProgressRepository progressRepository;
+    private final UserPracticeStatsRepository statsRepository;
+
+    @Autowired
+    private ApplicationContext applicationContext;
+
+
+    @Transactional(readOnly = true)
+    public ProgressResponse getUserProgress(@NonNull UUID userId) {
+        List<UserProgress> progressList = progressRepository.findByUserId(userId);
+        
+        Map<String, ProgressResponse.ProgressDetail> progressMap = progressList.stream()
+                .collect(Collectors.toMap(
+                        UserProgress::getProblemId, 
+                        up -> new ProgressResponse.ProgressDetail(up.getStatus(), up.getUpdatedAt())
+                ));
+
+        UserPracticeStats stats = statsRepository.findById(userId)
+                .orElse(new UserPracticeStats(userId, 0, 0, null, 0));
+
+        OffsetDateTime now = OffsetDateTime.now();
+        OffsetDateTime startOfDay = now.toLocalDate().atStartOfDay(now.getOffset()).toOffsetDateTime();
+        OffsetDateTime startOfWeek = now.toLocalDate().with(java.time.temporal.TemporalAdjusters.previousOrSame(java.time.DayOfWeek.MONDAY)).atStartOfDay(now.getOffset()).toOffsetDateTime();
+        OffsetDateTime startOfMonth = now.toLocalDate().withDayOfMonth(1).atStartOfDay(now.getOffset()).toOffsetDateTime();
+
+        int dailySolved = progressRepository.countCompletedSince(userId, startOfDay);
+        int weeklySolved = progressRepository.countCompletedSince(userId, startOfWeek);
+        int monthlySolved = progressRepository.countCompletedSince(userId, startOfMonth);
+
+        return ProgressResponse.builder()
+                .progress(progressMap)
+                .currentStreak(stats.getCurrentStreak())
+                .longestStreak(stats.getLongestStreak())
+                .visualizedCount(stats.getVisualizedCount())
+                .dailySolved(dailySolved)
+                .weeklySolved(weeklySolved)
+                .monthlySolved(monthlySolved)
+                .build();
+    }
+
+    @Transactional
+    public ProgressResponse updateProgress(@NonNull UUID userId, ProgressRequest request) {
+        progressRepository.upsertProgress(userId, request.getProblemId(), request.getStatus());
+
+        if ("Completed".equals(request.getStatus())) {
+            LocalDate clientLocalDate = null;
+            if (request.getLocalDate() != null) {
+                try {
+                    LocalDate parsed = LocalDate.parse(request.getLocalDate());
+                    LocalDate today = LocalDate.now();
+                    LocalDate yesterday = today.minusDays(1);
+                    if (!parsed.isBefore(yesterday) && !parsed.isAfter(today)) {
+                        clientLocalDate = parsed;
+                    }
+                } catch (Exception e) {
+                    // Ignore parse errors, fallback to default behavior
+                }
+            }
+            updateStreakWithRetry(userId, clientLocalDate);
+        }
+
+        return getUserProgress(userId);
+    }
+
+    @Transactional
+    public ProgressResponse bulkUpdateProgress(@NonNull UUID userId, BulkProgressRequest request) {
+        if (request.getItems() == null || request.getItems().isEmpty()) {
+            return getUserProgress(userId);
+        }
+
+        List<BulkProgressRequest.Item> validItems = request.getItems().stream()
+                .filter(item -> item.getProblemId() != null && !item.getProblemId().trim().isEmpty() && item.getStatus() != null)
+                .toList();
+
+        if (validItems.isEmpty()) {
+            return getUserProgress(userId);
+        }
+
+        List<String> problemIds = validItems.stream().map(BulkProgressRequest.Item::getProblemId).toList();
+        List<UserProgress> existingProgress = progressRepository.findByUserIdAndProblemIdIn(userId, problemIds);
+
+        Map<String, UserProgress> existingProgressMap = existingProgress.stream()
+                .collect(Collectors.toMap(UserProgress::getProblemId, p -> p));
+
+        List<UserProgress> toSave = new java.util.ArrayList<>();
+        boolean anyCompleted = false;
+
+        for (BulkProgressRequest.Item item : validItems) {
+            UserProgress progress = existingProgressMap.get(item.getProblemId());
+            if (progress != null) {
+                progress.setStatus(item.getStatus());
+                progress.setUpdatedAt(OffsetDateTime.now());
+            } else {
+                progress = new UserProgress();
+                progress.setUserId(userId);
+                progress.setProblemId(item.getProblemId());
+                progress.setStatus(item.getStatus());
+                progress.setUpdatedAt(OffsetDateTime.now());
+            }
+            toSave.add(progress);
+
+            if ("Completed".equals(item.getStatus())) {
+                anyCompleted = true;
+            }
+        }
+
+        progressRepository.saveAll(toSave);
+
+        if (anyCompleted) {
+            LocalDate clientLocalDate = null;
+            if (request.getLocalDate() != null) {
+                try {
+                    LocalDate parsed = LocalDate.parse(request.getLocalDate());
+                    LocalDate today = LocalDate.now();
+                    LocalDate yesterday = today.minusDays(1);
+                    if (!parsed.isBefore(yesterday) && !parsed.isAfter(today)) {
+                        clientLocalDate = parsed;
+                    }
+                } catch (Exception e) {
+                    // Ignore parse errors, fallback to default behavior
+                }
+            }
+            updateStreakWithRetry(userId, clientLocalDate);
+        }
+
+        return getUserProgress(userId);
+    }
+
+    @Transactional(propagation = Propagation.REQUIRES_NEW)
+    public void updateStreak(@NonNull UUID userId) {
+        updateStreak(userId, null);
+    }
+
+    @Transactional(propagation = Propagation.REQUIRES_NEW)
+    public void updateStreak(@NonNull UUID userId, LocalDate clientLocalDate) {
+        statsRepository.insertStatsIfNotExists(userId);
+
+        UserPracticeStats stats = statsRepository.findAndLockByUserId(userId)
+                .orElseThrow(() -> new IllegalStateException("UserPracticeStats should exist for user: " + userId));
+
+        LocalDate today = clientLocalDate != null ? clientLocalDate : LocalDate.now();
+        LocalDate lastActive = stats.getLastActiveDate();
+
+        if (lastActive == null) {
+            stats.setCurrentStreak(1);
+            stats.setLongestStreak(1);
+            stats.setLastActiveDate(today);
+        } else if (today.isBefore(lastActive)) {
+            // Out of order update (e.g. past update). Keep current stats and lastActiveDate.
+            return;
+        } else if (lastActive.equals(today.minusDays(1))) {
+            // Consecutive day
+            stats.setCurrentStreak(stats.getCurrentStreak() + 1);
+            if (stats.getCurrentStreak() > stats.getLongestStreak()) {
+                stats.setLongestStreak(stats.getCurrentStreak());
+            }
+            stats.setLastActiveDate(today);
+        } else if (!lastActive.equals(today)) {
+            // Streak broken (not today, not yesterday, and not in the past)
+            stats.setCurrentStreak(1);
+            stats.setLastActiveDate(today);
+        }
+        // If lastActive.equals(today), do nothing (streak already incremented today)
+
+        statsRepository.save(stats);
+    }
+
+    public void updateStreakWithRetry(@NonNull UUID userId) {
+        updateStreakWithRetry(userId, null);
+    }
+
+    public void updateStreakWithRetry(@NonNull UUID userId, LocalDate clientLocalDate) {
+        int maxAttempts = 3;
+        for (int attempt = 1; attempt <= maxAttempts; attempt++) {
+            try {
+                PracticeService selfProxy = null;
+                if (applicationContext != null) {
+                    try {
+                        selfProxy = applicationContext.getBean(PracticeService.class);
+                    } catch (Exception e) {
+                        // Fallback if bean not ready
+                    }
+                }
+                if (selfProxy != null) {
+                    selfProxy.updateStreak(userId, clientLocalDate);
+                } else {
+                    updateStreak(userId, clientLocalDate);
+                }
+                return;
+            } catch (org.springframework.dao.TransientDataAccessException e) {
+                if (attempt == maxAttempts) {
+                    throw e;
+                }
+                try {
+                    Thread.sleep(50 * attempt);
+                } catch (InterruptedException ie) {
+                    Thread.currentThread().interrupt();
+                    throw new RuntimeException(ie);
+                }
+            }
+        }
+    }
+}
diff --git a/backend/src/main/java/com/algobuddy/backend/service/UserProfileService.java b/backend/src/main/java/com/algobuddy/backend/service/UserProfileService.java
new file mode 100644
index 000000000..74649790f
--- /dev/null
+++ b/backend/src/main/java/com/algobuddy/backend/service/UserProfileService.java
@@ -0,0 +1,34 @@
+package com.algobuddy.backend.service;
+
+import com.algobuddy.backend.dto.UserProfileDto;
+import com.algobuddy.backend.entity.UserProfile;
+import com.algobuddy.backend.repository.UserProfileRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.time.OffsetDateTime;
+import java.util.UUID;
+
+@Service
+@RequiredArgsConstructor
+public class UserProfileService {
+
+    private final UserProfileRepository userProfileRepository;
+
+    @Transactional
+    public UserProfile upsertProfile(UUID userId, UserProfileDto dto) {
+        UserProfile profile = userProfileRepository.findById(userId)
+                .orElse(UserProfile.builder().userId(userId).build());
+
+        profile.setUsername(dto.getUsername());
+        profile.setAvatarUrl(dto.getAvatarUrl());
+        profile.setUpdatedAt(OffsetDateTime.now());
+
+        return userProfileRepository.save(profile);
+    }
+    
+    public UserProfile getProfile(UUID userId) {
+        return userProfileRepository.findById(userId).orElse(null);
+    }
+}
diff --git a/backend/src/main/resources/application.yml b/backend/src/main/resources/application.yml
new file mode 100644
index 000000000..31879cd34
--- /dev/null
+++ b/backend/src/main/resources/application.yml
@@ -0,0 +1,51 @@
+spring:
+  application:
+    name: backend
+
+  data:
+    redis:
+      host: ${REDIS_HOST:localhost}
+      port: ${REDIS_PORT:6379}
+      password: ${REDIS_PASSWORD:}
+      ssl:
+        enabled: ${REDIS_SSL:false}
+      timeout: 2000ms
+      lettuce:
+        pool:
+          max-active: 8
+          max-idle: 4
+          min-idle: 1
+
+  datasource:
+    url: ${DB_URL:jdbc:postgresql://localhost:5432/postgres?sslmode=require}
+    username: ${DB_USERNAME:postgres}
+    password: ${DB_PASSWORD:password}
+    hikari:
+      maximum-pool-size: 5
+      minimum-idle: 1
+      data-source-properties:
+        prepareThreshold: 0
+        preparedStatementCacheQueries: 0
+
+  jpa:
+    database-platform: org.hibernate.dialect.PostgreSQLDialect
+    hibernate:
+      ddl-auto: validate
+    properties:
+      hibernate:
+        jdbc:
+          batch_size: 50
+        order_inserts: true
+        order_updates: true
+
+
+server:
+  port: ${PORT:8080}
+
+supabase:
+  url: ${SUPABASE_URL:https://your-project-id.supabase.co}
+
+app:
+  allowed-origins: ${ALLOWED_ORIGINS:http://localhost:3000,https://algobuddy.vercel.app,https://algobuddy.me,https://www.algobuddy.me}
+  trusted-proxies: ${TRUSTED_PROXIES:127.0.0.1,::1,10.0.0.1}
+
diff --git a/backend/src/test/java/com/algobuddy/backend/BackendApplicationTests.java b/backend/src/test/java/com/algobuddy/backend/BackendApplicationTests.java
new file mode 100644
index 000000000..a0bd398af
--- /dev/null
+++ b/backend/src/test/java/com/algobuddy/backend/BackendApplicationTests.java
@@ -0,0 +1,51 @@
+package com.algobuddy.backend;
+
+import com.algobuddy.backend.repository.BookmarkRepository;
+import com.algobuddy.backend.service.ArenaService;
+import com.algobuddy.backend.dto.InitMatchRequest;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import java.util.UUID;
+
+@SpringBootTest
+class BackendApplicationTests {
+
+	@Autowired
+	private BookmarkRepository bookmarkRepository;
+
+	@Autowired
+	private ArenaService arenaService;
+
+	@Test
+	void contextLoads() {
+	}
+
+	@Test
+	void testQueryBookmarks() {
+		try {
+			bookmarkRepository.findByUserId(UUID.randomUUID());
+			System.out.println("Query bookmarks succeeded!");
+		} catch (Exception e) {
+			e.printStackTrace();
+			throw e;
+		}
+	}
+
+	@Test
+	void testInitMatchMock() {
+		try {
+			InitMatchRequest request = InitMatchRequest.builder()
+				.matchId("mock-match-" + System.currentTimeMillis())
+				.topic("Arrays")
+				.difficulty("Easy")
+				.build();
+			arenaService.initMatch(UUID.randomUUID(), request);
+			System.out.println("Init match succeeded!");
+		} catch (Exception e) {
+			e.printStackTrace();
+			throw e;
+		}
+	}
+}
+
diff --git a/backend/src/test/java/com/algobuddy/backend/config/CorsConfigTest.java b/backend/src/test/java/com/algobuddy/backend/config/CorsConfigTest.java
new file mode 100644
index 000000000..de79c2ac5
--- /dev/null
+++ b/backend/src/test/java/com/algobuddy/backend/config/CorsConfigTest.java
@@ -0,0 +1,89 @@
+package com.algobuddy.backend.config;
+
+import org.junit.jupiter.api.Test;
+import org.springframework.test.util.ReflectionTestUtils;
+
+import java.util.List;
+
+import static org.junit.jupiter.api.Assertions.*;
+
+public class CorsConfigTest {
+
+    @Test
+    public void testAllowedOriginsSingle() {
+        SecurityConfig config = new SecurityConfig();
+        ReflectionTestUtils.setField(config, "allowedOrigins", "https://algobuddy.me");
+        ReflectionTestUtils.setField(config, "environment", "prod");
+
+        List<String> origins = config.resolveAllowedOrigins();
+        assertEquals(1, origins.size());
+        assertEquals("https://algobuddy.me", origins.get(0));
+    }
+
+    @Test
+    public void testAllowedOriginsMultiple() {
+        SecurityConfig config = new SecurityConfig();
+        ReflectionTestUtils.setField(config, "allowedOrigins", "http://localhost:3000, https://algobuddy.me,https://another-frontend.app ");
+        ReflectionTestUtils.setField(config, "environment", "prod");
+
+        List<String> origins = config.resolveAllowedOrigins();
+        assertEquals(3, origins.size());
+        assertTrue(origins.contains("http://localhost:3000"));
+        assertTrue(origins.contains("https://algobuddy.me"));
+        assertTrue(origins.contains("https://another-frontend.app"));
+    }
+
+    @Test
+    public void testWildcardIsRejected() {
+        SecurityConfig config = new SecurityConfig();
+        ReflectionTestUtils.setField(config, "allowedOrigins", "*,https://algobuddy.me");
+        ReflectionTestUtils.setField(config, "environment", "prod");
+
+        List<String> origins = config.resolveAllowedOrigins();
+        assertEquals(1, origins.size());
+        assertEquals("https://algobuddy.me", origins.get(0));
+    }
+
+    @Test
+    public void testTrailingSlashIsTrimmed() {
+        SecurityConfig config = new SecurityConfig();
+        ReflectionTestUtils.setField(config, "allowedOrigins", "https://algobuddy.me/");
+        ReflectionTestUtils.setField(config, "environment", "prod");
+
+        List<String> origins = config.resolveAllowedOrigins();
+        assertEquals(1, origins.size());
+        assertEquals("https://algobuddy.me", origins.get(0));
+    }
+
+    @Test
+    public void testInvalidSchemeIsRejected() {
+        SecurityConfig config = new SecurityConfig();
+        ReflectionTestUtils.setField(config, "allowedOrigins", "ftp://algobuddy.me,https://algobuddy.me");
+        ReflectionTestUtils.setField(config, "environment", "prod");
+
+        List<String> origins = config.resolveAllowedOrigins();
+        assertEquals(1, origins.size());
+        assertEquals("https://algobuddy.me", origins.get(0));
+    }
+
+    @Test
+    public void testEmptyOriginsFallbackInDev() {
+        SecurityConfig config = new SecurityConfig();
+        ReflectionTestUtils.setField(config, "allowedOrigins", "");
+        ReflectionTestUtils.setField(config, "environment", "dev");
+
+        List<String> origins = config.resolveAllowedOrigins();
+        assertEquals(1, origins.size());
+        assertEquals("http://localhost:3000", origins.get(0));
+    }
+
+    @Test
+    public void testEmptyOriginsBlockAllInProd() {
+        SecurityConfig config = new SecurityConfig();
+        ReflectionTestUtils.setField(config, "allowedOrigins", "");
+        ReflectionTestUtils.setField(config, "environment", "production");
+
+        List<String> origins = config.resolveAllowedOrigins();
+        assertTrue(origins.isEmpty());
+    }
+}
diff --git a/backend/src/test/java/com/algobuddy/backend/config/CorsIntegrationTest.java b/backend/src/test/java/com/algobuddy/backend/config/CorsIntegrationTest.java
new file mode 100644
index 000000000..f3fe64cb2
--- /dev/null
+++ b/backend/src/test/java/com/algobuddy/backend/config/CorsIntegrationTest.java
@@ -0,0 +1,46 @@
+package com.algobuddy.backend.config;
+
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
+import org.springframework.http.HttpHeaders;
+import org.springframework.test.web.servlet.MockMvc;
+
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.options;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.header;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
+/**
+ * Integration-level smoke test that verifies the CORS filter is correctly
+ * wired into the live security filter chain.
+ *
+ * <p>Unit-level logic (wildcard rejection, scheme validation, etc.) is already
+ * covered exhaustively by {@link CorsConfigTest}. This test only confirms that
+ * pre-flight requests are handled end-to-end by the running servlet context.
+ */
+@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.MOCK)
+@AutoConfigureMockMvc
+public class CorsIntegrationTest {
+
+    @Autowired
+    private MockMvc mockMvc;
+
+    @Test
+    public void testAllowedOriginPreflight() throws Exception {
+        mockMvc.perform(options("/api/v1/practice/progress")
+                .header(HttpHeaders.ORIGIN, "http://localhost:3000")
+                .header(HttpHeaders.ACCESS_CONTROL_REQUEST_METHOD, "GET"))
+                .andExpect(status().isOk())
+                .andExpect(header().string(
+                        HttpHeaders.ACCESS_CONTROL_ALLOW_ORIGIN, "http://localhost:3000"));
+    }
+
+    @Test
+    public void testBlockedOriginPreflight() throws Exception {
+        mockMvc.perform(options("/api/v1/practice/progress")
+                .header(HttpHeaders.ORIGIN, "http://evil.com")
+                .header(HttpHeaders.ACCESS_CONTROL_REQUEST_METHOD, "GET"))
+                .andExpect(status().isForbidden());
+    }
+}
diff --git a/backend/src/test/java/com/algobuddy/backend/service/ArenaServiceUnitTest.java b/backend/src/test/java/com/algobuddy/backend/service/ArenaServiceUnitTest.java
new file mode 100644
index 000000000..af0bed159
--- /dev/null
+++ b/backend/src/test/java/com/algobuddy/backend/service/ArenaServiceUnitTest.java
@@ -0,0 +1,383 @@
+package com.algobuddy.backend.service;
+
+import com.algobuddy.backend.dto.ArenaLeaderboardProjection;
+import com.algobuddy.backend.dto.ArenaProfileResponse;
+import com.algobuddy.backend.dto.RecordMatchRequest;
+import com.algobuddy.backend.entity.ArenaMatch;
+import com.algobuddy.backend.entity.UserArenaProfile;
+import com.algobuddy.backend.repository.ArenaMatchRepository;
+import com.algobuddy.backend.repository.UserArenaProfileRepository;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+
+import org.springframework.cache.Cache;
+import org.springframework.cache.CacheManager;
+
+import org.springframework.transaction.PlatformTransactionManager;
+import org.springframework.transaction.TransactionStatus;
+import java.util.Optional;
+import java.util.UUID;
+
+import static org.junit.jupiter.api.Assertions.*;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.ArgumentMatchers.anyString;
+import static org.mockito.Mockito.*;
+
+public class ArenaServiceUnitTest {
+
+    private UserArenaProfileRepository profileRepository;
+    private ArenaMatchRepository matchRepository;
+    private CacheManager cacheManager;
+    private PlatformTransactionManager transactionManager;
+    private Cache cache;
+    private ArenaService arenaService;
+
+    @BeforeEach
+    public void setUp() {
+        profileRepository = mock(UserArenaProfileRepository.class);
+        matchRepository = mock(ArenaMatchRepository.class);
+        cacheManager = mock(CacheManager.class);
+        transactionManager = mock(PlatformTransactionManager.class);
+        cache = mock(Cache.class);
+        when(cacheManager.getCache(anyString())).thenReturn(cache);
+        arenaService = new ArenaService(profileRepository, matchRepository, cacheManager, transactionManager);
+    }
+
+    @Test
+    public void testGetProfileReturnsCorrectRank() {
+        UUID userId = UUID.randomUUID();
+        ArenaLeaderboardProjection projection = mock(ArenaLeaderboardProjection.class);
+        when(projection.getUserId()).thenReturn(userId);
+        when(projection.getXp()).thenReturn(1500);
+        when(projection.getLevel()).thenReturn(2);
+        when(projection.getRating()).thenReturn(1400);
+        when(projection.getBattlesWon()).thenReturn(5);
+        when(projection.getBattlesLost()).thenReturn(3);
+        when(projection.getTotalProblemsSolved()).thenReturn(10);
+        when(projection.getName()).thenReturn("TestUser");
+        when(projection.getAvatarUrl()).thenReturn("http://avatar.url");
+
+        when(profileRepository.existsById(userId)).thenReturn(true);
+        when(profileRepository.findProfileWithUserDetails(userId)).thenReturn(Optional.of(projection));
+        when(profileRepository.findRankByUserId(userId)).thenReturn(42);
+
+        ArenaProfileResponse response = arenaService.getProfile(userId);
+
+        assertNotNull(response);
+        assertEquals(userId, response.getUserId());
+        assertEquals(1500, response.getXp());
+        assertEquals(1400, response.getRating());
+        assertEquals(42, response.getRank());
+        assertEquals("TestUser", response.getName());
+        assertEquals("http://avatar.url", response.getAvatarUrl());
+
+        verify(profileRepository, times(1)).existsById(userId);
+        verify(profileRepository, times(1)).findProfileWithUserDetails(userId);
+        verify(profileRepository, times(1)).findRankByUserId(userId);
+    }
+
+    @Test
+    public void testCalculateRankWhenRankIsNull() {
+        UUID userId = UUID.randomUUID();
+        ArenaLeaderboardProjection projection = mock(ArenaLeaderboardProjection.class);
+        when(projection.getUserId()).thenReturn(userId);
+        when(projection.getXp()).thenReturn(0);
+        when(projection.getLevel()).thenReturn(1);
+        when(projection.getRating()).thenReturn(1200);
+        when(projection.getBattlesWon()).thenReturn(0);
+        when(projection.getBattlesLost()).thenReturn(0);
+        when(projection.getTotalProblemsSolved()).thenReturn(0);
+        when(projection.getName()).thenReturn("NewUser");
+        when(projection.getAvatarUrl()).thenReturn("");
+
+        when(profileRepository.existsById(userId)).thenReturn(true);
+        when(profileRepository.findProfileWithUserDetails(userId)).thenReturn(Optional.of(projection));
+        
+        // Simulate no rank found
+        when(profileRepository.findRankByUserId(userId)).thenReturn(null);
+        
+        // Mock findTopPlayers to return empty list (size = 0)
+        when(profileRepository.findTopPlayers(any())).thenReturn(java.util.Collections.emptyList());
+
+        ArenaProfileResponse response = arenaService.getProfile(userId);
+
+        assertNotNull(response);
+        assertEquals(1, response.getRank()); // size + 1 = 0 + 1 = 1
+
+        verify(profileRepository, times(1)).existsById(userId);
+        verify(profileRepository, times(1)).findProfileWithUserDetails(userId);
+        verify(profileRepository, times(1)).findRankByUserId(userId);
+        verify(profileRepository, times(1)).findTopPlayers(any());
+    }
+
+    @Test
+    public void testGetProfileCreatesDefaultProfileIfNotFound() {
+        UUID userId = UUID.randomUUID();
+        ArenaLeaderboardProjection projection = mock(ArenaLeaderboardProjection.class);
+        when(projection.getUserId()).thenReturn(userId);
+        when(projection.getXp()).thenReturn(0);
+        when(projection.getLevel()).thenReturn(1);
+        when(projection.getRating()).thenReturn(1200);
+
+        when(profileRepository.existsById(userId)).thenReturn(false);
+        when(profileRepository.findProfileWithUserDetails(userId)).thenReturn(Optional.of(projection));
+        when(profileRepository.findRankByUserId(userId)).thenReturn(1);
+
+        ArenaProfileResponse response = arenaService.getProfile(userId);
+
+        assertNotNull(response);
+        verify(profileRepository, times(1)).existsById(userId);
+        verify(profileRepository, times(1)).save(any(UserArenaProfile.class));
+        verify(profileRepository, times(1)).findProfileWithUserDetails(userId);
+    }
+
+    @Test
+    public void testGetProfileRecalculatesRankOnCacheHit() {
+        UUID userId = UUID.randomUUID();
+        
+        ArenaProfileResponse cachedResponse = ArenaProfileResponse.builder()
+                .userId(userId)
+                .xp(1500)
+                .level(2)
+                .rating(1400)
+                .battlesWon(5)
+                .battlesLost(3)
+                .totalProblemsSolved(10)
+                .rank(null)
+                .name("TestUser")
+                .avatarUrl("http://avatar.url")
+                .build();
+        
+        when(profileRepository.existsById(userId)).thenReturn(true);
+        when(cache.get(userId, ArenaProfileResponse.class)).thenReturn(cachedResponse);
+        when(profileRepository.findRankByUserId(userId)).thenReturn(12);
+
+        ArenaProfileResponse response = arenaService.getProfile(userId);
+
+        assertNotNull(response);
+        assertEquals(userId, response.getUserId());
+        assertEquals(1400, response.getRating());
+        assertEquals(12, response.getRank());
+        assertEquals("TestUser", response.getName());
+
+        verify(profileRepository, times(1)).existsById(userId);
+        verify(profileRepository, never()).findProfileWithUserDetails(userId);
+        verify(profileRepository, times(1)).findRankByUserId(userId);
+        
+        assertNull(cachedResponse.getRank());
+    }
+
+    @Test
+    public void testRecordMatchResult_WinnerSuccess() {
+        UUID p1Id = UUID.randomUUID();
+        UUID p2Id = UUID.randomUUID();
+        String matchId = "match-12345";
+
+        ArenaMatch match = ArenaMatch.builder()
+                .matchId(matchId)
+                .player1Id(p1Id)
+                .player2Id(p2Id)
+                .status(ArenaMatch.MatchStatus.PENDING)
+                .build();
+
+        RecordMatchRequest request = RecordMatchRequest.builder()
+                .matchId(matchId)
+                .isWinner(true)
+                .build();
+
+        UserArenaProfile p1Profile = UserArenaProfile.builder().userId(p1Id).xp(100).rating(1200).build();
+        UserArenaProfile p2Profile = UserArenaProfile.builder().userId(p2Id).xp(100).rating(1200).build();
+
+        when(matchRepository.findByMatchId(matchId)).thenReturn(Optional.of(match));
+        when(profileRepository.findById(p1Id)).thenReturn(Optional.of(p1Profile));
+        when(profileRepository.findById(p2Id)).thenReturn(Optional.of(p2Profile));
+        when(transactionManager.getTransaction(any())).thenReturn(mock(TransactionStatus.class));
+
+        // Create a spy of arenaService to mock verifyMatchResult
+        ArenaService spyService = spy(arenaService);
+        doReturn(p1Id).when(spyService).verifyMatchResult(matchId, p1Id);
+
+        // Run the service call
+        spyService.recordMatchResult(p1Id, request);
+
+        // Assertions
+        assertEquals(ArenaMatch.MatchStatus.COMPLETED, match.getStatus());
+        assertEquals(p1Id, match.getWinnerId());
+        assertEquals(1225, p1Profile.getRating()); // Winner rating +25
+        assertEquals(150, p1Profile.getXp()); // Winner XP +50
+        assertEquals(1185, p2Profile.getRating()); // Loser rating -15
+        assertEquals(110, p2Profile.getXp()); // Loser XP +10
+        
+        verify(matchRepository, times(1)).save(match);
+        verify(profileRepository, times(1)).save(p1Profile);
+        verify(profileRepository, times(1)).save(p2Profile);
+    }
+
+    @Test
+    public void testRecordMatchResult_LoserSuccess() {
+        UUID p1Id = UUID.randomUUID();
+        UUID p2Id = UUID.randomUUID();
+        String matchId = "match-12345";
+
+        ArenaMatch match = ArenaMatch.builder()
+                .matchId(matchId)
+                .player1Id(p1Id)
+                .player2Id(p2Id)
+                .status(ArenaMatch.MatchStatus.PENDING)
+                .build();
+
+        RecordMatchRequest request = RecordMatchRequest.builder()
+                .matchId(matchId)
+                .isWinner(false)
+                .build();
+
+        UserArenaProfile p1Profile = UserArenaProfile.builder().userId(p1Id).xp(100).rating(1200).build();
+        UserArenaProfile p2Profile = UserArenaProfile.builder().userId(p2Id).xp(100).rating(1200).build();
+
+        when(matchRepository.findByMatchId(matchId)).thenReturn(Optional.of(match));
+        when(profileRepository.findById(p1Id)).thenReturn(Optional.of(p1Profile));
+        when(profileRepository.findById(p2Id)).thenReturn(Optional.of(p2Profile));
+        when(transactionManager.getTransaction(any())).thenReturn(mock(TransactionStatus.class));
+
+        // Create a spy of arenaService to mock verifyMatchResult (p2Id is the verified winner)
+        ArenaService spyService = spy(arenaService);
+        doReturn(p2Id).when(spyService).verifyMatchResult(matchId, p1Id);
+
+        // Run the service call (p1Id is the loser requesting)
+        spyService.recordMatchResult(p1Id, request);
+
+        // Assertions
+        assertEquals(ArenaMatch.MatchStatus.COMPLETED, match.getStatus());
+        assertEquals(p2Id, match.getWinnerId());
+        assertEquals(1185, p1Profile.getRating()); // Loser rating -15
+        assertEquals(110, p1Profile.getXp()); // Loser XP +10
+        assertEquals(1225, p2Profile.getRating()); // Winner rating +25
+        assertEquals(150, p2Profile.getXp()); // Winner XP +50
+    }
+
+    @Test
+    public void testRecordMatchResult_MockMatchAgainstBotHasNoRatingXPChanges() {
+        UUID p1Id = UUID.randomUUID();
+        UUID botId = UUID.fromString("00000000-0000-0000-0000-000000000000");
+        String matchId = "mock-match-12345";
+
+        ArenaMatch match = ArenaMatch.builder()
+                .matchId(matchId)
+                .player1Id(p1Id)
+                .player2Id(botId)
+                .status(ArenaMatch.MatchStatus.PENDING)
+                .build();
+
+        RecordMatchRequest request = RecordMatchRequest.builder()
+                .matchId(matchId)
+                .isWinner(true)
+                .build();
+
+        UserArenaProfile p1Profile = UserArenaProfile.builder().userId(p1Id).xp(100).rating(1200).build();
+
+        when(matchRepository.findByMatchId(matchId)).thenReturn(Optional.of(match));
+        when(profileRepository.findById(p1Id)).thenReturn(Optional.of(p1Profile));
+        when(transactionManager.getTransaction(any())).thenReturn(mock(TransactionStatus.class));
+
+        // Call directly
+        arenaService.recordMatchResult(p1Id, request);
+
+        // Assertions
+        assertEquals(ArenaMatch.MatchStatus.COMPLETED, match.getStatus());
+        assertEquals(p1Id, match.getWinnerId());
+        assertEquals(1200, p1Profile.getRating()); // Rating unchanged for mock match!
+        assertEquals(100, p1Profile.getXp()); // XP unchanged for mock match!
+    }
+
+    @Test
+    public void testRecordMatchResult_NotParticipantThrowsSecurityException() {
+        UUID p1Id = UUID.randomUUID();
+        UUID p2Id = UUID.randomUUID();
+        UUID nonParticipantId = UUID.randomUUID();
+        String matchId = "match-12345";
+
+        ArenaMatch match = ArenaMatch.builder()
+                .matchId(matchId)
+                .player1Id(p1Id)
+                .player2Id(p2Id)
+                .status(ArenaMatch.MatchStatus.PENDING)
+                .build();
+
+        RecordMatchRequest request = RecordMatchRequest.builder()
+                .matchId(matchId)
+                .isWinner(true)
+                .build();
+
+        when(matchRepository.findByMatchId(matchId)).thenReturn(Optional.of(match));
+
+        assertThrows(SecurityException.class, () -> {
+            arenaService.recordMatchResult(nonParticipantId, request);
+        });
+    }
+
+    @Test
+    public void testRecordMatchResult_CompletedMatchReturnsSilently() {
+        UUID p1Id = UUID.randomUUID();
+        UUID p2Id = UUID.randomUUID();
+        String matchId = "match-12345";
+
+        ArenaMatch match = ArenaMatch.builder()
+                .matchId(matchId)
+                .player1Id(p1Id)
+                .player2Id(p2Id)
+                .status(ArenaMatch.MatchStatus.COMPLETED)
+                .winnerId(p1Id)
+                .build();
+
+        RecordMatchRequest request = RecordMatchRequest.builder()
+                .matchId(matchId)
+                .isWinner(true)
+                .build();
+
+        when(matchRepository.findByMatchId(matchId)).thenReturn(Optional.of(match));
+
+        // Should return silently and not call verifyMatchResult
+        ArenaService spyService = spy(arenaService);
+        spyService.recordMatchResult(p1Id, request);
+
+        verify(spyService, never()).verifyMatchResult(anyString(), any(UUID.class));
+    }
+
+    @Test
+    public void testGetMatchHistoryResolvesNPlus1() {
+        UUID userId = UUID.randomUUID();
+        UUID opponentId = UUID.randomUUID();
+        
+        com.algobuddy.backend.entity.ArenaMatch match1 = com.algobuddy.backend.entity.ArenaMatch.builder()
+                .id(UUID.randomUUID())
+                .matchId("match-1")
+                .player1Id(userId)
+                .player2Id(opponentId)
+                .topic("Arrays")
+                .difficulty("Easy")
+                .startTime(java.time.LocalDateTime.now())
+                .status(com.algobuddy.backend.entity.ArenaMatch.MatchStatus.COMPLETED)
+                .winnerId(userId)
+                .build();
+
+        when(matchRepository.findRecentMatchesByUserId(eq(userId), any())).thenReturn(java.util.List.of(match1));
+        
+        ArenaLeaderboardProjection projection = mock(ArenaLeaderboardProjection.class);
+        when(projection.getUserId()).thenReturn(opponentId);
+        when(projection.getName()).thenReturn("OpponentUser");
+        
+        when(profileRepository.findProfilesWithUserDetailsIn(any())).thenReturn(java.util.List.of(projection));
+
+        java.util.List<com.algobuddy.backend.dto.ArenaMatchResponse> history = arenaService.getMatchHistory(userId);
+
+        assertNotNull(history);
+        assertEquals(1, history.size());
+        assertEquals("OpponentUser", history.get(0).getOpponentName());
+        assertEquals("Victory", history.get(0).getResult());
+
+        verify(matchRepository, times(1)).findRecentMatchesByUserId(eq(userId), any());
+        verify(profileRepository, times(1)).findProfilesWithUserDetailsIn(any());
+        verify(profileRepository, never()).findProfileWithUserDetails(any());
+    }
+}
+
diff --git a/backend/src/test/java/com/algobuddy/backend/service/PracticeServiceUnitTest.java b/backend/src/test/java/com/algobuddy/backend/service/PracticeServiceUnitTest.java
new file mode 100644
index 000000000..2ce9891c6
--- /dev/null
+++ b/backend/src/test/java/com/algobuddy/backend/service/PracticeServiceUnitTest.java
@@ -0,0 +1,211 @@
+package com.algobuddy.backend.service;
+
+import com.algobuddy.backend.entity.UserPracticeStats;
+import com.algobuddy.backend.repository.UserPracticeStatsRepository;
+import com.algobuddy.backend.repository.UserProgressRepository;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import java.time.LocalDate;
+import java.util.Optional;
+import java.util.UUID;
+import java.util.concurrent.CountDownLatch;
+import java.util.concurrent.ExecutorService;
+import java.util.concurrent.Executors;
+import java.util.concurrent.TimeUnit;
+import java.util.concurrent.atomic.AtomicInteger;
+import java.util.concurrent.locks.ReentrantLock;
+
+import static org.junit.jupiter.api.Assertions.*;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.Mockito.*;
+
+public class PracticeServiceUnitTest {
+
+    private UserProgressRepository progressRepository;
+    private UserPracticeStatsRepository statsRepository;
+    private PracticeService practiceService;
+
+    @BeforeEach
+    public void setUp() {
+        progressRepository = mock(UserProgressRepository.class);
+        statsRepository = mock(UserPracticeStatsRepository.class);
+        practiceService = new PracticeService(progressRepository, statsRepository);
+    }
+
+    @Test
+    public void testUpdateStreakSequentialAndLockingFlow() {
+        UUID userId = UUID.randomUUID();
+        UserPracticeStats stats = new UserPracticeStats(userId, 5, 5, LocalDate.now().minusDays(1), 0);
+
+        // When insertStatsIfNotExists is called, do nothing
+        doNothing().when(statsRepository).insertStatsIfNotExists(userId);
+
+        // When findAndLockByUserId is called, return our stats object
+        when(statsRepository.findAndLockByUserId(userId)).thenReturn(Optional.of(stats));
+
+        // Execute updateStreak
+        practiceService.updateStreak(userId);
+
+        // Verify that insertStatsIfNotExists was called first
+        verify(statsRepository, times(1)).insertStatsIfNotExists(userId);
+
+        // Verify findAndLockByUserId was called
+        verify(statsRepository, times(1)).findAndLockByUserId(userId);
+
+        // Verify the record was updated to today and streak was incremented
+        assertEquals(6, stats.getCurrentStreak());
+        assertEquals(6, stats.getLongestStreak());
+        assertEquals(LocalDate.now(), stats.getLastActiveDate());
+
+        // Verify save was called with the updated stats
+        verify(statsRepository, times(1)).save(stats);
+    }
+
+    @Test
+    public void testConcurrentUpdateStreakSerializationSimulation() throws InterruptedException {
+        UUID userId = UUID.randomUUID();
+        
+        // We will simulate two threads calling updateStreak concurrently.
+        // We'll use a ReentrantLock inside a mock Answer to simulate database lock blocking.
+        ReentrantLock mockDbLock = new ReentrantLock();
+        AtomicInteger activeThreadsInCriticalSection = new AtomicInteger(0);
+        AtomicInteger maxConcurrentThreadsInCriticalSection = new AtomicInteger(0);
+
+        // We use a shared UserPracticeStats state
+        UserPracticeStats sharedStats = new UserPracticeStats(userId, 5, 5, LocalDate.now().minusDays(1), 0);
+
+        doAnswer(invocation -> {
+            // Simulate database ON CONFLICT DO NOTHING
+            return null;
+        }).when(statsRepository).insertStatsIfNotExists(userId);
+
+        when(statsRepository.findAndLockByUserId(userId)).thenAnswer(invocation -> {
+            // Acquire the lock to simulate SELECT FOR UPDATE
+            mockDbLock.lock();
+            
+            // Track how many threads are concurrently holding this mock database lock
+            int active = activeThreadsInCriticalSection.incrementAndGet();
+            if (active > maxConcurrentThreadsInCriticalSection.get()) {
+                maxConcurrentThreadsInCriticalSection.set(active);
+            }
+
+            // Return a copy or the actual object. In hibernate, since it is a database transaction,
+            // each transaction gets the database state at the time of SELECT FOR UPDATE.
+            UserPracticeStats currentStatsState = new UserPracticeStats(
+                    sharedStats.getUserId(),
+                    sharedStats.getCurrentStreak(),
+                    sharedStats.getLongestStreak(),
+                    sharedStats.getLastActiveDate(),
+                    sharedStats.getVisualizedCount()
+            );
+            return Optional.of(currentStatsState);
+        });
+
+        // We mock statsRepository.save to update the shared state and release the lock
+        when(statsRepository.save(any(UserPracticeStats.class))).thenAnswer(invocation -> {
+            UserPracticeStats savedStats = invocation.getArgument(0);
+            
+            // Update the shared stats (representing database commit/flush)
+            sharedStats.setCurrentStreak(savedStats.getCurrentStreak());
+            sharedStats.setLongestStreak(savedStats.getLongestStreak());
+            sharedStats.setLastActiveDate(savedStats.getLastActiveDate());
+            sharedStats.setVisualizedCount(savedStats.getVisualizedCount());
+
+            // Decrement active threads holding lock
+            activeThreadsInCriticalSection.decrementAndGet();
+            
+            // Release the lock to simulate transaction commit/end releasing the row lock
+            mockDbLock.unlock();
+            return sharedStats;
+        });
+
+        // Run 2 threads concurrently
+        ExecutorService executor = Executors.newFixedThreadPool(2);
+        CountDownLatch latch = new CountDownLatch(2);
+
+        Runnable task = () -> {
+            try {
+                practiceService.updateStreak(userId);
+            } finally {
+                latch.countDown();
+            }
+        };
+
+        executor.submit(task);
+        executor.submit(task);
+
+        latch.await(5, TimeUnit.SECONDS);
+        executor.shutdown();
+
+        // Under pessimistic locking simulation:
+        // 1. Thread A acquires mockDbLock, activeThreadsInCriticalSection = 1, reads sharedStats (streak = 5, lastActive = yesterday).
+        // 2. Thread B attempts to call findAndLockByUserId, blocks on mockDbLock.lock().
+        // 3. Thread A updates currentStreak = 6, lastActiveDate = today, calls save().
+        // 4. In save(), sharedStats is updated, activeThreadsInCriticalSection = 0, and mockDbLock.unlock() is called.
+        // 5. Thread B resumes, acquires mockDbLock, activeThreadsInCriticalSection = 1, reads sharedStats (now streak = 6, lastActive = today).
+        // 6. Thread B sees lastActive == today, does nothing (streak remains 6, lastActive = today), calls save().
+        // 7. Thread B releases lock.
+        // Thus, maximum concurrent threads in the critical section should be exactly 1, and the final streak should be 6.
+        
+        assertEquals(1, maxConcurrentThreadsInCriticalSection.get(), "Pessimistic lock simulation failed to serialize transactions");
+        assertEquals(6, sharedStats.getCurrentStreak(), "Final streak should be 6");
+        assertEquals(LocalDate.now(), sharedStats.getLastActiveDate(), "Last active date should be today");
+    }
+
+    @Test
+    public void testUpdateStreakWithClientLocalDateConsecutive() {
+        UUID userId = UUID.randomUUID();
+        LocalDate clientToday = LocalDate.of(2026, 7, 9);
+        UserPracticeStats stats = new UserPracticeStats(userId, 5, 5, clientToday.minusDays(1), 0);
+
+        doNothing().when(statsRepository).insertStatsIfNotExists(userId);
+        when(statsRepository.findAndLockByUserId(userId)).thenReturn(Optional.of(stats));
+
+        practiceService.updateStreak(userId, clientToday);
+
+        assertEquals(6, stats.getCurrentStreak());
+        assertEquals(6, stats.getLongestStreak());
+        assertEquals(clientToday, stats.getLastActiveDate());
+        verify(statsRepository, times(1)).save(stats);
+    }
+
+    @Test
+    public void testUpdateStreakWithClientLocalDateOutOfOrder() {
+        UUID userId = UUID.randomUUID();
+        LocalDate lastActive = LocalDate.of(2026, 7, 9);
+        // User solved today, but an out of order completion arrives for yesterday
+        LocalDate clientYesterday = lastActive.minusDays(1);
+        UserPracticeStats stats = new UserPracticeStats(userId, 5, 5, lastActive, 0);
+
+        doNothing().when(statsRepository).insertStatsIfNotExists(userId);
+        when(statsRepository.findAndLockByUserId(userId)).thenReturn(Optional.of(stats));
+
+        practiceService.updateStreak(userId, clientYesterday);
+
+        // Streak and last active date should not be changed/reset
+        assertEquals(5, stats.getCurrentStreak());
+        assertEquals(5, stats.getLongestStreak());
+        assertEquals(lastActive, stats.getLastActiveDate());
+        verify(statsRepository, never()).save(any(UserPracticeStats.class));
+    }
+
+    @Test
+    public void testUpdateStreakWithClientLocalDateFutureBreak() {
+        UUID userId = UUID.randomUUID();
+        LocalDate lastActive = LocalDate.of(2026, 7, 5);
+        // User starts practicing again on July 9th (gap of 4 days)
+        LocalDate clientFuture = LocalDate.of(2026, 7, 9);
+        UserPracticeStats stats = new UserPracticeStats(userId, 5, 5, lastActive, 0);
+
+        doNothing().when(statsRepository).insertStatsIfNotExists(userId);
+        when(statsRepository.findAndLockByUserId(userId)).thenReturn(Optional.of(stats));
+
+        practiceService.updateStreak(userId, clientFuture);
+
+        // Streak should be broken and reset to 1
+        assertEquals(1, stats.getCurrentStreak());
+        assertEquals(5, stats.getLongestStreak());
+        assertEquals(clientFuture, stats.getLastActiveDate());
+        verify(statsRepository, times(1)).save(stats);
+    }
+}
diff --git a/backend/supabase_applications_table.sql b/backend/supabase_applications_table.sql
new file mode 100644
index 000000000..a7ebb0f25
--- /dev/null
+++ b/backend/supabase_applications_table.sql
@@ -0,0 +1,34 @@
+-- Create applications table for one-click "Apply with Profile"
+CREATE TABLE IF NOT EXISTS public.applications (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    student_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+    job_id UUID NOT NULL REFERENCES public.jobs(id) ON DELETE CASCADE,
+    status TEXT NOT NULL DEFAULT 'pending' CHECK (status IN ('pending', 'accepted', 'rejected')),
+    student_name TEXT,
+    student_email TEXT,
+    student_branch TEXT,
+    student_cgpa TEXT,
+    student_skills TEXT,
+    student_resume_link TEXT,
+    applied_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    UNIQUE(student_id, job_id)
+);
+
+-- Enable Row Level Security
+ALTER TABLE public.applications ENABLE ROW LEVEL SECURITY;
+
+-- Policies
+CREATE POLICY "Students can view their own applications"
+ON public.applications FOR SELECT
+USING (auth.uid() = student_id);
+
+CREATE POLICY "Students can create their own applications"
+ON public.applications FOR INSERT
+WITH CHECK (auth.uid() = student_id);
+
+-- Index for efficient lookups
+CREATE INDEX IF NOT EXISTS idx_applications_student
+ON public.applications (student_id, applied_at DESC);
+
+CREATE INDEX IF NOT EXISTS idx_applications_job
+ON public.applications (job_id);
diff --git a/backend/supabase_arena_tables.sql b/backend/supabase_arena_tables.sql
new file mode 100644
index 000000000..e019c71f0
--- /dev/null
+++ b/backend/supabase_arena_tables.sql
@@ -0,0 +1,47 @@
+-- Supabase SQL script to create the user_arena_profiles table
+
+CREATE TABLE IF NOT EXISTS public.user_arena_profiles (
+    user_id UUID PRIMARY KEY,
+    xp INTEGER NOT NULL DEFAULT 0,
+    level INTEGER NOT NULL DEFAULT 1,
+    rating INTEGER NOT NULL DEFAULT 1200,
+    battles_won INTEGER NOT NULL DEFAULT 0,
+    battles_lost INTEGER NOT NULL DEFAULT 0,
+    total_problems_solved INTEGER NOT NULL DEFAULT 0,
+    version INTEGER
+);
+
+-- Enable Row Level Security (RLS) if needed, or leave it off if the backend handles it.
+-- ALTER TABLE public.user_arena_profiles ENABLE ROW LEVEL SECURITY;
+
+CREATE TABLE IF NOT EXISTS public.arena_matches (
+    id UUID PRIMARY KEY,
+    player1_id UUID NOT NULL,
+    player2_id UUID NOT NULL,
+    winner_id UUID,
+    topic VARCHAR(255),
+    difficulty VARCHAR(50),
+    start_time TIMESTAMP NOT NULL,
+    end_time TIMESTAMP,
+    rating_change_p1 INTEGER,
+    rating_change_p2 INTEGER,
+    xp_awarded_p1 INTEGER,
+    xp_awarded_p2 INTEGER,
+    match_id VARCHAR(255),
+    version INTEGER
+);
+
+CREATE INDEX IF NOT EXISTS idx_arena_rating_xp ON public.user_arena_profiles (rating DESC, xp DESC);
+CREATE INDEX IF NOT EXISTS idx_arena_matches_match_id ON public.arena_matches (match_id);
+
+-- Migration: Add status column and indexes for match cleanup and rate limiting
+ALTER TABLE public.arena_matches ADD COLUMN IF NOT EXISTS status VARCHAR(20) NOT NULL DEFAULT 'PENDING';
+
+ALTER TABLE public.arena_matches ADD COLUMN IF NOT EXISTS version INTEGER NOT NULL DEFAULT 0;
+
+CREATE INDEX IF NOT EXISTS idx_arena_matches_player1_start
+    ON public.arena_matches (player1_id, start_time DESC);
+CREATE INDEX IF NOT EXISTS idx_arena_matches_player2_start
+    ON public.arena_matches (player2_id, start_time DESC);
+CREATE INDEX IF NOT EXISTS idx_arena_matches_status_start
+    ON public.arena_matches (status, start_time) WHERE status = 'PENDING';
diff --git a/backend/supabase_bookmarks_table.sql b/backend/supabase_bookmarks_table.sql
new file mode 100644
index 000000000..c36def669
--- /dev/null
+++ b/backend/supabase_bookmarks_table.sql
@@ -0,0 +1,21 @@
+-- Create bookmarks table for saving job listings
+CREATE TABLE IF NOT EXISTS public.bookmarks (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    student_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+    job_id UUID NOT NULL REFERENCES public.jobs(id) ON DELETE CASCADE,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    UNIQUE(student_id, job_id)
+);
+
+-- Enable Row Level Security
+ALTER TABLE public.bookmarks ENABLE ROW LEVEL SECURITY;
+
+-- Policies
+CREATE POLICY "Students can manage their own bookmarks"
+ON public.bookmarks FOR ALL
+USING (auth.uid() = student_id)
+WITH CHECK (auth.uid() = student_id);
+
+-- Index for efficient lookups
+CREATE INDEX IF NOT EXISTS idx_bookmarks_student
+ON public.bookmarks (student_id, created_at DESC);
diff --git a/backend/supabase_companies_table.sql b/backend/supabase_companies_table.sql
new file mode 100644
index 000000000..bf61e6b4d
--- /dev/null
+++ b/backend/supabase_companies_table.sql
@@ -0,0 +1,40 @@
+-- Create companies table for company profile pages
+CREATE TABLE IF NOT EXISTS public.companies (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    name TEXT NOT NULL,
+    description TEXT,
+    logo_url TEXT,
+    website TEXT,
+    location TEXT,
+    industry TEXT,
+    size TEXT,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Add company_id FK to existing jobs table
+ALTER TABLE public.jobs ADD COLUMN IF NOT EXISTS company_id UUID REFERENCES public.companies(id) ON DELETE SET NULL;
+
+-- Enable Row Level Security
+ALTER TABLE public.companies ENABLE ROW LEVEL SECURITY;
+
+-- Policies
+CREATE POLICY "Anyone can view companies"
+ON public.companies FOR SELECT
+USING (true);
+
+CREATE POLICY "Authenticated users can create companies"
+ON public.companies FOR INSERT
+WITH CHECK (auth.role() = 'authenticated');
+
+CREATE POLICY "Users can update their own companies"
+ON public.companies FOR UPDATE
+USING (auth.uid() IN (
+    SELECT posted_by FROM public.jobs WHERE public.jobs.company_id = id
+));
+
+-- Indexes
+CREATE INDEX IF NOT EXISTS idx_companies_name
+ON public.companies (name);
+
+CREATE INDEX IF NOT EXISTS idx_jobs_company_id
+ON public.jobs (company_id);
diff --git a/backend/supabase_jobs_search_indexes.sql b/backend/supabase_jobs_search_indexes.sql
new file mode 100644
index 000000000..a8a72b94c
--- /dev/null
+++ b/backend/supabase_jobs_search_indexes.sql
@@ -0,0 +1,8 @@
+-- Enable pg_trgm extension for efficient ILIKE search
+CREATE EXTENSION IF NOT EXISTS pg_trgm;
+
+-- Add trigram indexes for searchable columns on the jobs table
+-- These enable index scans for ILIKE '%term%' and 'term%' queries
+CREATE INDEX IF NOT EXISTS idx_jobs_title_trgm ON jobs USING gin (title gin_trgm_ops);
+CREATE INDEX IF NOT EXISTS idx_jobs_company_trgm ON jobs USING gin (company gin_trgm_ops);
+CREATE INDEX IF NOT EXISTS idx_jobs_location_trgm ON jobs USING gin (location gin_trgm_ops);
diff --git a/backend/supabase_jobs_table.sql b/backend/supabase_jobs_table.sql
new file mode 100644
index 000000000..392dd4520
--- /dev/null
+++ b/backend/supabase_jobs_table.sql
@@ -0,0 +1,37 @@
+-- Create jobs table for student job listings with full-text search support
+CREATE TABLE IF NOT EXISTS public.jobs (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    title TEXT NOT NULL,
+    company TEXT NOT NULL,
+    location TEXT,
+    description TEXT NOT NULL,
+    skills TEXT,
+    salary_range TEXT,
+    job_type TEXT DEFAULT 'full-time',
+    experience_level TEXT DEFAULT 'entry',
+    status TEXT NOT NULL DEFAULT 'pending',
+    posted_by UUID REFERENCES auth.users(id) ON DELETE CASCADE,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    verified_recruiter BOOLEAN DEFAULT false
+);
+
+-- Enable Row Level Security
+ALTER TABLE public.jobs ENABLE ROW LEVEL SECURITY;
+
+-- Policies
+CREATE POLICY "Anyone can view approved jobs"
+ON public.jobs FOR SELECT
+USING (status = 'approved');
+
+CREATE POLICY "Authenticated users can create jobs"
+ON public.jobs FOR INSERT
+WITH CHECK (auth.role() = 'authenticated');
+
+CREATE POLICY "Users can update their own jobs"
+ON public.jobs FOR UPDATE
+USING (auth.uid() = posted_by);
+
+-- Index for pagination and search
+CREATE INDEX IF NOT EXISTS idx_jobs_status_created
+ON public.jobs (status, created_at DESC);
diff --git a/backend/supabase_mysheet_migration.sql b/backend/supabase_mysheet_migration.sql
new file mode 100644
index 000000000..fed938425
--- /dev/null
+++ b/backend/supabase_mysheet_migration.sql
@@ -0,0 +1,10 @@
+-- Migration: Add visibility columns to my_sheet table
+-- This enables the shared sheet feature with per-item privacy control
+
+ALTER TABLE my_sheet ADD COLUMN IF NOT EXISTS is_public BOOLEAN NOT NULL DEFAULT false;
+ALTER TABLE my_sheet ADD COLUMN IF NOT EXISTS shared_notes BOOLEAN NOT NULL DEFAULT false;
+
+-- Allow authenticated users to view public items of any user
+CREATE POLICY IF NOT EXISTS "Anyone can view public sheet items"
+ON my_sheet FOR SELECT
+USING (is_public = true);
diff --git a/backend/supabase_notifications_table.sql b/backend/supabase_notifications_table.sql
new file mode 100644
index 000000000..9afff5441
--- /dev/null
+++ b/backend/supabase_notifications_table.sql
@@ -0,0 +1,51 @@
+-- Create notifications table for job alert notifications and application status updates
+CREATE TABLE IF NOT EXISTS public.notifications (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    student_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+    job_id UUID REFERENCES public.jobs(id) ON DELETE CASCADE,
+    message TEXT NOT NULL,
+    read BOOLEAN NOT NULL DEFAULT false,
+    type TEXT NOT NULL DEFAULT 'new_job' CHECK (type IN ('new_job', 'application_status_update')),
+    metadata JSONB DEFAULT '{}',
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Enable Row Level Security
+ALTER TABLE public.notifications ENABLE ROW LEVEL SECURITY;
+
+-- Policies
+CREATE POLICY "Students can view their own notifications"
+ON public.notifications FOR SELECT
+USING (auth.uid() = student_id);
+
+CREATE POLICY "Students can update their own notifications"
+ON public.notifications FOR UPDATE
+USING (auth.uid() = student_id);
+
+-- Index for efficient queries
+CREATE INDEX IF NOT EXISTS idx_notifications_student_read
+ON public.notifications (student_id, read, created_at DESC);
+
+-- Function to notify all students when a new approved job is posted
+CREATE OR REPLACE FUNCTION public.notify_students_new_job()
+RETURNS TRIGGER AS $$
+BEGIN
+  INSERT INTO public.notifications (student_id, job_id, message, type)
+  SELECT
+    up.id AS student_id,
+    NEW.id AS job_id,
+    'New job posted: ' || NEW.title || ' at ' || NEW.company,
+    'new_job'
+  FROM auth.users up
+  WHERE up.id <> '00000000-0000-0000-0000-000000000000';
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+-- Trigger to run after a new job is inserted with approved status
+DROP TRIGGER IF EXISTS on_job_approved_notify_students ON public.jobs;
+CREATE TRIGGER on_job_approved_notify_students
+AFTER INSERT ON public.jobs
+FOR EACH ROW
+WHEN (NEW.status = 'approved')
+EXECUTE FUNCTION public.notify_students_new_job();
diff --git a/backend/supabase_practice_tables.sql b/backend/supabase_practice_tables.sql
new file mode 100644
index 000000000..2d1d89b2f
--- /dev/null
+++ b/backend/supabase_practice_tables.sql
@@ -0,0 +1,167 @@
+-- Create user_progress table
+CREATE TABLE user_progress (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+    problem_id TEXT NOT NULL,
+    status TEXT NOT NULL,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    UNIQUE(user_id, problem_id)
+);
+
+-- Create user_practice_stats table
+CREATE TABLE user_practice_stats (
+    user_id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
+    current_streak INTEGER DEFAULT 0,
+    longest_streak INTEGER DEFAULT 0,
+    last_active_date DATE,
+    visualized_count INTEGER DEFAULT 0,
+    version INTEGER NOT NULL DEFAULT 0
+);
+
+-- Enable RLS (Row Level Security)
+ALTER TABLE user_progress ENABLE ROW LEVEL SECURITY;
+ALTER TABLE user_practice_stats ENABLE ROW LEVEL SECURITY;
+
+-- Create policies for user_progress
+CREATE POLICY "Users can view their own progress" 
+ON user_progress FOR SELECT 
+USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can insert their own progress" 
+ON user_progress FOR INSERT 
+WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "Users can update their own progress" 
+ON user_progress FOR UPDATE 
+USING (auth.uid() = user_id);
+
+-- Create policies for user_practice_stats
+CREATE POLICY "Users can view their own stats" 
+ON user_practice_stats FOR SELECT 
+USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can update their own stats" 
+ON user_practice_stats FOR UPDATE 
+USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can insert their own stats" 
+ON user_practice_stats FOR INSERT 
+WITH CHECK (auth.uid() = user_id);
+
+-- Create problem_bookmarks table
+CREATE TABLE problem_bookmarks (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+    problem_id TEXT NOT NULL,
+    topic_slug TEXT NOT NULL,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    UNIQUE(user_id, problem_id)
+);
+
+-- Enable RLS and Policies for problem_bookmarks
+ALTER TABLE problem_bookmarks ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Users can view their own bookmarks" 
+ON problem_bookmarks FOR SELECT 
+USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can insert their own bookmarks" 
+ON problem_bookmarks FOR INSERT 
+WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "Users can delete their own bookmarks" 
+ON problem_bookmarks FOR DELETE 
+USING (auth.uid() = user_id);
+
+-- ─── My Sheet table ──────────────────────────────────────────────────────────
+-- Stores user-curated personal problem lists (distinct from bookmarks)
+CREATE TABLE IF NOT EXISTS my_sheet (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+    problem_id TEXT NOT NULL,
+    note TEXT DEFAULT '',
+    added_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    UNIQUE(user_id, problem_id)
+);
+
+-- Enable RLS
+ALTER TABLE my_sheet ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Users can view their own sheet"
+ON my_sheet FOR SELECT
+USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can insert into their own sheet"
+ON my_sheet FOR INSERT
+WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "Users can update their own sheet"
+ON my_sheet FOR UPDATE
+USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can delete from their own sheet"
+ON my_sheet FOR DELETE
+USING (auth.uid() = user_id);
+
+-- ─── Arena: user_arena_profiles ──────────────────────────────────────────────
+
+-- Enable RLS
+ALTER TABLE user_arena_profiles ENABLE ROW LEVEL SECURITY;
+
+-- Anyone can read profiles (needed for leaderboard)
+CREATE POLICY "Anyone can view arena profiles"
+ON user_arena_profiles FOR SELECT
+USING (true);
+
+-- Users can insert their own profile (first-time setup)
+CREATE POLICY "Users can insert their own arena profile"
+ON user_arena_profiles FOR INSERT
+WITH CHECK (auth.uid() = user_id);
+
+-- Users can update their own profile
+CREATE POLICY "Users can update their own arena profile"
+ON user_arena_profiles FOR UPDATE
+USING (auth.uid() = user_id);
+
+-- ─── Arena: arena_matches ────────────────────────────────────────────────────
+
+-- Enable RLS
+ALTER TABLE arena_matches ENABLE ROW LEVEL SECURITY;
+
+-- Players can view matches they participated in
+CREATE POLICY "Players can view their own matches"
+ON arena_matches FOR SELECT
+USING (
+    auth.uid() = player1_id
+    OR auth.uid() = player2_id
+);
+
+-- Only the service role (backend) may insert/update/delete matches.
+-- Authenticated users have no direct write access — all writes go through
+-- the Spring Boot service which connects as the service role.
+-- (No INSERT / UPDATE / DELETE policies = blocked for anon + authenticated roles)
+
+
+-- ─── notifications ────────────────────────────────────────────────────────────
+-- Stores in-app notifications for users (e.g., job application status updates)
+
+CREATE TABLE IF NOT EXISTS notifications (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    student_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+    job_id UUID,
+    message TEXT NOT NULL DEFAULT '',
+    read BOOLEAN DEFAULT false,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+ALTER TABLE notifications ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Users can view their own notifications"
+ON notifications FOR SELECT
+USING (auth.uid() = student_id);
+
+CREATE POLICY "Users can mark their own notifications as read"
+ON notifications FOR UPDATE
+USING (auth.uid() = student_id);
+
+-- Service role inserts notifications (no INSERT policy for authenticated users)
diff --git a/design.md b/design.md
new file mode 100644
index 000000000..df9962767
--- /dev/null
+++ b/design.md
@@ -0,0 +1,205 @@
+# AlgoBuddy Design System & UI Specification
+
+## 1. Context and Goals
+This document serves as the implementation-ready, token-driven UI/UX guidance for the **AlgoBuddy** platform. The design system is optimized for learning efficiency, high visual aesthetics (glassmorphism, smooth animations, and dual-theme slate-purple styling), and strict accessibility (WCAG 2.2 AA). It defines the design vocabulary across all key modules: the Algorithm Visualizer, Practice Arena, AlgoBot AI Chatbot, and Floating Algorithm Notebook.
+
+---
+
+## 2. Design Tokens and Foundations
+
+### 2.1 Color Palette
+AlgoBuddy uses a curated, harmonious color system tailored for long coding sessions. Solid fills, border opacities, and light/dark theme variables are strictly mapped to CSS tokens.
+
+#### Brand Colors
+*   **Primary Purple (Base)**: `#a435f0` (Used for active buttons, brand logo accents, progress lines, and focused states)
+*   **Primary Purple (Hover/Dark)**: `#8f2cd6` (Used for hover states on primary components)
+*   **Purple Accent (Light Fills)**: `rgba(164, 53, 240, 0.08)` / `rgba(164, 53, 240, 0.1)` (Used for badges, sidebar selected states, and background card tint overlays)
+*   **Purple Accent (Border)**: `rgba(164, 53, 240, 0.2)`
+
+#### Light Mode Tokens
+*   `color.bg.base`: `#f8fafc` (Slate 50 - Main background fill)
+*   `color.bg.surface`: `#ffffff` (White - Card, panel, and sidebar background)
+*   `color.bg.header`: `rgba(255, 255, 255, 0.85)` (Glassmorphic header fill)
+*   `color.text.primary`: `#0f172a` (Slate 900 - High contrast text)
+*   `color.text.secondary`: `#475569` (Slate 600 - Secondary paragraphs)
+*   `color.text.muted`: `#94a3b8` (Slate 400 - Timestamps, place holders)
+*   `color.border.default`: `#f1f5f9` (Slate 100 - Border delimiters)
+*   `color.border.strong`: `#e2e8f0` (Slate 200 - Input/interactive borders)
+
+#### Dark Mode Tokens
+*   `color.bg.base`: `#0f0f12` (Main dark grey background)
+*   `color.bg.surface`: `#1c1d21` (Neutral 900 equivalent - Panel base background)
+*   `color.bg.header`: `rgba(28, 29, 33, 0.85)` (Dark glassmorphic header fill)
+*   `color.text.primary`: `#f8fafc` (Slate 50 - High contrast text)
+*   `color.text.secondary`: `#cbd5e1` (Slate 300 - Standard paragraphs)
+*   `color.text.muted`: `#64748b` (Slate 500 - Timestamps, placeholder text)
+*   `color.border.default`: `#2d2f34` (Neutral 800 - Border delimiters)
+*   `color.border.strong`: `#3e4147` (Neutral 700 - Input/interactive borders)
+
+#### Status Colors (Shared)
+*   **Success (Easy / Solved)**: `#22c55e` (Emerald 500) | Accent: `rgba(34, 197, 94, 0.1)`
+*   **Warning (Medium / Attempted)**: `#f59e0b` (Amber 500) | Accent: `rgba(245, 158, 11, 0.1)`
+*   **Danger (Hard / Error)**: `#ef4444` (Red 500) | Accent: `rgba(239, 68, 68, 0.1)`
+
+---
+
+### 2.2 Typography Scale
+All typography uses clean fonts loaded dynamically (e.g. Google Fonts) with precise sizing scales.
+
+*   **Primary Typeface**: `Inter`, `Outfit`, `Source Sans 3`, sans-serif (For user interfaces, inputs, and menus)
+*   **Headings Typeface (Editorial)**: `Source Serif 4`, `Source Serif Pro`, Georgia, serif (For landing page hero sections and marketing cards)
+*   **Monospace Typeface**: `Fira Code`, `JetBrains Mono`, SFMono-Regular, Consolas, monospace (For code playback and input textareas)
+
+#### Font Sizes & Line Heights
+*   `font.size.xs`: `11px` / `12px` (LH: `16px`) - Badge numbers, dates, tags, metadata
+*   `font.size.sm`: `13px` (LH: `18px`) - Sub-labels, search inputs, secondary interface text
+*   `font.size.base`: `14px` (LH: `20px`) - Main body copy, button labels, list items
+*   `font.size.lg`: `16px` (LH: `24px`) - Section headings, markdown body reading text
+*   `font.size.xl`: `18px` (LH: `26px`) - Cards headings, smaller layout title banners
+*   `font.size.2xl`: `24px` (LH: `32px`) - Page dashboard titles, main banners
+*   `font.size.3xl`: `36px` (LH: `44px`) - Modal and marketing headings
+*   `font.size.4xl`: `48px` (LH: `56px`) - Main landing Hero headlines
+
+---
+
+### 2.3 Spacing Scale
+Layout offsets must strictly adhere to the 4px grid.
+*   `space.1`: `4px` (`0.25rem`)
+*   `space.2`: `8px` (`0.5rem`)
+*   `space.3`: `12px` (`0.75rem`)
+*   `space.4`: `16px` (`1rem`)
+*   `space.5`: `20px` (`1.25rem`)
+*   `space.6`: `24px` (`1.5rem`)
+*   `space.8`: `32px` (`2rem`)
+*   `space.12`: `48px` (`3rem`)
+
+---
+
+### 2.4 Border Radius, Elevation & Motion
+*   `radius.xs`: `6px` / `8px` (Inside buttons, search fields, toolbar utilities)
+*   `radius.sm`: `12px` (Sidebar items, active list nodes, dropdown select panels)
+*   `radius.md`: `16px` (Default cards, chatbot input boxes, dialog action panels)
+*   `radius.lg`: `24px` (Major outer wrappers, dashboard sections, floating widgets)
+*   `radius.xl`: `32px` (Banners, main dashboard panels, landing visual sections)
+*   `radius.full`: `9999px` (Pills, circular button controls, avatars, scroll-to-top)
+*   `shadow.sm`: `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` (Light boundaries)
+*   `shadow.md`: `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px` (Card lift)
+*   `shadow.lg`: `rgba(0, 0, 0, 0.15) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -2px` (Dropdowns, floating buttons)
+*   `shadow.2xl`: `rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` (Modals, Chat panels, Notebook widgets)
+*   `motion.duration.instant`: `150ms` (Color transitions, minor opacity shifts)
+*   `motion.duration.fast`: `200ms` (Scale hover states, spring offsets)
+*   `motion.duration.normal`: `250ms` (Side panels sliding, modal fades)
+*   `motion.duration.slow`: `300ms` (Scroll triggers, complex sidebar transitions)
+*   `motion.ease`: `cubic-bezier(0.4, 0, 0.2, 1)`
+
+---
+
+## 3. Component-Level Rules
+
+### 3.1 Global Navigation Bar (Navbar)
+*   **Anatomy**: Logo link, menu links, notifications bell, user profile avatar with dropdown trigger, and light/dark theme switch.
+*   **Anatomy Rules**:
+    *   Height must be locked at `72px`.
+    *   Base background must be glassmorphic (`backdrop-blur-md` with `bg-white/85` in light mode and `bg-neutral-900/80` in dark mode).
+    *   Underline indicators under links must use `bg-primary` and transition on hover or selection.
+*   **Responsive Rules**:
+    *   On desktop (`md` and up), show flat link list.
+    *   On mobile (below `md`), show mobile toggle button which reveals a full-page drawer sliding down. Prevents background scroll when open.
+
+---
+
+### 3.2 Practice Arena Dashboard
+*   **PracticeSessionBanner**:
+    *   Must be styled as a raised dashboard card using a clean border outline.
+    *   Contains "Back to All Sessions" link at the top-left, pointing to `/visualizer`.
+    *   Action area contains `Start Practice` (solid primary fill) and `Group Study` (bordered outline).
+    *   *Constraint*: No bookmark triggers inside this top banner wrapper.
+*   **PracticeRightSidebar (Session Progress)**:
+    *   Circular progress ring must use `#a435f0` for active progress and a faint opacity fill for background.
+    *   The percentage text (e.g. `49%`) must use `text-base font-black` (14px) to remain perfectly contained inside the progress ring without overlapping boundaries.
+*   **Filters & Tables**:
+    *   Search bar must have a minimum height of `44px` with a placeholder text and `Search` icon positioned on the left at `left-4`.
+    *   Pagination controls must be clearly bounded and show "Showing X to Y of Z problems" indicator.
+    *   Row states:
+        *   Default: Standard background border.
+        *   Hover: Shift background to light grey overlay (`bg-slate-50/20` / `hover:bg-neutral-800/10`) and apply focus outline to active elements.
+
+---
+
+### 3.3 Floating AI Chatbot (AlgoBot)
+*   **Anatomy**: Floating toggle button, floating chat panel.
+*   **Trigger Button**:
+    *   Anchored at `fixed bottom-3 right-3 sm:bottom-6 sm:right-6` (Z-index: `10000`).
+    *   Size is locked to `w-14 h-14` with a `rounded-2xl` border-radius and `bg-primary` solid fill.
+    *   Contains the customized `AlgoBotIcon`.
+*   **Chat Panel**:
+    *   Floating position: `bottom-[80px] sm:bottom-[92px] right-4 sm:right-6` (Z-index: `10000`).
+    *   Desktop width is `400px`, height `600px` (or `max-h-[calc(100vh-120px)]`).
+    *   Mobile width is full screen width minus padding (`w-[calc(100vw-32px)]`).
+    *   Message blocks:
+        *   User message: Solid `bg-primary` with white text, aligned to the right.
+        *   Assistant message: Light grey card with black/white text, aligned to the left. Supports full markdown rendering, syntax-highlighted code segments, tables, and blockquotes.
+
+---
+
+### 3.4 Floating Algorithm Notebook (FloatingNotesAssistant)
+*   **Anatomy**: Floating toggle button (shares style of Chatbot button), dual-pane notes panel.
+*   **Trigger Button**:
+    *   Positioned above or below other components in a stacked vertical alignment:
+        *   When scrolled: `bottom-36 right-3 sm:bottom-44 sm:right-6` (above BackToTop).
+        *   When not scrolled: `bottom-20 right-3 sm:bottom-24 sm:right-6` (directly above Chatbot).
+*   **Dashboard Panel**:
+    *   Fixed side-by-side positioning next to the floating button stack:
+        *   Desktop: `bottom-[92px] right-[88px] left-auto w-[540px] h-[450px]` (Z-index: `9999`). This keeps the right button stack fully visible and prevents viewport clipping.
+        *   Mobile: `bottom-[80px] left-4 right-4 w-[calc(100vw-32px)] h-[400px]` (centered).
+    *   Left Sidebar (Note management):
+        *   Width is locked to `w-[110px] sm:w-[190px]` (Z-index: `9999`).
+        *   Contains: `+ New Note` button, search bar (icon left, 28px left padding on input), and filtered scrollable list.
+    *   Right Pane (Workspace):
+        *   Header with note title input, category selector dropdown, and `Write` / `Preview` mode toggles.
+        *   Preview mode renders notes through an automatic preprocessor.
+            *   *Preprocessor rule*: Resolves headers missing a space (e.g. `#hello` -> `# hello`) before parsing.
+            *   *Whitespace rule*: Preserves single line breaks inside paragraph/list elements using `whitespace-pre-wrap` styling inside leaf nodes, but ignores it on the main wrapper container to avoid large block spacing gaps.
+
+---
+
+## 4. Accessibility Requirements (WCAG 2.2 AA)
+
+*   **Keyboard Accessibility**:
+    *   Every interactive component (buttons, inputs, select menus, note items) must be keyboard tabbable (`tabindex="0"`).
+    *   Focus states must display a distinct visual outline (`focus-visible:ring-2 focus-visible:ring-primary`). Never hide focus outline unless replacement visual styling is applied.
+*   **Touch Targeting**:
+    *   All floating buttons and list action items must have a minimum touch target size of `44px x 44px` on mobile layouts.
+*   **Color Contrast**:
+    *   All visual text elements (except icons used purely for aesthetics) must adhere to a contrast ratio of at least 4.5:1 against their backgrounds (3:1 for large text).
+*   **Aria Labels**:
+    *   Floating buttons must have descriptive `aria-label` properties (e.g. `aria-label="Algorithm Notebook"`, `aria-label="Close Chatbot"`).
+    *   Icon buttons (e.g., Delete, Copy, Download) must contain descriptive `title` attributes.
+
+---
+
+## 5. Content and Tone Standards
+*   **Tone**: Concise, helpful, developer-friendly, and confident.
+*   **Code Block Writing Rules**: Code blocks in previews or chatbot replies must specify the programming language (e.g. `javascript`, `python`) to enable syntax highlighting.
+*   **Formatting Rules**:
+    *   Use bold (`**text**`) for focus keywords, DSA concepts, and time complexity metrics (e.g., **O(N log N)**).
+    *   Provide direct, bulleted checklists for instructions.
+
+---
+
+## 6. Anti-Patterns & Prohibited Implementations
+*   **Visual overlap**: Do not place the notebook dashboard directly above the trigger button on desktop (causes layout blocking on screens with heights under 760px). Anchor it side-by-side (`right-[88px]`).
+*   **Hardcoded hexadecimal values**: Do not apply custom colors inline in JSX. Use Tailwind variables (`text-primary`, `bg-slate-50`, `dark:bg-neutral-900`) to guarantee light/dark mode consistency.
+*   **Soft breaks collapsing**: Do not let single newlines collapse into a single line in markdown previews. Ensure `whitespace-pre-wrap` is applied to individual `<p>` and `<li>` components.
+*   **Empty lists**: Do not leave sidebars empty when no notes or bookmarks are found. Render a structured, stylized empty state with a call to action.
+
+---
+
+## 7. Design QA Checklist
+- [ ] Do all floating panels (`FloatingNotesAssistant`, `Chatbot`) fit on a standard 700px height laptop viewport without clipping the header?
+- [ ] Does the floating Notes panel stay to the left of the button stack on desktop, leaving buttons accessible?
+- [ ] Does pressing `Tab` focus on all note sidebar items, search inputs, and formatting toolbar buttons?
+- [ ] Is there a visible `ring-2` focus border when navigating elements via keyboard?
+- [ ] Are single line breaks in notes preserved correctly in the preview panel?
+- [ ] Do headers without spaces (e.g. `#hello`) automatically format and render as visual headings in the preview?
+- [ ] Does the linter pass with 0 warnings or errors after styling modifications?
diff --git a/docs/issues/collaboration-recording-broken.md b/docs/issues/collaboration-recording-broken.md
new file mode 100644
index 000000000..00e450b62
--- /dev/null
+++ b/docs/issues/collaboration-recording-broken.md
@@ -0,0 +1,202 @@
+## Title
+
+**Collaboration Engine Stale Closures Break Recording, Presenter Handoff, and Cause Duplicate Message Processing / Network Spam**
+
+---
+
+## Description
+
+The real-time collaboration feature (`useCollaboration.js` + `DryRunClient.jsx`) has a **systemic stale closure bug** that makes multiple features completely non-functional or broken. The same root cause — **state variables captured in closures that are never refreshed** — affects recording, presenter handoff, and state synchronization.
+
+---
+
+## Root Cause Analysis
+
+### 1. Recording Feature is Completely Broken (Stale `recording`)
+
+**File:** `app/components/ui/useCollaboration.js`, lines 112–115, 228–249
+
+```javascript
+// Line 112 — captures `recording` at render-time, never updates
+function recordIfNeeded(event) {
+  if (!recording) return;  // <-- STALE: always `false` in captured closure
+  setRecordedEvents((current) => [...current, event]);
+}
+
+// Line 228 — channel callback captures processEnvelope once in attachSession()
+channel.on('broadcast', { event: 'envelope' }, (payload) => {
+  processEnvelope(payload.payload);  // <-- captures `recording` at attachSession time
+});
+
+// Line 247 — same stale capture in BroadcastChannel
+broadcastChannel.onmessage = (event) => processEnvelope(event.data);
+```
+
+`processEnvelope` is defined inside the hook and reads `recording` from the render closure. However, `processEnvelope` is passed into `channel.on('broadcast', ...)` and `broadcastChannel.onmessage` only **once** inside `attachSession()`. When the user clicks "Start Recording" (`setRecording(true)`), a new render creates a new `processEnvelope` with `recording = true`, but the **listeners still reference the old one** where `recording = false`.
+
+**Impact:** `recordedEvents` array stays empty forever. The record/export feature produces blank exports. Users cannot save or share their collaborative sessions.
+
+### 2. Stale `presenterId` Causes Wrong Remote State Application After Handoff
+
+**File:** `app/components/ui/useCollaboration.js`, lines 145–155, and `app/visualizer/dry-run/DryRunClient.jsx`, lines 380–409
+
+When a `control:grant` envelope arrives, `processEnvelope` calls `setPresenterId("user-B")` and then **immediately** calls `callbacksRef.current.onRemoteStateDelta(...)`. But `handleRemoteStateDelta` reads `collaboration.presenterId` from the **current render's closure** — which still has the **old** value.
+
+```javascript
+// DryRunClient.jsx line 383
+function handleRemoteStateDelta(delta) {
+  const isPresenter =
+    collaboration.presenterId && collaboration.presenterId === collaboration.clientId;
+  //                         ^^ STALE: still old presenterId!
+
+  if (!followPresenter && !isPresenter) {
+    return;  // Wrongly skips applying delta because old presenterId doesn't match
+  }
+  // ... apply delta
+}
+```
+
+**Timeline:**
+1. User A (presenter) grants control to User B
+2. User B's `processEnvelope` calls `setPresenterId("user-B")` (updates React state)
+3. Then calls `handleRemoteStateDelta` synchronously
+4. `handleRemoteStateDelta` reads `collaboration.presenterId` from old closure = still `null` or old value
+5. `isPresenter` evaluates to `false` → function returns early, **delta is silently dropped**
+6. Next render (async, after current call stack) updates `presenterId` — delta is lost
+
+**Impact:** After every presenter handoff, the first state update from the new presenter is silently dropped. This causes 1+ frame of visual desynchronization between participants.
+
+### 3. Dual-Transport Message Duplication (Supabase + BroadcastChannel)
+
+**File:** `app/components/ui/useCollaboration.js`, lines 185–203
+
+Messages are transmitted via THREE paths:
+1. **Direct call:** `processEnvelope(envelope)` on line 193 (immediate local processing)
+2. **Supabase Realtime:** Channel broadcast on lines 195–199 (with `self: true` on line 226)
+3. **BroadcastChannel:** `postMessage` on lines 201–203
+
+Since `self: true` is set on the Supabase channel, the sender receives their **own** message back via Supabase. If BroadcastChannel is also available, the sender receives it a **third** time. The `seenSequencesRef` dedup (lines 120–127) attempts to filter duplicates, but there's a race: `recordIfNeeded` is called on the **first** delivery (line 193), so the event is recorded once. But `recordIfNeeded` is NOT guarded by `seenSequencesRef` — it's called directly, not through the dedup path.
+
+For **remote clients**: Both Supabase and BroadcastChannel deliver the same envelope. The `seenSequencesRef` dedup should catch the second delivery, but in synchronous delivery scenarios (e.g., BroadcastChannel fires before Supabase finishes), the dedup map may not be updated in time.
+
+**Impact:** Duplicate annotations, duplicate state updates, inflated `recordedEvents`, and visual glitches in collaborative editing.
+
+### 4. Re-render Cascade Causes Network Spam
+
+**File:** `app/components/ui/useCollaboration.js`, lines 359–383, and `app/visualizer/dry-run/DryRunClient.jsx`, lines 444–476
+
+`useCollaboration` returns an object where every property is recreated on every render (no `useMemo`, no `useCallback`):
+
+```javascript
+return {
+  session,            // reference changes if state changed
+  connectionStatus,   // new string reference every render
+  participants,       // new array every render
+  annotations,        // new array every render
+  presenterId,        // new string/null reference every render
+  recording,          // new boolean every render
+  recordedEvents,     // new array every render
+  error,              // new string/null every render
+  createSession,      // new function every render (no useCallback)
+  joinSession,        // new function every render
+  // ... all functions and values are new references
+};
+```
+
+`DryRunClient.jsx` consumes this in a `useEffect` dependency array:
+
+```javascript
+useEffect(() => {
+  // broadcasts state to all participants
+  sendStateRef.current?.({ source, language, step, playing, speed, ... });
+}, [
+  source, language, step, playing, speed,
+  collaboration.session,        // <-- changes every render (new ref)
+  collaboration.presenterId,    // <-- changes every render (new ref)
+  collaboration.clientId,       // <-- changes every render (new ref)
+]);
+```
+
+Since `collaboration` is a new object every render, **all** `collaboration.*` destructured values appear "changed". The broadcast `useEffect` fires on **every** re-render, regardless of whether any actual collaboration state changed.
+
+**Impact:** Every keystroke, every click, every animation frame triggers a redundant network broadcast to all session participants. This causes:
+- Unnecessary server/Redis load
+- Increased bandwidth usage
+- Potential rate limiting on Supabase Realtime
+- CPU churn on all connected clients processing redundant messages
+
+---
+
+## Files Affected
+
+| File | Lines | Issue |
+|------|-------|-------|
+| `app/components/ui/useCollaboration.js` | 112–115, 145–155, 185–203, 228–249, 359–383 | Stale closures, dual transport, non-memoized return |
+| `app/visualizer/dry-run/DryRunClient.jsx` | 380–409, 444–476 | Stale `presenterId` in remote handler, broad effect deps |
+| `app/visualizer/dry-run/page.jsx` | 1–50 | Missing `useVisualizerKeyboard` integration |
+| `app/hooks/usePlayback.js` | 15–28 | `pauseResolveRef` called when no promise exists |
+
+---
+
+## Proposed Fix
+
+### Fix 1: Use Refs for Closure-Read State
+Replace state-reads with ref-reads in `recordIfNeeded` and all callback-invoked functions:
+
+```javascript
+const recordingRef = useRef(recording);
+useEffect(() => { recordingRef.current = recording; }, [recording]);
+
+function recordIfNeeded(event) {
+  if (!recordingRef.current) return;  // reads from ref, never stale
+  setRecordedEvents((current) => [...current, event]);
+}
+```
+
+Apply the same ref pattern to `presenterId`, `followPresenter`, and any other state read inside callbacks.
+
+### Fix 2: Eliminate Dual-Transport Duplication
+Remove `self: true` from the Supabase channel subscription, OR remove the BroadcastChannel path. Pick one transport for remote delivery and only use the direct call for local processing.
+
+### Fix 3: Memoize Hook Return
+Wrap the return value of `useCollaboration` in `useMemo`, and wrap all returned functions in `useCallback`:
+
+```javascript
+return useMemo(() => ({
+  session,
+  connectionStatus,
+  // ...
+  createSession,
+  joinSession,
+  // ...
+}), [
+  session, connectionStatus, participants, annotations,
+  presenterId, recording, recordedEvents, error,
+]);
+```
+
+### Fix 4: Narrow Effect Dependencies in DryRunClient
+Destructure individual values instead of reading through the `collaboration` object:
+
+```javascript
+const { session, presenterId, clientId } = collaboration;
+
+useEffect(() => {
+  sendStateRef.current?.({ ... });
+}, [source, language, step, playing, speed, session, presenterId, clientId]);
+```
+
+### Fix 5: Add Proper Cleanup in `leaveSession`
+Reset `seenSequencesRef.current = new Map()` when leaving a session.
+
+### Fix 6: Error Handling for `attachSession`
+Don't resolve the promise successfully when the channel subscription fails. Return the error status.
+
+---
+
+## Complexity Estimate
+
+- **Files modified:** 3–4
+- **Lines changed:** 150–250
+- **Skills required:** React hooks (useRef, useCallback, useMemo, closures), real-time collaboration patterns, concurrency debugging
+- **Testing:** Requires testing with 2+ browser windows in a collaboration session to verify message dedup, recording output, and presenter handoff correctness
diff --git a/docs/superpowers/specs/2026-05-19-ci-test-script-design.md b/docs/superpowers/specs/2026-05-19-ci-test-script-design.md
new file mode 100644
index 000000000..29383bb3b
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-19-ci-test-script-design.md
@@ -0,0 +1,30 @@
+# Design: CI test script (2026-05-19)
+
+## Context
+- CI workflow runs `npm run test`.
+- `package.json` has no `test` script, causing CI failure.
+
+## Goals
+- Unblock PR by defining a `test` script.
+- Keep CI workflow unchanged.
+
+## Non-goals
+- Add a test framework (Jest/Vitest).
+- Add new test cases.
+
+## Proposed change
+- Add `"test": "npm run lint"` to `package.json` scripts.
+
+## Rationale
+- Linting is already configured; running it in CI provides a minimal quality gate.
+
+## Risks
+- CI validates lint only, not runtime tests.
+- Test coverage remains missing.
+
+## Verification
+- Run `npm run test` locally.
+- CI passes on the PR.
+
+## Rollback
+- Revert the `test` script addition if needed.
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 348c45a2f..938281592 100755
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,6 +1,7 @@
 import { dirname } from "path";
 import { fileURLToPath } from "url";
 import { FlatCompat } from "@eslint/eslintrc";
+import noUnsanitized from "eslint-plugin-no-unsanitized";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -9,6 +10,20 @@ const compat = new FlatCompat({
   baseDirectory: __dirname,
 });
 
-const eslintConfig = [...compat.extends("next/core-web-vitals")];
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals"),
+  {
+    files: ["app/visualizer/**/*.{js,jsx,ts,tsx}"],
+    plugins: {
+      "no-unsanitized": noUnsanitized,
+    },
+    rules: {
+      // Prevent DOM XSS regressions: avoid HTML parsing sinks in visualizers.
+      // Covers `innerHTML`, `outerHTML`, `insertAdjacentHTML`, etc.
+      "no-unsanitized/property": "error",
+      "no-unsanitized/method": "error",
+    },
+  },
+];
 
 export default eslintConfig;
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 000000000..2ed35fa3e
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,20 @@
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+});
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testEnvironment: 'jest-environment-jsdom',
+  testMatch: ['<rootDir>/__tests__/**/*.test.[jt]s?(x)'],
+  testPathIgnorePatterns: ['<rootDir>/__tests__/rateLimit.test.js'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);
diff --git a/jest.setup.js b/jest.setup.js
new file mode 100644
index 000000000..c0412e06a
--- /dev/null
+++ b/jest.setup.js
@@ -0,0 +1,5 @@
+import '@testing-library/jest-dom';
+import { TextEncoder, TextDecoder } from 'util';
+
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;
diff --git a/jsconfig.json b/jsconfig.json
index 2a2e4b3bf..b8d6842d7 100755
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./src/*"]
     }
   }
 }
diff --git a/lib/activity.js b/lib/activity.js
deleted file mode 100755
index 879442f40..000000000
--- a/lib/activity.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { supabase } from "@/lib/supabase";
-
-const trackActivity = async (userId, type = "site_visit") => {
-  const today = new Date().toISOString().split("T")[0];
-
-  const { data, error } = await supabase
-    .from("user_activity")
-    .select("id")
-    .eq("user_id", userId)
-    .eq("activity_date", today);
-
-  if (!error && data.length === 0) {
-    await supabase.from("user_activity").insert([
-      { user_id: userId, activity_date: today, type }
-    ]);
-  }
-};
-
-export { trackActivity };
\ No newline at end of file
diff --git a/lib/gtag.js b/lib/gtag.js
deleted file mode 100755
index adeb84348..000000000
--- a/lib/gtag.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export const GA_MEASUREMENT_ID = 'G-N8XGEXJXEM'
-
-export const pageview = (url) => {
-  window.gtag('config', GA_MEASUREMENT_ID, {
-    page_path: url,
-  });
-}
-
-export const event = ({ action, category, label, value }) => {
-  window.gtag('event', action, {
-    event_category: category,
-    event_label: label,
-    value: value,
-  });
-};
\ No newline at end of file
diff --git a/lib/modulesMap.js b/lib/modulesMap.js
deleted file mode 100755
index 2a1ebad66..000000000
--- a/lib/modulesMap.js
+++ /dev/null
@@ -1,27 +0,0 @@
-export const MODULE_MAPS = {
-    linearSearch : "378adcd8-7356-4d10-84cf-1dad1cbd496a",
-    binarySearch : "e527f92a-7962-4b0b-a46a-52ecf08a73ef",
-    bubbleSort : "b1387e6d-ebf8-4b52-9c5d-ab8c94f8eda4",
-    insertionSort : "f8ae92e2-1371-4852-a615-0354011f8f48",
-    selectionSort : "7dffce41-ff4c-4700-8cfe-04b8793cc25c",
-    mergeSort : "d6704302-d35c-4c32-a259-9518dec15920",
-    quickSort : "19ad8f43-b858-4e80-998c-49c5e0f69f8c",
-    pushPop : "48138388-914b-4f84-8468-683175ce1a1e",
-    peek : "fd95f8af-fb22-413f-9080-ebb558b53e70",
-    isEmpty : "05ecbddd-e3d4-4fa1-aa45-71accac97d79",
-    isFull : "54301ec9-0586-48f0-a6db-18a41adeb856",
-    postfix : "ca3daf8d-23f8-4ade-adfd-4bd0a88d3da2",
-    prefix : "a2971df4-5e48-4320-bc91-3de3242cac48",
-    stackArray : "4e0dd1e0-a8c7-4066-845c-b5917383d5c2",
-    stackLinkedList : "69ecfabf-97d3-433e-972e-54ea4c91374f",
-    enqueueDequeue : "0f8a94c9-c8e1-4407-bc03-11fac79e1331",
-    peekFront : "77ebf769-59c5-43e6-8b2a-fb8aef51a9ab",
-    queueIsEmpty : "ed561422-f566-43e8-b4fd-d73d53d9ab9a",
-    queueIsFull : "381cd781-881e-4060-a6a3-c5d58e36dffa",
-    singleEnded : "e8a2585d-5fb0-4004-bcf6-fd6ee6c4f7f2",
-    doubleEnded : "17db0a89-97ad-470e-809f-f461af6a838d",
-    circularQueue : "2cd12990-6c50-4842-b36e-f42e8b516386",
-    priorityQueue : "d4764df9-355c-4a5c-b9ff-e6f71a667396",
-    queueArray : "06ec481b-d6a7-46e9-8a74-16031d298734",
-    queueLinkedList : "b217f8ad-38e3-4f55-b066-2f5f67d7ea36",
-}
\ No newline at end of file
diff --git a/lib/supabase.js b/lib/supabase.js
deleted file mode 100755
index 528f1bb3b..000000000
--- a/lib/supabase.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { createClient } from "@supabase/supabase-js";
-
-export const supabase = createClient(
-  process.env.NEXT_PUBLIC_SUPABASE_URL || "https://placeholder.supabase.co",
-  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || "placeholder-key",
-);
diff --git a/next-sitemap.config.js b/next-sitemap.config.js
index add312475..567fd59b6 100755
--- a/next-sitemap.config.js
+++ b/next-sitemap.config.js
@@ -1,33 +1,3 @@
-const fs = require("fs");
-const path = require("path");
-
-// Scan app/ folder recursively, include only folders with page.jsx
-function getAllPages(dir = "app", prefix = "") {
-  const routes = [];
-  const items = fs.readdirSync(dir);
-
-  for (const item of items) {
-    const fullPath = path.join(dir, item);
-    const stat = fs.statSync(fullPath);
-
-    if (stat.isDirectory()) {
-      if (item === "api" || item.startsWith("_")) continue; // skip API and special folders
-
-      const pageFile = fs
-        .readdirSync(fullPath)
-        .find((f) => f === "page.jsx" || f === "page.tsx");
-      if (pageFile) {
-        routes.push(`${prefix}/${item}`);
-      }
-
-      // Recurse into subfolders
-      routes.push(...getAllPages(fullPath, `${prefix}/${item}`));
-    }
-  }
-
-  return routes;
-}
-
 /** @type {import('next-sitemap').IConfig} */
 const config = {
   siteUrl: process.env.SITE_URL || "https://algobuddy.vercel.app",
@@ -37,13 +7,6 @@ const config = {
     loc: path,
     lastmod: new Date().toISOString(),
   }),
-  additionalPaths: async (config) => {
-    const allRoutes = getAllPages(); // recursively get all module pages
-    return allRoutes.map((route) => ({
-      loc: route,
-      lastmod: new Date().toISOString(),
-    }));
-  },
 };
 
 module.exports = config;
diff --git a/next.config.mjs b/next.config.mjs
index 4678774e6..86f10711d 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,134 @@
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+
+const securityHeaders = [
+  // Prevent browsers from rendering the page inside a frame or iframe — closes
+  // clickjacking attack surface on the login and dashboard pages.
+  { key: "X-Frame-Options", value: "DENY" },
+
+  // Stop browsers from MIME-sniffing responses away from the declared
+  // Content-Type, blocking content-injection via mistyped uploads.
+  { key: "X-Content-Type-Options", value: "nosniff" },
+
+  // Only send the origin (no path/query) as the Referer on cross-origin
+  // requests; send the full URL within the same origin.
+  { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
+
+  // Enforce HTTPS for two years, covering all sub-domains, and opt in to
+  // browser preload lists so the policy takes effect before the first request.
+  {
+    key: "Strict-Transport-Security",
+    value: "max-age=63072000; includeSubDomains; preload",
+  },
+
+  // Disable access to hardware APIs that this app never needs.
+  {
+    key: "Permissions-Policy",
+    value: "camera=(), microphone=(), geolocation=()",
+  },
+
+  // Content Security Policy — allows exactly the origins this app loads:
+  //   scripts : GA tag manager, Cloudflare Turnstile widget, Vercel Speed Insights
+  //   styles  : Google Fonts CSS (+ inline Tailwind)
+  //   fonts   : Google Fonts static files
+  //   connect : Supabase (auth + DB), Google Analytics, Cloudflare Turnstile verify,
+  //             Vercel Speed Insights reporting
+  //   frames  : Cloudflare Turnstile renders inside an iframe
+  //   frame-ancestors 'none' mirrors X-Frame-Options for CSP-aware browsers
+  {
+    key: "Content-Security-Policy",
+    value: [
+      "default-src 'self'",
+      "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com https://*.googlesyndication.com https://*.google.com https://challenges.cloudflare.com https://va.vercel-scripts.com https://cdn.jsdelivr.net",
+      "worker-src 'self' blob:",
+      "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.jsdelivr.net",
+      "font-src 'self' https://fonts.gstatic.com",
+      "img-src 'self' data: https: https://*.googlesyndication.com",
+      "connect-src 'self' http://localhost:8080 ws://localhost:4000 http://localhost:4000 ws://127.0.0.1:4000 http://127.0.0.1:4000 https://algobuddy-backend-7iwv.onrender.com https://algobuddy-backend.onrender.com https://algobuddy-socket-server.onrender.com wss://algobuddy-socket-server.onrender.com https://*.supabase.co https://*.googlesyndication.com https://*.google.com https://*.google-analytics.com https://*.googletagmanager.com https://*.google.com https://*.tagassistant.google.com https://*.cloudflare.com",
+      "frame-src https://challenges.cloudflare.com https://*.googleads.g.doubleclick.net https://*.google.com",
+      "frame-ancestors 'none'",
+    ].join("; "),
+  },
+];
+
+const nextConfig = {
+  serverExternalPackages: ["isolated-vm"],
+  compiler: {
+    removeConsole: process.env.NODE_ENV === "production" ? { exclude: ["error", "warn"] } : false,
+  },
+  devIndicators: false,
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "api.dicebear.com",
+        pathname: "/**",
+      },
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+        pathname: "/**",
+      },
+      {
+        protocol: "https",
+        hostname: "api.producthunt.com",
+        pathname: "/**",
+      },
+    ],
+  },
+	async redirects() {
+		return [
+			{
+				source: '/visualizer/graph/traversal/bfs',
+				destination: '/visualizer/graph/bfs',
+				permanent: true,
+			},
+			{
+				source: '/visualizer/graph/traversal/dfs',
+				destination: '/visualizer/graph/dfs',
+				permanent: true,
+			},
+			{
+				source: '/visualizer/graph/algorithms/dijkstra',
+				destination: '/visualizer/graph/dijkstra',
+				permanent: true,
+			},
+			{
+				source: '/visualizer/graph/algorithms/prim',
+				destination: '/visualizer/graph/prim',
+				permanent: true,
+			},
+			{
+				source: '/visualizer/graph/algorithms/kruskal',
+				destination: '/visualizer/graph/kruskal',
+				permanent: true,
+			},
+			{
+				source: '/visualizer/graph/algorithms/topological-sort',
+				destination: '/visualizer/graph/topological-sort',
+				permanent: true,
+			},
+			{
+				source: '/visualizer/graph/representation/adjacency-list',
+				destination: '/visualizer/graph/adjacency-list',
+				permanent: true,
+			},
+			{
+				source: '/visualizer/graph/representation/adjacency-matrix',
+				destination: '/visualizer/graph/adjacency-matrix',
+				permanent: true,
+			},
+		];
+	},
+
+  async headers() {
+    return [
+      {
+        source: "/(.*)",
+        headers: securityHeaders,
+      },
+    ];
+  },
+};
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index 390f7863e..6526907c7 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,52 +8,83 @@
       "name": "client",
       "version": "0.1.0",
       "dependencies": {
+        "@anthropic-ai/sdk": "^0.100.1",
+        "@google/generative-ai": "^0.24.1",
         "@gsap/react": "^2.1.2",
         "@marsidev/react-turnstile": "^1.3.0",
         "@monaco-editor/react": "^4.7.0",
         "@supabase/ssr": "^0.6.1",
-        "@supabase/supabase-js": "^2.98.0",
+        "@supabase/supabase-js": "^2.49.4",
         "@tailwindcss/typography": "^0.5.16",
         "@tsparticles/engine": "^3.8.1",
         "@tsparticles/react": "^3.0.0",
         "@tsparticles/slim": "^3.8.1",
+        "@upstash/ratelimit": "^2.0.8",
+        "@upstash/redis": "^1.38.0",
         "@vercel/speed-insights": "^1.2.0",
         "axios": "^1.9.0",
-        "dotenv": "^16.5.0",
-        "framer-motion": "^12.9.4",
+        "bcryptjs": "^3.0.3",
+        "canvas-confetti": "^1.9.3",
+        "dotenv": "^16.6.1",
+        "framer-motion": "12.40.0",
         "gsap": "^3.13.0",
         "highlight.js": "^11.11.1",
+        "html2canvas": "^1.4.1",
+        "isolated-vm": "^6.1.2",
+        "jose": "^6.2.3",
+        "jspdf": "^4.2.1",
         "lucide-react": "^0.511.0",
         "monaco-themes": "^0.4.5",
-        "next": "16.1.6",
+        "next": "^16.2.6",
         "next-sitemap": "^4.2.3",
         "next-themes": "^0.4.6",
-        "nodemailer": "^6.10.0",
+        "nodemailer": "^8.0.7",
         "openai": "^4.103.0",
+        "pino": "^10.3.1",
         "prism-react-renderer": "^2.4.1",
         "react": "^19.2.4",
         "react-calendar": "^6.0.0",
         "react-dom": "^19.2.4",
         "react-hot-toast": "^2.5.2",
         "react-icons": "^5.5.0",
+        "react-is": "^19.2.7",
         "react-markdown": "^10.1.0",
         "react-responsive-carousel": "^3.2.23",
-        "react-router-dom": "^7.5.3",
-        "react-syntax-highlighter": "^5.8.0",
-        "recharts": "^3.1.0",
+        "react-zoom-pan-pinch": "^4.0.3",
+        "recharts": "^3.9.0",
         "remark-gfm": "^4.0.1",
-        "sanitize-html": "^2.17.0"
+        "sanitize-html": "^2.17.0",
+        "socket.io-client": "^4.8.3"
       },
       "devDependencies": {
+        "@axe-core/playwright": "^4.11.3",
+        "@emnapi/core": "^1.10.0",
+        "@emnapi/runtime": "^1.10.0",
         "@eslint/eslintrc": "^3",
         "@tailwindcss/postcss": "^4",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.1",
         "autoprefixer": "^10.4.21",
-        "eslint": "^9",
+        "eslint": "^9.39.4",
         "eslint-config-next": "15.2.4",
+        "eslint-plugin-no-unsanitized": "^4.1.5",
+        "jest": "^30.4.2",
+        "jest-environment-jsdom": "^30.4.1",
+        "jsdom": "^26.1.0",
+        "pino-pretty": "^13.1.3",
+        "playwright": "^1.60.0",
         "postcss": "^8.5.3",
         "tailwindcss": "3.4"
       }
     },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.5.0.tgz",
+      "integrity": "sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -66,1237 +97,4037 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@corex/deepmerge": {
-      "version": "4.0.43",
-      "resolved": "https://registry.npmjs.org/@corex/deepmerge/-/deepmerge-4.0.43.tgz",
-      "integrity": "sha512-N8uEMrMPL0cu/bdboEWpQYb/0i2K5Qn8eCsxzOmxSggJbbQte7ljMRoXm917AbntqTGOzdTu+vP3KOOzoC70HQ==",
-      "license": "MIT"
+    "node_modules/@anthropic-ai/sdk": {
+      "version": "0.100.1",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.100.1.tgz",
+      "integrity": "sha512-RANcEe7LpiLczkKGOwoXOTuFdPhuubS0i4xaAKOMpcqc55YO0mukgxppV7eygx3DXNjxWT6RYOLPyOy0aIAmwg==",
+      "license": "MIT",
+      "dependencies": {
+        "json-schema-to-ts": "^3.1.1",
+        "standardwebhooks": "^1.0.0"
+      },
+      "bin": {
+        "anthropic-ai-sdk": "bin/cli"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
     },
-    "node_modules/@emnapi/core": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.3.1.tgz",
-      "integrity": "sha512-pVGjBIt1Y6gg3EJN8jTcfpP/+uuRksIo055oE/OBkDNcjZqVbfkWCksG1Jp4yZnj3iKWyWX8fdG/j6UDYPbFog==",
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.2.0.tgz",
+      "integrity": "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
-        "@emnapi/wasi-threads": "1.0.1",
-        "tslib": "^2.4.0"
+        "@csstools/css-calc": "^2.1.3",
+        "@csstools/css-color-parser": "^3.0.9",
+        "@csstools/css-parser-algorithms": "^3.0.4",
+        "@csstools/css-tokenizer": "^3.0.3",
+        "lru-cache": "^10.4.3"
       }
     },
-    "node_modules/@emnapi/runtime": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz",
-      "integrity": "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==",
-      "license": "MIT",
-      "optional": true,
+    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@axe-core/playwright": {
+      "version": "4.11.3",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.11.3.tgz",
+      "integrity": "sha512-h/kfksv4F0cVIDlKpT4700OehdRgpvuVskuQ2nb7/JmtWUXpe9ftHAPtwyXGvVSsa6SJ64A9ER7Zrzc/sIvC4w==",
+      "dev": true,
+      "license": "MPL-2.0",
       "dependencies": {
-        "tslib": "^2.4.0"
+        "axe-core": "~4.11.4"
+      },
+      "peerDependencies": {
+        "playwright-core": ">= 1.0.0"
       }
     },
-    "node_modules/@emnapi/wasi-threads": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.0.1.tgz",
-      "integrity": "sha512-iIBu7mwkq4UQGeMEM8bLwNK962nXdhodeScX4slfQnRhEMMzvYivHhutCIk8uojvmASXXPC2WNEjwxFWk72Oqw==",
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
-        "tslib": "^2.4.0"
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.5.1.tgz",
-      "integrity": "sha512-soEIOALTfTK6EjmKMMoLugwaP0rzkad90iIWd1hMO9ARkSAyjfMfkRRhLvD5qH7vvM0Cg72pieUfR6yh6XxC4w==",
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "eslint-visitor-keys": "^3.4.3"
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": ">=6.9.0"
       },
       "funding": {
-        "url": "https://opencollective.com/eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
       }
     },
-    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
       }
     },
-    "node_modules/@eslint-community/regexpp": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
-      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+    "node_modules/@babel/generator": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz",
+      "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
       "engines": {
-        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@eslint/config-array": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz",
-      "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==",
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "dependencies": {
-        "@eslint/object-schema": "^2.1.6",
-        "debug": "^4.3.1",
-        "minimatch": "^3.1.2"
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
       },
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@eslint/config-helpers": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.0.tgz",
-      "integrity": "sha512-ViuymvFmcJi04qdZeDc2whTHryouGcDlaxPqarTD0ZE10ISpxGUVZGZDx4w01upyIynL3iu6IXH2bS1NhclQMw==",
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@eslint/core": {
-      "version": "0.15.1",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.1.tgz",
-      "integrity": "sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==",
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "dependencies": {
-        "@types/json-schema": "^7.0.15"
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@eslint/eslintrc": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
-      "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ajv": "^6.12.4",
-        "debug": "^4.3.2",
-        "espree": "^10.0.1",
-        "globals": "^14.0.0",
-        "ignore": "^5.2.0",
-        "import-fresh": "^3.2.1",
-        "js-yaml": "^4.1.0",
-        "minimatch": "^3.1.2",
-        "strip-json-comments": "^3.1.1"
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
       },
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": ">=6.9.0"
       },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@eslint/js": {
-      "version": "9.31.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.31.0.tgz",
-      "integrity": "sha512-LOm5OVt7D4qiKCqoiPbA7LWmI+tbw1VbTUowBcUMgQSuM6poJufkFkYDcQpo5KfgD39TnNySV26QjOh7VFpSyw==",
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz",
+      "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://eslint.org/donate"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@eslint/object-schema": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
-      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@eslint/plugin-kit": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.4.tgz",
-      "integrity": "sha512-Ul5l+lHEcw3L5+k8POx6r74mxEYKG5kOb6Xpy2gCRW6zweT6TEhAf8vhxGgjhqrd/VO/Dirhsb+1hNpD1ue9hw==",
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@eslint/core": "^0.15.1",
-        "levn": "^0.4.1"
-      },
+      "license": "MIT",
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@gsap/react": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@gsap/react/-/react-2.1.2.tgz",
-      "integrity": "sha512-JqliybO1837UcgH2hVOM4VO+38APk3ECNrsuSM4MuXp+rbf+/2IG2K1YJiqfTcXQHH7XlA0m3ykniFYstfq0Iw==",
-      "license": "SEE LICENSE AT https://gsap.com/standard-license",
-      "peerDependencies": {
-        "gsap": "^3.12.5",
-        "react": ">=17"
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@humanfs/core": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
-      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+    "node_modules/@babel/helpers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
       "engines": {
-        "node": ">=18.18.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@humanfs/node": {
-      "version": "0.16.6",
-      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
-      "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
+    "node_modules/@babel/parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
+      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "dependencies": {
-        "@humanfs/core": "^0.19.1",
-        "@humanwhocodes/retry": "^0.3.0"
+        "@babel/types": "^7.29.7"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
       },
       "engines": {
-        "node": ">=18.18.0"
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
-      "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
+    "node_modules/@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
       "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=18.18"
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
       },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/nzakas"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@humanwhocodes/module-importer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
-      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+    "node_modules/@babel/plugin-syntax-bigint": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
+      "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
       "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=12.22"
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
       },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/nzakas"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@humanwhocodes/retry": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.2.tgz",
-      "integrity": "sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==",
+    "node_modules/@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
       "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=18.18"
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.12.13"
       },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/nzakas"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@img/colour": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
-      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
+    "node_modules/@babel/plugin-syntax-class-static-block": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+      "dev": true,
       "license": "MIT",
-      "optional": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
-      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+    "node_modules/@babel/plugin-syntax-import-attributes": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.29.7.tgz",
+      "integrity": "sha512-zGYcYfq/WmZ4V+kBIXQon9dSSc8ircGZqw9ZaNhhGj9nZkeBu1jHLBDQqYYi5WA9uawvA2sIMbry2nCFhf5Djg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "engines": {
+        "node": ">=6.9.0"
       },
-      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
-      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+    "node_modules/@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
       },
-      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
-      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
-      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
-      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.29.7.tgz",
+      "integrity": "sha512-TSu8+mHCoEaaCDEZ0I3+6mvTBYR4PCxQwf2z9/r5Tbztv6NaLR3B9thGTTxX2WGuGHJqRiAbKPeGTJ5XWXVg6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
-      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@img/sharp-libvips-linux-ppc64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
-      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@img/sharp-libvips-linux-riscv64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
-      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
-      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
-      "cpu": [
-        "s390x"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
-      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
-      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
-      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@babel/plugin-syntax-private-property-in-object": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@img/sharp-linux-arm": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
-      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+    "node_modules/@babel/plugin-syntax-top-level-await": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
       },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "engines": {
+        "node": ">=6.9.0"
       },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.2.4"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
-      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.29.7.tgz",
+      "integrity": "sha512-ngr+82Sh0xMz25TPCZi+nC2iTzjfCdWS2ONXTp/PtSCHCgaCNBpdMqgvJ2ccdLlClVZ7sisIgB914j/JFe+RZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "engines": {
+        "node": ">=6.9.0"
       },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@img/sharp-linux-ppc64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
-      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+    "node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "license": "MIT",
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@img/sharp-linux-riscv64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
-      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
-      "cpu": [
-        "riscv64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+    "node_modules/@babel/traverse": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz",
+      "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "debug": "^4.3.1"
       },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
+      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
       },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
-      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
-      "cpu": [
-        "s390x"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
+    "node_modules/@bcoe/v8-coverage": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
+      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@corex/deepmerge": {
+      "version": "4.0.43",
+      "resolved": "https://registry.npmjs.org/@corex/deepmerge/-/deepmerge-4.0.43.tgz",
+      "integrity": "sha512-N8uEMrMPL0cu/bdboEWpQYb/0i2K5Qn8eCsxzOmxSggJbbQte7ljMRoXm917AbntqTGOzdTu+vP3KOOzoC70HQ==",
+      "license": "MIT"
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
+      "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
       ],
+      "license": "MIT-0",
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.2.4"
+        "node": ">=18"
       }
     },
-    "node_modules/@img/sharp-linux-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
-      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
+    "node_modules/@csstools/css-calc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.4.tgz",
+      "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
       ],
+      "license": "MIT",
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+        "node": ">=18"
       },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.2.4"
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
       }
     },
-    "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
-      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
+    "node_modules/@csstools/css-color-parser": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz",
+      "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
       ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^5.1.0",
+        "@csstools/css-calc": "^2.1.4"
       },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "engines": {
+        "node": ">=18"
       },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
       }
     },
-    "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
-      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
+      "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
       ],
+      "license": "MIT",
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+        "node": ">=18"
       },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^3.0.4"
       }
     },
-    "node_modules/@img/sharp-wasm32": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
-      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
-      "cpu": [
-        "wasm32"
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
+      "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
       ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
-      "optional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.0.tgz",
+      "integrity": "sha512-l9Oo58x0HOP5znGzVhYW9U3e5wVuA4LAZU2AGezTmkhO1CgQRFDhDg4nneHsu/t3WniXg9QrG2nIXL/ZS8ln8Q==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@emnapi/runtime": "^1.7.0"
+        "@emnapi/wasi-threads": "1.2.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.0.tgz",
+      "integrity": "sha512-55coeOFKHv1ywEcUXJtWU5f+Jr/W5tZDvZig8DLKSwUN1JpROQ4rk/SNOQiFWmaR/VKF4zuFyW1B8JduOSv6Pg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
+      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/libvips"
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
       }
     },
-    "node_modules/@img/sharp-win32-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
-      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/libvips"
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
-      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
-      "cpu": [
-        "ia32"
-      ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
-    "node_modules/@img/sharp-win32-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
-      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.2.tgz",
+      "integrity": "sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.7",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.5"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.5.tgz",
+      "integrity": "sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.14.0",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.1",
+        "minimatch": "^3.1.5",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.4.tgz",
+      "integrity": "sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@google/generative-ai": {
+      "version": "0.24.1",
+      "resolved": "https://registry.npmjs.org/@google/generative-ai/-/generative-ai-0.24.1.tgz",
+      "integrity": "sha512-MqO+MLfM6kjxcKoy0p1wRzG3b4ZZXtPI+z2IE26UogS2Cm/XHO+7gGRBh6gcJsOiIVoH93UwKvW4HdgiOZCy9Q==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@gsap/react": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@gsap/react/-/react-2.1.2.tgz",
+      "integrity": "sha512-JqliybO1837UcgH2hVOM4VO+38APk3ECNrsuSM4MuXp+rbf+/2IG2K1YJiqfTcXQHH7XlA0m3ykniFYstfq0Iw==",
+      "license": "SEE LICENSE AT https://gsap.com/standard-license",
+      "peerDependencies": {
+        "gsap": "^3.12.5",
+        "react": ">=17"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
+      "integrity": "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/types": "^0.15.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.8.tgz",
+      "integrity": "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.2",
+        "@humanfs/types": "^0.15.0",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/types": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@humanfs/types/-/types-0.15.0.tgz",
+      "integrity": "sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@img/colour": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
+      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
       "cpu": [
         "x64"
       ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "license": "Apache-2.0",
       "optional": true,
       "os": [
-        "win32"
+        "darwin"
       ],
       "engines": {
         "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
+      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.3.1",
+        "find-up": "^4.1.0",
+        "get-package-type": "^0.1.0",
+        "js-yaml": "^3.13.1",
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/js-yaml": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz",
+      "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/schema": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.6.tgz",
+      "integrity": "sha512-+Sg6GCR/wy1oSmQDFq4LQDAhm3ETKnorxN+y5nbLULOR3P0c14f2Wurzj3/xqPXtasLFfHd5iRFQ7AJt4KH2cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jest/console": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/@jest/console/-/console-30.4.1.tgz",
+      "integrity": "sha512-v3bhyxUh9Hgmo5p6hAOXe14/R3ZxZDOsvHleh4B07z3m/x4/ngPUXEm9XwK4sF4u+f+P2ORb0Ge+MgpaqRMVDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "30.4.1",
+        "@types/node": "*",
+        "chalk": "^4.1.2",
+        "jest-message-util": "30.4.1",
+        "jest-util": "30.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/core": {
+      "version": "30.4.2",
+      "resolved": "https://registry.npmjs.org/@jest/core/-/core-30.4.2.tgz",
+      "integrity": "sha512-TZJA6cPJUFxoWhxaLo8t0VX/MZX2wPWr0uIDvLSHIvN4gu9h02vSzqI2kBADG1ExqQlC+cY09xKMSreivvrChQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/console": "30.4.1",
+        "@jest/pattern": "30.4.0",
+        "@jest/reporters": "30.4.1",
+        "@jest/test-result": "30.4.1",
+        "@jest/transform": "30.4.1",
+        "@jest/types": "30.4.1",
+        "@types/node": "*",
+        "ansi-escapes": "^4.3.2",
+        "chalk": "^4.1.2",
+        "ci-info": "^4.2.0",
+        "exit-x": "^0.2.2",
+        "fast-json-stable-stringify": "^2.1.0",
+        "graceful-fs": "^4.2.11",
+        "jest-changed-files": "30.4.1",
+        "jest-config": "30.4.2",
+        "jest-haste-map": "30.4.1",
+        "jest-message-util": "30.4.1",
+        "jest-regex-util": "30.4.0",
+        "jest-resolve": "30.4.1",
+        "jest-resolve-dependencies": "30.4.2",
+        "jest-runner": "30.4.2",
+        "jest-runtime": "30.4.2",
+        "jest-snapshot": "30.4.1",
+        "jest-util": "30.4.1",
+        "jest-validate": "30.4.1",
+        "jest-watcher": "30.4.1",
+        "pretty-format": "30.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@jest/diff-sequences": {
+      "version": "30.4.0",
+      "resolved": "https://registry.npmjs.org/@jest/diff-sequences/-/diff-sequences-30.4.0.tgz",
+      "integrity": "sha512-zOpzlfUs45l6u7jm39qr87JCHUDsaeCtvL+kQe/Vn9jSnRB4/5IPXISm0h9I1vZW/o00Kn4UTJ2MOlhnUGwv3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/environment": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-30.4.1.tgz",
+      "integrity": "sha512-AK9yNRqgKxiabqMoe4oW+3/TSSeV8vkdC7BGaxZdU0AFXfOpofTLqdru2GXKZghP3sdgwE9XXpnVwfZ8JnFV4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/fake-timers": "30.4.1",
+        "@jest/types": "30.4.1",
+        "@types/node": "*",
+        "jest-mock": "30.4.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/environment-jsdom-abstract": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/@jest/environment-jsdom-abstract/-/environment-jsdom-abstract-30.4.1.tgz",
+      "integrity": "sha512-dSlKrqug3siYNHVnjwIldShY12wAH3spwRltO/+8VOjg0X+xEq7vOs3DbBs4LRKsu7OH+NUb9kuZUNBF9Ho3TA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/environment": "30.4.1",
+        "@jest/fake-timers": "30.4.1",
+        "@jest/types": "30.4.1",
+        "@types/jsdom": "^21.1.7",
+        "@types/node": "*",
+        "jest-mock": "30.4.1",
+        "jest-util": "30.4.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@jest/expect": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/@jest/expect/-/expect-30.4.1.tgz",
+      "integrity": "sha512-ginrj6TMgh2GshLUGCjO94Ptx9HhdZA/I6A9iUfyeLKFtdAjnKzHDgzgP9HYQgbxM1lbXScQ2eUBz2lGeVDPWA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "expect": "30.4.1",
+        "jest-snapshot": "30.4.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/expect-utils": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-30.4.1.tgz",
+      "integrity": "sha512-ZBn5CglH8fBsQsvs4VWNzD4aWfUYks+IdOOQU3MEK71ol/BcVm+P+rtb1KpiFBpSWSCE27uOahyyf1vfqOVbcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/get-type": "30.1.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/fake-timers": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-30.4.1.tgz",
+      "integrity": "sha512-iW5umdmfPeWzehrVhugFQZqCchSCud5S1l2YT0O9ZhjRR0ExclANDZkiSBwzqtnlOn0J1JXvO+HZ6rkuyOVOgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "30.4.1",
+        "@sinonjs/fake-timers": "^15.4.0",
+        "@types/node": "*",
+        "jest-message-util": "30.4.1",
+        "jest-mock": "30.4.1",
+        "jest-util": "30.4.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/get-type": {
+      "version": "30.1.0",
+      "resolved": "https://registry.npmjs.org/@jest/get-type/-/get-type-30.1.0.tgz",
+      "integrity": "sha512-eMbZE2hUnx1WV0pmURZY9XoXPkUYjpc55mb0CrhtdWLtzMQPFvu/rZkTLZFTsdaVQa+Tr4eWAteqcUzoawq/uA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/globals": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-30.4.1.tgz",
+      "integrity": "sha512-ZbuY4cmXC8DkxYjfvT2DbcHWL2T6vmsMhXCDcmTB2T0y0gaezBI77ufq5ZAIdcRkYZ7NEQEDg1xFeKbxUJ5v5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/environment": "30.4.1",
+        "@jest/expect": "30.4.1",
+        "@jest/types": "30.4.1",
+        "jest-mock": "30.4.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/pattern": {
+      "version": "30.4.0",
+      "resolved": "https://registry.npmjs.org/@jest/pattern/-/pattern-30.4.0.tgz",
+      "integrity": "sha512-RAWn3+f9u8BsHijKJ71uHcFp6vmyEt6VvoWXkl6hKF3qVIuWNmudVjg12DlBPGup/frIl5UcUlH5HfEuvHpEXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "jest-regex-util": "30.4.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/reporters": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-30.4.1.tgz",
+      "integrity": "sha512-/SnkPCzEQpUaBH81kjdEdDdo2WZl5hxw+BmLDGWjRkm8o7XlhjwsU36cqwe5PGBE5WYpBvDzRSdXx9rbGuJtNA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@bcoe/v8-coverage": "^0.2.3",
+        "@jest/console": "30.4.1",
+        "@jest/test-result": "30.4.1",
+        "@jest/transform": "30.4.1",
+        "@jest/types": "30.4.1",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "@types/node": "*",
+        "chalk": "^4.1.2",
+        "collect-v8-coverage": "^1.0.2",
+        "exit-x": "^0.2.2",
+        "glob": "^10.5.0",
+        "graceful-fs": "^4.2.11",
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-instrument": "^6.0.0",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-source-maps": "^5.0.0",
+        "istanbul-reports": "^3.1.3",
+        "jest-message-util": "30.4.1",
+        "jest-util": "30.4.1",
+        "jest-worker": "30.4.1",
+        "slash": "^3.0.0",
+        "string-length": "^4.0.2",
+        "v8-to-istanbul": "^9.0.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@jest/schemas": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-30.4.1.tgz",
+      "integrity": "sha512-i6b4qw5qnP8c5FEeBJg/uZQ4ddrkN6Ca8qISJh0pr7a5hfn3h3v5x60BEbOC7OYAGZNMs1LfFLwnW2CuK8F57Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@sinclair/typebox": "^0.34.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/snapshot-utils": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/@jest/snapshot-utils/-/snapshot-utils-30.4.1.tgz",
+      "integrity": "sha512-ObY4ljvQ95mt6iwKtVLetR/4yXiAgl3H4nJxhztr0MTjrN97TwDYrnCp/kF60Ec9HdhkWTHSu+Hg05aXfngpOA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "30.4.1",
+        "chalk": "^4.1.2",
+        "graceful-fs": "^4.2.11",
+        "natural-compare": "^1.4.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/source-map": {
+      "version": "30.0.1",
+      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-30.0.1.tgz",
+      "integrity": "sha512-MIRWMUUR3sdbP36oyNyhbThLHyJ2eEDClPCiHVbrYAe5g3CHRArIVpBw7cdSB5fr+ofSfIb2Tnsw8iEHL0PYQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "callsites": "^3.1.0",
+        "graceful-fs": "^4.2.11"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/test-result": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-30.4.1.tgz",
+      "integrity": "sha512-/ZG7pgEiOmmWkN9TplKbOu4id2N5lh7FHwRwlkgBVAzGdRH+OkkQ8wX/kIxg4zmd3ZQvAL1RwL2yWsvNYYECTw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/console": "30.4.1",
+        "@jest/types": "30.4.1",
+        "@types/istanbul-lib-coverage": "^2.0.6",
+        "collect-v8-coverage": "^1.0.2"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/test-sequencer": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-30.4.1.tgz",
+      "integrity": "sha512-PeYE+4td5rKjoRPxztObrXU+H8hsjZfxKMXOcmrr34JerSyB/ROOxbbicz8B7A5j9R9VayDnVPvBmedqCsFCdw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/test-result": "30.4.1",
+        "graceful-fs": "^4.2.11",
+        "jest-haste-map": "30.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/transform": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-30.4.1.tgz",
+      "integrity": "sha512-Wz0LyktlTvRefoymh+n64hQ84KNXsRGcwdoZ8CSa0Ea+fgYcHZlnk+hDP7v2MS7il2bQ5uTEIxf4/NNfhMN4KQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.27.4",
+        "@jest/types": "30.4.1",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "babel-plugin-istanbul": "^7.0.1",
+        "chalk": "^4.1.2",
+        "convert-source-map": "^2.0.0",
+        "fast-json-stable-stringify": "^2.1.0",
+        "graceful-fs": "^4.2.11",
+        "jest-haste-map": "30.4.1",
+        "jest-regex-util": "30.4.0",
+        "jest-util": "30.4.1",
+        "pirates": "^4.0.7",
+        "slash": "^3.0.0",
+        "write-file-atomic": "^5.0.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/types": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-30.4.1.tgz",
+      "integrity": "sha512-f1x/vJXIfjOlEmejYpbkbgw1gOqpPECwMvMEtBqe47j7H2Hg8h8w3o3ikhSXq3MI15kg+oQ0exWO0uCtTNJLoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/pattern": "30.4.0",
+        "@jest/schemas": "30.4.1",
+        "@types/istanbul-lib-coverage": "^2.0.6",
+        "@types/istanbul-reports": "^3.0.4",
+        "@types/node": "*",
+        "@types/yargs": "^17.0.33",
+        "chalk": "^4.1.2"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@marsidev/react-turnstile": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@marsidev/react-turnstile/-/react-turnstile-1.5.3.tgz",
+      "integrity": "sha512-8Dij2jiNGNczq1U4EKpO4do2XepcTPxSMc2ZzvHndO+gcp68tvMULm27z2P99rGkdB89hc3452NZeu2Rti4g6A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^17.0.2 || ^18.0.0 || ^19.0",
+        "react-dom": "^17.0.2 || ^18.0.0 || ^19.0"
+      }
+    },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.7.0.tgz",
+      "integrity": "sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==",
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
+      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.5.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.5.tgz",
+      "integrity": "sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "16.2.6",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.2.6.tgz",
+      "integrity": "sha512-gd8HoHN4ufj73WmR3JmVolrpJR47ILK6LouP5xElPglaVxir6e1a7VzvTvDWkOoPXT9rkkTzyCxBu4yeZfZwcw==",
+      "license": "MIT"
+    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "15.2.4",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-15.2.4.tgz",
+      "integrity": "sha512-O8ScvKtnxkp8kL9TpJTTKnMqlkZnS+QxwoQnJwPGBxjBbzd6OVVPEJ5/pMNrktSyXQD/chEfzfFzYLM6JANOOQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "3.3.1"
+      }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "16.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.2.6.tgz",
+      "integrity": "sha512-ZJGkkcNfYgrrMkqOdZ7zoLa1TOy0qpcMfk/z4Mh/FKUz40gVO+HNQWqmLxf67Z5WB64DRp0dhEbyHfel+6sJUg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "16.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.2.6.tgz",
+      "integrity": "sha512-v/YLBHIY132Ced3puBJ7YJKw1lqsCrgcNo2aRJlCEyQrrCeRJlvGlnmxhPxNQI3KE3N1DN5r9TPNPvka3nq5RQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "16.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.2.6.tgz",
+      "integrity": "sha512-RPOvqlYBbcQjkz9VQQDZ2T2bARIjXZV1KFlt+V2Mr6SW/e4I9fcKsaA0hdyf2FHoTlsV2xnBd5Y912rP/1Ce6w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "16.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.2.6.tgz",
+      "integrity": "sha512-URUTu1+dMkxJsPFgm+OeEvq9wf5sujw0EvgYy80TDGHTSLTnIHeqb0Eu8A3sC95IRgjejQL+kC4mw+4yPxiAXA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "16.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.2.6.tgz",
+      "integrity": "sha512-DOj182mPV8G3UkrayLoREM5YEYI+Dk5wv7Ox9xl1fFibAELEsFD0lDPfHIeILlutMMfdyhlzYPELG3peuKaurw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "16.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.2.6.tgz",
+      "integrity": "sha512-HKQ5SP/V/ub73UvF7n/zeJlxk2kLmtL7Wzrg4WfmkjmNos5onJ2tKu7yZOPdL18A6Svfn3max29ym+ry7NkK4g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "16.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.2.6.tgz",
+      "integrity": "sha512-LZXpTlPyS5v7HhSmnvsLGP3iIYgYOBnc8r8ArlT55sGHV89bR2HlDdBjWQ+PY6SJMmk8TuVGFuxalnP3k/0Dwg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "16.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.2.6.tgz",
+      "integrity": "sha512-F0+4i0h9J6C4eE3EAPWsoCk7UW/dbzOjyzxY0qnDUOYFu6FFmdZ6l97/XdV3/Nz3VYyO7UWjyEJUXkGqcoXfMA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nolyfill/is-core-module": {
+      "version": "1.0.39",
+      "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
+      "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.4.0"
+      }
+    },
+    "node_modules/@pinojs/redact": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@pinojs/redact/-/redact-0.4.0.tgz",
+      "integrity": "sha512-k2ENnmBugE/rzQfEcdWHcCY+/FM3VLzH9cYEsbdsoqrvzAKRhUZeRNhAZvB8OitQJ1TBed3yqWtdjzS6wJKBwg==",
+      "license": "MIT"
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@pkgr/core": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.3.6.tgz",
+      "integrity": "sha512-SEeaJLb3qBNF/OaXnaR1NmmBbFYk1zC0ZH/52fATcRPLFg/p791YrcyFFy44Bo9sLaGuSuLp5Q6axbb/O+v/RA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pkgr"
+      }
+    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.12.0.tgz",
+      "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "11.1.8",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.8.tgz",
+      "integrity": "sha512-/tbkHMW7y10Lx6i1crLjD4/OhNkRG+Fo7byZHtah0547nIeXYcpIXaUh0IAQY6gO5459qpGGYapcEOHtFXkIuA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rushstack/eslint-patch": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.16.1.tgz",
+      "integrity": "sha512-TvZbIpeKqGQQ7X0zSCvPH9riMSFQFSggnfBjFZ1mEoILW+UuXCKwOoPcgjMwiUtRqFZ8jWhPJc4um14vC6I4ag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@sinclair/typebox": {
+      "version": "0.34.49",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.49.tgz",
+      "integrity": "sha512-brySQQs7Jtn0joV8Xh9ZV/hZb9Ozb0pmazDIASBkYKCjXrXU3mpcFahmK/z4YDhGkQvP9mWJbVyahdtU5wQA+A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@sinonjs/commons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.1.tgz",
+      "integrity": "sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "node_modules/@sinonjs/fake-timers": {
+      "version": "15.4.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-15.4.0.tgz",
+      "integrity": "sha512-DsG+8/LscQIQg68J6Ef3dv10u6nVyetYn923s3/sus5eaGfTo1of5WMZSLf0UJc9KDuKPilPH0UDJCjvNbDNCA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@sinonjs/commons": "^3.0.1"
+      }
+    },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
+    },
+    "node_modules/@stablelib/base64": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@stablelib/base64/-/base64-1.0.1.tgz",
+      "integrity": "sha512-1bnPQqSxSuc3Ii6MhBysoWCg58j97aUjuCSZrGSmDxNqtytIi0k8utUenAwTZN4V5mXXYGsVUI9zeBqy+jBOSQ==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
+    "node_modules/@supabase/auth-js": {
+      "version": "2.108.1",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.108.1.tgz",
+      "integrity": "sha512-Lle5rKU8f9LF3K5dDd8Or8mkkG+ptzRZZWKPVMm9B9UuovH65Ss2+iFnQqRsCqaGouvJEcTWyl0cj2riNrrDLQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.108.1",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.108.1.tgz",
+      "integrity": "sha512-fxBRW/A4IG7ADQztVt0NaEy5ysiO1WJ2pbldsnBchrkHuyepX0Krek9qA9T4gUQBVVTCE9Ea4pdsM5hfn3nc4A==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/phoenix": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@supabase/phoenix/-/phoenix-0.4.2.tgz",
+      "integrity": "sha512-YSAGnmDAfuleFCVt3CeurQZAhxRfXWeZIIkwp7NhYzQ1UwW6ePSnzsFAiUm/mbCkfoCf70QQHKW/K6RKh52a4A==",
+      "license": "MIT"
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "2.108.1",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.108.1.tgz",
+      "integrity": "sha512-9lj2MCPPMgSTaJ5y+amnhb3TWPtMFVlbDn2hmX/VV91xQU4j0AauwfMaBErHBJ+zzsSwjc0jLU+zLIZFLQzfig==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.108.1",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.108.1.tgz",
+      "integrity": "sha512-mHGGqOjwd1XTydcoffUqEMsbFQHUi6A3uhQ0EXr3iqzpLqItxKA9nbN6gIQxrZ7JRRnuUe/iOFPUkYV9Tdc5lg==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/phoenix": "^0.4.2",
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/ssr": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@supabase/ssr/-/ssr-0.6.1.tgz",
+      "integrity": "sha512-QtQgEMvaDzr77Mk3vZ3jWg2/y+D8tExYF7vcJT+wQ8ysuvOeGGjYbZlvj5bHYsj/SpC0bihcisnwPrM4Gp5G4g==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1"
+      },
+      "peerDependencies": {
+        "@supabase/supabase-js": "^2.43.4"
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.108.1",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.108.1.tgz",
+      "integrity": "sha512-Er0SGGt85iT6ye+SSh98Az6L2CesoZJuyzEZYH2oBOAnIxa9Nn4CtwUC3veGxYggoT56X+3tVuuQeDBP8kR8sg==",
+      "license": "MIT",
+      "dependencies": {
+        "iceberg-js": "^0.8.1",
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.108.1",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.108.1.tgz",
+      "integrity": "sha512-V/1hRKLSCJ0zEL+9QFRBUtivvePfOsaAYQmC0HhFNSHC2F3xFs4jSF3YhkLmzex6E4V4FGvmBDOP72D/53NnZA==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/auth-js": "2.108.1",
+        "@supabase/functions-js": "2.108.1",
+        "@supabase/postgrest-js": "2.108.1",
+        "@supabase/realtime-js": "2.108.1",
+        "@supabase/storage-js": "2.108.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.0.tgz",
+      "integrity": "sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.21.0",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.3.0"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/tailwindcss": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz",
+      "integrity": "sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.0.tgz",
+      "integrity": "sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.3.0",
+        "@tailwindcss/oxide-darwin-arm64": "4.3.0",
+        "@tailwindcss/oxide-darwin-x64": "4.3.0",
+        "@tailwindcss/oxide-freebsd-x64": "4.3.0",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.0",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.0",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.3.0",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.3.0",
+        "@tailwindcss/oxide-linux-x64-musl": "4.3.0",
+        "@tailwindcss/oxide-wasm32-wasi": "4.3.0",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.0",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.3.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.0.tgz",
+      "integrity": "sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.0.tgz",
+      "integrity": "sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.0.tgz",
+      "integrity": "sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.0.tgz",
+      "integrity": "sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.0.tgz",
+      "integrity": "sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.0.tgz",
+      "integrity": "sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.0.tgz",
+      "integrity": "sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.0.tgz",
+      "integrity": "sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.0.tgz",
+      "integrity": "sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.0.tgz",
+      "integrity": "sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.10.0",
+        "@emnapi/runtime": "^1.10.0",
+        "@emnapi/wasi-threads": "^1.2.1",
+        "@napi-rs/wasm-runtime": "^1.1.4",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.0.tgz",
+      "integrity": "sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.0.tgz",
+      "integrity": "sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.3.0.tgz",
+      "integrity": "sha512-Jm05Tjx+9yCLGv5qw1c+84Psds8MnyrEQYCB+FFk2lgGiUjlRqdxke4mVTuYrj2xnVZqKim2Apr5ySuQRYAw/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.3.0",
+        "@tailwindcss/oxide": "4.3.0",
+        "postcss": "^8.5.10",
+        "tailwindcss": "4.3.0"
+      }
+    },
+    "node_modules/@tailwindcss/postcss/node_modules/tailwindcss": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz",
+      "integrity": "sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.20",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.20.tgz",
+      "integrity": "sha512-hwbzQuNUfcPvbegQFatVPl/MY/tcM9KLl963hQ5laJKPh81TEZ1+dNG9PirGvcaDBkp+BCshExAyKVPW91dozw==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >=4.0.0 || insiders"
+      }
+    },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "picocolors": "^1.1.1",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.3.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz",
+      "integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.6.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
+      "integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
+    "node_modules/@tsparticles/basic": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/basic/-/basic-3.9.1.tgz",
+      "integrity": "sha512-ijr2dHMx0IQHqhKW3qA8tfwrR2XYbbWYdaJMQuBo2CkwBVIhZ76U+H20Y492j/NXpd1FUnt2aC0l4CEVGVGdeQ==",
+      "deprecated": "Please update to version 4.1.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1",
+        "@tsparticles/move-base": "3.9.1",
+        "@tsparticles/plugin-hex-color": "3.9.1",
+        "@tsparticles/plugin-hsl-color": "3.9.1",
+        "@tsparticles/plugin-rgb-color": "3.9.1",
+        "@tsparticles/shape-circle": "3.9.1",
+        "@tsparticles/updater-color": "3.9.1",
+        "@tsparticles/updater-opacity": "3.9.1",
+        "@tsparticles/updater-out-modes": "3.9.1",
+        "@tsparticles/updater-size": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/engine": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/engine/-/engine-3.9.1.tgz",
+      "integrity": "sha512-DpdgAhWMZ3Eh2gyxik8FXS6BKZ8vyea+Eu5BC4epsahqTGY9V3JGGJcXC6lRJx6cPMAx1A0FaQAojPF3v6rkmQ==",
+      "deprecated": "Please update to version 4.1.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "hasInstallScript": true,
+      "license": "MIT"
+    },
+    "node_modules/@tsparticles/interaction-external-attract": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-attract/-/interaction-external-attract-3.9.1.tgz",
+      "integrity": "sha512-5AJGmhzM9o4AVFV24WH5vSqMBzOXEOzIdGLIr+QJf4fRh9ZK62snsusv/ozKgs2KteRYQx+L7c5V3TqcDy2upg==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-bounce": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bounce/-/interaction-external-bounce-3.9.1.tgz",
+      "integrity": "sha512-bv05+h70UIHOTWeTsTI1AeAmX6R3s8nnY74Ea6p6AbQjERzPYIa0XY19nq/hA7+Nrg+EissP5zgoYYeSphr85A==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-bubble": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bubble/-/interaction-external-bubble-3.9.1.tgz",
+      "integrity": "sha512-tbd8ox/1GPl+zr+KyHQVV1bW88GE7OM6i4zql801YIlCDrl9wgTDdDFGIy9X7/cwTvTrCePhrfvdkUamXIribQ==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-connect": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-connect/-/interaction-external-connect-3.9.1.tgz",
+      "integrity": "sha512-sq8YfUNsIORjXHzzW7/AJQtfi/qDqLnYG2qOSE1WOsog39MD30RzmiOloejOkfNeUdcGUcfsDgpUuL3UhzFUOA==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-grab": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-grab/-/interaction-external-grab-3.9.1.tgz",
+      "integrity": "sha512-QwXza+sMMWDaMiFxd8y2tJwUK6c+nNw554+/9+tEZeTTk2fCbB0IJ7p/TH6ZGWDL0vo2muK54Njv2fEey191ow==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-pause": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-pause/-/interaction-external-pause-3.9.1.tgz",
+      "integrity": "sha512-Gzv4/FeNir0U/tVM9zQCqV1k+IAgaFjDU3T30M1AeAsNGh/rCITV2wnT7TOGFkbcla27m4Yxa+Fuab8+8pzm+g==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-push": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-push/-/interaction-external-push-3.9.1.tgz",
+      "integrity": "sha512-GvnWF9Qy4YkZdx+WJL2iy9IcgLvzOIu3K7aLYJFsQPaxT8d9TF8WlpoMlWKnJID6H5q4JqQuMRKRyWH8aAKyQw==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-remove": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-remove/-/interaction-external-remove-3.9.1.tgz",
+      "integrity": "sha512-yPThm4UDWejDOWW5Qc8KnnS2EfSo5VFcJUQDWc1+Wcj17xe7vdSoiwwOORM0PmNBzdDpSKQrte/gUnoqaUMwOA==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-repulse": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-repulse/-/interaction-external-repulse-3.9.1.tgz",
+      "integrity": "sha512-/LBppXkrMdvLHlEKWC7IykFhzrz+9nebT2fwSSFXK4plEBxDlIwnkDxd3FbVOAbnBvx4+L8+fbrEx+RvC8diAw==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-slow": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-slow/-/interaction-external-slow-3.9.1.tgz",
+      "integrity": "sha512-1ZYIR/udBwA9MdSCfgADsbDXKSFS0FMWuPWz7bm79g3sUxcYkihn+/hDhc6GXvNNR46V1ocJjrj0u6pAynS1KQ==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-particles-attract": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-attract/-/interaction-particles-attract-3.9.1.tgz",
+      "integrity": "sha512-CYYYowJuGwRLUixQcSU/48PTKM8fCUYThe0hXwQ+yRMLAn053VHzL7NNZzKqEIeEyt5oJoy9KcvubjKWbzMBLQ==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-particles-collisions": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-collisions/-/interaction-particles-collisions-3.9.1.tgz",
+      "integrity": "sha512-ggGyjW/3v1yxvYW1IF1EMT15M6w31y5zfNNUPkqd/IXRNPYvm0Z0ayhp+FKmz70M5p0UxxPIQHTvAv9Jqnuj8w==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-particles-links": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-links/-/interaction-particles-links-3.9.1.tgz",
+      "integrity": "sha512-MsLbMjy1vY5M5/hu/oa5OSRZAUz49H3+9EBMTIOThiX+a+vpl3sxc9AqNd9gMsPbM4WJlub8T6VBZdyvzez1Vg==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/move-base": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/move-base/-/move-base-3.9.1.tgz",
+      "integrity": "sha512-X4huBS27d8srpxwOxliWPUt+NtCwY+8q/cx1DvQxyqmTA8VFCGpcHNwtqiN+9JicgzOvSuaORVqUgwlsc7h4pQ==",
+      "deprecated": "this package was deprecated in tsparticles v4, replaced by @tsparticles/plugin-move",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/move-parallax": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/move-parallax/-/move-parallax-3.9.1.tgz",
+      "integrity": "sha512-whlOR0bVeyh6J/hvxf/QM3DqvNnITMiAQ0kro6saqSDItAVqg4pYxBfEsSOKq7EhjxNvfhhqR+pFMhp06zoCVA==",
+      "deprecated": "this package was deprecated in tsparticles v4, replaced by @tsparticles/interaction-external-parallax",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/plugin-easing-quad": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-easing-quad/-/plugin-easing-quad-3.9.1.tgz",
+      "integrity": "sha512-C2UJOca5MTDXKUTBXj30Kiqr5UyID+xrY/LxicVWWZPczQW2bBxbIbfq9ULvzGDwBTxE2rdvIB8YFKmDYO45qw==",
+      "deprecated": "Please update to version 4.1.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/plugin-hex-color": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-hex-color/-/plugin-hex-color-3.9.1.tgz",
+      "integrity": "sha512-vZgZ12AjUicJvk7AX4K2eAmKEQX/D1VEjEPFhyjbgI7A65eX72M465vVKIgNA6QArLZ1DLs7Z787LOE6GOBWsg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/plugin-hsl-color": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-hsl-color/-/plugin-hsl-color-3.9.1.tgz",
+      "integrity": "sha512-jJd1iGgRwX6eeNjc1zUXiJivaqC5UE+SC2A3/NtHwwoQrkfxGWmRHOsVyLnOBRcCPgBp/FpdDe6DIDjCMO715w==",
+      "deprecated": "Please update to version 4.1.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/plugin-rgb-color": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-rgb-color/-/plugin-rgb-color-3.9.1.tgz",
+      "integrity": "sha512-SBxk7f1KBfXeTnnklbE2Hx4jBgh6I6HOtxb+Os1gTp0oaghZOkWcCD2dP4QbUu7fVNCMOcApPoMNC8RTFcy9wQ==",
+      "deprecated": "Please update to version 4.1.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/react": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/react/-/react-3.0.0.tgz",
+      "integrity": "sha512-hjGEtTT1cwv6BcjL+GcVgH++KYs52bIuQGW3PWv7z3tMa8g0bd6RI/vWSLj7p//NZ3uTjEIeilYIUPBh7Jfq/Q==",
+      "deprecated": "Please update to version 4.1.1",
+      "peerDependencies": {
+        "@tsparticles/engine": "^3.0.2",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@tsparticles/shape-circle": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-circle/-/shape-circle-3.9.1.tgz",
+      "integrity": "sha512-DqZFLjbuhVn99WJ+A9ajz9YON72RtCcvubzq6qfjFmtwAK7frvQeb6iDTp6Ze9FUipluxVZWVRG4vWTxi2B+/g==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/shape-emoji": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-emoji/-/shape-emoji-3.9.1.tgz",
+      "integrity": "sha512-ifvY63usuT+hipgVHb8gelBHSeF6ryPnMxAAEC1RGHhhXfpSRWMtE6ybr+pSsYU52M3G9+TF84v91pSwNrb9ZQ==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/shape-image": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-image/-/shape-image-3.9.1.tgz",
+      "integrity": "sha512-fCA5eme8VF3oX8yNVUA0l2SLDKuiZObkijb0z3Ky0qj1HUEVlAuEMhhNDNB9E2iELTrWEix9z7BFMePp2CC7AA==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/shape-line": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-line/-/shape-line-3.9.1.tgz",
+      "integrity": "sha512-wT8NSp0N9HURyV05f371cHKcNTNqr0/cwUu6WhBzbshkYGy1KZUP9CpRIh5FCrBpTev34mEQfOXDycgfG0KiLQ==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/shape-polygon": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-polygon/-/shape-polygon-3.9.1.tgz",
+      "integrity": "sha512-dA77PgZdoLwxnliH6XQM/zF0r4jhT01pw5y7XTeTqws++hg4rTLV9255k6R6eUqKq0FPSW1/WBsBIl7q/MmrqQ==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/shape-square": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-square/-/shape-square-3.9.1.tgz",
+      "integrity": "sha512-DKGkDnRyZrAm7T2ipqNezJahSWs6xd9O5LQLe5vjrYm1qGwrFxJiQaAdlb00UNrexz1/SA7bEoIg4XKaFa7qhQ==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/shape-star": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-star/-/shape-star-3.9.1.tgz",
+      "integrity": "sha512-kdMJpi8cdeb6vGrZVSxTG0JIjCwIenggqk0EYeKAwtOGZFBgL7eHhF2F6uu1oq8cJAbXPujEoabnLsz6mW8XaA==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/slim": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/slim/-/slim-3.9.1.tgz",
+      "integrity": "sha512-CL5cDmADU7sDjRli0So+hY61VMbdroqbArmR9Av+c1Fisa5ytr6QD7Jv62iwU2S6rvgicEe9OyRmSy5GIefwZw==",
+      "deprecated": "Please update to version 4.1.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/basic": "3.9.1",
+        "@tsparticles/engine": "3.9.1",
+        "@tsparticles/interaction-external-attract": "3.9.1",
+        "@tsparticles/interaction-external-bounce": "3.9.1",
+        "@tsparticles/interaction-external-bubble": "3.9.1",
+        "@tsparticles/interaction-external-connect": "3.9.1",
+        "@tsparticles/interaction-external-grab": "3.9.1",
+        "@tsparticles/interaction-external-pause": "3.9.1",
+        "@tsparticles/interaction-external-push": "3.9.1",
+        "@tsparticles/interaction-external-remove": "3.9.1",
+        "@tsparticles/interaction-external-repulse": "3.9.1",
+        "@tsparticles/interaction-external-slow": "3.9.1",
+        "@tsparticles/interaction-particles-attract": "3.9.1",
+        "@tsparticles/interaction-particles-collisions": "3.9.1",
+        "@tsparticles/interaction-particles-links": "3.9.1",
+        "@tsparticles/move-parallax": "3.9.1",
+        "@tsparticles/plugin-easing-quad": "3.9.1",
+        "@tsparticles/shape-emoji": "3.9.1",
+        "@tsparticles/shape-image": "3.9.1",
+        "@tsparticles/shape-line": "3.9.1",
+        "@tsparticles/shape-polygon": "3.9.1",
+        "@tsparticles/shape-square": "3.9.1",
+        "@tsparticles/shape-star": "3.9.1",
+        "@tsparticles/updater-life": "3.9.1",
+        "@tsparticles/updater-rotate": "3.9.1",
+        "@tsparticles/updater-stroke-color": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-color": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-color/-/updater-color-3.9.1.tgz",
+      "integrity": "sha512-XGWdscrgEMA8L5E7exsE0f8/2zHKIqnTrZymcyuFBw2DCB6BIV+5z6qaNStpxrhq3DbIxxhqqcybqeOo7+Alpg==",
+      "deprecated": "this package was deprecated in tsparticles v4, replaced by @tsparticles/updater-paint",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-life": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-life/-/updater-life-3.9.1.tgz",
+      "integrity": "sha512-Oi8aF2RIwMMsjssUkCB6t3PRpENHjdZf6cX92WNfAuqXtQphr3OMAkYFJFWkvyPFK22AVy3p/cFt6KE5zXxwAA==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-opacity": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-opacity/-/updater-opacity-3.9.1.tgz",
+      "integrity": "sha512-w778LQuRZJ+IoWzeRdrGykPYSSaTeWfBvLZ2XwYEkh/Ss961InOxZKIpcS6i5Kp/Zfw0fS1ZAuqeHwuj///Osw==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-out-modes": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-out-modes/-/updater-out-modes-3.9.1.tgz",
+      "integrity": "sha512-cKQEkAwbru+hhKF+GTsfbOvuBbx2DSB25CxOdhtW2wRvDBoCnngNdLw91rs+0Cex4tgEeibkebrIKFDDE6kELg==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-rotate": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-rotate/-/updater-rotate-3.9.1.tgz",
+      "integrity": "sha512-9BfKaGfp28JN82MF2qs6Ae/lJr9EColMfMTHqSKljblwbpVDHte4umuwKl3VjbRt87WD9MGtla66NTUYl+WxuQ==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-size": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-size/-/updater-size-3.9.1.tgz",
+      "integrity": "sha512-3NSVs0O2ApNKZXfd+y/zNhTXSFeG1Pw4peI8e6z/q5+XLbmue9oiEwoPy/tQLaark3oNj3JU7Q903ZijPyXSzw==",
+      "deprecated": "Please update to version 4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-stroke-color": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-stroke-color/-/updater-stroke-color-3.9.1.tgz",
+      "integrity": "sha512-3x14+C2is9pZYTg9T2TiA/aM1YMq4wLdYaZDcHm3qO30DZu5oeQq0rm/6w+QOGKYY1Z3Htg9rlSUZkhTHn7eDA==",
+      "deprecated": "this package was deprecated in tsparticles v4, replaced by @tsparticles/updater-paint",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
+      "integrity": "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "license": "ISC",
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
       }
     },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
-      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/set-array": "^1.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
+        "@babel/types": "^7.0.0"
       }
     },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
       "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
       }
     },
-    "node_modules/@jridgewell/set-array": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
       "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
+      "dependencies": {
+        "@babel/types": "^7.28.2"
       }
     },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
       "license": "MIT"
     },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
+        "@types/d3-color": "*"
       }
     },
-    "node_modules/@marsidev/react-turnstile": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@marsidev/react-turnstile/-/react-turnstile-1.3.0.tgz",
-      "integrity": "sha512-VO99Nynt+j4ETfMImQCj5LgbUKZ9mWPpy3RjP/3e/3vZu+FIphjEdU6g+cq4FeDoNshSxLlRzBTKcH5JMeM1GQ==",
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
       "license": "MIT",
-      "peerDependencies": {
-        "react": "^17.0.2 || ^18.0.0 || ^19.0",
-        "react-dom": "^17.0.2 || ^18.0.0 || ^19.0"
+      "dependencies": {
+        "@types/d3-time": "*"
       }
     },
-    "node_modules/@monaco-editor/loader": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.5.0.tgz",
-      "integrity": "sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==",
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
       "license": "MIT",
       "dependencies": {
-        "state-local": "^1.0.6"
+        "@types/d3-path": "*"
       }
     },
-    "node_modules/@monaco-editor/react": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
-      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/debug": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
+      "integrity": "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==",
       "license": "MIT",
       "dependencies": {
-        "@monaco-editor/loader": "^1.5.0"
-      },
-      "peerDependencies": {
-        "monaco-editor": ">= 0.25.0 < 1",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+        "@types/ms": "*"
       }
     },
-    "node_modules/@napi-rs/wasm-runtime": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.7.tgz",
-      "integrity": "sha512-5yximcFK5FNompXfJFoWanu5l8v1hNGqNHh9du1xETp9HWk/B/PzvchX55WYOPaIeNglG8++68AAiauBAtbnzw==",
-      "dev": true,
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
-        "@emnapi/core": "^1.3.1",
-        "@emnapi/runtime": "^1.3.1",
-        "@tybys/wasm-util": "^0.9.0"
+        "@types/estree": "*"
       }
     },
-    "node_modules/@next/env": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.6.tgz",
-      "integrity": "sha512-N1ySLuZjnAtN3kFnwhAwPvZah8RJxKasD7x1f8shFqhncnWZn4JMfg37diLNuoHsLAlrDfM3g4mawVdtAG8XLQ==",
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/istanbul-lib-coverage": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
+      "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==",
+      "dev": true,
       "license": "MIT"
     },
-    "node_modules/@next/eslint-plugin-next": {
-      "version": "15.2.4",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-15.2.4.tgz",
-      "integrity": "sha512-O8ScvKtnxkp8kL9TpJTTKnMqlkZnS+QxwoQnJwPGBxjBbzd6OVVPEJ5/pMNrktSyXQD/chEfzfFzYLM6JANOOQ==",
+    "node_modules/@types/istanbul-lib-report": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz",
+      "integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "fast-glob": "3.3.1"
+        "@types/istanbul-lib-coverage": "*"
       }
     },
-    "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.6.tgz",
-      "integrity": "sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@types/istanbul-reports": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
+      "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
+      "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@types/istanbul-lib-report": "*"
       }
     },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.6.tgz",
-      "integrity": "sha512-BLFPYPDO+MNJsiDWbeVzqvYd4NyuRrEYVB5k2N3JfWncuHAy2IVwMAOlVQDFjj+krkWzhY2apvmekMkfQR0CUQ==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@types/jsdom": {
+      "version": "21.1.7",
+      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.7.tgz",
+      "integrity": "sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==",
+      "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@types/node": "*",
+        "@types/tough-cookie": "*",
+        "parse5": "^7.0.0"
       }
     },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.6.tgz",
-      "integrity": "sha512-OJYkCd5pj/QloBvoEcJ2XiMnlJkRv9idWA/j0ugSuA34gMT6f5b7vOiCQHVRpvStoZUknhl6/UxOXL4OwtdaBw==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@types/unist": "*"
       }
     },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.6.tgz",
-      "integrity": "sha512-S4J2v+8tT3NIO9u2q+S0G5KdvNDjXfAv06OhfOzNDaBn5rw84DGXWndOEB7d5/x852A20sW1M56vhC/tRVbccQ==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "25.9.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.3.tgz",
+      "integrity": "sha512-603BddQMv3pUcr4U2dhujk83N2tTDVr/34wII2B6bJy6g+8WD6yUb11jszNs0gdi4PesVWl7ABt8nYMVpnLUcg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "undici-types": ">=7.24.0 <7.24.7"
       }
     },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.6.tgz",
-      "integrity": "sha512-2eEBDkFlMMNQnkTyPBhQOAyn2qMxyG2eE7GPH2WIDGEpEILcBPI/jdSv4t6xupSP+ot/jkfrCShLAa7+ZUPcJQ==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@types/node-fetch": {
+      "version": "2.6.13",
+      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.13.tgz",
+      "integrity": "sha512-QGpRVpzSaUs30JBSGPjOg4Uveu384erbHBoT1zeONvyCfwQxIkUshLAOqN/k9EjGviPRmWTTe6aH2qySWKTVSw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@types/node": "*",
+        "form-data": "^4.0.4"
       }
     },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.6.tgz",
-      "integrity": "sha512-oicJwRlyOoZXVlxmIMaTq7f8pN9QNbdes0q2FXfRsPhfCi8n8JmOZJm5oo1pwDaFbnnD421rVU409M3evFbIqg==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.6",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.6.tgz",
+      "integrity": "sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
+      "optional": true
     },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.6.tgz",
-      "integrity": "sha512-gQmm8izDTPgs+DCWH22kcDmuUp7NyiJgEl18bcr8irXA5N2m2O+JQIr6f3ct42GOs9c0h8QF3L5SzIxcYAAXXw==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@types/react": {
+      "version": "19.2.17",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
+      "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "peer": true,
+      "dependencies": {
+        "csstype": "^3.2.2"
       }
     },
-    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.6.tgz",
-      "integrity": "sha512-NRfO39AIrzBnixKbjuo2YiYhB6o9d8v/ymU9m/Xk8cyVk+k7XylniXkHwjs4s70wedVffc6bQNbufk5v0xEm0A==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@types/stack-utils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
+      "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/tough-cookie": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
+      "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "optional": true
+    },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/yargs": {
+      "version": "17.0.35",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.35.tgz",
+      "integrity": "sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/yargs-parser": "*"
       }
     },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+    "node_modules/@types/yargs-parser": {
+      "version": "21.0.3",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
+      "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.61.0.tgz",
+      "integrity": "sha512-bFNvl9ZczlVb+wR2Akszf3gHfKVj/8WanXaGJ3UstTA7brNKg0cNdk6X1Psu5V7MZ2oQtzZKOEzIUehaoxbDGw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.61.0",
+        "@typescript-eslint/type-utils": "8.61.0",
+        "@typescript-eslint/utils": "8.61.0",
+        "@typescript-eslint/visitor-keys": "8.61.0",
+        "ignore": "^7.0.5",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.5.0"
       },
       "engines": {
-        "node": ">= 8"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.61.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">= 8"
+        "node": ">= 4"
       }
     },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.61.0.tgz",
+      "integrity": "sha512-5B7PfA2e1NQGCnDHd/0lW7W3gvp3d59Ryw54FYO8Uswxo9f6ikw3AZV+Xj/TvpImmpsiYyUqAfhC6kJID1jF6w==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
+        "@typescript-eslint/scope-manager": "8.61.0",
+        "@typescript-eslint/types": "8.61.0",
+        "@typescript-eslint/typescript-estree": "8.61.0",
+        "@typescript-eslint/visitor-keys": "8.61.0",
+        "debug": "^4.4.3"
       },
       "engines": {
-        "node": ">= 8"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/@nolyfill/is-core-module": {
-      "version": "1.0.39",
-      "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
-      "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.61.0.tgz",
+      "integrity": "sha512-DV42F7MLJO6Rax7SK1yg43tcnEfGUrurSpSxKuVX+a3RCTzBlH3fuxprrOJXKCJGAaw82xXocikJ0uQaqwXgGA==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.61.0",
+        "@typescript-eslint/types": "^8.61.0",
+        "debug": "^4.4.3"
+      },
       "engines": {
-        "node": ">=12.4.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.61.0.tgz",
+      "integrity": "sha512-IWdXFHFSb6mlC3HPc7QsLDm5zYEbUla6trDEHf32D3/dnuUyXd87plScSNXSbm0/RxMvObpI17sv/EDTGrGZkA==",
+      "dev": true,
       "license": "MIT",
-      "optional": true,
+      "dependencies": {
+        "@typescript-eslint/types": "8.61.0",
+        "@typescript-eslint/visitor-keys": "8.61.0"
+      },
       "engines": {
-        "node": ">=14"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@reduxjs/toolkit": {
-      "version": "2.8.2",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.8.2.tgz",
-      "integrity": "sha512-MYlOhQ0sLdw4ud48FoC5w0dH9VfWQjtCjreKwYTT3l+r427qYC5Y8PihNutepr8XrNaBUDQo9khWUwQxZaqt5A==",
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.61.0.tgz",
+      "integrity": "sha512-O5Amvdv9ztMpxpf+vmFULGG78IE6Qwdr3bCGvqwG4nwc9H2qXkOYJJnRbRHyMkQTjv1d03olqwwwzHLMqpFePQ==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@standard-schema/spec": "^1.0.0",
-        "@standard-schema/utils": "^0.3.0",
-        "immer": "^10.0.3",
-        "redux": "^5.0.1",
-        "redux-thunk": "^3.1.0",
-        "reselect": "^5.1.0"
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
-      "peerDependencies": {
-        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
-        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       },
-      "peerDependenciesMeta": {
-        "react": {
-          "optional": true
-        },
-        "react-redux": {
-          "optional": true
-        }
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/@rtsao/scc": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
-      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@rushstack/eslint-patch": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.11.0.tgz",
-      "integrity": "sha512-zxnHvoMQVqewTJr/W4pKjF0bMGiKJv1WX7bSrkl46Hg0QjESbzBROWK0Wg4RphzSOS5Jiy7eFimmM3UgMrMZbQ==",
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.61.0.tgz",
+      "integrity": "sha512-TuBiQYIkd97yBfInHCTKVYMbX4kvEmpOEuixIuzCU9p8BGT1SfyyO0d0IfDMbPIHcjn/hWnusUX5e8v5Xg+X8A==",
       "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@standard-schema/spec": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
-      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
-      "license": "MIT"
-    },
-    "node_modules/@standard-schema/utils": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
-      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
-      "license": "MIT"
-    },
-    "node_modules/@supabase/auth-js": {
-      "version": "2.98.0",
-      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.98.0.tgz",
-      "integrity": "sha512-GBH361T0peHU91AQNzOlIrjUZw9TZbB9YDRiyFgk/3Kvr3/Z1NWUZ2athWTfHhwNNi8IrW00foyFxQD9IO/Trg==",
       "license": "MIT",
       "dependencies": {
-        "tslib": "2.8.1"
+        "@typescript-eslint/types": "8.61.0",
+        "@typescript-eslint/typescript-estree": "8.61.0",
+        "@typescript-eslint/utils": "8.61.0",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.5.0"
       },
       "engines": {
-        "node": ">=20.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/@supabase/functions-js": {
-      "version": "2.98.0",
-      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.98.0.tgz",
-      "integrity": "sha512-N/xEyiNU5Org+d+PNCpv+TWniAXRzxIURxDYsS/m2I/sfAB/HcM9aM2Dmf5edj5oWb9GxID1OBaZ8NMmPXL+Lg==",
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.61.0.tgz",
+      "integrity": "sha512-9QTQpZ5Iin4CdIodfbDQFSeiSJKidgYJYug1P9CC2xWgUTvlmixViqDZNciMjwLBZyJnG4tGmPl97rVAFb1AJg==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "tslib": "2.8.1"
-      },
       "engines": {
-        "node": ">=20.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@supabase/postgrest-js": {
-      "version": "2.98.0",
-      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.98.0.tgz",
-      "integrity": "sha512-v6e9WeZuJijzUut8HyXu6gMqWFepIbaeaMIm1uKzei4yLg9bC9OtEW9O14LE/9ezqNbSAnSLO5GtOLFdm7Bpkg==",
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.61.0.tgz",
+      "integrity": "sha512-42zatd5qSvvcV1JdDBCLxYRznvP4eIHpPoZXdkPFnAmanA4FuZ5dibSnCBggY8hQnqajPpoGjXFdZ7fIJKQnlA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "tslib": "2.8.1"
+        "@typescript-eslint/project-service": "8.61.0",
+        "@typescript-eslint/tsconfig-utils": "8.61.0",
+        "@typescript-eslint/types": "8.61.0",
+        "@typescript-eslint/visitor-keys": "8.61.0",
+        "debug": "^4.4.3",
+        "minimatch": "^10.2.2",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.5.0"
       },
       "engines": {
-        "node": ">=20.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/@supabase/realtime-js": {
-      "version": "2.98.0",
-      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.98.0.tgz",
-      "integrity": "sha512-rOWt28uGyFipWOSd+n0WVMr9kUXiWaa7J4hvyLCIHjRFqWm1z9CaaKAoYyfYMC1Exn3WT8WePCgiVhlAtWC2yw==",
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@types/phoenix": "^1.6.6",
-        "@types/ws": "^8.18.1",
-        "tslib": "2.8.1",
-        "ws": "^8.18.2"
-      },
       "engines": {
-        "node": ">=20.0.0"
+        "node": "18 || 20 || >=22"
       }
     },
-    "node_modules/@supabase/ssr": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/@supabase/ssr/-/ssr-0.6.1.tgz",
-      "integrity": "sha512-QtQgEMvaDzr77Mk3vZ3jWg2/y+D8tExYF7vcJT+wQ8ysuvOeGGjYbZlvj5bHYsj/SpC0bihcisnwPrM4Gp5G4g==",
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
+      "integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "cookie": "^1.0.1"
+        "balanced-match": "^4.0.2"
       },
-      "peerDependencies": {
-        "@supabase/supabase-js": "^2.43.4"
+      "engines": {
+        "node": "18 || 20 || >=22"
       }
     },
-    "node_modules/@supabase/storage-js": {
-      "version": "2.98.0",
-      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.98.0.tgz",
-      "integrity": "sha512-tzr2mG+v7ILSAZSfZMSL9OPyIH4z1ikgQ8EcQTKfMRz4EwmlFt3UnJaGzSOxyvF5b+fc9So7qdSUWTqGgeLokQ==",
-      "license": "MIT",
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "iceberg-js": "^0.8.1",
-        "tslib": "2.8.1"
+        "brace-expansion": "^5.0.5"
       },
       "engines": {
-        "node": ">=20.0.0"
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@supabase/supabase-js": {
-      "version": "2.98.0",
-      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.98.0.tgz",
-      "integrity": "sha512-Ohc97CtInLwZyiSASz7tT9/Abm/vqnIbO9REp+PivVUII8UZsuI3bngRQnYgJdFoOIwvaEII1fX1qy8x0CyNiw==",
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.61.0.tgz",
+      "integrity": "sha512-3bzFt7ImFMW/jVYwJamDoe/dMOdFLSC6pom6rRjdh4SZJEYupyMzem8e7vKZLclLfpHjlwSAXOUxtKxGXUiLqA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@supabase/auth-js": "2.98.0",
-        "@supabase/functions-js": "2.98.0",
-        "@supabase/postgrest-js": "2.98.0",
-        "@supabase/realtime-js": "2.98.0",
-        "@supabase/storage-js": "2.98.0"
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.61.0",
+        "@typescript-eslint/types": "8.61.0",
+        "@typescript-eslint/typescript-estree": "8.61.0"
       },
       "engines": {
-        "node": ">=20.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/@swc/helpers": {
-      "version": "0.5.15",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
-      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
-      "license": "Apache-2.0",
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.61.0.tgz",
+      "integrity": "sha512-QVLZu3ZPQEE+HICQyAMZ2yLQhxf0meY/wx6Hx14YcTNj13JB3qHlX3lJ02L3fLGHgERRH71kvYDwiXIguT3AjQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "tslib": "^2.8.0"
+        "@typescript-eslint/types": "8.61.0",
+        "eslint-visitor-keys": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@tailwindcss/node": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.0.16.tgz",
-      "integrity": "sha512-T6IK79hoCFScxD5tRxWMtwqwSs4sT81Vw+YbzL7RZD0/Ndm4y5kboV7LdQ97YGH6udoOZyVT/uEfrnU2L5Nkog==",
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "enhanced-resolve": "^5.18.1",
-        "jiti": "^2.4.2",
-        "tailwindcss": "4.0.16"
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@tailwindcss/node/node_modules/tailwindcss": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.16.tgz",
-      "integrity": "sha512-i/SbG7ThTIcLshcFJL+je7hCv9dPis4Xl4XNeel6iZNX42pp/BZ+la+SbZIPoYE+PN8zhKbnHblpQ/lhOWwIeQ==",
-      "dev": true,
-      "license": "MIT"
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.1.tgz",
+      "integrity": "sha512-mUFwbeTqrVgDQxFveS+df2yfap6iuP20NAKAsBt5jDEoOTDew+zwLAOilHCeQJOVSvmgCX4ogqIrA0mnyr08yQ==",
+      "license": "ISC"
     },
-    "node_modules/@tailwindcss/oxide": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.0.16.tgz",
-      "integrity": "sha512-n++F8Rzvo/e+FYxikZgKW4sCRXneSstLhTI91Ay9toeRcE/+WO33SQWzGtgmjWJcTupXZreskJ8FCr9b+kdXew==",
+    "node_modules/@unrs/resolver-binding-android-arm-eabi": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.12.2.tgz",
+      "integrity": "sha512-g5T90pqg1bo/7mytQx6F4iBNC0Wsh9cu+z9veDbFjc7HjpesJFWD7QMS0NGStXM075+7dJPPVvBbpZlnrdpi/w==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
       "license": "MIT",
-      "engines": {
-        "node": ">= 10"
-      },
-      "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.0.16",
-        "@tailwindcss/oxide-darwin-arm64": "4.0.16",
-        "@tailwindcss/oxide-darwin-x64": "4.0.16",
-        "@tailwindcss/oxide-freebsd-x64": "4.0.16",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.0.16",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.0.16",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.0.16",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.0.16",
-        "@tailwindcss/oxide-linux-x64-musl": "4.0.16",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.0.16",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.0.16"
-      }
+      "optional": true,
+      "os": [
+        "android"
+      ]
     },
-    "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.0.16.tgz",
-      "integrity": "sha512-mieEZrNLHatpQu6ad0pWBnL8ObUE9ZSe4eoX6GKTqsKv98AxNw5lUa5nJM0FgD8rYJeZ2dPtHNN/YM2xY9R+9g==",
+    "node_modules/@unrs/resolver-binding-android-arm64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.12.2.tgz",
+      "integrity": "sha512-YGCRZv/9GLhwmz6mYDeTsm/92BAyR28l6c2ReweVW5pWgfsitWLY8upvfRlGdoyD8HjeTHSYJWyZGD4KJA/nFQ==",
       "cpu": [
         "arm64"
       ],
@@ -1305,15 +4136,12 @@
       "optional": true,
       "os": [
         "android"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
+      ]
     },
-    "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.0.16.tgz",
-      "integrity": "sha512-pfilSvgrX5UDdjh09gGVMhAPfZVucm4AnwFBkwBe6WFl7gzMAZ92/35GC0yMDeS+W+RNSXclXJz+HamF1iS/aA==",
+    "node_modules/@unrs/resolver-binding-darwin-arm64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.12.2.tgz",
+      "integrity": "sha512-u9DiNT1auQMO20A9SyTuG3wUgQWB9Z7KjAg0uFuCDR1FsAY8A0CG2S6JpHS1xwm/w1G08bjXZDcyOCjv1WAm2w==",
       "cpu": [
         "arm64"
       ],
@@ -1322,15 +4150,12 @@
       "optional": true,
       "os": [
         "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
+      ]
     },
-    "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.0.16.tgz",
-      "integrity": "sha512-Z3lJY3yUjlHbzgXwWH9Y6IGeSGXfwjbXuvTPolyJUGMZl2ZaHdQMPOZ8dMll1knSLjctOif+QijMab0+GSXYLQ==",
+    "node_modules/@unrs/resolver-binding-darwin-x64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.12.2.tgz",
+      "integrity": "sha512-f7rPLi/T1HVKZu/u6t87lroib16n8vrSzcyxI7lg4BGO9UF26KhQL44sd9eOUgrTYhvRXtWOIZT5PejdPyJfUA==",
       "cpu": [
         "x64"
       ],
@@ -1339,15 +4164,12 @@
       "optional": true,
       "os": [
         "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
+      ]
     },
-    "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.0.16.tgz",
-      "integrity": "sha512-dv2U8Yc7vKIDyiJkUouhjsl+dTfRImNyZRCTFsHvvrhJvenYZBRtE/wDSYlZHR0lWKhIocxk1ScAkAcMR3F3QQ==",
+    "node_modules/@unrs/resolver-binding-freebsd-x64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.12.2.tgz",
+      "integrity": "sha512-BpcOjWCJub6nRZUS2zA20pmLvjtqAtGejETaIyRLiZiQf++cbrjltLA5NN/xaXfqeOBOSlMFbemIl5/S5tljmg==",
       "cpu": [
         "x64"
       ],
@@ -1356,15 +4178,26 @@
       "optional": true,
       "os": [
         "freebsd"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.12.2.tgz",
+      "integrity": "sha512-vZTDvdSISZjJx66OzJqtsOhzifbqRjbmI1Mnu49fQDwog5GtDI4QidRiEAYbZCRj9C8YZEW+3ZjqsyS9GR4k2A==",
+      "cpu": [
+        "arm"
       ],
-      "engines": {
-        "node": ">= 10"
-      }
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.0.16.tgz",
-      "integrity": "sha512-XBRXyUUyjMg5UMiyuQxJqWSs27w0V49g1iPuhrFakmu1/idDSly59XYteRrI2onoS9AzmMwfyzdiQSJXM89+PQ==",
+    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.12.2.tgz",
+      "integrity": "sha512-BiPI+IrIlwcW4nLLMM21+B1dFPzd55yAVgVGrdgDjNef+ch03GdxrcyaIz8X9SsQirh/kCQ7mviyWlMxdh2D7g==",
       "cpu": [
         "arm"
       ],
@@ -1373,15 +4206,26 @@
       "optional": true,
       "os": [
         "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.12.2.tgz",
+      "integrity": "sha512-zJc0H99FEPoFfSrNpa91HYfxzfAJCr502oxNK1cfdC9hlaFI43RT+JFCann9JUgZmLzzntChHyn13Sgn9ljHNg==",
+      "cpu": [
+        "arm64"
       ],
-      "engines": {
-        "node": ">= 10"
-      }
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.0.16.tgz",
-      "integrity": "sha512-+bL1zkU8MDzv389OqyI0SJbrG9kGsdxf+k2ZAILlw1TPWg5oeMkwoqgaQRqGwpOHz0pycT94qIgWVNJavAz+Iw==",
+    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.12.2.tgz",
+      "integrity": "sha512-KQ3Lki6l+Pz1k/eBipN41ES+YUK30beLGb9YqcB1O542cyLCNE6GaxrfcY3T6EezmGGk84wb5XyO9loTM9tkcA==",
       "cpu": [
         "arm64"
       ],
@@ -1390,32 +4234,110 @@
       "optional": true,
       "os": [
         "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-loong64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-loong64-gnu/-/resolver-binding-linux-loong64-gnu-1.12.2.tgz",
+      "integrity": "sha512-3SJGEh1DborhG6pyxvhPzCT4bbSIVihsvgJc13P1bHG7KLdNDaF9T3gsTwFc7Jw/5Y5/iWOjkEx7Zy0NvCGX3Q==",
+      "cpu": [
+        "loong64"
       ],
-      "engines": {
-        "node": ">= 10"
-      }
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.0.16.tgz",
-      "integrity": "sha512-Uqfnyx9oFxoX+/iy9pIDTADHLLNwuZNB8QSp+BwKAhtHjBTTYmDAdxKy3u8lJZve1aOd+S145eWpn3tT08cm4w==",
+    "node_modules/@unrs/resolver-binding-linux-loong64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-loong64-musl/-/resolver-binding-linux-loong64-musl-1.12.2.tgz",
+      "integrity": "sha512-jiuG/Obbel7uw1PwHNFfrkiKhLAF6mnyZ6aWlOAVN9WqKm8v0OFGnciJIHu8+CMvXLQ8AD51LPzAoUfT21D5Ew==",
       "cpu": [
-        "arm64"
+        "loong64"
       ],
       "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.12.2.tgz",
+      "integrity": "sha512-q7xRvVpmcfeL+LlZg8Pbbo6QaTZwDU5BaGZbwfhkEsXJn3Was8xYfE0RBH266xZt0rM6B7i8xAYIvjthuUIWHg==",
+      "cpu": [
+        "ppc64"
       ],
-      "engines": {
-        "node": ">= 10"
-      }
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.0.16.tgz",
-      "integrity": "sha512-v0Hx0KD94F6FG0IW3AJyCzQepSv/47xhShCgiWJ2TNVu406VtREkGpJtxS0Gu1ecSXhgn/36LToU5kivAuQiPg==",
+    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.12.2.tgz",
+      "integrity": "sha512-0CVdx6lcnT3Q9inOH8tsMIOJ6ImndllMjqJHg8RLVdB7Vq4SfkEXl9mCSsVNuNA4MCYycRicCUxPCabVHJRr6A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.12.2.tgz",
+      "integrity": "sha512-iOwlRo9vnp6R6ohHQS11n0NnfdXx/omhkocmIfaPRpQhKZ+3BDMkkdRVh53qjkFkpPddf+FETA28NwGN7l5l+w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.12.2.tgz",
+      "integrity": "sha512-HYJtLfXq94q8iZNFT1lknx258wlkkWhZeUXJRqzKBBUJ00CvZ+N33zgbCqimLjsyw5Va6uUxhVa12mI+kaveEw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.12.2.tgz",
+      "integrity": "sha512-mPsUhunKKDih5O96Y6enDQyHc1SqBPlY1E/SfMWDM3EdJ95Z9CArPeCVwCCqbP45ljvivdEk8Fxn+SIb1rDAJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.12.2.tgz",
+      "integrity": "sha512-azrt6+5ydLd8Vt210AAFis/lZevSfPw93EJRIJG+xPu4WCJ8K0kppCTpMyLPcKT7H15M4Jnt2tMp5bOvCkRC6A==",
       "cpu": [
         "x64"
       ],
@@ -1424,935 +4346,1110 @@
       "optional": true,
       "os": [
         "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-openharmony-arm64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-openharmony-arm64/-/resolver-binding-openharmony-arm64-1.12.2.tgz",
+      "integrity": "sha512-YZ9hP4O0X9PQb8eO980qmLNGH4zT3I9+SZTdt0Pr0YyuGQhYKoOZkV02VzrzyOZJ5xIJ3UFIenKkUkGg8GjgWQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.12.2.tgz",
+      "integrity": "sha512-tYFDIkMxSflfEc/h92ZWNsZlHSwgimbNHSO3PL2JWQHfCuC2q316jMyYU9TIWZsFK2bQwyK5VAdYgn8ygPj69A==",
+      "cpu": [
+        "wasm32"
       ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.10.0",
+        "@emnapi/runtime": "1.10.0",
+        "@napi-rs/wasm-runtime": "^1.1.4"
+      },
       "engines": {
-        "node": ">= 10"
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.12.2.tgz",
+      "integrity": "sha512-qzNyg3xL0VPQmCaUh+N5jSitce6k+uCBfMDesWRnlULOZaqUkaJ0ybdT+UqlAWJoQjuqfIU/0Ptx9bteN4D82g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.12.2.tgz",
+      "integrity": "sha512-WD9sY00OfpHVGfsnHZoA8jVT+esS/Bg8z8jzxp5BnDCjjwsuKsPQrzswwpFy4J1AUJbXPRfkpcX0mXrzeXW79g==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.12.2.tgz",
+      "integrity": "sha512-nAB74NfSNKknqQ1RrYj6uz8FcXEomu/MATJZxh/x+BArzN2U3JbOYC0APYzUIGhVY3m5hRxA8VPNdPBoG8txlA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@upstash/core-analytics": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/@upstash/core-analytics/-/core-analytics-0.0.10.tgz",
+      "integrity": "sha512-7qJHGxpQgQr9/vmeS1PktEwvNAF7TI4iJDi8Pu2CFZ9YUGHZH4fOP5TfYlZ4aVxfopnELiE4BS4FBjyK7V1/xQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@upstash/redis": "^1.28.3"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/@upstash/ratelimit": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@upstash/ratelimit/-/ratelimit-2.0.8.tgz",
+      "integrity": "sha512-YSTMBJ1YIxsoPkUMX/P4DDks/xV5YYCswWMamU8ZIfK9ly6ppjRnVOyBhMDXBmzjODm4UQKcxsJPvaeFAijp5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@upstash/core-analytics": "^0.0.10"
+      },
+      "peerDependencies": {
+        "@upstash/redis": "^1.34.3"
+      }
+    },
+    "node_modules/@upstash/redis": {
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/@upstash/redis/-/redis-1.38.0.tgz",
+      "integrity": "sha512-wu+dZBptlLy0+MCUEoHmzrY/TnmgDey3+c7EbIGwrLqAvkP8yi5MWZHYGIFtAygmL4Bkz2TdFu+eU0vFPncIcg==",
+      "license": "MIT",
+      "dependencies": {
+        "uncrypto": "^0.1.3"
+      }
+    },
+    "node_modules/@vercel/speed-insights": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-1.3.1.tgz",
+      "integrity": "sha512-PbEr7FrMkUrGYvlcLHGkXdCkxnylCWePx7lPxxq36DNdfo9mcUjLOmqOyPDHAOgnfqgGGdmE3XI9L/4+5fr+vQ==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@sveltejs/kit": "^1 || ^2",
+        "next": ">= 13",
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "svelte": ">= 4",
+        "vue": "^3",
+        "vue-router": "^4"
+      },
+      "peerDependenciesMeta": {
+        "@sveltejs/kit": {
+          "optional": true
+        },
+        "next": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        },
+        "vue-router": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.0.16.tgz",
-      "integrity": "sha512-CjV6hhQAVNYw6W2EXp1ZVL81CTSBEh6nTmS5EZq5rdEhqOx8G8YQtFKjcCJiojsS+vMXt9r87gGoORJcHOA0lg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
+    "node_modules/@wojtekmaj/date-utils": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@wojtekmaj/date-utils/-/date-utils-2.0.2.tgz",
+      "integrity": "sha512-Do66mSlSNifFFuo3l9gNKfRMSFi26CRuQMsDJuuKO/ekrDWuTTtE4ZQxoFCUOG+NgxnpSeBq/k5TY8ZseEzLpA==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "funding": {
+        "url": "https://github.com/wojtekmaj/date-utils?sponsor=1"
       }
     },
-    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.0.16.tgz",
-      "integrity": "sha512-Pj9eaAtXYH7NrvVx8Jx0U/sEaNpcIbb8d+2WnC8a+xL0LfIXWsu4AyeRUeTeb8Ty4fTGhKSJTohdXj1iSdN9WQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
+      "dependencies": {
+        "event-target-shim": "^5.0.0"
+      },
       "engines": {
-        "node": ">= 10"
+        "node": ">=6.5"
       }
     },
-    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.0.16.tgz",
-      "integrity": "sha512-M35hoFrhJe+1QdSiZpn85y8K7tfEVw6lswv3TjIfJ44JiPjPzZ4URg+rsTjTq0kue6NjNCbbY99AsRSSpJZxOw==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/acorn": {
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz",
+      "integrity": "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
+      "bin": {
+        "acorn": "bin/acorn"
+      },
       "engines": {
-        "node": ">= 10"
+        "node": ">=0.4.0"
       }
     },
-    "node_modules/@tailwindcss/postcss": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.0.16.tgz",
-      "integrity": "sha512-wgNRdylwhUk04T27Mlpi4fB4adPxChbqrqKhvYFJmYP+zW4Ren+PwYoUcns0xlbjolcjQuAG+GZHRQAfF7LOCg==",
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.0.16",
-        "@tailwindcss/oxide": "4.0.16",
-        "lightningcss": "1.29.2",
-        "postcss": "^8.4.41",
-        "tailwindcss": "4.0.16"
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/@tailwindcss/postcss/node_modules/tailwindcss": {
-      "version": "4.0.16",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.16.tgz",
-      "integrity": "sha512-i/SbG7ThTIcLshcFJL+je7hCv9dPis4Xl4XNeel6iZNX42pp/BZ+la+SbZIPoYE+PN8zhKbnHblpQ/lhOWwIeQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@tailwindcss/typography": {
-      "version": "0.5.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
-      "integrity": "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==",
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
       "license": "MIT",
       "dependencies": {
-        "lodash.castarray": "^4.4.0",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.merge": "^4.6.2",
-        "postcss-selector-parser": "6.0.10"
+        "debug": "4"
       },
-      "peerDependencies": {
-        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+      "engines": {
+        "node": ">= 6.0.0"
       }
     },
-    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
-      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+    "node_modules/agentkeepalive": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.6.0.tgz",
+      "integrity": "sha512-kja8j7PjmncONqaTsB8fQ+wE2mSU2DJ9D4XKoJ5PFWIdRMa6SLSN1ff4mOr4jCbfRSsxR4keIiySJU0N9T5hIQ==",
       "license": "MIT",
       "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
+        "humanize-ms": "^1.2.1"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">= 8.0.0"
       }
     },
-    "node_modules/@tsparticles/basic": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/basic/-/basic-3.8.1.tgz",
-      "integrity": "sha512-my114zRmekT/+I2cGuEnHxlX5G/jO0iVtNnsxxlsgspXUTSY+fDixmrNF4UgFkuaIwd9Bv/yH+7S/4HE4qte7A==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/matteobruni"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/tsparticles"
-        },
-        {
-          "type": "buymeacoffee",
-          "url": "https://www.buymeacoffee.com/matteobruni"
-        }
-      ],
+    "node_modules/ajv": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
+      "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tsparticles/engine": "3.8.1",
-        "@tsparticles/move-base": "3.8.1",
-        "@tsparticles/plugin-hex-color": "3.8.1",
-        "@tsparticles/plugin-hsl-color": "3.8.1",
-        "@tsparticles/plugin-rgb-color": "3.8.1",
-        "@tsparticles/shape-circle": "3.8.1",
-        "@tsparticles/updater-color": "3.8.1",
-        "@tsparticles/updater-opacity": "3.8.1",
-        "@tsparticles/updater-out-modes": "3.8.1",
-        "@tsparticles/updater-size": "3.8.1"
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/@tsparticles/engine": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/engine/-/engine-3.8.1.tgz",
-      "integrity": "sha512-S8h10nuZfElY7oih//NUHnT5qf4v3/dnsU8CMs7dz5lBEGr3amrYrXk0V+YKPTIQwfdmJHUaSBoAqFiv4aEGIA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/matteobruni"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/tsparticles"
-        },
-        {
-          "type": "buymeacoffee",
-          "url": "https://www.buymeacoffee.com/matteobruni"
-        }
-      ],
-      "hasInstallScript": true,
-      "license": "MIT"
-    },
-    "node_modules/@tsparticles/interaction-external-attract": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-attract/-/interaction-external-attract-3.8.1.tgz",
-      "integrity": "sha512-GWzyj5MOzjb5pNWuqAueNZS2ilPcZ0isiqwcb0BjjpwfiGfL72UyIbNUDMLncsW+4jcwB4WyMsv/qOGDmAwVfQ==",
+    "node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@tsparticles/interaction-external-bounce": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bounce/-/interaction-external-bounce-3.8.1.tgz",
-      "integrity": "sha512-tgVzsE3orneSeSUc1XhRD6Iqs8Rkm11iRdkncKSpNx4SI2eJWFPhwit2wIiHQ+IuvgCmM2DXRtLgEVeaux71zg==",
+    "node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/@tsparticles/interaction-external-bubble": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bubble/-/interaction-external-bubble-3.8.1.tgz",
-      "integrity": "sha512-edRVFybiVFd5vEjfEkHgrBTXfPTKc05EqCmRuOEd5gOll1ui0nPtknzj9JiLrPacQAJ7OgZKlHWYQb1u5Yy5Tw==",
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/@tsparticles/interaction-external-connect": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-connect/-/interaction-external-connect-3.8.1.tgz",
-      "integrity": "sha512-DQ0nNB0VDSxFxeaJQvm91NDUU/UPoiHE+uUzyw5qSoWJEGTUOj/QkW0GuBinCo99i8MH/wLDqMS9nb+7ZejpUw==",
-      "license": "MIT",
-      "dependencies": {
-        "@tsparticles/engine": "3.8.1"
-      }
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "license": "MIT"
     },
-    "node_modules/@tsparticles/interaction-external-grab": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-grab/-/interaction-external-grab-3.8.1.tgz",
-      "integrity": "sha512-nPaHrazEr14CGokGGkFHYXZJTN3Inshe04uQNj+Rj4Lz9dAIqq8EFuSejp0g9lk2cTHWfVf4SK4r8+aJz9Ow4Q==",
-      "license": "MIT",
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "license": "ISC",
       "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
       }
     },
-    "node_modules/@tsparticles/interaction-external-pause": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-pause/-/interaction-external-pause-3.8.1.tgz",
-      "integrity": "sha512-W+6bjNDddtzlikwnfmk2G/GJsz4ZnoqvK0c63earvnPNUAJmkzrvmLS52JoaIOSyclOIeD4LmubT6IsQDv5ohA==",
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
       "license": "MIT",
-      "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/@tsparticles/interaction-external-push": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-push/-/interaction-external-push-3.8.1.tgz",
-      "integrity": "sha512-LgaXaBM5QXRCeYt3DzphEhE/OirEGnV4iJrXKGJ/FrYMH7kOao85rPmCtYQNYzIy6K0XstmATmTvFRziZ/M4VQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@tsparticles/engine": "3.8.1"
-      }
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "license": "MIT"
     },
-    "node_modules/@tsparticles/interaction-external-remove": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-remove/-/interaction-external-remove-3.8.1.tgz",
-      "integrity": "sha512-mwo1DRJPIqzrWfs2G+kfQ5/HyM5j/soIj11zur3BkIlm9vdYIxUpA+hvO734oekSjJxY7YFmYUaqc4vC5TFE5w==",
-      "license": "MIT",
-      "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
       }
     },
-    "node_modules/@tsparticles/interaction-external-repulse": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-repulse/-/interaction-external-repulse-3.8.1.tgz",
-      "integrity": "sha512-r0E828zrKIRHA27daItHtI9QEp1tO8d8dmF8Ld8+orn7q0+BKG+uGvNTYJFZ+hqR+lp5AkLOiThf7L2wLS9M1A==",
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@tsparticles/interaction-external-slow": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-slow/-/interaction-external-slow-3.8.1.tgz",
-      "integrity": "sha512-U4P6c9V6/fSDsWchD4oAYAIPHA/203LzQ7+792cMxa7YThza0VS7YyJUQ1PACjGMmfeKbE34/eoGPqESKakeLw==",
+    "node_modules/array-includes": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@tsparticles/interaction-particles-attract": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-attract/-/interaction-particles-attract-3.8.1.tgz",
-      "integrity": "sha512-lo5JAVdeh1tQq/7SDsIllNdyIJgF3hSquWLARUIwGolezD91bEmHp/rlhTscX5NrqiM3y7z3inJPhR0nP5kGeg==",
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@tsparticles/interaction-particles-collisions": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-collisions/-/interaction-particles-collisions-3.8.1.tgz",
-      "integrity": "sha512-teqn1CZVoJkT/ubhkb4R/H1rnx7DoIeerHXS5uME+vrLIqzkn8QlWdEdTJ7PhdB+Ct2iYAeXCrJWwIqnKaAL3w==",
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
+      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-shim-unscopables": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@tsparticles/interaction-particles-links": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-links/-/interaction-particles-links-3.8.1.tgz",
-      "integrity": "sha512-D+X7wEWyhfV7J0uDWf5vWDhxjfaNovNZW0BWscR9qSy8pl3hjRpv0sJ/QaQFscmK5SzVz28tUFDRLbH1aV5v/Q==",
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@tsparticles/move-base": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/move-base/-/move-base-3.8.1.tgz",
-      "integrity": "sha512-DNFRL1QT8ZQYLg3fIk74EbHJq5HGOq9CM2bCci9dDcdymvN4L7aWVFQavRiWDbi3y1EUW3+jeHSMbD3qHAfOeA==",
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@tsparticles/move-parallax": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/move-parallax/-/move-parallax-3.8.1.tgz",
-      "integrity": "sha512-umrIttaJGUgfxpnolbMU2BekoN4gw0RgcfVsWR7jzHErA7eTzdJ2mikbQFD+3/1DfTDgJOjWx+dy8a3G/bSsZg==",
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
-    "node_modules/@tsparticles/plugin-easing-quad": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-easing-quad/-/plugin-easing-quad-3.8.1.tgz",
-      "integrity": "sha512-+BiPNHgsNbbh0AhWKjrmJaAu5c37naqjbME8ZYl0BClI0AC5AzBUaezYRxECaLrdtHJvKrZXFMr6Q0sxjDc6QQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/matteobruni"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/tsparticles"
-        },
-        {
-          "type": "buymeacoffee",
-          "url": "https://www.buymeacoffee.com/matteobruni"
-        }
-      ],
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@tsparticles/plugin-hex-color": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-hex-color/-/plugin-hex-color-3.8.1.tgz",
-      "integrity": "sha512-AmgB7XIYBCvg5HcqYb19YpcjEx2k4DpU2e24n0rradDDeqKKcz7EWI/08FlAnDb5HUs1em63vaAanl1vdm3+OA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/matteobruni"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/tsparticles"
-        },
-        {
-          "type": "buymeacoffee",
-          "url": "https://www.buymeacoffee.com/matteobruni"
-        }
-      ],
+    "node_modules/ast-types-flow": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
+      "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+      "engines": {
+        "node": ">= 0.4"
       }
     },
-    "node_modules/@tsparticles/plugin-hsl-color": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-hsl-color/-/plugin-hsl-color-3.8.1.tgz",
-      "integrity": "sha512-Ja6oEX6yu0064e4a+Fv1TBJiG5y0hqWwoOKSqf/Ra/zo01ageOEvDVX70FOVSrP+iEPGPznKVNcZs1tEOOvO0g==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/matteobruni"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/tsparticles"
-        },
-        {
-          "type": "buymeacoffee",
-          "url": "https://www.buymeacoffee.com/matteobruni"
-        }
-      ],
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/atomic-sleep": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/atomic-sleep/-/atomic-sleep-1.0.0.tgz",
+      "integrity": "sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==",
       "license": "MIT",
-      "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+      "engines": {
+        "node": ">=8.0.0"
       }
     },
-    "node_modules/@tsparticles/plugin-rgb-color": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-rgb-color/-/plugin-rgb-color-3.8.1.tgz",
-      "integrity": "sha512-xNLqnaFUYjU+7dCHQXjZdM4UojUAVorPVmXlYmkh1xmujLljEaFTwCg1UJVlNq+fXENIFkeaf3/XT0U/q0ZBTA==",
+    "node_modules/autoprefixer": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.0.tgz",
+      "integrity": "sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==",
+      "dev": true,
       "funding": [
         {
-          "type": "github",
-          "url": "https://github.com/sponsors/matteobruni"
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
         },
         {
-          "type": "github",
-          "url": "https://github.com/sponsors/tsparticles"
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
         },
         {
-          "type": "buymeacoffee",
-          "url": "https://www.buymeacoffee.com/matteobruni"
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "license": "MIT",
       "dependencies": {
-        "@tsparticles/engine": "3.8.1"
-      }
-    },
-    "node_modules/@tsparticles/react": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@tsparticles/react/-/react-3.0.0.tgz",
-      "integrity": "sha512-hjGEtTT1cwv6BcjL+GcVgH++KYs52bIuQGW3PWv7z3tMa8g0bd6RI/vWSLj7p//NZ3uTjEIeilYIUPBh7Jfq/Q==",
+        "browserslist": "^4.28.2",
+        "caniuse-lite": "^1.0.30001787",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
       "peerDependencies": {
-        "@tsparticles/engine": "^3.0.2",
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@tsparticles/shape-circle": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/shape-circle/-/shape-circle-3.8.1.tgz",
-      "integrity": "sha512-dM/f+qcpd8/KfviuVuKiTS8KLDE/T7xxHK7EI2S49yPW6yrJJBXdL7T4N9/n/6PF+Wslcl+kf/eTDjEAI3WjNQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+        "postcss": "^8.1.0"
       }
     },
-    "node_modules/@tsparticles/shape-emoji": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/shape-emoji/-/shape-emoji-3.8.1.tgz",
-      "integrity": "sha512-xiXNZ/afdecengUXhOqgUwR+vysgaseVpzEjoGoliOMWq4WHWv+S6ujNfes2oz3x736mTlvKdXcEWRncSXaKWw==",
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@tsparticles/shape-image": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/shape-image/-/shape-image-3.8.1.tgz",
-      "integrity": "sha512-7Yi25uLXvcY5A6TzyVBjYPsTmeTrE+0a2YO8kdp3O7V9NRGCSfXKnPRFp+lNOTiQRRvOG+SSzx2G18dfc/jwQg==",
-      "license": "MIT",
-      "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+    "node_modules/axe-core": {
+      "version": "4.11.4",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.4.tgz",
+      "integrity": "sha512-KunSNx+TVpkAw/6ULfhnx+HWRecjqZGTOyquAoWHYLRSdK1tB5Ihce1ZW+UY3fj33bYAFWPu7W/GRSmmrCGuxA==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
       }
     },
-    "node_modules/@tsparticles/shape-line": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/shape-line/-/shape-line-3.8.1.tgz",
-      "integrity": "sha512-aXVKkpGLgi1hbU/JO+opzy3OTt6PfxWrhGZyI0ms3vdcRX9uYlq4GoNUoKPVfntjWzhecF+FNNZ9gqUG/+WZLQ==",
+    "node_modules/axios": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.17.0.tgz",
+      "integrity": "sha512-J8SwNxprqqpbfenehxWYXE7CW+wM1BB4w3+N+g+/Wx40xM4rsLrfPmHHxSWIxJLYDgSY/HqlFPIYb2/S3rxafw==",
       "license": "MIT",
       "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+        "follow-redirects": "^1.16.0",
+        "form-data": "^4.0.5",
+        "https-proxy-agent": "^5.0.1",
+        "proxy-from-env": "^2.1.0"
       }
     },
-    "node_modules/@tsparticles/shape-polygon": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/shape-polygon/-/shape-polygon-3.8.1.tgz",
-      "integrity": "sha512-1pAx85NJbgmsOngl+ZAYH8vxwPJmoddjWCbWTD0wlp/x+2NRjn1iaGBKObPKLgwVzsAXb9qNHMsUX/x0C54svw==",
-      "license": "MIT",
-      "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
       }
     },
-    "node_modules/@tsparticles/shape-square": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/shape-square/-/shape-square-3.8.1.tgz",
-      "integrity": "sha512-4cjDt6542dkc15zxG1VYT7ScgPXM3+5VGtwMfh5CYNBx+GZZ3R+XUo1Q66JadcqKcNdHXfMWbXCMxs0GaiTtSw==",
+    "node_modules/babel-jest": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-30.4.1.tgz",
+      "integrity": "sha512-fATAbM8piYxkiXQp3RBXmZHxZVNJZAVXXfyeyCN2Tida3+qJ8ea9UxhiJ2y4fLO90ZImKt6k9FlcH2+rLkJGhw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+        "@jest/transform": "30.4.1",
+        "@types/babel__core": "^7.20.5",
+        "babel-plugin-istanbul": "^7.0.1",
+        "babel-preset-jest": "30.4.0",
+        "chalk": "^4.1.2",
+        "graceful-fs": "^4.2.11",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.11.0 || ^8.0.0-0"
       }
     },
-    "node_modules/@tsparticles/shape-star": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/shape-star/-/shape-star-3.8.1.tgz",
-      "integrity": "sha512-wBxnawqan/ocguNxY6cOEXF+YVnLIUmGBlnVGYx/7U9E2UHuHEKkoumob4fUflKISjvj5eQLpm/E1eUfYMd6RA==",
-      "license": "MIT",
+    "node_modules/babel-plugin-istanbul": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-7.0.1.tgz",
+      "integrity": "sha512-D8Z6Qm8jCvVXtIRkBnqNHX0zJ37rQcFJ9u8WOS6tkYOsRdHBzypCstaxWiu5ZIlqQtviRYbgnRLSoCEvjqcqbA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "workspaces": [
+        "test/babel-8"
+      ],
       "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@istanbuljs/load-nyc-config": "^1.0.0",
+        "@istanbuljs/schema": "^0.1.3",
+        "istanbul-lib-instrument": "^6.0.2",
+        "test-exclude": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/@tsparticles/slim": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/slim/-/slim-3.8.1.tgz",
-      "integrity": "sha512-b6JV8MrxMz0XYn0eBCI/Mq8VCRyeaWfUyQaQyxLiRd96xpBXCeULooJF+Eaz9it1sUI898a5QfvY8djNXs4OJw==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/matteobruni"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/tsparticles"
-        },
-        {
-          "type": "buymeacoffee",
-          "url": "https://www.buymeacoffee.com/matteobruni"
-        }
-      ],
+    "node_modules/babel-plugin-jest-hoist": {
+      "version": "30.4.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-30.4.0.tgz",
+      "integrity": "sha512-9EdtWM/sSfXLOGLwSn+GS6pIXyBnL07/8gyJlwFXjWy4DxMOyItqyUT29d4lQiS380EZwYlX7/At4PgBS+m2aA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tsparticles/basic": "3.8.1",
-        "@tsparticles/engine": "3.8.1",
-        "@tsparticles/interaction-external-attract": "3.8.1",
-        "@tsparticles/interaction-external-bounce": "3.8.1",
-        "@tsparticles/interaction-external-bubble": "3.8.1",
-        "@tsparticles/interaction-external-connect": "3.8.1",
-        "@tsparticles/interaction-external-grab": "3.8.1",
-        "@tsparticles/interaction-external-pause": "3.8.1",
-        "@tsparticles/interaction-external-push": "3.8.1",
-        "@tsparticles/interaction-external-remove": "3.8.1",
-        "@tsparticles/interaction-external-repulse": "3.8.1",
-        "@tsparticles/interaction-external-slow": "3.8.1",
-        "@tsparticles/interaction-particles-attract": "3.8.1",
-        "@tsparticles/interaction-particles-collisions": "3.8.1",
-        "@tsparticles/interaction-particles-links": "3.8.1",
-        "@tsparticles/move-parallax": "3.8.1",
-        "@tsparticles/plugin-easing-quad": "3.8.1",
-        "@tsparticles/shape-emoji": "3.8.1",
-        "@tsparticles/shape-image": "3.8.1",
-        "@tsparticles/shape-line": "3.8.1",
-        "@tsparticles/shape-polygon": "3.8.1",
-        "@tsparticles/shape-square": "3.8.1",
-        "@tsparticles/shape-star": "3.8.1",
-        "@tsparticles/updater-life": "3.8.1",
-        "@tsparticles/updater-rotate": "3.8.1",
-        "@tsparticles/updater-stroke-color": "3.8.1"
+        "@types/babel__core": "^7.20.5"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/@tsparticles/updater-color": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/updater-color/-/updater-color-3.8.1.tgz",
-      "integrity": "sha512-HKrZzrF8YJ+TD+FdIwaWOPV565bkBhe+Ewj7CwKblG7H/SG+C6n1xIYobXkGP5pYkkQ+Cm1UV/Aq0Ih7sa+rJg==",
-      "license": "MIT",
-      "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+    "node_modules/babel-preset-current-node-syntax": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.2.0.tgz",
+      "integrity": "sha512-E/VlAEzRrsLEb2+dv8yp3bo4scof3l9nR4lrld+Iy5NyVqgVYUJnDAmunkhPMisRI32Qc4iRiz425d8vM++2fg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-bigint": "^7.8.3",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5",
+        "@babel/plugin-syntax-import-attributes": "^7.24.7",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0 || ^8.0.0-0"
       }
     },
-    "node_modules/@tsparticles/updater-life": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/updater-life/-/updater-life-3.8.1.tgz",
-      "integrity": "sha512-5rCFFKD7js1lKgTpKOLo2OfmisWp4qqMVUVR4bNPeR0Ne/dcwDbKDzWyYS2AMsvWv/gcTTtWiarRfAiVQ5HtNg==",
+    "node_modules/babel-preset-jest": {
+      "version": "30.4.0",
+      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-30.4.0.tgz",
+      "integrity": "sha512-lBY4jxsNmCnSiu7kquw8ZC9F4+XLMOKypT3RnNHPvU2Kpd4W0xaPuLr5ZkRyOsvLYAY4yaW1ZwTW4xB7NIiZzg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+        "babel-plugin-jest-hoist": "30.4.0",
+        "babel-preset-current-node-syntax": "^1.2.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.11.0 || ^8.0.0-beta.1"
       }
     },
-    "node_modules/@tsparticles/updater-opacity": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/updater-opacity/-/updater-opacity-3.8.1.tgz",
-      "integrity": "sha512-41dJ0T7df7AUFFkV9yU0buUfUwh+hLYcViXxkDy+6CJiiNCNZ4H404w1DTpBQLL4fbxUcDk9BXZLV7gkE2OfAw==",
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
       "license": "MIT",
-      "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/@tsparticles/updater-out-modes": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/updater-out-modes/-/updater-out-modes-3.8.1.tgz",
-      "integrity": "sha512-BY8WqQwoDFpgPybwTzBU2GnxtRkjWnGStqBnR53x5+f1j7geTSY6WjcOvl1W+IkjtwtjiifriwBl41EbqMrjdQ==",
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
       "license": "MIT",
-      "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+      "engines": {
+        "node": ">= 0.6.0"
       }
     },
-    "node_modules/@tsparticles/updater-rotate": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/updater-rotate/-/updater-rotate-3.8.1.tgz",
-      "integrity": "sha512-gpI07H1+diuuUdhJsQ1RlfHSD3fzBJrjyuwGuoXgHmvKzak6EWKpYfUMOraH4Dm41m/4kJZelle4nST+NpIuoA==",
-      "license": "MIT",
-      "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.36",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.36.tgz",
+      "integrity": "sha512-lVq/Df7LXlO79MVaaUHztSwWiG9oXoWHlgvNS51v8Dpd4+G4/VIy6qYePTw31nAVls33nUtnfezYeLkYAak9dg==",
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/@tsparticles/updater-size": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/updater-size/-/updater-size-3.8.1.tgz",
-      "integrity": "sha512-SC2ZxewtpwKadCalotK6x2YanxRO3hTMW1Rxzx9V2rcjAIgh/Nw49Vuithy2TDq8RtTc9rHDAPic2vMQ/lYQwA==",
-      "license": "MIT",
-      "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+    "node_modules/bcryptjs": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-3.0.3.tgz",
+      "integrity": "sha512-GlF5wPWnSa/X5LKM1o0wz0suXIINz1iHRLvTS+sLyi7XPbe5ycmYI3DlZqVGZZtDgl4DmasFg7gOB3JYbphV5g==",
+      "license": "BSD-3-Clause",
+      "bin": {
+        "bcrypt": "bin/bcrypt"
       }
     },
-    "node_modules/@tsparticles/updater-stroke-color": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@tsparticles/updater-stroke-color/-/updater-stroke-color-3.8.1.tgz",
-      "integrity": "sha512-rofHCf5oRHP2H+BTJ4D3r4mTqZtre3c8bsdJHATle26+gLpzbt6I1a83wAY8xnsQa1BNnRAfEsnb7GpdZ1vYaw==",
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
       "license": "MIT",
-      "dependencies": {
-        "@tsparticles/engine": "3.8.1"
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@tybys/wasm-util": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.9.0.tgz",
-      "integrity": "sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==",
+    "node_modules/brace-expansion": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.15.tgz",
+      "integrity": "sha512-EwOCDEex4quD37XhqM3omwtMoJjr//isUZz1JopUNWms+4Z2ViyM/k1YIRePpoVNnQhENnxtFjLaxNHrT7xIUg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
-        "tslib": "^2.4.0"
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
       }
     },
-    "node_modules/@types/d3-array": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
-      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-color": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
-      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-ease": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
-      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-interpolate": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
-      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "license": "MIT",
       "dependencies": {
-        "@types/d3-color": "*"
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/@types/d3-path": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
-      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-scale": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
-      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+    "node_modules/browserslist": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
-        "@types/d3-time": "*"
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/@types/d3-shape": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
-      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
-      "license": "MIT",
+    "node_modules/bser": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
+      "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
+      "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@types/d3-path": "*"
+        "node-int64": "^0.4.0"
       }
     },
-    "node_modules/@types/d3-time": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
-      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-timer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
-      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/debug": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
-      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+    "node_modules/call-bind": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.9.tgz",
+      "integrity": "sha512-a/hy+pNsFUTR+Iz8TCJvXudKVLAnz/DyeSUo10I5yvFDQJBFU2s9uqQpoSrJlroHUKoKqzg+epxyP9lqFdzfBQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/ms": "*"
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "get-intrinsic": "^1.3.0",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@types/estree": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
-      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
-      "license": "MIT"
-    },
-    "node_modules/@types/estree-jsx": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
-      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
       "license": "MIT",
       "dependencies": {
-        "@types/estree": "*"
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
-    "node_modules/@types/json-schema": {
-      "version": "7.0.15",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
-      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@types/json5": {
-      "version": "0.0.29",
-      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
-      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
       "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@types/mdast": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
-      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
       "license": "MIT",
       "dependencies": {
-        "@types/unist": "*"
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@types/ms": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
-      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
-      "license": "MIT"
-    },
-    "node_modules/@types/node": {
-      "version": "22.15.17",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.17.tgz",
-      "integrity": "sha512-wIX2aSZL5FE+MR0JlvF87BNVrtFWf6AE6rxSE9X7OwnVvoyCQjpzSRJ+M87se/4QCkCiebQAqrJ0y6fwIyi7nw==",
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "undici-types": "~6.21.0"
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/@types/node-fetch": {
-      "version": "2.6.12",
-      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.12.tgz",
-      "integrity": "sha512-8nneRWKCg3rMtF69nLQJnOYUcbafYeFSjqkw3jCRLsqkWFlHaoQrr5mXmofFGOx3DKn7UfmBMyov8ySvLRVldA==",
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@types/node": "*",
-        "form-data": "^4.0.0"
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/@types/phoenix": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.7.tgz",
-      "integrity": "sha512-oN9ive//QSBkf19rfDv45M7eZPi0eEXylht2OLEXicu5b4KoQ1OzXIw+xDSGWxSxe1JmepRR/ZH283vsu518/Q==",
-      "license": "MIT"
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
     },
-    "node_modules/@types/prismjs": {
-      "version": "1.26.5",
-      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz",
-      "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==",
-      "license": "MIT"
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001799",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
+      "integrity": "sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
     },
-    "node_modules/@types/react": {
-      "version": "19.1.6",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.6.tgz",
-      "integrity": "sha512-JeG0rEWak0N6Itr6QUx+X60uQmN+5t3j9r/OVDtWzFXKaj6kD1BwJzOksD0FF6iWxZlbE1kB0q9vtnU2ekqa1Q==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "csstype": "^3.0.2"
+    "node_modules/canvas-confetti": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.4.tgz",
+      "integrity": "sha512-yxQbJkAVrFXWNbTUjPqjF7G+g6pDotOUHGbkZq2NELZUMDpiJ85rIEazVb8GTaAptNW2miJAXbs1BtioA251Pw==",
+      "license": "ISC",
+      "funding": {
+        "type": "donate",
+        "url": "https://www.paypal.me/kirilvatev"
       }
     },
-    "node_modules/@types/unist": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
-      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
-      "license": "MIT"
-    },
-    "node_modules/@types/use-sync-external-store": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
-      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
-      "license": "MIT"
-    },
-    "node_modules/@types/ws": {
-      "version": "8.18.1",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
-      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
       "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "@types/node": "*"
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
       }
     },
-    "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.28.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.28.0.tgz",
-      "integrity": "sha512-lvFK3TCGAHsItNdWZ/1FkvpzCxTHUVuFrdnOGLMa0GGCFIbCgQWVk3CzCGdA7kM3qGVc+dfW9tr0Z/sHnGDFyg==",
-      "dev": true,
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
       "license": "MIT",
-      "dependencies": {
-        "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.28.0",
-        "@typescript-eslint/type-utils": "8.28.0",
-        "@typescript-eslint/utils": "8.28.0",
-        "@typescript-eslint/visitor-keys": "8.28.0",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.3.1",
-        "natural-compare": "^1.4.0",
-        "ts-api-utils": "^2.0.1"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.9.0"
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/@typescript-eslint/parser": {
-      "version": "8.28.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.28.0.tgz",
-      "integrity": "sha512-LPcw1yHD3ToaDEoljFEfQ9j2xShY367h7FZ1sq5NJT9I3yj4LHer1Xd1yRSOdYy9BpsrxU7R+eoDokChYM53lQ==",
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.28.0",
-        "@typescript-eslint/types": "8.28.0",
-        "@typescript-eslint/typescript-estree": "8.28.0",
-        "@typescript-eslint/visitor-keys": "8.28.0",
-        "debug": "^4.3.4"
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
       },
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": ">=10"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.9.0"
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.28.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.28.0.tgz",
-      "integrity": "sha512-u2oITX3BJwzWCapoZ/pXw6BCOl8rJP4Ij/3wPoGvY8XwvXflOzd1kLrDUUUAIEdJSFh+ASwdTHqtan9xSg8buw==",
+    "node_modules/char-regex": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
+      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/types": "8.28.0",
-        "@typescript-eslint/visitor-keys": "8.28.0"
-      },
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
+        "node": ">=10"
       }
     },
-    "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.28.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.28.0.tgz",
-      "integrity": "sha512-oRoXu2v0Rsy/VoOGhtWrOKDiIehvI+YNrDk5Oqj40Mwm0Yt01FC/Q7nFqg088d3yAsR1ZcZFVfPCTTFCe/KPwg==",
-      "dev": true,
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
       "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/typescript-estree": "8.28.0",
-        "@typescript-eslint/utils": "8.28.0",
-        "debug": "^4.3.4",
-        "ts-api-utils": "^2.0.1"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.9.0"
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/@typescript-eslint/types": {
-      "version": "8.28.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.28.0.tgz",
-      "integrity": "sha512-bn4WS1bkKEjx7HqiwG2JNB3YJdC1q6Ue7GyGlwPHyt0TnVq6TtD/hiOdTZt71sq0s7UzqBFXD8t8o2e63tXgwA==",
-      "dev": true,
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
       "license": "MIT",
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.28.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.28.0.tgz",
-      "integrity": "sha512-H74nHEeBGeklctAVUvmDkxB1mk+PAZ9FiOMPFncdqeRBXxk1lWSYraHw8V12b7aa6Sg9HOBNbGdSHobBPuQSuA==",
-      "dev": true,
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
       "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/types": "8.28.0",
-        "@typescript-eslint/visitor-keys": "8.28.0",
-        "debug": "^4.3.4",
-        "fast-glob": "^3.3.2",
-        "is-glob": "^4.0.3",
-        "minimatch": "^9.0.4",
-        "semver": "^7.6.0",
-        "ts-api-utils": "^2.0.1"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "typescript": ">=4.8.4 <5.9.0"
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
-      "dev": true,
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
       "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/fast-glob": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
-      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "dev": true,
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
       "license": "MIT",
       "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.8"
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
       },
       "engines": {
-        "node": ">=8.6.0"
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/glob-parent": {
+    "node_modules/chokidar/node_modules/glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -2361,511 +5458,458 @@
         "node": ">= 6"
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+    "node_modules/ci-info": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
       "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
       "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "node": ">=8"
       }
     },
-    "node_modules/@typescript-eslint/utils": {
-      "version": "8.28.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.28.0.tgz",
-      "integrity": "sha512-OELa9hbTYciYITqgurT1u/SzpQVtDLmQMFzy/N8pQE+tefOyCWT79jHsav294aTqV1q1u+VzqDGbuujvRYaeSQ==",
+    "node_modules/cjs-module-lexer": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-2.2.0.tgz",
+      "integrity": "sha512-4bHTS2YuzUvtoLjdy+98ykbNB5jS0+07EvFNXerqZQJ89F7DI6ET7OQo/HJuW6K0aVsKA9hj9/RVb2kQVOrPDQ==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "8.28.0",
-        "@typescript-eslint/types": "8.28.0",
-        "@typescript-eslint/typescript-estree": "8.28.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.9.0"
-      }
+      "license": "MIT"
     },
-    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.28.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.28.0.tgz",
-      "integrity": "sha512-hbn8SZ8w4u2pRwgQ1GlUrPKE+t2XvcCW5tTRF7j6SMYIuYG37XuzIW44JCZPa36evi0Oy2SnM664BlIaAuQcvg==",
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
       "dev": true,
-      "license": "MIT",
+      "license": "ISC",
       "dependencies": {
-        "@typescript-eslint/types": "8.28.0",
-        "eslint-visitor-keys": "^4.2.0"
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
       },
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
+        "node": ">=12"
       }
     },
-    "node_modules/@ungap/structured-clone": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
-      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
-      "license": "ISC"
-    },
-    "node_modules/@unrs/rspack-resolver-binding-darwin-arm64": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@unrs/rspack-resolver-binding-darwin-arm64/-/rspack-resolver-binding-darwin-arm64-1.3.0.tgz",
-      "integrity": "sha512-EcjI0Hh2HiNOM0B9UuYH1PfLWgE6/SBQ4dKoHXWNloERfveha/n6aUZSBThtPGnJenmdfaJYXXZtqyNbWtJAFw==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/cliui/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "node_modules/@unrs/rspack-resolver-binding-darwin-x64": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@unrs/rspack-resolver-binding-darwin-x64/-/rspack-resolver-binding-darwin-x64-1.3.0.tgz",
-      "integrity": "sha512-3CgG+mhfudDfnaDqwEl0W1mcGTto5f5mqPyJSXcWDxrnNc7pr/p01khIgWOoOD1eCwVejmgpYvRKGBwJPwgHOQ==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
+      "license": "MIT"
     },
-    "node_modules/@unrs/rspack-resolver-binding-freebsd-x64": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@unrs/rspack-resolver-binding-freebsd-x64/-/rspack-resolver-binding-freebsd-x64-1.3.0.tgz",
-      "integrity": "sha512-ww8BwryDrpXlSajwSIEUXEv8oKDkw04L2ke3hxjaxWohuBV8pAQie9XBS4yQTyREuL2ypcqbARfoCXJJzVp7ig==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ]
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "node_modules/@unrs/rspack-resolver-binding-linux-arm-gnueabihf": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@unrs/rspack-resolver-binding-linux-arm-gnueabihf/-/rspack-resolver-binding-linux-arm-gnueabihf-1.3.0.tgz",
-      "integrity": "sha512-WyhonI1mkuAlnG2iaMjk7uy4aWX+FWi2Au8qCCwj57wVHbAEfrN6xN2YhzbrsCC+ciumKhj5c01MqwsnYDNzWQ==",
-      "cpu": [
-        "arm"
-      ],
+    "node_modules/cliui/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "node_modules/@unrs/rspack-resolver-binding-linux-arm-musleabihf": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@unrs/rspack-resolver-binding-linux-arm-musleabihf/-/rspack-resolver-binding-linux-arm-musleabihf-1.3.0.tgz",
-      "integrity": "sha512-+uCP6hIAMVWHKQnLZHESJ1U1TFVGLR3FTeaS2A4zB0k8w+IbZlWwl9FiBUOwOiqhcCCyKiUEifgnYFNGpxi3pw==",
-      "cpu": [
-        "arm"
-      ],
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
     },
-    "node_modules/@unrs/rspack-resolver-binding-linux-arm64-gnu": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@unrs/rspack-resolver-binding-linux-arm64-gnu/-/rspack-resolver-binding-linux-arm64-gnu-1.3.0.tgz",
-      "integrity": "sha512-p+s/Wp8rf75Qqs2EPw4HC0xVLLW+/60MlVAsB7TYLoeg1e1CU/QCis36FxpziLS0ZY2+wXdTnPUxr+5kkThzwQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
+      "engines": {
+        "node": ">=6"
+      }
     },
-    "node_modules/@unrs/rspack-resolver-binding-linux-arm64-musl": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@unrs/rspack-resolver-binding-linux-arm64-musl/-/rspack-resolver-binding-linux-arm64-musl-1.3.0.tgz",
-      "integrity": "sha512-cZEL9jmZ2kAN53MEk+fFCRJM8pRwOEboDn7sTLjZW+hL6a0/8JNfHP20n8+MBDrhyD34BSF4A6wPCj/LNhtOIQ==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
+      "engines": {
+        "iojs": ">= 1.0.0",
+        "node": ">= 0.12.0"
+      }
     },
-    "node_modules/@unrs/rspack-resolver-binding-linux-ppc64-gnu": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@unrs/rspack-resolver-binding-linux-ppc64-gnu/-/rspack-resolver-binding-linux-ppc64-gnu-1.3.0.tgz",
-      "integrity": "sha512-IOeRhcMXTNlk2oApsOozYVcOHu4t1EKYKnTz4huzdPyKNPX0Y9C7X8/6rk4aR3Inb5s4oVMT9IVKdgNXLcpGAQ==",
-      "cpu": [
-        "ppc64"
-      ],
+    "node_modules/collect-v8-coverage": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.3.tgz",
+      "integrity": "sha512-1L5aqIkwPfiodaMgQunkF1zRhNqifHBmtbbbxcr6yVxxBnliw4TDOW6NxpO8DJLgJ16OT+Y4ztZqP6p/FtXnAw==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
+      "license": "MIT"
     },
-    "node_modules/@unrs/rspack-resolver-binding-linux-s390x-gnu": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@unrs/rspack-resolver-binding-linux-s390x-gnu/-/rspack-resolver-binding-linux-s390x-gnu-1.3.0.tgz",
-      "integrity": "sha512-op54XrlEbhgVRCxzF1pHFcLamdOmHDapwrqJ9xYRB7ZjwP/zQCKzz/uAsSaAlyQmbSi/PXV7lwfca4xkv860/Q==",
-      "cpu": [
-        "s390x"
-      ],
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
     },
-    "node_modules/@unrs/rspack-resolver-binding-linux-x64-gnu": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@unrs/rspack-resolver-binding-linux-x64-gnu/-/rspack-resolver-binding-linux-x64-gnu-1.3.0.tgz",
-      "integrity": "sha512-orbQF7sN02N/b9QF8Xp1RBO5YkfI+AYo9VZw0H2Gh4JYWSuiDHjOPEeFPDIRyWmXbQJuiVNSB+e1pZOjPPKIyg==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
+      "license": "MIT"
     },
-    "node_modules/@unrs/rspack-resolver-binding-linux-x64-musl": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@unrs/rspack-resolver-binding-linux-x64-musl/-/rspack-resolver-binding-linux-x64-musl-1.3.0.tgz",
-      "integrity": "sha512-kpjqjIAC9MfsjmlgmgeC8U9gZi6g/HTuCqpI7SBMjsa7/9MvBaQ6TJ7dtnsV/+DXvfJ2+L5teBBXG+XxfpvIFA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
+      "license": "MIT"
     },
-    "node_modules/@unrs/rspack-resolver-binding-wasm32-wasi": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@unrs/rspack-resolver-binding-wasm32-wasi/-/rspack-resolver-binding-wasm32-wasi-1.3.0.tgz",
-      "integrity": "sha512-JAg0hY3kGsCPk7Jgh16yMTBZ6VEnoNR1DFZxiozjKwH+zSCfuDuM5S15gr50ofbwVw9drobIP2TTHdKZ15MJZQ==",
-      "cpu": [
-        "wasm32"
-      ],
-      "dev": true,
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
-        "@napi-rs/wasm-runtime": "^0.2.7"
+        "delayed-stream": "~1.0.0"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/@unrs/rspack-resolver-binding-win32-arm64-msvc": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@unrs/rspack-resolver-binding-win32-arm64-msvc/-/rspack-resolver-binding-win32-arm64-msvc-1.3.0.tgz",
-      "integrity": "sha512-h5N83i407ntS3ndDkhT/3vC3Dj8oP0BIwMtekETNJcxk7IuWccSXifzCEhdxxu/FOX4OICGIHdHrxf5fJuAjfw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     },
-    "node_modules/@unrs/rspack-resolver-binding-win32-ia32-msvc": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@unrs/rspack-resolver-binding-win32-ia32-msvc/-/rspack-resolver-binding-win32-ia32-msvc-1.3.0.tgz",
-      "integrity": "sha512-9QH7Gq3dRL8Q/D6PGS3Dwtjx9yw6kbCEu6iBkAUhFTDAuVUk2L0H/5NekRVA13AQaSc3OsEUKt60EOn/kq5Dug==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
+      "engines": {
+        "node": ">= 6"
+      }
     },
-    "node_modules/@unrs/rspack-resolver-binding-win32-x64-msvc": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@unrs/rspack-resolver-binding-win32-x64-msvc/-/rspack-resolver-binding-win32-x64-msvc-1.3.0.tgz",
-      "integrity": "sha512-IYuXJCuwBOVV0H73l6auaZwtAPHjCPBJkxd4Co0yO6dSjDM5Na5OceaxhUmJLZ3z8kuEGhTYWIHH7PchGztnlg==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
     },
-    "node_modules/@vercel/speed-insights": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-1.2.0.tgz",
-      "integrity": "sha512-y9GVzrUJ2xmgtQlzFP2KhVRoCglwfRQgjyfY607aU0hh0Un6d0OUyrJkjuAlsV18qR4zfoFPs/BiIj9YDS6Wzw==",
+    "node_modules/core-js": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.49.0.tgz",
+      "integrity": "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==",
       "hasInstallScript": true,
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "@sveltejs/kit": "^1 || ^2",
-        "next": ">= 13",
-        "react": "^18 || ^19 || ^19.0.0-rc",
-        "svelte": ">= 4",
-        "vue": "^3",
-        "vue-router": "^4"
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
       },
-      "peerDependenciesMeta": {
-        "@sveltejs/kit": {
-          "optional": true
-        },
-        "next": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        },
-        "svelte": {
-          "optional": true
-        },
-        "vue": {
-          "optional": true
-        },
-        "vue-router": {
-          "optional": true
-        }
+      "engines": {
+        "node": ">= 8"
       }
     },
-    "node_modules/@wojtekmaj/date-utils": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@wojtekmaj/date-utils/-/date-utils-2.0.2.tgz",
-      "integrity": "sha512-Do66mSlSNifFFuo3l9gNKfRMSFi26CRuQMsDJuuKO/ekrDWuTTtE4ZQxoFCUOG+NgxnpSeBq/k5TY8ZseEzLpA==",
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
       "license": "MIT",
-      "funding": {
-        "url": "https://github.com/wojtekmaj/date-utils?sponsor=1"
+      "dependencies": {
+        "utrie": "^1.0.2"
       }
     },
-    "node_modules/abort-controller": {
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cssesc": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
-      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "license": "MIT",
-      "dependencies": {
-        "event-target-shim": "^5.0.0"
+      "bin": {
+        "cssesc": "bin/cssesc"
       },
       "engines": {
-        "node": ">=6.5"
+        "node": ">=4"
       }
     },
-    "node_modules/acorn": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
-      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+    "node_modules/cssstyle": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.6.0.tgz",
+      "integrity": "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==",
       "dev": true,
       "license": "MIT",
-      "bin": {
-        "acorn": "bin/acorn"
+      "dependencies": {
+        "@asamuzakjp/css-color": "^3.2.0",
+        "rrweb-cssom": "^0.8.0"
       },
       "engines": {
-        "node": ">=0.4.0"
+        "node": ">=18"
       }
     },
-    "node_modules/acorn-jsx": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      }
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
     },
-    "node_modules/agentkeepalive": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.6.0.tgz",
-      "integrity": "sha512-kja8j7PjmncONqaTsB8fQ+wE2mSU2DJ9D4XKoJ5PFWIdRMa6SLSN1ff4mOr4jCbfRSsxR4keIiySJU0N9T5hIQ==",
-      "license": "MIT",
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
       "dependencies": {
-        "humanize-ms": "^1.2.1"
+        "internmap": "1 - 2"
       },
       "engines": {
-        "node": ">= 8.0.0"
+        "node": ">=12"
       }
     },
-    "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "license": "MIT",
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "license": "MIT",
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "d3-color": "1 - 3"
       },
       "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+        "node": ">=12"
       }
     },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "license": "MIT"
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
     },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
       "license": "ISC",
       "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
       },
       "engines": {
-        "node": ">= 8"
+        "node": ">=12"
       }
     },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "license": "MIT"
-    },
-    "node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
-      "license": "Python-2.0"
-    },
-    "node_modules/aria-query": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
-      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
-      "dev": true,
-      "license": "Apache-2.0",
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=12"
       }
     },
-    "node_modules/array-buffer-byte-length": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
-      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
-      "dev": true,
-      "license": "MIT",
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
       "dependencies": {
-        "call-bound": "^1.0.3",
-        "is-array-buffer": "^3.0.5"
+        "d3-array": "2 - 3"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/array-includes": {
-      "version": "3.1.8",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
-      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/damerau-levenshtein": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/data-urls": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
-        "es-object-atoms": "^1.0.0",
-        "get-intrinsic": "^1.2.4",
-        "is-string": "^1.0.7"
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=18"
       }
     },
-    "node_modules/array.prototype.findlast": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
-      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
-        "es-shim-unscopables": "^1.0.2"
+        "is-data-view": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2874,39 +5918,34 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/array.prototype.findlastindex": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
-      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.4",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.9",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.1.1",
-        "es-shim-unscopables": "^1.1.0"
+        "is-data-view": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/inspect-js"
       }
     },
-    "node_modules/array.prototype.flat": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
-      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.8",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.5",
-        "es-shim-unscopables": "^1.0.2"
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2915,133 +5954,124 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/array.prototype.flatmap": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
-      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+    "node_modules/dateformat": {
+      "version": "4.6.3",
+      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-4.6.3.tgz",
+      "integrity": "sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==",
       "dev": true,
       "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.21",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.21.tgz",
+      "integrity": "sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==",
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.8",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.5",
-        "es-shim-unscopables": "^1.0.2"
+        "ms": "^2.1.3"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=6.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
       }
     },
-    "node_modules/array.prototype.tosorted": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
-      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz",
+      "integrity": "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==",
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.3",
-        "es-errors": "^1.3.0",
-        "es-shim-unscopables": "^1.0.2"
+        "character-entities": "^2.0.0"
       },
-      "engines": {
-        "node": ">= 0.4"
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/arraybuffer.prototype.slice": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
-      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+    "node_modules/dedent": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.7.2.tgz",
+      "integrity": "sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "array-buffer-byte-length": "^1.0.1",
-        "call-bind": "^1.0.8",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.5",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.6",
-        "is-array-buffer": "^3.0.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
+      "peerDependencies": {
+        "babel-plugin-macros": "^3.1.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "peerDependenciesMeta": {
+        "babel-plugin-macros": {
+          "optional": true
+        }
       }
     },
-    "node_modules/ast-types-flow": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
-      "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/async-function": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
-      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
-      "dev": true,
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
       "license": "MIT",
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "license": "MIT"
-    },
-    "node_modules/autoprefixer": {
-      "version": "10.4.21",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
-      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
       "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.24.4",
-        "caniuse-lite": "^1.0.30001702",
-        "fraction.js": "^4.3.7",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.1.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14"
+        "node": ">= 0.4"
       },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/available-typed-arrays": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
-      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "possible-typed-array-names": "^1.0.0"
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3050,1928 +6080,2173 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/axe-core": {
-      "version": "4.10.3",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.3.tgz",
-      "integrity": "sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==",
-      "dev": true,
-      "license": "MPL-2.0",
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=0.4.0"
       }
     },
-    "node_modules/axios": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
-      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
       "license": "MIT",
-      "dependencies": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
-        "proxy-from-env": "^1.1.0"
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/axobject-query": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
-      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
-      "dev": true,
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=8"
       }
     },
-    "node_modules/babel-runtime": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
-      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+    "node_modules/detect-newline": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
+      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "core-js": "^2.4.0",
-        "regenerator-runtime": "^0.11.0"
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/bail": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
-      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
       "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
       "license": "MIT"
     },
-    "node_modules/baseline-browser-mapping": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
-      "integrity": "sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==",
+    "node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
       "license": "Apache-2.0",
-      "bin": {
-        "baseline-browser-mapping": "dist/cli.cjs"
+      "dependencies": {
+        "esutils": "^2.0.2"
       },
       "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
+      "peer": true
     },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
       "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.1.1"
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
       },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=8"
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/browserslist": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
-      "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
-      "dev": true,
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
       "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
         {
           "type": "github",
-          "url": "https://github.com/sponsors/ai"
+          "url": "https://github.com/sponsors/fb55"
         }
       ],
-      "license": "MIT",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001688",
-        "electron-to-chromium": "^1.5.73",
-        "node-releases": "^2.0.19",
-        "update-browserslist-db": "^1.1.1"
-      },
-      "bin": {
-        "browserslist": "cli.js"
+        "domelementtype": "^2.3.0"
       },
       "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
-    "node_modules/call-bind": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
-      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
-      "dev": true,
-      "license": "MIT",
+    "node_modules/dompurify": {
+      "version": "3.4.10",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.10.tgz",
+      "integrity": "sha512-0xzNv0e7oYC6yyuOGZIABPM4qtg3QxLFniDNPP4ZP90wR8Yq3zgwpRbrNiT4N3IKqDbbYFEJLV+JWEs19aZ//w==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "call-bind-apply-helpers": "^1.0.0",
-        "es-define-property": "^1.0.0",
-        "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.2"
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
       },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "16.6.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
+      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=12"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://dotenvx.com"
       }
     },
-    "node_modules/call-bind-apply-helpers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
-      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
       "license": "MIT",
       "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
         "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2"
+        "gopd": "^1.2.0"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
-    "node_modules/call-bound": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
-      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.372",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.372.tgz",
+      "integrity": "sha512-M3yhbAlilnwqC8D21t28UCDGHyitShTmmLRU/H+b74P6Ski16Nb9HONYEaVpMj/pwC7BEo5B95FpjODLCWbtfA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/emittery": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz",
+      "integrity": "sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "get-intrinsic": "^1.3.0"
-      },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=12"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sindresorhus/emittery?sponsor=1"
       }
     },
-    "node_modules/callsites": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
       "dev": true,
       "license": "MIT",
-      "engines": {
-        "node": ">=6"
+      "dependencies": {
+        "once": "^1.4.0"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
+    "node_modules/engine.io-client": {
+      "version": "6.6.5",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.5.tgz",
+      "integrity": "sha512-QCwxUDULPlXv8F6tqMMKx5dNkTe6OaBYRMPYeXKBlyOoKvAmE0ac6pW7fFhSscJ/5SI7666/U/B+MElbsrJlIg==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.20.1",
+        "xmlhttprequest-ssl": "~2.1.1"
       }
     },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001733",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001733.tgz",
-      "integrity": "sha512-e4QKw/O2Kavj2VQTKZWrwzkt3IxOmIlU6ajRb6LP64LHpBo1J67k2Hi4Vu/TgJWsNtynurfS0uK3MaUTCPfu5Q==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+    "node_modules/engine.io-client/node_modules/ws": {
+      "version": "8.20.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.20.1.tgz",
+      "integrity": "sha512-It4dO0K5v//JtTXuPkfEOaI3uUN87iYPnqo/ZzqCoG3g8uhA66QUMs/SrM0YK7/NAu+r4LMh/9dq2A7k+rHs+w==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
         },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
+        "utf-8-validate": {
+          "optional": true
         }
-      ],
-      "license": "CC-BY-4.0"
+      }
     },
-    "node_modules/ccount": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
-      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "engines": {
+        "node": ">=10.0.0"
       }
     },
-    "node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+    "node_modules/enhanced-resolve": {
+      "version": "5.24.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.24.0.tgz",
+      "integrity": "sha512-SkE2t82KlkkxQRVMVLAGKxLfORGQfrkx5dkj+vlgXRVNEdPc4eZcR+J/Fvj8C+yKSFH5L0q3NFlyufOVQnCcYQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
       },
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
+        "node": ">=10.13.0"
       }
     },
-    "node_modules/character-entities-html4": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
-      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
-      "license": "MIT",
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
       "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
+        "is-arrayish": "^0.2.1"
       }
     },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "license": "ISC",
+    "node_modules/es-abstract": {
+      "version": "1.24.2",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.2.tgz",
+      "integrity": "sha512-2FpH9Q5i2RRwyEP1AylXe6nYLR5OhaJTZwmlcP0dL/+JCbgg7yyEo/sEK6HeGZRf3dFpWwThaRHVApXSkW3xeg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "is-glob": "^4.0.1"
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/classnames": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
-      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
-      "license": "MIT"
-    },
-    "node_modules/client-only": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
-      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
-      "license": "MIT"
-    },
-    "node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
       "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
       "license": "MIT",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "license": "MIT"
-    },
-    "node_modules/combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+    "node_modules/es-iterator-helpers": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.3.3.tgz",
+      "integrity": "sha512-0PuBxFi+4uPanB97iDxCLWuHeYud2FALrw5HFZGtAF38UpJDbDC8frwp2cnDyae692CQ0dou60UwWfhgsa4U/g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "delayed-stream": "~1.0.0"
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.2",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.1.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.3.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.5",
+        "math-intrinsics": "^1.1.0"
       },
       "engines": {
-        "node": ">= 0.8"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
       "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/cookie": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
-      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
       "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/core-js": {
-      "version": "2.6.12",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
-      "hasInstallScript": true,
-      "license": "MIT"
-    },
-    "node_modules/cross-spawn": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
-      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
+        "hasown": "^2.0.2"
       },
       "engines": {
-        "node": ">= 8"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
       "license": "MIT",
-      "bin": {
-        "cssesc": "bin/cssesc"
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT"
+    "node_modules/es-toolkit": {
+      "version": "1.47.1",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.47.1.tgz",
+      "integrity": "sha512-5RAqEwf4P4E17p+W75KLOWw/nOvKZzSQpxM32IpI2KZLaVonjTrZ0Ai5ghMaVI9eKC2p8eoQgcBdkEDgzFk6+Q==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
     },
-    "node_modules/d3-array": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
-      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
-      "license": "ISC",
-      "dependencies": {
-        "internmap": "1 - 2"
-      },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=12"
+        "node": ">=6"
       }
     },
-    "node_modules/d3-color": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
-      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
-      "license": "ISC",
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
       "engines": {
-        "node": ">=12"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/d3-ease": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
-      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
-      "license": "BSD-3-Clause",
+    "node_modules/eslint": {
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.4.tgz",
+      "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.2",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
+        "@eslint/eslintrc": "^3.3.5",
+        "@eslint/js": "9.39.4",
+        "@eslint/plugin-kit": "^0.4.1",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.14.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.5",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
       "engines": {
-        "node": ">=12"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
       }
     },
-    "node_modules/d3-format": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
-      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
+    "node_modules/eslint-config-next": {
+      "version": "15.2.4",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-15.2.4.tgz",
+      "integrity": "sha512-v4gYjd4eYIme8qzaJItpR5MMBXJ0/YV07u7eb50kEnlEmX7yhOjdUdzz70v4fiINYRjLf8X8TbogF0k7wlz6sA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@next/eslint-plugin-next": "15.2.4",
+        "@rushstack/eslint-patch": "^1.10.3",
+        "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^3.5.2",
+        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-jsx-a11y": "^6.10.0",
+        "eslint-plugin-react": "^7.37.0",
+        "eslint-plugin-react-hooks": "^5.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^7.23.0 || ^8.0.0 || ^9.0.0",
+        "typescript": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "node_modules/d3-interpolate": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
-      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
-      "license": "ISC",
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.10",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.10.tgz",
+      "integrity": "sha512-tRrKqFyCaKict5hOd244sL6EQFNycnMQnBe+j8uqGNXYzsImGbGUU4ibtoaBmv5FLwJwcFJNeg1GeVjQfbMrDQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "d3-color": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
+        "debug": "^3.2.7",
+        "is-core-module": "^2.16.1",
+        "resolve": "^2.0.0-next.6"
       }
     },
-    "node_modules/d3-path": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
-      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
       }
     },
-    "node_modules/d3-scale": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
-      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+    "node_modules/eslint-import-resolver-typescript": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.10.1.tgz",
+      "integrity": "sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
-        "d3-array": "2.10.0 - 3",
-        "d3-format": "1 - 3",
-        "d3-interpolate": "1.2.0 - 3",
-        "d3-time": "2.1.1 - 3",
-        "d3-time-format": "2 - 4"
+        "@nolyfill/is-core-module": "1.0.39",
+        "debug": "^4.4.0",
+        "get-tsconfig": "^4.10.0",
+        "is-bun-module": "^2.0.0",
+        "stable-hash": "^0.0.5",
+        "tinyglobby": "^0.2.13",
+        "unrs-resolver": "^1.6.2"
       },
       "engines": {
-        "node": ">=12"
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-import-resolver-typescript"
+      },
+      "peerDependencies": {
+        "eslint": "*",
+        "eslint-plugin-import": "*",
+        "eslint-plugin-import-x": "*"
+      },
+      "peerDependenciesMeta": {
+        "eslint-plugin-import": {
+          "optional": true
+        },
+        "eslint-plugin-import-x": {
+          "optional": true
+        }
       }
     },
-    "node_modules/d3-shape": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
-      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
-      "license": "ISC",
+    "node_modules/eslint-module-utils": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.13.0.tgz",
+      "integrity": "sha512-bLohSkT6469rRs8czj0tLTD8vaeIS/whvPRJVjDr7IuoTT1k5DYDERlNycjDj/HkOlvQdYurmfZ/g3fG5bgeLQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "d3-path": "^3.1.0"
+        "debug": "^3.2.7"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
       }
     },
-    "node_modules/d3-time": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
-      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
-      "license": "ISC",
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "d3-array": "2 - 3"
-      },
-      "engines": {
-        "node": ">=12"
+        "ms": "^2.1.1"
       }
     },
-    "node_modules/d3-time-format": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
-      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
-      "license": "ISC",
+    "node_modules/eslint-plugin-import": {
+      "version": "2.32.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
+      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "d3-time": "1 - 3"
+        "@rtsao/scc": "^1.1.0",
+        "array-includes": "^3.1.9",
+        "array.prototype.findlastindex": "^1.2.6",
+        "array.prototype.flat": "^1.3.3",
+        "array.prototype.flatmap": "^1.3.3",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.12.1",
+        "hasown": "^2.0.2",
+        "is-core-module": "^2.16.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "object.groupby": "^1.0.3",
+        "object.values": "^1.2.1",
+        "semver": "^6.3.1",
+        "string.prototype.trimend": "^1.0.9",
+        "tsconfig-paths": "^3.15.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
       }
     },
-    "node_modules/d3-timer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
-      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
       }
     },
-    "node_modules/damerau-levenshtein": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
-      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
+    "node_modules/eslint-plugin-import/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
-      "license": "BSD-2-Clause"
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
     },
-    "node_modules/data-view-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
-      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+    "node_modules/eslint-plugin-jsx-a11y": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
+      "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.3",
-        "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.2"
+        "aria-query": "^5.3.2",
+        "array-includes": "^3.1.8",
+        "array.prototype.flatmap": "^1.3.2",
+        "ast-types-flow": "^0.0.8",
+        "axe-core": "^4.10.0",
+        "axobject-query": "^4.1.0",
+        "damerau-levenshtein": "^1.0.8",
+        "emoji-regex": "^9.2.2",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^3.3.5",
+        "language-tags": "^1.0.9",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.includes": "^2.0.1"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=4.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
       }
     },
-    "node_modules/data-view-byte-length": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
-      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+    "node_modules/eslint-plugin-no-unsanitized": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-no-unsanitized/-/eslint-plugin-no-unsanitized-4.1.5.tgz",
+      "integrity": "sha512-MSB4hXPVFQrI8weqzs6gzl7reP2k/qSjtCoL2vUMSDejIIq9YL1ZKvq5/ORBXab/PvfBBrWO2jWviYpL+4Ghfg==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.3",
-        "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/inspect-js"
+      "license": "MPL-2.0",
+      "peerDependencies": {
+        "eslint": "^9 || ^10"
       }
     },
-    "node_modules/data-view-byte-offset": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
-      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.1"
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=4"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
       }
     },
-    "node_modules/debug": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
-      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
+      "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
       "engines": {
-        "node": ">=6.0"
+        "node": ">=10"
       },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
       }
     },
-    "node_modules/decimal.js-light": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
-      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
-      "license": "MIT"
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
     },
-    "node_modules/decode-named-character-reference": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.1.0.tgz",
-      "integrity": "sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==",
-      "license": "MIT",
+    "node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "character-entities": "^2.0.0"
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/decode-named-character-reference/node_modules/character-entities": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
-      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/deep-is": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
-      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
       "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/deepmerge": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "license": "MIT",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/define-data-property": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+    "node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
       "dev": true,
-      "license": "MIT",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.0.1"
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/define-properties": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
-      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "define-data-property": "^1.0.1",
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=4"
       }
     },
-    "node_modules/delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "license": "MIT",
+    "node_modules/esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
       "engines": {
-        "node": ">=0.4.0"
+        "node": ">=0.10"
       }
     },
-    "node_modules/dequal": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
-      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "license": "MIT",
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
       "engines": {
-        "node": ">=6"
+        "node": ">=4.0"
       }
     },
-    "node_modules/detect-libc": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
-      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "devOptional": true,
-      "license": "Apache-2.0",
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=8"
+        "node": ">=4.0"
       }
     },
-    "node_modules/devlop": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
-      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
       "license": "MIT",
-      "dependencies": {
-        "dequal": "^2.0.0"
-      },
       "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "license": "Apache-2.0"
-    },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "license": "MIT"
-    },
-    "node_modules/doctrine": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "esutils": "^2.0.2"
-      },
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/dom-serializer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
-      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+    "node_modules/event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
       "license": "MIT",
-      "dependencies": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.2",
-        "entities": "^4.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/domelementtype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ],
-      "license": "BSD-2-Clause"
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
     },
-    "node_modules/domhandler": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
-      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-      "license": "BSD-2-Clause",
+    "node_modules/execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "domelementtype": "^2.3.0"
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
       },
       "engines": {
-        "node": ">= 4"
+        "node": ">=10"
       },
       "funding": {
-        "url": "https://github.com/fb55/domhandler?sponsor=1"
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
-    "node_modules/domutils": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
-      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "dom-serializer": "^2.0.0",
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domutils?sponsor=1"
-      }
+    "node_modules/execa/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true,
+      "license": "ISC"
     },
-    "node_modules/dotenv": {
-      "version": "16.5.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz",
-      "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==",
-      "license": "BSD-2-Clause",
+    "node_modules/exit-x": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/exit-x/-/exit-x-0.2.2.tgz",
+      "integrity": "sha512-+I6B/IkJc1o/2tiURyz/ivu/O0nKNEArIUB5O7zBrlDVJr22SCLH3xTeEry428LvFhRzIA1g8izguxJ/gbNcVQ==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://dotenvx.com"
+        "node": ">= 0.8.0"
       }
     },
-    "node_modules/dunder-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
-      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+    "node_modules/expect": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-30.4.1.tgz",
+      "integrity": "sha512-PMARsyh/JtqC20HoGqlFcIlQAyqUtW4PlI1rup1uhYJtKuwAjbvWi3GQMAn+STdHum/dk8xrKfUM1+5SAwpolA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.2.0"
+        "@jest/expect-utils": "30.4.1",
+        "@jest/get-type": "30.1.0",
+        "jest-matcher-utils": "30.4.1",
+        "jest-message-util": "30.4.1",
+        "jest-mock": "30.4.1",
+        "jest-util": "30.4.1"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
       "license": "MIT"
     },
-    "node_modules/electron-to-chromium": {
-      "version": "1.5.123",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.123.tgz",
-      "integrity": "sha512-refir3NlutEZqlKaBLK0tzlVLe5P2wDKS7UQt/3SpibizgsRAPOsqQC3ffw1nlv3ze5gjRQZYHoPymgVZkplFA==",
+    "node_modules/fast-copy": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/fast-copy/-/fast-copy-4.0.4.tgz",
+      "integrity": "sha512-eVAiWVNPSEGIzDl5yPuLrx8fNMogScXvD9xp1Kzd41FjRIz2I3sSIcxsFeM5EzFfHAfobdvs8ZySffUopljvIA==",
       "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "license": "MIT"
     },
-    "node_modules/enhanced-resolve": {
-      "version": "5.18.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
-      "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
       "license": "MIT",
       "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=8.6.0"
       }
     },
-    "node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=0.12"
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
       },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
+      "engines": {
+        "node": ">= 6"
       }
     },
-    "node_modules/es-abstract": {
-      "version": "1.23.9",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.9.tgz",
-      "integrity": "sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==",
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-plist": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/fast-plist/-/fast-plist-0.1.3.tgz",
+      "integrity": "sha512-d9cEfo/WcOezgPLAC/8t8wGb6YOD6JTCPMw2QcG2nAdFmyY+9rTUizCTaGjIZAloWENTEUMAPpkUAIJJJ0i96A==",
+      "license": "MIT"
+    },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
       "license": "MIT",
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.2",
-        "arraybuffer.prototype.slice": "^1.0.4",
-        "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
-        "data-view-buffer": "^1.0.2",
-        "data-view-byte-length": "^1.0.2",
-        "data-view-byte-offset": "^1.0.1",
-        "es-define-property": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
-        "es-set-tostringtag": "^2.1.0",
-        "es-to-primitive": "^1.3.0",
-        "function.prototype.name": "^1.1.8",
-        "get-intrinsic": "^1.2.7",
-        "get-proto": "^1.0.0",
-        "get-symbol-description": "^1.1.0",
-        "globalthis": "^1.0.4",
-        "gopd": "^1.2.0",
-        "has-property-descriptors": "^1.0.2",
-        "has-proto": "^1.2.0",
-        "has-symbols": "^1.1.0",
-        "hasown": "^2.0.2",
-        "internal-slot": "^1.1.0",
-        "is-array-buffer": "^3.0.5",
-        "is-callable": "^1.2.7",
-        "is-data-view": "^1.0.2",
-        "is-regex": "^1.2.1",
-        "is-shared-array-buffer": "^1.0.4",
-        "is-string": "^1.1.1",
-        "is-typed-array": "^1.1.15",
-        "is-weakref": "^1.1.0",
-        "math-intrinsics": "^1.1.0",
-        "object-inspect": "^1.13.3",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.7",
-        "own-keys": "^1.0.1",
-        "regexp.prototype.flags": "^1.5.3",
-        "safe-array-concat": "^1.1.3",
-        "safe-push-apply": "^1.0.0",
-        "safe-regex-test": "^1.1.0",
-        "set-proto": "^1.0.0",
-        "string.prototype.trim": "^1.2.10",
-        "string.prototype.trimend": "^1.0.9",
-        "string.prototype.trimstart": "^1.0.8",
-        "typed-array-buffer": "^1.0.3",
-        "typed-array-byte-length": "^1.0.3",
-        "typed-array-byte-offset": "^1.0.4",
-        "typed-array-length": "^1.0.7",
-        "unbox-primitive": "^1.1.0",
-        "which-typed-array": "^1.1.18"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
       }
     },
-    "node_modules/es-define-property": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
-      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
+    "node_modules/fast-safe-stringify": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz",
+      "integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/es-errors": {
+    "node_modules/fast-sha256": {
       "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
+      "resolved": "https://registry.npmjs.org/fast-sha256/-/fast-sha256-1.3.0.tgz",
+      "integrity": "sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ==",
+      "license": "Unlicense"
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
       }
     },
-    "node_modules/es-iterator-helpers": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
-      "integrity": "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==",
+    "node_modules/fb-watchman": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
+      "integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==",
       "dev": true,
-      "license": "MIT",
+      "license": "Apache-2.0",
       "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.6",
-        "es-errors": "^1.3.0",
-        "es-set-tostringtag": "^2.0.3",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.6",
-        "globalthis": "^1.0.4",
-        "gopd": "^1.2.0",
-        "has-property-descriptors": "^1.0.2",
-        "has-proto": "^1.2.0",
-        "has-symbols": "^1.1.0",
-        "internal-slot": "^1.1.0",
-        "iterator.prototype": "^1.1.4",
-        "safe-array-concat": "^1.1.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
+        "bser": "2.1.1"
       }
     },
-    "node_modules/es-object-atoms": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
-      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
       "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0"
-      },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
       }
     },
-    "node_modules/es-set-tostringtag": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
-      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+    "node_modules/fflate": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz",
+      "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==",
+      "license": "MIT"
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.6",
-        "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.2"
+        "flat-cache": "^4.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=16.0.0"
       }
     },
-    "node_modules/es-shim-unscopables": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
-      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
-      "dev": true,
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "license": "MIT",
       "dependencies": {
-        "hasown": "^2.0.2"
+        "to-regex-range": "^5.0.1"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=8"
       }
     },
-    "node_modules/es-to-primitive": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
-      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "is-callable": "^1.2.7",
-        "is-date-object": "^1.0.5",
-        "is-symbol": "^1.0.4"
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=10"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/es-toolkit": {
-      "version": "1.39.7",
-      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.39.7.tgz",
-      "integrity": "sha512-ek/wWryKouBrZIjkwW2BFf91CWOIMvoy2AE5YYgUrfWsJQM2Su1LoLtrw8uusEpN9RfqLlV/0FVNjT0WMv8Bxw==",
-      "license": "MIT",
-      "workspaces": [
-        "docs",
-        "benchmarks"
-      ]
-    },
-    "node_modules/escalade": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
-      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
       "engines": {
-        "node": ">=6"
+        "node": ">=16"
       }
     },
-    "node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+    "node_modules/flatted": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
       "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">=4.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
       }
     },
-    "node_modules/eslint": {
-      "version": "9.31.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.31.0.tgz",
-      "integrity": "sha512-QldCVh/ztyKJJZLr4jXNUByx3gR+TDYZCRXEktiZoUR3PGy4qCmSbkxcIle8GEwGpb5JBZazlaJ/CxLidXdEbQ==",
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.21.0",
-        "@eslint/config-helpers": "^0.3.0",
-        "@eslint/core": "^0.15.0",
-        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.31.0",
-        "@eslint/plugin-kit": "^0.3.1",
-        "@humanfs/node": "^0.16.6",
-        "@humanwhocodes/module-importer": "^1.0.1",
-        "@humanwhocodes/retry": "^0.4.2",
-        "@types/estree": "^1.0.6",
-        "@types/json-schema": "^7.0.15",
-        "ajv": "^6.12.4",
-        "chalk": "^4.0.0",
-        "cross-spawn": "^7.0.6",
-        "debug": "^4.3.2",
-        "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^8.4.0",
-        "eslint-visitor-keys": "^4.2.1",
-        "espree": "^10.4.0",
-        "esquery": "^1.5.0",
-        "esutils": "^2.0.2",
-        "fast-deep-equal": "^3.1.3",
-        "file-entry-cache": "^8.0.0",
-        "find-up": "^5.0.0",
-        "glob-parent": "^6.0.2",
-        "ignore": "^5.2.0",
-        "imurmurhash": "^0.1.4",
-        "is-glob": "^4.0.0",
-        "json-stable-stringify-without-jsonify": "^1.0.1",
-        "lodash.merge": "^4.6.2",
-        "minimatch": "^3.1.2",
-        "natural-compare": "^1.4.0",
-        "optionator": "^0.9.3"
-      },
-      "bin": {
-        "eslint": "bin/eslint.js"
+        "is-callable": "^1.2.7"
       },
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://eslint.org/donate"
-      },
-      "peerDependencies": {
-        "jiti": "*"
-      },
-      "peerDependenciesMeta": {
-        "jiti": {
-          "optional": true
-        }
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/eslint-config-next": {
-      "version": "15.2.4",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-15.2.4.tgz",
-      "integrity": "sha512-v4gYjd4eYIme8qzaJItpR5MMBXJ0/YV07u7eb50kEnlEmX7yhOjdUdzz70v4fiINYRjLf8X8TbogF0k7wlz6sA==",
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
       "dev": true,
-      "license": "MIT",
+      "license": "ISC",
       "dependencies": {
-        "@next/eslint-plugin-next": "15.2.4",
-        "@rushstack/eslint-patch": "^1.10.3",
-        "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
-        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
-        "eslint-import-resolver-node": "^0.3.6",
-        "eslint-import-resolver-typescript": "^3.5.2",
-        "eslint-plugin-import": "^2.31.0",
-        "eslint-plugin-jsx-a11y": "^6.10.0",
-        "eslint-plugin-react": "^7.37.0",
-        "eslint-plugin-react-hooks": "^5.0.0"
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
       },
-      "peerDependencies": {
-        "eslint": "^7.23.0 || ^8.0.0 || ^9.0.0",
-        "typescript": ">=3.3.1"
+      "engines": {
+        "node": ">=14"
       },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/eslint-import-resolver-node": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
-      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
-      "dev": true,
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
       "license": "MIT",
       "dependencies": {
-        "debug": "^3.2.7",
-        "is-core-module": "^2.13.0",
-        "resolve": "^1.22.4"
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
       }
     },
-    "node_modules/eslint-import-resolver-node/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dev": true,
+    "node_modules/form-data-encoder": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/form-data-encoder/-/form-data-encoder-1.7.2.tgz",
+      "integrity": "sha512-qfqtYan3rxrnCk1VYaA4H+Ms9xdpPqvLZa6xmMgFvhO32x7/3J/ExcTd6qpxM0vH2GdMI+poehyBZvqfMTto8A==",
+      "license": "MIT"
+    },
+    "node_modules/formdata-node": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/formdata-node/-/formdata-node-4.4.1.tgz",
+      "integrity": "sha512-0iirZp3uVDjVGt9p49aTaqjk84TrglENEDuqfdlZQ1roC9CWlPk6Avf8EEnZNcAqPonwkG35x4n3ww/1THYAeQ==",
       "license": "MIT",
       "dependencies": {
-        "ms": "^2.1.1"
+        "node-domexception": "1.0.0",
+        "web-streams-polyfill": "4.0.0-beta.3"
+      },
+      "engines": {
+        "node": ">= 12.20"
       }
     },
-    "node_modules/eslint-import-resolver-typescript": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.9.1.tgz",
-      "integrity": "sha512-euxa5rTGqHeqVxmOHT25hpk58PxkQ4mNoX6Yun4ooGaCHAxOCojJYNvjmyeOQxj/LyW+3fulH0+xtk+p2kPPTw==",
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
       "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "@nolyfill/is-core-module": "1.0.39",
-        "debug": "^4.4.0",
-        "get-tsconfig": "^4.10.0",
-        "is-bun-module": "^1.3.0",
-        "rspack-resolver": "^1.1.0",
-        "stable-hash": "^0.0.5",
-        "tinyglobby": "^0.2.12"
-      },
+      "license": "MIT",
       "engines": {
-        "node": "^14.18.0 || >=16.0.0"
+        "node": "*"
       },
       "funding": {
-        "url": "https://opencollective.com/unts/projects/eslint-import-resolver-ts"
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/framer-motion": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.40.0.tgz",
+      "integrity": "sha512-uaBd3qC1v3KQqBEjwTUd183K6PbS+j0yR9w9VmEOLWA/tnUcSn8Xa3uck7t4dgpDoUss8xQTcj8W2L07lrnLFg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.40.0",
+        "motion-utils": "^12.39.0",
+        "tslib": "^2.4.0"
       },
       "peerDependencies": {
-        "eslint": "*",
-        "eslint-plugin-import": "*",
-        "eslint-plugin-import-x": "*"
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
       },
       "peerDependenciesMeta": {
-        "eslint-plugin-import": {
+        "@emotion/is-prop-valid": {
           "optional": true
         },
-        "eslint-plugin-import-x": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
           "optional": true
         }
       }
     },
-    "node_modules/eslint-module-utils": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz",
-      "integrity": "sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==",
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
       "license": "MIT",
-      "dependencies": {
-        "debug": "^3.2.7"
-      },
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">=4"
-      },
-      "peerDependenciesMeta": {
-        "eslint": {
-          "optional": true
-        }
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "node_modules/eslint-module-utils/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dev": true,
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
       "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.1"
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/eslint-plugin-import": {
-      "version": "2.31.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz",
-      "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==",
+    "node_modules/function.prototype.name": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.2.0.tgz",
+      "integrity": "sha512-jObKIik1P2QjPHP5nz5BaOtUlfgS0fWo8IUByNXkM+o+02sJOi94em77GwJKQSJ3gfPHdgzLNrHc1uokV4P/ew==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@rtsao/scc": "^1.1.0",
-        "array-includes": "^3.1.8",
-        "array.prototype.findlastindex": "^1.2.5",
-        "array.prototype.flat": "^1.3.2",
-        "array.prototype.flatmap": "^1.3.2",
-        "debug": "^3.2.7",
-        "doctrine": "^2.1.0",
-        "eslint-import-resolver-node": "^0.3.9",
-        "eslint-module-utils": "^2.12.0",
-        "hasown": "^2.0.2",
-        "is-core-module": "^2.15.1",
-        "is-glob": "^4.0.3",
-        "minimatch": "^3.1.2",
-        "object.fromentries": "^2.0.8",
-        "object.groupby": "^1.0.3",
-        "object.values": "^1.2.0",
-        "semver": "^6.3.1",
-        "string.prototype.trimend": "^1.0.8",
-        "tsconfig-paths": "^3.15.0"
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2",
+        "hasown": "^2.0.4",
+        "is-callable": "^1.2.7",
+        "is-document.all": "^1.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.4"
       },
-      "peerDependencies": {
-        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/eslint-plugin-import/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.1"
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/eslint-plugin-import/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
       "dev": true,
       "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
       }
     },
-    "node_modules/eslint-plugin-jsx-a11y": {
-      "version": "6.10.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
-      "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
-      "dev": true,
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
       "license": "MIT",
       "dependencies": {
-        "aria-query": "^5.3.2",
-        "array-includes": "^3.1.8",
-        "array.prototype.flatmap": "^1.3.2",
-        "ast-types-flow": "^0.0.8",
-        "axe-core": "^4.10.0",
-        "axobject-query": "^4.1.0",
-        "damerau-levenshtein": "^1.0.8",
-        "emoji-regex": "^9.2.2",
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
         "hasown": "^2.0.2",
-        "jsx-ast-utils": "^3.3.5",
-        "language-tags": "^1.0.9",
-        "minimatch": "^3.1.2",
-        "object.fromentries": "^2.0.8",
-        "safe-regex-test": "^1.0.3",
-        "string.prototype.includes": "^2.0.1"
+        "math-intrinsics": "^1.1.0"
       },
       "engines": {
-        "node": ">=4.0"
+        "node": ">= 0.4"
       },
-      "peerDependencies": {
-        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/eslint-plugin-react": {
-      "version": "7.37.4",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.4.tgz",
-      "integrity": "sha512-BGP0jRmfYyvOyvMoRX/uoUeW+GqNj9y16bPQzqAHf3AYII/tDs+jMN0dBVkl88/OZwNGwrVFxE7riHsXVfy/LQ==",
+    "node_modules/get-package-type": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
+      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
       "dev": true,
       "license": "MIT",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
       "dependencies": {
-        "array-includes": "^3.1.8",
-        "array.prototype.findlast": "^1.2.5",
-        "array.prototype.flatmap": "^1.3.3",
-        "array.prototype.tosorted": "^1.1.4",
-        "doctrine": "^2.1.0",
-        "es-iterator-helpers": "^1.2.1",
-        "estraverse": "^5.3.0",
-        "hasown": "^2.0.2",
-        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
-        "minimatch": "^3.1.2",
-        "object.entries": "^1.1.8",
-        "object.fromentries": "^2.0.8",
-        "object.values": "^1.2.1",
-        "prop-types": "^15.8.1",
-        "resolve": "^2.0.0-next.5",
-        "semver": "^6.3.1",
-        "string.prototype.matchall": "^4.0.12",
-        "string.prototype.repeat": "^1.0.0"
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
-        "node": ">=4"
-      },
-      "peerDependencies": {
-        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/eslint-plugin-react-hooks": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
-      "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
       },
-      "peerDependencies": {
-        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint-plugin-react/node_modules/resolve": {
-      "version": "2.0.0-next.5",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
-      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "is-core-module": "^2.13.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
       },
-      "bin": {
-        "resolve": "bin/resolve"
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/eslint-plugin-react/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+    "node_modules/get-tsconfig": {
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.14.0.tgz",
+      "integrity": "sha512-yTb+8DXzDREzgvYmh6s9vHsSVCHeC0G3PI5bEXNBHtmshPnO+S5O7qgLEOn0I5QvMy6kpZN8K1NKGyilLb93wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/get-user-locale": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/get-user-locale/-/get-user-locale-3.0.0.tgz",
+      "integrity": "sha512-iJfHSmdYV39UUBw7Jq6GJzeJxUr4U+S03qdhVuDsR9gCEnfbqLy9gYDJFBJQL1riqolFUKQvx36mEkp2iGgJ3g==",
+      "license": "MIT",
+      "dependencies": {
+        "memoize": "^10.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/get-user-locale?sponsor=1"
+      }
+    },
+    "node_modules/glob": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
       "dev": true,
       "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
       "bin": {
-        "semver": "bin/semver.js"
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/eslint-scope": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
-      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.1.tgz",
+      "integrity": "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==",
       "dev": true,
-      "license": "BSD-2-Clause",
+      "license": "MIT",
       "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^5.2.0"
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
       },
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": ">=16 || 14 >=14.17"
       },
       "funding": {
-        "url": "https://opencollective.com/eslint"
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/eslint-visitor-keys": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
-      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+    "node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": ">=18"
       },
       "funding": {
-        "url": "https://opencollective.com/eslint"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/espree": {
-      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
-      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
       "dev": true,
-      "license": "BSD-2-Clause",
+      "license": "MIT",
       "dependencies": {
-        "acorn": "^8.15.0",
-        "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^4.2.1"
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
       },
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://opencollective.com/eslint"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/esquery": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
-      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "estraverse": "^5.1.0"
-      },
+    "node_modules/goober": {
+      "version": "2.1.19",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.19.tgz",
+      "integrity": "sha512-U7veizMqxyKlM58+Z5j2ngJBH/r9siDmxpvNxSw0PylF6WQvrASJEZrxh1hidRBJc2jqoBVSyOban5u8m+6Rxg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/esrecurse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
-      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/gsap": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.15.0.tgz",
+      "integrity": "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
       "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "estraverse": "^5.2.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=4.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/estraverse": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true,
-      "license": "BSD-2-Clause",
+      "license": "MIT",
       "engines": {
-        "node": ">=4.0"
+        "node": ">=8"
       }
     },
-    "node_modules/estree-util-is-identifier-name": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
-      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/esutils": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
       "dev": true,
-      "license": "BSD-2-Clause",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/event-target-shim": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
-      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
       "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/eventemitter3": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
-      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
-      "license": "MIT"
-    },
-    "node_modules/extend": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "license": "MIT"
-    },
-    "node_modules/fast-deep-equal": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/fast-glob": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
-      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
       "license": "MIT",
       "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
+        "has-symbols": "^1.0.3"
       },
       "engines": {
-        "node": ">=8.6.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "license": "ISC",
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "license": "MIT",
       "dependencies": {
-        "is-glob": "^4.0.1"
+        "function-bind": "^1.1.2"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/fast-levenshtein": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/fast-plist": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/fast-plist/-/fast-plist-0.1.3.tgz",
-      "integrity": "sha512-d9cEfo/WcOezgPLAC/8t8wGb6YOD6JTCPMw2QcG2nAdFmyY+9rTUizCTaGjIZAloWENTEUMAPpkUAIJJJ0i96A==",
-      "license": "MIT"
-    },
-    "node_modules/fastq": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
-      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
-      "license": "ISC",
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
+      "integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
+      "license": "MIT",
       "dependencies": {
-        "reusify": "^1.0.4"
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-js": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/fault": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
-      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
       "license": "MIT",
       "dependencies": {
-        "format": "^0.2.0"
+        "@types/hast": "^3.0.0"
       },
       "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/file-entry-cache": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
-      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+    "node_modules/help-me": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/help-me/-/help-me-5.0.0.tgz",
+      "integrity": "sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "flat-cache": "^4.0.0"
-      },
+      "license": "MIT"
+    },
+    "node_modules/highlight.js": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": ">=16.0.0"
+        "node": ">=12.0.0"
       }
     },
-    "node_modules/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+    "node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "to-regex-range": "^5.0.1"
+        "whatwg-encoding": "^3.1.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=18"
       }
     },
-    "node_modules/find-up": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
       "license": "MIT",
-      "dependencies": {
-        "locate-path": "^6.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/flat-cache": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
-      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
-      "dev": true,
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
       "license": "MIT",
       "dependencies": {
-        "flatted": "^3.2.9",
-        "keyv": "^4.5.4"
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=8.0.0"
       }
     },
-    "node_modules/flatted": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
-      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/follow-redirects": {
-      "version": "1.15.9",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
-      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+    "node_modules/htmlparser2": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.1.0.tgz",
+      "integrity": "sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==",
       "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
         {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
         }
       ],
       "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.2",
+        "entities": "^7.0.1"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/for-each": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
-      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "is-callable": "^1.2.7"
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">= 14"
       }
     },
-    "node_modules/foreground-child": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
-      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
-      "license": "ISC",
-      "dependencies": {
-        "cross-spawn": "^7.0.6",
-        "signal-exit": "^4.0.1"
-      },
+    "node_modules/http-proxy-agent/node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "node": ">= 14"
       }
     },
-    "node_modules/form-data": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
-      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
       "license": "MIT",
       "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.2",
-        "mime-types": "^2.1.12"
+        "agent-base": "6",
+        "debug": "4"
       },
       "engines": {
         "node": ">= 6"
       }
     },
-    "node_modules/form-data-encoder": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/form-data-encoder/-/form-data-encoder-1.7.2.tgz",
-      "integrity": "sha512-qfqtYan3rxrnCk1VYaA4H+Ms9xdpPqvLZa6xmMgFvhO32x7/3J/ExcTd6qpxM0vH2GdMI+poehyBZvqfMTto8A==",
-      "license": "MIT"
-    },
-    "node_modules/format": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
-      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+    "node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "dev": true,
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=0.4.x"
+        "node": ">=10.17.0"
       }
     },
-    "node_modules/formdata-node": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/formdata-node/-/formdata-node-4.4.1.tgz",
-      "integrity": "sha512-0iirZp3uVDjVGt9p49aTaqjk84TrglENEDuqfdlZQ1roC9CWlPk6Avf8EEnZNcAqPonwkG35x4n3ww/1THYAeQ==",
+    "node_modules/humanize-ms": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
+      "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
       "license": "MIT",
       "dependencies": {
-        "node-domexception": "1.0.0",
-        "web-streams-polyfill": "4.0.0-beta.3"
-      },
-      "engines": {
-        "node": ">= 12.20"
+        "ms": "^2.0.0"
       }
     },
-    "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-      "dev": true,
+    "node_modules/iceberg-js": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
+      "integrity": "sha512-1dhVQZXhcHje7798IVM+xoo/1ZdVfzOMIc8/rgVSijRK38EDqOJoGula9N/8ZI5RD8QTxNQtK/Gozpr+qUqRRA==",
       "license": "MIT",
       "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://github.com/sponsors/rawify"
+        "node": ">=20.0.0"
       }
     },
-    "node_modules/framer-motion": {
-      "version": "12.9.4",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.9.4.tgz",
-      "integrity": "sha512-yaeGDmGQ3eCQEwZ95/pRQMaSh/Q4E2CK6JYOclG/PdjyQad0MULJ+JFVV8911Fl5a6tF6o0wgW8Dpl5Qx4Adjg==",
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.9.4",
-        "motion-utils": "^12.9.4",
-        "tslib": "^2.4.0"
-      },
-      "peerDependencies": {
-        "@emotion/is-prop-valid": "*",
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
-      "peerDependenciesMeta": {
-        "@emotion/is-prop-valid": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        }
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "hasInstallScript": true,
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
       "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+        "node": ">= 4"
       }
     },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+    "node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
       "license": "MIT",
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
       }
     },
-    "node_modules/function.prototype.name": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
-      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
-        "define-properties": "^1.2.1",
-        "functions-have-names": "^1.2.3",
-        "hasown": "^2.0.2",
-        "is-callable": "^1.2.7"
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=6"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/functions-have-names": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+    "node_modules/import-local": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
+      "integrity": "sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "pkg-dir": "^4.2.0",
+        "resolve-cwd": "^3.0.0"
+      },
+      "bin": {
+        "import-local-fixture": "fixtures/cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/get-intrinsic": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
-      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+      "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+      "license": "MIT"
+    },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.1.1",
-        "function-bind": "^1.1.2",
-        "get-proto": "^1.0.1",
-        "gopd": "^1.2.0",
-        "has-symbols": "^1.1.0",
         "hasown": "^2.0.2",
-        "math-intrinsics": "^1.1.0"
+        "side-channel": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+      "license": "MIT"
+    },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/get-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
-      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "dunder-proto": "^1.0.1",
-        "es-object-atoms": "^1.0.0"
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/get-symbol-description": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
-      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
+        "async-function": "^1.0.0",
         "call-bound": "^1.0.3",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.6"
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4980,109 +8255,81 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/get-tsconfig": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.0.tgz",
-      "integrity": "sha512-kGzZ3LWWQcGIAmg6iWvXn0ei6WDtV26wzHRMwDSzmAbcXrTEXxHy6IehI6/4eT6VRKyMP1eF1VqwrVUmE/LR7A==",
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "resolve-pkg-maps": "^1.0.0"
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/get-user-locale": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/get-user-locale/-/get-user-locale-3.0.0.tgz",
-      "integrity": "sha512-iJfHSmdYV39UUBw7Jq6GJzeJxUr4U+S03qdhVuDsR9gCEnfbqLy9gYDJFBJQL1riqolFUKQvx36mEkp2iGgJ3g==",
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
       "license": "MIT",
       "dependencies": {
-        "memoize": "^10.0.0"
+        "binary-extensions": "^2.0.0"
       },
-      "funding": {
-        "url": "https://github.com/wojtekmaj/get-user-locale?sponsor=1"
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "license": "ISC",
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
       },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/glob-parent": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=10.13.0"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/glob/node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+    "node_modules/is-bun-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-2.0.0.tgz",
+      "integrity": "sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/glob/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "semver": "^7.7.1"
       }
     },
-    "node_modules/globals": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
-      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=18"
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/globalthis": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
-      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
-      "dev": true,
+    "node_modules/is-core-module": {
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
+      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
       "license": "MIT",
       "dependencies": {
-        "define-properties": "^1.2.1",
-        "gopd": "^1.0.1"
+        "hasown": "^2.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5091,20 +8338,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/goober": {
-      "version": "2.1.16",
-      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz",
-      "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==",
-      "license": "MIT",
-      "peerDependencies": {
-        "csstype": "^3.0.10"
-      }
-    },
-    "node_modules/gopd": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
-      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -5112,32 +8356,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/graceful-fs": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/graphemer": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/gsap": {
-      "version": "3.13.0",
-      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.13.0.tgz",
-      "integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw==",
-      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
-    },
-    "node_modules/has-bigints": {
+    "node_modules/is-date-object": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
-      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -5145,37 +8373,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/has-property-descriptors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
-      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "dev": true,
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
       "license": "MIT",
-      "dependencies": {
-        "es-define-property": "^1.0.0"
-      },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/has-proto": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
-      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+    "node_modules/is-document.all": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-document.all/-/is-document.all-1.0.0.tgz",
+      "integrity": "sha512-+XSoyS05OdBbhFuELhgTCpFNHkpBOJqtsZfUFFpe5QTw+9Sjbh8zitxhQkYAo6wV7e1Vb8cAPvpCk9jGam/82g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "dunder-proto": "^1.0.0"
+        "call-bound": "^1.0.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5184,25 +8399,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/has-symbols": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
-      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "license": "MIT",
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/has-tostringtag": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
-      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "has-symbols": "^1.0.3"
+        "call-bound": "^1.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5211,255 +8424,281 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=8"
       }
     },
-    "node_modules/hast-util-to-jsx-runtime": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
-      "integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
+    "node_modules/is-generator-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
+      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "@types/hast": "^3.0.0",
-        "@types/unist": "^3.0.0",
-        "comma-separated-tokens": "^2.0.0",
-        "devlop": "^1.0.0",
-        "estree-util-is-identifier-name": "^3.0.0",
-        "hast-util-whitespace": "^3.0.0",
-        "mdast-util-mdx-expression": "^2.0.0",
-        "mdast-util-mdx-jsx": "^3.0.0",
-        "mdast-util-mdxjs-esm": "^2.0.0",
-        "property-information": "^7.0.0",
-        "space-separated-tokens": "^2.0.0",
-        "style-to-js": "^1.0.0",
-        "unist-util-position": "^5.0.0",
-        "vfile-message": "^4.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/hast-util-to-jsx-runtime/node_modules/@types/hast": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
-      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+    "node_modules/is-generator-function": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/unist": "*"
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/hast-util-to-jsx-runtime/node_modules/@types/unist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
-      "license": "MIT"
-    },
-    "node_modules/hast-util-to-jsx-runtime/node_modules/comma-separated-tokens": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
-      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
       "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/hast-util-to-jsx-runtime/node_modules/property-information": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
-      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/hast-util-to-jsx-runtime/node_modules/space-separated-tokens": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
-      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
       "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/hast-util-whitespace": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
-      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^3.0.0"
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/hast-util-whitespace/node_modules/@types/hast": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
-      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "license": "MIT",
-      "dependencies": {
-        "@types/unist": "*"
+      "engines": {
+        "node": ">=0.12.0"
       }
     },
-    "node_modules/highlight.js": {
-      "version": "11.11.1",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
-      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
-      "license": "BSD-3-Clause",
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/html-url-attributes": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
-      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
       "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/htmlparser2": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
-      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
-      "funding": [
-        "https://github.com/fb55/htmlparser2?sponsor=1",
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ],
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
       "license": "MIT",
-      "dependencies": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3",
-        "domutils": "^3.0.1",
-        "entities": "^4.4.0"
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/humanize-ms": {
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-regex": {
       "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
-      "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ms": "^2.0.0"
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/iceberg-js": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
-      "integrity": "sha512-1dhVQZXhcHje7798IVM+xoo/1ZdVfzOMIc8/rgVSijRK38EDqOJoGula9N/8ZI5RD8QTxNQtK/Gozpr+qUqRRA==",
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/ignore": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
-      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
       "engines": {
-        "node": ">= 4"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/immer": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
-      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true,
       "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/immer"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/import-fresh": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
-      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "parent-module": "^1.0.0",
-        "resolve-from": "^4.0.0"
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/imurmurhash": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
       "engines": {
-        "node": ">=0.8.19"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/inline-style-parser": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
-      "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==",
-      "license": "MIT"
-    },
-    "node_modules/internal-slot": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
-      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "es-errors": "^1.3.0",
-        "hasown": "^2.0.2",
-        "side-channel": "^1.1.0"
+        "which-typed-array": "^1.1.16"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/internmap": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
-      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
-      "license": "ISC",
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=12"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-array-buffer": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
-      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
-        "get-intrinsic": "^1.2.6"
+        "call-bound": "^1.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5468,18 +8707,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-async-function": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
-      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "async-function": "^1.0.0",
         "call-bound": "^1.0.3",
-        "get-proto": "^1.0.1",
-        "has-tostringtag": "^1.0.2",
-        "safe-regex-test": "^1.1.0"
+        "get-intrinsic": "^1.2.6"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5488,450 +8724,770 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-bigint": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
-      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
       "dev": true,
-      "license": "MIT",
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/isolated-vm": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/isolated-vm/-/isolated-vm-6.1.2.tgz",
+      "integrity": "sha512-GGfsHqtlZiiurZaxB/3kY7LLAXR3sgzDul0fom4cSyBjx6ZbjpTrFWiH3z/nUfLJGJ8PIq9LQmQFiAxu24+I7A==",
+      "hasInstallScript": true,
+      "license": "ISC",
       "dependencies": {
-        "has-bigints": "^1.0.2"
+        "node-gyp-build": "^4.8.4"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=22.0.0"
       }
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "license": "MIT",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
+    "node_modules/istanbul-lib-coverage": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
+      "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/is-boolean-object": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
-      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+    "node_modules/istanbul-lib-instrument": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-6.0.3.tgz",
+      "integrity": "sha512-Vtgk7L/R2JHyyGW07spoFlB8/lpjiOLTjMdms6AFMraYt3BaJauod/NGrfnVG/y4Ix1JEuMRPDPEj2ua+zz1/Q==",
       "dev": true,
-      "license": "MIT",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "call-bound": "^1.0.3",
-        "has-tostringtag": "^1.0.2"
+        "@babel/core": "^7.23.9",
+        "@babel/parser": "^7.23.9",
+        "@istanbuljs/schema": "^0.1.3",
+        "istanbul-lib-coverage": "^3.2.0",
+        "semver": "^7.5.4"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=10"
       }
     },
-    "node_modules/is-bun-module": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-1.3.0.tgz",
-      "integrity": "sha512-DgXeu5UWI0IsMQundYb5UAOzm6G2eVnarJ0byP6Tm55iZNKceD59LNPA2L4VvsScTtHcw0yEkVwSf7PC+QoLSA==",
+    "node_modules/istanbul-lib-report": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
+      "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
       "dev": true,
-      "license": "MIT",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "semver": "^7.6.3"
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^4.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
-    "node_modules/is-callable": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
-      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+    "node_modules/istanbul-lib-source-maps": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-5.0.6.tgz",
+      "integrity": "sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==",
       "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.23",
+        "debug": "^4.1.1",
+        "istanbul-lib-coverage": "^3.0.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "engines": {
+        "node": ">=10"
       }
     },
-    "node_modules/is-core-module": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
-      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "license": "MIT",
+    "node_modules/istanbul-reports": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz",
+      "integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "hasown": "^2.0.2"
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=8"
       }
     },
-    "node_modules/is-data-view": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
-      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
         "get-intrinsic": "^1.2.6",
-        "is-typed-array": "^1.1.13"
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
       },
       "engines": {
         "node": ">= 0.4"
+      }
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
       }
     },
-    "node_modules/is-date-object": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
-      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+    "node_modules/jest": {
+      "version": "30.4.2",
+      "resolved": "https://registry.npmjs.org/jest/-/jest-30.4.2.tgz",
+      "integrity": "sha512-Yi1jqNC/Oq0N4hBgNH/YvBpP1P57QqundgytzYqy3yqAa7NZPNjSoi4SGbRAXDMdBzNE6xBCi5U7RgfrvMEUVQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.2",
-        "has-tostringtag": "^1.0.2"
+        "@jest/core": "30.4.2",
+        "@jest/types": "30.4.1",
+        "import-local": "^3.2.0",
+        "jest-cli": "30.4.2"
+      },
+      "bin": {
+        "jest": "bin/jest.js"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
       }
     },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+    "node_modules/jest-changed-files": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-30.4.1.tgz",
+      "integrity": "sha512-IuctmYrxi21iOSOaIXpJWalHyPAsVv0GeBHKDn8C1CA4W5htHn7INL+wdnL4Bo0+olEndvAFkmb++tIQJG+vvg==",
+      "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "execa": "^5.1.1",
+        "jest-util": "30.4.1",
+        "p-limit": "^3.1.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/is-finalizationregistry": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
-      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+    "node_modules/jest-circus": {
+      "version": "30.4.2",
+      "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-30.4.2.tgz",
+      "integrity": "sha512-rvHH7VlY6LgbJXJTQ87GW62g1FntOtbhh0zT+v04kC+pgL6aBKyYINXxWukCpj3dcIBMw5/XUbtDS9dU9JTXeQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.3"
+        "@jest/environment": "30.4.1",
+        "@jest/expect": "30.4.1",
+        "@jest/test-result": "30.4.1",
+        "@jest/types": "30.4.1",
+        "@types/node": "*",
+        "chalk": "^4.1.2",
+        "co": "^4.6.0",
+        "dedent": "^1.6.0",
+        "is-generator-fn": "^2.1.0",
+        "jest-each": "30.4.1",
+        "jest-matcher-utils": "30.4.1",
+        "jest-message-util": "30.4.1",
+        "jest-runtime": "30.4.2",
+        "jest-snapshot": "30.4.1",
+        "jest-util": "30.4.1",
+        "p-limit": "^3.1.0",
+        "pretty-format": "30.4.1",
+        "pure-rand": "^7.0.0",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.6"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-cli": {
+      "version": "30.4.2",
+      "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-30.4.2.tgz",
+      "integrity": "sha512-jfA2ocvVHMXS2QijrJ0d31ektP+d/W0T5RpcTX2Pq+3sVqHlsXVCM2+FmwpL+bdY8OfHpIg9xMxLF17Zg0U49Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/core": "30.4.2",
+        "@jest/test-result": "30.4.1",
+        "@jest/types": "30.4.1",
+        "chalk": "^4.1.2",
+        "exit-x": "^0.2.2",
+        "import-local": "^3.2.0",
+        "jest-config": "30.4.2",
+        "jest-util": "30.4.1",
+        "jest-validate": "30.4.1",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "jest": "bin/jest.js"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
       }
     },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "license": "MIT",
+    "node_modules/jest-config": {
+      "version": "30.4.2",
+      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-30.4.2.tgz",
+      "integrity": "sha512-rNHAShJQqQwFNoL0hbf3BphSBOWnpOUAKvidLS/AjNVLPfoj5mSf4jQMfW3cYOs6hXeZC7nF7mDHaBnbxELOzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.27.4",
+        "@jest/get-type": "30.1.0",
+        "@jest/pattern": "30.4.0",
+        "@jest/test-sequencer": "30.4.1",
+        "@jest/types": "30.4.1",
+        "babel-jest": "30.4.1",
+        "chalk": "^4.1.2",
+        "ci-info": "^4.2.0",
+        "deepmerge": "^4.3.1",
+        "glob": "^10.5.0",
+        "graceful-fs": "^4.2.11",
+        "jest-circus": "30.4.2",
+        "jest-docblock": "30.4.0",
+        "jest-environment-node": "30.4.1",
+        "jest-regex-util": "30.4.0",
+        "jest-resolve": "30.4.1",
+        "jest-runner": "30.4.2",
+        "jest-util": "30.4.1",
+        "jest-validate": "30.4.1",
+        "parse-json": "^5.2.0",
+        "pretty-format": "30.4.1",
+        "slash": "^3.0.0",
+        "strip-json-comments": "^3.1.1"
+      },
       "engines": {
-        "node": ">=8"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@types/node": "*",
+        "esbuild-register": ">=3.4.0",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "esbuild-register": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
       }
     },
-    "node_modules/is-generator-function": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
-      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+    "node_modules/jest-diff": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-30.4.1.tgz",
+      "integrity": "sha512-CRpFK0RtLriVDGcPPAnR6HMVI8bSR2jnUIgralhauzYQZIb4RH9AtEInTuQr65LmmGggGcRT6HIASxwqsVsmlA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.3",
-        "get-proto": "^1.0.0",
-        "has-tostringtag": "^1.0.2",
-        "safe-regex-test": "^1.1.0"
+        "@jest/diff-sequences": "30.4.0",
+        "@jest/get-type": "30.1.0",
+        "chalk": "^4.1.2",
+        "pretty-format": "30.4.1"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-docblock": {
+      "version": "30.4.0",
+      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-30.4.0.tgz",
+      "integrity": "sha512-ZPMabUZCx5MpbZ2eBYSvZ0J8fvo3dR9oM+eeUpb3aKNQFuS2tu3Duw1TNlMoP8k3WQgKGJuhcMFvwcVuq6T7oA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-newline": "^3.1.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+    "node_modules/jest-each": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-30.4.1.tgz",
+      "integrity": "sha512-/8MJbH6fuj48TstjrMf+u/pd06Qezz5xOXvZA6442heNOWr8bdeoGZX2d9fCn028CoMgYmroH9//zky5GfyYmA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "is-extglob": "^2.1.1"
+        "@jest/get-type": "30.1.0",
+        "@jest/types": "30.4.1",
+        "chalk": "^4.1.2",
+        "jest-util": "30.4.1",
+        "pretty-format": "30.4.1"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/is-map": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
-      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+    "node_modules/jest-environment-jsdom": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-30.4.1.tgz",
+      "integrity": "sha512-o3nfaN4zej7qgk2X0j8Jhq/S9nAVKs2xK3QeQxeHVvpkEPxaA1yxDGydR+iVI7zPy7Cp62Aq2h3Ja46QvfWHGA==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@jest/environment": "30.4.1",
+        "@jest/environment-jsdom-abstract": "30.4.1",
+        "jsdom": "^26.1.0"
+      },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
       }
     },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+    "node_modules/jest-environment-node": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-30.4.1.tgz",
+      "integrity": "sha512-4FZYVOk85hz2AyT6BbarKy9u37g6DbrDyCdFhsnDdXqyrueYQvB+0zO4f/kqLCRD0BsPRXPMNJeQwihKZV8naw==",
+      "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@jest/environment": "30.4.1",
+        "@jest/fake-timers": "30.4.1",
+        "@jest/types": "30.4.1",
+        "@types/node": "*",
+        "jest-mock": "30.4.1",
+        "jest-util": "30.4.1",
+        "jest-validate": "30.4.1"
+      },
       "engines": {
-        "node": ">=0.12.0"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/is-number-object": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
-      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+    "node_modules/jest-haste-map": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-30.4.1.tgz",
+      "integrity": "sha512-rFrcONd8jeFsyw+Z9CrScJgglRf2+NFmNam8dKu7n+SoHqNYT47mn0DdEcVUZJpvh7Iz6/si7f7yUH7GJHVgnw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.3",
-        "has-tostringtag": "^1.0.2"
+        "@jest/types": "30.4.1",
+        "@types/node": "*",
+        "anymatch": "^3.1.3",
+        "fb-watchman": "^2.0.2",
+        "graceful-fs": "^4.2.11",
+        "jest-regex-util": "30.4.0",
+        "jest-util": "30.4.1",
+        "jest-worker": "30.4.1",
+        "picomatch": "^4.0.3",
+        "walker": "^1.0.8"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "optionalDependencies": {
+        "fsevents": "^2.3.3"
       }
     },
-    "node_modules/is-plain-obj": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
-      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+    "node_modules/jest-leak-detector": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-30.4.1.tgz",
+      "integrity": "sha512-IpmyiioeHxiWDhesHnUFmOxcTzwCwKpgACgWajtAP+nYQXiY7DakTxB6Bx9JFiRMljr0AX1PvnQdaU1KFoz6NQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/get-type": "30.1.0",
+        "pretty-format": "30.4.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-matcher-utils": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-30.4.1.tgz",
+      "integrity": "sha512-zvYfX5CaeEkFrrLS9suWe9rvJrm9J1Iv3ua8kIBv9GEPzcnsfBf0bob37la7s67fs0nlBC3EuvkOLnXQKxtx4A==",
+      "dev": true,
       "license": "MIT",
-      "engines": {
-        "node": ">=12"
+      "dependencies": {
+        "@jest/get-type": "30.1.0",
+        "chalk": "^4.1.2",
+        "jest-diff": "30.4.1",
+        "pretty-format": "30.4.1"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/is-plain-object": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
-      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+    "node_modules/jest-message-util": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-30.4.1.tgz",
+      "integrity": "sha512-kwCKIvq0MCW1HzLoGola9Te6JUdzgV0loyKJ3Qghrkz9i5/RRIHsL95BMQc2HBBhlBKC4j22K9p11TGHH8RBpQ==",
+      "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@jest/types": "30.4.1",
+        "@types/stack-utils": "^2.0.3",
+        "chalk": "^4.1.2",
+        "graceful-fs": "^4.2.11",
+        "jest-util": "30.4.1",
+        "picomatch": "^4.0.3",
+        "pretty-format": "30.4.1",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.6"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/is-regex": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
-      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+    "node_modules/jest-mock": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-30.4.1.tgz",
+      "integrity": "sha512-/i8SVb8/NSB7RfNi8gfqu8gxLV23KaL5EpAttyb9iz8qWRIqXRLflycz/32wXsYkOnaUlx8NAKnJYtpsmXUmfw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.2",
-        "gopd": "^1.2.0",
-        "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.2"
+        "@jest/types": "30.4.1",
+        "@types/node": "*",
+        "jest-util": "30.4.1"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/is-set": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
-      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+    "node_modules/jest-pnp-resolver": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
+      "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=6"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "peerDependencies": {
+        "jest-resolve": "*"
+      },
+      "peerDependenciesMeta": {
+        "jest-resolve": {
+          "optional": true
+        }
       }
     },
-    "node_modules/is-shared-array-buffer": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
-      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+    "node_modules/jest-regex-util": {
+      "version": "30.4.0",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-30.4.0.tgz",
+      "integrity": "sha512-mWlvLviKIgIQ8VCuM1xRdD0TWp3zlzionlmDBjuXVBs+VkmXq6FgW9T4Emr7oGz/Rk6feDCGyiugolcQEyp3mg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-resolve": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-30.4.1.tgz",
+      "integrity": "sha512-Zry8Yq/yJcNAZ7dJ5F2heic8AheXvbFZ7XI5V+h28nrYZ7Qoyy4dItq8OodjnYD270mvX+ZudmrNV9cysqhW5Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.3"
+        "chalk": "^4.1.2",
+        "graceful-fs": "^4.2.11",
+        "jest-haste-map": "30.4.1",
+        "jest-pnp-resolver": "^1.2.3",
+        "jest-util": "30.4.1",
+        "jest-validate": "30.4.1",
+        "slash": "^3.0.0",
+        "unrs-resolver": "^1.7.11"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/is-string": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
-      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+    "node_modules/jest-resolve-dependencies": {
+      "version": "30.4.2",
+      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-30.4.2.tgz",
+      "integrity": "sha512-gDiVh1I+GxYzz9oXlyw+1wv6VOYX1WYxMOfjsA3iGKePV2oxmbHhwxfkALxNxYy1ciw6APWwkW2zZONwP97aEQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.3",
-        "has-tostringtag": "^1.0.2"
+        "jest-regex-util": "30.4.0",
+        "jest-snapshot": "30.4.1"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/is-symbol": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
-      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+    "node_modules/jest-runner": {
+      "version": "30.4.2",
+      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-30.4.2.tgz",
+      "integrity": "sha512-2dw0PslVYXxffXGpLo+Ejad+KcI1Qkjn7f4X4619gf21oCUmL+SPfjqIa/losUem3yEOvfNZe/F1HWUcNpODcg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.2",
-        "has-symbols": "^1.1.0",
-        "safe-regex-test": "^1.1.0"
+        "@jest/console": "30.4.1",
+        "@jest/environment": "30.4.1",
+        "@jest/test-result": "30.4.1",
+        "@jest/transform": "30.4.1",
+        "@jest/types": "30.4.1",
+        "@types/node": "*",
+        "chalk": "^4.1.2",
+        "emittery": "^0.13.1",
+        "exit-x": "^0.2.2",
+        "graceful-fs": "^4.2.11",
+        "jest-docblock": "30.4.0",
+        "jest-environment-node": "30.4.1",
+        "jest-haste-map": "30.4.1",
+        "jest-leak-detector": "30.4.1",
+        "jest-message-util": "30.4.1",
+        "jest-resolve": "30.4.1",
+        "jest-runtime": "30.4.2",
+        "jest-util": "30.4.1",
+        "jest-watcher": "30.4.1",
+        "jest-worker": "30.4.1",
+        "p-limit": "^3.1.0",
+        "source-map-support": "0.5.13"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-runtime": {
+      "version": "30.4.2",
+      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-30.4.2.tgz",
+      "integrity": "sha512-3/5e8iPz2k/VLqlr8DgTftYyLUv8Su3FkCAO2/Od81UsUTpSxOrS6O5x5KkoQwyUjmpYyDJKeyAvg2T2nvpNkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/environment": "30.4.1",
+        "@jest/fake-timers": "30.4.1",
+        "@jest/globals": "30.4.1",
+        "@jest/source-map": "30.0.1",
+        "@jest/test-result": "30.4.1",
+        "@jest/transform": "30.4.1",
+        "@jest/types": "30.4.1",
+        "@types/node": "*",
+        "chalk": "^4.1.2",
+        "cjs-module-lexer": "^2.1.0",
+        "collect-v8-coverage": "^1.0.2",
+        "glob": "^10.5.0",
+        "graceful-fs": "^4.2.11",
+        "jest-haste-map": "30.4.1",
+        "jest-message-util": "30.4.1",
+        "jest-mock": "30.4.1",
+        "jest-regex-util": "30.4.0",
+        "jest-resolve": "30.4.1",
+        "jest-snapshot": "30.4.1",
+        "jest-util": "30.4.1",
+        "slash": "^3.0.0",
+        "strip-bom": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-snapshot": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-30.4.1.tgz",
+      "integrity": "sha512-tEOkkfOMppUyeiHwjZswOQ3lcnoTnws/q5FnGIaeIh/jmoU0ZlgMYRR8sTlTj+nNGCoJ0RDq6SfxGxCsyMTPmw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.27.4",
+        "@babel/generator": "^7.27.5",
+        "@babel/plugin-syntax-jsx": "^7.27.1",
+        "@babel/plugin-syntax-typescript": "^7.27.1",
+        "@babel/types": "^7.27.3",
+        "@jest/expect-utils": "30.4.1",
+        "@jest/get-type": "30.1.0",
+        "@jest/snapshot-utils": "30.4.1",
+        "@jest/transform": "30.4.1",
+        "@jest/types": "30.4.1",
+        "babel-preset-current-node-syntax": "^1.2.0",
+        "chalk": "^4.1.2",
+        "expect": "30.4.1",
+        "graceful-fs": "^4.2.11",
+        "jest-diff": "30.4.1",
+        "jest-matcher-utils": "30.4.1",
+        "jest-message-util": "30.4.1",
+        "jest-util": "30.4.1",
+        "pretty-format": "30.4.1",
+        "semver": "^7.7.2",
+        "synckit": "^0.11.8"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-util": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-30.4.1.tgz",
+      "integrity": "sha512-vjQb1sACEiv13DKJMDToJpzVW0joCsIQrmbg0fi7CyOOt+g9jTuQl2A216pWRBYhOVt53XbL/2LbMKg1BECWOw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "30.4.1",
+        "@types/node": "*",
+        "chalk": "^4.1.2",
+        "ci-info": "^4.2.0",
+        "graceful-fs": "^4.2.11",
+        "picomatch": "^4.0.3"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/is-typed-array": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
-      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+    "node_modules/jest-validate": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-30.4.1.tgz",
+      "integrity": "sha512-PDWi4SOwLnwqNDfHZjOcsEFyZ4fc/2W2gVL3DEoyqnB6jCQMLRtfBong8s6omIw3lI0HWOus12xfnFmQtjW3fw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "which-typed-array": "^1.1.16"
+        "@jest/get-type": "30.1.0",
+        "@jest/types": "30.4.1",
+        "camelcase": "^6.3.0",
+        "chalk": "^4.1.2",
+        "leven": "^3.1.0",
+        "pretty-format": "30.4.1"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/is-weakmap": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
-      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+    "node_modules/jest-validate/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=10"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/is-weakref": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
-      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+    "node_modules/jest-watcher": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-30.4.1.tgz",
+      "integrity": "sha512-/l9UonmvCwjHH7d2h3iAwIloLc1H0S8mJZ/LNK3i86hqwPAz8otUJjP9MfYtz9Tt77Su5FD2xGjZn8d31IZHlw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.3"
+        "@jest/test-result": "30.4.1",
+        "@jest/types": "30.4.1",
+        "@types/node": "*",
+        "ansi-escapes": "^4.3.2",
+        "chalk": "^4.1.2",
+        "emittery": "^0.13.1",
+        "jest-util": "30.4.1",
+        "string-length": "^4.0.2"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/is-weakset": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
-      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+    "node_modules/jest-worker": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-30.4.1.tgz",
+      "integrity": "sha512-SHynN/q/QD++iNyvMdy+WMmbCGk8jIsNcRxycXbWubSOhvo6T+j2afcfUSl+3hYsiBebOTo0cT7c2H7CXugu1g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.3",
-        "get-intrinsic": "^1.2.6"
+        "@types/node": "*",
+        "@ungap/structured-clone": "^1.3.0",
+        "jest-util": "30.4.1",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.1.1"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/isarray": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "license": "ISC"
-    },
-    "node_modules/iterator.prototype": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
-      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+    "node_modules/jest-worker/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "define-data-property": "^1.1.4",
-        "es-object-atoms": "^1.0.0",
-        "get-intrinsic": "^1.2.6",
-        "get-proto": "^1.0.0",
-        "has-symbols": "^1.1.0",
-        "set-function-name": "^2.0.2"
+        "has-flag": "^4.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
+        "node": ">=10"
       },
       "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
     "node_modules/jiti": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
-      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
-      "dev": true,
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "devOptional": true,
       "license": "MIT",
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/jose": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.2.3.tgz",
+      "integrity": "sha512-YYVDInQKFJfR/xa3ojUTl8c2KoTwiL1R5Wg9YCydwH0x0B9grbzlg5HC7mMjCtUJjbQ/YnGEZIhI5tCgfTb4Hw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
+    "node_modules/joycon": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/joycon/-/joycon-3.1.1.tgz",
+      "integrity": "sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5939,10 +9495,20 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.2.0.tgz",
+      "integrity": "sha512-ePWsvanv0DWuDRsW8dnt+R4jQ31SCRCQ7hhNcPXZPsoBZiemuZNYGf7adZdqX2D86j6rvKp3RpCxVTSb8WQlOw==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
@@ -5951,6 +9517,83 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsdom": {
+      "version": "26.1.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-26.1.0.tgz",
+      "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssstyle": "^4.2.1",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.5.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.16",
+        "parse5": "^7.2.1",
+        "rrweb-cssom": "^0.8.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^5.1.1",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.1.1",
+        "ws": "^8.18.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/jsdom/node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -5958,6 +9601,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-to-ts": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/json-schema-to-ts/-/json-schema-to-ts-3.1.1.tgz",
+      "integrity": "sha512-+DWg8jCJG2TEnpy7kOm/7/AxaYoaRbjVB4LFZLySZlWn8exGs3A4OLJR966cVvU26N7X9TWxl+Jsw7dzAqKT6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "ts-algebra": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -5973,16 +9636,33 @@
       "license": "MIT"
     },
     "node_modules/json5": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "minimist": "^1.2.0"
-      },
       "bin": {
         "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jspdf": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-4.2.1.tgz",
+      "integrity": "sha512-YyAXyvnmjTbR4bHQRLzex3CuINCDlQnBqoSYyjJwTP2x9jDLuKDzy7aKUl0hgx3uhcl7xzg32agn5vlie6HIlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "fast-png": "^6.2.0",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.3.1",
+        "html2canvas": "^1.0.0-rc.5"
       }
     },
     "node_modules/jsx-ast-utils": {
@@ -6028,7 +9708,26 @@
         "language-subtag-registry": "^0.3.20"
       },
       "engines": {
-        "node": ">=0.10"
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/launder": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/launder/-/launder-1.7.1.tgz",
+      "integrity": "sha512-mU6WRz5EusL9ZZuiZ5SO4Y6C0P9PAUR9iwdb6bzj4KDihm28DiHFw+/yk9DBH4f+Pv1wuzQ4e2jV3oQ7mkIqvw==",
+      "license": "MIT",
+      "dependencies": {
+        "dayjs": "^1.11.7"
+      }
+    },
+    "node_modules/leven": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
+      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
       }
     },
     "node_modules/levn": {
@@ -6046,9 +9745,9 @@
       }
     },
     "node_modules/lightningcss": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
-      "integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
       "dev": true,
       "license": "MPL-2.0",
       "dependencies": {
@@ -6062,22 +9761,44 @@
         "url": "https://opencollective.com/parcel"
       },
       "optionalDependencies": {
-        "lightningcss-darwin-arm64": "1.29.2",
-        "lightningcss-darwin-x64": "1.29.2",
-        "lightningcss-freebsd-x64": "1.29.2",
-        "lightningcss-linux-arm-gnueabihf": "1.29.2",
-        "lightningcss-linux-arm64-gnu": "1.29.2",
-        "lightningcss-linux-arm64-musl": "1.29.2",
-        "lightningcss-linux-x64-gnu": "1.29.2",
-        "lightningcss-linux-x64-musl": "1.29.2",
-        "lightningcss-win32-arm64-msvc": "1.29.2",
-        "lightningcss-win32-x64-msvc": "1.29.2"
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
     "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz",
-      "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
       "cpu": [
         "arm64"
       ],
@@ -6096,9 +9817,9 @@
       }
     },
     "node_modules/lightningcss-darwin-x64": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz",
-      "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
       "cpu": [
         "x64"
       ],
@@ -6117,9 +9838,9 @@
       }
     },
     "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz",
-      "integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
       "cpu": [
         "x64"
       ],
@@ -6138,9 +9859,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz",
-      "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
       "cpu": [
         "arm"
       ],
@@ -6159,9 +9880,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz",
-      "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
       "cpu": [
         "arm64"
       ],
@@ -6180,9 +9901,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz",
-      "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
       "cpu": [
         "arm64"
       ],
@@ -6201,9 +9922,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz",
-      "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
       "cpu": [
         "x64"
       ],
@@ -6222,9 +9943,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz",
-      "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
       "cpu": [
         "x64"
       ],
@@ -6243,9 +9964,9 @@
       }
     },
     "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz",
-      "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
       "cpu": [
         "arm64"
       ],
@@ -6264,9 +9985,9 @@
       }
     },
     "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz",
-      "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
       "cpu": [
         "x64"
       ],
@@ -6318,22 +10039,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/lodash.castarray": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
-      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.isplainobject": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "license": "MIT"
-    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/longest-streak": {
@@ -6358,32 +10068,16 @@
         "loose-envify": "cli.js"
       }
     },
-    "node_modules/lowlight": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.9.2.tgz",
-      "integrity": "sha512-Ek18ElVCf/wF/jEm1b92gTnigh94CtBNWiZ2ad+vTgW7cTmQxUY3I98BjHK68gZAJEWmybGBZgx9qv3QxLQB/Q==",
-      "license": "MIT",
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "fault": "^1.0.2",
-        "highlight.js": "~9.12.0"
-      }
-    },
-    "node_modules/lowlight/node_modules/highlight.js": {
-      "version": "9.12.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
-      "integrity": "sha512-qNnYpBDO/FQwYVur1+sQBQw7v0cxso1nOYLklqWh6af8ROwwTVoII5+kf/BVa8354WL4ad6rURHYGUXCbD9mMg==",
-      "deprecated": "Version no longer supported. Upgrade to @latest",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": "*"
+        "yallist": "^3.0.2"
       }
     },
-    "node_modules/lru-cache": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "license": "ISC"
-    },
     "node_modules/lucide-react": {
       "version": "0.511.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.511.0.tgz",
@@ -6393,6 +10087,53 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
+      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/makeerror": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
+      "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tmpl": "1.0.5"
+      }
+    },
     "node_modules/markdown-table": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
@@ -6403,6 +10144,19 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/marked": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
+      "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -6441,9 +10195,9 @@
       }
     },
     "node_modules/mdast-util-from-markdown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz",
-      "integrity": "sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.3.tgz",
+      "integrity": "sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==",
       "license": "MIT",
       "dependencies": {
         "@types/mdast": "^4.0.0",
@@ -6464,12 +10218,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/mdast-util-from-markdown/node_modules/@types/unist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
-      "license": "MIT"
-    },
     "node_modules/mdast-util-gfm": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
@@ -6589,15 +10337,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/mdast-util-mdx-expression/node_modules/@types/hast": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
-      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "*"
-      }
-    },
     "node_modules/mdast-util-mdx-jsx": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
@@ -6622,110 +10361,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/mdast-util-mdx-jsx/node_modules/@types/hast": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
-      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "*"
-      }
-    },
-    "node_modules/mdast-util-mdx-jsx/node_modules/@types/unist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
-      "license": "MIT"
-    },
-    "node_modules/mdast-util-mdx-jsx/node_modules/character-entities-legacy": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
-      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/mdast-util-mdx-jsx/node_modules/character-reference-invalid": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
-      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/mdast-util-mdx-jsx/node_modules/is-alphabetical": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
-      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/mdast-util-mdx-jsx/node_modules/is-alphanumerical": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
-      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
-      "license": "MIT",
-      "dependencies": {
-        "is-alphabetical": "^2.0.0",
-        "is-decimal": "^2.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/mdast-util-mdx-jsx/node_modules/is-decimal": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
-      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/mdast-util-mdx-jsx/node_modules/is-hexadecimal": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
-      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/mdast-util-mdx-jsx/node_modules/parse-entities": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
-      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^2.0.0",
-        "character-entities-legacy": "^3.0.0",
-        "character-reference-invalid": "^2.0.0",
-        "decode-named-character-reference": "^1.0.0",
-        "is-alphanumerical": "^2.0.0",
-        "is-decimal": "^2.0.0",
-        "is-hexadecimal": "^2.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/mdast-util-mdx-jsx/node_modules/parse-entities/node_modules/@types/unist": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
-      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
-      "license": "MIT"
-    },
     "node_modules/mdast-util-mdxjs-esm": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
@@ -6744,15 +10379,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/mdast-util-mdxjs-esm/node_modules/@types/hast": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
-      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "*"
-      }
-    },
     "node_modules/mdast-util-phrasing": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
@@ -6768,9 +10394,9 @@
       }
     },
     "node_modules/mdast-util-to-hast": {
-      "version": "13.2.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
-      "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
       "license": "MIT",
       "dependencies": {
         "@types/hast": "^3.0.0",
@@ -6788,15 +10414,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/mdast-util-to-hast/node_modules/@types/hast": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
-      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "*"
-      }
-    },
     "node_modules/mdast-util-to-markdown": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
@@ -6818,12 +10435,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/mdast-util-to-markdown/node_modules/@types/unist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
-      "license": "MIT"
-    },
     "node_modules/mdast-util-to-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
@@ -6838,9 +10449,9 @@
       }
     },
     "node_modules/memoize": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/memoize/-/memoize-10.1.0.tgz",
-      "integrity": "sha512-MMbFhJzh4Jlg/poq1si90XRlTZRDHVqdlz2mPyGJ6kqMpyHUyVpDd5gpFAvVehW64+RA1eKE9Yt8aSLY7w2Kgg==",
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/memoize/-/memoize-10.2.0.tgz",
+      "integrity": "sha512-DeC6b7QBrZsRs3Y02A6A7lQyzFbsQbqgjI6UW0GigGWV+u1s25TycMr0XHZE4cJce7rY/vyw2ctMQqfDkIhUEA==",
       "license": "MIT",
       "dependencies": {
         "mimic-function": "^5.0.1"
@@ -6852,6 +10463,13 @@
         "url": "https://github.com/sindresorhus/memoize?sponsor=1"
       }
     },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -7437,6 +11055,18 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -7458,6 +11088,16 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/mimic-function": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
@@ -7470,10 +11110,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -7493,43 +11143,61 @@
       }
     },
     "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "license": "ISC",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
+      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
     },
     "node_modules/monaco-editor": {
-      "version": "0.52.2",
-      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz",
-      "integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==",
+      "version": "0.55.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
+      "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
       "license": "MIT",
-      "peer": true
+      "peer": true,
+      "dependencies": {
+        "dompurify": "3.2.7",
+        "marked": "14.0.0"
+      }
+    },
+    "node_modules/monaco-editor/node_modules/dompurify": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
+      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "peer": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
     },
     "node_modules/monaco-themes": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/monaco-themes/-/monaco-themes-0.4.5.tgz",
-      "integrity": "sha512-SqFGy2S1/dVL7ayWV09OTSKtdBDAsfsON56hfvcJgmCSfXpBgWNn3Qb5h7TmJIUoK4PfPHGvQsw1s8IgQo5ftw==",
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/monaco-themes/-/monaco-themes-0.4.8.tgz",
+      "integrity": "sha512-QEDCwl5XUMPPpsg8TVNfi1VKIDtMsMTJAhUfxHSZ6hzkEfZgfTK2hicwyzkDKhAhrpMkHkwMtG13ynvdztJesw==",
       "license": "MIT",
       "dependencies": {
         "fast-plist": "^0.1.3"
+      },
+      "engines": {
+        "node": ">=22.0.0"
       }
     },
     "node_modules/motion-dom": {
-      "version": "12.9.4",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.9.4.tgz",
-      "integrity": "sha512-25TWkQPj5I18m+qVjXGtCsxboY11DaRC5HMjd29tHKExazW4Zf4XtAagBdLpyKsVuAxEQ6cx5/E4AB21PFpLnQ==",
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.40.0.tgz",
+      "integrity": "sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==",
       "license": "MIT",
       "dependencies": {
-        "motion-utils": "^12.9.4"
+        "motion-utils": "^12.39.0"
       }
     },
     "node_modules/motion-utils": {
-      "version": "12.9.4",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.9.4.tgz",
-      "integrity": "sha512-BW3I65zeM76CMsfh3kHid9ansEJk9Qvl+K5cu4DVHKGsI52n76OJ4z2CUJUV+Mn3uEP9k1JJA3tClG0ggSrRcg==",
+      "version": "12.39.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz",
+      "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==",
       "license": "MIT"
     },
     "node_modules/ms": {
@@ -7550,9 +11218,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
       "funding": [
         {
           "type": "github",
@@ -7567,6 +11235,22 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/napi-postinstall": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.4.tgz",
+      "integrity": "sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "napi-postinstall": "lib/cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/napi-postinstall"
+      }
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -7575,14 +11259,14 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.1.6.tgz",
-      "integrity": "sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==",
+      "version": "16.2.6",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.2.6.tgz",
+      "integrity": "sha512-qOVgKJg1+At15NpeUP+eJgCHvTCgXsogweq87Ri/Ix7PkqQHg4sdaXmSFqKlgaIXE4kW0g25LE68W87UANlHtw==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "16.1.6",
+        "@next/env": "16.2.6",
         "@swc/helpers": "0.5.15",
-        "baseline-browser-mapping": "^2.8.3",
+        "baseline-browser-mapping": "^2.9.19",
         "caniuse-lite": "^1.0.30001579",
         "postcss": "8.4.31",
         "styled-jsx": "5.1.6"
@@ -7594,15 +11278,15 @@
         "node": ">=20.9.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.1.6",
-        "@next/swc-darwin-x64": "16.1.6",
-        "@next/swc-linux-arm64-gnu": "16.1.6",
-        "@next/swc-linux-arm64-musl": "16.1.6",
-        "@next/swc-linux-x64-gnu": "16.1.6",
-        "@next/swc-linux-x64-musl": "16.1.6",
-        "@next/swc-win32-arm64-msvc": "16.1.6",
-        "@next/swc-win32-x64-msvc": "16.1.6",
-        "sharp": "^0.34.4"
+        "@next/swc-darwin-arm64": "16.2.6",
+        "@next/swc-darwin-x64": "16.2.6",
+        "@next/swc-linux-arm64-gnu": "16.2.6",
+        "@next/swc-linux-arm64-musl": "16.2.6",
+        "@next/swc-linux-x64-gnu": "16.2.6",
+        "@next/swc-linux-x64-musl": "16.2.6",
+        "@next/swc-win32-arm64-msvc": "16.2.6",
+        "@next/swc-win32-x64-msvc": "16.2.6",
+        "sharp": "^0.34.5"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -7718,6 +11402,35 @@
         "node": ">=10.5.0"
       }
     },
+    "node_modules/node-exports-info": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/node-exports-info/-/node-exports-info-1.6.0.tgz",
+      "integrity": "sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array.prototype.flatmap": "^1.3.3",
+        "es-errors": "^1.3.0",
+        "object.entries": "^1.1.9",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/node-exports-info/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
@@ -7738,17 +11451,60 @@
         }
       }
     },
-    "node_modules/node-releases": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
-      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+    "node_modules/node-fetch/node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
+    "node_modules/node-fetch/node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/node-fetch/node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "node_modules/node-gyp-build": {
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
+      "integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
+      "license": "MIT",
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
+    "node_modules/node-int64": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/node-releases": {
+      "version": "2.0.47",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.47.tgz",
+      "integrity": "sha512-Uzmd6LXpouKo8EUK68IjH4+E01w/hXyV3R3g/geCJo+rXLNfh1xucB+LOzYEOQPSiUK3h/xZf0cQGcSsmyL2Og==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/nodemailer": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.10.0.tgz",
-      "integrity": "sha512-SQ3wZCExjeSatLE/HBaXS5vqUOQk6GtBdIIKxiFdmm01mOQZX/POJkO3SUX1wDiYcwUOJwT23scFSC9fY2H8IA==",
+      "version": "8.0.11",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-8.0.11.tgz",
+      "integrity": "sha512-nrO/pDAUKl+wXX+lx16tDLbnm0fW6sK/x8mgohaCpg+CdCEl482bD4tCuAZk2DyliruiNTIZxRCoWkDqJEnAiA==",
       "license": "MIT-0",
       "engines": {
         "node": ">=6.0.0"
@@ -7763,16 +11519,26 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
+    "node_modules/nwsapi": {
+      "version": "2.2.24",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.24.tgz",
+      "integrity": "sha512-7YRhZ3jS45LwmSCT4b2sVFHt/WuovaktDU07QrtOBY2PXskss5a9jfmR9jptyumwXST+rFjrmppMY1KT/yn35A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -7904,10 +11670,45 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/on-exit-leak-free": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/on-exit-leak-free/-/on-exit-leak-free-2.1.2.tgz",
+      "integrity": "sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/openai": {
-      "version": "4.103.0",
-      "resolved": "https://registry.npmjs.org/openai/-/openai-4.103.0.tgz",
-      "integrity": "sha512-eWcz9kdurkGOFDtd5ySS5y251H2uBgq9+1a2lTBnjMMzlexJ40Am5t6Mu76SSE87VvitPa0dkIAp75F+dZVC0g==",
+      "version": "4.104.0",
+      "resolved": "https://registry.npmjs.org/openai/-/openai-4.104.0.tgz",
+      "integrity": "sha512-p99EFNsA/yX6UhVO93f5kJsDRLAg+CTA2RBqdHK4RtK8u5IJw32Hyb2dTGKbnnFmnuoBv5r7Z2CURI9sGZpSuA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@types/node": "^18.11.18",
@@ -7935,9 +11736,9 @@
       }
     },
     "node_modules/openai/node_modules/@types/node": {
-      "version": "18.19.103",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.103.tgz",
-      "integrity": "sha512-hHTHp+sEz6SxFsp+SA+Tqrua3AbmlAw+Y//aEwdHrdZkYVRWdvWD3y5uPZ0flYOkgskaFWqZ/YGFm3FaFQ0pRw==",
+      "version": "18.19.130",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.130.tgz",
+      "integrity": "sha512-GRaXQx6jGfL8sKfaIDD6OupbIHBr9jv7Jnaml9tB7l4v068PAOXqfcujMMo5PhbIs6ggR1XODELqahT2R8v0fg==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -8017,12 +11818,29 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
       "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -8036,12 +11854,69 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/parse-srcset": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
       "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
       "license": "MIT"
     },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -8052,71 +11927,288 @@
         "node": ">=8"
       }
     },
-    "node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pino": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/pino/-/pino-10.3.1.tgz",
+      "integrity": "sha512-r34yH/GlQpKZbU1BvFFqOjhISRo1MNx1tWYsYvmj6KIRHSPMT2+yHOEb1SG6NMvRoHRF0a07kCOox/9yakl1vg==",
+      "license": "MIT",
+      "dependencies": {
+        "@pinojs/redact": "^0.4.0",
+        "atomic-sleep": "^1.0.0",
+        "on-exit-leak-free": "^2.1.0",
+        "pino-abstract-transport": "^3.0.0",
+        "pino-std-serializers": "^7.0.0",
+        "process-warning": "^5.0.0",
+        "quick-format-unescaped": "^4.0.3",
+        "real-require": "^0.2.0",
+        "safe-stable-stringify": "^2.3.1",
+        "sonic-boom": "^4.0.1",
+        "thread-stream": "^4.0.0"
+      },
+      "bin": {
+        "pino": "bin.js"
+      }
+    },
+    "node_modules/pino-abstract-transport": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pino-abstract-transport/-/pino-abstract-transport-3.0.0.tgz",
+      "integrity": "sha512-wlfUczU+n7Hy/Ha5j9a/gZNy7We5+cXp8YL+X+PG8S0KXxw7n/JXA3c46Y0zQznIJ83URJiwy7Lh56WLokNuxg==",
+      "license": "MIT",
+      "dependencies": {
+        "split2": "^4.0.0"
+      }
+    },
+    "node_modules/pino-pretty": {
+      "version": "13.1.3",
+      "resolved": "https://registry.npmjs.org/pino-pretty/-/pino-pretty-13.1.3.tgz",
+      "integrity": "sha512-ttXRkkOz6WWC95KeY9+xxWL6AtImwbyMHrL1mSwqwW9u+vLp/WIElvHvCSDg0xO/Dzrggz1zv3rN5ovTRVowKg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "colorette": "^2.0.7",
+        "dateformat": "^4.6.3",
+        "fast-copy": "^4.0.0",
+        "fast-safe-stringify": "^2.1.1",
+        "help-me": "^5.0.0",
+        "joycon": "^3.1.1",
+        "minimist": "^1.2.6",
+        "on-exit-leak-free": "^2.1.0",
+        "pino-abstract-transport": "^3.0.0",
+        "pump": "^3.0.0",
+        "secure-json-parse": "^4.0.0",
+        "sonic-boom": "^4.0.1",
+        "strip-json-comments": "^5.0.2"
+      },
+      "bin": {
+        "pino-pretty": "bin.js"
+      }
+    },
+    "node_modules/pino-pretty/node_modules/strip-json-comments": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-5.0.3.tgz",
+      "integrity": "sha512-1tB5mhVo7U+ETBKNf92xT4hrQa3pm0MZ0PQvuDnWgAAGHDsfp4lPSpiS6psrSiet87wyGPh9ft6wmhOMQ0hDiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pino-std-serializers": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/pino-std-serializers/-/pino-std-serializers-7.1.0.tgz",
+      "integrity": "sha512-BndPH67/JxGExRgiX1dX0w1FvZck5Wa4aal9198SrRhZjH3GxKQUKIBnYJTdj2HDN3UQAS06HlfcSbQj2OHmaw==",
+      "license": "MIT"
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "license": "MIT"
+    "node_modules/pkg-dir/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "license": "BlueOak-1.0.0",
+    "node_modules/pkg-dir/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+        "p-try": "^2.0.0"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.18"
+        "node": ">=6"
       },
       "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "license": "ISC"
-    },
-    "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+    "node_modules/pkg-dir/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
       "engines": {
-        "node": ">=8.6"
+        "node": ">=8"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+      "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.60.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
       }
     },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "license": "MIT",
+    "node_modules/playwright-core": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+      "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=18"
       }
     },
-    "node_modules/pirates": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
-      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">= 6"
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
     "node_modules/possible-typed-array-names": {
@@ -8130,9 +12222,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.3",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
-      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "version": "8.5.15",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
       "funding": [
         {
           "type": "opencollective",
@@ -8149,7 +12241,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.8",
+        "nanoid": "^3.3.12",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -8174,10 +12266,41 @@
         "postcss": "^8.0.0"
       }
     },
+    "node_modules/postcss-import/node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
         "camelcase-css": "^2.0.1"
@@ -8185,18 +12308,14 @@
       "engines": {
         "node": "^12 || ^14 || >= 16"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
       "peerDependencies": {
         "postcss": "^8.4.21"
       }
     },
     "node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
       "funding": [
         {
           "type": "opencollective",
@@ -8209,21 +12328,28 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
+        "lilconfig": "^3.1.1"
       },
       "engines": {
-        "node": ">= 14"
+        "node": ">= 18"
       },
       "peerDependencies": {
+        "jiti": ">=1.21.0",
         "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
       },
       "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
         "postcss": {
           "optional": true
         },
-        "ts-node": {
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
           "optional": true
         }
       }
@@ -8253,10 +12379,23 @@
         "postcss": "^8.2.14"
       }
     },
+    "node_modules/postcss-nested/node_modules/postcss-selector-parser": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.4.tgz",
+      "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
       "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -8282,6 +12421,35 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/pretty-format": {
+      "version": "30.4.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.4.1.tgz",
+      "integrity": "sha512-K6KiKMHTL4jjX4u3Kir2EW07nRfcqVTXIImx50wbjHQTcZPgg+gjVeNTIT3l3L1Rd4UefxfogquC9J37SoFyyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/schemas": "30.4.1",
+        "ansi-styles": "^5.2.0",
+        "react-is-18": "npm:react-is@^18.3.1",
+        "react-is-19": "npm:react-is@^19.2.5"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/prism-react-renderer": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.4.1.tgz",
@@ -8295,6 +12463,22 @@
         "react": ">=16.0.0"
       }
     },
+    "node_modules/process-warning": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-5.0.0.tgz",
+      "integrity": "sha512-a39t9ApHNx2L4+HBnQKqxxHNs1r7KF+Intd8Q/g1bUh6q0WIp9voPXJ/x0j+ZL45KF1pJd9+q2jLIRMfvEshkA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -8306,12 +12490,42 @@
         "react-is": "^16.13.1"
       }
     },
-    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/property-information": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.2.0.tgz",
+      "integrity": "sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/pump": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.4.tgz",
+      "integrity": "sha512-VS7sjc6KR7e1ukRFhQSY5LM2uBWAUPiOPa/A3mkKmiMwSmRFUITt0xuj+/lesgnCv+dPIEYlkzrcyXgquIHMcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -8322,6 +12536,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/pure-rand": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-7.0.1.tgz",
+      "integrity": "sha512-oTUZM/NAZS8p7ANR3SHh30kXB+zK2r2BPcEn/awJIbOvq82WoMN4p62AWWp3Hhw50G0xMsw1mhIBLqHw64EcNQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/dubzzz"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fast-check"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -8342,19 +12573,35 @@
       ],
       "license": "MIT"
     },
+    "node_modules/quick-format-unescaped": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz",
+      "integrity": "sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==",
+      "license": "MIT"
+    },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/react": {
-      "version": "19.2.4",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
-      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-calendar": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/react-calendar/-/react-calendar-6.0.0.tgz",
-      "integrity": "sha512-6wqaki3Us0DNDjZDr0DYIzhSFprNoy4FdPT9Pjy5aD2hJJVjtJwmdMT9VmrTUo949nlk35BOxehThxX62RkuRQ==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/react-calendar/-/react-calendar-6.0.1.tgz",
+      "integrity": "sha512-b8E61W7qk/He9XEbtbQBjnALPuGmxeglsotgZyAShqN1vHMzXWjl4g7WI5tRF93RE4Wbo0c0BKN3vTQhrBojpg==",
       "license": "MIT",
       "dependencies": {
         "@wojtekmaj/date-utils": "^2.0.2",
@@ -8377,15 +12624,15 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "19.2.4",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
-      "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz",
+      "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==",
       "license": "MIT",
       "dependencies": {
         "scheduler": "^0.27.0"
       },
       "peerDependencies": {
-        "react": "^19.2.4"
+        "react": "^19.2.7"
       }
     },
     "node_modules/react-easy-swipe": {
@@ -8401,9 +12648,9 @@
       }
     },
     "node_modules/react-hot-toast": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.5.2.tgz",
-      "integrity": "sha512-Tun3BbCxzmXXM7C+NI4qiv6lT0uwGh4oAfeJyNOjYUejTsm35mK9iCaYLGv8cBz9L5YxZLx/2ii7zsIwPtPUdw==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.6.0.tgz",
+      "integrity": "sha512-bH+2EBMZ4sdyou/DPrfgIouFpcRLCJ+HoCA32UoAYHn6T3Ur5yfcDCeSr5mwldl6pFOsiocmrXMuoCJ1vV8bWg==",
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.1.3",
@@ -8418,18 +12665,33 @@
       }
     },
     "node_modules/react-icons": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
-      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.6.0.tgz",
+      "integrity": "sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==",
       "license": "MIT",
       "peerDependencies": {
         "react": "*"
       }
     },
     "node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.7.tgz",
+      "integrity": "sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A=="
+    },
+    "node_modules/react-is-18": {
+      "name": "react-is",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/react-is-19": {
+      "name": "react-is",
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.7.tgz",
+      "integrity": "sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/react-markdown": {
@@ -8459,19 +12721,10 @@
         "react": ">=18"
       }
     },
-    "node_modules/react-markdown/node_modules/@types/hast": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
-      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "*"
-      }
-    },
     "node_modules/react-redux": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
-      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
+      "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
       "license": "MIT",
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
@@ -8499,70 +12752,21 @@
       "dependencies": {
         "classnames": "^2.2.5",
         "prop-types": "^15.5.8",
-        "react-easy-swipe": "^0.0.21"
-      }
-    },
-    "node_modules/react-router": {
-      "version": "7.5.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.5.3.tgz",
-      "integrity": "sha512-3iUDM4/fZCQ89SXlDa+Ph3MevBrozBAI655OAfWQlTm9nBR0IKlrmNwFow5lPHttbwvITZfkeeeZFP6zt3F7pw==",
-      "license": "MIT",
-      "dependencies": {
-        "cookie": "^1.0.1",
-        "set-cookie-parser": "^2.6.0",
-        "turbo-stream": "2.4.0"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-router-dom": {
-      "version": "7.5.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.5.3.tgz",
-      "integrity": "sha512-cK0jSaTyW4jV9SRKAItMIQfWZ/D6WEZafgHuuCb9g+SjhLolY78qc+De4w/Cz9ybjvLzShAmaIMEXt8iF1Cm+A==",
-      "license": "MIT",
-      "dependencies": {
-        "react-router": "7.5.3"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
+        "react-easy-swipe": "^0.0.21"
       }
     },
-    "node_modules/react-syntax-highlighter": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-5.8.0.tgz",
-      "integrity": "sha512-+FolT9NhFBqE4SsZDelSzsYJJS/JCnQqo4+GxLrFPoML548uvr8f4Eh5nnd5o6ERKFW7ryiygOX9SPnxdnlpkg==",
+    "node_modules/react-zoom-pan-pinch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-4.0.3.tgz",
+      "integrity": "sha512-N2Hi6L78fFmhRra+ORpFSW7WST5x6kxpOPplIvtB0b7b+U2anpo1z1wLgaWRPS2kUSqcraRG+JgBCIlDJnqqAg==",
       "license": "MIT",
-      "dependencies": {
-        "babel-runtime": "^6.18.0",
-        "highlight.js": "~9.12.0",
-        "lowlight": "~1.9.1"
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
       },
       "peerDependencies": {
-        "react": ">= 0.14.0"
-      }
-    },
-    "node_modules/react-syntax-highlighter/node_modules/highlight.js": {
-      "version": "9.12.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
-      "integrity": "sha512-qNnYpBDO/FQwYVur1+sQBQw7v0cxso1nOYLklqWh6af8ROwwTVoII5+kf/BVa8354WL4ad6rURHYGUXCbD9mMg==",
-      "deprecated": "Version no longer supported. Upgrade to @latest",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": "*"
+        "react": "*",
+        "react-dom": "*"
       }
     },
     "node_modules/read-cache": {
@@ -8586,20 +12790,44 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/readdirp/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/real-require": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/real-require/-/real-require-0.2.0.tgz",
+      "integrity": "sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
     "node_modules/recharts": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.1.0.tgz",
-      "integrity": "sha512-NqAqQcGBmLrfDs2mHX/bz8jJCQtG2FeXfE0GqpZmIuXIjkpIwj8sd9ad0WyvKiBKPd8ZgNG0hL85c8sFDwascw==",
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.9.0.tgz",
+      "integrity": "sha512-dCEcE9y20c8H2tkVeByrAXhhnBJk6/QLbxKmn+dJUptOfc5NMjwRh1jo0vZPRLD+5dMrHrP+hPEsfbGBMfnf5Q==",
       "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
       "dependencies": {
-        "@reduxjs/toolkit": "1.x.x || 2.x.x",
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
         "clsx": "^2.1.1",
         "decimal.js-light": "^2.5.1",
         "es-toolkit": "^1.39.3",
         "eventemitter3": "^5.0.1",
         "immer": "^10.1.1",
         "react-redux": "8.x.x || 9.x.x",
-        "reselect": "5.1.1",
+        "reselect": "5.2.0",
         "tiny-invariant": "^1.3.3",
         "use-sync-external-store": "^1.2.2",
         "victory-vendor": "^37.0.2"
@@ -8613,6 +12841,20 @@
         "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/redux": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
@@ -8652,10 +12894,11 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-      "license": "MIT"
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
@@ -8729,15 +12972,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/remark-rehype/node_modules/@types/hast": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
-      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "*"
-      }
-    },
     "node_modules/remark-stringify": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
@@ -8753,19 +12987,33 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/reselect": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
-      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.2.0.tgz",
+      "integrity": "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==",
       "license": "MIT"
     },
     "node_modules/resolve": {
-      "version": "1.22.10",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
-      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "version": "2.0.0-next.7",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.7.tgz",
+      "integrity": "sha512-tqt+NBWwyaMgw3zDsnygx4CByWjQEJHOPMdslYhppaQSJUtL/D4JO9CcBBlhPoI8lz9oJIDXkwXfhF4aWqP8xQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "is-core-module": "^2.16.0",
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.2",
+        "node-exports-info": "^1.6.0",
+        "object-keys": "^1.1.1",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -8779,6 +13027,29 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/resolve-cwd": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
+      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-cwd/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -8809,33 +13080,23 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/rspack-resolver": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/rspack-resolver/-/rspack-resolver-1.3.0.tgz",
-      "integrity": "sha512-az/PLDwa1xijNv4bAFBS8mtqqJC1Y3lVyFag4cuyIUOHq/ft5kSZlHbqYaLZLpsQtPWv4ZGDo5ycySKJzUvU/A==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/JounQin"
-      },
-      "optionalDependencies": {
-        "@unrs/rspack-resolver-binding-darwin-arm64": "1.3.0",
-        "@unrs/rspack-resolver-binding-darwin-x64": "1.3.0",
-        "@unrs/rspack-resolver-binding-freebsd-x64": "1.3.0",
-        "@unrs/rspack-resolver-binding-linux-arm-gnueabihf": "1.3.0",
-        "@unrs/rspack-resolver-binding-linux-arm-musleabihf": "1.3.0",
-        "@unrs/rspack-resolver-binding-linux-arm64-gnu": "1.3.0",
-        "@unrs/rspack-resolver-binding-linux-arm64-musl": "1.3.0",
-        "@unrs/rspack-resolver-binding-linux-ppc64-gnu": "1.3.0",
-        "@unrs/rspack-resolver-binding-linux-s390x-gnu": "1.3.0",
-        "@unrs/rspack-resolver-binding-linux-x64-gnu": "1.3.0",
-        "@unrs/rspack-resolver-binding-linux-x64-musl": "1.3.0",
-        "@unrs/rspack-resolver-binding-wasm32-wasi": "1.3.0",
-        "@unrs/rspack-resolver-binding-win32-arm64-msvc": "1.3.0",
-        "@unrs/rspack-resolver-binding-win32-ia32-msvc": "1.3.0",
-        "@unrs/rspack-resolver-binding-win32-x64-msvc": "1.3.0"
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
       }
     },
+    "node_modules/rrweb-cssom": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
+      "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -8860,15 +13121,15 @@
       }
     },
     "node_modules/safe-array-concat": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
-      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.4.tgz",
+      "integrity": "sha512-wtZlHyOje6OZTGqAoaDKxFkgRtkF9CnHAVnCHKfuj200wAgL+bSJhdsCD2l0Qx/2ekEXjPWcyKkfGb5CPboslg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.2",
-        "get-intrinsic": "^1.2.6",
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "get-intrinsic": "^1.3.0",
         "has-symbols": "^1.1.0",
         "isarray": "^2.0.5"
       },
@@ -8914,30 +13175,77 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-stable-stringify": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.5.0.tgz",
+      "integrity": "sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/sanitize-html": {
-      "version": "2.17.0",
-      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.17.0.tgz",
-      "integrity": "sha512-dLAADUSS8rBwhaevT12yCezvioCA+bmUTPH/u57xKPT8d++voeYE6HeluA/bPbQ15TwDBG2ii+QZIEmYx8VdxA==",
+      "version": "2.17.5",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.17.5.tgz",
+      "integrity": "sha512-ZmU1joGRrvoyctKIiuwUxqR6moLoU2Wk+2bMccN6f7UwhAmwYDvWziqPxRDDN2Qip62NqnIrVrT9akbL6Wretg==",
       "license": "MIT",
       "dependencies": {
         "deepmerge": "^4.2.2",
         "escape-string-regexp": "^4.0.0",
-        "htmlparser2": "^8.0.0",
+        "htmlparser2": "^10.1.0",
         "is-plain-object": "^5.0.0",
+        "launder": "^1.7.1",
         "parse-srcset": "^1.0.2",
         "postcss": "^8.3.11"
       }
     },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
       "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
       "license": "MIT"
     },
+    "node_modules/secure-json-parse": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/secure-json-parse/-/secure-json-parse-4.1.0.tgz",
+      "integrity": "sha512-l4KnYfEyqYJxDwlNVyRfO2E4NTHfMKAWdUuA8J0yve2Dz/E/PdBepY03RvyJpssIpRFwJoCD55wA+mEDs6ByWA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/semver": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
-      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.4.tgz",
+      "integrity": "sha512-rUCObTnP32Q08R2uuIrt7r9PlEonuTmtuXYcW6s5kjdlj3xbnwe+21yXptAUYcMAABLkYYTtnmzb3w3EDZfueA==",
       "devOptional": true,
       "license": "ISC",
       "bin": {
@@ -8947,12 +13255,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/set-cookie-parser": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
-      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
-      "license": "MIT"
-    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -9051,6 +13353,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -9063,21 +13366,22 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/side-channel": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
-      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
+      "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3",
-        "side-channel-list": "^1.0.0",
+        "object-inspect": "^1.13.4",
+        "side-channel-list": "^1.0.1",
         "side-channel-map": "^1.0.1",
         "side-channel-weakmap": "^1.0.2"
       },
@@ -9089,14 +13393,14 @@
       }
     },
     "node_modules/side-channel-list": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
-      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3"
+        "object-inspect": "^1.13.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9139,49 +13443,238 @@
       },
       "engines": {
         "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/socket.io-client": {
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.3.tgz",
+      "integrity": "sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1",
+        "engine.io-client": "~6.6.1",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.6.tgz",
+      "integrity": "sha512-asJqbVBDsBCJx0pTqw3WfesSY0iRX+2xzWEWzrpcH7L6fLzrhyF8WPI8UaeM4YCuDfpwA/cgsdugMsmtz8EJeg==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/sonic-boom": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-4.2.1.tgz",
+      "integrity": "sha512-w6AxtubXa2wTXAUsZMMWERrsIRAdrK0Sc+FUytWvYAhBJLyuI4llrMIC1DtlNSdI99EI86KZum2MMq3EAZlF9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "atomic-sleep": "^1.0.0"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.13",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
+      "integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/split2": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
+      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 10.x"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/stable-hash": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
+      "integrity": "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stack-utils": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
+      "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/stack-utils/node_modules/escape-string-regexp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
+    "node_modules/standardwebhooks": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/standardwebhooks/-/standardwebhooks-1.0.0.tgz",
+      "integrity": "sha512-BbHGOQK9olHPMvQNHWul6MYlrRTAOKn03rOe4A8O3CLWhNf4YHBqq2HJKKC+sfqpxiBY52pNeesD6jIiLDz8jg==",
+      "license": "MIT",
+      "dependencies": {
+        "@stablelib/base64": "^1.0.0",
+        "fast-sha256": "^1.3.0"
+      }
+    },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "license": "MIT"
+    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
-    "node_modules/signal-exit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=14"
+    "node_modules/string-length": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
+      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "char-regex": "^1.0.2",
+        "strip-ansi": "^6.0.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+      "engines": {
+        "node": ">=10"
       }
     },
-    "node_modules/source-map-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "license": "BSD-3-Clause",
+    "node_modules/string-length/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
-    "node_modules/stable-hash": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
-      "integrity": "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==",
+    "node_modules/string-length/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/state-local": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
-      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
-      "license": "MIT"
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
     },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "eastasianwidth": "^0.2.0",
@@ -9200,6 +13693,7 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -9214,6 +13708,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -9223,12 +13718,14 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/string-width-cjs/node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -9292,19 +13789,20 @@
       }
     },
     "node_modules/string.prototype.trim": {
-      "version": "1.2.10",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
-      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.11.tgz",
+      "integrity": "sha512-PwvK7BU+CMTJGYQCTZb5RWXIML92lftJLhQz1tBzgKiqGxJaMlBAa48POXaNAC2s4y8jr3EFqrkF9+44neS46w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.2",
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
         "define-data-property": "^1.1.4",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.5",
-        "es-object-atoms": "^1.0.0",
-        "has-property-descriptors": "^1.0.2"
+        "es-abstract": "^1.24.2",
+        "es-object-atoms": "^1.1.2",
+        "has-property-descriptors": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9314,16 +13812,16 @@
       }
     },
     "node_modules/string.prototype.trimend": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
-      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.10.tgz",
+      "integrity": "sha512-2+3aDAOmPTmuFwjDnmJG2ctEkQKVki7vOSqaxkv42Mowj1V6PnvuwFCRrR5lChUux1TBskPjfkeTOhqczDMxTw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.2",
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
         "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.0.0"
+        "es-object-atoms": "^1.1.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9364,23 +13862,14 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/stringify-entities/node_modules/character-entities-legacy": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
-      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ansi-regex": "^6.0.1"
+        "ansi-regex": "^6.2.2"
       },
       "engines": {
         "node": ">=12"
@@ -9394,6 +13883,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -9406,19 +13896,43 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/strip-bom": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
+      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-indent": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
       "engines": {
-        "node": ">=4"
+        "node": ">=8"
       }
     },
     "node_modules/strip-json-comments": {
@@ -9435,21 +13949,21 @@
       }
     },
     "node_modules/style-to-js": {
-      "version": "1.1.16",
-      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.16.tgz",
-      "integrity": "sha512-/Q6ld50hKYPH3d/r6nr117TZkHR0w0kGGIVfpG9N6D8NymRPM9RqCUv4pRpJ62E5DqOYx2AFpbZMyCPnjQCnOw==",
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
+      "integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==",
       "license": "MIT",
       "dependencies": {
-        "style-to-object": "1.0.8"
+        "style-to-object": "1.0.14"
       }
     },
     "node_modules/style-to-object": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.8.tgz",
-      "integrity": "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==",
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+      "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
       "license": "MIT",
       "dependencies": {
-        "inline-style-parser": "0.2.4"
+        "inline-style-parser": "0.2.7"
       }
     },
     "node_modules/styled-jsx": {
@@ -9476,17 +13990,17 @@
       }
     },
     "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
-        "glob": "^10.3.10",
         "lines-and-columns": "^1.1.6",
         "mz": "^2.7.0",
         "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
         "ts-interface-checker": "^0.1.9"
       },
       "bin": {
@@ -9522,10 +14036,43 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/synckit": {
+      "version": "0.11.13",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.13.tgz",
+      "integrity": "sha512-eNRKgb3z66Yp3D2CixVujOUvXLFUTij/zVnV8KRyvFdQwpz7I5DS8UfRkTeLzb64u+dkzDSdelE24izu+zSSUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@pkgr/core": "^0.3.6"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/synckit"
+      }
+    },
     "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
@@ -9536,7 +14083,7 @@
         "fast-glob": "^3.3.2",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
+        "jiti": "^1.21.7",
         "lilconfig": "^3.1.3",
         "micromatch": "^4.0.8",
         "normalize-path": "^3.0.0",
@@ -9545,7 +14092,7 @@
         "postcss": "^8.4.47",
         "postcss-import": "^15.1.0",
         "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
         "postcss-nested": "^6.2.0",
         "postcss-selector-parser": "^6.1.2",
         "resolve": "^1.22.8",
@@ -9596,14 +14143,98 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.4.tgz",
+      "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/tapable": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/test-exclude": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
+      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@istanbuljs/schema": "^0.1.2",
+        "glob": "^7.1.4",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/test-exclude/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
       }
     },
     "node_modules/thenify": {
@@ -9627,6 +14258,24 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/thread-stream": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/thread-stream/-/thread-stream-4.2.0.tgz",
+      "integrity": "sha512-e2zZ96wSChazBsbENf/Pcm/4swHt2cEKQ92rhUjkL9GCKiTDJIaTBenjE/m9DXi0QBmTMDkFDdOomUy20A1tDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "real-require": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/thread-stream/node_modules/real-require": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/real-require/-/real-require-1.0.0.tgz",
+      "integrity": "sha512-P4nbQYQfePJxRSmY+v/KINxVucm4NF3p3s7pJveMTtom52FR4YGltUQLB8idDXwDDWW+eYrWDFbuzUnjoWHF7g==",
+      "license": "MIT"
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -9634,14 +14283,13 @@
       "license": "MIT"
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.12",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
-      "integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
-      "dev": true,
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
       "license": "MIT",
       "dependencies": {
-        "fdir": "^6.4.3",
-        "picomatch": "^4.0.2"
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -9650,33 +14298,32 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
-    "node_modules/tinyglobby/node_modules/fdir": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
-      "integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
+    "node_modules/tldts": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.86.tgz",
+      "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
       "dev": true,
       "license": "MIT",
-      "peerDependencies": {
-        "picomatch": "^3 || ^4"
+      "dependencies": {
+        "tldts-core": "^6.1.86"
       },
-      "peerDependenciesMeta": {
-        "picomatch": {
-          "optional": true
-        }
+      "bin": {
+        "tldts": "bin/cli.js"
       }
     },
-    "node_modules/tinyglobby/node_modules/picomatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+    "node_modules/tldts-core": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
+      "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
       "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
+      "license": "MIT"
+    },
+    "node_modules/tmpl": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
+      "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
+      "dev": true,
+      "license": "BSD-3-Clause"
     },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
@@ -9690,11 +14337,31 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tough-cookie": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
+      "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^6.1.32"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/tr46": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "license": "MIT"
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.1.1.tgz",
+      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
     },
     "node_modules/trim-lines": {
       "version": "3.0.1",
@@ -9716,10 +14383,16 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/ts-algebra": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ts-algebra/-/ts-algebra-2.0.0.tgz",
+      "integrity": "sha512-FPAhNPFMrkwz76P7cdjdmiShwMynZYN6SgOujD1urY4oNm80Ou9oMdmbR45LotcKOXoy7wSmHkRFE6Mxbrhefw==",
+      "license": "MIT"
+    },
     "node_modules/ts-api-utils": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
-      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
+      "integrity": "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -9748,18 +14421,35 @@
         "strip-bom": "^3.0.0"
       }
     },
+    "node_modules/tsconfig-paths/node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/tsconfig-paths/node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
-    "node_modules/turbo-stream": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
-      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
-      "license": "ISC"
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -9773,6 +14463,29 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/typed-array-buffer": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
@@ -9831,18 +14544,18 @@
       }
     },
     "node_modules/typed-array-length": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
-      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.8.tgz",
+      "integrity": "sha512-phPGCwqr2+Qo0fwniCE8e4pKnGu/yFb5nD5Y8bf0EEeiI5GklnACYA9GFy/DrAeRrKHXvHn+1SUsOWgJp6RO+g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "is-typed-array": "^1.1.13",
-        "possible-typed-array-names": "^1.0.0",
-        "reflect.getprototypeof": "^1.0.6"
+        "call-bind": "^1.0.9",
+        "for-each": "^0.3.5",
+        "gopd": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "possible-typed-array-names": "^1.1.0",
+        "reflect.getprototypeof": "^1.0.10"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9852,9 +14565,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.8.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
-      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
       "dev": true,
       "license": "Apache-2.0",
       "peer": true,
@@ -9885,10 +14598,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/uncrypto": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/uncrypto/-/uncrypto-0.1.3.tgz",
+      "integrity": "sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==",
+      "license": "MIT"
+    },
     "node_modules/undici-types": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
-      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "version": "7.24.6",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.24.6.tgz",
+      "integrity": "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==",
       "license": "MIT"
     },
     "node_modules/unified": {
@@ -9910,16 +14629,10 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/unified/node_modules/@types/unist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
-      "license": "MIT"
-    },
     "node_modules/unist-util-is": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
-      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0"
@@ -9929,12 +14642,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/unist-util-is/node_modules/@types/unist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
-      "license": "MIT"
-    },
     "node_modules/unist-util-position": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
@@ -9948,12 +14655,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/unist-util-position/node_modules/@types/unist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
-      "license": "MIT"
-    },
     "node_modules/unist-util-stringify-position": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
@@ -9967,16 +14668,10 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/unist-util-stringify-position/node_modules/@types/unist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
-      "license": "MIT"
-    },
     "node_modules/unist-util-visit": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
-      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0",
@@ -9989,9 +14684,9 @@
       }
     },
     "node_modules/unist-util-visit-parents": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
-      "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0",
@@ -10002,22 +14697,48 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/unist-util-visit-parents/node_modules/@types/unist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
-      "license": "MIT"
-    },
-    "node_modules/unist-util-visit/node_modules/@types/unist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
-      "license": "MIT"
+    "node_modules/unrs-resolver": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.12.2.tgz",
+      "integrity": "sha512-dmlRxBJJayXjqTwC+JtF1HhJmgf3ftQ3YejFcZrf4+KKtJv0qDsK1pjqaaVjG7wJ5NJ6UVP1OqRMQ71Z4C3rxQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "napi-postinstall": "^0.3.4"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unrs-resolver"
+      },
+      "optionalDependencies": {
+        "@unrs/resolver-binding-android-arm-eabi": "1.12.2",
+        "@unrs/resolver-binding-android-arm64": "1.12.2",
+        "@unrs/resolver-binding-darwin-arm64": "1.12.2",
+        "@unrs/resolver-binding-darwin-x64": "1.12.2",
+        "@unrs/resolver-binding-freebsd-x64": "1.12.2",
+        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.12.2",
+        "@unrs/resolver-binding-linux-arm-musleabihf": "1.12.2",
+        "@unrs/resolver-binding-linux-arm64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-arm64-musl": "1.12.2",
+        "@unrs/resolver-binding-linux-loong64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-loong64-musl": "1.12.2",
+        "@unrs/resolver-binding-linux-ppc64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-riscv64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-riscv64-musl": "1.12.2",
+        "@unrs/resolver-binding-linux-s390x-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-x64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-x64-musl": "1.12.2",
+        "@unrs/resolver-binding-openharmony-arm64": "1.12.2",
+        "@unrs/resolver-binding-wasm32-wasi": "1.12.2",
+        "@unrs/resolver-binding-win32-arm64-msvc": "1.12.2",
+        "@unrs/resolver-binding-win32-ia32-msvc": "1.12.2",
+        "@unrs/resolver-binding-win32-x64-msvc": "1.12.2"
+      }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
-      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
       "dev": true,
       "funding": [
         {
@@ -10056,9 +14777,9 @@
       }
     },
     "node_modules/use-sync-external-store": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
-      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -10070,6 +14791,30 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
+    "node_modules/v8-to-istanbul": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz",
+      "integrity": "sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.12",
+        "@types/istanbul-lib-coverage": "^2.0.1",
+        "convert-source-map": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.12.0"
+      }
+    },
     "node_modules/vfile": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
@@ -10085,9 +14830,9 @@
       }
     },
     "node_modules/vfile-message": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
-      "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0",
@@ -10098,18 +14843,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/vfile-message/node_modules/@types/unist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
-      "license": "MIT"
-    },
-    "node_modules/vfile/node_modules/@types/unist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
-      "license": "MIT"
-    },
     "node_modules/victory-vendor": {
       "version": "37.3.6",
       "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
@@ -10132,6 +14865,29 @@
         "d3-timer": "^3.0.1"
       }
     },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/walker": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
+      "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "makeerror": "1.0.12"
+      }
+    },
     "node_modules/warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
@@ -10151,25 +14907,58 @@
       }
     },
     "node_modules/webidl-conversions": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "license": "BSD-2-Clause"
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
     },
     "node_modules/whatwg-url": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.2.0.tgz",
+      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.0"
+        "tr46": "^5.1.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
       }
     },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -10249,14 +15038,14 @@
       }
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.19",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
-      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
+      "version": "1.1.22",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.22.tgz",
+      "integrity": "sha512-fvO4ExWMFsqyhG3AiPAObMuY1lxaqgYcxbc49CNdWDDECOJNgQyvsOWVwbZc+qf3rzRtxojBK+CMEv0Ld5CYpw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.8",
+        "call-bind": "^1.0.9",
         "call-bound": "^1.0.4",
         "for-each": "^0.3.5",
         "get-proto": "^1.0.1",
@@ -10284,6 +15073,7 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^6.1.0",
@@ -10302,6 +15092,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
@@ -10319,6 +15110,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -10328,12 +15120,14 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/wrap-ansi-cjs/node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -10348,6 +15142,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -10357,9 +15152,10 @@
       }
     },
     "node_modules/wrap-ansi/node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -10368,10 +15164,32 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/write-file-atomic": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz",
+      "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/ws": {
-      "version": "8.18.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.2.tgz",
-      "integrity": "sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==",
+      "version": "8.21.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.0.tgz",
+      "integrity": "sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==",
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
@@ -10389,16 +15207,120 @@
         }
       }
     },
-    "node_modules/yaml": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
-      "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
       "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
       },
       "engines": {
-        "node": ">= 14"
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
     "node_modules/yocto-queue": {
diff --git a/package.json b/package.json
index 1f8125580..f63ccfedf 100755
--- a/package.json
+++ b/package.json
@@ -3,56 +3,82 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --webpack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint src --max-warnings=0",
+    "test": "npm run lint && npm run test:security && npm run test:ui",
+    "test:ui": "jest",
+    "test:security": "node --experimental-detect-module --disable-warning=MODULE_TYPELESS_PACKAGE_JSON --test security-tests/activity.test.cjs security-tests/auth-fail-closed.test.cjs security-tests/authProxy-validators.test.cjs security-tests/collaboration-rate-limit-client-ip.test.cjs security-tests/generateLearningReminders.test.cjs security-tests/linkedlist-xss.test.cjs security-tests/radixSortLogic.test.cjs security-tests/rateLimit-outage.test.cjs security-tests/storage.test.cjs security-tests/trieLogic.test.cjs",
     "postbuild": "next-sitemap"
   },
   "dependencies": {
+    "@anthropic-ai/sdk": "^0.100.1",
+    "@google/generative-ai": "^0.24.1",
     "@gsap/react": "^2.1.2",
     "@marsidev/react-turnstile": "^1.3.0",
     "@monaco-editor/react": "^4.7.0",
-    "@supabase/auth-helpers-nextjs": "^0.10.0",
     "@supabase/ssr": "^0.6.1",
     "@supabase/supabase-js": "^2.49.4",
     "@tailwindcss/typography": "^0.5.16",
     "@tsparticles/engine": "^3.8.1",
     "@tsparticles/react": "^3.0.0",
     "@tsparticles/slim": "^3.8.1",
+    "@upstash/ratelimit": "^2.0.8",
+    "@upstash/redis": "^1.38.0",
     "@vercel/speed-insights": "^1.2.0",
     "axios": "^1.9.0",
-    "dotenv": "^16.5.0",
-    "framer-motion": "^12.9.4",
+    "bcryptjs": "^3.0.3",
+    "canvas-confetti": "^1.9.3",
+    "dotenv": "^16.6.1",
+    "framer-motion": "12.40.0",
     "gsap": "^3.13.0",
     "highlight.js": "^11.11.1",
+    "html2canvas": "^1.4.1",
+    "isolated-vm": "^6.1.2",
+    "jose": "^6.2.3",
+    "jspdf": "^4.2.1",
     "lucide-react": "^0.511.0",
     "monaco-themes": "^0.4.5",
-    "next": "16.1.6",
+    "next": "^16.2.6",
     "next-sitemap": "^4.2.3",
     "next-themes": "^0.4.6",
-    "nodemailer": "^6.10.0",
+    "nodemailer": "^8.0.7",
     "openai": "^4.103.0",
+    "pino": "^10.3.1",
     "prism-react-renderer": "^2.4.1",
     "react": "^19.2.4",
     "react-calendar": "^6.0.0",
     "react-dom": "^19.2.4",
     "react-hot-toast": "^2.5.2",
     "react-icons": "^5.5.0",
+    "react-is": "^19.2.7",
     "react-markdown": "^10.1.0",
     "react-responsive-carousel": "^3.2.23",
-    "react-router-dom": "^7.5.3",
-    "react-syntax-highlighter": "^5.8.0",
-    "recharts": "^3.1.0",
+    "react-zoom-pan-pinch": "^4.0.3",
+    "recharts": "^3.9.0",
     "remark-gfm": "^4.0.1",
-    "sanitize-html": "^2.17.0"
+    "sanitize-html": "^2.17.0",
+    "socket.io-client": "^4.8.3"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.11.3",
+    "@emnapi/core": "^1.10.0",
+    "@emnapi/runtime": "^1.10.0",
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9",
+    "eslint": "^9.39.4",
     "eslint-config-next": "15.2.4",
+    "eslint-plugin-no-unsanitized": "^4.1.5",
+    "jest": "^30.4.2",
+    "jest-environment-jsdom": "^30.4.1",
+    "jsdom": "^26.1.0",
+    "pino-pretty": "^13.1.3",
+    "playwright": "^1.60.0",
     "postcss": "^8.5.3",
     "tailwindcss": "3.4"
   }
diff --git a/postcss.config.mjs b/postcss.config.mjs
deleted file mode 100755
index c7bcb4b1e..000000000
--- a/postcss.config.mjs
+++ /dev/null
@@ -1,5 +0,0 @@
-const config = {
-  plugins: ["@tailwindcss/postcss"],
-};
-
-export default config;
diff --git a/public/DSA.png b/public/DSA.png
deleted file mode 100755
index bdef81438..000000000
Binary files a/public/DSA.png and /dev/null differ
diff --git a/public/GurlThinking.png b/public/GurlThinking.png
deleted file mode 100755
index 85403a954..000000000
Binary files a/public/GurlThinking.png and /dev/null differ
diff --git a/public/assets/fire.svg b/public/assets/fire.svg
deleted file mode 100755
index 4e1da2dd1..000000000
--- a/public/assets/fire.svg
+++ /dev/null
@@ -1,30 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="-33 0 255 255" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
-  <defs>
-    <style>
-
-      .cls-3 {
-        fill: url(#linear-gradient-1);
-      }
-
-      .cls-4 {
-        fill: #fc9502;
-      }
-
-      .cls-5 {
-        fill: #fce202;
-      }
-    </style>
-
-    <linearGradient id="linear-gradient-1" gradientUnits="userSpaceOnUse" x1="94.141" y1="255" x2="94.141" y2="0.188">
-      <stop offset="0" stop-color="#ff4c0d"/>
-      <stop offset="1" stop-color="#fc9502"/>
-    </linearGradient>
-  </defs>
-  <g id="fire">
-    <path d="M187.899,164.809 C185.803,214.868 144.574,254.812 94.000,254.812 C42.085,254.812 -0.000,211.312 -0.000,160.812 C-0.000,154.062 -0.121,140.572 10.000,117.812 C16.057,104.191 19.856,95.634 22.000,87.812 C23.178,83.513 25.469,76.683 32.000,87.812 C35.851,94.374 36.000,103.812 36.000,103.812 C36.000,103.812 50.328,92.817 60.000,71.812 C74.179,41.019 62.866,22.612 59.000,9.812 C57.662,5.384 56.822,-2.574 66.000,0.812 C75.352,4.263 100.076,21.570 113.000,39.812 C131.445,65.847 138.000,90.812 138.000,90.812 C138.000,90.812 143.906,83.482 146.000,75.812 C148.365,67.151 148.400,58.573 155.999,67.813 C163.226,76.600 173.959,93.113 180.000,108.812 C190.969,137.321 187.899,164.809 187.899,164.809 Z" id="path-1" class="cls-3" fill-rule="evenodd"/>
-    <path d="M94.000,254.812 C58.101,254.812 29.000,225.711 29.000,189.812 C29.000,168.151 37.729,155.000 55.896,137.166 C67.528,125.747 78.415,111.722 83.042,102.172 C83.953,100.292 86.026,90.495 94.019,101.966 C98.212,107.982 104.785,118.681 109.000,127.812 C116.266,143.555 118.000,158.812 118.000,158.812 C118.000,158.812 125.121,154.616 130.000,143.812 C131.573,140.330 134.753,127.148 143.643,140.328 C150.166,150.000 159.127,167.390 159.000,189.812 C159.000,225.711 129.898,254.812 94.000,254.812 Z" id="path-2" class="cls-4" fill-rule="evenodd"/>
-    <path d="M95.000,183.812 C104.250,183.812 104.250,200.941 116.000,223.812 C123.824,239.041 112.121,254.812 95.000,254.812 C77.879,254.812 69.000,240.933 69.000,223.812 C69.000,206.692 85.750,183.812 95.000,183.812 Z" id="path-3" class="cls-5" fill-rule="evenodd"/>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/public/blog/DSimage/array.png b/public/blog/DSimage/array.png
deleted file mode 100755
index e90bfa0b9..000000000
Binary files a/public/blog/DSimage/array.png and /dev/null differ
diff --git a/public/blog/DSimage/graph.png b/public/blog/DSimage/graph.png
deleted file mode 100755
index e2c2186ac..000000000
Binary files a/public/blog/DSimage/graph.png and /dev/null differ
diff --git a/public/blog/DSimage/linkedList.png b/public/blog/DSimage/linkedList.png
deleted file mode 100755
index 8e32a1914..000000000
Binary files a/public/blog/DSimage/linkedList.png and /dev/null differ
diff --git a/public/blog/DSimage/queue.png b/public/blog/DSimage/queue.png
deleted file mode 100755
index c93645534..000000000
Binary files a/public/blog/DSimage/queue.png and /dev/null differ
diff --git a/public/blog/DSimage/stack.png b/public/blog/DSimage/stack.png
deleted file mode 100755
index a2d9faef6..000000000
Binary files a/public/blog/DSimage/stack.png and /dev/null differ
diff --git a/public/blog/DSimage/tree.png b/public/blog/DSimage/tree.png
deleted file mode 100755
index 61076e9f1..000000000
Binary files a/public/blog/DSimage/tree.png and /dev/null differ
diff --git a/public/blog/dsaDifferent.png b/public/blog/dsaDifferent.png
deleted file mode 100755
index 13c19abf3..000000000
Binary files a/public/blog/dsaDifferent.png and /dev/null differ
diff --git a/public/blog/dsaWebDev.png b/public/blog/dsaWebDev.png
deleted file mode 100755
index 63b5925b1..000000000
Binary files a/public/blog/dsaWebDev.png and /dev/null differ
diff --git a/public/blog/timeRequired.png b/public/blog/timeRequired.png
deleted file mode 100755
index 1b2988fbf..000000000
Binary files a/public/blog/timeRequired.png and /dev/null differ
diff --git a/public/blog/whatIsDS.png b/public/blog/whatIsDS.png
deleted file mode 100755
index 8cd92226d..000000000
Binary files a/public/blog/whatIsDS.png and /dev/null differ
diff --git a/public/favicon.ico b/public/favicon.ico
index 2d5f33d34..4e9ae9144 100755
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/logo.jpeg b/public/logo.jpeg
deleted file mode 100755
index 2ba7bc799..000000000
Binary files a/public/logo.jpeg and /dev/null differ
diff --git a/public/logo_new.png b/public/logo_new.png
new file mode 100644
index 000000000..866e851ae
Binary files /dev/null and b/public/logo_new.png differ
diff --git a/public/modules/binarySearch.png b/public/modules/binarySearch.png
deleted file mode 100755
index 2374136cb..000000000
Binary files a/public/modules/binarySearch.png and /dev/null differ
diff --git a/public/modules/bubbleSort.png b/public/modules/bubbleSort.png
deleted file mode 100755
index a2701bf16..000000000
Binary files a/public/modules/bubbleSort.png and /dev/null differ
diff --git a/public/modules/enqueueDequeue.png b/public/modules/enqueueDequeue.png
deleted file mode 100755
index f2ed33071..000000000
Binary files a/public/modules/enqueueDequeue.png and /dev/null differ
diff --git a/public/modules/insertionSort.png b/public/modules/insertionSort.png
deleted file mode 100755
index bf6b7e1a1..000000000
Binary files a/public/modules/insertionSort.png and /dev/null differ
diff --git a/public/modules/isEmpty.png b/public/modules/isEmpty.png
deleted file mode 100755
index 39ce2fa2d..000000000
Binary files a/public/modules/isEmpty.png and /dev/null differ
diff --git a/public/modules/isFull.png b/public/modules/isFull.png
deleted file mode 100755
index f0c8368df..000000000
Binary files a/public/modules/isFull.png and /dev/null differ
diff --git a/public/modules/linearSearch.png b/public/modules/linearSearch.png
deleted file mode 100755
index 21fa64bb8..000000000
Binary files a/public/modules/linearSearch.png and /dev/null differ
diff --git a/public/modules/mergeSort.png b/public/modules/mergeSort.png
deleted file mode 100755
index bfc2aa11b..000000000
Binary files a/public/modules/mergeSort.png and /dev/null differ
diff --git a/public/modules/peek.png b/public/modules/peek.png
deleted file mode 100755
index 1af313291..000000000
Binary files a/public/modules/peek.png and /dev/null differ
diff --git a/public/modules/peekFront.png b/public/modules/peekFront.png
deleted file mode 100755
index 903dfc0ed..000000000
Binary files a/public/modules/peekFront.png and /dev/null differ
diff --git a/public/modules/postfix.png b/public/modules/postfix.png
deleted file mode 100755
index 9102ecf2e..000000000
Binary files a/public/modules/postfix.png and /dev/null differ
diff --git a/public/modules/prefix.png b/public/modules/prefix.png
deleted file mode 100755
index ac491fc76..000000000
Binary files a/public/modules/prefix.png and /dev/null differ
diff --git a/public/modules/pushPop.png b/public/modules/pushPop.png
deleted file mode 100755
index a024676c2..000000000
Binary files a/public/modules/pushPop.png and /dev/null differ
diff --git a/public/modules/quickSort.png b/public/modules/quickSort.png
deleted file mode 100755
index 596def2a3..000000000
Binary files a/public/modules/quickSort.png and /dev/null differ
diff --git a/public/modules/selectionSort.png b/public/modules/selectionSort.png
deleted file mode 100755
index 5246bfb4f..000000000
Binary files a/public/modules/selectionSort.png and /dev/null differ
diff --git a/public/modules/stackArray.png b/public/modules/stackArray.png
deleted file mode 100755
index da5e3c3f7..000000000
Binary files a/public/modules/stackArray.png and /dev/null differ
diff --git a/public/modules/stackLinkedList.png b/public/modules/stackLinkedList.png
deleted file mode 100755
index 2cf745097..000000000
Binary files a/public/modules/stackLinkedList.png and /dev/null differ
diff --git a/public/og.png b/public/og.png
deleted file mode 100755
index 193aa202f..000000000
Binary files a/public/og.png and /dev/null differ
diff --git a/public/og/queue/enqueueDequeue.png b/public/og/queue/enqueueDequeue.png
deleted file mode 100755
index f2ed33071..000000000
Binary files a/public/og/queue/enqueueDequeue.png and /dev/null differ
diff --git a/public/og/queue/peekFront.png b/public/og/queue/peekFront.png
deleted file mode 100755
index 903dfc0ed..000000000
Binary files a/public/og/queue/peekFront.png and /dev/null differ
diff --git a/public/og/searching/binarySearch.png b/public/og/searching/binarySearch.png
deleted file mode 100755
index 2374136cb..000000000
Binary files a/public/og/searching/binarySearch.png and /dev/null differ
diff --git a/public/og/searching/linearSearch.png b/public/og/searching/linearSearch.png
deleted file mode 100755
index 21fa64bb8..000000000
Binary files a/public/og/searching/linearSearch.png and /dev/null differ
diff --git a/public/og/sorting/bubbleSort.png b/public/og/sorting/bubbleSort.png
deleted file mode 100755
index a2701bf16..000000000
Binary files a/public/og/sorting/bubbleSort.png and /dev/null differ
diff --git a/public/og/sorting/insertionSort.png b/public/og/sorting/insertionSort.png
deleted file mode 100755
index bf6b7e1a1..000000000
Binary files a/public/og/sorting/insertionSort.png and /dev/null differ
diff --git a/public/og/sorting/mergeSort.png b/public/og/sorting/mergeSort.png
deleted file mode 100755
index bfc2aa11b..000000000
Binary files a/public/og/sorting/mergeSort.png and /dev/null differ
diff --git a/public/og/sorting/quickSort.png b/public/og/sorting/quickSort.png
deleted file mode 100755
index 596def2a3..000000000
Binary files a/public/og/sorting/quickSort.png and /dev/null differ
diff --git a/public/og/sorting/selectionSort.png b/public/og/sorting/selectionSort.png
deleted file mode 100755
index 5246bfb4f..000000000
Binary files a/public/og/sorting/selectionSort.png and /dev/null differ
diff --git a/public/og/stack/isEmpty.png b/public/og/stack/isEmpty.png
deleted file mode 100755
index 39ce2fa2d..000000000
Binary files a/public/og/stack/isEmpty.png and /dev/null differ
diff --git a/public/og/stack/isFull.png b/public/og/stack/isFull.png
deleted file mode 100755
index f0c8368df..000000000
Binary files a/public/og/stack/isFull.png and /dev/null differ
diff --git a/public/og/stack/peek.png b/public/og/stack/peek.png
deleted file mode 100755
index 1af313291..000000000
Binary files a/public/og/stack/peek.png and /dev/null differ
diff --git a/public/og/stack/postfix.png b/public/og/stack/postfix.png
deleted file mode 100755
index 9102ecf2e..000000000
Binary files a/public/og/stack/postfix.png and /dev/null differ
diff --git a/public/og/stack/prefix.png b/public/og/stack/prefix.png
deleted file mode 100755
index ac491fc76..000000000
Binary files a/public/og/stack/prefix.png and /dev/null differ
diff --git a/public/og/stack/pushPop.png b/public/og/stack/pushPop.png
deleted file mode 100755
index a024676c2..000000000
Binary files a/public/og/stack/pushPop.png and /dev/null differ
diff --git a/public/og/stack/stackArray.png b/public/og/stack/stackArray.png
deleted file mode 100755
index da5e3c3f7..000000000
Binary files a/public/og/stack/stackArray.png and /dev/null differ
diff --git a/public/og/stack/stackLinkedList.png b/public/og/stack/stackLinkedList.png
deleted file mode 100755
index c5e2fe045..000000000
Binary files a/public/og/stack/stackLinkedList.png and /dev/null differ
diff --git a/public/og/visualizer.png b/public/og/visualizer.png
deleted file mode 100755
index dd20010ac..000000000
Binary files a/public/og/visualizer.png and /dev/null differ
diff --git a/public/screenshots/Home-page.png b/public/screenshots/Home-page.png
new file mode 100644
index 000000000..c7f6423c1
Binary files /dev/null and b/public/screenshots/Home-page.png differ
diff --git a/public/screenshots/login-page.png b/public/screenshots/login-page.png
new file mode 100644
index 000000000..b3ccf12df
Binary files /dev/null and b/public/screenshots/login-page.png differ
diff --git a/public/screenshots/queue-operations-page.png b/public/screenshots/queue-operations-page.png
new file mode 100644
index 000000000..a6c182abe
Binary files /dev/null and b/public/screenshots/queue-operations-page.png differ
diff --git a/public/screenshots/queue-visualization-page.png b/public/screenshots/queue-visualization-page.png
new file mode 100644
index 000000000..defcc4650
Binary files /dev/null and b/public/screenshots/queue-visualization-page.png differ
diff --git a/public/screenshots/visualizer-page.png b/public/screenshots/visualizer-page.png
new file mode 100644
index 000000000..120d2f495
Binary files /dev/null and b/public/screenshots/visualizer-page.png differ
diff --git a/public/sitemap-0.xml b/public/sitemap-0.xml
index ea15abb4e..e7e317fa2 100755
--- a/public/sitemap-0.xml
+++ b/public/sitemap-0.xml
@@ -1,48 +1,375 @@
 <?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://algobuddy.vercel.app/blogs/Content/dsaDifferent</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/blogs/Content/dsaWebDev</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/blogs/Content/timeRequired</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/blogs/Content/whatIsDS</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/blogs</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/dashboard</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/login</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app</loc><lastmod>2026-03-04T17:07:07.476Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/linkedList/operations/comparison</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/linkedList/operations/deletion</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/linkedList/operations/insertion</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/linkedList/operations/merge</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/linkedList/operations/reverse</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/linkedList/operations/traversal</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/linkedList/types/circular</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/linkedList/types/doubly</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/linkedList/types/singly</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/queue/implementation/array</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/queue/implementation/linkedList</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/queue/operations/enqueue-dequeue</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/queue/operations/isempty</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/queue/operations/isfull</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/queue/operations/peek-front</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/queue/types/circular</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/queue/types/deque</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/queue/types/priority</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/queue/types/singleEnded</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/searching/binarysearch</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/searching/linearsearch</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/sorting/bubblesort</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/sorting/insertionsort</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/sorting/mergesort</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/sorting/quicksort</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/sorting/selectionsort</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/stack/implementation/usingArray</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/stack/implementation/usingLinkedList</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/stack/isempty</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/stack/isfull</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/stack/peek</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/stack/polish/postfix</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/stack/polish/prefix</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/stack/push-pop</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/trees/binaryTree/types</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
-<url><loc>https://algobuddy.vercel.app/visualizer/trees/traversing/in-order</loc><lastmod>2026-03-04T17:07:07.481Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app</loc><lastmod>2026-07-21T04:06:01.300Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/about</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/arena</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/blog</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/avl-tree</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/bfs</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/binary-search</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/binary-search-tree</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/bubble-sort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/deque</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/dfs</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/dijkstra</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/doubly-linked-list</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/factorial</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/fibonacci</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/hash-map</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/heap</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/heap-sort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/insertion-sort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/jump-search</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/linear-search</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/merge-sort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/queue</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/quick-sort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/selection-sort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/singly-linked-list</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/stack</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cheatsheets/tree-traversal</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/code-of-conduct</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/community</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/components/contactus</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/components/faq</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/contactus</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/cookie</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/faq</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/icon.svg</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/leaderboard</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/login</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/my-applications</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/notifications</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/practice</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/privacy</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/profile</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/recently-viewed</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/roadmaps</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/saved-jobs</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/signup</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/student-jobs</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/terms</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/tutorials</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/ai</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/ai/alpha-beta-pruning</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/ai/astar</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/ai/mcts</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/ai/minmax</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/binarysearch</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/binarysearch/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/bubblesort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/bubblesort/analysis</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/bubblesort/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/bucketsort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/bucketsort/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/comparison</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/countingsort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/countingsort/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/exponential-search</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/exponential-search/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/fibonacci-search</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/fibonacci-search/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/heapsort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/heapsort/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/insertionsort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/insertionsort/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/interpolation-search</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/interpolation-search/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/Interview-Patterns</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/Interview-Patterns/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/Interview-Patterns/quiz/slidingWindow</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/Interview-Patterns/quiz/twopointers</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/jump-search</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/jump-search/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/linearsearch</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/linearsearch/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/mergesort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/mergesort/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/quicksort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/quicksort/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/radixsort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/radixsort/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/searching/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/searching/quiz/binarysearch</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/searching/quiz/linearsearch</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/selectionsort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/selectionsort/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/shellsort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/shellsort/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/slidingwindow</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/sorting/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/sorting/quiz/bubblesort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/sorting/quiz/bucket-sort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/sorting/quiz/countingsort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/sorting/quiz/heapsort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/sorting/quiz/insertionsort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/sorting/quiz/mergesort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/sorting/quiz/quicksort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/sorting/quiz/radixsort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/sorting/quiz/selectionsort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/sorting/quiz/shell-sort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/sorting/quiz/timsort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/ternary-search</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/ternary-search/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/timsort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/timsort/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/twopointers</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/array/twopointers/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/backtracking</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/bit-manipulation/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/call-stack</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/code-execution</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/code-lab</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/collaboration</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/complexity-analyzer</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/complexity-visualizer</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/dp</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/dp/coin-change</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/dp/knapsack</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/dp/lcs</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/dp/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/dry-run</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/graph</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/graph/algorithms/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/graph/algorithms/quiz/bellman-ford</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/graph/algorithms/quiz/dijkstra</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/graph/algorithms/quiz/floyd-warshall</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/graph/algorithms/quiz/kosaraju</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/graph/algorithms/quiz/kruskal</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/graph/algorithms/quiz/prim</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/graph/algorithms/quiz/topological-sort</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/graph/bellman-ford</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/graph/kosaraju</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/graph/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/graph/representation/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/graph/representation/quiz/adjacency-list</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/graph/representation/quiz/adjacency-matrix</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/graph/traversal/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/graph/traversal/quiz/bfs</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/graph/traversal/quiz/dfs</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/hashmap</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/hashmap/delete</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/hashmap/insert</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/hashmap/operations/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/hashmap/operations/quiz/delete</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/hashmap/operations/quiz/insert</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/hashmap/operations/quiz/search</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/hashmap/search</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linked-list</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/operations/comparison</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/operations/deletion</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/operations/insertion</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/operations/merge</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/operations/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/operations/quiz/deletion</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/operations/quiz/insertion</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/operations/quiz/middle</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/operations/quiz/reverse</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/operations/quiz/search</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/operations/quiz/traversal</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/operations/reverse</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/operations/sorting</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/operations/traversal</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/types/circular</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/types/doubly</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/types/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/types/quiz/circular-doubly</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/types/quiz/circular-singly</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/types/quiz/doubly</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/types/quiz/singly</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/linkedlist/types/singly</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/memory-view</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/implementation/array</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/implementation/linkedList</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/implementation/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/implementation/quiz/array</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/implementation/quiz/linked-list</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/operations/enqueue-dequeue</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/operations/isempty</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/operations/isfull</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/operations/peek-front</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/operations/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/operations/quiz/enqueue-dequeue</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/operations/quiz/isempty</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/operations/quiz/isfull</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/operations/quiz/peek</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/types/circular</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/types/deque</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/types/priority</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/types/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/types/quiz/circular</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/types/quiz/double-ended</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/types/quiz/priority</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/types/quiz/single-ended</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/queue/types/singleEnded</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/backtracking</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/backtracking/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/basic-recursion</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/basic-recursion/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/binary-search</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/binary-search/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/factorial</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/fibonacci</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/functional-parameterized</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/functional-parameterized/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/multiple-calls</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/multiple-calls/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/n-queens</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/palindrome</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/print-1-to-n</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/print-n-to-1</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/quiz/backtracking</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/quiz/basic-recursion</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/quiz/binary-search</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/quiz/functional-parameterized</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/quiz/multiple-calls</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/quiz/stack</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/quiz/subsequences</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/quiz/tower-of-hanoi</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/quiz/trees</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/reverse-array</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/stack</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/stack/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/subsequences</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/subsequences/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/sum-of-n</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/tower-of-hanoi</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/tower-of-hanoi/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/trees</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/recursion/trees/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/revision-flashcards</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/segment-tree</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/segment-tree/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/smart-revision</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/implementation/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/implementation/quiz/array</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/implementation/quiz/linked-list</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/implementation/usingArray</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/implementation/usingLinkedList</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/isempty</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/isfull</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/monotonic/largestrectangle</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/monotonic/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/monotonic/quiz/histogram</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/peek</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/polish/postfix</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/polish/prefix</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/polish/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/polish/quiz/postfix</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/polish/quiz/prefix</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/push-pop</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/quiz/isempty</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/quiz/isfull</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/quiz/peek</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/stack/quiz/push-pop</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/anagram-check</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/anagram-check/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/character-frequency</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/character-frequency/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/kmp-algorithm</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/kmp-algorithm/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/longest-common-prefix</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/longest-common-prefix/quiz</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/longest-substring</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/palindrome-check</loc><lastmod>2026-07-21T04:06:01.302Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/palindrome-check/quiz</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/pattern-matching/quiz</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/quiz</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/rabin-karp</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/rabin-karp/quiz</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/reverse-string</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/reverse-string/quiz</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/z-algorithm</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/string/z-algorithm/quiz</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/advanced/b-trees</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/advanced/dsu</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/advanced/fenwick</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/advanced/quiz</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/advanced/quiz/avl</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/advanced/quiz/b-plus-tree</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/advanced/quiz/b-tree</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/advanced/quiz/fenwick-tree</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/advanced/quiz/heap-tree</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/advanced/quiz/red-black</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/advanced/quiz/segment-tree</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/advanced/quiz/segment-tree-2d</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/advanced/quiz/trie</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/advanced/red-black</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/advanced/segment</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/advanced/segment-2d</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/advanced/trie</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/algorithms/diameter</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/algorithms/isomorphism</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/algorithms/lca</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/algorithms/quiz</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/algorithms/quiz/boundary-traversal</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/algorithms/quiz/diameter</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/algorithms/quiz/height</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/algorithms/quiz/lowest-common-ancestor</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/algorithms/quiz/morris</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/algorithms/quiz/serialization</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/algorithms/quiz/tree-views</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/algorithms/quiz/vertical-order</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/algorithms/quiz/zigzag</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/algorithms/serialization</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/applications/decision-trees</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/applications/heap</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/applications/heapsort</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/applications/heapsort/quiz</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/applications/huffman</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/applications/quiz</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/applications/quiz/decision-trees</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/applications/quiz/heap-max</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/applications/quiz/heap-min-max</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/applications/quiz/heap-sort</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/applications/quiz/huffman-coding</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/applications/quiz/syntax-trees</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/applications/syntax-trees</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/avl/deletion</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/avl/insertion</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/binaryTree/properties</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/binaryTree/quiz</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/binaryTree/quiz/structure-properties</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/binaryTree/quiz/types</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/binaryTree/types</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/bst/avl</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/bst/deletion</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/bst/in-order</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/bst/insertion</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/bst/post-order</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/bst/pre-order</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/bst/quiz</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/bst/quiz/avl</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/bst/quiz/deletion</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/bst/quiz/inorder</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/bst/quiz/insertion</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/bst/quiz/postorder</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/bst/quiz/preorder</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/bst/quiz/searching</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/bst/searching</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/heap</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/heap/max-heap</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/heap/min-heap</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/quiz</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/traversing/in-order</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/traversing/level-order</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/traversing/morris</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/traversing/post-order</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/traversing/pre-order</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/traversing/quiz</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/traversing/quiz/inorder</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/traversing/quiz/levelorder</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/traversing/quiz/postorder</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
+<url><loc>https://algobuddy.vercel.app/visualizer/tree/traversing/quiz/preorder</loc><lastmod>2026-07-21T04:06:01.303Z</lastmod></url>
 </urlset>
\ No newline at end of file
diff --git a/public/tutorials/.gitkeep b/public/tutorials/.gitkeep
new file mode 100644
index 000000000..310dbe1cc
--- /dev/null
+++ b/public/tutorials/.gitkeep
@@ -0,0 +1 @@
+# Placeholder file to ensure public/tutorials directory is tracked by Git
diff --git a/public/tutorials/tutorial1.mp4 b/public/tutorials/tutorial1.mp4
new file mode 100644
index 000000000..f5de88d62
Binary files /dev/null and b/public/tutorials/tutorial1.mp4 differ
diff --git a/render.yaml b/render.yaml
new file mode 100644
index 000000000..c030c7231
--- /dev/null
+++ b/render.yaml
@@ -0,0 +1,27 @@
+services:
+  - type: web
+    name: algobuddy-backend
+    runtime: docker
+    region: singapore # Feel free to change to ohio, frankfurt, or oregon based on your preference
+    plan: free
+    envVars:
+      # You will need to securely provide the values for these in the Render Dashboard:
+      - key: DB_URL
+        sync: false
+      - key: DB_USERNAME
+        sync: false
+      - key: DB_PASSWORD
+        sync: false
+      - key: SUPABASE_URL
+        sync: false
+      - key: ALLOWED_ORIGINS
+        sync: false
+
+  - type: web
+    name: algobuddy-socket-server
+    runtime: node
+    plan: free
+    region: singapore # Match the backend region to minimize latency
+    rootDir: arena-socket-server
+    buildCommand: npm install
+    startCommand: npm start
diff --git a/security-tests/activity.test.cjs b/security-tests/activity.test.cjs
new file mode 100644
index 000000000..f7f38f1e6
--- /dev/null
+++ b/security-tests/activity.test.cjs
@@ -0,0 +1,212 @@
+// security-tests/activity.test.cjs
+//
+// Run with:  node --experimental-detect-module --test security-tests/activity.test.cjs
+//
+// Tests activity tracking utilities. computeStreak is tested by importing
+// its implementation directly (with getLocalISODate stubbed). trackActivity
+// is tested via inline mock to avoid the @/ alias resolution issue.
+
+const { test, describe, beforeEach, afterEach } = require('node:test');
+const assert = require('node:assert/strict');
+
+// ─── Inline computeStreak logic for testing ───────────────────────────────────
+// (Copied verbatim from src/lib/activity.js computeStreak body)
+// getLocalISODate stub: default to "2026-06-19" for deterministic tests
+function getLocalISODate(date = new Date('2026-06-19')) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+function computeStreak(activities) {
+  if (!activities || activities.length === 0) return 0;
+
+  const dates = activities
+    .filter(Boolean)
+    .map((a) => {
+      if (a.activity_date && /^\d{4}-\d{2}-\d{2}$/.test(a.activity_date)) {
+        return a.activity_date;
+      }
+      const d = new Date(a.activity_date || a.created_at);
+      return getLocalISODate(d);
+    })
+    .filter(Boolean)
+    .sort((a, b) => new Date(b) - new Date(a));
+
+  if (dates.length === 0) return 0;
+
+  const uniqueDates = [...new Set(dates)];
+  let streak = 1;
+  const today = getLocalISODate();
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  const yesterdayStr = getLocalISODate(yesterday);
+
+  // Only count streak if most recent activity is today or yesterday
+  if (uniqueDates[0] !== today && uniqueDates[0] !== yesterdayStr) return 0;
+
+  for (let i = 1; i < uniqueDates.length; i++) {
+    const curr = new Date(uniqueDates[i - 1]);
+    const prev = new Date(uniqueDates[i]);
+    const diffDays = Math.round((curr - prev) / (1000 * 60 * 60 * 24));
+    if (diffDays === 1) {
+      streak++;
+    } else {
+      break;
+    }
+  }
+
+  return streak;
+}
+
+// ─── Inline trackActivity for testing ─────────────────────────────────────────
+// Mirrors src/lib/activity.js trackActivity behavior
+async function trackActivity(type = 'site_visit') {
+  try {
+    await fetch('/api/activity', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ type }),
+    });
+  } catch (e) {
+    console.error('trackActivity failed:', e);
+  }
+}
+
+// ─── computeStreak tests ───────────────────────────────────────────────────────
+
+describe('computeStreak', () => {
+  test('returns 0 for null input', () => {
+    assert.strictEqual(computeStreak(null), 0);
+  });
+
+  test('returns 0 for undefined input', () => {
+    assert.strictEqual(computeStreak(undefined), 0);
+  });
+
+  test('returns 0 for empty array', () => {
+    assert.strictEqual(computeStreak([]), 0);
+  });
+
+  test('returns 0 for array with only null entries (nulls filtered out)', () => {
+    assert.strictEqual(computeStreak([null, null]), 0);
+  });
+
+  test('returns 1 for single activity today', () => {
+    assert.strictEqual(computeStreak([{ activity_date: '2026-06-19' }]), 1);
+  });
+
+  test('returns 1 for single activity yesterday', () => {
+    assert.strictEqual(computeStreak([{ activity_date: '2026-06-18' }]), 1);
+  });
+
+  test('returns 0 for single activity older than yesterday', () => {
+    assert.strictEqual(computeStreak([{ activity_date: '2026-06-17' }]), 0);
+  });
+
+  test('returns streak count for consecutive days', () => {
+    const activities = [
+      { activity_date: '2026-06-19' },
+      { activity_date: '2026-06-18' },
+      { activity_date: '2026-06-17' },
+      { activity_date: '2026-06-16' },
+    ];
+    assert.strictEqual(computeStreak(activities), 4);
+  });
+
+  test('streak breaks when gap exceeds one day', () => {
+    const activities = [
+      { activity_date: '2026-06-19' },
+      { activity_date: '2026-06-18' },
+      // gap here
+      { activity_date: '2026-06-16' },
+    ];
+    assert.strictEqual(computeStreak(activities), 2);
+  });
+
+  test('duplicate dates on same day do not inflate streak', () => {
+    const activities = [
+      { activity_date: '2026-06-19' },
+      { activity_date: '2026-06-19' },
+      { activity_date: '2026-06-18' },
+      { activity_date: '2026-06-18' },
+    ];
+    assert.strictEqual(computeStreak(activities), 2);
+  });
+
+  test('prefers activity_date over created_at when both present', () => {
+    const activities = [
+      { activity_date: '2026-06-19', created_at: '2026-06-18' },
+    ];
+    assert.strictEqual(computeStreak(activities), 1);
+  });
+
+  test('falls back to created_at when activity_date absent', () => {
+    const activities = [
+      { created_at: '2026-06-19T10:00:00.000Z' },
+      { created_at: '2026-06-18T10:00:00.000Z' },
+    ];
+    assert.strictEqual(computeStreak(activities), 2);
+  });
+
+  test('sorts by date descending (most recent first)', () => {
+    const activities = [
+      { activity_date: '2026-06-17' },
+      { activity_date: '2026-06-19' },
+      { activity_date: '2026-06-18' },
+    ];
+    assert.strictEqual(computeStreak(activities), 3);
+  });
+});
+
+// ─── trackActivity tests ───────────────────────────────────────────────────────
+
+describe('trackActivity', () => {
+  let originalFetch;
+
+  beforeEach(() => {
+    originalFetch = global.fetch;
+  });
+
+  afterEach(() => {
+    global.fetch = originalFetch;
+  });
+
+  test('calls POST /api/activity with correct Content-Type and body', async () => {
+    const calls = [];
+    global.fetch = async (url, opts) => {
+      calls.push({ url, opts });
+      return new Response('{}', { status: 200 });
+    };
+
+    await trackActivity('test_event');
+
+    assert.strictEqual(calls.length, 1);
+    assert.strictEqual(calls[0].url, '/api/activity');
+    assert.strictEqual(calls[0].opts.method, 'POST');
+    assert.strictEqual(calls[0].opts.headers['Content-Type'], 'application/json');
+    assert.strictEqual(calls[0].opts.body, JSON.stringify({ type: 'test_event' }));
+  });
+
+  test('uses default type site_visit when no argument given', async () => {
+    let capturedBody = null;
+    global.fetch = async (url, opts) => {
+      capturedBody = opts.body;
+      return new Response('{}', { status: 200 });
+    };
+
+    await trackActivity();
+
+    assert.strictEqual(capturedBody, JSON.stringify({ type: 'site_visit' }));
+  });
+
+  test('does not throw when fetch rejects', async () => {
+    global.fetch = async () => {
+      throw new Error('network error');
+    };
+
+    // Should not throw — catch block in trackActivity handles it
+    await trackActivity('event');
+  });
+});
\ No newline at end of file
diff --git a/security-tests/auth-fail-closed.test.cjs b/security-tests/auth-fail-closed.test.cjs
new file mode 100644
index 000000000..cca0e94ad
--- /dev/null
+++ b/security-tests/auth-fail-closed.test.cjs
@@ -0,0 +1,201 @@
+const test = require("node:test");
+const assert = require("node:assert/strict");
+const path = require("node:path");
+const fs = require("node:fs");
+
+// Helper to resolve paths
+const authHelperPath = path.resolve(__dirname, "..", "src", "lib", "auth.js");
+
+// We use dynamic imports to load the auth helper under ESM
+test("Authentication Helper - Configuration & Status Logic", async (t) => {
+  const { getSupabaseConfig, getAuthenticatedUser, setMockDependencies } = await import(`file://${authHelperPath}`);
+
+  await t.test("getSupabaseConfig returns null if URL is invalid or variables are missing", () => {
+    const originalEnv = { ...process.env };
+    
+    // Test 1: Complete missing config
+    delete process.env.NEXT_PUBLIC_SUPABASE_URL;
+    delete process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+    delete process.env.SUPABASE_SERVICE_KEY;
+    delete process.env.SUPABASE_SERVICE_ROLE_KEY;
+    assert.equal(getSupabaseConfig(), null);
+
+    // Test 2: URL not valid protocol
+    process.env.NEXT_PUBLIC_SUPABASE_URL = "invalid-url";
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY = "anon-key";
+    process.env.SUPABASE_SERVICE_ROLE_KEY = "service-role-key";
+    assert.equal(getSupabaseConfig(), null);
+
+    // Test 3: Valid configuration with SUPABASE_SERVICE_ROLE_KEY
+    process.env.NEXT_PUBLIC_SUPABASE_URL = "https://example.supabase.co";
+    const config1 = getSupabaseConfig();
+    assert.ok(config1);
+    assert.equal(config1.supabaseUrl, "https://example.supabase.co");
+    assert.equal(config1.supabaseAnonKey, "anon-key");
+    assert.equal(config1.supabaseServiceKey, "service-role-key");
+
+    // Test 4: Valid configuration with SUPABASE_SERVICE_KEY (fallback)
+    delete process.env.SUPABASE_SERVICE_ROLE_KEY;
+    process.env.SUPABASE_SERVICE_KEY = "service-key-alternate";
+    const config2 = getSupabaseConfig();
+    assert.ok(config2);
+    assert.equal(config2.supabaseServiceKey, "service-key-alternate");
+
+    process.env = originalEnv;
+  });
+
+  await t.test("getAuthenticatedUser returns CONFIG_ERROR when configuration is missing", async () => {
+    const originalEnv = { ...process.env };
+    delete process.env.NEXT_PUBLIC_SUPABASE_URL;
+    delete process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+    delete process.env.SUPABASE_SERVICE_KEY;
+    delete process.env.SUPABASE_SERVICE_ROLE_KEY;
+
+    const result = await getAuthenticatedUser();
+    assert.equal(result.success, false);
+    assert.equal(result.type, "CONFIG_ERROR");
+
+    process.env = originalEnv;
+  });
+
+  await t.test("getAuthenticatedUser returns UNAUTHENTICATED when token/user is not found", async () => {
+    const originalEnv = { ...process.env };
+    process.env.NEXT_PUBLIC_SUPABASE_URL = "https://example.supabase.co";
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY = "anon-key";
+    process.env.SUPABASE_SERVICE_KEY = "service-key";
+
+    // Setup mocks
+    const mockCookies = () => ({
+      getAll: () => [],
+      set: () => {},
+    });
+
+    const mockCreateServerClient = () => ({
+      auth: {
+        getUser: async () => ({ data: { user: null }, error: null }),
+      },
+    });
+
+    setMockDependencies(mockCookies, mockCreateServerClient);
+
+    const result = await getAuthenticatedUser();
+    assert.equal(result.success, false);
+    assert.equal(result.type, "UNAUTHENTICATED");
+
+    // Clean mocks
+    setMockDependencies(null, null);
+    process.env = originalEnv;
+  });
+
+  await t.test("getAuthenticatedUser returns AUTH_PROVIDER_ERROR when getUser fails", async () => {
+    const originalEnv = { ...process.env };
+    process.env.NEXT_PUBLIC_SUPABASE_URL = "https://example.supabase.co";
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY = "anon-key";
+    process.env.SUPABASE_SERVICE_KEY = "service-key";
+
+    // Setup mocks
+    const mockCookies = () => ({
+      getAll: () => [],
+      set: () => {},
+    });
+
+    const mockCreateServerClient = () => ({
+      auth: {
+        getUser: async () => ({ data: null, error: new Error("Network error") }),
+      },
+    });
+
+    setMockDependencies(mockCookies, mockCreateServerClient);
+
+    const result = await getAuthenticatedUser();
+    assert.equal(result.success, false);
+    assert.equal(result.type, "AUTH_PROVIDER_ERROR");
+
+    // Clean mocks
+    setMockDependencies(null, null);
+    process.env = originalEnv;
+  });
+
+  await t.test("getAuthenticatedUser returns success: true when user is present", async () => {
+    const originalEnv = { ...process.env };
+    process.env.NEXT_PUBLIC_SUPABASE_URL = "https://example.supabase.co";
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY = "anon-key";
+    process.env.SUPABASE_SERVICE_KEY = "service-key";
+
+    // Setup mocks
+    const mockCookies = () => ({
+      getAll: () => [],
+      set: () => {},
+    });
+
+    const mockCreateServerClient = () => ({
+      auth: {
+        getUser: async () => ({ data: { user: { id: "user-123", email: "test@example.com" } }, error: null }),
+      },
+    });
+
+    setMockDependencies(mockCookies, mockCreateServerClient);
+
+    const result = await getAuthenticatedUser();
+    assert.equal(result.success, true);
+    assert.ok(result.user);
+    assert.equal(result.user.id, "user-123");
+
+    // Clean mocks
+    setMockDependencies(null, null);
+    process.env = originalEnv;
+  });
+});
+
+test("Static Security Audit - Protected Routes fail-closed", () => {
+  const routes = [
+    "src/app/api/complexity-estimator/route.js"
+  ];
+
+  for (const route of routes) {
+    const fullPath = path.resolve(__dirname, "..", route);
+    const content = fs.readFileSync(fullPath, "utf8");
+
+    // 1. Must import getAuthenticatedUser from '@/lib/auth'
+    assert.match(
+      content,
+      /import\s+\{\s*getAuthenticatedUser\s*\}\s+from\s+["']@\/lib\/auth["']/,
+      `${route} must import getAuthenticatedUser from auth library`
+    );
+
+    // 2. Must not contain the old configured/user bypass pattern: configured && !user
+    assert.doesNotMatch(
+      content,
+      /configured\s*&&\s*!user/,
+      `${route} must not use fail-open (configured && !user) pattern`
+    );
+
+    // 3. Must check authResult.type for CONFIG_ERROR
+    assert.match(
+      content,
+      /CONFIG_ERROR/,
+      `${route} must explicitly handle CONFIG_ERROR`
+    );
+
+    // 4. Must check authResult.type for AUTH_PROVIDER_ERROR
+    assert.match(
+      content,
+      /AUTH_PROVIDER_ERROR/,
+      `${route} must explicitly handle AUTH_PROVIDER_ERROR`
+    );
+
+    // 5. Must return 401 for unauthenticated
+    assert.match(
+      content,
+      /401/,
+      `${route} must reject unauthenticated requests with a 401 response`
+    );
+
+    // 6. Must return 500 for configuration errors
+    assert.match(
+      content,
+      /500/,
+      `${route} must return 500 when configuration or provider error occurs`
+    );
+  }
+});
diff --git a/security-tests/authProxy-validators.test.cjs b/security-tests/authProxy-validators.test.cjs
new file mode 100644
index 000000000..33ef501b2
--- /dev/null
+++ b/security-tests/authProxy-validators.test.cjs
@@ -0,0 +1,164 @@
+// security-tests/authProxy-validators.test.cjs
+//
+// Run with:  node --experimental-detect-module --test security-tests/authProxy-validators.test.cjs
+//
+// Tests the auth proxy validators in src/authProxy.js:
+// isValidHttpUrl, getSupabaseConfig, and protectedRoutes path matching.
+
+const { test, describe } = require('node:test');
+const assert = require('node:assert/strict');
+
+// Inlined helpers from src/authProxy.js
+
+function isValidHttpUrl(value) {
+  try {
+    const parsed = new URL(value);
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}
+
+function getSupabaseConfig() {
+  let supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+  if (!supabaseUrl || !supabaseAnonKey || !isValidHttpUrl(supabaseUrl)) {
+    return null;
+  }
+
+  if (supabaseUrl.startsWith('http://localhost:')) {
+    supabaseUrl = supabaseUrl.replace('http://localhost:', 'http://127.0.0.1:');
+  }
+
+  return { supabaseUrl, supabaseAnonKey };
+}
+
+const protectedRoutes = ['/arena', '/practice', '/profile'];
+
+function matchesProtectedRoute(pathname) {
+  return protectedRoutes.some((route) => pathname.startsWith(route));
+}
+
+describe('isValidHttpUrl', () => {
+  test('returns true for https://example.com', () => {
+    assert.strictEqual(isValidHttpUrl('https://example.com'), true);
+  });
+
+  test('returns true for http://example.com', () => {
+    assert.strictEqual(isValidHttpUrl('http://example.com'), true);
+  });
+
+  test('returns true for http://localhost:3000', () => {
+    assert.strictEqual(isValidHttpUrl('http://localhost:3000'), true);
+  });
+
+  test('returns true for http://127.0.0.1:8080', () => {
+    assert.strictEqual(isValidHttpUrl('http://127.0.0.1:8080'), true);
+  });
+
+  test('returns true for https://www.algobuddy.me/path', () => {
+    assert.strictEqual(isValidHttpUrl('https://www.algobuddy.me/path'), true);
+  });
+
+  test('returns false for null', () => {
+    assert.strictEqual(isValidHttpUrl(null), false);
+  });
+
+  test('returns false for undefined', () => {
+    assert.strictEqual(isValidHttpUrl(undefined), false);
+  });
+
+  test('returns false for empty string', () => {
+    assert.strictEqual(isValidHttpUrl(''), false);
+  });
+
+  test('returns false for non-url strings', () => {
+    assert.strictEqual(isValidHttpUrl('just some text'), false);
+    assert.strictEqual(isValidHttpUrl('example.com'), false);
+    assert.strictEqual(isValidHttpUrl('/api/activity'), false);
+  });
+
+  test('returns false for ftp:// URLs', () => {
+    assert.strictEqual(isValidHttpUrl('ftp://example.com'), false);
+  });
+
+  test('returns false for mailto: URLs', () => {
+    assert.strictEqual(isValidHttpUrl('mailto:user@example.com'), false);
+  });
+
+  test('returns false for strings starting with Your placeholder', () => {
+    assert.strictEqual(isValidHttpUrl('Your Supabase URL'), false);
+    assert.strictEqual(isValidHttpUrl('Your-project-url'), false);
+  });
+});
+
+describe('getSupabaseConfig — env vars unset', () => {
+  test('returns null when NEXT_PUBLIC_SUPABASE_URL is unset', () => {
+    const originalUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+    const originalKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+    delete process.env.NEXT_PUBLIC_SUPABASE_URL;
+    delete process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+    try {
+      assert.strictEqual(getSupabaseConfig(), null);
+    } finally {
+      process.env.NEXT_PUBLIC_SUPABASE_URL = originalUrl;
+      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY = originalKey;
+    }
+  });
+
+  test('returns null when NEXT_PUBLIC_SUPABASE_ANON_KEY is unset', () => {
+    const originalUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+    const originalKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+    process.env.NEXT_PUBLIC_SUPABASE_URL = 'https://example.com';
+    delete process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+    try {
+      assert.strictEqual(getSupabaseConfig(), null);
+    } finally {
+      process.env.NEXT_PUBLIC_SUPABASE_URL = originalUrl;
+      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY = originalKey;
+    }
+  });
+});
+
+describe('matchesProtectedRoute', () => {
+  test('/arena matches', () => {
+    assert.strictEqual(matchesProtectedRoute('/arena'), true);
+  });
+
+  test('/arena/session matches', () => {
+    assert.strictEqual(matchesProtectedRoute('/arena/session'), true);
+  });
+
+  test('/practice matches', () => {
+    assert.strictEqual(matchesProtectedRoute('/practice'), true);
+  });
+
+  test('/practice/arrays matches', () => {
+    assert.strictEqual(matchesProtectedRoute('/practice/arrays'), true);
+  });
+
+  test('/profile matches', () => {
+    assert.strictEqual(matchesProtectedRoute('/profile'), true);
+  });
+
+  test('/profile/edit matches', () => {
+    assert.strictEqual(matchesProtectedRoute('/profile/edit'), true);
+  });
+
+  test('/login does not match', () => {
+    assert.strictEqual(matchesProtectedRoute('/login'), false);
+  });
+
+  test('/api/arena does not match (API routes are not protected)', () => {
+    assert.strictEqual(matchesProtectedRoute('/api/arena'), false);
+  });
+
+  test('/ does not match', () => {
+    assert.strictEqual(matchesProtectedRoute('/'), false);
+  });
+
+  test('/about does not match', () => {
+    assert.strictEqual(matchesProtectedRoute('/about'), false);
+  });
+});
diff --git a/security-tests/collaboration-rate-limit-client-ip.test.cjs b/security-tests/collaboration-rate-limit-client-ip.test.cjs
new file mode 100644
index 000000000..5ba70d7ca
--- /dev/null
+++ b/security-tests/collaboration-rate-limit-client-ip.test.cjs
@@ -0,0 +1,40 @@
+/**
+ * Regression tests for client IP extraction used by collaboration rate limiting.
+ *
+ * Goal: ensure routes do not trust spoofable leftmost X-Forwarded-For values.
+ */
+
+const test = require("node:test");
+const assert = require("node:assert/strict");
+const path = require("node:path");
+const { pathToFileURL } = require("node:url");
+
+const ipUrl = pathToFileURL(path.join(__dirname, "..", "src", "lib", "getClientIp.js")).href;
+
+async function load() {
+  return import(ipUrl);
+}
+
+test("getClientIp prefers x-real-ip over x-forwarded-for", async () => {
+  const { getClientIp } = await load();
+  const headers = new Headers({
+    "x-real-ip": "203.0.113.10",
+    "x-forwarded-for": "1.1.1.1, 2.2.2.2",
+  });
+  assert.equal(getClientIp(headers), "203.0.113.10");
+});
+
+test("getClientIp ignores x-forwarded-for (client-controlled, untrusted)", async () => {
+  const { getClientIp } = await load();
+  const headers = new Headers({
+    "x-forwarded-for": "10.0.0.1, 203.0.113.5, 192.168.1.9",
+  });
+  assert.equal(getClientIp(headers), "unknown");
+});
+
+test("getClientIp returns unknown when no IP headers exist", async () => {
+  const { getClientIp } = await load();
+  const headers = new Headers();
+  assert.equal(getClientIp(headers), "unknown");
+});
+
diff --git a/security-tests/generateLearningReminders.test.cjs b/security-tests/generateLearningReminders.test.cjs
new file mode 100644
index 000000000..84bdc339b
--- /dev/null
+++ b/security-tests/generateLearningReminders.test.cjs
@@ -0,0 +1,323 @@
+// security-tests/generateLearningReminders.test.cjs
+//
+// Run with:  node --experimental-detect-module --test security-tests/generateLearningReminders.test.cjs
+//
+// Tests generateLearningReminders in src/utils/generateLearningReminders.js.
+
+const { describe, test, mock } = require("node:test");
+const assert = require("node:assert/strict");
+
+function getLocalISOString(d) {
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+// Inline the source (pure function, no DOM/network dependencies).
+const msPerDay = 1000 * 60 * 60 * 24;
+
+function toDayIndex(val) {
+  const d = new Date(val);
+  if (typeof val === "string") {
+    const match = val.match(/^(\d{4})-(\d{2})-(\d{2})/);
+    if (match) {
+      const [_, y, m, date] = match;
+      return Math.floor(Date.UTC(Number(y), Number(m) - 1, Number(date)) / msPerDay);
+    }
+  }
+  return Math.floor(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()) / msPerDay);
+}
+
+function daysBetween(a, b) {
+  return toDayIndex(b) - toDayIndex(a);
+}
+
+function generateLearningReminders({
+  activityDates = [],
+  activityTypes = [],
+  modulesCount = 0,
+  completedModulesCount = 0,
+}) {
+  const reminders = [];
+  const today = new Date();
+
+  const normalizeDateString = (value) => {
+    if (typeof value !== "string") return null;
+    const candidate = value.split("T")[0];
+    return /^\d{4}-\d{2}-\d{2}$/.test(candidate) ? candidate : null;
+  };
+
+  const uniqueDates = Array.from(
+    new Set((activityDates || []).map(normalizeDateString).filter(Boolean))
+  ).sort();
+
+  const lastDate = uniqueDates.length ? new Date(uniqueDates[uniqueDates.length - 1]) : null;
+  const daysSinceLast = lastDate ? daysBetween(lastDate, today) : Infinity;
+
+  let currentStreak = 0;
+  if (uniqueDates.length) {
+    const lastDiff = daysBetween(uniqueDates[uniqueDates.length - 1], today);
+    if (lastDiff <= 1) {
+      let expectedDiff = lastDiff;
+      for (let i = uniqueDates.length - 1; i >= 0; i--) {
+        const d = uniqueDates[i];
+        const diff = daysBetween(d, today);
+        if (diff === expectedDiff) {
+          currentStreak++;
+          expectedDiff++;
+        } else if (diff < expectedDiff) {
+          continue;
+        } else {
+          break;
+        }
+      }
+    }
+  }
+
+  if (daysSinceLast > 0) {
+    reminders.push({
+      id: "practice_today",
+      type: "encouragement",
+      severity: "medium",
+      message: "test",
+    });
+  }
+
+  if (currentStreak >= 3 && daysSinceLast >= 1) {
+    reminders.push({
+      id: "streak_risk",
+      type: "streak",
+      severity: "high",
+      message: "test",
+    });
+  }
+
+  if (daysSinceLast >= 7) {
+    reminders.push({
+      id: "long_inactivity",
+      type: "warning",
+      severity: "high",
+      message: "test",
+    });
+  } else if (daysSinceLast >= 3) {
+    reminders.push({
+      id: "mild_inactivity",
+      type: "warning",
+      severity: "medium",
+      message: "test",
+    });
+  }
+
+  if (modulesCount > 0) {
+    const pct = Math.round((completedModulesCount / modulesCount) * 100 || 0);
+    if (pct >= 80 && pct < 100) {
+      reminders.push({ id: "near_completion", type: "nudge", severity: "low", message: "test" });
+    } else if (pct > 0 && pct < 80) {
+      reminders.push({ id: "keep_going", type: "encouragement", severity: "low", message: "test" });
+    } else if (pct === 100) {
+      reminders.push({ id: "congratulations", type: "achievement", severity: "low", message: "test" });
+    } else if (pct === 0) {
+      reminders.push({ id: "start_learning", type: "nudge", severity: "low", message: "test" });
+    }
+  }
+
+  const recentVisualizer = (activityTypes || []).find((t) => /visualizer/i.test(t));
+  if (!recentVisualizer) {
+    reminders.push({ id: "try_visualizer", type: "suggestion", severity: "low", message: "test" });
+  }
+
+  const map = new Map();
+  const priority = { high: 3, medium: 2, low: 1 };
+  reminders
+    .sort((a, b) => (priority[b.severity] || 0) - (priority[a.severity] || 0))
+    .slice(0, 5)
+    .forEach((r) => map.set(r.id, r));
+
+  return Array.from(map.values());
+}
+
+// ── Tests ────────────────────────────────────────────────────────────
+
+describe("empty inputs", () => {
+  test("with no activity, daysSinceLast is Infinity so long_inactivity and practice_today both fire", () => {
+    const reminders = generateLearningReminders({});
+    const ids = reminders.map((r) => r.id);
+    assert.ok(ids.includes("long_inactivity"), "long_inactivity fires with Infinity days since last");
+    assert.ok(ids.includes("practice_today"), "practice_today fires with Infinity days since last");
+    assert.ok(ids.includes("try_visualizer"), "try_visualizer fires without visualizer activity");
+    assert.ok(!ids.includes("mild_inactivity"), "mild_inactivity should not also fire (long takes precedence)");
+    assert.ok(!ids.includes("streak_risk"), "no streak_risk without streak >= 3");
+  });
+});
+
+describe("practice_today reminder", () => {
+  test("fires when there is no activity today", () => {
+    // Use a date far in the past so daysSinceLast > 0
+    const todayDate = new Date();
+    const oldDate = new Date(todayDate);
+    oldDate.setDate(oldDate.getDate() - 2);
+    const isoOld = getLocalISOString(oldDate);
+    const reminders = generateLearningReminders({ activityDates: [isoOld] });
+    const ids = reminders.map((r) => r.id);
+    assert.ok(ids.includes("practice_today"), "practice_today should fire when no activity today");
+  });
+});
+
+describe("streak_risk reminder", () => {
+  test("fires when streak >= 3 and last activity is more than 1 day ago", () => {
+    // 3 consecutive days ending 1 day ago: days 1,2,3 before today
+    const today = new Date();
+    const d1 = getLocalISOString(new Date(today.getTime() - 1 * msPerDay));
+    const d2 = getLocalISOString(new Date(today.getTime() - 2 * msPerDay));
+    const d3 = getLocalISOString(new Date(today.getTime() - 3 * msPerDay));
+    const dates = [d1, d2, d3];
+    const reminders = generateLearningReminders({ activityDates: dates });
+    const ids = reminders.map((r) => r.id);
+    assert.ok(ids.includes("streak_risk"), "streak_risk should fire for 3-day streak 1 day ago");
+  });
+
+  test("does not fire when streak < 3", () => {
+    const today = new Date();
+    const d0 = getLocalISOString(today);
+    const d1 = getLocalISOString(new Date(today.getTime() - 1 * msPerDay));
+    const dates = [d0, d1];
+    const reminders = generateLearningReminders({ activityDates: dates });
+    const ids = reminders.map((r) => r.id);
+    assert.ok(!ids.includes("streak_risk"), "streak_risk should not fire for streak < 3");
+  });
+});
+
+describe("inactivity reminders", () => {
+  test("fires long_inactivity when inactive for 7+ days", () => {
+    const today = new Date();
+    const old = new Date(today);
+    old.setDate(old.getDate() - 10);
+    const reminders = generateLearningReminders({ activityDates: [getLocalISOString(old)] });
+    const ids = reminders.map((r) => r.id);
+    assert.ok(ids.includes("long_inactivity"), "long_inactivity should fire after 7+ days");
+    assert.ok(!ids.includes("mild_inactivity"), "mild_inactivity should not also fire");
+  });
+
+  test("fires mild_inactivity when inactive for 3-6 days", () => {
+    const today = new Date();
+    const old = new Date(today);
+    old.setDate(old.getDate() - 4);
+    const reminders = generateLearningReminders({ activityDates: [getLocalISOString(old)] });
+    const ids = reminders.map((r) => r.id);
+    assert.ok(ids.includes("mild_inactivity"), "mild_inactivity should fire after 3-6 days");
+    assert.ok(!ids.includes("long_inactivity"), "long_inactivity should not fire");
+  });
+});
+
+describe("module progress reminders", () => {
+  test("near_completion fires at 80-99% complete", () => {
+    const reminders = generateLearningReminders({ modulesCount: 10, completedModulesCount: 8 });
+    const ids = reminders.map((r) => r.id);
+    assert.ok(ids.includes("near_completion"), "near_completion should fire at 80%");
+    assert.ok(!ids.includes("keep_going"), "keep_going should not fire");
+    assert.ok(!ids.includes("congratulations"), "congratulations should not fire");
+    assert.ok(!ids.includes("start_learning"), "start_learning should not fire");
+  });
+
+  test("keep_going fires at 1-79% complete", () => {
+    const reminders = generateLearningReminders({ modulesCount: 10, completedModulesCount: 3 });
+    const ids = reminders.map((r) => r.id);
+    assert.ok(ids.includes("keep_going"), "keep_going should fire at 30%");
+    assert.ok(!ids.includes("near_completion"), "near_completion should not fire");
+    assert.ok(!ids.includes("congratulations"), "congratulations should not fire");
+    assert.ok(!ids.includes("start_learning"), "start_learning should not fire");
+  });
+
+  test("congratulations fires at 100% complete", () => {
+    const reminders = generateLearningReminders({ modulesCount: 5, completedModulesCount: 5 });
+    const ids = reminders.map((r) => r.id);
+    assert.ok(ids.includes("congratulations"), "congratulations should fire at 100%");
+    assert.ok(!ids.includes("near_completion"), "near_completion should not fire");
+    assert.ok(!ids.includes("keep_going"), "keep_going should not fire");
+    assert.ok(!ids.includes("start_learning"), "start_learning should not fire");
+  });
+
+  test("start_learning fires at 0% with non-zero modules", () => {
+    const reminders = generateLearningReminders({ modulesCount: 5, completedModulesCount: 0 });
+    const ids = reminders.map((r) => r.id);
+    assert.ok(ids.includes("start_learning"), "start_learning should fire at 0%");
+    assert.ok(!ids.includes("keep_going"), "keep_going should not fire");
+  });
+});
+
+describe("visualizer suggestion", () => {
+  test("try_visualizer fires when no visualizer activity type", () => {
+    const reminders = generateLearningReminders({ activityTypes: ["site_visit", "dashboard"] });
+    const ids = reminders.map((r) => r.id);
+    assert.ok(ids.includes("try_visualizer"), "try_visualizer should fire without visualizer activity");
+  });
+
+  test("try_visualizer does not fire when visualizer activity is present", () => {
+    const reminders = generateLearningReminders({ activityTypes: ["visualizer_usage", "dashboard"] });
+    const ids = reminders.map((r) => r.id);
+    assert.ok(!ids.includes("try_visualizer"), "try_visualizer should not fire with visualizer activity");
+  });
+});
+
+describe("deduplication and limit", () => {
+  test("deduplicates reminders by id", () => {
+    // The function normalizes uniqueDates which prevents duplicate day entries
+    const today = new Date();
+    const d1 = getLocalISOString(today);
+    const d2 = getLocalISOString(new Date(today.getTime() - 1 * msPerDay));
+    // Only 2 unique dates → streak of 2 (< 3, so no streak_risk)
+    const reminders = generateLearningReminders({ activityDates: [d1, d1, d2, d2] });
+    const counts = {};
+    reminders.forEach((r) => { counts[r.id] = (counts[r.id] || 0) + 1; });
+    for (const id in counts) {
+      assert.equal(counts[id], 1, `reminder ${id} should appear exactly once`);
+    }
+  });
+
+  test("returns at most 5 reminders", () => {
+    // Trigger many different reminders
+    const today = new Date();
+    const old7 = new Date(today);
+    old7.setDate(old7.getDate() - 10);
+    const old2 = new Date(today);
+    old2.setDate(old2.getDate() - 2);
+    // 3-day streak ending 2 days ago
+    const streakDates = [
+      getLocalISOString(old2),
+      getLocalISOString(new Date(old2.getTime() - msPerDay)),
+      getLocalISOString(new Date(old2.getTime() - 2 * msPerDay)),
+    ];
+    const reminders = generateLearningReminders({
+      activityDates: streakDates,
+      modulesCount: 10,
+      completedModulesCount: 8,
+    });
+    assert.ok(reminders.length <= 5, "reminders should be capped at 5");
+  });
+});
+
+describe("priority ordering", () => {
+  test("high severity reminders come before medium and low", () => {
+    // Create a scenario with multiple reminder types
+    const today = new Date();
+    const old7 = new Date(today);
+    old7.setDate(old7.getDate() - 10);
+    const reminders = generateLearningReminders({
+      activityDates: [getLocalISOString(old7)],
+      modulesCount: 10,
+      completedModulesCount: 5,
+    });
+    const severities = reminders.map((r) => r.severity);
+    // high (3) should appear before medium (2) and low (1)
+    const highIdx = severities.indexOf("high");
+    const mediumIdx = severities.indexOf("medium");
+    const lowIdx = severities.indexOf("low");
+    if (highIdx !== -1 && mediumIdx !== -1) {
+      assert.ok(highIdx < mediumIdx, "high severity should come before medium");
+    }
+    if (mediumIdx !== -1 && lowIdx !== -1) {
+      assert.ok(mediumIdx < lowIdx, "medium severity should come before low");
+    }
+  });
+});
diff --git a/security-tests/linkedlist-xss.test.cjs b/security-tests/linkedlist-xss.test.cjs
new file mode 100644
index 000000000..a82ecc2fa
--- /dev/null
+++ b/security-tests/linkedlist-xss.test.cjs
@@ -0,0 +1,46 @@
+const test = require("node:test");
+const assert = require("node:assert/strict");
+const path = require("node:path");
+const { pathToFileURL } = require("node:url");
+
+test("createLinkedListTempNode renders untrusted input as text, not HTML", async () => {
+  const { JSDOM } = require("jsdom");
+  const dom = new JSDOM("<!doctype html><html><body></body></html>");
+
+  const helperUrl = pathToFileURL(
+    path.join(
+      __dirname,
+      "..",
+      "src/app/visualizer/linkedlist/utils/createTempNode.js",
+    ),
+  ).href;
+
+  const { createLinkedListTempNode } = await import(helperUrl);
+
+  const payload = `<img src=x onerror="globalThis.__xss = true">XSS`;
+  const node = createLinkedListTempNode({
+    value: payload,
+    nextText: "NULL",
+    doc: dom.window.document,
+  });
+
+  const dataPart = node.querySelector(".data-part");
+  assert.ok(dataPart, "expected .data-part to exist");
+
+  assert.equal(
+    dataPart.textContent,
+    payload,
+    "untrusted input must be assigned via textContent",
+  );
+  // In a safe implementation, HTML characters remain escaped in innerHTML.
+  // (We do not rely on inline handler execution semantics in JSDOM.)
+  assert.ok(
+    dataPart.innerHTML.includes("&lt;img"),
+    "untrusted input must remain escaped (no HTML parsing)",
+  );
+  assert.equal(
+    dataPart.querySelector("img"),
+    null,
+    "untrusted input must not be parsed into DOM elements",
+  );
+});
diff --git a/security-tests/radixSortLogic.test.cjs b/security-tests/radixSortLogic.test.cjs
new file mode 100644
index 000000000..fbacc0f77
--- /dev/null
+++ b/security-tests/radixSortLogic.test.cjs
@@ -0,0 +1,34 @@
+const test = require("node:test");
+const assert = require("node:assert/strict");
+
+async function loadRadixSortGenerator() {
+  const module = await import("../src/features/algorithms/array/radixSortLogic.js");
+  return module.radixSortGenerator;
+}
+
+function getCompletedArray(radixSortGenerator, input) {
+  const steps = [...radixSortGenerator(input)];
+  return steps.at(-1).payload.arr;
+}
+
+test("radixSortGenerator keeps positive-number sorting behavior", async () => {
+  const radixSortGenerator = await loadRadixSortGenerator();
+
+  assert.deepEqual(
+    getCompletedArray(radixSortGenerator, [170, 45, 75, 90, 802, 24, 2, 66]),
+    [2, 24, 45, 66, 75, 90, 170, 802],
+  );
+});
+
+test("radixSortGenerator sorts mixed negative and non-negative integers", async () => {
+  const radixSortGenerator = await loadRadixSortGenerator();
+
+  assert.deepEqual(
+    getCompletedArray(radixSortGenerator, [3, -1, 2, -10]),
+    [-10, -1, 2, 3],
+  );
+  assert.deepEqual(
+    getCompletedArray(radixSortGenerator, [-5, -10, 0, 2, 1]),
+    [-10, -5, 0, 1, 2],
+  );
+});
diff --git a/security-tests/rateLimit-outage.test.cjs b/security-tests/rateLimit-outage.test.cjs
new file mode 100644
index 000000000..b752d0fdc
--- /dev/null
+++ b/security-tests/rateLimit-outage.test.cjs
@@ -0,0 +1,122 @@
+/**
+ * Unit and integration tests for Redis rate-limiter fallback/outage behavior.
+ * Uses node:test runner for seamless ESM support and zero configuration dependencies.
+ */
+
+const { test, beforeEach } = require("node:test");
+const assert = require("node:assert/strict");
+const path = require("node:path");
+const { pathToFileURL } = require("node:url");
+
+// Pre-configure environment variables so that Redis connection is attempted
+process.env.UPSTASH_REDIS_REST_URL = "https://mock-redis.upstash.io";
+process.env.UPSTASH_REDIS_REST_TOKEN = "mock-token";
+process.env.SUPABASE_JWT_SECRET = "mock-jwt-secret-for-testing-only-12345";
+process.env.NODE_ENV = "production";
+
+// Set up mock Redis state
+let mockRedisInstance = {
+  pipeline: () => mockPipeline,
+  zrange: async () => [],
+  del: async () => 1,
+  scan: async () => [0, []],
+  incr: async () => 1,
+  expire: async () => 1,
+};
+
+let mockPipeline = {
+  zadd: () => mockPipeline,
+  zremrangebyscore: () => mockPipeline,
+  zcard: () => mockPipeline,
+  expire: () => mockPipeline,
+  exec: async () => [null, null, 1, null] // 1 request allowed
+};
+
+const rateLimitUrl = pathToFileURL(
+  path.join(__dirname, "..", "src", "lib", "rateLimit", "index.js"),
+).href;
+
+async function loadRateLimiter() {
+  const upstashRedisModule = await import("@upstash/redis");
+  const { Redis } = upstashRedisModule;
+  Redis.fromEnv = () => mockRedisInstance;
+  return import(rateLimitUrl);
+}
+
+beforeEach(async () => {
+  const { resetAll } = await loadRateLimiter();
+  await resetAll();
+});
+
+test("Redis rate limiter - Redis available (happy path)", async () => {
+  const { createRateLimiter } = await loadRateLimiter();
+  const limiter = createRateLimiter({ maxRequests: 5, windowSeconds: 60 });
+
+  // Mock Redis returns count = 1
+  mockPipeline.exec = async () => [null, null, 1, null];
+
+  const res = await limiter.check("test-user-happy");
+  assert.equal(res.allowed, true);
+  assert.equal(res.remaining, 4);
+});
+
+test("Redis rate limiter - Redis unavailable at startup (graceful fallback)", async () => {
+  const { createRateLimiter } = await loadRateLimiter();
+  const limiter = createRateLimiter({ maxRequests: 10, windowSeconds: 60 });
+
+  // Simulate startup failure - exec throws connection error
+  mockPipeline.exec = async () => {
+    throw new Error("Redis connection timed out (mock startup failure)");
+  };
+
+  const res = await limiter.check("test-user-startup");
+  // Outage fallback should activate, limit becomes 50% of 10 = 5.
+  // First request should be allowed.
+  assert.equal(res.allowed, true);
+  assert.equal(res.remaining, 4); // 5 (conservative limit) - 1
+});
+
+test("Redis rate limiter - Redis becomes unavailable during runtime and recovers", async () => {
+  const { createRateLimiter } = await loadRateLimiter();
+  const limiter = createRateLimiter({ maxRequests: 6, windowSeconds: 60 });
+
+  // 1. Start with Redis online
+  mockPipeline.exec = async () => [null, null, 1, null];
+  let res = await limiter.check("test-user-runtime");
+  assert.equal(res.allowed, true, "Should allow when online");
+  assert.equal(res.remaining, 5, "Remaining should be 5 when online");
+
+  // 2. Redis goes down
+  mockPipeline.exec = async () => {
+    throw new Error("Connection reset by peer (mock runtime failure)");
+  };
+  res = await limiter.check("test-user-runtime");
+  // Falls back to in-memory, conservative limit is 50% of 6 = 3.
+  // This is the first request handled in-memory, so memory count = 1.
+  // Remaining should be 3 - 1 = 2.
+  assert.equal(res.allowed, true, "Should still allow request via fallback");
+  assert.equal(res.remaining, 2, "Remaining should use conservative limit (3 - 1 = 2)");
+
+  // 3. Try again, should bypass Redis due to cooldown circuit breaker
+  let callCount = 0;
+  mockPipeline.exec = async () => {
+    callCount++;
+    return [null, null, 1, null];
+  };
+  
+  res = await limiter.check("test-user-runtime");
+  assert.equal(callCount, 0, "Should not hit Redis due to circuit breaker cooldown");
+  assert.equal(res.allowed, true);
+
+  // 4. Advance time past the 10-second cooldown (mock Date.now)
+  const realDateNow = Date.now;
+  Date.now = () => realDateNow() + 11000;
+
+  res = await limiter.check("test-user-runtime");
+  assert.equal(callCount, 1, "Should attempt to reach Redis after cooldown expired");
+  assert.equal(res.allowed, true, "Should recover and allow requests using Redis again");
+  assert.equal(res.remaining, 5, "Remaining count should be restored to normal limits");
+
+  // Restore Date.now
+  Date.now = realDateNow;
+});
diff --git a/security-tests/storage.test.cjs b/security-tests/storage.test.cjs
new file mode 100644
index 000000000..c4e6633a2
--- /dev/null
+++ b/security-tests/storage.test.cjs
@@ -0,0 +1,146 @@
+// security-tests/storage.test.cjs
+//
+// Run with:  node --experimental-detect-module --test security-tests/storage.test.cjs
+//
+// Tests localStorage utilities in src/utils/storage.js.
+
+const { describe, test, beforeEach, afterEach } = require("node:test");
+const assert = require("node:assert/strict");
+
+// Inlined source to avoid ESM import issues.
+const saveToStorage = (key, value) => {
+  if (typeof window !== "undefined") {
+    localStorage.setItem(key, JSON.stringify(value));
+  }
+};
+
+const loadFromStorage = (key, fallback) => {
+  if (typeof window !== "undefined") {
+    const item = localStorage.getItem(key);
+    if (item) {
+      try {
+        return JSON.parse(item);
+      } catch {
+        return fallback;
+      }
+    }
+  }
+  return fallback;
+};
+
+const removeFromStorage = (key) => {
+  if (typeof window !== "undefined") {
+    localStorage.removeItem(key);
+  }
+};
+
+// Mock localStorage for testing.
+// Set globalThis.window so the guard `typeof window !== "undefined"` passes in Node.js.
+globalThis.window = {};
+const store = {};
+const mockLocalStorage = {
+  getItem: (key) => store[key] ?? null,
+  setItem: (key, value) => { store[key] = value; },
+  removeItem: (key) => { delete store[key]; },
+  clear: () => { for (const k in store) delete store[k]; },
+};
+globalThis.localStorage = mockLocalStorage;
+
+// ── Tests ────────────────────────────────────────────────────────────
+
+describe("saveToStorage", () => {
+  beforeEach(() => { mockLocalStorage.clear(); });
+  afterEach(() => { mockLocalStorage.clear(); });
+
+  test("stores JSON-stringified value in localStorage", () => {
+    saveToStorage("theme", { mode: "dark", accent: "blue" });
+    assert.equal(store["theme"], JSON.stringify({ mode: "dark", accent: "blue" }));
+  });
+
+  test("stores primitive values as JSON", () => {
+    saveToStorage("count", 42);
+    assert.equal(store["count"], "42");
+  });
+
+  test("stores arrays correctly", () => {
+    saveToStorage("items", [1, 2, 3]);
+    assert.equal(store["items"], "[1,2,3]");
+  });
+
+  test("is no-op when localStorage is undefined (SSR)", () => {
+    // In true SSR (no window, no localStorage), function should not throw.
+    const savedWindow = globalThis.window;
+    const savedLS = globalThis.localStorage;
+    globalThis.window = undefined;
+    globalThis.localStorage = undefined;
+    saveToStorage("key", "value"); // must not throw
+    globalThis.window = savedWindow;
+    globalThis.localStorage = savedLS; // restore for next test
+  });
+});
+
+describe("loadFromStorage", () => {
+  beforeEach(() => { mockLocalStorage.clear(); });
+  afterEach(() => { mockLocalStorage.clear(); });
+
+  test("parses stored JSON and returns the value", () => {
+    store["user"] = JSON.stringify({ id: 1, name: "Alice" });
+    const result = loadFromStorage("user", null);
+    assert.deepStrictEqual(result, { id: 1, name: "Alice" });
+  });
+
+  test("returns fallback for missing key", () => {
+    const result = loadFromStorage("nonexistent", { default: true });
+    assert.deepStrictEqual(result, { default: true });
+  });
+
+  test("returns fallback when stored value is invalid JSON", () => {
+    store["bad"] = "not json {{{";
+    const result = loadFromStorage("bad", "fallback_value");
+    assert.equal(result, "fallback_value");
+  });
+
+  test("handles null-stored value correctly", () => {
+    store["nullval"] = "null"; // what JSON.stringify(null) produces
+    const result = loadFromStorage("nullval", "fallback");
+    // JSON.parse("null") returns null (valid JSON), not the fallback
+    assert.strictEqual(result, null);
+  });
+
+  test("returns fallback when localStorage is undefined (SSR)", () => {
+    const savedWindow = globalThis.window;
+    const savedLS = globalThis.localStorage;
+    globalThis.window = undefined;
+    globalThis.localStorage = undefined;
+    const result = loadFromStorage("anykey", "SSR_fallback");
+    assert.equal(result, "SSR_fallback");
+    globalThis.window = savedWindow;
+    globalThis.localStorage = savedLS; // restore for next test
+  });
+});
+
+describe("removeFromStorage", () => {
+  beforeEach(() => { mockLocalStorage.clear(); });
+  afterEach(() => { mockLocalStorage.clear(); });
+
+  test("removes the key from localStorage", () => {
+    store["temp"] = "data";
+    removeFromStorage("temp");
+    assert.equal(store["temp"], undefined);
+  });
+
+  test("is no-op for non-existent key", () => {
+    // Should not throw.
+    removeFromStorage("missing_key");
+  });
+
+  test("is no-op when localStorage is undefined (SSR)", () => {
+    const savedWindow = globalThis.window;
+    const savedLS = globalThis.localStorage;
+    globalThis.window = undefined;
+    globalThis.localStorage = undefined;
+    removeFromStorage("key"); // must not throw
+    globalThis.window = savedWindow;
+    globalThis.localStorage = savedLS; // restore for next test
+  });
+});
diff --git a/security-tests/trieLogic.test.cjs b/security-tests/trieLogic.test.cjs
new file mode 100644
index 000000000..a288248d6
--- /dev/null
+++ b/security-tests/trieLogic.test.cjs
@@ -0,0 +1,48 @@
+const test = require("node:test");
+const assert = require("node:assert/strict");
+const path = require("node:path");
+const { pathToFileURL } = require("node:url");
+
+test("trieLogic - insert, search, and prefix search", async () => {
+  const logicUrl = pathToFileURL(
+    path.join(
+      __dirname,
+      "..",
+      "src/features/algorithms/tree/trieLogic.js",
+    ),
+  ).href;
+
+  const { TrieNode, insertGenerator, searchGenerator, prefixSearchGenerator } = await import(logicUrl);
+
+  const root = new TrieNode("", "root");
+
+  // Verify initial insert generator steps
+  const steps = [...insertGenerator(root, "cat", 0)];
+  assert.ok(steps.length > 0, "Insert generator should produce steps");
+  
+  // Last step should have the final tree structure
+  const finalStep = steps[steps.length - 1];
+  assert.ok(finalStep.tree, "Final step should contain the updated tree");
+  assert.equal(finalStep.newNodeIdCounter, 3, "newNodeIdCounter should be 3 for 'cat' starting at 0");
+
+  const finalTree = finalStep.tree;
+  assert.ok(finalTree.children["c"], "c should be present in children");
+  assert.ok(finalTree.children["c"].children["a"], "a should be present under c");
+  assert.ok(finalTree.children["c"].children["a"].children["t"], "t should be present under a");
+  assert.equal(finalTree.children["c"].children["a"].children["t"].isEndOfWord, true, "t node should be end of word");
+
+  // Verify search generator
+  const searchSteps = [...searchGenerator(finalTree, "cat")];
+  const lastSearchStep = searchSteps[searchSteps.length - 1];
+  assert.ok(lastSearchStep.explanation.includes("exists in the Trie"), "Search for 'cat' should succeed");
+
+  // Verify search for non-existent word
+  const searchStepsFail = [...searchGenerator(finalTree, "dog")];
+  const lastSearchStepFail = searchStepsFail[searchStepsFail.length - 1];
+  assert.ok(lastSearchStepFail.explanation.includes("missing") || lastSearchStepFail.explanation.includes("failed"), "Search for 'dog' should fail");
+
+  // Verify prefix search
+  const prefixSteps = [...prefixSearchGenerator(finalTree, "ca")];
+  const lastPrefixStep = prefixSteps[prefixSteps.length - 1];
+  assert.ok(lastPrefixStep.explanation.includes("Prefix exists"), "Prefix search for 'ca' should succeed");
+});
diff --git a/src/app/(auth)/auth/callback/route.js b/src/app/(auth)/auth/callback/route.js
new file mode 100644
index 000000000..b185881ff
--- /dev/null
+++ b/src/app/(auth)/auth/callback/route.js
@@ -0,0 +1,42 @@
+import { NextResponse } from 'next/server';
+import { createServerClient } from '@supabase/ssr';
+import { cookies } from 'next/headers';
+
+export async function GET(request) {
+  const code = request.nextUrl.searchParams.get('code');
+  const next = request.nextUrl.searchParams.get('next') ?? '/';
+
+  if (code) {
+    const cookieStore = await cookies();
+    const supabase = createServerClient(
+      process.env.NEXT_PUBLIC_SUPABASE_URL,
+      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+      {
+        cookies: {
+          getAll() {
+            return cookieStore.getAll();
+          },
+          setAll(cookiesToSet) {
+            cookiesToSet.forEach(({ name, value, options }) => {
+              cookieStore.set(name, value, options);
+            });
+          },
+        },
+      }
+    );
+
+    const { error } = await supabase.auth.exchangeCodeForSession(code);
+    if (!error) {
+      const redirectUrl = request.nextUrl.clone();
+      redirectUrl.pathname = next;
+      redirectUrl.search = '';
+      return NextResponse.redirect(redirectUrl);
+    }
+  }
+
+  // Return the user to an error page with some instructions
+  const errorUrl = request.nextUrl.clone();
+  errorUrl.pathname = '/login';
+  errorUrl.search = '?error=auth_callback_failed';
+  return NextResponse.redirect(errorUrl);
+}
diff --git a/src/app/(auth)/login/page.jsx b/src/app/(auth)/login/page.jsx
new file mode 100644
index 000000000..b17e65f33
--- /dev/null
+++ b/src/app/(auth)/login/page.jsx
@@ -0,0 +1,6 @@
+import AuthForm from "@/app/components/ui/AuthForm";
+
+export default function LoginPage() {
+  return <AuthForm isLogin={true} />;
+}
+
diff --git a/src/app/(auth)/signup/page.jsx b/src/app/(auth)/signup/page.jsx
new file mode 100644
index 000000000..33085e9e1
--- /dev/null
+++ b/src/app/(auth)/signup/page.jsx
@@ -0,0 +1,29 @@
+"use client";
+import { Moon, Sun } from "lucide-react";
+import AuthForm from "@/app/components/ui/AuthForm";
+import { useTheme } from "@/app/hooks/useTheme";
+
+export default function SignupPage() {
+  const { theme, mounted: themeMounted, toggleTheme } = useTheme();
+
+  return (
+    <>
+      <AuthForm isLogin={false} />
+      <button
+        onClick={toggleTheme}
+        aria-label={
+          themeMounted
+            ? `Switch to ${theme === "light" ? "dark" : "light"} mode`
+            : "Toggle theme"
+        }
+        className="fixed top-4 right-4 w-9 h-9 flex items-center justify-center rounded-full text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-udemy-dark-surface transition-colors focus-ring z-[9999]"
+      >
+        {!themeMounted || theme === "light" ? (
+          <Moon className="w-5 h-5" />
+        ) : (
+          <Sun className="w-5 h-5" />
+        )}
+      </button>
+    </>
+  );
+}
diff --git a/src/app/(marketing)/code-of-conduct/page.jsx b/src/app/(marketing)/code-of-conduct/page.jsx
new file mode 100644
index 000000000..279fdf49d
--- /dev/null
+++ b/src/app/(marketing)/code-of-conduct/page.jsx
@@ -0,0 +1,17 @@
+import CodeOfConductContent from "@/app/components/CodeOfConductContent";
+import Footer from "@/app/components/footer";
+
+export default function CodeOfConductPage() {
+  return (
+    <main className="min-h-screen bg-white dark:bg-black text-black dark:text-white">
+      <div className="max-w-5xl mx-auto px-6 py-12">
+        <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-10">
+          Code Of Conduct
+        </h1>
+
+        <CodeOfConductContent />
+      </div>
+      <Footer/>
+    </main>
+  );
+}
diff --git a/src/app/(marketing)/community/page.jsx b/src/app/(marketing)/community/page.jsx
new file mode 100644
index 000000000..1d171a4f8
--- /dev/null
+++ b/src/app/(marketing)/community/page.jsx
@@ -0,0 +1,211 @@
+"use client";
+import { Suspense, useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import Footer from "@/app/components/footer";
+import UserProfileCard from "@/app/components/community/UserProfileCard";
+import CoreTeamSection from "@/app/components/community/CoreTeamSection";
+import ContributorsSection from "@/app/components/community/ContributorsSection";
+import JoinCommunityButton from "@/app/components/community/JoinCommunityButton";
+
+const containerVariants = {
+  hidden: {},
+  visible: {
+    transition: { staggerChildren: 0.1 },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
+};
+
+function ProfileSkeleton() {
+  return (
+    <div className="p-6 rounded-2xl bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-700/60 shadow-sm flex flex-col items-center">
+      <div className="skeleton-shimmer w-36 h-36 rounded-full mb-4" />
+      <div className="skeleton-shimmer h-5 w-28 mb-2" />
+      <div className="skeleton-shimmer h-4 w-40 mb-4" />
+      <div className="skeleton-shimmer h-3 w-48 mb-5" />
+      <div className="w-full h-[1px] bg-slate-100 dark:bg-neutral-700 my-4" />
+      <div className="w-full flex justify-between gap-2 py-2">
+        <div className="flex-1 flex flex-col items-center gap-2">
+          <div className="skeleton-shimmer h-5 w-8" />
+          <div className="skeleton-shimmer h-3 w-12" />
+        </div>
+        <div className="flex-1 flex flex-col items-center gap-2">
+          <div className="skeleton-shimmer h-5 w-8" />
+          <div className="skeleton-shimmer h-3 w-12" />
+        </div>
+        <div className="flex-1 flex flex-col items-center gap-2">
+          <div className="skeleton-shimmer h-5 w-8" />
+          <div className="skeleton-shimmer h-3 w-12" />
+        </div>
+      </div>
+      <div className="w-full h-[1px] bg-slate-100 dark:bg-neutral-700 my-4" />
+      <div className="w-full space-y-3 mt-2">
+        <div className="skeleton-shimmer h-3 w-12" />
+        <div className="flex items-center gap-2">
+          <div className="skeleton-shimmer w-5 h-5 rounded" />
+          <div className="space-y-1 flex-1">
+            <div className="skeleton-shimmer h-3 w-16" />
+            <div className="skeleton-shimmer h-2 w-28" />
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="skeleton-shimmer w-5 h-5 rounded" />
+          <div className="space-y-1 flex-1">
+            <div className="skeleton-shimmer h-3 w-16" />
+            <div className="skeleton-shimmer h-2 w-28" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CoreTeamSkeleton() {
+  return (
+    <div className="w-full">
+      <div className="flex items-center gap-3 mb-6">
+        <div className="skeleton-shimmer w-6 h-6 rounded" />
+        <div className="space-y-2">
+          <div className="skeleton-shimmer h-5 w-24" />
+          <div className="skeleton-shimmer h-3 w-36" />
+        </div>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div
+            key={i}
+            className="flex flex-col items-center p-5 rounded-2xl bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-700/60 shadow-sm"
+          >
+            <div className="skeleton-shimmer w-20 h-20 rounded-full mb-3" />
+            <div className="skeleton-shimmer h-3 w-12 mb-2" />
+            <div className="skeleton-shimmer h-4 w-20 mb-1" />
+            <div className="skeleton-shimmer h-3 w-24 mb-4" />
+            <div className="flex gap-2">
+              <div className="skeleton-shimmer w-5 h-5 rounded-full" />
+              <div className="skeleton-shimmer w-5 h-5 rounded-full" />
+              <div className="skeleton-shimmer w-5 h-5 rounded-full" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ContributorsGridSkeleton() {
+  return (
+    <div className="w-full">
+      <div className="flex items-center gap-3 mb-6">
+        <div className="skeleton-shimmer w-6 h-6 rounded" />
+        <div className="space-y-2">
+          <div className="skeleton-shimmer h-5 w-24" />
+          <div className="skeleton-shimmer h-3 w-40" />
+        </div>
+      </div>
+      <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-7 gap-4 justify-items-center">
+        {Array.from({ length: 14 }).map((_, i) => (
+          <div key={i} className="flex flex-col items-center p-2">
+            <div className="skeleton-shimmer w-14 h-14 rounded-full mb-2" />
+            <div className="skeleton-shimmer h-3.5 w-16 mb-1" />
+            <div className="skeleton-shimmer h-2.5 w-10" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function CommunityPage() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <section className="min-h-screen bg-[#f9f9fc] dark:bg-neutral-900">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-28 pb-16">
+          <div className="flex flex-col lg:flex-row gap-8">
+            <aside className="w-full lg:w-80 flex-shrink-0">
+              <ProfileSkeleton />
+            </aside>
+            <main className="flex-1 min-w-0">
+              <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-6">
+                <div className="space-y-2">
+                  <div className="skeleton-shimmer h-8 w-40" />
+                  <div className="skeleton-shimmer h-4 w-72" />
+                </div>
+                <div className="skeleton-shimmer h-10 w-36" />
+              </div>
+              <div className="rounded-2xl bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-700/60 p-6 sm:p-8 shadow-sm space-y-12">
+                <CoreTeamSkeleton />
+                <div className="border-t border-slate-100 dark:border-neutral-700/60 pt-10">
+                  <ContributorsGridSkeleton />
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="min-h-screen bg-[#f9f9fc] dark:bg-neutral-900">
+      <motion.div
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-28 pb-16"
+      >
+        <div className="flex flex-col lg:flex-row gap-8">
+          {/* Left Column - User Profile Card */}
+          <motion.aside
+            variants={itemVariants}
+            className="w-full lg:w-80 flex-shrink-0"
+          >
+            <div className="lg:sticky lg:top-28">
+              <Suspense fallback={<ProfileSkeleton />}>
+                <UserProfileCard />
+              </Suspense>
+            </div>
+          </motion.aside>
+
+          {/* Right Column - Team Details */}
+          <motion.main variants={itemVariants} className="flex-1 min-w-0">
+            {/* Header section with The Team title & Join Community button */}
+            <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-6">
+              <div>
+                <h1 className="text-3xl font-extrabold text-slate-800 dark:text-white tracking-tight">The Team</h1>
+                <p className="text-sm text-slate-500 dark:text-slate-400 mt-2 max-w-2xl leading-relaxed">
+                  Meet the amazing people behind AlgoBuddy who build, design and scale the platform
+                  to help developers learn and grow.
+                </p>
+              </div>
+              <div className="flex-shrink-0">
+                <JoinCommunityButton />
+              </div>
+            </div>
+
+            {/* Container for Team and Contributors */}
+            <div className="rounded-2xl bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-700/60 p-6 sm:p-8 shadow-sm space-y-12">
+              <Suspense fallback={<CoreTeamSkeleton />}>
+                <CoreTeamSection />
+              </Suspense>
+
+              <Suspense fallback={<ContributorsGridSkeleton />}>
+                <ContributorsSection />
+              </Suspense>
+            </div>
+          </motion.main>
+        </div>
+      </motion.div>
+
+      <Footer />
+    </section>
+  );
+}
diff --git a/src/app/(marketing)/cookie/page.jsx b/src/app/(marketing)/cookie/page.jsx
new file mode 100644
index 000000000..3e38ae73e
--- /dev/null
+++ b/src/app/(marketing)/cookie/page.jsx
@@ -0,0 +1,16 @@
+import CookiePolicyContent from "@/app/components/CookiePolicyContent";
+import Footer from "@/app/components/footer";
+
+export const metadata = {
+  title: "Cookies Policy | AlgoBuddy",
+  description: "Cookie policy for AlgoBuddy.",
+};
+
+export default function CookiesPage() {
+  return (
+    <main className="min-h-screen">
+      <CookiePolicyContent />
+      <Footer/>
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/src/app/(marketing)/page.jsx b/src/app/(marketing)/page.jsx
new file mode 100644
index 000000000..927649db2
--- /dev/null
+++ b/src/app/(marketing)/page.jsx
@@ -0,0 +1,55 @@
+import Hero from "@/app/components/hero";
+import ConceptsSection from "@/app/components/ConceptsSection";
+import PersonalizedSection from "@/app/components/PersonalizedSection";
+import Footer from "@/app/components/footer";
+import BottomAd from "@/app/components/ads/bottom";
+
+export const metadata = {
+  title: "AlgoBuddy | Visualize & Learn DSA the Smart Way",
+  description:
+    "Master Data Structures and Algorithms with interactive visualizations. Perfect for students, beginners, and interview prep. Visualize Stack, Queue, Tree, Graph, Sorting & more.",
+  keywords: [
+    "DSA Visualizer",
+    "Algorithm Visualizer",
+    "Learn DSA",
+    "Practice DSA Problems",
+    "DSA Quizzes",
+    "Interactive DSA",
+    "Sorting Algorithms",
+    "Searching Algorithms",
+    "Stack",
+    "Queue",
+    "Tree",
+    "Linked List",
+    "Heap Sort",
+    "Tree Traversal",
+    "Linear Search",
+    "Bubble Sort",
+    "Singly Linked List",
+    "Doubly Linked List",
+    "Circular Linked List",
+    "Data Structures for Beginners",
+    "DSA Practice Platform",
+    "Quiz for DSA",
+    "Algorithm Quiz",
+    "Interactive Algorithm Quiz",
+    "Learn DSA with Quizzes",
+  ],
+  robots: "index, follow",
+};
+
+export default function Home() {
+  return (
+    <>
+      <div className="landing-page visualizer-page min-h-screen bg-surface-50 dark:bg-surface-900">
+        <div id="hero">
+          <Hero />
+        </div>
+        <PersonalizedSection />
+        <ConceptsSection />
+        <Footer />
+      </div>
+    </>
+  );
+}
+
diff --git a/src/app/(marketing)/privacy/page.jsx b/src/app/(marketing)/privacy/page.jsx
new file mode 100644
index 000000000..97ff0fd2b
--- /dev/null
+++ b/src/app/(marketing)/privacy/page.jsx
@@ -0,0 +1,22 @@
+"use client";
+import PrivacyPolicyContent from "@/app/components/PrivacyPolicyContent";
+import Link from "next/link";
+import Footer from "@/app/components/footer";
+
+
+export default function PrivacyPage() {
+  return (
+    <main className="min-h-screen">
+      <div className="mx-auto max-w-6xl px-6 py-12 lg:py-16">
+        <Link
+          href="/"
+          className="inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors mb-8"
+        >
+          <span className="mr-2">←</span> Back to Home
+        </Link>
+        <PrivacyPolicyContent />
+      </div>
+      <Footer/>
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/src/app/(marketing)/terms/page.jsx b/src/app/(marketing)/terms/page.jsx
new file mode 100644
index 000000000..242aa1c78
--- /dev/null
+++ b/src/app/(marketing)/terms/page.jsx
@@ -0,0 +1,16 @@
+import TermsOfServiceContent from "@/app/components/TermsOfServiceContent";
+import Footer from "@/app/components/footer";
+
+export const metadata = {
+  title: "Terms of Service | AlgoBuddy",
+  description: "Terms and conditions for using AlgoBuddy.",
+};
+
+export default function TermsPage() {
+  return (
+    <main className="min-h-screen">
+      <TermsOfServiceContent />
+      <Footer/>
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/src/app/about/page.jsx b/src/app/about/page.jsx
new file mode 100644
index 000000000..cb22dc00f
--- /dev/null
+++ b/src/app/about/page.jsx
@@ -0,0 +1,15 @@
+import AboutSection from "@/app/components/about";
+
+export const metadata = {
+  title: "About | AlgoBuddy",
+  description:
+    "Learn more about AlgoBuddy, its mission, and how it helps students understand algorithms and data structures through interactive learning."
+};
+
+export default function AboutPage() {
+  return (
+    <>
+      <AboutSection />
+    </>
+  );
+}
diff --git a/src/app/api/activity/route.js b/src/app/api/activity/route.js
new file mode 100644
index 000000000..723584658
--- /dev/null
+++ b/src/app/api/activity/route.js
@@ -0,0 +1,90 @@
+import { cookies } from "next/headers";
+import { getAuthenticatedUser } from "@/lib/auth";
+import { getSupabaseServerClient, jsonResponse, errorResponse } from "@/lib/serverApi";
+
+export async function POST(request) {
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse({ error: "Authentication required" }, authResult.type === "CONFIG_ERROR" ? 500 : 401);
+    }
+    const body = await request.json().catch(() => ({}));
+    const { type } = body;
+
+    // Prefer the client-supplied local date (YYYY-MM-DD) so the activity row
+    // reflects the user's own calendar day rather than the server's UTC date.
+    // Fall back to UTC date when the client does not send one.
+    let localDate = typeof body.localDate === "string" && /^\d{4}-\d{2}-\d{2}$/.test(body.localDate)
+      ? body.localDate
+      : new Date().toISOString().split("T")[0];
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+    const { data: existing, error: fetchError } = await supabase
+      .from("user_activity")
+      .select("type")
+      .eq("user_id", authResult.user.id)
+      .eq("activity_date", localDate)
+      .maybeSingle();
+
+    if (fetchError) return jsonResponse({ error: fetchError.message }, 500);
+
+    const mergedType = existing
+      ? Array.from(new Set([existing.type, type || "site_visit"])).join(",")
+      : (type || "site_visit");
+
+    let { data, error } = await supabase
+      .from("user_activity")
+      .upsert(
+        { user_id: authResult.user.id, activity_date: localDate, type: mergedType },
+        { onConflict: "user_id, activity_date" }
+      );
+
+    if (error) {
+      const errorCode = error?.code;
+      if (errorCode === '42501') {
+        return jsonResponse({ error: "Permission denied: check RLS policies on user_activity table" }, 403);
+      }
+      return jsonResponse({ error: error.message }, 500);
+    }
+    return jsonResponse({ success: true });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+export async function GET(request) {
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse({ error: "Authentication required" }, authResult.type === "CONFIG_ERROR" ? 500 : 401);
+    }
+    const MAX_DAYS = 365;
+    const { searchParams } = new URL(request.url);
+    const rawDays = parseInt(searchParams.get("days") || "30", 10);
+    const days = Number.isFinite(rawDays) ? Math.min(Math.max(rawDays, 1), MAX_DAYS) : 30;
+    const since = new Date();
+    since.setDate(since.getDate() - days);
+    const sinceStr = since.toISOString();
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+    let { data, error } = await supabase
+      .from("user_activity")
+      .select("activity_date, created_at")
+      .eq("user_id", authResult.user.id)
+      .gte("created_at", sinceStr)
+      .order("created_at", { ascending: false })
+      .limit(1000);
+
+    if (error) {
+      const errorCode = error?.code;
+      if (errorCode === '42501') {
+        return jsonResponse({ error: "Permission denied: check RLS policies on user_activity table" }, 403);
+      }
+      return jsonResponse({ error: error.message }, 500);
+    }
+    return jsonResponse(data || []);
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/activity/streak/route.js b/src/app/api/activity/streak/route.js
new file mode 100644
index 000000000..72e226171
--- /dev/null
+++ b/src/app/api/activity/streak/route.js
@@ -0,0 +1,29 @@
+import { cookies } from "next/headers";
+import { getAuthenticatedUser } from "@/lib/auth";
+import { getSupabaseServerClient, jsonResponse, errorResponse } from "@/lib/serverApi";
+
+export async function GET(request) {
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse({ error: "Authentication required" }, authResult.type === "CONFIG_ERROR" ? 500 : 401);
+    }
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    const { data, error } = await supabase
+      .from("user_practice_stats")
+      .select("current_streak, longest_streak")
+      .eq("user_id", authResult.user.id)
+      .maybeSingle();
+
+    if (error) return jsonResponse({ error: error.message }, 500);
+
+    return jsonResponse({
+      streak: data?.current_streak ?? 0,
+      longestStreak: data?.longest_streak ?? 0,
+    });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/applications/[id]/route.js b/src/app/api/applications/[id]/route.js
new file mode 100644
index 000000000..de33cdcb6
--- /dev/null
+++ b/src/app/api/applications/[id]/route.js
@@ -0,0 +1,119 @@
+import { getAuthenticatedUser } from "@/lib/auth";
+import { getSupabaseAdmin, jsonResponse, errorResponse } from "@/lib/serverApi";
+import { sendEmail } from "@/lib/email";
+
+export async function PATCH(request, { params }) {
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse({ error: "Authentication required" }, 401);
+    }
+
+    const adminClient = getSupabaseAdmin();
+
+    const { data: profile } = await adminClient
+      .from("user_profiles")
+      .select("role")
+      .eq("id", authResult.user.id)
+      .single();
+
+    if (!profile || profile.role !== "admin") {
+      return jsonResponse({ error: "Admin access required" }, 403);
+    }
+
+    const { id } = await params;
+    const body = await request.json().catch(() => ({}));
+    const { status } = body;
+
+    if (!status || !["accepted", "rejected", "reviewing"].includes(status)) {
+      return jsonResponse({ error: "Invalid status value" }, 400);
+    }
+
+    const { data: application, error: fetchError } = await adminClient
+      .from("applications")
+      .select("*, job:job_id(title, company)")
+      .eq("id", id)
+      .single();
+
+    if (fetchError || !application) {
+      return jsonResponse({ error: "Application not found" }, 404);
+    }
+
+    if (application.status === status) {
+      return jsonResponse({ error: `Application is already ${status}` }, 400);
+    }
+
+    const oldStatus = application.status;
+
+    const { error: updateError } = await adminClient
+      .from("applications")
+      .update({ status, updated_at: new Date().toISOString() })
+      .eq("id", id);
+
+    if (updateError) {
+      console.error("[/api/applications/[id] PATCH] Supabase error:", updateError.message);
+      return jsonResponse({ error: updateError.message }, 500);
+    }
+
+    // Map every valid status to its own label. The previous binary ternary
+    // (`status === "accepted" ? "accepted" : "rejected"`) silently mislabeled
+    // "reviewing" updates as "rejected" in both the notification and email.
+    const STATUS_LABELS = {
+      accepted: "accepted",
+      rejected: "rejected",
+      reviewing: "moved to review",
+    };
+    const statusLabel = STATUS_LABELS[status] ?? status;
+    const jobTitle = application.job?.title || "a job";
+    const companyName = application.job?.company || "";
+
+    const { error: notifError } = await adminClient
+      .from("notifications")
+      .insert({
+        student_id: application.student_id,
+        job_id: application.job_id,
+        message: `Your application for ${jobTitle}${companyName ? ` at ${companyName}` : ""} has been ${statusLabel}.`,
+        type: "application_status_update",
+        metadata: { old_status: oldStatus, new_status: status },
+      });
+
+    if (notifError) {
+      console.error("[/api/applications/[id] PATCH] Notification insert error:", notifError.message);
+    }
+
+    const { data: studentUser } = await adminClient.auth.admin.getUserById(
+      application.student_id
+    );
+    const studentMeta = studentUser?.user?.user_metadata || {};
+    const emailNotificationsEnabled = studentMeta.email_notifications !== false;
+
+    if (emailNotificationsEnabled) {
+      const appUrl = process.env.NEXT_PUBLIC_URL || "http://localhost:3000";
+      await sendEmail({
+        to: application.student_email,
+        subject: `Application Update - ${companyName} - ${jobTitle}`,
+        html: `
+          <div style="font-family: sans-serif; max-width: 480px; margin: 0 auto;">
+            <h2 style="color: #1e293b;">Application Status Update</h2>
+            <p style="color: #475569; line-height: 1.6;">
+              Your application for <strong>${jobTitle}</strong> at <strong>${companyName}</strong>
+              has been <strong>${statusLabel}</strong>.
+            </p>
+            <a href="${appUrl}/my-applications"
+               style="display: inline-block; padding: 10px 20px; background: #6366f1; color: white;
+                      text-decoration: none; border-radius: 8px; font-size: 14px; margin-top: 12px;">
+              View your applications
+            </a>
+            <p style="color: #94a3b8; font-size: 12px; margin-top: 24px;">
+              You can change email notification preferences in your profile settings.
+            </p>
+          </div>
+        `,
+      });
+    }
+
+    return jsonResponse({ success: true, status });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/applications/export/route.js b/src/app/api/applications/export/route.js
new file mode 100644
index 000000000..58f41dc88
--- /dev/null
+++ b/src/app/api/applications/export/route.js
@@ -0,0 +1,97 @@
+import { cookies } from "next/headers";
+import { getAuthenticatedUser } from "@/lib/auth";
+import { getSupabaseServerClient, errorResponse } from "@/lib/serverApi";
+
+function escapeCSV(value) {
+  if (value == null) return "";
+  const str = String(value);
+  if (str.includes(",") || str.includes('"') || str.includes("\n")) {
+    return `"${str.replace(/"/g, '""')}"`;
+  }
+  return str;
+}
+
+function toCSV(rows, columns) {
+  const header = columns.map((c) => escapeCSV(c.label)).join(",");
+  const body = rows
+    .map((row) => columns.map((c) => escapeCSV(row[c.key])).join(","))
+    .join("\n");
+  return header + "\n" + body + "\n";
+}
+
+export async function GET(request) {
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return new Response("Authentication required", { status: 401 });
+    }
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    const BATCH_SIZE = 100;
+    let offset = 0;
+    let allApplications = [];
+    let hasMore = true;
+
+    while (hasMore) {
+      const { data: batch, error: batchError } = await supabase
+        .from("applications")
+        .select("*, job:job_id(title, company, location, salary_range, job_type)")
+        .eq("student_id", authResult.user.id)
+        .order("applied_at", { ascending: false })
+        .range(offset, offset + BATCH_SIZE - 1);
+
+      if (batchError) {
+        console.error("[/api/applications/export GET] Supabase error:", batchError.message);
+        return new Response("Export failed", { status: 500 });
+      }
+
+      allApplications = allApplications.concat(batch || []);
+      offset += BATCH_SIZE;
+      hasMore = batch && batch.length === BATCH_SIZE;
+    }
+
+    const columns = [
+      { key: "job_title", label: "Job Title" },
+      { key: "company", label: "Company" },
+      { key: "location", label: "Location" },
+      { key: "job_type", label: "Job Type" },
+      { key: "salary_range", label: "Salary Range" },
+      { key: "status", label: "Application Status" },
+      { key: "applied_at", label: "Applied Date" },
+      { key: "student_name", label: "Your Name" },
+      { key: "student_email", label: "Your Email" },
+      { key: "student_branch", label: "Branch" },
+      { key: "student_cgpa", label: "CGPA" },
+      { key: "student_skills", label: "Skills" },
+    ];
+
+    const rows = allApplications.map((a) => ({
+      job_title: a.job?.title || "",
+      company: a.job?.company || "",
+      location: a.job?.location || "",
+      job_type: a.job?.job_type || "",
+      salary_range: a.job?.salary_range || "",
+      status: a.status || "",
+      applied_at: a.applied_at ? new Date(a.applied_at).toLocaleDateString() : "",
+      student_name: a.student_name || "",
+      student_email: a.student_email || "",
+      student_branch: a.student_branch || "",
+      student_cgpa: a.student_cgpa || "",
+      student_skills: a.student_skills || "",
+    }));
+
+    const csv = toCSV(rows, columns);
+
+    return new Response(csv, {
+      status: 200,
+      headers: {
+        "Content-Type": "text/csv; charset=utf-8",
+        "Content-Disposition": `attachment; filename="applications-export-${Date.now()}.csv"`,
+      },
+    });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/applications/route.js b/src/app/api/applications/route.js
new file mode 100644
index 000000000..3a8bf06ba
--- /dev/null
+++ b/src/app/api/applications/route.js
@@ -0,0 +1,114 @@
+import { cookies } from "next/headers";
+import { getAuthenticatedUser } from "@/lib/auth";
+import { getSupabaseServerClient, jsonResponse, errorResponse } from "@/lib/serverApi";
+import { validateCsrfOrigin } from "@/lib/csrfConstants";
+
+export async function POST(request) {
+  if (!validateCsrfOrigin(request)) {
+    return jsonResponse({ error: "CSRF validation failed: untrusted origin" }, 403);
+  }
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse({ error: "Authentication required" }, 401);
+    }
+
+    const body = await request.json().catch(() => ({}));
+    const { jobId } = body;
+
+    if (!jobId) {
+      return jsonResponse({ error: "jobId is required" }, 400);
+    }
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    const { data: job, error: jobError } = await supabase
+      .from("jobs")
+      .select("id, title, company, status")
+      .eq("id", jobId)
+      .single();
+
+    if (jobError || !job) {
+      return jsonResponse({ error: "Job not found" }, 404);
+    }
+
+    if (job.status !== "approved") {
+      return jsonResponse({ error: "This job is not open for applications" }, 400);
+    }
+
+    const meta = authResult.user.user_metadata || {};
+    const studentName = meta.name || authResult.user.email?.split("@")[0] || "Student";
+    const studentBranch = meta.branch || null;
+    const studentCgpa = meta.cgpa || null;
+    const studentSkills = meta.skills || null;
+    const studentResumeLink = meta.resume_link || null;
+
+    const { data: application, error: insertError } = await supabase
+      .from("applications")
+      .insert({
+        student_id: authResult.user.id,
+        job_id: jobId,
+        status: "pending",
+        student_name: studentName,
+        student_email: authResult.user.email,
+        student_branch: studentBranch,
+        student_cgpa: studentCgpa,
+        student_skills: studentSkills,
+        student_resume_link: studentResumeLink,
+      })
+      .select()
+      .single();
+
+    if (insertError) {
+      if (insertError.code === '23505') {
+        return jsonResponse({ error: "You have already applied to this job" }, 409);
+      }
+      console.error("[/api/applications POST] Supabase error:", insertError.message);
+      return jsonResponse({ error: insertError.message }, 500);
+    }
+
+    return jsonResponse({ application, message: "Application submitted successfully!" }, 201);
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+export async function GET(request) {
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse({ error: "Authentication required" }, 401);
+    }
+
+    const MAX_LIMIT = 100;
+    const { searchParams } = new URL(request.url);
+    const page = parseInt(searchParams.get("page")) || 1;
+    const rawLimit = parseInt(searchParams.get("limit")) || 50;
+    const limit = Math.min(Math.max(rawLimit, 1), MAX_LIMIT);
+    const skip = (page - 1) * limit;
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    const { data: applications, error, count } = await supabase
+      .from("applications")
+      .select("*, job:job_id(title, company, location, salary_range, job_type)", { count: "exact" })
+      .eq("student_id", authResult.user.id)
+      .order("applied_at", { ascending: false })
+      .range(skip, skip + limit - 1);
+
+    if (error) {
+      console.error("[/api/applications GET] Supabase error:", error.message);
+      return jsonResponse({ applications: [], totalPages: 0, currentPage: page });
+    }
+
+    return jsonResponse({
+      applications: applications || [],
+      totalPages: Math.ceil((count || 0) / limit),
+      currentPage: page,
+    });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/auth/route.js b/src/app/api/auth/route.js
new file mode 100644
index 000000000..1a94aa95d
--- /dev/null
+++ b/src/app/api/auth/route.js
@@ -0,0 +1,418 @@
+import { createServerClient } from "@supabase/ssr";
+import { cookies } from "next/headers";
+import { Redis } from "@upstash/redis";
+import { checkRateLimit, shouldBypassRateLimit } from "@/lib/rateLimit";
+import { getClientIp } from "@/lib/getClientIp";
+import { verifyTurnstile } from "@/lib/verifyTurnstile";
+import { jsonResponse, errorResponse, getSupabaseAdmin } from "@/lib/serverApi";
+
+function getValidUrl(value) {
+  if (!value) return null;
+  let trimmed = String(value).trim();
+  if (!trimmed || trimmed.startsWith("Your ")) return null;
+  if (trimmed.startsWith("http://localhost:")) {
+    trimmed = trimmed.replace("http://localhost:", "http://127.0.0.1:");
+  }
+  try {
+    const url = new URL(trimmed);
+    return url.protocol === "http:" || url.protocol === "https:" ? trimmed : null;
+  } catch {
+    return null;
+  }
+}
+
+function getValidKey(value) {
+  if (!value) return null;
+  const trimmed = String(value).trim();
+  return trimmed && !trimmed.startsWith("Your ") ? trimmed : null;
+}
+
+const supabaseUrl = getValidUrl(process.env.NEXT_PUBLIC_SUPABASE_URL);
+const supabaseAnonKey = getValidKey(process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY);
+const supabaseServiceKey = getValidKey(process.env.SUPABASE_SERVICE_KEY);
+
+let supabaseAdmin = null;
+try { supabaseAdmin = getSupabaseAdmin(); } catch { supabaseAdmin = null; }
+
+const AUTH_RATE_LIMIT_PREFIX = "auth";
+
+const LOGIN_FAILURE_WINDOW_SECONDS = 15 * 60; // 15 minutes
+const LOGIN_FAILURE_THRESHOLD = 5; // lock after 5 failed attempts
+const LOGIN_LOCK_SECONDS = 15 * 60; // 15 minutes lockout
+
+const MAX_MEMORY_LOCKOUTS = 5000;
+const MAX_MEMORY_FAILURES = 5000;
+
+// In-memory fallback for local dev (single instance). Not suitable for serverless scaling.
+const memoryLockouts = new Map(); // email -> until timestamp
+const memoryFailures = new Map(); // email -> { count, resetAt }
+const memoryLocks = new Map(); // email -> boolean (per-email mutex)
+
+async function acquireMemoryLock(key, timeoutMs = 2000) {
+  const start = Date.now();
+  while (memoryLocks.get(key) === true) {
+    if (Date.now() - start > timeoutMs) return false;
+    await new Promise(r => setTimeout(r, 5));
+  }
+  memoryLocks.set(key, true);
+  return true;
+}
+
+function releaseMemoryLock(key) {
+  memoryLocks.delete(key);
+}
+
+// Periodic sweeper to clean up expired entries (replaces probabilistic GC)
+const MEMORY_SWEEP_INTERVAL_MS = 60_000;
+let memorySweepTimer = null;
+
+function startMemorySweeper() {
+  if (memorySweepTimer) return;
+  memorySweepTimer = setInterval(() => {
+    const now = Date.now();
+    for (const [k, until] of memoryLockouts.entries()) {
+      if (until <= now) memoryLockouts.delete(k);
+    }
+    for (const [k, bucket] of memoryFailures.entries()) {
+      if (bucket.resetAt <= now) memoryFailures.delete(k);
+    }
+    // memoryLockouts is exempt from size-based eviction to prevent brute-force
+    // bypass (an attacker flooding dummy emails should not flush a target's lockout).
+    // OOM risk is low since lockouts require 5 consecutive failures before creation.
+    // memoryFailures gets size limits to bound the higher-volume failure tracking.
+    if (memoryFailures.size > MAX_MEMORY_FAILURES) {
+      const toEvict = memoryFailures.size - MAX_MEMORY_FAILURES;
+      const iter = memoryFailures.keys();
+      for (let i = 0; i < toEvict; i++) {
+        const k = iter.next().value;
+        if (k !== undefined) memoryFailures.delete(k);
+      }
+      console.warn(`[auth] Evicted ${toEvict} failure entries: exceeded ${MAX_MEMORY_FAILURES} limit`);
+    }
+    const totalMemoryEntries = memoryLockouts.size + memoryFailures.size + memoryLocks.size;
+    if (totalMemoryEntries > 0) {
+      console.log(`[auth] Memory state: lockouts=${memoryLockouts.size}, failures=${memoryFailures.size}, locks=${memoryLocks.size}`);
+    }
+  }, MEMORY_SWEEP_INTERVAL_MS);
+  if (memorySweepTimer.unref) memorySweepTimer.unref();
+}
+
+startMemorySweeper();
+
+const redis =
+  process.env.UPSTASH_REDIS_REST_URL && process.env.UPSTASH_REDIS_REST_TOKEN
+    ? Redis.fromEnv()
+    : null;
+
+let isRedisOffline = false;
+let redisOfflineUntil = 0;
+const COOLDOWN_MS = 10000;
+
+function markRedisOffline(err) {
+  if (!isRedisOffline) {
+    isRedisOffline = true;
+    console.error(`[auth] Redis connection failed, activating in-memory fallback. Error: ${err.message || err}`);
+  }
+  redisOfflineUntil = Date.now() + COOLDOWN_MS;
+}
+
+function markRedisOnline() {
+  if (isRedisOffline) {
+    isRedisOffline = false;
+    console.log("[auth] Redis connection restored, resuming Redis-based auth lockout.");
+  }
+}
+
+function shouldTryRedis() {
+  if (!redis) return false;
+  if (!isRedisOffline) return true;
+  if (Date.now() >= redisOfflineUntil) {
+    return true;
+  }
+  return false;
+}
+
+function normalizeEmail(email) {
+  return String(email || "").trim().toLowerCase();
+}
+
+function lockKey(email) {
+  return `${AUTH_RATE_LIMIT_PREFIX}:lock:${email}`;
+}
+
+function failKey(email) {
+  return `${AUTH_RATE_LIMIT_PREFIX}:fail:${email}`;
+}
+
+async function isEmailLocked(email) {
+  if (!email) return false;
+
+  if (shouldTryRedis()) {
+    try {
+      const value = await redis.get(lockKey(email));
+      markRedisOnline();
+      return Boolean(value);
+    } catch (err) {
+      markRedisOffline(err);
+    }
+  }
+
+  const lockKeyMem = `auth:lock:${email}`;
+  const acquired = await acquireMemoryLock(lockKeyMem);
+  if (!acquired) return false;
+  try {
+    const until = memoryLockouts.get(email);
+    if (!until) return false;
+    if (until <= Date.now()) {
+      memoryLockouts.delete(email);
+      return false;
+    }
+    return true;
+  } finally {
+    releaseMemoryLock(lockKeyMem);
+  }
+}
+
+async function recordLoginFailure(email) {
+  if (!email) return { locked: false, remaining: LOGIN_FAILURE_THRESHOLD };
+
+  if (shouldTryRedis()) {
+    try {
+      const attempts = await redis.incr(failKey(email));
+      if (attempts === 1) {
+        await redis.expire(failKey(email), LOGIN_FAILURE_WINDOW_SECONDS);
+      }
+      const remaining = Math.max(0, LOGIN_FAILURE_THRESHOLD - attempts);
+      if (attempts >= LOGIN_FAILURE_THRESHOLD) {
+        await redis.set(lockKey(email), "1", { ex: LOGIN_LOCK_SECONDS });
+        await redis.del(failKey(email));
+        markRedisOnline();
+        return { locked: true, remaining: 0 };
+      }
+      markRedisOnline();
+      return { locked: false, remaining };
+    } catch (err) {
+      markRedisOffline(err);
+    }
+  }
+
+  const lockKeyMem = `auth:fail:${email}`;
+  const acquired = await acquireMemoryLock(lockKeyMem);
+  if (!acquired) return { locked: false, remaining: LOGIN_FAILURE_THRESHOLD };
+
+  try {
+    const now = Date.now();
+    const bucket = memoryFailures.get(email);
+    if (!bucket || bucket.resetAt <= now) {
+      memoryFailures.set(email, { count: 1, resetAt: now + LOGIN_FAILURE_WINDOW_SECONDS * 1000 });
+      return { locked: false, remaining: LOGIN_FAILURE_THRESHOLD - 1 };
+    }
+    bucket.count += 1;
+    const remaining = Math.max(0, LOGIN_FAILURE_THRESHOLD - bucket.count);
+    if (bucket.count >= LOGIN_FAILURE_THRESHOLD) {
+      memoryFailures.delete(email);
+      memoryLockouts.set(email, now + LOGIN_LOCK_SECONDS * 1000);
+      return { locked: true, remaining: 0 };
+    }
+    return { locked: false, remaining };
+  } finally {
+    releaseMemoryLock(lockKeyMem);
+  }
+}
+
+async function clearLoginFailures(email) {
+  if (!email) return;
+  if (shouldTryRedis()) {
+    try {
+      await redis.del(failKey(email));
+      await redis.del(lockKey(email));
+      markRedisOnline();
+      return;
+    } catch (err) {
+      markRedisOffline(err);
+    }
+  }
+
+  const lockKeyMem = `auth:clear:${email}`;
+  const acquired = await acquireMemoryLock(lockKeyMem);
+  if (!acquired) return;
+  try {
+    memoryFailures.delete(email);
+    memoryLockouts.delete(email);
+  } finally {
+    releaseMemoryLock(lockKeyMem);
+  }
+}
+
+function genericAuthError() {
+  // Prevent account enumeration by not reflecting upstream messages.
+  return "Invalid email or password.";
+}
+
+export async function POST(req) {
+  try {
+    const isProduction = process.env.NODE_ENV === "production";
+    const hasRedis = process.env.UPSTASH_REDIS_REST_URL && process.env.UPSTASH_REDIS_REST_TOKEN;
+    if (isProduction && !hasRedis) {
+      console.warn("Production environment is missing Redis variables; using in-memory rate limiters/lockouts.");
+    }
+
+    let body;
+    try {
+      body = await req.json();
+    } catch {
+      return jsonResponse({ success: false, message: "Invalid request body" }, 400);
+    }
+
+    const { email, password, captchaToken, action, name } = body || {};
+
+    if (!email || !password) {
+      return jsonResponse({ success: false, message: "Email and password are required" }, 400);
+    }
+
+    if (!captchaToken) {
+      return jsonResponse({ success: false, message: "Captcha token missing" }, 400);
+    }
+
+    const ip = getClientIp(req.headers);
+
+    const explicitBypass = process.env.TURNSTILE_BYPASS === "true";
+    let captcha;
+
+    if (explicitBypass) {
+      captcha = { ok: true };
+    } else {
+      try {
+        captcha = await verifyTurnstile(String(captchaToken), { ip });
+      } catch (err) {
+        if (err.message === 'CAPTCHA_CONFIG_MISSING') {
+          if (!isProduction) {
+            console.warn("TURNSTILE_SECRET_KEY is not configured. Skipping captcha verification. This should only be used for local development.");
+            captcha = { ok: true };
+          } else {
+            console.error("Server misconfigured: CAPTCHA secret key is not set.");
+            return jsonResponse({ success: false, message: "We're having trouble verifying the CAPTCHA. Please try again later." }, 500);
+          }
+        } else {
+          throw err;
+        }
+      }
+    }
+
+    if (!captcha.ok) {
+      return jsonResponse({ success: false, message: captcha.error || "Captcha verification failed. Please try again." }, 400);
+    }
+
+    const normalizedEmail = normalizeEmail(email);
+    const actionName = action === "signup" ? "signup" : "login";
+
+    const [ipLimit, emailLimit] = await Promise.all([
+      checkRateLimit(`${AUTH_RATE_LIMIT_PREFIX}:${actionName}:ip:${ip}`),
+      checkRateLimit(`${AUTH_RATE_LIMIT_PREFIX}:${actionName}:email:${normalizedEmail}`),
+    ]);
+
+    if (!ipLimit.allowed || !emailLimit.allowed) {
+      return jsonResponse({ success: false, message: "Too many attempts. Please wait and try again." }, 429);
+    }
+
+    if (action === "signup") {
+      const serviceKey = getValidKey(process.env.SUPABASE_SERVICE_KEY);
+      if (!supabaseUrl || !serviceKey) {
+        return jsonResponse({ success: false, message: "Auth server is not configured." }, 500);
+      }
+
+      const admin = getSupabaseAdmin();
+
+      const emailConfirm = process.env.AUTO_CONFIRM_EMAIL === "true";
+
+      const { error } = await admin.auth.admin.createUser({
+        email,
+        password,
+        email_confirm: emailConfirm,
+        user_metadata: { display_name: name },
+      });
+
+      if (error) {
+        if (error.message.includes("already") || error.code === "email_exists") {
+          return jsonResponse({
+            success: true,
+            message: "Signup request received. If the email is not registered, a verification link has been sent.",
+          });
+        }
+        console.error("[/api/auth/signup] Supabase createUser error:", error.message, error.code);
+        return jsonResponse({
+          success: false,
+          message: "Unable to create account. Please try again later.",
+        }, 400);
+      }
+
+      if (emailConfirm) {
+        return jsonResponse({
+          success: true,
+          message: "Signup successful. You can now log in!",
+          trigger: true,
+        });
+      }
+
+      return jsonResponse({
+        success: true,
+        message: "Signup successful! Please check your email to verify your account before logging in.",
+        trigger: false,
+      });
+    }
+
+    if (action === "login") {
+      if (!shouldBypassRateLimit() && await isEmailLocked(normalizedEmail)) {
+        return jsonResponse({ success: false, message: "Too many failed login attempts. Please try again later." }, 429);
+      }
+
+      if (!supabaseUrl || !supabaseAnonKey) {
+        return jsonResponse({ success: false, message: "Auth server is not configured." }, 500);
+      }
+
+      const cookieStore = await cookies();
+
+      const client = createServerClient(
+        supabaseUrl,
+        supabaseAnonKey,
+        {
+          cookies: {
+            getAll() {
+              return cookieStore.getAll();
+            },
+            setAll(cookiesToSet) {
+              cookiesToSet.forEach(({ name, value, options }) => {
+                cookieStore.set(name, value, {
+                  ...options,
+                  sameSite: 'strict',
+                  secure: process.env.NODE_ENV === 'production',
+                });
+              });
+            },
+          },
+        },
+      );
+
+      const { error } = await client.auth.signInWithPassword({ email, password });
+
+      if (error) {
+        const { locked } = await recordLoginFailure(normalizedEmail);
+        return jsonResponse({
+          success: false,
+          message: locked
+            ? "Too many failed login attempts. Please try again later."
+            : genericAuthError(),
+        }, 401);
+      }
+
+      await clearLoginFailures(normalizedEmail);
+
+      return jsonResponse({ success: true, message: "Login successful" });
+    }
+
+    return jsonResponse({ success: false, message: "Invalid action" }, 400);
+  } catch (err) {
+    console.error("Auth API error:", err);
+    return jsonResponse({ success: false, message: "Internal server error" }, 500);
+  }
+}
diff --git a/src/app/api/bookmarks/route.js b/src/app/api/bookmarks/route.js
new file mode 100644
index 000000000..718dd51cf
--- /dev/null
+++ b/src/app/api/bookmarks/route.js
@@ -0,0 +1,111 @@
+import { cookies } from "next/headers";
+import { getAuthenticatedUser } from "@/lib/auth";
+import { getSupabaseServerClient, jsonResponse, errorResponse } from "@/lib/serverApi";
+import { validateCsrfOrigin } from "@/lib/csrfConstants";
+
+export async function POST(request) {
+  if (!validateCsrfOrigin(request)) {
+    return jsonResponse({ error: "CSRF validation failed: untrusted origin" }, 403);
+  }
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse({ error: "Authentication required" }, 401);
+    }
+
+    const body = await request.json().catch(() => ({}));
+    const { problemId, topicSlug } = body;
+
+    if (!problemId || !topicSlug) {
+      return jsonResponse({ error: "problemId and topicSlug are required" }, 400);
+    }
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    const { error: insertError } = await supabase
+      .from("problem_bookmarks")
+      .insert({
+        user_id: authResult.user.id,
+        problem_id: problemId,
+        topic_slug: topicSlug,
+      });
+
+    if (insertError) {
+      if (insertError.code !== '23505') {
+        console.error("[/api/bookmarks POST] Supabase insert error:", insertError.message);
+        return jsonResponse({ error: insertError.message }, 500);
+      }
+    }
+
+    return jsonResponse({ bookmarked: true });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+export async function DELETE(request) {
+  if (!validateCsrfOrigin(request)) {
+    return jsonResponse({ error: "CSRF validation failed: untrusted origin" }, 403);
+  }
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse({ error: "Authentication required" }, 401);
+    }
+
+    const { searchParams } = new URL(request.url);
+    const problemId = searchParams.get("problemId");
+    const topicSlug = searchParams.get("topicSlug");
+
+    if (!problemId || !topicSlug) {
+      return jsonResponse({ error: "problemId and topicSlug query params are required" }, 400);
+    }
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    const { error: deleteError } = await supabase
+      .from("problem_bookmarks")
+      .delete()
+      .eq("user_id", authResult.user.id)
+      .eq("problem_id", problemId)
+      .eq("topic_slug", topicSlug);
+
+    if (deleteError) {
+      console.error("[/api/bookmarks DELETE] Supabase delete error:", deleteError.message);
+      return jsonResponse({ error: deleteError.message }, 500);
+    }
+
+    return jsonResponse({ bookmarked: false });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+export async function GET(request) {
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse({ error: "Authentication required" }, 401);
+    }
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    const { data: bookmarks, error } = await supabase
+      .from("problem_bookmarks")
+      .select("problem_id, topic_slug, created_at")
+      .eq("user_id", authResult.user.id)
+      .order("created_at", { ascending: false });
+
+    if (error) {
+      console.error("[/api/bookmarks GET] Supabase error:", error.message);
+      return jsonResponse([]);
+    }
+
+    return jsonResponse(bookmarks || []);
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/chatbot/route.js b/src/app/api/chatbot/route.js
new file mode 100644
index 000000000..91d99afd9
--- /dev/null
+++ b/src/app/api/chatbot/route.js
@@ -0,0 +1,255 @@
+// app/api/chatbot/route.js
+// Fix for Issue #2694: Adds input length cap, sliding window context,
+// friendly token-limit error messages, and Upstash Redis rate limiting.
+
+import { NextResponse } from "next/server";
+import { GoogleGenerativeAI } from "@google/generative-ai";
+import { getClientIp } from "@/lib/getClientIp";
+import { Ratelimit } from "@upstash/ratelimit";
+import { Redis } from "@upstash/redis";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// CONSTANTS — Tune these values here in one place if needed
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Max characters a single user message can contain
+const MAX_INPUT_LENGTH = 2000;
+
+// How many conversation turns (user + AI pairs) to keep in context.
+// Keeping the last 10 pairs = 20 messages max ever sent to Gemini.
+// This keeps token usage bounded regardless of session length.
+const MAX_HISTORY_TURNS = 10;
+
+// Rate limit: max 10 chatbot requests per user per 60 seconds.
+// Uses a sliding window so it's not a hard reset at the minute boundary.
+const RATE_LIMIT_REQUESTS = 10;
+const RATE_LIMIT_WINDOW = "60 s";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// UPSTASH REDIS RATE LIMITER
+// Uses the UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN env vars
+// that are already documented in EnvExample.txt — no new setup needed.
+// ─────────────────────────────────────────────────────────────────────────────
+// During local development / testing without a real Redis URL,
+// use a dummy rate limiter that never blocks.
+const redisUrl = process.env.UPSTASH_REDIS_REST_URL;
+const isRedisConfigured = redisUrl && !redisUrl.includes("your-upstash-redis-rest-url");
+const ratelimit = isRedisConfigured
+  ? new Ratelimit({
+      redis: Redis.fromEnv(),
+      limiter: Ratelimit.slidingWindow(RATE_LIMIT_REQUESTS, RATE_LIMIT_WINDOW),
+      prefix: "algobuddy:chatbot",
+    })
+  : {
+      limit: async () => ({ success: true, limit: 10, remaining: 10, reset: Date.now() + 60000 }),
+    };
+
+// ─────────────────────────────────────────────────────────────────────────────
+// GEMINI CLIENT
+// ─────────────────────────────────────────────────────────────────────────────
+const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
+
+// The system prompt sets Gemini's personality and scope.
+// Keeping it here (not sent by the client) prevents users from
+// overriding it with a long preamble.
+const SYSTEM_PROMPT = `You are AlgoBuddy AI, a friendly and concise teaching assistant 
+specialised in Data Structures and Algorithms (DSA). 
+Help students understand concepts clearly with simple explanations and short code examples. 
+Keep answers focused and educational. If asked about unrelated topics, 
+politely redirect the conversation back to DSA.`;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// POST /api/chatbot
+// Expected request body:
+//   {
+//     message: string,          // The user's new message
+//     history: Array<{          // Previous conversation turns (sent by frontend)
+//       role: "user" | "model",
+//       parts: [{ text: string }]
+//     }>
+//   }
+// ─────────────────────────────────────────────────────────────────────────────
+export async function POST(request) {
+  try {
+    // ── 1. RATE LIMITING ──────────────────────────────────────────────────────
+    // Use the authenticated user ID as the rate-limit identifier when available,
+    // falling back to IP address for unauthenticated requests.
+    // The x-user-id header is set by authProxy.js middleware after Supabase
+    // session verification.
+    const userId = request.headers.get("x-user-id");
+    const rateLimitId = userId || getClientIp(request) || "anonymous";
+
+    const { success, limit, remaining, reset } = await ratelimit.limit(rateLimitId);
+
+    if (!success) {
+      // Tell the user clearly AND tell the frontend how long to wait.
+      return NextResponse.json(
+        {
+          error:
+            "You're sending messages too quickly! Please wait a moment before asking another question.",
+          retryAfter: Math.ceil((reset - Date.now()) / 1000), // seconds until reset
+        },
+        {
+          status: 429, // HTTP 429 = Too Many Requests
+          headers: {
+            "X-RateLimit-Limit": String(limit),
+            "X-RateLimit-Remaining": String(remaining),
+            "X-RateLimit-Reset": String(reset),
+          },
+        }
+      );
+    }
+
+    // ── 2. PARSE REQUEST BODY ─────────────────────────────────────────────────
+    let body;
+    try {
+      body = await request.json();
+    } catch {
+      return NextResponse.json(
+        { error: "Invalid request format. Please try again." },
+        { status: 400 }
+      );
+    }
+
+    const { message, history = [] } = body;
+
+    // ── 3. INPUT VALIDATION ───────────────────────────────────────────────────
+    // Check message exists and is a string
+    if (!message || typeof message !== "string") {
+      return NextResponse.json(
+        { error: "Message is required and must be a string." },
+        { status: 400 }
+      );
+    }
+
+    // Trim whitespace from the message
+    const trimmedMessage = message.trim();
+
+    // Check the message isn't empty after trimming
+    if (trimmedMessage.length === 0) {
+      return NextResponse.json(
+        { error: "Message cannot be empty." },
+        { status: 400 }
+      );
+    }
+
+    // ── KEY FIX #1: Input length cap ──────────────────────────────────────────
+    // A single message over 2000 characters is almost certainly a paste of
+    // a long problem description or code dump. We cap it here on the server
+    // so the user can't bypass a frontend character limit.
+    if (trimmedMessage.length > MAX_INPUT_LENGTH) {
+      return NextResponse.json(
+        {
+          error: `Your message is too long (${trimmedMessage.length} characters). Please keep messages under ${MAX_INPUT_LENGTH} characters. Try breaking your question into smaller parts!`,
+        },
+        { status: 400 }
+      );
+    }
+
+    // ── 4. VALIDATE HISTORY SHAPE ─────────────────────────────────────────────
+    // The history comes from the frontend. We validate its basic shape
+    // to avoid passing garbage to Gemini.
+    if (!Array.isArray(history)) {
+      return NextResponse.json(
+        { error: "History must be an array." },
+        { status: 400 }
+      );
+    }
+
+    // ── KEY FIX #2: Sliding window context truncation ─────────────────────────
+    // This is the core fix for the unbounded context growth issue.
+    //
+    // HOW IT WORKS:
+    // Imagine history = [msg1, msg2, msg3, ... msg50].
+    // MAX_HISTORY_TURNS = 10, so MAX_HISTORY_TURNS * 2 = 20.
+    // We do history.slice(-20) which keeps only the LAST 20 items.
+    // The system prompt is always prepended separately (it never grows).
+    // Result: total context = system_prompt + last 20 messages + new message.
+    // This is bounded no matter how long the conversation gets.
+    const truncatedHistory = history.slice(-(MAX_HISTORY_TURNS * 2));
+
+    // ── 5. CALL GEMINI API ────────────────────────────────────────────────────
+    const model = genAI.getGenerativeModel({
+      model: "gemini-1.5-flash", // Fast and free-tier friendly
+      systemInstruction: SYSTEM_PROMPT,
+    });
+
+    // Start a chat session with the truncated history
+    const chat = model.startChat({
+      history: truncatedHistory,
+      generationConfig: {
+        maxOutputTokens: 1024, // Cap the response length too — prevents runaway long answers
+        temperature: 0.7,      // Slightly creative but still accurate
+      },
+    });
+
+    // Send the new message and get a response
+    const result = await chat.sendMessage(trimmedMessage);
+    const responseText = result.response.text();
+
+    // ── 6. RETURN SUCCESS RESPONSE ────────────────────────────────────────────
+    return NextResponse.json(
+      {
+        response: responseText,
+        // Send back how many history items were actually used (useful for debugging)
+        contextUsed: truncatedHistory.length,
+        // Warn the frontend if we truncated history so it can show a subtle notice
+        historyTruncated: history.length > truncatedHistory.length,
+      },
+      { status: 200 }
+    );
+
+  } catch (error) {
+    // ── KEY FIX #3: Friendly error messages ───────────────────────────────────
+    // Inspect the error from Gemini and return a human-readable message
+    // instead of leaking a raw stack trace or showing a blank spinner.
+
+    console.error("[Chatbot API Error]:", error?.message ?? error);
+
+    const errorMessage = error?.message?.toLowerCase() ?? "";
+    const errorStatus = error?.status;
+
+    // ── Check for API key / auth issues FIRST ─────────────────────────────────
+    // This must come before the generic 400 check so that invalid key errors
+    // don't get mistaken for token‑limit problems.
+    if (
+      errorMessage.includes("api key") ||
+      errorMessage.includes("unauthorized") ||
+      errorStatus === 401 ||
+      errorStatus === 403
+    ) {
+      return NextResponse.json(
+        { error: "The AI service is temporarily unavailable. Please try again in a moment." },
+        { status: 503 }
+      );
+    }
+
+    // ── Now check for actual context / token limit errors ─────────────────────
+    const isTokenLimitError =
+      errorMessage.includes("resource_exhausted") ||
+      errorMessage.includes("context length exceeded") ||
+      errorMessage.includes("too many tokens") ||
+      // Keep "token" but be more specific to avoid false positives
+      (errorMessage.includes("token") && errorMessage.includes("limit"));
+
+    if (isTokenLimitError || (errorStatus === 400 && errorMessage.includes("request"))) {
+      return NextResponse.json(
+        {
+          error:
+            "This conversation has gotten too long for me to remember everything! 🧠 Please start a fresh chat to continue getting help. Your learning progress is saved!",
+          code: "CONTEXT_LIMIT_EXCEEDED",
+        },
+        { status: 400 }
+      );
+    }
+
+    // Generic fallback for all other unexpected errors
+    return NextResponse.json(
+      {
+        error:
+          "Something went wrong while getting a response. Please try again!",
+      },
+      { status: 500 }
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/app/api/code-lab/route.js b/src/app/api/code-lab/route.js
new file mode 100644
index 000000000..8227fdfec
--- /dev/null
+++ b/src/app/api/code-lab/route.js
@@ -0,0 +1,90 @@
+import { getAuthenticatedUser } from "@/lib/auth";
+import { sandboxLimiter } from "@/lib/rateLimit";
+import { executeCode } from "@/lib/sandbox/executor";
+import { EXECUTION_STATUS, EXECUTION_MESSAGES } from "@/lib/sandbox/errorCodes";
+import { jsonResponse, errorResponse } from "@/lib/serverApi";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+export async function POST(request) {
+  try {
+    const authResult = await getAuthenticatedUser();
+
+    if (!authResult.success) {
+      if (authResult.type === "CONFIG_ERROR" || authResult.type === "AUTH_PROVIDER_ERROR") {
+        return jsonResponse({ error: "Authentication service unavailable" }, 500);
+      }
+      return jsonResponse({ error: "Authentication required" }, 401);
+    }
+
+    const limitResponse = await sandboxLimiter.checkRequest(request);
+    if (limitResponse) return limitResponse;
+
+    let body;
+    try {
+      body = await request.json();
+    } catch {
+      return jsonResponse({ error: "Invalid JSON in request body" }, 400);
+    }
+
+    const { code } = body;
+
+    if (typeof code !== "string") {
+      return jsonResponse({ error: "`code` must be a string" }, 400);
+    }
+
+    if (code.trim().length === 0) {
+      return jsonResponse({ error: "No code provided" }, 400);
+    }
+
+    if (code.length > 50_000) {
+      return jsonResponse({ error: "Code exceeds maximum allowed length (50 000 characters)" }, 400);
+    }
+
+    let result;
+    try {
+      result = await executeCode(code);
+    } catch (unexpectedError) {
+      console.error("[code-lab] Unexpected executor error:", unexpectedError);
+      return jsonResponse(
+        {
+          status: EXECUTION_STATUS.INTERNAL_ERROR,
+          message: EXECUTION_MESSAGES[EXECUTION_STATUS.INTERNAL_ERROR],
+          output: "",
+          error: "An internal error occurred. Please try again.",
+          executionTime: 0,
+          memoryUsed: 0,
+        },
+        500
+      );
+    }
+
+    const httpStatus =
+      result.status === EXECUTION_STATUS.SUCCESS ||
+      result.status === EXECUTION_STATUS.RUNTIME_ERROR
+        ? 200
+        : result.status === EXECUTION_STATUS.TLE ||
+          result.status === EXECUTION_STATUS.MLE
+        ? 200
+        : 500;
+
+    return jsonResponse(
+      {
+        status: result.status,
+        message: EXECUTION_MESSAGES[result.status] ?? result.status,
+        output: result.output ?? "",
+        error: result.error ?? null,
+        executionTime: result.executionTime,
+        memoryUsed: result.memoryUsed,
+      },
+      httpStatus
+    );
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+export function GET() {
+  return jsonResponse({ error: "Method Not Allowed" }, 405);
+}
\ No newline at end of file
diff --git a/src/app/api/coding-profiles/fetch/route.js b/src/app/api/coding-profiles/fetch/route.js
new file mode 100644
index 000000000..96e18768a
--- /dev/null
+++ b/src/app/api/coding-profiles/fetch/route.js
@@ -0,0 +1,143 @@
+import { NextResponse } from "next/server";
+import { getAuthenticatedUser } from "@/lib/auth";
+
+// GET /api/coding-profiles/fetch?platform=leetcode&username=shruti
+export async function GET(request) {
+  const authResult = await getAuthenticatedUser();
+  if (!authResult.success) {
+    return NextResponse.json({ error: "Authentication required" }, { status: 401 });
+  }
+
+  const { searchParams } = new URL(request.url);
+  const platform = searchParams.get("platform");
+  const username = searchParams.get("username")?.trim();
+
+  if (!platform || !username) {
+    return NextResponse.json({ error: "Missing platform or username" }, { status: 400 });
+  }
+
+  try {
+    switch (platform) {
+      case "leetcode":
+        return await fetchLeetCode(username);
+      case "codeforces":
+        return await fetchCodeforces(username);
+      case "codechef":
+        return await fetchCodeChef(username);
+      case "github":
+        return await fetchGitHub(username);
+      default:
+        return NextResponse.json({ error: "Unknown platform" }, { status: 400 });
+    }
+  } catch (err) {
+    console.error(`[coding-profiles] ${platform} error:`, err);
+    return NextResponse.json({ error: "Failed to fetch stats. Check the username and try again." }, { status: 500 });
+  }
+}
+
+// ── LeetCode ──────────────────────────────────────────────────────────────────
+// Uses LeetCode's public GraphQL endpoint
+async function fetchLeetCode(username) {
+  const query = `
+    query getUserProfile($username: String!) {
+      matchedUser(username: $username) {
+        submitStats {
+          acSubmissionNum {
+            difficulty
+            count
+          }
+        }
+      }
+    }
+  `;
+
+  const res = await fetch("https://leetcode.com/graphql", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ query, variables: { username } }),
+    next: { revalidate: 3600 }, // cache for 1 hour
+  });
+
+  if (!res.ok) throw new Error("LeetCode API error");
+
+  const json = await res.json();
+  const matchedUser = json?.data?.matchedUser;
+
+  if (!matchedUser) {
+    return NextResponse.json({ error: `LeetCode user "${username}" not found` }, { status: 404 });
+  }
+
+  const allEntry = matchedUser.submitStats?.acSubmissionNum?.find((e) => e.difficulty === "All");
+  const solved = allEntry?.count ?? 0;
+
+  return NextResponse.json({ platform: "leetcode", username, value: solved });
+}
+
+// ── Codeforces ────────────────────────────────────────────────────────────────
+// Official public Codeforces API
+async function fetchCodeforces(username) {
+  const res = await fetch(`https://codeforces.com/api/user.info?handles=${encodeURIComponent(username)}`, {
+    next: { revalidate: 3600 },
+  });
+
+  const json = await res.json();
+
+  if (json.status !== "OK") {
+    return NextResponse.json({ error: `Codeforces user "${username}" not found` }, { status: 404 });
+  }
+
+  const rating = json.result?.[0]?.rating ?? 0;
+  return NextResponse.json({ platform: "codeforces", username, value: rating });
+}
+
+// ── CodeChef ──────────────────────────────────────────────────────────────────
+// Uses community wrapper API (no official public API exists)
+async function fetchCodeChef(username) {
+  const res = await fetch(`https://codechef-api.vercel.app/handle/${encodeURIComponent(username)}`, {
+    next: { revalidate: 3600 },
+  });
+
+  if (!res.ok) {
+    return NextResponse.json({ error: `CodeChef user "${username}" not found` }, { status: 404 });
+  }
+
+  const json = await res.json();
+
+  if (json.success === false) {
+    return NextResponse.json({ error: `CodeChef user "${username}" not found` }, { status: 404 });
+  }
+
+  // stars come as a string like "3★" — extract the number
+  const starsRaw = json.stars ?? "0★";
+  const stars = parseInt(starsRaw.replace("★", ""), 10) || 0;
+
+  return NextResponse.json({ platform: "codechef", username, value: stars });
+}
+
+// ── GitHub ────────────────────────────────────────────────────────────────────
+// Official GitHub REST API — returns public repo count
+// (contribution graph requires GraphQL + auth token, out of scope here)
+async function fetchGitHub(username) {
+  const headers = { "User-Agent": "AlgoBuddy-App" };
+
+  // Use GitHub token from env if available to avoid rate limiting
+  if (process.env.GITHUB_TOKEN) {
+    headers["Authorization"] = `Bearer ${process.env.GITHUB_TOKEN}`;
+  }
+
+  const res = await fetch(`https://api.github.com/users/${encodeURIComponent(username)}`, {
+    headers,
+    next: { revalidate: 3600 },
+  });
+
+  if (res.status === 404) {
+    return NextResponse.json({ error: `GitHub user "${username}" not found` }, { status: 404 });
+  }
+
+  if (!res.ok) throw new Error("GitHub API error");
+
+  const json = await res.json();
+  const publicRepos = json.public_repos ?? 0;
+
+  return NextResponse.json({ platform: "github", username, value: publicRepos });
+}
\ No newline at end of file
diff --git a/src/app/api/comments/[topic_id]/route.js b/src/app/api/comments/[topic_id]/route.js
new file mode 100644
index 000000000..3896aedf6
--- /dev/null
+++ b/src/app/api/comments/[topic_id]/route.js
@@ -0,0 +1,19 @@
+import { cookies } from 'next/headers';
+import { getSupabaseServerClient } from '@/lib/serverApi';
+
+export async function GET(req, { params }) {
+  const { topic_id } = await params;
+  const cookieStore = await cookies();
+  const supabase = getSupabaseServerClient(cookieStore);
+  
+  const { data: comments } = await supabase
+    .from('topic_comments')
+    .select(`
+      *,
+      user_profiles ( full_name, avatar_url )
+    `)
+    .eq('topic_id', topic_id)
+    .order('created_at', { ascending: false });
+
+  return Response.json({ comments });
+}
diff --git a/src/app/api/comments/route.js b/src/app/api/comments/route.js
new file mode 100644
index 000000000..a8d6cf3b8
--- /dev/null
+++ b/src/app/api/comments/route.js
@@ -0,0 +1,59 @@
+import { cookies } from 'next/headers';
+import { getSupabaseServerClient } from '@/lib/serverApi';
+import { validateCsrfOrigin } from '@/lib/csrfConstants';
+
+const MAX_COMMENT_LENGTH = 2000;
+
+export async function POST(req) {
+  if (!validateCsrfOrigin(req)) {
+    return Response.json({ error: "CSRF validation failed: untrusted origin" }, { status: 403 });
+  }
+
+  try {
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+    const body = await req.json().catch(() => ({}));
+    const { topic_id, content } = body;
+
+    const { data: { user } } = await supabase.auth.getUser();
+
+    if (!user) {
+      return Response.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    if (!topic_id) {
+      return Response.json({ error: 'topic_id is required' }, { status: 400 });
+    }
+
+    const trimmedContent = String(content || '').trim();
+    if (!trimmedContent) {
+      return Response.json({ error: 'content cannot be empty' }, { status: 400 });
+    }
+    if (trimmedContent.length > MAX_COMMENT_LENGTH) {
+      return Response.json({ error: `content must be under ${MAX_COMMENT_LENGTH} characters` }, { status: 400 });
+    }
+
+    const { data, error } = await supabase
+      .from('topic_comments')
+      .insert([
+        {
+          topic_id,
+          user_id: user.id,
+          content: trimmedContent
+        }
+      ])
+      .select(`
+        *,
+        user_profiles ( full_name, avatar_url )
+      `)
+      .single();
+
+    if (error) {
+      return Response.json({ error: error.message }, { status: 500 });
+    }
+
+    return Response.json({ comment: data });
+  } catch (error) {
+    return Response.json({ error: error.message }, { status: 500 });
+  }
+}
diff --git a/src/app/api/community/contributors/route.js b/src/app/api/community/contributors/route.js
new file mode 100644
index 000000000..f545ec8d3
--- /dev/null
+++ b/src/app/api/community/contributors/route.js
@@ -0,0 +1,57 @@
+import { createServerClient } from "@supabase/ssr";
+import { cookies } from "next/headers";
+import { getSupabaseConfig } from "@/lib/shared-utils";
+
+export async function GET(request) {
+  try {
+    const config = getSupabaseConfig();
+    if (!config) {
+      return Response.json(
+        { error: "Supabase not configured" },
+        { status: 503 }
+      );
+    }
+
+    const { searchParams } = new URL(request.url);
+    const limit = Math.min(Math.max(parseInt(searchParams.get("limit")) || 12, 1), 100);
+    const offset = Math.max(parseInt(searchParams.get("offset")) || 0, 0);
+
+    const cookieStore = await cookies();
+    const client = createServerClient(config.supabaseUrl, config.supabaseAnonKey, {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll();
+        },
+        setAll(cookiesToSet) {
+          cookiesToSet.forEach(({ name, value, options }) => {
+            cookieStore.set(name, value, options);
+          });
+        },
+      },
+    });
+
+    const { data: contributors, error } = await client
+      .from("community_contributors")
+      .select("*")
+      .order("order", { ascending: true })
+      .range(offset, offset + limit - 1);
+
+    if (error) {
+      return Response.json(
+        { error: "Failed to fetch contributors" },
+        { status: 500 }
+      );
+    }
+
+    const { count: total } = await client
+      .from("community_contributors")
+      .select("*", { count: "exact", head: true });
+
+    return Response.json({ contributors, total: total ?? contributors.length });
+  } catch (error) {
+    return Response.json(
+      { error: error?.message || "Internal server error" },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/api/community/join/route.js b/src/app/api/community/join/route.js
new file mode 100644
index 000000000..b403308c9
--- /dev/null
+++ b/src/app/api/community/join/route.js
@@ -0,0 +1,47 @@
+import { cookies } from "next/headers";
+import { getAuthenticatedUser } from "@/lib/auth";
+import { getSupabaseServerClient, jsonResponse, errorResponse } from "@/lib/serverApi";
+import { validateCsrfOrigin } from "@/lib/csrfConstants";
+
+export async function POST(request) {
+  if (!validateCsrfOrigin(request)) {
+    return jsonResponse({ error: "CSRF validation failed: untrusted origin" }, 403);
+  }
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse({ error: "Authentication required" }, authResult.type === "CONFIG_ERROR" ? 500 : 401);
+    }
+    const body = await request.json().catch(() => ({}));
+    const { joined } = body;
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+    const { error } = await supabase
+      .from("user_profiles")
+      .upsert({ id: authResult.user.id, joined_community: joined !== false }, { onConflict: "id" });
+    if (error) return jsonResponse({ error: error.message }, 500);
+    return jsonResponse({ success: true });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+export async function GET(request) {
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse({ error: "Authentication required" }, authResult.type === "CONFIG_ERROR" ? 500 : 401);
+    }
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+    const { data, error } = await supabase
+      .from("user_profiles")
+      .select("joined_community")
+      .eq("id", authResult.user.id)
+      .single();
+    if (error && error.code !== "PGRST116") return jsonResponse({ error: error.message }, 500);
+    return jsonResponse({ joined_community: data?.joined_community ?? false });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/companies/[id]/route.js b/src/app/api/companies/[id]/route.js
new file mode 100644
index 000000000..67a5f67ee
--- /dev/null
+++ b/src/app/api/companies/[id]/route.js
@@ -0,0 +1,36 @@
+import { cookies } from "next/headers";
+import { getSupabaseServerClient, jsonResponse, errorResponse } from "@/lib/serverApi";
+
+export async function GET(_, { params }) {
+  try {
+    const { id } = await params;
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    const { data: company, error: companyError } = await supabase
+      .from("companies")
+      .select("*")
+      .eq("id", id)
+      .single();
+
+    if (companyError || !company) {
+      return jsonResponse({ error: "Company not found" }, 404);
+    }
+
+    const { data: jobs, error: jobsError } = await supabase
+      .from("jobs")
+      .select("*")
+      .eq("company_id", id)
+      .eq("status", "approved")
+      .order("created_at", { ascending: false });
+
+    if (jobsError) {
+      console.error("[/api/companies/[id] GET] Jobs error:", jobsError.message);
+    }
+
+    return jsonResponse({ company, jobs: jobs || [] });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/companies/route.js b/src/app/api/companies/route.js
new file mode 100644
index 000000000..c4b1e14f5
--- /dev/null
+++ b/src/app/api/companies/route.js
@@ -0,0 +1,23 @@
+import { cookies } from "next/headers";
+import { getSupabaseServerClient, jsonResponse, errorResponse } from "@/lib/serverApi";
+
+export async function GET() {
+  try {
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    const { data: companies, error } = await supabase
+      .from("companies")
+      .select("*")
+      .order("name", { ascending: true });
+
+    if (error) {
+      console.error("[/api/companies GET] Supabase error:", error.message);
+      return jsonResponse({ companies: [] });
+    }
+
+    return jsonResponse({ companies: companies || [] });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/complexity-estimator/route.js b/src/app/api/complexity-estimator/route.js
new file mode 100644
index 000000000..2629bea1a
--- /dev/null
+++ b/src/app/api/complexity-estimator/route.js
@@ -0,0 +1,146 @@
+import { checkRateLimit } from "@/lib/rateLimit";
+import { getClientIp } from "@/lib/getClientIp";
+import { getAuthenticatedUser } from "@/lib/auth";
+import { jsonResponse, errorResponse } from "@/lib/serverApi";
+
+const SYSTEM_PROMPT = `You are an expert computer science assistant specialized in algorithmic analysis and DSA. Your task is to analyze the given code snippet for Time Complexity (Best, Average, and Worst cases using Big-O, Big-Theta, or Big-Omega notation) and Space Complexity. Additionally, if the code is sub-optimal (e.g., O(n^2) nested loops that can be optimized to O(n) using a hash map or sorting), provide a refactored version of the code in the same language along with a brief explanation of the optimization.
+
+Guidelines:
+1. "timeBest": Estimate the best-case time complexity (e.g., "O(1)", "O(log n)", "O(n)").
+2. "timeAverage": Estimate the average-case time complexity (e.g., "O(n)", "O(n log n)").
+3. "timeWorst": Estimate the worst-case time complexity (e.g., "O(n²)", "O(2ⁿ)").
+4. "space": Estimate the auxiliary space complexity (excluding input size unless extra memory is directly proportional, e.g., "O(1)", "O(n)").
+5. "explanation": Provide a step-by-step breakdown explaining the math and logic behind these complexity estimates. Use clean Markdown formatting, bullet points, and short, beginner-friendly explanations.
+6. "optimizedCode": If the code is sub-optimal and can be optimized, provide the fully functional optimized code. If the code is already optimal or cannot be improved, leave this field as an empty string ("").
+7. "optimizationJustification": Explain why the optimized code is better, or leave it empty if the code is already optimal.`;
+
+export async function POST(req) {
+  try {
+    // 1. Parse Request Body
+    let body;
+    try {
+      body = await req.json();
+    } catch {
+      return jsonResponse({ error: "Invalid JSON request body." }, 400);
+    }
+
+    const { code, language } = body || {};
+
+    if (!code || typeof code !== "string" || !code.trim()) {
+      return jsonResponse({ error: "Missing or invalid 'code' string." }, 400);
+    }
+    if (code.length > 50000) {
+      return jsonResponse({ error: "Code exceeds maximum allowed length (50,000 characters)." }, 400);
+    }
+    if (!language || typeof language !== "string") {
+      return jsonResponse({ error: "Missing or invalid 'language' string." }, 400);
+    }
+
+    const ip = getClientIp(req.headers);
+
+    // 2. Rate Limiting Check
+    const { allowed } = await checkRateLimit(`complexity:estimate:${ip}`);
+    if (!allowed) {
+      return jsonResponse(
+        { error: "Too many requests. Please wait a minute and try again." },
+        429
+      );
+    }
+
+    // 3. Authentication Check
+    const authResult = await getAuthenticatedUser();
+
+    if (!authResult.success) {
+      if (authResult.type === "CONFIG_ERROR" || authResult.type === "AUTH_PROVIDER_ERROR") {
+        return jsonResponse({ error: "Authentication service unavailable" }, 500);
+      }
+      return jsonResponse({ error: "Authentication required" }, 401);
+    }
+
+    // 4. Gemini API Integration
+    if (!process.env.GEMINI_API_KEY) {
+      return jsonResponse(
+        { error: "Gemini API Key is missing. Please add GEMINI_API_KEY to your env configuration." },
+        500
+      );
+    }
+
+    const userPrompt = `Language: ${language}\n\nCode to analyze:\n\`\`\`${language.toLowerCase()}\n${code}\n\`\`\``;
+
+    const response = await fetch(
+      "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Goog-Api-Key": process.env.GEMINI_API_KEY,
+        },
+        body: JSON.stringify({
+          contents: [
+            {
+              role: "user",
+              parts: [{ text: `${SYSTEM_PROMPT}\n\n${userPrompt}` }],
+            },
+          ],
+          generationConfig: {
+            responseMimeType: "application/json",
+            responseSchema: {
+              type: "OBJECT",
+              properties: {
+                timeBest: { type: "STRING" },
+                timeAverage: { type: "STRING" },
+                timeWorst: { type: "STRING" },
+                space: { type: "STRING" },
+                explanation: { type: "STRING" },
+                optimizedCode: { type: "STRING" },
+                optimizationJustification: { type: "STRING" },
+              },
+              required: [
+                "timeBest",
+                "timeAverage",
+                "timeWorst",
+                "space",
+                "explanation",
+                "optimizedCode",
+                "optimizationJustification",
+              ],
+            },
+          },
+        }),
+      }
+    );
+
+    if (!response.ok) {
+      const errorText = await response.text().catch(() => "");
+      console.error("Gemini API request failed:", response.status, errorText);
+      return jsonResponse(
+        { error: "Gemini API request failed. Please check your key or try again." },
+        502
+      );
+    }
+
+    const data = await response.json();
+    const modelTextResponse = data?.candidates?.[0]?.content?.parts?.[0]?.text;
+
+    if (!modelTextResponse) {
+      return jsonResponse(
+        { error: "Received empty response from the AI model." },
+        500
+      );
+    }
+
+    try {
+      const jsonResult = JSON.parse(modelTextResponse.trim());
+      return jsonResponse(jsonResult);
+    } catch (parseError) {
+      console.error("Failed to parse Gemini JSON output:", parseError, modelTextResponse);
+      return jsonResponse(
+        { error: "Failed to parse complexity result from AI model." },
+        500
+      );
+    }
+  } catch (error) {
+    console.error("Complexity Estimator API error:", error);
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/contact/route.js b/src/app/api/contact/route.js
new file mode 100755
index 000000000..4f78e1e41
--- /dev/null
+++ b/src/app/api/contact/route.js
@@ -0,0 +1,151 @@
+import { getTransporter } from "@/lib/emailTransporter";
+import { checkRateLimit, checkGlobalSmtpQuota } from "@/lib/rateLimit";
+import { getClientIp } from "@/lib/getClientIp";
+import { verifyTurnstile } from "@/lib/verifyTurnstile";
+import {
+  CSRF_COOKIE_NAME,
+  CSRF_HEADER_NAME,
+} from "@/lib/csrfConstants";
+import { validateCsrfTokenEdge } from "@/lib/csrfToken";
+import { jsonResponse, errorResponse, getSupabaseAdmin } from "@/lib/serverApi";
+import { RATE_LIMITS } from "@/config/rateLimits";
+import { escapeHtml } from "@/lib/shared-utils";
+
+function isValidEmail(value) {
+  const email = String(value).trim();
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
+export async function POST(req) {
+  const cookieToken = req.cookies?.get(CSRF_COOKIE_NAME)?.value;
+  const headerToken = req.headers?.get(CSRF_HEADER_NAME);
+  if (!cookieToken || !headerToken || headerToken !== cookieToken) {
+    return Response.json({ error: "Invalid CSRF token" }, { status: 403 });
+  }
+  if (!(await validateCsrfTokenEdge(cookieToken))) {
+    return Response.json({ error: "Invalid CSRF token" }, { status: 403 });
+  }
+
+  try {
+    const ip = getClientIp(req.headers);
+
+    const { allowed, remaining, resetAt } =
+      await checkRateLimit(`contact:${ip}`);
+    if (!allowed) {
+      const retryAfter = Math.ceil((resetAt - Date.now()) / 1000);
+      return jsonResponse({ message: "Too many requests. Please try again later." }, 429, {
+        "Retry-After": retryAfter.toString(),
+        "X-RateLimit-Limit": RATE_LIMITS.CONTACT_API.LIMIT.toString(),
+        "X-RateLimit-Remaining": "0",
+      });
+    }
+
+    let body;
+    try {
+      body = await req.json();
+    } catch {
+      return jsonResponse({ message: "Invalid JSON body" }, 400);
+    }
+
+    const { name, email, subject, message, captchaToken } = body || {};
+
+    if (!captchaToken) {
+      return jsonResponse({ message: "Captcha token missing" }, 400);
+    }
+
+    const captcha = await verifyTurnstile(String(captchaToken), { ip });
+    if (!captcha.ok) {
+      return jsonResponse({ message: captcha.error }, 400);
+    }
+
+    const trimmedName = String(name || "").trim().slice(0, 80);
+    const trimmedEmail = String(email || "").trim().slice(0, 254);
+    const trimmedSubject = String(subject || "").trim().slice(0, 140);
+    const trimmedMessage = String(message || "").trim().slice(0, 4000);
+
+    if (!trimmedName) {
+      return jsonResponse({ message: "Name is required" }, 400);
+    }
+    if (!isValidEmail(trimmedEmail)) {
+      return jsonResponse({ message: "Valid email is required" }, 400);
+    }
+    if (!trimmedSubject) {
+      return jsonResponse({ message: "Subject is required" }, 400);
+    }
+    if (!trimmedMessage) {
+      return jsonResponse({ message: "Message is required" }, 400);
+    }
+
+    if (!process.env.EMAIL_USER || !process.env.EMAIL_PASSWORD) {
+      return jsonResponse({ message: "Server misconfigured: email credentials missing" }, 500);
+    }
+
+    const { allowed: smtpAllowed } = await checkGlobalSmtpQuota(
+      RATE_LIMITS.SMTP.DAILY_QUOTA
+    );
+    if (!smtpAllowed) {
+      console.warn("[contact] SMTP daily quota exceeded. Persisting message to pending_messages.");
+      try {
+        const supabase = getSupabaseAdmin();
+        await supabase.from("pending_messages").insert({
+          type: "contact",
+          payload: { name: trimmedName, email: trimmedEmail, subject: trimmedSubject, message: trimmedMessage },
+        });
+      } catch (dbErr) {
+        console.error("[contact] Failed to persist pending message:", dbErr);
+      }
+      return jsonResponse({
+        message: "Our messaging service is temporarily over capacity. Please try again tomorrow or contact us through other channels.",
+      }, 503);
+    }
+
+    const transporter = getTransporter();
+
+    const mailOptions = {
+      from: process.env.EMAIL_USER,
+      replyTo: trimmedEmail,
+      to: process.env.EMAIL_USER,
+      subject: `New Contact Form Submission: ${trimmedSubject}`,
+      text: `
+        Name: ${trimmedName}
+        Email: ${trimmedEmail}
+        Subject: ${trimmedSubject}
+        Message: ${trimmedMessage}
+      `,
+      html: `
+        <h2>New Contact Form Submission</h2>
+        <p><strong>Name:</strong> ${escapeHtml(trimmedName)}</p>
+        <p><strong>Email:</strong> ${escapeHtml(trimmedEmail)}</p>
+        <p><strong>Subject:</strong> ${escapeHtml(trimmedSubject)}</p>
+        <p><strong>Message:</strong></p>
+        <p>${escapeHtml(trimmedMessage).replaceAll("\n", "<br>")}</p>
+      `,
+    };
+
+    try {
+      await transporter.sendMail(mailOptions);
+    } catch (mailErr) {
+      console.error("[contact] Email send failed. Persisting message to pending_messages:", mailErr);
+      try {
+        const supabase = getSupabaseAdmin();
+        await supabase.from("pending_messages").insert({
+          type: "contact",
+          payload: { name: trimmedName, email: trimmedEmail, subject: trimmedSubject, message: trimmedMessage },
+        });
+      } catch (dbErr) {
+        console.error("[contact] Failed to persist pending message after email send failure:", dbErr);
+      }
+      return jsonResponse({
+        message: "Our messaging service is temporarily over capacity. Please try again tomorrow or contact us through other channels.",
+      }, 503);
+    }
+
+    return jsonResponse({ message: "Email sent successfully" }, 200, {
+      "X-RateLimit-Limit": RATE_LIMITS.CONTACT_API.LIMIT.toString(),
+      "X-RateLimit-Remaining": remaining.toString(),
+    });
+  } catch (error) {
+    console.error("Contact API error:", error);
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/cron/process-pending/route.js b/src/app/api/cron/process-pending/route.js
new file mode 100644
index 000000000..b014bb919
--- /dev/null
+++ b/src/app/api/cron/process-pending/route.js
@@ -0,0 +1,98 @@
+import { NextResponse } from "next/server";
+import { getSupabaseAdmin } from "@/lib/serverApi";
+import nodemailer from "nodemailer";
+import { escapeHtml } from "@/lib/shared-utils";
+
+export async function GET(req) {
+  const authHeader = req.headers.get("authorization");
+  if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
+    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+  }
+
+  const supabase = getSupabaseAdmin();
+
+  try {
+    const { data: pendingMessages, error } = await supabase
+      .from("pending_messages")
+      .select("*")
+      .is("sent_at", null)
+      .limit(50);
+
+    if (error) throw error;
+    if (!pendingMessages || pendingMessages.length === 0) {
+      return NextResponse.json({ message: "No pending messages to process." });
+    }
+
+    const transporter = nodemailer.createTransport({
+      service: "gmail",
+      auth: {
+        user: process.env.EMAIL_USER,
+        pass: process.env.EMAIL_PASSWORD,
+      },
+    });
+
+    let processedCount = 0;
+    let failedCount = 0;
+
+    for (const msg of pendingMessages) {
+      try {
+        if (msg.type === "contact") {
+          const { name, email, subject, message } = msg.payload;
+
+          await transporter.sendMail({
+            from: process.env.EMAIL_USER,
+            replyTo: email,
+            to: process.env.EMAIL_USER,
+            subject: `[DELAYED] New Contact Form Submission: ${escapeHtml(subject)}`,
+            text: `Name: ${name}\nEmail: ${email}\nSubject: ${subject}\nMessage: ${message}`,
+          });
+
+          await supabase
+            .from("pending_messages")
+            .update({ sent_at: new Date().toISOString() })
+            .eq("id", msg.id);
+
+          processedCount++;
+        } else if (msg.type === "review") {
+          const { name, email, review, rating } = msg.payload;
+          const inboxEmail = process.env.REVIEW_INBOX_EMAIL || process.env.EMAIL_USER;
+
+          await transporter.sendMail({
+            from: process.env.EMAIL_USER,
+            replyTo: email,
+            to: inboxEmail,
+            subject: `[DELAYED] New Review Submission from ${escapeHtml(name)}`,
+            html: `
+        <h2>New Review Received (Delayed)</h2>
+        <p><strong>Name:</strong> ${escapeHtml(name)}</p>
+        <p><strong>Email:</strong> ${escapeHtml(email)}</p>
+        <p><strong>Rating:</strong> ${"★".repeat(rating)}${"☆".repeat(
+          5 - rating
+        )}</p>
+        <p><strong>Review:</strong></p>
+        <p>${escapeHtml(review).replaceAll("\n", "<br>")}</p>
+      `,
+          });
+
+          await supabase
+            .from("pending_messages")
+            .update({ sent_at: new Date().toISOString() })
+            .eq("id", msg.id);
+
+          processedCount++;
+        }
+      } catch (msgError) {
+        failedCount++;
+        console.error(`[CRON] Failed to process pending message ${msg.id}:`, msgError);
+      }
+    }
+
+    return NextResponse.json({
+      message: `Processed ${processedCount} pending messages. ${failedCount} failed and will retry next run.`,
+    });
+
+  } catch (error) {
+    console.error("[CRON] Error processing pending messages:", error);
+    return NextResponse.json({ message: "Internal server error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/csrf-token/route.js b/src/app/api/csrf-token/route.js
new file mode 100644
index 000000000..c55db22d6
--- /dev/null
+++ b/src/app/api/csrf-token/route.js
@@ -0,0 +1,17 @@
+import { cookies } from "next/headers";
+import { generateCsrfToken } from "@/lib/csrfToken";
+import { CSRF_COOKIE_NAME } from "@/lib/csrfConstants";
+import { jsonResponse } from "@/lib/serverApi";
+
+export async function GET() {
+  const token = await generateCsrfToken();
+  const cookieStore = await cookies();
+  cookieStore.set(CSRF_COOKIE_NAME, token, {
+    secure: process.env.NODE_ENV === "production",
+    sameSite: "strict",
+    httpOnly: true,
+    path: "/",
+    maxAge: 86400,
+  });
+  return jsonResponse({ csrfToken: token });
+}
diff --git a/src/app/api/github-repos/route.js b/src/app/api/github-repos/route.js
new file mode 100644
index 000000000..d82a636e4
--- /dev/null
+++ b/src/app/api/github-repos/route.js
@@ -0,0 +1,54 @@
+import { NextResponse } from "next/server";
+import { getAuthenticatedUser } from "@/lib/auth";
+
+// GET /api/github-repos?username=shrutssss
+export async function GET(request) {
+  const authResult = await getAuthenticatedUser();
+  if (!authResult.success) {
+    return NextResponse.json({ error: "Authentication required" }, { status: 401 });
+  }
+
+  const { searchParams } = new URL(request.url);
+  const username = searchParams.get("username")?.trim();
+
+  if (!username) {
+    return NextResponse.json({ error: "Missing username" }, { status: 400 });
+  }
+
+  try {
+    const headers = { "User-Agent": "AlgoBuddy-App" };
+
+    if (process.env.GITHUB_TOKEN) {
+      headers["Authorization"] = `Bearer ${process.env.GITHUB_TOKEN}`;
+    }
+
+    const res = await fetch(
+      `https://api.github.com/users/${encodeURIComponent(username)}/repos?sort=updated&per_page=30`,
+      { headers, next: { revalidate: 3600 } }
+    );
+
+    if (res.status === 404) {
+      return NextResponse.json({ error: `GitHub user "${username}" not found` }, { status: 404 });
+    }
+
+    if (!res.ok) throw new Error("GitHub API error");
+
+    const data = await res.json();
+
+    const repos = data
+      .filter((repo) => !repo.fork)
+      .map((repo) => ({
+        name: repo.name,
+        description: repo.description || "",
+        language: repo.language || "",
+        topics: repo.topics || [],
+        html_url: repo.html_url,
+        stargazers_count: repo.stargazers_count,
+      }));
+
+    return NextResponse.json({ repos });
+  } catch (err) {
+    console.error("[github-repos]", err);
+    return NextResponse.json({ error: "Failed to fetch GitHub repos" }, { status: 500 });
+  }
+}
\ No newline at end of file
diff --git a/src/app/api/job-bookmarks/export/route.js b/src/app/api/job-bookmarks/export/route.js
new file mode 100644
index 000000000..5f0c31995
--- /dev/null
+++ b/src/app/api/job-bookmarks/export/route.js
@@ -0,0 +1,75 @@
+import { cookies } from "next/headers";
+import { getAuthenticatedUser } from "@/lib/auth";
+import { getSupabaseServerClient, errorResponse } from "@/lib/serverApi";
+
+function escapeCSV(value) {
+  if (value == null) return "";
+  const str = String(value);
+  if (str.includes(",") || str.includes('"') || str.includes("\n")) {
+    return `"${str.replace(/"/g, '""')}"`;
+  }
+  return str;
+}
+
+function toCSV(rows, columns) {
+  const header = columns.map((c) => escapeCSV(c.label)).join(",");
+  const body = rows
+    .map((row) => columns.map((c) => escapeCSV(row[c.key])).join(","))
+    .join("\n");
+  return header + "\n" + body + "\n";
+}
+
+export async function GET(request) {
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return new Response("Authentication required", { status: 401 });
+    }
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    const { data: bookmarks, error } = await supabase
+      .from("bookmarks")
+      .select("created_at, job:job_id(*)")
+      .eq("student_id", authResult.user.id)
+      .order("created_at", { ascending: false });
+
+    if (error) {
+      console.error("[/api/job-bookmarks/export GET] Supabase error:", error.message);
+      return new Response("Export failed", { status: 500 });
+    }
+
+    const columns = [
+      { key: "job_title", label: "Job Title" },
+      { key: "company", label: "Company" },
+      { key: "location", label: "Location" },
+      { key: "job_type", label: "Job Type" },
+      { key: "salary_range", label: "Salary Range" },
+      { key: "experience_level", label: "Experience Level" },
+      { key: "bookmarked_at", label: "Bookmarked Date" },
+    ];
+
+    const rows = (bookmarks || []).map((b) => ({
+      job_title: b.job?.title || "",
+      company: b.job?.company || "",
+      location: b.job?.location || "",
+      job_type: b.job?.job_type || "",
+      salary_range: b.job?.salary_range || "",
+      experience_level: b.job?.experience_level || "",
+      bookmarked_at: b.created_at ? new Date(b.created_at).toLocaleDateString() : "",
+    }));
+
+    const csv = toCSV(rows, columns);
+
+    return new Response(csv, {
+      status: 200,
+      headers: {
+        "Content-Type": "text/csv; charset=utf-8",
+        "Content-Disposition": `attachment; filename="saved-jobs-export-${Date.now()}.csv"`,
+      },
+    });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/job-bookmarks/route.js b/src/app/api/job-bookmarks/route.js
new file mode 100644
index 000000000..5bb693b73
--- /dev/null
+++ b/src/app/api/job-bookmarks/route.js
@@ -0,0 +1,102 @@
+import { cookies } from "next/headers";
+import { getAuthenticatedUser } from "@/lib/auth";
+import { getSupabaseServerClient, jsonResponse, errorResponse } from "@/lib/serverApi";
+import { validateCsrfOrigin } from "@/lib/csrfConstants";
+
+export async function POST(request) {
+  if (!validateCsrfOrigin(request)) {
+    return jsonResponse({ error: "CSRF validation failed: untrusted origin" }, 403);
+  }
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse({ error: "Authentication required" }, 401);
+    }
+
+    const body = await request.json().catch(() => ({}));
+    const { jobId } = body;
+
+    if (!jobId) {
+      return jsonResponse({ error: "jobId is required" }, 400);
+    }
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    const { data: existing } = await supabase
+      .from("bookmarks")
+      .select("id")
+      .eq("student_id", authResult.user.id)
+      .eq("job_id", jobId)
+      .maybeSingle();
+
+    if (existing) {
+      const { error: deleteError } = await supabase
+        .from("bookmarks")
+        .delete()
+        .eq("id", existing.id);
+
+      if (deleteError) {
+        console.error("[/api/job-bookmarks POST] Supabase delete error:", deleteError.message);
+        return jsonResponse({ error: deleteError.message }, 500);
+      }
+
+      return jsonResponse({ bookmarked: false });
+    }
+
+    const { error: insertError } = await supabase
+      .from("bookmarks")
+      .insert({ student_id: authResult.user.id, job_id: jobId });
+
+    if (insertError) {
+      console.error("[/api/job-bookmarks POST] Supabase insert error:", insertError.message);
+      return jsonResponse({ error: insertError.message }, 500);
+    }
+
+    return jsonResponse({ bookmarked: true });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+export async function GET(request) {
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse({ error: "Authentication required" }, 401);
+    }
+
+    const { searchParams } = new URL(request.url);
+    const page = parseInt(searchParams.get("page")) || 1;
+    const limit = parseInt(searchParams.get("limit")) || 20;
+    const skip = (page - 1) * limit;
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    const { data: bookmarks, error, count } = await supabase
+      .from("bookmarks")
+      .select("id, created_at, job:job_id(*)", { count: "exact" })
+      .eq("student_id", authResult.user.id)
+      .order("created_at", { ascending: false })
+      .range(skip, skip + limit - 1);
+
+    if (error) {
+      console.error("[/api/job-bookmarks GET] Supabase error:", error.message);
+      return jsonResponse({ jobs: [], bookmarkedIds: [], totalPages: 0, currentPage: page, totalJobs: 0 });
+    }
+
+    const jobs = (bookmarks || []).map((b) => b.job).filter(Boolean);
+    const bookmarkedIds = jobs.map((j) => j.id);
+
+    return jsonResponse({
+      jobs,
+      bookmarkedIds,
+      totalPages: Math.ceil((count || 0) / limit),
+      currentPage: page,
+      totalJobs: count || 0,
+    });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/mysheet/clone/[sharedUserId]/route.js b/src/app/api/mysheet/clone/[sharedUserId]/route.js
new file mode 100644
index 000000000..e4108ad1a
--- /dev/null
+++ b/src/app/api/mysheet/clone/[sharedUserId]/route.js
@@ -0,0 +1,70 @@
+import { getAuthenticatedUser } from "@/lib/auth";
+import { getSupabaseAnonClient, getSupabaseRequestClient, jsonResponse, errorResponse } from "@/lib/serverApi";
+
+const UUID_RE =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+
+export async function POST(request, { params }) {
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse(
+        { error: "Authentication required" },
+        authResult.type === "CONFIG_ERROR" ? 500 : 401
+      );
+    }
+
+    const { sharedUserId } = await params;
+    if (!sharedUserId || !UUID_RE.test(sharedUserId)) {
+      return jsonResponse({ error: "Valid sharedUserId is required" }, 400);
+    }
+
+    const anon = getSupabaseAnonClient();
+
+    // Fetch shared user's public sheet items (no auth needed — RLS allows public reads)
+    const { data: sharedData, error: fetchError } = await anon
+      .from("my_sheet")
+      .select("problem_id, note")
+      .eq("user_id", sharedUserId)
+      .eq("is_public", true);
+
+    if (fetchError) return jsonResponse({ error: fetchError.message }, 500);
+    if (!sharedData || sharedData.length === 0) {
+      return jsonResponse({ error: "No public items to clone" }, 404);
+    }
+
+    const supabase = getSupabaseRequestClient(request);
+
+    // Fetch authenticated user's existing sheet items to avoid duplicates
+    const { data: userData, error: userFetchError } = await supabase
+      .from("my_sheet")
+      .select("problem_id")
+      .eq("user_id", authResult.user.id);
+
+    if (userFetchError) return jsonResponse({ error: userFetchError.message }, 500);
+    
+    const existingProblems = new Set((userData || []).map(row => row.problem_id));
+    
+    // 3. Insert new items
+    const toInsert = sharedData
+      .filter(item => !existingProblems.has(item.problem_id))
+      .map(item => ({
+        user_id: authResult.user.id,
+        problem_id: item.problem_id,
+        note: item.note || "",
+        added_at: new Date().toISOString()
+      }));
+
+    if (toInsert.length > 0) {
+      const { error: insertError } = await supabase
+        .from("my_sheet")
+        .insert(toInsert);
+
+      if (insertError) return jsonResponse({ error: insertError.message }, 500);
+    }
+
+    return jsonResponse({ success: true, clonedCount: toInsert.length });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/mysheet/route.js b/src/app/api/mysheet/route.js
new file mode 100644
index 000000000..41009b386
--- /dev/null
+++ b/src/app/api/mysheet/route.js
@@ -0,0 +1,161 @@
+import { cookies } from "next/headers";
+import { getAuthenticatedUser } from "@/lib/auth";
+import { getSupabaseServerClient, jsonResponse, errorResponse } from "@/lib/serverApi";
+import { validateCsrfOrigin } from "@/lib/csrfConstants";
+
+export async function GET(request) {
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse(
+        { error: "Authentication required" },
+        authResult.type === "CONFIG_ERROR" ? 500 : 401
+      );
+    }
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+    const { data, error } = await supabase
+      .from("my_sheet")
+      .select("problem_id, added_at, note")
+      .eq("user_id", authResult.user.id);
+
+    if (error) return jsonResponse({ error: error.message }, 500);
+
+    const sheet = {};
+    (data || []).forEach((row) => {
+      sheet[row.problem_id] = {
+        addedAt: row.added_at,
+        note: row.note || "",
+      };
+    });
+
+    return jsonResponse({ sheet });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+export async function POST(request) {
+  if (!validateCsrfOrigin(request)) {
+    return jsonResponse({ error: "CSRF validation failed: untrusted origin" }, 403);
+  }
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse(
+        { error: "Authentication required" },
+        authResult.type === "CONFIG_ERROR" ? 500 : 401
+      );
+    }
+
+    const body = await request.json().catch(() => ({}));
+    const { problemId, note = "", isPublic, sharedNotes } = body;
+    if (!problemId) return jsonResponse({ error: "problemId is required" }, 400);
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    const { data: existing } = await supabase
+      .from("my_sheet")
+      .select("added_at")
+      .eq("user_id", authResult.user.id)
+      .eq("problem_id", problemId)
+      .maybeSingle();
+
+    const row = {
+      user_id: authResult.user.id,
+      problem_id: problemId,
+      note,
+      added_at: existing?.added_at ?? new Date().toISOString(),
+    };
+    if (typeof isPublic === "boolean") {
+      row.is_public = isPublic;
+    }
+    if (typeof sharedNotes === "boolean") {
+      row.shared_notes = sharedNotes;
+    }
+
+    const { error } = await supabase.from("my_sheet").upsert(row, {
+      onConflict: ["user_id", "problem_id"],
+    });
+
+    if (error) return jsonResponse({ error: error.message }, 500);
+    return jsonResponse({ success: true });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+export async function PATCH(request) {
+  if (!validateCsrfOrigin(request)) {
+    return jsonResponse({ error: "CSRF validation failed: untrusted origin" }, 403);
+  }
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse(
+        { error: "Authentication required" },
+        authResult.type === "CONFIG_ERROR" ? 500 : 401
+      );
+    }
+
+    const body = await request.json().catch(() => ({}));
+    const { problemId, isPublic, sharedNotes } = body;
+    if (!problemId) return jsonResponse({ error: "problemId is required" }, 400);
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    const update = {};
+    if (typeof isPublic === "boolean") update.is_public = isPublic;
+    if (typeof sharedNotes === "boolean") update.shared_notes = sharedNotes;
+
+    if (Object.keys(update).length === 0) {
+      return jsonResponse({ error: "No updatable fields provided" }, 400);
+    }
+
+    const { error } = await supabase
+      .from("my_sheet")
+      .update(update)
+      .eq("user_id", authResult.user.id)
+      .eq("problem_id", problemId);
+
+    if (error) return jsonResponse({ error: error.message }, 500);
+    return jsonResponse({ success: true });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+export async function DELETE(request) {
+  if (!validateCsrfOrigin(request)) {
+    return jsonResponse({ error: "CSRF validation failed: untrusted origin" }, 403);
+  }
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse(
+        { error: "Authentication required" },
+        authResult.type === "CONFIG_ERROR" ? 500 : 401
+      );
+    }
+
+    const { searchParams } = new URL(request.url);
+    const problemId = searchParams.get("problemId");
+    if (!problemId) return jsonResponse({ error: "problemId is required" }, 400);
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+    const { error } = await supabase
+      .from("my_sheet")
+      .delete()
+      .eq("user_id", authResult.user.id)
+      .eq("problem_id", problemId);
+
+    if (error) return jsonResponse({ error: error.message }, 500);
+    return jsonResponse({ success: true });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/mysheet/share/route.js b/src/app/api/mysheet/share/route.js
new file mode 100644
index 000000000..bc9a5e0ca
--- /dev/null
+++ b/src/app/api/mysheet/share/route.js
@@ -0,0 +1,36 @@
+import { cookies } from "next/headers";
+import { getAuthenticatedUser } from "@/lib/auth";
+import { getSupabaseServerClient, jsonResponse, errorResponse } from "@/lib/serverApi";
+
+// POST /api/mysheet/share — mark all of the user's sheet items as public
+export async function POST() {
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse(
+        { error: "Authentication required" },
+        authResult.type === "CONFIG_ERROR" ? 500 : 401
+      );
+    }
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    const { data, error } = await supabase
+      .from("my_sheet")
+      .update({ is_public: true })
+      .eq("user_id", authResult.user.id)
+      .select("problem_id");
+
+    if (error) return jsonResponse({ error: error.message }, 500);
+
+    const publishedCount = data?.length ?? 0;
+    if (publishedCount === 0) {
+      return jsonResponse({ error: "No items in sheet to share" }, 400);
+    }
+
+    return jsonResponse({ success: true, publishedCount });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/mysheet/shared/[userId]/route.js b/src/app/api/mysheet/shared/[userId]/route.js
new file mode 100644
index 000000000..e8dad9afb
--- /dev/null
+++ b/src/app/api/mysheet/shared/[userId]/route.js
@@ -0,0 +1,33 @@
+import { getSupabaseAnonClient, jsonResponse, errorResponse } from "@/lib/serverApi";
+
+const UUID_RE =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+
+// GET /api/mysheet/shared/[userId] — public read, no auth required
+export async function GET(request, { params }) {
+  try {
+    const { userId } = await params;
+    if (!userId || !UUID_RE.test(userId)) {
+      return jsonResponse({ error: "Valid userId is required" }, 400);
+    }
+
+    const supabase = getSupabaseAnonClient();
+    const { data, error } = await supabase
+      .from("my_sheet")
+      .select("problem_id, added_at, note, shared_notes")
+      .eq("user_id", userId)
+      .eq("is_public", true);
+
+    if (error) return jsonResponse({ error: error.message }, 500);
+
+    const items = (data || []).map((row) => ({
+      problemId: row.problem_id,
+      addedAt: row.added_at,
+      note: row.shared_notes ? (row.note || "") : "",
+    }));
+
+    return jsonResponse({ items });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/newsletter/subscribe/route.js b/src/app/api/newsletter/subscribe/route.js
new file mode 100644
index 000000000..ec1a315e1
--- /dev/null
+++ b/src/app/api/newsletter/subscribe/route.js
@@ -0,0 +1,36 @@
+import { getSupabaseAdmin, jsonResponse, errorResponse } from "@/lib/serverApi";
+import { validateCsrfOrigin } from "@/lib/csrfConstants";
+
+export async function POST(req) {
+  if (!validateCsrfOrigin(req)) {
+    return jsonResponse({ error: "CSRF validation failed: untrusted origin" }, 403);
+  }
+  try {
+    const { email } = await req.json();
+
+    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      return jsonResponse({ error: "Invalid email address" }, 400);
+    }
+
+    const supabase = getSupabaseAdmin();
+
+    const { error } = await supabase
+      .from('newsletter_subscriptions')
+      .insert([{ email }])
+      .select()
+      .single();
+
+    if (error) {
+      if (error.code === '23505') { // Postgres unique violation error code
+        return jsonResponse({ message: "You are already subscribed!" }, 200);
+      }
+      console.error("Newsletter subscription error:", error);
+      return errorResponse({ status: 500, message: "Failed to subscribe. Please try again later." });
+    }
+
+    return jsonResponse({ message: "Successfully subscribed!" }, 201);
+  } catch (error) {
+    console.error("Newsletter API error:", error);
+    return errorResponse({ status: 500, message: "Internal server error" });
+  }
+}
diff --git a/src/app/api/notifications/route.js b/src/app/api/notifications/route.js
new file mode 100644
index 000000000..0d92a9f6d
--- /dev/null
+++ b/src/app/api/notifications/route.js
@@ -0,0 +1,126 @@
+import { cookies } from "next/headers";
+import { getAuthenticatedUser } from "@/lib/auth";
+import { getSupabaseServerClient, jsonResponse, errorResponse } from "@/lib/serverApi";
+
+export async function GET(request) {
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse({ error: "Authentication required" }, 401);
+    }
+
+    const { searchParams } = new URL(request.url);
+    const unreadOnly = searchParams.get("unreadOnly") === "true";
+    const page = parseInt(searchParams.get("page")) || 1;
+    const limit = parseInt(searchParams.get("limit")) || 20;
+    const skip = (page - 1) * limit;
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    let query = supabase
+      .from("notifications")
+      .select("*, job:job_id(title, company)", { count: "exact" })
+      .eq("student_id", authResult.user.id)
+      .order("created_at", { ascending: false })
+      .range(skip, skip + limit - 1);
+
+    if (unreadOnly) {
+      query = query.eq("read", false);
+    }
+
+    const { data: notifications, error, count } = await query;
+
+    if (error) {
+      // Supabase error is harmless here (table doesn't exist yet)
+      // console.error("[/api/notifications GET] Supabase error:", error.message);
+      return jsonResponse({ notifications: [], totalPages: 0, currentPage: page, totalUnread: 0 });
+    }
+
+    let totalUnread = 0;
+    if (!unreadOnly) {
+      const { count: unreadCount } = await supabase
+        .from("notifications")
+        .select("*", { count: "exact", head: true })
+        .eq("student_id", authResult.user.id)
+        .eq("read", false);
+      totalUnread = unreadCount || 0;
+    }
+
+    return jsonResponse({
+      notifications: notifications || [],
+      totalPages: Math.ceil((count || 0) / limit),
+      currentPage: page,
+      totalUnread,
+    });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+export async function PATCH(request) {
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse({ error: "Authentication required" }, 401);
+    }
+
+    const body = await request.json().catch(() => ({}));
+    const { notificationIds, markAll } = body;
+
+    // Require an explicit action — either a non-empty array of IDs to mark
+    // as read, or markAll: true to mark every notification for the user.
+    // Reject empty / missing payloads so a malformed request or missing body
+    // never silently triggers a bulk update.
+    const hasIds = Array.isArray(notificationIds) && notificationIds.length > 0;
+    const hasMarkAll = markAll === true;
+
+    if (!hasIds && !hasMarkAll) {
+      return jsonResponse(
+        {
+          error:
+            "Provide a non-empty 'notificationIds' array, or set 'markAll: true' to mark all notifications read.",
+        },
+        400
+      );
+    }
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    let query = supabase
+      .from("notifications")
+      .update({ read: true })
+      .eq("student_id", authResult.user.id);
+
+    if (hasIds) {
+      // Strip any non-string or blank entries before passing to the query.
+      const validIds = notificationIds.filter(
+        (id) => typeof id === "string" && id.trim().length > 0
+      );
+      if (validIds.length === 0) {
+        return jsonResponse(
+          { error: "notificationIds contains no valid entries." },
+          400
+        );
+      }
+      query = query.in("id", validIds);
+    }
+    // else: hasMarkAll === true — no additional filter, updates all rows for
+    // the authenticated user. The .eq("student_id", ...) above ensures the
+    // operation is always scoped to the requesting user.
+
+    const { data: updatedRows, error, count } = await query.select("id");
+
+    if (error) {
+      console.error("[/api/notifications PATCH] Supabase error:", error.message);
+      return jsonResponse({ error: error.message }, 500);
+    }
+
+    const updated = Array.isArray(updatedRows) ? updatedRows.length : count ?? 0;
+
+    return jsonResponse({ success: true, updated });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/progress/route.js b/src/app/api/progress/route.js
new file mode 100644
index 000000000..bb384e3f0
--- /dev/null
+++ b/src/app/api/progress/route.js
@@ -0,0 +1,190 @@
+import { cookies } from "next/headers";
+import { getAuthenticatedUser } from "@/lib/auth";
+import { getSupabaseServerClient, jsonResponse, errorResponse } from "@/lib/serverApi";
+
+// GET /api/progress
+// Returns all problem progress for the authenticated user as a flat array,
+// along with currentStreak and longestStreak from user_practice_stats so that
+// the client always has an authoritative server-side streak value and does not
+// have to fall back to the per-device localStorage counter.
+export async function GET(request) {
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse(
+        { error: "Authentication required" },
+        authResult.type === "CONFIG_ERROR" ? 500 : 401
+      );
+    }
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    // Return streak data and counts.
+    const now = new Date();
+    const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate()).toISOString();
+    const dayOfWeek = now.getDay();
+    const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+    const startOfWeek = new Date(now.getFullYear(), now.getMonth(), now.getDate() - daysToMonday).toISOString();
+    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1).toISOString();
+
+    // Fetch progress rows, streak stats, and counts in parallel.
+    const [progressResult, statsResult, dailyResult, weeklyResult, monthlyResult] = await Promise.all([
+      supabase
+        .from("user_progress")
+        .select("problem_id, status, updated_at")
+        .eq("user_id", authResult.user.id),
+      supabase
+        .from("user_practice_stats")
+        .select("current_streak, longest_streak")
+        .eq("user_id", authResult.user.id)
+        .maybeSingle(),
+      supabase.from("user_progress").select("id", { count: "exact", head: true })
+        .eq("user_id", authResult.user.id)
+        .eq("status", "Completed")
+        .gte("updated_at", startOfDay),
+      supabase.from("user_progress").select("id", { count: "exact", head: true })
+        .eq("user_id", authResult.user.id)
+        .eq("status", "Completed")
+        .gte("updated_at", startOfWeek),
+      supabase.from("user_progress").select("id", { count: "exact", head: true })
+        .eq("user_id", authResult.user.id)
+        .eq("status", "Completed")
+        .gte("updated_at", startOfMonth),
+    ]);
+
+    if (progressResult.error) return jsonResponse({ error: progressResult.error.message }, 500);
+
+    // Return as map: { [problemId]: { status, updatedAt } }
+    const progressMap = {};
+    (progressResult.data || []).forEach((row) => {
+      if (row.problem_id) {
+        progressMap[row.problem_id] = {
+          status: row.status,
+          updatedAt: row.updated_at,
+        };
+      }
+    });
+
+    const stats = statsResult.data;
+    return jsonResponse({
+      progress: progressMap,
+      currentStreak: stats?.current_streak ?? 0,
+      longestStreak: stats?.longest_streak ?? 0,
+      dailySolved: dailyResult.count ?? 0,
+      weeklySolved: weeklyResult.count ?? 0,
+      monthlySolved: monthlyResult.count ?? 0,
+    });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+// POST /api/progress
+// Upserts a single problem's progress status
+export async function POST(request) {
+  try {
+    const authResult = await getAuthenticatedUser();
+    if (!authResult.success) {
+      return jsonResponse(
+        { error: "Authentication required" },
+        authResult.type === "CONFIG_ERROR" ? 500 : 401
+      );
+    }
+    const body = await request.json().catch(() => ({}));
+    const { problemId, status, localDate } = body;
+
+    if (!problemId || !status) {
+      return jsonResponse({ error: "problemId and status are required" }, 400);
+    }
+
+    const validStatuses = ["Not Started", "In Progress", "Completed"];
+    if (!validStatuses.includes(status)) {
+      return jsonResponse({ error: `status must be one of: ${validStatuses.join(", ")}` }, 400);
+    }
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+    let currentStreak = 0;
+    let longestStreak = 0;
+
+    if (status === "Completed") {
+      const today = new Date().toISOString().split("T")[0];
+      const yesterday = new Date(Date.now() - 86400000).toISOString().split("T")[0];
+
+      let verifiedLocalDate = typeof localDate === "string" && /^\d{4}-\d{2}-\d{2}$/.test(localDate)
+        ? localDate
+        : today;
+
+      // Reject dates outside [yesterday, today] to prevent streak fabrication
+      if (verifiedLocalDate < yesterday || verifiedLocalDate > today) {
+        verifiedLocalDate = today;
+      }
+
+      const { data, error } = await supabase.rpc('upsert_progress_and_update_streak', {
+        p_user_id: authResult.user.id,
+        p_problem_id: problemId,
+        p_status: status,
+        p_updated_at: new Date().toISOString(),
+        p_local_date: verifiedLocalDate
+      });
+      if (error) return jsonResponse({ error: error.message }, 500);
+      currentStreak = data?.[0]?.current_streak ?? 0;
+      longestStreak = data?.[0]?.longest_streak ?? 0;
+    } else {
+      const { data, error } = await supabase.from("user_progress").upsert(
+        {
+          user_id: authResult.user.id,
+          problem_id: problemId,
+          status: status,
+          updated_at: new Date().toISOString(),
+        },
+        { onConflict: ["user_id", "problem_id"] }
+      );
+      if (error) return jsonResponse({ error: error.message }, 500);
+
+      const { data: streakData, error: streakError } = await supabase
+        .from("user_practice_stats")
+        .select("current_streak, longest_streak")
+        .eq("user_id", authResult.user.id)
+        .maybeSingle();
+      if (!streakError && streakData) {
+        currentStreak = streakData.current_streak ?? 0;
+        longestStreak = streakData.longest_streak ?? 0;
+      }
+    }
+
+    // Return streak data so the client can always trust the server value.
+    const now = new Date();
+    const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate()).toISOString();
+    const dayOfWeek = now.getDay();
+    const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+    const startOfWeek = new Date(now.getFullYear(), now.getMonth(), now.getDate() - daysToMonday).toISOString();
+    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1).toISOString();
+
+    const [dailyResult, weeklyResult, monthlyResult] = await Promise.all([
+      supabase.from("user_progress").select("id", { count: "exact", head: true })
+        .eq("user_id", authResult.user.id)
+        .eq("status", "Completed")
+        .gte("updated_at", startOfDay),
+      supabase.from("user_progress").select("id", { count: "exact", head: true })
+        .eq("user_id", authResult.user.id)
+        .eq("status", "Completed")
+        .gte("updated_at", startOfWeek),
+      supabase.from("user_progress").select("id", { count: "exact", head: true })
+        .eq("user_id", authResult.user.id)
+        .eq("status", "Completed")
+        .gte("updated_at", startOfMonth),
+    ]);
+
+    return jsonResponse({
+      success: true,
+      currentStreak,
+      longestStreak,
+      dailySolved: dailyResult.count ?? 0,
+      weeklySolved: weeklyResult.count ?? 0,
+      monthlySolved: monthlyResult.count ?? 0,
+    });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/send-review/route.js b/src/app/api/send-review/route.js
new file mode 100755
index 000000000..ccc769ba7
--- /dev/null
+++ b/src/app/api/send-review/route.js
@@ -0,0 +1,150 @@
+import { getTransporter } from "@/lib/emailTransporter";
+import { checkRateLimit, checkGlobalSmtpQuota } from "@/lib/rateLimit";
+import { getClientIp } from "@/lib/getClientIp";
+import { verifyTurnstile } from "@/lib/verifyTurnstile";
+import { validateCsrfTokenEdge } from "@/lib/csrfToken";
+import { CSRF_COOKIE_NAME, CSRF_HEADER_NAME } from "@/lib/csrfConstants";
+import { jsonResponse, errorResponse, getSupabaseAdmin } from "@/lib/serverApi";
+import { escapeHtml } from "@/lib/shared-utils";
+
+function isValidEmail(value) {
+  const email = String(value).trim();
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
+function clampInt(value, min, max) {
+  const num = Number(value);
+  if (!Number.isFinite(num)) return null;
+  const int = Math.trunc(num);
+  if (int < min || int > max) return null;
+  return int;
+}
+
+export async function POST(request) {
+  const cookieToken = request.cookies?.get(CSRF_COOKIE_NAME)?.value;
+  const headerToken = request.headers?.get(CSRF_HEADER_NAME);
+  if (!cookieToken || !headerToken || cookieToken !== headerToken || !(await validateCsrfTokenEdge(headerToken))) {
+    return jsonResponse({ error: "Invalid CSRF token" }, 403);
+  }
+
+  try {
+    const ip = getClientIp(request.headers);
+
+    const { allowed, remaining, resetAt } =
+      await checkRateLimit(`review:${ip}`);
+    if (!allowed) {
+      const retryAfter = Math.ceil((resetAt - Date.now()) / 1000);
+      return jsonResponse({ message: "Too many requests. Please try again later." }, 429, {
+        "Retry-After": retryAfter.toString(),
+        "X-RateLimit-Limit": "5",
+        "X-RateLimit-Remaining": "0",
+      });
+    }
+
+    let body;
+    try {
+      body = await request.json();
+    } catch {
+      return jsonResponse({ success: false, error: "Invalid JSON body" }, 400);
+    }
+
+    const { name, email, review, rating, captchaToken } = body || {};
+
+    if (!captchaToken) {
+      return jsonResponse({ success: false, error: "Captcha token missing" }, 400);
+    }
+
+    const captcha = await verifyTurnstile(String(captchaToken), { ip });
+    if (!captcha.ok) {
+      return jsonResponse({ success: false, error: captcha.error }, 400);
+    }
+
+    const trimmedName = String(name || "").trim().slice(0, 80);
+    const trimmedEmail = String(email || "").trim().slice(0, 254);
+    const trimmedReview = String(review || "").trim().slice(0, 2000);
+    const safeRating = clampInt(rating, 1, 5);
+
+    if (!trimmedName) {
+      return jsonResponse({ success: false, error: "Name is required" }, 400);
+    }
+    if (!isValidEmail(trimmedEmail)) {
+      return jsonResponse({ success: false, error: "Valid email is required" }, 400);
+    }
+    if (!trimmedReview) {
+      return jsonResponse({ success: false, error: "Review is required" }, 400);
+    }
+    if (!safeRating) {
+      return jsonResponse({ success: false, error: "Rating must be an integer between 1 and 5" }, 400);
+    }
+
+    if (!process.env.EMAIL_USER || !process.env.EMAIL_PASSWORD) {
+      return jsonResponse({ success: false, error: "Server misconfigured: email credentials missing" }, 500);
+    }
+
+    const { allowed: smtpAllowed } = await checkGlobalSmtpQuota(
+      parseInt(process.env.SMTP_DAILY_QUOTA || "400", 10)
+    );
+    if (!smtpAllowed) {
+      console.warn("[review] SMTP daily quota exceeded. Persisting message to pending_messages.");
+      try {
+        const supabase = getSupabaseAdmin();
+        await supabase.from("pending_messages").insert({
+          type: "review",
+          payload: { name: trimmedName, email: trimmedEmail, review: trimmedReview, rating: safeRating },
+        });
+      } catch (dbErr) {
+        console.error("[review] Failed to persist pending message:", dbErr);
+      }
+      return jsonResponse({
+        message: "Our messaging service is temporarily over capacity. Please try again tomorrow or contact us through other channels.",
+      }, 503);
+    }
+
+    const inboxEmail = process.env.REVIEW_INBOX_EMAIL || process.env.EMAIL_USER;
+
+    const transporter = getTransporter();
+
+    const mailOptions = {
+      from: process.env.EMAIL_USER,
+      replyTo: trimmedEmail,
+      to: inboxEmail,
+      subject: `New Review Submission from ${trimmedName}`,
+      html: `
+        <h2>New Review Received</h2>
+        <p><strong>Name:</strong> ${escapeHtml(trimmedName)}</p>
+        <p><strong>Email:</strong> ${escapeHtml(trimmedEmail)}</p>
+        <p><strong>Rating:</strong> ${"★".repeat(safeRating)}${"☆".repeat(
+          5 - safeRating
+        )}</p>
+        <p><strong>Review:</strong></p>
+        <p>${escapeHtml(trimmedReview).replaceAll("\n", "<br>")}</p>
+      `,
+    };
+
+    try {
+      await transporter.sendMail(mailOptions);
+    } catch (mailErr) {
+      console.error("[review] Email send failed. Persisting message to pending_messages:", mailErr);
+      try {
+        const supabase = getSupabaseAdmin();
+        await supabase.from("pending_messages").insert({
+          type: "review",
+          payload: { name: trimmedName, email: trimmedEmail, review: trimmedReview, rating: safeRating },
+        });
+      } catch (dbErr) {
+        console.error("[review] Failed to persist pending message after email send failure:", dbErr);
+      }
+      return jsonResponse({
+        message: "Our messaging service is temporarily over capacity. Please try again tomorrow or contact us through other channels.",
+      }, 503);
+    }
+
+    return jsonResponse({ message: "Email sent successfully" }, 200, {
+      "X-RateLimit-Limit": "5",
+      "X-RateLimit-Remaining": remaining.toString(),
+    });
+  } catch (error) {
+    console.error("Review API error:", error);
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/api/student-jobs/route.js b/src/app/api/student-jobs/route.js
new file mode 100644
index 000000000..3565e306b
--- /dev/null
+++ b/src/app/api/student-jobs/route.js
@@ -0,0 +1,105 @@
+import { cookies } from "next/headers";
+import { getAuthenticatedUser } from "@/lib/auth";
+import { getSupabaseServerClient, jsonResponse, errorResponse } from "@/lib/serverApi";
+import { checkRateLimit } from "@/lib/rateLimit";
+import { getClientIp } from "@/lib/getClientIp";
+
+const DEFAULT_PAGE = 1;
+const DEFAULT_LIMIT = 20;
+const MAX_LIMIT = 100;
+const SEARCH_SAFE_PATTERN = /^[\w\s.,'&-]+$/;
+
+function parsePagination(searchParams) {
+  const page = Number(searchParams.get("page") ?? DEFAULT_PAGE);
+  const limit = Number(searchParams.get("limit") ?? DEFAULT_LIMIT);
+
+  if (!Number.isInteger(page) || page < 1) {
+    return { error: "page must be a positive integer" };
+  }
+
+  if (!Number.isInteger(limit) || limit < 1 || limit > MAX_LIMIT) {
+    return { error: `limit must be an integer between 1 and ${MAX_LIMIT}` };
+  }
+
+  return {
+    page,
+    limit,
+    skip: (page - 1) * limit,
+  };
+}
+
+function sanitizeSearchTerm(raw) {
+  // Strip anything that isn't a "safe" character for a PostgREST filter value,
+  // and escape commas/parens defensively in case they slip through.
+  const cleaned = raw.replace(/[^\w\s.,'&-]/g, "");
+  return cleaned.replace(/[,()]/g, "");
+}
+
+export async function GET(request) {
+  try {
+    const ip = getClientIp(request.headers);
+
+    const { allowed } = await checkRateLimit(`student-jobs:${ip}`);
+    if (!allowed) {
+      return jsonResponse({ error: "Too many search requests. Please slow down." }, 429);
+    }
+
+    const { searchParams } = new URL(request.url);
+    const pagination = parsePagination(searchParams);
+    const rawSearch = (searchParams.get("search") || "").trim();
+
+    if (pagination.error) {
+      return jsonResponse({
+        error: pagination.error,
+        jobs: [],
+        totalPages: 0,
+        currentPage: DEFAULT_PAGE,
+        totalJobs: 0,
+      }, 400);
+    }
+
+    const { page, limit, skip } = pagination;
+
+    if (rawSearch && rawSearch.length < 2) {
+      return jsonResponse({
+        error: "Search term must be at least 2 characters.",
+        jobs: [], totalPages: 0, currentPage: page, totalJobs: 0,
+      }, 400);
+    }
+
+    const search = sanitizeSearchTerm(rawSearch);
+
+    const cookieStore = await cookies();
+    const supabase = getSupabaseServerClient(cookieStore);
+
+    let query = supabase
+      .from("jobs")
+      .select("*", { count: "exact" })
+      .eq("status", "approved")
+      .order("created_at", { ascending: false })
+      .range(skip, skip + limit - 1);
+
+    if (search) {
+      const term = `${search}%`;
+      query = query.or(
+        `title.ilike.${term},company.ilike.${term},location.ilike.${term}`
+      );
+    }
+
+    const { data: jobs, error, count } = await query;
+
+    if (error) {
+      console.error("[/api/student-jobs GET] Supabase error:", error.message);
+      return jsonResponse({ jobs: [], totalPages: 0, currentPage: page, totalJobs: 0 });
+    }
+
+    return jsonResponse({
+      jobs: jobs || [],
+      totalPages: Math.ceil((count || 0) / limit),
+      currentPage: page,
+      totalJobs: count || 0,
+    });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/src/app/arena/duel/[id]/page.jsx b/src/app/arena/duel/[id]/page.jsx
new file mode 100644
index 000000000..c435dbb8a
--- /dev/null
+++ b/src/app/arena/duel/[id]/page.jsx
@@ -0,0 +1,136 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useUser } from "@/features/user/UserContext";
+import DuelSimulatorModal from "@/app/components/ui/DuelSimulatorModal";
+
+export default function DuelLobbyPage({ params }) {
+  const router = useRouter();
+  const { user, loading } = useUser();
+  
+  const [simulatorOpen, setSimulatorOpen] = useState(false);
+  const [opponent, setOpponent] = useState(null);
+
+  // Mock socket "player joined"
+  useEffect(() => {
+    if (user) {
+      const timer = setTimeout(() => {
+        setOpponent({
+          name: "Friend_123",
+          rating: 1650,
+          level: 16,
+          avatar: "FR"
+        });
+      }, 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [user]);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-neutral-900">
+        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary"></div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-neutral-900">
+        <div className="text-center">
+          <h2 className="text-xl font-bold text-slate-800 dark:text-neutral-200">Access Denied</h2>
+          <p className="text-sm text-slate-500 dark:text-neutral-400">Please sign in to join a duel.</p>
+        </div>
+      </div>
+    );
+  }
+
+  const [copied, setCopied] = useState(false);
+  const lobbyCode = params.id; 
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(window.location.href);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {}
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-50 dark:bg-neutral-900 flex flex-col items-center pt-24 px-4">
+      <div className="w-full max-w-4xl flex flex-col md:flex-row items-center justify-center gap-8 mb-12">
+        {/* Player 1 */}
+        <div className="flex flex-col items-center bg-white dark:bg-neutral-800 p-8 rounded-3xl shadow-xl border border-slate-100 dark:border-neutral-800/80 w-64">
+          <div className="w-24 h-24 bg-primary/10 rounded-full flex items-center justify-center mb-4 ring-4 ring-primary/20">
+            <span className="text-3xl font-black text-primary">{user.user_metadata?.name?.[0] || user.email?.[0]?.toUpperCase()}</span>
+          </div>
+          <h3 className="text-xl font-bold text-slate-800 dark:text-neutral-200 truncate w-full text-center">{user.user_metadata?.name || user.email?.split('@')[0]}</h3>
+          <span className="text-xs font-bold text-slate-500 uppercase tracking-widest mt-1">Host</span>
+        </div>
+
+        {/* VS Badge */}
+        <div className="flex flex-col items-center justify-center">
+          <div className="w-16 h-16 bg-slate-900 dark:bg-white rounded-2xl rotate-12 flex items-center justify-center shadow-2xl">
+            <span className="text-2xl font-black text-white dark:text-slate-900 -rotate-12 italic">VS</span>
+          </div>
+        </div>
+
+        {/* Player 2 */}
+        {/* Player 2 */}
+        {opponent ? (
+          <div className="flex flex-col items-center bg-white dark:bg-neutral-800 p-8 rounded-3xl shadow-xl border border-primary/30 w-64">
+            <div className="w-24 h-24 bg-primary/10 rounded-full flex items-center justify-center mb-4 ring-4 ring-primary/20">
+              <span className="text-3xl font-black text-primary">{opponent.avatar}</span>
+            </div>
+            <h3 className="text-xl font-bold text-slate-800 dark:text-neutral-200 truncate w-full text-center">{opponent.name}</h3>
+            <span className="text-xs font-bold text-emerald-500 uppercase tracking-widest mt-1">Ready</span>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center bg-slate-100 dark:bg-neutral-800/50 p-8 rounded-3xl border-2 border-dashed border-slate-300 dark:border-neutral-700 w-64 relative overflow-hidden">
+            <div className="absolute inset-0 bg-[linear-gradient(45deg,transparent_25%,rgba(0,0,0,0.05)_50%,transparent_75%,transparent_100%)] dark:bg-[linear-gradient(45deg,transparent_25%,rgba(255,255,255,0.02)_50%,transparent_75%,transparent_100%)] bg-[length:20px_20px] animate-[slide_1s_linear_infinite]" />
+            <div className="w-24 h-24 bg-slate-200 dark:bg-neutral-700 rounded-full flex items-center justify-center mb-4 animate-pulse relative z-10">
+              <div className="w-12 h-12 border-4 border-slate-300 dark:border-neutral-600 border-t-slate-500 dark:border-t-neutral-400 rounded-full animate-spin" />
+            </div>
+            <h3 className="text-lg font-bold text-slate-600 dark:text-neutral-400 relative z-10">Waiting for opponent...</h3>
+            <span className="text-xs font-bold text-slate-400 uppercase tracking-widest mt-1 relative z-10">Searching</span>
+          </div>
+        )}
+      </div>
+
+      <div className="bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-6 shadow-sm w-full max-w-md text-center">
+        <h4 className="text-sm font-bold text-slate-800 dark:text-neutral-200 mb-2">Invite your friend</h4>
+        <p className="text-xs text-slate-500 dark:text-neutral-400 mb-4">Share this code or link with your opponent so they can join the lobby.</p>
+        
+        <div className="bg-slate-50 dark:bg-neutral-900 rounded-xl p-4 mb-4">
+          <span className="text-3xl font-mono font-black text-slate-800 dark:text-neutral-200 tracking-[0.2em]">{lobbyCode}</span>
+        </div>
+
+        <button
+          onClick={handleCopy}
+          className="w-full py-3 bg-slate-100 dark:bg-neutral-900 hover:bg-slate-200 dark:hover:bg-neutral-950 text-slate-700 dark:text-neutral-300 rounded-xl text-sm font-bold transition flex items-center justify-center gap-2"
+        >
+          {copied ? "Link Copied!" : "Copy Invite Link"}
+        </button>
+      </div>
+
+      {opponent && (
+        <div className="mt-8">
+          <button
+            onClick={() => setSimulatorOpen(true)}
+            className="px-12 py-4 bg-primary hover:bg-primary-dark text-white rounded-2xl text-lg font-black transition-all shadow-xl shadow-primary/30 hover:-translate-y-1 hover:shadow-2xl hover:shadow-primary/40 animate-bounce"
+          >
+            START MATCH
+          </button>
+        </div>
+      )}
+
+      <DuelSimulatorModal
+        isOpen={simulatorOpen}
+        onClose={() => setSimulatorOpen(false)}
+        opponent={opponent}
+        currentUserStats={{ userId: user?.id, name: user?.user_metadata?.name || user?.email?.split('@')[0] }}
+        problem="Arrays"
+      />
+    </div>
+  );
+}
diff --git a/src/app/arena/page.jsx b/src/app/arena/page.jsx
new file mode 100644
index 000000000..1491a1a8c
--- /dev/null
+++ b/src/app/arena/page.jsx
@@ -0,0 +1,725 @@
+"use client";
+import dynamic from "next/dynamic";
+import { useState, useEffect, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+import { useUser } from "@/features/user/UserContext";
+import { toast } from "react-hot-toast";
+import UpcomingTournament from "@/app/components/ui/UpcomingTournament";
+import TournamentCard from "@/app/components/ui/TournamentCard";
+import ActivityHeatmap from "@/app/components/ui/ActivityHeatmap";
+import Footer from "@/app/components/footer";
+import BadgesTab from "./tabs/BadgesTab";
+import LeaderboardTab from "./tabs/LeaderboardTab";
+import HistoryTab from "./tabs/HistoryTab";
+import TournamentsTab from "./tabs/TournamentsTab";
+import FriendTab from "./tabs/FriendTab";
+import StreakTab from "./tabs/StreakTab";
+import RankedTab from "./tabs/RankedTab";
+import LiveTab from "./tabs/LiveTab";
+import HomeTab from "./tabs/HomeTab";
+
+// Lazy Load Heavy Modals to significantly reduce Initial JS Bundle size
+const MatchmakingModal = dynamic(() => import("@/app/components/ui/MatchmakingModal"), { ssr: false });
+const DuelSimulatorModal = dynamic(() => import("@/app/components/ui/DuelSimulatorModal"), { ssr: false });
+const SpectatorSimulatorModal = dynamic(() => import("@/app/components/ui/SpectatorSimulatorModal"), { ssr: false });
+const CreateDuelModal = dynamic(() => import("@/app/components/ui/CreateDuelModal"), { ssr: false });
+import {
+  Search,
+  Home,
+  Swords,
+  Trophy,
+  Flame,
+  Shield,
+  Activity,
+  Award,
+  History,
+  User,
+  Clock,
+  Zap,
+  Play,
+  ChevronRight,
+  TrendingUp,
+  Target,
+  ChevronLeft,
+  Users,
+  Calendar,
+  Gift,
+  TrendingDown,
+  Minus,
+  Navigation,
+  Share2,
+  Star,
+  Crown,
+  ShieldCheck,
+  ShieldAlert
+} from "lucide-react";
+import { useArenaProfile } from "@/app/hooks/useArenaProfile";
+import { useSheetProgress } from "@/app/hooks/useSheetProgress";
+import { practiceData } from "@/lib/practiceData";
+
+// Mock live battles feed is removed, we use liveMatches
+
+const ACHIEVEMENT_BADGES = [
+  { title: "Module Master", icon: "🏆" },
+  { title: "7-Day Streak", icon: "🔥" },
+  { title: "Community Helper", icon: "🤝" },
+  { title: "Arena Champion", icon: "⚔️" },
+];
+
+function calculateLevelProgress(xp) {
+  if (!xp) return 0;
+  return (xp % 1000) / 10;
+}
+
+function getInitials(name) {
+  if (!name) return "??";
+  const cleanName = name.includes("@") ? name.split("@")[0] : name;
+  const parts = cleanName.trim().split(/\s+/);
+  if (!parts[0]) return "??";
+  if (parts.length >= 2 && parts[parts.length - 1][0]) {
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+  return parts[0].slice(0, 2).toUpperCase();
+}
+
+function getTierBadge(tier) {
+  const colors = {
+    "Grandmaster": "bg-red-500/20 text-red-500 border-red-500/50",
+    "Diamond": "bg-blue-500/20 text-blue-500 border-blue-500/50",
+    "Gold": "bg-amber-500/20 text-amber-500 border-amber-500/50",
+    "Silver": "bg-slate-400/20 text-slate-400 border-slate-400/50",
+    "Bronze": "bg-orange-700/20 text-orange-700 border-orange-700/50"
+  };
+  const colorClass = colors[tier] || colors["Bronze"];
+  return (
+    <span className={`px-2 py-0.5 rounded-md border text-[10px] font-bold uppercase tracking-wider ${colorClass}`}>
+      {tier}
+    </span>
+  );
+}
+
+export default function ArenaPage() {
+  const { user, loading } = useUser();
+  const router = useRouter();
+  const { profile, leaderboard, matchHistory, dailyChallenge, loadingProfile, loadingLeaderboard } = useArenaProfile(user);
+  const { progress, getStatus, streakData } = useSheetProgress();
+
+  const ensureLoggedIn = () => {
+    if (loading) return false; 
+    if (!user) {
+      toast.error("Please login to use this feature!");
+      router.push("/login?next=/arena");
+      return false;
+    }
+    return true;
+  };
+
+  const [activeTab, setActiveTab] = useState("home"); // home, live, ranked, friend, leaderboard, streak, tournaments, badges, history
+  const [leaderboardFilter, setLeaderboardFilter] = useState("Global");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [expandedRow, setExpandedRow] = useState(null);
+
+  // Tournament Timer State
+  const [tournamentTimeLeft, setTournamentTimeLeft] = useState({
+    days: 0, hours: 0, minutes: 0, seconds: 0
+  });
+  const [tournamentFilter, setTournamentFilter] = useState("Upcoming");
+  const [badgeCategory, setBadgeCategory] = useState("All");
+  const [hasFreeze, setHasFreeze] = useState(false);
+
+  const calculateRank = (xp) => {
+    if (xp >= 10000) return { name: "Grandmaster", Icon: Crown, color: "text-purple-500", ringColor: "border-purple-500" };
+    if (xp >= 5000) return { name: "Diamond", Icon: Award, color: "text-indigo-500", ringColor: "border-indigo-500" };
+    if (xp >= 2500) return { name: "Platinum", Icon: Star, color: "text-cyan-500", ringColor: "border-cyan-500" };
+    if (xp >= 1000) return { name: "Gold", Icon: ShieldCheck, color: "text-yellow-500", ringColor: "border-yellow-500" };
+    if (xp >= 500) return { name: "Silver", Icon: ShieldAlert, color: "text-slate-400", ringColor: "border-slate-400" };
+    return { name: "Bronze", Icon: Shield, color: "text-amber-700", ringColor: "border-amber-700" };
+  };
+
+  const rankedMatches = matchHistory?.filter(m => m.mode === 'ranked' || m.isRanked) || [];
+  const currentRank = rankedMatches.length >= 5 ? calculateRank(profile?.xp || 0) : { name: "Unranked", Icon: Trophy, color: "text-slate-400", ringColor: "border-primary" };
+  const RankIcon = currentRank.Icon;
+
+  const handleTabChange = (tabId) => {
+    if (["ranked", "friend", "streak", "badges", "history"].includes(tabId)) {
+      if (!ensureLoggedIn()) return;
+    }
+    if (typeof window !== "undefined") {
+      router.push(tabId === "home" ? "/arena" : `/arena#${tabId}`);
+      setActiveTab(tabId);
+    }
+  };
+
+  const rankProgress = Math.min(((profile?.xp || 0) % 1000) / 1000 * 100, 100);
+  const ringRadius = 62;
+  const ringCircumference = 2 * Math.PI * ringRadius;
+  const ringDashoffset = ringCircumference - (rankProgress / 100) * ringCircumference;
+
+  // Tournament Timer Effect
+  useEffect(() => {
+    const getNextTargetDate = () => {
+      const now = new Date();
+      const target = new Date();
+      target.setUTCDate(now.getUTCDate() + ((7 - now.getUTCDay()) % 7)); // Next Sunday
+      target.setUTCHours(18, 0, 0, 0); // 6:00 PM UTC
+      if (target.getTime() <= now.getTime()) {
+        target.setUTCDate(target.getUTCDate() + 7);
+      }
+      return target;
+    };
+
+    const targetDate = getNextTargetDate();
+
+    const updateTimer = () => {
+      const difference = targetDate.getTime() - new Date().getTime();
+      if (difference <= 0) {
+        setTournamentTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+        return;
+      }
+      setTournamentTimeLeft({
+        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+        minutes: Math.floor((difference / 1000 / 60) % 60),
+        seconds: Math.floor((difference / 1000) % 60)
+      });
+    };
+
+    updateTimer();
+    const interval = setInterval(updateTimer, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.replace("#", "");
+      const validTabs = ["home", "live", "ranked", "friend", "leaderboard", "streak", "tournaments", "badges", "history"];
+      const protectedTabs = ["ranked", "friend", "streak", "badges", "history"];
+      
+      if (validTabs.includes(hash)) {
+        // Don't redirect while auth session is still resolving — user may be logged in
+        if (protectedTabs.includes(hash) && !loading && !user) {
+          router.push("/arena");
+          setActiveTab("home");
+          return;
+        }
+        setActiveTab(hash);
+      } else {
+        setActiveTab("home");
+      }
+    };
+
+    handleHashChange();
+
+    window.addEventListener("hashchange", handleHashChange);
+    return () => {
+      window.removeEventListener("hashchange", handleHashChange);
+    };
+  }, [user, loading, router]);
+
+  // Live Matches polling
+  const [liveMatches, setLiveMatches] = useState([]);
+
+  useEffect(() => {
+    let timeoutId;
+    let isOffline = false;
+
+    const fetchLiveMatches = async () => {
+      try {
+        const socketUrl = process.env.NEXT_PUBLIC_SOCKET_SERVER_URL || 
+          (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.startsWith("192.168.")
+            ? `http://${window.location.hostname}:4000`
+            : "https://algobuddy-socket-server.onrender.com");
+          
+        const res = await fetch(`${socketUrl}/api/matches/active`);
+        if (res.ok) {
+          const data = await res.json();
+          setLiveMatches(data.matches || []);
+          if (isOffline) {
+            isOffline = false;
+            console.log("Live matches server is back online.");
+          }
+        } else {
+          throw new Error(`Server returned status: ${res.status}`);
+        }
+      } catch (err) {
+        if (!isOffline) {
+          isOffline = true;
+          console.warn("Live matches server is offline. Real-time updates disabled. Retrying less frequently.");
+        }
+      } finally {
+        // Schedule next poll: 5 seconds if online, 60 seconds if offline
+        const delay = isOffline ? 60000 : 5000;
+        timeoutId = setTimeout(fetchLiveMatches, delay);
+      }
+    };
+
+    fetchLiveMatches();
+    return () => clearTimeout(timeoutId);
+  }, []);
+
+  // Modals state
+  const [matchmakingOpen, setMatchmakingOpen] = useState(false);
+  const [matchmakingOptions, setMatchmakingOptions] = useState({});
+  const [createDuelOpen, setCreateDuelOpen] = useState(false);
+  const [duelDifficulty, setDuelDifficulty] = useState("Medium");
+  const [duelTime, setDuelTime] = useState("30m");
+  const [duelTopic, setDuelTopic] = useState("Random");
+  const [joinCode, setJoinCode] = useState("");
+  const [duelWager, setDuelWager] = useState(50);
+  const [duelMode, setDuelMode] = useState("Standard");
+  const [duelPublic, setDuelPublic] = useState(false);
+
+  const handleJoinLobby = () => {
+    if (joinCode.length !== 6) {
+      toast.error("Please enter a valid 6-digit invite code.");
+      return;
+    }
+    window.location.href = `/arena/duel/${joinCode}`;
+  };
+
+  // Fix for browser back button from Matchmaking modal (Issue #1333)
+  // Fix for browser back button from Create Duel modal (Issue #1336)
+  useEffect(() => {
+    const handlePopState = (e) => {
+      if (matchmakingOpen) {
+        setMatchmakingOpen(false);
+      } else if (createDuelOpen) {
+        setCreateDuelOpen(false);
+      }
+    };
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, [matchmakingOpen, createDuelOpen]);
+
+  const openMatchmakingModal = (options = {}) => {
+    if (!ensureLoggedIn()) return;
+    window.history.pushState({ modal: "matchmaking" }, "", window.location.href);
+    setMatchmakingOptions(options);
+    setMatchmakingOpen(true);
+  };
+
+  const closeMatchmakingModal = () => {
+    setMatchmakingOpen(false);
+    if (window.history.state?.modal === "matchmaking") {
+      window.history.back();
+    }
+  };
+
+  const openCreateDuelModal = () => {
+    if (!ensureLoggedIn()) return;
+    window.history.pushState({ modal: "createDuel" }, "", window.location.href);
+    setCreateDuelOpen(true);
+  };
+
+  const closeCreateDuelModal = () => {
+    setCreateDuelOpen(false);
+    if (window.history.state?.modal === "createDuel") {
+      window.history.back();
+    }
+  };
+  const [duelSimulatorOpen, setDuelSimulatorOpen] = useState(false);
+  const [selectedOpponent, setSelectedOpponent] = useState(null);
+  const [activeDuelProblem, setActiveDuelProblem] = useState("Reverse Linked List");
+
+
+  const [currentUserStats, setCurrentUserStats] = useState({
+    name: "",
+    level: 1,
+    rating: 1200,
+    xp: 0,
+    rank: 1,
+  });
+
+  useEffect(() => {
+    if (!loading && user) {
+      setCurrentUserStats({
+        userId: user.id,
+        name: user.user_metadata?.name || user.email.split("@")[0],
+        level: profile?.level || 1,
+        rating: profile?.rating || 1200,
+        xp: profile?.xp || 0,
+        rank: profile?.rank || 1,
+      });
+    }
+  }, [user, loading, profile]);
+
+  const handleMatchFound = (opponent) => {
+    setSelectedOpponent(opponent);
+    closeMatchmakingModal();
+    setActiveDuelProblem("Two Sum");
+    setDuelSimulatorOpen(true);
+  };
+
+  const handleWatchLive = (matchData) => {
+    // Let's store it in state so we can pass it to the SpectatorModal
+    setSpectatingMatch(matchData);
+    setSpectatorModalOpen(true);
+  };
+
+  const [spectatorModalOpen, setSpectatorModalOpen] = useState(false);
+  const [spectatingMatch, setSpectatingMatch] = useState(null);
+  const [isLoadingTournaments, setIsLoadingTournaments] = useState(true);
+
+  useEffect(() => {
+    if (activeTab === "tournaments" && isLoadingTournaments) {
+      const timer = setTimeout(() => {
+        setIsLoadingTournaments(false);
+      }, 1500);
+      return () => clearTimeout(timer);
+    }
+  }, [activeTab, isLoadingTournaments]);
+
+  const handleCreateMatchLaunch = (matchConfig) => {
+    setCreateDuelOpen(false);
+    if (matchConfig?.lobbyCode) {
+      router.push(`/arena/duel/${matchConfig.lobbyCode}`);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-neutral-900">
+        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary"></div>
+      </div>
+    );
+  }
+
+  return (
+    <section className="bg-slate-50/50 dark:bg-neutral-900 min-h-screen text-slate-800 dark:text-neutral-200">
+      <div className="max-w-[1400px] mx-auto px-4 pt-8 pb-16">
+        {/* Main Grid Layout */}
+        <div className="grid grid-cols-1 lg:grid-cols-[240px_1fr_300px] gap-6">
+
+          {/* ─── Column 1: Left Sidebar ────────────────────────────────────────── */}
+          <aside className="space-y-6 lg:sticky lg:top-24 h-max">
+            {/* Navigation Menu */}
+            <div className="bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-3 shadow-sm">
+              <nav className="space-y-0.5">
+                {[
+                  { id: "home", label: "Arena Home", icon: Home },
+                  { id: "live", label: "Live Battles", icon: Swords },
+                  { id: "ranked", label: "Ranked Match", icon: Trophy },
+                  { id: "friend", label: "Friend Challenge", icon: User },
+                  { id: "leaderboard", label: "Leaderboard", icon: Activity },
+                  { id: "streak", label: "Daily Streak", icon: Flame },
+                  { id: "tournaments", label: "Tournaments", icon: Trophy },
+                  { id: "badges", label: "Badges", icon: Award },
+                  { id: "history", label: "Match History", icon: History }
+                ].map((item) => {
+                  const Icon = item.icon;
+                  const isActive = activeTab === item.id;
+                  return (
+                    <button
+                      key={item.id}
+                      onClick={() => handleTabChange(item.id)}
+                      className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200 ${isActive
+                          ? "bg-gradient-to-r from-primary/10 to-transparent border border-primary/20 text-primary dark:from-primary/20 dark:border-primary/30 dark:text-primary-light shadow-sm"
+                          : "text-slate-500 hover:text-slate-800 hover:bg-slate-50 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-900/40 border border-transparent"
+                        }`}
+                    >
+                      <Icon size={isActive ? 20 : 18} className={isActive ? "text-primary dark:text-primary-light" : ""} />
+                      <span>{item.label}</span>
+                    </button>
+                  );
+                })}
+              </nav>
+            </div>
+
+            {/* XP Progress */}
+            <div className="bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-5 shadow-sm relative overflow-hidden group">
+              <div className="absolute top-0 right-0 w-24 h-24 bg-primary/5 rounded-full blur-2xl -mr-8 -mt-8 pointer-events-none group-hover:bg-primary/10 transition-colors duration-500"></div>
+              
+              <div className="flex justify-between items-center mb-4 relative z-10">
+                <h3 className="text-sm font-bold text-slate-800 dark:text-neutral-200 flex items-center gap-2">
+                  <Star size={16} className="text-amber-500" />
+                  XP Progress
+                </h3>
+                <span className="text-[10px] bg-primary/10 text-primary dark:text-primary-light font-black uppercase tracking-widest px-2 py-0.5 rounded-md border border-primary/20">
+                  Lvl {currentUserStats.level}
+                </span>
+              </div>
+
+              <div className="relative z-10">
+                <div className="flex justify-between text-xs font-bold mb-2">
+                  <span className="text-slate-700 dark:text-neutral-300">{calculateLevelProgress(currentUserStats.xp).toFixed(0)}%</span>
+                  <span className="text-slate-500 dark:text-neutral-500">{1000 - (currentUserStats.xp % 1000)} XP to Next</span>
+                </div>
+                
+                <div className="w-full bg-slate-100 dark:bg-neutral-900 h-2.5 rounded-full overflow-hidden mb-3 border border-slate-200 dark:border-neutral-800">
+                  <div
+                    className="bg-gradient-to-r from-primary to-purple-400 h-full rounded-full transition-all duration-1000 ease-out shadow-[0_0_10px_rgba(168,85,247,0.4)]"
+                    style={{ width: `${calculateLevelProgress(currentUserStats.xp)}%` }}
+                  />
+                </div>
+
+                <div className="flex items-center gap-2 text-[10px] text-slate-500 dark:text-neutral-400 bg-slate-50 dark:bg-neutral-900/50 p-2 rounded-lg border border-slate-100 dark:border-neutral-800 mt-4">
+                  <Gift size={12} className="text-purple-500 shrink-0" />
+                  <span>Next: <strong className="text-slate-700 dark:text-neutral-300">Level {currentUserStats.level + 1} Badge</strong></span>
+                </div>
+              </div>
+            </div>
+
+          </aside>
+
+          {/* ─── Column 2: Main Panel ───────────────────────────────────────────── */}
+          <main className="space-y-6 overflow-hidden">
+            {activeTab === "home" && (
+                  <HomeTab 
+                    profile={profile}
+                    currentUserStats={currentUserStats}
+                    leaderboard={leaderboard}
+                    openMatchmakingModal={openMatchmakingModal}
+                    openCreateDuelModal={openCreateDuelModal}
+                    matchHistory={matchHistory}
+                    handleTabChange={handleTabChange}
+                    handleWatchLive={handleWatchLive}
+                    ensureLoggedIn={ensureLoggedIn}
+                  />
+                )}
+
+            {activeTab !== "home" && (
+              <div className="bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-6 shadow-sm">
+
+
+                {activeTab === "live" && (
+                  <LiveTab 
+                    liveMatches={liveMatches}
+                    handleWatchLive={handleWatchLive}
+                  />
+                )}
+
+                {activeTab === "ranked" && (
+                  <RankedTab 
+                    profile={profile}
+                    rankProgress={rankProgress}
+                    ringDashoffset={ringDashoffset}
+                    ringCircumference={ringCircumference}
+                    openMatchmakingModal={openMatchmakingModal}
+                    currentRank={currentRank}
+                    rankedMatches={rankedMatches}
+                  />
+                )}
+
+                {activeTab === "friend" && (
+                  <FriendTab 
+                    joinCode={joinCode}
+                    setJoinCode={setJoinCode}
+                    openCreateDuelModal={openCreateDuelModal}
+                  />
+                )}
+
+                {activeTab === "leaderboard" && (
+                  <LeaderboardTab leaderboard={leaderboard} leaderboardFilter={leaderboardFilter} setLeaderboardFilter={setLeaderboardFilter} searchQuery={searchQuery} setSearchQuery={setSearchQuery} expandedRow={expandedRow} setExpandedRow={setExpandedRow} profile={profile} />
+                )}
+                {activeTab === "history" && (
+                  <HistoryTab matchHistory={matchHistory} ensureLoggedIn={ensureLoggedIn} handleWatchLive={handleWatchLive} />
+                )}
+                {activeTab === "streak" && (
+                  <StreakTab profile={profile} streakData={streakData} />
+                )}
+                {activeTab === "tournaments" && (
+                  <TournamentsTab 
+                    tournamentFilter={tournamentFilter}
+                    setTournamentFilter={setTournamentFilter}
+                    tournamentTimeLeft={tournamentTimeLeft}
+                    isLoadingTournaments={isLoadingTournaments}
+                  />
+                )}
+                
+                {activeTab === "badges" && (
+                  <BadgesTab badgeCategory={badgeCategory} setBadgeCategory={setBadgeCategory} />
+                )}
+              </div>
+            )}
+          </main>
+
+          {/* ─── Column 3: Right Sidebar ───────────────────────────────────────── */}
+          <aside className="space-y-6 lg:sticky lg:top-24 h-max">
+            {/* Daily Streak Card */}
+            <div className="bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-5 shadow-sm relative overflow-hidden group">
+              <div className="absolute top-0 right-0 w-24 h-24 bg-amber-500/5 rounded-full blur-2xl -mr-8 -mt-8 pointer-events-none group-hover:bg-amber-500/10 transition-colors duration-500"></div>
+
+              <div className="flex items-center justify-between mb-4 relative z-10">
+                <h3 className="text-sm font-bold text-slate-800 dark:text-neutral-200 flex items-center gap-2">
+                  <Flame size={16} className="text-amber-500" />
+                  Daily Streak
+                </h3>
+                <span className="text-[10px] bg-amber-500/10 text-amber-600 dark:text-amber-400 font-black uppercase tracking-widest px-2 py-0.5 rounded-md border border-amber-500/20">
+                  Goal: {Math.max(10, Math.ceil(((streakData?.current || 0) + 1) / 10) * 10)}d
+                </span>
+              </div>
+
+              <div className="flex items-center gap-3 bg-gradient-to-r from-amber-500/10 to-transparent p-4 border border-amber-500/20 rounded-xl mb-4 text-amber-500 relative z-10">
+                <div className="w-12 h-12 bg-amber-500/20 rounded-full flex items-center justify-center shrink-0">
+                  <Flame size={24} className={(streakData?.current || 0) > 0 ? "animate-pulse drop-shadow-md" : "opacity-50"} />
+                </div>
+                <div>
+                  <div className="text-2xl font-black leading-none drop-shadow-sm">{streakData?.current || 0} Days</div>
+                  <span className="text-[10px] text-slate-500 dark:text-neutral-400 block mt-1 font-semibold">
+                    Keep it up! Next milestone: {Math.max(10, Math.ceil(((streakData?.current || 0) + 1) / 10) * 10)} days
+                  </span>
+                </div>
+              </div>
+
+              <div className="flex justify-between items-center text-center gap-1 mt-2 relative z-10">
+                {["S", "M", "T", "W", "T", "F", "S"].map((day, idx) => {
+                  const today = new Date();
+                  const currentDay = today.getDay();
+                  const diff = idx - currentDay;
+                  const dateToCheck = new Date();
+                  dateToCheck.setDate(today.getDate() + diff);
+                  
+                  const isFuture = diff > 0;
+                  const isActive = !isFuture && -diff < (streakData?.current || 0);
+                  
+                  return (
+                    <div key={idx} className="flex flex-col items-center group/day">
+                      <span className={`text-[10px] block mb-1.5 font-bold uppercase ${diff === 0 ? "text-amber-500 dark:text-amber-400" : "text-slate-400 dark:text-neutral-500 group-hover/day:text-slate-600 dark:group-hover/day:text-neutral-300 transition-colors"}`}>{day}</span>
+                      <div className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold transition-all duration-300 ${isActive
+                          ? "bg-amber-500 text-white shadow-md shadow-amber-500/30 scale-110"
+                          : isFuture ? "bg-slate-50 dark:bg-neutral-900/50 text-slate-300 dark:text-neutral-700" : "bg-slate-100 dark:bg-neutral-900 text-slate-400 dark:text-neutral-600 hover:bg-slate-200 dark:hover:bg-neutral-800"
+                        }`}>
+                        {isActive ? "🔥" : "•"}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            
+            {/* Leaderboard Table */}
+            <div className="bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-5 shadow-sm flex flex-col">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-sm font-bold text-slate-800 dark:text-neutral-200 flex items-center gap-2">
+                  <Trophy size={16} className="text-primary" />
+                  Global Leaderboard
+                </h3>
+                <button
+                  onClick={() => handleTabChange("leaderboard")}
+                  className="text-[10px] text-primary dark:text-primary-light font-bold uppercase tracking-widest hover:bg-primary/10 px-2 py-1 rounded transition-colors"
+                >
+                  View All
+                </button>
+              </div>
+
+              <div className="space-y-1">
+                {leaderboard && leaderboard.length > 0 ? (
+                  leaderboard.slice(0, 10).map((row, idx) => {
+                    const rank = row.rank || idx + 1;
+                    const name = row.name || (row.userId ? `User ${row.userId.substring(0, 4)}` : "Unknown");
+                    const isCurrentUser = name === currentUserStats.name;
+                    return (
+                      <div
+                        key={rank}
+                        className={`flex items-center justify-between text-xs px-2.5 py-2 rounded-lg transition-all
+                        ${isCurrentUser
+                            ? "bg-primary/10 border border-primary/20 shadow-sm"
+                            : "hover:bg-slate-50 dark:hover:bg-neutral-700/50 border border-transparent"
+                          }
+                        `}
+                      >
+                        <div className="flex items-center gap-3">
+                          <span className={`w-4 text-center font-black ${rank === 1 ? "text-amber-500" : rank === 2 ? "text-slate-400" : rank === 3 ? "text-orange-700" : "text-slate-400 dark:text-neutral-500"
+                            }`}>
+                            {rank}
+                          </span>
+                          <div className={`w-7 h-7 rounded-full bg-slate-200 dark:bg-neutral-700 flex items-center justify-center font-bold text-[9px] text-slate-600 dark:text-neutral-300 overflow-hidden shrink-0 ${rank === 1 ? "ring-2 ring-amber-400/50" : ""}`}>
+                            {row.avatarUrl ? (
+                              <img src={row.avatarUrl} alt={name} referrerPolicy="no-referrer" className="w-full h-full object-cover" />
+                            ) : (
+                              getInitials(name)
+                            )}
+                          </div>
+                          <span className={`font-bold truncate max-w-[120px] ${isCurrentUser ? "text-primary dark:text-primary-light" : "text-slate-700 dark:text-neutral-300"}`}>{name}</span>
+                        </div>
+                        <span className={`font-black ${isCurrentUser ? "text-primary" : "text-slate-800 dark:text-neutral-200"}`}>{row.rating}</span>
+                      </div>
+                    );
+                  })
+                ) : (
+                  <div className="p-4 text-center text-xs font-semibold text-slate-500 dark:text-neutral-400 bg-slate-50 dark:bg-neutral-900/50 rounded-xl border border-dashed border-slate-200 dark:border-neutral-700">
+                    Leaderboard is currently empty.
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Rules & Scoring Accordion */}
+            <div className="bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-5 shadow-sm">
+              <h3 className="text-sm font-bold text-slate-800 dark:text-neutral-200 flex items-center gap-2 mb-4">
+                <ShieldCheck size={16} className="text-emerald-500" />
+                Rules & Scoring
+              </h3>
+              
+              <div className="space-y-2">
+                {[
+                  { q: "How is XP calculated?", a: "XP is based on problem difficulty, execution speed, and optimal memory usage. First solver bonus applies." },
+                  { q: "Penalty for wrong submissions?", a: "Each incorrect submission adds a 5-minute time penalty to your total duration." },
+                  { q: "Can I use external libraries?", a: "Only standard language libraries are allowed. External dependencies will cause compilation errors." },
+                  { q: "How does matchmaking work?", a: "You are matched with opponents within ±100 rating points to ensure fair competition." }
+                ].map((rule, idx) => (
+                  <details key={idx} className="group border border-slate-200 dark:border-neutral-700 rounded-lg bg-slate-50 dark:bg-neutral-900/50 open:bg-white dark:open:bg-neutral-800 transition-colors">
+                    <summary className="flex items-center justify-between p-3 cursor-pointer list-none font-bold text-xs text-slate-700 dark:text-neutral-300 group-open:text-primary dark:group-open:text-primary-light select-none">
+                      {rule.q}
+                      <span className="transition-transform duration-200 group-open:rotate-90">
+                        <ChevronRight size={14} className="text-slate-400 group-open:text-primary" />
+                      </span>
+                    </summary>
+                    <div className="px-3 pb-3 pt-1 text-[11px] text-slate-500 dark:text-neutral-400 leading-relaxed">
+                      {rule.a}
+                    </div>
+                  </details>
+                ))}
+              </div>
+            </div>
+
+          </aside>
+
+        </div>
+      </div>
+
+      <Footer />
+
+      {/* ─── Interactive Modals ────────────────────────────────────────────── */}
+      <MatchmakingModal
+        isOpen={matchmakingOpen}
+        onClose={() => closeMatchmakingModal()}
+        isRanked={matchmakingOptions.isRanked || false}
+        onMatchFound={handleMatchFound}
+        currentUserStats={currentUserStats}
+      />
+
+      <DuelSimulatorModal
+        isOpen={duelSimulatorOpen}
+        onClose={() => setDuelSimulatorOpen(false)}
+        opponent={selectedOpponent}
+        currentUserStats={currentUserStats}
+        problemName={activeDuelProblem}
+      />
+
+      <CreateDuelModal
+        isOpen={createDuelOpen}
+        onClose={closeCreateDuelModal}
+        onCreateMatch={handleCreateMatchLaunch}
+        currentUserStats={currentUserStats}
+        initialTopic={duelTopic}
+        initialDifficulty={duelDifficulty}
+        initialTimeLimit={duelTime}
+        initialWager={duelWager}
+        initialMode={duelMode}
+        initialPublic={duelPublic}
+      />
+
+      <SpectatorSimulatorModal
+        isOpen={spectatorModalOpen}
+        onClose={() => {
+          setSpectatorModalOpen(false);
+          setSpectatingMatch(null);
+        }}
+        matchData={spectatingMatch}
+      />
+    </section>
+  );
+}
diff --git a/src/app/arena/tabs/BadgesTab.jsx b/src/app/arena/tabs/BadgesTab.jsx
new file mode 100644
index 000000000..24efa787e
--- /dev/null
+++ b/src/app/arena/tabs/BadgesTab.jsx
@@ -0,0 +1,53 @@
+import { Crown, Award, Flame, Zap, Trophy, Star, ShieldCheck, Users } from "lucide-react";
+
+export default function BadgesTab({ badgeCategory, setBadgeCategory }) {
+  return (
+                  <div className="w-full text-left space-y-6">
+                    <div>
+                      <h4 className="text-xl font-extrabold text-slate-800 dark:text-neutral-200 mb-1">Badges & Achievements</h4>
+                      <p className="text-xs text-slate-500 dark:text-neutral-400">Complete challenges and win battles to unlock exclusive badges.</p>
+                    </div>
+                    
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                      {[
+                        { title: "First Blood", desc: "Win your first Arena match", icon: "🩸", unlocked: true, progress: 1, max: 1 },
+                        { title: "Module Master", desc: "Complete all basic algorithms", icon: "🏆", unlocked: true, progress: 10, max: 10 },
+                        { title: "7-Day Streak", desc: "Maintain a 7-day learning streak", icon: "🔥", unlocked: true, progress: 7, max: 7 },
+                        { title: "Arena Champion", desc: "Reach the top 10 on the leaderboard", icon: "⚔️", unlocked: false, progress: 42, max: 100 },
+                        { title: "Speed Demon", desc: "Solve a problem in under 2 minutes", icon: "⚡", unlocked: false, progress: 0, max: 1 },
+                        { title: "Bug Squasher", desc: "Win 10 matches with 0 syntax errors", icon: "🐛", unlocked: false, progress: 3, max: 10 },
+                        { title: "Night Owl", desc: "Win a match between 2AM and 4AM", icon: "🦉", unlocked: false, progress: 0, max: 1 },
+                        { title: "Unstoppable", desc: "Win 5 matches in a row", icon: "🛑", unlocked: false, progress: 2, max: 5 },
+                      ].map((badge, idx) => (
+                        <div 
+                          key={idx} 
+                          className={`flex flex-col items-center p-5 rounded-2xl border text-center transition ${badge.unlocked ? "bg-gradient-to-b from-white to-slate-50 dark:from-neutral-800 dark:to-neutral-900 border-amber-200 dark:border-amber-500/30 shadow-sm shadow-amber-500/10" : "bg-slate-50 dark:bg-neutral-900 border-slate-200 dark:border-neutral-800 opacity-70 grayscale"}`}
+                        >
+                          <div className={`text-4xl mb-3 ${badge.unlocked ? "drop-shadow-md" : "opacity-50"}`}>
+                            {badge.icon}
+                          </div>
+                          <h5 className={`text-xs font-bold mb-1 ${badge.unlocked ? "text-slate-800 dark:text-neutral-200" : "text-slate-500 dark:text-neutral-500"}`}>
+                            {badge.title}
+                          </h5>
+                          <p className="text-[9px] text-slate-500 dark:text-neutral-400 mb-3 leading-tight h-6">
+                            {badge.desc}
+                          </p>
+                          
+                          <div className="w-full mt-auto">
+                            <div className="flex justify-between text-[8px] font-bold mb-1 uppercase tracking-wider text-slate-400">
+                              <span>Progress</span>
+                              <span>{badge.progress} / {badge.max}</span>
+                            </div>
+                            <div className="w-full h-1.5 bg-slate-200 dark:bg-neutral-800 rounded-full overflow-hidden">
+                              <div 
+                                className={`h-full rounded-full ${badge.unlocked ? "bg-amber-500" : "bg-slate-400 dark:bg-neutral-600"}`} 
+                                style={{ width: `${(badge.progress / badge.max) * 100}%` }}
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+  );
+}
diff --git a/src/app/arena/tabs/FriendTab.jsx b/src/app/arena/tabs/FriendTab.jsx
new file mode 100644
index 000000000..808884b6b
--- /dev/null
+++ b/src/app/arena/tabs/FriendTab.jsx
@@ -0,0 +1,178 @@
+import React, { useState } from "react";
+import { Users, Swords } from "lucide-react";
+import { toast } from "react-hot-toast";
+
+export default function FriendTab({ joinCode, setJoinCode, handleJoinDuel, openCreateDuelModal }) {
+  const [duelMode, setDuelMode] = useState("Standard");
+  const [duelTopic, setDuelTopic] = useState("Random");
+  const [duelDifficulty, setDuelDifficulty] = useState("Medium");
+  const [duelTime, setDuelTime] = useState("30m");
+  const [duelWager, setDuelWager] = useState(0);
+  const [duelPublic, setDuelPublic] = useState(false);
+
+  const handleJoinLobby = () => {
+    if (!/^[A-Z0-9]{6}$/i.test(joinCode)) {
+      toast.error("Please enter a valid 6-character alphanumeric code.");
+      return;
+    }
+    if (handleJoinDuel) {
+      handleJoinDuel(joinCode);
+    } else {
+      toast.success(`Joining lobby ${joinCode}...`);
+    }
+  };
+
+  return (
+    <div className="w-full text-left space-y-6">
+                    <div>
+                      <h4 className="text-xl font-extrabold text-slate-800 dark:text-neutral-200 mb-1">Play with Friends</h4>
+                      <p className="text-xs text-slate-500 dark:text-neutral-400">Create a private lobby and invite your friends to a custom code duel.</p>
+                    </div>
+
+                    <div className="bg-slate-50 dark:bg-neutral-900 border border-slate-200 dark:border-neutral-800 rounded-2xl p-6">
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div className="space-y-4">
+                          <h5 className="text-sm font-bold text-slate-800 dark:text-neutral-200">Lobby Settings</h5>
+                          
+                          <div className="space-y-2">
+                            <label className="text-[10px] font-bold text-slate-500 uppercase tracking-wide">Mode</label>
+                            <div className="flex gap-2">
+                              {["Standard", "Optimization"].map(mode => (
+                                <button 
+                                  key={mode} 
+                                  onClick={() => setDuelMode(mode)}
+                                  className={`flex-1 py-1.5 text-xs font-bold rounded-lg border ${duelMode === mode ? "bg-primary/10 border-primary/30 text-primary" : "bg-white dark:bg-neutral-800 border-slate-200 dark:border-neutral-700 text-slate-600 dark:text-neutral-400 hover:border-slate-300"}`}
+                                >
+                                  {mode}
+                                </button>
+                              ))}
+                            </div>
+                          </div>
+
+                          <div className="space-y-2">
+                            <label className="text-[10px] font-bold text-slate-500 uppercase tracking-wide">Topic</label>
+                            <select
+                              value={duelTopic}
+                              onChange={(e) => setDuelTopic(e.target.value)}
+                              className="w-full py-2 px-3 text-xs font-bold rounded-lg border bg-white dark:bg-neutral-800 border-slate-200 dark:border-neutral-700 text-slate-600 dark:text-neutral-300 focus:outline-none focus:border-primary/50 transition"
+                            >
+                              <option value="Random">Random</option>
+                              <option value="Arrays">Arrays</option>
+                              <option value="Strings">Strings</option>
+                              <option value="Hash Tables">Hash Tables</option>
+                              <option value="Two Pointers">Two Pointers</option>
+                              <option value="Dynamic Programming">Dynamic Programming</option>
+                              <option value="Graphs">Graphs</option>
+                            </select>
+                          </div>
+
+                          <div className="space-y-2">
+                            <label className="text-[10px] font-bold text-slate-500 uppercase tracking-wide">Difficulty</label>
+                            <div className="flex gap-2">
+                              {["Easy", "Medium", "Hard"].map(diff => (
+                                <button 
+                                  key={diff} 
+                                  onClick={() => setDuelDifficulty(diff)}
+                                  className={`flex-1 py-1.5 text-xs font-bold rounded-lg border ${duelDifficulty === diff ? "bg-primary/10 border-primary/30 text-primary" : "bg-white dark:bg-neutral-800 border-slate-200 dark:border-neutral-700 text-slate-600 dark:text-neutral-400 hover:border-slate-300"}`}
+                                >
+                                  {diff}
+                                </button>
+                              ))}
+                            </div>
+                          </div>
+
+                          <div className="space-y-2">
+                            <label className="text-[10px] font-bold text-slate-500 uppercase tracking-wide">Time Limit</label>
+                            <div className="flex gap-2">
+                              {["15m", "30m", "60m"].map(time => (
+                                <button 
+                                  key={time} 
+                                  onClick={() => setDuelTime(time)}
+                                  className={`flex-1 py-1.5 text-xs font-bold rounded-lg border ${duelTime === time ? "bg-primary/10 border-primary/30 text-primary" : "bg-white dark:bg-neutral-800 border-slate-200 dark:border-neutral-700 text-slate-600 dark:text-neutral-400 hover:border-slate-300"}`}
+                                >
+                                  {time}
+                                </button>
+                              ))}
+                            </div>
+                          </div>
+
+                          <div className="space-y-2">
+                            <div className="flex justify-between items-center">
+                              <label className="text-[10px] font-bold text-slate-500 uppercase tracking-wide">XP Wager</label>
+                              <span className="text-xs font-bold text-primary">{duelWager} XP</span>
+                            </div>
+                            <input 
+                              type="range" 
+                              min="0" 
+                              max="500" 
+                              step="10" 
+                              value={duelWager}
+                              onChange={(e) => setDuelWager(Number(e.target.value))}
+                              className="w-full accent-primary h-1.5 bg-slate-200 dark:bg-neutral-700 rounded-lg appearance-none cursor-pointer"
+                            />
+                            <div className="flex justify-between text-[9px] text-slate-400 font-bold px-1">
+                              <span>0</span>
+                              <span>250</span>
+                              <span>500</span>
+                            </div>
+                          </div>
+
+                          <div className="flex items-center justify-between p-3 bg-white dark:bg-neutral-800 border border-slate-200 dark:border-neutral-700 rounded-xl">
+                            <div className="flex flex-col">
+                              <span className="text-xs font-bold text-slate-800 dark:text-neutral-200">Public Lobby</span>
+                              <span className="text-[10px] text-slate-500">Allow anyone to join your duel</span>
+                            </div>
+                            <button
+                              onClick={() => setDuelPublic(!duelPublic)}
+                              className={`w-10 h-5 rounded-full relative transition-colors duration-200 focus:outline-none ${duelPublic ? "bg-primary" : "bg-slate-300 dark:bg-neutral-600"}`}
+                            >
+                              <span className={`absolute top-0.5 left-0.5 bg-white w-4 h-4 rounded-full transition-transform duration-200 shadow-sm ${duelPublic ? "translate-x-5" : "translate-x-0"}`} />
+                            </button>
+                          </div>
+                        </div>
+
+                        <div className="space-y-4 flex flex-col">
+                          <h5 className="text-sm font-bold text-slate-800 dark:text-neutral-200">Invite Players</h5>
+                          
+                          <div className="flex-1 bg-white dark:bg-neutral-800 border border-slate-200 dark:border-neutral-700 rounded-xl p-4 flex flex-col items-center justify-center text-center space-y-3">
+                            <Users size={32} className="text-slate-300 dark:text-neutral-600" />
+                            <p className="text-[10px] text-slate-500 max-w-[150px]">Create the lobby to generate an invite code.</p>
+                            <button
+                              onClick={openCreateDuelModal}
+                              className="w-full py-2.5 bg-primary hover:bg-primary/90 text-white rounded-xl text-xs font-bold shadow-md shadow-primary/20 transition"
+                            >
+                              Generate Invite Link
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="bg-slate-50 dark:bg-neutral-900 border border-slate-200 dark:border-neutral-800 rounded-2xl p-6 mt-4">
+                      <div className="flex flex-col md:flex-row gap-6 items-center">
+                        <div className="flex-1 space-y-2">
+                          <h5 className="text-sm font-bold text-slate-800 dark:text-neutral-200">Join an Existing Lobby</h5>
+                          <p className="text-xs text-slate-500">Have an invite code from a friend? Enter it below to join their custom duel.</p>
+                        </div>
+                        <div className="w-full md:w-auto flex flex-col sm:flex-row gap-2">
+                          <input 
+                            type="text" 
+                            placeholder="Enter 6-digit code"
+                            maxLength={6}
+                            value={joinCode}
+                            onChange={(e) => setJoinCode(e.target.value.toUpperCase())}
+                            className="w-full md:w-48 px-4 py-2.5 bg-white dark:bg-neutral-800 border border-slate-200 dark:border-neutral-700 rounded-xl text-sm font-mono tracking-widest uppercase focus:outline-none focus:border-primary/50 transition placeholder:normal-case placeholder:tracking-normal"
+                          />
+                          <button
+                            onClick={handleJoinLobby}
+                            disabled={joinCode.length !== 6}
+                            className={`px-6 py-2.5 rounded-xl text-xs font-bold shadow-md transition flex items-center justify-center ${joinCode.length === 6 ? "bg-primary hover:bg-primary/90 text-white shadow-primary/20" : "bg-slate-200 dark:bg-neutral-800 text-slate-400 dark:text-neutral-600 cursor-not-allowed"}`}
+                          >
+                            Join Lobby
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+  );
+}
diff --git a/src/app/arena/tabs/HistoryTab.jsx b/src/app/arena/tabs/HistoryTab.jsx
new file mode 100644
index 000000000..ef9decf04
--- /dev/null
+++ b/src/app/arena/tabs/HistoryTab.jsx
@@ -0,0 +1,72 @@
+import { Swords, Trophy, Target, Clock } from "lucide-react";
+
+export default function HistoryTab({ matchHistory, ensureLoggedIn, handleWatchLive }) {
+  return (
+    <div className="w-full text-left space-y-4">
+                    <div className="flex justify-between items-center mb-2">
+                      <h4 className="text-sm font-bold text-slate-800 dark:text-neutral-200">Match History</h4>
+                      <input 
+                        type="text" 
+                        placeholder="Search opponent..." 
+                        className="text-xs px-3 py-1.5 rounded-lg border border-slate-200 dark:border-neutral-700 bg-slate-50 dark:bg-neutral-900 focus:outline-none focus:border-primary"
+                      />
+                    </div>
+                    {matchHistory && matchHistory.length > 0 ? (
+                      <div className="space-y-3">
+                        {matchHistory.map((b) => {
+                          const opponentName = b.opponentName;
+                          const topic = b.topic;
+                          const date = new Date(b.startTime).toLocaleDateString();
+                          const result = b.result;
+                          const xpAwarded = `+${b.xpAwarded} XP`;
+                          const ratingChange = b.ratingChange >= 0 ? `+${b.ratingChange} Rating` : `${b.ratingChange} Rating`;
+
+                          return (
+                            <div key={b.id} className="flex flex-col md:flex-row md:items-center justify-between p-4 border border-slate-100 dark:border-neutral-800 bg-slate-50/50 dark:bg-neutral-900/50 rounded-xl gap-4 text-xs transition hover:border-slate-200 dark:hover:border-neutral-700">
+                              <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-2 mb-1.5">
+                                  <span className="font-bold text-slate-700 dark:text-neutral-200 text-sm truncate">
+                                    You vs {opponentName}
+                                  </span>
+                                  <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider ${
+                                    result === "Victory"
+                                      ? "bg-emerald-500/10 text-emerald-500"
+                                      : result === "Defeat" ? "bg-red-500/10 text-red-500" : "bg-slate-500/10 text-slate-500"
+                                  }`}>
+                                    {result}
+                                  </span>
+                                </div>
+                                <div className="flex items-center gap-3 text-slate-500 dark:text-neutral-400">
+                                  <span className="flex items-center gap-1.5"><Target size={12} /> {topic}</span>
+                                  <span className="flex items-center gap-1.5"><Clock size={12} /> {date}</span>
+                                </div>
+                              </div>
+                              <div className="flex items-center gap-6 justify-between md:justify-end">
+                                <div className="text-left md:text-right">
+                                  <span className="font-bold text-primary dark:text-purple-400 block">{xpAwarded}</span>
+                                  <span className={`text-[11px] font-bold ${ratingChange.startsWith("+") ? "text-emerald-500" : "text-red-500"}`}>
+                                    {ratingChange}
+                                  </span>
+                                </div>
+                                <button
+                                  onClick={() => {
+                                    if (!ensureLoggedIn()) return;
+                                    handleWatchLive("You", opponentName, topic);
+                                  }}
+                                  className="px-4 py-2 bg-white hover:bg-slate-50 dark:bg-neutral-800 dark:hover:bg-neutral-700 border border-slate-200 dark:border-neutral-700 rounded-lg font-bold transition shadow-sm text-slate-700 dark:text-neutral-200"
+                                >
+                                  Replay
+                                </button>
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      <div className="p-8 text-center text-sm font-semibold text-slate-500 dark:text-neutral-400 bg-slate-50 dark:bg-neutral-900/50 rounded-xl border border-dashed border-slate-200 dark:border-neutral-700">
+                        No match history available yet.
+                      </div>
+                    )}
+                  </div>
+  );
+}
diff --git a/src/app/arena/tabs/HomeTab.jsx b/src/app/arena/tabs/HomeTab.jsx
new file mode 100644
index 000000000..3eecf64b2
--- /dev/null
+++ b/src/app/arena/tabs/HomeTab.jsx
@@ -0,0 +1,265 @@
+import { Zap, Swords, Target, Trophy, Shield, TrendingUp, Play } from "lucide-react";
+import UpcomingTournament from "@/app/components/ui/UpcomingTournament";
+
+const getInitials = (name) => {
+  if (!name) return "?";
+  const parts = name.trim().split(/\s+/);
+  if (!parts[0]) return "?";
+  return parts.map(n => n[0]).join("").toUpperCase().substring(0, 2);
+};
+
+const ACHIEVEMENT_BADGES = [
+  { title: "Module Master", icon: "🏆" },
+  { title: "7-Day Streak", icon: "🔥" },
+  { title: "Community Helper", icon: "🤝" },
+  { title: "Arena Champion", icon: "⚔️" },
+];
+
+export default function HomeTab({ profile, currentUserStats, leaderboard, openMatchmakingModal, openCreateDuelModal, matchHistory, handleTabChange, handleWatchLive, ensureLoggedIn }) {
+  return (
+    <>
+                {/* Hero Podium Card */}
+                <div className="bg-gradient-to-br from-[#1c1d2c] to-[#0f0f18] rounded-3xl p-6 relative overflow-hidden text-white flex flex-col md:flex-row items-center justify-between border border-slate-900">
+                  <div className="space-y-4 max-w-sm z-10 text-center md:text-left mb-6 md:mb-0">
+                    <span className="text-[10px] bg-primary/20 text-primary-light border border-primary/30 font-bold uppercase tracking-wider px-2.5 py-1 rounded-full">
+                      Welcome to Arena
+                    </span>
+                    <h2 className="text-2xl font-extrabold tracking-tight">
+                      Compete. Learn. <span className="text-primary-light">Climb.</span>
+                    </h2>
+                    <p className="text-xs text-slate-300 leading-relaxed">
+                      Challenge developers in real-time DSA battles, climb the leaderboard and become the best.
+                    </p>
+                    <div className="flex flex-wrap gap-3 justify-center md:justify-start">
+                      <button
+                        onClick={() => {
+                          openMatchmakingModal();
+                        }}
+                        className="px-5 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-xl text-xs font-bold flex items-center gap-1.5 transition"
+                      >
+                        <Zap size={14} />
+                        Find Match
+                      </button>
+                      <button
+                        onClick={openCreateDuelModal}
+                        className="px-5 py-2.5 bg-white/10 hover:bg-white/20 text-white border border-white/20 rounded-xl text-xs font-bold flex items-center gap-1.5 transition"
+                      >
+                        <Swords size={14} />
+                        Create Duel
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Top 3 Avatars Podium Graphic */}
+                  <div className="flex gap-4 items-end pr-2 select-none">
+                    {/* 2nd Place */}
+                    <div className="flex flex-col items-center mt-6">
+                      <div className="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center font-bold text-xs shadow border-2 border-slate-600 mb-1.5 overflow-hidden">
+                        {leaderboard[1]?.avatarUrl ? (
+                          <img 
+                            src={leaderboard[1].avatarUrl} 
+                            alt={leaderboard[1]?.name || "User"} 
+                            referrerPolicy="no-referrer"
+                            className="w-full h-full object-cover" 
+                          />
+                        ) : leaderboard[1] ? (
+                          <div className="w-full h-full bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light flex items-center justify-center text-xs font-bold">
+                            {getInitials(leaderboard[1]?.name || `User ${leaderboard[1]?.userId.substring(0,4)}`)}
+                          </div>
+                        ) : (
+                          <div className="w-full h-full bg-slate-800 flex items-center justify-center text-xs font-bold text-slate-500">
+                            -
+                          </div>
+                        )}
+                      </div>
+                      <span className="text-[10px] text-slate-300 block font-semibold mb-1 truncate max-w-[64px]">
+                        {leaderboard[1] ? (leaderboard[1]?.name || `User ${leaderboard[1]?.userId.substring(0,4)}`) : "Unranked"}
+                      </span>
+                      <span className="text-[9px] text-slate-400 block mb-2">{leaderboard[1] ? `${leaderboard[1].xp} XP` : "-"}</span>
+                      <div className="w-14 h-12 bg-slate-800 border-t border-slate-700 rounded-t-lg flex items-center justify-center font-bold text-slate-400 shadow-lg text-lg">
+                        2
+                      </div>
+                    </div>
+
+                    {/* 1st Place */}
+                    <div className="flex flex-col items-center">
+                      <div className="w-12 h-12 rounded-full bg-amber-500 flex items-center justify-center font-bold text-sm shadow-md border-2 border-amber-400 mb-1.5 overflow-hidden">
+                        {leaderboard[0]?.avatarUrl ? (
+                          <img 
+                            src={leaderboard[0].avatarUrl} 
+                            alt={leaderboard[0]?.name || "User"} 
+                            referrerPolicy="no-referrer"
+                            className="w-full h-full object-cover" 
+                          />
+                        ) : leaderboard[0] ? (
+                           <div className="w-full h-full text-white flex items-center justify-center text-sm font-bold">
+                             {getInitials(leaderboard[0]?.name || `User ${leaderboard[0]?.userId.substring(0,4)}`)}
+                           </div>
+                        ) : (
+                           <div className="w-full h-full bg-slate-800 flex items-center justify-center text-sm font-bold text-slate-500">
+                             -
+                           </div>
+                        )}
+                      </div>
+                      <span className="text-[10px] text-slate-200 block font-bold mb-1">{leaderboard[0] ? (leaderboard[0]?.name || `User ${leaderboard[0]?.userId.substring(0,4)}`) : "Unranked"}</span>
+                      <span className="text-[9px] text-amber-300 block mb-2">{leaderboard[0] ? `${leaderboard[0].xp} XP` : "-"}</span>
+                      <div className="w-16 h-20 bg-primary border-t border-primary-light rounded-t-lg flex items-center justify-center font-extrabold text-white shadow-lg text-2xl">
+                        1
+                      </div>
+                    </div>
+
+                    {/* 3rd Place */}
+                    <div className="flex flex-col items-center mt-8">
+                      <div className="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center font-bold text-xs shadow border-2 border-purple-500 mb-1.5 overflow-hidden">
+                        {leaderboard[2]?.avatarUrl ? (
+                          <img 
+                            src={leaderboard[2].avatarUrl} 
+                            alt={leaderboard[2]?.name || "User"} 
+                            referrerPolicy="no-referrer"
+                            className="w-full h-full object-cover" 
+                          />
+                        ) : leaderboard[2] ? (
+                           <div className="w-full h-full text-white flex items-center justify-center text-xs font-bold">
+                             {getInitials(leaderboard[2]?.name || `User ${leaderboard[2]?.userId.substring(0,4)}`)}
+                           </div>
+                        ) : (
+                           <div className="w-full h-full bg-slate-800 flex items-center justify-center text-xs font-bold text-slate-500">
+                             -
+                           </div>
+                        )}
+                      </div>
+                      <span className="text-[10px] text-slate-300 block font-semibold mb-1">{leaderboard[2] ? (leaderboard[2]?.name || `User ${leaderboard[2]?.userId.substring(0,4)}`) : "Unranked"}</span>
+                      <span className="text-[9px] text-slate-400 block mb-2">{leaderboard[2] ? `${leaderboard[2].xp} XP` : "-"}</span>
+                      <div className="w-14 h-12 bg-slate-800 border-t border-slate-700 rounded-t-lg flex items-center justify-center font-bold text-slate-400 shadow-lg text-lg">
+                        3
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Your Stats Card */}
+                <div className="bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-6 shadow-sm">
+                  <h3 className="text-base font-bold text-slate-800 dark:text-neutral-200 mb-4">Your Stats</h3>
+                  <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
+                    {[
+                      { label: "Battles Won", value: profile?.battlesWon || 0, icon: Swords, color: "text-emerald-500 bg-emerald-500/10 border-emerald-500/20" },
+                      { label: "Win Rate", value: profile?.battlesWon && (profile?.battlesWon + profile?.battlesLost) > 0 ? `${Math.round((profile.battlesWon / (profile.battlesWon + profile.battlesLost)) * 100)}%` : "0%", icon: TrendingUp, color: "text-blue-500 bg-blue-500/10 border-blue-500/20" },
+                      { label: "Problems Solved", value: profile?.totalProblemsSolved || 0, icon: Target, color: "text-purple-500 bg-purple-500/10 border-purple-500/20" },
+                      { label: "Current Rating", value: profile?.rating || 1200, icon: Trophy, color: "text-amber-500 bg-amber-500/10 border-amber-500/20" },
+                      { label: "Current Rank", value: `#${currentUserStats.rank}`, icon: Shield, color: "text-slate-500 bg-slate-500/10 border-slate-500/20" },
+                    ].map((stat, idx) => {
+                      const Icon = stat.icon;
+                      return (
+                        <div key={idx} className="p-3 border border-slate-100 dark:border-neutral-900 bg-slate-50/20 dark:bg-neutral-900/20 rounded-xl text-center">
+                          <div className={`mx-auto w-8 h-8 rounded-lg flex items-center justify-center border ${stat.color} mb-2`}>
+                            <Icon size={14} />
+                          </div>
+                          <span className="text-[9px] text-slate-400 dark:text-neutral-500 block truncate font-medium uppercase tracking-wider">{stat.label}</span>
+                          <span className="text-sm font-bold text-slate-850 dark:text-neutral-100 block mt-0.5">{stat.value}</span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                {/* Sub-grid 2: Achievement Showcase & Upcoming Tournament */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  {/* Badges Grid */}
+                  <div className="bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-5 shadow-sm">
+                    <div className="flex items-center justify-between mb-4">
+                      <h3 className="text-sm font-bold text-slate-800 dark:text-neutral-200">
+                        Achievement Showcase
+                      </h3>
+                      <span className="text-xs text-primary">
+                        {ACHIEVEMENT_BADGES.length} Earned
+                      </span>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-3">
+                      {ACHIEVEMENT_BADGES.map((badge, index) => (
+                        <div
+                          key={index}
+                          className="p-3 rounded-xl border border-slate-200 dark:border-neutral-700 text-center"
+                        >
+                          <div className="text-2xl">{badge.icon}</div>
+                          <p className="text-[10px] font-medium mt-1">
+                            {badge.title}
+                          </p>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Upcoming Tournament */}
+                  <UpcomingTournament />
+                </div>
+                <div className="bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-5 shadow-sm">
+                  <div className="flex items-center justify-between mb-4">
+                    <h3 className="text-sm font-bold text-slate-800 dark:text-neutral-200">Recent Battles</h3>
+                    <span
+                      onClick={() => handleTabChange("history")}
+                      className="text-xs text-primary dark:text-purple-400 font-semibold cursor-pointer hover:underline"
+                    >
+                      View All
+                    </span>
+                  </div>
+
+                  <div className="space-y-3">
+                    {matchHistory && matchHistory.length > 0 ? (
+                      matchHistory.map((b) => {
+                        const opponentName = b.opponentName;
+                        const topic = b.topic;
+                        const date = new Date(b.startTime).toLocaleDateString();
+                        const result = b.result;
+                        const xpAwarded = `+${b.xpAwarded} XP`;
+                        const ratingChange = b.ratingChange >= 0 ? `+${b.ratingChange} Rating` : `${b.ratingChange} Rating`;
+
+                        return (
+                        <div key={b.id} className="flex items-center justify-between p-3.5 border border-slate-100 dark:border-neutral-900/60 bg-slate-50/20 dark:bg-neutral-900/20 rounded-xl gap-4 text-xs">
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2 mb-1">
+                              <span className="font-bold text-slate-700 dark:text-neutral-300 truncate">
+                                You vs {opponentName}
+                              </span>
+                              <span className={`px-2 py-0.5 rounded text-[9px] font-bold ${result === "Victory"
+                                  ? "bg-emerald-500/10 text-emerald-500"
+                                  : result === "Defeat" ? "bg-red-500/10 text-red-500" : "bg-slate-500/10 text-slate-500"
+                                }`}>
+                                {result}
+                              </span>
+                            </div>
+                            <div className="flex items-center gap-3 text-[10px] text-slate-400 dark:text-neutral-500">
+                              <span>Topic: {topic}</span>
+                              <span>{date}</span>
+                            </div>
+                          </div>
+
+                          <div className="flex items-center gap-4">
+                            <div className="text-right shrink-0">
+                              <span className="font-semibold text-primary dark:text-purple-400 block">{xpAwarded}</span>
+                              <span className={`text-[10px] font-bold ${ratingChange.startsWith("+") ? "text-emerald-500" : "text-red-500"}`}>
+                                {ratingChange}
+                              </span>
+                            </div>
+                            <button
+                              onClick={() => {
+                                if (!ensureLoggedIn()) return;
+                                handleWatchLive("You", opponentName, topic);
+                              }}
+                              className="px-3.5 py-2 bg-slate-50 hover:bg-slate-100 dark:bg-neutral-900 dark:hover:bg-neutral-800 border border-slate-200 dark:border-neutral-800 rounded-xl font-bold transition shrink-0"
+                            >
+                              Replay
+                            </button>
+                          </div>
+                        </div>
+                      )})
+                    ) : (
+                      <div className="p-4 text-center text-xs font-semibold text-slate-500 dark:text-neutral-400">
+                        No recent battles found.
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </>
+  );
+}
diff --git a/src/app/arena/tabs/LeaderboardTab.jsx b/src/app/arena/tabs/LeaderboardTab.jsx
new file mode 100644
index 000000000..3c4aada5b
--- /dev/null
+++ b/src/app/arena/tabs/LeaderboardTab.jsx
@@ -0,0 +1,229 @@
+import { Trophy, Star, TrendingUp, Search, X, Navigation, TrendingDown, Flame, Minus } from "lucide-react";
+import Image from "next/image";
+import { toast } from "react-hot-toast";
+
+function getInitials(name) {
+  if (!name) return "?";
+  const parts = name.trim().split(/\s+/);
+  if (!parts[0]) return "?";
+  if (parts.length >= 2 && parts[1][0]) {
+    return (parts[0][0] + parts[1][0]).toUpperCase();
+  }
+  return parts[0].slice(0, 2).toUpperCase();
+}
+
+function getTierBadge(tier) {
+  const colors = {
+    "Grandmaster": "bg-red-500/20 text-red-500 border-red-500/50",
+    "Diamond": "bg-blue-500/20 text-blue-500 border-blue-500/50",
+    "Gold": "bg-amber-500/20 text-amber-500 border-amber-500/50",
+    "Silver": "bg-slate-400/20 text-slate-400 border-slate-400/50",
+    "Bronze": "bg-orange-700/20 text-orange-700 border-orange-700/50"
+  };
+  const colorClass = colors[tier] || colors["Bronze"];
+  return (
+    <span className={`px-2 py-0.5 rounded-md border text-[10px] font-bold uppercase tracking-wider ${colorClass}`}>
+      {tier}
+    </span>
+  );
+}
+
+export default function LeaderboardTab({ leaderboard, leaderboardFilter, setLeaderboardFilter, searchQuery, setSearchQuery, expandedRow, setExpandedRow, profile }) {
+  let displayLeaderboard = leaderboardFilter === "Friends" 
+    ? (leaderboard || []).filter((_, i) => i % 5 === 0)
+    : leaderboardFilter === "Weekly"
+      ? [...(leaderboard || [])].slice(0, 15).sort((a,b) => (b.winRate || 0) - (a.winRate || 0))
+      : (leaderboard || []);
+      
+  if (searchQuery.trim()) {
+    const query = searchQuery.toLowerCase();
+    displayLeaderboard = displayLeaderboard.filter(row => {
+      const name = row.name || (row.userId ? `User ${row.userId.substring(0,4)}` : "Unknown");
+      return name.toLowerCase().includes(query);
+    });
+  }
+
+  return (
+    <div className="w-full max-w-md space-y-4 text-left">
+                    <div className="flex gap-2 p-1 bg-slate-100 dark:bg-neutral-800 rounded-lg">
+                      {["Global", "Friends", "Weekly", "All-Time"].map(filter => (
+                        <button
+                          key={filter}
+                          onClick={() => setLeaderboardFilter(filter)}
+                          className={`flex-1 py-1.5 text-xs font-bold rounded-md transition ${
+                            leaderboardFilter === filter
+                              ? "bg-white dark:bg-neutral-700 text-primary shadow-sm"
+                              : "text-slate-500 hover:text-slate-700 dark:hover:text-neutral-300"
+                          }`}
+                        >
+                          {filter}
+                        </button>
+                      ))}
+                    </div>
+
+                    <div className="flex gap-2">
+                      <div className="relative flex-1">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={14} />
+                        <input 
+                          type="text" 
+                          placeholder="Search players..."
+                          value={searchQuery}
+                          onChange={(e) => setSearchQuery(e.target.value)}
+                          className="w-full pl-9 pr-9 py-2 text-xs bg-slate-50 dark:bg-neutral-900 border border-slate-200 dark:border-neutral-800 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary transition-all"
+                        />
+                        {searchQuery && (
+                          <button
+                            onClick={() => setSearchQuery("")}
+                            className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-slate-400 hover:text-slate-600 dark:hover:text-neutral-300 rounded-full hover:bg-slate-200 dark:hover:bg-neutral-800 transition-colors animate-in fade-in zoom-in duration-200"
+                            title="Clear search"
+                          >
+                            <X size={14} />
+                          </button>
+                        )}
+                      </div>
+                      <button 
+                        onClick={() => {
+                          const me = displayLeaderboard?.find(u => u.name === profile?.name || u.userId === profile?.userId);
+                          if (me) {
+                            const el = document.getElementById(`leaderboard-row-${me.rank}`);
+                            if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                          } else {
+                            toast.info("You are not currently ranked in this view.");
+                          }
+                        }}
+                        className="px-3 py-2 bg-primary/10 text-primary hover:bg-primary/20 rounded-lg flex items-center justify-center transition"
+                        title="Jump to My Rank"
+                      >
+                        <Navigation size={14} className="mr-1"/>
+                        <span className="text-[10px] font-bold uppercase tracking-wider">Me</span>
+                      </button>
+                    </div>
+
+                    {/* Top 3 Podium */}
+                    {leaderboard && leaderboard.length >= 3 && !searchQuery.trim() && leaderboardFilter === "Global" && (
+                      (() => {
+                        const getDisplayName = (player) => player.name || (player.userId ? `User ${player.userId.substring(0,4)}` : "Unknown");
+                        const p1 = leaderboard[0], p2 = leaderboard[1], p3 = leaderboard[2];
+                        const n1 = getDisplayName(p1), n2 = getDisplayName(p2), n3 = getDisplayName(p3);
+                        return (
+                          <div className="flex justify-center items-end gap-4 my-6 pt-4 pb-2 px-4 bg-gradient-to-t from-slate-100/50 to-transparent dark:from-neutral-900/50 rounded-xl relative">
+                            {/* 2nd Place */}
+                            <div className="flex flex-col items-center pb-2">
+                              <div className="relative">
+                                <div className="w-10 h-10 rounded-full border-2 border-slate-300 dark:border-neutral-500 overflow-hidden mb-1">
+                                  {p2.avatarUrl ? <img src={p2.avatarUrl} alt="2nd" className="w-full h-full object-cover"/> : <div className="w-full h-full bg-slate-200 dark:bg-neutral-700 flex items-center justify-center text-[10px] font-bold text-slate-500 dark:text-neutral-400">{getInitials(n2)}</div>}
+                                </div>
+                                <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 bg-slate-300 dark:bg-neutral-600 rounded-full w-4 h-4 flex items-center justify-center text-[8px] font-bold text-slate-700 dark:text-slate-200 shadow-md ring-1 ring-white dark:ring-neutral-900">2</div>
+                              </div>
+                              <span className="text-[10px] font-bold text-slate-700 dark:text-neutral-300 truncate max-w-[60px] mt-1">{n2.split(" ")[0]}</span>
+                              <span className="text-[9px] font-bold text-slate-500">{p2.rating}</span>
+                            </div>
+                            
+                            {/* 1st Place */}
+                            <div className="flex flex-col items-center relative z-10 pb-4">
+                              <Trophy size={16} className="text-amber-500 mb-1 drop-shadow-md"/>
+                              <div className="relative">
+                                <div className="w-14 h-14 rounded-full border-2 border-amber-400 dark:border-amber-500 overflow-hidden mb-1 ring-4 ring-amber-400/20 shadow-lg shadow-amber-500/20">
+                                  {p1.avatarUrl ? <img src={p1.avatarUrl} alt="1st" className="w-full h-full object-cover"/> : <div className="w-full h-full bg-slate-200 dark:bg-neutral-700 flex items-center justify-center text-xs font-bold text-amber-500">{getInitials(n1)}</div>}
+                                </div>
+                                <div className="absolute -bottom-1.5 left-1/2 -translate-x-1/2 bg-amber-400 dark:bg-amber-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-[10px] font-bold shadow-md ring-2 ring-white dark:ring-neutral-900">1</div>
+                              </div>
+                              <span className="text-xs font-bold text-slate-900 dark:text-white mt-1.5 truncate max-w-[80px]">{n1.split(" ")[0]}</span>
+                              <span className="text-[10px] font-bold text-amber-600 dark:text-amber-500">{p1.rating}</span>
+                            </div>
+                            
+                            {/* 3rd Place */}
+                            <div className="flex flex-col items-center pb-1">
+                              <div className="relative">
+                                <div className="w-9 h-9 rounded-full border-2 border-orange-700/50 dark:border-orange-900 overflow-hidden mb-1">
+                                  {p3.avatarUrl ? <img src={p3.avatarUrl} alt="3rd" className="w-full h-full object-cover"/> : <div className="w-full h-full bg-slate-200 dark:bg-neutral-700 flex items-center justify-center text-[9px] font-bold text-orange-800 dark:text-orange-700">{getInitials(n3)}</div>}
+                                </div>
+                                <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 bg-orange-300 dark:bg-orange-900/80 text-orange-900 dark:text-orange-400 rounded-full w-4 h-4 flex items-center justify-center text-[8px] font-bold shadow-md ring-1 ring-white dark:ring-neutral-900">3</div>
+                              </div>
+                              <span className="text-[10px] font-bold text-slate-700 dark:text-neutral-300 truncate max-w-[60px] mt-1">{n3.split(" ")[0]}</span>
+                              <span className="text-[9px] font-bold text-slate-500">{p3.rating}</span>
+                            </div>
+                          </div>
+                        );
+                      })()
+                    )}
+
+                    <div className="space-y-2">
+                      {displayLeaderboard && displayLeaderboard.length > 0 ? (
+                        (() => {
+                          if (displayLeaderboard.length === 0) {
+                            return (
+                              <div className="p-4 text-center text-xs font-semibold text-slate-500 dark:text-neutral-400">
+                                No players found in this category.
+                              </div>
+                            );
+                          }
+                          return displayLeaderboard.map((row, idx) => {
+                            const rank = row.rank || idx + 1;
+                            const name = row.name || (row.userId ? `User ${row.userId.substring(0,4)}` : "Unknown");
+                            const isMe = name === profile?.name || row.userId === profile?.userId;
+                            const isExpanded = expandedRow === rank;
+                        return (
+                          <div 
+                            key={rank} 
+                            id={`leaderboard-row-${rank}`}
+                            className={`flex flex-col p-2.5 border-b border-slate-50 dark:border-neutral-800 text-xs transition-colors duration-500 cursor-pointer ${isMe ? 'bg-primary/5 dark:bg-primary/10' : 'hover:bg-slate-50 dark:hover:bg-neutral-800/50'}`}
+                            onClick={() => setExpandedRow(isExpanded ? null : rank)}
+                          >
+                            <div className="flex justify-between items-center">
+                              <div className="flex items-center gap-3">
+                                <span className="font-semibold">{rank}.</span>
+                                {/* Avatar Circle */}
+                                <div className="w-6 h-6 rounded-full bg-slate-200 dark:bg-neutral-700 flex items-center justify-center font-bold text-[9px] text-slate-650 dark:text-neutral-300 overflow-hidden shrink-0">
+                                  {row.avatarUrl ? (
+                                    <img 
+                                      src={row.avatarUrl} 
+                                      alt={name} 
+                                      referrerPolicy="no-referrer"
+                                      className="w-full h-full object-cover" 
+                                      />
+                                  ) : (
+                                    getInitials(name)
+                                  )}
+                                </div>
+                                <span className="font-semibold text-slate-850 dark:text-neutral-200">{name}</span>
+                              </div>
+                              <div className="flex items-center gap-3">
+                                {row.trend === "up" && <span className="text-emerald-500 font-bold flex items-center gap-0.5 text-[10px]"><TrendingUp size={12}/>{row.trendValue}</span>}
+                                {row.trend === "down" && <span className="text-red-500 font-bold flex items-center gap-0.5 text-[10px]"><TrendingDown size={12}/>{row.trendValue}</span>}
+                                {row.trend === "hot" && <span className="text-orange-500 font-bold flex items-center gap-0.5 text-[10px]"><Flame size={12}/>Streak</span>}
+                                {row.trend === "same" && <span className="text-slate-400 font-bold flex items-center gap-0.5 text-[10px]"><Minus size={12}/></span>}
+                                {row.tier && getTierBadge(row.tier)}
+                                <span className="font-bold text-primary">{row.rating} Rating</span>
+                              </div>
+                            </div>
+                            
+                            {isExpanded && (
+                              <div className="mt-3 pt-3 border-t border-slate-100 dark:border-neutral-800 flex justify-between text-slate-500 dark:text-neutral-400">
+                                <div className="flex flex-col gap-1">
+                                  <span className="text-[10px] uppercase font-bold tracking-wider">Win Rate</span>
+                                  <span className="font-semibold text-slate-800 dark:text-neutral-200">{row.winRate || 50}%</span>
+                                </div>
+                                <div className="flex flex-col gap-1 text-right">
+                                  <span className="text-[10px] uppercase font-bold tracking-wider">Top Languages</span>
+                                  <div className="flex gap-1 justify-end">
+                                    {(row.topLanguages || ["JavaScript", "Python"]).map(lang => (
+                                      <span key={lang} className="px-1.5 py-0.5 bg-slate-100 dark:bg-neutral-800 rounded font-semibold text-[10px] text-slate-700 dark:text-neutral-300">{lang}</span>
+                                    ))}
+                                  </div>
+                                </div>
+                              </div>
+                            )}
+                          </div>
+                        );
+                          });
+                        })()
+                      ) : (
+                        <div className="p-4 text-center text-xs font-semibold text-slate-500 dark:text-neutral-400">
+                          Leaderboard is currently empty.
+                        </div>
+                      )}
+                    </div>
+                  </div>
+  );
+}
diff --git a/src/app/arena/tabs/LiveTab.jsx b/src/app/arena/tabs/LiveTab.jsx
new file mode 100644
index 000000000..334971a0f
--- /dev/null
+++ b/src/app/arena/tabs/LiveTab.jsx
@@ -0,0 +1,27 @@
+import { Radio, Eye, Clock, Swords } from "lucide-react";
+
+export default function LiveTab({ liveMatches, handleWatchLive }) {
+  return (
+    <div className="w-full max-w-md space-y-3 text-left">
+                    {liveMatches.length > 0 ? liveMatches.map((b) => {
+                      const p1 = b.players?.[0]?.name || "Player 1";
+                      const p2 = b.players?.[1]?.name || "Player 2";
+                      return (
+                      <div key={b.matchId} className="flex items-center justify-between p-3.5 border border-slate-100 dark:border-neutral-900 rounded-xl text-xs">
+                        <div>
+                          <div className="font-bold text-slate-700 dark:text-neutral-200 mb-1">{p1} vs {p2}</div>
+                          <div className="text-[10px] text-slate-400">{b.topic} • {b.difficulty}</div>
+                        </div>
+                        <button
+                          onClick={() => handleWatchLive(b)}
+                          className="px-3 py-1.5 bg-primary text-white rounded-lg font-bold"
+                        >
+                          Watch Live
+                        </button>
+                      </div>
+                    )}) : (
+                      <div className="text-center text-xs text-slate-500">No active battles right now.</div>
+                    )}
+                  </div>
+  );
+}
diff --git a/src/app/arena/tabs/RankedTab.jsx b/src/app/arena/tabs/RankedTab.jsx
new file mode 100644
index 000000000..55580597f
--- /dev/null
+++ b/src/app/arena/tabs/RankedTab.jsx
@@ -0,0 +1,58 @@
+import { Trophy, ArrowUpRight, Zap, Target, Star, Swords, Layout, Flame, Gift } from "lucide-react";
+
+export default function RankedTab({ profile, rankProgress, ringDashoffset, ringCircumference, openMatchmakingModal, currentRank, rankedMatches }) {
+  const RankIcon = currentRank.Icon;
+  return (
+    <div className="w-full text-left space-y-6">
+                    <div>
+                      <h4 className="text-xl font-extrabold text-slate-800 dark:text-neutral-200 mb-1">Ranked Matchmaking</h4>
+                      <p className="text-xs text-slate-500 dark:text-neutral-400">Compete against similarly skilled opponents to climb the ranks.</p>
+                    </div>
+
+                    <div className="bg-slate-50 dark:bg-neutral-900 border border-slate-200 dark:border-neutral-800 rounded-2xl p-6 flex flex-col items-center justify-center text-center">
+                      <div className="relative mb-6">
+                        <div className="w-32 h-32 rounded-full border-4 border-slate-200 dark:border-neutral-800 flex items-center justify-center shadow-inner bg-white dark:bg-neutral-800 relative z-10">
+                          <RankIcon size={64} className={currentRank.color} />
+                        </div>
+                        <div className={`absolute inset-0 rounded-full border-4 ${currentRank.ringColor} border-t-transparent border-l-transparent transform rotate-45 z-20`}></div>
+                      </div>
+                      
+                      <h3 className={`text-2xl font-black uppercase tracking-widest mb-1 ${currentRank.color === 'text-slate-400' ? 'text-slate-800 dark:text-neutral-200' : currentRank.color}`}>{currentRank.name}</h3>
+                      <p className="text-xs text-slate-500 font-bold mb-6">
+                        {rankedMatches.length >= 5 ? `${profile?.xp || 0} Rating` : "Play 5 placement matches to reveal your rank"}
+                      </p>
+
+                      <div className="w-full max-w-sm mb-6">
+                        <div className="flex justify-between text-[10px] font-bold text-slate-500 uppercase tracking-wide mb-2">
+                          <span>Placement Progress</span>
+                          <span>0 / 5</span>
+                        </div>
+                        <div className="bg-slate-50 dark:bg-neutral-900 border border-slate-200 dark:border-neutral-800 rounded-2xl p-4 flex flex-col items-center justify-center text-center flex-1">
+                          <Flame size={20} className="text-orange-500 mb-2" />
+                          <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wide">Win Streak</span>
+                          <span className="text-lg font-black text-slate-800 dark:text-neutral-200 mt-1">{profile?.stats?.currentWinStreak || 0}</span>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="bg-gradient-to-r from-purple-500/10 to-blue-500/10 border border-purple-500/20 rounded-2xl p-6 flex flex-col md:flex-row items-center justify-between mt-6">
+                      <div className="flex items-center gap-4 mb-4 md:mb-0 text-left">
+                        <div className="w-12 h-12 bg-white dark:bg-neutral-800 rounded-full flex items-center justify-center shadow-sm shrink-0">
+                          <Gift className="text-purple-500" size={24} />
+                        </div>
+                        <div>
+                          <h4 className="text-sm font-bold text-slate-800 dark:text-neutral-200">Season 1 Rewards</h4>
+                          <p className="text-[10px] text-slate-500 dark:text-neutral-400 mt-0.5">Reach Gold tier or higher to unlock the exclusive "Algorithm Master" profile badge and 1000 XP.</p>
+                        </div>
+                      </div>
+                      <div className="text-center md:text-right shrink-0">
+                        <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wide">Season Ends In</span>
+                        <div className="flex gap-2 mt-1 justify-center md:justify-end">
+                          <div className="px-2 py-1 bg-white dark:bg-neutral-800 rounded border border-slate-100 dark:border-neutral-700 text-xs font-black text-slate-800 dark:text-neutral-200">14<span className="text-[9px] font-bold text-slate-400 ml-0.5">d</span></div>
+                          <div className="px-2 py-1 bg-white dark:bg-neutral-800 rounded border border-slate-100 dark:border-neutral-700 text-xs font-black text-slate-800 dark:text-neutral-200">12<span className="text-[9px] font-bold text-slate-400 ml-0.5">h</span></div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+  );
+}
diff --git a/src/app/arena/tabs/StreakTab.jsx b/src/app/arena/tabs/StreakTab.jsx
new file mode 100644
index 000000000..2a04235a1
--- /dev/null
+++ b/src/app/arena/tabs/StreakTab.jsx
@@ -0,0 +1,138 @@
+import { Flame, Check, HelpCircle, Trophy, Calendar, Share2, Shield } from "lucide-react";
+import { toast } from "react-hot-toast";
+import ActivityHeatmap from "@/app/components/ui/ActivityHeatmap";
+
+export default function StreakTab({ profile, streakData }) {
+  const [hasFreeze, setHasFreeze] = React.useState(false);
+  return (
+    <div className="w-full text-left space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500 ease-out">
+                    {/* Hero Section */}
+                    <div className="bg-gradient-to-br from-amber-500 to-orange-600 rounded-3xl p-6 relative overflow-hidden text-white flex flex-col md:flex-row items-center justify-between border border-amber-600 shadow-xl shadow-amber-500/20 animate-in fade-in slide-in-from-bottom-2 duration-500 delay-100 fill-mode-both">
+                      <div className="absolute -right-10 -bottom-10 opacity-20 pointer-events-none">
+                        <Flame size={240} className="text-white" />
+                      </div>
+                      <div className="space-y-3 z-10 text-center md:text-left">
+                        <span className="text-[10px] bg-white/20 text-white border border-white/30 font-bold uppercase tracking-wider px-2.5 py-1 rounded-full inline-block mb-1">
+                          Keep The Fire Burning
+                        </span>
+                        <h2 className="text-3xl font-black tracking-tight drop-shadow-md">
+                          Maintain Your Momentum!
+                        </h2>
+                        <p className="text-sm text-amber-100 max-w-md">
+                          You are currently on a <strong className="text-white">{streakData?.current || 0}-day</strong> streak. 
+                          Only <strong className="text-white">{Math.max(10, Math.ceil(((streakData?.current || 0) + 1) / 10) * 10) - (streakData?.current || 0)}</strong> days left to hit your next milestone. Log in and solve problems daily to keep it alive!
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Stats Cards */}
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                      <div className="group bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-5 flex items-center gap-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:border-amber-500/30 animate-in zoom-in-95 duration-500 delay-200 fill-mode-both relative overflow-hidden">
+                        <div className="absolute top-0 right-0 w-24 h-24 bg-amber-500/5 rounded-full blur-2xl -mr-8 -mt-8 pointer-events-none group-hover:bg-amber-500/10 transition-colors duration-500"></div>
+                        <div className="w-14 h-14 rounded-xl bg-amber-500/10 flex items-center justify-center text-amber-500 shrink-0">
+                          <Flame size={28} className="animate-pulse" />
+                        </div>
+                        <div>
+                          <div className="text-[10px] font-bold text-slate-500 uppercase tracking-wide">Current Streak</div>
+                          <div className="text-2xl font-black text-slate-800 dark:text-neutral-200">{streakData?.current || 0}</div>
+                        </div>
+                      </div>
+                      <div className="group bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-5 flex items-center gap-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:border-primary/30 animate-in zoom-in-95 duration-500 delay-300 fill-mode-both relative overflow-hidden">
+                        <div className="absolute top-0 right-0 w-24 h-24 bg-primary/5 rounded-full blur-2xl -mr-8 -mt-8 pointer-events-none group-hover:bg-primary/10 transition-colors duration-500"></div>
+                        <div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center text-primary shrink-0">
+                          <Trophy size={28} />
+                        </div>
+                        <div>
+                          <div className="text-[10px] font-bold text-slate-500 uppercase tracking-wide">Longest Streak</div>
+                          <div className="text-2xl font-black text-slate-800 dark:text-neutral-200">{streakData?.longest || 0}</div>
+                        </div>
+                      </div>
+                      <div className="group bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-5 flex items-center gap-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:border-indigo-500/30 animate-in zoom-in-95 duration-500 delay-400 fill-mode-both relative overflow-hidden">
+                        <div className="absolute top-0 right-0 w-24 h-24 bg-indigo-500/5 rounded-full blur-2xl -mr-8 -mt-8 pointer-events-none group-hover:bg-indigo-500/10 transition-colors duration-500"></div>
+                        <div className="w-14 h-14 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-500 shrink-0">
+                          <Calendar size={28} />
+                        </div>
+                        <div>
+                          <div className="text-[10px] font-bold text-slate-500 uppercase tracking-wide">Total Days Active</div>
+                          <div className="text-2xl font-black text-slate-800 dark:text-neutral-200">14</div>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Heatmap */}
+                    <div className="bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-6 shadow-sm animate-in fade-in slide-in-from-bottom-4 duration-500 delay-500 fill-mode-both relative">
+                      <ActivityHeatmap currentStreak={streakData?.current} longestStreak={streakData?.longest} />
+                    </div>
+
+                    <div className="bg-gradient-to-r from-primary to-purple-600 border border-primary/20 rounded-2xl p-6 text-white relative overflow-hidden flex flex-col md:flex-row items-center justify-between gap-6 shadow-xl shadow-primary/20 animate-in fade-in slide-in-from-bottom-4 duration-500 delay-700 fill-mode-both">
+                      <div className="absolute -right-10 -bottom-10 opacity-20 pointer-events-none">
+                        <Share2 size={200} />
+                      </div>
+                      <div className="relative z-10 text-center md:text-left flex-1">
+                        <h5 className="text-xl font-black mb-1">Brag About Your Streak!</h5>
+                        <p className="text-sm text-white/90 max-w-md">
+                          You're on a <strong>{streakData?.current || 0} day</strong> coding streak! Show off your dedication to your friends and rivals.
+                        </p>
+                      </div>
+                      <div className="relative z-10 shrink-0">
+                        <button 
+                          onClick={() => {
+                            toast.success("Link copied to clipboard!");
+                          }}
+                          className="px-6 py-3 bg-white text-primary rounded-xl text-sm font-bold shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all flex items-center gap-2 group"
+                        >
+                          <Share2 size={18} className="group-hover:scale-110 transition-transform" />
+                          Share My Streak
+                        </button>
+                      </div>
+                    </div>
+
+                    <div className="bg-slate-50 dark:bg-neutral-900 border border-slate-200 dark:border-neutral-800 rounded-2xl p-6 relative overflow-hidden flex flex-col md:flex-row items-center justify-between gap-6">
+                      <div className="absolute -left-6 -bottom-6 opacity-5 text-indigo-500 pointer-events-none">
+                        <Shield size={160} />
+                      </div>
+                      <div className="relative z-10 text-center md:text-left flex-1">
+                        <h5 className="text-lg font-bold text-slate-800 dark:text-neutral-200 flex items-center justify-center md:justify-start gap-2">
+                          <Shield size={20} className="text-indigo-500" />
+                          Streak Freeze
+                        </h5>
+                        <p className="text-xs text-slate-500 dark:text-neutral-400 mt-2 leading-relaxed">
+                          Protect your hard-earned streak! A Streak Freeze saves your streak if you miss a day of coding. It will be consumed automatically.
+                        </p>
+                      </div>
+                      <div className="relative z-10 shrink-0">
+                        {hasFreeze ? (
+                          <div className="flex flex-col items-center">
+                            <button 
+                              onClick={() => setHasFreeze(false)}
+                              className="px-6 py-2.5 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-500 dark:text-indigo-400 rounded-xl text-sm font-bold shadow-inner flex items-center gap-2 border border-indigo-200 dark:border-indigo-800/50 hover:bg-indigo-100 dark:hover:bg-indigo-900/50 transition"
+                            >
+                              <Shield size={16} />
+                              Equipped
+                            </button>
+                            <span className="text-[10px] text-slate-400 mt-2 font-semibold">Ready to protect your streak.</span>
+                          </div>
+                        ) : (
+                          <div className="flex flex-col items-center">
+                            <button 
+                              onClick={() => {
+                                if ((profile?.xp || 0) >= 500) {
+                                  setHasFreeze(true);
+                                  toast.success("Streak Freeze equipped!");
+                                } else {
+                                  toast.error("Not enough XP! You need 500 XP.");
+                                }
+                              }}
+                              className="px-6 py-2.5 bg-indigo-500 hover:bg-indigo-600 text-white rounded-xl text-sm font-bold shadow-md shadow-indigo-500/20 transition flex items-center gap-2 group"
+                            >
+                              <Shield size={16} className="group-hover:scale-110 transition-transform" />
+                              Equip Freeze
+                            </button>
+                            <span className="text-[10px] font-bold text-slate-500 mt-2">Cost: 500 XP</span>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+  );
+}
diff --git a/src/app/arena/tabs/TournamentsTab.jsx b/src/app/arena/tabs/TournamentsTab.jsx
new file mode 100644
index 000000000..2f67c4d72
--- /dev/null
+++ b/src/app/arena/tabs/TournamentsTab.jsx
@@ -0,0 +1,316 @@
+import { Trophy, Clock, Users, ArrowRight, Play, Calendar, History, Sparkles, Award, Flame, TrendingUp, Crown } from "lucide-react";
+import TournamentCard from "@/app/components/ui/TournamentCard";
+
+export default function TournamentsTab({ tournamentFilter, setTournamentFilter, tournamentTimeLeft, isLoadingTournaments }) {
+  return (
+    <div className="w-full text-left space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500 ease-out">
+                    {/* Hero Section */}
+                    <div className="bg-gradient-to-br from-indigo-900 via-purple-900 to-indigo-800 rounded-3xl p-8 relative overflow-hidden text-white flex flex-col md:flex-row items-center justify-between border border-indigo-500/30 shadow-2xl shadow-indigo-500/20">
+                      {/* Abstract Background Shapes */}
+                      <div className="absolute top-0 right-0 -mt-20 -mr-20 w-64 h-64 bg-primary/30 rounded-full blur-3xl pointer-events-none"></div>
+                      <div className="absolute bottom-0 left-0 -mb-20 -ml-20 w-64 h-64 bg-cyan-500/20 rounded-full blur-3xl pointer-events-none"></div>
+                      
+                      {/* Dynamic Background Particles (Grid & Floating Orbs) */}
+                      <div className="absolute inset-0 pointer-events-none overflow-hidden">
+                        <div className="absolute inset-0 opacity-[0.05]" style={{ backgroundImage: 'linear-gradient(to right, #ffffff 1px, transparent 1px), linear-gradient(to bottom, #ffffff 1px, transparent 1px)', backgroundSize: '32px 32px' }}></div>
+                        <div className="absolute top-[20%] left-[10%] w-2 h-2 rounded-full bg-cyan-400/40 blur-[1px] animate-pulse" style={{ animationDuration: '3s' }}></div>
+                        <div className="absolute top-[60%] left-[30%] w-3 h-3 rounded-full bg-indigo-400/40 blur-[1px] animate-pulse" style={{ animationDuration: '4s' }}></div>
+                        <div className="absolute top-[30%] right-[25%] w-1.5 h-1.5 rounded-full bg-cyan-300/50 blur-[1px] animate-pulse" style={{ animationDuration: '2.5s' }}></div>
+                        <div className="absolute bottom-[20%] right-[15%] w-2.5 h-2.5 rounded-full bg-purple-400/40 blur-[1px] animate-pulse" style={{ animationDuration: '3.5s' }}></div>
+                        <div className="absolute top-[80%] left-[50%] w-2 h-2 rounded-full bg-cyan-400/40 blur-[1px] animate-pulse" style={{ animationDuration: '2s' }}></div>
+                      </div>
+                      
+                      <div className="absolute -right-10 -bottom-10 opacity-10 pointer-events-none">
+                        <Trophy size={300} className="text-white transform -rotate-12" />
+                      </div>
+                      
+                      <div className="space-y-4 z-10 text-center md:text-left flex-1">
+                        <span className="text-[10px] bg-white/10 text-cyan-300 border border-cyan-400/30 font-bold uppercase tracking-wider px-3 py-1.5 rounded-full inline-flex items-center gap-2 mb-2 shadow-[0_0_15px_rgba(34,211,238,0.2)]">
+                          <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse"></span>
+                          Registrations Open
+                        </span>
+                        <h2 className="text-4xl md:text-5xl font-black tracking-tight drop-shadow-lg leading-tight">
+                          AlgoBuddy <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-primary-light">Weekly Cup</span>
+                        </h2>
+                        <p className="text-sm md:text-base text-indigo-200 max-w-lg font-medium">
+                          Compete in our premier weekly algorithmic showdown. Solve 4 problems in 90 minutes. 
+                          Win exclusive badges, massive XP, and global glory.
+                        </p>
+                      </div>
+
+                      <div className="z-10 mt-8 md:mt-0 flex flex-col items-center bg-black/20 backdrop-blur-md border border-white/10 p-5 rounded-2xl">
+                        <div className="flex items-center gap-2 mb-4 text-indigo-200">
+                          <Clock size={16} />
+                          <span className="text-xs font-bold uppercase tracking-wider">Tournament Starts In</span>
+                        </div>
+                        <div className="flex gap-3">
+                          {[
+                            { label: 'Days', value: tournamentTimeLeft.days },
+                            { label: 'Hours', value: tournamentTimeLeft.hours },
+                            { label: 'Mins', value: tournamentTimeLeft.minutes },
+                            { label: 'Secs', value: tournamentTimeLeft.seconds }
+                          ].map((unit, idx) => (
+                            <div key={idx} className="flex flex-col items-center">
+                              <div className="w-14 h-14 bg-white/10 rounded-xl flex items-center justify-center border border-white/5 shadow-inner mb-2">
+                                <span className={`text-xl font-black ${unit.label === 'Secs' ? 'text-cyan-400' : 'text-white'}`}>
+                                  {unit.value.toString().padStart(2, '0')}
+                                </span>
+                              </div>
+                              <span className="text-[9px] font-bold text-indigo-300 uppercase tracking-widest">{unit.label}</span>
+                            </div>
+                          ))}
+                        </div>
+                    </div>
+                    </div>
+
+                    {/* Player Stats Dashboard Card */}
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 bg-white dark:bg-neutral-900 border border-slate-200 dark:border-neutral-800 rounded-2xl p-5 shadow-sm hover:shadow-md transition-shadow">
+                      <div className="flex flex-col border-r border-slate-100 dark:border-neutral-800 pr-4 relative group">
+                        <div className="absolute inset-0 bg-amber-500/5 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl -m-2"></div>
+                        <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1 flex items-center gap-1.5"><Trophy size={12} className="text-amber-500" /> Tournaments Won</span>
+                        <span className="text-2xl font-black text-slate-800 dark:text-neutral-100">4</span>
+                      </div>
+                      <div className="flex flex-col md:border-r border-slate-100 dark:border-neutral-800 pr-4 relative group">
+                        <div className="absolute inset-0 bg-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl -m-2"></div>
+                        <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1 flex items-center gap-1.5"><Award size={12} className="text-purple-500" /> Average Rank</span>
+                        <span className="text-2xl font-black text-slate-800 dark:text-neutral-100">Top 12%</span>
+                      </div>
+                      <div className="flex flex-col border-r border-slate-100 dark:border-neutral-800 pr-4 relative group">
+                        <div className="absolute inset-0 bg-red-500/5 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl -m-2"></div>
+                        <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1 flex items-center gap-1.5"><Flame size={12} className="text-red-500" /> Best Win Streak</span>
+                        <span className="text-2xl font-black text-slate-800 dark:text-neutral-100">3</span>
+                      </div>
+                      <div className="flex flex-col relative group">
+                        <div className="absolute inset-0 bg-emerald-500/5 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl -m-2"></div>
+                        <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1 flex items-center gap-1.5"><TrendingUp size={12} className="text-emerald-500" /> Total Earnings</span>
+                        <span className="text-2xl font-black text-emerald-500 drop-shadow-sm">12,500 XP</span>
+                      </div>
+                    </div>
+
+                    {/* Filter Tabs */}
+                    <div className="flex items-center gap-1 p-1 bg-slate-100 dark:bg-neutral-800/50 rounded-xl overflow-x-auto no-scrollbar">
+                      {[
+                        { id: "Live", icon: Play },
+                        { id: "Upcoming", icon: Calendar },
+                        { id: "Past", icon: History },
+                        { id: "Bracket", icon: Trophy }
+                      ].map((filter) => (
+                        <button
+                          key={filter.id}
+                          onClick={() => setTournamentFilter(filter.id)}
+                          className={`flex items-center gap-2 px-4 py-2 text-sm font-bold rounded-lg transition-all whitespace-nowrap ${
+                            tournamentFilter === filter.id
+                              ? "bg-white dark:bg-neutral-700 text-primary dark:text-primary-light shadow-sm"
+                              : "text-slate-500 dark:text-neutral-400 hover:text-slate-700 dark:hover:text-neutral-300 hover:bg-slate-200/50 dark:hover:bg-neutral-700/50"
+                          }`}
+                        >
+                          <filter.icon size={16} className={tournamentFilter === filter.id ? "text-primary dark:text-primary-light" : "opacity-70"} />
+                          {filter.id}
+                          {filter.id === "Live" && (
+                            <span className="relative flex h-2 w-2 ml-1">
+                              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+                              <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
+                            </span>
+                          )}
+                        </button>
+                      ))}
+                    </div>
+
+                    {/* Content Placeholder */}
+                    {tournamentFilter === "Live" ? (
+                      <div className="bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-5 shadow-sm">
+                        <div className="flex items-center justify-between mb-6">
+                          <h3 className="text-base font-bold text-slate-800 dark:text-neutral-200">Current Live Standings</h3>
+                          <span className="px-2 py-1 rounded bg-red-500/10 text-red-500 text-[10px] font-black uppercase tracking-widest animate-pulse">
+                            Live
+                          </span>
+                        </div>
+                        <div className="space-y-2">
+                          {[
+                            { rank: 1, name: "Alex Chen", score: 400, time: "45:12" },
+                            { rank: 2, name: "Sarah J.", score: 380, time: "48:05" },
+                            { rank: 3, name: "Mike T.", score: 350, time: "52:10" },
+                            { rank: 4, name: "You", score: 200, time: "15:00", isYou: true },
+                            { rank: 5, name: "David K.", score: 180, time: "18:20" },
+                          ].map((player) => (
+                            <div key={player.rank} className={`flex items-center justify-between p-3 rounded-xl border ${player.isYou ? 'bg-primary/5 border-primary/30' : 'bg-slate-50 dark:bg-neutral-900/50 border-slate-100 dark:border-neutral-800'}`}>
+                              <div className="flex items-center gap-4">
+                                <span className={`w-6 text-center font-black ${player.rank === 1 ? 'text-amber-500' : player.rank === 2 ? 'text-slate-400' : player.rank === 3 ? 'text-orange-700' : 'text-slate-500'}`}>#{player.rank}</span>
+                                <span className={`font-bold ${player.isYou ? 'text-primary' : 'text-slate-700 dark:text-neutral-200'}`}>{player.name}</span>
+                              </div>
+                              <div className="flex items-center gap-6 text-sm font-semibold">
+                                <span className="text-slate-500 dark:text-neutral-400">{player.time}</span>
+                                <span className="w-12 text-right text-slate-800 dark:text-neutral-100">{player.score} pts</span>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    ) : tournamentFilter === "Upcoming" ? (
+                      isLoadingTournaments ? (
+                        <div className="space-y-4">
+                          {[1, 2].map((i) => (
+                            <div key={i} className="bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-5 shadow-sm flex flex-col md:flex-row gap-5 items-start md:items-center">
+                              <div className="w-16 h-16 rounded-2xl bg-slate-200 dark:bg-neutral-700 animate-pulse shrink-0"></div>
+                              <div className="flex-1 w-full space-y-3">
+                                <div className="h-5 bg-slate-200 dark:bg-neutral-700 rounded w-1/3 animate-pulse"></div>
+                                <div className="h-4 bg-slate-200 dark:bg-neutral-700 rounded w-2/3 animate-pulse"></div>
+                                <div className="flex gap-4 pt-2">
+                                  <div className="h-3 bg-slate-200 dark:bg-neutral-700 rounded w-16 animate-pulse"></div>
+                                  <div className="h-3 bg-slate-200 dark:bg-neutral-700 rounded w-16 animate-pulse"></div>
+                                  <div className="h-3 bg-slate-200 dark:bg-neutral-700 rounded w-24 animate-pulse"></div>
+                                </div>
+                              </div>
+                              <div className="w-full md:w-[140px] h-24 bg-slate-200 dark:bg-neutral-700 rounded-xl animate-pulse shrink-0 mt-4 md:mt-0"></div>
+                            </div>
+                          ))}
+                        </div>
+                      ) : (
+                        <div className="space-y-4">
+                          <TournamentCard tournament={{
+                            title: "AlgoBuddy Weekly Cup",
+                            status: "upcoming",
+                            description: "The official weekly algorithmic showdown. Solve 4 problems in 90 minutes.",
+                            date: "Sunday, 6:00 PM UTC",
+                            duration: "90 mins",
+                            participants: 1250,
+                            prize: "10k XP + Weekly Champion Badge",
+                            color: "bg-primary/5 group-hover:bg-primary/10",
+                            iconBg: "bg-primary/10 text-primary"
+                          }} />
+                          <TournamentCard tournament={{
+                            title: "Dynamic Programming Sprint",
+                            status: "upcoming",
+                            description: "A rapid-fire contest focusing exclusively on DP problems. 1D, 2D, and Trees.",
+                            date: "Tuesday, 4:00 PM UTC",
+                            duration: "60 mins",
+                            participants: 840,
+                            prize: "5k XP",
+                            color: "bg-blue-500/5 group-hover:bg-blue-500/10",
+                            iconBg: "bg-blue-500/10 text-blue-500"
+                          }} />
+                        </div>
+                      )
+                    ) : tournamentFilter === "Past" ? (
+                      <div className="space-y-4">
+                        {[
+                          { title: "Graph Theory Masterclass", date: "Last Sunday", winner: "Alex Chen", score: "400/400", time: "38:15", yourRank: 12 },
+                          { title: "Beginner's Array Challenge", date: "2 weeks ago", winner: "Sarah J.", score: "400/400", time: "42:01", yourRank: 5 },
+                        ].map((past, idx) => (
+                          <div key={idx} className="bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-5 shadow-sm flex flex-col md:flex-row items-center justify-between gap-4 opacity-75 hover:opacity-100 transition-opacity">
+                            <div className="flex-1">
+                              <h4 className="font-bold text-slate-800 dark:text-neutral-100 mb-1">{past.title}</h4>
+                              <span className="text-xs text-slate-500 dark:text-neutral-400">{past.date}</span>
+                            </div>
+                            <div className="flex items-center gap-8 text-sm">
+                              <div>
+                                <span className="block text-[10px] text-slate-400 font-bold uppercase tracking-wider mb-0.5">Winner</span>
+                                <span className="font-bold text-slate-700 dark:text-neutral-200 flex items-center gap-1.5"><Crown size={14} className="text-amber-500" /> {past.winner}</span>
+                              </div>
+                              <div>
+                                <span className="block text-[10px] text-slate-400 font-bold uppercase tracking-wider mb-0.5">Top Score</span>
+                                <span className="font-bold text-slate-700 dark:text-neutral-200">{past.score}</span>
+                              </div>
+                              <div className="text-right">
+                                <span className="block text-[10px] text-slate-400 font-bold uppercase tracking-wider mb-0.5">Your Rank</span>
+                                <span className="font-bold text-primary">#{past.yourRank}</span>
+                              </div>
+                            </div>
+                            <button className="px-4 py-2 rounded-lg border border-slate-200 dark:border-neutral-700 text-xs font-bold text-slate-600 dark:text-neutral-300 hover:bg-slate-50 dark:hover:bg-neutral-700/50 transition-colors">
+                              View Full Results
+                            </button>
+                          </div>
+                        ))}
+                      </div>
+                    ) : tournamentFilter === "Bracket" ? (
+                      <div className="bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-6 shadow-sm overflow-x-auto">
+                        <div className="min-w-[700px]">
+                          <div className="flex justify-between items-center mb-8">
+                            <h3 className="text-base font-bold text-slate-800 dark:text-neutral-200">Weekly Cup - Playoffs</h3>
+                            <div className="flex gap-4 text-xs font-bold text-slate-500">
+                              <span className="flex items-center gap-1.5"><div className="w-2 h-2 rounded-full bg-emerald-500"></div> Winner</span>
+                              <span className="flex items-center gap-1.5"><div className="w-2 h-2 rounded-full bg-slate-300 dark:bg-neutral-600"></div> Eliminated</span>
+                            </div>
+                          </div>
+                          
+                          <div className="flex justify-between relative">
+                            {/* Round 1: Quarterfinals */}
+                            <div className="flex flex-col justify-around h-[400px] w-64 z-10">
+                              {[
+                                { p1: "Alex Chen", s1: 400, p2: "David K.", s2: 320, w: 1 },
+                                { p1: "Sarah J.", s1: 380, p2: "Mike T.", s2: 390, w: 2 },
+                                { p1: "You", s1: 400, p2: "Anna L.", s2: 350, w: 1, isYou: true },
+                                { p1: "John D.", s1: 310, p2: "Emma W.", s2: 370, w: 2 }
+                              ].map((match, i) => (
+                                <div key={i} className="bg-white dark:bg-neutral-900 border border-slate-200 dark:border-neutral-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow relative">
+                                  <div className={`p-2 flex justify-between items-center text-sm ${match.w === 1 ? 'bg-emerald-50 dark:bg-emerald-900/10 font-bold text-emerald-700 dark:text-emerald-400' : 'text-slate-500 dark:text-neutral-400 opacity-70'} ${match.isYou && match.w === 1 ? 'border-l-2 border-primary' : ''}`}>
+                                    <span>{match.p1}</span>
+                                    <span>{match.s1}</span>
+                                  </div>
+                                  <div className="h-px w-full bg-slate-100 dark:bg-neutral-800"></div>
+                                  <div className={`p-2 flex justify-between items-center text-sm ${match.w === 2 ? 'bg-emerald-50 dark:bg-emerald-900/10 font-bold text-emerald-700 dark:text-emerald-400' : 'text-slate-500 dark:text-neutral-400 opacity-70'} ${match.isYou && match.w === 2 ? 'border-l-2 border-primary' : ''}`}>
+                                    <span>{match.p2}</span>
+                                    <span>{match.s2}</span>
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+
+                            {/* Connecting Lines QF to SF */}
+                            <svg className="absolute left-64 top-0 w-16 h-full pointer-events-none stroke-slate-200 dark:stroke-neutral-700 stroke-2 fill-none" preserveAspectRatio="none">
+                              <path d="M0,50 L32,50 L32,150 L64,150" />
+                              <path d="M0,150 L32,150" />
+                              <path d="M0,250 L32,250 L32,350 L64,350" />
+                              <path d="M0,350 L32,350" />
+                            </svg>
+
+                            {/* Round 2: Semifinals */}
+                            <div className="flex flex-col justify-around h-[400px] w-64 ml-16 z-10">
+                              {[
+                                { p1: "Alex Chen", s1: 390, p2: "Mike T.", s2: 400, w: 2 },
+                                { p1: "You", s1: 400, p2: "Emma W.", s2: 380, w: 1, isYou: true }
+                              ].map((match, i) => (
+                                <div key={i} className="bg-white dark:bg-neutral-900 border border-slate-200 dark:border-neutral-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow relative">
+                                  <div className={`p-2 flex justify-between items-center text-sm ${match.w === 1 ? 'bg-emerald-50 dark:bg-emerald-900/10 font-bold text-emerald-700 dark:text-emerald-400' : 'text-slate-500 dark:text-neutral-400 opacity-70'} ${match.isYou && match.w === 1 ? 'border-l-2 border-primary' : ''}`}>
+                                    <span>{match.p1}</span>
+                                    <span>{match.s1}</span>
+                                  </div>
+                                  <div className="h-px w-full bg-slate-100 dark:bg-neutral-800"></div>
+                                  <div className={`p-2 flex justify-between items-center text-sm ${match.w === 2 ? 'bg-emerald-50 dark:bg-emerald-900/10 font-bold text-emerald-700 dark:text-emerald-400' : 'text-slate-500 dark:text-neutral-400 opacity-70'} ${match.isYou && match.w === 2 ? 'border-l-2 border-primary' : ''}`}>
+                                    <span>{match.p2}</span>
+                                    <span>{match.s2}</span>
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                            
+                            {/* Connecting Lines SF to Final */}
+                            <svg className="absolute left-[34rem] top-0 w-16 h-full pointer-events-none stroke-slate-200 dark:stroke-neutral-700 stroke-2 fill-none" preserveAspectRatio="none">
+                              <path d="M0,150 L32,150 L32,250 L64,250" />
+                              <path d="M0,350 L32,350 L32,250" />
+                            </svg>
+
+                            {/* Round 3: Final */}
+                            <div className="flex flex-col justify-center h-[400px] w-64 ml-16 z-10">
+                              <div className="bg-white dark:bg-neutral-900 border-2 border-amber-400/50 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow relative ring-4 ring-amber-400/10">
+                                <div className="absolute top-0 right-0 p-1">
+                                  <Crown size={12} className="text-amber-500 opacity-50" />
+                                </div>
+                                <div className="p-3 flex justify-between items-center font-bold bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 text-base">
+                                  <span className="flex items-center gap-2"><Trophy size={14} /> You</span>
+                                  <span>400</span>
+                                </div>
+                                <div className="h-px w-full bg-amber-200 dark:bg-amber-900/50"></div>
+                                <div className="p-3 flex justify-between items-center text-sm text-slate-500 dark:text-neutral-400 opacity-70">
+                                  <span>Mike T.</span>
+                                  <span>395</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ) : null}
+                  </div>
+  );
+}
diff --git a/src/app/blog/page.jsx b/src/app/blog/page.jsx
new file mode 100644
index 000000000..f52f62f9d
--- /dev/null
+++ b/src/app/blog/page.jsx
@@ -0,0 +1,11 @@
+import Blog from "@/app/components/blog";
+
+export const metadata = {
+  title: "Blog | AlgoBuddy",
+  description:
+    "Read technical articles, learning theories, and interview preparation strategies to master data structures and algorithms on AlgoBuddy.",
+};
+
+export default function BlogPage() {
+  return <Blog />;
+}
diff --git a/src/app/cheatsheets/[id]/page.jsx b/src/app/cheatsheets/[id]/page.jsx
new file mode 100644
index 000000000..fe9660d6f
--- /dev/null
+++ b/src/app/cheatsheets/[id]/page.jsx
@@ -0,0 +1,47 @@
+import CheatsheetDetail from "@/app/components/cheatsheets/CheatsheetDetail";
+import Footer from "@/app/components/footer";
+import { allCheatsheets, getCheatsheetById } from "@/app/components/cheatsheets/data";
+
+export const dynamic = "force-static";
+
+export async function generateStaticParams() {
+  return allCheatsheets.map((c) => ({ id: c.id }));
+}
+
+export async function generateMetadata({ params }) {
+  const { id } = await params;
+
+  const cheatsheet = getCheatsheetById(id);
+
+  if (!cheatsheet) {
+    return {
+      title: "Cheatsheet Not Found | AlgoBuddy",
+    };
+  }
+
+  return {
+    title: `${cheatsheet.title} Cheatsheet | AlgoBuddy`,
+    description: `${cheatsheet.title} — ${cheatsheet.whenToUse || ""} Time complexity: ${cheatsheet.timeComplexity.average}, Space: ${cheatsheet.spaceComplexity}.`,
+  };
+}
+
+import { notFound } from "next/navigation";
+
+export default async function CheatsheetPage({ params }) {
+  const { id } = await params;
+
+  const cheatsheet = getCheatsheetById(id);
+
+  if (!cheatsheet) {
+    notFound();
+  }
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#0a0a0f]">
+      <main className="container-app section-app">
+        <CheatsheetDetail cheatsheet={cheatsheet} />
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/src/app/cheatsheets/page.jsx b/src/app/cheatsheets/page.jsx
new file mode 100644
index 000000000..6981ff808
--- /dev/null
+++ b/src/app/cheatsheets/page.jsx
@@ -0,0 +1,30 @@
+import CheatsheetsIndex from "@/app/components/cheatsheets/index";
+import Footer from "@/app/components/footer";
+import Link from "next/link";
+
+export const metadata = {
+  title: "DSA Cheatsheets | AlgoBuddy",
+  description:
+    "Comprehensive DSA cheatsheets covering sorting, searching, trees, graphs, linked lists, stacks, queues, hashmaps, recursion, and more. Includes time/space complexity, code snippets, and algorithm steps.",
+};
+
+export default function CheatsheetsPage() {
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#0a0a0f]">
+      <main className="container-app section-app">
+        <div className="mx-auto max-w-6xl">
+          <CheatsheetsIndex />
+          <div className="mt-16 text-center">
+            <Link
+              href="/"
+              className="inline-flex items-center gap-2 px-6 py-2.5 rounded-full border border-[var(--color-border)] hover:border-[var(--color-primary)] hover:text-[var(--color-primary)] transition-all font-semibold text-sm text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)]"
+            >
+              ← Back to Home
+            </Link>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/src/app/company/[id]/page.jsx b/src/app/company/[id]/page.jsx
new file mode 100644
index 000000000..57fa68019
--- /dev/null
+++ b/src/app/company/[id]/page.jsx
@@ -0,0 +1,213 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Briefcase, MapPin, Calendar, Globe, Building2, Users, ArrowLeft,
+  Send, CheckCircle, ExternalLink
+} from "lucide-react";
+import Link from "next/link";
+
+export default function CompanyPage({ params }) {
+  const { id } = params;
+  const [company, setCompany] = useState(null);
+  const [jobs, setJobs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    async function fetchCompany() {
+      try {
+        const res = await fetch(`/api/companies/${id}`);
+        if (!res.ok) {
+          if (res.status === 404) throw new Error("Company not found");
+          throw new Error("Failed to load company");
+        }
+        const data = await res.json();
+        setCompany(data.company);
+        setJobs(data.jobs || []);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchCompany();
+  }, [id]);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 py-10 px-4">
+        <div className="max-w-4xl mx-auto">
+          <div className="animate-pulse space-y-6">
+            <div className="flex items-center gap-4">
+              <div className="h-16 w-16 bg-gray-200 rounded-full" />
+              <div className="space-y-2">
+                <div className="h-6 bg-gray-200 rounded w-48" />
+                <div className="h-4 bg-gray-200 rounded w-32" />
+              </div>
+            </div>
+            <div className="h-4 bg-gray-200 rounded w-3/4" />
+            <div className="space-y-4">
+              {[...Array(3)].map((_, i) => (
+                <div key={i} className="h-24 bg-gray-200 rounded-xl" />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-gray-50 py-10 px-4">
+        <div className="max-w-4xl mx-auto text-center py-20">
+          <Building2 className="mx-auto h-12 w-12 text-gray-400" />
+          <h2 className="mt-4 text-xl font-semibold text-gray-600">{error}</h2>
+          <Link
+            href="/student-jobs"
+            className="mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-indigo-600 hover:text-indigo-700"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back to jobs
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  if (!company) return null;
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-10 px-4">
+      <div className="max-w-4xl mx-auto">
+        <Link
+          href="/student-jobs"
+          className="inline-flex items-center gap-1.5 text-sm font-medium text-indigo-600 hover:text-indigo-700 mb-6"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back to jobs
+        </Link>
+
+        <div className="bg-white rounded-xl shadow-sm p-8 mb-8">
+          <div className="flex items-start gap-6">
+            {company.logo_url ? (
+              <img
+                src={company.logo_url}
+                alt={company.name}
+                className="h-20 w-20 rounded-xl object-cover flex-shrink-0"
+              />
+            ) : (
+              <div className="h-20 w-20 rounded-xl bg-indigo-100 flex items-center justify-center flex-shrink-0">
+                <Building2 className="h-10 w-10 text-indigo-600" />
+              </div>
+            )}
+            <div className="flex-1 min-w-0">
+              <h1 className="text-3xl font-bold text-gray-900">{company.name}</h1>
+              <div className="flex flex-wrap items-center gap-4 mt-2 text-sm text-gray-500">
+                {company.industry && (
+                  <span className="flex items-center gap-1">
+                    <Briefcase className="h-4 w-4" />
+                    {company.industry}
+                  </span>
+                )}
+                {company.location && (
+                  <span className="flex items-center gap-1">
+                    <MapPin className="h-4 w-4" />
+                    {company.location}
+                  </span>
+                )}
+                {company.size && (
+                  <span className="flex items-center gap-1">
+                    <Users className="h-4 w-4" />
+                    {company.size} employees
+                  </span>
+                )}
+              </div>
+              <div className="flex flex-wrap gap-3 mt-4">
+                {company.website && (
+                  <a
+                    href={company.website}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-indigo-600 bg-indigo-50 hover:bg-indigo-100 rounded-lg transition-colors"
+                  >
+                    <Globe className="h-4 w-4" />
+                    Website
+                    <ExternalLink className="h-3 w-3" />
+                  </a>
+                )}
+              </div>
+            </div>
+          </div>
+          {company.description && (
+            <p className="mt-6 text-gray-700 leading-relaxed">{company.description}</p>
+          )}
+        </div>
+
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">
+          Open Positions {jobs.length > 0 && `(${jobs.length})`}
+        </h2>
+
+        {jobs.length === 0 ? (
+          <div className="text-center py-16 bg-white rounded-xl shadow-sm">
+            <Briefcase className="mx-auto h-12 w-12 text-gray-400" />
+            <h3 className="mt-4 text-lg font-semibold text-gray-600">No open positions</h3>
+            <p className="text-gray-500 mt-1">
+              This company has no approved job listings right now.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {jobs.map((job) => (
+              <div key={job.id} className="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
+                <div className="flex items-start justify-between">
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-lg font-semibold text-gray-900">{job.title}</h3>
+                    <div className="flex flex-wrap items-center gap-4 mt-2 text-sm text-gray-500">
+                      {job.location && (
+                        <span className="flex items-center gap-1">
+                          <MapPin className="h-4 w-4" />
+                          {job.location}
+                        </span>
+                      )}
+                      {job.job_type && (
+                        <span className="capitalize">{job.job_type.replace("-", " ")}</span>
+                      )}
+                      {job.experience_level && (
+                        <span className="capitalize">{job.experience_level.replace("-", " ")}</span>
+                      )}
+                      <span className="flex items-center gap-1">
+                        <Calendar className="h-4 w-4" />
+                        {new Date(job.created_at).toLocaleDateString()}
+                      </span>
+                    </div>
+                    {job.salary_range && (
+                      <p className="mt-2 text-sm font-medium text-green-600">{job.salary_range}</p>
+                    )}
+                    {job.skills && (
+                      <p className="mt-2 text-sm text-gray-500">
+                        <span className="font-medium text-gray-700">Skills: </span>
+                        {job.skills}
+                      </p>
+                    )}
+                    <p className="mt-3 text-gray-600 line-clamp-2">{job.description}</p>
+                  </div>
+                  <div className="ml-6 flex-shrink-0 self-start">
+                    <Link
+                      href={`/student-jobs`}
+                      className="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors"
+                    >
+                      <Send className="h-4 w-4" />
+                      Apply
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/AIStudySchedule.jsx b/src/app/components/AIStudySchedule.jsx
new file mode 100644
index 000000000..d9abefacf
--- /dev/null
+++ b/src/app/components/AIStudySchedule.jsx
@@ -0,0 +1,71 @@
+"use client";
+
+import React from "react";
+
+const studyPlan = [
+  {
+    day: "Monday",
+    topic: "Sorting Algorithms",
+    time: "2 Hours",
+    level: "Beginner",
+  },
+  {
+    day: "Tuesday",
+    topic: "Binary Search & Searching",
+    time: "1.5 Hours",
+    level: "Intermediate",
+  },
+  {
+    day: "Wednesday",
+    topic: "Trees and Graphs",
+    time: "2.5 Hours",
+    level: "Advanced",
+  },
+  {
+    day: "Thursday",
+    topic: "Linked Lists Revision",
+    time: "1 Hour",
+    level: "Beginner",
+  },
+];
+
+export default function AIStudySchedule() {
+  return (
+    <div className="bg-slate-900 text-white p-6 rounded-xl shadow-lg">
+      <h2 className="text-2xl font-bold mb-4">
+        AI Personalized Study Schedule
+      </h2>
+
+      <p className="text-gray-400 mb-5">
+        Schedule generated based on your progress, weak areas, and learning goals.
+      </p>
+
+      <div className="space-y-4">
+        {studyPlan.map((plan, index) => (
+          <div
+            key={index}
+            className="bg-slate-800 p-4 rounded-lg border border-slate-700"
+          >
+            <h3 className="font-semibold text-lg">
+              {plan.day}
+            </h3>
+
+            <p>📚 Topic: {plan.topic}</p>
+            <p>⏳ Study Time: {plan.time}</p>
+            <p>🎯 Difficulty: {plan.level}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-5 bg-purple-900/40 p-4 rounded-lg">
+        <h4 className="font-semibold">
+          AI Recommendation
+        </h4>
+        <p className="text-sm text-gray-300">
+          Spend more time on Trees and Graphs as your completion level is lower.
+          Continue regular revision for previously completed topics.
+        </p>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/AlgorithmComparisonHistory.jsx b/src/app/components/AlgorithmComparisonHistory.jsx
new file mode 100644
index 000000000..7167c3ba9
--- /dev/null
+++ b/src/app/components/AlgorithmComparisonHistory.jsx
@@ -0,0 +1,69 @@
+"use client";
+
+import React, { useState } from "react";
+
+const initialHistory = [
+  {
+    algorithm: "Bubble Sort vs Merge Sort",
+    inputSize: "1000 Elements",
+    executionTime: "12ms vs 2ms",
+    complexity: "O(n²) vs O(n log n)",
+    note: "Merge Sort performs better for larger datasets.",
+  },
+  {
+    algorithm: "Linear Search vs Binary Search",
+    inputSize: "500 Elements",
+    executionTime: "8ms vs 1ms",
+    complexity: "O(n) vs O(log n)",
+    note: "Binary Search is faster on sorted arrays.",
+  },
+];
+
+export default function AlgorithmComparisonHistory() {
+  const [history, setHistory] = useState(initialHistory);
+
+  const deleteHistory = (index) => {
+    setHistory(history.filter((_, i) => i !== index));
+  };
+
+  return (
+    <div className="bg-slate-900 text-white p-6 rounded-xl shadow-lg">
+      <h2 className="text-2xl font-bold mb-4">
+        Algorithm Comparison History
+      </h2>
+
+      {history.length === 0 ? (
+        <p className="text-gray-400">
+          No comparison history available.
+        </p>
+      ) : (
+        <div className="space-y-4">
+          {history.map((item, index) => (
+            <div
+              key={index}
+              className="bg-slate-800 p-4 rounded-lg border border-slate-700"
+            >
+              <h3 className="font-semibold text-lg">
+                {item.algorithm}
+              </h3>
+
+              <p>Input Size: {item.inputSize}</p>
+              <p>Execution Time: {item.executionTime}</p>
+              <p>Complexity: {item.complexity}</p>
+              <p className="text-gray-300">
+                Note: {item.note}
+              </p>
+
+              <button
+                onClick={() => deleteHistory(index)}
+                className="mt-3 px-3 py-1 bg-red-600 rounded hover:bg-red-700"
+              >
+                Delete
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/AlgorithmExplanation.jsx b/src/app/components/AlgorithmExplanation.jsx
new file mode 100644
index 000000000..bd83685c9
--- /dev/null
+++ b/src/app/components/AlgorithmExplanation.jsx
@@ -0,0 +1,84 @@
+"use client";
+
+import React from "react";
+import { Sparkles, BookOpen, Clock, Database } from "lucide-react";
+
+export default function AlgorithmExplanation({ explanation }) {
+  return (
+    <div className="w-full mt-5 rounded-2xl border border-purple-200 dark:border-purple-900 
+      bg-white dark:bg-slate-900 shadow-lg overflow-hidden">
+
+      {/* AI Header */}
+      <div className="bg-gradient-to-r from-purple-600 to-pink-500 p-4 flex items-center gap-3">
+        <Sparkles className="text-white" size={22} />
+        <div>
+          <h2 className="text-white font-bold text-lg">
+            AI Algorithm Assistant
+          </h2>
+          <p className="text-purple-100 text-sm">
+            Smart explanation for your current algorithm step
+          </p>
+        </div>
+      </div>
+
+      <div className="p-5 space-y-4">
+
+        {/* Explanation Card */}
+        <div className="rounded-xl border border-purple-200 dark:border-purple-700 
+          bg-purple-50 dark:bg-slate-800 p-4">
+
+          <div className="flex items-center gap-2 mb-2">
+            <BookOpen className="text-purple-600 dark:text-purple-400" size={18}/>
+            <h3 className="font-semibold text-slate-800 dark:text-white">
+              Current Step Explanation
+            </h3>
+          </div>
+
+          <p className="text-sm text-slate-700 dark:text-slate-300">
+            {explanation ||
+              "AI is analyzing the algorithm step and generating an easy-to-understand explanation."}
+          </p>
+        </div>
+
+
+        {/* Data State Card */}
+        <div className="rounded-xl bg-blue-50 dark:bg-slate-800 p-4 
+          border border-blue-200 dark:border-blue-700">
+
+          <div className="flex gap-2 items-center mb-2">
+            <Database className="text-blue-600" size={18}/>
+            <h3 className="font-semibold text-slate-800 dark:text-white">
+              Data Structure Insight
+            </h3>
+          </div>
+
+          <p className="text-sm text-slate-700 dark:text-slate-300">
+            Visualize how values, nodes, and elements are modified during the
+            current execution step.
+          </p>
+
+        </div>
+
+
+        {/* Complexity Card */}
+        <div className="rounded-xl bg-green-50 dark:bg-slate-800 p-4
+          border border-green-200 dark:border-green-700">
+
+          <div className="flex gap-2 items-center mb-2">
+            <Clock className="text-green-600" size={18}/>
+            <h3 className="font-semibold text-slate-800 dark:text-white">
+              Complexity Insight
+            </h3>
+          </div>
+
+          <p className="text-sm text-slate-700 dark:text-slate-300">
+            Understand how comparisons, swaps, and operations affect the
+            algorithm's time and space complexity.
+          </p>
+
+        </div>
+
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/AlgorithmNotes.jsx b/src/app/components/AlgorithmNotes.jsx
new file mode 100644
index 000000000..cf5091bf9
--- /dev/null
+++ b/src/app/components/AlgorithmNotes.jsx
@@ -0,0 +1,118 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Save, Trash2, Edit3, BookOpen } from "lucide-react";
+
+export default function AlgorithmNotes() {
+  const [note, setNote] = useState("");
+  const [notes, setNotes] = useState([]);
+  const [editingIndex, setEditingIndex] = useState(null);
+
+  // Load saved notes
+  useEffect(() => {
+    const savedNotes = localStorage.getItem("algorithm-notes");
+    if (savedNotes) {
+      setNotes(JSON.parse(savedNotes));
+    }
+  }, []);
+
+  // Save notes to localStorage
+  const saveToStorage = (updatedNotes) => {
+    setNotes(updatedNotes);
+    localStorage.setItem(
+      "algorithm-notes",
+      JSON.stringify(updatedNotes)
+    );
+  };
+
+  // Add or update note
+  const handleSave = () => {
+    if (!note.trim()) return;
+
+    let updatedNotes = [...notes];
+
+    if (editingIndex !== null) {
+      updatedNotes[editingIndex] = note;
+      setEditingIndex(null);
+    } else {
+      updatedNotes.push(note);
+    }
+
+    saveToStorage(updatedNotes);
+    setNote("");
+  };
+
+  // Edit note
+  const handleEdit = (index) => {
+    setNote(notes[index]);
+    setEditingIndex(index);
+  };
+
+  // Delete note
+  const handleDelete = (index) => {
+    const updatedNotes = notes.filter((_, i) => i !== index);
+    saveToStorage(updatedNotes);
+  };
+
+  return (
+    <div className="w-full max-w-4xl mx-auto p-5 bg-slate-900 text-white rounded-2xl shadow-lg my-6">
+      
+      <div className="flex items-center gap-2 mb-4">
+        <BookOpen className="text-purple-400" />
+        <h2 className="text-xl font-bold">
+          Algorithm Notes & Annotations
+        </h2>
+      </div>
+
+      <textarea
+        value={note}
+        onChange={(e) => setNote(e.target.value)}
+        placeholder="Write your observations, doubts, or important concepts here..."
+        className="w-full h-28 p-3 rounded-lg bg-slate-800 border border-slate-700 outline-none resize-none"
+      />
+
+      <button
+        onClick={handleSave}
+        className="mt-3 flex items-center gap-2 bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg font-medium"
+      >
+        <Save size={18} />
+        {editingIndex !== null ? "Update Note" : "Save Note"}
+      </button>
+
+      <div className="mt-6 space-y-3">
+        {notes.length === 0 ? (
+          <p className="text-slate-400">
+            No notes added yet.
+          </p>
+        ) : (
+          notes.map((item, index) => (
+            <div
+              key={index}
+              className="bg-slate-800 p-3 rounded-lg border border-slate-700"
+            >
+              <p className="mb-3">{item}</p>
+
+              <div className="flex gap-3">
+                <button
+                  onClick={() => handleEdit(index)}
+                  className="flex items-center gap-1 text-yellow-400 hover:text-yellow-300"
+                >
+                  <Edit3 size={16} />
+                  Edit
+                </button>
+
+                <button
+                  onClick={() => handleDelete(index)}
+                  className="flex items-center gap-1 text-red-400 hover:text-red-300"
+                >
+                  <Trash2 size={16} />
+                  Delete
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/AlgorithmQuiz.jsx b/src/app/components/AlgorithmQuiz.jsx
new file mode 100644
index 000000000..b7ed0b8a2
--- /dev/null
+++ b/src/app/components/AlgorithmQuiz.jsx
@@ -0,0 +1,257 @@
+"use client";
+
+import { useState } from "react";
+import { motion } from "framer-motion";
+
+const questions = [
+  {
+    question:
+      "You need to search an element in a large sorted array. Which algorithm should you choose?",
+    options: [
+      "Linear Search",
+      "Binary Search",
+      "Bubble Sort",
+      "DFS",
+    ],
+    answer: "Binary Search",
+    explanation:
+      "Binary Search works on sorted arrays and has O(log n) time complexity.",
+  },
+
+  {
+    question:
+      "You need to find the shortest path in a weighted graph with positive edges.",
+    options: [
+      "Bubble Sort",
+      "Dijkstra Algorithm",
+      "Stack",
+      "Binary Search",
+    ],
+    answer: "Dijkstra Algorithm",
+    explanation:
+      "Dijkstra Algorithm efficiently finds the shortest path in weighted graphs.",
+  },
+
+  {
+    question:
+      "You need to process tasks in the exact order they arrive. Which data structure is best?",
+    options: [
+      "Stack",
+      "Queue",
+      "Tree",
+      "Heap",
+    ],
+    answer: "Queue",
+    explanation:
+      "Queue follows FIFO (First In First Out), making it ideal for task scheduling.",
+  },
+
+  {
+    question:
+      "You need to undo the most recent operation in an application. Which data structure is used?",
+    options: [
+      "Queue",
+      "Stack",
+      "Array",
+      "Graph",
+    ],
+    answer: "Stack",
+    explanation:
+      "Stack follows LIFO (Last In First Out), which is perfect for undo operations.",
+  },
+
+  {
+    question:
+      "Which sorting algorithm has an average time complexity of O(n log n)?",
+    options: [
+      "Bubble Sort",
+      "Merge Sort",
+      "Selection Sort",
+      "Linear Search",
+    ],
+    answer: "Merge Sort",
+    explanation:
+      "Merge Sort uses divide and conquer and runs in O(n log n) average and worst cases.",
+  },
+];
+
+
+export default function AlgorithmQuiz() {
+  const [current, setCurrent] = useState(0);
+  const [selected, setSelected] = useState(null);
+  const [score, setScore] = useState(0);
+  const [finished, setFinished] = useState(false);
+
+  const question = questions[current];
+
+  // Guard: if questions array is empty or the current index is out of range,
+  // show a friendly fallback instead of crashing on question.question etc.
+  if (!question || !Array.isArray(question.options) || question.options.length === 0) {
+    return (
+      <div className="min-h-screen flex items-center justify-center px-4 py-10">
+        <div className="max-w-md text-center p-8 bg-white dark:bg-neutral-900 rounded-2xl shadow-lg">
+          <p className="text-4xl mb-4">🔧</p>
+          <h2 className="text-xl font-bold mb-2 text-slate-800 dark:text-white">
+            Quiz Unavailable
+          </h2>
+          <p className="text-sm text-slate-500 dark:text-neutral-400">
+            No quiz questions are available right now. Please check back later or
+            explore the visualizer while we fix this.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+
+  const handleAnswer = (option) => {
+    if (selected) return;
+
+    setSelected(option);
+
+    if (option === question.answer) {
+      setScore((prev) => prev + 1);
+    }
+  };
+
+
+  const nextQuestion = () => {
+    if (current + 1 < questions.length) {
+      setCurrent((prev) => prev + 1);
+      setSelected(null);
+    } else {
+      setFinished(true);
+    }
+  };
+
+
+  const restartQuiz = () => {
+    setCurrent(0);
+    setSelected(null);
+    setScore(0);
+    setFinished(false);
+  };
+
+
+  if (finished) {
+    return (
+      <div className="max-w-2xl mx-auto mt-10 p-8 bg-white dark:bg-neutral-900 rounded-2xl shadow-lg text-center">
+        <h1 className="text-3xl font-bold mb-4">
+          Quiz Completed 🎉
+        </h1>
+
+        <p className="text-lg mb-6">
+          Your Score: 
+          <span className="font-bold text-blue-500">
+            {" "}
+            {score}/{questions.length}
+          </span>
+        </p>
+
+        <button
+          onClick={restartQuiz}
+          className="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700"
+        >
+          Restart Quiz
+        </button>
+      </div>
+    );
+  }
+
+
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4 py-10 bg-gradient-to-b from-white to-purple-50 dark:from-neutral-900 dark:to-neutral-950">
+
+      <motion.div
+        initial={{ opacity: 0, y: 25 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="max-w-2xl w-full bg-white dark:bg-neutral-900 rounded-2xl shadow-xl p-8"
+      >
+
+        <div className="flex justify-between mb-5">
+          <span className="font-semibold">
+            Question {current + 1}/{questions.length}
+          </span>
+
+          <span className="text-purple-600 font-bold">
+            Score: {score}
+          </span>
+        </div>
+
+
+        <h2 className="text-2xl font-bold mb-6">
+          {question.question}
+        </h2>
+
+
+        <div className="space-y-3">
+
+          {question.options.map((option) => {
+
+            let style =
+              "w-full text-left p-4 rounded-xl border transition";
+
+            if (selected) {
+
+              if (option === question.answer) {
+                style +=
+                  " bg-green-100 border-green-500";
+              }
+
+              else if (option === selected) {
+                style +=
+                  " bg-red-100 border-red-500";
+              }
+
+            }
+
+            return (
+              <button
+                key={option}
+                onClick={() => handleAnswer(option)}
+                className={style}
+              >
+                {option}
+              </button>
+            );
+
+          })}
+
+        </div>
+
+
+        {selected && (
+
+          <div className="mt-6">
+
+            <div className="p-4 rounded-lg bg-gray-100 dark:bg-neutral-800">
+              <h3 className="font-bold mb-2">
+                Explanation
+              </h3>
+
+              <p>
+                {question.explanation}
+              </p>
+            </div>
+
+
+            <button
+              onClick={nextQuestion}
+              className="mt-5 bg-blue-600 text-white px-5 py-3 rounded-lg hover:bg-blue-700"
+            >
+              {
+                current === questions.length - 1
+                  ? "Finish Quiz"
+                  : "Next Question"
+              }
+            </button>
+
+          </div>
+
+        )}
+
+      </motion.div>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/AnalyticsScripts.jsx b/src/app/components/AnalyticsScripts.jsx
new file mode 100644
index 000000000..bb96575d3
--- /dev/null
+++ b/src/app/components/AnalyticsScripts.jsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Script from "next/script";
+import {
+    hasAnalyticsConsent,
+    hasMarketingConsent,
+    CONSENT_UPDATED_EVENT,
+} from "@/lib/cookieConsent";
+
+export default function AnalyticsScripts({ gaId, adsenseClientId }) {
+    const [analyticsAllowed, setAnalyticsAllowed] = useState(false);
+    const [marketingAllowed, setMarketingAllowed] = useState(false);
+
+    useEffect(() => {
+    const syncConsent = () => {
+        setAnalyticsAllowed(hasAnalyticsConsent());
+        setMarketingAllowed(hasMarketingConsent());
+    };
+        syncConsent();
+        window.addEventListener(CONSENT_UPDATED_EVENT, syncConsent);
+        window.addEventListener("storage", syncConsent);
+        return () => {
+        window.removeEventListener(CONSENT_UPDATED_EVENT, syncConsent);
+        window.removeEventListener("storage", syncConsent);
+    };
+    }, []);
+
+    return (
+    <>
+        {marketingAllowed && adsenseClientId && (
+        <Script
+            async
+            src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${adsenseClientId}`}
+            crossOrigin="anonymous"
+            strategy="afterInteractive"
+        />
+        )}
+        {analyticsAllowed && gaId && (
+        <>
+            <Script
+            src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
+            strategy="afterInteractive"
+            />
+            <Script id="google-analytics" strategy="afterInteractive">
+            {`
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+                gtag('config', '${gaId}', {
+                page_path: window.location.pathname,
+                });
+                `}
+            </Script>
+        </>
+        )}
+    </>
+    );
+}
\ No newline at end of file
diff --git a/src/app/components/BottomNav.jsx b/src/app/components/BottomNav.jsx
new file mode 100644
index 000000000..5cac8d76e
--- /dev/null
+++ b/src/app/components/BottomNav.jsx
@@ -0,0 +1,60 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Home, PlayCircle, Dumbbell, Swords } from "lucide-react";
+
+const BOTTOM_NAV_LINKS = [
+  { href: "/", label: "Home", icon: Home },
+  { href: "/visualizer", label: "Visualizer", icon: PlayCircle },
+  { href: "/practice", label: "Practice", icon: Dumbbell },
+  { href: "/arena", label: "Arena", icon: Swords },
+];
+
+export default function BottomNav() {
+  const pathname = usePathname();
+
+  const isActive = (href) => {
+    if (!pathname) return false;
+    if (href === "/") return pathname === "/";
+    return pathname === href || pathname.startsWith(href + "/");
+  };
+
+  return (
+    <nav
+      className="fixed bottom-0 left-0 right-0 z-[9998] md:hidden bg-white dark:bg-udemy-dark-bg border-t border-surface-200 dark:border-udemy-dark-border"
+      aria-label="Mobile bottom navigation"
+    >
+      <div className="flex items-stretch h-[60px]" role="tablist" aria-label="Navigation tabs">
+        {BOTTOM_NAV_LINKS.map(({ href, label, icon: Icon }) => {
+          const active = isActive(href);
+          return (
+            <Link
+              key={href}
+              href={href}
+              aria-label={label}
+              aria-current={active ? "page" : undefined}
+              role="tab"
+              tabIndex={active ? 0 : -1}
+              className={`flex flex-col items-center justify-center flex-1 gap-1 text-[10px] font-semibold transition-colors duration-150 focus-ring ${
+                active
+                  ? "text-primary"
+                  : "text-surface-400 dark:text-surface-500 hover:text-surface-700 dark:hover:text-surface-300"
+              }`}
+            >
+              <Icon
+                className={`w-5 h-5 transition-transform duration-150 ${active ? "scale-110" : ""}`}
+                strokeWidth={active ? 2.5 : 1.8}
+                aria-hidden="true"
+              />
+              <span>{label}</span>
+            </Link>
+          );
+        })}
+      </div>
+
+      {/* Safe area spacer for phones with home indicator (iOS etc.) */}
+      <div className="h-[env(safe-area-inset-bottom)]" />
+    </nav>
+  );
+}
diff --git a/src/app/components/CodeExecutionPanel.jsx b/src/app/components/CodeExecutionPanel.jsx
new file mode 100644
index 000000000..c96329016
--- /dev/null
+++ b/src/app/components/CodeExecutionPanel.jsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import PlaybackTimeline from "./PlaybackTimeline";
+
+const codeExamples = {
+  JavaScript: [
+    "function linearSearch(arr, target) {",
+    "  for(let i = 0; i < arr.length; i++) {",
+    "    if(arr[i] === target) return i;",
+    "  }",
+    "  return -1;",
+    "}",
+  ],
+  Python: [
+    "def linear_search(arr, target):",
+    "    for i in range(len(arr)):",
+    "        if arr[i] == target:",
+    "            return i",
+    "    return -1",
+  ],
+};
+
+// Maps each language's algorithm phase to its matching source line index
+const lineMap = {
+  JavaScript: { loop: 1, check: 2, found: 2, notFound: 4 },
+  Python: { loop: 1, check: 2, found: 3, notFound: 4 },
+};
+
+const demoArray = [5, 3, 8, 4, 9, 1];
+const target = 4;
+
+function generateTrace(arr, target, lang) {
+  const map = lineMap[lang];
+  const trace = [];
+
+  for (let i = 0; i < arr.length; i++) {
+    trace.push({ line: map.loop, index: i, status: "checking" });
+
+    if (arr[i] === target) {
+      trace.push({ line: map.found, index: i, status: "found" });
+      return trace;
+    }
+
+    trace.push({ line: map.check, index: i, status: "compare" });
+  }
+
+  trace.push({ line: map.notFound, index: -1, status: "notfound" });
+  return trace;
+}
+
+export default function CodeExecutionPanel() {
+  const [language, setLanguage] = useState("JavaScript");
+  const [currentStep, setCurrentStep] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const trace = useMemo(
+    () => generateTrace(demoArray, target, language),
+    [language]
+  );
+
+  const totalSteps = trace.length - 1;
+  const safeStep = Math.min(currentStep, totalSteps);
+  const { line: currentLine, index: activeIndex, status } = trace[safeStep];
+
+  // Autoplay logic
+  useEffect(() => {
+    if (!isPlaying) return;
+
+    if (currentStep >= totalSteps) {
+      setIsPlaying(false);
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setCurrentStep((prev) => Math.min(prev + 1, totalSteps));
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, [isPlaying, currentStep, totalSteps]);
+
+  const reset = () => {
+    setCurrentStep(0);
+    setIsPlaying(false);
+  };
+
+  return (
+    <div className="p-5">
+      <div className="grid md:grid-cols-2 gap-5">
+        {/* Code Side */}
+        <div className="bg-black text-white p-4 rounded-lg">
+          <div className="flex justify-between mb-3">
+            <h2 className="font-bold">Source Code</h2>
+
+            <select
+              className="text-black rounded px-2"
+              value={language}
+              onChange={(e) => {
+                setLanguage(e.target.value);
+                reset();
+              }}
+            >
+              <option>JavaScript</option>
+              <option>Python</option>
+            </select>
+          </div>
+
+          <pre>
+            {codeExamples[language].map((line, index) => (
+              <div
+                key={index}
+                className={`px-2 py-1 rounded ${
+                  index === currentLine ? "bg-yellow-500 text-black" : ""
+                }`}
+              >
+                {index + 1}. {line}
+              </div>
+            ))}
+          </pre>
+        </div>
+
+        {/* Visualization Side */}
+        <div className="bg-gray-100 dark:bg-gray-800 p-5 rounded-lg">
+          <h2 className="font-bold mb-3">Algorithm Visualization</h2>
+
+          <p className="text-sm mb-4 text-gray-600 dark:text-gray-300">
+            Searching for <strong>{target}</strong> in the array
+          </p>
+
+          <div className="flex gap-2 justify-center flex-wrap">
+            {demoArray.map((value, index) => {
+              let boxColor = "bg-gray-300 dark:bg-gray-600";
+
+              if (index === activeIndex && status === "found") {
+                boxColor = "bg-green-500 text-white";
+              } else if (index === activeIndex) {
+                boxColor = "bg-yellow-400 text-black";
+              } else if (index < activeIndex) {
+                boxColor = "bg-red-200 dark:bg-red-800";
+              }
+
+              return (
+                <div key={index} className="flex flex-col items-center">
+                  <div
+                    className={`w-12 h-12 flex items-center justify-center rounded font-semibold ${boxColor}`}
+                  >
+                    {value}
+                  </div>
+                  <span className="text-xs mt-1 text-gray-500">{index}</span>
+                </div>
+              );
+            })}
+          </div>
+
+          {status === "found" && (
+            <p className="text-center mt-4 text-green-600 font-medium">
+              ✅ Found {target} at index {activeIndex}!
+            </p>
+          )}
+          {status === "notfound" && (
+            <p className="text-center mt-4 text-red-600 font-medium">
+              ❌ {target} not found in array.
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Playback Controls */}
+      <PlaybackTimeline
+        currentStep={safeStep}
+        totalSteps={totalSteps}
+        setCurrentStep={setCurrentStep}
+        onPlay={() => setIsPlaying(true)}
+        onPause={() => setIsPlaying(false)}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/CodeOfConductContent.jsx b/src/app/components/CodeOfConductContent.jsx
new file mode 100644
index 000000000..55536191e
--- /dev/null
+++ b/src/app/components/CodeOfConductContent.jsx
@@ -0,0 +1,87 @@
+import { codeOfConductSections } from "@/app/data/codeOfConductData";
+import Link from "next/link";
+
+export default function CodeOfConductContent() {
+  return (
+    <>
+      <p className="mb-8 text-gray-700 dark:text-gray-300 leading-relaxed text-base">
+        This Code of Conduct outlines the standards of behavior expected from
+        all users and contributors of our platform. It explains our commitment
+        to creating a respectful, inclusive, and collaborative environment,
+        along with the responsibilities, reporting process, and actions taken to
+        maintain a positive community experience.
+      </p>
+
+      <div className="grid gap-8 lg:grid-cols-[250px_1fr] items-start">
+        <aside className="sticky top-20 hidden lg:block">
+          <h2 className="mb-6 text-sm font-bold uppercase tracking-wider text-gray-900 dark:text-white">
+            Contents
+          </h2>
+          <ul className="space-y-3 border-l border-gray-200 dark:border-[#2A2A35]">
+            {codeOfConductSections.map((item) => (
+              <li key={item.id}>
+                <a
+                  href={`#section-${item.id}`}
+                  className="block pl-4 py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white border-l-2 border-transparent hover:border-gray-400 dark:hover:border-gray-400 transition-all duration-200"
+                >
+                  {item.title}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </aside>
+
+        <div className="space-y-8">
+          {codeOfConductSections.map((item) => (
+            <section
+              key={item.id}
+              id={`section-${item.id}`}
+              className="scroll-mt-24 pb-10 border-b border-gray-200 dark:border-[#2A2A35]"
+            >
+              <h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-4">
+                {item.title}
+              </h2>
+
+              {item.points && (
+                <ul className="space-y-2 text-gray-600 dark:text-gray-400 pl-6 mb-4">
+                  {item.points.map((point) => (
+                    <li key={point} className="list-disc pl-1">
+                      {point}
+                    </li>
+                  ))}
+                </ul>
+              )}
+
+              {item.data && (
+                <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                  {item.data}
+                </p>
+              )}
+
+              {item.contact && (
+                <p className="mt-4 text-gray-600 dark:text-gray-400 leading-relaxed">
+                  <a
+                    href={`mailto:${item.contact}`}
+                    className="text-gray-900 dark:text-white font-medium transition-colors">
+                  
+                    {item.contact}
+                  </a>
+                </p>
+              )}
+            </section>
+          ))}
+        </div>
+      </div>
+
+      <div className="pt-8 flex items-center justify-between">
+        <p className="text-sm text-gray-500 dark:text-gray-400">Last updated: May 17, 2025</p>
+        <Link
+          href="/"
+          className="px-6 py-3 bg-black text-white dark:bg-white dark:text-black font-semibold rounded-full hover:opacity-90 transition-all duration-200 active:scale-95"
+        >
+          Accept &amp; Continue
+        </Link>
+      </div>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/CodeOfConductModal.jsx b/src/app/components/CodeOfConductModal.jsx
new file mode 100644
index 000000000..c4af0391f
--- /dev/null
+++ b/src/app/components/CodeOfConductModal.jsx
@@ -0,0 +1,182 @@
+import React, { useEffect } from "react";
+import { FiX } from "react-icons/fi";
+
+const codeOfConductSections = [
+  {
+    id: "1",
+    title: "Our Pledge",
+    points: [
+      "We as contributors and maintainers pledge to make participation in this project a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.",
+      "We are committed to creating an open, welcoming, inclusive, and respectful environment for everyone.",
+    ],
+  },
+  {
+    id: "2",
+    title: "Our Standards",
+    points: [
+      "Being respectful and inclusive",
+      "Using welcoming and constructive language",
+      "Respecting differing viewpoints and experiences",
+      "Gracefully accepting constructive criticism",
+      "Helping other contributors and community members",
+      "Harassment or discriminatory language",
+      "Personal attacks or trolling",
+      "Public or private harassment",
+      "Publishing others’ private information without permission",
+      "Any conduct that could be considered inappropriate in a professional setting",
+    ],
+  },
+  {
+    id: "3",
+    title: "Contributor Responsibilities",
+    data: "Contributors are expected to:",
+    points: [
+      "Follow project guidelines",
+      "Maintain respectful communication",
+      "Focus on collaboration and learning",
+      "Report inappropriate behavior if encountered",
+    ],
+  },
+  {
+    id: "4",
+    title: "Enforcement",
+    data: "Project maintainers are responsible for clarifying and enforcing standards of acceptable behavior and may take appropriate corrective action in response to any instances of unacceptable behavior.",
+  },
+  {
+    id: "5",
+    title: "Reporting Issues",
+    data: "If you experience or witness unacceptable behavior, please report it to the project maintainers through the repository issue section or the official project contact channels. All complaints will be reviewed and investigated promptly and fairly.",
+  },
+  {
+    id: "6",
+    title: "Your Choices",
+    data: "This Code of Conduct applies within all project spaces, including:",
+    points: [
+      "GitHub repositories",
+      "Discussions",
+      "Pull requests",
+      "Community chats",
+      "Social platforms related to the project",
+    ],
+  },
+  {
+    id: "7",
+    title: "Attribution",
+    data: "This Code of Conduct is inspired by the Contributor Covenant, version 2.1.",
+  },
+];
+
+const CodeOfConductModal = ({ isOpen, onClose }) => {
+  useEffect(() => {
+    document.body.style.overflow = isOpen ? "hidden" : "auto";
+
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/70 backdrop-blur-sm"
+        onClick={onClose}
+      />
+
+      {/* Modal */}
+      <div className="relative max-w-3xl w-full max-h-[90vh] flex flex-col overflow-hidden rounded-2xl border border-[#2A2A35] bg-[#0F0F14] text-white shadow-2xl">
+        {/* Header */}
+        <div className="sticky top-0 z-10 flex items-center justify-between border-b border-[#2A2A35] bg-[#0F0F14] p-4">
+          <h2 className="text-xl font-semibold text-white">Code Of Conduct</h2>
+
+          <button
+            onClick={onClose}
+            className="rounded-md border border-[#2A2A35] p-1.5 text-gray-300 transition-colors hover:bg-[#1A1A22]"
+            aria-label="Close"
+          >
+            <FiX className="h-6 w-6" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="overflow-y-auto p-6">
+          <p className="mb-6 leading-relaxed text-gray-300">
+            This Code of Conduct outlines the standards of behavior expected
+            from all users and contributors of our platform. It explains our
+            commitment to creating a respectful, inclusive, and collaborative
+            environment, along with the responsibilities, reporting process, and
+            actions taken to maintain a positive community experience.
+          </p>
+
+          <div className="space-y-6">
+            <ul>
+              {codeOfConductSections.map((item, index) => (
+                <li key={index} className="mb-4">
+                  <div className="rounded-xl border border-[#2A2A35] bg-[#14141A] p-5 transition-all duration-300 hover:border-gray-400/40">
+                    <div className="flex items-start">
+                      <span className="mr-3 mt-0.5 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-gray-100 font-semibold text-gray-400">
+                        {item.id}
+                      </span>
+
+                      <h3 className="mb-2 text-xl font-bold text-white">
+                        {item.title}
+                      </h3>
+                    </div>
+
+                    {item.points && (
+                      <ul className="mb-2 space-y-2 pl-9 text-gray-300">
+                        {item.points.map((subitem, subindex) => (
+                          <li
+                            key={subindex}
+                            className="list-disc pl-1 leading-relaxed text-gray-300"
+                          >
+                            {subitem}
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+
+                    {item.data && (
+                      <p className="pl-9 leading-relaxed text-gray-300">
+                        {item.data}
+                      </p>
+                    )}
+
+                    {item.contact && (
+                      <div className="mt-2 pl-9">
+                        <a
+                          href={`mailto:${item.contact}`}
+                          className="font-medium text-gray-400 hover:text-gray-300 hover:underline"
+                        >
+                          {item.contact}
+                        </a>
+                      </div>
+                    )}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="mt-8 border-t border-[#2A2A35] pt-4">
+            <p className="text-xs text-gray-400">Last updated: May 17, 2025</p>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="sticky bottom-0 flex justify-end border-t border-[#2A2A35] bg-[#0F0F14] p-4">
+          <button
+            onClick={onClose}
+            className="rounded-full bg-white px-6 py-2.5 text-sm font-semibold text-black transition-all duration-200 hover:bg-gray-200 active:scale-95"
+          >
+            Accept & Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CodeOfConductModal;
diff --git a/src/app/components/CodePanel.jsx b/src/app/components/CodePanel.jsx
new file mode 100644
index 000000000..8f962f5db
--- /dev/null
+++ b/src/app/components/CodePanel.jsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { useState } from "react";
+
+export default function CodePanel({
+  code,
+  currentLine = -1,
+  language,
+  onLanguageChange,
+}) {
+  const [collapsed, setCollapsed] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const languages = Object.keys(code);
+  const lines = code[language] || [];
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(lines.join("\n"));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch (err) {
+      console.error("Copy failed", err);
+    }
+  };
+
+  return (
+    <div className="bg-black text-white rounded-lg overflow-hidden border border-gray-700">
+      <div className="flex items-center justify-between px-4 py-2 bg-[#161616] border-b border-gray-700">
+        <div className="flex items-center gap-3">
+          <h2 className="font-semibold text-sm">Code Panel</h2>
+
+          {languages.length > 1 && (
+            <select
+              className="text-black text-xs rounded px-1 py-0.5"
+              value={language}
+              onChange={(e) => onLanguageChange?.(e.target.value)}
+            >
+              {languages.map((lang) => (
+                <option key={lang}>{lang}</option>
+              ))}
+            </select>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            onClick={handleCopy}
+            className="text-xs px-2 py-1 rounded bg-gray-700 hover:bg-gray-600 transition"
+          >
+            {copied ? "Copied!" : "Copy"}
+          </button>
+          <button
+            onClick={() => setCollapsed((prev) => !prev)}
+            className="text-xs px-2 py-1 rounded bg-gray-700 hover:bg-gray-600 transition"
+          >
+            {collapsed ? "Expand" : "Collapse"}
+          </button>
+        </div>
+      </div>
+
+      {!collapsed && (
+        <pre className="p-4 overflow-x-auto text-sm leading-relaxed">
+          {lines.map((line, index) => (
+            <div
+              key={index}
+              className={`px-2 py-0.5 rounded whitespace-pre ${
+                index === currentLine ? "bg-yellow-500 text-black" : ""
+              }`}
+            >
+              <span className="inline-block w-6 text-gray-500 select-none">
+                {index + 1}
+              </span>
+              {line}
+            </div>
+          ))}
+        </pre>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/components/CodingProfilesModal.jsx b/src/app/components/CodingProfilesModal.jsx
new file mode 100644
index 000000000..eab33e0a6
--- /dev/null
+++ b/src/app/components/CodingProfilesModal.jsx
@@ -0,0 +1,294 @@
+
+
+import { useState, useEffect } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Github, Save, X, RefreshCw, ExternalLink } from "lucide-react";
+import toast from "react-hot-toast";
+import { supabase } from "@/lib/supabase";
+import { useUser } from "@/features/user/UserContext";
+
+function LeetCodeIcon() {
+  return (
+    <svg className="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
+      <path
+        fill="#f59e0b"
+        d="M14.5 4.2 7.1 11.6a1.7 1.7 0 0 0 0 2.4l3.5 3.5a1.7 1.7 0 0 0 2.4 0l2.1-2.1a1.2 1.2 0 1 1 1.7 1.7l-2.1 2.1a4.1 4.1 0 0 1-5.8 0l-3.5-3.5a4.1 4.1 0 0 1 0-5.8l7.4-7.4a1.2 1.2 0 0 1 1.7 1.7Z"
+      />
+      <path fill="#111827" d="M10.5 12.2h8.1a1.2 1.2 0 1 1 0 2.4h-8.1a1.2 1.2 0 1 1 0-2.4Z" />
+    </svg>
+  );
+}
+
+function CodeforcesIcon() {
+  return (
+    <svg className="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
+      <rect x="4" y="10" width="4" height="10" rx="1" fill="#2563eb" />
+      <rect x="10" y="5" width="4" height="15" rx="1" fill="#ef4444" />
+      <rect x="16" y="8" width="4" height="12" rx="1" fill="#f59e0b" />
+    </svg>
+  );
+}
+
+function CodeChefIcon() {
+  return (
+    <svg className="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
+      <path
+        fill="#8b5e34"
+        d="M7.1 14.6c-1.3-1.3-1.2-3.5.2-5l3.1-3.1c1.4-1.4 3.6-1.5 5-.2 1.2 1.2 1.2 3.3-.2 4.7l-3.3 3.3c-1.4 1.5-3.5 1.6-4.8.3Z"
+      />
+      <path
+        fill="#f3c17a"
+        d="M9.2 16.7a7 7 0 1 0 5.6-12.8 7 7 0 0 0-5.6 12.8Zm2.6-2.4a2.5 2.5 0 1 1 .4-5 2.5 2.5 0 0 1-.4 5Z"
+      />
+    </svg>
+  );
+}
+
+const PLATFORMS = [
+  {
+    key: "leetcode",
+    label: "LeetCode",
+    usernameField: "leetcode_username",
+    statField: "leetcode_solved",
+    statLabel: "Solved",
+    placeholder: "your-leetcode-username",
+    Icon: LeetCodeIcon,
+    profileUrl: (u) => `https://leetcode.com/${u}`,
+  },
+  {
+    key: "codeforces",
+    label: "Codeforces",
+    usernameField: "codeforces_username",
+    statField: "codeforces_rating",
+    statLabel: "Rating",
+    placeholder: "your-cf-handle",
+    Icon: CodeforcesIcon,
+    profileUrl: (u) => `https://codeforces.com/profile/${u}`,
+  },
+  {
+    key: "codechef",
+    label: "CodeChef",
+    usernameField: "codechef_username",
+    statField: "codechef_stars",
+    statLabel: "Stars",
+    placeholder: "your-codechef-username",
+    Icon: CodeChefIcon,
+    profileUrl: (u) => `https://www.codechef.com/users/${u}`,
+  },
+  {
+    key: "github",
+    label: "GitHub",
+    usernameField: "github_username",
+    statField: "github_contributions",
+    statLabel: "Public Repos",
+    placeholder: "your-github-username",
+    Icon: Github,
+    iconClass: "h-5 w-5 text-slate-900 dark:text-white",
+    profileUrl: (u) => `https://github.com/${u}`,
+  },
+];
+
+export default function CodingProfilesModal({ isOpen, onClose }) {
+  const { user, setUser } = useUser();
+  const meta = user?.user_metadata || {};
+
+  // Reset state when modal opens to reflect latest user metadata
+  useEffect(() => {
+    if (isOpen) {
+      setUsernames({
+        leetcode_username: meta.leetcode_username || "",
+        codeforces_username: meta.codeforces_username || "",
+        codechef_username: meta.codechef_username || "",
+        github_username: meta.github_username || "",
+      });
+      setStats({
+        leetcode_solved: meta.leetcode_solved || 0,
+        codeforces_rating: meta.codeforces_rating || 0,
+        codechef_stars: meta.codechef_stars || 0,
+        github_contributions: meta.github_contributions || 0,
+      });
+    }
+  }, [isOpen, meta]);
+
+  const [usernames, setUsernames] = useState({
+    leetcode_username: meta.leetcode_username || "",
+    codeforces_username: meta.codeforces_username || "",
+    codechef_username: meta.codechef_username || "",
+    github_username: meta.github_username || "",
+  });
+
+  const [stats, setStats] = useState({
+    leetcode_solved: meta.leetcode_solved || 0,
+    codeforces_rating: meta.codeforces_rating || 0,
+    codechef_stars: meta.codechef_stars || 0,
+    github_contributions: meta.github_contributions || 0,
+  });
+
+  const [fetching, setFetching] = useState({});
+  const [saving, setSaving] = useState(false);
+
+  const handleUsernameChange = (field, value) => {
+    setUsernames((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const fetchStats = async (platformKey) => {
+    const platform = PLATFORMS.find((p) => p.key === platformKey);
+    const username = usernames[platform.usernameField]?.trim();
+
+    if (!username) {
+      toast.error(`Enter a ${platform.label} username first`);
+      return;
+    }
+
+    setFetching((prev) => ({ ...prev, [platformKey]: true }));
+
+    try {
+      const res = await fetch(`/api/coding-profiles/fetch?platform=${platformKey}&username=${encodeURIComponent(username)}`);
+      const data = await res.json();
+
+      if (!res.ok) throw new Error(data.error || "Failed to fetch stats");
+
+      setStats((prev) => ({ ...prev, [platform.statField]: data.value }));
+      toast.success(`${platform.label} stats updated`);
+    } catch (err) {
+      toast.error(err.message || `Could not fetch ${platform.label} stats`);
+    } finally {
+      setFetching((prev) => ({ ...prev, [platformKey]: false }));
+    }
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      const updatedMeta = { ...meta, ...usernames, ...stats };
+      const { data, error } = await supabase.auth.updateUser({ data: updatedMeta });
+      if (error) throw error;
+      setUser(data.user);
+      toast.success("Coding profiles saved");
+      onClose();
+    } catch (err) {
+      console.error(err);
+      toast.error("Failed to save coding profiles");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          className="fixed inset-0 z-[10000] flex items-center justify-center bg-slate-950/60 p-4 backdrop-blur-sm dark:bg-black/80"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          onClick={onClose}
+        >
+          <motion.div
+            onClick={(e) => e.stopPropagation()}
+            className="w-full max-w-lg overflow-hidden rounded-2xl bg-white shadow-2xl dark:border dark:border-neutral-800 dark:bg-neutral-900"
+            initial={{ y: 20, opacity: 0, scale: 0.98 }}
+            animate={{ y: 0, opacity: 1, scale: 1 }}
+            exit={{ y: 20, opacity: 0, scale: 0.98 }}
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between border-b border-slate-100 px-6 py-4 dark:border-neutral-800">
+              <div>
+                <h2 className="text-xl font-black text-[#111331] dark:text-white">Coding Profiles</h2>
+                <p className="text-sm font-semibold text-slate-500 dark:text-neutral-400">
+                  Add your usernames and fetch live stats.
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={onClose}
+                className="rounded-lg p-2 text-slate-500 hover:bg-slate-100 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white"
+                aria-label="Close"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            {/* Platform rows */}
+            <div className="divide-y divide-slate-100 px-6 dark:divide-neutral-800">
+              {PLATFORMS.map((platform) => {
+                const { key, label, usernameField, statField, statLabel, placeholder, Icon, iconClass, profileUrl } = platform;
+                const username = usernames[usernameField];
+                const stat = stats[statField];
+                const isFetching = fetching[key];
+
+                return (
+                  <div key={key} className="py-4">
+                    <div className="mb-2 flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <Icon className={iconClass} />
+                        <span className="text-sm font-black text-[#111331] dark:text-white">{label}</span>
+                        {stat > 0 && (
+                          <span className="rounded-full bg-violet-50 px-2 py-0.5 text-[11px] font-black text-violet-600 dark:bg-violet-950/40 dark:text-violet-300">
+                            {stat} {statLabel}
+                          </span>
+                        )}
+                      </div>
+                      {username && (
+                        <a
+                          href={profileUrl(username)}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="flex items-center gap-1 text-[11px] font-bold text-slate-400 hover:text-violet-600 dark:text-neutral-500 dark:hover:text-violet-300"
+                        >
+                          View profile <ExternalLink className="h-3 w-3" />
+                        </a>
+                      )}
+                    </div>
+                    <div className="flex gap-2">
+                      <input
+                        type="text"
+                        value={username}
+                        onChange={(e) => handleUsernameChange(usernameField, e.target.value)}
+                        placeholder={placeholder}
+                        className="h-10 flex-1 rounded-xl border border-slate-200 bg-white px-3 text-sm font-semibold text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-100 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100 dark:placeholder:text-neutral-600 dark:focus:border-violet-400 dark:focus:ring-violet-950/60"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => fetchStats(key)}
+                        disabled={isFetching || !username.trim()}
+                        className="flex h-10 items-center gap-1.5 rounded-xl border border-slate-200 px-3 text-xs font-black text-slate-600 transition hover:border-violet-300 hover:bg-violet-50 hover:text-violet-700 disabled:cursor-not-allowed disabled:opacity-40 dark:border-neutral-700 dark:text-neutral-300 dark:hover:border-violet-700 dark:hover:bg-violet-950/40 dark:hover:text-violet-300"
+                      >
+                        <RefreshCw className={`h-3.5 w-3.5 ${isFetching ? "animate-spin" : ""}`} />
+                        {isFetching ? "Fetching..." : "Fetch"}
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Footer */}
+            <div className="flex items-center justify-end gap-3 border-t border-slate-100 bg-slate-50 px-6 py-4 dark:border-neutral-800 dark:bg-neutral-950/60">
+              <button
+                type="button"
+                onClick={onClose}
+                className="rounded-xl border border-slate-200 px-5 py-2.5 text-sm font-black text-slate-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleSave}
+                disabled={saving}
+                className="inline-flex items-center gap-2 rounded-xl bg-violet-600 px-5 py-2.5 text-sm font-black text-white shadow-lg shadow-violet-200 disabled:opacity-60 dark:bg-violet-500 dark:shadow-none"
+              >
+                {saving ? (
+                  <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white" />
+                ) : (
+                  <Save className="h-4 w-4" />
+                )}
+                {saving ? "Saving..." : "Save Profiles"}
+              </button>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/CommandPalette.jsx b/src/app/components/CommandPalette.jsx
new file mode 100644
index 000000000..bc95cc306
--- /dev/null
+++ b/src/app/components/CommandPalette.jsx
@@ -0,0 +1,325 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import { Search, Code, FileText, BookOpen, LayoutDashboard, X } from "lucide-react";
+import { SEARCH_INDEX, CATEGORIES } from "@/app/components/commandPaletteIndex";
+import { supabase } from "@/lib/supabase";
+import FocusTrap from "@/app/components/ui/FocusTrap";
+
+// ── Icon mapping per category ────────────────────────────────────────────────
+const CATEGORY_ICON = {
+  "Code Lab":    Code,
+  "Array":       Code,
+  "Recursion":   Code,
+  "Stack":       Code,
+  "Queue":       Code,
+  "Linked List": Code,
+  "Tree":        Code,
+  "Graph":       Code,
+  "Hash Map":    Code,
+  "Blog":        FileText,
+  "Page":        LayoutDashboard,
+};
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+/** Bold the portion of `text` that matches `query` */
+function Highlighted({ text, query }) {
+  if (!query.trim()) return <span>{text}</span>;
+  const idx = text.toLowerCase().indexOf(query.toLowerCase());
+  if (idx === -1) return <span>{text}</span>;
+  return (
+    <span>
+      {text.slice(0, idx)}
+      <mark className="bg-[#a435f0]/20 text-[#a435f0] rounded-[2px] px-[1px] not-italic font-semibold">
+        {text.slice(idx, idx + query.length)}
+      </mark>
+      {text.slice(idx + query.length)}
+    </span>
+  );
+}
+
+/** Filter SEARCH_INDEX by query string */
+function filterResults(query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return SEARCH_INDEX.slice(0, 8);                    // default: top 8
+  return SEARCH_INDEX.filter(
+    (item) =>
+      item.name.toLowerCase().includes(q) ||
+      item.category.toLowerCase().includes(q)
+  ).slice(0, 20);
+}
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export function CommandPalette() {
+  const [isOpen, setIsOpen]         = useState(false);
+  const [query, setQuery]           = useState("");
+  const [selectedIdx, setSelected]  = useState(0);
+  const [supabaseBlogResults, setSupabaseBlogResults] = useState([]);
+  const [isSearchingSupabase, setIsSearchingSupabase] = useState(false);
+  
+  const inputRef                    = useRef(null);
+  const listRef                     = useRef(null);
+  const router                      = useRouter();
+
+  const staticResults = filterResults(query);
+
+  // Merge static results and supabase results, avoiding duplicates by path
+  const results = useMemo(() => {
+    if (!query.trim()) return staticResults;
+    const merged = [...staticResults];
+    for (const post of supabaseBlogResults) {
+      if (!merged.some((item) => item.path === post.path)) {
+        merged.push(post);
+      }
+    }
+    return merged.slice(0, 20);
+  }, [staticResults, supabaseBlogResults, query]);
+
+  // Debounced Supabase search for blog posts
+  useEffect(() => {
+    const q = query.trim();
+    if (!q) {
+      setSupabaseBlogResults([]);
+      return;
+    }
+
+    const delayDebounce = setTimeout(async () => {
+      setIsSearchingSupabase(true);
+      try {
+        const { data, error } = await supabase
+          .from("blog_posts")
+          .select("title, slug")
+          .textSearch("title", q, { type: "websearch" })
+          .limit(5);
+
+        if (!error && data) {
+          const mapped = data.map((post) => ({
+            name: post.title,
+            path: `/blog/${post.slug}`,
+            category: "Blog",
+          }));
+          setSupabaseBlogResults(mapped);
+        } else {
+          setSupabaseBlogResults([]);
+        }
+      } catch (err) {
+        console.error("Supabase blog search error:", err);
+        setSupabaseBlogResults([]);
+      } finally {
+        setIsSearchingSupabase(false);
+      }
+    }, 250);
+
+    return () => clearTimeout(delayDebounce);
+  }, [query]);
+
+  // ── Open / close keyboard shortcut & custom event ─────────────────────────
+  useEffect(() => {
+    function onKey(e) {
+      if ((e.ctrlKey || e.metaKey) && e.key === "k") {
+        e.preventDefault();
+        setIsOpen((prev) => !prev);
+      }
+      if (e.key === "Escape") setIsOpen(false);
+    }
+    function onOpenEvent() {
+      setIsOpen(true);
+    }
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("open-command-palette", onOpenEvent);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("open-command-palette", onOpenEvent);
+    };
+  }, []);
+
+  // ── Focus input when opened; reset state ──────────────────────────────────
+  useEffect(() => {
+    if (isOpen) {
+      setQuery("");
+      setSelected(0);
+      // nextTick to let dialog render first
+      setTimeout(() => inputRef.current?.focus(), 10);
+    }
+  }, [isOpen]);
+
+  // ── Scroll selected item into view ────────────────────────────────────────
+  useEffect(() => {
+    const el = listRef.current?.children[selectedIdx];
+    el?.scrollIntoView({ block: "nearest" });
+  }, [selectedIdx]);
+
+  // ── Navigate to selected item ─────────────────────────────────────────────
+  const handleSelect = useCallback(
+    (item) => {
+      setIsOpen(false);
+      router.push(item.path);
+    },
+    [router]
+  );
+
+  // ── Arrow-key / Enter navigation inside the input ─────────────────────────
+  function handleInputKeyDown(e) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelected((i) => Math.min(i + 1, results.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelected((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter") {
+      if (results[selectedIdx]) handleSelect(results[selectedIdx]);
+    }
+  }
+
+  if (!isOpen) return null;
+
+  // ── Build grouped results ─────────────────────────────────────────────────
+  const grouped = CATEGORIES.reduce((acc, cat) => {
+    const items = results.filter((r) => r.category === cat);
+    if (items.length) acc.push({ cat, items });
+    return acc;
+  }, []);
+
+  return (
+    <FocusTrap active={isOpen} onEscape={() => setIsOpen(false)}>
+    /* Overlay */
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label="Command palette — search AlgoBuddy"
+      className="fixed inset-0 z-[9999] flex items-start justify-center pt-[15vh] px-4"
+    >
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/50 backdrop-blur-sm"
+        aria-hidden="true"
+        onClick={() => setIsOpen(false)}
+      />
+
+      {/* Palette card */}
+      <div className="relative w-full max-w-lg rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-neutral-900 shadow-2xl overflow-hidden flex flex-col max-h-[70vh]">
+
+        {/* ── Search input row ── */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+          <Search
+            size={18}
+            className="shrink-0 text-gray-400 dark:text-gray-500"
+            aria-hidden="true"
+          />
+          <input
+            ref={inputRef}
+            type="text"
+            role="combobox"
+            aria-autocomplete="list"
+            aria-expanded={results.length > 0}
+            aria-controls="command-palette-listbox"
+            aria-activedescendant={results[selectedIdx] ? `cp-item-${selectedIdx}` : undefined}
+            value={query}
+            onChange={(e) => { setQuery(e.target.value); setSelected(0); }}
+            onKeyDown={handleInputKeyDown}
+            placeholder="Search visualizers, pages, tutorials…"
+            className="flex-1 bg-transparent outline-none text-sm text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500"
+            aria-label="Search AlgoBuddy"
+            autoComplete="off"
+            spellCheck={false}
+          />
+          {/* Escape hint */}
+          <kbd
+            className="hidden sm:inline-flex items-center gap-1 text-[10px] font-mono px-1.5 py-0.5 rounded border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-neutral-800 text-gray-500 dark:text-gray-400 select-none"
+            aria-label="Press Escape to close"
+          >
+            ESC
+          </kbd>
+          <button
+            type="button"
+            onClick={() => setIsOpen(false)}
+            aria-label="Close search"
+            className="sm:hidden p-1 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#a435f0]"
+          >
+            <X size={16} aria-hidden="true" />
+          </button>
+        </div>
+
+        {/* ── Results ── */}
+        <div
+          id="command-palette-listbox"
+          role="listbox"
+          aria-label="Search results"
+          ref={listRef}
+          className="overflow-y-auto p-2 flex-1"
+        >
+          {results.length === 0 ? (
+            <p className="text-center text-sm text-gray-400 dark:text-gray-500 py-8">
+              No results for <strong className="text-gray-600 dark:text-gray-300">"{query}"</strong>
+            </p>
+          ) : (
+            grouped.map(({ cat, items }) => {
+              const Icon = CATEGORY_ICON[cat] ?? Code;
+              return (
+                <div key={cat} className="mb-2">
+                  {/* Category heading */}
+                  <p className="px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-gray-400 dark:text-gray-500 select-none">
+                    {cat}
+                  </p>
+
+                  {items.map((item) => {
+                    const globalIdx = results.indexOf(item);
+                    const isSelected = globalIdx === selectedIdx;
+
+                    return (
+                      <button
+                        key={item.path}
+                        id={`cp-item-${globalIdx}`}
+                        role="option"
+                        aria-selected={isSelected}
+                        type="button"
+                        onClick={() => handleSelect(item)}
+                        onMouseEnter={() => setSelected(globalIdx)}
+                        className={`
+                          w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left
+                          transition-colors duration-75 focus:outline-none
+                          ${isSelected
+                            ? "bg-[#a435f0]/10 text-[#a435f0] dark:bg-[#a435f0]/20"
+                            : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-neutral-800"
+                          }
+                        `}
+                      >
+                        <Icon
+                          size={16}
+                          aria-hidden="true"
+                          className={isSelected ? "text-[#a435f0]" : "text-gray-400 dark:text-gray-500"}
+                        />
+                        <span className="flex-1 min-w-0 text-sm font-medium truncate">
+                          <Highlighted text={item.name} query={query} />
+                        </span>
+                        {isSelected && (
+                          <kbd className="shrink-0 text-[9px] font-mono px-1.5 py-0.5 rounded border border-[#a435f0]/40 bg-[#a435f0]/10 text-[#a435f0] select-none">
+                            ↵
+                          </kbd>
+                        )}
+                      </button>
+                    );
+                  })}
+                </div>
+              );
+            })
+          )}
+        </div>
+
+        {/* ── Footer hint ── */}
+        <div className="px-4 py-2 border-t border-gray-100 dark:border-gray-800 flex items-center gap-4 text-[10px] text-gray-400 dark:text-gray-500 select-none">
+          <span><kbd className="font-mono">↑↓</kbd> navigate</span>
+          <span><kbd className="font-mono">↵</kbd> open</span>
+          <span><kbd className="font-mono">Esc</kbd> close</span>
+          <span className="ml-auto">
+            <kbd className="font-mono">Ctrl</kbd>+<kbd className="font-mono">K</kbd> to reopen
+          </span>
+        </div>
+      </div>
+    </div>
+    </FocusTrap>
+  );
+}
diff --git a/src/app/components/ComplexityPanel.jsx b/src/app/components/ComplexityPanel.jsx
new file mode 100644
index 000000000..be7900cd8
--- /dev/null
+++ b/src/app/components/ComplexityPanel.jsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, ChevronUp, Clock, Database, Activity } from "lucide-react";
+
+export default function ComplexityPanel({ complexity, operationsCount = 0 }) {
+  const [isOpen, setIsOpen] = useState(true);
+
+  if (!complexity) return null;
+  const { time, space, explanation } = complexity;
+
+  return (
+    <div className="rounded-2xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex w-full items-center justify-between p-4"
+      >
+        <span className="flex items-center gap-2 text-sm font-bold text-surface-900 dark:text-white">
+          <Activity className="h-4 w-4 text-primary" />
+          Time & Space Complexity
+        </span>
+        {isOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+      </button>
+
+      {isOpen && (
+        <div className="space-y-4 border-t border-surface-100 p-4 dark:border-surface-800">
+          <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
+            <div className="rounded-lg bg-surface-50 p-3 text-center dark:bg-surface-950">
+              <p className="text-xs text-surface-500">Best</p>
+              <p className="font-mono text-sm font-semibold text-surface-900 dark:text-white">{time?.best}</p>
+            </div>
+            <div className="rounded-lg bg-surface-50 p-3 text-center dark:bg-surface-950">
+              <p className="text-xs text-surface-500">Average</p>
+              <p className="font-mono text-sm font-semibold text-surface-900 dark:text-white">{time?.average}</p>
+            </div>
+            <div className="rounded-lg bg-surface-50 p-3 text-center dark:bg-surface-950">
+              <p className="text-xs text-surface-500">Worst</p>
+              <p className="font-mono text-sm font-semibold text-surface-900 dark:text-white">{time?.worst}</p>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between rounded-lg bg-surface-50 px-3 py-2 dark:bg-surface-950">
+            <span className="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-300">
+              <Database className="h-4 w-4" /> Space Complexity
+            </span>
+            <span className="font-mono text-sm font-semibold text-surface-900 dark:text-white">{space}</span>
+          </div>
+
+          <div className="flex items-center justify-between rounded-lg bg-surface-50 px-3 py-2 dark:bg-surface-950">
+            <span className="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-300">
+              <Clock className="h-4 w-4" /> Operations so far
+            </span>
+            <span className="font-mono text-sm font-semibold text-primary">{operationsCount}</span>
+          </div>
+
+          {explanation && (
+            <p className="rounded-lg bg-primary/5 p-3 text-xs leading-relaxed text-surface-600 dark:text-surface-300">
+              {explanation}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/components/ConceptsSection.jsx b/src/app/components/ConceptsSection.jsx
new file mode 100644
index 000000000..3abe9eced
--- /dev/null
+++ b/src/app/components/ConceptsSection.jsx
@@ -0,0 +1,317 @@
+"use client";
+import React from "react";
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+
+const CONCEPTS = [
+  {
+    heading: "Concepts\nthat click",
+    body: "Step-by-step interactive visualizations make even complex algorithms feel intuitive. See exactly what's happening at every step.",
+    cta: { label: "Try Sorting", href: "/visualizer" },
+    visual: <SortingVisual />,
+    bgClass: "bg-[#f0fdf4] dark:bg-[#161616] transition-colors duration-300", // Green theme
+  },
+  {
+    heading: "Code that\nmakes sense",
+    body: "Watch the algorithm execute line by line alongside the visualization. Learn how code maps to real behaviour.",
+    cta: { label: "Try Searching", href: "/visualizer" },
+    visual: <SearchVisual />,
+    bgClass: "bg-[#faf5ff] dark:bg-[#1c1d1f] transition-colors duration-300", // Purple theme
+    flip: true,
+  },
+  {
+    heading: "Structures\nyou can touch",
+    body: "Manipulate data structures directly — push, pop, enqueue, dequeue — and see the state update in real time.",
+    cta: { label: "Try Stack & Queue", href: "/visualizer" },
+    visual: <StackVisual />,
+    bgClass: "bg-[#eff6ff] dark:bg-[#161616] transition-colors duration-300", // Blue theme
+  },
+];
+
+/* ── Visual: Sorting bars ── */
+/* ── Visual: Sorting bars ── */
+function SortingVisual() {
+  const bars = [65, 30, 80, 45, 55, 20, 70, 40, 90, 35];
+  const active = [2, 6];
+  return (
+    <div className="w-full max-w-[420px] rounded-2xl bg-[#1e1e1e] shadow-2xl overflow-hidden font-mono text-[13px] leading-[1.7] border border-[#333] transform-gpu will-change-transform transition-all duration-300 ease-in-out">
+      {/* Top Bar */}
+      <div className="flex items-center gap-2 px-4 py-3 border-b border-[#333] bg-[#1e1e1e]">
+        <span className="w-3 h-3 rounded-full bg-[#ff5f57] flex-shrink-0" />
+        <span className="w-3 h-3 rounded-full bg-[#febc2e] flex-shrink-0" />
+        <span className="w-3 h-3 rounded-full bg-[#28c840] flex-shrink-0" />
+        <span className="ml-3 text-[#858585] text-[13px] truncate">bubbleSort.js — step 4</span>
+      </div>
+      <div className="p-5">
+        <p className="text-[11px] uppercase tracking-widest text-[#858585] mb-4 font-semibold transition-colors duration-300">Comparing indices 2 & 3</p>
+        <div className="flex items-end gap-1.5 h-[80px]">
+          {bars.map((h, i) => (
+            <div key={i} className="flex-1 flex flex-col items-center gap-1">
+              <div
+                className={`w-full rounded-t-sm transition-all duration-300 ${
+                  active.includes(i) ? "bg-[#22c55e]" : "bg-[#404040]"
+                }`}
+                style={{ height: `${(h / 90) * 72}px` }}
+              />
+            </div>
+          ))}
+        </div>
+        <div className="flex gap-4 mt-3">
+          <span className="flex items-center gap-1.5 text-[11px] text-[#858585] transition-colors duration-300">
+            <span className="w-2.5 h-2.5 rounded-sm bg-[#22c55e] inline-block" /> comparing
+          </span>
+          <span className="flex items-center gap-1.5 text-[11px] text-[#858585] transition-colors duration-300">
+            <span className="w-2.5 h-2.5 rounded-sm bg-[#404040] inline-block transition-colors duration-300" /> unsorted
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ── Visual: Binary Search ── */
+/* ── Visual: Binary Search ── */
+function SearchVisual() {
+  const arr = [2, 5, 8, 12, 16, 23, 38, 45, 56, 72];
+  const mid = 4;
+  const eliminated = [0, 1, 2, 3];
+  return (
+    <div className="w-full max-w-[420px] rounded-2xl bg-[#1e1e1e] shadow-2xl overflow-hidden font-mono text-[13px] leading-[1.7] border border-[#333] transform-gpu will-change-transform transition-all duration-300 ease-in-out">
+      {/* Top Bar */}
+      <div className="flex items-center gap-2 px-4 py-3 border-b border-[#333] bg-[#1e1e1e]">
+        <span className="w-3 h-3 rounded-full bg-[#ff5f57] flex-shrink-0" />
+        <span className="w-3 h-3 rounded-full bg-[#febc2e] flex-shrink-0" />
+        <span className="w-3 h-3 rounded-full bg-[#28c840] flex-shrink-0" />
+        <span className="ml-3 text-[#858585] text-[13px] truncate">binarySearch.js — step 2</span>
+      </div>
+      <div className="p-5">
+        <p className="text-[11px] uppercase tracking-widest text-[#858585] mb-4 font-semibold transition-colors duration-300">Target: 16 &nbsp;·&nbsp; mid = index 4</p>
+        <div className="flex gap-1.5">
+          {arr.map((v, i) => (
+            <div key={i} className="flex-1 flex flex-col items-center gap-1">
+              <div
+                className={`w-full h-9 rounded-md flex items-center justify-center text-[11px] font-bold transition-all duration-300 ${
+                  i === mid 
+                    ? "bg-[#a855f7] text-white" 
+                    : eliminated.includes(i) 
+                      ? "bg-[#252526] text-[#6b7280]" 
+                      : "bg-[#3b2a59] text-[#e9d5ff]"
+                }`}
+              >
+                {v}
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="flex gap-4 mt-3">
+          <span className="flex items-center gap-1.5 text-[11px] text-[#858585] transition-colors duration-300">
+            <span className="w-2.5 h-2.5 rounded-sm bg-[#a855f7] inline-block" /> mid
+          </span>
+          <span className="flex items-center gap-1.5 text-[11px] text-[#858585] transition-colors duration-300">
+            <span className="w-2.5 h-2.5 rounded-sm bg-[#3b2a59] inline-block transition-colors duration-300" /> active
+          </span>
+          <span className="flex items-center gap-1.5 text-[11px] text-[#858585] transition-colors duration-300">
+            <span className="w-2.5 h-2.5 rounded-sm bg-[#252526] inline-block transition-colors duration-300" /> eliminated
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+/* ── Visual: Stack ── */
+/* ── Visual: Stack ── */
+function StackVisual() {
+  const stack = ["push(42)", "push(17)", "push(8)", "peek → 8"];
+  const boxClasses = [
+    "bg-[#404040] text-[#d4d4d4]",
+    "bg-[#404040] text-[#d4d4d4]",
+    "bg-[#525252] text-white",
+    "bg-[#3b82f6] text-white shadow-[0_2px_12px_rgba(59,130,246,0.4)]"
+  ];
+  return (
+    <div className="w-full max-w-[420px] rounded-2xl bg-[#1e1e1e] shadow-2xl overflow-hidden font-mono text-[13px] leading-[1.7] border border-[#333] transform-gpu will-change-transform transition-all duration-300 ease-in-out">
+      {/* Top Bar */}
+      <div className="flex items-center gap-2 px-4 py-3 border-b border-[#333] bg-[#1e1e1e]">
+        <span className="w-3 h-3 rounded-full bg-[#ff5f57] flex-shrink-0" />
+        <span className="w-3 h-3 rounded-full bg-[#febc2e] flex-shrink-0" />
+        <span className="w-3 h-3 rounded-full bg-[#28c840] flex-shrink-0" />
+        <span className="ml-3 text-[#858585] text-[13px] truncate">stack.js — operations</span>
+      </div>
+      <div className="p-5">
+        <p className="text-[11px] uppercase tracking-widest text-[#858585] mb-4 font-semibold transition-colors duration-300">Stack — top of stack ↑</p>
+        <div className="flex flex-col-reverse gap-2">
+          {stack.map((item, i) => (
+            <div
+              key={i}
+              className={`w-full h-10 rounded-lg flex items-center px-4 text-[13px] font-semibold transition-all duration-300 ${boxClasses[i]}`}
+            >
+              {item}
+              {i === stack.length - 1 && (
+                <span className="ml-auto text-[11px] bg-white/20 rounded px-2 py-0.5">TOP</span>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ── Visual: App phone-style mockup ── */
+function AppMockup() {
+  const steps = [
+    { line: 1, tokens: [{ t: "while", c: "#c678dd" }, { t: " gems remain", c: "#d4d4d4" }], active: false },
+    { line: 2, tokens: [{ t: "  if", c: "#c678dd" }, { t: " node.visited", c: "#d4d4d4" }], active: false },
+    { line: 3, tokens: [{ t: "    mark", c: "#22c55e" }, { t: " node", c: "#d4d4d4" }], active: false },
+    { line: 4, tokens: [{ t: "  else", c: "#c678dd" }], active: true },
+    { line: 5, tokens: [{ t: "    skip", c: "#22c55e" }, { t: " node", c: "#d4d4d4" }], active: false },
+  ];
+
+  return (
+    <div className="w-full max-w-[420px] rounded-2xl bg-[#1e1e1e] shadow-2xl overflow-hidden font-mono text-[13px] leading-[1.7] border border-[#333] transform-gpu will-change-transform transition-all duration-300 ease-in-out">
+      {/* Top Bar */}
+      <div className="flex items-center gap-2 px-4 py-3 border-b border-[#333] bg-[#1e1e1e]">
+        <span className="w-3 h-3 rounded-full bg-[#ff5f57] flex-shrink-0" />
+        <span className="w-3 h-3 rounded-full bg-[#febc2e] flex-shrink-0" />
+        <span className="w-3 h-3 rounded-full bg-[#28c840] flex-shrink-0" />
+        <span className="ml-3 text-[#858585] text-[13px] truncate">graphTraversal.js</span>
+      </div>
+
+      {/* task label */}
+      <div className="px-5 pt-5 pb-3">
+        <p className="text-[11px] uppercase tracking-widest text-[#858585] font-semibold">Traverse the graph</p>
+      </div>
+
+      {/* grid visual */}
+      <div className="mx-5 mb-4 rounded-xl overflow-hidden border border-[#333] bg-[#252526]">
+        <div className="grid grid-cols-5 gap-px bg-[#333] p-px">
+          {Array.from({ length: 25 }).map((_, i) => {
+            const path = [6, 11, 16, 21, 22, 17, 12, 7];
+            const gems = [4, 9, 14];
+            const robot = 22;
+            const isPath = path.includes(i);
+            const isGem = gems.includes(i);
+            const isRobot = i === robot;
+            return (
+              <div
+                key={i}
+                className="aspect-square flex items-center justify-center text-[14px]"
+                style={{
+                  background: isPath ? "#311b42" : "#1e1e1e",
+                  border: isPath ? "1.5px solid #a855f7" : "none",
+                }}
+              >
+                {isRobot ? "🤖" : isGem ? "💎" : isPath ? <span className="w-1.5 h-1.5 rounded-full bg-[#a855f7] inline-block" /> : ""}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* pseudocode steps */}
+      <div className="mx-5 mb-5 rounded-xl bg-[#252526] border border-[#333] overflow-hidden">
+        {steps.map((s) => (
+          <div
+            key={s.line}
+            className="flex items-center gap-3 px-4 py-2.5 border-b border-[#333] last:border-0"
+            style={{ background: s.active ? "#311b42" : "transparent" }}
+          >
+            {s.active ? (
+              <span className="w-3 h-3 rounded-full bg-[#a855f7] flex-shrink-0" />
+            ) : (
+              <span className="w-3 h-3 flex-shrink-0" />
+            )}
+            <span className="text-[13px] font-mono">
+              {s.tokens.map((tk, ti) => (
+                <span key={ti} style={{ color: tk.c }}>{tk.t}</span>
+              ))}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function ConceptsSection() {
+  return (
+    <section
+      className="bg-white dark:bg-surface-900"
+    >
+     {CONCEPTS.map((c, idx) => (
+        <div
+          key={idx}
+          className={`${c.bgClass} transition-colors duration-300 py-20 px-6`}
+        >
+          <div
+            className={`max-w-[1100px] mx-auto flex flex-col ${
+              c.flip ? "lg:flex-row-reverse" : "lg:flex-row"
+            } items-center gap-16 lg:gap-24`}
+          >
+            {/* Visual */}
+            <div className="flex-shrink-0 flex items-center justify-center w-full lg:w-auto">
+              {c.visual}
+            </div>
+
+            {/* Text */}
+            <div className="flex-1 flex flex-col gap-5 items-start">
+              <h2
+                className="text-[2.6rem] sm:text-[3.2rem] font-bold leading-[1.08] tracking-tight text-surface-900 dark:text-surface-50 whitespace-pre-line"
+                  style={{
+                    fontFamily: '"Source Serif 4", "Source Serif Pro", Georgia, serif',
+                  }}
+              >
+                {c.heading}
+              </h2>
+              <p className="text-[1.1rem] text-surface-600 dark:text-surface-400 leading-relaxed max-w-[460px]">
+                {c.body}
+              </p>
+              <Link
+                href={c.cta.href}
+                className="group inline-flex items-center gap-2 h-[52px] min-h-[44px] px-8 rounded-full bg-surface-900 dark:bg-white text-white dark:text-surface-900 text-[15px] font-bold hover:bg-primary dark:hover:bg-primary dark:hover:text-white active:scale-95 transition-all duration-200"
+              >
+                {c.cta.label}
+                <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-200" />
+              </Link>
+            </div>
+          </div>
+        </div>
+      ))}
+
+     {/* ── "More effective, more fun" block ── */}
+      <div className="py-20 px-6 bg-[#f0fdf4] dark:bg-[#1c1d1f] transition-colors duration-300">
+        <div className="max-w-[1100px] mx-auto flex flex-col lg:flex-row items-center gap-16 lg:gap-24">
+
+          {/* Text side */}
+          <div className="flex-1 flex flex-col gap-5 items-start">
+            <h2
+              className="text-[2.6rem] sm:text-[3.2rem] font-bold leading-[1.08] tracking-tight text-surface-900 dark:text-surface-50"
+              style={{
+                fontFamily: '"Source Serif 4", "Source Serif Pro", Georgia, serif',
+              }}
+            >
+              More effective,{" "}
+              <br />
+              more fun
+            </h2>
+            <p className="text-[1.1rem] text-surface-600 dark:text-surface-400 leading-relaxed max-w-[460px]">
+              AlgoBuddy&apos;s interactive approach helps you master DSA concepts in less time, with more purpose and joy.
+            </p>
+            <Link
+              href="/visualizer"
+              className="group inline-flex items-center gap-2 h-[52px] min-h-[44px] px-8 rounded-full bg-surface-900 dark:bg-white text-white dark:text-surface-900 text-[15px] font-bold hover:bg-primary dark:hover:bg-primary dark:hover:text-white active:scale-95 transition-all duration-200"
+            >
+              Start learning
+              <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-200" />
+            </Link>
+          </div>
+
+          {/* Phone mockup */}
+          <div className="flex-shrink-0 flex items-center justify-center w-full lg:w-auto">
+            <AppMockup />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/components/CookiePolicyContent.jsx b/src/app/components/CookiePolicyContent.jsx
new file mode 100644
index 000000000..46cebd14c
--- /dev/null
+++ b/src/app/components/CookiePolicyContent.jsx
@@ -0,0 +1,270 @@
+"use client";
+import React from "react";
+import Link from "next/link";
+
+
+const cookieSections = [
+  {
+    id: "what-are-cookies",
+    title: "What Cookies Are",
+    content: (
+      <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+        Cookies are small text files that are placed on your computer or mobile device when you visit our website. They are widely used to make websites work more efficiently, provide a better user experience, and supply information to the owners of the site.
+      </p>
+    )
+  },
+  {
+    id: "why-we-use-cookies",
+    title: "Why We Use Cookies",
+    content: (
+      <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+        We use cookies and similar tracking technologies to recognize you when you visit our platform, remember your preferences, understand how you interact with our services, and enhance your overall experience. They also help us ensure the security of your account and prevent fraudulent activity.
+      </p>
+    )
+  },
+  {
+    id: "essential-cookies",
+    title: "Essential Cookies",
+    content: (
+      <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+        These cookies are strictly necessary to provide you with services available through our platform and to use some of its features. Because these cookies are strictly necessary to deliver the website, refusing them will impact how our site functions. You can block or delete them by changing your browser settings, but some parts of the site will not work properly.
+      </p>
+    )
+  },
+  {
+    id: "functional-cookies",
+    title: "Functional Cookies",
+    content: (
+      <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+        These cookies allow our website to remember choices you make (such as your user name, language, or the region you are in) and provide enhanced, more personal features. The information these cookies collect may be anonymized and they cannot track your browsing activity on other websites.
+      </p>
+    )
+  },
+  {
+    id: "analytics-cookies",
+    title: "Analytics Cookies",
+    content: (
+      <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+        These cookies collect information that is used either in aggregate form to help us understand how our website is being used or how effective our marketing campaigns are, or to help us customize our website and application for you in order to enhance your experience.
+      </p>
+    )
+  },
+  {
+    id: "performance-cookies",
+    title: "Performance Cookies",
+    content: (
+      <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+        These cookies collect information about how visitors use a website, for instance which pages visitors go to most often, and if they get error messages from web pages. These cookies don't collect information that identifies a visitor. All information these cookies collect is aggregated and therefore anonymous.
+      </p>
+    )
+  },
+  {
+    id: "third-party-cookies",
+    title: "Third-Party Cookies",
+    content: (
+      <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+        In some special cases, we also use cookies provided by trusted third parties. For example, we use third-party analytics to help us understand how you use the site and ways that we can improve your experience. These cookies may track things such as how long you spend on the site and the pages that you visit.
+      </p>
+    )
+  },
+  {
+    id: "cookie-retention",
+    title: "Cookie Retention Policy",
+    content: (
+      <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+        The length of time that a cookie remains on your computer or mobile device depends on whether it is a "persistent" or "session" cookie. Session cookies last until you stop browsing, and persistent cookies last until they expire or are deleted. Most of the cookies we use are persistent and will expire between 30 minutes and two years from the date they are downloaded to your device.
+      </p>
+    )
+  },
+  {
+    id: "managing-preferences",
+    title: "Managing Cookie Preferences",
+    content: (
+      <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+        You can manage your cookie preferences at any time by accessing our cookie consent manager. This tool allows you to adjust your settings for non-essential cookies. Please note that blocking some types of cookies may impact your experience of the site and the services we are able to offer.
+      </p>
+    )
+  },
+  {
+    id: "browser-controls",
+    title: "Browser Cookie Controls",
+    content: (
+      <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+        In addition to our cookie consent manager, most browsers allow you to manage cookies through their settings preferences. However, if you limit the ability of websites to set cookies, you may worsen your overall user experience, since it will no longer be personalized to you.
+      </p>
+    )
+  },
+  {
+    id: "updates",
+    title: "Updates to This Policy",
+    content: (
+      <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+        We may update this Cookie Policy from time to time in order to reflect, for example, changes to the cookies we use or for other operational, legal or regulatory reasons. Please therefore re-visit this Cookie Policy regularly to stay informed about our use of cookies and related technologies.
+      </p>
+    )
+  },
+  {
+    id: "contact",
+    title: "Contact Information",
+    content: (
+      <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+        If you have any questions about our use of cookies or other technologies, please contact us at{" "}
+        <a href="mailto:hello@algobuddy.in" className="text-purple-600 dark:text-purple-400 hover:underline font-medium transition-colors">
+          hello@algobuddy.in
+        </a>.
+      </p>
+    )
+  }
+];
+
+export default function CookiePolicyContent() {
+  return (
+    <div className="mx-auto max-w-6xl px-6 py-12 lg:py-16">
+      <Link
+        href="/"
+        className="inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors mb-8"
+      >
+        <span className="mr-2">←</span> Return Home
+      </Link>
+
+      {/* Hero Section */}
+      <div className="mb-16 max-w-3xl">
+        <div className="inline-flex items-center justify-center px-3 py-1 rounded-full bg-gray-100 text-gray-600 dark:bg-[#1E1E26] dark:text-gray-300 text-xs font-bold tracking-[0.15em] uppercase mb-6">
+          Legal
+        </div>
+        <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900 dark:text-white tracking-tight mb-6">
+          Cookie Policy
+        </h1>
+        <p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
+          Learn how we use cookies and similar technologies to improve your experience on AlgoBuddy. We believe in transparency and giving you control over your data.
+        </p>
+        <p className="text-sm text-gray-500 dark:text-gray-500 font-medium mt-6">
+          Last updated: May 17, 2025
+        </p>
+      </div>
+
+      <div className="grid gap-12 lg:grid-cols-[250px_1fr] items-start">
+        {/* Sidebar */}
+        <aside className="sticky top-24 hidden lg:block">
+          <h2 className="mb-6 text-sm font-bold uppercase tracking-wider text-gray-900 dark:text-white">
+            Contents
+          </h2>
+          <ul className="space-y-3 border-l border-gray-200 dark:border-[#2A2A35]">
+            {cookieSections.map((item) => (
+              <li key={item.id}>
+                <a
+                  href={`#${item.id}`}
+                  className="block pl-4 py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white border-l-2 border-transparent hover:border-gray-400 dark:hover:border-purple-400 transition-all duration-200"
+                >
+                  {item.title}
+                </a>
+              </li>
+            ))}
+            <li>
+              <a
+                href="#cookie-types"
+                className="block pl-4 py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white border-l-2 border-transparent hover:border-gray-400 dark:hover:border-purple-400 transition-all duration-200"
+              >
+                Cookie Types Table
+              </a>
+            </li>
+          </ul>
+        </aside>
+
+        {/* Content */}
+        <div className="space-y-12">
+          {cookieSections.map((section) => (
+            <section 
+              key={section.id} 
+              id={section.id}
+              className="scroll-mt-24 pb-10 border-b border-gray-200 dark:border-[#2A2A35]"
+            >
+              <div className="flex items-start mb-4">
+                <div>
+                  <h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-4">
+                    {section.title}
+                  </h2>
+                  {section.content}
+                </div>
+              </div>
+            </section>
+          ))}
+
+          {/* Cookie Types Table */}
+          <section id="cookie-types" className="scroll-mt-24 bg-white dark:bg-[#14141A] rounded-2xl border border-gray-200 dark:border-[#2A2A35] overflow-hidden shadow-sm hover:border-purple-500/40 transition-colors duration-300">
+            <div className="p-6 sm:p-8 border-b border-gray-200 dark:border-[#2A2A35]">
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Cookie Types & Details</h2>
+              <p className="text-gray-600 dark:text-gray-400">
+                A detailed breakdown of the specific cookies we use on our platform.
+              </p>
+            </div>
+            <div className="overflow-x-auto">
+              <table className="w-full text-left border-collapse min-w-[600px]">
+                <thead>
+                  <tr className="bg-gray-50/50 dark:bg-[#1A1A24]/50">
+                    <th className="py-4 px-6 text-sm font-semibold text-gray-900 dark:text-white">Cookie Type</th>
+                    <th className="py-4 px-6 text-sm font-semibold text-gray-900 dark:text-white">Purpose</th>
+                    <th className="py-4 px-6 text-sm font-semibold text-gray-900 dark:text-white">Duration</th>
+                    <th className="py-4 px-6 text-sm font-semibold text-gray-900 dark:text-white">Requirement</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200 dark:divide-[#2A2A35]">
+                  <tr className="hover:bg-gray-50 dark:hover:bg-[#1A1A24]/50 transition-colors">
+                    <td className="py-4 px-6 text-sm text-gray-900 dark:text-gray-300 font-medium">Session ID</td>
+                    <td className="py-4 px-6 text-sm text-gray-600 dark:text-gray-400">Maintains your active session while using AlgoBuddy.</td>
+                    <td className="py-4 px-6 text-sm text-gray-600 dark:text-gray-400">Session</td>
+                    <td className="py-4 px-6">
+                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-800 dark:bg-red-500/20 dark:text-red-300">
+                        Required
+                      </span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-gray-50 dark:hover:bg-[#1A1A24]/50 transition-colors">
+                    <td className="py-4 px-6 text-sm text-gray-900 dark:text-gray-300 font-medium">Authentication</td>
+                    <td className="py-4 px-6 text-sm text-gray-600 dark:text-gray-400">Keeps you securely logged into your account.</td>
+                    <td className="py-4 px-6 text-sm text-gray-600 dark:text-gray-400">30 Days</td>
+                    <td className="py-4 px-6">
+                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-800 dark:bg-red-500/20 dark:text-red-300">
+                        Required
+                      </span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-gray-50 dark:hover:bg-[#1A1A24]/50 transition-colors">
+                    <td className="py-4 px-6 text-sm text-gray-900 dark:text-gray-300 font-medium">Theme Preference</td>
+                    <td className="py-4 px-6 text-sm text-gray-600 dark:text-gray-400">Remembers your choice of Light or Dark mode.</td>
+                    <td className="py-4 px-6 text-sm text-gray-600 dark:text-gray-400">1 Year</td>
+                    <td className="py-4 px-6">
+                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-500/20 dark:text-green-300">
+                        Optional
+                      </span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-gray-50 dark:hover:bg-[#1A1A24]/50 transition-colors">
+                    <td className="py-4 px-6 text-sm text-gray-900 dark:text-gray-300 font-medium">Analytics</td>
+                    <td className="py-4 px-6 text-sm text-gray-600 dark:text-gray-400">Helps us understand how features are used to improve the platform.</td>
+                    <td className="py-4 px-6 text-sm text-gray-600 dark:text-gray-400">2 Years</td>
+                    <td className="py-4 px-6">
+                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-500/20 dark:text-green-300">
+                        Optional
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </section>
+
+          {/* Accept Button area */}
+          <div className="pt-8 flex justify-end">
+             <Link
+               href="/"
+               className="px-8 py-3.5 bg-black text-white dark:bg-white dark:text-black font-semibold rounded-full hover:bg-gray-800 dark:hover:bg-gray-200 transition-all duration-200 active:scale-95 shadow-md flex items-center gap-2"
+             >
+               Accept & Continue
+             </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/FloatingNotesAssistant.jsx b/src/app/components/FloatingNotesAssistant.jsx
new file mode 100644
index 000000000..6f200c23a
--- /dev/null
+++ b/src/app/components/FloatingNotesAssistant.jsx
@@ -0,0 +1,467 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+import { 
+  NotebookPen, 
+  X, 
+  Trash2, 
+  Plus, 
+  Search, 
+  Sparkles, 
+  Download, 
+  BookOpen, 
+  Edit3, 
+  Check, 
+  Bold, 
+  Italic, 
+  Code,
+  List,
+  FileText
+} from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { useNotesManager } from "@/app/hooks/useNotesManager";
+
+const TOPICS_LIST = [
+  "General",
+  "Array",
+  "Linked List",
+  "Stack",
+  "Queue",
+  "Recursion",
+  "Tree",
+  "HashMap",
+  "Graph",
+  "AI Algorithms",
+  "Quiz",
+  "Dynamic Programming"
+];
+
+const mdComponents = {
+  code({ inline, className, children, ...props }) {
+    if (inline) {
+      return (
+        <code className="px-1.5 py-0.5 rounded bg-slate-100 dark:bg-neutral-800 text-purple-600 dark:text-purple-300 font-mono text-sm font-semibold" {...props}>
+          {children}
+        </code>
+      );
+    }
+    return (
+      <pre className="overflow-x-auto p-3 rounded-xl bg-neutral-950 text-neutral-200 text-sm font-mono my-2 border border-neutral-800/80">
+        <code>{children}</code>
+      </pre>
+    );
+  },
+  h1: ({ children }) => <h3 className="text-lg sm:text-xl font-extrabold text-slate-800 dark:text-white mt-2.5 mb-1">{children}</h3>,
+  h2: ({ children }) => <h3 className="text-base sm:text-lg font-bold text-slate-850 dark:text-neutral-200 mt-2 mb-1">{children}</h3>,
+  h3: ({ children }) => <h4 className="text-sm sm:text-base font-bold text-slate-800 dark:text-neutral-300 mt-1.5 mb-0.5">{children}</h4>,
+  p: ({ children }) => <p className="text-base text-slate-600 dark:text-neutral-400 leading-relaxed mb-2 last:mb-0 whitespace-pre-wrap">{children}</p>,
+  ul: ({ children }) => <ul className="my-2 pl-4 list-disc space-y-1 text-base text-slate-600 dark:text-neutral-400">{children}</ul>,
+  ol: ({ children }) => <ol className="my-2 pl-4 list-decimal space-y-1 text-base text-slate-600 dark:text-neutral-400">{children}</ol>,
+  li: ({ children }) => <li className="leading-relaxed whitespace-pre-wrap">{children}</li>,
+  strong: ({ children }) => <strong className="font-bold text-slate-850 dark:text-white">{children}</strong>,
+  a: ({ href, children }) => (
+    <a href={href} target="_blank" rel="noopener noreferrer" className="text-primary dark:text-purple-400 hover:underline">
+      {children}
+    </a>
+  )
+};
+
+const preprocessMarkdown = (text) => {
+  if (!text) return "";
+  // Forgive missing space after heading hash characters (e.g. #hello -> # hello)
+  return text.replace(/^(#{1,6})([a-zA-Z0-9])/gm, "$1 $2");
+};
+
+export default function FloatingNotesAssistant() {
+  const [open, setOpen] = useState(false);
+  const [editMode, setEditMode] = useState("write"); // 'write' or 'preview'
+  const [copied, setCopied] = useState(false);
+
+  const textareaRef = useRef(null);
+
+  const {
+    notes,
+    activeNote,
+    filteredNotes,
+    activeNoteId,
+    setActiveNoteId,
+    searchQuery,
+    setSearchQuery,
+    filterByTopicOnly,
+    setFilterByTopicOnly,
+    currentTopic,
+    createNote,
+    updateNote,
+    deleteNote
+  } = useNotesManager();
+
+  // Format Helper for markdown tags
+  const insertFormatting = (prefix, suffix = "") => {
+    const textarea = textareaRef.current;
+    if (!textarea || !activeNote) return;
+
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const text = textarea.value;
+    const selectedText = text.substring(start, end);
+    const replacement = prefix + selectedText + suffix;
+
+    const newContent = text.substring(0, start) + replacement + text.substring(end);
+    updateNote(activeNote.id, { content: newContent });
+
+    setTimeout(() => {
+      textarea.focus();
+      textarea.setSelectionRange(start + prefix.length, start + prefix.length + selectedText.length);
+    }, 50);
+  };
+
+  // Copy raw content
+  const handleCopy = () => {
+    if (!activeNote) return;
+    navigator.clipboard.writeText(activeNote.content).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  // Download Markdown file
+  const handleDownload = () => {
+    if (!activeNote) return;
+    const blob = new Blob([activeNote.content], { type: "text/markdown;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute("download", `${activeNote.title.toLowerCase().replace(/\s+/g, "-")}.md`);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  // Ask AI / Chatbot integration
+  const handleDiscussWithAI = () => {
+    if (!activeNote) return;
+    const prompt = `Here are my study notes about the topic "${activeNote.topic}" (Note title: "${activeNote.title}"):\n\n\`\`\`markdown\n${activeNote.content}\n\`\`\`\n\nCan you review these notes, highlight any mistakes or key optimizations, and suggest 2 representative practice questions?`;
+    
+    const event = new CustomEvent("chatbot-explain", {
+      detail: { prompt }
+    });
+    window.dispatchEvent(event);
+  };
+
+  const buttonPosition = "bottom-[152px] right-3 sm:right-6";
+
+  const panelPosition = "bottom-[80px] right-4 left-4 sm:bottom-[92px] sm:right-[88px] sm:left-auto";
+
+  return (
+    <>
+      {/* Floating Trigger Button */}
+      <button
+        onClick={() => setOpen((prev) => !prev)}
+        className={`
+          fixed ${buttonPosition} z-[9999]
+          w-14 h-14 rounded-2xl
+          bg-primary hover:bg-primary-dark
+          text-white shadow-lg
+          flex items-center justify-center
+          transition-all duration-300 ease-in-out hover:scale-105
+        `}
+        aria-label="Algorithm Notebook"
+      >
+        {open ? <X size={22} /> : <NotebookPen size={22} />}
+      </button>
+
+      {/* Notebook Dashboard Panel */}
+      {open && (
+        <div
+          className={`
+            fixed ${panelPosition}
+            w-[calc(100vw-32px)] sm:w-[540px] h-[400px] sm:h-[450px] max-h-[70vh] sm:max-h-[75vh]
+            bg-white/95 dark:bg-neutral-900/95 backdrop-blur-xl
+            rounded-3xl shadow-2xl
+            border border-purple-100 dark:border-neutral-800/80
+            flex flex-col overflow-hidden z-[9999]
+            transition-all duration-300 ease-in-out
+          `}
+        >
+          {/* Header */}
+          <div className="flex justify-between items-center px-5 py-4 border-b border-slate-100 dark:border-neutral-800/60 bg-slate-50/50 dark:bg-neutral-950/20 shrink-0">
+            <div className="flex items-center gap-2">
+              <NotebookPen size={18} className="text-primary" />
+              <h2 className="font-black text-sm text-slate-800 dark:text-white">
+                Algorithm Notebook
+              </h2>
+            </div>
+            <button 
+              onClick={() => setOpen(false)}
+              className="text-slate-400 hover:text-slate-600 dark:hover:text-neutral-200 transition-colors p-1"
+            >
+              <X size={18} />
+            </button>
+          </div>
+
+          {/* Body Dashboard Layout */}
+          <div className="flex flex-row flex-1 min-h-0">
+            
+            {/* Sidebar (Note Selection & Creation) */}
+            <div className="flex flex-col w-[110px] sm:w-[190px] border-r border-slate-100 dark:border-neutral-800/60 p-2.5 bg-slate-50/30 dark:bg-neutral-950/10 shrink-0">
+              
+              {/* Add Note Button */}
+              <button
+                onClick={() => createNote(`Note ${notes.length + 1}`, "")}
+                className="w-full py-2 bg-primary hover:bg-primary-dark text-white rounded-xl text-xs font-bold transition flex items-center justify-center gap-1.5 shadow-md shadow-primary/10 mb-3"
+              >
+                <Plus size={14} />
+                <span>New Note</span>
+              </button>
+
+              {/* Search Box */}
+              <div className="relative mb-2.5">
+                <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-slate-400" />
+                <input
+                  type="text"
+                  placeholder="Search..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="w-full pl-7 pr-2 py-1 rounded-lg border border-slate-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-[10px] font-medium outline-none focus:border-primary transition"
+                />
+              </div>
+
+              {/* Context Filter Checkbox */}
+              {currentTopic !== "General" && (
+                <label className="flex items-center gap-2 cursor-pointer select-none text-[10px] font-bold text-slate-500 dark:text-neutral-400 mb-3 border-b border-slate-100 dark:border-neutral-800 pb-2">
+                  <input
+                    type="checkbox"
+                    checked={filterByTopicOnly}
+                    onChange={(e) => setFilterByTopicOnly(e.target.checked)}
+                    className="accent-primary w-3 h-3 cursor-pointer"
+                  />
+                  <span className="truncate">This Topic ({currentTopic})</span>
+                </label>
+              )}
+
+              {/* Notes Scroll Container */}
+              <div className="flex-1 overflow-y-auto space-y-1.5 pr-1 scrollbar-thin">
+                {filteredNotes.length === 0 ? (
+                  <div className="text-[10px] text-center text-slate-400 dark:text-neutral-600 font-bold py-6">
+                    No notes found
+                  </div>
+                ) : (
+                  filteredNotes.map((n) => {
+                    const isActive = n.id === activeNoteId;
+                    return (
+                      <div
+                        key={n.id}
+                        onClick={() => {
+                          setActiveNoteId(n.id);
+                          setEditMode("write");
+                        }}
+                        className={`p-2 rounded-xl cursor-pointer transition select-none text-left border ${
+                          isActive
+                            ? "bg-purple-500/10 border-primary text-primary dark:text-purple-300 font-black"
+                            : "bg-transparent border-transparent hover:bg-slate-100 dark:hover:bg-neutral-800/40 text-slate-650 dark:text-neutral-400"
+                        }`}
+                      >
+                        <div className="text-[11px] truncate leading-tight mb-0.5">{n.title}</div>
+                        <div className="flex justify-between items-center gap-1">
+                          <span className="text-[8px] text-slate-400 truncate max-w-[50px] uppercase font-bold">
+                            {n.topic}
+                          </span>
+                          <span className="text-[8px] text-slate-350 dark:text-neutral-600 shrink-0 font-medium">
+                            {new Date(n.updatedAt).toLocaleDateString([], { month: "short", day: "numeric" })}
+                          </span>
+                        </div>
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </div>
+
+            {/* Note Editor Workspace Pane */}
+            <div className="flex flex-col flex-1 p-4 min-w-0 bg-white dark:bg-neutral-900">
+              {activeNote ? (
+                <>
+                  {/* Active Note Title Bar */}
+                  <div className="flex items-center gap-3 border-b border-slate-100 dark:border-neutral-800 pb-2.5 mb-2.5 shrink-0">
+                    <input
+                      type="text"
+                      value={activeNote.title}
+                      onChange={(e) => updateNote(activeNote.id, { title: e.target.value })}
+                      placeholder="Title"
+                      className="flex-1 bg-transparent text-sm sm:text-base font-bold outline-none border-b border-transparent focus:border-purple-200/55 dark:text-white"
+                    />
+
+                    {/* Topic Dropdown tag */}
+                    <div className="relative">
+                      <select
+                        value={activeNote.topic}
+                        onChange={(e) => updateNote(activeNote.id, { topic: e.target.value })}
+                        className="bg-purple-500/10 border-transparent text-primary dark:text-purple-300 text-[10px] font-black py-1 pl-2 pr-5 rounded-lg outline-none cursor-pointer appearance-none"
+                      >
+                        {TOPICS_LIST.map((t) => (
+                          <option key={t} value={t} className="bg-white dark:bg-neutral-900 text-slate-800 dark:text-white font-medium">
+                            {t}
+                          </option>
+                        ))}
+                      </select>
+                      <div className="absolute right-1.5 top-1/2 -translate-y-1/2 pointer-events-none text-primary border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-primary" />
+                    </div>
+                  </div>
+
+                  {/* Mode Toggles & Formatting Toolbar */}
+                  <div className="flex items-center justify-between gap-4 border-b border-slate-50 dark:border-neutral-800 pb-2 mb-2 shrink-0">
+                    <div className="flex items-center gap-1">
+                      {/* Write / Preview Tabs */}
+                      <button
+                        onClick={() => setEditMode("write")}
+                        className={`px-3 py-1 rounded-lg text-xs font-bold transition ${
+                          editMode === "write"
+                            ? "bg-primary text-white shadow-sm"
+                            : "text-slate-400 hover:text-slate-650 dark:text-neutral-500 dark:hover:text-neutral-300"
+                        }`}
+                      >
+                        Write
+                      </button>
+                      <button
+                        onClick={() => setEditMode("preview")}
+                        className={`px-3 py-1 rounded-lg text-xs font-bold transition ${
+                          editMode === "preview"
+                            ? "bg-primary text-white shadow-sm"
+                            : "text-slate-400 hover:text-slate-650 dark:text-neutral-500 dark:hover:text-neutral-300"
+                        }`}
+                      >
+                        Preview
+                      </button>
+                    </div>
+
+                    {/* Editor Toolbar (Only in Write Mode) */}
+                    {editMode === "write" && (
+                      <div className="flex items-center gap-1.5">
+                        <button
+                          onClick={() => insertFormatting("**", "**")}
+                          title="Bold"
+                          className="p-1 rounded hover:bg-slate-150 dark:hover:bg-neutral-800 text-slate-450 hover:text-slate-800"
+                        >
+                          <Bold size={13} />
+                        </button>
+                        <button
+                          onClick={() => insertFormatting("*", "*")}
+                          title="Italic"
+                          className="p-1 rounded hover:bg-slate-150 dark:hover:bg-neutral-800 text-slate-450 hover:text-slate-800"
+                        >
+                          <Italic size={13} />
+                        </button>
+                        <button
+                          onClick={() => insertFormatting("```\n", "\n```")}
+                          title="Code Block"
+                          className="p-1 rounded hover:bg-slate-150 dark:hover:bg-neutral-800 text-slate-450 hover:text-slate-800"
+                        >
+                          <Code size={13} />
+                        </button>
+                        <button
+                          onClick={() => insertFormatting("- ")}
+                          title="List"
+                          className="p-1 rounded hover:bg-slate-150 dark:hover:bg-neutral-800 text-slate-450 hover:text-slate-800"
+                        >
+                          <List size={13} />
+                        </button>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Core Editor/Preview Container */}
+                  <div className="flex-1 min-h-0 overflow-y-auto mb-3">
+                    {editMode === "write" ? (
+                      <textarea
+                        ref={textareaRef}
+                        value={activeNote.content}
+                        onChange={(e) => updateNote(activeNote.id, { content: e.target.value })}
+                        placeholder="Write note contents... (Supports Markdown)"
+                        className="w-full h-full p-3 rounded-xl border border-slate-100 dark:border-neutral-800/80 bg-slate-50/20 dark:bg-neutral-900/30 text-base leading-relaxed resize-none outline-none focus:border-primary/45 transition dark:text-neutral-200"
+                      />
+                    ) : (
+                      <div className="w-full h-full p-4 rounded-xl border border-slate-50 dark:border-neutral-800 bg-slate-50/20 dark:bg-neutral-950/10 overflow-y-auto text-left leading-relaxed text-base">
+                        {activeNote.content.trim() ? (
+                          <ReactMarkdown remarkPlugins={[remarkGfm]} components={mdComponents}>
+                            {preprocessMarkdown(activeNote.content)}
+                          </ReactMarkdown>
+                        ) : (
+                          <div className="text-slate-400 dark:text-neutral-600 font-bold italic py-8 text-center">
+                            Note is empty. Write something to preview.
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Workspace Action Bar */}
+                  <div className="flex items-center justify-between border-t border-slate-100 dark:border-neutral-800 pt-3 shrink-0">
+                    
+                    {/* Discuss with AI */}
+                    <button
+                      onClick={handleDiscussWithAI}
+                      className="px-3 py-1.5 bg-primary/10 hover:bg-primary/20 text-primary dark:text-purple-400 rounded-lg text-[10px] font-black transition flex items-center gap-1"
+                    >
+                      <Sparkles size={11} className="fill-primary dark:fill-purple-400" />
+                      <span>Discuss with AlgoBot</span>
+                    </button>
+
+                    {/* Note Utilities */}
+                    <div className="flex items-center gap-2">
+                      {/* Copy */}
+                      <button
+                        onClick={handleCopy}
+                        className="p-2 border border-slate-100 dark:border-neutral-800 rounded-lg hover:bg-slate-50 dark:hover:bg-neutral-800 text-slate-450 transition-colors"
+                        title="Copy raw markdown text"
+                      >
+                        {copied ? <Check size={13} className="text-emerald-500" /> : <FileText size={13} />}
+                      </button>
+                      
+                      {/* Download */}
+                      <button
+                        onClick={handleDownload}
+                        className="p-2 border border-slate-100 dark:border-neutral-800 rounded-lg hover:bg-slate-50 dark:hover:bg-neutral-800 text-slate-450 transition-colors"
+                        title="Download Markdown note (.md)"
+                      >
+                        <Download size={13} />
+                      </button>
+
+                      {/* Delete */}
+                      <button
+                        onClick={() => deleteNote(activeNote.id)}
+                        className="p-2 border border-red-100 dark:border-red-950/20 bg-red-50/50 dark:bg-red-950/10 rounded-lg text-red-500 hover:bg-red-100 dark:hover:bg-red-950/30 transition-colors ml-1"
+                        title="Delete note"
+                      >
+                        <Trash2 size={13} />
+                      </button>
+                    </div>
+
+                  </div>
+                </>
+              ) : (
+                /* Workspace Empty State */
+                <div className="flex-1 flex flex-col justify-center items-center text-center p-8 select-none">
+                  <div className="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-3">
+                    <NotebookPen size={22} className="text-primary" />
+                  </div>
+                  <h3 className="font-bold text-sm text-slate-800 dark:text-white mb-1.5">No active note</h3>
+                  <p className="text-xs text-slate-400 dark:text-neutral-500 max-w-[240px] leading-normal mb-4">
+                    Create a new note or select an existing one from the sidebar to begin drafting.
+                  </p>
+                  <button
+                    onClick={() => createNote(`Note ${notes.length + 1}`, "")}
+                    className="px-4 py-2 bg-primary text-white rounded-xl text-xs font-bold transition hover:bg-primary-dark"
+                  >
+                    Create Note
+                  </button>
+                </div>
+              )}
+            </div>
+
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/ManageProjectsModal.jsx b/src/app/components/ManageProjectsModal.jsx
new file mode 100644
index 000000000..56a4e356c
--- /dev/null
+++ b/src/app/components/ManageProjectsModal.jsx
@@ -0,0 +1,423 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Github, Save, X, Plus, Trash2, ExternalLink, Download } from "lucide-react";
+import toast from "react-hot-toast";
+import { supabase } from "@/lib/supabase";
+import { useUser } from "@/features/user/UserContext";
+
+const PRESET_GRADIENTS = [
+  "bg-[linear-gradient(135deg,#190f4f,#25116d_45%,#5338f2)]",
+  "bg-[linear-gradient(135deg,#064e3b,#0f172a)]",
+  "bg-[linear-gradient(135deg,#312e81,#111827)]",
+  "bg-[linear-gradient(135deg,#7c2d12,#1c1917)]",
+  "bg-[linear-gradient(135deg,#134e4a,#0f172a)]",
+  "bg-[linear-gradient(135deg,#1e1b4b,#312e81)]",
+];
+
+const EMPTY_PROJECT = {
+  title: "",
+  subtitle: "",
+  tags: "",
+  url: "",
+  preview: PRESET_GRADIENTS[0],
+};
+
+export default function ManageProjectsModal({ isOpen, onClose }) {
+  const { user, setUser } = useUser();
+  const meta = user?.user_metadata || {};
+
+  const [projects, setProjects] = useState([]);
+  const [editingIndex, setEditingIndex] = useState(null);
+  const [formData, setFormData] = useState(EMPTY_PROJECT);
+  const [saving, setSaving] = useState(false);
+  const [importing, setImporting] = useState(false);
+  const [githubRepos, setGithubRepos] = useState([]);
+  const [showImport, setShowImport] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      const saved = Array.isArray(meta.projects) ? meta.projects : [];
+      setProjects(saved);
+      setEditingIndex(null);
+      setFormData(EMPTY_PROJECT);
+      setShowImport(false);
+      setGithubRepos([]);
+    }
+  }, [isOpen]);
+
+  const handleFormChange = (field, value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleEdit = (index) => {
+    const project = projects[index];
+    setFormData({
+      title: project.title || "",
+      subtitle: project.subtitle || "",
+      tags: Array.isArray(project.tags) ? project.tags.join(", ") : project.tags || "",
+      url: project.url || "",
+      preview: project.preview || PRESET_GRADIENTS[0],
+    });
+    setEditingIndex(index);
+    setShowImport(false);
+  };
+
+  const handleAddNew = () => {
+    setFormData(EMPTY_PROJECT);
+    setEditingIndex(-1);
+    setShowImport(false);
+  };
+
+  const handleSaveProject = () => {
+    if (!formData.title.trim()) {
+      toast.error("Project title is required");
+      return;
+    }
+
+    const tagsArray = formData.tags
+      .split(",")
+      .map((t) => t.trim())
+      .filter(Boolean)
+      .slice(0, 4);
+
+    const newProject = {
+      title: formData.title.trim(),
+      subtitle: formData.subtitle.trim(),
+      tags: tagsArray,
+      url: formData.url.trim(),
+      preview: formData.preview,
+    };
+
+    if (editingIndex === -1) {
+      setProjects((prev) => [...prev, newProject]);
+    } else {
+      setProjects((prev) => prev.map((p, i) => (i === editingIndex ? newProject : p)));
+    }
+
+    setEditingIndex(null);
+    setFormData(EMPTY_PROJECT);
+  };
+
+  const handleDelete = (index) => {
+    setProjects((prev) => prev.filter((_, i) => i !== index));
+    if (editingIndex === index) {
+      setEditingIndex(null);
+      setFormData(EMPTY_PROJECT);
+    }
+  };
+
+  const handleImportFromGitHub = async () => {
+    const username = meta.github_username?.trim();
+    if (!username) {
+      toast.error("No GitHub username found. Add it in Coding Profiles first.");
+      return;
+    }
+
+    setImporting(true);
+    setShowImport(true);
+
+    try {
+      const res = await fetch(`/api/github-repos?username=${encodeURIComponent(username)}`);
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to fetch repos");
+      setGithubRepos(data.repos);
+    } catch (err) {
+      toast.error(err.message || "Could not fetch GitHub repos");
+      setShowImport(false);
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  const handleSelectRepo = (repo) => {
+    const tags = [
+      repo.language,
+      ...(repo.topics || []),
+    ].filter(Boolean).slice(0, 4);
+
+    setFormData({
+      title: repo.name,
+      subtitle: repo.description || "",
+      tags: tags.join(", "),
+      url: repo.html_url,
+      preview: PRESET_GRADIENTS[Math.floor(Math.random() * PRESET_GRADIENTS.length)],
+    });
+
+    setEditingIndex(-1);
+    setShowImport(false);
+    toast.success(`"${repo.name}" imported — review and save`);
+  };
+
+  const handleSaveAll = async () => {
+    setSaving(true);
+    try {
+      const updatedMeta = { ...meta, projects };
+      const { error } = await supabase.auth.updateUser({ data: updatedMeta });
+      if (error) throw error;
+      
+      //directly update user state with what we know was saved 
+      setUser(prev => ({
+        ...prev,
+        user_metadata: updatedMeta
+      }));
+
+      toast.success("Projects saved");
+      onClose();
+    } catch (err) {
+      console.error(err);
+      toast.error("Failed to save projects");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const isFormOpen = editingIndex !== null;
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          className="fixed inset-0 z-[10000] flex items-center justify-center bg-slate-950/60 p-4 backdrop-blur-sm dark:bg-black/80"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          onClick={onClose}
+        >
+          <motion.div
+            onClick={(e) => e.stopPropagation()}
+            className="w-full max-w-xl overflow-hidden rounded-2xl bg-white shadow-2xl dark:border dark:border-neutral-800 dark:bg-neutral-900"
+            initial={{ y: 20, opacity: 0, scale: 0.98 }}
+            animate={{ y: 0, opacity: 1, scale: 1 }}
+            exit={{ y: 20, opacity: 0, scale: 0.98 }}
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between border-b border-slate-100 px-6 py-4 dark:border-neutral-800">
+              <div>
+                <h2 className="text-xl font-black text-[#111331] dark:text-white">My Projects</h2>
+                <p className="text-sm font-semibold text-slate-500 dark:text-neutral-400">
+                  Add, edit, or import your projects.
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={onClose}
+                className="rounded-lg p-2 text-slate-500 hover:bg-slate-100 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white"
+                aria-label="Close"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            <div className="max-h-[60vh] overflow-y-auto px-6 py-4">
+              {/* GitHub Import button */}
+              <button
+                type="button"
+                onClick={handleImportFromGitHub}
+                disabled={importing}
+                className="mb-4 flex w-full items-center justify-center gap-2 rounded-xl border border-slate-200 py-2.5 text-sm font-black text-slate-600 transition hover:border-violet-300 hover:bg-violet-50 hover:text-violet-700 disabled:opacity-50 dark:border-neutral-700 dark:text-neutral-300 dark:hover:border-violet-700 dark:hover:bg-violet-950/40 dark:hover:text-violet-300"
+              >
+                <Github className="h-4 w-4" />
+                {importing ? "Fetching repos..." : "Import from GitHub"}
+                {!importing && <Download className="h-3.5 w-3.5" />}
+              </button>
+
+              {/* GitHub repo list */}
+              {showImport && githubRepos.length > 0 && (
+                <div className="mb-4 overflow-hidden rounded-xl border border-slate-200 dark:border-neutral-700">
+                  <p className="border-b border-slate-100 px-3 py-2 text-xs font-black text-slate-500 dark:border-neutral-800 dark:text-neutral-400">
+                    Select a repo to import
+                  </p>
+                  <div className="max-h-40 overflow-y-auto">
+                    {githubRepos.map((repo) => (
+                      <button
+                        key={repo.name}
+                        type="button"
+                        onClick={() => handleSelectRepo(repo)}
+                        className="flex w-full items-center justify-between px-3 py-2.5 text-left transition hover:bg-violet-50 dark:hover:bg-violet-950/30"
+                      >
+                        <div>
+                          <p className="text-sm font-black text-[#111331] dark:text-white">{repo.name}</p>
+                          {repo.description && (
+                            <p className="mt-0.5 truncate text-[11px] font-semibold text-slate-500 dark:text-neutral-400">
+                              {repo.description}
+                            </p>
+                          )}
+                        </div>
+                        {repo.language && (
+                          <span className="ml-3 shrink-0 rounded bg-violet-50 px-1.5 py-0.5 text-[10px] font-black text-violet-600 dark:bg-violet-950/40 dark:text-violet-300">
+                            {repo.language}
+                          </span>
+                        )}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Add/Edit form */}
+              {isFormOpen && (
+                <div className="mb-4 rounded-xl border border-violet-200 bg-violet-50/40 p-4 dark:border-violet-900/60 dark:bg-violet-950/20">
+                  <p className="mb-3 text-xs font-black uppercase tracking-wide text-violet-600 dark:text-violet-300">
+                    {editingIndex === -1 ? "New Project" : "Edit Project"}
+                  </p>
+                  <div className="space-y-3">
+                    <input
+                      type="text"
+                      placeholder="Project title *"
+                      value={formData.title}
+                      onChange={(e) => handleFormChange("title", e.target.value)}
+                      className="h-10 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm font-semibold text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-100 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100 dark:placeholder:text-neutral-600 dark:focus:border-violet-400 dark:focus:ring-violet-950/60"
+                    />
+                    <input
+                      type="text"
+                      placeholder="Short description"
+                      value={formData.subtitle}
+                      onChange={(e) => handleFormChange("subtitle", e.target.value)}
+                      className="h-10 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm font-semibold text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-100 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100 dark:placeholder:text-neutral-600 dark:focus:border-violet-400 dark:focus:ring-violet-950/60"
+                    />
+                    <input
+                      type="text"
+                      placeholder="Tags, comma-separated (max 4)"
+                      value={formData.tags}
+                      onChange={(e) => handleFormChange("tags", e.target.value)}
+                      className="h-10 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm font-semibold text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-100 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100 dark:placeholder:text-neutral-600 dark:focus:border-violet-400 dark:focus:ring-violet-950/60"
+                    />
+                    <input
+                      type="url"
+                      placeholder="Project URL (https://...)"
+                      value={formData.url}
+                      onChange={(e) => handleFormChange("url", e.target.value)}
+                      className="h-10 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm font-semibold text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-100 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100 dark:placeholder:text-neutral-600 dark:focus:border-violet-400 dark:focus:ring-violet-950/60"
+                    />
+                    <div>
+                      <p className="mb-2 text-xs font-black text-slate-500 dark:text-neutral-400">Preview color</p>
+                      <div className="flex gap-2">
+                        {PRESET_GRADIENTS.map((gradient) => (
+                          <button
+                            key={gradient}
+                            type="button"
+                            onClick={() => handleFormChange("preview", gradient)}
+                            className={`h-7 w-7 rounded-lg ${gradient} transition ${
+                              formData.preview === gradient
+                                ? "ring-2 ring-violet-600 ring-offset-2 dark:ring-violet-400"
+                                : ""
+                            }`}
+                            aria-label="Select gradient"
+                          />
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-3 flex gap-2">
+                    <button
+                      type="button"
+                      onClick={() => { setEditingIndex(null); setFormData(EMPTY_PROJECT); }}
+                      className="rounded-xl border border-slate-200 px-4 py-2 text-xs font-black text-slate-600 dark:border-neutral-700 dark:text-neutral-300"
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      type="button"
+                      onClick={handleSaveProject}
+                      className="rounded-xl bg-violet-600 px-4 py-2 text-xs font-black text-white dark:bg-violet-500"
+                    >
+                      {editingIndex === -1 ? "Add Project" : "Update Project"}
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {/* Projects list */}
+              {projects.length === 0 && !isFormOpen ? (
+                <div className="flex min-h-[80px] items-center justify-center rounded-xl border border-dashed border-violet-200 bg-violet-50/60 dark:border-violet-900/60 dark:bg-violet-950/20">
+                  <p className="text-sm font-bold text-slate-400 dark:text-neutral-500">
+                    No projects yet. Add one or import from GitHub.
+                  </p>
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  {projects.map((project, index) => (
+                    <div
+                      key={`${project.title}-${index}`}
+                      className="flex items-center gap-3 rounded-xl border border-slate-100 bg-white p-3 dark:border-neutral-800 dark:bg-neutral-950"
+                    >
+                      <div className={`h-10 w-10 shrink-0 rounded-lg ${project.preview}`} />
+                      <div className="min-w-0 flex-1">
+                        <p className="truncate text-sm font-black text-[#111331] dark:text-white">{project.title}</p>
+                        <p className="truncate text-[11px] font-semibold text-slate-500 dark:text-neutral-400">{project.subtitle}</p>
+                      </div>
+                      <div className="flex items-center gap-1.5">
+                        {project.url && (
+                          <a
+                            href={project.url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 text-slate-500 hover:text-violet-600 dark:border-neutral-700 dark:text-neutral-400 dark:hover:text-violet-300"
+                            aria-label="Open project"
+                          >
+                            <ExternalLink className="h-3.5 w-3.5" />
+                          </a>
+                        )}
+                        <button
+                          type="button"
+                          onClick={() => handleEdit(index)}
+                          className="rounded-lg border border-slate-200 px-2 py-1 text-[11px] font-black text-slate-600 hover:border-violet-300 hover:text-violet-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:text-violet-300"
+                        >
+                          Edit
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => handleDelete(index)}
+                          className="flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 text-slate-400 hover:border-red-200 hover:text-red-500 dark:border-neutral-700 dark:text-neutral-500 dark:hover:text-red-400"
+                          aria-label="Delete project"
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* Footer */}
+            <div className="flex items-center justify-between border-t border-slate-100 bg-slate-50 px-6 py-4 dark:border-neutral-800 dark:bg-neutral-950/60">
+              <button
+                type="button"
+                onClick={handleAddNew}
+                className="flex items-center gap-2 rounded-xl border border-slate-200 px-4 py-2.5 text-sm font-black text-slate-600 transition hover:border-violet-300 hover:bg-violet-50 hover:text-violet-700 dark:border-neutral-700 dark:text-neutral-300 dark:hover:border-violet-700 dark:hover:bg-violet-950/40 dark:hover:text-violet-300"
+              >
+                <Plus className="h-4 w-4" />
+                Add Project
+              </button>
+              <div className="flex gap-3">
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="rounded-xl border border-slate-200 px-5 py-2.5 text-sm font-black text-slate-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  onClick={handleSaveAll}
+                  disabled={saving}
+                  className="inline-flex items-center gap-2 rounded-xl bg-violet-600 px-5 py-2.5 text-sm font-black text-white shadow-lg shadow-violet-200 disabled:opacity-60 dark:bg-violet-500 dark:shadow-none"
+                >
+                  {saving ? (
+                    <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white" />
+                  ) : (
+                    <Save className="h-4 w-4" />
+                  )}
+                  {saving ? "Saving..." : "Save Projects"}
+                </button>
+              </div>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/MemoryRepresentation.jsx b/src/app/components/MemoryRepresentation.jsx
new file mode 100644
index 000000000..de466b843
--- /dev/null
+++ b/src/app/components/MemoryRepresentation.jsx
@@ -0,0 +1,103 @@
+"use client";
+
+import { useState } from "react";
+
+const structures = {
+  Array: ["10", "20", "30", "40", "50"],
+
+  "Linked List": ["Node 1", "Node 2", "Node 3"],
+
+  Stack: ["Top", "30", "20", "10"],
+
+  Queue: ["Front", "10", "20", "30", "Rear"],
+
+  Tree: ["Root", "Left Child", "Right Child"],
+
+  HashMap: [
+    "Bucket 0 → Empty",
+    "Bucket 1 → Key: A",
+    "Bucket 2 → Key: B",
+    "Bucket 3 → Empty",
+  ],
+};
+
+export default function MemoryRepresentation() {
+  const [selected, setSelected] = useState("Array");
+
+  return (
+    <div className="p-6">
+      
+      <h1 className="text-3xl font-bold text-center mb-6">
+        Data Structure Memory Representation
+      </h1>
+
+      {/* Structure Selector */}
+      <div className="flex flex-wrap justify-center gap-3 mb-8">
+        {Object.keys(structures).map((item) => (
+          <button
+            key={item}
+            onClick={() => setSelected(item)}
+            className={`px-4 py-2 rounded-lg font-medium transition ${
+              selected === item
+                ? "bg-blue-600 text-white"
+                : "bg-gray-200 dark:bg-gray-700"
+            }`}
+          >
+            {item}
+          </button>
+        ))}
+      </div>
+
+      {/* Memory Visualization */}
+      <div className="bg-gray-100 dark:bg-gray-800 rounded-xl p-6 shadow-lg">
+
+        <h2 className="text-xl font-semibold mb-4">
+          {selected} Memory Layout
+        </h2>
+
+        <div className="flex flex-wrap gap-4 justify-center">
+          {structures[selected].map((value, index) => (
+            <div
+              key={index}
+              className="
+                min-w-[100px]
+                p-4
+                border-2
+                border-blue-500
+                rounded-lg
+                bg-white
+                dark:bg-gray-900
+                text-center
+                shadow-md
+                hover:scale-105
+                transition
+              "
+            >
+              <p className="text-sm text-gray-500">
+                Address {index}
+              </p>
+
+              <p className="font-bold mt-2">
+                {value}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        {/* Explanation */}
+        <div className="mt-8 p-4 bg-blue-50 dark:bg-gray-700 rounded-lg">
+          <h3 className="font-semibold mb-2">
+            Memory Explanation
+          </h3>
+
+          <p>
+            This view demonstrates how the {selected} data structure stores
+            data internally in memory. The representation updates dynamically
+            when a different data structure is selected.
+          </p>
+        </div>
+
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/PersonalizedSection.jsx b/src/app/components/PersonalizedSection.jsx
new file mode 100644
index 000000000..d27ad8faf
--- /dev/null
+++ b/src/app/components/PersonalizedSection.jsx
@@ -0,0 +1,151 @@
+"use client";
+import React from "react";
+import Link from "next/link";
+
+/* DSA topic map — rows of topic cards, some completed, some locked */
+const TOPIC_ROWS = [
+  [
+    { label: "Arrays",        color: "#f87171", done: true },
+    { label: "Strings",       color: "#fb923c", done: true },
+    { label: "Hashing",       color: "#a78bfa", done: true },
+    { label: "Recursion",     color: "#34d399", done: true },
+  ],
+  [
+    { label: "Linked List",   color: "#f87171", done: true },
+    { label: "Stack",         color: "#60a5fa", done: true },
+    { label: "Queue",         color: "#a78bfa", done: true },
+    { label: "Binary Search", color: "#34d399", done: true },
+    { label: "Two Pointers",  color: "#fb923c", done: false, lock: true },
+  ],
+  [
+    { label: "Trees",         color: "#f87171", done: true },
+    { label: "BST",           color: "#60a5fa", done: true },
+    { label: "Heaps",         color: "#a78bfa", done: false, lock: false },
+    { label: "Tries",         color: "#34d399", done: false, lock: false },
+    { label: "Graphs",        color: "#fb923c", done: false, lock: true },
+    { label: "Sorting",       color: "#f472b6", done: false, lock: true },
+  ],
+  [
+    { label: "BFS / DFS",        color: "#f87171", done: false, lock: false },
+    { label: "Backtracking",     color: "#60a5fa", done: false, lock: true },
+    { label: "Greedy",           color: "#a78bfa", done: false, lock: true },
+    { label: "Divide & Conquer", color: "#34d399", done: false, lock: true },
+    { label: "Dynamic Prog.",    color: "#fb923c", done: false, lock: true },
+  ],
+  [
+    { label: "Sliding Window",   color: "#f87171", done: false, lock: true },
+    { label: "Bit Manipulation", color: "#60a5fa", done: false, lock: true },
+    { label: "Segment Tree",     color: "#a78bfa", done: false, lock: true },
+    { label: "Disjoint Set",     color: "#34d399", done: false, lock: true },
+  ],
+];
+
+function TopicCard({ label, color, lock }) {
+  return (
+    <div
+      className="relative flex flex-col gap-1 px-3 py-2 rounded-xl bg-white dark:bg-[#2d2f31] border border-[#e5e7eb] dark:border-[#3e4143] shadow-sm select-none transform-gpu will-change-transform transition-all duration-300 ease-in-out"
+      style={{
+        filter: lock ? "blur(3px)" : "none",
+        opacity: lock ? 0.55 : 1,
+        minWidth: "90px",
+      }}
+    >
+      {/* colour bar */}
+      <div className="h-[3px] w-8 rounded-full" style={{ background: color }} />
+      <span className="text-[12px] font-semibold text-[#1a1a1a] dark:text-[#f7f9fa] leading-tight transition-colors duration-300">
+        {label}
+      </span>
+    </div>
+  );
+}
+
+export default function PersonalizedSection() {
+  return (
+    <section
+      className="py-24 px-6 overflow-hidden bg-gradient-to-b from-white via-[#eef2ff] to-[#faf5ff] dark:from-[#1c1d1f] dark:via-[#1c1d1f] dark:to-[#1c1d1f] transition-colors duration-300"
+      style={{
+        fontFamily: "'Inter', 'Source Sans 3', sans-serif",
+      }}
+    >
+      <div className="max-w-[1100px] mx-auto flex flex-col lg:flex-row items-center gap-16 lg:gap-20">
+        {/* ── LEFT: text ── */}
+        <div className="flex-1 flex flex-col gap-5 items-start lg:min-w-[320px]">
+          <h2
+            className="text-[2.6rem] sm:text-[3.2rem] font-serif font-bold leading-[1.0] tracking-tight text-surface-900 dark:text-surface-50"
+            style={{
+            fontFamily: '"Source Serif 4", "Source Serif Pro", Georgia, serif'
+            }}>
+          
+            Your DSA path,
+            <br />
+            your pace
+          </h2>
+          <p className="text-[1.1rem] text-[#4b5563] dark:text-[#9e9e9e] leading-relaxed max-w-[400px] transition-colors duration-300">
+            Every topic you master unlocks the next. AlgoBuddy maps your
+            progress across Arrays, Trees, Graphs and beyond — so you always
+            know exactly where to go next.
+          </p>
+
+          <Link
+            href="/visualizer"
+            className="inline-flex items-center gap-2 h-[46px] px-7 rounded-full bg-[#1a1a1a] dark:bg-white text-white dark:text-[#1a1a1a] text-[15px] font-bold hover:bg-[#a435f0] dark:hover:bg-[#a435f0] dark:hover:text-white transition-all duration-200"
+          >
+            Start your path
+            <svg
+              className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-200"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2.5}
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M14 5l7 7m0 0l-7 7m7-7H3"
+              />
+            </svg>
+          </Link>
+        </div>
+
+        {/* ── RIGHT: topic map ── */}
+        <div className="flex-1 relative w-full overflow-hidden">
+
+          {/* fade edge LEFT — matches section bg in both modes */}
+          <div
+            className="absolute left-0 top-0 bottom-0 w-12 z-10 pointer-events-none
+                        bg-gradient-to-r from-[#eef2ff] to-transparent
+                        dark:from-[#1c1d1f] dark:to-transparent"
+          />
+
+          {/* fade edge RIGHT — matches section bg in both modes */}
+          <div
+            className="absolute right-0 top-0 bottom-0 w-24 z-10 pointer-events-none
+                        bg-gradient-to-l from-[#faf5ff] to-transparent
+                        dark:from-[#1c1d1f] dark:to-transparent"
+          />
+
+          {/* fade BOTTOM — matches section bg in both modes */}
+          <div
+            className="absolute left-0 right-0 bottom-0 h-20 z-10 pointer-events-none
+                        bg-gradient-to-t from-[#f0fdf4] to-transparent
+                        dark:from-[#1c1d1f] dark:to-transparent"
+          />
+
+          <div className="flex flex-col gap-3 py-2">
+            {TOPIC_ROWS.map((row, ri) => (
+              <div
+                key={ri}
+                className="flex gap-3 flex-wrap"
+                style={{ paddingLeft: `${ri * 14}px` }}
+              >
+                {row.map((topic, ti) => (
+                  <TopicCard key={ti} {...topic} />
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/components/PlaybackTimeline.jsx b/src/app/components/PlaybackTimeline.jsx
new file mode 100644
index 000000000..c19f23280
--- /dev/null
+++ b/src/app/components/PlaybackTimeline.jsx
@@ -0,0 +1,99 @@
+"use client";
+
+import React from "react";
+
+const PlaybackTimeline = ({
+  currentStep,
+  totalSteps,
+  setCurrentStep,
+  onPlay,
+  onPause,
+}) => {
+  return (
+    <div className="w-full bg-white dark:bg-gray-900 rounded-xl shadow-md p-5 mt-6">
+      <h2 className="text-lg font-semibold mb-4 text-gray-800 dark:text-white">
+        Playback Timeline
+      </h2>
+
+      {/* Step Information */}
+      <div className="flex justify-between mb-2 text-sm text-gray-600 dark:text-gray-300">
+        <span>
+          Current Step: <strong>{currentStep}</strong>
+        </span>
+        <span>
+          Total Steps: <strong>{totalSteps}</strong>
+        </span>
+      </div>
+
+      {/* Timeline Slider */}
+      <input
+        type="range"
+        min="0"
+        max={totalSteps}
+        value={currentStep}
+        onChange={(e) => setCurrentStep(Number(e.target.value))}
+        className="w-full cursor-pointer"
+      />
+
+      {/* Navigation Buttons */}
+      <div className="flex justify-center gap-3 mt-5">
+        <button
+          onClick={() =>
+            setCurrentStep((prev) => Math.max(prev - 1, 0))
+          }
+          className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:opacity-80"
+        >
+          ⏮ Previous
+        </button>
+
+        <button
+          onClick={onPlay}
+          className="px-4 py-2 bg-green-500 text-white rounded-lg hover:opacity-80"
+        >
+          ▶ Play
+        </button>
+
+        <button
+          onClick={onPause}
+          className="px-4 py-2 bg-red-500 text-white rounded-lg hover:opacity-80"
+        >
+          ⏸ Pause
+        </button>
+
+        <button
+          onClick={() =>
+            setCurrentStep((prev) =>
+              Math.min(prev + 1, totalSteps)
+            )
+          }
+          className="px-4 py-2 bg-purple-500 text-white rounded-lg hover:opacity-80"
+        >
+          ⏭ Next
+        </button>
+      </div>
+
+      {/* Important Step Markers */}
+      <div className="mt-5">
+        <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
+          Important Operations
+        </p>
+
+        <div className="flex gap-3 mt-2 text-xs">
+          <span className="bg-yellow-200 text-yellow-900 px-2 py-1 rounded">
+            Comparison
+          </span>
+
+          <span className="bg-green-200 text-green-900 px-2 py-1 rounded">
+            Swap
+          </span>
+
+          <span className="bg-blue-200 text-blue-900 px-2 py-1 rounded">
+            Insertion
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PlaybackTimeline;
\ No newline at end of file
diff --git a/src/app/components/PrivacyPolicyContent.jsx b/src/app/components/PrivacyPolicyContent.jsx
new file mode 100644
index 000000000..f7a2173eb
--- /dev/null
+++ b/src/app/components/PrivacyPolicyContent.jsx
@@ -0,0 +1,93 @@
+import { policySections } from "./PrivacyPolicyModal";
+import Link from "next/link";
+
+export default function PrivacyPolicyContent() {
+  return (
+    <div className="mx-auto max-w-10xl px-6 pt-3 pb-12">
+      <div className="mb-16 max-w-3xl">
+        <div className="inline-flex items-center justify-center px-3 py-1 rounded-full bg-gray-100 text-gray-600 dark:bg-[#1E1E26] dark:text-gray-300 text-xs font-bold tracking-[0.15em] uppercase mb-6">
+          Legal
+        </div>
+        <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900 dark:text-white tracking-tight mb-6">
+          Privacy Policy
+        </h1>
+        <p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
+          Your privacy is important to us. This Privacy Policy explains how
+          we collect, use, store, and protect your information when you use
+          our website and services.
+        </p>
+        <p className="text-sm text-gray-500 dark:text-gray-500 font-medium mt-6">
+          Last updated: May 29, 2026
+        </p>
+      </div>
+
+      <div className="grid gap-8 lg:grid-cols-[250px_1fr] items-start">
+        <aside className="sticky top-20 hidden lg:block">
+          <h2 className="mb-6 text-sm font-bold uppercase tracking-wider text-gray-900 dark:text-white">
+            Contents
+          </h2>
+          <ul className="space-y-3 border-l border-gray-200 dark:border-[#2A2A35]">
+            {policySections.map((item) => (
+              <li key={item.id}>
+                <a
+                  href={`#${item.id}`}
+                  className="block pl-4 py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white border-l-2 border-transparent hover:border-gray-400 dark:hover:border-gray-400 transition-all duration-200"
+                >
+                  {item.title}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </aside>
+
+        <div className="space-y-8">
+          {policySections.map((item) => (
+            <section
+              key={item.id}
+              id={item.id}
+              className="scroll-mt-24 pb-10 border-b border-gray-200 dark:border-[#2A2A35]"
+            >
+              <div className="flex items-start mb-4">
+                <div className="flex-1">
+                  <h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-4">
+                    {item.title}
+                  </h2>
+
+                  {item.points && (
+                    <ul className="space-y-2 text-gray-600 dark:text-gray-400 pl-6 mb-4">
+                      {item.points.map((point) => (
+                        <li key={point} className="list-disc pl-1">
+                          {point}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+
+                  {item.data && (
+                    <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                      {item.data}
+                    </p>
+                  )}
+
+                  {item.contact && (
+                    <p className="mt-4 text-gray-600 dark:text-gray-400 leading-relaxed">
+                      {item.contact}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </section>
+          ))}
+        </div>
+      </div>
+      <div className="pt-8 flex justify-end">
+        <Link
+          href="/"
+          className="px-6 py-3 bg-black text-white dark:bg-white dark:text-black font-semibold rounded-full hover:opacity-90 transition-all duration-200 active:scale-95"
+        >
+          Accept & Continue
+        </Link>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/PrivacyPolicyModal.jsx b/src/app/components/PrivacyPolicyModal.jsx
new file mode 100644
index 000000000..9b2b4f9a8
--- /dev/null
+++ b/src/app/components/PrivacyPolicyModal.jsx
@@ -0,0 +1,395 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+
+export const policySections = [
+  {
+    id: "information-we-collect",
+    title: "Information We Collect",
+    points: [
+      "Name",
+      "Email address",
+      "Authentication information (such as sign-in provider and account identifiers)",
+      "Device and browser information (such as IP address, browser type, operating system, and device metadata)",
+      "Usage analytics (such as pages visited, features used, and interaction events)",
+    ],
+  },
+  {
+    id: "how-we-use-your-information",
+    title: "How We Use Your Information",
+    points: [
+      "Account management, including account creation, login, and profile maintenance",
+      "Service improvement, including feature development, bug fixing, and performance optimization",
+      "Security monitoring to detect abuse, fraud, and unauthorized access attempts",
+      "User support, including responding to questions, troubleshooting, and service communication",
+    ],
+  },
+  {
+    id: "cookies-and-tracking-technologies",
+    title: "Cookies and Tracking Technologies",
+    points: [
+      "Essential cookies that are necessary for core platform functionality such as authentication and session continuity",
+      "Analytics cookies that help us understand product usage and improve platform performance",
+      "Preference cookies that remember your settings and improve personalization",
+    ],
+  },
+  {
+    id: "data-storage-and-security",
+    title: "Data Storage and Security",
+    points: [
+      "We use encryption and transport security practices to protect data in transit and, where applicable, at rest",
+      "We apply secure data handling processes and access controls for internal systems",
+      "We maintain safeguards to reduce the risk of unauthorized access, disclosure, alteration, or destruction of data",
+    ],
+  },
+  {
+    id: "third-party-services",
+    title: "Third-Party Services",
+    points: [
+      "Authentication providers that help us support secure sign-in",
+      "Analytics providers that assist with usage measurement and service quality monitoring",
+      "External APIs and service providers required to deliver product features",
+    ],
+  },
+  {
+    id: "user-rights",
+    title: "User Rights",
+    points: [
+      "Access personal data we hold about you",
+      "Correct inaccurate or incomplete personal data",
+      "Delete personal data, subject to legal and operational obligations",
+      "Request export of your personal data in a portable format where applicable",
+    ],
+  },
+  {
+    id: "data-retention",
+    title: "Data Retention",
+    data: "We retain personal data for as long as needed to provide our services, comply with legal obligations, resolve disputes, and enforce agreements. Retention periods vary based on the type of data and the purpose for which it was collected.",
+  },
+  {
+    id: "childrens-privacy",
+    title: "Children's Privacy",
+    data: "Our services are not intended for children under 13 years of age. We do not knowingly collect personal information from children under 13.",
+  },
+  {
+    id: "policy-updates",
+    title: "Policy Updates",
+    data: "We may update this Privacy Policy from time to time. Changes become effective when posted, and we may notify users through in-product notices or other appropriate communication channels when material updates occur.",
+  },
+  {
+    id: "contact-information",
+    title: "Contact Information",
+    data: "For privacy-related questions, requests, or concerns, please contact our support team.",
+    contact: "[Support contact details to be added]",
+  },
+];
+
+const PrivacyPolicyModal = ({ isOpen, onClose }) => {
+  const modalRef = useRef(null);
+  const closeBtnRef = useRef(null);
+  const scrollRef = useRef(null);
+  const sectionRefs = useRef({});
+  const [shouldRender, setShouldRender] = useState(isOpen);
+  const [isVisible, setIsVisible] = useState(false);
+  const [scrollProgress, setScrollProgress] = useState(0);
+  const [activeSection, setActiveSection] = useState(policySections[0].id);
+
+  const focusableSelector = useMemo(
+    () =>
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    []
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      setShouldRender(true);
+      const frame = requestAnimationFrame(() => setIsVisible(true));
+      return () => cancelAnimationFrame(frame);
+    }
+
+    setIsVisible(false);
+    const timeout = setTimeout(() => setShouldRender(false), 220);
+    return () => clearTimeout(timeout);
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (shouldRender) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [shouldRender]);
+
+  useEffect(() => {
+    if (!shouldRender || !modalRef.current) return;
+
+    const previouslyFocused = document.activeElement;
+    closeBtnRef.current?.focus();
+
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+        return;
+      }
+
+      if (event.key !== "Tab") return;
+
+      const focusables = Array.from(
+        modalRef.current.querySelectorAll(focusableSelector)
+      ).filter((el) => !el.hasAttribute("disabled"));
+
+      if (focusables.length === 0) return;
+
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      if (previouslyFocused && typeof previouslyFocused.focus === "function") {
+        previouslyFocused.focus();
+      }
+    };
+  }, [shouldRender, onClose, focusableSelector]);
+
+  useEffect(() => {
+    if (!shouldRender || !scrollRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.filter((entry) => entry.isIntersecting);
+
+        if (visible.length === 0) return;
+
+        const mostVisible = visible.reduce((prev, current) =>
+          current.intersectionRatio > prev.intersectionRatio ? current : prev
+      );
+
+      setActiveSection(mostVisible.target.id);
+    },
+    {
+      root: scrollRef.current,
+      rootMargin: "-25% 0px -55% 0px",
+      threshold: [0.1, 0.25, 0.5, 0.75],
+    }
+  );
+
+    policySections.forEach((item) => {
+      const section = sectionRefs.current[item.id];
+      if (section) observer.observe(section);
+    });
+
+    return () => observer.disconnect();
+  }, [shouldRender]);
+
+  const handleScroll = () => {
+    const node = scrollRef.current;
+    if (!node) return;
+    const max = node.scrollHeight - node.clientHeight;
+    const progress = max > 0 ? (node.scrollTop / max) * 100 : 0;
+    setScrollProgress(Math.min(100, Math.max(0, progress)));
+    if (node.scrollTop + node.clientHeight >= node.scrollHeight - 10) {
+    setActiveSection("contact-information");
+    }
+  };
+
+    const scrollToSection = (id) => {
+    const scroller = scrollRef.current;
+    const section = sectionRefs.current[id];
+    if (!scroller || !section) return;
+
+    const headerOffset = 120;
+    const top =
+      section.getBoundingClientRect().top -
+      scroller.getBoundingClientRect().top +
+      scroller.scrollTop -
+      headerOffset;
+
+    scroller.scrollTo({ top: Math.max(0, top), behavior: "smooth" });
+    setActiveSection(id);
+  };
+
+  if (!shouldRender) return null;
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-3 sm:p-4">
+      <div
+        className={`fixed inset-0 bg-black/60 transition-opacity duration-200 ${
+          isVisible ? "opacity-100" : "opacity-0"
+        }`}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      <div
+        ref={modalRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="privacy-policy-title"
+        className={`relative flex h-[min(92vh,calc(100dvh-1.5rem))] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-neutral-200 bg-white text-neutral-900 shadow-xl transition-all duration-200 sm:h-[min(90vh,calc(100dvh-2rem))] dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100 ${
+          isVisible
+            ? "translate-y-0 opacity-100 scale-100"
+            : "translate-y-2 opacity-0 scale-[0.99]"
+        }`}
+      >
+        <div className="sticky top-0 z-20 border-b border-neutral-200 bg-white/95 px-5 py-2.5 backdrop-blur-sm sm:px-7 dark:border-neutral-700 dark:bg-neutral-900/95">
+          <div
+            className="absolute left-0 top-0 h-[1.5px] bg-neutral-800 transition-[width] duration-150 dark:bg-neutral-200"
+            style={{ width: `${scrollProgress}%` }}
+            aria-hidden="true"
+          />
+          <div className="flex items-center justify-between gap-4">
+            <div>
+              <p className="text-[11px] font-medium uppercase tracking-[0.14em] text-neutral-500 dark:text-neutral-400">
+                Legal
+              </p>
+              <h2
+                id="privacy-policy-title"
+                className="mt-0.5 text-lg font-semibold tracking-tight sm:text-xl"
+              >
+                Privacy Policy
+              </h2>
+            </div>
+            <button
+              ref={closeBtnRef}
+              onClick={onClose}
+              className="rounded-md border border-neutral-300 p-1.5 text-neutral-600 transition-colors hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-500 dark:border-neutral-600 dark:text-neutral-300 dark:hover:bg-neutral-800"
+              aria-label="Close Privacy Policy"
+            >
+              <FiX className="w-6 h-6" />
+            </button>
+          </div>
+        </div>
+
+        <div
+          ref={scrollRef}
+          onScroll={handleScroll}
+          className="min-h-0 flex-1 overflow-y-auto scroll-smooth px-5 py-5 sm:px-7 sm:py-6 scrollbar-thin scrollbar-thumb-neutral-400 scrollbar-track-transparent dark:scrollbar-thumb-neutral-600"
+          style={{ scrollPaddingTop: "6.5rem", scrollPaddingBottom: "5rem" }}
+        >
+          <div className="mx-auto w-full max-w-4xl">
+            <p className="max-w-2xl text-[15px] leading-7 text-neutral-700 dark:text-neutral-300 sm:text-base">
+              Your privacy is important to us. This Privacy Policy explains how
+              we collect, use, store, and protect your information when you use
+              our website and services.
+            </p>
+            <p className="mt-2.5 text-xs text-neutral-500 dark:text-neutral-400 sm:text-sm">
+              Last updated: May 29, 2026
+            </p>
+
+            <div className="mt-7 grid gap-6 lg:grid-cols-[220px_minmax(0,1fr)] lg:gap-8">
+              <aside className="hidden lg:block">
+                <nav className="sticky top-24" aria-label="Privacy policy sections">
+                  <p className="mb-4 text-xs font-semibold uppercase tracking-[0.12em] text-neutral-500 dark:text-neutral-400">
+                    Contents
+                  </p>
+                  <ul className="space-y-1.5">
+                    {policySections.map((item) => (
+                      <li key={item.id}>
+                        <button
+                          type="button"
+                          onClick={() => scrollToSection(item.id)}
+                          aria-current={
+                            activeSection === item.id ? "location" : undefined
+                          }
+                          className={`text-left text-[13px] leading-5 transition-colors focus:outline-none focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-neutral-500 ${
+                            activeSection === item.id
+                              ? "font-medium text-neutral-900 dark:text-neutral-100"
+                              : "text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"
+                          }`}
+                        >
+                          {item.title}
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                </nav>
+              </aside>
+
+              <div className="mx-auto w-full max-w-2xl">
+                <div className="mb-6 lg:hidden">
+                  <label
+                    htmlFor="privacy-toc-select"
+                    className="mb-2 block text-xs font-semibold uppercase tracking-[0.12em] text-neutral-500 dark:text-neutral-400"
+                  >
+                    Jump to section
+                  </label>
+                  <select
+                    id="privacy-toc-select"
+                    value={activeSection}
+                    onChange={(event) => scrollToSection(event.target.value)}
+                    className="w-full rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-sm text-neutral-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-500 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100"
+                  >
+                    {policySections.map((item) => (
+                      <option key={item.id} value={item.id}>
+                        {item.title}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div className="space-y-9 pb-24">
+                  {policySections.map((item) => (
+                    <section
+                      key={item.id}
+                      id={item.id}
+                      ref={(node) => {
+                        sectionRefs.current[item.id] = node;
+                      }}
+                      className="scroll-mt-24 border-b border-neutral-200 pb-7 last:border-b-0 last:pb-0 dark:border-neutral-700"
+                    >
+                      <h3 className="text-lg font-semibold tracking-tight sm:text-xl">
+                        {item.title}
+                      </h3>
+                      {item.points && (
+                        <ul className="mt-3 space-y-1 pl-5 text-[13px] leading-5 text-neutral-700 marker:text-neutral-500 dark:text-neutral-300 dark:marker:text-neutral-400 sm:text-[15px] sm:leading-7">
+                          {item.points.map((subitem) => (
+                            <li key={subitem} className="list-disc">
+                              {subitem}
+                            </li>
+                          ))}
+                        </ul>
+                      )}
+                      {item.data && (
+                        <p className="mt-2.5 text-[13px] leading-5 text-neutral-700 dark:text-neutral-300 sm:text-[15px] sm:leading-7">
+                          {item.data}
+                        </p>
+                      )}
+                      {item.contact && (
+                        <p className="mt-2 text-[13px] leading-5 text-neutral-700 dark:text-neutral-300 sm:text-[15px] sm:leading-7">
+                          {item.contact}
+                        </p>
+                      )}
+                    </section>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      
+
+        <div className="sticky bottom-0 flex justify-end border-t border-neutral-200 bg-white/95 p-3 backdrop-blur-sm dark:border-neutral-700 dark:bg-neutral-900/95">
+          <button
+            onClick={onClose}
+            className="rounded-md border border-neutral-300 bg-neutral-900 px-4 py-1.5 text-sm font-semibold text-white transition-colors hover:bg-neutral-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-500 dark:border-neutral-600 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-300"
+          >
+            I Understand
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PrivacyPolicyModal;
diff --git a/src/app/components/ProgressHeatmap.jsx b/src/app/components/ProgressHeatmap.jsx
new file mode 100644
index 000000000..c5ed1d25d
--- /dev/null
+++ b/src/app/components/ProgressHeatmap.jsx
@@ -0,0 +1,44 @@
+"use client";
+
+import React from "react";
+
+const topics = [
+  { name: "Sorting", progress: 90 },
+  { name: "Searching", progress: 75 },
+  { name: "Trees & Graphs", progress: 60 },
+  { name: "Linked Lists", progress: 80 },
+  { name: "Stacks & Queues", progress: 70 },
+  { name: "Hash Maps", progress: 50 },
+];
+
+export default function ProgressHeatmap() {
+  return (
+    <div className="bg-slate-900 text-white p-6 rounded-xl shadow-lg">
+      <h2 className="text-xl font-bold mb-4">
+        Algorithm Learning Heatmap
+      </h2>
+
+      <div className="space-y-4">
+        {topics.map((topic, index) => (
+          <div key={index}>
+            <div className="flex justify-between mb-1">
+              <span>{topic.name}</span>
+              <span>{topic.progress}%</span>
+            </div>
+
+            <div className="w-full bg-slate-700 rounded-full h-4">
+              <div
+                className="bg-green-500 h-4 rounded-full"
+                style={{ width: `${topic.progress}%` }}
+              ></div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <p className="mt-5 text-sm text-gray-300">
+        Track your strengths and identify topics that need more practice.
+      </p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/SectionsDisplay.jsx b/src/app/components/SectionsDisplay.jsx
new file mode 100644
index 000000000..294963b3b
--- /dev/null
+++ b/src/app/components/SectionsDisplay.jsx
@@ -0,0 +1,128 @@
+'use client';
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { FiChevronRight, FiSearch, FiInfo } from 'react-icons/fi';
+import { useState } from 'react';
+
+const InfoPopup = ({ info }) => {
+  return (
+    <div className="absolute top-full right-0 mt-2 w-64 bg-white dark:bg-surface-900 rounded-xl shadow-xl border border-surface-200 dark:border-surface-700 p-4 z-10">
+      {Object.entries(info).map(([key, value]) => (
+        <div key={key} className="mb-2 last:mb-0">
+          <span className="font-semibold text-surface-900 dark:text-surface-50">{key}: </span>
+          <span className="text-surface-600 dark:text-surface-400">{value}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const SectionsDisplay = ({ sections, searchQuery }) => {
+  const [hoveredSection, setHoveredSection] = useState(null);
+
+  return (
+    <div className="max-w-7xl mx-auto space-y-6 px-4 sm:px-1">
+      {sections.map((section, sectionIndex) => (
+        <motion.div
+          key={sectionIndex}
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3, delay: sectionIndex * 0.05 }}
+          className="group relative bg-white dark:bg-surface-900 rounded-2xl border border-surface-200 dark:border-surface-800 overflow-hidden transition-all duration-300 hover:shadow-md hover:border-primary/30 dark:hover:border-primary/30"
+        >
+          {/* Section Header */}
+          <div className="px-6 py-5 border-b border-surface-100 dark:border-surface-800 flex items-center justify-between bg-surface-50 dark:bg-surface-900">
+            <div className="flex items-center gap-4">
+              <div className="w-10 h-10 rounded-xl bg-primary/5 dark:bg-primary/20 flex items-center justify-center text-primary">
+                {section.icon}
+              </div>
+              <h2 className="text-xl font-bold tracking-tighter text-surface-900 dark:text-surface-50">{section.title}</h2>
+            </div>
+            {section.info && (
+              <div
+                className="relative"
+                onMouseEnter={() => setHoveredSection(sectionIndex)}
+                onMouseLeave={() => setHoveredSection(null)}
+              >
+                <FiInfo className="h-5 w-5 text-surface-400 hover:text-primary cursor-pointer transition-colors" />
+                {hoveredSection === sectionIndex && (
+                  <InfoPopup info={section.info} />
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Section Content */}
+          <div className="p-6">
+            {section.subsections ? (
+              <div className="space-y-7">
+                {section.subsections.map((subsection, subIndex) => (
+                  <div key={subIndex}>
+                    <h3 className="text-[15px] font-semibold text-surface-900 dark:text-surface-50 mb-4 pl-3 border-l-[3px] border-primary">
+                      {subsection.title}
+                    </h3>
+                    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+                      {subsection.items.map((item, itemIndex) => (
+                        <Link
+                          key={itemIndex}
+                          href={item.path}
+                          className="group/item relative block p-4 rounded-xl border border-surface-200 dark:border-surface-800 hover:border-primary/50 dark:hover:border-primary/50 transition-all duration-200 bg-white dark:bg-surface-900 hover:bg-primary/5 dark:hover:bg-primary/10 overflow-hidden"
+                        >
+                          <div className="flex items-center justify-between">
+                            <span className="text-surface-700 dark:text-surface-300 group-hover/item:text-primary dark:group-hover/item:text-primary-light font-medium text-[14px] transition-colors">
+                              {item.name}
+                            </span>
+                            <FiChevronRight className="h-4 w-4 text-surface-300 dark:text-surface-600 group-hover/item:text-primary transition-colors flex-shrink-0" />
+                          </div>
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                {section.items?.map((item, itemIndex) => (
+                  <Link
+                    key={itemIndex}
+                    href={item.path}
+                    className="group/item relative block p-4 rounded-xl border border-surface-200 dark:border-surface-800 hover:border-primary/50 dark:hover:border-primary/50 transition-all duration-200 bg-white dark:bg-surface-900 hover:bg-primary/5 dark:hover:bg-primary/10 overflow-hidden"
+                  >
+                    <div className="flex items-center justify-between">
+                      <span className="text-surface-700 dark:text-surface-300 group-hover/item:text-primary dark:group-hover/item:text-primary-light font-medium text-[14px] transition-colors">
+                        {item.name}
+                      </span>
+                      <FiChevronRight className="h-4 w-4 text-surface-300 dark:text-surface-600 group-hover/item:text-primary transition-colors flex-shrink-0" />
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            )}
+          </div>
+        </motion.div>
+      ))}
+
+      {/* Empty State */}
+      {sections.length === 0 && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.3 }}
+          className="text-center py-16"
+        >
+          <div className="w-20 h-20 mx-auto mb-6 bg-primary/5 dark:bg-primary/10 rounded-full flex items-center justify-center">
+            <FiSearch className="h-9 w-9 text-primary" />
+          </div>
+          <h3 className="text-2xl font-bold tracking-tighter text-surface-900 dark:text-surface-50 mb-3">
+            No results found
+          </h3>
+          <p className="text-surface-500 dark:text-surface-400 max-w-md mx-auto">
+            Try searching for different terms or browse our categories
+          </p>
+        </motion.div>
+      )}
+    </div>
+  );
+};
+
+export default SectionsDisplay;
\ No newline at end of file
diff --git a/src/app/components/SmartRevisionFlashcards.jsx b/src/app/components/SmartRevisionFlashcards.jsx
new file mode 100644
index 000000000..a5d8d9b7d
--- /dev/null
+++ b/src/app/components/SmartRevisionFlashcards.jsx
@@ -0,0 +1,784 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+
+const flashcards = {
+  Easy: [
+    {
+      topic: "Array",
+      question: "What is an Array?",
+      answer: "A collection of elements stored in contiguous memory.",
+      explanation:
+        "Arrays store elements sequentially in memory, allowing direct access using indexes in O(1) time."
+    },
+    {
+      topic: "Stack",
+      question: "Which principle does Stack follow?",
+      answer: "LIFO (Last In First Out).",
+      explanation:
+        "The last element inserted into the stack is the first one removed."
+    },
+  ],
+
+  Medium: [
+    {
+      topic: "Binary Search",
+      question: "What is the time complexity of Binary Search?",
+      answer: "O(log n)",
+      explanation:
+        "Binary Search repeatedly divides the search space into two halves."
+    },
+    {
+      topic: "Merge Sort",
+      question: "What is the average time complexity of Merge Sort?",
+      answer: "O(n log n)",
+      explanation:
+        "Merge Sort uses divide and conquer and merges sorted subarrays."
+    },
+  ],
+
+  Hard: [
+    {
+      topic: "AVL Tree",
+      question: "What is the purpose of AVL Tree rotations?",
+      answer: "To keep the tree balanced after insertions and deletions.",
+      explanation:
+        "Rotations maintain balance factors and keep operations O(log n)."
+    },
+    {
+      topic: "Dynamic Programming",
+      question: "What is memoization?",
+      answer: "Storing results of expensive computations to avoid recalculation.",
+      explanation:
+        "Memoization saves previously computed results to avoid repeated work."
+    },
+  ],
+};
+
+export default function SmartRevisionFlashcards() {
+  const [difficulty, setDifficulty] = useState("Easy");
+  const [selectedTopic, setSelectedTopic] = useState("All");
+  const [index, setIndex] = useState(0);
+  const [showAnswer, setShowAnswer] = useState(false);
+  const [totalScore, setTotalScore] = useState(0);
+  const [weeklyScore, setWeeklyScore] = useState(0);
+  const [monthlyScore, setMonthlyScore] = useState(0);
+  const [personalBest, setPersonalBest] = useState(0);
+  const [completedCards, setCompletedCards] = useState(0);
+  const [easyCompleted, setEasyCompleted] = useState(0);
+  const [mediumCompleted, setMediumCompleted] = useState(0);
+  const [hardCompleted, setHardCompleted] = useState(0);
+  const [streak, setStreak] = useState(1);
+  const [history, setHistory] = useState([]);
+  const [dailyChallenge, setDailyChallenge] = useState(null);
+  const [challengeCompleted, setChallengeCompleted] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [sortOption, setSortOption] = useState("default");
+  const [weakTopics, setWeakTopics] = useState([]);
+  const [recommendedDifficulty, setRecommendedDifficulty] = useState("Easy");
+  const [favorites, setFavorites] = useState([]);
+  const [correctAnswers, setCorrectAnswers] = useState(0);
+  const [incorrectAnswers, setIncorrectAnswers] = useState(0);
+  const [sessionStartTime] = useState(Date.now());
+  const [showSummary, setShowSummary] = useState(false);
+  const [badges, setBadges] = useState([]);
+
+  const toggleFavorite = () => {
+  const currentCard = currentCards[index];
+
+  const exists = favorites.find(
+    (card) => card.question === currentCard.question
+  );
+
+  if (exists) {
+    setFavorites(
+      favorites.filter(
+        (card) => card.question !== currentCard.question
+      )
+    );
+  } else {
+    setFavorites([...favorites, currentCard]);
+  }
+};
+
+  const topics = [
+  "All",
+  "Array",
+  "Stack",
+  "Binary Search",
+  "Merge Sort",
+  "AVL Tree",
+  "Dynamic Programming",
+];
+
+  let currentCards =
+  selectedTopic === "All"
+    ? flashcards[difficulty]
+    : flashcards[difficulty].filter(
+        (card) => card.topic === selectedTopic
+      );
+
+currentCards = currentCards.filter((card) =>
+  card.topic.toLowerCase().includes(searchTerm.toLowerCase())
+);
+
+if (sortOption === "az") {
+  currentCards = [...currentCards].sort((a, b) =>
+    a.topic.localeCompare(b.topic)
+  );
+}
+
+if (sortOption === "za") {
+  currentCards = [...currentCards].sort((a, b) =>
+    b.topic.localeCompare(a.topic)
+  );
+}
+
+      const generateDailyChallenge = () => {
+  const allCards = [
+    ...flashcards.Easy,
+    ...flashcards.Medium,
+    ...flashcards.Hard,
+  ];
+
+  const randomCard =
+    allCards[Math.floor(Math.random() * allCards.length)];
+
+  setDailyChallenge(randomCard);
+  setChallengeCompleted(false);
+};
+
+useEffect(() => {
+  generateDailyChallenge();
+}, []);
+
+useEffect(() => {
+  generateAIRecommendations();
+}, [
+  history,
+  easyCompleted,
+  mediumCompleted,
+  hardCompleted,
+]);
+
+useEffect(() => {
+  checkAchievements();
+}, [
+  streak,
+  completedCards,
+  hardCompleted,
+]);
+
+      if (currentCards.length === 0) {
+  return (
+    <div className="bg-slate-900 text-white p-6 rounded-xl shadow-lg max-w-xl mx-auto">
+      <h2 className="text-2xl font-bold mb-4">
+        Smart Revision Flashcards
+      </h2>
+
+      <p className="text-gray-400">
+        No flashcards available for this topic.
+      </p>
+    </div>
+  );
+}
+
+const difficultyPoints = {
+  Easy: 5,
+  Medium: 10,
+  Hard: 20,
+};
+
+const generateAIRecommendations = () => {
+  const topicCounts = {};
+
+  history.forEach((topic) => {
+    topicCounts[topic] = (topicCounts[topic] || 0) + 1;
+  });
+
+  const weak = Object.keys(topicCounts)
+    .sort((a, b) => topicCounts[a] - topicCounts[b])
+    .slice(0, 3);
+
+  setWeakTopics(weak);
+
+  if (hardCompleted < 5) {
+    setRecommendedDifficulty("Hard");
+  } else if (mediumCompleted < 5) {
+    setRecommendedDifficulty("Medium");
+  } else {
+    setRecommendedDifficulty("Easy");
+  }
+};
+
+const checkAchievements = () => {
+  const earnedBadges = [];
+
+  if (streak >= 3) {
+    earnedBadges.push("🔥 3-Day Revision Streak");
+  }
+
+  if (streak >= 7) {
+    earnedBadges.push("🚀 7-Day Revision Streak");
+  }
+
+  if (streak >= 30) {
+    earnedBadges.push("👑 30-Day Revision Master");
+  }
+
+  if (completedCards >= 100) {
+    earnedBadges.push("🏆 100 Flashcards Completed");
+  }
+
+  if (hardCompleted >= 25) {
+    earnedBadges.push("💎 Hard Difficulty Expert");
+  }
+
+  setBadges(earnedBadges);
+};
+
+const totalCards =
+  flashcards.Easy.length +
+  flashcards.Medium.length +
+  flashcards.Hard.length;
+
+const progressPercentage = Math.min(
+  (completedCards / totalCards) * 100,
+  100
+);
+
+  const nextCard = () => {
+  const points = difficultyPoints[difficulty];
+
+  const newTotal = totalScore + points;
+
+  setTotalScore(newTotal);
+  setWeeklyScore((prev) => prev + points);
+  setMonthlyScore((prev) => prev + points);
+
+  setCompletedCards((prev) => prev + 1);
+
+if (difficulty === "Easy") {
+  setEasyCompleted((prev) => prev + 1);
+}
+
+if (difficulty === "Medium") {
+  setMediumCompleted((prev) => prev + 1);
+}
+
+if (difficulty === "Hard") {
+  setHardCompleted((prev) => prev + 1);
+}
+
+setHistory((prev) => [
+  ...prev,
+  currentCards[index].topic,
+]);
+
+  if (newTotal > personalBest) {
+    setPersonalBest(newTotal);
+  }
+
+  setIndex((index + 1) % currentCards.length);
+  setShowAnswer(false);
+};
+
+  const previousCard = () => {
+  setIndex((index - 1 + currentCards.length) % currentCards.length);
+  setShowAnswer(false);
+};
+
+const attemptedQuestions =
+  correctAnswers + incorrectAnswers;
+
+const accuracy =
+  attemptedQuestions === 0
+    ? 0
+    : (
+        (correctAnswers / attemptedQuestions) *
+        100
+      ).toFixed(1);
+
+const timeSpent = Math.floor(
+  (Date.now() - sessionStartTime) / 1000
+);
+
+  return (
+    <div className="bg-slate-900 text-white p-6 rounded-xl shadow-lg max-w-xl mx-auto">
+      <h2 className="text-2xl font-bold mb-4">
+        Smart Revision Flashcards
+      </h2>
+
+      <div className="grid grid-cols-2 gap-3 mb-5">
+  <div className="bg-slate-800 p-3 rounded">
+    <p className="text-xs text-gray-400">Total Score</p>
+    <p className="text-xl font-bold text-green-400">
+      {totalScore}
+    </p>
+  </div>
+
+  <div className="bg-slate-800 p-4 rounded-lg mb-5">
+  <div className="flex justify-between items-center mb-3">
+    <h3 className="font-bold text-lg">
+      🎯 Daily Revision Challenge
+    </h3>
+
+    <button
+      onClick={generateDailyChallenge}
+      className="px-3 py-1 bg-purple-600 rounded hover:bg-purple-700"
+    >
+      New Challenge
+    </button>
+  </div>
+
+  {dailyChallenge && (
+    <>
+      <p className="text-purple-300 mb-2">
+        Topic: {dailyChallenge.topic}
+      </p>
+
+      <p className="mb-3">
+        {dailyChallenge.question}
+      </p>
+
+      {!challengeCompleted ? (
+        <button
+          onClick={() => {
+  setChallengeCompleted(true);
+
+  setTotalScore((prev) => prev + 25);
+
+  setWeeklyScore((prev) => prev + 25);
+
+  setMonthlyScore((prev) => prev + 25);
+
+  const updatedScore = totalScore + 25;
+
+  if (updatedScore > personalBest) {
+    setPersonalBest(updatedScore);
+  }
+}}
+          className="px-4 py-2 bg-green-600 rounded hover:bg-green-700"
+        >
+          Complete Challenge
+        </button>
+      ) : (
+        <div>
+          <p className="text-green-400 font-semibold">
+            ✓ Challenge Completed
+          </p>
+
+          <p className="text-yellow-400 mt-2">
+            🏆 Daily Reward Earned
+          </p>
+        </div>
+      )}
+    </>
+  )}
+</div>
+
+  <div className="bg-slate-800 p-3 rounded">
+    <p className="text-xs text-gray-400">Weekly Score</p>
+    <p className="text-xl font-bold text-blue-400">
+      {weeklyScore}
+    </p>
+  </div>
+
+  <div className="bg-slate-800 p-3 rounded">
+    <p className="text-xs text-gray-400">Monthly Score</p>
+    <p className="text-xl font-bold text-yellow-400">
+      {monthlyScore}
+    </p>
+  </div>
+
+  <div className="bg-slate-800 p-3 rounded">
+    <p className="text-xs text-gray-400">Personal Best</p>
+    <p className="text-xl font-bold text-purple-400">
+      {personalBest}
+    </p>
+  </div>
+  <div className="bg-slate-800 p-3 rounded">
+  <p className="text-xs text-gray-400">
+    Favorites
+  </p>
+
+  <p className="text-xl font-bold text-yellow-400">
+    {favorites.length}
+  </p>
+</div>
+</div>
+
+      <div
+        onClick={() => setShowAnswer(!showAnswer)}
+        className={`
+          bg-slate-800
+          p-5
+          rounded-lg
+          min-h-[180px]
+          cursor-pointer
+          transition-all
+          duration-500
+          hover:scale-105
+          flex
+          flex-col
+          justify-center
+          items-center
+          text-center
+          ${showAnswer ? "scale-105 shadow-lg" : ""}
+        `}
+      >
+  <div className="flex justify-between items-center w-full mb-3">
+  <h3 className="text-lg font-bold">
+    {currentCards[index].topic}
+  </h3>
+
+  <p className="text-xs text-gray-400">
+    Card {index + 1} of {currentCards.length}
+  </p>
+
+  <button
+    onClick={(e) => {
+      e.stopPropagation();
+      toggleFavorite();
+    }}
+    className="text-yellow-400 text-xl"
+  >
+    ⭐
+  </button>
+</div>
+
+  {!showAnswer ? (
+    <>
+      <p className="text-lg">
+        {currentCards[index].question}
+      </p>
+
+      <p className="mt-4 text-sm text-gray-400">
+        Click card to reveal answer
+      </p>
+    </>
+  ) : (
+  <>
+    <p className="text-green-400 text-lg font-semibold">
+      {currentCards[index].answer}
+    </p>
+
+    <div className="mt-4 p-3 bg-slate-700 rounded-lg">
+      <h4 className="font-semibold text-purple-300 mb-2">
+        Detailed Explanation
+      </h4>
+
+      <p className="text-sm text-gray-200">
+        {currentCards[index].explanation}
+      </p>
+    </div>
+
+    <p className="mt-4 text-sm text-gray-400">
+      Click card to see question
+    </p>
+  </>
+)}
+</div>
+
+<div className="mt-5">
+  <input
+    type="text"
+    placeholder="Search revision topics..."
+    value={searchTerm}
+    onChange={(e) => {
+      setSearchTerm(e.target.value);
+      setIndex(0);
+    }}
+    className="w-full p-3 rounded bg-slate-800 border border-slate-700"
+  />
+</div>
+
+<div className="mt-3">
+  <select
+    value={sortOption}
+    onChange={(e) => setSortOption(e.target.value)}
+    className="w-full p-3 rounded bg-slate-800 border border-slate-700"
+  >
+    <option value="default">Default Order</option>
+    <option value="az">A → Z Topics</option>
+    <option value="za">Z → A Topics</option>
+  </select>
+</div>
+
+<div className="mt-5">
+  <h3 className="text-sm text-gray-400 mb-2">
+    Select Topic
+  </h3>
+
+  <div className="flex flex-wrap gap-2">
+    {topics.map((topic) => (
+      <button
+        key={topic}
+        onClick={() => {
+          setSelectedTopic(topic);
+          setIndex(0);
+          setShowAnswer(false);
+        }}
+        className={`px-3 py-2 rounded transition ${
+          selectedTopic === topic
+            ? "bg-purple-600 text-white"
+            : "bg-slate-700 hover:bg-slate-600"
+        }`}
+      >
+        {topic}
+      </button>
+    ))}
+  </div>
+</div>
+
+      <div className="mt-5 flex gap-2">
+        {["Easy", "Medium", "Hard"].map((level) => (
+          <button
+            key={level}
+            onClick={() => {
+              setDifficulty(level);
+              setIndex(0);
+              setShowAnswer(false);
+            }}
+            className="px-3 py-2 bg-slate-700 rounded hover:bg-slate-600"
+          >
+            {level}
+          </button>
+        ))}
+      </div>
+
+      <p className="mt-3 text-sm text-green-400">
+  Current Difficulty Reward: +{difficultyPoints[difficulty]} points
+</p>
+
+<div className="mt-5 bg-slate-800 p-4 rounded-lg">
+  <h3 className="font-bold text-lg mb-3">
+    Revision Analytics
+  </h3>
+
+  <p>Completed Cards: {completedCards}</p>
+
+  <p>Easy Completed: {easyCompleted}</p>
+
+  <p>Medium Completed: {mediumCompleted}</p>
+
+  <p>Hard Completed: {hardCompleted}</p>
+
+  <p>Daily Streak: 🔥 {streak} Days</p>
+</div>
+
+<div className="mt-5 bg-slate-800 p-4 rounded-lg">
+  <h3 className="font-bold text-lg mb-3">
+    🤖 AI Personalized Revision
+  </h3>
+
+  <p className="mb-2">
+    Recommended Difficulty:
+    <span className="ml-2 text-green-400 font-semibold">
+      {recommendedDifficulty}
+    </span>
+  </p>
+
+  <p className="mb-2">
+    Topics Needing Revision:
+  </p>
+
+  <ul className="text-sm text-gray-300">
+    {weakTopics.length > 0 ? (
+      weakTopics.map((topic, idx) => (
+        <li key={idx}>📌 {topic}</li>
+      ))
+    ) : (
+      <li>No revision data yet.</li>
+    )}
+  </ul>
+
+  <p className="mt-3 text-purple-400">
+    AI Suggestion: Focus on weaker topics first.
+  </p>
+</div>
+
+<div className="mt-5 bg-slate-800 p-4 rounded-lg">
+  <h3 className="font-bold text-lg mb-3">
+    🏅 Achievement Badges
+  </h3>
+
+  {badges.length > 0 ? (
+    <div className="flex flex-wrap gap-2">
+      {badges.map((badge, idx) => (
+        <span
+          key={idx}
+          className="px-3 py-2 bg-yellow-600 rounded-full text-sm"
+        >
+          {badge}
+        </span>
+      ))}
+    </div>
+  ) : (
+    <p className="text-gray-400">
+      No badges earned yet.
+    </p>
+  )}
+</div>
+
+<div className="mt-4">
+  <div className="flex justify-between text-sm mb-1">
+    <span>Overall Progress</span>
+    <span>{progressPercentage.toFixed(0)}%</span>
+  </div>
+
+  <div className="w-full bg-slate-700 rounded-full h-3">
+    <div
+      className="bg-green-500 h-3 rounded-full transition-all"
+      style={{
+        width: `${progressPercentage}%`,
+      }}
+    />
+  </div>
+</div>
+
+<div className="mt-4">
+  <h3 className="font-semibold mb-2">
+    Revision History
+  </h3>
+
+  <ul className="text-sm text-gray-300">
+    {history.slice(-5).map((item, idx) => (
+      <li key={idx}>• {item}</li>
+    ))}
+  </ul>
+</div>
+
+<div className="mt-5 bg-slate-800 p-4 rounded-lg">
+  <h3 className="font-semibold mb-3">
+    Recently Revised Topics
+  </h3>
+
+  {[...new Set(history)]
+    .slice(-5)
+    .map((topic, idx) => (
+      <p key={idx}>🔹 {topic}</p>
+    ))}
+</div>
+
+<div className="mt-5 bg-slate-800 p-4 rounded-lg">
+  <h3 className="font-bold text-lg mb-3">
+    ⭐ Favorite Flashcards
+  </h3>
+
+  {favorites.length === 0 ? (
+    <p className="text-gray-400">
+      No bookmarked flashcards yet.
+    </p>
+  ) : (
+    favorites.map((card, idx) => (
+      <div
+        key={idx}
+        className="mb-3 p-3 bg-slate-700 rounded"
+      >
+        <p className="text-purple-300 font-semibold">
+          {card.topic}
+        </p>
+
+        <p className="text-white">
+          {card.question}
+        </p>
+      </div>
+    ))
+  )}
+</div>
+
+<div className="mt-5 flex gap-3">
+  <button
+    onClick={() => {
+      setCorrectAnswers((prev) => prev + 1);
+      nextCard();
+    }}
+    className="w-1/2 px-4 py-2 bg-green-600 rounded hover:bg-green-700"
+  >
+    ✅ Correct
+  </button>
+
+  <button
+    onClick={() => {
+      setIncorrectAnswers((prev) => prev + 1);
+      nextCard();
+    }}
+    className="w-1/2 px-4 py-2 bg-red-600 rounded hover:bg-red-700"
+  >
+    ❌ Incorrect
+  </button>
+</div>
+
+<div className="mt-5 flex gap-3">
+  <button
+    onClick={previousCard}
+    className="w-1/2 px-4 py-2 bg-blue-600 rounded hover:bg-blue-700"
+  >
+    Previous
+  </button>
+
+  <button
+    onClick={nextCard}
+    className="w-1/2 px-4 py-2 bg-green-600 rounded hover:bg-green-700"
+  >
+    Next
+  </button>
+</div>
+<button
+  onClick={() => setShowSummary(true)}
+  className="mt-4 w-full px-4 py-2 bg-purple-600 rounded hover:bg-purple-700"
+>
+  📊 View Session Report
+</button>
+
+{showSummary && (
+  <div className="mt-6 bg-slate-800 p-5 rounded-lg">
+    <h3 className="text-xl font-bold mb-4">
+      📊 Revision Session Summary
+    </h3>
+
+    <p>
+      Questions Attempted: {attemptedQuestions}
+    </p>
+
+    <p>
+      Correct Answers: {correctAnswers}
+    </p>
+
+    <p>
+      Incorrect Answers: {incorrectAnswers}
+    </p>
+
+    <p>
+      Accuracy: {accuracy}%
+    </p>
+
+    <p>
+      Time Spent: {timeSpent} seconds
+    </p>
+
+    <p className="mt-3 text-yellow-400">
+      Suggested Improvement Areas:
+    </p>
+
+    <ul className="text-sm text-gray-300">
+      {weakTopics.length > 0 ? (
+        weakTopics.map((topic, idx) => (
+          <li key={idx}>📌 {topic}</li>
+        ))
+      ) : (
+        <li>No weak topics detected.</li>
+      )}
+    </ul>
+  </div>
+)}
+
+      <div className="mt-4 text-sm text-gray-400">
+        Progress: {index + 1}/{currentCards.length} cards completed
+        {" • "}
+        {Math.round(((index + 1) / currentCards.length) * 100)}%
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/TerminalPopup.jsx b/src/app/components/TerminalPopup.jsx
new file mode 100644
index 000000000..ee3c8895c
--- /dev/null
+++ b/src/app/components/TerminalPopup.jsx
@@ -0,0 +1,199 @@
+import React, { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+
+const TerminalPopup = ({ isOpen, onClose, email }) => {
+  const [lines, setLines] = useState([]);
+  const [showCursor, setShowCursor] = useState(false);
+  const [isComplete, setIsComplete] = useState(false);
+
+  const terminalSequence = [
+    { text: `$ algobuddy subscribe ${email}`, type: 'command' },
+    { text: '[1/3] Validating email...', type: 'process' },
+    { text: '✓ Email verified', type: 'success' },
+    { text: '[2/3] Enabling weekly updates...', type: 'process' },
+    { text: '✓ Updates enabled', type: 'success' },
+    { text: '✓ Subscribed — Welcome 🚀', type: 'success' },
+  ];
+
+  useEffect(() => {
+    if (!isOpen) {
+      setLines([]);
+      setShowCursor(false);
+      setIsComplete(false);
+      return;
+    }
+
+    let currentIndex = 0;
+    let charTimeout = null;
+    let lineTimeout = null;
+    let cursorInterval = null;
+    let autoCloseTimeout = null;
+
+    const startCursor = () => {
+      if (!cursorInterval) {
+        cursorInterval = setInterval(() => setShowCursor(prev => !prev), 500);
+      }
+    };
+
+    const stopCursor = () => {
+      if (cursorInterval) {
+        clearInterval(cursorInterval);
+        cursorInterval = null;
+      }
+      setShowCursor(false);
+    };
+
+    const typeLine = (line) => {
+      // append an empty line object first
+      setLines(prev => [...prev, { text: '', type: line.type }]);
+      startCursor();
+
+      let charIndex = 0;
+      const charDelay = line.type === 'command' ? 25 : line.type === 'process' ? 20 : 20;
+
+      const doChar = () => {
+        if (charIndex < line.text.length) {
+          setLines(prev => {
+            const copy = [...prev];
+            const last = { ...(copy[copy.length - 1]) };
+            last.text = (last.text || '') + line.text.charAt(charIndex);
+            copy[copy.length - 1] = last;
+            return copy;
+          });
+          charIndex++;
+          charTimeout = setTimeout(doChar, charDelay);
+        } else {
+          // after finishing typing this line, small pause before next
+          const postDelay = line.type === 'process' ? 320 : 180;
+          lineTimeout = setTimeout(() => {
+            currentIndex++;
+            displayNext();
+          }, postDelay);
+        }
+      };
+
+      // start typing chars
+      doChar();
+    };
+
+    const displayNext = () => {
+      if (currentIndex >= terminalSequence.length) {
+        setIsComplete(true);
+        startCursor();
+        // auto-close shortly after complete
+        autoCloseTimeout = setTimeout(() => {
+          try { 
+            if (typeof onClose === 'function') {
+              onClose(); 
+            }
+          } catch (e) {
+            console.error("Error in onClose callback:", e);
+          }
+        }, 2800);
+        return;
+      }
+
+      const line = terminalSequence[currentIndex];
+
+      if (!line || !line.text) {
+        // empty/break line
+        setLines(prev => [...prev, { text: '', type: 'break' }]);
+        currentIndex++;
+        lineTimeout = setTimeout(displayNext, 100);
+        return;
+      }
+
+      // For success lines we still type them but slightly faster
+      typeLine(line);
+    };
+
+    // kick off
+    const initialDelay = setTimeout(() => displayNext(), 150);
+
+    return () => {
+      clearTimeout(initialDelay);
+      clearTimeout(charTimeout);
+      clearTimeout(lineTimeout);
+      if (cursorInterval) clearInterval(cursorInterval);
+      clearTimeout(autoCloseTimeout);
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+      <style jsx>{`
+        @keyframes greenGlow {
+          0%, 100% { text-shadow: 0 0 10px rgba(34, 197, 94, 0.5), 0 0 20px rgba(34, 197, 94, 0.3); }
+          50% { text-shadow: 0 0 15px rgba(34, 197, 94, 0.7), 0 0 25px rgba(34, 197, 94, 0.5); }
+        }
+        .terminal-text {
+          animation: greenGlow 2s ease-in-out infinite;
+        }
+      `}</style>
+      
+      <div className="w-full max-w-2xl animate-in fade-in zoom-in-95 duration-300">
+        {/* Terminal Window */}
+        <div className="bg-black text-white rounded-lg overflow-hidden shadow-2xl border border-green-700/30">
+          {/* Terminal Header */}
+          <div className="bg-gray-900 px-4 py-3 flex justify-between items-center border-b border-green-700/20">
+            <div className="flex space-x-2">
+              <div className="w-3 h-3 rounded-full bg-red-500" />
+              <div className="w-3 h-3 rounded-full bg-yellow-500" />
+              <div className="w-3 h-3 rounded-full bg-green-500" />
+            </div>
+            <p className="text-sm text-green-400 font-mono">~ algobuddy-cli</p>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-white transition"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+
+          {/* Terminal Content */}
+          <div className="bg-black p-6 font-mono text-sm min-h-64 max-h-96 overflow-auto">
+            <div className="space-y-0.5 leading-relaxed">
+              {lines.map((line, idx) => {
+                const isLast = idx === lines.length - 1;
+                const baseClass = line.type === 'command'
+                  ? 'text-white'
+                  : line.type === 'success'
+                  ? 'text-green-400 terminal-text'
+                  : line.type === 'process'
+                  ? 'text-yellow-400'
+                  : '';
+
+                const cursorColorClass = line.type === 'success' ? 'text-green-400' : line.type === 'process' ? 'text-yellow-400' : 'text-white';
+
+                return (
+                  <div key={idx} className={baseClass}>
+                    <span>{line.text}</span>
+                    {isLast && (
+                      <span className={`${showCursor ? 'opacity-100' : 'opacity-0'} transition-opacity duration-100 ml-1 ${cursorColorClass}`}>
+                        ▋
+                      </span>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Terminal Footer */}
+          <div className="bg-gray-900 px-6 py-3 border-t border-green-700/20 flex justify-end gap-3">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition font-medium text-sm"
+            >
+              Done
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TerminalPopup;
diff --git a/src/app/components/TermsOfServiceContent.jsx b/src/app/components/TermsOfServiceContent.jsx
new file mode 100644
index 000000000..7331cc4ed
--- /dev/null
+++ b/src/app/components/TermsOfServiceContent.jsx
@@ -0,0 +1,105 @@
+"use client";
+import { termsSections } from "./TermsOfServiceModal";
+import Link from "next/link";
+
+export default function TermsOfServiceContent() {
+  return (
+    <div className="mx-auto max-w-6xl px-6 py-12 lg:py-16">
+      <Link
+        href="/"
+        className="inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors mb-8"
+      >
+        <span className="mr-2">←</span> Back to Home
+      </Link>
+
+      <div className="mb-16 max-w-3xl">
+        <div className="inline-flex items-center justify-center px-3 py-1 rounded-full bg-gray-100 text-gray-600 dark:bg-[#1E1E26] dark:text-gray-300 text-xs font-bold tracking-[0.15em] uppercase mb-6">
+          Legal
+        </div>
+        <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900 dark:text-white tracking-tight mb-6">
+          Terms of Service
+        </h1>
+        <p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
+          Please read these terms and conditions carefully before using our website and services.
+        </p>
+        <p className="text-sm text-gray-500 dark:text-gray-500 font-medium mt-6">
+          Last updated: May 17, 2025
+        </p>
+      </div>
+
+      <div className="grid gap-12 lg:grid-cols-[250px_1fr] items-start">
+        <aside className="sticky top-24 hidden lg:block">
+          <h2 className="mb-6 text-sm font-bold uppercase tracking-wider text-gray-900 dark:text-white">
+            Contents
+          </h2>
+          <ul className="space-y-3 border-l border-gray-200 dark:border-[#2A2A35]">
+            {termsSections.map((item) => (
+              <li key={item.id}>
+                <a
+                  href={`#terms-${item.id}`}
+                  className="block pl-4 py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white border-l-2 border-transparent hover:border-gray-400 dark:hover:border-purple-400 transition-all duration-200"
+                >
+                  {item.title}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </aside>
+
+        <div className="space-y-12">
+          {termsSections.map((item) => (
+            <section
+              key={item.id}
+              id={`terms-${item.id}`}
+              className="scroll-mt-24 pb-10 border-b border-gray-200 dark:border-[#2A2A35]"
+            >
+              <div className="flex items-start mb-4">
+                <div className="flex-1">
+                  <h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-4">
+                    {item.title}
+                  </h2>
+
+                  {item.points && (
+                    <ul className="space-y-2 text-gray-600 dark:text-gray-400 pl-6 mb-4">
+                      {item.points.map((point, i) => (
+                        <li key={i} className="list-disc pl-1">
+                          {point}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+
+                  {item.data && (
+                    <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                      {item.data}
+                    </p>
+                  )}
+
+                  {item.contact && (
+                    <div className="mt-4">
+                      <a
+                        href={`mailto:${item.contact}`}
+                        className="mt-4 text-gray-600 dark:text-gray-400 leading-relaxed"
+                      >
+                        {item.contact}
+                      </a>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </section>
+          ))}
+        </div>
+      </div>
+      <div className="pt-8 flex justify-end">
+        <Link
+           href="/"
+           className="px-8 py-3.5 bg-black text-white dark:bg-white dark:text-black font-semibold rounded-full hover:bg-gray-800 dark:hover:bg-gray-200 transition-all duration-200 active:scale-95 shadow-md flex items-center gap-2"
+        >
+           Accept & Continue
+        </Link>
+      </div>
+    </div>
+    
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/TermsOfServiceModal.jsx b/src/app/components/TermsOfServiceModal.jsx
new file mode 100644
index 000000000..a0ce01dd9
--- /dev/null
+++ b/src/app/components/TermsOfServiceModal.jsx
@@ -0,0 +1,177 @@
+import React, { useEffect } from "react";
+
+export const termsSections = [
+  {
+    id: "1",
+    title: "Acceptance of Terms",
+    data: "By accessing and using this website, you accept and agree to be bound by the terms and provision of this agreement.",
+  },
+  {
+    id: "2",
+    title: "Use License",
+    points: [
+      "Permission is granted to temporarily use the materials on this website for personal, non-commercial transitory viewing only",
+      "This is the grant of a license, not a transfer of title",
+      "You may not modify or copy the materials, use them for any commercial purpose, or remove any copyright or proprietary notations",
+    ],
+  },
+  {
+    id: "3",
+    title: "User Responsibilities",
+    points: [
+      "Provide accurate and complete information when required",
+      "Maintain the confidentiality of your account credentials",
+      "Notify us immediately of any unauthorized use of your account",
+      "Use the service in compliance with all applicable laws and regulations",
+    ],
+  },
+  {
+    id: "4",
+    title: "Intellectual Property",
+    data: "All content, features, and functionality on this website, including but not limited to text, graphics, logos, and software, are the exclusive property of the company and are protected by international copyright, trademark, and other intellectual property laws.",
+  },
+  {
+    id: "5",
+    title: "Limitation of Liability",
+    data: "In no event shall the company, nor its directors, employees, partners, agents, suppliers, or affiliates, be liable for any indirect, incidental, special, consequential or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses.",
+  },
+  {
+    id: "6",
+    title: "Governing Law",
+    data: "These Terms shall be governed and construed in accordance with the laws of the applicable jurisdiction, without regard to its conflict of law provisions.",
+  },
+  {
+    id: "7",
+    title: "Changes to Terms",
+    data: "We reserve the right, at our sole discretion, to modify or replace these Terms at any time. By continuing to access or use our service after those revisions become effective, you agree to be bound by the revised terms.",
+  },
+  {
+    id: "8",
+    title: "Contact Information",
+    data: "If you have any questions about these Terms, please contact us at",
+    contact: "hello@algobuddy.in",
+  },
+];
+
+const TermsOfServiceModal = ({ isOpen, onClose }) => {
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 sm:p-6">
+      {/* Backdrop with fade-in animation */}
+      <div
+        className="fixed inset-0 bg-neutral-900/40 dark:bg-black/60 backdrop-blur-sm transition-opacity duration-300"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Modal container */}
+      <div 
+        className="relative bg-white dark:bg-neutral-900 w-full max-w-2xl rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] dark:shadow-[0_8px_30px_rgb(0,0,0,0.4)] overflow-hidden transform transition-all duration-300 max-h-[85vh] flex flex-col ring-1 ring-black/5 dark:ring-white/10"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+      >
+        {/* Header with close button */}
+        <div className="flex-none px-6 py-4 flex items-center justify-between border-b border-neutral-100 dark:border-neutral-800/60 bg-white/80 dark:bg-neutral-900/80 backdrop-blur-md z-10">
+          <h2 id="modal-title" className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 tracking-tight">
+            Terms of Service
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-2 -mr-2 rounded-full text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-200 dark:focus-visible:ring-neutral-700"
+            aria-label="Close modal"
+          >
+            <FiX className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Scrollable content */}
+        <div className="flex-1 overflow-y-auto p-6 sm:p-8 scrollbar-thin scrollbar-thumb-neutral-200 dark:scrollbar-thumb-neutral-700 scrollbar-track-transparent">
+          <div className="prose prose-sm sm:prose-base dark:prose-invert max-w-none">
+            <p className="mb-8 text-neutral-600 dark:text-neutral-400 leading-relaxed text-[15px]">
+              Please read these terms and conditions carefully before using our
+              website and services. Your access to and use of the service is
+              conditioned on your acceptance of and compliance with these terms.
+            </p>
+
+            {/* Terms sections */}
+            <div className="space-y-8">
+              {termsSections.map((item, index) => (
+                <section 
+                  key={index} 
+                  className="border-b border-neutral-100 dark:border-neutral-800/50 pb-8 last:border-0 last:pb-0"
+                >
+                  <h3 className="text-base sm:text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-3 flex items-baseline gap-2 tracking-tight">
+                    <span className="text-neutral-400 dark:text-neutral-500 font-mono text-sm select-none">{item.id}.</span>
+                    {item.title}
+                  </h3>
+                  
+                  {item.points && (
+                    <ul className="space-y-2.5 text-neutral-600 dark:text-neutral-400 pl-6 m-0">
+                      {item.points.map((subitem, subindex) => (
+                        <li 
+                          key={subindex} 
+                          className="list-disc pl-1 marker:text-neutral-300 dark:marker:text-neutral-600"
+                        >
+                          <span className="leading-relaxed text-[15px]">{subitem}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                  
+                  {item.data && (
+                    <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed text-[15px] m-0">
+                      {item.data}
+                    </p>
+                  )}
+                  
+                  {item.contact && (
+                    <div className="mt-3">
+                      <a
+                        href={`mailto:${item.contact}`}
+                        className="inline-flex font-medium text-neutral-900 dark:text-neutral-100 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                      >
+                        {item.contact}
+                      </a>
+                    </div>
+                  )}
+                </section>
+              ))}
+            </div>
+
+            <div className="mt-10 pt-6 border-t border-neutral-100 dark:border-neutral-800/60">
+              <p className="text-sm text-neutral-500 dark:text-neutral-500 m-0">
+                Last updated: May 17, 2025
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer with action button */}
+        <div className="flex-none px-6 py-4 border-t border-neutral-100 dark:border-neutral-800/60 bg-neutral-50/80 dark:bg-neutral-900/80 backdrop-blur-md flex justify-end">
+          <button
+            onClick={onClose}
+            className="w-full sm:w-auto px-6 py-2.5 bg-neutral-900 hover:bg-neutral-800 text-white font-medium rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-neutral-900 text-[15px] dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-100 shadow-sm"
+          >
+            I Agree
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TermsOfServiceModal;
diff --git a/src/app/components/VoiceAgent.jsx b/src/app/components/VoiceAgent.jsx
new file mode 100644
index 000000000..deeee79b5
--- /dev/null
+++ b/src/app/components/VoiceAgent.jsx
@@ -0,0 +1,57 @@
+"use client";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Mic, MicOff } from "lucide-react";
+
+export default function VoiceAgent() {
+  const [isListening, setIsListening] = useState(false);
+  const router = useRouter();
+
+  const startListening = () => {
+    const SpeechRecognition =
+      window.SpeechRecognition || window.webkitSpeechRecognition;
+
+    if (!SpeechRecognition) {
+      alert("Speech recognition not supported in this browser");
+      return;
+    }
+
+    const recognition = new SpeechRecognition();
+    recognition.lang = "en-US";
+    recognition.interimResults = false;
+
+    recognition.onstart = () => setIsListening(true);
+    recognition.onend = () => setIsListening(false);
+
+    recognition.onresult = (event) => {
+      const command = event.results[0][0].transcript.toLowerCase();
+      handleCommand(command);
+    };
+
+    recognition.start();
+  };
+
+  const handleCommand = (command) => {
+    if (command.includes("stack")) {
+      router.push("/visualizer/stack");
+    } else if (command.includes("queue")) {
+      router.push("/visualizer/queue");
+    } else if (command.includes("home")) {
+      router.push("/");
+    } else if (command.includes("sort")) {
+      router.push("/visualizer/sorting");
+    } else {
+      alert(`Command not recognized: "${command}"`);
+    }
+  };
+
+  return (
+    <button
+      onClick={startListening}
+      className="fixed bottom-6 right-6 z-50 flex items-center justify-center w-14 h-14 rounded-full bg-primary text-white shadow-lg hover:bg-primary/90 transition"
+      aria-label="Voice Assistant"
+    >
+      {isListening ? <Mic className="animate-pulse" size={24} /> : <MicOff size={24} />}
+    </button>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/about.jsx b/src/app/components/about.jsx
new file mode 100644
index 000000000..246930136
--- /dev/null
+++ b/src/app/components/about.jsx
@@ -0,0 +1,353 @@
+import Link from 'next/link';
+import React from 'react';
+import { 
+  Code2, 
+  Cpu, 
+  Users, 
+  GitPullRequest, 
+  Sparkles, 
+  Target, 
+  BookOpen, 
+  Zap, 
+  Trophy, 
+  GitMerge, 
+  ArrowRight,
+  BrainCircuit,
+  Eye,
+  Rocket,
+  Heart,
+  Activity,
+  Github,
+  MonitorPlay,
+  Share2,
+  BookMarked
+} from 'lucide-react';
+import Footer from '@/app/components/footer';
+
+const stats = [
+  { label: 'Algorithms Covered', value: '50+', icon: <Cpu className="w-6 h-6" /> },
+  { label: 'Visualizers Available', value: '20+', icon: <Eye className="w-6 h-6" /> },
+  { label: 'Practice Problems', value: '100+', icon: <Code2 className="w-6 h-6" /> },
+  { label: 'Contributors', value: '50+', icon: <GitPullRequest className="w-6 h-6" /> },
+  { label: 'Community Members', value: '10k+', icon: <Users className="w-6 h-6" /> },
+];
+
+const features = [
+  {
+    title: 'Interactive Visualizers',
+    description: 'Watch algorithms come to life step-by-step. Understand complex data structures visually rather than memorizing code.',
+    icon: <MonitorPlay className="w-6 h-6 text-udemy-purple dark:text-udemy-purple-light" />
+  },
+  {
+    title: 'Step-by-Step Learning',
+    description: 'Break down complex logic into digestible steps. Learn at your own pace with detailed explanations for each operation.',
+    icon: <BookOpen className="w-6 h-6 text-udemy-purple dark:text-udemy-purple-light" />
+  },
+  {
+    title: 'Coding Practice',
+    description: 'Test your knowledge with hands-on practice. Write code, run tests, and get immediate feedback on your solutions.',
+    icon: <Code2 className="w-6 h-6 text-udemy-purple dark:text-udemy-purple-light" />
+  },
+  {
+    title: 'Arena Challenges',
+    description: 'Prepare for interviews and contests in our Arena. Tackle challenging problems and optimize your solutions.',
+    icon: <Trophy className="w-6 h-6 text-udemy-purple dark:text-udemy-purple-light" />
+  },
+  {
+    title: 'Community Driven Development',
+    description: 'Join a thriving community of learners. Share insights, ask questions, and grow together.',
+    icon: <Share2 className="w-6 h-6 text-udemy-purple dark:text-udemy-purple-light" />
+  },
+  {
+    title: 'Open Source Contributions',
+    description: 'AlgoBuddy is open-source. Contribute to the platform, add new algorithms, and help others learn.',
+    icon: <Github className="w-6 h-6 text-udemy-purple dark:text-udemy-purple-light" />
+  }
+];
+
+const timeline = [
+  {
+    year: 'Phase 1',
+    title: 'Platform Launch',
+    description: 'AlgoBuddy was born out of a desire to make algorithmic learning intuitive and visually engaging for students worldwide.'
+  },
+  {
+    year: 'Phase 2',
+    title: 'Visualizer Expansion',
+    description: 'Introduced an expansive library of animated sorting, searching, and graph algorithm visualizers.'
+  },
+  {
+    year: 'Phase 3',
+    title: 'Community Growth',
+    description: 'Partnered with open source programs and cultivated a thriving global community of contributors and learners.'
+  },
+  {
+    year: 'Phase 4',
+    title: 'Future Features',
+    description: 'Integrating AI-driven hints, broader algorithm coverage, and personalized, adaptive learning paths.'
+  }
+];
+
+const AboutSection = () => {
+  return (
+    <>
+      <div className="bg-udemy-bg dark:bg-udemy-dark-bg min-h-screen font-sans selection:bg-udemy-purple/30 pb-10">
+        
+        {/* HERO SECTION */}
+        <section aria-label="Hero" className="relative pt-32 pb-24 md:pt-40 md:pb-32 overflow-hidden flex flex-col items-center justify-center text-center px-6">
+          {/* Background Gradients */}
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-5xl h-[40rem] bg-udemy-purple/10 dark:bg-udemy-purple/15 blur-[120px] rounded-full pointer-events-none"></div>
+          
+          <div className="relative z-10 max-w-4xl mx-auto space-y-8">
+            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-udemy-purple/10 text-udemy-purple dark:text-udemy-purple-light font-medium text-sm border border-udemy-purple/20">
+              <Sparkles className="w-4 h-4" />
+              <span>Discover AlgoBuddy</span>
+            </div>
+            
+            <h1 className="text-5xl md:text-7xl font-bold font-serif text-udemy-text dark:text-udemy-dark-text tracking-tight leading-tight">
+              Revolutionizing <br className="hidden md:block"/>
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-udemy-purple to-pink-500">
+                DSA Learning
+              </span>
+            </h1>
+            
+            <p className="text-lg md:text-xl text-udemy-muted dark:text-udemy-dark-muted max-w-3xl mx-auto leading-relaxed">
+              Bridging the gap between complex theoretical concepts and practical understanding. Experience algorithms visually, practice interactively, and master computer science effortlessly.
+            </p>
+          </div>
+        </section>
+
+        {/* OUR STORY SECTION */}
+        <section aria-label="Our Story" className="py-20 px-6 relative z-10 bg-white/50 dark:bg-udemy-dark-surface/50 border-y border-udemy-border/50 dark:border-udemy-dark-border/50">
+          <div className="container mx-auto max-w-5xl">
+            <div className="grid md:grid-cols-2 gap-12 items-center">
+              <div className="space-y-6">
+                <h2 className="text-3xl md:text-4xl font-bold font-serif text-udemy-text dark:text-udemy-dark-text">
+                  The Story Behind AlgoBuddy
+                </h2>
+                <div className="w-20 h-1 bg-udemy-purple rounded-full"></div>
+                <p className="text-udemy-muted dark:text-udemy-dark-muted leading-relaxed text-lg">
+                  Learning Data Structures and Algorithms has traditionally been a daunting task. Students often find themselves staring at dense textbooks and static code blocks, struggling to mentally simulate how variables change and pointers move.
+                </p>
+                <p className="text-udemy-muted dark:text-udemy-dark-muted leading-relaxed text-lg">
+                  We created AlgoBuddy because we believe there is a better way. By replacing static text with <strong className="text-udemy-purple dark:text-udemy-purple-light font-semibold">dynamic, interactive visualizers</strong>, we transform abstract logic into tangible animations. Seeing an algorithm unfold step-by-step builds an intuitive understanding that rote memorization simply cannot achieve.
+                </p>
+              </div>
+              <div className="relative group">
+                <div className="absolute inset-0 bg-gradient-to-tr from-udemy-purple to-pink-500 rounded-3xl blur-xl opacity-20 group-hover:opacity-30 transition-opacity duration-500"></div>
+                <div className="relative bg-white dark:bg-udemy-dark-surface p-8 rounded-3xl border border-udemy-border dark:border-udemy-dark-border shadow-xl">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="bg-udemy-bg dark:bg-udemy-dark-bg p-6 rounded-2xl flex flex-col items-center justify-center text-center gap-3">
+                      <BookMarked className="w-8 h-8 text-udemy-muted" />
+                      <span className="text-sm font-medium text-udemy-muted">Traditional Learning</span>
+                    </div>
+                    <div className="bg-udemy-purple/10 dark:bg-udemy-purple/20 p-6 rounded-2xl flex flex-col items-center justify-center text-center gap-3 border border-udemy-purple/30">
+                      <Zap className="w-8 h-8 text-udemy-purple" />
+                      <span className="text-sm font-medium text-udemy-purple">Visual Learning</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* MISSION & VISION */}
+        <section aria-label="Mission and Vision" className="py-24 px-6 relative z-10">
+          <div className="container mx-auto max-w-6xl">
+            <div className="grid md:grid-cols-2 gap-8">
+              {/* Mission */}
+              <div className="bg-white dark:bg-udemy-dark-surface p-10 md:p-12 rounded-3xl border border-udemy-border/50 dark:border-udemy-dark-border/50 shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 relative overflow-hidden group">
+                <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity duration-500 group-hover:scale-110 transform">
+                  <Target className="w-40 h-40 text-udemy-purple" />
+                </div>
+                <div className="relative z-10">
+                  <div className="w-14 h-14 rounded-2xl bg-udemy-purple/10 flex items-center justify-center mb-8 border border-udemy-purple/20 group-hover:bg-udemy-purple group-hover:text-white transition-colors duration-300">
+                    <Target className="w-7 h-7 text-udemy-purple group-hover:text-white transition-colors" />
+                  </div>
+                  <h2 className="text-3xl font-bold text-udemy-text dark:text-udemy-dark-text mb-6">Our Mission</h2>
+                  <p className="text-udemy-muted dark:text-udemy-dark-muted leading-relaxed text-lg">
+                    To make data structures and algorithms accessible, intuitive, and engaging for everyone. We believe that seeing concepts in action is the key to true mastery, moving beyond rote memorization to <strong className="text-udemy-text dark:text-udemy-dark-text">profound practical understanding</strong>.
+                  </p>
+                </div>
+              </div>
+
+              {/* Vision */}
+              <div className="bg-white dark:bg-udemy-dark-surface p-10 md:p-12 rounded-3xl border border-udemy-border/50 dark:border-udemy-dark-border/50 shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 relative overflow-hidden group">
+                <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity duration-500 group-hover:scale-110 transform">
+                  <Rocket className="w-40 h-40 text-udemy-purple" />
+                </div>
+                <div className="relative z-10">
+                  <div className="w-14 h-14 rounded-2xl bg-udemy-purple/10 flex items-center justify-center mb-8 border border-udemy-purple/20 group-hover:bg-udemy-purple group-hover:text-white transition-colors duration-300">
+                    <Rocket className="w-7 h-7 text-udemy-purple group-hover:text-white transition-colors" />
+                  </div>
+                  <h2 className="text-3xl font-bold text-udemy-text dark:text-udemy-dark-text mb-6">Our Vision</h2>
+                  <p className="text-udemy-muted dark:text-udemy-dark-muted leading-relaxed text-lg">
+                    To become the global standard platform for algorithmic education. We envision a future where every developer, regardless of their background, can <strong className="text-udemy-text dark:text-udemy-dark-text">confidently tackle complex computational problems</strong> with an algorithmic mindset.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* LEARNING PHILOSOPHY */}
+        <section aria-label="Learning Philosophy" className="py-20 px-6 bg-gradient-to-b from-udemy-purple/5 to-transparent dark:from-udemy-purple/10 dark:to-transparent">
+          <div className="container mx-auto max-w-6xl">
+            <div className="text-center max-w-3xl mx-auto mb-16">
+              <h2 className="text-4xl font-bold font-serif text-udemy-text dark:text-udemy-dark-text mb-6">Our Learning Philosophy</h2>
+              <p className="text-lg md:text-xl text-udemy-muted dark:text-udemy-dark-muted leading-relaxed">
+                "Tell me and I forget, teach me and I may remember, involve me and I learn."
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-3 gap-8">
+              {[
+                { title: 'Learn by Seeing', desc: 'Visual representation reduces cognitive load, allowing you to instantly grasp the flow of algorithms.', icon: <Eye className="w-8 h-8" /> },
+                { title: 'Learn by Practicing', desc: 'Transition seamlessly from watching to coding. Hands-on practice solidifies theoretical knowledge.', icon: <Code2 className="w-8 h-8" /> },
+                { title: 'Learn by Experimenting', desc: 'Play with edge cases, change inputs, and watch how algorithms adapt. Experimentation is key to deep learning.', icon: <Activity className="w-8 h-8" /> }
+              ].map((item, idx) => (
+                <div key={idx} className="bg-white/80 dark:bg-udemy-dark-surface/80 backdrop-blur-sm p-8 rounded-3xl border border-udemy-purple/20 text-center hover:shadow-lg transition-shadow duration-300">
+                  <div className="w-16 h-16 mx-auto rounded-full bg-udemy-purple/10 flex items-center justify-center text-udemy-purple dark:text-udemy-purple-light mb-6">
+                    {item.icon}
+                  </div>
+                  <h3 className="text-2xl font-bold text-udemy-text dark:text-udemy-dark-text mb-4">{item.title}</h3>
+                  <p className="text-udemy-muted dark:text-udemy-dark-muted">{item.desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* FEATURE HIGHLIGHTS */}
+        <section aria-label="Features" className="py-24 px-6 relative z-10">
+          <div className="container mx-auto max-w-6xl">
+            <div className="text-center max-w-2xl mx-auto mb-16">
+              <h2 className="text-4xl font-bold font-serif text-udemy-text dark:text-udemy-dark-text mb-4">Why AlgoBuddy?</h2>
+              <p className="text-lg text-udemy-muted dark:text-udemy-dark-muted">
+                A comprehensive suite of tools designed to take you from a beginner to a confident problem solver.
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {features.map((feature, idx) => (
+                <div key={idx} className="bg-white dark:bg-udemy-dark-surface p-8 rounded-2xl border border-udemy-border/40 dark:border-udemy-dark-border/50 hover:border-udemy-purple/50 dark:hover:border-udemy-purple/50 transition-all duration-300 shadow-sm hover:shadow-xl hover:-translate-y-1 group">
+                  <div className="w-14 h-14 rounded-xl bg-udemy-purple/5 dark:bg-udemy-purple/10 flex items-center justify-center mb-6 group-hover:bg-udemy-purple group-hover:text-white transition-all duration-300">
+                    <div className="group-hover:scale-110 transition-transform group-hover:brightness-200">
+                      {feature.icon}
+                    </div>
+                  </div>
+                  <h3 className="text-xl font-bold text-udemy-text dark:text-udemy-dark-text mb-3">{feature.title}</h3>
+                  <p className="text-udemy-muted dark:text-udemy-dark-muted leading-relaxed">
+                    {feature.description}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* STATISTICS */}
+        <section aria-label="Platform Statistics" className="py-20 px-6 border-y border-udemy-purple/20 bg-udemy-purple/5 dark:bg-udemy-purple/5">
+          <div className="container mx-auto max-w-6xl">
+            <div className="grid grid-cols-2 lg:grid-cols-5 gap-8">
+              {stats.map((stat, idx) => (
+                <div key={idx} className="flex flex-col items-center text-center space-y-4">
+                  <div className="w-14 h-14 rounded-full bg-white dark:bg-udemy-dark-surface border border-udemy-purple/20 flex items-center justify-center text-udemy-purple shadow-sm">
+                    {stat.icon}
+                  </div>
+                  <h3 className="text-4xl md:text-5xl font-bold text-udemy-text dark:text-udemy-dark-text tracking-tight">
+                    {stat.value}
+                  </h3>
+                  <p className="text-sm font-bold text-udemy-muted dark:text-udemy-dark-muted uppercase tracking-wider">
+                    {stat.label}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* PLATFORM JOURNEY */}
+        <section aria-label="Roadmap" className="py-24 px-6 bg-white dark:bg-udemy-dark-surface/30">
+          <div className="container mx-auto max-w-4xl">
+            <h2 className="text-3xl md:text-4xl font-bold font-serif text-center text-udemy-text dark:text-udemy-dark-text mb-16">Platform Roadmap</h2>
+            
+            <div className="space-y-12 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-udemy-purple/50 before:via-udemy-purple/20 before:to-transparent">
+              {timeline.map((item, idx) => (
+                <div key={idx} className={`relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group`}>
+                  <div className="flex items-center justify-center w-10 h-10 rounded-full border-4 border-udemy-bg dark:border-udemy-dark-bg bg-udemy-purple text-white shadow-lg shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 relative z-10 group-hover:scale-110 transition-transform">
+                    <div className="w-2 h-2 rounded-full bg-white"></div>
+                  </div>
+                  
+                  <div className="w-[calc(100%-4rem)] md:w-[calc(50%-3rem)] bg-white dark:bg-udemy-dark-surface p-8 rounded-2xl border border-udemy-border/40 dark:border-udemy-dark-border/50 shadow-md hover:shadow-xl hover:border-udemy-purple/50 transition-all duration-300">
+                    <span className="text-udemy-purple dark:text-udemy-purple-light font-bold text-sm tracking-wide uppercase mb-3 block">{item.year}</span>
+                    <h3 className="text-2xl font-bold text-udemy-text dark:text-udemy-dark-text mb-3">{item.title}</h3>
+                    <p className="text-udemy-muted dark:text-udemy-dark-muted leading-relaxed">{item.description}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* COMMUNITY SECTION */}
+        <section aria-label="Community" className="py-24 px-6 relative z-10 border-t border-udemy-border/50 dark:border-udemy-dark-border/50">
+          <div className="container mx-auto max-w-6xl">
+            <div className="bg-gradient-to-br from-udemy-purple/10 to-pink-500/10 dark:from-udemy-purple/20 dark:to-pink-500/10 rounded-[3rem] p-8 md:p-16 border border-udemy-purple/20 relative overflow-hidden">
+              <div className="absolute top-0 right-0 p-12 opacity-10">
+                <Heart className="w-64 h-64 text-udemy-purple" />
+              </div>
+              <div className="relative z-10 md:w-2/3">
+                <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/50 dark:bg-udemy-dark-surface/50 text-udemy-text dark:text-udemy-dark-text font-medium text-sm mb-6 border border-udemy-border/50 backdrop-blur-sm">
+                  <Github className="w-4 h-4" />
+                  <span>Open Source</span>
+                </div>
+                <h2 className="text-4xl md:text-5xl font-bold font-serif text-udemy-text dark:text-udemy-dark-text mb-6">Built by the Community, <br/> For the Community</h2>
+                <p className="text-lg md:text-xl text-udemy-text dark:text-udemy-dark-text/80 leading-relaxed mb-8">
+                  AlgoBuddy thrives on open-source contributions. From participating in prestigious programs like GSSoC (GirlScript Summer of Code) to daily contributions from developers worldwide, our platform is constantly evolving thanks to our amazing community.
+                </p>
+                <div className="flex flex-wrap gap-4">
+                  <div className="flex items-center gap-3 bg-white dark:bg-udemy-dark-surface px-5 py-3 rounded-xl shadow-sm border border-udemy-border/50">
+                    <GitPullRequest className="w-5 h-5 text-udemy-purple" />
+                    <span className="font-semibold text-udemy-text dark:text-udemy-dark-text">Pull Requests Welcome</span>
+                  </div>
+                  <div className="flex items-center gap-3 bg-white dark:bg-udemy-dark-surface px-5 py-3 rounded-xl shadow-sm border border-udemy-border/50">
+                    <Users className="w-5 h-5 text-udemy-purple" />
+                    <span className="font-semibold text-udemy-text dark:text-udemy-dark-text">GSSoC Partner</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* CALL TO ACTION */}
+        <section aria-label="Call to Action" className="py-24 px-6 relative overflow-hidden">
+          <div className="absolute inset-0 bg-udemy-purple/5 dark:bg-udemy-purple/10 border-t border-udemy-purple/20"></div>
+          <div className="container mx-auto max-w-4xl relative z-10 text-center">
+            <h2 className="text-4xl md:text-5xl font-bold font-serif text-udemy-text dark:text-udemy-dark-text mb-6">Ready to start your journey?</h2>
+            <p className="text-lg md:text-xl text-udemy-muted dark:text-udemy-dark-muted mb-10 max-w-2xl mx-auto">
+              Join thousands of learners who are mastering data structures and algorithms the visual way.
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+              <Link href="/visualizer" className="w-full sm:w-auto px-8 py-4 rounded-xl bg-udemy-purple text-white font-bold hover:bg-udemy-purple-dark transition-all duration-300 hover:-translate-y-1 shadow-lg shadow-udemy-purple/25 flex items-center justify-center gap-2">
+                Explore Visualizers <MonitorPlay className="w-5 h-5" />
+              </Link>
+              <Link href="/practice" className="w-full sm:w-auto px-8 py-4 rounded-xl border-2 border-udemy-purple/20 dark:border-udemy-purple/30 bg-white dark:bg-udemy-dark-surface text-udemy-text dark:text-udemy-dark-text font-bold hover:border-udemy-purple dark:hover:border-udemy-purple transition-all duration-300 hover:-translate-y-1 flex items-center justify-center gap-2 shadow-sm">
+                Start Practicing <Code2 className="w-5 h-5 text-udemy-purple" />
+              </Link>
+              <a href="https://github.com/Prakitesh28/AlgoBuddy" target="_blank" rel="noopener noreferrer" className="w-full sm:w-auto px-8 py-4 rounded-xl border-2 border-udemy-border dark:border-udemy-dark-border bg-transparent text-udemy-text dark:text-udemy-dark-text font-bold hover:bg-udemy-border/50 dark:hover:bg-udemy-dark-border/50 transition-all duration-300 flex items-center justify-center gap-2">
+                Join Community <Github className="w-5 h-5" />
+              </a>
+            </div>
+          </div>
+        </section>
+
+      </div>
+      <Footer />
+    </>
+  );
+};
+
+export default AboutSection;
diff --git a/app/components/ads/bottom.jsx b/src/app/components/ads/bottom.jsx
old mode 100755
new mode 100644
similarity index 87%
rename from app/components/ads/bottom.jsx
rename to src/app/components/ads/bottom.jsx
index abe848f66..eb2d37932
--- a/app/components/ads/bottom.jsx
+++ b/src/app/components/ads/bottom.jsx
@@ -83,12 +83,14 @@ const BottomAd = () => {
           Ad minimized — click ▲ to reopen
         </div>
       ) : (
-        <ins
-          className="adsbygoogle"
-          style={{ display: "inline-block", width: "728px", height: "90px" }}
-          data-ad-client="ca-pub-4311738896428559"
-          data-ad-slot="3858222679"
-        ></ins>
+        <div style={{ maxWidth: "100%", overflow: "hidden" }}>
+          <ins
+            className="adsbygoogle"
+            style={{ display: "inline-block", width: "728px", maxWidth: "100%", height: "90px" }}
+            data-ad-client="ca-pub-4311738896428559"
+            data-ad-slot="3858222679"
+          ></ins>
+        </div>
       )}
     </div>
   );
diff --git a/src/app/components/blog.jsx b/src/app/components/blog.jsx
new file mode 100644
index 000000000..bee78ec9d
--- /dev/null
+++ b/src/app/components/blog.jsx
@@ -0,0 +1,302 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import Link from "next/link";
+import { Search, Calendar, User, Clock, ArrowRight, X, Newspaper } from "lucide-react";
+import Footer from "@/app/components/footer";
+
+const BLOG_POSTS = [
+  {
+    id: 1,
+    title: "The Power of Visual Learning in Mastering DSA",
+    summary: "Why static textbooks fall short and how dynamic, step-by-step visualizations help developers form a permanent mental model of stack, tree, and graph operations.",
+    author: "Sohan Rout",
+    date: "June 02, 2026",
+    readTime: "5 min read",
+    tags: ["Learning Theory", "DSA"],
+    content: (
+      <>
+        <p className="mb-4">
+          Learning Data Structures and Algorithms (DSA) has traditionally been approached through thick textbooks, black-and-white node diagrams, and dense code snippets. While this rigor is essential for academic foundations, it often leaves a significant gap when trying to build intuition.
+        </p>
+        <h3 className="text-xl font-bold font-serif my-4 text-[var(--udemy-text)] dark:text-white">The Limits of Static Diagrams</h3>
+        <p className="mb-4">
+          When you read about a AVL tree rotation or a quicksort partition step, you are looking at a static snapshot. However, algorithms are dynamic processes. They are sets of instructions that change states, move pointers, and restructure memory over time.
+        </p>
+        <p className="mb-4">
+          Without active visualization, your brain has to manually run the algorithm's execution loop, keeping track of indices, swap variables, and recursive frames. For complex operations like graph traversals or balance factor corrections, this mental stack quickly overflows.
+        </p>
+        <h3 className="text-xl font-bold font-serif my-4 text-[var(--udemy-text)] dark:text-white">Why Interactive Visualizations Work</h3>
+        <p className="mb-4">
+          Interactive tools like AlgoBuddy bridge this gap by mapping computational actions directly to visual transitions. By seeing elements slide into a Stack or watching a pivot element swap positions in an Array:
+        </p>
+        <ul className="list-disc pl-6 mb-4 space-y-2">
+          <li><strong>You build spatial memory:</strong> You associate operations with spatial shifts (e.g., LIFO as a vertical container).</li>
+          <li><strong>You inspect variables in real-time:</strong> Seeing indices moving helps you see exactly *why* off-by-one errors happen.</li>
+          <li><strong>You learn edge cases:</strong> Boundary conditions (like empty lists or single nodes) become visually obvious.</li>
+        </ul>
+        <p className="mb-4">
+          Next time you struggle to understand how an algorithm works, don't just stare at the code. Go to the visualizer, feed it custom inputs, step through it line-by-line, and watch the structure evolve.
+        </p>
+      </>
+    ),
+  },
+  {
+    id: 2,
+    title: "Demystifying Big O: A Visual Guide to Complexity",
+    summary: "Confused about logarithmic growth vs quadratic growth? Learn how to visualize complexity curves and optimize your algorithms with confidence.",
+    author: "Megh Patel",
+    date: "May 28, 2026",
+    readTime: "8 min read",
+    tags: ["Core Concepts", "Analysis"],
+    content: (
+      <>
+        <p className="mb-4">
+          In software engineering, speed and efficiency are key. But how do we describe how fast an algorithm runs without relying on specific hardware benchmarks? The answer is Big O Notation.
+        </p>
+        <h3 className="text-xl font-bold font-serif my-4 text-[var(--udemy-text)] dark:text-white">Measuring Growth, Not Seconds</h3>
+        <p className="mb-4">
+          Big O doesn't measure runtime in milliseconds. Instead, it describes how the execution time or memory space of an algorithm grows as the size of the input data ($n$) increases.
+        </p>
+        <h3 className="text-xl font-bold font-serif my-4 text-[var(--udemy-text)] dark:text-white">Common Growth Rates</h3>
+        <div className="space-y-4 mb-4">
+          <p>
+            <strong>1. Constant Time - $O(1)$:</strong> The execution time remains the same regardless of data size. Example: Accessing an element in an array by its index.
+          </p>
+          <p>
+            <strong>2. Logarithmic Time - $O(\log n)$:</strong> With each step, the problem size is halved. Example: Binary Search. This is highly efficient even for billions of elements.
+          </p>
+          <p>
+            <strong>3. Linear Time - $O(n)$:</strong> The runtime grows in direct proportion to the input size. Example: Linear search through an unsorted array.
+          </p>
+          <p>
+            <strong>4. Quadratic Time - $O(n²)$:</strong> The runtime is proportional to the square of the input size. Example: Bubble Sort with nested loops. Performance degrades rapidly on larger datasets.
+          </p>
+        </div>
+        <p className="mb-4">
+          Understanding these bounds helps you make smart trade-offs. If you expect your input size to be small, an $O(n²)$ algorithm might be acceptable due to simplicity. But for large-scale systems, optimization to $O(n \log n)$ or $O(n)$ is mandatory.
+        </p>
+      </>
+    ),
+  },
+  {
+    id: 3,
+    title: "Graph Traversal: Deciding Between BFS and DFS",
+    summary: "A practical guide comparing Breadth-First Search (BFS) and Depth-First Search (DFS) traversals, their memory trade-offs, and typical use cases in interviews.",
+    author: "Pankaj Singh",
+    date: "May 15, 2026",
+    readTime: "7 min read",
+    tags: ["Algorithms", "Graphs"],
+    content: (
+      <>
+        <p className="mb-4">
+          Graphs are everywhere—from social networks and search engines to pathfinding in video games. Exploring these networks requires robust traversal algorithms. The two foundational methods are BFS and DFS.
+        </p>
+        <h3 className="text-xl font-bold font-serif my-4 text-[var(--udemy-text)] dark:text-white">Breadth-First Search (BFS)</h3>
+        <p className="mb-4">
+          BFS explores the graph level-by-level. It starts at a source node, visits all its immediate neighbors, and then visits the neighbors of those neighbors. It uses a <strong>Queue</strong> data structure (FIFO) to track vertices.
+        </p>
+        <p className="mb-4">
+          <strong>Key Use Case:</strong> Shortest path on unweighted graphs. Since BFS radiates outward equally, the first time it reaches a target node, it is guaranteed to have taken the path with the fewest edges.
+        </p>
+        <h3 className="text-xl font-bold font-serif my-4 text-[var(--udemy-text)] dark:text-white">Depth-First Search (DFS)</h3>
+        <p className="mb-4">
+          DFS explores as deep as possible along each branch before backtracking. It goes down a path until it hits a dead end, then backtracks to the most recent branch node. It uses a recursive call stack or an explicit <strong>Stack</strong> (LIFO).
+        </p>
+        <p className="mb-4">
+          <strong>Key Use Case:</strong> Topological sort, cycle detection, solving puzzles/mazes where you want to find *any* path rather than the shortest path.
+        </p>
+        <h3 className="text-xl font-bold font-serif my-4 text-[var(--udemy-text)] dark:text-white">Memory Trade-offs</h3>
+        <p className="mb-4">
+          BFS stores entire levels in memory, which can grow huge (width of the tree/graph). DFS only stores the current branch path (height of the tree/graph). Hence, DFS is often more memory-efficient on deep, narrow graphs.
+        </p>
+      </>
+    ),
+  },
+];
+
+export default function Blog() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedPost, setSelectedPost] = useState(null);
+
+  const filteredPosts = useMemo(() => {
+    return BLOG_POSTS.filter((post) => {
+      const matchesSearch =
+        post.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        post.summary.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        post.tags.some((t) => t.toLowerCase().includes(searchQuery.toLowerCase()));
+      return matchesSearch;
+    });
+  }, [searchQuery]);
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[var(--udemy-dark-bg)]">
+      <main className="container-app section-app">
+        <div className="mx-auto max-w-6xl">
+          {/* Header */}
+          <div className="text-center mb-16">
+            <span className="inline-flex items-center gap-2 text-[var(--color-primary)] dark:text-[var(--color-primary-light)] text-sm font-bold tracking-wider uppercase mb-4">
+              <Newspaper className="w-4 h-4" />
+              AlgoBuddy Blog
+            </span>
+            <h1 className="text-4xl md:text-5xl font-black font-serif text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)] mb-6">
+              Insights &{" "}
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] dark:from-[var(--color-primary-light)] dark:to-[var(--color-primary)]">
+                Guides
+              </span>
+            </h1>
+            <p className="text-xl text-[var(--udemy-muted)] dark:text-[var(--udemy-dark-muted)] max-w-2xl mx-auto">
+              Deepen your understanding with technical explanations, learning theories, and coding interview strategies.
+            </p>
+          </div>
+
+          {/* Search bar */}
+          <div className="max-w-md mx-auto mb-12">
+            <div className="relative">
+              <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--color-muted)]" />
+              <input
+                type="text"
+                placeholder="Search articles or tags..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-10 pr-4 py-2.5 text-sm bg-transparent rounded-[var(--radius-md)] border border-[var(--color-border)] outline-none focus:border-[var(--color-primary)] focus:ring-1 focus:ring-[var(--color-primary)] transition-all text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)]"
+              />
+            </div>
+          </div>
+
+          {/* Posts Grid */}
+          {filteredPosts.length > 0 ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+              {filteredPosts.map((post) => (
+                <article
+                  key={post.id}
+                  className="card-surface p-6 flex flex-col justify-between group hover:shadow-[var(--shadow-card-hover)] hover:-translate-y-1 transition-all duration-[var(--motion-normal)] cursor-pointer"
+                  onClick={() => setSelectedPost(post)}
+                >
+                  <div>
+                    {/* Tags */}
+                    <div className="flex flex-wrap gap-2 mb-4">
+                      {post.tags.map((tag) => (
+                        <span
+                          key={tag}
+                          className="px-2 py-0.5 rounded bg-udemy-purple/5 dark:bg-udemy-purple-light/5 text-[var(--color-primary)] dark:text-[var(--color-primary-light)] text-xs font-semibold"
+                        >
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+
+                    <h2 className="text-xl font-bold font-serif text-[var(--udemy-text)] dark:text-white mb-3 group-hover:text-[var(--color-primary)] dark:group-hover:text-[var(--color-primary-light)] transition-colors line-clamp-2">
+                      {post.title}
+                    </h2>
+                    <p className="text-[var(--udemy-muted)] dark:text-[var(--udemy-dark-muted)] text-sm leading-relaxed mb-6 line-clamp-3">
+                      {post.summary}
+                    </p>
+                  </div>
+
+                  <div>
+                    {/* Meta info */}
+                    <div className="flex items-center justify-between text-xs text-[var(--color-muted)] pt-4 border-t border-[var(--color-border)]">
+                      <span className="flex items-center gap-1">
+                        <Calendar className="w-3.5 h-3.5" />
+                        {post.date}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Clock className="w-3.5 h-3.5" />
+                        {post.readTime}
+                      </span>
+                    </div>
+                  </div>
+                </article>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-16 card-surface p-8">
+              <Newspaper className="w-12 h-12 text-[var(--color-muted)] mx-auto mb-4" />
+              <h3 className="text-lg font-bold text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)] mb-2">
+                No articles found
+              </h3>
+              <p className="text-[var(--udemy-muted)] dark:text-[var(--udemy-dark-muted)] max-w-sm mx-auto text-sm">
+                Try searching for another keyword or tag.
+              </p>
+            </div>
+          )}
+
+          {/* Back Home */}
+          <div className="mt-16 text-center">
+            <Link
+              href="/"
+              className="inline-flex items-center gap-2 px-6 py-2.5 rounded-full border border-[var(--color-border)] hover:border-[var(--color-primary)] hover:text-[var(--color-primary)] transition-all font-semibold text-sm text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)]"
+            >
+              ← Back to Home
+            </Link>
+          </div>
+        </div>
+      </main>
+
+      {/* Blog Article Reader Modal */}
+      {selectedPost && (
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm transition-opacity duration-300">
+          <div className="relative w-full max-w-2xl max-h-[85vh] overflow-y-auto bg-white dark:bg-[var(--udemy-dark-surface)] border border-[var(--color-border)] rounded-2xl p-6 md:p-8 shadow-elevated animate-in fade-in-50 zoom-in-95 duration-200">
+            {/* Close Button */}
+            <button
+              onClick={() => setSelectedPost(null)}
+              className="absolute top-4 right-4 p-1.5 rounded-full bg-[var(--color-neutral-100)] dark:bg-[var(--color-neutral-800)] hover:bg-[var(--color-neutral-200)] dark:hover:bg-[var(--color-neutral-700)] text-[var(--udemy-text)] dark:text-white transition-colors"
+              aria-label="Close modal"
+            >
+              <X className="w-5 h-5" />
+            </button>
+
+            {/* Modal Header */}
+            <div className="mb-6 border-b border-[var(--color-border)] pb-6 pr-6">
+              <div className="flex flex-wrap gap-2 mb-3">
+                {selectedPost.tags.map((tag) => (
+                  <span
+                    key={tag}
+                    className="px-2 py-0.5 rounded bg-udemy-purple/10 dark:bg-udemy-purple-light/10 text-[var(--color-primary)] dark:text-[var(--color-primary-light)] text-xs font-semibold"
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+              <h2 className="text-2xl md:text-3xl font-black font-serif text-[var(--udemy-text)] dark:text-white mb-4 leading-tight">
+                {selectedPost.title}
+              </h2>
+              <div className="flex flex-wrap items-center gap-4 text-sm text-[var(--color-muted)]">
+                <span className="flex items-center gap-1">
+                  <User className="w-4 h-4" />
+                  By {selectedPost.author}
+                </span>
+                <span className="flex items-center gap-1">
+                  <Calendar className="w-4 h-4" />
+                  {selectedPost.date}
+                </span>
+                <span className="flex items-center gap-1">
+                  <Clock className="w-4 h-4" />
+                  {selectedPost.readTime}
+                </span>
+              </div>
+            </div>
+
+            {/* Modal Body Content */}
+            <div className="text-base leading-relaxed text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)] select-text">
+              {selectedPost.content}
+            </div>
+
+            {/* Modal Footer */}
+            <div className="mt-8 pt-6 border-t border-[var(--color-border)] text-right">
+              <button
+                onClick={() => setSelectedPost(null)}
+                className="px-5 py-2.5 rounded-full bg-[var(--color-primary)] hover:bg-[var(--color-primary-dark)] text-white font-bold text-sm transition-all"
+              >
+                Close Reader
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/src/app/components/cheatsheets.jsx b/src/app/components/cheatsheets.jsx
new file mode 100644
index 000000000..f4d16193d
--- /dev/null
+++ b/src/app/components/cheatsheets.jsx
@@ -0,0 +1,266 @@
+"use client";
+
+import React, { useState } from "react";
+import Link from "next/link";
+import { Table, Zap, HelpCircle, Code, ListFilter } from "lucide-react";
+import Footer from "@/app/components/footer";
+
+const DS_COMPLEXITY = [
+  { name: "Array", avgAccess: "O(1)", avgSearch: "O(n)", avgInsert: "O(n)", avgDelete: "O(n)", worstAccess: "O(1)", worstSearch: "O(n)", worstInsert: "O(n)", worstDelete: "O(n)", space: "O(n)" },
+  { name: "Stack", avgAccess: "O(n)", avgSearch: "O(n)", avgInsert: "O(1)", avgDelete: "O(1)", worstAccess: "O(n)", worstSearch: "O(n)", worstInsert: "O(1)", worstDelete: "O(1)", space: "O(n)" },
+  { name: "Queue", avgAccess: "O(n)", avgSearch: "O(n)", avgInsert: "O(1)", avgDelete: "O(1)", worstAccess: "O(n)", worstSearch: "O(n)", worstInsert: "O(1)", worstDelete: "O(1)", space: "O(n)" },
+  { name: "Singly Linked List", avgAccess: "O(n)", avgSearch: "O(n)", avgInsert: "O(1)", avgDelete: "O(1)", worstAccess: "O(n)", worstSearch: "O(n)", worstInsert: "O(1)", worstDelete: "O(1)", space: "O(n)" },
+  { name: "Doubly Linked List", avgAccess: "O(n)", avgSearch: "O(n)", avgInsert: "O(1)", avgDelete: "O(1)", worstAccess: "O(n)", worstSearch: "O(n)", worstInsert: "O(1)", worstDelete: "O(1)", space: "O(n)" },
+  { name: "Binary Search Tree", avgAccess: "O(log n)", avgSearch: "O(log n)", avgInsert: "O(log n)", avgDelete: "O(log n)", worstAccess: "O(n)", worstSearch: "O(n)", worstInsert: "O(n)", worstDelete: "O(n)", space: "O(n)" },
+  { name: "AVL Tree", avgAccess: "O(log n)", avgSearch: "O(log n)", avgInsert: "O(log n)", avgDelete: "O(log n)", worstAccess: "O(log n)", worstSearch: "O(log n)", worstInsert: "O(log n)", worstDelete: "O(log n)", space: "O(n)" },
+  { name: "Hash Table", avgAccess: "N/A", avgSearch: "O(1)", avgInsert: "O(1)", avgDelete: "O(1)", worstAccess: "N/A", worstSearch: "O(n)", worstInsert: "O(n)", worstDelete: "O(n)", space: "O(n)" },
+];
+
+const ALGO_COMPLEXITY = [
+  { name: "Bubble Sort", best: "O(n)", avg: "O(n²)", worst: "O(n²)", space: "O(1)", stable: "Yes" },
+  { name: "Selection Sort", best: "O(n²)", avg: "O(n²)", worst: "O(n²)", space: "O(1)", stable: "No" },
+  { name: "Insertion Sort", best: "O(n)", avg: "O(n²)", worst: "O(n²)", space: "O(1)", stable: "Yes" },
+  { name: "Merge Sort", best: "O(n log n)", avg: "O(n log n)", worst: "O(n log n)", space: "O(n)", stable: "Yes" },
+  { name: "Quick Sort", best: "O(n log n)", avg: "O(n log n)", worst: "O(n²)", space: "O(log n)", stable: "No" },
+  { name: "Heap Sort", best: "O(n log n)", avg: "O(n log n)", worst: "O(n log n)", space: "O(1)", stable: "No" },
+];
+
+const PATTERNS = [
+  {
+    title: "Two Pointers",
+    description: "Initialize two pointers at separate indices (e.g., start and end) and move them towards each other or at different speeds.",
+    useCase: "Searching pairs in sorted arrays, reversing arrays, finding cycle detection.",
+    template: `function twoSumSorted(arr, target) {
+  let left = 0, right = arr.length - 1;
+  while (left < right) {
+    let sum = arr[left] + arr[right];
+    if (sum === target) return [left, right];
+    else if (sum < target) left++;
+    else right--;
+  }
+  return [];
+}`,
+  },
+  {
+    title: "Sliding Window",
+    description: "Maintain a dynamic or fixed subarray range (window) that expands or shrinks based on constraints while traversing.",
+    useCase: "Longest substring without repeating characters, maximum sum subarray of size K.",
+    template: `function maxSubarraySum(arr, k) {
+  let maxSum = 0, windowSum = 0;
+  for (let i = 0; i < arr.length; i++) {
+    windowSum += arr[i];
+    if (i >= k - 1) {
+      maxSum = Math.max(maxSum, windowSum);
+      windowSum -= arr[i - (k - 1)];
+    }
+  }
+  return maxSum;
+}`,
+  },
+  {
+    title: "Fast & Slow Pointers (Tortoise & Hare)",
+    description: "Use two pointers moving at different speeds (usually slow moves 1 step, fast moves 2 steps) to detect cycles or structure properties.",
+    useCase: "Linked List cycle detection, finding middle of linked list.",
+    template: `function hasCycle(head) {
+  let slow = head, fast = head;
+  while (fast && fast.next) {
+    slow = slow.next;
+    fast = fast.next.next;
+    if (slow === fast) return true;
+  }
+  return false;
+}`,
+  },
+];
+
+function getBadgeColor(val) {
+  if (val === "O(1)" || val === "O(log n)" || val === "Yes") {
+    return "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 border-green-200 dark:border-green-800/40";
+  }
+  if (val === "O(n)" || val === "O(log n)" || val === "O(log n)") {
+    return "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400 border-blue-200 dark:border-blue-800/40";
+  }
+  if (val === "O(n log n)") {
+    return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800/40";
+  }
+  if (val === "O(n²)" || val === "No") {
+    return "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400 border-red-200 dark:border-red-800/40";
+  }
+  return "bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400 border-gray-200 dark:border-gray-800/40";
+}
+
+export default function Cheatsheets() {
+  const [activeTab, setActiveTab] = useState("ds");
+  const [expandedPattern, setExpandedPattern] = useState(null);
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[var(--udemy-dark-bg)]">
+      <main className="container-app section-app">
+        <div className="mx-auto max-w-6xl">
+          {/* Header */}
+          <div className="text-center mb-16">
+            <span className="inline-flex items-center gap-2 text-[var(--color-primary)] dark:text-[var(--color-primary-light)] text-sm font-bold tracking-wider uppercase mb-4">
+              <Zap className="w-4 h-4 animate-pulse" />
+              Quick Reference
+            </span>
+            <h1 className="text-4xl md:text-5xl font-black font-serif text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)] mb-6">
+              DSA Complexity{" "}
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] dark:from-[var(--color-primary-light)] dark:to-[var(--color-primary)]">
+                Cheatsheets
+              </span>
+            </h1>
+            <p className="text-xl text-[var(--udemy-muted)] dark:text-[var(--udemy-dark-muted)] max-w-2xl mx-auto">
+              Compare time and space complexities at a glance. Identify the right data structure or algorithm for any problem.
+            </p>
+          </div>
+
+          {/* Toggle Tabs */}
+          <div className="flex justify-center mb-12">
+            <div className="inline-flex rounded-xl bg-[var(--color-neutral-100)] dark:bg-[var(--udemy-dark-surface)] p-1.5 border border-[var(--color-border)]">
+              <button
+                onClick={() => setActiveTab("ds")}
+                className={`px-6 py-2.5 rounded-lg text-sm font-bold transition-all ${
+                  activeTab === "ds"
+                    ? "bg-white dark:bg-[var(--color-neutral-800)] text-[var(--color-primary)] dark:text-[var(--color-primary-light)] shadow-sm"
+                    : "text-[var(--udemy-muted)] hover:text-[var(--udemy-text)] dark:hover:text-white"
+                }`}
+              >
+                Data Structures
+              </button>
+              <button
+                onClick={() => setActiveTab("algo")}
+                className={`px-6 py-2.5 rounded-lg text-sm font-bold transition-all ${
+                  activeTab === "algo"
+                    ? "bg-white dark:bg-[var(--color-neutral-800)] text-[var(--color-primary)] dark:text-[var(--color-primary-light)] shadow-sm"
+                    : "text-[var(--udemy-muted)] hover:text-[var(--udemy-text)] dark:hover:text-white"
+                }`}
+              >
+                Algorithms (Sorting)
+              </button>
+            </div>
+          </div>
+
+          {/* Tables Section */}
+          <div className="card-surface overflow-hidden mb-16">
+            <div className="overflow-x-auto w-full">
+              {activeTab === "ds" ? (
+                <table className="w-full text-left border-collapse min-w-[800px]">
+                  <thead>
+                    <tr className="bg-[var(--color-neutral-50)] dark:bg-[var(--udemy-dark-surface)] border-b border-[var(--color-border)]">
+                      <th className="p-4 font-bold text-sm text-[var(--udemy-text)] dark:text-white">Data Structure</th>
+                      <th className="p-4 font-bold text-sm text-[var(--udemy-text)] dark:text-white text-center" colSpan={4}>Average Case</th>
+                      <th className="p-4 font-bold text-sm text-[var(--udemy-text)] dark:text-white text-center" colSpan={4}>Worst Case</th>
+                      <th className="p-4 font-bold text-sm text-[var(--udemy-text)] dark:text-white text-center">Space</th>
+                    </tr>
+                    <tr className="bg-[var(--color-neutral-100)]/50 dark:bg-[var(--udemy-dark-surface)]/50 border-b border-[var(--color-border)] text-xs text-[var(--color-muted)]">
+                      <th className="p-3 font-semibold">Name</th>
+                      <th className="p-3 font-semibold text-center border-l border-[var(--color-border)]/50">Access</th>
+                      <th className="p-3 font-semibold text-center">Search</th>
+                      <th className="p-3 font-semibold text-center">Insert</th>
+                      <th className="p-3 font-semibold text-center">Delete</th>
+                      <th className="p-3 font-semibold text-center border-l border-[var(--color-border)]/50">Access</th>
+                      <th className="p-3 font-semibold text-center">Search</th>
+                      <th className="p-3 font-semibold text-center">Insert</th>
+                      <th className="p-3 font-semibold text-center">Delete</th>
+                      <th className="p-3 font-semibold text-center border-l border-[var(--color-border)]/50">Worst</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-[var(--color-border)]">
+                    {DS_COMPLEXITY.map((ds) => (
+                      <tr key={ds.name} className="hover:bg-[var(--color-neutral-100)] dark:hover:bg-[var(--udemy-dark-surface)]/60 transition-colors">
+                        <td className="p-4 font-bold text-sm text-[var(--udemy-text)] dark:text-white">{ds.name}</td>
+                        {/* Avg */}
+                        <td className="p-3 text-center border-l border-[var(--color-border)]/30"><span className={`inline-block px-2 py-0.5 rounded text-xs font-mono font-medium border ${getBadgeColor(ds.avgAccess)}`}>{ds.avgAccess}</span></td>
+                        <td className="p-3 text-center"><span className={`inline-block px-2 py-0.5 rounded text-xs font-mono font-medium border ${getBadgeColor(ds.avgSearch)}`}>{ds.avgSearch}</span></td>
+                        <td className="p-3 text-center"><span className={`inline-block px-2 py-0.5 rounded text-xs font-mono font-medium border ${getBadgeColor(ds.avgInsert)}`}>{ds.avgInsert}</span></td>
+                        <td className="p-3 text-center"><span className={`inline-block px-2 py-0.5 rounded text-xs font-mono font-medium border ${getBadgeColor(ds.avgDelete)}`}>{ds.avgDelete}</span></td>
+                        {/* Worst */}
+                        <td className="p-3 text-center border-l border-[var(--color-border)]/30"><span className={`inline-block px-2 py-0.5 rounded text-xs font-mono font-medium border ${getBadgeColor(ds.worstAccess)}`}>{ds.worstAccess}</span></td>
+                        <td className="p-3 text-center"><span className={`inline-block px-2 py-0.5 rounded text-xs font-mono font-medium border ${getBadgeColor(ds.worstSearch)}`}>{ds.worstSearch}</span></td>
+                        <td className="p-3 text-center"><span className={`inline-block px-2 py-0.5 rounded text-xs font-mono font-medium border ${getBadgeColor(ds.worstInsert)}`}>{ds.worstInsert}</span></td>
+                        <td className="p-3 text-center"><span className={`inline-block px-2 py-0.5 rounded text-xs font-mono font-medium border ${getBadgeColor(ds.worstDelete)}`}>{ds.worstDelete}</span></td>
+                        {/* Space */}
+                        <td className="p-3 text-center border-l border-[var(--color-border)]/30"><span className={`inline-block px-2 py-0.5 rounded text-xs font-mono font-semibold border ${getBadgeColor(ds.space)}`}>{ds.space}</span></td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              ) : (
+                <table className="w-full text-left border-collapse min-w-[700px]">
+                  <thead>
+                    <tr className="bg-[var(--color-neutral-50)] dark:bg-[var(--udemy-dark-surface)] border-b border-[var(--color-border)]">
+                      <th className="p-4 font-bold text-sm text-[var(--udemy-text)] dark:text-white">Algorithm Name</th>
+                      <th className="p-4 font-bold text-sm text-[var(--udemy-text)] dark:text-white text-center">Best Case</th>
+                      <th className="p-4 font-bold text-sm text-[var(--udemy-text)] dark:text-white text-center">Average Case</th>
+                      <th className="p-4 font-bold text-sm text-[var(--udemy-text)] dark:text-white text-center">Worst Case</th>
+                      <th className="p-4 font-bold text-sm text-[var(--udemy-text)] dark:text-white text-center">Worst Space</th>
+                      <th className="p-4 font-bold text-sm text-[var(--udemy-text)] dark:text-white text-center">Stable</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-[var(--color-border)]">
+                    {ALGO_COMPLEXITY.map((algo) => (
+                      <tr key={algo.name} className="hover:bg-[var(--color-neutral-100)] dark:hover:bg-[var(--udemy-dark-surface)]/60 transition-colors">
+                        <td className="p-4 font-bold text-sm text-[var(--udemy-text)] dark:text-white">{algo.name}</td>
+                        <td className="p-4 text-center"><span className={`inline-block px-2.5 py-0.5 rounded text-xs font-mono font-medium border ${getBadgeColor(algo.best)}`}>{algo.best}</span></td>
+                        <td className="p-4 text-center"><span className={`inline-block px-2.5 py-0.5 rounded text-xs font-mono font-medium border ${getBadgeColor(algo.avg)}`}>{algo.avg}</span></td>
+                        <td className="p-4 text-center"><span className={`inline-block px-2.5 py-0.5 rounded text-xs font-mono font-medium border ${getBadgeColor(algo.worst)}`}>{algo.worst}</span></td>
+                        <td className="p-4 text-center"><span className={`inline-block px-2.5 py-0.5 rounded text-xs font-mono font-medium border ${getBadgeColor(algo.space)}`}>{algo.space}</span></td>
+                        <td className="p-4 text-center"><span className={`inline-block px-3 py-0.5 rounded-full text-xs font-semibold border ${getBadgeColor(algo.stable)}`}>{algo.stable}</span></td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </div>
+          </div>
+
+          {/* Patterns Section */}
+          <div className="mb-16">
+            <h2 className="text-3xl font-bold font-serif text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)] mb-8 flex items-center gap-3">
+              <Code className="w-6 h-6 text-[var(--color-primary)]" />
+              Essential DSA Patterns
+            </h2>
+            <div className="grid grid-cols-1 gap-6">
+              {PATTERNS.map((pattern, index) => (
+                <div key={pattern.title} className="card-surface p-6">
+                  <div className="flex items-center justify-between mb-4">
+                    <h3 className="text-xl font-bold text-[var(--udemy-text)] dark:text-white font-serif">{pattern.title}</h3>
+                    <button
+                      onClick={() => setExpandedPattern(expandedPattern === index ? null : index)}
+                      className="text-xs font-bold text-[var(--color-primary)] dark:text-[var(--color-primary-light)] hover:underline"
+                    >
+                      {expandedPattern === index ? "Hide Code Template" : "View Code Template"}
+                    </button>
+                  </div>
+                  <p className="text-sm text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)] mb-3">{pattern.description}</p>
+                  <p className="text-xs text-[var(--udemy-muted)] dark:text-[var(--udemy-dark-muted)] mb-4">
+                    <strong className="text-[var(--color-primary)]">Common Use Cases:</strong> {pattern.useCase}
+                  </p>
+
+                  {expandedPattern === index && (
+                    <div className="mt-4 rounded-lg bg-[var(--color-neutral-900)] p-4 overflow-x-auto border border-black hljs-force-dark">
+                      <pre className="text-xs font-mono leading-relaxed text-left text-[#abb2bf]">
+                        <code>{pattern.template}</code>
+                      </pre>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Back Home */}
+          <div className="text-center">
+            <Link
+              href="/"
+              className="inline-flex items-center gap-2 px-6 py-2.5 rounded-full border border-[var(--color-border)] hover:border-[var(--color-primary)] hover:text-[var(--color-primary)] transition-all font-semibold text-sm text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)]"
+            >
+              ← Back to Home
+            </Link>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/src/app/components/cheatsheets/CheatsheetCard.jsx b/src/app/components/cheatsheets/CheatsheetCard.jsx
new file mode 100644
index 000000000..bef0a2f08
--- /dev/null
+++ b/src/app/components/cheatsheets/CheatsheetCard.jsx
@@ -0,0 +1,50 @@
+import { ChevronRight, Clock, Layers } from "lucide-react";
+import Link from "next/link";
+
+const difficultyColors = {
+  beginner:"bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-700/50",
+  intermediate:"bg-yellow-100 text-yellow-700 border-yellow-200 dark:bg-yellow-900/30 dark:text-yellow-400 dark:border-yellow-700/50",
+  advanced:"bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-700/50",
+};
+
+export default function CheatsheetCard({ cheatsheet }) {
+  const { id, title, category, difficulty, timeComplexity, spaceComplexity, whenToUse } = cheatsheet;
+
+  return (
+    <Link
+      href={`/cheatsheets/${id}`}
+      className="group block p-5 rounded-xl border border-slate-200 dark:border-slate-700/50 bg-white dark:bg-slate-900/40
+      hover:bg-slate-50 dark:hover:bg-slate-900/80 hover:border-[#a435f0]/40 hover:ring-1 hover:ring-[#a435f0]/30 transition-all shadow-lg hover:shadow-[#a435f0]/5"
+    >
+      <div className="flex items-start justify-between mb-3">
+        <h3 className="text-lg font-bold text-slate-900 dark:text-white group-hover:text-[#c084fc] transition-colors">
+          {title}
+        </h3>
+        {difficulty && (
+          <span className={`text-[10.5px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full border ${difficultyColors[difficulty] || ""}`}>
+            {difficulty}
+          </span>
+        )}
+      </div>
+
+      <div className="flex items-center gap-4 text-sm text-slate-600 dark:text-slate-400 mb-3">
+        <span className="flex items-center gap-1">
+          <Clock size={12} />
+          {timeComplexity.average}
+        </span>
+        <span className="flex items-center gap-1">
+          <Layers size={12} />
+          {spaceComplexity}
+        </span>
+      </div>
+
+      {whenToUse && (
+        <p className="text-xs text-slate-600 dark:text-slate-400 line-clamp-2 mb-4">{whenToUse}</p>
+      )}
+
+      <div className="flex items-center text-xs font-semibold text-[#a435f0] group-hover:text-[#c084fc] transition-colors">
+        View Cheatsheet <ChevronRight size={14} className="ml-1 group-hover:translate-x-0.5 transition-transform" />
+      </div>
+    </Link>
+  );
+}
diff --git a/src/app/components/cheatsheets/CheatsheetDetail.jsx b/src/app/components/cheatsheets/CheatsheetDetail.jsx
new file mode 100644
index 000000000..2fba7ecbd
--- /dev/null
+++ b/src/app/components/cheatsheets/CheatsheetDetail.jsx
@@ -0,0 +1,358 @@
+"use client";
+
+import { useMemo } from "react";
+import { ArrowLeft, Bookmark, Download, Search } from "lucide-react";
+import Link from "next/link";
+import ComplexityTable from "./ComplexityTable";
+import CodeSnippet from "./CodeSnippet";
+import { allCheatsheets } from "./data";
+
+const practiceProblemsById = {
+  "binary-search": {
+    easy: ["Search Insert Position"],
+    medium: ["Find Peak Element"],
+    hard: ["Median of Two Sorted Arrays"],
+  },
+  "hash-map": {
+    easy: ["Two Sum"],
+    medium: ["Group Anagrams"],
+    hard: ["Substring with Concatenation of All Words"],
+  },
+  "linear-search": {
+    easy: ["Find the First Occurrence"],
+    medium: ["Count Target Occurrences"],
+    hard: ["Minimum Subarray Cover"],
+  },
+  "jump-search": {
+    easy: ["Implement Jump Search"],
+    medium: ["Search in a Large Sorted Array"],
+    hard: ["Block-Based Search Strategy"],
+  },
+  default: {
+    easy: ["Practice the basic implementation"],
+    medium: ["Solve a standard interview variation"],
+    hard: ["Combine the technique with another pattern"],
+  },
+};
+
+function getPracticeProblems(id) {
+  return practiceProblemsById[id] || practiceProblemsById.default;
+}
+
+function SectionCard({ id, title, children, tone = "slate" }) {
+  const toneClasses =
+    tone === "success"
+      ? "border-green-200 bg-green-50 dark:border-green-900/40 dark:bg-green-950/15"
+      : tone === "danger"
+        ? "border-red-200 bg-red-50 dark:border-red-900/40 dark:bg-red-950/15"
+        : "border-slate-200 bg-white dark:border-slate-800/70 dark:bg-slate-950/40";
+
+  return (
+    <section id={id} className={`rounded-2xl border p-5 shadow-sm ${toneClasses}`}>
+      <h2 className="mb-4 text-lg font-semibold text-slate-900 dark:text-white">{title}</h2>
+      {children}
+    </section>
+  );
+}
+
+function Badge({ children }) {
+  return (
+    <span className="inline-flex items-center rounded-full border border-[#a435f0]/20 bg-[#a435f0]/10 px-3 py-1 text-xs font-semibold text-[#7c2bd6] dark:text-[#d8b4fe]">
+      {children}
+    </span>
+  );
+}
+
+function Pill({ children }) {
+  return (
+    <span className="inline-flex items-center rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-600 dark:border-slate-800 dark:bg-slate-900/60 dark:text-slate-300">
+      {children}
+    </span>
+  );
+}
+
+export default function CheatsheetDetail({ cheatsheet }) {
+  const relatedTopics = useMemo(() => {
+    return allCheatsheets.map((item) => ({
+      id: item.id,
+      title: item.title,
+      category: item.category,
+    }));
+  }, []);
+
+  if (!cheatsheet) {
+    return (
+      <div className="py-20 text-center">
+        <h2 className="mb-4 text-2xl font-bold text-slate-900 dark:text-white">Cheatsheet not found</h2>
+        <Link href="/cheatsheets" className="text-[#a435f0] transition-colors hover:text-[#c084fc]">
+          Back to cheatsheets
+        </Link>
+      </div>
+    );
+  }
+
+  const { id, title, category, difficulty, code, steps, whenToUse, pitfalls } = cheatsheet;
+  const overview =
+    cheatsheet.overview ||
+    `${title} is a quick-reference guide for solving problems with the ${title.toLowerCase()} pattern.`;
+  const practiceProblems = getPracticeProblems(id);
+
+  return (
+    <div className="mx-auto max-w-7xl" id="cheatsheet-content">
+      <Link
+        href="/cheatsheets"
+        className="mb-6 inline-flex items-center gap-1.5 text-sm text-slate-600 transition-colors hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
+      >
+        <ArrowLeft size={16} /> Back to cheatsheets
+      </Link>
+
+      <div className="flex flex-col gap-6 lg:flex-row">
+        <aside className="self-start lg:sticky lg:top-24 lg:w-1/5">
+          <div className="space-y-4 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800/70 dark:bg-slate-950/40">
+            <div>
+              <label className="mb-2 block text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
+                Search
+              </label>
+              <div className="relative">
+                <Search
+                  size={16}
+                  className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
+                />
+                <input
+                  type="text"
+                  placeholder="Search cheatsheets"
+                  readOnly
+                  className="w-full rounded-xl border border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-600 placeholder:text-slate-400 dark:border-slate-800 dark:bg-slate-900/70 dark:text-slate-300"
+                />
+              </div>
+            </div>
+
+            <div>
+              <h2 className="mb-3 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
+                Cheatsheets
+              </h2>
+              <nav className="max-h-[28rem] space-y-2 overflow-auto pr-1">
+                {relatedTopics.map((item) => {
+                  const isActive = item.id === id;
+
+                  return (
+                    <Link
+                      key={item.id}
+                      href={`/cheatsheets/${item.id}`}
+                      className={`flex items-start justify-between gap-3 rounded-xl border px-3 py-3 text-sm transition-colors ${
+                        isActive
+                          ? "border-[#a435f0]/40 bg-[#a435f0]/10 text-[#7c2bd6] dark:text-[#d8b4fe]"
+                          : "border-slate-200 bg-slate-50 text-slate-700 hover:border-[#a435f0]/30 hover:bg-[#a435f0]/5 dark:border-slate-800 dark:bg-slate-900/40 dark:text-slate-300"
+                      }`}
+                    >
+                      <div>
+                        <div className="font-medium">{item.title}</div>
+                        <div className="text-xs text-slate-500 dark:text-slate-400">{item.category}</div>
+                      </div>
+                      {isActive && (
+                        <span className="rounded-full bg-[#a435f0] px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-white">
+                          Active
+                        </span>
+                      )}
+                    </Link>
+                  );
+                })}
+              </nav>
+            </div>
+          </div>
+        </aside>
+
+        <main className="space-y-6 lg:w-3/5">
+          <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800/70 dark:bg-slate-950/40">
+            <div className="mb-4 flex flex-wrap items-center gap-2">
+              <Badge>{category}</Badge>
+              <Badge>{difficulty}</Badge>
+            </div>
+
+            <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+              <div className="space-y-3">
+                <h1 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white md:text-4xl">
+                  {title}
+                </h1>
+                <p className="max-w-2xl text-sm leading-6 text-slate-600 dark:text-slate-400">{overview}</p>
+
+                <div className="flex flex-wrap gap-3">
+                  <Pill>Time: {cheatsheet.timeComplexity?.average || cheatsheet.timeComplexity}</Pill>
+                  <Pill>Space: {cheatsheet.spaceComplexity}</Pill>
+                </div>
+              </div>
+
+              <div className="flex flex-wrap gap-3">
+                <button
+                  type="button"
+                  className="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm font-medium text-slate-700 transition-colors hover:border-[#a435f0]/30 hover:text-[#7c2bd6] dark:border-slate-800 dark:bg-slate-900/60 dark:text-slate-300"
+                >
+                  <Bookmark size={16} />
+                  Bookmark
+                </button>
+                <button
+                  type="button"
+                  className="inline-flex items-center gap-2 rounded-xl bg-[#a435f0] px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-[#8f2cd6]"
+                >
+                  <Download size={16} />
+                  Download PDF
+                </button>
+              </div>
+            </div>
+          </section>
+
+          <SectionCard id="overview" title="Overview">
+            <p className="text-sm leading-7 text-slate-600 dark:text-slate-400">{overview}</p>
+          </SectionCard>
+
+          <SectionCard id="complexity" title="Complexity">
+            <div className="space-y-4">
+              <div className="grid gap-3 sm:grid-cols-2">
+                <Pill>Time: {cheatsheet.timeComplexity?.average || cheatsheet.timeComplexity}</Pill>
+                <Pill>Space: {cheatsheet.spaceComplexity}</Pill>
+              </div>
+              {cheatsheet.timeComplexity?.best && <ComplexityTable cheatsheet={cheatsheet} />}
+            </div>
+          </SectionCard>
+
+          {whenToUse && (
+            <SectionCard id="when-to-use" title="When to Use" tone="success">
+              {Array.isArray(whenToUse) ? (
+                <ul className="space-y-3 text-sm text-slate-600 dark:text-slate-400">
+                  {whenToUse.map((item) => (
+                    <li key={item} className="flex gap-3">
+                      <span className="mt-2 h-2 w-2 rounded-full bg-green-500" />
+                      <span>{item}</span>
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p className="text-sm leading-7 text-slate-600 dark:text-slate-400">{whenToUse}</p>
+              )}
+            </SectionCard>
+          )}
+
+          <SectionCard id="common-mistakes" title="Common Mistakes" tone="danger">
+            {Array.isArray(pitfalls) ? (
+              <ul className="space-y-3 text-sm text-slate-600 dark:text-slate-400">
+                {pitfalls.map((item) => (
+                  <li key={item} className="flex gap-3">
+                    <span className="mt-2 h-2 w-2 rounded-full bg-red-500" />
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p className="text-sm leading-7 text-slate-600 dark:text-slate-400">
+                {pitfalls || "Watch boundary conditions, edge cases, and assumptions about the input."}
+              </p>
+            )}
+          </SectionCard>
+
+          {code && (
+            <SectionCard id="code" title="Code">
+              <div className="space-y-4">
+                {code.javascript && <CodeSnippet code={code.javascript.trim()} language="javascript" />}
+                {code.python && <CodeSnippet code={code.python.trim()} language="python" />}
+              </div>
+            </SectionCard>
+          )}
+
+          {steps && steps.length > 0 && (
+            <SectionCard id="steps" title="Algorithm Steps">
+              <ol className="space-y-3">
+                {steps.map((step, index) => (
+                  <li key={step} className="flex items-start gap-3 text-sm text-slate-600 dark:text-slate-400">
+                    <span className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-[#a435f0]/10 text-xs font-bold text-[#7c2bd6] dark:text-[#d8b4fe]">
+                      {index + 1}
+                    </span>
+                    <span>{step}</span>
+                  </li>
+                ))}
+              </ol>
+            </SectionCard>
+          )}
+
+          <SectionCard id="practice-problems" title="Practice Problems">
+            <div className="grid gap-4 md:grid-cols-3">
+              {Object.entries({
+                Easy: practiceProblems.easy,
+                Medium: practiceProblems.medium,
+                Hard: practiceProblems.hard,
+              }).map(([difficultyLabel, problems]) => (
+                <div
+                  key={difficultyLabel}
+                  className="rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-900/60"
+                >
+                  <h3 className="text-sm font-semibold text-slate-900 dark:text-white">{difficultyLabel}</h3>
+                  <ul className="mt-3 space-y-2 text-sm text-slate-600 dark:text-slate-400">
+                    {problems.map((problem) => (
+                      <li key={problem} className="flex gap-2">
+                        <span className="text-[#a435f0]">-</span>
+                        <span>{problem}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          </SectionCard>
+        </main>
+         <aside className="self-start lg:sticky lg:top-24 lg:w-1/5">
+          <div className="space-y-4 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800/70 dark:bg-slate-950/40">
+            <div>
+              <h2 className="mb-3 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
+                Table of Contents
+              </h2>
+              <nav className="space-y-2">
+                {[
+                  { label: "Overview", href: "#overview" },
+                  { label: "Complexity", href: "#complexity" },
+                  { label: "When to Use", href: "#when-to-use" },
+                  { label: "Common Mistakes", href: "#common-mistakes" },
+                  { label: "Code", href: "#code" },
+                  { label: "Algorithm Steps", href: "#steps" },
+                  { label: "Practice Problems", href: "#practice-problems" },
+                ].map((item) => (
+                  <a
+                    key={item.href}
+                    href={item.href}
+                    className="block rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700 transition-colors hover:border-[#a435f0]/30 hover:text-[#7c2bd6] dark:border-slate-800 dark:bg-slate-900/40 dark:text-slate-300"
+                  >
+                    {item.label}
+                  </a>
+                ))}
+              </nav>
+            </div>
+
+            <div>
+              <h2 className="mb-3 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
+                Quick Actions
+              </h2>
+              <div className="space-y-2">
+                <button
+                  type="button"
+                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-left text-sm text-slate-700 transition-colors hover:border-[#a435f0]/30 hover:text-[#7c2bd6] dark:border-slate-800 dark:bg-slate-900/40 dark:text-slate-300"
+                >
+                  Download PDF
+                </button>
+                <button
+                  type="button"
+                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-left text-sm text-slate-700 transition-colors hover:border-[#a435f0]/30 hover:text-[#7c2bd6] dark:border-slate-800 dark:bg-slate-900/40 dark:text-slate-300"
+                >
+                  Open Visualizer
+                </button>
+                <button
+                  type="button"
+                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-left text-sm text-slate-700 transition-colors hover:border-[#a435f0]/30 hover:text-[#7c2bd6] dark:border-slate-800 dark:bg-slate-900/40 dark:text-slate-300"
+                >
+                  Practice Problems
+                </button>
+              </div>
+            </div>
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/cheatsheets/CodeSnippet.jsx b/src/app/components/cheatsheets/CodeSnippet.jsx
new file mode 100644
index 000000000..ae70eede7
--- /dev/null
+++ b/src/app/components/cheatsheets/CodeSnippet.jsx
@@ -0,0 +1,31 @@
+"use client";
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+
+export default function CodeSnippet({ code, language = "javascript" }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="relative group rounded-lg bg-slate-950 border border-slate-800 overflow-hidden">
+      <div className="flex items-center justify-between px-4 py-2 bg-slate-900 border-b border-slate-800">
+        <span className="text-xs font-mono text-slate-400">{language}</span>
+        <button
+          onClick={handleCopy}
+          className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-white transition-colors"
+        >
+          {copied ? <Check size={14} className="text-green-400" /> : <Copy size={14} />}
+          {copied ? "Copied!" : "Copy"}
+        </button>
+      </div>
+      <pre className="p-4 overflow-x-auto">
+        <code className="text-sm font-mono leading-relaxed text-slate-200">{code}</code>
+      </pre>
+    </div>
+  );
+}
diff --git a/src/app/components/cheatsheets/ComplexityTable.jsx b/src/app/components/cheatsheets/ComplexityTable.jsx
new file mode 100644
index 000000000..51c243920
--- /dev/null
+++ b/src/app/components/cheatsheets/ComplexityTable.jsx
@@ -0,0 +1,65 @@
+function getBadgeColor(val) {
+  if (!val) return "bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400 border-gray-200 dark:border-gray-800/40";
+  const s = String(val);
+  if (s === "O(1)" || s === "O(log n)" || s === "Yes") {
+    return "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 border-green-200 dark:border-green-800/40";
+  }
+  if (s.startsWith("O(n)") && s !== "O(n log n)" && s !== "O(n²)") {
+    return "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400 border-blue-200 dark:border-blue-800/40";
+  }
+  if (s === "O(n log n)") {
+    return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800/40";
+  }
+  return "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400 border-red-200 dark:border-red-800/40";
+}
+
+export default function ComplexityTable({ cheatsheet }) {
+  const { timeComplexity, spaceComplexity, stable, inPlace } = cheatsheet;
+
+  return (
+    <div className="overflow-hidden rounded-xl border border-slate-700/50 bg-slate-900/60">
+      <table className="w-full text-left border-collapse">
+        <thead>
+          <tr className="bg-slate-800/80 border-b border-slate-700">
+            <th className="p-3 text-xs font-bold text-slate-300 uppercase tracking-wider">Metric</th>
+            <th className="p-3 text-xs font-bold text-slate-300 uppercase tracking-wider text-center">Best</th>
+            <th className="p-3 text-xs font-bold text-slate-300 uppercase tracking-wider text-center">Average</th>
+            <th className="p-3 text-xs font-bold text-slate-300 uppercase tracking-wider text-center">Worst</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-slate-700/50">
+          <tr className="hover:bg-slate-800/40 transition-colors">
+            <td className="p-3 text-sm font-semibold text-slate-200">Time</td>
+            <td className="p-3 text-center"><Badge value={timeComplexity.best} /></td>
+            <td className="p-3 text-center"><Badge value={timeComplexity.average} /></td>
+            <td className="p-3 text-center"><Badge value={timeComplexity.worst} /></td>
+          </tr>
+          <tr className="hover:bg-slate-800/40 transition-colors">
+            <td className="p-3 text-sm font-semibold text-slate-200">Space</td>
+            <td className="p-3 text-center" colSpan={3}><Badge value={spaceComplexity} /></td>
+          </tr>
+          {stable !== undefined && (
+            <tr className="hover:bg-slate-800/40 transition-colors">
+              <td className="p-3 text-sm font-semibold text-slate-200">Stable</td>
+              <td className="p-3 text-center" colSpan={3}><Badge value={stable ? "Yes" : "No"} /></td>
+            </tr>
+          )}
+          {inPlace !== undefined && (
+            <tr className="hover:bg-slate-800/40 transition-colors">
+              <td className="p-3 text-sm font-semibold text-slate-200">In-Place</td>
+              <td className="p-3 text-center" colSpan={3}><Badge value={inPlace ? "Yes" : "No"} /></td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function Badge({ value }) {
+  return (
+    <span className={`inline-block px-2.5 py-0.5 rounded text-xs font-mono font-semibold border ${getBadgeColor(value)}`}>
+      {value}
+    </span>
+  );
+}
diff --git a/src/app/components/cheatsheets/data/graphs.js b/src/app/components/cheatsheets/data/graphs.js
new file mode 100644
index 000000000..e8248365a
--- /dev/null
+++ b/src/app/components/cheatsheets/data/graphs.js
@@ -0,0 +1,167 @@
+export const graphsCheatsheets = [
+  {
+    id: "bfs",
+    title: "Breadth-First Search",
+    category: "graphs",
+    difficulty: "intermediate",
+    timeComplexity: { best: "O(V + E)", average: "O(V + E)", worst: "O(V + E)" },
+    spaceComplexity: "O(V)",
+    code: {
+      javascript: `function bfs(graph, start) {
+  const visited = new Set();
+  const queue = [start];
+  const result = [];
+  visited.add(start);
+  while (queue.length > 0) {
+    const node = queue.shift();
+    result.push(node);
+    for (const neighbor of graph[node]) {
+      if (!visited.has(neighbor)) {
+        visited.add(neighbor);
+        queue.push(neighbor);
+      }
+    }
+  }
+  return result;
+}`,
+      python: `from collections import deque
+
+def bfs(graph, start):
+    visited = {start}
+    queue = deque([start])
+    result = []
+    while queue:
+        node = queue.popleft()
+        result.append(node)
+        for neighbor in graph[node]:
+            if neighbor not in visited:
+                visited.add(neighbor)
+                queue.append(neighbor)
+    return result`
+    },
+    steps: [
+      "Start from the given source node",
+      "Mark it visited and enqueue it",
+      "Dequeue a node, process it, and enqueue all unvisited neighbors",
+      "Repeat until the queue is empty"
+    ],
+    whenToUse: "Shortest path in unweighted graphs; level-order traversal; web crawling",
+    pitfalls: "O(V) memory for the queue; may explore many nodes unnecessarily for deep targets"
+  },
+  {
+    id: "dfs",
+    title: "Depth-First Search",
+    category: "graphs",
+    difficulty: "intermediate",
+    timeComplexity: { best: "O(V + E)", average: "O(V + E)", worst: "O(V + E)" },
+    spaceComplexity: "O(V)",
+    code: {
+      javascript: `// Iterative
+function dfs(graph, start) {
+  const visited = new Set();
+  const stack = [start];
+  const result = [];
+  while (stack.length > 0) {
+    const node = stack.pop();
+    if (visited.has(node)) continue;
+    visited.add(node);
+    result.push(node);
+    for (const neighbor of graph[node]) {
+      if (!visited.has(neighbor)) stack.push(neighbor);
+    }
+  }
+  return result;
+}
+// Recursive
+function dfsRecursive(graph, node, visited = new Set(), result = []) {
+  visited.add(node);
+  result.push(node);
+  for (const neighbor of graph[node]) {
+    if (!visited.has(neighbor)) dfsRecursive(graph, neighbor, visited, result);
+  }
+  return result;
+}`,
+      python: `def dfs_iterative(graph, start):
+    visited = set()
+    stack = [start]
+    result = []
+    while stack:
+        node = stack.pop()
+        if node in visited: continue
+        visited.add(node)
+        result.append(node)
+        for neighbor in graph[node]:
+            if neighbor not in visited:
+                stack.append(neighbor)
+    return result
+
+def dfs_recursive(graph, node, visited=None, result=None):
+    if visited is None: visited = set()
+    if result is None: result = []
+    visited.add(node)
+    result.append(node)
+    for neighbor in graph[node]:
+        if neighbor not in visited:
+            dfs_recursive(graph, neighbor, visited, result)
+    return result`
+    },
+    steps: [
+      "Start from the source node and mark it visited",
+      "Recursively visit an unvisited neighbor (or push to stack)",
+      "Backtrack when no unvisited neighbors remain",
+      "Continue until all reachable nodes are visited"
+    ],
+    whenToUse: "Path existence; cycle detection; topological sorting; maze solving",
+    pitfalls: "May go very deep; iterative version avoids recursion stack overflow"
+  },
+  {
+    id: "dijkstra",
+    title: "Dijkstra's Algorithm",
+    category: "graphs",
+    difficulty: "advanced",
+    timeComplexity: { best: "O((V + E) log V)", average: "O((V + E) log V)", worst: "O((V + E) log V)" },
+    spaceComplexity: "O(V)",
+    code: {
+      javascript: `function dijkstra(graph, start) {
+  const dist = {};
+  const pq = [[0, start]];
+  for (const node in graph) dist[node] = Infinity;
+  dist[start] = 0;
+  while (pq.length) {
+    pq.sort((a, b) => a[0] - b[0]);
+    const [d, u] = pq.shift();
+    if (d > dist[u]) continue;
+    for (const [v, w] of graph[u]) {
+      if (dist[u] + w < dist[v]) {
+        dist[v] = dist[u] + w;
+        pq.push([dist[v], v]);
+      }
+    }
+  }
+  return dist;
+}`,
+      python: `import heapq
+
+def dijkstra(graph, start):
+    dist = {node: float('inf') for node in graph}
+    dist[start] = 0
+    pq = [(0, start)]
+    while pq:
+        d, u = heapq.heappop(pq)
+        if d > dist[u]: continue
+        for v, w in graph[u]:
+            if dist[u] + w < dist[v]:
+                dist[v] = dist[u] + w
+                heapq.heappush(pq, (dist[v], v))
+    return dist`
+    },
+    steps: [
+      "Initialize distances: source = 0, all others = infinity",
+      "Extract the unvisited node with the smallest distance",
+      "Relax all its neighbors (update if shorter path found)",
+      "Repeat until all nodes are processed"
+    ],
+    whenToUse: "Shortest path in weighted graphs with non-negative edges; GPS navigation",
+    pitfalls: "Fails with negative edge weights; use a priority queue for efficiency"
+  }
+];
diff --git a/src/app/components/cheatsheets/data/hashmap.js b/src/app/components/cheatsheets/data/hashmap.js
new file mode 100644
index 000000000..e148ba505
--- /dev/null
+++ b/src/app/components/cheatsheets/data/hashmap.js
@@ -0,0 +1,53 @@
+export const hashMapCheatsheets = [
+  {
+    id: "hash-map",
+    title: "Hash Map",
+    category: "hashmap",
+    difficulty: "beginner",
+    timeComplexity: { best: "O(1)", average: "O(1)", worst: "O(n)" },
+    spaceComplexity: "O(n)",
+    code: {
+      javascript: `// Map (ES6)
+const map = new Map();
+map.set('key', 'value');
+map.get('key');   // 'value'
+map.has('key');   // true
+map.delete('key');
+map.size;         // 0
+
+// Object (alternative)
+const obj = {};
+obj.key = 'value';
+obj['key'];       // 'value'
+'key' in obj;     // true
+delete obj.key;
+
+// Set (unique values)
+const set = new Set([1, 2, 3, 1]);
+set.has(1);       // true
+set.size;         // 3 (duplicates removed)`,
+      python: `# Dictionary (hash map)
+d = {}
+d['key'] = 'value'
+d.get('key')       # 'value'
+'key' in d         # True
+del d['key']
+len(d)             # 0
+
+# Set (unique values)
+s = {1, 2, 3, 1}
+1 in s             # True
+len(s)             # 3
+s.add(4)
+s.remove(1)`
+    },
+    steps: [
+      "Hash function computes an index from the key",
+      "Key-value pair is stored at that index (bucket)",
+      "On collision, separate chaining or open addressing resolves it",
+      "Average O(1) for get, set, delete with a good hash function"
+    ],
+    whenToUse: "Fast lookups by key; counting frequencies; caching; deduplication",
+    pitfalls: "Worst-case O(n) if hash collisions are many; unordered; more memory overhead than arrays"
+  }
+];
diff --git a/src/app/components/cheatsheets/data/index.js b/src/app/components/cheatsheets/data/index.js
new file mode 100644
index 000000000..cf9b77d7c
--- /dev/null
+++ b/src/app/components/cheatsheets/data/index.js
@@ -0,0 +1,41 @@
+import { sortingCheatsheets } from "./sorting";
+import { searchingCheatsheets } from "./searching";
+import { treesCheatsheets } from "./trees";
+import { graphsCheatsheets } from "./graphs";
+import { linkedListCheatsheets } from "./linkedlist";
+import { stackCheatsheets } from "./stack";
+import { queueCheatsheets } from "./queue";
+import { hashMapCheatsheets } from "./hashmap";
+import { recursionCheatsheets } from "./recursion";
+
+export const allCheatsheets = [
+  ...sortingCheatsheets,
+  ...searchingCheatsheets,
+  ...treesCheatsheets,
+  ...graphsCheatsheets,
+  ...linkedListCheatsheets,
+  ...stackCheatsheets,
+  ...queueCheatsheets,
+  ...hashMapCheatsheets,
+  ...recursionCheatsheets,
+];
+
+export const categories = [
+  { id: "sorting", name: "Sorting", description: "Comparison and non-comparison based sorting algorithms", icon: "sort-asc" },
+  { id: "searching", name: "Searching", description: "Linear and logarithmic search algorithms", icon: "search" },
+  { id: "trees", name: "Trees", description: "Tree data structures and operations", icon: "tree" },
+  { id: "graphs", name: "Graphs", description: "Graph traversal and path-finding algorithms", icon: "share" },
+  { id: "linked-list", name: "Linked Lists", description: "Singly and doubly linked list implementations", icon: "list" },
+  { id: "stack", name: "Stacks", description: "LIFO data structure and its applications", icon: "layers" },
+  { id: "queue", name: "Queues", description: "FIFO data structure and its variants", icon: "list-ordered" },
+  { id: "hashmap", name: "Hash Maps", description: "Key-value storage and hash-based lookups", icon: "table" },
+  { id: "recursion", name: "Recursion", description: "Recursive problem-solving patterns", icon: "repeat" },
+];
+
+export function getCheatsheetById(id) {
+  return allCheatsheets.find((c) => c.id === id);
+}
+
+export function getCheatsheetsByCategory(categoryId) {
+  return allCheatsheets.filter((c) => c.category === categoryId);
+}
diff --git a/src/app/components/cheatsheets/data/linkedlist.js b/src/app/components/cheatsheets/data/linkedlist.js
new file mode 100644
index 000000000..8ed039eab
--- /dev/null
+++ b/src/app/components/cheatsheets/data/linkedlist.js
@@ -0,0 +1,144 @@
+export const linkedListCheatsheets = [
+  {
+    id: "singly-linked-list",
+    title: "Singly Linked List",
+    category: "linked-list",
+    difficulty: "beginner",
+    timeComplexity: { best: "O(1)", average: "O(n)", worst: "O(n)" },
+    spaceComplexity: "O(n)",
+    code: {
+      javascript: `class ListNode {
+  constructor(val) { this.val = val; this.next = null; }
+}
+class SinglyLinkedList {
+  constructor() { this.head = null; this.tail = null; }
+  push(val) {
+    const node = new ListNode(val);
+    if (!this.head) { this.head = this.tail = node; return; }
+    this.tail.next = node; this.tail = node;
+  }
+  pop() {
+    if (!this.head) return null;
+    if (this.head === this.tail) { const val = this.head.val; this.head = this.tail = null; return val; }
+    let curr = this.head;
+    while (curr.next !== this.tail) curr = curr.next;
+    const val = this.tail.val;
+    curr.next = null; this.tail = curr;
+    return val;
+  }
+  get(index) {
+    let curr = this.head;
+    for (let i = 0; curr && i < index; i++) curr = curr.next;
+    return curr ? curr.val : undefined;
+  }
+}`,
+      python: `class ListNode:
+    def __init__(self, val=0, next=None):
+        self.val = val
+        self.next = next
+
+class SinglyLinkedList:
+    def __init__(self):
+        self.head = None
+        self.tail = None
+
+    def push(self, val):
+        node = ListNode(val)
+        if not self.head:
+            self.head = self.tail = node
+            return
+        self.tail.next = node
+        self.tail = node
+
+    def pop(self):
+        if not self.head: return None
+        if self.head == self.tail:
+            val = self.head.val
+            self.head = self.tail = None
+            return val
+        curr = self.head
+        while curr.next != self.tail: curr = curr.next
+        val = self.tail.val
+        curr.next = None; self.tail = curr
+        return val`
+    },
+    steps: [
+      "Each node stores a value and a pointer to the next node",
+      "Head points to the first node; tail points to the last",
+      "Traversal starts at head and follows next pointers",
+      "Insertion/deletion at head is O(1); at tail/index is O(n)"
+    ],
+    whenToUse: "Frequent insertions/deletions at the beginning; no random access needed",
+    pitfalls: "No O(1) random access; extra memory for pointer per element"
+  },
+  {
+    id: "doubly-linked-list",
+    title: "Doubly Linked List",
+    category: "linked-list",
+    difficulty: "beginner",
+    timeComplexity: { best: "O(1)", average: "O(n)", worst: "O(n)" },
+    spaceComplexity: "O(n)",
+    code: {
+      javascript: `class DoublyListNode {
+  constructor(val) {
+    this.val = val;
+    this.next = null;
+    this.prev = null;
+  }
+}
+class DoublyLinkedList {
+  constructor() { this.head = null; this.tail = null; }
+  push(val) {
+    const node = new DoublyListNode(val);
+    if (!this.head) { this.head = this.tail = node; return; }
+    node.prev = this.tail;
+    this.tail.next = node;
+    this.tail = node;
+  }
+  pop() {
+    if (!this.tail) return null;
+    const val = this.tail.val;
+    this.tail = this.tail.prev;
+    if (this.tail) this.tail.next = null;
+    else this.head = null;
+    return val;
+  }
+}`,
+      python: `class DoublyListNode:
+    def __init__(self, val=0):
+        self.val = val
+        self.next = None
+        self.prev = None
+
+class DoublyLinkedList:
+    def __init__(self):
+        self.head = None
+        self.tail = None
+
+    def push(self, val):
+        node = DoublyListNode(val)
+        if not self.head:
+            self.head = self.tail = node
+            return
+        node.prev = self.tail
+        self.tail.next = node
+        self.tail = node
+
+    def pop(self):
+        if not self.tail: return None
+        val = self.tail.val
+        self.tail = self.tail.prev
+        if self.tail: self.tail.next = None
+        else: self.head = None
+        return val`
+    },
+    steps: [
+      "Each node stores value, next, and prev pointers",
+      "Allows O(1) deletion at both ends",
+      "Traversal is possible in both directions",
+      "Used as the underlying structure for Deque"
+    ],
+    whenToUse: "When you need efficient deletion from both ends; LRU cache implementation",
+    pitfalls: "Double the pointer overhead compared to singly linked list"
+  }
+];
diff --git a/src/app/components/cheatsheets/data/queue.js b/src/app/components/cheatsheets/data/queue.js
new file mode 100644
index 000000000..6b65484fc
--- /dev/null
+++ b/src/app/components/cheatsheets/data/queue.js
@@ -0,0 +1,81 @@
+export const queueCheatsheets = [
+  {
+    id: "queue",
+    title: "Queue",
+    category: "queue",
+    difficulty: "beginner",
+    timeComplexity: { best: "O(1)", average: "O(1)", worst: "O(1)" },
+    spaceComplexity: "O(n)",
+    code: {
+      javascript: `class Queue {
+  constructor() { this.items = []; }
+  enqueue(val) { this.items.push(val); }
+  dequeue() { return this.items.shift(); }
+  front() { return this.items[0]; }
+  isEmpty() { return this.items.length === 0; }
+  size() { return this.items.length; }
+}
+// Usage
+const q = new Queue();
+q.enqueue(1); q.enqueue(2);
+console.log(q.dequeue()); // 1`,
+      python: `from collections import deque
+
+class Queue:
+    def __init__(self):
+        self.queue = deque()
+    def enqueue(self, val):
+        self.queue.append(val)
+    def dequeue(self):
+        return self.queue.popleft()
+    def front(self):
+        return self.queue[0]
+    def is_empty(self):
+        return len(self.queue) == 0
+    def size(self):
+        return len(self.queue)`
+    },
+    steps: [
+      "Enqueue: add element to the rear (O(1))",
+      "Dequeue: remove element from the front (O(1))",
+      "Front: view the front element without removing it (O(1))",
+      "Follows FIFO (First In, First Out) principle"
+    ],
+    whenToUse: "BFS traversal; job scheduling; print spooler; buffering; breadth-first algorithms",
+    pitfalls: "Using array.shift() for dequeue is O(n); use a proper linked-list-based queue for performance"
+  },
+  {
+    id: "deque",
+    title: "Deque (Double-Ended Queue)",
+    category: "queue",
+    difficulty: "intermediate",
+    timeComplexity: { best: "O(1)", average: "O(1)", worst: "O(1)" },
+    spaceComplexity: "O(n)",
+    code: {
+      javascript: `class Deque {
+  constructor() { this.items = []; }
+  addFront(val) { this.items.unshift(val); }
+  addRear(val) { this.items.push(val); }
+  removeFront() { return this.items.shift(); }
+  removeRear() { return this.items.pop(); }
+  front() { return this.items[0]; }
+  rear() { return this.items[this.items.length - 1]; }
+  isEmpty() { return this.items.length === 0; }
+}`,
+      python: `from collections import deque
+# Python's deque is a double-ended queue
+d = deque()
+d.append(1)       # add to right
+d.appendleft(2)   # add to left
+d.pop()           # remove from right
+d.popleft()       # remove from left`
+    },
+    steps: [
+      "Supports insertion and deletion at both ends in O(1)",
+      "Combines stack and queue capabilities",
+      "Used in sliding window problems and palindrome checking"
+    ],
+    whenToUse: "Sliding window maximum/minimum; palindrome checking; undo-redo with limits",
+    pitfalls: "Not a pure FIFO structure; choose the right operation for your use case"
+  }
+];
diff --git a/src/app/components/cheatsheets/data/recursion.js b/src/app/components/cheatsheets/data/recursion.js
new file mode 100644
index 000000000..24660ddc2
--- /dev/null
+++ b/src/app/components/cheatsheets/data/recursion.js
@@ -0,0 +1,98 @@
+export const recursionCheatsheets = [
+  {
+    id: "factorial",
+    title: "Factorial",
+    category: "recursion",
+    difficulty: "beginner",
+    timeComplexity: { best: "O(n)", average: "O(n)", worst: "O(n)" },
+    spaceComplexity: "O(n)",
+    code: {
+      javascript: `function factorial(n) {
+  if (n <= 1) return 1;
+  return n * factorial(n - 1);
+}`,
+      python: `def factorial(n):
+    if n <= 1: return 1
+    return n * factorial(n - 1)`
+    },
+    steps: [
+      "Base case: factorial(0) = factorial(1) = 1",
+      "Recursive case: n! = n × (n-1)!",
+      "Each call reduces n by 1 until base case is reached"
+    ],
+    whenToUse: "Problems that can be broken into identical subproblems of decreasing size",
+    pitfalls: "Stack overflow for large n (try iterative for n > 1000)"
+  },
+  {
+    id: "fibonacci",
+    title: "Fibonacci (with memoization)",
+    category: "recursion",
+    difficulty: "beginner",
+    timeComplexity: { best: "O(n)", average: "O(n)", worst: "O(n)" },
+    spaceComplexity: "O(n)",
+    code: {
+      javascript: `function fib(n, memo = {}) {
+  if (n <= 1) return n;
+  if (memo[n] !== undefined) return memo[n];
+  memo[n] = fib(n - 1, memo) + fib(n - 2, memo);
+  return memo[n];
+}`,
+      python: `def fib(n, memo=None):
+    if memo is None: memo = {}
+    if n <= 1: return n
+    if n in memo: return memo[n]
+    memo[n] = fib(n-1, memo) + fib(n-2, memo)
+    return memo[n]`
+    },
+    steps: [
+      "Base case: fib(0) = 0, fib(1) = 1",
+      "Recursive case: fib(n) = fib(n-1) + fib(n-2)",
+      "Memoization stores computed values to avoid exponential blowup"
+    ],
+    whenToUse: "Problems with overlapping subproblems (DP), sequence generation",
+    pitfalls: "Without memoization, O(2ⁿ) time; stack overflow for very large n"
+  },
+  {
+    id: "tree-traversal",
+    title: "Tree Traversals (Recursive)",
+    category: "recursion",
+    difficulty: "intermediate",
+    timeComplexity: { best: "O(n)", average: "O(n)", worst: "O(n)" },
+    spaceComplexity: "O(h)",
+    code: {
+      javascript: `// In-order (left, root, right)
+function inOrder(node) {
+  if (!node) return [];
+  return [...inOrder(node.left), node.val, ...inOrder(node.right)];
+}
+// Pre-order (root, left, right)
+function preOrder(node) {
+  if (!node) return [];
+  return [node.val, ...preOrder(node.left), ...preOrder(node.right)];
+}
+// Post-order (left, right, root)
+function postOrder(node) {
+  if (!node) return [];
+  return [...postOrder(node.left), ...postOrder(node.right), node.val];
+}`,
+      python: `def in_order(node):
+    if not node: return []
+    return in_order(node.left) + [node.val] + in_order(node.right)
+
+def pre_order(node):
+    if not node: return []
+    return [node.val] + pre_order(node.left) + pre_order(node.right)
+
+def post_order(node):
+    if not node: return []
+    return post_order(node.left) + post_order(node.right) + [node.val]`
+    },
+    steps: [
+      "In-order: left subtree → root → right subtree (sorted order in BST)",
+      "Pre-order: root → left → right (copy tree structure)",
+      "Post-order: left → right → root (delete tree)"
+    ],
+    whenToUse: "Tree operations; expression evaluation; serialization",
+    pitfalls: "Recursive depth equals tree height; may overflow for skewed trees"
+  }
+];
diff --git a/src/app/components/cheatsheets/data/searching.js b/src/app/components/cheatsheets/data/searching.js
new file mode 100644
index 000000000..6a1a69377
--- /dev/null
+++ b/src/app/components/cheatsheets/data/searching.js
@@ -0,0 +1,111 @@
+export const searchingCheatsheets = [
+  {
+    id: "linear-search",
+    title: "Linear Search",
+    category: "searching",
+    difficulty: "beginner",
+    timeComplexity: { best: "O(1)", average: "O(n)", worst: "O(n)" },
+    spaceComplexity: "O(1)",
+    code: {
+      javascript: `function linearSearch(arr, target) {
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i] === target) return i;
+  }
+  return -1;
+}`,
+      python: `def linear_search(arr, target):
+    for i, val in enumerate(arr):
+        if val == target: return i
+    return -1`
+    },
+    steps: [
+      "Start at the first element of the array",
+      "Compare each element with the target value",
+      "If found, return the index",
+      "If the end is reached, return -1"
+    ],
+    whenToUse: "Small or unsorted datasets; single search operation",
+    pitfalls: "Inefficient for large datasets; O(n) worst-case time"
+  },
+  {
+    id: "binary-search",
+    title: "Binary Search",
+    category: "searching",
+    difficulty: "beginner",
+    timeComplexity: { best: "O(1)", average: "O(log n)", worst: "O(log n)" },
+    spaceComplexity: "O(1)",
+    code: {
+      javascript: `function binarySearch(arr, target) {
+  let left = 0, right = arr.length - 1;
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2);
+    if (arr[mid] === target) return mid;
+    if (arr[mid] < target) left = mid + 1;
+    else right = mid - 1;
+  }
+  return -1;
+}`,
+      python: `def binary_search(arr, target):
+    left, right = 0, len(arr) - 1
+    while left <= right:
+        mid = (left + right) // 2
+        if arr[mid] == target: return mid
+        elif arr[mid] < target: left = mid + 1
+        else: right = mid - 1
+    return -1`
+    },
+    steps: [
+      "Find the middle element of the sorted array",
+      "If it matches the target, return its index",
+      "If target is greater, search the right half",
+      "If target is smaller, search the left half",
+      "Repeat until found or the range is empty"
+    ],
+    whenToUse: "Sorted arrays; frequent search operations; large datasets",
+    pitfalls: "Requires sorted input; not suitable for linked lists"
+  },
+  {
+    id: "jump-search",
+    title: "Jump Search",
+    category: "searching",
+    difficulty: "intermediate",
+    timeComplexity: { best: "O(1)", average: "O(√n)", worst: "O(√n)" },
+    spaceComplexity: "O(1)",
+    code: {
+      javascript: `function jumpSearch(arr, target) {
+  const n = arr.length;
+  let step = Math.floor(Math.sqrt(n));
+  let prev = 0;
+  while (arr[Math.min(step, n) - 1] < target) {
+    prev = step;
+    step += Math.floor(Math.sqrt(n));
+    if (prev >= n) return -1;
+  }
+  for (let i = prev; i < Math.min(step, n); i++) {
+    if (arr[i] === target) return i;
+  }
+  return -1;
+}`,
+      python: `import math
+def jump_search(arr, target):
+    n = len(arr)
+    step = int(math.sqrt(n))
+    prev = 0
+    while arr[min(step, n) - 1] < target:
+        prev = step
+        step += int(math.sqrt(n))
+        if prev >= n: return -1
+    for i in range(prev, min(step, n)):
+        if arr[i] == target: return i
+    return -1`
+    },
+    steps: [
+      "Determine the block size (√n)",
+      "Jump ahead by block size until the target is less than the block's last element",
+      "Perform linear search within the block",
+      "Return the index if found, or -1"
+    ],
+    whenToUse: "Sorted arrays; better than linear search but simpler than binary search",
+    pitfalls: "Only works on sorted arrays; slightly worse constant than binary search"
+  }
+];
diff --git a/src/app/components/cheatsheets/data/sorting.js b/src/app/components/cheatsheets/data/sorting.js
new file mode 100644
index 000000000..5b7eb6e78
--- /dev/null
+++ b/src/app/components/cheatsheets/data/sorting.js
@@ -0,0 +1,281 @@
+export const sortingCheatsheets = [
+  {
+    id: "bubble-sort",
+    title: "Bubble Sort",
+    category: "sorting",
+    difficulty: "beginner",
+    timeComplexity: { best: "O(n)", average: "O(n²)", worst: "O(n²)" },
+    spaceComplexity: "O(1)",
+    stable: true,
+    inPlace: true,
+    code: {
+      javascript: `function bubbleSort(arr) {
+  for (let i = 0; i < arr.length - 1; i++) {
+    for (let j = 0; j < arr.length - 1 - i; j++) {
+      if (arr[j] > arr[j + 1]) {
+        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
+      }
+    }
+  }
+  return arr;
+}`,
+      python: `def bubble_sort(arr):
+    for i in range(len(arr) - 1):
+        for j in range(len(arr) - 1 - i):
+            if arr[j] > arr[j + 1]:
+                arr[j], arr[j + 1] = arr[j + 1], arr[j]
+    return arr`
+    },
+    steps: [
+      "Compare adjacent elements",
+      "Swap if they are in the wrong order",
+      "Largest element bubbles to the end",
+      "Reduce range and repeat until sorted"
+    ],
+    whenToUse: "Small datasets or nearly sorted data; educational purposes",
+    pitfalls: "Very slow for large datasets; O(n²) worst-case performance"
+  },
+  {
+    id: "selection-sort",
+    title: "Selection Sort",
+    category: "sorting",
+    difficulty: "beginner",
+    timeComplexity: { best: "O(n²)", average: "O(n²)", worst: "O(n²)" },
+    spaceComplexity: "O(1)",
+    stable: false,
+    inPlace: true,
+    code: {
+      javascript: `function selectionSort(arr) {
+  for (let i = 0; i < arr.length - 1; i++) {
+    let minIdx = i;
+    for (let j = i + 1; j < arr.length; j++) {
+      if (arr[j] < arr[minIdx]) minIdx = j;
+    }
+    if (minIdx !== i) [arr[i], arr[minIdx]] = [arr[minIdx], arr[i]];
+  }
+  return arr;
+}`,
+      python: `def selection_sort(arr):
+    for i in range(len(arr) - 1):
+        min_idx = i
+        for j in range(i + 1, len(arr)):
+            if arr[j] < arr[min_idx]:
+                min_idx = j
+        arr[i], arr[min_idx] = arr[min_idx], arr[i]
+    return arr`
+    },
+    steps: [
+      "Find the minimum element in the unsorted portion",
+      "Swap it with the first unsorted element",
+      "Grow the sorted portion from the left",
+      "Repeat until fully sorted"
+    ],
+    whenToUse: "Small datasets; minimal memory writes are important",
+    pitfalls: "Always O(n²) regardless of input; not stable"
+  },
+  {
+    id: "insertion-sort",
+    title: "Insertion Sort",
+    category: "sorting",
+    difficulty: "beginner",
+    timeComplexity: { best: "O(n)", average: "O(n²)", worst: "O(n²)" },
+    spaceComplexity: "O(1)",
+    stable: true,
+    inPlace: true,
+    code: {
+      javascript: `function insertionSort(arr) {
+  for (let i = 1; i < arr.length; i++) {
+    let key = arr[i];
+    let j = i - 1;
+    while (j >= 0 && arr[j] > key) {
+      arr[j + 1] = arr[j];
+      j--;
+    }
+    arr[j + 1] = key;
+  }
+  return arr;
+}`,
+      python: `def insertion_sort(arr):
+    for i in range(1, len(arr)):
+        key = arr[i]
+        j = i - 1
+        while j >= 0 and arr[j] > key:
+            arr[j + 1] = arr[j]
+            j -= 1
+        arr[j + 1] = key
+    return arr`
+    },
+    steps: [
+      "Start with the second element as the key",
+      "Compare key with elements to its left",
+      "Shift larger elements one position right",
+      "Insert key into its correct position"
+    ],
+    whenToUse: "Small or nearly sorted datasets; online sorting (streaming data)",
+    pitfalls: "Slow for reverse-sorted data; O(n²) average case"
+  },
+  {
+    id: "merge-sort",
+    title: "Merge Sort",
+    category: "sorting",
+    difficulty: "intermediate",
+    timeComplexity: { best: "O(n log n)", average: "O(n log n)", worst: "O(n log n)" },
+    spaceComplexity: "O(n)",
+    stable: true,
+    inPlace: false,
+    code: {
+      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) {
+  const result = [];
+  let i = 0, j = 0;
+  while (i < left.length && j < right.length) {
+    result.push(left[i] <= right[j] ? left[i++] : right[j++]);
+  }
+  return result.concat(left.slice(i)).concat(right.slice(j));
+}`,
+      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, i, j = [], 0, 0
+    while i < len(left) and j < len(right):
+        if left[i] <= right[j]:
+            result.append(left[i]); i += 1
+        else:
+            result.append(right[j]); j += 1
+    return result + left[i:] + right[j:]`
+    },
+    steps: [
+      "Divide the array into two halves recursively",
+      "Base case: array of size 0 or 1 is already sorted",
+      "Merge two sorted halves by comparing elements",
+      "Combine results to form the fully sorted array"
+    ],
+    whenToUse: "Large datasets; stable sort required; linked list sorting",
+    pitfalls: "Requires O(n) additional memory; slower for small arrays"
+  },
+  {
+    id: "quick-sort",
+    title: "Quick Sort",
+    category: "sorting",
+    difficulty: "intermediate",
+    timeComplexity: { best: "O(n log n)", average: "O(n log n)", worst: "O(n²)" },
+    spaceComplexity: "O(log n)",
+    stable: false,
+    inPlace: true,
+    code: {
+      javascript: `function quickSort(arr, low = 0, high = arr.length - 1) {
+  if (low < high) {
+    const pi = partition(arr, low, high);
+    quickSort(arr, low, pi - 1);
+    quickSort(arr, pi + 1, high);
+  }
+  return arr;
+}
+function partition(arr, low, high) {
+  const pivot = arr[high];
+  let i = low - 1;
+  for (let j = low; j < high; j++) {
+    if (arr[j] < pivot) {
+      i++;
+      [arr[i], arr[j]] = [arr[j], arr[i]];
+    }
+  }
+  [arr[i + 1], arr[high]] = [arr[high], arr[i + 1]];
+  return i + 1;
+}`,
+      python: `def quick_sort(arr, low=0, high=None):
+    if high is None: high = len(arr) - 1
+    if low < high:
+        pi = partition(arr, low, high)
+        quick_sort(arr, low, pi - 1)
+        quick_sort(arr, pi + 1, high)
+    return arr
+
+def partition(arr, low, high):
+    pivot = arr[high]
+    i = low - 1
+    for j in range(low, high):
+        if arr[j] < pivot:
+            i += 1
+            arr[i], arr[j] = arr[j], arr[i]
+    arr[i + 1], arr[high] = arr[high], arr[i + 1]
+    return i + 1`
+    },
+    steps: [
+      "Choose a pivot element (typically last element)",
+      "Partition: elements smaller than pivot go left, larger go right",
+      "Recursively apply the same process to left and right subarrays",
+      "Base case: subarray of size 0 or 1 is already sorted"
+    ],
+    whenToUse: "Large datasets; average-case performance is excellent",
+    pitfalls: "Worst-case O(n²) on already sorted arrays with poor pivot choice"
+  },
+  {
+    id: "heap-sort",
+    title: "Heap Sort",
+    category: "sorting",
+    difficulty: "intermediate",
+    timeComplexity: { best: "O(n log n)", average: "O(n log n)", worst: "O(n log n)" },
+    spaceComplexity: "O(1)",
+    stable: false,
+    inPlace: true,
+    code: {
+      javascript: `function heapSort(arr) {
+  const n = arr.length;
+  for (let i = Math.floor(n / 2) - 1; i >= 0; i--)
+    heapify(arr, n, i);
+  for (let i = n - 1; i > 0; i--) {
+    [arr[0], arr[i]] = [arr[i], arr[0]];
+    heapify(arr, i, 0);
+  }
+  return arr;
+}
+function heapify(arr, n, i) {
+  let largest = i;
+  const left = 2 * i + 1, right = 2 * i + 2;
+  if (left < n && arr[left] > arr[largest]) largest = left;
+  if (right < n && arr[right] > arr[largest]) largest = right;
+  if (largest !== i) {
+    [arr[i], arr[largest]] = [arr[largest], arr[i]];
+    heapify(arr, n, largest);
+  }
+}`,
+      python: `def heap_sort(arr):
+    n = len(arr)
+    for i in range(n // 2 - 1, -1, -1):
+        heapify(arr, n, i)
+    for i in range(n - 1, 0, -1):
+        arr[i], arr[0] = arr[0], arr[i]
+        heapify(arr, i, 0)
+    return arr
+
+def heapify(arr, n, i):
+    largest = i
+    left, right = 2 * i + 1, 2 * i + 2
+    if left < n and arr[left] > arr[largest]: largest = left
+    if right < n and arr[right] > arr[largest]: largest = right
+    if largest != i:
+        arr[i], arr[largest] = arr[largest], arr[i]
+        heapify(arr, n, largest)`
+    },
+    steps: [
+      "Build a max heap from the input array",
+      "Swap the root (largest) with the last element",
+      "Reduce heap size by 1 and heapify the root",
+      "Repeat until the heap is empty"
+    ],
+    whenToUse: "Large datasets with guaranteed O(n log n); limited memory available",
+    pitfalls: "Not stable; slower in practice than Quick Sort due to cache behavior"
+  }
+];
diff --git a/src/app/components/cheatsheets/data/stack.js b/src/app/components/cheatsheets/data/stack.js
new file mode 100644
index 000000000..ae28f8d0e
--- /dev/null
+++ b/src/app/components/cheatsheets/data/stack.js
@@ -0,0 +1,51 @@
+export const stackCheatsheets = [
+  {
+    id: "stack",
+    title: "Stack",
+    category: "stack",
+    difficulty: "beginner",
+    timeComplexity: { best: "O(1)", average: "O(1)", worst: "O(1)" },
+    spaceComplexity: "O(n)",
+    code: {
+      javascript: `class Stack {
+  constructor() { this.items = []; }
+  push(val) { this.items.push(val); }
+  pop() { return this.items.pop(); }
+  peek() { return this.items[this.items.length - 1]; }
+  isEmpty() { return this.items.length === 0; }
+  size() { return this.items.length; }
+}
+// Usage
+const stack = new Stack();
+stack.push(1); stack.push(2);
+console.log(stack.pop()); // 2
+console.log(stack.peek()); // 1`,
+      python: `class Stack:
+    def __init__(self):
+        self.items = []
+    def push(self, val):
+        self.items.append(val)
+    def pop(self):
+        return self.items.pop()
+    def peek(self):
+        return self.items[-1]
+    def is_empty(self):
+        return len(self.items) == 0
+    def size(self):
+        return len(self.items)
+
+# Usage
+stack = Stack()
+stack.push(1); stack.push(2)
+print(stack.pop())  # 2`
+    },
+    steps: [
+      "Push: add element to the top (O(1))",
+      "Pop: remove element from the top (O(1))",
+      "Peek: view the top element without removing it (O(1))",
+      "Follows LIFO (Last In, First Out) principle"
+    ],
+    whenToUse: "Function call stack (recursion); expression evaluation; undo/redo; backtracking",
+    pitfalls: "Limited access — only the top element is accessible at any time"
+  }
+];
diff --git a/src/app/components/cheatsheets/data/trees.js b/src/app/components/cheatsheets/data/trees.js
new file mode 100644
index 000000000..c3c01c4f4
--- /dev/null
+++ b/src/app/components/cheatsheets/data/trees.js
@@ -0,0 +1,205 @@
+export const treesCheatsheets = [
+  {
+    id: "binary-search-tree",
+    title: "Binary Search Tree",
+    category: "trees",
+    difficulty: "beginner",
+    timeComplexity: { best: "O(log n)", average: "O(log n)", worst: "O(n)" },
+    spaceComplexity: "O(n)",
+    code: {
+      javascript: `class Node {
+  constructor(value) {
+    this.value = value;
+    this.left = null;
+    this.right = null;
+  }
+}
+class BST {
+  constructor() { this.root = null; }
+  insert(value) {
+    const newNode = new Node(value);
+    if (!this.root) { this.root = newNode; return; }
+    let curr = this.root;
+    while (true) {
+      if (value < curr.value) {
+        if (!curr.left) { curr.left = newNode; return; }
+        curr = curr.left;
+      } else {
+        if (!curr.right) { curr.right = newNode; return; }
+        curr = curr.right;
+      }
+    }
+  }
+  search(value) {
+    let curr = this.root;
+    while (curr) {
+      if (value === curr.value) return curr;
+      curr = value < curr.value ? curr.left : curr.right;
+    }
+    return null;
+  }
+}`,
+      python: `class Node:
+    def __init__(self, value):
+        self.value = value
+        self.left = None
+        self.right = None
+
+class BST:
+    def __init__(self):
+        self.root = None
+
+    def insert(self, value):
+        if not self.root:
+            self.root = Node(value)
+            return
+        curr = self.root
+        while True:
+            if value < curr.value:
+                if not curr.left:
+                    curr.left = Node(value); return
+                curr = curr.left
+            else:
+                if not curr.right:
+                    curr.right = Node(value); return
+                curr = curr.right
+
+    def search(self, value):
+        curr = self.root
+        while curr:
+            if value == curr.value: return curr
+            curr = curr.left if value < curr.value else curr.right
+        return None`
+    },
+    steps: [
+      "Left subtree contains values smaller than the root",
+      "Right subtree contains values larger than the root",
+      "Left and right subtrees are also BSTs",
+      "In-order traversal yields sorted order"
+    ],
+    whenToUse: "Dynamic sorted data; fast search, insert, and delete operations",
+    pitfalls: "Degrades to O(n) if input is sorted; use AVL or Red-Black for guaranteed log n"
+  },
+  {
+    id: "avl-tree",
+    title: "AVL Tree",
+    category: "trees",
+    difficulty: "advanced",
+    timeComplexity: { best: "O(log n)", average: "O(log n)", worst: "O(log n)" },
+    spaceComplexity: "O(n)",
+    code: {
+      javascript: `class AVLNode {
+  constructor(value) {
+    this.value = value;
+    this.left = null;
+    this.right = null;
+    this.height = 1;
+  }
+}
+function getHeight(node) { return node ? node.height : 0; }
+function getBalance(node) { return node ? getHeight(node.left) - getHeight(node.right) : 0; }
+function rotateRight(y) {
+  const x = y.left; const T2 = x.right;
+  x.right = y; y.left = T2;
+  y.height = Math.max(getHeight(y.left), getHeight(y.right)) + 1;
+  x.height = Math.max(getHeight(x.left), getHeight(x.right)) + 1;
+  return x;
+}
+function rotateLeft(x) {
+  const y = x.right; const T2 = y.left;
+  y.left = x; x.right = T2;
+  x.height = Math.max(getHeight(x.left), getHeight(x.right)) + 1;
+  y.height = Math.max(getHeight(y.left), getHeight(y.right)) + 1;
+  return y;
+}`,
+      python: `class AVLNode:
+    def __init__(self, value):
+        self.value = value
+        self.left = None
+        self.right = None
+        self.height = 1
+
+def get_height(node): return node.height if node else 0
+
+def get_balance(node): return get_height(node.left) - get_height(node.right) if node else 0
+
+def rotate_right(y):
+    x = y.left; T2 = x.right
+    x.right = y; y.left = T2
+    y.height = max(get_height(y.left), get_height(y.right)) + 1
+    x.height = max(get_height(x.left), get_height(x.right)) + 1
+    return x
+
+def rotate_left(x):
+    y = x.right; T2 = y.left
+    y.left = x; x.right = T2
+    x.height = max(get_height(x.left), get_height(x.right)) + 1
+    y.height = max(get_height(y.left), get_height(y.right)) + 1
+    return y`
+    },
+    steps: [
+      "Insert or delete as in a standard BST",
+      "Update heights of all affected nodes",
+      "Compute balance factor (left height - right height)",
+      "If |balance| > 1, perform appropriate rotation (LL, RR, LR, RL)"
+    ],
+    whenToUse: "When guaranteed O(log n) operations are critical; lookup-heavy workloads",
+    pitfalls: "Extra memory for height storage; more rotations than Red-Black Trees"
+  },
+  {
+    id: "heap",
+    title: "Heap (Priority Queue)",
+    category: "trees",
+    difficulty: "intermediate",
+    timeComplexity: { best: "O(log n)", average: "O(log n)", worst: "O(log n)" },
+    spaceComplexity: "O(n)",
+    code: {
+      javascript: `class MinHeap {
+  constructor() { this.heap = []; }
+  getParent(i) { return Math.floor((i - 1) / 2); }
+  getLeft(i) { return 2 * i + 1; }
+  getRight(i) { return 2 * i + 2; }
+  push(val) {
+    this.heap.push(val);
+    let i = this.heap.length - 1;
+    while (i > 0 && this.heap[this.getParent(i)] > this.heap[i]) {
+      [this.heap[i], this.heap[this.getParent(i)]] = [this.heap[this.getParent(i)], this.heap[i]];
+      i = this.getParent(i);
+    }
+  }
+  pop() {
+    if (this.heap.length === 1) return this.heap.pop();
+    const min = this.heap[0];
+    this.heap[0] = this.heap.pop();
+    this.siftDown(0);
+    return min;
+  }
+  siftDown(i) {
+    const left = this.getLeft(i), right = this.getRight(i);
+    let smallest = i;
+    if (left < this.heap.length && this.heap[left] < this.heap[smallest]) smallest = left;
+    if (right < this.heap.length && this.heap[right] < this.heap[smallest]) smallest = right;
+    if (smallest !== i) {
+      [this.heap[i], this.heap[smallest]] = [this.heap[smallest], this.heap[i]];
+      this.siftDown(smallest);
+    }
+  }
+}`,
+      python: `import heapq
+# Python's heapq is a min-heap
+heap = []
+heapq.heappush(heap, 5)
+heapq.heappush(heap, 3)
+smallest = heapq.heappop(heap)  # 3
+# For max-heap, push negative values`
+    },
+    steps: [
+      "Insert: add element at the end, bubble up to maintain heap property",
+      "Extract min/max: replace root with last element, sift down",
+      "Heapify: build heap from array in O(n) time",
+      "Used internally by Heap Sort and priority queues"
+    ],
+    whenToUse: "Priority queues; Dijkstra's algorithm; scheduling; K smallest/largest elements",
+    pitfalls: "Not suitable for searching arbitrary values (no order beyond parent-child)"
+  }
+];
diff --git a/src/app/components/cheatsheets/index.jsx b/src/app/components/cheatsheets/index.jsx
new file mode 100644
index 000000000..7eb5d6351
--- /dev/null
+++ b/src/app/components/cheatsheets/index.jsx
@@ -0,0 +1,116 @@
+"use client";
+import { useState, useMemo } from "react";
+import { Search, Zap, Filter } from "lucide-react";
+import CheatsheetCard from "./CheatsheetCard";
+import { allCheatsheets, categories } from "./data";
+
+const difficulties = ["beginner", "intermediate", "advanced"];
+
+export default function CheatsheetsIndex() {
+  const [search, setSearch] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState(null);
+  const [selectedDifficulty, setSelectedDifficulty] = useState(null);
+
+  const filtered = useMemo(() => {
+    return allCheatsheets.filter((c) => {
+      if (selectedCategory && c.category !== selectedCategory) return false;
+      if (selectedDifficulty && c.difficulty !== selectedDifficulty) return false;
+      if (search) {
+        const q = search.toLowerCase();
+        return (
+          c.title.toLowerCase().includes(q) ||
+          c.category.toLowerCase().includes(q) ||
+          (c.whenToUse && c.whenToUse.toLowerCase().includes(q))
+        );
+      }
+      return true;
+    });
+  }, [search, selectedCategory, selectedDifficulty]);
+
+  const activeCategory = categories.find((c) => c.id === selectedCategory);
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="text-center mb-12">
+        <span className="inline-flex items-center gap-2 text-[#a435f0] text-sm font-bold tracking-wider uppercase mb-4">
+          <Zap className="w-4 h-4 animate-pulse" />
+          Quick Reference
+        </span>
+        <h1 className="text-4xl md:text-5xl font-black font-serif text-slate-900 dark:text-white mb-6">
+          DSA{" "}
+          <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#a435f0] to-[#c084fc]">
+            Cheatsheets
+          </span>
+        </h1>
+        <p className="text-xl text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
+          Comprehensive cheatsheets for all DSA topics — complexity, code snippets, and key insights
+        </p>
+      </div>
+
+      {/* Search & Filters */}
+      <div className="flex flex-col md:flex-row gap-4 mb-8">
+        <div className="relative flex-1">
+          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+          <input
+            type="text"
+            placeholder="Search cheatsheets..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-white dark:bg-slate-900/80 border border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white text-sm placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:border-[#a435f0] transition-colors"
+          />
+        </div>
+        <div className="flex gap-2 flex-wrap">
+          <select
+            value={selectedCategory || ""}
+            onChange={(e) => setSelectedCategory(e.target.value || null)}
+            className="px-3 py-2.5 rounded-xl bg-white dark:bg-slate-900/80 border border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white text-sm focus:outline-none focus:border-[#a435f0] transition-colors"
+          >
+            <option value="">All Categories</option>
+            {categories.map((cat) => (
+              <option key={cat.id} value={cat.id}>{cat.name}</option>
+            ))}
+          </select>
+          <select
+            value={selectedDifficulty || ""}
+            onChange={(e) => setSelectedDifficulty(e.target.value || null)}
+            className="px-3 py-2.5 rounded-xl bg-white dark:bg-slate-900/80 border border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white text-sm focus:outline-none focus:border-[#a435f0] transition-colors"
+          >
+            <option value="">All Levels</option>
+            {difficulties.map((d) => (
+              <option key={d} value={d}>{d.charAt(0).toUpperCase() + d.slice(1)}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {/* Category description */}
+      {activeCategory && (
+        <div className="mb-6 p-4 rounded-xl bg-slate-50 dark:bg-slate-900/60 border border-slate-700/50">
+          <h2 className="text-lg font-bold text-slate-900 dark:text-white">{activeCategory.name}</h2>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mt-1">{activeCategory.description}</p>
+        </div>
+      )}
+
+      {/* Grid */}
+      {filtered.length > 0 ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {filtered.map((c) => (
+            <CheatsheetCard key={c.id} cheatsheet={c} />
+          ))}
+        </div>
+      ) : (
+        <div className="text-center py-16">
+          <Filter size={40} className="mx-auto text-slate-600 mb-4" />
+          <p className="text-slate-600 dark:text-slate-400">No cheatsheets match your filters.</p>
+          <button
+            onClick={() => { setSearch(""); setSelectedCategory(null); setSelectedDifficulty(null); }}
+            className="mt-4 text-sm text-[#a435f0] hover:text-[#c084fc] transition-colors"
+          >
+            Clear filters
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/components/cheatsheets/utils/pdfExport.js b/src/app/components/cheatsheets/utils/pdfExport.js
new file mode 100644
index 000000000..bbac5d150
--- /dev/null
+++ b/src/app/components/cheatsheets/utils/pdfExport.js
@@ -0,0 +1,8 @@
+/**
+ * PDF export utility for cheatsheets.
+ * Uses the native window.print() API which preserves dark mode styles.
+ * For a more advanced solution, integrate html2canvas + jspdf.
+ */
+export function downloadCheatsheet() {
+  window.print();
+}
diff --git a/src/app/components/commandPaletteIndex.js b/src/app/components/commandPaletteIndex.js
new file mode 100644
index 000000000..62a51790f
--- /dev/null
+++ b/src/app/components/commandPaletteIndex.js
@@ -0,0 +1,119 @@
+/**
+ * commandPaletteIndex.js
+ *
+ * Static search index for the global Command Palette (Ctrl+K / Cmd+K).
+ * Derived from the actual visualizer routes defined in
+ * src/app/visualizer/page.jsx and the top-level site pages.
+ *
+ * MAINTAINERS: when you add a new visualizer or page, add it here too.
+ */
+
+// ─── Visualizers ────────────────────────────────────────────────────────────
+
+const VISUALIZERS = [
+  // Code Lab
+  { name: "Dry Run Visualizer",                  path: "/visualizer/dry-run",                                  category: "Code Lab"   },
+  { name: "Complexity Analyzer",                 path: "/visualizer/complexity-analyzer",                      category: "Code Lab"   },
+
+  // Array – Searching
+  { name: "Linear Search",                       path: "/visualizer/array/linearsearch",                       category: "Array"      },
+  { name: "Binary Search",                       path: "/visualizer/array/binarysearch",                       category: "Array"      },
+
+  // Array – Sorting
+  { name: "Bubble Sort",                         path: "/visualizer/array/bubblesort",                         category: "Array"      },
+  { name: "Selection Sort",                      path: "/visualizer/array/selectionsort",                      category: "Array"      },
+  { name: "Insertion Sort",                      path: "/visualizer/array/insertionsort",                      category: "Array"      },
+  { name: "Merge Sort",                          path: "/visualizer/array/mergesort",                          category: "Array"      },
+  { name: "Quick Sort",                          path: "/visualizer/array/quicksort",                          category: "Array"      },
+  { name: "Tim Sort",                            path: "/visualizer/array/timsort",                            category: "Array"      },
+  { name: "Counting Sort",                       path: "/visualizer/array/countingsort",                       category: "Array"      },
+  { name: "Heap Sort",                           path: "/visualizer/array/heapsort",                           category: "Array"      },
+  { name: "Sliding Window",                      path: "/visualizer/array/slidingwindow",                      category: "Array"      },
+
+  // Recursion
+  { name: "Basic Recursion",                     path: "/visualizer/recursion/basic-recursion",                category: "Recursion"  },
+  { name: "Functional & Parameterized Recursion",path: "/visualizer/recursion/functional-parameterized",       category: "Recursion"  },
+  { name: "Multiple Recursive Calls",            path: "/visualizer/recursion/multiple-calls",                 category: "Recursion"  },
+  { name: "Recursion on Subsequences",           path: "/visualizer/recursion/subsequences",                   category: "Recursion"  },
+  { name: "Backtracking",                        path: "/visualizer/recursion/backtracking",                   category: "Recursion"  },
+  { name: "Recursion Trees",                     path: "/visualizer/recursion/trees",                          category: "Recursion"  },
+  { name: "Call Stack Visualization",            path: "/visualizer/recursion/stack",                          category: "Recursion"  },
+  { name: "Recursive Binary Search",             path: "/visualizer/recursion/binary-search",                  category: "Recursion"  },
+
+  // Stack
+  { name: "Stack using Array",                   path: "/visualizer/stack/array",                              category: "Stack"      },
+  { name: "Stack using Linked List",             path: "/visualizer/stack/linkedlist",                         category: "Stack"      },
+  { name: "Prefix (Polish) Notation",            path: "/visualizer/stack/prefix",                             category: "Stack"      },
+  { name: "Postfix (Reverse Polish) Notation",   path: "/visualizer/stack/postfix",                            category: "Stack"      },
+
+  // Queue
+  { name: "Queue using Array",                   path: "/visualizer/queue/array",                              category: "Queue"      },
+  { name: "Queue using Linked List",             path: "/visualizer/queue/linkedlist",                         category: "Queue"      },
+  { name: "Circular Queue",                      path: "/visualizer/queue/circular",                           category: "Queue"      },
+  { name: "Priority Queue",                      path: "/visualizer/queue/priority",                           category: "Queue"      },
+  { name: "Deque",                               path: "/visualizer/queue/deque",                              category: "Queue"      },
+
+  // Linked List
+  { name: "Linked List Visualizer",              path: "/visualizer/linked-list",                              category: "Linked List"},
+  { name: "Singly Linked List",                  path: "/visualizer/linkedlist/types/singly",                  category: "Linked List"},
+  { name: "Doubly Linked List",                  path: "/visualizer/linkedlist/types/doubly",                  category: "Linked List"},
+  { name: "Circular Linked List",                path: "/visualizer/linkedlist/types/circular",                category: "Linked List"},
+
+  // Tree
+  { name: "BST (Binary Search Tree)",            path: "/visualizer/tree/bst",                                 category: "Tree"       },
+  { name: "AVL Tree",                            path: "/visualizer/tree/avl",                                 category: "Tree"       },
+  { name: "Heap Tree",                           path: "/visualizer/tree/heap",                                category: "Tree"       },
+  { name: "In-order Traversal",                  path: "/visualizer/tree/traversing",                          category: "Tree"       },
+
+  // Graph
+  { name: "Breadth-First Search (BFS)",          path: "/visualizer/graph/bfs",                                category: "Graph"      },
+  { name: "Depth-First Search (DFS)",            path: "/visualizer/graph/dfs",                                category: "Graph"      },
+  { name: "Dijkstra's Algorithm",                path: "/visualizer/graph/dijkstra",                           category: "Graph"      },
+  { name: "Prim's Algorithm",                    path: "/visualizer/graph/prim",                               category: "Graph"      },
+  { name: "Kruskal's Algorithm",                 path: "/visualizer/graph/kruskal",                            category: "Graph"      },
+  { name: "Topological Sort",                    path: "/visualizer/graph/topological",                        category: "Graph"      },
+  { name: "Floyd-Warshall",                      path: "/visualizer/graph/floyd-warshall",                     category: "Graph"      },
+
+  // Hash Map
+  { name: "Hash Map",                            path: "/visualizer/hashmap",                                  category: "Hash Map"   },
+
+  // Bit Manipulation
+  { name: "Bit Manipulation Quiz",               path: "/visualizer/bit-manipulation/quiz",                    category: "Bit Manipulation" },
+];
+
+// ─── Site Pages ─────────────────────────────────────────────────────────────
+
+const PAGES = [
+  { name: "Home",          path: "/",              category: "Page" },
+  { name: "Visualizer",   path: "/visualizer",    category: "Page" },
+  { name: "Practice",     path: "/practice",      category: "Page" },
+  { name: "Arena",        path: "/arena",          category: "Page" },
+  { name: "Community",    path: "/community",      category: "Page" },
+  { name: "Blog",         path: "/blog",           category: "Blog" },
+  { name: "Roadmaps",     path: "/roadmaps",       category: "Page" },
+  { name: "Cheatsheets",  path: "/cheatsheets",    category: "Page" },
+  { name: "Tutorials",    path: "/tutorials",      category: "Page" },
+  { name: "FAQ",          path: "/faq",            category: "Page" },
+  { name: "About",        path: "/about",          category: "Page" },
+  { name: "Contact Us",   path: "/contactus",      category: "Page" },
+];
+
+// ─── Combined index ──────────────────────────────────────────────────────────
+
+/** Full flat list used by CommandPalette for filtering */
+export const SEARCH_INDEX = [...VISUALIZERS, ...PAGES];
+
+/** Unique categories in priority order — used for grouped display */
+export const CATEGORIES = [
+  "Code Lab",
+  "Array",
+  "Recursion",
+  "Stack",
+  "Queue",
+  "Linked List",
+  "Tree",
+  "Graph",
+  "Hash Map",
+  "Blog",
+  "Page",
+];
diff --git a/src/app/components/community/AnimatedCounter.jsx b/src/app/components/community/AnimatedCounter.jsx
new file mode 100644
index 000000000..80a83420c
--- /dev/null
+++ b/src/app/components/community/AnimatedCounter.jsx
@@ -0,0 +1,40 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+
+export default function AnimatedCounter({ value, label, className = "" }) {
+  const [count, setCount] = useState(0);
+  const ref = useRef(null);
+  const hasAnimated = useRef(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !hasAnimated.current) {
+          hasAnimated.current = true;
+          let start = 0;
+          const duration = 800;
+          const step = Math.ceil(value / (duration / 16));
+          const timer = setInterval(() => {
+            start += step;
+            if (start >= value) {
+              setCount(value);
+              clearInterval(timer);
+            } else {
+              setCount(start);
+            }
+          }, 16);
+        }
+      },
+      { threshold: 0.3 }
+    );
+    if (ref.current) observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [value]);
+
+  return (
+    <div ref={ref} className={`text-center ${className}`}>
+      <p className="text-xl font-bold text-surface-900 dark:text-white">{count}</p>
+      <p className="text-xs text-surface-500 dark:text-surface-400 uppercase tracking-wider">{label}</p>
+    </div>
+  );
+}
diff --git a/src/app/components/community/CommunityBlogFeed.jsx b/src/app/components/community/CommunityBlogFeed.jsx
new file mode 100644
index 000000000..dfda92f3e
--- /dev/null
+++ b/src/app/components/community/CommunityBlogFeed.jsx
@@ -0,0 +1,238 @@
+"use client";
+import React, { useState } from "react";
+import Image from "next/image";
+import { motion, AnimatePresence } from "framer-motion";
+import { PenLine, ArrowRight, Clock, CalendarDays } from "lucide-react";
+import React, { useState, useEffect } from "react";
+
+const CATEGORIES = ["All", "Tutorial", "Experience", "Release", "Guide"];
+
+const MOCK_POSTS = [
+  { id: 1, title: "Getting Started with Sorting Algorithms", excerpt: "A beginner-friendly guide to understanding bubble sort, merge sort, and quick sort with visual examples.", category: "Tutorial", author: { name: "Sarah Chen", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=sarah" }, date: "2026-05-28", readTime: "5 min", color: "#a435f0" },
+  { id: 2, title: "My Journey Contributing to Open Source", excerpt: "How contributing to AlgoBuddy transformed my understanding of data structures and helped me grow as a developer.", category: "Experience", author: { name: "Alex Rivera", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=alex" }, date: "2026-05-25", readTime: "7 min", color: "#059669" },
+  { id: 3, title: "AlgoBuddy v2.0: What's New", excerpt: "We're excited to announce the latest release with new visualizers, improved performance, and community features.", category: "Release", author: { name: "AlgoBuddy Team", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=team" }, date: "2026-05-20", readTime: "4 min", color: "#2563eb" },
+  { id: 4, title: "Mastering Dynamic Programming", excerpt: "A step-by-step guide to recognizing DP patterns and solving problems from easy to hard.", category: "Guide", author: { name: "Priya Patel", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=priya" }, date: "2026-05-18", readTime: "10 min", color: "#d97706" },
+  { id: 5, title: "How I Used AlgoBuddy to Ace My Technical Interview", excerpt: "My personal experience using interactive visualizations to prepare for FAANG-style coding interviews.", category: "Experience", author: { name: "James Kim", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=james" }, date: "2026-05-15", readTime: "6 min", color: "#059669" },
+  { id: 6, title: "Understanding Graph Traversal Algorithms", excerpt: "A visual deep-dive into BFS and DFS with real-world applications and complexity analysis.", category: "Tutorial", author: { name: "Maria Garcia", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=maria" }, date: "2026-05-12", readTime: "8 min", color: "#a435f0" },
+];
+
+const handleReadPost = (post) => {
+  const updated = [
+    post,
+    ...readingHistory.filter((p) => p.id !== post.id),
+  ].slice(0, 5);
+
+  setReadingHistory(updated);
+
+  localStorage.setItem(
+    "blog-reading-history",
+    JSON.stringify(updated)
+  );
+};
+
+useEffect(() => {
+  const saved = JSON.parse(
+    localStorage.getItem("blog-reading-history") || "[]"
+  );
+
+  setReadingHistory(saved);
+}, []);
+
+function BlogSkeleton() {
+  return (
+    <div className="card-surface flex flex-col overflow-hidden">
+      <div className="flex-1 p-5 space-y-3">
+        <div className="skeleton-shimmer h-5 w-20 rounded-full" />
+        <div className="skeleton-shimmer h-5 w-full" />
+        <div className="skeleton-shimmer h-4 w-3/4" />
+        <div className="skeleton-shimmer h-4 w-full" />
+        <div className="skeleton-shimmer h-4 w-2/3" />
+      </div>
+      <div className="flex items-center gap-3 border-t border-[var(--color-border)] px-5 py-3">
+        <div className="skeleton-shimmer h-7 w-7 rounded-full" />
+        <div className="flex-1 space-y-1">
+          <div className="skeleton-shimmer h-3 w-24" />
+          <div className="skeleton-shimmer h-2 w-32" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function BlogCard({ post }) {
+  return (
+    <motion.article
+      layout
+      initial={{ opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -12 }}
+      transition={{ duration: 0.3, ease: "easeOut" }}
+      className="card-surface flex flex-col overflow-hidden transition-shadow duration-[var(--motion-fast)] hover:shadow-[var(--shadow-card-hover)]"
+    >
+      <div className="flex-1 p-5">
+        <span
+          className="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold"
+          style={{ backgroundColor: `${post.color}18`, color: post.color }}
+        >
+          {post.category}
+        </span>
+        <h3 className="mt-3 text-base font-bold text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)] line-clamp-2">
+          {post.title}
+        </h3>
+        <p className="mt-2 text-sm text-[var(--color-muted)] line-clamp-3">
+          {post.excerpt}
+        </p>
+      </div>
+      <div className="flex items-center gap-3 border-t border-[var(--color-border)] px-5 py-3">
+        <Image
+          src={post.author.avatar}
+          alt={`${post.author.name}'s avatar`}
+          width={28}
+          height={28}
+          unoptimized
+          className="h-7 w-7 rounded-full object-cover"
+        />
+        <div className="flex-1 min-w-0">
+          <p className="truncate text-xs font-semibold text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)]">
+            {post.author.name}
+          </p>
+          <div className="flex items-center gap-2 text-[11px] text-[var(--color-muted)]">
+            <span className="inline-flex items-center gap-0.5"><CalendarDays size={11} /> {post.date}</span>
+            <span className="inline-flex items-center gap-0.5"><Clock size={11} /> {post.readTime}</span>
+          </div>
+        </div>
+      </div>
+    </motion.article>
+  );
+}
+
+<div className="mb-8">
+  <h3 className="text-lg font-bold mb-3">
+    Recommended For You
+  </h3>
+
+  <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+    {recommendedPosts.slice(0, 3).map((post) => (
+      <BlogCard key={post.id} post={post} />
+    ))}
+  </div>
+</div>
+
+export default function CommunityBlogFeed({ loading = false }) {
+  const [activeCategory, setActiveCategory] = useState("All");
+  const [readingHistory, setReadingHistory] = useState([]);
+
+  const filtered = activeCategory === "All"
+    ? MOCK_POSTS
+    : MOCK_POSTS.filter((p) => p.category === activeCategory);
+
+  const categoryId = "blog-category-tablist";
+  const recommendedPosts =
+  readingHistory.length > 0
+    ? MOCK_POSTS.filter(
+        (post) =>
+          post.category === readingHistory[0].category
+      )
+    : MOCK_POSTS.slice(0, 3);
+
+  return (
+    <section className="section-app">
+      <div className="container-app">
+        <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h2 className="text-2xl font-bold text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)]">
+              From Our Community
+            </h2>
+            <p className="mt-1 text-sm text-[var(--color-muted)]">
+              
+              Tutorials, guides, and stories from the AlgoBuddy community
+            </p>
+          </div>
+          
+          <a
+            href="https://discord.gg/PqnazRxPc"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Write a blog post on Discord"
+            className="btn-base bg-[var(--udemy-purple)] text-white hover:bg-[var(--udemy-purple-dark)]"
+          >
+            <PenLine size={16} />
+            Write a Blog
+          </a>
+        </div>
+
+        <div role="tablist" aria-label="Blog categories" className="mb-6 flex flex-wrap gap-2">
+          {CATEGORIES.map((cat) => (
+            <button
+              key={cat}
+              role="tab"
+              aria-selected={activeCategory === cat}
+              aria-controls={categoryId}
+              onClick={() => setActiveCategory(cat)}
+              className={`relative rounded-full px-4 py-1.5 text-sm font-medium transition-colors duration-[var(--motion-fast)] focus-visible:ring-2 focus-visible:ring-primary focus:outline-none ${
+                activeCategory === cat
+                  ? "text-[var(--udemy-purple)]"
+                  : "text-[var(--color-muted)] hover:text-[var(--udemy-text)] dark:hover:text-[var(--udemy-dark-text)]"
+              }`}
+            >
+              {cat}
+              {activeCategory === cat && (
+                <motion.div
+                  layoutId="activeTab"
+                  className="absolute bottom-0 left-1/2 h-0.5 w-3/4 -translate-x-1/2 rounded-full bg-[var(--udemy-purple)]"
+                  transition={{ type: "spring", stiffness: 300, damping: 30 }}
+                />
+              )}
+            </button>
+          ))}
+        </div>
+
+        {loading ? (
+          <div id={categoryId} className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <BlogSkeleton key={i} />
+            ))}
+          </div>
+        ) : (
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={activeCategory}
+              id={categoryId}
+              initial={{ opacity: 0, x: -16 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 16 }}
+              transition={{ duration: 0.2 }}
+              className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3"
+            >
+              {filtered.map((post) => (
+                <div
+  key={post.id}
+  onClick={() => handleReadPost(post)}
+>
+  <BlogCard post={post} />
+</div>
+              ))}
+            </motion.div>
+          </AnimatePresence>
+        )}
+
+        {!loading && filtered.length === 0 && (
+          <p className="py-12 text-center text-sm text-[var(--color-muted)]">
+            No posts found in this category.
+          </p>
+        )}
+
+        <div className="mt-8 text-center">
+          <a
+            href="/blogs"
+            aria-label="View all blog posts"
+            className="btn-base border border-[var(--color-border)] text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)] hover:bg-[var(--color-neutral-100)] dark:hover:bg-[var(--color-neutral-800)] focus-visible:ring-2 focus-visible:ring-primary focus:outline-none"
+          >
+            View All Blogs
+            <ArrowRight size={16} />
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/components/community/ContributorsSection.jsx b/src/app/components/community/ContributorsSection.jsx
new file mode 100644
index 000000000..8d5e9a0e2
--- /dev/null
+++ b/src/app/components/community/ContributorsSection.jsx
@@ -0,0 +1,96 @@
+"use client";
+import React from "react";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { FiUsers, FiUserCheck } from "react-icons/fi";
+
+const contributorsList = [
+  { name: "Harsh Patel", avatar: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=128&h=128&q=80" },
+  { name: "Neha Yadav", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=128&h=128&q=80" },
+  { name: "Sarthak Jain", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=128&h=128&q=80" },
+  { name: "Muskan Rathi", avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=128&h=128&q=80" },
+  { name: "Ayush Kumar", avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=128&h=128&q=80" },
+  { name: "Kunal Verma", avatar: "https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?auto=format&fit=crop&w=128&h=128&q=80" },
+  { name: "Ishika Tiwari", avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=128&h=128&q=80" },
+  { name: "Ritik Sharma", avatar: "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?auto=format&fit=crop&w=128&h=128&q=80" },
+  { name: "Simran Kaur", avatar: "https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=128&h=128&q=80" },
+  { name: "Devansh Shah", avatar: "https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?auto=format&fit=crop&w=128&h=128&q=80" },
+  { name: "Aman Gupta", avatar: "https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?auto=format&fit=crop&w=128&h=128&q=80" },
+  { name: "Tanmay Joshi", avatar: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?auto=format&fit=crop&w=128&h=128&q=80" },
+  { name: "Riya Singh", avatar: "https://images.unsplash.com/photo-1548142813-c348350df52b?auto=format&fit=crop&w=128&h=128&q=80" },
+  { name: "Mohit Rawat", avatar: "https://images.unsplash.com/photo-1489980508314-941910ded1f4?auto=format&fit=crop&w=128&h=128&q=80" },
+];
+
+const containerVariants = {
+  hidden: {},
+  visible: {
+    transition: { staggerChildren: 0.03 },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, scale: 0.92 },
+  visible: { opacity: 1, scale: 1, transition: { duration: 0.3 } },
+};
+
+export default function ContributorsSection() {
+  return (
+    <div className="w-full">
+      {/* Section Header */}
+      <div className="flex items-center gap-3 mb-6">
+        <div className="text-purple-600 dark:text-purple-400">
+          <FiUsers className="w-6 h-6" />
+        </div>
+        <div>
+          <h3 className="text-lg font-bold text-slate-800 dark:text-white leading-none">Contributors</h3>
+          <p className="text-xs text-slate-400 dark:text-slate-500 mt-1">
+            Awesome developers who contribute to AlgoBuddy
+          </p>
+        </div>
+      </div>
+
+      {/* Grid of Contributors */}
+      <motion.div
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-7 gap-4 justify-items-center"
+      >
+        {contributorsList.map((c) => (
+          <motion.div
+            key={c.name}
+            variants={itemVariants}
+            whileHover={{ scale: 1.05 }}
+            className="flex flex-col items-center text-center p-2"
+          >
+            <div className="w-14 h-14 rounded-full overflow-hidden ring-2 ring-slate-100 dark:ring-neutral-700 bg-slate-50 dark:bg-neutral-800 mb-2">
+              <Image
+                src={c.avatar}
+                alt={`${c.name}'s avatar`}
+                width={56}
+                height={56}
+                className="w-full h-full object-cover"
+              />
+            </div>
+            <span className="text-[11px] font-bold text-slate-850 dark:text-white leading-tight text-center">
+              {c.name}
+            </span>
+            <span className="text-[9px] text-slate-400 dark:text-slate-500 mt-0.5">
+              Contributor
+            </span>
+          </motion.div>
+        ))}
+      </motion.div>
+
+      {/* View All Button */}
+      <div className="mt-8 text-center">
+        <button
+          onClick={() => window.open("https://github.com/PankajSingh34/AlgoBuddy/graphs/contributors", "_blank", "noopener,noreferrer")}
+          className="inline-flex items-center justify-center gap-2 border border-slate-200 dark:border-neutral-700 hover:border-purple-300 dark:hover:border-purple-900/50 text-purple-600 dark:text-purple-400 font-semibold px-5 py-2.5 rounded-xl text-xs hover:bg-purple-50 dark:hover:bg-purple-950/20 transition-all duration-200">
+          <FiUserCheck className="w-4 h-4" />
+          View All Contributors
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/community/CoreTeamSection.jsx b/src/app/components/community/CoreTeamSection.jsx
new file mode 100644
index 000000000..a425eb3e7
--- /dev/null
+++ b/src/app/components/community/CoreTeamSection.jsx
@@ -0,0 +1,159 @@
+"use client";
+import { motion } from "framer-motion";
+import Image from "next/image";
+import { FaGithub, FaLinkedin, FaTwitter, FaGlobe } from "react-icons/fa6";
+import { FiUsers } from "react-icons/fi";
+
+const roleBadges = {
+  Founder: "bg-purple-50 text-purple-600 dark:bg-purple-950/30 dark:text-purple-400",
+  "Co-Founder": "bg-blue-50 text-blue-650 dark:bg-blue-950/30 dark:text-blue-400",
+  "Lead Designer": "bg-pink-50 text-pink-600 dark:bg-pink-950/30 dark:text-pink-400",
+  "Tech Lead": "bg-orange-50 text-orange-650 dark:bg-orange-950/30 dark:text-orange-400",
+  DevOps: "bg-emerald-50 text-emerald-600 dark:bg-emerald-950/30 dark:text-emerald-400",
+};
+
+const teamMembers = [
+  {
+    name: "Pankaj Singh",
+    role: "Founder",
+    title: "Full Stack Developer",
+    avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&h=150&q=80",
+    links: { github: "https://github.com/PankajSingh34", linkedin: "https://www.linkedin.com/in/pankaj-singh-2a968b212", twitter: "#" },
+  },
+  {
+    name: "Rohit Verma",
+    role: "Co-Founder",
+    title: "Backend Developer",
+    avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=150&h=150&q=80",
+    links: { github: "#", linkedin: "#" },
+  },
+  {
+    name: "Ananya Sharma",
+    role: "Lead Designer",
+    title: "UI/UX Designer",
+    avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=150&h=150&q=80",
+    links: { globe: "#", linkedin: "#", twitter: "#" },
+  },
+  {
+    name: "Aditya Raj",
+    role: "Tech Lead",
+    title: "Frontend Developer",
+    avatar: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?auto=format&fit=crop&w=150&h=150&q=80",
+    links: { github: "#", linkedin: "#", twitter: "#" },
+  },
+  {
+    name: "Priyanshu Gupta",
+    role: "DevOps",
+    title: "DevOps Engineer",
+    avatar: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=150&h=150&q=80",
+    links: { github: "#", linkedin: "#" },
+  },
+];
+
+const containerVariants = {
+  hidden: {},
+  visible: {
+    transition: { staggerChildren: 0.08 },
+  },
+};
+
+const cardVariants = {
+  hidden: { opacity: 0, y: 16 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: "easeOut" } },
+};
+
+export default function CoreTeamSection() {
+  return (
+    <div className="w-full">
+      {/* Section Header */}
+      <div className="flex items-center gap-3 mb-6">
+        <div className="text-purple-600 dark:text-purple-400">
+          <FiUsers className="w-6 h-6" />
+        </div>
+        <div>
+          <h3 className="text-lg font-bold text-slate-800 dark:text-white leading-none">Core Team</h3>
+          <p className="text-xs text-slate-400 dark:text-slate-500 mt-1">The brain behind AlgoBuddy</p>
+        </div>
+      </div>
+
+      {/* Grid of Team Cards */}
+      <motion.div
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4"
+      >
+        {teamMembers.map((member) => (
+          <motion.div
+            key={member.name}
+            variants={cardVariants}
+            whileHover={{ y: -4 }}
+            transition={{ type: "spring", stiffness: 300, damping: 18 }}
+            className="flex flex-col items-center text-center p-5 rounded-2xl bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-700/60 shadow-sm hover:shadow-md transition-shadow duration-200"
+          >
+            {/* Avatar */}
+            <div className="relative mb-3">
+              <div className="w-20 h-20 rounded-full overflow-hidden ring-2 ring-slate-50 dark:ring-neutral-700 flex items-center justify-center bg-slate-50 dark:bg-neutral-800">
+                <Image
+                  src={member.avatar}
+                  alt={`${member.name}'s avatar`}
+                  width={80}
+                  height={80}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            </div>
+
+            {/* Role Badge */}
+            <span
+              className={`inline-block px-2.5 py-0.5 text-[10px] font-bold rounded-full ${
+                roleBadges[member.role] || "bg-slate-100 text-slate-600"
+              }`}
+            >
+              {member.role}
+            </span>
+
+            {/* Name & Title */}
+            <h4 className="text-sm font-bold text-slate-850 dark:text-white mt-2 leading-none">
+              {member.name}
+            </h4>
+            <p className="text-[11px] text-slate-400 dark:text-slate-500 mt-1">
+              {member.title}
+            </p>
+
+            {/* Social Icons */}
+            <div className="flex items-center justify-center gap-3 mt-4">
+              {Object.entries(member.links).map(([platform, url]) => {
+                let Icon = FaGithub;
+                let hoverColor = "hover:text-slate-900 dark:hover:text-white";
+
+                if (platform === "linkedin") {
+                  Icon = FaLinkedin;
+                  hoverColor = "hover:text-blue-600";
+                } else if (platform === "twitter") {
+                  Icon = FaTwitter;
+                  hoverColor = "hover:text-sky-500";
+                } else if (platform === "globe") {
+                  Icon = FaGlobe;
+                  hoverColor = "hover:text-pink-500";
+                }
+
+                return (
+                  <a
+                    key={platform}
+                    href={url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={`text-slate-400 dark:text-slate-500 transition-colors duration-150 ${hoverColor}`}
+                  >
+                    <Icon className="w-[14px] h-[14px]" />
+                  </a>
+                );
+              })}
+            </div>
+          </motion.div>
+        ))}
+      </motion.div>
+    </div>
+  );
+}
diff --git a/src/app/components/community/JoinCommunityButton.jsx b/src/app/components/community/JoinCommunityButton.jsx
new file mode 100644
index 000000000..02800e183
--- /dev/null
+++ b/src/app/components/community/JoinCommunityButton.jsx
@@ -0,0 +1,69 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+import { FiUsers, FiCheck } from "react-icons/fi";
+import { useUser } from "@/features/user/UserContext";
+
+const DISCORD_INVITE = "https://discord.gg/PqnazRxPc";
+
+export default function JoinCommunityButton() {
+  const { user } = useUser();
+  const [joined, setJoined] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!user?.id) return;
+    fetch("/api/community/join")
+      .then((r) => r.json())
+      .then((data) => {
+        if (data?.joined_community) setJoined(true);
+      })
+      .catch(() => {});
+  }, [user?.id]);
+
+  const handleClick = async () => {
+    if (user?.id && !joined) {
+      try {
+        await fetch("/api/community/join", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ joined: true }),
+        });
+        setJoined(true);
+      } catch {}
+    }
+    window.open(DISCORD_INVITE, "_blank", "noopener,noreferrer");
+  };
+
+  return (
+    <motion.button
+      onClick={handleClick}
+      className={`inline-flex items-center justify-center gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-600 dark:hover:bg-purple-700 shadow-sm transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2 ${
+        joined ? "opacity-90" : ""
+      }`}
+      initial={mounted ? undefined : { scale: 1 }}
+      animate={
+        mounted && !joined
+          ? {
+              scale: [1, 1.02, 1],
+              transition: {
+                duration: 2,
+                repeat: Infinity,
+                repeatDelay: 5,
+                ease: "easeInOut",
+              },
+            }
+          : { scale: 1 }
+      }
+      whileHover={{ scale: 1.02 }}
+      whileTap={{ scale: 0.98 }}
+    >
+      {joined ? <FiCheck className="w-4 h-4" /> : <FiUsers className="w-4 h-4" />}
+      {joined ? "Community Joined" : "Join Community"}
+    </motion.button>
+  );
+}
diff --git a/src/app/components/community/UserProfileCard.jsx b/src/app/components/community/UserProfileCard.jsx
new file mode 100644
index 000000000..cb97fa19a
--- /dev/null
+++ b/src/app/components/community/UserProfileCard.jsx
@@ -0,0 +1,149 @@
+"use client";
+import { motion } from "framer-motion";
+import Image from "next/image";
+import { FaGithub, FaLinkedin, FaTwitter, FaDev } from "react-icons/fa6";
+
+export default function UserProfileCard() {
+  const displayName = "Pankaj Singh";
+  const displayRole = "Founder & Developer @ AlgoBuddy";
+  const displayBio = "Passionate about DSA, clean code, and building developer tools.";
+  // Curated premium portrait matching Pankaj Singh's profile description
+  const avatarSrc = "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=300&h=300&q=80";
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.35, ease: "easeOut" }}
+      className="rounded-2xl bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-700/60 shadow-sm overflow-hidden"
+    >
+      <div className="p-6 flex flex-col items-center">
+        {/* Profile Image */}
+        <div className="relative mb-4">
+          <div className="w-36 h-36 rounded-full overflow-hidden ring-4 ring-slate-100 dark:ring-neutral-700 flex items-center justify-center bg-slate-100 dark:bg-neutral-800">
+            <Image
+              src={avatarSrc}
+              alt={`${displayName}'s avatar`}
+              width={144}
+              height={144}
+              className="w-full h-full object-cover"
+            />
+          </div>
+        </div>
+
+        {/* User Info */}
+        <div className="text-center">
+          <h3 className="text-xl font-bold text-slate-800 dark:text-white">{displayName}</h3>
+          <p className="text-xs font-semibold text-purple-600 dark:text-purple-400 mt-1">
+            {displayRole}
+          </p>
+        </div>
+
+        {/* Bio */}
+        <p className="text-xs text-slate-500 dark:text-slate-400 leading-relaxed text-center mt-3 max-w-[240px]">
+          {displayBio}
+        </p>
+
+        {/* Stats Grid */}
+        <div className="w-full flex justify-between py-4 my-5 text-center">
+          <div className="flex-1">
+            <div className="text-base font-bold text-slate-850 dark:text-white">42</div>
+            <div className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">Projects</div>
+          </div>
+          <div className="w-[1px] bg-slate-100 dark:bg-neutral-700/60"></div>
+          <div className="flex-1">
+            <div className="text-base font-bold text-slate-850 dark:text-white">12.3K</div>
+            <div className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">Followers</div>
+          </div>
+          <div className="w-[1px] bg-slate-100 dark:bg-neutral-700/60"></div>
+          <div className="flex-1">
+            <div className="text-base font-bold text-slate-850 dark:text-white">98</div>
+            <div className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">Following</div>
+          </div>
+        </div>
+
+        {/* Connect Links */}
+        <div className="w-full text-left space-y-4 mb-6">
+          <h4 className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider">Connect</h4>
+          <div className="space-y-3">
+            {/* GitHub */}
+            <a
+              href="https://github.com/PankajSingh34"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-start gap-3 group"
+            >
+              <FaGithub className="w-5 h-5 text-slate-850 dark:text-slate-200 mt-0.5 flex-shrink-0" />
+              <div>
+                <div className="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-tight">GitHub</div>
+                <div className="text-[11px] text-purple-600 dark:text-purple-400 group-hover:underline leading-tight mt-0.5">
+                  github.com/pankajsingh
+                </div>
+              </div>
+            </a>
+
+            {/* LinkedIn */}
+            <a
+              href="https://www.linkedin.com/in/pankaj-singh-2a968b212"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-start gap-3 group"
+            >
+              <FaLinkedin className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
+              <div>
+                <div className="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-tight">LinkedIn</div>
+                <div className="text-[11px] text-purple-600 dark:text-purple-400 group-hover:underline leading-tight mt-0.5">
+                  linkedin.com/in/pankaj-singh
+                </div>
+              </div>
+            </a>
+
+            {/* Twitter */}
+            <a
+              href="https://twitter.com/pankajcodes"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-start gap-3 group"
+            >
+              <FaTwitter className="w-5 h-5 text-sky-500 mt-0.5 flex-shrink-0" />
+              <div>
+                <div className="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-tight">Twitter</div>
+                <div className="text-[11px] text-purple-600 dark:text-purple-400 group-hover:underline leading-tight mt-0.5">
+                  twitter.com/pankajcodes
+                </div>
+              </div>
+            </a>
+
+            {/* Dev.to */}
+            <a
+              href="https://dev.to/pankajsingh"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-start gap-3 group"
+            >
+              <FaDev className="w-5 h-5 text-slate-800 dark:text-slate-200 mt-0.5 flex-shrink-0" />
+              <div>
+                <div className="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-tight">Dev.to</div>
+                <div className="text-[11px] text-purple-600 dark:text-purple-400 group-hover:underline leading-tight mt-0.5">
+                  dev.to/pankajsingh
+                </div>
+              </div>
+            </a>
+          </div>
+        </div>
+
+        {/* View Full Profile Button */}
+        <button 
+        onClick={() =>
+          window.open(
+            "https://github.com/PankajSingh34",
+            "_blank"
+          )
+        }className="w-full py-2.5 px-4 rounded-xl border border-purple-250 dark:border-purple-900/30 text-purple-600 dark:text-purple-400 font-semibold text-sm hover:bg-purple-50 dark:hover:bg-purple-950/20 transition-all duration-200"
+        >
+          View Full Profile
+        </button>
+      </div>
+    </motion.div>
+  );
+}
diff --git a/src/app/components/contactus.jsx b/src/app/components/contactus.jsx
new file mode 100644
index 000000000..8f99ab120
--- /dev/null
+++ b/src/app/components/contactus.jsx
@@ -0,0 +1,430 @@
+"use client";
+
+import React, { useState } from "react";
+import Link from "next/link";
+import { api } from "@/lib/apiClient";
+import {
+  Mail,
+  Phone,
+  MapPin,
+  Send,
+  Github,
+  Linkedin,
+  Clock3,
+  MessageSquare,
+  Sparkles,
+  CheckCircle2,
+} from "lucide-react";
+import Footer from "@/app/components/footer";
+
+const faqs = [
+  {
+    question: "How quickly can I expect a response?",
+    answer:
+      "Most queries are answered within 24-48 hours depending on workload.",
+  },
+  {
+    question: "Can I contribute to AlgoBuddy?",
+    answer:
+      "Yes! Contributions, feature suggestions, and improvements are always welcome.",
+  },
+  {
+    question: "Where can I report bugs?",
+    answer: "You can use this contact form or reach out through GitHub issues.",
+  },
+];
+
+const ContactUs = () => {
+  const [activeFaq, setActiveFaq] = useState(null);
+
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    subject: "",
+    category: "General",
+    message: "",
+  });
+
+  const [submitted, setSubmitted] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleChange = (e) => {
+    setFormData((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError("");
+    setSubmitted(false);
+
+    try {
+      const data = await api.request("/api/contact", {
+        method: "POST",
+        body: {
+          name: formData.name,
+          email: formData.email,
+          subject: formData.subject,
+          category: formData.category,
+          message: formData.message,
+          captchaToken: "",
+        },
+      });
+
+      setSubmitted(true);
+      setFormData({
+        name: "",
+        email: "",
+        subject: "",
+        category: "General",
+        message: "",
+      });
+
+      setTimeout(() => {
+        setSubmitted(false);
+      }, 4000);
+    } catch {
+      setError("Network error. Please check your connection and try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <main className="min-h-screen bg-udemy-bg dark:bg-udemy-dark-bg text-udemy-text dark:text-udemy-dark-text overflow-hidden">
+        {/* Background Glow */}
+        <div className="absolute top-0 left-0 w-72 h-72 bg-primary/20 blur-3xl rounded-full opacity-40" />
+        <div className="absolute bottom-0 right-0 w-72 h-72 bg-blue-500/10 blur-3xl rounded-full opacity-30" />
+
+        {/* Hero */}
+        <section className="relative container-app pt-24 pb-14">
+          <div className="max-w-4xl mx-auto text-center">
+            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/20 bg-primary/10 text-primary text-sm font-medium">
+              <Sparkles size={16} />
+              We'd Love to Hear From You
+            </div>
+
+            <h1 className="mt-6 text-5xl md:text-6xl font-black tracking-tight leading-tight">
+              Contact <span className="text-primary">AlgoBuddy</span>
+            </h1>
+
+            <p className="mt-6 text-lg md:text-xl text-udemy-muted dark:text-udemy-dark-muted ...">
+              Whether you have feedback, collaboration ideas, feature requests, or
+              bug reports — our inbox is always open.
+            </p>
+          </div>
+        </section>
+
+        {/* Main Grid */}
+        <section className="relative container-app pb-24">
+          <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.2fr] gap-10">
+            {/* LEFT SIDE */}
+            <div className="space-y-8">
+              {/* Contact Info Card */}
+              <div className="bg-white/80 dark:bg-udemy-dark-surface/80 backdrop-blur-xl border border-udemy-border dark:border-udemy-dark-border rounded-3xl p-8 shadow-2xl">
+                <h2 className="text-2xl font-bold mb-8">Contact Information</h2>
+
+                <div className="space-y-6">
+                  <div className="group flex items-start gap-4">
+                    <div className="w-14 h-14 rounded-2xl bg-primary/10 text-primary flex items-center justify-center group-hover:scale-110 transition">
+                      <Mail size={24} />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-lg">Email</h3>
+                      <p className="text-udemy-muted dark:text-udemy-dark-muted text-sm mt-1">
+                        singhps588@gmail.com
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="group flex items-start gap-4">
+                    <div className="w-14 h-14 rounded-2xl bg-primary/10 text-primary flex items-center justify-center group-hover:scale-110 transition">
+                      <Phone size={24} />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-lg">Phone</h3>
+                      <p className="text-udemy-muted dark:text-udemy-dark-muted text-sm mt-1">
+                        +91 XXXXX XXXXX
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="group flex items-start gap-4">
+                    <div className="w-14 h-14 rounded-2xl bg-primary/10 text-primary flex items-center justify-center group-hover:scale-110 transition">
+                      <MapPin size={24} />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-lg">Location</h3>
+                      <p className="text-udemy-muted dark:text-udemy-dark-muted text-sm mt-1">India</p>
+                    </div>
+                  </div>
+
+                  <div className="group flex items-start gap-4">
+                    <div className="w-14 h-14 rounded-2xl bg-primary/10 text-primary flex items-center justify-center group-hover:scale-110 transition">
+                      <Clock3 size={24} />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-lg">Response Time</h3>
+                      <p className="text-udemy-muted dark:text-udemy-dark-muted text-sm mt-1">
+                        Usually within 24-48 hours
+                      </p>
+                    </div>
+                  </div>
+
+                </div>
+
+                {/* Social Buttons */}
+                <div className="mt-10">
+                  <h3 className="font-semibold text-lg mb-4">Connect With Us</h3>
+                  <div className="flex items-center gap-4">
+                    <a
+                      href="https://github.com/PankajSingh34/AlgoBuddy"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="w-14 h-14 rounded-2xl border border-udemy-border dark:border-udemy-dark-border flex items-center justify-center text-udemy-muted dark:text-udemy-dark-muted hover:text-white hover:border-primary hover:bg-primary/10 transition-all duration-300"
+                    >
+                      <Github size={24} />
+                    </a>
+                    <a
+                      href="https://www.linkedin.com/in/pankaj-singh-2a968b212/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="w-14 h-14 rounded-2xl border border-udemy-border dark:border-udemy-dark-border flex items-center justify-center text-udemy-muted dark:text-udemy-dark-muted  hover:text-white hover:border-primary hover:bg-primary/10 transition-all duration-300"
+                    >
+                      <Linkedin size={24} />
+                    </a>
+                  </div>
+                </div>
+              </div>
+
+              {/* Quick Help Card */}
+              <div className="bg-gradient-to-br from-primary/10 to-blue-500/5 border border-primary/20 rounded-3xl p-8">
+                <div className="flex items-center gap-3 mb-4">
+                  <MessageSquare className="text-primary" size={26} />
+                  <h3 className="text-2xl font-bold">Need Quick Help?</h3>
+                </div>
+                <p className="text-udemy-muted dark:text-udemy-dark-muted leading-relaxed">
+                  For faster communication, mention the exact issue, feature, or
+                  topic in your subject line.
+                </p>
+                <div className="mt-6 space-y-3">
+                  <div className="flex items-center gap-2 text-sm text-udemy-text dark:text-udemy-dark-text">
+                    <CheckCircle2 size={18} className="text-primary" />
+                    Bug Reports
+                  </div>
+                  <div className="flex items-center gap-2 text-sm text-udemy-text dark:text-udemy-dark-text">
+                    <CheckCircle2 size={18} className="text-primary" />
+                    Feature Requests
+                  </div>
+                  <div className="flex items-center gap-2 text-sm text-udemy-text dark:text-udemy-dark-text">
+                    <CheckCircle2 size={18} className="text-primary" />
+                    Collaboration Ideas
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* RIGHT SIDE — Contact Form */}
+            <div className="bg-white/80 dark:bg-udemy-dark-surface/80 backdrop-blur-xl border border-udemy-border dark:border-udemy-dark-border rounded-3xl p-8 shadow-2xl">
+              <h2 className="text-3xl font-bold mb-2">Send a Message</h2>
+              <p className="text-udemy-muted dark:text-udemy-dark-muted mb-8">
+                Fill out the form below and we'll get back to you soon.
+              </p>
+
+              {submitted && (
+                <div className="mb-6 flex items-center gap-3 rounded-2xl border border-green-500/20 bg-green-500/10 px-4 py-4 text-green-400">
+                  <CheckCircle2 size={22} />
+                  Message sent successfully!
+                </div>
+              )}
+
+              {error && (
+                <div className="mb-6 flex items-center gap-3 rounded-2xl border border-red-500/20 bg-red-500/10 px-4 py-4 text-red-400">
+                  <span className="text-lg">&#9888;</span>
+                  {error}
+                </div>
+              )}
+
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div className="grid sm:grid-cols-2 gap-5">
+                  <div>
+                    <label className="block text-sm font-medium mb-2">
+                      Full Name
+                    </label>
+                    <input
+                      type="text"
+                      name="name"
+                      required
+                      value={formData.name}
+                      onChange={handleChange}
+                      placeholder="John Doe"
+                      className="w-full rounded-2xl bg-white dark:bg-udemy-dark-bg border border-udemy-border dark:border-udemy-dark-border text-udemy-text dark:text-udemy-dark-text px-4 py-3 outline-none focus:border-primary transition"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium mb-2">
+                      Email Address
+                    </label>
+                    <input
+                      type="email"
+                      name="email"
+                      required
+                      value={formData.email}
+                      onChange={handleChange}
+                      placeholder="john@example.com"
+                      className="w-full rounded-2xl bg-white dark:bg-udemy-dark-bg border border-udemy-border dark:border-udemy-dark-border text-udemy-text dark:text-udemy-dark-text px-4 py-3 outline-none focus:border-primary transition"
+                    />
+                  </div>
+                </div>
+
+                <div className="grid sm:grid-cols-2 gap-5">
+                  <div>
+                    <label className="block text-sm font-medium mb-2">
+                      Subject
+                    </label>
+                    <input
+                      type="text"
+                      name="subject"
+                      required
+                      value={formData.subject}
+                      onChange={handleChange}
+                      placeholder="Enter subject"
+                      className="w-full rounded-2xl bg-white dark:bg-udemy-dark-bg border border-udemy-border dark:border-udemy-dark-border text-udemy-text dark:text-udemy-dark-text px-4 py-3 outline-none focus:border-primary transition"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium mb-2">
+                      Category
+                    </label>
+                    <select
+                      name="category"
+                      value={formData.category}
+                      onChange={handleChange}
+                      className="w-full rounded-2xl bg-white dark:bg-udemy-dark-bg border border-udemy-border dark:border-udemy-dark-border text-udemy-text dark:text-udemy-dark-text px-4 py-3 outline-none focus:border-primary transition"
+                    >
+                      <option>General</option>
+                      <option>Bug Report</option>
+                      <option>Feature Request</option>
+                      <option>Collaboration</option>
+                      <option>Support</option>
+                    </select>
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium mb-2">
+                    Message
+                  </label>
+                  <textarea
+                    name="message"
+                    required
+                    rows={7}
+                    value={formData.message}
+                    onChange={handleChange}
+                    placeholder="Write your message here..."
+                    className="w-full rounded-2xl bg-white dark:bg-udemy-dark-bg border border-udemy-border dark:border-udemy-dark-border text-udemy-text dark:text-udemy-dark-text px-4 py-4 outline-none focus:border-primary transition resize-none"
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  disabled={isLoading}
+                  className="group w-full bg-primary hover:opacity-90 transition-all duration-300 text-white py-4 rounded-2xl font-semibold flex items-center justify-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
+                >
+                  {isLoading ? (
+                    <>
+                      <svg
+                        className="animate-spin h-5 w-5 text-white"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                      >
+                        <circle
+                          className="opacity-25"
+                          cx="12"
+                          cy="12"
+                          r="10"
+                          stroke="currentColor"
+                          strokeWidth="4"
+                        />
+                        <path
+                          className="opacity-75"
+                          fill="currentColor"
+                          d="M4 12a8 8 0 018-8v8z"
+                        />
+                      </svg>
+                      Sending...
+                    </>
+                  ) : (
+                    <>
+                      Send Message
+                      <Send
+                        size={18}
+                        className="group-hover:translate-x-1 transition"
+                      />
+                    </>
+                  )}
+                </button>
+              </form>
+            </div>
+          </div>
+
+          {/* FAQ Section */}
+          <section className="mt-24">
+            <div className="text-center mb-12">
+              <h2 className="text-4xl font-black">Frequently Asked Questions</h2>
+              <p className="text-udemy-muted dark:text-udemy-dark-muted mt-4">
+                Quick answers to common questions.
+              </p>
+            </div>
+
+            <div className="max-w-4xl mx-auto space-y-5">
+              {faqs.map((faq, index) => (
+                <div
+                  key={index}
+                  className="border border-udemy-border dark:border-udemy-dark-border rounded-2xl overflow-hidden bg-white dark:bg-udemy-dark-surface"
+                >
+                  <button
+                    onClick={() =>
+                      setActiveFaq(activeFaq === index ? null : index)
+                    }
+                    className="w-full text-left px-6 py-5 flex items-center justify-between"
+                  >
+                    <span className="font-semibold text-lg">{faq.question}</span>
+                    <span className="text-primary text-2xl">
+                      {activeFaq === index ? "-" : "+"}
+                    </span>
+                  </button>
+
+                  {activeFaq === index && (
+                    <div className="px-6 pb-5 text-udemy-dark-muted leading-relaxed">
+                      {faq.answer}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </section>
+
+          {/* Back Home */}
+          <div className="mt-20 text-center">
+            <Link
+              href="/"
+              className="inline-flex items-center gap-2 px-6 py-3 rounded-2xl border border-udemy-dark-border hover:border-primary hover:text-primary transition"
+            >
+              ← Back to Home
+            </Link>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  );
+};
+
+export default ContactUs;
\ No newline at end of file
diff --git a/src/app/components/contactus/page.jsx b/src/app/components/contactus/page.jsx
new file mode 100644
index 000000000..592697ab6
--- /dev/null
+++ b/src/app/components/contactus/page.jsx
@@ -0,0 +1,11 @@
+import ContactUs from '@/app/components/contactus'
+
+export const metadata = {
+  title: 'ContactUs | AlgoBuddy',
+  description:
+    'Get in touch with the AlgoBuddy team for support, feedback, collaboration, or questions about the platform.',
+}
+
+export default function ContactUsPage() {
+  return <ContactUs />
+}
diff --git a/src/app/components/cookie.jsx b/src/app/components/cookie.jsx
new file mode 100644
index 000000000..a0963196c
--- /dev/null
+++ b/src/app/components/cookie.jsx
@@ -0,0 +1,193 @@
+import React, { useEffect } from "react";
+import { FiX } from "react-icons/fi";
+
+export const cookieSections = [
+  {
+    id: "1",
+    title: "What Are Cookies",
+    data: "Cookies are small text files that are stored on your device when you visit our website. They help us provide you with a better experience by remembering your preferences and understanding how you use our site.",
+  },
+  {
+    id: "2",
+    title: "Types of Cookies We Use",
+    points: [
+      "Essential Cookies: Required for basic site functionality and security",
+      "Performance Cookies: Help us understand how visitors interact with our website",
+      "Functionality Cookies: Remember your preferences and settings",
+      "Analytics Cookies: Collect information about your usage patterns",
+    ],
+  },
+  {
+    id: "3",
+    title: "How We Use Cookies",
+    points: [
+      "To authenticate users and prevent fraudulent use",
+      "Remember your preferences and settings",
+      "Analyze site traffic and usage patterns",
+      "Improve our website performance and user experience",
+      "Provide personalized content when available",
+    ],
+  },
+  {
+    id: "4",
+    title: "Third-Party Cookies",
+    data: "We may also use cookies from trusted third-party services for analytics, performance monitoring, and other functionality. These third parties have their own privacy policies governing cookie usage.",
+  },
+  {
+    id: "5",
+    title: "Cookie Management",
+    points: [
+      "You can control cookie settings through your browser preferences",
+      "Most browsers allow you to refuse or delete cookies",
+      "Disabling essential cookies may affect website functionality",
+      "You can opt-out of analytics cookies using our cookie preferences tool",
+    ],
+  },
+  {
+    id: "6",
+    title: "Your Choices",
+    data: "You have the right to accept or reject cookies. Most web browsers automatically accept cookies, but you can usually modify your browser setting to decline cookies if you prefer. However, this may prevent you from taking full advantage of the website.",
+  },
+  {
+    id: "7",
+    title: "Updates to Cookie Policy",
+    data: "We may update this Cookie Policy from time to time to reflect changes in technology, legislation, or our operations. We encourage you to periodically review this page for the latest information.",
+  },
+  {
+    id: "8",
+    title: "Contact Information",
+    data: "If you have any questions about our use of cookies, please contact us at",
+    contact: "hello@algobuddy.in",
+  },
+];
+
+const CookiePolicyModal = ({ isOpen, onClose }) => {
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
+      {/* Backdrop with fade-in animation */}
+      <div
+        className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm transition-opacity duration-300"
+        onClick={onClose}
+      />
+
+      {/* Modal container with slide-up animation */}
+      <div className="relative bg-white dark:bg-udemy-dark-surface text-udemy-text dark:text-udemy-dark-text max-w-3xl w-full rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 max-h-[90vh] flex flex-col border border-udemy-border dark:border-udemy-dark-border">
+        {/* Header with close button */}
+        <div className="sticky top-0 bg-white dark:bg-udemy-dark-surface border-b border-udemy-border dark:border-udemy-dark-border p-4 flex justify-between items-center z-10">
+          <h2 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100">
+            Cookie Policy
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-md border border-neutral-300 text-neutral-600 hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-300 dark:hover:bg-neutral-800 transition-colors"
+            aria-label="Close"
+          >
+            <FiX className="w-6 h-6" />
+          </button>
+        </div>
+
+        {/* Scrollable content */}
+        <div className="overflow-y-auto p-6 scrollbar-thin">
+          <p className="mb-6 text-udemy-muted dark:text-udemy-dark-muted leading-relaxed">
+            This Cookie Policy explains how we use cookies and similar
+            technologies on our website. It describes the types of cookies we
+            use, their purposes, and how you can manage your cookie preferences.
+          </p>
+
+          {/* Cookie policy sections */}
+          <div className="space-y-6">
+            <ul>
+              {cookieSections.map((item, index) => (
+                <li key={index} className="mb-4">
+                  <div className="bg-neutral-50 dark:bg-neutral-800/40 p-5 rounded-xl border border-neutral-200 dark:border-neutral-700 transition-all duration-300">
+                    <div className="flex items-start">
+                      <span className="w-6 h-6 flex-shrink-0 font-semibold bg-neutral-100 dark:bg-neutral-800 rounded-full flex items-center justify-center text-neutral-700 dark:text-neutral-300 mr-3 mt-0.5">
+                        {item.id}
+                      </span>
+                      <h3 className="text-xl font-bold font-serif text-udemy-text dark:text-udemy-dark-text mb-2">
+                        {item.title}
+                      </h3>
+                    </div>
+                    {item.points && (
+                      <ul className="space-y-2 text-udemy-muted dark:text-udemy-dark-muted pl-9 mb-2">
+                        {item.points.map((subitem, subindex) => (
+                          <li
+                            key={subindex}
+                            className="list-disc text-neutral-500 pl-1"
+                          >
+                            <span className="text-udemy-muted dark:text-udemy-dark-muted">
+                              {subitem}
+                            </span>
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                    {item.data && (
+                      <p className="text-udemy-muted dark:text-udemy-dark-muted pl-9 leading-relaxed">
+                        {item.data}
+                      </p>
+                    )}
+                    {item.contact && (
+                      <div className="pl-9 mt-2">
+                        <a
+                          href={`mailto:${item.contact}`}
+                          className="font-medium text-neutral-900 dark:text-neutral-100 hover:underline"
+                        >
+                          {item.contact}
+                        </a>
+                      </div>
+                    )}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Additional cookie information */}
+          <div className="mt-6 p-4 bg-neutral-50 dark:bg-neutral-800/40 rounded-lg border border-neutral-200 dark:border-neutral-700">
+            <h4 className="font-bold text-udemy-text dark:text-udemy-dark-text mb-2">
+              🍪 Cookie Duration
+            </h4>
+            <p className="text-sm text-udemy-muted dark:text-udemy-dark-muted leading-relaxed">
+              Session cookies are temporary and expire when you close your
+              browser. Persistent cookies remain on your device for a set period
+              or until you delete them.
+            </p>
+          </div>
+
+          <div className="mt-8 pt-4 border-t border-udemy-border dark:border-udemy-dark-border">
+            <p className="text-xs text-udemy-muted dark:text-udemy-dark-muted">
+              Last updated: May 17, 2025
+            </p>
+          </div>
+        </div>
+
+        {/* Footer with close button */}
+        <div className="sticky bottom-0 bg-white dark:bg-udemy-dark-surface border-t border-udemy-border dark:border-udemy-dark-border p-4 flex justify-end">
+          <button
+            onClick={onClose}
+            className="px-6 py-2.5 bg-neutral-900 hover:bg-neutral-800 text-white font-semibold rounded-lg transition-all duration-200 active:scale-95 text-sm dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200"
+          >
+            Accept & Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CookiePolicyModal;
diff --git a/src/app/components/cookiesconsent.jsx b/src/app/components/cookiesconsent.jsx
new file mode 100644
index 000000000..7ddaf914f
--- /dev/null
+++ b/src/app/components/cookiesconsent.jsx
@@ -0,0 +1,444 @@
+import {
+  CONSENT_STATUS_KEY,
+  getStoredPreferences,
+  saveStoredPreferences,
+} from "@/lib/cookieConsent";
+import React, { useState, useEffect } from "react";
+
+const CookieConsent = () => {
+  const [showBanner, setShowBanner] = useState(false);
+  const [showPreferences, setShowPreferences] = useState(false);
+
+  const [preferences, setPreferences] = useState({
+    essential: true,
+    analytics: false,
+    functional: false,
+    marketing: false,
+  });
+
+  // Check if user has already given consent
+  useEffect(() => {
+  const consent = localStorage.getItem(CONSENT_STATUS_KEY);
+  if (!consent) {
+    setShowBanner(true);
+  } else {
+    setPreferences(getStoredPreferences());
+  }
+}, []);
+
+const saveConsent = (type, prefsOverride) => {
+  const finalPreferences = prefsOverride ?? preferences;
+  localStorage.setItem(CONSENT_STATUS_KEY, type);
+  saveStoredPreferences(finalPreferences);
+  setShowBanner(false);
+  setShowPreferences(false);
+};
+
+const handleAcceptAll = () => {
+  const allAccepted = {
+    essential: true,
+    analytics: true,
+    functional: true,
+    marketing: true,
+  };
+  setPreferences(allAccepted);
+  saveConsent("accepted", allAccepted);
+};
+
+const handleRejectNonEssential = () => {
+  const essentialOnly = {
+    essential: true,
+    analytics: false,
+    functional: false,
+    marketing: false,
+  };
+  setPreferences(essentialOnly);
+  saveConsent("rejected", essentialOnly);
+};
+
+  const handleSavePreferences = () => {
+    saveConsent("preferences_saved");
+  };
+
+  const togglePreference = (key) => {
+    if (key === "essential") return; // Essential cookies cannot be disabled
+    setPreferences((prev) => ({
+      ...prev,
+      [key]: !prev[key],
+    }));
+  };
+
+  const closeBanner = () => {
+    // Dismiss without saving (treat as reject)
+    localStorage.setItem("cookieConsent", "dismissed");
+    setShowBanner(false);
+  };
+
+  if (!showBanner) return null;
+
+  return (
+    <>
+      {/* Main Cookie Banner */}
+      <div className="cookie-banner">
+        <div className="cookie-content">
+          <button
+            className="close-btn"
+            onClick={closeBanner}
+            aria-label="Close"
+          >
+            ×
+          </button>
+
+          <div className="cookie-text">
+            <h3>We use cookies</h3>
+            <p>
+              This website uses cookies to enhance your experience, analyze
+              traffic, and serve personalized content. By clicking "Accept All",
+              you consent to our use of cookies. Read our{" "}
+              <a
+                href="/cookie-policy"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Cookie Policy
+              </a>
+              .
+            </p>
+          </div>
+
+          <div className="cookie-buttons">
+            <button
+              className="btn btn-secondary"
+              onClick={handleRejectNonEssential}
+            >
+              Reject Non-Essential
+            </button>
+            <button
+              className="btn btn-outline"
+              onClick={() => setShowPreferences(true)}
+            >
+              Manage Preferences
+            </button>
+            <button className="btn btn-primary" onClick={handleAcceptAll}>
+              Accept All
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Preferences Modal */}
+      {showPreferences && (
+        <div className="modal-overlay">
+          <div className="modal">
+            <div className="modal-header">
+              <h2>Cookie Preferences</h2>
+              <button
+                className="close-btn"
+                onClick={() => setShowPreferences(false)}
+              >
+                ×
+              </button>
+            </div>
+
+            <div className="modal-body">
+              <div className="preference-item">
+                <div>
+                  <strong>Essential Cookies</strong>
+                  <p>
+                    These cookies are necessary for the website to function
+                    properly.
+                  </p>
+                </div>
+                <label className="toggle">
+                  <input type="checkbox" checked disabled />
+                  <span className="slider"></span>
+                </label>
+              </div>
+
+              <div className="preference-item">
+                <div>
+                  <strong>Analytics Cookies</strong>
+                  <p>
+                    Help us understand how visitors interact with the website.
+                  </p>
+                </div>
+                <label className="toggle">
+                  <input
+                    type="checkbox"
+                    checked={preferences.analytics}
+                    onChange={() => togglePreference("analytics")}
+                  />
+                  <span className="slider"></span>
+                </label>
+              </div>
+
+              <div className="preference-item">
+                <div>
+                  <strong>Functional Cookies</strong>
+                  <p>Enable enhanced functionality and personalization.</p>
+                </div>
+                <label className="toggle">
+                  <input
+                    type="checkbox"
+                    checked={preferences.functional}
+                    onChange={() => togglePreference("functional")}
+                  />
+                  <span className="slider"></span>
+                </label>
+              </div>
+
+              <div className="preference-item">
+                <div>
+                  <strong>Marketing Cookies</strong>
+                  <p>
+                    Used to deliver relevant advertisements and track
+                    effectiveness.
+                  </p>
+                </div>
+                <label className="toggle">
+                  <input
+                    type="checkbox"
+                    checked={preferences.marketing}
+                    onChange={() => togglePreference("marketing")}
+                  />
+                  <span className="slider"></span>
+                </label>
+              </div>
+            </div>
+
+            <div className="modal-footer">
+              <button
+                className="btn btn-secondary"
+                onClick={handleRejectNonEssential}
+              >
+                Reject All
+              </button>
+              <button
+                className="btn btn-primary"
+                onClick={handleSavePreferences}
+              >
+                Save Preferences
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <style jsx>{`
+        .cookie-banner {
+          position: fixed;
+          bottom: 20px;
+          left: 50%;
+          transform: translateX(-50%);
+          background: #1f2937;
+          color: white;
+          max-width: 520px;
+          width: 90%;
+          border-radius: 12px;
+          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+          z-index: 10000;
+          padding: 20px;
+          font-family:
+            system-ui,
+            -apple-system,
+            sans-serif;
+        }
+
+        .cookie-content {
+          position: relative;
+        }
+
+        .close-btn {
+          position: absolute;
+          top: -8px;
+          right: -8px;
+          background: #374151;
+          color: white;
+          border: none;
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          font-size: 20px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 10;
+        }
+
+        .cookie-text h3 {
+          margin: 0 0 12px 0;
+          font-size: 18px;
+        }
+
+        .cookie-text p {
+          margin: 0 0 20px 0;
+          line-height: 1.5;
+          font-size: 14px;
+          color: #d1d5db;
+        }
+
+        .cookie-text a {
+          color: #60a5fa;
+          text-decoration: underline;
+        }
+
+        .cookie-buttons {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 10px;
+          justify-content: center;
+        }
+
+        .btn {
+          padding: 10px 18px;
+          border-radius: 8px;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.2s;
+          border: none;
+          font-size: 14px;
+        }
+
+        .btn-primary {
+          background: #3b82f6;
+          color: white;
+        }
+
+        .btn-primary:hover {
+          background: #2563eb;
+        }
+
+        .btn-secondary {
+          background: #4b5563;
+          color: white;
+        }
+
+        .btn-secondary:hover {
+          background: #374151;
+        }
+
+        .btn-outline {
+          background: transparent;
+          border: 2px solid #6b7280;
+          color: white;
+        }
+
+        .btn-outline:hover {
+          border-color: #9ca3af;
+        }
+
+        /* Modal Styles */
+        .modal-overlay {
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: rgba(0, 0, 0, 0.7);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 10001;
+        }
+
+        .modal {
+          background: white;
+          color: #1f2937;
+          max-width: 480px;
+          width: 90%;
+          border-radius: 12px;
+          overflow: hidden;
+          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        }
+
+        .modal-header {
+          padding: 20px 24px;
+          border-bottom: 1px solid #e5e7eb;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .modal-body {
+          padding: 20px 24px;
+        }
+
+        .preference-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 16px 0;
+          border-bottom: 1px solid #f3f4f6;
+        }
+
+        .preference-item:last-child {
+          border-bottom: none;
+        }
+
+        .modal-footer {
+          padding: 20px 24px;
+          background: #f9fafb;
+          display: flex;
+          gap: 12px;
+          justify-content: flex-end;
+          border-top: 1px solid #e5e7eb;
+        }
+
+        /* Toggle Switch */
+        .toggle {
+          position: relative;
+          display: inline-block;
+          width: 50px;
+          height: 26px;
+        }
+
+        .toggle input {
+          opacity: 0;
+          width: 0;
+          height: 0;
+        }
+
+        .slider {
+          position: absolute;
+          cursor: pointer;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: #ccc;
+          transition: 0.4s;
+          border-radius: 26px;
+        }
+
+        .slider:before {
+          position: absolute;
+          content: "";
+          height: 20px;
+          width: 20px;
+          left: 3px;
+          bottom: 3px;
+          background-color: white;
+          transition: 0.4s;
+          border-radius: 50%;
+        }
+
+        input:checked + .slider {
+          background-color: #3b82f6;
+        }
+
+        input:checked + .slider:before {
+          transform: translateX(24px);
+        }
+
+        @media (max-width: 480px) {
+          .cookie-buttons {
+            flex-direction: column;
+          }
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default CookieConsent;
diff --git a/src/app/components/faq.jsx b/src/app/components/faq.jsx
new file mode 100644
index 000000000..8332c3ba3
--- /dev/null
+++ b/src/app/components/faq.jsx
@@ -0,0 +1,326 @@
+"use client";
+import React, { useState, useMemo } from "react";
+import Link from "next/link";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  FiChevronDown,
+  FiSearch,
+  FiHelpCircle,
+  FiMail,
+  FiGithub,
+  FiMessageCircle,
+  FiBook,
+  FiCode,
+  FiActivity,
+  FiUsers,
+} from "react-icons/fi";
+import Support from "@/app/components/support";
+import Footer from "@/app/components/footer";
+
+const faqData = {
+  "General": [
+    { question: "What is AlgoBuddy?", answer: "AlgoBuddy is an interactive learning platform designed to help you master Data Structures and Algorithms through dynamic visual representations and hands-on practice." },
+    { question: "Is AlgoBuddy free?", answer: "Yes, AlgoBuddy provides many free resources for learners. We also plan to introduce premium features in the future for advanced tracking and personalized learning paths." },
+    { question: "Who is AlgoBuddy for?", answer: "It's for everyone! Whether you're a beginner taking your first computer science class, or an experienced developer preparing for coding interviews." }
+  ],
+  "Getting Started": [
+    { question: "How do I create an account?", answer: "You can create an account by clicking the 'Sign Up' button in the top right corner. You can use your email or sign in directly with Google or GitHub." },
+    { question: "Do I need to install anything?", answer: "No, AlgoBuddy runs entirely in your web browser. There's no need to install any software or configure local environments." },
+    { question: "Where should I start?", answer: "If you're new, we recommend starting with the Practice page and the beginner tutorial series, which introduce basic arrays and loops." }
+  ],
+  "Visualizers": [
+    { question: "How do visualizers work?", answer: "Visualizers take abstract code execution and render it graphically step-by-step. You can control the speed, pause, step forward, or step backward to understand exactly how variables and structures change." },
+    { question: "Can I input my own data?", answer: "Yes! Most of our visualizers allow you to input custom arrays, graphs, or strings to see how the algorithm handles your specific edge cases." },
+    { question: "Are new algorithms being added?", answer: "Absolutely. We constantly update our library. If there's a specific algorithm you want to see, let us know in the community Discord!" }
+  ],
+  "Practice": [
+    { question: "How can I track my progress?", answer: "Once logged in, your progress is automatically saved. You can view your completed problems, current streak, and mastery level on your profile." },
+    { question: "Does the code editor support multiple languages?", answer: "Currently, our integrated code editor supports JavaScript, Python, Java, and C++. We are working on adding more languages soon." }
+  ],
+  "Arena": [
+    { question: "What is the Arena?", answer: "The Arena is a competitive section where you can test your skills against other developers in real-time algorithm challenges." },
+    { question: "How does Arena ranking work?", answer: "Rankings are based on the Elo rating system. You gain points by solving problems faster and more accurately than your peers during Arena matches." }
+  ],
+  "Community": [
+    { question: "Can I contribute to the project?", answer: "Yes! AlgoBuddy is open to community contributions. Check out our GitHub repository for contribution guidelines and open issues." },
+    { question: "How do I report bugs?", answer: "If you find a bug, please open an issue on our GitHub page or report it in the '#bug-reports' channel on our Discord server." }
+  ],
+  "Account": [
+    { question: "How do I reset my password?", answer: "You can reset your password by clicking 'Forgot Password' on the login screen. A reset link will be sent to your registered email address." },
+    { question: "Can I delete my account?", answer: "Yes, you can permanently delete your account and all associated data from the Settings page." }
+  ]
+};
+
+const categories = Object.keys(faqData);
+
+const stats = [
+  { label: "Algorithms Covered", value: "50+", icon: FiCode },
+  { label: "Visualizers Available", value: "30+", icon: FiActivity },
+  { label: "Practice Problems", value: "200+", icon: FiBook },
+  { label: "Contributors", value: "15+", icon: FiUsers },
+];
+
+const FAQSection = () => {
+  const [activeCategory, setActiveCategory] = useState("General");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(null);
+
+  const toggleAccordion = (index) => {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+
+  // Handle Search Filtering
+  const filteredFAQs = useMemo(() => {
+    if (!searchQuery.trim()) return faqData[activeCategory];
+
+    const lowerQuery = searchQuery.toLowerCase();
+    // If searching, search across all categories to make it useful
+    const allFaqs = [];
+    Object.entries(faqData).forEach(([cat, faqs]) => {
+      faqs.forEach(faq => {
+        if (faq.question.toLowerCase().includes(lowerQuery) || faq.answer.toLowerCase().includes(lowerQuery)) {
+          allFaqs.push({ ...faq, category: cat });
+        }
+      });
+    });
+    return allFaqs;
+  }, [searchQuery, activeCategory]);
+
+  return (
+    <>
+      <section className="relative min-h-screen bg-udemy-surface dark:bg-udemy-dark-bg overflow-hidden font-sans">
+
+        {/* Background Gradients */}
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[500px] opacity-20 dark:opacity-30 pointer-events-none">
+          <div className="absolute inset-0 bg-gradient-to-r from-udemy-purple via-udemy-purple-light to-transparent blur-3xl rounded-full mix-blend-multiply dark:mix-blend-screen transform -translate-y-1/2"></div>
+        </div>
+
+        <div className="container mx-auto px-4 sm:px-6 relative z-10 pt-20 pb-16">
+          {/* Hero Section */}
+          <div className="max-w-4xl mx-auto text-center mb-16">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5 }}
+            >
+              <span className="inline-flex items-center justify-center gap-2 px-4 py-1.5 rounded-full bg-udemy-purple/10 text-udemy-purple dark:text-udemy-purple-light text-sm font-bold tracking-wider uppercase mb-6">
+                <FiHelpCircle className="w-4 h-4" />
+                Help Center
+              </span>
+              <h1 className="text-4xl md:text-6xl font-bold font-serif text-udemy-text dark:text-udemy-dark-text mb-6">
+                How can we{" "}
+                <span className="text-transparent bg-clip-text bg-gradient-to-r from-udemy-purple to-udemy-purple-light">
+                  help you?
+                </span>
+              </h1>
+              <p className="text-lg md:text-xl text-udemy-muted dark:text-udemy-dark-muted leading-relaxed max-w-2xl mx-auto mb-10">
+                Search our knowledge base or browse categories to find answers to your questions.
+              </p>
+
+              {/* Search Bar */}
+              <div className="relative max-w-2xl mx-auto">
+                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                  <FiSearch className="h-5 w-5 text-udemy-muted dark:text-udemy-dark-muted" />
+                </div>
+                <input
+                  type="text"
+                  className="block w-full pl-12 pr-4 py-4 bg-white dark:bg-udemy-dark-surface border-2 border-transparent focus:border-udemy-purple dark:focus:border-udemy-purple rounded-2xl text-udemy-text dark:text-udemy-dark-text placeholder-udemy-muted dark:placeholder-udemy-dark-muted shadow-lg focus:ring-0 transition-all outline-none text-lg"
+                  placeholder="Search for answers..."
+                  value={searchQuery}
+                  onChange={(e) => {
+                    setSearchQuery(e.target.value);
+                    setActiveIndex(null); // reset accordion on search
+                  }}
+                />
+              </div>
+            </motion.div>
+          </div>
+
+          <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12">
+
+            {/* Sidebar / Categories */}
+            <div className="lg:col-span-3">
+              <div className="sticky top-24">
+                <h3 className="text-sm font-bold text-udemy-muted dark:text-udemy-dark-muted uppercase tracking-wider mb-4 px-2 hidden lg:block">
+                  Categories
+                </h3>
+                {/* Horizontal scroll on mobile, vertical list on desktop */}
+                <div className="flex overflow-x-auto lg:flex-col gap-2 pb-4 lg:pb-0 scrollbar-hide -mx-4 px-4 lg:mx-0 lg:px-0">
+                  {categories.map((category) => (
+                    <button
+                      key={category}
+                      onClick={() => {
+                        setActiveCategory(category);
+                        setSearchQuery("");
+                        setActiveIndex(null);
+                      }}
+                      className={`whitespace-nowrap flex-shrink-0 lg:w-full text-left px-4 lg:px-5 py-3 rounded-xl transition-all duration-200 font-medium ${activeCategory === category && !searchQuery
+                          ? "bg-udemy-purple text-white shadow-md"
+                          : "bg-white/50 dark:bg-udemy-dark-surface/50 text-udemy-text dark:text-udemy-dark-text hover:bg-udemy-purple/10 hover:text-udemy-purple dark:hover:text-udemy-purple-light"
+                        }`}
+                    >
+                      {category}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* FAQ Accordion List */}
+            <div className="lg:col-span-9 min-h-[400px]">
+              <div className="mb-6 flex items-end justify-between">
+                <h2 className="text-2xl font-bold font-serif text-udemy-text dark:text-udemy-dark-text">
+                  {searchQuery ? "Search Results" : activeCategory}
+                </h2>
+                {searchQuery && (
+                  <span className="text-sm text-udemy-muted dark:text-udemy-dark-muted">
+                    Found {filteredFAQs.length} result{filteredFAQs.length !== 1 ? 's' : ''}
+                  </span>
+                )}
+              </div>
+
+              {filteredFAQs.length === 0 ? (
+                <div className="text-center py-16 bg-white dark:bg-udemy-dark-surface rounded-2xl border border-udemy-border dark:border-udemy-dark-border border-dashed">
+                  <FiSearch className="w-12 h-12 mx-auto text-udemy-muted/50 dark:text-udemy-dark-muted/50 mb-4" />
+                  <p className="text-lg text-udemy-muted dark:text-udemy-dark-muted">
+                    No FAQs found matching "{searchQuery}"
+                  </p>
+                  <button
+                    onClick={() => setSearchQuery("")}
+                    className="mt-4 text-udemy-purple hover:underline"
+                  >
+                    Clear search
+                  </button>
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  {filteredFAQs.map((faq, index) => (
+                    <motion.div
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ delay: index * 0.05 }}
+                      key={index}
+                      className={`bg-white dark:bg-udemy-dark-surface border border-udemy-border dark:border-udemy-dark-border rounded-2xl overflow-hidden transition-all duration-300 ${activeIndex === index
+                          ? "shadow-md ring-1 ring-udemy-purple/20"
+                          : "shadow-sm hover:shadow-md hover:border-udemy-purple/30 dark:hover:border-udemy-purple/50"
+                        }`}
+                    >
+                      <button
+                        className="w-full flex items-center justify-between p-6 text-left focus:outline-none"
+                        onClick={() => toggleAccordion(index)}
+                        aria-expanded={activeIndex === index}
+                      >
+                        <div className="pr-8">
+                          {searchQuery && (
+                            <span className="text-xs font-bold text-udemy-purple dark:text-udemy-purple-light uppercase tracking-wider mb-2 block">
+                              {faq.category}
+                            </span>
+                          )}
+                          <h3 className="text-lg font-bold text-udemy-text dark:text-udemy-dark-text leading-tight">
+                            {faq.question}
+                          </h3>
+                        </div>
+                        <motion.div
+                          animate={{ rotate: activeIndex === index ? 180 : 0 }}
+                          transition={{ duration: 0.3, ease: "easeInOut" }}
+                          className="flex-shrink-0 text-udemy-muted dark:text-udemy-dark-muted"
+                        >
+                          <FiChevronDown className="w-6 h-6" />
+                        </motion.div>
+                      </button>
+                      <AnimatePresence>
+                        {activeIndex === index && (
+                          <motion.div
+                            initial={{ height: 0, opacity: 0 }}
+                            animate={{ height: "auto", opacity: 1 }}
+                            exit={{ height: 0, opacity: 0 }}
+                            transition={{ duration: 0.3, ease: "easeInOut" }}
+                            className="overflow-hidden"
+                          >
+                            <div className="px-6 pb-6 pt-0 text-udemy-muted dark:text-udemy-dark-muted leading-relaxed">
+                              <div className="pt-4 border-t border-udemy-border/50 dark:border-udemy-dark-border/50">
+                                {faq.answer}
+                              </div>
+                            </div>
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </motion.div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Quick Stats Section */}
+          <div className="max-w-6xl mx-auto mt-24">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 lg:gap-8">
+              {stats.map((stat, i) => (
+                <div key={i} className="bg-white/50 dark:bg-udemy-dark-surface/50 backdrop-blur-sm border border-udemy-border dark:border-udemy-dark-border rounded-2xl p-6 text-center hover:bg-white dark:hover:bg-udemy-dark-surface transition-colors">
+                  <div className="w-12 h-12 mx-auto bg-udemy-purple/10 dark:bg-udemy-purple/20 rounded-xl flex items-center justify-center text-udemy-purple dark:text-udemy-purple-light mb-4">
+                    <stat.icon className="w-6 h-6" />
+                  </div>
+                  <div className="text-3xl font-bold text-udemy-text dark:text-udemy-dark-text mb-1 font-serif">{stat.value}</div>
+                  <div className="text-sm text-udemy-muted dark:text-udemy-dark-muted">{stat.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Additional Support Options */}
+          <div className="max-w-6xl mx-auto mt-24">
+            <div className="bg-gradient-to-br from-udemy-purple to-udemy-purple-dark rounded-3xl p-8 lg:p-12 text-white shadow-xl relative overflow-hidden">
+              <div className="absolute top-0 right-0 w-64 h-64 bg-white opacity-5 rounded-full blur-3xl transform translate-x-1/2 -translate-y-1/2"></div>
+
+              <div className="relative z-10 text-center max-w-2xl mx-auto">
+                <h3 className="text-3xl font-bold font-serif mb-4">
+                  Still need help?
+                </h3>
+                <p className="text-purple-100 text-lg mb-10">
+                  Can't find the answer you're looking for? Reach out to our community or support team.
+                </p>
+
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 lg:gap-6">
+                  <Link href="mailto:support@algobuddy.com" className="flex flex-col items-center justify-center gap-3 bg-white/10 hover:bg-white/20 border border-white/20 rounded-2xl p-6 transition-all group backdrop-blur-sm">
+                    <div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
+                      <FiMail className="w-5 h-5" />
+                    </div>
+                    <span className="font-semibold">Contact Support</span>
+                  </Link>
+                  <Link href="https://github.com/PankajSingh34/AlgoBuddy/issues" target="_blank" rel="noopener noreferrer" className="flex flex-col items-center justify-center gap-3 bg-white/10 hover:bg-white/20 border border-white/20 rounded-2xl p-6 transition-all group backdrop-blur-sm">
+                    <div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
+                      <FiGithub className="w-5 h-5" />
+                    </div>
+                    <span className="font-semibold">GitHub Issues</span>
+                  </Link>
+                  <Link href="https://discord.gg/Gv2N4U3KAc" target="_blank" rel="noopener noreferrer" className="flex flex-col items-center justify-center gap-3 bg-white/10 hover:bg-white/20 border border-white/20 rounded-2xl p-6 transition-all group backdrop-blur-sm">
+                    <div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
+                      <FiMessageCircle className="w-5 h-5" />
+                    </div>
+                    <span className="font-semibold">Discord Community</span>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Support component backward compatibility */}
+          <div className="hidden">
+            <Support />
+          </div>
+
+          <Link
+            href="/"
+            className="mt-16 mx-auto flex w-fit items-center gap-2 px-6 py-3 rounded-2xl border border-udemy-border dark:border-udemy-dark-border hover:border-udemy-purple hover:text-udemy-purple dark:hover:text-udemy-purple-light transition bg-white dark:bg-udemy-dark-surface font-medium"
+          >
+            ← Back to Home
+          </Link>
+
+        </div>
+      </section>
+      <Footer />
+    </>
+  );
+};
+
+export default FAQSection;
diff --git a/src/app/components/faq/page.jsx b/src/app/components/faq/page.jsx
new file mode 100644
index 000000000..6de43e5ad
--- /dev/null
+++ b/src/app/components/faq/page.jsx
@@ -0,0 +1,11 @@
+import FAQSection from "@/app/components/faq";
+
+export const metadata = {
+  title: "FAQ | AlgoBuddy",
+  description:
+    "Find answers to common questions about AlgoBuddy, its visualizations, and how to use the platform.",
+};
+
+export default function FAQPage() {
+  return <FAQSection />;
+}
\ No newline at end of file
diff --git a/app/components/feature.jsx b/src/app/components/feature.jsx
old mode 100755
new mode 100644
similarity index 100%
rename from app/components/feature.jsx
rename to src/app/components/feature.jsx
diff --git a/src/app/components/footer.jsx b/src/app/components/footer.jsx
new file mode 100755
index 000000000..1fb941f8c
--- /dev/null
+++ b/src/app/components/footer.jsx
@@ -0,0 +1,340 @@
+'use client'
+
+import React, { useState } from 'react'
+import Link from 'next/link'
+import { Users } from 'lucide-react'
+import {
+  FaGithub,
+  FaLinkedin,
+  FaEnvelope,
+  FaDiscord,
+  FaYoutube,
+  FaXTwitter,
+  FaInstagram,
+} from 'react-icons/fa6'
+
+
+
+const Footer = () => {
+  const [newsletterEmail, setNewsletterEmail] = useState("");
+  const [newsletterEmailError, setNewsletterEmailError] = useState("");
+  const [newsletterSuccess, setNewsletterSuccess] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const validateEmail = (value, isSubmit = false) => {
+    if (!value) {
+      if (isSubmit) {
+        setNewsletterEmailError("Email is required");
+        return false;
+      }
+      setNewsletterEmailError("");
+      return true;
+    }
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(value)) {
+      setNewsletterEmailError("Please enter a valid email address");
+      return false;
+    }
+    setNewsletterEmailError("");
+    return true;
+  };
+
+  const handleNewsletterSubscribe = async (e) => {
+    e.preventDefault();
+    setNewsletterSuccess("");
+    if (!validateEmail(newsletterEmail, true)) {
+      return;
+    }
+    
+    setIsSubmitting(true);
+    try {
+      const response = await fetch('/api/newsletter/subscribe', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: newsletterEmail }),
+      });
+      const data = await response.json();
+      
+      if (!response.ok) {
+        setNewsletterEmailError(data.error || "Subscription failed");
+      } else {
+        setNewsletterSuccess(data.message || "Successfully subscribed!");
+        setNewsletterEmail("");
+      }
+    } catch (error) {
+      setNewsletterEmailError("Network error. Please try again.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const footerHeading =
+    'text-white text-lg font-semibold mb-6 relative after:absolute after:left-0 after:-bottom-2 after:w-10 after:h-[2px] after:bg-gray-600'
+  const footerLink =
+    'block text-gray-400 hover:text-white transition-colors duration-300 text-sm'
+  const socialIcon =
+    'w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-gray-400 hover:bg-primary/20 hover:border-primary/50 hover:text-white transition-all duration-300'
+
+  return (
+    <>
+      <footer className="relative bg-udemy-dark-bg text-gray-400 overflow-hidden border-t border-white/5">
+        <div className="max-w-7xl mx-auto px-6 lg:px-10 py-16 relative z-10">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-[1.4fr_1fr_1fr_1fr_1fr] gap-12">
+            {/* Left Section */}
+            <div>
+              <h2 className="text-4xl font-black tracking-tight text-white">
+                Algo<span className="text-primary">Buddy</span>
+              </h2>
+
+              <p className="mt-6 text-sm leading-8 max-w-xs text-gray-400">
+                Interactive visualization tools for mastering data structures
+                and algorithms.
+              </p>
+
+              {/* Social Icons */}
+              <div className="flex items-center gap-3 mt-8">
+                <a
+                  href="https://github.com/PankajSingh34/AlgoBuddy"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={socialIcon}
+                  aria-label="GitHub"
+                >
+                  <FaGithub className="w-4 h-4" />
+                </a>
+
+                <a
+                  href="https://www.linkedin.com/company/algobuddy"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={socialIcon}
+                  aria-label="LinkedIn"
+                >
+                  <FaLinkedin className="w-4 h-4" />
+                </a>
+
+                <a
+                  href="mailto:AlgoBuddy.connect@gmail.com"
+                  className={socialIcon}
+                  aria-label="Email"
+                >
+                  <FaEnvelope className="w-4 h-4" />
+                </a>
+
+                <a
+                  href="https://www.instagram.com/algobuddy.connect/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={socialIcon}
+                  aria-label="Instagram"
+                >
+                  <FaInstagram className="w-4 h-4" />
+                </a>
+
+                <a
+                  href="https://discord.gg/PqnazRxPc"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={socialIcon}
+                  aria-label="Join AlgoBuddy Discord Community"
+                >
+                  <FaDiscord className="w-4 h-4" />
+                </a>
+              </div>
+
+              {/* Newsletter */}
+              <form onSubmit={handleNewsletterSubscribe} className="mt-10">
+                <h3 className="text-white font-semibold mb-2">Stay updated</h3>
+                <p className="text-sm mb-4 text-gray-400 max-w-xs">
+                  Subscribe to get the latest updates, features, and tutorials.
+                </p>
+
+                <div className="flex overflow-hidden rounded-xl border border-white/10 bg-white/5 focus-within:border-primary/50 transition-colors w-full max-w-sm">
+                  <input
+                    type="email"
+                    placeholder="Enter your email"
+                    value={newsletterEmail}
+                    disabled={isSubmitting}
+                    onChange={(e) => {
+                      setNewsletterEmail(e.target.value);
+                      validateEmail(e.target.value, false);
+                    }}
+                    className="flex-1 bg-transparent px-4 py-2.5 text-sm outline-none text-white placeholder-gray-500 disabled:opacity-50"
+                  />
+                  <button type="submit" disabled={isSubmitting} className="bg-primary hover:bg-primary/90 text-white px-5 py-2.5 text-sm font-medium transition-colors disabled:opacity-50">
+                    {isSubmitting ? "..." : "Subscribe"}
+                  </button>
+                </div>
+                {newsletterEmailError && (
+                  <p className="text-red-500 text-xs mt-2" role="alert">
+                    {newsletterEmailError}
+                  </p>
+                )}
+                {newsletterSuccess && (
+                  <p className="text-green-500 text-xs mt-2" role="alert">
+                    {newsletterSuccess}
+                  </p>
+                )}
+              </form>
+            </div>
+
+            {/* Quick Links */}
+            <div>
+              <h3 className={footerHeading}>Quick Links</h3>
+              <div className="space-y-4">
+                <Link
+                  href="/#home"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    document.getElementById("home")?.scrollIntoView({
+                      behavior: "smooth",
+                    });
+                  }}
+                  className={footerLink}
+                  aria-label="Navigate to homepage"
+                >
+                  Home
+                </Link>
+                <Link href="/visualizer" className={footerLink}>
+                  Visualizations
+                </Link>
+                <Link href="/about" className={footerLink}>
+                  About Us
+                </Link>
+                <Link href="/contactus" className={footerLink}>
+                  Contact Us
+                </Link>
+              </div>
+            </div>
+
+            {/* Resources */}
+            <div>
+              <h3 className={footerHeading}>Resources</h3>
+              <div className="space-y-4">
+                <Link href="/tutorials" className={footerLink}>
+                  Tutorials
+                </Link>
+                <Link href="/cheatsheets" className={footerLink}>
+                  Cheatsheets
+                </Link>
+                <Link href="/practice" className={footerLink}>
+                  Practice Problems
+                </Link>
+                <Link href="/roadmaps" className={footerLink}>
+                  Roadmaps
+                </Link>
+                <Link href="/recently-viewed" className={footerLink}>
+                  Recently Viewed
+                </Link>
+                <Link href="/blog" className={footerLink}>
+                  Blog
+                </Link>
+                <Link href="/faq" className={footerLink}>
+                  FAQ
+                </Link>
+              </div>
+            </div>
+
+            {/* Community */}
+            <div>
+              <h3 className={footerHeading}>Community</h3>
+              <p className="text-sm text-gray-400 mb-6 leading-relaxed pr-4">
+                Join our community and connect with learners and developers.
+              </p>
+              <div className="space-y-4">
+                <Link
+                  href="/community"
+                  className="flex items-center gap-3 text-gray-400 hover:text-white transition-colors duration-300 text-sm"
+                  aria-label="Visit AlgoBuddy Community"
+                >
+                  <Users className="w-4 h-4" /> Community
+                </Link>
+                <a
+                  href="https://discord.gg/PqnazRxPc"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 text-gray-400 hover:text-white transition-colors duration-300 text-sm"
+                  aria-label="Join AlgoBuddy Discord Community"
+                >
+                  <FaDiscord className="w-4 h-4" /> Discord
+                </a>
+                <a
+                  href="https://github.com/PankajSingh34/AlgoBuddy"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 text-gray-400 hover:text-white transition-colors duration-300 text-sm"
+                  aria-label="AlgoBuddy on GitHub"
+                >
+                  <FaGithub className="w-4 h-4" /> GitHub
+                </a>
+                <a
+                  href="https://www.youtube.com/@AlgoBuddy.connect"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 text-gray-400 hover:text-white transition-colors duration-300 text-sm"
+                  aria-label="AlgoBuddy on YouTube"
+                >
+                  <FaYoutube className="w-4 h-4" /> YouTube
+                </a>
+                <a
+                  href="https://www.instagram.com/algobuddy.connect/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 text-gray-400 hover:text-white transition-colors duration-300 text-sm"
+                  aria-label="AlgoBuddy on Instagram"
+                >
+                  <FaInstagram className="w-4 h-4" /> Instagram
+                </a>
+                <a
+                  href="https://x.com/AlgoBuddy_"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 text-gray-400 hover:text-white transition-colors duration-300 text-sm"
+                  aria-label="AlgoBuddy on X (Twitter)"
+                >
+                  <FaXTwitter className="w-4 h-4" /> Twitter
+                </a>
+              </div>
+            </div>
+
+            {/* Legal */}
+            <div>
+              <h3 className={footerHeading}>Legal</h3>
+              <div className="space-y-4">
+                <Link href="/privacy"
+                  className="flex items-center gap-3 text-gray-400 hover:text-white transition-colors duration-300 text-sm"
+                  aria-label="View Privacy Policy"
+                >
+                  Privacy Policy
+                </Link>
+                
+                  <Link href="/terms" className={footerLink} aria-label="View Terms of Service">
+  Terms of Service
+</Link>
+<Link href="/cookie" className={footerLink} aria-label="View Cookie Policy">
+  Cookies Policy
+</Link>
+
+
+                <Link href="/code-of-conduct"
+                  className="flex items-center gap-3 text-gray-400 hover:text-white transition-colors duration-300 text-sm"
+                  aria-label="View Code of Conduct"
+                >
+                  Code Of Conduct
+                </Link>
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom Row */}
+          <div className="border-t border-white/10 mt-16 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-500">
+            <p>© {new Date().getFullYear()} AlgoBuddy. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+      
+    </>
+  )
+}
+
+export default Footer
diff --git a/src/app/components/hero.jsx b/src/app/components/hero.jsx
new file mode 100644
index 000000000..875e6174f
--- /dev/null
+++ b/src/app/components/hero.jsx
@@ -0,0 +1,291 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import Link from "next/link";
+import { event } from "@/lib/gtag";
+import { ArrowRight } from "lucide-react";
+
+const TOPICS = [
+  { label: "Sorting Algorithms",  color: "#a435f0", bg: "#faf5ff", darkBg: "#2e1a47", darkColor: "#c27cf7" },
+  { label: "Binary Search",       color: "#2563eb", bg: "#eff6ff", darkBg: "#1a2744", darkColor: "#60a5fa" },
+  { label: "Graph Traversal",     color: "#059669", bg: "#f0fdf4", darkBg: "#0f2e22", darkColor: "#34d399" },
+  { label: "Linked Lists",        color: "#d97706", bg: "#fffbeb", darkBg: "#2e1f0a", darkColor: "#fbbf24" },
+  { label: "Hashmap",             color: "#0ea5e9", bg: "#f0f9ff", darkBg: "#0a2434", darkColor: "#38bdf8" },
+  { label: "Dynamic Programming", color: "#dc2626", bg: "#fef2f2", darkBg: "#2e0f0f", darkColor: "#f87171" },
+  { label: "Stack & Queue",       color: "#7c3aed", bg: "#f5f3ff", darkBg: "#1e1535", darkColor: "#a78bfa" },
+];
+
+const HeroSection = () => {
+  const [index, setIndex] = useState(0);
+  const [visible, setVisible] = useState(true);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setVisible(false);
+      setTimeout(() => {
+        setIndex((i) => (i + 1) % TOPICS.length);
+        setVisible(true);
+      }, 350);
+    }, 2200);
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const check = () => setIsDark(root.classList.contains("dark"));
+    check();
+    const observer = new MutationObserver(check);
+    observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleStart = () => {
+    event({
+      action: "click_start_visualizing",
+      category: "Hero",
+      label: "Start Visualizing Button",
+    });
+  };
+
+  const topic = TOPICS[index];
+
+  return (
+    <main className="landing-page bg-white dark:bg-surface-900">
+      <section id="home" className="min-h-[calc(100vh-72px)] flex items-center justify-center px-5 py-20 relative overflow-hidden">
+        <div className="relative z-10 w-full max-w-[1100px] mx-auto flex flex-col lg:flex-row items-center gap-16 lg:gap-24">
+          {/* LEFT — text */}
+          <div className="flex-1 flex flex-col items-center lg:items-start text-center lg:text-left space-y-7">
+            <h1
+              className="text-[2.2rem] sm:text-[3.5rem] lg:text-[4rem] font-serif font-bold leading-[1.1] tracking-tight text-surface-900 dark:text-surface-50"
+              style={{ fontFamily: '"Source Serif 4", "Source Serif Pro", Georgia, serif' }}
+            >
+              The smartest way
+              <br />
+              to learn DSA — <span className="text-primary">visually.</span>
+            </h1>
+
+            {/* animated topic pill */}
+            <div className="flex items-center gap-3 h-12" role="status" aria-live="polite" aria-atomic="true">
+              <span
+                key={topic.label}
+                className="topic-chip relative inline-flex items-center gap-2 px-4 sm:px-5 py-2 rounded-full text-[13px] sm:text-[14px] font-bold backdrop-blur-sm transition-colors transition-opacity duration-300 ease-in-out"
+                style={{
+                  "--chip-bg": visible ? (isDark ? topic.darkBg : topic.bg) : "transparent",
+                  "--chip-bg-hover": visible ? (isDark ? topic.darkColor + "22" : topic.color + "1a") : "transparent",
+                  "--chip-text": visible ? (isDark ? topic.darkColor : topic.color) : "transparent",
+                  "--chip-text-hover": visible ? (isDark ? "#e7f0ff" : "#111827") : "transparent",
+                  backgroundColor: "var(--chip-bg)",
+                  color: "var(--chip-text)",
+                  opacity: visible ? 1 : 0,
+                  border: `1.5px solid ${visible ? (isDark ? topic.darkColor + "66" : topic.color + "44") : "transparent"}`,
+                  boxShadow: visible ? `0 10px 24px ${isDark ? topic.darkColor + "24" : topic.color + "26"}` : "none",
+                }}
+              >
+                <span
+                  className="w-2 h-2 rounded-full flex-shrink-0"
+                  style={{
+                    background: isDark ? topic.darkColor : topic.color,
+                    boxShadow: `0 0 0 6px ${(isDark ? topic.darkColor : topic.color)}22`,
+                  }}
+                  aria-hidden="true"
+                />
+                {topic.label}
+                <span
+                  className="pointer-events-none absolute inset-0 rounded-full opacity-0 transition-opacity duration-300 ease-in-out"
+                  style={{
+                    background: "linear-gradient(90deg, transparent 20%, rgba(255,255,255,0.55) 50%, transparent 80%)",
+                    animation: visible ? "pillShine 2.2s linear infinite" : "none",
+                  }}
+                  aria-hidden="true"
+                />
+              </span>
+            </div>
+
+            {/* CTAs */}
+            <div className="flex flex-col sm:flex-row items-center gap-3 pt-1 w-full sm:w-auto">
+              <Link
+                href="/visualizer"
+                onClick={handleStart}
+                className="group inline-flex items-center justify-center gap-2 h-[52px] min-h-[44px] w-full sm:w-auto px-8 rounded-full bg-surface-900 dark:bg-white text-white dark:text-surface-900 text-[15px] font-bold hover:bg-primary dark:hover:bg-primary dark:hover:text-white transition-colors duration-200"
+              >
+                Start Visualizing
+                <ArrowRight className="w-4 h-4" />
+              </Link>
+            </div>
+          </div>
+
+          {/* RIGHT — DSA visual card */}
+          <div className="flex-shrink-0 flex items-center justify-center w-full lg:w-auto px-4 sm:px-0">
+            <div className="group relative w-full max-w-[340px] sm:max-w-[460px] transform-gpu will-change-transform transition-all duration-300 ease-in-out">
+              {/* main card */}
+              <div className="rounded-2xl border border-[#d1d7dc] dark:border-[#3e4143] bg-[#1c1d1f] shadow-2xl overflow-hidden transition-all duration-300 ease-in-out">
+                {/* title bar */}
+                <div className="flex items-center gap-2 px-4 py-3 bg-[#2d2f31] border-b border-[#3e4143]">
+                  <span className="w-3 h-3 rounded-full bg-[#ff5f57]" />
+                  <span className="w-3 h-3 rounded-full bg-[#febc2e]" />
+                  <span className="w-3 h-3 rounded-full bg-[#28c840]" />
+                  <span className="ml-3 text-[12px] text-[#9e9e9e] font-mono">binarySearch.js</span>
+                </div>
+
+                {/* code body */}
+                <div className="px-4 sm:px-5 py-5 font-mono text-[11px] sm:text-[13px] leading-[1.85] select-none overflow-x-auto">
+                  <div>
+                    <span className="text-[#c792ea]">function</span>{" "}
+                    <span className="text-[#82aaff]">binarySearch</span>
+                    <span className="text-[#f7f9fa]">(arr, target) {"{"}</span>
+                  </div>
+                  <div className="pl-5">
+                    <span className="text-[#c792ea]">let</span>{" "}
+                    <span className="text-[#f78c6c]">left</span>{" "}
+                    <span className="text-[#89ddff]">=</span>{" "}
+                    <span className="text-[#f78c6c]">0</span>
+                    <span className="text-[#f7f9fa]">,</span>{" "}
+                    <span className="text-[#f78c6c]">right</span>{" "}
+                    <span className="text-[#89ddff]">=</span>{" "}
+                    <span className="text-[#f7f9fa]">arr.length</span>{" "}
+                    <span className="text-[#89ddff]">-</span>{" "}
+                    <span className="text-[#f78c6c]">1</span>
+                    <span className="text-[#f7f9fa]">;</span>
+                  </div>
+                  <div className="pl-5 mt-1">
+                    <span className="text-[#c792ea]">while</span>{" "}
+                    <span className="text-[#f7f9fa]">(left</span>{" "}
+                    <span className="text-[#89ddff]">&lt;=</span>{" "}
+                    <span className="text-[#f7f9fa]">right) {"{"}</span>
+                  </div>
+                  <div className="pl-10">
+                    <span className="text-[#c792ea]">const</span>{" "}
+                    <span className="text-[#f78c6c]">mid</span>{" "}
+                    <span className="text-[#89ddff]">=</span>{" "}
+                    <span className="text-[#f7f9fa]">Math.floor((left</span>{" "}
+                    <span className="text-[#89ddff]">+</span>{" "}
+                    <span className="text-[#f7f9fa]">right)</span>{" "}
+                    <span className="text-[#89ddff]">/</span>{" "}
+                    <span className="text-[#f78c6c]">2</span>
+                    <span className="text-[#f7f9fa]">);</span>
+                  </div>
+                  <div className="pl-10 bg-[#a435f0]/20 rounded px-2 -mx-2">
+                    <span className="text-[#c792ea]">if</span>{" "}
+                    <span className="text-[#f7f9fa]">(arr[mid]</span>{" "}
+                    <span className="text-[#89ddff]">===</span>{" "}
+                    <span className="text-[#f7f9fa]">target)</span>{" "}
+                    <span className="text-[#c792ea]">return</span>{" "}
+                    <span className="text-[#f78c6c]">mid</span>
+                    <span className="text-[#f7f9fa]">;</span>
+                  </div>
+                  <div className="pl-10">
+                    <span className="text-[#c792ea]">else if</span>{" "}
+                    <span className="text-[#f7f9fa]">(arr[mid]</span>{" "}
+                    <span className="text-[#89ddff]">&lt;</span>{" "}
+                    <span className="text-[#f7f9fa]">target) left</span>{" "}
+                    <span className="text-[#89ddff]">=</span>{" "}
+                    <span className="text-[#f7f9fa]">mid</span>{" "}
+                    <span className="text-[#89ddff]">+</span>{" "}
+                    <span className="text-[#f78c6c]">1</span>
+                    <span className="text-[#f7f9fa]">;</span>
+                  </div>
+                  <div className="pl-10">
+                    <span className="text-[#c792ea]">else</span>{" "}
+                    <span className="text-[#f7f9fa]">right</span>{" "}
+                    <span className="text-[#89ddff]">=</span>{" "}
+                    <span className="text-[#f7f9fa]">mid</span>{" "}
+                    <span className="text-[#89ddff]">-</span>{" "}
+                    <span className="text-[#f78c6c]">1</span>
+                    <span className="text-[#f7f9fa]">;</span>
+                  </div>
+                  <div className="pl-5">
+                    <span className="text-[#f7f9fa]">{"}"}</span>
+                  </div>
+                  <div className="pl-5">
+                    <span className="text-[#c792ea]">return</span>{" "}
+                    <span className="text-[#f78c6c]">-1</span>
+                    <span className="text-[#f7f9fa]">;</span>
+                  </div>
+                  <div>
+                    <span className="text-[#f7f9fa]">{"}"}</span>
+                  </div>
+                </div>
+
+                {/* visualizer strip */}
+                <div className="px-4 sm:px-5 pb-5">
+                  <div className="rounded-lg bg-[#2d2f31] border border-[#3e4143] p-3 sm:p-4">
+                    <p className="text-[11px] text-[#9e9e9e] font-mono mb-3 uppercase tracking-wider">
+                      Visualization — step 2 of 4
+                    </p>
+                    <div className="flex items-end gap-1 sm:gap-1.5 h-[60px]">
+                      {[2, 5, 8, 12, 16, 23, 38, 45, 56, 72].map((v, i) => (
+                        <div key={i} className="flex-1 flex flex-col items-center gap-1">
+                          <div
+                            className="w-full rounded-sm transition-colors duration-200"
+                            style={{
+                              height: `${(v / 72) * 52}px`,
+                              background: i === 5 ? "#a435f0" : i >= 5 ? "#3e4143" : "#6a6f73",
+                            }}
+                          />
+                          <span className="text-[8px] sm:text-[9px] text-[#9e9e9e] font-mono">{v}</span>
+                        </div>
+                      ))}
+                    </div>
+                    <div className="flex items-center gap-3 sm:gap-4 mt-3 flex-wrap">
+                      <span className="flex items-center gap-1.5 text-[10px] sm:text-[11px] text-[#9e9e9e]">
+                        <span className="w-2.5 h-2.5 rounded-sm bg-[#a435f0]" /> mid
+                      </span>
+                      <span className="flex items-center gap-1.5 text-[10px] sm:text-[11px] text-[#9e9e9e]">
+                        <span className="w-2.5 h-2.5 rounded-sm bg-[#6a6f73]" /> active
+                      </span>
+                      <span className="flex items-center gap-1.5 text-[10px] sm:text-[11px] text-[#9e9e9e]">
+                        <span className="w-2.5 h-2.5 rounded-sm bg-[#3e4143]" /> eliminated
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Floating badges */}
+              <div
+                className="absolute -top-3 -right-3 z-30 flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2 rounded-full bg-white border border-neutral-200 text-xs sm:text-sm text-surface-900 shadow-md transition-transform duration-150 ease-out hover:-translate-y-0.5 hover:scale-105"
+                aria-hidden
+              >
+                <span
+                  className="w-3 h-3 rounded-full flex-shrink-0"
+                  style={{ background: "#a435f0", boxShadow: "0 0 0 6px #a435f022" }}
+                />
+                <span className="font-medium">O(log n)</span>
+              </div>
+
+              <div
+                className="absolute -bottom-3 -left-3 z-30 flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2 rounded-full bg-white border border-neutral-200 text-xs sm:text-sm text-surface-900 shadow-md transition-transform duration-150 ease-out hover:-translate-y-0.5 hover:scale-105"
+                aria-hidden
+              >
+                <span className="w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0" style={{ background: "#28c840" }}>
+                  <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
+                    <path d="M1 4L4 7L9 1" stroke="#e0ece3" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                </span>
+                <span className="font-medium">Found at index 5</span>
+              </div>
+
+              {/* glow */}
+              <div className="absolute inset-0 rounded-2xl bg-[#a435f0]/8 blur-3xl -z-10 scale-110" />
+            </div>
+          </div>
+        </div>
+      </section>
+      <style jsx>{`
+        @keyframes pillShine {
+          0% { transform: translateX(-120%); }
+          100% { transform: translateX(120%); }
+        }
+        .topic-chip:hover {
+          background-color: var(--chip-bg-hover);
+          color: var(--chip-text-hover);
+        }
+        .topic-chip:hover > span:last-child {
+          opacity: 0.28;
+        }
+      `}</style>
+    </main>
+  );
+};
+
+export default HeroSection;
\ No newline at end of file
diff --git a/src/app/components/models/AdjacencyPanel.jsx b/src/app/components/models/AdjacencyPanel.jsx
new file mode 100644
index 000000000..00505c58d
--- /dev/null
+++ b/src/app/components/models/AdjacencyPanel.jsx
@@ -0,0 +1,131 @@
+// app/components/models/AdjacencyPanel.jsx
+"use client";
+import { useMemo } from "react";
+import { buildAdjacencyList, buildAdjacencyMatrix } from "@/utils/graph";
+
+export default function AdjacencyPanel({ nodes, edges, isDirected, isWeighted }) {
+  const nodeCount = nodes.length;
+  const nodeIds = nodes.map((n) => n.id);
+
+  const idToIndex = Object.fromEntries(nodeIds.map((id, i) => [id, i]));
+  const reindexedEdges = edges.map((e) => ({
+    from: idToIndex[e.from] ?? e.from,
+    to: idToIndex[e.to] ?? e.to,
+    weight: e.weight ?? 1,
+  }));
+
+  const adjList = useMemo(
+    () => buildAdjacencyList(nodeCount, reindexedEdges, isDirected),
+    [nodeCount, reindexedEdges, isDirected]
+  );
+
+  const adjMatrix = useMemo(
+    () => buildAdjacencyMatrix(nodeCount, reindexedEdges, isDirected, isWeighted),
+    [nodeCount, reindexedEdges, isDirected, isWeighted]
+  );
+
+  if (nodeCount === 0) {
+    return (
+      <p style={{ color: "#6b7280", fontSize: 13 }}>
+        Add nodes to the canvas to see representations.
+      </p>
+    );
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+      {/* Adjacency List */}
+      <div>
+        <p style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", color: "#6b7280", marginBottom: 8 }}>
+          ADJACENCY LIST {isDirected ? "(directed — outgoing only)" : "(undirected)"}
+          {isWeighted ? " — weighted" : ""}
+        </p>
+        <div style={{ fontFamily: "monospace", fontSize: 13, lineHeight: "1.8" }}>
+          {nodeIds.map((id, i) => (
+            <div key={id}>
+              <span style={{ color: "#a855f7" }}>{i}:</span>{" "}
+              <span style={{ color: "#d1d5db" }}>
+                [{adjList[i]?.map((entry) => {
+                  if (isWeighted && typeof entry === "object") {
+                    return `${nodeIds[entry.to] ?? entry.to}(${entry.weight})`;
+                  }
+                  return nodeIds[entry] ?? entry;
+                }).join(", ")}]
+              </span>
+            </div>
+          ))}
+        </div>
+        {isWeighted && (
+          <p style={{ fontSize: 11, color: "#6b7280", marginTop: 6 }}>
+            Format: neighbour(weight)
+          </p>
+        )}
+      </div>
+
+      {/* Adjacency Matrix */}
+      <div>
+        <p style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", color: "#6b7280", marginBottom: 8 }}>
+          ADJACENCY MATRIX{isDirected ? " (asymmetric for directed)" : ""}
+          {isWeighted ? " — values show edge weight" : ""}
+        </p>
+        <div style={{ overflowX: "auto" }}>
+          <table style={{ borderCollapse: "collapse", fontSize: 13, fontFamily: "monospace" }}>
+            <thead>
+              <tr>
+                <th style={thStyle} />
+                {nodeIds.map((id, i) => (
+                  <th key={i} style={{ ...thStyle, color: "#a855f7" }}>{i}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {adjMatrix.map((row, r) => (
+                <tr key={r}>
+                  <td style={{ ...thStyle, color: "#a855f7" }}>{r}</td>
+                  {row.map((val, c) => {
+                    const hasEdge = isWeighted ? val > 0 : val === 1;
+                    return (
+                      <td
+                        key={c}
+                        style={{
+                          ...tdStyle,
+                          color: hasEdge ? "#22c55e" : "#4b5563",
+                          fontWeight: hasEdge ? 600 : 400,
+                        }}
+                      >
+                        {val}
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        {isDirected && !isWeighted && (
+          <p style={{ fontSize: 11, color: "#6b7280", marginTop: 8 }}>
+            matrix[u][v] = 1 means edge u → v exists. Asymmetry indicates directed edges.
+          </p>
+        )}
+        {isWeighted && (
+          <p style={{ fontSize: 11, color: "#6b7280", marginTop: 8 }}>
+            matrix[u][v] = weight of edge u → v. 0 means no edge.
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const thStyle = {
+  padding: "4px 12px",
+  textAlign: "center",
+  color: "#9ca3af",
+  fontWeight: 500,
+};
+
+const tdStyle = {
+  padding: "4px 12px",
+  textAlign: "center",
+  borderTop: "1px solid #1f2937",
+};
\ No newline at end of file
diff --git a/app/components/models/ArrayModal.jsx b/src/app/components/models/ArrayModal.jsx
old mode 100755
new mode 100644
similarity index 100%
rename from app/components/models/ArrayModal.jsx
rename to src/app/components/models/ArrayModal.jsx
diff --git a/src/app/components/models/GraphCanvas.jsx b/src/app/components/models/GraphCanvas.jsx
new file mode 100644
index 000000000..61d784275
--- /dev/null
+++ b/src/app/components/models/GraphCanvas.jsx
@@ -0,0 +1,514 @@
+// app/components/models/GraphCanvas.jsx
+"use client";
+import { useRef, useState, useCallback } from "react";
+
+
+const NODE_RADIUS = 26;
+const COLORS = {
+  unvisited: { fill: "var(--vis-unvisited-fill, #111)", stroke: "var(--vis-unvisited-stroke, #22c55e)" },
+  visiting:  { fill: "var(--vis-visiting-fill, #854d0e)", stroke: "var(--vis-visiting-stroke, #f97316)" },
+  visited:   { fill: "var(--vis-visited-fill, #14532d)", stroke: "var(--vis-visited-stroke, #22c55e)" },
+};
+
+function edgeEndpoint(x1, y1, x2, y2, radius) {
+  const dx = x2 - x1, dy = y2 - y1;
+  const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+  return {
+    x: x2 - (dx / dist) * (radius + 4),
+    y: y2 - (dy / dist) * (radius + 4),
+  };
+}
+
+function SelfLoop({ cx, cy, color }) {
+  return (
+    <ellipse
+      cx={cx}
+      cy={cy - NODE_RADIUS - 14}
+      rx={14}
+      ry={10}
+      fill="none"
+      stroke={color}
+      strokeWidth={1.5}
+      markerEnd="url(#arrowhead)"
+    />
+  );
+}
+
+// Renders an editable weight label at the midpoint of an edge
+function EdgeWeightLabel({ x1, y1, x2, y2, weight, onWeightChange, readOnlyLabel }) {
+  const mx = (x1 + x2) / 2;
+  const my = (y1 + y2) / 2;
+
+  if (readOnlyLabel !== undefined) {
+    const labelStr = String(readOnlyLabel);
+    const width = Math.max(24, labelStr.length * 8 + 12);
+    return (
+      <foreignObject
+        x={mx - width / 2}
+        y={my - 12}
+        width={width}
+        height={20}
+        className="pointer-events-none"
+      >
+        <div className="flex h-full w-full items-center justify-center rounded-full bg-white/90 dark:bg-slate-900/90 border border-slate-200 dark:border-slate-700 text-[10px] font-bold text-yellow-600 dark:text-yellow-500 shadow-sm backdrop-blur-sm">
+          {labelStr}
+        </div>
+      </foreignObject>
+    );
+  }
+
+  return (
+    <foreignObject x={mx - 16} y={my - 14} width={32} height={24}>
+      <input
+        xmlns="http://www.w3.org/1999/xhtml"
+        type="number"
+        value={weight}
+        min={1}
+        onChange={(e) => onWeightChange(Number(e.target.value) || 1)}
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          width: "100%",
+          height: "100%",
+          background: "#1f2937",
+          color: "#f9fafb",
+          border: "1px solid #4b5563",
+          borderRadius: 4,
+          textAlign: "center",
+          fontSize: "12px",
+          outline: "none",
+        }}
+      />
+    </foreignObject>
+  );
+}
+
+export default function GraphCanvas({
+  nodes,
+  edges,
+  isDirected,
+  isWeighted = false,
+  visitedSet,
+  currentNode,
+  animationState = {},
+  interactive = true,
+  className = "",
+  onAddNode,
+  onMoveNode,
+  onAddEdge,
+  onRemoveNode,
+  onRemoveEdge,
+  onReverseEdge,
+  onUpdateEdgeWeight, // NEW prop — (edgeIdx, newWeight) => void
+}) {
+  const svgRef = useRef(null);
+  const [edgeStart, setEdgeStart] = useState(null);
+  const [draggingNode, setDraggingNode] = useState(null);
+  const [hoveredNode, setHoveredNode] = useState(null);
+  const getNodeState = (id) => {
+    if (animationState.visitingNodes?.has(id) || id === currentNode) return "visiting";
+    if (animationState.visitedNodes?.has(id) || visitedSet?.has(id)) return "visited";
+    return "unvisited";
+  };
+
+  const handleCanvasClick = useCallback(
+    (e) => {
+      if (!interactive || !onAddNode) return;
+      if (e.target !== svgRef.current) return;
+      const rect = svgRef.current.getBoundingClientRect();
+      const scaleX = rect.width / svgRef.current.clientWidth;
+      const scaleY = rect.height / svgRef.current.clientHeight;
+      onAddNode({ 
+        x: (e.clientX - rect.left) / scaleX, 
+        y: (e.clientY - rect.top) / scaleY 
+      });
+      setEdgeStart(null);
+    },
+    [interactive, onAddNode]
+  );
+
+  const handleNodeClick = useCallback(
+    (e, id) => {
+      if (!interactive || !onAddEdge) return;
+      e.stopPropagation();
+      if (edgeStart === null) {
+        setEdgeStart(id);
+      } else if (edgeStart === id) {
+        setEdgeStart(null);
+      } else {
+        // When adding an edge in weighted mode, default weight = 1
+        onAddEdge({ from: edgeStart, to: id, weight: 1 });
+        setEdgeStart(null);
+      }
+    },
+    [edgeStart, interactive, onAddEdge]
+  );
+  const handleNodeMouseDown = useCallback(
+  (e, id) => {
+    if (!interactive || !onMoveNode) return;
+
+    e.stopPropagation();
+
+    setDraggingNode(id);
+  },
+  [interactive, onMoveNode]
+);
+
+const handleMouseMove = useCallback(
+  (e) => {
+    if (!draggingNode || !onMoveNode || !svgRef.current) return;
+
+    const rect = svgRef.current.getBoundingClientRect();
+    const scaleX = rect.width / svgRef.current.clientWidth;
+    const scaleY = rect.height / svgRef.current.clientHeight;
+
+    onMoveNode(
+      draggingNode,
+      (e.clientX - rect.left) / scaleX,
+      (e.clientY - rect.top) / scaleY
+    );
+  },
+  [draggingNode, onMoveNode]
+);
+
+const handleTouchMove = useCallback(
+  (e) => {
+    if (!draggingNode || !onMoveNode || !svgRef.current) return;
+    
+    const touch = e.touches[0];
+    const rect = svgRef.current.getBoundingClientRect();
+    const scaleX = rect.width / svgRef.current.clientWidth;
+    const scaleY = rect.height / svgRef.current.clientHeight;
+
+    onMoveNode(
+      draggingNode,
+      (touch.clientX - rect.left) / scaleX,
+      (touch.clientY - rect.top) / scaleY
+    );
+  },
+  [draggingNode, onMoveNode]
+);
+
+const handleMouseUp = useCallback(() => {
+  setDraggingNode(null);
+}, []);
+  const handleNodeRightClick = useCallback(
+    (e, id) => {
+      if (!interactive || !onRemoveNode) return;
+      e.preventDefault();
+      onRemoveNode(id);
+      setEdgeStart(null);
+    },
+    [interactive, onRemoveNode]
+  );
+
+  const handleEdgeRightClick = useCallback(
+    (e, edgeIdx) => {
+      if (!interactive || !onRemoveEdge) return;
+      e.preventDefault();
+      const menu = window.confirm(
+        isDirected
+          ? "Right-click edge: OK = Reverse direction, Cancel = Delete edge"
+          : "Delete this edge?"
+      );
+      if (menu && isDirected && onReverseEdge) onReverseEdge(edgeIdx);
+      else if (!isDirected || !menu) onRemoveEdge(edgeIdx);
+    },
+    [interactive, isDirected, onRemoveEdge, onReverseEdge]
+  );
+
+  const nodeMap = Object.fromEntries(nodes.map((n) => [n.id, n]));
+
+  const formatMetric = (value) => {
+    if (value === undefined || value === null) return null;
+    return value === Infinity ? "Infinity" : String(value);
+  };
+
+  const getNodeTooltip = (node) => {
+    const metrics = [
+      ["Distance", animationState.distances?.[node.id]],
+      ["gScore", animationState.gScore?.[node.id]],
+      ["fScore", animationState.fScore?.[node.id]],
+    ]
+      .map(([label, value]) => [label, formatMetric(value)])
+      .filter(([, value]) => value !== null);
+
+    return {
+      state: getNodeState(node.id),
+      metrics,
+    };
+  };
+
+  const isActiveEdge = (edge) => {
+    const active = animationState.activeEdge;
+    const mstEdges = animationState.mstEdges || [];
+
+    return (
+      (active &&
+        ((active.from === edge.from && active.to === edge.to) ||
+          (!isDirected && active.from === edge.to && active.to === edge.from))) ||
+      mstEdges.some(
+        (mstEdge) =>
+          (mstEdge.from === edge.from && mstEdge.to === edge.to) ||
+          (!isDirected && mstEdge.from === edge.to && mstEdge.to === edge.from),
+      )
+    );
+  };
+
+  return (
+    <div className="relative w-full overflow-hidden">
+      <TransformWrapper>
+        <TransformComponent>
+        <svg
+          ref={svgRef}
+          width="100%"
+          height="100%"
+          className={className}
+          style={{ cursor: interactive && edgeStart !== null ? "crosshair" : "default", minHeight: 420 }}
+          onClick={handleCanvasClick}
+          onMouseMove={handleMouseMove}
+          onTouchMove={handleTouchMove}
+          onMouseUp={handleMouseUp}
+          onMouseLeave={handleMouseUp}
+          onTouchEnd={handleMouseUp}
+          onTouchCancel={handleMouseUp}
+        >
+      <defs>
+        <marker
+          id="arrowhead"
+          viewBox="0 0 10 10"
+          refX="8"
+          refY="5"
+          markerWidth="6"
+          markerHeight="6"
+          orient="auto-start-reverse"
+        >
+          <path
+            d="M2 1L8 5L2 9"
+            fill="none"
+            className="stroke-gray-500 dark:stroke-gray-400"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </marker>
+        <marker
+          id="arrowhead-active"
+          viewBox="0 0 10 10"
+          refX="8"
+          refY="5"
+          markerWidth="6"
+          markerHeight="6"
+          orient="auto-start-reverse"
+        >
+          <path
+            d="M2 1L8 5L2 9"
+            fill="none"
+            className="stroke-orange-500"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </marker>
+      </defs>
+
+      {edges.map((edge, idx) => {
+        const src = nodeMap[edge.from];
+        const tgt = nodeMap[edge.to];
+        if (!src || !tgt) return null;
+
+        if (edge.from === edge.to) {
+          return <SelfLoop key={idx} cx={src.x} cy={src.y} color="#22c55e" />;
+        }
+
+        const isActive = isActiveEdge(edge) || currentNode === edge.from || currentNode === edge.to;
+        const edgeClass = isActive ? "stroke-orange-500" : "stroke-gray-500 dark:stroke-gray-400";
+        const markerEnd = edge.directed
+          ? isActive ? "url(#arrowhead-active)" : "url(#arrowhead)"
+          : undefined;
+
+        const { x: ex, y: ey } = edge.directed
+          ? edgeEndpoint(src.x, src.y, tgt.x, tgt.y, NODE_RADIUS)
+          : { x: tgt.x, y: tgt.y };
+
+        return (
+          <g key={idx}>
+            <line
+              x1={src.x}
+              y1={src.y}
+              x2={ex}
+              y2={ey}
+              className={edgeClass}
+              strokeWidth={isActive ? 2 : 1.5}
+              markerEnd={markerEnd}
+              style={{ cursor: interactive ? "pointer" : "default" }}
+              onContextMenu={(e) => handleEdgeRightClick(e, idx)}
+            />
+            {isWeighted && (
+              <EdgeWeightLabel
+                x1={src.x}
+                y1={src.y}
+                x2={ex}
+                y2={ey}
+                weight={edge.weight ?? 1}
+                onWeightChange={(newWeight) => onUpdateEdgeWeight(idx, newWeight)}
+                readOnlyLabel={
+                  animationState?.flowData
+                    ? `${animationState.flowData.flow[edge.from]?.[edge.to] ?? "-"}/${animationState.flowData.capacity[edge.from]?.[edge.to] ?? "-"}`
+                    : undefined
+                }
+              />
+            )}
+          </g>
+        );
+      })}
+
+      {nodes.map((node) => {
+        const state = getNodeState(node.id);
+        const { fill, stroke } = COLORS[state];
+        const isSelected = edgeStart === node.id;
+
+        return (
+          <g
+            key={node.id}
+            className="nodrag"
+            onClick={(e) => handleNodeClick(e, node.id)}
+            onMouseDown={(e) => handleNodeMouseDown(e, node.id)}
+            onTouchStart={(e) => handleNodeMouseDown(e, node.id)}
+            onContextMenu={(e) => handleNodeRightClick(e, node.id)}
+            onMouseEnter={() => setHoveredNode(node.id)}
+            onMouseLeave={() => setHoveredNode(null)}
+            onFocus={() => setHoveredNode(node.id)}
+            onBlur={() => setHoveredNode(null)}
+            tabIndex={0}
+            style={{ cursor: interactive ? "pointer" : "default" }}
+          >
+            <title>
+              {`${node.label || node.id}: ${getNodeTooltip(node).state}`}
+            </title>
+            {isSelected && (
+              <circle
+                cx={node.x}
+                cy={node.y}
+                r={NODE_RADIUS + 6}
+                fill="none"
+                stroke="#f97316"
+                strokeWidth={2}
+                strokeDasharray="4 3"
+                opacity={0.8}
+              />
+            )}
+            <circle
+              cx={node.x}
+              cy={node.y}
+              r={NODE_RADIUS}
+              fill={fill}
+              stroke={stroke}
+              strokeWidth={2.5}
+            />
+            <text
+              x={node.x}
+              y={node.y}
+              textAnchor="middle"
+              dominantBaseline="central"
+              fill="#d1d5db"
+              fontSize={14}
+              fontWeight={500}
+              fontFamily="monospace"
+            >
+              {node.id}
+            </text>
+            {hoveredNode === node.id && (() => {
+              const tooltip = getNodeTooltip(node);
+              return (
+                <foreignObject
+                  x={node.x - 70}
+                  y={node.y - NODE_RADIUS - 82}
+                  width={140}
+                  height={72}
+                  className="pointer-events-none overflow-visible"
+                >
+                  <div className="rounded-md border border-slate-600 bg-slate-950/95 px-2 py-1.5 text-[10px] leading-4 text-white shadow-lg">
+                    <div className="font-semibold">{node.label || node.id}</div>
+                    <div>State: {tooltip.state}</div>
+                    {tooltip.metrics.map(([label, value]) => (
+                      <div key={label}>{label}: {value}</div>
+                    ))}
+                  </div>
+                </foreignObject>
+              );
+            })()}
+          </g>
+        );
+      })}
+
+      {hoveredNode && (() => {
+        const hNode = nodes.find((n) => n.id === hoveredNode);
+        if (!hNode || interactive) return null;
+
+        const info = [];
+        if (animationState?.distances?.[hNode.id] !== undefined) {
+          const d = animationState.distances[hNode.id];
+          info.push(`Distance: ${d === Infinity ? "∞" : d}`);
+        }
+        if (animationState?.pq) {
+          const item = animationState.pq.find((i) => i.node === hNode.id);
+          if (item) info.push(`In PQ (dist: ${item.dist})`);
+        }
+        if (animationState?.queue?.includes(hNode.id)) {
+          info.push("In Queue");
+        }
+        if (animationState?.stack?.includes(hNode.id)) {
+          info.push("In Stack");
+        }
+        if (animationState?.visitedNodes?.has(hNode.id)) {
+          info.push("State: Visited");
+        } else if (animationState?.visitingNodes?.has(hNode.id)) {
+          info.push("State: Visiting");
+        }
+
+        if (info.length === 0) info.push("State: Unvisited");
+
+        return (
+          <foreignObject
+            x={hNode.x - 60}
+            y={hNode.y - NODE_RADIUS - 60}
+            width={120}
+            height={60}
+            className="pointer-events-none"
+            style={{ overflow: "visible" }}
+          >
+            <div className="flex flex-col items-center justify-end h-full pb-2">
+              <div className="bg-slate-900/90 dark:bg-slate-800 text-white text-[10px] font-mono px-2 py-1.5 rounded-lg border border-slate-700/50 shadow-xl backdrop-blur-sm">
+                {info.map((line, i) => (
+                  <div key={i} className="whitespace-nowrap leading-tight">{line}</div>
+                ))}
+              </div>
+            </div>
+          </foreignObject>
+        );
+      })()}
+
+      {nodes.length === 0 && (
+        <text
+          x="50%"
+          y="50%"
+          textAnchor="middle"
+          dominantBaseline="central"
+          fill="#4b5563"
+          fontSize={14}
+        >
+          Click anywhere to add a node
+        </text>
+      )}
+
+      {edgeStart !== null && (
+        <text x={12} y={20} fill="#f97316" fontSize={12}>
+          Click another node to connect · click same node or press Esc to cancel
+        </text>
+      )}
+          </svg>
+        </TransformComponent>
+      </TransformWrapper>
+    </div>
+  );
+}
diff --git a/app/components/models/GraphModal.jsx b/src/app/components/models/GraphModal.jsx
old mode 100755
new mode 100644
similarity index 100%
rename from app/components/models/GraphModal.jsx
rename to src/app/components/models/GraphModal.jsx
diff --git a/app/components/models/LinkedListModal.jsx b/src/app/components/models/LinkedListModal.jsx
old mode 100755
new mode 100644
similarity index 100%
rename from app/components/models/LinkedListModal.jsx
rename to src/app/components/models/LinkedListModal.jsx
diff --git a/app/components/models/QueueModal.jsx b/src/app/components/models/QueueModal.jsx
old mode 100755
new mode 100644
similarity index 100%
rename from app/components/models/QueueModal.jsx
rename to src/app/components/models/QueueModal.jsx
diff --git a/app/components/models/StackModel.jsx b/src/app/components/models/StackModel.jsx
old mode 100755
new mode 100644
similarity index 100%
rename from app/components/models/StackModel.jsx
rename to src/app/components/models/StackModel.jsx
diff --git a/app/components/models/TreeModal.jsx b/src/app/components/models/TreeModal.jsx
old mode 100755
new mode 100644
similarity index 100%
rename from app/components/models/TreeModal.jsx
rename to src/app/components/models/TreeModal.jsx
diff --git a/src/app/components/navLinks.js b/src/app/components/navLinks.js
new file mode 100644
index 000000000..89026b8f3
--- /dev/null
+++ b/src/app/components/navLinks.js
@@ -0,0 +1,7 @@
+export const NAV_LINKS = [
+  { href: "/", label: "Home" },
+  { href: "/visualizer", label: "Visualizer" },
+  { href: "/practice", label: "Practice" },
+  { href: "/arena", label: "Arena" },
+];
+
diff --git a/src/app/components/navbar.jsx b/src/app/components/navbar.jsx
new file mode 100644
index 000000000..64d438d25
--- /dev/null
+++ b/src/app/components/navbar.jsx
@@ -0,0 +1,559 @@
+"use client";
+import Image from "next/image";
+import Link from "next/link";
+import { useState, useEffect, useRef } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { useUser } from "@/features/user/UserContext";
+import { supabase } from "@/lib/supabase";
+import { useTheme } from "@/app/hooks/useTheme";
+import {
+  Search,
+  Moon,
+  Sun,
+  Menu,
+  X,
+  ChevronDown,
+  ArrowRight,
+  Swords,
+  LogOut,
+  Bell,
+} from "lucide-react";
+
+import { NAV_LINKS } from "./navLinks";
+import NotificationDropdown from "./notifications/NotificationDropdown";
+import ProfileProgress from "./ui/ProfileProgress";
+import BottomNav from "./BottomNav";
+
+const MAX_AVATAR_URL_LENGTH = 512;
+
+function getInitials(name) {
+  if (!name) return "??";
+  const cleanName = name.includes("@") ? name.split("@")[0] : name;
+  const parts = cleanName.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+  return parts[0].slice(0, 2).toUpperCase();
+}
+
+function safeAvatarUrl(value) {
+  if (typeof value !== "string") return "";
+  if (value.startsWith("data:")) return "";
+  if (value.length > MAX_AVATAR_URL_LENGTH) return "";
+  return value;
+}
+
+export default function Navbar() {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [userMenuOpen, setUserMenuOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const { theme, mounted: themeMounted, toggleTheme } = useTheme();
+  const pathname = usePathname();
+  const router = useRouter();
+  
+  const { user, setUser } = useUser();
+  const userRef = useRef(null);
+  const scrollProgressRef = useRef(null);
+  const scrollAnimationFrameRef = useRef(null);
+  const avatarSrc = safeAvatarUrl(
+    user?.user_metadata?.avatar_url || user?.user_metadata?.picture
+  );
+  const displayName = user?.user_metadata?.name || "AlgoBuddy User";
+
+  useEffect(() => {
+    const updateScrollState = () => {
+      if (scrollAnimationFrameRef.current) {
+        cancelAnimationFrame(scrollAnimationFrameRef.current);
+      }
+
+      scrollAnimationFrameRef.current = window.requestAnimationFrame(() => {
+        setScrolled(window.scrollY > 4);
+
+        const scrollElement = document.scrollingElement || document.documentElement;
+        const scrollableDistance = Math.max(
+          scrollElement.scrollHeight - window.innerHeight,
+          0
+        );
+        const scrollProgress = scrollableDistance > 0
+          ? Math.min(window.scrollY / scrollableDistance, 1)
+          : 0;
+
+        if (scrollProgressRef.current) {
+          scrollProgressRef.current.style.setProperty(
+            "--scroll-progress",
+            String(scrollProgress)
+          );
+          scrollProgressRef.current.style.transform = `scaleX(${scrollProgress})`;
+        }
+      });
+    };
+
+    updateScrollState();
+    window.addEventListener("scroll", updateScrollState, { passive: true });
+    window.addEventListener("resize", updateScrollState);
+
+    return () => {
+      window.removeEventListener("scroll", updateScrollState);
+      window.removeEventListener("resize", updateScrollState);
+
+      if (scrollAnimationFrameRef.current) {
+        cancelAnimationFrame(scrollAnimationFrameRef.current);
+      }
+    };
+  }, [pathname]);
+
+  useEffect(() => {
+    if (scrollProgressRef.current) {
+      const scrollElement = document.scrollingElement || document.documentElement;
+      const scrollableDistance = Math.max(
+        scrollElement.scrollHeight - window.innerHeight,
+        0
+      );
+      const scrollProgress = scrollableDistance > 0
+        ? Math.min(window.scrollY / scrollableDistance, 1)
+        : 0;
+
+      scrollProgressRef.current.style.setProperty(
+        "--scroll-progress",
+        String(scrollProgress)
+      );
+      scrollProgressRef.current.style.transform = `scaleX(${scrollProgress})`;
+    }
+  }, [pathname]);
+
+  useEffect(() => {
+    const fn = (e) => {
+      if (
+        userRef.current &&
+        !userRef.current.contains(e.target)
+      ) {
+        setUserMenuOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", fn);
+
+    return () =>
+      document.removeEventListener("mousedown", fn);
+  }, []);
+
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        setMenuOpen(false);
+        setUserMenuOpen(false);
+      }
+    };
+
+    document.addEventListener("keydown", handleEscape);
+
+    return () =>
+      document.removeEventListener(
+        "keydown",
+        handleEscape
+      );
+  }, []);
+
+  useEffect(() => {
+    const handleGlobalEscape = () => {
+      setUserMenuOpen(false);
+      setMenuOpen(false);
+    };
+
+    window.addEventListener("global-escape", handleGlobalEscape);
+
+    return () => {
+      window.removeEventListener("global-escape", handleGlobalEscape);
+    };
+  }, []);
+
+  // FIX: Prevent background scrolling when mobile menu is open
+  useEffect(() => {
+    if (menuOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [menuOpen]);
+
+  const handleLogout = async () => {
+    await supabase.auth.signOut();
+    setUser(null);
+    if (typeof window !== "undefined") {
+      localStorage.removeItem("algobuddy_practice_progress");
+      localStorage.removeItem("algobuddy_current_streak");
+      localStorage.removeItem("algobuddy_best_streak");
+      localStorage.removeItem("algobuddy_last_active_date");
+      localStorage.removeItem("PROBLEM_BOOKMARKS");
+    }
+    setMenuOpen(false);
+    window.location.href = "/";
+  };
+
+  const isActive = (href) => {
+    if (!pathname) return false;
+    if (href.startsWith("http")) return false;
+
+    if (href.startsWith("/#")) {
+      return pathname === "/";
+    }
+
+    return (
+      pathname === href ||
+      pathname.startsWith(href + "/")
+    );
+  };
+
+  return (
+    <>
+      <nav
+        className={`fixed top-0 left-0 right-0 z-[9998] h-[72px] bg-white dark:bg-udemy-dark-bg flex items-center transition-all duration-200 relative ${scrolled
+            ? "border-b border-surface-200 dark:border-udemy-dark-border shadow-sm"
+            : "border-b border-transparent"
+          }`}
+      >
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-x-0 bottom-0 h-[2px] overflow-hidden"
+        >
+          <div
+            ref={scrollProgressRef}
+            className="h-full w-full origin-left bg-[var(--color-primary)] transition-transform duration-150 ease-out motion-reduce:transition-none"
+            style={{
+              willChange: "transform",
+              "--scroll-progress": 0,
+              transform: "scaleX(0)",
+            }}
+          />
+        </div>
+
+        <div className="w-full max-w-[1200px] mx-auto px-8 flex items-center justify-between h-full">
+          <Link
+            href="/"
+            className="brand-logo font-black text-[26px] text-surface-900 dark:text-white hover:opacity-75 transition-opacity focus-ring"
+          >
+            Algo<span className="text-primary font-black">Buddy</span>
+          </Link>
+
+          {/* Desktop Links with Auth Interception */}
+          <div className="hidden md:flex items-center gap-7">
+            {NAV_LINKS.map((l) => {
+              const dynamicHref = l.href;
+
+              return (
+                <Link
+                  key={l.href}
+                  href={dynamicHref}
+                  data-text={l.label}
+                  aria-current={isActive(l.href) ? "page" : undefined}
+                  className={`relative pb-2 text-[15px] flex flex-col items-center justify-center border-b-2 transition-colors duration-150 focus-ring ${isActive(l.href)
+                      ? "border-primary text-primary dark:text-primary font-semibold"
+                      : "border-transparent text-surface-600 dark:text-surface-400 font-medium hover:text-surface-900 dark:hover:text-white hover:border-surface-300 dark:hover:border-surface-600"
+                    }`}
+                >
+                  {l.label}
+                  {l.label === "Community" && process.env.NEXT_PUBLIC_SHOW_COMMUNITY_BADGE === "true" && (
+                    <span className="ml-1 px-1.5 py-0.5 text-[10px] font-bold text-white bg-purple-600 rounded">NEW</span>
+                  )}
+                </Link>
+              );
+            })}
+          </div>
+
+          <div className="hidden md:flex items-center gap-3">
+            <NotificationDropdown />
+
+            {user ? (
+              <div
+                ref={userRef}
+                className="relative"
+              >
+                <button
+                  onClick={() =>
+                    setUserMenuOpen((o) => !o)
+                  }
+                  className="flex items-center gap-2 rounded-full px-2 py-1.5 text-surface-700 dark:text-surface-200 hover:text-primary dark:hover:text-primary-light hover:bg-surface-100 dark:hover:bg-udemy-dark-surface transition-colors focus-ring"
+                  aria-label="Open account menu"
+                  aria-expanded={userMenuOpen}
+                >
+                  {avatarSrc ? (
+                    <Image
+                      src={avatarSrc}
+                      alt={`${displayName}'s avatar`}
+                      width={28}
+                      height={28}
+                      unoptimized
+                      className="w-7 h-7 rounded-full object-cover"
+                    />
+                  ) : (
+                    <div className="w-7 h-7 rounded-full bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light flex items-center justify-center text-[11px] font-bold">
+                      {getInitials(displayName || user.email)}
+                    </div>
+                  )}
+
+                  <span className="max-w-28 truncate text-sm font-semibold">
+                    {displayName}
+                  </span>
+                  <ChevronDown className="w-3.5 h-3.5 text-surface-500" aria-hidden="true" />
+                </button>
+
+                {userMenuOpen && (
+                  <div className="absolute right-0 top-[calc(100%+8px)] w-64 bg-white/95 dark:bg-udemy-dark-surface/95 backdrop-blur-md border border-surface-200/80 dark:border-surface-700/80 shadow-elevated rounded-2xl z-[9999] overflow-hidden transition-all duration-200 ease-out origin-top-right">
+                    <Link
+                      href="/profile"
+                      onClick={() =>
+                        setUserMenuOpen(false)
+                      }
+                      className="group mx-2 mt-2 mb-1 px-3 py-3 rounded-xl bg-surface-50/50 dark:bg-neutral-900/30 flex items-center gap-3 hover:bg-primary/5 dark:hover:bg-primary/10 transition-all duration-150 focus-ring"
+                      aria-label="Go to profile"
+                    >
+                      {avatarSrc ? (
+                        <Image
+                          src={avatarSrc}
+                          alt="avatar"
+                          width={36}
+                          height={36}
+                          unoptimized
+                          className="w-9 h-9 rounded-full object-cover ring-2 ring-primary/10"
+                        />
+                      ) : (
+                        <div className="w-9 h-9 rounded-full bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light flex items-center justify-center text-xs font-bold ring-2 ring-primary/10">
+                          {getInitials(displayName || user.email)}
+                        </div>
+                      )}
+                      <div className="min-w-0 flex-1 overflow-hidden">
+                        <p className="text-sm font-semibold text-surface-900 dark:text-white truncate">
+                          {displayName}
+                        </p>
+                        <p className="text-xs text-surface-500 dark:text-[#9e9e9e] truncate">
+                          {user.email}
+                        </p>
+                      </div>
+                      <ArrowRight className="w-4 h-4 shrink-0 text-surface-400 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 group-focus-visible:opacity-100 group-focus-visible:translate-x-0 group-hover:text-primary dark:group-hover:text-primary-light transition-all duration-150" />
+                    </Link>
+
+                    <ProfileProgress compact={true} />
+
+                    <div className="py-1.5 px-1.5 flex flex-col gap-0.5">
+                      <Link
+                        href="/arena"
+                        onClick={() =>
+                          setUserMenuOpen(false)
+                        }
+                        className="group flex items-center gap-3 px-3 py-2 text-[14px] font-medium text-surface-700 dark:text-[#f5f5f5] rounded-lg hover:text-primary dark:hover:text-primary-light hover:bg-primary/5 dark:hover:bg-primary/10 transition-all duration-150 focus-ring"
+                      >
+                        <Swords className="w-4 h-4 text-surface-400 group-hover:text-primary dark:group-hover:text-primary-light group-hover:scale-105 transition-all duration-150" />
+                        Arena
+                      </Link>
+                    </div>
+
+                    <div className="border-t border-surface-100 dark:border-udemy-dark-border px-1.5 py-1.5">
+                      <button
+                        onClick={() => {
+                          handleLogout();
+                          setUserMenuOpen(false);
+                        }}
+                        className="group w-full flex items-center gap-3 px-3 py-2 text-[14px] font-medium text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-950/20 transition-all duration-150 focus-ring"
+                      >
+                        <LogOut className="w-4 h-4 text-red-500 group-hover:scale-105 transition-all duration-150" />
+                        Log out
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <Link
+                href="/login"
+                className="h-[42px] px-7 flex items-center text-[15px] font-bold text-white bg-surface-900 dark:bg-white dark:text-surface-900 rounded-full hover:bg-primary dark:hover:bg-primary dark:hover:text-white transition-all duration-150 focus-ring"
+              >
+                Sign in
+              </Link>
+            )}
+
+            <button
+              onClick={toggleTheme}
+              
+              suppressHydrationWarning 
+              aria-label={
+                themeMounted
+                  ? `Switch to ${theme === "light"
+                    ? "dark"
+                    : "light"
+                  } mode`
+                  : "Toggle theme"
+              }
+              className="w-9 h-9 flex items-center justify-center rounded-full text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-udemy-dark-surface transition-colors focus-ring"
+            >
+              {!themeMounted ||
+                theme === "light" ? (
+                <Moon className="w-5 h-5" />
+              ) : (
+                <Sun className="w-5 h-5" />
+              )}
+            </button>
+          </div>
+
+          <div className="flex items-center gap-1.5 md:hidden">
+            <button
+              onClick={() => window.dispatchEvent(new CustomEvent("open-command-palette"))}
+              aria-label="Search site"
+              className="w-10 h-10 flex items-center justify-center text-surface-600 dark:text-surface-400 rounded-lg hover:bg-surface-100 dark:hover:bg-udemy-dark-surface transition-colors focus-ring"
+            >
+              <Search className="w-5 h-5" />
+            </button>
+            <button
+              onClick={toggleTheme}
+              aria-label={
+                themeMounted
+                  ? `Switch to ${theme === "light" ? "dark" : "light"} mode`
+                  : "Toggle theme"
+              }
+              className="w-10 h-10 flex items-center justify-center text-surface-600 dark:text-surface-400 rounded-lg hover:bg-surface-100 dark:hover:bg-udemy-dark-surface transition-colors focus-ring"
+            >
+              {!themeMounted || theme === "light" ? (
+                <Moon className="w-5 h-5" />
+              ) : (
+                <Sun className="w-5 h-5" />
+              )}
+            </button>
+            <button
+              onClick={() =>
+                setMenuOpen((o) => !o)
+              }
+              aria-label={menuOpen ? "Close menu" : "Open menu"}
+              aria-expanded={menuOpen}
+              aria-controls="mobile-menu"
+              className="w-10 h-10 flex items-center justify-center text-surface-600 dark:text-surface-400 rounded-lg hover:bg-surface-100 dark:hover:bg-udemy-dark-surface transition-colors focus-ring"
+            >
+              {menuOpen ? (
+                <X className="w-5 h-5" aria-hidden="true" />
+              ) : (
+                <Menu className="w-5 h-5" aria-hidden="true" />
+              )}
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      {/* Mobile Drawer Links with Auth Interception */}
+      {menuOpen && (
+        <div
+          id="mobile-menu"
+          className="fixed top-[72px] left-0 right-0 bottom-0 z-[9997] bg-white dark:bg-surface-900 overflow-y-auto border-t border-surface-200 dark:border-surface-700"
+        >
+          <div className="py-2">
+            {NAV_LINKS.map((l) => {
+              const dynamicHref = l.href;
+
+              return (
+                <Link
+                  key={l.href}
+                  href={dynamicHref}
+                  onClick={() =>
+                    setMenuOpen(false)
+                  }
+                  aria-current={
+                    isActive(l.href)
+                      ? "page"
+                      : undefined
+                  }
+                  className={`block px-6 py-3.5 text-[16px] font-medium transition-colors focus-ring ${isActive(l.href)
+                      ? "text-primary bg-primary/5 dark:bg-primary/10"
+                      : "text-surface-700 dark:text-surface-400 hover:bg-surface-50 dark:hover:bg-udemy-dark-surface hover:text-surface-900 dark:hover:text-white"
+                    }`}
+                >
+                  {l.label}
+                  {l.label === "Community" && process.env.NEXT_PUBLIC_SHOW_COMMUNITY_BADGE === "true" && (
+                    <span className="ml-1 px-1.5 py-0.5 text-[10px] font-bold text-white bg-purple-600 rounded">NEW</span>
+                  )}
+                </Link>
+              );
+            })}
+          </div>
+
+          <div className="px-6 py-4 border-t border-surface-200 dark:border-surface-700">
+            <button
+              type="button"
+              onClick={toggleTheme}
+              className="mb-3 h-[44px] w-full flex items-center justify-center gap-2 text-[15px] font-semibold text-surface-900 dark:text-white border border-surface-300 dark:border-udemy-dark-border rounded-full hover:border-primary hover:text-primary transition-all focus-ring"
+              aria-label={
+                themeMounted
+                  ? `Switch to ${theme === "light"
+                    ? "dark"
+                    : "light"
+                  } mode`
+                  : "Toggle theme"
+              }
+            >
+              {!themeMounted ||
+                theme === "light" ? (
+                <>
+                  <Moon className="w-4 h-4" />
+                  Dark mode
+                </>
+              ) : (
+                <>
+                  <Sun className="w-4 h-4" />
+                  Light mode
+                </>
+              )}
+            </button>
+
+            {user ? (
+              <div className="flex flex-col gap-2">
+                <p className="text-[13px] text-surface-500 dark:text-[#737373] truncate pb-1">
+                  {user.email}
+                </p>
+
+                <Link
+                  href="/profile"
+                  onClick={() =>
+                    setMenuOpen(false)
+                  }
+                  className="h-[44px] flex items-center justify-center text-[15px] font-semibold border border-surface-300 dark:border-udemy-dark-border rounded-full text-surface-900 dark:text-white hover:border-primary hover:text-primary transition-all focus-ring"
+                >
+                  Profile
+                </Link>
+
+                <Link
+                  href="/arena"
+                  onClick={() =>
+                    setMenuOpen(false)
+                  }
+                  className="h-[44px] flex items-center justify-center text-[15px] font-semibold border border-surface-300 dark:border-udemy-dark-border rounded-full text-surface-900 dark:text-white hover:border-primary hover:text-primary transition-all focus-ring"
+                >
+                  Arena
+                </Link>
+
+                <button
+                  onClick={handleLogout}
+                  className="h-[44px] text-[15px] font-semibold text-danger border border-danger/30 rounded-full hover:bg-danger/10 transition-all focus-ring"
+                >
+                  Log out
+                </button>
+              </div>
+            ) : (
+              <Link
+                href="/login"
+                onClick={() => setMenuOpen(false)}
+                className="h-[44px] flex items-center justify-center text-[15px] font-semibold text-surface-900 dark:text-white border border-surface-300 dark:border-udemy-dark-border rounded-full hover:border-primary hover:text-primary transition-all focus-ring"
+              >
+                Sign in
+              </Link>
+            )}
+          </div>
+        </div>
+        
+      )}
+
+      <BottomNav />
+      <div className="h-[72px]" />
+    </>
+  );
+}
+
diff --git a/src/app/components/notifications/NotificationBell.jsx b/src/app/components/notifications/NotificationBell.jsx
new file mode 100644
index 000000000..a78603a9a
--- /dev/null
+++ b/src/app/components/notifications/NotificationBell.jsx
@@ -0,0 +1,142 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { Bell } from "lucide-react";
+import { useUser } from "@/features/user/UserContext";
+
+export default function NotificationBell() {
+  const { user } = useUser();
+  const [notifications, setNotifications] = useState([]);
+  const [totalUnread, setTotalUnread] = useState(0);
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const dropdownRef = useRef(null);
+
+  const fetchNotifications = useCallback(async () => {
+    if (!user) return;
+    setLoading(true);
+    try {
+      const res = await fetch("/api/notifications?limit=5");
+      const data = await res.json();
+      setNotifications(data.notifications || []);
+      setTotalUnread(data.totalUnread || 0);
+    } catch (err) {
+      console.error("Failed to fetch notifications:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [user]);
+
+  useEffect(() => {
+    fetchNotifications();
+  }, [fetchNotifications]);
+
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  async function handleMarkAsRead(notificationId) {
+    try {
+      await fetch("/api/notifications", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ notificationIds: [notificationId] }),
+      });
+      fetchNotifications();
+    } catch (err) {
+      console.error("Failed to mark notification as read:", err);
+    }
+  }
+
+  async function handleMarkAllRead() {
+    try {
+      await fetch("/api/notifications", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({}),
+      });
+      fetchNotifications();
+    } catch (err) {
+      console.error("Failed to mark all as read:", err);
+    }
+  }
+
+  if (!user) return null;
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setOpen(!open)}
+        className="relative p-2 text-gray-600 hover:text-indigo-600 transition-colors rounded-lg hover:bg-gray-100"
+        aria-label={`Notifications${totalUnread > 0 ? ` (${totalUnread} unread)` : ""}`}
+      >
+        <Bell className="h-5 w-5" />
+        {totalUnread > 0 && (
+          <span className="absolute -top-0.5 -right-0.5 flex items-center justify-center w-4 h-4 text-[10px] font-bold text-white bg-red-500 rounded-full">
+            {totalUnread > 9 ? "9+" : totalUnread}
+          </span>
+        )}
+      </button>
+
+      {open && (
+        <div className="absolute right-0 mt-2 w-80 bg-white rounded-xl shadow-lg border border-gray-200 z-50">
+          <div className="flex items-center justify-between px-4 py-3 border-b border-gray-100">
+            <h3 className="font-semibold text-sm text-gray-900">Notifications</h3>
+            {totalUnread > 0 && (
+              <button
+                onClick={handleMarkAllRead}
+                className="text-xs text-indigo-600 hover:text-indigo-800 font-medium"
+              >
+                Mark all read
+              </button>
+            )}
+          </div>
+
+          <div className="max-h-80 overflow-y-auto">
+            {loading ? (
+              <div className="p-4 space-y-3">
+                {[...Array(3)].map((_, i) => (
+                  <div key={i} className="h-12 bg-gray-100 rounded-lg animate-pulse" />
+                ))}
+              </div>
+            ) : notifications.length === 0 ? (
+              <div className="p-6 text-center text-sm text-gray-500">
+                No notifications yet
+              </div>
+            ) : (
+              notifications.map((n) => (
+                <button
+                  key={n.id}
+                  onClick={() => {
+                    if (!n.read) handleMarkAsRead(n.id);
+                  }}
+                  className={`w-full text-left px-4 py-3 border-b border-gray-50 hover:bg-gray-50 transition-colors ${
+                    !n.read ? "bg-indigo-50/50" : ""
+                  }`}
+                >
+                  <p className="text-sm text-gray-800 line-clamp-2">{n.message}</p>
+                  <p className="text-xs text-gray-400 mt-1">
+                    {new Date(n.created_at).toLocaleDateString()}
+                  </p>
+                </button>
+              ))
+            )}
+          </div>
+
+          <a
+            href="/notifications"
+            className="block text-center text-sm text-indigo-600 font-medium py-3 border-t border-gray-100 hover:bg-gray-50 rounded-b-xl"
+          >
+            View all notifications
+          </a>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/components/notifications/NotificationCard.jsx b/src/app/components/notifications/NotificationCard.jsx
new file mode 100644
index 000000000..b01b6cb00
--- /dev/null
+++ b/src/app/components/notifications/NotificationCard.jsx
@@ -0,0 +1,135 @@
+import React from "react";
+import Link from "next/link";
+import { useNotifications } from "@/features/notifications/NotificationContext";
+import { 
+  Trophy, 
+  PenTool, 
+  BookOpen, 
+  Settings, 
+  Flame, 
+  MessageSquare, 
+  Megaphone,
+  Check,
+  Trash2,
+  Briefcase,
+  CheckCircle,
+  XCircle,
+} from "lucide-react";
+
+const getCategoryIcon = (category, message) => {
+  if (category === "Job Application") {
+    const lower = (message || "").toLowerCase();
+    if (lower.includes("accepted")) {
+      return <CheckCircle className="w-5 h-5 text-green-500" />;
+    }
+    if (lower.includes("rejected")) {
+      return <XCircle className="w-5 h-5 text-red-500" />;
+    }
+    return <Briefcase className="w-5 h-5 text-purple-500" />;
+  }
+  switch (category) {
+    case "Achievement": return <Trophy className="w-5 h-5 text-yellow-500" />;
+    case "Practice": return <PenTool className="w-5 h-5 text-blue-500" />;
+    case "Blog": return <BookOpen className="w-5 h-5 text-green-500" />;
+    case "System": return <Settings className="w-5 h-5 text-gray-500" />;
+    case "Streak": return <Flame className="w-5 h-5 text-orange-500" />;
+    case "Community": return <MessageSquare className="w-5 h-5 text-purple-500" />;
+    case "Announcement": return <Megaphone className="w-5 h-5 text-red-500" />;
+    case "Job Alert": return <Briefcase className="w-5 h-5 text-blue-500" />;
+    default: return <Megaphone className="w-5 h-5 text-primary" />;
+  }
+};
+
+const formatTimeAgo = (timestamp) => {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const seconds = Math.floor((now - date) / 1000);
+  
+  if (seconds < 60) return `${seconds} sec ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes} min ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours} hr ago`;
+  const days = Math.floor(hours / 24);
+  if (days === 1) return "Yesterday";
+  if (days < 7) return `${days} days ago`;
+  
+  return date.toLocaleDateString();
+};
+
+export default function NotificationCard({ notification, isDropdown = false }) {
+  const { markAsRead, deleteNotification } = useNotifications();
+  const { id, category, title, message, timestamp, read, actionUrl } = notification;
+
+  const handleMarkAsRead = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    markAsRead(id);
+  };
+
+  const handleDelete = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    deleteNotification(id);
+  };
+
+  const CardWrapper = actionUrl ? Link : "div";
+  const wrapperProps = actionUrl ? { href: actionUrl } : {};
+  
+  return (
+    <CardWrapper 
+      {...wrapperProps}
+      onClick={() => {
+        if (!read) markAsRead(id);
+      }}
+      className={`group relative flex items-start gap-4 p-4 transition-all duration-200 border-b border-surface-200 dark:border-udemy-dark-border last:border-0 hover:bg-surface-50 dark:hover:bg-udemy-dark-surface/50 ${
+        !read ? "bg-primary/5 dark:bg-primary/10" : ""
+      }`}
+    >
+      {/* Read Indicator */}
+      {!read && (
+        <div className="absolute left-0 top-0 bottom-0 w-1 bg-primary rounded-r-full" />
+      )}
+
+      {/* Icon */}
+      <div className={`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center bg-white dark:bg-[#1A1A24] border border-surface-200 dark:border-surface-700 shadow-sm ${!read ? 'ring-2 ring-primary/20' : ''}`}>
+        {getCategoryIcon(category, message)}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0 pr-8">
+        <div className="flex items-center justify-between mb-1">
+          <p className={`text-sm truncate ${!read ? "font-bold text-surface-900 dark:text-white" : "font-semibold text-surface-700 dark:text-surface-300"}`}>
+            {title}
+          </p>
+          <span className="text-xs text-surface-500 whitespace-nowrap ml-2">
+            {formatTimeAgo(timestamp)}
+          </span>
+        </div>
+        <p className={`text-sm line-clamp-2 ${!read ? "text-surface-700 dark:text-surface-300" : "text-surface-500 dark:text-surface-500"}`}>
+          {message}
+        </p>
+      </div>
+
+      {/* Actions (Hover) */}
+      <div className={`absolute right-4 top-4 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-white dark:bg-[#1A1A24] p-1 rounded-md shadow-sm border border-surface-200 dark:border-surface-700 ${isDropdown ? 'hidden sm:flex' : 'flex'}`}>
+        {!read && (
+          <button 
+            onClick={handleMarkAsRead}
+            className="p-1.5 text-surface-500 hover:text-primary dark:hover:text-primary rounded hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors"
+            title="Mark as read"
+          >
+            <Check className="w-4 h-4" />
+          </button>
+        )}
+        <button 
+          onClick={handleDelete}
+          className="p-1.5 text-surface-500 hover:text-danger dark:hover:text-danger rounded hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors"
+          title="Delete"
+        >
+          <Trash2 className="w-4 h-4" />
+        </button>
+      </div>
+    </CardWrapper>
+  );
+}
diff --git a/src/app/components/notifications/NotificationDropdown.jsx b/src/app/components/notifications/NotificationDropdown.jsx
new file mode 100644
index 000000000..6be017baf
--- /dev/null
+++ b/src/app/components/notifications/NotificationDropdown.jsx
@@ -0,0 +1,143 @@
+"use client";
+import React, { useState, useRef, useEffect } from "react";
+import Link from "next/link";
+import { Bell, ArrowRight } from "lucide-react";
+import { useNotifications } from "@/features/notifications/NotificationContext";
+import NotificationCard from "./NotificationCard";
+
+export default function NotificationDropdown() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState("all");
+  const dropdownRef = useRef(null);
+  
+  const { notifications, unreadCount, markAllAsRead } = useNotifications();
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  useEffect(() => {
+    const handleToggleNotifications = () => {
+      setIsOpen((open) => !open);
+    };
+    const handleGlobalEscape = () => {
+      setIsOpen(false);
+    };
+
+    window.addEventListener("toggle-notifications", handleToggleNotifications);
+    window.addEventListener("global-escape", handleGlobalEscape);
+
+    return () => {
+      window.removeEventListener("toggle-notifications", handleToggleNotifications);
+      window.removeEventListener("global-escape", handleGlobalEscape);
+    };
+  }, []);
+
+  const filteredNotifications = activeTab === "unread" 
+    ? notifications.filter(n => !n.read) 
+    : notifications;
+
+  return (
+    <div ref={dropdownRef} className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="relative w-9 h-9 flex items-center justify-center rounded-full hover:bg-surface-100 dark:hover:bg-udemy-dark-surface transition-colors"
+      >
+        <Bell className="w-5 h-5 text-surface-600 dark:text-surface-400" />
+        {unreadCount > 0 && (
+          <span className="absolute top-0 right-0 transform translate-x-1/4 -translate-y-1/4 bg-red-500 text-white text-[10px] font-bold rounded-full min-w-[18px] h-[18px] flex items-center justify-center px-1">
+            {unreadCount > 99 ? '99+' : unreadCount}
+          </span>
+        )}
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 mt-2 w-80 sm:w-96 bg-white dark:bg-udemy-dark-surface border border-surface-200 dark:border-surface-700 shadow-xl rounded-xl z-[9999] overflow-hidden flex flex-col max-h-[85vh]">
+          {/* Header */}
+          <div className="p-4 border-b border-surface-200 dark:border-surface-700 flex items-center justify-between">
+            <h3 className="font-bold text-surface-900 dark:text-white">Notifications</h3>
+            <div className="flex gap-2">
+              {unreadCount > 0 && (
+                <button 
+                  onClick={markAllAsRead}
+                  className="text-xs font-medium text-primary hover:text-primary-dark dark:hover:text-primary-light transition-colors"
+                >
+                  Mark all read
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Tabs */}
+          <div className="flex border-b border-surface-200 dark:border-surface-700">
+            <button
+              onClick={() => setActiveTab("all")}
+              className={`flex-1 py-2 text-sm font-semibold transition-colors border-b-2 ${
+                activeTab === "all" 
+                  ? "border-primary text-primary" 
+                  : "border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300"
+              }`}
+            >
+              All
+            </button>
+            <button
+              onClick={() => setActiveTab("unread")}
+              className={`flex-1 py-2 text-sm font-semibold transition-colors border-b-2 ${
+                activeTab === "unread" 
+                  ? "border-primary text-primary" 
+                  : "border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300"
+              }`}
+            >
+              Unread {unreadCount > 0 && `(${unreadCount})`}
+            </button>
+          </div>
+
+          {/* List */}
+          <div className="overflow-y-auto overflow-x-hidden flex-1 scrollbar-thin max-h-[60vh]">
+            {filteredNotifications.length > 0 ? (
+              <div className="flex flex-col">
+                {filteredNotifications.slice(0, 10).map((notification) => (
+                  <NotificationCard 
+                    key={notification.id} 
+                    notification={notification} 
+                    isDropdown={true}
+                  />
+                ))}
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center p-8 text-center">
+                <div className="w-12 h-12 bg-surface-100 dark:bg-surface-800 rounded-full flex items-center justify-center mb-3">
+                  <Bell className="w-6 h-6 text-surface-400" />
+                </div>
+                <p className="text-surface-600 dark:text-surface-400 font-medium">
+                  {activeTab === "unread" ? "No unread notifications" : "No notifications yet"}
+                </p>
+                <p className="text-sm text-surface-500 mt-1">
+                  We'll notify you when something arrives.
+                </p>
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="p-3 border-t border-surface-200 dark:border-surface-700 bg-surface-50 dark:bg-[#1A1A24]">
+            <Link 
+              href="/notifications" 
+              onClick={() => setIsOpen(false)}
+              className="flex items-center justify-center gap-2 w-full py-2 text-sm font-semibold text-surface-700 dark:text-surface-300 hover:text-primary dark:hover:text-primary transition-colors"
+            >
+              View all notifications
+              <ArrowRight className="w-4 h-4" />
+            </Link>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/components/practice/CompanyLogos.jsx b/src/app/components/practice/CompanyLogos.jsx
new file mode 100644
index 000000000..1d7b8bf16
--- /dev/null
+++ b/src/app/components/practice/CompanyLogos.jsx
@@ -0,0 +1,370 @@
+"use client";
+
+import React, { useState } from "react";
+import { X } from "lucide-react";
+
+// Dictionary of brand logo SVGs and display names
+const COMPANY_DEFS = {
+  google: {
+    name: "Google",
+    bg: "bg-white",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1">
+        <path fill="#EA4335" d="M12 5.04c1.66 0 3.2.57 4.38 1.69l3.27-3.27C17.67 1.58 15.02 1 12 1 7.24 1 3.22 3.73 1.25 7.7l3.97 3.08C6.18 7.79 8.85 5.04 12 5.04z" />
+        <path fill="#4285F4" d="M23.45 12.3c0-.82-.07-1.6-.21-2.3H12v4.35h6.43c-.28 1.44-1.1 2.66-2.33 3.48l3.6 2.79c2.1-1.94 3.75-4.8 3.75-8.32z" />
+        <path fill="#FBBC05" d="M5.22 10.78c-.24-.7-.37-1.46-.37-2.28s.13-1.58.37-2.28L1.25 3.14C.45 4.74 0 6.53 0 8.5s.45 3.76 1.25 5.36l3.97-3.08z" />
+        <path fill="#34A853" d="M12 23c3.24 0 5.97-1.07 7.96-2.91l-3.6-2.79c-1.01.68-2.31 1.09-3.96 1.09-3.15 0-5.82-2.75-6.78-5.74L1.25 15.73C3.22 19.7 7.24 23 12 23z" />
+      </svg>
+    )
+  },
+  microsoft: {
+    name: "Microsoft",
+    bg: "bg-white",
+    icon: (
+      <svg viewBox="0 0 23 23" className="w-full h-full p-1.5">
+        <rect x="0" y="0" width="10.5" height="10.5" fill="#F25022" />
+        <rect x="11.5" y="0" width="10.5" height="10.5" fill="#7FBA00" />
+        <rect x="0" y="11.5" width="10.5" height="10.5" fill="#00A4EF" />
+        <rect x="11.5" y="11.5" width="10.5" height="10.5" fill="#FFB900" />
+      </svg>
+    )
+  },
+  amazon: {
+    name: "Amazon",
+    bg: "bg-white",
+    icon: (
+      <svg viewBox="0 0 16 16" className="w-full h-full p-1">
+        {/* Official Amazon 'a' letter shape */}
+        <path fill="#000000" d="M10.813 11.968c.157.083.36.074.5-.05l.005.005a90 90 0 0 1 1.623-1.405c.173-.143.143-.372.006-.563l-.125-.17c-.345-.465-.673-.906-.673-1.791v-3.3l.001-.335c.008-1.265.014-2.421-.933-3.305C10.404.274 9.06 0 8.03 0 6.017 0 3.77.75 3.296 3.24c-.047.264.143.404.316.443l2.054.22c.19-.009.33-.196.366-.387.176-.857.896-1.271 1.703-1.271.435 0 .929.16 1.188.55.264.39.26.91.257 1.376v.432q-.3.033-.621.065c-1.113.114-2.397.246-3.36.67C3.873 5.91 2.94 7.08 2.94 8.798c0 2.2 1.387 3.298 3.168 3.298 1.506 0 2.328-.354 3.489-1.54l.167.246c.274.405.456.675 1.047 1.166ZM6.03 8.431C6.03 6.627 7.647 6.3 9.177 6.3v.57c.001.776.002 1.434-.396 2.133-.336.595-.87.961-1.465.961-.812 0-1.286-.619-1.286-1.533" />
+        {/* Official Amazon Smile arrow line */}
+        <path fill="#FF9900" d="M.435 12.174c2.629 1.603 6.698 4.084 13.183.997.28-.116.475.078.199.431C13.538 13.96 11.312 16 7.57 16 3.832 16 .968 13.446.094 12.386c-.24-.275.036-.4.199-.299z" />
+        {/* Official Amazon Smile arrowhead dimple */}
+        <path fill="#FF9900" d="M13.828 11.943c.567-.07 1.468-.027 1.645.204.135.176-.004.966-.233 1.533-.23.563-.572.961-.762 1.115s-.333.094-.23-.137c.105-.23.684-1.663.455-1.963-.213-.278-1.177-.177-1.625-.13l-.09.009q-.142.013-.233.024c-.193.021-.245.027-.274-.032-.074-.209.779-.556 1.347-.623" />
+      </svg>
+    )
+  },
+  meta: {
+    name: "Meta",
+    bg: "bg-white",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1">
+        <path fill="#0081FB" d="M16.5 6c-1.8 0-3.4 1-4.5 2.6C10.9 7 9.3 6 7.5 6 4.5 6 2 8.5 2 11.5S4.5 17 7.5 17c1.8 0 3.4-1 4.5-2.6 1.1 1.6 2.7 2.6 4.5 2.6 3 0 5.5-2.5 5.5-5.5S19.5 6 16.5 6zm0 9c-1.5 0-2.8-.9-3.5-2.2l-.3-.5-.3.5c-.7 1.3-2 2.2-3.5 2.2-2.1 0-3.8-1.7-3.8-3.8s1.7-3.8 3.8-3.8c1.5 0 2.8.9 3.5 2.2l.3.5.3-.5c.7-1.3 2-2.2 3.5-2.2 2.1 0 3.8 1.7 3.8 3.8s-1.7 3.8-3.8 3.8z" />
+      </svg>
+    )
+  },
+  apple: {
+    name: "Apple",
+    bg: "bg-white text-black dark:text-white",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1.5" fill="currentColor">
+        <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 4.17c.66-.81 1.11-1.93.99-3.06-1 .04-2.2.67-2.92 1.51-.62.73-1.16 1.87-1.01 2.98 1.1.09 2.22-.53 2.94-1.43z" />
+      </svg>
+    )
+  },
+  adobe: {
+    name: "Adobe",
+    bg: "bg-white",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1" fill="#FF0000">
+        <path d="M14.58 2H22v20zM9.42 2H2v20zM12 9.24L17.75 22h-3.32l-2.07-4.9h-4.7l2.06 4.9H6.28z" />
+      </svg>
+    )
+  },
+  netflix: {
+    name: "Netflix",
+    bg: "bg-[#141414]",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1.5" fill="#E50914">
+        <path d="M5.5 2h4l4.5 13.5V2h4v20h-4L9.5 8.5V22h-4z" />
+      </svg>
+    )
+  },
+  uber: {
+    name: "Uber",
+    bg: "bg-black",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1.5" fill="#FFFFFF">
+        <path d="M12 18.5c-3.6 0-6.5-2.9-6.5-6.5V5.5h2.2V12c0 2.4 1.9 4.3 4.3 4.3s4.3-1.9 4.3-4.3V5.5h2.2V12c0 3.6-2.9 6.5-6.5 6.5z" />
+      </svg>
+    )
+  },
+  airbnb: {
+    name: "Airbnb",
+    bg: "bg-white",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1" fill="#FF5A5F">
+        <path d="M12 2C11.5 2 11 2.3 10.7 2.7L2.3 16C1.9 16.6 2 17.5 2.7 17.9C3 18.1 3.3 18.2 3.6 18.2H8.3C8.6 18.2 8.8 18 9 17.7C9.5 16.5 10.7 15.7 12 15.7C13.3 15.7 14.5 16.5 15 17.7C15.2 18 15.4 18.2 15.7 18.2H20.4C21.2 18.2 21.8 17.6 21.8 16.8C21.8 16.5 21.7 16.2 21.6 16L13.3 2.7C13 2.3 12.5 2 12 2ZM12 13.7C10.6 13.7 9.5 12.6 9.5 11.2C9.5 9.8 10.6 8.7 12 8.7C13.4 8.7 14.5 9.8 14.5 11.2C14.5 12.6 13.4 13.7 12 13.7Z" />
+      </svg>
+    )
+  },
+  atlassian: {
+    name: "Atlassian",
+    bg: "bg-white",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1" fill="#0052CC">
+        <path d="M13.8 2.3c-.3-.4-.8-.4-1.1 0l-9.8 9.8c-.4.4-.4.9 0 1.3l2.8 2.8c.4.4.9.4 1.3 0l5.7-5.7 5.7 5.7c.4.4.9.4 1.3 0l2.8-2.8c.4-.4.4-.9 0-1.3l-8.7-9.8z" />
+      </svg>
+    )
+  },
+  salesforce: {
+    name: "Salesforce",
+    bg: "bg-white",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1" fill="#00A1E0">
+        <path d="M19.3 12.1c-.2-.1-.5-.2-.7-.2-.2-1.3-1.3-2.3-2.6-2.3-.6 0-1.1.2-1.5.5C13.8 8.6 12 7.5 10 7.5c-2.3 0-4.2 1.6-4.6 3.8-.4-.2-.9-.3-1.4-.3-1.6 0-2.9 1.3-2.9 2.9s1.3 2.9 2.9 2.9h15.3c1.7 0 3-1.3 3-3s-1.3-2.9-3-2.9v1.2z" />
+      </svg>
+    )
+  },
+  flipkart: {
+    name: "Flipkart",
+    bg: "bg-white",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1">
+        <circle cx="12" cy="12" r="11" fill="#2874F0" />
+        <path d="M9 7h6a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V8a1 1 0 0 1 1-1zm3-3a3 3 0 0 1 3 3H9a3 3 0 0 1 3-3z" fill="#FFE11B" />
+      </svg>
+    )
+  },
+  meesho: {
+    name: "Meesho",
+    bg: "bg-[#FF3E6C]",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1.5">
+        <path d="M6 16V8h2.5l2 3.5 2-3.5H15v8h-2.2v-4.5l-1.8 3h-.8l-1.8-3V16H6z" fill="#FFFFFF" />
+      </svg>
+    )
+  },
+  phonepe: {
+    name: "PhonePe",
+    bg: "bg-[#5F259F]",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1">
+        <text x="12" y="16.5" fill="#FFFFFF" fontSize="13" fontWeight="bold" fontFamily="sans-serif" textAnchor="middle">Pe</text>
+      </svg>
+    )
+  },
+  razorpay: {
+    name: "Razorpay",
+    bg: "bg-white",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1" fill="#0B44CD">
+        <path d="M18.5 2h-13c-.8 0-1.5.7-1.5 1.5v17c0 .8.7 1.5 1.5 1.5h6l6-10V3.5c0-.8-.7-1.5-1.5-1.5zm-5 13l-4 4V13h4v2zm2-5h-6V7h6v3z" />
+      </svg>
+    )
+  },
+  swiggy: {
+    name: "Swiggy",
+    bg: "bg-[#FC8019]",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1">
+        <path d="M12 5.5c-3 0-5 2-5 4 0 .8.3 1.5.8 2.2L12 18.5l4.2-6.8c.5-.7.8-1.4.8-2.2 0-2-2-4-5-4zm0 2.5c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z" fill="#FFFFFF" />
+      </svg>
+    )
+  },
+  zomato: {
+    name: "Zomato",
+    bg: "bg-[#E23744]",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1">
+        <path d="M12 7.5c-2.5 0-4.5 2-4.5 4.5s2 4.5 4.5 4.5 4.5-2 4.5-4.5-2-4.5-4.5-4.5zm0 6.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" fill="#FFFFFF" />
+      </svg>
+    )
+  },
+  tcs: {
+    name: "TCS",
+    bg: "bg-[#00519E]",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1">
+        <text x="12" y="15.5" fill="#FFFFFF" fontSize="9" fontWeight="black" fontFamily="sans-serif" textAnchor="middle">TCS</text>
+      </svg>
+    )
+  },
+  infosys: {
+    name: "Infosys",
+    bg: "bg-[#007CC3]",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1">
+        <text x="12" y="16.5" fill="#FFFFFF" fontSize="13" fontWeight="bold" fontFamily="sans-serif" textAnchor="middle">I</text>
+      </svg>
+    )
+  },
+  wipro: {
+    name: "Wipro",
+    bg: "bg-white",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1" stroke="#003594" strokeWidth="0.5">
+        <text x="12" y="15.5" fill="#003594" fontSize="10" fontWeight="black" fontFamily="sans-serif" textAnchor="middle">W</text>
+      </svg>
+    )
+  },
+  accenture: {
+    name: "Accenture",
+    bg: "bg-[#A100FF]",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1">
+        <path d="M7 6l7 6-7 6h4l7-6-7-6H7z" fill="#FFFFFF" />
+      </svg>
+    )
+  },
+  qualcomm: {
+    name: "Qualcomm",
+    bg: "bg-[#3253DC]",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1">
+        <text x="12" y="16.5" fill="#FFFFFF" fontSize="12" fontWeight="bold" fontFamily="sans-serif" textAnchor="middle">Q</text>
+      </svg>
+    )
+  },
+  nvidia: {
+    name: "NVIDIA",
+    bg: "bg-[#76B900]",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1">
+        <path d="M12 6.5C8 6.5 5 9.5 5 12s3 5.5 7 5.5 7-3 7-5.5-3-5.5-7-5.5zm0 8.5c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z" fill="#FFFFFF" />
+      </svg>
+    )
+  },
+  intel: {
+    name: "Intel",
+    bg: "bg-[#0068B5]",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1">
+        <text x="12" y="15.5" fill="#FFFFFF" fontSize="9" fontWeight="black" fontFamily="sans-serif" textAnchor="middle">intel</text>
+      </svg>
+    )
+  },
+  amd: {
+    name: "AMD",
+    bg: "bg-black",
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-full h-full p-1">
+        <path d="M14 6l6 6-6 6h-3.5l6-6-6-6H14z" fill="#ED1C24" />
+        <path d="M10 6l6 6-6 6H6.5l6-6-6-6H10z" fill="#FFFFFF" />
+      </svg>
+    )
+  }
+};
+
+export default function CompanyLogos({ companies = [] }) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  if (!companies || companies.length === 0) {
+    return <span className="text-xs text-surface-300 dark:text-neutral-700 font-semibold">-</span>;
+  }
+
+  const limit = 3;
+  const displayCompanies = companies.slice(0, limit);
+  const extraCount = companies.length - limit;
+
+  // Tooltip content listing all companies
+  const allNames = companies
+    .map((c) => COMPANY_DEFS[c.toLowerCase()]?.name || c)
+    .join(", ");
+
+  return (
+    <>
+      <div
+        onClick={() => setIsModalOpen(true)}
+        className="flex items-center justify-center -space-x-2 select-none relative group/container cursor-pointer hover:opacity-90 active:scale-[0.98] transition-all"
+        title="Click to view all asking companies"
+      >
+        {displayCompanies.map((cKey, idx) => {
+          const item = COMPANY_DEFS[cKey.toLowerCase()];
+          if (!item) return null;
+
+          return (
+            <div
+              key={idx}
+              className="group relative"
+              style={{ zIndex: limit - idx }}
+            >
+              {/* Logo Circle */}
+              <div
+                className={`w-7 h-7 rounded-full border-2 border-white dark:border-[#2d2f31] flex items-center justify-center overflow-hidden shadow-sm transition-all duration-200 hover:scale-125 hover:z-30 ${item.bg}`}
+              >
+                {item.icon}
+              </div>
+
+              {/* Individual Tooltip */}
+              <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 pointer-events-none opacity-0 scale-90 group-hover:opacity-100 group-hover:scale-100 transition-all duration-200 bg-neutral-950 dark:bg-white text-white dark:text-neutral-950 text-[10px] font-extrabold px-2 py-1 rounded shadow-lg whitespace-nowrap z-50">
+                {item.name}
+              </div>
+            </div>
+          );
+        })}
+
+        {/* Extra companies count badge */}
+        {extraCount > 0 && (
+          <div className="group relative" style={{ zIndex: 0 }}>
+            <div
+              className="w-7 h-7 rounded-full border-2 border-white dark:border-[#2d2f31] bg-neutral-900 dark:bg-neutral-800 text-white flex items-center justify-center text-[10px] font-black shadow-sm transition-all duration-200 hover:scale-125 hover:z-30"
+            >
+              +{extraCount}
+            </div>
+
+            {/* Tooltip listing the remaining companies */}
+            <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 pointer-events-none opacity-0 scale-90 group-hover:opacity-100 group-hover:scale-100 transition-all duration-200 bg-neutral-950 dark:bg-white text-white dark:text-neutral-950 text-[10px] font-extrabold px-2.5 py-1 rounded shadow-lg whitespace-nowrap z-50">
+              +{extraCount} more companies
+            </div>
+          </div>
+        )}
+
+        {/* Full Container Tooltip (triggers if hovering the container but not specific icons) */}
+        <div className="absolute top-full left-1/2 -translate-x-1/2 mt-1.5 pointer-events-none opacity-0 group-hover/container:opacity-100 transition-opacity duration-300 bg-neutral-900/90 dark:bg-white/90 text-white dark:text-neutral-950 text-[9px] px-2 py-0.5 rounded shadow whitespace-nowrap z-40 hidden md:block">
+          Click to view all
+        </div>
+      </div>
+
+      {/* Interactive Companies List Modal */}
+      {isModalOpen && (
+        <div
+          className="fixed inset-0 bg-neutral-900/60 backdrop-blur-sm z-[99999] flex items-center justify-center p-4 transition-all duration-300 animate-in fade-in"
+          onClick={() => setIsModalOpen(false)}
+        >
+          <div
+            className="bg-white dark:bg-[#1c1d1f] text-surface-900 dark:text-white rounded-3xl p-6 border border-surface-200 dark:border-neutral-800 shadow-2xl max-w-md w-full animate-in fade-in zoom-in-95 duration-200"
+            onClick={(e) => e.stopPropagation()} // Prevent closing when clicking inside modal
+          >
+            {/* Header */}
+            <div className="flex justify-between items-center mb-6 border-b border-surface-100 dark:border-neutral-800 pb-3">
+              <div>
+                <h3 className="text-[17px] font-black tracking-tight">Asking Companies</h3>
+                <p className="text-[11px] text-surface-500 dark:text-surface-400 font-semibold mt-0.5">Frequently asked in interviews at:</p>
+              </div>
+              <button
+                onClick={() => setIsModalOpen(false)}
+                className="w-8 h-8 flex items-center justify-center rounded-full bg-surface-50 hover:bg-surface-100 dark:bg-neutral-800 dark:hover:bg-neutral-700 transition-colors text-surface-500 dark:text-neutral-300"
+              >
+                <X size={16} />
+              </button>
+            </div>
+
+            {/* Grid of Companies */}
+            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+              {companies.map((cKey, idx) => {
+                const item = COMPANY_DEFS[cKey.toLowerCase()];
+                if (!item) return null;
+
+                return (
+                  <div
+                    key={idx}
+                    className="flex items-center gap-2.5 p-2 rounded-xl bg-surface-50/60 dark:bg-neutral-800 border border-surface-100 dark:border-neutral-800/80 shadow-sm hover:scale-[1.03] transition-all duration-200"
+                  >
+                    <div
+                      className={`w-8 h-8 rounded-full border border-surface-200 dark:border-neutral-700 flex items-center justify-center overflow-hidden flex-shrink-0 ${item.bg}`}
+                    >
+                      {item.icon}
+                    </div>
+                    <span className="text-xs font-bold text-surface-800 dark:text-neutral-200 truncate">
+                      {item.name}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/app/components/practice/PracticeDashboard.jsx b/src/app/components/practice/PracticeDashboard.jsx
new file mode 100644
index 000000000..f497185e4
--- /dev/null
+++ b/src/app/components/practice/PracticeDashboard.jsx
@@ -0,0 +1,284 @@
+"use client";
+
+import React, { useMemo } from "react";
+import { 
+  Flame, 
+  Trophy, 
+  Target,
+  CheckCircle2,
+  Clock,
+  Activity,
+  Award,
+  Sun,
+  Calendar,
+  CalendarDays
+} from "lucide-react";
+
+export default function PracticeDashboard({
+  dailyChallenge,
+  solvedCount = 0,
+  dailySolved = 0,
+  weeklySolved = 0,
+  monthlySolved = 0,
+  dailyGoal = 3,
+  weeklyGoal = 10,
+  monthlyGoal = 50,
+  streakDays = 0,
+  bestStreak = 0,
+  solved = 0,
+  attempted = 0,
+  remaining = 0,
+  total = 0,
+  estimatedTime = "0h 0m",
+  easyCount = 0,
+  mediumCount = 0,
+  hardCount = 0,
+  totalEasy = 1,
+  totalMed = 1,
+  totalHard = 1,
+  companiesCount = 0,
+  activityData = []
+}) {
+
+  const achievementBadges = [
+    { name: "7 Day Streak", icon: "🔥", unlocked: streakDays >= 7 },
+    { name: "30 Day Streak", icon: "🏆", unlocked: streakDays >= 30 },
+    { name: "50 Problems", icon: "🎯", unlocked: solvedCount >= 50 },
+    { name: "100 Problems", icon: "🚀", unlocked: solvedCount >= 100 },
+    { name: "Fast Solver", icon: "⚡", unlocked: false },
+    { name: "Bug Squasher", icon: "🐛", unlocked: false },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 xl:grid-cols-12 gap-6 animate-in fade-in duration-300 select-none pb-8">
+      
+      {/* ======================= */}
+      {/* LEFT COLUMN (History)   */}
+      {/* ======================= */}
+      <div className="xl:col-span-8 flex flex-col gap-6">
+        
+        {/* Practice History Table Header */}
+        <div>
+          <h2 className="text-xl font-black text-slate-800 dark:text-neutral-200 mb-4 flex items-center gap-2">
+            <Activity className="text-primary" size={24} />
+            Practice History
+          </h2>
+          
+          <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-2xl overflow-hidden shadow-sm">
+            <div className="hidden sm:grid grid-cols-12 gap-4 p-4 border-b border-slate-100 dark:border-neutral-800/80 bg-slate-50/50 dark:bg-neutral-900/20 text-xs font-bold text-slate-500 dark:text-neutral-400">
+              <div className="col-span-3">Time</div>
+              <div className="col-span-6">Problem</div>
+              <div className="col-span-3 text-right">Status</div>
+            </div>
+
+            <div className="flex flex-col">
+              {activityData.length === 0 ? (
+                <div className="p-8 text-center text-sm font-bold text-slate-400 dark:text-neutral-600">
+                  No recent activity recorded.
+                </div>
+              ) : (
+                activityData.map((act, idx) => (
+                  <div key={idx} className="grid grid-cols-1 sm:grid-cols-12 gap-y-2 gap-x-4 p-4 border-b border-slate-50 dark:border-neutral-800/50 last:border-0 hover:bg-slate-50/50 dark:hover:bg-neutral-800/30 transition-colors items-center">
+                    
+                    {/* Time */}
+                    <div className="sm:col-span-3 text-xs font-bold text-slate-500 dark:text-neutral-400">
+                      {act.time}
+                    </div>
+                    
+                    {/* Problem Name & Difficulty (Extracted from status color logic or just hardcoded for mockup feel) */}
+                    <div className="sm:col-span-6 flex flex-col justify-center">
+                      <span className="text-sm font-bold text-slate-800 dark:text-neutral-200 line-clamp-1 hover:text-primary transition-colors cursor-pointer">
+                        {act.title}
+                      </span>
+                      <span className={`text-[10px] font-black uppercase tracking-wider mt-0.5 ${
+                        act.statusColor?.includes('emerald') ? 'text-emerald-500' :
+                        act.statusColor?.includes('amber') ? 'text-amber-500' :
+                        act.statusColor?.includes('red') ? 'text-red-500' : 'text-primary'
+                      }`}>
+                        {act.statusColor?.includes('emerald') ? 'Easy' : act.statusColor?.includes('amber') ? 'Medium' : 'Hard'}
+                      </span>
+                    </div>
+
+                    {/* Status */}
+                    <div className="sm:col-span-3 sm:text-right flex items-center sm:justify-end gap-2">
+                      <div className={`w-1.5 h-1.5 rounded-full ${act.statusColor || 'bg-slate-300'}`} />
+                      <span className={`text-xs font-bold ${
+                        act.statusColor?.includes('emerald') ? 'text-slate-700 dark:text-neutral-300' : 'text-slate-500 dark:text-neutral-500'
+                      }`}>
+                        {act.statusColor?.includes('emerald') ? 'Accepted' : 'Attempted'}
+                      </span>
+                    </div>
+
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ======================= */}
+      {/* RIGHT COLUMN (Widgets)  */}
+      {/* ======================= */}
+      <div className="xl:col-span-4 flex flex-col gap-6">
+        
+        {/* 1. Challenge of the Day (Banner) */}
+        {dailyChallenge && (
+          <div className="bg-gradient-to-r from-indigo-500 via-purple-600 to-fuchsia-600 rounded-2xl p-6 text-white shadow-md relative overflow-hidden flex flex-col justify-center min-h-[140px]">
+            <div className="relative z-10">
+              <div className="flex items-center gap-2 mb-1">
+                <Target size={16} className="text-purple-200" />
+                <h3 className="text-[10px] font-black uppercase tracking-widest text-purple-200">
+                  Challenge of the Day
+                </h3>
+              </div>
+              <h2 className="text-xl font-black mt-1 mb-1 leading-tight line-clamp-2">
+                {dailyChallenge.name}
+              </h2>
+              <p className="text-xs font-medium text-purple-200">
+                {dailyChallenge.difficulty} • {dailyChallenge.topic}
+              </p>
+              <a
+                href={dailyChallenge.practiceUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-block mt-4 px-4 py-2 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-lg text-xs font-black transition-colors border border-white/20"
+              >
+                Solve Now
+              </a>
+            </div>
+            <div className="absolute right-0 top-0 w-32 h-32 bg-white/10 rounded-full blur-2xl -translate-y-1/2 translate-x-1/3" />
+          </div>
+        )}
+
+        {/* 2. Total Solved Widget (Session Stats) */}
+        <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-5 shadow-sm">
+          <div className="flex justify-between items-start mb-6">
+            <div>
+              <span className="text-xs font-bold text-slate-500 dark:text-neutral-400 block mb-1">Session Solved</span>
+              <div className="flex items-baseline gap-2">
+                <span className="text-4xl font-black text-slate-800 dark:text-white leading-none">{solved}</span>
+                <span className="text-xs font-bold text-slate-400">/{total}</span>
+              </div>
+            </div>
+            <div className="text-right">
+              <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest block mb-1">Time</span>
+              <span className="text-sm font-bold text-slate-700 dark:text-neutral-300 flex items-center gap-1">
+                <Clock size={12} /> {estimatedTime}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            {/* Easy Bar */}
+            <div>
+              <div className="flex justify-between text-[11px] font-bold mb-1">
+                <span className="text-emerald-600 dark:text-emerald-400">Easy</span>
+                <span className="text-slate-600 dark:text-neutral-300">{easyCount} <span className="text-slate-400">/ {totalEasy}</span></span>
+              </div>
+              <div className="w-full bg-slate-100 dark:bg-neutral-800 h-1.5 rounded-full overflow-hidden">
+                <div className="bg-emerald-500 h-full rounded-full" style={{ width: `${(easyCount/totalEasy)*100 || 5}%` }} />
+              </div>
+            </div>
+            {/* Medium Bar */}
+            <div>
+              <div className="flex justify-between text-[11px] font-bold mb-1">
+                <span className="text-amber-600 dark:text-amber-400">Medium</span>
+                <span className="text-slate-600 dark:text-neutral-300">{mediumCount} <span className="text-slate-400">/ {totalMed}</span></span>
+              </div>
+              <div className="w-full bg-slate-100 dark:bg-neutral-800 h-1.5 rounded-full overflow-hidden">
+                <div className="bg-amber-500 h-full rounded-full" style={{ width: `${(mediumCount/totalMed)*100 || 5}%` }} />
+              </div>
+            </div>
+            {/* Hard Bar */}
+            <div>
+              <div className="flex justify-between text-[11px] font-bold mb-1">
+                <span className="text-red-600 dark:text-red-400">Hard</span>
+                <span className="text-slate-600 dark:text-neutral-300">{hardCount} <span className="text-slate-400">/ {totalHard}</span></span>
+              </div>
+              <div className="w-full bg-slate-100 dark:bg-neutral-800 h-1.5 rounded-full overflow-hidden">
+                <div className="bg-red-500 h-full rounded-full" style={{ width: `${(hardCount/totalHard)*100 || 5}%` }} />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 3. Four Square Widgets (Goals / Progress) */}
+        <div className="grid grid-cols-2 gap-4">
+          {/* Daily Goal */}
+          <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-4 shadow-sm flex flex-col">
+            <div className="flex items-center gap-1.5 mb-1">
+              <Sun size={14} className="text-primary" />
+              <span className="text-xs font-bold text-slate-500 dark:text-neutral-400">Daily Goal</span>
+            </div>
+            <span className="text-2xl font-black text-slate-800 dark:text-white mb-2">{dailySolved}<span className="text-sm text-slate-400">/{dailyGoal}</span></span>
+            <div className="w-full bg-slate-100 dark:bg-neutral-800 h-1 rounded-full mt-auto">
+              <div className="bg-primary h-full rounded-full" style={{ width: `${Math.min(100, (dailySolved/dailyGoal)*100)}%` }} />
+            </div>
+          </div>
+          
+          {/* Current Streak */}
+          <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-4 shadow-sm flex flex-col">
+            <span className="text-xs font-bold text-slate-500 dark:text-neutral-400 mb-1">Current Streak</span>
+            <div className="flex items-center gap-1 mb-2 text-amber-500">
+              <Flame size={20} className="fill-amber-500/20" />
+              <span className="text-2xl font-black text-slate-800 dark:text-white">{streakDays}</span>
+            </div>
+            <span className="text-[10px] font-bold text-slate-400 mt-auto">Best: {bestStreak} days</span>
+          </div>
+
+          {/* Weekly Goal */}
+          <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-4 shadow-sm flex flex-col">
+            <div className="flex items-center gap-1.5 mb-1">
+              <Calendar size={14} className="text-indigo-500" />
+              <span className="text-xs font-bold text-slate-500 dark:text-neutral-400">Weekly Goal</span>
+            </div>
+            <span className="text-2xl font-black text-slate-800 dark:text-white mb-2">{weeklySolved}<span className="text-sm text-slate-400">/{weeklyGoal}</span></span>
+            <div className="w-full bg-slate-100 dark:bg-neutral-800 h-1 rounded-full mt-auto">
+              <div className="bg-indigo-500 h-full rounded-full" style={{ width: `${Math.min(100, (weeklySolved/weeklyGoal)*100)}%` }} />
+            </div>
+          </div>
+
+          {/* Monthly Goal */}
+          <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-4 shadow-sm flex flex-col">
+            <div className="flex items-center gap-1.5 mb-1">
+              <CalendarDays size={14} className="text-fuchsia-500" />
+              <span className="text-xs font-bold text-slate-500 dark:text-neutral-400">Monthly Goal</span>
+            </div>
+            <span className="text-2xl font-black text-slate-800 dark:text-white mb-2">{monthlySolved}<span className="text-sm text-slate-400">/{monthlyGoal}</span></span>
+            <div className="w-full bg-slate-100 dark:bg-neutral-800 h-1 rounded-full mt-auto">
+              <div className="bg-fuchsia-500 h-full rounded-full" style={{ width: `${Math.min(100, (monthlySolved/monthlyGoal)*100)}%` }} />
+            </div>
+          </div>
+        </div>
+
+        {/* 4. Badges (Circular Packing equivalent) */}
+        <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-5 shadow-sm">
+          <h3 className="text-xs font-black text-slate-800 dark:text-neutral-200 uppercase tracking-widest mb-4 flex items-center gap-2">
+            <Award size={14} className="text-amber-500" />
+            Achievements
+          </h3>
+          <div className="grid grid-cols-3 gap-2">
+            {achievementBadges.map((badge) => (
+              <div
+                key={badge.name}
+                className={`flex flex-col items-center justify-center aspect-square rounded-xl border transition-all ${
+                  badge.unlocked
+                    ? "bg-emerald-50/50 dark:bg-emerald-900/10 border-emerald-100 dark:border-emerald-900/30"
+                    : "bg-slate-50 dark:bg-neutral-800/50 border-slate-100 dark:border-neutral-800 opacity-50 grayscale"
+                }`}
+                title={badge.name}
+              >
+                <span className="text-2xl mb-1">{badge.icon}</span>
+                <span className="text-[8px] font-black text-slate-600 dark:text-neutral-400 text-center uppercase tracking-tighter leading-tight px-1">
+                  {badge.name}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/practice/PracticeNotebook.jsx b/src/app/components/practice/PracticeNotebook.jsx
new file mode 100644
index 000000000..cdebdc9d1
--- /dev/null
+++ b/src/app/components/practice/PracticeNotebook.jsx
@@ -0,0 +1,429 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+import { 
+  NotebookPen, 
+  Trash2, 
+  Plus, 
+  Search, 
+  Sparkles, 
+  Download, 
+  Check, 
+  Bold, 
+  Italic, 
+  Code,
+  List,
+  FileText
+} from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { useNotesManager } from "@/app/hooks/useNotesManager";
+
+const TOPICS_LIST = [
+  "General",
+  "Array",
+  "Linked List",
+  "Stack",
+  "Queue",
+  "Recursion",
+  "Tree",
+  "HashMap",
+  "Graph",
+  "AI Algorithms",
+  "Quiz",
+  "Dynamic Programming"
+];
+
+const mdComponents = {
+  code({ inline, className, children, ...props }) {
+    if (inline) {
+      return (
+        <code className="px-1.5 py-0.5 rounded bg-slate-100 dark:bg-neutral-800 text-purple-600 dark:text-purple-300 font-mono text-sm font-semibold" {...props}>
+          {children}
+        </code>
+      );
+    }
+    return (
+      <pre className="overflow-x-auto p-3 rounded-xl bg-neutral-950 text-neutral-200 text-sm font-mono my-2 border border-neutral-800/80">
+        <code>{children}</code>
+      </pre>
+    );
+  },
+  h1: ({ children }) => <h3 className="text-lg sm:text-xl font-extrabold text-slate-800 dark:text-white mt-2.5 mb-1">{children}</h3>,
+  h2: ({ children }) => <h3 className="text-base sm:text-lg font-bold text-slate-850 dark:text-neutral-200 mt-2 mb-1">{children}</h3>,
+  h3: ({ children }) => <h4 className="text-sm sm:text-base font-bold text-slate-800 dark:text-neutral-300 mt-1.5 mb-0.5">{children}</h4>,
+  p: ({ children }) => <p className="text-base text-slate-600 dark:text-neutral-400 leading-relaxed mb-2 last:mb-0 whitespace-pre-wrap">{children}</p>,
+  ul: ({ children }) => <ul className="my-2 pl-4 list-disc space-y-1 text-base text-slate-600 dark:text-neutral-400">{children}</ul>,
+  ol: ({ children }) => <ol className="my-2 pl-4 list-decimal space-y-1 text-base text-slate-600 dark:text-neutral-400">{children}</ol>,
+  li: ({ children }) => <li className="leading-relaxed whitespace-pre-wrap">{children}</li>,
+  strong: ({ children }) => <strong className="font-bold text-slate-850 dark:text-white">{children}</strong>,
+  a: ({ href, children }) => (
+    <a href={href} target="_blank" rel="noopener noreferrer" className="text-primary dark:text-purple-400 hover:underline">
+      {children}
+    </a>
+  )
+};
+
+const preprocessMarkdown = (text) => {
+  if (!text) return "";
+  // Forgive missing space after heading hash characters (e.g. #hello -> # hello)
+  return text.replace(/^(#{1,6})([a-zA-Z0-9])/gm, "$1 $2");
+};
+
+export default function PracticeNotebook() {
+  const [editMode, setEditMode] = useState("write"); // 'write' or 'preview'
+  const [copied, setCopied] = useState(false);
+
+  const textareaRef = useRef(null);
+
+  const {
+    notes,
+    activeNote,
+    filteredNotes,
+    activeNoteId,
+    setActiveNoteId,
+    searchQuery,
+    setSearchQuery,
+    filterByTopicOnly,
+    setFilterByTopicOnly,
+    currentTopic,
+    createNote,
+    updateNote,
+    deleteNote
+  } = useNotesManager();
+
+  // Format Helper for markdown tags
+  const insertFormatting = (prefix, suffix = "") => {
+    const textarea = textareaRef.current;
+    if (!textarea || !activeNote) return;
+
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const text = textarea.value;
+    const selectedText = text.substring(start, end);
+    const replacement = prefix + selectedText + suffix;
+
+    const newContent = text.substring(0, start) + replacement + text.substring(end);
+    updateNote(activeNote.id, { content: newContent });
+
+    setTimeout(() => {
+      textarea.focus();
+      textarea.setSelectionRange(start + prefix.length, start + prefix.length + selectedText.length);
+    }, 50);
+  };
+
+  // Copy raw content
+  const handleCopy = () => {
+    if (!activeNote) return;
+    navigator.clipboard.writeText(activeNote.content).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  // Download Markdown file
+  const handleDownload = () => {
+    if (!activeNote) return;
+    const blob = new Blob([activeNote.content], { type: "text/markdown;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute("download", `${activeNote.title.toLowerCase().replace(/\s+/g, "-")}.md`);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  // Ask AI / Chatbot integration
+  const handleDiscussWithAI = () => {
+    if (!activeNote) return;
+    const prompt = `Here are my study notes about the topic "${activeNote.topic}" (Note title: "${activeNote.title}"):\n\n\`\`\`markdown\n${activeNote.content}\n\`\`\`\n\nCan you review these notes, highlight any mistakes or key optimizations, and suggest 2 representative practice questions?`;
+    
+    const event = new CustomEvent("chatbot-explain", {
+      detail: { prompt }
+    });
+    window.dispatchEvent(event);
+  };
+
+  return (
+    <div className="w-full h-[600px] bg-white dark:bg-[#1a1b1e] rounded-3xl border border-slate-100 dark:border-neutral-800/80 shadow-sm flex flex-col overflow-hidden animate-in fade-in duration-300">
+      {/* Header */}
+      <div className="flex justify-between items-center px-6 py-5 border-b border-slate-100 dark:border-neutral-800/60 bg-slate-50/50 dark:bg-neutral-950/20 shrink-0 select-none">
+        <div className="flex items-center gap-2.5">
+          <div className="w-8 h-8 rounded-xl bg-purple-500/10 flex items-center justify-center">
+            <NotebookPen size={18} className="text-primary" />
+          </div>
+          <div>
+            <h2 className="font-black text-sm text-slate-800 dark:text-white">
+              Algorithm Notebook
+            </h2>
+            <p className="text-[10px] text-slate-400 dark:text-neutral-500 font-bold">
+              Draft hints, solutions, and key takeaways for DSA topics
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Body Layout */}
+      <div className="flex flex-row flex-1 min-h-0">
+        
+        {/* Sidebar (Note Selection & Creation) */}
+        <div className="flex flex-col w-[140px] sm:w-[220px] border-r border-slate-100 dark:border-neutral-800/60 p-4 bg-slate-50/30 dark:bg-neutral-950/10 shrink-0">
+          
+          {/* Add Note Button */}
+          <button
+            onClick={() => createNote(`Note ${notes.length + 1}`, "")}
+            className="w-full py-2.5 bg-primary hover:bg-primary-dark text-white rounded-xl text-xs font-bold transition flex items-center justify-center gap-1.5 shadow-md shadow-primary/10 mb-4"
+          >
+            <Plus size={14} />
+            <span>New Note</span>
+          </button>
+
+          {/* Search Box */}
+          <div className="relative mb-3">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
+            <input
+              type="text"
+              placeholder="Search..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-9 pr-3 py-1.5 rounded-xl border border-slate-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-xs font-medium outline-none focus:border-primary transition"
+            />
+          </div>
+
+          {/* Context Filter Checkbox */}
+          {currentTopic !== "General" && (
+            <label className="flex items-center gap-2 cursor-pointer select-none text-[10px] font-bold text-slate-500 dark:text-neutral-400 mb-3 border-b border-slate-100 dark:border-neutral-800 pb-2">
+              <input
+                type="checkbox"
+                checked={filterByTopicOnly}
+                onChange={(e) => setFilterByTopicOnly(e.target.checked)}
+                className="accent-primary w-3.5 h-3.5 cursor-pointer"
+              />
+              <span className="truncate">This Topic ({currentTopic})</span>
+            </label>
+          )}
+
+          {/* Notes Scroll Container */}
+          <div className="flex-1 overflow-y-auto space-y-1.5 pr-1 scrollbar-thin">
+            {filteredNotes.length === 0 ? (
+              <div className="text-[10px] text-center text-slate-400 dark:text-neutral-600 font-bold py-8">
+                No notes found
+              </div>
+            ) : (
+              filteredNotes.map((n) => {
+                const isActive = n.id === activeNoteId;
+                return (
+                  <div
+                    key={n.id}
+                    onClick={() => {
+                      setActiveNoteId(n.id);
+                      setEditMode("write");
+                    }}
+                    className={`p-3 rounded-xl cursor-pointer transition select-none text-left border ${
+                      isActive
+                        ? "bg-purple-500/10 border-primary text-primary dark:text-purple-300 font-black animate-in fade-in duration-200"
+                        : "bg-transparent border-transparent hover:bg-slate-100 dark:hover:bg-neutral-800/40 text-slate-650 dark:text-neutral-400"
+                    }`}
+                  >
+                    <div className="text-xs truncate leading-tight mb-1">{n.title}</div>
+                    <div className="flex justify-between items-center gap-1">
+                      <span className="text-[9px] text-slate-450 dark:text-neutral-500 truncate max-w-[70px] uppercase font-bold">
+                        {n.topic}
+                      </span>
+                      <span className="text-[9px] text-slate-350 dark:text-neutral-600 shrink-0 font-medium">
+                        {new Date(n.updatedAt).toLocaleDateString([], { month: "short", day: "numeric" })}
+                      </span>
+                    </div>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </div>
+
+        {/* Note Editor Workspace Pane */}
+        <div className="flex flex-col flex-1 p-5 min-w-0 bg-white dark:bg-[#1a1b1e]">
+          {activeNote ? (
+            <>
+              {/* Active Note Title Bar */}
+              <div className="flex items-center gap-3 border-b border-slate-100 dark:border-neutral-800 pb-3 mb-3 shrink-0">
+                <input
+                  type="text"
+                  value={activeNote.title}
+                  onChange={(e) => updateNote(activeNote.id, { title: e.target.value })}
+                  placeholder="Title"
+                  className="flex-1 bg-transparent text-base font-bold outline-none border-b border-transparent focus:border-purple-200/55 dark:text-white"
+                />
+
+                {/* Topic Dropdown tag */}
+                <div className="relative">
+                  <select
+                    value={activeNote.topic}
+                    onChange={(e) => updateNote(activeNote.id, { topic: e.target.value })}
+                    className="bg-purple-500/10 border-transparent text-primary dark:text-purple-300 text-xs font-black py-1.5 pl-3 pr-6 rounded-lg outline-none cursor-pointer appearance-none"
+                  >
+                    {TOPICS_LIST.map((t) => (
+                      <option key={t} value={t} className="bg-white dark:bg-neutral-900 text-slate-800 dark:text-white font-medium">
+                        {t}
+                      </option>
+                    ))}
+                  </select>
+                  <div className="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-primary border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-primary" />
+                </div>
+              </div>
+
+              {/* Mode Toggles & Formatting Toolbar */}
+              <div className="flex items-center justify-between gap-4 border-b border-slate-50 dark:border-neutral-800 pb-2 mb-2 shrink-0 select-none">
+                <div className="flex items-center gap-1">
+                  {/* Write / Preview Tabs */}
+                  <button
+                    onClick={() => setEditMode("write")}
+                    className={`px-3 py-1 rounded-lg text-xs font-bold transition ${
+                      editMode === "write"
+                        ? "bg-primary text-white shadow-sm"
+                        : "text-slate-400 hover:text-slate-650 dark:text-neutral-500 dark:hover:text-neutral-300"
+                    }`}
+                  >
+                    Write
+                  </button>
+                  <button
+                    onClick={() => setEditMode("preview")}
+                    className={`px-3 py-1 rounded-lg text-xs font-bold transition ${
+                      editMode === "preview"
+                        ? "bg-primary text-white shadow-sm"
+                        : "text-slate-400 hover:text-slate-650 dark:text-neutral-500 dark:hover:text-neutral-300"
+                    }`}
+                  >
+                    Preview
+                  </button>
+                </div>
+
+                {/* Editor Toolbar (Only in Write Mode) */}
+                {editMode === "write" && (
+                  <div className="flex items-center gap-1.5">
+                    <button
+                      onClick={() => insertFormatting("**", "**")}
+                      title="Bold"
+                      className="p-1.5 rounded hover:bg-slate-100 dark:hover:bg-neutral-800 text-slate-450 hover:text-slate-800"
+                    >
+                      <Bold size={14} />
+                    </button>
+                    <button
+                      onClick={() => insertFormatting("*", "*")}
+                      title="Italic"
+                      className="p-1.5 rounded hover:bg-slate-100 dark:hover:bg-neutral-800 text-slate-450 hover:text-slate-800"
+                    >
+                      <Italic size={14} />
+                    </button>
+                    <button
+                      onClick={() => insertFormatting("```\n", "\n```")}
+                      title="Code Block"
+                      className="p-1.5 rounded hover:bg-slate-100 dark:hover:bg-neutral-800 text-slate-450 hover:text-slate-800"
+                    >
+                      <Code size={14} />
+                    </button>
+                    <button
+                      onClick={() => insertFormatting("- ")}
+                      title="List"
+                      className="p-1.5 rounded hover:bg-slate-100 dark:hover:bg-neutral-800 text-slate-450 hover:text-slate-800"
+                    >
+                      <List size={14} />
+                    </button>
+                  </div>
+                )}
+              </div>
+
+              {/* Core Editor/Preview Container */}
+              <div className="flex-1 min-h-0 overflow-y-auto mb-3">
+                {editMode === "write" ? (
+                  <textarea
+                    ref={textareaRef}
+                    value={activeNote.content}
+                    onChange={(e) => updateNote(activeNote.id, { content: e.target.value })}
+                    placeholder="Write note contents... (Supports Markdown)"
+                    className="w-full h-full p-4 rounded-2xl border border-slate-100 dark:border-neutral-800/80 bg-slate-50/20 dark:bg-neutral-900/30 text-base leading-relaxed resize-none outline-none focus:border-primary/45 transition dark:text-neutral-200"
+                  />
+                ) : (
+                  <div className="w-full h-full p-5 rounded-2xl border border-slate-50 dark:border-neutral-800 bg-slate-50/20 dark:bg-neutral-950/10 overflow-y-auto text-left leading-relaxed text-base">
+                    {activeNote.content.trim() ? (
+                      <ReactMarkdown remarkPlugins={[remarkGfm]} components={mdComponents}>
+                        {preprocessMarkdown(activeNote.content)}
+                      </ReactMarkdown>
+                    ) : (
+                      <div className="text-slate-450 dark:text-neutral-500 font-bold italic py-12 text-center select-none">
+                        Note is empty. Write something to preview.
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+
+              {/* Workspace Action Bar */}
+              <div className="flex items-center justify-between border-t border-slate-100 dark:border-neutral-800 pt-3 shrink-0 select-none">
+                
+                {/* Discuss with AI */}
+                <button
+                  onClick={handleDiscussWithAI}
+                  className="px-3.5 py-2 bg-primary/10 hover:bg-primary/20 text-primary dark:text-purple-400 rounded-xl text-xs font-black transition flex items-center gap-1.5"
+                >
+                  <Sparkles size={13} className="fill-primary dark:fill-purple-400" />
+                  <span>Discuss with AlgoBot</span>
+                </button>
+
+                {/* Note Utilities */}
+                <div className="flex items-center gap-2.5">
+                  {/* Copy */}
+                  <button
+                    onClick={handleCopy}
+                    className="p-2.5 border border-slate-150 dark:border-neutral-800 rounded-xl hover:bg-slate-50 dark:hover:bg-neutral-800 text-slate-450 transition-colors"
+                    title="Copy raw markdown text"
+                  >
+                    {copied ? <Check size={14} className="text-emerald-500" /> : <FileText size={14} />}
+                  </button>
+                  
+                  {/* Download */}
+                  <button
+                    onClick={handleDownload}
+                    className="p-2.5 border border-slate-150 dark:border-neutral-800 rounded-xl hover:bg-slate-50 dark:hover:bg-neutral-800 text-slate-450 transition-colors"
+                    title="Download Markdown note (.md)"
+                  >
+                    <Download size={14} />
+                  </button>
+
+                  {/* Delete */}
+                  <button
+                    onClick={() => deleteNote(activeNote.id)}
+                    className="p-2.5 border border-red-100 dark:border-red-950/20 bg-red-50/50 dark:bg-red-950/10 rounded-xl text-red-500 hover:bg-red-100 dark:hover:bg-red-950/30 transition-colors ml-1"
+                    title="Delete note"
+                  >
+                    <Trash2 size={14} />
+                  </button>
+                </div>
+
+              </div>
+            </>
+          ) : (
+            /* Workspace Empty State */
+            <div className="flex-1 flex flex-col justify-center items-center text-center p-8 select-none">
+              <div className="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-3">
+                <NotebookPen size={22} className="text-primary" />
+              </div>
+              <h3 className="font-bold text-sm text-slate-800 dark:text-white mb-1.5">No active note</h3>
+              <p className="text-xs text-slate-400 dark:text-neutral-500 max-w-[240px] leading-normal mb-4">
+                Create a new note or select an existing one from the sidebar to begin drafting.
+              </p>
+              <button
+                onClick={() => createNote(`Note ${notes.length + 1}`, "")}
+                className="px-4 py-2 bg-primary text-white rounded-xl text-xs font-bold transition hover:bg-primary-dark shadow-md shadow-primary/10"
+              >
+                Create Note
+              </button>
+            </div>
+          )}
+        </div>
+
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/practice/PracticeRightSidebar.jsx b/src/app/components/practice/PracticeRightSidebar.jsx
new file mode 100644
index 000000000..c6ab7d278
--- /dev/null
+++ b/src/app/components/practice/PracticeRightSidebar.jsx
@@ -0,0 +1,100 @@
+"use client";
+
+import React, { useMemo } from "react";
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+
+export default function PracticeRightSidebar({
+  solved = 28,
+  attempted = 16,
+  remaining = 75,
+  total = 119,
+  onViewProgress
+}) {
+  const percentage = useMemo(() => {
+    if (total === 0) return 0;
+    return Math.round((solved / total) * 100);
+  }, [solved, total]);
+
+  // Circular progress dimensions
+  const radius = 38;
+  const stroke = 8;
+  const normalizedRadius = radius - stroke * 2;
+  const circumference = normalizedRadius * 2 * Math.PI;
+  const strokeDashoffset = circumference - (percentage / 100) * circumference;
+
+  return (
+    <aside className="w-full h-full flex-shrink-0 flex flex-col gap-6 select-none">
+      {/* Session Progress Card */}
+      <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-5 shadow-sm h-full flex flex-col justify-between">
+        <h3 className="text-xs font-black text-slate-800 dark:text-neutral-200 uppercase tracking-widest mb-4">
+          Session Progress
+        </h3>
+
+        <div className="flex items-center gap-6 mb-5">
+          {/* Radial Chart */}
+          <div className="relative w-24 h-24 flex items-center justify-center flex-shrink-0">
+            <svg className="w-full h-full transform -rotate-90">
+              {/* Background circle */}
+              <circle
+                stroke="rgba(164, 53, 240, 0.08)"
+                fill="transparent"
+                strokeWidth={stroke}
+                r={normalizedRadius}
+                cx="48"
+                cy="48"
+              />
+              {/* Foreground circle */}
+              <circle
+                stroke="#a435f0"
+                fill="transparent"
+                strokeWidth={stroke}
+                strokeDasharray={circumference + " " + circumference}
+                style={{ strokeDashoffset }}
+                strokeLinecap="round"
+                r={normalizedRadius}
+                cx="48"
+                cy="48"
+              />
+            </svg>
+            <div className="absolute flex flex-col items-center">
+              <span className="text-base font-black text-slate-800 dark:text-white leading-none">
+                {percentage}%
+              </span>
+            </div>
+          </div>
+
+          {/* Details */}
+          <div className="flex flex-col gap-2.5">
+            <div className="flex items-center gap-2">
+              <div className="w-2.5 h-2.5 rounded-full bg-emerald-500" />
+              <span className="text-xs text-slate-500 dark:text-neutral-400 font-bold">
+                <strong className="text-slate-800 dark:text-white mr-1">{solved}</strong> Solved
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-2.5 h-2.5 rounded-full bg-amber-500" />
+              <span className="text-xs text-slate-500 dark:text-neutral-400 font-bold">
+                <strong className="text-slate-800 dark:text-white mr-1">{attempted}</strong> Attempted
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-2.5 h-2.5 rounded-full bg-purple-500" />
+              <span className="text-xs text-slate-500 dark:text-neutral-400 font-bold">
+                <strong className="text-slate-800 dark:text-white mr-1">{remaining}</strong> Remaining
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <button 
+          onClick={onViewProgress}
+          className="w-full flex items-center justify-center gap-1.5 py-2.5 bg-purple-500/5 hover:bg-purple-500/10 text-primary dark:bg-purple-950/20 dark:hover:bg-purple-950/30 rounded-xl text-xs font-black transition border border-purple-500/10"
+        >
+          <span>View Detailed Progress</span>
+          <ArrowRight size={14} />
+        </button>
+      </div>
+    </aside>
+  );
+}
diff --git a/src/app/components/practice/PracticeSessionBanner.jsx b/src/app/components/practice/PracticeSessionBanner.jsx
new file mode 100644
index 000000000..4d735940e
--- /dev/null
+++ b/src/app/components/practice/PracticeSessionBanner.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React, { useState } from "react";
+import { 
+  ArrowLeft, 
+  Bookmark, 
+  BookmarkCheck,
+  Play, 
+  Users, 
+  MoreHorizontal, 
+  Clock, 
+  HelpCircle, 
+  Calendar 
+} from "lucide-react";
+
+export default function PracticeSessionBanner({
+  title = "DSA Sheet - Most Important Interview Questions",
+  description = "All DSA topics covered – from basic to advanced. Perfect for interview preparation.",
+  difficulty = "Beginner",
+  problemCount = 119,
+  duration = "4h 30m",
+  lastUpdated = "Last updated 2 days ago",
+  isBookmarked = false,
+  onBookmarkToggle,
+  onStartSession,
+  onGroupStudy,
+  onBackToSessions
+}) {
+  const [saved, setSaved] = useState(isBookmarked);
+
+  const handleSaveToggle = () => {
+    setSaved(!saved);
+    if (onBookmarkToggle) onBookmarkToggle(!saved);
+  };
+
+  return (
+    <div className="w-full h-full bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-5 shadow-sm flex flex-col md:flex-row items-center justify-between gap-6 relative overflow-hidden select-none">
+      
+      {/* Content Side */}
+      <div className="flex-1 space-y-4">
+
+        {/* Title */}
+        <div className="flex items-center gap-3.5">
+          <h1 className="text-xl md:text-2xl font-black text-slate-800 dark:text-white leading-tight">
+            {title}
+          </h1>
+        </div>
+
+        {/* Tags Row */}
+        <div className="flex flex-wrap items-center gap-2 text-[11px] font-bold">
+          <span className="px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
+            {difficulty}
+          </span>
+          <span className="px-3 py-1 rounded-full bg-slate-50 dark:bg-neutral-800 border border-slate-100 dark:border-neutral-750 text-slate-500 dark:text-neutral-400 flex items-center gap-1.5">
+            <HelpCircle size={12} />
+            {problemCount} Problems
+          </span>
+          <span className="px-3 py-1 rounded-full bg-slate-50 dark:bg-neutral-800 border border-slate-100 dark:border-neutral-750 text-slate-500 dark:text-neutral-400 flex items-center gap-1.5">
+            <Clock size={12} />
+            {duration}
+          </span>
+          <span className="px-3 py-1 rounded-full bg-slate-50 dark:bg-neutral-800 border border-slate-100 dark:border-neutral-750 text-slate-500 dark:text-neutral-400 flex items-center gap-1.5">
+            <Calendar size={12} />
+            {lastUpdated}
+          </span>
+        </div>
+
+        {/* Description */}
+        <p className="text-xs md:text-sm text-slate-400 dark:text-neutral-500 font-medium leading-relaxed max-w-xl">
+          {description}
+        </p>
+
+        {/* Action Buttons */}
+        <div className="flex flex-wrap items-center gap-3 pt-2">
+          <button
+            onClick={onStartSession}
+            className="flex items-center gap-2 px-5 py-2.5 rounded-xl bg-primary text-white font-semibold hover:opacity-90 transition"
+          >
+            <Play size={16} />
+            Start Practice
+          </button>
+
+        </div>
+
+      </div>
+
+      {/* Vector Illustration Side */}
+      <div className="w-full md:w-auto flex justify-center md:justify-end flex-shrink-0">
+        <svg className="w-32 md:w-40 h-auto max-w-full" viewBox="0 0 240 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+          {/* Background shapes */}
+          <circle cx="120" cy="90" r="80" fill="rgba(164, 53, 240, 0.03)" />
+          <circle cx="190" cy="40" r="25" fill="rgba(34, 197, 94, 0.02)" />
+
+          {/* Plant Pot */}
+          <path d="M50 145h12l-2 15h-8z" fill="#D1D5DB" />
+          <ellipse cx="56" cy="145" rx="6" ry="1.5" fill="#9CA3AF" />
+          <path d="M56 145c-4-8-12-10-14-6 0 0-3-12 5-14 3 6 9 10 9 20zM56 145c4-8 12-10 14-6 0 0 3-12-5-14-3 6-9 10-9 20z" fill="#22C55E" />
+          <circle cx="56" cy="130" r="3" fill="#4ADE80" />
+
+          {/* Laptop Monitor */}
+          <rect x="75" y="45" width="130" height="85" rx="8" fill="#1F2937" stroke="#374151" strokeWidth="4" />
+          <rect x="83" y="53" width="114" height="69" rx="4" fill="#111827" />
+
+          {/* Screen Content Lines */}
+          <rect x="91" y="61" width="30" height="4" rx="2" fill="#374151" />
+          <rect x="91" y="69" width="55" height="4" rx="2" fill="#a435f0" opacity="0.8" />
+          <rect x="101" y="77" width="45" height="4" rx="2" fill="#4B5563" />
+          <rect x="101" y="85" width="35" height="4" rx="2" fill="#4B5563" />
+          <rect x="91" y="93" width="50" height="4" rx="2" fill="#374151" />
+          
+          {/* Coding block icon on screen */}
+          <rect x="156" y="69" width="32" height="32" rx="6" fill="#a435f0" />
+          <text x="172" y="89" fill="white" fontSize="14" fontWeight="bold" fontFamily="monospace" textAnchor="middle">&lt;/&gt;</text>
+
+          {/* Monitor Stand */}
+          <path d="M125 130h30l-5 25h-20z" fill="#4B5563" />
+          <ellipse cx="140" cy="155" rx="35" ry="6" fill="#374151" />
+
+          {/* Table Surface */}
+          <line x1="20" y1="161" x2="220" y2="161" stroke="#E5E7EB" strokeWidth="2" strokeLinecap="round" className="dark:stroke-neutral-800" />
+        </svg>
+      </div>
+
+    </div>
+  );
+}
diff --git a/src/app/components/practice/PracticeSidebar.jsx b/src/app/components/practice/PracticeSidebar.jsx
new file mode 100644
index 000000000..2e6112bbd
--- /dev/null
+++ b/src/app/components/practice/PracticeSidebar.jsx
@@ -0,0 +1,117 @@
+"use client";
+
+import React from "react";
+import { 
+  ArrowLeft, 
+  Home,
+  Layers, 
+  ListTodo, 
+  GitMerge, 
+  Building2, 
+  Trophy, 
+  Bookmark, 
+  History, 
+  GraduationCap, 
+  Flame, 
+  ScrollText,
+  ChevronRight,
+  NotebookPen
+} from "lucide-react";
+
+export default function PracticeSidebar({ 
+  activeView, 
+  onViewChange, 
+  solvedCount = 8, 
+  dailySolved = 0,
+  weeklySolved = 0,
+  monthlySolved = 0,
+  dailyGoal = 3,
+  weeklyGoal = 10,
+  monthlyGoal = 50,
+  streakDays = 0,
+  bestStreak = 0,
+  mySheetCount = 0,
+  onBackToPractice
+}) {
+  const navItems = [
+    { id: "practice-home", label: "Practice Home", icon: Home },
+    { id: "dashboard",    label: "Progress",     icon: Layers },
+    { id: "my-sheet",     label: "My Sheet",     icon: ScrollText, badge: mySheetCount > 0 ? mySheetCount : null },
+    { id: "topic-wise",   label: "Topic-wise",   icon: GitMerge },
+    { id: "company-wise", label: "Company-wise", icon: Building2 },
+    { id: "bookmarks",    label: "Bookmarks",    icon: Bookmark },
+    { id: "recent-solved",label: "Recent Solved",icon: History },
+    { id: "notes",        label: "Notebook",     icon: NotebookPen },
+  ];
+
+  const dailyGoalPercentage = Math.min(100, Math.round((dailySolved / dailyGoal) * 100) || 0);
+  const weeklyGoalPercentage = Math.min(100, Math.round((weeklySolved / weeklyGoal) * 100) || 0);
+  const monthlyGoalPercentage = Math.min(100, Math.round((monthlySolved / monthlyGoal) * 100) || 0);
+  const achievementBadges = [
+  {
+    name: "7 Day Streak",
+    icon: "🔥",
+    unlocked: streakDays >= 7,
+  },
+  {
+    name: "30 Day Streak",
+    icon: "🏆",
+    unlocked: streakDays >= 30,
+  },
+  {
+    name: "50 Problems",
+    icon: "🎯",
+    unlocked: solvedCount >= 50,
+  },
+  {
+    name: "100 Problems",
+    icon: "🚀",
+    unlocked: solvedCount >= 100,
+  },
+];
+
+  return (
+    <aside className="w-full lg:w-[260px] flex-shrink-0 flex flex-col gap-6 select-none">
+      {/* Back button */}
+      <button 
+        onClick={onBackToPractice}
+        className="flex items-center gap-2.5 px-4 py-2.5 rounded-xl bg-purple-500/10 text-primary dark:bg-purple-950/20 dark:text-purple-400 font-bold text-sm w-fit transition hover:scale-102 active:scale-98"
+      >
+        <ArrowLeft size={16} />
+        <span>Back to Home</span>
+      </button>
+
+      {/* Navigation List */}
+      <nav className="flex flex-col gap-1 bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-4 shadow-sm">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const isActive = activeView === item.id;
+          return (
+            <button
+              key={item.id}
+              onClick={() => onViewChange(item.id)}
+              className={`w-full flex items-center gap-3.5 px-4 py-3 rounded-xl text-sm font-bold transition-all duration-200 ${
+                isActive
+                  ? "bg-primary text-white shadow-md shadow-primary/20 dark:shadow-none"
+                  : item.id === "my-sheet"
+                    ? "text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-950/30 border border-purple-200/60 dark:border-purple-800/40"
+                    : "text-slate-500 hover:text-slate-800 hover:bg-slate-50 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800/50"
+              }`}
+            >
+              <Icon
+                size={18}
+                className={isActive ? "text-white" : item.id === "my-sheet" ? "text-purple-500 dark:text-purple-400" : "text-slate-400 dark:text-neutral-500"}
+              />
+              <span className="flex-1 text-left">{item.label}</span>
+              {item.badge && !isActive && (
+                <span className="text-[10px] font-black bg-primary text-white rounded-full px-1.5 py-0.5 min-w-[18px] text-center leading-tight">
+                  {item.badge}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}
diff --git a/src/app/components/practice/TheoryDrawer.jsx b/src/app/components/practice/TheoryDrawer.jsx
new file mode 100644
index 000000000..f853cc15b
--- /dev/null
+++ b/src/app/components/practice/TheoryDrawer.jsx
@@ -0,0 +1,1254 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { X, Play, Clock, ShieldAlert, CheckCircle2, ArrowRight, Layers, Bookmark } from "lucide-react";
+import Link from "next/link";
+import { useProblemBookmarks } from "@/app/hooks/useProblemBookmarks";
+
+export default function TheoryDrawer({ isOpen, onClose, problem, topicSlug }) {
+  const [activeTab, setActiveTab] = useState("concept");
+  const [animationStep, setAnimationStep] = useState(0);
+  const { isBookmarked, toggleBookmark } = useProblemBookmarks();
+
+  // Reset tab and animation on problem change
+  useEffect(() => {
+    setActiveTab("concept");
+    setAnimationStep(0);
+  }, [problem]);
+
+  if (!isOpen || !problem) return null;
+
+  const { name, difficulty, visualizerUrl, theory } = problem;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-[9998] bg-neutral-900/60 backdrop-blur-sm transition-opacity duration-300"
+        onClick={onClose}
+      />
+
+      {/* Sliding Drawer */}
+      <div className="fixed top-0 right-0 bottom-0 z-[9999] w-full max-w-xl bg-white dark:bg-[#1c1d1f] shadow-2xl border-l border-surface-200 dark:border-neutral-800 flex flex-col transition-transform duration-300 transform translate-x-0 overflow-hidden">
+        
+        {/* Drawer Header */}
+        <div className="p-6 border-b border-surface-100 dark:border-neutral-800 bg-purple-50/50 dark:bg-purple-950/10 flex items-center justify-between">
+          <div>
+            <span className="text-[10px] font-bold uppercase tracking-wider text-primary bg-primary/10 dark:bg-primary/20 dark:text-purple-300 px-2.5 py-1 rounded-full">
+              Theory Module
+            </span>
+            <h2 className="text-2xl font-black mt-2 text-surface-900 dark:text-white flex items-center gap-2">
+              {name}
+              <button
+                onClick={() => toggleBookmark(problem.id, topicSlug)}
+                className={`p-1.5 rounded-lg border transition hover:scale-105 active:scale-95 duration-200 ${
+                  isBookmarked(problem.id)
+                    ? "bg-amber-500/10 border-amber-500/30 text-amber-500 dark:bg-amber-950/20"
+                    : "bg-surface-50/20 border-surface-200/50 text-surface-400 hover:text-surface-600 dark:border-neutral-800 dark:text-neutral-500 dark:hover:text-neutral-300"
+                }`}
+                title={isBookmarked(problem.id) ? "Unbookmark problem" : "Bookmark problem"}
+              >
+                <Bookmark size={14} className={isBookmarked(problem.id) ? "fill-amber-500 text-amber-500" : ""} />
+              </button>
+            </h2>
+            <span className={`inline-block text-[11px] font-bold mt-1 ${
+              difficulty === "Easy" ? "text-green-500" :
+              difficulty === "Medium" ? "text-yellow-500" : "text-red-500"
+            }`}>
+              ● {difficulty}
+            </span>
+          </div>
+          <button
+            onClick={onClose}
+            className="w-10 h-10 flex items-center justify-center rounded-full bg-surface-50 hover:bg-surface-100 dark:bg-neutral-800 dark:hover:bg-neutral-700 transition"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* Tab Selector */}
+        <div className="flex border-b border-surface-100 dark:border-neutral-800 bg-white dark:bg-[#1c1d1f] px-6 text-sm font-semibold">
+          <button
+            onClick={() => setActiveTab("concept")}
+            className={`py-3.5 px-4 border-b-2 transition-colors ${
+              activeTab === "concept"
+                ? "border-primary text-primary"
+                : "border-transparent text-surface-500 hover:text-surface-900 dark:hover:text-white"
+            }`}
+          >
+            Concept
+          </button>
+          <button
+            onClick={() => setActiveTab("walkthrough")}
+            className={`py-3.5 px-4 border-b-2 transition-colors ${
+              activeTab === "walkthrough"
+                ? "border-primary text-primary"
+                : "border-transparent text-surface-500 hover:text-surface-900 dark:hover:text-white"
+            }`}
+          >
+            Dry Run
+          </button>
+          <button
+            onClick={() => setActiveTab("complexity")}
+            className={`py-3.5 px-4 border-b-2 transition-colors ${
+              activeTab === "complexity"
+                ? "border-primary text-primary"
+                : "border-transparent text-surface-500 hover:text-surface-900 dark:hover:text-white"
+            }`}
+          >
+            Complexity
+          </button>
+        </div>
+
+        {/* Drawer Body - Scrollable */}
+        <div className="flex-1 overflow-y-auto p-6 space-y-6">
+          {activeTab === "concept" && (
+            <div className="space-y-6 animate-fadeIn">
+              {/* Summary */}
+              <div className="bg-surface-50 dark:bg-[#2d2f31] p-5 rounded-2xl border border-surface-200 dark:border-neutral-800">
+                <h3 className="text-md font-bold mb-2">Introduction</h3>
+                <p className="text-sm text-surface-600 dark:text-surface-300 leading-relaxed font-poppins">
+                  {theory.summary}
+                </p>
+              </div>
+
+              {/* Core Steps */}
+              <div className="space-y-3">
+                <h3 className="text-md font-bold">Step-by-step Algorithm</h3>
+                <ol className="space-y-2">
+                  {theory.steps.map((step, idx) => (
+                    <li key={idx} className="flex gap-3 text-sm text-surface-600 dark:text-surface-300 items-start leading-relaxed">
+                      <span className="w-5 h-5 flex-shrink-0 bg-primary/10 dark:bg-primary/20 text-primary dark:text-purple-300 text-xs font-bold rounded-full flex items-center justify-center mt-0.5">
+                        {idx + 1}
+                      </span>
+                      <span>{step}</span>
+                    </li>
+                  ))}
+                </ol>
+              </div>
+
+              {/* Pitfalls & Common Mistakes */}
+              {theory.pitfalls && (
+                <div className="bg-amber-50/50 dark:bg-amber-950/10 border border-amber-500/20 p-4 rounded-xl flex gap-3 text-sm">
+                  <ShieldAlert className="text-amber-500 flex-shrink-0 mt-0.5" size={18} />
+                  <div>
+                    <h4 className="font-bold text-amber-800 dark:text-amber-300 mb-1">Common Pitfall</h4>
+                    <p className="text-amber-700/80 dark:text-amber-200/80 leading-relaxed text-xs">
+                      {theory.pitfalls}
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {activeTab === "walkthrough" && (
+            <div className="space-y-6 animate-fadeIn">
+              <h3 className="text-md font-bold">Interactive Dry Run</h3>
+              <p className="text-xs text-surface-500 dark:text-surface-400">
+                Click through the steps below to watch the conceptual animation of this algorithm in action.
+              </p>
+
+              {/* Visual CSS-Animated Representation */}
+              <div className="h-44 bg-surface-50 dark:bg-[#2d2f31] rounded-2xl border border-surface-200 dark:border-neutral-800 flex items-center justify-center overflow-hidden relative p-4">
+                
+                {/* Binary Search Animation Box */}
+                {problem.id === "binary-search" && (
+                  <div className="flex flex-col items-center gap-4 w-full">
+                    <div className="flex gap-2">
+                      {[1, 3, 5, 8, 12, 17, 22].map((val, idx) => {
+                        let bgClass = "bg-white dark:bg-[#1c1d1f] border-surface-300 dark:border-neutral-700 text-surface-800 dark:text-white";
+                        if (animationStep === 1 && idx === 3) bgClass = "bg-primary border-primary text-white scale-105 shadow-md";
+                        if (animationStep === 2 && idx >= 4) bgClass = "bg-primary/20 border-primary/40 text-primary dark:text-purple-300 scale-105";
+                        if (animationStep === 3 && idx === 5) bgClass = "bg-green-500 border-green-500 text-white scale-105 shadow-md";
+
+                        return (
+                          <div
+                            key={idx}
+                            className={`w-10 h-10 rounded-lg border-2 flex items-center justify-center font-bold text-sm transition-all duration-300 ${bgClass}`}
+                          >
+                            {val}
+                          </div>
+                        );
+                      })}
+                    </div>
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Array is sorted. Target = 17."}
+                      {animationStep === 1 && "Compare target 17 with mid element at index 3 (val = 8). 8 < 17."}
+                      {animationStep === 2 && "Discard left half. Search space is now indices [4 to 6]."}
+                      {animationStep === 3 && "Recalculate mid = 5 (val = 17). target 17 == 17. Found!"}
+                    </div>
+                  </div>
+                )}
+
+                {/* Linear Search Animation Box */}
+                {problem.id === "linear-search" && (
+                  <div className="flex flex-col items-center gap-4 w-full">
+                    <div className="flex gap-2">
+                      {[5, 12, 8, 22, 14].map((val, idx) => {
+                        let bgClass = "bg-white dark:bg-[#1c1d1f] border-surface-300 dark:border-neutral-700 text-surface-800 dark:text-white";
+                        if (animationStep > 0 && idx === animationStep - 1) bgClass = "bg-primary border-primary text-white scale-105";
+                        if (animationStep === 3 && idx === 2) bgClass = "bg-green-500 border-green-500 text-white scale-105 shadow-md animate-bounce";
+
+                        return (
+                          <div
+                            key={idx}
+                            className={`w-10 h-10 rounded-lg border-2 flex items-center justify-center font-bold text-sm transition-all duration-300 ${bgClass}`}
+                          >
+                            {val}
+                          </div>
+                        );
+                      })}
+                    </div>
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Target = 8. Start search at index 0."}
+                      {animationStep === 1 && "Check index 0: 5 != 8. Move forward."}
+                      {animationStep === 2 && "Check index 1: 12 != 8. Move forward."}
+                      {animationStep === 3 && "Check index 2: 8 == 8. Found target!"}
+                    </div>
+                  </div>
+                )}
+
+                {/* Reverse Linked List Animation Box */}
+                {problem.id === "reverse-list" && (
+                  <div className="flex flex-col items-center gap-4 w-full">
+                    <div className="flex items-center gap-1">
+                      {[10, 20, 30].map((val, idx) => {
+                        const isReversed = animationStep > idx;
+                        return (
+                          <React.Fragment key={idx}>
+                            <div className="w-10 h-10 rounded-full bg-white dark:bg-[#1c1d1f] border-2 border-surface-300 dark:border-neutral-700 flex items-center justify-center font-bold text-xs">
+                              {val}
+                            </div>
+                            {idx < 2 && (
+                              <span className={`text-xl transition-all duration-500 ${isReversed ? 'text-green-500 rotate-180' : 'text-primary'}`}>
+                                →
+                              </span>
+                            )}
+                          </React.Fragment>
+                        );
+                      })}
+                    </div>
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Original list: 10 → 20 → 30."}
+                      {animationStep === 1 && "Reverse link from 20 back to 10."}
+                      {animationStep >= 2 && "Reverse link from 30 back to 20. List reversed!"}
+                    </div>
+                  </div>
+                )}
+
+                {/* Quick Sort Animation Box */}
+                {problem.id === "quick-sort" && (
+                  <div className="flex flex-col items-center gap-4 w-full">
+                    <div className="flex gap-2">
+                      {[5, 2, 9, 3, 6].map((val, idx) => {
+                        let bgClass = "bg-white dark:bg-[#1c1d1f] border-surface-300 dark:border-neutral-700 text-surface-800 dark:text-white";
+                        if (idx === 4) bgClass = "border-primary border-dashed font-extrabold text-primary";
+                        if (animationStep === 1) {
+                          if (idx === 4) bgClass = "bg-primary border-primary text-white";
+                          else if (val < 6) bgClass = "bg-green-500/10 border-green-500 text-green-700 dark:text-green-400";
+                          else if (val > 6) bgClass = "bg-red-500/10 border-red-500 text-red-700 dark:text-red-400";
+                        }
+                        if (animationStep === 2) {
+                          if (idx === 3) bgClass = "bg-green-500 border-green-500 text-white scale-105 shadow-md animate-bounce";
+                          else bgClass = "opacity-40";
+                        }
+
+                        return (
+                          <div
+                            key={idx}
+                            className={`w-10 h-10 rounded-lg border-2 flex items-center justify-center font-bold text-sm transition-all duration-300 ${bgClass}`}
+                          >
+                            {animationStep === 2 && idx === 3 ? "6" : animationStep === 2 && idx === 4 ? "3" : val}
+                          </div>
+                        );
+                      })}
+                    </div>
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Last element 6 is selected as the Pivot."}
+                      {animationStep === 1 && "Partition: group elements smaller than 6 (left) and larger (right)."}
+                      {animationStep === 2 && "Swap Pivot 6 to index 3. Pivot is now in sorted position!"}
+                    </div>
+                  </div>
+                )}
+
+                {/* Bubble Sort Animation Box */}
+                {problem.id === "bubble-sort" && (
+                  <div className="flex flex-col items-center gap-4 w-full">
+                    <div className="flex gap-2">
+                      {[4, 1, 3, 2].map((val, idx) => {
+                        let bgClass = "bg-white dark:bg-[#1c1d1f] border-surface-300 dark:border-neutral-700 text-surface-800 dark:text-white";
+                        if (animationStep === 1 && (idx === 0 || idx === 1)) bgClass = "bg-yellow-500/20 border-yellow-500 text-yellow-700 dark:text-yellow-400 scale-105";
+                        if (animationStep === 2 && (idx === 1 || idx === 2)) bgClass = "bg-yellow-500/20 border-yellow-500 text-yellow-700 dark:text-yellow-400 scale-105";
+                        if (animationStep === 3 && idx === 3) bgClass = "bg-green-500 border-green-500 text-white scale-105 shadow-md";
+
+                        let displayVal = val;
+                        if (animationStep === 1) {
+                          if (idx === 0) displayVal = 1;
+                          if (idx === 1) displayVal = 4;
+                        } else if (animationStep >= 2) {
+                          if (idx === 0) displayVal = 1;
+                          if (idx === 1) displayVal = 3;
+                          if (idx === 2) displayVal = 2;
+                          if (idx === 3) displayVal = 4;
+                        }
+
+                        return (
+                          <div
+                            key={idx}
+                            className={`w-10 h-10 rounded-lg border-2 flex items-center justify-center font-bold text-sm transition-all duration-300 ${bgClass}`}
+                          >
+                            {displayVal}
+                          </div>
+                        );
+                      })}
+                    </div>
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Unsorted array: [4, 1, 3, 2]."}
+                      {animationStep === 1 && "Compare index 0 and 1: 4 > 1, so swap them. [1, 4, 3, 2]"}
+                      {animationStep === 2 && "Compare index 1 and 2: 4 > 3, so swap them. [1, 3, 4, 2]"}
+                      {animationStep === 3 && "Final swap puts 4 in the correct rightmost sorted position. [1, 3, 2 | 4]"}
+                    </div>
+                  </div>
+                )}
+
+                {/* Merge Sort Animation Box */}
+                {problem.id === "merge-sort" && (
+                  <div className="flex flex-col items-center gap-4 w-full">
+                    {animationStep === 0 && (
+                      <div className="flex gap-2">
+                        {[8, 3, 2, 9].map((val, idx) => (
+                          <div key={idx} className="w-10 h-10 rounded-lg border-2 border-surface-300 dark:border-neutral-700 bg-white dark:bg-[#1c1d1f] flex items-center justify-center font-bold text-sm">
+                            {val}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                    {animationStep === 1 && (
+                      <div className="flex gap-8">
+                        <div className="flex gap-2 border border-primary/20 p-1.5 rounded-lg bg-primary/5">
+                          {[8, 3].map((val, idx) => (
+                            <div key={idx} className="w-8 h-8 rounded bg-white dark:bg-[#1c1d1f] border flex items-center justify-center font-bold text-xs">
+                              {val}
+                            </div>
+                          ))}
+                        </div>
+                        <div className="flex gap-2 border border-primary/20 p-1.5 rounded-lg bg-primary/5">
+                          {[2, 9].map((val, idx) => (
+                            <div key={idx} className="w-8 h-8 rounded bg-white dark:bg-[#1c1d1f] border flex items-center justify-center font-bold text-xs">
+                              {val}
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                    {animationStep === 2 && (
+                      <div className="flex gap-2">
+                        {[2, 3, 8, 9].map((val, idx) => (
+                          <div key={idx} className="w-10 h-10 rounded-lg border-2 border-green-500 bg-green-500/10 text-green-700 dark:text-green-400 flex items-center justify-center font-bold text-sm scale-105 shadow-md">
+                            {val}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Unsorted array: [8, 3, 2, 9]."}
+                      {animationStep === 1 && "Divide the array in half recursively into [8, 3] and [2, 9]."}
+                      {animationStep === 2 && "Sort sub-arrays and merge them back recursively. Sorted!"}
+                    </div>
+                  </div>
+                )}
+
+                {/* Stack Push Pop Animation Box */}
+                {problem.id === "push-pop" && (
+                  <div className="flex flex-col items-center gap-3 w-full">
+                    <div className="w-32 h-20 border-b-4 border-x-4 border-primary rounded-b-xl flex flex-col justify-end p-1 gap-1">
+                      {animationStep >= 1 && (
+                        <div className="h-6 rounded bg-primary text-white text-xs font-bold flex items-center justify-center shadow animate-slideDown">
+                          10
+                        </div>
+                      )}
+                      {animationStep === 2 && (
+                        <div className="h-6 rounded bg-primary-dark text-white text-xs font-bold flex items-center justify-center shadow animate-slideDown">
+                          20
+                        </div>
+                      )}
+                    </div>
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Stack is empty."}
+                      {animationStep === 1 && "Push 10 onto the stack. Elements load at top index."}
+                      {animationStep === 2 && "Push 20. Top is now 20 (LIFO behavior)."}
+                      {animationStep === 3 && "Pop element: retrieved 20 from top index. Stack has [10]."}
+                    </div>
+                  </div>
+                )}
+
+                {/* Queue Enqueue Dequeue Animation Box */}
+                {problem.id === "enqueue-dequeue" && (
+                  <div className="flex flex-col items-center gap-3 w-full">
+                    <div className="w-48 h-10 border-y-4 border-primary flex items-center justify-center p-1 gap-2">
+                      {animationStep === 1 && (
+                        <div className="w-10 h-6 rounded bg-primary text-white text-xs font-bold flex items-center justify-center shadow animate-slideRight">
+                          A
+                        </div>
+                      )}
+                      {animationStep === 2 && (
+                        <>
+                          <div className="w-10 h-6 rounded bg-primary text-white text-xs font-bold flex items-center justify-center shadow">
+                            A
+                          </div>
+                          <div className="w-10 h-6 rounded bg-primary-dark text-white text-xs font-bold flex items-center justify-center shadow animate-slideRight">
+                            B
+                          </div>
+                        </>
+                      )}
+                      {animationStep === 3 && (
+                        <div className="w-10 h-6 rounded bg-primary-dark text-white text-xs font-bold flex items-center justify-center shadow">
+                          B
+                        </div>
+                      )}
+                    </div>
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Queue is empty."}
+                      {animationStep === 1 && "Enqueue A: Inserted at index 0 (Front = Rear)."}
+                      {animationStep === 2 && "Enqueue B: Inserted at rear index 1 (FIFO order)."}
+                      {animationStep === 3 && "Dequeue: Removed A from Front index. B shifts forward."}
+                    </div>
+                  </div>
+                )}
+
+                {/* Trees Traversal Animation Box */}
+                {problem.id === "inorder-traversal" && (
+                  <div className="flex flex-col items-center gap-4 w-full">
+                    <div className="flex items-center gap-8 relative">
+                      <div className={`w-8 h-8 rounded-full border flex items-center justify-center font-bold text-xs transition-colors duration-300 ${
+                        animationStep === 1 ? 'bg-primary border-primary text-white scale-105' : 'bg-white dark:bg-neutral-800'
+                      }`}>
+                        A
+                      </div>
+                      <div className={`absolute -bottom-6 -left-4 w-8 h-8 rounded-full border flex items-center justify-center font-bold text-xs transition-colors duration-300 ${
+                        animationStep === 0 ? 'bg-primary border-primary text-white scale-105' : 'bg-white dark:bg-neutral-800'
+                      }`}>
+                        B
+                      </div>
+                      <div className={`absolute -bottom-6 -right-4 w-8 h-8 rounded-full border flex items-center justify-center font-bold text-xs transition-colors duration-300 ${
+                        animationStep === 2 ? 'bg-primary border-primary text-white scale-105' : 'bg-white dark:bg-neutral-800'
+                      }`}>
+                        C
+                      </div>
+                    </div>
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6 mt-6">
+                      {animationStep === 0 && "Step 1: Traverse left subtree. Visit node B."}
+                      {animationStep === 1 && "Step 2: Visit root node A."}
+                      {animationStep === 2 && "Step 3: Traverse right subtree. Visit node C. Output: [B, A, C]"}
+                    </div>
+                  </div>
+                )}
+
+                {/* HashMap Two Sum Animation Box */}
+                {problem.id === "two-sum" && (
+                  <div className="flex flex-col items-center gap-3 w-full">
+                    <div className="flex gap-6 items-center">
+                      <div className="flex gap-1.5 border p-1 rounded-lg">
+                        <span className="text-[10px] text-surface-400 border-r pr-1.5 font-bold uppercase">Arr</span>
+                        <div className="w-8 h-8 rounded bg-primary text-white font-bold flex items-center justify-center text-xs">2</div>
+                        <div className="w-8 h-8 rounded bg-green-500 text-white font-bold flex items-center justify-center text-xs scale-105 shadow">7</div>
+                        <div className="w-8 h-8 rounded bg-white dark:bg-neutral-800 border flex items-center justify-center text-xs">11</div>
+                      </div>
+                      <div className="flex flex-col gap-1 border p-1.5 rounded-lg bg-surface-100 dark:bg-neutral-800 text-[10px] font-mono">
+                        <span className="font-bold text-[9px] uppercase border-b pb-0.5 mb-0.5">HashMap Keys</span>
+                        <span>"2" : index 0</span>
+                      </div>
+                    </div>
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Index 0 (val=2). Complement 9 - 2 = 7 not in map. Store {2: 0}."}
+                      {animationStep === 1 && "Index 1 (val=7). Complement 9 - 7 = 2 EXISTS in map! Found pair indices [0, 1]!"}
+                    </div>
+                  </div>
+                )}
+
+                {/* Graph BFS Traversal Animation Box */}
+                {problem.id === "bfs-graph" && (
+                  <div className="flex flex-col items-center gap-4 w-full">
+                    <div className="flex gap-8 relative items-center justify-center h-12 w-full">
+                      <div className={`w-8 h-8 rounded-full border-2 flex items-center justify-center font-bold text-xs transition-colors duration-300 ${
+                        animationStep >= 0 ? 'bg-primary border-primary text-white' : ''
+                      }`}>
+                        1
+                      </div>
+                      <div className={`w-8 h-8 rounded-full border-2 flex items-center justify-center font-bold text-xs transition-colors duration-300 ${
+                        animationStep >= 1 ? 'bg-green-500 border-green-500 text-white animate-pulse' : 'border-dashed'
+                      }`}>
+                        2
+                      </div>
+                      <div className={`w-8 h-8 rounded-full border-2 flex items-center justify-center font-bold text-xs transition-colors duration-300 ${
+                        animationStep >= 1 ? 'bg-green-500 border-green-500 text-white animate-pulse' : 'border-dashed'
+                      }`}>
+                        3
+                      </div>
+                    </div>
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Visit start node 1 and add to visited queue."}
+                      {animationStep === 1 && "Dequeue 1 and visit all immediate neighbors level-by-level (nodes 2 and 3)."}
+                      {animationStep === 2 && "Queue is empty. Traversal completed! Visited: [1, 2, 3]"}
+                    </div>
+                  </div>
+                )}
+
+                {/* Graph DFS Traversal Animation Box */}
+                {problem.id === "dfs-graph" && (
+                  <div className="flex flex-col items-center gap-4 w-full">
+                    <div className="flex gap-8 relative items-center justify-center h-12 w-full">
+                      <div className={`w-8 h-8 rounded-full border-2 flex items-center justify-center font-bold text-xs transition-colors duration-300 ${
+                        animationStep >= 0 ? 'bg-primary border-primary text-white' : ''
+                      }`}>
+                        1
+                      </div>
+                      <div className={`w-8 h-8 rounded-full border-2 flex items-center justify-center font-bold text-xs transition-colors duration-300 ${
+                        animationStep >= 1 ? 'bg-green-500 border-green-500 text-white' : 'border-dashed'
+                      }`}>
+                        2
+                      </div>
+                      <div className={`w-8 h-8 rounded-full border-2 flex items-center justify-center font-bold text-xs transition-colors duration-300 ${
+                        animationStep >= 2 ? 'bg-green-500 border-green-500 text-white animate-bounce' : 'border-dashed'
+                      }`}>
+                        3
+                      </div>
+                    </div>
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Start DFS from node 1. Visited: [1]."}
+                      {animationStep === 1 && "Explore deep: Visit neighbor 2. Visited: [1, 2]."}
+                      {animationStep === 2 && "Continue deep: Visit neighbor 3. Visited: [1, 2, 3]. Complete!"}
+                    </div>
+                  </div>
+                )}
+
+                {/* Basic Recursion Fibonacci Animation Box */}
+                {problem.id === "basic-recursion" && (
+                  <div className="flex flex-col items-center gap-1.5 w-full">
+                    <div className="flex flex-col gap-1 w-32 border-x-2 border-b-2 p-1 bg-surface-100 dark:bg-neutral-800 rounded-b">
+                      {animationStep >= 0 && (
+                        <div className="h-5 rounded bg-primary text-white text-[10px] font-mono flex items-center justify-center shadow animate-slideDown">
+                          Fib(3)
+                        </div>
+                      )}
+                      {animationStep >= 1 && (
+                        <div className="h-5 rounded bg-primary-dark text-white text-[10px] font-mono flex items-center justify-center shadow animate-slideDown">
+                          Fib(2) + Fib(1)
+                        </div>
+                      )}
+                    </div>
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6 mt-1">
+                      {animationStep === 0 && "Initialize recursive call: load frame Fib(3) onto stack."}
+                      {animationStep === 1 && "Fib(3) expands to Fib(2) + Fib(1) frames recursively."}
+                      {animationStep === 2 && "Base case hit! Fib(1)=1, Fib(0)=0. Returns final computed val = 2."}
+                    </div>
+                  </div>
+                )}
+
+                {/* Singly Linked List Traversal Animation Box */}
+                {problem.id === "list-traversal" && (
+                  <div className="flex flex-col items-center gap-4 w-full">
+                    <div className="flex items-center gap-1.5">
+                      {[10, 20, 30].map((val, idx) => {
+                        let nodeClass = "border-surface-300 dark:border-neutral-700 bg-white dark:bg-[#1c1d1f] text-surface-800 dark:text-white";
+                        if (animationStep === idx) {
+                          nodeClass = "bg-primary border-primary text-white scale-110 shadow-md ring-2 ring-primary/30";
+                        } else if (animationStep > idx) {
+                          nodeClass = "bg-purple-100 border-primary/40 text-primary dark:bg-purple-950/30 dark:text-purple-300";
+                        }
+                        return (
+                          <React.Fragment key={idx}>
+                            <div className={`w-10 h-10 rounded-lg border-2 flex items-center justify-center font-bold text-xs transition-all duration-300 ${nodeClass}`}>
+                              {val}
+                            </div>
+                            <span className="text-primary font-bold">→</span>
+                          </React.Fragment>
+                        );
+                      })}
+                      <div className={`w-10 h-10 rounded-lg border-2 border-dashed flex items-center justify-center font-bold text-xs transition-all duration-300 ${
+                        animationStep === 3 ? "bg-primary border-primary text-white scale-110" : "text-surface-400 border-surface-300"
+                      }`}>
+                        NULL
+                      </div>
+                    </div>
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Start: curr = head. Visited val: 10."}
+                      {animationStep === 1 && "Advance: curr = curr.next. Visited val: 20."}
+                      {animationStep === 2 && "Advance: curr = curr.next. Visited val: 30."}
+                      {animationStep === 3 && "Advance: curr = curr.next (NULL). Traversal complete!"}
+                    </div>
+                  </div>
+                )}
+
+                {/* Merge Two Sorted Lists Animation Box */}
+                {problem.id === "merge-lists" && (
+                  <div className="flex flex-col items-center gap-2 w-full text-xs">
+                    <div className="flex flex-col gap-1 items-start w-full px-4">
+                      <div className="flex items-center gap-1 font-mono">
+                        <span className="text-[10px] text-surface-400 w-12 font-bold uppercase">List 1:</span>
+                        <span className={`px-2 py-0.5 rounded border ${animationStep >= 1 ? "line-through opacity-40 bg-surface-100" : "bg-white dark:bg-neutral-800 border-primary text-primary"}`}>1</span>
+                        <span>→</span>
+                        <span className={`px-2 py-0.5 rounded border ${animationStep >= 3 ? "line-through opacity-40 bg-surface-100" : "bg-white dark:bg-neutral-800 border-primary text-primary"}`}>3</span>
+                        <span>→</span>
+                        <span className="text-surface-400">Ø</span>
+                      </div>
+                      <div className="flex items-center gap-1 font-mono">
+                        <span className="text-[10px] text-surface-400 w-12 font-bold uppercase">List 2:</span>
+                        <span className={`px-2 py-0.5 rounded border ${animationStep >= 2 ? "line-through opacity-40 bg-surface-100" : "bg-white dark:bg-neutral-800 border-primary text-primary"}`}>2</span>
+                        <span>→</span>
+                        <span className={`px-2 py-0.5 rounded border ${animationStep >= 4 ? "line-through opacity-40 bg-surface-100" : "bg-white dark:bg-neutral-800 border-primary text-primary"}`}>4</span>
+                        <span>→</span>
+                        <span className="text-surface-400">Ø</span>
+                      </div>
+                    </div>
+                    
+                    <div className="h-[2px] w-full bg-surface-200 dark:bg-neutral-800 my-1" />
+
+                    <div className="flex items-center gap-1.5 font-mono">
+                      <span className="text-[10px] text-surface-400 font-bold uppercase">Merged:</span>
+                      <div className="px-2 py-1 rounded bg-surface-100 dark:bg-neutral-800 border border-dashed text-[10px] text-surface-500">Dummy</div>
+                      {animationStep >= 1 && <span className="text-green-500">→</span>}
+                      {animationStep >= 1 && <div className="px-2 py-0.5 rounded bg-green-500 text-white font-bold animate-fadeIn">1</div>}
+                      {animationStep >= 2 && <span className="text-green-500">→</span>}
+                      {animationStep >= 2 && <div className="px-2 py-0.5 rounded bg-green-500 text-white font-bold animate-fadeIn">2</div>}
+                      {animationStep >= 3 && <span className="text-green-500">→</span>}
+                      {animationStep >= 3 && <div className="px-2 py-0.5 rounded bg-green-500 text-white font-bold animate-fadeIn">3</div>}
+                      {animationStep >= 4 && <span className="text-green-500">→</span>}
+                      {animationStep >= 4 && <div className="px-2 py-0.5 rounded bg-green-500 text-white font-bold animate-fadeIn">4</div>}
+                    </div>
+
+                    <div className="text-[11px] font-mono text-center text-surface-500 dark:text-surface-400 h-5 mt-1">
+                      {animationStep === 0 && "Compare L1 (1) and L2 (2)."}
+                      {animationStep === 1 && "1 < 2. Append L1 (1) to merged. L1 moves to 3."}
+                      {animationStep === 2 && "Compare L1 (3) and L2 (2). 2 < 3. Append L2 (2). L2 moves to 4."}
+                      {animationStep === 3 && "Compare L1 (3) and L2 (4). 3 < 4. Append L1 (3). L1 is empty."}
+                      {animationStep === 4 && "L1 is null. Append all remaining elements of L2 (4). Complete!"}
+                    </div>
+                  </div>
+                )}
+
+                {/* Linked List Cycle Detection Animation Box */}
+                {problem.id === "list-cycle" && (
+                  <div className="flex flex-col items-center gap-4 w-full">
+                    <div className="flex items-center gap-6 relative justify-center h-16 w-full">
+                      <div className="relative">
+                        <div className={`w-8 h-8 rounded-full border-2 flex items-center justify-center font-bold text-xs ${
+                          animationStep === 0 ? "bg-primary border-primary text-white" : "bg-white dark:bg-neutral-800"
+                        }`}>
+                          1
+                        </div>
+                        {animationStep === 0 && <span className="absolute -top-5 left-1/2 -translate-x-1/2 text-[9px] font-mono text-primary font-bold">S,F</span>}
+                      </div>
+
+                      <div className="relative">
+                        <div className={`w-8 h-8 rounded-full border-2 flex items-center justify-center font-bold text-xs ${
+                          animationStep === 1 ? "bg-primary text-white border-primary" : 
+                          animationStep === 2 ? "bg-purple-100 text-primary border-primary/50" : "bg-white dark:bg-neutral-800"
+                        }`}>
+                          2
+                        </div>
+                        {animationStep === 1 && <span className="absolute -top-5 left-1/2 -translate-x-1/2 text-[9px] font-mono text-primary font-bold">S</span>}
+                        {animationStep === 2 && <span className="absolute -top-5 left-1/2 -translate-x-1/2 text-[9px] font-mono text-purple-600 font-bold">F</span>}
+                      </div>
+
+                      <div className="relative">
+                        <div className={`w-8 h-8 rounded-full border-2 flex items-center justify-center font-bold text-xs ${
+                          animationStep === 1 ? "bg-purple-100 text-primary border-primary/50" :
+                          animationStep === 2 ? "bg-primary text-white border-primary" : "bg-white dark:bg-neutral-800"
+                        }`}>
+                          3
+                        </div>
+                        {animationStep === 1 && <span className="absolute -top-5 left-1/2 -translate-x-1/2 text-[9px] font-mono text-purple-600 font-bold">F</span>}
+                        {animationStep === 2 && <span className="absolute -top-5 left-1/2 -translate-x-1/2 text-[9px] font-mono text-primary font-bold">S</span>}
+                      </div>
+
+                      <div className="relative">
+                        <div className={`w-8 h-8 rounded-full border-2 flex items-center justify-center font-bold text-xs ${
+                          animationStep === 3 ? "bg-green-500 border-green-500 text-white animate-bounce" : "bg-white dark:bg-neutral-800"
+                        }`}>
+                          4
+                        </div>
+                        {animationStep === 3 && <span className="absolute -top-5 left-1/2 -translate-x-1/2 text-[9px] font-mono text-green-600 font-bold">S=F</span>}
+                      </div>
+
+                      <div className="absolute top-10 left-[35%] w-[45%] h-6 border-b-2 border-r-2 border-dashed border-purple-400 rounded-br-2xl pointer-events-none" />
+                    </div>
+
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Slow (S) and Fast (F) pointers start at Node 1."}
+                      {animationStep === 1 && "S moves 1 step to Node 2. F moves 2 steps to Node 3."}
+                      {animationStep === 2 && "S moves to Node 3. F wraps around the cycle to Node 2."}
+                      {animationStep === 3 && "S moves to Node 4. F moves 2 steps to Node 4. S and F MEET! Cycle detected."}
+                    </div>
+                  </div>
+                )}
+
+                {/* Evaluate Reverse Polish Notation Animation Box */}
+                {problem.id === "postfix-eval" && (
+                  <div className="flex flex-col items-center gap-3 w-full text-xs">
+                    <div className="flex gap-1.5 items-center font-mono">
+                      <span className="text-[10px] text-surface-400 font-bold">Tokens:</span>
+                      {["2", "1", "+", "3", "*"].map((tok, idx) => {
+                        let activeTokClass = "border-surface-200 text-surface-600 dark:border-neutral-800";
+                        if (animationStep === 0 && idx === 0) activeTokClass = "bg-primary text-white border-primary scale-105 font-bold";
+                        if (animationStep === 1 && idx === 1) activeTokClass = "bg-primary text-white border-primary scale-105 font-bold";
+                        if (animationStep === 2 && idx === 2) activeTokClass = "bg-purple-500 text-white border-purple-500 scale-105 font-bold";
+                        if (animationStep === 3 && idx === 3) activeTokClass = "bg-primary text-white border-primary scale-105 font-bold";
+                        if (animationStep === 4 && idx === 4) activeTokClass = "bg-purple-500 text-white border-purple-500 scale-105 font-bold";
+                        return (
+                          <span key={idx} className={`px-2 py-0.5 rounded border transition-all duration-300 text-xs ${activeTokClass}`}>
+                            {tok}
+                          </span>
+                        );
+                      })}
+                    </div>
+
+                    <div className="w-24 h-24 border-b-4 border-x-4 border-primary rounded-b-xl flex flex-col justify-end p-1 gap-1">
+                      {animationStep === 0 && (
+                        <div className="h-6 rounded bg-primary text-white text-xs font-bold flex items-center justify-center shadow animate-slideDown">2</div>
+                      )}
+                      {animationStep === 1 && (
+                        <>
+                          <div className="h-6 rounded bg-primary text-white text-xs font-bold flex items-center justify-center shadow">2</div>
+                          <div className="h-6 rounded bg-primary text-white text-xs font-bold flex items-center justify-center shadow animate-slideDown">1</div>
+                        </>
+                      )}
+                      {animationStep === 2 && (
+                        <div className="h-6 rounded bg-green-500 text-white text-xs font-bold flex items-center justify-center shadow animate-bounce">3</div>
+                      )}
+                      {animationStep === 3 && (
+                        <>
+                          <div className="h-6 rounded bg-green-500 text-white text-xs font-bold flex items-center justify-center shadow">3</div>
+                          <div className="h-6 rounded bg-primary text-white text-xs font-bold flex items-center justify-center shadow animate-slideDown">3</div>
+                        </>
+                      )}
+                      {animationStep === 4 && (
+                        <div className="h-6 rounded bg-green-600 text-white text-xs font-bold flex items-center justify-center shadow animate-bounce">9</div>
+                      )}
+                    </div>
+
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Read operand '2'. Push to stack."}
+                      {animationStep === 1 && "Read operand '1'. Push to stack."}
+                      {animationStep === 2 && "Read operator '+'. Pop 1 and 2. Evaluate 2 + 1 = 3. Push 3."}
+                      {animationStep === 3 && "Read operand '3'. Push to stack."}
+                      {animationStep === 4 && "Read operator '*'. Pop 3 and 3. Evaluate 3 * 3 = 9. Final result: 9!"}
+                    </div>
+                  </div>
+                )}
+
+                {/* Min Stack Animation Box */}
+                {problem.id === "min-stack" && (
+                  <div className="flex flex-col items-center gap-3 w-full">
+                    <div className="flex gap-8">
+                      <div className="flex flex-col items-center">
+                        <span className="text-[10px] font-bold text-surface-400 uppercase mb-1">Main Stack</span>
+                        <div className="w-20 h-24 border-b-4 border-x-4 border-primary rounded-b-xl flex flex-col justify-end p-1 gap-1">
+                          {animationStep >= 0 && (
+                            <div className="h-6 rounded bg-primary text-white text-xs font-bold flex items-center justify-center shadow">5</div>
+                          )}
+                          {animationStep >= 1 && animationStep < 3 && (
+                            <div className="h-6 rounded bg-primary text-white text-xs font-bold flex items-center justify-center shadow animate-slideDown">2</div>
+                          )}
+                          {animationStep === 2 && (
+                            <div className="h-6 rounded bg-primary text-white text-xs font-bold flex items-center justify-center shadow animate-slideDown">6</div>
+                          )}
+                        </div>
+                      </div>
+
+                      <div className="flex flex-col items-center">
+                        <span className="text-[10px] font-bold text-purple-400 uppercase mb-1">Min Stack</span>
+                        <div className="w-20 h-24 border-b-4 border-x-4 border-purple-500 rounded-b-xl flex flex-col justify-end p-1 gap-1">
+                          {animationStep >= 0 && (
+                            <div className="h-6 rounded bg-purple-500 text-white text-xs font-bold flex items-center justify-center shadow">5</div>
+                          )}
+                          {animationStep >= 1 && animationStep < 3 && (
+                            <div className="h-6 rounded bg-purple-600 text-white text-xs font-bold flex items-center justify-center shadow animate-slideDown">2</div>
+                          )}
+                          {animationStep === 2 && (
+                            <div className="h-6 rounded bg-purple-600 text-white text-xs font-bold flex items-center justify-center shadow animate-slideDown">2</div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Push 5. MinStack top gets min(5, ∞) = 5. Current Min = 5."}
+                      {animationStep === 1 && "Push 2. MinStack top gets min(2, 5) = 2. Current Min = 2."}
+                      {animationStep === 2 && "Push 6. MinStack top gets min(6, 2) = 2. Current Min = 2."}
+                      {animationStep === 3 && "Pop. Retrieve 6 from Main and 2 from Min. Current Min returns to 2."}
+                    </div>
+                  </div>
+                )}
+
+                {/* Recursive Binary Search Animation Box */}
+                {problem.id === "recursive-binary-search" && (
+                  <div className="flex flex-col items-center gap-4 w-full">
+                    <div className="flex gap-1.5 font-mono">
+                      {[1, 3, 5, 8, 12, 17, 22].map((val, idx) => {
+                        let cellClass = "bg-white dark:bg-[#1c1d1f] border-surface-300 dark:border-neutral-700 text-surface-800 dark:text-white";
+                        if (animationStep === 0) {
+                          if (idx === 3) cellClass = "bg-primary border-primary text-white scale-105 shadow-md";
+                        } else if (animationStep === 1) {
+                          if (idx === 5) cellClass = "bg-green-500 border-green-500 text-white scale-105 shadow-md";
+                          else if (idx < 4) cellClass = "opacity-30";
+                        } else if (animationStep === 2) {
+                          if (idx === 5) cellClass = "bg-green-600 border-green-600 text-white scale-110 shadow-lg animate-bounce";
+                          else cellClass = "opacity-35";
+                        }
+                        return (
+                          <div key={idx} className={`w-8 h-8 rounded border-2 flex items-center justify-center font-bold text-xs transition-all duration-300 ${cellClass}`}>
+                            {val}
+                          </div>
+                        );
+                      })}
+                    </div>
+
+                    <div className="flex flex-col gap-1 w-full max-w-[280px] border border-dashed border-primary/30 p-2 rounded bg-primary/5 font-mono text-[9px] text-primary">
+                      <span className="font-bold border-b pb-0.5 mb-1 uppercase tracking-wider text-[8px]">Recursion Call Stack</span>
+                      <div className={`p-1 rounded text-center transition-all ${animationStep >= 0 ? "bg-primary text-white" : "opacity-30"}`}>
+                        binarySearch(low=0, high=6) [mid = 3, val = 8]
+                      </div>
+                      {animationStep >= 1 && (
+                        <div className={`p-1 rounded text-center transition-all ${animationStep === 1 ? "bg-purple-600 text-white" : "bg-green-600 text-white font-bold"}`}>
+                          ↳ binarySearch(low=4, high=6) [mid = 5, val = 17]
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Frame 1: low=0, high=6. Mid is 3 (8). 8 < 17. Recurse right half."}
+                      {animationStep === 1 && "Frame 2: low=4, high=6. Mid is 5 (17). 17 == 17. Base case match!"}
+                      {animationStep === 2 && "Unwind recursion: Return index 5 up the call stack. Search complete!"}
+                    </div>
+                  </div>
+                )}
+
+                {/* N-Queens Backtracking Animation Box */}
+                {problem.id === "backtracking" && (
+                  <div className="flex flex-col items-center gap-3 w-full text-xs">
+                    <div className="grid grid-cols-4 gap-1 w-32 h-32 border border-surface-300 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-800 p-1 rounded-lg">
+                      {Array.from({ length: 16 }).map((_, idx) => {
+                        const row = Math.floor(idx / 4);
+                        const col = idx % 4;
+                        let cellBg = (row + col) % 2 === 0 ? "bg-white dark:bg-neutral-700" : "bg-neutral-200 dark:bg-neutral-600";
+                        
+                        let hasQueen = false;
+                        if (animationStep === 0) {
+                          if (row === 0 && col === 0) hasQueen = true;
+                        } else if (animationStep === 1) {
+                          if (row === 0 && col === 0) hasQueen = true;
+                          if (row === 2 && col === 1) hasQueen = true;
+                        } else if (animationStep === 2) {
+                          if (row === 0 && col === 0) hasQueen = true;
+                        } else if (animationStep === 3) {
+                          if (row === 1 && col === 0) hasQueen = true;
+                          if (row === 3 && col === 1) hasQueen = true;
+                          if (row === 0 && col === 2) hasQueen = true;
+                          if (row === 2 && col === 3) hasQueen = true;
+                        }
+
+                        let conflictClass = "";
+                        if (animationStep === 2 && col === 2) {
+                          conflictClass = "bg-red-500/20 ring-1 ring-red-500/50";
+                        }
+
+                        return (
+                          <div key={idx} className={`w-7 h-7 flex items-center justify-center text-xs font-bold rounded relative ${cellBg} ${conflictClass}`}>
+                            {hasQueen && (
+                              <span className="text-purple-600 dark:text-purple-300 font-extrabold animate-scaleIn">♛</span>
+                            )}
+                            {animationStep === 2 && col === 2 && (
+                              <span className="text-red-500 text-[8px] font-mono">✗</span>
+                            )}
+                          </div>
+                        );
+                      })}
+                    </div>
+
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Place Q1 at row 0, col 0."}
+                      {animationStep === 1 && "Place Q2 at row 2, col 1 (first safe row in col 1)."}
+                      {animationStep === 2 && "Col 2: No safe row exists! BACKTRACK: Remove Q2 and try next row."}
+                      {animationStep === 3 && "Q1 moved to row 1. Fully solved backtrack arrangement found!"}
+                    </div>
+                  </div>
+                )}
+
+                {/* Lowest Common Ancestor Animation Box */}
+                {problem.id === "lca-tree" && (
+                  <div className="flex flex-col items-center gap-4 w-full">
+                    <div className="flex flex-col items-center gap-2 relative">
+                      <div className={`w-8 h-8 rounded-full border-2 flex items-center justify-center font-bold text-xs ${
+                        animationStep === 3 ? "bg-green-500 border-green-500 text-white animate-bounce" : "bg-white dark:bg-neutral-800"
+                      }`}>
+                        3
+                      </div>
+
+                      <div className="flex gap-12 relative">
+                        <div className={`w-8 h-8 rounded-full border-2 flex items-center justify-center font-bold text-xs ${
+                          animationStep === 2 ? "bg-primary border-primary text-white scale-110 shadow-lg ring-2 ring-primary/30" : "bg-white dark:bg-neutral-800"
+                        }`}>
+                          5
+                        </div>
+                        <div className="w-8 h-8 rounded-full border-2 bg-white dark:bg-neutral-800 flex items-center justify-center font-bold text-xs">
+                          1
+                        </div>
+                      </div>
+
+                      <div className="flex gap-4 relative pl-2" style={{ marginRight: "3.5rem" }}>
+                        <div className={`w-8 h-8 rounded-full border-2 flex items-center justify-center font-bold text-xs bg-purple-100 border-purple-500 text-purple-700 dark:bg-purple-950/30 dark:text-purple-300 font-extrabold ${
+                          animationStep >= 0 ? "ring-2 ring-purple-500/50" : ""
+                        }`}>
+                          6
+                        </div>
+                        <div className={`w-8 h-8 rounded-full border-2 flex items-center justify-center font-bold text-xs bg-purple-100 border-purple-500 text-purple-700 dark:bg-purple-950/30 dark:text-purple-300 font-extrabold ${
+                          animationStep >= 1 ? "ring-2 ring-purple-500/50" : ""
+                        }`}>
+                          2
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Find LCA(6, 2). Traverse left. Find node 6. Returns 6."}
+                      {animationStep === 1 && "Traverse right of node 5. Find node 2. Returns 2."}
+                      {animationStep === 2 && "Node 5 receives non-null left (6) and right (2). Node 5 is LCA!"}
+                      {animationStep === 3 && "Node 5 returns itself up to Root 3. Final LCA of 6 and 2 is 5."}
+                    </div>
+                  </div>
+                )}
+
+                {/* Maximum Depth of Binary Tree Animation Box */}
+                {problem.id === "max-depth" && (
+                  <div className="flex flex-col items-center gap-4 w-full">
+                    <div className="flex flex-col items-center gap-2 relative">
+                      <div className="w-8 h-8 rounded-full border bg-white dark:bg-neutral-800 flex items-center justify-center font-bold text-xs relative">
+                        3
+                        {animationStep === 3 && <span className="absolute -top-5 text-[9px] bg-green-500 text-white font-bold px-1 rounded">depth = 3</span>}
+                      </div>
+
+                      <div className="flex gap-16 relative">
+                        <div className="w-8 h-8 rounded-full border bg-white dark:bg-neutral-800 flex items-center justify-center font-bold text-xs relative">
+                          9
+                          {animationStep >= 1 && <span className="absolute -bottom-5 text-[8px] text-primary font-bold">d = 1</span>}
+                        </div>
+                        <div className="w-8 h-8 rounded-full border bg-white dark:bg-neutral-800 flex items-center justify-center font-bold text-xs relative">
+                          20
+                          {animationStep >= 2 && <span className="absolute -bottom-5 text-[8px] text-primary font-bold">d = 2</span>}
+                        </div>
+                      </div>
+
+                      <div className="flex gap-4 relative pl-6" style={{ marginLeft: "4.5rem" }}>
+                        <div className="w-8 h-8 rounded-full border bg-white dark:bg-neutral-800 flex items-center justify-center font-bold text-xs">
+                          15
+                        </div>
+                        <div className="w-8 h-8 rounded-full border bg-white dark:bg-neutral-800 flex items-center justify-center font-bold text-xs">
+                          7
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6 mt-2">
+                      {animationStep === 0 && "Find max depth of root 3. Recurse on Left (9) and Right (20)."}
+                      {animationStep === 1 && "Left child 9 is a leaf. Returns max(0, 0) + 1 = 1."}
+                      {animationStep === 2 && "Right child 20 has children. Returns max(left=1, right=1) + 1 = 2."}
+                      {animationStep === 3 && "At root 3: Return max(left=1, right=2) + 1 = 3. Max depth = 3!"}
+                    </div>
+                  </div>
+                )}
+
+                {/* Dijkstra's Algorithm Animation Box */}
+                {problem.id === "dijkstra-graph" && (
+                  <div className="flex flex-col items-center gap-4 w-full">
+                    <div className="flex gap-12 relative items-center justify-center h-16 w-full">
+                      <div className="relative">
+                        <div className="w-8 h-8 rounded-full border-2 flex items-center justify-center font-bold text-xs bg-primary text-white border-primary">
+                          A
+                        </div>
+                        <span className="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[9px] font-mono font-bold text-primary">Dist: 0</span>
+                      </div>
+
+                      <div className="relative">
+                        <div className={`w-8 h-8 rounded-full border-2 flex items-center justify-center font-bold text-xs ${
+                          animationStep >= 1 ? "bg-purple-100 border-purple-500 text-purple-700 dark:bg-purple-950/30" : "bg-white dark:bg-neutral-800"
+                        }`}>
+                          B
+                        </div>
+                        <span className="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[9px] font-mono font-bold text-purple-600">
+                          Dist: {animationStep >= 1 ? "2" : "∞"}
+                        </span>
+                      </div>
+
+                      <div className="relative">
+                        <div className={`w-8 h-8 rounded-full border-2 flex items-center justify-center font-bold text-xs ${
+                          animationStep === 2 ? "bg-green-500 border-green-500 text-white animate-bounce" :
+                          animationStep === 1 ? "bg-purple-100 border-purple-500 text-purple-700 dark:bg-purple-950/30" : "bg-white dark:bg-neutral-800"
+                        }`}>
+                          C
+                        </div>
+                        <span className="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[9px] font-mono font-bold text-green-600">
+                          Dist: {animationStep === 2 ? "5" : animationStep === 1 ? "6" : "∞"}
+                        </span>
+                      </div>
+
+                      <div className="absolute top-1/2 -translate-y-1/2 left-[20%] text-[10px] font-bold text-primary">-(2)→</div>
+                      <div className="absolute top-1/2 -translate-y-1/2 left-[60%] text-[10px] font-bold text-primary">-(3)→</div>
+                      <div className="absolute top-0 left-[20%] w-[60%] h-6 border-t-2 border-dashed border-purple-400 rounded-t-xl flex justify-center text-[10px] font-bold text-purple-600 pointer-events-none">
+                        (6)
+                      </div>
+                    </div>
+
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Initialize: A=0, others=∞. Relax A's neighbors: B becomes 2, C becomes 6."}
+                      {animationStep === 1 && "Pop B (dist 2, smallest). Relax C: dist(B)+3 = 2+3 = 5 < 6. Update C to 5."}
+                      {animationStep === 2 && "Pop C (dist 5). All paths fully relaxed. Shortest distances confirmed!"}
+                    </div>
+                  </div>
+                )}
+
+                {/* Climbing Stairs Animation Box */}
+                {problem.id === "climbing-stairs" && (
+                  <div className="flex flex-col items-center gap-3 w-full">
+                    <span className="text-[10px] text-surface-400 uppercase font-bold tracking-wider">Bottom-Up DP array (Ways to reach step)</span>
+                    <div className="flex gap-2">
+                      {[0, 1, 2, 3, 4].map((step) => {
+                        let val = "?";
+                        let bgClass = "bg-white dark:bg-[#1c1d1f] border-surface-300 dark:border-neutral-700 text-surface-800 dark:text-white";
+                        
+                        if (step === 1) { val = "1"; bgClass = "bg-purple-100 border-primary/40 text-primary dark:bg-purple-950/20 dark:text-purple-300"; }
+                        if (step === 2) { val = "2"; bgClass = "bg-purple-100 border-primary/40 text-primary dark:bg-purple-950/20 dark:text-purple-300"; }
+                        
+                        if (step === 3 && animationStep >= 1) {
+                          val = "3";
+                          bgClass = animationStep === 1 ? "bg-primary border-primary text-white scale-105 shadow" : "bg-purple-100 border-primary/40 text-primary dark:bg-purple-950/20";
+                        }
+                        if (step === 4 && animationStep >= 2) {
+                          val = "5";
+                          bgClass = animationStep === 2 ? "bg-green-500 border-green-500 text-white scale-105 shadow animate-bounce" : "bg-green-100 dark:bg-green-950/20 border-green-500/40 text-green-700 dark:text-green-300";
+                        }
+
+                        return (
+                          <div key={step} className="flex flex-col items-center">
+                            <span className="text-[9px] font-mono text-surface-400">dp[{step}]</span>
+                            <div className={`w-10 h-10 rounded-lg border-2 flex items-center justify-center font-bold text-xs transition-all duration-300 ${bgClass}`}>
+                              {val}
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Base cases: dp[1]=1 (1 way), dp[2]=2 (1+1 or 2 ways)."}
+                      {animationStep === 1 && "Compute dp[3]: dp[3] = dp[2] + dp[1] = 2 + 1 = 3 ways."}
+                      {animationStep === 2 && "Compute dp[4]: dp[4] = dp[3] + dp[2] = 3 + 2 = 5 ways."}
+                      {animationStep === 3 && "Completed: dp[4] = 5. You can climb 4 stairs in 5 distinct ways!"}
+                    </div>
+                  </div>
+                )}
+
+                {/* Coin Change Animation Box */}
+                {problem.id === "coin-change" && (
+                  <div className="flex flex-col items-center gap-3 w-full">
+                    <span className="text-[10px] text-surface-400 uppercase font-bold tracking-wider">DP Table: Min Coins for Amount (Coins: [1, 2, 5])</span>
+                    <div className="flex gap-1 font-mono">
+                      {[0, 1, 2, 3, 4, 5].map((amt) => {
+                        let val = "∞";
+                        let bgClass = "bg-white dark:bg-[#1c1d1f] border-surface-300 dark:border-neutral-700 text-surface-400";
+                        
+                        if (amt === 0) { val = "0"; bgClass = "bg-purple-100 border-primary/30 text-primary dark:bg-purple-950/20"; }
+                        
+                        if (amt === 1 && animationStep >= 1) { val = "1"; bgClass = "bg-purple-100 border-primary/30 text-primary dark:bg-purple-950/20"; }
+                        if (amt === 2 && animationStep >= 1) { val = "1"; bgClass = "bg-purple-100 border-primary/30 text-primary dark:bg-purple-950/20"; }
+                        
+                        if (amt === 3 && animationStep >= 2) {
+                          val = "2";
+                          bgClass = animationStep === 2 ? "bg-primary border-primary text-white scale-105" : "bg-purple-100 border-primary/30 text-primary dark:bg-purple-950/20";
+                        }
+                        if (amt === 4 && animationStep >= 2) {
+                          val = "2";
+                          bgClass = animationStep === 2 ? "bg-primary border-primary text-white scale-105" : "bg-purple-100 border-primary/30 text-primary dark:bg-purple-950/20";
+                        }
+                        
+                        if (amt === 5 && animationStep >= 3) {
+                          val = "1";
+                          bgClass = animationStep === 3 ? "bg-green-500 border-green-500 text-white scale-105 shadow animate-bounce" : "bg-green-100 dark:bg-green-950/20 border-green-500/30 text-green-700 dark:text-green-300";
+                        }
+
+                        return (
+                          <div key={amt} className="flex flex-col items-center">
+                            <span className="text-[8px] text-surface-400">amt:{amt}</span>
+                            <div className={`w-8 h-8 rounded border-2 flex items-center justify-center font-bold text-xs transition-all duration-300 ${bgClass}`}>
+                              {val}
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Initialize: dp[0] = 0 (0 coins for amount 0). All others to Infinity."}
+                      {animationStep === 1 && "Amounts 1 and 2: coin 1 gives dp[1]=1. coin 2 gives dp[2]=1."}
+                      {animationStep === 2 && "Amounts 3 and 4: dp[3] = min(dp[2]+1, dp[1]+1) = 2. dp[4] = 2."}
+                      {animationStep === 3 && "Amount 5: dp[5] = min(dp[4]+1, dp[3]+1, dp[0]+1) = 1 (uses coin 5). Complete!"}
+                    </div>
+                  </div>
+                )}
+
+                {/* Longest Common Subsequence Animation Box */}
+                {problem.id === "lcs-dp" && (
+                  <div className="flex flex-col items-center gap-2 w-full text-xs">
+                    <span className="text-[10px] text-surface-400 uppercase font-bold tracking-wider">LCS 2D DP Grid ("BAT" vs "CAT")</span>
+                    <div className="grid grid-cols-5 gap-1 font-mono text-center bg-surface-50 dark:bg-neutral-800 p-1.5 rounded-lg border">
+                      <span className="w-6 h-6 flex items-center justify-center font-bold text-surface-400 text-[10px]"></span>
+                      <span className="w-6 h-6 flex items-center justify-center font-bold text-surface-400 text-[10px]">Ø</span>
+                      <span className="w-6 h-6 flex items-center justify-center font-bold text-surface-400 text-[10px]">C</span>
+                      <span className="w-6 h-6 flex items-center justify-center font-bold text-surface-400 text-[10px]">A</span>
+                      <span className="w-6 h-6 flex items-center justify-center font-bold text-surface-400 text-[10px]">T</span>
+
+                      <span className="w-6 h-6 flex items-center justify-center font-bold text-surface-400 text-[10px]">Ø</span>
+                      <span className="w-6 h-6 rounded bg-neutral-200 dark:bg-neutral-700 flex items-center justify-center text-[10px]">0</span>
+                      <span className="w-6 h-6 rounded bg-neutral-200 dark:bg-neutral-700 flex items-center justify-center text-[10px]">0</span>
+                      <span className="w-6 h-6 rounded bg-neutral-200 dark:bg-neutral-700 flex items-center justify-center text-[10px]">0</span>
+                      <span className="w-6 h-6 rounded bg-neutral-200 dark:bg-neutral-700 flex items-center justify-center text-[10px]">0</span>
+
+                      <span className="w-6 h-6 flex items-center justify-center font-bold text-surface-400 text-[10px]">B</span>
+                      <span className="w-6 h-6 rounded bg-neutral-200 dark:bg-neutral-700 flex items-center justify-center text-[10px]">0</span>
+                      <span className={`w-6 h-6 rounded flex items-center justify-center text-[10px] ${animationStep === 1 ? "bg-primary text-white font-bold animate-pulse" : "bg-neutral-100 dark:bg-neutral-900"}`}>0</span>
+                      <span className="w-6 h-6 rounded bg-neutral-100 dark:bg-neutral-900 flex items-center justify-center text-[10px]">0</span>
+                      <span className="w-6 h-6 rounded bg-neutral-100 dark:bg-neutral-900 flex items-center justify-center text-[10px]">0</span>
+
+                      <span className="w-6 h-6 flex items-center justify-center font-bold text-surface-400 text-[10px]">A</span>
+                      <span className="w-6 h-6 rounded bg-neutral-200 dark:bg-neutral-700 flex items-center justify-center text-[10px]">0</span>
+                      <span className="w-6 h-6 rounded bg-neutral-100 dark:bg-neutral-900 flex items-center justify-center text-[10px]">0</span>
+                      <span className={`w-6 h-6 rounded flex items-center justify-center text-[10px] ${animationStep === 2 ? "bg-primary text-white font-bold animate-pulse" : animationStep > 2 ? "bg-purple-100 text-primary dark:bg-purple-950/20" : "bg-neutral-100 dark:bg-neutral-900"}`}>1</span>
+                      <span className="w-6 h-6 rounded bg-neutral-100 dark:bg-neutral-900 flex items-center justify-center text-[10px]">1</span>
+
+                      <span className="w-6 h-6 flex items-center justify-center font-bold text-surface-400 text-[10px]">T</span>
+                      <span className="w-6 h-6 rounded bg-neutral-200 dark:bg-neutral-700 flex items-center justify-center text-[10px]">0</span>
+                      <span className="w-6 h-6 rounded bg-neutral-100 dark:bg-neutral-900 flex items-center justify-center text-[10px]">0</span>
+                      <span className="w-6 h-6 rounded bg-neutral-100 dark:bg-neutral-900 flex items-center justify-center text-[10px]">1</span>
+                      <span className={`w-6 h-6 rounded flex items-center justify-center text-[10px] ${animationStep >= 3 ? "bg-green-500 text-white font-bold animate-bounce" : "bg-neutral-100 dark:bg-neutral-900"}`}>2</span>
+                    </div>
+
+                    <div className="text-xs font-mono text-center text-surface-500 dark:text-surface-400 h-6">
+                      {animationStep === 0 && "Initialize: row 0 and col 0 filled with 0. S1 = B-A-T, S2 = C-A-T."}
+                      {animationStep === 1 && "Compare 'B' & 'C'. Mismatch. dp[1][1] = max(dp[0][1], dp[1][0]) = 0."}
+                      {animationStep === 2 && "Compare 'A' & 'A'. MATCH! Diagonal transition: dp[2][2] = dp[1][1] + 1 = 1."}
+                      {animationStep === 3 && "Compare 'T' & 'T'. MATCH! Diagonal transition: dp[3][3] = dp[2][2] + 1 = 2."}
+                      {animationStep === 4 && "LCS is length 2 ('AT'). Found in bottom-right grid cell."}
+                    </div>
+                  </div>
+                )}
+
+                {/* General Fallback Animation box */}
+                {!["binary-search", "linear-search", "reverse-list", "quick-sort", "bubble-sort", "merge-sort", "push-pop", "enqueue-dequeue", "inorder-traversal", "two-sum", "bfs-graph", "dfs-graph", "basic-recursion", "list-traversal", "merge-lists", "list-cycle", "postfix-eval", "min-stack", "recursive-binary-search", "backtracking", "lca-tree", "max-depth", "dijkstra-graph", "climbing-stairs", "coin-change", "lcs-dp"].includes(problem.id) && (
+                  <div className="flex flex-col items-center gap-2">
+                    <CheckCircle2 size={36} className="text-primary animate-pulse" />
+                    <span className="text-xs font-semibold text-surface-500 dark:text-surface-400">Concept Active: {name}</span>
+                    <span className="text-[10px] text-surface-400 text-center">Visual dry run ready. Click step button below.</span>
+                  </div>
+                )}
+              </div>
+
+              {/* Steps Controllers */}
+              <div className="flex justify-center gap-3">
+                <button
+                  onClick={() => setAnimationStep(0)}
+                  className="px-4 py-2 text-xs font-semibold rounded-lg bg-surface-100 hover:bg-surface-200 dark:bg-neutral-800 dark:hover:bg-neutral-700 transition"
+                >
+                  Reset
+                </button>
+                <button
+                  onClick={() => {
+                    const maxSteps = 
+                      problem.id === "binary-search" ? 3 :
+                      problem.id === "linear-search" ? 3 :
+                      problem.id === "reverse-list" ? 2 :
+                      problem.id === "quick-sort" ? 2 :
+                      problem.id === "bubble-sort" ? 3 :
+                      problem.id === "merge-sort" ? 2 :
+                      problem.id === "push-pop" ? 3 :
+                      problem.id === "enqueue-dequeue" ? 3 :
+                      problem.id === "inorder-traversal" ? 2 :
+                      problem.id === "two-sum" ? 1 :
+                      problem.id === "bfs-graph" ? 2 :
+                      problem.id === "dfs-graph" ? 2 :
+                      problem.id === "basic-recursion" ? 2 :
+                      problem.id === "list-traversal" ? 3 :
+                      problem.id === "merge-lists" ? 4 :
+                      problem.id === "list-cycle" ? 3 :
+                      problem.id === "postfix-eval" ? 4 :
+                      problem.id === "min-stack" ? 3 :
+                      problem.id === "recursive-binary-search" ? 2 :
+                      problem.id === "backtracking" ? 3 :
+                      problem.id === "lca-tree" ? 3 :
+                      problem.id === "max-depth" ? 3 :
+                      problem.id === "dijkstra-graph" ? 2 :
+                      problem.id === "climbing-stairs" ? 3 :
+                      problem.id === "coin-change" ? 3 :
+                      problem.id === "lcs-dp" ? 4 : 1;
+                    setAnimationStep((s) => (s < maxSteps ? s + 1 : 0));
+                  }}
+                  className="px-5 py-2 text-xs font-bold rounded-lg bg-primary text-white hover:opacity-90 transition flex items-center gap-2"
+                >
+                  <Play size={12} fill="white" />
+                  Next Step
+                </button>
+              </div>
+            </div>
+          )}
+
+          {activeTab === "complexity" && (
+            <div className="space-y-6 animate-fadeIn">
+              {/* Complexities Grid */}
+              <div className="grid grid-cols-2 gap-4">
+                <div className="bg-surface-50 dark:bg-[#2d2f31] p-5 rounded-2xl border border-surface-200 dark:border-neutral-800 flex flex-col items-center text-center">
+                  <Clock className="text-primary mb-2" size={24} />
+                  <span className="text-xs font-bold text-surface-400 uppercase tracking-wider">Time Complexity</span>
+                  <span className="text-2xl font-black mt-2 text-primary">{theory.complexity.time}</span>
+                </div>
+                <div className="bg-surface-50 dark:bg-[#2d2f31] p-5 rounded-2xl border border-surface-200 dark:border-neutral-800 flex flex-col items-center text-center">
+                  <Layers className="text-primary mb-2" size={24} />
+                  <span className="text-xs font-bold text-surface-400 uppercase tracking-wider">Space Complexity</span>
+                  <span className="text-2xl font-black mt-2 text-primary">{theory.complexity.space}</span>
+                </div>
+              </div>
+
+              {/* Interview Tip */}
+              {theory.tip && (
+                <div className="bg-purple-50/50 dark:bg-purple-950/10 border border-primary/20 p-5 rounded-2xl flex gap-3 text-sm">
+                  <CheckCircle2 className="text-primary flex-shrink-0 mt-0.5" size={20} />
+                  <div>
+                    <h4 className="font-bold text-surface-800 dark:text-purple-300 mb-1">Interview Advantage</h4>
+                    <p className="text-surface-600/90 dark:text-surface-200/90 leading-relaxed text-xs font-poppins">
+                      {theory.tip}
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Drawer Footer / CTA Section */}
+        {visualizerUrl && (
+          <div className="p-6 border-t border-surface-100 dark:border-neutral-800 bg-white dark:bg-[#1c1d1f] flex flex-col">
+            <Link
+              href={visualizerUrl}
+              className="group w-full h-[52px] rounded-2xl bg-primary text-white font-bold flex items-center justify-center gap-2 hover:opacity-95 shadow-lg shadow-primary/20 transition-all"
+            >
+              Open Interactive Visualizer
+              <ArrowRight size={18} className="group-hover:translate-x-1.5 transition-transform duration-200" />
+            </Link>
+            <p className="text-[10px] text-surface-400 text-center mt-3">
+              This launches our fully interactive algorithm step engine with custom parameters.
+            </p>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/src/app/components/profile/ProfileForm.jsx b/src/app/components/profile/ProfileForm.jsx
new file mode 100644
index 000000000..4ac0051d4
--- /dev/null
+++ b/src/app/components/profile/ProfileForm.jsx
@@ -0,0 +1,550 @@
+"use client";
+
+import {
+  Briefcase,
+  Code2,
+  Download,
+  Edit3,
+  Github,
+  GraduationCap,
+  Linkedin,
+  MapPin,
+  Plus,
+  RefreshCw,
+  ShieldCheck,
+  Trash2,
+  User,
+} from "lucide-react";
+import {
+  CODING_PLATFORMS,
+  MAX_BIO_LENGTH,
+  ONBOARDING_CODING_FIELDS,
+  ONBOARDING_OPTIONAL_FIELDS,
+  PRESET_PROJECT_GRADIENTS,
+} from "@/lib/profileUtils";
+
+const ONBOARDING_FIELD_ICONS = {
+  college: GraduationCap,
+  branch: ShieldCheck,
+  location: MapPin,
+  github_profile: Github,
+  linkedin_profile: Linkedin,
+  resume_link: Briefcase,
+};
+
+const inputClassName =
+  "h-11 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm font-semibold text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-100 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100 dark:placeholder:text-neutral-600 dark:focus:border-violet-400 dark:focus:ring-violet-950/60";
+
+const compactInputClassName =
+  "h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm font-semibold text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-100 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100 dark:placeholder:text-neutral-600 dark:focus:border-violet-400 dark:focus:ring-violet-950/60";
+
+function FieldLabel({ icon: Icon, label, extra }) {
+  return (
+    <span className="mb-1.5 flex items-center justify-between gap-2 text-xs font-black uppercase tracking-wide text-slate-500 dark:text-neutral-400">
+      <span className="flex items-center gap-2">
+        {Icon && <Icon className="h-3.5 w-3.5 text-violet-600 dark:text-violet-300" />}
+        {label}
+      </span>
+      {extra}
+    </span>
+  );
+}
+
+function BasicFields({ formData, onChange, mode }) {
+  const essentialFields = [
+    ["name", "Full Name", "John Doe", User, true],
+    ["skills", "Bio", "Software Engineer passionate about...", Code2, true],
+  ];
+
+  const optionalFields = [
+    ["branch", "Branch", "Computer Science", ShieldCheck],
+    ["college", "College / University", "Your college name", GraduationCap],
+    ["location", "Location", "City, Country", MapPin],
+    ["github_profile", "GitHub URL", "https://github.com/...", Github],
+    ["linkedin_profile", "LinkedIn URL", "https://linkedin.com/in/...", Linkedin],
+    ["resume_link", "Resume URL", "https://drive.google.com/...", Briefcase],
+  ];
+
+  const renderField = ([name, label, placeholder, Icon, required]) => (
+    <label key={name} className={name === "skills" ? "sm:col-span-2" : undefined}>
+      <FieldLabel
+        icon={Icon}
+        label={label}
+        extra={
+          name === "skills" ? (
+            <span className="normal-case tracking-normal text-slate-400 dark:text-neutral-500">
+              {formData.skills.length}/{MAX_BIO_LENGTH}
+            </span>
+          ) : null
+        }
+      />
+      {name === "skills" ? (
+        <textarea
+          name={name}
+          value={formData[name]}
+          onChange={onChange}
+          maxLength={MAX_BIO_LENGTH}
+          rows={3}
+          placeholder={placeholder}
+          className={`${inputClassName} min-h-[88px] resize-y py-2.5`}
+        />
+      ) : (
+        <input
+          name={name}
+          value={formData[name]}
+          onChange={onChange}
+          maxLength={name === "skills" ? MAX_BIO_LENGTH : undefined}
+          placeholder={placeholder}
+          className={inputClassName}
+        />
+      )}
+    </label>
+  );
+
+  if (mode === "onboarding") {
+    return (
+      <div className="space-y-4">
+        <div className="grid gap-4">{essentialFields.map(renderField)}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2">
+      {[...essentialFields.map((f) => [f[0], f[1], f[2], f[3]]), ...optionalFields].map((field) =>
+        renderField([...field, false])
+      )}
+    </div>
+  );
+}
+
+function AvatarUpload({ formData, user, fileInputRef, savingAvatar, onAvatarChange }) {
+  const displayName = formData.name || user?.user_metadata?.name || user?.email?.split("@")[0] || "User";
+  const initials = displayName
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+
+  return (
+    <div className="flex flex-col items-center gap-3 sm:flex-row sm:items-start">
+      <div className="relative h-24 w-24 shrink-0">
+        <button
+          type="button"
+          onClick={() => fileInputRef.current?.click()}
+          className="h-full w-full overflow-hidden rounded-full border-4 border-slate-100 bg-slate-100 shadow-inner dark:border-neutral-800 dark:bg-neutral-800"
+          aria-label="Change profile photo"
+        >
+          {formData.avatar_url ? (
+            <img
+              src={formData.avatar_url}
+              alt={displayName}
+              width={96}
+              height={96}
+              className="h-full w-full object-cover"
+            />
+          ) : (
+            <span className="flex h-full w-full items-center justify-center bg-violet-100 text-2xl font-black text-violet-700 dark:bg-violet-950/50 dark:text-violet-200">
+              {initials}
+            </span>
+          )}
+          {savingAvatar && (
+            <span className="absolute inset-0 flex items-center justify-center bg-slate-950/50 text-xs font-black text-white">
+              Saving
+            </span>
+          )}
+        </button>
+        <button
+          type="button"
+          onClick={() => fileInputRef.current?.click()}
+          className="absolute bottom-0 right-0 flex h-8 w-8 items-center justify-center rounded-full border border-purple-500/40 bg-purple-600 text-white shadow-md dark:bg-purple-700"
+          aria-label="Upload avatar"
+        >
+          <Edit3 className="h-3.5 w-3.5" />
+        </button>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={onAvatarChange}
+        />
+      </div>
+      <div className="text-center sm:text-left">
+        <p className="text-sm font-black text-[#111331] dark:text-white">Profile Picture</p>
+        <p className="mt-1 text-xs font-semibold text-slate-500 dark:text-neutral-400">
+          JPG or PNG, up to 2MB.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function OnboardingStep2Fields({
+  formData,
+  onChange,
+  user,
+  fileInputRef,
+  savingAvatar,
+  onAvatarChange,
+}) {
+  return (
+    <div className="space-y-5">
+      <AvatarUpload
+        formData={formData}
+        user={user}
+        fileInputRef={fileInputRef}
+        savingAvatar={savingAvatar}
+        onAvatarChange={onAvatarChange}
+      />
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        {ONBOARDING_OPTIONAL_FIELDS.map(([name, label, placeholder]) => {
+          const Icon = ONBOARDING_FIELD_ICONS[name];
+          return (
+            <label key={name} className={name === "resume_link" ? "sm:col-span-2" : undefined}>
+              <FieldLabel icon={Icon} label={label} />
+              <input
+                name={name}
+                value={formData[name]}
+                onChange={onChange}
+                placeholder={placeholder}
+                className={inputClassName}
+              />
+            </label>
+          );
+        })}
+      </div>
+
+      <div>
+        <h3 className="mb-3 text-sm font-black text-[#111331] dark:text-white">Coding Profiles</h3>
+        <div className="grid gap-4 sm:grid-cols-2">
+          {ONBOARDING_CODING_FIELDS.map(([name, label, placeholder]) => (
+            <label key={name}>
+              <FieldLabel label={label} />
+              <input
+                name={name}
+                value={formData[name]}
+                onChange={onChange}
+                placeholder={placeholder}
+                className={inputClassName}
+              />
+            </label>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CodingProfilesSection({ formData, onChange, fetchingProfile, onFetchCodingProfile, formatNumber }) {
+  return (
+    <div className="mt-6 border-t border-slate-100 pt-5 dark:border-neutral-800">
+      <div className="mb-4">
+        <h3 className="text-sm font-black text-[#111331] dark:text-white">Coding Profiles</h3>
+        <p className="text-xs font-semibold text-slate-500 dark:text-neutral-400">
+          Usernames and stats shown on your profile.
+        </p>
+      </div>
+      <div className="grid gap-3 md:grid-cols-2">
+        {CODING_PLATFORMS.map(([platformKey, usernameField, usernameLabel, statField, statLabel]) => (
+          <div
+            key={usernameField}
+            className="rounded-xl border border-slate-100 bg-slate-50/70 p-3 dark:border-neutral-800 dark:bg-neutral-950/60"
+          >
+            <label>
+              <span className="mb-1.5 block text-xs font-black text-slate-500 dark:text-neutral-400">
+                {usernameLabel}
+              </span>
+              <div className="flex gap-2">
+                <input
+                  name={usernameField}
+                  value={formData[usernameField]}
+                  onChange={onChange}
+                  placeholder="username"
+                  className={`${compactInputClassName} min-w-0 flex-1`}
+                />
+                <button
+                  type="button"
+                  onClick={() =>
+                    onFetchCodingProfile(
+                      platformKey,
+                      usernameField,
+                      statField,
+                      usernameLabel.replace(" Username", "").replace(" Handle", "")
+                    )
+                  }
+                  disabled={fetchingProfile[platformKey] || !formData[usernameField]?.trim()}
+                  className="inline-flex h-10 items-center gap-1.5 rounded-lg border border-slate-200 px-3 text-xs font-black text-slate-600 transition hover:border-violet-300 hover:bg-violet-50 hover:text-violet-700 disabled:cursor-not-allowed disabled:opacity-40 dark:border-neutral-700 dark:text-neutral-300 dark:hover:border-violet-700 dark:hover:bg-violet-950/40 dark:hover:text-violet-300"
+                >
+                  <RefreshCw className={`h-3.5 w-3.5 ${fetchingProfile[platformKey] ? "animate-spin" : ""}`} />
+                  Fetch
+                </button>
+              </div>
+            </label>
+            <div className="mt-3 rounded-lg border border-slate-100 bg-white px-3 py-2 dark:border-neutral-800 dark:bg-neutral-900">
+              <span className="text-[11px] font-black text-slate-500 dark:text-neutral-400">{statLabel}</span>
+              <p className="mt-1 text-lg font-black text-[#111331] dark:text-white">
+                {formatNumber(formData[statField])}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ProjectsSection({
+  formData,
+  projectForm,
+  onProjectFormChange,
+  editingProjectIndex,
+  onAddProject,
+  onEditProject,
+  onDeleteProject,
+  onSaveProject,
+  onResetProjectForm,
+  onImportFromGitHub,
+  importingRepos,
+  githubRepos,
+  onSelectRepo,
+}) {
+  return (
+    <div className="mt-6 border-t border-slate-100 pt-5 dark:border-neutral-800">
+      <div className="mb-4 flex items-center justify-between gap-3">
+        <div>
+          <h3 className="text-sm font-black text-[#111331] dark:text-white">Projects</h3>
+          <p className="text-xs font-semibold text-slate-500 dark:text-neutral-400">
+            Add up to the projects shown on your profile.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <button
+            type="button"
+            onClick={onImportFromGitHub}
+            disabled={importingRepos}
+            className="inline-flex h-9 items-center gap-2 rounded-lg border border-slate-200 px-3 text-xs font-black text-slate-600 transition hover:border-violet-300 hover:bg-violet-50 hover:text-violet-700 disabled:opacity-50 dark:border-neutral-700 dark:text-neutral-300 dark:hover:border-violet-700 dark:hover:bg-violet-950/40 dark:hover:text-violet-300"
+          >
+            <Github className="h-3.5 w-3.5" />
+            {importingRepos ? "Fetching..." : "Import GitHub"}
+            {!importingRepos && <Download className="h-3.5 w-3.5" />}
+          </button>
+          <button
+            type="button"
+            onClick={onAddProject}
+            className="inline-flex h-9 items-center gap-2 rounded-lg border border-violet-200 bg-violet-50 px-3 text-xs font-black text-violet-700 transition hover:bg-violet-100 dark:border-violet-900/60 dark:bg-violet-950/30 dark:text-violet-300"
+          >
+            <Plus className="h-3.5 w-3.5" />
+            Add
+          </button>
+        </div>
+      </div>
+
+      {githubRepos.length > 0 && (
+        <div className="mb-4 overflow-hidden rounded-xl border border-slate-200 dark:border-neutral-700">
+          <p className="border-b border-slate-100 px-3 py-2 text-xs font-black text-slate-500 dark:border-neutral-800 dark:text-neutral-400">
+            Select a GitHub repo
+          </p>
+          <div className="max-h-44 overflow-y-auto">
+            {githubRepos.map((repo) => (
+              <button
+                key={repo.name}
+                type="button"
+                onClick={() => onSelectRepo(repo)}
+                className="flex w-full items-center justify-between gap-3 px-3 py-2.5 text-left transition hover:bg-violet-50 dark:hover:bg-violet-950/30"
+              >
+                <div className="min-w-0">
+                  <p className="truncate text-sm font-black text-[#111331] dark:text-white">{repo.name}</p>
+                  {repo.description && (
+                    <p className="mt-0.5 truncate text-[11px] font-semibold text-slate-500 dark:text-neutral-400">
+                      {repo.description}
+                    </p>
+                  )}
+                </div>
+                {repo.language && (
+                  <span className="shrink-0 rounded bg-violet-50 px-1.5 py-0.5 text-[10px] font-black text-violet-600 dark:bg-violet-950/40 dark:text-violet-300">
+                    {repo.language}
+                  </span>
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {editingProjectIndex !== null && (
+        <div className="mb-4 rounded-xl border border-violet-200 bg-violet-50/50 p-4 dark:border-violet-900/60 dark:bg-violet-950/20">
+          <p className="mb-3 text-xs font-black uppercase tracking-wide text-violet-600 dark:text-violet-300">
+            {editingProjectIndex === -1 ? "New Project" : "Edit Project"}
+          </p>
+          <div className="grid gap-3 sm:grid-cols-2">
+            {[
+              ["title", "Project title", "Portfolio Website"],
+              ["subtitle", "Short description", "React app with animations"],
+              ["tags", "Tags", "React, Tailwind, API"],
+              ["url", "Project URL", "https://..."],
+            ].map(([field, label, placeholder]) => (
+              <label key={field}>
+                <span className="mb-1.5 block text-xs font-black text-slate-500 dark:text-neutral-400">{label}</span>
+                <input
+                  value={projectForm[field]}
+                  onChange={(event) => onProjectFormChange(field, event.target.value)}
+                  placeholder={placeholder}
+                  className={compactInputClassName}
+                />
+              </label>
+            ))}
+          </div>
+          <div className="mt-3">
+            <p className="mb-2 text-xs font-black text-slate-500 dark:text-neutral-400">Preview color</p>
+            <div className="flex flex-wrap gap-2">
+              {PRESET_PROJECT_GRADIENTS.map((gradient) => (
+                <button
+                  key={gradient}
+                  type="button"
+                  onClick={() => onProjectFormChange("preview", gradient)}
+                  className={`h-8 w-8 rounded-lg ${gradient} ${
+                    projectForm.preview === gradient
+                      ? "ring-2 ring-violet-600 ring-offset-2 dark:ring-violet-400 dark:ring-offset-neutral-900"
+                      : ""
+                  }`}
+                  aria-label="Select project preview color"
+                />
+              ))}
+            </div>
+          </div>
+          <div className="mt-4 flex gap-2">
+            <button
+              type="button"
+              onClick={onResetProjectForm}
+              className="rounded-xl border border-slate-200 px-4 py-2 text-xs font-black text-slate-600 dark:border-neutral-700 dark:text-neutral-300"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={onSaveProject}
+              className="rounded-xl bg-violet-600 px-4 py-2 text-xs font-black text-white dark:bg-violet-500"
+            >
+              {editingProjectIndex === -1 ? "Add Project" : "Update Project"}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {formData.projects.length === 0 ? (
+        <div className="rounded-xl border border-dashed border-violet-200 bg-violet-50/50 px-4 py-5 text-center text-sm font-bold text-slate-500 dark:border-violet-900/60 dark:bg-violet-950/20 dark:text-neutral-400">
+          No projects yet.
+        </div>
+      ) : (
+        <div className="grid gap-3 sm:grid-cols-2">
+          {formData.projects.map((project, index) => (
+            <div
+              key={`${project.title}-${index}`}
+              className="flex items-center gap-3 rounded-xl border border-slate-100 bg-white p-3 dark:border-neutral-800 dark:bg-neutral-950"
+            >
+              <div className={`h-10 w-10 shrink-0 rounded-lg ${project.preview}`} />
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm font-black text-[#111331] dark:text-white">{project.title}</p>
+                <p className="truncate text-[11px] font-semibold text-slate-500 dark:text-neutral-400">
+                  {project.subtitle}
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={() => onEditProject(index)}
+                className="rounded-lg border border-slate-200 px-2 py-1 text-[11px] font-black text-slate-600 hover:border-violet-300 hover:text-violet-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:text-violet-300"
+              >
+                Edit
+              </button>
+              <button
+                type="button"
+                onClick={() => onDeleteProject(index)}
+                className="flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 text-slate-400 hover:border-red-200 hover:text-red-500 dark:border-neutral-700 dark:text-neutral-500 dark:hover:text-red-400"
+                aria-label="Delete project"
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function ProfileForm({
+  mode = "edit",
+  onboardingStep = 1,
+  formData,
+  onChange,
+  user,
+  fileInputRef,
+  savingAvatar,
+  onAvatarChange,
+  fetchingProfile = {},
+  onFetchCodingProfile,
+  formatNumber = (value) => new Intl.NumberFormat("en-US").format(value || 0),
+  projectForm,
+  onProjectFormChange,
+  editingProjectIndex,
+  onAddProject,
+  onEditProject,
+  onDeleteProject,
+  onSaveProject,
+  onResetProjectForm,
+  onImportFromGitHub,
+  importingRepos = false,
+  githubRepos = [],
+  onSelectRepo,
+}) {
+  return (
+    <div className="overflow-y-auto px-6 py-5">
+      {mode === "onboarding" && onboardingStep === 1 && (
+        <BasicFields formData={formData} onChange={onChange} mode={mode} />
+      )}
+
+      {mode === "onboarding" && onboardingStep === 2 && (
+        <OnboardingStep2Fields
+          formData={formData}
+          onChange={onChange}
+          user={user}
+          fileInputRef={fileInputRef}
+          savingAvatar={savingAvatar}
+          onAvatarChange={onAvatarChange}
+        />
+      )}
+
+      {mode === "edit" && <BasicFields formData={formData} onChange={onChange} mode={mode} />}
+
+      {mode === "edit" && (
+        <>
+          <CodingProfilesSection
+            formData={formData}
+            onChange={onChange}
+            fetchingProfile={fetchingProfile}
+            onFetchCodingProfile={onFetchCodingProfile}
+            formatNumber={formatNumber}
+          />
+          <ProjectsSection
+            formData={formData}
+            projectForm={projectForm}
+            onProjectFormChange={onProjectFormChange}
+            editingProjectIndex={editingProjectIndex}
+            onAddProject={onAddProject}
+            onEditProject={onEditProject}
+            onDeleteProject={onDeleteProject}
+            onSaveProject={onSaveProject}
+            onResetProjectForm={onResetProjectForm}
+            onImportFromGitHub={onImportFromGitHub}
+            importingRepos={importingRepos}
+            githubRepos={githubRepos}
+            onSelectRepo={onSelectRepo}
+          />
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/components/profile/ProfileSetupModal.jsx b/src/app/components/profile/ProfileSetupModal.jsx
new file mode 100644
index 000000000..7739b7636
--- /dev/null
+++ b/src/app/components/profile/ProfileSetupModal.jsx
@@ -0,0 +1,198 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowLeft, ArrowRight, Save, X } from "lucide-react";
+import toast from "react-hot-toast";
+import { useUser } from "@/features/user/UserContext";
+import { useProfileForm } from "@/app/hooks/useProfileForm";
+import ProfileForm from "@/app/components/profile/ProfileForm";
+import { isOnboardingStep1Valid, shouldShowProfileSetup } from "@/lib/profileUtils";
+
+const TOTAL_STEPS = 2;
+
+export default function ProfileSetupModal() {
+  const { user, setUser, loading } = useUser();
+  const [step, setStep] = useState(1);
+  const [isDismissed, setIsDismissed] = useState(false);
+  const blockSaveRef = useRef(false);
+  const {
+    formData,
+    saving,
+    savingAvatar,
+    fileInputRef,
+    handleChange,
+    handleAvatarChange,
+    saveProfile,
+  } = useProfileForm(user, setUser);
+
+  const shouldShow = !loading && shouldShowProfileSetup(user);
+  const canProceed = isOnboardingStep1Valid(formData);
+  const isOpen = shouldShow && !isDismissed;
+
+  useEffect(() => {
+    if (shouldShow) {
+      setStep(1);
+    }
+  }, [shouldShow]);
+
+  useEffect(() => {
+    if (!shouldShow) {
+      setIsDismissed(false);
+    }
+  }, [shouldShow]);
+
+  const handleOnboardingAvatarChange = useCallback(
+    (event) => handleAvatarChange(event, { persistImmediately: false }),
+    [handleAvatarChange],
+  );
+
+  const handleNext = () => {
+    if (!canProceed) return;
+
+    blockSaveRef.current = true;
+    setTimeout(() => {
+      setStep(2);
+      setTimeout(() => {
+        blockSaveRef.current = false;
+      }, 350);
+    }, 0);
+  };
+
+  const handleBack = () => {
+    setStep(1);
+  };
+
+  const handleClose = () => {
+    setIsDismissed(true);
+  };
+
+  const handleSave = async () => {
+    if (blockSaveRef.current || saving) return;
+
+    const result = await saveProfile({
+      mode: "onboarding",
+      markSetupSeen: true,
+      onSuccess: () => toast.success("Profile saved! Welcome to AlgoBuddy."),
+    });
+    if (!result.ok) return;
+  };
+
+  const handleFormKeyDown = (event) => {
+    if (event.key !== "Enter") return;
+
+    const tag = event.target?.tagName?.toLowerCase();
+    if (tag === "textarea") return;
+
+    event.preventDefault();
+
+    if (step === 1 && canProceed) {
+      handleNext();
+    }
+  };
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="profile-setup-title"
+          className="fixed inset-0 z-[10001] flex items-center justify-center bg-slate-950/60 p-4 backdrop-blur-sm dark:bg-black/80"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+        >
+          <motion.div
+            onClick={(event) => event.stopPropagation()}
+            onKeyDown={handleFormKeyDown}
+            className="flex max-h-[90vh] w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white shadow-2xl dark:border dark:border-neutral-800 dark:bg-neutral-900"
+            initial={{ y: 20, opacity: 0, scale: 0.98 }}
+            animate={{ y: 0, opacity: 1, scale: 1 }}
+            exit={{ y: 20, opacity: 0, scale: 0.98 }}
+          >
+            <div className="relative border-b border-slate-100 px-6 py-5 dark:border-neutral-800">
+              <button
+                type="button"
+                onClick={handleClose}
+                className="absolute right-4 top-4 inline-flex h-9 w-9 items-center justify-center rounded-full text-slate-500 transition hover:bg-slate-100 hover:text-slate-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white"
+                aria-label="Close profile onboarding"
+              >
+                <X className="h-5 w-5" />
+              </button>
+
+              <div className="flex items-start gap-3 pr-10">
+                <div className="min-w-0 flex-1">
+                  <p className="text-xs font-black uppercase tracking-wide text-violet-600 dark:text-violet-300">
+                    Step {step} of {TOTAL_STEPS}
+                  </p>
+                  <h2 id="profile-setup-title" className="mt-1 text-xl font-black text-[#111331] dark:text-white">
+                    Welcome to AlgoBuddy
+                  </h2>
+                  <p className="mt-1 text-sm font-semibold leading-relaxed text-slate-500 dark:text-neutral-400">
+                    {step === 1
+                      ? "Complete your profile to personalize your AlgoBuddy experience."
+                      : "Add more details to make your profile stand out."}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <ProfileForm
+              mode="onboarding"
+              onboardingStep={step}
+              formData={formData}
+              onChange={handleChange}
+              user={user}
+              fileInputRef={fileInputRef}
+              savingAvatar={savingAvatar}
+              onAvatarChange={handleOnboardingAvatarChange}
+            />
+
+            <div className="flex items-center justify-between gap-3 border-t border-slate-100 bg-slate-50 px-6 py-4 dark:border-neutral-800 dark:bg-neutral-950/60">
+              {step === 2 ? (
+                <button
+                  type="button"
+                  onClick={handleBack}
+                  disabled={saving}
+                  className="inline-flex items-center gap-2 rounded-xl border border-slate-200 px-5 py-2.5 text-sm font-black text-slate-600 transition hover:bg-white disabled:opacity-60 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800"
+                >
+                  <ArrowLeft className="h-4 w-4" />
+                  Back
+                </button>
+              ) : (
+                <span aria-hidden="true" />
+              )}
+
+              {step === 1 ? (
+                <button
+                  type="button"
+                  onClick={handleNext}
+                  disabled={!canProceed}
+                  className="inline-flex items-center justify-center gap-2 rounded-xl bg-violet-600 px-5 py-2.5 text-sm font-black text-white shadow-lg shadow-violet-200 disabled:opacity-60 dark:bg-violet-500 dark:shadow-none"
+                >
+                  Next
+                  <ArrowRight className="h-4 w-4" />
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  onClick={handleSave}
+                  disabled={saving}
+                  className="inline-flex items-center justify-center gap-2 rounded-xl bg-violet-600 px-5 py-2.5 text-sm font-black text-white shadow-lg shadow-violet-200 disabled:opacity-60 dark:bg-violet-500 dark:shadow-none"
+                >
+                  {saving ? (
+                    <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white" />
+                  ) : (
+                    <Save className="h-4 w-4" />
+                  )}
+                  {saving ? "Saving..." : "Save Profile"}
+                </button>
+              )}
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/app/components/review.jsx b/src/app/components/review.jsx
old mode 100755
new mode 100644
similarity index 75%
rename from app/components/review.jsx
rename to src/app/components/review.jsx
index 5cc59353f..9ddef7394
--- a/app/components/review.jsx
+++ b/src/app/components/review.jsx
@@ -2,6 +2,12 @@
 import { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { FiStar, FiSend, FiCheckCircle, FiArrowRight } from "react-icons/fi";
+import dynamic from "next/dynamic";
+
+const Turnstile = dynamic(
+  () => import("@marsidev/react-turnstile").then((mod) => mod.Turnstile),
+  { ssr: false },
+);
 
 const TestimonialsSection = () => {
   const [formData, setFormData] = useState({
@@ -13,6 +19,7 @@ const TestimonialsSection = () => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitSuccess, setSubmitSuccess] = useState(false);
   const [error, setError] = useState("");
+  const [captchaToken, setCaptchaToken] = useState(null);
 
   const handleChange = (e) => {
     const { name, value } = e.target;
@@ -25,6 +32,10 @@ const TestimonialsSection = () => {
     setError("");
 
     try {
+      if (!captchaToken) {
+        throw new Error("Please complete the captcha");
+      }
+
       const response = await fetch("/api/send-review", {
         method: "POST",
         headers: {
@@ -35,14 +46,14 @@ const TestimonialsSection = () => {
           email: formData.email,
           review: formData.review,
           rating: formData.rating,
-          to: "routsohan2006@gmail.com", // Your email address
+          captchaToken,
         }),
       });
 
       const data = await response.json();
 
       if (!response.ok) {
-        throw new Error(data.message || "Failed to submit review");
+        throw new Error(data.error || data.message || "Failed to submit review");
       }
 
       setSubmitSuccess(true);
@@ -52,6 +63,7 @@ const TestimonialsSection = () => {
         review: "",
         rating: 5,
       });
+      setCaptchaToken(null);
     } catch (err) {
       setError(
         err.message || "Failed to submit review. Please try again later.",
@@ -216,43 +228,56 @@ const TestimonialsSection = () => {
                 )}
 
                 <div className="flex justify-end">
-                  <motion.button
-                    whileHover={{ scale: 1.03 }}
-                    whileTap={{ scale: 0.97 }}
-                    type="submit"
-                    disabled={isSubmitting}
-                    className="px-6 py-3 bg-udemy-purple hover:bg-udemy-purple-dark text-white font-bold rounded transition-all shadow-md hover:shadow-lg flex items-center"
-                  >
-                    {isSubmitting ? (
-                      <>
-                        <svg
-                          className="animate-spin -ml-1 mr-2 h-5 w-5 text-white"
-                          xmlns="http://www.w3.org/2000/svg"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            className="opacity-25"
-                            cx="12"
-                            cy="12"
-                            r="10"
-                            stroke="currentColor"
-                            strokeWidth="4"
-                          ></circle>
-                          <path
-                            className="opacity-75"
-                            fill="currentColor"
-                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                          ></path>
-                        </svg>
-                        Submitting...
-                      </>
-                    ) : (
-                      <>
-                        Submit Review <FiSend className="ml-2" />
-                      </>
-                    )}
-                  </motion.button>
+                  <div className="flex flex-col items-end gap-4">
+                    <div className="flex justify-end">
+                      <Turnstile
+                        siteKey={
+                          process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY?.startsWith("1x") || 
+                          process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY?.startsWith("0x")
+                            ? process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY
+                            : "1x00000000000000000000AA"
+                        }
+                        onSuccess={(token) => setCaptchaToken(token)}
+                      />
+                    </div>
+                    <motion.button
+                      whileHover={{ scale: 1.03 }}
+                      whileTap={{ scale: 0.97 }}
+                      type="submit"
+                      disabled={isSubmitting || !captchaToken}
+                      className="px-6 py-3 bg-udemy-purple hover:bg-udemy-purple-dark text-white font-bold rounded transition-all shadow-md hover:shadow-lg flex items-center disabled:opacity-60 disabled:cursor-not-allowed"
+                    >
+                      {isSubmitting ? (
+                        <>
+                          <svg
+                            className="animate-spin -ml-1 mr-2 h-5 w-5 text-white"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                          >
+                            <circle
+                              className="opacity-25"
+                              cx="12"
+                              cy="12"
+                              r="10"
+                              stroke="currentColor"
+                              strokeWidth="4"
+                            ></circle>
+                            <path
+                              className="opacity-75"
+                              fill="currentColor"
+                              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                            ></path>
+                          </svg>
+                          Submitting...
+                        </>
+                      ) : (
+                        <>
+                          Submit Review <FiSend className="ml-2" />
+                        </>
+                      )}
+                    </motion.button>
+                  </div>
                 </div>
               </motion.form>
             )}
diff --git a/src/app/components/roadmaps.jsx b/src/app/components/roadmaps.jsx
new file mode 100644
index 000000000..162294ea0
--- /dev/null
+++ b/src/app/components/roadmaps.jsx
@@ -0,0 +1,796 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import Link from "next/link";
+import {
+  Compass,
+  CheckCircle2,
+  Circle,
+  ArrowRight,
+  Trophy,
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  Info,
+} from "lucide-react";
+import Footer from "@/app/components/footer";
+
+const ROADMAP_STAGES = [
+  {
+    stage: 1,
+    title: "Foundations & Basics",
+    description:
+      "Understand the fundamentals of logic building, space/time complexity analysis, and recursion.",
+    estimatedTime: "8-12 hours",
+    topics: [
+      {
+        id: "lang-basics",
+        label: "Programming language syntax & basics",
+        difficulty: "Beginner",
+        estimatedTime: "2-3 hours",
+        overview:
+          "Master core programming constructs including variables, loops, conditionals, functions, and basic I/O.",
+        concepts: [
+          "Variables & Data Types",
+          "Control Flow",
+          "Functions & Scope",
+          "Basic Input/Output",
+        ],
+        objectives: [
+          "Write clean, readable code",
+          "Understand basic program flow",
+          "Debug simple issues",
+        ],
+        resources: [
+          {
+            label: "MDN JavaScript Guide",
+            href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide",
+          },
+          {
+            label: "FreeCodeCamp JS Course",
+            href: "https://www.freecodecamp.org/",
+          },
+        ],
+        practiceLinks: [{ label: "Basic Challenges", href: "/problems/basic" }],
+      },
+      {
+        id: "big-o-analysis",
+        label: "Space & Time Complexity (Big O)",
+        difficulty: "Beginner",
+        estimatedTime: "3-4 hours",
+        overview:
+          "Learn how to analyze algorithm efficiency using Big O notation.",
+        concepts: [
+          "Time Complexity",
+          "Space Complexity",
+          "Best/Average/Worst Case",
+          "Common Complexities",
+        ],
+        objectives: [
+          "Identify complexity of code",
+          "Compare algorithms",
+          "Optimize basic solutions",
+        ],
+        resources: [
+          { label: "Big O Cheatsheet", href: "/cheatsheets" },
+          {
+            label: "Visualizing Complexity",
+            href: "https://www.bigocheatsheet.com/",
+          },
+        ],
+        practiceLinks: [],
+      },
+      {
+        id: "rec-math",
+        label: "Basic Math and Simple Recursion",
+        difficulty: "Beginner",
+        estimatedTime: "3-5 hours",
+        overview:
+          "Build intuition for recursion and essential mathematical concepts for DSA.",
+        concepts: [
+          "Factorial",
+          "Fibonacci",
+          "Exponentiation",
+          "Recursion basics",
+          "Stack overflow",
+        ],
+        objectives: [
+          "Implement recursive solutions",
+          "Convert recursion to iteration",
+          "Understand recursion depth",
+        ],
+        resources: [
+          { label: "Recursion Visualizer", href: "/visualizer/recursion" },
+        ],
+        practiceLinks: [],
+      },
+    ],
+  },
+  {
+    stage: 2,
+    title: "Linear Data Structures & Hashing",
+    description:
+      "Master arrays, linked structures, stacks, queues, and efficient key-value storage with hashing.",
+    estimatedTime: "12-18 hours",
+    topics: [
+      {
+        id: "arrays",
+        label: "Arrays & Dynamic Arrays (Strings)",
+        difficulty: "Beginner",
+        estimatedTime: "3-4 hours",
+        overview:
+          "Core linear data structure and its usage in problem solving.",
+        concepts: [
+          "1D & 2D Arrays",
+          "Dynamic Resizing",
+          "String Manipulation",
+          "Prefix Sum",
+        ],
+        objectives: [
+          "Perform common array operations efficiently",
+          "Solve sliding window & two pointers problems",
+        ],
+        resources: [],
+        practiceLinks: [],
+      },
+      {
+        id: "hashing",
+        label: "Hashing & Hash Maps",
+        difficulty: "Beginner",
+        estimatedTime: "3-4 hours",
+        overview: "Learn how to use hash tables for O(1) average-case lookups.",
+        concepts: [
+          "Hash Function",
+          "Collision Resolution",
+          "HashSet & HashMap",
+          "Frequency Counting",
+        ],
+        objectives: [
+          "Solve subarray/substring problems efficiently",
+          "Use maps for two-sum style problems",
+        ],
+        resources: [],
+        practiceLinks: [],
+      },
+      {
+        id: "linked-lists",
+        label: "Singly, Doubly, and Circular Linked Lists",
+        difficulty: "Intermediate",
+        estimatedTime: "4-5 hours",
+        overview:
+          "Dynamic linear data structure with excellent insertion/deletion properties.",
+        concepts: [
+          "Node Structure",
+          "Traversal",
+          "Insertion & Deletion",
+          "Reversal",
+          "Cycle Detection",
+        ],
+        objectives: [
+          "Implement linked list from scratch",
+          "Solve common interview problems",
+        ],
+        resources: [
+          { label: "Linked List Visualizer", href: "/visualizer/linked-list" },
+        ],
+        practiceLinks: [],
+      },
+      {
+        id: "stacks-queues",
+        label: "Stacks (LIFO) and Queues (FIFO)",
+        difficulty: "Beginner",
+        estimatedTime: "2-3 hours",
+        overview: "Abstract data types crucial for many algorithms.",
+        concepts: [
+          "Stack Operations",
+          "Queue Operations",
+          "Monotonic Stack",
+          "Deque",
+        ],
+        objectives: [
+          "Use stacks for parenthesis validation & backtracking",
+          "Use queues for BFS",
+        ],
+        resources: [
+          { label: "Stack Visualizer", href: "/visualizer/stack" },
+          { label: "Queue Visualizer", href: "/visualizer/queue" },
+        ],
+        practiceLinks: [],
+      },
+    ],
+  },
+  {
+    stage: 3,
+    title: "Sorting, Searching & Techniques",
+    description:
+      "Learn efficient ways to organize data and powerful problem-solving techniques.",
+    estimatedTime: "10-15 hours",
+    topics: [
+      {
+        id: "searching",
+        label: "Linear Search and Binary Search",
+        difficulty: "Beginner",
+        estimatedTime: "2-3 hours",
+        overview:
+          "Fundamental searching algorithms with different efficiency characteristics.",
+        concepts: ["Linear Search", "Binary Search", "Lower/Upper Bound"],
+        objectives: [
+          "Implement binary search on sorted arrays",
+          "Apply on rotated sorted arrays",
+        ],
+        resources: [],
+        practiceLinks: [],
+      },
+      {
+        id: "simple-sort",
+        label: "Bubble, Selection, Insertion Sort",
+        difficulty: "Beginner",
+        estimatedTime: "2 hours",
+        overview: "Basic comparison-based sorting algorithms.",
+        concepts: [
+          "In-place sorting",
+          "Stability",
+          "Time complexity trade-offs",
+        ],
+        objectives: ["Understand when simple sorts are useful"],
+        resources: [],
+        practiceLinks: [],
+      },
+      {
+        id: "divide-conquer-sort",
+        label: "Merge Sort and Quick Sort",
+        difficulty: "Intermediate",
+        estimatedTime: "3-4 hours",
+        overview: "Efficient divide-and-conquer sorting algorithms.",
+        concepts: ["Divide & Conquer", "Partitioning", "Merge Process"],
+        objectives: ["Implement stable and unstable efficient sorts"],
+        resources: [{ label: "Sorting Visualizer", href: "/visualizer/array" }],
+        practiceLinks: [],
+      },
+      {
+        id: "two-pointers",
+        label: "Two Pointers Technique",
+        difficulty: "Intermediate",
+        estimatedTime: "3-4 hours",
+        overview:
+          "Elegant technique for solving array and string problems efficiently.",
+        concepts: [
+          "Opposite Direction",
+          "Same Direction",
+          "Fast & Slow Pointers",
+        ],
+        objectives: ["Solve problems like container with most water, 3Sum"],
+        resources: [],
+        practiceLinks: [],
+      },
+      {
+        id: "sliding-window",
+        label: "Sliding Window",
+        difficulty: "Intermediate",
+        estimatedTime: "3-4 hours",
+        overview: "Optimized technique for subarray/substring problems.",
+        concepts: [
+          "Fixed Window",
+          "Variable Window",
+          "Longest/Shortest subarray",
+        ],
+        objectives: ["Maximize/minimize subarray sums under constraints"],
+        resources: [],
+        practiceLinks: [],
+      },
+    ],
+  },
+  {
+    stage: 4,
+    title: "Non-Linear Data Structures",
+    description: "Explore hierarchical and network-based data structures.",
+    estimatedTime: "15-20 hours",
+    topics: [
+      {
+        id: "trees-bst",
+        label: "Binary Trees & Binary Search Trees",
+        difficulty: "Intermediate",
+        estimatedTime: "5-6 hours",
+        overview:
+          "Fundamental hierarchical data structure used in many advanced algorithms.",
+        concepts: [
+          "Tree Traversals (Pre/In/Post)",
+          "BST Properties",
+          "Balanced Trees",
+        ],
+        objectives: ["Implement tree traversals", "Validate BST", "Find LCA"],
+        resources: [{ label: "Tree Visualizer", href: "/visualizer/tree" }],
+        practiceLinks: [],
+      },
+      {
+        id: "heaps",
+        label: "Binary Heaps & Priority Queues",
+        difficulty: "Intermediate",
+        estimatedTime: "3-4 hours",
+        overview: "Complete binary tree that satisfies heap property.",
+        concepts: ["Min/Max Heap", "Heapify", "Priority Queue Operations"],
+        objectives: [
+          "Implement Kth largest/smallest elements",
+          "Merge K sorted lists",
+        ],
+        resources: [],
+        practiceLinks: [],
+      },
+      {
+        id: "graphs",
+        label: "Graphs (BFS, DFS, Topological Sort, Shortest Paths)",
+        difficulty: "Intermediate",
+        estimatedTime: "6-8 hours",
+        overview:
+          "Study of connections between nodes. Core for many real-world problems.",
+        concepts: [
+          "Graph Representations",
+          "BFS & DFS",
+          "Topological Sort",
+          "Dijkstra's Algorithm",
+          "MST (Kruskal/Prim)",
+        ],
+        objectives: [
+          "Solve connectivity and pathfinding problems",
+          "Detect cycles",
+        ],
+        resources: [{ label: "Graph Visualizer", href: "/visualizer/graph" }],
+        practiceLinks: [],
+      },
+      {
+        id: "trie",
+        label: "Trie (Prefix Tree)",
+        difficulty: "Advanced",
+        estimatedTime: "3-4 hours",
+        overview: "Efficient tree for storing and searching strings.",
+        concepts: ["Insert", "Search", "Prefix Search", "Autocomplete"],
+        objectives: ["Implement word dictionary", "Solve word break problems"],
+        resources: [],
+        practiceLinks: [],
+      },
+    ],
+  },
+  {
+    stage: 5,
+    title: "Advanced Algorithmic Design",
+    description:
+      "Master optimization, search space exploration, and complex problem-solving paradigms.",
+    estimatedTime: "18-25 hours",
+    topics: [
+      {
+        id: "bit-manipulation",
+        label: "Bit Manipulation",
+        difficulty: "Intermediate",
+        estimatedTime: "3-4 hours",
+        overview: "Direct manipulation of bits for optimized solutions.",
+        concepts: [
+          "Bitwise Operators",
+          "Bit Masks",
+          "Counting Bits",
+          "Power of Two",
+        ],
+        objectives: [
+          "Solve single number, missing number problems efficiently",
+        ],
+        resources: [],
+        practiceLinks: [],
+      },
+      {
+        id: "greedy",
+        label: "Greedy Algorithms",
+        difficulty: "Intermediate",
+        estimatedTime: "4-5 hours",
+        overview: "Making locally optimal choices at each stage.",
+        concepts: [
+          "Activity Selection",
+          "Huffman Coding",
+          "Job Scheduling",
+          "Fractional Knapsack",
+        ],
+        objectives: [
+          "Prove greedy choice property",
+          "Solve interval scheduling problems",
+        ],
+        resources: [],
+        practiceLinks: [],
+      },
+      {
+        id: "backtracking",
+        label: "Backtracking",
+        difficulty: "Advanced",
+        estimatedTime: "4-6 hours",
+        overview: "Systematic way to explore all possible solutions.",
+        concepts: [
+          "N-Queens",
+          "Sudoku Solver",
+          "Subset/Permutation Generation",
+        ],
+        objectives: ["Prune search space effectively"],
+        resources: [
+          {
+            label: "Recursion & Backtracking Lab",
+            href: "/visualizer/recursion",
+          },
+        ],
+        practiceLinks: [],
+      },
+      {
+        id: "dp",
+        label: "Dynamic Programming",
+        difficulty: "Advanced",
+        estimatedTime: "7-10 hours",
+        overview:
+          "Solve complex problems by breaking them into overlapping subproblems.",
+        concepts: [
+          "Memoization vs Tabulation",
+          "0/1 Knapsack",
+          "LIS",
+          "LCS",
+          "Matrix Chain Multiplication",
+        ],
+        objectives: [
+          "Identify DP states",
+          "Build bottom-up and top-down solutions",
+        ],
+        resources: [],
+        practiceLinks: [],
+      },
+      {
+        id: "union-find",
+        label: "Union Find (Disjoint Set Union)",
+        difficulty: "Advanced",
+        estimatedTime: "3-4 hours",
+        overview: "Efficient data structure for tracking connected components.",
+        concepts: ["Path Compression", "Union by Rank/Size", "Kruskal's MST"],
+        objectives: [
+          "Detect cycles in graphs",
+          "Solve dynamic connectivity problems",
+        ],
+        resources: [],
+        practiceLinks: [],
+      },
+    ],
+  },
+];
+
+export default function Roadmaps() {
+  const [completedTopics, setCompletedTopics] = useState({});
+  const [expandedTopics, setExpandedTopics] = useState({});
+  const [mounted, setMounted] = useState(false);
+
+  // Load from localStorage
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem("algobuddy_roadmap_progress");
+      if (stored) {
+        setCompletedTopics(JSON.parse(stored));
+      }
+      const storedExpanded = localStorage.getItem("algobuddy_roadmap_expanded");
+      if (storedExpanded) {
+        setExpandedTopics(JSON.parse(storedExpanded));
+      }
+    } catch (e) {
+      console.error("Error reading roadmap progress:", e);
+    }
+    setMounted(true);
+  }, []);
+
+  // Save to localStorage
+  const handleToggle = (id) => {
+    const nextState = {
+      ...completedTopics,
+      [id]: !completedTopics[id],
+    };
+    setCompletedTopics(nextState);
+    try {
+      localStorage.setItem(
+        "algobuddy_roadmap_progress",
+        JSON.stringify(nextState),
+      );
+    } catch (e) {
+      console.error("Error saving roadmap progress:", e);
+    }
+  };
+
+  const toggleExpand = (id) => {
+    const nextExpanded = {
+      ...expandedTopics,
+      [id]: !expandedTopics[id],
+    };
+    setExpandedTopics(nextExpanded);
+    try {
+      localStorage.setItem(
+        "algobuddy_roadmap_expanded",
+        JSON.stringify(nextExpanded),
+      );
+    } catch (e) {
+      console.error("Error saving expanded state:", e);
+    }
+  };
+
+  const allTopics = ROADMAP_STAGES.flatMap((s) => s.topics);
+  const totalTopics = allTopics.length;
+  const completedCount = allTopics.filter((t) => completedTopics[t.id]).length;
+  const percentage =
+    totalTopics > 0 ? Math.round((completedCount / totalTopics) * 100) : 0;
+
+  const getDifficultyColor = (difficulty) => {
+    switch (difficulty) {
+      case "Beginner":
+        return "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400";
+      case "Intermediate":
+        return "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400";
+      case "Advanced":
+        return "bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400";
+      default:
+        return "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400";
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[var(--udemy-dark-bg)]">
+      <main className="container-app section-app">
+        <div className="mx-auto max-w-4xl">
+          {/* Header */}
+          <div className="text-center mb-16">
+            <span className="inline-flex items-center gap-2 text-[var(--color-primary)] dark:text-[var(--color-primary-light)] text-sm font-bold tracking-wider uppercase mb-4">
+              <Compass className="w-4 h-4 animate-spin-slow" />
+              Learning Path
+            </span>
+            <h1 className="text-4xl md:text-5xl font-black font-serif text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)] mb-6">
+              DSA Learning{" "}
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] dark:from-[var(--color-primary-light)] dark:to-[var(--color-primary)]">
+                Roadmap
+              </span>
+            </h1>
+            <p className="text-xl text-[var(--udemy-muted)] dark:text-[var(--udemy-dark-muted)] max-w-2xl mx-auto">
+              Follow this comprehensive step-by-step curriculum to master data
+              structures and algorithms for interviews and competitive
+              programming.
+            </p>
+          </div>
+
+          {/* Progress Tracker card */}
+          {mounted && (
+            <div className="card-surface p-6 mb-12 flex flex-col md:flex-row items-center justify-between gap-6">
+              <div className="flex items-center gap-4">
+                <div className="h-12 w-12 rounded-full bg-udemy-purple/10 text-[var(--color-primary)] dark:text-[var(--color-primary-light)] flex items-center justify-center flex-shrink-0">
+                  <Trophy className="w-6 h-6" />
+                </div>
+                <div>
+                  <h2 className="text-lg font-bold text-[var(--udemy-text)] dark:text-white">
+                    Your Progress
+                  </h2>
+                  <p className="text-sm text-[var(--udemy-muted)] dark:text-[var(--udemy-dark-muted)]">
+                    {completedCount} of {totalTopics} topics completed (
+                    {percentage}%)
+                  </p>
+                </div>
+              </div>
+              <div className="w-full md:w-64 bg-[var(--color-neutral-200)] dark:bg-[var(--color-neutral-700)] rounded-full h-3 overflow-hidden">
+                <div
+                  className="bg-[var(--color-primary)] h-full transition-all duration-500 rounded-full"
+                  style={{ width: `${percentage}%` }}
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Timeline Stages */}
+          <div className="relative border-l-2 border-[var(--color-border)] ml-4 md:ml-6 pl-6 md:pl-10 space-y-12 py-4">
+            {ROADMAP_STAGES.map((stage) => (
+              <div key={stage.stage} className="relative group">
+                {/* Timeline node icon indicator */}
+                <span className="absolute -left-[39px] md:-left-[55px] top-1.5 flex h-6 w-6 md:h-8 md:w-8 items-center justify-center rounded-full bg-white dark:bg-[var(--udemy-dark-bg)] border-2 border-[var(--color-primary)] text-xs md:text-sm font-bold text-[var(--color-primary)] transition-all">
+                  {stage.stage}
+                </span>
+
+                <div className="card-surface p-6 group-hover:border-[var(--color-primary)]/50 transition-colors duration-200">
+                  <div className="flex justify-between items-start mb-2">
+                    <h3 className="text-xl font-bold font-serif text-[var(--udemy-text)] dark:text-white">
+                      {stage.title}
+                    </h3>
+                    <div className="flex items-center gap-2 text-sm text-[var(--udemy-muted)]">
+                      <Clock className="w-4 h-4" />
+                      <span>{stage.estimatedTime}</span>
+                    </div>
+                  </div>
+
+                  <p className="text-sm text-[var(--udemy-muted)] dark:text-[var(--udemy-dark-muted)] mb-6">
+                    {stage.description}
+                  </p>
+
+                  {/* Checklist */}
+                  <div className="space-y-3 mb-6 bg-[var(--udemy-surface)] dark:bg-[var(--udemy-dark-bg)] rounded-xl p-4 border border-[var(--color-border)]/50">
+                    <h4 className="text-xs font-bold uppercase tracking-wider text-[var(--color-muted)] mb-3 flex items-center gap-2">
+                      <Info className="w-3.5 h-3.5" /> CORE TOPICS
+                    </h4>
+
+                    {stage.topics.map((topic) => {
+                      const isDone = completedTopics[topic.id];
+                      const isExpanded = expandedTopics[topic.id];
+
+                      return (
+                        <div
+                          key={topic.id}
+                          className="border border-[var(--color-border)]/50 rounded-lg overflow-hidden"
+                        >
+                          {/* Topic Header */}
+                          <div className="flex items-center justify-between p-4 bg-white dark:bg-[var(--udemy-dark-bg)]">
+                            <button
+                              onClick={() => handleToggle(topic.id)}
+                              className="flex items-start gap-3 flex-1 text-left group/btn"
+                            >
+                              <span className="mt-0.5 text-[var(--color-primary)] hover:scale-110 transition-transform">
+                                {isDone ? (
+                                  <CheckCircle2 className="w-5 h-5 fill-[var(--color-primary)] text-white" />
+                                ) : (
+                                  <Circle className="w-5 h-5 text-[var(--color-border)] group-hover/btn:text-[var(--color-primary)]" />
+                                )}
+                              </span>
+                              <div className="flex-1">
+                                <div className="flex items-center gap-3">
+                                  <span
+                                    className={`text-sm transition-colors font-medium ${
+                                      isDone
+                                        ? "text-[var(--color-muted)] line-through"
+                                        : "text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)]"
+                                    }`}
+                                  >
+                                    {topic.label}
+                                  </span>
+                                  <span
+                                    className={`text-[10px] px-2 py-0.5 rounded font-medium ${getDifficultyColor(topic.difficulty)}`}
+                                  >
+                                    {topic.difficulty}
+                                  </span>
+                                </div>
+                                <div className="text-xs text-[var(--udemy-muted)] flex items-center gap-1 mt-1">
+                                  <Clock className="w-3 h-3" />
+                                  {topic.estimatedTime}
+                                </div>
+                              </div>
+                            </button>
+
+                            <button
+                              onClick={() => toggleExpand(topic.id)}
+                              className="text-[var(--color-muted)] hover:text-[var(--udemy-text)] p-1 transition-colors"
+                            >
+                              {isExpanded ? (
+                                <ChevronDown className="w-5 h-5" />
+                              ) : (
+                                <ChevronRight className="w-5 h-5" />
+                              )}
+                            </button>
+                          </div>
+
+                          {/* Expanded Content */}
+                          {isExpanded && (
+                            <div className="px-4 pb-4 pt-1 bg-[var(--udemy-surface)] dark:bg-[var(--udemy-dark-bg)] border-t border-[var(--color-border)]/50 text-sm">
+                              <div className="prose dark:prose-invert max-w-none">
+                                <p className="text-[var(--udemy-muted)] mb-4">
+                                  {topic.overview}
+                                </p>
+
+                                {topic.concepts.length > 0 && (
+                                  <div className="mb-4">
+                                    <h5 className="font-semibold text-[var(--udemy-text)] mb-2">
+                                      Key Concepts
+                                    </h5>
+                                    <ul className="list-disc pl-5 space-y-1 text-[var(--udemy-muted)]">
+                                      {topic.concepts.map((concept, idx) => (
+                                        <li key={idx}>{concept}</li>
+                                      ))}
+                                    </ul>
+                                  </div>
+                                )}
+
+                                {topic.objectives.length > 0 && (
+                                  <div className="mb-4">
+                                    <h5 className="font-semibold text-[var(--udemy-text)] mb-2">
+                                      Learning Objectives
+                                    </h5>
+                                    <ul className="list-disc pl-5 space-y-1 text-[var(--udemy-muted)]">
+                                      {topic.objectives.map((obj, idx) => (
+                                        <li key={idx}>{obj}</li>
+                                      ))}
+                                    </ul>
+                                  </div>
+                                )}
+
+                                {topic.resources &&
+                                  topic.resources.length > 0 && (
+                                    <div className="mb-4">
+                                      <h5 className="font-semibold text-[var(--udemy-text)] mb-2">
+                                        Recommended Resources
+                                      </h5>
+                                      <div className="flex flex-wrap gap-2">
+                                        {topic.resources.map((res, idx) => (
+                                          <a
+                                            key={idx}
+                                            href={res.href}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="inline-flex items-center gap-1 text-xs font-medium text-[var(--color-primary)] hover:underline"
+                                          >
+                                            {res.label} →
+                                          </a>
+                                        ))}
+                                      </div>
+                                    </div>
+                                  )}
+
+                                {topic.practiceLinks &&
+                                  topic.practiceLinks.length > 0 && (
+                                    <div>
+                                      <h5 className="font-semibold text-[var(--udemy-text)] mb-2">
+                                        Practice
+                                      </h5>
+                                      <div className="flex flex-wrap gap-2">
+                                        {topic.practiceLinks.map(
+                                          (link, idx) => (
+                                            <Link
+                                              key={idx}
+                                              href={link.href}
+                                              className="inline-flex items-center gap-1 text-xs font-bold text-[var(--color-primary)] dark:text-[var(--color-primary-light)] hover:gap-1.5 transition-all bg-udemy-purple/5 dark:bg-udemy-purple-light/5 px-3 py-1 rounded-md"
+                                            >
+                                              {link.label}
+                                              <ArrowRight className="w-3 h-3" />
+                                            </Link>
+                                          ),
+                                        )}
+                                      </div>
+                                    </div>
+                                  )}
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+
+                  {/* Stage Practice links */}
+                  <div className="flex flex-wrap items-center gap-3 pt-4 border-t border-[var(--color-border)]">
+                    <span className="text-xs font-semibold text-[var(--color-muted)]">
+                      Practice on AlgoBuddy:
+                    </span>
+                    {(stage.topics[0]?.practiceLinks || []).length > 0 ? (
+                      stage.topics
+                        .flatMap((t) => t.practiceLinks)
+                        .map((link, idx) => (
+                          <Link
+                            key={idx}
+                            href={link.href}
+                            className="inline-flex items-center gap-1 text-xs font-bold text-[var(--color-primary)] dark:text-[var(--color-primary-light)] hover:gap-1.5 transition-all bg-udemy-purple/5 dark:bg-udemy-purple-light/5 px-2.5 py-1 rounded-md"
+                          >
+                            {link.label}
+                            <ArrowRight className="w-3 h-3" />
+                          </Link>
+                        ))
+                    ) : (
+                      <span className="text-xs text-[var(--udemy-muted)] italic">
+                        More practice links coming soon
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Back Home */}
+          <div className="mt-16 text-center">
+            <Link
+              href="/"
+              className="inline-flex items-center gap-2 px-6 py-2.5 rounded-full border border-[var(--color-border)] hover:border-[var(--color-primary)] hover:text-[var(--color-primary)] transition-all font-semibold text-sm text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)]"
+            >
+              ← Back to Home
+            </Link>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/app/components/support.jsx b/src/app/components/support.jsx
old mode 100755
new mode 100644
similarity index 88%
rename from app/components/support.jsx
rename to src/app/components/support.jsx
index 3e22196b5..0a949a37f
--- a/app/components/support.jsx
+++ b/src/app/components/support.jsx
@@ -1,7 +1,18 @@
 "use client";
 import { useState, useRef, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { FiX, FiMail, FiMessageSquare, FiSend } from "react-icons/fi";
+// -------------------------------------------------------------------
+// Fix: Added missing FiChevronRight icon import.
+// This resolves ReferenceError when rendering the "View all help articles"
+// button in the Support Center tab.
+// -------------------------------------------------------------------
+import { FiX, FiMail, FiMessageSquare, FiSend, FiChevronRight } from "react-icons/fi"; // Added FiChevronRight import for Support Center icon
+import dynamic from "next/dynamic";
+
+const Turnstile = dynamic(
+  () => import("@marsidev/react-turnstile").then((mod) => mod.Turnstile),
+  { ssr: false },
+);
 
 const ContactSupportPopup = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -15,6 +26,7 @@ const ContactSupportPopup = () => {
   const [isSubmitted, setIsSubmitted] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState("");
+  const [captchaToken, setCaptchaToken] = useState(null);
   const popupRef = useRef(null);
 
   // Close popup when clicking outside
@@ -45,16 +57,21 @@ const ContactSupportPopup = () => {
     setError("");
 
     try {
+      if (!captchaToken) {
+        throw new Error("Please complete the captcha");
+      }
+
       const response = await fetch("/api/contact", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify(formData),
+        body: JSON.stringify({ ...formData, captchaToken }),
       });
 
       if (!response.ok) {
-        throw new Error("Failed to send message");
+        const data = await response.json().catch(() => null);
+        throw new Error(data?.message || "Failed to send message");
       }
 
       setIsSubmitted(true);
@@ -64,6 +81,7 @@ const ContactSupportPopup = () => {
         message: "",
         subject: "Support Request",
       });
+      setCaptchaToken(null);
 
       // Reset form after 3 seconds
       setTimeout(() => {
@@ -229,7 +247,7 @@ const ContactSupportPopup = () => {
                             >
                               Message
                             </label>
-                            <textarea
+                          <textarea
                               id="message"
                               name="message"
                               rows="4"
@@ -241,9 +259,20 @@ const ContactSupportPopup = () => {
                             ></textarea>
                           </div>
                         </div>
+                        <div className="mt-4 flex justify-center">
+                          <Turnstile
+                            siteKey={
+                              process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY?.startsWith("1x") || 
+                              process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY?.startsWith("0x")
+                                ? process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY
+                                : "1x00000000000000000000AA"
+                              }
+                            onSuccess={(token) => setCaptchaToken(token)}
+                          />
+                        </div>
                         <button
                           type="submit"
-                          disabled={isLoading}
+                          disabled={isLoading || !captchaToken}
                           className="mt-6 w-full bg-udemy-purple hover:bg-udemy-purple-dark text-white py-3 px-4 rounded font-bold transition-colors flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed"
                         >
                           {isLoading ? (
@@ -287,11 +316,11 @@ const ContactSupportPopup = () => {
                       </h4>
                       <p className="text-blue-700 dark:text-blue-300 text-sm">
                         Check out our{" "}
-                        <a href="#" className="underline">
+                        <a href="javascript:void(0)" className="underline">
                           FAQs
                         </a>{" "}
                         or join our{" "}
-                        <a href="#" className="underline">
+                        <a href="javascript:void(0)" className="underline">
                           community forum
                         </a>
                         .
@@ -310,7 +339,7 @@ const ContactSupportPopup = () => {
                         ].map((question, index) => (
                           <a
                             key={index}
-                            href="#"
+                            href="javascript:void(0)"
                             className="block p-3 bg-zinc-100 dark:bg-zinc-700 hover:bg-zinc-200 dark:hover:bg-zinc-600 rounded-lg transition-colors"
                           >
                             {question}
diff --git a/app/components/testimonial.jsx b/src/app/components/testimonial.jsx
old mode 100755
new mode 100644
similarity index 100%
rename from app/components/testimonial.jsx
rename to src/app/components/testimonial.jsx
diff --git a/src/app/components/tutorials.jsx b/src/app/components/tutorials.jsx
new file mode 100644
index 000000000..e2213c29b
--- /dev/null
+++ b/src/app/components/tutorials.jsx
@@ -0,0 +1,232 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import Link from "next/link";
+import { Search, BookOpen, Clock, ArrowRight, Sparkles } from "lucide-react";
+import Footer from "@/app/components/footer";
+
+const TUTORIALS_DATA = [
+  {
+    id: "big-o",
+    title: "Introduction to Time & Space Complexity",
+    description: "Learn how to analyze algorithms using Big O notation. Understand the difference between O(1), O(log n), O(n), and O(n²).",
+    category: "Core Concepts",
+    difficulty: "Beginner",
+    readTime: "8 min read",
+    link: "/cheatsheets",
+    badgeColor: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
+  },
+  {
+    id: "linked-list",
+    title: "Understanding Linked Lists Inside Out",
+    description: "Deep dive into Singly, Doubly, and Circular Linked Lists. Master pointer manipulation, node traversal, and common interview questions.",
+    category: "Data Structures",
+    difficulty: "Beginner",
+    readTime: "12 min read",
+    link: "/visualizer/linked-list",
+    badgeColor: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
+  },
+  {
+    id: "stack-queue",
+    title: "Stacks and Queues: Visual Guide",
+    description: "Explore LIFO and FIFO structures. Learn about push, pop, enqueue, dequeue operations and real-world application examples.",
+    category: "Data Structures",
+    difficulty: "Beginner",
+    readTime: "10 min read",
+    link: "/visualizer/stack",
+    badgeColor: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
+  },
+  {
+    id: "binary-tree",
+    title: "Demystifying Binary Trees & BST",
+    description: "Master tree terminologies, Binary Search Tree insertion, deletion, and tree traversals (Inorder, Preorder, Postorder).",
+    category: "Data Structures",
+    difficulty: "Intermediate",
+    readTime: "15 min read",
+    link: "/visualizer/tree",
+    badgeColor: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
+  },
+  {
+    id: "sorting-algos",
+    title: "Visualizing Sorting Algorithms",
+    description: "Compare Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, and Quick Sort. See how they partition and sort data in real-time.",
+    category: "Algorithms",
+    difficulty: "Intermediate",
+    readTime: "18 min read",
+    link: "/visualizer/array",
+    badgeColor: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
+  },
+  {
+    id: "graph-traversal",
+    title: "Graph Theory: BFS and DFS Traversals",
+    description: "Learn graph representations (Adjacency Matrix/List) and how Breadth-First Search (BFS) and Depth-First Search (DFS) explore vertices.",
+    category: "Algorithms",
+    difficulty: "Advanced",
+    readTime: "20 min read",
+    link: "/visualizer/graph",
+    badgeColor: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
+  },
+  {
+    id: "recursion",
+    title: "Mastering Recursion and Call Stacks",
+    description: "Understand base cases, recurrence relations, call stack behavior, and how to convert recursive functions to iterative ones.",
+    category: "Core Concepts",
+    difficulty: "Intermediate",
+    readTime: "12 min read",
+    link: "/visualizer/recursion",
+    badgeColor: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
+  },
+  {
+    id: "complexity-analyzer",
+    title: "Analyzing Algorithm Code in Real-time",
+    description: "Use our built-in Complexity Analyzer to write code and immediately evaluate its mathematical bounds.",
+    category: "Algorithms",
+    difficulty: "Advanced",
+    readTime: "10 min read",
+    link: "/visualizer/complexity-analyzer",
+    badgeColor: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
+  },
+];
+
+const CATEGORIES = ["All", "Core Concepts", "Data Structures", "Algorithms"];
+
+export default function Tutorials() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeCategory, setActiveCategory] = useState("All");
+
+  const filteredTutorials = useMemo(() => {
+    return TUTORIALS_DATA.filter((tutorial) => {
+      const matchesSearch =
+        tutorial.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        tutorial.description.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesCategory =
+        activeCategory === "All" || tutorial.category === activeCategory;
+      return matchesSearch && matchesCategory;
+    });
+  }, [searchQuery, activeCategory]);
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[var(--udemy-dark-bg)]">
+      <main className="container-app section-app">
+        <div className="mx-auto max-w-6xl">
+          {/* Header */}
+          <div className="text-center mb-16 relative">
+            <span className="inline-flex items-center gap-2 text-[var(--color-primary)] dark:text-[var(--color-primary-light)] text-sm font-bold tracking-wider uppercase mb-4">
+              <Sparkles className="w-4 h-4 animate-pulse" />
+              AlgoBuddy Academy
+            </span>
+            <h1 className="text-4xl md:text-5xl font-black font-serif text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)] mb-6">
+              Interactive{" "}
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] dark:from-[var(--color-primary-light)] dark:to-[var(--color-primary)]">
+                DSA Tutorials
+              </span>
+            </h1>
+            <p className="text-xl text-[var(--udemy-muted)] dark:text-[var(--udemy-dark-muted)] max-w-2xl mx-auto">
+              Master the concepts theoretically, then instantly jump into our visualizers to see them in action.
+            </p>
+          </div>
+
+          {/* Controls Panel */}
+          <div className="flex flex-col md:flex-row gap-4 items-center justify-between mb-12 p-4 card-surface">
+            {/* Search Input */}
+            <div className="relative w-full md:w-80">
+              <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--color-muted)]" />
+              <input
+                type="text"
+                placeholder="Search tutorials..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-10 pr-4 py-2 text-sm bg-transparent rounded-[var(--radius-md)] border border-[var(--color-border)] outline-none focus:border-[var(--color-primary)] focus:ring-1 focus:ring-[var(--color-primary)] transition-all text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)]"
+              />
+            </div>
+
+            {/* Category Filter */}
+            <div className="flex flex-wrap gap-2 w-full md:w-auto">
+              {CATEGORIES.map((category) => (
+                <button
+                  key={category}
+                  onClick={() => setActiveCategory(category)}
+                  className={`px-4 py-2 rounded-full text-xs font-semibold transition-all border ${
+                    activeCategory === category
+                      ? "bg-[var(--color-primary)] text-white border-[var(--color-primary)]"
+                      : "bg-transparent text-[var(--udemy-muted)] dark:text-[var(--udemy-dark-muted)] border-[var(--color-border)] hover:bg-[var(--color-neutral-100)] dark:hover:bg-[var(--udemy-dark-surface)]"
+                  }`}
+                >
+                  {category}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Cards Grid */}
+          {filteredTutorials.length > 0 ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {filteredTutorials.map((item) => (
+                <div
+                  key={item.id}
+                  className="card-surface p-6 flex flex-col justify-between group hover:shadow-[var(--shadow-card-hover)] hover:-translate-y-1 transition-all duration-[var(--motion-normal)]"
+                >
+                  <div>
+                    {/* Badges */}
+                    <div className="flex items-center justify-between mb-4">
+                      <span className="text-xs font-bold text-[var(--color-primary)] dark:text-[var(--color-primary-light)] tracking-wide uppercase">
+                        {item.category}
+                      </span>
+                      <span className={`px-2.5 py-0.5 rounded-full text-xs font-semibold ${item.badgeColor}`}>
+                        {item.difficulty}
+                      </span>
+                    </div>
+
+                    {/* Content */}
+                    <h2 className="text-xl font-bold font-serif text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)] mb-3 group-hover:text-[var(--color-primary)] dark:group-hover:text-[var(--color-primary-light)] transition-colors">
+                      {item.title}
+                    </h2>
+                    <p className="text-[var(--udemy-muted)] dark:text-[var(--udemy-dark-muted)] text-sm leading-relaxed mb-6">
+                      {item.description}
+                    </p>
+                  </div>
+
+                  {/* Actions footer */}
+                  <div className="flex items-center justify-between pt-4 border-t border-[var(--color-border)]">
+                    <span className="flex items-center gap-1.5 text-xs text-[var(--color-muted)]">
+                      <Clock className="w-3.5 h-3.5" />
+                      {item.readTime}
+                    </span>
+                    <Link
+                      href={item.link}
+                      className="inline-flex items-center gap-1 text-sm font-bold text-[var(--color-primary)] dark:text-[var(--color-primary-light)] hover:gap-2 transition-all"
+                    >
+                      Start Learning
+                      <ArrowRight className="w-4 h-4" />
+                    </Link>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-16 card-surface p-8">
+              <BookOpen className="w-12 h-12 text-[var(--color-muted)] mx-auto mb-4" />
+              <h3 className="text-lg font-bold text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)] mb-2">
+                No tutorials found
+              </h3>
+              <p className="text-[var(--udemy-muted)] dark:text-[var(--udemy-dark-muted)] max-w-sm mx-auto text-sm">
+                Try searching for another keyword or change your category filter options.
+              </p>
+            </div>
+          )}
+
+          {/* Back Home */}
+          <div className="mt-16 text-center">
+            <Link
+              href="/"
+              className="inline-flex items-center gap-2 px-6 py-2.5 rounded-full border border-[var(--color-border)] hover:border-[var(--color-primary)] hover:text-[var(--color-primary)] transition-all font-semibold text-sm text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)]"
+            >
+              ← Back to Home
+            </Link>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/src/app/components/ui/ActivityHeatmap.jsx b/src/app/components/ui/ActivityHeatmap.jsx
new file mode 100644
index 000000000..e5c201d07
--- /dev/null
+++ b/src/app/components/ui/ActivityHeatmap.jsx
@@ -0,0 +1,159 @@
+"use client";
+
+import React, { useState, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+/**
+ * ActivityHeatmap Component
+ * 
+ * Renders a 365-day contribution heatmap similar to GitHub or LeetCode.
+ * Includes interactive Framer Motion tooltips and customizable intensity scaling.
+ */
+export default function ActivityHeatmap({ data, currentStreak = 0, longestStreak = 0 }) {
+  const [hoveredDay, setHoveredDay] = useState(null);
+
+  // Generate 52 weeks (364 days) of data if none provided
+  const activityData = useMemo(() => {
+    if (data && data.length > 0) return data;
+    
+    // Fallback: Generate realistic looking random data for the last 364 days
+    const generated = [];
+    const today = new Date();
+    
+    for (let i = 363; i >= 0; i--) {
+      const date = new Date(today);
+      date.setDate(date.getDate() - i);
+      
+      // Simulate recent streak if applicable
+      let count = 0;
+      if (i < currentStreak) {
+        count = Math.floor(Math.random() * 8) + 1; // 1-8 problems
+      } else {
+        // Random chance of activity on other days
+        if (Math.random() > 0.6) {
+          count = Math.floor(Math.random() * 10) + 1;
+        }
+      }
+      
+      generated.push({
+        date: date.toISOString().split('T')[0],
+        count,
+        displayDate: date.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric', year: 'numeric' })
+      });
+    }
+    return generated;
+  }, [data, currentStreak]);
+
+  // Transform flat array into 52 columns of 7 days
+  const columns = useMemo(() => {
+    const cols = [];
+    let currentColumn = [];
+    
+    activityData.forEach((day, index) => {
+      currentColumn.push(day);
+      if (currentColumn.length === 7 || index === activityData.length - 1) {
+        cols.push(currentColumn);
+        currentColumn = [];
+      }
+    });
+    
+    return cols;
+  }, [activityData]);
+
+  const getIntensityClass = (count) => {
+    if (count === 0) return "bg-slate-100 dark:bg-neutral-800/80";
+    if (count <= 2) return "bg-[#a435f0]/30 shadow-[0_0_8px_rgba(164,53,240,0.15)]";
+    if (count <= 5) return "bg-[#a435f0]/60 shadow-[0_0_8px_rgba(164,53,240,0.25)]";
+    if (count <= 8) return "bg-[#a435f0]/80 shadow-[0_0_8px_rgba(164,53,240,0.4)]";
+    return "bg-[#a435f0] shadow-[0_0_12px_rgba(164,53,240,0.6)]";
+  };
+
+  return (
+    <div className="w-full relative select-none">
+      <div className="flex justify-between items-end mb-6">
+        <div>
+          <h4 className="text-sm font-bold text-slate-700 dark:text-neutral-200 uppercase tracking-widest mb-1">Total Solved</h4>
+          <div className="text-3xl font-black text-slate-800 dark:text-white">
+            {activityData.reduce((acc, curr) => acc + curr.count, 0)} <span className="text-sm font-semibold text-slate-500 dark:text-neutral-400">in the last year</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Heatmap Grid Container */}
+      <div className="flex gap-2 relative">
+        {/* Day Labels */}
+        <div className="flex flex-col gap-[6px] mt-6 text-[10px] font-semibold text-slate-400 pr-2">
+          <span className="h-[14px]">Mon</span>
+          <span className="h-[14px]"></span>
+          <span className="h-[14px]">Wed</span>
+          <span className="h-[14px]"></span>
+          <span className="h-[14px]">Fri</span>
+          <span className="h-[14px]"></span>
+        </div>
+
+        {/* The Grid */}
+        <div className="flex gap-[6px] overflow-x-auto no-scrollbar pb-4" onMouseLeave={() => setHoveredDay(null)}>
+          {columns.map((col, colIndex) => {
+            // Only show month label for the first column of a month
+            const firstDay = new Date(col[0].date);
+            const showMonth = firstDay.getDate() <= 7;
+            
+            return (
+              <div key={`col-${colIndex}`} className="flex flex-col gap-[6px] min-w-max relative">
+                <div className="h-5 text-[10px] font-semibold text-slate-400">
+                  {showMonth ? firstDay.toLocaleDateString('en-US', { month: 'short' }) : ''}
+                </div>
+                {col.map((day, dayIndex) => (
+                  <div 
+                    key={day.date}
+                    onMouseEnter={() => setHoveredDay({ ...day, colIndex, dayIndex })}
+                    className={`w-[14px] h-[14px] rounded-sm transition-all duration-300 cursor-pointer hover:ring-2 hover:ring-[#a435f0]/50 hover:scale-125 z-10 ${getIntensityClass(day.count)}`}
+                  />
+                ))}
+              </div>
+            );
+          })}
+
+          {/* Floating Tooltip */}
+          <AnimatePresence>
+            {hoveredDay && (
+              <motion.div
+                initial={{ opacity: 0, y: 10, scale: 0.95 }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={{ opacity: 0, y: 10, scale: 0.95 }}
+                transition={{ duration: 0.15, ease: "easeOut" }}
+                className="absolute z-50 pointer-events-none"
+                style={{ 
+                  // Calculate rough absolute position based on colIndex and dayIndex (plus padding/gap)
+                  left: `calc(${hoveredDay.colIndex * 20}px + 45px)`, 
+                  top: `calc(${hoveredDay.dayIndex * 20}px - 15px)`,
+                  transform: 'translate(-50%, -100%)'
+                }}
+              >
+                <div className="bg-slate-900/95 backdrop-blur text-white px-3 py-2 rounded-xl text-xs font-medium shadow-2xl border border-slate-700/50 whitespace-nowrap flex flex-col items-center">
+                  <span className="text-[#a435f0] font-black">{hoveredDay.count} {hoveredDay.count === 1 ? 'submission' : 'submissions'}</span>
+                  <span className="text-slate-400 text-[10px] mt-0.5">{hoveredDay.displayDate}</span>
+                  {/* Tooltip Arrow */}
+                  <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-[6px] border-transparent border-t-slate-900/95"></div>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
+
+      {/* Legend */}
+      <div className="flex items-center gap-2 mt-2 justify-end text-[10px] font-bold text-slate-500 uppercase tracking-widest">
+        <span>Less</span>
+        <div className="flex gap-1.5">
+          <div className="w-[14px] h-[14px] rounded-sm bg-slate-100 dark:bg-neutral-800/80"></div>
+          <div className="w-[14px] h-[14px] rounded-sm bg-[#a435f0]/30"></div>
+          <div className="w-[14px] h-[14px] rounded-sm bg-[#a435f0]/60"></div>
+          <div className="w-[14px] h-[14px] rounded-sm bg-[#a435f0]/80"></div>
+          <div className="w-[14px] h-[14px] rounded-sm bg-[#a435f0]"></div>
+        </div>
+        <span>More</span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/ui/AlgorithmComparator.jsx b/src/app/components/ui/AlgorithmComparator.jsx
new file mode 100644
index 000000000..eff115bd5
--- /dev/null
+++ b/src/app/components/ui/AlgorithmComparator.jsx
@@ -0,0 +1,77 @@
+"use client";
+
+export default function AlgorithmComparator({ algorithms = [] }) {
+  return (
+    <div className="overflow-x-auto rounded-2xl border border-neutral-200 dark:border-neutral-800 shadow-sm bg-white dark:bg-neutral-900">
+      <table className="w-full border-collapse">
+        <thead className="bg-gradient-to-r from-violet-50 via-purple-50 to-indigo-50 dark:from-neutral-800 dark:via-neutral-900 dark:to-neutral-800">
+          <tr>
+            <th className="px-4 py-4 text-left text-xs font-black uppercase tracking-wider text-neutral-600 dark:text-neutral-300">
+              Algorithm
+            </th>
+            <th className="px-4 py-4 text-left text-xs font-black uppercase tracking-wider text-neutral-600 dark:text-neutral-300">
+              Best
+            </th>
+            <th className="px-4 py-4 text-left text-xs font-black uppercase tracking-wider text-neutral-600 dark:text-neutral-300">
+              Average
+            </th>
+            <th className="px-4 py-4 text-left text-xs font-black uppercase tracking-wider text-neutral-600 dark:text-neutral-300">
+              Worst
+            </th>
+            <th className="px-4 py-4 text-left text-xs font-black uppercase tracking-wider text-neutral-600 dark:text-neutral-300">
+              Space
+            </th>
+            <th className="px-4 py-4 text-left text-xs font-black uppercase tracking-wider text-neutral-600 dark:text-neutral-300">
+              Stable
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {algorithms.map((algo, index) => (
+            <tr
+              key={algo.name}
+              className={`border-t border-neutral-200 dark:border-neutral-800 transition-all hover:bg-violet-50/60 dark:hover:bg-neutral-800/60 ${
+                index % 2 === 0
+                  ? "bg-white dark:bg-neutral-900"
+                  : "bg-neutral-50/50 dark:bg-neutral-950/40"
+              }`}
+            >
+              <td className="px-4 py-4 font-bold text-neutral-900 dark:text-white">
+                {algo.name}
+              </td>
+
+              <td className="px-4 py-4 text-sm font-semibold text-emerald-600 dark:text-emerald-400">
+                {algo.best}
+              </td>
+
+              <td className="px-4 py-4 text-sm font-semibold text-blue-600 dark:text-blue-400">
+                {algo.average}
+              </td>
+
+              <td className="px-4 py-4 text-sm font-semibold text-rose-600 dark:text-rose-400">
+                {algo.worst}
+              </td>
+
+              <td className="px-4 py-4 text-sm font-semibold text-violet-600 dark:text-violet-400">
+                {algo.space}
+              </td>
+
+              <td className="px-4 py-4">
+                <span
+                  className={`px-3 py-1 rounded-full text-xs font-black tracking-wide border ${
+                    algo.stable
+                      ? "bg-emerald-100 text-emerald-700 border-emerald-300 dark:bg-emerald-950/40 dark:text-emerald-300 dark:border-emerald-800"
+                      : "bg-rose-100 text-rose-700 border-rose-300 dark:bg-rose-950/40 dark:text-rose-300 dark:border-rose-800"
+                  }`}
+                >
+                  {algo.stable ? "Stable" : "Unstable"}
+                </span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/ui/ArticleActions.jsx b/src/app/components/ui/ArticleActions.jsx
new file mode 100644
index 000000000..99a35656e
--- /dev/null
+++ b/src/app/components/ui/ArticleActions.jsx
@@ -0,0 +1,35 @@
+"use client";
+import { useState } from "react";
+import { Copy, Share2, Check } from "lucide-react";
+
+export default function ArticleActions() {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(window.location.href);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  };
+
+  const handleShare = async () => {
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title: document.title,
+          url: window.location.href,
+        });
+      } catch (err) {
+        console.error("Share failed: ", err);
+      }
+    } else {
+      handleCopy();
+    }
+  };
+ 
+  return null;
+
+}
diff --git a/src/app/components/ui/AuthForm.jsx b/src/app/components/ui/AuthForm.jsx
new file mode 100644
index 000000000..616047015
--- /dev/null
+++ b/src/app/components/ui/AuthForm.jsx
@@ -0,0 +1,404 @@
+"use client";
+import Image from "next/image";
+import { useState } from "react";
+import { supabase } from "../../../lib/supabase";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Mail, Lock, User, LogIn, UserPlus, Loader2, Eye, EyeOff } from "lucide-react";
+import toast from "react-hot-toast";
+import { motion } from "framer-motion";
+import Link from "next/link";
+import dynamic from "next/dynamic";
+import { useUser } from "@/features/user/UserContext";
+import { api } from "@/lib/apiClient";
+
+const Turnstile = dynamic(
+  () => import("@marsidev/react-turnstile").then((mod) => mod.Turnstile),
+  { ssr: false },
+);
+
+export default function AuthForm({ isLogin = true }) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [name, setName] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [emailError, setEmailError] = useState("");
+  const [passwordError, setPasswordError] = useState("");
+  const [confirmError, setConfirmError] = useState("");
+  const [captchaToken, setCaptchaToken] = useState(null);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const redirectTo = searchParams.get("next") || "/";
+  const { setUser } = useUser();
+
+  const validateEmail = (value) => {
+    if (!value) {
+      setEmailError("");
+      return true;
+    }
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(value)) {
+      setEmailError("Please enter a valid email address");
+      return false;
+    }
+    setEmailError("");
+    return true;
+  };
+
+  const allRequirementsMet = password !== "";
+  const passwordsMatch = password === confirmPassword && password !== "";
+
+  // Real-time validation
+  const validatePasswords = (passVal, confirmVal) => {
+    setPasswordError("");
+
+    const currentPass = passVal !== undefined ? passVal : password;
+    const currentConfirm = confirmVal !== undefined ? confirmVal : confirmPassword;
+    const match = currentPass === currentConfirm && currentPass !== "";
+
+    if (currentConfirm && !match) {
+      setConfirmError("Passwords do not match");
+    } else {
+      setConfirmError("");
+    }
+  };
+
+  const handleAuth = async (event) => {
+    event?.preventDefault();
+    setLoading(true);
+    setError("");
+
+    if (!validateEmail(email)) {
+      setLoading(false);
+      return;
+    }
+
+    if (!isLogin) {
+      if (!allRequirementsMet) {
+        setPasswordError("Please meet all password requirements");
+        setLoading(false);
+        return;
+      }
+
+      if (!passwordsMatch) {
+        setConfirmError("Passwords do not match");
+        setLoading(false);
+        return;
+      }
+    }
+
+    if (!captchaToken) {
+      setError("Please complete captcha");
+      setLoading(false);
+      return;
+    }
+
+    try {
+      if (isLogin) {
+        const data = await api.request("/api/auth", {
+          method: "POST",
+          body: { email, password, captchaToken, action: "login" },
+        });
+        if (!data.success) throw new Error(data.message || "Login failed");
+
+        const {
+          data: { user },
+        } = await supabase.auth.getUser();
+        setUser(user || null);
+        router.push(redirectTo);
+      } else {
+        const data = await api.request("/api/auth", {
+          method: "POST",
+          body: { email, password, captchaToken, action: "signup", name },
+        });
+        if (!data.success) throw new Error(data.message || "Signup failed");
+        toast.success(data.message || "Account created! Please sign in.");
+        router.push("/login");
+      }
+    } catch (err) {
+      setError(err.message || "Something went wrong");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleGoogleSignIn = async () => {
+    const callbackUrl = new URL(`${window.location.origin}/auth/callback`);
+    if (redirectTo && redirectTo !== "/") {
+      callbackUrl.searchParams.set("next", redirectTo);
+    }
+    const { error } = await supabase.auth.signInWithOAuth({
+      provider: "google",
+      options: {
+        redirectTo: callbackUrl.toString(),
+        queryParams: {
+          access_type: "offline",
+          prompt: "consent",
+        },
+      },
+    });
+    if (error) setError(error.message);
+  };
+
+  const turnstileSiteKey =
+    process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY &&
+    process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY !== "Your Cloudfare Captcha Key"
+      ? process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY
+      : "1x00000000000000000000AA";
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4 bg-udemy-surface dark:bg-udemy-dark-bg">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="w-full max-w-md bg-white dark:bg-udemy-dark-surface rounded-xl shadow-lg overflow-hidden border border-udemy-border dark:border-udemy-dark-border"
+      >
+        {/* Header */}
+        <div className="bg-udemy-purple p-6 text-white">
+          <div className="mb-4 text-white hover:text-white/80 hover:-translate-x-1 transition cursor-pointer">
+            <Link href="/">← Back To Home</Link>
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold font-sans">
+              {isLogin ? "Welcome Back" : "Create Account"}
+            </h1>
+            <p className="text-purple-200 text-sm mt-1">
+              {isLogin ? "Sign in to access Arena" : "Join us to get started"}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex justify-center items-center p-6">
+          <button
+            onClick={handleGoogleSignIn}
+            disabled={loading}
+            className="w-full flex items-center justify-center py-3 px-4 rounded-lg border border-udemy-border dark:border-udemy-dark-border bg-white dark:bg-udemy-dark-surface text-udemy-text dark:text-udemy-dark-text font-medium hover:bg-udemy-surface dark:hover:bg-udemy-dark-bg duration-300 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <Image
+              src="/google.webp"
+              width={24}
+              height={24}
+              alt=""
+              aria-hidden="true"
+            />
+            <span className="mx-2">Continue with Google</span>
+          </button>
+        </div>
+
+        <div className="relative flex items-center px-6">
+          <div className="flex-grow border-t border-udemy-border dark:border-udemy-dark-border"></div>
+          <span className="flex-shrink mx-4 text-udemy-muted dark:text-udemy-dark-muted">
+            or
+          </span>
+          <div className="flex-grow border-t border-udemy-border dark:border-udemy-dark-border"></div>
+        </div>
+
+        <div className="p-6 space-y-4">
+          {error && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              id="error-message"
+              role="alert"
+              className="bg-red-100 dark:bg-red-900/30 border-l-4 border-red-500 text-red-700 dark:text-red-300 p-3 rounded"
+            >
+              {error}
+            </motion.div>
+          )}
+
+          <form onSubmit={handleAuth} noValidate className="space-y-4">
+            <div>
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 pl-3 w-10 flex items-center pointer-events-none">
+                  <Mail
+                    size={18}
+                    className="text-gray-400 dark:text-gray-500"
+                  />
+                </div>
+                <input
+                  type="email"
+                  aria-label="Email address"
+                  disabled={loading}
+                  className="w-full pl-10 pr-4 py-3 rounded-lg border border-udemy-border dark:border-udemy-dark-border focus:outline-none focus:ring-2 focus:ring-udemy-purple bg-white dark:bg-udemy-dark-surface text-udemy-text dark:text-udemy-dark-text"
+                  placeholder="Email address"
+                  value={email}
+                  onChange={(e) => {
+                    setEmail(e.target.value);
+                    validateEmail(e.target.value);
+                  }}
+                />
+              </div>
+              {emailError && (
+                <p className="mt-1 text-sm text-red-600 dark:text-red-400">
+                  {emailError}
+                </p>
+              )}
+            </div>
+
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Lock size={18} className="text-gray-400 dark:text-gray-500" />
+              </div>
+              <input
+                type={showPassword ? "text" : "password"}
+                aria-label="Password"
+                disabled={loading}
+                className="w-full pl-10 pr-10 py-3 rounded-lg border border-udemy-border dark:border-udemy-dark-border focus:outline-none focus:ring-2 focus:ring-udemy-purple bg-white dark:bg-udemy-dark-surface text-udemy-text dark:text-udemy-dark-text"
+                placeholder="Password"
+                value={password}
+                onChange={(e) => {
+                  const val = e.target.value;
+                  setPassword(val);
+                  validatePasswords(val, confirmPassword);
+                }}
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
+                aria-label={showPassword ? "Hide password" : "Show password"}
+              >
+                {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+              </button>
+            </div>
+
+            {/* Password Requirements */}
+            {!isLogin && passwordError && (
+              <div className="text-sm space-y-1 pl-1">
+                <p className="text-red-600 dark:text-red-400 mt-1">
+                  {passwordError}
+                </p>
+              </div>
+            )}
+
+            {/* Confirm Password - Only for Signup */}
+            {!isLogin && (
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <Lock
+                    size={18}
+                    className="text-gray-400 dark:text-gray-500"
+                  />
+                </div>
+                <input
+                  type={showConfirmPassword ? "text" : "password"}
+                  aria-label="Confirm Password"
+                  disabled={loading}
+                  className="w-full pl-10 pr-10 py-3 rounded-lg border border-udemy-border dark:border-udemy-dark-border focus:outline-none focus:ring-2 focus:ring-udemy-purple bg-white dark:bg-udemy-dark-surface text-udemy-text dark:text-udemy-dark-text"
+                  placeholder="Confirm Password"
+                  value={confirmPassword}
+                  onChange={(e) => {
+                    const val = e.target.value;
+                    setConfirmPassword(val);
+                    validatePasswords(password, val);
+                  }}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                  className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
+                  aria-label={showConfirmPassword ? "Hide password" : "Show password"}
+                >
+                  {showConfirmPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                </button>
+                {confirmError && (
+                  <p className="mt-1 text-sm text-red-600 dark:text-red-400">
+                    {confirmError}
+                  </p>
+                )}
+              </div>
+            )}
+
+            {/* Turnstile */}
+            <div className="flex justify-center">
+              <Turnstile
+                siteKey={turnstileSiteKey}
+                onSuccess={(token) => setCaptchaToken(token)}
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={
+                loading ||
+                !captchaToken ||
+                (email && emailError) ||
+                (!isLogin && !allRequirementsMet) ||
+                (!isLogin && !passwordsMatch)
+              }
+              className={`w-full flex items-center justify-center py-3 px-4 rounded text-white font-bold transition-all ${
+                loading ||
+                !captchaToken ||
+                (email && emailError) ||
+                (!isLogin && !allRequirementsMet) ||
+                (!isLogin && !passwordsMatch)
+                  ? "bg-gray-400 dark:bg-gray-600 cursor-not-allowed"
+                  : "bg-udemy-purple hover:bg-udemy-purple-dark shadow-md hover:shadow-lg"
+              }`}
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Processing...
+                </>
+              ) : isLogin ? (
+                <>
+                  <LogIn size={18} className="mr-2" /> Continue
+                </>
+              ) : (
+                <>
+                  <UserPlus size={18} className="mr-2" /> Create Account
+                </>
+              )}
+            </button>
+          </form>
+
+          {/* Switch forms */}
+          <div className="text-center text-sm text-udemy-muted dark:text-udemy-dark-muted">
+            {isLogin ? (
+              <p>
+                Don't have an account?{" "}
+                <Link
+                  href="/signup"
+                  className="text-udemy-purple dark:text-udemy-purple-light hover:underline font-semibold"
+                >
+                  Sign up
+                </Link>
+              </p>
+            ) : (
+              <p>
+                Already have an account?{" "}
+                <Link
+                  href="/login"
+                  className="text-udemy-purple dark:text-udemy-purple-light hover:underline font-semibold"
+                >
+                  Sign in
+                </Link>
+              </p>
+            )}
+          </div>
+
+          <div className="text-center text-xs text-udemy-muted dark:text-udemy-dark-muted mt-6">
+            By continuing, you agree to our{" "}
+            <Link
+              href="/terms"
+              className="text-udemy-purple dark:text-udemy-purple-light hover:underline"
+            >
+              Terms of Service
+            </Link>{" "}
+            and{" "}
+            <Link
+              href="/privacy"
+              className="text-udemy-purple dark:text-udemy-purple-light hover:underline"
+            >
+              Privacy Policy
+            </Link>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+}
diff --git a/src/app/components/ui/AutoTrackVisit.jsx b/src/app/components/ui/AutoTrackVisit.jsx
new file mode 100644
index 000000000..5d90c9505
--- /dev/null
+++ b/src/app/components/ui/AutoTrackVisit.jsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { useEffect } from "react";
+import { usePathname } from "next/navigation";
+import { useRecentlyViewed } from "@/app/hooks/useRecentlyViewed";
+
+export default function AutoTrackVisit({ title }) {
+  const pathname = usePathname();
+  const { addRecentlyViewed } = useRecentlyViewed();
+
+  useEffect(() => {
+    addRecentlyViewed({
+      name: title,
+      path: pathname,
+      category: "Visualizer",
+    });
+  }, [title, pathname]);
+
+  return null;
+}
\ No newline at end of file
diff --git a/src/app/components/ui/BookmarkSection.jsx b/src/app/components/ui/BookmarkSection.jsx
new file mode 100644
index 000000000..cd5cbe775
--- /dev/null
+++ b/src/app/components/ui/BookmarkSection.jsx
@@ -0,0 +1,38 @@
+"use client";
+import { useBookmark } from "@/app/hooks/useBookmark";
+import Link from "next/link";
+
+export default function BookmarkSection() {
+  const { bookmarks, removeBookmark, clearBookmarks } = useBookmark();
+
+  if (bookmarks.length === 0) return null;
+
+  return (
+    <div className="mb-8 px-4">
+      <div className="flex justify-between items-center mb-3">
+        <h2 className="text-xl font-semibold">🔖 My Bookmarks</h2>
+        <button
+          onClick={clearBookmarks}
+          className="text-sm text-gray-500 hover:text-red-500"
+        >
+          Clear All
+        </button>
+      </div>
+      <div className="flex flex-wrap gap-3">
+        {bookmarks.map((item) => (
+          <div key={item.path} className="flex items-center gap-1 px-3 py-2 rounded-lg border border-purple-300 dark:border-purple-600 bg-white dark:bg-[#1c1d1f]">
+            <Link href={item.path} className="text-purple-700 dark:text-purple-300 text-sm font-medium hover:underline">
+              {item.name}
+            </Link>
+            <button
+              onClick={() => removeBookmark(item.path)}
+              className="text-gray-400 hover:text-red-400 ml-1 text-xs"
+            >
+              ✕
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/ui/Breadcrumbs.jsx b/src/app/components/ui/Breadcrumbs.jsx
new file mode 100644
index 000000000..f01e0d4e8
--- /dev/null
+++ b/src/app/components/ui/Breadcrumbs.jsx
@@ -0,0 +1,52 @@
+"use client";
+import { ChevronRight } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const VISUALIZER_SLUG_BY_SEGMENT = {
+  linkedlist: "linked-list",
+  "dry-run": "code-lab",
+  "complexity-analyzer": "code-lab",
+};
+
+export default function Breadcrumbs({ paths }) {
+  const pathname = usePathname();
+  const pathSegments = pathname?.split("/").filter(Boolean) ?? [];
+  const isVisualizer = pathSegments[0] === "visualizer";
+  const visualizerSegment = pathSegments[1] || "";
+  const visualizerSlug = VISUALIZER_SLUG_BY_SEGMENT[visualizerSegment] || visualizerSegment;
+  const categoryHref = `/visualizer/${visualizerSlug}`;
+
+  const getHref = (path, index) => {
+    if (path.href) return path.href;
+    if (!isVisualizer) return null;
+    if (index > 1 && index < paths.length - 1) {
+      return categoryHref;
+    }
+    return null;
+  };
+
+  return (
+    <nav className="flex items-center text-sm text-gray-600 dark:text-gray-300" aria-label="Breadcrumb">
+      {paths.map((path, index) => (
+        <div key={index} className="flex items-center">
+          {getHref(path, index) ? (
+            <Link
+              href={getHref(path, index)}
+              className="hover:text-black dark:hover:text-white transition-colors"
+            >
+              {path.name}
+            </Link>
+          ) : (
+            <span className="text-surface-700 dark:text-surface-300">
+              {path.name}
+            </span>
+          )}
+          {index !== paths.length - 1 && (
+            <ChevronRight className="mx-2 h-4 w-4 text-gray-400 dark:text-gray-500" />
+          )}
+        </div>
+      ))}
+    </nav>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/ui/Chatbot.jsx b/src/app/components/ui/Chatbot.jsx
new file mode 100644
index 000000000..4a463de37
--- /dev/null
+++ b/src/app/components/ui/Chatbot.jsx
@@ -0,0 +1,860 @@
+"use client";
+
+/**
+ * AlgoBuddy AI Chatbot — Frontend Component
+ * Path: app/components/Chatbot/Chatbot.jsx
+ *
+ * Features:
+ *  - Framer Motion floating widget anchored bottom-right
+ *  - Unread message badge on trigger button
+ *  - Welcome screen with rich suggestion chips (6 chips across 3 categories)
+ *  - SSE streaming with live cursor
+ *  - react-markdown + remark-gfm for full Markdown rendering
+ *  - Syntax-highlighted code blocks with Copy button per block
+ *  - Full conversational memory (message history sent per request)
+ *  - Clean typed error UI (never raw stack traces)
+ *  - Auto-resize textarea, keyboard shortcuts
+ *  - AlgoBuddy purple brand theme
+ *
+ * Dependencies:
+ *   npm install react-markdown remark-gfm framer-motion lucide-react @anthropic-ai/sdk
+ */
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  MessageCircle,
+  X,
+  Send,
+  User,
+  Copy,
+  Check,
+  AlertCircle,
+  Loader2,
+  ChevronDown,
+  RotateCcw,
+  ExternalLink,
+} from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { api } from "@/lib/apiClient";
+import { CSRF_HEADER_NAME } from "@/lib/csrfConstants";
+
+// ─── Custom Robot Icon matching AlgoBuddy Theme ──────────────────────────────
+
+function AlgoBotIcon({ className = "w-5 h-5", ...props }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      {/* Antennas / Signal */}
+      <circle cx="12" cy="3" r="1" fill="currentColor" />
+      <path d="M12 4v3M9 6h6" strokeWidth="1.5" />
+      {/* Head */}
+      <rect x="4" y="8" width="16" height="12" rx="3" fill="currentColor" fillOpacity="0.1" />
+      {/* Eyes */}
+      <circle cx="8.5" cy="13" r="1.2" fill="currentColor" />
+      <circle cx="15.5" cy="13" r="1.2" fill="currentColor" />
+      {/* Mouth */}
+      <path d="M10 16.5h4" strokeWidth="1.8" />
+      {/* Side Bolts / Programming Brackets */}
+      <path d="M2.5 12a1.5 1.5 0 0 1 1.5-1.5M21.5 12a1.5 1.5 0 0 0-1.5-1.5" />
+    </svg>
+  );
+}
+
+// ─── Welcome Message ──────────────────────────────────────────────────────────
+
+const WELCOME_MESSAGE = {
+  role: "assistant",
+  id: "welcome",
+  content: `Greetings! I'm **AlgoBot**
+
+I can help you:
+- Explore **AlgoBuddy** features
+- Learn **DSA** concepts & roadmaps
+- Get clear **code walkthroughs**
+
+Choose a question below or start typing!`,
+};
+
+const SUGGESTION_QUESTIONS = [
+  {
+    id: "q1",
+    label: "What is AlgoBuddy?",
+    query: "What is AlgoBuddy? Explain it in simple terms so even a non-technical person understands.",
+  },
+  {
+    id: "q2",
+    label: "How can this help me?",
+    query: "How can AlgoBuddy help me as a student? What features should I start with?",
+  },
+  {
+    id: "q3",
+    label: "What can I visualize?",
+    query: "What algorithms and data structures can I visualize on AlgoBuddy? Give me the complete list.",
+  },
+  {
+    id: "q4",
+    label: "Tell me about Practice Arena",
+    query: "Explain the Practice Arena feature on AlgoBuddy. How does it help me improve my coding?",
+  },
+  {
+    id: "q5",
+    label: "Binary Search explanation",
+    query: "Explain Binary Search with a real-world analogy, a step-by-step code walkthrough in Python, a worked example, and time/space complexity.",
+  },
+  {
+    id: "q6",
+    label: "DSA learning roadmap",
+    query: "I'm a complete beginner. Give me a step-by-step DSA learning roadmap and tell me how AlgoBuddy can help at each stage.",
+  },
+];
+
+// ─── Code Block with Copy ─────────────────────────────────────────────────────
+
+function CodeBlock({ children, className }) {
+  const [copied, setCopied] = useState(false);
+  const language = className?.replace("language-", "") || "code";
+  const code = String(children).trim();
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch { }
+  };
+
+  return (
+    <div className="my-3 rounded-xl overflow-hidden border border-slate-200 dark:border-slate-800 bg-[#0f0f16] dark:bg-slate-950 shadow-lg">
+      <div className="flex items-center justify-between px-4 py-2 bg-slate-100 dark:bg-slate-900/90 border-b border-slate-200 dark:border-slate-800/50">
+        <div className="flex items-center gap-2">
+          <div className="flex gap-1.5">
+            <span className="w-2.5 h-2.5 rounded-full bg-[#ff5f56]" />
+            <span className="w-2.5 h-2.5 rounded-full bg-[#ffbd2e]" />
+            <span className="w-2.5 h-2.5 rounded-full bg-[#27c93f]" />
+          </div>
+          <span className="text-xs font-mono text-slate-500 dark:text-slate-400 tracking-widest uppercase ml-1">
+            {language}
+          </span>
+        </div>
+        <button
+          onClick={handleCopy}
+          className="flex items-center gap-1.5 text-xs text-slate-500 dark:text-slate-400 hover:text-primary dark:hover:text-emerald-400 transition-colors duration-150 px-2 py-1 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800/50"
+          aria-label="Copy code"
+        >
+          {copied ? (
+            <>
+              <Check size={12} className="text-emerald-500 dark:text-emerald-400" />
+              <span className="text-emerald-500 dark:text-emerald-400 font-medium">Copied!</span>
+            </>
+          ) : (
+            <>
+              <Copy size={12} />
+              <span>Copy</span>
+            </>
+          )}
+        </button>
+      </div>
+      <pre className="overflow-x-auto p-4 text-[13px] leading-relaxed scrollbar-thin [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-slate-800/80 [&::-webkit-scrollbar-thumb]:rounded-full">
+        <code className="font-mono text-slate-200 whitespace-pre">{code}</code>
+      </pre>
+    </div>
+  );
+}
+
+// ─── Markdown Components ──────────────────────────────────────────────────────
+
+const mdComponents = {
+  code({ inline, className, children, ...props }) {
+    if (inline) {
+      return (
+        <code
+          className="px-1.5 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-primary dark:text-purple-300 font-mono text-[0.85em]"
+          {...props}
+        >
+          {children}
+        </code>
+      );
+    }
+    return <CodeBlock className={className}>{children}</CodeBlock>;
+  },
+  h2: ({ children }) => (
+    <h2 className="text-[14px] font-bold text-slate-800 dark:text-white mt-4 mb-2 flex items-center gap-2 border-b border-purple-500/20 pb-1.5">
+      {children}
+    </h2>
+  ),
+  h3: ({ children }) => (
+    <h3 className="text-[13px] font-semibold text-primary dark:text-purple-300 mt-3 mb-1">{children}</h3>
+  ),
+  p: ({ children }) => (
+    <p className="text-[13px] text-slate-600 dark:text-slate-300 leading-relaxed mb-2 last:mb-0">{children}</p>
+  ),
+  ul: ({ children }) => <ul className="my-2 space-y-1 pl-1">{children}</ul>,
+  ol: ({ children }) => (
+    <ol className="my-2 space-y-1 pl-4 list-decimal list-outside text-[13px] text-slate-600 dark:text-slate-300">{children}</ol>
+  ),
+  li: ({ children }) => (
+    <li className="flex gap-2 text-[13px] text-slate-600 dark:text-slate-300 leading-relaxed">
+      <span className="text-primary dark:text-purple-400 mt-0.5 shrink-0">›</span>
+      <span>{children}</span>
+    </li>
+  ),
+  strong: ({ children }) => (
+    <strong className="font-semibold text-slate-850 dark:text-white">{children}</strong>
+  ),
+  table: ({ children }) => (
+    <div className="overflow-x-auto my-3 border border-slate-200 dark:border-slate-800 rounded-lg">
+      <table className="w-full text-[12px] border-collapse overflow-hidden">
+        {children}
+      </table>
+    </div>
+  ),
+  thead: ({ children }) => (
+    <thead className="bg-slate-100 dark:bg-purple-950/40 text-slate-700 dark:text-purple-200">{children}</thead>
+  ),
+  tbody: ({ children }) => (
+    <tbody className="divide-y divide-slate-200 dark:divide-slate-800/50">{children}</tbody>
+  ),
+  tr: ({ children }) => <tr className="hover:bg-slate-50/50 dark:hover:bg-slate-800/40 transition-colors">{children}</tr>,
+  th: ({ children }) => (
+    <th className="px-3 py-2 text-left font-semibold border-b border-slate-200 dark:border-slate-700/50">{children}</th>
+  ),
+  td: ({ children }) => (
+    <td className="px-3 py-2 text-slate-600 dark:text-slate-300 border-r last:border-0 border-slate-200 dark:border-slate-700/30">{children}</td>
+  ),
+  blockquote: ({ children }) => (
+    <blockquote className="border-l-2 border-primary/50 dark:border-purple-500/50 pl-3 my-2 text-slate-500 dark:text-slate-400 italic text-[13px]">
+      {children}
+    </blockquote>
+  ),
+  a: ({ href, children }) => (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-primary dark:text-purple-400 hover:text-primary-dark dark:hover:text-purple-300 underline underline-offset-2 inline-flex items-center gap-0.5"
+    >
+      {children}
+      <ExternalLink size={10} />
+    </a>
+  ),
+};
+
+// ─── Message Bubble ───────────────────────────────────────────────────────────
+
+function MessageBubble({ message }) {
+  const isUser = message.role === "user";
+  const isError = message.isError;
+
+  if (message.id === "welcome") {
+    return (
+      <motion.div
+        initial={{ opacity: 0, y: 10, scale: 0.98 }}
+        animate={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ duration: 0.22, ease: "easeOut" }}
+        className="flex gap-2.5"
+      >
+        {/* Avatar */}
+        <div className="shrink-0 w-7 h-7 rounded-xl bg-primary flex items-center justify-center mt-0.5 shadow-sm">
+          <AlgoBotIcon className="w-3.5 h-3.5 text-white" />
+        </div>
+
+        {/* Welcome Card content */}
+        <div className="max-w-[84%] rounded-2xl px-5 py-4 bg-slate-50 dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800/60 rounded-tl-sm shadow-sm backdrop-blur-sm">
+          <h3 className="text-[14px] font-bold text-slate-800 dark:text-white flex items-center gap-1.5 mb-2">
+            Greetings! I'm <span className="text-primary dark:text-purple-400">AlgoBot</span>
+          </h3>
+          <p className="text-[13px] text-slate-500 dark:text-slate-400 mb-3.5 leading-relaxed">
+            I can help you:
+          </p>
+
+          <div className="space-y-3 mb-4">
+            <div className="flex gap-2.5 items-start text-[13px] text-slate-600 dark:text-slate-350">
+              <span className="flex items-center justify-center w-5 h-5 rounded-md bg-purple-50/50 dark:bg-purple-950/30 text-primary dark:text-purple-400 shrink-0 text-[11px] font-bold mt-0.5">
+                ⮕
+              </span>
+              <div className="leading-normal">
+                Explore <strong className="font-semibold text-slate-800 dark:text-white">AlgoBuddy</strong> features
+              </div>
+            </div>
+            <div className="flex gap-2.5 items-start text-[13px] text-slate-600 dark:text-slate-350">
+              <span className="flex items-center justify-center w-5 h-5 rounded-md bg-purple-50/50 dark:bg-purple-950/30 text-primary dark:text-purple-400 shrink-0 text-[11px] font-bold mt-0.5">
+                ⮕
+              </span>
+              <div className="leading-normal">
+                Learn <strong className="font-semibold text-slate-800 dark:text-white">DSA</strong> concepts &amp; roadmaps
+              </div>
+            </div>
+            <div className="flex gap-2.5 items-start text-[13px] text-slate-600 dark:text-slate-350">
+              <span className="flex items-center justify-center w-5 h-5 rounded-md bg-purple-50/50 dark:bg-purple-950/30 text-primary dark:text-purple-400 shrink-0 text-[11px] font-bold mt-0.5">
+                ⮕
+              </span>
+              <div className="leading-normal">
+                Get clear <strong className="font-semibold text-slate-800 dark:text-white">code walkthroughs</strong>
+              </div>
+            </div>
+          </div>
+
+          <p className="text-[13px] text-slate-600 dark:text-slate-300 leading-relaxed border-t border-slate-100 dark:border-slate-800/60 pt-3">
+            Choose a question below or start typing!
+          </p>
+        </div>
+      </motion.div>
+    );
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10, scale: 0.98 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      transition={{ duration: 0.22, ease: "easeOut" }}
+      className={`flex gap-2.5 ${isUser ? "flex-row-reverse" : "flex-row"}`}
+    >
+      {/* Avatar */}
+      <div
+        className={`shrink-0 w-7 h-7 rounded-xl flex items-center justify-center mt-0.5 shadow-sm transition-all duration-200
+          ${isUser
+            ? "bg-primary"
+            : isError
+              ? "bg-red-500/10 border border-red-500/20"
+              : "bg-primary"
+          }`}
+      >
+        {isUser ? (
+          <User size={13} className="text-white" />
+        ) : isError ? (
+          <AlertCircle size={13} className="text-red-500 dark:text-red-400" />
+        ) : (
+          <AlgoBotIcon className="w-3.5 h-3.5 text-white" />
+        )}
+      </div>
+
+      {/* Bubble content */}
+      <div
+        className={`max-w-[84%] rounded-2xl px-4 py-2.5 shadow-sm transition-all duration-200
+          ${isUser
+            ? "bg-primary text-white rounded-tr-sm shadow-md"
+            : isError
+              ? "bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-500/30 rounded-tl-sm"
+              : "bg-slate-50 dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800/60 rounded-tl-sm shadow-sm backdrop-blur-sm text-slate-800 dark:text-slate-200"
+          }`}
+      >
+        {isError ? (
+          <div className="flex items-start gap-2">
+            <AlertCircle size={14} className="text-red-500 dark:text-red-400 shrink-0 mt-0.5" />
+            <p className="text-[13px] text-red-700 dark:text-red-300 leading-relaxed">{message.content}</p>
+          </div>
+        ) : isUser ? (
+          <p className="text-[13px] leading-relaxed whitespace-pre-wrap text-white">{message.content}</p>
+        ) : (
+          <div className="prose-invert max-w-none">
+            <ReactMarkdown remarkPlugins={[remarkGfm]} components={mdComponents}>
+              {message.content}
+            </ReactMarkdown>
+
+            {message.isStreaming && (
+              <span className="inline-block w-1.5 h-4 ml-0.5 bg-primary dark:bg-purple-400 rounded-full animate-pulse align-middle" />
+            )}
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+}
+
+// ─── Typing Indicator ─────────────────────────────────────────────────────────
+
+function TypingIndicator() {
+  return (
+    <div className="flex gap-2.5">
+      <div className="shrink-0 w-7 h-7 rounded-xl bg-primary flex items-center justify-center shadow-sm">
+        <AlgoBotIcon className="w-3.5 h-3.5 text-white" />
+      </div>
+      <div className="bg-slate-50 dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800/60 rounded-2xl rounded-tl-sm px-4 py-2.5 shadow-sm flex items-center gap-2.5 backdrop-blur-sm">
+        <div className="flex gap-1 items-center h-2">
+          {[0, 1, 2].map((i) => (
+            <motion.span
+              key={i}
+              className="w-1.5 h-1.5 rounded-full bg-primary/70 dark:bg-purple-400"
+              animate={{ y: [0, -3, 0] }}
+              transition={{ duration: 0.6, repeat: Infinity, delay: i * 0.15 }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Main Chatbot ─────────────────────────────────────────────────────────────
+
+const MAX_HISTORY = 30;
+
+function pruneMessages(messages) {
+  if (messages.length <= MAX_HISTORY) return messages;
+  const welcome = messages.find((m) => m.id === "welcome");
+  const others = messages.filter((m) => m.id !== "welcome");
+  const pruned = others.slice(-(MAX_HISTORY - 1));
+  return welcome ? [welcome, ...pruned] : pruned;
+}
+
+export default function Chatbot() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [messages, setMessages] = useState([WELCOME_MESSAGE]);
+  const [inputValue, setInputValue] = useState("");
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const [unreadCount, setUnreadCount] = useState(0);
+  const previousMessageCount = useRef(messages.length);
+  const [showScrollBtn, setShowScrollBtn] = useState(false);
+
+  const messagesEndRef = useRef(null);
+  const scrollContainerRef = useRef(null);
+  const inputRef = useRef(null);
+  const abortControllerRef = useRef(null);
+  const textareaRef = useRef(null);
+
+  // ── Auto-scroll ──────────────────────────────────────────────────────────────
+  const scrollToBottom = useCallback((behavior = "smooth") => {
+    messagesEndRef.current?.scrollIntoView({ behavior });
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) scrollToBottom();
+  }, [messages, isOpen, scrollToBottom]);
+
+  // ── Scroll-to-bottom button visibility ───────────────────────────────────────
+  const handleScroll = () => {
+    const el = scrollContainerRef.current;
+    if (!el) return;
+    const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+    setShowScrollBtn(distFromBottom > 120);
+  };
+
+  useEffect(() => {
+  if (
+    !isOpen &&
+    messages.length > previousMessageCount.current
+  ) {
+    const lastMessage = messages[messages.length - 1];
+
+    if (
+  lastMessage?.role === "assistant" &&
+  lastMessage.id !== "welcome" &&
+  !lastMessage.isStreaming &&
+  !lastMessage.isError
+) {
+  setUnreadCount((prev) => prev + 1);
+}
+  }
+
+  previousMessageCount.current = messages.length;
+}, [messages, isOpen]);
+
+
+  // ── Focus on open ────────────────────────────────────────────────────────────
+  useEffect(() => {
+    if (isOpen) setTimeout(() => inputRef.current?.focus(), 280);
+  }, [isOpen]);
+
+  // ── Cleanup ──────────────────────────────────────────────────────────────────
+  useEffect(() => () => abortControllerRef.current?.abort(), []);
+
+  // ─── Send Message ─────────────────────────────────────────────────────────────
+  const sendMessage = useCallback(
+    async (queryOverride) => {
+      const text = (queryOverride ?? inputValue).trim();
+      if (!text || isStreaming) return;
+
+      if (!hasInteracted) {
+        setHasInteracted(true);
+      }
+
+      setInputValue("");
+      if (textareaRef.current) {
+        textareaRef.current.style.height = "auto";
+      }
+
+      const userMsg = { role: "user", content: text, id: `u-${Date.now()}` };
+      const assistantId = `a-${Date.now()}`;
+
+      setMessages((prev) => {
+        const next = pruneMessages([
+          ...prev,
+          userMsg,
+          { role: "assistant", content: "", id: assistantId, isStreaming: true },
+        ]);
+        return next;
+      });
+      setIsStreaming(true);
+
+      // Build history for API (exclude system welcome + placeholders)
+      const history = pruneMessages(messages)
+        .filter((m) => m.id !== "welcome" && !m.isError && !m.isStreaming)
+        .map(({ role, content }) => ({ role, content }));
+      history.push({ role: "user", content: text });
+
+      abortControllerRef.current?.abort();
+      abortControllerRef.current = new AbortController();
+
+      try {
+        const csrfToken = await api.getCsrfToken();
+
+const headers = {
+  "Content-Type": "application/json",
+};
+
+if (csrfToken) {
+  headers[CSRF_HEADER_NAME] = csrfToken;
+}
+
+const res = await fetch("/api/chatbot", {
+  method: "POST",
+  headers,
+  body: JSON.stringify({ messages: history }),
+  signal: abortControllerRef.current.signal,
+});
+
+        if (!res.ok) {
+          const err = await res.json().catch(() => ({}));
+          throw new Error(err.error ?? `Server error ${res.status}`);
+        }
+
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() ?? "";
+
+          for (const line of lines) {
+            if (!line.startsWith("data:")) continue;
+            const raw = line.slice(5).trim();
+            if (!raw) continue;
+
+            let parsed;
+            try { parsed = JSON.parse(raw); } catch { continue; }
+
+            if (parsed.type === "delta") {
+              setMessages((prev) =>
+                prev.map((m) =>
+                  m.id === assistantId
+                    ? { ...m, content: m.content + parsed.content }
+                    : m
+                )
+              );
+            } else if (parsed.type === "done") {
+              setMessages((prev) =>
+                prev.map((m) =>
+                  m.id === assistantId ? { ...m, isStreaming: false } : m
+                )
+              );
+              break;
+            } else if (parsed.type === "error") {
+              throw new Error(parsed.message);
+            }
+          }
+        }
+      } catch (err) {
+        if (err.name === "AbortError") return;
+
+        setMessages((prev) =>
+          prev
+            .filter((m) => m.id !== assistantId)
+            .concat({
+              role: "assistant",
+              content: `**Connection error:** ${err.message}.\n\nPlease check your internet connection and try again.`,
+              id: `err-${Date.now()}`,
+              isError: true,
+            })
+        );
+      } finally {
+        setIsStreaming(false);
+      }
+    },
+    [inputValue, isStreaming, messages, hasInteracted]
+  );
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  };
+
+  const handleClearChat = () => {
+    abortControllerRef.current?.abort();
+    setMessages([WELCOME_MESSAGE]);
+    setHasInteracted(false);
+    setIsStreaming(false);
+    setUnreadCount(0);
+    previousMessageCount.current = 1;
+  };
+
+  const handleTextareaChange = (e) => {
+    setInputValue(e.target.value);
+    e.target.style.height = "auto";
+    e.target.style.height = Math.min(e.target.scrollHeight, 108) + "px";
+  };
+
+  // ─── Listen for custom explain events ─────────────────────────────────────────
+  useEffect(() => {
+    const handleExplain = (e) => {
+      const { prompt } = e.detail;
+      setIsOpen(true);
+      // Slight delay to ensure Chatbot is fully open and focused before sending
+      setTimeout(() => {
+        sendMessage(prompt);
+      }, 50);
+    };
+
+    window.addEventListener("chatbot-explain", handleExplain);
+    return () => window.removeEventListener("chatbot-explain", handleExplain);
+  }, [sendMessage]);
+
+  // ─── Render ───────────────────────────────────────────────────────────────────
+
+  return (
+    <div className="font-sans">
+      {/* ── Chat Panel ─────────────────────────────────────────────────────────── */}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            key="chat-panel"
+            initial={{ opacity: 0, scale: 0.88, y: 20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.88, y: 20 }}
+            transition={{ type: "spring", stiffness: 340, damping: 30 }}
+            style={{ transformOrigin: "bottom right" }}
+            className=" fixed bottom-[148px] sm:bottom-[92px] right-4 sm:right-6 z-[10000] w-[calc(100vw-32px)] sm:w-[400px] h-[600px] max-h-[calc(100vh-120px)] flex flex-col rounded-2xl overflow-hidden
+              bg-white/95 dark:bg-[#1c1d1f]/95 border border-purple-100 dark:border-purple-900/30 shadow-2xl backdrop-blur-xl transition-all duration-300"
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between px-4 py-3 shrink-0 bg-primary border-b border-primary-dark/20 shadow-sm transition-all duration-300">
+              <div className="flex items-center gap-3">
+                {/* Avatar */}
+                <div className="w-9 h-9 rounded-full bg-white text-primary flex items-center justify-center border border-white/20 shadow-sm transition-all duration-300">
+                  <AlgoBotIcon className="w-5 h-5" />
+                </div>
+                <div>
+                  <div className="flex items-center gap-1.5">
+                    <h3 className="text-[14px] font-semibold text-white leading-none">AlgoBot</h3>
+                  </div>
+                  <p className="text-[11px] text-white/85 mt-1.5 leading-none font-medium">
+                    {isStreaming ? (
+                      <span className="text-white/95 flex items-center gap-1">
+                        <Loader2 size={10} className="animate-spin" /> Thinking…
+                      </span>
+                    ) : (
+                      "Your DSA Mentor"
+                    )}
+                  </p>
+                </div>
+              </div>
+
+              {/* Actions */}
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={handleClearChat}
+                  title="Reset conversation"
+                  className="w-7.5 h-7.5 rounded-lg flex items-center justify-center text-white/80 hover:text-white hover:bg-white/10 transition-colors"
+                >
+                  <RotateCcw size={14} />
+                </button>
+                <button
+                  onClick={() => setIsOpen(false)}
+                  title="Close chat"
+                  className="w-7.5 h-7.5 rounded-lg flex items-center justify-center text-white/80 hover:text-white hover:bg-white/10 transition-colors"
+                  aria-label="Close chat"
+                >
+                  <X size={15} />
+                </button>
+              </div>
+            </div>
+
+            {/* Messages */}
+            <div
+              ref={scrollContainerRef}
+              onScroll={handleScroll}
+              className="flex-1 overflow-y-auto px-4 py-4 space-y-4 scrollbar-none [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-slate-200 dark:[&::-webkit-scrollbar-thumb]:bg-slate-800 [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-purple-300 dark:hover:[&::-webkit-scrollbar-thumb]:bg-purple-900/50 transition-colors"
+              style={{ scrollbarWidth: "thin" }}
+            >
+              {messages
+                .filter((msg) => !(msg.role === "assistant" && msg.content === "" && msg.isStreaming))
+                .map((msg) => (
+                  <MessageBubble key={msg.id} message={msg} />
+                ))}
+              {isStreaming &&
+                messages[messages.length - 1]?.content === "" && <TypingIndicator />}
+              <div ref={messagesEndRef} />
+            </div>
+
+            {/* Scroll-to-bottom button */}
+            <AnimatePresence>
+              {showScrollBtn && (
+                <motion.button
+                  initial={{ opacity: 0, y: 6 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: 6 }}
+                  onClick={() => scrollToBottom()}
+                  className="absolute bottom-[92px] right-6 w-8 h-8 rounded-full bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 
+                    flex items-center justify-center text-slate-500 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600 transition-colors shadow-lg"
+                >
+                  <ChevronDown size={16} />
+                </motion.button>
+              )}
+            </AnimatePresence>
+
+            {/* Suggestion Chips */}
+            {messages.length === 1 && !isStreaming && (
+              <div className="px-4 pt-3 pb-2.5 border-t border-slate-100 dark:border-slate-800/60 shrink-0 bg-white/50 dark:bg-[#1c1d1f]/50">
+                <p className="text-[10px] font-semibold text-slate-400 dark:text-slate-550 uppercase tracking-widest mb-2 px-1">
+                  Suggested Questions
+                </p>
+                <div className="w-full flex flex-row items-center gap-2 overflow-x-auto pb-2 [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-slate-200 dark:[&::-webkit-scrollbar-thumb]:bg-slate-800 [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-purple-300 dark:hover:[&::-webkit-scrollbar-thumb]:bg-purple-900/50">
+                  {SUGGESTION_QUESTIONS.map((q) => (
+                    <button
+                      key={q.id}
+                      onClick={() => sendMessage(q.query)}
+                      className="shrink-0 border border-purple-100 dark:border-purple-900/40 bg-purple-50/30 dark:bg-purple-950/10 text-purple-700 dark:text-purple-300 hover:bg-purple-100/50 dark:hover:bg-purple-950/30 hover:border-purple-300 dark:hover:border-purple-700/60 transition-all duration-150 rounded-full px-3 py-1 text-[11px] font-medium whitespace-nowrap"
+                    >
+                      {q.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Input area */}
+            <div className="px-3 py-3 border-t border-slate-100 dark:border-slate-800/60 bg-white/50 dark:bg-[#1c1d1f]/50 shrink-0">
+              <div
+                className="flex items-end gap-2 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-800/80 rounded-xl px-3 py-2
+                  focus-within:border-primary/50 dark:focus-within:border-purple-500/50 focus-within:bg-white dark:focus-within:bg-slate-900/80 transition-all duration-200"
+              >
+                <textarea
+                  ref={(el) => {
+                    inputRef.current = el;
+                    textareaRef.current = el;
+                  }}
+                  rows={1}
+                  value={inputValue}
+                  onChange={handleTextareaChange}
+                  onKeyDown={handleKeyDown}
+                  placeholder="Ask about AlgoBuddy or any DSA topic…"
+                  disabled={isStreaming}
+                  className="flex-1 bg-transparent text-[13px] text-slate-800 dark:text-slate-200 placeholder-slate-400 dark:placeholder-slate-500
+                    resize-none outline-none leading-relaxed min-h-[24px] max-h-[108px]
+                    disabled:opacity-50 scrollbar-none"
+                  style={{ scrollbarWidth: "none" }}
+                />
+                <button
+                  onClick={() => sendMessage()}
+                  disabled={!inputValue.trim() || isStreaming}
+                  className="shrink-0 w-8 h-8 rounded-lg bg-primary hover:bg-primary-dark
+                    flex items-center justify-center text-white shadow-md active:scale-95 transition-all duration-150
+                    disabled:opacity-45 disabled:cursor-not-allowed"
+                  aria-label="Send"
+                >
+                  {isStreaming ? (
+                    <Loader2 size={14} className="animate-spin" />
+                  ) : (
+                    <Send size={14} />
+                  )}
+                </button>
+              </div>
+              <div className="flex items-center justify-between mt-1.5 px-1">
+                <p className="text-[10px] text-slate-400 dark:text-slate-600">
+                  ↵ Send &nbsp;·&nbsp; Shift+↵ New line
+                </p>
+                <a
+                  href="https://www.algobuddy.me"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-[10px] text-primary dark:text-purple-400 hover:opacity-85 transition-opacity flex items-center gap-0.5"
+                >
+                  algobuddy.me <ExternalLink size={8} />
+                </a>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* ── Floating Trigger Button ─────────────────────────────────────────────── */}
+      <div className={`fixed bottom-[75px] right-3 sm:bottom-6 sm:right-6 z-[10000] ${isOpen ? "hidden sm:block" : "block"}`}>
+        <motion.button
+          onClick={() => {
+            setIsOpen((v) => {
+              const next = !v;
+
+              if (next) {
+                setUnreadCount(0);
+              }
+
+              return next;
+            });
+          }}
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          transition={{ type: "spring", stiffness: 400, damping: 20 }}
+          className="relative w-14 h-14 rounded-2xl bg-primary hover:bg-primary-dark flex items-center justify-center shadow-lg transition-colors"
+          aria-label={isOpen ? "Close AlgoBot" : "Open AlgoBot"}
+        >
+          <AnimatePresence mode="wait">
+            {isOpen ? (
+              <motion.div
+                key="close"
+                initial={{ rotate: -90, opacity: 0 }}
+                animate={{ rotate: 0, opacity: 1 }}
+                exit={{ rotate: 90, opacity: 0 }}
+                transition={{ duration: 0.15 }}
+              >
+                <X size={22} className="text-white" />
+              </motion.div>
+            ) : (
+              <motion.div
+                key="open"
+                initial={{ rotate: 90, opacity: 0 }}
+                animate={{ rotate: 0, opacity: 1 }}
+                exit={{ rotate: -90, opacity: 0 }}
+                transition={{ duration: 0.15 }}
+              >
+                <AlgoBotIcon className="w-6 h-6 text-white" />
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {/* Unread badge */}
+          <AnimatePresence>
+            {!isOpen && unreadCount > 0 && (
+              <motion.div
+                initial={{ scale: 0 }}
+                animate={{ scale: 1 }}
+                exit={{ scale: 0 }}
+                className="absolute -bottom-1 -left-1 w-5 h-5 rounded-full bg-red-500
+                  border-2 border-white dark:border-[#1c1d1f] flex items-center justify-center text-[9px] font-bold text-white shadow"
+              >
+                {unreadCount > 9 ? "9+" : unreadCount}
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </motion.button>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/ui/ClientLayoutWrapper.jsx b/src/app/components/ui/ClientLayoutWrapper.jsx
new file mode 100644
index 000000000..64171cc49
--- /dev/null
+++ b/src/app/components/ui/ClientLayoutWrapper.jsx
@@ -0,0 +1,31 @@
+"use client";
+import { Suspense } from "react";
+import { Toaster } from "react-hot-toast";
+import CookieConsent from "@/app/components/cookiesconsent";
+import { usePathname } from "next/navigation";
+import Chatbot from "@/app/components/ui/Chatbot";
+import Navbar from "@/app/components/navbar";
+import { CommandPalette } from "@/app/components/CommandPalette";
+import { useGlobalKeyboardShortcuts } from "@/app/hooks/useGlobalKeyboardShortcuts";
+import GlobalShortcutsModal from "@/app/components/ui/GlobalShortcutsModal";
+import ProfileSetupModal from "@/app/components/profile/ProfileSetupModal";
+
+export default function ClientLayoutWrapper({ children }) {
+  const pathname = usePathname();
+  const isAuthPage = pathname === "/login" || pathname === "/signup";
+
+  useGlobalKeyboardShortcuts();
+
+  return (
+    <>
+      <Toaster position="top-right" />
+      <CookieConsent />
+      {!isAuthPage && <Navbar />}
+      {children}
+      {!isAuthPage && <Chatbot />}
+      {!isAuthPage && <CommandPalette />}
+      {!isAuthPage && <ProfileSetupModal />}
+      <GlobalShortcutsModal />
+    </>
+  );
+}
diff --git a/src/app/components/ui/CodeBlock.jsx b/src/app/components/ui/CodeBlock.jsx
new file mode 100644
index 000000000..e12712711
--- /dev/null
+++ b/src/app/components/ui/CodeBlock.jsx
@@ -0,0 +1,614 @@
+'use client';
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
+import { motion, AnimatePresence } from 'framer-motion';
+import hljs from 'highlight.js';
+import sanitizeHtml from 'sanitize-html';
+import { toast } from 'react-hot-toast';
+import 'highlight.js/styles/atom-one-dark.css';
+import 'highlight.js/styles/github.css';
+import 'highlight.js/styles/github-dark.css';
+
+/**
+ * Cleanly translates a given JavaScript implementation into standard textbook pseudocode.
+ * Runs fully dynamically on the client so that every visualizer gets an immediate, elegant
+ * pseudocode tab without requiring manual rewrites in 100+ separate files.
+ */
+export const generatePseudocode = (jsCode) => {
+  if (!jsCode) return '';
+  
+  let lines = jsCode.split('\n');
+  let result = [];
+  
+  for (let line of lines) {
+    let clean = line;
+    
+    // Replace variable declarations with assignment arrows
+    clean = clean.replace(/\b(const|let|var)\b\s+([a-zA-Z0-9_$]+)\s*=\s*/g, '$2 ← ');
+    
+    // Replace function/methods declarations
+    clean = clean.replace(/\bfunction\s+([a-zA-Z0-9_$]+)\s*\(([^)]*)\)\s*\{?/g, 'algorithm $1($2)');
+    clean = clean.replace(/\bclass\s+([a-zA-Z0-9_$]+)\s*\{?/g, 'structure $1');
+    clean = clean.replace(/\bconstructor\s*\(([^)]*)\)\s*\{?/g, 'initialize($1)');
+    
+    // Replace comparison operators
+    clean = clean.replace(/===/g, ' = ');
+    clean = clean.replace(/==/g, ' = ');
+    clean = clean.replace(/!==/g, ' ≠ ');
+    clean = clean.replace(/!=/g, ' ≠ ');
+    
+    // Replace boolean operators
+    clean = clean.replace(/&&/g, ' AND ');
+    clean = clean.replace(/\|\|/g, ' OR ');
+    clean = clean.replace(/!(?!=)/g, ' NOT ');
+    
+    // Replace loop controls
+    clean = clean.replace(/for\s*\(\s*let\s+([a-zA-Z0-9_$]+)\s*=\s*([^;]+);\s*\1\s*<\s*([^;]+);\s*[^)]+\)/g, 'for $1 from $2 to $3 - 1 do');
+    clean = clean.replace(/for\s*\(\s*let\s+([a-zA-Z0-9_$]+)\s*=\s*([^;]+);\s*\1\s*<=\s*([^;]+);\s*[^)]+\)/g, 'for $1 from $2 to $3 do');
+    clean = clean.replace(/for\s*\(\s*(const|let|var)\s+([a-zA-Z0-9_$]+)\s+of\s+([^)]+)\)/g, 'for each $2 in $3 do');
+    
+    // Replace standard flow blocks
+    clean = clean.replace(/if\s*\(([^)]+)\)\s*\{?/g, 'if $1 then');
+    clean = clean.replace(/while\s*\(([^)]+)\)\s*\{?/g, 'while $1 do');
+    
+    // Strip braces and semicolons
+    clean = clean.replace(/;\s*$/g, '');
+    clean = clean.replace(/\{\s*$/g, '');
+    clean = clean.replace(/^\s*\}\s*$/g, '');
+    clean = clean.replace(/\s*\}\s*else\s*\{?/g, ' else');
+    clean = clean.replace(/\s*\}\s*else\s+if\s*\(([^)]+)\)\s*\{?/g, ' else if $1 then');
+    
+    // If the line is empty (only braces stripped), skip it
+    if (line.trim() !== '' && clean.trim() === '') {
+      continue;
+    }
+    
+    result.push(clean);
+  }
+  
+  return result.join('\n');
+};
+
+/**
+ * Highlights a block of code dynamically. Prepares custom premium highlighting for
+ * pseudocode keywords to match the editor's visual style.
+ */
+export const highlightCode = (code, language) => {
+  if (language === 'pseudocode') {
+    let escaped = code
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+      
+    // Use a single-pass regex matching comments, strings, keywords, operators, and numbers to prevent any HTML tag conflict
+    const regex = /(\/\/.*)|("[^"\\]*(?:\\.[^"\\]*)*"|'[^'\\]*(?:\\.[^'\\]*)*')|\b(algorithm|procedure|structure|initialize|declare|for each|for|to|do|while|if|then|else|return|AND|OR|NOT)\b|(←)|\b(\d+)\b/g;
+
+    const highlighted = escaped.replace(regex, (match, comment, string, keyword, operator, number) => {
+      if (comment !== undefined) {
+        return `<span class="hljs-comment" style="color: #5c6370; font-style: italic;">${comment}</span>`;
+      }
+      if (string !== undefined) {
+        return `<span class="hljs-string" style="color: #98c379;">${string}</span>`;
+      }
+      if (keyword !== undefined) {
+        return `<span class="hljs-keyword" style="color: #c678dd; font-weight: bold;">${keyword}</span>`;
+      }
+      if (operator !== undefined) {
+        return `<span class="hljs-operator" style="color: #56b6c2;">${operator}</span>`;
+      }
+      if (number !== undefined) {
+        return `<span class="hljs-number" style="color: #d19a66;">${number}</span>`;
+      }
+      return match;
+    });
+
+    return sanitizeHtml(highlighted, {
+      allowedTags: ['span'],
+      allowedAttributes: {
+        span: ['class', 'style']
+      }
+    });
+  }
+
+  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
+  const rawHtml = hljs.highlight(code, { language: validLanguage }).value;
+  return sanitizeHtml(rawHtml, {
+    allowedTags: ['span'],
+    allowedAttributes: {
+      span: ['class', 'style']
+    }
+  });
+};
+
+const decodeHtmlEntities = (value) =>
+  value
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;|&#x27;/g, "'");
+
+const styleStringToObject = (style = '') =>
+  style.split(';').reduce((styles, rule) => {
+    const [rawName, rawValue] = rule.split(':');
+    if (!rawName || !rawValue) return styles;
+
+    const name = rawName.trim().replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+    styles[name] = rawValue.trim();
+    return styles;
+  }, {});
+
+const getSpanAttribute = (attributes, name) => {
+  const match = attributes.match(new RegExp(`${name}="([^"]*)"`, 'i'));
+  return match?.[1] || '';
+};
+
+const renderHighlightedCode = (html) => {
+  const nodes = [];
+  const spanRegex = /<span([^>]*)>(.*?)<\/span>/g;
+  let lastIndex = 0;
+  let tokenIndex = 0;
+  let match;
+
+  while ((match = spanRegex.exec(html)) !== null) {
+    if (match.index > lastIndex) {
+      nodes.push(decodeHtmlEntities(html.slice(lastIndex, match.index)));
+    }
+
+    const attributes = match[1] || '';
+    const className = getSpanAttribute(attributes, 'class');
+    const style = styleStringToObject(getSpanAttribute(attributes, 'style'));
+
+    nodes.push(
+      <span key={`token-${tokenIndex++}`} className={className || undefined} style={style}>
+        {decodeHtmlEntities(match[2])}
+      </span>
+    );
+
+    lastIndex = spanRegex.lastIndex;
+  }
+
+  if (lastIndex < html.length) {
+    nodes.push(decodeHtmlEntities(html.slice(lastIndex)));
+  }
+
+  return nodes;
+};
+
+const LANGUAGES = [
+  { id: 'pseudocode', name: 'Pseudocode' },
+  { id: 'javascript', name: 'JavaScript' },
+  { id: 'python', name: 'Python' },
+  { id: 'java', name: 'Java' },
+  { id: 'c', name: 'C' },
+  { id: 'cpp', name: 'C++' },
+  { id: 'go', name: 'Go' },
+];
+
+const TrafficDot = ({ color, hoverTitle }) => {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <div
+      title={hoverTitle}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        width: '13px',
+        height: '13px',
+        borderRadius: '50%',
+        background: color,
+        cursor: 'default',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'filter 0.15s',
+        filter: hovered ? 'brightness(0.85)' : 'none',
+        boxShadow: `0 0 0 0.5px rgba(0,0,0,0.25) inset`,
+      }}
+    />
+  );
+};
+
+const CodeBlock = ({ variant = 'standard', title, codeExamples, fileNames }) => {
+  const [selectedLanguage, setSelectedLanguage] = useState('pseudocode');
+  const [copied, setCopied] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const topRef = useRef(null);
+  const copyTimeoutRef = useRef(null);
+
+  useEffect(() => () => {
+    if (copyTimeoutRef.current) {
+      clearTimeout(copyTimeoutRef.current);
+    }
+  }, []);
+
+  const resolvedCode = useMemo(() => {
+    if (selectedLanguage === 'pseudocode') {
+      return codeExamples?.pseudocode || generatePseudocode(codeExamples?.javascript || codeExamples?.js || '');
+    }
+    let code = codeExamples?.[selectedLanguage];
+    if (!code) {
+      if (selectedLanguage === 'c') {
+        code = codeExamples?.cpp || codeExamples?.c_cpp || codeExamples?.cppCode;
+      } 
+      else if (selectedLanguage === 'cpp') {
+        code = codeExamples?.c || codeExamples?.cCode;
+      } 
+      else if (selectedLanguage === 'go') {
+        code = codeExamples?.golang || codeExamples?.goCode;
+      }
+
+      if (!code) {
+        code =
+          codeExamples?.javascript ||
+          codeExamples?.js ||
+          codeExamples?.python ||
+          codeExamples?.java ||
+          codeExamples?.cpp ||
+          '';
+      }
+    }
+    return code;
+  }, [selectedLanguage, codeExamples]);
+
+  const highlightedCode = useMemo(
+    () => highlightCode(resolvedCode, selectedLanguage),
+    [resolvedCode, selectedLanguage]
+  );
+
+  const highlightedNodes = useMemo(
+    () => renderHighlightedCode(highlightedCode),
+    [highlightedCode]
+  );
+
+  const copyToClipboard = async (text) => {
+    try {
+      if (!navigator.clipboard?.writeText) {
+        throw new Error('Clipboard API is not available');
+      }
+
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      toast.success('Code copied!');
+      copyTimeoutRef.current = setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy text: ', err);
+      toast.error('Could not copy code.');
+    }
+  };
+
+  /* ═══════════════════════════ macOS variant ═══════════════════════════ */
+  if (variant === 'macos') {
+    return (
+      <div className="max-w-4xl mx-auto" ref={topRef}>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3 }}
+          style={{
+            borderRadius: '12px',
+            overflow: 'hidden',
+            boxShadow:
+              '0 20px 60px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.2)',
+            border: '1px solid rgba(255,255,255,0.08)',
+          }}
+        >
+          {/* ── macOS Title Bar ── */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              padding: '11px 16px',
+              background: 'linear-gradient(180deg, #3a3a3c 0%, #2d2d2f 100%)',
+              borderBottom: '1px solid #1a1a1c',
+              userSelect: 'none',
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <TrafficDot color="#ff5f57" hoverTitle="Close" />
+              <TrafficDot color="#febc2e" hoverTitle="Minimize" />
+              <TrafficDot color="#28c840" hoverTitle="Maximize" />
+            </div>
+
+            <span
+              style={{
+                position: 'absolute',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                fontSize: '13px',
+                fontFamily: "'SF Pro Text', 'Helvetica Neue', sans-serif",
+                fontWeight: 500,
+                color: '#c8c8cc',
+                letterSpacing: '0.01em',
+                pointerEvents: 'none',
+              }}
+            >
+              {selectedLanguage === 'pseudocode' 
+                ? 'algorithm.txt' 
+                : (fileNames?.[selectedLanguage] ?? {
+                    javascript: 'solution.js',
+                    python: 'solution.py',
+                    java: 'Solution.java',
+                    c: 'solution.c',
+                    cpp: 'solution.cpp',
+                    go: 'solution.go'
+                  }[selectedLanguage] ?? 'solution.txt')}
+            </span>
+
+            <motion.button
+              type="button"
+              whileHover={{ scale: 1.04 }}
+              whileTap={{ scale: 0.96 }}
+              onClick={() => copyToClipboard(resolvedCode)}
+              className="focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 focus-visible:ring-offset-2 focus-visible:ring-offset-[#2d2d2f]"
+              aria-label="Copy code"
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '6px',
+                padding: '4px 12px',
+                borderRadius: '6px',
+                border: '1px solid rgba(255,255,255,0.15)',
+                background: 'rgba(255,255,255,0.07)',
+                color: copied ? '#30d158' : '#c8c8cc',
+                fontSize: '12px',
+                fontFamily: "'SF Pro Text', 'Helvetica Neue', sans-serif",
+                fontWeight: 500,
+                cursor: 'pointer',
+                transition: 'all 0.2s',
+                backdropFilter: 'blur(6px)',
+              }}
+            >
+              <AnimatePresence mode="wait">
+                {copied ? (
+                  <motion.span
+                    key="check"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    style={{ display: 'flex', alignItems: 'center', gap: '5px' }}
+                  >
+                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                      <path d="M2 6l3 3 5-5" stroke="#30d158" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                    Copied!
+                  </motion.span>
+                ) : (
+                  <motion.span
+                    key="copy"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    style={{ display: 'flex', alignItems: 'center', gap: '5px' }}
+                  >
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
+                      <rect x="9" y="2" width="10" height="14" rx="2" stroke="#c8c8cc" strokeWidth="2" />
+                      <path d="M5 6H4a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1" stroke="#c8c8cc" strokeWidth="2" strokeLinecap="round" />
+                    </svg>
+                    Copy Code
+                  </motion.span>
+                )}
+              </AnimatePresence>
+            </motion.button>
+          </div>
+
+          {/* ── Language tab bar ── */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '2px',
+              padding: '0 16px',
+              background: '#1e1e20',
+              borderBottom: '1px solid #111113',
+              overflowX: 'auto',
+            }}
+          >
+            {LANGUAGES.map((lang) => (
+              <button
+                key={lang.id}
+                onClick={() => setSelectedLanguage(lang.id)}
+                style={{
+                  padding: '8px 16px',
+                  fontSize: '13px',
+                  fontFamily: "'SF Pro Text', 'Helvetica Neue', sans-serif",
+                  fontWeight: 500,
+                  cursor: 'pointer',
+                  border: 'none',
+                  borderBottom: selectedLanguage === lang.id
+                    ? '2px solid #007aff'
+                    : '2px solid transparent',
+                  background: 'transparent',
+                  color: selectedLanguage === lang.id ? '#ffffff' : '#8e8e93',
+                  transition: 'color 0.15s, border-color 0.15s',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {lang.name}
+              </button>
+            ))}
+          </div>
+
+          {/* ── Code body ── */}
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={selectedLanguage}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.18 }}
+              className="hljs-force-dark"
+              style={{
+                background: '#282c34',
+                overflowX: 'auto',
+                padding: '20px 24px 24px',
+              }}
+            >
+              <pre
+                style={{
+                  margin: 0,
+                  fontFamily: "'JetBrains Mono', 'Fira Mono', 'SF Mono', 'Menlo', monospace",
+                  fontSize: '13.5px',
+                  lineHeight: '1.8',
+                  display: 'flex',
+                  gap: '20px',
+                }}
+              >
+                <span
+                  aria-hidden="true"
+                  style={{
+                    display: 'block',
+                    textAlign: 'right',
+                    color: '#636d83',
+                    userSelect: 'none',
+                    minWidth: '32px',
+                    flexShrink: 0,
+                    lineHeight: '1.8',
+                    fontFamily: "'JetBrains Mono', 'Fira Mono', 'SF Mono', 'Menlo', monospace",
+                    fontSize: '13.5px',
+                  }}
+                >
+                  {resolvedCode
+                    .split('\n')
+                    .map((_, i) => (
+                      <span key={i} style={{ display: 'block' }}>
+                        {i + 1}
+                      </span>
+                    ))}
+                </span>
+
+                <code
+                  className={`language-${selectedLanguage}`}
+                  style={{
+                    flex: 1,
+                    fontFamily: "'JetBrains Mono', 'Fira Mono', 'SF Mono', 'Menlo', monospace",
+                    fontSize: '13.5px',
+                    lineHeight: '1.8',
+                    background: 'transparent',
+                    padding: 0,
+                    whiteSpace: 'pre',
+                  }}
+                >
+                  {highlightedNodes}
+                </code>
+              </pre>
+            </motion.div>
+          </AnimatePresence>
+        </motion.div>
+      </div>
+    );
+  }
+
+  /* ═══════════════════════════ standard variant ═══════════════════════════ */
+  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">
+              {title}
+            </h3>
+          </div>
+
+          <motion.button
+            type="button"
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            onClick={() => copyToClipboard(resolvedCode)}
+            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 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-50 dark:focus-visible:ring-offset-neutral-950"
+            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}`}>{highlightedNodes}</code>
+              </pre>
+            </motion.div>
+          </AnimatePresence>
+
+          <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/src/app/components/ui/ComplexityCard.jsx b/src/app/components/ui/ComplexityCard.jsx
new file mode 100644
index 000000000..c76cac9e8
--- /dev/null
+++ b/src/app/components/ui/ComplexityCard.jsx
@@ -0,0 +1,43 @@
+"use client";
+
+export default function ComplexityCard({
+  complexity,
+  title,
+  description,
+  examples = [],
+}) {
+  return (
+    <div className="group relative overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-5 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
+      
+      {/* Glow Effect */}
+      <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-violet-500/5 via-purple-500/5 to-indigo-500/5" />
+
+      {/* Complexity Badge */}
+      <div className="relative inline-flex items-center rounded-full border border-violet-300 dark:border-violet-800 bg-violet-100 dark:bg-violet-950/40 px-3 py-1 text-xs font-black tracking-wider text-violet-700 dark:text-violet-300">
+        {complexity}
+      </div>
+
+      {/* Title */}
+      <h3 className="relative mt-4 text-lg font-black text-neutral-900 dark:text-white">
+        {title}
+      </h3>
+
+      {/* Description */}
+      <p className="relative mt-2 text-sm leading-relaxed text-neutral-600 dark:text-neutral-400 font-medium">
+        {description}
+      </p>
+
+      {/* Examples */}
+      <div className="relative mt-4 flex flex-wrap gap-2">
+        {examples.map((example) => (
+          <span
+            key={example}
+            className="rounded-full bg-neutral-100 dark:bg-neutral-800 px-3 py-1 text-xs font-bold text-neutral-700 dark:text-neutral-300"
+          >
+            {example}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/ui/CopyButton.jsx b/src/app/components/ui/CopyButton.jsx
new file mode 100644
index 000000000..7ae6a2d7b
--- /dev/null
+++ b/src/app/components/ui/CopyButton.jsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { Copy } from 'lucide-react';
+import { toast } from 'react-hot-toast';
+
+export default function CopyButton({
+  text,
+  ariaLabel,
+  title,
+  className = '',
+}) {
+  const handleCopy = async () => {
+    const value = String(text ?? '').trim();
+
+    try {
+      await navigator.clipboard.writeText(value);
+      toast.success('Copied to clipboard!');
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+      toast.error('Failed to copy to clipboard.');
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      aria-label={ariaLabel || 'Copy to clipboard'}
+      title={title || ariaLabel || 'Copy to clipboard'}
+      className={`inline-flex items-center gap-1.5 rounded-lg border border-neutral-200 bg-white px-2.5 py-1 text-xs font-bold text-neutral-600 shadow-sm transition hover:border-neutral-300 hover:bg-neutral-50 hover:text-neutral-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#a435f0]/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400 dark:hover:border-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-neutral-200 dark:focus-visible:ring-offset-neutral-900 ${className}`}
+    >
+      <Copy className="h-3.5 w-3.5 shrink-0" />
+      <span>Copy</span>
+    </button>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/ui/CreateDuelModal.jsx b/src/app/components/ui/CreateDuelModal.jsx
new file mode 100644
index 000000000..8d4d3ceb9
--- /dev/null
+++ b/src/app/components/ui/CreateDuelModal.jsx
@@ -0,0 +1,141 @@
+"use client";
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { X, Copy, Check, Link2, Play } from "lucide-react";
+import { generateSecureCode } from "@/lib/random";
+
+export default function CreateDuelModal({ isOpen, onClose, onCreateMatch, initialTopic, initialDifficulty, initialTimeLimit, initialWager, initialMode, initialPublic }) {
+  const [lobbyCode, setLobbyCode] = useState("");
+  
+  useEffect(() => {
+    if (isOpen) {
+      setLobbyCode(generateSecureCode(6));
+    }
+  }, [isOpen]);
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(`https://algobuddy.me/arena/duel/${lobbyCode}`);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {}
+  };
+
+  const handleStart = () => {
+    onCreateMatch({
+      lobbyCode,
+      topic: initialTopic,
+      difficulty: initialDifficulty,
+      timeLimit: initialTimeLimit,
+      wager: initialWager,
+      mode: initialMode,
+      isPublic: initialPublic
+    });
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <AnimatePresence>
+      <div className="fixed inset-0 z-[10100] flex items-center justify-center p-4">
+        {/* Backdrop */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          onClick={onClose}
+          className="absolute inset-0 bg-slate-900/60 dark:bg-black/80 backdrop-blur-sm"
+        />
+
+        {/* Panel */}
+        <motion.div
+          initial={{ scale: 0.9, opacity: 0, y: 20 }}
+          animate={{ scale: 1, opacity: 1, y: 0 }}
+          exit={{ scale: 0.9, opacity: 0, y: 20 }}
+          className="relative w-full max-w-md bg-white dark:bg-neutral-900 border border-slate-100 dark:border-neutral-800 rounded-3xl p-6 shadow-2xl z-10"
+        >
+          {/* Header */}
+          <div className="flex justify-between items-center pb-4 border-b border-slate-100 dark:border-neutral-800/80 mb-6">
+            <h3 className="text-lg font-bold text-slate-800 dark:text-neutral-200">
+              Lobby Created
+            </h3>
+            <button
+              onClick={onClose}
+              className="p-1.5 rounded-lg text-slate-400 hover:bg-slate-50 dark:hover:bg-neutral-800 transition"
+            >
+              <X size={18} />
+            </button>
+          </div>
+
+          <div className="space-y-6">
+            {/* Lobby Settings Summary */}
+            <div className="bg-slate-50 dark:bg-neutral-950 border border-slate-200 dark:border-neutral-800/80 rounded-xl p-4">
+              <h4 className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-3">Lobby Configuration</h4>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <span className="block text-[10px] text-slate-400 mb-1">Topic</span>
+                  <span className="text-xs font-bold text-slate-700 dark:text-neutral-300 bg-white dark:bg-neutral-900 px-2 py-1 rounded border border-slate-200 dark:border-neutral-800">{initialTopic || "Random"}</span>
+                </div>
+                <div>
+                  <span className="block text-[10px] text-slate-400 mb-1">Difficulty</span>
+                  <span className={`text-xs font-bold px-2 py-1 rounded border ${initialDifficulty === "Easy" ? "bg-emerald-50 text-emerald-600 border-emerald-200" : initialDifficulty === "Medium" ? "bg-amber-50 text-amber-600 border-amber-200" : "bg-rose-50 text-rose-600 border-rose-200"}`}>{initialDifficulty || "Medium"}</span>
+                </div>
+                <div>
+                  <span className="block text-[10px] text-slate-400 mb-1">Time Limit</span>
+                  <span className="text-xs font-bold text-slate-700 dark:text-neutral-300 bg-white dark:bg-neutral-900 px-2 py-1 rounded border border-slate-200 dark:border-neutral-800">{initialTimeLimit || "30m"}</span>
+                </div>
+                <div>
+                  <span className="block text-[10px] text-slate-400 mb-1">Mode</span>
+                  <span className="text-xs font-bold text-primary bg-primary/10 px-2 py-1 rounded border border-primary/20">{initialMode || "Standard"}</span>
+                </div>
+                <div className="col-span-2 flex justify-between items-center bg-white dark:bg-neutral-900 px-3 py-2 rounded-lg border border-slate-200 dark:border-neutral-800 mt-1">
+                  <div className="flex flex-col">
+                    <span className="text-[10px] text-slate-400">XP Wager</span>
+                    <span className="text-sm font-black text-amber-500">{initialWager || 50} XP</span>
+                  </div>
+                  <div className="flex flex-col text-right">
+                    <span className="text-[10px] text-slate-400">Visibility</span>
+                    <span className={`text-xs font-bold ${initialPublic ? "text-emerald-500" : "text-slate-500"}`}>{initialPublic ? "Public" : "Private"}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Lobby Link */}
+            <div>
+              <label className="block text-xs font-semibold uppercase text-slate-400 tracking-wider mb-2">
+                Invite Link
+              </label>
+              <div className="flex items-center gap-2 bg-slate-50 dark:bg-neutral-950 border border-slate-200 dark:border-neutral-800/80 rounded-xl px-3 py-2.5">
+                <Link2 size={16} className="text-slate-400 shrink-0" />
+                <span className="flex-1 text-xs font-mono text-slate-650 dark:text-neutral-400 truncate">
+                  https://algobuddy.me/arena/duel/{lobbyCode}
+                </span>
+                <button
+                  onClick={handleCopy}
+                  className="p-1.5 hover:bg-slate-200 dark:hover:bg-neutral-800 rounded-lg text-slate-550 dark:text-neutral-400 transition"
+                  title="Copy link"
+                >
+                  {copied ? (
+                    <Check size={14} className="text-emerald-500" />
+                  ) : (
+                    <Copy size={14} />
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <button
+            onClick={handleStart}
+            className="w-full mt-6 py-3 bg-primary hover:bg-primary-dark text-white rounded-xl text-sm font-bold flex items-center justify-center gap-2 transition duration-200 shadow-md shadow-primary/20"
+          >
+            <Play size={16} />
+            <span>Launch Lobby</span>
+          </button>
+        </motion.div>
+      </div>
+    </AnimatePresence>
+  );
+}
diff --git a/src/app/components/ui/DuelSimulatorModal.jsx b/src/app/components/ui/DuelSimulatorModal.jsx
new file mode 100644
index 000000000..31ae46ddb
--- /dev/null
+++ b/src/app/components/ui/DuelSimulatorModal.jsx
@@ -0,0 +1,597 @@
+"use client";
+import { useState, useEffect, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { X, Play, AlertTriangle, CheckCircle, Terminal, Loader2 } from "lucide-react";
+import { Editor } from "@monaco-editor/react";
+import { io } from "socket.io-client";
+import { api } from "@/lib/apiClient";
+
+export default function DuelSimulatorModal({ isOpen, onClose, opponent, currentUserStats, problemName = "Two Sum" }) {
+  const [seconds, setSeconds] = useState(0);
+  const [userCode, setUserCode] = useState(`function twoSum(nums, target) {\n    // Write your code here\n    \n}`);
+  const [oppCode, setOppCode] = useState(`// Opponent is preparing...`);
+  const [userOutput, setUserOutput] = useState("");
+  const [oppStatus, setOppStatus] = useState("Idle");
+  const [logs, setLogs] = useState(["[00:00] Duel started. Let the battle begin!"]);
+  const [battleFinished, setBattleFinished] = useState(false);
+  const [victoryState, setVictoryState] = useState(null); // "victory" or "defeat"
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [socket, setSocket] = useState(null);
+  const [language, setLanguage] = useState("javascript");
+  const [failedAttempts, setFailedAttempts] = useState(0);
+  const [isInitializing, setIsInitializing] = useState(true);
+
+  const logContainerRef = useRef(null);
+  const typingTimeoutRef = useRef(null);
+  const opponentIdleTimerRef = useRef(null);
+  const keystrokesRef = useRef([]);
+
+  // Formatting time helper
+  const formatTime = (secs) => {
+    const m = Math.floor(secs / 60).toString().padStart(2, "0");
+    const s = (secs % 60).toString().padStart(2, "0");
+    return `${m}:${s}`;
+  };
+
+  const addLog = (msg) => {
+    setLogs((prev) => [...prev, `[${formatTime(seconds)}] ${msg}`]);
+  };
+
+  // Auto-scroll logs
+  useEffect(() => {
+    if (logContainerRef.current) {
+      logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
+    }
+  }, [logs]);
+
+  const startTimeRef = useRef(null);
+
+  // Main game timer
+  useEffect(() => {
+    if (!isOpen || battleFinished) return;
+    
+    // Set absolute start time
+    if (!startTimeRef.current) {
+      startTimeRef.current = Date.now();
+    }
+
+    const timer = setInterval(() => {
+      // Calculate exact elapsed seconds using Date.now() instead of s + 1
+      // This prevents the timer from slowing down if the user switches tabs!
+      const elapsed = Math.floor((Date.now() - startTimeRef.current) / 1000);
+      setSeconds(elapsed);
+    }, 1000);
+    
+    return () => clearInterval(timer);
+  }, [isOpen, battleFinished]);
+
+  const recordMatchResultToBackend = async (isWinner) => {
+    try {
+      const { supabase } = await import('@/lib/supabase');
+      const { data: sessionData } = await supabase.auth.getSession();
+      const token = sessionData?.session?.access_token;
+      if (!token) return;
+
+      const springBootBase = process.env.NEXT_PUBLIC_SPRING_BOOT_API_URL || 
+        (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.startsWith("192.168.")
+          ? `http://${window.location.hostname}:8080` 
+          : "https://algobuddy-backend-7iwv.onrender.com");
+
+      await fetch(`${springBootBase}/api/v1/arena/match-result`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`
+        },
+        body: JSON.stringify({
+          opponentId: opponent?.userId,
+          matchId: opponent?.matchId,
+          topic: opponent?.topic || "Arrays",
+          difficulty: "Easy",
+          isWinner: isWinner
+        })
+      });
+    } catch (e) {
+      console.error("Failed to record match result:", e);
+    }
+  };
+
+  // Socket Connection
+  useEffect(() => {
+    if (!isOpen) return;
+
+    // Reset game/match state
+    setIsInitializing(true);
+    setSeconds(0);
+    startTimeRef.current = Date.now();
+    setUserCode(`function twoSum(nums, target) {\n    // Write your code here\n    \n}`);
+    setOppCode(`// Opponent is preparing...`);
+    setUserOutput("");
+    setOppStatus("Idle");
+    setLogs(["[00:00] Duel started. Let the battle begin!"]);
+    setBattleFinished(false);
+    setVictoryState(null);
+    setIsExecuting(false);
+    setFailedAttempts(0);
+
+    const safetyTimeout = setTimeout(() => {
+      setIsInitializing((initializing) => {
+        if (initializing) {
+          addLog("Initialization timed out. Entering arena anyway.");
+          return false;
+        }
+        return initializing;
+      });
+    }, 8000);
+
+    const socketUrl = process.env.NEXT_PUBLIC_SOCKET_SERVER_URL || 
+      (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.startsWith("192.168.")
+        ? `http://${window.location.hostname}:4000`
+        : "https://algobuddy-socket-server.onrender.com");
+
+    const newSocket = io(socketUrl, {
+      transports: ["websocket", "polling"],
+      auth: async (cb) => {
+        try {
+          const { supabase } = await import('@/lib/supabase');
+          const { data: sessionData } = await supabase.auth.getSession();
+          cb({ token: sessionData?.session?.access_token || null });
+        } catch {
+          cb({ token: null });
+        }
+      }
+    });
+    setSocket(newSocket);
+
+    // Join room when connected
+    newSocket.on("connect", async () => {
+      if (opponent?.matchId) {
+         newSocket.emit("join_match", { matchId: opponent.matchId });
+
+         const { supabase } = await import('@/lib/supabase');
+         const { data: sessionData } = await supabase.auth.getSession();
+         const token = sessionData?.session?.access_token;
+         if (token) {
+           const springBootBase = process.env.NEXT_PUBLIC_SPRING_BOOT_API_URL || 
+             (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.startsWith("192.168.")
+               ? `http://${window.location.hostname}:8080` 
+               : "https://algobuddy-backend-7iwv.onrender.com");
+           try {
+             const res = await fetch(`${springBootBase}/api/v1/arena/match/init`, {
+               method: "POST",
+               headers: {
+                 "Content-Type": "application/json",
+                 Authorization: `Bearer ${token}`
+               },
+               body: JSON.stringify({
+                 matchId: opponent.matchId,
+                 opponentId: opponent.userId,
+                 topic: opponent.topic || "Arrays",
+                 difficulty: "Easy"
+               })
+             });
+             if (res.ok) {
+               setIsInitializing(false);
+               addLog("Match initialized on server. Starting duel!");
+             } else {
+               addLog("Failed to initialize match on server. Stats tracking may be offline.");
+               setIsInitializing(false);
+             }
+           } catch (e) {
+             console.error("Failed to init match:", e);
+             addLog("Failed to connect to matchmaking backend. Stats tracking offline.");
+             setIsInitializing(false);
+           }
+         } else {
+           setIsInitializing(false);
+         }
+      } else {
+        setIsInitializing(false);
+      }
+    });
+
+    newSocket.on("connect_error", (err) => {
+      console.error("Socket Connection Error:", err.message);
+      addLog("Socket connection error. Initializing offline mode...");
+      setIsInitializing(false);
+    });
+
+    newSocket.on("opponent_typing_status", (data) => {
+      if (opponentIdleTimerRef.current) {
+        clearTimeout(opponentIdleTimerRef.current);
+        opponentIdleTimerRef.current = null;
+      }
+
+      if (data.isTyping) {
+        setOppCode("// Opponent is typing...");
+      } else {
+        setOppCode("// Opponent is thinking...");
+        
+        // Transition to idle after 15 seconds of inactivity
+        opponentIdleTimerRef.current = setTimeout(() => {
+          setOppCode((prev) => {
+            if (prev.includes("thinking")) return "// Opponent went idle...";
+            return prev;
+          });
+        }, 15000);
+      }
+    });
+
+    newSocket.on("opponent_test_submit", () => {
+      setOppStatus("Running tests...");
+      setOppCode("// Opponent is executing code...");
+      addLog("Opponent is executing code.");
+    });
+
+    newSocket.on("opponent_test_result", (data) => {
+      setOppStatus(`Tested. Status: ${data.status}`);
+      addLog(`Opponent execution result: ${(data.status === 3 || data.status === "SUCCESS") ? "Accepted" : "Failed"}`);
+      
+      if (data.passed) {
+        setOppCode("// Opponent's tests passed!");
+      } else {
+        setOppCode("// Opponent's tests failed...");
+      }
+      
+      // After 3 seconds, if they haven't won the match, revert to thinking
+      setTimeout(() => {
+        setOppCode((prev) => {
+          if (prev.includes("tests")) return "// Opponent is thinking...";
+          return prev;
+        });
+      }, 3000);
+    });
+
+    newSocket.on("match_ended", (data) => {
+      setBattleFinished(true);
+      const iAmWinner = data.winnerId === currentUserStats?.userId;
+      setVictoryState(iAmWinner ? "victory" : "defeat");
+      addLog(iAmWinner ? "VICTORY! You won the battle!" : "DEFEAT! Your opponent finished first.");
+      if (!iAmWinner) {
+        recordMatchResultToBackend(false);
+      }
+    });
+
+    newSocket.on("opponent_disconnected", (data) => {
+      setBattleFinished(true);
+      setVictoryState("victory");
+      addLog("Your opponent disconnected. You win!");
+      recordMatchResultToBackend(true);
+    });
+
+    return () => {
+      clearTimeout(safetyTimeout);
+      if (opponentIdleTimerRef.current) clearTimeout(opponentIdleTimerRef.current);
+      newSocket.disconnect();
+    };
+  }, [isOpen, opponent?.matchId]);
+
+  const handleCodeChange = (value) => {
+    setUserCode(value);
+    
+    const now = Date.now();
+    keystrokesRef.current.push(now);
+    keystrokesRef.current = keystrokesRef.current.filter(time => now - time < 5000);
+    const currentCpm = keystrokesRef.current.length * 12;
+
+    if (socket && opponent?.matchId) {
+      const currentLines = value.split('\n').length;
+      
+      // Clear existing timeout
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      } else {
+        // If no timeout existed, we just started typing!
+        socket.emit("typing_status", {
+          matchId: opponent.matchId,
+          isTyping: true,
+          linesCoded: currentLines,
+          cpm: currentCpm,
+          language: language
+        });
+      }
+
+      // Set timeout to stop typing after 1.5s
+      typingTimeoutRef.current = setTimeout(() => {
+        socket.emit("typing_status", {
+          matchId: opponent.matchId,
+          isTyping: false,
+          linesCoded: currentLines,
+          cpm: 0,
+          language: language
+        });
+        typingTimeoutRef.current = null;
+      }, 1500);
+    }
+  };
+
+
+  const executeCode = async () => {
+    if (!userCode || isExecuting || battleFinished) return;
+    setIsExecuting(true);
+    setUserOutput("Running...");
+    
+    if (socket && opponent?.matchId) {
+      socket.emit("test_submit", {
+        matchId: opponent.matchId,
+        failedAttempts: failedAttempts
+      });
+      addLog("You started executing code.");
+    }
+
+    try {
+      const data = await api.request("/api/code-lab", {
+        method: "POST",
+        body: { code: userCode }
+      });
+      
+      let outText = `Status: ${data.message || data.status}\n`;
+      if (data.output) outText += `Output: ${data.output}\n`;
+      if (data.error) outText += `Error: ${data.error}`;
+      setUserOutput(outText);
+      addLog(`You received execution result: ${data.message || data.status}`);
+
+      const isSuccess = data.status === 3 || data.status === "SUCCESS";
+      const newFailedAttempts = isSuccess ? failedAttempts : failedAttempts + 1;
+      if (!isSuccess) setFailedAttempts(newFailedAttempts);
+
+      if (socket && opponent?.matchId) {
+        socket.emit("test_result", {
+          matchId: opponent.matchId,
+          status: data.status,
+          passed: isSuccess ? 1 : 0,
+          total: 1,
+          failedAttempts: newFailedAttempts
+        });
+
+        if (data.status === 3 || data.status === "SUCCESS") {
+          socket.emit("match_complete", {
+            matchId: opponent.matchId,
+            code: userCode,
+            language: language
+          });
+          setBattleFinished(true);
+          setVictoryState("victory");
+          addLog("VICTORY! You passed all tests and won!");
+          recordMatchResultToBackend(true);
+        }
+      }
+    } catch (err) {
+      setUserOutput("Error executing code: " + err.message);
+    } finally {
+      setIsExecuting(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  const currentUsername = currentUserStats?.name || "You";
+  const opponentName = opponent?.name || "Opponent";
+
+  return (
+    <AnimatePresence>
+      <div className="fixed inset-0 z-[10100] flex flex-col bg-slate-950 text-slate-100 overflow-hidden">
+        {/* Top Header */}
+        <div className="flex items-center justify-between px-6 py-4 bg-slate-900/90 border-b border-slate-800 shadow-md">
+          <div className="flex items-center gap-3">
+            <span className="flex items-center justify-center w-2 h-2 rounded-full bg-red-500 animate-ping" />
+            <h3 className="text-sm font-extrabold text-slate-200 tracking-wider uppercase">
+              Live Duel Arena
+            </h3>
+            <span className="text-xs px-2.5 py-0.5 rounded-full bg-slate-800 border border-slate-700 font-semibold">
+              {problemName} (Easy)
+            </span>
+          </div>
+
+          <div className="flex items-center gap-6">
+            <div className="flex flex-col items-end">
+              <span className="text-[10px] text-slate-400 uppercase tracking-wider font-semibold">Language</span>
+              <select 
+                value={language}
+                onChange={(e) => {
+                  setLanguage(e.target.value);
+                  if (socket && opponent?.matchId) {
+                    socket.emit("typing_status", {
+                      matchId: opponent.matchId,
+                      isTyping: true,
+                      linesCoded: userCode.split('\n').length,
+                      cpm: 0,
+                      language: e.target.value
+                    });
+                  }
+                }}
+                className="bg-slate-800 border border-slate-700 text-xs rounded px-2 py-1 outline-none text-slate-200"
+              >
+                <option value="javascript">JavaScript</option>
+                <option value="python">Python</option>
+                <option value="cpp">C++</option>
+                <option value="java">Java</option>
+              </select>
+            </div>
+            <div className="text-center">
+              <span className="text-xs text-slate-400 block uppercase tracking-wider font-semibold">Time Elapsed</span>
+              <span className="text-lg font-mono font-bold text-primary dark:text-purple-400">
+                {formatTime(seconds)}
+              </span>
+            </div>
+
+            <div className="flex gap-2">
+              <button
+                onClick={executeCode}
+                disabled={isExecuting || battleFinished}
+                className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-500 disabled:opacity-50 text-white rounded-lg transition font-bold text-sm"
+              >
+                {isExecuting ? "Running..." : <><Play size={16} /> Run & Submit</>}
+              </button>
+              <button
+                onClick={onClose}
+                className="p-2 bg-slate-800 hover:bg-red-500 hover:text-white text-slate-300 rounded-lg transition"
+                title="Exit Battle"
+              >
+                <X size={16} />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Split Area */}
+        <div className="flex-1 flex overflow-hidden relative">
+          {isInitializing && (
+            <div className="absolute inset-0 bg-slate-950/80 z-[100] flex flex-col items-center justify-center space-y-4">
+              <Loader2 className="w-10 h-10 text-primary dark:text-purple-400 animate-spin" />
+              <p className="text-sm font-semibold text-slate-300">Initializing match session...</p>
+            </div>
+          )}
+          {/* Left Panel: Problem Statement */}
+          <div className="w-1/4 bg-[#0a0a0f] border-r border-slate-800 p-6 overflow-y-auto hidden md:block">
+            <h2 className="text-xl font-bold mb-4">{problemName}</h2>
+            <div className="text-sm text-slate-300 space-y-4">
+              <p>Given an array of integers <code>nums</code> and an integer <code>target</code>, return indices of the two numbers such that they add up to <code>target</code>.</p>
+              <p>You may assume that each input would have exactly one solution, and you may not use the same element twice.</p>
+              <div className="bg-slate-900 p-3 rounded-md">
+                <strong>Example:</strong><br/>
+                <code>Input: nums = [2,7,11,15], target = 9</code><br/>
+                <code>Output: [0,1]</code>
+              </div>
+            </div>
+          </div>
+
+          {/* Middle Panel: User Editor */}
+          <div className="w-full md:w-[37.5%] flex flex-col border-r border-slate-800 bg-[#1e1e1e]">
+            <div className="flex items-center justify-between px-4 py-2 bg-slate-900 border-b border-slate-800">
+              <span className="text-xs font-bold text-slate-300 flex items-center gap-2">
+                <span className="w-2.5 h-2.5 rounded-full bg-primary" />
+                {currentUsername} (You)
+              </span>
+            </div>
+            <div className="flex-1 relative">
+              <Editor
+                height="100%"
+                defaultLanguage="javascript"
+                theme="vs-dark"
+                value={userCode}
+                onChange={handleCodeChange}
+                options={{ minimap: { enabled: false }, fontSize: 13 }}
+              />
+            </div>
+            {/* User Terminal */}
+            <div className="h-40 bg-[#0d0e12] border-t border-slate-800 p-3 overflow-y-auto">
+               <span className="text-xs font-bold text-slate-500 uppercase">Execution Output</span>
+               <pre className="text-xs text-slate-300 mt-2 whitespace-pre-wrap">{userOutput}</pre>
+            </div>
+          </div>
+
+          {/* Right Panel: Opponent Editor */}
+          <div className="w-full md:w-[37.5%] flex flex-col bg-[#1e1e1e] opacity-80 pointer-events-none">
+            <div className="flex items-center justify-between px-4 py-2 bg-slate-900 border-b border-slate-800">
+              <span className="text-xs font-bold text-slate-300 flex items-center gap-2">
+                <span className="w-2.5 h-2.5 rounded-full bg-purple-600" />
+                {opponentName}
+              </span>
+              <span className="text-[10px] text-purple-400 bg-purple-500/10 px-2 py-0.5 rounded">{oppStatus}</span>
+            </div>
+            <div className="flex-1 relative">
+              <Editor
+                height="100%"
+                defaultLanguage="javascript"
+                theme="vs-dark"
+                value={oppCode}
+                options={{ minimap: { enabled: false }, fontSize: 13, readOnly: true }}
+              />
+            </div>
+            <div className="h-40 bg-[#0d0e12] border-t border-slate-800 p-3 overflow-y-auto">
+               <span className="text-xs font-bold text-slate-500 uppercase">Opponent Status</span>
+               <div className="text-xs text-slate-300 mt-2">{oppStatus === "Idle" ? "Waiting for opponent..." : oppStatus}</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom Console Panel for Logs */}
+        <div className="h-24 bg-slate-900 border-t border-slate-800 flex flex-col overflow-hidden hidden md:flex">
+          <div
+            ref={logContainerRef}
+            className="flex-1 p-3 overflow-y-auto space-y-1 font-mono text-xs text-slate-300"
+          >
+            {logs.map((log, index) => (
+              <div
+                key={index}
+                className={
+                  log.includes("VICTORY")
+                    ? "text-emerald-400 font-bold"
+                    : log.includes("DEFEAT")
+                    ? "text-red-400 font-bold"
+                    : log.includes("failed")
+                    ? "text-red-400"
+                    : "text-slate-400"
+                }
+              >
+                {log}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Victory Overlay Screen */}
+        <AnimatePresence>
+          {battleFinished && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="absolute inset-0 z-50 flex items-center justify-center bg-slate-950/90 backdrop-blur-md"
+            >
+              <motion.div
+                initial={{ scale: 0.9, y: 15 }}
+                animate={{ scale: 1, y: 0 }}
+                exit={{ scale: 0.9, y: 15 }}
+                className="w-full max-w-sm text-center p-6 bg-slate-900 border border-slate-800 rounded-3xl shadow-2xl"
+              >
+                <div className="flex justify-center mb-4">
+                  {victoryState === "victory" ? (
+                    <CheckCircle className="w-16 h-16 text-emerald-400 animate-bounce" />
+                  ) : (
+                    <AlertTriangle className="w-16 h-16 text-red-500 animate-pulse" />
+                  )}
+                </div>
+
+                <h2 className="text-2xl font-extrabold text-white mb-2">
+                  {victoryState === "victory" ? "Victory!" : "Defeat!"}
+                </h2>
+                <p className="text-sm text-slate-400 mb-6">
+                  {victoryState === "victory" 
+                    ? `You solved **${problemName}** in ${formatTime(seconds)} and defeated **${opponentName}**!`
+                    : `**${opponentName}** completed the challenge first. Better luck next time!`
+                  }
+                </p>
+
+                <div className="flex flex-col gap-2.5 mb-6 bg-slate-950/40 p-4 border border-slate-800/80 rounded-xl text-xs">
+                  <div className="flex justify-between">
+                    <span className="text-slate-400">XP</span>
+                    <span className={`font-bold ${victoryState === "victory" ? "text-primary dark:text-purple-400" : "text-slate-400"}`}>
+                      {victoryState === "victory" ? "+50 XP" : "+10 XP"}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-slate-400">Rating Change</span>
+                    <span className={`font-bold ${victoryState === "victory" ? "text-emerald-400" : "text-red-400"}`}>
+                      {victoryState === "victory" ? "+25 Rating" : "-15 Rating"}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="flex gap-3">
+                  <button
+                    onClick={onClose}
+                    className="flex-1 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-xl text-sm font-semibold transition"
+                  >
+                    Return to Arena
+                  </button>
+                </div>
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </AnimatePresence>
+  );
+}
diff --git a/src/app/components/ui/FocusTrap.jsx b/src/app/components/ui/FocusTrap.jsx
new file mode 100644
index 000000000..e48033ad5
--- /dev/null
+++ b/src/app/components/ui/FocusTrap.jsx
@@ -0,0 +1,65 @@
+"use client";
+import { useEffect, useRef } from "react";
+
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+].join(", ");
+
+export default function FocusTrap({ children, active = true, onEscape }) {
+  const containerRef = useRef(null);
+  const previousActiveElement = useRef(null);
+
+  useEffect(() => {
+    if (!active) return;
+    previousActiveElement.current = document.activeElement;
+    const container = containerRef.current;
+    if (!container) return;
+
+    const focusableElements = container.querySelectorAll(FOCUSABLE_SELECTOR);
+    if (focusableElements.length > 0) {
+      focusableElements[0].focus();
+    }
+
+    return () => {
+      if (previousActiveElement.current?.focus) {
+        previousActiveElement.current.focus();
+      }
+    };
+  }, [active]);
+
+  useEffect(() => {
+    if (!active) return;
+    const container = containerRef.current;
+    if (!container) return;
+
+    function handleKeyDown(e) {
+      if (e.key === "Escape" && onEscape) {
+        e.stopPropagation();
+        onEscape();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const focusableElements = container.querySelectorAll(FOCUSABLE_SELECTOR);
+      if (focusableElements.length === 0) return;
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (e.shiftKey && document.activeElement === firstElement) {
+        e.preventDefault();
+        lastElement.focus();
+      } else if (!e.shiftKey && document.activeElement === lastElement) {
+        e.preventDefault();
+        firstElement.focus();
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [active, onEscape]);
+
+  return <div ref={containerRef}>{children}</div>;
+}
diff --git a/src/app/components/ui/GlobalKeyboardShortcuts.jsx b/src/app/components/ui/GlobalKeyboardShortcuts.jsx
new file mode 100644
index 000000000..fe26151cf
--- /dev/null
+++ b/src/app/components/ui/GlobalKeyboardShortcuts.jsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import toast from "react-hot-toast";
+
+export default function GlobalKeyboardShortcuts() {
+  const router = useRouter();
+
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (typeof event.key !== "string") 
+        return;
+
+      const key = event.key.toLowerCase();
+      const isCtrl = event.ctrlKey || event.metaKey;
+      const isShift = event.shiftKey;
+      const isOnVisualizer = window.location.pathname.includes('/visualizer');
+      
+      // Don't trigger if typing in input fields
+      const target = event.target;
+      const isTyping = target.tagName?.toLowerCase() === "input" || 
+                       target.tagName?.toLowerCase() === "textarea" ||
+                       target.isContentEditable;
+      if (isTyping) return;
+
+      // ? key - toggle shortcuts modal
+      if (key === "?") {
+        event.preventDefault();
+        window.dispatchEvent(new CustomEvent("toggle-shortcuts-modal"));
+        return;
+      }
+
+      // Escape - close modal
+      if (key === "escape") {
+        window.dispatchEvent(new CustomEvent("global-escape"));
+        return;
+      }
+
+      // Visualizer-specific shortcuts
+      if (isOnVisualizer) {
+        // Space - Play/Pause
+        if (key === ' ' || key === 'spacebar') {
+          event.preventDefault();
+          document.dispatchEvent(new CustomEvent('visualizer:toggle'));
+          toast.success("Play/Pause toggled", { icon: "▶️" });
+          return;
+        }
+
+        // R - Reset
+        if (key === 'r') {
+          event.preventDefault();
+          document.dispatchEvent(new CustomEvent('visualizer:reset'));
+          toast.success("Visualizer reset", { icon: "🔄" });
+          return;
+        }
+
+        // Arrow keys - Next/Previous step
+        if (key === 'arrowright') {
+          event.preventDefault();
+          document.dispatchEvent(new CustomEvent('visualizer:next'));
+          return;
+        }
+        if (key === 'arrowleft') {
+          event.preventDefault();
+          document.dispatchEvent(new CustomEvent('visualizer:prev'));
+          return;
+        }
+
+        // + / = - Speed up
+        if (key === '+' || key === '=') {
+          event.preventDefault();
+          document.dispatchEvent(new CustomEvent('visualizer:increase-speed'));
+          toast.success("Speed increased", { icon: "⚡" });
+          return;
+        }
+        // - Speed down
+        if (key === '-') {
+          event.preventDefault();
+          document.dispatchEvent(new CustomEvent('visualizer:decrease-speed'));
+          toast.success("Speed decreased", { icon: "🐢" });
+          return;
+        }
+      }
+
+      // Ctrl+Shift+Key navigation shortcuts
+      if (!isCtrl || !isShift) return;
+
+      const routes = {
+        a: "/arena",
+        b: "/practice",
+        v: "/visualizer",
+      };
+
+      const route = routes[key];
+      if (route) {
+        event.preventDefault();
+        router.push(route);
+        toast.success(`Opened ${route}`);
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [router]);
+
+  return null;
+}
diff --git a/src/app/components/ui/GlobalShortcutsModal.jsx b/src/app/components/ui/GlobalShortcutsModal.jsx
new file mode 100644
index 000000000..16d174312
--- /dev/null
+++ b/src/app/components/ui/GlobalShortcutsModal.jsx
@@ -0,0 +1,136 @@
+"use client";
+import { useState, useEffect } from "react";
+import { X } from "lucide-react";
+
+const GLOBAL_SHORTCUTS = [
+  { keys: ["Ctrl", "K"], label: "Search / Command Palette", altKey: ["/"] },
+  { keys: ["Ctrl", "Shift", "K"], label: "Toggle Notifications" },
+  { keys: ["Ctrl", "Shift", "A"], label: "Go to Arena" },
+  { keys: ["Ctrl", "Shift", "B"], label: "Go to Practice" },
+  { keys: ["Ctrl", "Shift", "V"], label: "Go to Visualizer" },
+  { keys: ["?"], label: "Show Keyboard Shortcuts" },
+  { keys: ["Esc"], label: "Close Modals / Menus" },
+  { keys: ["Space"], label: "Play / Pause Visualizer" },
+  { keys: ["R"], label: "Reset Visualizer" },
+  { keys: ["→", "←"], label: "Next / Previous Step" },
+  { keys: ["+", "-"], label: "Speed Up / Slow Down" },
+];
+
+export default function GlobalShortcutsModal() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    function handleToggle() {
+      setIsOpen((prev) => !prev);
+    }
+    function handleEscape() {
+      setIsOpen(false);
+    }
+
+    function handleKeyDown(event) {
+      if (typeof event.key !== "string") 
+        return;
+
+      const key = event.key.toLowerCase();
+      
+      const target = event.target;
+      const isTyping = target.tagName?.toLowerCase() === "input" || 
+                       target.tagName?.toLowerCase() === "textarea" ||
+                       target.isContentEditable;
+      if (isTyping) return;
+
+      if (key === "?") {
+        event.preventDefault();
+        setIsOpen((prev) => !prev);
+      }
+      
+      if (key === "escape" && isOpen) {
+        event.preventDefault();
+        setIsOpen(false);
+      }
+    }
+
+    window.addEventListener("toggle-shortcuts-modal", handleToggle);
+    window.addEventListener("global-escape", handleEscape);
+    window.addEventListener("keydown", handleKeyDown);
+    
+    return () => {
+      window.removeEventListener("toggle-shortcuts-modal", handleToggle);
+      window.removeEventListener("global-escape", handleEscape);
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div 
+      className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm px-4"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) setIsOpen(false);
+      }}
+    >
+      <div 
+        className="w-full max-w-md rounded-xl bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Keyboard shortcuts"
+      >
+        <div className="flex items-center justify-between p-4 border-b border-surface-200 dark:border-surface-800">
+          <h2 className="text-lg font-semibold text-surface-900 dark:text-white flex items-center gap-2">
+            ⌨️ Keyboard Shortcuts
+          </h2>
+          <button
+            onClick={() => setIsOpen(false)}
+            className="p-1 rounded-md text-surface-500 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors"
+            aria-label="Close modal"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+        
+        <div className="p-4 space-y-3 max-h-[60vh] overflow-y-auto">
+          {GLOBAL_SHORTCUTS.map((shortcut, idx) => (
+            <div 
+              key={idx} 
+              className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 py-2 border-b border-surface-100 dark:border-surface-800 last:border-0"
+            >
+              <span className="text-sm font-medium text-surface-700 dark:text-surface-300">
+                {shortcut.label}
+              </span>
+              <div className="flex flex-wrap items-center gap-1.5">
+                {shortcut.keys.map((key, kIdx) => (
+                  <kbd
+                    key={kIdx}
+                    className="inline-flex items-center justify-center px-2 py-1 min-w-[1.5rem] font-mono text-xs font-semibold text-surface-700 dark:text-surface-200 bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-700 rounded shadow-sm"
+                  >
+                    {key === "Ctrl" ? "⌘ / Ctrl" : key}
+                  </kbd>
+                ))}
+                {shortcut.altKey && (
+                  <>
+                    <span className="text-xs text-surface-400 mx-1">or</span>
+                    {shortcut.altKey.map((key, kIdx) => (
+                      <kbd
+                        key={`alt-${kIdx}`}
+                        className="inline-flex items-center justify-center px-2 py-1 min-w-[1.5rem] font-mono text-xs font-semibold text-surface-700 dark:text-surface-200 bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-700 rounded shadow-sm"
+                      >
+                        {key}
+                      </kbd>
+                    ))}
+                  </>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+        
+        <div className="p-3 bg-surface-50 dark:bg-surface-800/50 border-t border-surface-200 dark:border-surface-800 text-center">
+          <p className="text-xs text-surface-500 dark:text-surface-400">
+            Press <kbd className="px-1.5 py-0.5 rounded bg-surface-200 dark:bg-surface-700 font-mono">?</kbd> to open/close this modal
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/ui/HighlightText.jsx b/src/app/components/ui/HighlightText.jsx
new file mode 100644
index 000000000..0dc66f415
--- /dev/null
+++ b/src/app/components/ui/HighlightText.jsx
@@ -0,0 +1,41 @@
+"use client";
+
+export default function HighlightText({ text, query, className = "" }) {
+  if (!query.trim() || !text) {
+    return <span className={className}>{text || ""}</span>;
+  }
+
+  const str = String(text);
+  const lower = str.toLowerCase();
+  const lowerQuery = query.toLowerCase();
+
+  if (!lower.includes(lowerQuery)) {
+    return <span className={className}>{str}</span>;
+  }
+
+  const parts = [];
+  let lastIndex = 0;
+
+  let matchIndex = lower.indexOf(lowerQuery, lastIndex);
+  while (matchIndex !== -1) {
+    if (matchIndex > lastIndex) {
+      parts.push(str.slice(lastIndex, matchIndex));
+    }
+    parts.push(
+      <mark
+        key={matchIndex}
+        className="bg-yellow-200 text-yellow-900 rounded-sm px-0.5 not-italic font-semibold"
+      >
+        {str.slice(matchIndex, matchIndex + query.length)}
+      </mark>
+    );
+    lastIndex = matchIndex + query.length;
+    matchIndex = lower.indexOf(lowerQuery, lastIndex);
+  }
+
+  if (lastIndex < str.length) {
+    parts.push(str.slice(lastIndex));
+  }
+
+  return <span className={className}>{parts}</span>;
+}
diff --git a/src/app/components/ui/LinearMemoryControls.jsx b/src/app/components/ui/LinearMemoryControls.jsx
new file mode 100644
index 000000000..f4919a1ed
--- /dev/null
+++ b/src/app/components/ui/LinearMemoryControls.jsx
@@ -0,0 +1,116 @@
+"use client";
+import React from "react";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+export default function LinearMemoryControls({
+  inputValue,
+  setInputValue,
+  placeholder = "Enter value...",
+  isAnimating = false,
+  operation = null,
+  message = null,
+  speed = 1,
+  onSpeedChange,
+  actions = [],
+}) {
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !isAnimating) {
+      const primaryAction = actions.find(a => a.needsInput);
+      if (primaryAction && !primaryAction.disabled) {
+        primaryAction.onClick();
+      }
+    }
+  };
+
+  useVisualizerKeyboard({
+    onReset: actions.find((a) => a.label?.toLowerCase() === "reset")?.onClick,
+    onSpeedChange: onSpeedChange,
+    speed: speed,
+    sorting: isAnimating,
+    sorted: false,
+    enabled: true,
+  });
+
+  return (
+    <div className="bg-slate-900/60 backdrop-blur-xl border border-slate-800 p-4 md:p-5 rounded-2xl flex flex-col xl:flex-row gap-5 justify-between items-center shadow-lg shadow-black/20 w-full mb-8 max-w-6xl mx-auto">
+      {/* 1. Input and Actions Row */}
+      <div className="flex flex-col sm:flex-row gap-3 w-full xl:w-auto items-center">
+        {setInputValue && (
+          <input
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            placeholder={placeholder}
+            className="w-full sm:w-32 px-3 py-2 text-sm bg-slate-950 border border-slate-700 rounded-xl text-slate-100 placeholder-slate-500 focus:outline-none focus:border-[#a435f0] transition-colors"
+            disabled={isAnimating}
+            onKeyDown={handleKeyDown}
+          />
+        )}
+        
+        <div className="flex flex-wrap items-center gap-2 w-full sm:w-auto justify-center">
+          {actions.map((action, idx) => {
+            const isPrimary = action.variant === "primary" || !action.variant;
+            const isSecondary = action.variant === "secondary";
+            const isDanger = action.variant === "danger";
+
+            let baseClasses = "px-3.5 py-2 text-xs font-bold rounded-xl transition-all border flex items-center justify-center gap-1.5 ";
+            if (isPrimary) {
+              baseClasses += "bg-[#a435f0] hover:bg-[#8f2cd6] border-[#8f2cd6] text-white";
+            } else if (isDanger) {
+              baseClasses += "bg-rose-950/40 hover:bg-rose-900/60 border-rose-900/50 text-rose-500";
+            } else if (isSecondary) {
+              baseClasses += "bg-slate-800/80 hover:bg-slate-700 border-slate-700 text-slate-300";
+            } else {
+              baseClasses += "bg-slate-800 hover:bg-slate-700 border-slate-700 text-slate-300";
+            }
+
+            if (isAnimating || action.disabled) {
+              baseClasses += " opacity-50 cursor-not-allowed";
+            }
+
+            return (
+              <button
+                key={idx}
+                onClick={action.onClick}
+                disabled={isAnimating || action.disabled}
+                className={baseClasses}
+              >
+                {action.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* 2. Status and Message Banner */}
+      <div className="flex flex-col gap-2 w-full xl:flex-1 items-center xl:items-start min-h-[40px] justify-center px-2">
+        {operation && (
+          <div className="text-xs font-semibold text-[#a435f0] flex items-center gap-1.5 animate-pulse">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clipRule="evenodd" />
+            </svg>
+            <span>{operation}</span>
+          </div>
+        )}
+        {message && !operation && (
+          <div className="text-xs font-medium text-slate-400 text-center xl:text-left leading-relaxed">
+            {message}
+          </div>
+        )}
+      </div>
+
+      {/* 3. Playback Controls */}
+      <div className="w-full xl:w-auto flex justify-center xl:justify-end">
+        <PlaybackControls 
+          showPlayPause={false}
+          speed={speed}
+          onSpeedChange={onSpeedChange}
+          onIncreaseSpeed={() => onSpeedChange(Math.min(speed + 0.5, 5))}
+          onDecreaseSpeed={() => onSpeedChange(Math.max(speed - 0.5, 0.5))}
+          disabled={isAnimating}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/ui/MatchmakingModal.jsx b/src/app/components/ui/MatchmakingModal.jsx
new file mode 100644
index 000000000..cdb6f7111
--- /dev/null
+++ b/src/app/components/ui/MatchmakingModal.jsx
@@ -0,0 +1,300 @@
+"use client";
+import { useState, useEffect, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { X, Loader2, Award, Shield, Zap } from "lucide-react";
+import { io } from "socket.io-client";
+
+// MOCK fallback just in case
+const MOCK_OPPONENTS = [
+  { name: "Aryan", rating: 2450, level: 17, avatar: "A", title: "Binary Search Master" },
+  { name: "Aditya", rating: 2200, level: 16, avatar: "AD", title: "Speed Demon" },
+  { name: "Rahul", rating: 2130, level: 15, avatar: "R", title: "Streak God" },
+  { name: "Ananya", rating: 2105, level: 15, avatar: "AN", title: "Consistency King" },
+  { name: "Rohit", rating: 1950, level: 14, avatar: "RO", title: "Recursion Ninja" },
+];
+
+const SEARCH_STATUSES = [
+  "Searching for developer...",
+  "Matching based on rating...",
+  "Analyzing queue activity...",
+  "Expanding search criteria...",
+];
+
+export default function MatchmakingModal({ isOpen, onClose, onMatchFound, currentUserStats, isRanked = false }) {
+  const [seconds, setSeconds] = useState(0);
+  const [statusIdx, setStatusIdx] = useState(0);
+  const [matchState, setMatchState] = useState("searching"); // searching, matched
+  const [matchedOpponent, setMatchedOpponent] = useState(null);
+
+  const onMatchFoundRef = useRef(onMatchFound);
+  const statsRef = useRef(currentUserStats);
+
+  const timerRef = useRef(null);
+  const statusTimerRef = useRef(null);
+  const socketRef = useRef(null);
+
+  useEffect(() => {
+    onMatchFoundRef.current = onMatchFound;
+  }, [onMatchFound]);
+
+  useEffect(() => {
+    statsRef.current = currentUserStats;
+  }, [currentUserStats]);
+
+  const triggerMockMatch = () => {
+    clearInterval(timerRef.current);
+    clearInterval(statusTimerRef.current);
+
+    if (socketRef.current) {
+      socketRef.current.emit("leave_matchmaking");
+      socketRef.current.disconnect();
+    }
+
+    const randomOpp = MOCK_OPPONENTS[Math.floor(Math.random() * MOCK_OPPONENTS.length)];
+    const matchId = `mock-match-${Date.now()}`;
+    const opponent = {
+      userId: `mock-${randomOpp.name.toLowerCase()}`,
+      name: randomOpp.name,
+      rating: randomOpp.rating,
+      level: randomOpp.level,
+      avatar: randomOpp.avatar,
+      title: randomOpp.title,
+      matchId,
+      topic: "Arrays"
+    };
+
+    setMatchedOpponent(opponent);
+    setMatchState("matched");
+
+    setTimeout(() => {
+      if (onMatchFoundRef.current) {
+        onMatchFoundRef.current({ ...opponent, matchId });
+      }
+    }, 3000);
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      setSeconds(0);
+      setStatusIdx(0);
+      setMatchState("searching");
+      setMatchedOpponent(null);
+      return;
+    }
+
+    setSeconds(0);
+    let currentSeconds = 0;
+    timerRef.current = setInterval(() => {
+      currentSeconds += 1;
+      setSeconds(currentSeconds);
+    }, 1000);
+
+    statusTimerRef.current = setInterval(() => {
+      setStatusIdx((prev) => (prev < SEARCH_STATUSES.length - 1 ? prev + 1 : prev));
+    }, 1800);
+
+    const socketUrl = process.env.NEXT_PUBLIC_SOCKET_SERVER_URL || 
+      (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.startsWith("192.168.")
+        ? `http://${window.location.hostname}:4000`
+        : "https://algobuddy-socket-server.onrender.com");
+
+    // Establish Socket connection with auth token
+    const socket = io(socketUrl, {
+      transports: ["websocket", "polling"],
+      auth: async (cb) => {
+        try {
+          const { supabase } = await import('@/lib/supabase');
+          const { data: sessionData } = await supabase.auth.getSession();
+          cb({ token: sessionData?.session?.access_token || null });
+        } catch {
+          cb({ token: null });
+        }
+      }
+    });
+
+    socketRef.current = socket;
+
+    socket.on("connect_error", (err) => {
+      console.log("Socket Connection Error:", err.message);
+    });
+
+    socket.on("connect", () => {
+      console.log("Connected to Arena Socket Server:", socket.id);
+      socket.emit("join_matchmaking", {
+        name: statsRef.current?.name || "Player",
+        rating: statsRef.current?.rating || 1200,
+        level: statsRef.current?.level || 1,
+        topic: "Arrays",
+        difficulty: "Easy",
+        isRanked: isRanked
+      });
+    });
+
+    socket.on("match_found", (matchDetails) => {
+      console.log("Match found!", matchDetails);
+      if (!matchDetails || !matchDetails.players) {
+        console.error("Invalid matchDetails structure:", matchDetails);
+        return;
+      }
+      // Find the opponent from the matchDetails.players array
+      const opponentData = matchDetails.players.find(p => p.socketId !== socket.id) || matchDetails.players[0] || {};
+      const opponentName = opponentData.name || "Opponent";
+      
+      const opponent = {
+        userId: opponentData.userId || "",
+        name: opponentName,
+        rating: opponentData.rating || 1200,
+        level: opponentData.level || 1,
+        avatar: opponentName.slice(0, 2).toUpperCase(),
+        title: "Challenger",
+        matchId: matchDetails.matchId,
+        topic: matchDetails.topic || "Arrays"
+      };
+
+      setMatchedOpponent(opponent);
+      setMatchState("matched");
+      clearInterval(timerRef.current);
+      clearInterval(statusTimerRef.current);
+
+      // Auto-start duel after 3 seconds of matched display
+      setTimeout(() => {
+        if (onMatchFoundRef.current) {
+          onMatchFoundRef.current({ ...opponent, matchId: matchDetails.matchId });
+        }
+      }, 3000);
+    });
+
+    return () => {
+      clearInterval(timerRef.current);
+      clearInterval(statusTimerRef.current);
+      socket.emit("leave_matchmaking");
+      socket.disconnect();
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const currentUsername = currentUserStats?.name || "You";
+  const currentUserRating = currentUserStats?.rating || 1620;
+  const currentUserLevel = currentUserStats?.level || 17;
+
+  return (
+    <AnimatePresence>
+      <div className="fixed inset-0 z-[10100] flex items-center justify-center p-4">
+        {/* Backdrop */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          onClick={onClose}
+          className="absolute inset-0 bg-slate-900/60 dark:bg-black/80 backdrop-blur-sm"
+        />
+
+        {/* Panel Container */}
+        <motion.div
+          initial={{ scale: 0.9, opacity: 0, y: 20 }}
+          animate={{ scale: 1, opacity: 1, y: 0 }}
+          exit={{ scale: 0.9, opacity: 0, y: 20 }}
+          className="relative w-full max-w-lg bg-white dark:bg-neutral-900 border border-slate-100 dark:border-neutral-800 rounded-3xl p-6 shadow-2xl overflow-hidden z-10"
+        >
+          {/* Header */}
+          <div className="flex justify-between items-center pb-4 border-b border-slate-100 dark:border-neutral-800/80 mb-6">
+            <h3 className="text-lg font-bold text-slate-800 dark:text-neutral-200">
+              {matchState === "searching" ? (isRanked ? "Finding Ranked Match" : "Finding Casual Match") : "Match Confirmed!"}
+            </h3>
+            {matchState === "searching" && (
+              <button
+                onClick={onClose}
+                className="p-1.5 rounded-lg text-slate-400 hover:bg-slate-50 dark:hover:bg-neutral-800 transition"
+              >
+                <X size={18} />
+              </button>
+            )}
+          </div>
+
+          {matchState === "searching" ? (
+            <div className="flex flex-col items-center py-6 text-center">
+              <div className="relative flex items-center justify-center w-20 h-20 mb-6">
+                <Loader2 className="w-16 h-16 text-primary dark:text-purple-400 animate-spin" />
+                <span className="absolute text-xs font-bold text-slate-600 dark:text-neutral-300">
+                  {seconds}s
+                </span>
+              </div>
+
+              <motion.p
+                key={statusIdx}
+                initial={{ opacity: 0, y: 5 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="text-sm font-semibold text-slate-700 dark:text-neutral-300 min-h-[20px]"
+              >
+                {SEARCH_STATUSES[statusIdx]}
+              </motion.p>
+
+              <p className="text-xs text-slate-400 dark:text-neutral-500 mt-2">
+                Searching for players close to Rating {currentUserRating}...
+              </p>
+
+              {seconds >= 10 && (
+                <button
+                  onClick={triggerMockMatch}
+                  className="mt-6 px-4 py-2 border border-primary/30 hover:border-primary text-primary dark:text-purple-400 rounded-xl text-xs font-bold transition bg-primary/5 hover:bg-primary/10 shadow-sm"
+                >
+                  Match with AI Bot 🤖
+                </button>
+              )}
+            </div>
+          ) : (
+            <div className="flex flex-col items-center py-4">
+              <div className="flex w-full items-center justify-around gap-4 mb-6">
+                {/* User Card */}
+                <div className="flex flex-col items-center text-center p-4 border border-slate-100 dark:border-neutral-800 bg-slate-50/50 dark:bg-neutral-900/20 rounded-2xl w-[42%]">
+                  <div className="w-14 h-14 rounded-full bg-primary text-white flex items-center justify-center text-lg font-bold shadow-md mb-3 border-2 border-white dark:border-neutral-900">
+                    {currentUsername.slice(0, 2).toUpperCase()}
+                  </div>
+                  <h4 className="text-sm font-bold text-slate-800 dark:text-neutral-200 truncate w-full">
+                    {currentUsername}
+                  </h4>
+                  <div className="flex items-center gap-1 text-[10px] text-slate-500 dark:text-neutral-400 mt-1">
+                    <Zap size={10} className="text-yellow-500" />
+                    <span>Lvl {currentUserLevel}</span>
+                  </div>
+                  <div className="text-xs font-semibold text-primary dark:text-purple-400 mt-2">
+                    Rating {currentUserRating}
+                  </div>
+                </div>
+
+                {/* VS Badge */}
+                <div className="flex flex-col items-center">
+                  <div className="w-10 h-10 rounded-full bg-amber-500 text-white flex items-center justify-center font-bold text-sm shadow-md animate-bounce">
+                    VS
+                  </div>
+                </div>
+
+                {/* Opponent Card */}
+                <div className="flex flex-col items-center text-center p-4 border border-slate-100 dark:border-neutral-800 bg-slate-50/50 dark:bg-neutral-900/20 rounded-2xl w-[42%]">
+                  <div className="w-14 h-14 rounded-full bg-purple-600 text-white flex items-center justify-center text-lg font-bold shadow-md mb-3 border-2 border-white dark:border-neutral-900">
+                    {matchedOpponent?.avatar}
+                  </div>
+                  <h4 className="text-sm font-bold text-slate-800 dark:text-neutral-200 truncate w-full">
+                    {matchedOpponent?.name}
+                  </h4>
+                  <div className="flex items-center gap-1 text-[10px] text-slate-500 dark:text-neutral-400 mt-1">
+                    <Zap size={10} className="text-yellow-500" />
+                    <span>Lvl {matchedOpponent?.level}</span>
+                  </div>
+                  <div className="text-xs font-semibold text-primary dark:text-purple-400 mt-2">
+                    Rating {matchedOpponent?.rating}
+                  </div>
+                </div>
+              </div>
+
+              <div className="w-full bg-purple-500/10 border border-purple-500/20 text-purple-700 dark:text-purple-400 rounded-xl p-3 text-center text-xs font-semibold animate-pulse mb-2">
+                Starting duel in 3 seconds... Prepare yourself!
+              </div>
+            </div>
+          )}
+        </motion.div>
+      </div>
+    </AnimatePresence>
+  );
+}
diff --git a/src/app/components/ui/ModuleCard.jsx b/src/app/components/ui/ModuleCard.jsx
new file mode 100644
index 000000000..dfb6c82cf
--- /dev/null
+++ b/src/app/components/ui/ModuleCard.jsx
@@ -0,0 +1,102 @@
+"use client";
+import { useState, useEffect } from "react";
+import { useUser } from "@/features/user/UserContext";
+import { toast } from "react-hot-toast";
+import { TriangleAlert } from "lucide-react";
+import { api } from "@/lib/apiClient";
+
+export default function ModuleCard({ moduleId, description, initialDone }) {
+  const { user } = useUser() || {};
+  const [isDone, setIsDone] = useState(initialDone);
+
+  useEffect(() => {
+    if (!user) {
+      setIsDone(initialDone ?? false);
+      return;
+    }
+
+    const fetchUserProgress = async () => {
+      try {
+        const data = await api.request("/api/progress");
+        const status = data.progress?.[moduleId]?.status;
+        setIsDone(status === "Completed");
+      } catch (e) {
+        console.error("Error fetching user progress:", e);
+      }
+    };
+    fetchUserProgress();
+  }, [user, moduleId, initialDone]);
+
+  async function toggleCompletion() {
+    if (!user) {
+      toast.custom((t) => (
+        <div className="max-w-sm w-full bg-neutral-100 dark:bg-zinc-800 border border-[#a435f0] rounded-lg shadow-xl p-4 flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <TriangleAlert size={50} className="dark:text-yellow-500 text-red-500" />
+            <span className="text-sm text-gray-800 dark:text-gray-100">
+              You are in guest mode. Login or signup to track your progress.
+            </span>
+          </div>
+          <div className="flex justify-end gap-2 mt-2">
+            <button
+              onClick={() => {
+                window.location.href = "/login";
+                toast.dismiss(t.id);
+              }}
+              className="px-4 py-2 rounded-full font-medium bg-gradient-to-r from-[#a435f0] to-[#7c3aed] text-white hover:from-[#7c3aed] hover:to-[#6d28d9] transition duration-300 shadow-md flex items-center gap-2"
+            >
+              Login/Signup
+            </button>
+            <button
+              onClick={() => toast.dismiss(t.id)}
+              className="px-4 py-2 rounded-full font-medium bg-neutral-100 hover:bg-neutral-200 dark:hover:bg-neutral-900 dark:bg-neutral-800 border border-[#a435f0] dark:text-white text-black transition duration-300 shadow-lg flex items-center"
+            >
+              Continue as Guest
+            </button>
+          </div>
+        </div>
+      ));
+      return;
+    }
+
+    try {
+      const nextStatus = isDone ? "Not Started" : "Completed";
+      await api.request("/api/progress", {
+        method: "POST",
+        body: { problemId: moduleId, status: nextStatus },
+      });
+      setIsDone(!isDone);
+      toast.success(
+        isDone ? "Module marked as incomplete." : "Module marked as completed!"
+      );
+    } catch (err) {
+      console.error("Error updating progress:", err);
+      toast.error("Failed to update progress. Please try again.");
+    }
+  }
+
+  return (
+    <div
+      className={`border border-surface-200 dark:border-surface-700 max-w-4xl mx-auto rounded-lg p-4 shadow-lg flex flex-col justify-between ${
+        isDone ? "bg-green-50 dark:bg-green-900/30" : "bg-white dark:bg-surface-900"
+      }`}
+    >
+      <div className="my-4 px-4 flex items-center justify-between">
+        <div>
+          <h1 className="text-lg font-semibold text-surface-800 dark:text-surface-200">
+            Done With the Learning
+          </h1>
+          <p className="text-sm text-surface-500 dark:text-surface-400">{description}</p>
+        </div>
+        <input
+          type="checkbox"
+          checked={isDone}
+          onChange={toggleCompletion}
+          className={`w-6 h-6 rounded cursor-pointer transition duration-300 ${
+            isDone ? "accent-green-500 ring-2 ring-green-500" : "accent-[#a435f0]"
+          }`}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/ui/NarrationContext.jsx b/src/app/components/ui/NarrationContext.jsx
new file mode 100644
index 000000000..6a4e6434c
--- /dev/null
+++ b/src/app/components/ui/NarrationContext.jsx
@@ -0,0 +1,87 @@
+"use client";
+
+import React, { createContext, useContext, useState, useEffect, useCallback, useRef } from "react";
+
+const NarrationContext = createContext(null);
+
+export const NarrationProvider = ({ children }) => {
+  const [ttsEnabled, setTtsEnabled] = useState(false);
+  const [log, setLog] = useState([]);
+  
+  const synthRef = useRef(null);
+
+  // Initialize synth only on client side
+  useEffect(() => {
+    if (typeof window !== "undefined" && window.speechSynthesis) {
+      synthRef.current = window.speechSynthesis;
+    }
+    
+    // Load preference from local storage
+    const savedPreference = localStorage.getItem("algoBuddy_ttsEnabled");
+    if (savedPreference !== null) {
+      setTtsEnabled(savedPreference === "true");
+    }
+  }, []);
+
+  const toggleTts = useCallback(() => {
+    setTtsEnabled((prev) => {
+      const next = !prev;
+      localStorage.setItem("algoBuddy_ttsEnabled", String(next));
+      if (!next && synthRef.current) {
+        synthRef.current.cancel(); // Stop speaking immediately if turned off
+      }
+      return next;
+    });
+  }, []);
+
+  const speak = useCallback((text, rate = 1.0) => {
+    return new Promise((resolve) => {
+      if (!text) {
+        resolve();
+        return;
+      }
+      
+      // Always add to log
+      setLog((prev) => [...prev, { text, timestamp: Date.now() }]);
+
+      if (!ttsEnabled || !synthRef.current) {
+        resolve();
+        return;
+      }
+
+      // Cancel any ongoing speech to keep up with animations
+      synthRef.current.cancel();
+
+      const utterance = new SpeechSynthesisUtterance(text);
+      // Adjust speed to match visualizer
+      utterance.rate = rate; 
+      
+      // Resolve promise when done speaking or on error
+      utterance.onend = () => resolve();
+      utterance.onerror = () => resolve();
+
+      synthRef.current.speak(utterance);
+    });
+  }, [ttsEnabled]);
+
+  const clearLog = useCallback(() => {
+    setLog([]);
+    if (synthRef.current) {
+      synthRef.current.cancel();
+    }
+  }, []);
+
+  return (
+    <NarrationContext.Provider value={{ ttsEnabled, toggleTts, log, speak, clearLog }}>
+      {children}
+    </NarrationContext.Provider>
+  );
+};
+
+export const useNarration = () => {
+  const context = useContext(NarrationContext);
+  if (!context) {
+    throw new Error("useNarration must be used within a NarrationProvider");
+  }
+  return context;
+};
diff --git a/src/app/components/ui/NarrationPanel.jsx b/src/app/components/ui/NarrationPanel.jsx
new file mode 100644
index 000000000..7df1cfd11
--- /dev/null
+++ b/src/app/components/ui/NarrationPanel.jsx
@@ -0,0 +1,120 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import { useNarration } from "./NarrationContext";
+
+export default function NarrationPanel() {
+  const { ttsEnabled, toggleTts, log, clearLog } = useNarration();
+  const [isOpen, setIsOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const scrollRef = useRef(null);
+
+  useEffect(() => {
+    const checkScroll = () => setIsScrolled(window.scrollY > 300);
+    checkScroll();
+    window.addEventListener("scroll", checkScroll);
+    return () => window.removeEventListener("scroll", checkScroll);
+  }, []);
+
+  // Auto-scroll to the bottom when new logs arrive
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+    // Optionally open the panel automatically if a log comes in and it was closed
+    // but only if the user hasn't explicitly closed it. Let's keep it simple for now.
+  }, [log]);
+
+  if (log.length === 0) {
+    return null; // Don't render anything if there are no logs yet
+  }
+
+  return (
+    <div 
+      className={`fixed bottom-[147px] sm:bottom-24 z-50 flex flex-col items-end transition-all duration-300 ${
+        isScrolled ? "right-20 sm:right-24" : "right-3 sm:right-6"
+      }`}
+    >
+      {/* Panel */}
+      {isOpen && (
+        <div className="w-80 h-96 bg-white dark:bg-neutral-900 border border-gray-200 dark:border-gray-700 shadow-2xl rounded-lg mb-4 flex flex-col overflow-hidden transition-all duration-300">
+          {/* Header */}
+          <div className="flex items-center justify-between px-4 py-2 bg-gray-100 dark:bg-neutral-800 border-b border-gray-200 dark:border-gray-700">
+            <h3 className="text-sm font-semibold text-gray-800 dark:text-gray-200">
+              Algorithm Logs
+            </h3>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={clearLog}
+                className="text-xs text-gray-500 hover:text-red-500 transition-colors"
+                title="Clear Logs"
+              >
+                Clear
+              </button>
+              <button
+                onClick={() => setIsOpen(false)}
+                className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
+                title="Close Panel"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          {/* Logs List */}
+          <div
+            ref={scrollRef}
+            className="flex-1 overflow-y-auto p-4 flex flex-col gap-3 text-sm text-gray-700 dark:text-gray-300"
+          >
+            {log.map((item, index) => (
+              <div key={index} className="flex flex-col">
+                <span className="text-[10px] text-gray-400 dark:text-gray-500 mb-0.5">
+                  {new Date(item.timestamp).toLocaleTimeString([], { hour12: false })}
+                </span>
+                <span className="leading-relaxed border-l-2 border-indigo-400 pl-2">
+                  {item.text}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Floating Toggle Button */}
+      <div className="flex gap-2">
+        <button
+          onClick={toggleTts}
+          className={`flex items-center justify-center w-12 h-12 rounded-full shadow-lg transition-transform hover:scale-105 active:scale-95 ${
+            ttsEnabled
+              ? "bg-indigo-600 text-white"
+              : "bg-gray-200 text-gray-600 dark:bg-neutral-800 dark:text-gray-400"
+          }`}
+          title={ttsEnabled ? "Disable Narration (TTS)" : "Enable Narration (TTS)"}
+        >
+          {ttsEnabled ? (
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.536 8.464a5 5 0 010 7.072M17.95 6.05a8 8 0 010 11.9m-8.586-1.586A2 2 0 017 15V9a2 2 0 011.364-1.896l4-1.714v13.22l-4-1.714z" />
+            </svg>
+          ) : (
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" clipRule="evenodd" />
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2" />
+            </svg>
+          )}
+        </button>
+
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="flex items-center justify-center w-12 h-12 bg-white dark:bg-neutral-900 text-gray-800 dark:text-gray-200 rounded-full shadow-lg border border-gray-200 dark:border-gray-700 transition-transform hover:scale-105 active:scale-95"
+          title="Toggle Logs Panel"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/ui/PlaybackControls.jsx b/src/app/components/ui/PlaybackControls.jsx
new file mode 100644
index 000000000..9a718ee13
--- /dev/null
+++ b/src/app/components/ui/PlaybackControls.jsx
@@ -0,0 +1,246 @@
+import React, { useEffect } from "react";
+import { Play, Pause, RotateCcw, ChevronLeft, ChevronRight, Bot } from "lucide-react";
+
+export default function PlaybackControls({
+  isPaused: pausedProp,
+  onTogglePlayPause: toggleProp, currentStep,
+  totalSteps, onTimelineChange,
+  isPlaying: playingProp,
+  onPlayPause: playPauseProp,
+  speed,
+  onIncreaseSpeed,
+  onDecreaseSpeed,
+  onSpeedChange,
+  disabled = false,
+  showPlayPause = true,
+  onStepForward,
+  onStepBackward,
+  onReset,
+  onClear,
+  clearLabel = "Clear",
+  progressText,
+  onExplainStep,
+  stepAnnouncement = "",
+}) {
+  // Support both `isPaused`/`onTogglePlayPause` (new) and `isPlaying`/`onPlayPause` (legacy) prop conventions.
+  const isPlaying = pausedProp !== undefined ? !pausedProp : (playingProp ?? false);
+  const handlePlayPause = toggleProp || playPauseProp || (() => {});
+
+  useEffect(() => {
+    if (disabled) return;
+
+    const handleKeyDown = (e) => {
+      const activeTag = document.activeElement?.tagName?.toLowerCase();
+      if (activeTag === "input" || activeTag === "textarea" || document.activeElement?.isContentEditable) {
+        return;
+      }
+
+      if (e.code === "Space" && showPlayPause) {
+        e.preventDefault();
+        handlePlayPause();
+      } else if (e.key === "ArrowLeft" && onStepBackward) {
+        e.preventDefault();
+        onStepBackward();
+      } else if (e.key === "ArrowRight" && onStepForward) {
+        e.preventDefault();
+        onStepForward();
+      } else if ((e.key === "r" || e.key === "R") && onReset) {
+        e.preventDefault();
+        onReset();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [disabled, showPlayPause, handlePlayPause, onStepBackward, onStepForward, onReset]);
+
+  return (
+    <div
+      role="toolbar"
+      aria-label="Visualization controls"
+      className="flex flex-col sm:flex-row items-center justify-between w-full bg-slate-900/60 backdrop-blur-xl border border-slate-800 p-3 md:p-4 rounded-2xl shadow-lg shadow-black/20 gap-4"
+    >
+      <div
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {stepAnnouncement}
+      </div>
+
+      {/* Play/Pause Button & Frame Stepping */}
+      {showPlayPause && (
+        <div className="flex items-center gap-2 w-full sm:w-auto justify-center bg-slate-950/70 p-1.5 rounded-full border border-slate-800/80 shadow-inner">
+
+          {onStepBackward && (
+            <button
+              type="button"
+              onClick={onStepBackward}
+              disabled={disabled}
+              aria-label="Step backward one iteration"
+              className="p-2 text-slate-400 hover:text-white hover:bg-slate-800/60 rounded-full transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-[#a435f0] focus:ring-offset-2 focus:ring-offset-slate-900"
+              title="Previous Step"
+            >
+              <ChevronLeft size={20} aria-hidden="true" />
+            </button>
+          )}
+
+          <button
+            type="button"
+            onClick={handlePlayPause}
+            disabled={disabled}
+            aria-label={isPlaying ? "Pause algorithm animation" : "Play algorithm animation"}
+            aria-pressed={isPlaying}
+            className="flex items-center justify-center bg-[#a435f0] text-white w-10 h-10 rounded-full hover:bg-[#8f2cd6] transition-all shadow-md shadow-[#a435f0]/30 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-[#a435f0] focus:ring-offset-2 focus:ring-offset-slate-900"
+            title={isPlaying ? "Pause" : "Play"}
+          >
+            {isPlaying ? <Pause size={20} className="fill-current" aria-hidden="true" /> : <Play size={20} className="fill-current ml-1" aria-hidden="true" />}
+          </button>
+
+          {onStepForward && (
+            <button
+              type="button"
+              onClick={onStepForward}
+              disabled={disabled}
+              aria-label="Step forward one iteration"
+              className="p-2 text-slate-400 hover:text-white hover:bg-slate-800/60 rounded-full transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-[#a435f0] focus:ring-offset-2 focus:ring-offset-slate-900"
+              title="Next Step"
+            >
+              <ChevronRight size={20} aria-hidden="true" />
+            </button>
+          )}
+
+          {onReset && (
+            <button
+              type="button"
+              onClick={onReset}
+              disabled={disabled}
+              aria-label="Reset visualization to initial state"
+              className="ml-1 inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-bold text-white bg-[#a435f0] hover:bg-[#8f2cd6] rounded-full transition-all shadow-md shadow-[#a435f0]/20 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-[#a435f0] focus:ring-offset-2 focus:ring-offset-slate-900"
+              title="Reset"
+            >
+              <RotateCcw size={14} aria-hidden="true" />
+              <span>Reset</span>
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Clear Button */}
+      {onClear && (
+        <button
+          type="button"
+          onClick={onClear}
+          disabled={disabled}
+          aria-label={clearLabel}
+          className="px-3.5 py-2 text-xs font-bold text-rose-500 bg-rose-950/20 hover:bg-rose-950/40 rounded-xl transition-all border border-rose-900/30 flex items-center gap-1.5 w-full sm:w-auto justify-center focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 focus:ring-offset-slate-900"
+        >
+          <RotateCcw size={14} aria-hidden="true" /> {clearLabel}
+        </button>
+      )}
+
+      {/* Explain Step Button */}
+      {onExplainStep && (
+        <button
+          type="button"
+          onClick={onExplainStep}
+          disabled={disabled}
+          aria-label="Explain this algorithm step using AI"
+          className="px-3.5 py-2 text-xs font-bold text-[#c084fc] bg-[#3b0764]/40 hover:bg-[#3b0764]/70 rounded-xl transition-all border border-[#c084fc]/30 flex items-center gap-1.5 w-full sm:w-auto justify-center shadow-md shadow-[#a435f0]/10 focus:outline-none focus:ring-2 focus:ring-[#a435f0] focus:ring-offset-2 focus:ring-offset-slate-900"
+        >
+          <Bot size={14} aria-hidden="true" /> Explain this step
+        </button>
+      )}
+
+      {/* Speed Controls */}
+      <div
+        role="group"
+        aria-label="Animation speed"
+        className="flex items-center gap-3 bg-slate-950/70 px-5 py-2 rounded-full border border-slate-800/80 shadow-inner h-10"
+      >
+        <span
+          className="text-slate-400 font-bold text-[10px] sm:text-xs uppercase tracking-widest select-none"
+          aria-hidden="true"
+        >
+          SPEED
+        </span>
+
+        {onSpeedChange ? (
+          <input
+            type="range"
+            min="0.5"
+            max="5"
+            step="0.5"
+            value={speed}
+            onChange={(e) => onSpeedChange(parseFloat(e.target.value))}
+            aria-label={`Animation speed: ${speed}x`}
+            aria-valuemin={0.5}
+            aria-valuemax={5}
+            aria-valuenow={speed}
+            aria-valuetext={`${speed} times`}
+            className="w-20 sm:w-24 accent-[#a435f0] cursor-pointer focus:outline-none focus:ring-2 focus:ring-[#a435f0] focus:ring-offset-1 focus:ring-offset-slate-900"
+            disabled={disabled}
+          />
+        ) : null}
+
+        <span
+          className="text-[#c084fc] font-black text-xs sm:text-sm min-w-[28px] text-right select-none"
+          aria-hidden="true"
+        >
+          {speed}x
+        </span>
+      </div>
+
+      {progressText && (
+        <div
+          className="hidden lg:block text-right bg-slate-950/40 px-3 py-1.5 rounded-lg border border-slate-800"
+          aria-label={`Progress: ${progressText}`}
+        >
+          <div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest" aria-hidden="true">PROGRESS</div>
+          <div className="text-sm font-bold text-slate-200" aria-hidden="true">
+            {progressText}
+          </div>
+        </div>
+      )}
+
+      {/* Playback Timeline */}
+      {totalSteps !== undefined && (
+        <div className="w-full mt-4 bg-slate-950/60 p-3 rounded-xl border border-slate-800">
+          
+          <div className="flex justify-between text-xs text-slate-400 mb-2">
+            <span>Step {currentStep}</span>
+            <span>Total {totalSteps} Steps</span>
+          </div>
+
+          <input
+            type="range"
+            min="0"
+            max={totalSteps}
+            value={currentStep}
+            onChange={(e) =>
+              onTimelineChange &&
+              onTimelineChange(Number(e.target.value))
+            }
+            className="w-full accent-[#a435f0] cursor-pointer"
+          />
+
+          <div className="flex justify-center gap-2 mt-3 text-xs">
+            <span className="bg-yellow-600/30 text-yellow-300 px-2 py-1 rounded">
+              Comparison
+            </span>
+
+            <span className="bg-green-600/30 text-green-300 px-2 py-1 rounded">
+              Swap
+            </span>
+
+            <span className="bg-blue-600/30 text-blue-300 px-2 py-1 rounded">
+              Insert
+            </span>
+          </div>
+
+        </div>
+      )}
+
+    </div>
+  );
+}
diff --git a/src/app/components/ui/ProfileProgress.jsx b/src/app/components/ui/ProfileProgress.jsx
new file mode 100644
index 000000000..2ed313724
--- /dev/null
+++ b/src/app/components/ui/ProfileProgress.jsx
@@ -0,0 +1,101 @@
+"use client";
+import { useMemo } from "react";
+import Link from "next/link";
+import { useUser } from "@/features/user/UserContext";
+
+const PROFILE_FIELDS = [
+  { key: "name", label: "Full Name", weight: 10 },
+  { key: "avatar_url", altKey: "picture", label: "Profile Picture", weight: 10 },
+  { key: "branch", label: "Branch / Major", weight: 15 },
+  { key: "cgpa", label: "CGPA", weight: 15 },
+  { key: "skills", label: "Skills", weight: 20 },
+  { key: "resume_link", label: "Resume Link", weight: 10 },
+  { key: "github_profile", label: "GitHub Profile", weight: 10 },
+  { key: "linkedin_profile", label: "LinkedIn Profile", weight: 10 },
+];
+
+export default function ProfileProgress({ compact = false }) {
+  const { user } = useUser();
+
+  const { percentage, missingFields } = useMemo(() => {
+    if (!user) return { percentage: 0, missingFields: [] };
+
+    const meta = user.user_metadata || {};
+    let total = 0;
+    const missing = [];
+
+    PROFILE_FIELDS.forEach((field) => {
+      const hasValue = (meta[field.key] && meta[field.key].toString().trim() !== "") || 
+                       (field.altKey && meta[field.altKey] && meta[field.altKey].toString().trim() !== "");
+      if (hasValue) {
+        total += field.weight;
+      } else {
+        missing.push(field.label);
+      }
+    });
+
+    return { percentage: Math.min(total, 100), missingFields: missing };
+  }, [user]);
+
+  if (!user) return null;
+
+  if (compact) {
+    return (
+      <div className="w-full flex flex-col gap-2 px-4 py-3.5 bg-primary/5 dark:bg-primary/10 border-b border-surface-100 dark:border-udemy-dark-border/60">
+        <div className="flex items-center justify-between">
+          <span className="text-xs font-semibold text-surface-600 dark:text-surface-300 uppercase tracking-wider">Profile Completion</span>
+          <span className="text-xs font-bold text-primary dark:text-primary-light bg-primary/10 dark:bg-primary/20 px-1.5 py-0.5 rounded">{percentage}%</span>
+        </div>
+        <div className="w-full h-1.5 bg-surface-200 dark:bg-surface-700/80 rounded-full overflow-hidden">
+          <div 
+            className="h-full bg-primary transition-all duration-500 ease-out"
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+        {missingFields.length > 0 && percentage < 100 && (
+          <p className="text-[11px] text-surface-500 dark:text-surface-400 mt-0.5 leading-snug">
+            Add <span className="font-medium text-primary dark:text-primary-light">{missingFields[0]}</span> to boost your profile.
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-5 rounded-xl border border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-900 shadow-sm">
+      <div className="flex items-center justify-between mb-2">
+        <h3 className="font-semibold text-surface-900 dark:text-white">Profile Completeness</h3>
+        <span className="text-xl font-bold text-primary dark:text-primary-light">{percentage}%</span>
+      </div>
+      
+      <div className="w-full h-2 bg-surface-100 dark:bg-surface-800 rounded-full overflow-hidden mb-4">
+        <div 
+          className="h-full bg-primary transition-all duration-1000 ease-out"
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+
+      {percentage < 100 ? (
+        <div className="space-y-3">
+          <p className="text-sm text-surface-600 dark:text-surface-400">
+            Complete your profile to improve your job matching and application success rate. Missing details:
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {missingFields.map(field => (
+              <span key={field} className="px-2.5 py-1 bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300 text-xs font-medium rounded-md">
+                + {field}
+              </span>
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div className="p-3 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 text-sm font-medium rounded-lg flex items-center gap-2">
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+          Your profile is fully complete!
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/components/ui/PushPop.jsx b/src/app/components/ui/PushPop.jsx
new file mode 100644
index 000000000..9e836d6f7
--- /dev/null
+++ b/src/app/components/ui/PushPop.jsx
@@ -0,0 +1,170 @@
+'use client';
+import { useState } from 'react';
+import usePlayback from '@/app/hooks/usePlayback';
+import LinearMemoryControls from '@/app/components/ui/LinearMemoryControls';
+import { pushGenerator, popGenerator, peekGenerator } from '@/features/algorithms/stack/stackLogic';
+
+const PushPop = ({
+  stack,
+  setStack,
+  isAnimating,
+  setIsAnimating,
+  message,
+  setMessage,
+  operation,
+  setOperation,
+  extraActions,
+  capacity,
+  setCapacity,
+  stackLimit,
+  speed: parentSpeed,
+  setSpeed: parentSetSpeed
+}) => {
+  const [inputValue, setInputValue] = useState('');
+  const [capacityInput, setCapacityInput] = useState('');
+  const localPlayback = usePlayback(1);
+  const speed = parentSpeed !== undefined ? parentSpeed : localPlayback.speed;
+  const setSpeed = parentSetSpeed !== undefined ? parentSetSpeed : localPlayback.setSpeed;
+
+  const limit = capacity !== undefined && capacity !== null ? capacity : stackLimit;
+
+  // Handle setting capacity
+  const handleSetCapacity = () => {
+    const size = parseInt(capacityInput, 10);
+    if (isNaN(size) || size < 1 || size > 10) {
+      setMessage('Please enter a valid capacity between 1 and 10.');
+      return;
+    }
+    setCapacity(size);
+    setCapacityInput('');
+    setMessage(`Stack capacity set to ${size}. Ready for operations!`);
+  };
+
+  // Push operation
+  const push = () => {
+    const generator = pushGenerator(stack, inputValue, limit);
+    let step = generator.next();
+
+    if (step.value?.type === 'error') {
+      setMessage(step.value.message);
+      return;
+    }
+
+    if (step.value?.type === 'start') {
+      setIsAnimating(true);
+      setOperation(step.value.operation);
+
+      setTimeout(() => {
+        step = generator.next();
+        if (step.value?.type === 'complete') {
+          setStack(step.value.stack);
+          setOperation(null);
+          setMessage(step.value.message);
+          setInputValue('');
+          setIsAnimating(false);
+        }
+      }, 1000 / speed);
+    }
+  };
+
+  // Pop operation
+  const pop = () => {
+    const generator = popGenerator(stack);
+    let step = generator.next();
+
+    if (step.value?.type === 'error') {
+      setMessage(step.value.message);
+      return;
+    }
+
+    if (step.value?.type === 'start') {
+      setIsAnimating(true);
+      setOperation(step.value.operation);
+      
+      setTimeout(() => {
+        step = generator.next();
+        if (step.value?.type === 'complete') {
+          setStack(step.value.stack);
+          setOperation(null);
+          setMessage(step.value.message);
+          setIsAnimating(false);
+        }
+      }, 1000 / speed);
+    }
+  };
+
+  // Peek operation
+  const peek = () => {
+    const generator = peekGenerator(stack);
+    let step = generator.next();
+
+    if (step.value?.type === 'error') {
+      setMessage(step.value.message);
+      return;
+    }
+
+    if (step.value?.type === 'start') {
+      setIsAnimating(true);
+      setOperation(step.value.operation);
+      
+      setTimeout(() => {
+        step = generator.next();
+        if (step.value?.type === 'complete') {
+          setOperation(null);
+          setMessage(step.value.message);
+          setIsAnimating(false);
+        }
+      }, 1000 / speed);
+    }
+  };
+
+  // Handle capacity-not-set state
+  if (capacity === null) {
+    return (
+      <LinearMemoryControls
+        inputValue={capacityInput}
+        setInputValue={setCapacityInput}
+        placeholder="Enter capacity (1-10)..."
+        isAnimating={isAnimating}
+        operation={operation}
+        message={message}
+        speed={speed}
+        onSpeedChange={setSpeed}
+        actions={[
+          { label: "Set Capacity", onClick: handleSetCapacity, variant: "primary", needsInput: true }
+        ]}
+      />
+    );
+  }
+
+  const actions = [
+    { label: "Push", onClick: push, variant: "primary", needsInput: true, disabled: limit && stack.length >= limit },
+    { label: "Pop", onClick: pop, disabled: stack.length === 0, variant: "secondary" },
+    { label: "Peek", onClick: peek, disabled: stack.length === 0, variant: "secondary" },
+    { label: "Reset", onClick: () => { setStack([]); setMessage('Stack cleared'); }, variant: "outline" },
+  ];
+
+  // If stack is empty, allow user to change size (locking capacity once an element is pushed)
+  if (stack.length === 0 && setCapacity) {
+    actions.push({ label: "Change Size", onClick: () => { setCapacity(null); setMessage('Please enter a new stack capacity.'); }, variant: "secondary" });
+  }
+
+  if (extraActions) {
+    actions.push(...extraActions);
+  }
+
+  return (
+    <LinearMemoryControls
+      inputValue={inputValue}
+      setInputValue={setInputValue}
+      isAnimating={isAnimating}
+      operation={operation}
+      message={message}
+      speed={speed}
+      onSpeedChange={setSpeed}
+      actions={actions}
+    />
+  );
+};
+
+export default PushPop;
\ No newline at end of file
diff --git a/src/app/components/ui/QuizEngine.jsx b/src/app/components/ui/QuizEngine.jsx
new file mode 100644
index 000000000..3190e631e
--- /dev/null
+++ b/src/app/components/ui/QuizEngine.jsx
@@ -0,0 +1,354 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  Check,
+  X,
+  ArrowLeft,
+  ArrowRight,
+  RotateCcw,
+  Trophy,
+  Star,
+  Award,
+  HelpCircle,
+  Info,
+  CheckCircle2,
+  AlertTriangle
+} from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+
+export default function QuizEngine({ title, questions }) {
+  const [currentQuestion, setCurrentQuestion] = useState(0);
+  const [selectedAnswer, setSelectedAnswer] = useState(null);
+  const [showResult, setShowResult] = useState(false);
+  const [quizCompleted, setQuizCompleted] = useState(false);
+  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
+  const [showIntro, setShowIntro] = useState(true);
+  const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
+
+  // Compute score dynamically based on finalized answers to prevent double-counting or spoilers
+  const score = answers.reduce((acc, ans, idx) => {
+    if (idx < currentQuestion || quizCompleted) {
+      return ans === questions[idx].correctAnswer ? acc + 1 : acc;
+    }
+    return acc;
+  }, 0);
+
+  const handleAnswerSelect = (optionIndex) => {
+    setSelectedAnswer(optionIndex);
+    const newAnswers = [...answers];
+    newAnswers[currentQuestion] = optionIndex;
+    setAnswers(newAnswers);
+  };
+
+  const handleNextQuestion = () => {
+    if (selectedAnswer === null) return;
+
+    if (currentQuestion < questions.length - 1) {
+      setCurrentQuestion(currentQuestion + 1);
+      setSelectedAnswer(answers[currentQuestion + 1]);
+    } else {
+      setShowSuccessAnimation(true);
+      setTimeout(() => {
+        setShowSuccessAnimation(false);
+        setQuizCompleted(true);
+        setShowResult(true);
+      }, 2000);
+    }
+  };
+
+  const handlePreviousQuestion = () => {
+    setCurrentQuestion(currentQuestion - 1);
+    setSelectedAnswer(answers[currentQuestion - 1]);
+  };
+
+  const resetQuiz = () => {
+    setCurrentQuestion(0);
+    setSelectedAnswer(null);
+    setShowResult(false);
+    setQuizCompleted(false);
+    setAnswers(Array(questions.length).fill(null));
+    setShowIntro(true);
+  };
+
+  const startQuiz = () => {
+    setShowIntro(false);
+  };
+
+  const getStarRating = () => {
+    const percentage = (score / questions.length) * 100;
+    if (percentage >= 90) return 5;
+    if (percentage >= 70) return 4;
+    if (percentage >= 50) return 3;
+    if (percentage >= 30) return 2;
+    return 1;
+  };
+
+  return (
+    <section className="max-w-3xl mx-auto rounded-2xl border border-[#e5e7eb] dark:border-[#333] bg-white dark:bg-[#1a1a1a] shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden mt-8 mb-8">
+      {/* macOS Terminal style top bar */}
+      <div className="flex items-center justify-between px-4 py-3 bg-surface-50 dark:bg-[#202020] border-b border-[#e5e7eb] dark:border-[#333]">
+        <div className="flex items-center gap-2">
+          <span className="w-3 h-3 rounded-full bg-[#ff5f57]" />
+          <span className="w-3 h-3 rounded-full bg-[#febc2e]" />
+          <span className="w-3 h-3 rounded-full bg-[#28c840]" />
+          <span className="ml-2 text-[12px] font-mono text-surface-500 dark:text-surface-400">
+            algobuddy_quiz_session
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-purple-50 dark:bg-purple-950/40 text-[var(--color-primary)] dark:text-[var(--color-primary-light)] text-[11px] font-bold uppercase tracking-wider">
+          Active Mode
+        </div>
+      </div>
+
+      <div className="p-8">
+        {showIntro ? (
+          <motion.div
+            initial={{ opacity: 0, y: 15 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="text-center"
+          >
+            <div className="flex justify-center mb-6">
+              <div className="bg-purple-50 dark:bg-purple-950/40 p-4 rounded-2xl border border-purple-100 dark:border-purple-900/20">
+                <Award size={40} className="text-[var(--color-primary)] dark:text-[var(--color-primary-light)]" />
+              </div>
+            </div>
+
+            <h2 className="text-[24px] font-extrabold mb-3 text-surface-900 dark:text-white leading-tight">
+              {title}
+            </h2>
+            <p className="text-surface-500 dark:text-surface-400 mb-8 max-w-md mx-auto text-[14px]">
+              Ready to test your algorithms chops? Prove your expertise and earn stars based on your score.
+            </p>
+
+            <div className="bg-surface-50 dark:bg-[#202020] p-6 rounded-xl mb-8 text-left border border-[#e5e7eb] dark:border-[#333]">
+              <h3 className="font-extrabold text-[15px] mb-3 flex items-center gap-2 text-[var(--color-primary)] dark:text-[var(--color-primary-light)]">
+                <Info size={16} /> Rules of the Challenge:
+              </h3>
+              <ul className="space-y-2.5 text-[13px] text-surface-600 dark:text-surface-300 font-medium">
+                <li className="flex items-center gap-2.5">
+                  <CheckCircle2 size={16} className="text-emerald-500 flex-shrink-0" />
+                  <span>Receive 1 point for every correct answer.</span>
+                </li>
+                <li className="flex items-center gap-2.5">
+                  <X size={16} className="text-red-500 flex-shrink-0" />
+                  <span>No negative marking for incorrect choices.</span>
+                </li>
+                <li className="flex items-center gap-2.5">
+                  <Trophy size={16} className="text-yellow-500 flex-shrink-0" />
+                  <span>Earn up to 5 stars depending on your accuracy.</span>
+                </li>
+              </ul>
+            </div>
+
+            <button
+              onClick={startQuiz}
+              className="h-11 px-8 bg-[var(--color-primary)] hover:bg-[var(--color-primary-dark)] text-white rounded-xl font-bold text-[14px] shadow-md hover:shadow-lg transition-all flex items-center justify-center gap-2 mx-auto"
+            >
+              <span>Initialize Challenge</span>
+              <ArrowRight size={16} />
+            </button>
+          </motion.div>
+        ) : showSuccessAnimation ? (
+          <div className="flex flex-col items-center justify-center py-16">
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{ type: "spring", stiffness: 500, damping: 15 }}
+              className="mb-6"
+            >
+              <div className="relative">
+                <div className="w-20 h-20 bg-emerald-50 dark:bg-emerald-950/40 rounded-full flex items-center justify-center border border-emerald-100 dark:border-emerald-900/30">
+                  <CheckCircle2 size={40} className="text-emerald-500" />
+                </div>
+                <motion.div
+                  initial={{ scale: 0.8, opacity: 0 }}
+                  animate={{ scale: 1.6, opacity: 0 }}
+                  transition={{ duration: 1.5, repeat: Infinity }}
+                  className="absolute inset-0 border-2 border-emerald-400 rounded-full"
+                />
+              </div>
+            </motion.div>
+            <motion.p
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              className="text-lg font-black text-surface-800 dark:text-surface-200"
+            >
+              Evaluating Responses...
+            </motion.p>
+          </div>
+        ) : !showResult ? (
+          <div className="quiz-container">
+            {/* Header progress info */}
+            <div className="mb-6">
+              <div className="flex justify-between items-center mb-2.5">
+                <span className="text-[13px] font-bold text-[var(--color-primary)] dark:text-[var(--color-primary-light)]">
+                  Question {currentQuestion + 1} of {questions.length}
+                </span>
+                <span className="text-[12px] font-bold bg-purple-50 dark:bg-purple-950/40 px-2.5 py-0.5 rounded-full border border-purple-100 dark:border-purple-900/20 text-[var(--color-primary)] dark:text-[var(--color-primary-light)]">
+                  Score: {score}
+                </span>
+              </div>
+              <div className="w-full bg-[#e5e7eb] dark:bg-[#333] rounded-full h-2">
+                <div
+                  className="bg-[var(--color-primary)] h-2 rounded-full transition-all duration-300"
+                  style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
+                />
+              </div>
+            </div>
+
+            <motion.div
+              key={currentQuestion}
+              initial={{ opacity: 0, x: 15 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.3 }}
+            >
+              <h3 className="text-[18px] md:text-[20px] font-extrabold mb-6 text-surface-900 dark:text-white leading-snug">
+                {questions[currentQuestion].question}
+              </h3>
+
+              <div className="space-y-3 mb-8">
+                {questions[currentQuestion].options.map((option, index) => {
+                  const isSelected = selectedAnswer === index;
+                  return (
+                    <motion.div
+                      key={index}
+                      whileHover={{ scale: 1.01 }}
+                      whileTap={{ scale: 0.99 }}
+                      className={`p-4 border rounded-xl cursor-pointer transition-all duration-200 ${isSelected
+                          ? "border-[var(--color-primary)] bg-purple-50/40 dark:bg-purple-950/20 shadow-sm"
+                          : "border-[#e5e7eb] dark:border-[#333] hover:bg-surface-50 dark:hover:bg-[#202020]"
+                        }`}
+                      onClick={() => handleAnswerSelect(index)}
+                    >
+                      <div className="flex items-center">
+                        <span className={`text-[12px] font-bold mr-3.5 w-6 h-6 flex items-center justify-center rounded-full transition-colors ${isSelected
+                            ? "bg-[var(--color-primary)] text-white"
+                            : "bg-[#e5e7eb] dark:bg-[#333] text-surface-700 dark:text-surface-300"
+                          }`}>
+                          {String.fromCharCode(65 + index)}
+                        </span>
+                        <span className={`text-[14px] font-semibold ${isSelected ? "text-[var(--color-primary)] dark:text-[var(--color-primary-light)]" : "text-surface-700 dark:text-surface-300"}`}>
+                          {option}
+                        </span>
+                      </div>
+                    </motion.div>
+                  );
+                })}
+              </div>
+            </motion.div>
+
+            {/* Control buttons */}
+            <div className="flex justify-between items-center border-t border-[#e5e7eb] dark:border-[#333] pt-5">
+              <button
+                onClick={handlePreviousQuestion}
+                disabled={currentQuestion === 0}
+                className="h-10 px-5 border border-[#e5e7eb] dark:border-[#333] rounded-xl text-surface-700 dark:text-surface-300 text-[13px] font-bold disabled:opacity-40 flex items-center gap-1.5 hover:bg-surface-50 dark:hover:bg-[#202020] transition-colors"
+              >
+                <ArrowLeft size={16} />
+                <span>Previous</span>
+              </button>
+
+              <button
+                onClick={handleNextQuestion}
+                disabled={selectedAnswer === null}
+                className="h-10 px-6 bg-[var(--color-primary)] hover:bg-[var(--color-primary-dark)] text-white rounded-xl text-[13px] font-bold disabled:opacity-40 flex items-center gap-1.5 shadow-sm hover:shadow-md transition-all"
+              >
+                <span>{currentQuestion === questions.length - 1 ? "Complete" : "Next"}</span>
+                <ArrowRight size={16} />
+              </button>
+            </div>
+          </div>
+        ) : (
+          <motion.div
+            initial={{ opacity: 0, y: 15 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="result-container"
+          >
+            <div className="text-center mb-8 bg-surface-50 dark:bg-[#202020] p-6 rounded-2xl border border-[#e5e7eb] dark:border-[#333]">
+              <div className="relative inline-block mb-4">
+                <div className="w-24 h-24 bg-purple-50 dark:bg-purple-950/40 rounded-full flex items-center justify-center shadow-md border border-purple-200 dark:border-purple-900/30">
+                  <div className="text-2xl font-black text-[var(--color-primary)] dark:text-[var(--color-primary-light)]">
+                    {score}/{questions.length}
+                  </div>
+                </div>
+                <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
+                  {[...Array(5)].map((_, i) => (
+                    <Star
+                      key={i}
+                      size={18}
+                      className={`mx-0.5 ${i < getStarRating()
+                          ? "text-yellow-400 fill-yellow-400"
+                          : "text-surface-300 dark:text-surface-700"
+                        }`}
+                    />
+                  ))}
+                </div>
+              </div>
+
+              <h3 className="text-[20px] font-black mb-1.5 text-surface-950 dark:text-white leading-tight">
+                {score === questions.length ? "🌟 Perfect Score!" :
+                  score >= questions.length * 0.8 ? "🔥 Excellent Work!" :
+                    score >= questions.length * 0.6 ? "✨ Good Job!" :
+                      score >= questions.length * 0.4 ? "📚 Keep Practicing!" : "💡 Let's Review Again!"}
+              </h3>
+              <p className="text-[13px] text-surface-500 dark:text-surface-400 font-semibold uppercase tracking-wider">
+                Accuracy: {((score / questions.length) * 100).toFixed(0)}%
+              </p>
+            </div>
+
+            {/* Breakdown */}
+            <div className="space-y-4 mb-8">
+              <h4 className="font-extrabold text-[15px] text-surface-800 dark:text-surface-200 border-b border-[#e5e7eb] dark:border-[#333] pb-2">
+                Challenge Log & Explanations
+              </h4>
+              {questions.map((q, index) => {
+                const isCorrect = answers[index] === q.correctAnswer;
+                return (
+                  <div key={index} className="border-b last:border-0 pb-4 border-[#e5e7eb] dark:border-[#333] last:pb-0">
+                    <p className="font-extrabold text-[14px] text-surface-900 dark:text-white mb-2 leading-relaxed">
+                      {index + 1}. {q.question}
+                    </p>
+                    <div className={`flex items-start gap-2.5 p-3 rounded-xl border text-[13px] ${isCorrect
+                        ? "bg-emerald-50/30 dark:bg-emerald-950/10 border-emerald-100 dark:border-emerald-900/20 text-emerald-800 dark:text-emerald-400"
+                        : "bg-red-50/30 dark:bg-red-950/10 border-red-100 dark:border-red-900/20 text-red-800 dark:text-red-400"
+                      }`}>
+                      {isCorrect ? (
+                        <CheckCircle2 size={16} className="mt-0.5 flex-shrink-0 text-emerald-500" />
+                      ) : (
+                        <AlertTriangle size={16} className="mt-0.5 flex-shrink-0 text-red-500" />
+                      )}
+                      <div className="flex-1">
+                        <p className="font-bold">
+                          Your Answer: {answers[index] !== null ? q.options[answers[index]] : "Skipped"}
+                        </p>
+                        {!isCorrect && (
+                          <p className="font-bold mt-1 text-surface-700 dark:text-surface-300">
+                            Correct: {q.options[q.correctAnswer]}
+                          </p>
+                        )}
+                        {q.explanation && (
+                          <div className="mt-2 text-[12px] font-mono leading-relaxed bg-[#f7f9fa] dark:bg-[#111] border border-[#e5e7eb] dark:border-[#222] p-2.5 rounded-lg text-surface-600 dark:text-surface-400">
+                            <span className="text-[var(--color-primary)] dark:text-[var(--color-primary-light)] font-bold"># Explanation:</span> {q.explanation}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            <button
+              onClick={resetQuiz}
+              className="w-full h-11 bg-[var(--color-primary)] hover:bg-[var(--color-primary-dark)] text-white rounded-xl font-bold text-[14px] flex items-center justify-center gap-2 shadow-md hover:shadow-lg transition-all"
+            >
+              <RotateCcw size={16} />
+              <span>Retry Session</span>
+            </button>
+          </motion.div>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/components/ui/QuizErrorBoundary.jsx b/src/app/components/ui/QuizErrorBoundary.jsx
new file mode 100644
index 000000000..95d070fa7
--- /dev/null
+++ b/src/app/components/ui/QuizErrorBoundary.jsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { Component } from "react";
+
+/**
+ * QuizErrorBoundary — wraps the AlgorithmQuiz component to catch unexpected
+ * runtime errors and display a recoverable fallback UI instead of a blank crash.
+ */
+export default class QuizErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, errorMessage: "" };
+  }
+
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+      errorMessage: error?.message ?? "An unexpected error occurred.",
+    };
+  }
+
+  componentDidCatch(error, info) {
+    // Log for observability
+    console.error("[QuizErrorBoundary] Caught error:", error, info);
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, errorMessage: "" });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen flex items-center justify-center px-4 py-10">
+          <div className="max-w-md text-center p-8 bg-white dark:bg-neutral-900 rounded-2xl shadow-lg border border-red-100 dark:border-red-950/30">
+            <p className="text-4xl mb-4">⚠️</p>
+            <h2 className="text-xl font-bold mb-2 text-slate-800 dark:text-white">
+              Something went wrong in the Quiz
+            </h2>
+            <p className="text-sm text-slate-500 dark:text-neutral-400 mb-6">
+              An unexpected error occurred. You can try reloading the quiz or
+              return to the visualizer.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-3 justify-center">
+              <button
+                onClick={this.handleReset}
+                className="px-5 py-2.5 bg-purple-600 text-white rounded-xl text-sm font-bold hover:bg-purple-700 transition"
+              >
+                Retry Quiz
+              </button>
+              <a
+                href="/visualizer"
+                className="px-5 py-2.5 border border-slate-200 dark:border-neutral-700 rounded-xl text-sm font-bold text-slate-600 dark:text-neutral-300 hover:bg-slate-50 dark:hover:bg-neutral-800 transition"
+              >
+                Back to Visualizer
+              </a>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/src/app/components/ui/RecentlyViewed.jsx b/src/app/components/ui/RecentlyViewed.jsx
new file mode 100644
index 000000000..9983a13ee
--- /dev/null
+++ b/src/app/components/ui/RecentlyViewed.jsx
@@ -0,0 +1,39 @@
+"use client";
+import { useRecentlyViewed } from "@/app/hooks/useRecentlyViewed";
+import Link from "next/link";
+
+export default function RecentlyViewed() {
+  const { recentlyViewed, clearRecentlyViewed } = useRecentlyViewed();
+  if (recentlyViewed.length === 0) return null;
+
+  return (
+    <div className="mb-8">
+      <div className="flex justify-between items-center mb-3">
+        <h2 className="text-xl font-semibold">🕓 Recently Viewed</h2>
+        <button
+          onClick={() => {
+            if (confirm("Clear all recently viewed items?")) {
+              clearRecentlyViewed();
+            }
+          }}
+          className="text-sm text-gray-500 hover:text-red-500"
+        >
+          Clear
+        </button>
+      </div>
+      <div className="flex flex-wrap gap-3">
+        {recentlyViewed.map((item) => (
+          <Link
+            key={item.path}
+            href={item.path}
+            className="px-4 py-2 rounded-lg border border-purple-300 
+            text-purple-700 hover:bg-purple-50 text-sm font-medium"
+          >
+            {item.name}
+            <span className="ml-2 text-xs text-gray-400">{item.category}</span>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/ui/SearchBar.jsx b/src/app/components/ui/SearchBar.jsx
new file mode 100644
index 000000000..239911d63
--- /dev/null
+++ b/src/app/components/ui/SearchBar.jsx
@@ -0,0 +1,150 @@
+'use client';
+
+import { useState } from 'react';
+import { X, Search } from 'lucide-react';
+
+const SUGGESTIONS = [
+  "Binary Search",
+  "Merge Sort",
+  "Tim Sort",
+  "Linked List",
+  "Graph BFS",
+  "Dynamic Programming",
+];
+
+const SearchBar = ({ sections = [], onSearchResults }) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  const filterSections = (queryText) => {
+    const query = (queryText || '').toLowerCase().trim();
+    if (!query) {
+      if (typeof onSearchResults === 'function') {
+        onSearchResults(sections);
+      }
+      return;
+    }
+
+    const filtered = sections
+      .map((section) => {
+        const sectionTitleMatch = section.title?.toLowerCase().includes(query);
+
+        const subsectionMatches = section.subsections
+          ?.map((subsection) => {
+            const subsectionTitleMatch = subsection.title?.toLowerCase().includes(query);
+            const itemMatches = subsection.items?.filter((item) =>
+              item.name?.toLowerCase().includes(query)
+            );
+            return {
+              ...subsection,
+              items: subsectionTitleMatch ? subsection.items : itemMatches,
+              isHighlighted: subsectionTitleMatch || (itemMatches && itemMatches.length > 0),
+            };
+          })
+          .filter((subsection) => subsection.items && subsection.items.length > 0);
+
+        const itemMatches = section.items?.filter((item) =>
+          item.name?.toLowerCase().includes(query)
+        );
+
+        return {
+          ...section,
+          subsections: section.subsections ? subsectionMatches : undefined,
+          items: section.subsections
+            ? undefined
+            : itemMatches && itemMatches.length > 0
+            ? itemMatches
+            : undefined,
+          isHighlighted:
+            sectionTitleMatch ||
+            (subsectionMatches && subsectionMatches.length > 0) ||
+            (itemMatches && itemMatches.length > 0),
+        };
+      })
+      .filter(
+        (section) =>
+          section.isHighlighted ||
+          (section.subsections && section.subsections.length > 0) ||
+          (section.items && section.items.length > 0)
+      );
+
+    if (typeof onSearchResults === 'function') {
+      onSearchResults(filtered);
+    }
+  };
+
+  const handleInputChange = (e) => {
+    const val = e.target.value;
+    setSearchQuery(val);
+    setShowDropdown(true);
+    filterSections(val);
+  };
+
+  const handleSelectSuggestion = (suggestionText) => {
+    setSearchQuery(suggestionText);
+    setShowDropdown(false);
+    filterSections(suggestionText);
+  };
+
+  const handleClear = () => {
+    setSearchQuery('');
+    setShowDropdown(false);
+    filterSections('');
+  };
+
+  const filteredSuggestions = SUGGESTIONS.filter((item) =>
+    item.toLowerCase().includes(searchQuery.toLowerCase().trim())
+  );
+
+  return (
+    <div className="mt-4 max-w-2xl mx-auto relative">
+      <div className="relative flex items-center">
+        <input
+          type="text"
+          placeholder="Search algorithms, data structures..."
+          aria-label="Search algorithms and data structures"
+          role="combobox"
+          aria-expanded={showDropdown && filteredSuggestions.length > 0}
+          className="w-full pl-6 pr-12 py-3.5 rounded-full border border-surface-200 dark:border-surface-700 focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary bg-white dark:bg-surface-900 text-surface-900 dark:text-surface-50 placeholder-surface-400 dark:placeholder-surface-500 text-[15px] transition-all shadow-sm"
+          value={searchQuery}
+          onChange={handleInputChange}
+          onFocus={() => setShowDropdown(true)}
+        />
+        {searchQuery ? (
+          <button
+            type="button"
+            onClick={handleClear}
+            aria-label="Clear search query"
+            className="absolute right-4 p-1 rounded-full text-surface-400 hover:text-surface-600 dark:text-surface-500 dark:hover:text-surface-300 transition-colors"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        ) : (
+          <Search className="h-5 w-5 absolute right-5 text-surface-400 dark:text-surface-500 pointer-events-none" />
+        )}
+      </div>
+
+      {showDropdown && searchQuery && filteredSuggestions.length > 0 && (
+        <div
+          role="listbox"
+          className="absolute w-full mt-2 bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-700 rounded-2xl shadow-xl z-50 overflow-hidden"
+        >
+          {filteredSuggestions.map((item) => (
+            <button
+              key={item}
+              type="button"
+              role="option"
+              aria-selected={searchQuery === item}
+              onClick={() => handleSelectSuggestion(item)}
+              className="w-full text-left px-5 py-2.5 text-sm font-medium text-surface-700 dark:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-800 hover:text-primary dark:hover:text-primary transition-colors cursor-pointer"
+            >
+              {item}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SearchBar;
diff --git a/src/app/components/ui/SharedCodeBlock.jsx b/src/app/components/ui/SharedCodeBlock.jsx
new file mode 100644
index 000000000..16c4554ff
--- /dev/null
+++ b/src/app/components/ui/SharedCodeBlock.jsx
@@ -0,0 +1,16 @@
+"use client";
+import CodeBlock from "./CodeBlock";
+
+const SharedCodeBlock = ({ title, codeExamples, color = "text-purple-500" }) => {
+  return (
+    <div className="mt-8 mb-8">
+      <CodeBlock
+        title={title}
+        codeExamples={codeExamples}
+        variant="macos"
+      />
+    </div>
+  );
+};
+
+export default SharedCodeBlock;
diff --git a/src/app/components/ui/SpectatorSimulatorModal.jsx b/src/app/components/ui/SpectatorSimulatorModal.jsx
new file mode 100644
index 000000000..1c246ab00
--- /dev/null
+++ b/src/app/components/ui/SpectatorSimulatorModal.jsx
@@ -0,0 +1,578 @@
+"use client";
+import { useState, useEffect, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { X, Terminal, Eye, MessageSquare, Send, AlertCircle } from "lucide-react";
+import { io } from "socket.io-client";
+import confetti from "canvas-confetti";
+import { useArenaProfile } from "@/app/hooks/useArenaProfile";
+
+const EMOTES = ["🔥", "👏", "🤯", "😂", "❤️"];
+
+export default function SpectatorSimulatorModal({ isOpen, onClose, matchData }) {
+  const [seconds, setSeconds] = useState(0);
+  const { profile } = useArenaProfile();
+
+  const p1 = matchData?.players?.[0] || { name: "Player 1" };
+  const p2 = matchData?.players?.[1] || { name: "Player 2" };
+
+  const [p1Status, setP1Status] = useState("Idle");
+  const [p2Status, setP2Status] = useState("Idle");
+  const [p1Lines, setP1Lines] = useState(0);
+  const [p2Lines, setP2Lines] = useState(0);
+  
+  const [p1Language, setP1Language] = useState("javascript");
+  const [p2Language, setP2Language] = useState("javascript");
+  const [p1Cpm, setP1Cpm] = useState(0);
+  const [p2Cpm, setP2Cpm] = useState(0);
+  const [p1Failed, setP1Failed] = useState(0);
+  const [p2Failed, setP2Failed] = useState(0);
+  const [p1Progress, setP1Progress] = useState(0);
+  const [p2Progress, setP2Progress] = useState(0);
+  const [p1TotalTests, setP1TotalTests] = useState(0);
+  const [p2TotalTests, setP2TotalTests] = useState(0);
+
+  const [matchEnded, setMatchEnded] = useState(false);
+  const [winnerId, setWinnerId] = useState(null);
+
+  // Calculate Tug-of-War Momentum
+  const p1Score = (p1Progress || 0) + (p1Lines * 0.5);
+  const p2Score = (p2Progress || 0) + (p2Lines * 0.5);
+  const totalScore = p1Score + p2Score;
+  const tugOfWarRatio = totalScore > 0 ? (p1Score / totalScore) * 100 : 50;
+
+  const [chatMessages, setChatMessages] = useState([]);
+  const [chatInput, setChatInput] = useState("");
+  const [activeEmotes, setActiveEmotes] = useState([]);
+  const [isChatOpen, setIsChatOpen] = useState(false);
+  const [spectatorCount, setSpectatorCount] = useState(0);
+
+  const socketRef = useRef(null);
+  const chatEndRef = useRef(null);
+  const p1TypingTimeoutRef = useRef(null);
+  const p2TypingTimeoutRef = useRef(null);
+
+  // Auto scroll chat
+  useEffect(() => {
+    if (chatEndRef.current) chatEndRef.current.scrollIntoView({ behavior: "smooth" });
+  }, [chatMessages]);
+
+  // Socket Connection for real-time status
+  useEffect(() => {
+    if (!isOpen || !matchData?.matchId) return;
+
+    const socketUrl = process.env.NEXT_PUBLIC_SOCKET_SERVER_URL || 
+      (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.startsWith("192.168.")
+        ? `http://${window.location.hostname}:4000`
+        : "https://algobuddy-socket-server.onrender.com");
+
+    const socket = io(socketUrl, {
+      query: {
+        userId: profile?.id || "spectator_" + (typeof globalThis !== 'undefined' && globalThis.crypto?.randomUUID ? globalThis.crypto.randomUUID().split('-')[0] : Math.random().toString(36).substring(2, 10)),
+        username: profile?.username || "Spectator_" + Math.floor(Math.random() * 1000)
+      }
+    });
+    socketRef.current = socket;
+
+    socket.on("connect", () => {
+      console.log("Spectator Socket Connected");
+      socket.emit("join_spectator", { matchId: matchData.matchId });
+    });
+
+    socket.on("spectator_count", (data) => {
+      setSpectatorCount(data.count);
+    });
+
+    socket.on("opponent_typing_status", (data) => {
+      if (data.userId === p1.userId) {
+        setP1Status(data.isTyping ? "Typing..." : "Idle");
+        if (data.linesCoded !== undefined) setP1Lines(data.linesCoded);
+        if (data.cpm !== undefined) setP1Cpm(data.cpm);
+        if (data.language) setP1Language(data.language);
+
+        if (p1TypingTimeoutRef.current) clearTimeout(p1TypingTimeoutRef.current);
+        if (data.isTyping) {
+          p1TypingTimeoutRef.current = setTimeout(() => {
+            setP1Status(prev => prev === "Typing..." ? "Idle" : prev);
+            setP1Cpm(0);
+          }, 3000);
+        }
+      } else if (data.userId === p2.userId) {
+        setP2Status(data.isTyping ? "Typing..." : "Idle");
+        if (data.linesCoded !== undefined) setP2Lines(data.linesCoded);
+        if (data.cpm !== undefined) setP2Cpm(data.cpm);
+        if (data.language) setP2Language(data.language);
+
+        if (p2TypingTimeoutRef.current) clearTimeout(p2TypingTimeoutRef.current);
+        if (data.isTyping) {
+          p2TypingTimeoutRef.current = setTimeout(() => {
+            setP2Status(prev => prev === "Typing..." ? "Idle" : prev);
+            setP2Cpm(0);
+          }, 3000);
+        }
+      }
+    });
+
+    socket.on("opponent_test_submit", (data) => {
+      if (data.userId === p1.userId) {
+        setP1Status("Testing Code...");
+        if (data.failedAttempts !== undefined) setP1Failed(data.failedAttempts);
+      }
+      if (data.userId === p2.userId) {
+        setP2Status("Testing Code...");
+        if (data.failedAttempts !== undefined) setP2Failed(data.failedAttempts);
+      }
+    });
+
+    socket.on("opponent_test_result", (data) => {
+      const pct = data.total > 0 ? (data.passed / data.total) * 100 : 0;
+      if (data.userId === p1.userId) {
+        setP1Status("Idle");
+        setP1Progress(pct);
+        setP1TotalTests(data.total);
+        if (data.failedAttempts !== undefined) setP1Failed(data.failedAttempts);
+      } else if (data.userId === p2.userId) {
+        setP2Status("Idle");
+        setP2Progress(pct);
+        setP2TotalTests(data.total);
+        if (data.failedAttempts !== undefined) setP2Failed(data.failedAttempts);
+      }
+    });
+
+    socket.on("match_ended", (data) => {
+      setMatchEnded(true);
+      setWinnerId(data.winnerId);
+      if (data.winnerId === p1.userId) setP1Status("Finished");
+      if (data.winnerId === p2.userId) setP2Status("Finished");
+    });
+
+    socket.on("spectator_chat", (data) => {
+      setChatMessages(prev => [...prev, data]);
+    });
+
+    socket.on("spectator_emote", (data) => {
+      const newEmote = { ...data, id: Date.now() + Math.random() };
+      setActiveEmotes(prev => [...prev, newEmote]);
+      setTimeout(() => {
+        setActiveEmotes(prev => prev.filter(e => e.id !== newEmote.id));
+      }, 2500);
+    });
+
+    return () => {
+      if (p1TypingTimeoutRef.current) clearTimeout(p1TypingTimeoutRef.current);
+      if (p2TypingTimeoutRef.current) clearTimeout(p2TypingTimeoutRef.current);
+      socket.emit("leave_spectator", { matchId: matchData.matchId });
+      socket.disconnect();
+      socketRef.current = null;
+    };
+  }, [isOpen, matchData, profile]);
+
+  // Formatting time helper
+  const formatTime = (secs) => {
+    const m = Math.floor(secs / 60).toString().padStart(2, "0");
+    const s = (secs % 60).toString().padStart(2, "0");
+    return `${m}:${s}`;
+  };
+
+  // Main game timer
+  useEffect(() => {
+    if (!isOpen || matchEnded) return;
+    const interval = setInterval(() => {
+      setSeconds(s => s + 1);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [isOpen, matchEnded]);
+
+  // Winner Confetti
+  useEffect(() => {
+    if (matchEnded && winnerId) {
+      const duration = 3000;
+      const end = Date.now() + duration;
+
+      const frame = () => {
+        confetti({
+          particleCount: 5,
+          angle: 60,
+          spread: 55,
+          origin: { x: 0, y: 0.8 },
+          zIndex: 9999
+        });
+        confetti({
+          particleCount: 5,
+          angle: 120,
+          spread: 55,
+          origin: { x: 1, y: 0.8 },
+          zIndex: 9999
+        });
+
+        if (Date.now() < end) {
+          requestAnimationFrame(frame);
+        }
+      };
+      frame();
+    }
+  }, [matchEnded, winnerId]);
+
+  const handleSendChat = (e) => {
+    e.preventDefault();
+    if (!chatInput.trim() || !socketRef.current) return;
+    const msg = {
+      matchId: matchData.matchId,
+      message: chatInput
+    };
+    socketRef.current.emit("spectator_chat", msg);
+    setChatMessages(prev => [...prev, { ...msg, username: "You", isMe: true }]);
+    setChatInput("");
+  };
+
+  const handleSendEmote = (emote) => {
+    if (!socketRef.current) return;
+    socketRef.current.emit("spectator_emote", { matchId: matchData.matchId, emote });
+    const newEmote = { emote, id: Date.now() + Math.random(), isMe: true, left: Math.random() * 80 + 10 };
+    setActiveEmotes(prev => [...prev, newEmote]);
+    setTimeout(() => {
+      setActiveEmotes(prev => prev.filter(e => e.id !== newEmote.id));
+    }, 2500);
+  };
+
+  const renderLanguageBadge = (lang) => {
+    const map = { javascript: "JS", python: "PY", cpp: "C++", java: "JAVA" };
+    return <span className="ml-2 text-[9px] px-1.5 py-0.5 rounded bg-slate-200 dark:bg-slate-800 text-slate-500 font-bold border border-slate-300 dark:border-slate-700">{map[lang] || lang.toUpperCase()}</span>;
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <AnimatePresence>
+      <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6 bg-slate-900/60 backdrop-blur-sm">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95, y: 10 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          exit={{ opacity: 0, scale: 0.95, y: 10 }}
+          className="bg-white dark:bg-[#0f0f13] w-full max-w-6xl rounded-2xl shadow-2xl border border-slate-200 dark:border-neutral-800 flex flex-col overflow-hidden relative"
+          style={{ height: "calc(100vh - 80px)" }}
+        >
+        <AnimatePresence>
+          {matchEnded && (
+            <motion.div 
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0 }}
+              className="absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+            >
+              <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 p-12 rounded-3xl shadow-2xl text-center flex flex-col items-center">
+                <h2 className="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-500 mb-4">
+                  {winnerId === p1.userId ? p1.name : (winnerId === p2.userId ? p2.name : "IT'S A DRAW!")} 👑
+                </h2>
+                <p className="text-slate-500 dark:text-slate-400 font-medium mb-8">
+                  The match has concluded!
+                </p>
+                <button 
+                  onClick={onClose}
+                  className="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl transition-colors"
+                >
+                  Close Spectator
+                </button>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+          {/* Header */}
+          <div className="h-14 bg-slate-50 dark:bg-[#15151a] border-b border-slate-200 dark:border-neutral-800 flex items-center justify-between px-4 shrink-0 relative overflow-hidden">
+            
+            {/* Tug of War Momentum Bar (Absolute positioned at the bottom of header) */}
+            <div className="absolute bottom-0 left-0 right-0 h-1 bg-purple-500 flex z-0">
+              <motion.div 
+                className="h-full bg-blue-500"
+                animate={{ width: `${tugOfWarRatio}%` }}
+                initial={false}
+                transition={{ type: "spring", bounce: 0, duration: 1 }}
+              />
+            </div>
+            
+            <div className="flex items-center gap-4 z-10">
+              <div className="bg-slate-200 dark:bg-[#1a1a24] px-3 py-1 rounded-full text-sm font-mono text-slate-700 dark:text-slate-300 font-bold tracking-widest border border-slate-300 dark:border-slate-700">
+                {formatTime(seconds)}
+              </div>
+              <button 
+                onClick={() => setIsChatOpen(prev => !prev)} 
+                className="lg:hidden p-2 bg-blue-100 dark:bg-blue-900/30 text-blue-600 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors"
+              >
+                <MessageSquare size={18} />
+              </button>
+              <div className="hidden sm:block">
+                <h3 className="font-bold text-slate-800 dark:text-neutral-200 text-sm leading-tight">
+                  Spectator Mode: {matchData?.topic || "Match"}
+                </h3>
+                <div className="flex items-center">
+                  <span className="text-[10px] font-semibold text-slate-500">Live Match • {formatTime(seconds)}</span>
+                  {spectatorCount > 0 && (
+                    <span className="text-[10px] ml-2 flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400 font-bold animate-pulse">
+                      <div className="w-1.5 h-1.5 rounded-full bg-red-500"></div>
+                      {spectatorCount} viewing
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <button
+              onClick={onClose}
+              className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-200 dark:hover:bg-neutral-800 text-slate-500 transition"
+            >
+              <X size={18} />
+            </button>
+          </div>
+
+          <div className="flex w-full h-[calc(100%-4rem)] overflow-hidden relative">
+        
+        {/* Overlay for mobile when chat is open */}
+        {isChatOpen && (
+          <div 
+            className="absolute inset-0 bg-black/40 z-30 lg:hidden"
+            onClick={() => setIsChatOpen(false)}
+          />
+        )}
+
+        {/* Left Side: Game State (Player 1 vs Player 2) */}
+            <div className="flex-[3] flex overflow-hidden border-r border-slate-200 dark:border-neutral-800 relative">
+              
+              {/* Floating Emotes Layer */}
+              <div className="absolute inset-0 pointer-events-none z-50 overflow-hidden">
+                <AnimatePresence>
+                  {activeEmotes.map(e => (
+                    <motion.div
+                      key={e.id}
+                      initial={{ opacity: 0, y: 100, scale: 0.5, x: (e.left || 50) + "%" }}
+                      animate={{ opacity: [0, 1, 0], y: -200, scale: 2, x: (e.left || 50) + "%" }}
+                      exit={{ opacity: 0 }}
+                      transition={{ duration: 2.5, ease: "easeOut" }}
+                      className="absolute bottom-0 text-4xl"
+                    >
+                      {e.emote}
+                    </motion.div>
+                  ))}
+                </AnimatePresence>
+              </div>
+
+              {/* Player 1 View */}
+              <div className="w-full lg:w-1/2 flex flex-col bg-slate-50/50 dark:bg-[#0a0a0f] overflow-y-auto border-r border-slate-200 dark:border-slate-800">
+                <div className="h-14 border-b border-slate-200 dark:border-neutral-800 flex flex-col justify-center px-4 bg-white dark:bg-[#111116]">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <div className="w-5 h-5 rounded-full bg-primary/20 text-primary flex items-center justify-center text-[10px] font-bold">
+                        {p1.name.slice(0, 2).toUpperCase()}
+                      </div>
+                      <span className="font-semibold text-xs text-slate-700 dark:text-neutral-300">
+                        {p1.name} {winnerId === p1.userId && "👑"}
+                      </span>
+                      {renderLanguageBadge(p1Language)}
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-[10px] font-semibold text-slate-400">Lines: {p1Lines}</span>
+                      <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${
+                          p1Status === "Typing..." ? "bg-primary/20 text-primary-light animate-pulse" :
+                          p1Status === "Testing Code..." ? "bg-amber-500/20 text-amber-500 animate-pulse" :
+                          "bg-slate-500/20 text-slate-500"
+                        }`}>
+                        {p1Status}
+                      </span>
+                    </div>
+                  </div>
+                  {/* Speedometer Bar */}
+                  <div className="mt-1.5 flex items-center gap-2">
+                    <div className="text-[9px] text-slate-400 w-8">Speed</div>
+                    <div className="flex-1 h-1 bg-slate-200 dark:bg-slate-800 rounded-full overflow-hidden">
+                      <motion.div 
+                        className="h-full bg-primary"
+                        animate={{ width: `${Math.min((p1Cpm / 300) * 100, 100)}%` }}
+                        transition={{ ease: "linear", duration: 1 }}
+                      />
+                    </div>
+                    <div className="text-[9px] text-slate-400 w-8 text-right">{p1Cpm}cpm</div>
+                  </div>
+                </div>
+                <div className="flex-1 flex flex-col items-center justify-center p-8 text-center relative">
+                  <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-primary/5 via-transparent to-transparent opacity-50" />
+                  
+                  <Terminal size={48} className={`mb-4 ${p1Status === "Typing..." ? "text-primary animate-pulse" : "text-slate-700"}`} />
+                  <h4 className="text-lg font-bold text-slate-800 dark:text-neutral-200 mb-2">
+                    {p1Status === "Idle" ? "Waiting for action..." : p1Status}
+                  </h4>
+                  
+                  {/* Test Case Progress Box */}
+                  <div className="mt-6 w-full max-w-sm bg-white dark:bg-[#15151a] border border-slate-200 dark:border-slate-800 rounded-xl p-4 shadow-sm min-h-[88px] flex flex-col justify-center">
+                    {p1TotalTests > 0 || p1Failed > 0 ? (
+                      <>
+                        <div className="flex justify-between items-center mb-2">
+                          <span className="text-xs font-bold text-slate-700 dark:text-slate-300">Test Progress</span>
+                          <span className="text-[10px] font-semibold text-slate-500">{p1TotalTests > 0 ? `${(p1Progress/100*p1TotalTests).toFixed(0)}/${p1TotalTests} Passed` : "Not Submitted"}</span>
+                        </div>
+                        <div className="h-2 bg-slate-200 dark:bg-slate-800 rounded-full overflow-hidden mb-3">
+                          <motion.div 
+                            className="h-full bg-emerald-500"
+                            animate={{ width: `${p1Progress}%` }}
+                          />
+                        </div>
+                        {p1Failed > 0 && (
+                          <div className="flex items-center gap-1.5 text-xs text-red-500 font-semibold bg-red-500/10 px-2 py-1 rounded w-fit mx-auto border border-red-500/20 mt-2">
+                            <AlertCircle size={14} /> Failed Attempts: {p1Failed}
+                          </div>
+                        )}
+                      </>
+                    ) : (
+                      <div className="flex flex-col items-center justify-center opacity-70">
+                        <span className="text-xs font-bold text-slate-500">Waiting for submission</span>
+                        <div className="flex items-center gap-1.5 mt-2">
+                          <div className="w-1.5 h-1.5 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+                          <div className="w-1.5 h-1.5 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+                          <div className="w-1.5 h-1.5 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* Player 2 View */}
+              <div className="w-full lg:w-1/2 flex flex-col bg-slate-50 dark:bg-[#0a0a0c] overflow-y-auto">
+                <div className="h-14 border-b border-slate-200 dark:border-neutral-800 flex flex-col justify-center px-4 bg-white dark:bg-[#111116]">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <div className="w-5 h-5 rounded-full bg-purple-500/20 text-purple-400 flex items-center justify-center text-[10px] font-bold">
+                        {p2.name.slice(0, 2).toUpperCase()}
+                      </div>
+                      <span className="font-semibold text-xs text-slate-700 dark:text-neutral-300">
+                        {p2.name} {winnerId === p2.userId && "👑"}
+                      </span>
+                      {renderLanguageBadge(p2Language)}
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-[10px] font-semibold text-slate-400">Lines: {p2Lines}</span>
+                      <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${
+                          p2Status === "Typing..." ? "bg-purple-500/20 text-purple-400 animate-pulse" :
+                          p2Status === "Testing Code..." ? "bg-amber-500/20 text-amber-500 animate-pulse" :
+                          "bg-slate-500/20 text-slate-500"
+                        }`}>
+                        {p2Status}
+                      </span>
+                    </div>
+                  </div>
+                  {/* Speedometer Bar */}
+                  <div className="mt-1.5 flex items-center gap-2">
+                    <div className="text-[9px] text-slate-400 w-8">Speed</div>
+                    <div className="flex-1 h-1 bg-slate-200 dark:bg-slate-800 rounded-full overflow-hidden">
+                      <motion.div 
+                        className="h-full bg-purple-500"
+                        animate={{ width: `${Math.min((p2Cpm / 300) * 100, 100)}%` }}
+                        transition={{ ease: "linear", duration: 1 }}
+                      />
+                    </div>
+                    <div className="text-[9px] text-slate-400 w-8 text-right">{p2Cpm}cpm</div>
+                  </div>
+                </div>
+                <div className="flex-1 flex flex-col items-center justify-center p-8 text-center relative">
+                  <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-500/5 via-transparent to-transparent opacity-50" />
+                  
+                  <Terminal size={48} className={`mb-4 ${p2Status === "Typing..." ? "text-purple-400 animate-pulse" : "text-slate-700"}`} />
+                  <h4 className="text-lg font-bold text-slate-800 dark:text-neutral-200 mb-2">
+                    {p2Status === "Idle" ? "Waiting for action..." : p2Status}
+                  </h4>
+                  
+                  {/* Test Case Progress Box */}
+                  <div className="mt-6 w-full max-w-sm bg-white dark:bg-[#15151a] border border-slate-200 dark:border-slate-800 rounded-xl p-4 shadow-sm min-h-[88px] flex flex-col justify-center">
+                    {p2TotalTests > 0 || p2Failed > 0 ? (
+                      <>
+                        <div className="flex justify-between items-center mb-2">
+                          <span className="text-xs font-bold text-slate-700 dark:text-slate-300">Test Progress</span>
+                          <span className="text-[10px] font-semibold text-slate-500">{p2TotalTests > 0 ? `${(p2Progress/100*p2TotalTests).toFixed(0)}/${p2TotalTests} Passed` : "Not Submitted"}</span>
+                        </div>
+                        <div className="h-2 bg-slate-200 dark:bg-slate-800 rounded-full overflow-hidden mb-3">
+                          <motion.div 
+                            className="h-full bg-emerald-500"
+                            animate={{ width: `${p2Progress}%` }}
+                          />
+                        </div>
+                        {p2Failed > 0 && (
+                          <div className="flex items-center gap-1.5 text-xs text-red-500 font-semibold bg-red-500/10 px-2 py-1 rounded w-fit mx-auto border border-red-500/20 mt-2">
+                            <AlertCircle size={14} /> Failed Attempts: {p2Failed}
+                          </div>
+                        )}
+                      </>
+                    ) : (
+                      <div className="flex flex-col items-center justify-center opacity-70">
+                        <span className="text-xs font-bold text-slate-500">Waiting for submission</span>
+                        <div className="flex items-center gap-1.5 mt-2">
+                          <div className="w-1.5 h-1.5 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+                          <div className="w-1.5 h-1.5 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+                          <div className="w-1.5 h-1.5 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Spectator Chat & Emotes (Right 25%) */}
+            <div className={`
+              absolute lg:relative right-0 top-0 bottom-0 z-40
+              w-80 lg:w-1/4 h-full bg-white dark:bg-[#0c0c0e] border-l border-slate-200 dark:border-slate-800 flex flex-col
+              transition-transform duration-300 ease-in-out
+              ${isChatOpen ? "translate-x-0 shadow-2xl lg:shadow-none" : "translate-x-full lg:translate-x-0"}
+            `}>
+              <div className="h-10 border-b border-slate-200 dark:border-neutral-800 flex items-center px-4 bg-slate-50 dark:bg-[#15151a]">
+                <MessageSquare size={14} className="text-slate-500 mr-2" />
+                <span className="text-xs font-bold text-slate-700 dark:text-slate-300">Spectator Chat</span>
+              </div>
+              
+              {/* Chat Messages */}
+              <div className="flex-1 overflow-y-auto p-4 space-y-3">
+                {chatMessages.length === 0 ? (
+                  <p className="text-xs text-slate-400 text-center mt-4">No messages yet. Be the first to cheer!</p>
+                ) : (
+                  chatMessages.map((msg, i) => (
+                    <div key={i} className={`flex flex-col ${msg.isMe ? "items-end" : "items-start"}`}>
+                      <span className="text-[9px] text-slate-400 font-semibold mb-0.5 px-1">{msg.username}</span>
+                      <div className={`px-3 py-2 rounded-xl text-xs max-w-[90%] ${msg.isMe ? "bg-primary text-white rounded-br-none" : "bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 rounded-bl-none"}`}>
+                        {msg.message}
+                      </div>
+                    </div>
+                  ))
+                )}
+                <div ref={chatEndRef} />
+              </div>
+
+              {/* Chat Input & Emotes */}
+              <div className="border-t border-slate-200 dark:border-neutral-800 p-3 bg-slate-50 dark:bg-[#15151a]">
+                <div className="flex justify-around mb-3">
+                  {EMOTES.map(emote => (
+                    <button 
+                      key={emote} 
+                      onClick={() => handleSendEmote(emote)}
+                      className="text-lg hover:scale-125 hover:-translate-y-1 transition-transform active:scale-95"
+                    >
+                      {emote}
+                    </button>
+                  ))}
+                </div>
+                <form onSubmit={handleSendChat} className="relative">
+                  <input
+                    type="text"
+                    value={chatInput}
+                    onChange={(e) => setChatInput(e.target.value)}
+                    placeholder="Send a message..."
+                    className="w-full bg-white dark:bg-[#0a0a0c] border border-slate-200 dark:border-slate-800 text-xs text-slate-800 dark:text-slate-200 rounded-full pl-3 pr-10 py-2 outline-none focus:border-primary/50"
+                  />
+                  <button type="submit" className="absolute right-2 top-1/2 -translate-y-1/2 text-primary hover:text-primary-light transition p-1">
+                    <Send size={14} />
+                  </button>
+                </form>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </AnimatePresence>
+  );
+}
diff --git a/src/app/components/ui/TournamentCard.jsx b/src/app/components/ui/TournamentCard.jsx
new file mode 100644
index 000000000..eaf8b009a
--- /dev/null
+++ b/src/app/components/ui/TournamentCard.jsx
@@ -0,0 +1,100 @@
+"use client";
+import { useState } from "react";
+import { Users, Clock, Trophy, Calendar, Check, Loader2, Award } from "lucide-react";
+import { toast } from "react-hot-toast";
+
+export default function TournamentCard({ tournament }) {
+  const [isRegistering, setIsRegistering] = useState(false);
+  const [isRegistered, setIsRegistered] = useState(false);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleRegister = () => {
+    setIsRegistering(true);
+    // Simulate API call
+    setTimeout(() => {
+      setIsRegistering(false);
+      setIsRegistered(true);
+      toast.success(`Successfully registered for ${tournament.title}!`);
+    }, 1500);
+  };
+
+  const handleMouseMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    setMousePos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+  };
+
+  return (
+    <div 
+      className="bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-5 shadow-sm hover:shadow-xl transition-all duration-300 relative overflow-hidden group flex flex-col md:flex-row gap-5 items-start md:items-center hover:-translate-y-1"
+      onMouseMove={handleMouseMove}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {isHovered && (
+        <div 
+          className="absolute inset-0 pointer-events-none transition-opacity duration-300"
+          style={{
+            background: `radial-gradient(400px circle at ${mousePos.x}px ${mousePos.y}px, rgba(99, 102, 241, 0.08), transparent 40%)`,
+          }}
+        />
+      )}
+      <div className={`absolute top-0 right-0 w-32 h-32 rounded-full blur-3xl -mr-16 -mt-16 pointer-events-none transition-colors duration-500 ${tournament.color || 'bg-primary/5 group-hover:bg-primary/10'}`}></div>
+      
+      <div className={`w-16 h-16 rounded-2xl flex items-center justify-center shrink-0 shadow-sm transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3 ${tournament.iconBg || 'bg-primary/10 text-primary'}`}>
+        <Trophy size={32} />
+      </div>
+
+      <div className="flex-1">
+        <div className="flex items-center gap-2 mb-1">
+          <h4 className="font-bold text-lg text-slate-800 dark:text-neutral-100">{tournament.title}</h4>
+          {tournament.status === "live" && (
+            <span className="px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-wider bg-red-500/10 text-red-500 animate-pulse">Live Now</span>
+          )}
+        </div>
+        <p className="text-sm text-slate-500 dark:text-neutral-400 mb-4 line-clamp-1">{tournament.description}</p>
+        
+        <div className="flex flex-wrap gap-4 text-xs font-semibold text-slate-600 dark:text-neutral-300">
+          <div className="flex items-center gap-1.5"><Calendar size={14} className="text-slate-400"/> {tournament.date}</div>
+          <div className="flex items-center gap-1.5"><Clock size={14} className="text-slate-400"/> {tournament.duration}</div>
+          <div className="flex items-center gap-1.5"><Users size={14} className="text-slate-400"/> {tournament.participants} Enrolled</div>
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center justify-center bg-slate-50 dark:bg-neutral-900/50 rounded-xl p-4 min-w-[140px] border border-slate-100 dark:border-neutral-800 group/prize relative overflow-hidden transition-all hover:border-amber-500/30 hover:bg-amber-500/5 dark:hover:bg-amber-500/10 hover:shadow-[0_0_15px_rgba(245,158,11,0.1)] cursor-default">
+        <div className="absolute inset-0 bg-gradient-to-b from-amber-400/0 to-amber-400/0 group-hover/prize:to-amber-400/5 transition-colors"></div>
+        <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2 z-10">Prize Pool</span>
+        
+        <div className="flex items-center justify-center gap-1.5 mb-3 z-10 transition-transform duration-300 group-hover/prize:scale-110 group-hover/prize:-translate-y-1">
+          <div className="w-5 h-5 rounded-full bg-amber-100 dark:bg-amber-900/40 flex items-center justify-center shadow-inner ring-1 ring-amber-400/50 relative">
+            <span className="absolute -inset-1 rounded-full bg-amber-400/20 blur-sm opacity-0 group-hover/prize:opacity-100 transition-opacity"></span>
+            <Award size={12} className="text-amber-600 dark:text-amber-400" />
+          </div>
+          <span className="text-lg font-black text-amber-500 drop-shadow-sm">{tournament.prize}</span>
+        </div>
+        
+        {tournament.status === "upcoming" && (
+          <button
+            onClick={handleRegister}
+            disabled={isRegistered || isRegistering}
+            className={`w-full py-2 px-4 rounded-lg text-xs font-bold flex items-center justify-center gap-2 transition-all ${
+              isRegistered
+                ? "bg-emerald-500/10 text-emerald-500 border border-emerald-500/20"
+                : "bg-primary text-white hover:bg-primary/90 shadow-md hover:shadow-lg"
+            }`}
+          >
+            {isRegistering ? (
+              <Loader2 size={14} className="animate-spin" />
+            ) : isRegistered ? (
+              <>
+                <Check size={14} /> Registered
+              </>
+            ) : (
+              "Register Now"
+            )}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/ui/TrackVisit.jsx b/src/app/components/ui/TrackVisit.jsx
new file mode 100644
index 000000000..442451e7a
--- /dev/null
+++ b/src/app/components/ui/TrackVisit.jsx
@@ -0,0 +1,11 @@
+"use client";
+import { useEffect } from "react";
+import { useRecentlyViewed } from "@/app/hooks/useRecentlyViewed";
+
+export default function TrackVisit({ name, path, category }) {
+  const { addRecentlyViewed } = useRecentlyViewed();
+  useEffect(() => {
+    addRecentlyViewed({ name, path, category });
+  }, []);
+  return null;
+}
\ No newline at end of file
diff --git a/src/app/components/ui/TutorialOverlay.jsx b/src/app/components/ui/TutorialOverlay.jsx
new file mode 100644
index 000000000..e4b4fc3ac
--- /dev/null
+++ b/src/app/components/ui/TutorialOverlay.jsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+import gsap from "gsap";
+
+export default function TutorialOverlay() {
+  const [showOverlay, setShowOverlay] = useState(false);
+  const [step, setStep] = useState(0);
+  const [videoError, setVideoError] = useState(false);
+  const overlayRef = useRef();
+
+  useEffect(() => {
+    setVideoError(false);
+  }, [step]);
+
+  useEffect(() => {
+    const seenTutorial = localStorage.getItem("tutorialSeen");
+
+    if (!seenTutorial) {
+      setShowOverlay(true);
+      gsap.fromTo(
+        overlayRef.current,
+        { opacity: 0 },
+        { opacity: 1, duration: 0.5, ease: "power2.out" },
+      );
+    }
+  }, []);
+
+  const nextStep = () => {
+    if (step < 2) {
+      setStep(step + 1);
+    } else {
+      gsap.to(overlayRef.current, {
+        opacity: 0,
+        duration: 0.5,
+        ease: "power2.in",
+        onComplete: () => {
+          localStorage.setItem("tutorialSeen", "true");
+          setShowOverlay(false);
+        },
+      });
+    }
+  };
+
+  const closeOverlay = () => {
+    gsap.to(overlayRef.current, {
+      opacity: 0,
+      duration: 0.5,
+      ease: "power2.in",
+      onComplete: () => {
+        localStorage.setItem("tutorialSeen", "true");
+        setShowOverlay(false);
+      },
+    });
+  };
+
+  useEffect(() => {
+    if (!showOverlay) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") closeOverlay();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [showOverlay]);
+
+  if (!showOverlay) return null;
+
+  return (
+    <div
+      ref={overlayRef}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Tutorial"
+      className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50"
+    >
+      <div className="bg-white dark:bg-neutral-900 p-6 rounded-2xl shadow-2xl max-w-sm w-full text-center relative">
+        <button
+          onClick={closeOverlay}
+          className="absolute top-3 right-3 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white text-xl"
+        >
+          ×
+        </button>
+        {(step === 1 || step === 2) && (
+          !videoError ? (
+            <video 
+              src={`/tutorials/tutorial${step}.mp4`} 
+              autoPlay 
+              loop 
+              muted 
+              onError={() => setVideoError(true)}
+              className="w-full aspect-video rounded-lg mb-4" 
+            />
+          ) : (
+            <div className="w-full aspect-video rounded-lg mb-4 bg-gray-100 dark:bg-surface-800 border border-gray-200 dark:border-surface-700 flex flex-col items-center justify-center">
+              <span className="text-gray-500 dark:text-gray-400 font-medium">Video tutorial coming soon</span>
+            </div>
+          )
+        )}
+        <h2 className="text-xl font-semibold mb-3 text-gray-900 dark:text-white">
+          {step === 0 && "Welcome to AlgoBuddy!"}
+          {step === 1 && "Choose a Data Structure"}
+          {step === 2 && "Learn More About Each Structure"}
+        </h2>
+        <p className="text-gray-700 dark:text-gray-300 mb-6">
+          {step === 0 &&
+            "Here’s a quick guide to help you get started with visualizing data structures."}
+          {step === 1 &&
+            "This is the algorithm page where you can choose a data structure and explore related algorithms."}
+          {step === 2 &&
+            "Click the 'i' button on each data structure card to learn more about it before visualizing."}
+        </p>
+        {step > 0 && (
+          <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
+            Step {step}/2
+          </p>
+        )}
+        <div className="flex justify-center gap-3">
+          <button
+            className="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-6 py-2 rounded-xl hover:opacity-90"
+            onClick={nextStep}
+          >
+            {step < 2 ? "Next" : "Finish"}
+          </button>
+          <button
+            className="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-6 py-2 rounded-xl hover:opacity-90"
+            onClick={closeOverlay}
+          >
+            Skip
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/ui/UpcomingTournament.jsx b/src/app/components/ui/UpcomingTournament.jsx
new file mode 100644
index 000000000..59ab1961a
--- /dev/null
+++ b/src/app/components/ui/UpcomingTournament.jsx
@@ -0,0 +1,135 @@
+"use client";
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { Trophy } from "lucide-react";
+
+export default function UpcomingTournament() {
+  const [timeLeft, setTimeLeft] = useState({
+    days: 0,
+    hours: 15,
+    minutes: 34,
+    seconds: 12,
+  });
+
+  useEffect(() => {
+    // Target next Sunday at 6:00 PM
+    const getNextTargetDate = () => {
+      const now = new Date();
+      const target = new Date();
+      target.setDate(now.getDate() + ((7 - now.getDay()) % 7)); // Next Sunday
+      target.setHours(18, 0, 0, 0); // 6:00 PM
+      
+      // If Sunday 6 PM has passed today, target next Sunday
+      if (target.getTime() <= now.getTime()) {
+        target.setDate(target.getDate() + 7);
+      }
+      return target;
+    };
+
+    const targetDate = getNextTargetDate();
+
+    const updateTimer = () => {
+      const difference = targetDate.getTime() - new Date().getTime();
+      
+      if (difference <= 0) {
+        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+        return;
+      }
+
+      const days = Math.floor(difference / (1000 * 60 * 60 * 24));
+      const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
+      const minutes = Math.floor((difference / 1000 / 60) % 60);
+      const seconds = Math.floor((difference / 1000) % 60);
+
+      setTimeLeft({ days, hours, minutes, seconds });
+    };
+
+    updateTimer();
+    const interval = setInterval(updateTimer, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="bg-white dark:bg-neutral-800 border border-slate-100 dark:border-neutral-800/80 rounded-2xl p-5 shadow-sm">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-bold text-slate-800 dark:text-neutral-200">Upcoming Tournament</h3>
+        <Link
+          href="/arena#tournaments"
+          className="text-xs text-primary dark:text-purple-400 font-semibold cursor-pointer hover:underline"
+        >
+          View All
+        </Link>
+      </div>
+
+      <div className="flex gap-4 items-start p-4 bg-slate-50/50 dark:bg-neutral-900/30 border border-slate-100 dark:border-neutral-800/50 rounded-xl mb-4">
+        <div className="p-3 bg-amber-500/10 text-amber-500 rounded-xl shrink-0 mt-1">
+          <Trophy size={20} />
+        </div>
+        <div className="flex-1 min-w-0">
+          <h4 className="text-sm font-bold text-slate-850 dark:text-neutral-100 leading-snug">
+            AlgoBuddy Weekly Arena
+          </h4>
+          
+          <div className="mt-3 flex items-center justify-between text-center gap-1.5 border-t border-slate-100 dark:border-neutral-800/60 pt-3">
+            <span className="text-[10px] text-slate-400 dark:text-neutral-500 uppercase tracking-wider text-left font-semibold">
+              Starts in
+            </span>
+            <div className="flex gap-2">
+              <div className="flex flex-col">
+                <span className="text-sm font-bold text-slate-800 dark:text-neutral-200">
+                  {timeLeft.days}
+                </span>
+                <span className="text-[8px] text-slate-400 uppercase tracking-widest leading-none mt-0.5">
+                  Days
+                </span>
+              </div>
+              <span className="text-xs font-bold text-slate-300 dark:text-neutral-700">:</span>
+              <div className="flex flex-col">
+                <span className="text-sm font-bold text-slate-800 dark:text-neutral-200">
+                  {timeLeft.hours.toString().padStart(2, "0")}
+                </span>
+                <span className="text-[8px] text-slate-400 uppercase tracking-widest leading-none mt-0.5">
+                  Hours
+                </span>
+              </div>
+              <span className="text-xs font-bold text-slate-300 dark:text-neutral-700">:</span>
+              <div className="flex flex-col">
+                <span className="text-sm font-bold text-slate-800 dark:text-neutral-200">
+                  {timeLeft.minutes.toString().padStart(2, "0")}
+                </span>
+                <span className="text-[8px] text-slate-400 uppercase tracking-widest leading-none mt-0.5">
+                  Mins
+                </span>
+              </div>
+              <span className="text-xs font-bold text-slate-300 dark:text-neutral-700">:</span>
+              <div className="flex flex-col">
+                <span className="text-sm font-bold text-slate-850 dark:text-neutral-100 animate-pulse">
+                  {timeLeft.seconds.toString().padStart(2, "0")}
+                </span>
+                <span className="text-[8px] text-slate-400 uppercase tracking-widest leading-none mt-0.5">
+                  Secs
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-2 text-xs">
+        <div className="flex justify-between items-center text-slate-500 dark:text-neutral-400">
+          <span>1st Place</span>
+          <span className="font-semibold text-primary dark:text-purple-400">500 XP</span>
+        </div>
+        <div className="flex justify-between items-center text-slate-500 dark:text-neutral-400">
+          <span>2nd Place</span>
+          <span className="font-semibold text-primary/80 dark:text-purple-400/80">300 XP</span>
+        </div>
+        <div className="flex justify-between items-center text-slate-500 dark:text-neutral-400">
+          <span>3rd Place</span>
+          <span className="font-semibold text-primary/60 dark:text-purple-400/60">150 XP</span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/ui/VisualizerShortcutsButton.jsx b/src/app/components/ui/VisualizerShortcutsButton.jsx
new file mode 100644
index 000000000..05b56cddd
--- /dev/null
+++ b/src/app/components/ui/VisualizerShortcutsButton.jsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { useState } from "react";
+import { Keyboard } from "lucide-react";
+import VisualizerShortcutsModal from "@/app/components/ui/VisualizerShortcutsModal";
+
+export default function VisualizerShortcutsButton() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        className="flex items-center gap-2 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-neutral-950 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-neutral-900 transition-colors"
+      >
+        <Keyboard className="h-4 w-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Keyboard Shortcuts</span>
+        <span className="sm:hidden">Shortcuts</span>
+      </button>
+
+      <VisualizerShortcutsModal open={open} onClose={() => setOpen(false)} />
+    </>
+  );
+}
+
diff --git a/src/app/components/ui/VisualizerShortcutsModal.jsx b/src/app/components/ui/VisualizerShortcutsModal.jsx
new file mode 100644
index 000000000..d16743da0
--- /dev/null
+++ b/src/app/components/ui/VisualizerShortcutsModal.jsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { useEffect } from "react";
+import { X } from "lucide-react";
+
+const SHORTCUTS = [
+  { key: "Space", label: "Play/Pause animation" },
+  { key: "R", label: "Reset visualization" },
+  { key: "N", label: "Next step" },
+  { key: "P", label: "Previous step" },
+  { key: "Esc", label: "Close modal" },
+];
+
+export default function VisualizerShortcutsModal({ open, onClose }) {
+  useEffect(() => {
+    if (!open) return;
+
+    function onKeyDown(e) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose?.();
+      }
+    }
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm px-4"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Keyboard shortcuts"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose?.();
+      }}
+    >
+      <div className="w-full max-w-md rounded-2xl bg-white dark:bg-neutral-950 border border-surface-200 dark:border-neutral-800 shadow-2xl overflow-hidden">
+        <div className="flex items-center justify-between gap-4 p-4 border-b border-surface-200 dark:border-neutral-800">
+          <h2 className="text-lg font-black text-slate-900 dark:text-neutral-100">
+            Keyboard Shortcuts
+          </h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-full p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-neutral-900 dark:hover:text-neutral-100"
+            aria-label="Close modal"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <div className="p-4">
+          <p className="text-sm text-slate-600 dark:text-neutral-300 mb-4">
+            Use these controls while the visualizer is running.
+          </p>
+
+          <div className="space-y-3">
+            {SHORTCUTS.map((s) => (
+              <div
+                key={s.key}
+                className="flex items-center justify-between gap-4 rounded-xl border border-surface-200/70 dark:border-neutral-800 bg-white dark:bg-neutral-950 px-3 py-2"
+              >
+                <span className="text-sm font-semibold text-slate-700 dark:text-neutral-300">
+                  {s.label}
+                </span>
+                <kbd className="inline-flex items-center justify-center rounded-md border border-surface-300 dark:border-neutral-700 bg-surface-100 dark:bg-neutral-900 px-3 py-1 text-xs font-bold font-mono text-slate-800 dark:text-neutral-100 shadow-sm">
+                  {s.key}
+                </kbd>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-4 text-[12px] text-slate-500 dark:text-neutral-400">
+            Tip: shortcuts are disabled while you’re typing in an input.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
diff --git a/src/app/components/ui/backtotop.jsx b/src/app/components/ui/backtotop.jsx
new file mode 100644
index 000000000..0865e028e
--- /dev/null
+++ b/src/app/components/ui/backtotop.jsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+const BackToTop = () => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const check = () => {
+      setVisible(window.scrollY > 300);
+    };
+
+    check();
+    window.addEventListener("scroll", check);
+    return () => window.removeEventListener("scroll", check);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  return (
+    <AnimatePresence>
+      {visible && (
+        <motion.button
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0.9 }}
+          transition={{ duration: 0.3, ease: "easeInOut" }}
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          onClick={scrollToTop}
+          aria-label="Scroll to top"
+          className="fixed bottom-[147px] right-3 sm:bottom-24 sm:right-6 z-[9990] w-14 h-14 rounded-2xl bg-[#a435f0] text-white shadow-lg flex items-center justify-center hover:bg-[#8f2cd6] transition-colors group"
+        >
+          <div className="absolute bottom-full mb-2 hidden group-hover:block bg-gray-800 text-white text-xs font-medium px-2 py-1 rounded whitespace-nowrap">
+            Back to top
+          </div>
+          <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4 sm:w-5 sm:h-5" viewBox="0 0 20 20" fill="currentColor">
+            <path fillRule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clipRule="evenodd" />
+          </svg>
+        </motion.button>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default BackToTop;
\ No newline at end of file
diff --git a/src/app/components/ui/customArrayInput.jsx b/src/app/components/ui/customArrayInput.jsx
new file mode 100644
index 000000000..6500877cb
--- /dev/null
+++ b/src/app/components/ui/customArrayInput.jsx
@@ -0,0 +1,37 @@
+"use client";
+import { CustomInputPanel } from "@/app/visualizer/components/CustomInputPanel";
+
+const CustomArrayInput = ({ 
+  onUseCustomArray = (numbers) => {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        "CustomArrayInput: no `onUseCustomArray` handler was provided, so this array will be discarded:",
+        numbers
+      );
+    }
+  },
+  disabled = false, 
+  className = "",
+  currentArray = []
+}) => {
+  return (
+    <div className={className}>
+      <CustomInputPanel
+        inputType="array"
+        onApply={(parsed) => {
+          if (parsed === null) {
+            // Reset: generate a fresh random array of size 5 to 9
+            const size = Math.floor(Math.random() * 5) + 5;
+            const randomArr = Array.from({ length: size }, () => Math.floor(Math.random() * 90) + 10);
+            onUseCustomArray(randomArr);
+          } else {
+            onUseCustomArray(parsed);
+          }
+        }}
+        currentData={currentArray}
+      />
+    </div>
+  );
+};
+
+export default CustomArrayInput;
\ No newline at end of file
diff --git a/src/app/components/ui/exploreOther.jsx b/src/app/components/ui/exploreOther.jsx
new file mode 100644
index 000000000..a4b9f693c
--- /dev/null
+++ b/src/app/components/ui/exploreOther.jsx
@@ -0,0 +1,83 @@
+"use client";
+import { motion } from 'framer-motion';
+import { FiArrowRight, FiExternalLink } from 'react-icons/fi';
+
+const ExploreOther = ({ 
+  title, 
+  links, 
+  columns = "4",
+  icon = <FiArrowRight />,
+  showExternalIcon = true
+}) => {
+  // Responsive grid columns mapping
+  const gridColumns = {
+    "1": "sm:grid-cols-1",
+    "2": "sm:grid-cols-2",
+    "3": "sm:grid-cols-2 lg:grid-cols-3",
+    "4": "sm:grid-cols-2 lg:grid-cols-4",
+    "5": "sm:grid-cols-2 lg:grid-cols-5",
+  }[columns] || "sm:grid-cols-2 lg:grid-cols-4";
+
+  // Check if links should open in new tab
+  const isExternal = (url) => url.startsWith('http') || url.startsWith('www');
+
+  return (
+    <motion.div 
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+      className="bg-white max-w-4xl mx-auto dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200/80 dark:border-gray-700/80 overflow-hidden mt-6 transition-all duration-300 hover:shadow-md hover:border-gray-300 dark:hover:border-gray-600"
+    >
+      <div className="p-5 sm:p-6">
+        <div className="flex items-center justify-between mb-5">
+          <h2 className="text-xl sm:text-2xl font-black text-gray-900 dark:text-white flex items-center gap-3" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: '-0.03em' }}>
+            <span className="w-2 h-6 bg-gradient-to-b from-[#a435f0] to-[#7c3aed] rounded-full flex-shrink-0"></span>
+            {title}
+          </h2>
+        </div>
+        
+        <div className={`grid grid-cols-1 ${gridColumns} gap-3`}>
+          {links.map((link, index) => (
+            <motion.a
+              key={index}
+              href={link.url}
+              target={isExternal(link.url) ? "_blank" : "_self"}
+              rel={isExternal(link.url) ? "noopener noreferrer" : ""}
+              whileHover={{ y: -3 }}
+              whileTap={{ scale: 0.98 }}
+              className="group relative block p-4 rounded-lg border border-gray-200/70 dark:border-gray-700/70 hover:border-[#a435f0]/70 dark:hover:border-[#a435f0]/70 transition-all duration-200 bg-gradient-to-b from-white/50 to-white/0 dark:from-gray-700/20 dark:to-gray-700/5 hover:from-[#faf5ff]/50 hover:to-[#faf5ff]/10 dark:hover:from-[#a435f0]/10 dark:hover:to-[#a435f0]/5 overflow-hidden"
+            >
+              {/* Animated hover effect */}
+              <div className="absolute inset-0 bg-gradient-to-r from-[#a435f0]/0 via-[#a435f0]/5 to-[#a435f0]/0 opacity-0 group-hover:opacity-100 dark:via-[#a435f0]/10 transition-opacity duration-300"></div>
+              
+              <div className="relative flex items-center gap-3">
+                {/* Custom icon or default */}
+                <div className="flex-shrink-0 w-9 h-9 rounded-lg bg-[#faf5ff] dark:bg-[#a435f0]/10 flex items-center justify-center text-[#a435f0] dark:text-[#c084fc] group-hover:bg-[#f3e8ff] dark:group-hover:bg-[#a435f0]/20 transition-colors shadow-inner">
+                  {link.icon || icon}
+                </div>
+                
+                <div className="flex-1 min-w-0">
+                  <p className="text-gray-800 dark:text-gray-200 group-hover:text-[#a435f0] dark:group-hover:text-[#c084fc] font-medium transition-colors truncate">
+                    {link.text}
+                  </p>
+                  {link.description && (
+                    <p className="text-sm text-gray-500 dark:text-gray-400 truncate">
+                      {link.description}
+                    </p>
+                  )}
+                </div>
+                
+                {/* External link indicator */}
+                {showExternalIcon && isExternal(link.url) && (
+                  <FiExternalLink className="flex-shrink-0 text-gray-400 dark:text-gray-500 group-hover:text-[#a435f0] dark:group-hover:text-[#c084fc] transition-colors" />
+                )}
+              </div>
+            </motion.a>
+          ))}
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default ExploreOther;
\ No newline at end of file
diff --git a/src/app/components/ui/goButton.jsx b/src/app/components/ui/goButton.jsx
new file mode 100644
index 000000000..5d9b1dad0
--- /dev/null
+++ b/src/app/components/ui/goButton.jsx
@@ -0,0 +1,18 @@
+'use client';
+import React from 'react';
+
+const GoButton = ({ onClick, onGo, isAnimating, disabled }) => {
+  const handleClick = onClick || onGo;
+  return (
+    <button
+      type="submit"
+      onClick={handleClick}
+      className="px-6 py-2.5 min-w-[100px] bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white font-bold rounded-lg disabled:opacity-50 transition-all duration-200 shadow-sm flex items-center justify-center text-sm"
+      disabled={isAnimating || disabled}
+    >
+      Go
+    </button>
+  );
+};
+
+export default GoButton;
\ No newline at end of file
diff --git a/app/components/ui/goback.jsx b/src/app/components/ui/goback.jsx
old mode 100755
new mode 100644
similarity index 82%
rename from app/components/ui/goback.jsx
rename to src/app/components/ui/goback.jsx
index a1b609a45..b40de90db
--- a/app/components/ui/goback.jsx
+++ b/src/app/components/ui/goback.jsx
@@ -1,12 +1,20 @@
 "use client";
+import { useRouter } from "next/navigation";
+
 const RedirectButton = ({ 
     url = '/visualizer',
     className = '',
     buttonText = 'Go Back',
     icon = true
   }) => {
+    const router = useRouter();
+
     const handleRedirect = () => {
-      window.location.href = url;
+      if (typeof window !== "undefined" && window.history.length > 1) {
+        router.back();
+      } else {
+        router.push(url);
+      }
     };
   
     return (
diff --git a/app/components/ui/graph.jsx b/src/app/components/ui/graph.jsx
old mode 100755
new mode 100644
similarity index 84%
rename from app/components/ui/graph.jsx
rename to src/app/components/ui/graph.jsx
index 2eea72df9..83a58f7d6
--- a/app/components/ui/graph.jsx
+++ b/src/app/components/ui/graph.jsx
@@ -16,6 +16,7 @@ const ComplexityGraph = ({
   bestCase = null,
   averageCase = null,
   worstCase = null,
+  comparisonAlgorithms = [],
   maxN = 100,
   title = "Time Complexity Analysis"
 }) => {
@@ -73,7 +74,7 @@ const ComplexityGraph = ({
 
   return (
     <div className="w-full h-[400px] my-1 p-2 bg-neutral-50 dark:bg-neutral-900 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300">
-      <h2 className="text-center text-2xl font-bold mb-1 text-gray-800 dark:text-gray-100">
+      <h2 className="text-center text-2xl font-black mb-1 text-gray-800 dark:text-gray-100" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: '-0.03em' }}>
         {title}
       </h2>
       
@@ -192,6 +193,34 @@ const ComplexityGraph = ({
           )}
         </LineChart>
       </ResponsiveContainer>
+
+      {comparisonAlgorithms.length > 0 && (
+  <div className="mt-4 overflow-x-auto">
+    <h3 className="text-center font-bold mb-2">
+      Algorithm Complexity Comparison
+    </h3>
+
+    <table className="w-full text-sm border">
+      <thead>
+        <tr className="bg-gray-100 dark:bg-gray-800">
+          <th className="p-2">Algorithm</th>
+          <th className="p-2">Time Complexity</th>
+          <th className="p-2">Space Complexity</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        {comparisonAlgorithms.map((algo, index) => (
+          <tr key={index}>
+            <td className="p-2">{algo.name}</td>
+            <td className="p-2">{algo.time}</td>
+            <td className="p-2">{algo.space}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+)}
       
       <Legend content={renderLegend} />
     </div>
diff --git a/src/app/components/ui/navigationLink.jsx b/src/app/components/ui/navigationLink.jsx
new file mode 100644
index 000000000..3b1b89f26
--- /dev/null
+++ b/src/app/components/ui/navigationLink.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const NavigationLink = ({ href, text, className = '' }) => {
+  return (
+    <div className={`bg-gray-100 dark:bg-surface-900 flex justify-center pr-10 pb-10 pt-0 font-poppins ${className}`}>
+      <a href={href} className='text-blue-600 underline hover:text-blue-700'>
+        Move To {text}
+      </a>
+    </div>
+  );
+};
+
+export default NavigationLink;
\ No newline at end of file
diff --git a/src/app/components/ui/productHunt.jsx b/src/app/components/ui/productHunt.jsx
new file mode 100644
index 000000000..2e3912568
--- /dev/null
+++ b/src/app/components/ui/productHunt.jsx
@@ -0,0 +1,25 @@
+"use client";
+import React from "react";
+import Image from "next/image";
+
+const ProductHuntBadge = () => {
+  return (
+    <a
+      className="border dark:border-white border-black rounded-xl inline-block overflow-hidden"
+      href="https://www.producthunt.com/products/dsa-visualizer?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-dsa&#0045;visualizer"
+      target="_blank"
+      rel="noopener noreferrer"
+      style={{ width: 250, height: 54 }}
+    >
+      <Image
+        src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=974127&theme=dark&t=1749182745821"
+        alt="DSA Visualizer - Visualize & learn dsa the smart way | Product Hunt"
+        width={250}
+        height={54}
+        priority
+      />
+    </a>
+  );
+};
+
+export default ProductHuntBadge;
\ No newline at end of file
diff --git a/src/app/components/ui/randomArray.jsx b/src/app/components/ui/randomArray.jsx
new file mode 100644
index 000000000..e59648f48
--- /dev/null
+++ b/src/app/components/ui/randomArray.jsx
@@ -0,0 +1,28 @@
+"use client";
+
+const ArrayGenerator = ({ onGenerate, disabled = false, isPrimary = false, defaultSize = 10, minValue = 5, maxValue = 100 }) => {
+  const generateRandomArray = (size = 10, min = 5, max = 100) => {
+    return Array.from({ length: size }, () => Math.floor(Math.random() * (max - min + 1)) + min);
+  };
+
+  const handleGenerate = () => {
+    const newArray = generateRandomArray();
+    onGenerate(newArray);
+  };
+
+  return (
+    <button
+      onClick={handleGenerate}
+      disabled={disabled}
+      className={`w-full px-4 py-2 rounded disabled:opacity-50 mb-2 text-sm sm:text-base transition-colors font-medium ${
+        isPrimary 
+          ? "bg-[#a435f0] hover:bg-[#8f2cd6] text-white" 
+          : "bg-[#f3e8ff] dark:bg-[#a435f0]/20 text-[#a435f0] dark:text-[#e9d5ff] hover:bg-[#e9d5ff] dark:hover:bg-[#a435f0]/30"
+      }`}
+    >
+      Generate Random Array
+    </button>
+  );
+};
+
+export default ArrayGenerator;
\ No newline at end of file
diff --git a/src/app/components/ui/resetButton.jsx b/src/app/components/ui/resetButton.jsx
new file mode 100644
index 000000000..4b1923566
--- /dev/null
+++ b/src/app/components/ui/resetButton.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const ResetButton = ({ onReset, onClick, isAnimating, disabled }) => {
+  const handleClick = onReset || onClick;
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      disabled={isAnimating || disabled}
+      className="px-6 py-2.5 min-w-[100px] bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white font-bold rounded-lg disabled:opacity-50 transition-all duration-200 shadow-sm flex items-center justify-center text-sm"
+    >
+      Reset
+    </button>
+  );
+};
+
+export default ResetButton;
\ No newline at end of file
diff --git a/src/app/components/ui/scrolltobottom.jsx b/src/app/components/ui/scrolltobottom.jsx
new file mode 100644
index 000000000..2fa07ecaf
--- /dev/null
+++ b/src/app/components/ui/scrolltobottom.jsx
@@ -0,0 +1,48 @@
+"use client";
+import { useEffect, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const ScrollToBottom = () => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const check = () => {
+      const distanceFromBottom =
+        document.documentElement.scrollHeight - window.scrollY - window.innerHeight;
+      setVisible(distanceFromBottom > 300);
+    };
+    check();
+    window.addEventListener('scroll', check);
+    return () => window.removeEventListener('scroll', check);
+  }, []);
+
+  const scrollToBottom = () => {
+    window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
+  };
+
+  return (
+    <AnimatePresence>
+      {visible && (
+        <motion.button
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0.9 }}
+          transition={{ duration: 0.3, ease: "easeInOut" }}
+          onClick={scrollToBottom}
+          aria-label="Scroll to bottom"
+          style={{ position: 'fixed', bottom: '96px', right: '20px' }}
+          className="z-[9990] w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-[#a435f0] text-white shadow-lg flex items-center justify-center hover:bg-[#8f2cd6] group"
+        >
+          <div className="absolute bottom-full mb-2 hidden group-hover:block bg-gray-800 text-white text-xs font-medium px-2 py-1 rounded whitespace-nowrap after:content-[''] after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 after:border-4 after:border-transparent after:border-t-gray-800">
+            Scroll to bottom
+          </div>
+          <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4 sm:w-5 sm:h-5 transition-transform group-hover:translate-y-0.5" viewBox="0 0 20 20" fill="currentColor">
+            <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
+          </svg>
+        </motion.button>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default ScrollToBottom;
\ No newline at end of file
diff --git a/src/app/components/ui/spectator/PlayerLanguageBadge.jsx b/src/app/components/ui/spectator/PlayerLanguageBadge.jsx
new file mode 100644
index 000000000..939629c79
--- /dev/null
+++ b/src/app/components/ui/spectator/PlayerLanguageBadge.jsx
@@ -0,0 +1,20 @@
+import { Code2 } from "lucide-react";
+
+export default function PlayerLanguageBadge({ language = "javascript" }) {
+  const langConfig = {
+    javascript: { color: "bg-yellow-500/20 text-yellow-500 border-yellow-500/30", label: "JS" },
+    python: { color: "bg-blue-500/20 text-blue-500 border-blue-500/30", label: "Python" },
+    java: { color: "bg-red-500/20 text-red-500 border-red-500/30", label: "Java" },
+    cpp: { color: "bg-indigo-500/20 text-indigo-500 border-indigo-500/30", label: "C++" },
+    default: { color: "bg-slate-500/20 text-slate-500 border-slate-500/30", label: "Unknown" }
+  };
+
+  const config = langConfig[language] || langConfig.default;
+
+  return (
+    <div className={`mt-2 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md border font-mono text-xs font-bold ${config.color}`}>
+      <Code2 size={12} />
+      <span>{config.label}</span>
+    </div>
+  );
+}
diff --git a/src/app/components/ui/spectator/PlayerSpeedometer.jsx b/src/app/components/ui/spectator/PlayerSpeedometer.jsx
new file mode 100644
index 000000000..451396f48
--- /dev/null
+++ b/src/app/components/ui/spectator/PlayerSpeedometer.jsx
@@ -0,0 +1,19 @@
+export default function PlayerSpeedometer({ cpm = 0 }) {
+  // max speed approx 400 cpm
+  const percentage = Math.min((cpm / 400) * 100, 100);
+  
+  return (
+    <div className="mt-4 w-full max-w-[200px] flex flex-col items-center">
+      <div className="flex justify-between w-full text-[10px] font-bold text-slate-500 mb-1">
+        <span>Speed</span>
+        <span className="text-primary">{cpm} CPM</span>
+      </div>
+      <div className="h-2 w-full bg-slate-200 dark:bg-neutral-800 rounded-full overflow-hidden">
+        <div 
+          className="h-full bg-primary transition-all duration-300"
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/ui/spectator/PlayerTestProgress.jsx b/src/app/components/ui/spectator/PlayerTestProgress.jsx
new file mode 100644
index 000000000..73bd67183
--- /dev/null
+++ b/src/app/components/ui/spectator/PlayerTestProgress.jsx
@@ -0,0 +1,31 @@
+export default function PlayerTestProgress({ passed, total, failedAttempts, status }) {
+  if (status !== "Testing Code..." && passed === 0 && total === 1 && failedAttempts === 0) {
+    return null; // Hasn't tested yet
+  }
+
+  const percentage = Math.round((passed / total) * 100) || 0;
+  
+  return (
+    <div className="mt-4 w-full max-w-[200px] flex flex-col items-center bg-white dark:bg-[#111116] border border-slate-200 dark:border-neutral-800 p-3 rounded-xl shadow-sm">
+      <div className="flex justify-between w-full text-[10px] font-bold text-slate-500 mb-1">
+        <span>Tests</span>
+        <span className={percentage === 100 ? "text-emerald-500" : "text-amber-500"}>
+          {passed}/{total}
+        </span>
+      </div>
+      
+      <div className="h-2 w-full bg-slate-200 dark:bg-neutral-800 rounded-full overflow-hidden mb-2">
+        <div 
+          className={`h-full transition-all duration-500 ${percentage === 100 ? "bg-emerald-500" : "bg-amber-500"}`}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+
+      {failedAttempts > 0 && (
+        <div className="text-[10px] font-bold text-red-500 bg-red-500/10 px-2 py-0.5 rounded-full">
+          Failed Attempts: {failedAttempts}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/components/visualizer/DiscussionThread.jsx b/src/app/components/visualizer/DiscussionThread.jsx
new file mode 100644
index 000000000..eaf1e7efc
--- /dev/null
+++ b/src/app/components/visualizer/DiscussionThread.jsx
@@ -0,0 +1,85 @@
+'use client';
+import { useState, useEffect } from 'react';
+
+export default function DiscussionThread({ topicId }) {
+  const [comments, setComments] = useState([]);
+  const [newComment, setNewComment] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(`/api/comments/${encodeURIComponent(topicId)}`)
+      .then(res => res.json())
+      .then(data => {
+        setComments(data.comments || []);
+        setLoading(false);
+      })
+      .catch(err => {
+        console.error(err);
+        setLoading(false);
+      });
+  }, [topicId]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!newComment.trim()) return;
+
+    try {
+      const res = await fetch('/api/comments', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ topic_id: topicId, content: newComment })
+      });
+      const data = await res.json();
+      if (data.comment) {
+        setComments([data.comment, ...comments]);
+        setNewComment('');
+      } else if (data.error) {
+        alert(data.error);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <div className="mt-12 max-w-4xl mx-auto dark:text-white px-4 pb-12 w-full">
+      <h2 className="text-2xl font-bold mb-6">Community Discussion</h2>
+      
+      <form onSubmit={handleSubmit} className="mt-4 flex gap-4 mb-8">
+        <input 
+          type="text" 
+          value={newComment}
+          onChange={(e) => setNewComment(e.target.value)}
+          placeholder="Ask a question..." 
+          className="flex-1 p-3 border rounded dark:bg-gray-800 dark:border-gray-700 text-black dark:text-white" 
+        />
+        <button type="submit" className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded transition-colors">Post</button>
+      </form>
+
+      {loading ? (
+        <p>Loading comments...</p>
+      ) : comments.length === 0 ? (
+        <p className="text-gray-500">No comments yet. Be the first to start the discussion!</p>
+      ) : (
+        <div className="space-y-4">
+          {comments.map(comment => (
+            <div key={comment.id} className="p-4 border rounded dark:border-gray-700 bg-gray-50 dark:bg-[#1a1a1a]">
+              <div className="flex items-center gap-2 mb-2">
+                {comment.user_profiles?.avatar_url ? (
+                  <img src={comment.user_profiles.avatar_url} alt="avatar" className="w-8 h-8 rounded-full" />
+                ) : (
+                  <div className="w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center font-bold">
+                    {comment.user_profiles?.full_name?.[0] || 'U'}
+                  </div>
+                )}
+                <span className="font-semibold">{comment.user_profiles?.full_name || 'Anonymous User'}</span>
+                <span className="text-sm text-gray-500">{new Date(comment.created_at).toLocaleDateString()}</span>
+              </div>
+              <p>{comment.content}</p>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/contactus/page.jsx b/src/app/contactus/page.jsx
new file mode 100644
index 000000000..592697ab6
--- /dev/null
+++ b/src/app/contactus/page.jsx
@@ -0,0 +1,11 @@
+import ContactUs from '@/app/components/contactus'
+
+export const metadata = {
+  title: 'ContactUs | AlgoBuddy',
+  description:
+    'Get in touch with the AlgoBuddy team for support, feedback, collaboration, or questions about the platform.',
+}
+
+export default function ContactUsPage() {
+  return <ContactUs />
+}
diff --git a/src/app/data/codeOfConductData.js b/src/app/data/codeOfConductData.js
new file mode 100644
index 000000000..f7e3d2c17
--- /dev/null
+++ b/src/app/data/codeOfConductData.js
@@ -0,0 +1,71 @@
+export const codeOfConductSections = [
+  {
+    id: '1',
+    title: 'Our Pledge',
+    points: [
+      'We as contributors and maintainers pledge to make participation in this project a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.',
+      'We are committed to creating an open, welcoming, inclusive, and respectful environment for everyone.',
+    ],
+  },
+  {
+    id: '2',
+    title: 'Our Standards',
+    data: 'Examples of behavior that contributes to a positive environment include:',
+    points: [
+      'Being respectful and inclusive',
+      'Using welcoming and constructive language',
+      'especting differing viewpoints and experiences',
+      'Gracefully accepting constructive criticism',
+      'Helping other contributors and community members',
+    ],
+    data: 'Examples of unacceptable behavior include:',
+    points: [
+      'Harassment or discriminatory language',
+      'Personal attacks or trolling',
+      'Public or private harassment',
+      'Publishing others’ private information without permission',
+      'Any conduct that could be considered inappropriate in a professional setting',
+    ],
+  },
+  {
+    id: '3',
+    title: 'Contributor Responsibilities',
+    data: 'Contributors are expected to:',
+    points: [
+      'Follow project guidelines',
+      'Maintain respectful communication',
+      'Focus on collaboration and learning',
+      'Report inappropriate behavior if encountered',
+    ],
+  },
+  {
+    id: '4',
+    title: 'Enforcement',
+    data: 'Project maintainers are responsible for clarifying and enforcing standards of acceptable behavior and may take appropriate corrective action in response to any instances of unacceptable behavior.',
+  },
+  {
+    id: '5',
+    title: 'Reporting Issues',
+    data: [
+      'If you experience or witness unacceptable behavior, please report it to the project maintainers through the repository issue section or the official project contact channels.',
+      'All complaints will be reviewed and investigated promptly and fairly.',
+    ],
+  },
+  {
+    id: '6',
+    title: 'Your Choices',
+    data: 'This Code of Conduct applies within all project spaces, including:',
+    points: [
+      'GitHub repositories',
+      'Discussions',
+      'Pull requests',
+      'Community chats',
+      'Social platforms related to the project',
+    ],
+  },
+  {
+    id: '7',
+    title: 'Attribution',
+    data: 'This Code of Conduct is inspired by the Contributor Covenant, version 2.1.',
+  }
+]
diff --git a/src/app/error.jsx b/src/app/error.jsx
new file mode 100644
index 000000000..9983fd0b3
--- /dev/null
+++ b/src/app/error.jsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { AlertTriangle, RefreshCw } from "lucide-react";
+
+export default function Error({ error, reset }) {
+  const fallbackMessage = "An unexpected error occurred. Please try again.";
+  const errorMessage =
+    process.env.NODE_ENV === "production"
+      ? fallbackMessage
+      : error?.message || fallbackMessage;
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-6 bg-white px-4 dark:bg-[var(--udemy-dark-bg)]">
+      <div className="flex flex-col items-center gap-4 text-center">
+        <div className="rounded-full bg-[var(--color-danger)]/10 p-4">
+          <AlertTriangle className="h-10 w-10 text-[var(--color-danger)]" />
+        </div>
+        <h2 className="text-xl font-bold text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)]">
+          Something went wrong!
+        </h2>
+        <p className="max-w-md text-sm text-[var(--udemy-muted)] dark:text-[var(--udemy-dark-muted)]">
+          {errorMessage}
+        </p>
+        <button
+          onClick={reset}
+          className="btn-base bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-dark)]"
+        >
+          <RefreshCw className="h-4 w-4" />
+          Try again
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/faq/page.jsx b/src/app/faq/page.jsx
new file mode 100644
index 000000000..ad41c1227
--- /dev/null
+++ b/src/app/faq/page.jsx
@@ -0,0 +1,11 @@
+import FAQSection from '@/app/components/faq'
+
+export const metadata = {
+  title: 'FAQ | AlgoBuddy',
+  description:
+    'Find answers to common questions about AlgoBuddy, its visualizations, and how to use the platform.',
+}
+
+export default function FAQPage() {
+  return <FAQSection />
+}
diff --git a/src/app/globals.css b/src/app/globals.css
new file mode 100644
index 000000000..eab122f7f
--- /dev/null
+++ b/src/app/globals.css
@@ -0,0 +1,453 @@
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ── Udemy Design System ── */
+:root {
+  --udemy-purple:       #a435f0;
+  --udemy-purple-dark:  #7d2be0;
+  --udemy-purple-light: #c27cf7;
+  --udemy-yellow:       #f4c430;
+  --udemy-bg:           #ffffff;
+  --udemy-surface:      #f7f9fa;
+  --udemy-border:       #d1d7dc;
+  --udemy-text:         #1c1d1f;
+  --udemy-muted:        #6a6f73;
+  --udemy-dark-bg:      #1c1d1f;
+  --udemy-dark-surface: #2d2f31;
+  --udemy-dark-border:  #3e4143;
+  --udemy-dark-text:    #f7f9fa;
+  --udemy-dark-muted:   #9e9e9e;
+}
+
+/* ── AlgoBuddy Design Tokens ── */
+:root {
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f5f5f5;
+  --color-neutral-200: #e5e5e5;
+  --color-neutral-300: #d4d4d4;
+  --color-neutral-400: #a3a3a3;
+  --color-neutral-500: #737373;
+  --color-neutral-600: #525252;
+  --color-neutral-700: #404040;
+  --color-neutral-800: #262626;
+  --color-neutral-900: #171717;
+  --color-neutral-950: #0f0f0f;
+
+  --color-primary: #a435f0;
+  --color-primary-dark: #7d2be0;
+  --color-primary-light: #c27cf7;
+
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-danger: #ef4444;
+
+  --color-border: #d1d7dc;
+  --color-muted: #6a6f73;
+
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+
+  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
+  --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
+  --shadow-btn: 0 1px 2px rgba(0,0,0,0.05);
+  --shadow-elevated: 0 8px 24px rgba(0,0,0,0.12);
+
+  --motion-fast: 150ms;
+  --motion-normal: 250ms;
+  --motion-slow: 350ms;
+  --ease-standard: ease;
+}
+
+.dark {
+  --color-border: #3e4143;
+  --color-muted: #9e9e9e;
+
+  --shadow-card: 0 1px 3px rgba(0,0,0,0.3);
+  --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.4);
+  --shadow-btn: 0 1px 2px rgba(0,0,0,0.2);
+  --shadow-elevated: 0 8px 24px rgba(0,0,0,0.5);
+}
+
+body {
+  font-family: var(--font-source-sans-3), 'Source Sans 3', 'Source Sans Pro', ui-sans-serif, system-ui, sans-serif;
+  color: var(--udemy-text);
+  background: var(--udemy-bg);
+  transition: background-color var(--motion-normal) var(--ease-standard), color var(--motion-normal) var(--ease-standard);
+}
+
+.landing-page h1, .landing-page h2, .landing-page h3, .landing-page h4 {
+  font-family: var(--font-source-serif-4), 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
+  font-weight: 700;
+}
+
+.visualizer-page h1,
+.visualizer-page h2,
+.visualizer-page h3,
+.visualizer-page h4,
+.visualizer-page h5,
+.visualizer-page h6 {
+  font-family: var(--font-source-sans-3), 'Source Sans 3', 'Source Sans Pro', ui-sans-serif, system-ui, 'sans-serif';
+  font-weight: 700;
+}
+
+/* Navbar Brand Typography */
+.brand-logo {
+  font-family: var(--font-inter), 'Inter', ui-sans-serif, system-ui, sans-serif;
+  font-weight: 900;
+  letter-spacing: -0.04em;
+}
+
+.dark body {
+  color: var(--udemy-dark-text);
+  background: var(--udemy-dark-bg);
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+@keyframes float {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.animate-float {
+  animation: float 4s ease-in-out infinite;
+}
+
+.animation-delay-1000 {
+  animation-delay: 1s;
+}
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+
+@keyframes float-slow {
+
+  0%,
+  100% {
+    transform: translateY(0) translateX(0);
+  }
+
+  50% {
+    transform: translateY(-20px) translateX(10px);
+  }
+}
+
+@keyframes float-slower {
+
+  0%,
+  100% {
+    transform: translateY(0) translateX(0);
+  }
+
+  50% {
+    transform: translateY(20px) translateX(-10px);
+  }
+}
+
+.animate-float-slow {
+  animation: float-slow 8s ease-in-out infinite;
+}
+
+.animate-float-slower {
+  animation: float-slower 10s ease-in-out infinite;
+}
+
+@keyframes draw-loop {
+  0% {
+    stroke-dashoffset: 100;
+  }
+  50% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: 100;
+  }
+}
+
+.animate-draw .path {
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  animation: draw-loop 2s ease-in-out infinite;
+}
+
+/* 404 Animation styles */
+@keyframes bounce-pin-1 {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+.animate-bounce-pin-1 { animation: bounce-pin-1 2s ease-in-out infinite; }
+
+@keyframes bounce-pin-2 {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+.animate-bounce-pin-2 { animation: bounce-pin-2 2.5s ease-in-out infinite; }
+
+@keyframes spark {
+  0%, 100% { opacity: 0; }
+  50% { opacity: 1; }
+}
+.animate-spark-1 { animation: spark 3s ease-in-out infinite; }
+.animate-spark-2 { animation: spark 3.5s ease-in-out infinite; }
+
+@keyframes swing {
+  0%, 100% { transform: translateX(-50%) rotate(-5deg); }
+  50% { transform: translateX(-50%) rotate(5deg); }
+}
+.animate-swing { animation: swing 4s ease-in-out infinite; }
+
+@keyframes pulse {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+
+@keyframes live-pulse {
+  0%, 100% { opacity: 0.6; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.08); }
+}
+.animate-live-pulse {
+  animation: live-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes zap-pulse {
+  0%, 100% { opacity: 0; transform: translateX(-50%) scale(1); }
+  50% { opacity: 1; transform: translateX(-50%) scale(1.2); }
+}
+.animate-zap-pulse {
+  animation: zap-pulse 3s ease-in-out infinite;
+}
+
+/* Page load animation */
+.page-loaded .page-loaded\:opacity-100 { opacity: 1; }
+.page-loaded .page-loaded\:translate-y-0 { transform: translateY(0); }
+
+@keyframes bot-vibe {
+  0%, 100% {
+    transform: translateY(-1px) rotate(-1deg);
+  }
+  50% {
+    transform: translateY(1px) rotate(1deg);
+  }
+}
+
+.glow-btn .glow-border {
+  animation: shimmer-glow 2s ease-in-out infinite;
+  background: linear-gradient(45deg, #3b82f6, #60a5fa);
+  opacity: 0.4;
+  filter: blur(10px);
+}
+
+.bot-wiggle {
+  animation: bot-vibe 1s infinite;
+}
+
+@layer components {
+  .container-app {
+    @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
+  }
+
+  .section-app {
+    @apply py-12 sm:py-16 lg:py-20;
+  }
+
+  .card-surface {
+    @apply rounded-[var(--radius-md)] border bg-white shadow-[var(--shadow-card)]
+           dark:bg-[var(--udemy-dark-surface)] dark:border-[var(--color-border)];
+  }
+
+  .btn-base {
+    @apply inline-flex items-center justify-center gap-2 rounded-[var(--radius-full)]
+           px-6 py-2.5 text-sm font-semibold transition-all duration-[var(--motion-fast)]
+           focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]
+           focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+    transition-timing-function: var(--ease-standard);
+  }
+
+  .focus-ring {
+    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]
+           focus-visible:ring-offset-2;
+  }
+
+  .skeleton-shimmer {
+    @apply animate-pulse rounded-[var(--radius-md)] bg-[var(--color-neutral-200)];
+  }
+}
+
+.dark .skeleton-shimmer {
+  background-color: var(--color-neutral-700);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+/* ── Force hljs code blocks to always render with dark-theme colors ── */
+/* This prevents the page's light-mode body color from cascading into   */
+/* syntax-highlighted code, keeping atom-one-dark colors consistent.    */
+.hljs-force-dark {
+  color-scheme: dark;
+  color: #abb2bf !important; /* atom-one-dark base text */
+}
+.hljs-force-dark .hljs {
+  background: transparent !important;
+  color: #abb2bf !important;
+}
+/* Skeleton Loader */
+.skeleton-shimmer {
+  background: linear-gradient(
+    90deg,
+    #e0e0e0 25%,
+    #f5f5f5 50%,
+    #e0e0e0 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 4px;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Custom Modern Scrollbar */
+@layer utilities {
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--color-primary);
+    border-radius: var(--radius-full);
+    border: 2px solid transparent;
+    background-clip: padding-box;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-primary-dark);
+  }
+
+  /* Firefox Support */
+  html {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-primary) transparent;
+  }
+}
+
+/* ── Visualizer Color Themes ── */
+:root {
+  /* Default Theme (matches previous hardcoded values) */
+  --vis-unvisited-fill: #111111;
+  --vis-unvisited-stroke: #22c55e;
+  --vis-visiting-fill: #854d0e;
+  --vis-visiting-stroke: #f97316;
+  --vis-visited-fill: #14532d;
+  --vis-visited-stroke: #22c55e;
+  
+  --vis-active-node-fill: var(--color-primary);
+  --vis-active-node-stroke: var(--color-primary);
+  --vis-active-text-fill: #ffffff;
+  
+  --vis-inactive-node-fill: #ffffff;
+  --vis-inactive-node-stroke: var(--color-neutral-300);
+  --vis-inactive-text-fill: var(--color-surface-800);
+
+  --vis-path-fill: #a855f7;
+  --vis-path-stroke: #a855f7;
+  --vis-goal-fill: #ef4444;
+  --vis-goal-stroke: #ef4444;
+  --vis-start-fill: #22c55e;
+  --vis-start-stroke: #22c55e;
+  --vis-open-fill: #eab308;
+  --vis-open-stroke: #eab308;
+  --vis-visited-astar-fill: #3b82f6;
+  --vis-visited-astar-stroke: #3b82f6;
+}
+
+[data-vis-theme="high-contrast"] {
+  --vis-unvisited-fill: #ffffff;
+  --vis-unvisited-stroke: #000000;
+  --vis-visiting-fill: #ffeb3b;
+  --vis-visiting-stroke: #000000;
+  --vis-visited-fill: #4caf50;
+  --vis-visited-stroke: #000000;
+  
+  --vis-active-node-fill: #000000;
+  --vis-active-node-stroke: #ffffff;
+  --vis-active-text-fill: #ffffff;
+  
+  --vis-inactive-node-fill: #ffffff;
+  --vis-inactive-node-stroke: #000000;
+  --vis-inactive-text-fill: #000000;
+
+  --vis-path-fill: #9c27b0;
+  --vis-path-stroke: #000000;
+  --vis-goal-fill: #f44336;
+  --vis-goal-stroke: #000000;
+  --vis-start-fill: #4caf50;
+  --vis-start-stroke: #000000;
+  --vis-open-fill: #ffeb3b;
+  --vis-open-stroke: #000000;
+  --vis-visited-astar-fill: #2196f3;
+  --vis-visited-astar-stroke: #000000;
+}
+
+[data-vis-theme="protanopia-safe"] {
+  /* Deuteranopia and Protanopia (Red/Green blindness) */
+  --vis-unvisited-fill: #e0e0e0;
+  --vis-unvisited-stroke: #1e88e5; /* Blue */
+  --vis-visiting-fill: #ffb300; /* Amber */
+  --vis-visiting-stroke: #ffb300;
+  --vis-visited-fill: #004d40; /* Dark Teal */
+  --vis-visited-stroke: #004d40;
+  
+  --vis-active-node-fill: #1e88e5;
+  --vis-active-node-stroke: #1e88e5;
+  --vis-active-text-fill: #ffffff;
+  
+  --vis-inactive-node-fill: #ffffff;
+  --vis-inactive-node-stroke: #9e9e9e;
+  --vis-inactive-text-fill: #212121;
+
+  --vis-path-fill: #8e24aa; /* Purple */
+  --vis-path-stroke: #8e24aa;
+  --vis-goal-fill: #d81b60; /* Pinkish-Red */
+  --vis-goal-stroke: #d81b60;
+  --vis-start-fill: #1e88e5; /* Blue */
+  --vis-start-stroke: #1e88e5;
+  --vis-open-fill: #ffc107; /* Yellow */
+  --vis-open-stroke: #ffc107;
+  --vis-visited-astar-fill: #039be5; /* Light Blue */
+  --vis-visited-astar-stroke: #039be5;
+}
diff --git a/src/app/hooks/useAnimationTimeline.js b/src/app/hooks/useAnimationTimeline.js
new file mode 100644
index 000000000..1d5fde960
--- /dev/null
+++ b/src/app/hooks/useAnimationTimeline.js
@@ -0,0 +1,95 @@
+// app/hooks/useAnimationTimeline.js
+// Fix for Issue #2693: Shared GSAP timeline management hook.
+// Prevents interleaved timelines when user clicks "Run" during an animation.
+
+import { useRef, useState, useCallback } from 'react';
+import gsap from 'gsap';
+
+/**
+ * useAnimationTimeline
+ *
+ * A custom React hook that manages a single GSAP timeline per visualizer.
+ * Guarantees the previous timeline is killed before a new one starts,
+ * preventing the visual corruption caused by interleaved timelines.
+ *
+ * Usage:
+ *   const { timelineRef, isRunning, startAnimation, resetAnimation } = useAnimationTimeline();
+ */
+export function useAnimationTimeline() {
+  // Stores the current GSAP timeline — useRef so it persists across renders
+  // without causing re-renders when it changes.
+  const timelineRef = useRef(null);
+
+  // Tracks whether an animation is currently playing.
+  // Used to disable the "Run" button during playback.
+  const [isRunning, setIsRunning] = useState(false);
+
+  /**
+   * Call this at the START of every animation function.
+   * It kills any existing timeline, then creates and returns a fresh one.
+   *
+   * @returns {GSAPTimeline} A new, clean GSAP timeline ready to use.
+   */
+  const startAnimation = useCallback(() => {
+    // ── THE CORE FIX ────────────────────────────────────────────────────────
+    // Kill the previous timeline if one exists.
+    // Without this, the old timeline keeps running in the background
+    // and fights the new one for control of the same DOM elements.
+    if (timelineRef.current) {
+      timelineRef.current.kill();
+      timelineRef.current = null;
+    }
+    // ────────────────────────────────────────────────────────────────────────
+
+    // Create a fresh timeline
+    const tl = gsap.timeline({
+      onComplete: () => {
+        // When animation finishes naturally, mark as no longer running
+        setIsRunning(false);
+      },
+    });
+
+    // Store it so we can kill it later if needed
+    timelineRef.current = tl;
+
+    // Mark animation as active — this disables the Run button in the UI
+    setIsRunning(true);
+
+    return tl;
+  }, []);
+
+  /**
+   * Call this when user clicks "Reset" or "Randomize Array".
+   * Kills the timeline AND uses GSAP .set() to instantly snap
+   * all bars back to their original visual state.
+   *
+   * @param {Array<HTMLElement>} elements - The bar DOM elements to reset.
+   * @param {Object} initialStyles - CSS properties to reset to (e.g. { backgroundColor: '#8b5cf6', height: '...px' })
+   */
+  const resetAnimation = useCallback((elements = [], initialStyles = {}) => {
+    // Kill timeline immediately
+    if (timelineRef.current) {
+      timelineRef.current.kill();
+      timelineRef.current = null;
+    }
+
+    // Snap all elements back to their starting state instantly
+    // .set() applies styles with zero duration — no animation, just instant reset
+    if (elements.length > 0) {
+      gsap.set(elements, {
+        ...initialStyles,
+        clearProps: 'all',   // Clears any GSAP-applied inline styles
+      });
+    }
+
+    // Mark animation as stopped — re-enables the Run button
+    setIsRunning(false);
+  }, []);
+
+  return {
+    timelineRef,   // The current GSAP timeline (ref)
+    isRunning,     // Boolean — true while animation plays
+    startAnimation,  // Call this to kill old + create new timeline
+    resetAnimation,  // Call this on Reset/Randomize
+  };
+}
diff --git a/src/app/hooks/useApi.js b/src/app/hooks/useApi.js
new file mode 100644
index 000000000..912f484b0
--- /dev/null
+++ b/src/app/hooks/useApi.js
@@ -0,0 +1,22 @@
+"use client";
+import { useState, useEffect } from "react";
+
+export function useApi(fetcher, deps = []) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    Promise.resolve(fetcher())
+      .then((d) => { if (!cancelled) setData(d); })
+      .catch((e) => { if (!cancelled) setError(e); })
+      .finally(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  return { data, loading, error };
+}
diff --git a/src/app/hooks/useArenaProfile.js b/src/app/hooks/useArenaProfile.js
new file mode 100644
index 000000000..f348f8bd7
--- /dev/null
+++ b/src/app/hooks/useArenaProfile.js
@@ -0,0 +1,161 @@
+import { useState, useEffect } from 'react';
+import { supabase } from '@/lib/supabase';
+
+function springBootBase() {
+  if (process.env.NEXT_PUBLIC_SPRING_BOOT_API_URL) {
+    return process.env.NEXT_PUBLIC_SPRING_BOOT_API_URL;
+  }
+  if (typeof window !== "undefined") {
+    if (
+      window.location.hostname === "localhost" ||
+      window.location.hostname === "127.0.0.1" ||
+      window.location.hostname.startsWith("192.168.")
+    ) {
+      return `http://${window.location.hostname}:8080`;
+    }
+  }
+  return "https://algobuddy-backend-7iwv.onrender.com";
+}
+
+export function useArenaProfile(user) {
+  const [profile, setProfile] = useState(null);
+  const [leaderboard, setLeaderboard] = useState([]);
+  const [matchHistory, setMatchHistory] = useState([]);
+  const [dailyChallenge, setDailyChallenge] = useState(null);
+  const [loadingProfile, setLoadingProfile] = useState(true);
+  const [loadingLeaderboard, setLoadingLeaderboard] = useState(true);
+  const [loadingHistory, setLoadingHistory] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    async function fetchProfile() {
+      if (!user) {
+        setProfile(null);
+        setLoadingProfile(false);
+        return;
+      }
+      try {
+        setLoadingProfile(true);
+        const { data: sessionData } = await supabase.auth.getSession();
+        const token = sessionData?.session?.access_token;
+
+        if (!token) {
+          throw new Error("No access token found");
+        }
+
+        const headers = {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        };
+
+        const res = await fetch(`${springBootBase()}/api/v1/arena/profile`, { headers });
+        if (!res.ok) {
+          throw new Error(`Error fetching profile: ${res.statusText}`);
+        }
+        
+        const data = await res.json();
+        setProfile(data);
+
+        // Fetch match history
+        try {
+          setLoadingHistory(true);
+          const historyRes = await fetch(`${springBootBase()}/api/v1/arena/history`, { headers });
+          if (historyRes.ok) {
+            const historyData = await historyRes.json();
+            setMatchHistory(historyData);
+          }
+        } catch (historyErr) {
+          console.warn("Failed to fetch match history:", historyErr.message);
+        } finally {
+          setLoadingHistory(false);
+        }
+
+        // Fetch daily challenge
+        try {
+          const dailyRes = await fetch(`${springBootBase()}/api/v1/arena/daily-challenge`, { headers });
+          if (dailyRes.ok) {
+            const dailyData = await dailyRes.json();
+            setDailyChallenge(dailyData);
+          }
+        } catch (dailyErr) {
+          console.warn("Failed to fetch daily challenge:", dailyErr.message);
+        }
+
+      } catch (err) {
+        console.warn("Failed to fetch arena profile:", err.message);
+        setError(err.message);
+      } finally {
+        setLoadingProfile(false);
+      }
+    }
+
+    fetchProfile();
+  }, [user]);
+
+  useEffect(() => {
+    async function fetchLeaderboard() {
+      try {
+        setLoadingLeaderboard(true);
+        // Leaderboard might be public, but let's send token if we have it
+        const headers = {
+          "Content-Type": "application/json",
+        };
+        const { data: sessionData } = await supabase.auth.getSession();
+        const token = sessionData?.session?.access_token;
+        if (token) {
+            headers["Authorization"] = `Bearer ${token}`;
+        }
+
+        const res = await fetch(`${springBootBase()}/api/v1/arena/leaderboard`, { headers });
+        if (!res.ok) {
+          throw new Error(`Error fetching leaderboard: ${res.statusText}`);
+        }
+        
+        const data = await res.json();
+        
+        // Enrich data for frontend UI enhancements
+        const enrichedData = data.map((user, index) => {
+          const rank = index + 1;
+          
+          let trend = "same";
+          let trendValue = 0;
+          if (rank % 3 === 0) { trend = "up"; trendValue = (rank % 5) + 1; }
+          else if (rank % 4 === 0) { trend = "down"; trendValue = (rank % 3) + 1; }
+          if (rank === 1) trend = "hot";
+          
+          let tier = "Bronze";
+          if (user.xp >= 10000) tier = "Grandmaster";
+          else if (user.xp >= 5000) tier = "Diamond";
+          else if (user.xp >= 2500) tier = "Gold";
+          else if (user.xp >= 1000) tier = "Silver";
+          
+          const winRate = 45 + (rank % 40) + ((user.xp || 0) % 10);
+          
+          const langs = ["JavaScript", "Python", "Java", "C++", "Go", "Rust"];
+          const userLangs = [langs[rank % langs.length], langs[(rank + 2) % langs.length]];
+          
+          return {
+            ...user,
+            rank,
+            trend,
+            trendValue,
+            tier,
+            winRate: Math.min(100, winRate),
+            topLanguages: userLangs
+          };
+        });
+        
+        setLeaderboard(enrichedData);
+      } catch (err) {
+        console.warn("Failed to fetch leaderboard:", err.message);
+        // Silently fail leaderboard so it doesn't break the page
+      } finally {
+        setLoadingLeaderboard(false);
+      }
+    }
+
+    fetchLeaderboard();
+  }, []);
+
+  return { profile, leaderboard, matchHistory, dailyChallenge, loadingProfile, loadingLeaderboard, loadingHistory, error };
+}
diff --git a/src/app/hooks/useBookmark.js b/src/app/hooks/useBookmark.js
new file mode 100644
index 000000000..1acbe61b5
--- /dev/null
+++ b/src/app/hooks/useBookmark.js
@@ -0,0 +1,40 @@
+"use client";
+import { useState, useEffect } from "react";
+import { persistence } from "@/lib/persistence";
+
+export function useBookmark() {
+  const [bookmarks, setBookmarks] = useState([]);
+
+  useEffect(() => {
+    persistence.get('BOOKMARKS').then((stored) => {
+      if (stored) setBookmarks(prev => prev.length === 0 ? stored : prev);
+    });
+  }, []);
+
+  const addBookmark = (item) => {
+    setBookmarks((prev) => {
+      if (prev.find((i) => i.path === item.path)) return prev;
+      const updated = [...prev, item];
+      persistence.set('BOOKMARKS', updated);
+      return updated;
+    });
+  };
+
+  const removeBookmark = (path) => {
+    setBookmarks((prev) => {
+      const updated = prev.filter((i) => i.path !== path);
+      persistence.set('BOOKMARKS', updated);
+      return updated;
+    });
+  };
+
+  const isBookmarked = (path) =>
+    bookmarks.some((i) => i.path === path);
+
+  const clearBookmarks = () => {
+    persistence.remove('BOOKMARKS');
+    setBookmarks([]);
+  };
+
+  return { bookmarks, addBookmark, removeBookmark, isBookmarked, clearBookmarks };
+}
\ No newline at end of file
diff --git a/src/app/hooks/useGlobalKeyboardShortcuts.js b/src/app/hooks/useGlobalKeyboardShortcuts.js
new file mode 100644
index 000000000..a8d02b1b2
--- /dev/null
+++ b/src/app/hooks/useGlobalKeyboardShortcuts.js
@@ -0,0 +1,49 @@
+"use client";
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+export function useGlobalKeyboardShortcuts() {
+  const router = useRouter();
+
+  useEffect(() => {
+    function handleKeyDown(e) {
+      const activeElement = document.activeElement;
+      
+        const isTyping =
+        activeElement?.tagName === "INPUT" ||
+        activeElement?.tagName === "TEXTAREA" ||
+        activeElement?.isContentEditable;
+
+      if (isTyping && e.key !== "Escape") {
+        return;
+      }
+
+      if (e.key === "/" || ((e.metaKey || e.ctrlKey) && e.key?.toLowerCase() === "k")) {
+        e.preventDefault();
+        window.dispatchEvent(new CustomEvent("open-command-palette"));
+      }
+      else if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key?.toLowerCase() === "k") {
+        e.preventDefault();
+        window.dispatchEvent(new CustomEvent("toggle-notifications"));
+      }
+      else if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key?.toLowerCase() === "a") {
+        e.preventDefault();
+        router.push("/arena");
+      }
+      else if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key?.toLowerCase() === "b") {
+        e.preventDefault();
+        router.push("/practice");
+      }
+      else if (e.key === "?" && !e.metaKey && !e.ctrlKey) {
+        e.preventDefault();
+        window.dispatchEvent(new CustomEvent("toggle-shortcuts-modal"));
+      }
+      else if (e.key === "Escape") {
+        window.dispatchEvent(new CustomEvent("global-escape"));
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [router]);
+}
diff --git a/src/app/hooks/useGraphHistory.js b/src/app/hooks/useGraphHistory.js
new file mode 100644
index 000000000..4aee167b2
--- /dev/null
+++ b/src/app/hooks/useGraphHistory.js
@@ -0,0 +1,75 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+export default function useGraphHistory(initialNodes = [], initialEdges = [], maxHistory = 15) {
+  const [nodes, setNodesState] = useState(initialNodes);
+  const [edges, setEdgesState] = useState(initialEdges);
+  const [history, setHistory] = useState([{ nodes: initialNodes, edges: initialEdges }]);
+  const [pointer, setPointer] = useState(0);
+
+  const nodesRef = useRef(initialNodes);
+  const edgesRef = useRef(initialEdges);
+
+  useEffect(() => {
+    nodesRef.current = nodes;
+  }, [nodes]);
+
+  useEffect(() => {
+    edgesRef.current = edges;
+  }, [edges]);
+
+  const updateGraph = useCallback((nodesUpdater, edgesUpdater, replaceHistory = false) => {
+    let newNodes = typeof nodesUpdater === 'function' ? nodesUpdater(nodesRef.current) : nodesUpdater;
+    let newEdges = typeof edgesUpdater === 'function' ? edgesUpdater(edgesRef.current) : edgesUpdater;
+
+    if (newNodes === undefined) newNodes = nodesRef.current;
+    if (newEdges === undefined) newEdges = edgesRef.current;
+
+    setNodesState(newNodes);
+    setEdgesState(newEdges);
+
+    setHistory(prevHistory => {
+      let newHistory = replaceHistory ? prevHistory.slice(0, pointer) : prevHistory.slice(0, pointer + 1);
+      newHistory.push({ nodes: newNodes, edges: newEdges });
+      if (newHistory.length > maxHistory) {
+        newHistory.shift();
+      }
+      return newHistory;
+    });
+    setPointer(prev => replaceHistory ? prev : Math.min(prev + 1, maxHistory - 1));
+  }, [pointer, maxHistory]);
+
+  const setNodes = useCallback((nodesUpdater, replaceHistory = false) => updateGraph(nodesUpdater, undefined, replaceHistory), [updateGraph]);
+  const setEdges = useCallback((edgesUpdater, replaceHistory = false) => updateGraph(undefined, edgesUpdater, replaceHistory), [updateGraph]);
+
+  const undo = useCallback(() => {
+    if (pointer > 0) {
+      const prevPointer = pointer - 1;
+      setPointer(prevPointer);
+      const state = history[prevPointer];
+      setNodesState(state.nodes);
+      setEdgesState(state.edges);
+    }
+  }, [pointer, history]);
+
+  const redo = useCallback(() => {
+    if (pointer < history.length - 1) {
+      const nextPointer = pointer + 1;
+      setPointer(nextPointer);
+      const state = history[nextPointer];
+      setNodesState(state.nodes);
+      setEdgesState(state.edges);
+    }
+  }, [pointer, history]);
+
+  const canUndo = pointer > 0;
+  const canRedo = pointer < history.length - 1;
+
+  const resetGraph = useCallback((newNodes, newEdges) => {
+    setNodesState(newNodes);
+    setEdgesState(newEdges);
+    setHistory([{ nodes: newNodes, edges: newEdges }]);
+    setPointer(0);
+  }, []);
+
+  return { nodes, setNodes, edges, setEdges, updateGraph, undo, redo, canUndo, canRedo, resetGraph };
+}
diff --git a/src/app/hooks/useLocalStorage.js b/src/app/hooks/useLocalStorage.js
new file mode 100644
index 000000000..f7040ccf5
--- /dev/null
+++ b/src/app/hooks/useLocalStorage.js
@@ -0,0 +1,43 @@
+"use client";
+import { useState, useCallback } from "react";
+
+export function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = useState(() => {
+    if (typeof window === "undefined") return initialValue;
+    try {
+      const item = window.localStorage.getItem(key);
+      return item !== null ? JSON.parse(item) : initialValue;
+    } catch {
+      return initialValue;
+    }
+  });
+
+  const setValue = useCallback(
+    (value) => {
+      try {
+        const valueToStore =
+          value instanceof Function ? value(storedValue) : value;
+        setStoredValue(valueToStore);
+        if (typeof window !== "undefined") {
+          window.localStorage.setItem(key, JSON.stringify(valueToStore));
+        }
+      } catch (error) {
+        console.error(`Error setting localStorage key "${key}":`, error);
+      }
+    },
+    [key, storedValue]
+  );
+
+  const removeValue = useCallback(() => {
+    try {
+      setStoredValue(initialValue);
+      if (typeof window !== "undefined") {
+        window.localStorage.removeItem(key);
+      }
+    } catch (error) {
+      console.error(`Error removing localStorage key "${key}":`, error);
+    }
+  }, [key, initialValue]);
+
+  return [storedValue, setValue, removeValue];
+}
diff --git a/src/app/hooks/useMediaQuery.js b/src/app/hooks/useMediaQuery.js
new file mode 100644
index 000000000..cc16e21f3
--- /dev/null
+++ b/src/app/hooks/useMediaQuery.js
@@ -0,0 +1,23 @@
+"use client";
+import { useState, useEffect } from "react";
+
+export function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    let mq;
+    try {
+      mq = window.matchMedia(query);
+    } catch {
+      return;
+    }
+    setMatches(mq.matches);
+    function onChange(e) {
+      setMatches(e.matches);
+    }
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [query]);
+
+  return matches;
+}
diff --git a/src/app/hooks/useMySheet.js b/src/app/hooks/useMySheet.js
new file mode 100644
index 000000000..3d3eb6970
--- /dev/null
+++ b/src/app/hooks/useMySheet.js
@@ -0,0 +1,225 @@
+"use client";
+import { useState, useEffect, useCallback } from "react";
+import { useUser } from "@/features/user/UserContext";
+import { supabase } from "@/lib/supabase";
+import { api } from "@/lib/apiClient";
+
+// ─── Constants ───────────────────────────────────────────────────────────────
+const LOCAL_KEY = "algobuddy_my_sheet";
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function readLocal() {
+  try {
+    const raw = localStorage.getItem(LOCAL_KEY);
+    return raw ? JSON.parse(raw) : {};
+  } catch {
+    return {};
+  }
+}
+
+function writeLocal(data) {
+  try {
+    localStorage.setItem(LOCAL_KEY, JSON.stringify(data));
+  } catch {}
+}
+
+async function getAuthHeader() {
+  const { data: { session } } = await supabase.auth.getSession();
+  return session?.access_token ? { Authorization: `Bearer ${session.access_token}` } : {};
+}
+
+function isSpringBoot() {
+  return typeof window !== "undefined" && process.env.NEXT_PUBLIC_USE_SPRING_BOOT_API === "true";
+}
+
+function apiBase() {
+  return process.env.NEXT_PUBLIC_SPRING_BOOT_API_URL || "http://localhost:8080";
+}
+
+// ─── Server API ──────────────────────────────────────────────────────────────
+
+async function fetchMySheetFromServer() {
+  if (isSpringBoot()) {
+    const headers = await getAuthHeader();
+    if (!headers.Authorization) {
+      console.warn("[useMySheet] fetch skipped: No authorization token");
+      return null;
+    }
+    const res = await fetch(`${apiBase()}/api/v1/mysheet`, { headers });
+    if (!res.ok) {
+      console.error("[useMySheet] fetch failed with status:", res.status);
+      return null;
+    }
+    const data = await res.json();
+    // Expect: { items: [ { problemId, addedAt, note } ] }
+    const map = {};
+    (data.items || []).forEach((item) => {
+      map[item.problemId] = { addedAt: item.addedAt, note: item.note || "" };
+    });
+    return map;
+  }
+
+  // Supabase path via Next.js API route
+  try {
+    const data = await api.request("/api/mysheet");
+    return data.sheet || null;
+  } catch {
+    console.error("[useMySheet] fetch from NextJS failed");
+    return null;
+  }
+}
+
+async function addToSheetOnServer(problemId, note = "") {
+  if (isSpringBoot()) {
+    const headers = await getAuthHeader();
+    if (!headers.Authorization) return;
+    const res = await fetch(`${apiBase()}/api/v1/mysheet`, {
+      method: "POST",
+      headers: { ...headers, "Content-Type": "application/json" },
+      body: JSON.stringify({ problemId, note }),
+    });
+    return;
+  }
+
+  try {
+    await api.request("/api/mysheet", {
+      method: "POST",
+      body: { problemId, note },
+    });
+  } catch {}
+}
+
+async function removeFromSheetOnServer(problemId) {
+  if (isSpringBoot()) {
+    const headers = await getAuthHeader();
+    if (!headers.Authorization) return;
+    const res = await fetch(`${apiBase()}/api/v1/mysheet?problemId=${problemId}`, {
+      method: "DELETE",
+      headers,
+    });
+    return;
+  }
+
+  try {
+    await api.request(`/api/mysheet?problemId=${encodeURIComponent(problemId)}`, {
+      method: "DELETE",
+    });
+  } catch {}
+}
+
+// ─── Hook ────────────────────────────────────────────────────────────────────
+
+/**
+ * useMySheet
+ *
+ * Manages the user's personal curated problem sheet.
+ * - Local-first (instant UI, no flicker)
+ * - Syncs from server on mount when logged in
+ * - Bulk-syncs local entries to server after login
+ *
+ * Returns:
+ *  sheet         – { [problemId]: { addedAt, note } }
+ *  isInSheet(id) – boolean
+ *  addToSheet(id)
+ *  removeFromSheet(id)
+ *  sheetCount    – number of problems in sheet
+ *  loading
+ */
+export function useMySheet() {
+  const { user } = useUser();
+  const [sheet, setSheet] = useState({});
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    const init = async () => {
+      setLoading(true);
+      const local = readLocal();
+      if (!cancelled) setSheet(prev => Object.keys(prev).length === 0 ? local : prev);
+
+      if (!user) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const serverSheet = await fetchMySheetFromServer();
+        if (cancelled) return;
+
+        if (serverSheet) {
+          // DB is authoritative for logged-in users.
+          // 1. Find local-only items (added offline/before login) → sync them up
+          const toSync = Object.entries(local)
+            .filter(([id]) => !serverSheet[id])
+            .map(([id, entry]) => ({ problemId: id, note: entry.note || "" }));
+
+          for (const item of toSync) {
+            await addToSheetOnServer(item.problemId, item.note).catch(() => {});
+          }
+
+          // 2. After syncing local-only items up, build the authoritative state:
+          //    server data + local-only items that were just synced.
+          //    Items deleted in another browser (exist in local but not server) are dropped.
+          //    Use a functional updater to preserve any concurrent local mutations.
+          const authoritative = { ...serverSheet };
+          toSync.forEach(({ problemId }) => {
+            if (local[problemId]) authoritative[problemId] = local[problemId];
+          });
+
+          writeLocal(authoritative);
+          if (!cancelled) setSheet(prev => {
+            const merged = { ...authoritative };
+            for (const id of Object.keys(prev)) {
+              if (!merged[id]) merged[id] = prev[id];
+            }
+            return merged;
+          });
+        }
+      } catch (err) {
+        console.error("[useMySheet] sync failed:", err);
+      }
+
+      if (!cancelled) setLoading(false);
+    };
+
+    init();
+    return () => { cancelled = true; };
+  }, [user]);
+
+  const addToSheet = useCallback(
+    async (problemId, note = "") => {
+      const addedAt = new Date().toISOString();
+      const next = { ...sheet, [problemId]: { addedAt, note } };
+      setSheet(next);
+      writeLocal(next);
+
+      if (user) {
+        addToSheetOnServer(problemId, note).catch(() => {});
+      }
+    },
+    [sheet, user]
+  );
+
+  const removeFromSheet = useCallback(
+    async (problemId) => {
+      const next = { ...sheet };
+      delete next[problemId];
+      setSheet(next);
+      writeLocal(next);
+
+      if (user) {
+        removeFromSheetOnServer(problemId).catch(() => {});
+      }
+    },
+    [sheet, user]
+  );
+
+  const isInSheet = useCallback(
+    (problemId) => !!sheet[problemId],
+    [sheet]
+  );
+
+  const sheetCount = Object.keys(sheet).length;
+
+  return { sheet, isInSheet, addToSheet, removeFromSheet, sheetCount, loading };
+}
diff --git a/src/app/hooks/useNotesManager.js b/src/app/hooks/useNotesManager.js
new file mode 100644
index 000000000..b48e8a577
--- /dev/null
+++ b/src/app/hooks/useNotesManager.js
@@ -0,0 +1,171 @@
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+
+const TOPIC_MAPPING = {
+  array: "Array",
+  "linked-list": "Linked List",
+  linkedlist: "Linked List",
+  stack: "Stack",
+  queue: "Queue",
+  recursion: "Recursion",
+  tree: "Tree",
+  hashmap: "HashMap",
+  graph: "Graph",
+  ai: "AI Algorithms",
+  quiz: "Quiz",
+  dp: "Dynamic Programming"
+};
+
+const getUUIDPart = () => {
+  if (typeof globalThis !== "undefined" && globalThis.crypto?.randomUUID) {
+    return globalThis.crypto.randomUUID().split("-")[0];
+  }
+  return Math.random().toString(36).substring(2, 10);
+};
+
+export function useNotesManager() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [notes, setNotes] = useState([]);
+  const [activeNoteId, setActiveNoteId] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filterByTopicOnly, setFilterByTopicOnly] = useState(false);
+
+  // Load notes on mount
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    try {
+      const saved = localStorage.getItem("algobuddy-notebook");
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        setNotes(parsed);
+        if (parsed.length > 0) {
+          setActiveNoteId(parsed[0].id);
+        }
+      } else {
+        // Fallback/Migration: Check if there was an old single note
+        const oldNote = localStorage.getItem("algobuddy-notes");
+        if (oldNote && oldNote.trim()) {
+          const initialNote = {
+            id: "default-note",
+            title: "My First Note",
+            content: oldNote,
+            topic: "General",
+            createdAt: Date.now(),
+            updatedAt: Date.now()
+          };
+          setNotes([initialNote]);
+          setActiveNoteId(initialNote.id);
+          localStorage.setItem("algobuddy-notebook", JSON.stringify([initialNote]));
+        }
+      }
+    } catch (e) {
+      console.error("Failed to load notebook notes:", e);
+    }
+  }, []);
+
+  // Save notes on state change
+  const saveNotes = useCallback((newNotes) => {
+    setNotes(newNotes);
+    localStorage.setItem("algobuddy-notebook", JSON.stringify(newNotes));
+  }, []);
+
+  // Detect current topic from path or queries
+  const currentTopic = useMemo(() => {
+    if (!pathname) return "General";
+
+    // 1. Check path segments (e.g. /visualizer/array/... or /practice/tree)
+    const segments = pathname.split("/").filter(Boolean);
+    for (const segment of segments) {
+      const lower = segment.toLowerCase();
+      if (TOPIC_MAPPING[lower]) {
+        return TOPIC_MAPPING[lower];
+      }
+    }
+
+    // 2. Check search params (e.g. ?topic=Array)
+    if (searchParams) {
+      const topicParam = searchParams.get("topic") || searchParams.get("slug");
+      if (topicParam) {
+        const lower = topicParam.toLowerCase();
+        return TOPIC_MAPPING[lower] || topicParam.charAt(0).toUpperCase() + topicParam.slice(1);
+      }
+    }
+
+    return "General";
+  }, [pathname, searchParams]);
+
+  // Create Note
+  const createNote = useCallback((title = "Untitled Note", content = "") => {
+    const newNote = {
+      id: `note-${Date.now()}-${getUUIDPart()}`,
+      title: title.trim() || "Untitled Note",
+      content,
+      topic: currentTopic,
+      createdAt: Date.now(),
+      updatedAt: Date.now()
+    };
+    const updated = [newNote, ...notes];
+    saveNotes(updated);
+    setActiveNoteId(newNote.id);
+    return newNote;
+  }, [notes, currentTopic, saveNotes]);
+
+  // Update Note
+  const updateNote = useCallback((id, fields) => {
+    const updated = notes.map((note) => {
+      if (note.id === id) {
+        return {
+          ...note,
+          ...fields,
+          updatedAt: Date.now()
+        };
+      }
+      return note;
+    });
+    saveNotes(updated);
+  }, [notes, saveNotes]);
+
+  // Delete Note
+  const deleteNote = useCallback((id) => {
+    const updated = notes.filter((n) => n.id !== id);
+    saveNotes(updated);
+    if (activeNoteId === id) {
+      setActiveNoteId(updated.length > 0 ? updated[0].id : null);
+    }
+  }, [notes, activeNoteId, saveNotes]);
+
+  // Filtered notes list based on search and current topic toggle
+  const filteredNotes = useMemo(() => {
+    return notes.filter((note) => {
+      const matchesSearch =
+        note.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        note.content.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        note.topic.toLowerCase().includes(searchQuery.toLowerCase());
+
+      const matchesTopic = !filterByTopicOnly || note.topic === currentTopic;
+
+      return matchesSearch && matchesTopic;
+    });
+  }, [notes, searchQuery, filterByTopicOnly, currentTopic]);
+
+  const activeNote = useMemo(() => {
+    return notes.find((n) => n.id === activeNoteId) || null;
+  }, [notes, activeNoteId]);
+
+  return {
+    notes,
+    activeNote,
+    filteredNotes,
+    activeNoteId,
+    setActiveNoteId,
+    searchQuery,
+    setSearchQuery,
+    filterByTopicOnly,
+    setFilterByTopicOnly,
+    currentTopic,
+    createNote,
+    updateNote,
+    deleteNote
+  };
+}
diff --git a/src/app/hooks/usePlayback.js b/src/app/hooks/usePlayback.js
new file mode 100644
index 000000000..6a486a572
--- /dev/null
+++ b/src/app/hooks/usePlayback.js
@@ -0,0 +1,90 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+
+export default function usePlayback(initialSpeed = 1) {
+  const [isPaused, setIsPaused] = useState(false);
+  const [speed, setSpeed] = useState(initialSpeed);
+
+  const isPausedRef = useRef(false);
+  const speedRef = useRef(initialSpeed);
+
+  // Pause resolution for async/await (Sorting algorithms)
+  const pausePromiseRef = useRef(null);
+  const pauseResolveRef = useRef(null);
+
+  const internalSetIsPaused = useCallback((nextPaused) => {
+    setIsPaused((prev) => {
+      const next = typeof nextPaused === "function" ? nextPaused(prev) : nextPaused;
+      isPausedRef.current = next;
+
+      if (!next && pauseResolveRef.current && pausePromiseRef.current) {
+        pauseResolveRef.current();
+        pausePromiseRef.current = null;
+        pauseResolveRef.current = null;
+      }
+      return next;
+    });
+  }, []);
+
+  const internalSetIsPausedRef = useRef(internalSetIsPaused);
+  internalSetIsPausedRef.current = internalSetIsPaused;
+
+  const internalTogglePlayPause = useCallback(() => {
+    internalSetIsPaused((prev) => !prev);
+  }, [internalSetIsPaused]);
+
+  const internalTogglePlayPauseRef = useRef(internalTogglePlayPause);
+  internalTogglePlayPauseRef.current = internalTogglePlayPause;
+
+  const setSpeedRef = useRef(setSpeed);
+  setSpeedRef.current = setSpeed;
+
+  const setPausedSync = useCallback((val) => {
+    internalSetIsPaused(val);
+  }, [internalSetIsPaused]);
+
+  const togglePlayPause = useCallback(() => {
+    internalTogglePlayPause();
+  }, [internalTogglePlayPause]);
+
+  // Async function for sorting algorithms to await between steps
+  const checkPause = async () => {
+    if (isPausedRef.current) {
+      if (!pausePromiseRef.current) {
+        pausePromiseRef.current = new Promise((resolve) => {
+          pauseResolveRef.current = resolve;
+        });
+      }
+      await pausePromiseRef.current;
+    }
+  };
+
+  const increaseSpeed = useCallback(() => {
+    setSpeed((s) => Math.min(s + 0.5, 5));
+  }, []);
+
+  const decreaseSpeed = useCallback(() => {
+    setSpeed((s) => Math.max(s - 0.5, 0.5));
+  }, []);
+
+  const setSpeedSync = useCallback((val) => {
+    setSpeed((s) => (typeof val === "function" ? val(s) : val));
+  }, []);
+
+  // Ensure speed ref is always synced for setTimeout delays
+  useEffect(() => {
+    speedRef.current = speed;
+  }, [speed]);
+
+  return {
+    isPaused,
+    setIsPaused: setPausedSync,
+    isPausedRef,
+    speed,
+    speedRef,
+    setSpeed: setSpeedSync,
+    togglePlayPause,
+    increaseSpeed,
+    decreaseSpeed,
+    checkPause,
+  };
+}
diff --git a/src/app/hooks/useProblemBookmarks.js b/src/app/hooks/useProblemBookmarks.js
new file mode 100644
index 000000000..c643f2bd4
--- /dev/null
+++ b/src/app/hooks/useProblemBookmarks.js
@@ -0,0 +1,171 @@
+"use client";
+import { useState, useEffect, useRef } from "react";
+import { useUser } from "@/features/user/UserContext";
+import { toast } from "react-hot-toast";
+import { persistence } from "@/lib/persistence";
+
+import { supabase } from "@/lib/supabase";
+import { api } from "@/lib/apiClient";
+
+async function apiFetch(url, options = {}) {
+  if (process.env.NEXT_PUBLIC_USE_SPRING_BOOT_API === "true") {
+    const baseUrl = process.env.NEXT_PUBLIC_SPRING_BOOT_API_URL || "http://localhost:8080";
+    const finalUrl = baseUrl + url.replace("/api/bookmarks", "/api/v1/bookmarks");
+    const { data: { session } } = await supabase.auth.getSession();
+    const headers = { "Content-Type": "application/json", ...options.headers };
+    if (session?.access_token) {
+      headers["Authorization"] = `Bearer ${session.access_token}`;
+    }
+    const body = options.body && typeof options.body === "object" ? JSON.stringify(options.body) : options.body;
+    const response = await fetch(finalUrl, { ...options, body, headers });
+    if (response.status === 200 && response.headers.get("content-length") === "0") {
+      return {};
+    }
+    const text = await response.text();
+    let data = {};
+    try { data = text ? JSON.parse(text) : {}; } catch (e) {}
+    if (!response.ok) throw new Error(data.error || "Request failed");
+    return data;
+  }
+
+  return api.request(url, options);
+}
+
+export function useProblemBookmarks() {
+  const { user } = useUser();
+  const [bookmarks, setBookmarks] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const syncQueueRef = useRef([]);
+
+  useEffect(() => {
+    const loadBookmarks = async () => {
+      setLoading(true);
+
+      let localBookmarks = [];
+      try {
+        const stored = await persistence.get("PROBLEM_BOOKMARKS");
+        if (stored) {
+          localBookmarks = stored;
+          setBookmarks(prev => prev.length === 0 ? stored : prev);
+        }
+      } catch (e) {
+        console.error("Failed to parse local bookmarks:", e);
+      }
+
+      if (user) {
+        try {
+          const data = await apiFetch("/api/bookmarks");
+          const dbBookmarks = (data || []).map((row) => ({
+            id: row.problem_id || row.problemId,
+            topicSlug: row.topic_slug || row.topicSlug,
+            createdAt: row.created_at || row.createdAt,
+          }));
+
+          // DB is authoritative for logged-in users.
+          // Sync any local-only bookmarks (added offline) up to the server first.
+          const dbIds = new Set(dbBookmarks.map((b) => b.id));
+          const localOnly = localBookmarks.filter((b) => !dbIds.has(b.id));
+          for (const b of localOnly) {
+            try {
+              await apiFetch("/api/bookmarks", {
+                method: "POST",
+                body: { problemId: b.id, topicSlug: b.topicSlug },
+              });
+            } catch (error) {
+              console.error("[useProblemBookmarks] Failed to sync local bookmark to server:", error);
+            }
+          }
+
+          // Final state = DB items + any local-only items just synced up.
+          // Items deleted in another browser (in local but not DB) are dropped.
+          // Use a functional updater to preserve any concurrent local mutations.
+          const authoritative = [...dbBookmarks, ...localOnly];
+          const authoritativeIds = new Set(authoritative.map(b => b.id));
+          setBookmarks(prev => {
+            const merged = [...authoritative];
+            for (const b of prev) {
+              if (!authoritativeIds.has(b.id)) merged.push(b);
+            }
+            return merged;
+          });
+          persistence.set("PROBLEM_BOOKMARKS", authoritative);
+        } catch (e) {
+          console.error("Bookmark fetch failed:", e);
+        }
+      }
+      setLoading(false);
+    };
+
+    loadBookmarks();
+  }, [user]);
+
+  const toggleBookmark = async (problemId, topicSlug) => {
+    if (!problemId || !topicSlug) return;
+
+    const isBookmarkedCurrently = bookmarks.some((b) => b.id === problemId);
+
+    if (isBookmarkedCurrently) {
+      const updated = bookmarks.filter((b) => b.id !== problemId);
+      setBookmarks(updated);
+      persistence.set("PROBLEM_BOOKMARKS", updated);
+
+      if (user) {
+        try {
+          await apiFetch(`/api/bookmarks?problemId=${encodeURIComponent(problemId)}&topicSlug=${encodeURIComponent(topicSlug)}`, { method: "DELETE" });
+          toast.success("Bookmark removed.");
+        } catch (e) {
+          console.error("Failed to delete bookmark:", e);
+        }
+      } else {
+        toast.success("Bookmark removed (local).");
+      }
+    } else {
+      const newBookmark = { id: problemId, topicSlug, createdAt: new Date().toISOString() };
+      const updated = [...bookmarks, newBookmark];
+      setBookmarks(updated);
+      persistence.set("PROBLEM_BOOKMARKS", updated);
+
+      if (user) {
+        try {
+          await apiFetch("/api/bookmarks", {
+            method: "POST",
+            body: { problemId, topicSlug },
+          });
+          toast.success("Problem bookmarked successfully!");
+        } catch (e) {
+          console.error("Failed to save bookmark:", e);
+          toast.error("Error syncing bookmark.");
+        }
+      } else {
+        toast.custom((t) => (
+          <div className="max-w-sm w-full bg-neutral-100 dark:bg-zinc-800 border border-[#a435f0] rounded-lg shadow-xl p-4 flex flex-col gap-2">
+            <div className="flex flex-col gap-1">
+              <span className="text-sm font-bold text-gray-800 dark:text-gray-100">Problem bookmarked! 🔖</span>
+              <span className="text-xs text-gray-500 dark:text-gray-400">
+                You are in guest mode. Login/Signup to sync your bookmarks across all your devices.
+              </span>
+            </div>
+            <div className="flex justify-end gap-2 mt-1">
+              <button
+                onClick={() => { window.location.href = "/login"; toast.dismiss(t.id); }}
+                className="px-3 py-1.5 rounded-full text-xs font-medium bg-gradient-to-r from-[#a435f0] to-[#7c3aed] text-white hover:from-[#7c3aed] hover:to-[#6d28d9] transition duration-300 shadow-md"
+              >
+                Login/Signup
+              </button>
+              <button
+                onClick={() => toast.dismiss(t.id)}
+                className="px-3 py-1.5 rounded-full text-xs font-medium bg-neutral-200 hover:bg-neutral-350 dark:hover:bg-neutral-700 dark:bg-neutral-800 text-black dark:text-white transition duration-300"
+              >
+                Dismiss
+              </button>
+            </div>
+          </div>
+        ));
+      }
+    }
+  };
+
+  const isBookmarked = (problemId) => bookmarks.some((b) => b.id === problemId);
+
+  return { bookmarks, loading, toggleBookmark, isBookmarked };
+}
diff --git a/src/app/hooks/useProfileForm.js b/src/app/hooks/useProfileForm.js
new file mode 100644
index 000000000..6a656f785
--- /dev/null
+++ b/src/app/hooks/useProfileForm.js
@@ -0,0 +1,168 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import toast from "react-hot-toast";
+import { supabase } from "@/lib/supabase";
+import {
+  AVATAR_BUCKET,
+  MAX_AVATAR_FILE_SIZE,
+  MAX_BIO_LENGTH,
+  buildFormDataFromUser,
+  normalizeProfilePayload,
+  sanitizeProfileLinks,
+  safeAvatarUrl,
+  validateProfileForm,
+} from "@/lib/profileUtils";
+
+export function useProfileForm(user, setUser) {
+  const fileInputRef = useRef(null);
+  const [formData, setFormData] = useState(buildFormDataFromUser(user));
+  const [saving, setSaving] = useState(false);
+  const [savingAvatar, setSavingAvatar] = useState(false);
+  const activeUserIdRef = useRef(user?.id || null);
+
+  useEffect(() => {
+    const nextUserId = user?.id || null;
+
+    if (nextUserId === activeUserIdRef.current) return;
+
+    activeUserIdRef.current = nextUserId;
+    setFormData(buildFormDataFromUser(user));
+  }, [user]);
+
+  const handleChange = useCallback((event) => {
+    const { name, type, value } = event.target;
+    setFormData((current) => ({
+      ...current,
+      [name]:
+        name === "skills" ? value.slice(0, MAX_BIO_LENGTH) : type === "number" ? Number(value) : value,
+    }));
+  }, []);
+
+  const handleAvatarChange = useCallback(
+    async (event, { persistImmediately = true } = {}) => {
+      const file = event.target.files?.[0];
+      if (!file || !user) return;
+
+      if (!file.type.startsWith("image/")) {
+        event.target.value = "";
+        toast.error("Please choose an image file");
+        return;
+      }
+
+      if (file.size > MAX_AVATAR_FILE_SIZE) {
+        event.target.value = "";
+        toast.error("Image size should be less than 2MB");
+        return;
+      }
+
+      setSavingAvatar(true);
+
+      try {
+        const extension = file.name.split(".").pop()?.toLowerCase() || "jpg";
+        const filePath = `${user.id}/avatar-${Date.now()}.${extension}`;
+        const { error: uploadError } = await supabase.storage
+          .from(AVATAR_BUCKET)
+          .upload(filePath, file, {
+            cacheControl: "3600",
+            contentType: file.type,
+            upsert: true,
+          });
+
+        if (uploadError) throw uploadError;
+
+        const { data: publicUrlData } = supabase.storage.from(AVATAR_BUCKET).getPublicUrl(filePath);
+
+        const avatarUrl = safeAvatarUrl(publicUrlData?.publicUrl);
+        if (!avatarUrl) throw new Error("Could not create a compact avatar URL");
+
+        const nextProfileData = { ...formData, avatar_url: avatarUrl };
+        setFormData(nextProfileData);
+
+        if (persistImmediately) {
+          const { data, error } = await supabase.auth.updateUser({
+            data: nextProfileData,
+          });
+
+          if (error) throw error;
+          setUser(data.user);
+          toast.success("Profile photo updated");
+        }
+      } catch (error) {
+        console.error(error);
+        toast.error(
+          error.message?.includes("Bucket")
+            ? "Create a public Supabase Storage bucket named avatars"
+            : "Failed to update profile photo"
+        );
+      } finally {
+        setSavingAvatar(false);
+        event.target.value = "";
+      }
+    },
+    [formData, setUser, user]
+  );
+
+  const markProfileSetupSeen = useCallback(async () => {
+    const { data, error } = await supabase.auth.updateUser({
+      data: { hasSeenProfileSetup: true },
+    });
+
+    if (error) throw error;
+    setUser(data.user);
+    return data.user;
+  }, [setUser]);
+
+  const saveProfile = useCallback(
+    async ({ mode = "edit", markSetupSeen = false, onSuccess } = {}) => {
+      const validationError = validateProfileForm(formData, mode);
+      if (validationError) {
+        toast.error(validationError);
+        return { ok: false };
+      }
+
+      const sanitized = sanitizeProfileLinks(formData);
+      if (sanitized.error) {
+        toast.error(sanitized.error);
+        return { ok: false };
+      }
+
+      setSaving(true);
+
+      try {
+        const nextProfileData = normalizeProfilePayload({
+          ...sanitized.data,
+          ...(markSetupSeen ? { hasSeenProfileSetup: true } : {}),
+        });
+
+        const { data, error } = await supabase.auth.updateUser({ data: nextProfileData });
+
+        if (error) throw error;
+
+        setUser(data.user);
+        setFormData(nextProfileData);
+        onSuccess?.(nextProfileData);
+        return { ok: true, data: nextProfileData };
+      } catch (error) {
+        console.error(error);
+        toast.error("Failed to update profile");
+        return { ok: false };
+      } finally {
+        setSaving(false);
+      }
+    },
+    [formData, setUser]
+  );
+
+  return {
+    formData,
+    setFormData,
+    saving,
+    savingAvatar,
+    fileInputRef,
+    handleChange,
+    handleAvatarChange,
+    saveProfile,
+    markProfileSetupSeen,
+  };
+}
diff --git a/src/app/hooks/useProgress.js b/src/app/hooks/useProgress.js
new file mode 100644
index 000000000..c556f8f21
--- /dev/null
+++ b/src/app/hooks/useProgress.js
@@ -0,0 +1,102 @@
+"use client";
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { useUser } from "@/features/user/UserContext";
+import { api } from "@/lib/apiClient";
+
+/**
+ * useProgress – lightweight hook for the topic sub-pages (/practice/[topic]).
+ * Delegates all heavy lifting to the same localStorage key that useSheetProgress
+ * manages, ensuring the two pages always stay in sync without redundant network calls.
+ *
+ * If you need streak data or server sync on the topic page, import
+ * useSheetProgress directly instead.
+ */
+
+const LOCAL_KEY = "algobuddy_practice_progress";
+
+function readLocal() {
+  try {
+    const raw = localStorage.getItem(LOCAL_KEY);
+    return raw ? JSON.parse(raw) : {};
+  } catch {
+    return {};
+  }
+}
+
+function writeLocal(data) {
+  try {
+    localStorage.setItem(LOCAL_KEY, JSON.stringify(data));
+  } catch {}
+}
+
+function normalizeRaw(raw) {
+  const map = {};
+  Object.keys(raw).forEach((key) => {
+    const val = raw[key];
+    map[key] =
+      typeof val === "object" && val !== null
+        ? val.status || "Not Started"
+        : val || "Not Started";
+  });
+  return map;
+}
+
+export function useProgress() {
+  const { user } = useUser();
+  const [rawProgress, setRawProgress] = useState({});
+  const [loading, setLoading] = useState(true);
+
+  const progress = useMemo(() => normalizeRaw(rawProgress), [rawProgress]);
+
+  useEffect(() => {
+    // Load from localStorage (always available instantly)
+    const local = readLocal();
+    setRawProgress(local);
+    setLoading(false);
+  }, [user]);
+
+  const updateProgress = useCallback(
+    async (problemId, status) => {
+      const updatedAt = new Date().toISOString();
+      const next = { ...rawProgress, [problemId]: { status, updatedAt } };
+      setRawProgress(next);
+      writeLocal(next);
+
+      // Sync to server via the progress API route (Supabase path)
+      // or via Spring Boot if configured
+      if (user) {
+        try {
+          const useSpringBoot =
+            process.env.NEXT_PUBLIC_USE_SPRING_BOOT_API === "true";
+
+          if (useSpringBoot) {
+            const { supabase } = await import("@/lib/supabase");
+            const { data: { session } } = await supabase.auth.getSession();
+            if (session?.access_token) {
+              const baseUrl =
+                process.env.NEXT_PUBLIC_SPRING_BOOT_API_URL || "http://localhost:8080";
+              await fetch(`${baseUrl}/api/v1/practice/progress`, {
+                method: "POST",
+                headers: {
+                  Authorization: `Bearer ${session.access_token}`,
+                  "Content-Type": "application/json",
+                },
+                body: JSON.stringify({ problemId, status }),
+              });
+            }
+          } else {
+            await api.request("/api/progress", {
+              method: "POST",
+              body: { problemId, status },
+            });
+          }
+        } catch (err) {
+          console.error("[useProgress] Failed to sync to server:", err);
+        }
+      }
+    },
+    [rawProgress, user]
+  );
+
+  return { progress, loading, updateProgress };
+}
diff --git a/src/app/hooks/useRecentlyViewed.js b/src/app/hooks/useRecentlyViewed.js
new file mode 100644
index 000000000..68c8a8f7f
--- /dev/null
+++ b/src/app/hooks/useRecentlyViewed.js
@@ -0,0 +1,31 @@
+"use client";
+import { useState, useEffect } from "react";
+import { persistence } from "@/lib/persistence";
+
+const MAX_RECENT = 6;
+
+export function useRecentlyViewed() {
+  const [recentlyViewed, setRecentlyViewed] = useState([]);
+
+  useEffect(() => {
+    persistence.get('RECENTLY_VIEWED').then((stored) => {
+      if (stored) setRecentlyViewed(prev => prev.length === 0 ? stored : prev);
+    });
+  }, []);
+
+  const addRecentlyViewed = (item) => {
+    setRecentlyViewed((prev) => {
+      const filtered = prev.filter((i) => i.path !== item.path);
+      const updated = [item, ...filtered].slice(0, MAX_RECENT);
+      persistence.set('RECENTLY_VIEWED', updated);
+      return updated;
+    });
+  };
+
+  const clearRecentlyViewed = () => {
+    persistence.remove('RECENTLY_VIEWED');
+    setRecentlyViewed([]);
+  };
+
+  return { recentlyViewed, addRecentlyViewed, clearRecentlyViewed };
+}
\ No newline at end of file
diff --git a/src/app/hooks/useSheetProgress.js b/src/app/hooks/useSheetProgress.js
new file mode 100644
index 000000000..9744a85b5
--- /dev/null
+++ b/src/app/hooks/useSheetProgress.js
@@ -0,0 +1,389 @@
+"use client";
+import { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { useUser } from "@/features/user/UserContext";
+import { supabase } from "@/lib/supabase";
+import { api } from "@/lib/apiClient";
+import { getLocalISODate } from "@/lib/activity";
+
+// ---------------------------------------------------------------------------
+// Internal helpers
+// ---------------------------------------------------------------------------
+
+const LOCAL_KEY = "algobuddy_practice_progress";
+const STREAK_KEY = "algobuddy_current_streak";
+const BEST_STREAK_KEY = "algobuddy_best_streak";
+const LAST_ACTIVE_KEY = "algobuddy_last_active_date";
+
+function readLocal() {
+  try {
+    const raw = localStorage.getItem(LOCAL_KEY);
+    return raw ? JSON.parse(raw) : {};
+  } catch {
+    return {};
+  }
+}
+
+function writeLocal(data) {
+  try {
+    localStorage.setItem(LOCAL_KEY, JSON.stringify(data));
+  } catch {}
+}
+
+/** Normalize any stored entry to { status, updatedAt } */
+function normalizeEntry(val) {
+  if (!val) return { status: "Not Started", updatedAt: null };
+  if (typeof val === "string") return { status: val, updatedAt: null };
+  return {
+    status: val.status || "Not Started",
+    updatedAt: val.updatedAt || val.updated_at || null,
+  };
+}
+
+/** Merge server map (wins on conflict by timestamp) into local map */
+function mergeProgress(local, serverMap) {
+  const merged = { ...local };
+  Object.entries(serverMap).forEach(([id, serverEntry]) => {
+    const localEntry = local[id];
+    const serverTs = serverEntry.updatedAt ? new Date(serverEntry.updatedAt).getTime() : 0;
+    const localTs = localEntry?.updatedAt ? new Date(localEntry.updatedAt).getTime() : 0;
+    if (serverTs >= localTs) {
+      merged[id] = serverEntry;
+    }
+  });
+  return merged;
+}
+
+// ---------------------------------------------------------------------------
+// API helpers (support Spring Boot OR Next.js/Supabase path)
+// ---------------------------------------------------------------------------
+
+async function getAuthHeader() {
+  const { data: { session } } = await supabase.auth.getSession();
+  return session?.access_token ? { Authorization: `Bearer ${session.access_token}` } : {};
+}
+
+const isUsingSpringBoot = () =>
+  typeof window !== "undefined" && process.env.NEXT_PUBLIC_USE_SPRING_BOOT_API === "true";
+
+function springBootBase() {
+  return process.env.NEXT_PUBLIC_SPRING_BOOT_API_URL || "http://localhost:8080";
+}
+
+/** Fetch all progress for current user */
+async function fetchProgressFromServer() {
+  if (isUsingSpringBoot()) {
+    const headers = await getAuthHeader();
+    if (!headers.Authorization) return null;
+    const res = await fetch(`${springBootBase()}/api/v1/practice/progress`, { headers });
+    if (!res.ok) return null;
+    return await res.json(); // ProgressResponse shape
+  }
+
+  // Supabase path via Next.js API route
+  try {
+    const data = await api.request("/api/progress");
+    return data || null;
+  } catch {
+    return null;
+  }
+}
+
+/** Update a single problem's status */
+async function postProgressToServer(problemId, status) {
+  const localDate = getLocalISODate();
+  if (isUsingSpringBoot()) {
+    const headers = await getAuthHeader();
+    if (!headers.Authorization) return;
+    const res = await fetch(`${springBootBase()}/api/v1/practice/progress`, {
+      method: "POST",
+      headers: { ...headers, "Content-Type": "application/json" },
+      body: JSON.stringify({ problemId, status, localDate }),
+    });
+    if (!res.ok) return null;
+    return await res.json();
+  }
+
+  // Supabase path
+  try {
+    const fresh = await api.request("/api/progress", {
+      method: "POST",
+      body: { problemId, status, localDate },
+    });
+    return fresh || null;
+  } catch {
+    return null;
+  }
+}
+
+/** Bulk-sync items that exist locally but not on the server */
+async function bulkSyncToServer(items) {
+  if (!items || items.length === 0) return null;
+
+  if (isUsingSpringBoot()) {
+    const headers = await getAuthHeader();
+    if (!headers.Authorization) return null;
+    const res = await fetch(`${springBootBase()}/api/v1/practice/progress/bulk`, {
+      method: "POST",
+      headers: { ...headers, "Content-Type": "application/json" },
+      body: JSON.stringify({ items }),
+    });
+    if (!res.ok) return null;
+    return await res.json();
+  }
+
+  // Supabase path: sequential POSTs
+  for (const item of items) {
+    try {
+      await api.request("/api/progress", {
+        method: "POST",
+        body: { problemId: item.problemId, status: item.status },
+      });
+    } catch {}
+  }
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Streak helpers (local-only for Supabase path; server-driven for Spring Boot)
+// ---------------------------------------------------------------------------
+
+function readLocalStreak() {
+  const current = parseInt(localStorage.getItem(STREAK_KEY) || "0", 10);
+  const best = parseInt(localStorage.getItem(BEST_STREAK_KEY) || "0", 10);
+  return { current, best };
+}
+
+function updateLocalStreak(currentStreak) {
+  const today = new Date().toDateString();
+  const lastActive = localStorage.getItem(LAST_ACTIVE_KEY);
+  if (lastActive === today) return currentStreak; // already updated today
+
+  const yesterday = new Date(Date.now() - 86400000).toDateString();
+  let next = lastActive === yesterday ? currentStreak + 1 : 1;
+  const best = Math.max(parseInt(localStorage.getItem(BEST_STREAK_KEY) || "0", 10), next);
+
+  localStorage.setItem(STREAK_KEY, String(next));
+  localStorage.setItem(BEST_STREAK_KEY, String(best));
+  localStorage.setItem(LAST_ACTIVE_KEY, today);
+  return next;
+}
+
+// ---------------------------------------------------------------------------
+// The unified hook
+// ---------------------------------------------------------------------------
+
+/**
+ * useSheetProgress
+ *
+ * Manages DSA sheet problem progress with:
+ *  - Instant local-first rendering (no flicker)
+ *  - Sync from Spring Boot or Supabase on mount
+ *  - Optimistic updates on status toggle
+ *  - Bulk sync of local guest progress after login
+ *  - Streak tracking
+ *
+ * Returns:
+ *  progress       – { [problemId]: { status, updatedAt } }
+ *  getStatus(id)  – returns the string status for a problem ID
+ *  updateProgress(problemId, newStatus) – update + sync
+ *  streakData     – { current, best, dailySolved, weeklySolved, monthlySolved }
+ *  loading
+ */
+export function useSheetProgress() {
+  const { user } = useUser();
+  const [progress, setProgress] = useState({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [streakData, setStreakData] = useState({
+    current: 0,
+    best: 0,
+    dailySolved: 0,
+    weeklySolved: 0,
+    monthlySolved: 0,
+  });
+
+  // Track whether we've done the initial server sync to avoid double-syncing
+  const syncedRef = useRef(false);
+
+  // Version counter to prevent race conditions during rapid progress updates
+  const updateVersionRef = useRef(0);
+
+  // ── Load & sync on mount / user change ──────────────────────────────────
+  useEffect(() => {
+    syncedRef.current = false;
+    let cancelled = false;
+
+    const loadAndSync = async () => {
+      setLoading(true);
+
+      // 1. Load local immediately for instant UI
+      const local = readLocal();
+      if (!cancelled) setProgress(local);
+
+      if (!user) {
+        // Guest mode: use localStorage streaks
+        const localStreak = readLocalStreak();
+        if (!cancelled) setStreakData((prev) => ({ ...prev, ...localStreak }));
+        setLoading(false);
+        return;
+      }
+
+      // 2. Fetch server progress
+      try {
+        const serverData = await fetchProgressFromServer();
+        if (cancelled || !serverData) {
+          setLoading(false);
+          return;
+        }
+
+        // Build a normalized server map
+        const rawServerMap = serverData.progress || {};
+        const serverMap = {};
+        Object.entries(rawServerMap).forEach(([id, val]) => {
+          serverMap[id] = normalizeEntry(val);
+        });
+
+        // 3. Find items in local but not on server → bulk sync them up first
+        const toSync = [];
+        Object.entries(local).forEach(([id, entry]) => {
+          const e = normalizeEntry(entry);
+          if (!serverMap[id] && e.status && e.status !== "Not Started") {
+            toSync.push({ problemId: id, status: e.status });
+          }
+        });
+        if (toSync.length > 0) {
+          const bulkResult = await bulkSyncToServer(toSync);
+          // If Spring Boot returned fresh data after bulk sync, use it
+          if (bulkResult?.progress) {
+            Object.entries(bulkResult.progress).forEach(([id, val]) => {
+              serverMap[id] = normalizeEntry(val);
+            });
+          }
+        }
+
+        // 4. DB is authoritative: build final state from serverMap only.
+        //    - Server entries are used as-is.
+        //    - Local-only entries that were just bulk-synced are also included.
+        //    - Local entries that don't exist on server AND weren't synced up
+        //      (e.g. "Not Started") are dropped — they reflect deletions from
+        //      another browser/device.
+        const syncedIds = new Set(toSync.map((i) => i.problemId));
+        const authoritative = { ...serverMap };
+        // Keep local entries that were just synced (they are now on server)
+        syncedIds.forEach((id) => {
+          if (!authoritative[id] && local[id]) {
+            authoritative[id] = normalizeEntry(local[id]);
+          }
+        });
+        writeLocal(authoritative);
+        if (!cancelled) setProgress(authoritative);
+
+        // 5. Update streak state — server is authoritative for authenticated users.
+        if (!cancelled) {
+          if (serverData.currentStreak !== undefined) {
+            // Both Spring Boot and Supabase paths now return currentStreak.
+            setStreakData({
+              current: serverData.currentStreak || 0,
+              best: serverData.longestStreak || 0,
+              dailySolved: serverData.dailySolved || 0,
+              weeklySolved: serverData.weeklySolved || 0,
+              monthlySolved: serverData.monthlySolved || 0,
+            });
+          } else {
+            // Server did not return streak fields — fall back to localStorage
+            // only as a last resort (e.g. unexpected API shape change).
+            const localStreak = readLocalStreak();
+            setStreakData((prev) => ({ ...prev, ...localStreak }));
+          }
+        }
+      } catch (err) {
+        console.error("[useSheetProgress] Server sync failed:", err);
+        if (!cancelled) {
+          setError(err.message || "Failed to load progress");
+        }
+      }
+
+      if (!cancelled) {
+        syncedRef.current = true;
+        setLoading(false);
+      }
+    };
+
+    loadAndSync();
+    return () => { cancelled = true; };
+  }, [user]);
+
+  // ── Update progress ──────────────────────────────────────────────────────
+  const updateProgress = useCallback(
+    async (problemId, newStatus) => {
+      const updatedAt = new Date().toISOString();
+      const myVersion = ++updateVersionRef.current;
+      const previousProgress = progress;
+
+      // Update local state immediately so UI reflects the change right away.
+      // Use a functional update to avoid stale `progress` closure issues.
+      setProgress((prev) => {
+        const next = {
+          ...prev,
+          [problemId]: { status: newStatus, updatedAt },
+        };
+        writeLocal(next);
+        return next;
+      });
+
+      // Update local streak on completion only for guests.
+      // Authenticated users get their streak from the server after the sync
+      // below, so updating localStorage here would cause divergence.
+      if (newStatus === "Completed" && !user) {
+        const next = updateLocalStreak(streakData.current);
+        setStreakData((prev) => ({
+          ...prev,
+          current: next,
+          best: Math.max(prev.best, next),
+        }));
+      }
+
+      // Sync to server asynchronously
+      if (user) {
+        try {
+          const fresh = await postProgressToServer(problemId, newStatus);
+          if (!fresh) throw new Error("Server returned no data");
+          // Only apply server response if this is still the latest update
+          if (updateVersionRef.current === myVersion) {
+            // Use server streak data returned from either path.
+            if (fresh.currentStreak !== undefined) {
+              setStreakData({
+                current: fresh.currentStreak || 0,
+                best: fresh.longestStreak || 0,
+                dailySolved: fresh.dailySolved || 0,
+                weeklySolved: fresh.weeklySolved || 0,
+                monthlySolved: fresh.monthlySolved || 0,
+              });
+            }
+          }
+        } catch (err) {
+          console.error("[useSheetProgress] Failed to sync progress, rolling back:", err);
+          // Only rollback if this is still the latest update — prevents
+          // overwriting state from a newer concurrent update.
+          if (updateVersionRef.current === myVersion) {
+            setProgress(previousProgress);
+            writeLocal(previousProgress);
+          }
+        }
+      }
+    },
+    [progress, user, streakData]
+  );
+
+  // ── Convenience getter ───────────────────────────────────────────────────
+  const getStatus = useCallback(
+    (problemId) => {
+      const entry = progress[problemId];
+      if (!entry) return "Not Started";
+      return typeof entry === "string" ? entry : (entry.status || "Not Started");
+    },
+    [progress]
+  );
+
+  return { progress, getStatus, updateProgress, streakData, loading, error };
+}
diff --git a/src/app/hooks/useSwipeGesture.js b/src/app/hooks/useSwipeGesture.js
new file mode 100644
index 000000000..461f9f040
--- /dev/null
+++ b/src/app/hooks/useSwipeGesture.js
@@ -0,0 +1,61 @@
+"use client";
+import { useEffect } from "react";
+
+/**
+ * useSwipeGesture
+ *
+ * Attaches passive touch event listeners to `ref.current` and fires
+ * `onSwipeLeft` or `onSwipeRight` when the user swipes more than
+ * `threshold` pixels horizontally.
+ *
+ * Used by algorithm visualizers to allow swipe-right → step back
+ * and swipe-left → step forward on mobile / tablet devices.
+ *
+ * @param {React.RefObject} ref          - ref attached to the swipeable element
+ * @param {object}          opts
+ * @param {Function}        [opts.onSwipeLeft]   - called when user swipes left  (step forward)
+ * @param {Function}        [opts.onSwipeRight]  - called when user swipes right (step back)
+ * @param {number}          [opts.threshold=50]  - minimum px distance to count as a swipe
+ * @param {boolean}         [opts.enabled=true]  - set false to disable
+ */
+export default function useSwipeGesture(ref, {
+  onSwipeLeft,
+  onSwipeRight,
+  threshold = 50,
+  enabled = true,
+} = {}) {
+  useEffect(() => {
+    const el = ref?.current;
+    if (!el || !enabled) return;
+
+    let touchStartX = 0;
+    let touchStartY = 0;
+
+    function handleTouchStart(e) {
+      touchStartX = e.touches[0].clientX;
+      touchStartY = e.touches[0].clientY;
+    }
+
+    function handleTouchEnd(e) {
+      const dx = e.changedTouches[0].clientX - touchStartX;
+      const dy = e.changedTouches[0].clientY - touchStartY;
+
+      // Only fire if horizontal movement dominates (not a scroll)
+      if (Math.abs(dx) < threshold || Math.abs(dx) < Math.abs(dy)) return;
+
+      if (dx < 0) {
+        onSwipeLeft?.();   // swipe left  → step forward
+      } else {
+        onSwipeRight?.();  // swipe right → step back
+      }
+    }
+
+    el.addEventListener("touchstart", handleTouchStart, { passive: true });
+    el.addEventListener("touchend",   handleTouchEnd,   { passive: true });
+
+    return () => {
+      el.removeEventListener("touchstart", handleTouchStart);
+      el.removeEventListener("touchend",   handleTouchEnd);
+    };
+  }, [ref, onSwipeLeft, onSwipeRight, threshold, enabled]);
+}
diff --git a/src/app/hooks/useTheme.js b/src/app/hooks/useTheme.js
new file mode 100644
index 000000000..a33cc3655
--- /dev/null
+++ b/src/app/hooks/useTheme.js
@@ -0,0 +1,89 @@
+"use client";
+import { useState, useEffect, useCallback } from "react";
+
+const THEME_STORAGE_KEY = "theme";
+const DARK_CLASS = "dark";
+
+function getSystemPreference() {
+  if (typeof window === "undefined") return null;
+  try {
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    return mq.matches ? "dark" : "light";
+  } catch {
+    return null;
+  }
+}
+
+function getStoredTheme() {
+  if (typeof window === "undefined") return "light";
+  try {
+    const saved = localStorage.getItem(THEME_STORAGE_KEY);
+    if (saved === "dark" || saved === "light") return saved;
+  } catch {
+    // localStorage unavailable
+  }
+  return null;
+}
+
+function resolveInitialTheme() {
+  const stored = getStoredTheme();
+  if (stored) return stored;
+  const system = getSystemPreference();
+  if (system) return system;
+  return "light";
+}
+
+function applyTheme(nextTheme) {
+  document.documentElement.classList.toggle(DARK_CLASS, nextTheme === "dark");
+  try {
+    localStorage.setItem(THEME_STORAGE_KEY, nextTheme);
+  } catch {
+    // localStorage unavailable
+  }
+}
+
+export function useTheme() {
+  const [theme, setThemeState] = useState("light");
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const initial = resolveInitialTheme();
+    applyTheme(initial);
+    setThemeState(initial);
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    let mq;
+    try {
+      mq = window.matchMedia("(prefers-color-scheme: dark)");
+    } catch {
+      return;
+    }
+    function handleChange(e) {
+      const stored = getStoredTheme();
+      if (stored) return;
+      const next = e.matches ? "dark" : "light";
+      applyTheme(next);
+      setThemeState(next);
+    }
+    mq.addEventListener("change", handleChange);
+    return () => mq.removeEventListener("change", handleChange);
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setThemeState((current) => {
+      const next = current === "light" ? "dark" : "light";
+      applyTheme(next);
+      return next;
+    });
+  }, []);
+
+  const setTheme = useCallback((next) => {
+    if (next !== "light" && next !== "dark") return;
+    applyTheme(next);
+    setThemeState(next);
+  }, []);
+
+  return { theme, mounted, toggleTheme, setTheme, isDark: theme === "dark" };
+}
diff --git a/src/app/hooks/useVisualizerKeyboard.js b/src/app/hooks/useVisualizerKeyboard.js
new file mode 100644
index 000000000..fa8513528
--- /dev/null
+++ b/src/app/hooks/useVisualizerKeyboard.js
@@ -0,0 +1,123 @@
+"use client";
+import { useCallback, useEffect } from "react";
+
+/**
+ * useVisualizerKeyboard
+ *
+ * Attaches keyboard shortcuts for the AlgoBuddy visualizer.
+ * Guards against firing when the user is typing in an input/textarea/select
+ * or a contenteditable element.
+ * Cleans up the listener automatically on unmount.
+ *
+ * Shortcut map (matches the controls in BubbleSortVisualizer and siblings):
+ *   Space      → Play / Pause  (calls onTogglePlayPause when sorting, onStart when idle)
+ *   ArrowRight → Step forward one iteration (calls onStepForward when paused)
+ *   R / r      → Reset All
+ *   N / n      → Next step
+ *   P / p      → Previous step
+ *   +  / =     → Speed up   (increase speed by 0.5, max 5)
+ *   -          → Slow down  (decrease speed by 0.5, min 0.5)
+ *
+ * @param {object}   opts
+ * @param {Function} opts.onStart           — the "Start Sort / Play" handler
+ * @param {Function} opts.onReset           — the "Reset All" handler
+ * @param {Function} opts.onSpeedChange     — called with the next speed value (number)
+ * @param {Function} [opts.onTogglePlayPause] — called to toggle play/pause while running
+ * @param {Function} [opts.onStepForward]   — called to advance one step (when paused)
+ * @param {Function} [opts.onNextStep]      — called to go to the next step
+ * @param {Function} [opts.onPrevStep]      — called to go to the previous step
+ * @param {number}   opts.speed             — current speed value (0.5 – 5, step 0.5)
+ * @param {boolean}  opts.sorting           — true while animation is running
+ * @param {boolean}  opts.sorted            — true when sort is complete
+ * @param {boolean}  [opts.enabled=true]    — set false to disable (e.g. modal open)
+ *
+ * NOTE: Pass stable function references (e.g. wrapped in useCallback) for all
+ * callback props to avoid unnecessary re-registrations of the event listener.
+ */
+export default function useVisualizerKeyboard({
+  onStart,
+  onReset,
+  onSpeedChange,
+  onTogglePlayPause,
+  onStepForward,
+  onNextStep,
+  onPrevStep,
+  speed,
+  sorting,
+  sorted,
+  enabled = true,
+}) {
+  const handleKeyDown = useCallback(
+    (e) => {
+      const activeEl = document.activeElement;
+      const tag = activeEl?.tagName?.toLowerCase();
+      const isInput = tag === "input" || tag === "textarea" || tag === "select";
+      const isContentEditable =
+        activeEl?.isContentEditable ||
+        activeEl?.getAttribute?.("contenteditable") === "true" ||
+        activeEl?.closest?.('[contenteditable="true"]');
+
+      if (isInput || isContentEditable) return;
+
+      switch (e.key) {
+        case " ":
+          e.preventDefault();
+          if (onTogglePlayPause && sorting) {
+            onTogglePlayPause();
+          } else if (!sorted) {
+            onStart?.();
+          }
+          break;
+
+        case "ArrowRight":
+          if (onStepForward && !sorted) {
+            e.preventDefault();
+            onStepForward();
+          }
+          break;
+
+        case "r":
+        case "R":
+          if (!sorting) {
+            onReset?.();
+          }
+          break;
+
+        case "n":
+        case "N":
+          onNextStep?.();
+          break;
+
+        case "p":
+        case "P":
+          onPrevStep?.();
+          break;
+
+        case "+":
+        case "=":
+          onSpeedChange?.(
+            Math.min(parseFloat((speed + 0.5).toFixed(1)), 5)
+          );
+          break;
+
+        case "-":
+          onSpeedChange?.(
+            Math.max(parseFloat((speed - 0.5).toFixed(1)), 0.5)
+          );
+          break;
+
+        default:
+          break;
+      }
+    },
+    // exhaustive-deps: all props consumed inside the handler are listed here
+    [onStart, onReset, onSpeedChange, onTogglePlayPause, onStepForward, onNextStep, onPrevStep, speed, sorting, sorted]
+  );
+
+  useEffect(() => {
+    if (!enabled) return;
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [enabled, handleKeyDown]);
+}
+
diff --git a/src/app/hooks/useVisualizerReset.js b/src/app/hooks/useVisualizerReset.js
new file mode 100644
index 000000000..0c377ef66
--- /dev/null
+++ b/src/app/hooks/useVisualizerReset.js
@@ -0,0 +1,16 @@
+"use client";
+import { useEffect, useRef } from "react";
+
+export default function useVisualizerReset(resetFn) {
+  const ref = useRef(resetFn);
+
+  useEffect(() => {
+    ref.current = resetFn;
+  });
+
+  useEffect(() => {
+    return () => {
+      ref.current?.();
+    };
+  }, []);
+}
diff --git a/app/icon.svg b/src/app/icon.svg
similarity index 100%
rename from app/icon.svg
rename to src/app/icon.svg
diff --git a/src/app/layout.jsx b/src/app/layout.jsx
new file mode 100644
index 000000000..71ec9570d
--- /dev/null
+++ b/src/app/layout.jsx
@@ -0,0 +1,148 @@
+import "./globals.css";
+import Script from "next/script";
+import { SpeedInsights } from "@vercel/speed-insights/next";
+import { UserProvider } from "@/features/user/UserContext";
+import { NotificationProvider } from "@/features/notifications/NotificationContext";
+import { NarrationProvider } from "@/app/components/ui/NarrationContext";
+import NarrationPanel from "@/app/components/ui/NarrationPanel";
+import ClientLayoutWrapper from "@/app/components/ui/ClientLayoutWrapper";
+import BackToTop from "@/app/components/ui/backtotop";
+import VoiceAgent from "@/app/components/VoiceAgent";
+import AnalyticsScripts from "@/app/components/AnalyticsScripts";
+import { Inter, Source_Sans_3, Source_Serif_4 } from "next/font/google";
+
+const inter = Inter({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700", "800", "900"],
+  variable: "--font-inter",
+  display: "swap",
+});
+
+const sourceSans3 = Source_Sans_3({
+  subsets: ["latin"],
+  weight: ["300", "400", "600", "700"],
+  style: ["normal", "italic"],
+  variable: "--font-source-sans-3",
+  display: "swap",
+});
+
+const sourceSerif4 = Source_Serif_4({
+  subsets: ["latin"],
+  weight: ["400", "600", "700"],
+  variable: "--font-source-serif-4",
+  display: "swap",
+});
+
+
+const GA_ID = process.env.NEXT_PUBLIC_GA_ID;
+
+export const metadata = {
+  metadataBase: new URL("https://www.algobuddy.me"),
+  title: "AlgoBuddy | Visualize & Learn DSA the Smart Way",
+  description:
+    "Master Data Structures and Algorithms with interactive visualizations. Perfect for students, beginners, and interview prep. Visualize Stack, Queue, Tree, Graph, Sorting & more.",
+  keywords: [
+    "AlgoBuddy",
+    "DSA Visualizer",
+    "Data Structures and Algorithms",
+    "Visual DSA Tool",
+    "Learn DSA Online",
+    "DSA for Beginners",
+    "DSA Practice",
+    "Stack Visualizer",
+    "Queue Visualizer",
+    "Graph Visualizer",
+    "Sorting Algorithms",
+  ],
+  authors: [{ name: "Sohan Rout" }],
+  creator: "Sohan Rout",
+  publisher: "AlgoBuddy",
+  robots: "index, follow",
+  icons: {
+    icon: "/favicon.svg",
+  },
+  openGraph: {
+    title: "AlgoBuddy | Visualize & Learn DSA the Smart Way",
+    description:
+      "Interactive platform to visualize and learn DSA concepts easily. Great for students and interview preparation.",
+    url: "https://www.algobuddy.me/",
+    siteName: "AlgoBuddy",
+    images: [
+      {
+        url: "/og.png",
+        width: 1200,
+        height: 630,
+        alt: "AlgoBuddy Preview Image",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "AlgoBuddy | Learn DSA the Smart Way",
+    description:
+      "Visualize algorithms like Stack, Queue, Graphs, and Sorting in real-time. Learn DSA interactively.",
+    images: ["/og.png"],
+  },
+};
+
+export default async function RootLayout({ children }) {
+  // auth is handled client-side via UserContext (Supabase)
+
+  return (
+    <html lang="en" data-scroll-behavior="smooth" suppressHydrationWarning className={`${inter.variable} ${sourceSans3.variable} ${sourceSerif4.variable}`}>
+      <head>
+        <meta name="application-name" content="AlgoBuddy" />
+        <meta property="og:site_name" content="AlgoBuddy" />
+        <link rel="icon" href="/favicon.ico?v=3" />
+
+        {/* Prevent flash: apply saved theme before React hydrates */}
+        <Script
+          id="theme-script"
+          strategy="beforeInteractive"
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  var theme = localStorage.getItem('theme');
+                  if (!theme) {
+                    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+                  }
+                  if (theme === 'dark') document.documentElement.classList.add('dark');
+                  else document.documentElement.classList.remove('dark');
+                  
+                  var visTheme = localStorage.getItem('vis-theme') || 'default';
+                  document.documentElement.setAttribute('data-vis-theme', visTheme);
+                } catch(e) {}
+              })();
+            `,
+          }}
+        />
+      {/* Google AdSense + Analytics — gated on cookie consent (see AnalyticsScripts.jsx) */}
+<AnalyticsScripts gaId={GA_ID} adsenseClientId="ca-pub-5588131730389378" />
+      </head>
+      <body suppressHydrationWarning className="bg-white text-[var(--udemy-text)] dark:bg-[var(--udemy-dark-bg)] dark:text-[var(--udemy-dark-text)]">
+        <a
+          href="#main-content"
+          className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[9999] focus:px-4 focus:py-2 focus:bg-[var(--color-primary)] focus:text-white focus:rounded-[var(--radius-md)]"
+        >
+          Skip to content
+        </a>
+        <UserProvider>
+          <NotificationProvider>
+            <NarrationProvider>
+              <ClientLayoutWrapper>
+                <div id="main-content">{children}</div>
+              </ClientLayoutWrapper>
+              <NarrationPanel />
+            </NarrationProvider>
+          </NotificationProvider>
+        </UserProvider>
+      <BackToTop />
+      <VoiceAgent />
+        <SpeedInsights />
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/leaderboard/page.jsx b/src/app/leaderboard/page.jsx
new file mode 100644
index 000000000..cb58a55af
--- /dev/null
+++ b/src/app/leaderboard/page.jsx
@@ -0,0 +1,109 @@
+"use client";
+import { useState, useEffect } from "react";
+import { FiAward, FiTarget, FiTrendingUp } from "react-icons/fi";
+import Footer from "@/app/components/footer";
+
+// Mock data to render gracefully while API isn't fully active on frontend
+const MOCK_LEADERBOARDS = {
+  streak: [
+    { rank: 1, username: "Alex Dev", score: 42, avatarUrl: "https://api.dicebear.com/7.x/avataaars/svg?seed=Alex" },
+    { rank: 2, username: "CodeNinja", score: 38, avatarUrl: "https://api.dicebear.com/7.x/avataaars/svg?seed=Ninja" },
+    { rank: 3, username: "Sarah Script", score: 35, avatarUrl: "https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah" },
+    { rank: 4, username: "ByteMaster", score: 29, avatarUrl: "https://api.dicebear.com/7.x/avataaars/svg?seed=Byte" },
+    { rank: 5, username: "AlgoKing", score: 21, avatarUrl: "https://api.dicebear.com/7.x/avataaars/svg?seed=Algo" },
+  ],
+  arena: [
+    { rank: 1, username: "Grandmaster", score: 2450, avatarUrl: "https://api.dicebear.com/7.x/avataaars/svg?seed=GM" },
+    { rank: 2, username: "Alex Dev", score: 2100, avatarUrl: "https://api.dicebear.com/7.x/avataaars/svg?seed=Alex" },
+    { rank: 3, username: "CodeNinja", score: 1950, avatarUrl: "https://api.dicebear.com/7.x/avataaars/svg?seed=Ninja" },
+  ]
+};
+
+export default function LeaderboardPage() {
+  const [metric, setMetric] = useState("streak"); // 'streak' or 'arena'
+  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    setLoading(true);
+    // Simulate API fetch delay
+    const timer = setTimeout(() => {
+      // In a real app we'd fetch from /api/v1/leaderboard/global/${metric}
+      setData(MOCK_LEADERBOARDS[metric]);
+      setLoading(false);
+    }, 400);
+    return () => clearTimeout(timer);
+  }, [metric]);
+
+  return (
+    <>
+      <div className="min-h-screen bg-surface-50 dark:bg-surface-950 pt-10 pb-20 text-surface-900 dark:text-white transition-colors duration-300">
+        <div className="max-w-4xl mx-auto px-6">
+          <header className="mb-10 text-center">
+            <h1 className="text-4xl sm:text-5xl font-black mb-4 tracking-tight">Leaderboards</h1>
+            <p className="text-surface-500 dark:text-surface-400 text-lg">Compare your progress, streaks, and ELO against the world.</p>
+          </header>
+
+          <div className="flex flex-col md:flex-row gap-6 mb-8">
+            {/* Metrics */}
+            <div className="flex bg-surface-200 dark:bg-surface-800 p-1 rounded-xl w-full md:w-auto mx-auto md:mx-0">
+              <button 
+                className={`flex-1 md:flex-none flex items-center justify-center gap-2 px-6 py-2.5 rounded-lg text-sm font-bold transition-all ${metric === "streak" ? "bg-white dark:bg-surface-950 shadow text-orange-500" : "text-surface-500 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white"}`}
+                onClick={() => setMetric("streak")}
+              >
+                <FiTrendingUp className="w-4 h-4" /> Streaks
+              </button>
+              <button 
+                className={`flex-1 md:flex-none flex items-center justify-center gap-2 px-6 py-2.5 rounded-lg text-sm font-bold transition-all ${metric === "arena" ? "bg-white dark:bg-surface-950 shadow text-purple-500" : "text-surface-500 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white"}`}
+                onClick={() => setMetric("arena")}
+              >
+                <FiTarget className="w-4 h-4" /> Arena ELO
+              </button>
+            </div>
+          </div>
+
+          <div className="bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 rounded-2xl shadow-sm overflow-hidden">
+            {/* Header row */}
+            <div className="grid grid-cols-[60px_1fr_100px] items-center p-4 border-b border-surface-100 dark:border-surface-800 text-sm font-bold text-surface-500 dark:text-surface-400 bg-surface-50 dark:bg-surface-950">
+              <div className="text-center">Rank</div>
+              <div>User</div>
+              <div className="text-right">{metric === "streak" ? "Streak Days" : "Rating"}</div>
+            </div>
+
+            {/* List */}
+            {loading ? (
+              <div className="flex justify-center py-16">
+                <div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
+              </div>
+            ) : data.length > 0 ? (
+              <div className="divide-y divide-surface-100 dark:divide-surface-800">
+                {data.map((entry, idx) => (
+                  <div key={idx} className="grid grid-cols-[60px_1fr_100px] items-center p-4 hover:bg-surface-50 dark:hover:bg-surface-950/50 transition-colors">
+                    <div className="flex justify-center">
+                      {entry.rank === 1 ? <FiAward className="w-6 h-6 text-yellow-500" /> :
+                       entry.rank === 2 ? <FiAward className="w-6 h-6 text-gray-400" /> :
+                       entry.rank === 3 ? <FiAward className="w-6 h-6 text-amber-700" /> :
+                       <span className="font-bold text-surface-500">{entry.rank}</span>}
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <img src={entry.avatarUrl} alt="Avatar" className="w-10 h-10 rounded-full bg-surface-200" />
+                      <span className="font-bold text-base">{entry.username}</span>
+                    </div>
+                    <div className="text-right font-black text-lg font-mono">
+                      {entry.score}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-16 text-surface-500">
+                No data available for this category yet.
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+}
diff --git a/src/app/loading.jsx b/src/app/loading.jsx
new file mode 100644
index 000000000..da5ec2035
--- /dev/null
+++ b/src/app/loading.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Loader2 } from "lucide-react";
+
+// The custom spinner sub-layout
+const LoadingSpinner = () => {
+  return (
+    <div className="relative flex items-center justify-center">
+      {/* Outer glowing pulsing ring */}
+      <div className="absolute w-20 h-20 rounded-full border-4 border-indigo-500/20 dark:border-purple-500/20 animate-ping" />
+      
+      {/* Rotating Lucide loader icon */}
+      <Loader2 className="h-16 w-16 animate-spin text-indigo-600 dark:text-purple-500" />
+      
+      {/* Centered Code Brackets {} representing AlgoBuddy */}
+      <div className="absolute font-mono text-xl font-bold bg-gradient-to-r from-indigo-500 to-purple-500 bg-clip-text text-transparent animate-pulse">
+        {"{ }"}
+      </div>
+    </div>
+  );
+};
+
+// Main Next.js default page export
+export default function Loading() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-white dark:bg-slate-950 transition-colors duration-300">
+      <div className="flex flex-col items-center gap-6">
+        
+        {/* Render the spinner markup */}
+        <LoadingSpinner />
+        
+        {/* Brand status text */}
+        <div className="text-center">
+          <h2 className="text-base font-semibold tracking-wide text-gray-700 dark:text-gray-300 animate-pulse">
+            Initializing AlgoBuddy...
+          </h2>
+          <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
+            Optimizing your workspace
+          </p>
+        </div>
+
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/my-applications/page.jsx b/src/app/my-applications/page.jsx
new file mode 100644
index 000000000..ff0aeb82a
--- /dev/null
+++ b/src/app/my-applications/page.jsx
@@ -0,0 +1,171 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Briefcase, MapPin, Calendar, Download, ChevronLeft, ChevronRight } from "lucide-react";
+
+const statusStyles = {
+  pending: "bg-yellow-100 text-yellow-800",
+  accepted: "bg-green-100 text-green-800",
+  rejected: "bg-red-100 text-red-800",
+};
+
+const statusLabels = {
+  pending: "Pending",
+  accepted: "Accepted",
+  rejected: "Rejected",
+};
+
+export default function MyApplicationsPage() {
+  const [applications, setApplications] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [exporting, setExporting] = useState(false);
+
+  async function fetchApplications(page) {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/applications?page=${page}&limit=50`);
+      const data = await res.json();
+      setApplications(data.applications || []);
+      setTotalPages(data.totalPages || 0);
+      setCurrentPage(data.currentPage || 1);
+    } catch (err) {
+      console.error("Failed to fetch applications:", err);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleExport() {
+    setExporting(true);
+    try {
+      const res = await fetch("/api/applications/export");
+      if (!res.ok) throw new Error("Export failed");
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `applications-export-${Date.now()}.csv`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error("Export error:", err);
+    } finally {
+      setExporting(false);
+    }
+  }
+
+  useEffect(() => {
+    fetchApplications(currentPage);
+  }, [currentPage]);
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-10 px-4">
+      <div className="max-w-4xl mx-auto">
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">My Applications</h1>
+            <p className="text-gray-600 mt-1">
+              {applications.length > 0
+                ? `You have applied to ${applications.length} job${applications.length !== 1 ? "s" : ""}`
+                : "Track your job applications here"}
+            </p>
+          </div>
+          {applications.length > 0 && (
+            <button
+              onClick={handleExport}
+              disabled={exporting}
+              className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 rounded-lg hover:bg-indigo-100 disabled:opacity-50 transition-colors"
+            >
+              <Download className="h-4 w-4" />
+              {exporting ? "Exporting..." : "Export CSV"}
+            </button>
+          )}
+        </div>
+
+        {loading ? (
+          <div className="space-y-4">
+            {[...Array(5)].map((_, i) => (
+              <div key={i} className="bg-white rounded-xl shadow-sm p-6 animate-pulse">
+                <div className="h-5 bg-gray-200 rounded w-3/4 mb-3" />
+                <div className="h-4 bg-gray-200 rounded w-1/2 mb-2" />
+                <div className="h-4 bg-gray-200 rounded w-1/3" />
+              </div>
+            ))}
+          </div>
+        ) : applications.length === 0 ? (
+          <div className="text-center py-20">
+            <Briefcase className="mx-auto h-12 w-12 text-gray-400" />
+            <h2 className="mt-4 text-xl font-semibold text-gray-600">No applications yet</h2>
+            <p className="text-gray-500 mt-1">Apply to jobs from the student jobs page to see them here.</p>
+          </div>
+        ) : (
+          <>
+            <div className="space-y-4">
+              {applications.map((app) => (
+                <div key={app.id} className="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex-1 min-w-0">
+                      <h2 className="text-xl font-semibold text-gray-900">
+                        {app.job?.title || "Unknown Position"}
+                      </h2>
+                      <p className="text-indigo-600 font-medium mt-1">{app.job?.company || ""}</p>
+                      <div className="flex flex-wrap items-center gap-4 mt-3 text-sm text-gray-500">
+                        {app.job?.location && (
+                          <span className="flex items-center gap-1">
+                            <MapPin className="h-4 w-4" />
+                            {app.job.location}
+                          </span>
+                        )}
+                        {app.job?.job_type && (
+                          <span className="capitalize">{app.job.job_type.replace("-", " ")}</span>
+                        )}
+                        {app.job?.salary_range && (
+                          <span className="font-medium text-green-600">{app.job.salary_range}</span>
+                        )}
+                        <span className="flex items-center gap-1">
+                          <Calendar className="h-4 w-4" />
+                          Applied {new Date(app.applied_at).toLocaleDateString()}
+                        </span>
+                      </div>
+                    </div>
+                    <span
+                      className={`shrink-0 px-3 py-1 rounded-full text-xs font-semibold ${
+                        statusStyles[app.status] || "bg-gray-100 text-gray-800"
+                      }`}
+                    >
+                      {statusLabels[app.status] || app.status}
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {totalPages > 1 && (
+              <div className="flex items-center justify-center gap-2 mt-8">
+                <button
+                  onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                  disabled={currentPage === 1}
+                  className="flex items-center gap-1 px-4 py-2 text-sm font-medium rounded-lg border border-gray-300 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <ChevronLeft className="h-4 w-4" /> Previous
+                </button>
+                <span className="text-sm text-gray-600">
+                  Page {currentPage} of {totalPages}
+                </span>
+                <button
+                  onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                  disabled={currentPage === totalPages}
+                  className="flex items-center gap-1 px-4 py-2 text-sm font-medium rounded-lg border border-gray-300 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  Next <ChevronRight className="h-4 w-4" />
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/not-found.jsx b/src/app/not-found.jsx
new file mode 100644
index 000000000..a14e34925
--- /dev/null
+++ b/src/app/not-found.jsx
@@ -0,0 +1,95 @@
+"use client";
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { ArrowLeft, Home, Zap } from 'lucide-react';
+
+const NotFoundPage = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window.gtag) {
+      window.gtag('event', 'page_view', {
+        page_title: '404 Not Found',
+        page_path: window.location.pathname,
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    document.body.classList.add('page-loaded');
+  }, []);
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center text-center px-4 bg-gradient-to-br from-surface-50 to-white dark:from-surface-900 dark:to-surface-800 transition-colors duration-300 overflow-hidden">
+      {/* Animated background elements */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-1/4 -left-20 w-64 h-64 bg-primary/10 rounded-full filter blur-3xl animate-float-slow"></div>
+        <div className="absolute bottom-1/3 -right-20 w-72 h-72 bg-primary/10 rounded-full filter blur-3xl animate-float-slower"></div>
+      </div>
+
+      <div className="max-w-md w-full space-y-6 transform transition-all duration-500 opacity-0 translate-y-10 page-loaded:opacity-100 page-loaded:translate-y-0 relative z-10">
+        {/* Broken plug animation */}
+        <div className="relative mx-auto w-40 h-40 mb-8">
+          {/* Plug base */}
+          <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-24 h-32 bg-surface-300 dark:bg-surface-600 rounded-lg">
+          <div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-24 h-6 bg-surface-500 dark:bg-surface-800 rounded-lg">
+          {/* Plug pins - broken animation */}
+            <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex space-x-6">
+              <div className="relative">
+                <div className="w-3 h-8 bg-surface-400 dark:bg-surface-500 rounded-t-sm animate-bounce-pin-1"></div>
+                <div className="absolute top-0 left-1/2 w-1 h-2 bg-yellow-400 transform -translate-x-1/2 animate-spark-1 opacity-0"></div>
+              </div>
+              <div className="relative">
+                <div className="w-3 h-10 bg-surface-400 dark:bg-surface-500 rounded-t-sm animate-bounce-pin-2"></div>
+                <div className="absolute top-0 left-1/2 w-1 h-2 bg-yellow-400 transform -translate-x-1/2 animate-spark-2 opacity-0"></div>
+              </div>
+            </div>
+            </div>
+            {/* Red cross icon */}
+            <div className="absolute top-1/2 left-1/2 w-10 h-10 flex items-center justify-center transform -translate-x-1/2 -translate-y-1/2">
+                <div className="absolute w-10 h-2 bg-red-400 rounded-full rotate-45"></div>
+                <div className="absolute w-10 h-2 bg-red-400 rounded-full -rotate-45"></div>
+            </div>
+            </div>
+          <Zap className="absolute top-4 left-1/2 w-8 h-8 text-yellow-400 transform -translate-x-1/2 animate-zap-pulse opacity-0" />
+        </div>
+
+        {/* Content */}
+        <div className="space-y-4">
+          <h1 className="text-4xl font-bold text-surface-900 dark:text-white">
+            Connection Lost
+          </h1>
+          <p className="text-lg text-surface-600 dark:text-surface-400">
+            The page you're trying to reach seems to be unplugged or doesn't exist.
+          </p>
+        </div>
+
+        {/* Action buttons */}
+        <div className="flex flex-col sm:flex-row justify-center gap-4 pt-8">
+          <button
+            onClick={() => router.back()}
+            className="flex items-center justify-center gap-2 px-6 py-3 bg-surface-100 dark:bg-surface-700 hover:bg-surface-200 dark:hover:bg-surface-600 text-surface-800 dark:text-surface-200 rounded-lg font-medium transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md"
+          >
+            <ArrowLeft className="w-5 h-5" />
+            Go Back
+          </button>
+          <Link
+            href="/"
+            className="flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-primary to-primary-dark dark:from-primary-dark dark:to-primary text-white rounded-lg font-medium transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-primary/20"
+          >
+            <Home className="w-5 h-5" />
+            Return Home
+          </Link>
+        </div>
+
+        {/* Footer note */}
+        <p className="pt-12 text-sm text-surface-500 dark:text-surface-400">
+          Still stuck? <Link href="/contact" className="text-primary dark:text-primary-light hover:underline">Contact support</Link>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default NotFoundPage;
diff --git a/src/app/notifications/page.jsx b/src/app/notifications/page.jsx
new file mode 100644
index 000000000..22aa29793
--- /dev/null
+++ b/src/app/notifications/page.jsx
@@ -0,0 +1,144 @@
+"use client";
+import React, { useState } from "react";
+import Link from "next/link";
+import { useNotifications } from "@/features/notifications/NotificationContext";
+import NotificationCard from "@/app/components/notifications/NotificationCard";
+import { Bell, CheckSquare, Trash2, ArrowLeft } from "lucide-react";
+
+const CATEGORIES = ["All", "Unread", "Achievement", "Practice", "System", "Blog", "Community", "Announcement", "Streak"];
+
+export default function NotificationsPage() {
+  const { notifications, unreadCount, markAllAsRead, clearAll } = useNotifications();
+  const [activeFilter, setActiveFilter] = useState("All");
+
+  const filteredNotifications = notifications.filter(n => {
+    if (activeFilter === "All") return true;
+    if (activeFilter === "Unread") return !n.read;
+    return n.category === activeFilter;
+  });
+
+  return (
+    <div className="min-h-screen bg-surface-50 dark:bg-udemy-dark-bg py-12 px-6">
+      <div className="max-w-5xl mx-auto">
+        {/* Header */}
+        <div className="mb-8">
+          <Link
+            href="/"
+            className="inline-flex items-center text-sm font-medium text-surface-500 hover:text-surface-900 dark:text-surface-400 dark:hover:text-white transition-colors mb-6"
+          >
+            <ArrowLeft className="w-4 h-4 mr-2" /> Return Home
+          </Link>
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+            <div>
+              <h1 className="text-3xl font-bold text-surface-900 dark:text-white flex items-center gap-3">
+                <Bell className="w-8 h-8 text-primary" />
+                Notifications
+              </h1>
+              <p className="text-surface-600 dark:text-surface-400 mt-2">
+                Stay updated on your AlgoBuddy progress and community activity.
+              </p>
+            </div>
+            
+            <div className="flex items-center gap-3">
+              {unreadCount > 0 && (
+                <button
+                  onClick={markAllAsRead}
+                  className="inline-flex items-center px-4 py-2 text-sm font-medium text-primary bg-primary/10 hover:bg-primary/20 dark:bg-primary/20 dark:hover:bg-primary/30 rounded-lg transition-colors"
+                >
+                  <CheckSquare className="w-4 h-4 mr-2" />
+                  Mark all read
+                </button>
+              )}
+              {notifications.length > 0 && (
+                <button
+                  onClick={clearAll}
+                  className="inline-flex items-center px-4 py-2 text-sm font-medium text-danger bg-danger/10 hover:bg-danger/20 dark:bg-danger/20 dark:hover:bg-danger/30 rounded-lg transition-colors"
+                >
+                  <Trash2 className="w-4 h-4 mr-2" />
+                  Clear all
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="grid lg:grid-cols-[200px_1fr] gap-8 items-start">
+          {/* Sidebar Filters */}
+          <aside className="sticky top-24 bg-white dark:bg-[#14141A] rounded-xl border border-surface-200 dark:border-[#2A2A35] p-4 shadow-sm">
+            <h2 className="text-xs font-bold uppercase tracking-wider text-surface-500 dark:text-surface-400 mb-4 px-3">
+              Filters
+            </h2>
+            <nav className="space-y-1">
+              {CATEGORIES.map(category => {
+                const count = category === "All" 
+                  ? notifications.length 
+                  : category === "Unread"
+                    ? unreadCount
+                    : notifications.filter(n => n.category === category).length;
+
+                return (
+                  <button
+                    key={category}
+                    onClick={() => setActiveFilter(category)}
+                    className={`w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg transition-colors ${
+                      activeFilter === category 
+                        ? "bg-primary/10 text-primary font-semibold dark:bg-primary/20" 
+                        : "text-surface-700 dark:text-surface-300 hover:bg-surface-50 dark:hover:bg-udemy-dark-surface"
+                    }`}
+                  >
+                    <span>{category}</span>
+                    {count > 0 && (
+                      <span className={`px-2 py-0.5 rounded-full text-xs ${
+                        activeFilter === category
+                          ? "bg-primary/20 text-primary-dark dark:text-primary-light"
+                          : "bg-surface-100 text-surface-600 dark:bg-surface-800 dark:text-surface-400"
+                      }`}>
+                        {count}
+                      </span>
+                    )}
+                  </button>
+                );
+              })}
+            </nav>
+          </aside>
+
+          {/* Notifications List */}
+          <div className="bg-white dark:bg-[#14141A] rounded-xl border border-surface-200 dark:border-[#2A2A35] shadow-sm overflow-hidden">
+            {filteredNotifications.length > 0 ? (
+              <div className="flex flex-col">
+                {filteredNotifications.map(notification => (
+                  <NotificationCard 
+                    key={notification.id} 
+                    notification={notification} 
+                  />
+                ))}
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center p-12 text-center">
+                <div className="w-16 h-16 bg-surface-100 dark:bg-surface-800 rounded-full flex items-center justify-center mb-4">
+                  <Bell className="w-8 h-8 text-surface-400" />
+                </div>
+                <h3 className="text-xl font-bold text-surface-900 dark:text-white mb-2">
+                  No notifications found
+                </h3>
+                <p className="text-surface-600 dark:text-surface-400 max-w-sm">
+                  {activeFilter === "All" 
+                    ? "You're all caught up! There are no notifications to show."
+                    : `You don't have any notifications in the "${activeFilter}" category.`}
+                </p>
+                {activeFilter !== "All" && (
+                  <button
+                    onClick={() => setActiveFilter("All")}
+                    className="mt-6 px-6 py-2 bg-primary text-white font-medium rounded-full hover:bg-primary-dark transition-colors"
+                  >
+                    View all notifications
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/practice/[topic]/page.jsx b/src/app/practice/[topic]/page.jsx
new file mode 100644
index 000000000..f1af24a07
--- /dev/null
+++ b/src/app/practice/[topic]/page.jsx
@@ -0,0 +1,372 @@
+"use client";
+
+import React, { useEffect, useState, useMemo } from "react";
+import Link from "next/link";
+import { useRouter, useParams } from "next/navigation";
+import { FiChevronLeft, FiExternalLink, FiVideo, FiBookOpen, FiBookmark } from "react-icons/fi";
+import { toast } from "react-hot-toast";
+import Footer from "@/app/components/footer";
+import TheoryDrawer from "@/app/components/practice/TheoryDrawer";
+import CompanyLogos from "@/app/components/practice/CompanyLogos";
+import { practiceData } from "@/lib/practiceData";
+import { useProblemBookmarks } from "@/app/hooks/useProblemBookmarks";
+import { useSheetProgress } from "@/app/hooks/useSheetProgress";
+import { useUser } from "@/features/user/UserContext";
+
+export default function TopicPracticeSheet() {
+  const router = useRouter();
+  const params = useParams();
+  const { user } = useUser();
+  const topicSlug = params?.topic;
+
+  const { progress, updateProgress } = useSheetProgress();
+  const [selectedProblem, setSelectedProblem] = useState(null);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  const ensureLoggedIn = () => {
+    if (!user) {
+      toast.error("Please login to use this feature!");
+      router.push("/login");
+      return false;
+    }
+    return true;
+  };
+
+  const { isBookmarked, toggleBookmark } = useProblemBookmarks();
+
+  // Retrieve topic definition matching param slug
+  const topic = useMemo(() => {
+    return practiceData.find((t) => t.slug === topicSlug);
+  }, [topicSlug]);
+
+  // Specific topic theme mappings
+  const TOPIC_THEME = useMemo(() => ({
+    array: { color: "#a435f0", bg: "from-purple-50/50 via-white to-purple-50/10", darkBg: "dark:from-purple-950/10 dark:to-[#1c1d1f]", badge: "bg-purple-100 text-purple-700 dark:bg-purple-950/30 dark:text-purple-300" },
+    "linked-list": { color: "#d97706", bg: "from-amber-50/50 via-white to-amber-50/10", darkBg: "dark:from-amber-950/10 dark:to-[#1c1d1f]", badge: "bg-amber-100 text-amber-700 dark:bg-amber-950/30 dark:text-amber-300" },
+    "stack-queue": { color: "#2563eb", bg: "from-blue-50/50 via-white to-blue-50/10", darkBg: "dark:from-blue-950/10 dark:to-[#1c1d1f]", badge: "bg-blue-100 text-blue-700 dark:bg-blue-950/30 dark:text-blue-300" },
+    recursion: { color: "#0f766e", bg: "from-teal-50/50 via-white to-teal-50/10", darkBg: "dark:from-teal-950/10 dark:to-[#1c1d1f]", badge: "bg-teal-100 text-teal-700 dark:bg-teal-950/30 dark:text-teal-300" },
+    tree: { color: "#7c3aed", bg: "from-violet-50/50 via-white to-violet-50/10", darkBg: "dark:from-violet-950/10 dark:to-[#1c1d1f]", badge: "bg-violet-100 text-violet-700 dark:bg-violet-950/30 dark:text-violet-300" },
+    graph: { color: "#dc2626", bg: "from-red-50/50 via-white to-red-50/10", darkBg: "dark:from-red-950/10 dark:to-[#1c1d1f]", badge: "bg-red-100 text-red-700 dark:bg-red-950/30 dark:text-red-300" },
+    dp: { color: "#db2777", bg: "from-pink-50/50 via-white to-pink-50/10", darkBg: "dark:from-pink-950/10 dark:to-[#1c1d1f]", badge: "bg-pink-100 text-pink-700 dark:bg-pink-950/30 dark:text-pink-300" },
+  }), []);
+
+  const t = useMemo(() => {
+    return TOPIC_THEME[topicSlug] || TOPIC_THEME.array;
+  }, [topicSlug, TOPIC_THEME]);
+
+  // Compute specific topic completion stats
+  const tStats = useMemo(() => {
+    if (!topic) return { total: 0, solved: 0, pct: 0, easy: { total: 0, solved: 0 }, medium: { total: 0, solved: 0 }, hard: { total: 0, solved: 0 } };
+    let total = 0;
+    let solved = 0;
+    let easy = 0, easySolved = 0;
+    let medium = 0, mediumSolved = 0;
+    let hard = 0, hardSolved = 0;
+
+    topic.subsections.forEach((sub) => {
+      sub.items.forEach((item) => {
+        total++;
+        // progress entries from useSheetProgress are { status, updatedAt } objects
+        const entry = progress[item.id];
+        const statusStr = entry
+          ? (typeof entry === "object" ? entry.status : entry)
+          : "Not Started";
+        if (statusStr === "Completed") {
+          solved++;
+        }
+        if (item.difficulty === "Easy") {
+          easy++;
+          if (statusStr === "Completed") easySolved++;
+        } else if (item.difficulty === "Medium") {
+          medium++;
+          if (statusStr === "Completed") mediumSolved++;
+        } else if (item.difficulty === "Hard") {
+          hard++;
+          if (statusStr === "Completed") hardSolved++;
+        }
+      });
+    });
+
+    return {
+      total,
+      solved,
+      pct: total > 0 ? Math.round((solved / total) * 100) : 0,
+      easy: { total: easy, solved: easySolved },
+      medium: { total: medium, solved: mediumSolved },
+      hard: { total: hard, solved: hardSolved },
+    };
+  }, [topic, progress]);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!topic) {
+    return (
+      <div className="min-h-screen flex flex-col justify-between bg-white dark:bg-[#1c1d1f]">
+          <div className="flex-1 flex flex-col items-center justify-center text-center p-8">
+          <h2 className="text-3xl font-black mb-4">Topic Not Found</h2>
+          <p className="text-surface-500 dark:text-surface-400 mb-6">The requested roadmap category does not exist.</p>
+          <Link href="/practice" className="px-6 py-3 rounded-full bg-primary text-white font-bold">
+            Return to Practice Sheet
+          </Link>
+        </div>
+        <Footer />
+      </div>
+    );
+  }
+
+  const handleStatusChange = async (problemId, newStatus) => {
+    if (!ensureLoggedIn()) return;
+    await updateProgress(problemId, newStatus);
+    if (newStatus === "Completed") {
+      toast.success("Problem marked as Completed! 🔥", {
+        style: { background: "#22c55e", color: "#fff", fontWeight: "bold" },
+      });
+    } else {
+      toast.success(`Status updated to ${newStatus}`);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-surface-900 dark:text-white transition-colors duration-300">
+
+      <main className="max-w-[1100px] mx-auto px-5 py-12">
+        {/* Breadcrumb & Navigation */}
+        <div className="mb-8">
+          <Link
+            href="/practice"
+            className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:opacity-80 transition"
+          >
+            <FiChevronLeft size={16} /> Back to Practice Sheet
+          </Link>
+        </div>
+
+        {/* Topic Header Card */}
+        <div className={`p-6 sm:p-8 rounded-3xl border border-surface-200 dark:border-neutral-800 bg-gradient-to-br ${t.bg} ${t.darkBg} shadow-sm mb-10`}>
+          <div className="grid grid-cols-1 md:grid-cols-[1.8fr_1.2fr] gap-6 items-center">
+            <div>
+              <div className="flex items-center gap-2 mb-3">
+                <span className={`px-3 py-1 text-[10px] font-extrabold uppercase tracking-wider rounded-full ${t.badge}`}>
+                  Mastery Roadmap
+                </span>
+              </div>
+              <h1 className="text-3xl sm:text-4xl font-black mb-3">{topic.title}</h1>
+              <p className="text-sm text-surface-600 dark:text-surface-400 leading-relaxed max-w-2xl font-poppins">
+                {topic.desc}
+              </p>
+            </div>
+
+            {/* Completion metrics for the specific topic */}
+            <div className="p-5 rounded-2xl bg-white/60 dark:bg-neutral-900/60 border border-surface-200/50 dark:border-neutral-800 backdrop-blur-sm flex flex-col justify-between h-full space-y-4">
+              <div>
+                <div className="flex justify-between text-[10px] font-bold text-surface-400 dark:text-surface-300 mb-1.5 uppercase tracking-wider">
+                  <span>Topic Completion</span>
+                  <span>{mounted ? `${tStats.pct}%` : "0%"}</span>
+                </div>
+                <div className="w-full h-1.5 bg-surface-100 dark:bg-neutral-800 rounded-full overflow-hidden">
+                  <div
+                    className="h-full transition-all duration-500 rounded-full"
+                    style={{
+                      width: mounted ? `${tStats.pct}%` : "0%",
+                      background: t.color
+                    }}
+                  />
+                </div>
+              </div>
+
+              <div className="flex justify-between items-center text-xs font-semibold text-surface-600 dark:text-surface-300 pt-2 border-t border-dashed">
+                <span>Solved: <strong className="text-surface-900 dark:text-white">{mounted ? tStats.solved : 0}</strong> / {tStats.total}</span>
+                <div className="flex gap-1.5">
+                  {tStats.easy.total > 0 && (
+                    <span className="px-2 py-0.5 rounded bg-green-50 dark:bg-green-950/20 text-green-600 dark:text-green-400 text-[10px] font-bold">
+                      E: {tStats.easy.solved}/{tStats.easy.total}
+                    </span>
+                  )}
+                  {tStats.medium.total > 0 && (
+                    <span className="px-2 py-0.5 rounded bg-yellow-50 dark:bg-yellow-950/20 text-yellow-600 dark:text-yellow-450 text-[10px] font-bold">
+                      M: {tStats.medium.solved}/{tStats.medium.total}
+                    </span>
+                  )}
+                  {tStats.hard.total > 0 && (
+                    <span className="px-2 py-0.5 rounded bg-red-50 dark:bg-red-950/20 text-red-600 dark:text-red-450 text-[10px] font-bold">
+                      H: {tStats.hard.solved}/{tStats.hard.total}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Subsection roadmaps and problem tables */}
+        <div className="space-y-12">
+          {topic.subsections.map((sub, sIdx) => (
+            <div key={sIdx} className="space-y-4">
+              <div className="flex items-center gap-3.5 mb-2">
+                <h2 className="text-xl sm:text-2xl font-black text-surface-900 dark:text-white pl-3.5 border-l-4" style={{ borderColor: t.color }}>
+                  {sub.title}
+                </h2>
+                <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold ${sub.title === "Beginner" ? "bg-green-100 text-green-700 dark:bg-green-950/30 dark:text-green-400" :
+                    sub.title === "Intermediate" ? "bg-yellow-100 text-yellow-750 dark:bg-yellow-950/30 dark:text-yellow-400" :
+                      "bg-purple-100 text-purple-700 dark:bg-purple-950/30 dark:text-purple-300"
+                  }`}>
+                  Tier {sub.title === "Beginner" ? "1" : sub.title === "Intermediate" ? "2" : "3"}
+                </span>
+              </div>
+
+              {/* Table Container */}
+              <div className="overflow-x-auto bg-white dark:bg-[#2d2f31] border border-surface-200 dark:border-neutral-800 rounded-2xl shadow-sm">
+                <table className="w-full text-left border-collapse min-w-[700px]">
+                  <thead>
+                    <tr className="bg-surface-50/60 dark:bg-neutral-800/60 text-[10px] font-extrabold uppercase tracking-wider text-surface-500 border-b border-surface-200 dark:border-neutral-800">
+                      <th className="py-4 px-6">Problem</th>
+                      <th className="py-4 px-6 text-center">Theory</th>
+                      <th className="py-4 px-6 text-center">Visualizer</th>
+                      <th className="py-4 px-6 text-center">Practice</th>
+                      <th className="py-4 px-6 text-center">Difficulty</th>
+                      <th className="py-4 px-6 text-center">Companies</th>
+                      <th className="py-4 px-6 text-center">Status</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {sub.items.map((item) => {
+                      const entry = progress[item.id];
+                      const status = entry
+                        ? (typeof entry === "object" ? entry.status : entry)
+                        : "Not Started";
+                      return (
+                        <tr
+                          key={item.id}
+                          className="border-b border-surface-100 dark:border-neutral-800 hover:bg-surface-50/50 dark:hover:bg-neutral-800/40 transition-colors"
+                        >
+                          {/* Name */}
+                          <td className="py-4 px-6 font-bold text-sm text-surface-900 dark:text-white">
+                            <div className="flex items-center gap-2.5">
+                              <button
+                                onClick={() => {
+                                  if (!ensureLoggedIn()) return;
+                                  toggleBookmark(item.id, topicSlug);
+                                }}
+                                className={`p-1.5 rounded-lg border transition hover:scale-105 active:scale-95 duration-200 ${
+                                  mounted && isBookmarked(item.id)
+                                    ? "bg-amber-500/10 border-amber-500/30 text-amber-500 dark:bg-amber-950/20"
+                                    : "bg-surface-50/20 border-surface-200/50 text-surface-400 hover:text-surface-600 dark:border-neutral-800 dark:text-neutral-500 dark:hover:text-neutral-300"
+                                }`}
+                                title={mounted && isBookmarked(item.id) ? "Unbookmark problem" : "Bookmark problem"}
+                              >
+                                <FiBookmark size={14} className={mounted && isBookmarked(item.id) ? "fill-amber-500 text-amber-500" : ""} />
+                              </button>
+                              <span>{item.name}</span>
+                            </div>
+                          </td>
+
+                          {/* Theory Link */}
+                          <td className="py-4 px-6 text-center">
+                            <button
+                              onClick={() => {
+                                setSelectedProblem(item);
+                                setIsDrawerOpen(true);
+                              }}
+                              className="inline-flex items-center gap-1.5 text-xs font-bold px-3 py-1.5 rounded-lg border hover:scale-105 active:scale-95 transition-all duration-200 shadow-sm"
+                              style={{
+                                color: t.color,
+                                background: `${t.color}0c`,
+                                borderColor: `${t.color}25`
+                              }}
+                            >
+                              <FiBookOpen size={13} style={{ stroke: t.color }} />
+                              View Theory
+                            </button>
+                          </td>
+
+                          {/* Visualizer Link */}
+                          <td className="py-4 px-6 text-center">
+                            {item.visualizerUrl ? (
+                              <Link
+                                href={item.visualizerUrl}
+                                className="inline-flex items-center gap-1.5 text-xs font-bold px-3 py-1.5 rounded-lg border hover:scale-105 active:scale-95 transition-all duration-200 shadow-sm"
+                                style={{
+                                  color: t.color,
+                                  background: `${t.color}0c`,
+                                  borderColor: `${t.color}25`
+                                }}
+                              >
+                                <FiVideo size={13} style={{ stroke: t.color }} />
+                                Visualizer
+                              </Link>
+                            ) : (
+                              <span className="text-xs text-surface-300 dark:text-neutral-700 font-semibold">N/A</span>
+                            )}
+                          </td>
+
+                          {/* Practice Link */}
+                          <td className="py-4 px-6 text-center">
+                            <a
+                              href={item.practiceUrl}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="inline-flex items-center gap-1 text-xs font-bold text-surface-600 dark:text-surface-300 hover:text-[#ffa116] hover:scale-105 transition-all duration-250"
+                            >
+                              LeetCode <FiExternalLink size={12} className="opacity-75" />
+                            </a>
+                          </td>
+
+                          {/* Difficulty */}
+                          <td className="py-4 px-6 text-center">
+                            <span className={`inline-block text-[11px] font-bold px-2.5 py-1 rounded-full ${item.difficulty === "Easy"
+                                ? "bg-green-50 text-green-700 dark:bg-green-950/30 dark:text-green-400"
+                                : item.difficulty === "Medium"
+                                  ? "bg-yellow-50 text-yellow-750 dark:bg-yellow-950/30 dark:text-yellow-400"
+                                  : "bg-red-50 text-red-700 dark:bg-red-950/30 dark:text-red-400"
+                              }`}>
+                              {item.difficulty}
+                            </span>
+                          </td>
+
+                          {/* Companies */}
+                          <td className="py-4 px-6 text-center">
+                            <CompanyLogos companies={item.companies} />
+                          </td>
+
+                          {/* Progress Status Dropdown */}
+                          <td className="py-4 px-6 text-center">
+                            <select
+                              value={mounted ? status : "Not Started"}
+                              onChange={(e) => handleStatusChange(item.id, e.target.value)}
+                              className="text-xs font-bold px-3 py-1.5 rounded-lg border focus:outline-none transition-all cursor-pointer shadow-sm hover:scale-[1.02]"
+                              style={{
+                                background: status === "Completed" ? t.color : status === "In Progress" ? `${t.color}0f` : "transparent",
+                                borderColor: status === "Completed" ? t.color : status === "In Progress" ? `${t.color}35` : undefined,
+                                color: status === "Completed" ? "#fff" : status === "In Progress" ? t.color : undefined
+                              }}
+                            >
+                              <option value="Not Started" className="text-surface-900 bg-white dark:bg-[#1c1d1f]">Not Started</option>
+                              <option value="In Progress" className="text-surface-900 bg-white dark:bg-[#1c1d1f]">In Progress</option>
+                              <option value="Completed" className="text-surface-900 bg-white dark:bg-[#1c1d1f]">Completed</option>
+                            </select>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          ))}
+        </div>
+      </main>
+
+      <Footer />
+
+      {/* Slide-out Theory Drawer */}
+      <TheoryDrawer
+        isOpen={isDrawerOpen}
+        onClose={() => setIsDrawerOpen(false)}
+        problem={selectedProblem}
+        topicSlug={topicSlug}
+      />
+    </div>
+  );
+}
diff --git a/src/app/practice/page.jsx b/src/app/practice/page.jsx
new file mode 100644
index 000000000..8d703366f
--- /dev/null
+++ b/src/app/practice/page.jsx
@@ -0,0 +1,1488 @@
+"use client";
+
+import React, { useEffect, useState, useMemo, useRef } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { toast } from "react-hot-toast";
+import {
+  Search,
+  ChevronDown,
+  Shuffle,
+  Bookmark,
+  CheckCircle2,
+  ChevronLeft,
+  ChevronRight,
+  ExternalLink,
+  BookOpen,
+  Play,
+  ScrollText,
+  History
+} from "lucide-react";
+
+import PracticeSidebar from "@/app/components/practice/PracticeSidebar";
+import PracticeDashboard from "@/app/components/practice/PracticeDashboard";
+import PracticeSessionBanner from "@/app/components/practice/PracticeSessionBanner";
+import PracticeNotebook from "@/app/components/practice/PracticeNotebook";
+import CompanyLogos from "@/app/components/practice/CompanyLogos";
+import TheoryDrawer from "@/app/components/practice/TheoryDrawer";
+import Footer from "@/app/components/footer";
+
+import { practiceData } from "@/lib/practiceData";
+import { useUser } from "@/features/user/UserContext";
+import { useProblemBookmarks } from "@/app/hooks/useProblemBookmarks";
+import { useSheetProgress } from "@/app/hooks/useSheetProgress";
+import { useMySheet } from "@/app/hooks/useMySheet";
+import { supabase } from "@/lib/supabase";
+
+function isSpringBootApi() {
+  return typeof window !== "undefined" && process.env.NEXT_PUBLIC_USE_SPRING_BOOT_API === "true";
+}
+
+function springBootApiBase() {
+  return process.env.NEXT_PUBLIC_SPRING_BOOT_API_URL || "http://localhost:8080";
+}
+
+export default function PracticePage() {
+  const { user, loading } = useUser();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Views: 'dashboard', 'practice-home', 'topic-wise', 'company-wise', 'bookmarks', 'recent-solved'
+  const [activeView, setActiveView] = useState("practice-home");
+  const [activeTab, setActiveTab] = useState(() => searchParams.get("tab") || "problems"); // 'problems', 'description', 'resources', 'discussion'
+
+  // Search & Filter state
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedTopic, setSelectedTopic] = useState("All Topics");
+  const [selectedCompanyFilter, setSelectedCompanyFilter] = useState("All");
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10;
+
+  // Topic dropdown (custom panel — mirrors NotificationDropdown pattern)
+  const [isTopicOpen, setIsTopicOpen] = useState(false);
+  const topicRef = useRef(null);
+  useEffect(() => {
+    const close = (e) => {
+      if (topicRef.current && !topicRef.current.contains(e.target)) setIsTopicOpen(false);
+    };
+    document.addEventListener("mousedown", close);
+    return () => document.removeEventListener("mousedown", close);
+  }, []);
+
+  // Selected problem for Theory Drawer
+  const [selectedProblem, setSelectedProblem] = useState(null);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  // Accordion Topic-wise state
+  const [expandedTopics, setExpandedTopics] = useState({});
+
+  // Topic-wise view state
+  const [selectedTopicWise, setSelectedTopicWise] = useState(practiceData[0]?.title || "Arrays");
+  const [isTopicLoading, setIsTopicLoading] = useState(false);
+
+  // Unified progress hook (replaces all inline progress/streak logic)
+  const { progress, getStatus, updateProgress, streakData, loading: progressLoading, error: progressError } = useSheetProgress();
+  const currentStreak = streakData.current;
+  const longestStreak = streakData.best;
+
+  // My Sheet hook
+  const { sheet, isInSheet, addToSheet, removeFromSheet, sheetCount } = useMySheet();
+
+  // Bookmarks hook
+  const { bookmarks, isBookmarked, toggleBookmark } = useProblemBookmarks();
+  const [mounted, setMounted] = useState(false);
+
+  // Mount
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Sync activeView and topic with the URL ?view= and ?topic= params so browser Back/Forward works
+  useEffect(() => {
+    let view = searchParams.get("view") || "practice-home";
+    if (view === "problem-list") view = "practice-home";
+    setActiveView(view);
+
+    if (view === "topic-wise") {
+      const topic = searchParams.get("topic");
+      if (topic) {
+        setSelectedTopicWise(topic);
+      } else {
+        setSelectedTopicWise(practiceData[0]?.title || "Arrays");
+      }
+    }
+  }, [searchParams]);
+
+  // Keep the active tab in the URL so browser Back/Forward can restore it.
+  useEffect(() => {
+    const tab = searchParams.get("tab") || "problems";
+    setActiveTab(tab);
+  }, [searchParams]);
+
+  const ensureLoggedIn = () => {
+    if (loading) return false;
+    if (!user) {
+      toast.error("Please login to use this feature!");
+      router.push("/login");
+      return false;
+    }
+    return true;
+  };
+
+  // Dynamically flatten all problems from practiceData (Zero Hardcoding!)
+  const allProblems = useMemo(() => {
+    const list = [];
+    practiceData.forEach((topic) => {
+      topic.subsections.forEach((sub) => {
+        sub.items.forEach((item) => {
+          list.push({
+            ...item,
+            topic: topic.title,
+            topicSlug: topic.slug,
+            time: item.difficulty === "Easy" ? "20m" : item.difficulty === "Medium" ? "30m" : "45m"
+          });
+        });
+      });
+    });
+    return list;
+  }, []);
+
+  const nextProblem = useMemo(() => {
+    return allProblems.find((p) => getStatus(p.id) !== "Completed") || null;
+  }, [allProblems, getStatus]);
+
+  // Compute Session Stats Dynamically from current loaded practiceData
+  const stats = useMemo(() => {
+    let solved = 0;
+    let attempted = 0;
+    let easyTotal = 0;
+    let mediumTotal = 0;
+    let hardTotal = 0;
+    let easySolved = 0;
+    let mediumSolved = 0;
+    let hardSolved = 0;
+    const uniqueCompanies = new Set();
+
+    const now = new Date();
+    const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const startOfWeek = new Date(now.getFullYear(), now.getMonth(), now.getDate() - now.getDay());
+    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+
+    let dailySolved = 0;
+    let weeklySolved = 0;
+    let monthlySolved = 0;
+
+    allProblems.forEach((prob) => {
+      const status = getStatus(prob.id);
+      const progInfo = progress[prob.id];
+      const updatedTimeStr = progInfo?.updatedAt || progInfo?.updated_at;
+
+      if (status === "Completed") {
+        solved++;
+        if (prob.difficulty === "Easy") easySolved++;
+        else if (prob.difficulty === "Medium") mediumSolved++;
+        else if (prob.difficulty === "Hard") hardSolved++;
+
+        if (updatedTimeStr) {
+          const updatedDate = new Date(updatedTimeStr);
+          if (updatedDate >= startOfToday) {
+            dailySolved++;
+          }
+          if (updatedDate >= startOfWeek) {
+            weeklySolved++;
+          }
+          if (updatedDate >= startOfMonth) {
+            monthlySolved++;
+          }
+        }
+      } else if (status === "In Progress") {
+        attempted++;
+      }
+
+      if (prob.difficulty === "Easy") easyTotal++;
+      else if (prob.difficulty === "Medium") mediumTotal++;
+      else if (prob.difficulty === "Hard") hardTotal++;
+
+      if (prob.companies) {
+        prob.companies.forEach((c) => uniqueCompanies.add(c.toLowerCase()));
+      }
+    });
+
+    const remaining = allProblems.length - solved - attempted;
+
+    const totalMinutes = allProblems.reduce((acc, p) => {
+      if (p.difficulty === "Easy") return acc + 20;
+      if (p.difficulty === "Medium") return acc + 30;
+      return acc + 45;
+    }, 0);
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    const estimatedTime = `${hours}h ${minutes}m`;
+
+    return {
+      solved,
+      dailySolved: Math.max(dailySolved, streakData.dailySolved || 0),
+      weeklySolved: Math.max(weeklySolved, streakData.weeklySolved || 0),
+      monthlySolved: Math.max(monthlySolved, streakData.monthlySolved || 0),
+      attempted,
+      remaining,
+      total: allProblems.length,
+      estimatedTime,
+      easyTotal,
+      mediumTotal,
+      hardTotal,
+      easySolved,
+      mediumSolved,
+      hardSolved,
+      companiesCount: uniqueCompanies.size
+    };
+  }, [allProblems, progress, getStatus, streakData]);
+
+  // Compute dynamic list of company badges and problem counts for the company-wise view
+  const companiesList = useMemo(() => {
+    const counts = {};
+    allProblems.forEach((prob) => {
+      if (prob.companies) {
+        prob.companies.forEach((c) => {
+          const name = c.charAt(0).toUpperCase() + c.slice(1);
+          counts[name] = (counts[name] || 0) + 1;
+        });
+      }
+
+    });
+    return Object.entries(counts).map(([name, count]) => ({ name, count }));
+  }, [allProblems]);
+
+  // Handle status circle toggle (Not Started -> In Progress -> Completed -> Not Started)
+  const handleStatusToggle = async (problemId, currentStatus) => {
+    if (!ensureLoggedIn()) return;
+    let nextStatus = "Not Started";
+    if (currentStatus === "Not Started" || !currentStatus) {
+      nextStatus = "In Progress";
+    } else if (currentStatus === "In Progress") {
+      nextStatus = "Completed";
+    }
+
+    // Delegate to the unified hook (handles local + server sync + streak)
+    await updateProgress(problemId, nextStatus);
+
+    if (nextStatus === "Completed") {
+      toast.success("Problem completed! Keep it up! 🏆");
+    } else if (nextStatus === "In Progress") {
+      toast.success("Problem marked as Attempted. ⏳");
+    } else {
+      toast.success("Problem status reset.");
+    }
+  };
+
+  // Compute Activity Feed dynamically from progress updates
+  const activityData = useMemo(() => {
+    const activities = [];
+    Object.entries(progress).forEach(([problemId, entry]) => {
+      if (!entry || typeof entry !== "object") return;
+      const { status, updatedAt } = entry;
+      if (status === "Not Started") return;
+
+      const prob = allProblems.find((p) => p.id === problemId);
+      if (!prob) return;
+
+      activities.push({
+        problemId,
+        title: status === "Completed" ? `Solved ${prob.name}` : `Attempted ${prob.name}`,
+        status,
+        updatedAt: new Date(updatedAt),
+        statusColor: status === "Completed" ? "bg-emerald-500" : "bg-amber-500"
+      });
+    });
+
+    // Sort by updatedAt descending
+    activities.sort((a, b) => b.updatedAt - a.updatedAt);
+
+    // Take top 10
+    const topActivities = activities.slice(0, 10);
+
+    const now = new Date();
+    return topActivities.map((act) => {
+      const diffMs = now - act.updatedAt;
+      const diffMins = Math.floor(diffMs / 60000);
+      const diffHrs = Math.floor(diffMins / 60);
+      const diffDays = Math.floor(diffHrs / 24);
+
+      let timeStr = "Just now";
+      if (diffMins > 0) {
+        if (diffMins < 60) {
+          timeStr = `${diffMins}m ago`;
+        } else if (diffHrs < 24) {
+          timeStr = `${diffHrs}h ago`;
+        } else {
+          timeStr = `${diffDays}d ago`;
+        }
+      }
+
+      return {
+        title: act.title,
+        time: timeStr,
+        statusColor: act.statusColor
+      };
+    });
+  }, [progress, allProblems]);
+
+  // Extract unique topics from dynamic list
+  const uniqueTopics = useMemo(() => {
+    const set = new Set(allProblems.map((p) => p.topic));
+    return ["All Topics", ...Array.from(set)];
+  }, [allProblems]);
+
+  // Filtered problems list (mockup table/flat table)
+  const filteredProblems = useMemo(() => {
+    let filtered = allProblems.filter((p) => {
+      const matchesSearch = p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        p.topic.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesTopic = selectedTopic === "All Topics" || p.topic === selectedTopic;
+
+      const matchesCompany = selectedCompanyFilter === "All" ||
+        (p.companies && p.companies.some(c => c.toLowerCase() === selectedCompanyFilter.toLowerCase()));
+
+      if (activeView === "bookmarks") {
+        return matchesSearch && matchesTopic && matchesCompany && isBookmarked(p.id);
+      }
+      if (activeView === "recent-solved") {
+        return matchesSearch && matchesTopic && matchesCompany && getStatus(p.id) === "Completed";
+      }
+      return matchesSearch && matchesTopic && matchesCompany;
+    });
+
+    if (activeView === "recent-solved") {
+      filtered.sort((a, b) => {
+        const timeA = progress[a.id]?.updatedAt ? new Date(progress[a.id].updatedAt).getTime() : 0;
+        const timeB = progress[b.id]?.updatedAt ? new Date(progress[b.id].updatedAt).getTime() : 0;
+        return timeB - timeA;
+      });
+    } else if (activeView === "bookmarks") {
+      filtered.sort((a, b) => {
+        const bA = bookmarks.find(x => x.id === a.id);
+        const bB = bookmarks.find(x => x.id === b.id);
+        const timeA = bA?.createdAt ? new Date(bA.createdAt).getTime() : 0;
+        const timeB = bB?.createdAt ? new Date(bB.createdAt).getTime() : 0;
+        return timeB - timeA;
+      });
+    }
+
+    return filtered;
+  }, [allProblems, searchQuery, selectedTopic, selectedCompanyFilter, activeView, bookmarks, progress, getStatus, isBookmarked]);
+
+  // Paginated problems
+  const paginatedProblems = useMemo(() => {
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    return filteredProblems.slice(startIndex, startIndex + itemsPerPage);
+  }, [filteredProblems, currentPage]);
+
+  const totalPages = Math.ceil(filteredProblems.length / itemsPerPage);
+
+  const handleShareSheet = async () => {
+    if (!ensureLoggedIn()) return;
+    if (sheetCount === 0) {
+      toast.error("Add problems to your sheet before sharing!");
+      return;
+    }
+
+    try {
+      if (isSpringBootApi()) {
+        const { data: { session } } = await supabase.auth.getSession();
+        const token = session?.access_token;
+        if (!token) {
+          toast.error("Session expired. Please log in again.");
+          return;
+        }
+        const headers = {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "application/json",
+        };
+        const results = await Promise.all(
+          Object.keys(sheet).map((problemId) =>
+            fetch(
+              `${springBootApiBase()}/api/v1/mysheet/${encodeURIComponent(problemId)}/visibility`,
+              {
+                method: "PATCH",
+                headers,
+                body: JSON.stringify({ isPublic: true }),
+              }
+            )
+          )
+        );
+        if (results.some((res) => !res.ok)) {
+          throw new Error("Failed to publish sheet");
+        }
+      } else {
+        const res = await fetch("/api/mysheet/share", { method: "POST" });
+        if (!res.ok) {
+          const data = await res.json().catch(() => ({}));
+          throw new Error(data.error || "Failed to publish sheet");
+        }
+      }
+
+      const shareUrl = `${window.location.origin}/practice/shared/${user.id}`;
+      await navigator.clipboard.writeText(shareUrl);
+      toast.success("Sheet published and link copied! 📋");
+    } catch (err) {
+      console.error("Share sheet error:", err);
+      toast.error(err.message || "Failed to share sheet. Please try again.");
+    }
+  };
+
+  // Solve random unsolved problem
+  const handleSolveRandom = () => {
+    if (!ensureLoggedIn()) return;
+    const unsolved = allProblems.filter((p) => getStatus(p.id) !== "Completed");
+    if (unsolved.length === 0) {
+      toast.error("Wow, you've completed all problems! 🎉");
+      return;
+    }
+    const randomProb = unsolved[Math.floor(Math.random() * unsolved.length)];
+    toast.success(`Here is your random challenge: ${randomProb.name}`);
+    window.open(randomProb.practiceUrl, "_blank");
+  };
+
+  // Accordion toggles for dynamic topic-wise view
+  const toggleAccordion = (slug) => {
+    setExpandedTopics((prev) => ({
+      ...prev,
+      [slug]: !prev[slug],
+    }));
+  };
+
+  // Get current user display name
+  const userName = useMemo(() => {
+    if (!user) return "Guest User";
+    return user.user_metadata?.name || user.email?.split("@")[0] || "Guest User";
+  }, [user]);
+
+  const dailyChallenge = useMemo(() => {
+    if (allProblems.length === 0) return null;
+    const daySeed = Math.floor(new Date().setHours(0, 0, 0, 0) / 86400000);
+    return allProblems[daySeed % allProblems.length];
+  }, [allProblems]);
+
+  // Seed values if not loaded
+  if (!mounted) return null;
+
+  return (
+    <div className="min-h-screen bg-slate-50/50 dark:bg-neutral-900 text-slate-800 dark:text-neutral-200 transition-colors duration-300">
+      {/* Container holding three-column layout */}
+      <div className="max-w-[1440px] mx-auto px-4 md:px-8 py-8 flex flex-col lg:flex-row gap-y-8 lg:gap-0">
+
+        {/* Left Sidebar */}
+        <PracticeSidebar
+          activeView={activeView}
+          onViewChange={(view) => {
+            if (["my-sheet", "bookmarks", "recent-solved"].includes(view)) {
+              if (!ensureLoggedIn()) return;
+            }
+
+            setCurrentPage(1);
+            setSelectedCompanyFilter("All");
+
+            // Push to URL so the browser records a history entry;
+            // the searchParams useEffect above will sync activeView in response.
+            if (view === "practice-home") {
+              router.push("/practice");
+            } else if (view === "topic-wise") {
+              router.push(`/practice?view=${view}&topic=${encodeURIComponent(selectedTopicWise)}`);
+            } else {
+              router.push(`/practice?view=${view}`);
+            }
+          }}
+          solvedCount={stats.solved}
+          dailySolved={stats.dailySolved}
+          weeklySolved={stats.weeklySolved}
+          monthlySolved={stats.monthlySolved}
+          dailyGoal={3}
+          weeklyGoal={10}
+          monthlyGoal={50}
+          streakDays={currentStreak}
+          bestStreak={longestStreak}
+          mySheetCount={sheetCount}
+          onBackToPractice={() => router.push("/")}
+          onBackToSessions={() => setActiveView("practice-home")}
+        />
+
+        {/* Center Content */}
+        <div className="flex-1 min-w-0 space-y-6 lg:ml-8">
+          {/* Main dashboard rendering based on activeView */}
+          {activeView === "dashboard" ? (
+            <PracticeDashboard
+              dailyChallenge={dailyChallenge}
+              solvedCount={stats.solved}
+              dailySolved={stats.dailySolved}
+              weeklySolved={stats.weeklySolved}
+              monthlySolved={stats.monthlySolved}
+              dailyGoal={3}
+              weeklyGoal={10}
+              monthlyGoal={50}
+              streakDays={currentStreak}
+              bestStreak={longestStreak}
+              solved={stats.solved}
+              attempted={stats.attempted}
+              remaining={stats.remaining}
+              total={stats.total}
+              estimatedTime={stats.estimatedTime}
+              easyCount={stats.easySolved}
+              mediumCount={stats.mediumSolved}
+              hardCount={stats.hardSolved}
+              totalEasy={stats.easyTotal}
+              totalMed={stats.mediumTotal}
+              totalHard={stats.hardTotal}
+              companiesCount={stats.companiesCount}
+              activityData={activityData}
+            />
+          ) : activeView === "my-sheet" ? (
+            /* ── MY SHEET VIEW ─────────────────────────────────────── */
+            <section className="space-y-5">
+              {/* Header */}
+              <div className="bg-gradient-to-br from-purple-600 to-violet-700 rounded-3xl p-6 md:p-8 text-white shadow-lg shadow-purple-500/20">
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                  <div>
+                    <div className="flex items-center gap-2.5 mb-2">
+                      <div className="w-8 h-8 rounded-xl bg-white/20 flex items-center justify-center">
+                        <ScrollText size={16} />
+                      </div>
+                      <span className="text-xs font-black uppercase tracking-widest text-purple-200">Personal Practice List</span>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <h2 className="text-2xl font-black">My Sheet</h2>
+                      {user && (
+                        <button
+                          onClick={handleShareSheet}
+                          className="px-2.5 py-1 bg-white/10 hover:bg-white/20 text-white rounded-xl text-xs font-bold transition flex items-center gap-1.5 border border-white/10"
+                          title="Share your sheet with others"
+                        >
+                          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" /><polyline points="16 6 12 2 8 6" /><line x1="12" y1="2" x2="12" y2="15" /></svg>
+                          <span>Share</span>
+                        </button>
+                      )}
+                    </div>
+                    <p className="text-sm text-purple-200 mt-1">
+                      {sheetCount > 0
+                        ? `${sheetCount} problem${sheetCount !== 1 ? 's' : ''} curated · ${Object.values(sheet).filter((_, i) => getStatus(Object.keys(sheet)[i]) === 'Completed').length} solved`
+                        : 'Add problems from the Problem List using the ＋ button'}
+                    </p>
+                  </div>
+                  {sheetCount > 0 && (
+                    <div className="flex gap-3">
+                      {['Easy', 'Medium', 'Hard'].map(diff => {
+                        const c = Object.keys(sheet).filter(id => {
+                          const p = allProblems.find(x => x.id === id);
+                          return p?.difficulty === diff;
+                        }).length;
+                        return c > 0 ? (
+                          <div key={diff} className="text-center bg-white/15 rounded-2xl px-4 py-2">
+                            <div className="text-lg font-black">{c}</div>
+                            <div className={`text-[10px] font-black uppercase ${diff === 'Easy' ? 'text-emerald-300' : diff === 'Medium' ? 'text-amber-300' : 'text-red-300'
+                              }`}>{diff}</div>
+                          </div>
+                        ) : null;
+                      })}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {sheetCount === 0 ? (
+                /* Empty state */
+                <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-3xl p-12 text-center shadow-sm">
+                  <div className="w-16 h-16 rounded-2xl bg-purple-500/10 flex items-center justify-center mx-auto mb-4">
+                    <ScrollText size={28} className="text-purple-500" />
+                  </div>
+                  <h3 className="text-base font-black text-slate-800 dark:text-white mb-2">Your sheet is empty</h3>
+                  <p className="text-sm text-slate-400 dark:text-neutral-500 max-w-sm mx-auto mb-5">
+                    Go to the Problem List and click the <strong>＋</strong> button on any problem to add it to your personal sheet.
+                  </p>
+                  <button
+                    onClick={() => setActiveView('practice-home')}
+                    className="px-5 py-2.5 bg-primary text-white rounded-xl text-sm font-bold transition hover:bg-primary-dark"
+                  >
+                    Browse Problems →
+                  </button>
+                </div>
+              ) : (
+                /* Sheet table */
+                <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-3xl shadow-sm overflow-hidden">
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-left border-collapse min-w-[600px]">
+                      <thead>
+                        <tr className="bg-slate-50/40 dark:bg-neutral-900/10 text-[10px] font-black uppercase tracking-wider text-slate-400 dark:text-neutral-500 border-b border-slate-100 dark:border-neutral-800">
+                          <th className="py-4 px-5 w-10 text-center">#</th>
+                          <th className="py-4 px-5">Problem</th>
+                          <th className="py-4 px-5">Topic</th>
+                          <th className="py-4 px-5 text-center">Level</th>
+                          <th className="py-4 px-5 text-center">Company</th>
+                          <th className="py-4 px-5 text-center">Status</th>
+                          <th className="py-4 px-5 text-center">Actions</th>
+                          <th className="py-4 px-5 text-center">Remove</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {Object.keys(sheet).map((problemId, idx) => {
+                          const prob = allProblems.find(p => p.id === problemId);
+                          if (!prob) return null;
+                          const status = getStatus(prob.id);
+                          return (
+                            <tr key={prob.id} className="border-b border-slate-50 dark:border-neutral-800/80 hover:bg-slate-50/20 dark:hover:bg-neutral-800/10 transition last:border-0">
+                              <td className="py-4 px-5 text-center font-bold text-xs text-slate-400">{idx + 1}</td>
+                              <td className="py-4 px-5">
+                                <div className="font-bold text-xs text-slate-800 dark:text-white">{prob.name}</div>
+                              </td>
+                              <td className="py-4 px-5 text-xs font-bold text-slate-500 dark:text-neutral-400">{prob.topic}</td>
+                              <td className="py-4 px-5 text-center">
+                                <span className={`inline-block text-[9px] font-black px-2.5 py-0.5 rounded-full ${prob.difficulty === 'Easy' ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+                                    : prob.difficulty === 'Medium' ? 'bg-amber-500/10 text-amber-600 dark:text-amber-400'
+                                      : 'bg-red-500/10 text-red-600 dark:text-red-400'
+                                  }`}>{prob.difficulty}</span>
+                              </td>
+                              <td className="py-4 px-5 text-center">
+                                <div className="flex justify-center"><CompanyLogos companies={prob.companies} /></div>
+                              </td> 
+                              <td className="py-4 px-5 text-center">
+                                <div className="flex items-center justify-center gap-2">
+                                  <button
+                                    onClick={() => { setSelectedProblem(prob); setIsDrawerOpen(true); }}
+                                    className="text-[10px] font-bold px-2 py-1 rounded-lg border border-slate-200 dark:border-neutral-700 text-slate-500 dark:text-neutral-400 hover:bg-slate-50 dark:hover:bg-neutral-800 transition"
+                                  >
+                                    Theory
+                                  </button>
+                                  <a
+                                    href={prob.practiceUrl}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="text-[10px] font-bold px-2 py-1 bg-primary text-white rounded-lg hover:bg-primary-dark transition"
+                                  >
+                                    Solve
+                                  </a>
+                                </div>
+                              </td>
+                              <td className="py-4 px-5 text-center">
+                                <button
+                                  onClick={() => {
+                                    if (!ensureLoggedIn()) return;
+                                    removeFromSheet(prob.id);
+                                    toast.success('Removed from My Sheet');
+                                  }}
+                                  className="text-slate-300 dark:text-neutral-700 hover:text-red-500 dark:hover:text-red-400 transition p-1.5 rounded-lg hover:bg-red-50 dark:hover:bg-red-950/20"
+                                  title="Remove from My Sheet"
+                                >
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" /></svg>
+                                </button>
+                              </td>
+                            </tr>
+                          );
+                        })}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              )}
+            </section>
+          ) : activeView === "practice-home" || activeView === "problem-list" ? (
+            <>
+              {/* Top Row: Banner and Session Progress */}
+              <div className="flex flex-col lg:flex-row items-stretch gap-4">
+                <div className="flex-1">
+                  <PracticeSessionBanner
+                    title="DSA Sheet - Most Important Interview Questions"
+                    description="All DSA topics covered – from basic to advanced. Perfect for interview preparation."
+                    difficulty="Beginner"
+                    problemCount={stats.total}
+                    duration={stats.estimatedTime}
+                    solved={stats.solved}
+                    attempted={stats.attempted}
+                    remaining={stats.remaining}
+                    total={stats.total}
+                    onStartSession={() => {
+                      if (!nextProblem) return;
+                      toast.success(`Starting with ${nextProblem.name}`);
+                      window.open(nextProblem.practiceUrl, "_blank");
+                    }}
+                  />
+                </div>
+              </div>
+
+              {/* Tab navigation */}
+              <div className="flex border-b border-slate-200 dark:border-neutral-800">
+                {[
+                  { id: "problems", label: `Problems (${filteredProblems.length})` },
+                  { id: "description", label: "Description" },
+                  { id: "resources", label: "Resources" }
+                ].map((tab) => (
+                  <button
+                    key={tab.id}
+                    onClick={() => {
+                      setActiveTab(tab.id);
+
+                      const params = new URLSearchParams(searchParams.toString());
+                      if (tab.id === "problems") {
+                        params.delete("tab");
+                      } else {
+                        params.set("tab", tab.id);
+                      }
+
+                      const query = params.toString();
+                      router.push(query ? `/practice?${query}` : "/practice");
+                    }}
+                    className={`py-3.5 px-6 font-bold text-sm border-b-2 transition-all duration-200 ${activeTab === tab.id
+                        ? "border-primary text-primary dark:text-purple-400"
+                        : "border-transparent text-slate-400 dark:text-neutral-500 hover:text-slate-600 dark:hover:text-neutral-300"
+                      }`}
+                  >
+                    {tab.label}
+                  </button>
+                ))}
+              </div>
+
+              {/* Tab contents */}
+              {activeTab === "problems" && (
+                <div className="space-y-6">
+                  {/* Search and Filters Row */}
+                  <div className="flex flex-col sm:flex-row items-center gap-3.5">
+                    {/* Search */}
+                    <div className="relative flex-1 w-full">
+                      <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-neutral-600" />
+                     <input
+                        type="text"
+                        value={searchQuery}
+                        onChange={(e) => {
+                          setSearchQuery(e.target.value);
+                          setCurrentPage(1);
+                        }}
+                        onKeyDown={(e) => {
+                          if (e.key === "Escape") {
+                            setSearchQuery("");
+                            setCurrentPage(1);
+                            e.currentTarget.blur();
+                          }
+                        }}
+                        autoComplete="off"
+                        spellCheck={false}
+                        aria-label="Search problems"
+                        placeholder="Search problems... (Press /)"
+                        className="w-full h-11 pl-11 pr-4 rounded-xl border border-slate-200 dark:border-neutral-800 bg-white dark:bg-[#1a1b1e] text-xs font-bold text-slate-800 dark:text-white placeholder-slate-400 dark:placeholder-neutral-600 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition shadow-sm"
+                      />
+                    </div>
+
+                    {/* Topic Filter */}
+                    <div ref={topicRef} className="relative w-full sm:w-48">
+                      {/* Trigger — same dimensions as before so layout is unchanged */}
+                      <button
+                        type="button"
+                        onClick={() => setIsTopicOpen((o) => !o)}
+                        className="w-full h-11 pl-4 pr-10 flex items-center rounded-xl border border-surface-200 dark:border-surface-700 bg-white dark:bg-udemy-dark-surface text-xs font-bold text-surface-700 dark:text-surface-300 hover:bg-surface-50 dark:hover:bg-udemy-dark-surface/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary transition-colors shadow-sm cursor-pointer"
+                        aria-haspopup="listbox"
+                        aria-expanded={isTopicOpen}
+                      >
+                        <span className="flex-1 text-left truncate">{selectedTopic}</span>
+                        <ChevronDown className={`absolute right-3.5 w-4 h-4 text-surface-500 dark:text-surface-400 transition-transform duration-200 ${isTopicOpen ? "rotate-180" : ""}`} />
+                      </button>
+
+                      {/* Panel — exact same classes as NotificationDropdown panel */}
+                      {isTopicOpen && (
+                        <div
+                          role="listbox"
+                          aria-label="Filter by topic"
+                          className="absolute left-0 right-0 mt-2 bg-white dark:bg-udemy-dark-surface border border-surface-200 dark:border-surface-700 shadow-xl rounded-xl z-[9999] overflow-hidden flex flex-col max-h-64"
+                        >
+                          <div className="overflow-y-auto flex-1">
+                            {uniqueTopics.map((topic) => (
+                              <button
+                                key={topic}
+                                type="button"
+                                role="option"
+                                aria-selected={selectedTopic === topic}
+                                onClick={() => {
+                                  setSelectedTopic(topic);
+                                  setCurrentPage(1);
+                                  setIsTopicOpen(false);
+                                }}
+                                className={`relative w-full text-left px-4 py-2.5 text-sm transition-all duration-200 border-b border-surface-200 dark:border-udemy-dark-border last:border-0 ${
+                                  selectedTopic === topic
+                                    ? "bg-primary/5 dark:bg-primary/10 font-bold text-primary"
+                                    : "font-semibold text-surface-700 dark:text-surface-300 hover:bg-surface-50 dark:hover:bg-udemy-dark-surface/50"
+                                }`}
+                              >
+                                {selectedTopic === topic && (
+                                  <span className="absolute left-0 top-0 bottom-0 w-1 bg-primary rounded-r-full" />
+                                )}
+                                {topic}
+                              </button>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Problem Table */}
+                  <div className="overflow-x-auto bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-2xl shadow-sm [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+                    <table className="w-full text-left border-collapse min-w-[700px]">
+                      <thead>
+                        <tr className="bg-slate-50/40 dark:bg-neutral-900/10 text-[10px] font-black uppercase tracking-wider text-slate-400 dark:text-neutral-500 border-b border-slate-100 dark:border-neutral-800">
+                          <th className="py-4 px-5 w-12 text-center">#</th>
+                          <th className="py-4 px-5">Problem</th>
+                          <th className="py-4 px-5">Topic</th>
+                          <th className="py-4 px-5 text-center">Level</th>
+                          <th className="py-4 px-5 text-center">Company</th>
+                          <th className="py-4 px-5 text-center">Status</th>
+                          <th className="py-4 px-5 text-center w-12">Bookmark</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {paginatedProblems.length === 0 ? (
+                          <tr>
+                            <td colSpan="7" className="py-8 text-center text-xs font-bold text-slate-400 dark:text-neutral-600">
+                              No matching problems found.
+                            </td>
+                          </tr>
+                        ) : (
+                          paginatedProblems.map((prob, idx) => {
+                            const status = getStatus(prob.id);
+                            const isSaved = isBookmarked(prob.id);
+                            const indexNumber = (currentPage - 1) * itemsPerPage + idx + 1;
+
+                            return (
+                              <tr
+                                  key={prob.id}
+                                  onClick={() => window.open(prob.practiceUrl, "_blank", "noopener,noreferrer")}
+                                  className={`${
+                                    idx % 2 === 0
+                                      ? "bg-slate-50 dark:bg-neutral-900/40"
+                                      : "bg-white dark:bg-[#1a1b1e]"
+                                  } border-b border-slate-100 dark:border-neutral-800 hover:bg-violet-50 dark:hover:bg-neutral-800 transition-all duration-200 cursor-pointer last:border-0`}
+                                >
+                                <td className="py-4 px-5 text-center font-bold text-xs text-slate-400">
+                                  {indexNumber}
+                                </td>
+                                <td className="py-4 px-5">
+                                  <a
+                                    href={prob.practiceUrl}
+                                    className="font-bold text-xs text-slate-800 dark:text-white hover:text-primary dark:hover:text-purple-400 hover:underline transition"
+                                  >
+                                    {prob.name}
+                                  </a>
+                                </td>
+                                <td className="py-4 px-5 text-xs font-bold text-slate-500 dark:text-neutral-400">
+                                  {prob.topic}
+                                </td>
+                                <td className="py-4 px-5 text-center">
+                                  <span className={`inline-block text-[9px] font-black px-2.5 py-0.5 rounded-full ${prob.difficulty === "Easy"
+                                      ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+                                      : prob.difficulty === "Medium"
+                                        ? "bg-amber-500/10 text-amber-600 dark:text-amber-400"
+                                        : "bg-red-500/10 text-red-600 dark:text-red-400"
+                                    }`}>
+                                    {prob.difficulty}
+                                  </span>
+                                </td>
+                                <td className="py-4 px-5 text-center">
+                                  <div className="flex justify-center">
+                                    <CompanyLogos companies={prob.companies} />
+                                  </div>
+                                </td>
+                                <td className="py-4 px-5 text-center">
+                                  <div className="flex justify-center">
+                                    <button
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleStatusToggle(prob.id, status);
+                                      }}
+                                      className="focus:outline-none focus-ring rounded-full p-1"
+                                      title={`Click to toggle status: currently ${status}`}
+                                      aria-label={`Status for ${prob.name}: ${status}`}
+                                    >
+                                      {status === "Completed" ? (
+                                        <div className="w-5 h-5 rounded-full border border-emerald-500 bg-emerald-500 flex items-center justify-center text-white scale-105 transition">
+                                          <CheckCircle2 size={12} className="stroke-[3]" />
+                                        </div>
+                                      ) : status === "In Progress" ? (
+                                        <div className="w-5 h-5 rounded-full border-2 border-amber-500 flex items-center justify-center scale-105 transition">
+                                          <div className="w-2.5 h-2.5 rounded-full bg-amber-500" />
+                                        </div>
+                                      ) : (
+                                        <div className="w-5 h-5 rounded-full border-2 border-slate-200 dark:border-neutral-700 hover:border-primary transition" />
+                                      )}
+                                    </button>
+                                  </div>
+                                </td>
+                                <td className="py-4 px-5 text-center">
+                                  <button
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      if (!ensureLoggedIn()) return;
+                                      toggleBookmark(prob.id, prob.topic.toLowerCase());
+                                    }}
+                                    className={`focus:outline-none focus-ring rounded-lg p-1.5 transition ${isSaved
+                                        ? "text-primary bg-primary/10 dark:text-purple-400"
+                                        : "text-slate-300 dark:text-neutral-700 hover:text-slate-500"
+                                      }`}
+                                    title={isSaved ? "Remove Bookmark" : "Bookmark Problem"}
+                                  >
+                                    <Bookmark size={14} className={isSaved ? "fill-primary dark:fill-purple-400" : ""} />
+                                  </button>
+                                </td>
+                              </tr>
+                            );
+                          })
+                        )}
+                      </tbody>
+                    </table>
+                  </div>
+
+                  {/* Table Footer / Pagination */}
+                  <div className="flex flex-col sm:flex-row items-center justify-between gap-4 select-none pt-2">
+                    <span className="text-[11px] font-bold text-slate-400 dark:text-neutral-500">
+                      Showing {filteredProblems.length === 0 ? 0 : (currentPage - 1) * itemsPerPage + 1} to{" "}
+                      {Math.min(currentPage * itemsPerPage, filteredProblems.length)} of {filteredProblems.length} problems
+                    </span>
+
+                    {/* Shuffle / Random & Pagination controls */}
+                    <div className="flex items-center gap-3">
+                      <button
+                        onClick={handleSolveRandom}
+                        className="flex items-center gap-1.5 px-3 py-2 border border-purple-500/20 hover:bg-primary hover:text-white dark:hover:bg-purple-600 text-primary dark:text-purple-400 rounded-xl text-xs font-bold transition shadow-sm"
+                      >
+                        <Shuffle size={12} />
+                        <span>Solve Random Problem</span>
+                      </button>
+
+                      {/* Pagination buttons */}
+                      {totalPages > 1 && (
+                        <div className="flex items-center gap-1.5">
+                          <button
+                            onClick={() => setCurrentPage((c) => Math.max(1, c - 1))}
+                            disabled={currentPage === 1}
+                            className="p-2 border border-slate-200 dark:border-neutral-800 bg-white dark:bg-[#1a1b1e] rounded-xl disabled:opacity-40 transition"
+                          >
+                            <ChevronLeft size={14} />
+                          </button>
+                          <button
+                            onClick={() => setCurrentPage((c) => Math.min(totalPages, c + 1))}
+                            disabled={currentPage === totalPages}
+                            className="p-2 border border-slate-200 dark:border-neutral-800 bg-white dark:bg-[#1a1b1e] rounded-xl disabled:opacity-40 transition"
+                          >
+                            <ChevronRight size={14} />
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Description Tab Content */}
+              {activeTab === "description" && (
+                <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-3xl p-6 md:p-8 shadow-sm space-y-4">
+                  <h3 className="text-base font-black text-slate-800 dark:text-white">Sheet Overview</h3>
+                  <p className="text-xs md:text-sm text-slate-400 dark:text-neutral-500 leading-relaxed">
+                    This dynamic study sheet compiles all active problems from the AlgoBuddy platform roadmap categories. Master these questions to gain complete proficiency in major coding test questions.
+                  </p>
+                  <h4 className="text-sm font-black text-slate-800 dark:text-white">Topics Covered:</h4>
+                  <ul className="list-disc pl-5 text-xs text-slate-400 dark:text-neutral-500 space-y-2 capitalize">
+                    {uniqueTopics.filter(t => t !== "All Topics").map((topic) => (
+                      <li key={topic}>{topic.toLowerCase()}</li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+
+              {/* Resources Tab Content */}
+              {activeTab === "resources" && (
+                <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-3xl p-6 md:p-8 shadow-sm space-y-4">
+                  <h3 className="text-base font-black text-slate-800 dark:text-white">Curated Learning Resources</h3>
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    {[
+                      { title: "Visualizer Code Lab", desc: "Interactive dry-run panel for tracing stack frames and node memory.", url: "/visualizer" },
+                      { title: "AlgoBuddy Roadmaps", desc: "Visual graphs mapping step-by-step topic timelines.", url: "/roadmaps" },
+                      { title: "Dynamic Programming Guide", desc: "Tutorial detailing Memoization vs Tabulation optimization patterns.", url: "/tutorials" },
+                      { title: "Complexity Cheatsheet", desc: "Quick-reference matrix of time and space complexities for all structures.", url: "/cheatsheets" }
+                    ].map((res, i) => (
+                      <div key={i} className="p-4 rounded-2xl border border-slate-100 dark:border-neutral-800 hover:border-primary transition duration-300">
+                        <h4 className="text-xs font-black text-slate-800 dark:text-white flex items-center gap-1">
+                          <span>{res.title}</span>
+                          <ExternalLink size={12} className="text-slate-400" />
+                        </h4>
+                        <p className="text-[11px] text-slate-400 dark:text-neutral-500 mt-1.5 leading-normal">
+                          {res.desc}
+                        </p>
+                        <button
+                          onClick={() => router.push(res.url)}
+                          className="text-[11px] font-black text-primary hover:underline mt-3 block"
+                        >
+                          Explore Resource →
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+
+            </>
+          ) : activeView === "bookmarks" ? (
+            <section className="space-y-5">
+              <div className="bg-gradient-to-r from-purple-500 to-violet-600 text-white p-6 rounded-3xl flex flex-col sm:flex-row items-center justify-between gap-4 shadow-lg shadow-purple-500/20">
+                <div>
+                  <div className="flex items-center gap-2.5 mb-2">
+                    <div className="w-8 h-8 rounded-xl bg-white/20 flex items-center justify-center">
+                      <Bookmark size={16} />
+                    </div>
+                    <span className="text-xs font-black uppercase tracking-widest text-purple-200">Your Bookmarks</span>
+                  </div>
+                  <h3 className="font-black text-2xl">Saved Problems</h3>
+                  <p className="text-sm mt-1 text-purple-200">Review your bookmarked problems.</p>
+                </div>
+              </div>
+
+              {filteredProblems.length === 0 ? (
+                <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-3xl p-12 text-center shadow-sm">
+                  <div className="w-16 h-16 rounded-2xl bg-purple-500/10 flex items-center justify-center mx-auto mb-4">
+                    <Bookmark size={28} className="text-purple-500" />
+                  </div>
+                  <h3 className="text-base font-black text-slate-800 dark:text-white mb-2">No bookmarks yet</h3>
+                  <p className="text-sm text-slate-400 dark:text-neutral-500 max-w-sm mx-auto">
+                    Browse the problem list and click the bookmark icon to save problems here for later review.
+                  </p>
+                </div>
+              ) : (
+                <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-3xl shadow-sm overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-300">
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-left border-collapse min-w-[700px]">
+                      <thead>
+                        <tr className="bg-slate-50/40 dark:bg-neutral-900/10 text-[10px] font-black uppercase tracking-wider text-slate-400 dark:text-neutral-500 border-b border-slate-100 dark:border-neutral-800">
+                          <th className="py-4 px-5 w-12 text-center">#</th>
+                          <th className="py-4 px-5">Problem</th>
+                          <th className="py-4 px-5 text-center">Level</th>
+                          <th className="py-4 px-5 text-center">Bookmarked On</th>
+                          <th className="py-4 px-5 text-center">Status</th>
+                          <th className="py-4 px-5 text-center w-12"></th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {filteredProblems.map((prob, idx) => {
+                          const status = getStatus(prob.id);
+                          const isSaved = isBookmarked(prob.id);
+                          const bInfo = bookmarks.find(b => b.id === prob.id);
+                          const dateStr = bInfo?.createdAt ? new Date(bInfo.createdAt).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) : "Recently";
+                          return (
+                            <tr key={prob.id} className="border-b border-slate-50 dark:border-neutral-800/80 hover:bg-slate-50/20 dark:hover:bg-neutral-800/10 transition last:border-0">
+                              <td className="py-4 px-5 text-center font-bold text-xs text-slate-400">{idx + 1}</td>
+                              <td className="py-4 px-5">
+                                <a
+                                  href={prob.practiceUrl}
+                                  className="font-bold text-xs text-slate-800 dark:text-white hover:text-primary dark:hover:text-purple-400 hover:underline transition"
+                                >
+                                  {prob.name}
+                                </a>
+                              </td>
+                              <td className="py-4 px-5 text-center">
+                                <span className={`inline-block text-[9px] font-black px-2.5 py-0.5 rounded-full ${prob.difficulty === "Easy" ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+                                    : prob.difficulty === "Medium" ? "bg-amber-500/10 text-amber-600 dark:text-amber-400"
+                                      : "bg-red-500/10 text-red-600 dark:text-red-400"
+                                  }`}>{prob.difficulty}</span>
+                              </td>
+                              <td className="py-4 px-5 text-center text-xs font-bold text-slate-500 dark:text-neutral-400">{dateStr}</td>
+                              <td className="py-4 px-5 text-center">
+                                <div className="flex justify-center">
+                                  <button onClick={() => handleStatusToggle(prob.id, status)} className="focus:outline-none focus-ring rounded-full" title={`Click to toggle status: currently ${status}`}>
+                                    {status === "Completed" ? (
+                                      <div className="w-5 h-5 rounded-full border border-emerald-500 bg-emerald-500 flex items-center justify-center text-white scale-105 transition"><CheckCircle2 size={12} className="stroke-[3]" /></div>
+                                    ) : status === "In Progress" ? (
+                                      <div className="w-5 h-5 rounded-full border-2 border-amber-500 flex items-center justify-center scale-105 transition"><div className="w-2.5 h-2.5 rounded-full bg-amber-500" /></div>
+                                    ) : (
+                                      <div className="w-5 h-5 rounded-full border-2 border-slate-200 dark:border-neutral-700 hover:border-primary transition" />
+                                    )}
+                                  </button>
+                                </div>
+                              </td>
+                              <td className="py-4 px-5 text-center">
+                                <button
+                                  onClick={() => {
+                                    if (!ensureLoggedIn()) return;
+                                    toggleBookmark(prob.id, prob.topic.toLowerCase());
+                                  }}
+                                  className={`focus:outline-none focus-ring rounded-lg p-1.5 transition ${isSaved
+                                      ? "text-primary bg-primary/10 dark:text-purple-400"
+                                      : "text-slate-300 dark:text-neutral-700 hover:text-slate-500"
+                                    }`}
+                                >
+                                  <Bookmark size={14} className={isSaved ? "fill-primary dark:fill-purple-400" : ""} />
+                                </button>
+                              </td>
+                            </tr>
+                          );
+                        })}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              )}
+            </section>
+          ) : activeView === "recent-solved" ? (
+            <section className="space-y-5">
+              <div className="bg-gradient-to-r from-emerald-500 to-teal-600 text-white p-6 rounded-3xl flex flex-col sm:flex-row items-center justify-between gap-4 shadow-lg shadow-emerald-500/20">
+                <div>
+                  <div className="flex items-center gap-2.5 mb-2">
+                    <div className="w-8 h-8 rounded-xl bg-white/20 flex items-center justify-center">
+                      <History size={16} />
+                    </div>
+                    <span className="text-xs font-black uppercase tracking-widest text-emerald-200">Activity History</span>
+                  </div>
+                  <h3 className="font-black text-2xl">Recently Solved</h3>
+                  <p className="text-sm mt-1 text-emerald-200">Problems you have completed, ordered by most recent.</p>
+                </div>
+              </div>
+
+              {progressLoading ? (
+                <div className="flex flex-col items-center justify-center py-24 bg-white dark:bg-[#1a1b1e] rounded-3xl border border-slate-100 dark:border-neutral-800/80 shadow-sm transition-all duration-300">
+                  <div className="w-10 h-10 border-4 border-slate-100 border-t-emerald-500 rounded-full animate-spin dark:border-neutral-800 dark:border-t-emerald-400"></div>
+                  <p className="mt-4 text-sm font-bold text-slate-400 dark:text-neutral-500 animate-pulse">Loading recently solved problems...</p>
+                </div>
+              ) : progressError ? (
+                <div className="bg-red-50/50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/30 rounded-3xl p-12 text-center shadow-sm">
+                  <div className="w-16 h-16 rounded-2xl bg-red-500/10 flex items-center justify-center mx-auto mb-4">
+                    <History size={28} className="text-red-500" />
+                  </div>
+                  <h3 className="text-base font-black text-slate-800 dark:text-white mb-2">Error loading progress</h3>
+                  <p className="text-sm text-red-400 dark:text-red-500/80 max-w-sm mx-auto">
+                    {progressError}. Please refresh the page.
+                  </p>
+                </div>
+              ) : filteredProblems.length === 0 ? (
+                <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-3xl p-12 text-center shadow-sm">
+                  <div className="w-16 h-16 rounded-2xl bg-emerald-500/10 flex items-center justify-center mx-auto mb-4">
+                    <History size={28} className="text-emerald-500" />
+                  </div>
+                  <h3 className="text-base font-black text-slate-800 dark:text-white mb-2">No recently solved problems yet.</h3>
+                  <p className="text-sm text-slate-400 dark:text-neutral-500 max-w-sm mx-auto">
+                    Your completed problems will appear here. Start practicing!
+                  </p>
+                </div>
+              ) : (
+                <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-3xl shadow-sm overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-300">
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-left border-collapse min-w-[700px]">
+                      <thead>
+                        <tr className="bg-slate-50/40 dark:bg-neutral-900/10 text-[10px] font-black uppercase tracking-wider text-slate-400 dark:text-neutral-500 border-b border-slate-100 dark:border-neutral-800">
+                          <th className="py-4 px-5 w-12 text-center">#</th>
+                          <th className="py-4 px-5">Problem</th>
+                          <th className="py-4 px-5 text-center">Topic</th>
+                          <th className="py-4 px-5 text-center">Level</th>
+                          <th className="py-4 px-5 text-center">Completed On</th>
+                          <th className="py-4 px-5 text-center">Status</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {filteredProblems.map((prob, idx) => {
+                          const status = getStatus(prob.id);
+                          const progInfo = progress[prob.id];
+                          const dateStr = progInfo?.updatedAt ? new Date(progInfo.updatedAt).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) : "Recently";
+                          return (
+                            <tr key={prob.id} className="border-b border-slate-50 dark:border-neutral-800/80 hover:bg-slate-50/20 dark:hover:bg-neutral-800/10 transition last:border-0">
+                              <td className="py-4 px-5 text-center font-bold text-xs text-slate-400">
+                                {idx + 1}
+                              </td>
+
+                              <td className="py-4 px-5">
+                                <a
+                                  href={prob.practiceUrl}
+                                  className="font-bold text-xs text-slate-800 dark:text-white hover:text-primary dark:hover:text-emerald-400 hover:underline transition"
+                                >
+                                  {prob.name}
+                                </a>
+                              </td>
+
+                              <td className="py-4 px-5 text-center text-xs font-bold text-slate-500 dark:text-neutral-400">
+                                {prob.topic}
+                              </td>
+                              <td className="py-4 px-5 text-center">
+                                <span className={`inline-block text-[9px] font-black px-2.5 py-0.5 rounded-full ${prob.difficulty === "Easy" ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+                                    : prob.difficulty === "Medium" ? "bg-amber-500/10 text-amber-600 dark:text-amber-400"
+                                      : "bg-red-500/10 text-red-600 dark:text-red-400"
+                                  }`}>{prob.difficulty}</span>
+                              </td>
+                              <td className="py-4 px-5 text-center text-xs font-bold text-slate-500 dark:text-neutral-400">{dateStr}</td>
+                              <td className="py-4 px-5 text-center">
+                                <div className="flex justify-center">
+                                  <button onClick={() => handleStatusToggle(prob.id, status)} className="focus:outline-none focus-ring rounded-full" title={`Click to toggle status: currently ${status}`}>
+                                    {status === "Completed" ? (
+                                      <div className="w-5 h-5 rounded-full border border-emerald-500 bg-emerald-500 flex items-center justify-center text-white scale-105 transition"><CheckCircle2 size={12} className="stroke-[3]" /></div>
+                                    ) : status === "In Progress" ? (
+                                      <div className="w-5 h-5 rounded-full border-2 border-amber-500 flex items-center justify-center scale-105 transition"><div className="w-2.5 h-2.5 rounded-full bg-amber-500" /></div>
+                                    ) : (
+                                      <div className="w-5 h-5 rounded-full border-2 border-slate-200 dark:border-neutral-700 hover:border-emerald-500 transition" />
+                                    )}
+                                  </button>
+                                </div>
+                              </td>
+                            </tr>
+                          );
+                        })}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              )}
+            </section>
+          ) : activeView === "topic-wise" ? (
+            /* Topic-wise Filter View */
+            <section className="space-y-5">
+              <div className="bg-gradient-to-r from-purple-500 to-violet-600 text-white p-6 rounded-3xl flex flex-col sm:flex-row items-center justify-between gap-4 shadow-lg shadow-purple-500/20">
+                <div>
+                  <div className="flex items-center gap-2.5 mb-2">
+                    <div className="w-8 h-8 rounded-xl bg-white/20 flex items-center justify-center">
+                      <Bookmark size={16} />
+                    </div>
+                    <span className="text-xs font-black uppercase tracking-widest text-purple-200">Topic-wise Practice</span>
+                  </div>
+                  <h3 className="font-black text-2xl">Master Patterns</h3>
+                  <p className="text-sm mt-1 text-purple-200">Select a topic below to focus on specific problem patterns.</p>
+                </div>
+                <div className="bg-white/10 px-5 py-3 rounded-2xl backdrop-blur-sm border border-white/10">
+                  <span className="text-[10px] font-black uppercase tracking-widest text-purple-200 block mb-1">Selected Topic</span>
+                  <p className="text-base font-black truncate max-w-[200px]">{selectedTopicWise}</p>
+                </div>
+              </div>
+
+              {/* Topics Pill List */}
+              <div className="relative">
+                <div className="flex overflow-x-auto gap-3 pb-2 scrollbar-hide snap-x" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
+                  {practiceData.map((topic) => {
+                    const isSelected = selectedTopicWise === topic.title;
+                    return (
+                      <button
+                        key={topic.slug}
+                        onClick={() => {
+                          if (selectedTopicWise !== topic.title) {
+                            setIsTopicLoading(true);
+                            setSelectedTopicWise(topic.title);
+
+                            // Push to URL to maintain history state
+                            const params = new URLSearchParams(searchParams.toString());
+                            params.set("topic", topic.title);
+                            router.push(`/practice?${params.toString()}`);
+
+                            setTimeout(() => setIsTopicLoading(false), 300);
+                          }
+                        }}
+                        className={`snap-start whitespace-nowrap px-5 py-2.5 rounded-xl text-sm font-bold transition-all duration-200 border flex-shrink-0 ${isSelected
+                            ? "bg-primary text-white border-primary shadow-md shadow-primary/20"
+                            : "bg-white dark:bg-[#1a1b1e] text-slate-600 dark:text-neutral-300 border-slate-200 dark:border-neutral-800 hover:border-primary/50 dark:hover:border-purple-500/50"
+                          }`}
+                      >
+                        {topic.title}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* Content Area */}
+              {isTopicLoading ? (
+                <div className="flex flex-col items-center justify-center py-24 bg-white dark:bg-[#1a1b1e] rounded-3xl border border-slate-100 dark:border-neutral-800/80 shadow-sm transition-all duration-300">
+                  <div className="w-10 h-10 border-4 border-slate-100 border-t-primary rounded-full animate-spin dark:border-neutral-800 dark:border-t-purple-500"></div>
+                  <p className="mt-4 text-sm font-bold text-slate-400 dark:text-neutral-500 animate-pulse">Loading {selectedTopicWise} problems...</p>
+                </div>
+              ) : (
+                (() => {
+                  const topicData = practiceData.find(t => t.title === selectedTopicWise);
+                  const problems = topicData ? topicData.subsections.flatMap(sub => sub.items) : [];
+
+                  if (problems.length === 0) {
+                    return (
+                      <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-3xl p-12 text-center shadow-sm">
+                        <div className="w-16 h-16 rounded-2xl bg-purple-500/10 flex items-center justify-center mx-auto mb-4">
+                          <Bookmark size={28} className="text-purple-500" />
+                        </div>
+                        <h3 className="text-base font-black text-slate-800 dark:text-white mb-2">No problems found</h3>
+                        <p className="text-sm text-slate-400 dark:text-neutral-500 max-w-sm mx-auto">
+                          There are currently no problems listed under {selectedTopicWise}. Check back later!
+                        </p>
+                      </div>
+                    );
+                  }
+
+                  return (
+                    <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-3xl shadow-sm overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-300">
+                      <div className="overflow-x-auto">
+                        <table className="w-full text-left border-collapse min-w-[700px]">
+                          <thead>
+                            <tr className="bg-slate-50/40 dark:bg-neutral-900/10 text-[10px] font-black uppercase tracking-wider text-slate-400 dark:text-neutral-500 border-b border-slate-100 dark:border-neutral-800">
+                              <th className="py-4 px-5 w-12 text-center">#</th>
+                              <th className="py-4 px-5">Problem</th>
+                              <th className="py-4 px-5 text-center">Level</th>
+                              <th className="py-4 px-5 text-center">Company</th>
+                              <th className="py-4 px-5 text-center">Status</th>
+                              <th className="py-4 px-5 text-center w-12"></th>
+                              
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {problems.map((prob, idx) => {
+                              const status = getStatus(prob.id);
+                              const isSaved = isBookmarked(prob.id);
+                              return (
+                                <tr
+                                      key={prob.id}
+                                      onClick={() => window.open(prob.practiceUrl, "_blank", "noopener,noreferrer")}
+                                      className={`${
+                                        idx % 2 === 0
+                                          ? "bg-slate-50 dark:bg-neutral-900/40"
+                                          : "bg-white dark:bg-[#1a1b1e]"
+                                      } border-b border-slate-100 dark:border-neutral-800 hover:bg-violet-50 dark:hover:bg-neutral-800 transition-all duration-200 cursor-pointer last:border-0`}
+                                    >
+                                  <td className="py-4 px-5 text-center font-bold text-xs text-slate-400">{idx + 1}</td>
+                                  <td className="py-4 px-5">
+                                    <a
+                                      href={prob.practiceUrl}
+                                      className="font-bold text-xs text-slate-800 dark:text-white hover:text-primary dark:hover:text-purple-400 hover:underline transition"
+                                    >
+                                      {prob.name}
+                                    </a>
+                                  </td>
+                                  <td className="py-4 px-5 text-center">
+                                    <span className={`inline-block text-[9px] font-black px-2.5 py-0.5 rounded-full ${prob.difficulty === "Easy" ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+                                        : prob.difficulty === "Medium" ? "bg-amber-500/10 text-amber-600 dark:text-amber-400"
+                                          : "bg-red-500/10 text-red-600 dark:text-red-400"
+                                      }`}>{prob.difficulty}</span>
+                                  </td>
+                                  <td className="py-4 px-5 text-center">
+                                    <div className="flex justify-center"><CompanyLogos companies={prob.companies} /></div>
+                                  </td>
+                                  <td className="py-4 px-5 text-center">
+                                    <div className="relative flex justify-center group">
+                                      <button
+                                        onClick={(e) =>{
+                                          s.stopPropagation();
+                                          handleStatusToggle(prob.id, status)
+                                        } }
+                                        className="focus:outline-none"
+                                        title={"Click once → Mark as Attempted 🟠\nDouble click → Mark as Completed 🟢"}
+                                        aria-label={"Status action: click once to mark as attempted, double click to mark as completed"}
+                                      >
+                                        {status === "Completed" ? (
+                                          <div className="w-5 h-5 rounded-full border border-emerald-500 bg-emerald-500 flex items-center justify-center text-white scale-105 transition"><CheckCircle2 size={12} className="stroke-[3]" /></div>
+                                        ) : status === "In Progress" ? (
+                                          <div className="w-5 h-5 rounded-full border-2 border-amber-500 flex items-center justify-center scale-105 transition"><div className="w-2.5 h-2.5 rounded-full bg-amber-500" /></div>
+                                        ) : (
+                                          <div className="w-5 h-5 rounded-full border-2 border-slate-200 dark:border-neutral-700 hover:border-primary transition" />
+                                        )}
+                                      </button>
+                                      <div className="pointer-events-none absolute left-1/2 top-full z-10 mt-2 w-max -translate-x-1/2 rounded-2xl border border-slate-700/80 bg-slate-950/95 px-3 py-2 text-[10px] font-bold text-slate-200 shadow-xl shadow-black/20 ring-1 ring-white/5 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
+                                        <div>Click once → Mark as Attempted 🟠</div>
+                                        <div>Double click → Mark as Completed 🟢</div>
+                                      </div>
+                                    </div>
+                                  </td>
+                                  <td className="py-4 px-5 text-center">
+                                    <button
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        if (!ensureLoggedIn()) return;
+                                        toggleBookmark(prob.id, selectedTopicWise.toLowerCase());
+                                      }}
+                                      className={`focus:outline-none focus-ring rounded-lg p-1.5 transition ${isSaved
+                                          ? "text-primary bg-primary/10 dark:text-purple-400"
+                                          : "text-slate-300 dark:text-neutral-700 hover:text-slate-500"
+                                        }`}
+                                    >
+                                      <Bookmark size={14} className={isSaved ? "fill-primary dark:fill-purple-400" : ""} />
+                                    </button>
+                                  </td>
+                                  <td className="py-4 px-5 text-center">
+                                    <button
+                                      onClick={() => {
+                                        if (!ensureLoggedIn()) return;
+                                        if (isInSheet(prob.id)) {
+                                          removeFromSheet(prob.id);
+                                          toast.success('Removed from My Sheet');
+                                        } else {
+                                          addToSheet(prob.id);
+                                          toast.success('Added to My Sheet! ✨');
+                                        }
+                                      }}
+                                      title={isInSheet(prob.id) ? 'Remove from My Sheet' : 'Add to My Sheet'}
+                                      className={`focus:outline-none p-1.5 rounded-lg transition ${isInSheet(prob.id)
+                                          ? 'text-purple-500 bg-purple-500/10 dark:text-purple-400'
+                                          : 'text-slate-300 dark:text-neutral-700 hover:text-purple-500 dark:hover:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-950/20'
+                                        }`}
+                                    >
+                                      <ScrollText size={14} />
+                                    </button>
+                                  </td>
+                                </tr>
+                              );
+                            })}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  );
+                })()
+              )}
+            </section>
+          ) : activeView === "notes" ? (
+            <PracticeNotebook />
+          ) : (
+            /* Company-wise View */
+            <div className="space-y-6">
+              <div>
+                <h2 className="text-base font-black text-slate-800 dark:text-white uppercase tracking-wider">
+                  Company-wise Practice
+                </h2>
+                <p className="text-xs text-slate-400 dark:text-neutral-500 font-bold mt-1">
+                  Select a company to view interview questions frequently asked in their recruitment rounds.
+                </p>
+              </div>
+
+              {/* Grid of companies dynamically fetched */}
+              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+                {companiesList.map((comp) => (
+                  <button
+                    key={comp.name}
+                    onClick={() => {
+                      setSelectedCompanyFilter(comp.name);
+                      setActiveView("practice-home");
+                      setCurrentPage(1);
+                      toast.success(`Filtering problems by: ${comp.name}`);
+                    }}
+                    className="flex flex-col items-center justify-center p-5 rounded-2xl bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 shadow-sm hover:border-primary dark:hover:border-purple-500 transition duration-300 text-center select-none"
+                  >
+                    <div className="w-12 h-12 rounded-full overflow-hidden flex items-center justify-center bg-slate-50 dark:bg-neutral-800 mb-3 border border-slate-100 dark:border-neutral-800">
+                      {/* Reuse dynamic CompanyLogos logo defs by passing array */}
+                      <CompanyLogos companies={[comp.name]} />
+                    </div>
+                    <span className="text-xs font-black text-slate-850 dark:text-neutral-200">
+                      {comp.name}
+                    </span>
+                    <span className="text-[10px] text-slate-400 dark:text-neutral-500 font-bold mt-1 block">
+                      {comp.count} Questions
+                    </span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+        </div>
+
+      </div>
+
+      {/* Theory Drawer */}
+      <TheoryDrawer
+        isOpen={isDrawerOpen}
+        onClose={() => setIsDrawerOpen(false)}
+        problem={selectedProblem}
+        topicSlug={selectedProblem ? selectedProblem.topic.toLowerCase() : null}
+      />
+      <Footer />
+    </div>
+  );
+}
+
+
+
diff --git a/src/app/practice/shared/[sharedUserId]/page.jsx b/src/app/practice/shared/[sharedUserId]/page.jsx
new file mode 100644
index 000000000..221fe2c6c
--- /dev/null
+++ b/src/app/practice/shared/[sharedUserId]/page.jsx
@@ -0,0 +1,300 @@
+"use client";
+
+import React, { useEffect, useState, useMemo } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { toast } from "react-hot-toast";
+import { 
+  ScrollText, 
+  ArrowLeft, 
+  Download, 
+  ExternalLink, 
+  Lock,
+  Loader2,
+  CheckCircle2
+} from "lucide-react";
+import Link from "next/link";
+
+import CompanyLogos from "@/app/components/practice/CompanyLogos";
+import Footer from "@/app/components/footer";
+import { practiceData } from "@/lib/practiceData";
+import { useUser } from "@/features/user/UserContext";
+import { supabase } from "@/lib/supabase";
+
+function isSpringBoot() {
+  return typeof window !== "undefined" && process.env.NEXT_PUBLIC_USE_SPRING_BOOT_API === "true";
+}
+
+function apiBase() {
+  return process.env.NEXT_PUBLIC_SPRING_BOOT_API_URL || "http://localhost:8080";
+}
+
+export default function SharedSheetPage() {
+  const { sharedUserId } = useParams();
+  const { user } = useUser();
+  const router = useRouter();
+
+  const [loading, setLoading] = useState(true);
+  const [cloning, setCloning] = useState(false);
+  const [sharedItems, setSharedItems] = useState([]);
+  const [error, setError] = useState(null);
+
+  // Flatten all problems from practiceData to match metadata
+  const allProblems = useMemo(() => {
+    const list = [];
+    practiceData.forEach((topic) => {
+      topic.subsections.forEach((sub) => {
+        sub.items.forEach((item) => {
+          list.push({
+            ...item,
+            topic: topic.title,
+            topicSlug: topic.slug,
+          });
+        });
+      });
+    });
+    return list;
+  }, []);
+
+  // Fetch shared sheet details from backend
+  useEffect(() => {
+    async function fetchSharedSheet() {
+      try {
+        setLoading(true);
+        let items = [];
+        if (isSpringBoot()) {
+          const res = await fetch(`${apiBase()}/api/v1/mysheet/shared/${sharedUserId}`);
+          if (!res.ok) throw new Error("Failed to load shared sheet");
+          const data = await res.json();
+          items = data.items || [];
+        } else {
+          const res = await fetch(`/api/mysheet/shared/${sharedUserId}`);
+          if (!res.ok) throw new Error("Failed to load shared sheet");
+          const data = await res.json();
+          items = data.items || [];
+        }
+
+        setSharedItems(items);
+      } catch (err) {
+        console.error("Shared sheet fetch error:", err);
+        setError("This shared sheet could not be found or is private.");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    if (sharedUserId) {
+      fetchSharedSheet();
+    }
+  }, [sharedUserId]);
+
+  // Map shared item IDs to full problem structures
+  const mappedProblems = useMemo(() => {
+    return sharedItems
+      .map(item => {
+        const prob = allProblems.find(p => p.id === item.problemId);
+        return prob ? { ...prob, note: item.note } : null;
+      })
+      .filter(Boolean);
+  }, [sharedItems, allProblems]);
+
+  // Clone action
+  const handleCloneSheet = async () => {
+    if (!user) {
+      toast.error("Please login to save this sheet to your profile!");
+      router.push(`/login?redirectTo=/practice/shared/${sharedUserId}`);
+      return;
+    }
+
+    try {
+      setCloning(true);
+      const { data: { session } } = await supabase.auth.getSession();
+      const token = session?.access_token;
+      if (!token) {
+        toast.error("Session expired. Please log in again.");
+        return;
+      }
+
+      if (isSpringBoot()) {
+        const res = await fetch(`${apiBase()}/api/v1/mysheet/clone/${sharedUserId}`, {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${token}`,
+            "Content-Type": "application/json"
+          }
+        });
+        if (!res.ok) throw new Error("Cloning failed");
+      } else {
+        const res = await fetch(`/api/mysheet/clone/${sharedUserId}`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          }
+        });
+        if (!res.ok) throw new Error("Cloning failed");
+      }
+
+      // Sync local storage on the next reload
+      localStorage.removeItem("algobuddy_my_sheet");
+
+      toast.success("Sheet successfully cloned to your profile! ✨");
+      router.push("/practice?view=my-sheet");
+    } catch (err) {
+      console.error(err);
+      toast.error("Failed to clone sheet. Please try again.");
+    } finally {
+      setCloning(false);
+    }
+  };
+
+  const isOwner = user && user.id === sharedUserId;
+
+  return (
+    <div className="min-h-screen bg-slate-50/50 dark:bg-neutral-900 text-slate-800 dark:text-neutral-200 transition-colors duration-300 flex flex-col justify-between">
+      <div className="max-w-4xl mx-auto px-4 md:px-8 py-10 w-full flex-grow">
+        
+        {/* Navigation */}
+        <Link 
+          href="/practice" 
+          className="inline-flex items-center gap-2 text-xs font-bold text-slate-500 hover:text-primary dark:text-neutral-400 dark:hover:text-purple-400 transition mb-6"
+        >
+          <ArrowLeft size={14} />
+          <span>Back to Practice</span>
+        </Link>
+
+        {/* Loading State */}
+        {loading ? (
+          <div className="flex flex-col items-center justify-center py-20">
+            <Loader2 className="w-10 h-10 text-primary dark:text-purple-400 animate-spin mb-4" />
+            <p className="text-sm font-semibold text-slate-500">Retrieving shared sheet...</p>
+          </div>
+        ) : error ? (
+          /* Error State */
+          <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-3xl p-12 text-center shadow-sm">
+            <ScrollText className="w-16 h-16 text-slate-350 dark:text-neutral-700 mx-auto mb-4" />
+            <h3 className="text-lg font-black text-slate-800 dark:text-white mb-2">Sheet Not Found</h3>
+            <p className="text-sm text-slate-400 dark:text-neutral-500 max-w-sm mx-auto mb-6">{error}</p>
+            <Link 
+              href="/practice"
+              className="px-5 py-2.5 bg-primary text-white rounded-xl text-sm font-bold transition hover:bg-primary-dark"
+            >
+              Back to Practice
+            </Link>
+          </div>
+        ) : (
+          /* Main Shared Content */
+          <div className="space-y-6">
+            
+            {/* Header Banner */}
+            <div className="bg-gradient-to-br from-purple-600 to-violet-700 rounded-3xl p-6 md:p-8 text-white shadow-lg shadow-purple-500/20">
+              <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
+                <div>
+                  <div className="flex items-center gap-2.5 mb-2">
+                    <div className="w-8 h-8 rounded-xl bg-white/20 flex items-center justify-center">
+                      <ScrollText size={16} />
+                    </div>
+                    <span className="text-xs font-black uppercase tracking-widest text-purple-200">
+                      Shared DSA Practice List
+                    </span>
+                  </div>
+                  <h2 className="text-2xl font-black">Shared Practice Sheet</h2>
+                  <p className="text-sm text-purple-200 mt-1">
+                    Curated list containing {mappedProblems.length} problem{mappedProblems.length !== 1 ? "s" : ""}
+                  </p>
+                </div>
+
+                <div className="shrink-0">
+                  {isOwner ? (
+                    <div className="px-5 py-2.5 bg-white/10 text-white rounded-xl text-sm font-bold border border-white/20 flex items-center gap-2">
+                      <CheckCircle2 size={16} />
+                      <span>This is your sheet</span>
+                    </div>
+                  ) : (
+                    <button
+                      onClick={handleCloneSheet}
+                      disabled={cloning}
+                      className="px-5 py-2.5 bg-white text-purple-700 hover:bg-purple-50 disabled:opacity-50 rounded-xl text-sm font-black transition flex items-center gap-2 shadow-md"
+                    >
+                      {cloning ? (
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                      ) : user ? (
+                        <Download size={15} />
+                      ) : (
+                        <Lock size={14} />
+                      )}
+                      <span>{user ? "Save to My Profile" : "Login to Save Sheet"}</span>
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Problems Table */}
+            {mappedProblems.length === 0 ? (
+              <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-3xl p-12 text-center shadow-sm">
+                <p className="text-sm text-slate-400">This shared sheet has no problems inside it.</p>
+              </div>
+            ) : (
+              <div className="bg-white dark:bg-[#1a1b1e] border border-slate-100 dark:border-neutral-800/80 rounded-3xl shadow-sm overflow-hidden">
+                <div className="overflow-x-auto">
+                  <table className="w-full text-left border-collapse min-w-[600px]">
+                    <thead>
+                      <tr className="bg-slate-50/40 dark:bg-neutral-900/10 text-[10px] font-black uppercase tracking-wider text-slate-400 dark:text-neutral-500 border-b border-slate-100 dark:border-neutral-800">
+                        <th className="py-4 px-5 w-10 text-center">#</th>
+                        <th className="py-4 px-5">Problem</th>
+                        <th className="py-4 px-5">Topic</th>
+                        <th className="py-4 px-5 text-center">Difficulty</th>
+                        <th className="py-4 px-5 text-center">Companies</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {mappedProblems.map((prob, idx) => (
+                        <tr 
+                          key={prob.id} 
+                          className="border-b border-slate-50 dark:border-neutral-800/80 hover:bg-slate-50/20 dark:hover:bg-neutral-800/10 transition last:border-0"
+                        >
+                          <td className="py-4 px-5 text-center font-bold text-xs text-slate-400">
+                            {idx + 1}
+                          </td>
+                          <td className="py-4 px-5">
+                            <a
+                              href={prob.practiceUrl}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="font-bold text-xs text-slate-800 dark:text-white hover:text-primary dark:hover:text-purple-400 hover:underline inline-flex items-center gap-1 transition"
+                            >
+                              <span>{prob.name}</span>
+                              <ExternalLink size={12} className="opacity-50 shrink-0" />
+                            </a>
+                          </td>
+                          <td className="py-4 px-5 text-xs font-bold text-slate-500 dark:text-neutral-400">
+                            {prob.topic}
+                          </td>
+                          <td className="py-4 px-5 text-center">
+                            <span className={`inline-block text-[9px] font-black px-2.5 py-0.5 rounded-full ${
+                              prob.difficulty === "Easy" ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+                              : prob.difficulty === "Medium" ? "bg-amber-500/10 text-amber-600 dark:text-amber-400"
+                              : "bg-red-500/10 text-red-600 dark:text-red-400"
+                            }`}>
+                              {prob.difficulty}
+                            </span>
+                          </td>
+                          <td className="py-4 px-5 text-center">
+                            <div className="flex justify-center">
+                              <CompanyLogos companies={prob.companies} />
+                            </div>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/src/app/profile/page.jsx b/src/app/profile/page.jsx
new file mode 100644
index 000000000..e5231aeb7
--- /dev/null
+++ b/src/app/profile/page.jsx
@@ -0,0 +1,1056 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import toast from "react-hot-toast";
+import { AnimatePresence, motion } from "framer-motion";
+import {Award,BarChart3,Calendar,CheckCircle2,Code2,Edit3,Eye,Flame,Folder,Github,Linkedin,Link as LinkIcon,MapPin,Medal,Save,ShieldCheck,Trophy,X,} from "lucide-react";
+
+import { useUser } from "@/features/user/UserContext";
+import Footer from "@/app/components/footer";
+import ProfileForm from "@/app/components/profile/ProfileForm";
+import { useProfileForm } from "@/app/hooks/useProfileForm";
+import { practiceData } from "@/lib/practiceData";
+import {
+  EMPTY_PROJECT,
+  PRESET_PROJECT_GRADIENTS,
+  safeExternalUrl,
+} from "@/lib/profileUtils";
+import { useArenaProfile } from "@/app/hooks/useArenaProfile";
+import { useRecentlyViewed } from "@/app/hooks/useRecentlyViewed";
+import { useSheetProgress } from "@/app/hooks/useSheetProgress";
+
+
+const heatLevelClass = {
+  0: "bg-violet-50 dark:bg-neutral-800",
+  1: "bg-violet-100 dark:bg-violet-950/40",
+  2: "bg-violet-200 dark:bg-violet-900/60",
+  3: "bg-violet-400 dark:bg-violet-700",
+  4: "bg-violet-600 dark:bg-violet-500",
+};
+
+const heatLevelRange = {
+  0: "0 problems",
+  1: "1-2 problems",
+  2: "3-4 problems",
+  3: "5-6 problems",
+  4: "7+ problems",
+};
+
+function HeatmapLegend() {
+  return (
+    <div className="flex items-center justify-end gap-1.5 text-[10px] font-bold text-slate-500 dark:text-neutral-400 sm:text-xs">
+      <span>Less</span>
+      {[0, 1, 2, 3, 4].map((level) => (
+        <span
+          key={level}
+          title={heatLevelRange[level]}
+          className={`h-2.5 w-2.5 rounded-[3px] sm:h-3 sm:w-3 sm:rounded-[4px] ${heatLevelClass[level]}`}
+        />
+      ))}
+      <span>More</span>
+    </div>
+  );
+}
+const allPracticeProblems = practiceData.flatMap((topic) =>
+  topic.subsections.flatMap((section) =>
+    section.items.map((item) => ({
+      ...item,
+      topic: topic.title,
+      topicSlug: topic.slug,
+    }))
+  )
+);
+
+const getEntryStatus = (entry) => {
+  if (!entry) return "Not Started";
+  return typeof entry === "string" ? entry : entry.status || "Not Started";
+};
+
+const getEntryDate = (entry) => {
+  const rawDate = typeof entry === "object" && entry ? entry.updatedAt || entry.updated_at : null;
+  const date = rawDate ? new Date(rawDate) : null;
+  return date && !Number.isNaN(date.getTime()) ? date : null;
+};
+
+const formatNumber = (value) => new Intl.NumberFormat("en-US").format(value || 0);
+
+const seededRandom = (seed) => {
+  const value = Math.sin(seed * 9999) * 10000;
+  return value - Math.floor(value);
+};
+
+function LeetCodeIcon() {
+  return (
+    <svg className="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
+      <path
+        fill="#f59e0b"
+        d="M14.5 4.2 7.1 11.6a1.7 1.7 0 0 0 0 2.4l3.5 3.5a1.7 1.7 0 0 0 2.4 0l2.1-2.1a1.2 1.2 0 1 1 1.7 1.7l-2.1 2.1a4.1 4.1 0 0 1-5.8 0l-3.5-3.5a4.1 4.1 0 0 1 0-5.8l7.4-7.4a1.2 1.2 0 0 1 1.7 1.7Z"
+      />
+      <path
+        fill="#111827"
+        d="M10.5 12.2h8.1a1.2 1.2 0 1 1 0 2.4h-8.1a1.2 1.2 0 1 1 0-2.4Z"
+      />
+    </svg>
+  );
+}
+
+function CodeforcesIcon() {
+  return (
+    <svg className="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
+      <rect x="4" y="10" width="4" height="10" rx="1" fill="#2563eb" />
+      <rect x="10" y="5" width="4" height="15" rx="1" fill="#ef4444" />
+      <rect x="16" y="8" width="4" height="12" rx="1" fill="#f59e0b" />
+    </svg>
+  );
+}
+
+function CodeChefIcon() {
+  return (
+    <svg className="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
+      <path
+        fill="#8b5e34"
+        d="M7.1 14.6c-1.3-1.3-1.2-3.5.2-5l3.1-3.1c1.4-1.4 3.6-1.5 5-.2 1.2 1.2 1.2 3.3-.2 4.7l-3.3 3.3c-1.4 1.5-3.5 1.6-4.8.3Z"
+      />
+      <path
+        fill="#f3c17a"
+        d="M9.2 16.7a7 7 0 1 0 5.6-12.8 7 7 0 0 0-5.6 12.8Zm2.6-2.4a2.5 2.5 0 1 1 .4-5 2.5 2.5 0 0 1-.4 5Z"
+      />
+    </svg>
+  );
+}
+
+export default function ProfilePage() {
+  const { user, setUser, loading } = useUser();
+  const { progress: sheetProgress, streakData } = useSheetProgress();
+  const { profile: arenaProfile, leaderboard, matchHistory } = useArenaProfile(user);
+  const { recentlyViewed } = useRecentlyViewed();
+  const router = useRouter();
+  const {
+    formData,
+    setFormData,
+    saving,
+    savingAvatar,
+    fileInputRef,
+    handleChange,
+    handleAvatarChange,
+    saveProfile,
+  } = useProfileForm(user, setUser);
+
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [projectForm, setProjectForm] = useState(EMPTY_PROJECT);
+  const [editingProjectIndex, setEditingProjectIndex] = useState(null);
+  const [fetchingProfile, setFetchingProfile] = useState({});
+  const [importingRepos, setImportingRepos] = useState(false);
+  const [githubRepos, setGithubRepos] = useState([]);
+
+  useEffect(() => {
+    if (!loading && !user) {
+      router.push("/login");
+    }
+  }, [loading, router, user]);
+
+  const progressEntries = useMemo(
+    () =>
+      Object.entries(sheetProgress || {}).map(([id, entry]) => ({
+        id,
+        status: getEntryStatus(entry),
+        updatedAt: getEntryDate(entry),
+      })),
+    [sheetProgress]
+  );
+
+  const completedEntries = useMemo(
+    () => progressEntries.filter((entry) => entry.status === "Completed"),
+    [progressEntries]
+  );
+
+  const realStats = useMemo(() => {
+    const now = new Date();
+    const monthAgo = new Date(now);
+    monthAgo.setDate(monthAgo.getDate() - 30);
+
+    const solvedThisMonth = completedEntries.filter(
+      (entry) => entry.updatedAt && entry.updatedAt >= monthAgo
+    ).length;
+
+    const attemptedCount = progressEntries.filter(
+      (entry) => entry.status && entry.status !== "Not Started"
+    ).length;
+
+    return {
+      solvedCount: completedEntries.length,
+      solvedThisMonth: solvedThisMonth || streakData?.monthlySolved || 0,
+      attemptedCount,
+      totalProblems: allPracticeProblems.length,
+    };
+  }, [completedEntries, progressEntries, streakData?.monthlySolved]);
+
+  const [activities, setActivities] = useState([]);
+  const [loadingActivities, setLoadingActivities] = useState(true);
+
+  useEffect(() => {
+    if (!user) return;
+    let active = true;
+    async function fetchActivities() {
+      try {
+        const response = await fetch("/api/activity?days=365");
+        if (response.ok) {
+          const data = await response.json();
+          if (active) setActivities(data);
+        }
+      } catch (error) {
+        console.error("Failed to fetch activities:", error);
+      } finally {
+        if (active) setLoadingActivities(false);
+      }
+    }
+    fetchActivities();
+    return () => {
+      active = false;
+    };
+  }, [user]);
+
+  const activitySummary = useMemo(() => {
+    const activityMap = {};
+
+    // Helper to format Date objects as local YYYY-MM-DD strings
+    const getLocalDateString = (date) => {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
+      return `${year}-${month}-${day}`;
+    };
+
+    // 1. Add general site/visualizer activities
+    activities.forEach((act) => {
+      if (act.activity_date) {
+        activityMap[act.activity_date] = (activityMap[act.activity_date] || 0) + 1;
+      }
+    });
+
+    // 2. Add practice completions (giving solved problems higher weight)
+    completedEntries.forEach((entry) => {
+      if (entry.updatedAt) {
+        const dateStr = getLocalDateString(entry.updatedAt);
+        activityMap[dateStr] = (activityMap[dateStr] || 0) + 2;
+      }
+    });
+
+    const today = new Date();
+    const heatmapData = Array.from({ length: 343 }, (_, index) => {
+      // Calculate date of the cell relative to today (index 342 is today)
+      const d = new Date(today);
+      d.setDate(today.getDate() - (342 - index));
+      const dateStr = getLocalDateString(d);
+
+      const score = activityMap[dateStr] || 0;
+      if (score === 0) return 0;
+      if (score === 1) return 1;
+      if (score === 2) return 2;
+      if (score === 3) return 3;
+      return 4;
+    });
+
+    const monthLabels = [];
+    let lastMonth = -1;
+    for (let col = 0; col < 49; col++) {
+      const dayIndex = col * 7;
+      const d = new Date(today);
+      d.setDate(today.getDate() - (342 - dayIndex));
+      const month = d.getMonth();
+      if (month !== lastMonth) {
+        monthLabels.push({
+          name: d.toLocaleDateString("en-US", { month: "short" }),
+          colIndex: col,
+        });
+        lastMonth = month;
+      }
+    }
+
+    return {
+      heatmapData,
+      monthLabels,
+      activeDays: heatmapData.filter((level) => level > 0).length,
+    };
+  }, [activities, completedEntries]);
+
+  const dsaProgress = useMemo(
+    () =>
+      practiceData.map((topic) => {
+        const topicProblems = topic.subsections.flatMap((section) => section.items);
+        const solved = topicProblems.filter((problem) =>
+          completedEntries.some((entry) => entry.id === problem.id)
+        ).length;
+        const value = topicProblems.length > 0 ? Math.round((solved / topicProblems.length) * 100) : 0;
+        return [topic.title, value];
+      }),
+    [completedEntries]
+  );
+
+  const unlockedBadges = useMemo(
+    () => [
+      ["First Problem", realStats.solvedCount >= 1],
+      ["50 Problems", realStats.solvedCount >= 50],
+      ["100 Problems", realStats.solvedCount >= 100],
+      ["7 Day Streak", (streakData?.current || 0) >= 7],
+      ["30 Day Streak", (streakData?.current || 0) >= 30],
+      ["Arena Winner", (arenaProfile?.battlesWon || 0) >= 1],
+      ["Top 50 Arena", (arenaProfile?.rank || 999) <= 50],
+      ["Explorer", recentlyViewed.length >= 5],
+    ],
+    [arenaProfile?.battlesWon, arenaProfile?.rank, realStats.solvedCount, recentlyViewed.length, streakData?.current]
+  );
+
+  const displayName = formData.name || user?.user_metadata?.name || user?.email?.split('@')[0] || "User";
+  const initials = displayName
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+  const handle = formData.github_profile
+    ? `@${formData.github_profile.replace(/\/$/, "").split("/").pop()}`
+    : `@${user?.email?.split('@')[0] || "user"}`;
+  const branch = formData.branch || "Add your branch";
+  const location = formData.location || "Add your location";
+  const bio = formData.skills || "No bio provided.";
+  const joinedDate = user?.created_at ? new Date(user.created_at).toLocaleDateString('en-US', { month: 'short', year: 'numeric' }) : "Recently";
+  const arenaLevel = arenaProfile?.level || Math.max(1, Math.floor(realStats.solvedCount / 25) + 1);
+  const arenaXp = arenaProfile?.xp || realStats.solvedCount * 10;
+  const xpStep = 1000;
+  const currentLevelXp = arenaXp % xpStep;
+  const xpPercent = Math.min(100, Math.round((currentLevelXp / xpStep) * 100));
+  const arenaRank = arenaProfile?.rank || leaderboard.find((row) => row.userId === user?.id)?.rank || 0;
+  const battlesWon =
+    arenaProfile?.battlesWon ??
+    matchHistory.filter((match) => match.result === "Victory").length;
+  const arenaRating = arenaProfile?.rating || 0;
+  const totalBadges = unlockedBadges.filter(([, unlocked]) => unlocked).length;
+  const activeProjects = Array.isArray(user?.user_metadata?.projects)
+    ? user.user_metadata.projects.length
+    : 0;
+  const visualizedCount = recentlyViewed.filter((item) =>
+    item.path?.includes("/visualizer")
+  ).length;
+
+  const stats = [
+    {
+      icon: Code2,
+      value: formatNumber(realStats.solvedCount),
+      label: "Solved Problems",
+      note: `${formatNumber(realStats.solvedThisMonth)} this month`,
+      color: "text-violet-600 bg-violet-50 dark:bg-violet-950/40 dark:text-violet-300",
+    },
+    {
+      icon: Eye,
+      value: formatNumber(visualizedCount),
+      label: "Visualized",
+      note: `${recentlyViewed.length} recent views`,
+      color: "text-emerald-600 bg-emerald-50 dark:bg-emerald-950/40 dark:text-emerald-300",
+    },
+    {
+      icon: Medal,
+      value: formatNumber(battlesWon),
+      label: "Battles Won",
+      note: `${matchHistory.length} total matches`,
+      color: "text-orange-600 bg-orange-50 dark:bg-orange-950/40 dark:text-orange-300",
+    },
+    {
+      icon: BarChart3,
+      value: formatNumber(arenaRating),
+      label: "Contest Rating",
+      note: arenaRank ? `Rank #${arenaRank}` : "Unranked",
+      color: "text-blue-600 bg-blue-50 dark:bg-blue-950/40 dark:text-blue-300",
+    },
+    {
+      icon: Folder,
+      value: formatNumber(activeProjects),
+      label: "Projects",
+      note: activeProjects ? "From profile" : "Add projects",
+      color: "text-purple-600 bg-purple-50 dark:bg-purple-950/40 dark:text-purple-300",
+    },
+    {
+      icon: Award,
+      value: formatNumber(totalBadges),
+      label: "Badges",
+      note: `${unlockedBadges.length} available`,
+      color: "text-amber-600 bg-amber-50 dark:bg-amber-950/40 dark:text-amber-300",
+    },
+  ];
+
+  const badges = unlockedBadges.filter(([, unlocked]) => unlocked).slice(0, 4);
+  const visibleBadges = badges.length > 0 ? badges : [["Start Solving", true]];
+
+  const projects = useMemo(
+    ()=>
+      Array.isArray(user?.user_metadata?.projects)
+    ? user.user_metadata.projects.slice(0,3)
+    : [],
+    [user]
+  );
+
+  const profiles = [
+    {
+      name: "LeetCode",
+      value: user?.user_metadata?.leetcode_solved || 0,
+      label: "Solved",
+      icon: LeetCodeIcon,
+      accent: "border-amber-100 bg-amber-50/70 text-amber-700 dark:border-amber-900/50 dark:bg-amber-950/20 dark:text-amber-300",
+    },
+    {
+      name: "Codeforces",
+      value: user?.user_metadata?.codeforces_rating || 0,
+      label: "Rating",
+      icon: CodeforcesIcon,
+      accent: "border-blue-100 bg-blue-50/70 text-blue-700 dark:border-blue-900/50 dark:bg-blue-950/20 dark:text-blue-300",
+    },
+    {
+      name: "CodeChef",
+      value: user?.user_metadata?.codechef_stars || 0,
+      label: "Stars",
+      icon: CodeChefIcon,
+      accent: "border-orange-100 bg-orange-50/70 text-orange-700 dark:border-orange-900/50 dark:bg-orange-950/20 dark:text-orange-300",
+    },
+    {
+      name: "GitHub",
+      value: user?.user_metadata?.github_contributions || 0,
+      label: "Contributions",
+      icon: Github,
+      accent: "border-slate-200 bg-slate-50 text-slate-800 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100",
+    },
+  ];
+  const progress = dsaProgress;
+
+  const resetProjectForm = () => {
+    setProjectForm(EMPTY_PROJECT);
+    setEditingProjectIndex(null);
+  };
+
+  const handleProjectFormChange = (field, value) => {
+    setProjectForm((current) => ({ ...current, [field]: value }));
+  };
+
+  const fetchCodingProfileStat = async (platformKey, usernameField, statField, platformLabel) => {
+    const username = formData[usernameField]?.trim();
+
+    if (!username) {
+      toast.error(`Enter a ${platformLabel} username first`);
+      return;
+    }
+
+    setFetchingProfile((current) => ({ ...current, [platformKey]: true }));
+
+    try {
+      const response = await fetch(
+        `/api/coding-profiles/fetch?platform=${platformKey}&username=${encodeURIComponent(username)}`
+      );
+      const data = await response.json();
+
+      if (!response.ok) throw new Error(data.error || `Could not fetch ${platformLabel} stats`);
+
+      setFormData((current) => ({ ...current, [statField]: data.value || 0 }));
+      toast.success(`${platformLabel} stats fetched`);
+    } catch (error) {
+      toast.error(error.message || `Could not fetch ${platformLabel} stats`);
+    } finally {
+      setFetchingProfile((current) => ({ ...current, [platformKey]: false }));
+    }
+  };
+
+  const handleAddProject = () => {
+    setProjectForm(EMPTY_PROJECT);
+    setEditingProjectIndex(-1);
+  };
+
+  const handleImportFromGitHub = async () => {
+    const username = formData.github_username?.trim();
+
+    if (!username) {
+      toast.error("Add your GitHub username in Coding Profiles first");
+      return;
+    }
+
+    setImportingRepos(true);
+
+    try {
+      const response = await fetch(`/api/github-repos?username=${encodeURIComponent(username)}`);
+      const data = await response.json();
+
+      if (!response.ok) throw new Error(data.error || "Failed to fetch GitHub repos");
+
+      setGithubRepos(data.repos || []);
+      if (!data.repos?.length) toast.error("No public repositories found");
+    } catch (error) {
+      toast.error(error.message || "Could not fetch GitHub repos");
+    } finally {
+      setImportingRepos(false);
+    }
+  };
+
+  const handleSelectRepo = (repo) => {
+    const tags = [repo.language, ...(repo.topics || [])].filter(Boolean).slice(0, 4);
+
+    setProjectForm({
+      title: repo.name || "",
+      subtitle: repo.description || "",
+      tags: tags.join(", "),
+      url: repo.html_url || "",
+      preview: PRESET_PROJECT_GRADIENTS[Math.floor(Math.random() * PRESET_PROJECT_GRADIENTS.length)],
+    });
+    setEditingProjectIndex(-1);
+    setGithubRepos([]);
+  };
+
+  const handleEditProject = (index) => {
+    const project = formData.projects[index];
+    setProjectForm({
+      title: project.title || "",
+      subtitle: project.subtitle || "",
+      tags: Array.isArray(project.tags) ? project.tags.join(", ") : project.tags || "",
+      url: project.url || "",
+      preview: project.preview || PRESET_PROJECT_GRADIENTS[0],
+    });
+    setEditingProjectIndex(index);
+  };
+
+  const handleSaveProject = () => {
+    if (!projectForm.title.trim()) {
+      toast.error("Project title is required");
+      return;
+    }
+
+    const nextProject = {
+      title: projectForm.title.trim(),
+      subtitle: projectForm.subtitle.trim(),
+      tags: projectForm.tags
+        .split(",")
+        .map((tag) => tag.trim())
+        .filter(Boolean)
+        .slice(0, 4),
+      url: projectForm.url.trim(),
+      preview: projectForm.preview,
+    };
+
+    setFormData((current) => {
+      const currentProjects = Array.isArray(current.projects) ? current.projects : [];
+      const projects =
+        editingProjectIndex === -1
+          ? [...currentProjects, nextProject]
+          : currentProjects.map((project, index) =>
+              index === editingProjectIndex ? nextProject : project
+            );
+
+      return { ...current, projects };
+    });
+    resetProjectForm();
+  };
+
+  const handleDeleteProject = (index) => {
+    setFormData((current) => ({
+      ...current,
+      projects: current.projects.filter((_, projectIndex) => projectIndex !== index),
+    }));
+    if (editingProjectIndex === index) resetProjectForm();
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    const result = await saveProfile({
+      mode: "edit",
+      onSuccess: () => {
+        setIsEditOpen(false);
+        resetProjectForm();
+        toast.success("Profile updated successfully");
+      },
+    });
+
+    if (!result.ok) return;
+  };
+  if (loading || !user) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-white dark:bg-neutral-950">
+        <div className="h-10 w-10 animate-spin rounded-full border-2 border-violet-100 border-t-violet-600 dark:border-neutral-800 dark:border-t-violet-400" />
+      </div>
+    );
+  }
+
+  return (
+    <>
+    <main className="min-h-screen bg-white px-4 pb-8 pt-2 text-[#141a3a] transition-colors dark:bg-neutral-950 dark:text-neutral-100 sm:px-6 lg:px-8">
+      <div className="mx-auto max-w-7xl space-y-6">
+        <section className="grid gap-6 rounded-2xl border border-slate-100 bg-white p-6 shadow-[0_12px_40px_rgba(15,23,42,0.06)] transition-colors dark:border-neutral-800 dark:bg-neutral-900 dark:shadow-none lg:grid-cols-[minmax(0,1.15fr)_minmax(0,0.85fr)] lg:p-8">
+          <div className="relative flex flex-col gap-6">
+            <button
+              type="button"
+              onClick={() => setIsEditOpen(true)}
+              className="absolute right-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg border border-purple-500/40 bg-purple-600 text-white shadow-sm shadow-purple-500/20 transition hover:bg-purple-800 dark:border-purple-400/30 dark:bg-purple-700 dark:hover:bg-purple-900"
+              aria-label="Edit profile"
+            >
+              <Edit3 className="h-4 w-4" />
+            </button>
+            <div className="flex flex-col gap-6 sm:flex-row">
+              <div className="mx-auto flex shrink-0 flex-col items-center sm:mx-0">
+                <div className="relative h-32 w-32 sm:h-36 sm:w-36">
+                  <button
+                    type="button"
+                    onClick={() => fileInputRef.current?.click()}
+                    className="h-full w-full overflow-hidden rounded-full border-[6px] border-slate-100 bg-slate-100 shadow-inner dark:border-neutral-800 dark:bg-neutral-800"
+                    aria-label="Change profile photo"
+                  >
+                    {formData.avatar_url ? (
+                      <img
+                        src={formData.avatar_url}
+                        alt={displayName}
+                        width={144}
+                        height={144}
+                        className="h-full w-full object-cover"
+                      />
+                    ) : (
+                      <span className="flex h-full w-full items-center justify-center bg-violet-100 text-4xl font-black text-violet-700 dark:bg-violet-950/50 dark:text-violet-200">
+                        {initials}
+                      </span>
+                    )}
+                    {savingAvatar && (
+                      <span className="absolute inset-0 flex items-center justify-center bg-slate-950/50 text-xs font-black text-white">
+                        Saving
+                      </span>
+                    )}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => fileInputRef.current?.click()}
+                    className="absolute bottom-2 right-0 flex h-10 w-10 items-center justify-center rounded-full border border-purple-500/40 bg-purple-600 text-white shadow-md shadow-purple-500/20 transition hover:bg-purple-800 dark:border-purple-400/30 dark:bg-purple-700 dark:hover:bg-purple-900"
+                    aria-label="Upload avatar"
+                  >
+                    <Edit3 className="h-4 w-4" />
+                  </button>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/*"
+                    className="hidden"
+                    onChange={handleAvatarChange}
+                  />
+                </div>
+
+                {[
+                  [Github, safeExternalUrl(formData.github_profile), "GitHub"],
+                  [LinkIcon, safeExternalUrl(formData.resume_link), "Resume"],
+                  [Linkedin, safeExternalUrl(formData.linkedin_profile), "LinkedIn"],
+                ].some(([, href]) => href) && (
+                  <div className="mt-6 flex justify-center gap-2">
+                    {[
+                      [Github, safeExternalUrl(formData.github_profile), "GitHub"],
+                      [LinkIcon, safeExternalUrl(formData.resume_link), "Resume"],
+                      [Linkedin, safeExternalUrl(formData.linkedin_profile), "LinkedIn"],
+                    ].filter(([, href]) => href).map(([Icon, href, label]) => (
+                      <a
+                        key={label}
+                        href={href}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        aria-label={label}
+                        className="flex h-9 w-9 items-center justify-center rounded-lg border border-purple-500/40 bg-purple-600 text-white shadow-sm shadow-purple-500/20 transition hover:bg-purple-800 dark:border-purple-400/30 dark:bg-purple-700 dark:hover:bg-purple-900"
+                      >
+                        <Icon className="h-4 w-4" />
+                      </a>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              <div className="flex min-w-0 flex-1 flex-col items-center pt-4 text-center sm:items-start sm:pt-0 sm:text-left">
+              <div className="flex flex-wrap items-center justify-center gap-2 sm:justify-start">
+                <h1 className="text-3xl font-black tracking-tight text-[#111331] dark:text-white sm:text-4xl">
+                  {displayName}
+                </h1>
+                <CheckCircle2 className="h-6 w-6 fill-violet-600 text-white" />
+              </div>
+              <p className="mt-1 text-base font-bold text-violet-600 dark:text-violet-300">{handle}</p>
+
+              <div className="mt-4 flex flex-wrap justify-center gap-x-4 gap-y-2 text-sm font-semibold text-slate-500 dark:text-neutral-400 sm:justify-start">
+                <span className="inline-flex items-center gap-1.5">
+                  <ShieldCheck className="h-4 w-4" />
+                  {branch}
+                </span>
+                <span className="inline-flex items-center gap-1.5">
+                  <MapPin className="h-4 w-4" />
+                  {location}
+                </span>
+                <span className="inline-flex items-center gap-1.5">
+                  <Calendar className="h-4 w-4" />
+                  Joined {joinedDate}
+                </span>
+              </div>
+
+              <p className="mt-4 max-w-xl text-[15px] font-semibold leading-7 text-slate-600 dark:text-neutral-300">
+                {bio}
+              </p>
+
+              </div>
+            </div>
+
+              <div className="w-full">
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
+                  {profiles.map((profile) => (
+                    <div
+                      key={profile.name}
+                      className="group flex min-h-[82px] items-center gap-3 rounded-xl border border-slate-100 bg-slate-50/70 p-3 transition hover:-translate-y-0.5 hover:border-violet-200 hover:bg-white hover:shadow-[0_10px_24px_rgba(15,23,42,0.08)] dark:border-neutral-800 dark:bg-neutral-800/50 dark:hover:border-violet-900/70 dark:hover:bg-neutral-800 dark:hover:shadow-none"
+                    >
+                      <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border ${profile.accent}`}>
+                        <profile.icon
+                          className={
+                            profile.name === "GitHub"
+                              ? "h-5 w-5"
+                              : "h-6 w-6"
+                          }
+                        />
+                      </div>
+                      <div className="min-w-0 flex-1 text-center">
+                        <p className="text-sm font-black leading-tight text-[#111331] dark:text-white">
+                          {profile.name}
+                        </p>
+                        <p className="mt-1 text-[11px] font-bold leading-tight text-slate-500 dark:text-neutral-400">
+                          {profile.label}
+                        </p>
+                        <p className="mt-2 text-2xl font-black leading-none text-[#111331] dark:text-white">
+                          {formatNumber(profile.value)}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+          </div>
+
+          <div className="space-y-6 border-t border-slate-100 pt-6 dark:border-neutral-800 lg:border-l lg:border-t-0 lg:pl-8 lg:pt-0">
+            <div className="flex items-center gap-5">
+              <div className="flex h-16 w-16 items-center justify-center rounded-full bg-violet-100 text-violet-700 ring-8 ring-violet-50 dark:bg-violet-950/50 dark:text-violet-300 dark:ring-violet-950/30">
+                <ShieldCheck className="h-8 w-8" />
+              </div>
+              <div className="flex-1">
+                <p className="text-lg font-black">Level {arenaLevel}</p>
+                <div className="mt-3 h-2.5 overflow-hidden rounded-full bg-slate-200 dark:bg-neutral-800">
+                  <div
+                    className="h-full rounded-full bg-violet-600 dark:bg-violet-400"
+                    style={{ width: `${xpPercent}%` }}
+                  />
+                </div>
+                <p className="mt-2 text-right text-xs font-bold text-slate-500 dark:text-neutral-400">
+                  {formatNumber(currentLevelXp)} / {formatNumber(xpStep)} XP
+                </p>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 divide-x divide-slate-100 rounded-xl border border-slate-100 py-4 dark:divide-neutral-800 dark:border-neutral-800">
+              <div className="flex items-center justify-center gap-3">
+                <Flame className="h-7 w-7 rounded-lg bg-orange-50 p-1.5 text-orange-600 dark:bg-orange-950/40 dark:text-orange-300" />
+                <div>
+                  <p className="text-xl font-black">{streakData?.current || 0}</p>
+                  <p className="text-xs font-bold text-slate-500 dark:text-neutral-400">Day Streak</p>
+                </div>
+              </div>
+              <div className="flex items-center justify-center gap-3">
+                <Trophy className="h-7 w-7 rounded-lg bg-amber-50 p-1.5 text-amber-500 dark:bg-amber-950/40 dark:text-amber-300" />
+                <div>
+                  <p className="text-xl font-black">{arenaRank ? `#${arenaRank}` : "--"}</p>
+                  <p className="text-xs font-bold text-slate-500 dark:text-neutral-400">Arena Rank</p>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <div className="flex items-center justify-between">
+                <h2 className="text-sm font-black">Top Badges</h2>
+              </div>
+              <div className="mt-4 flex min-h-[110px] items-center justify-center rounded-xl border border-dashed border-violet-200 bg-violet-50/60 text-center dark:border-violet-900/60 dark:bg-violet-950/20">
+              <div>
+                <Award className="mx-auto h-7 w-7 text-violet-600 dark:text-violet-300" />
+                <p className="mt-2 text-sm font-black text-violet-700 dark:text-violet-200">
+                  Coming Soon
+                </p>
+                <p className="mt-1 text-xs font-semibold text-slate-500 dark:text-neutral-400">
+                  Badges will appear here after achievements are live.
+                </p>
+              </div>
+            </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
+          {stats.map((item) => {
+            const Icon = item.icon;
+            return (
+              <div
+                key={item.label}
+                className="flex items-center gap-4 rounded-xl border border-slate-100 bg-white p-5 shadow-[0_8px_30px_rgba(15,23,42,0.05)] transition-colors dark:border-neutral-800 dark:bg-neutral-900 dark:shadow-none"
+              >
+                <div className={`flex h-11 w-11 items-center justify-center rounded-xl ${item.color}`}>
+                  <Icon className="h-6 w-6" />
+                </div>
+                <div>
+                  <p className="text-2xl font-black text-[#111331] dark:text-white">{item.value}</p>
+                  <p className="text-xs font-bold text-slate-600 dark:text-neutral-300">{item.label}</p>
+                  <p className="mt-1 text-xs font-bold text-emerald-600 dark:text-emerald-300">{item.note}</p>
+                </div>
+              </div>
+            );
+          })}
+        </section>
+
+        <section className="rounded-2xl border border-slate-100 bg-white p-5 shadow-[0_8px_30px_rgba(15,23,42,0.05)] transition-colors dark:border-neutral-800 dark:bg-neutral-900 dark:shadow-none">
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <h2 className="text-base font-black">Consistency</h2>
+            <button className="rounded-lg border border-slate-200 px-3 py-1.5 text-xs font-bold text-slate-600 dark:border-neutral-700 dark:text-neutral-300">
+              Last 365 days
+            </button>
+          </div>
+          <div className="mt-4 grid gap-5 lg:grid-cols-[minmax(0,1fr)_190px]">
+            <div className="min-w-0 pb-1">
+              <div className="flex items-start gap-2 sm:gap-3">
+                <div className="mt-7 grid shrink-0 grid-rows-7 gap-1 text-[10px] font-bold leading-3 text-slate-500 dark:text-neutral-400 sm:gap-1.5 sm:text-xs sm:leading-4">
+                  {["Mon", "", "Wed", "", "Fri", "", "Sun"].map((day, index) => (
+                    <span key={`${day}-${index}`} className="flex h-2.5 items-center sm:h-3">
+                      {day}
+                    </span>
+                  ))}
+                </div>
+                <div className="min-w-0 flex-1 overflow-x-auto pb-2 [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-slate-200 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700">
+                  <div className="w-max">
+                    <div className="relative mb-2 h-4 w-[682px] text-[10px] font-bold text-slate-400 dark:text-neutral-500 sm:w-[876px] sm:text-xs">
+                      {activitySummary.monthLabels.map((lbl, idx) => (
+                        <span key={idx}>
+                          <span
+                            className="absolute sm:hidden"
+                            style={{ left: `${lbl.colIndex * 14}px` }}
+                          >
+                            {lbl.name}
+                          </span>
+                          <span
+                            className="absolute hidden sm:inline"
+                            style={{ left: `${lbl.colIndex * 18}px` }}
+                          >
+                            {lbl.name}
+                          </span>
+                        </span>
+                      ))}
+                    </div>
+                    <div className="grid grid-flow-col grid-rows-7 gap-1 sm:gap-1.5">
+                      {activitySummary.heatmapData.map((level, index) => (
+                        <span
+                          key={index}
+                          title={heatLevelRange[level]}
+                          className={`h-2.5 w-2.5 rounded-[3px] sm:h-3 sm:w-3 sm:rounded-[4px] ${heatLevelClass[level]}`}
+                        />
+                    ))}
+                    </div>
+                    <div className="mt-3">
+                      <HeatmapLegend />
+                    </div>
+    
+                    </div>
+                  </div>
+                </div>
+              </div>
+            <div className="grid content-center gap-4 border-t border-slate-100 pt-4 dark:border-neutral-800 lg:border-l lg:border-t-0 lg:pl-6 lg:pt-0">
+              {[
+                [Code2, formatNumber(realStats.solvedCount), "Solved Problems", "text-violet-600 bg-violet-50 dark:bg-violet-950/40 dark:text-violet-300"],
+                [Flame, `${streakData?.best || 0} days`, "Longest Streak", "text-orange-600 bg-orange-50 dark:bg-orange-950/40 dark:text-orange-300"],
+                [Calendar, formatNumber(activitySummary.activeDays), "Active Days", "text-slate-700 bg-slate-50 dark:bg-neutral-800 dark:text-neutral-200"],
+              ].map(([Icon, value, label, color]) => (
+                <div key={label} className="flex items-center gap-3">
+                  <Icon className={`h-9 w-9 rounded-lg p-2 ${color}`} />
+                  <div>
+                    <p className="text-lg font-black">{value}</p>
+                    <p className="text-xs font-bold text-slate-500 dark:text-neutral-400">{label}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+      </section>
+
+        <section data-pr-fix="complete-classnames" className="grid gap-6 lg:grid-cols-2 xl:grid-cols-[1.35fr_0.75fr_1fr]">
+          <div className="rounded-2xl border border-slate-100 bg-white p-5 shadow-[0_8px_30px_rgba(15,23,42,0.05)] transition-colors dark:border-neutral-800 dark:bg-neutral-900 dark:shadow-none">
+            <div className="mb-4 flex items-center justify-between">
+              <h2 className="text-base font-black">My Projects</h2>
+              <button
+                type="button"
+                onClick={() => setIsEditOpen(true)}
+                className="text-xs font-black text-violet-600 dark:text-violet-300 hover:underline"
+              >
+                Manage Projects -&gt;
+              </button>
+            </div>
+            {projects.length == 0 ? (
+              <div className="flex min-h-[120px] items-center justify-center rounded-xl border border-dashed border-violet-200 bg-violet-50/60 text-center dark:border-violet-900/60 dark:bg-violet-950/20">
+                <div>
+                  <p className="text-sm font-black text-violet-700 dark:text-violet-200">No projects yet</p>
+                  <p className="mt-1 text-xs font-semibold text-slate-500 dark:text-neutral-400">
+                    CLick Manage Projects to add yours
+                  </p>
+                </div>
+              </div>
+            ) : (
+            <div className="grid gap-3 sm:grid-cols-3">
+              {projects.map((project) => (
+                <div
+                  key={project.title}
+                  className="overflow-hidden rounded-lg border border-slate-100 bg-white shadow-sm dark:border-neutral-800 dark:bg-neutral-950"
+                >
+                  <div className={`relative h-24 ${project.preview}`}>
+                    {project.url &&(
+                       <a
+                       href={project.url}
+                       target="_blank"
+                       rel="noopener noreferrer"
+                       className="absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-md bg-white/90 text-slate-700 shadow-sm dark:bg-neutral-900/90 dark:text-neutral-200"
+                       aria-label={`Open ${project.title}`}
+                     >
+                       <LinkIcon className="h-3.5 w-3.5" />
+                     </a>
+                    )}
+                  </div>
+                  <div className="p-3">
+                    <h3 className="truncate text-sm font-black text-[#111331] dark:text-white">
+                      {project.title}
+                    </h3>
+                    <p className="mt-1 truncate text-[11px] font-semibold text-slate-500 dark:text-neutral-400">
+                      {project.subtitle}
+                    </p>
+                    <div className="mt-3 flex flex-wrap gap-1.5">
+                      {project.tags.map((tag) => (
+                        <span
+                          key={tag}
+                          className="rounded bg-violet-50 px-1.5 py-1 text-[10px] font-black text-violet-600 dark:bg-violet-950/40 dark:text-violet-300"
+                        >
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+            )}
+          </div>
+
+          <div className="rounded-2xl border border-slate-100 bg-white p-5 shadow-[0_8px_30px_rgba(15,23,42,0.05)] transition-colors dark:border-neutral-800 dark:bg-neutral-900 dark:shadow-none xl:col-span-2">
+            <div className="mb-4 flex items-center justify-between">
+              <h2 className="text-base font-black">DSA Progress</h2>
+              <button onClick={() => router.push("/roadmaps")} className="text-xs font-black text-violet-600 dark:text-violet-300">View Full Roadmap -&gt;</button>
+            </div>
+            <div className="space-y-3">
+              {progress.map(([label, value]) => (
+                <div key={label} className="grid grid-cols-[120px_1fr_38px] items-center gap-3">
+                  <span className="text-xs font-bold text-slate-600 dark:text-neutral-300">{label}</span>
+                  <div className="h-2 overflow-hidden rounded-full bg-slate-200 dark:bg-neutral-800">
+                    <div className="h-full rounded-full bg-violet-600 dark:bg-violet-400" style={{ width: `${value}%` }} />
+                  </div>
+                  <span className="text-right text-xs font-black text-slate-600 dark:text-neutral-300">{value}%</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <AnimatePresence>
+        {isEditOpen && (
+          <motion.div
+            className="fixed inset-0 z-[10000] flex items-center justify-center bg-slate-950/60 p-4 backdrop-blur-sm dark:bg-black/80"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={() => {
+              setIsEditOpen(false);
+              resetProjectForm();
+            }}
+          >
+            <motion.form
+              onSubmit={handleSubmit}
+              onClick={(event) => event.stopPropagation()}
+              className="flex max-h-[90vh] w-full max-w-4xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl dark:border dark:border-neutral-800 dark:bg-neutral-900"
+              initial={{ y: 20, opacity: 0, scale: 0.98 }}
+              animate={{ y: 0, opacity: 1, scale: 1 }}
+              exit={{ y: 20, opacity: 0, scale: 0.98 }}
+            >
+              <div className="flex items-center justify-between border-b border-slate-100 px-6 py-4 dark:border-neutral-800">
+                <div>
+                  <h2 className="text-xl font-black text-[#111331] dark:text-white">Edit Profile</h2>
+                  <p className="text-sm font-semibold text-slate-500 dark:text-neutral-400">Update the details shown on your profile.</p>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setIsEditOpen(false);
+                    resetProjectForm();
+                  }}
+                  className="rounded-lg p-2 text-slate-500 hover:bg-slate-100 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white"
+                  aria-label="Close edit profile"
+                >
+                  <X className="h-5 w-5" />
+                </button>
+              </div>
+
+              <ProfileForm
+                mode="edit"
+                formData={formData}
+                onChange={handleChange}
+                user={user}
+                fileInputRef={fileInputRef}
+                savingAvatar={savingAvatar}
+                onAvatarChange={handleAvatarChange}
+                fetchingProfile={fetchingProfile}
+                onFetchCodingProfile={fetchCodingProfileStat}
+                formatNumber={formatNumber}
+                projectForm={projectForm}
+                onProjectFormChange={handleProjectFormChange}
+                editingProjectIndex={editingProjectIndex}
+                onAddProject={handleAddProject}
+                onEditProject={handleEditProject}
+                onDeleteProject={handleDeleteProject}
+                onSaveProject={handleSaveProject}
+                onResetProjectForm={resetProjectForm}
+                onImportFromGitHub={handleImportFromGitHub}
+                importingRepos={importingRepos}
+                githubRepos={githubRepos}
+                onSelectRepo={handleSelectRepo}
+              />
+
+              <div className="flex items-center justify-end gap-3 border-t border-slate-100 bg-slate-50 px-6 py-4 dark:border-neutral-800 dark:bg-neutral-950/60">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setIsEditOpen(false);
+                    resetProjectForm();
+                  }}
+                  className="rounded-xl border border-slate-200 px-5 py-2.5 text-sm font-black text-slate-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={saving}
+                  className="inline-flex items-center gap-2 rounded-xl bg-violet-600 px-5 py-2.5 text-sm font-black text-white shadow-lg shadow-violet-200 disabled:opacity-60 dark:bg-violet-500 dark:shadow-none"
+                >
+                  {saving ? (
+                    <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white" />
+                  ) : (
+                    <Save className="h-4 w-4" />
+                  )}
+                  {saving ? "Saving..." : "Save Changes"}
+                </button>
+              </div>
+            </motion.form>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </main>
+    <Footer />
+    </>
+  );
+}
diff --git a/src/app/recently-viewed/page.jsx b/src/app/recently-viewed/page.jsx
new file mode 100644
index 000000000..af303f148
--- /dev/null
+++ b/src/app/recently-viewed/page.jsx
@@ -0,0 +1,24 @@
+import Link from "next/link";
+import RecentlyViewed from "@/app/components/ui/RecentlyViewed";
+
+export default function RecentlyViewedPage() {
+  return (
+    <main className="min-h-screen px-6 pt-28 py-12">
+      <div className="max-w-4xl mx-auto">
+        
+        <h1 className="text-3xl font-bold mb-8">
+          Recently Viewed Topics
+        </h1>
+        <RecentlyViewed />
+        
+        <Link
+          href="/"
+              className="inline-flex items-center gap-2 px-6 py-2.5 rounded-full border border-[var(--color-border)] hover:border-[var(--color-primary)] hover:text-[var(--color-primary)] transition-all font-semibold text-sm text-[var(--udemy-text)] dark:text-[var(--udemy-dark-text)]"
+        >
+          ← Back to Home
+        </Link>
+        
+      </div>
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/src/app/roadmaps/page.jsx b/src/app/roadmaps/page.jsx
new file mode 100644
index 000000000..20f477dd3
--- /dev/null
+++ b/src/app/roadmaps/page.jsx
@@ -0,0 +1,11 @@
+import Roadmaps from "@/app/components/roadmaps";
+
+export const metadata = {
+  title: "Learning Roadmap | AlgoBuddy",
+  description:
+    "A step-by-step curriculum to learn Data Structures and Algorithms from basics to advanced. Track your progress with interactive checkboxes on AlgoBuddy.",
+};
+
+export default function RoadmapsPage() {
+  return <Roadmaps />;
+}
diff --git a/src/app/saved-jobs/page.jsx b/src/app/saved-jobs/page.jsx
new file mode 100644
index 000000000..5057ab31a
--- /dev/null
+++ b/src/app/saved-jobs/page.jsx
@@ -0,0 +1,199 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { Briefcase, Bookmark, Download, ChevronLeft, ChevronRight, BookmarkMinus } from "lucide-react";
+
+export default function SavedJobsPage() {
+  const [jobs, setJobs] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(0);
+  const [totalJobs, setTotalJobs] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [removing, setRemoving] = useState(null);
+  const [exporting, setExporting] = useState(false);
+
+  async function fetchBookmarks(page) {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/job-bookmarks?page=${page}&limit=20`);
+      const data = await res.json();
+      setJobs(data.jobs || []);
+      setTotalPages(data.totalPages || 0);
+      setTotalJobs(data.totalJobs || 0);
+      setCurrentPage(data.currentPage || 1);
+    } catch (err) {
+      console.error("Failed to fetch bookmarks:", err);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function removeBookmark(jobId) {
+    setRemoving(jobId);
+    try {
+      const res = await fetch("/api/job-bookmarks", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ jobId }),
+      });
+      if (res.ok) {
+        setJobs((prev) => prev.filter((j) => j.id !== jobId));
+        setTotalJobs((prev) => Math.max(0, prev - 1));
+      }
+    } catch (err) {
+      console.error("Remove bookmark error:", err);
+    } finally {
+      setRemoving(null);
+    }
+  }
+
+  async function handleExport() {
+    setExporting(true);
+    try {
+      const res = await fetch("/api/job-bookmarks/export");
+      if (!res.ok) throw new Error("Export failed");
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `saved-jobs-export-${Date.now()}.csv`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error("Export error:", err);
+    } finally {
+      setExporting(false);
+    }
+  }
+
+  function handlePrev() {
+    if (currentPage > 1) setCurrentPage((p) => p - 1);
+  }
+
+  function handleNext() {
+    if (currentPage < totalPages) setCurrentPage((p) => p + 1);
+  }
+
+  useEffect(() => {
+    fetchBookmarks(currentPage);
+  }, [currentPage]);
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-10 px-4">
+      <div className="max-w-4xl mx-auto">
+        <div className="flex items-center justify-between mb-8">
+          <div className="flex items-center gap-3">
+            <Bookmark className="h-6 w-6 text-indigo-600" />
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900">Saved Jobs</h1>
+              <p className="text-gray-600 mt-1">
+                {totalJobs > 0
+                  ? `You have ${totalJobs} saved job${totalJobs !== 1 ? "s" : ""}`
+                  : "Jobs you bookmark will appear here"}
+              </p>
+            </div>
+          </div>
+          {jobs.length > 0 && (
+            <button
+              onClick={handleExport}
+              disabled={exporting}
+              className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 rounded-lg hover:bg-indigo-100 disabled:opacity-50 transition-colors"
+            >
+              <Download className="h-4 w-4" />
+              {exporting ? "Exporting..." : "Export CSV"}
+            </button>
+          )}
+        </div>
+
+        {loading ? (
+          <div className="space-y-4">
+            {[...Array(3)].map((_, i) => (
+              <div key={i} className="bg-white rounded-xl shadow-sm p-6 animate-pulse">
+                <div className="h-5 bg-gray-200 rounded w-3/4 mb-3" />
+                <div className="h-4 bg-gray-200 rounded w-1/2" />
+              </div>
+            ))}
+          </div>
+        ) : jobs.length === 0 ? (
+          <div className="text-center py-20">
+            <Bookmark className="mx-auto h-12 w-12 text-gray-400" />
+            <h2 className="mt-4 text-xl font-semibold text-gray-600">No saved jobs yet</h2>
+            <p className="text-gray-500 mt-1">Bookmark jobs from the student jobs page to see them here.</p>
+            <Link
+              href="/student-jobs"
+              className="inline-flex items-center gap-2 mt-6 px-4 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg"
+            >
+              Browse Jobs
+            </Link>
+          </div>
+        ) : (
+          <>
+            <div className="space-y-4">
+              {jobs.map((job) => (
+                <div key={job.id} className="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow flex items-start justify-between gap-4">
+                  <div className="flex-1 min-w-0">
+                    <h2 className="text-xl font-semibold text-gray-900">{job.title}</h2>
+                    <p className="text-indigo-600 font-medium mt-1">{job.company}</p>
+                    <div className="flex flex-wrap items-center gap-4 mt-3 text-sm text-gray-500">
+                      {job.location && <span>{job.location}</span>}
+                      {job.job_type && <span className="capitalize">{job.job_type.replace("-", " ")}</span>}
+                      {job.experience_level && <span className="capitalize">{job.experience_level.replace("-", " ")}</span>}
+                      <span>{new Date(job.created_at).toLocaleDateString()}</span>
+                    </div>
+                    {job.salary_range && (
+                      <p className="mt-2 text-sm font-medium text-green-600">{job.salary_range}</p>
+                    )}
+                  </div>
+
+                  <div className="flex items-center gap-3 flex-shrink-0">
+                    <Link
+                      href="/student-jobs"
+                      className="text-sm font-medium text-indigo-600 hover:text-indigo-800 whitespace-nowrap"
+                    >
+                      View
+                    </Link>
+                    <button
+                      onClick={() => removeBookmark(job.id)}
+                      disabled={removing === job.id}
+                      className="text-gray-400 hover:text-red-600 disabled:opacity-50 transition-colors"
+                      aria-label="Remove bookmark"
+                    >
+                      <BookmarkMinus className="h-5 w-5" />
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {totalPages > 1 && (
+              <div className="flex items-center justify-center gap-2 mt-8">
+                <button
+                  onClick={handlePrev}
+                  disabled={currentPage === 1}
+                  className="flex items-center gap-1 px-4 py-2 text-sm font-medium rounded-lg border border-gray-300 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                  Previous
+                </button>
+
+                <span className="text-sm text-gray-600">
+                  Page {currentPage} of {totalPages}
+                </span>
+
+                <button
+                  onClick={handleNext}
+                  disabled={currentPage === totalPages}
+                  className="flex items-center gap-1 px-4 py-2 text-sm font-medium rounded-lg border border-gray-300 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                  Next
+                  <ChevronRight className="h-4 w-4" />
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/student-jobs/page.jsx b/src/app/student-jobs/page.jsx
new file mode 100644
index 000000000..76ccc35f8
--- /dev/null
+++ b/src/app/student-jobs/page.jsx
@@ -0,0 +1,413 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { toast } from "react-hot-toast";
+import {
+  Briefcase, MapPin, Calendar, Search, ChevronLeft, ChevronRight, X,
+  Send, CheckCircle, Bookmark, BookmarkCheck, BadgeCheck
+} from "lucide-react";
+import Link from "next/link";
+import HighlightText from "@/app/components/ui/HighlightText";
+
+export default function StudentJobsPage() {
+  const [jobs, setJobs] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(0);
+  const [totalJobs, setTotalJobs] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchInput, setSearchInput] = useState("");
+  const [appliedIds, setAppliedIds] = useState(new Set());
+  const [bookmarkedIds, setBookmarkedIds] = useState(new Set());
+  const [applying, setApplying] = useState(null);
+  const [bookmarking, setBookmarking] = useState(null);
+  const [confirmJob, setConfirmJob] = useState(null);
+
+  const fetchJobs = useCallback(async (page, search) => {
+    setLoading(true);
+    try {
+      const params = new URLSearchParams({ page, limit: "20" });
+      if (search.trim()) params.set("search", search.trim());
+      const res = await fetch(`/api/student-jobs?${params}`);
+      const data = await res.json();
+      setJobs(data.jobs || []);
+      setTotalPages(data.totalPages || 0);
+      setTotalJobs(data.totalJobs || 0);
+      setCurrentPage(data.currentPage || 1);
+    } catch (err) {
+      console.error("Failed to fetch jobs:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  async function fetchApplications() {
+    try {
+      const res = await fetch("/api/applications?limit=200");
+      const data = await res.json();
+      setAppliedIds(new Set((data.applications || []).map((a) => a.job_id)));
+    } catch (err) {
+      console.error("Failed to fetch applications:", err);
+    }
+  }
+
+  async function fetchBookmarks() {
+    try {
+      const res = await fetch("/api/job-bookmarks?limit=200");
+      const data = await res.json();
+      setBookmarkedIds(new Set(data.bookmarkedIds || []));
+    } catch (err) {
+      console.error("Failed to fetch bookmarks:", err);
+    }
+  }
+
+  useEffect(() => {
+    fetchJobs(currentPage, searchQuery);
+    fetchApplications();
+    fetchBookmarks();
+  }, [currentPage, searchQuery, fetchJobs]);
+
+  function handleSearch(e) {
+    e.preventDefault();
+    setSearchQuery(searchInput);
+    setCurrentPage(1);
+  }
+
+  function handleClearSearch() {
+    setSearchInput("");
+    setSearchQuery("");
+    setCurrentPage(1);
+  }
+
+  function handlePageClick(page) {
+    setCurrentPage(page);
+  }
+
+  async function handleToggleBookmark(jobId) {
+    setBookmarking(jobId);
+    try {
+      const res = await fetch("/api/job-bookmarks", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ jobId }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        toast.error(data.error || "Failed to update bookmark");
+        return;
+      }
+      setBookmarkedIds((prev) => {
+        const next = new Set(prev);
+        if (data.bookmarked) {
+          next.add(jobId);
+          toast.success("Job bookmarked!");
+        } else {
+          next.delete(jobId);
+          toast.success("Bookmark removed");
+        }
+        return next;
+      });
+    } catch (err) {
+      toast.error("Something went wrong");
+      console.error("Bookmark error:", err);
+    } finally {
+      setBookmarking(null);
+    }
+  }
+
+  async function handleApply(jobId) {
+    setApplying(jobId);
+    setConfirmJob(null);
+    try {
+      const res = await fetch("/api/applications", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ jobId }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        toast.error(data.error || "Failed to apply");
+        return;
+      }
+      toast.success(data.message || "Application submitted!");
+      setAppliedIds((prev) => new Set(prev).add(jobId));
+    } catch (err) {
+      toast.error("Something went wrong. Please try again.");
+      console.error("Apply error:", err);
+    } finally {
+      setApplying(null);
+    }
+  }
+
+  function handlePrev() {
+    if (currentPage > 1) setCurrentPage((p) => p - 1);
+  }
+
+  function handleNext() {
+    if (currentPage < totalPages) setCurrentPage((p) => p + 1);
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-10 px-4">
+      <div className="max-w-4xl mx-auto">
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">Student Jobs</h1>
+            <p className="text-gray-600 mt-1">
+              {totalJobs > 0
+                ? `Showing ${jobs.length} of ${totalJobs} approved opportunities`
+                : "No job listings available"}
+            </p>
+          </div>
+          <Link
+            href="/saved-jobs"
+            className="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 hover:bg-indigo-100 rounded-lg transition-colors"
+          >
+            <BookmarkCheck className="h-4 w-4" />
+            Saved Jobs
+          </Link>
+        </div>
+
+        <form onSubmit={handleSearch} className="mb-6">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
+            <input
+              type="text"
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+              placeholder="Search by title, company, skills, location, or keywords..."
+              className="w-full pl-10 pr-10 py-3 bg-white border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+            />
+            {searchInput && (
+              <button
+                type="button"
+                onClick={handleClearSearch}
+                className="absolute right-12 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            )}
+            <button
+              type="submit"
+              className="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1.5 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-colors"
+            >
+              Search
+            </button>
+          </div>
+        </form>
+
+        {loading ? (
+          <div className="space-y-4">
+            {[...Array(5)].map((_, i) => (
+              <div key={i} className="bg-white rounded-xl shadow-sm p-6 animate-pulse">
+                <div className="h-5 bg-gray-200 rounded w-3/4 mb-3" />
+                <div className="h-4 bg-gray-200 rounded w-1/2 mb-2" />
+                <div className="h-4 bg-gray-200 rounded w-1/3" />
+              </div>
+            ))}
+          </div>
+        ) : jobs.length === 0 ? (
+          <div className="text-center py-20">
+            <Briefcase className="mx-auto h-12 w-12 text-gray-400" />
+            <h2 className="mt-4 text-xl font-semibold text-gray-600">
+              {searchQuery ? "No matching jobs found" : "No jobs found"}
+            </h2>
+            <p className="text-gray-500 mt-1">
+              {searchQuery
+                ? "Try different keywords or clear your search."
+                : "Check back later for new opportunities."}
+            </p>
+            {searchQuery && (
+              <button
+                onClick={handleClearSearch}
+                className="mt-4 px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition-colors"
+              >
+                Clear search
+              </button>
+            )}
+          </div>
+        ) : (
+          <>
+            <div className="space-y-4">
+              {jobs.map((job) => {
+                const alreadyApplied = appliedIds.has(job.id);
+                const bookmarked = bookmarkedIds.has(job.id);
+                const isBookmarking = bookmarking === job.id;
+                return (
+                  <div key={job.id} className="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
+                    <div className="flex items-start justify-between">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <h2 className="text-xl font-semibold text-gray-900">
+                            <HighlightText text={job.title} query={searchQuery} />
+                          </h2>
+                          <button
+                            onClick={() => handleToggleBookmark(job.id)}
+                            disabled={isBookmarking}
+                            className="p-1 text-gray-400 hover:text-indigo-600 disabled:opacity-50 transition-colors"
+                            aria-label={bookmarked ? "Remove bookmark" : "Add bookmark"}
+                          >
+                            {bookmarked ? (
+                              <BookmarkCheck className="h-5 w-5 text-indigo-600 fill-indigo-600" />
+                            ) : (
+                              <Bookmark className="h-5 w-5" />
+                            )}
+                          </button>
+                        </div>
+                        <p className="text-indigo-600 font-medium mt-1 flex items-center gap-2">
+                          <HighlightText text={job.company} query={searchQuery} />
+                          {job.verified_recruiter && (
+                            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-700">
+                              <BadgeCheck className="h-3.5 w-3.5" />
+                              Verified Recruiter
+                            </span>
+                          )}
+                        </p>
+                        <div className="flex flex-wrap items-center gap-4 mt-3 text-sm text-gray-500">
+                          {job.location && (
+                            <span className="flex items-center gap-1">
+                              <MapPin className="h-4 w-4" />
+                              <HighlightText text={job.location} query={searchQuery} />
+                            </span>
+                          )}
+                          {job.job_type && (
+                            <span className="capitalize">{job.job_type.replace("-", " ")}</span>
+                          )}
+                          {job.experience_level && (
+                            <span className="capitalize">{job.experience_level.replace("-", " ")}</span>
+                          )}
+                          <span className="flex items-center gap-1">
+                            <Calendar className="h-4 w-4" />
+                            {new Date(job.created_at).toLocaleDateString()}
+                          </span>
+                        </div>
+                        {job.salary_range && (
+                          <p className="mt-2 text-sm font-medium text-green-600">{job.salary_range}</p>
+                        )}
+                        {job.skills && (
+                          <p className="mt-2 text-sm text-gray-500">
+                            <span className="font-medium text-gray-700">Skills: </span>
+                            <HighlightText text={job.skills} query={searchQuery} />
+                          </p>
+                        )}
+                        <p className="mt-3 text-gray-600 line-clamp-3">
+                          <HighlightText text={job.description} query={searchQuery} />
+                        </p>
+                      </div>
+
+                      <div className="ml-6 flex-shrink-0 self-start">
+                        {alreadyApplied ? (
+                          <span className="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-green-700 bg-green-50 border border-green-200 rounded-lg">
+                            <CheckCircle className="h-4 w-4" />
+                            Applied
+                          </span>
+                        ) : (
+                          <button
+                            onClick={() => setConfirmJob(job)}
+                            disabled={applying === job.id}
+                            className="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg transition-colors"
+                          >
+                            <Send className="h-4 w-4" />
+                            {applying === job.id ? "Applying..." : "Apply with Profile"}
+                          </button>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            {totalPages > 1 && (
+              <div className="flex items-center justify-center gap-2 mt-8">
+                <button
+                  onClick={handlePrev}
+                  disabled={currentPage === 1}
+                  className="flex items-center gap-1 px-4 py-2 text-sm font-medium rounded-lg border border-gray-300 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                  Previous
+                </button>
+
+                <div className="flex items-center gap-1">
+                  {Array.from({ length: Math.min(totalPages, 7) }, (_, i) => {
+                    let pageNum;
+                    if (totalPages <= 7) {
+                      pageNum = i + 1;
+                    } else if (currentPage <= 4) {
+                      pageNum = i + 1;
+                    } else if (currentPage >= totalPages - 3) {
+                      pageNum = totalPages - 6 + i;
+                    } else {
+                      pageNum = currentPage - 3 + i;
+                    }
+                    return (
+                      <button
+                        key={pageNum}
+                        onClick={() => handlePageClick(pageNum)}
+                        className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
+                          currentPage === pageNum
+                            ? "bg-indigo-600 text-white"
+                            : "text-gray-700 hover:bg-gray-100"
+                        }`}
+                      >
+                        {pageNum}
+                      </button>
+                    );
+                  })}
+                </div>
+
+                <button
+                  onClick={handleNext}
+                  disabled={currentPage === totalPages}
+                  className="flex items-center gap-1 px-4 py-2 text-sm font-medium rounded-lg border border-gray-300 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                  Next
+                  <ChevronRight className="h-4 w-4" />
+                </button>
+              </div>
+            )}
+
+            <p className="text-center text-sm text-gray-500 mt-4">
+              Page {currentPage} of {totalPages}
+            </p>
+          </>
+        )}
+      </div>
+
+      {confirmJob && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+          <div className="bg-white rounded-xl shadow-xl p-6 max-w-md w-full mx-4">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-semibold text-gray-900">Confirm Application</h3>
+              <button onClick={() => setConfirmJob(null)} className="p-1 text-gray-400 hover:text-gray-600">
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+            <p className="text-sm text-gray-600">
+              Your profile details (name, email, branch, CGPA, skills, resume link) will be shared with <strong>{confirmJob.company}</strong> for the position of <strong>{confirmJob.title}</strong>.
+            </p>
+            <div className="flex gap-3 mt-6">
+              <button
+                onClick={() => setConfirmJob(null)}
+                className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => {
+                  const id = confirmJob.id;
+                  setConfirmJob(null);
+                  handleApply(id);
+                }}
+                className="flex-1 px-4 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors"
+              >
+                Apply Now
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/tutorials/page.jsx b/src/app/tutorials/page.jsx
new file mode 100644
index 000000000..cbe7410c3
--- /dev/null
+++ b/src/app/tutorials/page.jsx
@@ -0,0 +1,11 @@
+import Tutorials from "@/app/components/tutorials";
+
+export const metadata = {
+  title: "Tutorials | AlgoBuddy",
+  description:
+    "Explore interactive Data Structures and Algorithms tutorials. Master Stack, Queue, Linked Lists, Trees, Graphs, Sorting, and Big O notation with AlgoBuddy.",
+};
+
+export default function TutorialsPage() {
+  return <Tutorials />;
+}
diff --git a/src/app/visualizer/VisualizerClient.jsx b/src/app/visualizer/VisualizerClient.jsx
new file mode 100644
index 000000000..924ec9d1b
--- /dev/null
+++ b/src/app/visualizer/VisualizerClient.jsx
@@ -0,0 +1,776 @@
+"use client";
+import { useState, useMemo, useEffect, useRef } from "react";
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { FiSearch, FiChevronRight, FiBookmark } from "react-icons/fi";
+import { X, Trophy } from "lucide-react";
+import { useBookmark } from "@/app/hooks/useBookmark";
+import { sections } from "@/lib/visualizerSections";
+
+const DS_THEME = {
+  Array: {
+    color: "#a435f0",
+    bg: "#faf5ff",
+    border: "#e9d5ff",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <rect x="3" y="3" width="4" height="18" rx="1" /><rect x="10" y="8" width="4" height="13" rx="1" /><rect x="17" y="5" width="4" height="16" rx="1" />
+      </svg>
+    ),
+  },
+  String: {
+    color: "#ec4899",
+    bg: "#fdf2f8",
+    border: "#fbcfe8",
+    icon: (c) => (
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={c}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="w-full h-full"
+      >
+        <path d="M7 8h10" />
+        <path d="M7 12h8" />
+        <path d="M7 16h6" />
+      </svg>
+    ),
+  },
+  Stack: {
+    color: "#2563eb",
+    bg: "#eff6ff",
+    border: "#bfdbfe",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <rect x="4" y="2" width="16" height="5" rx="1.5" /><rect x="4" y="9" width="16" height="5" rx="1.5" /><rect x="4" y="16" width="16" height="5" rx="1.5" />
+      </svg>
+    ),
+  },
+  Queue: {
+    color: "#059669",
+    bg: "#f0fdf4",
+    border: "#d1fae5",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <rect x="2" y="7" width="5" height="10" rx="1.5" /><rect x="9.5" y="7" width="5" height="10" rx="1.5" /><rect x="17" y="7" width="5" height="10" rx="1.5" /><path d="M22 12h-1" /><path d="M3 12H2" />
+      </svg>
+    ),
+  },
+  "Linked List": {
+    color: "#d97706",
+    bg: "#fffbeb",
+    border: "#fde68a",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <circle cx="5" cy="12" r="3" /><circle cx="19" cy="12" r="3" /><path d="M8 12h8" /><path d="M14 9l3 3-3 3" />
+      </svg>
+    ),
+  },
+  Tree: {
+    color: "#7c3aed",
+    bg: "#faf5ff",
+    border: "#e9d5ff",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <circle cx="12" cy="5" r="2.5" /><circle cx="6" cy="15" r="2.5" /><circle cx="18" cy="15" r="2.5" /><path d="M10.2 7.2L7.5 12.5" /><path d="M13.8 7.2l2.7 5.3" />
+      </svg>
+    ),
+  },
+  Graph: {
+    color: "#dc2626",
+    bg: "#fef2f2",
+    border: "#fecaca",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <circle cx="5" cy="6" r="2.5" /><circle cx="19" cy="6" r="2.5" /><circle cx="5" cy="18" r="2.5" /><circle cx="19" cy="18" r="2.5" /><path d="M7.5 6h9" /><path d="M5 8.5v7" /><path d="M19 8.5v7" /><path d="M7.5 18h9" /><path d="M7 8l10 8" />
+      </svg>
+    ),
+  },
+  HashMap: {
+    color: "#db2777",
+    bg: "#fdf2f8",
+    border: "#fbcfe8",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <path d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" />
+      </svg>
+    ),
+  },
+  Recursion: {
+    color: "#0f766e",
+    bg: "#f0fdfa",
+    border: "#ccfbf1",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67" />
+      </svg>
+    ),
+  },
+  "AI Algorithms": {
+    color: "#0891b2",
+    bg: "#ecfeff",
+    border: "#c5eaf0",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <path d="M12 2A4 4 0 0 0 8 6v1H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2V6a4 4 0 0 0-4-4z" />
+        <rect x="9" y="13" width="2" height="2" />
+        <rect x="13" y="13" width="2" height="2" />
+      </svg>
+    ),
+  },
+  "Dynamic Programming": {
+    color: "#0ea5e9",
+    bg: "#f0f9ff",
+    border: "#bae6fd",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <rect x="3" y="3" width="18" height="18" rx="2" />
+        <path d="M3 9h18" />
+        <path d="M9 21V9" />
+      </svg>
+    ),
+  },
+  "Quiz Mode": {
+    color: "#f59e0b",
+    bg: "#fffbeb",
+    border: "#fde68a",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <path d="M9 12l2 2 4-4" />
+        <path d="M12 3a9 9 0 100 18 9 9 0 000-18z" />
+      </svg>
+    ),
+  },
+  "Smart Revision": {
+    color: "#8b5cf6",
+    bg: "#f5f3ff",
+    border: "#ddd6fe",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <path d="M9 12h6M12 9v6M5 5h14v14H5z" />
+      </svg>
+    ),
+  },
+  "Collaborative Sessions": {
+    color: "#10b981",
+    bg: "#ecfdf5",
+    border: "#a7f3d0",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <path d="M17 20h5V4H2v16h5m10 0v-4a3 3 0 00-3-3H10a3 3 0 00-3 3v4m10 0H7m10-12a3 3 0 11-6 0 3 3 0 016 0zm-8 0a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+    ),
+  },
+};
+
+
+const getTheme = (t) =>
+  DS_THEME[t] || {
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <rect x="3" y="3" width="18" height="18" rx="3" /><path d="M12 8v8" /><path d="M8 12h8" />
+      </svg>
+    ),
+    color: "#6b7280",
+    bg: "#f9fafb",
+    border: "#e5e7eb",
+  };
+
+function ArrayMiniViz({ color }) {
+  const bars = [65, 30, 80, 45, 55, 20, 70];
+  const highlight = 2;
+  return (
+    <div className="flex items-end gap-1 h-[48px]">
+      {bars.map((h, i) => (
+        <div
+          key={i}
+          className={`flex-1 rounded-t-sm transition-all ${i === highlight ? '' : 'mini-viz-inactive'}`}
+          style={{
+            height: `${(h / 80) * 44}px`,
+            background: i === highlight ? color : color + "30",
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+function StackMiniViz({ color }) {
+  const items = ["8", "17", "42"];
+  return (
+    <div className="flex flex-col gap-1">
+      {items.map((v, i) => (
+        <div
+          key={i}
+          className={`h-[14px] rounded text-[10px] font-bold flex items-center justify-center ${i === 0 ? '' : 'mini-viz-inactive'}`}
+          style={{
+            background: i === 0 ? color : color + "25",
+            color: i === 0 ? "#fff" : color,
+          }}
+        >
+          {v}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function QueueMiniViz({ color }) {
+  const items = ["A", "B", "C", "D"];
+  return (
+    <div className="flex gap-1 items-center">
+      {items.map((v, i) => (
+        <div
+          key={i}
+          className={`w-8 h-8 rounded-md text-[10px] font-bold flex items-center justify-center ${i === 0 ? '' : 'mini-viz-inactive'}`}
+          style={{
+            background: i === 0 ? color : color + "20",
+            color: i === 0 ? "#fff" : color,
+          }}
+        >
+          {v}
+        </div>
+      ))}
+      <span className="text-[10px] font-bold ml-1 mini-viz-arrow" style={{ color }}>
+        →
+      </span>
+    </div>
+  );
+}
+
+function LinkedListMiniViz({ color }) {
+  const nodes = [7, 3, 9, 1];
+  return (
+    <div className="flex items-center gap-0.5">
+      {nodes.map((v, i) => (
+        <div key={i} className="flex items-center">
+          <div
+            className="w-7 h-7 rounded-full text-[10px] font-bold flex items-center justify-center mini-viz-inactive"
+            style={{ background: color + "20", color }}
+          >
+            {v}
+          </div>
+          {i < nodes.length - 1 && (
+            <svg width="12" height="8" className="flex-shrink-0">
+              <path d="M0 4 L10 4" stroke={color} strokeWidth="1.5" fill="none" markerEnd="url(#arrowhead)"/>
+              <defs>
+                <marker id="arrowhead" markerWidth="4" markerHeight="4" refX="4" refY="2" orient="auto">
+                  <path d="M0,0 L4,2 L0,4" fill={color} />
+                </marker>
+              </defs>
+            </svg>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function TreeMiniViz({ color }) {
+  return (
+    <svg viewBox="0 0 80 50" className="w-full h-[48px]">
+      <line x1="40" y1="10" x2="20" y2="30" stroke={color + "40"} strokeWidth="1.5" className="mini-viz-line" />
+      <line x1="40" y1="10" x2="60" y2="30" stroke={color + "40"} strokeWidth="1.5" className="mini-viz-line" />
+      <line x1="20" y1="30" x2="10" y2="45" stroke={color + "40"} strokeWidth="1.5" className="mini-viz-line" />
+      <line x1="20" y1="30" x2="30" y2="45" stroke={color + "40"} strokeWidth="1.5" className="mini-viz-line" />
+      <circle cx="40" cy="10" r="6" fill={color} />
+      <circle cx="20" cy="30" r="5" fill={color + "60"} className="mini-viz-inactive-node" />
+      <circle cx="60" cy="30" r="5" fill={color + "60"} className="mini-viz-inactive-node" />
+      <circle cx="10" cy="45" r="4" fill={color + "30"} className="mini-viz-inactive-node" />
+      <circle cx="30" cy="45" r="4" fill={color + "30"} className="mini-viz-inactive-node" />
+    </svg>
+  );
+}
+
+function GraphMiniViz({ color }) {
+  return (
+    <svg viewBox="0 0 80 50" className="w-full h-[48px]">
+      <line x1="15" y1="15" x2="40" y2="10" stroke={color + "40"} strokeWidth="1.5" className="mini-viz-line" />
+      <line x1="40" y1="10" x2="65" y2="18" stroke={color + "40"} strokeWidth="1.5" className="mini-viz-line" />
+      <line x1="15" y1="15" x2="25" y2="40" stroke={color + "40"} strokeWidth="1.5" className="mini-viz-line" />
+      <line x1="25" y1="40" x2="55" y2="38" stroke={color + "40"} strokeWidth="1.5" className="mini-viz-line" />
+      <line x1="65" y1="18" x2="55" y2="38" stroke={color + "40"} strokeWidth="1.5" className="mini-viz-line" />
+      <line x1="40" y1="10" x2="25" y2="40" stroke={color + "40"} strokeWidth="1.5" className="mini-viz-line" />
+      <circle cx="15" cy="15" r="5" fill={color} />
+      <circle cx="40" cy="10" r="5" fill={color + "80"} className="mini-viz-inactive-node" />
+      <circle cx="65" cy="18" r="5" fill={color + "60"} className="mini-viz-inactive-node" />
+      <circle cx="25" cy="40" r="5" fill={color + "80"} className="mini-viz-inactive-node" />
+      <circle cx="55" cy="38" r="5" fill={color} />
+    </svg>
+  );
+}
+
+function HashMapMiniViz({ color }) {
+  const buckets = [
+    { key: "k1", val: "v1" },
+    { key: null, val: null },
+    { key: "k2", val: "v2" },
+    { key: "k3", val: "v3" }
+  ];
+  return (
+    <div className="flex gap-2 items-center justify-center h-[48px]">
+      {buckets.map((b, i) => (
+        <div
+          key={i}
+          className="flex flex-col items-center justify-center border rounded p-1 w-14 h-10 transition-all duration-300"
+          style={{
+            background: b.key ? color + "15" : "transparent",
+            borderColor: b.key ? color + "50" : color + "20",
+          }}
+        >
+          <span className="text-[8px] font-mono" style={{ color: b.key ? color : color + "50" }}>
+            [{i}]
+          </span>
+          {b.key ? (
+            <span className="text-[9px] font-bold" style={{ color }}>
+              {b.key}:{b.val}
+            </span>
+          ) : (
+            <span className="text-[9px] font-bold text-gray-300 dark:text-gray-600">∅</span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function RecursionMiniViz({ color }) {
+  const frames = ["f(3)", "f(2)", "f(1)"];
+  return (
+    <div className="flex flex-col gap-1 items-center justify-center h-[48px] w-full">
+      {frames.map((v, i) => (
+        <div
+          key={i}
+          className={`h-[12px] rounded text-[8px] font-mono font-bold flex items-center justify-center border transition-all duration-300 ${i === 0 ? '' : 'mini-viz-inactive'}`}
+          style={{
+            width: `${60 - i * 12}px`,
+            background: i === 0 ? color : color + "15",
+            color: i === 0 ? "#fff" : color,
+            borderColor: i === 0 ? color : color + "40",
+          }}
+        >
+          {v}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function CustomCodeMiniViz({ color }) {
+  const lines = [
+    { width: "75%", highlight: true },
+    { width: "55%", highlight: false },
+    { width: "85%", highlight: false },
+    { width: "45%", highlight: false },
+  ];
+  return (
+    <div className="flex flex-col gap-1.5 justify-center h-[48px] px-1">
+      {lines.map((l, i) => (
+        <div
+          key={i}
+          className="rounded-sm h-[9px] transition-all duration-300"
+          style={{
+            width: l.width,
+            background: l.highlight ? color : color + "30",
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+function AIAlgorithmsMiniViz({ color }) {
+  return (
+    <svg viewBox="0 0 80 50" className="w-full h-[48px]">
+      <circle cx="40" cy="10" r="5" fill={color} />
+      <line x1="40" y1="10" x2="25" y2="25" stroke={color} strokeWidth="1.5" opacity="0.4" />
+      <line x1="40" y1="10" x2="55" y2="25" stroke={color} strokeWidth="1.5" opacity="0.4" />
+      <circle cx="25" cy="25" r="4" fill={color} opacity="0.7" />
+      <circle cx="55" cy="25" r="4" fill={color} opacity="0.7" />
+      <line x1="25" y1="25" x2="15" y2="40" stroke={color} strokeWidth="1.5" opacity="0.2" />
+      <line x1="25" y1="25" x2="35" y2="40" stroke={color} strokeWidth="1.5" opacity="0.2" />
+      <circle cx="15" cy="40" r="3" fill={color} opacity="0.4" />
+      <circle cx="35" cy="40" r="3" fill={color} opacity="0.4" />
+    </svg>
+  );
+}
+
+function DPMiniViz({ color }) {
+  return (
+    <div className="flex flex-col gap-1 items-center justify-center h-[48px] w-full">
+      <div className="flex gap-1">
+        <div className="w-4 h-4 rounded-sm" style={{ background: color + "40" }}></div>
+        <div className="w-4 h-4 rounded-sm" style={{ background: color + "80" }}></div>
+        <div className="w-4 h-4 rounded-sm" style={{ background: color }}></div>
+      </div>
+      <div className="flex gap-1">
+        <div className="w-4 h-4 rounded-sm" style={{ background: color + "80" }}></div>
+        <div className="w-4 h-4 rounded-sm" style={{ background: color }}></div>
+        <div className="w-4 h-4 rounded-sm" style={{ background: color + "40" }}></div>
+      </div>
+    </div>
+  );
+}
+
+function StringMiniViz({ color }) {
+  const chars = ["H", "E", "L", "L", "O"];
+
+  return (
+    <div className="flex items-center justify-center gap-2 h-[48px]">
+      {chars.map((ch, index) => (
+        <div
+          key={index}
+          className="w-8 h-8 rounded-md flex items-center justify-center font-bold text-sm border transition-all"
+          style={{
+            background: index === 2 ? color : color + "20",
+            borderColor: color,
+            color: index === 2 ? "#fff" : color,
+          }}
+        >
+          {ch}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const MINI_VIZ = {
+  Array: ArrayMiniViz,
+  String: StringMiniViz,
+  Stack: StackMiniViz,
+  Queue: QueueMiniViz,
+  "Linked List": LinkedListMiniViz,
+  Tree: TreeMiniViz,
+  Graph: GraphMiniViz,
+  HashMap: HashMapMiniViz,
+  Recursion: RecursionMiniViz,
+  "Code Lab": CustomCodeMiniViz,
+  "AI Algorithms": AIAlgorithmsMiniViz,
+  "Dynamic Programming": DPMiniViz,
+};
+
+function DSCard({ section, theme, delay }) {
+  const MiniViz = MINI_VIZ[section.title];
+  const count = section.subsections
+    ? section.subsections.reduce((a, s) => a + s.items.length, 0)
+    : 0;
+  const href = `/visualizer/${section.slug}`;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 24 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4, delay, ease: [0.22, 1, 0.36, 1] }}
+      whileHover={{ y: -6, scale: 1.02 }}
+      whileTap={{ scale: 0.97 }}
+      className="group w-full h-full"
+    >
+      <Link href={href} className="block w-full h-full text-left cursor-pointer">
+        <div
+          className="rounded-2xl border overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 h-full flex flex-col"
+          style={{ borderColor: theme.border }}
+          data-theme-card={section.title || "Custom Code"}
+        >
+          <div
+            className="flex items-center gap-2 px-4 py-3 border-b transition-colors duration-300"
+            style={{ background: theme.bg, borderColor: theme.border }}
+            data-theme-header={section.title || "Custom Code"}
+          >
+            <span className="w-3 h-3 rounded-full bg-[#ff5f57]" />
+            <span className="w-3 h-3 rounded-full bg-[#febc2e]" />
+            <span className="w-3 h-3 rounded-full bg-[#28c840]" />
+            <span className="ml-2 text-[12px] font-mono text-surface-500 dark:text-surface-300">
+              {section.title.toLowerCase().replace(/\s/g, "")}.js
+            </span>
+          </div>
+
+          <div
+            className="p-5 bg-white transition-colors duration-300 flex-1 flex flex-col"
+            data-theme-card={section.title || "Custom Code"}
+          >
+            <div className="flex items-center gap-3 mb-3">
+              <div
+                className="w-10 h-10 rounded-xl flex items-center justify-center p-2 flex-shrink-0 transition-colors duration-300"
+                style={{ background: theme.bg }}
+                data-theme-header={section.title || "Custom Code"}
+              >
+                {theme.icon(theme.color)}
+              </div>
+              <div>
+                <h3 className="text-[18px] font-extrabold text-surface-900 dark:text-white transition-colors">
+                  {section.title}
+                </h3>
+                <p className="text-[12px] text-surface-500 dark:text-surface-400 font-medium transition-colors">
+                  {count} algorithm{count !== 1 ? "s" : ""} to explore
+                </p>
+              </div>
+            </div>
+
+            <p className="text-[13px] text-surface-600 dark:text-surface-300 leading-relaxed mb-4 transition-colors">
+              {section.desc}
+            </p>
+
+            {MiniViz && (
+              <div
+                className="rounded-lg p-3 mb-4 border transition-colors duration-300"
+                style={{ background: theme.bg, borderColor: theme.border }}
+                data-theme-header={section.title || "Custom Code"}
+              >
+                <MiniViz color={theme.color} />
+              </div>
+            )}
+
+            <div
+              className="mt-auto inline-flex items-center gap-2 h-[36px] px-5 rounded-full text-[13px] font-bold text-white
+                group-hover:gap-3 transition-all duration-200"
+              style={{ background: theme.color }}
+            >
+              Explore {section.title}
+              <FiChevronRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform duration-200" />
+            </div>
+          </div>
+        </div>
+      </Link>
+    </motion.div>
+  );
+}
+
+export default function VisualizerClient({initialSections = sections,}) {
+  const [search, setSearch] = useState("");
+  const { addBookmark, removeBookmark, isBookmarked } = useBookmark();
+  const searchRef = useRef(null);
+  const [searchHistory, setSearchHistory] = useState(() => {
+    if (typeof window === "undefined") return [];
+    try {
+      return JSON.parse(localStorage.getItem("algobuddy_search_history") || "[]");
+    } catch { return []; }
+  });
+  const [showHistory, setShowHistory] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if ((e.ctrlKey && e.key === "k") || e.key === "/") {
+        e.preventDefault();
+        searchRef.current?.focus();
+        setShowHistory(true);
+      }
+      if (e.key === "Escape") {
+        searchRef.current?.blur();
+        setShowHistory(false);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  const handleSearchChange = (e) => {
+    const val = e.target.value;
+    setSearch(val);
+    if (val.trim().length > 2) {
+      setSearchHistory((prev) => {
+        const updated = [val, ...prev.filter((h) => h !== val)].slice(0, 5);
+        localStorage.setItem("algobuddy_search_history", JSON.stringify(updated));
+        return updated;
+      });
+    }
+  };
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) return initialSections;
+    const q = search.trim().toLowerCase();
+    return initialSections
+      .map((sec) => {
+        const titleHit = sec.title.toLowerCase().includes(q);
+        const subs = sec.subsections
+          ?.map((sub) => {
+            const subHit = sub.title.toLowerCase().includes(q);
+            const items = sub.items.filter((i) => i.name.toLowerCase().includes(q));
+            return { ...sub, items: subHit ? sub.items : items };
+          })
+          .filter((sub) => sub.items.length > 0);
+        return { ...sec, subsections: subs, _hit: titleHit || (subs && subs.length > 0) };
+      })
+      .filter((s) => s._hit);
+  }, [search, initialSections]);
+
+  const flatResults = useMemo(() => {
+    let results = [];
+    initialSections.forEach(section => {
+      section.subsections?.forEach(sub => {
+        sub.items.forEach(item => {
+          results.push({
+            ...item,
+            ds: section.title
+          });
+        });
+      });
+    });
+    if(search){
+      results = results.filter(item =>
+        item.name.toLowerCase()
+        .includes(search.toLowerCase())
+      );
+    }
+    return results;
+  }, [search, initialSections]);
+
+  return (
+    <div>
+      <style>{`
+        .dark [data-theme-card="Code Lab"] { background: #2d2f31 !important; border-color: #4b5563 !important; }
+        .dark [data-theme-card="Array"] { background: #1a0e2d !important; border-color: #5b21b6 !important; }
+        .dark [data-theme-card="String"] { background: #2d1023 !important; border-color: #be185d !important;}
+        .dark [data-theme-card="Stack"] { background: #111d33 !important; border-color: #1e3a8a !important; }
+        .dark [data-theme-card="Queue"] { background: #122b19 !important; border-color: #166534 !important; }
+        .dark [data-theme-card="Linked List"] { background: #2b1a08 !important; border-color: #92400e !important; }
+        .dark [data-theme-card="Tree"] { background: #1a0e2d !important; border-color: #5b21b6 !important; }
+        .dark [data-theme-card="Graph"] { background: #2c1215 !important; border-color: #991b1b !important; }
+        .dark [data-theme-card="HashMap"] { background: #2e1022 !important; border-color: #9d174d !important; }
+        .dark [data-theme-card="Recursion"] { background: #0c231e !important; border-color: #115e59 !important; }
+        .dark [data-theme-card="AI Algorithms"] { background: #062d35 !important; border-color: #0891b2 !important; }
+        .dark [data-theme-card="Dynamic Programming"] { background: #082f49 !important; border-color: #0284c7 !important; }
+        .dark [data-theme-card="Quiz Mode"] { background: #2b1a08 !important; border-color: #b45309 !important; }
+        .dark [data-theme-card="Smart Revision"] { background: #1a0e2d !important; border-color: #5b21b6 !important; }
+        .dark [data-theme-card="Collaborative Sessions"] { background: #022c22 !important; border-color: #047857 !important; }
+        .dark [data-theme-header="Code Lab"] { background: #3e4143 !important; border-color: #4b5563 !important; }
+        .dark [data-theme-header="Array"] { background: #23133d !important; border-color: #5b21b6 !important; }
+        .dark [data-theme-header="String"] { background: #3b132b !important; border-color: #be185d !important;}
+        .dark [data-theme-header="Stack"] { background: #182847 !important; border-color: #1e3a8a !important; }
+        .dark [data-theme-header="Queue"] { background: #173820 !important; border-color: #166534 !important; }
+        .dark [data-theme-header="Linked List"] { background: #3d240a !important; border-color: #92400e !important; }
+        .dark [data-theme-header="Tree"] { background: #23133d !important; border-color: #5b21b6 !important; }
+        .dark [data-theme-header="Graph"] { background: #3d171b !important; border-color: #991b1b !important; }
+        .dark [data-theme-header="HashMap"] { background: #3b132b !important; border-color: #9d174d !important; }
+        .dark [data-theme-header="Recursion"] { background: #0f3129 !important; border-color: #115e59 !important; }
+        .dark [data-theme-header="AI Algorithms"] { background: #0a3d47 !important; border-color: #0891b2 !important; }
+        .dark [data-theme-header="Dynamic Programming"] { background: #0c4a6e !important; border-color: #0284c7 !important; }
+        .dark [data-theme-header="Quiz Mode"] { background: #3d240a !important; border-color: #b45309 !important; }
+        .dark [data-theme-header="Smart Revision"] { background: #23133d !important; border-color: #5b21b6 !important; }
+        .dark [data-theme-header="Collaborative Sessions"] { background: #064e3b !important; border-color: #047857 !important; }
+        .dark [data-theme-card="Array"] .mini-viz-inactive { background: #5b21b6 !important; }
+        .dark [data-theme-card="Stack"] .mini-viz-inactive { background: #1e3a8a !important; color: #93c5fd !important; }
+        .dark [data-theme-card="Queue"] .mini-viz-inactive { background: #166534 !important; color: #86efac !important; }
+        .dark [data-theme-card="Queue"] .mini-viz-arrow { color: #86efac !important; }
+        .dark [data-theme-card="Linked List"] .mini-viz-inactive { background: #92400e !important; color: #fcd34d !important; }
+        .dark [data-theme-card="Tree"] .mini-viz-inactive-node { fill: #5b21b6 !important; }
+        .dark [data-theme-card="Graph"] .mini-viz-inactive-node { fill: #991b1b !important; }
+        .dark [data-theme-card="Recursion"] .mini-viz-inactive { background: #115e59 !important; color: #99f6e4 !important; border-color: #115e59 !important; }
+        .dark .mini-viz-line { stroke: #4b5563 !important; }
+      `}</style>
+
+      <section className="px-5 pt-12 pb-20 min-h-screen bg-gradient-to-b from-white via-surface-50 to-purple-50/40 dark:bg-none dark:bg-[#1c1d1f] transition-colors duration-300">
+        <div className="max-w-[1100px] mx-auto">
+          
+
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 max-w-[760px] mx-auto mt-8 mb-10">
+            <div className="relative w-full sm:flex-1">
+              <FiSearch className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-[#9ca3af]" />
+              <input
+                type="text"
+                ref={searchRef}
+                value={search}
+                onChange={handleSearchChange}
+                onFocus={() => setShowHistory(true)}
+                onBlur={() => setTimeout(() => setShowHistory(false), 200)}
+                placeholder="Search algorithms... (Press / or Ctrl+K)"
+                className="w-full h-[52px] pl-12 pr-4 rounded-2xl border border-[#e5e7eb] dark:border-[#333] bg-white dark:bg-[#1a1a1a] text-[#1a1a1a] dark:text-white placeholder-[#9ca3af] text-[15px] shadow-sm focus:outline-none focus:border-[#a435f0] focus:ring-2 focus:ring-[#a435f0]/20 transition-all"
+              />
+              {search && (
+                <button
+                  onClick={() => setSearch("")}
+                  aria-label="Clear search"
+                  className="absolute right-4 top-1/2 -translate-y-1/2 text-[#9ca3af] hover:text-[#1a1a1a] dark:hover:text-white transition-colors"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+            <Link href="/visualizer/quiz">
+              <button
+                className="h-[52px] px-6 rounded-2xl bg-[#a435f0] text-white font-semibold hover:bg-[#8e2de2] transition-all whitespace-nowrap flex items-center gap-2"
+              >
+                <Trophy className="w-5 h-5" />
+                <span>Quiz Mode</span>
+              </button>
+            </Link>
+          </div>
+
+          {search.trim() ? (
+            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.25 }}>
+              {flatResults.length > 0 ? (
+                <div className="max-w-3xl mx-auto">
+                  <p className="text-[13px] font-bold text-surface-500 dark:text-surface-400 uppercase tracking-wider mb-5">
+                    {flatResults.length} result{flatResults.length !== 1 ? "s" : ""}
+                  </p>
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    {flatResults.map((item, i) => {
+                      const t = getTheme(item.ds);
+                      return (
+                        <Link
+                          key={i}
+                          href={item.path}
+                          className="group/r flex items-center gap-3 p-4 rounded-xl bg-white dark:bg-[#2d2f31] border dark:border-[#4b5563] hover:shadow-md transition-all duration-200"
+                          style={{ borderColor: t.border }}
+                        >
+                          <div
+                            className="w-8 h-8 rounded-lg flex items-center justify-center p-1.5 flex-shrink-0"
+                            style={{ background: t.bg }}
+                            data-theme-header={item.ds}
+                          >
+                            {t.icon(t.color)}
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <span className="text-[14px] font-semibold text-surface-900 dark:text-white group-hover/r:text-primary transition-colors">{item.name}</span>
+                            <span className="block text-[11px] text-surface-500 dark:text-surface-400">{item.ds}</span>
+                          </div>
+                          <button
+                            onClick={(e) => {
+                              e.preventDefault();
+                              isBookmarked(item.path)
+                                ? removeBookmark(item.path)
+                                : addBookmark({ name: item.name, path: item.path, category: item.ds });
+                            }}
+                            className="p-1 rounded hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-colors"
+                            aria-label={isBookmarked(item.path) ? `Remove ${item.name} from bookmarks` : `Bookmark ${item.name}`}
+                          >
+                            <FiBookmark
+                              className={`w-4 h-4 ${isBookmarked(item.path) ? "text-purple-500 fill-purple-500" : "text-surface-300"}`}
+                            />
+                          </button>
+                          <FiChevronRight className="w-4 h-4 text-surface-300 dark:text-surface-500 group-hover/r:translate-x-1 transition-all" />
+                        </Link>
+                      );
+                    })}
+                  </div>
+                </div>
+              ) : (
+                <div className="text-center py-16">
+                  <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-surface-100 dark:bg-surface-800">
+                    <FiSearch className="h-6 w-6 text-surface-400" />
+                  </div>
+                  <h3 className="text-2xl font-bold text-surface-900 dark:text-white mb-2">No results found</h3>
+                  <p className="text-surface-500 dark:text-surface-400 text-[15px]">Try a different search term</p>
+                </div>
+              )}
+            </motion.div>
+          ) : (
+            <motion.div key="grid" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.3 }}>
+              <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 items-stretch">
+                {filtered.map((section, i) => (
+                  <DSCard
+                    key={section.title}
+                    section={section}
+                    theme={getTheme(section.title)}
+                    delay={i * 0.07}
+                  />
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/app/visualizer/[...slug]/page.jsx b/src/app/visualizer/[...slug]/page.jsx
new file mode 100644
index 000000000..7deeba180
--- /dev/null
+++ b/src/app/visualizer/[...slug]/page.jsx
@@ -0,0 +1,82 @@
+import { notFound } from "next/navigation";
+import { algorithmRegistry } from "@/config/algorithms";
+import { sections } from "@/lib/visualizerSections";
+import CategoryClient from "@/app/visualizer/components/CategoryClient";
+import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
+import Footer from "@/app/components/footer";
+
+
+export async function generateStaticParams() {
+  const params = [];
+  
+  // Category slugs
+  sections.forEach(s => params.push({ slug: [s.slug] }));
+  
+  // Algorithm slugs
+  Object.keys(algorithmRegistry).forEach(slugKey => {
+    params.push({ slug: slugKey.split('/') });
+  });
+  
+  return params;
+}
+
+export async function generateMetadata({ params }) {
+  const resolvedParams = await params;
+  const slugArray = resolvedParams.slug;
+  
+  if (slugArray.length === 1) {
+    const section = sections.find((s) => s.slug === slugArray[0]);
+    if (section) {
+      return {
+        title: `${section.title} Visualizer | AlgoBuddy`,
+        description: `Interactive visualizations for ${section.title}.`,
+      };
+    }
+  } else {
+    const slugKey = slugArray.join('/');
+    if (algorithmRegistry[slugKey]) {
+      return algorithmRegistry[slugKey].metadata;
+    }
+  }
+  return {};
+}
+
+export default async function DynamicRouterPage({ params }) {
+  const resolvedParams = await params;
+  const slugArray = resolvedParams.slug;
+  
+  // 1. Handle Category Index Page (/visualizer/[category])
+  if (slugArray.length === 1) {
+    const section = sections.find((s) => s.slug === slugArray[0]);
+    if (section) {
+      return (
+        <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-[#1a1a1a] dark:text-[#f5f5f5] flex flex-col">
+          <div className="w-full px-6 md:px-12 pt-6">
+            <div className="mb-4 mt-2">
+              <Breadcrumbs paths={[
+                { name: "Home", href: "/" },
+                { name: "Visualizer", href: "/visualizer" },
+                { name: section.title }
+              ]} />
+            </div>
+          </div>
+          <main className="flex-1 max-w-[1100px] w-full mx-auto px-5 pt-4 pb-20">
+            <CategoryClient section={section} />
+          </main>
+          <Footer />
+        </div>
+      );
+    }
+  }
+  
+  // 2. Handle Algorithm Page (/visualizer/dry-run, /visualizer/array/linearsearch, etc.)
+  const slugKey = slugArray.join('/');
+  if (!algorithmRegistry[slugKey]) notFound();
+  
+  const AlgorithmComponent = algorithmRegistry[slugKey].component;
+  return (
+    <>
+      <AlgorithmComponent />
+    </>
+  );
+}
diff --git a/src/app/visualizer/ai/alpha-beta-pruning/AlgorithmClient.jsx b/src/app/visualizer/ai/alpha-beta-pruning/AlgorithmClient.jsx
new file mode 100644
index 000000000..bd345fc90
--- /dev/null
+++ b/src/app/visualizer/ai/alpha-beta-pruning/AlgorithmClient.jsx
@@ -0,0 +1,35 @@
+import Animation from "@/app/visualizer/ai/alpha-beta-pruning/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/ai/alpha-beta-pruning/codeBlock";
+import Content from "@/app/visualizer/ai/alpha-beta-pruning/content";
+import TrackVisit from "@/app/components/ui/TrackVisit";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <>
+    <TrackVisit
+        name="Alpha Beta Pruning"
+        path="/visualizer/ai/alphabeta"
+        category="AI Algorithms"
+      />
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("AI Algorithms", "Alpha Beta Pruning")}
+      title="Alpha Beta Pruning"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[{ text: "Min Max Algorithm", url: "/visualizer/ai/minmax" }]}
+        />
+      }
+    />
+    </>
+  );
+}
diff --git a/src/app/visualizer/ai/alpha-beta-pruning/animation.jsx b/src/app/visualizer/ai/alpha-beta-pruning/animation.jsx
new file mode 100644
index 000000000..8799bc1ba
--- /dev/null
+++ b/src/app/visualizer/ai/alpha-beta-pruning/animation.jsx
@@ -0,0 +1,200 @@
+"use client";
+import React, { useState, useMemo } from "react";
+import ResetButton from "@/app/components/ui/resetButton";
+import GoButton from "@/app/components/ui/goButton";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import { alphaBetaGenerator } from "@/features/algorithms/ai/alphaBetaPruningLogic";
+
+const AlphaBetaPruning = () => {
+  const [arrayElements, setArrayElements] = useState("3, 5, 2, 9, 12, 5, 23, 23");
+  const [inputNodes, setInputNodes] = useState([]);
+  const [message, setMessage] = useState("Enter 8 comma-separated numbers for leaf nodes.");
+
+  const frames = useMemo(() => {
+    if (inputNodes.length === 0) return [];
+    return Array.from(alphaBetaGenerator(inputNodes));
+  }, [inputNodes]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  const handleReset = () => {
+    setMessage("Enter 8 comma-separated numbers for leaf nodes.");
+    setInputNodes([]);
+    engine.reset();
+  };
+
+  const handleStart = (e) => {
+    if (e) e.preventDefault();
+    if (engine.isPlaying) return;
+
+    const nums = arrayElements.split(",").map((num) => parseInt(num.trim()));
+    if (nums.length !== 8 || nums.some(isNaN)) {
+      setMessage("Please enter exactly 8 valid numbers.");
+      return;
+    }
+
+    const initNodes = Array(15)
+      .fill(null)
+      .map((_, i) => ({
+        id: i,
+        val: i >= 7 ? nums[i - 7] : "?",
+        alpha: -Infinity,
+        beta: Infinity,
+      }));
+
+    setInputNodes(initNodes);
+    setMessage("Running Alpha-Beta Pruning...");
+    engine.reset();
+    engine.play();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      setTimeout(() => engine.play(), 50);
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame = frames[engine.currentStep] || {
+    treeNodes: inputNodes.length > 0 ? inputNodes : [],
+    currentNodeClass: {},
+    prunedNodes: {},
+    stepExplanation: "",
+  };
+
+  const displayMessage = currentFrame.message || message;
+
+  const renderTree = () => {
+    if (currentFrame.treeNodes.length === 0) return null;
+
+    const levels = [
+      [0],
+      [1, 2],
+      [3, 4, 5, 6],
+      [7, 8, 9, 10, 11, 12, 13, 14],
+    ];
+
+    return (
+      <div className="flex flex-col items-center space-y-12 w-full max-w-4xl mx-auto p-8 bg-white dark:bg-slate-900 rounded-3xl shadow-inner border border-gray-100 dark:border-slate-800/50 overflow-x-auto">
+        {levels.map((level, lIdx) => (
+          <div key={lIdx} className="flex justify-around w-full min-w-[600px]">
+            {level.map((nodeIdx) => {
+              const isPruned = currentFrame.prunedNodes[nodeIdx];
+              const nodeData = currentFrame.treeNodes[nodeIdx];
+              return (
+                <div
+                  key={nodeIdx}
+                  className={`relative flex flex-col items-center transition-all duration-500 ${isPruned ? "opacity-30 grayscale blur-[1px]" : "opacity-100"}`}
+                >
+                  <div
+                    className={`w-14 h-14 md:w-20 md:h-20 flex flex-col items-center justify-center rounded-2xl border-2 transition-all duration-500 z-10 
+                      ${currentFrame.currentNodeClass[nodeIdx] || "bg-white dark:bg-slate-800 text-gray-800 dark:text-gray-200 border-gray-200 dark:border-gray-700 shadow-sm"}`}
+                  >
+                    <span className="text-base md:text-xl font-black">
+                        {nodeData.val === Infinity ? "∞" : nodeData.val === -Infinity ? "-∞" : nodeData.val}
+                    </span>
+                    {lIdx < 3 && (
+                        <div className="text-[9px] md:text-[11px] font-mono opacity-80 mt-0.5">
+                           α:{nodeData.alpha === -Infinity ? "-∞" : nodeData.alpha} β:{nodeData.beta === Infinity ? "∞" : nodeData.beta}
+                        </div>
+                    )}
+                  </div>
+                  {lIdx < 3 && (
+                    <div className="absolute top-full h-12 flex justify-center w-0">
+                         {/* Visual branching indicators */}
+                    </div>
+                  )}
+                  <div className="mt-2 text-[10px] font-bold tracking-wider text-gray-400 dark:text-gray-500 uppercase">
+                    {lIdx === 0 ? "MAX" : lIdx === 1 ? "MIN" : lIdx === 2 ? "MAX" : "LEAF"}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex flex-col items-center w-full min-h-[600px] bg-white dark:bg-slate-900 md:p-8 p-4 rounded-3xl border border-gray-200 dark:border-slate-800 shadow-sm mb-12">
+      <div className="w-full flex flex-col md:flex-row justify-between items-center mb-10 gap-6">
+        <form onSubmit={handleStart} className="flex flex-col gap-2 w-full md:w-auto">
+            <label className="text-sm font-semibold text-gray-700 dark:text-gray-300 ml-1"> Leaf Nodes (8 required): </label>
+            <input
+            type="text"
+            className="px-5 py-3 border rounded-xl bg-gray-50 dark:bg-slate-800 border-gray-200 dark:border-slate-700 text-gray-800 dark:text-white focus:ring-2 focus:ring-blue-500 outline-none transition-all shadow-sm md:w-[350px]"
+            value={arrayElements}
+            onChange={(e) => setArrayElements(e.target.value)}
+            disabled={engine.isPlaying}
+            placeholder="e.g. 3, 5, 2, 9, 12, 5, 23, 23"
+            />
+        </form>
+        
+        <div className="flex items-center gap-4">
+          <ResetButton onReset={handleReset} />
+          <GoButton onClick={handleStart} disabled={engine.isPlaying} />
+        </div>
+      </div>
+
+      <div className="w-full mb-6 max-w-4xl">
+        <PlaybackControls
+          isPlaying={engine.isPlaying}
+          onPlayPause={togglePlay}
+          speed={engine.speed / 1000}
+          onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+          onStepForward={engine.stepForward}
+          onStepBackward={engine.stepBackward}
+          onReset={engine.reset}
+          progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+          disabled={frames.length === 0}
+        />
+      </div>
+
+      <div className="w-full mb-10 min-h-[64px] text-center bg-gray-50 dark:bg-slate-800/50 p-4 rounded-2xl border border-gray-100 dark:border-slate-700/50">
+        <p className="text-xl font-bold text-gray-800 dark:text-gray-100">{displayMessage}</p>
+        <p className="text-sm font-medium text-blue-600 dark:text-blue-400 mt-2 italic">{currentFrame.stepExplanation}</p>
+      </div>
+
+      <div className="relative w-full overflow-x-auto pb-10">
+        {renderTree()}
+      </div>
+
+      <div className="mt-12 pt-8 w-full border-t border-gray-200 dark:border-slate-800/80 flex flex-wrap justify-center gap-x-8 gap-y-4">
+        <div className="flex items-center gap-2.5">
+            <span className="w-5 h-5 rounded-full bg-yellow-300 border-2 border-yellow-500 shadow-sm"></span>
+            <span className="text-sm font-medium text-gray-600 dark:text-gray-400">Current Node</span>
+        </div>
+        <div className="flex items-center gap-2.5">
+            <span className="w-5 h-5 rounded-full bg-blue-500 border-2 border-blue-700 shadow-sm"></span>
+            <span className="text-sm font-medium text-gray-600 dark:text-gray-400">Completed Node</span>
+        </div>
+        <div className="flex items-center gap-2.5">
+            <span className="w-5 h-5 rounded-full bg-green-500 border-2 border-green-700 shadow-sm"></span>
+            <span className="text-sm font-medium text-gray-600 dark:text-gray-400">Evaluating Leaf</span>
+        </div>
+        <div className="flex items-center gap-2.5">
+            <span className="w-5 h-5 rounded-full bg-gray-300 opacity-20 border-2 border-gray-400 shadow-sm"></span>
+            <span className="text-sm font-medium text-gray-600 dark:text-gray-400">Pruned</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AlphaBetaPruning;
diff --git a/src/app/visualizer/ai/alpha-beta-pruning/codeBlock.jsx b/src/app/visualizer/ai/alpha-beta-pruning/codeBlock.jsx
new file mode 100644
index 000000000..480c97668
--- /dev/null
+++ b/src/app/visualizer/ai/alpha-beta-pruning/codeBlock.jsx
@@ -0,0 +1,112 @@
+import React from "react";
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const AlphaBetaPruningCode = () => {
+  const codeSnippets = {
+    javascript: `function alphaBeta(node, depth, alpha, beta, isMaximizingPlayer) {
+  if (depth === 0 || node.isTerminal()) {
+    return node.value;
+  }
+
+  if (isMaximizingPlayer) {
+    let bestVal = -Infinity;
+    for (let child of node.children) {
+      bestVal = Math.max(bestVal, alphaBeta(child, depth - 1, alpha, beta, false));
+      alpha = Math.max(alpha, bestVal);
+      if (beta <= alpha) {
+        break; // Beta cut-off
+      }
+    }
+    return bestVal;
+  } else {
+    let bestVal = +Infinity;
+    for (let child of node.children) {
+      bestVal = Math.min(bestVal, alphaBeta(child, depth - 1, alpha, beta, true));
+      beta = Math.min(beta, bestVal);
+      if (beta <= alpha) {
+        break; // Alpha cut-off
+      }
+    }
+    return bestVal;
+  }
+}`,
+    cpp: `int alphaBeta(Node* node, int depth, int alpha, int beta, bool isMaximizingPlayer) {
+    if (depth == 0 || node->isTerminal()) {
+        return node->value;
+    }
+
+    if (isMaximizingPlayer) {
+        int bestVal = INT_MIN;
+        for (Node* child : node->children) {
+            bestVal = max(bestVal, alphaBeta(child, depth - 1, alpha, beta, false));
+            alpha = max(alpha, bestVal);
+            if (beta <= alpha) {
+                break; // Beta cut-off
+            }
+        }
+        return bestVal;
+    } else {
+        int bestVal = INT_MAX;
+        for (Node* child : node->children) {
+            bestVal = min(bestVal, alphaBeta(child, depth - 1, alpha, beta, true));
+            beta = min(beta, bestVal);
+            if (beta <= alpha) {
+                break; // Alpha cut-off
+            }
+        }
+        return bestVal;
+    }
+}`,
+    python: `def alpha_beta(node, depth, alpha, beta, is_maximizing):
+    if depth == 0 or node.is_terminal():
+        return node.value
+
+    if is_maximizing:
+        best_val = float('-inf')
+        for child in node.children:
+            best_val = max(best_val, alpha_beta(child, depth - 1, alpha, beta, False))
+            alpha = max(alpha, best_val)
+            if beta <= alpha:
+                break # Beta cut-off
+        return best_val
+    else:
+        best_val = float('inf')
+        for child in node.children:
+            best_val = min(best_val, alpha_beta(child, depth - 1, alpha, beta, True))
+            beta = min(beta, best_val)
+            if beta <= alpha:
+                break # Alpha cut-off
+        return best_val`,
+    java: `public int alphaBeta(Node node, int depth, int alpha, int beta, boolean isMaximizingPlayer) {
+    if (depth == 0 || node.isTerminal()) {
+        return node.value;
+    }
+
+    if (isMaximizingPlayer) {
+        int bestVal = Integer.MIN_VALUE;
+        for (Node child : node.children) {
+            bestVal = Math.max(bestVal, alphaBeta(child, depth - 1, alpha, beta, false));
+            alpha = Math.max(alpha, bestVal);
+            if (beta <= alpha) {
+                break; // Beta cut-off
+            }
+        }
+        return bestVal;
+    } else {
+        int bestVal = Integer.MAX_VALUE;
+        for (Node child : node.children) {
+            bestVal = Math.min(bestVal, alphaBeta(child, depth - 1, alpha, beta, true));
+            beta = Math.min(beta, bestVal);
+            if (beta <= alpha) {
+                break; // Alpha cut-off
+            }
+        }
+        return bestVal;
+    }
+}`,
+  };
+
+  return <CodeBlock codeExamples={codeSnippets} />;
+};
+
+export default AlphaBetaPruningCode;
diff --git a/src/app/visualizer/ai/alpha-beta-pruning/content.jsx b/src/app/visualizer/ai/alpha-beta-pruning/content.jsx
new file mode 100644
index 000000000..0e6be24b3
--- /dev/null
+++ b/src/app/visualizer/ai/alpha-beta-pruning/content.jsx
@@ -0,0 +1,57 @@
+import React from "react";
+
+const AlphaBetaPruningContent = () => {
+  return (
+    <div className="space-y-8">
+      <section>
+        <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4">
+          Alpha-Beta Pruning
+        </h2>
+        <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
+          Alpha-beta pruning is an optimization technique for the minimax algorithm that reduces the number of nodes evaluated by the minimax algorithm in its search tree. It is an adversarial search algorithm used commonly for machine playing of two-player games (Tic-tac-toe, Chess, Connect 4, etc.).
+        </p>
+      </section>
+
+      <section className="bg-blue-50 dark:bg-slate-800/50 p-6 rounded-xl border border-blue-100 dark:border-blue-900/30">
+        <h3 className="text-xl font-semibold text-blue-800 dark:text-blue-300 mb-3">
+          How it Works
+        </h3>
+        <p className="text-gray-600 dark:text-gray-300 mb-4">
+          The algorithm maintains two values, <strong>Alpha</strong> and <strong>Beta</strong>, which represent the minimum score that the maximizing player is assured of and the maximum score that the minimizing player is assured of, respectively.
+        </p>
+        <ul className="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-300">
+          <li><strong>Alpha:</strong> The best value (highest) that the <em>maximizing</em> player can guarantee at that level or above. Initial value: -&infin;.</li>
+          <li><strong>Beta:</strong> The best value (lowest) that the <em>minimizing</em> player can guarantee at that level or above. Initial value: +&infin;.</li>
+          <li>If at any time <strong>Alpha &ge; Beta</strong>, the current branch can be pruned, as the opponent will never allow the game to reach this state.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h3 className="text-xl font-semibold text-gray-800 dark:text-white mb-3">
+          Why use Alpha-Beta Pruning?
+        </h3>
+        <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
+          Minimax explores all possible states in the game tree. For games like Chess, the number of states is astronomical. Alpha-beta pruning allows us to search much deeper in the same amount of time by cutting off branches that won&apos;t affect the final decision.
+        </p>
+      </section>
+
+      <section className="grid md:grid-cols-2 gap-6">
+        <div className="border border-gray-200 dark:border-gray-700 p-5 rounded-xl">
+          <h4 className="font-bold text-gray-800 dark:text-white mb-2">Time Complexity</h4>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            <strong>Worst Case:</strong> O(b<sup>d</sup>) (Same as minimax if search order is poor)<br />
+            <strong>Best Case:</strong> O(b<sup>d/2</sup>) (With perfect move ordering, it effectively doubles search depth)
+          </p>
+        </div>
+        <div className="border border-gray-200 dark:border-gray-700 p-5 rounded-xl">
+          <h4 className="font-bold text-gray-800 dark:text-white mb-2">Space Complexity</h4>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            <strong>Space:</strong> O(d) where d is the maximum depth of the tree (due to recursion stack).
+          </p>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default AlphaBetaPruningContent;
diff --git a/src/app/visualizer/ai/astar/AuthGuard.jsx b/src/app/visualizer/ai/astar/AuthGuard.jsx
new file mode 100644
index 000000000..2fca2d90a
--- /dev/null
+++ b/src/app/visualizer/ai/astar/AuthGuard.jsx
@@ -0,0 +1,16 @@
+"use client";
+import { useUser } from "@/features/user/UserContext";
+
+export default function AuthGuard({ children }) {
+  const { user, loading } = useUser() || {};
+
+  if (loading) {
+    return <p>Loading…</p>;
+  }
+
+  if (!user) {
+    return <p>Please sign in to view this visualizer.</p>;
+  }
+
+  return <>{children}</>;
+}
diff --git a/src/app/visualizer/ai/astar/ClientVisualizer.jsx b/src/app/visualizer/ai/astar/ClientVisualizer.jsx
new file mode 100644
index 000000000..c80cd1fe0
--- /dev/null
+++ b/src/app/visualizer/ai/astar/ClientVisualizer.jsx
@@ -0,0 +1,27 @@
+"use client";
+import AuthGuard from "./AuthGuard";
+import Animation from "./animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "./codeBlock";
+import Content from "./content";
+import VisualizerPageLayout, { createVisualizerPaths } from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function ClientVisualizer() {
+  return (
+    <AuthGuard>
+      <VisualizerPageLayout
+        paths={createVisualizerPaths("AI Algorithms", "A* Search")}
+        title="A* Search"
+        animation={<Animation />}
+        content={<Content />}
+        code={<Code />}
+        exploreOther={
+          <ExploreOther
+            title="Explore other topics"
+            links={[{ text: "Monte Carlo Tree Search (MCTS)", url: "/visualizer/ai/mcts" }]}
+          />
+        }
+      />
+    </AuthGuard>
+  );
+}
diff --git a/src/app/visualizer/ai/astar/animation.jsx b/src/app/visualizer/ai/astar/animation.jsx
new file mode 100644
index 000000000..918db4dde
--- /dev/null
+++ b/src/app/visualizer/ai/astar/animation.jsx
@@ -0,0 +1,354 @@
+"use client";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Play, Pause, PenLine, Target, ShieldAlert, Trash2 } from "lucide-react";
+import ResetButton from "@/app/components/ui/resetButton";
+import GoButton from "@/app/components/ui/goButton";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import { loadFromStorage, saveToStorage } from "@/utils/storage";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import { astarGenerator } from "@/features/algorithms/ai/astarLogic";
+
+const pointKey = (row, col) => `${row},${col}`;
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const clampPoint = (point, size) => ({ row: clamp(point.row, 0, size - 1), col: clamp(point.col, 0, size - 1) });
+
+const AStarAnimation = () => {
+  const initialSize = loadFromStorage("astar-grid-size", 10);
+  const [gridSize, setGridSize] = useState(initialSize);
+  const [heuristic, setHeuristic] = useState(() => loadFromStorage("astar-heuristic", "manhattan"));
+  const [editMode, setEditMode] = useState("wall");
+  const [start, setStart] = useState({ row: 0, col: 0 });
+  const [goal, setGoal] = useState({ row: initialSize - 1, col: initialSize - 1 });
+  const [walls, setWalls] = useState(() => new Set());
+  
+  const [frames, setFrames] = useState([]);
+
+  useEffect(() => saveToStorage("astar-grid-size", gridSize), [gridSize]);
+  useEffect(() => saveToStorage("astar-heuristic", heuristic), [heuristic]);
+
+  useEffect(() => {
+    setStart((current) => clampPoint(current, gridSize));
+    setGoal((current) => {
+      const clamped = clampPoint(current, gridSize);
+      if (clamped.row === 0 && clamped.col === 0 && gridSize > 1) {
+        return { row: gridSize - 1, col: gridSize - 1 };
+      }
+      return clamped;
+    });
+    setWalls((current) => {
+      const next = new Set();
+      current.forEach((cell) => {
+        const [row, col] = cell.split(",").map(Number);
+        if (row < gridSize && col < gridSize) next.add(cell);
+      });
+      return next;
+    });
+  }, [gridSize]);
+
+  const resetBoard = useCallback(() => {
+    setFrames([]);
+    setStart({ row: 0, col: 0 });
+    setGoal({ row: gridSize - 1, col: gridSize - 1 });
+    setWalls(new Set());
+  }, [gridSize]);
+
+  useVisualizerReset(resetBoard);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  const handleGo = useCallback((event) => {
+    event.preventDefault();
+    if (engine.isPlaying) return;
+
+    const newFrames = Array.from(astarGenerator(start, goal, walls, gridSize, heuristic));
+    setFrames(newFrames);
+    engine.reset();
+    engine.play();
+  }, [engine, start, goal, walls, gridSize, heuristic]);
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      setTimeout(() => engine.play(), 50);
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: () => {
+        setFrames([]);
+        engine.reset();
+    },
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const handleCellClick = useCallback((row, col) => {
+    if (engine.isPlaying) return;
+
+    const clickedKey = pointKey(row, col);
+    const startKey = pointKey(start.row, start.col);
+    const goalKey = pointKey(goal.row, goal.col);
+
+    if (editMode === "wall") {
+      if (clickedKey === startKey || clickedKey === goalKey) return;
+      setWalls((current) => {
+        const next = new Set(current);
+        if (next.has(clickedKey)) next.delete(clickedKey);
+        else next.add(clickedKey);
+        return next;
+      });
+      return;
+    }
+
+    if (editMode === "start") {
+      if (clickedKey === goalKey) return;
+      setStart({ row, col });
+      setWalls((current) => {
+        const next = new Set(current);
+        next.delete(clickedKey);
+        return next;
+      });
+      return;
+    }
+
+    if (clickedKey === startKey) return;
+    setGoal({ row, col });
+    setWalls((current) => {
+      const next = new Set(current);
+      next.delete(clickedKey);
+      return next;
+    });
+  }, [editMode, goal.col, goal.row, engine.isPlaying, start.col, start.row]);
+
+  // Derived state for rendering
+  const renderedFrame = frames.length > 0 ? frames[engine.currentStep] : {
+    open: [pointKey(start.row, start.col)],
+    closed: [],
+    path: [],
+    currentKey: pointKey(start.row, start.col),
+    g: 0,
+    h: 0, // In original it calculates initial H here, but 0 is fine for idle state
+    f: 0,
+    goalReached: false,
+    message: "Build a maze, choose a heuristic, and press Go.",
+    detail: "Choose wall, start, or goal editing mode before running the search."
+  };
+
+  const openSet = new Set(renderedFrame.open);
+  const closedSet = new Set(renderedFrame.closed);
+  const pathSet = new Set(renderedFrame.path);
+  const isRunning = engine.isPlaying;
+  const isSuccess = renderedFrame.goalReached;
+  const isError = renderedFrame.message && renderedFrame.message.startsWith("No path");
+
+  const statusClass =
+    isSuccess
+      ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
+      : isError
+      ? "bg-rose-100 dark:bg-rose-900 text-rose-800 dark:text-rose-200"
+      : isRunning
+      ? "bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200"
+      : "bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300";
+
+  const modeButtons = [
+    { id: "wall", label: "Draw Walls", icon: PenLine, className: "bg-primary text-white border-primary" },
+    { id: "start", label: "Move Start", icon: Target, className: "bg-emerald-600 text-white border-emerald-600" },
+    { id: "goal", label: "Move Goal", icon: ShieldAlert, className: "bg-rose-600 text-white border-rose-600" },
+  ];
+
+  return (
+    <main className="container mx-auto">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto font-sans mt-6">
+        Explore how A* Search blends real path cost with a heuristic estimate to reach the goal efficiently.
+      </p>
+
+      <form onSubmit={handleGo} className="max-w-5xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8 shadow-sm">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-6">
+          <div>
+            <label className="block text-gray-700 dark:text-gray-300 mb-3 text-sm font-semibold uppercase tracking-wider" htmlFor="gridSize">
+              Grid Size: <span className="text-primary font-mono">{gridSize}x{gridSize}</span>
+            </label>
+            <input
+              type="range"
+              id="gridSize"
+              min="5"
+              max="15"
+              value={gridSize}
+              onChange={(event) => setGridSize(parseInt(event.target.value, 10))}
+              disabled={engine.isPlaying}
+              className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary"
+            />
+            <div className="flex justify-between text-[10px] text-gray-400 mt-2">
+              <span>SMALL</span>
+              <span>LARGE</span>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-gray-700 dark:text-gray-300 mb-3 text-sm font-semibold uppercase tracking-wider" htmlFor="heuristic">
+              Heuristic: <span className="text-primary font-mono capitalize">{heuristic}</span>
+            </label>
+            <select
+              id="heuristic"
+              value={heuristic}
+              onChange={(event) => setHeuristic(event.target.value)}
+              disabled={engine.isPlaying}
+              className="w-full px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100"
+            >
+              <option value="manhattan">Manhattan</option>
+              <option value="euclidean">Euclidean</option>
+              <option value="chebyshev">Chebyshev</option>
+            </select>
+            <div className="text-[10px] text-gray-400 mt-2 text-right">Choose how aggressively A* estimates the remaining distance</div>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-6 items-start border-t border-gray-100 dark:border-gray-800 pt-6">
+          <div className="flex flex-wrap gap-2">
+            {modeButtons.map((button) => {
+              const Icon = button.icon;
+              const active = editMode === button.id;
+              return (
+                <button
+                  key={button.id}
+                  type="button"
+                  onClick={() => setEditMode(button.id)}
+                  disabled={engine.isPlaying}
+                  className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg border text-sm font-semibold transition-colors ${active ? button.className : "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-700"}`}
+                >
+                  <Icon size={16} />
+                  {button.label}
+                </button>
+              );
+            })}
+            <button
+              type="button"
+              onClick={() => setWalls(new Set())}
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg border text-sm font-semibold bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-700 transition-colors"
+              disabled={engine.isPlaying}
+            >
+              <Trash2 size={16} />
+              Clear Walls
+            </button>
+          </div>
+
+          <div className="flex flex-wrap gap-2 justify-start xl:justify-end">
+            <GoButton onClick={handleGo} isAnimating={engine.isPlaying} disabled={engine.isPlaying} />
+            <ResetButton onReset={() => { setFrames([]); resetBoard(); }} isAnimating={engine.isPlaying} />
+          </div>
+        </div>
+        
+        <div className="mt-6 border-t border-gray-100 dark:border-gray-800 pt-6">
+          <PlaybackControls
+            isPlaying={engine.isPlaying}
+            onPlayPause={togglePlay}
+            speed={engine.speed / 1000}
+            onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+            onStepForward={engine.stepForward}
+            onStepBackward={engine.stepBackward}
+            onReset={() => { setFrames([]); engine.reset(); }}
+            progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+            disabled={frames.length === 0}
+          />
+        </div>
+      </form>
+
+      {renderedFrame.message && (
+        <div className={`max-w-4xl mx-auto mb-8 p-4 rounded-lg ${statusClass} shadow-sm border border-current/10`}>
+          <p className="text-center font-medium">{renderedFrame.message}</p>
+        </div>
+      )}
+
+      <div className="max-w-5xl mx-auto space-y-6">
+        <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden shadow-sm">
+          <div className="flex flex-wrap items-center gap-2 bg-[#a435f0]/10 dark:bg-[#a435f0]/20 px-4 py-3 border-b border-[#a435f0]/20">
+            <span className="w-2 h-2 rounded-full bg-[#a435f0] animate-pulse"></span>
+            <span className="text-sm font-semibold text-[#a435f0] dark:text-[#c56eff] uppercase tracking-wide">Step Explanation</span>
+            <span className="ml-auto text-xs text-gray-500 dark:text-gray-400">{engine.isPlaying ? "Search in progress" : "Ready"}</span>
+          </div>
+          <div className="px-4 py-4">
+            <p className="text-gray-700 dark:text-gray-200 text-sm leading-relaxed font-mono">{renderedFrame.detail}</p>
+          </div>
+          <div className="px-4 py-3 bg-gray-50 dark:bg-neutral-950 border-t border-gray-100 dark:border-gray-800 flex flex-wrap gap-4 text-[10px] text-gray-500 uppercase font-bold tracking-tight">
+            <span><span className="text-blue-500">● Blue</span> = current node</span>
+            <span><span className="text-sky-500">● Sky</span> = open set</span>
+            <span><span className="text-slate-500">● Slate</span> = closed set</span>
+            <span><span className="text-amber-500">● Amber</span> = shortest path</span>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div className="p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
+            <div className="text-[11px] uppercase tracking-[0.25em] text-gray-400 mb-1">Visited</div>
+            <div className="text-2xl font-black text-gray-900 dark:text-white">{renderedFrame.closed.length}</div>
+          </div>
+          <div className="p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
+            <div className="text-[11px] uppercase tracking-[0.25em] text-gray-400 mb-1">Frontier</div>
+            <div className="text-2xl font-black text-gray-900 dark:text-white">{renderedFrame.open.length}</div>
+          </div>
+          <div className="p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
+            <div className="text-[11px] uppercase tracking-[0.25em] text-gray-400 mb-1">Current f</div>
+            <div className="text-2xl font-black text-gray-900 dark:text-white">{renderedFrame.f.toFixed(2)}</div>
+          </div>
+          <div className="p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
+            <div className="text-[11px] uppercase tracking-[0.25em] text-gray-400 mb-1">Path Cost</div>
+            <div className="text-2xl font-black text-gray-900 dark:text-white">{renderedFrame.g}</div>
+          </div>
+        </div>
+
+        <div className="bg-white dark:bg-neutral-900 p-5 sm:p-8 rounded-xl border border-gray-200 dark:border-gray-800 shadow-md overflow-x-auto">
+          <h2 className="text-lg font-bold text-gray-900 dark:text-white mb-6 text-center uppercase tracking-[0.2em]">Grid Visualization</h2>
+          <div className="mx-auto w-full max-w-4xl">
+            <div className="grid gap-1 sm:gap-1.5" style={{ gridTemplateColumns: `repeat(${gridSize}, minmax(0, 1fr))` }}>
+              {Array.from({ length: gridSize }).map((_, row) => {
+                return Array.from({ length: gridSize }).map((__, col) => {
+                  const cellKey = pointKey(row, col);
+                  const isStart = start.row === row && start.col === col;
+                  const isGoal = goal.row === row && goal.col === col;
+                  const isWall = walls.has(cellKey);
+                  const isPath = pathSet.has(cellKey);
+                  const isOpen = openSet.has(cellKey);
+                  const isClosed = closedSet.has(cellKey);
+                  const isCurrent = renderedFrame.currentKey === cellKey;
+
+                  let className = "bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800 text-gray-700 dark:text-gray-300";
+                  if (isWall) className = "bg-slate-800 border-slate-900 text-slate-100";
+                  else if (isPath) className = "bg-amber-300 border-amber-500 text-amber-900";
+                  else if (isCurrent) className = "bg-blue-600 border-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.03]";
+                  else if (isStart) className = "bg-emerald-500 border-emerald-700 text-white";
+                  else if (isGoal) className = "bg-rose-500 border-rose-700 text-white";
+                  else if (isOpen) className = "bg-sky-200 border-sky-400 text-sky-900";
+                  else if (isClosed) className = "bg-slate-200 border-slate-400 text-slate-700 dark:bg-slate-700 dark:border-slate-500 dark:text-slate-100";
+
+                  return (
+                    <button
+                      key={cellKey}
+                      type="button"
+                      onClick={() => handleCellClick(row, col)}
+                      disabled={engine.isPlaying}
+                      className={`aspect-square rounded-lg border-2 transition-all duration-300 flex items-center justify-center font-bold text-[10px] sm:text-xs select-none ${className}`}
+                      title={`Row ${row + 1}, Column ${col + 1}`}
+                    >
+                      {isStart ? "S" : isGoal ? "G" : isWall ? "" : isCurrent ? "●" : isPath ? "•" : ""}
+                    </button>
+                  );
+                });
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default AStarAnimation;
diff --git a/src/app/visualizer/ai/astar/codeBlock.jsx b/src/app/visualizer/ai/astar/codeBlock.jsx
new file mode 100644
index 000000000..cabad9299
--- /dev/null
+++ b/src/app/visualizer/ai/astar/codeBlock.jsx
@@ -0,0 +1,290 @@
+'use client';
+import CodeBlock from '@/app/components/ui/CodeBlock';
+
+const codeExamples = {
+  javascript: `// A* Search on a 2D grid in JavaScript
+function aStar(start, goal, grid) {
+  const openSet = [start];
+  const cameFrom = new Map();
+  const gScore = new Map([[key(start), 0]]);
+  const fScore = new Map([[key(start), h(start, goal)]]);
+
+  while (openSet.length) {
+    // Sort openSet by fScore (lowest first)
+    openSet.sort((a, b) => (fScore.get(key(a)) ?? Infinity) - (fScore.get(key(b)) ?? Infinity));
+    const current = openSet.shift();
+
+    if (current.row === goal.row && current.col === goal.col) {
+      return reconstructPath(cameFrom, current);
+    }
+
+    for (const neighbor of getNeighbors(current, grid)) {
+      const tentativeG = (gScore.get(key(current)) ?? Infinity) + 1;
+      if (tentativeG < (gScore.get(key(neighbor)) ?? Infinity)) {
+        cameFrom.set(key(neighbor), current);
+        gScore.set(key(neighbor), tentativeG);
+        fScore.set(key(neighbor), tentativeG + h(neighbor, goal));
+        if (!openSet.some((node) => node.row === neighbor.row && node.col === neighbor.col)) {
+          openSet.push(neighbor);
+        }
+      }
+    }
+  }
+  return []; // No path found
+}
+
+const key = (node) => \`\${node.row},\${node.col}\`;
+const h = (a, b) => Math.abs(a.row - b.row) + Math.abs(a.col - b.col);
+
+function reconstructPath(cameFrom, current) {
+  const path = [current];
+  while (cameFrom.has(key(current))) {
+    current = cameFrom.get(key(current));
+    path.push(current);
+  }
+  return path.reverse();
+}
+
+function getNeighbors(node, grid) {
+  const neighbors = [];
+  const dirs = [[-1, 0], [1, 0], [0, -1], [0, 1]];
+  for (const [dr, dc] of dirs) {
+    const r = node.row + dr;
+    const c = node.col + dc;
+    if (r >= 0 && r < grid.length && c >= 0 && c < grid[0].length && !grid[r][c]) {
+      neighbors.push({ row: r, col: c });
+    }
+  }
+  return neighbors;
+}`,
+
+  python: `# A* Search on a 2D grid in Python
+def a_star(start, goal, grid):
+    open_set = [start]
+    came_from = {}
+    
+    g_score = {start: 0}
+    f_score = {start: h(start, goal)}
+
+    while open_set:
+        # Get node with the lowest f_score
+        current = min(open_set, key=lambda node: f_score.get(node, float('inf')))
+        
+        if current == goal:
+            return reconstruct_path(came_from, current)
+
+        open_set.remove(current)
+
+        for neighbor in get_neighbors(current, grid):
+            tentative_g = g_score.get(current, float('inf')) + 1
+            if tentative_g < g_score.get(neighbor, float('inf')):
+                came_from[neighbor] = current
+                g_score[neighbor] = tentative_g
+                f_score[neighbor] = tentative_g + h(neighbor, goal)
+                if neighbor not in open_set:
+                    open_set.append(neighbor)
+
+    return []
+
+def h(a, b):
+    return abs(a[0] - b[0]) + abs(a[1] - b[1])
+
+def reconstruct_path(came_from, current):
+    path = [current]
+    while current in came_from:
+        current = came_from[current]
+        path.append(current)
+    return list(reversed(path))
+
+def get_neighbors(node, grid):
+    neighbors = []
+    r, c = node
+    for dr, dc in [(-1, 0), (1, 0), (0, -1), (0, 1)]:
+        nr, nc = r + dr, c + dc
+        # 0 represents an empty cell, 1 represents a wall
+        if 0 <= nr < len(grid) and 0 <= nc < len(grid[0]) and grid[nr][nc] == 0:
+            neighbors.append((nr, nc))
+    return neighbors`,
+
+  java: `// A* Search on a 2D grid in Java
+import java.util.*;
+
+public class AStarGrid {
+    static class Node {
+        int r, c;
+        Node(int r, int c) { this.r = r; this.c = c; }
+        
+        @Override
+        public boolean equals(Object o) {
+            if (this == o) return true;
+            if (!(o instanceof Node)) return false;
+            Node node = (Node) o;
+            return r == node.r && c == node.c;
+        }
+
+        @Override
+        public int hashCode() {
+            return Objects.hash(r, c);
+        }
+    }
+
+    private static int h(Node a, Node b) {
+        return Math.abs(a.r - b.r) + Math.abs(a.c - b.c);
+    }
+
+    public static List<Node> aStar(Node start, Node goal, int[][] grid) {
+        PriorityQueue<Node> openSet = new PriorityQueue<>(
+            Comparator.comparingInt(n -> h(n, goal))
+        );
+        Map<Node, Node> cameFrom = new HashMap<>();
+        Map<Node, Integer> gScore = new HashMap<>();
+        
+        gScore.put(start, 0);
+        openSet.add(start);
+
+        while (!openSet.isEmpty()) {
+            Node current = openSet.poll();
+
+            if (current.equals(goal)) {
+                return reconstructPath(cameFrom, current);
+            }
+
+            for (Node neighbor : getNeighbors(current, grid)) {
+                int tentativeG = gScore.getOrDefault(current, Integer.MAX_VALUE) + 1;
+                if (tentativeG < gScore.getOrDefault(neighbor, Integer.MAX_VALUE)) {
+                    cameFrom.put(neighbor, current);
+                    gScore.put(neighbor, tentativeG);
+                    if (!openSet.contains(neighbor)) {
+                        openSet.add(neighbor);
+                    }
+                }
+            }
+        }
+        return new ArrayList<>(); // No path found
+    }
+
+    private static List<Node> reconstructPath(Map<Node, Node> cameFrom, Node current) {
+        List<Node> path = new ArrayList<>();
+        path.add(current);
+        while (cameFrom.containsKey(current)) {
+            current = cameFrom.get(current);
+            path.add(current);
+        }
+        Collections.reverse(path);
+        return path;
+    }
+
+    private static List<Node> getNeighbors(Node node, int[][] grid) {
+        List<Node> neighbors = new ArrayList<>();
+        int[][] dirs = {{-1, 0}, {1, 0}, {0, -1}, {0, 1}};
+        for (int[] d : dirs) {
+            int nr = node.r + d[0];
+            int nc = node.c + d[1];
+            if (nr >= 0 && nr < grid.length && nc >= 0 && nc < grid[0].length && grid[nr][nc] == 0) {
+                neighbors.add(new Node(nr, nc));
+            }
+        }
+        return neighbors;
+    }
+}`,
+
+  cpp: `// A* Search on a 2D grid in C++
+#include <iostream>
+#include <vector>
+#include <queue>
+#include <unordered_map>
+#include <cmath>
+#include <algorithm>
+
+struct Node {
+    int r, c;
+    bool operator==(const Node& other) const {
+        return r == other.r && c == other.c;
+    }
+};
+
+// Custom hash function for Node to use in unordered_map
+struct NodeHash {
+    std::size_t operator()(const Node& n) const {
+        return std::hash<int>()(n.r) ^ (std::hash<int>()(n.c) << 1);
+    }
+};
+
+int h(const Node& a, const Node& b) {
+    return std::abs(a.r - b.r) + std::abs(a.c - b.c);
+}
+
+std::vector<Node> reconstructPath(std::unordered_map<Node, Node, NodeHash>& cameFrom, Node current) {
+    std::vector<Node> path = {current};
+    while (cameFrom.count(current)) {
+        current = cameFrom[current];
+        path.push_back(current);
+    }
+    std::reverse(path.begin(), path.end());
+    return path;
+}
+
+std::vector<Node> getNeighbors(const Node& node, const std::vector<std::vector<int>>& grid) {
+    std::vector<Node> neighbors;
+    int dirs[4][2] = {{-1, 0}, {1, 0}, {0, -1}, {0, 1}};
+    for (auto& d : dirs) {
+        int nr = node.r + d[0];
+        int nc = node.c + d[1];
+        if (nr >= 0 && nr < grid.size() && nc >= 0 && nc < grid[0].size() && grid[nr][nc] == 0) {
+            neighbors.push_back({nr, nc});
+        }
+    }
+    return neighbors;
+}
+
+std::vector<Node> aStar(Node start, Node goal, const std::vector<std::vector<int>>& grid) {
+    // Min-heap sorted by f-score
+    auto cmp = [&](const Node& left, const Node& right) {
+        return h(left, goal) > h(right, goal);
+    };
+    std::priority_queue<Node, std::vector<Node>, decltype(cmp)> openSet(cmp);
+    
+    std::unordered_map<Node, Node, NodeHash> cameFrom;
+    std::unordered_map<Node, int, NodeHash> gScore;
+    
+    gScore[start] = 0;
+    openSet.push(start);
+    
+    while (!openSet.empty()) {
+        Node current = openSet.top();
+        openSet.pop();
+        
+        if (current == goal) {
+            return reconstructPath(cameFrom, current);
+        }
+        
+        for (const Node& neighbor : getNeighbors(current, grid)) {
+            int tentativeG = gScore[current] + 1;
+            if (!gScore.count(neighbor) || tentativeG < gScore[neighbor]) {
+                cameFrom[neighbor] = current;
+                gScore[neighbor] = tentativeG;
+                openSet.push(neighbor);
+            }
+        }
+    }
+    
+    return {}; // No path found
+}`,
+};
+
+const fileNames = {
+  javascript: 'astar.js',
+  python: 'astar.py',
+  java: 'AStarGrid.java',
+  cpp: 'astar.cpp',
+};
+
+const AStarCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default AStarCode;
diff --git a/src/app/visualizer/ai/astar/content.jsx b/src/app/visualizer/ai/astar/content.jsx
new file mode 100644
index 000000000..14dc43854
--- /dev/null
+++ b/src/app/visualizer/ai/astar/content.jsx
@@ -0,0 +1,106 @@
+"use client";
+import React from "react";
+
+const Content = () => {
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8 shadow-sm">
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: "-0.03em" }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is A* Search?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              A* Search is a best-first pathfinding algorithm that finds the shortest route from a start node to a goal node while using a heuristic to guide exploration. It is widely used on grids, maps, and navigation systems because it combines the cost so far with an estimate of the remaining distance.
+            </p>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: "-0.03em" }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            The Core Formula
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-6 leading-relaxed">
+              A* chooses the next node with the smallest total score:
+            </p>
+            <div className="bg-[#f9fafb] dark:bg-[#1a1a1a] p-8 rounded-2xl border border-[#f3f4f6] dark:border-[#222] text-center mb-6 shadow-inner">
+              <span className="text-xl md:text-2xl font-mono text-[#a435f0]">
+                f(n) = g(n) + h(n)
+              </span>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm text-gray-600 dark:text-gray-300">
+              <div className="p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+                <h4 className="font-bold text-[#a435f0] mb-2 uppercase text-xs tracking-wider">g(n)</h4>
+                <p>Actual cost from the start node to the current node.</p>
+              </div>
+              <div className="p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+                <h4 className="font-bold text-[#a435f0] mb-2 uppercase text-xs tracking-wider">h(n)</h4>
+                <p>Heuristic estimate from the current node to the goal.</p>
+              </div>
+              <div className="p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+                <h4 className="font-bold text-[#a435f0] mb-2 uppercase text-xs tracking-wider">f(n)</h4>
+                <p>The total priority used to decide which node to explore next.</p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: "-0.03em" }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Why A* Works Well
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-4">
+              <li className="flex gap-4">
+                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 font-bold text-sm">1</div>
+                <div>
+                  <strong className="text-gray-900 dark:text-white block mb-1">Admissible heuristics</strong>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">If the heuristic never overestimates the remaining cost, A* is guaranteed to find an optimal path.</p>
+                </div>
+              </li>
+              <li className="flex gap-4">
+                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400 font-bold text-sm">2</div>
+                <div>
+                  <strong className="text-gray-900 dark:text-white block mb-1">Open and closed sets</strong>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">The open set stores candidates to visit next, while the closed set tracks nodes that have already been expanded.</p>
+                </div>
+              </li>
+              <li className="flex gap-4">
+                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center text-orange-600 dark:text-orange-400 font-bold text-sm">3</div>
+                <div>
+                  <strong className="text-gray-900 dark:text-white block mb-1">Practical pathfinding</strong>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">A* is fast enough for real-world navigation when paired with a sensible heuristic such as Manhattan distance on a grid.</p>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <section className="p-6">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: "-0.03em" }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time and Space Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="p-4 bg-gray-50 dark:bg-black/20 rounded-xl border border-[#f3f4f6] dark:border-[#222]">
+                <h4 className="font-bold text-[#a435f0] mb-2 uppercase text-xs tracking-wider">Worst case</h4>
+                <p className="text-sm text-gray-600 dark:text-gray-300">A* can examine many nodes when the heuristic is weak, so the worst case is still exponential in the search depth.</p>
+              </div>
+              <div className="p-4 bg-gray-50 dark:bg-black/20 rounded-xl border border-[#f3f4f6] dark:border-[#222]">
+                <h4 className="font-bold text-[#a435f0] mb-2 uppercase text-xs tracking-wider">Best case</h4>
+                <p className="text-sm text-gray-600 dark:text-gray-300">A strong heuristic dramatically cuts exploration and moves the search quickly toward the target.</p>
+              </div>
+            </div>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/ai/astar/page.jsx b/src/app/visualizer/ai/astar/page.jsx
new file mode 100644
index 000000000..e61cde714
--- /dev/null
+++ b/src/app/visualizer/ai/astar/page.jsx
@@ -0,0 +1,25 @@
+
+
+import ClientVisualizer from "./ClientVisualizer";
+
+
+export const metadata = {
+  title: "A* Search | Step-by-Step Animation",
+  description:
+    "Visualize A* Search with heuristic-driven pathfinding, open and closed sets, and shortest-path reconstruction.",
+  keywords: [
+    "A* Search Visualizer",
+    "A Star Search Visualization",
+    "A* Pathfinding",
+    "Heuristic Search",
+    "Grid Pathfinding",
+    "Optimal Path Search",
+    "Admissible Heuristic",
+    "AI Algorithms",
+  ],
+  robots: "index, follow",
+};
+
+export default function Page() {
+  return <ClientVisualizer />;
+}
diff --git a/src/app/visualizer/ai/mcts/AlgorithmClient.jsx b/src/app/visualizer/ai/mcts/AlgorithmClient.jsx
new file mode 100644
index 000000000..67869e2e5
--- /dev/null
+++ b/src/app/visualizer/ai/mcts/AlgorithmClient.jsx
@@ -0,0 +1,23 @@
+import Animation from "@/app/visualizer/ai/mcts/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/ai/mcts/codeBlock";
+import Content from "@/app/visualizer/ai/mcts/content";
+import VisualizerPageLayout, { createVisualizerPaths } from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("AI Algorithms", "Monte Carlo Tree Search")}
+      title="Monte Carlo Tree Search (MCTS)"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[{ text: "Alpha Beta Pruning", url: "/visualizer/ai/alpha-beta-pruning" }]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/ai/mcts/animation.jsx b/src/app/visualizer/ai/mcts/animation.jsx
new file mode 100644
index 000000000..67349e59e
--- /dev/null
+++ b/src/app/visualizer/ai/mcts/animation.jsx
@@ -0,0 +1,319 @@
+"use client";
+import React, { useState, useCallback, useEffect, useMemo } from "react";
+import { Play, Pause } from "lucide-react";
+import ResetButton from "@/app/components/ui/resetButton";
+import GoButton from "@/app/components/ui/goButton";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import { saveToStorage, loadFromStorage } from "@/utils/storage";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import { mctsGenerator, makeInitialTree } from "@/features/algorithms/ai/mctsLogic";
+
+const MCTSAnim = () => {
+  const [exploreC, setExploreC] = useState(() => loadFromStorage("mcts-explore-c", 1.4));
+  const [simSize, setSimSize] = useState(() => loadFromStorage("mcts-sim-size", 10));
+  
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+  const [sessionHistory, setSessionHistory] = useState([]);
+
+  useEffect(() => { saveToStorage("mcts-explore-c", exploreC); }, [exploreC]);
+  useEffect(() => { saveToStorage("mcts-sim-size", simSize); }, [simSize]);
+  useEffect(() => {
+    const savedSessions = JSON.parse(
+      localStorage.getItem("mcts-session-history") || "[]"
+    );
+    setSessionHistory(savedSessions);
+  }, []);
+
+  const saveSession = (stepCount) => {
+    const session = {
+      timestamp: new Date().toLocaleString(),
+      stepCount,
+      exploreC,
+      simSize,
+      bookmarked: false
+    };
+
+    const updatedSessions = [
+      session,
+      ...sessionHistory,
+    ].slice(0, 10);
+
+    localStorage.setItem(
+      "mcts-session-history",
+      JSON.stringify(updatedSessions)
+    );
+
+    setSessionHistory(updatedSessions);
+  };
+
+  const frames = useMemo(() => {
+    return Array.from(mctsGenerator(makeInitialTree(), exploreC, simSize, 50));
+  }, [exploreC, simSize]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  const reset = useCallback(() => {
+    if (engine.currentStep > 0) {
+      saveSession(engine.currentStep);
+    }
+    engine.reset();
+    setMessage("Visualizer reset.");
+    setMessageType("warning");
+  }, [engine, exploreC, simSize, sessionHistory]);
+
+  useVisualizerReset(reset);
+
+  const handleGo = (e) => {
+    e.preventDefault();
+    if (engine.isPlaying) return;
+    setMessage("Running MCTS simulations...");
+    setMessageType("success");
+    engine.play();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      setTimeout(() => engine.play(), 50);
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: reset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const getPos = (index) => {
+    let x = 0, y = 0;
+    if (index === 0) { x = 400; y = 40; }
+    else if (index >= 1 && index <= 2) { y = 120; x = 400 + (index - 1.5) * 400; }
+    else if (index >= 3 && index <= 6) { y = 200; x = 400 + (index - 4.5) * 200; }
+    else if (index >= 7 && index <= 14) { y = 280; x = 50 + (index - 7) * 100; }
+    return { x, y };
+  };
+
+  const edges = [];
+  for (let i = 0; i <= 6; i++) {
+    const p1 = getPos(i);
+    const p2_l = getPos(2 * i + 1);
+    const p2_r = getPos(2 * i + 2);
+    edges.push(<line key={`e${i}L`} x1={p1.x} y1={p1.y} x2={p2_l.x} y2={p2_l.y} stroke="#cbd5e1" strokeWidth="2" />);
+    edges.push(<line key={`e${i}R`} x1={p1.x} y1={p1.y} x2={p2_r.x} y2={p2_r.y} stroke="#cbd5e1" strokeWidth="2" />);
+  }
+
+  const messageClass =
+    messageType === "success"
+      ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
+      : messageType === "warning"
+      ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
+      : "bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200";
+
+  const replaySession = (session) => {
+    setExploreC(session.exploreC);
+    setSimSize(session.simSize);
+    setMessage(`Loaded session from ${session.timestamp}`);
+    setMessageType("success");
+    engine.reset();
+  };
+
+  const currentFrame = engine.currentStep >= 0 && engine.currentStep < frames.length 
+    ? frames[engine.currentStep] 
+    : { tree: makeInitialTree(), highlightPath: [], stepCount: 0, stepExplanation: "" };
+
+  return (
+    <main className="container mx-auto">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto font-sans">
+        Observe how Monte Carlo Tree Search explores a decision space through randomized playouts and statistical backpropagation.
+      </p>
+
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8 shadow-sm"
+      >
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-6">
+          <div>
+            <label className="block text-gray-700 dark:text-gray-300 mb-3 text-sm font-semibold uppercase tracking-wider" htmlFor="exploreC">
+              Exploration Constant (C): <span className="text-primary font-mono">{exploreC}</span>
+            </label>
+            <input
+              type="range"
+              id="exploreC"
+              min="0"
+              max="3"
+              step="0.1"
+              value={exploreC}
+              onChange={(e) => { engine.reset(); setExploreC(parseFloat(e.target.value)); }}
+              disabled={engine.isPlaying}
+              className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary"
+            />
+            <div className="flex justify-between text-[10px] text-gray-400 mt-2">
+              <span>EXPLOIT (0)</span>
+              <span>EXPLORE (3.0)</span>
+            </div>
+          </div>
+          <div>
+            <label className="block text-gray-700 dark:text-gray-300 mb-3 text-sm font-semibold uppercase tracking-wider" htmlFor="simSize">
+              Simulations Per Step: <span className="text-primary font-mono">{simSize}</span>
+            </label>
+            <input
+              type="range"
+              id="simSize"
+              min="1"
+              max="100"
+              value={simSize}
+              onChange={(e) => { engine.reset(); setSimSize(parseInt(e.target.value)); }}
+              disabled={engine.isPlaying}
+              className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary"
+            />
+            <div className="text-[10px] text-gray-400 mt-2 text-right">Batch Playouts</div>
+          </div>
+        </div>
+
+        <div className="flex flex-col sm:flex-row sm:items-center gap-4 border-t border-gray-100 dark:border-gray-800 pt-6">
+          <div className="flex gap-2">
+            <GoButton onClick={handleGo} isAnimating={engine.isPlaying} disabled={engine.isPlaying} />
+            <ResetButton onReset={reset} isAnimating={engine.isPlaying} />
+          </div>
+
+          <div className="flex-1">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={reset}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        </div>
+      </form>
+
+      {message && (
+        <div className={`max-w-3xl mx-auto mb-8 p-4 rounded-lg ${messageClass} shadow-sm border border-current/10`}>
+          <p className="text-center font-medium">{message}</p>
+        </div>
+      )}
+
+      {(engine.isPlaying || currentFrame.tree[0].visits > 0 || engine.currentStep > 0) && (
+        <div className="max-w-4xl mx-auto space-y-6">
+          {currentFrame.stepExplanation && (
+            <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden shadow-sm">
+              <div className="flex items-center gap-2 bg-[#a435f0]/10 dark:bg-[#a435f0]/20 px-4 py-2 border-b border-[#a435f0]/20">
+                <span className="w-2 h-2 rounded-full bg-[#a435f0] animate-pulse"></span>
+                <span className="text-sm font-semibold text-[#a435f0] dark:text-[#c56eff] uppercase tracking-wide">
+                  Step Explanation
+                </span>
+                <span className="ml-auto text-xs text-gray-500 dark:text-gray-400">
+                  Cycle #{currentFrame.stepCount}
+                </span>
+              </div>
+              <div className="px-4 py-4">
+                <p className="text-gray-700 dark:text-gray-200 text-sm leading-relaxed font-mono">
+                  {currentFrame.stepExplanation}
+                </p>
+              </div>
+              <div className="px-4 py-2 bg-gray-50 dark:bg-neutral-950 border-t border-gray-100 dark:border-gray-800 flex flex-wrap gap-4 text-[10px] text-gray-500 uppercase font-bold tracking-tight">
+                <span><span className="text-blue-500">● Blue</span> = selection path</span>
+                <span><span className="text-gray-400">● Gray</span> = unvisited</span>
+                <span>v = visits</span>
+                <span>w = win rate %</span>
+              </div>
+            </div>
+          )}
+
+          <div className="bg-white dark:bg-neutral-900 p-8 rounded-xl border border-gray-200 dark:border-gray-800 shadow-md">
+            <h2 className="text-lg font-bold text-gray-900 dark:text-white mb-10 text-center uppercase tracking-[0.2em]">
+              Search Tree Visualization
+            </h2>
+
+            <div className="bg-white dark:bg-neutral-900 p-6 rounded-xl border border-gray-200 dark:border-gray-800 shadow-md mb-8">
+              <h3 className="text-lg font-bold mb-4">
+                Session History
+              </h3>
+
+              {sessionHistory.length === 0 ? (
+                <p className="text-gray-500 text-sm">
+                  No saved sessions yet.
+                </p>
+              ) : (
+                <div className="space-y-3">
+                  {sessionHistory.map((session, index) => (
+                    <div
+                      key={index}
+                      className="flex justify-between items-center p-3 rounded-lg border border-gray-200 dark:border-gray-700"
+                    >
+                      <div>
+                        <p className="font-medium">
+                          {session.timestamp}
+                        </p>
+                        <p className="text-xs text-gray-500">
+                          Steps: {session.stepCount}
+                        </p>
+                        <p className="text-xs text-gray-500">
+                          Explore C: {session.exploreC}
+                        </p>
+                        <p className="text-xs text-gray-500">
+                          Simulations: {session.simSize}
+                        </p>
+                      </div>
+
+                      <button
+                        type="button"
+                        onClick={() => replaySession(session)}
+                        className="px-3 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
+                      >
+                        Replay
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <div className="min-w-[800px] h-[360px] relative mx-auto">
+              <svg className="absolute w-full h-full left-0 top-0 pointer-events-none opacity-30">{edges}</svg>
+              {currentFrame.tree.map((node, i) => {
+                const pos = getPos(i);
+                const r = 32;
+                const winRate = node.visits === 0 ? 0 : Math.round((node.wins / node.visits) * 100);
+                const isHighlighted = currentFrame.highlightPath.includes(i);
+                const bgClass = isHighlighted 
+                  ? "bg-blue-600 border-blue-700 text-white translate-y-[-2px] shadow-lg shadow-blue-500/20" 
+                  : "bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-300 shadow-sm";
+                
+                return (
+                  <div 
+                    key={i} 
+                    className={`absolute flex flex-col items-center justify-center border-2 rounded-full transition-all duration-300 font-sans ${bgClass}`} 
+                    style={{ width: `${2*r}px`, height: `${2*r}px`, left: `${pos.x - r}px`, top: `${pos.y - r}px`, zIndex: 10 }}
+                  >
+                    <span className="text-[9px] font-bold opacity-50 mb-0.5">ID: {i}</span>
+                    <span className="text-xs font-black">{node.visits}v</span>
+                    <div className="h-[1px] w-6 bg-current opacity-20 my-0.5" />
+                    <span className="text-[10px] font-mono font-medium">{winRate}%</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+    </main>
+  );
+};
+
+export default MCTSAnim;
diff --git a/src/app/visualizer/ai/mcts/codeBlock.jsx b/src/app/visualizer/ai/mcts/codeBlock.jsx
new file mode 100644
index 000000000..412f578ab
--- /dev/null
+++ b/src/app/visualizer/ai/mcts/codeBlock.jsx
@@ -0,0 +1,153 @@
+'use client';
+import CodeBlock from '@/app/components/ui/CodeBlock';
+
+const codeExamples = {
+  javascript: `// Monte Carlo Tree Search (MCTS) - Core Logic (UCT)
+function uct(node, parentVisits, C = 1.41) {
+    if (node.visits === 0) return Infinity;
+    return (node.wins / node.visits) + C * Math.sqrt(Math.log(parentVisits) / node.visits);
+}
+
+function select(node, C) {
+    while (node.children.length > 0) {
+        node = node.children.reduce((best, curr) => 
+            uct(curr, node.visits, C) > uct(best, node.visits, C) ? curr : best
+        );
+    }
+    return node;
+}
+
+function simulate(node) {
+    // Perform a random playout from the current state
+    let state = node.game_state;
+    while (!state.is_terminal()) {
+        const move = state.get_random_move();
+        state = state.apply(move);
+    }
+    return state.get_result(); // 1 for win, 0 for loss
+}
+
+function backpropagate(path, result) {
+    for (let node of path) {
+        node.visits += 1;
+        node.wins += result;
+    }
+}
+`,
+
+  python: `# Monte Carlo Tree Search (MCTS) - Core Logic (UCT)
+import math
+
+def uct(node, parent_visits, c=1.41):
+    if node.visits == 0:
+        return float('inf')
+    return (node.wins / node.visits) + c * math.sqrt(math.log(parent_visits) / node.visits)
+
+def select(node, c):
+    while node.children:
+        node = max(node.children, key=lambda n: uct(n, node.visits, c))
+    return node
+
+def simulate(node):
+    # Perform a random playout from the current state
+    state = node.game_state
+    while not state.is_terminal():
+        move = state.get_random_move()
+        state = state.apply(move)
+    return state.get_result()  # 1 for win, 0 for loss
+
+def backpropagate(path, result):
+    for node in path:
+        node.visits += 1
+        node.wins += result
+`,
+
+  java: `// Monte Carlo Tree Search (MCTS) - Core Logic (UCT)
+class MCTS {
+    public double getUCT(Node node, int parentVisits, double C) {
+        if (node.getVisits() == 0) return Double.MAX_VALUE;
+        return (node.getWins() / (double)node.getVisits()) 
+               + C * Math.sqrt(Math.log(parentVisits) / node.getVisits());
+    }
+
+    public Node select(Node node, double C) {
+        while (!node.getChildren().isEmpty()) {
+            node = node.getChildren().stream()
+                .max((n1, n2) -> Double.compare(getUCT(n1, node.getVisits(), C), 
+                                                getUCT(n2, node.getVisits(), C)))
+                .get();
+        }
+        return node;
+    }
+
+    public int simulate(Node node) {
+        GameState state = node.getGameState();
+        while (!state.isTerminal()) {
+            state = state.apply(state.getRandomMove());
+        }
+        return state.getResult(); // 1 for win, 0 for loss
+    }
+
+    public void backpropagate(List<Node> path, int result) {
+        for (Node n : path) {
+            n.setVisits(n.getVisits() + 1);
+            n.setWins(n.getWins() + result);
+        }
+    }
+}
+`,
+
+  cpp: `// Monte Carlo Tree Search (MCTS) - Core Logic (UCT)
+#include <cmath>
+#include <algorithm>
+#include <vector>
+
+double uct(Node* node, int parent_visits, double C = 1.41) {
+    if (node->visits == 0) return 1e18; // Infinity
+    return (node->wins / (double)node->visits) + 
+           C * std::sqrt(std::log(parent_visits) / node->visits);
+}
+
+Node* select(Node* node, double C) {
+    while (!node->children.empty()) {
+        node = *std::max_element(node->children.begin(), node->children.end(),
+            [&](Node* a, Node* b) {
+                return uct(a, node->visits, C) < uct(b, node->visits, C);
+            });
+    }
+    return node;
+}
+
+int simulate(GameState state) {
+    while (!state.is_terminal()) {
+        state = state.apply(state.get_random_move());
+    }
+    return state.get_result(); // 1 for win, 0 for loss
+}
+
+void backpropagate(std::vector<Node*>& path, int result) {
+    for (auto node : path) {
+        node->visits += 1;
+        node->wins += result;
+    }
+}
+`,
+};
+
+const fileNames = {
+  javascript: 'mcts.js',
+  python: 'mcts.py',
+  java: 'MCTS.java',
+  cpp: 'mcts.cpp',
+};
+
+const MCTSCodeBlock = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default MCTSCodeBlock;
+
diff --git a/src/app/visualizer/ai/mcts/content.jsx b/src/app/visualizer/ai/mcts/content.jsx
new file mode 100644
index 000000000..d00906644
--- /dev/null
+++ b/src/app/visualizer/ai/mcts/content.jsx
@@ -0,0 +1,123 @@
+"use client";
+import React from "react";
+
+const Content = () => {
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8 shadow-sm">
+        {/* What is MCTS */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: '-0.03em' }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is Monte Carlo Tree Search?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              Monte Carlo Tree Search (MCTS) is a heuristic search algorithm for decision processes, most notably used in game-playing AI. Unlike exhaustive 
+              search algorithms like Minimax, MCTS builds a search tree by performing randomized simulations (playouts) of a game. This allows it to 
+              operate effectively in games with massive branching factors (like Go) where traditional heuristics are difficult to define.
+            </p>
+          </div>
+        </section>
+
+        {/* The 4 Phases */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: '-0.03em' }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            The 4 Phases of MCTS
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-6 leading-relaxed">
+              MCTS iterates through four distinct phases to gradually explore the most promising branches of a decision tree:
+            </p>
+
+            <ul className="space-y-4">
+              <li className="flex gap-4">
+                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 font-bold text-sm">1</div>
+                <div>
+                  <strong className="text-gray-900 dark:text-white block mb-1">Selection</strong>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">Starting at the root, move down the tree by picking nodes with the best UCT (Upper Confidence Bound for Trees) score until a leaf node is reached.</p>
+                </div>
+              </li>
+              <li className="flex gap-4">
+                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400 font-bold text-sm">2</div>
+                <div>
+                  <strong className="text-gray-900 dark:text-white block mb-1">Expansion</strong>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">If the leaf node isn&apos;t a terminal state, create one or more child nodes to represent possible future moves.</p>
+                </div>
+              </li>
+              <li className="flex gap-4">
+                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center text-orange-600 dark:text-orange-400 font-bold text-sm">3</div>
+                <div>
+                  <strong className="text-gray-900 dark:text-white block mb-1">Simulation</strong>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">Perform a &quot;playout&quot; from the new node by choosing moves (often randomly) until the end of the game is reached.</p>
+                </div>
+              </li>
+              <li className="flex gap-4">
+                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center text-green-600 dark:text-green-400 font-bold text-sm">4</div>
+                <div>
+                  <strong className="text-gray-900 dark:text-white block mb-1">Backpropagation</strong>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">Propagate the result of the simulation (win or loss) back up the path to update the visit count and win rate of all ancestor nodes.</p>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        {/* UCT Formula */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: '-0.03em' }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Balancing via UCT
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-6 leading-relaxed">
+              To decide which node to visit, MCTS uses the <strong>Upper Confidence Bound for Trees</strong> formula. This helps balance the 
+              need to <em>exploit</em> high-winning branches and <em>explore</em> less-visited ones:
+            </p>
+            
+            <div className="bg-[#f9fafb] dark:bg-[#1a1a1a] p-8 rounded-2xl border border-[#f3f4f6] dark:border-[#222] text-center mb-6 shadow-inner">
+              <span className="text-xl md:text-2xl font-mono text-[#a435f0]">
+                UCT = (w<sub>i</sub> / n<sub>i</sub>) + C * √[ ln(N<sub>i</sub>) / n<sub>i</sub> ]
+              </span>
+            </div>
+
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-xs font-mono text-gray-500 dark:text-gray-400">
+              <div className="p-3 bg-gray-50 dark:bg-black/20 rounded-lg"><strong>w</strong> = node wins</div>
+              <div className="p-3 bg-gray-50 dark:bg-black/20 rounded-lg"><strong>n</strong> = node visits</div>
+              <div className="p-3 bg-gray-50 dark:bg-black/20 rounded-lg"><strong>N</strong> = parent visits</div>
+              <div className="p-3 bg-gray-50 dark:bg-black/20 rounded-lg"><strong>C</strong> = constant</div>
+            </div>
+          </div>
+        </section>
+
+        {/* Advantages */}
+        <section className="p-6">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: '-0.03em' }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Why MCTS?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-6 leading-relaxed">
+              MCTS offers several advantages over traditional game-tree search algorithms:
+            </p>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+                <h4 className="font-bold text-[#a435f0] mb-2 uppercase text-xs tracking-wider">Massive Complexity</h4>
+                <p className="text-sm">It handles games with huge branching factors where Minimax fails due to depth limits.</p>
+              </div>
+              <div className="p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+                <h4 className="font-bold text-[#a435f0] mb-2 uppercase text-xs tracking-wider">No Expert Knowledge</h4>
+                <p className="text-sm">It doesn&apos;t require a hand-crafted evaluation function; the &quot;knowledge&quot; is built statistically.</p>
+              </div>
+            </div>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default Content;
+
+
diff --git a/src/app/visualizer/ai/minmax/AlgorithmClient.jsx b/src/app/visualizer/ai/minmax/AlgorithmClient.jsx
new file mode 100644
index 000000000..4b5c4a56a
--- /dev/null
+++ b/src/app/visualizer/ai/minmax/AlgorithmClient.jsx
@@ -0,0 +1,27 @@
+import Animation from "@/app/visualizer/ai/minmax/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/ai/minmax/codeBlock";
+import Content from "@/app/visualizer/ai/minmax/content";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("AI Algorithms", "Min Max Algorithm")}
+      title="Min Max Algorithm"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[{ text: "Alpha Beta Pruning", url: "/visualizer/ai/alpha-beta-pruning" }]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/ai/minmax/animation.jsx b/src/app/visualizer/ai/minmax/animation.jsx
new file mode 100644
index 000000000..ac009d53a
--- /dev/null
+++ b/src/app/visualizer/ai/minmax/animation.jsx
@@ -0,0 +1,211 @@
+"use client";
+import React, { useState, useMemo } from "react";
+import ResetButton from "@/app/components/ui/resetButton";
+import GoButton from "@/app/components/ui/goButton";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import { minmaxGenerator } from "@/features/algorithms/ai/minmaxLogic";
+
+const MinMax = () => {
+  const [arrayElements, setArrayElements] = useState("3, 5, 2, 9, 12, 5, 23, 23");
+  const [inputNodes, setInputNodes] = useState([]);
+  const [message, setMessage] = useState("Enter 8 comma-separated numbers for leaf nodes.");
+
+  const frames = useMemo(() => {
+    if (inputNodes.length === 0) return [];
+    return Array.from(minmaxGenerator(inputNodes));
+  }, [inputNodes]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  const handleReset = () => {
+    setMessage("Enter 8 comma-separated numbers for leaf nodes.");
+    setInputNodes([]);
+    engine.reset();
+  };
+
+  const handleGo = (e) => {
+    e.preventDefault();
+    if (engine.isPlaying) return;
+
+    if (!arrayElements.trim()) {
+      setMessage("Please enter array elements.");
+      return;
+    }
+
+    const arr = arrayElements.split(",").map((x) => Number(x.trim()));
+    if (arr.some(isNaN) || arr.length !== 8) {
+      setMessage("Please enter exactly 8 valid numbers.");
+      return;
+    }
+
+    const initNodes = new Array(15).fill(null).map((_, i) => ({
+      val: i >= 7 ? arr[i - 7] : "?",
+      id: i,
+    }));
+    
+    setInputNodes(initNodes);
+    setMessage("Running Min Max Algorithm...");
+    engine.reset();
+    engine.play();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      setTimeout(() => engine.play(), 50);
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame = frames[engine.currentStep] || {
+    treeNodes: inputNodes.length > 0 ? inputNodes : [],
+    currentNodeClass: {},
+    stepExplanation: "",
+  };
+
+  const displayMessage = currentFrame.message || message;
+
+  const renderTree = () => {
+    if (currentFrame.treeNodes.length === 0) return null;
+    
+    const getPos = (index) => {
+      let x = 0, y = 0;
+      if (index === 0) { x = 400; y = 40; }
+      else if (index >= 1 && index <= 2) { y = 120; x = 400 + (index - 1.5) * 400; }
+      else if (index >= 3 && index <= 6) { y = 200; x = 400 + (index - 4.5) * 200; }
+      else if (index >= 7 && index <= 14) { y = 280; x = 50 + (index - 7) * 100; }
+      return { x, y };
+    };
+
+    const edges = [];
+    for (let i = 0; i <= 6; i++) {
+        const p1 = getPos(i);
+        const p2_left = getPos(2 * i + 1);
+        const p2_right = getPos(2 * i + 2);
+        edges.push(<line key={`edge-${i}-L`} x1={p1.x} y1={p1.y} x2={p2_left.x} y2={p2_left.y} stroke="#888" strokeWidth="2" />);
+        edges.push(<line key={`edge-${i}-R`} x1={p1.x} y1={p1.y} x2={p2_right.x} y2={p2_right.y} stroke="#888" strokeWidth="2" />);
+    }
+
+    return (
+      <div className="relative w-full max-w-4xl mx-auto overflow-x-auto bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md mt-8 mb-8">
+        <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-6 text-center">
+            Game Tree Visualization
+        </h2>
+        <div className="min-w-[800px] h-[340px] relative mx-auto">
+          <svg className="absolute w-full h-full left-0 top-0 pointer-events-none">
+            {edges}
+          </svg>
+          
+          {currentFrame.treeNodes.map((node, i) => {
+            const pos = getPos(i);
+            const r = 20;
+            const styleClass = currentFrame.currentNodeClass[i] || "bg-white text-gray-800 border-gray-400";
+            return (
+              <div
+                key={i}
+                className={`absolute flex justify-center items-center font-bold border-2 rounded-full transition-all duration-300 shadow-sm ${styleClass}`}
+                style={{
+                  width: `${2*r}px`,
+                  height: `${2*r}px`,
+                  left: `${pos.x - r}px`,
+                  top: `${pos.y - r}px`,
+                  zIndex: 10
+                }}
+              >
+                {node.val}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <main className="min-h-screen py-8 px-4 sm:px-6 mt-16 font-sans">
+      <div className="max-w-3xl mx-auto text-center mb-8">
+        <h1 className="text-4xl font-extrabold text-gray-900 dark:text-white mb-4 tracking-tight">
+          Min Max Visualization
+        </h1>
+        <p className="text-lg text-gray-600 dark:text-gray-400">
+          Observe how the Min Max algorithm discovers the optimal leaf node value!
+        </p>
+      </div>
+
+      <form onSubmit={handleGo} className="max-w-3xl mx-auto mb-8 bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-700">
+        <div className="flex flex-col sm:flex-row gap-4 mb-4">
+          <div className="flex-1">
+            <label htmlFor="arrayElements" className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+              Array Elements (comma separated - exactly 8 items)
+            </label>
+            <input
+              id="arrayElements"
+              type="text"
+              value={arrayElements}
+              onChange={(e) => setArrayElements(e.target.value)}
+              className="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent transition-all outline-none text-gray-800 dark:text-gray-200 font-mono"
+              placeholder="e.g., 3, 5, 2, 9, 12, 5, 23, 23"
+              disabled={engine.isPlaying}
+            />
+          </div>
+          <div className="flex flex-col sm:flex-row gap-2 self-end sm:w-auto w-full">
+            <GoButton onClick={handleGo} isAnimating={engine.isPlaying} disabled={engine.isPlaying} />
+            <ResetButton onReset={handleReset} isAnimating={engine.isPlaying} />
+          </div>
+        </div>
+
+        <PlaybackControls
+          isPlaying={engine.isPlaying}
+          onPlayPause={togglePlay}
+          speed={engine.speed / 1000}
+          onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+          onStepForward={engine.stepForward}
+          onStepBackward={engine.stepBackward}
+          onReset={engine.reset}
+          progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+          disabled={frames.length === 0}
+        />
+      </form>
+
+      {displayMessage && (
+        <div className="max-w-3xl mx-auto mb-8 p-4 rounded-lg bg-blue-50 dark:bg-gray-800 text-blue-800 dark:text-blue-300 border border-blue-200 dark:border-gray-700">
+          <p className="text-center font-medium">{displayMessage}</p>
+        </div>
+      )}
+
+      {currentFrame.stepExplanation && (
+        <div className="max-w-4xl mx-auto mb-6 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden shadow-sm">
+          <div className="flex items-center gap-2 bg-[#a435f0]/10 dark:bg-[#a435f0]/20 px-4 py-2 border-b border-[#a435f0]/20">
+            <span className="w-2 h-2 rounded-full bg-[#a435f0] animate-pulse"></span>
+            <span className="text-sm font-semibold text-[#a435f0] dark:text-[#c56eff] uppercase tracking-wide">
+              Step Explanation
+            </span>
+          </div>
+          <div className="px-4 py-3">
+            <p className="text-gray-700 dark:text-gray-200 text-sm leading-relaxed font-mono">
+              {currentFrame.stepExplanation}
+            </p>
+          </div>
+        </div>
+      )}
+
+      {renderTree()}
+    </main>
+  );
+};
+
+export default MinMax;
diff --git a/src/app/visualizer/ai/minmax/codeBlock.jsx b/src/app/visualizer/ai/minmax/codeBlock.jsx
new file mode 100644
index 000000000..d3482d1df
--- /dev/null
+++ b/src/app/visualizer/ai/minmax/codeBlock.jsx
@@ -0,0 +1,76 @@
+'use client';
+import CodeBlock from '@/app/components/ui/CodeBlock';
+
+const codeExamples = {
+  javascript: `// Min Max Algorithm in JavaScript
+function minimax(depth, nodeIndex, isMax, scores, h) {
+  if (depth === h) return scores[nodeIndex];
+  
+  if (isMax) {
+    return Math.max(
+      minimax(depth + 1, nodeIndex * 2, false, scores, h),
+      minimax(depth + 1, nodeIndex * 2 + 1, false, scores, h)
+    );
+  } else {
+    return Math.min(
+      minimax(depth + 1, nodeIndex * 2, true, scores, h),
+      minimax(depth + 1, nodeIndex * 2 + 1, true, scores, h)
+    );
+  }
+}
+// Usage example
+const scores = [3, 5, 2, 9, 12, 5, 23, 23];
+const h = Math.log2(scores.length);
+const result = minimax(0, 0, true, scores, h);
+console.log("Optimal value is: " + result);`,
+
+  python: `# Min Max Algorithm in Python
+import math
+
+def minimax(depth, nodeIndex, isMax, scores, h):
+    if depth == h:
+        return scores[nodeIndex]
+    
+    if isMax:
+        return max(minimax(depth + 1, nodeIndex * 2, False, scores, h),
+                   minimax(depth + 1, nodeIndex * 2 + 1, False, scores, h))
+    else:
+        return min(minimax(depth + 1, nodeIndex * 2, True, scores, h),
+                   minimax(depth + 1, nodeIndex * 2 + 1, True, scores, h))
+
+# Usage example
+scores = [3, 5, 2, 9, 12, 5, 23, 23]
+h = int(math.log2(len(scores)))
+result = minimax(0, 0, True, scores, h)
+print("Optimal value is:", result)`,
+
+  java: `// Min Max Algorithm in Java
+public class MinMax {
+    static int minimax(int depth, int nodeIndex, boolean isMax, int[] scores, int h) {
+        if (depth == h) return scores[nodeIndex];
+        
+        if (isMax) {
+            return Math.max(
+                minimax(depth + 1, nodeIndex * 2, false, scores, h),
+                minimax(depth + 1, nodeIndex * 2 + 1, false, scores, h)
+            );
+        } else {
+            return Math.min(
+                minimax(depth + 1, nodeIndex * 2, true, scores, h),
+                minimax(depth + 1, nodeIndex * 2 + 1, true, scores, h)
+            );
+        }
+    }
+
+    public static void main(String[] args) {
+        int[] scores = {3, 5, 2, 9, 12, 5, 23, 23};
+        int h = (int)(Math.log(scores.length) / Math.log(2));
+        int result = minimax(0, 0, true, scores, h);
+        System.out.println("Optimal value is: " + result);
+    }
+}`
+};
+
+export default function Code() {
+  return <CodeBlock codeExamples={codeExamples} />;
+}
diff --git a/src/app/visualizer/ai/minmax/content.jsx b/src/app/visualizer/ai/minmax/content.jsx
new file mode 100644
index 000000000..c44aaf7dc
--- /dev/null
+++ b/src/app/visualizer/ai/minmax/content.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+const Content = () => {
+  return (
+    <div className="mt-8 mb-4 max-w-4xl mx-auto px-4">
+      <h1 className="text-3xl font-bold mb-4 text-center text-gray-800 dark:text-gray-100">
+        Min Max Algorithm
+      </h1>
+      <p className="text-lg text-gray-600 dark:text-gray-400 mb-6 text-center leading-relaxed">
+        The Min Max algorithm is a recursive or backtracking algorithm used in decision-making and game theory. It provides an optimal move for the player assuming the opponent is also playing optimally.
+      </p>
+
+      <div className="bg-blue-50 dark:bg-[#202020] p-6 rounded-lg shadow-sm border border-blue-100 dark:border-gray-700 mb-8">
+        <h2 className="text-xl font-semibold mb-3 text-blue-800 dark:text-blue-300">
+          How It Works
+        </h2>
+        <ol className="list-decimal pl-6 space-y-2 text-gray-700 dark:text-gray-300">
+          <li>Construct the game tree to a certain depth or to the terminal nodes.</li>
+          <li>Evaluate the non-terminal nodes by evaluating the terminal nodes.</li>
+          <li>For the Maximizer turn, choose the child node with the highest value.</li>
+          <li>For the Minimizer turn, choose the child node with the lowest value.</li>
+          <li>Propagate values up the tree until the root is reached.</li>
+        </ol>
+      </div>
+
+      <div className="grid md:grid-cols-2 gap-6 mb-8">
+        <div className="bg-white dark:bg-[#1a1a1a] p-6 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+          <h2 className="text-xl font-semibold mb-3 text-green-700 dark:text-green-400">
+            Time Complexity
+          </h2>
+          <ul className="space-y-2 text-gray-700 dark:text-gray-300">
+            <li><span className="font-semibold text-gray-900 dark:text-gray-100">Best Case:</span> O(b^d)</li>
+            <li><span className="font-semibold text-gray-900 dark:text-gray-100">Average Case:</span> O(b^d)</li>
+            <li><span className="font-semibold text-gray-900 dark:text-gray-100">Worst Case:</span> O(b^d)</li>
+          </ul>
+          <p className="mt-3 text-sm text-gray-500 dark:text-gray-400">
+            Where b is the branching factor and d is depth.
+          </p>
+        </div>
+
+        <div className="bg-white dark:bg-[#1a1a1a] p-6 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+          <h2 className="text-xl font-semibold mb-3 text-purple-700 dark:text-purple-400">
+            Space Complexity
+          </h2>
+          <ul className="space-y-2 text-gray-700 dark:text-gray-300">
+            <li><span className="font-semibold text-gray-900 dark:text-gray-100">Complexity:</span> O(b * d)</li>
+          </ul>
+          <p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
+            The space is mainly consumed by the recursive call stack during the deep-first search traversal of the game tree.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/array/Interview-Patterns/InterviewPatternsQuizClient.jsx b/src/app/visualizer/array/Interview-Patterns/InterviewPatternsQuizClient.jsx
new file mode 100644
index 000000000..121d7aaf1
--- /dev/null
+++ b/src/app/visualizer/array/Interview-Patterns/InterviewPatternsQuizClient.jsx
@@ -0,0 +1,92 @@
+"use client";
+
+import Link from "next/link";
+import { Search, ArrowLeft, ArrowRight, Play } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function InterviewPatternsQuizClient() {
+  const quizzes = [
+    {
+      title: "Sliding Window Quiz",
+      description: "Practice the Sliding Window technique for optimizing array and string problems.",
+      href: "/visualizer/array/Interview-Patterns/quiz/slidingWindow",
+      filename: "sliding_window_quiz.js",
+      themeColor: "from-cyan-500 to-blue-600",
+    },
+    {
+      title: "Two Pointers Quiz",
+      description: "Practice the Two Pointers technique for solving array and linked list problems.",
+      href: "/visualizer/array/Interview-Patterns/quiz/twopointers",
+      filename: "two_pointers_quiz.js",
+      themeColor: "from-blue-500 to-indigo-600",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-[var(--udemy-text)] dark:text-white transition-colors duration-300 pb-20">
+      
+      {/* Header / Hero */}
+      <section className="relative pt-6 pb-4">
+        <div className="max-w-[1100px] mx-auto px-4">
+          <Link href="/visualizer/quiz">
+            <button className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] dark:text-[var(--color-primary-light)] hover:opacity-85 transition-opacity mb-3">
+              <ArrowLeft size={16} />
+              <span>Back to all quizzes</span>
+            </button>
+          </Link>
+          <h1 className="text-2xl md:text-3xl font-black mb-2">
+            Interview Patterns Quiz Portal
+          </h1>
+          <p className="text-[14px] text-surface-600 dark:text-surface-400 font-medium">
+            Test your understanding of common interview patterns. Select a specific challenge below.
+          </p>
+        </div>
+      </section>
+
+      {/* Grid of Sub-quizzes */}
+      <div className="max-w-4xl mx-auto px-4 mt-8">
+        <div className="grid md:grid-cols-2 gap-6 items-stretch">
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4, delay: index * 0.1, ease: [0.22, 1, 0.36, 1] }}
+              whileHover={{ y: -6, scale: 1.015 }}
+              whileTap={{ scale: 0.985 }}
+              className="group flex flex-col h-full rounded-2xl border border-cyan-500/20 dark:border-cyan-500/30 bg-white dark:bg-[#1a1a1a] overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
+            >
+              {/* Terminal command execution style top bar */}
+              <div className="flex items-center justify-between px-4 py-2.5 bg-cyan-500/10 dark:bg-cyan-500/20 border-b border-cyan-500/20 dark:border-cyan-500/30">
+                <div className="flex items-center gap-1.5 font-mono text-[11px] text-surface-600 dark:text-surface-300">
+                  <span className="text-violet-500 font-bold">$</span>
+                  <span>node {quiz.filename}</span>
+                </div>
+              </div>
+
+              {/* Main Card Content */}
+              <div className="p-6 flex-1 flex flex-col justify-between">
+                <div>
+                  <h2 className="text-[20px] font-extrabold text-surface-900 dark:text-white group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors mb-2">
+                    {quiz.title}
+                  </h2>
+                  <p className="text-[14px] text-surface-600 dark:text-surface-300 leading-relaxed mb-6">
+                    {quiz.description}
+                  </p>
+                </div>    
+
+                <Link href={quiz.href} className="block mt-auto w-full">
+                  <button className="w-full h-11 rounded-xl bg-cyan-600 hover:bg-cyan-700 text-white font-bold text-[14px] flex items-center justify-center gap-2 shadow-sm hover:shadow-md transition-all">
+                    <span>Start Quiz</span>
+                    <Play size={14} className="fill-current" />
+                  </button>
+                </Link>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+    
\ No newline at end of file
diff --git a/src/app/visualizer/array/Interview-Patterns/page.jsx b/src/app/visualizer/array/Interview-Patterns/page.jsx
new file mode 100644
index 000000000..228d2155e
--- /dev/null
+++ b/src/app/visualizer/array/Interview-Patterns/page.jsx
@@ -0,0 +1,5 @@
+import InterviewPatternsQuizClient from "./InterviewPatternsQuizClient";
+
+export default function Page() {
+  return <InterviewPatternsQuizClient/>;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/Interview-Patterns/quiz/page.jsx b/src/app/visualizer/array/Interview-Patterns/quiz/page.jsx
new file mode 100644
index 000000000..e70803bff
--- /dev/null
+++ b/src/app/visualizer/array/Interview-Patterns/quiz/page.jsx
@@ -0,0 +1,5 @@
+import InterviewPatternsQuizClient from "../InterviewPatternsQuizClient";
+
+export default function Page() {
+  return <InterviewPatternsQuizClient />;
+}
diff --git a/src/app/visualizer/array/Interview-Patterns/quiz/slidingWindow/page.jsx b/src/app/visualizer/array/Interview-Patterns/quiz/slidingWindow/page.jsx
new file mode 100644
index 000000000..2c5a7d0a6
--- /dev/null
+++ b/src/app/visualizer/array/Interview-Patterns/quiz/slidingWindow/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../../../slidingwindow/quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
diff --git a/src/app/visualizer/array/Interview-Patterns/quiz/twopointers/page.jsx b/src/app/visualizer/array/Interview-Patterns/quiz/twopointers/page.jsx
new file mode 100644
index 000000000..cf108ffe3
--- /dev/null
+++ b/src/app/visualizer/array/Interview-Patterns/quiz/twopointers/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../../../twopointers/quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
diff --git a/src/app/visualizer/array/binarysearch/AlgorithmClient.jsx b/src/app/visualizer/array/binarysearch/AlgorithmClient.jsx
new file mode 100644
index 000000000..6a8530d27
--- /dev/null
+++ b/src/app/visualizer/array/binarysearch/AlgorithmClient.jsx
@@ -0,0 +1,27 @@
+import Animation from "@/app/visualizer/array/binarysearch/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/array/binarysearch/codeBlock";
+import Content from "@/app/visualizer/array/binarysearch/content";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Array", "Binary Search")}
+      title="Binary Search"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[{ text: "Linear Search", url: "./linearsearch" }]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/array/binarysearch/animation.jsx b/src/app/visualizer/array/binarysearch/animation.jsx
new file mode 100644
index 000000000..4485a603f
--- /dev/null
+++ b/src/app/visualizer/array/binarysearch/animation.jsx
@@ -0,0 +1,342 @@
+"use client";
+import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
+import GoButton from "@/app/components/ui/goButton";
+import ResetButton from "@/app/components/ui/resetButton";
+import { saveToStorage, loadFromStorage, removeFromStorage } from "@/utils/storage";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import { binarySearchGenerator } from "@/features/algorithms/array/binarySearchLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+  if (len <= 2) return "text-lg";
+  if (len === 3) return "text-sm";
+  return "text-xs";
+};
+
+const BinarySearch = () => {
+  const [arrayElements, setArrayElements] = useState(() =>
+    loadFromStorage("binary-array-elements", "")
+  );
+  const [target, setTarget] = useState(() =>
+    loadFromStorage("binary-target", "")
+  );
+  const [array, setArray] = useState([]);
+  const [targetValue, setTargetValue] = useState(null);
+
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+  const [autoSort, setAutoSort] = useState(false);
+  const [showAutoSort, setShowAutoSort] = useState(false);
+
+  const [visualState, setVisualState] = useState({
+    i: -1,
+    j: -1,
+    mid: -1,
+    foundIndex: -1,
+    stepExplanation: "",
+    stepCount: 0
+  });
+
+  useEffect(() => { saveToStorage("binary-array-elements", arrayElements); }, [arrayElements]);
+  useEffect(() => { saveToStorage("binary-target", target); }, [target]);
+
+  const steps = useMemo(() => {
+    if (array.length === 0 || targetValue === null) return [];
+    return Array.from(binarySearchGenerator(array, targetValue));
+  }, [array, targetValue]);
+
+  const onStep = useCallback((step) => {
+    let explanation = "";
+    let msg = "";
+    let msgType = "";
+    
+    if (step.type === 'checking') {
+      explanation = `Step ${step.step}: low=${step.l}, high=${step.h} → mid = ⌊(${step.l} + ${step.h}) / 2⌋ = ${step.m}. Comparing arr[${step.m}] = ${step.arrM} with target ${targetValue}.`;
+    } else if (step.type === 'found') {
+      explanation = `✓ arr[${step.m}] = ${targetValue} equals target ${targetValue}. Found at index ${step.m} after ${step.step} step${step.step > 1 ? "s" : ""}!`;
+      msg = `Element ${targetValue} found at index ${step.m}!`;
+      msgType = "success";
+    } else if (step.type === 'discard_left') {
+      explanation = `arr[${step.m}] < target ${targetValue} → target is in the RIGHT half. Discard left side. New low = ${step.m + 1}.`;
+    } else if (step.type === 'discard_right') {
+      explanation = `arr[${step.m}] > target ${targetValue} → target is in the LEFT half. Discard right side. New high = ${step.m - 1}.`;
+    } else if (step.type === 'not_found') {
+      explanation = `Search range exhausted (low > high). The element ${targetValue} does not exist in this array.`;
+      msg = `Element ${targetValue} not found in the array.`;
+      msgType = "error";
+    }
+
+    setVisualState({
+      i: step.l !== undefined ? step.l : -1,
+      j: step.h !== undefined ? step.h : -1,
+      mid: step.m !== undefined ? step.m : -1,
+      foundIndex: step.type === 'found' ? step.m : -1,
+      stepExplanation: explanation,
+      stepCount: step.step || 0
+    });
+    
+    if (msg) setMessage(msg);
+    if (msgType) setMessageType(msgType);
+  }, [targetValue]);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 1000 });
+  const isAnimating = engine.isPlaying || engine.currentStep > 0;
+
+  const handleReset = () => {
+    engine.reset();
+    removeFromStorage("binary-array-elements");
+    removeFromStorage("binary-target");
+    setArray([]); setTargetValue(null);
+    setMessage(""); setMessageType(""); 
+    setVisualState({ i: -1, j: -1, mid: -1, foundIndex: -1, stepExplanation: "", stepCount: 0 });
+    setAutoSort(false); setShowAutoSort(false);
+    setArrayElements(""); setTarget("");
+  };
+
+  const generateRandomArray = () => {
+    if (isAnimating) return;
+    const size = Math.floor(Math.random() * 6) + 5;
+    const elements = Array.from({ length: size }, () =>
+      Math.floor(Math.random() * 100)
+    ).sort((a, b) => a - b);
+    setArrayElements(elements.join(", "));
+  };
+
+  const handleGo = (e) => {
+    e.preventDefault();
+    engine.reset();
+    setMessage(""); setMessageType("");
+    setVisualState({ i: -1, j: -1, mid: -1, foundIndex: -1, stepExplanation: "", stepCount: 0 });
+
+    if (!arrayElements || !target) {
+      setMessage("Please fill in all fields."); setMessageType("warning"); return;
+    }
+    const rawElements = arrayElements.split(",").map((el) => el.trim());
+    if (rawElements.some((el) => el.includes("."))) {
+      setMessage("Only integers are supported. Please remove decimal values."); setMessageType("warning"); return;
+    }
+    const elements = rawElements.map((el) => parseInt(el));
+    const targetVal = parseInt(target);
+    if (elements.some(isNaN) || isNaN(targetVal)) {
+      setMessage("Invalid array elements or target."); setMessageType("warning"); return;
+    }
+    const isSorted = elements.every((el, idx) => idx === 0 || el >= elements[idx - 1]);
+    if (!isSorted && !autoSort) {
+      setMessage("Array must be sorted in ascending order."); setMessageType("warning");
+      setShowAutoSort(true); return;
+    }
+    let processedElements = [...elements];
+    if (!isSorted && autoSort) {  
+      processedElements.sort((a, b) => a - b);
+      setArrayElements(processedElements.join(", "));
+      setShowAutoSort(false);
+    }
+    
+    setTargetValue(targetVal);
+    setArray(processedElements);
+    
+    setTimeout(() => {
+        engine.play();
+    }, 50);
+  };
+
+  useVisualizerKeyboard({
+    onTogglePlayPause: engine.isPlaying ? engine.pause : () => {
+        if (array.length > 0) engine.play();
+    },
+    onStepForward: engine.stepForward,
+    onStepBackward: engine.stepBackward,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+    speed: engine.speed / 1000,
+    sorting: engine.isPlaying,
+    sorted: engine.currentStep === steps.length - 1 && steps.length > 0,
+  });
+
+  const messageClass =
+    messageType === "success"
+      ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
+      : messageType === "warning"
+      ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
+      : "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200";
+
+  return (
+    <main className="container mx-auto">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Visualize how Binary Search efficiently finds an element in a sorted array.
+      </p>
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8"
+      >
+        <div className="mb-4">
+          <label className="block text-gray-700 dark:text-gray-300 mb-2" htmlFor="arrayElements">
+            Sorted Array Elements (comma-separated)
+          </label>
+          <div className="flex gap-2">
+            <input
+              type="text"
+              id="arrayElements"
+              value={arrayElements}
+              onChange={(e) => setArrayElements(e.target.value)}
+              className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#a435f0] focus:outline-none focus:ring-2 focus:ring-[#a435f0]/30 transition duration-300"
+              placeholder="e.g., 1, 3, 4, 6, 8"
+              disabled={isAnimating}
+            />
+            <button
+              type="button"
+              onClick={generateRandomArray}
+              className="px-4 py-2 font-bold bg-[#a435f0] text-white rounded-lg hover:bg-[#8f2cd6] transition-all duration-200"
+              disabled={isAnimating}
+            >
+              Random
+            </button>
+          </div>
+        </div>
+        <div className="mb-4">
+          <label className="block text-gray-700 dark:text-gray-300 mb-2" htmlFor="target">
+            Target Element
+          </label>
+          <div className="flex flex-col sm:flex-row sm:items-end gap-4">
+            <input
+              type="number"
+              id="target"
+              value={target}
+              onChange={(e) => setTarget(e.target.value)}
+              className="w-full sm:max-w-xs p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#a435f0] focus:outline-none focus:ring-2 focus:ring-[#a435f0]/30 transition duration-300"
+              placeholder="eg. 4"
+              disabled={isAnimating}
+            />
+            <div className="flex gap-2 w-full">
+              <GoButton onClick={handleGo} isAnimating={isAnimating} disabled={isAnimating} />
+              <ResetButton onReset={handleReset} isAnimating={isAnimating} />
+            </div>
+          </div>
+        </div>
+
+        {isAnimating && (
+          <div className="mt-4">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={engine.isPlaying ? engine.pause : () => engine.play()}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={engine.reset}
+              onExplainStep={() => {}}
+              disabled={steps.length === 0}
+              progressText={`${Math.max(engine.currentStep + 1, 0)} / ${steps.length}`}
+            />
+          </div>
+        )}
+      </form>
+
+      {message && (
+        <div className={`max-w-3xl mx-auto mb-8 p-4 rounded-lg ${messageClass}`}>
+          <p className="text-center font-medium">{message}</p>
+          {showAutoSort && (
+            <div className="mt-3 flex justify-center">
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={autoSort}
+                  onChange={(e) => setAutoSort(e.target.checked)}
+                />
+                <span>Auto-sort the array for me</span>
+              </label>
+            </div>
+          )}
+        </div>
+      )}
+
+      {array.length > 0 && (
+        <div className="max-w-4xl mx-auto space-y-6">
+          {visualState.stepExplanation && (
+            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+              <div className="flex items-center gap-2 bg-[#a435f0]/10 dark:bg-[#a435f0]/20 px-4 py-2 border-b border-[#a435f0]/20">
+                <span className="w-2 h-2 rounded-full bg-[#a435f0] animate-pulse"></span>
+                <span className="text-sm font-semibold text-[#a435f0] dark:text-[#c56eff] uppercase tracking-wide">
+                  Step Explanation
+                </span>
+                {visualState.stepCount > 0 && (
+                  <span className="ml-auto text-xs text-gray-500 dark:text-gray-400">
+                    Iteration #{visualState.stepCount}
+                  </span>
+                )}
+              </div>
+              <div className="px-4 py-3">
+                <p className="text-gray-700 dark:text-gray-200 text-sm leading-relaxed font-mono">
+                  {visualState.stepExplanation}
+                </p>
+              </div>
+              <div className="px-4 py-2 bg-gray-50 dark:bg-gray-900/50 border-t border-gray-100 dark:border-gray-700 flex flex-wrap gap-4 text-xs text-gray-500 dark:text-gray-400">
+                <span><span className="font-semibold text-yellow-600 dark:text-yellow-400">■ Yellow</span> = mid index</span>
+                <span><span className="font-semibold text-primary dark:text-[#c27cf7]">■ Blue</span> = active search range</span>
+                <span><span className="font-semibold text-gray-400">■ Gray</span> = eliminated</span>
+                <span><span className="font-semibold text-green-500">■ Green</span> = found</span>
+              </div>
+            </div>
+          )}
+          <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
+            <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-6 text-center">
+              Array Visualization
+            </h2>
+            <div className="flex flex-wrap gap-4 justify-center">
+              {array.map((element, index) => {
+                const labels = [];
+                if (index === visualState.i) labels.push("low");
+                if (index === visualState.mid) labels.push("mid");
+                if (index === visualState.j) labels.push("high");
+                
+                let bgColor = "bg-[#E5E7EB] dark:bg-gray-700";
+                let borderColor = "border-[#D1D5DB] dark:border-gray-600";
+                
+                if (index === visualState.foundIndex) {
+                  bgColor = "bg-[#22C55E]";
+                  borderColor = "border-[#15803D]";
+                } else if (index === visualState.mid) {
+                  bgColor = "bg-[#EAB308]";
+                  borderColor = "border-[#A16207]";
+                } else if (visualState.i !== -1 && visualState.j !== -1 && index >= visualState.i && index <= visualState.j) {
+                  bgColor = "bg-[#93C5FD]";
+                  borderColor = "border-[#3B82F6]";
+                }
+
+                return (
+                  <div key={index} className="flex flex-col items-center">
+                    <div
+                      className={`w-16 h-16 flex items-center justify-center rounded-lg border-2 transition-all duration-300 ${getFontSize(element)} font-medium ${bgColor} ${borderColor}`}
+                    >
+                      {element}
+                    </div>
+                    <div className="mt-1 text-xs text-gray-600 dark:text-gray-400 text-center font-mono h-6">
+                      {labels.map((label, idx) => (
+                        <div
+                          key={idx}
+                          className={
+                            label === "mid"
+                              ? "text-yellow-600 dark:text-yellow-400 font-semibold"
+                              : label === "low" || label === "high"
+                              ? "text-primary dark:text-[#c27cf7] font-semibold"
+                              : ""
+                          }
+                        >
+                          {label}
+                        </div>
+                      ))}
+                      <div className="text-gray-400 dark:text-gray-600 text-[10px]">[{index}]</div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+    </main>
+  );
+};
+
+export default BinarySearch;
\ No newline at end of file
diff --git a/src/app/visualizer/array/binarysearch/codeBlock.jsx b/src/app/visualizer/array/binarysearch/codeBlock.jsx
new file mode 100644
index 000000000..9bcef9ee3
--- /dev/null
+++ b/src/app/visualizer/array/binarysearch/codeBlock.jsx
@@ -0,0 +1,159 @@
+'use client';
+import CodeBlock from '@/app/components/ui/CodeBlock';
+
+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;
+}`,
+};
+
+const fileNames = {
+  javascript: 'binarySearch.js',
+  python: 'binary_search.py',
+  java: 'BinarySearch.java',
+  c: 'binary_search.c',
+  cpp: 'binary_search.cpp',
+};
+
+const BinarySearchCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default BinarySearchCode;
\ No newline at end of file
diff --git a/src/app/visualizer/array/binarysearch/content.jsx b/src/app/visualizer/array/binarysearch/content.jsx
new file mode 100644
index 000000000..4b616535f
--- /dev/null
+++ b/src/app/visualizer/array/binarysearch/content.jsx
@@ -0,0 +1,193 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState('light');
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraphs = [
+    `Binary Search is an efficient algorithm for finding an item in a sorted list. It works by repeatedly dividing the search interval in half. If the target value is less than the middle element, the search continues in the lower half. Otherwise, it continues in the upper half. This process repeats until the value is found.`,
+    `If the number is not in the list (e.g., searching for 8), the search ends when the subarray becomes empty.`,
+    `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 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" },
+  ];
+
+  const steps = [
+    { points: "Start with the entire sorted array" },
+    {
+      points: "Compare the target with the middle element:",
+      subpoints: [
+        "If equal, return the position",
+        "If target is smaller, search the left half",
+        "If target is larger, search the right half",
+      ],
+    },
+    { points: "Repeat until the element is found or the subarray is empty" },
+    { points: 'If not found, return "Not Found"' },
+  ];
+
+  const complexity = [
+    { points: "Best Case: Target is the middle element → O(1)." },
+    {
+      points:
+        "Worst Case: Element not present → O(log n) (halves search space each step).",
+    },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is Binary Search */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: '-0.03em' }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is Binary Search?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* How Does It Work */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: '-0.03em' }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            How Does It Work?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Imagine you have a sorted list of numbers: [1, 3, 5, 7, 9, 11, 13]
+              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">
+              <li className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                Compare 7 with the middle element (7). It matches! Return the
+                position.
+              </li>
+              <li className="text-[#374151] dark:text-[#d1d5db] 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">
+                  {searching.map((item, index) => (
+                    <li
+                      key={index}
+                      className="text-[#6b7280] dark:text-[#9ca3af]"
+                    >
+                      {item.points}
+                    </li>
+                  ))}
+                </ul>
+              </li>
+            </ol>
+
+            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+              {paragraphs[1]}
+            </p>
+          </div>
+        </section>
+
+        {/* Algorithm Steps */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: '-0.03em' }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Algorithm Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {steps.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                  {item.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.subpoints.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: '-0.03em' }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {complexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                    {item.points.split(":")[0]}:
+                  </span>
+                  <span className="ml-2">{item.points.split(":")[1]}</span>
+                </li>
+              ))}
+            </ul>
+
+            <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => 1}
+                averageCase={(n) => Math.log2(n)}
+                worstCase={(n) => Math.log2(n)}
+                maxN={25}
+              />
+            </div>
+
+            <div className="mt-6 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraphs[2]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+
+
+    </main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/array/binarysearch/quiz.jsx b/src/app/visualizer/array/binarysearch/quiz.jsx
new file mode 100644
index 000000000..833d795f8
--- /dev/null
+++ b/src/app/visualizer/array/binarysearch/quiz.jsx
@@ -0,0 +1,232 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const BinarySearchQuiz = () => {
+  const questions = [
+    {
+      question: "What is the primary requirement for binary search to work?",
+      options: [
+        "The list must be unsorted",
+        "The list must be sorted",
+        "The list must contain only numbers",
+        "The list must be small in size"
+      ],
+      correctAnswer: 1,
+      explanation: "Binary search requires the list to be sorted beforehand because it relies on comparing the target value to the middle element to determine which half of the list to search next."
+    },
+    {
+      question: "What is the time complexity of binary search in the worst case?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 1,
+      explanation: "In the worst case (when the target is not present), binary search has a time complexity of O(log n) because it halves the search space with each comparison."
+    },
+    {
+      question: "In the array [1, 3, 5, 7, 9, 11, 13], how many comparisons are needed to find the number 5?",
+      options: [
+        "1",
+        "2",
+        "3",
+        "4"
+      ],
+      correctAnswer: 2,
+      explanation: "First comparison: middle is 7 (too high). Second comparison: new middle is 3 (too low). Third comparison: finds 5."
+    },
+    {
+      question: "What is the best-case scenario for binary search?",
+      options: [
+        "Target is at the beginning of the list",
+        "Target is at the end of the list",
+        "Target is the middle element",
+        "Target is not in the list"
+      ],
+      correctAnswer: 2,
+      explanation: "The best case occurs when the target is the middle element of the array, requiring only one comparison (O(1))."
+    },
+    {
+      question: "What would binary search return if the target value is not in the list?",
+      options: [
+        "The first element",
+        "The last element",
+        "An error message",
+        "A 'not found' indication"
+      ],
+      correctAnswer: 3,
+      explanation: "When the target isn't found, binary search typically returns a special value (like -1 or 'not found') to indicate this."
+    },
+    {
+  question: "Why is binary search faster than linear search for large sorted arrays?",
+  options: [
+    "It checks every element",
+    "It divides the search space in half each step",
+    "It uses recursion only",
+    "It sorts the array during searching"
+  ],
+  correctAnswer: 1,
+  explanation: "Binary search halves the remaining search space after every comparison, resulting in O(log n) time complexity."
+},
+{
+  question: "Which data structure is most suitable for binary search?",
+  options: [
+    "Unsorted Array",
+    "Sorted Array",
+    "Queue",
+    "Graph"
+  ],
+  correctAnswer: 1,
+  explanation: "Binary search requires the data to be sorted so that half of the search space can be discarded after each comparison."
+},
+{
+  question: "If a sorted array has 16 elements, what is the maximum number of comparisons needed in binary search?",
+  options: [
+    "4",
+    "8",
+    "16",
+    "5"
+  ],
+  correctAnswer: 0,
+  explanation: "Since log₂(16) = 4, binary search requires at most 4 comparisons in the ideal implementation."
+},
+{
+  question: "What happens if binary search is applied to an unsorted array?",
+  options: [
+    "It always works correctly",
+    "It may return incorrect results",
+    "It sorts the array automatically",
+    "It becomes O(1)"
+  ],
+  correctAnswer: 1,
+  explanation: "Binary search assumes the array is sorted. On unsorted data, the search decisions become invalid."
+},
+{
+  question: "Which algorithm generally performs better on large sorted datasets?",
+  options: [
+    "Linear Search",
+    "Binary Search",
+    "Bubble Sort",
+    "Selection Sort"
+  ],
+  correctAnswer: 1,
+  explanation: "Binary Search has O(log n) complexity, making it much faster than Linear Search on large sorted datasets."
+},
+{
+  question: "Which of the following is a prerequisite before performing binary search?",
+  options: [
+    "The array must be sorted",
+    "The array must have unique elements",
+    "The array must be reversed",
+    "The array must contain integers only"
+  ],
+  correctAnswer: 0,
+  explanation: "Binary search works correctly only on sorted data because it eliminates half of the search space based on ordering."
+},
+{
+  question: "What is the space complexity of an iterative binary search?",
+  options: [
+    "O(1)",
+    "O(log n)",
+    "O(n)",
+    "O(n²)"
+  ],
+  correctAnswer: 0,
+  explanation: "An iterative implementation uses only a few variables, resulting in O(1) auxiliary space."
+},
+{
+  question: "What is the space complexity of a recursive binary search?",
+  options: [
+    "O(1)",
+    "O(log n)",
+    "O(n)",
+    "O(n log n)"
+  ],
+  correctAnswer: 1,
+  explanation: "Recursive binary search requires O(log n) stack space due to recursive function calls."
+},
+{
+  question: "How is the middle index commonly calculated to avoid integer overflow?",
+  options: [
+    "(low + high) / 2",
+    "low + (high - low) / 2",
+    "(high - low) / 2",
+    "high / 2"
+  ],
+  correctAnswer: 1,
+  explanation: "Using low + (high - low) / 2 prevents potential integer overflow when low and high are large values."
+},
+{
+  question: "What should happen if the middle element is greater than the target?",
+  options: [
+    "Search the right half",
+    "Stop searching",
+    "Search the left half",
+    "Restart the search"
+  ],
+  correctAnswer: 2,
+  explanation: "If the middle element is greater than the target, the target can only exist in the left half of the sorted array."
+},
+{
+  question: "What should happen if the middle element is smaller than the target?",
+  options: [
+    "Search the left half",
+    "Search the right half",
+    "Return the middle element",
+    "Sort the array again"
+  ],
+  correctAnswer: 1,
+  explanation: "If the middle element is smaller than the target, the search continues in the right half."
+},
+{
+  question: "Which searching algorithm is generally preferred for small unsorted arrays?",
+  options: [
+    "Binary Search",
+    "Jump Search",
+    "Linear Search",
+    "Interpolation Search"
+  ],
+  correctAnswer: 2,
+  explanation: "Linear search is suitable for small or unsorted arrays because it does not require sorting."
+},
+{
+  question: "What is the maximum number of comparisons needed to search 32 sorted elements using binary search?",
+  options: [
+    "4",
+    "5",
+    "6",
+    "32"
+  ],
+  correctAnswer: 1,
+  explanation: "Since log₂(32) = 5, binary search requires at most 5 comparisons."
+},
+{
+  question: "If the target element equals the middle element, what does binary search do?",
+  options: [
+    "Continue searching both halves",
+    "Return the index immediately",
+    "Restart the search",
+    "Move to the next element"
+  ],
+  correctAnswer: 1,
+  explanation: "Once the target matches the middle element, binary search terminates and returns its index."
+},
+{
+  question: "Which real-world application commonly uses binary search?",
+  options: [
+    "Searching words in a sorted dictionary",
+    "Sorting files alphabetically",
+    "Drawing graphics",
+    "Compressing images"
+  ],
+  correctAnswer: 0,
+  explanation: "Searching a word in a sorted dictionary is a classic application of binary search because the search space is repeatedly divided in half."
+}
+  ];
+
+  return <QuizEngine title="Binary Search Quiz Challenge" questions={questions} />;
+};
+
+export default BinarySearchQuiz;
diff --git a/src/app/visualizer/array/binarysearch/quiz/page.jsx b/src/app/visualizer/array/binarysearch/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/array/binarysearch/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/bubblesort/AlgorithmClient.jsx b/src/app/visualizer/array/bubblesort/AlgorithmClient.jsx
new file mode 100644
index 000000000..a0f1c0cac
--- /dev/null
+++ b/src/app/visualizer/array/bubblesort/AlgorithmClient.jsx
@@ -0,0 +1,30 @@
+import Animation from "@/app/visualizer/array/bubblesort/animation";
+import Content from "@/app/visualizer/array/bubblesort/content";
+import Code from "@/app/visualizer/array/bubblesort/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import TrackVisit from "@/app/components/ui/TrackVisit";
+import VisualizerPageLayout, { createVisualizerPaths } from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function Page() {
+  return (
+    <>
+      <TrackVisit name="Bubble Sort" path="/visualizer/array/bubblesort" category="Sorting" />
+      <VisualizerPageLayout
+        paths={createVisualizerPaths("Array", "Bubble Sort")}
+        title="Bubble Sort"
+        animation={<Animation />}
+        content={<Content />}
+        code={<Code />}
+        exploreOther={<ExploreOther title="Explore Sorting Algorithms" links={[
+          { text: "Selection Sort", url: "/visualizer/array/selectionsort" },
+          { text: "Insertion Sort", url: "/visualizer/array/insertionsort" },
+          { text: "Merge Sort", url: "/visualizer/array/mergesort" },
+          { text: "Quick Sort", url: "/visualizer/array/quicksort" },
+          { text: "Comparison Mode", url: "/visualizer/array/comparison" },
+          { text: "Counting Sort", url: "/visualizer/array/countingsort" },
+          { text: "Heap Sort", url: "/visualizer/array/heapsort" },
+        ]} />}
+      />
+    </>
+  );
+}
diff --git a/src/app/visualizer/array/bubblesort/CodeExplanationPanel.jsx b/src/app/visualizer/array/bubblesort/CodeExplanationPanel.jsx
new file mode 100644
index 000000000..0c9da04a9
--- /dev/null
+++ b/src/app/visualizer/array/bubblesort/CodeExplanationPanel.jsx
@@ -0,0 +1,109 @@
+"use client";
+import { useState } from "react";
+
+const BUBBLE_SORT_STEPS = {
+  init: {
+    explanation: "Bubble Sort shuru ho raha hai. Array ko sort karna start karenge.",
+    variables: {},
+  },
+  phase_start: (p) => ({
+    explanation: `Pass ${p.pass} of ${p.totalPasses} — Aaj hum array ko ek baar pura traverse karenge.`,
+    variables: { pass: p.pass },
+  }),
+  comparing: (p) => ({
+    explanation: `Index ${p.j} aur ${p.jNext} ko compare kar rahe hain. Kya arr[${p.j}] > arr[${p.jNext}]?`,
+    variables: { i: p.j, j: p.jNext, "arr[i]": p.arr[p.j], "arr[j]": p.arr[p.jNext], comparisons: p.comparisons },
+  }),
+  swap_needed: (p) => ({
+    explanation: `arr[${p.j}] (${p.arr[p.j]}) bada hai arr[${p.jNext}] (${p.arr[p.jNext]}) se — Swap hoga!`,
+    variables: { swapping: `${p.arr[p.j]} ↔ ${p.arr[p.jNext]}`, swaps: p.swaps },
+  }),
+  swapped: (p) => ({
+    explanation: `Swap ho gaya! ${p.arr[p.j]} aur ${p.arr[p.jNext]} ki positions badal gayi.`,
+    variables: { swaps: p.swaps, array: `[${p.arr.join(", ")}]` },
+  }),
+  no_swap: (p) => ({
+    explanation: `arr[${p.j}] (${p.arr[p.j]}) already chhota hai — Koi swap nahi.`,
+    variables: { comparisons: p.comparisons },
+  }),
+  sorted_element: (p) => ({
+    explanation: `Index ${p.index} ka element sort ho gaya aur apni sahi jagah aa gaya! ✅`,
+    variables: { sorted_index: p.index, value: p.arr[p.index] },
+  }),
+  early_completion: {
+    explanation: "Koi swap nahi hua is pass mein — Array already sorted hai! Early exit. 🎉",
+    variables: {},
+  },
+  completed: (p) => ({
+    explanation: `Sort complete! Total ${p.comparisons} comparisons aur ${p.swaps} swaps lage. 🎊`,
+    variables: { final_array: `[${p.arr.join(", ")}]`, comparisons: p.comparisons, swaps: p.swaps },
+  }),
+};
+
+function getStepInfo(frame) {
+  if (!frame) return { explanation: "Visualization shuru karo explanation dekhne ke liye.", variables: {} };
+  const handler = BUBBLE_SORT_STEPS[frame.type];
+  if (!handler) return { explanation: `Step: ${frame.type}`, variables: {} };
+  if (typeof handler === "function") return handler(frame.payload || {});
+  return handler;
+}
+
+export default function CodeExplanationPanel({ currentFrame }) {
+  const [isOpen, setIsOpen] = useState(true);
+  const { explanation, variables } = getStepInfo(currentFrame);
+
+  return (
+    <div className="w-full border border-gray-200 rounded-xl overflow-hidden shadow-sm bg-white dark:bg-gray-900 dark:border-gray-700">
+      {/* Header */}
+      <div
+        className="flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-gray-800 cursor-pointer"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <div className="flex items-center gap-2">
+          <span className="text-lg">📖</span>
+          <span className="font-semibold text-gray-800 dark:text-gray-100 text-sm">
+            Code Explanation
+          </span>
+        </div>
+        <span className="text-gray-500 text-xs">{isOpen ? "▲ Hide" : "▼ Show"}</span>
+      </div>
+
+      {/* Body */}
+      {isOpen && (
+        <div className="p-4 space-y-4">
+          {/* Explanation */}
+          <div className="bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
+            <p className="text-xs font-semibold text-blue-600 dark:text-blue-400 mb-1">
+              💡 What's happening?
+            </p>
+            <p className="text-sm text-gray-700 dark:text-gray-200">{explanation}</p>
+          </div>
+
+          {/* Variable Tracker */}
+          {Object.keys(variables).length > 0 && (
+            <div>
+              <p className="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2">
+                📊 Variable State
+              </p>
+              <div className="grid grid-cols-2 gap-2">
+                {Object.entries(variables).map(([key, val]) => (
+                  <div
+                    key={key}
+                    className="bg-gray-100 dark:bg-gray-800 rounded-lg px-3 py-2 flex justify-between items-center"
+                  >
+                    <span className="text-xs font-mono text-purple-600 dark:text-purple-400">
+                      {key}
+                    </span>
+                    <span className="text-xs font-mono text-gray-800 dark:text-gray-200 font-bold">
+                      {String(val)}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/bubblesort/analysis/page.jsx b/src/app/visualizer/array/bubblesort/analysis/page.jsx
new file mode 100644
index 000000000..6b66a842b
--- /dev/null
+++ b/src/app/visualizer/array/bubblesort/analysis/page.jsx
@@ -0,0 +1,242 @@
+"use client";
+import { useState } from "react";
+import {
+  LineChart, Line, XAxis, YAxis, CartesianGrid,
+  Tooltip, Legend, ResponsiveContainer
+} from "recharts";
+
+const runBubbleSort = (inputArr) => {
+  const arr = [...inputArr];
+  let comparisons = 0, swaps = 0, accesses = 0;
+  const log = [];
+  const n = arr.length;
+  for (let i = 0; i < n - 1; i++) {
+    let swapped = false;
+    for (let j = 0; j < n - i - 1; j++) {
+      accesses += 2;
+      comparisons++;
+      log.push({ step: comparisons, action: `Compare arr[${j}]=${arr[j]} & arr[${j+1}]=${arr[j+1]}`, pass: i + 1 });
+      if (arr[j] > arr[j + 1]) {
+        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
+        swaps++;
+        accesses += 2;
+        swapped = true;
+        log.push({ step: comparisons, action: `Swap → arr[${j}]=${arr[j]}, arr[${j+1}]=${arr[j+1]}`, pass: i + 1 });
+      }
+    }
+    if (!swapped) break;
+  }
+  return { comparisons, swaps, accesses, total: comparisons + swaps, log };
+};
+
+const generateArr = (size, pattern) => {
+  const arr = Array.from({ length: size }, () => Math.floor(Math.random() * 100) + 1);
+  if (pattern === "sorted") return arr.sort((a, b) => a - b);
+  if (pattern === "reverse") return arr.sort((a, b) => b - a);
+  if (pattern === "nearly") {
+    const s = arr.sort((a, b) => a - b);
+    const swaps = Math.max(1, Math.floor(size * 0.1));
+    for (let k = 0; k < swaps; k++) {
+      const i = Math.floor(Math.random() * size);
+      const j = Math.floor(Math.random() * size);
+      [s[i], s[j]] = [s[j], s[i]];
+    }
+    return s;
+  }
+  return arr;
+};
+
+const PATTERNS = ["random", "sorted", "reverse", "nearly"];
+const PATTERN_LABELS = {
+  random: "🎲 Random (Avg)",
+  sorted: "✅ Sorted (Best)",
+  reverse: "❌ Reverse (Worst)",
+  nearly: "〰️ Nearly Sorted",
+};
+
+export default function BubbleSortAnalysisDashboard() {
+  const [arraySize, setArraySize] = useState(20);
+  const [results, setResults] = useState(null);
+  const [graphData, setGraphData] = useState([]);
+  const [log, setLog] = useState([]);
+  const [activePattern, setActivePattern] = useState("random");
+
+  const runAnalysis = () => {
+    const caseResults = {};
+    PATTERNS.forEach((p) => {
+      const arr = generateArr(arraySize, p);
+      caseResults[p] = runBubbleSort(arr);
+    });
+    setResults(caseResults);
+    setLog(caseResults["random"].log);
+    setActivePattern("random");
+
+    const sizes = [5, 10, 15, 20, 30, 40, 50];
+    const data = sizes.map((s) => {
+      const r = runBubbleSort(generateArr(s, "reverse"));
+      const b = runBubbleSort(generateArr(s, "sorted"));
+      return {
+        size: s,
+        worstCase: r.comparisons,
+        bestCase: b.comparisons,
+        theoretical_n2: Math.round(s * (s - 1) / 2),
+        theoretical_n: s - 1,
+      };
+    });
+    setGraphData(data);
+  };
+
+  const exportJSON = () => {
+    if (!results) return;
+    const blob = new Blob([JSON.stringify(results, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "bubble_sort_analysis.json";
+    a.click();
+  };
+
+  const exportCSV = () => {
+    if (!results) return;
+    const rows = [["Pattern", "Comparisons", "Swaps", "Array Accesses", "Total Operations"]];
+    PATTERNS.forEach((p) => {
+      const r = results[p];
+      rows.push([PATTERN_LABELS[p], r.comparisons, r.swaps, r.accesses, r.total]);
+    });
+    const csv = rows.map((r) => r.join(",")).join("\n");
+    const blob = new Blob([csv], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "bubble_sort_analysis.csv";
+    a.click();
+  };
+
+  const worstComparisons = results?.reverse?.comparisons || 1;
+
+  return (
+    <div className="container mx-auto px-4 py-8 max-w-5xl">
+      <h1 className="text-2xl font-bold text-center mb-2 text-[#a435f0]">
+        📊 Bubble Sort Analysis Dashboard
+      </h1>
+      <p className="text-center text-gray-500 dark:text-gray-400 mb-6 text-sm">
+        Track operations, compare best/worst cases, and visualize performance
+      </p>
+
+      {/* Controls */}
+      <div className="bg-white dark:bg-neutral-900 rounded-lg p-4 border border-gray-200 dark:border-gray-700 mb-6 flex flex-wrap gap-4 items-center">
+        <div>
+          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            Array Size: <strong>{arraySize}</strong>
+          </label>
+          <input
+            type="range" min={5} max={50} value={arraySize}
+            onChange={(e) => setArraySize(Number(e.target.value))}
+            className="block w-40 mt-1"
+          />
+        </div>
+        <button
+          onClick={runAnalysis}
+          className="bg-[#a435f0] hover:bg-[#8f2cd6] text-white px-6 py-2 rounded font-medium transition-colors"
+        >
+          ▶ Run Analysis
+        </button>
+        <button
+          onClick={exportJSON} disabled={!results}
+          className="border border-[#a435f0] text-[#a435f0] hover:bg-purple-50 dark:hover:bg-purple-900/20 px-4 py-2 rounded disabled:opacity-40 transition-colors"
+        >
+          ⬇ JSON
+        </button>
+        <button
+          onClick={exportCSV} disabled={!results}
+          className="border border-[#a435f0] text-[#a435f0] hover:bg-purple-50 dark:hover:bg-purple-900/20 px-4 py-2 rounded disabled:opacity-40 transition-colors"
+        >
+          ⬇ CSV
+        </button>
+      </div>
+
+      {results && (
+        <>
+          {/* Case Comparison Cards */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
+            {PATTERNS.map((p) => {
+              const r = results[p];
+              const efficiency = Math.round((1 - r.comparisons / worstComparisons) * 100);
+              return (
+                <div
+                  key={p}
+                  onClick={() => { setActivePattern(p); setLog(results[p].log); }}
+                  className={`cursor-pointer rounded-lg p-3 border-2 transition-all ${
+                    activePattern === p
+                      ? "border-[#a435f0] bg-purple-50 dark:bg-purple-900/20"
+                      : "border-gray-200 dark:border-gray-700 bg-white dark:bg-neutral-900"
+                  }`}
+                >
+                  <div className="text-xs font-medium text-gray-500 mb-1">{PATTERN_LABELS[p]}</div>
+                  <div className="text-lg font-bold text-[#a435f0]">{r.comparisons}</div>
+                  <div className="text-xs text-gray-500">comparisons</div>
+                  <div className="text-sm mt-1">🔁 {r.swaps} swaps</div>
+                  <div className="text-sm">👁 {r.accesses} accesses</div>
+                  <div className="mt-2">
+                    <div className="text-xs text-gray-500 mb-1">Efficiency vs Worst</div>
+                    <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+                      <div
+                        className="bg-[#a435f0] h-2 rounded-full transition-all"
+                        style={{ width: `${Math.max(efficiency, 0)}%` }}
+                      />
+                    </div>
+                    <div className="text-xs text-right mt-1 font-medium">{Math.max(efficiency, 0)}%</div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Performance Graph */}
+          <div className="bg-white dark:bg-neutral-900 rounded-lg p-4 border border-gray-200 dark:border-gray-700 mb-6">
+            <h2 className="font-semibold mb-4">📈 Operations vs Array Size</h2>
+            <ResponsiveContainer width="100%" height={250}>
+              <LineChart data={graphData}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="size" label={{ value: "Array Size", position: "insideBottom", offset: -2 }} />
+                <YAxis />
+                <Tooltip />
+                <Legend />
+                <Line type="monotone" dataKey="worstCase" stroke="#ef4444" name="Worst Case" strokeWidth={2} />
+                <Line type="monotone" dataKey="bestCase" stroke="#22c55e" name="Best Case" strokeWidth={2} />
+                <Line type="monotone" dataKey="theoretical_n2" stroke="#f97316" name="O(n²)" strokeDasharray="5 5" />
+                <Line type="monotone" dataKey="theoretical_n" stroke="#6366f1" name="O(n)" strokeDasharray="5 5" />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+
+          {/* Operations Log */}
+          <div className="bg-white dark:bg-neutral-900 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
+            <h2 className="font-semibold mb-3">📋 Operations Log — {PATTERN_LABELS[activePattern]}</h2>
+            <div className="max-h-60 overflow-y-auto text-xs font-mono space-y-1">
+              {log.map((entry, i) => (
+                <div
+                  key={i}
+                  className={`p-1 rounded ${
+                    entry.action.includes("Swap")
+                      ? "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400"
+                      : "bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300"
+                  }`}
+                >
+                  <span className="text-gray-400 mr-2">Pass {entry.pass} |</span>
+                  {entry.action}
+                </div>
+              ))}
+            </div>
+          </div>
+        </>
+      )}
+
+      {!results && (
+        <div className="text-center py-16 text-gray-400">
+          Click <strong>&quot;Run Analysis&quot;</strong> to start the dashboard
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/bubblesort/animation.jsx b/src/app/visualizer/array/bubblesort/animation.jsx
new file mode 100644
index 000000000..36e1ed677
--- /dev/null
+++ b/src/app/visualizer/array/bubblesort/animation.jsx
@@ -0,0 +1,472 @@
+"use client";
+import React, { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import { gsap } from "gsap";
+import ArrayGenerator from "@/app/components/ui/randomArray";
+import CustomArrayInput from "@/app/components/ui/customArrayInput";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import ChallengeModePanel, {
+  createOptions,
+  useSortingChallenge,
+} from "@/app/visualizer/array/components/ChallengeMode";
+import { bubbleSortGenerator } from "@/features/algorithms/array/bubbleSortLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import CodeExplanationPanel from "./CodeExplanationPanel";
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+  if (len <= 2) return "text-lg";
+  if (len === 3) return "text-sm";
+  return "text-xs";
+};
+
+const generatePatternArray = (pattern, size = 20) => {
+  const arr = Array.from({ length: size }, () => Math.floor(Math.random() * 90) + 10);
+  switch (pattern) {
+    case "sorted":
+      return [...arr].sort((a, b) => a - b);
+    case "reverse":
+      return [...arr].sort((a, b) => b - a);
+    case "nearly": {
+      const s = [...arr].sort((a, b) => a - b);
+      for (let k = 0; k < Math.floor(size * 0.1); k++) {
+        const x = Math.floor(Math.random() * size);
+        const y = Math.floor(Math.random() * size);
+        [s[x], s[y]] = [s[y], s[x]];
+      }
+      return s;
+    }
+    case "duplicates":
+      return Array.from({ length: size }, () => [10, 20, 30, 40, 50][Math.floor(Math.random() * 5)]);
+    default:
+      return arr;
+  }
+};
+
+const createBubbleSwapQuestion = (arr, j) => {
+  const correctLabel = `${arr[j]} and ${arr[j + 1]} (indices ${j} and ${j + 1})`;
+  const options = createOptions(correctLabel, [
+    j > 0 ? `${arr[j - 1]} and ${arr[j]} (indices ${j - 1} and ${j})` : null,
+    j + 2 < arr.length ? `${arr[j + 1]} and ${arr[j + 2]} (indices ${j + 1} and ${j + 2})` : null,
+    "No swap will happen",
+  ]);
+  return {
+    prompt: "Which two elements will swap next?",
+    options,
+    correctOptionId: "correct",
+    explanation: `${arr[j]} is greater than ${arr[j + 1]}, so Bubble Sort swaps adjacent indices ${j} and ${j + 1}.`,
+  };
+};
+
+const precomputeSteps = (inputArray) => {
+  const steps = [];
+  const generator = bubbleSortGenerator(inputArray);
+  for (const frame of generator) {
+    const { type, payload } = frame;
+    if (type === "init") {
+      steps.push({
+        array: inputArray,
+        comparisons: 0, swaps: 0, currentStep: 0,
+        currentIndices: { i: -1, j: -1 },
+        currentPhase: "", stepExplanation: "Starting Bubble Sort...",
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === "phase_start") {
+      steps.push({
+        array: payload.arr,
+        comparisons: payload.comparisons, swaps: payload.swaps,
+        currentStep: payload.step,
+        currentIndices: { i: payload.j, j: payload.jNext },
+        currentPhase: `Pass ${payload.pass} of ${payload.totalPasses}`,
+        stepExplanation: `Starting pass ${payload.pass}, comparing adjacent elements.`,
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === "comparing") {
+      steps.push({
+        array: payload.arr,
+        comparisons: payload.comparisons, swaps: payload.swaps,
+        currentStep: payload.step,
+        currentIndices: { i: payload.j, j: payload.jNext },
+        currentPhase: payload.currentPhase || steps[steps.length - 1]?.currentPhase || "",
+        stepExplanation: `Comparing ${payload.arr[payload.j]} and ${payload.arr[payload.jNext]} at indices ${payload.j} and ${payload.jNext}.`,
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === "swap_needed") {
+      const prev = steps[steps.length - 1] || {};
+      steps.push({
+        array: payload.arr,
+        comparisons: payload.comparisons, swaps: payload.swaps,
+        currentStep: payload.step,
+        currentIndices: { i: payload.j, j: payload.jNext },
+        currentPhase: prev.currentPhase || "",
+        stepExplanation: `Since ${payload.arr[payload.j]} > ${payload.arr[payload.jNext]}, swapping elements at indices ${payload.j} and ${payload.jNext}.`,
+        sorted: false, totalSteps: payload.totalSteps,
+        isSwap: true, swapJ: payload.j,
+      });
+    } else if (type === "swapped") {
+      steps.push({
+        array: payload.arr,
+        comparisons: payload.comparisons, swaps: payload.swaps,
+        currentStep: payload.step,
+        currentIndices: { i: -1, j: -1 },
+        currentPhase: steps[steps.length - 1]?.currentPhase || "",
+        stepExplanation: `Swapped. Array state: [${payload.arr.join(", ")}]`,
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === "no_swap") {
+      steps.push({
+        array: payload.arr,
+        comparisons: payload.comparisons, swaps: payload.swaps,
+        currentStep: payload.step,
+        currentIndices: { i: -1, j: -1 },
+        currentPhase: steps[steps.length - 1]?.currentPhase || "",
+        stepExplanation: `No swap needed between ${payload.arr[payload.j]} and ${payload.arr[payload.jNext]}.`,
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === "early_completion") {
+      const prev = steps[steps.length - 1] || {};
+      steps.push({
+        array: payload?.arr || prev.array || [],
+        comparisons: payload?.comparisons || prev.comparisons || 0,
+        swaps: payload?.swaps || prev.swaps || 0,
+        currentStep: payload?.step || prev.currentStep || 0,
+        currentIndices: { i: -1, j: -1 },
+        currentPhase: "Completion Check",
+        stepExplanation: "No swaps occurred; the array is already sorted.",
+        sorted: false, totalSteps: payload?.totalSteps || prev.totalSteps || 0,
+      });
+    } else if (type === "completed") {
+      const last = steps[steps.length - 1] || {};
+      steps.push({
+        array: payload.arr || last.array || [],
+        comparisons: payload.comparisons || last.comparisons,
+        swaps: payload.swaps || last.swaps,
+        currentStep: payload.step || last.currentStep || 0,
+        currentIndices: { i: -1, j: -1 },
+        currentPhase: "Completed",
+        stepExplanation: "Array is fully sorted.",
+        sorted: true,
+        totalSteps: payload.totalSteps || last.totalSteps,
+      });
+    }
+  }
+  return steps;
+};
+
+const BubbleSortVisualizer = () => {
+  const [array, setArray] = useState([]);
+  const [pattern, setPattern] = useState("random");
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const timerRef = useRef(null);
+
+  const [challengeEnabled, setChallengeEnabled] = useState(false);
+  const {
+    activeQuestion, askChallenge, resetChallengeStats,
+    stats: challengeStats, submitAnswer,
+  } = useSortingChallenge(challengeEnabled);
+
+  const [visualState, setVisualState] = useState({
+    comparisons: 0, swaps: 0, currentIndices: { i: -1, j: -1 },
+    currentPhase: "", stepExplanation: "", sorted: false, totalSteps: 0,
+  });
+
+  const steps = useMemo(() => {
+    if (array.length === 0) return [];
+    return precomputeSteps(array);
+  }, [array]);
+
+  const onStep = useCallback((step) => {
+    setVisualState({
+      comparisons: step.comparisons, swaps: step.swaps,
+      currentIndices: step.currentIndices,
+      currentPhase: step.currentPhase,
+      stepExplanation: step.stepExplanation,
+      sorted: step.sorted, totalSteps: step.totalSteps,
+    });
+    if (step.isSwap && step.swapJ !== undefined) {
+      const bars = document.querySelectorAll(".bar");
+      const bar1 = bars[step.swapJ];
+      const bar2 = bars[step.swapJ + 1];
+      if (bar1 && bar2) {
+        gsap.to(bar1, { x: "+=40", duration: 0.2, yoyo: true });
+        gsap.to(bar2, { x: "-=40", duration: 0.2, yoyo: true });
+      }
+    }
+  }, []);
+
+  const [speed, setSpeed] = useState(500);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: speed });
+
+  // Keep engine speed in sync with speed state
+  useEffect(() => {
+    if (engine?.setSpeed) {
+      engine.setSpeed(speed);
+    }
+  }, [speed, engine]);
+
+  // Timer logic
+  useEffect(() => {
+    if (engine?.isPlaying) {
+      const startTime = Date.now() - elapsedTime * 1000;
+      timerRef.current = setInterval(() => {
+        setElapsedTime(Math.floor((Date.now() - startTime) / 1000));
+      }, 1000);
+    } else {
+      clearInterval(timerRef.current);
+    }
+    return () => clearInterval(timerRef.current);
+  }, [engine?.isPlaying, elapsedTime, engine]);
+
+  const currentStepData = steps[engine.currentStep];
+
+  const handleStart = useCallback(() => {
+    if (currentStepData?.sorted) {
+      engine.reset();
+      setTimeout(() => engine.play(), 50);
+    } else {
+      engine.play();
+    }
+  }, [engine, currentStepData]);
+
+  const handleReset = useCallback(() => {
+    setVisualState({
+      comparisons: 0, swaps: 0, currentIndices: { i: -1, j: -1 },
+      currentPhase: "", stepExplanation: "", sorted: false, totalSteps: 0,
+    });
+    setElapsedTime(0);
+    clearInterval(timerRef.current);
+    engine.reset();
+  }, [engine]);
+
+  useVisualizerKeyboard({
+    onStart: handleStart, onReset: handleReset,
+    onSpeedChange: (s) => setSpeed(s * 500),
+    onTogglePlayPause: engine.isPlaying ? engine.pause : handleStart,
+    speed: speed / 500,
+    sorting: engine.isPlaying,
+    sorted: currentStepData?.sorted || false,
+  });
+
+  const handleExplainStep = () => {
+    const prompt = `I am currently looking at the Bubble Sort algorithm, at step ${engine.currentStep} of ${steps.length}.
+Phase: ${visualState.currentPhase}
+Explanation on screen: ${visualState.stepExplanation}
+Current Array State: [${currentStepData?.array?.join(", ") || array.join(", ")}]
+Currently comparing indices: i = ${visualState.currentIndices.i}, j = ${visualState.currentIndices.j}
+Please explain exactly what is happening in this step in detail.`;
+    window.dispatchEvent(new CustomEvent("chatbot-explain", { detail: { prompt } }));
+  };
+
+  // Extract current pass number from phase string e.g. "Pass 3 of 10"
+  const currentPass = visualState.currentPhase?.match(/Pass (\d+)/)?.[1] || "—";
+
+  return (
+    <main className="container mx-auto px-6 pb-4">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Watch Bubble Sort in action as it repeatedly swaps adjacent elements to sort the array step by step.
+      </p>
+
+      <div className="max-w-4xl mx-auto">
+        <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
+
+          {/* Pattern Selector */}
+          <div className="mb-4">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Input Pattern:
+            </label>
+            <select
+              value={pattern}
+              onChange={(e) => {
+                const val = e.target.value;
+                setPattern(val);
+                const newArr = generatePatternArray(val);
+                setArray(newArr);
+                handleReset();
+              }}
+              disabled={engine.isPlaying}
+              className="w-full border border-gray-300 dark:border-gray-600 rounded px-3 py-2 text-sm bg-white dark:bg-neutral-900 text-gray-800 dark:text-gray-200"
+            >
+              <option value="random">🎲 Random Array (Average Case)</option>
+              <option value="sorted">✅ Already Sorted (Best Case — O(n))</option>
+              <option value="reverse">❌ Reverse Sorted (Worst Case — O(n²))</option>
+              <option value="nearly">〰️ Nearly Sorted</option>
+              <option value="duplicates">🔢 Array with Duplicates</option>
+            </select>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2 mb-2">
+            <div className="flex flex-col gap-1">
+              <ArrayGenerator onGenerate={setArray} disabled={engine.isPlaying} isPrimary={array.length === 0} />
+              <CustomArrayInput
+                onUseCustomArray={(arr) => { setArray(arr); handleReset(); }}
+                disabled={engine.isPlaying}
+                currentArray={array}
+                className="w-full"
+              />
+            </div>
+            <div className="flex flex-col gap-2 justify-between">
+              <button
+                onClick={handleStart}
+                disabled={!array.length}
+                className="w-full disabled:opacity-75 bg-none bg-[#a435f0] hover:bg-[#8f2cd6] px-4 py-2 rounded shadow-sm transition-all duration-300 text-sm sm:text-base text-white"
+              >
+                {engine.isPlaying ? "Playing..." : currentStepData?.sorted ? "Restart" : "Start Bubble Sort"}
+              </button>
+              <button
+                onClick={handleReset}
+                disabled={engine.isPlaying}
+                className="w-full bg-none text-[#a435f0] border border-[#a435f0] hover:bg-[#f3e8ff] dark:hover:bg-[#a435f0]/20 px-4 py-2 rounded transition-colors text-sm sm:text-base"
+              >
+                Reset All
+              </button>
+            </div>
+          </div>
+
+          {engine.isPlaying && (
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={engine.isPlaying ? engine.pause : handleStart}
+              speed={speed / 500}
+              onSpeedChange={(s) => setSpeed(s * 500)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={engine.reset}
+              onExplainStep={handleExplainStep}
+              disabled={steps.length === 0}
+            />
+          )}
+
+          {!engine.isPlaying && (
+            <div className="flex items-center gap-4 mb-4">
+              <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">Speed:</span>
+              <input
+                type="range" min="0.5" max="5" step="0.5"
+                value={speed / 500}
+                onChange={(e) => setSpeed(parseFloat(e.target.value) * 500)}
+                className="w-24 sm:w-32"
+              />
+              <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">{speed / 500}x</span>
+            </div>
+          )}
+
+          <ChallengeModePanel
+            activeQuestion={activeQuestion}
+            disabled={engine.isPlaying}
+            enabled={challengeEnabled}
+            onEnabledChange={setChallengeEnabled}
+            onResetStats={resetChallengeStats}
+            onSubmitAnswer={submitAnswer}
+            stats={challengeStats}
+          />
+
+          {/* Stats Panel */}
+          <div className="grid grid-cols-2 gap-4 text-sm sm:text-base mt-2">
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Comparisons:</div>
+              <div className="text-xl sm:text-2xl">{visualState.comparisons}</div>
+            </div>
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Swaps:</div>
+              <div className="text-xl sm:text-2xl">{visualState.swaps}</div>
+            </div>
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Current Pass:</div>
+              <div className="text-xl sm:text-2xl">{currentPass}</div>
+            </div>
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Time Elapsed:</div>
+              <div className="text-xl sm:text-2xl">{elapsedTime}s</div>
+            </div>
+          </div>
+
+          <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+            <div className="font-medium">Step:</div>
+            <div className="text-xl font-bold">
+              {visualState.totalSteps > 0 ? `${engine.currentStep + 1} / ${steps.length}` : "—"}
+            </div>
+            <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+              {engine.currentStep > 0 && !visualState.sorted
+                ? `Comparing index ${visualState.currentIndices.i} and ${visualState.currentIndices.j}`
+                : visualState.sorted ? "Sorting complete!" : "Start sorting to see steps"}
+            </div>
+          </div>
+
+          <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+            <div className="font-medium">Phase:</div>
+            <div className="text-sm sm:text-base text-gray-800 dark:text-gray-200">
+              {visualState.currentPhase || (visualState.sorted ? "Completed" : "Ready to start")}
+            </div>
+            <div className="font-medium mt-2">Explanation:</div>
+            <div className="text-sm text-gray-700 dark:text-gray-300 mt-1">
+              {visualState.stepExplanation || (visualState.sorted ? "Array is fully sorted." : "Run the algorithm to see educational hints.")}
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
+          <h2 className="text-lg sm:text-xl font-semibold mb-4">Array Visualization</h2>
+          {(currentStepData?.array || array).length > 0 ? (
+            <div className="flex flex-wrap gap-2 sm:gap-4 justify-center">
+              {((currentStepData?.array) || array).map((value, index) => {
+                const isComparing = index === visualState.currentIndices.i || index === visualState.currentIndices.j;
+                const isSorted = visualState.sorted;
+                return (
+                  <div key={index} className="flex flex-col items-center">
+                    <div
+                      className={`bar w-12 h-12 sm:w-16 sm:h-16 flex items-center justify-center rounded-lg border-2 shadow-md dark:shadow-blue-900 transition-all duration-300 ${getFontSize(value)} font-bold
+                        ${isComparing
+                          ? "bg-yellow-400 dark:bg-yellow-400 border-yellow-600 dark:border-yellow-600 dark:text-gray-900"
+                          : isSorted
+                          ? "bg-green-400 dark:bg-green-400 border-green-600 dark:border-green-600 dark:text-gray-900"
+                          : "bg-primary/80 dark:bg-primary/80 border-primary dark:border-primary dark:text-gray-900"
+                        }`}
+                    >
+                      {value}
+                    </div>
+                    <div className="mt-1 text-xs text-gray-700 dark:text-[#c27cf7] font-semibold">
+                      {index === visualState.currentIndices.i && "i"}
+                      {index === visualState.currentIndices.j && "j"}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="text-center py-8 text-gray-500 text-sm sm:text-base">
+              {engine.isPlaying ? "Sorting..." : "Generate or enter an array to begin"}
+            </div>
+          )}
+        </div>
+
+        {/* Code Explanation Panel */}
+        <CodeExplanationPanel
+          currentStep={engine.currentStep}
+          iValues={{
+            i: visualState.currentIndices.i,
+            j: visualState.currentIndices.j,
+            array: currentStepData?.array || array,
+          }}
+        />
+
+        {/* Speed Control */}
+        <div className="flex items-center gap-3 mt-6 mb-6 text-sm text-gray-400 justify-center">
+          <span>Fast</span>
+          <input
+            type="range"
+            min={100}
+            max={1000}
+            step={100}
+            value={speed}
+            onChange={(e) => setSpeed(Number(e.target.value))}
+            className="accent-purple-500"
+          />
+          <span>Slow</span>
+        </div>
+
+      </div>
+    </main>
+  );
+};
+
+export default BubbleSortVisualizer;
diff --git a/src/app/visualizer/array/bubblesort/codeBlock.jsx b/src/app/visualizer/array/bubblesort/codeBlock.jsx
new file mode 100644
index 000000000..d089e3459
--- /dev/null
+++ b/src/app/visualizer/array/bubblesort/codeBlock.jsx
@@ -0,0 +1,126 @@
+'use client';
+import CodeBlock from '@/app/components/ui/CodeBlock';
+
+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]) {
+        [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]:
+                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;    
+        for (int i = 0; i < n - 1; i++) {
+            for (int j = 0; j < n - i - 1; j++) {
+                if (arr[j] > arr[j + 1]) {
+                    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};
+        bubbleSort(unsortedArray);
+        System.out.print("Sorted array: ");
+        for (int num : unsortedArray) System.out.print(num + " ");
+    }
+}`,
+
+  c: `// Bubble Sort in C
+#include <stdio.h>
+void bubbleSort(int arr[], int n) {
+    for (int i = 0; i < n - 1; i++) {
+        for (int j = 0; j < n - i - 1; j++) {
+            if (arr[j] > arr[j + 1]) {
+                int temp = arr[j];
+                arr[j] = arr[j + 1];
+                arr[j + 1] = temp;
+            }
+        }
+    }
+}
+int main() {
+    int arr[] = {64, 34, 25, 12, 22, 11, 90};
+    int n = sizeof(arr) / sizeof(arr[0]);
+    bubbleSort(arr, n);
+    printf("Sorted array: ");
+    for (int i = 0; i < n; i++) printf("%d ", arr[i]);
+    return 0;
+}`,
+
+  cpp: `// Bubble Sort in C++
+#include <iostream>
+#include <vector>
+using namespace std;
+void bubbleSort(vector<int>& arr) {
+    int n = arr.size();
+    for (int i = 0; i < n - 1; i++) {
+        for (int j = 0; j < n - i - 1; j++) {
+            if (arr[j] > arr[j + 1]) {
+                swap(arr[j], arr[j + 1]);
+            }
+        }
+    }
+}
+int main() {
+    vector<int> arr = {64, 34, 25, 12, 22, 11, 90};
+    bubbleSort(arr);
+    cout << "Sorted array: ";
+    for (int num : arr) cout << num << " ";
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: 'bubbleSort.js',
+  python: 'bubble_sort.py',
+  java: 'BubbleSort.java',
+  c: 'bubble_sort.c',
+  cpp: 'bubble_sort.cpp',
+};
+
+const BubbleSortCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default BubbleSortCode;
diff --git a/src/app/visualizer/array/bubblesort/content.jsx b/src/app/visualizer/array/bubblesort/content.jsx
new file mode 100644
index 000000000..80dd9de9c
--- /dev/null
+++ b/src/app/visualizer/array/bubblesort/content.jsx
@@ -0,0 +1,229 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraph = [
+    `Bubble Sort is a simple sorting algorithm that repeatedly steps through the list, compares adjacent elements and swaps them if they are in the wrong order. The pass through the list is repeated until the list is sorted. It gets its name because smaller elements "bubble" to the top of the list.`,
+    `Bubble Sort is an in-place sorting algorithm, meaning it requires only O(1) additional space (for temporary storage during swaps).`,
+    `Bubble Sort is simple to understand and implement but inefficient for large datasets. It's mainly used for educational purposes to introduce sorting algorithms. In practice, more efficient algorithms like QuickSort or MergeSort are preferred.`,
+  ];
+
+  const working = [
+    {
+      passes: "First Pass:",
+      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",
+      ],
+    },
+    {
+      passes: "Second Pass:",
+      points: [
+        "(1, 4) → No swap",
+        "(4, 2) → Swap → [1, 2, 4, 5, 8]",
+        "(4, 5) → No swap",
+      ],
+    },
+    { passes: "Third Pass:", points: ["No swaps needed → List is sorted"] },
+  ];
+
+  const algorithm = [
+    { points: "Start with an unsorted array" },
+    { points: "Set a flag to track if any swaps occur" },
+    {
+      points: "For each pair of adjacent elements:",
+      subpoints: [
+        "Compare the two elements",
+        "If they are in the wrong order, swap them",
+        "Set the swap flag to true",
+      ],
+    },
+    {
+      points:
+        "Repeat the process until a complete pass is made without any swaps",
+    },
+    { points: "The array is now sorted" },
+  ];
+
+  const complexity = [
+    {
+      points:
+        "Best Case: Array is already sorted → O(n) (only one pass needed).",
+    },
+    { points: "Average Case: Randomly ordered array → O(n²)." },
+    { points: "Worst Case: Array is sorted in reverse order → O(n²)." },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is Bubble Sort */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is Bubble Sort?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraph[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* How Does It Work */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            How Does It Work?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              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">
+              {working.map((items, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {items.passes}
+                  {items.points && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {items.points.map((subitems, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitems}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+
+            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+              The algorithm stops when a complete pass is made without any
+              swaps.
+            </p>
+          </div>
+        </section>
+
+        {/* Algorithm Steps */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Algorithm Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {algorithm.map((items, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {items.points}
+                  {items.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {items.subpoints.map((subitems, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitems}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {complexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                    {item.points.split(":")[0]}:
+                  </span>
+                  <span className="ml-2">{item.points.split(":")[1]}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="mt-8">
+            <ComplexityGraph
+              bestCase={(n) => 1}
+              averageCase={(n) => n * n}
+              worstCase={(n) => n * n}
+              maxN={25}
+            />
+          </div>
+        </section>
+
+        {/* Space Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Space Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraph[1]}
+            </p>
+          </div>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraph[2]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/array/bubblesort/quiz.jsx b/src/app/visualizer/array/bubblesort/quiz.jsx
new file mode 100644
index 000000000..e3d1e0d4a
--- /dev/null
+++ b/src/app/visualizer/array/bubblesort/quiz.jsx
@@ -0,0 +1,249 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const BubbleSortQuiz = () => {
+  const questions = [
+    {
+      question: "What is the basic principle of Bubble Sort?",
+      options: [
+        "Dividing the list into smaller sublists",
+        "Repeatedly swapping adjacent elements if they are in the wrong order",
+        "Selecting the smallest element and moving it to the front",
+        "Merging two sorted lists into one",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Bubble Sort works by repeatedly stepping through the list, comparing adjacent elements and swapping them if they are in the wrong order.",
+    },
+    {
+      question: "What is the time complexity of Bubble Sort in the worst case?",
+      options: ["O(n)", "O(n log n)", "O(n²)", "O(1)"],
+      correctAnswer: 2,
+      explanation:
+        "In the worst case (when the list is sorted in reverse order), Bubble Sort requires O(n²) comparisons and swaps.",
+    },
+    {
+      question:
+        "In the array [5, 1, 4, 2, 8], how many swaps occur during the first pass of Bubble Sort?",
+      options: ["1", "2", "3", "4"],
+      correctAnswer: 2,
+      explanation:
+        "First pass swaps (5,1), (5,4), and (5,2) - totaling 3 swaps. The pair (5,8) doesn't need swapping.",
+    },
+    {
+      question: "When would Bubble Sort perform at its best?",
+      options: [
+        "When the array is in random order",
+        "When the array is sorted in reverse order",
+        "When the array is already sorted",
+        "When the array contains duplicate values",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Bubble Sort performs best (O(n)) when the array is already sorted, as it only needs one pass through the array without any swaps.",
+    },
+    {
+      question: "What is the space complexity of Bubble Sort?",
+      options: ["O(n)", "O(n log n)", "O(n²)", "O(1)"],
+      correctAnswer: 3,
+      explanation:
+        "Bubble Sort is an in-place algorithm that only requires O(1) additional space for temporary storage during swaps.",
+    },
+    {
+      question:
+        "How can you optimize Bubble Sort to stop early if the array becomes sorted?",
+      options: [
+        "By counting the number of swaps",
+        "By using a flag to check if any swaps occurred in a pass",
+        "By reducing the array size after each pass",
+        "By sorting the array in both directions",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Using a flag to track if any swaps occurred during a pass allows the algorithm to terminate early if the array is already sorted.",
+    },
+    {
+      question:
+        "Why is Bubble Sort rarely used in practice for large datasets?",
+      options: [
+        "Because it's too complex to implement",
+        "Because it's not a stable sorting algorithm",
+        "Because of its O(n²) time complexity for average cases",
+        "Because it requires O(n) additional space",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "While simple to implement, Bubble Sort's O(n²) time complexity makes it inefficient for large datasets compared to algorithms like QuickSort or MergeSort.",
+    },
+    {
+  question: "What is the basic principle of Bubble Sort?",
+  options: [
+    "Divide the array into halves",
+    "Repeatedly compare and swap adjacent elements",
+    "Select the smallest element each time",
+    "Insert elements into their correct position"
+  ],
+  correctAnswer: 1,
+  explanation: "Bubble Sort repeatedly compares adjacent elements and swaps them if they are in the wrong order until the array is sorted."
+},
+{
+  question: "What is the worst-case time complexity of Bubble Sort?",
+  options: [
+    "O(log n)",
+    "O(n)",
+    "O(n log n)",
+    "O(n²)"
+  ],
+  correctAnswer: 3,
+  explanation: "Bubble Sort has a worst-case time complexity of O(n²) because it may need to compare every pair of adjacent elements multiple times."
+},
+{
+  question: "When does Bubble Sort achieve its best-case time complexity?",
+  options: [
+    "When the array is reverse sorted",
+    "When the array is already sorted (with optimization)",
+    "When the array contains duplicate values",
+    "When the array has only odd numbers"
+  ],
+  correctAnswer: 1,
+  explanation: "With the optimized version of Bubble Sort, an already sorted array requires only one pass, giving a best-case complexity of O(n)."
+},
+{
+  question: "After the first complete pass of Bubble Sort, where does the largest element move?",
+  options: [
+    "Beginning of the array",
+    "Middle of the array",
+    "End of the array",
+    "It remains in the same position"
+  ],
+  correctAnswer: 2,
+  explanation: "During the first pass, the largest element 'bubbles up' to the last position."
+},
+{
+  question: "Is Bubble Sort a stable sorting algorithm?",
+  options: [
+    "Yes",
+    "No",
+    "Only for integers",
+    "Only for sorted arrays"
+  ],
+  correctAnswer: 0,
+  explanation: "Bubble Sort is stable because equal elements retain their relative order after sorting."
+},
+{
+  question: "How many passes are required in the worst case to sort an array of n elements using Bubble Sort?",
+  options: [
+    "n",
+    "n - 1",
+    "log n",
+    "n²"
+  ],
+  correctAnswer: 1,
+  explanation: "Bubble Sort requires at most n - 1 passes to completely sort an array."
+},
+{
+  question: "Which pair of elements does Bubble Sort compare during each step?",
+  options: [
+    "First and last elements",
+    "Random elements",
+    "Adjacent elements",
+    "Smallest and largest elements"
+  ],
+  correctAnswer: 2,
+  explanation: "Bubble Sort works by comparing adjacent elements and swapping them if they are in the wrong order."
+},
+{
+  question: "What happens if no swaps occur during a complete pass in the optimized Bubble Sort?",
+  options: [
+    "The algorithm restarts",
+    "The algorithm terminates",
+    "The array is reversed",
+    "Another pass is always performed"
+  ],
+  correctAnswer: 1,
+  explanation: "If no swaps occur during a pass, the array is already sorted, so the algorithm stops."
+},
+{
+  question: "Which type of sorting algorithm is Bubble Sort?",
+  options: [
+    "Divide and Conquer",
+    "Comparison-based sorting",
+    "Hashing algorithm",
+    "Greedy algorithm"
+  ],
+  correctAnswer: 1,
+  explanation: "Bubble Sort is a comparison-based sorting algorithm because it compares elements to determine their order."
+},
+{
+  question: "Bubble Sort is mainly recommended for:",
+  options: [
+    "Very large datasets",
+    "Small datasets and educational purposes",
+    "Database indexing",
+    "Real-time systems with huge data"
+  ],
+  correctAnswer: 1,
+  explanation: "Bubble Sort is simple to understand and implement, making it suitable for small datasets and learning."
+},
+{
+  question: "Which element reaches its correct position after every pass of Bubble Sort?",
+  options: [
+    "Smallest element",
+    "Middle element",
+    "Largest unsorted element",
+    "Random element"
+  ],
+  correctAnswer: 2,
+  explanation: "After each pass, the largest remaining unsorted element moves to its correct position at the end."
+},
+{
+  question: "What is the average-case time complexity of Bubble Sort?",
+  options: [
+    "O(log n)",
+    "O(n)",
+    "O(n log n)",
+    "O(n²)"
+  ],
+  correctAnswer: 3,
+  explanation: "On average, Bubble Sort performs O(n²) comparisons and swaps."
+},
+{
+  question: "Which sorting algorithm generally performs better than Bubble Sort on large datasets?",
+  options: [
+    "Merge Sort",
+    "Quick Sort",
+    "Heap Sort",
+    "All of the above"
+  ],
+  correctAnswer: 3,
+  explanation: "Merge Sort, Quick Sort, and Heap Sort all have significantly better average performance than Bubble Sort for large datasets."
+},
+{
+  question: "Can Bubble Sort correctly sort an array containing duplicate elements?",
+  options: [
+    "Yes",
+    "No",
+    "Only if duplicates are adjacent",
+    "Only after removing duplicates"
+  ],
+  correctAnswer: 0,
+  explanation: "Bubble Sort correctly sorts arrays containing duplicate values while preserving their relative order."
+},
+{
+  question: "Which of the following is a major advantage of Bubble Sort?",
+  options: [
+    "Fastest sorting algorithm",
+    "Easy to understand and implement",
+    "Requires recursive calls",
+    "Works in O(log n) time"
+  ],
+  correctAnswer: 1,
+  explanation: "Bubble Sort's biggest advantage is its simplicity, making it a popular algorithm for beginners."
+}
+  ];
+
+  return <QuizEngine title="Bubble Sort Quiz Challenge" questions={questions} />;
+};
+
+export default BubbleSortQuiz;
diff --git a/src/app/visualizer/array/bubblesort/quiz/page.jsx b/src/app/visualizer/array/bubblesort/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/array/bubblesort/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/bucketsort/AlgorithmClient.jsx b/src/app/visualizer/array/bucketsort/AlgorithmClient.jsx
new file mode 100644
index 000000000..4a1a58ef9
--- /dev/null
+++ b/src/app/visualizer/array/bucketsort/AlgorithmClient.jsx
@@ -0,0 +1,41 @@
+import Animation from "@/app/visualizer/array/bucketsort/animation";
+import Content from "@/app/visualizer/array/bucketsort/content";
+import Code from "@/app/visualizer/array/bucketsort/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import TrackVisit from "@/app/components/ui/TrackVisit";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <>
+      <TrackVisit name="Bucket Sort" path="/visualizer/array/bucketsort" category="Sorting" />
+      <VisualizerPageLayout
+        paths={createVisualizerPaths("Array", "Bucket Sort")}
+        title="Bucket Sort"
+        animation={<Animation />}
+        content={<Content />}
+        code={<Code />}
+        exploreOther={
+          <ExploreOther
+            title="Explore Sorting Algorithms"
+            links={[
+              { text: "Bubble Sort", url: "/visualizer/array/bubblesort" },
+              { text: "Quick Sort", url: "/visualizer/array/quicksort" },
+              { text: "Shell Sort", url: "/visualizer/array/shellsort" },
+              { text: "Selection Sort", url: "/visualizer/array/selectionsort" },
+              { text: "Insertion Sort", url: "/visualizer/array/insertionsort" },
+              { text: "Merge Sort", url: "/visualizer/array/mergesort" },
+              { text: "Comparison Mode", url: "/visualizer/array/comparison" },
+              { text: "Counting Sort", url: "/visualizer/array/countingsort" },
+              { text: "Heap Sort", url: "/visualizer/array/heapsort" },
+            ]}
+          />
+        }
+      />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/bucketsort/animation.jsx b/src/app/visualizer/array/bucketsort/animation.jsx
new file mode 100644
index 000000000..430cfc011
--- /dev/null
+++ b/src/app/visualizer/array/bucketsort/animation.jsx
@@ -0,0 +1,427 @@
+"use client";
+import React, { useState, useMemo, useCallback } from "react";
+import ArrayGenerator from "@/app/components/ui/randomArray";
+import CustomArrayInput from "@/app/components/ui/customArrayInput";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls"; 
+import { bucketSortGenerator } from "@/features/algorithms/array/bucketSortLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+  if (len <= 2) return "text-lg";
+  if (len === 3) return "text-sm";
+  return "text-xs";
+};
+
+const precomputeSteps = (inputArray) => {
+    const steps = [];
+    if (inputArray.length === 0) return [];
+    const generator = bucketSortGenerator([...inputArray]);
+
+    for (const frame of generator) {
+        const { type, payload } = frame;
+        const lastStep = steps[steps.length - 1] || { 
+            array: [...inputArray], 
+            buckets: [],
+            comparisons: 0, 
+            swaps: 0, 
+            currentStep: 0, 
+            currentIndices: {}, 
+            currentPhase: "", 
+            stepExplanation: "", 
+            sorted: false, 
+            totalSteps: 0 
+        };
+
+        switch (type) {
+            case 'init':
+                steps.push({
+                    ...lastStep,
+                    array: [...inputArray],
+                    stepExplanation: "Starting Bucket Sort...",
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'create_buckets':
+                steps.push({
+                    ...lastStep,
+                    buckets: payload.buckets.map(b => [...b]),
+                    currentStep: payload.step,
+                    currentPhase: "1. Create Buckets",
+                    stepExplanation: `Created ${payload.bucketCount} empty buckets.`,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'find_range':
+                steps.push({
+                    ...lastStep,
+                    currentStep: payload.step,
+                    currentPhase: "1. Find Range",
+                    stepExplanation: `Found minimum ${payload.min} and maximum ${payload.max} to map values into buckets.`,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'bucket_insert':
+                steps.push({
+                    ...lastStep,
+                    buckets: payload.buckets.map(b => [...b]),
+                    currentStep: payload.step,
+                    currentIndices: { distributingElement: payload.value, toBucket: payload.bucketIndex },
+                    currentPhase: "2. Distribute Elements",
+                    stepExplanation: `Placing element ${payload.value} into bucket ${payload.bucketIndex}.`,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'bucket_sort_start':
+                steps.push({
+                    ...lastStep,
+                    currentStep: payload.step,
+                    currentIndices: { sortingBucket: payload.bucketIndex },
+                    currentPhase: `3. Sort Buckets (Bucket ${payload.bucketIndex})`,
+                    stepExplanation: `Starting insertion sort inside bucket ${payload.bucketIndex}.`,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'bucket_compare':
+                steps.push({
+                    ...lastStep,
+                    buckets: lastStep.buckets.map((bucket, index) =>
+                        index === payload.bucketIndex ? [...payload.bucket] : [...bucket]
+                    ),
+                    comparisons: payload.comparisons,
+                    currentStep: payload.step,
+                    currentIndices: {
+                        sortingBucket: payload.bucketIndex,
+                        j: payload.current,
+                        compareTo: payload.next,
+                    },
+                    currentPhase: `3. Sort Buckets (Bucket ${payload.bucketIndex})`,
+                    stepExplanation: `Comparing positions ${payload.current} and ${payload.next} inside bucket ${payload.bucketIndex}.`,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'bucket_shift':
+            case 'bucket_insert_sorted':
+                steps.push({
+                    ...lastStep,
+                    buckets: lastStep.buckets.map((bucket, index) =>
+                        index === payload.bucketIndex ? [...payload.bucket] : [...bucket]
+                    ),
+                    currentStep: payload.step,
+                    currentIndices: { sortingBucket: payload.bucketIndex },
+                    currentPhase: `3. Sort Buckets (Bucket ${payload.bucketIndex})`,
+                    stepExplanation:
+                        type === "bucket_shift"
+                            ? `Shifting a larger value to the right inside bucket ${payload.bucketIndex}.`
+                            : `Inserted the key into its sorted position inside bucket ${payload.bucketIndex}.`,
+                    swaps: payload.swaps ?? lastStep.swaps,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'merge':
+                steps.push({
+                    ...lastStep,
+                    array: [...payload.arr],
+                    currentStep: payload.step,
+                    currentIndices: { gathering: true, fromBucket: payload.bucketIndex, toIndex: payload.index },
+                    currentPhase: "4. Concatenate Buckets",
+                    stepExplanation: `Moving ${payload.value} from bucket ${payload.bucketIndex} back to index ${payload.index}.`,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'completed':
+                steps.push({
+                    ...lastStep,
+                    array: [...payload.arr],
+                    currentStep: payload.step,
+                    currentIndices: {},
+                    currentPhase: "Completed",
+                    stepExplanation: "Array is fully sorted.",
+                    sorted: true,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            default:
+                break;
+        }
+    }
+    return steps;
+};
+
+const BucketSortVisualizer = () => {
+  const [array, setArray] = useState([]);
+
+  const [visualState, setVisualState] = useState({
+    buckets: [],
+    comparisons: 0, 
+    swaps: 0, 
+    currentIndices: {},
+    currentPhase: "", 
+    stepExplanation: "", 
+    sorted: false, 
+    totalSteps: 0,
+  });
+
+  const steps = useMemo(() => {
+    return precomputeSteps([...array]);
+  }, [array]);
+
+  const onStep = useCallback((step) => {
+    setVisualState({
+      buckets: step.buckets,
+      comparisons: step.comparisons,
+      swaps: step.swaps,
+      currentIndices: step.currentIndices,
+      currentPhase: step.currentPhase,
+      stepExplanation: step.stepExplanation,
+      sorted: step.sorted,
+      totalSteps: step.totalSteps,
+    });
+  }, []);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 500 });
+  const currentStepData = steps[engine.currentStep];
+
+  const handleStart = useCallback(() => {
+    if (currentStepData?.sorted) {
+      engine.reset();
+      setTimeout(() => engine.play(), 50);
+    } else {
+      engine.play();
+    }
+  }, [engine, currentStepData]);
+
+  const handleReset = useCallback(() => {
+    setVisualState({
+      buckets: [],
+      comparisons: 0, swaps: 0, 
+      currentIndices: {},
+      currentPhase: "", stepExplanation: "", sorted: false, totalSteps: 0,
+    });
+    engine.reset();
+  }, [engine]);
+
+  useVisualizerKeyboard({
+    onStart: handleStart,
+    onReset: handleReset,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+    onTogglePlayPause: engine.isPlaying ? engine.pause : handleStart,
+    speed: engine.speed / 500,
+    sorting: engine.isPlaying,
+    sorted: currentStepData?.sorted || false,
+  });
+
+  const handleExplainStep = () => {
+    const prompt = `I am currently looking at the Bucket Sort algorithm, at step ${engine.currentStep} of ${steps.length}.
+Phase: ${visualState.currentPhase}
+Explanation on screen: ${visualState.stepExplanation}
+Current Array State: [${currentStepData?.array?.join(", ") || array.join(", ")}]
+Current Buckets State: ${JSON.stringify(visualState.buckets)}
+Current Indices/Pointers: ${JSON.stringify(visualState.currentIndices)}
+Please explain exactly what is happening in this step in detail.`;
+    
+    window.dispatchEvent(
+      new CustomEvent("chatbot-explain", { detail: { prompt } })
+    );
+  };
+
+  return (
+    <main className="container mx-auto px-6 pt-4 pb-6">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Visualize Bucket Sort&apos;s distribution and conquer approach.
+      </p>
+
+      <div className="max-w-4xl mx-auto">
+        <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <div>
+              <ArrayGenerator
+                onGenerate={(newArray) => {
+                  setArray(newArray);
+                  handleReset();
+                }}
+                disabled={engine.isPlaying}
+                isPrimary={array.length === 0}
+              />
+              <CustomArrayInput
+                onUseCustomArray={(newArray) => {
+                  setArray(newArray);
+                  handleReset();
+                }}
+                disabled={engine.isPlaying}
+                currentArray={array}
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <button
+                onClick={handleStart}
+                disabled={!array.length}
+                className="w-full disabled:opacity-75 bg-none bg-[#a435f0] hover:bg-[#8f2cd6] px-4 py-2 rounded shadow-sm transition-all duration-300 text-sm sm:text-base text-white"
+              >
+                {engine.isPlaying ? "Sorting..." : currentStepData?.sorted ? "Restart" : "Start Bucket Sort"}
+              </button>
+              <button
+                onClick={handleReset}
+                disabled={engine.isPlaying}
+                className="w-full bg-none text-[#a435f0] border border-[#a435f0] hover:bg-[#f3e8ff] dark:hover:bg-[#a435f0]/20 px-4 py-2 rounded transition-colors text-sm sm:text-base"
+              >
+                Reset All
+              </button>
+            </div>
+          </div>
+          
+          {engine.isPlaying && (
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={engine.isPlaying ? engine.pause : handleStart}
+              speed={engine.speed / 500}
+              onSpeedChange={(s) => engine.setSpeed(s * 500)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={engine.reset}
+              onExplainStep={handleExplainStep}
+              disabled={steps.length === 0}
+            />
+          )}
+
+          {!engine.isPlaying && (
+            <div className="flex items-center gap-4 mb-4">
+              <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">Speed:</span>
+              <input
+                type="range"
+                min="0.5"
+                max="5"
+                step="0.5"
+                value={engine.speed / 500}
+                onChange={(e) => engine.setSpeed(parseFloat(e.target.value) * 500)}
+                className="w-24 sm:w-32"
+              />
+              <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">{engine.speed / 500}x</span>
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Comparisons:</div>
+              <div className="text-2xl">{visualState.comparisons}</div>
+            </div>
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Swaps:</div>
+              <div className="text-2xl">{visualState.swaps}</div>
+            </div>
+          </div>
+          <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+            <div className="font-medium">Step:</div>
+            <div className="text-xl font-bold">
+              {visualState.totalSteps > 0 ? `${engine.currentStep + 1} / ${steps.length}` : "—"}
+            </div>
+            <div className="text-xs text-gray-500 mt-1">
+              {visualState.currentPhase
+                ? visualState.currentPhase
+                : visualState.sorted
+                ? "Sorting complete!"
+                : "Start sorting to see steps"}
+            </div>
+          </div>
+          <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+            <div className="font-medium">Phase:</div>
+            <div className="text-sm sm:text-base text-gray-800 dark:text-gray-200">
+              {visualState.currentPhase || (visualState.sorted ? "Completed" : "Ready to start")}
+            </div>
+            <div className="font-medium mt-2">Explanation:</div>
+            <div className="text-sm text-gray-700 dark:text-gray-300 mt-1">
+              {visualState.stepExplanation || (visualState.sorted ? "Array is fully sorted." : "Run the algorithm to see educational hints.")}
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-8">
+          <h2 className="text-xl font-semibold mb-4">Array Visualization</h2>
+          {(currentStepData?.array || array).length > 0 ? (
+            <div className="flex flex-wrap gap-4 justify-center">
+              {(currentStepData?.array || array).map((value, index) => {
+                const { distributingElement, toIndex } = visualState.currentIndices;
+                const isDistributing = value === distributingElement && !visualState.currentIndices.gathering;
+                const isGathering = index === toIndex;
+
+                return (
+                  <div key={index} className="flex flex-col items-center">
+                    <div
+                      className={`array-bar w-16 h-16 flex items-center justify-center rounded-lg border-2 transition-all duration-300 ${getFontSize(value)} font-medium
+                            ${
+                              isDistributing
+                                ? "bg-red-400 dark:bg-red-600 border-red-600 dark:border-red-400"
+                                : isGathering
+                                ? "bg-blue-400 dark:bg-blue-600 border-blue-600 dark:border-blue-400"
+                                : visualState.sorted
+                                ? "bg-green-400 dark:bg-green-600 border-green-600 dark:border-green-400"
+                                : "bg-gray-200 dark:bg-gray-700 border-gray-300 dark:border-gray-600"
+                            }`}
+                    >
+                      {value}
+                    </div>
+                    <div className="mt-1 text-xs text-gray-600 dark:text-gray-400">{index}</div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="text-center py-8 text-gray-500">
+              {engine.isPlaying ? "Sorting..." : "Generate or enter an array to begin"}
+            </div>
+          )}
+        </div>
+
+        <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
+          <h2 className="text-xl font-semibold mb-4">Buckets</h2>
+          {(visualState.buckets && visualState.buckets.length > 0) ? (
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
+              {visualState.buckets.map((bucket, bucketIndex) => {
+                const { sortingBucket, toBucket, fromBucket, key, j } = visualState.currentIndices;
+                const isSortingThisBucket = sortingBucket === bucketIndex;
+                const isReceiving = toBucket === bucketIndex;
+                const isGiving = fromBucket === bucketIndex;
+
+                return (
+                  <div key={bucketIndex} className={`p-3 rounded-lg border-2 transition-all duration-300 ${
+                    isSortingThisBucket ? 'border-yellow-500 bg-yellow-50 dark:bg-yellow-950' : 
+                    isReceiving ? 'border-red-500 bg-red-50 dark:bg-red-950' : 
+                    isGiving ? 'border-blue-500 bg-blue-50 dark:bg-blue-950' : 
+                    'border-gray-300 dark:border-gray-700'
+                  }`}>
+                    <h3 className="font-bold text-center mb-2 border-b pb-1">Bucket {bucketIndex}</h3>
+                    <div className="flex flex-wrap gap-2 justify-center min-h-[3rem]">
+                      {bucket.map((value, itemIndex) => {
+                        const isKey = isSortingThisBucket && value === key && itemIndex === j + 1;
+                        const isComparing = isSortingThisBucket && itemIndex === j;
+                        return (
+                          <div key={itemIndex} className={`w-10 h-10 flex items-center justify-center rounded border transition-colors duration-200 ${getFontSize(value)}
+                            ${
+                              isKey ? 'bg-red-300 dark:bg-red-700 border-red-500' :
+                              isComparing ? 'bg-yellow-300 dark:bg-yellow-700 border-yellow-500' :
+                              'bg-gray-200 dark:bg-gray-700 border-gray-400'
+                            }
+                          `}>
+                            {value}
+                          </div>
+                        );
+                      })}
+                      {bucket.length === 0 && <span className="text-xs text-gray-400">empty</span>}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="text-center py-8 text-gray-500">
+              Buckets will appear here during sorting.
+            </div>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default BucketSortVisualizer;
diff --git a/src/app/visualizer/array/bucketsort/codeBlock.jsx b/src/app/visualizer/array/bucketsort/codeBlock.jsx
new file mode 100644
index 000000000..fd2269bf9
--- /dev/null
+++ b/src/app/visualizer/array/bucketsort/codeBlock.jsx
@@ -0,0 +1,155 @@
+'use client';
+import CodeBlock from '@/app/components/ui/CodeBlock';
+
+const codeExamples = {
+  javascript: `// Shell Sort in JavaScript
+function bucketSort(arr, bucketSize = 5) {
+  if (arr.length === 0) {
+    return arr;
+  }
+
+  let minValue = arr[0];
+  let maxValue = arr[0];
+  for (let i = 1; i < arr.length; i++) {
+    if (arr[i] < minValue) {
+      minValue = arr[i];
+    } else if (arr[i] > maxValue) {
+      maxValue = arr[i];
+    }
+  }
+
+  const bucketCount = Math.floor((maxValue - minValue) / bucketSize) + 1;
+  const buckets = new Array(bucketCount);
+  for (let i = 0; i < buckets.length; i++) {
+    buckets[i] = [];
+  }
+
+  for (let i = 0; i < arr.length; i++) {
+    const bucketIndex = Math.floor((arr[i] - minValue) / bucketSize);
+    buckets[bucketIndex].push(arr[i]);
+  }
+
+  const sortedArray = [];
+  for (let i = 0; i < buckets.length; i++) {
+    // Using insertion sort for smaller arrays within buckets
+    const bucket = buckets[i];
+    for (let j = 1; j < bucket.length; j++) {
+      const temp = bucket[j];
+      let k = j - 1;
+      while (k >= 0 && bucket[k] > temp) {
+        bucket[k + 1] = bucket[k];
+        k--;
+      }
+      bucket[k + 1] = temp;
+    }
+    for (let j = 0; j < bucket.length; j++) {
+      sortedArray.push(bucket[j]);
+    }
+  }
+
+  return sortedArray;
+}
+// Usage example
+const numbers = [29, 25, 3, 49, 9, 37, 21, 43];
+console.log("Before sorting:", numbers);
+const result = bucketSort([...numbers]);
+console.log("After sorting:", result);`,
+
+  python: `# Shell Sort in Python
+def bucket_sort(arr):
+    n = len(arr)
+    if n == 0:
+        return arr
+
+    max_val, min_val = max(arr), min(arr)
+    bucket_count = (max_val - min_val) // 5 + 1
+    buckets = [[] for _ in range(bucket_count)]
+
+    for num in arr:
+        index = (num - min_val) // 5
+        buckets[index].append(num)
+
+    sorted_arr = []
+    for bucket in buckets:
+        # Using insertion sort for buckets
+        for i in range(1, len(bucket)):
+            key = bucket[i]
+            j = i - 1
+            while j >= 0 and key < bucket[j]:
+                bucket[j + 1] = bucket[j]
+                j -= 1
+            bucket[j + 1] = key
+        sorted_arr.extend(bucket)
+    
+    return sorted_arr
+
+# Usage example
+numbers = [29, 25, 3, 49, 9, 37, 21, 43]
+print("Before sorting:", numbers)
+result = bucket_sort(numbers[:])
+print("After sorting:", result)`,
+
+  java: `// Shell Sort in Java
+#include <iostream>
+#include <vector>
+#include <algorithm>
+#include <cmath>
+
+using namespace std;
+
+void bucketSort(vector<int>& arr) {
+    int n = arr.size();
+    if (n == 0) return;
+
+    int max_val = *max_element(arr.begin(), arr.end());
+    int min_val = *min_element(arr.begin(), arr.end());
+    int bucket_size = 5;
+    int bucket_count = floor((max_val - min_val) / bucket_size) + 1;
+    vector<vector<int>> buckets(bucket_count);
+
+    for (int i = 0; i < n; i++) {
+        int bucket_index = floor((arr[i] - min_val) / bucket_size);
+        buckets[bucket_index].push_back(arr[i]);
+    }
+
+    arr.clear();
+    for (int i = 0; i < bucket_count; i++) {
+        sort(buckets[i].begin(), buckets[i].end()); // Using std::sort for buckets
+        for (int j = 0; j < buckets[i].size(); j++) {
+            arr.push_back(buckets[i][j]);
+        }
+    }
+}
+
+int main() {
+    vector<int> numbers = {29, 25, 3, 49, 9, 37, 21, 43};
+    cout << "Before sorting: ";
+    for (int num : numbers) cout << num << " ";
+    cout << endl;
+
+    bucketSort(numbers);
+
+    cout << "After sorting: ";
+    for (int num : numbers) cout << num << " ";
+    cout << endl;
+
+    return 0;
+}`
+};
+
+const fileNames = {
+  javascript: 'bucketSort.js',
+  python: 'bucket_sort.py',
+  java: 'BucketSort.java',
+  cpp: 'bucket_sort.cpp',
+};
+
+const BucketSortCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default BucketSortCode;
\ No newline at end of file
diff --git a/src/app/visualizer/array/bucketsort/content.jsx b/src/app/visualizer/array/bucketsort/content.jsx
new file mode 100644
index 000000000..2da49b80c
--- /dev/null
+++ b/src/app/visualizer/array/bucketsort/content.jsx
@@ -0,0 +1,294 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState('light');
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraphs = [
+    `Bucket Sort is a distribution sorting algorithm that works by distributing the elements of an array into a number of buckets. Each bucket is then sorted individually, either using a different sorting algorithm or by recursively applying the bucket sort algorithm. Finally, the sorted buckets are concatenated to form the final sorted array.`,
+    `The efficiency of Bucket Sort depends heavily on the input data being uniformly distributed over a range. When the data is uniformly distributed, Bucket Sort can perform in linear time, O(n + k), where 'n' is the number of elements and 'k' is the number of buckets. However, its worst-case performance is O(n²) if all elements are placed into a single bucket.`,
+    `Bucket Sort is not an in-place algorithm as it requires extra space for the buckets. The space complexity is O(n + k), where 'n' is the space for the elements across all buckets and 'k' is the space for the bucket containers themselves.`,
+    `Bucket Sort is an excellent choice when the input data is known to be uniformly distributed. It's often used in scenarios where data is spread out, such as sorting a large set of floating-point numbers that are evenly distributed between 0.0 and 1.0.`,
+  ];
+
+  const working = [
+    {
+      steps: "Step 1: Create Buckets",
+      points: [
+        "First, create an array of empty buckets. The number of buckets can be chosen based on the data range or size.",
+        "For our example with array [29, 25, 3, 49, 9, 37, 21, 43] and 5 buckets, we create 5 empty lists.",
+      ],
+    },
+    {
+      steps: "Step 2: Distribute Elements",
+      points: [
+        "Go through the original array and put each element in its corresponding bucket based on a distribution formula.",
+        "Example: 29 goes to bucket 2, 25 to bucket 2, 3 to bucket 0, 49 to bucket 4, etc.",
+        "After distribution: Bucket 0: [3, 9], Bucket 1: [], Bucket 2: [29, 25, 21], Bucket 3: [37], Bucket 4: [49, 43]",
+      ],
+    },
+    {
+      steps: "Step 3: Sort Individual Buckets",
+      points: [
+        "Sort each non-empty bucket using another sorting algorithm (like Insertion Sort) or by recursively calling Bucket Sort.",
+        "After sorting: Bucket 0: [3, 9], Bucket 2: [21, 25, 29], Bucket 3: [37], Bucket 4: [43, 49]",
+      ],
+    },
+    {
+      steps: "Step 4: Concatenate Buckets",
+      points: [
+        "Visit the buckets in order and place all their elements back into the original array.",
+        "The array is now fully sorted: [3, 9, 21, 25, 29, 37, 43, 49]",
+      ],
+    },
+  ];
+
+  const algorithm = [
+    {
+      steps: "Create Buckets:",
+      points: ["Initialize 'k' empty buckets."],
+    },
+    {
+      steps: "Distribute Elements:",
+      points: ["For each element in the input array, calculate its bucket index and place it in the corresponding bucket."],
+    },
+    {
+      steps: "Sort Buckets:",
+      points: [
+        "Iterate through all the buckets and sort each one individually.",
+        "A common choice for sorting the buckets is Insertion Sort, due to its efficiency on small or nearly-sorted lists.",
+      ],
+    },
+    {
+      steps: "Concatenate:",
+      points: ["Gather the sorted elements from each bucket and place them back into the original array in order."],
+    },
+  ];
+
+  const timeComplexity = [
+    { points: "Best Case: O(n + k)" },
+    { points: "Average Case: O(n + k)" },
+    { points: "Worst Case: O(n²)" },
+  ];
+
+  {
+    /* Advantages */
+  }
+  const advantages = [
+    { points: "Extremely fast when the input data is uniformly distributed, achieving linear time complexity." },
+    { points: "Can be easily parallelized since each bucket can be sorted independently." },
+  ];
+
+  {
+    /* Disadvantages */
+  }
+  const disadvantages = [
+    { points: "Performance degrades significantly if the data is not uniformly distributed, leading to a worst-case of O(n²)." },
+    { points: "Requires extra space for the buckets, making its space complexity O(n + k)." },
+    { points: "The stability of the sort depends on the stability of the underlying algorithm used to sort the buckets." },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is Bucket Sort */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is Bucket Sort?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* How Does It Work */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            How Does It Work?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Consider this unsorted array: [29, 25, 3, 49, 9, 37, 21, 43]
+            </p>
+
+            <ul className="space-y-3">
+              {working.map((item, index) => (
+                <li key={index} className="text-[#374151] dark:text-[#d1d5db]">
+                  <span className="font-semibold">{item.steps}</span>
+                  {item.points && (
+                    <ol className="mt-2 space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400 font-normal">
+                      {item.points.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ol>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Algorithm Steps */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Algorithm Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {algorithm.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.steps}
+                  {item.points && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.points.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {timeComplexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                    {item.points.split(":")[0]}:
+                  </span>
+                  <span className="ml-2">{item.points.split(":")[1]}</span>
+                </li>
+              ))}
+            </ul>
+            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+              {paragraphs[1]}
+            </p>
+            <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => n} // O(n+k) -> O(n)
+                averageCase={(n) => n} // O(n+k) -> O(n)
+                worstCase={(n) => n * n} // O(n^2)
+                maxN={25}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Space Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Space Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[2]}
+            </p>
+          </div>
+        </section>
+
+        {/* Advantages */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Advantages
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {advantages.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Disadvantages */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Disadvantages
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {disadvantages.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraphs[3]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/array/bucketsort/quiz.jsx b/src/app/visualizer/array/bucketsort/quiz.jsx
new file mode 100644
index 000000000..df77f85a2
--- /dev/null
+++ b/src/app/visualizer/array/bucketsort/quiz.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const BucketSortQuiz = () => {
+  const questions = [
+    {
+      question: "What is the primary principle of Bucket Sort?",
+      options: [
+        "Comparing and swapping adjacent elements",
+        "Distributing elements into a number of buckets",
+        "Selecting a pivot and partitioning",
+        "Building a max-heap from the elements"
+      ],
+      correctAnswer: 1,
+      explanation: "Bucket Sort works by distributing the elements of an array into a number of buckets. Each bucket is then sorted individually, and finally, the sorted buckets are concatenated."
+    },
+    {
+      question: "What is the average-case time complexity of Bucket Sort?",
+      options: [
+        "O(n^2)",
+        "O(n log n)",
+        "O(n + k)",
+        "O(k log k)"
+      ],
+      correctAnswer: 2,
+      explanation: "The average-case time complexity is O(n + k), where 'n' is the number of elements and 'k' is the number of buckets, assuming elements are uniformly distributed."
+    },
+    {
+      question: "When does Bucket Sort have a worst-case time complexity of O(n²)?",
+      options: [
+        "When the input array is already sorted",
+        "When all elements are placed into a single bucket",
+        "When the number of buckets is equal to the number of elements",
+        "When the input array is sorted in reverse"
+      ],
+      correctAnswer: 1,
+      explanation: "The worst-case scenario occurs when all elements fall into one bucket. If that bucket is then sorted with an O(n²) algorithm like Insertion Sort, the total complexity becomes O(n²)."
+    },
+    {
+      question: "What is the space complexity of Bucket Sort?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n + k)",
+        "O(n^2)"
+      ],
+      correctAnswer: 2,
+      explanation: "Bucket Sort requires O(n + k) auxiliary space, where 'n' is for the elements and 'k' is for the buckets themselves."
+    },
+    {
+      question: "Which sorting algorithm is commonly used to sort the individual buckets in Bucket Sort?",
+      options: [
+        "Merge Sort",
+        "Quick Sort",
+        "Insertion Sort",
+        "Heap Sort"
+      ],
+      correctAnswer: 2,
+      explanation: "Insertion Sort is often used for sorting the buckets because it is very efficient for small or nearly sorted lists, which buckets are expected to be."
+    },
+    {
+      question: "Bucket Sort is most effective under which condition?",
+      options: [
+        "The input data is sorted in reverse order",
+        "The input data contains many duplicate values",
+        "The input data is uniformly distributed across a range",
+        "The input data has a very small range of values"
+      ],
+      correctAnswer: 2,
+      explanation: "Bucket Sort's efficiency heavily relies on the input elements being uniformly distributed, which ensures that elements are spread evenly across the buckets."
+    },
+    {
+      question: "Is Bucket Sort a stable sorting algorithm?",
+      options: [
+        "Yes, always",
+        "No, never",
+        "It depends on the sorting algorithm used for the buckets",
+        "Only for negative numbers"
+      ],
+      correctAnswer: 2,
+      explanation: "The stability of Bucket Sort depends on the stability of the algorithm used to sort each bucket. If a stable sort like Insertion Sort is used, Bucket Sort will also be stable."
+    },
+    {
+      question: "What is the first step in the Bucket Sort algorithm?",
+      options: [
+        "Sort each bucket individually",
+        "Create a set of empty buckets",
+        "Concatenate the sorted buckets",
+        "Find the maximum value in the array"
+      ],
+      correctAnswer: 1,
+      explanation: "The first step is to initialize 'k' empty buckets, which will be used to distribute the elements from the input array."
+    },
+    {
+      question: "Bucket Sort is an example of what type of sorting algorithm?",
+      options: [
+        "Comparison-based sort",
+        "In-place sort",
+        "Distribution sort",
+        "Exchange sort"
+      ],
+      correctAnswer: 2,
+      explanation: "Bucket Sort is a distribution sort because it distributes elements into buckets based on their values."
+    },
+    {
+      question: "How are elements typically placed into buckets?",
+      options: [
+        "Randomly",
+        "Based on a hash function or a formula mapping values to bucket indices",
+        "Alternating between buckets",
+        "Always in the first bucket"
+      ],
+      correctAnswer: 1,
+      explanation: "A mapping function is used to calculate the appropriate bucket index for each element, often based on its value relative to the overall range of values."
+    }
+  ];
+
+  return <QuizEngine title="Bucket Sort Quiz Challenge" questions={questions} />;
+};
+
+export default BucketSortQuiz;
diff --git a/src/app/visualizer/array/bucketsort/quiz/page.jsx b/src/app/visualizer/array/bucketsort/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/array/bucketsort/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/comparison/AlgorithmClient.jsx b/src/app/visualizer/array/comparison/AlgorithmClient.jsx
new file mode 100644
index 000000000..dbe497997
--- /dev/null
+++ b/src/app/visualizer/array/comparison/AlgorithmClient.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import ComparisonClient from "./ComparisonClient";
+import ExploreOther from "@/app/components/ui/exploreOther";
+
+
+
+export default function ComparisonPage() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Array", "Comparison Mode")}
+      title="Sorting Comparison Mode"
+      headerDescription="Select two sorting algorithms to run synchronously side-by-side on the identical dataset, and inspect their performance characteristics in real time."
+      animation={<ComparisonClient />}
+      exploreOther={
+        <ExploreOther
+          title="Explore Individual Sorting Algorithms"
+          links={[
+            { text: "Bubble Sort", url: "/visualizer/array/bubblesort" },
+            { text: "Selection Sort", url: "/visualizer/array/selectionsort" },
+            { text: "Insertion Sort", url: "/visualizer/array/insertionsort" },
+            { text: "Merge Sort", url: "/visualizer/array/mergesort" },
+            { text: "Quick Sort", url: "/visualizer/array/quicksort" },
+            { text: "Heap Sort", url: "/visualizer/array/heapsort" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/array/comparison/ComparisonClient.jsx b/src/app/visualizer/array/comparison/ComparisonClient.jsx
new file mode 100644
index 000000000..04524a0e0
--- /dev/null
+++ b/src/app/visualizer/array/comparison/ComparisonClient.jsx
@@ -0,0 +1,804 @@
+"use client";
+import React, { useState, useEffect, useMemo, useCallback, useRef } from "react";
+import ArrayGenerator from "@/app/components/ui/randomArray";
+import CustomArrayInput from "@/app/components/ui/customArrayInput";
+import ComplexityCard from "@/app/components/ui/ComplexityCard";
+import AlgorithmComparator from "@/app/components/ui/AlgorithmComparator";
+
+const ALGORITHMS = {
+  bubble: { name: "Bubble Sort", complexity: "O(N²)" },
+  selection: { name: "Selection Sort", complexity: "O(N²)" },
+  insertion: { name: "Insertion Sort", complexity: "O(N²)" },
+  merge: { name: "Merge Sort", complexity: "O(N log N)" },
+  quick: { name: "Quick Sort", complexity: "O(N log N)" },
+  heap: { name: "Heap Sort", complexity: "O(N log N)" },
+};
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+  if (len <= 2) return "text-sm sm:text-base";
+  if (len === 3) return "text-xs sm:text-sm";
+  return "text-[10px] sm:text-xs";
+};
+
+const getBarStyles = (index, value, algoKey, currentIndices, isCompleted, maxValue) => {
+  const pctHeight = maxValue > 0 ? (value / maxValue) * 100 : 0;
+  
+  // Curated premium pastel color palettes
+  let bgClass = "bg-indigo-50 dark:bg-indigo-950/20 text-indigo-700 dark:text-indigo-300 border-indigo-200/80 dark:border-indigo-900/50";
+  
+  if (isCompleted) {
+    bgClass = "bg-emerald-100 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300 border-emerald-300 dark:border-emerald-800/80";
+    return { bgClass, style: { height: `${Math.max(pctHeight, 15)}%` } };
+  }
+
+  const {
+    comparing = [],
+    swapping = [],
+    shifting = [],
+    writing = [],
+    range = [],
+    min = -1,
+    active = -1,
+    key = -1,
+    pivot = -1,
+    boundary = -1
+  } = currentIndices;
+
+  switch (algoKey) {
+    case "bubble":
+      if (comparing.includes(index)) {
+        bgClass = "bg-amber-100 dark:bg-amber-950 text-amber-700 dark:text-amber-300 border-amber-400 dark:border-amber-700";
+      } else if (swapping.includes(index)) {
+        bgClass = "bg-rose-100 dark:bg-rose-950 text-rose-700 dark:text-rose-300 border-rose-400 dark:border-rose-700";
+      }
+      break;
+    case "selection":
+      if (index === min) {
+        bgClass = "bg-pink-100 dark:bg-pink-950 text-pink-700 dark:text-pink-300 border-pink-400 dark:border-pink-700";
+      } else if (comparing.includes(index)) {
+        bgClass = "bg-amber-100 dark:bg-amber-950 text-amber-700 dark:text-amber-300 border-amber-400 dark:border-amber-700";
+      } else if (swapping.includes(index)) {
+        bgClass = "bg-rose-100 dark:bg-rose-950 text-rose-700 dark:text-rose-300 border-rose-400 dark:border-rose-700";
+      } else if (index < active) {
+        bgClass = "bg-emerald-50 dark:bg-emerald-950/20 text-emerald-600 dark:text-emerald-400 border-emerald-200 dark:border-emerald-900";
+      } else if (index === active) {
+        bgClass = "bg-violet-200 dark:bg-violet-900 text-violet-800 dark:text-violet-200 border-violet-400 dark:border-violet-700";
+      }
+      break;
+    case "insertion":
+      if (index === key) {
+        bgClass = "bg-violet-200 dark:bg-violet-900 text-violet-800 dark:text-violet-200 border-violet-400 dark:border-violet-700";
+      } else if (comparing.includes(index)) {
+        bgClass = "bg-amber-100 dark:bg-amber-950 text-amber-700 dark:text-amber-300 border-amber-400 dark:border-amber-700";
+      } else if (shifting.includes(index)) {
+        bgClass = "bg-rose-100 dark:bg-rose-950 text-rose-700 dark:text-rose-300 border-rose-400 dark:border-rose-700";
+      } else if (index < key) {
+        bgClass = "bg-emerald-50 dark:bg-emerald-950/20 text-emerald-600 dark:text-emerald-400 border-emerald-200 dark:border-emerald-900";
+      }
+      break;
+    case "merge":
+      if (comparing.includes(index)) {
+        bgClass = "bg-amber-100 dark:bg-amber-950 text-amber-700 dark:text-amber-300 border-amber-400 dark:border-amber-700 animate-pulse";
+      } else if (writing.includes(index)) {
+        bgClass = "bg-rose-100 dark:bg-rose-950 text-rose-700 dark:text-rose-300 border-rose-400 dark:border-rose-700";
+      } else if (range.length === 2 && index >= range[0] && index <= range[1]) {
+        bgClass = "bg-indigo-200/50 dark:bg-indigo-900/35 text-indigo-800 dark:text-indigo-200 border-indigo-300 dark:border-indigo-800/80";
+      }
+      break;
+    case "quick":
+      if (index === pivot) {
+        bgClass = "bg-red-100 dark:bg-red-950 text-red-700 dark:text-red-300 border-red-400 dark:border-red-700";
+      } else if (comparing.includes(index)) {
+        bgClass = "bg-amber-100 dark:bg-amber-950 text-amber-700 dark:text-amber-300 border-amber-400 dark:border-amber-700";
+      } else if (swapping.includes(index)) {
+        bgClass = "bg-rose-100 dark:bg-rose-950 text-rose-700 dark:text-rose-300 border-rose-400 dark:border-rose-700";
+      } else if (index === boundary) {
+        bgClass = "bg-purple-100 dark:bg-purple-950 text-purple-700 dark:text-purple-300 border-purple-400 dark:border-purple-700";
+      }
+      break;
+    case "heap":
+      if (swapping.includes(index)) {
+        bgClass = "bg-rose-100 dark:bg-rose-950 text-rose-700 dark:text-rose-300 border-rose-400 dark:border-rose-700";
+      } else if (comparing.includes(index)) {
+        bgClass = "bg-amber-100 dark:bg-amber-950 text-amber-700 dark:text-amber-300 border-amber-400 dark:border-amber-700";
+      } else if (index === active) {
+        bgClass = "bg-purple-100 dark:bg-purple-950 text-purple-700 dark:text-purple-300 border-purple-400 dark:border-purple-700";
+      } else if (currentIndices.sortedStart !== undefined && index >= currentIndices.sortedStart) {
+        bgClass = "bg-emerald-50 dark:bg-emerald-950/20 text-emerald-600 dark:text-emerald-400 border-emerald-200 dark:border-emerald-900";
+      } else if (currentIndices.heapSize !== undefined && index >= currentIndices.heapSize) {
+        bgClass = "bg-slate-100 dark:bg-slate-900 text-slate-500 dark:text-slate-400 border-slate-300 dark:border-slate-700";
+      }
+      break;
+    default:
+      break;
+  }
+
+  return { bgClass, style: { height: `${Math.max(pctHeight, 15)}%` } };
+};
+const complexityInfo = [
+  {
+    complexity: "O(1)",
+    title: "Constant Time",
+    description:
+      "Execution time stays the same regardless of dataset size.",
+    examples: ["Array access", "Hash lookup"],
+  },
+  {
+    complexity: "O(log N)",
+    title: "Logarithmic Time",
+    description:
+      "Operations shrink the problem space each step.",
+    examples: ["Binary Search", "Balanced BST operations"],
+  },
+  {
+    complexity: "O(N)",
+    title: "Linear Time",
+    description:
+      "Runtime grows proportionally with input size.",
+    examples: ["Linear Search", "Single array traversal"],
+  },
+  {
+    complexity: "O(N log N)",
+    title: "Efficient Sorting",
+    description:
+      "Best practical complexity for comparison sorting algorithms.",
+    examples: ["Merge Sort", "Quick Sort", "Heap Sort"],
+  },
+  {
+    complexity: "O(N²)",
+    title: "Quadratic Time",
+    description:
+      "Performance slows heavily as input size increases.",
+    examples: ["Bubble Sort", "Insertion Sort", "Selection Sort"],
+  },
+  {
+    complexity: "O(2^N)",
+    title: "Exponential Time",
+    description:
+      "Execution grows explosively with each added input.",
+    examples: ["Recursive brute force", "Subset generation"],
+  },
+];
+
+const algorithmComparisons = [
+  {
+    name: "Bubble Sort",
+    best: "O(N)",
+    average: "O(N²)",
+    worst: "O(N²)",
+    space: "O(1)",
+    stable: true,
+  },
+  {
+    name: "Selection Sort",
+    best: "O(N²)",
+    average: "O(N²)",
+    worst: "O(N²)",
+    space: "O(1)",
+    stable: false,
+  },
+  {
+    name: "Insertion Sort",
+    best: "O(N)",
+    average: "O(N²)",
+    worst: "O(N²)",
+    space: "O(1)",
+    stable: true,
+  },
+  {
+    name: "Merge Sort",
+    best: "O(N log N)",
+    average: "O(N log N)",
+    worst: "O(N log N)",
+    space: "O(N)",
+    stable: true,
+  },
+  {
+    name: "Quick Sort",
+    best: "O(N log N)",
+    average: "O(N log N)",
+    worst: "O(N²)",
+    space: "O(log N)",
+    stable: false,
+  },
+  {
+    name: "Heap Sort",
+    best: "O(N log N)",
+    average: "O(N log N)",
+    worst: "O(N log N)",
+    space: "O(1)",
+    stable: false,
+  },
+];
+
+export default function ComparisonClient() {
+  const [arraySize, setArraySize] = useState(10);
+  const [baseArray, setBaseArray] = useState([45, 12, 89, 34, 67, 23, 78, 56, 90, 9]);
+
+  // Algorithm selection
+  const [algoKeyA, setAlgoKeyA] = useState("bubble");
+  const [algoKeyB, setAlgoKeyB] = useState("merge");
+
+  // Playback states
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isSorting, setIsSorting] = useState(false);
+  const [speed, setSpeed] = useState(1);
+
+  // Side A States
+  const [arrayA, setArrayA] = useState([]);
+  const [comparisonsA, setComparisonsA] = useState(0);
+  const [swapsA, setSwapsA] = useState(0);
+  const [currentStepA, setCurrentStepA] = useState(0);
+  const [totalStepsA, setTotalStepsA] = useState(0);
+  const [currentIndicesA, setCurrentIndicesA] = useState({});
+  const [completedA, setCompletedA] = useState(false);
+  const [completionTimeA, setCompletionTimeA] = useState(0);
+  const framesARef = useRef([]);
+
+  // Side B States
+  const [arrayB, setArrayB] = useState([]);
+  const [comparisonsB, setComparisonsB] = useState(0);
+  const [swapsB, setSwapsB] = useState(0);
+  const [currentStepB, setCurrentStepB] = useState(0);
+  const [totalStepsB, setTotalStepsB] = useState(0);
+  const [currentIndicesB, setCurrentIndicesB] = useState({});
+  const [completedB, setCompletedB] = useState(false);
+  const [completionTimeB, setCompletionTimeB] = useState(0);
+  const framesBRef = useRef([]);
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  // Max value for bar scaling
+  const maxValue = useMemo(() => {
+    return Math.max(...baseArray, 1);
+  }, [baseArray]);
+
+  // Handle array changes
+  const resetSorting = useCallback((arr = baseArray) => {
+    setIsPlaying(false);
+    setIsSorting(false);
+
+    // Reset Side A
+    setArrayA([...arr]);
+    setComparisonsA(0);
+    setSwapsA(0);
+    setCurrentStepA(0);
+    setTotalStepsA(0);
+    setCurrentIndicesA({});
+    setCompletedA(false);
+    setCompletionTimeA(0);
+    framesARef.current = [];
+
+    // Reset Side B
+    setArrayB([...arr]);
+    setComparisonsB(0);
+    setSwapsB(0);
+    setCurrentStepB(0);
+    setTotalStepsB(0);
+    setCurrentIndicesB({});
+    setCompletedB(false);
+    setCompletionTimeB(0);
+    framesBRef.current = [];
+  }, [baseArray]);
+
+  useEffect(() => {
+    resetSorting();
+  }, [algoKeyA, algoKeyB, resetSorting]);
+
+  // Synchronous tick loop
+  useEffect(() => {
+    if (!isPlaying) return;
+
+    if (!isSorting && !isGenerating) {
+      setIsGenerating(true);
+
+      const generateStates = async () => {
+        try {
+          const worker = new Worker(new URL("@/utils/sortingWorker.js", import.meta.url));
+          
+          const getFrames = (algo, array, id) => new Promise((resolve) => {
+            const listener = (e) => {
+              if (e.data.id === id) {
+                worker.removeEventListener('message', listener);
+                resolve(e.data);
+              }
+            };
+            worker.addEventListener('message', listener);
+            worker.postMessage({ algo, array, id });
+          });
+
+          const [resultA, resultB] = await Promise.all([
+            getFrames(algoKeyA, [...baseArray], 'A'),
+            getFrames(algoKeyB, [...baseArray], 'B')
+          ]);
+
+          framesARef.current = resultA.frames || [];
+          framesBRef.current = resultB.frames || [];
+          setTotalStepsA(resultA.steps || 0);
+          setTotalStepsB(resultB.steps || 0);
+          
+          worker.terminate();
+          setIsSorting(true);
+          setIsGenerating(false);
+        } catch (error) {
+          console.error("Worker error computing frames", error);
+          setIsGenerating(false);
+          setIsPlaying(false);
+        }
+      };
+      
+      generateStates();
+      return; // Wait for generation to complete
+    }
+
+    if (isGenerating) return;
+
+    const interval = setInterval(() => {
+      let isDoneA = completedA || currentStepA >= framesARef.current.length;
+      let isDoneB = completedB || currentStepB >= framesBRef.current.length;
+
+      if (!isDoneA) {
+        const nextA = framesARef.current[currentStepA];
+        if (nextA) {
+          setArrayA(nextA.array);
+          setComparisonsA(prev => prev + nextA.comparisons);
+          setSwapsA(prev => prev + nextA.swaps);
+          setCurrentIndicesA(nextA.currentIndices);
+          setCurrentStepA(prev => prev + 1);
+        }
+      } else if (!completedA) {
+        setCompletedA(true);
+      }
+
+      if (!isDoneB) {
+        const nextB = framesBRef.current[currentStepB];
+        if (nextB) {
+          setArrayB(nextB.array);
+          setComparisonsB(prev => prev + nextB.comparisons);
+          setSwapsB(prev => prev + nextB.swaps);
+          setCurrentIndicesB(nextB.currentIndices);
+          setCurrentStepB(prev => prev + 1);
+        }
+      } else if (!completedB) {
+        setCompletedB(true);
+      }
+
+      if (isDoneA && isDoneB) {
+        setIsPlaying(false);
+      }
+    }, 500 / speed);
+
+    return () => clearInterval(interval);
+  }, [isPlaying, isSorting, isGenerating, algoKeyA, algoKeyB, baseArray, speed, completedA, completedB, currentStepA, currentStepB]);
+
+  // Precision elapsed timer
+  useEffect(() => {
+    if (!isPlaying) return;
+
+    const timer = setInterval(() => {
+      if (!completedA && isSorting) {
+        setCompletionTimeA(prev => prev + 0.01);
+      }
+      if (!completedB && isSorting) {
+        setCompletionTimeB(prev => prev + 0.01);
+      }
+    }, 10);
+
+    return () => clearInterval(timer);
+  }, [isPlaying, completedA, completedB, isSorting]);
+
+  const handleGenerate = (newArray) => {
+    setBaseArray(newArray);
+    setArraySize(newArray.length);
+  };
+
+  const handleSizeChange = (e) => {
+    const size = parseInt(e.target.value);
+    setArraySize(size);
+    const newArray = Array.from({ length: size }, () => Math.floor(Math.random() * (95)) + 5);
+    setBaseArray(newArray);
+  };
+
+  const startPause = () => {
+    if (!baseArray.length) return;
+    setIsPlaying(!isPlaying);
+  };
+
+  const winnerMessage = useMemo(() => {
+    if (!completedA || !completedB) return null;
+    
+    const timeA = parseFloat(completionTimeA.toFixed(2));
+    const timeB = parseFloat(completionTimeB.toFixed(2));
+    
+    let winner = "";
+    let reason = "";
+
+    if (timeA < timeB) {
+      winner = ALGORITHMS[algoKeyA].name;
+      reason = `${winner} finished in ${timeA}s compared to ${ALGORITHMS[algoKeyB].name}'s ${timeB}s, saving ${(timeB - timeA).toFixed(2)}s on this dataset.`;
+    } else if (timeB < timeA) {
+      winner = ALGORITHMS[algoKeyB].name;
+      reason = `${winner} finished in ${timeB}s compared to ${ALGORITHMS[algoKeyA].name}'s ${timeA}s, saving ${(timeA - timeB).toFixed(2)}s on this dataset.`;
+    } else {
+      // Tie breaker by operations
+      const totalOpsA = comparisonsA + swapsA;
+      const totalOpsB = comparisonsB + swapsB;
+      if (totalOpsA < totalOpsB) {
+        winner = ALGORITHMS[algoKeyA].name;
+        reason = `Both finished in ${timeA}s, but ${winner} performed fewer total operations (${totalOpsA} ops vs ${totalOpsB} ops).`;
+      } else if (totalOpsB < totalOpsA) {
+        winner = ALGORITHMS[algoKeyB].name;
+        reason = `Both finished in ${timeB}s, but ${winner} performed fewer total operations (${totalOpsB} ops vs ${totalOpsA} ops).`;
+      } else {
+        return {
+          title: "It's an exact tie!",
+          desc: `Both algorithms completed in ${timeA}s and performed exactly ${totalOpsA} operations. This is a very rare and highly symmetrical dataset state!`,
+        };
+      }
+    }
+
+    return {
+      title: `${winner} Wins!`,
+      desc: reason,
+    };
+  }, [completedA, completedB, algoKeyA, algoKeyB, completionTimeA, completionTimeB, comparisonsA, swapsA, comparisonsB, swapsB]);
+
+  return (
+    <main className="container mx-auto px-4 py-6">
+      {/* Controls Container */}
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 p-4 sm:p-6 rounded-2xl shadow-sm mb-8">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          
+          {/* Column 1: Selector inputs */}
+          <div className="space-y-4">
+            <h3 className="text-sm font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
+              Select Algorithms
+            </h3>
+            <div className="space-y-3">
+              <div className="flex flex-col">
+                <label className="text-xs text-neutral-500 dark:text-neutral-400 mb-1 font-medium">Algorithm A (Left)</label>
+                <select
+                  id="algo-select-a"
+                  value={algoKeyA}
+                  onChange={(e) => setAlgoKeyA(e.target.value)}
+                  disabled={isSorting}
+                  className="w-full h-11 px-3 border rounded-xl bg-neutral-50 dark:bg-neutral-800 dark:border-neutral-700 text-[#1a1a1a] dark:text-white text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-[#a435f0]/30 transition-all cursor-pointer"
+                >
+                  {Object.entries(ALGORITHMS).map(([key, val]) => (
+                    <option key={key} value={key}>{val.name} ({val.complexity})</option>
+                  ))}
+                </select>
+              </div>
+              <div className="flex flex-col">
+                <label className="text-xs text-neutral-500 dark:text-neutral-400 mb-1 font-medium">Algorithm B (Right)</label>
+                <select
+                  id="algo-select-b"
+                  value={algoKeyB}
+                  onChange={(e) => setAlgoKeyB(e.target.value)}
+                  disabled={isSorting}
+                  className="w-full h-11 px-3 border rounded-xl bg-neutral-50 dark:bg-neutral-800 dark:border-neutral-700 text-[#1a1a1a] dark:text-white text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-[#a435f0]/30 transition-all cursor-pointer"
+                >
+                  {Object.entries(ALGORITHMS).map(([key, val]) => (
+                    <option key={key} value={key}>{val.name} ({val.complexity})</option>
+                  ))}
+                </select>
+              </div>
+            </div>
+          </div>
+
+          {/* Column 2: Dataset controls */}
+          <div className="space-y-4 border-t lg:border-t-0 lg:border-x border-neutral-200 dark:border-neutral-800 lg:px-6 pt-4 lg:pt-0">
+            <h3 className="text-sm font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
+              Dataset Controls
+            </h3>
+            <div className="space-y-3">
+              <div className="flex flex-col">
+                <div className="flex justify-between items-center mb-1">
+                  <label className="text-xs text-neutral-500 dark:text-neutral-400 font-medium">Array Size</label>
+                  <span className="text-xs font-bold text-[#a435f0]">{arraySize} items</span>
+                </div>
+                <input
+                  id="size-slider"
+                  type="range"
+                  min="5"
+                  max="30"
+                  value={arraySize}
+                  onChange={handleSizeChange}
+                  disabled={isSorting}
+                  className="w-full accent-[#a435f0] cursor-pointer"
+                />
+              </div>
+              <ArrayGenerator
+                onGenerate={handleGenerate}
+                disabled={isSorting}
+                isPrimary={baseArray.length === 0}
+              />
+              <CustomArrayInput
+                onUseCustomArray={handleGenerate}
+                disabled={isSorting}
+                className="w-full"
+              />
+            </div>
+          </div>
+
+          {/* Column 3: Playback and Speed */}
+          <div className="space-y-4 border-t lg:border-t-0 pt-4 lg:pt-0 flex flex-col justify-between">
+            <div>
+              <h3 className="text-sm font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-3">
+                Playback Controls
+              </h3>
+              <div className="flex flex-col sm:flex-row gap-3">
+                <button
+                  id="start-comparison-btn"
+                  onClick={startPause}
+                  disabled={!baseArray.length}
+                  className={`flex-1 h-12 rounded-xl flex items-center justify-center font-bold text-white transition-all shadow-sm ${
+                    isPlaying 
+                      ? "bg-amber-500 hover:bg-amber-600" 
+                      : "bg-[#a435f0] hover:bg-[#8f2cd6]"
+                  }`}
+                >
+                  {isPlaying ? (
+                    <>
+                      <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
+                      </svg>
+                      Pause
+                    </>
+                  ) : (
+                    <>
+                      <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M8 5v14l11-7z" />
+                      </svg>
+                      {isSorting ? "Resume" : "Start Comparison"}
+                    </>
+                  )}
+                </button>
+                <button
+                  id="reset-comparison-btn"
+                  onClick={() => resetSorting()}
+                  className="flex-1 h-12 rounded-xl border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-700 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-700 flex items-center justify-center font-bold transition-all"
+                >
+                  <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+                  </svg>
+                  Reset
+                </button>
+              </div>
+            </div>
+
+            <div className="mt-4 lg:mt-0">
+              <div className="flex justify-between items-center mb-1">
+                <label className="text-xs text-neutral-500 dark:text-neutral-400 font-medium">Simulation Speed</label>
+                <span className="text-xs font-bold text-[#a435f0]">{speed}x</span>
+              </div>
+              <input
+                id="speed-slider"
+                type="range"
+                min="0.5"
+                max="5.0"
+                step="0.5"
+                value={speed}
+                onChange={(e) => setSpeed(parseFloat(e.target.value))}
+                className="w-full accent-[#a435f0] cursor-pointer"
+              />
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      {/* Comparison Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        
+        {/* Left Side: Algorithm A */}
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden shadow-sm flex flex-col">
+          <div className="px-5 py-4 border-b border-neutral-100 dark:border-neutral-800 bg-neutral-50 dark:bg-gradient-to-b dark:from-neutral-800 dark:to-neutral-950 flex justify-between items-center">
+            <div>
+              <h2 className="font-extrabold text-neutral-900 dark:text-white text-lg">
+                {ALGORITHMS[algoKeyA].name}
+              </h2>
+              {currentStepA > currentStepB && (
+  <span className="inline-flex mt-2 items-center rounded-full bg-emerald-100 dark:bg-emerald-950/40 border border-emerald-300 dark:border-emerald-800 px-3 py-1 text-[10px] font-black uppercase tracking-wider text-emerald-700 dark:text-emerald-300">
+    Ahead
+  </span>
+)}
+              <p className="text-xs text-neutral-500 font-semibold tracking-wider uppercase">
+                Complexity: {ALGORITHMS[algoKeyA].complexity}
+              </p>
+            </div>
+            {completedA && (
+              <span className="bg-emerald-100 dark:bg-emerald-950/50 text-emerald-700 dark:text-emerald-300 text-xs font-bold px-3 py-1 rounded-full border border-emerald-300 dark:border-emerald-900 animate-bounce">
+                Completed
+              </span>
+            )}
+          </div>
+
+          {/* Metrics Panel A */}
+          <div className="grid grid-cols-4 border-b border-neutral-100 dark:border-neutral-800 text-center">
+            <div className="col-span-4 px-4 pt-4">
+  <div className="h-2 w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-800">
+    <div
+      className="h-full rounded-full bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-500 transition-all duration-300"
+      style={{
+        width: `${
+          totalStepsB > 0
+            ? (currentStepB / totalStepsB) * 100
+            : 0
+        }%`,
+      }}
+    />
+  </div>
+</div>
+            <div className="py-3 border-r border-neutral-100 dark:border-neutral-800">
+              <span className="block text-[11px] font-bold text-neutral-400 uppercase tracking-wider">Comparisons</span>
+              <span className="text-lg font-bold text-neutral-800 dark:text-neutral-200">{comparisonsA}</span>
+            </div>
+            <div className="py-3 border-r border-neutral-100 dark:border-neutral-800">
+              <span className="block text-[11px] font-bold text-neutral-400 uppercase tracking-wider">Swaps / Writes</span>
+              <span className="text-lg font-bold text-neutral-800 dark:text-neutral-200">{swapsA}</span>
+            </div>
+            <div className="py-3 border-r border-neutral-100 dark:border-neutral-800">
+              <span className="block text-[11px] font-bold text-neutral-400 uppercase tracking-wider">Steps</span>
+              <span className="text-lg font-bold text-neutral-800 dark:text-neutral-200">
+                {totalStepsA > 0 ? `${currentStepA}/${totalStepsA}` : "0"}
+              </span>
+            </div>
+            <div className="py-3">
+              <span className="block text-[11px] font-bold text-neutral-400 uppercase tracking-wider">Time</span>
+              <span className="text-lg font-bold text-[#a435f0]">{completionTimeA.toFixed(2)}s</span>
+            </div>
+          </div>
+
+          {/* Viz Box A */}
+          <div 
+            style={{ minHeight: "260px", minWidth: "100%" }}
+            className="p-6 h-[260px] sm:h-[300px] flex items-end justify-center gap-1.5 sm:gap-2 bg-neutral-50 dark:bg-neutral-900/50 border-b border-neutral-100 dark:border-neutral-800"
+          >
+            {arrayA.length > 0 ? (
+              arrayA.map((val, idx) => {
+                const { bgClass, style } = getBarStyles(idx, val, algoKeyA, currentIndicesA, completedA, maxValue);
+                return (
+                  <div
+                    key={idx}
+                    className="flex-1 flex flex-col justify-end items-center h-full group relative"
+                  >
+                    {/* Tooltip on Hover */}
+                    <span className="opacity-0 group-hover:opacity-100 absolute -top-8 bg-neutral-900 text-white text-xs px-2 py-1 rounded shadow-md pointer-events-none transition-opacity font-bold">
+                      {val}
+                    </span>
+                    <div
+                      style={style}
+                      className={`w-full rounded-t-lg sm:rounded-t-xl border-t-2 shadow-sm transition-all duration-300 hover:scale-[1.02] flex items-end justify-center pb-2 font-bold animate-in fade-in slide-in-from-bottom-2 ${getFontSize(val)} ${bgClass}`}
+                    >
+                      <span className="hidden sm:inline">{val}</span>
+                    </div>
+                    <span className="text-[10px] text-neutral-400 dark:text-neutral-600 font-bold mt-1.5">
+                      {idx}
+                    </span>
+                  </div>
+                );
+              })
+            ) : (
+              <p className="text-neutral-400 text-sm font-semibold">Generate an array to begin</p>
+            )}
+          </div>
+        </div>
+
+        {/* Right Side: Algorithm B */}
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden shadow-sm flex flex-col">
+          <div className="px-5 py-4 border-b border-neutral-100 dark:border-neutral-800 bg-neutral-50 dark:bg-gradient-to-b dark:from-neutral-800 dark:to-neutral-950 flex justify-between items-center">
+            <div>
+              <h2 className="font-extrabold text-neutral-900 dark:text-white text-lg">
+                {ALGORITHMS[algoKeyB].name}
+              </h2>
+              {currentStepB > currentStepA && (
+  <span className="inline-flex mt-2 items-center rounded-full bg-emerald-100 dark:bg-emerald-950/40 border border-emerald-300 dark:border-emerald-800 px-3 py-1 text-[10px] font-black uppercase tracking-wider text-emerald-700 dark:text-emerald-300">
+    Ahead
+  </span>
+)}
+              <p className="text-xs text-neutral-500 font-semibold tracking-wider uppercase">
+                Complexity: {ALGORITHMS[algoKeyB].complexity}
+              </p>
+            </div>
+            {completedB && (
+              <span className="bg-emerald-100 dark:bg-emerald-950/50 text-emerald-700 dark:text-emerald-300 text-xs font-bold px-3 py-1 rounded-full border border-emerald-300 dark:border-emerald-900 animate-bounce">
+                Completed
+              </span>
+            )}
+          </div>
+
+          {/* Metrics Panel B */}
+          <div className="grid grid-cols-4 border-b border-neutral-100 dark:border-neutral-800 text-center">
+            <div className="col-span-4 px-4 pt-4">
+  <div className="h-2 w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-800">
+    <div
+      className="h-full rounded-full bg-gradient-to-r from-violet-500 via-purple-500 to-indigo-500 transition-all duration-300"
+      style={{
+        width: `${
+          totalStepsA > 0
+            ? (currentStepA / totalStepsA) * 100
+            : 0
+        }%`,
+      }}
+    />
+  </div>
+</div>
+            <div className="py-3 border-r border-neutral-100 dark:border-neutral-800">
+              <span className="block text-[11px] font-bold text-neutral-400 uppercase tracking-wider">Comparisons</span>
+              <span className="text-lg font-bold text-neutral-800 dark:text-neutral-200">{comparisonsB}</span>
+            </div>
+            <div className="py-3 border-r border-neutral-100 dark:border-neutral-800">
+              <span className="block text-[11px] font-bold text-neutral-400 uppercase tracking-wider">Swaps / Writes</span>
+              <span className="text-lg font-bold text-neutral-800 dark:text-neutral-200">{swapsB}</span>
+            </div>
+            <div className="py-3 border-r border-neutral-100 dark:border-neutral-800">
+              <span className="block text-[11px] font-bold text-neutral-400 uppercase tracking-wider">Steps</span>
+              <span className="text-lg font-bold text-neutral-800 dark:text-neutral-200">
+                {totalStepsB > 0 ? `${currentStepB}/${totalStepsB}` : "0"}
+              </span>
+            </div>
+            <div className="py-3">
+              <span className="block text-[11px] font-bold text-neutral-400 uppercase tracking-wider">Time</span>
+              <span className="text-lg font-bold text-[#a435f0]">{completionTimeB.toFixed(2)}s</span>
+            </div>
+          </div>
+
+          {/* Viz Box B */}
+          <div 
+            style={{ minHeight: "260px", minWidth: "100%" }}
+            className="p-6 h-[260px] sm:h-[300px] flex items-end justify-center gap-1.5 sm:gap-2 bg-neutral-50 dark:bg-neutral-900/50 border-b border-neutral-100 dark:border-neutral-800"
+          >
+            {arrayB.length > 0 ? (
+              arrayB.map((val, idx) => {
+                const { bgClass, style } = getBarStyles(idx, val, algoKeyB, currentIndicesB, completedB, maxValue);
+                return (
+                  <div
+                    key={idx}
+                    className="flex-1 flex flex-col justify-end items-center h-full group relative"
+                  >
+                    {/* Tooltip on Hover */}
+                    <span className="opacity-0 group-hover:opacity-100 absolute -top-8 bg-neutral-900 text-white text-xs px-2 py-1 rounded shadow-md pointer-events-none transition-opacity font-bold">
+                      {val}
+                    </span>
+                    <div
+                      style={style}
+                      className={`w-full rounded-t-lg sm:rounded-t-xl border-t-2 shadow-sm transition-all duration-300 hover:scale-[1.02] flex items-end justify-center pb-2 font-bold animate-in fade-in slide-in-from-bottom-2 ${getFontSize(val)} ${bgClass}`}
+                    >
+                      <span className="hidden sm:inline">{val}</span>
+                    </div>
+                    <span className="text-[10px] text-neutral-400 dark:text-neutral-600 font-bold mt-1.5">
+                      {idx}
+                    </span>
+                  </div>
+                );
+              })
+            ) : (
+              <p className="text-neutral-400 text-sm font-semibold">Generate an array to begin</p>
+            )}
+          </div>
+        </div>
+
+      </div>
+
+      {/* Winner Summary Panel */}
+      {winnerMessage && (
+        <div className="mt-8 relative overflow-hidden bg-gradient-to-r from-violet-50 via-purple-50 to-indigo-50 dark:from-neutral-900 dark:via-neutral-900 dark:to-neutral-900 border border-violet-200 dark:border-neutral-800 p-6 rounded-2xl shadow-xl text-center max-w-2xl mx-auto animate-fade-in">
+          <div className="absolute inset-0 opacity-40 bg-[radial-gradient(circle_at_top_right,rgba(168,85,247,0.18),transparent_40%)]" />
+          <div className="relative w-14 h-14 bg-amber-100 dark:bg-amber-900/40 text-amber-500 rounded-full flex items-center justify-center mx-auto mb-4 border border-amber-300 dark:border-amber-800 shadow-lg animate-pulse">
+            <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H7c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.04-.42 1.99-1.07 2.75z" className="hidden" />
+              <path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v3c0 2.44 1.72 4.48 4 4.88V19h10v-4.12c2.28-.4 4-2.44 4-4.88V7c0-1.1-.9-2-2-2zm-12 5H5V7h2v3zm12 0h-2V7h2v3z" />
+            </svg>
+          </div>
+          <h2 className="relative text-xl sm:text-3xl font-black tracking-tight text-neutral-900 dark:text-white mb-2">
+            {winnerMessage.title}
+          </h2>
+          <p className="text-neutral-600 dark:text-neutral-300 text-sm sm:text-base leading-relaxed font-semibold">
+            {winnerMessage.desc}
+          </p>
+        </div>
+      )}
+    </main>
+  );
+}
diff --git a/src/app/visualizer/array/components/ChallengeMode.jsx b/src/app/visualizer/array/components/ChallengeMode.jsx
new file mode 100644
index 000000000..1cf9dc6fe
--- /dev/null
+++ b/src/app/visualizer/array/components/ChallengeMode.jsx
@@ -0,0 +1,190 @@
+"use client";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+const getAccuracy = ({ correct, answered }) => {
+  if (!answered) return 0;
+  return Math.round((correct / answered) * 100);
+};
+
+export function useSortingChallenge(enabled) {
+  const [activeQuestion, setActiveQuestion] = useState(null);
+  const [stats, setStats] = useState({ correct: 0, answered: 0 });
+  const enabledRef = useRef(enabled);
+  const resolveRef = useRef(null);
+  const timeoutRef = useRef(null);
+
+  useEffect(() => {
+    enabledRef.current = enabled;
+  }, [enabled]);
+
+  const finishQuestion = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    setActiveQuestion(null);
+
+    if (resolveRef.current) {
+      resolveRef.current();
+      resolveRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!enabled) finishQuestion();
+  }, [enabled, finishQuestion]);
+
+  useEffect(() => {
+    return () => finishQuestion();
+  }, [finishQuestion]);
+
+  const askChallenge = useCallback(
+    async (question) => {
+      if (!enabledRef.current) return;
+
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+
+      setActiveQuestion({
+        ...question,
+        selectedOptionId: null,
+        answered: false,
+      });
+
+      await new Promise((resolve) => {
+        resolveRef.current = resolve;
+      });
+    },
+    []
+  );
+
+  const submitAnswer = useCallback((optionId) => {
+    setActiveQuestion((question) => {
+      if (!question || question.answered) return question;
+
+      const isCorrect = optionId === question.correctOptionId;
+      setStats((current) => ({
+        correct: current.correct + (isCorrect ? 1 : 0),
+        answered: current.answered + 1,
+      }));
+
+      timeoutRef.current = setTimeout(finishQuestion, 900);
+
+      return {
+        ...question,
+        selectedOptionId: optionId,
+        answered: true,
+      };
+    });
+  }, [finishQuestion]);
+
+  const resetChallengeStats = useCallback(() => {
+    setStats({ correct: 0, answered: 0 });
+    finishQuestion();
+  }, [finishQuestion]);
+
+  return {
+    activeQuestion,
+    askChallenge,
+    resetChallengeStats,
+    stats,
+    submitAnswer,
+  };
+}
+
+export function createOptions(correctLabel, distractorLabels) {
+  const labels = [correctLabel, ...distractorLabels].filter(Boolean);
+  const uniqueLabels = [...new Set(labels)].slice(0, 4);
+
+  return uniqueLabels.map((label, index) => ({
+    id: index === 0 ? "correct" : `option-${index}`,
+    label,
+  }));
+}
+
+export default function ChallengeModePanel({
+  activeQuestion,
+  disabled = false,
+  enabled,
+  onEnabledChange,
+  onResetStats,
+  onSubmitAnswer,
+  stats,
+}) {
+  const accuracy = getAccuracy(stats);
+
+  return (
+    <div className="mt-4 rounded-lg border border-purple-200 bg-purple-50 p-3 dark:border-purple-900/60 dark:bg-purple-950/20">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <label className="flex items-center gap-3 text-sm font-medium text-gray-800 dark:text-gray-100">
+          <input
+            type="checkbox"
+            checked={enabled}
+            disabled={disabled}
+            onChange={(event) => onEnabledChange(event.target.checked)}
+            className="h-4 w-4 accent-[#a435f0]"
+          />
+          Interactive Challenge Mode
+        </label>
+
+        <div className="flex flex-wrap items-center gap-2 text-xs text-gray-700 dark:text-gray-300">
+          <span className="rounded bg-white px-2 py-1 dark:bg-neutral-900">
+            Correct: {stats.correct}/{stats.answered}
+          </span>
+          <span className="rounded bg-white px-2 py-1 dark:bg-neutral-900">
+            Accuracy: {accuracy}%
+          </span>
+          <button
+            type="button"
+            onClick={onResetStats}
+            className="rounded border border-[#a435f0] px-2 py-1 text-[#a435f0] transition-colors hover:bg-purple-100 dark:hover:bg-purple-900/40"
+          >
+            Reset Score
+          </button>
+        </div>
+      </div>
+
+      {activeQuestion && (
+        <div className="mt-3 rounded-lg border border-purple-200 bg-white p-3 dark:border-purple-900/60 dark:bg-neutral-950">
+          <div className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {activeQuestion.prompt}
+          </div>
+          <div className="mt-3 grid gap-2 sm:grid-cols-2">
+            {activeQuestion.options.map((option) => {
+              const isSelected = option.id === activeQuestion.selectedOptionId;
+              const isCorrect = option.id === activeQuestion.correctOptionId;
+              const showResult = activeQuestion.answered && (isSelected || isCorrect);
+
+              return (
+                <button
+                  key={option.id}
+                  type="button"
+                  disabled={activeQuestion.answered}
+                  onClick={() => onSubmitAnswer(option.id)}
+                  className={`rounded border px-3 py-2 text-left text-sm transition-colors disabled:cursor-default ${
+                    showResult && isCorrect
+                      ? "border-green-600 bg-green-100 text-green-900 dark:bg-green-900/40 dark:text-green-100"
+                      : showResult && isSelected
+                      ? "border-red-600 bg-red-100 text-red-900 dark:bg-red-900/40 dark:text-red-100"
+                      : "border-gray-200 bg-gray-50 hover:border-[#a435f0] hover:bg-purple-50 dark:border-gray-700 dark:bg-neutral-900 dark:hover:bg-purple-950/30"
+                  }`}
+                >
+                  {option.label}
+                </button>
+              );
+            })}
+          </div>
+          {activeQuestion.answered && (
+            <p className="mt-2 text-xs text-gray-600 dark:text-gray-400">
+              {activeQuestion.explanation}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/visualizer/array/countingsort/AlgorithmClient.jsx b/src/app/visualizer/array/countingsort/AlgorithmClient.jsx
new file mode 100644
index 000000000..8c52067ac
--- /dev/null
+++ b/src/app/visualizer/array/countingsort/AlgorithmClient.jsx
@@ -0,0 +1,32 @@
+import Animation from "@/app/visualizer/array/countingsort/animation";
+import Content from "@/app/visualizer/array/countingsort/content";
+import Code from "@/app/visualizer/array/countingsort/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import TrackVisit from "@/app/components/ui/TrackVisit";
+import VisualizerPageLayout, { createVisualizerPaths } from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <>
+      <TrackVisit name="Counting Sort" path="/visualizer/array/countingsort" category="Sorting" />
+      <VisualizerPageLayout
+        paths={createVisualizerPaths("Array", "Counting Sort")}
+        title="Counting Sort"
+        animation={<Animation />}
+        content={<Content />}
+        code={<Code />}
+        exploreOther={<ExploreOther title="Explore Sorting Algorithms" links={[
+          { text: "Bubble Sort", url: "/visualizer/array/bubblesort" },
+          { text: "Selection Sort", url: "/visualizer/array/selectionsort" },
+          { text: "Insertion Sort", url: "/visualizer/array/insertionsort" },
+          { text: "Merge Sort", url: "/visualizer/array/mergesort" },
+          { text: "Quick Sort", url: "/visualizer/array/quicksort" },
+          { text: "Comparison Mode", url: "/visualizer/array/comparison" },
+          { text: "Heap Sort", url: "/visualizer/array/heapsort" },
+        ]} />}
+      />
+    </>
+  );
+}
diff --git a/src/app/visualizer/array/countingsort/animation.jsx b/src/app/visualizer/array/countingsort/animation.jsx
new file mode 100644
index 000000000..8b6e8300b
--- /dev/null
+++ b/src/app/visualizer/array/countingsort/animation.jsx
@@ -0,0 +1,389 @@
+"use client";
+import React, { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import ArrayGenerator from "@/app/components/ui/randomArray";
+import CustomArrayInput from "@/app/components/ui/customArrayInput";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import { countingSortGenerator } from "@/features/algorithms/array/countingSortLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+  if (len <= 2) return "text-lg";
+  if (len === 3) return "text-sm";
+  return "text-xs";
+};
+
+const precomputeSteps = (inputArray) => {
+  const steps = [];
+  const generator = countingSortGenerator(inputArray);
+  
+  for (const frame of generator) {
+    const { type, payload } = frame;
+    
+    if (type === 'init') {
+      steps.push({
+        array: [...inputArray],
+        counts: [...payload.count],
+        output: [...payload.result],
+        comparisons: 0, swaps: 0, currentStep: 0,
+        currentIndices: { current: -1, countIndex: -1, outputIndex: -1 },
+        currentPhase: "", stepExplanation: "Starting Counting Sort...",
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'counting_start') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        counts: steps[steps.length - 1]?.counts || [],
+        output: steps[steps.length - 1]?.output || [],
+        comparisons: steps[steps.length - 1]?.comparisons || 0,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step || steps[steps.length - 1]?.currentStep || 0,
+        currentIndices: { current: -1, countIndex: -1, outputIndex: -1 },
+        currentPhase: "Counting Phase",
+        stepExplanation: "Scanning the input array and counting how often each value appears.",
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'counting') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        counts: steps[steps.length - 1]?.counts || [],
+        output: steps[steps.length - 1]?.output || [],
+        comparisons: payload.comparisons,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step,
+        currentIndices: { current: payload.current, countIndex: payload.countIndex, outputIndex: -1 },
+        currentPhase: "Counting Phase",
+        stepExplanation: `Incrementing count for value ${payload.value} at index ${payload.value}.`,
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'counted') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        counts: [...payload.count],
+        output: steps[steps.length - 1]?.output || [],
+        comparisons: steps[steps.length - 1]?.comparisons || 0,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step || steps[steps.length - 1]?.currentStep || 0,
+        currentIndices: steps[steps.length - 1]?.currentIndices || { current: -1, countIndex: -1, outputIndex: -1 },
+        currentPhase: "Counting Phase",
+        stepExplanation: steps[steps.length - 1]?.stepExplanation || "",
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'prefix_start') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        counts: steps[steps.length - 1]?.counts || [],
+        output: steps[steps.length - 1]?.output || [],
+        comparisons: steps[steps.length - 1]?.comparisons || 0,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step || steps[steps.length - 1]?.currentStep || 0,
+        currentIndices: { current: -1, countIndex: -1, outputIndex: -1 },
+        currentPhase: "Prefix Sum Phase",
+        stepExplanation: "Building cumulative counts to determine final sorted positions.",
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'prefix') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        counts: steps[steps.length - 1]?.counts || [],
+        output: steps[steps.length - 1]?.output || [],
+        comparisons: steps[steps.length - 1]?.comparisons || 0,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step,
+        currentIndices: { current: -1, countIndex: payload.countIndex, outputIndex: -1 },
+        currentPhase: "Prefix Sum Phase",
+        stepExplanation: `Computing cumulative count for value ${payload.value} (previous total ${payload.prevTotal}).`,
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'prefixed') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        counts: [...payload.count],
+        output: steps[steps.length - 1]?.output || [],
+        comparisons: steps[steps.length - 1]?.comparisons || 0,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step || steps[steps.length - 1]?.currentStep || 0,
+        currentIndices: steps[steps.length - 1]?.currentIndices || { current: -1, countIndex: -1, outputIndex: -1 },
+        currentPhase: "Prefix Sum Phase",
+        stepExplanation: steps[steps.length - 1]?.stepExplanation || "",
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'placement_start') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        counts: steps[steps.length - 1]?.counts || [],
+        output: steps[steps.length - 1]?.output || [],
+        comparisons: steps[steps.length - 1]?.comparisons || 0,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step || steps[steps.length - 1]?.currentStep || 0,
+        currentIndices: { current: -1, countIndex: -1, outputIndex: -1 },
+        currentPhase: "Placement Phase",
+        stepExplanation: "Placing elements into the output array using the count positions.",
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'placement') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        counts: steps[steps.length - 1]?.counts || [],
+        output: steps[steps.length - 1]?.output || [],
+        comparisons: steps[steps.length - 1]?.comparisons || 0,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step,
+        currentIndices: { current: payload.current, countIndex: payload.countIndex, outputIndex: payload.position },
+        currentPhase: "Placement Phase",
+        stepExplanation: `Placing ${payload.value} into output index ${payload.position}.`,
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'placed') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        counts: [...payload.count],
+        output: [...payload.result],
+        comparisons: steps[steps.length - 1]?.comparisons || 0,
+        swaps: payload.swaps,
+        currentStep: payload.step || steps[steps.length - 1]?.currentStep || 0,
+        currentIndices: steps[steps.length - 1]?.currentIndices || { current: -1, countIndex: -1, outputIndex: -1 },
+        currentPhase: "Placement Phase",
+        stepExplanation: steps[steps.length - 1]?.stepExplanation || "",
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'completed') {
+      const last = steps[steps.length - 1] || {};
+      steps.push({
+        array: [...payload.arr],
+        counts: last.counts || [],
+        output: [...payload.result],
+        comparisons: last.comparisons || 0,
+        swaps: last.swaps || 0,
+        currentStep: payload.step || last.currentStep || 0,
+        currentIndices: { current: -1, countIndex: -1, outputIndex: -1 },
+        currentPhase: "Completed",
+        stepExplanation: "Array is fully sorted using Counting Sort.",
+        sorted: true, totalSteps: payload.totalSteps || last.totalSteps,
+      });
+    }
+  }
+  return steps;
+};
+
+const CountingSortVisualizer = () => {
+  const [array, setArray] = useState([]);
+  const replayTimeoutRef = useRef(null);
+
+  const [visualState, setVisualState] = useState({
+    counts: [], output: [], comparisons: 0, swaps: 0, 
+    currentIndices: { current: -1, countIndex: -1, outputIndex: -1 },
+    currentPhase: "", stepExplanation: "", sorted: false, totalSteps: 0,
+  });
+
+  const steps = useMemo(() => {
+    if (array.length === 0) return [];
+    return precomputeSteps(array);
+  }, [array]);
+
+  const onStep = useCallback((step) => {
+    setVisualState({
+      counts: step.counts,
+      output: step.output,
+      comparisons: step.comparisons,
+      swaps: step.swaps,
+      currentIndices: step.currentIndices,
+      currentPhase: step.currentPhase,
+      stepExplanation: step.stepExplanation,
+      sorted: step.sorted,
+      totalSteps: step.totalSteps,
+    });
+  }, []);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 500 });
+  const currentStepData = steps[engine.currentStep];
+
+  const handleStart = useCallback(() => {
+    clearTimeout(replayTimeoutRef.current);
+    if (currentStepData?.sorted) {
+      engine.reset();
+      replayTimeoutRef.current = setTimeout(() => engine.play(), 50);
+    } else {
+      engine.play();
+    }
+  }, [engine, currentStepData]);
+
+  const handleReset = useCallback(() => {
+    setVisualState({
+      counts: [], output: [], comparisons: 0, swaps: 0, 
+      currentIndices: { current: -1, countIndex: -1, outputIndex: -1 },
+      currentPhase: "", stepExplanation: "", sorted: false, totalSteps: 0,
+    });
+    engine.reset();
+  }, [engine]);
+
+  useEffect(() => {
+    return () => clearTimeout(replayTimeoutRef.current);
+    }, []);
+
+  useVisualizerKeyboard({
+    onStart: handleStart,
+    onReset: handleReset,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+    onTogglePlayPause: engine.isPlaying ? engine.pause : handleStart,
+    speed: engine.speed / 500,
+    sorting: engine.isPlaying,
+    sorted: currentStepData?.sorted || false,
+  });
+
+  const handleExplainStep = () => {
+    const prompt = `I am currently looking at the Counting Sort algorithm, at step ${engine.currentStep} of ${steps.length}.
+Phase: ${visualState.currentPhase}
+Explanation on screen: ${visualState.stepExplanation}
+Input Array State: [${currentStepData?.array?.join(", ") || array.join(", ")}]
+Count Array State: [${visualState.counts.join(", ")}]
+Output Array State: [${visualState.output.join(", ")}]
+Currently processing index: ${visualState.currentIndices.current}
+Count index: ${visualState.currentIndices.countIndex}
+Output index: ${visualState.currentIndices.outputIndex}
+
+Please explain exactly what is happening in this step in detail.`;
+    
+    window.dispatchEvent(
+      new CustomEvent("chatbot-explain", { detail: { prompt } })
+    );
+  };
+
+  return (
+    <main className="container mx-auto px-6 pb-6">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Visualize Counting Sort as it counts values and places them into sorted order.
+      </p>
+
+      <div className="max-w-4xl mx-auto">
+        <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2 mb-2">
+            <div className="flex flex-col gap-1">
+              <ArrayGenerator onGenerate={(newArray) => { setArray(newArray); handleReset(); }} disabled={engine.isPlaying} isPrimary={array.length === 0} />
+              <CustomArrayInput onUseCustomArray={(newArray) => { setArray(newArray); handleReset(); }} disabled={engine.isPlaying} className="w-full" currentArray={array} />
+            </div>
+            <div className="flex flex-col gap-2 justify-between">
+              <button onClick={handleStart} disabled={!array.length} className="w-full disabled:opacity-75 bg-none bg-[#a435f0] hover:bg-[#8f2cd6] px-4 py-2 rounded shadow-sm transition-all duration-300 text-sm sm:text-base text-white">
+                {engine.isPlaying ? "Sorting..." : currentStepData?.sorted ? "Restart" : "Start Counting Sort"}
+              </button>
+              <button onClick={handleReset} disabled={engine.isPlaying} className="w-full bg-none text-[#a435f0] border border-[#a435f0] hover:bg-[#f3e8ff] dark:hover:bg-[#a435f0]/20 px-4 py-2 rounded transition-colors text-sm sm:text-base">
+                Reset All
+              </button>
+            </div>
+          </div>
+
+          {engine.isPlaying && (
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={engine.isPlaying ? engine.pause : handleStart}
+              speed={engine.speed / 500}
+              onSpeedChange={(s) => engine.setSpeed(s * 500)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={engine.reset}
+              onExplainStep={handleExplainStep}
+              disabled={steps.length === 0}
+            />
+          )}
+
+          {!engine.isPlaying && (
+            <div className="flex items-center gap-4 mb-4">
+              <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">Speed:</span>
+              <input type="range" min="0.5" max="5" step="0.5" value={engine.speed / 500} onChange={(e) => engine.setSpeed(parseFloat(e.target.value) * 500)} className="w-24 sm:w-32" />
+              <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">{engine.speed / 500}x</span>
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Count Operations:</div>
+              <div className="text-2xl">{visualState.comparisons}</div>
+            </div>
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Placements:</div>
+              <div className="text-2xl">{visualState.swaps}</div>
+            </div>
+          </div>
+
+          <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+            <div className="font-medium">Step:</div>
+            <div className="text-xl font-bold">{visualState.totalSteps > 0 ? `${engine.currentStep + 1} / ${steps.length}` : "—"}</div>
+            <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">{engine.currentStep > 0 && !visualState.sorted ? `Processing index ${visualState.currentIndices.current}` : visualState.sorted ? "Sorting complete!" : "Start sorting to see steps"}</div>
+          </div>
+          <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+            <div className="font-medium">Phase:</div>
+            <div className="text-sm sm:text-base text-gray-800 dark:text-gray-200">{visualState.currentPhase || (visualState.sorted ? "Completed" : "Ready to start")}</div>
+            <div className="font-medium mt-2">Explanation:</div>
+            <div className="text-sm text-gray-700 dark:text-gray-300 mt-1">{visualState.stepExplanation || (visualState.sorted ? "Array is fully sorted." : "Run the algorithm to see educational hints.")}</div>
+          </div>
+        </div>
+
+        <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-6">
+          <h2 className="text-lg sm:text-xl font-semibold mb-4">Input Array</h2>
+          {array.length > 0 ? (
+            <div className="flex flex-wrap gap-3 justify-center">
+              {array.map((value, index) => {
+                const isCurrent = index === visualState.currentIndices.current;
+                return (
+                  <div key={index} className="flex flex-col items-center">
+                    <div className={`w-14 h-14 flex items-center justify-center rounded-lg border-2 ${getFontSize(value)} font-bold transition-all duration-300 ${isCurrent ? "bg-yellow-400 border-yellow-600" : "bg-primary/80 border-primary"}`}>
+                      {value}
+                    </div>
+                    <div className="mt-1 text-xs text-gray-600 dark:text-gray-400">{index}</div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="text-center py-8 text-gray-500">{engine.isPlaying ? "Sorting..." : "Generate or enter an array to begin"}</div>
+          )}
+        </div>
+
+        <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-6">
+          <h2 className="text-lg sm:text-xl font-semibold mb-4">Count Array</h2>
+          {visualState.counts.length > 0 ? (
+            <div className="flex flex-wrap gap-2 justify-center">
+              {visualState.counts.map((value, index) => {
+                const isCountIndex = index === visualState.currentIndices.countIndex;
+                return (
+                  <div key={index} className="flex flex-col items-center">
+                    <div className={`w-14 h-14 flex items-center justify-center rounded-lg border-2 ${getFontSize(value)} font-bold transition-all duration-300 ${isCountIndex ? "bg-pink-400 border-pink-600" : "bg-gray-100 border-gray-300"}`}>
+                      {value}
+                    </div>
+                    <div className="mt-1 text-xs text-gray-600 dark:text-gray-400">{index}</div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="text-center py-8 text-gray-500">Counting array will appear here as the algorithm processes values.</div>
+          )}
+        </div>
+
+        <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
+          <h2 className="text-lg sm:text-xl font-semibold mb-4">Output Array</h2>
+          {visualState.output.length > 0 ? (
+            <div className="flex flex-wrap gap-3 justify-center">
+              {visualState.output.map((value, index) => {
+                const isOutputIndex = index === visualState.currentIndices.outputIndex;
+                return (
+                  <div key={index} className="flex flex-col items-center">
+                    <div className={`w-14 h-14 flex items-center justify-center rounded-lg border-2 ${getFontSize(value ?? "") } font-bold transition-all duration-300 ${isOutputIndex ? "bg-green-400 border-green-600" : "bg-gray-100 border-gray-300"}`}>
+                      {value ?? ""}
+                    </div>
+                    <div className="mt-1 text-xs text-gray-600 dark:text-gray-400">{index}</div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="text-center py-8 text-gray-500">The output array will populate as values are placed into sorted positions.</div>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default CountingSortVisualizer;
diff --git a/src/app/visualizer/array/countingsort/codeBlock.jsx b/src/app/visualizer/array/countingsort/codeBlock.jsx
new file mode 100644
index 000000000..cf2bffc0f
--- /dev/null
+++ b/src/app/visualizer/array/countingsort/codeBlock.jsx
@@ -0,0 +1,88 @@
+import React from "react";
+
+const CountingSortCodeBlock = () => {
+  const code = {
+    javascript: `function countingSort(arr) {
+  const max = Math.max(...arr);
+  const count = new Array(max + 1).fill(0);
+  const output = new Array(arr.length);
+
+  arr.forEach((value) => {
+    count[value] += 1;
+  });
+
+  for (let i = 1; i < count.length; i++) {
+    count[i] += count[i - 1];
+  }
+
+  for (let i = arr.length - 1; i >= 0; i--) {
+    const value = arr[i];
+    output[count[value] - 1] = value;
+    count[value] -= 1;
+  }
+
+  return output;
+}
+`,
+    python: `def counting_sort(arr):
+    if not arr:
+        return []
+
+    maximum = max(arr)
+    count = [0] * (maximum + 1)
+    output = [0] * len(arr)
+
+    for value in arr:
+        count[value] += 1
+
+    for i in range(1, len(count)):
+        count[i] += count[i - 1]
+
+    for value in reversed(arr):
+        output[count[value] - 1] = value
+        count[value] -= 1
+
+    return output
+`,
+    java: `public static int[] countingSort(int[] arr) {
+    int max = Arrays.stream(arr).max().orElse(0);
+    int[] count = new int[max + 1];
+    int[] output = new int[arr.length];
+
+    for (int value : arr) {
+        count[value]++;
+    }
+
+    for (int i = 1; i < count.length; i++) {
+        count[i] += count[i - 1];
+    }
+
+    for (int i = arr.length - 1; i >= 0; i--) {
+        int value = arr[i];
+        output[count[value] - 1] = value;
+        count[value]--;
+    }
+
+    return output;
+}
+`,
+  };
+
+  return (
+    <div className="bg-white dark:bg-neutral-950 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 p-6 mb-8">
+      <h2 className="text-2xl font-semibold mb-4">Counting Sort Code Example</h2>
+      <div className="space-y-6">
+        {Object.entries(code).map(([lang, snippet]) => (
+          <div key={lang}>
+            <h3 className="text-lg font-medium mb-2 capitalize">{lang}</h3>
+            <pre className="rounded-lg bg-[#f5f7ff] dark:bg-[#111827] p-4 overflow-x-auto text-xs sm:text-sm text-[#0f172a] dark:text-[#e5e7eb]">
+              <code>{snippet}</code>
+            </pre>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CountingSortCodeBlock;
diff --git a/src/app/visualizer/array/countingsort/content.jsx b/src/app/visualizer/array/countingsort/content.jsx
new file mode 100644
index 000000000..7c4d04a8d
--- /dev/null
+++ b/src/app/visualizer/array/countingsort/content.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const CountingSortContent = () => {
+  return (
+    <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-8">
+      <h2 className="text-2xl font-semibold mb-4">What is Counting Sort?</h2>
+      <p className="mb-4 text-gray-700 dark:text-gray-300">
+        Counting Sort is a non-comparison-based sorting algorithm that works by counting the number of occurrences of each value and using those counts to place elements into the correct position.
+      </p>
+      <ul className="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
+        <li>It is especially efficient when the range of input values is small relative to the number of elements.</li>
+        <li>Counting Sort builds a count array, computes prefix sums, and then places each element into the output array in stable order.</li>
+        <li>It does not perform swaps between arbitrary elements; instead, it moves elements directly to their final sorted positions.</li>
+      </ul>
+    </div>
+  );
+};
+
+export default CountingSortContent;
diff --git a/src/app/visualizer/array/countingsort/quiz.jsx b/src/app/visualizer/array/countingsort/quiz.jsx
new file mode 100644
index 000000000..443a91930
--- /dev/null
+++ b/src/app/visualizer/array/countingsort/quiz.jsx
@@ -0,0 +1,308 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const CountingSortQuiz = () => {
+  const questions = [
+    {
+      question: "What is the basic idea behind Counting Sort?",
+      options: [
+        "Compare adjacent elements repeatedly",
+        "Count the occurrences of each value",
+        "Divide the array into smaller arrays",
+        "Build a binary heap",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Counting Sort works by counting how many times each value appears and then reconstructing the sorted array.",
+    },
+    {
+      question: "Counting Sort is most efficient when:",
+      options: [
+        "The input values are within a small range",
+        "The array is already sorted",
+        "The array contains floating-point numbers",
+        "The array has no duplicate values",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Counting Sort performs best when the range of input values is relatively small.",
+    },
+    {
+      question: "What is the average time complexity of Counting Sort?",
+      options: [
+        "O(n²)",
+        "O(n log n)",
+        "O(n + k)",
+        "O(log n)",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Counting Sort has a time complexity of O(n + k), where n is the number of elements and k is the range of input values.",
+    },
+    {
+      question: "What does 'k' represent in the complexity O(n + k)?",
+      options: [
+        "Number of comparisons",
+        "Range of input values",
+        "Number of recursive calls",
+        "Output array size",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "k represents the range of possible input values.",
+    },
+    {
+      question: "Counting Sort belongs to which category?",
+      options: [
+        "Comparison-based sorting",
+        "Non-comparison sorting",
+        "Divide and Conquer",
+        "Recursive sorting",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Counting Sort is a non-comparison sorting algorithm.",
+    },
+    {
+      question: "Which auxiliary data structure is used in Counting Sort?",
+      options: [
+        "Stack",
+        "Queue",
+        "Count Array",
+        "Binary Heap",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "A Count Array stores the frequency of each value in the input.",
+    },
+    {
+      question: "Why is Counting Sort considered stable?",
+      options: [
+        "Because it uses recursion",
+        "Because equal elements preserve their relative order",
+        "Because it performs comparisons",
+        "Because it sorts in-place",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "A stable sorting algorithm keeps equal elements in the same relative order as the input.",
+    },
+    {
+      question: "What is the auxiliary space complexity of Counting Sort?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n + k)",
+        "O(n²)",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Extra memory is needed for the count array and output array.",
+    },
+    {
+      question: "What is the first step of Counting Sort?",
+      options: [
+        "Choose a pivot",
+        "Build the count array",
+        "Swap adjacent elements",
+        "Reverse the array",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The algorithm first counts the frequency of each element.",
+    },
+    {
+      question: "Why are prefix sums calculated in Counting Sort?",
+      options: [
+        "To remove duplicates",
+        "To determine the final position of each element",
+        "To reduce memory usage",
+        "To compare elements faster",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Prefix sums determine the correct index of each value in the sorted output.",
+    },
+    {
+      question: "Counting Sort becomes inefficient when:",
+      options: [
+        "The array is already sorted",
+        "The range of values is very large",
+        "The array contains duplicate values",
+        "The array is small",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "A large value range requires a large count array, increasing memory usage.",
+    },
+    {
+      question: "Counting Sort is mainly designed for:",
+      options: [
+        "Strings",
+        "Floating-point numbers",
+        "Integers within a bounded range",
+        "Graphs",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Counting Sort is designed primarily for integers within a limited range.",
+    },
+    {
+      question: "Can standard Counting Sort directly handle negative integers?",
+      options: [
+        "Yes",
+        "No",
+        "Only if the array is sorted",
+        "Only if duplicates are removed",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Standard Counting Sort assumes non-negative integers. Negative values require shifting the range.",
+    },
+    {
+      question: "Which algorithm commonly uses Counting Sort as a subroutine?",
+      options: [
+        "Heap Sort",
+        "Quick Sort",
+        "Radix Sort",
+        "Merge Sort",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Radix Sort relies on Counting Sort because it is stable.",
+    },
+    {
+      question: "Which statement about Counting Sort is correct?",
+      options: [
+        "It compares every pair of elements",
+        "It sorts elements by counting their occurrences",
+        "It always runs in O(n²)",
+        "It only works for sorted arrays",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Counting Sort sorts values based on their frequencies instead of comparing elements.",
+    },
+    {
+  question: "What is the primary purpose of the count array in Counting Sort?",
+  options: [
+    "Store sorted elements",
+    "Store the frequency of each value",
+    "Store pivot elements",
+    "Store recursive calls"
+  ],
+  correctAnswer: 1,
+  explanation: "The count array records how many times each value appears in the input array."
+},
+{
+  question: "Which type of sorting algorithm is Counting Sort?",
+  options: [
+    "Comparison-based",
+    "Non-comparison-based",
+    "Divide and Conquer",
+    "Greedy"
+  ],
+  correctAnswer: 1,
+  explanation: "Counting Sort sorts elements using their frequencies instead of comparing them."
+},
+{
+  question: "What happens after the frequencies are counted in Counting Sort?",
+  options: [
+    "The array is divided into halves",
+    "Prefix sums are calculated",
+    "The heap is built",
+    "The array is reversed"
+  ],
+  correctAnswer: 1,
+  explanation: "After counting frequencies, prefix sums are computed to determine the correct positions of elements."
+},
+{
+  question: "Why is an output array used in Counting Sort?",
+  options: [
+    "To reduce comparisons",
+    "To place elements in their correct sorted positions",
+    "To build a heap",
+    "To remove duplicates"
+  ],
+  correctAnswer: 1,
+  explanation: "The output array stores elements in their final sorted order while maintaining stability."
+},
+{
+  question: "What is the best-case time complexity of Counting Sort?",
+  options: [
+    "O(log n)",
+    "O(n)",
+    "O(n + k)",
+    "O(n²)"
+  ],
+  correctAnswer: 2,
+  explanation: "Counting Sort always runs in O(n + k) time regardless of the input order."
+},
+{
+  question: "Which of the following is a limitation of Counting Sort?",
+  options: [
+    "Cannot sort integers",
+    "Requires large memory when the value range is large",
+    "Always performs O(n²)",
+    "Cannot handle duplicate values"
+  ],
+  correctAnswer: 1,
+  explanation: "If the range of input values is very large, the count array becomes memory-intensive."
+},
+{
+  question: "Can Counting Sort correctly sort duplicate elements?",
+  options: [
+    "Yes",
+    "No",
+    "Only if duplicates are adjacent",
+    "Only after removing duplicates"
+  ],
+  correctAnswer: 0,
+  explanation: "Yes, Counting Sort correctly sorts duplicate values while preserving their relative order."
+},
+{
+  question: "Which scenario is ideal for using Counting Sort?",
+  options: [
+    "Sorting integers within a small value range",
+    "Sorting floating-point numbers",
+    "Sorting large-range values",
+    "Sorting graphs"
+  ],
+  correctAnswer: 0,
+  explanation: "Counting Sort is most efficient when sorting integers whose values fall within a limited range."
+},
+{
+  question: "Why is Counting Sort considered a stable sorting algorithm?",
+  options: [
+    "It performs recursive calls",
+    "It preserves the relative order of equal elements",
+    "It uses constant memory",
+    "It always sorts in-place"
+  ],
+  correctAnswer: 1,
+  explanation: "A stable sorting algorithm keeps equal elements in the same order as they appeared in the original array."
+},
+{
+  question: "Which real-world application is suitable for Counting Sort?",
+  options: [
+    "Sorting student marks within a fixed range",
+    "Sorting floating-point temperatures",
+    "Sorting web pages by content",
+    "Finding shortest paths in a graph"
+  ],
+  correctAnswer: 0,
+  explanation: "Counting Sort is well suited for sorting values like exam marks, ages, or grades that fall within a known limited range."
+}
+  ];
+
+  return (
+    <QuizEngine
+      title="Counting Sort Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default CountingSortQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/array/countingsort/quiz/page.jsx b/src/app/visualizer/array/countingsort/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/array/countingsort/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/exponential-search/AlgorithmClient.jsx b/src/app/visualizer/array/exponential-search/AlgorithmClient.jsx
new file mode 100644
index 000000000..a1ca3520f
--- /dev/null
+++ b/src/app/visualizer/array/exponential-search/AlgorithmClient.jsx
@@ -0,0 +1,39 @@
+import Animation from "@/app/visualizer/array/exponential-search/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/array/exponential-search/codeBlock";
+import Content from "@/app/visualizer/array/exponential-search/content";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Array", "Exponential Search")}
+      title="Exponential Search"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.exponentialSearch}
+          description="Mark Exponential Search as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[
+            { text: "Binary Search", url: "../binarysearch" },
+            { text: "Jump Search", url: "../jump-search" },
+            { text: "Fibonacci Search", url: "../fibonacci-search" },
+            { text: "Ternary Search", url: "../ternary-search" },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/exponential-search/animation.jsx b/src/app/visualizer/array/exponential-search/animation.jsx
new file mode 100644
index 000000000..33ab2469f
--- /dev/null
+++ b/src/app/visualizer/array/exponential-search/animation.jsx
@@ -0,0 +1,307 @@
+"use client";
+
+import React, { useState, useEffect, useMemo, useCallback } from "react";
+import GoButton from "@/app/components/ui/goButton";
+import ResetButton from "@/app/components/ui/resetButton";
+import {
+  saveToStorage,
+  loadFromStorage,
+  removeFromStorage,
+} from "@/utils/storage";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import { exponentialSearchGenerator } from "@/features/algorithms/array/exponentialSearchLogic";
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+  if (len <= 2) return "text-lg";
+  if (len === 3) return "text-sm";
+  return "text-xs";
+};
+
+export default function ExponentialSearch() {
+  const [arrayElements, setArrayElements] = useState(() =>
+    loadFromStorage("exponential-array-elements", "")
+  );
+  const [target, setTarget] = useState(() =>
+    loadFromStorage("exponential-target", "")
+  );
+
+  const [array, setArray] = useState([]);
+  const [targetValue, setTargetValue] = useState(null);
+
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+
+  const [visualState, setVisualState] = useState({
+    low: -1,
+    high: -1,
+    current: -1,
+    foundIndex: -1,
+    stepExplanation: "",
+    stepCount: 0,
+  });
+
+  useEffect(() => {
+    saveToStorage("exponential-array-elements", arrayElements);
+  }, [arrayElements]);
+
+  useEffect(() => {
+    saveToStorage("exponential-target", target);
+  }, [target]);
+
+  const steps = useMemo(() => {
+    if (array.length === 0 || targetValue === null) return [];
+    return Array.from(exponentialSearchGenerator(array, targetValue));
+  }, [array, targetValue]);
+
+  const onStep = useCallback(
+    (step) => {
+      let explanation = "";
+
+      switch (step.type) {
+        case "range":
+          explanation = `Expanding search range. Current index = ${step.current}.`;
+          break;
+
+        case "binary":
+          explanation = `Binary Search between index ${step.low} and ${step.high}. Mid = ${step.mid}.`;
+          break;
+
+        case "found":
+          explanation = `Target ${targetValue} found at index ${step.index}.`;
+          setMessage(`Element found at index ${step.index}`);
+          setMessageType("success");
+          break;
+
+        case "not_found":
+          explanation = `Target ${targetValue} is not present in the array.`;
+          setMessage("Element not found.");
+          setMessageType("error");
+          break;
+
+        default:
+          explanation = "";
+      }
+
+      setVisualState({
+        low: step.low ?? -1,
+        high: step.high ?? -1,
+        current: step.current ?? step.mid ?? -1,
+        foundIndex: step.index ?? -1,
+        stepExplanation: explanation,
+        stepCount: step.step || 0,
+      });
+    },
+    [targetValue]
+  );
+
+  const engine = useAnimationEngine({
+    steps,
+    onStep,
+    initialSpeed: 1000,
+  });
+
+  const isAnimating = engine.isPlaying || engine.currentStep > 0;
+
+  const generateRandomArray = () => {
+    const arr = Array.from(
+      { length: 10 },
+      () => Math.floor(Math.random() * 100)
+    ).sort((a, b) => a - b);
+
+    setArrayElements(arr.join(", "));
+  };
+
+  const handleReset = () => {
+    engine.reset();
+
+    removeFromStorage("exponential-array-elements");
+    removeFromStorage("exponential-target");
+
+    setArray([]);
+    setTargetValue(null);
+    setMessage("");
+    setMessageType("");
+
+    setVisualState({
+      low: -1,
+      high: -1,
+      current: -1,
+      foundIndex: -1,
+      stepExplanation: "",
+      stepCount: 0,
+    });
+
+    setArrayElements("");
+    setTarget("");
+  };
+
+  const handleGo = (e) => {
+    e.preventDefault();
+
+    engine.reset();
+
+    const arr = arrayElements
+      .split(",")
+      .map((x) => parseInt(x.trim()));
+
+    const targetNum = parseInt(target);
+
+    if (arr.some(isNaN) || isNaN(targetNum)) {
+      setMessage("Invalid input.");
+      setMessageType("warning");
+      return;
+    }
+
+    arr.sort((a, b) => a - b);
+
+    setArray(arr);
+    setTargetValue(targetNum);
+
+    setTimeout(() => engine.play(), 50);
+  };
+
+  useVisualizerKeyboard({
+    onTogglePlayPause: engine.isPlaying
+      ? engine.pause
+      : () => engine.play(),
+    onStepForward: engine.stepForward,
+    onStepBackward: engine.stepBackward,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+    speed: engine.speed / 1000,
+    sorting: engine.isPlaying,
+    sorted: engine.currentStep === steps.length - 1,
+  });
+
+  return (
+    <main className="container mx-auto">
+
+      <p className="text-lg text-center text-gray-600 mb-8">
+        Visualize how Exponential Search quickly finds the search range before applying Binary Search.
+      </p>
+
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border mb-8"
+      >
+
+        <div className="mb-4">
+          <label>Sorted Array</label>
+
+          <div className="flex gap-2">
+
+            <input
+              className="w-full border rounded-lg p-3"
+              value={arrayElements}
+              onChange={(e) => setArrayElements(e.target.value)}
+              disabled={isAnimating}
+            />
+
+            <button
+              type="button"
+              onClick={generateRandomArray}
+              className="px-4 rounded-lg bg-[#a435f0] text-white"
+            >
+              Random
+            </button>
+
+          </div>
+        </div>
+
+        <div className="mb-4">
+
+          <label>Target</label>
+
+          <div className="flex gap-2">
+
+            <input
+              type="number"
+              className="border rounded-lg p-3 w-48"
+              value={target}
+              onChange={(e) => setTarget(e.target.value)}
+            />
+
+            <GoButton
+              onClick={handleGo}
+              isAnimating={isAnimating}
+            />
+
+            <ResetButton
+              onReset={handleReset}
+              isAnimating={isAnimating}
+            />
+
+          </div>
+        </div>
+
+        {isAnimating && (
+          <PlaybackControls
+            isPlaying={engine.isPlaying}
+            onPlayPause={
+              engine.isPlaying ? engine.pause : () => engine.play()
+            }
+            speed={engine.speed / 1000}
+            onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+            onStepForward={engine.stepForward}
+            onStepBackward={engine.stepBackward}
+            onReset={engine.reset}
+            disabled={!steps.length}
+            progressText={`${engine.currentStep + 1}/${steps.length}`}
+          />
+        )}
+
+      </form>
+
+      {message && (
+        <div className="text-center mb-6 font-semibold">
+          {message}
+        </div>
+      )}
+
+      {visualState.stepExplanation && (
+        <div className="max-w-4xl mx-auto mb-6 p-4 border rounded-lg">
+          <p>{visualState.stepExplanation}</p>
+        </div>
+      )}
+
+      {array.length > 0 && (
+        <div className="flex flex-wrap justify-center gap-4">
+
+          {array.map((value, index) => {
+
+            let color =
+              "bg-gray-200 border-gray-400";
+
+            if (index === visualState.foundIndex) {
+              color = "bg-green-400 border-green-700";
+            } else if (index === visualState.current) {
+              color = "bg-yellow-300 border-yellow-600";
+            } else if (
+              visualState.low !== -1 &&
+              visualState.high !== -1 &&
+              index >= visualState.low &&
+              index <= visualState.high
+            ) {
+              color = "bg-blue-300 border-blue-600";
+            }
+
+            return (
+              <div
+                key={index}
+                className={`w-16 h-16 border-2 rounded-lg flex items-center justify-center ${color} ${getFontSize(
+                  value
+                )}`}
+              >
+                {value}
+              </div>
+            );
+          })}
+
+        </div>
+      )}
+
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/exponential-search/codeBlock.jsx b/src/app/visualizer/array/exponential-search/codeBlock.jsx
new file mode 100644
index 000000000..f5eb9635f
--- /dev/null
+++ b/src/app/visualizer/array/exponential-search/codeBlock.jsx
@@ -0,0 +1,231 @@
+"use client";
+
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const codeExamples = {
+  javascript: `// Exponential Search in JavaScript
+function binarySearch(arr, left, right, target) {
+    while (left <= right) {
+        let mid = Math.floor((left + right) / 2);
+
+        if (arr[mid] === target)
+            return mid;
+
+        if (arr[mid] < target)
+            left = mid + 1;
+        else
+            right = mid - 1;
+    }
+
+    return -1;
+}
+
+function exponentialSearch(arr, target) {
+    const n = arr.length;
+
+    if (arr[0] === target)
+        return 0;
+
+    let i = 1;
+
+    while (i < n && arr[i] <= target)
+        i *= 2;
+
+    return binarySearch(arr, i / 2, Math.min(i, n - 1), target);
+}
+
+// Example
+const arr = [2, 3, 4, 10, 40, 50, 60, 70];
+console.log(exponentialSearch(arr, 40));`,
+
+  python: `# Exponential Search in Python
+
+def binary_search(arr, left, right, target):
+    while left <= right:
+        mid = (left + right) // 2
+
+        if arr[mid] == target:
+            return mid
+
+        elif arr[mid] < target:
+            left = mid + 1
+
+        else:
+            right = mid - 1
+
+    return -1
+
+
+def exponential_search(arr, target):
+    n = len(arr)
+
+    if arr[0] == target:
+        return 0
+
+    i = 1
+
+    while i < n and arr[i] <= target:
+        i *= 2
+
+    return binary_search(arr, i // 2, min(i, n - 1), target)
+
+
+arr = [2,3,4,10,40,50,60]
+print(exponential_search(arr,40))`,
+
+  java: `// Exponential Search in Java
+
+class ExponentialSearch {
+
+    static int binarySearch(int[] arr,int left,int right,int target){
+
+        while(left<=right){
+
+            int mid=left+(right-left)/2;
+
+            if(arr[mid]==target)
+                return mid;
+
+            if(arr[mid]<target)
+                left=mid+1;
+            else
+                right=mid-1;
+        }
+
+        return -1;
+    }
+
+    static int exponentialSearch(int[] arr,int target){
+
+        int n=arr.length;
+
+        if(arr[0]==target)
+            return 0;
+
+        int i=1;
+
+        while(i<n && arr[i]<=target)
+            i*=2;
+
+        return binarySearch(arr,i/2,Math.min(i,n-1),target);
+    }
+
+    public static void main(String args[]){
+
+        int arr[]={2,3,4,10,40,50,60};
+
+        System.out.println(exponentialSearch(arr,40));
+    }
+}`,
+
+  c: `// Exponential Search in C
+
+#include<stdio.h>
+
+int binarySearch(int arr[],int left,int right,int target){
+
+    while(left<=right){
+
+        int mid=left+(right-left)/2;
+
+        if(arr[mid]==target)
+            return mid;
+
+        if(arr[mid]<target)
+            left=mid+1;
+        else
+            right=mid-1;
+    }
+
+    return -1;
+}
+
+int exponentialSearch(int arr[],int n,int target){
+
+    if(arr[0]==target)
+        return 0;
+
+    int i=1;
+
+    while(i<n && arr[i]<=target)
+        i*=2;
+
+    return binarySearch(arr,i/2,(i<n)?i:n-1,target);
+}
+
+int main(){
+
+    int arr[]={2,3,4,10,40,50,60};
+
+    int n=sizeof(arr)/sizeof(arr[0]);
+
+    printf("%d",exponentialSearch(arr,n,40));
+
+    return 0;
+}`,
+
+  cpp: `// Exponential Search in C++
+
+#include<iostream>
+using namespace std;
+
+int binarySearch(int arr[],int left,int right,int target){
+
+    while(left<=right){
+
+        int mid=left+(right-left)/2;
+
+        if(arr[mid]==target)
+            return mid;
+
+        if(arr[mid]<target)
+            left=mid+1;
+        else
+            right=mid-1;
+    }
+
+    return -1;
+}
+
+int exponentialSearch(int arr[],int n,int target){
+
+    if(arr[0]==target)
+        return 0;
+
+    int i=1;
+
+    while(i<n && arr[i]<=target)
+        i*=2;
+
+    return binarySearch(arr,i/2,min(i,n-1),target);
+}
+
+int main(){
+
+    int arr[]={2,3,4,10,40,50,60};
+
+    int n=sizeof(arr)/sizeof(arr[0]);
+
+    cout<<exponentialSearch(arr,n,40);
+
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: "exponentialSearch.js",
+  python: "exponential_search.py",
+  java: "ExponentialSearch.java",
+  c: "exponential_search.c",
+  cpp: "exponential_search.cpp",
+};
+
+const ExponentialSearchCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default ExponentialSearchCode;
\ No newline at end of file
diff --git a/src/app/visualizer/array/exponential-search/content.jsx b/src/app/visualizer/array/exponential-search/content.jsx
new file mode 100644
index 000000000..dffd28485
--- /dev/null
+++ b/src/app/visualizer/array/exponential-search/content.jsx
@@ -0,0 +1,239 @@
+"use client";
+
+import React from "react";
+
+export default function ExponentialSearchContent() {
+  return (
+    <div className="space-y-10">
+
+      {/* Overview */}
+      <section>
+        <h2 className="text-3xl font-bold mb-4">Overview</h2>
+
+        <p className="text-gray-700 dark:text-gray-300 leading-8">
+          <strong>Exponential Search</strong> is an efficient searching
+          algorithm designed for <strong>sorted arrays</strong>. Instead of
+          searching the entire array, it first finds a range where the target
+          element may exist by repeatedly doubling the search index. Once the
+          range is identified, it performs a standard Binary Search within that
+          range.
+        </p>
+
+        <p className="text-gray-700 dark:text-gray-300 leading-8 mt-4">
+          This technique is especially useful when the size of the array is
+          unknown or when the target element is located near the beginning of
+          the array.
+        </p>
+      </section>
+
+      {/* Working */}
+      <section>
+        <h2 className="text-3xl font-bold mb-4">
+          How Exponential Search Works
+        </h2>
+
+        <ol className="list-decimal pl-6 space-y-3 text-gray-700 dark:text-gray-300 leading-8">
+          <li>Check whether the first element is the target.</li>
+          <li>
+            Start from index <code>1</code>.
+          </li>
+          <li>
+            Double the index (1, 2, 4, 8, 16...) until the target is smaller
+            than or equal to the current element or the array ends.
+          </li>
+          <li>
+            The target must lie between the previous and current indices.
+          </li>
+          <li>
+            Perform Binary Search within that identified range.
+          </li>
+        </ol>
+      </section>
+
+      {/* Example */}
+      <section>
+        <h2 className="text-3xl font-bold mb-4">Example</h2>
+
+        <div className="bg-gray-100 dark:bg-neutral-900 rounded-lg p-6">
+
+          <p>
+            <strong>Array:</strong>
+          </p>
+
+          <p className="font-mono mt-2">
+            [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
+          </p>
+
+          <p className="mt-4">
+            <strong>Target:</strong> 14
+          </p>
+
+          <ul className="list-disc pl-6 mt-4 space-y-2">
+
+            <li>Start at index 1 → value = 4</li>
+
+            <li>Double → index 2 → value = 6</li>
+
+            <li>Double → index 4 → value = 10</li>
+
+            <li>Double → index 8 → value = 18</li>
+
+            <li>
+              Target lies between indices <strong>4</strong> and{" "}
+              <strong>8</strong>.
+            </li>
+
+            <li>Binary Search is performed between these indices.</li>
+
+            <li>Target found at index 6.</li>
+
+          </ul>
+
+        </div>
+      </section>
+
+      {/* Complexity */}
+      <section>
+
+        <h2 className="text-3xl font-bold mb-4">
+          Time Complexity
+        </h2>
+
+        <div className="overflow-x-auto">
+
+          <table className="min-w-full border border-gray-300 dark:border-gray-700">
+
+            <thead>
+
+              <tr className="bg-gray-100 dark:bg-neutral-900">
+
+                <th className="border p-3">Case</th>
+
+                <th className="border p-3">Complexity</th>
+
+              </tr>
+
+            </thead>
+
+            <tbody>
+
+              <tr>
+
+                <td className="border p-3">Best Case</td>
+
+                <td className="border p-3">O(1)</td>
+
+              </tr>
+
+              <tr>
+
+                <td className="border p-3">Average Case</td>
+
+                <td className="border p-3">O(log n)</td>
+
+              </tr>
+
+              <tr>
+
+                <td className="border p-3">Worst Case</td>
+
+                <td className="border p-3">O(log n)</td>
+
+              </tr>
+
+            </tbody>
+
+          </table>
+
+        </div>
+
+      </section>
+
+      {/* Space */}
+      <section>
+
+        <h2 className="text-3xl font-bold mb-4">
+          Space Complexity
+        </h2>
+
+        <p className="text-gray-700 dark:text-gray-300 leading-8">
+          Exponential Search requires only a few extra variables while searching
+          and therefore uses:
+        </p>
+
+        <div className="mt-4 text-xl font-semibold">
+          O(1)
+        </div>
+
+      </section>
+
+      {/* Advantages */}
+      <section>
+
+        <h2 className="text-3xl font-bold mb-4">
+          Advantages
+        </h2>
+
+        <ul className="list-disc pl-6 space-y-3 text-gray-700 dark:text-gray-300">
+
+          <li>Very efficient for sorted arrays.</li>
+
+          <li>Excellent when array size is unknown.</li>
+
+          <li>Finds the search range very quickly.</li>
+
+          <li>Uses Binary Search for efficient searching.</li>
+
+          <li>Requires constant extra memory.</li>
+
+        </ul>
+
+      </section>
+
+      {/* Disadvantages */}
+      <section>
+
+        <h2 className="text-3xl font-bold mb-4">
+          Disadvantages
+        </h2>
+
+        <ul className="list-disc pl-6 space-y-3 text-gray-700 dark:text-gray-300">
+
+          <li>Works only on sorted arrays.</li>
+
+          <li>Less useful on unsorted data.</li>
+
+          <li>
+            Requires Binary Search after identifying the search range.
+          </li>
+
+        </ul>
+
+      </section>
+
+      {/* Applications */}
+      <section>
+
+        <h2 className="text-3xl font-bold mb-4">
+          Applications
+        </h2>
+
+        <ul className="list-disc pl-6 space-y-3 text-gray-700 dark:text-gray-300">
+
+          <li>Searching in infinite or unbounded arrays.</li>
+
+          <li>Large sorted databases.</li>
+
+          <li>Memory-efficient searching.</li>
+
+          <li>Search engines and indexing systems.</li>
+
+          <li>Competitive programming.</li>
+
+        </ul>
+
+      </section>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/exponential-search/page.jsx b/src/app/visualizer/array/exponential-search/page.jsx
new file mode 100644
index 000000000..8df228e29
--- /dev/null
+++ b/src/app/visualizer/array/exponential-search/page.jsx
@@ -0,0 +1,55 @@
+import Animation from "@/app/visualizer/array/exponential-search/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/array/exponential-search/codeBlock";
+import Content from "@/app/visualizer/array/exponential-search/content";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Array", "Exponential Search")}
+      title="Exponential Search"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.exponentialSearch}
+          description="Mark Exponential Search as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[
+            {
+              text: "Linear Search",
+              url: "../linearsearch",
+            },
+            {
+              text: "Binary Search",
+              url: "../binarysearch",
+            },
+            {
+              text: "Ternary Search",
+              url: "../ternary-search",
+            },
+            {
+              text: "Jump Search",
+              url: "../jump-search",
+            },
+            {
+              text: "Fibonacci Search",
+              url: "../fibonacci-search",
+            },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/exponential-search/quiz.jsx b/src/app/visualizer/array/exponential-search/quiz.jsx
new file mode 100644
index 000000000..f0fcf62a2
--- /dev/null
+++ b/src/app/visualizer/array/exponential-search/quiz.jsx
@@ -0,0 +1,256 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const exponentialSearchQuestions = [
+  {
+    question: "What is the primary requirement for Exponential Search?",
+    options: [
+      "The array must be sorted.",
+      "The array must be unsorted.",
+      "The array must contain duplicate elements.",
+      "The array must be circular.",
+    ],
+    answer: "The array must be sorted.",
+    explanation:
+      "Exponential Search works only on sorted arrays because it performs Binary Search on a selected range.",
+  },
+  {
+    question: "What is the first step of Exponential Search?",
+    options: [
+      "Check the first element.",
+      "Perform Binary Search.",
+      "Sort the array.",
+      "Jump by √n positions.",
+    ],
+    answer: "Check the first element.",
+    explanation:
+      "The algorithm first checks if the target is at index 0.",
+  },
+  {
+    question: "How does Exponential Search expand the search range?",
+    options: [
+      "By doubling the index.",
+      "By adding 1 each time.",
+      "By adding √n.",
+      "By halving the range.",
+    ],
+    answer: "By doubling the index.",
+    explanation:
+      "The search index grows exponentially (1, 2, 4, 8, ...).",
+  },
+  {
+    question: "Which algorithm is used after the search range is identified?",
+    options: [
+      "Binary Search",
+      "Linear Search",
+      "Jump Search",
+      "Interpolation Search",
+    ],
+    answer: "Binary Search",
+    explanation:
+      "Binary Search is applied within the identified range.",
+  },
+  {
+    question: "What is the best-case time complexity of Exponential Search?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(√n)",
+    ],
+    answer: "O(1)",
+    explanation:
+      "If the target is the first element, only one comparison is required.",
+  },
+  {
+    question: "What is the average-case time complexity of Exponential Search?",
+    options: [
+      "O(log n)",
+      "O(n)",
+      "O(√n)",
+      "O(n log n)",
+    ],
+    answer: "O(log n)",
+    explanation:
+      "Both range finding and Binary Search together take logarithmic time.",
+  },
+  {
+    question: "What is the worst-case time complexity of Exponential Search?",
+    options: [
+      "O(log n)",
+      "O(n)",
+      "O(√n)",
+      "O(1)",
+    ],
+    answer: "O(log n)",
+    explanation:
+      "The algorithm performs logarithmic range expansion followed by Binary Search.",
+  },
+  {
+    question: "What is the space complexity of Exponential Search?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(√n)",
+    ],
+    answer: "O(1)",
+    explanation:
+      "Only a constant amount of extra memory is used.",
+  },
+  {
+    question: "Exponential Search is most suitable for:",
+    options: [
+      "Sorted arrays with unknown size.",
+      "Graphs.",
+      "Linked Lists.",
+      "Stacks.",
+    ],
+    answer: "Sorted arrays with unknown size.",
+    explanation:
+      "It is commonly used for searching in infinite or unbounded sorted arrays.",
+  },
+  {
+    question: "Which sequence represents the index expansion?",
+    options: [
+      "1, 2, 4, 8, 16...",
+      "1, 3, 5, 7...",
+      "2, 3, 5, 7...",
+      "1, 4, 9, 16...",
+    ],
+    answer: "1, 2, 4, 8, 16...",
+    explanation:
+      "The index doubles during range expansion.",
+  },
+  {
+    question: "Exponential Search belongs to which category?",
+    options: [
+      "Searching Algorithm",
+      "Sorting Algorithm",
+      "Greedy Algorithm",
+      "Dynamic Programming",
+    ],
+    answer: "Searching Algorithm",
+    explanation:
+      "It is a searching algorithm for sorted arrays.",
+  },
+  {
+    question: "What happens after the search range is found?",
+    options: [
+      "Binary Search is performed.",
+      "Merge Sort is applied.",
+      "The search stops.",
+      "Linear Search is applied.",
+    ],
+    answer: "Binary Search is performed.",
+    explanation:
+      "Binary Search efficiently searches within the identified range.",
+  },
+  {
+    question: "Which of the following algorithms is closely related to Exponential Search?",
+    options: [
+      "Binary Search",
+      "Bubble Sort",
+      "Selection Sort",
+      "DFS",
+    ],
+    answer: "Binary Search",
+    explanation:
+      "Exponential Search internally uses Binary Search.",
+  },
+  {
+    question: "If the target is greater than the current value during range expansion, what happens?",
+    options: [
+      "The index is doubled.",
+      "The search ends.",
+      "The index is halved.",
+      "The array is sorted.",
+    ],
+    answer: "The index is doubled.",
+    explanation:
+      "The search range expands exponentially until it includes the target.",
+  },
+  {
+    question: "Which search algorithm first determines a search range before searching?",
+    options: [
+      "Exponential Search",
+      "Linear Search",
+      "Binary Search",
+      "Sequential Search",
+    ],
+    answer: "Exponential Search",
+    explanation:
+      "It first identifies a suitable range before applying Binary Search.",
+  },
+  {
+    question: "Can Exponential Search work efficiently on unsorted arrays?",
+    options: [
+      "No",
+      "Yes",
+      "Only if duplicates exist",
+      "Only for small arrays",
+    ],
+    answer: "No",
+    explanation:
+      "The array must be sorted.",
+  },
+  {
+    question: "Which operation is repeatedly performed during range expansion?",
+    options: [
+      "Doubling the index",
+      "Halving the array",
+      "Swapping elements",
+      "Sorting the array",
+    ],
+    answer: "Doubling the index",
+    explanation:
+      "The index increases exponentially.",
+  },
+  {
+    question: "Which data structure is best suited for Exponential Search?",
+    options: [
+      "Array",
+      "Queue",
+      "Stack",
+      "Tree",
+    ],
+    answer: "Array",
+    explanation:
+      "Arrays provide constant-time indexed access.",
+  },
+  {
+    question: "If the target is not found, the algorithm returns:",
+    options: [
+      "-1",
+      "0",
+      "1",
+      "NULL",
+    ],
+    answer: "-1",
+    explanation:
+      "Returning -1 indicates the element is absent.",
+  },
+  {
+    question: "What is the main advantage of Exponential Search?",
+    options: [
+      "Quickly finds a search range before Binary Search.",
+      "Works on unsorted arrays.",
+      "Requires no comparisons.",
+      "Uses recursion only.",
+    ],
+    answer: "Quickly finds a search range before Binary Search.",
+    explanation:
+      "Its exponential range expansion makes it efficient for large sorted arrays and unknown-sized datasets.",
+  },
+];
+
+export default function ExponentialSearchQuiz() {
+  return (
+    <QuizEngine
+      title="Exponential Search Quiz"
+      questions={exponentialSearchQuestions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/exponential-search/quiz/page.jsx b/src/app/visualizer/array/exponential-search/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/array/exponential-search/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/fibonacci-search/AlgorithmClient.jsx b/src/app/visualizer/array/fibonacci-search/AlgorithmClient.jsx
new file mode 100644
index 000000000..e46b400d3
--- /dev/null
+++ b/src/app/visualizer/array/fibonacci-search/AlgorithmClient.jsx
@@ -0,0 +1,42 @@
+import Animation from "@/app/visualizer/array/fibonacci-search/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/array/fibonacci-search/codeBlock";
+import Content from "@/app/visualizer/array/fibonacci-search/content";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Array", "Fibonacci Search")}
+      title="Fibonacci Search"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[
+            {
+              text: "Linear Search",
+              url: "../linearsearch",
+            },
+            {
+              text: "Binary Search",
+              url: "../binarysearch",
+            },
+            {
+              text: "Ternary Search",
+              url: "../ternary-search",
+            },
+            {
+              text: "Jump Search",
+              url: "../jump-search",
+            },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/fibonacci-search/animation.jsx b/src/app/visualizer/array/fibonacci-search/animation.jsx
new file mode 100644
index 000000000..70e684f83
--- /dev/null
+++ b/src/app/visualizer/array/fibonacci-search/animation.jsx
@@ -0,0 +1,328 @@
+"use client";
+
+import React, { useState, useEffect, useMemo, useCallback } from "react";
+import GoButton from "@/app/components/ui/goButton";
+import ResetButton from "@/app/components/ui/resetButton";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import {
+  saveToStorage,
+  loadFromStorage,
+  removeFromStorage,
+} from "@/utils/storage";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import { fibonacciSearchGenerator } from "@/features/algorithms/array/fibonacciSearchLogic";
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+  if (len <= 2) return "text-lg";
+  if (len === 3) return "text-sm";
+  return "text-xs";
+};
+
+export default function FibonacciSearch() {
+  const [arrayElements, setArrayElements] = useState(() =>
+    loadFromStorage("fib-array-elements", "")
+  );
+
+  const [target, setTarget] = useState(() =>
+    loadFromStorage("fib-target", "")
+  );
+
+  const [array, setArray] = useState([]);
+  const [targetValue, setTargetValue] = useState(null);
+
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+
+  const [visualState, setVisualState] = useState({
+    offset: -1,
+    probe: -1,
+    foundIndex: -1,
+    stepExplanation: "",
+    stepCount: 0,
+  });
+
+  useEffect(() => {
+    saveToStorage("fib-array-elements", arrayElements);
+  }, [arrayElements]);
+
+  useEffect(() => {
+    saveToStorage("fib-target", target);
+  }, [target]);
+
+  const steps = useMemo(() => {
+    if (array.length === 0 || targetValue === null) return [];
+    return Array.from(fibonacciSearchGenerator(array, targetValue));
+  }, [array, targetValue]);
+
+  const onStep = useCallback(
+    (step) => {
+      let explanation = "";
+      let msg = "";
+      let msgType = "";
+
+      switch (step.type) {
+        case "checking":
+          explanation = `Step ${step.step}: Probe index = ${step.i}. Compare arr[${step.i}] = ${step.value} with target ${targetValue}.`;
+          break;
+
+        case "move_right":
+          explanation = `arr[${step.i}] < ${targetValue}. Move to the right portion.`;
+          break;
+
+        case "move_left":
+          explanation = `arr[${step.i}] > ${targetValue}. Continue searching in the left portion.`;
+          break;
+
+        case "found":
+          explanation = `Target ${targetValue} found at index ${step.i}.`;
+          msg = `Element found at index ${step.i}`;
+          msgType = "success";
+          break;
+
+        case "not_found":
+          explanation = `Target ${targetValue} is not present in the array.`;
+          msg = "Element not found.";
+          msgType = "error";
+          break;
+
+        default:
+          break;
+      }
+
+      setVisualState({
+        offset: step.offset ?? -1,
+        probe: step.i ?? -1,
+        foundIndex: step.type === "found" ? step.i : -1,
+        stepExplanation: explanation,
+        stepCount: step.step || 0,
+      });
+
+      if (msg) setMessage(msg);
+      if (msgType) setMessageType(msgType);
+    },
+    [targetValue]
+  );
+
+  const engine = useAnimationEngine({
+    steps,
+    onStep,
+    initialSpeed: 1000,
+  });
+
+  const isAnimating = engine.isPlaying || engine.currentStep > 0;
+
+  const handleReset = () => {
+    engine.reset();
+
+    removeFromStorage("fib-array-elements");
+    removeFromStorage("fib-target");
+
+    setArray([]);
+    setTargetValue(null);
+
+    setArrayElements("");
+    setTarget("");
+
+    setMessage("");
+    setMessageType("");
+
+    setVisualState({
+      offset: -1,
+      probe: -1,
+      foundIndex: -1,
+      stepExplanation: "",
+      stepCount: 0,
+    });
+  };
+
+  const generateRandomArray = () => {
+    if (isAnimating) return;
+
+    const size = Math.floor(Math.random() * 6) + 6;
+
+    const arr = Array.from(
+      { length: size },
+      () => Math.floor(Math.random() * 100)
+    ).sort((a, b) => a - b);
+
+    setArrayElements(arr.join(", "));
+  };
+
+  const handleGo = (e) => {
+    e.preventDefault();
+
+    engine.reset();
+
+    const elements = arrayElements
+      .split(",")
+      .map((v) => parseInt(v.trim()));
+
+    const targetVal = parseInt(target);
+
+    if (elements.some(isNaN) || isNaN(targetVal)) {
+      setMessage("Please enter valid input.");
+      setMessageType("warning");
+      return;
+    }
+
+    setArray(elements);
+    setTargetValue(targetVal);
+
+    setTimeout(() => engine.play(), 50);
+  };
+
+  useVisualizerKeyboard({
+    onTogglePlayPause: engine.isPlaying
+      ? engine.pause
+      : () => engine.play(),
+    onStepForward: engine.stepForward,
+    onStepBackward: engine.stepBackward,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+    speed: engine.speed / 1000,
+    sorting: engine.isPlaying,
+    sorted: false,
+  });
+
+  return (
+    <main className="container mx-auto">
+
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Visualize how Fibonacci Search efficiently finds an element using Fibonacci numbers.
+      </p>
+
+      {/* Input Form */}
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border mb-8"
+      >
+
+        <label className="block mb-2">
+          Sorted Array Elements
+        </label>
+
+        <div className="flex gap-2 mb-4">
+
+          <input
+            value={arrayElements}
+            onChange={(e) => setArrayElements(e.target.value)}
+            className="w-full border rounded-lg p-3"
+            placeholder="1,3,5,7,9"
+          />
+
+          <button
+            type="button"
+            onClick={generateRandomArray}
+            className="px-4 rounded-lg bg-[#a435f0] text-white"
+          >
+            Random
+          </button>
+
+        </div>
+
+        <label className="block mb-2">
+          Target
+        </label>
+
+        <div className="flex gap-2">
+
+          <input
+            value={target}
+            onChange={(e) => setTarget(e.target.value)}
+            className="border rounded-lg p-3 flex-1"
+            type="number"
+          />
+
+          <GoButton
+            onClick={handleGo}
+            isAnimating={isAnimating}
+          />
+
+          <ResetButton
+            onReset={handleReset}
+            isAnimating={isAnimating}
+          />
+
+        </div>
+
+        {isAnimating && (
+          <div className="mt-5">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={
+                engine.isPlaying
+                  ? engine.pause
+                  : engine.play
+              }
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) =>
+                engine.setSpeed(s * 1000)
+              }
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={engine.reset}
+              onExplainStep={() => {}}
+              disabled={steps.length === 0}
+              progressText={`${engine.currentStep + 1}/${steps.length}`}
+            />
+          </div>
+        )}
+
+      </form>
+
+      {message && (
+        <div className="max-w-3xl mx-auto mb-6 text-center font-semibold">
+          {message}
+        </div>
+      )}
+
+      {visualState.stepExplanation && (
+        <div className="max-w-4xl mx-auto mb-6 p-4 border rounded-xl">
+          <h3 className="font-bold mb-2">
+            Step Explanation
+          </h3>
+
+          <p>{visualState.stepExplanation}</p>
+        </div>
+      )}
+
+      {array.length > 0 && (
+        <div className="flex flex-wrap justify-center gap-4">
+
+          {array.map((num, idx) => {
+
+            let bg = "bg-gray-200";
+
+            if (idx === visualState.probe)
+              bg = "bg-yellow-400";
+
+            if (idx === visualState.foundIndex)
+              bg = "bg-green-500";
+
+            return (
+              <div
+                key={idx}
+                className="flex flex-col items-center"
+              >
+
+                <div
+                  className={`w-16 h-16 rounded-lg border flex items-center justify-center ${bg} ${getFontSize(num)}`}
+                >
+                  {num}
+                </div>
+
+                <span className="text-xs mt-1">
+                  [{idx}]
+                </span>
+
+              </div>
+            );
+          })}
+
+        </div>
+      )}
+
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/fibonacci-search/codeBlock.jsx b/src/app/visualizer/array/fibonacci-search/codeBlock.jsx
new file mode 100644
index 000000000..d68b1745f
--- /dev/null
+++ b/src/app/visualizer/array/fibonacci-search/codeBlock.jsx
@@ -0,0 +1,252 @@
+"use client";
+
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const codeExamples = {
+  javascript: `// Fibonacci Search in JavaScript
+function fibonacciSearch(arr, target) {
+    let n = arr.length;
+
+    let fibMMm2 = 0;
+    let fibMMm1 = 1;
+    let fibM = fibMMm2 + fibMMm1;
+
+    while (fibM < n) {
+        fibMMm2 = fibMMm1;
+        fibMMm1 = fibM;
+        fibM = fibMMm2 + fibMMm1;
+    }
+
+    let offset = -1;
+
+    while (fibM > 1) {
+        let i = Math.min(offset + fibMMm2, n - 1);
+
+        if (arr[i] < target) {
+            fibM = fibMMm1;
+            fibMMm1 = fibMMm2;
+            fibMMm2 = fibM - fibMMm1;
+            offset = i;
+        } else if (arr[i] > target) {
+            fibM = fibMMm2;
+            fibMMm1 = fibMMm1 - fibMMm2;
+            fibMMm2 = fibM - fibMMm1;
+        } else {
+            return i;
+        }
+    }
+
+    if (fibMMm1 && arr[offset + 1] === target)
+        return offset + 1;
+
+    return -1;
+}
+
+// Example
+const arr = [10,20,30,40,50,60,70];
+console.log(fibonacciSearch(arr, 50));`,
+
+  python: `# Fibonacci Search in Python
+def fibonacci_search(arr, target):
+    n = len(arr)
+
+    fib2 = 0
+    fib1 = 1
+    fib = fib1 + fib2
+
+    while fib < n:
+        fib2 = fib1
+        fib1 = fib
+        fib = fib1 + fib2
+
+    offset = -1
+
+    while fib > 1:
+        i = min(offset + fib2, n - 1)
+
+        if arr[i] < target:
+            fib = fib1
+            fib1 = fib2
+            fib2 = fib - fib1
+            offset = i
+        elif arr[i] > target:
+            fib = fib2
+            fib1 = fib1 - fib2
+            fib2 = fib - fib1
+        else:
+            return i
+
+    if fib1 and offset + 1 < n and arr[offset + 1] == target:
+        return offset + 1
+
+    return -1
+
+arr = [10,20,30,40,50,60,70]
+print(fibonacci_search(arr,50))`,
+
+  java: `// Fibonacci Search in Java
+public class FibonacciSearch {
+
+    static int fibonacciSearch(int[] arr, int target) {
+
+        int n = arr.length;
+
+        int fib2 = 0;
+        int fib1 = 1;
+        int fib = fib1 + fib2;
+
+        while (fib < n) {
+            fib2 = fib1;
+            fib1 = fib;
+            fib = fib1 + fib2;
+        }
+
+        int offset = -1;
+
+        while (fib > 1) {
+
+            int i = Math.min(offset + fib2, n - 1);
+
+            if (arr[i] < target) {
+                fib = fib1;
+                fib1 = fib2;
+                fib2 = fib - fib1;
+                offset = i;
+            } else if (arr[i] > target) {
+                fib = fib2;
+                fib1 = fib1 - fib2;
+                fib2 = fib - fib1;
+            } else {
+                return i;
+            }
+        }
+
+        if (fib1 == 1 && arr[offset + 1] == target)
+            return offset + 1;
+
+        return -1;
+    }
+
+    public static void main(String[] args) {
+        int[] arr={10,20,30,40,50,60,70};
+        System.out.println(fibonacciSearch(arr,50));
+    }
+}`,
+
+  c: `// Fibonacci Search in C
+#include <stdio.h>
+
+int fibonacciSearch(int arr[], int n, int target){
+
+    int fib2=0,fib1=1,fib=fib1+fib2;
+
+    while(fib<n){
+        fib2=fib1;
+        fib1=fib;
+        fib=fib1+fib2;
+    }
+
+    int offset=-1;
+
+    while(fib>1){
+
+        int i=(offset+fib2<n-1)?offset+fib2:n-1;
+
+        if(arr[i]<target){
+            fib=fib1;
+            fib1=fib2;
+            fib2=fib-fib1;
+            offset=i;
+        }
+        else if(arr[i]>target){
+            fib=fib2;
+            fib1=fib1-fib2;
+            fib2=fib-fib1;
+        }
+        else
+            return i;
+    }
+
+    if(fib1 && arr[offset+1]==target)
+        return offset+1;
+
+    return -1;
+}
+
+int main(){
+
+    int arr[]={10,20,30,40,50,60,70};
+
+    printf("%d",fibonacciSearch(arr,7,50));
+
+    return 0;
+}`,
+
+  cpp: `// Fibonacci Search in C++
+#include<iostream>
+using namespace std;
+
+int fibonacciSearch(int arr[],int n,int target){
+
+    int fib2=0,fib1=1,fib=fib1+fib2;
+
+    while(fib<n){
+        fib2=fib1;
+        fib1=fib;
+        fib=fib1+fib2;
+    }
+
+    int offset=-1;
+
+    while(fib>1){
+
+        int i=min(offset+fib2,n-1);
+
+        if(arr[i]<target){
+            fib=fib1;
+            fib1=fib2;
+            fib2=fib-fib1;
+            offset=i;
+        }
+        else if(arr[i]>target){
+            fib=fib2;
+            fib1=fib1-fib2;
+            fib2=fib-fib1;
+        }
+        else
+            return i;
+    }
+
+    if(fib1 && arr[offset+1]==target)
+        return offset+1;
+
+    return -1;
+}
+
+int main(){
+
+    int arr[]={10,20,30,40,50,60,70};
+
+    cout<<fibonacciSearch(arr,7,50);
+
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: "fibonacciSearch.js",
+  python: "fibonacci_search.py",
+  java: "FibonacciSearch.java",
+  c: "fibonacci_search.c",
+  cpp: "fibonacci_search.cpp",
+};
+
+const FibonacciSearchCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default FibonacciSearchCode;
\ No newline at end of file
diff --git a/src/app/visualizer/array/fibonacci-search/content.jsx b/src/app/visualizer/array/fibonacci-search/content.jsx
new file mode 100644
index 000000000..75accd097
--- /dev/null
+++ b/src/app/visualizer/array/fibonacci-search/content.jsx
@@ -0,0 +1,198 @@
+"use client";
+
+import React from "react";
+
+export default function Content() {
+  return (
+    <div className="space-y-10">
+
+      {/* Overview */}
+      <section>
+        <h2 className="text-3xl font-bold mb-4">Overview</h2>
+
+        <p className="text-gray-700 dark:text-gray-300 leading-8">
+          <strong>Fibonacci Search</strong> is a searching algorithm used to
+          find an element in a <strong>sorted array</strong>. Instead of
+          dividing the array into halves like Binary Search, Fibonacci Search
+          uses <strong>Fibonacci numbers</strong> to determine the probe
+          positions. It is particularly useful when random memory access is
+          expensive because it relies on addition and subtraction instead of
+          division.
+        </p>
+      </section>
+
+      {/* Working */}
+      <section>
+        <h2 className="text-3xl font-bold mb-4">
+          How Fibonacci Search Works
+        </h2>
+
+        <ol className="list-decimal ml-6 space-y-3 text-gray-700 dark:text-gray-300">
+          <li>Ensure the array is sorted in ascending order.</li>
+          <li>Generate Fibonacci numbers until one is greater than or equal to the array size.</li>
+          <li>Use the Fibonacci sequence to determine the probe index.</li>
+          <li>Compare the target with the probe element.</li>
+          <li>
+            If the target is smaller, move to the left portion by adjusting the
+            Fibonacci numbers.
+          </li>
+          <li>
+            If the target is larger, move to the right portion and update the
+            offset.
+          </li>
+          <li>Repeat until the target is found or the search space becomes empty.</li>
+        </ol>
+      </section>
+
+      {/* Example */}
+      <section>
+        <h2 className="text-3xl font-bold mb-4">Example</h2>
+
+        <div className="bg-gray-100 dark:bg-neutral-900 rounded-xl p-5 font-mono">
+          <p>Array = [10, 20, 30, 40, 50, 60, 70]</p>
+          <p>Target = 50</p>
+
+          <br />
+
+          <p>Step 1 → Generate Fibonacci numbers.</p>
+          <p>Step 2 → Probe at calculated Fibonacci index.</p>
+          <p>Step 3 → Compare with 50.</p>
+          <p>Step 4 → Narrow the search range.</p>
+          <p>Step 5 → Target found at index 4.</p>
+        </div>
+      </section>
+
+      {/* Complexity */}
+      <section>
+        <h2 className="text-3xl font-bold mb-4">Time Complexity</h2>
+
+        <div className="overflow-x-auto">
+          <table className="min-w-full border border-gray-300 dark:border-gray-700">
+
+            <thead className="bg-violet-100 dark:bg-violet-900">
+              <tr>
+                <th className="border p-3">Case</th>
+                <th className="border p-3">Complexity</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td className="border p-3">Best Case</td>
+                <td className="border p-3">O(1)</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">Average Case</td>
+                <td className="border p-3">O(log n)</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">Worst Case</td>
+                <td className="border p-3">O(log n)</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">Space Complexity</td>
+                <td className="border p-3">O(1)</td>
+              </tr>
+            </tbody>
+
+          </table>
+        </div>
+      </section>
+
+      {/* Advantages */}
+      <section>
+        <h2 className="text-3xl font-bold mb-4">Advantages</h2>
+
+        <ul className="list-disc ml-6 space-y-2 text-gray-700 dark:text-gray-300">
+          <li>Works efficiently on sorted arrays.</li>
+          <li>Requires only constant extra space.</li>
+          <li>Uses addition and subtraction instead of division.</li>
+          <li>Can perform better than Binary Search on certain storage devices.</li>
+          <li>Simple iterative implementation.</li>
+        </ul>
+      </section>
+
+      {/* Disadvantages */}
+      <section>
+        <h2 className="text-3xl font-bold mb-4">Disadvantages</h2>
+
+        <ul className="list-disc ml-6 space-y-2 text-gray-700 dark:text-gray-300">
+          <li>Only works on sorted arrays.</li>
+          <li>Requires preprocessing of Fibonacci numbers.</li>
+          <li>Usually not faster than Binary Search on modern computers.</li>
+          <li>Less commonly used in practical applications.</li>
+        </ul>
+      </section>
+
+      {/* Applications */}
+      <section>
+        <h2 className="text-3xl font-bold mb-4">Applications</h2>
+
+        <ul className="list-disc ml-6 space-y-2 text-gray-700 dark:text-gray-300">
+          <li>Searching large sorted datasets.</li>
+          <li>Database indexing.</li>
+          <li>Memory-constrained systems.</li>
+          <li>Searching data stored on slow-access storage devices.</li>
+          <li>Educational demonstrations of divide-and-conquer searching.</li>
+        </ul>
+      </section>
+
+      {/* Comparison */}
+      <section>
+        <h2 className="text-3xl font-bold mb-4">
+          Fibonacci Search vs Binary Search
+        </h2>
+
+        <div className="overflow-x-auto">
+          <table className="min-w-full border border-gray-300 dark:border-gray-700">
+
+            <thead className="bg-violet-100 dark:bg-violet-900">
+              <tr>
+                <th className="border p-3">Feature</th>
+                <th className="border p-3">Fibonacci Search</th>
+                <th className="border p-3">Binary Search</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td className="border p-3">Requirement</td>
+                <td className="border p-3">Sorted Array</td>
+                <td className="border p-3">Sorted Array</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">Time Complexity</td>
+                <td className="border p-3">O(log n)</td>
+                <td className="border p-3">O(log n)</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">Space Complexity</td>
+                <td className="border p-3">O(1)</td>
+                <td className="border p-3">O(1)</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">Uses Division</td>
+                <td className="border p-3">No</td>
+                <td className="border p-3">Yes</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">Uses Fibonacci Numbers</td>
+                <td className="border p-3">Yes</td>
+                <td className="border p-3">No</td>
+              </tr>
+            </tbody>
+
+          </table>
+        </div>
+      </section>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/fibonacci-search/page.jsx b/src/app/visualizer/array/fibonacci-search/page.jsx
new file mode 100644
index 000000000..e46b400d3
--- /dev/null
+++ b/src/app/visualizer/array/fibonacci-search/page.jsx
@@ -0,0 +1,42 @@
+import Animation from "@/app/visualizer/array/fibonacci-search/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/array/fibonacci-search/codeBlock";
+import Content from "@/app/visualizer/array/fibonacci-search/content";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Array", "Fibonacci Search")}
+      title="Fibonacci Search"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[
+            {
+              text: "Linear Search",
+              url: "../linearsearch",
+            },
+            {
+              text: "Binary Search",
+              url: "../binarysearch",
+            },
+            {
+              text: "Ternary Search",
+              url: "../ternary-search",
+            },
+            {
+              text: "Jump Search",
+              url: "../jump-search",
+            },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/fibonacci-search/quiz.jsx b/src/app/visualizer/array/fibonacci-search/quiz.jsx
new file mode 100644
index 000000000..9adb7d9fe
--- /dev/null
+++ b/src/app/visualizer/array/fibonacci-search/quiz.jsx
@@ -0,0 +1,226 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const fibonacciSearchQuestions = [
+  {
+    question: "What is the primary requirement for Fibonacci Search?",
+    options: [
+      "The array must be sorted.",
+      "The array must be unsorted.",
+      "The array must contain duplicate elements.",
+      "The array must have an odd number of elements.",
+    ],
+    answer: "The array must be sorted.",
+    explanation:
+      "Fibonacci Search works only on sorted arrays because it relies on ordered elements.",
+  },
+  {
+    question: "Which mathematical sequence is used in Fibonacci Search?",
+    options: [
+      "Fibonacci Sequence",
+      "Prime Numbers",
+      "Arithmetic Progression",
+      "Geometric Progression",
+    ],
+    answer: "Fibonacci Sequence",
+    explanation:
+      "The algorithm uses Fibonacci numbers to determine probe positions.",
+  },
+  {
+    question: "What is the average time complexity of Fibonacci Search?",
+    options: ["O(n)", "O(log n)", "O(√n)", "O(n log n)"],
+    answer: "O(log n)",
+    explanation:
+      "Fibonacci Search has logarithmic average-case complexity.",
+  },
+  {
+    question: "What is the worst-case time complexity of Fibonacci Search?",
+    options: ["O(log n)", "O(n)", "O(√n)", "O(1)"],
+    answer: "O(log n)",
+    explanation:
+      "Its worst-case complexity is also O(log n).",
+  },
+  {
+    question: "What is the best-case time complexity of Fibonacci Search?",
+    options: ["O(1)", "O(log n)", "O(n)", "O(√n)"],
+    answer: "O(1)",
+    explanation:
+      "If the target is found immediately, the search completes in constant time.",
+  },
+  {
+    question: "Fibonacci Search is mainly an alternative to:",
+    options: [
+      "Binary Search",
+      "Linear Search",
+      "Jump Search",
+      "Hash Search",
+    ],
+    answer: "Binary Search",
+    explanation:
+      "Fibonacci Search is another logarithmic search algorithm for sorted arrays.",
+  },
+  {
+    question: "What is the space complexity of Fibonacci Search?",
+    options: ["O(1)", "O(log n)", "O(n)", "O(√n)"],
+    answer: "O(1)",
+    explanation:
+      "It uses only a constant amount of extra memory.",
+  },
+  {
+    question: "Which data structure is best suited for Fibonacci Search?",
+    options: ["Array", "Stack", "Queue", "Graph"],
+    answer: "Array",
+    explanation:
+      "Arrays provide indexed access required by the algorithm.",
+  },
+  {
+    question: "Which operation does Fibonacci Search avoid compared to Binary Search?",
+    options: [
+      "Division",
+      "Addition",
+      "Comparison",
+      "Assignment",
+    ],
+    answer: "Division",
+    explanation:
+      "It uses Fibonacci numbers instead of repeatedly dividing the search range.",
+  },
+  {
+    question: "If the target is not found, Fibonacci Search returns:",
+    options: ["-1", "0", "1", "NULL"],
+    answer: "-1",
+    explanation:
+      "Returning -1 indicates the element is absent.",
+  },
+  {
+    question: "Fibonacci Search works efficiently on:",
+    options: [
+      "Sorted arrays",
+      "Linked Lists",
+      "Graphs",
+      "Trees",
+    ],
+    answer: "Sorted arrays",
+    explanation:
+      "The array must be sorted before applying Fibonacci Search.",
+  },
+  {
+    question: "Which of the following is NOT required by Fibonacci Search?",
+    options: [
+      "Recursion",
+      "Sorted data",
+      "Comparisons",
+      "Indexed access",
+    ],
+    answer: "Recursion",
+    explanation:
+      "The algorithm can be implemented iteratively.",
+  },
+  {
+    question: "Fibonacci Search belongs to which category?",
+    options: [
+      "Searching Algorithm",
+      "Sorting Algorithm",
+      "Greedy Algorithm",
+      "Graph Algorithm",
+    ],
+    answer: "Searching Algorithm",
+    explanation:
+      "It is a searching algorithm for sorted collections.",
+  },
+  {
+    question: "What happens when the current element is smaller than the target?",
+    options: [
+      "Search moves to the right.",
+      "Search moves to the left.",
+      "Search stops.",
+      "Array is sorted again.",
+    ],
+    answer: "Search moves to the right.",
+    explanation:
+      "The algorithm eliminates the left portion and searches the right.",
+  },
+  {
+    question: "What happens when the current element is greater than the target?",
+    options: [
+      "Search moves to the left.",
+      "Search moves to the right.",
+      "Search stops.",
+      "Array is reversed.",
+    ],
+    answer: "Search moves to the left.",
+    explanation:
+      "The right portion is discarded when the current value is larger.",
+  },
+  {
+    question: "Which complexity class does Fibonacci Search belong to?",
+    options: [
+      "Logarithmic",
+      "Linear",
+      "Quadratic",
+      "Exponential",
+    ],
+    answer: "Logarithmic",
+    explanation:
+      "Fibonacci Search has O(log n) complexity.",
+  },
+  {
+    question: "Which sequence determines the probe index?",
+    options: [
+      "Fibonacci numbers",
+      "Prime numbers",
+      "Even numbers",
+      "Odd numbers",
+    ],
+    answer: "Fibonacci numbers",
+    explanation:
+      "Probe positions are determined using Fibonacci values.",
+  },
+  {
+    question: "Compared to Binary Search, Fibonacci Search is especially useful when:",
+    options: [
+      "Division operations are expensive.",
+      "The array is unsorted.",
+      "The data contains duplicates.",
+      "The data is stored in a linked list.",
+    ],
+    answer: "Division operations are expensive.",
+    explanation:
+      "Fibonacci Search relies on addition and subtraction rather than division.",
+  },
+  {
+    question: "Which search algorithm also requires a sorted array?",
+    options: [
+      "Binary Search",
+      "Linear Search",
+      "Sequential Search",
+      "DFS",
+    ],
+    answer: "Binary Search",
+    explanation:
+      "Both Binary Search and Fibonacci Search require sorted input.",
+  },
+  {
+    question: "What is the primary advantage of Fibonacci Search?",
+    options: [
+      "Efficient searching in sorted arrays using Fibonacci numbers.",
+      "Works on unsorted arrays.",
+      "Requires no comparisons.",
+      "Sorts the array before searching.",
+    ],
+    answer: "Efficient searching in sorted arrays using Fibonacci numbers.",
+    explanation:
+      "It efficiently searches sorted arrays by leveraging the Fibonacci sequence.",
+  },
+];
+
+export default function FibonacciSearchQuiz() {
+  return (
+    <QuizEngine
+      title="Fibonacci Search Quiz"
+      questions={fibonacciSearchQuestions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/fibonacci-search/quiz/page.jsx b/src/app/visualizer/array/fibonacci-search/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/array/fibonacci-search/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/heapsort/AlgorithmClient.jsx b/src/app/visualizer/array/heapsort/AlgorithmClient.jsx
new file mode 100644
index 000000000..fd995c4a6
--- /dev/null
+++ b/src/app/visualizer/array/heapsort/AlgorithmClient.jsx
@@ -0,0 +1,39 @@
+import Animation from "@/app/visualizer/array/heapsort/animation";
+import Content from "@/app/visualizer/array/heapsort/content";
+import Code from "@/app/visualizer/array/heapsort/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import TrackVisit from "@/app/components/ui/TrackVisit";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <>
+      <TrackVisit name="Heap Sort" path="/visualizer/array/heapsort" category="Sorting" />
+      <VisualizerPageLayout
+        paths={createVisualizerPaths("Array", "Heap Sort")}
+        title="Heap Sort"
+        animation={<Animation />}
+        content={<Content />}
+        code={<Code />}
+        exploreOther={
+          <ExploreOther
+            title="Explore Sorting Algorithms"
+            links={[
+              { text: "Bubble Sort", url: "/visualizer/array/bubblesort" },
+              { text: "Selection Sort", url: "/visualizer/array/selectionsort" },
+              { text: "Insertion Sort", url: "/visualizer/array/insertionsort" },
+              { text: "Merge Sort", url: "/visualizer/array/mergesort" },
+              { text: "Quick Sort", url: "/visualizer/array/quicksort" },
+              { text: "Counting Sort", url: "/visualizer/array/countingsort" },
+              { text: "Comparison Mode", url: "/visualizer/array/comparison" },
+            ]}
+          />
+        }
+      />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/heapsort/animation.jsx b/src/app/visualizer/array/heapsort/animation.jsx
new file mode 100644
index 000000000..1d32f89a5
--- /dev/null
+++ b/src/app/visualizer/array/heapsort/animation.jsx
@@ -0,0 +1,392 @@
+"use client";
+
+import React, { useCallback, useMemo, useState } from "react";
+import { gsap } from "gsap";
+import ArrayGenerator from "@/app/components/ui/randomArray";
+import CustomArrayInput from "@/app/components/ui/customArrayInput";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import { heapSortGenerator } from "@/features/algorithms/array/heapSortLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+const DEFAULT_ARRAY = [42, 18, 76, 33, 9, 55, 64, 27];
+const MAX_ITEMS = 12;
+
+const clampArray = (values) =>
+  values
+    .map((value) => Math.trunc(Number(value)))
+    .filter((value) => Number.isFinite(value))
+    .map((value) => Math.min(Math.max(value, 1), 100))
+    .slice(0, MAX_ITEMS);
+
+const generateArray = (size) =>
+  Array.from({ length: size }, () => Math.floor(Math.random() * 96) + 5);
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+  if (len <= 2) return "text-base";
+  if (len === 3) return "text-sm";
+  return "text-xs";
+};
+
+const getTreePositions = (length) => {
+  const levelGap = 94;
+  const positions = [];
+
+  for (let index = 0; index < length; index++) {
+    const level = Math.floor(Math.log2(index + 1));
+    const firstIndexAtLevel = 2 ** level - 1;
+    const slot = index - firstIndexAtLevel;
+    const nodesOnLevel = 2 ** level;
+    positions.push({
+      x: ((slot + 1) * 800) / (nodesOnLevel + 1),
+      y: 48 + level * levelGap,
+    });
+  }
+
+  return positions;
+};
+
+const getNodePalette = (index, heapSize, activeIndices, compareIndices, swapIndices, sortedIndices) => {
+  if (sortedIndices.includes(index)) {
+    return { fill: "#d1fae5", stroke: "#10b981", text: "#064e3b" };
+  }
+  if (swapIndices.includes(index)) {
+    return { fill: "#ffe4e6", stroke: "#f43f5e", text: "#881337" };
+  }
+  if (compareIndices.includes(index)) {
+    return { fill: "#fef3c7", stroke: "#f59e0b", text: "#78350f" };
+  }
+  if (activeIndices.includes(index)) {
+    return { fill: "#f3e8ff", stroke: "#a435f0", text: "#581c87" };
+  }
+  if (index >= heapSize) {
+    return { fill: "#f1f5f9", stroke: "#cbd5e1", text: "#64748b" };
+  }
+  return { fill: "#ffffff", stroke: "#94a3b8", text: "#1f2937" };
+};
+
+export default function HeapSortVisualizer() {
+  const [array, setArray] = useState(DEFAULT_ARRAY);
+  const [arraySize, setArraySize] = useState(DEFAULT_ARRAY.length);
+  
+  const [visualState, setVisualState] = useState({
+    phase: "", message: "", comparisons: 0, swaps: 0,
+    activeIndices: [], compareIndices: [], swapIndices: [], sortedIndices: [],
+    heapSize: DEFAULT_ARRAY.length, sorted: false,
+  });
+
+  const steps = useMemo(() => {
+    if (array.length === 0) return [];
+    return Array.from(heapSortGenerator(array)).map(frame => frame.payload);
+  }, [array]);
+
+  const onStep = useCallback((step) => {
+    setVisualState({
+      phase: step.phase || "Running",
+      message: step.message || "",
+      comparisons: step.comparisons || 0,
+      swaps: step.swaps || 0,
+      activeIndices: step.activeIndices || [],
+      compareIndices: step.compareIndices || [],
+      swapIndices: step.swapIndices || [],
+      sortedIndices: step.sortedIndices || [],
+      heapSize: step.heapSize ?? array.length,
+      sorted: step.isSorted || false,
+    });
+
+    if (step.swapIndices && step.swapIndices.length === 2) {
+      const bars = document.querySelectorAll(".heap-bar");
+      const bar1 = bars[step.swapIndices[0]];
+      const bar2 = bars[step.swapIndices[1]];
+      if (bar1 && bar2) {
+        gsap.to(bar1, { y: -15, duration: 0.1 });
+        gsap.to(bar2, { y: -15, duration: 0.1 });
+        gsap.to(bar1, { y: 0, duration: 0.1, delay: 0.2 });
+        gsap.to(bar2, { y: 0, duration: 0.1, delay: 0.2 });
+      }
+    }
+  }, [array.length]);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 900 });
+  const currentStepData = steps[engine.currentStep];
+  const displayArray = currentStepData?.array ?? array;
+  
+  const maxValue = useMemo(() => Math.max(...displayArray, 1), [displayArray]);
+  const positions = useMemo(() => getTreePositions(displayArray.length), [displayArray.length]);
+  const treeHeight = Math.max(260, 110 + Math.ceil(Math.log2(displayArray.length + 1)) * 94);
+
+  const applyArray = useCallback((values) => {
+    const next = clampArray(values);
+    setArray(next);
+    setArraySize(next.length);
+    engine.reset();
+  }, [engine]);
+
+  const handleSizeChange = (event) => {
+    const nextSize = Number(event.target.value);
+    setArraySize(nextSize);
+    applyArray(generateArray(nextSize));
+  };
+
+  const startHeapSort = useCallback(() => {
+    if (!array.length) return;
+    if (currentStepData?.isSorted) {
+      engine.reset();
+      setTimeout(() => engine.play(), 50);
+    } else {
+      engine.play();
+    }
+  }, [array.length, currentStepData?.isSorted, engine]);
+
+  const resetAll = useCallback(() => {
+    engine.reset();
+    setArray(DEFAULT_ARRAY);
+    setArraySize(DEFAULT_ARRAY.length);
+  }, [engine]);
+
+  useVisualizerKeyboard({
+    onStart: startHeapSort,
+    onReset: resetAll,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+    onTogglePlayPause: engine.isPlaying ? engine.pause : startHeapSort,
+    speed: engine.speed / 500,
+    sorting: engine.isPlaying,
+    sorted: currentStepData?.isSorted || false,
+  });
+
+  const handleExplainStep = () => {
+    const prompt = `I am currently looking at the Heap Sort algorithm, at step ${engine.currentStep} of ${steps.length}.
+Phase: ${visualState.phase}
+Explanation on screen: ${visualState.message}
+Current Array State: [${displayArray.join(", ")}]
+Currently comparing: [${visualState.compareIndices.join(", ")}]
+Currently swapping: [${visualState.swapIndices.join(", ")}]
+Heap size remaining: ${visualState.heapSize}
+
+Please explain exactly what is happening in this step in detail.`;
+    
+    window.dispatchEvent(
+      new CustomEvent("chatbot-explain", { detail: { prompt } })
+    );
+  };
+
+  const progressText = steps.length ? `${Math.max(engine.currentStep + 1, 0)} / ${steps.length}` : "0 / 0";
+
+  const getItemClass = (index) => {
+    if (visualState.sortedIndices.includes(index)) return "border-emerald-500 bg-emerald-100 text-emerald-900 dark:bg-emerald-950/50 dark:text-emerald-200";
+    if (visualState.swapIndices.includes(index)) return "border-rose-500 bg-rose-100 text-rose-900 dark:bg-rose-950/60 dark:text-rose-100";
+    if (visualState.compareIndices.includes(index)) return "border-amber-500 bg-amber-100 text-amber-900 dark:bg-amber-950/60 dark:text-amber-100";
+    if (visualState.activeIndices.includes(index)) return "border-[#a435f0] bg-purple-100 text-purple-950 dark:bg-purple-950/60 dark:text-purple-100";
+    if (index >= visualState.heapSize) return "border-slate-300 bg-slate-100 text-slate-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-500";
+    return "border-gray-300 bg-white text-gray-800 dark:border-gray-700 dark:bg-neutral-900 dark:text-gray-200";
+  };
+
+  return (
+    <main className="container mx-auto px-4 pb-6 pt-4">
+      <p className="mb-8 text-center text-lg text-gray-600 dark:text-gray-400">
+        Build a max-heap, swap the root into place, and heapify the reduced heap step by step.
+      </p>
+
+      <div className="mx-auto max-w-6xl">
+        <div className="mb-6 rounded-lg border border-gray-200 bg-white p-4 shadow-md dark:border-gray-700 dark:bg-neutral-950 sm:p-6">
+          <div className="grid grid-cols-1 gap-4 lg:grid-cols-[1fr_280px]">
+            <div className="flex flex-col gap-2">
+              <ArrayGenerator
+                onGenerate={() => applyArray(generateArray(arraySize))}
+                disabled={engine.isPlaying}
+                isPrimary={array.length === 0}
+              />
+              <CustomArrayInput
+                onUseCustomArray={applyArray}
+                disabled={engine.isPlaying}
+                currentArray={array}
+                className="w-full"
+              />
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                Custom values are rounded, clamped from 1 to 100, and limited to {MAX_ITEMS} items.
+              </p>
+            </div>
+
+            <div className="rounded-lg bg-gray-100 p-3 dark:bg-neutral-900">
+              <div className="mb-2 flex items-center justify-between">
+                <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                  Array size
+                </label>
+                <span className="text-sm font-bold text-[#a435f0]">{arraySize} items</span>
+              </div>
+              <input
+                type="range"
+                min="5"
+                max={MAX_ITEMS}
+                value={arraySize}
+                onChange={handleSizeChange}
+                disabled={engine.isPlaying}
+                className="w-full accent-[#a435f0]"
+              />
+            </div>
+          </div>
+
+          <div className="mt-4 grid grid-cols-1 gap-2 md:grid-cols-2">
+            <button
+              onClick={startHeapSort}
+              disabled={!array.length}
+              className="w-full rounded bg-[#a435f0] px-4 py-2 text-sm text-white shadow-sm transition-colors hover:bg-[#8f2cd6] disabled:opacity-75 sm:text-base"
+            >
+              {engine.isPlaying ? "Sorting..." : currentStepData?.isSorted ? "Restart" : "Start Heap Sort"}
+            </button>
+            <button
+              onClick={() => { engine.reset(); setVisualState({ phase: "", message: "", comparisons: 0, swaps: 0, activeIndices: [], compareIndices: [], swapIndices: [], sortedIndices: [], heapSize: displayArray.length, sorted: false }) }}
+              disabled={engine.isPlaying}
+              className="w-full rounded border border-[#a435f0] px-4 py-2 text-sm text-[#a435f0] transition-colors hover:bg-[#f3e8ff] dark:hover:bg-[#a435f0]/20 sm:text-base"
+            >
+              Reset Animation
+            </button>
+          </div>
+
+          {engine.isPlaying && (
+            <div className="mt-4">
+              <PlaybackControls
+                isPlaying={engine.isPlaying}
+                onPlayPause={engine.isPlaying ? engine.pause : startHeapSort}
+                speed={engine.speed / 500}
+                onSpeedChange={(s) => engine.setSpeed(s * 500)}
+                onStepForward={engine.stepForward}
+                onStepBackward={engine.stepBackward}
+                onReset={engine.reset}
+                onExplainStep={handleExplainStep}
+                disabled={steps.length === 0}
+                progressText={progressText}
+              />
+            </div>
+          )}
+
+          {!engine.isPlaying && (
+            <div className="mt-4 flex items-center gap-4">
+              <span className="text-sm text-gray-700 dark:text-gray-300 sm:text-base">Speed:</span>
+              <input
+                type="range"
+                min="0.5"
+                max="5"
+                step="0.5"
+                value={engine.speed / 500}
+                onChange={(event) => engine.setSpeed(parseFloat(event.target.value) * 500)}
+                className="w-24 accent-[#a435f0] sm:w-32"
+              />
+              <span className="text-sm text-gray-700 dark:text-gray-300 sm:text-base">{engine.speed / 500}x</span>
+            </div>
+          )}
+
+          <div className="mt-4 grid grid-cols-2 gap-3 text-sm sm:grid-cols-4 sm:text-base">
+            <div className="rounded bg-gray-100 p-3 dark:bg-neutral-900">
+              <div className="font-medium">Phase</div>
+              <div className="text-lg font-bold">{visualState.phase || (visualState.sorted ? "Completed" : "Ready")}</div>
+            </div>
+            <div className="rounded bg-gray-100 p-3 dark:bg-neutral-900">
+              <div className="font-medium">Comparisons</div>
+              <div className="text-lg font-bold">{visualState.comparisons}</div>
+            </div>
+            <div className="rounded bg-gray-100 p-3 dark:bg-neutral-900">
+              <div className="font-medium">Swaps</div>
+              <div className="text-lg font-bold">{visualState.swaps}</div>
+            </div>
+            <div className="rounded bg-gray-100 p-3 dark:bg-neutral-900">
+              <div className="font-medium">Step</div>
+              <div className="text-lg font-bold">{progressText}</div>
+            </div>
+          </div>
+        </div>
+
+        <div className="rounded-lg border border-gray-200 bg-white p-4 shadow-md dark:border-gray-700 dark:bg-neutral-950 sm:p-6">
+          <div className="mb-4 flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
+            <h2 className="text-lg font-semibold sm:text-xl">Heap Sort Visualization</h2>
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              {visualState.message || (visualState.sorted ? "Array is fully sorted." : "Generate an array, then start Heap Sort.")}
+            </p>
+          </div>
+
+          <section className="mb-8">
+            <h3 className="mb-2 text-sm font-semibold uppercase text-gray-500 dark:text-gray-400">Array view</h3>
+            <div className="flex h-64 items-end justify-center gap-1.5 rounded-lg bg-gray-50 p-4 dark:bg-neutral-900 sm:gap-2">
+              {displayArray.length ? (
+                displayArray.map((value, index) => {
+                  const height = `${Math.max((value / maxValue) * 100, 14)}%`;
+                  return (
+                    <div key={`${value}-${index}`} className="flex h-full min-w-0 flex-1 flex-col items-center justify-end">
+                      <div
+                        style={{ height }}
+                        className={`heap-bar flex w-full max-w-14 items-end justify-center rounded-t-lg border-2 px-1 pb-2 font-bold shadow-sm transition-all duration-300 ${getFontSize(value)} ${getItemClass(index)}`}
+                      >
+                        {value}
+                      </div>
+                      <span className="mt-1 text-[10px] font-semibold text-gray-500 dark:text-gray-400">{index}</span>
+                    </div>
+                  );
+                })
+              ) : (
+                <div className="self-center text-center text-gray-500">Generate or enter an array to begin</div>
+              )}
+            </div>
+          </section>
+
+          <section>
+            <div className="mb-2 flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
+              <h3 className="text-sm font-semibold uppercase text-gray-500 dark:text-gray-400">Heap tree</h3>
+              <div className="text-xs text-gray-500 dark:text-gray-400">
+                Heap size: {visualState.heapSize} | Sorted region: {displayArray.length - visualState.heapSize}
+              </div>
+            </div>
+            <div className="overflow-auto rounded-lg border border-gray-100 bg-gray-50 py-4 dark:border-gray-800 dark:bg-neutral-900">
+              <svg width="800" height={treeHeight} viewBox={`0 0 800 ${treeHeight}`} className="mx-auto h-auto max-w-full">
+                {displayArray.map((_, index) => {
+                  const left = 2 * index + 1;
+                  const right = 2 * index + 2;
+                  return [left, right].map((child) => {
+                    if (child >= visualState.heapSize || index >= visualState.heapSize) return null;
+                    return (
+                      <line
+                        key={`${index}-${child}`}
+                        x1={positions[index].x}
+                        y1={positions[index].y + 24}
+                        x2={positions[child].x}
+                        y2={positions[child].y - 24}
+                        stroke="#94a3b8"
+                        strokeWidth="2"
+                      />
+                    );
+                  });
+                })}
+
+                {displayArray.map((value, index) => {
+                  const inHeap = index < visualState.heapSize;
+                  const nodePalette = getNodePalette(
+                    index, visualState.heapSize, visualState.activeIndices,
+                    visualState.compareIndices, visualState.swapIndices, visualState.sortedIndices
+                  );
+                  return (
+                    <g key={`${value}-node-${index}`} className={`transition-opacity duration-300 ${inHeap ? "opacity-100" : "opacity-45"}`}>
+                      <circle
+                        cx={positions[index].x}
+                        cy={positions[index].y}
+                        r="25"
+                        fill={nodePalette.fill}
+                        stroke={nodePalette.stroke}
+                        strokeWidth="2.5"
+                      />
+                      <text x={positions[index].x} y={positions[index].y + 5} textAnchor="middle" fill={nodePalette.text} className="text-sm font-bold">
+                        {value}
+                      </text>
+                      <text x={positions[index].x + 31} y={positions[index].y + 5} className="fill-gray-500 text-xs dark:fill-gray-400">
+                        [{index}]
+                      </text>
+                    </g>
+                  );
+                })}
+              </svg>
+            </div>
+          </section>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/app/visualizer/array/heapsort/codeBlock.jsx b/src/app/visualizer/array/heapsort/codeBlock.jsx
new file mode 100644
index 000000000..a49aa7c4f
--- /dev/null
+++ b/src/app/visualizer/array/heapsort/codeBlock.jsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { default } from "@/app/visualizer/tree/applications/heapsort/codeBlock";
diff --git a/src/app/visualizer/array/heapsort/content.jsx b/src/app/visualizer/array/heapsort/content.jsx
new file mode 100644
index 000000000..7da033bc6
--- /dev/null
+++ b/src/app/visualizer/array/heapsort/content.jsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { default } from "@/app/visualizer/tree/applications/heapsort/content";
diff --git a/src/app/visualizer/array/heapsort/quiz.jsx b/src/app/visualizer/array/heapsort/quiz.jsx
new file mode 100644
index 000000000..2650fc7dd
--- /dev/null
+++ b/src/app/visualizer/array/heapsort/quiz.jsx
@@ -0,0 +1,308 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const HeapSortQuiz = () => {
+  const questions = [
+    {
+      question: "What data structure is Heap Sort based on?",
+      options: [
+        "Queue",
+        "Heap",
+        "Stack",
+        "Linked List"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Heap Sort is based on the Heap data structure, usually implemented as a Binary Max Heap."
+    },
+    {
+      question: "What is the worst-case time complexity of Heap Sort?",
+      options: [
+        "O(n)",
+        "O(log n)",
+        "O(n log n)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Heap Sort has a worst-case time complexity of O(n log n)."
+    },
+    {
+      question: "Which type of heap is used for sorting an array in ascending order?",
+      options: [
+        "Min Heap",
+        "Max Heap",
+        "AVL Tree",
+        "Binary Search Tree"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "A Max Heap is used so the largest element is repeatedly placed at the end."
+    },
+    {
+      question: "What is the auxiliary space complexity of Heap Sort?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Heap Sort is an in-place sorting algorithm and uses constant extra space."
+    },
+    {
+      question: "Is Heap Sort a stable sorting algorithm?",
+      options: [
+        "Yes",
+        "No",
+        "Only for integers",
+        "Depends on the input"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Heap Sort is not stable because equal elements may not preserve their relative order."
+    },
+    {
+      question: "What is the first step of Heap Sort?",
+      options: [
+        "Choose a pivot",
+        "Build a Max Heap",
+        "Merge subarrays",
+        "Reverse the array"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The algorithm first converts the input array into a Max Heap."
+    },
+    {
+      question: "After building the Max Heap, what happens next?",
+      options: [
+        "Delete the smallest element",
+        "Swap the root with the last element",
+        "Split the array",
+        "Insert a new value"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The largest element at the root is swapped with the last element, then heapify is performed."
+    },
+    {
+      question: "Heap Sort uses which tree structure?",
+      options: [
+        "AVL Tree",
+        "Binary Heap",
+        "Trie",
+        "Red-Black Tree"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Heap Sort uses a Binary Heap, which is a complete binary tree."
+    },
+    {
+      question: "In a Max Heap, the parent node is:",
+      options: [
+        "Smaller than its children",
+        "Greater than or equal to its children",
+        "Equal to its children",
+        "Always a leaf node"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Every parent node in a Max Heap is greater than or equal to its children."
+    },
+    {
+      question: "Heap Sort belongs to which category?",
+      options: [
+        "Comparison-based sorting",
+        "Non-comparison sorting",
+        "Hashing algorithm",
+        "Searching algorithm"
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Heap Sort is a comparison-based sorting algorithm."
+    },
+    {
+      question: "What is the best-case time complexity of Heap Sort?",
+      options: [
+        "O(n)",
+        "O(log n)",
+        "O(n log n)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Heap Sort performs O(n log n) in the best, average, and worst cases."
+    },
+    {
+      question: "Which operation is repeatedly used in Heap Sort?",
+      options: [
+        "Merge",
+        "Partition",
+        "Heapify",
+        "Insertion"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Heapify restores the heap property after every swap."
+    },
+    {
+      question: "Heap Sort guarantees which time complexity?",
+      options: [
+        "O(n)",
+        "O(log n)",
+        "O(n log n)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Heap Sort always guarantees O(n log n) performance."
+    },
+    {
+      question: "Heap Sort is mainly preferred because it:",
+      options: [
+        "Is stable",
+        "Needs no comparisons",
+        "Provides guaranteed O(n log n) performance",
+        "Uses recursion only"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Heap Sort has guaranteed O(n log n) time complexity regardless of input."
+    },
+    {
+      question: "Which statement about Heap Sort is correct?",
+      options: [
+        "It is stable",
+        "It requires O(n) extra memory",
+        "It is an in-place comparison sorting algorithm",
+        "It works only for integers"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Heap Sort is an in-place comparison sorting algorithm."
+    },
+    {
+  question: "What is the primary purpose of the Heapify operation?",
+  options: [
+    "To sort the entire array",
+    "To maintain the heap property",
+    "To merge two heaps",
+    "To reverse the heap"
+  ],
+  correctAnswer: 1,
+  explanation: "Heapify restores the heap property by ensuring every parent node satisfies the heap condition with its children."
+},
+{
+  question: "Which element is stored at the root of a Max Heap?",
+  options: [
+    "The smallest element",
+    "The middle element",
+    "The largest element",
+    "A random element"
+  ],
+  correctAnswer: 2,
+  explanation: "In a Max Heap, the largest element is always stored at the root."
+},
+{
+  question: "How many child nodes can each node have in a Binary Heap?",
+  options: [
+    "One",
+    "Two",
+    "Three",
+    "Unlimited"
+  ],
+  correctAnswer: 1,
+  explanation: "A Binary Heap is a complete binary tree where each node can have at most two children."
+},
+{
+  question: "Which property must a Max Heap satisfy?",
+  options: [
+    "Parent is smaller than children",
+    "Parent is greater than or equal to its children",
+    "Children are always equal",
+    "Leaf nodes contain the largest values"
+  ],
+  correctAnswer: 1,
+  explanation: "In a Max Heap, every parent node must be greater than or equal to its child nodes."
+},
+{
+  question: "How many phases does Heap Sort mainly consist of?",
+  options: [
+    "One",
+    "Two",
+    "Three",
+    "Four"
+  ],
+  correctAnswer: 1,
+  explanation: "Heap Sort has two main phases: building the heap and repeatedly extracting the maximum element."
+},
+{
+  question: "What happens after swapping the root with the last element during Heap Sort?",
+  options: [
+    "The algorithm stops",
+    "The heap property is restored using Heapify",
+    "The array is divided into halves",
+    "The heap is rebuilt from scratch"
+  ],
+  correctAnswer: 1,
+  explanation: "After each swap, Heapify is applied to restore the Max Heap property."
+},
+{
+  question: "Which traversal is used by Heap Sort?",
+  options: [
+    "Inorder Traversal",
+    "Preorder Traversal",
+    "No tree traversal is required",
+    "Level-order Traversal"
+  ],
+  correctAnswer: 2,
+  explanation: "Heap Sort manipulates the heap using array indices and Heapify, without performing traditional tree traversals."
+},
+{
+  question: "Why is Heap Sort considered an in-place algorithm?",
+  options: [
+    "It creates a second array",
+    "It uses only constant extra memory",
+    "It requires recursion only",
+    "It avoids comparisons"
+  ],
+  correctAnswer: 1,
+  explanation: "Heap Sort rearranges elements within the original array and requires only O(1) auxiliary space."
+},
+{
+  question: "Which sorting algorithm also guarantees O(n log n) time but requires additional memory?",
+  options: [
+    "Bubble Sort",
+    "Selection Sort",
+    "Merge Sort",
+    "Insertion Sort"
+  ],
+  correctAnswer: 2,
+  explanation: "Merge Sort guarantees O(n log n) time but requires O(n) extra space, unlike Heap Sort."
+},
+{
+  question: "Which scenario is most suitable for using Heap Sort?",
+  options: [
+    "When guaranteed O(n log n) performance and O(1) extra space are required",
+    "When stable sorting is required",
+    "When sorting only small arrays",
+    "When no comparisons are allowed"
+  ],
+  correctAnswer: 0,
+  explanation: "Heap Sort is ideal when guaranteed O(n log n) performance and constant extra memory are important, even though it is not stable."
+}
+  ];
+
+  return (
+    <QuizEngine
+      title="Heap Sort Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default HeapSortQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/array/heapsort/quiz/page.jsx b/src/app/visualizer/array/heapsort/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/array/heapsort/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/insertionsort/AlgorithmClient.jsx b/src/app/visualizer/array/insertionsort/AlgorithmClient.jsx
new file mode 100644
index 000000000..bc28f320d
--- /dev/null
+++ b/src/app/visualizer/array/insertionsort/AlgorithmClient.jsx
@@ -0,0 +1,39 @@
+import Animation from "@/app/visualizer/array/insertionsort/animation";
+import Content from "@/app/visualizer/array/insertionsort/content";
+import Code from "@/app/visualizer/array/insertionsort/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import TrackVisit from "@/app/components/ui/TrackVisit";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <>
+      <TrackVisit name="Insertion Sort" path="/visualizer/array/insertionsort" category="Sorting" />
+      <VisualizerPageLayout
+        paths={createVisualizerPaths("Array", "Insertion Sort")}
+        title="Insertion Sort"
+        animation={<Animation />}
+        content={<Content />}
+        code={<Code />}
+        exploreOther={
+          <ExploreOther
+            title="Explore Sorting Algorithms"
+            links={[
+              { text: "Bubble Sort", url: "/visualizer/array/bubblesort" },
+              { text: "Selection Sort", url: "/visualizer/array/selectionsort" },
+              { text: "Merge Sort", url: "/visualizer/array/mergesort" },
+              { text: "Quick Sort", url: "/visualizer/array/quicksort" },
+              { text: "Comparison Mode", url: "/visualizer/array/comparison" },
+              { text: "Counting Sort", url: "/visualizer/array/countingsort" },
+              { text: "Heap Sort", url: "/visualizer/array/heapsort" },
+            ]}
+          />
+        }
+      />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/insertionsort/animation.jsx b/src/app/visualizer/array/insertionsort/animation.jsx
new file mode 100644
index 000000000..100e47597
--- /dev/null
+++ b/src/app/visualizer/array/insertionsort/animation.jsx
@@ -0,0 +1,396 @@
+"use client";
+import React, { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import { gsap } from "gsap";
+import RandomArray from "@/app/components/ui/randomArray";
+import CustomArrayInput from "@/app/components/ui/customArrayInput";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import ChallengeModePanel, {
+  createOptions,
+  useSortingChallenge,
+} from "@/app/visualizer/array/components/ChallengeMode";
+import { insertionSortGenerator } from "@/features/algorithms/array/insertionSortLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+  if (len <= 2) return "text-lg";
+  if (len === 3) return "text-sm";
+  return "text-xs";
+};
+
+const createInsertionKeyQuestion = (arr, index) => {
+  const correctLabel = `${arr[index]} (index ${index})`;
+  const options = createOptions(correctLabel, [
+    index > 0 ? `${arr[index - 1]} (index ${index - 1})` : null,
+    index + 1 < arr.length ? `${arr[index + 1]} (index ${index + 1})` : null,
+    "The first element",
+  ]);
+
+  return {
+    prompt: "Which element will be inserted next?",
+    options,
+    correctOptionId: "correct",
+    explanation: `Insertion Sort takes the element at index ${index}, ${arr[index]}, and inserts it into the sorted left side.`,
+  };
+};
+
+const precomputeSteps = (inputArray) => {
+  const steps = [];
+  const generator = insertionSortGenerator(inputArray);
+  
+  for (const frame of generator) {
+    const { type, payload } = frame;
+    if (type === 'init') {
+      steps.push({
+        array: [...inputArray],
+        comparisons: 0, shifts: 0, currentStep: 0,
+        currentIndices: { current: 1, comparing: 0, sortedUpTo: 0 },
+        currentPhase: "", stepExplanation: "Starting Insertion Sort...",
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'phase_start') {
+      steps.push({
+        array: [...payload.arr],
+        comparisons: payload.comparisons,
+        shifts: payload.shifts,
+        currentStep: payload.step,
+        currentIndices: { current: payload.i, comparing: payload.j, sortedUpTo: payload.i - 1 },
+        currentPhase: `Pass ${payload.pass} of ${payload.totalPasses}`,
+        stepExplanation: `Inserting ${payload.current} from index ${payload.i} into the sorted portion on the left.`,
+        sorted: false,
+        totalSteps: payload.totalSteps,
+        isChallengeStart: true,
+        challengeData: createInsertionKeyQuestion(payload.arr, payload.i)
+      });
+    } else if (type === 'comparing') {
+      steps.push({
+        array: [...payload.arr],
+        comparisons: payload.comparisons,
+        shifts: payload.shifts,
+        currentStep: payload.step,
+        currentIndices: steps[steps.length - 1]?.currentIndices || { current: -1, comparing: -1, sortedUpTo: -1 },
+        currentPhase: steps[steps.length - 1]?.currentPhase || "",
+        stepExplanation: `Comparing ${payload.current} with ${payload.arr[payload.j]} at index ${payload.j}.`,
+        sorted: false,
+        totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'shifting') {
+      steps.push({
+        array: [...payload.arr],
+        comparisons: payload.comparisons,
+        shifts: payload.shifts,
+        currentStep: payload.step,
+        currentIndices: { current: payload.i, comparing: payload.j - 1, sortedUpTo: payload.i - 1 },
+        currentPhase: steps[steps.length - 1]?.currentPhase || "",
+        stepExplanation: `Since ${payload.arr[payload.j+1]} > ${payload.current}, moving ${payload.arr[payload.j+1]} one position ahead.`,
+        sorted: false,
+        totalSteps: payload.totalSteps,
+        isShift: true,
+        shiftJ: payload.j
+      });
+    } else if (type === 'found_insertion_point') {
+      steps.push({
+        array: [...payload.arr],
+        comparisons: payload.comparisons,
+        shifts: payload.shifts,
+        currentStep: payload.step,
+        currentIndices: steps[steps.length - 1]?.currentIndices || { current: -1, comparing: -1, sortedUpTo: -1 },
+        currentPhase: steps[steps.length - 1]?.currentPhase || "",
+        stepExplanation: payload.j >= 0 
+          ? `Found insertion point for ${payload.current} at index ${payload.j + 1}.`
+          : `Reached the beginning of the sorted portion. Inserting ${payload.current} at index ${payload.j + 1}.`,
+        sorted: false,
+        totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'inserted') {
+      steps.push({
+        array: [...payload.arr],
+        comparisons: payload.comparisons,
+        shifts: payload.shifts,
+        currentStep: payload.step,
+        currentIndices: steps[steps.length - 1]?.currentIndices || { current: -1, comparing: -1, sortedUpTo: -1 },
+        currentPhase: steps[steps.length - 1]?.currentPhase || "",
+        stepExplanation: `Placed ${payload.current} into the sorted portion at index ${payload.j + 1}.`,
+        sorted: false,
+        totalSteps: payload.totalSteps,
+        isInserted: true,
+        insertI: payload.i,
+        insertJ: payload.j
+      });
+    } else if (type === 'completed') {
+      const last = steps[steps.length - 1] || {};
+      steps.push({
+        array: payload.arr || last.array || [],
+        comparisons: payload.comparisons || last.comparisons,
+        shifts: payload.shifts || last.shifts,
+        currentStep: payload.step || last.currentStep || 0,
+        currentIndices: { current: -1, comparing: -1, sortedUpTo: (payload.arr || []).length - 1 },
+        currentPhase: "Completed",
+        stepExplanation: "Array is fully sorted.",
+        sorted: true,
+        totalSteps: payload.totalSteps || last.totalSteps,
+      });
+    }
+  }
+  return steps;
+};
+
+const InsertionSortVisualizer = () => {
+  const [array, setArray] = useState([]);
+  const [challengeEnabled, setChallengeEnabled] = useState(false);
+  const replayTimeoutRef = useRef(null);
+  const {
+    activeQuestion,
+    askChallenge,
+    resetChallengeStats,
+    stats: challengeStats,
+    submitAnswer,
+  } = useSortingChallenge(challengeEnabled);
+
+  const [visualState, setVisualState] = useState({
+    comparisons: 0, shifts: 0, currentIndices: { current: -1, comparing: -1, sortedUpTo: -1 },
+    currentPhase: "", stepExplanation: "", sorted: false, totalSteps: 0,
+  });
+
+  const steps = useMemo(() => {
+    if (array.length === 0) return [];
+    return precomputeSteps(array);
+  }, [array]);
+
+  const onStep = useCallback((step) => {
+    setVisualState({
+      comparisons: step.comparisons,
+      shifts: step.shifts,
+      currentIndices: step.currentIndices,
+      currentPhase: step.currentPhase,
+      stepExplanation: step.stepExplanation,
+      sorted: step.sorted,
+      totalSteps: step.totalSteps,
+    });
+
+    if (step.isChallengeStart && step.challengeData) {
+      askChallenge(step.challengeData);
+    }
+
+    if (step.isShift && step.shiftJ !== undefined) {
+      const bars = document.querySelectorAll(".bar");
+      const movingBar = bars[step.shiftJ + 1];
+      if (movingBar) {
+        gsap.to(movingBar, { y: -20, duration: 0.1 });
+        gsap.to(movingBar, { x: "+=70", duration: 0.2, ease: "power2.inOut", delay: 0.1 });
+        gsap.to(movingBar, { y: 0, duration: 0.1, delay: 0.3 });
+        setTimeout(() => gsap.set(movingBar, { clearProps: "transform" }), 450);
+      }
+    }
+
+    if (step.isInserted && step.insertI !== undefined && step.insertJ !== undefined) {
+      const bars = document.querySelectorAll(".bar");
+      const insertBar = bars[step.insertI];
+      if (insertBar) {
+        const moveX = (step.insertJ + 1 - step.insertI) * 70;
+        gsap.to(insertBar, { y: -20, duration: 0.1 });
+        gsap.to(insertBar, { x: moveX, duration: 0.2, ease: "power2.inOut", delay: 0.1 });
+        gsap.to(insertBar, { y: 0, duration: 0.1, delay: 0.3 });
+        setTimeout(() => gsap.set(insertBar, { clearProps: "transform" }), 450);
+      }
+    }
+  }, [askChallenge]);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 500 });
+
+  const currentStepData = steps[engine.currentStep];
+
+  const handleStart = useCallback(() => {
+    if (currentStepData?.sorted) {
+      engine.reset();
+      setTimeout(() => engine.play(), 50);
+      replayTimeoutRef.current = setTimeout(() => engine.play(), 50);
+    } else {
+      engine.play();
+    }
+  }, [engine, currentStepData]);
+
+  const handleReset = useCallback(() => {
+    clearTimeout(replayTimeoutRef.current);
+    setVisualState({
+      comparisons: 0, shifts: 0, currentIndices: { current: -1, comparing: -1, sortedUpTo: -1 },
+      currentPhase: "", stepExplanation: "", sorted: false, totalSteps: 0,
+    });
+    engine.reset();
+  }, [engine]);
+
+  useEffect(() => {
+    return () => clearTimeout(replayTimeoutRef.current);
+  }, []);
+
+  useVisualizerKeyboard({
+    onStart: handleStart,
+    onReset: handleReset,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+    onTogglePlayPause: engine.isPlaying ? engine.pause : handleStart,
+    speed: engine.speed / 500,
+    sorting: engine.isPlaying,
+    sorted: currentStepData?.sorted || false,
+  });
+
+  const handleExplainStep = () => {
+    const prompt = `I am currently looking at the Insertion Sort algorithm, at step ${engine.currentStep} of ${steps.length}.
+Phase: ${visualState.currentPhase}
+Explanation on screen: ${visualState.stepExplanation}
+Current Array State: [${currentStepData?.array?.join(", ") || array.join(", ")}]
+Currently inserting index: ${visualState.currentIndices.current}
+Currently comparing with index: ${visualState.currentIndices.comparing}
+Sorted up to index: ${visualState.currentIndices.sortedUpTo}
+
+Please explain exactly what is happening in this step in detail.`;
+    
+    window.dispatchEvent(
+      new CustomEvent("chatbot-explain", { detail: { prompt } })
+    );
+  };
+
+  return (
+    <main className="container mx-auto px-6 pb-6">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Visualize how Insertion Sort builds the final sorted array.
+      </p>
+      <div className="max-w-4xl mx-auto">
+        <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2 mb-2">
+            <div className="flex flex-col gap-1">
+              <RandomArray onGenerate={(newArray) => { setArray(newArray); handleReset(); }} disabled={engine.isPlaying} isPrimary={array.length === 0} />
+              <CustomArrayInput 
+                onUseCustomArray={(newArray) => { 
+                  setArray(newArray); 
+                  handleReset(); 
+                }} 
+                disabled={engine.isPlaying}   
+                currentArray={array}  
+                className="w-full" />
+            </div>
+            <div className="flex flex-col gap-2 justify-between">
+              <button onClick={handleStart} disabled={!array.length} className="w-full disabled:opacity-75 bg-none bg-[#a435f0] hover:bg-[#8f2cd6] px-4 py-2 rounded shadow-sm transition-all duration-300 text-sm sm:text-base text-white">
+                {engine.isPlaying ? "Sorting..." : currentStepData?.sorted ? "Restart" : "Start Insertion Sort"}
+              </button>
+              <button 
+                onClick={handleReset} disabled={engine.isPlaying} className="w-full bg-none text-[#a435f0] border border-[#a435f0] hover:bg-[#f3e8ff] dark:hover:bg-[#a435f0]/20 px-4 py-2 rounded transition-colors text-sm sm:text-base">
+                Reset All
+              </button>
+            </div>
+          </div>
+          
+          {engine.isPlaying && (
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={engine.isPlaying ? engine.pause : handleStart}
+              speed={engine.speed / 500}
+              onSpeedChange={(s) => engine.setSpeed(s * 500)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={engine.reset}
+              onExplainStep={handleExplainStep}
+              disabled={steps.length === 0}
+            />
+          )}
+
+          {!engine.isPlaying && (
+            <div className="flex items-center gap-4 mb-4">
+              <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">Speed:</span>
+              <input
+                type="range"
+                min="0.5"
+                max="5"
+                step="0.5"
+                value={engine.speed / 500}
+                onChange={(e) => engine.setSpeed(parseFloat(e.target.value) * 500)}
+                className="w-24 sm:w-32"
+              />
+              <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">{engine.speed / 500}x</span>
+            </div>
+          )}
+          
+          <ChallengeModePanel
+            activeQuestion={activeQuestion}
+            disabled={engine.isPlaying}
+            enabled={challengeEnabled}
+            onEnabledChange={setChallengeEnabled}
+            onResetStats={resetChallengeStats}
+            onSubmitAnswer={submitAnswer}
+            stats={challengeStats}
+          />
+          
+          <div className="grid grid-cols-2 gap-4 text-sm sm:text-base">
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Comparisons:</div>
+              <div className="text-xl sm:text-2xl">{visualState.comparisons}</div>
+            </div>
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Shifts:</div>
+              <div className="text-xl sm:text-2xl">{visualState.shifts}</div>
+            </div>
+          </div>
+          <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+            <div className="font-medium">Step:</div>
+            <div className="text-xl font-bold">
+              {visualState.totalSteps > 0 ? `${engine.currentStep + 1} / ${steps.length}` : "—"}
+            </div>
+            <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+              {engine.currentStep > 0 && !visualState.sorted
+                ? `Inserting element at index ${visualState.currentIndices.current}`
+                : visualState.sorted
+                ? "Sorting complete!"
+                : "Start sorting to see steps"}
+            </div>
+          </div>
+          <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+            <div className="font-medium">Phase:</div>
+            <div className="text-sm sm:text-base text-gray-800 dark:text-gray-200">
+              {visualState.currentPhase || (visualState.sorted ? "Completed" : "Ready to start")}
+            </div>
+            <div className="font-medium mt-2">Explanation:</div>
+            <div className="text-sm text-gray-700 dark:text-gray-300 mt-1">
+              {visualState.stepExplanation || (visualState.sorted ? "Array is fully sorted." : "Run the algorithm to see educational hints.")}
+            </div>
+          </div>
+        </div>
+        
+        <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
+          <h2 className="text-lg sm:text-xl font-semibold mb-4">Array Visualization</h2>
+          {(currentStepData?.array || array).length > 0 ? (
+            <div className="flex flex-wrap gap-2 sm:gap-4 justify-center">
+              {((currentStepData?.array) || array).map((value, index) => {
+                const isCurrent = index === visualState.currentIndices.current;
+                const isComparing = index === visualState.currentIndices.comparing;
+                const isSorted = visualState.sorted || index <= visualState.currentIndices.sortedUpTo;
+                return (
+                  <div key={index} className="flex flex-col items-center">
+                    <div
+                      className={`bar w-12 h-12 sm:w-16 sm:h-16 flex items-center justify-center rounded-lg border-2 shadow-md dark:shadow-blue-900 transition-all duration-300 ${getFontSize(value)} font-bold
+                            ${
+                              isCurrent
+                                ? "bg-yellow-400 dark:bg-yellow-400 border-yellow-600 dark:border-yellow-600 dark:text-gray-900"
+                                : isComparing
+                                ? "bg-red-400 dark:bg-red-400 border-red-600 dark:border-red-600 dark:text-gray-900"
+                                : isSorted
+                                ? "bg-green-400 dark:bg-green-400 border-green-600 dark:border-green-600 dark:text-gray-900"
+                                : "bg-primary/80 dark:bg-primary/80 border-primary dark:border-primary dark:text-gray-900"
+                            }`}
+                    >
+                      {value}
+                    </div>
+                    <div className="mt-1 text-xs text-gray-700 dark:text-[#c27cf7] font-semibold">{index}</div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="text-center py-8 text-gray-500 text-sm sm:text-base">{engine.isPlaying ? "Sorting..." : "Generate or enter an array to begin"}</div>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default InsertionSortVisualizer;
diff --git a/src/app/visualizer/array/insertionsort/codeBlock.jsx b/src/app/visualizer/array/insertionsort/codeBlock.jsx
new file mode 100644
index 000000000..e2937c1fb
--- /dev/null
+++ b/src/app/visualizer/array/insertionsort/codeBlock.jsx
@@ -0,0 +1,147 @@
+'use client';
+
+import CodeBlock from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for Insertion Sort ───────────────────────────────────
+const codeExamples = {
+  javascript: `// Insertion Sort in JavaScript
+function insertionSort(arr) {
+  for (let i = 1; i < arr.length; i++) {
+    let current = arr[i];
+    let j = i - 1;
+    while (j >= 0 && arr[j] > current) {
+      arr[j + 1] = arr[j];
+      j--;
+    }
+    arr[j + 1] = current;
+  }
+  return arr;
+}
+// Usage example
+const numbers = [12, 11, 13, 5, 6];
+console.log("Before sorting:", numbers);
+const result = insertionSort(numbers);
+console.log("After sorting:", result);`,
+
+  python: `# Insertion Sort in Python
+def insertion_sort(arr):
+    for i in range(1, len(arr)):
+        current = arr[i]
+        j = i - 1
+        while j >= 0 and arr[j] > current:
+            arr[j + 1] = arr[j]
+            j -= 1
+        arr[j + 1] = current
+    return arr
+# Usage example
+numbers = [12,11,13,5,6]
+print("Before sorting:", numbers)
+result = insertion_sort(numbers)
+print("After sorting:", result)`,
+
+  java: `// Insertion Sort in Java
+public class InsertionSort {
+    public static void insertionSort(int[] arr) {
+        for (int i = 1; i < arr.length; i++) {
+            int current = arr[i];
+            int j = i - 1;
+            while (j >= 0 && arr[j] > current) {
+                arr[j + 1] = arr[j];
+                j--;
+            }
+            arr[j + 1] = current;
+        }
+    }
+    public static void main(String[] args) {
+        int[] numbers = {12,11,13,5,6};
+        System.out.print("Before sorting: ");
+        for(int num : numbers){
+            System.out.print(num + " ");
+        }
+        insertionSort(numbers);
+        System.out.print("\\nAfter sorting: ");
+        for(int num : numbers){
+            System.out.print(num + " ");
+        }
+    }
+}`,
+
+  c: `// Insertion Sort in C
+#include<stdio.h>
+void insertionSort(int arr[], int n){
+    for(int i=1;i<n;i++){
+        int current = arr[i];
+        int j = i-1;
+        while(j>=0 && arr[j]>current){
+            arr[j+1]=arr[j];
+            j--;
+        }
+        arr[j+1]=current;
+    }
+}
+void printArray(int arr[], int n){
+    for(int i=0;i<n;i++){
+        printf("%d ",arr[i]);
+    }
+}
+int main(){
+    int numbers[]={12,11,13,5,6};
+    int size=sizeof(numbers)/sizeof(numbers[0]);
+    printf("Before sorting: ");
+    printArray(numbers,size);
+    insertionSort(numbers,size);
+    printf("\\nAfter sorting: ");
+    printArray(numbers,size);
+    return 0;
+}`,
+
+  cpp: `// Insertion Sort in C++
+#include<iostream>
+#include<vector>
+using namespace std;
+void insertionSort(vector<int>& arr){
+    for(int i=1;i<arr.size();i++){
+        int current=arr[i];
+        int j=i-1;
+        while(j>=0 && arr[j]>current){
+            arr[j+1]=arr[j];
+            j--;
+        }
+        arr[j+1]=current;
+    }
+}
+void printArray(vector<int> arr){
+    for(int num : arr){
+        cout<<num<<" ";
+    }
+}
+int main(){
+    vector<int> numbers={12,11,13,5,6};
+    cout<<"Before sorting: ";
+    printArray(numbers);
+    insertionSort(numbers);
+    cout<<"\\nAfter sorting: ";
+    printArray(numbers);
+    return 0;
+}`
+};
+
+// ─── Filenames shown in title bar ──────────────────────────────────────────
+const fileNames = {
+  javascript: 'insertionSort.js',
+  python: 'insertion_sort.py',
+  java: 'InsertionSort.java',
+  c: 'insertion_sort.c',
+  cpp: 'insertion_sort.cpp',
+};
+
+// ─── Component ─────────────────────────────────────────────────────────────
+const InsertionSortCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default InsertionSortCode;
\ No newline at end of file
diff --git a/src/app/visualizer/array/insertionsort/content.jsx b/src/app/visualizer/array/insertionsort/content.jsx
new file mode 100644
index 000000000..083dc2eab
--- /dev/null
+++ b/src/app/visualizer/array/insertionsort/content.jsx
@@ -0,0 +1,247 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState('light');
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+  
+  const paragraph = [
+    `Insertion Sort is a simple sorting algorithm that builds the final sorted array one item at a time. It works similarly to how you might sort playing cards in your hands - you take each new card and insert it into its proper position among the already sorted cards.`,
+    `The algorithm maintains a "sorted sublist" that grows with each iteration.`,
+    `Insertion Sort is often used when the data is nearly sorted (where it approaches O(n) time) or when the dataset is small. Some hybrid algorithms like TimSort use Insertion Sort for small subarrays due to its low overhead.`,
+  ];
+
+  const working = [
+    {
+      points: "First Element (7):",
+      subpoints: ['Already "sorted" as the first item', "→ [7, 3, 5, 2, 1]"],
+    },
+    {
+      points: "Second Element (3):",
+      subpoints: ["Insert before 7", "→ [3, 7, 5, 2, 1]"],
+    },
+    {
+      points: "Third Element (5):",
+      subpoints: ["Insert between 3 and 7", "→ [3, 5, 7, 2, 1]"],
+    },
+    {
+      points: "Fourth Element (2):",
+      subpoints: ["Insert at beginning", "→ [2, 3, 5, 7, 1]"],
+    },
+    {
+      points: "Fifth Element (1):",
+      subpoints: ["Insert at beginning", "→ [1, 2, 3, 5, 7]"],
+    },
+  ];
+
+  const algorithm = [
+    {
+      steps: "Start with the second element (consider first element as sorted)",
+    },
+    { steps: "Pick the next element (key) from the unsorted portion" },
+    {
+      steps: "Compare the key with elements in the sorted portion:",
+      points: [
+        "Shift elements greater than the key one position right",
+        "Stop when you find an element ≤ the key",
+      ],
+    },
+    { steps: "Insert the key in its correct position" },
+    { steps: "Repeat until all elements are processed" },
+  ];
+
+  const timeComplexity = [
+    {
+      points:
+        "Best Case: Already sorted array → O(n) (only comparisons, no shifts).",
+    },
+    { points: "Average Case: Randomly ordered array → O(n²)." },
+    {
+      points:
+        "Worst Case: Reverse sorted array → O(n²) (maximum comparisons and shifts).",
+    },
+  ];
+
+  const advantages = [
+    {
+      points:
+        "Efficient for small datasets (often faster than more complex algorithms for n ≤ 10)",
+    },
+    { points: "Stable (doesn't change relative order of equal elements)" },
+    { points: "Adaptive (performs well with partially sorted data)" },
+    { points: "Online (can sort as it receives input)" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is Insertion Sort */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is Insertion Sort?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraph[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* How Does It Work */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            How Does It Work?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Consider this unsorted array: [7, 3, 5, 2, 1]
+            </p>
+
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {working.map((items, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-semibold">{items.points}</span>
+                  {items.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500 font-normal">
+                      {items.subpoints.map((subitems, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitems}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+
+            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+              {paragraph[1]}
+            </p>
+          </div>
+        </section>
+
+        {/* Algorithm Steps */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Algorithm Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {algorithm.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.steps}
+                  {item.points && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.points.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {timeComplexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                    {item.points.split(":")[0]}:
+                  </span>
+                  <span className="ml-2">{item.points.split(":")[1]}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="mt-8">
+            <ComplexityGraph
+              bestCase={(n) => n}
+              averageCase={(n) => n * n}
+              worstCase={(n) => n * n}
+              maxN={25}
+            />
+          </div>
+        </section>
+
+        {/* Advantages */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Advantages
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {advantages.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraph[2]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/array/insertionsort/quiz.jsx b/src/app/visualizer/array/insertionsort/quiz.jsx
new file mode 100644
index 000000000..fb717ab3b
--- /dev/null
+++ b/src/app/visualizer/array/insertionsort/quiz.jsx
@@ -0,0 +1,254 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const InsertionSortQuiz = () => {
+  const questions = [
+    {
+      question: "What is the basic principle of Insertion Sort?",
+      options: [
+        "Dividing the list into smaller sublists and merging them",
+        "Building the final sorted array one item at a time by inserting each element in its correct position",
+        "Repeatedly swapping adjacent elements if they are in the wrong order",
+        "Selecting the smallest element and moving it to the front"
+      ],
+      correctAnswer: 1,
+      explanation: "Insertion Sort works by building the final sorted array one item at a time, similar to how you might sort playing cards in your hands."
+    },
+    {
+      question: "What is the time complexity of Insertion Sort in the worst case?",
+      options: [
+        "O(n)",
+        "O(n log n)",
+        "O(n²)",
+        "O(1)"
+      ],
+      correctAnswer: 2,
+      explanation: "In the worst case (when the list is sorted in reverse order), Insertion Sort requires O(n²) comparisons and shifts."
+    },
+    {
+      question: "In the array [7, 3, 5, 2, 1], how many shifts occur when inserting the element '2'?",
+      options: [
+        "1",
+        "2",
+        "3",
+        "4"
+      ],
+      correctAnswer: 2,
+      explanation: "When inserting '2', we need to shift '7', '5', and '3' to the right (3 shifts) before inserting '2' at the beginning."
+    },
+    {
+      question: "When would Insertion Sort perform at its best?",
+      options: [
+        "When the array is in random order",
+        "When the array is sorted in reverse order",
+        "When the array is already sorted",
+        "When the array contains duplicate values"
+      ],
+      correctAnswer: 2,
+      explanation: "Insertion Sort performs best (O(n)) when the array is already sorted, as it only needs to make comparisons without any shifts."
+    },
+    {
+      question: "What is the space complexity of Insertion Sort?",
+      options: [
+        "O(n)",
+        "O(n log n)",
+        "O(n²)",
+        "O(1)"
+      ],
+      correctAnswer: 3,
+      explanation: "Insertion Sort is an in-place algorithm that only requires O(1) additional space for temporary storage during shifts."
+    },
+    {
+      question: "Which of these is NOT an advantage of Insertion Sort?",
+      options: [
+        "Efficient for small datasets",
+        "Stable (maintains relative order of equal elements)",
+        "Online (can sort as it receives input)",
+        "Efficient for large, randomly ordered datasets"
+      ],
+      correctAnswer: 3,
+      explanation: "Insertion Sort is not efficient for large, randomly ordered datasets due to its O(n²) average time complexity."
+    },
+    {
+      question: "Why might hybrid algorithms like TimSort use Insertion Sort?",
+      options: [
+        "Because it's the fastest sorting algorithm for all cases",
+        "Because it has excellent cache performance",
+        "Because of its low overhead for small subarrays",
+        "Because it's the easiest to implement"
+      ],
+      correctAnswer: 2,
+      explanation: "Hybrid algorithms often use Insertion Sort for small subarrays (typically ≤ 10 elements) due to its low overhead and good performance on small datasets."
+    },
+    {
+  question: "What is the basic idea behind Insertion Sort?",
+  options: [
+    "Repeatedly swap adjacent elements",
+    "Insert each element into its correct position in the sorted portion",
+    "Divide the array into halves",
+    "Always select the largest element first"
+  ],
+  correctAnswer: 1,
+  explanation: "Insertion Sort builds a sorted portion of the array by inserting each new element into its correct position."
+},
+{
+  question: "What is the worst-case time complexity of Insertion Sort?",
+  options: [
+    "O(log n)",
+    "O(n)",
+    "O(n log n)",
+    "O(n²)"
+  ],
+  correctAnswer: 3,
+  explanation: "In the worst case (reverse sorted array), each element must be shifted through the sorted portion, giving O(n²) time complexity."
+},
+{
+  question: "When does Insertion Sort achieve its best-case time complexity?",
+  options: [
+    "When the array is already sorted",
+    "When the array is reverse sorted",
+    "When all elements are different",
+    "When the array has duplicates"
+  ],
+  correctAnswer: 0,
+  explanation: "If the array is already sorted, Insertion Sort only performs comparisons, resulting in O(n) time complexity."
+},
+{
+  question: "Is Insertion Sort a stable sorting algorithm?",
+  options: [
+    "Yes",
+    "No",
+    "Only for integers",
+    "Only for sorted arrays"
+  ],
+  correctAnswer: 0,
+  explanation: "Insertion Sort is stable because equal elements retain their original relative order."
+},
+{
+  question: "Which type of dataset is Insertion Sort most suitable for?",
+  options: [
+    "Very large random datasets",
+    "Small or nearly sorted datasets",
+    "Distributed datasets",
+    "Binary trees"
+  ],
+  correctAnswer: 1,
+  explanation: "Insertion Sort performs efficiently on small or nearly sorted datasets due to its adaptive nature."
+},
+{
+  question: "How does Insertion Sort build the sorted array?",
+  options: [
+    "By repeatedly merging subarrays",
+    "By inserting one element at a time into its correct position",
+    "By selecting the largest element first",
+    "By swapping random elements"
+  ],
+  correctAnswer: 1,
+  explanation: "Insertion Sort builds the sorted portion one element at a time by inserting each element into its correct position."
+},
+{
+  question: "Which part of the array is considered sorted during Insertion Sort?",
+  options: [
+    "The entire array",
+    "The left portion of the array",
+    "The right portion of the array",
+    "Only the last element"
+  ],
+  correctAnswer: 1,
+  explanation: "The left portion of the array is maintained in sorted order, while the remaining elements are processed one by one."
+},
+{
+  question: "What is the auxiliary space complexity of Insertion Sort?",
+  options: [
+    "O(1)",
+    "O(log n)",
+    "O(n)",
+    "O(n²)"
+  ],
+  correctAnswer: 0,
+  explanation: "Insertion Sort is an in-place algorithm and requires only constant extra memory."
+},
+{
+  question: "What operation is performed instead of frequent swapping in Insertion Sort?",
+  options: [
+    "Merging",
+    "Partitioning",
+    "Shifting elements",
+    "Recursion"
+  ],
+  correctAnswer: 2,
+  explanation: "Insertion Sort shifts larger elements to the right to make room for the current element."
+},
+{
+  question: "How many passes are required to sort an array of n elements using Insertion Sort?",
+  options: [
+    "n",
+    "n - 1",
+    "log n",
+    "n²"
+  ],
+  correctAnswer: 1,
+  explanation: "Insertion Sort requires n−1 passes because the first element is already considered sorted."
+},
+{
+  question: "Insertion Sort is classified as which type of sorting algorithm?",
+  options: [
+    "Comparison-based sorting",
+    "Non-comparison sorting",
+    "Hashing algorithm",
+    "Graph algorithm"
+  ],
+  correctAnswer: 0,
+  explanation: "Insertion Sort compares elements to determine their correct order, making it a comparison-based sorting algorithm."
+},
+{
+  question: "Why is Insertion Sort considered adaptive?",
+  options: [
+    "It changes into Merge Sort automatically",
+    "It performs faster on nearly sorted arrays",
+    "It uses recursion when needed",
+    "It reduces memory usage dynamically"
+  ],
+  correctAnswer: 1,
+  explanation: "Insertion Sort takes advantage of existing order, making it efficient for nearly sorted data."
+},
+{
+  question: "Which sorting algorithm is most similar to arranging playing cards in your hand?",
+  options: [
+    "Bubble Sort",
+    "Selection Sort",
+    "Insertion Sort",
+    "Quick Sort"
+  ],
+  correctAnswer: 2,
+  explanation: "Insertion Sort mimics the way people naturally sort playing cards by inserting each card into its proper position."
+},
+{
+  question: "Which statement about Insertion Sort is TRUE?",
+  options: [
+    "It is not stable",
+    "It always runs in O(n²)",
+    "It is stable and in-place",
+    "It requires additional arrays"
+  ],
+  correctAnswer: 2,
+  explanation: "Insertion Sort is both stable and in-place, preserving the order of equal elements while using constant extra memory."
+},
+{
+  question: "Which scenario is ideal for using Insertion Sort?",
+  options: [
+    "Large random datasets",
+    "Small or nearly sorted datasets",
+    "Distributed databases",
+    "Massive external storage systems"
+  ],
+  correctAnswer: 1,
+  explanation: "Insertion Sort performs particularly well on small datasets and nearly sorted arrays because it minimizes unnecessary operations."
+}
+  ];
+
+  return <QuizEngine title="Insertion Sort Quiz Challenge" questions={questions} />;
+};
+
+export default InsertionSortQuiz;
diff --git a/src/app/visualizer/array/insertionsort/quiz/page.jsx b/src/app/visualizer/array/insertionsort/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/array/insertionsort/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/interpolation-search/AlgorithmClient.jsx b/src/app/visualizer/array/interpolation-search/AlgorithmClient.jsx
new file mode 100644
index 000000000..c1435d0da
--- /dev/null
+++ b/src/app/visualizer/array/interpolation-search/AlgorithmClient.jsx
@@ -0,0 +1,40 @@
+import Animation from "@/app/visualizer/array/interpolation-search/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/array/interpolation-search/codeBlock";
+import Content from "@/app/visualizer/array/interpolation-search/content";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Array", "Interpolation Search")}
+      title="Interpolation Search"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.interpolationSearch}
+          description="Mark Interpolation Search as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[
+            { text: "Linear Search", url: "../linearsearch" },
+            { text: "Binary Search", url: "../binarysearch" },
+            { text: "Jump Search", url: "../jump-search" },
+            { text: "Fibonacci Search", url: "../fibonacci-search" },
+            { text: "Exponential Search", url: "../exponential-search" },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/interpolation-search/animation.jsx b/src/app/visualizer/array/interpolation-search/animation.jsx
new file mode 100644
index 000000000..aeb2b8dd1
--- /dev/null
+++ b/src/app/visualizer/array/interpolation-search/animation.jsx
@@ -0,0 +1,615 @@
+"use client";
+
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+} from "react";
+
+import GoButton from "@/app/components/ui/goButton";
+import ResetButton from "@/app/components/ui/resetButton";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+
+import {
+  saveToStorage,
+  loadFromStorage,
+  removeFromStorage,
+} from "@/utils/storage";
+
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+import {
+  interpolationSearchGenerator,
+} from "@/features/algorithms/array/interpolationSearchLogic";
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+
+  if (len <= 2) return "text-lg";
+  if (len === 3) return "text-sm";
+
+  return "text-xs";
+};
+
+const InterpolationSearch = () => {
+  const [arrayElements, setArrayElements] = useState(() =>
+    loadFromStorage("interpolation-array-elements", "")
+  );
+
+  const [target, setTarget] = useState(() =>
+    loadFromStorage("interpolation-target", "")
+  );
+
+  const [array, setArray] = useState([]);
+
+  const [targetValue, setTargetValue] = useState(null);
+
+  const [message, setMessage] = useState("");
+
+  const [messageType, setMessageType] = useState("");
+
+  const [autoSort, setAutoSort] = useState(false);
+
+  const [showAutoSort, setShowAutoSort] = useState(false);
+
+  const [visualState, setVisualState] = useState({
+    low: -1,
+    high: -1,
+    pos: -1,
+    foundIndex: -1,
+    stepExplanation: "",
+    stepCount: 0,
+  });
+
+  useEffect(() => {
+    saveToStorage(
+      "interpolation-array-elements",
+      arrayElements
+    );
+  }, [arrayElements]);
+
+  useEffect(() => {
+    saveToStorage(
+      "interpolation-target",
+      target
+    );
+  }, [target]);
+
+  const steps = useMemo(() => {
+    if (array.length === 0 || targetValue === null)
+      return [];
+
+    return Array.from(
+      interpolationSearchGenerator(array, targetValue)
+    );
+  }, [array, targetValue]);
+
+  const onStep = useCallback(
+    (step) => {
+      let explanation = "";
+
+      switch (step.type) {
+        case "checking":
+          explanation = `Checking estimated position ${step.pos}.`;
+          break;
+
+        case "move_right":
+          explanation = `Target is greater than current value. Move the low pointer to the right.`;
+          break;
+
+        case "move_left":
+          explanation = `Target is smaller than current value. Move the high pointer to the left.`;
+          break;
+
+        case "found":
+          explanation = `Target ${targetValue} found at index ${step.pos}.`;
+
+          setMessage(
+            `Element ${targetValue} found at index ${step.pos}!`
+          );
+
+          setMessageType("success");
+          break;
+
+        case "not_found":
+          explanation = `Element ${targetValue} is not present in the array.`;
+
+          setMessage(
+            `Element ${targetValue} not found.`
+          );
+
+          setMessageType("error");
+          break;
+
+        default:
+          explanation = "";
+      }
+
+      setVisualState({
+        low: step.low ?? -1,
+        high: step.high ?? -1,
+        pos: step.pos ?? -1,
+        foundIndex:
+          step.type === "found"
+            ? step.pos
+            : -1,
+        stepExplanation: explanation,
+        stepCount: step.step || 0,
+      });
+    },
+    [targetValue]
+  );
+
+  const engine = useAnimationEngine({
+    steps,
+    onStep,
+    initialSpeed: 1000,
+  });
+
+  const isAnimating =
+    engine.isPlaying || engine.currentStep > 0;
+
+  const generateRandomArray = () => {
+    if (isAnimating) return;
+
+    const size =
+      Math.floor(Math.random() * 6) + 5;
+
+    const elements = Array.from(
+      { length: size },
+      () =>
+        Math.floor(Math.random() * 100)
+    ).sort((a, b) => a - b);
+
+    setArrayElements(elements.join(", "));
+  };
+    const handleReset = () => {
+    engine.reset();
+
+    removeFromStorage("interpolation-array-elements");
+    removeFromStorage("interpolation-target");
+
+    setArray([]);
+    setTargetValue(null);
+
+    setMessage("");
+    setMessageType("");
+
+    setVisualState({
+      low: -1,
+      high: -1,
+      pos: -1,
+      foundIndex: -1,
+      stepExplanation: "",
+      stepCount: 0,
+    });
+
+    setAutoSort(false);
+    setShowAutoSort(false);
+
+    setArrayElements("");
+    setTarget("");
+  };
+
+  const handleGo = (e) => {
+    e.preventDefault();
+
+    engine.reset();
+
+    setMessage("");
+    setMessageType("");
+
+    setVisualState({
+      low: -1,
+      high: -1,
+      pos: -1,
+      foundIndex: -1,
+      stepExplanation: "",
+      stepCount: 0,
+    });
+
+    if (!arrayElements || !target) {
+      setMessage("Please fill in all fields.");
+      setMessageType("warning");
+      return;
+    }
+
+    const rawElements = arrayElements
+      .split(",")
+      .map((el) => el.trim());
+
+    if (rawElements.some((el) => el.includes("."))) {
+      setMessage(
+        "Only integers are supported."
+      );
+      setMessageType("warning");
+      return;
+    }
+
+    const elements = rawElements.map(Number);
+    const targetVal = parseInt(target);
+
+    if (
+      elements.some(isNaN) ||
+      isNaN(targetVal)
+    ) {
+      setMessage("Invalid input.");
+      setMessageType("warning");
+      return;
+    }
+
+    const isSorted = elements.every(
+      (v, i) =>
+        i === 0 || v >= elements[i - 1]
+    );
+
+    if (!isSorted && !autoSort) {
+      setMessage(
+        "Array must be sorted in ascending order."
+      );
+      setMessageType("warning");
+      setShowAutoSort(true);
+      return;
+    }
+
+    let processed = [...elements];
+
+    if (!isSorted && autoSort) {
+      processed.sort((a, b) => a - b);
+
+      setArrayElements(
+        processed.join(", ")
+      );
+
+      setShowAutoSort(false);
+    }
+
+    setArray(processed);
+    setTargetValue(targetVal);
+
+    setTimeout(() => {
+      engine.play();
+    }, 50);
+  };
+
+  useVisualizerKeyboard({
+    onTogglePlayPause: engine.isPlaying
+      ? engine.pause
+      : () => {
+          if (array.length)
+            engine.play();
+        },
+
+    onStepForward: engine.stepForward,
+
+    onStepBackward: engine.stepBackward,
+
+    onSpeedChange: (s) =>
+      engine.setSpeed(s * 1000),
+
+    speed: engine.speed / 1000,
+
+    sorting: engine.isPlaying,
+
+    sorted:
+      engine.currentStep ===
+        steps.length - 1 &&
+      steps.length > 0,
+  });
+
+  const messageClass =
+    messageType === "success"
+      ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
+      : messageType === "warning"
+      ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
+      : "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200";
+
+  return (
+    <main className="container mx-auto">
+
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Visualize how Interpolation Search estimates the most likely position of the target in a sorted array.
+      </p>
+
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8"
+      >
+
+        <div className="mb-4">
+
+          <label className="block mb-2">
+            Sorted Array Elements
+          </label>
+
+          <div className="flex gap-2">
+
+            <input
+              type="text"
+              value={arrayElements}
+              onChange={(e) =>
+                setArrayElements(
+                  e.target.value
+                )
+              }
+              className="w-full p-3 rounded-lg border"
+              placeholder="2, 5, 9, 14, 20"
+              disabled={isAnimating}
+            />
+
+            <button
+              type="button"
+              onClick={
+                generateRandomArray
+              }
+              className="px-4 py-2 bg-[#a435f0] text-white rounded-lg"
+            >
+              Random
+            </button>
+
+          </div>
+
+        </div>
+
+        <div className="mb-4">
+
+          <label className="block mb-2">
+            Target Element
+          </label>
+
+          <div className="flex gap-2">
+
+            <input
+              type="number"
+              value={target}
+              onChange={(e) =>
+                setTarget(
+                  e.target.value
+                )
+              }
+              className="w-48 p-3 rounded-lg border"
+              disabled={isAnimating}
+            />
+
+            <GoButton
+              onClick={handleGo}
+              isAnimating={isAnimating}
+            />
+
+            <ResetButton
+              onReset={handleReset}
+              isAnimating={isAnimating}
+            />
+
+          </div>
+
+        </div>
+
+        {isAnimating && (
+          <PlaybackControls
+            isPlaying={
+              engine.isPlaying
+            }
+            onPlayPause={
+              engine.isPlaying
+                ? engine.pause
+                : () =>
+                    engine.play()
+            }
+            speed={
+              engine.speed / 1000
+            }
+            onSpeedChange={(s) =>
+              engine.setSpeed(
+                s * 1000
+              )
+            }
+            onStepForward={
+              engine.stepForward
+            }
+            onStepBackward={
+              engine.stepBackward
+            }
+            onReset={
+              engine.reset
+            }
+            disabled={
+              steps.length === 0
+            }
+            progressText={`${
+              Math.max(
+                engine.currentStep + 1,
+                0
+              )
+            } / ${steps.length}`}
+          />
+        )}
+
+      </form>
+            {message && (
+        <div
+          className={`max-w-3xl mx-auto mb-8 p-4 rounded-lg ${messageClass}`}
+        >
+          <p className="text-center font-medium">{message}</p>
+
+          {showAutoSort && (
+            <div className="mt-3 flex justify-center">
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={autoSort}
+                  onChange={(e) =>
+                    setAutoSort(e.target.checked)
+                  }
+                />
+                <span>Auto-sort the array for me</span>
+              </label>
+            </div>
+          )}
+        </div>
+      )}
+
+      {array.length > 0 && (
+        <div className="max-w-4xl mx-auto space-y-6">
+
+          {visualState.stepExplanation && (
+            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+
+              <div className="flex items-center gap-2 bg-[#a435f0]/10 dark:bg-[#a435f0]/20 px-4 py-2">
+
+                <span className="w-2 h-2 rounded-full bg-[#a435f0] animate-pulse"></span>
+
+                <span className="text-sm font-semibold text-[#a435f0] uppercase tracking-wide">
+                  Step Explanation
+                </span>
+
+                {visualState.stepCount > 0 && (
+                  <span className="ml-auto text-xs text-gray-500">
+                    Iteration #{visualState.stepCount}
+                  </span>
+                )}
+
+              </div>
+
+              <div className="px-4 py-3">
+                <p className="font-mono text-sm">
+                  {visualState.stepExplanation}
+                </p>
+              </div>
+
+              <div className="px-4 py-2 bg-gray-50 dark:bg-gray-900/40 flex flex-wrap gap-4 text-xs">
+
+                <span>
+                  <span className="font-semibold text-yellow-600">
+                    ■ Yellow
+                  </span>{" "}
+                  = Estimated Position
+                </span>
+
+                <span>
+                  <span className="font-semibold text-blue-600">
+                    ■ Blue
+                  </span>{" "}
+                  = Active Search Range
+                </span>
+
+                <span>
+                  <span className="font-semibold text-green-600">
+                    ■ Green
+                  </span>{" "}
+                  = Found Element
+                </span>
+
+              </div>
+
+            </div>
+          )}
+
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+
+            <h2 className="text-2xl font-semibold text-center mb-6">
+              Array Visualization
+            </h2>
+
+            <div className="flex flex-wrap gap-4 justify-center">
+
+              {array.map((element, index) => {
+
+                const labels = [];
+
+                if (index === visualState.low)
+                  labels.push("low");
+
+                if (index === visualState.pos)
+                  labels.push("pos");
+
+                if (index === visualState.high)
+                  labels.push("high");
+
+                let bgColor =
+                  "bg-gray-200 dark:bg-gray-700";
+
+                let borderColor =
+                  "border-gray-400";
+
+                if (
+                  index ===
+                  visualState.foundIndex
+                ) {
+                  bgColor = "bg-green-500";
+                  borderColor =
+                    "border-green-700";
+                } else if (
+                  index === visualState.pos
+                ) {
+                  bgColor = "bg-yellow-400";
+                  borderColor =
+                    "border-yellow-700";
+                } else if (
+                  visualState.low !== -1 &&
+                  visualState.high !== -1 &&
+                  index >= visualState.low &&
+                  index <= visualState.high
+                ) {
+                  bgColor = "bg-blue-300";
+                  borderColor =
+                    "border-blue-700";
+                }
+
+                return (
+                  <div
+                    key={index}
+                    className="flex flex-col items-center"
+                  >
+
+                    <div
+                      className={`w-16 h-16 rounded-lg border-2 flex items-center justify-center transition-all duration-300 font-semibold ${getFontSize(
+                        element
+                      )} ${bgColor} ${borderColor}`}
+                    >
+                      {element}
+                    </div>
+
+                    <div className="mt-2 text-xs text-center font-mono h-8">
+
+                      {labels.map(
+                        (label, i) => (
+                          <div
+                            key={i}
+                            className={
+                              label ===
+                              "pos"
+                                ? "text-yellow-600 font-semibold"
+                                : "text-blue-600 font-semibold"
+                            }
+                          >
+                            {label}
+                          </div>
+                        )
+                      )}
+
+                      <div className="text-gray-400 text-[10px]">
+                        [{index}]
+                      </div>
+
+                    </div>
+
+                  </div>
+                );
+
+              })}
+
+            </div>
+
+          </div>
+
+        </div>
+      )}
+
+    </main>
+  );
+};
+
+export default InterpolationSearch;
\ No newline at end of file
diff --git a/src/app/visualizer/array/interpolation-search/codeBlock.jsx b/src/app/visualizer/array/interpolation-search/codeBlock.jsx
new file mode 100644
index 000000000..a22ac2b13
--- /dev/null
+++ b/src/app/visualizer/array/interpolation-search/codeBlock.jsx
@@ -0,0 +1,201 @@
+"use client";
+
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const codeExamples = {
+  javascript: `// Interpolation Search in JavaScript
+function interpolationSearch(arr, target) {
+    let low = 0;
+    let high = arr.length - 1;
+
+    while (
+        low <= high &&
+        target >= arr[low] &&
+        target <= arr[high]
+    ) {
+
+        let pos =
+            low +
+            Math.floor(
+                ((target - arr[low]) * (high - low)) /
+                (arr[high] - arr[low])
+            );
+
+        if (arr[pos] === target)
+            return pos;
+
+        if (arr[pos] < target)
+            low = pos + 1;
+        else
+            high = pos - 1;
+    }
+
+    return -1;
+}
+
+// Example
+const arr = [10,20,30,40,50,60,70];
+console.log(interpolationSearch(arr,40));`,
+
+  python: `# Interpolation Search in Python
+
+def interpolation_search(arr, target):
+
+    low = 0
+    high = len(arr) - 1
+
+    while low <= high and target >= arr[low] and target <= arr[high]:
+
+        pos = low + ((target - arr[low]) * (high - low)) // (arr[high] - arr[low])
+
+        if arr[pos] == target:
+            return pos
+
+        elif arr[pos] < target:
+            low = pos + 1
+
+        else:
+            high = pos - 1
+
+    return -1
+
+
+arr = [10,20,30,40,50,60,70]
+print(interpolation_search(arr,40))`,
+
+  java: `// Interpolation Search in Java
+
+class InterpolationSearch {
+
+    static int interpolationSearch(int arr[], int target) {
+
+        int low = 0;
+        int high = arr.length - 1;
+
+        while (low <= high &&
+                target >= arr[low] &&
+                target <= arr[high]) {
+
+            int pos = low +
+                    ((target - arr[low]) * (high - low))
+                    / (arr[high] - arr[low]);
+
+            if (arr[pos] == target)
+                return pos;
+
+            if (arr[pos] < target)
+                low = pos + 1;
+            else
+                high = pos - 1;
+        }
+
+        return -1;
+    }
+
+    public static void main(String[] args) {
+
+        int arr[] = {10,20,30,40,50,60,70};
+
+        System.out.println(interpolationSearch(arr,40));
+    }
+}`,
+
+  c: `// Interpolation Search in C
+
+#include<stdio.h>
+
+int interpolationSearch(int arr[], int n, int target){
+
+    int low = 0;
+    int high = n - 1;
+
+    while(low <= high &&
+          target >= arr[low] &&
+          target <= arr[high]){
+
+        int pos = low +
+                  ((target-arr[low])*(high-low))
+                  /(arr[high]-arr[low]);
+
+        if(arr[pos]==target)
+            return pos;
+
+        if(arr[pos]<target)
+            low=pos+1;
+        else
+            high=pos-1;
+    }
+
+    return -1;
+}
+
+int main(){
+
+    int arr[]={10,20,30,40,50,60,70};
+
+    int n=sizeof(arr)/sizeof(arr[0]);
+
+    printf("%d",interpolationSearch(arr,n,40));
+
+    return 0;
+}`,
+
+  cpp: `// Interpolation Search in C++
+
+#include<iostream>
+using namespace std;
+
+int interpolationSearch(int arr[], int n, int target){
+
+    int low=0;
+    int high=n-1;
+
+    while(low<=high &&
+          target>=arr[low] &&
+          target<=arr[high]){
+
+        int pos=low+
+                ((target-arr[low])*(high-low))
+                /(arr[high]-arr[low]);
+
+        if(arr[pos]==target)
+            return pos;
+
+        if(arr[pos]<target)
+            low=pos+1;
+        else
+            high=pos-1;
+    }
+
+    return -1;
+}
+
+int main(){
+
+    int arr[]={10,20,30,40,50,60,70};
+
+    int n=sizeof(arr)/sizeof(arr[0]);
+
+    cout<<interpolationSearch(arr,n,40);
+
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: "interpolationSearch.js",
+  python: "interpolation_search.py",
+  java: "InterpolationSearch.java",
+  c: "interpolation_search.c",
+  cpp: "interpolation_search.cpp",
+};
+
+const InterpolationSearchCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default InterpolationSearchCode;
\ No newline at end of file
diff --git a/src/app/visualizer/array/interpolation-search/content.jsx b/src/app/visualizer/array/interpolation-search/content.jsx
new file mode 100644
index 000000000..d8109450a
--- /dev/null
+++ b/src/app/visualizer/array/interpolation-search/content.jsx
@@ -0,0 +1,232 @@
+"use client";
+
+import React from "react";
+
+export default function InterpolationSearchContent() {
+  return (
+    <div className="space-y-10">
+
+      {/* Overview */}
+      <section>
+        <h2 className="text-3xl font-bold mb-4">
+          Overview
+        </h2>
+
+        <p className="text-gray-700 dark:text-gray-300 leading-8">
+          <strong>Interpolation Search</strong> is an improved searching
+          algorithm for <strong>sorted and uniformly distributed arrays</strong>.
+          Instead of always checking the middle element like Binary Search,
+          it estimates the most likely position of the target using an
+          interpolation formula.
+        </p>
+
+        <p className="text-gray-700 dark:text-gray-300 leading-8 mt-4">
+          When data is uniformly distributed, Interpolation Search performs
+          significantly faster than Binary Search by jumping directly near the
+          expected location of the target.
+        </p>
+      </section>
+
+      {/* Working */}
+      <section>
+        <h2 className="text-3xl font-bold mb-4">
+          How Interpolation Search Works
+        </h2>
+
+        <ol className="list-decimal pl-6 space-y-3 text-gray-700 dark:text-gray-300">
+          <li>Start with the first and last elements of the sorted array.</li>
+          <li>Estimate the probable position of the target using interpolation.</li>
+          <li>Compare the estimated position with the target.</li>
+          <li>If equal, return the index.</li>
+          <li>If the target is larger, search the right portion.</li>
+          <li>If the target is smaller, search the left portion.</li>
+          <li>Repeat until the target is found or the search space becomes empty.</li>
+        </ol>
+      </section>
+
+      {/* Formula */}
+      <section>
+        <h2 className="text-3xl font-bold mb-4">
+          Position Formula
+        </h2>
+
+        <div className="bg-gray-100 dark:bg-neutral-900 rounded-lg p-5 font-mono text-lg overflow-x-auto">
+          pos = low + ((target - arr[low]) × (high - low)) / (arr[high] - arr[low])
+        </div>
+
+        <p className="mt-4 text-gray-700 dark:text-gray-300">
+          The formula predicts where the target should be based on the value
+          rather than simply choosing the middle element.
+        </p>
+      </section>
+
+      {/* Example */}
+      <section>
+        <h2 className="text-3xl font-bold mb-4">
+          Example
+        </h2>
+
+        <div className="bg-gray-100 dark:bg-neutral-900 rounded-lg p-6">
+
+          <p><strong>Array:</strong></p>
+
+          <p className="font-mono mt-2">
+            [10, 20, 30, 40, 50, 60, 70]
+          </p>
+
+          <p className="mt-4">
+            <strong>Target:</strong> 40
+          </p>
+
+          <ul className="list-disc pl-6 mt-4 space-y-2">
+            <li>low = 0</li>
+            <li>high = 6</li>
+            <li>Estimated position = 3</li>
+            <li>arr[3] = 40</li>
+            <li>Target found at index 3.</li>
+          </ul>
+
+        </div>
+
+      </section>
+
+      {/* Time Complexity */}
+      <section>
+
+        <h2 className="text-3xl font-bold mb-4">
+          Time Complexity
+        </h2>
+
+        <div className="overflow-x-auto">
+
+          <table className="min-w-full border border-gray-300 dark:border-gray-700">
+
+            <thead>
+
+              <tr className="bg-gray-100 dark:bg-neutral-900">
+
+                <th className="border p-3">Case</th>
+
+                <th className="border p-3">Complexity</th>
+
+              </tr>
+
+            </thead>
+
+            <tbody>
+
+              <tr>
+
+                <td className="border p-3">Best Case</td>
+
+                <td className="border p-3">O(1)</td>
+
+              </tr>
+
+              <tr>
+
+                <td className="border p-3">Average Case</td>
+
+                <td className="border p-3">O(log log n)</td>
+
+              </tr>
+
+              <tr>
+
+                <td className="border p-3">Worst Case</td>
+
+                <td className="border p-3">O(n)</td>
+
+              </tr>
+
+            </tbody>
+
+          </table>
+
+        </div>
+
+      </section>
+
+      {/* Space */}
+      <section>
+
+        <h2 className="text-3xl font-bold mb-4">
+          Space Complexity
+        </h2>
+
+        <p className="text-gray-700 dark:text-gray-300 leading-8">
+          Interpolation Search only requires a few variables during execution.
+        </p>
+
+        <div className="mt-4 text-xl font-semibold">
+          O(1)
+        </div>
+
+      </section>
+
+      {/* Advantages */}
+      <section>
+
+        <h2 className="text-3xl font-bold mb-4">
+          Advantages
+        </h2>
+
+        <ul className="list-disc pl-6 space-y-3 text-gray-700 dark:text-gray-300">
+
+          <li>Very fast for uniformly distributed data.</li>
+
+          <li>Can outperform Binary Search.</li>
+
+          <li>Uses constant extra memory.</li>
+
+          <li>Efficient for large sorted datasets.</li>
+
+        </ul>
+
+      </section>
+
+      {/* Disadvantages */}
+      <section>
+
+        <h2 className="text-3xl font-bold mb-4">
+          Disadvantages
+        </h2>
+
+        <ul className="list-disc pl-6 space-y-3 text-gray-700 dark:text-gray-300">
+
+          <li>Works only on sorted arrays.</li>
+
+          <li>Performance drops for non-uniformly distributed data.</li>
+
+          <li>Worst-case complexity is O(n).</li>
+
+        </ul>
+
+      </section>
+
+      {/* Applications */}
+      <section>
+
+        <h2 className="text-3xl font-bold mb-4">
+          Applications
+        </h2>
+
+        <ul className="list-disc pl-6 space-y-3 text-gray-700 dark:text-gray-300">
+
+          <li>Searching in uniformly distributed databases.</li>
+
+          <li>Large sorted numerical datasets.</li>
+
+          <li>Telephone directories.</li>
+
+          <li>Student record systems.</li>
+
+          <li>Financial and statistical datasets.</li>
+
+        </ul>
+
+      </section>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/interpolation-search/page.jsx b/src/app/visualizer/array/interpolation-search/page.jsx
new file mode 100644
index 000000000..414cd949e
--- /dev/null
+++ b/src/app/visualizer/array/interpolation-search/page.jsx
@@ -0,0 +1,59 @@
+import Animation from "@/app/visualizer/array/interpolation-search/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/array/interpolation-search/codeBlock";
+import Content from "@/app/visualizer/array/interpolation-search/content";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Array", "Interpolation Search")}
+      title="Interpolation Search"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.interpolationSearch}
+          description="Mark Interpolation Search as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[
+            {
+              text: "Linear Search",
+              url: "../linearsearch",
+            },
+            {
+              text: "Binary Search",
+              url: "../binarysearch",
+            },
+            {
+              text: "Jump Search",
+              url: "../jump-search",
+            },
+            {
+              text: "Fibonacci Search",
+              url: "../fibonacci-search",
+            },
+            {
+              text: "Exponential Search",
+              url: "../exponential-search",
+            },
+            {
+              text: "Ternary Search",
+              url: "../ternary-search",
+            },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/interpolation-search/quiz/page.jsx b/src/app/visualizer/array/interpolation-search/quiz/page.jsx
new file mode 100644
index 000000000..7a6557281
--- /dev/null
+++ b/src/app/visualizer/array/interpolation-search/quiz/page.jsx
@@ -0,0 +1,5 @@
+import InterpolationSearchQuiz from "./quiz";
+
+export default function Page() {
+  return <InterpolationSearchQuiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/interpolation-search/quiz/quiz.jsx b/src/app/visualizer/array/interpolation-search/quiz/quiz.jsx
new file mode 100644
index 000000000..367a401a3
--- /dev/null
+++ b/src/app/visualizer/array/interpolation-search/quiz/quiz.jsx
@@ -0,0 +1,258 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const interpolationSearchQuestions = [
+  {
+    question: "What is the primary requirement for Interpolation Search?",
+    options: [
+      "The array must be sorted",
+      "The array must be circular",
+      "The array must contain unique elements",
+      "The array must be unsorted",
+    ],
+    answer: "The array must be sorted",
+    explanation:
+      "Interpolation Search only works correctly on sorted arrays.",
+  },
+  {
+    question: "Interpolation Search performs best when the data is:",
+    options: [
+      "Randomly distributed",
+      "Uniformly distributed",
+      "Reverse sorted",
+      "Duplicated",
+    ],
+    answer: "Uniformly distributed",
+    explanation:
+      "It estimates the target's position assuming values are uniformly distributed.",
+  },
+  {
+    question: "Which searching algorithm estimates the target position using a formula?",
+    options: [
+      "Linear Search",
+      "Binary Search",
+      "Interpolation Search",
+      "Jump Search",
+    ],
+    answer: "Interpolation Search",
+    explanation:
+      "Interpolation Search predicts the likely position before comparing.",
+  },
+  {
+    question: "What is the average time complexity of Interpolation Search on uniformly distributed data?",
+    options: [
+      "O(n)",
+      "O(log n)",
+      "O(log log n)",
+      "O(n log n)",
+    ],
+    answer: "O(log log n)",
+    explanation:
+      "Interpolation Search is faster than Binary Search for uniformly distributed data.",
+  },
+  {
+    question: "What is the worst-case time complexity of Interpolation Search?",
+    options: [
+      "O(log n)",
+      "O(log log n)",
+      "O(n)",
+      "O(1)",
+    ],
+    answer: "O(n)",
+    explanation:
+      "For non-uniformly distributed data, it may degrade to linear time.",
+  },
+  {
+    question: "Which pointer represents the beginning of the search interval?",
+    options: [
+      "mid",
+      "low",
+      "high",
+      "pos",
+    ],
+    answer: "low",
+    explanation:
+      "The 'low' pointer always marks the start of the search range.",
+  },
+  {
+    question: "What does the variable 'pos' represent in Interpolation Search?",
+    options: [
+      "The middle element",
+      "The predicted position of the target",
+      "The last element",
+      "The first element",
+    ],
+    answer: "The predicted position of the target",
+    explanation:
+      "The algorithm calculates an estimated position using interpolation.",
+  },
+  {
+    question: "Which of these algorithms generally performs better than Binary Search on uniformly distributed data?",
+    options: [
+      "Linear Search",
+      "Interpolation Search",
+      "Bubble Sort",
+      "Selection Sort",
+    ],
+    answer: "Interpolation Search",
+    explanation:
+      "Interpolation Search reduces the search space more efficiently for uniform data.",
+  },
+  {
+    question: "What is the space complexity of Interpolation Search?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)",
+    ],
+    answer: "O(1)",
+    explanation:
+      "Only a constant amount of extra memory is required.",
+  },
+  {
+    question: "Interpolation Search is most suitable for:",
+    options: [
+      "Small unsorted arrays",
+      "Large sorted uniformly distributed datasets",
+      "Linked Lists",
+      "Stacks",
+    ],
+    answer: "Large sorted uniformly distributed datasets",
+    explanation:
+      "Its prediction formula works best when values are evenly distributed.",
+  },
+  {
+  question: "What happens if the target is smaller than the value at the estimated position?",
+  options: [
+    "Search continues in the right half",
+    "The low pointer increases",
+    "The high pointer decreases",
+    "The search stops immediately",
+  ],
+  answer: "The high pointer decreases",
+  explanation:
+    "If the estimated value is greater than the target, the search continues in the left portion.",
+},
+{
+  question: "Interpolation Search calculates the estimated position based on:",
+  options: [
+    "The middle index",
+    "The Fibonacci sequence",
+    "The values of the elements",
+    "The square root of the array size",
+  ],
+  answer: "The values of the elements",
+  explanation:
+    "It estimates the target position using the values at the low and high indices.",
+},
+{
+  question: "Which formula is used to estimate the next position in Interpolation Search?",
+  options: [
+    "mid = (low + high) / 2",
+    "pos = low + ((target - arr[low]) × (high - low)) / (arr[high] - arr[low])",
+    "jump = √n",
+    "pos = high / 2",
+  ],
+  answer:
+    "pos = low + ((target - arr[low]) × (high - low)) / (arr[high] - arr[low])",
+  explanation:
+    "Interpolation Search predicts the most probable position using this interpolation formula.",
+},
+{
+  question: "Which searching algorithm always checks the middle element first?",
+  options: [
+    "Interpolation Search",
+    "Jump Search",
+    "Binary Search",
+    "Linear Search",
+  ],
+  answer: "Binary Search",
+  explanation:
+    "Binary Search always begins by checking the middle element, unlike Interpolation Search.",
+},
+{
+  question: "Interpolation Search is especially useful for:",
+  options: [
+    "Strings",
+    "Uniformly distributed numeric data",
+    "Linked Lists",
+    "Graphs",
+  ],
+  answer: "Uniformly distributed numeric data",
+  explanation:
+    "It performs best when numeric values are evenly distributed.",
+},
+{
+  question: "If all elements in the array are identical, Interpolation Search should:",
+  options: [
+    "Handle the case carefully to avoid division by zero",
+    "Always return the first element",
+    "Always fail",
+    "Sort the array again",
+  ],
+  answer: "Handle the case carefully to avoid division by zero",
+  explanation:
+    "When arr[low] equals arr[high], the denominator becomes zero, so this case must be handled.",
+},
+{
+  question: "Interpolation Search is an improvement over which algorithm for uniformly distributed data?",
+  options: [
+    "Linear Search",
+    "Binary Search",
+    "Bubble Sort",
+    "Depth First Search",
+  ],
+  answer: "Binary Search",
+  explanation:
+    "Interpolation Search improves Binary Search by estimating a better search position.",
+},
+{
+  question: "Which of the following is NOT required for Interpolation Search?",
+  options: [
+    "Sorted array",
+    "Random access to elements",
+    "Uniform distribution for best performance",
+    "Linked List implementation",
+  ],
+  answer: "Linked List implementation",
+  explanation:
+    "Interpolation Search is designed for arrays with random access, not linked lists.",
+},
+{
+  question: "When does Interpolation Search perform poorly?",
+  options: [
+    "When the array is uniformly distributed",
+    "When the values are unevenly distributed",
+    "When the array is sorted",
+    "When the target is the first element",
+  ],
+  answer: "When the values are unevenly distributed",
+  explanation:
+    "Non-uniform data leads to inaccurate position estimates and poor performance.",
+},
+{
+  question: "Which statement about Interpolation Search is correct?",
+  options: [
+    "It works on unsorted arrays",
+    "It predicts the target position before comparison",
+    "It always performs in O(log log n)",
+    "It requires additional memory proportional to the array size",
+  ],
+  answer: "It predicts the target position before comparison",
+  explanation:
+    "Interpolation Search estimates the most likely position of the target before checking it.",
+}
+];
+
+export default function InterpolationSearchQuiz() {
+  return (
+    <QuizEngine
+      title="Interpolation Search Quiz"
+      subtitle="Test your understanding of Interpolation Search."
+      questions={interpolationSearchQuestions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/jump-search/animation.jsx b/src/app/visualizer/array/jump-search/animation.jsx
new file mode 100644
index 000000000..9a2afdac3
--- /dev/null
+++ b/src/app/visualizer/array/jump-search/animation.jsx
@@ -0,0 +1,666 @@
+"use client";
+
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+} from "react";
+
+import GoButton from "@/app/components/ui/goButton";
+import ResetButton from "@/app/components/ui/resetButton";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+
+import {
+  saveToStorage,
+  loadFromStorage,
+  removeFromStorage,
+} from "@/utils/storage";
+
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+import { jumpSearchGenerator } from "@/features/algorithms/array/jumpSearchLogic";
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+
+  if (len <= 2) return "text-lg";
+  if (len === 3) return "text-sm";
+  return "text-xs";
+};
+
+const JumpSearch = () => {
+
+  const [arrayElements, setArrayElements] = useState(() =>
+    loadFromStorage("jump-array-elements", "")
+  );
+
+  const [target, setTarget] = useState(() =>
+    loadFromStorage("jump-target", "")
+  );
+
+  const [array, setArray] = useState([]);
+  const [targetValue, setTargetValue] = useState(null);
+
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+
+  const [autoSort, setAutoSort] = useState(false);
+  const [showAutoSort, setShowAutoSort] = useState(false);
+
+  const [visualState, setVisualState] = useState({
+
+    current: -1,
+    prev: -1,
+    step: -1,
+    foundIndex: -1,
+
+    phase: "",
+
+    explanation: "",
+
+    iteration: 0,
+
+  });
+
+  useEffect(() => {
+    saveToStorage(
+      "jump-array-elements",
+      arrayElements
+    );
+  }, [arrayElements]);
+
+  useEffect(() => {
+    saveToStorage(
+      "jump-target",
+      target
+    );
+  }, [target]);
+
+  const steps = useMemo(() => {
+
+    if (
+      array.length === 0 ||
+      targetValue === null
+    )
+      return [];
+
+    return Array.from(
+      jumpSearchGenerator(
+        array,
+        targetValue
+      )
+    );
+
+  }, [array, targetValue]);
+
+  const onStep = useCallback(
+    (step) => {
+
+      let explanation = "";
+      let msg = "";
+      let msgType = "";
+
+      switch (step.type) {
+
+        case "jump":
+
+          explanation =
+            `Jumping from index ${step.prev} to index ${step.current}. ` +
+            `Current value = ${step.value}`;
+
+          break;
+
+        case "block_found":
+
+          explanation =
+            `Target may exist between index ${step.prev} and ${step.step - 1}. Starting linear search.`;
+
+          break;
+
+        case "checking":
+
+          explanation =
+            `Checking arr[${step.index}] = ${step.value}`;
+
+          break;
+
+        case "found":
+
+          explanation =
+            `Target found at index ${step.index}.`;
+
+          msg =
+            `Element ${targetValue} found at index ${step.index}!`;
+
+          msgType = "success";
+
+          break;
+
+        case "not_found":
+
+          explanation =
+            `Target not present in the array.`;
+
+          msg =
+            `Element ${targetValue} not found.`;
+
+          msgType = "error";
+
+          break;
+
+        default:
+          break;
+      }
+
+      setVisualState({
+
+        current:
+          step.current ??
+          step.index ??
+          -1,
+
+        prev:
+          step.prev ?? -1,
+
+        step:
+          step.step ?? -1,
+
+        foundIndex:
+          step.type === "found"
+            ? step.index
+            : -1,
+
+        phase: step.type,
+
+        explanation,
+
+        iteration:
+          step.iteration || 0,
+
+      });
+
+      if (msg)
+        setMessage(msg);
+
+      if (msgType)
+        setMessageType(msgType);
+
+    },
+    [targetValue]
+  );
+
+  const engine =
+    useAnimationEngine({
+
+      steps,
+
+      onStep,
+
+      initialSpeed: 1000,
+
+    });
+
+  const isAnimating =
+    engine.isPlaying ||
+    engine.currentStep > 0;
+    const handleReset = () => {
+  engine.reset();
+
+  removeFromStorage("jump-array-elements");
+  removeFromStorage("jump-target");
+
+  setArray([]);
+  setTargetValue(null);
+
+  setMessage("");
+  setMessageType("");
+
+  setVisualState({
+    current: -1,
+    prev: -1,
+    step: -1,
+    foundIndex: -1,
+    phase: "",
+    explanation: "",
+    iteration: 0,
+  });
+
+  setAutoSort(false);
+  setShowAutoSort(false);
+
+  setArrayElements("");
+  setTarget("");
+};
+
+const generateRandomArray = () => {
+  if (isAnimating) return;
+
+  const size = Math.floor(Math.random() * 6) + 6;
+
+  const arr = Array.from(
+    { length: size },
+    () => Math.floor(Math.random() * 100)
+  ).sort((a, b) => a - b);
+
+  setArrayElements(arr.join(", "));
+};
+
+const handleGo = (e) => {
+  e.preventDefault();
+
+  engine.reset();
+
+  setMessage("");
+  setMessageType("");
+
+  setVisualState({
+    current: -1,
+    prev: -1,
+    step: -1,
+    foundIndex: -1,
+    phase: "",
+    explanation: "",
+    iteration: 0,
+  });
+
+  if (!arrayElements || !target) {
+    setMessage("Please fill in all fields.");
+    setMessageType("warning");
+    return;
+  }
+
+  const raw = arrayElements
+    .split(",")
+    .map((x) => x.trim());
+
+  if (raw.some((x) => x.includes("."))) {
+    setMessage("Only integers are supported.");
+    setMessageType("warning");
+    return;
+  }
+
+  const elements = raw.map(Number);
+  const targetVal = Number(target);
+
+  if (
+    elements.some(isNaN) ||
+    isNaN(targetVal)
+  ) {
+    setMessage("Invalid input.");
+    setMessageType("warning");
+    return;
+  }
+
+  const sorted = elements.every(
+    (x, i) => i === 0 || x >= elements[i - 1]
+  );
+
+  if (!sorted && !autoSort) {
+    setMessage("Array must be sorted in ascending order.");
+    setMessageType("warning");
+    setShowAutoSort(true);
+    return;
+  }
+
+  let processed = [...elements];
+
+  if (!sorted && autoSort) {
+    processed.sort((a, b) => a - b);
+
+    setArrayElements(processed.join(", "));
+    setShowAutoSort(false);
+  }
+
+  setArray(processed);
+  setTargetValue(targetVal);
+
+  setTimeout(() => {
+    engine.play();
+  }, 50);
+};
+
+useVisualizerKeyboard({
+  onTogglePlayPause: engine.isPlaying
+    ? engine.pause
+    : () => {
+        if (array.length > 0) {
+          engine.play();
+        }
+      },
+
+  onStepForward: engine.stepForward,
+
+  onStepBackward: engine.stepBackward,
+
+  onSpeedChange: (speed) =>
+    engine.setSpeed(speed * 1000),
+
+  speed: engine.speed / 1000,
+
+  sorting: engine.isPlaying,
+
+  sorted:
+    engine.currentStep ===
+      steps.length - 1 &&
+    steps.length > 0,
+});
+
+const messageClass =
+  messageType === "success"
+    ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
+    : messageType === "warning"
+    ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
+    : "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200";
+
+return (
+  <main className="container mx-auto">
+
+    <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+      Visualize how Jump Search efficiently finds an element in a sorted array.
+    </p>
+
+    <form
+      onSubmit={handleGo}
+      className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8"
+    >
+
+      <div className="mb-4">
+
+        <label className="block mb-2">
+          Sorted Array Elements
+        </label>
+
+        <div className="flex gap-2">
+
+          <input
+            type="text"
+            value={arrayElements}
+            disabled={isAnimating}
+            onChange={(e) =>
+              setArrayElements(e.target.value)
+            }
+            placeholder="1,3,5,7,9"
+            className="w-full p-3 rounded-lg border border-gray-300"
+          />
+
+          <button
+            type="button"
+            onClick={generateRandomArray}
+            disabled={isAnimating}
+            className="px-4 py-2 rounded-lg bg-[#a435f0] text-white"
+          >
+            Random
+          </button>
+
+        </div>
+
+      </div>
+
+      <div className="mb-4">
+
+        <label className="block mb-2">
+          Target
+        </label>
+
+        <div className="flex flex-col sm:flex-row gap-4">
+
+          <input
+            type="number"
+            value={target}
+            disabled={isAnimating}
+            onChange={(e) =>
+              setTarget(e.target.value)
+            }
+            className="w-full sm:max-w-xs p-3 rounded-lg border border-gray-300"
+          />
+
+          <div className="flex gap-2">
+
+            <GoButton
+              onClick={handleGo}
+              isAnimating={isAnimating}
+              disabled={isAnimating}
+            />
+
+            <ResetButton
+              onReset={handleReset}
+              isAnimating={isAnimating}
+            />
+
+          </div>
+
+        </div>
+
+      </div>
+
+      {isAnimating && (
+        <PlaybackControls
+          isPlaying={engine.isPlaying}
+          onPlayPause={
+            engine.isPlaying
+              ? engine.pause
+              : () => engine.play()
+          }
+          speed={engine.speed / 1000}
+          onSpeedChange={(s) =>
+            engine.setSpeed(s * 1000)
+          }
+          onStepForward={engine.stepForward}
+          onStepBackward={engine.stepBackward}
+          onReset={engine.reset}
+          onExplainStep={() => {}}
+          disabled={steps.length === 0}
+          progressText={`${Math.max(
+            engine.currentStep + 1,
+            0
+          )} / ${steps.length}`}
+        />
+      )}
+
+    </form>
+
+    {message && (
+      <div
+        className={`max-w-3xl mx-auto mb-8 p-4 rounded-lg ${messageClass}`}
+      >
+        <p className="text-center font-medium">
+          {message}
+        </p>
+
+        {showAutoSort && (
+          <div className="mt-3 flex justify-center">
+
+            <label className="flex items-center gap-2">
+
+              <input
+                type="checkbox"
+                checked={autoSort}
+                onChange={(e) =>
+                  setAutoSort(e.target.checked)
+                }
+              />
+
+              Auto-sort the array
+
+            </label>
+
+          </div>
+        )}
+
+      </div>
+    )}
+        {array.length > 0 && (
+      <div className="max-w-5xl mx-auto space-y-6">
+
+        {visualState.explanation && (
+          <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+
+            <div className="flex items-center gap-2 bg-[#a435f0]/10 dark:bg-[#a435f0]/20 px-4 py-2 border-b">
+
+              <span className="w-2 h-2 rounded-full bg-[#a435f0] animate-pulse"></span>
+
+              <span className="text-sm font-semibold text-[#a435f0] uppercase">
+                Step Explanation
+              </span>
+
+              {visualState.iteration > 0 && (
+                <span className="ml-auto text-xs text-gray-500">
+                  Iteration #{visualState.iteration}
+                </span>
+              )}
+
+            </div>
+
+            <div className="p-4">
+              <p className="font-mono text-sm leading-relaxed">
+                {visualState.explanation}
+              </p>
+            </div>
+
+            <div className="px-4 py-2 bg-gray-50 dark:bg-gray-900/50 border-t flex flex-wrap gap-4 text-xs">
+
+              <span>
+                <span className="font-semibold text-purple-600">
+                  ■ Purple
+                </span>{" "}
+                = Jump Pointer
+              </span>
+
+              <span>
+                <span className="font-semibold text-blue-600">
+                  ■ Blue
+                </span>{" "}
+                = Current Block
+              </span>
+
+              <span>
+                <span className="font-semibold text-yellow-600">
+                  ■ Yellow
+                </span>{" "}
+                = Linear Search
+              </span>
+
+              <span>
+                <span className="font-semibold text-green-600">
+                  ■ Green
+                </span>{" "}
+                = Found
+              </span>
+
+            </div>
+
+          </div>
+        )}
+
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+
+          <h2 className="text-2xl font-semibold text-center mb-6">
+            Array Visualization
+          </h2>
+
+          <div className="flex flex-wrap justify-center gap-4">
+
+            {array.map((element, index) => {
+
+              let bg =
+                "bg-[#E5E7EB] dark:bg-gray-700";
+
+              let border =
+                "border-[#D1D5DB] dark:border-gray-600";
+
+              const labels = [];
+
+              if (
+                visualState.prev !== -1 &&
+                visualState.step !== -1 &&
+                index >= visualState.prev &&
+                index < visualState.step
+              ) {
+                bg = "bg-blue-300";
+                border = "border-blue-600";
+              }
+
+              if (
+                visualState.phase === "jump" &&
+                index === visualState.current
+              ) {
+                bg = "bg-purple-500";
+                border = "border-purple-700";
+                labels.push("jump");
+              }
+
+              if (
+                visualState.phase === "checking" &&
+                index === visualState.current
+              ) {
+                bg = "bg-yellow-400";
+                border = "border-yellow-700";
+                labels.push("check");
+              }
+
+              if (
+                index === visualState.foundIndex
+              ) {
+                bg = "bg-green-500";
+                border = "border-green-700";
+                labels.push("found");
+              }
+
+              return (
+                <div
+                  key={index}
+                  className="flex flex-col items-center"
+                >
+
+                  <div
+                    className={`w-16 h-16 rounded-lg border-2 flex items-center justify-center transition-all duration-300 ${bg} ${border} ${getFontSize(
+                      element
+                    )}`}
+                  >
+                    {element}
+                  </div>
+
+                  <div className="mt-1 text-xs font-mono h-10 text-center">
+
+                    {labels.map((label) => (
+                      <div
+                        key={label}
+                        className={
+                          label === "jump"
+                            ? "text-purple-600 font-semibold"
+                            : label === "check"
+                            ? "text-yellow-600 font-semibold"
+                            : "text-green-600 font-semibold"
+                        }
+                      >
+                        {label}
+                      </div>
+                    ))}
+
+                    <div className="text-[10px] text-gray-400">
+                      [{index}]
+                    </div>
+
+                  </div>
+
+                </div>
+              );
+
+            })}
+
+          </div>
+
+        </div>
+
+      </div>
+    )}
+
+  </main>
+);
+
+};
+
+export default JumpSearch;
\ No newline at end of file
diff --git a/src/app/visualizer/array/jump-search/codeBlock.jsx b/src/app/visualizer/array/jump-search/codeBlock.jsx
new file mode 100644
index 000000000..d09b2847c
--- /dev/null
+++ b/src/app/visualizer/array/jump-search/codeBlock.jsx
@@ -0,0 +1,200 @@
+"use client";
+
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const codeExamples = {
+  javascript: `// Jump Search in JavaScript
+function jumpSearch(arr, target) {
+    const n = arr.length;
+    const step = Math.floor(Math.sqrt(n));
+
+    let prev = 0;
+    let curr = step;
+
+    while (arr[Math.min(curr, n) - 1] < target) {
+        prev = curr;
+        curr += step;
+
+        if (prev >= n)
+            return -1;
+    }
+
+    while (prev < Math.min(curr, n)) {
+        if (arr[prev] === target)
+            return prev;
+
+        prev++;
+    }
+
+    return -1;
+}
+
+const arr = [2,4,6,8,10,12,14,16,18];
+console.log(jumpSearch(arr, 12));`,
+
+  python: `# Jump Search in Python
+import math
+
+def jump_search(arr, target):
+    n = len(arr)
+    step = int(math.sqrt(n))
+
+    prev = 0
+    curr = step
+
+    while arr[min(curr, n)-1] < target:
+        prev = curr
+        curr += step
+
+        if prev >= n:
+            return -1
+
+    while prev < min(curr, n):
+        if arr[prev] == target:
+            return prev
+        prev += 1
+
+    return -1
+
+arr = [2,4,6,8,10,12,14,16,18]
+print(jump_search(arr,12))`,
+
+  java: `public class JumpSearch {
+
+    static int jumpSearch(int arr[], int target){
+
+        int n = arr.length;
+        int step = (int)Math.sqrt(n);
+
+        int prev = 0;
+        int curr = step;
+
+        while(arr[Math.min(curr,n)-1] < target){
+
+            prev = curr;
+            curr += step;
+
+            if(prev >= n)
+                return -1;
+        }
+
+        while(prev < Math.min(curr,n)){
+
+            if(arr[prev] == target)
+                return prev;
+
+            prev++;
+        }
+
+        return -1;
+    }
+
+    public static void main(String[] args){
+
+        int arr[] = {2,4,6,8,10,12,14,16,18};
+
+        System.out.println(jumpSearch(arr,12));
+    }
+}`,
+
+  c: `#include<stdio.h>
+#include<math.h>
+
+int jumpSearch(int arr[],int n,int target){
+
+    int step=sqrt(n);
+
+    int prev=0;
+    int curr=step;
+
+    while(arr[(curr<n?curr:n)-1] < target){
+
+        prev=curr;
+        curr+=step;
+
+        if(prev>=n)
+            return -1;
+    }
+
+    while(prev<(curr<n?curr:n)){
+
+        if(arr[prev]==target)
+            return prev;
+
+        prev++;
+    }
+
+    return -1;
+}
+
+int main(){
+
+    int arr[]={2,4,6,8,10,12,14,16,18};
+
+    printf("%d",jumpSearch(arr,9,12));
+
+    return 0;
+}`,
+
+  cpp: `#include<iostream>
+#include<vector>
+#include<cmath>
+
+using namespace std;
+
+int jumpSearch(vector<int>& arr,int target){
+
+    int n=arr.size();
+
+    int step=sqrt(n);
+
+    int prev=0;
+    int curr=step;
+
+    while(arr[min(curr,n)-1] < target){
+
+        prev=curr;
+        curr+=step;
+
+        if(prev>=n)
+            return -1;
+    }
+
+    while(prev<min(curr,n)){
+
+        if(arr[prev]==target)
+            return prev;
+
+        prev++;
+    }
+
+    return -1;
+}
+
+int main(){
+
+    vector<int> arr={2,4,6,8,10,12,14,16,18};
+
+    cout<<jumpSearch(arr,12);
+
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: "jumpSearch.js",
+  python: "jump_search.py",
+  java: "JumpSearch.java",
+  c: "jump_search.c",
+  cpp: "jump_search.cpp",
+};
+
+const JumpSearchCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default JumpSearchCode;
\ No newline at end of file
diff --git a/src/app/visualizer/array/jump-search/content.jsx b/src/app/visualizer/array/jump-search/content.jsx
new file mode 100644
index 000000000..2fca726ad
--- /dev/null
+++ b/src/app/visualizer/array/jump-search/content.jsx
@@ -0,0 +1,261 @@
+"use client";
+
+import React from "react";
+import {
+  Clock,
+  Database,
+  CheckCircle,
+  XCircle,
+  Lightbulb,
+  Target,
+} from "lucide-react";
+
+const JumpSearchContent = () => {
+  return (
+    <div className="space-y-8">
+
+      {/* Overview */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4">
+          Overview
+        </h2>
+
+        <p className="text-gray-700 dark:text-gray-300 leading-8">
+          <strong>Jump Search</strong> is an efficient searching algorithm
+          designed for <strong>sorted arrays</strong>. Instead of checking every
+          element one by one, it jumps ahead by a fixed block size (usually √n)
+          until it finds the block where the target may exist. It then performs
+          a linear search within that block.
+        </p>
+      </section>
+
+      {/* Working */}
+      <section>
+
+        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+          <Target className="text-purple-600" />
+          How Jump Search Works
+        </h2>
+
+        <ol className="list-decimal pl-6 space-y-3 text-gray-700 dark:text-gray-300">
+
+          <li>Ensure the array is sorted.</li>
+
+          <li>
+            Compute the jump size as:
+          </li>
+
+          <div className="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 font-mono">
+            Jump Size = √n
+          </div>
+
+          <li>
+            Jump ahead by one block at a time.
+          </li>
+
+          <li>
+            Stop when the current block contains the target or exceeds it.
+          </li>
+
+          <li>
+            Perform a linear search inside that block.
+          </li>
+
+          <li>
+            Return the index if found; otherwise return -1.
+          </li>
+
+        </ol>
+
+      </section>
+
+      {/* Time Complexity */}
+
+      <section>
+
+        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+          <Clock className="text-blue-500" />
+          Time Complexity
+        </h2>
+
+        <table className="min-w-full border border-gray-300 dark:border-gray-700">
+
+          <thead className="bg-purple-600 text-white">
+            <tr>
+              <th className="p-3 text-left">Case</th>
+              <th className="p-3 text-left">Complexity</th>
+            </tr>
+          </thead>
+
+          <tbody>
+
+            <tr className="border-t">
+              <td className="p-3">Best Case</td>
+              <td className="p-3">O(1)</td>
+            </tr>
+
+            <tr className="border-t">
+              <td className="p-3">Average Case</td>
+              <td className="p-3">O(√n)</td>
+            </tr>
+
+            <tr className="border-t">
+              <td className="p-3">Worst Case</td>
+              <td className="p-3">O(√n)</td>
+            </tr>
+
+          </tbody>
+
+        </table>
+
+      </section>
+
+      {/* Space */}
+
+      <section>
+
+        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+          <Database className="text-green-600" />
+          Space Complexity
+        </h2>
+
+        <div className="bg-green-100 dark:bg-green-900 rounded-lg p-4">
+          <strong>O(1)</strong> (Iterative implementation)
+        </div>
+
+      </section>
+
+      {/* Advantages */}
+
+      <section>
+
+        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+          <CheckCircle className="text-green-500" />
+          Advantages
+        </h2>
+
+        <ul className="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
+
+          <li>Faster than Linear Search for large sorted arrays.</li>
+
+          <li>Easy to understand and implement.</li>
+
+          <li>No recursion required.</li>
+
+          <li>Works efficiently on sequential storage.</li>
+
+          <li>Reduces unnecessary comparisons.</li>
+
+        </ul>
+
+      </section>
+
+      {/* Disadvantages */}
+
+      <section>
+
+        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+          <XCircle className="text-red-500" />
+          Disadvantages
+        </h2>
+
+        <ul className="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
+
+          <li>Requires the array to be sorted.</li>
+
+          <li>Slower than Binary Search.</li>
+
+          <li>Not suitable for linked lists.</li>
+
+          <li>Performance depends on jump size.</li>
+
+        </ul>
+
+      </section>
+
+      {/* Applications */}
+
+      <section>
+
+        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+          <Lightbulb className="text-yellow-500" />
+          Applications
+        </h2>
+
+        <ul className="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
+
+          <li>Searching in large sorted arrays.</li>
+
+          <li>Memory-efficient searching.</li>
+
+          <li>Database indexing.</li>
+
+          <li>File searching.</li>
+
+          <li>Educational demonstrations of search algorithms.</li>
+
+        </ul>
+
+      </section>
+
+      {/* Comparison */}
+
+      <section>
+
+        <h2 className="text-2xl font-bold mb-4">
+          Jump Search vs Binary Search
+        </h2>
+
+        <table className="min-w-full border border-gray-300 dark:border-gray-700">
+
+          <thead className="bg-purple-600 text-white">
+            <tr>
+              <th className="p-3 text-left">Feature</th>
+              <th className="p-3 text-left">Jump Search</th>
+              <th className="p-3 text-left">Binary Search</th>
+            </tr>
+          </thead>
+
+          <tbody>
+
+            <tr className="border-t">
+              <td className="p-3">Requirement</td>
+              <td className="p-3">Sorted Array</td>
+              <td className="p-3">Sorted Array</td>
+            </tr>
+
+            <tr className="border-t">
+              <td className="p-3">Time Complexity</td>
+              <td className="p-3">O(√n)</td>
+              <td className="p-3">O(log n)</td>
+            </tr>
+
+            <tr className="border-t">
+              <td className="p-3">Extra Space</td>
+              <td className="p-3">O(1)</td>
+              <td className="p-3">O(1)</td>
+            </tr>
+
+            <tr className="border-t">
+              <td className="p-3">Searching Strategy</td>
+              <td className="p-3">Jump + Linear Search</td>
+              <td className="p-3">Divide & Conquer</td>
+            </tr>
+
+            <tr className="border-t">
+              <td className="p-3">Practical Speed</td>
+              <td className="p-3">Moderate</td>
+              <td className="p-3">Fast</td>
+            </tr>
+
+          </tbody>
+
+        </table>
+
+      </section>
+
+    </div>
+  );
+};
+
+export default JumpSearchContent;
\ No newline at end of file
diff --git a/src/app/visualizer/array/jump-search/page.jsx b/src/app/visualizer/array/jump-search/page.jsx
new file mode 100644
index 000000000..0f1fc4275
--- /dev/null
+++ b/src/app/visualizer/array/jump-search/page.jsx
@@ -0,0 +1,39 @@
+import Animation from "@/app/visualizer/array/jump-search/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/array/jump-search/codeBlock";
+import Content from "@/app/visualizer/array/jump-search/content";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Array", "Jump Search")}
+      title="Jump Search"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[
+            {
+              text: "Linear Search",
+              url: "../linearsearch",
+            },
+            {
+              text: "Binary Search",
+              url: "../binarysearch",
+            },
+            {
+              text: "Ternary Search",
+              url: "../ternary-search",
+            },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/jump-search/quiz.jsx b/src/app/visualizer/array/jump-search/quiz.jsx
new file mode 100644
index 000000000..a5d6a4209
--- /dev/null
+++ b/src/app/visualizer/array/jump-search/quiz.jsx
@@ -0,0 +1,236 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const jumpSearchQuestions = [
+  {
+    question: "What is the primary requirement for applying Jump Search?",
+    options: [
+      "The array must be sorted.",
+      "The array must be unsorted.",
+      "The array must contain unique elements.",
+      "The array must have an even number of elements.",
+    ],
+    answer: "The array must be sorted.",
+    explanation:
+      "Jump Search works only on sorted arrays because it skips blocks based on element ordering.",
+  },
+  {
+    question: "What is the optimal jump size for Jump Search?",
+    options: ["√n", "n", "log n", "n/2"],
+    answer: "√n",
+    explanation:
+      "The optimal jump size is the square root of the number of elements.",
+  },
+  {
+    question: "What happens after finding the correct block?",
+    options: [
+      "Binary Search is performed.",
+      "Linear Search is performed.",
+      "Interpolation Search is performed.",
+      "The algorithm stops.",
+    ],
+    answer: "Linear Search is performed.",
+    explanation:
+      "After locating the block, Jump Search performs a linear search inside that block.",
+  },
+  {
+    question: "What is the worst-case time complexity of Jump Search?",
+    options: ["O(n)", "O(log n)", "O(√n)", "O(n log n)"],
+    answer: "O(√n)",
+    explanation:
+      "Jump Search has a worst-case time complexity of O(√n).",
+  },
+  {
+    question: "What is the best-case time complexity of Jump Search?",
+    options: ["O(1)", "O(log n)", "O(√n)", "O(n)"],
+    answer: "O(1)",
+    explanation:
+      "If the target is found immediately, the complexity is O(1).",
+  },
+  {
+    question: "Which searching technique is used after jumping?",
+    options: [
+      "Linear Search",
+      "Binary Search",
+      "Ternary Search",
+      "Exponential Search",
+    ],
+    answer: "Linear Search",
+    explanation:
+      "The target block is searched sequentially using Linear Search.",
+  },
+  {
+    question: "Jump Search is most efficient on:",
+    options: [
+      "Sorted arrays",
+      "Linked Lists",
+      "Trees",
+      "Graphs",
+    ],
+    answer: "Sorted arrays",
+    explanation:
+      "Jump Search relies on sorted order to skip blocks.",
+  },
+  {
+    question: "What is the space complexity of Jump Search?",
+    options: ["O(1)", "O(log n)", "O(n)", "O(√n)"],
+    answer: "O(1)",
+    explanation:
+      "Jump Search uses only a few variables regardless of input size.",
+  },
+  {
+    question: "If the target is larger than the last element of a block, what happens?",
+    options: [
+      "Jump to the next block.",
+      "Stop searching.",
+      "Restart from the beginning.",
+      "Search backwards.",
+    ],
+    answer: "Jump to the next block.",
+    explanation:
+      "The algorithm continues jumping until it reaches the correct block.",
+  },
+  {
+    question: "Which search algorithm is generally faster on sorted arrays?",
+    options: [
+      "Binary Search",
+      "Jump Search",
+      "Linear Search",
+      "Sequential Search",
+    ],
+    answer: "Binary Search",
+    explanation:
+      "Binary Search usually performs better with O(log n) time complexity.",
+  },
+  {
+    question: "Jump Search combines which two searching ideas?",
+    options: [
+      "Jumping and Linear Search",
+      "Binary Search and DFS",
+      "Recursion and Sorting",
+      "Hashing and Searching",
+    ],
+    answer: "Jumping and Linear Search",
+    explanation:
+      "It first jumps through blocks and then performs a linear search.",
+  },
+  {
+    question: "Jump Search is better than Linear Search for:",
+    options: [
+      "Large sorted arrays",
+      "Small unsorted arrays",
+      "Graphs",
+      "Trees",
+    ],
+    answer: "Large sorted arrays",
+    explanation:
+      "Skipping blocks makes Jump Search faster than Linear Search on sorted data.",
+  },
+  {
+    question: "Which mathematical function determines the jump size?",
+    options: [
+      "Square Root",
+      "Factorial",
+      "Logarithm",
+      "Power",
+    ],
+    answer: "Square Root",
+    explanation:
+      "The jump length is generally chosen as √n.",
+  },
+  {
+    question: "Jump Search belongs to which category?",
+    options: [
+      "Searching Algorithm",
+      "Sorting Algorithm",
+      "Graph Algorithm",
+      "Greedy Algorithm",
+    ],
+    answer: "Searching Algorithm",
+    explanation:
+      "Jump Search is a searching algorithm for sorted arrays.",
+  },
+  {
+    question: "If the target is smaller than the first element of a block, the algorithm:",
+    options: [
+      "Searches the previous block.",
+      "Stops immediately.",
+      "Sorts the array.",
+      "Searches the next block.",
+    ],
+    answer: "Searches the previous block.",
+    explanation:
+      "The target must be in the previous block if it exists.",
+  },
+  {
+    question: "Which data structure is most suitable for Jump Search?",
+    options: [
+      "Array",
+      "Linked List",
+      "Stack",
+      "Queue",
+    ],
+    answer: "Array",
+    explanation:
+      "Arrays provide efficient indexed access required by Jump Search.",
+  },
+  {
+    question: "What is returned if the target is not found?",
+    options: [
+      "-1",
+      "0",
+      "1",
+      "NULL",
+    ],
+    answer: "-1",
+    explanation:
+      "Returning -1 indicates that the target does not exist in the array.",
+  },
+  {
+    question: "What type of memory access does Jump Search require?",
+    options: [
+      "Random Access",
+      "Sequential Access",
+      "Stack Access",
+      "Queue Access",
+    ],
+    answer: "Random Access",
+    explanation:
+      "Jump Search requires indexed access to jump between positions.",
+  },
+  {
+    question: "Jump Search performs fewer comparisons than:",
+    options: [
+      "Linear Search",
+      "Binary Search",
+      "Ternary Search",
+      "Interpolation Search",
+    ],
+    answer: "Linear Search",
+    explanation:
+      "Jump Search skips blocks, reducing unnecessary comparisons.",
+  },
+  {
+    question: "Which phase comes first in Jump Search?",
+    options: [
+      "Jump Phase",
+      "Linear Search Phase",
+      "Sorting Phase",
+      "Recursion Phase",
+    ],
+    answer: "Jump Phase",
+    explanation:
+      "The algorithm first jumps through the array before performing a linear search.",
+  },
+];
+
+export default function JumpSearchQuiz() {
+  return (
+    <QuizEngine
+      title="Jump Search Quiz"
+      questions={jumpSearchQuestions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/jump-search/quiz/page.jsx b/src/app/visualizer/array/jump-search/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/array/jump-search/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/linearsearch/AlgorithmClient.jsx b/src/app/visualizer/array/linearsearch/AlgorithmClient.jsx
new file mode 100644
index 000000000..64a8b2ad2
--- /dev/null
+++ b/src/app/visualizer/array/linearsearch/AlgorithmClient.jsx
@@ -0,0 +1,29 @@
+import LinearSearchAnimation from "@/app/visualizer/array/linearsearch/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/array/linearsearch/codeBlock";
+import Content from "@/app/visualizer/array/linearsearch/content";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Array", "Linear Search")}
+      title="Linear Search"
+      headerActions={<ArticleActions />}
+      animation={<LinearSearchAnimation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[{ text: "Binary Search", url: "./binarysearch" }]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/array/linearsearch/animation.jsx b/src/app/visualizer/array/linearsearch/animation.jsx
new file mode 100644
index 000000000..a876550ba
--- /dev/null
+++ b/src/app/visualizer/array/linearsearch/animation.jsx
@@ -0,0 +1,263 @@
+"use client";
+import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
+import GoButton from "@/app/components/ui/goButton";
+import ResetButton from "@/app/components/ui/resetButton";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import { linearSearchGenerator } from "@/features/algorithms/array/linearSearchLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+  if (len <= 2) return "text-lg";
+  if (len === 3) return "text-sm";
+  return "text-xs";
+};
+
+const LinearSearch = () => {
+  const [arrayElements, setArrayElements] = useState("");
+  const [target, setTarget] = useState("");
+  const [array, setArray] = useState([]);
+  const [targetValue, setTargetValue] = useState(null);
+
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+
+  const [visualState, setVisualState] = useState({
+    currentIndex: -1,
+    foundIndex: -1
+  });
+
+  const steps = useMemo(() => {
+    if (array.length === 0 || targetValue === null) return [];
+    return Array.from(linearSearchGenerator(array, targetValue));
+  }, [array, targetValue]);
+
+  const onStep = useCallback((step) => {
+    let msg = "";
+    let msgType = "";
+    
+    if (step.type === 'found') {
+      msg = `Element ${targetValue} found at index ${step.index}!`;
+      msgType = "success";
+    } else if (step.type === 'not_found') {
+      msg = `Element ${targetValue} not found in the array.`;
+      msgType = "error";
+    }
+
+    setVisualState({
+      currentIndex: step.index !== undefined ? step.index : -1,
+      foundIndex: step.type === 'found' ? step.index : -1
+    });
+    
+    if (msg) setMessage(msg);
+    if (msgType) setMessageType(msgType);
+  }, [targetValue]);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 1000 });
+  const isAnimating = engine.isPlaying || engine.currentStep > 0;
+
+  const handleReset = () => {
+    engine.reset();
+    setArray([]); setTargetValue(null);
+    setMessage(""); setMessageType(""); 
+    setVisualState({ currentIndex: -1, foundIndex: -1 });
+    setArrayElements(""); setTarget("");
+  };
+
+  const generateRandomArray = () => {
+    if (isAnimating) return;
+    const size = Math.floor(Math.random() * 4) + 2;
+    const elements = Array.from({ length: size }, () =>
+      Math.floor(Math.random() * 100)
+    );
+    setArrayElements(elements.join(", "));
+  };
+
+  const handleGo = (e) => {
+    e.preventDefault();
+    engine.reset();
+    setMessage(""); setMessageType("");
+    setVisualState({ currentIndex: -1, foundIndex: -1 });
+
+    if (!arrayElements || !target) {
+      setMessage("Please fill in all fields."); setMessageType("warning"); return;
+    }
+    const rawElements = arrayElements.split(",").map((el) => el.trim());
+    if (rawElements.some((el) => el.includes("."))) {
+      setMessage("Only integers are supported. Please remove decimal values."); setMessageType("warning"); return;
+    }
+    const elements = rawElements.map((el) => parseInt(el));
+    const targetVal = parseInt(target);
+    if (target.includes(".") || elements.some(isNaN) || isNaN(targetVal)) {
+      setMessage(target.includes(".") ? "Only integers are supported. Please remove decimal values." : "Invalid array elements or target.");
+      setMessageType("warning"); return;
+    }
+    
+    setTargetValue(targetVal);
+    setArray(elements);
+    
+    setTimeout(() => {
+        engine.play();
+    }, 50);
+  };
+
+  useVisualizerKeyboard({
+    onTogglePlayPause: engine.isPlaying ? engine.pause : () => {
+        if (array.length > 0) engine.play();
+    },
+    onStepForward: engine.stepForward,
+    onStepBackward: engine.stepBackward,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+    speed: engine.speed / 1000,
+    sorting: engine.isPlaying,
+    sorted: engine.currentStep === steps.length - 1 && steps.length > 0,
+  });
+
+  const messageClass =
+    messageType === "success"
+      ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
+      : messageType === "warning"
+      ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
+      : "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200";
+
+  return (
+    <main className="container mx-auto">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Visualize how Linear Search works by sequentially checking each element in an array.
+      </p>
+
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8"
+      >
+        <div className="mb-4">
+          <label className="block text-gray-700 dark:text-gray-300 mb-2" htmlFor="arrayElements">
+            Array Elements (comma-separated)
+          </label>
+          <div className="flex gap-2">
+            <input
+              type="text"
+              id="arrayElements"
+              value={arrayElements}
+              onChange={(e) => setArrayElements(e.target.value)}
+              className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#a435f0] focus:outline-none focus:ring-2 focus:ring-[#a435f0]/30 dark:focus:ring-[#a435f0]/30 transition duration-300"
+              placeholder="eg. 3, 1, 4, 1, 5"
+              disabled={isAnimating}
+            />
+            <button
+              type="button"
+              onClick={generateRandomArray}
+              className="px-4 py-2 font-bold bg-[#a435f0] text-white rounded-lg hover:bg-[#8f2cd6] transition-all duration-200"
+              disabled={isAnimating}
+            >
+              Random
+            </button>
+          </div>
+        </div>
+
+        <div className="mb-4">
+          <label className="block text-gray-700 dark:text-gray-300 mb-2" htmlFor="target">
+            Target Element
+          </label>
+
+          <div className="flex flex-col sm:flex-row sm:items-end gap-4">
+            <input
+              type="number"
+              id="target"
+              value={target}
+              onChange={(e) => setTarget(e.target.value)}
+              className="w-full sm:max-w-xs p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#a435f0] focus:outline-none focus:ring-2 focus:ring-[#a435f0]/30 dark:focus:ring-[#a435f0]/30 transition duration-300"
+              placeholder="eg. 4"
+              disabled={isAnimating}
+            />
+
+            <div className="flex gap-2 w-full">
+              <GoButton onClick={handleGo} isAnimating={isAnimating} disabled={isAnimating} />
+              <ResetButton onReset={handleReset} isAnimating={isAnimating} />
+            </div>
+          </div>
+        </div>
+
+        {isAnimating && (
+          <div className="mt-4">
+            <PlaybackControls
+                isPlaying={engine.isPlaying}
+                onPlayPause={engine.isPlaying ? engine.pause : () => engine.play()}
+                speed={engine.speed / 1000}
+                onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+                onStepForward={engine.stepForward}
+                onStepBackward={engine.stepBackward}
+                onReset={engine.reset}
+                onExplainStep={() => {}}
+                disabled={steps.length === 0}
+                progressText={`${Math.max(engine.currentStep + 1, 0)} / ${steps.length}`}
+            />
+          </div>
+        )}
+      </form>
+
+      {message && (
+        <div className={`max-w-3xl mx-auto mb-8 p-4 rounded-lg ${messageClass}`}>
+          <p className="text-center font-medium">{message}</p>
+        </div>
+      )}
+
+      {array.length > 0 && (
+        <div className="max-w-4xl mx-auto bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
+          <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-6 text-center">Array Visualization</h2>
+          <div className="flex flex-wrap gap-4 justify-center">
+            {array.map((element, index) => {
+                let bgColor = "bg-gray-200 dark:bg-gray-900";
+                let borderColor = "border-gray-300 dark:border-gray-600";
+                let textColor = "text-gray-800 dark:text-white";
+
+                if (visualState.foundIndex === index) {
+                    bgColor = "bg-green-500 dark:bg-green-600";
+                    borderColor = "border-green-700 dark:border-green-400";
+                } else if (visualState.currentIndex === index && visualState.foundIndex === -1) {
+                    bgColor = "bg-yellow-500 dark:bg-yellow-600";
+                    borderColor = "border-yellow-700 dark:border-yellow-400";
+                } else if (index < visualState.currentIndex || (visualState.foundIndex === -1 && visualState.currentIndex === -1 && engine.currentStep === steps.length - 1)) {
+                    bgColor = "bg-[#c27cf7] dark:bg-blue-700";
+                    borderColor = "border-primary dark:border-primary/80";
+                }
+
+                return (
+                  <div key={index} className="flex flex-col items-center">
+                    <div
+                      className={`w-16 h-16 flex items-center justify-center rounded-lg border-2 transition-all duration-300 ${getFontSize(element)} font-medium ${bgColor} ${borderColor} ${textColor}`}
+                    >
+                      {element}
+                    </div>
+                    <div className="mt-1 text-sm text-gray-600 dark:text-gray-400 text-center">[{index}]</div>
+                  </div>
+                );
+            })}
+          </div>
+
+          <div className="mt-8 flex flex-wrap justify-center gap-4">
+            <div className="flex items-center">
+              <div className="w-4 h-4 bg-yellow-500 dark:bg-yellow-600 rounded mr-2"></div>
+              <span className="text-sm">Current Element</span>
+            </div>
+            <div className="flex items-center">
+              <div className="w-4 h-4 bg-green-500 dark:bg-green-600 rounded mr-2"></div>
+              <span className="text-sm">Found Element</span>
+            </div>
+            <div className="flex items-center">
+              <div className="w-4 h-4 bg-[#c27cf7] dark:bg-blue-700 rounded mr-2"></div>
+              <span className="text-sm">Checked Elements</span>
+            </div>
+            <div className="flex items-center">
+              <div className="w-4 h-4 bg-gray-200 dark:bg-gray-900 rounded mr-2"></div>
+              <span className="text-sm">Unchecked Elements</span>
+            </div>
+          </div>
+        </div>
+      )}
+    </main>
+  );
+};
+
+export default LinearSearch;
diff --git a/src/app/visualizer/array/linearsearch/codeBlock.jsx b/src/app/visualizer/array/linearsearch/codeBlock.jsx
new file mode 100644
index 000000000..91357abe8
--- /dev/null
+++ b/src/app/visualizer/array/linearsearch/codeBlock.jsx
@@ -0,0 +1,131 @@
+'use client';
+import CodeBlock from '@/app/components/ui/CodeBlock';
+
+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;
+}`,
+};
+
+const fileNames = {
+  javascript: 'linearSearch.js',
+  python: 'linear_search.py',
+  java: 'LinearSearch.java',
+  c: 'linear_search.c',
+  cpp: 'linear_search.cpp',
+};
+
+const LinearSearchCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default LinearSearchCode;
diff --git a/src/app/visualizer/array/linearsearch/content.jsx b/src/app/visualizer/array/linearsearch/content.jsx
new file mode 100644
index 000000000..4263d8289
--- /dev/null
+++ b/src/app/visualizer/array/linearsearch/content.jsx
@@ -0,0 +1,180 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState('light');
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraphs = [
+    `Linear Search is a simple method to find a particular value in a list. It checks each element one by one from the start until it finds the target value. If the value is found, it returns its position; otherwise, it says the value is not present.`,
+    `Imagine you have a list of numbers: [5, 3, 8, 1, 9] and you want to find the number 8.`,
+    `If the number is not in the list (e.g., searching for 10), the search ends without success.`,
+    `Linear Search is easy to understand but can be slow for large lists compared to faster methods like Binary Search.`,
+  ];
+
+  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:
+        "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).",
+    },
+  ];
+
+  const complexity = [
+    { data: "Best Case: Target is the first element → O(1)" },
+    {
+      data: "Worst Case: Target is last or not present → O(n) (checks all elements)",
+    },
+  ];
+
+  const algorithm = [
+    { points: "Start from the first element." },
+    {
+      points: "Compare the current element with the target value.",
+      subpoints: [
+        "If they match, return the position.",
+        "If not, move to the next element.",
+      ],
+    },
+    { points: "Repeat until the end of the list." },
+    { points: 'If the element is not found, return "Not Found".' },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is Linear Search */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is Linear Search?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* How Does It Work */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            How Does It Work?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              {paragraphs[1]}
+            </p>
+
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {working.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+
+            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+              {paragraphs[2]}
+            </p>
+          </div>
+        </section>
+
+        {/* Algorithm Steps */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Algorithm Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {algorithm.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                  {item.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.subpoints.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {complexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                    {item.data.split(":")[0]}:
+                  </span>
+                  <span className="ml-2">{item.data.split(":")[1]}</span>
+                </li>
+              ))}
+            </ul>
+
+            <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => 1}
+                averageCase={(n) => n}
+                worstCase={(n) => n}
+                maxN={25}
+              />
+            </div>
+
+            <div className="mt-6 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraphs[3]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/array/linearsearch/quiz.jsx b/src/app/visualizer/array/linearsearch/quiz.jsx
new file mode 100644
index 000000000..a75a1729a
--- /dev/null
+++ b/src/app/visualizer/array/linearsearch/quiz.jsx
@@ -0,0 +1,232 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const LinearSearchQuiz = () => {
+  const questions = [
+    {
+      question: "What is the basic principle of linear search?",
+      options: [
+        "Dividing the list in half repeatedly",
+        "Checking each element one by one from the start",
+        "Sorting the list first then searching",
+        "Starting from the middle of the list"
+      ],
+      correctAnswer: 1,
+      explanation: "Linear search works by checking each element sequentially from the beginning until it finds the target value."
+    },
+    {
+      question: "What is the time complexity of linear search in the worst case?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation: "In the worst case (when the target is last or not present), linear search checks all n elements, resulting in O(n) complexity."
+    },
+    {
+      question: "In the array [5, 3, 8, 1, 9], how many comparisons are needed to find the number 1?",
+      options: [
+        "1",
+        "2",
+        "3",
+        "4"
+      ],
+      correctAnswer: 3,
+      explanation: "The search checks 5 (1st), 3 (2nd), 8 (3rd), and finally finds 1 on the 4th comparison."
+    },
+    {
+      question: "When would linear search perform at its best?",
+      options: [
+        "When the target is at the end of the list",
+        "When the target is at the middle of the list",
+        "When the target is at the beginning of the list",
+        "When the list is sorted"
+      ],
+      correctAnswer: 2,
+      explanation: "Linear search performs best (O(1)) when the target is the first element, as it only needs one comparison."
+    },
+    {
+      question: "What would a linear search algorithm return if the target value is not in the list?",
+      options: [
+        "The first element",
+        "The last element",
+        "An error message",
+        "A 'not found' indication"
+      ],
+      correctAnswer: 3,
+      explanation: "When the target isn't found, linear search typically returns a special value (like -1 or 'not found') to indicate this."
+    },
+    {
+  question: "Can linear search be used on an unsorted array?",
+  options: [
+    "Yes",
+    "No",
+    "Only if the array has unique elements",
+    "Only for integer arrays"
+  ],
+  correctAnswer: 0,
+  explanation: "Linear search works on both sorted and unsorted arrays because it checks each element sequentially."
+},
+{
+  question: "Which of the following is an advantage of linear search?",
+  options: [
+    "Requires the array to be sorted",
+    "Simple to implement and works on unsorted data",
+    "Always runs in O(log n)",
+    "Uses recursion by default"
+  ],
+  correctAnswer: 1,
+  explanation: "Linear search is easy to implement and does not require the data to be sorted."
+},
+{
+  question: "What is the average time complexity of linear search?",
+  options: [
+    "O(1)",
+    "O(log n)",
+    "O(n)",
+    "O(n log n)"
+  ],
+  correctAnswer: 2,
+  explanation: "On average, linear search checks about half of the elements before finding the target, giving O(n) complexity."
+},
+{
+  question: "If an array contains duplicate values, what happens during a standard linear search?",
+  options: [
+    "It returns the last occurrence",
+    "It returns the first matching occurrence",
+    "It returns all occurrences automatically",
+    "It throws an error"
+  ],
+  correctAnswer: 1,
+  explanation: "A standard linear search stops as soon as it finds the first matching element."
+},
+{
+  question: "Which scenario is most suitable for using linear search?",
+  options: [
+    "A very large sorted dataset",
+    "A small or unsorted dataset",
+    "A balanced binary search tree",
+    "A hash table"
+  ],
+  correctAnswer: 1,
+  explanation: "Linear search is ideal for small datasets or when the data is unsorted and sorting isn't worthwhile."
+},
+{
+  question: "What is the space complexity of an iterative linear search algorithm?",
+  options: [
+    "O(1)",
+    "O(log n)",
+    "O(n)",
+    "O(n²)"
+  ],
+  correctAnswer: 0,
+  explanation: "Linear search only uses a few variables during execution, so its auxiliary space complexity is O(1)."
+},
+{
+  question: "How many elements may need to be checked in the worst case for a linear search on an array of n elements?",
+  options: [
+    "1",
+    "n/2",
+    "n",
+    "log n"
+  ],
+  correctAnswer: 2,
+  explanation: "If the target is the last element or not present, every element must be checked, resulting in n comparisons."
+},
+{
+  question: "Which searching algorithm does NOT require the data to be sorted?",
+  options: [
+    "Binary Search",
+    "Linear Search",
+    "Jump Search",
+    "Interpolation Search"
+  ],
+  correctAnswer: 1,
+  explanation: "Linear search works on both sorted and unsorted data because it checks elements sequentially."
+},
+{
+  question: "If the target element is found at index 6, how many comparisons are required using linear search?",
+  options: [
+    "5",
+    "6",
+    "7",
+    "8"
+  ],
+  correctAnswer: 2,
+  explanation: "Linear search starts from index 0, so finding an element at index 6 requires 7 comparisons."
+},
+{
+  question: "Which of the following is a disadvantage of linear search?",
+  options: [
+    "Requires extra memory",
+    "Cannot search unsorted arrays",
+    "Slow for large datasets",
+    "Works only with integers"
+  ],
+  correctAnswer: 2,
+  explanation: "Linear search examines elements one by one, making it inefficient for large datasets."
+},
+{
+  question: "What happens if the first element matches the target value?",
+  options: [
+    "The algorithm continues searching",
+    "The algorithm returns immediately",
+    "The array is sorted",
+    "An error is generated"
+  ],
+  correctAnswer: 1,
+  explanation: "Linear search stops immediately once the target element is found."
+},
+{
+  question: "Which of the following applications commonly uses linear search?",
+  options: [
+    "Finding a contact in a short unsorted list",
+    "Searching in a balanced BST",
+    "Database indexing",
+    "Searching in a hash table"
+  ],
+  correctAnswer: 0,
+  explanation: "Linear search is practical for small unsorted collections where sorting is unnecessary."
+},
+{
+  question: "What is the average number of comparisons required in linear search for a successful search?",
+  options: [
+    "1",
+    "n/2",
+    "log n",
+    "n²"
+  ],
+  correctAnswer: 1,
+  explanation: "On average, the target is expected to be found halfway through the array, requiring about n/2 comparisons."
+},
+{
+  question: "Which statement about linear search is TRUE?",
+  options: [
+    "It always performs faster than binary search",
+    "It works only on sorted arrays",
+    "It checks elements sequentially until the target is found",
+    "It divides the array into halves"
+  ],
+  correctAnswer: 2,
+  explanation: "Linear search examines each element one after another until the target is found or the array ends."
+},
+{
+  question: "For which type of dataset is linear search generally preferred?",
+  options: [
+    "Very large sorted datasets",
+    "Small datasets with infrequent searches",
+    "Balanced binary search trees",
+    "Hash tables"
+  ],
+  correctAnswer: 1,
+  explanation: "Linear search is simple and efficient enough for small datasets where sorting or advanced search algorithms are unnecessary."
+}
+  ];
+
+  return <QuizEngine title="Linear Search Quiz Challenge" questions={questions} />;
+};
+
+export default LinearSearchQuiz;
diff --git a/src/app/visualizer/array/linearsearch/quiz/page.jsx b/src/app/visualizer/array/linearsearch/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/array/linearsearch/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/mergesort/AlgorithmClient.jsx b/src/app/visualizer/array/mergesort/AlgorithmClient.jsx
new file mode 100644
index 000000000..8608e38cc
--- /dev/null
+++ b/src/app/visualizer/array/mergesort/AlgorithmClient.jsx
@@ -0,0 +1,32 @@
+import Animation from "@/app/visualizer/array/mergesort/animation";
+import Content from "@/app/visualizer/array/mergesort/content";
+import Code from "@/app/visualizer/array/mergesort/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import TrackVisit from "@/app/components/ui/TrackVisit";
+import VisualizerPageLayout, { createVisualizerPaths } from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <>
+      <TrackVisit name="Merge Sort" path="/visualizer/array/mergesort" category="Sorting" />
+      <VisualizerPageLayout
+        paths={createVisualizerPaths("Array", "Merge Sort")}
+        title="Merge Sort"
+        animation={<Animation />}
+        content={<Content />}
+        code={<Code />}
+        exploreOther={<ExploreOther title="Explore Sorting Algorithms" links={[
+          { text: "Bubble Sort", url: "/visualizer/array/bubblesort" },
+          { text: "Selection Sort", url: "/visualizer/array/selectionsort" },
+          { text: "Insertion Sort", url: "/visualizer/array/insertionsort" },
+          { text: "Quick Sort", url: "/visualizer/array/quicksort" },
+          { text: "Comparison Mode", url: "/visualizer/array/comparison" },
+          { text: "Counting Sort", url: "/visualizer/array/countingsort" },
+          { text: "Heap Sort", url: "/visualizer/array/heapsort" },
+        ]} />}
+      />
+    </>
+  );
+}
diff --git a/src/app/visualizer/array/mergesort/animation.jsx b/src/app/visualizer/array/mergesort/animation.jsx
new file mode 100644
index 000000000..6a042c7cd
--- /dev/null
+++ b/src/app/visualizer/array/mergesort/animation.jsx
@@ -0,0 +1,359 @@
+"use client";
+import React, { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import { gsap } from "gsap";
+import ArrayGenerator from "@/app/components/ui/randomArray";
+import CustomArrayInput from "@/app/components/ui/customArrayInput";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import { mergeSortGenerator } from "@/features/algorithms/array/mergeSortLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+  if (len <= 2) return "text-lg";
+  if (len === 3) return "text-sm";
+  return "text-xs";
+};
+
+const precomputeSteps = (inputArray) => {
+  const steps = [];
+  const generator = mergeSortGenerator(inputArray);
+  
+  for (const frame of generator) {
+    const { type, payload } = frame;
+    
+    if (type === 'init') {
+      steps.push({
+        array: [...inputArray],
+        comparisons: 0, swaps: 0, currentStep: 0,
+        currentIndices: { left: -1, right: -1, mergeStart: -1, mergeEnd: -1, comparing: [], mid: -1 },
+        currentPhase: "", stepExplanation: "Starting Merge Sort...",
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'divide') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        comparisons: steps[steps.length - 1]?.comparisons || 0,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step || steps[steps.length - 1]?.currentStep || 0,
+        currentIndices: { 
+          left: payload.l, right: payload.r, mid: payload.m, 
+          mergeStart: -1, mergeEnd: -1, comparing: [] 
+        },
+        currentPhase: "Divide Phase",
+        stepExplanation: `Splitting array range [${payload.l}, ${payload.r}] into [${payload.l}, ${payload.m}] and [${payload.m + 1}, ${payload.r}].`,
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'merge_start') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        comparisons: steps[steps.length - 1]?.comparisons || 0,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step || steps[steps.length - 1]?.currentStep || 0,
+        currentIndices: { 
+          left: payload.l, right: payload.r, mid: payload.m, 
+          mergeStart: payload.l, mergeEnd: payload.r, comparing: [] 
+        },
+        currentPhase: "Merge Phase",
+        stepExplanation: `Merging two sorted subarrays: [${payload.l}, ${payload.m}] and [${payload.m + 1}, ${payload.r}].`,
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'comparing') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        comparisons: payload.comparisons,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step,
+        currentIndices: { 
+          left: payload.l, right: payload.r, mid: payload.m, 
+          mergeStart: payload.l, mergeEnd: payload.r, comparing: [payload.leftCompareIdx, payload.rightCompareIdx] 
+        },
+        currentPhase: "Merge Phase",
+        stepExplanation: `Comparing ${payload.LVal} from the left subarray with ${payload.RVal} from the right subarray.`,
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'merged' || type === 'merged_remainder') {
+      steps.push({
+        array: [...payload.arr],
+        comparisons: steps[steps.length - 1]?.comparisons || 0,
+        swaps: payload.merges,
+        currentStep: payload.step || steps[steps.length - 1]?.currentStep || 0,
+        currentIndices: { 
+          left: payload.l, right: payload.r, mid: payload.m, 
+          mergeStart: payload.l, mergeEnd: payload.r, comparing: [] 
+        },
+        currentPhase: "Merge Phase",
+        stepExplanation: type === 'merged' 
+          ? `Moving ${payload.val} from the ${payload.fromLeft ? 'left' : 'right'} subarray into position ${payload.k}.`
+          : `Moving remaining element ${payload.val} into position ${payload.k}.`,
+        sorted: false, totalSteps: payload.totalSteps,
+        isMerged: true,
+        mergeK: payload.k
+      });
+    } else if (type === 'completed') {
+      const last = steps[steps.length - 1] || {};
+      steps.push({
+        array: payload.arr || last.array || [],
+        comparisons: last.comparisons || 0,
+        swaps: last.swaps || 0,
+        currentStep: payload.step || last.currentStep || 0,
+        currentIndices: { left: -1, right: -1, mid: -1, mergeStart: -1, mergeEnd: -1, comparing: [] },
+        currentPhase: "Completed",
+        stepExplanation: "Array is fully sorted.",
+        sorted: true, totalSteps: payload.totalSteps || last.totalSteps,
+      });
+    }
+  }
+  return steps;
+};
+
+const MergeSortVisualizer = () => {
+  const [array, setArray] = useState([]);
+  const replayTimeoutRef = useRef(null);
+
+  const [visualState, setVisualState] = useState({
+    comparisons: 0, swaps: 0, 
+    currentIndices: { left: -1, right: -1, mid: -1, mergeStart: -1, mergeEnd: -1, comparing: [] },
+    currentPhase: "", stepExplanation: "", sorted: false, totalSteps: 0,
+  });
+
+  const steps = useMemo(() => {
+    if (array.length === 0) return [];
+    return precomputeSteps(array);
+  }, [array]);
+
+  const onStep = useCallback((step) => {
+    setVisualState({
+      comparisons: step.comparisons,
+      swaps: step.swaps,
+      currentIndices: step.currentIndices,
+      currentPhase: step.currentPhase,
+      stepExplanation: step.stepExplanation,
+      sorted: step.sorted,
+      totalSteps: step.totalSteps,
+    });
+
+    if (step.isMerged && step.mergeK !== undefined) {
+      const bars = document.querySelectorAll(".bar");
+      const bar = bars[step.mergeK];
+      if (bar) {
+        gsap.to(bar, { scale: 1.2, duration: 0.1 });
+        gsap.to(bar, { scale: 1.0, duration: 0.1, delay: 0.1 });
+      }
+    }
+  }, []);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 500 });
+  const currentStepData = steps[engine.currentStep];
+
+  const handleStart = useCallback(() => {
+    if (currentStepData?.sorted) {
+      engine.reset();
+      replayTimeoutRef.current = setTimeout(() => engine.play(), 50);
+    } else {
+      engine.play();
+    }
+  }, [engine, currentStepData]);
+
+  const handleReset = useCallback(() => {
+    clearTimeout(replayTimeoutRef.current);
+    setVisualState({
+      comparisons: 0, swaps: 0, 
+      currentIndices: { left: -1, right: -1, mid: -1, mergeStart: -1, mergeEnd: -1, comparing: [] },
+      currentPhase: "", stepExplanation: "", sorted: false, totalSteps: 0,
+    });
+    engine.reset();
+  }, [engine]);
+
+  useEffect(() => {
+    return () => clearTimeout(replayTimeoutRef.current);
+    }, []);
+
+  useVisualizerKeyboard({
+    onStart: handleStart,
+    onReset: handleReset,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+    onTogglePlayPause: engine.isPlaying ? engine.pause : handleStart,
+    speed: engine.speed / 500,
+    sorting: engine.isPlaying,
+    sorted: currentStepData?.sorted || false,
+  });
+
+  const isInCurrentRange = (index) => index >= visualState.currentIndices.left && index <= visualState.currentIndices.right;
+  const isBeingMerged = (index) => index >= visualState.currentIndices.mergeStart && index <= visualState.currentIndices.mergeEnd;
+
+  const handleExplainStep = () => {
+    const prompt = `I am currently looking at the Merge Sort algorithm, at step ${engine.currentStep} of ${steps.length}.
+Phase: ${visualState.currentPhase}
+Explanation on screen: ${visualState.stepExplanation}
+Current Array State: [${currentStepData?.array?.join(", ") || array.join(", ")}]
+Left index: ${visualState.currentIndices.left}, Right index: ${visualState.currentIndices.right}, Mid: ${visualState.currentIndices.mid}
+Currently comparing indices: [${visualState.currentIndices.comparing.join(", ")}]
+Currently merging indices: ${visualState.currentIndices.mergeStart} to ${visualState.currentIndices.mergeEnd}
+
+Please explain exactly what is happening in this step in detail.`;
+    
+    window.dispatchEvent(
+      new CustomEvent("chatbot-explain", { detail: { prompt } })
+    );
+  };
+
+  return (
+    <main className="container mx-auto px-6 pt-2 pb-6">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Visualize the divide-and-conquer approach of Merge Sort with recursive splitting and merging.
+      </p>
+      <div className="max-w-4xl mx-auto">
+        <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <div>
+              <ArrayGenerator
+                onGenerate={(newArray) => {
+                  setArray(newArray);
+                  handleReset();
+                }}
+                disabled={engine.isPlaying}
+                isPrimary={array.length === 0}
+              />
+              <CustomArrayInput
+                onUseCustomArray={(newArray) => {
+                  setArray(newArray);
+                  handleReset();
+                }}
+                disabled={engine.isPlaying}
+                currentArray={array}
+                className="mb-4"
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <button
+                onClick={handleStart}
+                disabled={!array.length}
+                className="w-full disabled:opacity-75 bg-none bg-[#a435f0] hover:bg-[#8f2cd6] px-4 py-2 rounded shadow-sm transition-all duration-300 text-sm sm:text-base text-white"
+              >
+                {engine.isPlaying ? "Sorting..." : currentStepData?.sorted ? "Restart" : "Start Merge Sort"}
+              </button>
+              <button
+                onClick={handleReset}
+                disabled={engine.isPlaying}
+                className="w-full bg-none text-[#a435f0] border border-[#a435f0] hover:bg-[#f3e8ff] dark:hover:bg-[#a435f0]/20 px-4 py-2 rounded transition-colors text-sm sm:text-base"
+              >
+                Reset All
+              </button>
+            </div>
+          </div>
+
+          {engine.isPlaying && (
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={engine.isPlaying ? engine.pause : handleStart}
+              speed={engine.speed / 500}
+              onSpeedChange={(s) => engine.setSpeed(s * 500)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={engine.reset}
+              onExplainStep={handleExplainStep}
+              disabled={steps.length === 0}
+            />
+          )}
+
+          {!engine.isPlaying && (
+            <div className="flex items-center gap-4 mb-4">
+              <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">Speed:</span>
+              <input
+                type="range"
+                min="0.5"
+                max="5"
+                step="0.5"
+                value={engine.speed / 500}
+                onChange={(e) => engine.setSpeed(parseFloat(e.target.value) * 500)}
+                className="w-24 sm:w-32"
+              />
+              <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">{engine.speed / 500}x</span>
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Comparisons:</div>
+              <div className="text-2xl">{visualState.comparisons}</div>
+            </div>
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Merges:</div>
+              <div className="text-2xl">{visualState.swaps}</div>
+            </div>
+          </div>
+          <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+            <div className="font-medium">Step:</div>
+            <div className="text-xl font-bold">
+              {visualState.totalSteps > 0 ? `${engine.currentStep + 1} / ${steps.length}` : '—'}
+            </div>
+            <div className="text-xs text-gray-500 mt-1">
+              {engine.currentStep > 0 && !visualState.sorted
+                ? `Merging elements at index ${visualState.currentIndices.mergeStart} to ${visualState.currentIndices.mergeEnd}`
+                : visualState.sorted
+                ? 'Sorting complete!'
+                : 'Start sorting to see steps'}
+            </div>
+          </div>
+          <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+            <div className="font-medium">Phase:</div>
+            <div className="text-sm sm:text-base text-gray-800 dark:text-gray-200">
+              {visualState.currentPhase || (visualState.sorted ? 'Completed' : 'Ready to start')}
+            </div>
+            <div className="font-medium mt-2">Explanation:</div>
+            <div className="text-sm text-gray-700 dark:text-gray-300 mt-1">
+              {visualState.stepExplanation || (visualState.sorted ? 'Array is fully sorted.' : 'Run the algorithm to see educational hints.')}
+            </div>
+          </div>
+        </div>
+        
+        <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
+          <h2 className="text-xl font-semibold mb-4">Main Array</h2>
+          {(currentStepData?.array || array).length > 0 ? (
+            <div className="flex flex-wrap gap-4 justify-center">
+              {((currentStepData?.array) || array).map((value, index) => {
+                const isComparing = visualState.currentIndices.comparing.includes(index);
+                const isInRange = isInCurrentRange(index);
+                const isMerging = isBeingMerged(index);
+                const isSorted = visualState.sorted;
+                return (
+                  <div key={index} className="flex flex-col items-center">
+                    <div
+                      className={`bar w-16 h-16 flex items-center justify-center rounded-lg border-2 transition-all duration-300 ${getFontSize(value)} font-medium
+                        ${
+                          isComparing
+                            ? "bg-red-400 dark:bg-red-400 border-red-600 dark:border-red-600 text-gray-800"
+                            : isMerging
+                            ? "bg-green-400 dark:bg-green-400 border-green-600 dark:border-green-600 text-gray-800"
+                            : isInRange
+                            ? "bg-yellow-400 dark:bg-yellow-400 border-yellow-600 dark:border-yellow-600 text-gray-800"
+                            : isSorted
+                            ? "bg-green-400 dark:bg-green-400 border-green-600 dark:border-green-600 text-gray-800"
+                            : "bg-primary/80 dark:bg-primary border-primary dark:border-primary text-gray-800"
+                        }`}
+                    >
+                      {value}
+                    </div>
+                    <div className="mt-1 text-xs text-gray-600 dark:text-gray-400">
+                      {index}
+                      {isComparing && " (comparing)"}
+                      {isMerging && !isComparing && " (merging)"}
+                      {isInRange && !isMerging && !isComparing && " (current)"}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="text-center py-8 text-gray-500">
+              {engine.isPlaying ? "Sorting..." : "Generate or enter an array to begin"}
+            </div>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default MergeSortVisualizer;
diff --git a/src/app/visualizer/array/mergesort/codeBlock.jsx b/src/app/visualizer/array/mergesort/codeBlock.jsx
new file mode 100644
index 000000000..04f9e84ef
--- /dev/null
+++ b/src/app/visualizer/array/mergesort/codeBlock.jsx
@@ -0,0 +1,234 @@
+'use client';
+import CodeBlock from '@/app/components/ui/CodeBlock';
+
+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 example
+const numbers = [38,27,43,3,9,82,10];
+console.log("Before sorting:", numbers);
+const result = mergeSort(numbers);
+console.log("After sorting:", result);`,
+
+  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=[]
+    leftIndex=0
+    rightIndex=0
+    while leftIndex < len(left) and rightIndex < len(right):
+        if left[leftIndex] < right[rightIndex]:
+            result.append(left[leftIndex])
+            leftIndex+=1
+        else:
+            result.append(right[rightIndex])
+            rightIndex+=1
+    result.extend(left[leftIndex:])
+    result.extend(right[rightIndex:])
+    return result
+
+numbers=[38,27,43,3,9,82,10]
+print("Before sorting:",numbers)
+result=merge_sort(numbers)
+print("After sorting:",result)`,
+
+  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);
+    }
+    public 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[] numbers={38,27,43,3,9,82,10};
+        System.out.print("Before sorting: ");
+        for(int num:numbers){
+            System.out.print(num+" ");
+        }`,
+
+  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++;
+        }
+    }
+}`,
+
+  c: `// Merge Sort in C
+#include<stdio.h>
+void merge(int arr[],int l,int m,int r){
+    int n1=m-l+1;
+    int n2=r-m;
+    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++];
+        else
+            arr[k++]=R[j++];
+    }
+    while(i<n1)
+        arr[k++]=L[i++];
+    while(j<n2)
+        arr[k++]=R[j++];
+}
+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]);
+    }
+}
+int main(){
+    int numbers[]={38,27,43,3,9,82,10};
+    int size=sizeof(numbers)/sizeof(numbers[0]);
+    printf("Before sorting: ");
+    printArray(numbers,size);
+        mergeSort(numbers);
+        System.out.print("\\nAfter sorting: ");
+    printf("\\nAfter sorting: ");
+    printArray(numbers,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){
+    vector<int> result;
+    int i=l;
+    int j=m+1;
+    while(i<=m && j<=r){
+        if(arr[i]<=arr[j]){
+            result.push_back(arr[i++]);
+        }else{
+            result.push_back(arr[j++]);
+        }
+    }
+    while(i<=m)
+        result.push_back(arr[i++]);
+    while(j<=r)
+        result.push_back(arr[j++]);
+
+    for(int k=l;k<=r;k++){
+        arr[k]=result[k-l];
+    }
+}
+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(vector<int>& arr){
+    for(int num:arr){
+        cout<<num<<" ";
+    }
+}
+int main(){
+    vector<int> numbers={38,27,43,3,9,82,10};
+    cout<<"Before sorting: ";
+    printArray(numbers);
+    mergeSort(numbers,0,numbers.size()-1);
+    cout<<"\\nAfter sorting: ";
+    printArray(numbers);
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: 'mergeSort.js',
+  python: 'merge_sort.py',
+  java: 'MergeSort.java',
+  c: 'merge_sort.c',
+  cpp: 'merge_sort.cpp',
+};
+
+const MergeSortCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default MergeSortCode;
\ No newline at end of file
diff --git a/src/app/visualizer/array/mergesort/content.jsx b/src/app/visualizer/array/mergesort/content.jsx
new file mode 100644
index 000000000..6aafbe553
--- /dev/null
+++ b/src/app/visualizer/array/mergesort/content.jsx
@@ -0,0 +1,236 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState('light');
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraph = [
+    `Merge Sort is an efficient, stable, comparison-based sorting algorithm that follows the divide-and-conquer approach. It works by recursively dividing the unsorted list into sublists until each sublist contains a single element, then repeatedly merges these sublists to produce new sorted sublists until there is only one sorted list remaining.`,
+    `The log n factor comes from the division steps, while the n factor comes from the merge steps.`,
+    `Merge Sort requires O(n) additional space for the temporary arrays during merging. This makes it not an in-place sorting algorithm, unlike Insertion Sort or Bubble Sort.`,
+    `Merge Sort is particularly useful when sorting linked lists (where random access is expensive) and is the algorithm of choice for many standard library sorting implementations when stability is required. It's also commonly used in external sorting where data doesn't fit in memory.`,
+  ];
+
+  const algorithm = [
+    {
+      points: "Divide:",
+      subpoints: [
+        "Find the middle point to divide the array into two halves",
+        "Recursively call merge sort on the first half",
+        "Recursively call merge sort on the second half",
+      ],
+    },
+    {
+      points: "Merge:",
+      subpoints: [
+        "Create temporary arrays for both halves",
+        "Compare elements from each half and merge them in order",
+        "Copy any remaining elements from either half",
+      ],
+    },
+  ];
+
+  const timeComplexity = [
+    {
+      points:
+        "Best Case: O(n log n) (already sorted, but still needs all comparisons)",
+    },
+    { points: "Average Case: O(n log n)" },
+    { points: "Worst Case: O(n log n) (consistent performance)" },
+  ];
+
+  const advantages = [
+    { points: "Stable sorting (maintains relative order of equal elements)" },
+    {
+      points:
+        "Excellent for large datasets (consistent O(n log n) performance)",
+    },
+    {
+      points:
+        "Well-suited for external sorting (sorting data too large for RAM)",
+    },
+    { points: "Easily parallelizable (divide steps can be done concurrently)" },
+  ];
+
+  const disadvantages = [
+    { points: "Requires O(n) additional space (not in-place)" },
+    {
+      points:
+        "Slower than O(n²) algorithms for very small datasets due to recursion overhead",
+    },
+    {
+      points:
+        "Not as cache-efficient as some other algorithms (e.g., QuickSort)",
+    },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is Merge Sort */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is Merge Sort?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraph[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* Algorithm Steps */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Algorithm Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {algorithm.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-semibold">{item.points}</span>
+                  {item.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500 font-normal">
+                      {item.subpoints.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {timeComplexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                    {item.points.split(":")[0]}:
+                  </span>
+                  <span className="ml-2">{item.points.split(":")[1]}</span>
+                </li>
+              ))}
+            </ul>
+            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+              {paragraph[1]}
+            </p>
+            <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => n * Math.log2(n)}
+                averageCase={(n) => n * Math.log2(n)}
+                worstCase={(n) => n * Math.log2(n)}
+                maxN={25}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Space Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Space Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraph[2]}
+            </p>
+          </div>
+        </section>
+
+        {/* Advantages */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Advantages
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {advantages.map((items, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {items.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Disadvantages */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Disadvantages
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {disadvantages.map((items, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {items.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraph[3]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/array/mergesort/quiz.jsx b/src/app/visualizer/array/mergesort/quiz.jsx
new file mode 100644
index 000000000..27bb22e3d
--- /dev/null
+++ b/src/app/visualizer/array/mergesort/quiz.jsx
@@ -0,0 +1,254 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const MergeSortQuiz = () => {
+  const questions = [
+    {
+      question: "What is the fundamental principle behind Merge Sort?",
+      options: [
+        "Repeatedly swapping adjacent elements if they are in the wrong order",
+        "Dividing the array into smaller subarrays and merging them back in sorted order",
+        "Selecting the smallest element and moving it to the front",
+        "Building the sorted array one element at a time by insertion"
+      ],
+      correctAnswer: 1,
+      explanation: "Merge Sort follows the divide-and-conquer approach by recursively dividing the array into halves until single elements remain, then merging them back in sorted order."
+    },
+    {
+      question: "What is the time complexity of Merge Sort in all cases (best, average, worst)?",
+      options: [
+        "O(n)",
+        "O(n log n)",
+        "O(n²)",
+        "O(log n)"
+      ],
+      correctAnswer: 1,
+      explanation: "Merge Sort has consistent O(n log n) performance in all cases because it always divides the array in half and performs linear-time merges regardless of input order."
+    },
+    {
+      question: "In the array [38, 27, 43, 3, 9, 82, 10], how many times is the array divided before reaching single elements?",
+      options: [
+        "2 times",
+        "3 times",
+        "4 times",
+        "5 times"
+      ],
+      correctAnswer: 1,
+      explanation: "The array is divided 3 times: 1) [38,27,43] and [3,9,82,10], 2) [38], [27,43], [3,9], [82,10], 3) All subarrays are single elements."
+    },
+    {
+      question: "What is the space complexity of Merge Sort?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation: "Merge Sort requires O(n) additional space for temporary arrays during the merging phase, making it not an in-place sorting algorithm."
+    },
+    {
+      question: "Which of these is NOT an advantage of Merge Sort?",
+      options: [
+        "Stable sorting (maintains relative order of equal elements)",
+        "Excellent for large datasets",
+        "Requires minimal additional memory (O(1) space)",
+        "Well-suited for external sorting"
+      ],
+      correctAnswer: 2,
+      explanation: "Merge Sort requires O(n) additional space, not O(1). Its advantages include stability, consistent O(n log n) performance, and suitability for external sorting."
+    },
+    {
+      question: "Why is Merge Sort particularly good for sorting linked lists?",
+      options: [
+        "Because it doesn't require random access to elements",
+        "Because it's the fastest sorting algorithm for all cases",
+        "Because it can sort in O(1) space with linked lists",
+        "Because it doesn't require comparisons"
+      ],
+      correctAnswer: 0,
+      explanation: "Merge Sort works well with linked lists because it primarily requires sequential access (not random access) during the merge phase, and it can be implemented with O(1) space for linked lists."
+    },
+    {
+      question: "What makes Merge Sort suitable for external sorting (sorting data too large for RAM)?",
+      options: [
+        "Its ability to sort with minimal comparisons",
+        "Its divide-and-conquer approach that works well with sequential access",
+        "Its in-place sorting capability",
+        "Its O(n) best-case time complexity"
+      ],
+      correctAnswer: 1,
+      explanation: "Merge Sort's divide-and-conquer approach works well with sequential access patterns needed for external storage, and it can efficiently merge sorted runs from disk."
+    },
+    {
+  question: "What is the main strategy used by Merge Sort?",
+  options: [
+    "Greedy",
+    "Divide and Conquer",
+    "Dynamic Programming",
+    "Backtracking"
+  ],
+  correctAnswer: 1,
+  explanation: "Merge Sort follows the Divide and Conquer strategy by recursively splitting the array and then merging the sorted halves."
+},
+{
+  question: "What is the worst-case time complexity of Merge Sort?",
+  options: [
+    "O(n²)",
+    "O(n log n)",
+    "O(log n)",
+    "O(n)"
+  ],
+  correctAnswer: 1,
+  explanation: "Merge Sort performs O(n log n) operations in the best, average, and worst cases."
+},
+{
+  question: "What is the extra space complexity of Merge Sort?",
+  options: [
+    "O(1)",
+    "O(log n)",
+    "O(n)",
+    "O(n²)"
+  ],
+  correctAnswer: 2,
+  explanation: "Merge Sort requires an auxiliary array during merging, resulting in O(n) extra space."
+},
+{
+  question: "Is Merge Sort a stable sorting algorithm?",
+  options: [
+    "Yes",
+    "No",
+    "Only for integers",
+    "Only for linked lists"
+  ],
+  correctAnswer: 0,
+  explanation: "Merge Sort is stable because equal elements preserve their relative order after sorting."
+},
+{
+  question: "Which type of dataset is Merge Sort especially suitable for?",
+  options: [
+    "Very small arrays",
+    "Large datasets requiring stable sorting",
+    "Already sorted arrays only",
+    "Hash tables"
+  ],
+  correctAnswer: 1,
+  explanation: "Merge Sort is efficient for large datasets and guarantees O(n log n) performance with stable sorting."
+},
+{
+  question: "What happens after Merge Sort divides the array into single-element subarrays?",
+  options: [
+    "The algorithm stops",
+    "The subarrays are merged back in sorted order",
+    "The array is reversed",
+    "The elements are randomly shuffled"
+  ],
+  correctAnswer: 1,
+  explanation: "After dividing the array into single-element subarrays, Merge Sort merges them back together while maintaining sorted order."
+},
+{
+  question: "Merge Sort is classified as which type of sorting algorithm?",
+  options: [
+    "Comparison-based sorting",
+    "Counting-based sorting",
+    "Hashing algorithm",
+    "Greedy algorithm"
+  ],
+  correctAnswer: 0,
+  explanation: "Merge Sort compares elements while merging, making it a comparison-based sorting algorithm."
+},
+{
+  question: "How many recursive calls are generally made before reaching the base case in Merge Sort?",
+  options: [
+    "O(1)",
+    "O(log n)",
+    "O(n)",
+    "O(n²)"
+  ],
+  correctAnswer: 1,
+  explanation: "The array is repeatedly divided into halves, resulting in a recursion depth of O(log n)."
+},
+{
+  question: "What is the base case of the Merge Sort algorithm?",
+  options: [
+    "When the array has one or zero elements",
+    "When the array is completely sorted",
+    "When two elements remain",
+    "When the array size is even"
+  ],
+  correctAnswer: 0,
+  explanation: "A single-element (or empty) array is already sorted, making it the base case."
+},
+{
+  question: "Which operation takes linear time in Merge Sort?",
+  options: [
+    "Dividing the array",
+    "Finding the middle element",
+    "Merging two sorted subarrays",
+    "Recursive calls"
+  ],
+  correctAnswer: 2,
+  explanation: "Merging two sorted subarrays requires comparing and copying all elements, taking O(n) time."
+},
+{
+  question: "Why is Merge Sort considered a stable sorting algorithm?",
+  options: [
+    "It uses recursion",
+    "It preserves the relative order of equal elements",
+    "It sorts in-place",
+    "It performs fewer comparisons"
+  ],
+  correctAnswer: 1,
+  explanation: "Merge Sort keeps equal elements in the same relative order as they appeared in the input."
+},
+{
+  question: "Which data structure is commonly used as temporary storage during Merge Sort?",
+  options: [
+    "Stack",
+    "Queue",
+    "Auxiliary array",
+    "Linked list"
+  ],
+  correctAnswer: 2,
+  explanation: "Merge Sort uses an auxiliary array to temporarily store merged elements before copying them back."
+},
+{
+  question: "Which of the following is a disadvantage of Merge Sort?",
+  options: [
+    "Poor worst-case performance",
+    "Requires additional memory",
+    "Cannot sort duplicate elements",
+    "Not suitable for recursion"
+  ],
+  correctAnswer: 1,
+  explanation: "Merge Sort requires O(n) extra memory, making it less memory-efficient than some in-place sorting algorithms."
+},
+{
+  question: "Which sorting algorithm always guarantees O(n log n) time complexity?",
+  options: [
+    "Bubble Sort",
+    "Insertion Sort",
+    "Selection Sort",
+    "Merge Sort"
+  ],
+  correctAnswer: 3,
+  explanation: "Merge Sort consistently performs in O(n log n) time regardless of the input order."
+},
+{
+  question: "Which scenario is ideal for using Merge Sort?",
+  options: [
+    "Large datasets requiring stable sorting",
+    "Very small arrays only",
+    "Arrays with one element",
+    "Hash table lookups"
+  ],
+  correctAnswer: 0,
+  explanation: "Merge Sort is an excellent choice for large datasets where stable sorting and predictable O(n log n) performance are important."
+}
+  ];
+
+  return <QuizEngine title="Merge Sort Quiz Challenge" questions={questions} />;
+};
+
+export default MergeSortQuiz;
diff --git a/src/app/visualizer/array/mergesort/quiz/page.jsx b/src/app/visualizer/array/mergesort/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/array/mergesort/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/quicksort/AlgorithmClient.jsx b/src/app/visualizer/array/quicksort/AlgorithmClient.jsx
new file mode 100644
index 000000000..0ead48ee5
--- /dev/null
+++ b/src/app/visualizer/array/quicksort/AlgorithmClient.jsx
@@ -0,0 +1,39 @@
+import Animation from "@/app/visualizer/array/quicksort/animation";
+import Content from "@/app/visualizer/array/quicksort/content";
+import Code from "@/app/visualizer/array/quicksort/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import TrackVisit from "@/app/components/ui/TrackVisit";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <>
+      <TrackVisit name="Quick Sort" path="/visualizer/array/quicksort" category="Sorting" />
+      <VisualizerPageLayout
+        paths={createVisualizerPaths("Array", "Quick Sort")}
+        title="Quick Sort"
+        animation={<Animation />}
+        content={<Content />}
+        code={<Code />}
+        exploreOther={
+          <ExploreOther
+            title="Explore Sorting Algorithms"
+            links={[
+              { text: "Bubble Sort", url: "/visualizer/array/bubblesort" },
+              { text: "Selection Sort", url: "/visualizer/array/selectionsort" },
+              { text: "Insertion Sort", url: "/visualizer/array/insertionsort" },
+              { text: "Merge Sort", url: "/visualizer/array/mergesort" },
+              { text: "Comparison Mode", url: "/visualizer/array/comparison" },
+              { text: "Counting Sort", url: "/visualizer/array/countingsort" },
+              { text: "Heap Sort", url: "/visualizer/array/heapsort" },
+            ]}
+          />
+        }
+      />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/quicksort/animation.jsx b/src/app/visualizer/array/quicksort/animation.jsx
new file mode 100644
index 000000000..23faa3ca4
--- /dev/null
+++ b/src/app/visualizer/array/quicksort/animation.jsx
@@ -0,0 +1,485 @@
+"use client";
+import React, { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import { gsap } from "gsap";
+import ArrayGenerator from "@/app/components/ui/randomArray";
+import CustomArrayInput from "@/app/components/ui/customArrayInput";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import { quickSortGenerator } from "@/features/algorithms/array/quickSortLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+  if (len <= 2) return "text-lg";
+  if (len === 3) return "text-sm";
+  return "text-xs";
+};
+
+const precomputeSteps = (inputArray) => {
+  const steps = [];
+  const generator = quickSortGenerator(inputArray);
+  
+  for (const frame of generator) {
+    const { type, payload } = frame;
+    
+    if (type === 'init') {
+      steps.push({
+        array: [...inputArray],
+        comparisons: 0, swaps: 0, currentStep: 0,
+        currentIndices: { pivot: -1, left: -1, right: -1, partitionIndex: -1, stack: [], partitions: [] },
+        currentPhase: "", stepExplanation: "Starting Quick Sort...",
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'partition_start') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        comparisons: steps[steps.length - 1]?.comparisons || 0,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step || steps[steps.length - 1]?.currentStep || 0,
+        currentIndices: { 
+          ...(steps[steps.length - 1]?.currentIndices || {}),
+          partitions: payload.partitions, stack: payload.stack 
+        },
+        currentPhase: `Partition Step: [${payload.low}, ${payload.high}]`,
+        stepExplanation: `Processing partition range [${payload.low}, ${payload.high}] in the current Quick Sort stack.`,
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'pivot_chosen') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        comparisons: steps[steps.length - 1]?.comparisons || 0,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step || steps[steps.length - 1]?.currentStep || 0,
+        currentIndices: { 
+          ...(steps[steps.length - 1]?.currentIndices || {}),
+          pivot: payload.high, left: payload.low, right: payload.right 
+        },
+        currentPhase: `Partitioning range [${payload.low}, ${payload.high}]`,
+        stepExplanation: `Choosing pivot ${payload.pivot} at index ${payload.high}.`,
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'comparing') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        comparisons: payload.comparisons,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step,
+        currentIndices: { 
+          ...(steps[steps.length - 1]?.currentIndices || {}),
+          left: payload.j, right: payload.i 
+        },
+        currentPhase: steps[steps.length - 1]?.currentPhase || "",
+        stepExplanation: `Comparing ${payload.arr[payload.j]} at index ${payload.j} with pivot ${payload.pivot}.`,
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'swap_needed') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        comparisons: payload.comparisons,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step,
+        currentIndices: steps[steps.length - 1]?.currentIndices,
+        currentPhase: steps[steps.length - 1]?.currentPhase || "",
+        stepExplanation: `Since ${payload.arr[payload.j]} < pivot, swapping elements at indices ${payload.i} and ${payload.j}.`,
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'swapped' || type === 'pivot_swapped') {
+      steps.push({
+        array: [...payload.arr],
+        comparisons: steps[steps.length - 1]?.comparisons || 0,
+        swaps: payload.swaps,
+        currentStep: payload.step || steps[steps.length - 1]?.currentStep || 0,
+        currentIndices: steps[steps.length - 1]?.currentIndices,
+        currentPhase: steps[steps.length - 1]?.currentPhase || "",
+        stepExplanation: type === 'swapped' 
+          ? `Swapped elements at indices ${payload.i} and ${payload.j}.`
+          : `Placed pivot ${payload.pivot} into its correct position at index ${payload.i}.`,
+        sorted: false, totalSteps: payload.totalSteps,
+        isSwapped: true,
+      });
+    } else if (type === 'no_swap') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        comparisons: steps[steps.length - 1]?.comparisons || 0,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step || steps[steps.length - 1]?.currentStep || 0,
+        currentIndices: steps[steps.length - 1]?.currentIndices,
+        currentPhase: steps[steps.length - 1]?.currentPhase || "",
+        stepExplanation: `Since ${payload.arr[payload.j]} >= pivot, leaving ${payload.arr[payload.j]} on the right side.`,
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'pivot_swap_needed') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        comparisons: steps[steps.length - 1]?.comparisons || 0,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step || steps[steps.length - 1]?.currentStep || 0,
+        currentIndices: steps[steps.length - 1]?.currentIndices,
+        currentPhase: steps[steps.length - 1]?.currentPhase || "",
+        stepExplanation: `Placing pivot ${payload.pivot} into its correct position at index ${payload.i}.`,
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'partition_completed') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        comparisons: steps[steps.length - 1]?.comparisons || 0,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step || steps[steps.length - 1]?.currentStep || 0,
+        currentIndices: { 
+          ...(steps[steps.length - 1]?.currentIndices || {}),
+          partitionIndex: payload.pi, stack: payload.stack, pivot: -1, left: -1, right: -1 
+        },
+        currentPhase: steps[steps.length - 1]?.currentPhase || "",
+        stepExplanation: `Partition completed. Pivot is now at index ${payload.pi}.`,
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'stack_updated') {
+      steps.push({
+        array: steps[steps.length - 1]?.array || [...inputArray],
+        comparisons: steps[steps.length - 1]?.comparisons || 0,
+        swaps: steps[steps.length - 1]?.swaps || 0,
+        currentStep: payload.step || steps[steps.length - 1]?.currentStep || 0,
+        currentIndices: { 
+          ...(steps[steps.length - 1]?.currentIndices || {}),
+          partitions: payload.partitions 
+        },
+        currentPhase: steps[steps.length - 1]?.currentPhase || "",
+        stepExplanation: steps[steps.length - 1]?.stepExplanation || "",
+        sorted: false, totalSteps: payload.totalSteps,
+      });
+    } else if (type === 'completed') {
+      const last = steps[steps.length - 1] || {};
+      steps.push({
+        array: payload.arr || last.array || [],
+        comparisons: last.comparisons || 0,
+        swaps: last.swaps || 0,
+        currentStep: payload.step || last.currentStep || 0,
+        currentIndices: { pivot: -1, left: -1, right: -1, partitionIndex: -1, stack: [], partitions: [] },
+        currentPhase: "Completed",
+        stepExplanation: "Array is fully sorted.",
+        sorted: true, totalSteps: payload.totalSteps || last.totalSteps,
+      });
+    }
+  }
+  return steps;
+};
+
+const QuickSortVisualizer = () => {
+  const [array, setArray] = useState([]);
+  const replayTimeoutRef = useRef(null);
+
+  const [visualState, setVisualState] = useState({
+    comparisons: 0, swaps: 0, 
+    currentIndices: { pivot: -1, left: -1, right: -1, partitionIndex: -1, stack: [], partitions: [] },
+    currentPhase: "", stepExplanation: "", sorted: false, totalSteps: 0,
+  });
+
+  const steps = useMemo(() => {
+    if (array.length === 0) return [];
+    return precomputeSteps(array);
+  }, [array]);
+
+  const onStep = useCallback((step) => {
+    setVisualState({
+      comparisons: step.comparisons,
+      swaps: step.swaps,
+      currentIndices: step.currentIndices,
+      currentPhase: step.currentPhase,
+      stepExplanation: step.stepExplanation,
+      sorted: step.sorted,
+      totalSteps: step.totalSteps,
+    });
+
+    if (step.isSwapped) {
+      const bars = document.querySelectorAll(".array-bar");
+      if (bars.length > 0) {
+        gsap.fromTo(
+          bars,
+          { scale: 1, opacity: 0.8 },
+          { scale: 1.05, opacity: 1, duration: 0.2, stagger: 0.05, yoyo: true, repeat: 1 }
+        );
+      }
+    }
+  }, []);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 500 });
+  const currentStepData = steps[engine.currentStep];
+
+  const handleStart = useCallback(() => {
+    if (currentStepData?.sorted) {
+      engine.reset();
+      replayTimeoutRef.current = setTimeout(() => engine.play(), 50);
+    } else {
+      engine.play();
+    }
+  }, [engine, currentStepData]);
+
+  const handleReset = useCallback(() => {
+    clearTimeout(replayTimeoutRef.current);
+    setVisualState({
+      comparisons: 0, swaps: 0, 
+      currentIndices: { pivot: -1, left: -1, right: -1, partitionIndex: -1, stack: [], partitions: [] },
+      currentPhase: "", stepExplanation: "", sorted: false, totalSteps: 0,
+    });
+    engine.reset();
+  }, [engine]);
+
+  useEffect(() => {
+    return () => clearTimeout(replayTimeoutRef.current);
+    }, []);
+    
+  useVisualizerKeyboard({
+    onStart: handleStart,
+    onReset: handleReset,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+    onTogglePlayPause: engine.isPlaying ? engine.pause : handleStart,
+    speed: engine.speed / 500,
+    sorting: engine.isPlaying,
+    sorted: currentStepData?.sorted || false,
+  });
+
+  const handleExplainStep = () => {
+    const prompt = `I am currently looking at the Quick Sort algorithm, at step ${engine.currentStep} of ${steps.length}.
+Phase: ${visualState.currentPhase}
+Explanation on screen: ${visualState.stepExplanation}
+Current Array State: [${currentStepData?.array?.join(", ") || array.join(", ")}]
+Currently comparing: left = ${visualState.currentIndices.left}, right = ${visualState.currentIndices.right}
+Pivot index: ${visualState.currentIndices.pivot}
+Partition index: ${visualState.currentIndices.partitionIndex}
+
+Please explain exactly what is happening in this step in detail.`;
+    
+    window.dispatchEvent(
+      new CustomEvent("chatbot-explain", { detail: { prompt } })
+    );
+  };
+
+  const renderPartitions = () => {
+    if (visualState.currentIndices.partitions.length === 0) return null;
+
+    return (
+      <div className="mt-8">
+        <div className="space-y-6">
+          {visualState.currentIndices.partitions.map((partition, idx) => {
+            const subArray = (currentStepData?.array || array).slice(partition.low, partition.high + 1);
+            return (
+              <div key={idx} className="bg-gray-100 dark:bg-neutral-900 p-4 rounded-lg">
+                <div className="flex justify-between items-center mb-2">
+                  <span className="text-sm font-medium">
+                    Partition {idx + 1}: Indexes {partition.low} to {partition.high}
+                  </span>
+                  <span className="text-xs bg-blue-100 dark:bg-blue-900 text-primary-dark dark:text-blue-200 px-2 py-1 rounded">
+                    {subArray.length} elements
+                  </span>
+                </div>
+                <div className="flex flex-wrap gap-3">
+                  {subArray.map((value, subIdx) => {
+                    const originalIndex = partition.low + subIdx;
+                    const isPivot = originalIndex === visualState.currentIndices.pivot;
+                    const isLeft = originalIndex === visualState.currentIndices.left;
+                    const isRight = originalIndex === visualState.currentIndices.right;
+
+                    return (
+                      <div key={originalIndex} className="flex flex-col items-center">
+                        <div
+                          className={`w-12 h-12 flex items-center justify-center rounded-lg border-2 transition-all duration-300 text-sm font-medium
+                              ${
+                                isPivot
+                                  ? "bg-red-400 dark:bg-red-600 border-red-600 dark:border-red-400"
+                                  : isLeft
+                                  ? "bg-yellow-400 dark:bg-yellow-600 border-yellow-600 dark:border-yellow-400"
+                                  : isRight
+                                  ? "bg-primary/80 dark:bg-primary border-primary dark:border-primary/80"
+                                  : "bg-gray-200 dark:bg-gray-700 border-gray-300 dark:border-gray-600"
+                              }`}
+                        >
+                          {value}
+                        </div>
+                        <div className="mt-1 text-xs text-gray-600 dark:text-gray-400">
+                          [{originalIndex}]
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <main className="container mx-auto px-6 pt-4 pb-6">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Visualize Quick Sort&apos;s divide-and-conquer approach with interactive partitions
+      </p>
+
+      <div className="max-w-4xl mx-auto">
+        <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <div>
+              <ArrayGenerator
+                onGenerate={(newArray) => {
+                  setArray(newArray);
+                  handleReset();
+                }}
+                disabled={engine.isPlaying}
+                isPrimary={array.length === 0}
+              />
+              <CustomArrayInput
+                onUseCustomArray={(newArray) => {
+                  setArray(newArray);
+                  handleReset();
+                }}
+                disabled={engine.isPlaying}
+                currentArray={array}
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <button
+                onClick={handleStart}
+                disabled={!array.length}
+                className="w-full disabled:opacity-75 bg-none bg-[#a435f0] hover:bg-[#8f2cd6] px-4 py-2 rounded shadow-sm transition-all duration-300 text-sm sm:text-base text-white"
+              >
+                {engine.isPlaying ? "Sorting..." : currentStepData?.sorted ? "Restart" : "Start Quick Sort"}
+              </button>
+              <button
+                onClick={handleReset}
+                disabled={engine.isPlaying}
+                className="w-full bg-none text-[#a435f0] border border-[#a435f0] hover:bg-[#f3e8ff] dark:hover:bg-[#a435f0]/20 px-4 py-2 rounded transition-colors text-sm sm:text-base"
+              >
+                Reset All
+              </button>
+            </div>
+          </div>
+          
+          {engine.isPlaying && (
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={engine.isPlaying ? engine.pause : handleStart}
+              speed={engine.speed / 500}
+              onSpeedChange={(s) => engine.setSpeed(s * 500)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={engine.reset}
+              onExplainStep={handleExplainStep}
+              disabled={steps.length === 0}
+            />
+          )}
+
+          {!engine.isPlaying && (
+            <div className="flex items-center gap-4 mb-4">
+              <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">Speed:</span>
+              <input
+                type="range"
+                min="0.5"
+                max="5"
+                step="0.5"
+                value={engine.speed / 500}
+                onChange={(e) => engine.setSpeed(parseFloat(e.target.value) * 500)}
+                className="w-24 sm:w-32"
+              />
+              <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">{engine.speed / 500}x</span>
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Comparisons:</div>
+              <div className="text-2xl">{visualState.comparisons}</div>
+            </div>
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Swaps:</div>
+              <div className="text-2xl">{visualState.swaps}</div>
+            </div>
+          </div>
+          <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+            <div className="font-medium">Step:</div>
+            <div className="text-xl font-bold">
+              {visualState.totalSteps > 0 ? `${engine.currentStep + 1} / ${steps.length}` : "—"}
+            </div>
+            <div className="text-xs text-gray-500 mt-1">
+              {engine.currentStep > 0 && !visualState.sorted
+                ? `Partitioning around pivot at index ${visualState.currentIndices.pivot}`
+                : visualState.sorted
+                ? "Sorting complete!"
+                : "Start sorting to see steps"}
+            </div>
+          </div>
+          <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+            <div className="font-medium">Phase:</div>
+            <div className="text-sm sm:text-base text-gray-800 dark:text-gray-200">
+              {visualState.currentPhase || (visualState.sorted ? "Completed" : "Ready to start")}
+            </div>
+            <div className="font-medium mt-2">Explanation:</div>
+            <div className="text-sm text-gray-700 dark:text-gray-300 mt-1">
+              {visualState.stepExplanation || (visualState.sorted ? "Array is fully sorted." : "Run the algorithm to see educational hints.")}
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
+          <h2 className="text-xl font-semibold mb-4">Array Visualization</h2>
+          {(currentStepData?.array || array).length > 0 ? (
+            <div className="flex flex-wrap gap-4 justify-center">
+              {((currentStepData?.array) || array).map((value, index) => {
+                const isPivot = index === visualState.currentIndices.pivot;
+                const isLeft = index === visualState.currentIndices.left;
+                const isRight = index === visualState.currentIndices.right;
+                const isPartition = index === visualState.currentIndices.partitionIndex;
+                const isInPartition = visualState.currentIndices.partitions.some(
+                  (p) => index >= p.low && index <= p.high
+                );
+
+                return (
+                  <div key={index} className="flex flex-col items-center">
+                    <div
+                      className={`array-bar w-16 h-16 flex items-center justify-center rounded-lg border-2 transition-all duration-300 ${getFontSize(value)} font-medium
+                            ${
+                              isPivot
+                                ? "bg-red-400 dark:bg-red-600 border-red-600 dark:border-red-400"
+                                : isLeft
+                                ? "bg-yellow-400 dark:bg-yellow-600 border-yellow-600 dark:border-yellow-400"
+                                : isRight
+                                ? "bg-primary/80 dark:bg-primary border-primary dark:border-primary/80"
+                                : isPartition
+                                ? "bg-green-400 dark:bg-green-600 border-green-600 dark:border-green-400"
+                                : isInPartition
+                                ? "bg-purple-100 dark:bg-purple-900 border-purple-300 dark:border-purple-700"
+                                : visualState.sorted
+                                ? "bg-green-400 dark:bg-green-600 border-green-600 dark:border-green-400"
+                                : "bg-gray-200 dark:bg-gray-700 border-gray-300 dark:border-gray-600"
+                            }`}
+                    >
+                      {value}
+                    </div>
+                    <div className="mt-1 text-xs text-gray-600 dark:text-gray-400">
+                      {index}
+                      {isPivot && " (pivot)"}
+                      {isLeft && " (left)"}
+                      {isRight && " (right)"}
+                      {isPartition && " (partition)"}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="text-center py-8 text-gray-500">
+              {engine.isPlaying ? "Sorting..." : "Generate or enter an array to begin"}
+            </div>
+          )}
+        </div>
+
+        <div className="bg-white mt-8 dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
+          <h2 className="text-xl font-semibold mb-4">Partition Array</h2>
+          {renderPartitions()}
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default QuickSortVisualizer;
diff --git a/src/app/visualizer/array/quicksort/codeBlock.jsx b/src/app/visualizer/array/quicksort/codeBlock.jsx
new file mode 100644
index 000000000..9c524012b
--- /dev/null
+++ b/src/app/visualizer/array/quicksort/codeBlock.jsx
@@ -0,0 +1,172 @@
+'use client';
+import CodeBlock from '@/app/components/ui/CodeBlock';
+
+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 example
+const numbers = [10, 7, 8, 9, 1, 5];
+console.log("Before sorting:", numbers);
+const result = quickSort([...numbers]);
+console.log("After sorting:", result);`,
+
+  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 example
+numbers = [10, 7, 8, 9, 1, 5]
+print("Before sorting:", numbers)
+result = quick_sort(numbers)
+print("After sorting:", result)`,
+
+  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[] numbers = {10, 7, 8, 9, 1, 5};
+        quickSort(numbers, 0, numbers.length - 1);
+        for (int num : numbers) {
+            System.out.print(num + " ");
+        }
+    }
+}`,
+
+  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);
+    }
+}
+int main() {
+    int numbers[] = {10, 7, 8, 9, 1, 5};
+    int n = sizeof(numbers) / sizeof(numbers[0]);
+    quickSort(numbers, 0, n - 1);
+    for (int i = 0; i < n; i++) printf("%d ", numbers[i]);
+    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);
+    }
+}
+int main() {
+    vector<int> numbers = {10, 7, 8, 9, 1, 5};
+    quickSort(numbers, 0, numbers.size() - 1);
+    for (int num : numbers) cout << num << " ";
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: 'quickSort.js',
+  python: 'quick_sort.py',
+  java: 'QuickSort.java',
+  c: 'quick_sort.c',
+  cpp: 'quick_sort.cpp',
+};
+
+const QuickSortCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default QuickSortCode;
\ No newline at end of file
diff --git a/src/app/visualizer/array/quicksort/content.jsx b/src/app/visualizer/array/quicksort/content.jsx
new file mode 100644
index 000000000..d4b9e7b7f
--- /dev/null
+++ b/src/app/visualizer/array/quicksort/content.jsx
@@ -0,0 +1,331 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState('light');
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraphs = [
+    `Quick Sort is an efficient, comparison-based sorting algorithm that follows the divide-and-conquer approach. It works by selecting a 'pivot' element from the array and partitioning the other elements into two sub-arrays according to whether they are less than or greater than the pivot. The sub-arrays are then recursively sorted.`,
+    `The log n factor comes from the division steps when partitions are balanced. The n² occurs when the pivot selection consistently creates unbalanced partitions.`,
+    `Quick Sort is O(log n) space complexity for the call stack in the average case, but can degrade to O(n) in the worst case with unbalanced partitions. It is generally considered an in-place algorithm as it doesn't require significant additional space.`,
+    `Quick Sort is the algorithm of choice for most standard library sorting implementations (like C's qsort, Java's Arrays.sort for primitives) due to its excellent average-case performance. It's particularly effective for large datasets that fit in memory.`,
+  ];
+
+  const working = [
+    {
+      steps: "Partitioning Phase:",
+      points: [
+        "Choose last element as pivot (70)",
+        "Rearrange: elements < pivot on left, > pivot on right → [10, 30, 40, 50] [70] [80, 90]",
+      ],
+    },
+    {
+      steps: "Recursive Phase:",
+      points: [
+        "Apply same process to left sub-array [10, 30, 40, 50]",
+        "Apply same process to right sub-array [80, 90]",
+        "Combine results: [10, 30, 40, 50, 70, 80, 90]",
+      ],
+    },
+  ];
+
+  const algorithm = [
+    {
+      steps: "Choose Pivot:",
+      points: [
+        "Select an element as pivot (commonly last/first/random element)",
+      ],
+    },
+    {
+      steps: "Partition:",
+      points: [
+        "Reorder array so elements < pivot come before it",
+        "Elements > pivot come after it",
+        "Pivot is now in its final sorted position",
+      ],
+    },
+    {
+      steps: "Recurse:",
+      points: [
+        "Apply quick sort to left sub-array (elements < pivot)",
+        "Apply quick sort to right sub-array (elements > pivot)",
+      ],
+    },
+  ];
+
+  const timeComplexity = [
+    { points: "Best Case: O(n log n) (balanced partitions)" },
+    { points: "Average Case: O(n log n)" },
+    { points: "Worst Case: O(n²) (unbalanced partitions)" },
+  ];
+
+  const strategies = [
+    { strategy: "Last element" },
+    { strategy: "First element" },
+    { strategy: "Random element" },
+    { strategy: "Median-of-three" },
+    { strategy: "Middle element" },
+  ];
+
+  const strategiesDetails = [
+    { details: "Simple but can lead to worst-case on sorted arrays" },
+    { details: "Similar issues as last element" },
+    { details: "Reduces chance of worst-case scenarios" },
+    { details: "Takes median of first, middle, last elements" },
+    { details: "Often provides good balance" },
+  ];
+
+  const CombinedDeatils = strategies.map((item, index) => ({
+    strategy: item.strategy,
+    details: strategiesDetails[index].details,
+  }));
+
+  {
+    /* Advantages */
+  }
+  const advantages = [
+    {
+      points: "Fastest general-purpose in-memory sorting algorithm in practice",
+    },
+    { points: "In-place algorithm (requires minimal additional memory)" },
+    { points: "Cache-efficient due to sequential memory access" },
+    { points: "Can be easily parallelized for better performance" },
+  ];
+
+  {
+    /* Disadvantages */
+  }
+  const disadvantages = [
+    { points: "Not stable (relative order of equal elements may change)" },
+    {
+      points:
+        "Worst-case O(n²) performance (though rare with proper pivot selection)",
+    },
+    { points: "Performance depends heavily on pivot selection strategy" },
+    { points: "Not ideal for linked lists (works best with arrays)" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is Quick Sort */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is Quick Sort?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* How Does It Work */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            How Does It Work?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Consider this unsorted array: [10, 80, 30, 90, 40, 50, 70]
+            </p>
+
+            <ul className="space-y-3">
+              {working.map((item, index) => (
+                <li key={index} className="text-[#374151] dark:text-[#d1d5db]">
+                  <span className="font-semibold">{item.steps}</span>
+                  {item.points && (
+                    <ol className="mt-2 space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400 font-normal">
+                      {item.points.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ol>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Algorithm Steps */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Algorithm Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {algorithm.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.steps}
+                  {item.points && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.points.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {timeComplexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                    {item.points.split(":")[0]}:
+                  </span>
+                  <span className="ml-2">{item.points.split(":")[1]}</span>
+                </li>
+              ))}
+            </ul>
+            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+              {paragraphs[1]}
+            </p>
+            <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => n * Math.log2(n)}
+                averageCase={(n) => n * Math.log2(n)}
+                worstCase={(n) => n * n}
+                maxN={25}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Space Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Space Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[2]}
+            </p>
+          </div>
+        </section>
+
+        {/* Advantages */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Advantages
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {advantages.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Disadvantages */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Disadvantages
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {disadvantages.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Pivot Selection Strategies */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Pivot Selection Strategies
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {CombinedDeatils.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-semibold">{item.strategy}:</span>{" "}
+                  {item.details}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraphs[3]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/array/quicksort/quiz.jsx b/src/app/visualizer/array/quicksort/quiz.jsx
new file mode 100644
index 000000000..7ef3e7334
--- /dev/null
+++ b/src/app/visualizer/array/quicksort/quiz.jsx
@@ -0,0 +1,287 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QuickSortQuiz = () => {
+  const questions = [
+    {
+      question: "What is the fundamental principle behind Quick Sort?",
+      options: [
+        "Merging two sorted lists into one",
+        "Building a heap structure from the array",
+        "Dividing the array around a pivot element",
+        "Finding the minimum element repeatedly"
+      ],
+      correctAnswer: 2,
+      explanation: "Quick Sort uses a divide-and-conquer approach by selecting a pivot element and partitioning the array into elements less than and greater than the pivot."
+    },
+    {
+      question: "What is the average-case time complexity of Quick Sort?",
+      options: [
+        "O(n)",
+        "O(n log n)",
+        "O(n²)",
+        "O(log n)"
+      ],
+      correctAnswer: 1,
+      explanation: "With good pivot selection that creates balanced partitions, Quick Sort averages O(n log n) time complexity."
+    },
+    {
+      question: "Which pivot selection strategy helps avoid the worst-case O(n²) scenario?",
+      options: [
+        "Always choosing the first element",
+        "Always choosing the last element",
+        "Median-of-three method",
+        "Always choosing the middle element"
+      ],
+      correctAnswer: 2,
+      explanation: "The median-of-three strategy (choosing the median of first, middle, and last elements) helps prevent consistently bad pivot choices that lead to unbalanced partitions."
+    },
+    {
+      question: "What is the space complexity of Quick Sort in the average case?",
+      options: [
+        "O(1)",
+        "O(n)",
+        "O(log n)",
+        "O(n log n)"
+      ],
+      correctAnswer: 2,
+      explanation: "Quick Sort requires O(log n) space for the call stack in the average case due to recursive calls, but can degrade to O(n) in worst-case scenarios."
+    },
+    {
+      question: "In the array [10, 80, 30, 90, 40, 50, 70], if we choose the last element as pivot, what is the array after the first partition?",
+      options: [
+        "[10, 30, 40, 50, 70, 80, 90]",
+        "[10, 30, 40] [50] [70, 80, 90]",
+        "[10, 30, 40, 50] [70] [80, 90]",
+        "[10, 80, 30, 90, 40, 50, 70]"
+      ],
+      correctAnswer: 2,
+      explanation: "With pivot=70, elements less than 70 (10,30,40,50) go left, elements greater (80,90) go right, and 70 is in its final position."
+    },
+    {
+      question: "Which of these is NOT an advantage of Quick Sort?",
+      options: [
+        "Excellent average-case performance",
+        "Stable sorting (maintains relative order of equal elements)",
+        "In-place sorting (requires minimal additional memory)",
+        "Cache-efficient due to sequential memory access"
+      ],
+      correctAnswer: 1,
+      explanation: "Quick Sort is not stable - the relative order of equal elements may change during partitioning."
+    },
+    {
+      question: "What causes Quick Sort's worst-case O(n²) time complexity?",
+      options: [
+        "When the array contains duplicate elements",
+        "When the pivot consistently creates highly unbalanced partitions",
+        "When the array size is very small",
+        "When using extra space for merging"
+      ],
+      correctAnswer: 1,
+      explanation: "The worst case occurs when the pivot selection consistently creates partitions of size n-1 and 0 (extremely unbalanced), leading to n nested calls."
+    },
+    {
+      question: "Why is Quick Sort often preferred over Merge Sort for in-memory sorting?",
+      options: [
+        "It has better worst-case time complexity",
+        "It is a stable sorting algorithm",
+        "It has better cache performance due to sequential access",
+        "It requires less code to implement"
+      ],
+      correctAnswer: 2,
+      explanation: "Quick Sort's sequential memory access pattern makes it more cache-friendly than Merge Sort, contributing to its better real-world performance despite having the same average time complexity."
+    },
+    {
+      question: "Which of these standard library implementations typically uses Quick Sort?",
+      options: [
+        "Python's sorted() function",
+        "Java's Arrays.sort() for primitive types",
+        "C++ STL's stable_sort()",
+        "JavaScript's Array.prototype.sort()"
+      ],
+      correctAnswer: 1,
+      explanation: "Java's Arrays.sort() uses a dual-pivot Quick Sort for primitive types (which don't need stability), while object sorting uses a stable Merge Sort variant."
+    },
+    {
+      question: "What is the primary purpose of the partition step in Quick Sort?",
+      options: [
+        "To divide the array into exactly equal halves",
+        "To place the pivot element in its correct final position",
+        "To sort the array in one pass",
+        "To identify duplicate elements in the array"
+      ],
+      correctAnswer: 1,
+      explanation: "The partition step's main goal is to place the pivot in its correct sorted position while arranging other elements to be less than or greater than the pivot."
+    },
+    {
+  question: "What is the main strategy used by Quick Sort?",
+  options: [
+    "Greedy",
+    "Divide and Conquer",
+    "Dynamic Programming",
+    "Backtracking"
+  ],
+  correctAnswer: 1,
+  explanation: "Quick Sort follows the Divide and Conquer approach by selecting a pivot and partitioning the array around it."
+},
+{
+  question: "What is the average-case time complexity of Quick Sort?",
+  options: [
+    "O(n²)",
+    "O(log n)",
+    "O(n log n)",
+    "O(n)"
+  ],
+  correctAnswer: 2,
+  explanation: "Quick Sort has an average-case time complexity of O(n log n), making it one of the fastest practical sorting algorithms."
+},
+{
+  question: "What is the worst-case time complexity of Quick Sort?",
+  options: [
+    "O(n)",
+    "O(n²)",
+    "O(log n)",
+    "O(n log n)"
+  ],
+  correctAnswer: 1,
+  explanation: "Quick Sort performs O(n²) in the worst case when poor pivot choices repeatedly create highly unbalanced partitions."
+},
+{
+  question: "What is the role of the pivot element in Quick Sort?",
+  options: [
+    "It stores the smallest element",
+    "It divides the array into smaller partitions",
+    "It merges sorted arrays",
+    "It keeps the array balanced"
+  ],
+  correctAnswer: 1,
+  explanation: "The pivot is used to partition the array so that smaller elements are placed before it and larger elements after it."
+},
+{
+  question: "Which statement about Quick Sort is correct?",
+  options: [
+    "It is always stable",
+    "It requires O(n) extra space",
+    "It is generally one of the fastest comparison-based sorting algorithms",
+    "It only works on linked lists"
+  ],
+  correctAnswer: 2,
+  explanation: "Quick Sort is widely used because of its excellent average-case performance, although the standard implementation is not stable."
+},
+{
+  question: "What is the base case of the Quick Sort algorithm?",
+  options: [
+    "When the array has one or zero elements",
+    "When the array is already sorted",
+    "When two elements remain",
+    "When the pivot is the largest element"
+  ],
+  correctAnswer: 0,
+  explanation: "Quick Sort stops recursively dividing when the subarray contains one or zero elements, as it is already sorted."
+},
+{
+  question: "Which operation is performed during the partition step of Quick Sort?",
+  options: [
+    "Merge two sorted arrays",
+    "Compare and arrange elements around the pivot",
+    "Find the minimum element",
+    "Reverse the array"
+  ],
+  correctAnswer: 1,
+  explanation: "The partition step rearranges elements so those smaller than the pivot come before it and larger ones come after it."
+},
+{
+  question: "Which pivot selection strategy can improve Quick Sort's performance?",
+  options: [
+    "Random pivot",
+    "Median-of-three pivot",
+    "Middle element pivot",
+    "All of the above"
+  ],
+  correctAnswer: 3,
+  explanation: "Random, median-of-three, and middle-element pivot strategies all help reduce the chances of worst-case performance."
+},
+{
+  question: "Is the standard implementation of Quick Sort stable?",
+  options: [
+    "Yes",
+    "No",
+    "Only for integers",
+    "Only for sorted arrays"
+  ],
+  correctAnswer: 1,
+  explanation: "The standard implementation of Quick Sort is not stable because equal elements may change their relative order."
+},
+{
+  question: "What is the average auxiliary space complexity of Quick Sort?",
+  options: [
+    "O(1)",
+    "O(log n)",
+    "O(n)",
+    "O(n²)"
+  ],
+  correctAnswer: 1,
+  explanation: "Quick Sort uses O(log n) auxiliary space on average due to recursive function calls."
+},
+{
+  question: "Why is Quick Sort considered an in-place sorting algorithm?",
+  options: [
+    "It uses only a small amount of extra memory",
+    "It creates multiple temporary arrays",
+    "It stores all elements in another array",
+    "It never swaps elements"
+  ],
+  correctAnswer: 0,
+  explanation: "Quick Sort rearranges elements within the original array and requires only a small recursion stack."
+},
+{
+  question: "Which situation can lead to the worst-case performance of Quick Sort?",
+  options: [
+    "Balanced partitions",
+    "Random pivot selection",
+    "Highly unbalanced partitions",
+    "Duplicate elements only"
+  ],
+  correctAnswer: 2,
+  explanation: "Worst-case performance occurs when each partition leaves one side almost empty, resulting in O(n²) time complexity."
+},
+{
+  question: "Which sorting algorithm generally has better cache performance than Merge Sort?",
+  options: [
+    "Bubble Sort",
+    "Selection Sort",
+    "Quick Sort",
+    "Insertion Sort"
+  ],
+  correctAnswer: 2,
+  explanation: "Quick Sort accesses memory more sequentially, making it more cache-friendly and often faster in practice."
+},
+{
+  question: "How many recursive calls are typically made in Quick Sort after partitioning?",
+  options: [
+    "One",
+    "Two",
+    "Three",
+    "Four"
+  ],
+  correctAnswer: 1,
+  explanation: "After partitioning, Quick Sort recursively sorts the left and right subarrays, resulting in two recursive calls."
+},
+{
+  question: "Which scenario is most suitable for using Quick Sort?",
+  options: [
+    "Large in-memory datasets",
+    "External sorting on disk",
+    "Very small arrays only",
+    "Linked lists only"
+  ],
+  correctAnswer: 0,
+  explanation: "Quick Sort is widely used for large in-memory datasets because of its excellent average-case performance and cache efficiency."
+}
+  ];
+
+  return <QuizEngine title="Quick Sort Quiz Challenge" questions={questions} />;
+};
+
+export default QuickSortQuiz;
diff --git a/src/app/visualizer/array/quicksort/quiz/page.jsx b/src/app/visualizer/array/quicksort/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/array/quicksort/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/radixsort/AlgorithmClient.jsx b/src/app/visualizer/array/radixsort/AlgorithmClient.jsx
new file mode 100644
index 000000000..f92d71645
--- /dev/null
+++ b/src/app/visualizer/array/radixsort/AlgorithmClient.jsx
@@ -0,0 +1,32 @@
+import Animation from "@/app/visualizer/array/radixsort/animation";
+import Content from "@/app/visualizer/array/radixsort/content";
+import Code from "@/app/visualizer/array/radixsort/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import TrackVisit from "@/app/components/ui/TrackVisit";
+import VisualizerPageLayout, { createVisualizerPaths } from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <>
+      <TrackVisit name="Radix Sort" path="/visualizer/array/radixsort" category="Sorting"/>
+      <VisualizerPageLayout
+        paths={createVisualizerPaths("Array", "Radix Sort")}
+        title="Radix Sort"
+        animation={<Animation />}
+        content={<Content />}
+        code={<Code />}
+        exploreOther={<ExploreOther title="Explore Sorting Algorithms" links={[
+          { text: "Bubble Sort", url: "/visualizer/array/bubblesort" },
+          { text: "Selection Sort", url: "/visualizer/array/selectionsort" },
+          { text: "Insertion Sort", url: "/visualizer/array/insertionsort" },
+          { text: "Merge Sort", url: "/visualizer/array/mergesort" },
+          { text: "Quick Sort", url: "/visualizer/array/quicksort" },
+          { text: "Comparison Mode", url: "/visualizer/array/comparison" },
+          { text: "Heap Sort", url: "/visualizer/array/heapsort" },
+        ]} />}
+      />
+    </>
+  );
+}
diff --git a/src/app/visualizer/array/radixsort/animation.jsx b/src/app/visualizer/array/radixsort/animation.jsx
new file mode 100644
index 000000000..954dd0ae8
--- /dev/null
+++ b/src/app/visualizer/array/radixsort/animation.jsx
@@ -0,0 +1,282 @@
+"use client";
+import React, { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import ArrayGenerator from "@/app/components/ui/randomArray";
+import CustomArrayInput from "@/app/components/ui/customArrayInput";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import { radixSortGenerator } from "@/features/algorithms/array/radixSortLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+  if (len <= 2) return "text-lg";
+  if (len === 3) return "text-sm";
+  return "text-xs";
+};
+
+const precomputeSteps = (inputArray) => {
+  const steps = [];
+  const generator = radixSortGenerator(inputArray);
+  
+  for (const frame of generator) {
+    const { type, payload } = frame;
+    
+    if (type === "init") {
+  steps.push({
+    array: [...payload.arr],
+    comparisons: 0,
+    swaps: 0,
+    currentIndices: { current: -1 },
+    currentPhase: "Initialization",
+    stepExplanation: "Preparing Radix Sort.",
+    sorted: false,
+    totalSteps: payload.totalSteps,
+  });
+}
+
+else if (type === "digit_start") {
+  steps.push({
+    array: [...payload.arr],
+    comparisons: payload.comparisons,
+    swaps: payload.swaps,
+    currentIndices: { current: -1 },
+    currentPhase: `Digit Pass ${payload.digit + 1}`,
+    stepExplanation: `Processing digit position ${payload.digit + 1}.`,
+    sorted: false,
+    totalSteps: payload.totalSteps,
+  });
+}
+
+else if (type === "placing") {
+  steps.push({
+    array: [...payload.arr],
+    comparisons: payload.comparisons,
+    swaps: payload.swaps,
+    currentIndices: { current: payload.current },
+    currentPhase: `Digit Pass ${payload.digitPlace + 1}`,
+    stepExplanation: `Reading digit ${payload.digit} from value ${payload.arr[payload.current]}.`,
+    sorted: false,
+    totalSteps: payload.totalSteps,
+  });
+}
+
+else if (type === "digit_complete") {
+  steps.push({
+    array: [...payload.arr],
+    comparisons: payload.comparisons,
+    swaps: payload.swaps,
+    currentIndices: { current: -1 },
+    currentPhase: `Digit Pass ${payload.digitPlace + 1} Complete`,
+    stepExplanation: "Buckets merged back into array.",
+    sorted: false,
+    totalSteps: payload.totalSteps,
+  });
+}
+
+else if (type === "sign_complete") {
+  steps.push({
+    array: [...payload.arr],
+    comparisons: payload.comparisons,
+    swaps: payload.swaps,
+    currentIndices: { current: -1 },
+    currentPhase: "Signed Merge",
+    stepExplanation: "Negative values are placed before non-negative values after digit sorting.",
+    sorted: false,
+    totalSteps: payload.totalSteps,
+  });
+}
+
+else if (type === "completed") {
+  steps.push({
+    array: [...payload.arr],
+    comparisons: payload.comparisons,
+    swaps: payload.swaps,
+    currentIndices: { current: -1 },
+    currentPhase: "Completed",
+    stepExplanation: "Array fully sorted using Radix Sort.",
+    sorted: true,
+    totalSteps: payload.totalSteps,
+  });
+}
+  }
+  return steps;
+};
+
+const RadixSortVisualizer = () => {
+  const [array, setArray] = useState([]);
+  const replayTimeoutRef = useRef(null);
+  const [visualState, setVisualState] = useState({
+  comparisons: 0,
+  swaps: 0,
+  currentIndices: { current: -1 },
+  currentPhase: "",
+  stepExplanation: "",
+  sorted: false,
+  totalSteps: 0,
+});
+
+  const steps = useMemo(() => {
+    if (array.length === 0) return [];
+    return precomputeSteps(array);
+  }, [array]);
+
+  const onStep = useCallback((step) => {
+    setVisualState({
+      comparisons: step.comparisons,
+      swaps: step.swaps,
+      currentIndices: step.currentIndices,
+      currentPhase: step.currentPhase,
+      stepExplanation: step.stepExplanation,
+      sorted: step.sorted,
+      totalSteps: step.totalSteps,
+    });
+  }, []);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 500 });
+  const currentStepData = steps[engine.currentStep];
+
+  const handleStart = useCallback(() => {
+    if (currentStepData?.sorted) {
+      engine.reset();
+      replayTimeoutRef.current = setTimeout(() => engine.play(), 50);
+    } else {
+      engine.play();
+    }
+  }, [engine, currentStepData]);
+
+  const handleReset = useCallback(() => {
+    clearTimeout(replayTimeoutRef.current);
+    setVisualState({
+      comparisons: 0,
+      swaps: 0,
+      currentIndices: { current: -1 },
+      currentPhase: "",
+      stepExplanation: "",
+      sorted: false,
+      totalSteps: 0,
+    });
+    engine.reset();
+  }, [engine]);
+
+  useEffect(() => {
+    return () => clearTimeout(replayTimeoutRef.current);
+    }, []);
+
+  useVisualizerKeyboard({
+    onStart: handleStart,
+    onReset: handleReset,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+    onTogglePlayPause: engine.isPlaying ? engine.pause : handleStart,
+    speed: engine.speed / 500,
+    sorting: engine.isPlaying,
+    sorted: currentStepData?.sorted || false,
+  });
+
+  const handleExplainStep = () => {
+    const prompt = `I am currently looking at the Radix Sort algorithm, at step ${engine.currentStep} of ${steps.length}.
+Phase: ${visualState.currentPhase}
+Explanation on screen: ${visualState.stepExplanation}
+Input Array State: [${currentStepData?.array?.join(", ") || array.join(", ")}]
+
+Please explain exactly what is happening in this step in detail.`;
+    
+    window.dispatchEvent(
+      new CustomEvent("chatbot-explain", { detail: { prompt } })
+    );
+  };
+
+  return (
+    <main className="container mx-auto px-6 pb-6">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Visualize Radix Sort as it sorts numbers digit by digit from least significant digit to most significant digit.
+      </p>
+
+      <div className="max-w-4xl mx-auto">
+        <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2 mb-2">
+            <div className="flex flex-col gap-1">
+              <ArrayGenerator onGenerate={(newArray) => { setArray(newArray); handleReset(); }} disabled={engine.isPlaying} isPrimary={array.length === 0} />
+              <CustomArrayInput onUseCustomArray={(newArray) => { setArray(newArray); handleReset(); }} disabled={engine.isPlaying} className="w-full" currentArray={array} />
+            </div>
+            <div className="flex flex-col gap-2 justify-between">
+              <button onClick={handleStart} disabled={!array.length} className="w-full disabled:opacity-75 bg-none bg-[#a435f0] hover:bg-[#8f2cd6] px-4 py-2 rounded shadow-sm transition-all duration-300 text-sm sm:text-base text-white">
+                {engine.isPlaying ? "Sorting..." : currentStepData?.sorted ? "Restart" : "Start Radix Sort"}
+              </button>
+              <button onClick={handleReset} disabled={engine.isPlaying} className="w-full bg-none text-[#a435f0] border border-[#a435f0] hover:bg-[#f3e8ff] dark:hover:bg-[#a435f0]/20 px-4 py-2 rounded transition-colors text-sm sm:text-base">
+                Reset All
+              </button>
+            </div>
+          </div>
+
+          {engine.isPlaying && (
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={engine.isPlaying ? engine.pause : handleStart}
+              speed={engine.speed / 500}
+              onSpeedChange={(s) => engine.setSpeed(s * 500)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={engine.reset}
+              onExplainStep={handleExplainStep}
+              disabled={steps.length === 0}
+            />
+          )}
+
+          {!engine.isPlaying && (
+            <div className="flex items-center gap-4 mb-4">
+              <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">Speed:</span>
+              <input type="range" min="0.5" max="5" step="0.5" value={engine.speed / 500} onChange={(e) => engine.setSpeed(parseFloat(e.target.value) * 500)} className="w-24 sm:w-32" />
+              <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">{engine.speed / 500}x</span>
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Digit Operations:</div>
+              <div className="text-2xl">{visualState.comparisons}</div>
+            </div>
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Placements:</div>
+              <div className="text-2xl">{visualState.swaps}</div>
+            </div>
+          </div>
+
+          <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+            <div className="font-medium">Step:</div>
+            <div className="text-xl font-bold">{visualState.totalSteps > 0 ? `${engine.currentStep + 1} / ${steps.length}` : "—"}</div>
+            <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">{engine.currentStep > 0 && !visualState.sorted ? `Processing index ${visualState.currentIndices.current}` : visualState.sorted ? "Sorting complete!" : "Start sorting to see steps"}</div>
+          </div>
+          <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+            <div className="font-medium">Phase:</div>
+            <div className="text-sm sm:text-base text-gray-800 dark:text-gray-200">{visualState.currentPhase || (visualState.sorted ? "Completed" : "Ready to start")}</div>
+            <div className="font-medium mt-2">Explanation:</div>
+            <div className="text-sm text-gray-700 dark:text-gray-300 mt-1">{visualState.stepExplanation || (visualState.sorted ? "Array is fully sorted." : "Run the algorithm to see educational hints.")}</div>
+          </div>
+        </div>
+
+        <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-6">
+          <h2 className="text-lg sm:text-xl font-semibold mb-4">Input Array</h2>
+          {array.length > 0 ? (
+            <div className="flex flex-wrap gap-3 justify-center">
+              {array.map((value, index) => {
+                const isCurrent = index === visualState.currentIndices.current;
+                return (
+                  <div key={index} className="flex flex-col items-center">
+                    <div className={`w-14 h-14 flex items-center justify-center rounded-lg border-2 ${getFontSize(value)} font-bold transition-all duration-300 ${isCurrent ? "bg-yellow-400 border-yellow-600" : "bg-primary/80 border-primary"}`}>
+                      {value}
+                    </div>
+                    <div className="mt-1 text-xs text-gray-600 dark:text-gray-400">{index}</div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="text-center py-8 text-gray-500">{engine.isPlaying ? "Sorting..." : "Generate or enter an array to begin"}</div>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default RadixSortVisualizer;
diff --git a/src/app/visualizer/array/radixsort/codeBlock.jsx b/src/app/visualizer/array/radixsort/codeBlock.jsx
new file mode 100644
index 000000000..cf2bffc0f
--- /dev/null
+++ b/src/app/visualizer/array/radixsort/codeBlock.jsx
@@ -0,0 +1,88 @@
+import React from "react";
+
+const CountingSortCodeBlock = () => {
+  const code = {
+    javascript: `function countingSort(arr) {
+  const max = Math.max(...arr);
+  const count = new Array(max + 1).fill(0);
+  const output = new Array(arr.length);
+
+  arr.forEach((value) => {
+    count[value] += 1;
+  });
+
+  for (let i = 1; i < count.length; i++) {
+    count[i] += count[i - 1];
+  }
+
+  for (let i = arr.length - 1; i >= 0; i--) {
+    const value = arr[i];
+    output[count[value] - 1] = value;
+    count[value] -= 1;
+  }
+
+  return output;
+}
+`,
+    python: `def counting_sort(arr):
+    if not arr:
+        return []
+
+    maximum = max(arr)
+    count = [0] * (maximum + 1)
+    output = [0] * len(arr)
+
+    for value in arr:
+        count[value] += 1
+
+    for i in range(1, len(count)):
+        count[i] += count[i - 1]
+
+    for value in reversed(arr):
+        output[count[value] - 1] = value
+        count[value] -= 1
+
+    return output
+`,
+    java: `public static int[] countingSort(int[] arr) {
+    int max = Arrays.stream(arr).max().orElse(0);
+    int[] count = new int[max + 1];
+    int[] output = new int[arr.length];
+
+    for (int value : arr) {
+        count[value]++;
+    }
+
+    for (int i = 1; i < count.length; i++) {
+        count[i] += count[i - 1];
+    }
+
+    for (int i = arr.length - 1; i >= 0; i--) {
+        int value = arr[i];
+        output[count[value] - 1] = value;
+        count[value]--;
+    }
+
+    return output;
+}
+`,
+  };
+
+  return (
+    <div className="bg-white dark:bg-neutral-950 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 p-6 mb-8">
+      <h2 className="text-2xl font-semibold mb-4">Counting Sort Code Example</h2>
+      <div className="space-y-6">
+        {Object.entries(code).map(([lang, snippet]) => (
+          <div key={lang}>
+            <h3 className="text-lg font-medium mb-2 capitalize">{lang}</h3>
+            <pre className="rounded-lg bg-[#f5f7ff] dark:bg-[#111827] p-4 overflow-x-auto text-xs sm:text-sm text-[#0f172a] dark:text-[#e5e7eb]">
+              <code>{snippet}</code>
+            </pre>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CountingSortCodeBlock;
diff --git a/src/app/visualizer/array/radixsort/content.jsx b/src/app/visualizer/array/radixsort/content.jsx
new file mode 100644
index 000000000..7c4d04a8d
--- /dev/null
+++ b/src/app/visualizer/array/radixsort/content.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const CountingSortContent = () => {
+  return (
+    <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-8">
+      <h2 className="text-2xl font-semibold mb-4">What is Counting Sort?</h2>
+      <p className="mb-4 text-gray-700 dark:text-gray-300">
+        Counting Sort is a non-comparison-based sorting algorithm that works by counting the number of occurrences of each value and using those counts to place elements into the correct position.
+      </p>
+      <ul className="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
+        <li>It is especially efficient when the range of input values is small relative to the number of elements.</li>
+        <li>Counting Sort builds a count array, computes prefix sums, and then places each element into the output array in stable order.</li>
+        <li>It does not perform swaps between arbitrary elements; instead, it moves elements directly to their final sorted positions.</li>
+      </ul>
+    </div>
+  );
+};
+
+export default CountingSortContent;
diff --git a/src/app/visualizer/array/radixsort/quiz.jsx b/src/app/visualizer/array/radixsort/quiz.jsx
new file mode 100644
index 000000000..75019030e
--- /dev/null
+++ b/src/app/visualizer/array/radixsort/quiz.jsx
@@ -0,0 +1,308 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const RadixSortQuiz = () => {
+  const questions = [
+    {
+      question: "What is the main idea behind Radix Sort?",
+      options: [
+        "Compare adjacent elements",
+        "Sort numbers digit by digit",
+        "Divide the array into halves",
+        "Build a binary heap",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Radix Sort processes numbers one digit at a time, usually from least significant digit to most significant digit.",
+    },
+    {
+      question: "Radix Sort is primarily used for:",
+      options: [
+        "Floating-point numbers",
+        "Strings only",
+        "Integers with fixed-length digits",
+        "Graphs",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Radix Sort works best for integers or fixed-length keys.",
+    },
+    {
+      question: "Which sorting algorithm is commonly used internally in Radix Sort?",
+      options: [
+        "Bubble Sort",
+        "Selection Sort",
+        "Counting Sort",
+        "Quick Sort",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Counting Sort is commonly used as the stable sorting algorithm for each digit.",
+    },
+    {
+      question: "Why must the internal sorting algorithm be stable?",
+      options: [
+        "To reduce memory usage",
+        "To preserve the order of equal digits",
+        "To increase comparisons",
+        "To remove duplicates",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "A stable sort preserves the relative order of equal elements, which is essential for Radix Sort.",
+    },
+    {
+      question: "What is the average time complexity of Radix Sort?",
+      options: [
+        "O(n²)",
+        "O(n log n)",
+        "O(d × (n + k))",
+        "O(log n)",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "The complexity depends on the number of digits (d) and the digit range (k).",
+    },
+    {
+      question: "In LSD Radix Sort, processing begins from:",
+      options: [
+        "Most significant digit",
+        "Middle digit",
+        "Least significant digit",
+        "Random digit",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "LSD Radix Sort starts from the least significant digit.",
+    },
+    {
+      question: "What does MSD stand for in Radix Sort?",
+      options: [
+        "Minimum Significant Digit",
+        "Most Significant Digit",
+        "Main Sorted Digit",
+        "Maximum Sorted Digit",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "MSD means Most Significant Digit.",
+    },
+    {
+      question: "Radix Sort is classified as:",
+      options: [
+        "Comparison-based sorting",
+        "Non-comparison sorting",
+        "Recursive sorting",
+        "Tree-based sorting",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Radix Sort does not compare elements directly.",
+    },
+    {
+      question: "Which of the following is an advantage of Radix Sort?",
+      options: [
+        "Always uses O(1) memory",
+        "Very efficient for fixed-length integers",
+        "Works only for sorted arrays",
+        "Requires no auxiliary space",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Radix Sort performs very well for integers with a limited number of digits.",
+    },
+    {
+      question: "Which statement about Radix Sort is true?",
+      options: [
+        "It always performs comparisons",
+        "It is a stable sorting algorithm",
+        "It only works for linked lists",
+        "It has O(n²) complexity",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Radix Sort is stable when its internal sorting algorithm is stable.",
+    },
+    {
+      question: "What does 'd' represent in Radix Sort complexity?",
+      options: [
+        "Number of digits",
+        "Depth of recursion",
+        "Number of comparisons",
+        "Array size",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "d represents the maximum number of digits.",
+    },
+    {
+      question: "What does 'k' represent in O(d × (n + k))?",
+      options: [
+        "Number of recursive calls",
+        "Range of each digit",
+        "Heap size",
+        "Pivot position",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "k is the number of possible digit values (usually 10).",
+    },
+    {
+      question: "Which base is most commonly used in decimal Radix Sort?",
+      options: [
+        "2",
+        "8",
+        "10",
+        "16",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Decimal Radix Sort uses base 10.",
+    },
+    {
+      question: "Radix Sort performs best when:",
+      options: [
+        "Numbers have similar digit lengths",
+        "The array is reverse sorted",
+        "The array contains floating-point values",
+        "The input is recursive",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Radix Sort is efficient when the number of digits is limited.",
+    },
+    {
+      question: "Which statement about Radix Sort is correct?",
+      options: [
+        "It compares every pair of elements",
+        "It sorts numbers digit by digit using a stable sort",
+        "It always uses recursion",
+        "It only works for negative numbers",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Radix Sort processes one digit at a time using a stable sorting algorithm.",
+    },
+    {
+  question: "What is the first step in LSD Radix Sort?",
+  options: [
+    "Sort by the most significant digit",
+    "Sort by the least significant digit",
+    "Find the largest number",
+    "Reverse the array"
+  ],
+  correctAnswer: 1,
+  explanation: "LSD (Least Significant Digit) Radix Sort begins by sorting numbers according to their least significant digit."
+},
+{
+  question: "Which property of Counting Sort makes it suitable for Radix Sort?",
+  options: [
+    "It is recursive",
+    "It is stable",
+    "It uses no extra space",
+    "It is comparison-based"
+  ],
+  correctAnswer: 1,
+  explanation: "Counting Sort is stable, ensuring that the relative order of equal elements is preserved across digit passes."
+},
+{
+  question: "Which type of sorting algorithm is Radix Sort?",
+  options: [
+    "Comparison-based",
+    "Non-comparison-based",
+    "Divide and Conquer",
+    "Greedy"
+  ],
+  correctAnswer: 1,
+  explanation: "Radix Sort does not compare elements directly. Instead, it sorts them based on their individual digits."
+},
+{
+  question: "What happens after each digit is processed in Radix Sort?",
+  options: [
+    "The array becomes completely sorted",
+    "The numbers are grouped according to the processed digit",
+    "The largest element is removed",
+    "The array is divided into halves"
+  ],
+  correctAnswer: 1,
+  explanation: "Each pass groups numbers according to the current digit while preserving the order established in previous passes."
+},
+{
+  question: "Which of the following is a limitation of Radix Sort?",
+  options: [
+    "It cannot sort integers",
+    "It is inefficient when the number of digits is very large",
+    "It is unstable",
+    "It always performs O(n²)"
+  ],
+  correctAnswer: 1,
+  explanation: "Radix Sort becomes less efficient as the number of digits increases because it requires one pass per digit."
+},
+{
+  question: "Can Radix Sort correctly sort duplicate values?",
+  options: [
+    "Yes",
+    "No",
+    "Only if duplicates are adjacent",
+    "Only for positive integers"
+  ],
+  correctAnswer: 0,
+  explanation: "Yes, Radix Sort correctly sorts duplicate values while preserving their relative order when using a stable sorting algorithm."
+},
+{
+  question: "Which data type is NOT naturally suitable for standard Radix Sort?",
+  options: [
+    "Positive integers",
+    "Fixed-length strings",
+    "Floating-point numbers",
+    "Employee IDs"
+  ],
+  correctAnswer: 2,
+  explanation: "Standard Radix Sort is designed for fixed-length keys like integers or strings, not floating-point numbers."
+},
+{
+  question: "How many passes does LSD Radix Sort perform?",
+  options: [
+    "One",
+    "Equal to the number of digits in the largest element",
+    "Equal to the number of elements",
+    "log₂(n)"
+  ],
+  correctAnswer: 1,
+  explanation: "LSD Radix Sort performs one pass for each digit in the largest number."
+},
+{
+  question: "Which of the following is a real-world application of Radix Sort?",
+  options: [
+    "Sorting phone numbers",
+    "Searching graphs",
+    "Finding shortest paths",
+    "Balancing binary trees"
+  ],
+  correctAnswer: 0,
+  explanation: "Radix Sort is commonly used for sorting fixed-length numeric values such as phone numbers, IDs, and ZIP codes."
+},
+{
+  question: "When is Radix Sort generally preferred over comparison-based sorting algorithms?",
+  options: [
+    "When sorting fixed-length integers with a limited digit range",
+    "When sorting floating-point numbers",
+    "When recursion must be avoided",
+    "When memory usage must always be O(1)"
+  ],
+  correctAnswer: 0,
+  explanation: "Radix Sort is especially efficient for sorting fixed-length integers or keys with a small number of digits."
+}
+  ];
+
+  return (
+    <QuizEngine
+      title="Radix Sort Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default RadixSortQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/array/radixsort/quiz/page.jsx b/src/app/visualizer/array/radixsort/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/array/radixsort/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/searching/quiz/SearchingQuizClient.jsx b/src/app/visualizer/array/searching/quiz/SearchingQuizClient.jsx
new file mode 100644
index 000000000..569e31286
--- /dev/null
+++ b/src/app/visualizer/array/searching/quiz/SearchingQuizClient.jsx
@@ -0,0 +1,128 @@
+"use client";
+
+import Link from "next/link";
+import { Search, ArrowLeft, ArrowRight, Play } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function SearchingQuizClient() {
+  const quizzes = [
+    {
+      title: "Linear Search Quiz",
+      description: "Practice Linear Search concepts, key iterations, and array traversals.",
+      href: "/visualizer/array/searching/quiz/linearsearch",
+      filename: "linear_search_quiz.js",
+      themeColor: "from-cyan-500 to-blue-600",
+    },
+    {
+      title: "Binary Search Quiz",
+      description: "Practice Binary Search concepts, search spaces, division steps, and logarithmic complexities.",
+      href: "/visualizer/array/searching/quiz/binarysearch",
+      filename: "binary_search_quiz.js",
+      themeColor: "from-blue-500 to-indigo-600",
+    },
+    {
+      title: "Ternary Search Quiz",
+      description: "Practice Ternary Search concepts, divide-and-conquer strategy, search intervals, and time complexities.",
+      href: "/visualizer/array/ternary-search/quiz",
+      filename: "ternary_search_quiz.js",
+      themeColor: "from-violet-500 to-purple-600",
+    },
+    {
+      title: "Jump Search Quiz",
+      description: "Practice Jump Search concepts, block jumping, linear scanning, and square-root time complexity.",
+      href: "/visualizer/array/jump-search/quiz",
+      filename: "jump_search_quiz.js",
+      themeColor: "from-emerald-500 to-teal-600",
+    },
+    {
+      title: "Fibonacci Search Quiz",
+      description: "Practice Fibonacci Search concepts, Fibonacci sequence, logarithmic search, and time complexity.",
+      href: "/visualizer/array/fibonacci-search/quiz",
+      filename: "fibonacci_search_quiz.js",
+      themeColor: "from-amber-500 to-orange-600",
+    },
+    {
+      title: "Exponential Search Quiz",
+      description:
+        "Practice Exponential Search concepts, range expansion, Binary Search integration, and time complexities.",
+      href: "/visualizer/array/exponential-search/quiz",
+      filename: "exponential_search_quiz.js",
+      themeColor: "from-orange-500 to-red-600",
+    },
+    {
+      title: "Interpolation Search Quiz",
+      description:
+        "Practice Interpolation Search concepts, interpolation formula, complexity, and applications.",
+      href: "/visualizer/array/interpolation-search/quiz",
+      filename: "interpolation_search_quiz.js",
+      themeColor: "from-cyan-500 to-blue-600",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-[var(--udemy-text)] dark:text-white transition-colors duration-300 pb-20">
+      
+      {/* Header / Hero */}
+      <section className="relative pt-6 pb-4">
+        <div className="max-w-[1100px] mx-auto px-4">
+          <Link href="/visualizer/quiz">
+            <button className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] dark:text-[var(--color-primary-light)] hover:opacity-85 transition-opacity mb-3">
+              <ArrowLeft size={16} />
+              <span>Back to all quizzes</span>
+            </button>
+          </Link>
+          <h1 className="text-2xl md:text-3xl font-black mb-2">
+            Searching Quiz Portal
+          </h1>
+          <p className="text-[14px] text-surface-600 dark:text-surface-400 font-medium">
+            Test your understanding of search algorithms. Select a specific challenge below.
+          </p>
+        </div>
+      </section>
+
+      {/* Grid of Sub-quizzes */}
+      <div className="max-w-4xl mx-auto px-4 mt-8">
+        <div className="grid md:grid-cols-2 gap-6 items-stretch">
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4, delay: index * 0.1, ease: [0.22, 1, 0.36, 1] }}
+              whileHover={{ y: -6, scale: 1.015 }}
+              whileTap={{ scale: 0.985 }}
+              className="group flex flex-col h-full rounded-2xl border border-cyan-500/20 dark:border-cyan-500/30 bg-white dark:bg-[#1a1a1a] overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
+            >
+              {/* Terminal command execution style top bar */}
+              <div className="flex items-center justify-between px-4 py-2.5 bg-cyan-500/10 dark:bg-cyan-500/20 border-b border-cyan-500/20 dark:border-cyan-500/30">
+                <div className="flex items-center gap-1.5 font-mono text-[11px] text-surface-600 dark:text-surface-300">
+                  <span className="text-violet-500 font-bold">$</span>
+                  <span>node {quiz.filename}</span>
+                </div>
+              </div>
+
+              {/* Main Card Content */}
+              <div className="p-6 flex-1 flex flex-col justify-between">
+                <div>
+                  <h2 className="text-[20px] font-extrabold text-surface-900 dark:text-white group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors mb-2">
+                    {quiz.title}
+                  </h2>
+                  <p className="text-[14px] text-surface-600 dark:text-surface-300 leading-relaxed mb-6">
+                    {quiz.description}
+                  </p>
+                </div>
+
+                <Link href={quiz.href} className="block mt-auto w-full">
+                  <button className="w-full h-11 rounded-xl bg-cyan-600 hover:bg-cyan-700 dark:bg-cyan-500 dark:hover:bg-cyan-600 text-white font-bold text-[14px] flex items-center justify-center gap-2 shadow-sm hover:shadow-md transition-all">
+                    <span>Start Quiz</span>
+                    <Play size={14} className="fill-current" />
+                  </button>
+                </Link>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/searching/quiz/binarysearch/page.jsx b/src/app/visualizer/array/searching/quiz/binarysearch/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/array/searching/quiz/binarysearch/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/searching/quiz/binarysearch/quiz.jsx b/src/app/visualizer/array/searching/quiz/binarysearch/quiz.jsx
new file mode 100644
index 000000000..aa0083ba2
--- /dev/null
+++ b/src/app/visualizer/array/searching/quiz/binarysearch/quiz.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const BinarySearchQuiz = () => {
+  const questions = [
+    {
+      question: "What is the primary requirement for binary search to work?",
+      options: [
+        "The list must be unsorted",
+        "The list must be sorted",
+        "The list must contain only numbers",
+        "The list must be small in size"
+      ],
+      correctAnswer: 1,
+      explanation: "Binary search requires the list to be sorted beforehand because it relies on comparing the target value to the middle element to determine which half of the list to search next."
+    },
+    {
+      question: "What is the time complexity of binary search in the worst case?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 1,
+      explanation: "In the worst case (when the target is not present), binary search has a time complexity of O(log n) because it halves the search space with each comparison."
+    },
+    {
+      question: "In the array [1, 3, 5, 7, 9, 11, 13], how many comparisons are needed to find the number 5?",
+      options: [
+        "1",
+        "2",
+        "3",
+        "4"
+      ],
+      correctAnswer: 2,
+      explanation: "First comparison: middle is 7 (too high). Second comparison: new middle is 3 (too low). Third comparison: finds 5."
+    },
+    {
+      question: "What is the best-case scenario for binary search?",
+      options: [
+        "Target is at the beginning of the list",
+        "Target is at the end of the list",
+        "Target is the middle element",
+        "Target is not in the list"
+      ],
+      correctAnswer: 2,
+      explanation: "The best case occurs when the target is the middle element of the array, requiring only one comparison (O(1))."
+    },
+    {
+      question: "What would binary search return if the target value is not in the list?",
+      options: [
+        "The first element",
+        "The last element",
+        "An error message",
+        "A 'not found' indication"
+      ],
+      correctAnswer: 3,
+      explanation: "When the target isn't found, binary search typically returns a special value (like -1 or 'not found') to indicate this."
+    },
+    {
+  question: "Why is binary search faster than linear search for large sorted arrays?",
+  options: [
+    "It checks every element",
+    "It divides the search space in half each step",
+    "It uses recursion only",
+    "It sorts the array during searching"
+  ],
+  correctAnswer: 1,
+  explanation: "Binary search halves the remaining search space after every comparison, resulting in O(log n) time complexity."
+},
+{
+  question: "Which data structure is most suitable for binary search?",
+  options: [
+    "Unsorted Array",
+    "Sorted Array",
+    "Queue",
+    "Graph"
+  ],
+  correctAnswer: 1,
+  explanation: "Binary search requires the data to be sorted so that half of the search space can be discarded after each comparison."
+},
+{
+  question: "If a sorted array has 16 elements, what is the maximum number of comparisons needed in binary search?",
+  options: [
+    "4",
+    "8",
+    "16",
+    "5"
+  ],
+  correctAnswer: 0,
+  explanation: "Since log₂(16) = 4, binary search requires at most 4 comparisons in the ideal implementation."
+},
+{
+  question: "What happens if binary search is applied to an unsorted array?",
+  options: [
+    "It always works correctly",
+    "It may return incorrect results",
+    "It sorts the array automatically",
+    "It becomes O(1)"
+  ],
+  correctAnswer: 1,
+  explanation: "Binary search assumes the array is sorted. On unsorted data, the search decisions become invalid."
+},
+{
+  question: "Which algorithm generally performs better on large sorted datasets?",
+  options: [
+    "Linear Search",
+    "Binary Search",
+    "Bubble Sort",
+    "Selection Sort"
+  ],
+  correctAnswer: 1,
+  explanation: "Binary Search has O(log n) complexity, making it much faster than Linear Search on large sorted datasets."
+}
+  ];
+
+  return <QuizEngine title="Binary Search Quiz Challenge" questions={questions} />;
+};
+
+export default BinarySearchQuiz;
diff --git a/src/app/visualizer/array/searching/quiz/linearsearch/page.jsx b/src/app/visualizer/array/searching/quiz/linearsearch/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/array/searching/quiz/linearsearch/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/searching/quiz/linearsearch/quiz.jsx b/src/app/visualizer/array/searching/quiz/linearsearch/quiz.jsx
new file mode 100644
index 000000000..744a497d4
--- /dev/null
+++ b/src/app/visualizer/array/searching/quiz/linearsearch/quiz.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const LinearSearchQuiz = () => {
+  const questions = [
+    {
+      question: "What is the basic principle of linear search?",
+      options: [
+        "Dividing the list in half repeatedly",
+        "Checking each element one by one from the start",
+        "Sorting the list first then searching",
+        "Starting from the middle of the list"
+      ],
+      correctAnswer: 1,
+      explanation: "Linear search works by checking each element sequentially from the beginning until it finds the target value."
+    },
+    {
+      question: "What is the time complexity of linear search in the worst case?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation: "In the worst case (when the target is last or not present), linear search checks all n elements, resulting in O(n) complexity."
+    },
+    {
+      question: "In the array [5, 3, 8, 1, 9], how many comparisons are needed to find the number 1?",
+      options: [
+        "1",
+        "2",
+        "3",
+        "4"
+      ],
+      correctAnswer: 3,
+      explanation: "The search checks 5 (1st), 3 (2nd), 8 (3rd), and finally finds 1 on the 4th comparison."
+    },
+    {
+      question: "When would linear search perform at its best?",
+      options: [
+        "When the target is at the end of the list",
+        "When the target is at the middle of the list",
+        "When the target is at the beginning of the list",
+        "When the list is sorted"
+      ],
+      correctAnswer: 2,
+      explanation: "Linear search performs best (O(1)) when the target is the first element, as it only needs one comparison."
+    },
+    {
+      question: "What would a linear search algorithm return if the target value is not in the list?",
+      options: [
+        "The first element",
+        "The last element",
+        "An error message",
+        "A 'not found' indication"
+      ],
+      correctAnswer: 3,
+      explanation: "When the target isn't found, linear search typically returns a special value (like -1 or 'not found') to indicate this."
+    },
+    {
+  question: "Can linear search be used on an unsorted array?",
+  options: [
+    "Yes",
+    "No",
+    "Only if the array has unique elements",
+    "Only for integer arrays"
+  ],
+  correctAnswer: 0,
+  explanation: "Linear search works on both sorted and unsorted arrays because it checks each element sequentially."
+},
+{
+  question: "Which of the following is an advantage of linear search?",
+  options: [
+    "Requires the array to be sorted",
+    "Simple to implement and works on unsorted data",
+    "Always runs in O(log n)",
+    "Uses recursion by default"
+  ],
+  correctAnswer: 1,
+  explanation: "Linear search is easy to implement and does not require the data to be sorted."
+},
+{
+  question: "What is the average time complexity of linear search?",
+  options: [
+    "O(1)",
+    "O(log n)",
+    "O(n)",
+    "O(n log n)"
+  ],
+  correctAnswer: 2,
+  explanation: "On average, linear search checks about half of the elements before finding the target, giving O(n) complexity."
+},
+{
+  question: "If an array contains duplicate values, what happens during a standard linear search?",
+  options: [
+    "It returns the last occurrence",
+    "It returns the first matching occurrence",
+    "It returns all occurrences automatically",
+    "It throws an error"
+  ],
+  correctAnswer: 1,
+  explanation: "A standard linear search stops as soon as it finds the first matching element."
+},
+{
+  question: "Which scenario is most suitable for using linear search?",
+  options: [
+    "A very large sorted dataset",
+    "A small or unsorted dataset",
+    "A balanced binary search tree",
+    "A hash table"
+  ],
+  correctAnswer: 1,
+  explanation: "Linear search is ideal for small datasets or when the data is unsorted and sorting isn't worthwhile."
+}
+  ];
+
+  return <QuizEngine title="Linear Search Quiz Challenge" questions={questions} />;
+};
+
+export default LinearSearchQuiz;
diff --git a/src/app/visualizer/array/searching/quiz/page.jsx b/src/app/visualizer/array/searching/quiz/page.jsx
new file mode 100644
index 000000000..7b7a8e88f
--- /dev/null
+++ b/src/app/visualizer/array/searching/quiz/page.jsx
@@ -0,0 +1,5 @@
+import SearchingQuizClient from "./SearchingQuizClient";
+
+export default function Page() {
+  return <SearchingQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/selectionsort/AlgorithmClient.jsx b/src/app/visualizer/array/selectionsort/AlgorithmClient.jsx
new file mode 100644
index 000000000..b6df69d8c
--- /dev/null
+++ b/src/app/visualizer/array/selectionsort/AlgorithmClient.jsx
@@ -0,0 +1,38 @@
+import Animation from "@/app/visualizer/array/selectionsort/animation";
+import Content from "@/app/visualizer/array/selectionsort/content";
+import Code from "@/app/visualizer/array/selectionsort/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import TrackVisit from "@/app/components/ui/TrackVisit";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+export default function Page() {
+  return (
+    <>
+      <TrackVisit name="Selection Sort" path="/visualizer/array/selectionsort" category="Sorting" />
+      <VisualizerPageLayout
+        paths={createVisualizerPaths("Array", "Selection Sort")}
+        title="Selection Sort"
+        animation={<Animation />}
+        content={<Content />}
+        code={<Code />}
+        exploreOther={
+          <ExploreOther
+            title="Explore Sorting Algorithms"
+            links={[
+              { text: "Bubble Sort", url: "/visualizer/array/bubblesort" },
+              { text: "Insertion Sort", url: "/visualizer/array/insertionsort" },
+              { text: "Merge Sort", url: "/visualizer/array/mergesort" },
+              { text: "Quick Sort", url: "/visualizer/array/quicksort" },
+              { text: "Comparison Mode", url: "/visualizer/array/comparison" },
+              { text: "Counting Sort", url: "/visualizer/array/countingsort" },
+              { text: "Heap Sort", url: "/visualizer/array/heapsort" },
+            ]}
+          />
+        }
+      />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/selectionsort/animation.jsx b/src/app/visualizer/array/selectionsort/animation.jsx
new file mode 100644
index 000000000..85224aa02
--- /dev/null
+++ b/src/app/visualizer/array/selectionsort/animation.jsx
@@ -0,0 +1,335 @@
+"use client";
+import React, { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import { gsap } from "gsap";
+import ArrayGenerator from "@/app/components/ui/randomArray";
+import CustomArrayInput from "@/app/components/ui/customArrayInput";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import ChallengeModePanel, {
+  createOptions,
+  useSortingChallenge,
+} from "@/app/visualizer/array/components/ChallengeMode";
+import { selectionSortGenerator } from "@/features/algorithms/array/selectionSortLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+  if (len <= 2) return "text-lg";
+  if (len === 3) return "text-sm";
+  return "text-xs";
+};
+
+const createSelectionMinimumQuestion = (arr, minIndex, passIndex) => {
+  const correctLabel = `${arr[minIndex]} (index ${minIndex})`;
+  const options = createOptions(correctLabel, [
+    passIndex !== minIndex ? `${arr[passIndex]} (index ${passIndex})` : null,
+    minIndex + 1 < arr.length ? `${arr[minIndex + 1]} (index ${minIndex + 1})` : null,
+    passIndex + 1 < arr.length ? `${arr[passIndex + 1]} (index ${passIndex + 1})` : null,
+  ]);
+
+  return {
+    prompt: "Which element is currently minimum for this pass?",
+    options,
+    correctOptionId: "correct",
+    explanation: `${arr[minIndex]} is the minimum from index ${passIndex} to the end, so it will be placed at index ${passIndex}.`,
+  };
+};
+
+const SelectionSortVisualizer = () => {
+    const [array, setArray] = useState([]);
+    const [challengeEnabled, setChallengeEnabled] = useState(false);
+    const replayTimeoutRef = useRef(null);
+    const [visualState, setVisualState] = useState({
+        comparisons: 0,
+        swaps: 0,
+        totalSteps: 0,
+        currentPhase: "",
+        stepExplanation: "",
+        currentIndices: { i: -1, j: -1, min: -1 }
+    });
+
+    const {
+      activeQuestion,
+      askChallenge,
+      resetChallengeStats,
+      stats: challengeStats,
+      submitAnswer,
+    } = useSortingChallenge(challengeEnabled);
+
+    const steps = useMemo(() => {
+        if (array.length === 0) return [];
+        return Array.from(selectionSortGenerator(array)).map(frame => ({ type: frame.type, ...frame.payload }));
+    }, [array]);
+
+    const onStep = useCallback((step) => {
+        setVisualState(prev => {
+            let next = { ...prev };
+            
+            if (step.type === 'init') {
+                next.totalSteps = step.totalSteps;
+            } else if (step.type === 'phase_start') {
+                next.currentPhase = `Pass ${step.pass} of ${step.totalPasses}`;
+                next.stepExplanation = `Selecting minimum element from the remaining array starting at index ${step.i}.`;
+                next.currentIndices = { i: step.i, j: step.i + 1, min: step.minIndex };
+            } else if (step.type === 'comparing') {
+                next.currentIndices = { ...next.currentIndices, j: step.j, min: step.minIndex };
+                next.comparisons = step.comparisons;
+                next.stepExplanation = `Comparing ${step.arr[step.j]} at index ${step.j} with current minimum ${step.arr[step.minIndex]} at index ${step.minIndex}.`;
+            } else if (step.type === 'new_min') {
+                next.currentIndices = { ...next.currentIndices, min: step.minIndex };
+                next.stepExplanation = `Found new minimum ${step.arr[step.j]} at index ${step.j}.`;
+            } else if (step.type === 'swap_needed') {
+                next.stepExplanation = `Swapping minimum ${step.arr[step.minIndex]} into position ${step.i}.`;
+            } else if (step.type === 'swapped') {
+                next.swaps = step.swaps;
+            } else if (step.type === 'no_swap') {
+                next.stepExplanation = `Index ${step.i} already contains the minimum element ${step.arr[step.minIndex]}. No swap needed.`;
+            } else if (step.type === 'completed') {
+                next.currentPhase = "Completed";
+                next.stepExplanation = "Array is fully sorted.";
+                next.currentIndices = { i: -1, j: -1, min: -1 };
+            }
+            return next;
+        });
+
+        if (step.type === 'swapped') {
+            const bars = document.querySelectorAll(".array-bar");
+            const barI = bars[step.i];
+            const barMin = bars[step.minIndex];
+            if (barI && barMin) {
+                gsap.to([barI, barMin], { opacity: 0, scale: 0.5, duration: 0.2, onComplete: () => { gsap.to([barI, barMin], { opacity: 1, scale: 1, duration: 0.2 }); } });
+            }
+        }
+    }, []);
+
+    const engine = useAnimationEngine({ steps, onStep, initialSpeed: 1000 });
+    const currentStepData = steps[engine.currentStep];
+    const displayArray = currentStepData?.arr || array;
+    const sorted = currentStepData?.type === 'completed';
+    const isSorting = engine.isPlaying || (engine.currentStep > 0 && !sorted);
+
+    const handleGenerateRandomArray = (newArray) => {
+      setArray(newArray);
+      engine.reset();
+      resetStats();
+    };
+  
+    const handleCustomArray = (newArray) => {
+      setArray(newArray);
+      engine.reset();
+      resetStats();
+    };
+  
+    const resetStats = () => {
+      setVisualState({ comparisons: 0, swaps: 0, totalSteps: 0, currentPhase: "", stepExplanation: "", currentIndices: { i: -1, j: -1, min: -1 } });
+      resetChallengeStats();
+    };
+
+    const startSelectionSort = () => {
+        if (!array.length) return;
+        if (sorted) {
+            engine.reset();
+            replayTimeoutRef.current = setTimeout(() => engine.play(), 50);
+        } else {
+            engine.play();
+        }
+    };
+
+    const reset = () => {
+      clearTimeout(replayTimeoutRef.current);
+      engine.reset();
+      setArray([]);
+      resetStats();
+    };
+    useEffect(() => {
+    return () => clearTimeout(replayTimeoutRef.current);
+    }, []);
+  
+    useVisualizerKeyboard({
+      onStart: startSelectionSort,
+      onReset: reset,
+      onSpeedChange: (s) => engine.setSpeed(s * 1000),
+      onTogglePlayPause: engine.isPlaying ? engine.pause : startSelectionSort,
+      speed: engine.speed / 1000,
+      sorting: engine.isPlaying,
+      sorted: sorted,
+    });
+  
+    const handleExplainStep = () => {
+      const prompt = `I am currently looking at the Selection Sort algorithm, at step ${engine.currentStep} of ${visualState.totalSteps}.
+Phase: ${visualState.currentPhase}
+Explanation on screen: ${visualState.stepExplanation}
+Current Array State: [${displayArray.join(", ")}]
+Currently at: outer index i = ${visualState.currentIndices.i}, inner index j = ${visualState.currentIndices.j}
+Current minimum index: ${visualState.currentIndices.min}
+
+Please explain exactly what is happening in this step in detail.`;
+      
+      window.dispatchEvent(
+        new CustomEvent("chatbot-explain", { detail: { prompt } })
+      );
+    };
+
+    return (
+      <main className="container mx-auto px-6 py-6">
+        <p className="text-lg max-w-4xl mx-auto text-center text-gray-600 dark:text-gray-400 mb-8">
+            Visualize Selection Sort as it repeatedly selects the smallest
+            element and swaps it to its correct position in the array.
+          </p>
+
+          <div className="max-w-4xl mx-auto">
+            <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md mb-8 border border-gray-200 dark:border-gray-700">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                <div className="space-y-2">
+                  <ArrayGenerator
+                    onGenerate={handleGenerateRandomArray}
+                    disabled={isSorting}
+                    isPrimary={array.length === 0}
+                    defaultSize={10}
+                    minValue={5}
+                    maxValue={100}
+                  />
+                  <CustomArrayInput
+                    onUseCustomArray={handleCustomArray}
+                    disabled={isSorting}
+                    placeholder="e.g. 5, 3, 8, 1, 2"
+                    currentArray={array}
+                  />
+                </div>
+                <div className="flex flex-col">
+                  <button
+                    onClick={startSelectionSort}
+                    disabled={!array.length}
+                    className="w-full bg-[#a435f0] hover:bg-[#8f2cd6] text-white px-4 py-2 rounded disabled:opacity-50 transition-colors"
+                  >
+                    {engine.isPlaying ? "Sorting..." : sorted ? "Restart Selection Sort" : "Start Selection Sort"}
+                  </button>
+                  <button
+                    onClick={reset}
+                    disabled={engine.isPlaying}
+                    className="w-full bg-transparent border border-[#a435f0] text-[#a435f0] hover:bg-[#f3e8ff] dark:hover:bg-[#a435f0]/20 mt-4 px-4 py-2 rounded transition-colors"
+                  >
+                    Reset All
+                  </button>
+                </div>
+              </div>
+
+              {engine.isPlaying && (
+                <PlaybackControls
+                  isPlaying={engine.isPlaying}
+                  onPlayPause={engine.isPlaying ? engine.pause : startSelectionSort}
+                  speed={engine.speed / 1000}
+                  onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+                  onStepForward={engine.stepForward}
+                  onStepBackward={engine.stepBackward}
+                  onReset={engine.reset}
+                  onExplainStep={handleExplainStep}
+                  disabled={steps.length === 0}
+                  progressText={`${Math.max(engine.currentStep + 1, 0)} / ${steps.length}`}
+                />
+              )}
+
+              {!engine.isPlaying && (
+                <div className="flex items-center gap-4 mb-4">
+                  <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">Speed:</span>
+                  <input
+                    type="range"
+                    min="0.5"
+                    max="5"
+                    step="0.5"
+                    value={engine.speed / 1000}
+                    onChange={(e) => engine.setSpeed(parseFloat(e.target.value) * 1000)}
+                    className="w-24 sm:w-32"
+                    disabled={isSorting}
+                  />
+                  <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">{engine.speed / 1000}x</span>
+                </div>
+              )}
+
+              <ChallengeModePanel
+                activeQuestion={activeQuestion}
+                disabled={isSorting}
+                enabled={challengeEnabled}
+                onEnabledChange={setChallengeEnabled}
+                onResetStats={resetChallengeStats}
+                onSubmitAnswer={submitAnswer}
+                stats={challengeStats}
+              />
+
+              <div className="grid grid-cols-2 gap-4 text-sm">
+                <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+                  <div className="font-medium">Comparisons:</div>
+                  <div className="text-2xl">{visualState.comparisons}</div>
+                </div>
+                <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+                  <div className="font-medium">Swaps:</div>
+                  <div className="text-2xl">{visualState.swaps}</div>
+                </div>
+              </div>
+              <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+                <div className="font-medium">Step:</div>
+                <div className="text-xl font-bold">{visualState.totalSteps > 0 ? `${currentStepData?.step || 0} / ${visualState.totalSteps}` : '—'}</div>
+                <div className="text-xs text-gray-500 mt-1">{engine.currentStep > 0 && !sorted ? `Finding minimum from index ${visualState.currentIndices.i}` : sorted ? 'Sorting complete!' : 'Start sorting to see steps'}</div>
+              </div>
+              <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+                <div className="font-medium">Phase:</div>
+                <div className="text-sm sm:text-base text-gray-800 dark:text-gray-200">
+                  {visualState.currentPhase || (sorted ? 'Completed' : 'Ready to start')}
+                </div>
+                <div className="font-medium mt-2">Explanation:</div>
+                <div className="text-sm text-gray-700 dark:text-gray-300 mt-1">
+                  {visualState.stepExplanation || (sorted ? 'Array is fully sorted.' : 'Run the algorithm to see educational hints.')}
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
+              <h2 className="text-xl font-semibold mb-4">
+                Array Visualization
+              </h2>
+              {displayArray.length > 0 ? (
+                <div className="flex flex-wrap gap-4 justify-center">
+                  {displayArray.map((value, index) => {
+                    const isCurrent = index === visualState.currentIndices.j;
+                    const isMin = index === visualState.currentIndices.min;
+                    const isSorted = sorted || index < visualState.currentIndices.i;
+
+                    return (
+                      <div key={index} className="flex flex-col items-center">
+                        <div
+                          className={`array-bar w-16 h-16 flex items-center justify-center rounded-lg border-2 transition-all duration-300 ${getFontSize(value)} font-medium
+                            ${
+                              isCurrent
+                                ? "bg-yellow-400 dark:bg-yellow-600 border-yellow-600 dark:border-yellow-400"
+                                : isMin
+                                ? "bg-pink-400 dark:bg-pink-600 border-pink-600 dark:border-pink-400"
+                                : isSorted
+                                ? "bg-green-400 dark:bg-green-600 border-green-600 dark:border-green-400"
+                                : "bg-primary/80 dark:bg-primary border-primary dark:border-primary/80"
+                            }`}
+                        >
+                          {value}
+                        </div>
+                        <div className="mt-1 text-xs text-gray-600 dark:text-gray-400">
+                          {index === visualState.currentIndices.i && "i"}
+                          {index === visualState.currentIndices.j && "j"}
+                          {index === visualState.currentIndices.min && "min"}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              ) : (
+                <div className="text-center py-8 text-gray-500">
+                  {engine.isPlaying
+                    ? "Sorting..."
+                    : "Generate or enter an array to begin"}
+                </div>
+              )}
+            </div>
+          </div>
+        </main>
+    );
+  };
+  
+  export default SelectionSortVisualizer;
diff --git a/src/app/visualizer/array/selectionsort/codeBlock.jsx b/src/app/visualizer/array/selectionsort/codeBlock.jsx
new file mode 100644
index 000000000..c835cabf6
--- /dev/null
+++ b/src/app/visualizer/array/selectionsort/codeBlock.jsx
@@ -0,0 +1,155 @@
+'use client';
+
+import CodeBlock from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for Selection Sort ───────────────────────────────
+const codeExamples = {
+  javascript: `// Selection Sort in JavaScript
+function selectionSort(arr){
+    const n=arr.length;
+    for(let i=0;i<n-1;i++){
+        let minIndex=i;
+        for(let j=i+1;j<n;j++){
+            if(arr[j]<arr[minIndex]){
+                minIndex=j;
+            }
+        }
+        [arr[i],arr[minIndex]]=[arr[minIndex],arr[i]];
+    }
+    return arr;
+}
+// Usage example
+const numbers=[64,25,12,22,11];
+console.log("Before sorting:",numbers);
+const result=selectionSort([...numbers]);
+console.log("After sorting:",result);`,
+  python: `# Selection Sort in Python
+def selection_sort(arr):
+    n=len(arr)
+    for i in range(n-1):
+        min_index=i
+        for j in range(i+1,n):
+            if arr[j]<arr[min_index]:
+                min_index=j
+        arr[i],arr[min_index]=arr[min_index],arr[i]
+    return arr
+
+numbers=[64,25,12,22,11]
+print("Before sorting:",numbers)
+result=selection_sort(numbers.copy())
+print("After sorting:",result)`,
+  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++){
+            int minIndex=i;
+            for(int j=i+1;j<n;j++){
+                if(arr[j]<arr[minIndex]){
+                    minIndex=j;
+                }
+            }
+            int temp=arr[minIndex];
+            arr[minIndex]=arr[i];
+            arr[i]=temp;
+        }
+    }
+    public static void main(String[] args){
+        int[] numbers={64,25,12,22,11};
+        System.out.print("Before sorting: ");
+        for(int num:numbers){
+            System.out.print(num+" ");
+        }
+        selectionSort(numbers);
+        System.out.print("\\nAfter sorting: ");
+        for(int num:numbers){
+            System.out.print(num+" ");
+        }
+    }
+}`,
+
+  c: `// Selection Sort in C
+#include<stdio.h>
+void selectionSort(int arr[],int n){
+    for(int i=0;i<n-1;i++){
+        int minIndex=i;
+        for(int j=i+1;j<n;j++){
+            if(arr[j]<arr[minIndex]){
+                minIndex=j;
+            }
+        }
+        int temp=arr[minIndex];
+        arr[minIndex]=arr[i];
+        arr[i]=temp;
+    }
+}
+void printArray(int arr[],int size){
+    for(int i=0;i<size;i++){
+        printf("%d ",arr[i]);
+    }
+}
+int main(){
+    int numbers[]={64,25,12,22,11};
+    int size=sizeof(numbers)/sizeof(numbers[0]);
+    printf("Before sorting: ");
+    printArray(numbers,size);
+    selectionSort(numbers,size);
+    printf("\\nAfter sorting: ");
+    printArray(numbers,size);
+
+    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++){
+        int minIndex=i;
+        for(int j=i+1;j<n;j++){
+            if(arr[j]<arr[minIndex]){
+                minIndex=j;
+            }
+        }
+        swap(arr[i],arr[minIndex]);
+    }
+}
+void printArray(vector<int>& arr){
+    for(int num:arr){
+        cout<<num<<" ";
+    }
+}
+int main(){
+    vector<int> numbers={64,25,12,22,11};
+    cout<<"Before sorting: ";
+    printArray(numbers);
+    selectionSort(numbers);
+    cout<<"\\nAfter sorting: ";
+    printArray(numbers);
+    return 0;
+}`
+};
+
+// ─── Filenames ──────────────────────────────────────
+const fileNames = {
+    javascript:'selectionSort.js',
+    python:'selection_sort.py',
+    java:'SelectionSort.java',
+    c:'selection_sort.c',
+    cpp:'selection_sort.cpp'
+};
+
+// ─── Component ──────────────────────────────────────
+const SelectionSortCode = () => (
+    <CodeBlock
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default SelectionSortCode;
\ No newline at end of file
diff --git a/src/app/visualizer/array/selectionsort/content.jsx b/src/app/visualizer/array/selectionsort/content.jsx
new file mode 100644
index 000000000..2e20d9298
--- /dev/null
+++ b/src/app/visualizer/array/selectionsort/content.jsx
@@ -0,0 +1,284 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState('light');
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraph = [
+    `Selection Sort is an in-place comparison sorting algorithm that divides the input list into two parts: a sorted sublist which is built up from left to right, and a remaining unsorted sublist. It repeatedly selects the smallest (or largest) element from the unsorted portion and moves it to the sorted portion.`,
+    `The quadratic time complexity occurs because it performs O(n) comparisons for each of the O(n) elements.`,
+    `Selection Sort is an in-place algorithm, requiring only O(1) additional space for temporary variables during swaps.`,
+    `Selection Sort is primarily used for educational purposes to introduce sorting concepts. In practice, it's outperformed by more advanced algorithms like QuickSort and MergeSort, but can be useful when memory writes are expensive (since it makes only O(n) swaps).`,
+  ];
+
+  const working = [
+    {
+      pass: "First Pass:",
+      points: [
+        "Find the minimum in [64, 25, 12, 22, 11] → 11 at index 4",
+        "Swap with first element → [11, 25, 12, 22, 64]",
+      ],
+    },
+    {
+      pass: "Second Pass:",
+      points: [
+        "Find minimum in [25, 12, 22, 64] → 12 at index 2",
+        "Swap with first element → [11, 12, 25, 22, 64]",
+      ],
+    },
+    {
+      pass: "Third Pass:",
+      points: [
+        "Find minimum in [25, 22, 64] → 22 at index 2",
+        "Swap with first element → [11, 12, 22, 25, 64]",
+      ],
+    },
+    {
+      pass: "Fourth Pass:",
+      points: [
+        "Find minimum in [25, 64] → 25 at index 0",
+        "No swap needed → [11, 12, 22, 25, 64]",
+      ],
+    },
+    { pass: "Result:", points: ["[11, 12, 22, 25, 64]"] },
+  ];
+
+  const algorithm = [
+    { points: "Set the first element as minimum" },
+    {
+      points: "Compare minimum with the second element:",
+      subpoints: ["If second element is smaller, set it as new minimum"],
+    },
+    { points: "Continue until last element is reached" },
+    { points: "Swap minimum with first element" },
+    { points: "Repeat for remaining unsorted portion" },
+  ];
+
+  const timeComplexity = [
+    { points: "Best Case: ", subpoints: ["O(n²)"] },
+    { points: "Average Case: ", subpoints: ["O(n²)"] },
+    { points: "Worst Case: ", subpoints: ["O(n²)"] },
+  ];
+
+  const Advantages = [
+    { points: "Simple to understand and implement" },
+    { points: "Performs well on small lists" },
+    { points: "Minimal memory usage (in-place sorting)" },
+    { points: "Only O(n) swaps required (better than Bubble Sort)" },
+  ];
+
+  const Disadvantages = [
+    { points: "Poor performance on large lists (quadratic time complexity)" },
+    { points: "Not stable (may change relative order of equal elements)" },
+    { points: "Less efficient than Insertion Sort for nearly sorted data" },
+    { points: "Always performs O(n²) comparisons regardless of input" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is Selection Sort */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is Selection Sort?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraph[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* How Does It Work */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            How Does It Work?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Consider this unsorted array: [64, 25, 12, 22, 11]
+            </p>
+
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {working.map((items, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-semibold">{items.pass}</span>
+                  {items.points && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500 font-normal">
+                      {items.points.map((subitems, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitems}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Algorithm Steps */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Algorithm Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {algorithm.map((items, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {items.points}
+                  {items.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {items.subpoints.map((subitems, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitems}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {timeComplexity.map((items, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                    {items.points}
+                  </span>
+                  <span className="ml-2">{items.subpoints}</span>
+                </li>
+              ))}
+            </ul>
+
+            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+              {paragraph[1]}
+            </p>
+
+            <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => n * n}
+                averageCase={(n) => n * n}
+                worstCase={(n) => n * n}
+                maxN={25}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Space Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Space Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraph[2]}
+            </p>
+          </div>
+        </section>
+
+        {/* Advantages */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Advantages
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {Advantages.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Disadvantages */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Disadvantages
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {Disadvantages.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraph[3]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/array/selectionsort/quiz.jsx b/src/app/visualizer/array/selectionsort/quiz.jsx
new file mode 100644
index 000000000..37ec8bec6
--- /dev/null
+++ b/src/app/visualizer/array/selectionsort/quiz.jsx
@@ -0,0 +1,254 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const SelectionSortQuiz = () => {
+  const questions = [
+    {
+      question: "What is the basic principle of Selection Sort?",
+      options: [
+        "Dividing the list into smaller sublists",
+        "Repeatedly finding the minimum element and swapping it with the current position",
+        "Comparing adjacent elements and swapping if they're in the wrong order",
+        "Merging two sorted lists into one"
+      ],
+      correctAnswer: 1,
+      explanation: "Selection Sort works by repeatedly finding the minimum element from the unsorted part and putting it at the beginning."
+    },
+    {
+      question: "What is the time complexity of Selection Sort in all cases?",
+      options: [
+        "O(n)",
+        "O(n log n)",
+        "O(n²)",
+        "O(1)"
+      ],
+      correctAnswer: 2,
+      explanation: "Selection Sort always requires O(n²) comparisons regardless of input order because it must scan all remaining elements for each position."
+    },
+    {
+      question: "In the array [64, 25, 12, 22, 11], how many swaps occur during the entire sorting process?",
+      options: [
+        "1",
+        "2",
+        "4",
+        "5"
+      ],
+      correctAnswer: 2,
+      explanation: "Selection Sort makes only 4 swaps total (one for each element except the last): 64↔11, 25↔12, 22↔22 (no swap), and 64↔25."
+    },
+    {
+      question: "What makes Selection Sort different from Bubble Sort?",
+      options: [
+        "Selection Sort is stable while Bubble Sort is not",
+        "Selection Sort makes fewer swaps (O(n) vs O(n²))",
+        "Bubble Sort has better worst-case time complexity",
+        "Selection Sort requires additional O(n) space"
+      ],
+      correctAnswer: 1,
+      explanation: "The key advantage of Selection Sort is that it makes only O(n) swaps compared to Bubble Sort's O(n²) swaps in worst case."
+    },
+    {
+      question: "What is the space complexity of Selection Sort?",
+      options: [
+        "O(n)",
+        "O(n log n)",
+        "O(n²)",
+        "O(1)"
+      ],
+      correctAnswer: 3,
+      explanation: "Like Bubble Sort, Selection Sort is an in-place algorithm that only requires O(1) additional space for temporary storage during swaps."
+    },
+    {
+      question: "Why is Selection Sort not considered stable?",
+      options: [
+        "Because it changes the relative order of equal elements",
+        "Because its time complexity varies with input",
+        "Because it requires recursive implementation",
+        "Because it uses additional memory"
+      ],
+      correctAnswer: 0,
+      explanation: "Selection Sort isn't stable because the swapping of elements can change the relative order of equal keys (e.g., [5a, 2, 5b] → [2, 5b, 5a])."
+    },
+    {
+      question: "When might Selection Sort be preferred over other simple sorts?",
+      options: [
+        "When the input is already sorted",
+        "When memory writes are expensive",
+        "When stability is required",
+        "When dealing with very large datasets"
+      ],
+      correctAnswer: 1,
+      explanation: "Selection Sort's O(n) swaps make it useful when memory writes are expensive, even though it still requires O(n²) comparisons."
+    },
+    {
+    question: "What is the basic idea behind Selection Sort?",
+    options: [
+      "Swap adjacent elements repeatedly",
+      "Select the smallest element and place it in the correct position",
+      "Divide the array into halves",
+      "Insert elements into a sorted portion"
+    ],
+    correctAnswer: 1,
+    explanation: "Selection Sort repeatedly finds the smallest element from the unsorted portion and places it at the beginning."
+  },
+  {
+    question: "What is the worst-case time complexity of Selection Sort?",
+    options: [
+      "O(log n)",
+      "O(n)",
+      "O(n²)",
+      "O(n log n)"
+    ],
+    correctAnswer: 2,
+    explanation: "Selection Sort always performs O(n²) comparisons regardless of the initial order of the elements."
+  },
+  {
+    question: "How many swaps does Selection Sort perform in the worst case?",
+    options: [
+      "n²",
+      "n",
+      "n-1",
+      "1"
+    ],
+    correctAnswer: 2,
+    explanation: "Selection Sort performs at most n−1 swaps, making it efficient in terms of swap operations."
+  },
+  {
+    question: "Is Selection Sort a stable sorting algorithm?",
+    options: [
+      "Yes",
+      "No",
+      "Only for integers",
+      "Only for sorted arrays"
+    ],
+    correctAnswer: 1,
+    explanation: "Standard Selection Sort is not stable because swapping can change the relative order of equal elements."
+  },
+  {
+    question: "Which statement about Selection Sort is correct?",
+    options: [
+      "It requires additional memory",
+      "It always performs the same number of comparisons",
+      "It only works on sorted arrays",
+      "It is faster than Merge Sort for large datasets"
+    ],
+    correctAnswer: 1,
+    explanation: "Selection Sort performs the same number of comparisons regardless of whether the array is sorted or unsorted."
+  },
+  {
+  question: "What is the first step performed in Selection Sort?",
+  options: [
+    "Compare adjacent elements",
+    "Find the smallest element in the unsorted portion",
+    "Divide the array into two halves",
+    "Insert the first element into a sorted list"
+  ],
+  correctAnswer: 1,
+  explanation: "Selection Sort begins by finding the smallest element in the unsorted portion of the array."
+},
+{
+  question: "After each pass of Selection Sort, which part of the array is guaranteed to be sorted?",
+  options: [
+    "The last element",
+    "The first part of the array",
+    "The middle elements",
+    "The entire array"
+  ],
+  correctAnswer: 1,
+  explanation: "After every pass, one more element is placed in its correct position at the beginning of the array."
+},
+{
+  question: "How many passes are required to sort an array of n elements using Selection Sort?",
+  options: [
+    "n",
+    "n - 1",
+    "log n",
+    "n²"
+  ],
+  correctAnswer: 1,
+  explanation: "Selection Sort requires n - 1 passes because the last element is automatically in its correct position."
+},
+{
+  question: "What is the best-case time complexity of Selection Sort?",
+  options: [
+    "O(1)",
+    "O(log n)",
+    "O(n)",
+    "O(n²)"
+  ],
+  correctAnswer: 3,
+  explanation: "Selection Sort always performs O(n²) comparisons, even if the array is already sorted."
+},
+{
+  question: "Which operation is minimized in Selection Sort compared to Bubble Sort?",
+  options: [
+    "Comparisons",
+    "Swaps",
+    "Memory usage",
+    "Recursion"
+  ],
+  correctAnswer: 1,
+  explanation: "Selection Sort performs far fewer swaps than Bubble Sort, making it useful when write operations are expensive."
+},
+{
+  question: "Selection Sort belongs to which category of sorting algorithms?",
+  options: [
+    "Comparison-based sorting",
+    "Non-comparison sorting",
+    "Divide and Conquer",
+    "Hash-based sorting"
+  ],
+  correctAnswer: 0,
+  explanation: "Selection Sort compares elements to determine their correct order, making it a comparison-based sorting algorithm."
+},
+{
+  question: "Why is Selection Sort generally not suitable for large datasets?",
+  options: [
+    "It uses too much memory",
+    "It requires recursion",
+    "It has O(n²) time complexity",
+    "It cannot sort duplicate values"
+  ],
+  correctAnswer: 2,
+  explanation: "Selection Sort performs O(n²) comparisons, making it inefficient for large datasets."
+},
+{
+  question: "Can Selection Sort correctly sort an array containing duplicate elements?",
+  options: [
+    "Yes",
+    "No",
+    "Only if duplicates are adjacent",
+    "Only after removing duplicates"
+  ],
+  correctAnswer: 0,
+  explanation: "Selection Sort correctly sorts arrays with duplicate values, although it is not a stable sorting algorithm."
+},
+{
+  question: "Which sorting algorithm usually performs fewer swaps?",
+  options: [
+    "Bubble Sort",
+    "Selection Sort",
+    "Both perform the same number of swaps",
+    "Merge Sort"
+  ],
+  correctAnswer: 1,
+  explanation: "Selection Sort performs at most n−1 swaps, whereas Bubble Sort may perform many more."
+},
+{
+  question: "What is one major advantage of Selection Sort?",
+  options: [
+    "Guaranteed O(n log n) performance",
+    "Simple implementation with minimal swaps",
+    "Stable sorting by default",
+    "Works faster than Quick Sort on large arrays"
+  ],
+  correctAnswer: 1,
+  explanation: "Selection Sort is easy to implement and minimizes the number of swaps, making it useful in scenarios where writing to memory is costly."
+}
+  ];
+
+  return <QuizEngine title="Selection Sort Quiz Challenge" questions={questions} />;
+};
+
+export default SelectionSortQuiz;
diff --git a/src/app/visualizer/array/selectionsort/quiz/page.jsx b/src/app/visualizer/array/selectionsort/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/array/selectionsort/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/shellsort/AlgorithmClient.jsx b/src/app/visualizer/array/shellsort/AlgorithmClient.jsx
new file mode 100644
index 000000000..06da786f9
--- /dev/null
+++ b/src/app/visualizer/array/shellsort/AlgorithmClient.jsx
@@ -0,0 +1,41 @@
+import Animation from "@/app/visualizer/array/shellsort/animation";
+import Content from "@/app/visualizer/array/shellsort/content";
+import Code from "@/app/visualizer/array/shellsort/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import TrackVisit from "@/app/components/ui/TrackVisit";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+
+export default function Page() {
+  return (
+    <>
+      <TrackVisit name="Shell Sort" path="/visualizer/array/shellsort" category="Sorting" />
+      <VisualizerPageLayout
+        paths={createVisualizerPaths("Array", "Shell Sort")}
+        title="Shell Sort"
+        animation={<Animation />}
+        content={<Content />}
+        code={<Code />}
+        exploreOther={
+          <ExploreOther
+            title="Explore Sorting Algorithms"
+            links={[
+              { text: "Bubble Sort", url: "/visualizer/array/bubblesort" },
+              { text: "Quick Sort", url: "/visualizer/array/quicksort" },
+              { text: "Selection Sort", url: "/visualizer/array/selectionsort" },
+              { text: "Insertion Sort", url: "/visualizer/array/insertionsort" },
+              { text: "Merge Sort", url: "/visualizer/array/mergesort" },
+              { text: "Comparison Mode", url: "/visualizer/array/comparison" },
+              { text: "Counting Sort", url: "/visualizer/array/countingsort" },
+              { text: "Heap Sort", url: "/visualizer/array/heapsort" },
+            ]}
+          />
+        }
+      />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/shellsort/animation.jsx b/src/app/visualizer/array/shellsort/animation.jsx
new file mode 100644
index 000000000..4aff4836b
--- /dev/null
+++ b/src/app/visualizer/array/shellsort/animation.jsx
@@ -0,0 +1,357 @@
+"use client";
+import React, { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import { gsap } from "gsap";
+import ArrayGenerator from "@/app/components/ui/randomArray";
+import CustomArrayInput from "@/app/components/ui/customArrayInput";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import { shellSortGenerator } from "@/features/algorithms/array/shellSortLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+  if (len <= 2) return "text-lg";
+  if (len === 3) return "text-sm";
+  return "text-xs";
+};
+
+const precomputeSteps = (inputArray) => {
+    const steps = [];
+    const generator = shellSortGenerator(inputArray);
+
+    for (const frame of generator) {
+        const { type, payload } = frame;
+        const lastStep = steps[steps.length - 1] || { array: [...inputArray], comparisons: 0, swaps: 0, currentStep: 0, currentIndices: {}, currentPhase: "", stepExplanation: "", sorted: false, totalSteps: 0 };
+
+        switch (type) {
+            case 'init':
+                steps.push({
+                    ...lastStep,
+                    array: [...inputArray],
+                    stepExplanation: "Starting Shell Sort...",
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'gap_start':
+                steps.push({
+                    ...lastStep,
+                    array: [...lastStep.array],
+                    currentStep: payload.step,
+                    currentIndices: { ...lastStep.currentIndices, currentGap: payload.gap },
+                    currentPhase: `Sorting with gap = ${payload.gap}`,
+                    stepExplanation: `Starting a pass with a gap of ${payload.gap}.`,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'outer_loop':
+                steps.push({
+                    ...lastStep,
+                    array: [...lastStep.array],
+                    currentStep: payload.step,
+                    currentIndices: { ...lastStep.currentIndices, i: payload.i, temp: payload.temp },
+                    currentPhase: `Sorting with gap = ${payload.gap}`,
+                    stepExplanation: `Picking element at index ${payload.i} (value: ${payload.temp}) for gapped insertion.`,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'comparing':
+                steps.push({
+                    ...lastStep,
+                    array: [...lastStep.array],
+                    comparisons: payload.comparisons,
+                    currentStep: payload.step,
+                    currentIndices: { ...lastStep.currentIndices, j: payload.j, compareTo: payload.j - payload.gap },
+                    stepExplanation: `Comparing ${payload.temp} with element at index ${payload.j - payload.gap} (value: ${payload.arr[payload.j - payload.gap]}).`,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'shift':
+                steps.push({
+                    ...lastStep,
+                    array: [...payload.arr],
+                    swaps: payload.swaps,
+                    currentStep: payload.step,
+                    currentIndices: { ...lastStep.currentIndices, j: payload.j - payload.gap },
+                    stepExplanation: `Shifting ${payload.arr[payload.j]} from index ${payload.j} to ${payload.j + payload.gap}.`,
+                    isSwapped: true,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'insertion':
+                steps.push({
+                    ...lastStep,
+                    array: [...payload.arr],
+                    swaps: payload.swaps,
+                    currentStep: payload.step,
+                    currentIndices: { ...lastStep.currentIndices, i: -1, j: -1, temp: null, compareTo: -1 },
+                    stepExplanation: `Inserting ${payload.temp} at its correct sorted position: index ${payload.j}.`,
+                    isSwapped: true,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'completed':
+                steps.push({
+                    ...lastStep,
+                    array: [...payload.arr],
+                    currentStep: payload.step,
+                    currentIndices: { currentGap: -1, i: -1, j: -1, temp: null, compareTo: -1 },
+                    currentPhase: "Completed",
+                    stepExplanation: "Array is fully sorted.",
+                    sorted: true,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+        }
+    }
+    return steps;
+};
+
+const ShellSortVisualizer = () => {
+  const [array, setArray] = useState([]);
+  const replayTimeoutRef = useRef(null);
+
+  const [visualState, setVisualState] = useState({
+    comparisons: 0, swaps: 0, 
+    currentIndices: { currentGap: -1, i: -1, j: -1, temp: null, compareTo: -1 },
+    currentPhase: "", stepExplanation: "", sorted: false, totalSteps: 0,
+  });
+
+  const steps = useMemo(() => {
+    if (array.length === 0) return [];
+    return precomputeSteps(array);
+  }, [array]);
+
+  const onStep = useCallback((step) => {
+    setVisualState({
+      comparisons: step.comparisons,
+      swaps: step.swaps,
+      currentIndices: step.currentIndices,
+      currentPhase: step.currentPhase,
+      stepExplanation: step.stepExplanation,
+      sorted: step.sorted,
+      totalSteps: step.totalSteps,
+    });
+
+    if (step.isSwapped) {
+      const bars = document.querySelectorAll(".array-bar");
+      if (bars.length > 0) {
+        gsap.fromTo(
+          bars,
+          { scale: 1, opacity: 0.8 },
+          { scale: 1.05, opacity: 1, duration: 0.2, stagger: 0.05, yoyo: true, repeat: 1 }
+        );
+      }
+    }
+  }, []);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 500 });
+  const currentStepData = steps[engine.currentStep];
+
+  const handleStart = useCallback(() => {
+    if (currentStepData?.sorted) {
+      engine.reset();
+      replayTimeoutRef.current = setTimeout(() => engine.play(), 50);
+    } else {
+      engine.play();
+    }
+  }, [engine, currentStepData]);
+
+  const handleReset = useCallback(() => {
+    clearTimeout(replayTimeoutRef.current);
+    setVisualState({
+      comparisons: 0, swaps: 0, 
+      currentIndices: { currentGap: -1, i: -1, j: -1, temp: null, compareTo: -1 },
+      currentPhase: "", stepExplanation: "", sorted: false, totalSteps: 0,
+    });
+    engine.reset();
+  }, [engine]);
+ 
+  useEffect(() => {
+    return () => clearTimeout(replayTimeoutRef.current);
+    }, []);
+
+  useVisualizerKeyboard({
+    onStart: handleStart,
+    onReset: handleReset,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+    onTogglePlayPause: engine.isPlaying ? engine.pause : handleStart,
+    speed: engine.speed / 500,
+    sorting: engine.isPlaying,
+    sorted: currentStepData?.sorted || false,
+  });
+
+  const handleExplainStep = () => {
+    const prompt = `I am currently looking at the Shell Sort algorithm, at step ${engine.currentStep} of ${steps.length}.
+Phase: ${visualState.currentPhase}
+Explanation on screen: ${visualState.stepExplanation}
+Current Array State: [${currentStepData?.array?.join(", ") || array.join(", ")}]
+Current Gap: ${visualState.currentIndices.currentGap}
+Outer loop index (i): ${visualState.currentIndices.i}
+Inner loop index (j): ${visualState.currentIndices.j}
+Please explain exactly what is happening in this step in detail.`;
+    
+    window.dispatchEvent(
+      new CustomEvent("chatbot-explain", { detail: { prompt } })
+    );
+  };
+
+  return (
+    <main className="container mx-auto px-6 pt-4 pb-6">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Visualize Shell Sort&apos;s diminishing increment sorting approach.
+      </p>
+
+      <div className="max-w-4xl mx-auto">
+        <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <div>
+              <ArrayGenerator
+                onGenerate={(newArray) => {
+                  setArray(newArray);
+                  handleReset();
+                }}
+                disabled={engine.isPlaying}
+                isPrimary={array.length === 0}
+              />
+              <CustomArrayInput
+                onUseCustomArray={(newArray) => {
+                  setArray(newArray);
+                  handleReset();
+                }}
+                disabled={engine.isPlaying}
+                currentArray={array}
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <button
+                onClick={handleStart}
+                disabled={!array.length}
+                className="w-full disabled:opacity-75 bg-none bg-[#a435f0] hover:bg-[#8f2cd6] px-4 py-2 rounded shadow-sm transition-all duration-300 text-sm sm:text-base text-white"
+              >
+                {engine.isPlaying ? "Sorting..." : currentStepData?.sorted ? "Restart" : "Start Shell Sort"}
+              </button>
+              <button
+                onClick={handleReset}
+                disabled={engine.isPlaying}
+                className="w-full bg-none text-[#a435f0] border border-[#a435f0] hover:bg-[#f3e8ff] dark:hover:bg-[#a435f0]/20 px-4 py-2 rounded transition-colors text-sm sm:text-base"
+              >
+                Reset All
+              </button>
+            </div>
+          </div>
+          
+          {engine.isPlaying && (
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={engine.isPlaying ? engine.pause : handleStart}
+              speed={engine.speed / 500}
+              onSpeedChange={(s) => engine.setSpeed(s * 500)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={engine.reset}
+              onExplainStep={handleExplainStep}
+              disabled={steps.length === 0}
+            />
+          )}
+
+          {!engine.isPlaying && (
+            <div className="flex items-center gap-4 mb-4">
+              <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">Speed:</span>
+              <input
+                type="range"
+                min="0.5"
+                max="5"
+                step="0.5"
+                value={engine.speed / 500}
+                onChange={(e) => engine.setSpeed(parseFloat(e.target.value) * 500)}
+                className="w-24 sm:w-32"
+              />
+              <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">{engine.speed / 500}x</span>
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Comparisons:</div>
+              <div className="text-2xl">{visualState.comparisons}</div>
+            </div>
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Swaps:</div>
+              <div className="text-2xl">{visualState.swaps}</div>
+            </div>
+          </div>
+          <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+            <div className="font-medium">Step:</div>
+            <div className="text-xl font-bold">
+              {visualState.totalSteps > 0 ? `${engine.currentStep + 1} / ${steps.length}` : "—"}
+            </div>
+            <div className="text-xs text-gray-500 mt-1">
+              {engine.currentStep > 0 && !visualState.sorted
+                ? `Sorting with gap ${visualState.currentIndices.currentGap}`
+                : visualState.sorted
+                ? "Sorting complete!"
+                : "Start sorting to see steps"}
+            </div>
+          </div>
+          <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+            <div className="font-medium">Phase:</div>
+            <div className="text-sm sm:text-base text-gray-800 dark:text-gray-200">
+              {visualState.currentPhase || (visualState.sorted ? "Completed" : "Ready to start")}
+            </div>
+            <div className="font-medium mt-2">Explanation:</div>
+            <div className="text-sm text-gray-700 dark:text-gray-300 mt-1">
+              {visualState.stepExplanation || (visualState.sorted ? "Array is fully sorted." : "Run the algorithm to see educational hints.")}
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
+          <h2 className="text-xl font-semibold mb-4">Array Visualization</h2>
+          {(currentStepData?.array || array).length > 0 ? (
+            <div className="flex flex-wrap gap-4 justify-center">
+              {(currentStepData?.array || array).map((value, index) => {
+                const { i, j, compareTo, currentGap } = visualState.currentIndices;
+                const isOuter = index === i;
+                const isInner = index === j;
+                const isCompareTo = index === compareTo;
+                const isInGapSequence = currentGap > 0 && (index - i) % currentGap === 0 && index <= i;
+
+                return (
+                  <div key={index} className="flex flex-col items-center">
+                    <div
+                      className={`array-bar w-16 h-16 flex items-center justify-center rounded-lg border-2 transition-all duration-300 ${getFontSize(value)} font-medium
+                            ${
+                              isOuter
+                                ? "bg-red-400 dark:bg-red-600 border-red-600 dark:border-red-400"
+                                : isInner
+                                ? "bg-yellow-400 dark:bg-yellow-600 border-yellow-600 dark:border-yellow-400"
+                                : isCompareTo
+                                ? "bg-primary/80 dark:bg-primary border-primary dark:border-primary/80"
+                                : visualState.sorted
+                                ? "bg-green-400 dark:bg-green-600 border-green-600 dark:border-green-400"
+                                : isInGapSequence
+                                ? "bg-purple-100 dark:bg-purple-900 border-purple-300 dark:border-purple-700"
+                                : "bg-gray-200 dark:bg-gray-700 border-gray-300 dark:border-gray-600"
+                            }`}
+                    >
+                      {value}
+                    </div>
+                    <div className="mt-1 text-xs text-gray-600 dark:text-gray-400">
+                      {index}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="text-center py-8 text-gray-500">
+              {engine.isPlaying ? "Sorting..." : "Generate or enter an array to begin"}
+            </div>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default ShellSortVisualizer;
diff --git a/src/app/visualizer/array/shellsort/codeBlock.jsx b/src/app/visualizer/array/shellsort/codeBlock.jsx
new file mode 100644
index 000000000..b22c8363b
--- /dev/null
+++ b/src/app/visualizer/array/shellsort/codeBlock.jsx
@@ -0,0 +1,142 @@
+'use client';
+import CodeBlock from '@/app/components/ui/CodeBlock';
+
+const codeExamples = {
+  javascript: `// Shell Sort in JavaScript
+function shellSort(arr) {
+  let n = arr.length;
+  for (let gap = Math.floor(n / 2); gap > 0; gap = Math.floor(gap / 2)) {
+    for (let i = gap; i < n; i++) {
+      let temp = arr[i];
+      let j = i;
+      while (j >= gap && arr[j - gap] > temp) {
+        arr[j] = arr[j - gap];
+        j -= gap;
+      }
+      arr[j] = temp;
+    }
+  }
+  return arr;
+}
+// Usage example
+const numbers = [10, 7, 8, 9, 1, 5];
+console.log("Before sorting:", numbers);
+const result = shellSort([...numbers]);
+console.log("After sorting:", result);`,
+
+  python: `# Shell Sort in Python
+def shell_sort(arr):
+    n = len(arr)
+    gap = n // 2
+    while gap > 0:
+        for i in range(gap, n):
+            temp = arr[i]
+            j = i
+            while j >= gap and arr[j - gap] > temp:
+                arr[j] = arr[j - gap]
+                j -= gap
+            arr[j] = temp
+        gap //= 2
+    return arr
+# Usage example
+numbers = [10, 7, 8, 9, 1, 5]
+print("Before sorting:", numbers)
+result = shell_sort(numbers)
+print("After sorting:", result)`,
+
+  java: `// Shell Sort in Java
+public class ShellSort {
+    public static void shellSort(int[] arr) {
+        int n = arr.length;
+        for (int gap = n / 2; gap > 0; gap /= 2) {
+            for (int i = gap; i < n; i++) {
+                int temp = arr[i];
+                int j = i;
+                while (j >= gap && arr[j - gap] > temp) {
+                    arr[j] = arr[j - gap];
+                    j -= gap;
+                }
+                arr[j] = temp;
+            }
+        }
+    }
+    public static void main(String[] args) {
+        int[] numbers = {10, 7, 8, 9, 1, 5};
+        shellSort(numbers);
+        for (int num : numbers) {
+            System.out.print(num + " ");
+        }
+    }
+}`,
+
+  c: `// Shell Sort in C
+#include <stdio.h>
+void swap(int* a, int* b) {
+    int temp = *a;
+    *a = *b;
+    *b = temp;
+}
+void shellSort(int arr[], int n) {
+    for (int gap = n / 2; gap > 0; gap /= 2) {
+        for (int i = gap; i < n; i++) {
+            int temp = arr[i];
+            int j = i;
+            while (j >= gap && arr[j - gap] > temp) {
+                arr[j] = arr[j - gap];
+                j -= gap;
+            }
+            arr[j] = temp;
+        }
+    }
+}
+int main() {
+    int numbers[] = {10, 7, 8, 9, 1, 5};
+    int n = sizeof(numbers) / sizeof(numbers[0]);
+    shellSort(numbers, n);
+    for (int i = 0; i < n; i++) printf("%d ", numbers[i]);
+    return 0;
+}`,
+
+  cpp: `// Shell Sort in C++
+#include <iostream>
+#include <vector>
+using namespace std;
+void shellSort(vector<int>& arr) {
+    int n = arr.size();
+    for (int gap = n / 2; gap > 0; gap /= 2) {
+        for (int i = gap; i < n; i++) {
+            int temp = arr[i];
+            int j = i;
+            while (j >= gap && arr[j - gap] > temp) {
+                arr[j] = arr[j - gap];
+                j -= gap;
+            }
+            arr[j] = temp;
+        }
+    }
+}
+int main() {
+    vector<int> numbers = {10, 7, 8, 9, 1, 5};
+    shellSort(numbers);
+    for (int num : numbers) cout << num << " ";
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: 'shellSort.js',
+  python: 'shell_sort.py',
+  java: 'ShellSort.java',
+  c: 'shell_sort.c',
+  cpp: 'shell_sort.cpp',
+};
+
+const ShellSortCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default ShellSortCode;
\ No newline at end of file
diff --git a/src/app/visualizer/array/shellsort/content.jsx b/src/app/visualizer/array/shellsort/content.jsx
new file mode 100644
index 000000000..a8fb2f514
--- /dev/null
+++ b/src/app/visualizer/array/shellsort/content.jsx
@@ -0,0 +1,319 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState('light');
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraphs = [
+    `Shell Sort is an in-place comparison sorting algorithm that can be seen as a generalization of insertion sort. It allows the exchange of items that are far apart. The algorithm first sorts elements that are far apart from each other and progressively reduces the gap between elements to be compared.`,
+    `The time complexity of Shell Sort depends heavily on the gap sequence used. For the original sequence (n/2, n/4, ...), the worst-case is O(n²). Better gap sequences like Knuth's ( (3^k - 1) / 2 ) give O(n^(3/2)), and others can achieve even better performance, though the average case is complex to analyze.`,
+    `Shell Sort is an in-place algorithm, meaning it requires a constant amount of extra space, O(1), for storing variables like the gap size and the element being inserted.`,
+    `Shell Sort is a good choice for medium-sized datasets. It performs better than simple O(n²) algorithms like Insertion Sort or Bubble Sort, but is generally outperformed by more advanced algorithms like Quick Sort or Merge Sort for large datasets. It's also simple to implement.`,
+  ];
+
+  const working = [
+    {
+      steps: "Pass 1: Gap = 4",
+      points: [
+        "Compare and sort elements at indices (0, 4), (1, 5), (2, 6), (3, 7).",
+        "Example: Compare 35 and 14, swap. Compare 33 and 19, swap.",
+        "Array becomes partially sorted: [14, 19, 27, 10, 35, 33, 42, 44]",
+      ],
+    },
+    {
+      steps: "Pass 2: Gap = 2",
+      points: [
+        "Perform gapped insertion sort with a gap of 2.",
+        "Array becomes more sorted: [14, 10, 27, 19, 35, 33, 42, 44]",
+      ],
+    },
+    {
+      steps: "Pass 3: Gap = 1",
+      points: [
+        "Perform a final insertion sort on the nearly sorted array.",
+        "The array is now fully sorted: [10, 14, 19, 27, 33, 35, 42, 44]",
+      ],
+    },
+  ];
+
+  const algorithm = [
+    {
+      steps: "Start with a large gap:",
+      points: ["Choose a gap sequence (e.g., n/2, n/4, ..., 1). Start with the largest gap."],
+    },
+    {
+      steps: "Gapped Insertion Sort:",
+      points: ["For the current gap, iterate through the array and perform an insertion sort on elements that are 'gap' distance apart."],
+    },
+    {
+      steps: "Reduce the gap:",
+      points: [
+        "After sorting for the current gap, move to the next smaller gap in the sequence.",
+        "Repeat the gapped insertion sort.",
+      ],
+    },
+    {
+      steps: "Final Pass:",
+      points: ["The final pass is always with a gap of 1, which is equivalent to a standard insertion sort. By this stage, the array is nearly sorted, making this final step very efficient."],
+    },
+  ];
+
+  const timeComplexity = [
+    { points: "Best Case: O(n log n) (for certain gap sequences)" },
+    { points: "Average Case: Depends on gap sequence, typically between O(n log n) and O(n²)" },
+    { points: "Worst Case: O(n²) (for simple gap sequences like n/2)" },
+  ];
+
+  const strategies = [
+    { strategy: "Shell's original sequence", details: "n/2, n/4, ..., 1. Simple but has a worst-case of O(n²)." },
+    { strategy: "Hibbard's sequence", details: "2^k - 1. Leads to a worst-case of O(n^(3/2))." },
+    { strategy: "Sedgewick's sequence", details: "Complex formula (e.g., 4^k + 3*2^(k-1) + 1). Provides better performance, closer to O(n^(4/3)) or O(n log² n)." },
+    { strategy: "Knuth's sequence", details: "(3^k - 1) / 2. A popular choice with O(n^(3/2)) worst-case performance." },
+  ];
+
+  {
+    /* Advantages */
+  }
+  const advantages = [
+    { points: "Efficient for medium-sized lists." },
+    { points: "In-place sorting algorithm (requires O(1) auxiliary space)." },
+    { points: "Significantly better than simple quadratic (O(n²)) algorithms like Insertion Sort and Bubble Sort." },
+    { points: "Relatively simple to implement." },
+  ];
+
+  {
+    /* Disadvantages */
+  }
+  const disadvantages = [
+    { points: "Not stable (relative order of equal elements may change)." },
+    { points: "Time complexity is heavily dependent on the chosen gap sequence." },
+    { points: "Generally slower than O(n log n) algorithms like Quick Sort, Merge Sort, or Heap Sort for large datasets." },
+    {
+      points: "The optimal gap sequence is still an open research problem.",
+    },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is Shell Sort */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is Shell Sort?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* How Does It Work */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            How Does It Work?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Consider this unsorted array: [35, 33, 42, 10, 14, 19, 27, 44]
+            </p>
+
+            <ul className="space-y-3">
+              {working.map((item, index) => (
+                <li key={index} className="text-[#374151] dark:text-[#d1d5db]">
+                  <span className="font-semibold">{item.steps}</span>
+                  {item.points && (
+                    <ol className="mt-2 space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400 font-normal">
+                      {item.points.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ol>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Algorithm Steps */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Algorithm Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {algorithm.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.steps}
+                  {item.points && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.points.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {timeComplexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                    {item.points.split(":")[0]}:
+                  </span>
+                  <span className="ml-2">{item.points.split(":")[1]}</span>
+                </li>
+              ))}
+            </ul>
+            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+              {paragraphs[1]}
+            </p>
+            <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => n * Math.log2(n)} // O(n log n)
+                averageCase={(n) => n * Math.pow(n, 0.26)} // Approximation for O(n^1.26)
+                worstCase={(n) => n * Math.sqrt(n)} // O(n^1.5) for Hibbard's
+                maxN={25}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Space Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Space Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[2]}
+            </p>
+          </div>
+        </section>
+
+        {/* Advantages */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Advantages
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {advantages.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Disadvantages */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Disadvantages
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {disadvantages.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Gap Sequences */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Gap Sequences
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {strategies.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-semibold">{item.strategy}:</span> {item.details}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraphs[3]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/array/shellsort/quiz.jsx b/src/app/visualizer/array/shellsort/quiz.jsx
new file mode 100644
index 000000000..b8a170895
--- /dev/null
+++ b/src/app/visualizer/array/shellsort/quiz.jsx
@@ -0,0 +1,177 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const ShellSortQuiz = () => {
+  const questions = [
+    {
+      question: "What is the fundamental principle behind Quick Sort?",
+      options: [
+        "Merging two sorted lists into one",
+        "Building a heap structure from the array",
+        "Dividing the array around a pivot element",
+        "Finding the minimum element repeatedly"
+      ],
+      correctAnswer: 2,
+      explanation: "Quick Sort uses a divide-and-conquer approach by selecting a pivot element and partitioning the array into elements less than and greater than the pivot."
+    },
+    {
+      question: "What is the average-case time complexity of Quick Sort?",
+      options: [
+        "O(n)",
+        "O(n log n)",
+        "O(n²)",
+        "O(log n)"
+      ],
+      correctAnswer: 1,
+      explanation: "With good pivot selection that creates balanced partitions, Quick Sort averages O(n log n) time complexity."
+    },
+    {
+      question: "Which pivot selection strategy helps avoid the worst-case O(n²) scenario?",
+      options: [
+        "Always choosing the first element",
+        "Always choosing the last element",
+        "Median-of-three method",
+        "Always choosing the middle element"
+      ],
+      correctAnswer: 2,
+      explanation: "The median-of-three strategy (choosing the median of first, middle, and last elements) helps prevent consistently bad pivot choices that lead to unbalanced partitions."
+    },
+    {
+      question: "What is the space complexity of Quick Sort in the average case?",
+      options: [
+        "O(1)",
+        "O(n)",
+        "O(log n)",
+        "O(n log n)"
+      ],
+      correctAnswer: 2,
+      explanation: "Quick Sort requires O(log n) space for the call stack in the average case due to recursive calls, but can degrade to O(n) in worst-case scenarios."
+    },
+    {
+      question: "In the array [10, 80, 30, 90, 40, 50, 70], if we choose the last element as pivot, what is the array after the first partition?",
+      options: [
+        "[10, 30, 40, 50, 70, 80, 90]",
+        "[10, 30, 40] [50] [70, 80, 90]",
+        "[10, 30, 40, 50] [70] [80, 90]",
+        "[10, 80, 30, 90, 40, 50, 70]"
+      ],
+      correctAnswer: 2,
+      explanation: "With pivot=70, elements less than 70 (10,30,40,50) go left, elements greater (80,90) go right, and 70 is in its final position."
+    },
+    {
+      question: "Which of these is NOT an advantage of Quick Sort?",
+      options: [
+        "Excellent average-case performance",
+        "Stable sorting (maintains relative order of equal elements)",
+        "In-place sorting (requires minimal additional memory)",
+        "Cache-efficient due to sequential memory access"
+      ],
+      correctAnswer: 1,
+      explanation: "Quick Sort is not stable - the relative order of equal elements may change during partitioning."
+    },
+    {
+      question: "What causes Quick Sort's worst-case O(n²) time complexity?",
+      options: [
+        "When the array contains duplicate elements",
+        "When the pivot consistently creates highly unbalanced partitions",
+        "When the array size is very small",
+        "When using extra space for merging"
+      ],
+      correctAnswer: 1,
+      explanation: "The worst case occurs when the pivot selection consistently creates partitions of size n-1 and 0 (extremely unbalanced), leading to n nested calls."
+    },
+    {
+      question: "Why is Quick Sort often preferred over Merge Sort for in-memory sorting?",
+      options: [
+        "It has better worst-case time complexity",
+        "It is a stable sorting algorithm",
+        "It has better cache performance due to sequential access",
+        "It requires less code to implement"
+      ],
+      correctAnswer: 2,
+      explanation: "Quick Sort's sequential memory access pattern makes it more cache-friendly than Merge Sort, contributing to its better real-world performance despite having the same average time complexity."
+    },
+    {
+      question: "Which of these standard library implementations typically uses Quick Sort?",
+      options: [
+        "Python's sorted() function",
+        "Java's Arrays.sort() for primitive types",
+        "C++ STL's stable_sort()",
+        "JavaScript's Array.prototype.sort()"
+      ],
+      correctAnswer: 1,
+      explanation: "Java's Arrays.sort() uses a dual-pivot Quick Sort for primitive types (which don't need stability), while object sorting uses a stable Merge Sort variant."
+    },
+    {
+      question: "What is the primary purpose of the partition step in Quick Sort?",
+      options: [
+        "To divide the array into exactly equal halves",
+        "To place the pivot element in its correct final position",
+        "To sort the array in one pass",
+        "To identify duplicate elements in the array"
+      ],
+      correctAnswer: 1,
+      explanation: "The partition step's main goal is to place the pivot in its correct sorted position while arranging other elements to be less than or greater than the pivot."
+    },
+    {
+  question: "What is the main strategy used by Quick Sort?",
+  options: [
+    "Greedy",
+    "Divide and Conquer",
+    "Dynamic Programming",
+    "Backtracking"
+  ],
+  correctAnswer: 1,
+  explanation: "Quick Sort follows the Divide and Conquer approach by selecting a pivot and partitioning the array around it."
+},
+{
+  question: "What is the average-case time complexity of Quick Sort?",
+  options: [
+    "O(n²)",
+    "O(log n)",
+    "O(n log n)",
+    "O(n)"
+  ],
+  correctAnswer: 2,
+  explanation: "Quick Sort has an average-case time complexity of O(n log n), making it one of the fastest practical sorting algorithms."
+},
+{
+  question: "What is the worst-case time complexity of Quick Sort?",
+  options: [
+    "O(n)",
+    "O(n²)",
+    "O(log n)",
+    "O(n log n)"
+  ],
+  correctAnswer: 1,
+  explanation: "Quick Sort performs O(n²) in the worst case when poor pivot choices repeatedly create highly unbalanced partitions."
+},
+{
+  question: "What is the role of the pivot element in Quick Sort?",
+  options: [
+    "It stores the smallest element",
+    "It divides the array into smaller partitions",
+    "It merges sorted arrays",
+    "It keeps the array balanced"
+  ],
+  correctAnswer: 1,
+  explanation: "The pivot is used to partition the array so that smaller elements are placed before it and larger elements after it."
+},
+{
+  question: "Which statement about Quick Sort is correct?",
+  options: [
+    "It is always stable",
+    "It requires O(n) extra space",
+    "It is generally one of the fastest comparison-based sorting algorithms",
+    "It only works on linked lists"
+  ],
+  correctAnswer: 2,
+  explanation: "Quick Sort is widely used because of its excellent average-case performance, although the standard implementation is not stable."
+}
+  ];
+
+  return <QuizEngine title="Shell Sort Quiz Challenge" questions={questions} />;
+};
+
+export default ShellSortQuiz;
diff --git a/src/app/visualizer/array/shellsort/quiz/page.jsx b/src/app/visualizer/array/shellsort/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/array/shellsort/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/slidingwindow/AlgorithmClient.jsx b/src/app/visualizer/array/slidingwindow/AlgorithmClient.jsx
new file mode 100644
index 000000000..39744c9d5
--- /dev/null
+++ b/src/app/visualizer/array/slidingwindow/AlgorithmClient.jsx
@@ -0,0 +1,20 @@
+import Animation from "./animation";
+import Code from "./codeBlock";
+import Content from "./content";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Array", "Sliding Window")}
+      title="Sliding Window Technique"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+    />
+  );
+}
diff --git a/src/app/visualizer/array/slidingwindow/animation.jsx b/src/app/visualizer/array/slidingwindow/animation.jsx
new file mode 100644
index 000000000..126c86f73
--- /dev/null
+++ b/src/app/visualizer/array/slidingwindow/animation.jsx
@@ -0,0 +1,492 @@
+"use client";
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import { gsap } from "gsap";
+import ResetButton from "@/app/components/ui/resetButton";
+import GoButton from "@/app/components/ui/goButton";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import { 
+  generateStatesFixedMax, 
+  generateStatesFixedAvg, 
+  generateStatesVarLongestSub, 
+  generateStatesVarSmallestSub 
+} from "@/features/algorithms/array/slidingWindowLogic";
+
+const PROBLEMS = {
+  FIXED_MAX: "fixed-max",
+  FIXED_AVG: "fixed-avg",
+  VAR_LONGEST_SUB: "var-longest-sub",
+  VAR_SMALLEST_SUB: "var-smallest-sub",
+};
+
+// Define component BEFORE using it
+const Animation = () => {
+  const [problemType, setProblemType] = useState(PROBLEMS.FIXED_MAX);
+  const [inputData, setInputData] = useState("2, 1, 5, 1, 3, 2");
+  const [targetValue, setTargetValue] = useState("3");
+  
+  const [dataArray, setDataArray] = useState([]);
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+  const [showQuiz, setShowQuiz] = useState(false);
+  const [discussion, setDiscussion] = useState("");
+
+  const elementRefs = useRef([]);
+  
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const visualizerRef = useRef(null);
+  const animationRef = useRef(null);
+  const wasPausedRef = useRef(false);
+  const stateQueueRef = useRef([]);
+  const currentStateIdxRef = useRef(0);
+  
+  const [steps, setSteps] = useState([]);
+  const [visualState, setVisualState] = useState({
+    left: -1, right: -1, current: null, best: null,
+    explanation: "", activeWindow: [-1, -1],
+    violation: false, success: false, done: false
+  });
+
+  // Define callback handlers BEFORE using them
+  const handleStep = useCallback((state) => {
+    setVisualState({
+      left: state.left,
+      right: state.right,
+      current: state.current,
+      best: state.best,
+      explanation: state.explanation,
+      activeWindow: state.activeWindow,
+      violation: state.violation,
+      success: state.success,
+      done: state.done
+    });
+  }, []);
+
+  const engine = useAnimationEngine({ steps, onStep: handleStep, initialSpeed: 1000 });
+  const currentStepData = steps[engine.currentStep];
+
+  const handleReset = useCallback(() => {
+    engine.reset();
+    setDataArray([]);
+    setVisualState({
+      left: -1, right: -1, current: null, best: null,
+      explanation: "", activeWindow: [-1, -1],
+      violation: false, success: false, done: false
+    });
+    setSteps([]);
+    setMessage("");
+    setMessageType("");
+    setIsAnimating(false);
+    
+    elementRefs.current.forEach((ref) => {
+      if (ref) {
+        gsap.to(ref, { backgroundColor: "#E5E7EB", borderColor: "#D1D5DB", color: "#1F2937", duration: 0 });
+      }
+    });
+  }, [engine]);
+
+  // Animate the element background and border colors whenever visualState changes
+  useEffect(() => {
+    // Call any reset initialization logic here if needed
+  }, []);
+
+  const animateStep = useCallback(() => {
+    if (currentStateIdxRef.current >= stateQueueRef.current.length) {
+      setIsAnimating(false);
+      setMessage("Visualization completed.");
+      setMessageType("success");
+      setShowQuiz(true);
+      return;
+    }
+
+    const state = stateQueueRef.current[currentStateIdxRef.current];
+    const delay = 1500 / 1; // Replace speedRef.current with actual speed value
+
+    elementRefs.current.forEach((ref, index) => {
+      if (!ref) return;
+      const activeWindow = visualState.activeWindow || [-1, -1];
+      const [start, end] = activeWindow;
+      
+      if (index >= start && index <= end) {
+        if (visualState.violation && index === visualState.left) {
+          gsap.to(ref, { backgroundColor: "#FEE2E2", borderColor: "#EF4444", color: "#991B1B", duration: 0.2 });
+        } else if (visualState.success) {
+          gsap.to(ref, { backgroundColor: "#DCFCE7", borderColor: "#22C55E", color: "#166534", duration: 0.2 });
+        } else if (visualState.done) {
+          gsap.to(ref, { backgroundColor: "#F3E8FF", borderColor: "#A855F7", color: "#6B21A8", duration: 0.2 });
+        } else {
+          gsap.to(ref, { backgroundColor: "#F3E8FF", borderColor: "#A855F7", color: "#6B21A8", duration: 0.2 });
+        }
+      } else {
+        gsap.to(ref, { backgroundColor: "#E5E7EB", borderColor: "#D1D5DB", color: "#4B5563", duration: 0.2 });
+      }
+    });
+
+    if (visualState.done && engine.isPlaying) {
+      setMessage("Visualization completed.");
+      setMessageType("success");
+      setShowQuiz(true);
+    }
+  }, [visualState, engine.isPlaying]);
+
+  useEffect(() => {
+    const handleDownload = async () => {
+      if (!visualizerRef.current) return;
+      try {
+        const canvas = await html2canvas(visualizerRef.current, {
+          backgroundColor: document.documentElement.classList.contains("dark") ? "#1f2937" : "#ffffff",
+        });
+        const link = document.createElement("a");
+        link.download = "sliding-window-visualization.png";
+        link.href = canvas.toDataURL("image/png");
+        link.click();
+      } catch (err) {
+        console.error("Failed to capture visualization:", err);
+      }
+    };
+    
+    window.addEventListener("download-visualization", handleDownload);
+    return () => window.removeEventListener("download-visualization", handleDownload);
+  }, []);
+
+  const handleGo = (e) => {
+    e.preventDefault();
+    handleReset();
+    
+    if (!inputData) {
+      setMessage("Please provide input data.");
+      setMessageType("warning");
+      return;
+    }
+
+    let parsedArray = [];
+    let targetNum = 0;
+
+    if (problemType === PROBLEMS.VAR_LONGEST_SUB) {
+      parsedArray = inputData.split('');
+    } else {
+      parsedArray = inputData.split(',').map(s => parseInt(s.trim()));
+      if (parsedArray.some(isNaN)) {
+        setMessage("Invalid array elements. Please provide comma-separated integers.");
+        setMessageType("warning");
+        return;
+      }
+    }
+
+    if (problemType !== PROBLEMS.VAR_LONGEST_SUB) {
+      targetNum = parseInt(targetValue);
+      if (isNaN(targetNum) || targetNum <= 0) {
+        setMessage("Please provide a valid positive integer for Window Size / Target.");
+        setMessageType("warning");
+        return;
+      }
+      if ((problemType === PROBLEMS.FIXED_MAX || problemType === PROBLEMS.FIXED_AVG) && targetNum > parsedArray.length) {
+         setMessage("Window size K cannot be greater than the array length.");
+         setMessageType("warning");
+         return;
+      }
+    }
+
+    setDataArray(parsedArray);
+    
+    let generatedStates = [];
+    if (problemType === PROBLEMS.FIXED_MAX) {
+      generatedStates = Array.from(generateStatesFixedMax(parsedArray, targetNum));
+    } else if (problemType === PROBLEMS.FIXED_AVG) {
+      generatedStates = Array.from(generateStatesFixedAvg(parsedArray, targetNum));
+    } else if (problemType === PROBLEMS.VAR_LONGEST_SUB) {
+      generatedStates = Array.from(generateStatesVarLongestSub(inputData));
+    } else if (problemType === PROBLEMS.VAR_SMALLEST_SUB) {
+      generatedStates = Array.from(generateStatesVarSmallestSub(parsedArray, targetNum));
+    }
+
+    setSteps(generatedStates);
+    setTimeout(() => {
+      engine.play();
+    }, 50);
+  };
+
+  useVisualizerKeyboard({
+    onStart: handleGo,
+    onReset: handleReset,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+    onTogglePlayPause: engine.isPlaying ? engine.pause : engine.play,
+    speed: engine.speed / 500,
+    sorting: engine.isPlaying,
+    sorted: currentStepData?.done || false,
+  });
+
+  const handleExplainStep = () => {
+    const prompt = `I am currently looking at the Sliding Window algorithm, at step ${engine.currentStep} of ${steps.length}.
+Problem Type: ${problemType}
+Explanation on screen: ${visualState.explanation}
+Current Input: [${dataArray.join(", ")}]
+Left pointer: ${visualState.left}, Right pointer: ${visualState.right}
+Current value/sum: ${visualState.current}, Best value/sum: ${visualState.best}
+Active window indices: [${visualState.activeWindow.join(", ")}]
+
+Please explain exactly what is happening in this step in detail.`;
+    
+    window.dispatchEvent(
+      new CustomEvent("chatbot-explain", { detail: { prompt } })
+    );
+  };
+
+  const getFontSize = (value) => {
+    const len = String(value).length;
+    if (len <= 1) return "text-xl font-bold";
+    if (len <= 2) return "text-lg font-bold";
+    return "text-sm font-semibold";
+  };
+
+  const messageClass =
+    messageType === "success"
+      ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
+      : messageType === "warning"
+      ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
+      : "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200";
+
+  return (
+    <main className="container mx-auto">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8 max-w-3xl mx-auto">
+        Visualize how the Sliding Window technique efficiently processes contiguous subsegments of an array or string.
+      </p>
+      
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8 shadow-sm"
+      >
+        <div className="mb-6">
+          <label className="block text-gray-700 dark:text-gray-300 mb-2 font-medium">Select Problem</label>
+          <select 
+            value={problemType}
+            onChange={(e) => {
+              setProblemType(e.target.value);
+              handleReset();
+              if (e.target.value === PROBLEMS.VAR_LONGEST_SUB) {
+                setInputData("abcabcbb");
+              } else if (e.target.value === PROBLEMS.VAR_SMALLEST_SUB) {
+                setInputData("2, 3, 1, 2, 4, 3");
+                setTargetValue("7");
+              } else {
+                setInputData("2, 1, 5, 1, 3, 2");
+                setTargetValue("3");
+              }
+            }}
+            disabled={engine.isPlaying || dataArray.length > 0 && !currentStepData?.done}
+            className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#a435f0] focus:outline-none focus:ring-2 focus:ring-[#a435f0]/30 transition duration-300"
+          >
+            <optgroup label="Fixed Window">
+              <option value={PROBLEMS.FIXED_MAX}>Maximum Sum Subarray of Size K</option>
+              <option value={PROBLEMS.FIXED_AVG}>Average of Subarrays of Size K</option>
+            </optgroup>
+            <optgroup label="Variable Window">
+              <option value={PROBLEMS.VAR_LONGEST_SUB}>Longest Substring Without Repeating Characters</option>
+              <option value={PROBLEMS.VAR_SMALLEST_SUB}>Smallest Subarray With Given Sum</option>
+            </optgroup>
+          </select>
+        </div>
+
+        <div className="flex flex-col md:flex-row gap-4 mb-4">
+          <div className="flex-1">
+            <label className="block text-gray-700 dark:text-gray-300 mb-2" htmlFor="inputData">
+              {problemType === PROBLEMS.VAR_LONGEST_SUB ? "String Input" : "Array Elements (comma-separated)"}
+            </label>
+            <input
+              type="text"
+              id="inputData"
+              value={inputData}
+              onChange={(e) => setInputData(e.target.value)}
+              className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#a435f0] focus:outline-none focus:ring-2 focus:ring-[#a435f0]/30 transition duration-300 font-mono"
+              placeholder={problemType === PROBLEMS.VAR_LONGEST_SUB ? "e.g., abcabcbb" : "e.g., 2, 1, 5, 1, 3, 2"}
+              disabled={engine.isPlaying || dataArray.length > 0 && !currentStepData?.done}
+            />
+          </div>
+          
+          {problemType !== PROBLEMS.VAR_LONGEST_SUB && (
+            <div className="w-full md:w-1/3">
+              <label className="block text-gray-700 dark:text-gray-300 mb-2" htmlFor="targetValue">
+                {(problemType === PROBLEMS.FIXED_MAX || problemType === PROBLEMS.FIXED_AVG) ? "Window Size (K)" : "Target Sum"}
+              </label>
+              <input
+                type="number"
+                id="targetValue"
+                value={targetValue}
+                onChange={(e) => setTargetValue(e.target.value)}
+                className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#a435f0] focus:outline-none focus:ring-2 focus:ring-[#a435f0]/30 transition duration-300 font-mono"
+                placeholder="e.g., 3"
+                disabled={engine.isPlaying || dataArray.length > 0 && !currentStepData?.done}
+                min="1"
+              />
+            </div>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-3 mt-6">
+          <GoButton onClick={handleGo} isAnimating={isAnimating || engine.isPlaying || (dataArray.length > 0 && !visualState.done)} disabled={engine.isPlaying} />
+          <ResetButton onReset={handleReset} isAnimating={isAnimating || engine.isPlaying || dataArray.length > 0} />
+        </div>
+
+        {(engine.isPlaying || dataArray.length > 0) && (
+          <div className="mt-6 border-t border-gray-100 dark:border-gray-800 pt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={engine.isPlaying ? engine.pause : engine.play}
+              speed={engine.speed / 500}
+              onSpeedChange={(s) => engine.setSpeed(s * 500)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={handleReset}
+              onExplainStep={handleExplainStep}
+              disabled={steps.length === 0}
+            />
+          </div>
+        )}
+      </form>
+
+      {message && (
+        <div className={`max-w-4xl mx-auto mb-8 p-4 rounded-lg ${messageClass}`}>
+          <p className="text-center font-medium">{message}</p>
+        </div>
+      )}
+
+      {showQuiz && (
+        <div className="max-w-4xl mx-auto mb-6 bg-white dark:bg-gray-800 p-5 rounded-xl border">
+          <h3 className="text-lg font-bold mb-3">🧠 Quick Challenge</h3>
+          <p className="mb-3">What is the time complexity of Sliding Window?</p>
+          <div className="flex gap-3 flex-wrap">
+            <button className="px-4 py-2 rounded-lg bg-gray-200">O(n²)</button>
+            <button className="px-4 py-2 rounded-lg bg-green-500 text-white">O(n)</button>
+            <button className="px-4 py-2 rounded-lg bg-gray-200">O(log n)</button>
+          </div>
+        </div>
+      )}
+
+      {showQuiz && (
+        <div className="max-w-4xl mx-auto mb-6 bg-white dark:bg-gray-800 p-5 rounded-xl border">
+          <h3 className="text-lg font-bold mb-3">💬 Community Discussion</h3>
+          <textarea
+            value={discussion}
+            onChange={(e) => setDiscussion(e.target.value)}
+            placeholder="Ask a question or share your explanation..."
+            className="w-full p-3 border rounded-lg"
+            rows={4}
+          />
+          <button className="mt-3 px-4 py-2 bg-purple-600 text-white rounded-lg">
+            Post Discussion
+          </button>
+        </div>
+      )}
+
+      {dataArray.length > 0 && (
+         <div ref={animationRef}>
+        <div className="max-w-5xl mx-auto space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="bg-white dark:bg-gray-800 p-5 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm flex flex-col justify-center">
+              <div className="flex items-center gap-2 mb-3">
+                <span className="w-2 h-2 rounded-full bg-[#a435f0] animate-pulse"></span>
+                <span className="text-sm font-semibold text-[#a435f0] dark:text-[#c56eff] uppercase tracking-wide">
+                  Current Step
+                </span>
+              </div>
+              <p
+  aria-live="polite"
+  className="text-gray-700 dark:text-gray-200 text-base leading-relaxed font-mono min-h-[3rem]"
+>
+  {visualState.explanation || "Ready to begin..."}
+</p>
+            </div>
+            
+            <div className="bg-white dark:bg-gray-800 p-5 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm grid grid-cols-2 gap-4 text-center">
+              <div>
+                <h4 className="text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-1">Current Window Value</h4>
+                <div className="text-2xl font-bold text-gray-800 dark:text-gray-100 font-mono overflow-hidden text-ellipsis whitespace-nowrap">
+                  {visualState.current !== null ? visualState.current : "-"}
+                </div>
+              </div>
+              <div>
+                <h4 className="text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-1">Best Result</h4>
+                <div className="text-2xl font-bold text-[#a435f0] dark:text-[#c56eff] font-mono overflow-hidden text-ellipsis whitespace-nowrap">
+                  {visualState.best !== null ? visualState.best : "-"}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md overflow-x-auto border border-gray-100 dark:border-gray-700">
+            <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-10 text-center">
+              Window Visualization
+            </h2>
+            <div className="flex gap-2 justify-center min-w-max pb-8 px-4">
+              {dataArray.map((element, index) => {
+                const isLeft = index === visualState.left;
+                const isRight = index === visualState.right;
+                
+                return (
+                  <div key={index} className="flex flex-col items-center relative">
+                    <div
+                      ref={(el) => (elementRefs.current[index] = el)}
+                      className={`w-14 h-14 md:w-16 md:h-16 flex items-center justify-center rounded-lg border-2 transition-colors duration-200 ${getFontSize(element)} shadow-sm`}
+                      style={{ backgroundColor: "#E5E7EB", borderColor: "#D1D5DB" }}
+                    >
+                      {element}
+                    </div>
+                    
+                    <div className="mt-2 text-xs text-gray-400 font-mono h-4">
+                      {index}
+                    </div>
+
+                    <div className="absolute -bottom-10 flex flex-col items-center gap-1 w-full h-8">
+                      {isLeft && (
+                        <div className="text-[#a435f0] font-bold text-xs bg-[#a435f0]/10 px-2 py-0.5 rounded shadow-sm border border-[#a435f0]/30 animate-bounce">
+                          L
+                        </div>
+                      )}
+                      {isRight && (
+                        <div className="text-[#a435f0] font-bold text-xs bg-[#a435f0]/10 px-2 py-0.5 rounded shadow-sm border border-[#a435f0]/30 animate-bounce" style={{ animationDelay: '0.1s' }}>
+                          R
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            
+            <div className="mt-6 flex justify-center gap-6 text-xs text-gray-500 dark:text-gray-400 font-medium">
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 rounded bg-[#F3E8FF] border border-[#D8B4FE]" />
+                <span>Window</span>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 rounded bg-[#E5E7EB] border border-gray-300" />
+                <span>Normal</span>
+              </div>
+
+              {problemType.includes("var") && (
+                <>
+                  <div className="flex items-center gap-2">
+                    <div className="w-3 h-3 rounded bg-[#FEE2E2] border border-red-300" />
+                    <span>Removed</span>
+                  </div>
+
+                  <div className="flex items-center gap-2">
+                    <div className="w-3 h-3 rounded bg-[#DCFCE7] border border-green-300" />
+                    <span>Added</span>
+                  </div>
+                </>
+              )}
+            </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </main>
+  );
+};
+
+// Export the component
+export default Animation;
diff --git a/src/app/visualizer/array/slidingwindow/codeBlock.jsx b/src/app/visualizer/array/slidingwindow/codeBlock.jsx
new file mode 100644
index 000000000..773a70892
--- /dev/null
+++ b/src/app/visualizer/array/slidingwindow/codeBlock.jsx
@@ -0,0 +1,173 @@
+"use client";
+import React from "react";
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const codeExamples = {
+  javascript: `// Fixed Window: Max Sum Subarray of Size K
+function maxSum(arr, k) {
+  let max_sum = 0, window_sum = 0;
+  // Compute sum of first window
+  for (let i = 0; i < k; i++) {
+    window_sum += arr[i];
+  }
+  max_sum = window_sum;
+  // Slide the window
+  for (let i = k; i < arr.length; i++) {
+    window_sum += arr[i] - arr[i - k];
+    max_sum = Math.max(max_sum, window_sum);
+  }
+  return max_sum;
+}
+
+// Variable Window: Longest Substring Without Repeating Characters
+function lengthOfLongestSubstring(s) {
+  let charSet = new Set();
+  let left = 0, maxLength = 0;
+
+  for (let right = 0; right < s.length; right++) {
+    // If duplicate found, shrink window from left
+    while (charSet.has(s[right])) {
+      charSet.delete(s[left]);
+      left++;
+    }
+    charSet.add(s[right]);
+    maxLength = Math.max(maxLength, right - left + 1);
+  }
+  return maxLength;
+}`,
+  python: `# Fixed Window: Max Sum Subarray of Size K
+def max_sum(arr, k):
+    n = len(arr)
+    if n < k: return -1
+    
+    # Compute sum of first window
+    window_sum = sum(arr[:k])
+    max_sum = window_sum
+    
+    # Slide the window
+    for i in range(k, n):
+        window_sum += arr[i] - arr[i - k]
+        max_sum = max(max_sum, window_sum)
+        
+    return max_sum
+
+# Variable Window: Longest Substring Without Repeating Characters
+def length_of_longest_substring(s: str) -> int:
+    char_set = set()
+    left = 0
+    max_length = 0
+    
+    for right in range(len(s)):
+        # If duplicate found, shrink window from left
+        while s[right] in char_set:
+            char_set.remove(s[left])
+            left += 1
+        
+        char_set.add(s[right])
+        max_length = max(max_length, right - left + 1)
+        
+    return max_length`,
+  java: `import java.util.HashSet;
+
+class SlidingWindow {
+    // Fixed Window: Max Sum Subarray of Size K
+    public int maxSum(int[] arr, int k) {
+        int n = arr.length;
+        if (n < k) return -1;
+        
+        int maxSum = 0, windowSum = 0;
+        // Compute sum of first window
+        for (int i = 0; i < k; i++) {
+            windowSum += arr[i];
+        }
+        maxSum = windowSum;
+        
+        // Slide the window
+        for (int i = k; i < n; i++) {
+            windowSum += arr[i] - arr[i - k];
+            maxSum = Math.max(maxSum, windowSum);
+        }
+        return maxSum;
+    }
+
+    // Variable Window: Longest Substring Without Repeating Characters
+    public int lengthOfLongestSubstring(String s) {
+        HashSet<Character> set = new HashSet<>();
+        int left = 0, maxLength = 0;
+        
+        for (int right = 0; right < s.length(); right++) {
+            // If duplicate found, shrink window from left
+            while (set.contains(s.charAt(right))) {
+                set.remove(s.charAt(left));
+                left++;
+            }
+            set.add(s.charAt(right));
+            maxLength = Math.max(maxLength, right - left + 1);
+        }
+        return maxLength;
+    }
+}`,
+  cpp: `#include <iostream>
+#include <vector>
+#include <unordered_set>
+#include <algorithm>
+using namespace std;
+
+// Fixed Window: Max Sum Subarray of Size K
+int maxSum(vector<int>& arr, int k) {
+    int n = arr.size();
+    if (n < k) return -1;
+    
+    int max_sum = 0, window_sum = 0;
+    // Compute sum of first window
+    for (int i = 0; i < k; i++) {
+        window_sum += arr[i];
+    }
+    max_sum = window_sum;
+    
+    // Slide the window
+    for (int i = k; i < n; i++) {
+        window_sum += arr[i] - arr[i - k];
+        max_sum = max(max_sum, window_sum);
+    }
+    return max_sum;
+}
+
+// Variable Window: Longest Substring Without Repeating Characters
+int lengthOfLongestSubstring(string s) {
+    unordered_set<char> charSet;
+    int left = 0, maxLength = 0;
+    
+    for (int right = 0; right < s.length(); right++) {
+        // If duplicate found, shrink window from left
+        while (charSet.count(s[right])) {
+            charSet.erase(s[left]);
+            left++;
+        }
+        charSet.insert(s[right]);
+        maxLength = max(maxLength, right - left + 1);
+    }
+    return maxLength;
+}`
+};
+
+const fileNames = {
+  javascript: 'slidingWindow.js',
+  python: 'sliding_window.py',
+  java: 'SlidingWindow.java',
+  cpp: 'sliding_window.cpp',
+};
+
+const Code = () => {
+  return (
+    <div>
+      <CodeBlock
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+      />
+    </div>
+  );
+};
+
+export default Code;
diff --git a/src/app/visualizer/array/slidingwindow/content.jsx b/src/app/visualizer/array/slidingwindow/content.jsx
new file mode 100644
index 000000000..f5eb721d4
--- /dev/null
+++ b/src/app/visualizer/array/slidingwindow/content.jsx
@@ -0,0 +1,88 @@
+"use client";
+import React from "react";
+import Image from "next/image";
+
+const Content = () => {
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        
+        {/* Intro Section */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: '-0.03em' }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Sliding Window Technique
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed mb-4">
+              The <strong>Sliding Window</strong> technique is an optimization pattern used primarily for arrays and strings. It aims to reduce the use of nested loops and replace them with a single loop, thereby reducing the time complexity from <strong>O(N²)</strong> to <strong>O(N)</strong>.
+            </p>
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              Think of a window as a contiguous subset of elements within the array or string. Depending on the problem, this window can either be of a <strong>fixed size</strong> (e.g., &quot;find the maximum sum of exactly K elements&quot;) or a <strong>variable size</strong> (e.g., &quot;find the smallest subarray whose sum is greater than or equal to S&quot;).
+            </p>
+          </div>
+        </section>
+
+        {/* Fixed-Size Window Section */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: '-0.03em' }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            1. Fixed-Size Window
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed mb-4">
+              In a fixed-size window problem, the size of the window <strong>K</strong> is given. The window slides over the data structure one element at a time. As the window moves forward by one position, the element that falls out of the left boundary is removed from our running state (e.g., a running sum), and the new element that enters the right boundary is added.
+            </p>
+            <h4 className="font-semibold text-gray-800 dark:text-gray-200 mb-2">Common Pattern:</h4>
+            <ul className="list-disc list-inside text-[#374151] dark:text-[#d1d5db] mb-4 space-y-1 marker:text-gray-500 dark:marker:text-gray-400">
+              <li>Initialize the window by processing the first <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">K</code> elements.</li>
+              <li>Slide the window by moving the <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">left</code> and <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">right</code> pointers one step forward.</li>
+              <li>Update the result (e.g., check if the new sum is the maximum).</li>
+              <li>Repeat until the <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">right</code> pointer reaches the end of the array.</li>
+            </ul>
+          </div>
+        </section>
+
+        {/* Variable-Size Window Section */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: '-0.03em' }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            2. Variable-Size Window
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed mb-4">
+              In a variable-size window problem, the window size can grow or shrink dynamically based on certain conditions. Typically, we expand the window by moving the <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">right</code> pointer until a condition is met or violated. Then, we shrink the window from the <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">left</code> until the condition is satisfied again.
+            </p>
+            <h4 className="font-semibold text-gray-800 dark:text-gray-200 mb-2">Common Pattern:</h4>
+            <ul className="list-disc list-inside text-[#374151] dark:text-[#d1d5db] mb-4 space-y-1 marker:text-gray-500 dark:marker:text-gray-400">
+              <li>Start with both <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">left</code> and <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">right</code> pointers at 0.</li>
+              <li>Expand the window by advancing <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">right</code> and updating the running state.</li>
+              <li>If the condition is violated (e.g., duplicate character found, sum exceeds limit), shrink the window by advancing <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">left</code> until the condition is valid again.</li>
+              <li>Keep track of the optimal result (e.g., longest substring length, smallest subarray length).</li>
+            </ul>
+          </div>
+        </section>
+
+        {/* Time Complexity Section */}
+        <section className="p-6">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: '-0.03em' }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Why is it O(N)?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed mb-4">
+              Although variable-size sliding window problems often feature a <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">while</code> loop inside a <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">for</code> loop, the overall time complexity is still <strong>O(N)</strong>.
+            </p>
+            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                This is because both the <code className="bg-[#e9d5ff] dark:bg-[#3b1a6e] px-1 rounded">left</code> and <code className="bg-[#e9d5ff] dark:bg-[#3b1a6e] px-1 rounded">right</code> pointers only ever move forward. In the worst case, each element is visited at most twice: once when it enters the window (by the right pointer) and once when it leaves (by the left pointer). Therefore, the work done is proportional to 2N, which simplifies to O(N).
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/array/slidingwindow/quiz.jsx b/src/app/visualizer/array/slidingwindow/quiz.jsx
new file mode 100644
index 000000000..97bb37a17
--- /dev/null
+++ b/src/app/visualizer/array/slidingwindow/quiz.jsx
@@ -0,0 +1,342 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const slidingWindowQuestions = [
+  {
+    question: "What is the primary advantage of the Sliding Window technique over a brute-force nested loop approach?",
+    options: [
+      "It requires less auxiliary space (O(1) vs O(N)).",
+      "It reduces time complexity from O(N²) to O(N).",
+      "It can be applied to unsorted arrays to find an exact element.",
+      "It automatically sorts the array."
+    ],
+    correctAnswer: 1,
+    explanation: "By avoiding repeated calculations of overlapping subarrays or substrings, Sliding Window reduces the overall time complexity to O(N)."
+  },
+  {
+    question: "In a Variable-Size Sliding Window problem, when do you typically shrink the window from the left?",
+    options: [
+      "After every single iteration of the loop.",
+      "When the right pointer reaches the end of the array.",
+      "When the current window violates the problem's condition (e.g., sum exceeds target, duplicate found).",
+      "When the left pointer catches up to the right pointer."
+    ],
+    correctAnswer: 2,
+    explanation: "You expand the window until the condition is violated, then shrink it from the left until it becomes valid again."
+  },
+  {
+    question: "Why is the time complexity of the Sliding Window technique O(N) even if there is a 'while' loop inside the 'for' loop?",
+    options: [
+      "Because the 'while' loop only executes O(log N) times.",
+      "Because the left and right pointers only move forward, visiting each element at most twice.",
+      "Because the compiler automatically optimizes nested loops.",
+      "Because we break out of the loops early."
+    ],
+    correctAnswer: 1,
+    explanation: "Each element is added to the window at most once (by the right pointer) and removed at most once (by the left pointer), resulting in O(N) total operations."
+  },
+  {
+    question: "Which of the following problems is best solved using a Fixed-Size Sliding Window?",
+    options: [
+      "Longest Substring Without Repeating Characters",
+      "Smallest Subarray with a sum greater than X",
+      "Maximum Sum Subarray of Size K",
+      "Minimum Window Substring"
+    ],
+    correctAnswer: 2,
+    explanation: "Since the window size 'K' is fixed and given, it's a classic fixed-size sliding window problem. The others require dynamically adjusting the window size."
+  },
+  {
+    question: "When applying a Sliding Window to a string to find the longest substring with K unique characters, what auxiliary data structure is most helpful to track characters inside the window?",
+    options: [
+      "A Stack",
+      "A Queue",
+      "A HashMap or Frequency Array",
+      "A Priority Queue (Heap)"
+    ],
+    correctAnswer: 2,
+    explanation: "A HashMap or Frequency Array is used to keep track of the count of each character currently in the window, allowing you to easily check if there are exactly K unique characters."
+  },
+  {
+  question: "What happens when the sliding window moves one step forward in a fixed-size sliding window?",
+  options: [
+    "A new element is added to the right and the leftmost element is removed.",
+    "The entire window is recalculated from scratch.",
+    "Only the left pointer moves.",
+    "The window size doubles."
+  ],
+  correctAnswer: 0,
+  explanation: "In a fixed-size sliding window, the leftmost element leaves the window while a new element enters from the right."
+},
+{
+  question: "Which type of problems is Sliding Window most commonly used for?",
+  options: [
+    "Problems involving contiguous subarrays or substrings.",
+    "Sorting arrays.",
+    "Graph traversal.",
+    "Binary tree traversal."
+  ],
+  correctAnswer: 0,
+  explanation: "Sliding Window is primarily used for problems involving contiguous sequences in arrays or strings."
+},
+{
+  question: "Which pointer is typically moved first when expanding a variable-size sliding window?",
+  options: [
+    "Left pointer",
+    "Right pointer",
+    "Both pointers together",
+    "Neither pointer"
+  ],
+  correctAnswer: 1,
+  explanation: "The right pointer expands the window by including new elements, while the left pointer moves only when the window needs to shrink."
+},
+{
+  question: "Which of the following is NOT a common Sliding Window application?",
+  options: [
+    "Longest substring without repeating characters",
+    "Maximum average subarray",
+    "Breadth First Search traversal",
+    "Minimum window substring"
+  ],
+  correctAnswer: 2,
+  explanation: "Breadth First Search is a graph traversal algorithm and does not use the Sliding Window technique."
+},
+{
+  question: "What is the main idea behind the Sliding Window technique?",
+  options: [
+    "Recompute every possible subarray independently.",
+    "Reuse information from the previous window instead of recalculating everything.",
+    "Sort the array before processing.",
+    "Use recursion to examine all possibilities."
+  ],
+  correctAnswer: 1,
+  explanation: "Sliding Window improves efficiency by updating the current window incrementally instead of recalculating values for every new window."
+},
+{
+  question: "Which data structure is commonly used with Sliding Window problems involving character frequencies?",
+  options: [
+    "Stack",
+    "HashMap",
+    "Binary Tree",
+    "Heap"
+  ],
+  correctAnswer: 1,
+  explanation: "A HashMap (or frequency array) efficiently keeps track of character counts inside the current window."
+},
+{
+  question: "What is the time complexity of the Sliding Window technique for most problems?",
+  options: [
+    "O(n²)",
+    "O(log n)",
+    "O(n)",
+    "O(n log n)"
+  ],
+  correctAnswer: 2,
+  explanation: "Since both left and right pointers move forward at most n times, the overall complexity is O(n)."
+},
+{
+  question: "Which type of Sliding Window uses a window size that changes during execution?",
+  options: [
+    "Fixed-size Sliding Window",
+    "Variable-size Sliding Window",
+    "Circular Window",
+    "Static Window"
+  ],
+  correctAnswer: 1,
+  explanation: "Variable-size Sliding Window expands or shrinks depending on the problem constraints."
+},
+{
+  question: "When solving 'Longest Substring Without Repeating Characters', why is the left pointer moved?",
+  options: [
+    "To increase the window size",
+    "To remove duplicate characters from the current window",
+    "To sort the substring",
+    "To restart the algorithm"
+  ],
+  correctAnswer: 1,
+  explanation: "The left pointer moves forward until the duplicate character is removed, restoring a valid window."
+},
+{
+  question: "What is the main purpose of maintaining a running sum in a fixed-size Sliding Window?",
+  options: [
+    "To avoid recalculating the sum of every window",
+    "To sort the array",
+    "To count duplicate elements",
+    "To reverse the window"
+  ],
+  correctAnswer: 0,
+  explanation: "The running sum is updated by adding the incoming element and subtracting the outgoing element, avoiding repeated calculations."
+},
+{
+  question: "Which problem is commonly solved using a variable-size Sliding Window?",
+  options: [
+    "Maximum Sum Subarray of Size K",
+    "Minimum Window Substring",
+    "Merge Sort",
+    "Binary Search"
+  ],
+  correctAnswer: 1,
+  explanation: "The Minimum Window Substring problem requires dynamically expanding and shrinking the window."
+},
+{
+  question: "What happens when the current window satisfies the required condition in a variable-size Sliding Window problem?",
+  options: [
+    "The window is always expanded",
+    "The window may be shrunk to find a better answer",
+    "The algorithm stops immediately",
+    "The array is sorted"
+  ],
+  correctAnswer: 1,
+  explanation: "Once a valid window is found, it is often shrunk to determine whether a smaller valid window exists."
+},
+{
+  question: "Sliding Window is most suitable when dealing with:",
+  options: [
+    "Non-contiguous elements",
+    "Contiguous subarrays or substrings",
+    "Graph edges",
+    "Binary Search Trees"
+  ],
+  correctAnswer: 1,
+  explanation: "Sliding Window works efficiently for contiguous sequences because the window moves continuously through the data."
+},
+{
+  question: "What is the biggest advantage of Sliding Window compared to recalculating every subarray?",
+  options: [
+    "Less recursion",
+    "Reuses previous computations for better efficiency",
+    "Requires sorting first",
+    "Uses divide and conquer"
+  ],
+  correctAnswer: 1,
+  explanation: "Sliding Window updates the current window instead of recomputing values from scratch, significantly improving performance."
+},
+{
+  question: "Which scenario is ideal for applying the Sliding Window technique?",
+  options: [
+    "Finding the maximum sum of a contiguous subarray of size K",
+    "Sorting an unsorted array",
+    "Finding the height of a binary tree",
+    "Traversing a graph using DFS"
+  ],
+  correctAnswer: 0,
+  explanation: "Problems involving contiguous subarrays or substrings with fixed or variable lengths are ideal for the Sliding Window technique."
+},
+{
+  question: "In a variable-size Sliding Window, what is the purpose of moving the left pointer?",
+  options: [
+    "To expand the window",
+    "To shrink the window and satisfy the required condition",
+    "To restart the algorithm",
+    "To sort the window"
+  ],
+  correctAnswer: 1,
+  explanation: "The left pointer is moved to shrink the window whenever it violates the required condition or when trying to optimize the answer."
+},
+{
+  question: "Which of the following problems is NOT typically solved using the Sliding Window technique?",
+  options: [
+    "Maximum Sum Subarray",
+    "Longest Repeating Character Replacement",
+    "Topological Sorting",
+    "Longest Substring Without Repeating Characters"
+  ],
+  correctAnswer: 2,
+  explanation: "Topological Sorting is a graph algorithm and does not use the Sliding Window technique."
+},
+{
+  question: "Why is Sliding Window more efficient than checking every possible subarray?",
+  options: [
+    "It uses recursion",
+    "It avoids repeated calculations by updating the current window",
+    "It sorts the array first",
+    "It performs binary search"
+  ],
+  correctAnswer: 1,
+  explanation: "Instead of recalculating every window from scratch, Sliding Window updates the current result incrementally."
+},
+{
+  question: "What does the right pointer represent in the Sliding Window technique?",
+  options: [
+    "The beginning of the window",
+    "The end of the current window",
+    "The maximum element",
+    "The smallest element"
+  ],
+  correctAnswer: 1,
+  explanation: "The right pointer expands the window by including new elements."
+},
+{
+  question: "If a fixed-size window has size K, how many windows exist in an array of size N?",
+  options: [
+    "N - K + 1",
+    "N + K",
+    "K",
+    "N × K"
+  ],
+  correctAnswer: 0,
+  explanation: "There are exactly N − K + 1 possible contiguous windows of size K."
+},
+{
+  question: "Which operation is performed when a new element enters a fixed-size Sliding Window?",
+  options: [
+    "Only remove an element",
+    "Add the new element and remove the oldest one",
+    "Sort the window",
+    "Restart the computation"
+  ],
+  correctAnswer: 1,
+  explanation: "The oldest element leaves the window while the new element is added, allowing efficient updates."
+},
+{
+  question: "Which technique is often combined with Sliding Window for string problems?",
+  options: [
+    "HashMap or Frequency Array",
+    "Binary Search Tree",
+    "Heap",
+    "AVL Tree"
+  ],
+  correctAnswer: 0,
+  explanation: "A HashMap or frequency array is commonly used to track character frequencies inside the current window."
+},
+{
+  question: "What is the maximum number of times an element is processed in a typical Sliding Window algorithm?",
+  options: [
+    "Once",
+    "Twice",
+    "N times",
+    "Log N times"
+  ],
+  correctAnswer: 1,
+  explanation: "Each element is visited once by the right pointer and once by the left pointer, resulting in at most two visits."
+},
+{
+  question: "Which problem is a classic example of a variable-size Sliding Window?",
+  options: [
+    "Maximum Sum of Size K",
+    "Longest Subarray with Sum ≤ K",
+    "Merge Sort",
+    "Selection Sort"
+  ],
+  correctAnswer: 1,
+  explanation: "The window size changes dynamically while maintaining the required condition."
+},
+{
+  question: "Which statement about the Sliding Window technique is TRUE?",
+  options: [
+    "It always requires nested loops with O(n²) complexity",
+    "It is useful only for arrays",
+    "It efficiently processes contiguous sequences by maintaining a moving window",
+    "It works only on sorted data"
+  ],
+  correctAnswer: 2,
+  explanation: "Sliding Window is designed for efficiently processing contiguous subarrays or substrings while maintaining information about the current window."
+}
+];
+
+const Quiz = () => {
+  return <QuizEngine title="Sliding Window Technique Quiz" questions={slidingWindowQuestions} />;
+};
+
+export default Quiz;
diff --git a/src/app/visualizer/array/sorting/quiz/SortingQuizClient.jsx b/src/app/visualizer/array/sorting/quiz/SortingQuizClient.jsx
new file mode 100644
index 000000000..59ab06271
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/SortingQuizClient.jsx
@@ -0,0 +1,146 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowLeft, Play } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function SortingQuizClient() {
+  const quizzes = [
+    {
+      title: "Bubble Sort Quiz",
+      href: "/visualizer/array/sorting/quiz/bubblesort",
+      filename: "bubble_sort_quiz.js",
+      description: "Test your understanding of adjacent swapping, bubble iterations, and bubble sort characteristics.",
+    },
+    {
+      title: "Selection Sort Quiz",
+      href: "/visualizer/array/sorting/quiz/selectionsort",
+      filename: "selection_sort_quiz.js",
+      description: "Test your understanding of scanning for minimum values, positional swaps, and performance parameters.",
+    },
+    {
+      title: "Insertion Sort Quiz",
+      href: "/visualizer/array/sorting/quiz/insertionsort",
+      filename: "insertion_sort_quiz.js",
+      description: "Test your knowledge of key shifting, sorting sub-arrays, and adaptive scenarios.",
+    },
+    {
+      title: "Merge Sort Quiz",
+      href: "/visualizer/array/sorting/quiz/mergesort",
+      filename: "merge_sort_quiz.js",
+      description: "Test your knowledge of divide-and-conquer strategy, split phases, and merging procedures.",
+    },
+    {
+      title: "Quick Sort Quiz",
+      href: "/visualizer/array/sorting/quiz/quicksort",
+      filename: "quick_sort_quiz.js",
+      description: "Test your knowledge of pivot selections, partitioning strategies, and recursion trees.",
+    },
+    {
+      title: "Shell Sort Quiz",
+      href: "/visualizer/array/sorting/quiz/shell-sort",
+      filename: "shell_sort_quiz.js",
+      description:
+        "Test your understanding of Shell Sort, gap sequences, insertion-based sorting, and algorithm optimization.",
+    },
+    {
+      title: "Bucket Sort Quiz",
+      href: "/visualizer/array/sorting/quiz/bucket-sort",
+      filename: "bucket_sort_quiz.js",
+      description:
+        "Test your understanding of bucket distribution, sorting within buckets, complexity, and Bucket Sort applications.",
+    },
+    {
+      title: "Tim Sort Quiz",
+      href: "/visualizer/array/sorting/quiz/timsort",
+      filename: "tim_sort_quiz.js",
+      description:
+        "Test your understanding of Tim Sort, runs, hybrid sorting, merge operations, and adaptive sorting techniques.",
+    },
+    {
+      title: "Heap Sort Quiz",
+      href: "/visualizer/array/sorting/quiz/heapsort",
+      filename: "heap_sort_quiz.js",
+      description: "Test your understanding of heapify operations, tree structure structures, and heap-based deletion.",
+    },
+    {
+      title: "Radix Sort Quiz",
+      href: "/visualizer/array/sorting/quiz/radixsort",
+      filename: "radix_sort_quiz.js",
+      description: "Test your understanding of digit-based sorting, stable sub-sorts, and non-comparative sorting.",
+    },
+    {
+      title: "Counting Sort Quiz",
+      href: "/visualizer/array/sorting/quiz/countingsort",
+      filename: "counting_sort_quiz.js",
+      description: "Test your knowledge of frequency arrays, prefix sums, and stable index mappings.",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-[var(--udemy-text)] dark:text-white transition-colors duration-300 pb-20">
+      
+      {/* Header / Hero */}
+      <section className="relative pt-6 pb-4">
+        <div className="max-w-[1100px] mx-auto px-4">
+          <Link href="/visualizer/quiz">
+            <button className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] dark:text-[var(--color-primary-light)] hover:opacity-85 transition-opacity mb-3">
+              <ArrowLeft size={16} />
+              <span>Back to all quizzes</span>
+            </button>
+          </Link>
+          <h1 className="text-2xl md:text-3xl font-black mb-2">
+            Sorting Quiz Portal
+          </h1>
+          <p className="text-[14px] text-surface-600 dark:text-surface-400 font-medium">
+            Test your understanding of sorting algorithms. Choose a specific algorithm quiz below.
+          </p>
+        </div>
+      </section>
+
+      {/* Grid of Sub-quizzes */}
+      <div className="max-w-[1100px] mx-auto px-4 mt-8">
+        <div className="grid md:grid-cols-2 gap-6 items-stretch">
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4, delay: index * 0.05, ease: [0.22, 1, 0.36, 1] }}
+              whileHover={{ y: -6, scale: 1.015 }}
+              whileTap={{ scale: 0.985 }}
+              className="group flex flex-col h-full rounded-2xl border border-indigo-500/20 dark:border-indigo-500/30 bg-white dark:bg-[#1a1a1a] overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
+            >
+              {/* Terminal command execution style top bar */}
+              <div className="flex items-center justify-between px-4 py-2.5 bg-indigo-500/10 dark:bg-indigo-500/20 border-b border-indigo-500/20 dark:border-indigo-500/30">
+                <div className="flex items-center gap-1.5 font-mono text-[11px] text-surface-600 dark:text-surface-300">
+                  <span className="text-violet-500 font-bold">$</span>
+                  <span>node {quiz.filename}</span>
+                </div>
+              </div>
+
+              {/* Main Card Content */}
+              <div className="p-6 flex-1 flex flex-col justify-between">
+                <div>
+                  <h2 className="text-[20px] font-extrabold text-surface-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors mb-2">
+                    {quiz.title}
+                  </h2>
+                  <p className="text-[14px] text-surface-600 dark:text-surface-300 leading-relaxed mb-6">
+                    {quiz.description}
+                  </p>
+                </div>
+
+                <Link href={quiz.href} className="block mt-auto w-full">
+                  <button className="w-full h-11 rounded-xl bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 text-white font-bold text-[14px] flex items-center justify-center gap-2 shadow-sm hover:shadow-md transition-all">
+                    <span>Start Quiz</span>
+                    <Play size={14} className="fill-current" />
+                  </button>
+                </Link>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/sorting/quiz/bubblesort/page.jsx b/src/app/visualizer/array/sorting/quiz/bubblesort/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/bubblesort/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/sorting/quiz/bubblesort/quiz.jsx b/src/app/visualizer/array/sorting/quiz/bubblesort/quiz.jsx
new file mode 100644
index 000000000..120245f6f
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/bubblesort/quiz.jsx
@@ -0,0 +1,139 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const BubbleSortQuiz = () => {
+  const questions = [
+    {
+      question: "What is the basic principle of Bubble Sort?",
+      options: [
+        "Dividing the list into smaller sublists",
+        "Repeatedly swapping adjacent elements if they are in the wrong order",
+        "Selecting the smallest element and moving it to the front",
+        "Merging two sorted lists into one",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Bubble Sort works by repeatedly stepping through the list, comparing adjacent elements and swapping them if they are in the wrong order.",
+    },
+    {
+      question: "What is the time complexity of Bubble Sort in the worst case?",
+      options: ["O(n)", "O(n log n)", "O(n²)", "O(1)"],
+      correctAnswer: 2,
+      explanation:
+        "In the worst case (when the list is sorted in reverse order), Bubble Sort requires O(n²) comparisons and swaps.",
+    },
+    {
+      question:
+        "In the array [5, 1, 4, 2, 8], how many swaps occur during the first pass of Bubble Sort?",
+      options: ["1", "2", "3", "4"],
+      correctAnswer: 2,
+      explanation:
+        "First pass swaps (5,1), (5,4), and (5,2) - totaling 3 swaps. The pair (5,8) doesn't need swapping.",
+    },
+    {
+      question: "When would Bubble Sort perform at its best?",
+      options: [
+        "When the array is in random order",
+        "When the array is sorted in reverse order",
+        "When the array is already sorted",
+        "When the array contains duplicate values",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Bubble Sort performs best (O(n)) when the array is already sorted, as it only needs one pass through the array without any swaps.",
+    },
+    {
+      question: "What is the space complexity of Bubble Sort?",
+      options: ["O(n)", "O(n log n)", "O(n²)", "O(1)"],
+      correctAnswer: 3,
+      explanation:
+        "Bubble Sort is an in-place algorithm that only requires O(1) additional space for temporary storage during swaps.",
+    },
+    {
+      question:
+        "How can you optimize Bubble Sort to stop early if the array becomes sorted?",
+      options: [
+        "By counting the number of swaps",
+        "By using a flag to check if any swaps occurred in a pass",
+        "By reducing the array size after each pass",
+        "By sorting the array in both directions",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Using a flag to track if any swaps occurred during a pass allows the algorithm to terminate early if the array is already sorted.",
+    },
+    {
+      question:
+        "Why is Bubble Sort rarely used in practice for large datasets?",
+      options: [
+        "Because it's too complex to implement",
+        "Because it's not a stable sorting algorithm",
+        "Because of its O(n²) time complexity for average cases",
+        "Because it requires O(n) additional space",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "While simple to implement, Bubble Sort's O(n²) time complexity makes it inefficient for large datasets compared to algorithms like QuickSort or MergeSort.",
+    },
+    {
+  question: "What is the basic principle of Bubble Sort?",
+  options: [
+    "Divide the array into halves",
+    "Repeatedly compare and swap adjacent elements",
+    "Select the smallest element each time",
+    "Insert elements into their correct position"
+  ],
+  correctAnswer: 1,
+  explanation: "Bubble Sort repeatedly compares adjacent elements and swaps them if they are in the wrong order until the array is sorted."
+},
+{
+  question: "What is the worst-case time complexity of Bubble Sort?",
+  options: [
+    "O(log n)",
+    "O(n)",
+    "O(n log n)",
+    "O(n²)"
+  ],
+  correctAnswer: 3,
+  explanation: "Bubble Sort has a worst-case time complexity of O(n²) because it may need to compare every pair of adjacent elements multiple times."
+},
+{
+  question: "When does Bubble Sort achieve its best-case time complexity?",
+  options: [
+    "When the array is reverse sorted",
+    "When the array is already sorted (with optimization)",
+    "When the array contains duplicate values",
+    "When the array has only odd numbers"
+  ],
+  correctAnswer: 1,
+  explanation: "With the optimized version of Bubble Sort, an already sorted array requires only one pass, giving a best-case complexity of O(n)."
+},
+{
+  question: "After the first complete pass of Bubble Sort, where does the largest element move?",
+  options: [
+    "Beginning of the array",
+    "Middle of the array",
+    "End of the array",
+    "It remains in the same position"
+  ],
+  correctAnswer: 2,
+  explanation: "During the first pass, the largest element 'bubbles up' to the last position."
+},
+{
+  question: "Is Bubble Sort a stable sorting algorithm?",
+  options: [
+    "Yes",
+    "No",
+    "Only for integers",
+    "Only for sorted arrays"
+  ],
+  correctAnswer: 0,
+  explanation: "Bubble Sort is stable because equal elements retain their relative order after sorting."
+}
+  ];
+
+  return <QuizEngine title="Bubble Sort Quiz Challenge" questions={questions} />;
+};
+
+export default BubbleSortQuiz;
diff --git a/src/app/visualizer/array/sorting/quiz/bucket-sort/page.jsx b/src/app/visualizer/array/sorting/quiz/bucket-sort/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/bucket-sort/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/sorting/quiz/bucket-sort/quiz.jsx b/src/app/visualizer/array/sorting/quiz/bucket-sort/quiz.jsx
new file mode 100644
index 000000000..3281bed87
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/bucket-sort/quiz.jsx
@@ -0,0 +1,255 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the primary idea behind Bucket Sort?",
+    options: [
+      "Compare adjacent elements repeatedly",
+      "Divide elements into buckets and sort each bucket",
+      "Build a binary heap",
+      "Partition the array into two halves"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Bucket Sort distributes elements into multiple buckets, sorts each bucket individually, and then combines them."
+  },
+  {
+    question: "Bucket Sort works best when the input data is:",
+    options: [
+      "Randomly distributed",
+      "Uniformly distributed",
+      "Reverse sorted",
+      "Nearly sorted"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Bucket Sort performs best when the input values are uniformly distributed across the range."
+  },
+  {
+    question: "Bucket Sort belongs to which category of sorting algorithms?",
+    options: [
+      "Comparison-based",
+      "Non-comparison-based",
+      "Recursive",
+      "Divide and Conquer"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Bucket Sort distributes elements into buckets rather than relying solely on comparisons."
+  },
+  {
+    question: "Which algorithm is commonly used to sort individual buckets?",
+    options: [
+      "Insertion Sort",
+      "Quick Sort",
+      "Merge Sort",
+      "Selection Sort"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Insertion Sort is commonly used because buckets are usually small."
+  },
+  {
+    question: "What is the best-case time complexity of Bucket Sort?",
+    options: [
+      "O(n)",
+      "O(n log n)",
+      "O(n²)",
+      "O(log n)"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "With uniformly distributed data, Bucket Sort runs in linear time."
+  },
+  {
+    question: "What is the average-case time complexity of Bucket Sort?",
+    options: [
+      "O(n)",
+      "O(n²)",
+      "O(log n)",
+      "O(n³)"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "The average-case complexity is O(n) when elements are evenly distributed."
+  },
+  {
+    question: "What is the worst-case time complexity of Bucket Sort?",
+    options: [
+      "O(n)",
+      "O(n log n)",
+      "O(n²)",
+      "O(log n)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "If all elements fall into one bucket, Bucket Sort degrades to O(n²)."
+  },
+  {
+    question: "Bucket Sort is most suitable for:",
+    options: [
+      "Floating-point numbers",
+      "Graphs",
+      "Trees",
+      "Linked Lists"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Bucket Sort is often used for floating-point numbers uniformly distributed over a range."
+  },
+  {
+    question: "Which step comes first in Bucket Sort?",
+    options: [
+      "Merge buckets",
+      "Create buckets",
+      "Swap elements",
+      "Find pivot"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The algorithm begins by creating buckets based on the input range."
+  },
+  {
+    question: "After distributing elements into buckets, what is the next step?",
+    options: [
+      "Delete duplicates",
+      "Sort each bucket",
+      "Reverse the array",
+      "Create new buckets"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Each bucket is sorted individually before combining."
+  },
+  {
+    question: "Bucket Sort is generally:",
+    options: [
+      "Stable",
+      "Unstable",
+      "Recursive only",
+      "Heap-based"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Bucket Sort can be stable if a stable sorting algorithm is used within each bucket."
+  },
+  {
+    question: "What is the space complexity of Bucket Sort?",
+    options: [
+      "O(1)",
+      "O(n + k)",
+      "O(log n)",
+      "O(n²)"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Additional space is needed for buckets and their contents."
+  },
+  {
+    question: "What does 'k' represent in Bucket Sort?",
+    options: [
+      "Number of buckets",
+      "Number of swaps",
+      "Maximum element",
+      "Minimum element"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "k represents the number of buckets used."
+  },
+  {
+    question: "Bucket Sort performs poorly when:",
+    options: [
+      "Data is uniformly distributed",
+      "Most elements fall into a single bucket",
+      "Array size is small",
+      "Elements are unique"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Uneven distribution causes one bucket to become large, reducing efficiency."
+  },
+  {
+    question: "Bucket Sort is commonly used for:",
+    options: [
+      "Sorting decimal values",
+      "Sorting graphs",
+      "Searching arrays",
+      "Tree traversal"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Bucket Sort is particularly useful for floating-point and decimal values."
+  },
+  {
+    question: "Bucket Sort first divides the input based on:",
+    options: [
+      "Value range",
+      "Array index",
+      "Binary representation",
+      "Random order"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Elements are placed into buckets according to their value range."
+  },
+  {
+    question: "Which of the following is NOT an advantage of Bucket Sort?",
+    options: [
+      "Fast for uniformly distributed data",
+      "Simple implementation",
+      "Always O(n)",
+      "Can be stable"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Bucket Sort is not always O(n); its worst-case complexity is O(n²)."
+  },
+  {
+    question: "Bucket Sort is especially efficient when:",
+    options: [
+      "Input values are evenly spread",
+      "Input is reverse sorted",
+      "Input contains duplicates only",
+      "Input size is always 2"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Uniformly distributed input leads to balanced buckets and better performance."
+  },
+  {
+    question: "After sorting all buckets, the final step is to:",
+    options: [
+      "Delete buckets",
+      "Merge buckets into one sorted array",
+      "Reverse each bucket",
+      "Shuffle the buckets"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The sorted buckets are concatenated to form the final sorted array."
+  },
+  {
+    question: "Which statement about Bucket Sort is TRUE?",
+    options: [
+      "It always uses recursion",
+      "It distributes elements into buckets before sorting",
+      "It always compares adjacent elements",
+      "It cannot sort decimal numbers"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Bucket Sort works by distributing elements into buckets and sorting each bucket individually."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Bucket Sort Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/sorting/quiz/countingsort/page.jsx b/src/app/visualizer/array/sorting/quiz/countingsort/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/countingsort/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/sorting/quiz/countingsort/quiz.jsx b/src/app/visualizer/array/sorting/quiz/countingsort/quiz.jsx
new file mode 100644
index 000000000..c73eacdbd
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/countingsort/quiz.jsx
@@ -0,0 +1,198 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const CountingSortQuiz = () => {
+  const questions = [
+    {
+      question: "What is the basic idea behind Counting Sort?",
+      options: [
+        "Compare adjacent elements repeatedly",
+        "Count the occurrences of each value",
+        "Divide the array into smaller arrays",
+        "Build a binary heap",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Counting Sort works by counting how many times each value appears and then reconstructing the sorted array.",
+    },
+    {
+      question: "Counting Sort is most efficient when:",
+      options: [
+        "The input values are within a small range",
+        "The array is already sorted",
+        "The array contains floating-point numbers",
+        "The array has no duplicate values",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Counting Sort performs best when the range of input values is relatively small.",
+    },
+    {
+      question: "What is the average time complexity of Counting Sort?",
+      options: [
+        "O(n²)",
+        "O(n log n)",
+        "O(n + k)",
+        "O(log n)",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Counting Sort has a time complexity of O(n + k), where n is the number of elements and k is the range of input values.",
+    },
+    {
+      question: "What does 'k' represent in the complexity O(n + k)?",
+      options: [
+        "Number of comparisons",
+        "Range of input values",
+        "Number of recursive calls",
+        "Output array size",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "k represents the range of possible input values.",
+    },
+    {
+      question: "Counting Sort belongs to which category?",
+      options: [
+        "Comparison-based sorting",
+        "Non-comparison sorting",
+        "Divide and Conquer",
+        "Recursive sorting",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Counting Sort is a non-comparison sorting algorithm.",
+    },
+    {
+      question: "Which auxiliary data structure is used in Counting Sort?",
+      options: [
+        "Stack",
+        "Queue",
+        "Count Array",
+        "Binary Heap",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "A Count Array stores the frequency of each value in the input.",
+    },
+    {
+      question: "Why is Counting Sort considered stable?",
+      options: [
+        "Because it uses recursion",
+        "Because equal elements preserve their relative order",
+        "Because it performs comparisons",
+        "Because it sorts in-place",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "A stable sorting algorithm keeps equal elements in the same relative order as the input.",
+    },
+    {
+      question: "What is the auxiliary space complexity of Counting Sort?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n + k)",
+        "O(n²)",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Extra memory is needed for the count array and output array.",
+    },
+    {
+      question: "What is the first step of Counting Sort?",
+      options: [
+        "Choose a pivot",
+        "Build the count array",
+        "Swap adjacent elements",
+        "Reverse the array",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The algorithm first counts the frequency of each element.",
+    },
+    {
+      question: "Why are prefix sums calculated in Counting Sort?",
+      options: [
+        "To remove duplicates",
+        "To determine the final position of each element",
+        "To reduce memory usage",
+        "To compare elements faster",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Prefix sums determine the correct index of each value in the sorted output.",
+    },
+    {
+      question: "Counting Sort becomes inefficient when:",
+      options: [
+        "The array is already sorted",
+        "The range of values is very large",
+        "The array contains duplicate values",
+        "The array is small",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "A large value range requires a large count array, increasing memory usage.",
+    },
+    {
+      question: "Counting Sort is mainly designed for:",
+      options: [
+        "Strings",
+        "Floating-point numbers",
+        "Integers within a bounded range",
+        "Graphs",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Counting Sort is designed primarily for integers within a limited range.",
+    },
+    {
+      question: "Can standard Counting Sort directly handle negative integers?",
+      options: [
+        "Yes",
+        "No",
+        "Only if the array is sorted",
+        "Only if duplicates are removed",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Standard Counting Sort assumes non-negative integers. Negative values require shifting the range.",
+    },
+    {
+      question: "Which algorithm commonly uses Counting Sort as a subroutine?",
+      options: [
+        "Heap Sort",
+        "Quick Sort",
+        "Radix Sort",
+        "Merge Sort",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Radix Sort relies on Counting Sort because it is stable.",
+    },
+    {
+      question: "Which statement about Counting Sort is correct?",
+      options: [
+        "It compares every pair of elements",
+        "It sorts elements by counting their occurrences",
+        "It always runs in O(n²)",
+        "It only works for sorted arrays",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Counting Sort sorts values based on their frequencies instead of comparing elements.",
+    },
+  ];
+
+  return (
+    <QuizEngine
+      title="Counting Sort Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default CountingSortQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/array/sorting/quiz/heapsort/page.jsx b/src/app/visualizer/array/sorting/quiz/heapsort/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/heapsort/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/sorting/quiz/heapsort/quiz.jsx b/src/app/visualizer/array/sorting/quiz/heapsort/quiz.jsx
new file mode 100644
index 000000000..5603d5871
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/heapsort/quiz.jsx
@@ -0,0 +1,198 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const HeapSortQuiz = () => {
+  const questions = [
+    {
+      question: "What data structure is Heap Sort based on?",
+      options: [
+        "Queue",
+        "Heap",
+        "Stack",
+        "Linked List"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Heap Sort is based on the Heap data structure, usually implemented as a Binary Max Heap."
+    },
+    {
+      question: "What is the worst-case time complexity of Heap Sort?",
+      options: [
+        "O(n)",
+        "O(log n)",
+        "O(n log n)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Heap Sort has a worst-case time complexity of O(n log n)."
+    },
+    {
+      question: "Which type of heap is used for sorting an array in ascending order?",
+      options: [
+        "Min Heap",
+        "Max Heap",
+        "AVL Tree",
+        "Binary Search Tree"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "A Max Heap is used so the largest element is repeatedly placed at the end."
+    },
+    {
+      question: "What is the auxiliary space complexity of Heap Sort?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Heap Sort is an in-place sorting algorithm and uses constant extra space."
+    },
+    {
+      question: "Is Heap Sort a stable sorting algorithm?",
+      options: [
+        "Yes",
+        "No",
+        "Only for integers",
+        "Depends on the input"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Heap Sort is not stable because equal elements may not preserve their relative order."
+    },
+    {
+      question: "What is the first step of Heap Sort?",
+      options: [
+        "Choose a pivot",
+        "Build a Max Heap",
+        "Merge subarrays",
+        "Reverse the array"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The algorithm first converts the input array into a Max Heap."
+    },
+    {
+      question: "After building the Max Heap, what happens next?",
+      options: [
+        "Delete the smallest element",
+        "Swap the root with the last element",
+        "Split the array",
+        "Insert a new value"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The largest element at the root is swapped with the last element, then heapify is performed."
+    },
+    {
+      question: "Heap Sort uses which tree structure?",
+      options: [
+        "AVL Tree",
+        "Binary Heap",
+        "Trie",
+        "Red-Black Tree"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Heap Sort uses a Binary Heap, which is a complete binary tree."
+    },
+    {
+      question: "In a Max Heap, the parent node is:",
+      options: [
+        "Smaller than its children",
+        "Greater than or equal to its children",
+        "Equal to its children",
+        "Always a leaf node"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Every parent node in a Max Heap is greater than or equal to its children."
+    },
+    {
+      question: "Heap Sort belongs to which category?",
+      options: [
+        "Comparison-based sorting",
+        "Non-comparison sorting",
+        "Hashing algorithm",
+        "Searching algorithm"
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Heap Sort is a comparison-based sorting algorithm."
+    },
+    {
+      question: "What is the best-case time complexity of Heap Sort?",
+      options: [
+        "O(n)",
+        "O(log n)",
+        "O(n log n)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Heap Sort performs O(n log n) in the best, average, and worst cases."
+    },
+    {
+      question: "Which operation is repeatedly used in Heap Sort?",
+      options: [
+        "Merge",
+        "Partition",
+        "Heapify",
+        "Insertion"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Heapify restores the heap property after every swap."
+    },
+    {
+      question: "Heap Sort guarantees which time complexity?",
+      options: [
+        "O(n)",
+        "O(log n)",
+        "O(n log n)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Heap Sort always guarantees O(n log n) performance."
+    },
+    {
+      question: "Heap Sort is mainly preferred because it:",
+      options: [
+        "Is stable",
+        "Needs no comparisons",
+        "Provides guaranteed O(n log n) performance",
+        "Uses recursion only"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Heap Sort has guaranteed O(n log n) time complexity regardless of input."
+    },
+    {
+      question: "Which statement about Heap Sort is correct?",
+      options: [
+        "It is stable",
+        "It requires O(n) extra memory",
+        "It is an in-place comparison sorting algorithm",
+        "It works only for integers"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Heap Sort is an in-place comparison sorting algorithm."
+    }
+  ];
+
+  return (
+    <QuizEngine
+      title="Heap Sort Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default HeapSortQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/array/sorting/quiz/insertionsort/page.jsx b/src/app/visualizer/array/sorting/quiz/insertionsort/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/insertionsort/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/sorting/quiz/insertionsort/quiz.jsx b/src/app/visualizer/array/sorting/quiz/insertionsort/quiz.jsx
new file mode 100644
index 000000000..6390c3321
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/insertionsort/quiz.jsx
@@ -0,0 +1,144 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const InsertionSortQuiz = () => {
+  const questions = [
+    {
+      question: "What is the basic principle of Insertion Sort?",
+      options: [
+        "Dividing the list into smaller sublists and merging them",
+        "Building the final sorted array one item at a time by inserting each element in its correct position",
+        "Repeatedly swapping adjacent elements if they are in the wrong order",
+        "Selecting the smallest element and moving it to the front"
+      ],
+      correctAnswer: 1,
+      explanation: "Insertion Sort works by building the final sorted array one item at a time, similar to how you might sort playing cards in your hands."
+    },
+    {
+      question: "What is the time complexity of Insertion Sort in the worst case?",
+      options: [
+        "O(n)",
+        "O(n log n)",
+        "O(n²)",
+        "O(1)"
+      ],
+      correctAnswer: 2,
+      explanation: "In the worst case (when the list is sorted in reverse order), Insertion Sort requires O(n²) comparisons and shifts."
+    },
+    {
+      question: "In the array [7, 3, 5, 2, 1], how many shifts occur when inserting the element '2'?",
+      options: [
+        "1",
+        "2",
+        "3",
+        "4"
+      ],
+      correctAnswer: 2,
+      explanation: "When inserting '2', we need to shift '7', '5', and '3' to the right (3 shifts) before inserting '2' at the beginning."
+    },
+    {
+      question: "When would Insertion Sort perform at its best?",
+      options: [
+        "When the array is in random order",
+        "When the array is sorted in reverse order",
+        "When the array is already sorted",
+        "When the array contains duplicate values"
+      ],
+      correctAnswer: 2,
+      explanation: "Insertion Sort performs best (O(n)) when the array is already sorted, as it only needs to make comparisons without any shifts."
+    },
+    {
+      question: "What is the space complexity of Insertion Sort?",
+      options: [
+        "O(n)",
+        "O(n log n)",
+        "O(n²)",
+        "O(1)"
+      ],
+      correctAnswer: 3,
+      explanation: "Insertion Sort is an in-place algorithm that only requires O(1) additional space for temporary storage during shifts."
+    },
+    {
+      question: "Which of these is NOT an advantage of Insertion Sort?",
+      options: [
+        "Efficient for small datasets",
+        "Stable (maintains relative order of equal elements)",
+        "Online (can sort as it receives input)",
+        "Efficient for large, randomly ordered datasets"
+      ],
+      correctAnswer: 3,
+      explanation: "Insertion Sort is not efficient for large, randomly ordered datasets due to its O(n²) average time complexity."
+    },
+    {
+      question: "Why might hybrid algorithms like TimSort use Insertion Sort?",
+      options: [
+        "Because it's the fastest sorting algorithm for all cases",
+        "Because it has excellent cache performance",
+        "Because of its low overhead for small subarrays",
+        "Because it's the easiest to implement"
+      ],
+      correctAnswer: 2,
+      explanation: "Hybrid algorithms often use Insertion Sort for small subarrays (typically ≤ 10 elements) due to its low overhead and good performance on small datasets."
+    },
+    {
+  question: "What is the basic idea behind Insertion Sort?",
+  options: [
+    "Repeatedly swap adjacent elements",
+    "Insert each element into its correct position in the sorted portion",
+    "Divide the array into halves",
+    "Always select the largest element first"
+  ],
+  correctAnswer: 1,
+  explanation: "Insertion Sort builds a sorted portion of the array by inserting each new element into its correct position."
+},
+{
+  question: "What is the worst-case time complexity of Insertion Sort?",
+  options: [
+    "O(log n)",
+    "O(n)",
+    "O(n log n)",
+    "O(n²)"
+  ],
+  correctAnswer: 3,
+  explanation: "In the worst case (reverse sorted array), each element must be shifted through the sorted portion, giving O(n²) time complexity."
+},
+{
+  question: "When does Insertion Sort achieve its best-case time complexity?",
+  options: [
+    "When the array is already sorted",
+    "When the array is reverse sorted",
+    "When all elements are different",
+    "When the array has duplicates"
+  ],
+  correctAnswer: 0,
+  explanation: "If the array is already sorted, Insertion Sort only performs comparisons, resulting in O(n) time complexity."
+},
+{
+  question: "Is Insertion Sort a stable sorting algorithm?",
+  options: [
+    "Yes",
+    "No",
+    "Only for integers",
+    "Only for sorted arrays"
+  ],
+  correctAnswer: 0,
+  explanation: "Insertion Sort is stable because equal elements retain their original relative order."
+},
+{
+  question: "Which type of dataset is Insertion Sort most suitable for?",
+  options: [
+    "Very large random datasets",
+    "Small or nearly sorted datasets",
+    "Distributed datasets",
+    "Binary trees"
+  ],
+  correctAnswer: 1,
+  explanation: "Insertion Sort performs efficiently on small or nearly sorted datasets due to its adaptive nature."
+}
+  ];
+
+  return <QuizEngine title="Insertion Sort Quiz Challenge" questions={questions} />;
+};
+
+export default InsertionSortQuiz;
diff --git a/src/app/visualizer/array/sorting/quiz/mergesort/page.jsx b/src/app/visualizer/array/sorting/quiz/mergesort/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/mergesort/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/sorting/quiz/mergesort/quiz.jsx b/src/app/visualizer/array/sorting/quiz/mergesort/quiz.jsx
new file mode 100644
index 000000000..9dbe7d1eb
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/mergesort/quiz.jsx
@@ -0,0 +1,144 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const MergeSortQuiz = () => {
+  const questions = [
+    {
+      question: "What is the fundamental principle behind Merge Sort?",
+      options: [
+        "Repeatedly swapping adjacent elements if they are in the wrong order",
+        "Dividing the array into smaller subarrays and merging them back in sorted order",
+        "Selecting the smallest element and moving it to the front",
+        "Building the sorted array one element at a time by insertion"
+      ],
+      correctAnswer: 1,
+      explanation: "Merge Sort follows the divide-and-conquer approach by recursively dividing the array into halves until single elements remain, then merging them back in sorted order."
+    },
+    {
+      question: "What is the time complexity of Merge Sort in all cases (best, average, worst)?",
+      options: [
+        "O(n)",
+        "O(n log n)",
+        "O(n²)",
+        "O(log n)"
+      ],
+      correctAnswer: 1,
+      explanation: "Merge Sort has consistent O(n log n) performance in all cases because it always divides the array in half and performs linear-time merges regardless of input order."
+    },
+    {
+      question: "In the array [38, 27, 43, 3, 9, 82, 10], how many times is the array divided before reaching single elements?",
+      options: [
+        "2 times",
+        "3 times",
+        "4 times",
+        "5 times"
+      ],
+      correctAnswer: 1,
+      explanation: "The array is divided 3 times: 1) [38,27,43] and [3,9,82,10], 2) [38], [27,43], [3,9], [82,10], 3) All subarrays are single elements."
+    },
+    {
+      question: "What is the space complexity of Merge Sort?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation: "Merge Sort requires O(n) additional space for temporary arrays during the merging phase, making it not an in-place sorting algorithm."
+    },
+    {
+      question: "Which of these is NOT an advantage of Merge Sort?",
+      options: [
+        "Stable sorting (maintains relative order of equal elements)",
+        "Excellent for large datasets",
+        "Requires minimal additional memory (O(1) space)",
+        "Well-suited for external sorting"
+      ],
+      correctAnswer: 2,
+      explanation: "Merge Sort requires O(n) additional space, not O(1). Its advantages include stability, consistent O(n log n) performance, and suitability for external sorting."
+    },
+    {
+      question: "Why is Merge Sort particularly good for sorting linked lists?",
+      options: [
+        "Because it doesn't require random access to elements",
+        "Because it's the fastest sorting algorithm for all cases",
+        "Because it can sort in O(1) space with linked lists",
+        "Because it doesn't require comparisons"
+      ],
+      correctAnswer: 0,
+      explanation: "Merge Sort works well with linked lists because it primarily requires sequential access (not random access) during the merge phase, and it can be implemented with O(1) space for linked lists."
+    },
+    {
+      question: "What makes Merge Sort suitable for external sorting (sorting data too large for RAM)?",
+      options: [
+        "Its ability to sort with minimal comparisons",
+        "Its divide-and-conquer approach that works well with sequential access",
+        "Its in-place sorting capability",
+        "Its O(n) best-case time complexity"
+      ],
+      correctAnswer: 1,
+      explanation: "Merge Sort's divide-and-conquer approach works well with sequential access patterns needed for external storage, and it can efficiently merge sorted runs from disk."
+    },
+    {
+  question: "What is the main strategy used by Merge Sort?",
+  options: [
+    "Greedy",
+    "Divide and Conquer",
+    "Dynamic Programming",
+    "Backtracking"
+  ],
+  correctAnswer: 1,
+  explanation: "Merge Sort follows the Divide and Conquer strategy by recursively splitting the array and then merging the sorted halves."
+},
+{
+  question: "What is the worst-case time complexity of Merge Sort?",
+  options: [
+    "O(n²)",
+    "O(n log n)",
+    "O(log n)",
+    "O(n)"
+  ],
+  correctAnswer: 1,
+  explanation: "Merge Sort performs O(n log n) operations in the best, average, and worst cases."
+},
+{
+  question: "What is the extra space complexity of Merge Sort?",
+  options: [
+    "O(1)",
+    "O(log n)",
+    "O(n)",
+    "O(n²)"
+  ],
+  correctAnswer: 2,
+  explanation: "Merge Sort requires an auxiliary array during merging, resulting in O(n) extra space."
+},
+{
+  question: "Is Merge Sort a stable sorting algorithm?",
+  options: [
+    "Yes",
+    "No",
+    "Only for integers",
+    "Only for linked lists"
+  ],
+  correctAnswer: 0,
+  explanation: "Merge Sort is stable because equal elements preserve their relative order after sorting."
+},
+{
+  question: "Which type of dataset is Merge Sort especially suitable for?",
+  options: [
+    "Very small arrays",
+    "Large datasets requiring stable sorting",
+    "Already sorted arrays only",
+    "Hash tables"
+  ],
+  correctAnswer: 1,
+  explanation: "Merge Sort is efficient for large datasets and guarantees O(n log n) performance with stable sorting."
+}
+  ];
+
+  return <QuizEngine title="Merge Sort Quiz Challenge" questions={questions} />;
+};
+
+export default MergeSortQuiz;
diff --git a/src/app/visualizer/array/sorting/quiz/page.jsx b/src/app/visualizer/array/sorting/quiz/page.jsx
new file mode 100644
index 000000000..6c78681eb
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/page.jsx
@@ -0,0 +1,5 @@
+import SortingQuizClient from "./SortingQuizClient";
+
+export default function Page() {
+  return <SortingQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/sorting/quiz/quicksort/page.jsx b/src/app/visualizer/array/sorting/quiz/quicksort/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/quicksort/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/sorting/quiz/quicksort/quiz.jsx b/src/app/visualizer/array/sorting/quiz/quicksort/quiz.jsx
new file mode 100644
index 000000000..7b0b5f376
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/quicksort/quiz.jsx
@@ -0,0 +1,177 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QuickSortQuiz = () => {
+  const questions = [
+    {
+      question: "What is the fundamental principle behind Quick Sort?",
+      options: [
+        "Merging two sorted lists into one",
+        "Building a heap structure from the array",
+        "Dividing the array around a pivot element",
+        "Finding the minimum element repeatedly"
+      ],
+      correctAnswer: 2,
+      explanation: "Quick Sort uses a divide-and-conquer approach by selecting a pivot element and partitioning the array into elements less than and greater than the pivot."
+    },
+    {
+      question: "What is the average-case time complexity of Quick Sort?",
+      options: [
+        "O(n)",
+        "O(n log n)",
+        "O(n²)",
+        "O(log n)"
+      ],
+      correctAnswer: 1,
+      explanation: "With good pivot selection that creates balanced partitions, Quick Sort averages O(n log n) time complexity."
+    },
+    {
+      question: "Which pivot selection strategy helps avoid the worst-case O(n²) scenario?",
+      options: [
+        "Always choosing the first element",
+        "Always choosing the last element",
+        "Median-of-three method",
+        "Always choosing the middle element"
+      ],
+      correctAnswer: 2,
+      explanation: "The median-of-three strategy (choosing the median of first, middle, and last elements) helps prevent consistently bad pivot choices that lead to unbalanced partitions."
+    },
+    {
+      question: "What is the space complexity of Quick Sort in the average case?",
+      options: [
+        "O(1)",
+        "O(n)",
+        "O(log n)",
+        "O(n log n)"
+      ],
+      correctAnswer: 2,
+      explanation: "Quick Sort requires O(log n) space for the call stack in the average case due to recursive calls, but can degrade to O(n) in worst-case scenarios."
+    },
+    {
+      question: "In the array [10, 80, 30, 90, 40, 50, 70], if we choose the last element as pivot, what is the array after the first partition?",
+      options: [
+        "[10, 30, 40, 50, 70, 80, 90]",
+        "[10, 30, 40] [50] [70, 80, 90]",
+        "[10, 30, 40, 50] [70] [80, 90]",
+        "[10, 80, 30, 90, 40, 50, 70]"
+      ],
+      correctAnswer: 2,
+      explanation: "With pivot=70, elements less than 70 (10,30,40,50) go left, elements greater (80,90) go right, and 70 is in its final position."
+    },
+    {
+      question: "Which of these is NOT an advantage of Quick Sort?",
+      options: [
+        "Excellent average-case performance",
+        "Stable sorting (maintains relative order of equal elements)",
+        "In-place sorting (requires minimal additional memory)",
+        "Cache-efficient due to sequential memory access"
+      ],
+      correctAnswer: 1,
+      explanation: "Quick Sort is not stable - the relative order of equal elements may change during partitioning."
+    },
+    {
+      question: "What causes Quick Sort's worst-case O(n²) time complexity?",
+      options: [
+        "When the array contains duplicate elements",
+        "When the pivot consistently creates highly unbalanced partitions",
+        "When the array size is very small",
+        "When using extra space for merging"
+      ],
+      correctAnswer: 1,
+      explanation: "The worst case occurs when the pivot selection consistently creates partitions of size n-1 and 0 (extremely unbalanced), leading to n nested calls."
+    },
+    {
+      question: "Why is Quick Sort often preferred over Merge Sort for in-memory sorting?",
+      options: [
+        "It has better worst-case time complexity",
+        "It is a stable sorting algorithm",
+        "It has better cache performance due to sequential access",
+        "It requires less code to implement"
+      ],
+      correctAnswer: 2,
+      explanation: "Quick Sort's sequential memory access pattern makes it more cache-friendly than Merge Sort, contributing to its better real-world performance despite having the same average time complexity."
+    },
+    {
+      question: "Which of these standard library implementations typically uses Quick Sort?",
+      options: [
+        "Python's sorted() function",
+        "Java's Arrays.sort() for primitive types",
+        "C++ STL's stable_sort()",
+        "JavaScript's Array.prototype.sort()"
+      ],
+      correctAnswer: 1,
+      explanation: "Java's Arrays.sort() uses a dual-pivot Quick Sort for primitive types (which don't need stability), while object sorting uses a stable Merge Sort variant."
+    },
+    {
+      question: "What is the primary purpose of the partition step in Quick Sort?",
+      options: [
+        "To divide the array into exactly equal halves",
+        "To place the pivot element in its correct final position",
+        "To sort the array in one pass",
+        "To identify duplicate elements in the array"
+      ],
+      correctAnswer: 1,
+      explanation: "The partition step's main goal is to place the pivot in its correct sorted position while arranging other elements to be less than or greater than the pivot."
+    },
+    {
+  question: "What is the main strategy used by Quick Sort?",
+  options: [
+    "Greedy",
+    "Divide and Conquer",
+    "Dynamic Programming",
+    "Backtracking"
+  ],
+  correctAnswer: 1,
+  explanation: "Quick Sort follows the Divide and Conquer approach by selecting a pivot and partitioning the array around it."
+},
+{
+  question: "What is the average-case time complexity of Quick Sort?",
+  options: [
+    "O(n²)",
+    "O(log n)",
+    "O(n log n)",
+    "O(n)"
+  ],
+  correctAnswer: 2,
+  explanation: "Quick Sort has an average-case time complexity of O(n log n), making it one of the fastest practical sorting algorithms."
+},
+{
+  question: "What is the worst-case time complexity of Quick Sort?",
+  options: [
+    "O(n)",
+    "O(n²)",
+    "O(log n)",
+    "O(n log n)"
+  ],
+  correctAnswer: 1,
+  explanation: "Quick Sort performs O(n²) in the worst case when poor pivot choices repeatedly create highly unbalanced partitions."
+},
+{
+  question: "What is the role of the pivot element in Quick Sort?",
+  options: [
+    "It stores the smallest element",
+    "It divides the array into smaller partitions",
+    "It merges sorted arrays",
+    "It keeps the array balanced"
+  ],
+  correctAnswer: 1,
+  explanation: "The pivot is used to partition the array so that smaller elements are placed before it and larger elements after it."
+},
+{
+  question: "Which statement about Quick Sort is correct?",
+  options: [
+    "It is always stable",
+    "It requires O(n) extra space",
+    "It is generally one of the fastest comparison-based sorting algorithms",
+    "It only works on linked lists"
+  ],
+  correctAnswer: 2,
+  explanation: "Quick Sort is widely used because of its excellent average-case performance, although the standard implementation is not stable."
+}
+  ];
+
+  return <QuizEngine title="Quick Sort Quiz Challenge" questions={questions} />;
+};
+
+export default QuickSortQuiz;
diff --git a/src/app/visualizer/array/sorting/quiz/radixsort/page.jsx b/src/app/visualizer/array/sorting/quiz/radixsort/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/radixsort/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/sorting/quiz/radixsort/quiz.jsx b/src/app/visualizer/array/sorting/quiz/radixsort/quiz.jsx
new file mode 100644
index 000000000..c09b01cb9
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/radixsort/quiz.jsx
@@ -0,0 +1,198 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const RadixSortQuiz = () => {
+  const questions = [
+    {
+      question: "What is the main idea behind Radix Sort?",
+      options: [
+        "Compare adjacent elements",
+        "Sort numbers digit by digit",
+        "Divide the array into halves",
+        "Build a binary heap",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Radix Sort processes numbers one digit at a time, usually from least significant digit to most significant digit.",
+    },
+    {
+      question: "Radix Sort is primarily used for:",
+      options: [
+        "Floating-point numbers",
+        "Strings only",
+        "Integers with fixed-length digits",
+        "Graphs",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Radix Sort works best for integers or fixed-length keys.",
+    },
+    {
+      question: "Which sorting algorithm is commonly used internally in Radix Sort?",
+      options: [
+        "Bubble Sort",
+        "Selection Sort",
+        "Counting Sort",
+        "Quick Sort",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Counting Sort is commonly used as the stable sorting algorithm for each digit.",
+    },
+    {
+      question: "Why must the internal sorting algorithm be stable?",
+      options: [
+        "To reduce memory usage",
+        "To preserve the order of equal digits",
+        "To increase comparisons",
+        "To remove duplicates",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "A stable sort preserves the relative order of equal elements, which is essential for Radix Sort.",
+    },
+    {
+      question: "What is the average time complexity of Radix Sort?",
+      options: [
+        "O(n²)",
+        "O(n log n)",
+        "O(d × (n + k))",
+        "O(log n)",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "The complexity depends on the number of digits (d) and the digit range (k).",
+    },
+    {
+      question: "In LSD Radix Sort, processing begins from:",
+      options: [
+        "Most significant digit",
+        "Middle digit",
+        "Least significant digit",
+        "Random digit",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "LSD Radix Sort starts from the least significant digit.",
+    },
+    {
+      question: "What does MSD stand for in Radix Sort?",
+      options: [
+        "Minimum Significant Digit",
+        "Most Significant Digit",
+        "Main Sorted Digit",
+        "Maximum Sorted Digit",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "MSD means Most Significant Digit.",
+    },
+    {
+      question: "Radix Sort is classified as:",
+      options: [
+        "Comparison-based sorting",
+        "Non-comparison sorting",
+        "Recursive sorting",
+        "Tree-based sorting",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Radix Sort does not compare elements directly.",
+    },
+    {
+      question: "Which of the following is an advantage of Radix Sort?",
+      options: [
+        "Always uses O(1) memory",
+        "Very efficient for fixed-length integers",
+        "Works only for sorted arrays",
+        "Requires no auxiliary space",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Radix Sort performs very well for integers with a limited number of digits.",
+    },
+    {
+      question: "Which statement about Radix Sort is true?",
+      options: [
+        "It always performs comparisons",
+        "It is a stable sorting algorithm",
+        "It only works for linked lists",
+        "It has O(n²) complexity",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Radix Sort is stable when its internal sorting algorithm is stable.",
+    },
+    {
+      question: "What does 'd' represent in Radix Sort complexity?",
+      options: [
+        "Number of digits",
+        "Depth of recursion",
+        "Number of comparisons",
+        "Array size",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "d represents the maximum number of digits.",
+    },
+    {
+      question: "What does 'k' represent in O(d × (n + k))?",
+      options: [
+        "Number of recursive calls",
+        "Range of each digit",
+        "Heap size",
+        "Pivot position",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "k is the number of possible digit values (usually 10).",
+    },
+    {
+      question: "Which base is most commonly used in decimal Radix Sort?",
+      options: [
+        "2",
+        "8",
+        "10",
+        "16",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Decimal Radix Sort uses base 10.",
+    },
+    {
+      question: "Radix Sort performs best when:",
+      options: [
+        "Numbers have similar digit lengths",
+        "The array is reverse sorted",
+        "The array contains floating-point values",
+        "The input is recursive",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Radix Sort is efficient when the number of digits is limited.",
+    },
+    {
+      question: "Which statement about Radix Sort is correct?",
+      options: [
+        "It compares every pair of elements",
+        "It sorts numbers digit by digit using a stable sort",
+        "It always uses recursion",
+        "It only works for negative numbers",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Radix Sort processes one digit at a time using a stable sorting algorithm.",
+    },
+  ];
+
+  return (
+    <QuizEngine
+      title="Radix Sort Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default RadixSortQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/array/sorting/quiz/selectionsort/page.jsx b/src/app/visualizer/array/sorting/quiz/selectionsort/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/selectionsort/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/sorting/quiz/selectionsort/quiz.jsx b/src/app/visualizer/array/sorting/quiz/selectionsort/quiz.jsx
new file mode 100644
index 000000000..b247347c1
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/selectionsort/quiz.jsx
@@ -0,0 +1,144 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const SelectionSortQuiz = () => {
+  const questions = [
+    {
+      question: "What is the basic principle of Selection Sort?",
+      options: [
+        "Dividing the list into smaller sublists",
+        "Repeatedly finding the minimum element and swapping it with the current position",
+        "Comparing adjacent elements and swapping if they're in the wrong order",
+        "Merging two sorted lists into one"
+      ],
+      correctAnswer: 1,
+      explanation: "Selection Sort works by repeatedly finding the minimum element from the unsorted part and putting it at the beginning."
+    },
+    {
+      question: "What is the time complexity of Selection Sort in all cases?",
+      options: [
+        "O(n)",
+        "O(n log n)",
+        "O(n²)",
+        "O(1)"
+      ],
+      correctAnswer: 2,
+      explanation: "Selection Sort always requires O(n²) comparisons regardless of input order because it must scan all remaining elements for each position."
+    },
+    {
+      question: "In the array [64, 25, 12, 22, 11], how many swaps occur during the entire sorting process?",
+      options: [
+        "1",
+        "2",
+        "4",
+        "5"
+      ],
+      correctAnswer: 2,
+      explanation: "Selection Sort makes only 4 swaps total (one for each element except the last): 64↔11, 25↔12, 22↔22 (no swap), and 64↔25."
+    },
+    {
+      question: "What makes Selection Sort different from Bubble Sort?",
+      options: [
+        "Selection Sort is stable while Bubble Sort is not",
+        "Selection Sort makes fewer swaps (O(n) vs O(n²))",
+        "Bubble Sort has better worst-case time complexity",
+        "Selection Sort requires additional O(n) space"
+      ],
+      correctAnswer: 1,
+      explanation: "The key advantage of Selection Sort is that it makes only O(n) swaps compared to Bubble Sort's O(n²) swaps in worst case."
+    },
+    {
+      question: "What is the space complexity of Selection Sort?",
+      options: [
+        "O(n)",
+        "O(n log n)",
+        "O(n²)",
+        "O(1)"
+      ],
+      correctAnswer: 3,
+      explanation: "Like Bubble Sort, Selection Sort is an in-place algorithm that only requires O(1) additional space for temporary storage during swaps."
+    },
+    {
+      question: "Why is Selection Sort not considered stable?",
+      options: [
+        "Because it changes the relative order of equal elements",
+        "Because its time complexity varies with input",
+        "Because it requires recursive implementation",
+        "Because it uses additional memory"
+      ],
+      correctAnswer: 0,
+      explanation: "Selection Sort isn't stable because the swapping of elements can change the relative order of equal keys (e.g., [5a, 2, 5b] → [2, 5b, 5a])."
+    },
+    {
+      question: "When might Selection Sort be preferred over other simple sorts?",
+      options: [
+        "When the input is already sorted",
+        "When memory writes are expensive",
+        "When stability is required",
+        "When dealing with very large datasets"
+      ],
+      correctAnswer: 1,
+      explanation: "Selection Sort's O(n) swaps make it useful when memory writes are expensive, even though it still requires O(n²) comparisons."
+    },
+    {
+    question: "What is the basic idea behind Selection Sort?",
+    options: [
+      "Swap adjacent elements repeatedly",
+      "Select the smallest element and place it in the correct position",
+      "Divide the array into halves",
+      "Insert elements into a sorted portion"
+    ],
+    correctAnswer: 1,
+    explanation: "Selection Sort repeatedly finds the smallest element from the unsorted portion and places it at the beginning."
+  },
+  {
+    question: "What is the worst-case time complexity of Selection Sort?",
+    options: [
+      "O(log n)",
+      "O(n)",
+      "O(n²)",
+      "O(n log n)"
+    ],
+    correctAnswer: 2,
+    explanation: "Selection Sort always performs O(n²) comparisons regardless of the initial order of the elements."
+  },
+  {
+    question: "How many swaps does Selection Sort perform in the worst case?",
+    options: [
+      "n²",
+      "n",
+      "n-1",
+      "1"
+    ],
+    correctAnswer: 2,
+    explanation: "Selection Sort performs at most n−1 swaps, making it efficient in terms of swap operations."
+  },
+  {
+    question: "Is Selection Sort a stable sorting algorithm?",
+    options: [
+      "Yes",
+      "No",
+      "Only for integers",
+      "Only for sorted arrays"
+    ],
+    correctAnswer: 1,
+    explanation: "Standard Selection Sort is not stable because swapping can change the relative order of equal elements."
+  },
+  {
+    question: "Which statement about Selection Sort is correct?",
+    options: [
+      "It requires additional memory",
+      "It always performs the same number of comparisons",
+      "It only works on sorted arrays",
+      "It is faster than Merge Sort for large datasets"
+    ],
+    correctAnswer: 1,
+    explanation: "Selection Sort performs the same number of comparisons regardless of whether the array is sorted or unsorted."
+  }
+  ];
+
+  return <QuizEngine title="Selection Sort Quiz Challenge" questions={questions} />;
+};
+
+export default SelectionSortQuiz;
diff --git a/src/app/visualizer/array/sorting/quiz/shell-sort/page.jsx b/src/app/visualizer/array/sorting/quiz/shell-sort/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/shell-sort/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/sorting/quiz/shell-sort/quiz.jsx b/src/app/visualizer/array/sorting/quiz/shell-sort/quiz.jsx
new file mode 100644
index 000000000..1b99bf214
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/shell-sort/quiz.jsx
@@ -0,0 +1,235 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+  const questions = [
+  {
+    question: "What is the primary idea behind Shell Sort?",
+    options: [
+      "Compare adjacent elements only",
+      "Sort elements far apart before reducing the gap",
+      "Always divide the array into two halves",
+      "Build a binary heap"
+    ],
+    correctAnswer: 1,
+    explanation: "Shell Sort improves Insertion Sort by first comparing elements that are far apart using a gap sequence."
+  },
+  {
+    question: "Shell Sort is an improvement of which sorting algorithm?",
+    options: [
+      "Bubble Sort",
+      "Merge Sort",
+      "Insertion Sort",
+      "Selection Sort"
+    ],
+    correctAnswer: 2,
+    explanation: "Shell Sort improves the efficiency of Insertion Sort by allowing exchanges of distant elements."
+  },
+  {
+    question: "Who invented Shell Sort?",
+    options: [
+      "Donald Knuth",
+      "Robert Sedgewick",
+      "Donald Shell",
+      "Tony Hoare"
+    ],
+    correctAnswer: 2,
+    explanation: "Shell Sort was introduced by Donald Shell in 1959."
+  },
+  {
+    question: "What is the first gap in the original Shell gap sequence?",
+    options: [
+      "n/2",
+      "n",
+      "1",
+      "2"
+    ],
+    correctAnswer: 0,
+    explanation: "The original Shell sequence starts with gap = n/2 and halves it until it becomes 1."
+  },
+  {
+    question: "The final gap used in Shell Sort is:",
+    options: [
+      "0",
+      "1",
+      "2",
+      "n/4"
+    ],
+    correctAnswer: 1,
+    explanation: "The algorithm always finishes with a gap of 1, making the final pass equivalent to Insertion Sort."
+  },
+  {
+    question: "What is the best-case time complexity of Shell Sort?",
+    options: [
+      "O(n)",
+      "O(n log n)",
+      "O(n²)",
+      "O(log n)"
+    ],
+    correctAnswer: 0,
+    explanation: "The best-case complexity can approach O(n), depending on the gap sequence."
+  },
+  {
+    question: "The worst-case time complexity of the original Shell Sort is approximately:",
+    options: [
+      "O(n²)",
+      "O(n log n)",
+      "O(log n)",
+      "O(n)"
+    ],
+    correctAnswer: 0,
+    explanation: "Using Shell's original gap sequence, the worst-case complexity is O(n²)."
+  },
+  {
+    question: "Shell Sort performs particularly well on:",
+    options: [
+      "Already partially sorted arrays",
+      "Linked Lists",
+      "Graphs",
+      "Trees"
+    ],
+    correctAnswer: 0,
+    explanation: "Shell Sort performs efficiently when the array is partially sorted."
+  },
+  {
+    question: "Shell Sort belongs to which category of sorting algorithms?",
+    options: [
+      "Comparison-based",
+      "Non-comparison-based",
+      "Hashing",
+      "Searching"
+    ],
+    correctAnswer: 0,
+    explanation: "Shell Sort compares elements to determine their order."
+  },
+  {
+    question: "Is Shell Sort stable?",
+    options: [
+      "Yes",
+      "No",
+      "Only for integers",
+      "Only for strings"
+    ],
+    correctAnswer: 1,
+    explanation: "Shell Sort is generally not a stable sorting algorithm."
+  },
+  {
+    question: "Is Shell Sort an in-place sorting algorithm?",
+    options: [
+      "Yes",
+      "No",
+      "Only for small arrays",
+      "Depends on compiler"
+    ],
+    correctAnswer: 0,
+    explanation: "Shell Sort sorts the array in place with O(1) extra space."
+  },
+  {
+    question: "What is the space complexity of Shell Sort?",
+    options: [
+      "O(1)",
+      "O(n)",
+      "O(log n)",
+      "O(n²)"
+    ],
+    correctAnswer: 0,
+    explanation: "Shell Sort requires only constant extra memory."
+  },
+  {
+    question: "Which sorting algorithm is executed during each gap pass?",
+    options: [
+      "Bubble Sort",
+      "Selection Sort",
+      "Insertion Sort",
+      "Merge Sort"
+    ],
+    correctAnswer: 2,
+    explanation: "Each gap pass is essentially a gapped version of Insertion Sort."
+  },
+  {
+    question: "Why does Shell Sort perform fewer shifts than Insertion Sort?",
+    options: [
+      "It uses recursion",
+      "It swaps only adjacent elements",
+      "Large gaps move elements closer to their final positions",
+      "It divides the array into halves"
+    ],
+    correctAnswer: 2,
+    explanation: "Large gaps reduce the total number of shifts needed later."
+  },
+  {
+    question: "Which gap sequence can improve Shell Sort performance?",
+    options: [
+      "Knuth Sequence",
+      "Sedgewick Sequence",
+      "Hibbard Sequence",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation: "Several gap sequences have been proposed to improve Shell Sort's performance."
+  },
+  {
+    question: "Shell Sort is most suitable when:",
+    options: [
+      "Memory is limited",
+      "Stable sorting is required",
+      "Data is stored in linked lists",
+      "Sorting graphs"
+    ],
+    correctAnswer: 0,
+    explanation: "Shell Sort is in-place and requires very little extra memory."
+  },
+  {
+    question: "What happens if the initial gap is chosen poorly?",
+    options: [
+      "Sorting becomes impossible",
+      "Performance may decrease",
+      "The array becomes corrupted",
+      "The algorithm becomes recursive"
+    ],
+    correctAnswer: 1,
+    explanation: "Gap sequence selection significantly affects Shell Sort's efficiency."
+  },
+  {
+    question: "Which statement about Shell Sort is TRUE?",
+    options: [
+      "It always runs in O(n log n)",
+      "It is always stable",
+      "Performance depends on the gap sequence",
+      "It requires additional arrays"
+    ],
+    correctAnswer: 2,
+    explanation: "The choice of gap sequence determines Shell Sort's performance."
+  },
+  {
+    question: "Which algorithm generally performs better than Shell Sort on very large datasets?",
+    options: [
+      "Merge Sort",
+      "Quick Sort",
+      "Heap Sort",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation: "Efficient O(n log n) algorithms usually outperform Shell Sort on very large datasets."
+  },
+  {
+    question: "A major advantage of Shell Sort is:",
+    options: [
+      "Guaranteed O(n log n) complexity",
+      "Simple implementation with improved performance over Insertion Sort",
+      "Stable sorting",
+      "Uses divide and conquer"
+    ],
+    correctAnswer: 1,
+    explanation: "Shell Sort is simple, in-place, and considerably faster than plain Insertion Sort for many practical inputs."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Shell Sort Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/sorting/quiz/timsort/page.jsx b/src/app/visualizer/array/sorting/quiz/timsort/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/timsort/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/sorting/quiz/timsort/quiz.jsx b/src/app/visualizer/array/sorting/quiz/timsort/quiz.jsx
new file mode 100644
index 000000000..609cd7d55
--- /dev/null
+++ b/src/app/visualizer/array/sorting/quiz/timsort/quiz.jsx
@@ -0,0 +1,255 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is Tim Sort?",
+    options: [
+      "A graph traversal algorithm",
+      "A hybrid sorting algorithm",
+      "A searching algorithm",
+      "A hashing algorithm"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Tim Sort is a hybrid sorting algorithm derived from Merge Sort and Insertion Sort."
+  },
+  {
+    question: "Tim Sort is primarily based on which two algorithms?",
+    options: [
+      "Quick Sort and Heap Sort",
+      "Merge Sort and Insertion Sort",
+      "Selection Sort and Bubble Sort",
+      "Counting Sort and Radix Sort"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Tim Sort combines the strengths of Merge Sort and Insertion Sort."
+  },
+  {
+    question: "Who developed Tim Sort?",
+    options: [
+      "Donald Knuth",
+      "Tony Hoare",
+      "Tim Peters",
+      "Donald Shell"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Tim Sort was developed by Tim Peters in 2002 for Python."
+  },
+  {
+    question: "Tim Sort is the default sorting algorithm in:",
+    options: [
+      "Python",
+      "Java (Objects)",
+      "Both Python and Java",
+      "C"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Python uses Tim Sort for list sorting, and Java uses it for sorting object arrays."
+  },
+  {
+    question: "Tim Sort performs especially well on:",
+    options: [
+      "Already partially sorted data",
+      "Random graphs",
+      "Binary trees",
+      "Hash tables"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Tim Sort is optimized for real-world data that is often partially sorted."
+  },
+  {
+    question: "What is a 'run' in Tim Sort?",
+    options: [
+      "A recursive function",
+      "A naturally ordered subsequence",
+      "A bucket",
+      "A pivot"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "A run is a consecutive sequence that is already sorted."
+  },
+  {
+    question: "Which sorting algorithm is used for small runs?",
+    options: [
+      "Heap Sort",
+      "Quick Sort",
+      "Insertion Sort",
+      "Selection Sort"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Insertion Sort efficiently sorts small runs."
+  },
+  {
+    question: "How are sorted runs combined in Tim Sort?",
+    options: [
+      "Partitioning",
+      "Heapify",
+      "Merging",
+      "Hashing"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Tim Sort merges sorted runs similarly to Merge Sort."
+  },
+  {
+    question: "The best-case time complexity of Tim Sort is:",
+    options: [
+      "O(n)",
+      "O(n²)",
+      "O(log n)",
+      "O(n log² n)"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Tim Sort achieves O(n) when the input is already nearly sorted."
+  },
+  {
+    question: "The average-case time complexity of Tim Sort is:",
+    options: [
+      "O(n)",
+      "O(n log n)",
+      "O(n²)",
+      "O(log n)"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The average running time is O(n log n)."
+  },
+  {
+    question: "The worst-case time complexity of Tim Sort is:",
+    options: [
+      "O(n²)",
+      "O(n log n)",
+      "O(log n)",
+      "O(n)"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Tim Sort guarantees O(n log n) worst-case performance."
+  },
+  {
+    question: "Tim Sort is:",
+    options: [
+      "Stable",
+      "Unstable",
+      "Recursive only",
+      "Non-comparison-based"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Tim Sort preserves the relative order of equal elements."
+  },
+  {
+    question: "The space complexity of Tim Sort is approximately:",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Tim Sort requires additional memory for merging runs."
+  },
+  {
+    question: "Why is Tim Sort efficient on real-world datasets?",
+    options: [
+      "It ignores duplicates",
+      "It detects naturally sorted runs",
+      "It always uses Quick Sort",
+      "It uses hashing"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Tim Sort takes advantage of existing order in the data."
+  },
+  {
+    question: "Tim Sort belongs to which category?",
+    options: [
+      "Comparison-based sorting",
+      "Hashing algorithm",
+      "Graph algorithm",
+      "Searching algorithm"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Tim Sort compares elements to determine their order."
+  },
+  {
+    question: "Which feature makes Tim Sort adaptive?",
+    options: [
+      "Random pivot selection",
+      "Detecting already sorted runs",
+      "Using buckets",
+      "Binary search only"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Tim Sort adapts to partially sorted input by identifying runs."
+  },
+  {
+    question: "Which statement about Tim Sort is TRUE?",
+    options: [
+      "It is unstable",
+      "It is adaptive",
+      "It requires no extra memory",
+      "It is slower than Bubble Sort"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Tim Sort is an adaptive sorting algorithm."
+  },
+  {
+    question: "Tim Sort is commonly used because it:",
+    options: [
+      "Always runs in O(n)",
+      "Performs well on practical datasets",
+      "Uses no comparisons",
+      "Requires no merging"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Tim Sort is designed for excellent practical performance."
+  },
+  {
+    question: "Which data structure does Tim Sort primarily sort?",
+    options: [
+      "Graphs",
+      "Arrays/Lists",
+      "Trees",
+      "Queues"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Tim Sort is designed for sorting arrays and lists."
+  },
+  {
+    question: "A major advantage of Tim Sort is:",
+    options: [
+      "Guaranteed O(1) time",
+      "Excellent performance on partially sorted data",
+      "No extra memory required",
+      "Works only on integers"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Tim Sort is highly efficient for partially sorted real-world datasets."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Tim Sort Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/ternary-search/AlgorithmClient.jsx b/src/app/visualizer/array/ternary-search/AlgorithmClient.jsx
new file mode 100644
index 000000000..93e1e6025
--- /dev/null
+++ b/src/app/visualizer/array/ternary-search/AlgorithmClient.jsx
@@ -0,0 +1,28 @@
+import Animation from "@/app/visualizer/array/ternary-search/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/array/ternary-search/codeBlock";
+import Content from "@/app/visualizer/array/ternary-search/content";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Array", "Ternary Search")}
+      title="Ternary Search"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[
+            { text: "Linear Search", url: "../linearsearch" },
+            { text: "Binary Search", url: "../binarysearch" },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/ternary-search/animation.jsx b/src/app/visualizer/array/ternary-search/animation.jsx
new file mode 100644
index 000000000..57121cb38
--- /dev/null
+++ b/src/app/visualizer/array/ternary-search/animation.jsx
@@ -0,0 +1,626 @@
+"use client";
+
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+} from "react";
+
+import GoButton from "@/app/components/ui/goButton";
+import ResetButton from "@/app/components/ui/resetButton";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+
+import {
+  saveToStorage,
+  loadFromStorage,
+  removeFromStorage,
+} from "@/utils/storage";
+
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+import { ternarySearchGenerator } from "@/features/algorithms/array/ternarySearchLogic";
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+
+  if (len <= 2) return "text-lg";
+  if (len === 3) return "text-sm";
+  return "text-xs";
+};
+
+const TernarySearch = () => {
+  const [arrayElements, setArrayElements] = useState(() =>
+    loadFromStorage("ternary-array-elements", "")
+  );
+
+  const [target, setTarget] = useState(() =>
+    loadFromStorage("ternary-target", "")
+  );
+
+  const [array, setArray] = useState([]);
+  const [targetValue, setTargetValue] = useState(null);
+
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+
+  const [autoSort, setAutoSort] = useState(false);
+  const [showAutoSort, setShowAutoSort] = useState(false);
+
+  const [visualState, setVisualState] = useState({
+    low: -1,
+    high: -1,
+    mid1: -1,
+    mid2: -1,
+    foundIndex: -1,
+    stepExplanation: "",
+    stepCount: 0,
+  });
+
+  useEffect(() => {
+    saveToStorage("ternary-array-elements", arrayElements);
+  }, [arrayElements]);
+
+  useEffect(() => {
+    saveToStorage("ternary-target", target);
+  }, [target]);
+
+  const steps = useMemo(() => {
+    if (array.length === 0 || targetValue === null) return [];
+
+    return Array.from(
+      ternarySearchGenerator(array, targetValue)
+    );
+  }, [array, targetValue]);
+
+  const onStep = useCallback(
+    (step) => {
+      let explanation = "";
+      let msg = "";
+      let msgType = "";
+
+      switch (step.type) {
+        case "checking":
+          explanation =
+            `Step ${step.step}: low=${step.l}, high=${step.h}, ` +
+            `mid1=${step.mid1}, mid2=${step.mid2}. ` +
+            `Compare target ${targetValue} with ` +
+            `arr[mid1]=${step.arrMid1} and arr[mid2]=${step.arrMid2}.`;
+          break;
+
+        case "found_mid1":
+          explanation =
+            `Target ${targetValue} found at mid1 (index ${step.mid1}).`;
+
+          msg = `Element ${targetValue} found at index ${step.mid1}!`;
+          msgType = "success";
+          break;
+
+        case "found_mid2":
+          explanation =
+            `Target ${targetValue} found at mid2 (index ${step.mid2}).`;
+
+          msg = `Element ${targetValue} found at index ${step.mid2}!`;
+          msgType = "success";
+          break;
+
+        case "discard_right_two_thirds":
+          explanation =
+            `Target is smaller than arr[mid1]. ` +
+            `Discard middle and right portions.`;
+          break;
+
+        case "discard_left_two_thirds":
+          explanation =
+            `Target is greater than arr[mid2]. ` +
+            `Discard left and middle portions.`;
+          break;
+
+        case "discard_outer_thirds":
+          explanation =
+            `Target lies between mid1 and mid2. ` +
+            `Discard both outer thirds.`;
+          break;
+
+        case "not_found":
+          explanation =
+            `Search range exhausted. Target ${targetValue} does not exist.`;
+
+          msg = `Element ${targetValue} not found.`;
+          msgType = "error";
+          break;
+
+        default:
+          break;
+      }
+
+      setVisualState({
+        low: step.l ?? -1,
+        high: step.h ?? -1,
+        mid1: step.mid1 ?? -1,
+        mid2: step.mid2 ?? -1,
+        foundIndex:
+          step.type === "found_mid1"
+            ? step.mid1
+            : step.type === "found_mid2"
+            ? step.mid2
+            : -1,
+        stepExplanation: explanation,
+        stepCount: step.step || 0,
+      });
+
+      if (msg) setMessage(msg);
+      if (msgType) setMessageType(msgType);
+    },
+    [targetValue]
+  );
+
+  const engine = useAnimationEngine({
+    steps,
+    onStep,
+    initialSpeed: 1000,
+  });
+
+  const isAnimating =
+    engine.isPlaying || engine.currentStep > 0;
+    const handleReset = () => {
+  engine.reset();
+
+  removeFromStorage("ternary-array-elements");
+  removeFromStorage("ternary-target");
+
+  setArray([]);
+  setTargetValue(null);
+
+  setMessage("");
+  setMessageType("");
+
+  setVisualState({
+    low: -1,
+    high: -1,
+    mid1: -1,
+    mid2: -1,
+    foundIndex: -1,
+    stepExplanation: "",
+    stepCount: 0,
+  });
+
+  setAutoSort(false);
+  setShowAutoSort(false);
+
+  setArrayElements("");
+  setTarget("");
+};
+
+const generateRandomArray = () => {
+  if (isAnimating) return;
+
+  const size = Math.floor(Math.random() * 6) + 5;
+
+  const arr = Array.from(
+    { length: size },
+    () => Math.floor(Math.random() * 100)
+  ).sort((a, b) => a - b);
+
+  setArrayElements(arr.join(", "));
+};
+
+const handleGo = (e) => {
+  e.preventDefault();
+
+  engine.reset();
+
+  setMessage("");
+  setMessageType("");
+
+  setVisualState({
+    low: -1,
+    high: -1,
+    mid1: -1,
+    mid2: -1,
+    foundIndex: -1,
+    stepExplanation: "",
+    stepCount: 0,
+  });
+
+  if (!arrayElements || !target) {
+    setMessage("Please fill in all fields.");
+    setMessageType("warning");
+    return;
+  }
+
+  const raw = arrayElements
+    .split(",")
+    .map((x) => x.trim());
+
+  if (raw.some((x) => x.includes("."))) {
+    setMessage(
+      "Only integers are supported."
+    );
+    setMessageType("warning");
+    return;
+  }
+
+  const elements = raw.map(Number);
+  const targetVal = Number(target);
+
+  if (
+    elements.some(isNaN) ||
+    isNaN(targetVal)
+  ) {
+    setMessage("Invalid input.");
+    setMessageType("warning");
+    return;
+  }
+
+  const sorted = elements.every(
+    (x, i) => i === 0 || x >= elements[i - 1]
+  );
+
+  if (!sorted && !autoSort) {
+    setMessage(
+      "Array must be sorted in ascending order."
+    );
+
+    setMessageType("warning");
+    setShowAutoSort(true);
+    return;
+  }
+
+  let processed = [...elements];
+
+  if (!sorted && autoSort) {
+    processed.sort((a, b) => a - b);
+
+    setArrayElements(processed.join(","));
+
+    setShowAutoSort(false);
+  }
+
+  setArray(processed);
+  setTargetValue(targetVal);
+
+  setTimeout(() => {
+    engine.play();
+  }, 50);
+};
+
+useVisualizerKeyboard({
+  onTogglePlayPause: engine.isPlaying
+    ? engine.pause
+    : () => {
+        if (array.length > 0) {
+          engine.play();
+        }
+      },
+
+  onStepForward: engine.stepForward,
+
+  onStepBackward: engine.stepBackward,
+
+  onSpeedChange: (s) =>
+    engine.setSpeed(s * 1000),
+
+  speed: engine.speed / 1000,
+
+  sorting: engine.isPlaying,
+
+  sorted:
+    engine.currentStep ===
+      steps.length - 1 &&
+    steps.length > 0,
+});
+
+const messageClass =
+  messageType === "success"
+    ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
+    : messageType === "warning"
+    ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
+    : "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200";
+
+return (
+  <main className="container mx-auto">
+    <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+      Visualize how Ternary Search efficiently finds an element in a sorted array.
+    </p>
+
+    <form
+      onSubmit={handleGo}
+      className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8"
+    >
+      <div className="mb-4">
+        <label className="block mb-2">
+          Sorted Array Elements
+        </label>
+
+        <div className="flex gap-2">
+
+          <input
+            type="text"
+            value={arrayElements}
+            disabled={isAnimating}
+            onChange={(e) =>
+              setArrayElements(e.target.value)
+            }
+            placeholder="1,3,5,7,9"
+            className="w-full p-3 rounded-lg border"
+          />
+
+          <button
+            type="button"
+            onClick={generateRandomArray}
+            disabled={isAnimating}
+            className="px-4 bg-[#a435f0] text-white rounded-lg"
+          >
+            Random
+          </button>
+
+        </div>
+      </div>
+
+      <div className="mb-4">
+
+        <label className="block mb-2">
+          Target
+        </label>
+
+        <div className="flex flex-col sm:flex-row gap-4">
+
+          <input
+            type="number"
+            value={target}
+            disabled={isAnimating}
+            onChange={(e) =>
+              setTarget(e.target.value)
+            }
+            className="w-full sm:max-w-xs p-3 rounded-lg border"
+          />
+
+          <div className="flex gap-2">
+
+            <GoButton
+              onClick={handleGo}
+              isAnimating={isAnimating}
+              disabled={isAnimating}
+            />
+
+            <ResetButton
+              onReset={handleReset}
+              isAnimating={isAnimating}
+            />
+
+          </div>
+
+        </div>
+
+      </div>
+
+      {isAnimating && (
+        <PlaybackControls
+          isPlaying={engine.isPlaying}
+          onPlayPause={
+            engine.isPlaying
+              ? engine.pause
+              : () => engine.play()
+          }
+          speed={engine.speed / 1000}
+          onSpeedChange={(s) =>
+            engine.setSpeed(s * 1000)
+          }
+          onStepForward={engine.stepForward}
+          onStepBackward={engine.stepBackward}
+          onReset={engine.reset}
+          onExplainStep={() => {}}
+          disabled={steps.length === 0}
+          progressText={`${Math.max(
+            engine.currentStep + 1,
+            0
+          )} / ${steps.length}`}
+        />
+      )}
+    </form>
+
+    {message && (
+      <div
+        className={`max-w-3xl mx-auto mb-8 p-4 rounded-lg ${messageClass}`}
+      >
+        <p className="text-center font-medium">
+          {message}
+        </p>
+
+        {showAutoSort && (
+          <div className="mt-3 flex justify-center">
+
+            <label className="flex items-center gap-2">
+
+              <input
+                type="checkbox"
+                checked={autoSort}
+                onChange={(e) =>
+                  setAutoSort(e.target.checked)
+                }
+              />
+
+              Auto-sort the array
+
+            </label>
+
+          </div>
+        )}
+      </div>
+    )}
+        {array.length > 0 && (
+      <div className="max-w-5xl mx-auto space-y-6">
+
+        {visualState.stepExplanation && (
+          <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+
+            <div className="flex items-center gap-2 bg-[#a435f0]/10 dark:bg-[#a435f0]/20 px-4 py-2 border-b border-[#a435f0]/20">
+              <span className="w-2 h-2 rounded-full bg-[#a435f0] animate-pulse"></span>
+
+              <span className="text-sm font-semibold text-[#a435f0] uppercase">
+                Step Explanation
+              </span>
+
+              {visualState.stepCount > 0 && (
+                <span className="ml-auto text-xs text-gray-500">
+                  Iteration #{visualState.stepCount}
+                </span>
+              )}
+            </div>
+
+            <div className="px-4 py-3">
+              <p className="font-mono text-sm leading-relaxed">
+                {visualState.stepExplanation}
+              </p>
+            </div>
+
+            <div className="px-4 py-2 bg-gray-50 dark:bg-gray-900/50 border-t flex flex-wrap gap-4 text-xs">
+
+              <span>
+                <span className="font-semibold text-blue-600">
+                  ■ Blue
+                </span>{" "}
+                = Search Range
+              </span>
+
+              <span>
+                <span className="font-semibold text-yellow-500">
+                  ■ Yellow
+                </span>{" "}
+                = mid1
+              </span>
+
+              <span>
+                <span className="font-semibold text-orange-500">
+                  ■ Orange
+                </span>{" "}
+                = mid2
+              </span>
+
+              <span>
+                <span className="font-semibold text-green-600">
+                  ■ Green
+                </span>{" "}
+                = Found
+              </span>
+
+              <span>
+                <span className="font-semibold text-gray-400">
+                  ■ Gray
+                </span>{" "}
+                = Eliminated
+              </span>
+
+            </div>
+          </div>
+        )}
+
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+
+          <h2 className="text-2xl font-semibold text-center mb-6">
+            Array Visualization
+          </h2>
+
+          <div className="flex flex-wrap justify-center gap-4">
+
+            {array.map((element, index) => {
+
+              const labels = [];
+
+              if (index === visualState.low) labels.push("low");
+              if (index === visualState.mid1) labels.push("mid1");
+              if (index === visualState.mid2) labels.push("mid2");
+              if (index === visualState.high) labels.push("high");
+
+              let bg =
+                "bg-[#E5E7EB] dark:bg-gray-700";
+
+              let border =
+                "border-[#D1D5DB] dark:border-gray-600";
+
+              if (index === visualState.foundIndex) {
+
+                bg = "bg-green-500";
+                border = "border-green-700";
+
+              } else if (index === visualState.mid1) {
+
+                bg = "bg-yellow-400";
+                border = "border-yellow-700";
+
+              } else if (index === visualState.mid2) {
+
+                bg = "bg-orange-400";
+                border = "border-orange-700";
+
+              } else if (
+                visualState.low !== -1 &&
+                visualState.high !== -1 &&
+                index >= visualState.low &&
+                index <= visualState.high
+              ) {
+
+                bg = "bg-blue-300";
+                border = "border-blue-600";
+              }
+
+              return (
+                <div
+                  key={index}
+                  className="flex flex-col items-center"
+                >
+
+                  <div
+                    className={`w-16 h-16 rounded-lg border-2 flex items-center justify-center transition-all duration-300 ${bg} ${border} ${getFontSize(
+                      element
+                    )}`}
+                  >
+                    {element}
+                  </div>
+
+                  <div className="mt-1 text-xs font-mono text-center h-10">
+
+                    {labels.map((label) => (
+
+                      <div
+                        key={label}
+                        className={
+                          label === "mid1"
+                            ? "text-yellow-600 font-semibold"
+                            : label === "mid2"
+                            ? "text-orange-600 font-semibold"
+                            : "text-blue-600 font-semibold"
+                        }
+                      >
+                        {label}
+                      </div>
+
+                    ))}
+
+                    <div className="text-gray-400 text-[10px]">
+                      [{index}]
+                    </div>
+
+                  </div>
+
+                </div>
+              );
+
+            })}
+
+          </div>
+
+        </div>
+
+      </div>
+    )}
+
+  </main>
+);
+
+};
+
+export default TernarySearch;
\ No newline at end of file
diff --git a/src/app/visualizer/array/ternary-search/codeBlock.jsx b/src/app/visualizer/array/ternary-search/codeBlock.jsx
new file mode 100644
index 000000000..614810938
--- /dev/null
+++ b/src/app/visualizer/array/ternary-search/codeBlock.jsx
@@ -0,0 +1,257 @@
+"use client";
+
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const codeExamples = {
+  javascript: `// Ternary Search in JavaScript (Iterative)
+function ternarySearch(arr, target) {
+    let left = 0;
+    let right = arr.length - 1;
+
+    while (left <= right) {
+        const mid1 = left + Math.floor((right - left) / 3);
+        const mid2 = right - Math.floor((right - left) / 3);
+
+        if (arr[mid1] === target) {
+            return mid1;
+        }
+
+        if (arr[mid2] === target) {
+            return mid2;
+        }
+
+        if (target < arr[mid1]) {
+            right = mid1 - 1;
+        } else if (target > arr[mid2]) {
+            left = mid2 + 1;
+        } else {
+            left = mid1 + 1;
+            right = mid2 - 1;
+        }
+    }
+
+    return -1;
+}
+
+// Usage Example
+const numbers = [10, 20, 30, 40, 50, 60, 70, 80];
+const target = 60;
+
+const index = ternarySearch(numbers, target);
+
+if (index !== -1) {
+    console.log(\`Element found at index \${index}\`);
+} else {
+    console.log("Element not found");
+}`,
+
+  python: `# Ternary Search in Python (Iterative)
+
+def ternary_search(arr, target):
+    left = 0
+    right = len(arr) - 1
+
+    while left <= right:
+        mid1 = left + (right - left) // 3
+        mid2 = right - (right - left) // 3
+
+        if arr[mid1] == target:
+            return mid1
+
+        if arr[mid2] == target:
+            return mid2
+
+        if target < arr[mid1]:
+            right = mid1 - 1
+        elif target > arr[mid2]:
+            left = mid2 + 1
+        else:
+            left = mid1 + 1
+            right = mid2 - 1
+
+    return -1
+
+
+numbers = [10, 20, 30, 40, 50, 60, 70, 80]
+target = 60
+
+result = ternary_search(numbers, target)
+
+if result != -1:
+    print(f"Element found at index {result}")
+else:
+    print("Element not found")`,
+
+  java: `// Ternary Search in Java
+
+public class TernarySearch {
+
+    static int ternarySearch(int[] arr, int target) {
+
+        int left = 0;
+        int right = arr.length - 1;
+
+        while (left <= right) {
+
+            int mid1 = left + (right - left) / 3;
+            int mid2 = right - (right - left) / 3;
+
+            if (arr[mid1] == target)
+                return mid1;
+
+            if (arr[mid2] == target)
+                return mid2;
+
+            if (target < arr[mid1]) {
+                right = mid1 - 1;
+            } else if (target > arr[mid2]) {
+                left = mid2 + 1;
+            } else {
+                left = mid1 + 1;
+                right = mid2 - 1;
+            }
+        }
+
+        return -1;
+    }
+
+    public static void main(String[] args) {
+
+        int[] numbers = {10,20,30,40,50,60,70,80};
+
+        int target = 60;
+
+        int index = ternarySearch(numbers, target);
+
+        if(index != -1)
+            System.out.println("Element found at index " + index);
+        else
+            System.out.println("Element not found");
+    }
+}`,
+
+  c: `// Ternary Search in C
+
+#include <stdio.h>
+
+int ternarySearch(int arr[], int size, int target) {
+
+    int left = 0;
+    int right = size - 1;
+
+    while(left <= right) {
+
+        int mid1 = left + (right-left)/3;
+        int mid2 = right - (right-left)/3;
+
+        if(arr[mid1] == target)
+            return mid1;
+
+        if(arr[mid2] == target)
+            return mid2;
+
+        if(target < arr[mid1])
+            right = mid1 - 1;
+
+        else if(target > arr[mid2])
+            left = mid2 + 1;
+
+        else {
+            left = mid1 + 1;
+            right = mid2 - 1;
+        }
+    }
+
+    return -1;
+}
+
+int main() {
+
+    int arr[] = {10,20,30,40,50,60,70,80};
+
+    int size = sizeof(arr)/sizeof(arr[0]);
+
+    int target = 60;
+
+    int index = ternarySearch(arr,size,target);
+
+    if(index != -1)
+        printf("Element found at index %d\\n",index);
+    else
+        printf("Element not found\\n");
+
+    return 0;
+}`,
+
+  cpp: `// Ternary Search in C++
+
+#include <iostream>
+#include <vector>
+
+using namespace std;
+
+int ternarySearch(vector<int> &arr, int target) {
+
+    int left = 0;
+    int right = arr.size() - 1;
+
+    while(left <= right) {
+
+        int mid1 = left + (right-left)/3;
+        int mid2 = right - (right-left)/3;
+
+        if(arr[mid1] == target)
+            return mid1;
+
+        if(arr[mid2] == target)
+            return mid2;
+
+        if(target < arr[mid1])
+            right = mid1 - 1;
+
+        else if(target > arr[mid2])
+            left = mid2 + 1;
+
+        else {
+            left = mid1 + 1;
+            right = mid2 - 1;
+        }
+    }
+
+    return -1;
+}
+
+int main() {
+
+    vector<int> numbers = {10,20,30,40,50,60,70,80};
+
+    int target = 60;
+
+    int index = ternarySearch(numbers,target);
+
+    if(index != -1)
+        cout << "Element found at index " << index << endl;
+    else
+        cout << "Element not found" << endl;
+
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: "ternarySearch.js",
+  python: "ternary_search.py",
+  java: "TernarySearch.java",
+  c: "ternary_search.c",
+  cpp: "ternary_search.cpp",
+};
+
+const TernarySearchCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default TernarySearchCode;
\ No newline at end of file
diff --git a/src/app/visualizer/array/ternary-search/content.jsx b/src/app/visualizer/array/ternary-search/content.jsx
new file mode 100644
index 000000000..97ff9babe
--- /dev/null
+++ b/src/app/visualizer/array/ternary-search/content.jsx
@@ -0,0 +1,230 @@
+"use client";
+
+import React from "react";
+import {
+  Clock,
+  Database,
+  CheckCircle,
+  XCircle,
+  Lightbulb,
+  Target,
+} from "lucide-react";
+
+const TernarySearchContent = () => {
+  return (
+    <div className="space-y-8">
+
+      {/* Overview */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4">Overview</h2>
+
+        <p className="text-gray-700 dark:text-gray-300 leading-8">
+          <strong>Ternary Search</strong> is a divide-and-conquer searching
+          algorithm used to find an element in a <strong>sorted array</strong>.
+          Instead of dividing the search space into two parts like Binary Search,
+          it divides the array into <strong>three equal parts</strong> using two
+          middle indices (<code>mid1</code> and <code>mid2</code>). Based on the
+          comparison with these middle elements, one-third of the array is
+          selected for the next search iteration.
+        </p>
+      </section>
+
+      {/* Working */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+          <Target className="text-purple-600" />
+          How Ternary Search Works
+        </h2>
+
+        <ol className="list-decimal pl-6 space-y-2 text-gray-700 dark:text-gray-300">
+          <li>Start with two pointers: <strong>low</strong> and <strong>high</strong>.</li>
+          <li>Find two middle indices:</li>
+
+          <div className="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 font-mono">
+            mid1 = low + (high - low) / 3
+            <br />
+            mid2 = high - (high - low) / 3
+          </div>
+
+          <li>Compare the target with both middle elements.</li>
+
+          <li>If the target equals either middle element, return its index.</li>
+
+          <li>
+            If the target is smaller than <strong>mid1</strong>, search the left
+            third.
+          </li>
+
+          <li>
+            If the target is greater than <strong>mid2</strong>, search the right
+            third.
+          </li>
+
+          <li>
+            Otherwise, search the middle third.
+          </li>
+
+          <li>
+            Repeat until the target is found or the search range becomes empty.
+          </li>
+        </ol>
+      </section>
+
+      {/* Complexity */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+          <Clock className="text-blue-500" />
+          Time Complexity
+        </h2>
+
+        <div className="overflow-x-auto">
+          <table className="min-w-full border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden">
+
+            <thead className="bg-purple-600 text-white">
+              <tr>
+                <th className="p-3 text-left">Case</th>
+                <th className="p-3 text-left">Complexity</th>
+              </tr>
+            </thead>
+
+            <tbody>
+
+              <tr className="border-t">
+                <td className="p-3">Best Case</td>
+                <td className="p-3">O(1)</td>
+              </tr>
+
+              <tr className="border-t">
+                <td className="p-3">Average Case</td>
+                <td className="p-3">O(log₃ n)</td>
+              </tr>
+
+              <tr className="border-t">
+                <td className="p-3">Worst Case</td>
+                <td className="p-3">O(log₃ n)</td>
+              </tr>
+
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* Space Complexity */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+          <Database className="text-green-600" />
+          Space Complexity
+        </h2>
+
+        <div className="bg-green-100 dark:bg-green-900 p-4 rounded-lg">
+          <strong>O(1)</strong> (Iterative implementation)
+        </div>
+      </section>
+
+      {/* Advantages */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+          <CheckCircle className="text-green-500" />
+          Advantages
+        </h2>
+
+        <ul className="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
+          <li>Efficient searching in sorted arrays.</li>
+          <li>Uses divide-and-conquer strategy.</li>
+          <li>Reduces the search space to one-third in each iteration.</li>
+          <li>Easy to understand once Binary Search is known.</li>
+          <li>Works well for theoretical divide-and-conquer problems.</li>
+        </ul>
+      </section>
+
+      {/* Disadvantages */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+          <XCircle className="text-red-500" />
+          Disadvantages
+        </h2>
+
+        <ul className="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
+          <li>Requires the array to be sorted.</li>
+          <li>Performs more comparisons than Binary Search.</li>
+          <li>Binary Search is generally faster in practice.</li>
+          <li>Not suitable for unsorted data.</li>
+        </ul>
+      </section>
+
+      {/* Applications */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+          <Lightbulb className="text-yellow-500" />
+          Applications
+        </h2>
+
+        <ul className="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
+          <li>Searching in sorted arrays.</li>
+          <li>Competitive programming problems.</li>
+          <li>Mathematical optimization problems.</li>
+          <li>Finding maxima or minima in unimodal functions.</li>
+          <li>Divide-and-conquer algorithm demonstrations.</li>
+        </ul>
+      </section>
+
+      {/* Comparison */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4">
+          Binary Search vs Ternary Search
+        </h2>
+
+        <div className="overflow-x-auto">
+          <table className="min-w-full border border-gray-300 dark:border-gray-700">
+
+            <thead className="bg-purple-600 text-white">
+              <tr>
+                <th className="p-3 text-left">Feature</th>
+                <th className="p-3 text-left">Binary Search</th>
+                <th className="p-3 text-left">Ternary Search</th>
+              </tr>
+            </thead>
+
+            <tbody>
+
+              <tr className="border-t">
+                <td className="p-3">Divisions</td>
+                <td className="p-3">2</td>
+                <td className="p-3">3</td>
+              </tr>
+
+              <tr className="border-t">
+                <td className="p-3">Middle Points</td>
+                <td className="p-3">1</td>
+                <td className="p-3">2</td>
+              </tr>
+
+              <tr className="border-t">
+                <td className="p-3">Time Complexity</td>
+                <td className="p-3">O(log₂ n)</td>
+                <td className="p-3">O(log₃ n)</td>
+              </tr>
+
+              <tr className="border-t">
+                <td className="p-3">Comparisons</td>
+                <td className="p-3">Fewer</td>
+                <td className="p-3">More</td>
+              </tr>
+
+              <tr className="border-t">
+                <td className="p-3">Practical Performance</td>
+                <td className="p-3">Usually Faster</td>
+                <td className="p-3">Usually Slower</td>
+              </tr>
+
+            </tbody>
+
+          </table>
+        </div>
+      </section>
+
+    </div>
+  );
+};
+
+export default TernarySearchContent;
\ No newline at end of file
diff --git a/src/app/visualizer/array/ternary-search/page.jsx b/src/app/visualizer/array/ternary-search/page.jsx
new file mode 100644
index 000000000..b8fa0f60d
--- /dev/null
+++ b/src/app/visualizer/array/ternary-search/page.jsx
@@ -0,0 +1,34 @@
+import Animation from "@/app/visualizer/array/ternary-search/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/array/ternary-search/codeBlock";
+import Content from "@/app/visualizer/array/ternary-search/content";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Array", "Ternary Search")}
+      title="Ternary Search"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[
+            {
+              text: "Linear Search",
+              url: "../linearsearch",
+            },
+            {
+              text: "Binary Search",
+              url: "../binarysearch",
+            },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/ternary-search/quiz.jsx b/src/app/visualizer/array/ternary-search/quiz.jsx
new file mode 100644
index 000000000..22fa47359
--- /dev/null
+++ b/src/app/visualizer/array/ternary-search/quiz.jsx
@@ -0,0 +1,251 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const ternarySearchQuestions = [
+  {
+    question: "What is the main requirement for applying Ternary Search?",
+    options: [
+      "The array must be sorted.",
+      "The array must be unsorted.",
+      "The array must contain distinct elements.",
+      "The array size must be a power of 3.",
+    ],
+    answer: "The array must be sorted.",
+    explanation:
+      "Ternary Search works correctly only on sorted arrays because it repeatedly narrows the search range based on element ordering.",
+  },
+  {
+    question: "How many middle indices are calculated in Ternary Search?",
+    options: ["1", "2", "3", "4"],
+    answer: "2",
+    explanation:
+      "Ternary Search divides the search space into three parts using two middle indices: mid1 and mid2.",
+  },
+  {
+    question: "What is the average time complexity of Ternary Search?",
+    options: [
+      "O(n)",
+      "O(log₃ n)",
+      "O(log₂ n)",
+      "O(n log n)",
+    ],
+    answer: "O(log₃ n)",
+    explanation:
+      "Ternary Search reduces the search space to one-third in every iteration, resulting in O(log₃ n) complexity.",
+  },
+  {
+    question: "If the target is smaller than arr[mid1], where should the search continue?",
+    options: [
+      "Left third",
+      "Middle third",
+      "Right third",
+      "Entire array",
+    ],
+    answer: "Left third",
+    explanation:
+      "When the target is less than arr[mid1], it can only exist in the left third of the array.",
+  },
+  {
+    question: "If the target is greater than arr[mid2], where should the search continue?",
+    options: [
+      "Left third",
+      "Middle third",
+      "Right third",
+      "Search stops",
+    ],
+    answer: "Right third",
+    explanation:
+      "Values greater than arr[mid2] can only appear in the right third of the sorted array.",
+  },
+  {
+    question: "When is the middle third searched?",
+    options: [
+      "When target lies between arr[mid1] and arr[mid2].",
+      "When target is less than arr[mid1].",
+      "When target is greater than arr[mid2].",
+      "Never.",
+    ],
+    answer: "When target lies between arr[mid1] and arr[mid2].",
+    explanation:
+      "If the target is between the two middle elements, only the middle third needs to be searched.",
+  },
+  {
+    question: "What is the space complexity of iterative Ternary Search?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)",
+    ],
+    answer: "O(1)",
+    explanation:
+      "The iterative implementation uses only a few variables regardless of input size.",
+  },
+  {
+    question: "Compared to Binary Search, Ternary Search uses:",
+    options: [
+      "One midpoint",
+      "Two midpoints",
+      "Three midpoints",
+      "No midpoint",
+    ],
+    answer: "Two midpoints",
+    explanation:
+      "Binary Search uses one midpoint, while Ternary Search calculates two middle positions.",
+  },
+  {
+    question: "Which searching algorithm generally performs better in practice on sorted arrays?",
+    options: [
+      "Linear Search",
+      "Binary Search",
+      "Ternary Search",
+      "Jump Search",
+    ],
+    answer: "Binary Search",
+    explanation:
+      "Although Ternary Search divides the array into three parts, Binary Search usually performs fewer comparisons and is faster in practice.",
+  },
+  {
+    question: "What happens if the target is not found?",
+    options: [
+      "The algorithm returns -1.",
+      "The algorithm returns 0.",
+      "The algorithm returns the nearest element.",
+      "The algorithm throws an exception.",
+    ],
+    answer: "The algorithm returns -1.",
+    explanation:
+      "When the search range becomes empty, Ternary Search returns -1 to indicate the target does not exist.",
+  },
+  {
+  question: "Into how many parts does Ternary Search divide a sorted array?",
+  options: [
+    "2",
+    "3",
+    "4",
+    "5",
+  ],
+  answer: "3",
+  explanation:
+    "Ternary Search divides the search space into three nearly equal parts using two middle indices.",
+},
+{
+  question: "Which formula is used to calculate the first middle index (mid1)?",
+  options: [
+    "left + (right - left) / 3",
+    "(left + right) / 2",
+    "right - (right - left) / 3",
+    "left / 3",
+  ],
+  answer: "left + (right - left) / 3",
+  explanation:
+    "mid1 is calculated as left + (right - left) / 3.",
+},
+{
+  question: "Which formula is used to calculate the second middle index (mid2)?",
+  options: [
+    "left + (right - left) / 3",
+    "(left + right) / 2",
+    "right - (right - left) / 3",
+    "right / 3",
+  ],
+  answer: "right - (right - left) / 3",
+  explanation:
+    "mid2 is calculated from the right side of the current search interval.",
+},
+{
+  question: "What is checked first during each iteration of Ternary Search?",
+  options: [
+    "Whether the array is sorted",
+    "Whether the target equals arr[mid1] or arr[mid2]",
+    "Whether the array contains duplicates",
+    "Whether the array length is divisible by 3",
+  ],
+  answer: "Whether the target equals arr[mid1] or arr[mid2]",
+  explanation:
+    "The algorithm first compares the target with both middle elements before deciding which third to search.",
+},
+{
+  question: "What happens if the target lies between arr[mid1] and arr[mid2]?",
+  options: [
+    "Search continues in the middle third",
+    "Search continues in the left third",
+    "Search continues in the right third",
+    "The search stops immediately",
+  ],
+  answer: "Search continues in the middle third",
+  explanation:
+    "Only the middle third can contain the target in this case.",
+},
+{
+  question: "Which searching strategy does Ternary Search use?",
+  options: [
+    "Divide and Conquer",
+    "Greedy",
+    "Dynamic Programming",
+    "Backtracking",
+  ],
+  answer: "Divide and Conquer",
+  explanation:
+    "Ternary Search repeatedly divides the search interval into smaller parts.",
+},
+{
+  question: "Which of the following data structures is Ternary Search primarily used on?",
+  options: [
+    "Sorted arrays",
+    "Stacks",
+    "Queues",
+    "Graphs",
+  ],
+  answer: "Sorted arrays",
+  explanation:
+    "Ternary Search requires direct index access and sorted data.",
+},
+{
+  question: "How many comparisons with middle elements can occur in one iteration?",
+  options: [
+    "1",
+    "2",
+    "3",
+    "4",
+  ],
+  answer: "2",
+  explanation:
+    "The algorithm compares the target with both mid1 and mid2.",
+},
+{
+  question: "Why is Binary Search often preferred over Ternary Search in practice?",
+  options: [
+    "It requires fewer comparisons per iteration.",
+    "It works on unsorted arrays.",
+    "It uses recursion only.",
+    "It has O(1) worst-case complexity.",
+  ],
+  answer: "It requires fewer comparisons per iteration.",
+  explanation:
+    "Although Ternary Search divides into three parts, Binary Search generally performs fewer comparisons and is usually faster.",
+},
+{
+  question: "What value is typically returned when the target element is not present?",
+  options: [
+    "-1",
+    "0",
+    "1",
+    "NULL",
+  ],
+  answer: "-1",
+  explanation:
+    "Returning -1 is the standard way to indicate that the target element was not found.",
+}
+];
+
+export default function TernarySearchQuiz() {
+  return (
+    <QuizEngine
+      title="Ternary Search Quiz"
+      questions={ternarySearchQuestions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/ternary-search/quiz/page.jsx b/src/app/visualizer/array/ternary-search/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/array/ternary-search/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/timsort/AlgorithmClient.jsx b/src/app/visualizer/array/timsort/AlgorithmClient.jsx
new file mode 100644
index 000000000..47c34c0e5
--- /dev/null
+++ b/src/app/visualizer/array/timsort/AlgorithmClient.jsx
@@ -0,0 +1,42 @@
+import Animation from "@/app/visualizer/array/timsort/animation";
+import Content from "@/app/visualizer/array/timsort/content";
+import Code from "@/app/visualizer/array/timsort/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import TrackVisit from "@/app/components/ui/TrackVisit";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <>
+      <TrackVisit name="Tim Sort" path="/visualizer/array/timsort" category="Sorting" />
+      <VisualizerPageLayout
+        paths={createVisualizerPaths("Array", "Tim Sort")}
+        title="Tim Sort"
+        animation={<Animation />}
+        content={<Content />}
+        code={<Code />}
+        exploreOther={
+          <ExploreOther
+            title="Explore Sorting Algorithms"
+            links={[
+              { text: "Bubble Sort", url: "/visualizer/array/bubblesort" },
+              { text: "Quick Sort", url: "/visualizer/array/quicksort" },
+              { text: "Shell Sort", url: "/visualizer/array/shellsort" },
+              { text: "Selection Sort", url: "/visualizer/array/selectionsort" },
+              { text: "Insertion Sort", url: "/visualizer/array/insertionsort" },
+              { text: "Merge Sort", url: "/visualizer/array/mergesort" },
+              { text: "Bucket Sort", url: "/visualizer/array/bucketsort" },
+              { text: "Comparison Mode", url: "/visualizer/array/comparison" },
+              { text: "Counting Sort", url: "/visualizer/array/countingsort" },
+              { text: "Heap Sort", url: "/visualizer/array/heapsort" },
+            ]}
+          />
+        }
+      />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/timsort/animation.jsx b/src/app/visualizer/array/timsort/animation.jsx
new file mode 100644
index 000000000..6d43c7caf
--- /dev/null
+++ b/src/app/visualizer/array/timsort/animation.jsx
@@ -0,0 +1,400 @@
+"use client";
+import React, { useState, useMemo, useCallback } from "react";
+import ArrayGenerator from "@/app/components/ui/randomArray";
+import CustomArrayInput from "@/app/components/ui/customArrayInput";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls"; 
+import { timSortGenerator } from "@/features/algorithms/array/timSortLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+const getFontSize = (value) => {
+  const len = String(value).length;
+  if (len <= 2) return "text-base";
+  if (len === 3) return "text-xs";
+  return "text-[10px]";
+};
+
+const precomputeSteps = (inputArray) => {
+    const steps = [];
+    if (inputArray.length === 0) return [];
+    const generator = timSortGenerator([...inputArray]);
+
+    for (const frame of generator) {
+        const { type, payload } = frame;
+        const lastStep = steps[steps.length - 1] || { 
+            array: [...inputArray], 
+            runs: [],
+            comparisons: 0, 
+            swaps: 0, 
+            currentStep: 0, 
+            currentIndices: {}, 
+            currentPhase: "", 
+            stepExplanation: "", 
+            sorted: false, 
+            totalSteps: 0 
+        };
+
+        switch (type) {
+            case 'init':
+                steps.push({
+                    ...lastStep,
+                    array: [...inputArray],
+                    stepExplanation: "Starting Tim Sort...",
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'find_run':
+                steps.push({
+                    ...lastStep,
+                    array: [...payload.array],
+                    currentStep: payload.step,
+                    currentIndices: { run: payload.run },
+                    currentPhase: `1. Finding Runs`,
+                    stepExplanation: `Identified a new run of size ${payload.run.length} starting at index ${payload.run[0]}.`,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'insertion_sort_in_run':
+                steps.push({
+                    ...lastStep,
+                    array: [...payload.array],
+                    comparisons: payload.comparisons,
+                    swaps: payload.swaps,
+                    currentStep: payload.step,
+                    currentIndices: { run: payload.run, i: payload.i, j: payload.j },
+                    currentPhase: `2. Sorting Runs (Insertion Sort)`,
+                    stepExplanation: `Sorting run starting at index ${payload.run[0]}. Comparing elements at indices ${payload.j} and ${payload.j + 1}.`,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'push_run':
+                steps.push({
+                    ...lastStep,
+                    runs: [...payload.runs],
+                    currentStep: payload.step,
+                    currentPhase: `3. Stacking Runs`,
+                    stepExplanation: `Pushed sorted run onto the stack. Stack now has ${payload.runs.length} runs.`,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'start_merge':
+                steps.push({
+                    ...lastStep,
+                    array: [...payload.array],
+                    runs: [...(payload.runs || lastStep.runs || [])],
+                    currentStep: payload.step,
+                    currentIndices: { merging: [payload.run1, payload.run2] },
+                    currentPhase: `4. Merging Runs`,
+                    stepExplanation: `Preparing to merge two runs. Run 1 (size ${payload.run1.length}) and Run 2 (size ${payload.run2.length}).`,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'merge_compare':
+                steps.push({
+                    ...lastStep,
+                    array: [...payload.array],
+                    comparisons: payload.comparisons,
+                    currentStep: payload.step,
+                    currentIndices: { merging: lastStep.currentIndices.merging, compare: payload.compare },
+                    currentPhase: `4. Merging Runs`,
+                    stepExplanation: `Comparing ${payload.array[payload.compare[0]]} and ${payload.array[payload.compare[1]]}.`,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'merge_copy':
+                steps.push({
+                    ...lastStep,
+                    array: [...payload.array],
+                    swaps: payload.swaps,
+                    currentStep: payload.step,
+                    currentIndices: { merging: lastStep.currentIndices.merging, write: payload.writeIndex },
+                    currentPhase: `4. Merging Runs`,
+                    stepExplanation: `Copying smaller element to its correct sorted position at index ${payload.writeIndex}.`,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'merge_complete':
+                steps.push({
+                    ...lastStep,
+                    array: [...payload.array],
+                    runs: [...(payload.runs || lastStep.runs || [])],
+                    currentStep: payload.step,
+                    currentIndices: {},
+                    currentPhase: `4. Merging Runs`,
+                    stepExplanation: `Merge complete. The resulting sorted run is now on the stack.`,
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            case 'completed':
+                steps.push({
+                    ...lastStep,
+                    array: [...payload.array],
+                    currentStep: payload.step,
+                    currentIndices: {},
+                    currentPhase: "Completed",
+                    stepExplanation: "Array is fully sorted.",
+                    sorted: true,
+                    runs: [],
+                    totalSteps: payload.totalSteps,
+                });
+                break;
+            default:
+                break;
+        }
+    }
+    const totalSteps = steps.length;
+    return steps.map((step, index) => ({
+        ...step,
+        currentStep: step.currentStep ?? index,
+        totalSteps,
+    }));
+};
+
+const TimSortVisualizer = () => {
+  const [array, setArray] = useState([]);
+
+  const [visualState, setVisualState] = useState({
+    runs: [],
+    comparisons: 0, 
+    swaps: 0, 
+    currentIndices: {},
+    currentPhase: "", 
+    stepExplanation: "", 
+    sorted: false, 
+    totalSteps: 0,
+  });
+
+  const steps = useMemo(() => {
+    return precomputeSteps([...array]);
+  }, [array]);
+
+  const onStep = useCallback((step) => {
+    setVisualState({
+      runs: step.runs,
+      comparisons: step.comparisons,
+      swaps: step.swaps,
+      currentIndices: step.currentIndices,
+      currentPhase: step.currentPhase,
+      stepExplanation: step.stepExplanation,
+      sorted: step.sorted,
+      totalSteps: step.totalSteps,
+    });
+  }, []);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 500 });
+  const currentStepData = steps[engine.currentStep];
+
+  const handleStart = useCallback(() => {
+    if (currentStepData?.sorted) {
+      engine.reset();
+      setTimeout(() => engine.play(), 50);
+    } else {
+      engine.play();
+    }
+  }, [engine, currentStepData]);
+
+  const handleReset = useCallback(() => {
+    setVisualState({
+      runs: [],
+      comparisons: 0, swaps: 0, 
+      currentIndices: {},
+      currentPhase: "", stepExplanation: "", sorted: false, totalSteps: 0,
+    });
+    engine.reset();
+  }, [engine]);
+
+  useVisualizerKeyboard({
+    onStart: handleStart,
+    onReset: handleReset,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+    onTogglePlayPause: engine.isPlaying ? engine.pause : handleStart,
+    speed: engine.speed / 500,
+    sorting: engine.isPlaying,
+    sorted: currentStepData?.sorted || false,
+  });
+
+  const handleExplainStep = () => {
+    const prompt = `I am currently looking at the Tim Sort algorithm, at step ${engine.currentStep} of ${steps.length}.
+Phase: ${visualState.currentPhase}
+Explanation on screen: ${visualState.stepExplanation}
+Current Array State: [${currentStepData?.array?.join(", ") || array.join(", ")}]
+Current Runs on Stack: ${JSON.stringify(visualState.runs)}
+Current Indices/Pointers: ${JSON.stringify(visualState.currentIndices)}
+Please explain exactly what is happening in this step in detail.`;
+    
+    window.dispatchEvent(
+      new CustomEvent("chatbot-explain", { detail: { prompt } })
+    );
+  };
+
+  return (
+    <main className="container mx-auto px-6 pt-4 pb-6">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Visualize Tim Sort&apos;s hybrid approach, combining Insertion Sort and Merge Sort.
+      </p>
+
+      <div className="max-w-4xl mx-auto">
+        <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <div>
+              <ArrayGenerator
+                onGenerate={(newArray) => {
+                  setArray(newArray);
+                  handleReset();
+                }}
+                disabled={engine.isPlaying}
+                isPrimary={array.length === 0}
+              />
+              <CustomArrayInput
+                onUseCustomArray={(newArray) => {
+                  setArray(newArray);
+                  handleReset();
+                }}
+                disabled={engine.isPlaying}
+                currentArray={array}
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <button
+                onClick={handleStart}
+                disabled={!array.length}
+                className="w-full disabled:opacity-75 bg-none bg-[#a435f0] hover:bg-[#8f2cd6] px-4 py-2 rounded shadow-sm transition-all duration-300 text-sm sm:text-base text-white"
+              >
+                {engine.isPlaying ? "Sorting..." : currentStepData?.sorted ? "Restart" : "Start Tim Sort"}
+              </button>
+              <button
+                onClick={handleReset}
+                disabled={engine.isPlaying}
+                className="w-full bg-none text-[#a435f0] border border-[#a435f0] hover:bg-[#f3e8ff] dark:hover:bg-[#a435f0]/20 px-4 py-2 rounded transition-colors text-sm sm:text-base"
+              >
+                Reset All
+              </button>
+            </div>
+          </div>
+          
+          {engine.isPlaying && (
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={engine.isPlaying ? engine.pause : handleStart}
+              speed={engine.speed / 500}
+              onSpeedChange={(s) => engine.setSpeed(s * 500)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={engine.reset}
+              onExplainStep={handleExplainStep}
+              disabled={steps.length === 0}
+            />
+          )}
+
+          {!engine.isPlaying && (
+            <div className="flex items-center gap-4 mb-4">
+              <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">Speed:</span>
+              <input
+                type="range"
+                min="0.5"
+                max="5"
+                step="0.5"
+                value={engine.speed / 500}
+                onChange={(e) => engine.setSpeed(parseFloat(e.target.value) * 500)}
+                className="w-24 sm:w-32"
+              />
+              <span className="text-gray-700 dark:text-gray-300 text-sm sm:text-base">{engine.speed / 500}x</span>
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Comparisons:</div>
+              <div className="text-2xl">{visualState.comparisons}</div>
+            </div>
+            <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
+              <div className="font-medium">Swaps:</div>
+              <div className="text-2xl">{visualState.swaps}</div>
+            </div>
+          </div>
+          <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+            <div className="font-medium">Step:</div>
+            <div className="text-xl font-bold">
+              {visualState.totalSteps > 0 ? `${engine.currentStep + 1} / ${steps.length}` : "—"}
+            </div>
+            <div className="text-xs text-gray-500 mt-1">
+              {visualState.currentPhase
+                ? visualState.currentPhase
+                : visualState.sorted
+                ? "Sorting complete!"
+                : "Start sorting to see steps"}
+            </div>
+          </div>
+          <div className="col-span-2 bg-gray-100 dark:bg-neutral-900 p-3 rounded mt-2">
+            <div className="font-medium">Phase:</div>
+            <div className="text-sm sm:text-base text-gray-800 dark:text-gray-200">
+              {visualState.currentPhase || (visualState.sorted ? "Completed" : "Ready to start")}
+            </div>
+            <div className="font-medium mt-2">Explanation:</div>
+            <div className="text-sm text-gray-700 dark:text-gray-300 mt-1">
+              {visualState.stepExplanation || (visualState.sorted ? "Array is fully sorted." : "Run the algorithm to see educational hints.")}
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-8">
+          <h2 className="text-xl font-semibold mb-4">Array Visualization</h2>
+          {(currentStepData?.array || array).length > 0 ? (
+            <div className="flex flex-wrap gap-4 justify-center">
+              <div className="relative flex flex-wrap gap-2 justify-center">
+                {(currentStepData?.array || array).map((value, index) => {
+                  const { run, i, j, merging, compare, write } = visualState.currentIndices;
+                  const isInRun = run?.includes(index);
+                  const isInsertionSorting = (index === i || index === j || index === j + 1) && visualState.currentPhase.includes("Sorting Runs");
+                  const isMerging = merging?.some(r => r.includes(index));
+                  const isComparing = compare?.includes(index);
+                  const isWriting = write === index;
+
+                  let bgColor = "bg-gray-200 dark:bg-gray-700";
+                  let borderColor = "border-gray-300 dark:border-gray-600";
+
+                  if (visualState.sorted) {
+                    bgColor = "bg-green-400 dark:bg-green-600";
+                    borderColor = "border-green-600 dark:border-green-400";
+                  } else if (isWriting) {
+                    bgColor = "bg-purple-400 dark:bg-purple-600";
+                    borderColor = "border-purple-600 dark:border-purple-400";
+                  } else if (isComparing) {
+                    bgColor = "bg-yellow-400 dark:bg-yellow-600";
+                    borderColor = "border-yellow-600 dark:border-yellow-400";
+                  } else if (isMerging) {
+                    bgColor = "bg-blue-300 dark:bg-blue-800";
+                    borderColor = "border-blue-500 dark:border-blue-400";
+                  } else if (isInsertionSorting) {
+                    bgColor = "bg-orange-300 dark:bg-orange-700";
+                    borderColor = "border-orange-500 dark:border-orange-400";
+                  } else if (isInRun) {
+                    bgColor = "bg-indigo-200 dark:bg-indigo-900";
+                    borderColor = "border-indigo-400 dark:border-indigo-500";
+                  }
+
+                  return (
+                    <div key={index} className="flex flex-col items-center">
+                      <div
+                        className={`array-bar w-12 h-12 flex items-center justify-center rounded-md border-2 transition-all duration-300 ${getFontSize(value)} font-medium ${bgColor} ${borderColor}`}
+                      >
+                        {value}
+                      </div>
+                      <div className="mt-1 text-xs text-gray-600 dark:text-gray-400">{index}</div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          ) : (
+            <div className="text-center py-8 text-gray-500">
+              {engine.isPlaying ? "Sorting..." : "Generate or enter an array to begin"}
+            </div>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default TimSortVisualizer;
diff --git a/src/app/visualizer/array/timsort/codeBlock.jsx b/src/app/visualizer/array/timsort/codeBlock.jsx
new file mode 100644
index 000000000..00729f7a1
--- /dev/null
+++ b/src/app/visualizer/array/timsort/codeBlock.jsx
@@ -0,0 +1,216 @@
+'use client';
+import CodeBlock from '@/app/components/ui/CodeBlock';
+
+const codeExamples = {
+  javascript: `// Tim Sort in JavaScript
+const MIN_MERGE = 32;
+
+function calcMinRun(n) {
+  let r = 0;
+  while (n >= MIN_MERGE) {
+    r |= (n & 1);
+    n >>= 1;
+  }
+  return n + r;
+}
+
+function insertionSort(arr, left, right) {
+  for (let i = left + 1; i <= right; i++) {
+    const temp = arr[i];
+    let j = i - 1;
+    while (j >= left && arr[j] > temp) {
+      arr[j + 1] = arr[j];
+      j--;
+    }
+    arr[j + 1] = temp;
+  }
+}
+
+function merge(arr, l, m, r) {
+  const len1 = m - l + 1;
+  const len2 = r - m;
+  const left = new Array(len1);
+  const right = new Array(len2);
+  for (let x = 0; x < len1; x++) left[x] = arr[l + x];
+  for (let x = 0; x < len2; x++) right[x] = arr[m + 1 + x];
+
+  let i = 0, j = 0, k = l;
+  while (i < len1 && j < len2) {
+    arr[k++] = (left[i] <= right[j]) ? left[i++] : right[j++];
+  }
+  while (i < len1) arr[k++] = left[i++];
+  while (j < len2) arr[k++] = right[j++];
+}
+
+function timSort(arr) {
+  const n = arr.length;
+  const minRun = calcMinRun(n);
+
+  for (let start = 0; start < n; start += minRun) {
+    const end = Math.min(start + minRun - 1, n - 1);
+    insertionSort(arr, start, end);
+  }
+
+  for (let size = minRun; size < n; size = 2 * size) {
+    for (let left = 0; left < n; left += 2 * size) {
+      const mid = left + size - 1;
+      const right = Math.min((left + 2 * size - 1), (n - 1));
+      if (mid < right) merge(arr, left, mid, right);
+    }
+  }
+  return arr;
+}
+// Usage example
+const numbers = [29, 25, 3, 49, 9, 37, 21, 43];
+console.log("Before sorting:", numbers);
+const result = timSort([...numbers]);
+console.log("After sorting:", result);`,
+
+  python: `# Tim Sort in Python
+MIN_MERGE = 32
+
+def calc_min_run(n):
+    r = 0
+    while n >= MIN_MERGE:
+        r |= n & 1
+        n >>= 1
+    return n + r
+
+def insertion_sort(arr, left, right):
+    for i in range(left + 1, right + 1):
+        key = arr[i]
+        j = i - 1
+        while j >= left and arr[j] > key:
+            arr[j + 1] = arr[j]
+            j -= 1
+        arr[j + 1] = key
+
+def merge(arr, l, m, r):
+    len1, len2 = m - l + 1, r - m
+    left = arr[l:m + 1]
+    right = arr[m + 1:r + 1]
+    i, j, k = 0, 0, l
+
+    while i < len1 and j < len2:
+        if left[i] <= right[j]:
+            arr[k] = left[i]
+            i += 1
+        else:
+            arr[k] = right[j]
+            j += 1
+        k += 1
+
+    while i < len1:
+        arr[k] = left[i]
+        k += 1
+        i += 1
+
+    while j < len2:
+        arr[k] = right[j]
+        k += 1
+        j += 1
+
+def tim_sort(arr):
+    n = len(arr)
+    min_run = calc_min_run(n)
+
+    for start in range(0, n, min_run):
+        end = min(start + min_run - 1, n - 1)
+        insertion_sort(arr, start, end)
+
+    size = min_run
+    while size < n:
+        for left in range(0, n, 2 * size):
+            mid = min(n - 1, left + size - 1)
+            right = min((left + 2 * size - 1), (n - 1))
+            if mid < right:
+                merge(arr, left, mid, right)
+        size *= 2
+    return arr
+
+# Usage example
+numbers = [29, 25, 3, 49, 9, 37, 21, 43]
+print("Before sorting:", numbers)
+result = tim_sort(numbers[:])
+print("After sorting:", result)`,
+
+  cpp: `// Tim Sort in C++
+#include <iostream>
+#include <vector>
+#include <algorithm>
+
+using namespace std;
+
+const int RUN = 32;
+
+void insertionSort(vector<int>& arr, int left, int right) {
+    for (int i = left + 1; i <= right; i++) {
+        int temp = arr[i];
+        int j = i - 1;
+        while (j >= left && arr[j] > temp) {
+            arr[j + 1] = arr[j];
+            j--;
+        }
+        arr[j + 1] = temp;
+    }
+}
+
+void merge(vector<int>& arr, int l, int m, int r) {
+    int len1 = m - l + 1, len2 = r - m;
+    vector<int> left(len1), right(len2);
+    for (int i = 0; i < len1; i++) left[i] = arr[l + i];
+    for (int i = 0; i < len2; i++) right[i] = arr[m + 1 + i];
+
+    int i = 0, j = 0, k = l;
+    while (i < len1 && j < len2) {
+        arr[k++] = (left[i] <= right[j]) ? left[i++] : right[j++];
+    }
+    while (i < len1) arr[k++] = left[i++];
+    while (j < len2) arr[k++] = right[j++];
+}
+
+void timSort(vector<int>& arr) {
+    int n = arr.size();
+    for (int i = 0; i < n; i += RUN) {
+        insertionSort(arr, i, min((i + RUN - 1), (n - 1)));
+    }
+    for (int size = RUN; size < n; size = 2 * size) {
+        for (int left = 0; left < n; left += 2 * size) {
+            int mid = left + size - 1;
+            int right = min((left + 2 * size - 1), (n - 1));
+            if(mid < right) merge(arr, left, mid, right);
+        }
+    }
+}
+
+int main() {
+    vector<int> numbers = {29, 25, 3, 49, 9, 37, 21, 43};
+    cout << "Before sorting: ";
+    for (int num : numbers) cout << num << " ";
+    cout << endl;
+
+    timSort(numbers);
+
+    cout << "After sorting: ";
+    for (int num : numbers) cout << num << " ";
+    cout << endl;
+
+    return 0;
+}`
+};
+
+const fileNames = {
+  javascript: 'timSort.js',
+  python: 'tim_sort.py',
+  cpp: 'tim_sort.cpp',
+};
+
+const TimSortCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default TimSortCode;
\ No newline at end of file
diff --git a/src/app/visualizer/array/timsort/content.jsx b/src/app/visualizer/array/timsort/content.jsx
new file mode 100644
index 000000000..582cf30ff
--- /dev/null
+++ b/src/app/visualizer/array/timsort/content.jsx
@@ -0,0 +1,262 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraphs = [
+    "Tim Sort is a hybrid, stable sorting algorithm that combines ideas from Insertion Sort and Merge Sort. It first works with small ordered sections of the array called runs, sorts or extends those runs, and then merges them into one sorted array.",
+    "Tim Sort is adaptive: it becomes especially efficient when the input is already partially sorted. Its best-case time complexity is O(n), while the average and worst cases are O(n log n), giving it strong performance on both real-world and random datasets.",
+    "Tim Sort uses temporary storage while merging runs, so its worst-case space complexity is O(n). The algorithm is stable, meaning equal elements keep their original relative order after sorting.",
+    "Tim Sort is used in production language runtimes because real data often contains existing order. Python's list sort and Java's object array sort are well-known examples of Tim Sort or Tim Sort-inspired implementations.",
+  ];
+
+  const working = [
+    {
+      steps: "Step 1: Identify Runs",
+      points: [
+        "Scan the array and divide it into small ordered sections called runs.",
+        "In a simplified implementation, the array is split into minrun-sized chunks.",
+      ],
+    },
+    {
+      steps: "Step 2: Sort Small Runs",
+      points: [
+        "Each run is sorted using Insertion Sort because it is fast on small or nearly sorted ranges.",
+        "For example, a run like [29, 25, 3, 49] becomes [3, 25, 29, 49].",
+      ],
+    },
+    {
+      steps: "Step 3: Merge Adjacent Runs",
+      points: [
+        "Once runs are individually sorted, Tim Sort merges neighboring runs using a Merge Sort-style merge step.",
+        "The merge process repeatedly compares the front elements of two runs and writes the smaller value into the sorted position.",
+      ],
+    },
+    {
+      steps: "Step 4: Finish With One Sorted Array",
+      points: [
+        "Merging continues until all runs combine into one sorted run.",
+        "For [29, 25, 3, 49, 9, 37, 21, 43], the final result is [3, 9, 21, 25, 29, 37, 43, 49].",
+      ],
+    },
+  ];
+
+  const algorithm = [
+    {
+      steps: "Calculate minrun:",
+      points: ["Compute a small run size that keeps insertion sorting efficient and merging balanced."],
+    },
+    {
+      steps: "Sort each run:",
+      points: ["Move through the array in minrun-sized ranges and sort each range using Insertion Sort."],
+    },
+    {
+      steps: "Merge sorted runs:",
+      points: [
+        "Merge pairs of adjacent sorted runs.",
+        "Double the merge size after each pass until the whole array is covered.",
+      ],
+    },
+    {
+      steps: "Return the sorted array:",
+      points: ["After the final merge pass, the array is completely sorted."],
+    },
+  ];
+
+  const timeComplexity = [
+    { points: "Best Case: O(n)" },
+    { points: "Average Case: O(n log n)" },
+    { points: "Worst Case: O(n log n)" },
+  ];
+
+  const advantages = [
+    { points: "Adaptive: performs very well when the data is already partially sorted." },
+    { points: "Stable: equal elements keep their relative order." },
+    { points: "Reliable O(n log n) average and worst-case time complexity." },
+    { points: "Excellent practical performance, which is why it is used in real language runtimes." },
+  ];
+
+  const disadvantages = [
+    { points: "More complex to implement than basic sorting algorithms like Bubble Sort or Insertion Sort." },
+    { points: "Requires extra temporary memory during merging." },
+    { points: "For very small arrays, plain Insertion Sort can be simpler and competitive." },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is Tim Sort?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[0]}
+            </p>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            How Does It Work?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Consider an unsorted array. Tim Sort breaks it into runs, sorts those small runs, and merges them back together efficiently.
+            </p>
+
+            <ul className="space-y-3">
+              {working.map((item, index) => (
+                <li key={index} className="text-[#374151] dark:text-[#d1d5db]">
+                  <span className="font-semibold">{item.steps}</span>
+                  {item.points && (
+                    <ol className="mt-2 space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400 font-normal">
+                      {item.points.map((subitem, subindex) => (
+                        <li key={subindex} className="text-[#6b7280] dark:text-[#9ca3af]">
+                          {subitem}
+                        </li>
+                      ))}
+                    </ol>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Algorithm Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {algorithm.map((item, index) => (
+                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                  {item.steps}
+                  {item.points && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.points.map((subitem, subindex) => (
+                        <li key={subindex} className="text-[#6b7280] dark:text-[#9ca3af]">
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {timeComplexity.map((item, index) => (
+                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm">
+                    {item.points.split(":")[0]}:
+                  </span>
+                  <span className="ml-2">{item.points.split(":")[1]}</span>
+                </li>
+              ))}
+            </ul>
+            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+              {paragraphs[1]}
+            </p>
+            <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => n}
+                averageCase={(n) => n * Math.log(n)}
+                worstCase={(n) => n * Math.log(n)}
+                maxN={25}
+              />
+            </div>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Space Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[2]}
+            </p>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Advantages
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {advantages.map((item, index) => (
+                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Disadvantages
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {disadvantages.map((item, index) => (
+                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        <section className="p-6">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraphs[3]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/array/timsort/quiz.jsx b/src/app/visualizer/array/timsort/quiz.jsx
new file mode 100644
index 000000000..493ee3a70
--- /dev/null
+++ b/src/app/visualizer/array/timsort/quiz.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const TimSortQuiz = () => {
+  const questions = [
+    {
+      question: "What type of algorithm is Tim Sort?",
+      options: [
+        "A pure comparison sort",
+        "A distribution sort",
+        "A hybrid stable sorting algorithm",
+        "An in-place unstable sort"
+      ],
+      correctAnswer: 2,
+      explanation: "Tim Sort is a hybrid algorithm, derived from merge sort and insertion sort, and it is stable, meaning it preserves the relative order of equal elements."
+    },
+    {
+      question: "Tim Sort was originally designed for which programming language?",
+      options: [
+        "Java",
+        "Python",
+        "C++",
+        "JavaScript"
+      ],
+      correctAnswer: 1,
+      explanation: "Tim Sort was invented by Tim Peters in 2002 for use in the Python programming language. It's now also used in Java, Android, and Swift."
+    },
+    {
+      question: "What are the two main sorting algorithms that Tim Sort combines?",
+      options: [
+        "Quick Sort and Heap Sort",
+        "Bubble Sort and Selection Sort",
+        "Merge Sort and Insertion Sort",
+        "Radix Sort and Counting Sort"
+      ],
+      correctAnswer: 2,
+      explanation: "Tim Sort uses Insertion Sort to sort small chunks of the array (called runs) and Merge Sort to merge these runs together."
+    },
+    {
+      question: "What is a 'natural run' in the context of Tim Sort?",
+      options: [
+        "A randomly selected part of the array",
+        "A contiguous subsequence of the data that is already ordered",
+        "The first half of the array",
+        "Any subsequence with an even number of elements"
+      ],
+      correctAnswer: 1,
+      explanation: "Tim Sort is adaptive and performs exceptionally well on partially sorted data by identifying existing sorted sequences, known as natural runs."
+    },
+    {
+      question: "What is the worst-case time complexity of Tim Sort?",
+      options: [
+        "O(n)",
+        "O(n log n)",
+        "O(n²)",
+        "O(log n)"
+      ],
+      correctAnswer: 1,
+      explanation: "Like Merge Sort, Tim Sort's worst-case time complexity is guaranteed to be O(n log n), making it very efficient for large datasets."
+    },
+    {
+      question: "What is the best-case time complexity of Tim Sort?",
+      options: [
+        "O(n)",
+        "O(n log n)",
+        "O(n²)",
+        "O(1)"
+      ],
+      correctAnswer: 0,
+      explanation: "In the best-case scenario (an already sorted array), Tim Sort can achieve linear time complexity, O(n), because it only needs to identify the single run."
+    },
+    {
+      question: "Why is Tim Sort considered an adaptive sorting algorithm?",
+      options: [
+        "It adapts its strategy based on the size of the input array",
+        "It performs well on data that is already partially sorted",
+        "It can sort different data types",
+        "It adapts the number of threads based on CPU cores"
+      ],
+      correctAnswer: 1,
+      explanation: "Tim Sort is adaptive because it takes advantage of existing order ('runs') in the data, making it much faster for partially or fully sorted arrays."
+    },
+    {
+      question: "What is the purpose of 'minrun' in Tim Sort?",
+      options: [
+        "It's the minimum size for the entire array to be sorted",
+        "It's a threshold; runs smaller than minrun are extended and sorted with Insertion Sort",
+        "It's the maximum number of runs allowed on the stack",
+        "It defines the pivot for merging"
+      ],
+      correctAnswer: 1,
+      explanation: "Minrun is a calculated size. Any identified run smaller than this value is lengthened and then sorted using Insertion Sort, which is efficient for small lists."
+    },
+    {
+      question: "How does Tim Sort merge runs?",
+      options: [
+        "It always merges the two largest runs first",
+        "It merges runs randomly",
+        "It uses a stack and merges adjacent runs to maintain balance",
+        "It merges all runs at once in a single pass"
+      ],
+      correctAnswer: 2,
+      explanation: "Tim Sort pushes sorted runs onto a stack and merges adjacent runs whenever specific stack invariants are violated, ensuring the merge process remains efficient."
+    },
+    {
+      question: "What is the space complexity of Tim Sort?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation: "In the worst case, Tim Sort requires O(n) temporary space for merging runs. However, for nearly sorted data, it can be as low as O(log n)."
+    }
+  ];
+
+  return <QuizEngine title="Tim Sort Quiz Challenge" questions={questions} />;
+};
+
+export default TimSortQuiz;
diff --git a/src/app/visualizer/array/timsort/quiz/page.jsx b/src/app/visualizer/array/timsort/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/array/timsort/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/array/twopointers/AlgorithmClient.jsx b/src/app/visualizer/array/twopointers/AlgorithmClient.jsx
new file mode 100644
index 000000000..ba53a7bf4
--- /dev/null
+++ b/src/app/visualizer/array/twopointers/AlgorithmClient.jsx
@@ -0,0 +1,18 @@
+import Animation from "./animation";
+import Code from "./codeblock";
+import Content from "./content";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Array", "Two Pointers")}
+      title="Two Pointers Technique"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+    />
+  );
+}
diff --git a/src/app/visualizer/array/twopointers/animation.jsx b/src/app/visualizer/array/twopointers/animation.jsx
new file mode 100644
index 000000000..9d90d37c2
--- /dev/null
+++ b/src/app/visualizer/array/twopointers/animation.jsx
@@ -0,0 +1,405 @@
+"use client";
+import React, { useState, useEffect, useMemo, useCallback } from "react";
+import ResetButton from "@/app/components/ui/resetButton";
+import GoButton from "@/app/components/ui/goButton";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import {
+  generateStatesPairSum,
+  generateStatesRemoveDuplicates,
+  generateStatesContainerWater,
+  generateStatesThreeSum,
+} from "@/features/algorithms/array/twoPointersLogic";
+
+const PROBLEMS = {
+  PAIR_SUM: "pair-sum",
+  REMOVE_DUPLICATES: "remove-duplicates",
+  CONTAINER_WATER: "container-water",
+  THREE_SUM: "three-sum",
+};
+
+const Animation = () => {
+  const [problemType, setProblemType] = useState(PROBLEMS.PAIR_SUM);
+  const [inputData, setInputData] = useState("1, 2, 3, 4, 6");
+  const [targetValue, setTargetValue] = useState("6");
+  
+  const [dataArray, setDataArray] = useState([]);
+  const [targetNum, setTargetNum] = useState(0);
+
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+
+  const [visualState, setVisualState] = useState({
+    leftPointer: -1,
+    rightPointer: -1,
+    fixedIndex: -1,
+    bestResult: null,
+    currentResult: null,
+    stepExplanation: "",
+    success: false,
+    violation: false,
+    done: false
+  });
+
+  const steps = useMemo(() => {
+    if (dataArray.length === 0) return [];
+    if (problemType === PROBLEMS.PAIR_SUM) {
+      return Array.from(generateStatesPairSum(dataArray, targetNum));
+    } else if (problemType === PROBLEMS.REMOVE_DUPLICATES) {
+      return Array.from(generateStatesRemoveDuplicates(dataArray));
+    } else if (problemType === PROBLEMS.CONTAINER_WATER) {
+      return Array.from(generateStatesContainerWater(dataArray));
+    } else if (problemType === PROBLEMS.THREE_SUM) {
+      return Array.from(generateStatesThreeSum(dataArray));
+    }
+    return [];
+  }, [dataArray, targetNum, problemType]);
+
+  const onStep = useCallback((step) => {
+    setVisualState({
+      leftPointer: step.left,
+      rightPointer: step.right,
+      fixedIndex: step.fixedIndex ?? -1,
+      currentResult: step.current,
+      bestResult: step.best,
+      stepExplanation: step.explanation,
+      success: step.success || false,
+      violation: step.violation || false,
+      done: step.done || false
+    });
+    
+    if (step.done) {
+        setMessage("Visualization completed.");
+        setMessageType("success");
+    } else {
+        setMessage("");
+        setMessageType("");
+    }
+  }, []);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 1500 });
+  const isAnimating = engine.isPlaying || engine.currentStep > 0;
+
+  const handleReset = () => {
+    engine.reset();
+    setDataArray([]);
+    setVisualState({
+      leftPointer: -1, rightPointer: -1, fixedIndex: -1,
+      bestResult: null, currentResult: null, stepExplanation: "",
+      success: false, violation: false, done: false
+    });
+    setMessage(""); setMessageType("");
+  };
+
+  const needsTarget = problemType === PROBLEMS.PAIR_SUM || problemType === PROBLEMS.THREE_SUM;
+
+  const handleGo = (e) => {
+    e.preventDefault();
+    handleReset();
+
+    if (!inputData) {
+      setMessage("Please provide input data."); setMessageType("warning"); return;
+    }
+
+    const parsedArray = inputData.split(",").map((s) => parseInt(s.trim()));
+    if (parsedArray.some(isNaN)) {
+      setMessage("Invalid input. Please provide comma-separated integers."); setMessageType("warning"); return;
+    }
+
+    let tNum = 0;
+    if (needsTarget) {
+      tNum = parseInt(targetValue);
+      if (isNaN(tNum)) {
+        setMessage("Please provide a valid integer target."); setMessageType("warning"); return;
+      }
+    }
+
+    setTargetNum(tNum);
+    setDataArray(parsedArray);
+
+    setTimeout(() => {
+        engine.play();
+    }, 50);
+  };
+
+  useVisualizerKeyboard({
+    onTogglePlayPause: engine.isPlaying ? engine.pause : () => {
+        if (dataArray.length > 0) engine.play();
+    },
+    onStepForward: engine.stepForward,
+    onStepBackward: engine.stepBackward,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+    speed: engine.speed / 1000,
+    sorting: engine.isPlaying,
+    sorted: engine.currentStep === steps.length - 1 && steps.length > 0,
+  });
+
+  const getFontSize = (value) => {
+    const len = String(value).length;
+    if (len <= 1) return "text-xl font-bold";
+    if (len <= 2) return "text-lg font-bold";
+    return "text-sm font-semibold";
+  };
+
+  const messageClass =
+    messageType === "success"
+      ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
+      : messageType === "warning"
+      ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
+      : "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200";
+
+  const defaultInputs = {
+    [PROBLEMS.PAIR_SUM]: { input: "1, 2, 3, 4, 6", target: "6" },
+    [PROBLEMS.REMOVE_DUPLICATES]: { input: "1, 1, 2, 3, 3, 4", target: "" },
+    [PROBLEMS.CONTAINER_WATER]: { input: "1, 8, 6, 2, 5, 4, 8, 3, 7", target: "" },
+    [PROBLEMS.THREE_SUM]: { input: "-4, -1, -1, 0, 1, 2", target: "" },
+  };
+
+  return (
+    <main className="container mx-auto">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8 max-w-3xl mx-auto">
+        Visualize how the Two Pointers technique efficiently solves array problems
+        using left and right pointers moving toward or away from each other.
+      </p>
+
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8 shadow-sm"
+      >
+        <div className="mb-6">
+          <label className="block text-gray-700 dark:text-gray-300 mb-2 font-medium">
+            Select Problem
+          </label>
+          <select
+            value={problemType}
+            onChange={(e) => {
+              const val = e.target.value;
+              setProblemType(val);
+              handleReset();
+              setInputData(defaultInputs[val].input);
+              setTargetValue(defaultInputs[val].target);
+            }}
+            disabled={isAnimating}
+            className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#a435f0] focus:outline-none focus:ring-2 focus:ring-[#a435f0]/30 transition duration-300"
+          >
+            <optgroup label="Opposite Direction">
+              <option value={PROBLEMS.PAIR_SUM}>Pair Sum (Sorted Array)</option>
+              <option value={PROBLEMS.CONTAINER_WATER}>Container With Most Water</option>
+              <option value={PROBLEMS.THREE_SUM}>Three Sum</option>
+            </optgroup>
+            <optgroup label="Same Direction">
+              <option value={PROBLEMS.REMOVE_DUPLICATES}>
+                Remove Duplicates from Sorted Array
+              </option>
+            </optgroup>
+          </select>
+        </div>
+
+        <div className="flex flex-col md:flex-row gap-4 mb-4">
+          <div className="flex-1">
+            <label
+              className="block text-gray-700 dark:text-gray-300 mb-2"
+              htmlFor="inputData"
+            >
+              Array Elements (comma-separated)
+            </label>
+            <input
+              type="text"
+              id="inputData"
+              value={inputData}
+              onChange={(e) => setInputData(e.target.value)}
+              className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#a435f0] focus:outline-none focus:ring-2 focus:ring-[#a435f0]/30 transition duration-300 font-mono"
+              placeholder="e.g., 1, 2, 3, 4, 6"
+              disabled={isAnimating}
+            />
+          </div>
+
+          {needsTarget && (
+            <div className="w-full md:w-1/3">
+              <label
+                className="block text-gray-700 dark:text-gray-300 mb-2"
+                htmlFor="targetValue"
+              >
+                Target Sum
+              </label>
+              <input
+                type="number"
+                id="targetValue"
+                value={targetValue}
+                onChange={(e) => setTargetValue(e.target.value)}
+                className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#a435f0] focus:outline-none focus:ring-2 focus:ring-[#a435f0]/30 transition duration-300 font-mono"
+                placeholder="e.g., 6"
+                disabled={isAnimating}
+              />
+            </div>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-3 mt-6">
+          <GoButton onClick={handleGo} isAnimating={isAnimating} disabled={isAnimating} />
+          <ResetButton onReset={handleReset} isAnimating={isAnimating} />
+        </div>
+
+        {isAnimating && (
+          <div className="mt-6 border-t border-gray-100 dark:border-gray-800 pt-6">
+            <PlaybackControls
+                isPlaying={engine.isPlaying}
+                onPlayPause={engine.isPlaying ? engine.pause : () => engine.play()}
+                speed={engine.speed / 1000}
+                onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+                onStepForward={engine.stepForward}
+                onStepBackward={engine.stepBackward}
+                onReset={engine.reset}
+                onExplainStep={() => {}}
+                disabled={steps.length === 0}
+                progressText={`${Math.max(engine.currentStep + 1, 0)} / ${steps.length}`}
+            />
+          </div>
+        )}
+      </form>
+
+      {message && (
+        <div className={`max-w-4xl mx-auto mb-8 p-4 rounded-lg ${messageClass}`}>
+          <p className="text-center font-medium">{message}</p>
+        </div>
+      )}
+
+      {dataArray.length > 0 && (
+        <div className="max-w-5xl mx-auto space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="bg-white dark:bg-gray-800 p-5 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm flex flex-col justify-center">
+              <div className="flex items-center gap-2 mb-3">
+                <span className="w-2 h-2 rounded-full bg-[#a435f0] animate-pulse"></span>
+                <span className="text-sm font-semibold text-[#a435f0] dark:text-[#c56eff] uppercase tracking-wide">
+                  Current Step
+                </span>
+              </div>
+              <p className="text-gray-700 dark:text-gray-200 text-base leading-relaxed font-mono min-h-[3rem]">
+                {visualState.stepExplanation || "Ready to begin..."}
+              </p>
+            </div>
+
+            <div className="bg-white dark:bg-gray-800 p-5 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm grid grid-cols-2 gap-4 text-center">
+              <div>
+                <h4 className="text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-1">
+                  Current State
+                </h4>
+                <div className="text-xl font-bold text-gray-800 dark:text-gray-100 font-mono overflow-hidden text-ellipsis whitespace-nowrap">
+                  {visualState.currentResult !== null ? visualState.currentResult : "-"}
+                </div>
+              </div>
+              <div>
+                <h4 className="text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-1">
+                  Best Result
+                </h4>
+                <div className="text-xl font-bold text-[#a435f0] dark:text-[#c56eff] font-mono overflow-hidden text-ellipsis whitespace-nowrap">
+                  {visualState.bestResult !== null ? visualState.bestResult : "-"}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md overflow-x-auto border border-gray-100 dark:border-gray-700">
+            <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-10 text-center">
+              Two Pointers Visualization
+            </h2>
+
+            <div className="flex gap-2 justify-center min-w-max pb-10 px-4">
+              {dataArray.map((element, index) => {
+                const isLeft = index === visualState.leftPointer;
+                const isRight = index === visualState.rightPointer;
+                const isFixed = index === visualState.fixedIndex;
+                const isActive = isLeft || isRight || isFixed;
+
+                let bgColor = "bg-[#E5E7EB]";
+                let borderColor = "border-[#D1D5DB]";
+                let textColor = "text-[#4B5563]";
+
+                if (isFixed) {
+                    bgColor = "bg-[#CCFBF1]"; borderColor = "border-[#14B8A6]"; textColor = "text-[#0F766E]";
+                } else if (isActive && visualState.success) {
+                    bgColor = "bg-[#DCFCE7]"; borderColor = "border-[#22C55E]"; textColor = "text-[#166534]";
+                } else if (isActive && visualState.violation) {
+                    bgColor = "bg-[#FEE2E2]"; borderColor = "border-[#EF4444]"; textColor = "text-[#991B1B]";
+                } else if (isLeft) {
+                    bgColor = "bg-[#F3E8FF]"; borderColor = "border-[#A855F7]"; textColor = "text-[#6B21A8]";
+                } else if (isRight) {
+                    bgColor = "bg-[#E0E7FF]"; borderColor = "border-[#6366F1]"; textColor = "text-[#3730A3]";
+                } else if (visualState.done && isActive) {
+                    bgColor = "bg-[#F3E8FF]"; borderColor = "border-[#A855F7]"; textColor = "text-[#6B21A8]";
+                }
+
+                return (
+                  <div key={index} className="flex flex-col items-center relative">
+                    <div
+                      className={`w-14 h-14 md:w-16 md:h-16 flex items-center justify-center rounded-lg border-2 transition-colors duration-200 ${getFontSize(element)} shadow-sm ${bgColor} ${borderColor} ${textColor}`}
+                    >
+                      {element}
+                    </div>
+
+                    <div className="mt-2 text-xs text-gray-400 font-mono h-4">
+                      {index}
+                    </div>
+
+                    <div className="absolute -bottom-10 flex flex-col items-center gap-1 w-full">
+                      {isFixed && (
+                        <div className="text-teal-600 font-bold text-xs bg-teal-50 px-2 py-0.5 rounded shadow-sm border border-teal-300">
+                          i
+                        </div>
+                      )}
+                      {isLeft && !isFixed && (
+                        <div className="text-[#a435f0] font-bold text-xs bg-[#a435f0]/10 px-2 py-0.5 rounded shadow-sm border border-[#a435f0]/30 animate-bounce">
+                          L
+                        </div>
+                      )}
+                      {isRight && !isFixed && (
+                        <div
+                          className="text-indigo-600 font-bold text-xs bg-indigo-50 px-2 py-0.5 rounded shadow-sm border border-indigo-300 animate-bounce"
+                          style={{ animationDelay: "0.1s" }}
+                        >
+                          R
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            <div className="mt-6 flex flex-wrap justify-center gap-6 text-xs text-gray-500 dark:text-gray-400 font-medium">
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 rounded bg-[#F3E8FF] border border-[#A855F7]"></div>
+                Left Pointer (L)
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 rounded bg-[#E0E7FF] border border-[#6366F1]"></div>
+                Right Pointer (R)
+              </div>
+              {problemType === PROBLEMS.THREE_SUM && (
+                <div className="flex items-center gap-2">
+                  <div className="w-3 h-3 rounded bg-[#CCFBF1] border border-[#14B8A6]"></div>
+                  Fixed Element (i)
+                </div>
+              )}
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 rounded bg-[#DCFCE7] border border-[#22C55E]"></div>
+                Match Found
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 rounded bg-[#FEE2E2] border border-[#EF4444]"></div>
+                Duplicate
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 rounded bg-[#E5E7EB] border border-[#D1D5DB]"></div>
+                Unvisited
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </main>
+  );
+};
+
+export default Animation;
diff --git a/src/app/visualizer/array/twopointers/codeblock.jsx b/src/app/visualizer/array/twopointers/codeblock.jsx
new file mode 100644
index 000000000..b4bc3213f
--- /dev/null
+++ b/src/app/visualizer/array/twopointers/codeblock.jsx
@@ -0,0 +1,283 @@
+"use client";
+import React from "react";
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const codeExamples = {
+  javascript: `// 1. Pair Sum — Opposite Direction
+function pairSum(arr, target) {
+  let left = 0, right = arr.length - 1;
+
+  while (left < right) {
+    const sum = arr[left] + arr[right];
+    if (sum === target) return [left, right];
+    else if (sum < target) left++;
+    else right--;
+  }
+  return [-1, -1]; // not found
+}
+
+// 2. Remove Duplicates — Same Direction (slow/fast)
+function removeDuplicates(arr) {
+  if (arr.length === 0) return 0;
+  let slow = 0;
+
+  for (let fast = 1; fast < arr.length; fast++) {
+    if (arr[fast] !== arr[slow]) {
+      slow++;
+      arr[slow] = arr[fast];
+    }
+  }
+  return slow + 1; // count of unique elements
+}
+
+// 3. Container With Most Water — Opposite Direction
+function maxArea(arr) {
+  let left = 0, right = arr.length - 1;
+  let maxWater = 0;
+
+  while (left < right) {
+    const water = Math.min(arr[left], arr[right]) * (right - left);
+    maxWater = Math.max(maxWater, water);
+    if (arr[left] < arr[right]) left++;
+    else right--;
+  }
+  return maxWater;
+}
+
+// 4. Three Sum — Fixed index + Opposite Direction
+function threeSum(arr) {
+  const sorted = [...arr].sort((a, b) => a - b);
+  const result = [];
+
+  for (let i = 0; i < sorted.length - 2; i++) {
+    if (i > 0 && sorted[i] === sorted[i - 1]) continue; // skip duplicates
+    let left = i + 1, right = sorted.length - 1;
+
+    while (left < right) {
+      const sum = sorted[i] + sorted[left] + sorted[right];
+      if (sum === 0) {
+        result.push([sorted[i], sorted[left], sorted[right]]);
+        left++; right--;
+      } else if (sum < 0) left++;
+      else right--;
+    }
+  }
+  return result;
+}`,
+
+  python: `# 1. Pair Sum — Opposite Direction
+def pair_sum(arr: list[int], target: int) -> list[int]:
+    left, right = 0, len(arr) - 1
+
+    while left < right:
+        s = arr[left] + arr[right]
+        if s == target:
+            return [left, right]
+        elif s < target:
+            left += 1
+        else:
+            right -= 1
+    return [-1, -1]  # not found
+
+# 2. Remove Duplicates — Same Direction (slow/fast)
+def remove_duplicates(arr: list[int]) -> int:
+    if not arr:
+        return 0
+    slow = 0
+
+    for fast in range(1, len(arr)):
+        if arr[fast] != arr[slow]:
+            slow += 1
+            arr[slow] = arr[fast]
+    return slow + 1
+
+# 3. Container With Most Water — Opposite Direction
+def max_area(arr: list[int]) -> int:
+    left, right = 0, len(arr) - 1
+    max_water = 0
+
+    while left < right:
+        water = min(arr[left], arr[right]) * (right - left)
+        max_water = max(max_water, water)
+        if arr[left] < arr[right]:
+            left += 1
+        else:
+            right -= 1
+    return max_water
+
+# 4. Three Sum — Fixed index + Opposite Direction
+def three_sum(arr: list[int]) -> list[list[int]]:
+    arr.sort()
+    result = []
+
+    for i in range(len(arr) - 2):
+        if i > 0 and arr[i] == arr[i - 1]:
+            continue  # skip duplicates
+        left, right = i + 1, len(arr) - 1
+
+        while left < right:
+            s = arr[i] + arr[left] + arr[right]
+            if s == 0:
+                result.append([arr[i], arr[left], arr[right]])
+                left += 1; right -= 1
+            elif s < 0:
+                left += 1
+            else:
+                right -= 1
+    return result`,
+
+  java: `import java.util.*;
+
+class TwoPointers {
+
+    // 1. Pair Sum — Opposite Direction
+    public int[] pairSum(int[] arr, int target) {
+        int left = 0, right = arr.length - 1;
+
+        while (left < right) {
+            int sum = arr[left] + arr[right];
+            if (sum == target) return new int[]{left, right};
+            else if (sum < target) left++;
+            else right--;
+        }
+        return new int[]{-1, -1};
+    }
+
+    // 2. Remove Duplicates — Same Direction (slow/fast)
+    public int removeDuplicates(int[] arr) {
+        if (arr.length == 0) return 0;
+        int slow = 0;
+
+        for (int fast = 1; fast < arr.length; fast++) {
+            if (arr[fast] != arr[slow]) {
+                slow++;
+                arr[slow] = arr[fast];
+            }
+        }
+        return slow + 1;
+    }
+
+    // 3. Container With Most Water — Opposite Direction
+    public int maxArea(int[] arr) {
+        int left = 0, right = arr.length - 1;
+        int maxWater = 0;
+
+        while (left < right) {
+            int water = Math.min(arr[left], arr[right]) * (right - left);
+            maxWater = Math.max(maxWater, water);
+            if (arr[left] < arr[right]) left++;
+            else right--;
+        }
+        return maxWater;
+    }
+
+    // 4. Three Sum — Fixed index + Opposite Direction
+    public List<List<Integer>> threeSum(int[] arr) {
+        Arrays.sort(arr);
+        List<List<Integer>> result = new ArrayList<>();
+
+        for (int i = 0; i < arr.length - 2; i++) {
+            if (i > 0 && arr[i] == arr[i - 1]) continue;
+            int left = i + 1, right = arr.length - 1;
+
+            while (left < right) {
+                int sum = arr[i] + arr[left] + arr[right];
+                if (sum == 0) {
+                    result.add(Arrays.asList(arr[i], arr[left], arr[right]));
+                    left++; right--;
+                } else if (sum < 0) left++;
+                else right--;
+            }
+        }
+        return result;
+    }
+}`,
+
+  cpp: `#include <iostream>
+#include <vector>
+#include <algorithm>
+using namespace std;
+
+// 1. Pair Sum — Opposite Direction
+vector<int> pairSum(vector<int>& arr, int target) {
+    int left = 0, right = arr.size() - 1;
+
+    while (left < right) {
+        int sum = arr[left] + arr[right];
+        if (sum == target) return {left, right};
+        else if (sum < target) left++;
+        else right--;
+    }
+    return {-1, -1};
+}
+
+// 2. Remove Duplicates — Same Direction (slow/fast)
+int removeDuplicates(vector<int>& arr) {
+    if (arr.empty()) return 0;
+    int slow = 0;
+
+    for (int fast = 1; fast < arr.size(); fast++) {
+        if (arr[fast] != arr[slow]) {
+            slow++;
+            arr[slow] = arr[fast];
+        }
+    }
+    return slow + 1;
+}
+
+// 3. Container With Most Water — Opposite Direction
+int maxArea(vector<int>& arr) {
+    int left = 0, right = arr.size() - 1;
+    int maxWater = 0;
+
+    while (left < right) {
+        int water = min(arr[left], arr[right]) * (right - left);
+        maxWater = max(maxWater, water);
+        if (arr[left] < arr[right]) left++;
+        else right--;
+    }
+    return maxWater;
+}
+
+// 4. Three Sum — Fixed index + Opposite Direction
+vector<vector<int>> threeSum(vector<int>& arr) {
+    sort(arr.begin(), arr.end());
+    vector<vector<int>> result;
+
+    for (int i = 0; i < (int)arr.size() - 2; i++) {
+        if (i > 0 && arr[i] == arr[i - 1]) continue;
+        int left = i + 1, right = arr.size() - 1;
+
+        while (left < right) {
+            int sum = arr[i] + arr[left] + arr[right];
+            if (sum == 0) {
+                result.push_back({arr[i], arr[left], arr[right]});
+                left++; right--;
+            } else if (sum < 0) left++;
+            else right--;
+        }
+    }
+    return result;
+}`
+};
+
+const fileNames = {
+  javascript: "twoPointers.js",
+  python: "two_pointers.py",
+  java: "TwoPointers.java",
+  cpp: "two_pointers.cpp",
+};
+
+const Code = () => {
+  return (
+    <div>
+      <CodeBlock
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+      />
+    </div>
+  );
+};
+
+export default Code;
\ No newline at end of file
diff --git a/src/app/visualizer/array/twopointers/content.jsx b/src/app/visualizer/array/twopointers/content.jsx
new file mode 100644
index 000000000..c09c3e0de
--- /dev/null
+++ b/src/app/visualizer/array/twopointers/content.jsx
@@ -0,0 +1,95 @@
+"use client";
+import React from "react";
+
+const Content = () => {
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+
+        {/* Intro */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: '-0.03em' }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Two Pointers Technique
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed mb-4">
+              The <strong>Two Pointers</strong> technique uses two index variables that traverse a data structure — usually an array — simultaneously. By moving pointers strategically, we eliminate the need for a nested loop, reducing time complexity from <strong>O(N²)</strong> to <strong>O(N)</strong>.
+            </p>
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              Two Pointers problems fall into two categories: <strong>opposite direction</strong> (pointers start at both ends and move toward each other) and <strong>same direction</strong> (a slow and a fast pointer both move forward, at different speeds).
+            </p>
+          </div>
+        </section>
+
+        {/* Opposite Direction */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: '-0.03em' }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            1. Opposite Direction Pointers
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed mb-4">
+              Place <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">left</code> at index <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">0</code> and <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">right</code> at index <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">n-1</code>. Move them toward each other based on a condition. Requires a <strong>sorted array</strong> in most cases.
+            </p>
+            <h4 className="font-semibold text-gray-800 dark:text-gray-200 mb-2">Common Pattern:</h4>
+            <ul className="list-disc list-inside text-[#374151] dark:text-[#d1d5db] mb-4 space-y-1 marker:text-gray-500 dark:marker:text-gray-400">
+              <li>Initialize <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">left = 0</code>, <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">right = n - 1</code>.</li>
+              <li>Compute a value using both pointers (e.g., sum, area).</li>
+              <li>If the value is too small, move <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">left</code> right to increase it.</li>
+              <li>If the value is too large, move <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">right</code> left to decrease it.</li>
+              <li>Stop when <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">left &gt;= right</code>.</li>
+            </ul>
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              <strong>Problems:</strong> Pair Sum, Container With Most Water, Three Sum.
+            </p>
+          </div>
+        </section>
+
+        {/* Same Direction */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: '-0.03em' }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            2. Same Direction Pointers (Slow & Fast)
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed mb-4">
+              Both pointers start at the beginning and move forward, but at different rates. A <strong>slow pointer</strong> marks the boundary of the processed region; a <strong>fast pointer</strong> scans ahead.
+            </p>
+            <h4 className="font-semibold text-gray-800 dark:text-gray-200 mb-2">Common Pattern:</h4>
+            <ul className="list-disc list-inside text-[#374151] dark:text-[#d1d5db] mb-4 space-y-1 marker:text-gray-500 dark:marker:text-gray-400">
+              <li>Initialize <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">slow = 0</code>, <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">fast = 1</code>.</li>
+              <li>Advance <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">fast</code> through the array.</li>
+              <li>When a valid element is found, advance <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">slow</code> and write/record the value.</li>
+              <li>Repeat until <code className="bg-[#f3f4f6] dark:bg-[#222] px-1 rounded">fast</code> reaches the end.</li>
+            </ul>
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              <strong>Problems:</strong> Remove Duplicates, Move Zeroes, Remove Element.
+            </p>
+          </div>
+        </section>
+
+        {/* Why O(N) */}
+        <section className="p-6">
+          <h1 className="text-2xl font-black text-[#1a1a1a] dark:text-white mb-4 flex items-center" style={{ fontFamily: "'Inter', sans-serif", letterSpacing: '-0.03em' }}>
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Why is it O(N)?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed mb-4">
+              Even though we have two pointers, each pointer only ever moves in one direction — never backward. In the worst case, each pointer traverses the entire array once.
+            </p>
+            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                Total work = at most <strong>2N</strong> steps (left pointer moves at most N times, right pointer moves at most N times), which simplifies to <strong>O(N)</strong> — a significant improvement over the <strong>O(N²)</strong> brute-force approach.
+              </p>
+            </div>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+};
+
+export default Content;
\ No newline at end of file
diff --git a/src/app/visualizer/array/twopointers/quiz.jsx b/src/app/visualizer/array/twopointers/quiz.jsx
new file mode 100644
index 000000000..3ff5931f9
--- /dev/null
+++ b/src/app/visualizer/array/twopointers/quiz.jsx
@@ -0,0 +1,342 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const twoPointersQuestions = [
+  {
+    question: "What is the primary advantage of the Two Pointers technique over a brute-force nested loop?",
+    options: [
+      "It works on unsorted arrays without any preprocessing.",
+      "It reduces time complexity from O(N²) to O(N).",
+      "It reduces space complexity from O(N) to O(log N).",
+      "It eliminates the need for any comparisons."
+    ],
+    correctAnswer: 1,
+    explanation: "By moving two pointers strategically instead of checking all pairs, Two Pointers reduces time complexity from O(N²) to O(N)."
+  },
+  {
+    question: "For the Pair Sum problem using Two Pointers, what is a prerequisite for the input array?",
+    options: [
+      "The array must contain only positive integers.",
+      "The array must have an even number of elements.",
+      "The array must be sorted.",
+      "The array must not contain duplicates."
+    ],
+    correctAnswer: 2,
+    explanation: "The opposite-direction Two Pointers approach for Pair Sum relies on the sorted order to decide whether to move the left pointer right (increase sum) or the right pointer left (decrease sum)."
+  },
+  {
+    question: "In the Remove Duplicates problem using slow/fast pointers, what does the slow pointer represent?",
+    options: [
+      "The current element being compared.",
+      "The boundary of the unique elements processed so far.",
+      "The last duplicate found.",
+      "The middle of the array."
+    ],
+    correctAnswer: 1,
+    explanation: "The slow pointer marks the end of the valid (unique) region. It only advances when the fast pointer finds a new unique element."
+  },
+  {
+    question: "In the Container With Most Water problem, if arr[left] < arr[right], which pointer should you move and why?",
+    options: [
+      "Move right left — to find a taller right boundary.",
+      "Move left right — the left height is the bottleneck; moving it may find a taller boundary.",
+      "Move both pointers inward simultaneously.",
+      "Keep both pointers fixed and compute for all inner pairs."
+    ],
+    correctAnswer: 1,
+    explanation: "The area is limited by the shorter height. Moving the taller pointer inward can only decrease width without increasing height, so we move the shorter (left) pointer to potentially find a taller one."
+  },
+  {
+    question: "Why is the Two Pointers technique O(N) even though each step involves two pointer comparisons?",
+    options: [
+      "Because one pointer never moves.",
+      "Because each pointer only moves forward and each element is visited at most once per pointer.",
+      "Because the compiler merges the two loops.",
+      "Because we break early when a match is found."
+    ],
+    correctAnswer: 1,
+    explanation: "Each pointer traverses the array at most once in a single direction. Total steps = at most 2N, which simplifies to O(N)."
+  },
+  {
+  question: "Which type of problems is the Two Pointers technique most commonly used for?",
+  options: [
+    "Graph traversal",
+    "Problems involving sorted arrays or linked lists",
+    "Tree balancing",
+    "Dynamic programming only"
+  ],
+  correctAnswer: 1,
+  explanation: "The Two Pointers technique is most effective for sorted arrays, linked lists, and problems requiring simultaneous traversal from two positions."
+},
+{
+  question: "In the Pair Sum problem on a sorted array, what should you do if the current sum is smaller than the target?",
+  options: [
+    "Move the left pointer to the right",
+    "Move the right pointer to the left",
+    "Move both pointers inward",
+    "Restart the search"
+  ],
+  correctAnswer: 0,
+  explanation: "Moving the left pointer to the right increases the sum because the array is sorted in ascending order."
+},
+{
+  question: "Which pointer usually moves faster in the Fast and Slow Pointer technique used for cycle detection?",
+  options: [
+    "Slow pointer",
+    "Fast pointer",
+    "Both move at the same speed",
+    "Neither pointer moves"
+  ],
+  correctAnswer: 1,
+  explanation: "The fast pointer typically moves two steps while the slow pointer moves one step, allowing cycle detection."
+},
+{
+  question: "Which famous algorithm uses the Fast and Slow Pointer technique?",
+  options: [
+    "Dijkstra's Algorithm",
+    "Floyd's Cycle Detection Algorithm",
+    "Kruskal's Algorithm",
+    "Prim's Algorithm"
+  ],
+  correctAnswer: 1,
+  explanation: "Floyd's Cycle Detection Algorithm (Tortoise and Hare) uses fast and slow pointers to detect cycles efficiently."
+},
+{
+  question: "What is the main idea behind the Two Pointers technique?",
+  options: [
+    "Use recursion to divide the problem",
+    "Traverse the data structure simultaneously using two indices or pointers",
+    "Sort the array after every iteration",
+    "Use extra memory to store visited elements"
+  ],
+  correctAnswer: 1,
+  explanation: "The Two Pointers technique solves problems efficiently by moving two pointers strategically through the data structure."
+},
+{
+  question: "What is the time complexity of the Two Pointers technique for most array problems?",
+  options: [
+    "O(n²)",
+    "O(log n)",
+    "O(n)",
+    "O(n log n)"
+  ],
+  correctAnswer: 2,
+  explanation: "Since each pointer moves across the array at most once, the overall time complexity is O(n)."
+},
+{
+  question: "Which pointer movement increases the current sum in a sorted array?",
+  options: [
+    "Move the left pointer to the right",
+    "Move the right pointer to the left",
+    "Move both pointers left",
+    "Do not move any pointer"
+  ],
+  correctAnswer: 0,
+  explanation: "Moving the left pointer to the right selects a larger value, increasing the current sum."
+},
+{
+  question: "When searching for a target sum in a sorted array, what should you do if the current sum is greater than the target?",
+  options: [
+    "Move the left pointer right",
+    "Move the right pointer left",
+    "Move both pointers",
+    "Restart the algorithm"
+  ],
+  correctAnswer: 1,
+  explanation: "Moving the right pointer left decreases the current sum because the array is sorted."
+},
+{
+  question: "Which type of linked list problem commonly uses fast and slow pointers?",
+  options: [
+    "Sorting",
+    "Cycle Detection",
+    "Tree Traversal",
+    "Hashing"
+  ],
+  correctAnswer: 1,
+  explanation: "Fast and slow pointers are widely used for detecting cycles in linked lists."
+},
+{
+  question: "If the fast and slow pointers meet in a linked list, what can be concluded?",
+  options: [
+    "The list is sorted",
+    "The list contains a cycle",
+    "The list is empty",
+    "The list has duplicate values"
+  ],
+  correctAnswer: 1,
+  explanation: "If both pointers meet, Floyd's Cycle Detection Algorithm confirms the presence of a cycle."
+},
+{
+  question: "Which problem commonly uses opposite-direction pointers?",
+  options: [
+    "Pair Sum in a Sorted Array",
+    "Merge Sort",
+    "Breadth First Search",
+    "Topological Sort"
+  ],
+  correctAnswer: 0,
+  explanation: "Pair Sum is a classic opposite-direction Two Pointers problem."
+},
+{
+  question: "Which pointer technique is commonly used to find the middle node of a linked list?",
+  options: [
+    "Left and Right Pointers",
+    "Fast and Slow Pointers",
+    "Sliding Window",
+    "Binary Search"
+  ],
+  correctAnswer: 1,
+  explanation: "The slow pointer moves one step while the fast pointer moves two steps, allowing the slow pointer to reach the middle."
+},
+{
+  question: "How many times is each element typically visited in the Two Pointers technique?",
+  options: [
+    "Once or twice",
+    "Exactly n times",
+    "log n times",
+    "n² times"
+  ],
+  correctAnswer: 0,
+  explanation: "Each element is generally visited at most once by each pointer."
+},
+{
+  question: "Which of the following is NOT a common application of Two Pointers?",
+  options: [
+    "Removing duplicates",
+    "Checking if a string is a palindrome",
+    "Finding shortest paths in graphs",
+    "Pair Sum"
+  ],
+  correctAnswer: 2,
+  explanation: "Shortest path problems are solved using graph algorithms, not Two Pointers."
+},
+{
+  question: "What is the biggest advantage of the Two Pointers technique?",
+  options: [
+    "Reduces unnecessary comparisons",
+    "Sorts the data automatically",
+    "Requires recursion",
+    "Uses extra memory"
+  ],
+  correctAnswer: 0,
+  explanation: "Two Pointers avoids checking every possible pair, greatly improving efficiency."
+},
+{
+  question: "Which string problem commonly uses Two Pointers?",
+  options: [
+    "Palindrome Checking",
+    "Merge Sort",
+    "Heap Construction",
+    "Counting Sort"
+  ],
+  correctAnswer: 0,
+  explanation: "Palindrome checking compares characters from both ends using two pointers."
+},
+{
+  question: "In palindrome checking, what happens if the characters at both pointers are equal?",
+  options: [
+    "Stop immediately",
+    "Move both pointers toward the center",
+    "Restart the algorithm",
+    "Swap the characters"
+  ],
+  correctAnswer: 1,
+  explanation: "Matching characters allow both pointers to move inward until they meet."
+},
+{
+  question: "What happens when the left pointer crosses the right pointer during palindrome checking?",
+  options: [
+    "The string is confirmed to be a palindrome",
+    "The string is reversed",
+    "The algorithm fails",
+    "The search restarts"
+  ],
+  correctAnswer: 0,
+  explanation: "Crossing pointers indicates that all corresponding characters matched."
+},
+{
+  question: "Which data structure is frequently used with Two Pointers?",
+  options: [
+    "Arrays",
+    "Linked Lists",
+    "Strings",
+    "All of the above"
+  ],
+  correctAnswer: 3,
+  explanation: "Two Pointers is commonly applied to arrays, linked lists, and strings."
+},
+{
+  question: "Why does the Two Pointers technique often require sorted input?",
+  options: [
+    "To move pointers intelligently based on comparisons",
+    "To reduce memory usage",
+    "To allow recursion",
+    "To eliminate duplicates automatically"
+  ],
+  correctAnswer: 0,
+  explanation: "Sorted order enables efficient pointer movement toward the solution."
+},
+{
+  question: "Which technique is commonly combined with Two Pointers for array partitioning?",
+  options: [
+    "Quick Sort Partition",
+    "Breadth First Search",
+    "Binary Search Tree",
+    "Heapify"
+  ],
+  correctAnswer: 0,
+  explanation: "Quick Sort's partition step uses a two-pointer approach."
+},
+{
+  question: "What is the auxiliary space complexity of most Two Pointers algorithms?",
+  options: [
+    "O(1)",
+    "O(log n)",
+    "O(n)",
+    "O(n²)"
+  ],
+  correctAnswer: 0,
+  explanation: "Only a few pointer variables are needed, resulting in constant extra space."
+},
+{
+  question: "Which scenario is ideal for applying Two Pointers?",
+  options: [
+    "Finding pairs in a sorted array",
+    "Traversing graphs",
+    "Building heaps",
+    "Performing DFS"
+  ],
+  correctAnswer: 0,
+  explanation: "Two Pointers excels at efficiently finding pairs and processing sorted arrays."
+},
+{
+  question: "Which famous linked list problem is solved using fast and slow pointers?",
+  options: [
+    "Finding the middle node",
+    "Sorting the list",
+    "Merging lists",
+    "Deleting duplicates"
+  ],
+  correctAnswer: 0,
+  explanation: "The middle node can be found efficiently using fast and slow pointers."
+},
+{
+  question: "Which statement about the Two Pointers technique is TRUE?",
+  options: [
+    "It always requires nested loops",
+    "It is useful for optimizing problems involving sequential traversal",
+    "It only works on graphs",
+    "It always requires additional arrays"
+  ],
+  correctAnswer: 1,
+  explanation: "Two Pointers optimizes sequential traversal problems by moving two indices strategically instead of using nested loops."
+}
+];
+
+const Quiz = () => {
+  return <QuizEngine title="Two Pointers Technique Quiz" questions={twoPointersQuestions} />;
+};
+
+export default Quiz;
\ No newline at end of file
diff --git a/src/app/visualizer/array/twopointers/quiz/page.jsx b/src/app/visualizer/array/twopointers/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/array/twopointers/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/backtracking/page.jsx b/src/app/visualizer/backtracking/page.jsx
new file mode 100644
index 000000000..2d37fbe41
--- /dev/null
+++ b/src/app/visualizer/backtracking/page.jsx
@@ -0,0 +1,539 @@
+"use client";
+import { useState, useEffect, useRef } from "react";
+
+// ─── N-Queens ──────────────────────────────────────────────────────────────────
+function nQueensSteps(n) {
+  const steps = [];
+  const board = Array.from({ length: n }, () => new Array(n).fill(0));
+
+  function isSafe(row, col) {
+    for (let i = 0; i < row; i++) if (board[i][col] === 1) return false;
+    for (let i = row - 1, j = col - 1; i >= 0 && j >= 0; i--, j--)
+      if (board[i][j] === 1) return false;
+    for (let i = row - 1, j = col + 1; i >= 0 && j < n; i--, j++)
+      if (board[i][j] === 1) return false;
+    return true;
+  }
+
+  function solve(row) {
+    if (row === n) {
+      steps.push({ board: board.map(r => [...r]), type: "solution", row: -1, col: -1 });
+      return true;
+    }
+    for (let col = 0; col < n; col++) {
+      const safe = isSafe(row, col);
+      board[row][col] = safe ? 1 : 0;
+      steps.push({ board: board.map(r => [...r]), type: safe ? "place" : "conflict", row, col });
+      if (safe) {
+        board[row][col] = 1;
+        if (solve(row + 1)) return true;
+        board[row][col] = 0;
+        steps.push({ board: board.map(r => [...r]), type: "backtrack", row, col });
+      }
+    }
+    return false;
+  }
+
+  solve(0);
+  return steps;
+}
+
+// ─── Rat in a Maze ─────────────────────────────────────────────────────────────
+function ratMazeSteps(maze) {
+  const n = maze.length;
+  const steps = [];
+  const sol = Array.from({ length: n }, () => new Array(n).fill(0));
+
+  function isSafe(x, y) {
+    return x >= 0 && x < n && y >= 0 && y < n && maze[x][y] === 1;
+  }
+
+  function solve(x, y) {
+    if (x === n - 1 && y === n - 1) {
+      sol[x][y] = 1;
+      steps.push({ sol: sol.map(r => [...r]), type: "solution", x, y });
+      return true;
+    }
+    if (isSafe(x, y)) {
+      sol[x][y] = 1;
+      steps.push({ sol: sol.map(r => [...r]), type: "visit", x, y });
+      if (solve(x + 1, y) || solve(x, y + 1)) return true;
+      sol[x][y] = 0;
+      steps.push({ sol: sol.map(r => [...r]), type: "backtrack", x, y });
+    }
+    return false;
+  }
+
+  solve(0, 0);
+  return steps;
+}
+
+// ─── Subset Sum ────────────────────────────────────────────────────────────────
+function subsetSumSteps(arr, target) {
+  const steps = [];
+
+  function solve(idx, current, path) {
+    steps.push({ idx, current, path: [...path], target, type: current === target ? "solution" : current > target ? "prune" : "explore" });
+    if (current === target) return;
+    if (current > target || idx >= arr.length) return;
+    path.push(arr[idx]);
+    solve(idx + 1, current + arr[idx], path);
+    path.pop();
+    steps.push({ idx, current, path: [...path], target, type: "backtrack" });
+    solve(idx + 1, current, path);
+  }
+
+  solve(0, 0, []);
+  return steps;
+}
+
+// ─── Sudoku ────────────────────────────────────────────────────────────────────
+function sudokuSteps(inputBoard) {
+  const steps = [];
+  const board = inputBoard.map(r => [...r]);
+
+  function isValid(row, col, num) {
+    for (let j = 0; j < 9; j++) if (board[row][j] === num) return false;
+    for (let i = 0; i < 9; i++) if (board[i][col] === num) return false;
+    const sr = Math.floor(row / 3) * 3, sc = Math.floor(col / 3) * 3;
+    for (let i = 0; i < 3; i++)
+      for (let j = 0; j < 3; j++)
+        if (board[sr + i][sc + j] === num) return false;
+    return true;
+  }
+
+  function solve() {
+    for (let row = 0; row < 9; row++) {
+      for (let col = 0; col < 9; col++) {
+        if (board[row][col] === 0) {
+          for (let num = 1; num <= 9; num++) {
+            if (isValid(row, col, num)) {
+              board[row][col] = num;
+              steps.push({ board: board.map(r => [...r]), type: "place", row, col, num });
+              if (solve()) return true;
+              board[row][col] = 0;
+              steps.push({ board: board.map(r => [...r]), type: "backtrack", row, col });
+            } else {
+              steps.push({ board: board.map(r => [...r]), type: "conflict", row, col, num });
+            }
+          }
+          return false;
+        }
+      }
+    }
+    steps.push({ board: board.map(r => [...r]), type: "solution", row: -1, col: -1 });
+    return true;
+  }
+
+  solve();
+  return steps;
+}
+
+// ─── Default Data ───────────────────────────────────────────────────────────────
+const DEFAULT_SUDOKU = [
+  [5,3,0,0,7,0,0,0,0],
+  [6,0,0,1,9,5,0,0,0],
+  [0,9,8,0,0,0,0,6,0],
+  [8,0,0,0,6,0,0,0,3],
+  [4,0,0,8,0,3,0,0,1],
+  [7,0,0,0,2,0,0,0,6],
+  [0,6,0,0,0,0,2,8,0],
+  [0,0,0,4,1,9,0,0,5],
+  [0,0,0,0,8,0,0,7,9],
+];
+
+const DEFAULT_MAZE = [
+  [1,0,0,0],
+  [1,1,0,1],
+  [0,1,0,0],
+  [1,1,1,1],
+];
+
+// ─── Color Helper ───────────────────────────────────────────────────────────────
+function getCellStyle(type) {
+  switch (type) {
+    case "place":     return { bg: "#16a34a", text: "#fff" };
+    case "conflict":  return { bg: "#dc2626", text: "#fff" };
+    case "backtrack": return { bg: "#ea580c", text: "#fff" };
+    case "solution":  return { bg: "#2563eb", text: "#fff" };
+    case "visit":     return { bg: "#16a34a", text: "#fff" };
+    case "explore":   return { bg: "#7c3aed", text: "#fff" };
+    case "prune":     return { bg: "#dc2626", text: "#fff" };
+    default:          return { bg: "#1e293b", text: "#475569" };
+  }
+}
+
+// ─── N-Queens Board ─────────────────────────────────────────────────────────────
+function NQueensViz({ steps, stepIdx }) {
+  const s = steps[Math.min(stepIdx, steps.length - 1)];
+  if (!s) return null;
+  const n = s.board.length;
+  return (
+    <div>
+      <div className="inline-grid gap-1 mt-4" style={{ gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` }}>
+        {s.board.map((row, i) =>
+          row.map((cell, j) => {
+            const isCurrent = i === s.row && j === s.col;
+            const isQueen = cell === 1;
+            let bg = (i + j) % 2 === 0 ? "#1e293b" : "#0f172a";
+            let text = "#475569";
+            if (isCurrent) { bg = getCellStyle(s.type).bg; text = "#fff"; }
+            else if (isQueen) { bg = "#16a34a"; text = "#fff"; }
+            return (
+              <div key={`${i}-${j}`}
+                className="w-10 h-10 flex items-center justify-center text-lg rounded transition-all duration-200 border border-slate-800"
+                style={{ backgroundColor: bg, color: text }}>
+                {isQueen ? "♛" : ""}
+              </div>
+            );
+          })
+        )}
+      </div>
+      <p className="mt-3 text-sm font-mono text-slate-400">
+        Step type: <span className="font-bold" style={{ color: getCellStyle(s.type).bg }}>{s.type}</span>
+        {s.row >= 0 && ` — Row ${s.row}, Col ${s.col}`}
+      </p>
+    </div>
+  );
+}
+
+// ─── Rat in a Maze ──────────────────────────────────────────────────────────────
+function RatMazeViz({ steps, stepIdx, maze }) {
+  const s = steps[Math.min(stepIdx, steps.length - 1)];
+  if (!s) return null;
+  const n = maze.length;
+  return (
+    <div>
+      <div className="inline-grid gap-1 mt-4" style={{ gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` }}>
+        {maze.map((row, i) =>
+          row.map((cell, j) => {
+            const isCurrent = i === s.x && j === s.y;
+            const inPath = s.sol[i][j] === 1;
+            const isBlocked = cell === 0;
+            let bg = isBlocked ? "#0f172a" : "#1e293b";
+            let text = isBlocked ? "#ef4444" : "#475569";
+            if (isCurrent) { bg = getCellStyle(s.type).bg; text = "#fff"; }
+            else if (inPath && !isBlocked) { bg = "#15803d"; text = "#fff"; }
+            return (
+              <div key={`${i}-${j}`}
+                className="w-12 h-12 flex items-center justify-center text-lg rounded transition-all duration-200 border border-slate-800"
+                style={{ backgroundColor: bg, color: text }}>
+                {i === 0 && j === 0 ? "🐀" : i === n - 1 && j === n - 1 ? "🏁" : isBlocked ? "✕" : inPath ? "•" : ""}
+              </div>
+            );
+          })
+        )}
+      </div>
+      <p className="mt-3 text-sm font-mono text-slate-400">
+        Step type: <span className="font-bold" style={{ color: getCellStyle(s.type).bg }}>{s.type}</span>
+        {` — Position (${s.x}, ${s.y})`}
+      </p>
+    </div>
+  );
+}
+
+// ─── Subset Sum ─────────────────────────────────────────────────────────────────
+function SubsetSumViz({ steps, stepIdx, arr }) {
+  const s = steps[Math.min(stepIdx, steps.length - 1)];
+  if (!s) return null;
+  const { bg, text } = getCellStyle(s.type);
+  return (
+    <div className="mt-4">
+      <div className="flex gap-2 flex-wrap mb-4">
+        {arr.map((v, i) => {
+          const inPath = s.path.includes(v) && s.idx > i;
+          const isCurrent = i === s.idx;
+          return (
+            <div key={i} className="flex flex-col items-center">
+              <div className="w-10 h-10 rounded-lg flex items-center justify-center text-sm font-mono font-bold border border-slate-700 transition-all duration-200"
+                style={{
+                  backgroundColor: isCurrent ? bg : inPath ? "#16a34a" : "#1e293b",
+                  color: isCurrent ? text : inPath ? "#fff" : "#475569"
+                }}>
+                {v}
+              </div>
+              <span className="text-xs text-slate-500 mt-1">[{i}]</span>
+            </div>
+          );
+        })}
+      </div>
+      <div className="bg-slate-800 rounded-lg p-3 font-mono text-sm">
+        <p className="text-slate-400">Current Sum: <span className="text-white font-bold">{s.current}</span></p>
+        <p className="text-slate-400">Target: <span className="text-indigo-400 font-bold">{s.target}</span></p>
+        <p className="text-slate-400">Path: <span className="text-emerald-400">[{s.path.join(", ")}]</span></p>
+        <p className="mt-1">Status: <span className="font-bold" style={{ color: bg }}>{s.type}</span></p>
+      </div>
+    </div>
+  );
+}
+
+// ─── Sudoku ─────────────────────────────────────────────────────────────────────
+function SudokuViz({ steps, stepIdx, initial }) {
+  const s = steps[Math.min(stepIdx, steps.length - 1)];
+  if (!s) return null;
+  return (
+    <div className="overflow-x-auto">
+      <div className="inline-grid gap-0.5 mt-4" style={{ gridTemplateColumns: "repeat(9, minmax(0, 1fr))" }}>
+        {s.board.map((row, i) =>
+          row.map((cell, j) => {
+            const isCurrent = i === s.row && j === s.col;
+            const isInitial = initial[i][j] !== 0;
+            const borderR = (j + 1) % 3 === 0 && j < 8 ? "2px solid #475569" : "1px solid #1e293b";
+            const borderB = (i + 1) % 3 === 0 && i < 8 ? "2px solid #475569" : "1px solid #1e293b";
+            let bg = isInitial ? "#0f172a" : "#1e293b";
+            let textC = isInitial ? "#94a3b8" : "#475569";
+            if (isCurrent && !isInitial) { bg = getCellStyle(s.type).bg; textC = "#fff"; }
+            return (
+              <div key={`${i}-${j}`}
+                className="w-8 h-8 flex items-center justify-center text-xs font-mono font-bold transition-all duration-150"
+                style={{ backgroundColor: bg, color: textC, borderRight: borderR, borderBottom: borderB }}>
+                {cell !== 0 ? cell : ""}
+              </div>
+            );
+          })
+        )}
+      </div>
+      <p className="mt-3 text-sm font-mono text-slate-400">
+        Step: <span className="font-bold" style={{ color: getCellStyle(s.type).bg }}>{s.type}</span>
+        {s.row >= 0 && ` — Cell (${s.row},${s.col})${s.num ? ` trying ${s.num}` : ""}`}
+      </p>
+    </div>
+  );
+}
+
+// ─── Main Component ─────────────────────────────────────────────────────────────
+const PROBLEMS = ["N-Queens", "Rat in a Maze", "Subset Sum", "Sudoku"];
+
+const COMPLEXITY = {
+  "N-Queens":      { time: "O(N!)", space: "O(N²)" },
+  "Rat in a Maze": { time: "O(2^(N²))", space: "O(N²)" },
+  "Subset Sum":    { time: "O(2^N)", space: "O(N)" },
+  "Sudoku":        { time: "O(9^M)", space: "O(1)" },
+};
+
+export default function BacktrackingVisualizer() {
+  const [problem, setProblem] = useState("N-Queens");
+  const [steps, setSteps] = useState([]);
+  const [stepIdx, setStepIdx] = useState(0);
+  const [playing, setPlaying] = useState(false);
+  const [speed, setSpeed] = useState(300);
+  const intervalRef = useRef(null);
+
+  const [queensN, setQueensN] = useState(5);
+  const [subsetArr, setSubsetArr] = useState("3,1,4,2,5");
+  const [subsetTarget, setSubsetTarget] = useState(7);
+  const [maze] = useState(DEFAULT_MAZE);
+
+  const subsetArrParsed = subsetArr.split(",").map(v => parseInt(v.trim(), 10)).filter(v => !isNaN(v)).slice(0, 8);
+
+  const buildSteps = () => {
+    let s = [];
+    if (problem === "N-Queens") s = nQueensSteps(Math.min(queensN, 7));
+    else if (problem === "Rat in a Maze") s = ratMazeSteps(maze);
+    else if (problem === "Subset Sum") s = subsetSumSteps(subsetArrParsed, subsetTarget);
+    else if (problem === "Sudoku") s = sudokuSteps(DEFAULT_SUDOKU);
+    setSteps(s);
+    setStepIdx(0);
+    setPlaying(false);
+  };
+
+  useEffect(() => { buildSteps(); }, [problem]);
+
+  useEffect(() => {
+    if (!playing) { clearInterval(intervalRef.current); return; }
+    intervalRef.current = setInterval(() => {
+      setStepIdx(prev => {
+        if (prev >= steps.length - 1) { setPlaying(false); return prev; }
+        return prev + 1;
+      });
+    }, speed);
+    return () => clearInterval(intervalRef.current);
+  }, [playing, steps, speed]);
+
+  const totalBacktracks = steps.filter(s => s.type === "backtrack").length;
+
+  return (
+    <div className="min-h-screen bg-slate-950 text-slate-100 font-sans">
+      <div className="border-b border-slate-800 px-6 py-5">
+        <h1 className="text-2xl font-bold tracking-tight text-white">
+          Backtracking Algorithm Visualizer
+        </h1>
+        <p className="text-sm text-slate-400 mt-1">
+          Explore how backtracking searches, prunes, and finds solutions step by step
+        </p>
+      </div>
+
+      <div className="flex flex-col lg:flex-row min-h-screen">
+        <div className="w-full lg:w-72 border-r border-slate-800 p-5 flex flex-col gap-5 shrink-0">
+
+          <section>
+            <h2 className="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-3">1. Choose Problem</h2>
+            <div className="flex flex-col gap-2">
+              {PROBLEMS.map(p => (
+                <button key={p} onClick={() => setProblem(p)}
+                  className={`text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${problem === p ? "bg-indigo-600 text-white" : "bg-slate-900 text-slate-400 hover:text-white border border-slate-700"}`}>
+                  {p}
+                </button>
+              ))}
+            </div>
+          </section>
+
+          <hr className="border-slate-800" />
+
+          <section>
+            <h2 className="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-3">2. Set Input</h2>
+
+            {problem === "N-Queens" && (
+              <div>
+                <label className="text-xs text-slate-400 block mb-1">Board Size N (4–7)</label>
+                <input type="number" min={4} max={7} value={queensN}
+                  onChange={e => setQueensN(parseInt(e.target.value))}
+                  className="w-full bg-slate-900 border border-slate-700 rounded-md px-3 py-2 text-sm text-white focus:outline-none focus:border-indigo-500 font-mono" />
+              </div>
+            )}
+
+            {problem === "Subset Sum" && (
+              <div className="flex flex-col gap-2">
+                <div>
+                  <label className="text-xs text-slate-400 block mb-1">Array (max 8 elements)</label>
+                  <input value={subsetArr} onChange={e => setSubsetArr(e.target.value)}
+                    className="w-full bg-slate-900 border border-slate-700 rounded-md px-3 py-2 text-sm text-white focus:outline-none focus:border-indigo-500 font-mono" />
+                </div>
+                <div>
+                  <label className="text-xs text-slate-400 block mb-1">Target Sum</label>
+                  <input type="number" value={subsetTarget} onChange={e => setSubsetTarget(parseInt(e.target.value))}
+                    className="w-full bg-slate-900 border border-slate-700 rounded-md px-3 py-2 text-sm text-white focus:outline-none focus:border-indigo-500 font-mono" />
+                </div>
+              </div>
+            )}
+
+            {problem === "Rat in a Maze" && (
+              <p className="text-xs text-slate-500">Using default 4×4 maze. 1=open, 0=blocked.</p>
+            )}
+            {problem === "Sudoku" && (
+              <p className="text-xs text-slate-500">Using a classic 9×9 Sudoku puzzle. 0 = empty cell.</p>
+            )}
+
+            <button onClick={buildSteps}
+              className="mt-3 w-full bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium py-2 rounded-md transition-colors">
+              Generate Steps
+            </button>
+          </section>
+
+          <hr className="border-slate-800" />
+
+          <section>
+            <h2 className="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-3">3. Animate</h2>
+            <div className="mb-3">
+              <label className="text-xs text-slate-400 block mb-1">
+                Speed: {speed === 150 ? "Fast" : speed === 300 ? "Medium" : "Slow"}
+              </label>
+              <div className="flex gap-2">
+                {[["Slow", 600], ["Medium", 300], ["Fast", 150]].map(([label, val]) => (
+                  <button key={label} onClick={() => setSpeed(val)}
+                    className={`flex-1 text-xs py-1.5 rounded-md border transition-colors ${speed === val ? "bg-slate-600 border-slate-500 text-white" : "border-slate-700 text-slate-400 hover:text-white bg-slate-900"}`}>
+                    {label}
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div className="flex gap-2 mb-2">
+              <button onClick={() => { setStepIdx(0); setTimeout(() => setPlaying(true), 10); }}
+                disabled={steps.length === 0}
+                className="flex-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-40 text-white text-xs py-2 rounded-md font-medium">
+                ▶ Play
+              </button>
+              <button onClick={() => setPlaying(false)} disabled={!playing}
+                className="flex-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-40 text-white text-xs py-2 rounded-md font-medium">
+                ⏸ Pause
+              </button>
+            </div>
+            <div className="flex gap-2">
+              <button onClick={() => { setPlaying(false); setStepIdx(p => Math.max(0, p - 1)); }}
+                disabled={stepIdx === 0}
+                className="flex-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-40 text-white text-xs py-2 rounded-md font-medium">
+                ◀ Prev
+              </button>
+              <button onClick={() => { setPlaying(false); setStepIdx(p => Math.min(steps.length - 1, p + 1)); }}
+                disabled={stepIdx >= steps.length - 1}
+                className="flex-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-40 text-white text-xs py-2 rounded-md font-medium">
+                Next ▶
+              </button>
+            </div>
+            {steps.length > 0 && (
+              <div className="mt-2">
+                <div className="flex justify-between text-xs text-slate-500 mb-1">
+                  <span>Step {stepIdx + 1} / {steps.length}</span>
+                  <span>{Math.round(((stepIdx + 1) / steps.length) * 100)}%</span>
+                </div>
+                <div className="w-full bg-slate-800 rounded-full h-1.5">
+                  <div className="bg-indigo-500 h-1.5 rounded-full transition-all duration-300"
+                    style={{ width: `${((stepIdx + 1) / steps.length) * 100}%` }} />
+                </div>
+              </div>
+            )}
+          </section>
+
+          <hr className="border-slate-800" />
+
+          <section>
+            <h2 className="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-2">Legend</h2>
+            {[
+              { color: "#16a34a", label: "Safe / Visit" },
+              { color: "#dc2626", label: "Conflict / Prune" },
+              { color: "#ea580c", label: "Backtrack" },
+              { color: "#2563eb", label: "Final Solution" },
+              { color: "#7c3aed", label: "Explore" },
+            ].map(({ color, label }) => (
+              <div key={label} className="flex items-center gap-2 mb-1.5">
+                <span className="w-3 h-3 rounded inline-block" style={{ backgroundColor: color }} />
+                <span className="text-xs text-slate-400">{label}</span>
+              </div>
+            ))}
+          </section>
+        </div>
+
+        <div className="flex-1 p-6 overflow-auto">
+          <div className="flex gap-3 mb-6 flex-wrap">
+            {[
+              { label: "Time", val: COMPLEXITY[problem].time },
+              { label: "Space", val: COMPLEXITY[problem].space },
+              { label: "Total Steps", val: steps.length },
+              { label: "Backtracks", val: totalBacktracks },
+            ].map(({ label, val }) => (
+              <div key={label} className="bg-slate-900 border border-slate-800 rounded-lg px-4 py-3 text-center min-w-[80px]">
+                <p className="text-xs text-slate-500">{label}</p>
+                <p className="text-sm font-mono font-bold text-indigo-400 mt-0.5">{val}</p>
+              </div>
+            ))}
+          </div>
+
+          <div className="bg-slate-900 border border-slate-800 rounded-xl p-5 mb-6">
+            <h2 className="text-sm font-semibold text-white mb-1">{problem}</h2>
+            <p className="text-xs text-slate-500 mb-2">
+              {problem === "N-Queens" && "Place N queens so no two attack each other"}
+              {problem === "Rat in a Maze" && "Find path from top-left to bottom-right"}
+              {problem === "Subset Sum" && "Find subset that adds up to target"}
+              {problem === "Sudoku" && "Fill 9×9 grid with digits 1–9 (no repeats in row/col/box)"}
+            </p>
+            {problem === "N-Queens" && <NQueensViz steps={steps} stepIdx={stepIdx} />}
+            {problem === "Rat in a Maze" && <RatMazeViz steps={steps} stepIdx={stepIdx} maze={maze} />}
+            {problem === "Subset Sum" && <SubsetSumViz steps={steps} stepIdx={stepIdx} arr={subsetArrParsed} />}
+            {problem === "Sudoku" && <SudokuViz steps={steps} stepIdx={stepIdx} initial={DEFAULT_SUDOKU} />}
+          </div>
+
+          <div className="bg-slate-900 border border-slate-800 rounded-xl p-5">
+            <h2 className="text-sm font-semibold text-white mb-3">How Backtracking Works</h2>
+            <div className="text-xs text-slate-400 leading-relaxed space-y-2">
+              <p>1. <span className="text-emerald-400 font-semibold">Choose</span> — Pick a candidate for the current position</p>
+              <p>2. <span className="text-green-400 font-semibold">Constraint Check</span> — Is this choice valid?</p>
+              <p>3. <span className="text-indigo-400 font-semibold">Explore</span> — If valid, recurse deeper</p>
+              <p>4. <span className="text-orange-400 font-semibold">Backtrack</span> — If stuck, undo and try next option</p>
+              <p>5. <span className="text-blue-400 font-semibold">Solution</span> — All positions filled validly</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/bit-manipulation/quiz/page.jsx b/src/app/visualizer/bit-manipulation/quiz/page.jsx
new file mode 100644
index 000000000..0cc741405
--- /dev/null
+++ b/src/app/visualizer/bit-manipulation/quiz/page.jsx
@@ -0,0 +1,10 @@
+import Quiz from "./quiz";
+
+export const metadata = {
+  title: "Bit Manipulation Quiz | AlgoBuddy",
+  description: "Test your understanding of binary representations, bitwise operators, bitwise tricks, and advanced bitmasking concepts.",
+};
+
+export default function Page() {
+  return <Quiz />;
+}
diff --git a/src/app/visualizer/bit-manipulation/quiz/quiz.jsx b/src/app/visualizer/bit-manipulation/quiz/quiz.jsx
new file mode 100644
index 000000000..0dee0b484
--- /dev/null
+++ b/src/app/visualizer/bit-manipulation/quiz/quiz.jsx
@@ -0,0 +1,252 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const bitManipulationQuestions = [
+  // --- Easy Questions (1 to 10) ---
+  {
+    question: "What is the binary representation of the decimal number 13?",
+    options: ["1011", "1101", "1110", "1111"],
+    correctAnswer: 1,
+    answer: 1,
+    explanation: "13 can be written as 8 + 4 + 1, which corresponds to 2^3 + 2^2 + 2^0. In binary, this is represented as 1101.",
+    difficulty: "Easy"
+  },
+  {
+    question: "What is the result of the bitwise operation 5 & 6?",
+    options: ["4", "5", "6", "7"],
+    correctAnswer: 0,
+    answer: 0,
+    explanation: "In binary, 5 is 101 and 6 is 110. Performing a bitwise AND: 101 & 110 = 100, which is 4 in decimal.",
+    difficulty: "Easy"
+  },
+  {
+    question: "What is the result of the bitwise operation 9 | 5?",
+    options: ["9", "12", "13", "14"],
+    correctAnswer: 2,
+    answer: 2,
+    explanation: "In binary, 9 is 1001 and 5 is 0101. Performing a bitwise OR: 1001 | 0101 = 1101, which is 13 in decimal.",
+    difficulty: "Easy"
+  },
+  {
+    question: "What is the result of the bitwise operation 12 ^ 9?",
+    options: ["3", "5", "12", "21"],
+    correctAnswer: 1,
+    answer: 1,
+    explanation: "In binary, 12 is 1100 and 9 is 1001. Performing a bitwise XOR (yields 1 if bits are different): 1100 ^ 1001 = 0101, which is 5 in decimal.",
+    difficulty: "Easy"
+  },
+  {
+    question: "Assuming a standard 32-bit signed integer representation, what is the result of the bitwise NOT operation ~5?",
+    options: ["-5", "-6", "5", "6"],
+    correctAnswer: 1,
+    answer: 1,
+    explanation: "The bitwise NOT operator flips all bits. In two's complement, for any integer x, ~x is equal to -(x + 1). Thus, ~5 equals -(5 + 1) = -6.",
+    difficulty: "Easy"
+  },
+  {
+    question: "What is the value of 3 << 3?",
+    options: ["9", "12", "24", "27"],
+    correctAnswer: 2,
+    answer: 2,
+    explanation: "Left shifting a number by k bits is equivalent to multiplying the number by 2^k. Thus, 3 << 3 is 3 * 2^3 = 3 * 8 = 24.",
+    difficulty: "Easy"
+  },
+  {
+    question: "What is the value of 40 >> 2 in standard arithmetic right shift?",
+    options: ["10", "20", "8", "4"],
+    correctAnswer: 0,
+    answer: 0,
+    explanation: "Right shifting a number by k bits is equivalent to integer division of the number by 2^k. Thus, 40 >> 2 is floor(40 / 2^2) = floor(40 / 4) = 10.",
+    difficulty: "Easy"
+  },
+  {
+    question: "How many bits are required to represent the decimal number 31 in binary?",
+    options: ["4", "5", "6", "7"],
+    correctAnswer: 1,
+    answer: 1,
+    explanation: "31 in binary is 11111, which requires exactly 5 bits. The formula for the number of bits to represent x is floor(log2(x)) + 1. For 31, floor(4.95) + 1 = 5.",
+    difficulty: "Easy"
+  },
+  {
+    question: "Which bitwise operator has the property that A op A = 0 and A op 0 = A for any integer A?",
+    options: ["AND (&)", "OR (|)", "XOR (^)", "NOT (~)"],
+    correctAnswer: 2,
+    answer: 2,
+    explanation: "The Exclusive-OR (XOR) operator outputs 0 if the inputs are identical, meaning A ^ A = 0, and outputs the original value if one input is 0, meaning A ^ 0 = A.",
+    difficulty: "Easy"
+  },
+  {
+    question: "Which of the following equations is mathematically equivalent to the bitwise expression A & 1 for any non-negative integer A?",
+    options: ["A % 2", "A / 2", "A * 2", "A - 1"],
+    correctAnswer: 0,
+    answer: 0,
+    explanation: "The bitwise AND expression A & 1 extracts the least significant bit (LSB) of A. If the LSB is 1, A is odd (A % 2 = 1). If the LSB is 0, A is even (A % 2 = 0).",
+    difficulty: "Easy"
+  },
+
+  // --- Medium Questions (11 to 20) ---
+  {
+    question: "Which of the following expressions is used to set the i-th bit of a number N to 1?",
+    options: ["N & (1 << i)", "N | (1 << i)", "N ^ (1 << i)", "N >> i"],
+    correctAnswer: 1,
+    answer: 1,
+    explanation: "To set the i-th bit (force it to be 1), we use the bitwise OR operator with a mask that has only the i-th bit set. The mask is 1 << i, so the expression is N | (1 << i).",
+    difficulty: "Medium"
+  },
+  {
+    question: "Which of the following expressions is used to clear (set to 0) the i-th bit of a number N?",
+    options: ["N & ~(1 << i)", "N | ~(1 << i)", "N ^ ~(1 << i)", "N & (1 << i)"],
+    correctAnswer: 0,
+    answer: 0,
+    explanation: "To clear the i-th bit, we want a mask where every bit is 1 except the i-th bit which is 0, and then perform a bitwise AND. The mask is ~(1 << i), so the expression is N & ~(1 << i).",
+    difficulty: "Medium"
+  },
+  {
+    question: "Which of the following expressions is used to toggle (flip) the i-th bit of a number N?",
+    options: ["N & (1 << i)", "N | (1 << i)", "N ^ (1 << i)", "N ~ (1 << i)"],
+    correctAnswer: 2,
+    answer: 2,
+    explanation: "The XOR operator flips a bit when XORed with 1 (since 0 ^ 1 = 1 and 1 ^ 1 = 0), and leaves a bit unchanged when XORed with 0. Thus, N ^ (1 << i) toggles the i-th bit of N.",
+    difficulty: "Medium"
+  },
+  {
+    question: "How do you check if the k-th bit of a number N is set (1) or not?",
+    options: ["(N & (1 << k)) != 0", "(N | (1 << k)) != 0", "(N ^ (1 << k)) != 0", "(N >> k) & 0 == 0"],
+    correctAnswer: 0,
+    answer: 0,
+    explanation: "To check if the k-th bit is set, perform a bitwise AND with a mask where only the k-th bit is 1 (1 << k). If the result is non-zero, the k-th bit is set. Alternatively, check (N >> k) & 1 == 1.",
+    difficulty: "Medium"
+  },
+  {
+    question: "Why does (N & 1) === 0 correctly identify if a number N is even?",
+    options: [
+      "Even numbers have their least significant bit as 0 in binary.",
+      "Even numbers have all bits set to 0.",
+      "The expression calculates N divided by 2.",
+      "It only works for positive numbers."
+    ],
+    correctAnswer: 0,
+    answer: 0,
+    explanation: "In binary representation, all power of two components are even except for 2^0 = 1. Therefore, an integer is even if and only if its 0th bit (least significant bit) is 0. Performing N & 1 checks this bit.",
+    difficulty: "Medium"
+  },
+  {
+    question: "In a naive approach to counting set bits (1s) in a number N, we repeatedly check the last bit and shift N right. What is the time complexity of this approach if N can be represented in W bits?",
+    options: ["O(1)", "O(log W)", "O(W)", "O(2^W)"],
+    correctAnswer: 2,
+    answer: 2,
+    explanation: "Since the loop runs once for each bit position in the word size W, checking the last bit and shifting right takes O(W) time. For a 32-bit integer, it runs exactly 32 times.",
+    difficulty: "Medium"
+  },
+  {
+    question: "Which of the following expressions evaluates to true if and only if a positive integer N is a power of two?",
+    options: ["(N & (N - 1)) === 0", "(N | (N - 1)) === 0", "(N & (N + 1)) === 0", "(N ^ (N - 1)) === 0"],
+    correctAnswer: 0,
+    answer: 0,
+    explanation: "A power of two in binary has exactly one set bit (e.g., 4 is 100). Subtracting 1 flips all bits after the set bit, including the set bit itself (e.g., 3 is 011). Performing a bitwise AND between them yields 0: 100 & 011 = 000.",
+    difficulty: "Medium"
+  },
+  {
+    question: "If we are given an array of size 2N + 1 where every element appears exactly twice except for one element which appears once, how can we find that single element in O(N) time and O(1) auxiliary space?",
+    options: [
+      "Sort the array and return the middle element",
+      "Compute the sum of all elements and subtract the minimum",
+      "Compute the bitwise XOR of all elements in the array",
+      "Use a hashmap to count frequencies"
+    ],
+    correctAnswer: 2,
+    answer: 2,
+    explanation: "Due to the commutative and associative properties of XOR, and the fact that X ^ X = 0 and X ^ 0 = X, XORing all elements together will cause the duplicate pairs to cancel each other out, leaving only the single unique element.",
+    difficulty: "Medium"
+  },
+  {
+    question: "What is the correct sequence of operations to swap two variables a and b in-place using XOR?",
+    options: [
+      "a = a ^ b; b = a ^ b; a = a ^ b;",
+      "b = a ^ b; a = a ^ b; b = a ^ b;",
+      "a = a | b; b = a & b; a = a ^ b;",
+      "a = a ^ b; b = a ^ b; b = a ^ b;"
+    ],
+    correctAnswer: 0,
+    answer: 0,
+    explanation: "Step 1: a = a ^ b (holds XOR sum). Step 2: b = a ^ b = (initial_a ^ initial_b) ^ initial_b = initial_a (b gets a's value). Step 3: a = a ^ b = (initial_a ^ initial_b) ^ initial_a = initial_b (a gets b's value).",
+    difficulty: "Medium"
+  },
+  {
+    question: "What is a 'bitmask'?",
+    options: [
+      "A special encryption key used in bitwise networking",
+      "A binary pattern used to select, modify, or query specific bits in a larger bitset",
+      "A software library that hides binary operations from the compiler",
+      "A debugger tool that filters out bitwise exceptions"
+    ],
+    correctAnswer: 1,
+    answer: 1,
+    explanation: "A bitmask is a sequence of bits (often represented as an integer) used to isolate or change a subset of bits in another value using bitwise operations.",
+    difficulty: "Medium"
+  },
+
+  // --- Hard Questions (21 to 25) ---
+  {
+    question: "How does Brian Kernighan's algorithm count set bits in a number?",
+    options: [
+      "By shifting the number bit by bit and counting 1s in O(W) time",
+      "By clearing the lowest set bit in each step using N = N & (N - 1), running in O(S) where S is the number of set bits",
+      "By looking up precomputed bit counts in a 256-entry table in O(1) time",
+      "By recursively dividing the bitstring in half"
+    ],
+    correctAnswer: 1,
+    answer: 1,
+    explanation: "Brian Kernighan's algorithm relies on the fact that N & (N - 1) clears the lowest set bit of N. By repeating this operation until N becomes 0, we count the set bits in exactly O(S) operations, where S is the number of set bits.",
+    difficulty: "Hard"
+  },
+  {
+    question: "When generating all subsets of a set with M elements using bitmasking, what range of integer values represents all possible subset states?",
+    options: ["0 to M", "0 to 2^M - 1", "1 to M^2", "0 to M!"],
+    correctAnswer: 1,
+    answer: 1,
+    explanation: "A set of size M has 2^M subsets. Each subset can be represented by a binary mask of length M, where the i-th bit is 1 if the i-th element is included, and 0 otherwise. These masks correspond to integer values from 0 (empty set) to 2^M - 1 (full set).",
+    difficulty: "Hard"
+  },
+  {
+    question: "Given an array of numbers, which advanced data structure is most commonly used to find a pair of numbers that yields the maximum XOR value in O(N) time?",
+    options: ["Binary Search Tree", "Trie (Prefix Tree) with binary alphabet (0 and 1)", "Segment Tree", "Min-Heap"],
+    correctAnswer: 1,
+    answer: 1,
+    explanation: "To maximize XOR, we want to match each bit of our query number with its opposite bit. A binary Trie stores the numbers' binary representations, allowing us to traverse down the path that maximizes the XOR value in O(32) = O(1) time per query.",
+    difficulty: "Hard"
+  },
+  {
+    question: "An array contains elements where every number appears twice except for two unique numbers that appear once. If we XOR all elements, we get XOR_sum = A ^ B. How do we separate A and B in O(1) auxiliary space?",
+    options: [
+      "Find the position of the rightmost set bit in XOR_sum, and divide the array elements into two groups based on whether they have this bit set, then XOR each group separately.",
+      "Subtract the sum of the array elements from the sum of squares.",
+      "Perform a binary search on the array after sorting.",
+      "It is mathematically impossible to separate them without O(N) extra space."
+    ],
+    correctAnswer: 0,
+    answer: 0,
+    explanation: "Since A and B are unique, A ^ B must have at least one set bit. The rightmost set bit (found using XOR_sum & -XOR_sum) represents a bit position where A and B differ. Dividing all array elements into two groups based on this bit separates A and B, and XORing each group reveals the unique numbers.",
+    difficulty: "Hard"
+  },
+  {
+    question: "What is the effect of the operation N & -N on a non-zero integer N?",
+    options: [
+      "It clears all set bits of N.",
+      "It returns the number N unchanged.",
+      "It isolates the lowest (rightmost) set bit of N.",
+      "It negates the number N."
+    ],
+    correctAnswer: 2,
+    answer: 2,
+    explanation: "In two's complement representation, -N is equal to ~N + 1. This operation flips all bits up to the rightmost set bit of N, and keeps the rightmost set bit and trailing zeros identical. Performing N & -N clears all other bits, isolating the lowest set bit.",
+    difficulty: "Hard"
+  }
+];
+
+const Quiz = () => {
+  return <QuizEngine title="Bit Manipulation Quiz" questions={bitManipulationQuestions} />;
+};
+
+export default Quiz;
diff --git a/src/app/visualizer/call-stack/components/CallStackVisualizer.jsx b/src/app/visualizer/call-stack/components/CallStackVisualizer.jsx
new file mode 100644
index 000000000..a30a66b1f
--- /dev/null
+++ b/src/app/visualizer/call-stack/components/CallStackVisualizer.jsx
@@ -0,0 +1,131 @@
+"use client";
+import { useState, useEffect, useRef } from "react";
+import StackFrame from "./StackFrame";
+import ControlPanel from "./ControlPanel";
+import { generateSteps } from "../utils/factorialGenerator";
+
+export default function CallStackVisualizer() {
+  const [input, setInput] = useState(4);
+  const [steps, setSteps] = useState([]);
+  const [currentStep, setCurrentStep] = useState(-1);
+  const [stack, setStack] = useState([]);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const intervalRef = useRef(null);
+
+  const handleStart = () => {
+    const generatedSteps = generateSteps(input);
+    setSteps(generatedSteps);
+    setCurrentStep(0);
+    setStack([]);
+    setIsPlaying(false);
+  };
+
+  useEffect(() => {
+    if (currentStep < 0 || currentStep >= steps.length) return;
+    const step = steps[currentStep];
+
+    if (step.type === "call") {
+      setStack((prev) => [...prev, step]);
+    } else if (step.type === "return") {
+      setStack((prev) => {
+        const updated = [...prev];
+        if (updated.length > 0) {
+          updated[updated.length - 1] = {
+            ...updated[updated.length - 1],
+            returnValue: step.returnValue,
+          };
+        }
+        return updated;
+      });
+      setTimeout(() => {
+        setStack((prev) => prev.slice(0, -1));
+      }, 500);
+    }
+  }, [currentStep]);
+
+  useEffect(() => {
+    if (isPlaying) {
+      intervalRef.current = setInterval(() => {
+        setCurrentStep((prev) => {
+          if (prev >= steps.length - 1) {
+            setIsPlaying(false);
+            return prev;
+          }
+          return prev + 1;
+        });
+      }, 800);
+    }
+    return () => clearInterval(intervalRef.current);
+  }, [isPlaying, steps.length]);
+
+  const handleNext = () => {
+    if (currentStep < steps.length - 1) setCurrentStep((p) => p + 1);
+  };
+
+  const handlePrev = () => {
+    if (currentStep > 0) {
+      setStack([]);
+      setCurrentStep((p) => p - 1);
+    }
+  };
+
+  const handleReset = () => {
+    setCurrentStep(-1);
+    setStack([]);
+    setIsPlaying(false);
+  };
+
+  return (
+    <div className="flex flex-col items-center gap-6 p-6">
+      <div className="flex items-center gap-3">
+        <label className="text-gray-300 font-mono">factorial(</label>
+        <input
+          type="number"
+          min={1}
+          max={8}
+          value={input}
+          onChange={(e) => setInput(Number(e.target.value))}
+          className="w-16 text-center bg-gray-800 text-white border border-gray-600 rounded px-2 py-1"
+        />
+        <label className="text-gray-300 font-mono">)</label>
+        <button
+          onClick={handleStart}
+          className="ml-2 px-4 py-1 bg-blue-600 hover:bg-blue-500 text-white rounded"
+        >
+          Start
+        </button>
+      </div>
+
+      {steps.length > 0 && (
+        <div className="text-gray-400 text-sm">
+          Step {Math.max(currentStep + 1, 0)} / {steps.length} | Stack Depth:{" "}
+          {stack.length}
+        </div>
+      )}
+
+      <div className="flex flex-col-reverse items-center gap-2 min-h-64 border border-dashed border-gray-600 rounded-lg p-4 w-72">
+        {stack.map((frame, idx) => (
+          <StackFrame
+            key={`${frame.fn}-${idx}`}
+            frame={frame}
+            isActive={idx === stack.length - 1}
+          />
+        ))}
+        {stack.length === 0 && (
+          <p className="text-gray-600 text-sm">Stack Empty</p>
+        )}
+      </div>
+
+      <ControlPanel
+        onPrev={handlePrev}
+        onNext={handleNext}
+        onPlay={() => setIsPlaying(true)}
+        onPause={() => setIsPlaying(false)}
+        onReset={handleReset}
+        isPlaying={isPlaying}
+        canNext={currentStep < steps.length - 1}
+        canPrev={currentStep > 0}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/call-stack/components/ControlPanel.jsx b/src/app/visualizer/call-stack/components/ControlPanel.jsx
new file mode 100644
index 000000000..23465a9ac
--- /dev/null
+++ b/src/app/visualizer/call-stack/components/ControlPanel.jsx
@@ -0,0 +1,56 @@
+"use client";
+
+export default function ControlPanel({
+  onPrev,
+  onNext,
+  onPlay,
+  onPause,
+  onReset,
+  isPlaying,
+  canNext,
+  canPrev,
+}) {
+  return (
+    <div className="flex items-center gap-3 mt-4">
+      <button
+        onClick={onPrev}
+        disabled={!canPrev}
+        className="px-4 py-2 bg-gray-700 hover:bg-gray-600 disabled:opacity-40 text-white rounded-lg font-mono text-sm"
+      >
+        ⬅ Prev
+      </button>
+
+      {isPlaying ? (
+        <button
+          onClick={onPause}
+          className="px-4 py-2 bg-yellow-600 hover:bg-yellow-500 text-white rounded-lg font-mono text-sm"
+        >
+          ⏸ Pause
+        </button>
+      ) : (
+        <button
+          onClick={onPlay}
+          disabled={!canNext}
+          className="px-4 py-2 bg-green-600 hover:bg-green-500 disabled:opacity-40 text-white rounded-lg font-mono text-sm"
+        >
+          ▶ Play
+        </button>
+      )}
+
+      <button
+        onClick={onNext}
+        disabled={!canNext}
+        className="px-4 py-2 bg-gray-700 hover:bg-gray-600 disabled:opacity-40 text-white rounded-lg font-mono text-sm"
+      >
+        Next ➡
+      </button>
+
+      <button
+        onClick={onReset}
+        className="px-4 py-2 bg-red-700 hover:bg-red-600 text-white rounded-lg font-mono text-sm"
+      >
+        ↺ Reset
+      </button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/call-stack/components/StackFrame.jsx b/src/app/visualizer/call-stack/components/StackFrame.jsx
new file mode 100644
index 000000000..fe873b4d7
--- /dev/null
+++ b/src/app/visualizer/call-stack/components/StackFrame.jsx
@@ -0,0 +1,21 @@
+"use client";
+
+export default function StackFrame({ frame, isActive }) {
+  return (
+    <div
+      className={`
+        w-64 p-3 rounded-lg border-2 text-center font-mono text-sm transition-all duration-300
+        ${isActive
+          ? "border-blue-500 bg-blue-900/40 text-blue-300 scale-105"
+          : "border-gray-600 bg-gray-800/60 text-gray-300"}
+      `}
+    >
+      <div className="font-bold">{frame.fn}</div>
+      {frame.returnValue !== undefined && (
+        <div className="text-green-400 text-xs mt-1">
+          returns → {frame.returnValue}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/call-stack/page.jsx b/src/app/visualizer/call-stack/page.jsx
new file mode 100644
index 000000000..5aa0588c6
--- /dev/null
+++ b/src/app/visualizer/call-stack/page.jsx
@@ -0,0 +1,5 @@
+import CallStackVisualizer from "./components/CallStackVisualizer";
+
+export default function CallStackPage() {
+  return <CallStackVisualizer />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/call-stack/utils/factorialGenerator.js b/src/app/visualizer/call-stack/utils/factorialGenerator.js
new file mode 100644
index 000000000..c14fe4431
--- /dev/null
+++ b/src/app/visualizer/call-stack/utils/factorialGenerator.js
@@ -0,0 +1,20 @@
+export function generateSteps(n) {
+  const steps = [];
+
+  function factorial(num) {
+    steps.push({ type: "call", fn: `factorial(${num})`, arg: num });
+
+    if (num <= 1) {
+      steps.push({ type: "return", fn: `factorial(${num})`, returnValue: 1 });
+      return 1;
+    }
+
+    const subResult = factorial(num - 1);
+    const result = num * subResult;
+    steps.push({ type: "return", fn: `factorial(${num})`, returnValue: result });
+    return result;
+  }
+
+  factorial(n);
+  return steps;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/code-execution/page.jsx b/src/app/visualizer/code-execution/page.jsx
new file mode 100644
index 000000000..4f0b87e53
--- /dev/null
+++ b/src/app/visualizer/code-execution/page.jsx
@@ -0,0 +1,17 @@
+"use client";
+import CodeExecutionPanel from "@/app/components/CodeExecutionPanel";
+
+export default function CodeExecutionPage() {
+  return (
+    <div className="min-h-screen p-6 bg-white dark:bg-[#1c1d1f]">
+      <h1 className="text-3xl font-bold text-center mb-6 text-gray-800 dark:text-white">
+        Side-by-Side Code Execution Visualizer
+      </h1>
+      <p className="text-center text-gray-600 dark:text-gray-300 mb-8">
+        Learn algorithms by observing the source code and its execution
+        visualization together.
+      </p>
+      <CodeExecutionPanel />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/collaboration/page.jsx b/src/app/visualizer/collaboration/page.jsx
new file mode 100644
index 000000000..b106942a2
--- /dev/null
+++ b/src/app/visualizer/collaboration/page.jsx
@@ -0,0 +1,40 @@
+export default function CollaborationPage() {
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] p-8 text-gray-800 dark:text-white">
+      <div className="max-w-4xl mx-auto bg-gray-100 dark:bg-[#25262b] rounded-xl p-8 shadow-lg">
+        <h1 className="text-4xl font-bold mb-4">
+          Real-Time Collaborative Algorithm Sessions
+        </h1>
+
+        <p className="text-lg mb-8">
+          Learn algorithms together with your friends and classmates.
+          Create rooms, share links, discuss steps, and watch synchronized visualizations.
+        </p>
+
+        <div className="grid md:grid-cols-2 gap-4">
+          <button className="bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg">
+            Create Session
+          </button>
+
+          <button className="bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg">
+            Join Session
+          </button>
+        </div>
+
+        <div className="mt-8">
+          <h2 className="text-2xl font-semibold mb-3">
+            Planned Features
+          </h2>
+
+          <ul className="list-disc ml-6 space-y-2">
+            <li>Live synchronized algorithm playback</li>
+            <li>Host controls for play, pause, and navigation</li>
+            <li>Real-time chat and comments</li>
+            <li>Shareable room links</li>
+            <li>Collaborative learning history</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/complexity-analyzer/AlgorithmClient.jsx b/src/app/visualizer/complexity-analyzer/AlgorithmClient.jsx
new file mode 100644
index 000000000..a1f0a98c6
--- /dev/null
+++ b/src/app/visualizer/complexity-analyzer/AlgorithmClient.jsx
@@ -0,0 +1,18 @@
+import ComplexityAnalyzerClient from "./ComplexityAnalyzerClient";
+import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
+import { createVisualizerPaths } from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function ComplexityAnalyzerPage() {
+  return (
+    <div className="min-h-screen bg-slate-50 text-slate-950 dark:bg-[#101216] dark:text-slate-100 flex flex-col">
+      <div className="w-full px-6 md:px-12 pt-6">
+        <div className="mb-4 mt-2">
+          <Breadcrumbs paths={createVisualizerPaths("Code Lab", "Complexity Analyzer")} />
+        </div>
+      </div>
+      <div className="flex-1 p-4">
+        <ComplexityAnalyzerClient />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/visualizer/complexity-analyzer/ComplexityAnalyzerClient.jsx b/src/app/visualizer/complexity-analyzer/ComplexityAnalyzerClient.jsx
new file mode 100644
index 000000000..5204fabec
--- /dev/null
+++ b/src/app/visualizer/complexity-analyzer/ComplexityAnalyzerClient.jsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import AlgorithmComparator from "./components/AlgorithmComparator";
+import CodeEstimator from "./components/CodeEstimator";
+import ComplexityCard from "./components/ComplexityCard";
+import ComplexityGraph from "./components/ComplexityGraph";
+import {
+  algorithmComparisons,
+  complexityInfo,
+} from "./utils/complexityData";
+import { generateComplexityData } from "./utils/complexityFunctions";
+
+export default function ComplexityAnalyzerClient() {
+  const [selectedComplexities, setSelectedComplexities] = useState(
+    complexityInfo.map((item) => item.complexity)
+  );
+
+  const graphData = useMemo(() => generateComplexityData(60), []);
+
+  const toggleComplexity = (complexity) => {
+    setSelectedComplexities((current) => {
+      if (current.includes(complexity)) {
+        return current.length === 1
+          ? current
+          : current.filter((item) => item !== complexity);
+      }
+
+      return [...current, complexity];
+    });
+  };
+
+  return (
+    <main className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 pb-10 sm:px-6 lg:px-8">
+      <section className="rounded-3xl border border-neutral-200 bg-white p-6 shadow-sm dark:border-neutral-800 dark:bg-neutral-900">
+        <p className="text-sm font-black uppercase tracking-wider text-[#a435f0]">
+          Big-O Analyzer
+        </p>
+        <h1 className="mt-2 text-3xl font-black text-neutral-950 dark:text-white sm:text-4xl">
+          Time and Space Complexity Analyzer
+        </h1>
+        <p className="mt-3 max-w-3xl text-sm font-medium leading-6 text-neutral-600 dark:text-neutral-400">
+          Explore common complexity classes, compare algorithm growth, and use
+          the code estimator to reason about custom snippets.
+        </p>
+      </section>
+
+      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+        {complexityInfo.map((item) => (
+          <button
+            key={item.complexity}
+            type="button"
+            onClick={() => toggleComplexity(item.complexity)}
+            className={`text-left transition ${
+              selectedComplexities.includes(item.complexity)
+                ? "opacity-100"
+                : "opacity-45"
+            }`}
+          >
+            <ComplexityCard {...item} />
+          </button>
+        ))}
+      </section>
+
+      <ComplexityGraph
+        data={graphData}
+        selectedComplexities={selectedComplexities}
+      />
+
+      <AlgorithmComparator algorithms={algorithmComparisons} />
+
+      <CodeEstimator />
+    </main>
+  );
+}
diff --git a/src/app/visualizer/complexity-analyzer/components/AlgorithmComparator.jsx b/src/app/visualizer/complexity-analyzer/components/AlgorithmComparator.jsx
new file mode 100644
index 000000000..4fb4fcdf6
--- /dev/null
+++ b/src/app/visualizer/complexity-analyzer/components/AlgorithmComparator.jsx
@@ -0,0 +1,90 @@
+import CopyButton from "@/app/components/ui/CopyButton";
+
+export default function AlgorithmComparator({
+  algorithms,
+}) {
+  return (
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl shadow-sm overflow-hidden">
+      
+      <div className="p-5 border-b border-neutral-200 dark:border-neutral-800">
+        <h2 className="text-2xl font-black text-neutral-900 dark:text-white">
+          Algorithm Complexity Playground
+        </h2>
+
+        <p className="text-neutral-600 dark:text-neutral-400 mt-1 font-medium">
+          Compare common algorithms and their efficiency characteristics.
+        </p>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          
+          <thead className="bg-neutral-50 dark:bg-neutral-800/50">
+            <tr>
+              <th className="text-left px-6 py-4 text-xs uppercase tracking-wider text-neutral-500 dark:text-neutral-400 font-black">
+                Algorithm
+              </th>
+
+              <th className="text-left px-6 py-4 text-xs uppercase tracking-wider text-neutral-500 dark:text-neutral-400 font-black">
+                Time Complexity
+              </th>
+
+              <th className="text-left px-6 py-4 text-xs uppercase tracking-wider text-neutral-500 dark:text-neutral-400 font-black">
+                Space Complexity
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            {algorithms.map((algorithm, index) => (
+              <tr
+                key={algorithm.name}
+                className={`border-t border-neutral-200 dark:border-neutral-800 ${
+                  index % 2 === 0
+                    ? "bg-white dark:bg-neutral-900"
+                    : "bg-neutral-50/50 dark:bg-neutral-800/20"
+                }`}
+              >
+                <td className="px-6 py-5">
+                  <span className="font-bold text-neutral-900 dark:text-white">
+                    {algorithm.name}
+                  </span>
+                </td>
+
+                <td className="px-6 py-5">
+                  <div className="flex items-center gap-2">
+                    <span className="inline-flex px-3 py-1 rounded-full bg-violet-100 dark:bg-violet-900/40 text-[#a435f0] text-sm font-black border border-violet-200 dark:border-violet-800">
+                      {algorithm.time}
+                    </span>
+                    <CopyButton
+                      text={algorithm.time}
+                      ariaLabel={`Copy time complexity for ${algorithm.name}`}
+                      title="Copy time complexity"
+                      className="shrink-0"
+                    />
+                  </div>
+                </td>
+
+                <td className="px-6 py-5">
+                  <div className="flex items-center gap-2">
+                    <span className="inline-flex px-3 py-1 rounded-full bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 text-sm font-black border border-indigo-200 dark:border-indigo-800">
+                      {algorithm.space}
+                    </span>
+                    <CopyButton
+                      text={algorithm.space}
+                      ariaLabel={`Copy space complexity for ${algorithm.name}`}
+                      title="Copy space complexity"
+                      className="shrink-0"
+                    />
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+
+        </table>
+      </div>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/complexity-analyzer/components/CodeEstimator.jsx b/src/app/visualizer/complexity-analyzer/components/CodeEstimator.jsx
new file mode 100644
index 000000000..104dce177
--- /dev/null
+++ b/src/app/visualizer/complexity-analyzer/components/CodeEstimator.jsx
@@ -0,0 +1,485 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import dynamic from "next/dynamic";
+import { useTheme } from "next-themes";
+
+const Editor = dynamic(() => import("@monaco-editor/react"), {
+  ssr: false,
+  loading: () => (
+    <div className="flex min-h-[260px] h-full items-center justify-center bg-neutral-50 dark:bg-neutral-950 text-sm font-semibold text-neutral-400">
+      Loading Editor...
+    </div>
+  ),
+});
+import { useUser } from "@/features/user/UserContext";
+import ReactMarkdown from "react-markdown";
+import { 
+  Code2, 
+  Cpu, 
+  Zap, 
+  HelpCircle, 
+  AlertCircle, 
+  ArrowRight,
+  Sparkles,
+  CheckCircle,
+  FolderSync
+} from "lucide-react";
+import { toast } from "react-hot-toast";
+import CopyButton from "@/app/components/ui/CopyButton";
+
+const SAMPLES = {
+  JavaScript: `// JavaScript: Calculate the sum of an array
+function findSum(arr) {
+  let sum = 0;
+  for (let i = 0; i < arr.length; i++) {
+    sum += arr[i];
+  }
+  return sum;
+}`,
+  Python: `# Python: Check if array has duplicates (Sub-optimal O(n^2))
+def has_duplicates(arr):
+    for i in range(len(arr)):
+        for j in range(i + 1, len(arr)):
+            if arr[i] == arr[j]:
+                return True
+    return False`,
+  "C++": `// C++: Binary Search (Optimal O(log n))
+int binarySearch(vector<int>& arr, int target) {
+    int left = 0, right = arr.size() - 1;
+    while (left <= right) {
+        int mid = left + (right - left) / 2;
+        if (arr[mid] == target) return mid;
+        if (arr[mid] < target) left = mid + 1;
+        else right = mid - 1;
+    }
+    return -1;
+}`,
+  Java: `// Java: Fibonacci recursive (Sub-optimal O(2^n))
+public class Fibonacci {
+    public static int fib(int n) {
+        if (n <= 1) return n;
+        return fib(n - 1) + fib(n - 2);
+    }
+}`
+};
+
+const MONACO_LANGUAGE_MAP = {
+  JavaScript: "javascript",
+  Python: "python",
+  "C++": "cpp",
+  Java: "java"
+};
+
+const getComplexityColor = (comp) => {
+  const c = String(comp || "").toLowerCase().replace(/\s+/g, "");
+  if (!c) return "bg-neutral-100 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-300 border-neutral-200 dark:border-neutral-700";
+  if (c.includes("1")) return "bg-green-100 text-green-800 dark:bg-green-950/40 dark:text-green-300 border-green-200 dark:border-green-800/30";
+  if (c.includes("logn")) return "bg-emerald-100 text-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-300 border-emerald-200 dark:border-emerald-800/30";
+  if (c.includes("nlogn")) return "bg-sky-100 text-sky-800 dark:bg-sky-950/40 dark:text-sky-300 border-sky-200 dark:border-sky-800/30";
+  if (c.includes("n") && !c.includes("n2") && !c.includes("n3") && !c.includes("2n")) {
+    return "bg-blue-100 text-blue-800 dark:bg-blue-950/40 dark:text-blue-300 border-blue-200 dark:border-blue-800/30";
+  }
+  if (c.includes("n2") || c.includes("n^2")) return "bg-amber-100 text-amber-800 dark:bg-amber-950/40 dark:text-amber-300 border-amber-200 dark:border-amber-800/30";
+  if (c.includes("n3") || c.includes("n^3")) return "bg-orange-100 text-orange-800 dark:bg-orange-950/40 dark:text-orange-300 border-orange-200 dark:border-orange-800/30";
+  if (c.includes("2n") || c.includes("2^n")) return "bg-rose-100 text-rose-800 dark:bg-rose-950/40 dark:text-rose-300 border-rose-200 dark:border-rose-800/30";
+  return "bg-purple-100 text-purple-800 dark:bg-purple-950/40 dark:text-purple-300 border-purple-200 dark:border-purple-800/30";
+};
+
+export default function CodeEstimator() {
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = resolvedTheme === "dark";
+  const { user } = useUser();
+
+  const [language, setLanguage] = useState("JavaScript");
+  const [code, setCode] = useState(SAMPLES.JavaScript);
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
+  
+  const [showOriginalTab, setShowOriginalTab] = useState(true);
+
+  const monacoLanguage = useMemo(
+    () => MONACO_LANGUAGE_MAP[language] || "javascript",
+    [language]
+  );
+
+  const handleLanguageChange = (nextLang) => {
+    setLanguage(nextLang);
+    setCode(SAMPLES[nextLang]);
+    setResult(null);
+    setError(null);
+  };
+
+  const handleAnalyze = async () => {
+    if (!code.trim()) {
+      toast.error("Please enter some code to analyze.");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setResult(null);
+
+    try {
+      const response = await fetch("/api/complexity-estimator", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ code, language }),
+      });
+
+      const data = await response.json().catch(() => ({}));
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to analyze code complexity.");
+      }
+
+      setResult(data);
+      toast.success("Complexity analyzed successfully! 🚀");
+    } catch (err) {
+      console.error(err);
+      setError(err.message || "An unexpected error occurred.");
+      toast.error(err.message || "Analysis failed.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-3xl p-6 shadow-sm mt-8 transition-colors duration-300">
+      
+      {/* Section Header */}
+      <div className="flex items-center gap-3 mb-6">
+        <div className="h-10 w-10 rounded-xl bg-[#a435f0]/10 flex items-center justify-center">
+          <Sparkles className="h-5 w-5 text-[#a435f0]" />
+        </div>
+        <div>
+          <h2 className="text-xl sm:text-2xl font-black text-neutral-900 dark:text-white">
+            AI Code Complexity Estimator
+          </h2>
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 font-medium">
+            Analyze any custom logic for time/space complexity classes and get AI-powered optimizations.
+          </p>
+        </div>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        
+        {/* Left Side: Code Input Panel */}
+        <div className="flex flex-col gap-4">
+          
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <label className="text-sm font-bold text-neutral-700 dark:text-neutral-300">
+              Paste or Write Code
+            </label>
+
+            {/* Language Selector */}
+            <div className="flex items-center gap-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-950 p-1">
+              {Object.keys(SAMPLES).map((lang) => (
+                <button
+                  key={lang}
+                  type="button"
+                  onClick={() => handleLanguageChange(lang)}
+                  className={`rounded-md px-3 py-1.5 text-xs font-bold transition-all ${
+                    language === lang
+                      ? "bg-[#a435f0] text-white shadow-sm"
+                      : "text-neutral-600 hover:bg-neutral-200/50 dark:text-neutral-400 dark:hover:bg-neutral-800"
+                  }`}
+                >
+                  {lang}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Monaco Editor Container */}
+          <div className="border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden shadow-sm">
+            <Editor
+              height="340px"
+              language={monacoLanguage}
+              theme={isDarkMode ? "vs-dark" : "light"}
+              value={code}
+              onChange={(value) => setCode(value || "")}
+              loading={
+                <div className="flex h-[340px] items-center justify-center bg-neutral-50 dark:bg-neutral-950 text-sm font-semibold text-neutral-400">
+                  Loading Editor...
+                </div>
+              }
+              options={{
+                minimap: { enabled: false },
+                fontSize: 14,
+                fontFamily: "'Fira Code', 'Courier New', Courier, monospace",
+                lineHeight: 20,
+                padding: { top: 12, bottom: 12 },
+                scrollBeyondLastLine: false,
+                automaticLayout: true,
+                cursorBlinking: "smooth",
+                renderLineHighlight: "all",
+              }}
+            />
+          </div>
+
+          {/* Action Trigger Button */}
+          <button
+            type="button"
+            onClick={handleAnalyze}
+            disabled={loading}
+            className={`w-full py-3.5 rounded-2xl text-sm font-bold text-white shadow-md flex items-center justify-center gap-2 transition-all active:scale-[0.98] ${
+              loading 
+                ? "bg-[#a435f0]/70 cursor-not-allowed" 
+                : "bg-[#a435f0] hover:bg-[#8b2bc7] shadow-[#a435f0]/20"
+            }`}
+          >
+            {loading ? (
+              <>
+                <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                Analyzing Snippet...
+              </>
+            ) : (
+              <>
+                <Cpu className="h-4 w-4" />
+                Estimate Complexity
+              </>
+            )}
+          </button>
+          
+        </div>
+
+        {/* Right Side: Analysis Display Panel */}
+        <div className="flex flex-col border border-neutral-200 dark:border-neutral-800 rounded-3xl p-6 bg-neutral-50/50 dark:bg-neutral-950/20 min-h-[460px] justify-center transition-colors">
+          
+          {/* State 1: Welcome / Idle state */}
+          {!loading && !result && !error && (
+            <div className="text-center p-8 max-w-sm mx-auto flex flex-col items-center gap-3">
+              <div className="h-12 w-12 rounded-full bg-neutral-100 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 flex items-center justify-center">
+                <Code2 className="h-6 w-6 text-neutral-400" />
+              </div>
+              <h3 className="font-bold text-neutral-800 dark:text-neutral-200 text-base">Ready for Estimation</h3>
+              <p className="text-xs text-neutral-500 dark:text-neutral-400 font-medium leading-relaxed">
+                Click &quot;Estimate Complexity&quot; to get detailed Big-O analysis and code optimization refactoring.
+              </p>
+            </div>
+          )}
+
+          {/* State 2: Shimmer loading state */}
+          {loading && (
+            <div className="flex flex-col gap-6 animate-pulse w-full">
+              <div className="grid grid-cols-2 gap-3">
+                {[...Array(4)].map((_, i) => (
+                  <div key={i} className="h-14 rounded-2xl bg-neutral-200 dark:bg-neutral-800" />
+                ))}
+              </div>
+              <div className="flex flex-col gap-2">
+                <div className="h-4 w-1/3 bg-neutral-200 dark:bg-neutral-800 rounded" />
+                <div className="h-3 w-full bg-neutral-200 dark:bg-neutral-800 rounded" />
+                <div className="h-3 w-5/6 bg-neutral-200 dark:bg-neutral-800 rounded" />
+                <div className="h-3 w-4/5 bg-neutral-200 dark:bg-neutral-800 rounded" />
+              </div>
+            </div>
+          )}
+
+          {/* State 3: Error state */}
+          {error && (
+            <div className="text-center p-8 max-w-sm mx-auto flex flex-col items-center gap-3">
+              <div className="h-12 w-12 rounded-full bg-rose-50 dark:bg-rose-950/20 border border-rose-200 dark:border-rose-800/30 flex items-center justify-center">
+                <AlertCircle className="h-6 w-6 text-rose-500" />
+              </div>
+              <h3 className="font-bold text-rose-600 dark:text-rose-400 text-base">Analysis Error</h3>
+              <p className="text-xs text-rose-500 dark:text-rose-400 font-medium leading-relaxed">
+                {error}
+              </p>
+            </div>
+          )}
+
+          {/* State 4: Loaded results display */}
+          {result && (
+            <div className="flex flex-col h-full gap-5 w-full">
+              
+              {/* Badges Grid */}
+              <div>
+                <h3 className="text-xs font-extrabold uppercase tracking-wider text-neutral-400 dark:text-neutral-500 mb-3 flex items-center gap-1.5">
+                  <Zap className="h-3.5 w-3.5 text-[#a435f0]" /> Complexity Classes
+                </h3>
+                
+                <div className="grid grid-cols-2 gap-3">
+                  <div className={`p-3 rounded-2xl border flex flex-col gap-2 transition-all shadow-sm ${getComplexityColor(result.timeWorst)}`}>
+                    <div className="flex items-start justify-between gap-2">
+                      <span className="text-[10px] font-extrabold uppercase tracking-wider opacity-60">Worst Case (O)</span>
+                      <CopyButton
+                        text={result.timeWorst}
+                        ariaLabel="Copy worst case time complexity"
+                        title="Copy time complexity"
+                        className="bg-white/70 dark:bg-neutral-950/70"
+                      />
+                    </div>
+                    <span className="text-lg font-black">{result.timeWorst}</span>
+                  </div>
+                  <div className={`p-3 rounded-2xl border flex flex-col gap-2 transition-all shadow-sm ${getComplexityColor(result.timeAverage)}`}>
+                    <div className="flex items-start justify-between gap-2">
+                      <span className="text-[10px] font-extrabold uppercase tracking-wider opacity-60">Average Case (Θ)</span>
+                      <CopyButton
+                        text={result.timeAverage}
+                        ariaLabel="Copy average case time complexity"
+                        title="Copy time complexity"
+                        className="bg-white/70 dark:bg-neutral-950/70"
+                      />
+                    </div>
+                    <span className="text-lg font-black">{result.timeAverage}</span>
+                  </div>
+                  <div className={`p-3 rounded-2xl border flex flex-col gap-2 transition-all shadow-sm ${getComplexityColor(result.timeBest)}`}>
+                    <div className="flex items-start justify-between gap-2">
+                      <span className="text-[10px] font-extrabold uppercase tracking-wider opacity-60">Best Case (Ω)</span>
+                      <CopyButton
+                        text={result.timeBest}
+                        ariaLabel="Copy best case time complexity"
+                        title="Copy time complexity"
+                        className="bg-white/70 dark:bg-neutral-950/70"
+                      />
+                    </div>
+                    <span className="text-lg font-black">{result.timeBest}</span>
+                  </div>
+                  <div className={`p-3 rounded-2xl border flex flex-col gap-2 transition-all shadow-sm ${getComplexityColor(result.space)}`}>
+                    <div className="flex items-start justify-between gap-2">
+                      <span className="text-[10px] font-extrabold uppercase tracking-wider opacity-60">Space Complexity</span>
+                      <CopyButton
+                        text={result.space}
+                        ariaLabel="Copy space complexity"
+                        title="Copy space complexity"
+                        className="bg-white/70 dark:bg-neutral-950/70"
+                      />
+                    </div>
+                    <span className="text-lg font-black">{result.space}</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Step-by-Step Explanation */}
+              <div className="flex flex-col min-h-0">
+                <h3 className="text-xs font-extrabold uppercase tracking-wider text-neutral-400 dark:text-neutral-500 mb-2.5 flex items-center gap-1.5">
+                  <HelpCircle className="h-3.5 w-3.5 text-[#a435f0]" /> Step-by-step breakdown
+                </h3>
+                
+                <div className="max-h-60 overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-neutral-200 dark:scrollbar-thumb-neutral-800 text-xs text-neutral-700 dark:text-neutral-300 font-medium leading-relaxed font-poppins border border-neutral-200/50 dark:border-neutral-800/50 bg-white dark:bg-neutral-900 p-4 rounded-2xl shadow-inner prose prose-sm dark:prose-invert">
+                  <ReactMarkdown>{result.explanation}</ReactMarkdown>
+                </div>
+              </div>
+
+            </div>
+          )}
+
+        </div>
+
+      </div>
+
+      {/* Code Optimization & Comparison Section */}
+      {result && result.optimizedCode && (
+        <div className="mt-8 pt-8 border-t border-neutral-200 dark:border-neutral-800/80 transition-colors">
+          
+          <div className="flex flex-col gap-1 mb-5">
+            <h3 className="text-lg font-black text-neutral-900 dark:text-white flex items-center gap-2">
+              <Sparkles className="h-5 w-5 text-amber-500 animate-pulse" />
+              AI Optimization Recommendation
+            </h3>
+            <p className="text-xs text-neutral-500 dark:text-neutral-400 font-medium max-w-xl">
+              Gemini analyzed your code and generated a more optimal alternative. Let&apos;s compare them side-by-side.
+            </p>
+          </div>
+
+          <div className="grid gap-6 lg:grid-cols-2">
+            
+            {/* Side 1: Rationale Card */}
+            <div className="flex flex-col gap-4 border border-amber-200/50 dark:border-amber-950/30 bg-amber-50/10 dark:bg-amber-950/5 p-5 rounded-3xl shadow-sm">
+              <h4 className="text-sm font-bold text-amber-800 dark:text-amber-400 flex items-center gap-1.5">
+                <CheckCircle className="h-4.5 w-4.5 text-amber-500" />
+                Why optimize?
+              </h4>
+              <p className="text-xs text-neutral-600 dark:text-neutral-300 font-medium leading-relaxed font-poppins">
+                {result.optimizationJustification}
+              </p>
+              
+              <div className="mt-2 flex flex-col gap-2 rounded-2xl border border-neutral-200/50 dark:border-neutral-800/50 bg-white dark:bg-neutral-900 p-4">
+                <span className="text-[10px] font-extrabold uppercase tracking-wider text-neutral-400 dark:text-neutral-500">Efficiency improvement</span>
+                <div className="flex items-center gap-3">
+                  <span className="px-2.5 py-1 text-xs font-black rounded-lg bg-rose-100 text-rose-800 dark:bg-rose-950/40 dark:text-rose-350 border border-rose-200 dark:border-rose-800/30 shadow-sm">{result.timeWorst}</span>
+                  <ArrowRight className="h-4 w-4 text-neutral-400" />
+                  <span className="px-2.5 py-1 text-xs font-black rounded-lg bg-green-100 text-green-800 dark:bg-green-950/40 dark:text-green-350 border border-green-200 dark:border-green-800/30 shadow-sm">O(n) or O(n log n) equivalent</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Side 2: Optimized Code Code Editor */}
+            <div className="flex flex-col border border-neutral-200 dark:border-neutral-800 rounded-3xl overflow-hidden shadow-sm">
+              
+              {/* Tab Selector Bar */}
+              <div className="flex items-center justify-between border-b border-neutral-200 dark:border-neutral-800 px-4 py-2 bg-neutral-50 dark:bg-neutral-950 transition-colors">
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => setShowOriginalTab(true)}
+                    className={`px-3 py-1.5 text-xs font-bold rounded-lg transition-all ${
+                      showOriginalTab 
+                        ? "bg-[#a435f0]/10 text-[#a435f0] border border-[#a435f0]/20" 
+                        : "text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"
+                    }`}
+                  >
+                    Your Code
+                  </button>
+                  <button
+                    onClick={() => setShowOriginalTab(false)}
+                    className={`px-3 py-1.5 text-xs font-bold rounded-lg transition-all ${
+                      !showOriginalTab 
+                        ? "bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20" 
+                        : "text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"
+                    }`}
+                  >
+                    Optimized Alternative
+                  </button>
+                </div>
+                
+                <CopyButton
+                  text={showOriginalTab ? code : result.optimizedCode}
+                  ariaLabel={showOriginalTab ? "Copy original code" : "Copy optimized code"}
+                  title="Copy code"
+                  className="p-1.5 px-2 rounded-lg"
+                />
+              </div>
+
+              {/* Editor Block */}
+              <div>
+                <Editor
+                  height="260px"
+                  language={monacoLanguage}
+                  theme={isDarkMode ? "vs-dark" : "light"}
+                  value={showOriginalTab ? code : result.optimizedCode}
+                  loading={
+                    <div className="flex h-[260px] items-center justify-center bg-neutral-50 dark:bg-neutral-950 text-sm font-semibold text-neutral-400">
+                      Loading Code...
+                    </div>
+                  }
+                  options={{
+                    minimap: { enabled: false },
+                    fontSize: 13,
+                    fontFamily: "'Fira Code', 'Courier New', Courier, monospace",
+                    lineHeight: 18,
+                    padding: { top: 12, bottom: 12 },
+                    scrollBeyondLastLine: false,
+                    automaticLayout: true,
+                    readOnly: true,
+                  }}
+                />
+              </div>
+
+            </div>
+
+          </div>
+
+        </div>
+      )}
+
+    </div>
+  );
+}
diff --git a/src/app/visualizer/complexity-analyzer/components/ComplexityCard.jsx b/src/app/visualizer/complexity-analyzer/components/ComplexityCard.jsx
new file mode 100644
index 000000000..c51c993f1
--- /dev/null
+++ b/src/app/visualizer/complexity-analyzer/components/ComplexityCard.jsx
@@ -0,0 +1,43 @@
+export default function ComplexityCard({
+  complexity,
+  title,
+  description,
+  examples,
+}) {
+  return (
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 shadow-sm hover:border-violet-300 dark:hover:border-violet-700 transition-all">
+      
+      <div className="mb-4">
+        <span className="inline-flex px-3 py-1 rounded-full bg-violet-100 dark:bg-violet-900/40 text-[#a435f0] text-xs font-black border border-violet-200 dark:border-violet-800">
+          {complexity}
+        </span>
+      </div>
+
+      <h3 className="text-lg font-black text-neutral-900 dark:text-white mb-2">
+        {title}
+      </h3>
+
+      <p className="text-sm leading-relaxed text-neutral-600 dark:text-neutral-400 font-medium mb-4">
+        {description}
+      </p>
+
+      <div>
+        <p className="text-xs font-black uppercase tracking-wider text-neutral-500 dark:text-neutral-500 mb-2">
+          Common Examples
+        </p>
+
+        <div className="flex flex-wrap gap-2">
+          {examples.map((example) => (
+            <span
+              key={example}
+              className="px-3 py-1 rounded-lg bg-neutral-100 dark:bg-neutral-800 text-xs font-semibold text-neutral-700 dark:text-neutral-300"
+            >
+              {example}
+            </span>
+          ))}
+        </div>
+      </div>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/complexity-analyzer/components/ComplexityGraph.jsx b/src/app/visualizer/complexity-analyzer/components/ComplexityGraph.jsx
new file mode 100644
index 000000000..022f68ebc
--- /dev/null
+++ b/src/app/visualizer/complexity-analyzer/components/ComplexityGraph.jsx
@@ -0,0 +1,89 @@
+"use client";
+
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+
+const COLORS = {
+  "O(1)": "#22c55e",
+  "O(log n)": "#06b6d4",
+  "O(n)": "#3b82f6",
+  "O(n log n)": "#a855f7",
+  "O(n^2)": "#f97316",
+  "O(n^3)": "#ef4444",
+  "O(2^n)": "#ec4899",
+};
+
+export default function ComplexityGraph({
+  data,
+  selectedComplexities,
+}) {
+  return (
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 shadow-sm">
+      
+      <div className="mb-5">
+        <h2 className="text-xl font-black text-neutral-900 dark:text-white">
+          Complexity Growth Curves
+        </h2>
+
+        <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1 font-medium">
+          Compare how algorithm efficiency changes as input size grows.
+        </p>
+      </div>
+
+      <div className="h-[420px]">
+        <ResponsiveContainer width="100%" height="100%">
+          <LineChart data={data}>
+            
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke="#404040"
+              opacity={0.15}
+            />
+
+            <XAxis
+              dataKey="n"
+              stroke="#737373"
+              tickLine={false}
+              axisLine={false}
+            />
+
+            <YAxis
+              stroke="#737373"
+              tickLine={false}
+              axisLine={false}
+            />
+
+            <Tooltip
+              contentStyle={{
+                backgroundColor: "#171717",
+                border: "1px solid #404040",
+                borderRadius: "16px",
+                color: "#ffffff",
+              }}
+            />
+
+            {selectedComplexities.map((complexity) => (
+              <Line
+                key={complexity}
+                type="monotone"
+                dataKey={complexity}
+                stroke={COLORS[complexity]}
+                strokeWidth={3}
+                dot={false}
+              />
+            ))}
+
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+
+    </div>
+  );
+}
diff --git a/src/app/visualizer/complexity-analyzer/utils/complexityData.js b/src/app/visualizer/complexity-analyzer/utils/complexityData.js
new file mode 100644
index 000000000..144237000
--- /dev/null
+++ b/src/app/visualizer/complexity-analyzer/utils/complexityData.js
@@ -0,0 +1,89 @@
+export const complexityInfo = [
+  {
+    complexity: "O(1)",
+    title: "Constant Time",
+    description:
+      "Performance remains constant regardless of input size.",
+    examples: ["Array Access", "HashMap Lookup"],
+  },
+
+  {
+    complexity: "O(log n)",
+    title: "Logarithmic Time",
+    description:
+      "Growth increases very slowly as input size increases.",
+    examples: ["Binary Search", "Balanced BST Search"],
+  },
+
+  {
+    complexity: "O(n)",
+    title: "Linear Time",
+    description:
+      "Operations increase proportionally with input size.",
+    examples: ["Linear Search", "Array Traversal"],
+  },
+
+  {
+    complexity: "O(n log n)",
+    title: "Linearithmic Time",
+    description:
+      "Efficient scaling used in advanced sorting algorithms.",
+    examples: ["Merge Sort", "Heap Sort", "Quick Sort"],
+  },
+
+  {
+    complexity: "O(n^2)",
+    title: "Quadratic Time",
+    description:
+      "Growth becomes expensive as datasets increase.",
+    examples: ["Bubble Sort", "Selection Sort"],
+  },
+
+  {
+    complexity: "O(n^3)",
+    title: "Cubic Time",
+    description:
+      "Very expensive for medium and large datasets.",
+    examples: ["Naive Matrix Multiplication"],
+  },
+
+  {
+    complexity: "O(2^n)",
+    title: "Exponential Time",
+    description:
+      "Becomes impractical extremely quickly as input grows.",
+    examples: ["Recursive Fibonacci", "Subset Enumeration"],
+  },
+];
+
+export const algorithmComparisons = [
+  {
+    name: "Bubble Sort",
+    time: "O(n^2)",
+    space: "O(1)",
+  },
+
+  {
+    name: "Merge Sort",
+    time: "O(n log n)",
+    space: "O(n)",
+  },
+
+  {
+    name: "Quick Sort",
+    time: "O(n log n)",
+    space: "O(log n)",
+  },
+
+  {
+    name: "Linear Search",
+    time: "O(n)",
+    space: "O(1)",
+  },
+
+  {
+    name: "Binary Search",
+    time: "O(log n)",
+    space: "O(1)",
+  },
+];
diff --git a/src/app/visualizer/complexity-analyzer/utils/complexityFunctions.js b/src/app/visualizer/complexity-analyzer/utils/complexityFunctions.js
new file mode 100644
index 000000000..6d9c0bdf2
--- /dev/null
+++ b/src/app/visualizer/complexity-analyzer/utils/complexityFunctions.js
@@ -0,0 +1,34 @@
+export const complexityFunctions = {
+  "O(1)": (n) => 1,
+
+  "O(log n)": (n) => Math.log2(n),
+
+  "O(n)": (n) => n,
+
+  "O(n log n)": (n) => n * Math.log2(n),
+
+  "O(n^2)": (n) => n * n,
+
+  "O(n^3)": (n) => n * n * n,
+
+  "O(2^n)": (n) => Math.pow(2, n / 5),
+};
+
+export const generateComplexityData = (maxN = 100) => {
+  const data = [];
+
+  for (let n = 1; n <= maxN; n += 1) {
+    data.push({
+      n,
+      "O(1)": complexityFunctions["O(1)"](n),
+      "O(log n)": complexityFunctions["O(log n)"](n),
+      "O(n)": complexityFunctions["O(n)"](n),
+      "O(n log n)": complexityFunctions["O(n log n)"](n),
+      "O(n^2)": complexityFunctions["O(n^2)"](n),
+      "O(n^3)": complexityFunctions["O(n^3)"](n),
+      "O(2^n)": complexityFunctions["O(2^n)"](n),
+    });
+  }
+
+  return data;
+};
diff --git a/src/app/visualizer/complexity-visualizer/components/ComplexityVisualizer.jsx b/src/app/visualizer/complexity-visualizer/components/ComplexityVisualizer.jsx
new file mode 100644
index 000000000..8550dc9b9
--- /dev/null
+++ b/src/app/visualizer/complexity-visualizer/components/ComplexityVisualizer.jsx
@@ -0,0 +1,57 @@
+// Operation count models - pure math, no actual sorting
+export const ALGORITHMS = {
+  "Bubble Sort": {
+    label: "Bubble Sort",
+    complexity: "O(n^2)",
+    color: "#f87171",
+    getOps: (n) => (n * (n - 1)) / 2,
+  },
+  "Selection Sort": {
+    label: "Selection Sort",
+    complexity: "O(n^2)",
+    color: "#fb923c",
+    getOps: (n) => (n * (n - 1)) / 2,
+  },
+  "Insertion Sort": {
+    label: "Insertion Sort",
+    complexity: "O(n^2)",
+    color: "#facc15",
+    getOps: (n) => (n * (n - 1)) / 4, // avg case
+  },
+  "Merge Sort": {
+    label: "Merge Sort",
+    complexity: "O(n log n)",
+    color: "#34d399",
+    getOps: (n) => n * Math.log2(n || 1),
+  },
+  "Quick Sort": {
+    label: "Quick Sort",
+    complexity: "O(n log n)",
+    color: "#22d3ee",
+    getOps: (n) => n * Math.log2(n || 1),
+  },
+  "Binary Search": {
+    label: "Binary Search",
+    complexity: "O(log n)",
+    color: "#818cf8",
+    getOps: (n) => Math.log2(n || 1),
+  },
+  "Linear Search": {
+    label: "Linear Search",
+    complexity: "O(n)",
+    color: "#e879f9",
+    getOps: (n) => n,
+  },
+};
+
+export const REFERENCE_CURVES = [
+  { label: "O(1)",       color: "#94a3b8", getOps: ()  => 1 },
+  { label: "O(log n)",   color: "#818cf8", getOps: (n) => Math.log2(n || 1) },
+  { label: "O(n)",       color: "#34d399", getOps: (n) => n },
+  { label: "O(n log n)", color: "#fbbf24", getOps: (n) => n * Math.log2(n || 1) },
+  { label: "O(n^2)",      color: "#f87171", getOps: (n) => n * n },
+];
+
+export function generatePoints(getOps, nValues) {
+  return nValues.map((n) => ({ n, ops: getOps(n) }));
+}
diff --git a/src/app/visualizer/complexity-visualizer/page.jsx b/src/app/visualizer/complexity-visualizer/page.jsx
new file mode 100644
index 000000000..26a06c7b8
--- /dev/null
+++ b/src/app/visualizer/complexity-visualizer/page.jsx
@@ -0,0 +1,145 @@
+"use client";
+import { useState, useMemo } from "react";
+import {
+  LineChart, Line, XAxis, YAxis, CartesianGrid,
+  Tooltip, Legend, ResponsiveContainer,
+} from "recharts";
+import { ALGORITHMS, REFERENCE_CURVES } from "./components/ComplexityVisualizer";
+
+const N_STEPS = 50;
+
+export default function ComplexityVisualizer() {
+  const [selectedAlgo, setSelectedAlgo] = useState("Bubble Sort");
+  const [maxN, setMaxN] = useState(500);
+  const [showReferences, setShowReferences] = useState(true);
+
+  const nValues = useMemo(() => {
+    return Array.from({ length: N_STEPS }, (_, i) =>
+      Math.round(((i + 1) / N_STEPS) * maxN)
+    );
+  }, [maxN]);
+
+  const algo = ALGORITHMS[selectedAlgo];
+
+  const chartData = useMemo(() => {
+    return nValues.map((n) => {
+      const point = { n };
+      point[selectedAlgo] = Math.round(algo.getOps(n));
+      if (showReferences) {
+        REFERENCE_CURVES.forEach((ref) => {
+          point[ref.label] = Math.round(ref.getOps(n));
+        });
+      }
+      return point;
+    });
+  }, [nValues, selectedAlgo, algo, showReferences]);
+
+  return (
+    <div className="bg-gray-900 rounded-2xl p-6 space-y-6">
+      {/* Controls */}
+      <div className="flex flex-wrap gap-4 items-center">
+        <div className="flex flex-col gap-1">
+          <label className="text-sm text-gray-400">Algorithm</label>
+          <select
+            value={selectedAlgo}
+            onChange={(e) => setSelectedAlgo(e.target.value)}
+            className="bg-gray-800 text-white rounded-lg px-3 py-2 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          >
+            {Object.keys(ALGORITHMS).map((name) => (
+              <option key={name} value={name}>{name}</option>
+            ))}
+          </select>
+        </div>
+
+        <div className="flex flex-col gap-1 flex-1 min-w-48">
+          <label className="text-sm text-gray-400">
+            Input size n = <span className="text-white font-semibold">{maxN}</span>
+          </label>
+          <input
+            type="range"
+            min={50} max={5000} step={50}
+            value={maxN}
+            onChange={(e) => setMaxN(Number(e.target.value))}
+            className="accent-indigo-500"
+          />
+        </div>
+
+        <div className="flex items-center gap-2 mt-4">
+          <input
+            type="checkbox"
+            id="refs"
+            checked={showReferences}
+            onChange={(e) => setShowReferences(e.target.checked)}
+            className="accent-indigo-500 w-4 h-4"
+          />
+          <label htmlFor="refs" className="text-sm text-gray-400">
+            Show reference curves
+          </label>
+        </div>
+      </div>
+
+      {/* Badge */}
+      <div className="flex items-center gap-3">
+        <span className="text-gray-300 font-medium">{selectedAlgo}</span>
+        <span
+          className="px-3 py-1 rounded-full text-xs font-bold"
+          style={{ backgroundColor: algo.color + "33", color: algo.color, border: `1px solid ${algo.color}` }}
+        >
+          {algo.complexity}
+        </span>
+        <span className="text-gray-400 text-sm">
+          at n={maxN}: ~{Math.round(algo.getOps(maxN)).toLocaleString()} ops
+        </span>
+      </div>
+
+      {/* Chart */}
+      <div className="h-96">
+        <ResponsiveContainer width="100%" height="100%">
+          <LineChart data={chartData} margin={{ top: 5, right: 20, bottom: 5, left: 20 }}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+            <XAxis
+              dataKey="n"
+              stroke="#9ca3af"
+              label={{ value: "Input size (n)", position: "insideBottom", offset: -2, fill: "#9ca3af" }}
+            />
+            <YAxis
+              stroke="#9ca3af"
+              tickFormatter={(v) => v >= 1000000 ? `${(v/1000000).toFixed(1)}M` : v >= 1000 ? `${(v/1000).toFixed(0)}k` : v}
+            />
+            <Tooltip
+              contentStyle={{ backgroundColor: "#1f2937", border: "1px solid #374151", borderRadius: "8px" }}
+              labelStyle={{ color: "#e5e7eb" }}
+              formatter={(val, name) => [val.toLocaleString() + " ops", name]}
+              labelFormatter={(n) => `n = ${n}`}
+            />
+            <Legend wrapperStyle={{ paddingTop: "16px" }} />
+
+            {/* Selected algorithm - thick line */}
+            <Line
+              type="monotone"
+              dataKey={selectedAlgo}
+              stroke={algo.color}
+              strokeWidth={3}
+              dot={false}
+              activeDot={{ r: 5 }}
+            />
+
+            {/* Reference curves - thin dashed */}
+            {showReferences && REFERENCE_CURVES.map((ref) => (
+              <Line
+                key={ref.label}
+                type="monotone"
+                dataKey={ref.label}
+                stroke={ref.color}
+                strokeWidth={1}
+                strokeDasharray="4 4"
+                dot={false}
+                opacity={0.5}
+              />
+            ))}
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/visualizer/components/CategoryClient.jsx b/src/app/visualizer/components/CategoryClient.jsx
new file mode 100644
index 000000000..513564659
--- /dev/null
+++ b/src/app/visualizer/components/CategoryClient.jsx
@@ -0,0 +1,261 @@
+"use client";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { FiChevronRight } from "react-icons/fi";
+import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
+
+const DS_THEME = {
+  Array: {
+    color: "#a435f0",
+    bg: "#faf5ff",
+    border: "#e9d5ff",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <rect x="3" y="3" width="4" height="18" rx="1" /><rect x="10" y="8" width="4" height="13" rx="1" /><rect x="17" y="5" width="4" height="16" rx="1" />
+      </svg>
+    ),
+  },
+  String: {
+    color: "#ec4899",
+    bg: "#fdf2f8",
+    border: "#fbcfe8",
+    icon: (c) => (
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={c}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="w-full h-full"
+      >
+        <path d="M7 8h10" />
+        <path d="M7 12h8" />
+        <path d="M7 16h6" />
+      </svg>
+    ),
+  },
+  Stack: {
+    color: "#2563eb",
+    bg: "#eff6ff",
+    border: "#bfdbfe",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <rect x="4" y="2" width="16" height="5" rx="1.5" /><rect x="4" y="9" width="16" height="5" rx="1.5" /><rect x="4" y="16" width="16" height="5" rx="1.5" />
+      </svg>
+    ),
+  },
+  Queue: {
+    color: "#059669",
+    bg: "#f0fdf4",
+    border: "#d1fae5",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <rect x="2" y="7" width="5" height="10" rx="1.5" /><rect x="9.5" y="7" width="5" height="10" rx="1.5" /><rect x="17" y="7" width="5" height="10" rx="1.5" /><path d="M22 12h-1" /><path d="M3 12H2" />
+      </svg>
+    ),
+  },
+  "Linked List": {
+    color: "#d97706",
+    bg: "#fffbeb",
+    border: "#fde68a",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <circle cx="5" cy="12" r="3" /><circle cx="19" cy="12" r="3" /><path d="M8 12h8" /><path d="M14 9l3 3-3 3" />
+      </svg>
+    ),
+  },
+  Tree: {
+    color: "#7c3aed",
+    bg: "#faf5ff",
+    border: "#e9d5ff",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <circle cx="12" cy="5" r="2.5" /><circle cx="6" cy="15" r="2.5" /><circle cx="18" cy="15" r="2.5" /><path d="M10.2 7.2L7.5 12.5" /><path d="M13.8 7.2l2.7 5.3" />
+      </svg>
+    ),
+  },
+  Graph: {
+    color: "#dc2626",
+    bg: "#fef2f2",
+    border: "#fecaca",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <circle cx="5" cy="6" r="2.5" /><circle cx="19" cy="6" r="2.5" /><circle cx="5" cy="18" r="2.5" /><circle cx="19" cy="18" r="2.5" /><path d="M7.5 6h9" /><path d="M5 8.5v7" /><path d="M19 8.5v7" /><path d="M7.5 18h9" /><path d="M7 8l10 8" />
+      </svg>
+    ),
+  },
+  HashMap: {
+    color: "#db2777",
+    bg: "#fdf2f8",
+    border: "#fbcfe8",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <path d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" />
+      </svg>
+    ),
+  },
+  Recursion: {
+    color: "#0f766e",
+    bg: "#f0fdfa",
+    border: "#ccfbf1",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67" />
+      </svg>
+    ),
+  },
+  "AI Algorithms": {
+    color: "#0891b2",
+    bg: "#ecfeff",
+    border: "#c5eaf0",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <path d="M12 2A4 4 0 0 0 8 6v1H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2V6a4 4 0 0 0-4-4z" />
+        <rect x="9" y="13" width="2" height="2" />
+        <rect x="13" y="13" width="2" height="2" />
+      </svg>
+    ),
+  },
+  "Dynamic Programming": {
+    color: "#0ea5e9",
+    bg: "#f0f9ff",
+    border: "#bae6fd",
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <rect x="3" y="3" width="18" height="18" rx="2" />
+        <path d="M3 9h18" />
+        <path d="M9 21V9" />
+      </svg>
+    ),
+  },
+};
+
+const getTheme = (t) =>
+  DS_THEME[t] || {
+    icon: (c) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full">
+        <rect x="3" y="3" width="18" height="18" rx="3" /><path d="M12 8v8" /><path d="M8 12h8" />
+      </svg>
+    ),
+    color: "#6b7280",
+    bg: "#f9fafb",
+    border: "#e5e7eb",
+  };
+
+export default function CategoryClient({ section }) {
+  const router = useRouter();
+  const theme = getTheme(section.title);
+  const count = section.subsections
+    ? section.subsections.reduce((a, s) => a + s.items.length, 0)
+    : 0;
+
+  return (
+    <div>
+      <style>{`
+        .dark [data-theme-card="Code Lab"] { background: #2d2f31 !important; border-color: #4b5563 !important; }
+        .dark [data-theme-card="Array"] { background: #1a0e2d !important; border-color: #5b21b6 !important; }
+        .dark [data-theme-card="Stack"] { background: #111d33 !important; border-color: #1e3a8a !important; }
+        .dark [data-theme-card="Queue"] { background: #122b19 !important; border-color: #166534 !important; }
+        .dark [data-theme-card="Linked List"] { background: #2b1a08 !important; border-color: #92400e !important; }
+        .dark [data-theme-card="Tree"] { background: #1a0e2d !important; border-color: #5b21b6 !important; }
+        .dark [data-theme-card="Graph"] { background: #2c1215 !important; border-color: #991b1b !important; }
+        .dark [data-theme-card="HashMap"] { background: #2e1022 !important; border-color: #9d174d !important; }
+        .dark [data-theme-card="Recursion"] { background: #0c231e !important; border-color: #115e59 !important; }
+        .dark [data-theme-card="AI Algorithms"] { background: #062d35 !important; border-color: #0891b2 !important; }
+        .dark [data-theme-card="Dynamic Programming"] { background: #082f49 !important; border-color: #0284c7 !important; }
+
+        .dark [data-theme-header="Code Lab"] { background: #3e4143 !important; border-color: #4b5563 !important; }
+        .dark [data-theme-header="Array"] { background: #23133d !important; border-color: #5b21b6 !important; }
+        .dark [data-theme-header="Stack"] { background: #182847 !important; border-color: #1e3a8a !important; }
+        .dark [data-theme-header="Queue"] { background: #173820 !important; border-color: #166534 !important; }
+        .dark [data-theme-header="Linked List"] { background: #3d240a !important; border-color: #92400e !important; }
+        .dark [data-theme-header="Tree"] { background: #23133d !important; border-color: #5b21b6 !important; }
+        .dark [data-theme-header="Graph"] { background: #3d171b !important; border-color: #991b1b !important; }
+        .dark [data-theme-header="HashMap"] { background: #3b132b !important; border-color: #9d174d !important; }
+        .dark [data-theme-header="Recursion"] { background: #0f3129 !important; border-color: #115e59 !important; }
+        .dark [data-theme-header="AI Algorithms"] { background: #0a3d47 !important; border-color: #0891b2 !important; }
+        .dark [data-theme-header="Dynamic Programming"] { background: #0c4a6e !important; border-color: #0284c7 !important; }
+      `}</style>
+
+      <motion.div
+        initial={{ opacity: 0, x: 40 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
+      >
+        {/* Header Card */}
+        <div className="mb-8 transition-colors duration-300">
+
+
+          <div className="flex items-center gap-5">
+            {theme.icon && (
+              <div
+                className="w-16 h-16 rounded-2xl flex items-center justify-center p-3 flex-shrink-0 transition-colors duration-300"
+                style={{ background: theme.bg }}
+                data-theme-header={section.title || "Code Lab"}
+              >
+                {theme.icon(theme.color)}
+              </div>
+            )}
+            <div>
+              <h1
+                className="text-[2.2rem] sm:text-[3rem] font-black leading-[1.1] tracking-tighter"
+                style={{ fontFamily: "'Inter', sans-serif", letterSpacing: "-0.03em", color: theme.color }}
+              >
+                {section.title}
+              </h1>
+
+            </div>
+          </div>
+        </div>
+
+        {/* Algorithm Subsections */}
+        <div className="space-y-8">
+          {section.subsections?.map((sub, si) => (
+            <motion.div
+              key={si}
+              initial={{ opacity: 0, y: 16 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.3, delay: si * 0.08 }}
+            >
+              <h4
+                className="text-[13px] font-bold uppercase tracking-wider mb-4 pl-1"
+                style={{ color: theme.color }}
+              >
+                {sub.title}
+              </h4>
+              <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+                {sub.items.map((item, ii) => (
+                  <Link
+                    key={ii}
+                    href={item.path}
+                    className="group/item flex items-center justify-between p-4 rounded-xl border
+                      bg-white dark:bg-[#2d2f31] dark:border-[#4b5563] hover:shadow-md transition-all duration-200"
+                    style={{ borderColor: theme.border }}
+                  >
+                    <div className="flex items-center gap-3">
+                      <div
+                        className="w-8 h-8 rounded-lg flex items-center justify-center text-[14px] font-bold"
+                        style={{ background: theme.color + "15", color: theme.color }}
+                      >
+                        {ii + 1}
+                      </div>
+                      <span className="text-[14px] font-semibold text-surface-900 dark:text-white group-hover/item:text-primary transition-colors">
+                        {item.name}
+                      </span>
+                    </div>
+                    <FiChevronRight
+                      className="w-4 h-4 group-hover/item:translate-x-1 transition-all duration-200"
+                      style={{ color: theme.color + "60" }}
+                    />
+                  </Link>
+                ))}
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </motion.div>
+    </div>
+  );
+}
diff --git a/src/app/visualizer/components/CustomInputPanel.jsx b/src/app/visualizer/components/CustomInputPanel.jsx
new file mode 100644
index 000000000..a5fcd6648
--- /dev/null
+++ b/src/app/visualizer/components/CustomInputPanel.jsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { useState } from "react";
+import { AlertCircle, RefreshCw, Check } from "lucide-react";
+
+const INPUT_PARSERS = {
+  array: {
+    label: "Enter comma-separated numbers",
+    placeholder: "e.g., 64, 34, 25, 12, 22, 11, 90",
+    parse: (text) => {
+      const nums = text.split(",").map((s) => {
+        const trimmed = s.trim();
+        if (!trimmed) throw new Error("Empty values are not allowed");
+        const val = Number(trimmed);
+        if (isNaN(val)) throw new Error(`"${trimmed}" is not a valid number`);
+        return val;
+      });
+      if (nums.length < 2) throw new Error("Please enter at least 2 numbers");
+      if (nums.length > 50) throw new Error("Maximum 50 numbers allowed");
+      return nums;
+    },
+  },
+  graph: {
+    label: "Enter edges (source,target,weight)",
+    placeholder: "e.g., 0,1,4; 1,2,3; 2,0,2",
+    parse: (text) => {
+      const edges = text.split(";").map((e) => {
+        const parts = e.trim().split(",");
+        if (parts.length < 2) throw new Error("Each edge needs at least source and target (e.g. 0,1)");
+        const source = parts[0].trim();
+        const target = parts[1].trim();
+        if (!source || !target) throw new Error("Source and target cannot be empty");
+        return {
+          source: Number(source),
+          target: Number(target),
+          weight: parts[2] ? Number(parts[2].trim()) : 1,
+        };
+      });
+      if (edges.length === 0) throw new Error("Please enter at least one edge");
+      return edges;
+    },
+  },
+  string: {
+    label: "Enter a string",
+    placeholder: "e.g., hello",
+    parse: (text) => {
+      const str = text.trim();
+      if (!str) throw new Error("String cannot be empty");
+      if (str.length > 100) throw new Error("Maximum 100 characters allowed");
+      return str;
+    },
+  },
+};
+
+export function CustomInputPanel({ inputType, onApply, currentData }) {
+  const [value, setValue] = useState("");
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+
+  const parser = INPUT_PARSERS[inputType] || INPUT_PARSERS.array;
+
+  function handleApply() {
+    try {
+      setError("");
+      setSuccess(false);
+      const parsed = parser.parse(value);
+      onApply(parsed);
+      setSuccess(true);
+      setTimeout(() => setSuccess(false), 2000);
+    } catch (err) {
+      setError(err.message);
+    }
+  }
+
+  function handleReset() {
+    setValue("");
+    setError("");
+    setSuccess(false);
+    onApply(null); // signal to restore default data
+  }
+
+  return (
+    <div className="rounded-2xl border border-gray-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-5 shadow-lg transition-all duration-300">
+      <div className="flex items-center gap-2 mb-4">
+        <div className="w-2 h-6 bg-[#a435f0] rounded-full" />
+        <h3 className="font-bold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400">
+          Custom Input
+        </h3>
+      </div>
+
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">
+            {parser.label}
+          </label>
+          <textarea
+            value={value}
+            onChange={(e) => {
+              setValue(e.target.value);
+              setError("");
+            }}
+            placeholder={parser.placeholder}
+            rows={3}
+            className="w-full p-3 bg-gray-50 dark:bg-neutral-950 border border-gray-200 dark:border-neutral-800 rounded-xl font-mono text-sm focus:outline-none focus:ring-2 focus:ring-[#a435f0] focus:border-transparent transition-all placeholder:text-gray-400 dark:placeholder:text-gray-600 text-gray-950 dark:text-white"
+            aria-label={parser.label}
+          />
+        </div>
+
+        {error && (
+          <div className="flex items-start gap-2 text-sm text-red-500 bg-red-50 dark:bg-red-950/20 p-3 rounded-xl border border-red-200 dark:border-red-900/30" role="alert">
+            <AlertCircle size={16} className="shrink-0 mt-0.5" />
+            <span>{error}</span>
+          </div>
+        )}
+
+        <div className="flex flex-wrap gap-2 pt-2">
+          <button
+            onClick={handleApply}
+            disabled={!value.trim()}
+            className="flex-1 flex items-center justify-center gap-2 h-10 px-4 bg-[#a435f0] hover:bg-[#8f2cd6] disabled:opacity-40 disabled:hover:bg-[#a435f0] text-white rounded-xl text-sm font-semibold transition-all shadow-md active:scale-98"
+          >
+            {success ? (
+              <>
+                <Check size={16} /> Applied
+              </>
+            ) : (
+              "Apply"
+            )}
+          </button>
+          <button
+            onClick={handleReset}
+            className="flex items-center justify-center gap-2 h-10 px-4 border border-gray-200 dark:border-neutral-800 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-neutral-800 rounded-xl text-sm font-semibold transition-all active:scale-98"
+          >
+            <RefreshCw size={14} /> Reset
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/visualizer/components/ResponsiveControls.jsx b/src/app/visualizer/components/ResponsiveControls.jsx
new file mode 100644
index 000000000..4a6970163
--- /dev/null
+++ b/src/app/visualizer/components/ResponsiveControls.jsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+
+/**
+ * ResponsiveControls
+ *
+ * On large screens this is a plain passthrough wrapper (invisible).
+ * On small screens (< lg) it becomes a sticky bottom panel with a
+ * "Show / Hide Controls" toggle button so the visualizer canvas is
+ * not obscured by controls.
+ *
+ * Usage:
+ *   <ResponsiveControls defaultExpanded>
+ *     <PlaybackControls ... />
+ *     <SpeedSlider ... />
+ *   </ResponsiveControls>
+ *
+ * @param {object}    props
+ * @param {ReactNode} props.children
+ * @param {boolean}   [props.defaultExpanded=true]
+ */
+export function ResponsiveControls({ children, defaultExpanded = true }) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+  return (
+    <div className="lg:static fixed bottom-0 left-0 right-0 z-40 lg:z-auto">
+      {/* Toggle button — only visible on mobile / tablet */}
+      <button
+        type="button"
+        onClick={() => setIsExpanded((prev) => !prev)}
+        aria-expanded={isExpanded}
+        aria-controls="mobile-visualizer-controls"
+        className="
+          lg:hidden w-full px-4 py-3
+          bg-white dark:bg-neutral-950
+          border-t border-gray-200 dark:border-gray-700
+          flex items-center justify-center gap-2
+          text-sm font-medium text-gray-600 dark:text-gray-300
+          focus:outline-none focus:ring-2 focus:ring-[#a435f0] focus:ring-inset
+          active:bg-gray-50 dark:active:bg-neutral-900
+          touch-manipulation
+        "
+      >
+        {isExpanded ? "Hide Controls" : "Show Controls"}
+        <ChevronDown
+          size={16}
+          aria-hidden="true"
+          className={`transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}`}
+        />
+      </button>
+
+      {/* Control panel body */}
+      <div
+        id="mobile-visualizer-controls"
+        className={`
+          ${isExpanded ? "block" : "hidden"}
+          lg:block
+          bg-white dark:bg-neutral-950
+          border-t border-gray-200 dark:border-gray-700
+          lg:border-t-0
+          p-4 lg:p-0
+          max-h-[60vh] lg:max-h-none
+          overflow-y-auto lg:overflow-y-visible
+        `}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/visualizer/components/ThemeSettingsModal.jsx b/src/app/visualizer/components/ThemeSettingsModal.jsx
new file mode 100644
index 000000000..454d76f88
--- /dev/null
+++ b/src/app/visualizer/components/ThemeSettingsModal.jsx
@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from "react";
+import { X, Palette, Check } from "lucide-react";
+
+export default function ThemeSettingsModal({ isOpen, onClose }) {
+  const [theme, setTheme] = useState("default");
+
+  useEffect(() => {
+    const storedTheme = localStorage.getItem("vis-theme");
+    if (storedTheme) {
+      setTheme(storedTheme);
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose]);
+
+  const themes = [
+    { id: "default", name: "Default (Standard)" },
+    { id: "high-contrast", name: "High Contrast" },
+    { id: "protanopia-safe", name: "Protanopia Safe (Red/Green Colorblind)" },
+  ];
+
+  const handleThemeChange = (newTheme) => {
+    setTheme(newTheme);
+    localStorage.setItem("vis-theme", newTheme);
+    document.documentElement.setAttribute("data-vis-theme", newTheme);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      onClick={(e) => e.target === e.currentTarget && onClose()}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="theme-settings-title"
+        className="relative w-full max-w-md rounded-2xl bg-white p-6 shadow-2xl dark:bg-surface-900 border border-surface-200 dark:border-surface-800"
+      >
+        <button
+          onClick={onClose}
+          aria-label="Close modal"
+          className="absolute right-4 top-4 rounded-full p-2 text-surface-500 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors focus:outline-none focus:ring-2 focus:ring-primary"
+        >
+          <X className="h-5 w-5" />
+        </button>
+
+        <div className="flex items-center gap-3 mb-6">
+          <div className="rounded-xl bg-primary/10 p-2 text-primary">
+            <Palette className="h-6 w-6" />
+          </div>
+          <h2 id="theme-settings-title" className="text-xl font-bold text-surface-900 dark:text-white">
+            Visualizer Color Themes
+          </h2>
+        </div>
+
+        <p className="text-sm text-surface-600 dark:text-surface-400 mb-6">
+          Choose a color palette that works best for you. These themes update the colors used for nodes and edges during visualization.
+        </p>
+
+        <div className="space-y-3">
+          {themes.map((t) => (
+            <button
+              key={t.id}
+              onClick={() => handleThemeChange(t.id)}
+              aria-pressed={theme === t.id}
+              className={`flex w-full items-center justify-between rounded-xl border p-4 text-left transition-all ${
+                theme === t.id
+                  ? "border-primary bg-primary/5 shadow-sm"
+                  : "border-surface-200 bg-surface-50 hover:border-primary/50 dark:border-surface-700 dark:bg-surface-950 dark:hover:border-primary/50"
+              }`}
+            >
+              <span className={`font-semibold ${theme === t.id ? "text-primary" : "text-surface-900 dark:text-white"}`}>
+                {t.name}
+              </span>
+              {theme === t.id && <Check className="h-5 w-5 text-primary" />}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/visualizer/components/VisualizerCanvas.jsx b/src/app/visualizer/components/VisualizerCanvas.jsx
new file mode 100644
index 000000000..60057bfbd
--- /dev/null
+++ b/src/app/visualizer/components/VisualizerCanvas.jsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { useRef, useEffect, useState } from "react";
+import { Download } from "lucide-react";
+import html2canvas from "html2canvas";
+import useSwipeGesture from "@/app/hooks/useSwipeGesture";
+
+/**
+ * VisualizerCanvas
+ *
+ * A responsive wrapper for algorithm visualizer canvases / SVG areas.
+ * - Listens to window resize and scales down the inner content when it
+ *   overflows the container (never scales above 1x).
+ * - Attaches swipe-left / swipe-right gestures for step navigation on
+ *   touch devices.
+ * - Adds `touch-action: manipulation` to prevent the 300 ms tap delay
+ *   and disable accidental pinch-zoom on the canvas area.
+ * - Provides an optional Export PNG button to download visualization snapshots.
+ *
+ * @param {object}    props
+ * @param {ReactNode} props.children          - the visualizer SVG / canvas
+ * @param {Function}  [props.onSwipeLeft]      - step forward (swipe left)
+ * @param {Function}  [props.onSwipeRight]     - step back   (swipe right)
+ * @param {string}    [props.className]        - extra Tailwind classes
+ * @param {*}         [props.watchKey]         - change this value to re-measure
+ * @param {boolean}   [props.showExportButton=true] - toggle Export PNG snapshot button
+ */
+export function VisualizerCanvas({
+  children,
+  onSwipeLeft,
+  onSwipeRight,
+  className = "",
+  watchKey,
+  showExportButton = true,
+}) {
+  const wrapperRef = useRef(null);
+  const [scale, setScale] = useState(1);
+  const [isExporting, setIsExporting] = useState(false);
+
+  // Re-measure when container or data changes
+  useEffect(() => {
+    function measure() {
+      const el = wrapperRef.current;
+      if (!el) return;
+      const containerWidth = el.parentElement?.clientWidth ?? el.clientWidth;
+      const contentWidth   = el.scrollWidth;
+      if (contentWidth > containerWidth) {
+        setScale(containerWidth / contentWidth);
+      } else {
+        setScale(1);
+      }
+    }
+
+    measure();
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchKey]);
+
+  // Swipe gestures for step navigation
+  useSwipeGesture(wrapperRef, {
+    onSwipeLeft,
+    onSwipeRight,
+    threshold: 50,
+    enabled: !!(onSwipeLeft || onSwipeRight),
+  });
+
+  const handleExportPNG = async () => {
+    if (!wrapperRef.current || isExporting) return;
+    try {
+      setIsExporting(true);
+      const canvas = await html2canvas(wrapperRef.current, {
+        backgroundColor: null,
+        scale: 2,
+        useCORS: true,
+        logging: false,
+      });
+      const dataUrl = canvas.toDataURL("image/png");
+      const link = document.createElement("a");
+      link.download = `algobuddy-visualization-${Date.now()}.png`;
+      link.href = dataUrl;
+      link.click();
+    } catch (err) {
+      console.error("Failed to export visualization PNG:", err);
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={`relative overflow-hidden ${className}`}
+      style={{
+        transform: `scale(${scale})`,
+        transformOrigin: "top left",
+        // Prevent the 300 ms tap delay on all touch devices
+        touchAction: "manipulation",
+      }}
+    >
+      {showExportButton && (
+        <button
+          type="button"
+          onClick={handleExportPNG}
+          disabled={isExporting}
+          aria-label="Export visualization snapshot as PNG image"
+          title="Export PNG Snapshot"
+          className="
+            absolute top-2 right-2 z-30
+            inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg
+            bg-slate-900/80 hover:bg-slate-800 text-slate-300 hover:text-white
+            border border-slate-700/80 text-xs font-semibold
+            backdrop-blur-md transition-all shadow-sm
+            focus:outline-none focus:ring-2 focus:ring-primary
+            disabled:opacity-50 disabled:cursor-not-allowed
+          "
+        >
+          <Download size={14} className={isExporting ? "animate-pulse" : ""} aria-hidden="true" />
+          <span>{isExporting ? "Exporting..." : "Export PNG"}</span>
+        </button>
+      )}
+
+      {children}
+
+      {/* Mobile swipe hint — shown only on touch devices via Tailwind */}
+      {(onSwipeLeft || onSwipeRight) && (
+        <p
+          className="
+            block sm:hidden
+            text-center text-[10px] text-surface-400 dark:text-surface-500
+            mt-1 select-none pointer-events-none
+          "
+          aria-hidden="true"
+        >
+          ← swipe to step →
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/visualizer/components/VisualizerInteractiveLayout.jsx b/src/app/visualizer/components/VisualizerInteractiveLayout.jsx
new file mode 100644
index 000000000..b82fac302
--- /dev/null
+++ b/src/app/visualizer/components/VisualizerInteractiveLayout.jsx
@@ -0,0 +1,24 @@
+"use client";
+
+export function VisualizerInteractiveLayout({
+  children,
+  className = "mx-auto flex max-w-4xl flex-col gap-6",
+}) {
+  return <div className={className}>{children}</div>;
+}
+
+export function VisualizerCard({
+  children,
+  className = "",
+  padded = true,
+}) {
+  return (
+    <div
+      className={`rounded-2xl border border-[#e5e7eb] bg-white shadow-sm dark:border-[#222] dark:bg-[#111] ${
+        padded ? "p-4 sm:p-6" : ""
+      } ${className}`.trim()}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/src/app/visualizer/components/VisualizerPageLayout.jsx b/src/app/visualizer/components/VisualizerPageLayout.jsx
new file mode 100644
index 000000000..ccf3e9d2c
--- /dev/null
+++ b/src/app/visualizer/components/VisualizerPageLayout.jsx
@@ -0,0 +1,110 @@
+import Footer from "@/app/components/footer";
+import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
+
+export function createVisualizerPaths(...segments) {
+  return [
+    { name: "Home", href: "/" },
+    { name: "Visualizer", href: "/visualizer" },
+    ...segments.map((name) => ({
+      name,
+    })),
+  ];
+}
+
+function VisualizerPageSection({ children, className }) {
+  if (!children) {
+    return null;
+  }
+
+  return <section className={className}>{children}</section>;
+}
+
+export default function VisualizerPageLayout({
+  paths,
+  title,
+  headerDescription,
+  headerActions,
+  animation,
+  content,
+  code,
+  quiz,
+  moduleCard,
+  exploreOther,
+  extraSections = [],
+  animationSectionClassName = "px-6",
+  contentSectionClassName = "px-6 md:px-12",
+  codeSectionClassName = "px-6",
+  quizSectionClassName = "px-6",
+  moduleSectionClassName = "px-6 md:px-12 my-12",
+  exploreSectionClassName = "px-6",
+}) {
+  return (
+    <>
+      <div className="bg-white pb-16 pt-6 text-[#1a1a1a] dark:bg-[#1c1d1f] dark:text-[#f5f5f5]">
+        <section className="px-6 md:px-12">
+          <div className="mb-4 mt-2">
+            <Breadcrumbs paths={paths} />
+          </div>
+
+          <div className="flex flex-col items-center">
+            <h1
+              className="mb-0 text-center text-4xl font-black text-[#1a1a1a] dark:text-white md:text-5xl"
+              style={{
+                fontFamily: "'Inter', sans-serif",
+                letterSpacing: "-0.03em",
+              }}
+            >
+              {title}
+            </h1>
+
+            {headerDescription ? (
+              <p className="mt-4 max-w-2xl text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+                {headerDescription}
+              </p>
+            ) : null}
+
+            {headerActions ? <div className="mt-4">{headerActions}</div> : null}
+          </div>
+
+          <div className="mx-auto my-10 h-px max-w-4xl bg-gradient-to-r from-transparent via-[#d1d7dc] to-transparent dark:via-[#333]" />
+        </section>
+
+        <VisualizerPageSection className={animationSectionClassName}>
+          {animation}
+        </VisualizerPageSection>
+
+        <VisualizerPageSection className={contentSectionClassName}>
+          {content}
+        </VisualizerPageSection>
+
+        <VisualizerPageSection className={codeSectionClassName}>
+          {code}
+        </VisualizerPageSection>
+
+        <VisualizerPageSection className={quizSectionClassName}>
+          {quiz}
+        </VisualizerPageSection>
+
+        {extraSections.map(({ content: extraContent, className }, index) => (
+          <VisualizerPageSection
+            key={`${title}-extra-section-${index}`}
+            className={className}
+          >
+            {extraContent}
+          </VisualizerPageSection>
+        ))}
+
+        <VisualizerPageSection className={moduleSectionClassName}>
+          {moduleCard}
+        </VisualizerPageSection>
+
+
+        <VisualizerPageSection className={exploreSectionClassName}>
+          {exploreOther}
+        </VisualizerPageSection>
+      </div>
+
+      <Footer />
+    </>
+  );
+}
diff --git a/src/app/visualizer/dp/[algorithm]/page.jsx b/src/app/visualizer/dp/[algorithm]/page.jsx
new file mode 100644
index 000000000..b4145d5d5
--- /dev/null
+++ b/src/app/visualizer/dp/[algorithm]/page.jsx
@@ -0,0 +1,98 @@
+import { dpTopics } from "../data";
+import DPVisualizer from "../components/DPVisualizer";
+import Footer from "@/app/components/footer";
+import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+
+export function generateStaticParams() {
+  return Object.keys(dpTopics).map((algorithm) => ({
+    algorithm,
+  }));
+}
+
+export default async function DPAlgorithmPage({ params }) {
+  const resolvedParams = await params;
+  const { algorithm } = resolvedParams;
+  const topic = dpTopics[algorithm];
+
+  if (!topic) {
+    return <div>Algorithm not found</div>;
+  }
+
+  const paths = [
+    { name: "Home", href: "/" },
+    { name: "Visualizer", href: "/visualizer" },
+    { name: topic.title, href: "" },
+  ];
+
+  return (
+    <>
+      <main className="bg-white pt-6 pb-16 text-surface-900 dark:bg-surface-950 dark:text-white">
+        <section className="container-app">
+          <div className="mb-8 mt-2">
+            <Breadcrumbs paths={paths} />
+          </div>
+
+          <div className="flex flex-col items-center text-center">
+            <p className="mb-3 rounded-full border border-primary/20 bg-primary/10 px-4 py-1 text-sm font-semibold uppercase tracking-wide text-primary">
+              {topic.category}
+            </p>
+            <h1 className="max-w-3xl text-4xl font-extrabold tracking-tight md:text-5xl">
+              {topic.title}
+            </h1>
+            <p className="mt-4 max-w-2xl text-lg text-surface-600 dark:text-surface-400">
+              {topic.description}
+            </p>
+            <ArticleActions />
+          </div>
+
+          <div className="mx-auto my-10 h-px max-w-4xl bg-gradient-to-r from-transparent via-surface-200 to-transparent dark:via-surface-800" />
+
+          <div className="mx-auto w-full grid gap-6 lg:grid-cols-[2fr_320px]">
+            <article className="rounded-2xl border border-surface-200 bg-white shadow-card dark:border-surface-800 dark:bg-surface-900">
+              <section className="border-b border-surface-100 p-6 dark:border-surface-800">
+                <h2 className="mb-4 text-2xl font-bold">Core idea</h2>
+                <div className="space-y-3 text-surface-700 dark:text-surface-300">
+                  {topic.summary.map((item) => (
+                    <p key={item}>{item}</p>
+                  ))}
+                </div>
+              </section>
+
+              <section className="p-6">
+                <h2 className="mb-4 text-2xl font-bold">How it works</h2>
+                <ol className="space-y-3 pl-5 text-surface-700 marker:text-primary dark:text-surface-300">
+                  {topic.steps.map((step) => (
+                    <li key={step} className="list-decimal pl-2">
+                      {step}
+                    </li>
+                  ))}
+                </ol>
+              </section>
+            </article>
+
+            <aside className="h-fit rounded-2xl border border-surface-200 bg-surface-50 p-5 dark:border-surface-800 dark:bg-surface-900">
+              <h2 className="mb-4 text-xl font-bold">Complexity</h2>
+              <div className="space-y-3">
+                {topic.complexity.map((item) => (
+                  <div
+                    key={item.label}
+                    className="flex items-center justify-between rounded-lg bg-white px-3 py-2 text-sm dark:bg-surface-950"
+                  >
+                    <span className="text-surface-500 dark:text-surface-400">{item.label}</span>
+                    <span className="font-semibold text-surface-900 dark:text-white">{item.value}</span>
+                  </div>
+                ))}
+              </div>
+            </aside>
+          </div>
+        </section>
+
+        <section className="container-app">
+          <DPVisualizer algorithm={algorithm} />
+        </section>
+      </main>
+      <Footer />
+    </>
+  );
+}
diff --git a/src/app/visualizer/dp/codeSnippets.js b/src/app/visualizer/dp/codeSnippets.js
new file mode 100644
index 000000000..077938232
--- /dev/null
+++ b/src/app/visualizer/dp/codeSnippets.js
@@ -0,0 +1,105 @@
+export const dpCodeSnippets = {
+  knapsack: {
+    JavaScript: [
+      "function knapsack(weights, values, W) {",
+      "  let dp = Array(n+1).fill().map(() => Array(W+1).fill(0));",
+      "  for (let i = 1; i <= n; i++) {",
+      "    for (let w = 0; w <= W; w++) {",
+      "      if (weights[i-1] <= w) {",
+      "        dp[i][w] = Math.max(dp[i-1][w], values[i-1] + dp[i-1][w-weights[i-1]]);",
+      "      } else {",
+      "        dp[i][w] = dp[i-1][w];",
+      "      }",
+      "    }",
+      "  }",
+      "  return dp[n][W];",
+      "}",
+    ],
+    Python: [
+      "def knapsack(weights, values, W):",
+      "    dp = [[0]*(W+1) for _ in range(n+1)]",
+      "    for i in range(1, n+1):",
+      "        for w in range(W+1):",
+      "            if weights[i-1] <= w:",
+      "                dp[i][w] = max(dp[i-1][w], values[i-1] + dp[i-1][w-weights[i-1]])",
+      "            else:",
+      "                dp[i][w] = dp[i-1][w]",
+      "    return dp[n][W]",
+    ],
+  },
+  lcs: {
+    JavaScript: [
+      "function lcs(str1, str2) {",
+      "  let dp = Array(m+1).fill().map(() => Array(n+1).fill(0));",
+      "  for (let i = 1; i <= m; i++) {",
+      "    for (let j = 1; j <= n; j++) {",
+      "      if (str1[i-1] === str2[j-1]) {",
+      "        dp[i][j] = dp[i-1][j-1] + 1;",
+      "      } else {",
+      "        dp[i][j] = Math.max(dp[i-1][j], dp[i][j-1]);",
+      "      }",
+      "    }",
+      "  }",
+      "  return dp[m][n];",
+      "}",
+    ],
+    Python: [
+      "def lcs(str1, str2):",
+      "    dp = [[0]*(n+1) for _ in range(m+1)]",
+      "    for i in range(1, m+1):",
+      "        for j in range(1, n+1):",
+      "            if str1[i-1] == str2[j-1]:",
+      "                dp[i][j] = dp[i-1][j-1] + 1",
+      "            else:",
+      "                dp[i][j] = max(dp[i-1][j], dp[i][j-1])",
+      "    return dp[m][n]",
+    ],
+  },
+  "coin-change": {
+    JavaScript: [
+      "function coinChange(coins, amount) {",
+      "  let dp = Array(amount+1).fill(Infinity);",
+      "  dp[0] = 0;",
+      "  for (let i = 1; i <= amount; i++) {",
+      "    for (let coin of coins) {",
+      "      if (coin <= i) {",
+      "        dp[i] = Math.min(dp[i], dp[i-coin] + 1);",
+      "      }",
+      "    }",
+      "  }",
+      "  return dp[amount];",
+      "}",
+    ],
+    Python: [
+      "def coin_change(coins, amount):",
+      "    dp = [float('inf')] * (amount+1)",
+      "    dp[0] = 0",
+      "    for i in range(1, amount+1):",
+      "        for coin in coins:",
+      "            if coin <= i:",
+      "                dp[i] = min(dp[i], dp[i-coin] + 1)",
+      "    return dp[amount]",
+    ],
+  },
+};
+
+export function getHighlightLine(algorithm, frame) {
+  if (!frame) return -1;
+
+  if (algorithm === "knapsack") {
+    if (frame.row === 0 || frame.col === 0) return 1;
+    return 5;
+  }
+
+  if (algorithm === "lcs") {
+    if (frame.row === 0 || frame.col === 0) return 1;
+    return 4;
+  }
+
+  if (algorithm === "coin-change") {
+    if (frame.index === 0) return 2;
+    return 5;
+  }
+
+  return -1;
+}
diff --git a/src/app/visualizer/dp/complexityData.js b/src/app/visualizer/dp/complexityData.js
new file mode 100644
index 000000000..dcb3c833a
--- /dev/null
+++ b/src/app/visualizer/dp/complexityData.js
@@ -0,0 +1,21 @@
+export const dpComplexity = {
+  knapsack: {
+    time: { best: "O(n * W)", average: "O(n * W)", worst: "O(n * W)" },
+    space: "O(n * W)",
+    explanation: "We fill an (n+1) x (W+1) table, visiting each cell exactly once - hence O(n*W) time and space.",
+  },
+  lcs: {
+    time: { best: "O(m * n)", average: "O(m * n)", worst: "O(m * n)" },
+    space: "O(m * n)",
+    explanation: "We fill an (m+1) x (n+1) table comparing characters of both strings - hence O(m*n) time and space.",
+  },
+  "coin-change": {
+    time: { best: "O(amount * coins)", average: "O(amount * coins)", worst: "O(amount * coins)" },
+    space: "O(amount)",
+    explanation: "For every amount from 1 to target, we try every coin - hence O(amount * coins) time, O(amount) space for the 1D table.",
+  },
+};
+
+export function getOperationsCount(currentStepIndex) {
+  return currentStepIndex + 1;
+}
diff --git a/src/app/visualizer/dp/components/DPVisualizer.jsx b/src/app/visualizer/dp/components/DPVisualizer.jsx
new file mode 100644
index 000000000..6953b4a6b
--- /dev/null
+++ b/src/app/visualizer/dp/components/DPVisualizer.jsx
@@ -0,0 +1,407 @@
+"use client";
+
+import React, { useState, useMemo, useCallback } from "react";
+import { Settings2, Info, Play, RotateCcw } from "lucide-react";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import { knapsackGenerator } from "@/features/algorithms/dp/knapsackLogic";
+import { lcsGenerator } from "@/features/algorithms/dp/lcsLogic";
+import { coinChangeGenerator } from "@/features/algorithms/dp/coinChangeLogic";
+import { dpTopics } from "../data";
+import { dpComplexity, getOperationsCount } from "../complexityData";
+import ComplexityPanel from "@/app/components/ComplexityPanel";
+
+export default function DPVisualizer({ algorithm = "knapsack" }) {
+  const topic = dpTopics[algorithm];
+
+  const [isEditing, setIsEditing] = useState(true);
+
+  // Inputs for Knapsack
+  const [capacity, setCapacity] = useState(topic.defaultInput.capacity || 5);
+  const [items, setItems] = useState(topic.defaultInput.items || []);
+
+  // Inputs for LCS
+  const [str1, setStr1] = useState(topic.defaultInput.str1 || "");
+  const [str2, setStr2] = useState(topic.defaultInput.str2 || "");
+
+  // Inputs for Coin Change
+  const [amount, setAmount] = useState(topic.defaultInput.amount || 11);
+  const [coins, setCoins] = useState(topic.defaultInput.coins || []);
+
+  const frames = useMemo(() => {
+    try {
+      if (algorithm === "knapsack") {
+        return Array.from(
+          knapsackGenerator(items.map((i) => i.weight), items.map((i) => i.value), capacity)
+        );
+      }
+      if (algorithm === "lcs") {
+        return Array.from(lcsGenerator(str1, str2));
+      }
+      if (algorithm === "coin-change") {
+        return Array.from(coinChangeGenerator(coins, amount));
+      }
+    } catch (e) {
+      console.error(e);
+      return [];
+    }
+    return [];
+  }, [algorithm, capacity, items, str1, str2, amount, coins]);
+
+  const onStep = useCallback((step) => {}, []);
+  const engine = useAnimationEngine({ steps: frames, onStep, initialSpeed: 1000 });
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      setTimeout(() => engine.play(), 50);
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+    setIsEditing(false);
+  };
+
+  const reset = () => {
+    engine.reset();
+    setIsEditing(true);
+  };
+
+  const stepForward = () => {
+    engine.stepForward();
+    setIsEditing(false);
+  };
+
+  const stepBackward = () => {
+    engine.stepBackward();
+    setIsEditing(false);
+  };
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: reset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame = frames[engine.currentStep] || {};
+
+  // Rendering logic for grids
+  const renderKnapsackGrid = () => {
+    if (!currentFrame.dp) return null;
+    const dp = currentFrame.dp;
+    return (
+      <div className="overflow-auto rounded-lg bg-surface-50 p-4 dark:bg-surface-950 shadow-inner">
+        <table className="w-full border-collapse text-center font-mono text-sm">
+          <thead>
+            <tr>
+              <th className="p-2 border border-surface-200 dark:border-surface-800 text-surface-500">Item \ Cap</th>
+              {Array.from({ length: capacity + 1 }).map((_, w) => (
+                <th
+                  key={w}
+                  className={`p-2 border border-surface-200 dark:border-surface-800 ${
+                    currentFrame.col === w ? "text-primary" : "text-surface-600 dark:text-surface-300"
+                  }`}
+                >
+                  {w}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {dp.map((rowArr, i) => (
+              <tr key={i}>
+                <th
+                  className={`p-2 border border-surface-200 dark:border-surface-800 ${
+                    currentFrame.row === i ? "text-primary" : "text-surface-600 dark:text-surface-300"
+                  }`}
+                >
+                  {i === 0 ? "0" : `i=${i} (w:${items[i - 1].weight}, v:${items[i - 1].value})`}
+                </th>
+                {rowArr.map((val, w) => {
+                  const isCurrent = currentFrame.row === i && currentFrame.col === w;
+                  return (
+                    <td
+                      key={w}
+                      className={`p-2 border border-surface-200 dark:border-surface-800 transition-colors duration-300
+                      ${isCurrent ? "bg-primary text-white font-bold scale-110 shadow-md" : "bg-white dark:bg-surface-900"}
+                    `}
+                    >
+                      {val}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  };
+
+  const renderLCSGrid = () => {
+    if (!currentFrame.dp) return null;
+    const dp = currentFrame.dp;
+    return (
+      <div className="overflow-auto rounded-lg bg-surface-50 p-4 dark:bg-surface-950 shadow-inner">
+        <table className="w-full border-collapse text-center font-mono text-sm">
+          <thead>
+            <tr>
+              <th className="p-2 border border-surface-200 dark:border-surface-800 text-surface-500"></th>
+              <th className="p-2 border border-surface-200 dark:border-surface-800 text-surface-500">""</th>
+              {str2.split("").map((char, j) => (
+                <th
+                  key={j}
+                  className={`p-2 border border-surface-200 dark:border-surface-800 ${
+                    currentFrame.col === j + 1 ? "text-primary" : "text-surface-600 dark:text-surface-300"
+                  }`}
+                >
+                  {char}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {dp.map((rowArr, i) => (
+              <tr key={i}>
+                <th
+                  className={`p-2 border border-surface-200 dark:border-surface-800 ${
+                    currentFrame.row === i ? "text-primary" : "text-surface-600 dark:text-surface-300"
+                  }`}
+                >
+                  {i === 0 ? '""' : str1[i - 1]}
+                </th>
+                {rowArr.map((val, j) => {
+                  const isCurrent = currentFrame.row === i && currentFrame.col === j;
+                  return (
+                    <td
+                      key={j}
+                      className={`p-2 border border-surface-200 dark:border-surface-800 transition-colors duration-300
+                      ${isCurrent ? "bg-primary text-white font-bold scale-110 shadow-md" : "bg-white dark:bg-surface-900"}
+                    `}
+                    >
+                      {val}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  };
+
+  const renderCoinChangeGrid = () => {
+    if (!currentFrame.dp) return null;
+    const dp = currentFrame.dp;
+    return (
+      <div className="overflow-auto rounded-lg bg-surface-50 p-4 dark:bg-surface-950 shadow-inner">
+        <table className="w-full border-collapse text-center font-mono text-sm">
+          <thead>
+            <tr>
+              <th className="p-2 border border-surface-200 dark:border-surface-800 text-surface-500">Amount</th>
+              {dp.map((_, i) => (
+                <th
+                  key={i}
+                  className={`p-2 border border-surface-200 dark:border-surface-800 ${
+                    currentFrame.index === i ? "text-primary" : "text-surface-600 dark:text-surface-300"
+                  }`}
+                >
+                  {i}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th className="p-2 border border-surface-200 dark:border-surface-800 text-surface-500">Min Coins</th>
+              {dp.map((val, i) => {
+                const isCurrent = currentFrame.index === i;
+                return (
+                  <td
+                    key={i}
+                    className={`p-2 border border-surface-200 dark:border-surface-800 transition-colors duration-300
+                    ${isCurrent ? "bg-primary text-white font-bold scale-110 shadow-md" : "bg-white dark:bg-surface-900"}
+                  `}
+                  >
+                    {val === Infinity || val === null ? "∞" : val}
+                  </td>
+                );
+              })}
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    );
+  };
+
+  return (
+    <div className="mt-8 space-y-6">
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center justify-between">
+          <div className="flex flex-wrap items-center gap-2">
+            <button
+              onClick={() => setIsEditing(!isEditing)}
+              className={`flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${
+                isEditing
+                  ? "bg-primary text-white"
+                  : "bg-surface-100 text-surface-600 hover:bg-surface-200 dark:bg-surface-800 dark:text-surface-300"
+              }`}
+            >
+              <Settings2 className="h-4 w-4" />
+              {isEditing ? "Editing Mode" : "Visualization Mode"}
+            </button>
+
+            {!isEditing && (
+              <div className="flex flex-wrap items-center gap-2">
+                <div className="flex items-center gap-2 rounded-lg bg-surface-100 px-3 py-1.5 text-sm font-medium text-surface-600 dark:bg-surface-800 dark:text-surface-300">
+                  <Info className="h-4 w-4 text-primary" />
+                  {currentFrame.description || "Ready to start"}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="flex gap-2">
+            <button type="button" onClick={togglePlay} className="btn-base bg-primary text-white hover:bg-primary-dark">
+              <Play className="h-4 w-4" /> {engine.isPlaying ? "Pause" : "Play"}
+            </button>
+            <button type="button" onClick={reset} className="btn-base border border-surface-300 dark:border-surface-700">
+              <RotateCcw className="h-4 w-4" /> Reset
+            </button>
+          </div>
+        </div>
+
+        {isEditing && (
+          <div className="rounded-2xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
+            <h3 className="mb-4 text-sm font-bold">Problem Inputs</h3>
+            {algorithm === "knapsack" && (
+              <div className="space-y-4">
+                <div>
+                  <label className="text-sm font-semibold">Knapsack Capacity (W)</label>
+                  <input
+                    type="number"
+                    min="1"
+                    max="20"
+                    value={capacity}
+                    onChange={(e) => setCapacity(parseInt(e.target.value) || 0)}
+                    className="block mt-1 p-2 border rounded dark:bg-surface-800 dark:border-surface-700 w-32"
+                  />
+                </div>
+                <div>
+                  <label className="text-sm font-semibold">Items (Weight, Value)</label>
+                  <textarea
+                    className="block mt-1 p-2 border rounded dark:bg-surface-800 dark:border-surface-700 w-full font-mono text-sm"
+                    rows={4}
+                    value={items.map((i) => `${i.weight},${i.value}`).join("\n")}
+                    onChange={(e) => {
+                      const lines = e.target.value.split("\n");
+                      const newItems = lines
+                        .map((l) => {
+                          const [w, v] = l.split(",").map((s) => parseInt(s.trim()));
+                          if (!isNaN(w) && !isNaN(v)) return { weight: w, value: v };
+                          return null;
+                        })
+                        .filter(Boolean);
+                      setItems(newItems);
+                    }}
+                    placeholder="Format: weight,value (one per line)"
+                  />
+                  <p className="text-xs text-surface-500 mt-1">One item per line. Format: weight,value</p>
+                </div>
+              </div>
+            )}
+
+            {algorithm === "lcs" && (
+              <div className="space-y-4">
+                <div>
+                  <label className="text-sm font-semibold">String 1</label>
+                  <input
+                    type="text"
+                    maxLength={15}
+                    value={str1}
+                    onChange={(e) => setStr1(e.target.value.toUpperCase())}
+                    className="block mt-1 p-2 border rounded dark:bg-surface-800 dark:border-surface-700 w-full uppercase"
+                  />
+                </div>
+                <div>
+                  <label className="text-sm font-semibold">String 2</label>
+                  <input
+                    type="text"
+                    maxLength={15}
+                    value={str2}
+                    onChange={(e) => setStr2(e.target.value.toUpperCase())}
+                    className="block mt-1 p-2 border rounded dark:bg-surface-800 dark:border-surface-700 w-full uppercase"
+                  />
+                </div>
+              </div>
+            )}
+
+            {algorithm === "coin-change" && (
+              <div className="space-y-4">
+                <div>
+                  <label className="text-sm font-semibold">Target Amount</label>
+                  <input
+                    type="number"
+                    min="1"
+                    max="50"
+                    value={amount}
+                    onChange={(e) => setAmount(parseInt(e.target.value) || 0)}
+                    className="block mt-1 p-2 border rounded dark:bg-surface-800 dark:border-surface-700 w-32"
+                  />
+                </div>
+                <div>
+                  <label className="text-sm font-semibold">Coins</label>
+                  <input
+                    type="text"
+                    value={coins.join(", ")}
+                    onChange={(e) => {
+                      const c = e.target.value
+                        .split(",")
+                        .map((s) => parseInt(s.trim()))
+                        .filter((n) => !isNaN(n) && n > 0);
+                      setCoins(c);
+                    }}
+                    className="block mt-1 p-2 border rounded dark:bg-surface-800 dark:border-surface-700 w-full"
+                    placeholder="e.g. 1, 2, 5"
+                  />
+                  <p className="text-xs text-surface-500 mt-1">Comma separated positive integers</p>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {!isEditing && (
+          <div className="rounded-2xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900 min-h-[400px] space-y-6">
+            {algorithm === "knapsack" && renderKnapsackGrid()}
+            {algorithm === "lcs" && renderLCSGrid()}
+            {algorithm === "coin-change" && renderCoinChangeGrid()}
+
+            <ComplexityPanel
+              complexity={dpComplexity[algorithm]}
+              operationsCount={getOperationsCount(engine.currentStep)}
+            />
+          </div>
+        )}
+
+        <PlaybackControls
+          isPlaying={engine.isPlaying}
+          onPlayPause={togglePlay}
+          speed={engine.speed / 1000}
+          onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+          onStepForward={stepForward}
+          onStepBackward={stepBackward}
+          onReset={reset}
+          progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+          disabled={frames.length === 0}
+        />
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/dp/data.js b/src/app/visualizer/dp/data.js
new file mode 100644
index 000000000..00c983442
--- /dev/null
+++ b/src/app/visualizer/dp/data.js
@@ -0,0 +1,83 @@
+export const dpTopics = {
+  knapsack: {
+    key: "knapsack",
+    title: "0/1 Knapsack Problem",
+    category: "Dynamic Programming",
+    description: "Given weights and values of n items, put these items in a knapsack of capacity W to get the maximum total value in the knapsack. You cannot break an item, either pick the complete item or don't pick it (0/1 property).",
+    summary: [
+      "Dynamic programming breaks this problem down by considering subproblems defined by a subset of items and a smaller knapsack capacity.",
+      "A 2D DP matrix is constructed where dp[i][w] represents the maximum value that can be attained with the first i items and capacity w."
+    ],
+    steps: [
+      "Initialize a DP table of size (n+1) x (W+1) with 0s.",
+      "Iterate through each item from 1 to n.",
+      "For each item, iterate through all capacities from 1 to W.",
+      "If the current item's weight is less than or equal to the capacity w, we have two choices: include it or exclude it.",
+      "Take the maximum of: the value of the item + dp[i-1][w-weight] OR dp[i-1][w] (excluding it).",
+      "If the item's weight exceeds capacity, we just exclude it: dp[i][w] = dp[i-1][w]."
+    ],
+    defaultInput: {
+      capacity: 5,
+      items: [
+        { weight: 1, value: 6 },
+        { weight: 2, value: 10 },
+        { weight: 3, value: 12 },
+      ]
+    },
+    complexity: [
+      { label: "Time", value: "O(n*W)" },
+      { label: "Space", value: "O(n*W)" },
+    ],
+  },
+  lcs: {
+    key: "lcs",
+    title: "Longest Common Subsequence",
+    category: "Dynamic Programming",
+    description: "Find the length of the longest subsequence present in both of the strings. A subsequence is a sequence that appears in the same relative order, but not necessarily contiguous.",
+    summary: [
+      "LCS compares two strings character by character and builds a 2D matrix storing the length of the longest matching subsequence at each point.",
+      "If the characters match, the length increases by 1 from the diagonal element. If they don't, we take the maximum from the adjacent cells (left or top)."
+    ],
+    steps: [
+      "Initialize a DP table of size (n+1) x (m+1) with 0s.",
+      "Iterate through the characters of the first string (i from 1 to n).",
+      "Iterate through the characters of the second string (j from 1 to m).",
+      "If str1[i-1] == str2[j-1], then dp[i][j] = dp[i-1][j-1] + 1.",
+      "Otherwise, dp[i][j] = max(dp[i-1][j], dp[i][j-1]).",
+      "The bottom-right cell contains the length of the longest common subsequence."
+    ],
+    defaultInput: {
+      str1: "AGGTAB",
+      str2: "GXTXAYB"
+    },
+    complexity: [
+      { label: "Time", value: "O(n*m)" },
+      { label: "Space", value: "O(n*m)" },
+    ],
+  },
+  "coin-change": {
+    key: "coin-change",
+    title: "Coin Change",
+    category: "Dynamic Programming",
+    description: "Given an integer array of coins representing coins of different denominations and an integer amount representing a total amount of money, return the fewest number of coins that you need to make up that amount.",
+    summary: [
+      "The coin change problem builds a 1D DP array where dp[i] represents the minimum number of coins needed to make amount i.",
+      "We iterate through all amounts from 1 to the target, checking if using each coin leads to a better minimal count."
+    ],
+    steps: [
+      "Initialize a DP array of size amount + 1 with Infinity, except dp[0] = 0.",
+      "Iterate through all sub-amounts i from 1 to amount.",
+      "For each sub-amount, iterate through all available coins.",
+      "If the coin value is less than or equal to i, check if we can improve our count: dp[i] = min(dp[i], dp[i - coin] + 1).",
+      "If dp[amount] is still Infinity, it's impossible to form the amount. Otherwise, return dp[amount]."
+    ],
+    defaultInput: {
+      amount: 11,
+      coins: [1, 2, 5]
+    },
+    complexity: [
+      { label: "Time", value: "O(amount * n)" },
+      { label: "Space", value: "O(amount)" },
+    ],
+  }
+};
diff --git a/src/app/visualizer/dp/page.jsx b/src/app/visualizer/dp/page.jsx
new file mode 100644
index 000000000..ddbd7f577
--- /dev/null
+++ b/src/app/visualizer/dp/page.jsx
@@ -0,0 +1,528 @@
+"use client";
+import { useState, useEffect, useRef, useCallback } from "react";
+
+// ─── DP Algorithms ─────────────────────────────────────────────────────────────
+
+// Fibonacci
+function fibSteps(n) {
+  const dp = new Array(n + 1).fill(0);
+  const steps = [];
+  dp[0] = 0; dp[1] = 1;
+  steps.push({ dp: [...dp], current: 0 });
+  steps.push({ dp: [...dp], current: 1 });
+  for (let i = 2; i <= n; i++) {
+    dp[i] = dp[i - 1] + dp[i - 2];
+    steps.push({ dp: [...dp], current: i, deps: [i - 1, i - 2] });
+  }
+  return steps;
+}
+
+// LIS
+function lisSteps(arr) {
+  const n = arr.length;
+  const dp = new Array(n).fill(1);
+  const steps = [];
+  steps.push({ dp: [...dp], current: 0, deps: [] });
+  for (let i = 1; i < n; i++) {
+    const deps = [];
+    for (let j = 0; j < i; j++) {
+      if (arr[j] < arr[i]) {
+        if (dp[j] + 1 > dp[i]) dp[i] = dp[j] + 1;
+        deps.push(j);
+      }
+    }
+    steps.push({ dp: [...dp], current: i, deps });
+  }
+  return steps;
+}
+
+// 0/1 Knapsack
+function knapsackSteps(weights, values, W) {
+  const n = weights.length;
+  const dp = Array.from({ length: n + 1 }, () => new Array(W + 1).fill(0));
+  const steps = [];
+  for (let i = 1; i <= n; i++) {
+    for (let w = 0; w <= W; w++) {
+      if (weights[i - 1] <= w) {
+        dp[i][w] = Math.max(dp[i - 1][w], values[i - 1] + dp[i - 1][w - weights[i - 1]]);
+      } else {
+        dp[i][w] = dp[i - 1][w];
+      }
+      steps.push({ dp: dp.map(r => [...r]), current: [i, w] });
+    }
+  }
+  return steps;
+}
+
+// LCS
+function lcsSteps(s1, s2) {
+  const m = s1.length, n = s2.length;
+  const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+  const steps = [];
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      if (s1[i - 1] === s2[j - 1]) dp[i][j] = dp[i - 1][j - 1] + 1;
+      else dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+      steps.push({ dp: dp.map(r => [...r]), current: [i, j], match: s1[i - 1] === s2[j - 1] });
+    }
+  }
+  return steps;
+}
+
+// ─── Color helpers ─────────────────────────────────────────────────────────────
+function cellColor(val, max, isCurrent, isDep) {
+  if (isCurrent) return { bg: "#6366f1", text: "#fff" };
+  if (isDep) return { bg: "#f59e0b", text: "#fff" };
+  if (val === 0) return { bg: "#1e293b", text: "#475569" };
+  const ratio = max > 0 ? val / max : 0;
+  const g = Math.round(100 + ratio * 100);
+  return { bg: `rgb(22,${g},74)`, text: "#fff" };
+}
+
+// ─── Sub-components ────────────────────────────────────────────────────────────
+
+function FibViz({ steps, stepIdx }) {
+  const s = steps[Math.min(stepIdx, steps.length - 1)];
+  if (!s) return null;
+  const max = Math.max(...s.dp.filter(Boolean));
+  return (
+    <div className="overflow-x-auto">
+      <div className="flex gap-1 mt-4 flex-wrap">
+        {s.dp.map((val, i) => {
+          const isCurrent = i === s.current;
+          const isDep = s.deps?.includes(i);
+          const { bg, text } = cellColor(val, max, isCurrent, isDep);
+          return (
+            <div key={i} className="flex flex-col items-center">
+              <div className="text-xs text-slate-500 dark:text-slate-400 mb-1">F({i})</div>
+              <div className="w-14 h-14 rounded-lg flex items-center justify-center text-sm font-mono font-bold border border-slate-200 dark:border-slate-700 transition-all duration-300"
+                style={{ backgroundColor: bg, color: text }}>
+                {val}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      <div className="mt-4 text-sm text-slate-500 dark:text-slate-400 font-mono">
+        {s.current >= 2
+          ? `F(${s.current}) = F(${s.current - 1}) + F(${s.current - 2}) = ${s.dp[s.current - 1]} + ${s.dp[s.current - 2]} = ${s.dp[s.current]}`
+          : `F(${s.current}) = ${s.dp[s.current]} (base case)`}
+      </div>
+    </div>
+  );
+}
+
+function LISViz({ steps, stepIdx, arr }) {
+  const s = steps[Math.min(stepIdx, steps.length - 1)];
+  if (!s) return null;
+  const max = Math.max(...s.dp);
+  return (
+    <div className="overflow-x-auto">
+      <div className="flex gap-2 mt-4">
+        {arr.map((val, i) => {
+          const isCurrent = i === s.current;
+          const isDep = s.deps?.includes(i);
+          const { bg, text } = cellColor(s.dp[i], max, isCurrent, isDep);
+          return (
+            <div key={i} className="flex flex-col items-center gap-1">
+              <div className="w-12 h-12 rounded-lg flex items-center justify-center text-sm font-mono font-bold border border-slate-200 dark:border-slate-700 transition-all duration-300"
+                style={{ backgroundColor: bg, color: text }}>
+                {val}
+              </div>
+              <div className="text-xs text-slate-500 dark:text-slate-400">LIS:{s.dp[i]}</div>
+            </div>
+          );
+        })}
+      </div>
+      <div className="mt-3 text-sm text-slate-500 dark:text-slate-400 font-mono">
+        dp[{s.current}] = {s.dp[s.current]} — arr[{s.current}]={arr[s.current]}
+      </div>
+    </div>
+  );
+}
+
+function KnapsackViz({ steps, stepIdx, weights, values, W }) {
+  const s = steps[Math.min(stepIdx, steps.length - 1)];
+  if (!s) return null;
+  const [ci, cw] = s.current;
+  const maxVal = Math.max(...s.dp.flat());
+  return (
+    <div className="overflow-x-auto">
+      <table className="mt-4 border-collapse text-xs font-mono">
+        <thead>
+          <tr>
+            <th className="px-2 py-1 text-slate-500 dark:text-slate-400">i\w</th>
+            {Array.from({ length: W + 1 }, (_, w) => (
+              <th key={w} className="px-2 py-1 text-slate-500 dark:text-slate-400">{w}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {s.dp.map((row, i) => (
+            <tr key={i}>
+              <td className="px-2 py-1 text-slate-500 dark:text-slate-400">
+                {i === 0 ? "—" : `i${i}(w${weights[i - 1]},v${values[i - 1]})`}
+              </td>
+              {row.map((val, w) => {
+                const isCurrent = i === ci && w === cw;
+                const { bg, text } = cellColor(val, maxVal, isCurrent, false);
+                return (
+                  <td key={w} className="px-1 py-1">
+                    <div className="w-9 h-9 rounded flex items-center justify-center font-bold transition-all duration-200"
+                      style={{ backgroundColor: bg, color: text }}>
+                      {val}
+                    </div>
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="mt-2 text-sm text-slate-500 dark:text-slate-400 font-mono">
+        dp[{ci}][{cw}] = {s.dp[ci][cw]}
+      </div>
+    </div>
+  );
+}
+
+function LCSViz({ steps, stepIdx, s1, s2 }) {
+  const s = steps[Math.min(stepIdx, steps.length - 1)];
+  if (!s) return null;
+  const [ci, cj] = s.current;
+  const maxVal = Math.max(...s.dp.flat());
+  return (
+    <div className="overflow-x-auto">
+      <table className="mt-4 border-collapse text-xs font-mono">
+        <thead>
+          <tr>
+            <th className="px-2 py-1 text-slate-500 dark:text-slate-400"></th>
+            <th className="px-2 py-1 text-slate-500 dark:text-slate-400">""</th>
+            {s2.split("").map((c, j) => (
+              <th key={j} className="px-2 py-1 text-indigo-500 dark:text-indigo-400">{c}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {s.dp.map((row, i) => (
+            <tr key={i}>
+              <td className="px-2 py-1 text-indigo-500 dark:text-indigo-400">
+                {i === 0 ? '""' : s1[i - 1]}
+              </td>
+              {row.map((val, j) => {
+                const isCurrent = i === ci && j === cj;
+                const isMatch = isCurrent && s.match;
+                const { bg, text } = cellColor(val, maxVal, isCurrent, isMatch);
+                return (
+                  <td key={j} className="px-1 py-1">
+                    <div className="w-9 h-9 rounded flex items-center justify-center font-bold transition-all duration-200"
+                      style={{ backgroundColor: bg, color: text }}>
+                      {val}
+                    </div>
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="mt-2 text-sm font-mono">
+        {s.match
+          ? <span className="text-emerald-600 dark:text-emerald-400">s1[{ci - 1}]='{s1[ci - 1]}' matches s2[{cj - 1}]='{s2[cj - 1]}' → dp[{ci}][{cj}] = {s.dp[ci][cj]}</span>
+          : <span className="text-slate-500 dark:text-slate-400">No match → dp[{ci}][{cj}] = max(dp[{ci - 1}][{cj}], dp[{ci}][{cj - 1}]) = {s.dp[ci][cj]}</span>
+        }
+      </div>
+    </div>
+  );
+}
+
+// ─── Main Component ────────────────────────────────────────────────────────────
+const PROBLEMS = ["Fibonacci", "LIS", "0/1 Knapsack", "LCS"];
+
+const COMPLEXITY = {
+  "Fibonacci":    { time: "O(N)", space: "O(N)" },
+  "LIS":          { time: "O(N²)", space: "O(N)" },
+  "0/1 Knapsack": { time: "O(N×W)", space: "O(N×W)" },
+  "LCS":          { time: "O(M×N)", space: "O(M×N)" },
+};
+
+const PSEUDOCODE = {
+  "Fibonacci": `dp[0] = 0, dp[1] = 1
+for i from 2 to n:
+  dp[i] = dp[i-1] + dp[i-2]
+return dp[n]`,
+  "LIS": `for i from 0 to n-1:
+  dp[i] = 1
+  for j from 0 to i-1:
+    if arr[j] < arr[i]:
+      dp[i] = max(dp[i], dp[j]+1)
+return max(dp)`,
+  "0/1 Knapsack": `for i from 1 to n:
+  for w from 0 to W:
+    if weight[i] <= w:
+      dp[i][w] = max(dp[i-1][w],
+        val[i] + dp[i-1][w-wt[i]])
+    else:
+      dp[i][w] = dp[i-1][w]`,
+  "LCS": `for i from 1 to m:
+  for j from 1 to n:
+    if s1[i] == s2[j]:
+      dp[i][j] = dp[i-1][j-1] + 1
+    else:
+      dp[i][j] = max(dp[i-1][j],
+                     dp[i][j-1])`,
+};
+
+export default function DPVisualizer() {
+  const [problem, setProblem] = useState("Fibonacci");
+  const [steps, setSteps] = useState([]);
+  const [stepIdx, setStepIdx] = useState(0);
+  const [playing, setPlaying] = useState(false);
+  const [speed, setSpeed] = useState(600);
+  const intervalRef = useRef(null);
+
+  const [fibN, setFibN] = useState(8);
+  const [lisArr, setLisArr] = useState("3,1,4,1,5,9,2,6");
+  const [ksWeights, setKsWeights] = useState("2,3,4,5");
+  const [ksValues, setKsValues] = useState("3,4,5,6");
+  const [ksW, setKsW] = useState(5);
+  const [lcsS1, setLcsS1] = useState("ABCBDAB");
+  const [lcsS2, setLcsS2] = useState("BDCAB");
+
+  const lisArrParsed = lisArr.split(",").map(v => parseInt(v.trim(), 10)).filter(v => !isNaN(v));
+  const ksWtParsed = ksWeights.split(",").map(v => parseInt(v.trim(), 10)).filter(v => !isNaN(v));
+  const ksValParsed = ksValues.split(",").map(v => parseInt(v.trim(), 10)).filter(v => !isNaN(v));
+
+  const buildSteps = useCallback(() => {
+    let s = [];
+    if (problem === "Fibonacci") s = fibSteps(Math.min(fibN, 15));
+    else if (problem === "LIS") s = lisSteps(lisArrParsed.slice(0, 10));
+    else if (problem === "0/1 Knapsack") s = knapsackSteps(ksWtParsed.slice(0, 6), ksValParsed.slice(0, 6), Math.min(ksW, 10));
+    else if (problem === "LCS") s = lcsSteps(lcsS1.slice(0, 8), lcsS2.slice(0, 8));
+    setSteps(s);
+    setStepIdx(0);
+    setPlaying(false);
+  }, [problem, fibN, lisArr, ksWeights, ksValues, ksW, lcsS1, lcsS2]);
+
+  useEffect(() => { buildSteps(); }, [buildSteps]);
+
+  useEffect(() => {
+    if (!playing) { clearInterval(intervalRef.current); return; }
+    intervalRef.current = setInterval(() => {
+      setStepIdx(prev => {
+        if (prev >= steps.length - 1) { setPlaying(false); return prev; }
+        return prev + 1;
+      });
+    }, speed);
+    return () => clearInterval(intervalRef.current);
+  }, [playing, steps, speed]);
+
+  return (
+    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans dark:bg-slate-950 dark:text-slate-100">
+      <div className="border-b border-slate-200 px-6 py-5 dark:border-slate-800">
+        <h1 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">
+          Dynamic Programming Visualizer
+        </h1>
+        <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
+          Step-by-step DP table animation — understand how subproblems build the final answer
+        </p>
+      </div>
+
+      <div className="flex flex-col lg:flex-row min-h-screen">
+        <div className="w-full lg:w-72 border-r border-slate-200 p-5 flex flex-col gap-5 shrink-0 dark:border-slate-800">
+
+          <section>
+            <h2 className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-3">
+              1. Choose Problem
+            </h2>
+            <div className="flex flex-col gap-2">
+              {PROBLEMS.map(p => (
+                <button key={p}
+                  onClick={() => setProblem(p)}
+                  className={`text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${problem === p ? "bg-indigo-600 text-white" : "bg-white text-slate-600 hover:text-slate-900 border border-slate-200 dark:bg-slate-900 dark:text-slate-400 dark:hover:text-white dark:border-slate-700"}`}>
+                  {p}
+                </button>
+              ))}
+            </div>
+          </section>
+
+          <hr className="border-slate-200 dark:border-slate-800" />
+
+          <section>
+            <h2 className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-3">
+              2. Set Input
+            </h2>
+
+            {problem === "Fibonacci" && (
+              <div>
+                <label className="text-xs text-slate-500 dark:text-slate-400 block mb-1">N (max 15)</label>
+                <input type="number" min={2} max={15} value={fibN}
+                  onChange={e => setFibN(parseInt(e.target.value))}
+                  className="w-full bg-white border border-slate-200 rounded-md px-3 py-2 text-sm text-slate-900 focus:outline-none focus:border-indigo-500 font-mono dark:bg-slate-900 dark:border-slate-700 dark:text-white" />
+              </div>
+            )}
+
+            {problem === "LIS" && (
+              <div>
+                <label className="text-xs text-slate-500 dark:text-slate-400 block mb-1">Array (comma separated, max 10)</label>
+                <input value={lisArr} onChange={e => setLisArr(e.target.value)}
+                  className="w-full bg-white border border-slate-200 rounded-md px-3 py-2 text-sm text-slate-900 focus:outline-none focus:border-indigo-500 font-mono dark:bg-slate-900 dark:border-slate-700 dark:text-white" />
+              </div>
+            )}
+
+            {problem === "0/1 Knapsack" && (
+              <div className="flex flex-col gap-2">
+                <div>
+                  <label className="text-xs text-slate-500 dark:text-slate-400 block mb-1">Weights (max 6 items)</label>
+                  <input value={ksWeights} onChange={e => setKsWeights(e.target.value)}
+                    className="w-full bg-white border border-slate-200 rounded-md px-3 py-2 text-sm text-slate-900 focus:outline-none focus:border-indigo-500 font-mono dark:bg-slate-900 dark:border-slate-700 dark:text-white" />
+                </div>
+                <div>
+                  <label className="text-xs text-slate-500 dark:text-slate-400 block mb-1">Values</label>
+                  <input value={ksValues} onChange={e => setKsValues(e.target.value)}
+                    className="w-full bg-white border border-slate-200 rounded-md px-3 py-2 text-sm text-slate-900 focus:outline-none focus:border-indigo-500 font-mono dark:bg-slate-900 dark:border-slate-700 dark:text-white" />
+                </div>
+                <div>
+                  <label className="text-xs text-slate-500 dark:text-slate-400 block mb-1">Capacity W (max 10)</label>
+                  <input type="number" min={1} max={10} value={ksW}
+                    onChange={e => setKsW(parseInt(e.target.value))}
+                    className="w-full bg-white border border-slate-200 rounded-md px-3 py-2 text-sm text-slate-900 focus:outline-none focus:border-indigo-500 font-mono dark:bg-slate-900 dark:border-slate-700 dark:text-white" />
+                </div>
+              </div>
+            )}
+
+            {problem === "LCS" && (
+              <div className="flex flex-col gap-2">
+                <div>
+                  <label className="text-xs text-slate-500 dark:text-slate-400 block mb-1">String 1 (max 8 chars)</label>
+                  <input value={lcsS1} onChange={e => setLcsS1(e.target.value.slice(0, 8).toUpperCase())}
+                    className="w-full bg-white border border-slate-200 rounded-md px-3 py-2 text-sm text-slate-900 focus:outline-none focus:border-indigo-500 font-mono dark:bg-slate-900 dark:border-slate-700 dark:text-white" />
+                </div>
+                <div>
+                  <label className="text-xs text-slate-500 dark:text-slate-400 block mb-1">String 2 (max 8 chars)</label>
+                  <input value={lcsS2} onChange={e => setLcsS2(e.target.value.slice(0, 8).toUpperCase())}
+                    className="w-full bg-white border border-slate-200 rounded-md px-3 py-2 text-sm text-slate-900 focus:outline-none focus:border-indigo-500 font-mono dark:bg-slate-900 dark:border-slate-700 dark:text-white" />
+                </div>
+              </div>
+            )}
+
+            <button onClick={buildSteps}
+              className="mt-3 w-full bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium py-2 rounded-md transition-colors">
+              Build DP Table
+            </button>
+          </section>
+
+          <hr className="border-slate-800" />
+
+          <section>
+            <h2 className="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-3">
+              3. Animate
+            </h2>
+            <div className="mb-3">
+              <label className="text-xs text-slate-400 block mb-1">
+                Speed: {speed === 300 ? "Fast" : speed === 600 ? "Medium" : "Slow"}
+              </label>
+              <div className="flex gap-2">
+                {[["Slow", 1000], ["Medium", 600], ["Fast", 300]].map(([label, val]) => (
+                  <button key={label}
+                    onClick={() => setSpeed(val)}
+                    className={`flex-1 text-xs py-1.5 rounded-md border transition-colors ${speed === val ? "bg-slate-600 border-slate-500 text-white" : "border-slate-700 text-slate-400 hover:text-white bg-slate-900"}`}>
+                    {label}
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div className="flex gap-2 mb-2">
+              <button onClick={() => { if (stepIdx < steps.length - 1) { setPlaying(false); setStepIdx(0); } setTimeout(() => setPlaying(true), 10); }}
+                disabled={steps.length === 0}
+                className="flex-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-40 text-white text-xs py-2 rounded-md transition-colors font-medium">
+                ▶ Play
+              </button>
+              <button onClick={() => setPlaying(false)} disabled={!playing}
+                className="flex-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-40 text-white text-xs py-2 rounded-md transition-colors font-medium">
+                ⏸ Pause
+              </button>
+            </div>
+            <div className="flex gap-2">
+              <button onClick={() => { setPlaying(false); setStepIdx(p => Math.max(0, p - 1)); }}
+                disabled={stepIdx === 0}
+                className="flex-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-40 text-white text-xs py-2 rounded-md transition-colors font-medium">
+                ◀ Prev
+              </button>
+              <button onClick={() => { setPlaying(false); setStepIdx(p => Math.min(steps.length - 1, p + 1)); }}
+                disabled={stepIdx >= steps.length - 1}
+                className="flex-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-40 text-white text-xs py-2 rounded-md transition-colors font-medium">
+                Next ▶
+              </button>
+            </div>
+            {steps.length > 0 && (
+              <div className="mt-2">
+                <div className="flex justify-between text-xs text-slate-500 mb-1">
+                  <span>Step {stepIdx + 1} / {steps.length}</span>
+                  <span>{Math.round(((stepIdx + 1) / steps.length) * 100)}%</span>
+                </div>
+                <div className="w-full bg-slate-800 rounded-full h-1.5">
+                  <div className="bg-indigo-500 h-1.5 rounded-full transition-all duration-300"
+                    style={{ width: `${((stepIdx + 1) / steps.length) * 100}%` }} />
+                </div>
+              </div>
+            )}
+          </section>
+
+          <hr className="border-slate-200 dark:border-slate-800" />
+
+          <section>
+            <h2 className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-2">Legend</h2>
+            {[
+              { color: "#6366f1", label: "Current cell" },
+              { color: "#f59e0b", label: "Dependency" },
+              { color: "#166044", label: "Computed value" },
+              { color: "#1e293b", label: "Zero / unvisited" },
+            ].map(({ color, label }) => (
+              <div key={label} className="flex items-center gap-2 mb-1.5">
+                <span className="w-3 h-3 rounded inline-block" style={{ backgroundColor: color }} />
+                <span className="text-xs text-slate-500 dark:text-slate-400">{label}</span>
+              </div>
+            ))}
+          </section>
+        </div>
+
+        <div className="flex-1 p-6 overflow-auto">
+          <div className="flex gap-3 mb-6">
+            {[
+              { label: "Time", val: COMPLEXITY[problem].time },
+              { label: "Space", val: COMPLEXITY[problem].space },
+              { label: "Steps", val: steps.length },
+            ].map(({ label, val }) => (
+              <div key={label} className="bg-white border border-slate-200 rounded-lg px-4 py-3 text-center min-w-[80px] dark:bg-slate-900 dark:border-slate-800">
+                <p className="text-xs text-slate-500 dark:text-slate-400">{label}</p>
+                <p className="text-sm font-mono font-bold text-indigo-600 dark:text-indigo-400 mt-0.5">{val}</p>
+              </div>
+            ))}
+          </div>
+
+          <div className="bg-white border border-slate-200 rounded-xl p-5 mb-6 dark:bg-slate-900 dark:border-slate-800">
+            <h2 className="text-sm font-semibold text-slate-900 dark:text-white mb-1">{problem} — DP Table</h2>
+            <p className="text-xs text-slate-500 dark:text-slate-400 mb-3">
+              {problem === "Fibonacci" && "Each cell = sum of previous two"}
+              {problem === "LIS" && "Each cell = length of LIS ending at that index"}
+              {problem === "0/1 Knapsack" && "Each cell = max value for given capacity"}
+              {problem === "LCS" && "Each cell = LCS length of prefixes — green = character match"}
+            </p>
+            {problem === "Fibonacci" && <FibViz steps={steps} stepIdx={stepIdx} />}
+            {problem === "LIS" && <LISViz steps={steps} stepIdx={stepIdx} arr={lisArrParsed.slice(0, 10)} />}
+            {problem === "0/1 Knapsack" && <KnapsackViz steps={steps} stepIdx={stepIdx} weights={ksWtParsed.slice(0, 6)} values={ksValParsed.slice(0, 6)} W={Math.min(ksW, 10)} />}
+            {problem === "LCS" && <LCSViz steps={steps} stepIdx={stepIdx} s1={lcsS1.slice(0, 8)} s2={lcsS2.slice(0, 8)} />}
+          </div>
+
+          <div className="bg-white border border-slate-200 rounded-xl p-5 dark:bg-slate-900 dark:border-slate-800">
+            <h2 className="text-sm font-semibold text-slate-900 dark:text-white mb-3">Pseudocode</h2>
+            <pre className="text-xs text-emerald-600 dark:text-emerald-400 font-mono whitespace-pre-wrap leading-relaxed">
+              {PSEUDOCODE[problem]}
+            </pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/dp/quiz/page.jsx b/src/app/visualizer/dp/quiz/page.jsx
new file mode 100644
index 000000000..1d1772a52
--- /dev/null
+++ b/src/app/visualizer/dp/quiz/page.jsx
@@ -0,0 +1,10 @@
+import Quiz from "./quiz";
+
+export const metadata = {
+  title: "Dynamic Programming Quiz | AlgoBuddy",
+  description: "Test your understanding of Dynamic Programming algorithms including Memoization, Tabulation, Knapsack, LCS, and more.",
+};
+
+export default function Page() {
+  return <Quiz />;
+}
diff --git a/src/app/visualizer/dp/quiz/quiz.jsx b/src/app/visualizer/dp/quiz/quiz.jsx
new file mode 100644
index 000000000..63e65d81f
--- /dev/null
+++ b/src/app/visualizer/dp/quiz/quiz.jsx
@@ -0,0 +1,210 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const DPQuiz = () => {
+  const questions = [
+    {
+      question: "What is Dynamic Programming (DP)?",
+      options: [
+        "A method for solving complex problems by breaking them down into simpler, overlapping subproblems",
+        "An algorithm that always makes the locally optimal choice at each step",
+        "A technique to automatically write computer code dynamically",
+        "A database optimization method"
+      ],
+      correctAnswer: 0,
+      explanation: "Dynamic Programming solves complex problems by breaking them down into simpler subproblems and storing the results of these subproblems to avoid redundant computations."
+    },
+    {
+      question: "What are the two main characteristics a problem must have to be solvable using Dynamic Programming?",
+      options: [
+        "Optimal Substructure and Overlapping Subproblems",
+        "Greedy Choice Property and Optimal Substructure",
+        "Divide and Conquer and Recursion",
+        "Memoization and Tabulation"
+      ],
+      correctAnswer: 0,
+      explanation: "A problem must exhibit Optimal Substructure (the optimal solution to the problem contains optimal solutions to its subproblems) and Overlapping Subproblems (the same subproblems are solved repeatedly) to use DP."
+    },
+    {
+      question: "Which of the following describes the 'Top-Down' approach to Dynamic Programming?",
+      options: [
+        "Tabulation",
+        "Memoization",
+        "Iteration",
+        "Breadth-First Search"
+      ],
+      correctAnswer: 1,
+      explanation: "Memoization is the top-down approach. It starts with the main problem, breaks it down recursively, and caches the results of subproblems as they are computed."
+    },
+    {
+      question: "Which of the following describes the 'Bottom-Up' approach to Dynamic Programming?",
+      options: [
+        "Tabulation",
+        "Memoization",
+        "Recursion",
+        "Divide and Conquer"
+      ],
+      correctAnswer: 0,
+      explanation: "Tabulation is the bottom-up approach. It starts by solving the smallest subproblems first and iteratively uses their solutions to build up to the main problem."
+    },
+    {
+      question: "In the context of the Fibonacci sequence, why is plain recursion inefficient without DP?",
+      options: [
+        "Because it uses too much memory",
+        "Because it recalculates the same Fibonacci numbers multiple times",
+        "Because it requires a specialized compiler",
+        "Because it is impossible to write correctly"
+      ],
+      correctAnswer: 1,
+      explanation: "Plain recursion evaluates the same subproblems repeatedly, resulting in an exponential time complexity of O(2^n). DP solves this by storing the previously calculated values."
+    },
+    {
+      question: "What is 'State' in Dynamic Programming?",
+      options: [
+        "The language compiler's current memory allocation",
+        "A set of parameters that uniquely identifies a specific subproblem",
+        "The final output of the algorithm",
+        "The condition that breaks the recursive loop"
+      ],
+      correctAnswer: 1,
+      explanation: "A 'state' is a configuration of variables/parameters that uniquely defines a specific subproblem (e.g., in Knapsack, the state is typically defined by the current item index and the remaining capacity)."
+    },
+    {
+      question: "What is a 'State Transition' in Dynamic Programming?",
+      options: [
+        "Switching from one programming language to another",
+        "Converting a recursive function to an iterative one",
+        "The mathematical relationship or recurrence relation that connects a state to its smaller subproblems",
+        "The process of clearing the memoization table"
+      ],
+      correctAnswer: 2,
+      explanation: "The state transition describes how a problem's solution is built from its subproblems' solutions. E.g., dp[i] = dp[i-1] + dp[i-2]."
+    },
+    {
+      question: "What are 'Base Cases' in DP?",
+      options: [
+        "The most complex subproblems to solve",
+        "The simplest, smallest subproblems that can be solved directly without further breaking down",
+        "The worst-case time complexity of the algorithm",
+        "The memory allocated for the DP table"
+      ],
+      correctAnswer: 1,
+      explanation: "Base cases are the fundamental building blocks of DP. They are the known initial values (e.g., fib(0) = 0, fib(1) = 1) from which all other states are computed."
+    },
+    {
+      question: "What is the typical time complexity of calculating the Nth Fibonacci number using Dynamic Programming?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(2^N)"
+      ],
+      correctAnswer: 2,
+      explanation: "With DP, we compute each Fibonacci number exactly once from 1 to N, resulting in a linear O(N) time complexity."
+    },
+    {
+      question: "How can the space complexity of the Bottom-Up Fibonacci DP algorithm be optimized?",
+      options: [
+        "By using an array of size N",
+        "By using a Hash Map instead of an Array",
+        "By only keeping track of the last two computed values (O(1) space)",
+        "Space complexity cannot be optimized further than O(N)"
+      ],
+      correctAnswer: 2,
+      explanation: "Since fib(n) only depends on fib(n-1) and fib(n-2), we only need two variables to store the previous states, reducing space complexity from O(N) to O(1)."
+    },
+    {
+      question: "In the 0/1 Knapsack Problem, what does '0/1' refer to?",
+      options: [
+        "The weights must be either 0 or 1",
+        "You can either include an item entirely (1) or leave it out entirely (0)",
+        "The time complexity is O(N)",
+        "The items can be broken down into fractions"
+      ],
+      correctAnswer: 1,
+      explanation: "0/1 means you cannot take a fraction of an item; you must either take the whole item (1) or not take it at all (0)."
+    },
+    {
+      question: "What is the typical time complexity of the 0/1 Knapsack problem using Dynamic Programming?",
+      options: [
+        "O(N)",
+        "O(W)",
+        "O(N * W)",
+        "O(2^N)"
+      ],
+      correctAnswer: 2,
+      explanation: "The DP table has N (number of items) rows and W (knapsack capacity) columns. We fill each cell in O(1) time, leading to O(N * W) time complexity. This is known as pseudo-polynomial time."
+    },
+    {
+      question: "Which DP problem asks you to find the length of the longest subsequence present in both of two given sequences?",
+      options: [
+        "Longest Increasing Subsequence (LIS)",
+        "Longest Common Subsequence (LCS)",
+        "Matrix Chain Multiplication",
+        "Coin Change"
+      ],
+      correctAnswer: 1,
+      explanation: "Longest Common Subsequence (LCS) finds the longest sequence that appears in the same relative order in both strings."
+    },
+    {
+      question: "In the Coin Change problem (finding the minimum number of coins to make a given amount), what is the optimal substructure?",
+      options: [
+        "dp[amount] = max(dp[amount], dp[amount - coin] + 1)",
+        "dp[amount] = min(dp[amount], dp[amount - coin] + 1)",
+        "dp[amount] = dp[amount - 1] + dp[amount - 2]",
+        "dp[amount] = dp[amount] * coin"
+      ],
+      correctAnswer: 1,
+      explanation: "To find the minimum coins for `amount`, we look at the minimum coins needed for `amount - coin` and add 1 (for the current coin), taking the minimum across all available coin denominations."
+    },
+    {
+      question: "What is the time complexity of the standard Dynamic Programming approach for Longest Increasing Subsequence (LIS)?",
+      options: [
+        "O(N)",
+        "O(N log N)",
+        "O(N²)",
+        "O(2^N)"
+      ],
+      correctAnswer: 2,
+      explanation: "The standard nested loop DP approach for LIS checks every previous element for each element, leading to O(N²) time complexity. (Note: An O(N log N) solution exists using Binary Search, but it's not the standard DP method)."
+    },
+    {
+      question: "What does the Matrix Chain Multiplication DP problem aim to minimize?",
+      options: [
+        "The number of matrices in the chain",
+        "The total number of scalar multiplications required to multiply the matrices",
+        "The dimensions of the resulting matrix",
+        "The time it takes to add the matrices"
+      ],
+      correctAnswer: 1,
+      explanation: "Matrix Chain Multiplication seeks the optimal parenthesization of a sequence of matrices to minimize the total number of scalar multiplications needed to compute the product."
+    },
+    {
+      question: "When should you generally prefer Tabulation over Memoization?",
+      options: [
+        "When the state space is sparse and you won't need to visit all subproblems",
+        "When you want to avoid the overhead of recursive function calls and potential stack overflow issues",
+        "When you are unsure of the base cases",
+        "When you need to write the code as quickly as possible"
+      ],
+      correctAnswer: 1,
+      explanation: "Tabulation (bottom-up) uses an iterative approach, avoiding recursion depth limits and function call overhead. Memoization is often preferred when the state space is sparse (not all states need to be computed)."
+    },
+    {
+      question: "Which of the following is NOT a common dynamic programming pattern?",
+      options: [
+        "1D Array (e.g., Fibonacci, Climbing Stairs)",
+        "2D Array/Grid (e.g., Unique Paths, LCS)",
+        "Interval/Range (e.g., Matrix Chain Multiplication, Palindrome Substrings)",
+        "Greedy Choice (e.g., Fractional Knapsack)"
+      ],
+      correctAnswer: 3,
+      explanation: "The Greedy Choice is a characteristic of Greedy Algorithms, not Dynamic Programming. Fractional Knapsack is solved using a Greedy approach, while 0/1 Knapsack requires DP."
+    }
+  ];
+
+  return <QuizEngine title="Dynamic Programming Quiz" questions={questions} />;
+};
+
+export default DPQuiz;
diff --git a/src/app/visualizer/dry-run/AlgorithmClient.jsx b/src/app/visualizer/dry-run/AlgorithmClient.jsx
new file mode 100644
index 000000000..46febe84f
--- /dev/null
+++ b/src/app/visualizer/dry-run/AlgorithmClient.jsx
@@ -0,0 +1,20 @@
+import Footer from "@/app/components/footer";
+import DryRunClient from "./DryRunClient";
+import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
+import { createVisualizerPaths } from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function DryRunPage() {
+  return (
+    <div className="min-h-screen bg-slate-50 text-slate-950 dark:bg-[#101216] dark:text-slate-100 flex flex-col">
+      <div className="w-full px-6 md:px-12 pt-6">
+        <div className="mb-4 mt-2">
+          <Breadcrumbs paths={createVisualizerPaths("Code Lab", "Dry Run")} />
+        </div>
+      </div>
+      <div className="flex-1">
+        <DryRunClient />
+      </div>
+      <Footer />
+    </div>
+  );
+}
diff --git a/src/app/visualizer/dry-run/DryRunClient.jsx b/src/app/visualizer/dry-run/DryRunClient.jsx
new file mode 100644
index 000000000..1c9a2a002
--- /dev/null
+++ b/src/app/visualizer/dry-run/DryRunClient.jsx
@@ -0,0 +1,734 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  ArrowLeft,
+  ChevronLeft,
+  ChevronRight,
+  Code2,
+  Pause,
+  Play,
+  RotateCcw,
+  SlidersHorizontal,
+  Terminal,
+} from "lucide-react";
+import Link from "next/link";
+import dynamic from "next/dynamic";
+import { useTheme } from "next-themes";
+
+const Editor = dynamic(() => import("@monaco-editor/react"), {
+  ssr: false,
+  loading: () => (
+    <div className="flex h-[420px] items-center justify-center bg-slate-950 font-mono text-sm text-slate-400">
+      Loading Editor...
+    </div>
+  ),
+});
+import { useUser } from "@/features/user/UserContext";
+
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+const SAMPLES = {
+  JavaScript: `const numbers = [5, 2, 8, 1];
+let minIndex = 0;
+if (numbers[1] < numbers[minIndex]) {
+  minIndex = 1;
+}
+swap(numbers, 0, minIndex);
+console.log(numbers);`,
+  Python: `numbers = [5, 2, 8, 1]
+min_index = 0
+if numbers[1] < numbers[min_index]:
+    min_index = 1
+swap(numbers, 0, min_index)
+print(numbers)`,
+  "C++": `vector<int> numbers = {5, 2, 8, 1};
+int minIndex = 0;
+if (numbers[1] < numbers[minIndex]) {
+  minIndex = 1;
+}
+swap(numbers[0], numbers[minIndex]);
+cout << numbers[0] << " " << numbers[1];`,
+  Java: `int[] numbers = {5, 2, 8, 1};
+int minIndex = 0;
+if (numbers[1] < numbers[minIndex]) {
+  minIndex = 1;
+}
+swap(numbers, 0, minIndex);
+System.out.println(numbers);`,
+};
+
+const LANGUAGE_HINTS = {
+  JavaScript: "Traces assignments, arrays, if branches, swap calls, and console.log output.",
+  Python: "Traces lists, assignments, if branches, swap calls, and print output.",
+  "C++": "Traces vector declarations, scalar assignments, if branches, swap calls, and cout output.",
+  Java: "Traces primitive types, array declarations, if branches, swap calls, and System.out.println output.",
+};
+
+const MONACO_LANGUAGE_MAP = {
+  JavaScript: "javascript",
+  Python: "python",
+  "C++": "cpp",
+  Java: "java",
+};
+
+function cloneVariables(variables) {
+  return Object.fromEntries(
+    Object.entries(variables).map(([key, value]) => [
+      key,
+      Array.isArray(value) ? [...value] : value,
+    ])
+  );
+}
+
+function stripLine(line) {
+  let clean = line
+    .replace(/\/\/.*$/, "")
+    .replace(/#.*$/, "")
+    .replace(/;+$/, "")
+    .trim();
+
+  if (clean === "}") return "";
+
+  if (clean.endsWith("{")) {
+    clean = clean.slice(0, -1).trim();
+  }
+
+  return clean;
+}
+
+function parseArrayLiteral(raw) {
+  const match = raw.match(/[\[{]([\d\s,.-]+)[\]}]/);
+  if (!match) return null;
+
+  const values = match[1]
+    .split(",")
+    .map((value) => Number(value.trim()))
+    .filter((value) => Number.isFinite(value));
+
+  return values.length ? values : null;
+}
+
+function resolveValue(token, variables) {
+  const clean = token.trim();
+  if (/^-?\d+(\.\d+)?$/.test(clean)) return Number(clean);
+
+  const indexMatch = clean.match(/^([A-Za-z_]\w*)\[(.+)\]$/);
+  if (indexMatch) {
+    const arrayValue = variables[indexMatch[1]];
+    const index = resolveValue(indexMatch[2], variables);
+    if (Array.isArray(arrayValue) && Number.isInteger(index)) {
+      return arrayValue[index];
+    }
+  }
+
+  if (Object.prototype.hasOwnProperty.call(variables, clean)) {
+    return variables[clean];
+  }
+
+  return clean.replace(/^["']|["']$/g, "");
+}
+
+function evaluateExpression(expression, variables) {
+  const expr = expression.trim();
+  if (!expr) return "";
+
+  const arrayLiteral = parseArrayLiteral(expr);
+  if (arrayLiteral) return arrayLiteral;
+
+  if (/[<>]=?|={2,3}|!=/.test(expr)) {
+    const [left, operator, right] = expr.split(/\s*(<=|>=|<|>|={2,3}|!=)\s*/);
+    const leftValue = resolveValue(left, variables);
+    const rightValue = resolveValue(right, variables);
+
+    if (operator === "<") return leftValue < rightValue;
+    if (operator === ">") return leftValue > rightValue;
+    if (operator === "<=") return leftValue <= rightValue;
+    if (operator === ">=") return leftValue >= rightValue;
+    if (operator === "!=") return leftValue !== rightValue;
+    return leftValue === rightValue;
+  }
+
+  const arithmetic = expr.match(/^(.+)\s*([+\-*/])\s*(.+)$/);
+  if (arithmetic) {
+    const leftValue = Number(resolveValue(arithmetic[1], variables));
+    const rightValue = Number(resolveValue(arithmetic[3], variables));
+    if (Number.isFinite(leftValue) && Number.isFinite(rightValue)) {
+      if (arithmetic[2] === "+") return leftValue + rightValue;
+      if (arithmetic[2] === "-") return leftValue - rightValue;
+      if (arithmetic[2] === "*") return leftValue * rightValue;
+      if (arithmetic[2] === "/" && rightValue !== 0) return leftValue / rightValue;
+    }
+  }
+
+  return resolveValue(expr, variables);
+}
+
+function formatValue(value) {
+  if (Array.isArray(value)) return `[${value.join(", ")}]`;
+  if (typeof value === "boolean") return value ? "true" : "false";
+  return String(value);
+}
+
+function interpolateOutput(raw, variables) {
+  const callBody = raw
+    .replace(/^console\.log\(/, "")
+    .replace(/^print\(/, "")
+    .replace(/^System\.out\.print(?:ln)?\(/, "")
+    .replace(/\)$/, "")
+    .replace(/^cout\s*<</, "")
+    .trim();
+
+  if (!callBody) return "";
+
+  return callBody
+    .split(/,|<</)
+    .map((part) => formatValue(evaluateExpression(part.trim(), variables)))
+    .join(" ")
+    .trim();
+}
+
+function getFirstArray(variables) {
+  return Object.values(variables).find((value) => Array.isArray(value)) || [];
+}
+
+function createFrame({ lineNumber, line, variables, consoleOutput, callStack, note }) {
+  const arrays = Object.entries(variables).filter(([, value]) => Array.isArray(value));
+  const firstArray = arrays[0]?.[1] || [];
+
+  return {
+    lineNumber,
+    line,
+    variables: cloneVariables(variables),
+    consoleOutput: [...consoleOutput],
+    callStack: [...callStack],
+    arrays,
+    stack: [...firstArray].reverse(),
+    queue: [...firstArray],
+    note,
+  };
+}
+
+function buildTrace(source) {
+  const lines = source.split("\n");
+  const variables = {};
+  const consoleOutput = [];
+  const callStack = ["global"];
+  const frames = [];
+
+  lines.forEach((rawLine, index) => {
+    const lineNumber = index + 1;
+    const line = stripLine(rawLine);
+    if (!line) return;
+
+    let note = "Read this statement.";
+
+    const vectorMatch = line.match(/^(?:[A-Za-z_]\w*\[\]|const|let|var|int|double|float|char|boolean|String|auto|vector<[^>]+>)?\s*([A-Za-z_]\w*)\s*=\s*(.+)$/);
+    const arrayUpdateMatch = line.match(/^([A-Za-z_]\w*)\[(.+?)\]\s*=\s*(.+)$/);
+    const ifMatch = line.match(/^if\s*\(?(.+?)\)?\s*:?\s*$/);
+    const elseIfMatch = line.match(/^(?:else\s+if|elif)\s*\(?(.+?)\)?\s*:?\s*$/);
+    const elseMatch = line.match(/^else\s*:?\s*$/);
+    const forMatch = line.match(/^for\s*\(?(.+?)\)?\s*:?\s*$/);
+    const whileMatch = line.match(/^while\s*\(?(.+?)\)?\s*:?\s*$/);
+    const swapMatch = line.match(/^swap\((.+)\)$/);
+    const outputMatch = /^(console\.log|print|System\.out\.print(?:ln)?)\(/.test(line) || /^cout\s*<</.test(line);
+
+    if (forMatch) {
+      callStack.push("loop");
+      note = `Entered a loop header: ${forMatch[1]}. The tracer records the control point without executing untrusted loops.`;
+    } else if (whileMatch) {
+      callStack.push("loop");
+      const result = evaluateExpression(whileMatch[1], variables);
+      note = `Entered a while loop header with condition evaluating to ${formatValue(result)}.`;
+    } else if (ifMatch) {
+      const result = evaluateExpression(ifMatch[1], variables);
+      note = `Condition evaluated to ${formatValue(result)}.`;
+    } else if (elseIfMatch) {
+      const result = evaluateExpression(elseIfMatch[1], variables);
+      note = `Else-if condition evaluated to ${formatValue(result)}.`;
+    } else if (elseMatch) {
+      note = "Entered else branch.";
+    } else if (swapMatch) {
+      const targets = swapMatch[1].split(",").map((part) => part.trim());
+      
+      // Try Style B (JS/Python): swap(array, idx1, idx2)
+      let arrayName = targets[0];
+      let arrayValue = variables[arrayName];
+      let leftIndex = targets[1];
+      let rightIndex = targets[2];
+
+      // If Style B is not matched (i.e. targets[0] is not a raw array name), try Style A (C++)
+      if (!Array.isArray(arrayValue)) {
+        arrayName = targets[0]?.match(/^([A-Za-z_]\w*)/)?.[1];
+        arrayValue = variables[arrayName];
+        leftIndex = targets[0]?.match(/\[(.+)\]/)?.[1];
+        rightIndex = targets[1]?.match(/\[(.+)\]/)?.[1];
+      }
+
+      if (Array.isArray(arrayValue) && leftIndex !== undefined && rightIndex !== undefined) {
+        const a = Number(resolveValue(leftIndex, variables));
+        const b = Number(resolveValue(rightIndex, variables));
+        if (Number.isInteger(a) && Number.isInteger(b) && a >= 0 && b >= 0 && a < arrayValue.length && b < arrayValue.length) {
+          [arrayValue[a], arrayValue[b]] = [arrayValue[b], arrayValue[a]];
+          note = `Swapped ${arrayName}[${a}] and ${arrayName}[${b}].`;
+        } else {
+          note = `Tried to swap index ${a} and ${b}, but one of them is invalid or out of bounds.`;
+        }
+      } else {
+        note = "Detected a swap operation and marked it in the execution timeline.";
+      }
+    } else if (outputMatch) {
+      const output = interpolateOutput(line, variables);
+      consoleOutput.push(output);
+      note = `Console output appended: ${output || "(empty)"}.`;
+    } else if (arrayUpdateMatch) {
+      const arrayName = arrayUpdateMatch[1];
+      const arrayValue = variables[arrayName];
+      if (Array.isArray(arrayValue)) {
+        const idx = Number(resolveValue(arrayUpdateMatch[2], variables));
+        const val = resolveValue(arrayUpdateMatch[3], variables);
+        if (Number.isInteger(idx) && idx >= 0 && idx < arrayValue.length) {
+          arrayValue[idx] = val;
+          note = `Updated ${arrayName}[${idx}] to ${formatValue(val)}.`;
+        } else {
+          note = `Tried to update index ${idx} of array ${arrayName}, but it is out of bounds.`;
+        }
+      } else {
+        note = `Tried to perform an array update on ${arrayName}, but it is not an array.`;
+      }
+    } else if (vectorMatch) {
+      const [, name, expression] = vectorMatch;
+      const value = evaluateExpression(expression, variables);
+      variables[name] = value;
+      note = `Updated ${name} to ${formatValue(value)}.`;
+    }
+
+    frames.push(
+      createFrame({
+        lineNumber,
+        line: rawLine,
+        variables,
+        consoleOutput,
+        callStack,
+        note,
+      })
+    );
+
+    if (forMatch || whileMatch) callStack.pop();
+  });
+
+  return frames.length
+    ? frames
+    : [
+        createFrame({
+          lineNumber: 1,
+          line: "",
+          variables,
+          consoleOutput,
+          callStack,
+          note: "Paste code to generate a dry-run timeline.",
+        }),
+      ];
+}
+
+function DataPreview({ title, values, variant = "array" }) {
+  return (
+    <div className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-950">
+      <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-100">{title}</h3>
+      <div className="mt-3 flex min-h-12 flex-wrap items-center gap-2">
+        {values.length ? (
+          values.map((value, index) => (
+            <div
+              key={`${title}-${index}-${value}`}
+              className={`flex h-10 min-w-10 items-center justify-center border px-3 text-sm font-semibold ${
+                variant === "stack"
+                  ? "rounded bg-indigo-50 text-indigo-700 dark:bg-indigo-950 dark:text-indigo-200"
+                  : variant === "queue"
+                    ? "rounded-full bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-200"
+                    : "rounded-md bg-violet-50 text-violet-700 dark:bg-violet-950 dark:text-violet-200"
+              } border-current/20`}
+            >
+              {formatValue(value)}
+            </div>
+          ))
+        ) : (
+          <p className="text-sm text-slate-500 dark:text-slate-400">No values yet</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function DryRunClient() {
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = resolvedTheme === "dark";
+  const { user } = useUser();
+  const [language, setLanguage] = useState("JavaScript");
+  const [source, setSource] = useState(SAMPLES.JavaScript);
+  const [step, setStep] = useState(0);
+  const [playing, setPlaying] = useState(false);
+  const [speed, setSpeed] = useState(900);
+  const fileInputRef = useRef(null);
+  const editorRef = useRef(null);
+  const monacoRef = useRef(null);
+  const decorationsRef = useRef([]);
+
+  const displayName =
+    user?.user_metadata?.name || user?.email?.split("@")[0] || "Anonymous";
+
+
+
+  const trace = useMemo(() => buildTrace(source), [source]);
+  const current = trace[Math.min(step, trace.length - 1)];
+  const sourceLines = source.split("\n");
+  const monacoLanguage = useMemo(
+    () => MONACO_LANGUAGE_MAP[language] || "javascript",
+    [language]
+  );
+
+  useEffect(() => {
+    setStep(0);
+    setPlaying(false);
+    // Clear editor decorations when source or language changes
+    if (editorRef.current) {
+      decorationsRef.current = editorRef.current.deltaDecorations(
+        decorationsRef.current,
+        []
+      );
+    }
+  }, [source, language]);
+
+  // Inject CSS styles for the active line highlight in Monaco Editor
+  useEffect(() => {
+    const styleId = "dry-run-active-line-styles";
+    if (document.getElementById(styleId)) return;
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = `
+      .active-line-highlight {
+        background: rgba(139, 92, 246, 0.18) !important;
+        border-left: 3px solid #8b5cf6 !important;
+        transition: background 0.3s ease;
+      }
+      .dark .active-line-highlight,
+      [data-theme="dark"] .active-line-highlight {
+        background: rgba(139, 92, 246, 0.25) !important;
+      }
+      .active-line-glyph {
+        background: #8b5cf6;
+        border-radius: 50%;
+        margin-left: 4px;
+        width: 8px !important;
+        height: 8px !important;
+      }
+    `;
+    document.head.appendChild(style);
+    return () => {
+      const existing = document.getElementById(styleId);
+      if (existing) existing.remove();
+    };
+  }, []);
+
+  // Sync Monaco Editor decorations with the current execution step
+  useEffect(() => {
+    const editor = editorRef.current;
+    const monacoInstance = monacoRef.current;
+    if (!editor || !monacoInstance || !current.lineNumber) return;
+
+    decorationsRef.current = editor.deltaDecorations(
+      decorationsRef.current,
+      [
+        {
+          range: new monacoInstance.Range(
+            current.lineNumber,
+            1,
+            current.lineNumber,
+            1
+          ),
+          options: {
+            isWholeLine: true,
+            className: "active-line-highlight",
+            glyphMarginClassName: "active-line-glyph",
+          },
+        },
+      ]
+    );
+
+    // Scroll the editor to reveal the active line
+    editor.revealLineInCenter(current.lineNumber);
+  }, [current.lineNumber]);
+
+  const isAtEnd = step >= trace.length - 1;
+
+  useVisualizerKeyboard({
+    onStart: () => {
+      if (isAtEnd) setStep(0);
+      setPlaying(true);
+    },
+    onReset: () => {
+      setStep(0);
+      setPlaying(false);
+    },
+    onTogglePlayPause: () => setPlaying((value) => !value),
+    onSpeedChange: setSpeed,
+    speed,
+    sorting: playing,
+    sorted: isAtEnd,
+  });
+
+  useEffect(() => {
+    if (!playing) return;
+    const timer = window.setInterval(() => {
+      setStep((value) => {
+        if (value >= trace.length - 1) {
+          setPlaying(false);
+          return value;
+        }
+        return value + 1;
+      });
+    }, speed);
+
+    return () => window.clearInterval(timer);
+  }, [playing, speed, trace.length]);
+
+
+
+  const updateLanguage = (nextLanguage) => {
+    setLanguage(nextLanguage);
+    setSource(SAMPLES[nextLanguage]);
+  };
+
+
+
+  return (
+    <main className="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
+        <Link
+          href="/visualizer"
+          className="inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:border-violet-300 hover:text-violet-700 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-200"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Visualizer
+        </Link>
+        <div className="flex items-center gap-2 rounded-lg border border-slate-200 bg-white p-1 dark:border-slate-800 dark:bg-slate-950">
+          {Object.keys(SAMPLES).map((item) => (
+            <button
+              key={item}
+              type="button"
+              onClick={() => updateLanguage(item)}
+              className={`rounded-md px-3 py-1.5 text-sm font-semibold transition ${
+                language === item
+                  ? "bg-violet-600 text-white"
+                  : "text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
+              }`}
+            >
+              {item}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <section className="mb-8">
+        <p className="text-sm font-semibold uppercase tracking-[0.18em] text-violet-600 dark:text-violet-300">
+          Custom code dry run
+        </p>
+        <h1 className="mt-2 text-3xl font-bold tracking-tight text-slate-950 dark:text-white sm:text-4xl">
+          Trace code line by line before you run it
+        </h1>
+        <p className="mt-3 max-w-3xl text-base leading-7 text-slate-600 dark:text-slate-300">
+          Paste a short algorithm snippet and inspect the execution timeline, variables, console output,
+          and data-structure snapshots. The tracer is intentionally static and safe: it explains control
+          flow without executing arbitrary user code.
+        </p>
+      </section>
+
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,1.05fr)_minmax(360px,0.95fr)]">
+        <section className="rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-950">
+          <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-4 py-3 dark:border-slate-800">
+            <div className="flex items-center gap-2">
+              <Code2 className="h-5 w-5 text-violet-600" />
+              <div>
+                <h2 className="font-semibold text-slate-900 dark:text-white">Code editor</h2>
+                <p className="text-xs text-slate-500 dark:text-slate-400">{LANGUAGE_HINTS[language]}</p>
+              </div>
+            </div>
+            <button
+              type="button"
+              onClick={() => setSource(SAMPLES[language])}
+              className="inline-flex items-center gap-2 rounded-md border border-slate-200 px-3 py-1.5 text-sm font-semibold text-slate-700 transition hover:border-violet-300 hover:text-violet-700 dark:border-slate-700 dark:text-slate-200"
+            >
+              <RotateCcw className="h-4 w-4" />
+              Reset sample
+            </button>
+          </div>
+          <div className="overflow-hidden rounded-b-xl">
+            <Editor
+              height="420px"
+              language={monacoLanguage}
+              theme={isDarkMode ? "vs-dark" : "light"}
+              value={source}
+              onChange={(value) => setSource(value || "")}
+              onMount={(editor, monaco) => {
+                editorRef.current = editor;
+                monacoRef.current = monaco;
+              }}
+              loading={
+                <div className="flex h-[420px] items-center justify-center bg-slate-950 font-mono text-sm text-slate-400">
+                  Loading Editor...
+                </div>
+              }
+              options={{
+                minimap: { enabled: false },
+                fontSize: 14,
+                fontFamily: "'Fira Code', 'Courier New', Courier, monospace",
+                lineHeight: 22,
+                padding: { top: 16, bottom: 16 },
+                scrollBeyondLastLine: false,
+                automaticLayout: true,
+                cursorBlinking: "smooth",
+                renderLineHighlight: "all",
+                glyphMargin: true,
+              }}
+            />
+          </div>
+        </section>
+
+        <section className="space-y-4">
+          <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-950">
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <h2 className="font-semibold text-slate-900 dark:text-white">Execution controls</h2>
+                <p className="text-sm text-slate-500 dark:text-slate-400">
+                  Step {Math.min(step + 1, trace.length)} of {trace.length}
+                </p>
+              </div>
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={() => setStep((value) => Math.max(0, value - 1))}
+                  className="rounded-lg border border-slate-200 p-2 text-slate-700 transition hover:border-violet-300 hover:text-violet-700 disabled:opacity-40 dark:border-slate-700 dark:text-slate-200"
+                  disabled={step === 0}
+                  aria-label="Previous step"
+                >
+                  <ChevronLeft className="h-5 w-5" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setPlaying((value) => !value)}
+                  className="rounded-lg bg-violet-600 p-2 text-white transition hover:bg-violet-700"
+                  aria-label={playing ? "Pause dry run" : "Play dry run"}
+                >
+                  {playing ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setStep((value) => Math.min(trace.length - 1, value + 1))}
+                  className="rounded-lg border border-slate-200 p-2 text-slate-700 transition hover:border-violet-300 hover:text-violet-700 disabled:opacity-40 dark:border-slate-700 dark:text-slate-200"
+                  disabled={step >= trace.length - 1}
+                  aria-label="Next step"
+                >
+                  <ChevronRight className="h-5 w-5" />
+                </button>
+              </div>
+            </div>
+            <label className="mt-4 flex flex-col gap-2 text-sm font-semibold text-slate-700 dark:text-slate-200">
+              <div className="flex items-center gap-2">
+                <SlidersHorizontal className="h-4 w-4" />
+                <span>Speed (Delay Interval)</span>
+              </div>
+              
+              <div className="flex items-center gap-3 w-full">
+                {/* Explicit Left Bound Indicator */}
+                <span className="text-xs text-slate-500 font-medium select-none min-w-[50px] text-right">
+                  Fast (250ms)
+                </span>
+                
+                <input
+                  type="range"
+                  min="250"
+                  max="1400"
+                  step="50"
+                  value={speed}
+                  onChange={(event) => setSpeed(Number(event.target.value))}
+                  className="w-full accent-violet-600 cursor-pointer"
+                  aria-label="Execution Speed Delay Slider"
+                />
+                
+                {/* Explicit Right Bound Indicator */}
+                <span className="text-xs text-slate-500 font-medium select-none min-w-[60px]">
+                  Slow (1400ms)
+                </span>
+                
+                {/* Currently Selected Active Value Display */}
+                <span className="text-xs font-bold text-violet-600 dark:text-violet-400 min-w-[45px] text-right">
+                  {speed}ms
+                </span>
+              </div>
+            </label>
+          </div>
+
+          <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-950">
+            <h2 className="font-semibold text-slate-900 dark:text-white">Active line</h2>
+            <div className="mt-3 max-h-64 overflow-auto rounded-lg bg-slate-950 p-3 font-mono text-sm text-slate-200">
+              {sourceLines.map((line, index) => (
+                <div
+                  key={`${line}-${index}`}
+                  className={`grid grid-cols-[2.5rem_1fr] gap-3 rounded px-2 py-1 ${
+                    current.lineNumber === index + 1 ? "bg-violet-500/30 text-white" : ""
+                  }`}
+                >
+                  <span className="select-none text-right text-slate-500">{index + 1}</span>
+                  <span>{line || " "}</span>
+                </div>
+              ))}
+            </div>
+            <p className="mt-3 rounded-lg bg-violet-50 p-3 text-sm font-medium text-violet-900 dark:bg-violet-950 dark:text-violet-100">
+              {current.note}
+            </p>
+          </div>
+        </section>
+      </div>
+
+      <section className="mt-6 grid gap-4 lg:grid-cols-3">
+        <DataPreview title="Array view" values={getFirstArray(current.variables)} />
+        <DataPreview title="Stack view" values={current.stack} variant="stack" />
+        <DataPreview title="Queue view" values={current.queue} variant="queue" />
+      </section>
+
+      <section className="mt-6 grid gap-4 lg:grid-cols-[1fr_1fr]">
+        <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-950">
+          <h2 className="font-semibold text-slate-900 dark:text-white">Variables</h2>
+          <div className="mt-3 space-y-2">
+            {Object.keys(current.variables).length ? (
+              Object.entries(current.variables).map(([key, value]) => (
+                <div
+                  key={key}
+                  className="flex items-center justify-between rounded-lg bg-slate-100 px-3 py-2 text-sm dark:bg-slate-900"
+                >
+                  <span className="font-mono font-semibold text-slate-700 dark:text-slate-200">{key}</span>
+                  <span className="font-mono text-slate-600 dark:text-slate-300">{formatValue(value)}</span>
+                </div>
+              ))
+            ) : (
+              <p className="text-sm text-slate-500 dark:text-slate-400">No variables captured yet.</p>
+            )}
+          </div>
+        </div>
+
+        <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-950">
+          <div className="flex items-center gap-2">
+            <Terminal className="h-5 w-5 text-emerald-600" />
+            <h2 className="font-semibold text-slate-900 dark:text-white">Console output</h2>
+          </div>
+          <div className="mt-3 min-h-28 rounded-lg bg-slate-950 p-3 font-mono text-sm text-emerald-200">
+            {current.consoleOutput.length ? (
+              current.consoleOutput.map((item, index) => <div key={`${item}-${index}`}>{item}</div>)
+            ) : (
+              <span className="text-slate-500">No output yet</span>
+            )}
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}
diff --git a/src/app/visualizer/graph/[algorithm]/page.jsx b/src/app/visualizer/graph/[algorithm]/page.jsx
new file mode 100644
index 000000000..9deecc5ab
--- /dev/null
+++ b/src/app/visualizer/graph/[algorithm]/page.jsx
@@ -0,0 +1,69 @@
+import GraphVisualizer from "../components/GraphVisualizer";
+import GraphTopicPage from "../components/GraphTopicPage";
+import { graphTopics } from "../data";
+import DiscussionThread from "@/app/components/visualizer/DiscussionThread";
+
+export async function generateStaticParams() {
+  return [
+    { algorithm: "bfs" },
+    { algorithm: "dfs" },
+    { algorithm: "dijkstra" },
+    { algorithm: "a-star" },
+    { algorithm: "bellman-ford" },
+    { algorithm: "floyd-warshall" },
+    { algorithm: "prim" },
+    { algorithm: "kruskal" },
+    { algorithm: "topological-sort" },
+    { algorithm: "kosaraju" },
+    { algorithm: "tarjan" },
+    { algorithm: "ford-fulkerson" },
+    { algorithm: "adjacency-list" },
+    { algorithm: "adjacency-matrix" },
+    { algorithm: "a-star" },
+  ];
+}
+
+export async function generateMetadata({ params }) {
+  const { algorithm } = await params;
+  const topic = graphTopics[algorithm];
+
+  if (!topic) return { title: "Algorithm Not Found" };
+
+  return {
+    title: `${topic.title} | AlgoBuddy Graph Visualizer`,
+    description: topic.description,
+    robots: "index, follow",
+  };
+}
+
+export default async function Page({ params, searchParams }) {
+  const { algorithm } = await params;
+  const { startNode } = (await searchParams) || {};
+  const topic = graphTopics[algorithm];
+
+  if (!topic) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <h1 className="text-2xl font-bold">Algorithm not found</h1>
+      </div>
+    );
+  }
+
+  // Define a wrapper component to ensure props are passed correctly
+  const AnimationWrapper = (props) => (
+    <GraphVisualizer algorithm={algorithm} {...props} />
+  );
+
+  return (
+    <>
+      <GraphTopicPage 
+        topic={topic} 
+        Animation={AnimationWrapper}
+        startNode={startNode}
+      />
+      <div className="bg-white dark:bg-[#1c1d1f] w-full border-t dark:border-gray-800 pt-8 pb-16">
+        <DiscussionThread topicId={algorithm} />
+      </div>
+    </>
+  );
+}
diff --git a/src/app/visualizer/graph/algorithms/quiz/GraphAlgorithmsQuizClient.jsx b/src/app/visualizer/graph/algorithms/quiz/GraphAlgorithmsQuizClient.jsx
new file mode 100644
index 000000000..d136d913f
--- /dev/null
+++ b/src/app/visualizer/graph/algorithms/quiz/GraphAlgorithmsQuizClient.jsx
@@ -0,0 +1,104 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { ArrowRight, Network } from "lucide-react";
+
+const quizzes = [
+  {
+    title: "Dijkstra's Algorithm Quiz",
+    description:
+      "Practice shortest path concepts, priority queue usage, complexity, and applications of Dijkstra's Algorithm.",
+    href: "/visualizer/graph/algorithms/quiz/dijkstra",
+  },
+  {
+    title: "Bellman-Ford Algorithm Quiz",
+    description:
+      "Test your understanding of single-source shortest paths, edge relaxation, V-1 iterations, and negative weight cycle detection.",
+    href: "/visualizer/graph/algorithms/quiz/bellman-ford",
+  },
+  {
+    title: "Floyd-Warshall Algorithm Quiz",
+    description:
+      "Test your understanding of all-pairs shortest paths, dynamic programming, and Floyd-Warshall Algorithm.",
+    href: "/visualizer/graph/algorithms/quiz/floyd-warshall",
+  },
+  {
+    title: "Prim's Algorithm Quiz",
+    description:
+      "Practice Minimum Spanning Tree construction using Prim's Algorithm and greedy strategy.",
+    href: "/visualizer/graph/algorithms/quiz/prim",
+  },
+  {
+    title: "Kruskal's Algorithm Quiz",
+    description:
+      "Learn edge sorting, Union-Find, Minimum Spanning Trees, and Kruskal's Algorithm.",
+    href: "/visualizer/graph/algorithms/quiz/kruskal",
+  },
+  {
+    title: "Topological Sort Quiz",
+    description:
+      "Practice DAG traversal, ordering of vertices, Kahn's Algorithm, and DFS-based Topological Sort.",
+    href: "/visualizer/graph/algorithms/quiz/topological-sort",
+  },
+  {
+    title: "Kosaraju's Algorithm Quiz",
+    description:
+      "Test your understanding of strongly connected components (SCCs), double DFS passes, graph transposition, and complexities.",
+    href: "/visualizer/graph/algorithms/quiz/kosaraju",
+  },
+];
+
+export default function GraphAlgorithmsQuizClient() {
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <div className="mx-auto max-w-7xl px-6 py-12">
+        <motion.div
+          initial={{ opacity: 0, y: 25 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="mb-10"
+        >
+          <h1 className="text-4xl font-bold">
+            📈 Graph Algorithms Quiz
+          </h1>
+
+          <p className="mt-3 text-muted-foreground">
+            Practice Graph Algorithms through interactive quizzes.
+          </p>
+        </motion.div>
+
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.05 }}
+              className="rounded-2xl border border-indigo-500/20 bg-card p-6 shadow-sm transition-all hover:shadow-lg"
+            >
+              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-500/10 text-indigo-600">
+                <Network size={24} />
+              </div>
+
+              <h2 className="text-xl font-semibold">
+                {quiz.title}
+              </h2>
+
+              <p className="mt-2 text-sm text-muted-foreground">
+                {quiz.description}
+              </p>
+
+              <Link href={quiz.href}>
+                <button className="mt-6 flex w-full items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-indigo-700">
+                  <span>Start Quiz</span>
+                  <ArrowRight size={18} />
+                </button>
+              </Link>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/algorithms/quiz/bellman-ford/page.jsx b/src/app/visualizer/graph/algorithms/quiz/bellman-ford/page.jsx
new file mode 100644
index 000000000..d40f95b3a
--- /dev/null
+++ b/src/app/visualizer/graph/algorithms/quiz/bellman-ford/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
diff --git a/src/app/visualizer/graph/algorithms/quiz/bellman-ford/quiz.jsx b/src/app/visualizer/graph/algorithms/quiz/bellman-ford/quiz.jsx
new file mode 100644
index 000000000..01a638239
--- /dev/null
+++ b/src/app/visualizer/graph/algorithms/quiz/bellman-ford/quiz.jsx
@@ -0,0 +1,180 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the primary purpose of the Bellman-Ford Algorithm?",
+    options: [
+      "To find the shortest paths between all pairs of vertices in a graph.",
+      "To find the shortest paths from a single source vertex to all other vertices, allowing negative edge weights.",
+      "To find the Minimum Spanning Tree of a weighted graph.",
+      "To perform topological sorting on directed acyclic graphs."
+    ],
+    correctAnswer: 1,
+    explanation: "The Bellman-Ford algorithm solves the single-source shortest path problem on weighted graphs and is capable of handling negative edge weights."
+  },
+  {
+    question: "Why does the Bellman-Ford algorithm relax all edges exactly V - 1 times (where V is the number of vertices)?",
+    options: [
+      "A simple shortest path in a graph without negative weight cycles contains at most V - 1 edges.",
+      "Each vertex must be relaxed once in each iteration.",
+      "The maximum degree of any vertex in a connected graph is V - 1.",
+      "The algorithm needs to visit every edge in topological order."
+    ],
+    correctAnswer: 0,
+    explanation: "In any graph without negative weight cycles, the shortest path between any two vertices can have at most V - 1 edges. Each relaxation iteration guarantees that paths of length i edges are correctly solved."
+  },
+  {
+    question: "How does the Bellman-Ford algorithm detect a negative weight cycle in a graph?",
+    options: [
+      "By checking if any of the edge weights are negative.",
+      "By verifying if any vertex distance becomes negative during the first V - 1 passes.",
+      "By performing a V-th relaxation pass; if any distance value decreases, a negative weight cycle exists.",
+      "By tracking if a vertex is visited more than once during BFS traversal."
+    ],
+    correctAnswer: 2,
+    explanation: "If we perform a V-th relaxation pass over all edges and find that any vertex distance can still be shortened (dist[u] + weight < dist[v]), a negative weight cycle is present."
+  },
+  {
+    question: "What is the worst-case time complexity of the standard Bellman-Ford algorithm on a graph with V vertices and E edges?",
+    options: [
+      "O(V + E)",
+      "O(E log V)",
+      "O(V * E)",
+      "O(V^3)"
+    ],
+    correctAnswer: 2,
+    explanation: "The algorithm consists of an outer loop running V - 1 times and an inner loop relaxing all E edges, resulting in a worst-case time complexity of O(V * E)."
+  },
+  {
+    question: "What is the auxiliary space complexity of the Bellman-Ford algorithm?",
+    options: [
+      "O(1)",
+      "O(V)",
+      "O(E)",
+      "O(V^2)"
+    ],
+    correctAnswer: 1,
+    explanation: "The algorithm only requires 1D arrays of size V to store the shortest distance estimate and predecessor node for each vertex, yielding O(V) auxiliary space."
+  },
+  {
+    question: "Why can Dijkstra's algorithm fail on a graph with negative edge weights, whereas Bellman-Ford works correctly?",
+    options: [
+      "Dijkstra's greedily marks a node's distance as finalized once visited and does not re-evaluate it if a cheaper path involving a negative edge is found later.",
+      "Dijkstra's algorithm cannot be used on directed graphs.",
+      "Bellman-Ford uses a priority queue that supports negative numbers natively.",
+      "Dijkstra's algorithm has an exponential time complexity when negative edges are present."
+    ],
+    correctAnswer: 0,
+    explanation: "Dijkstra's is a greedy algorithm that finalizes distances upon extraction from the priority queue. It won't update a node's distance if a path containing negative weights is discovered afterwards. Bellman-Ford relaxes all edges repeatedly, ensuring all possible paths are evaluated."
+  },
+  {
+    question: "In which scenario would Dijkstra's algorithm be preferred over the Bellman-Ford algorithm?",
+    options: [
+      "When the graph contains negative weight cycles.",
+      "When all edge weights are guaranteed to be non-negative, as Dijkstra's has a better time complexity (O(E log V) with a Min-Heap).",
+      "When space complexity is the primary constraint of the system.",
+      "When the graph is completely disconnected."
+    ],
+    correctAnswer: 1,
+    explanation: "If there are no negative weights, Dijkstra's algorithm (O(E log V) with Min-Heap) is significantly faster than Bellman-Ford (O(V * E))."
+  },
+  {
+    question: "What does 'relaxing' an edge (u, v) with weight w mean in the Bellman-Ford algorithm?",
+    options: [
+      "Removing the edge if it forms a cycle in the tree.",
+      "Setting dist[u] = dist[v] + w unconditionally.",
+      "Updating dist[v] = min(dist[v], dist[u] + w) if dist[u] is not infinity.",
+      "Converting the weight of the edge to a positive value."
+    ],
+    correctAnswer: 2,
+    explanation: "Relaxing an edge checks if a shorter path to v exists via u. If dist[u] + w < dist[v] (and u is reachable), dist[v] is updated to this new value."
+  },
+  {
+    question: "How does the order in which edges are relaxed in each iteration affect the correctness of the Bellman-Ford algorithm?",
+    options: [
+      "The final distance values will be incorrect if the edges are relaxed in the wrong order.",
+      "It does not affect the correctness of the final distances, but it can affect the number of iterations required to converge.",
+      "It only affects the detection of negative-weight cycles.",
+      "The algorithm will enter an infinite loop if edges are not relaxed in topological order."
+    ],
+    correctAnswer: 1,
+    explanation: "Regardless of edge relaxation order, the algorithm is guaranteed to find the correct shortest paths after V - 1 iterations. However, a favorable order can cause distances to converge in fewer iterations."
+  },
+  {
+    question: "Consider a directed graph with 3 vertices: 0, 1, 2. The edges are: 0 -> 1 (weight 4), 0 -> 2 (weight 5), 1 -> 2 (weight -2). If the source node is 0, what are the final shortest distances to nodes 1 and 2?",
+    options: [
+      "dist[1] = 4, dist[2] = 5",
+      "dist[1] = 4, dist[2] = 2",
+      "dist[1] = 4, dist[2] = 3",
+      "dist[1] = 2, dist[2] = 3"
+    ],
+    correctAnswer: 1,
+    explanation: "Initially dist = [0, inf, inf]. Relaxing edges: 0 -> 1 sets dist[1] = 4. 0 -> 2 sets dist[2] = 5. Relaxing 1 -> 2 sets dist[2] = min(5, 4 - 2) = 2. A second pass yields no further changes. Hence, dist[1] = 4, dist[2] = 2."
+  },
+  {
+    question: "What is a negative weight cycle, and why is it problematic for shortest path algorithms?",
+    options: [
+      "A cycle where all edges are negative, which makes graph representation impossible.",
+      "A cycle where the sum of edge weights is negative, allowing a path to be infinitely shortened by traversing the cycle repeatedly.",
+      "A cycle that contains a single negative edge, causing Dijkstra's algorithm to crash.",
+      "A cycle that isolates vertices from the rest of the graph."
+    ],
+    correctAnswer: 1,
+    explanation: "In a negative weight cycle, the sum of edge weights is less than 0. Repeatedly traversing the cycle reduces the path cost indefinitely, making a minimum shortest path undefined."
+  },
+  {
+    question: "The Shortest Path Faster Algorithm (SPFA) is an optimization of Bellman-Ford. How does it improve performance on average?",
+    options: [
+      "By sorting the edges using a min-heap in each iteration.",
+      "By using a queue to track only those vertices whose tentative distance has changed, avoiding redundant relaxation of all edges.",
+      "By converting the graph into a DAG first.",
+      "By completely skipping negative weight cycle detection."
+    ],
+    correctAnswer: 1,
+    explanation: "SPFA uses a queue to keep track of candidate vertices whose distances have been updated. Only edges outgoing from these active vertices are relaxed, improving average performance to O(E)."
+  },
+  {
+    question: "Why must we verify that dist[u] is not infinity (dist[u] !== Infinity) before relaxing an edge u -> v with weight w?",
+    options: [
+      "Adding a negative weight w to infinity would decrease it (inf - |w| < inf), leading to incorrect updates for unreachable nodes.",
+      "Because performing arithmetic on infinity raises a runtime error.",
+      "Because infinity cannot be represented in standard data structures.",
+      "Because it indicates that node v has already been fully explored."
+    ],
+    correctAnswer: 0,
+    explanation: "If dist[u] is infinity, u is unreachable. If we add a negative weight w to it, the value decreases, which could cause dist[v] to incorrectly update to a value less than infinity, even though v is actually unreachable."
+  },
+  {
+    question: "Can Bellman-Ford be used to find the shortest path in an undirected graph with negative edge weights?",
+    options: [
+      "Yes, by treating every undirected edge as two directed edges with the same negative weight.",
+      "No, because a negative undirected edge acts as a negative cycle of length 2 (u -> v -> u), making shortest paths undefined.",
+      "Yes, but only if the graph has no other cycles.",
+      "Yes, provided the negative weight edge is relaxed first."
+    ],
+    correctAnswer: 1,
+    explanation: "In an undirected graph, a negative edge (u, v) with weight w creates a negative cycle of length 2 (u -> v -> u) with total weight 2w < 0. Thus, shortest paths are undefined."
+  },
+  {
+    question: "If a weighted directed graph is guaranteed to be a Directed Acyclic Graph (DAG) and contains negative edge weights, what is the most efficient way to find single-source shortest paths?",
+    options: [
+      "Use the standard Bellman-Ford algorithm.",
+      "Use Dijkstra's algorithm with a Fibonacci heap.",
+      "Topologically sort the vertices, then relax all outgoing edges in topological order in O(V + E) time.",
+      "Run the Floyd-Warshall algorithm."
+    ],
+    correctAnswer: 2,
+    explanation: "For DAGs, single-source shortest paths can be found in O(V + E) by topologically sorting vertices and relaxing their edges in that order. This works even with negative edge weights and is faster than Bellman-Ford's O(V * E)."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Bellman-Ford Algorithm Quiz"
+      questions={questions}
+    />
+  );
+}
diff --git a/src/app/visualizer/graph/algorithms/quiz/dijkstra/page.jsx b/src/app/visualizer/graph/algorithms/quiz/dijkstra/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/graph/algorithms/quiz/dijkstra/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/algorithms/quiz/dijkstra/quiz.jsx b/src/app/visualizer/graph/algorithms/quiz/dijkstra/quiz.jsx
new file mode 100644
index 000000000..573150b37
--- /dev/null
+++ b/src/app/visualizer/graph/algorithms/quiz/dijkstra/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the primary purpose of Dijkstra's Algorithm?",
+    options: [
+      "Find the Minimum Spanning Tree",
+      "Find the shortest path from a source vertex",
+      "Detect cycles in a graph",
+      "Perform Topological Sorting"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Dijkstra's Algorithm computes the shortest paths from a single source vertex to all other vertices."
+  },
+  {
+    question: "Dijkstra's Algorithm works correctly only when edge weights are:",
+    options: [
+      "Negative",
+      "Positive or Zero",
+      "Random",
+      "Infinite"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Dijkstra's Algorithm assumes all edge weights are non-negative."
+  },
+  {
+    question: "Which data structure is commonly used to optimize Dijkstra's Algorithm?",
+    options: [
+      "Queue",
+      "Priority Queue (Min Heap)",
+      "Stack",
+      "Hash Table"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "A Min Heap efficiently selects the vertex with the smallest tentative distance."
+  },
+  {
+    question: "What is the time complexity of Dijkstra's Algorithm using a Min Heap?",
+    options: [
+      "O(V²)",
+      "O(E log V)",
+      "O(V + E)",
+      "O(log V)"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Using a priority queue, the algorithm runs in O(E log V)."
+  },
+  {
+    question: "Which graph representation is commonly used with Dijkstra's Algorithm?",
+    options: [
+      "Adjacency List",
+      "Adjacency Matrix",
+      "Both",
+      "Binary Tree"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Both representations can be used, although adjacency lists are preferred for sparse graphs."
+  },
+  {
+    question: "What value is initially assigned to the source vertex?",
+    options: [
+      "Infinity",
+      "1",
+      "0",
+      "-1"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The source vertex starts with a distance of 0."
+  },
+  {
+    question: "What value is initially assigned to all other vertices?",
+    options: [
+      "0",
+      "1",
+      "Infinity",
+      "-1"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "All other vertices begin with an infinite distance."
+  },
+  {
+    question: "What operation updates the shortest known distance to neighboring vertices?",
+    options: [
+      "Sorting",
+      "Relaxation",
+      "Traversal",
+      "Backtracking"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Relaxation updates a neighbor's distance if a shorter path is found."
+  },
+  {
+    question: "Which of the following is NOT suitable for Dijkstra's Algorithm?",
+    options: [
+      "Road Networks",
+      "GPS Navigation",
+      "Graphs with Negative Edge Weights",
+      "Network Routing"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Negative edge weights can produce incorrect results in Dijkstra's Algorithm."
+  },
+  {
+    question: "Which real-world application commonly uses Dijkstra's Algorithm?",
+    options: [
+      "GPS Navigation",
+      "Network Routing",
+      "Map Services",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "Dijkstra's Algorithm is widely used in navigation systems and network routing."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Dijkstra's Algorithm Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/algorithms/quiz/floyd-warshall/page.jsx b/src/app/visualizer/graph/algorithms/quiz/floyd-warshall/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/graph/algorithms/quiz/floyd-warshall/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/algorithms/quiz/floyd-warshall/quiz.jsx b/src/app/visualizer/graph/algorithms/quiz/floyd-warshall/quiz.jsx
new file mode 100644
index 000000000..36581e680
--- /dev/null
+++ b/src/app/visualizer/graph/algorithms/quiz/floyd-warshall/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the primary purpose of the Floyd-Warshall Algorithm?",
+    options: [
+      "Find the shortest path from one source vertex",
+      "Find the Minimum Spanning Tree",
+      "Find the shortest paths between all pairs of vertices",
+      "Perform graph traversal"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Floyd-Warshall computes the shortest paths between every pair of vertices in a weighted graph."
+  },
+  {
+    question: "Which algorithmic technique is used in the Floyd-Warshall Algorithm?",
+    options: [
+      "Greedy",
+      "Divide and Conquer",
+      "Dynamic Programming",
+      "Backtracking"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Floyd-Warshall is a classic Dynamic Programming algorithm."
+  },
+  {
+    question: "The Floyd-Warshall Algorithm works on:",
+    options: [
+      "Directed graphs only",
+      "Undirected graphs only",
+      "Both directed and undirected weighted graphs",
+      "Trees only"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "It can be applied to both directed and undirected weighted graphs."
+  },
+  {
+    question: "What is the time complexity of the Floyd-Warshall Algorithm?",
+    options: [
+      "O(V²)",
+      "O(E log V)",
+      "O(V³)",
+      "O(V + E)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The algorithm uses three nested loops, resulting in O(V³) complexity."
+  },
+  {
+    question: "What is the space complexity of the Floyd-Warshall Algorithm?",
+    options: [
+      "O(V)",
+      "O(E)",
+      "O(V²)",
+      "O(log V)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "A V × V distance matrix is maintained throughout the algorithm."
+  },
+  {
+    question: "Which data structure is primarily used in the Floyd-Warshall Algorithm?",
+    options: [
+      "Adjacency Matrix",
+      "Adjacency List",
+      "Priority Queue",
+      "Stack"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "The algorithm updates distances using an adjacency (distance) matrix."
+  },
+  {
+    question: "Can Floyd-Warshall handle negative edge weights?",
+    options: [
+      "No",
+      "Yes, if there are no negative cycles",
+      "Only positive weights",
+      "Only zero-weight edges"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "It supports negative edge weights but not graphs containing negative cycles."
+  },
+  {
+    question: "Which condition is checked while updating distances?",
+    options: [
+      "dist[i][j] > dist[i][k] + dist[k][j]",
+      "dist[i][j] < dist[i][k]",
+      "dist[i][j] == dist[k][j]",
+      "dist[i][k] == 0"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "If going through vertex k provides a shorter path, the distance is updated."
+  },
+  {
+    question: "Which of the following is an application of the Floyd-Warshall Algorithm?",
+    options: [
+      "Network Routing",
+      "Traffic Analysis",
+      "All-Pairs Shortest Path Problems",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "The algorithm is widely used in routing, traffic optimization, and all-pairs shortest path computations."
+  },
+  {
+    question: "How can a negative cycle be detected using Floyd-Warshall?",
+    options: [
+      "A row contains all zeros",
+      "A diagonal element becomes negative",
+      "A column contains infinity",
+      "The graph becomes disconnected"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "If any distance[i][i] becomes negative after execution, a negative cycle exists."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Floyd-Warshall Algorithm Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/algorithms/quiz/kosaraju/page.jsx b/src/app/visualizer/graph/algorithms/quiz/kosaraju/page.jsx
new file mode 100644
index 000000000..d40f95b3a
--- /dev/null
+++ b/src/app/visualizer/graph/algorithms/quiz/kosaraju/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
diff --git a/src/app/visualizer/graph/algorithms/quiz/kosaraju/quiz.jsx b/src/app/visualizer/graph/algorithms/quiz/kosaraju/quiz.jsx
new file mode 100644
index 000000000..9553c7b05
--- /dev/null
+++ b/src/app/visualizer/graph/algorithms/quiz/kosaraju/quiz.jsx
@@ -0,0 +1,180 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is a Strongly Connected Component (SCC) in a directed graph?",
+    options: [
+      "A subset of vertices where there is a path from any vertex to any other vertex in that subset.",
+      "A subset of vertices where all edges have positive weights.",
+      "A subset of vertices that forms a tree.",
+      "A subset of vertices where every vertex has the same degree."
+    ],
+    correctAnswer: 0,
+    explanation: "An SCC is a maximal subgraph of a directed graph where every vertex is reachable from every other vertex in the same subgraph."
+  },
+  {
+    question: "For which type of graphs is the concept of Strongly Connected Components (SCCs) defined?",
+    options: [
+      "Undirected graphs only",
+      "Directed graphs only",
+      "Both directed and undirected graphs",
+      "Trees only"
+    ],
+    correctAnswer: 1,
+    explanation: "SCCs are defined for directed graphs. In undirected graphs, components are simply called 'Connected Components' because connectivity is naturally symmetric."
+  },
+  {
+    question: "What is the primary purpose of Kosaraju's Algorithm?",
+    options: [
+      "To find the shortest path from a single source node.",
+      "To construct a Minimum Spanning Tree of a weighted graph.",
+      "To identify all Strongly Connected Components (SCCs) in a directed graph.",
+      "To find a topological ordering of vertices in a DAG."
+    ],
+    correctAnswer: 2,
+    explanation: "Kosaraju's algorithm is specifically designed to find all strongly connected components in a directed graph."
+  },
+  {
+    question: "Which graph traversal algorithm is used as the fundamental building block in Kosaraju's Algorithm?",
+    options: [
+      "Breadth-First Search (BFS)",
+      "Depth-First Search (DFS)",
+      "Dijkstra's Algorithm",
+      "Kruskal's Algorithm"
+    ],
+    correctAnswer: 1,
+    explanation: "Kosaraju's algorithm relies on two passes of Depth-First Search (DFS)."
+  },
+  {
+    question: "In the first pass of Kosaraju's Algorithm, how is the stack populated?",
+    options: [
+      "A node is pushed to the stack when DFS first visits (discovers) it.",
+      "Nodes are pushed to the stack in alphabetical order.",
+      "A node is pushed to the stack when DFS finishes exploring all its neighbors (i.e., at its post-visit step).",
+      "Only leaves are pushed to the stack."
+    ],
+    correctAnswer: 2,
+    explanation: "During the first DFS pass, vertices are pushed onto a stack when they finish exploration (post-visit order). This places vertices with later finishing times higher up in the stack."
+  },
+  {
+    question: "What does 'transposing' a graph mean in Kosaraju's Algorithm?",
+    options: [
+      "Deleting all edges that form cycles.",
+      "Reversing the direction of all directed edges in the graph.",
+      "Converting the adjacency list into an adjacency matrix.",
+      "Removing vertices that have no incoming edges."
+    ],
+    correctAnswer: 1,
+    explanation: "Transposing a graph (commonly denoted as G^T) involves reversing the direction of every edge. If an edge goes from u -> v in G, it goes from v -> u in G^T."
+  },
+  {
+    question: "In the second pass of Kosaraju's Algorithm, from where are the starting vertices chosen?",
+    options: [
+      "By popping nodes from the stack populated in the first pass.",
+      "In increasing order of their numerical ID.",
+      "By choosing nodes with the highest out-degree first.",
+      "Arbitrarily from any unvisited node in the graph."
+    ],
+    correctAnswer: 0,
+    explanation: "The second DFS pass runs on the transposed graph, picking starting nodes by popping them one by one from the stack created during the first pass. This ensures we start DFS on the sink components of the condensation graph first."
+  },
+  {
+    question: "What is the key mathematical reason why reversing edges is necessary in Kosaraju's Algorithm?",
+    options: [
+      "Reversing edges turns the graph into an undirected graph, simplifying connectivity check.",
+      "It keeps the Strongly Connected Components intact but reverses the topological order of components, preventing DFS from leaking between separate components.",
+      "It reduces the time complexity of DFS from quadratic to linear.",
+      "It removes all cycles from the graph."
+    ],
+    correctAnswer: 1,
+    explanation: "Reversing the edges does not change the SCCs (if u and v are mutually reachable, they remain mutually reachable when all edges are reversed). However, it reverses the connectivity between different SCCs. This prevents DFS from leaking from one component to another during the second pass."
+  },
+  {
+    question: "What is the time complexity of Kosaraju's Algorithm for a graph with V vertices and E edges?",
+    options: [
+      "O(V * E)",
+      "O(V + E)",
+      "O(V log V + E)",
+      "O(V^2)"
+    ],
+    correctAnswer: 1,
+    explanation: "The algorithm performs two DFS runs and a graph transposition, all of which run in linear time. Thus, the total time complexity is O(V + E) when using an adjacency list."
+  },
+  {
+    question: "What is the space complexity of Kosaraju's Algorithm?",
+    options: [
+      "O(V)",
+      "O(E)",
+      "O(V + E)",
+      "O(V^2)"
+    ],
+    correctAnswer: 2,
+    explanation: "We need to store the transposed graph (which takes O(V + E) space using adjacency lists), the stack (O(V)), and the visited arrays (O(V)). Thus, the space complexity is O(V + E)."
+  },
+  {
+    question: "How does Kosaraju's Algorithm compare to Tarjan's Algorithm for finding SCCs?",
+    options: [
+      "Kosaraju is asymptotically faster than Tarjan's.",
+      "Tarjan's finds SCCs in a single DFS pass using a stack and tracking low-link values, whereas Kosaraju requires two passes and graph transposition. Both have O(V+E) time complexity.",
+      "Kosaraju can handle negative weight edges, but Tarjan's cannot.",
+      "Tarjan's only works on Directed Acyclic Graphs (DAGs)."
+    ],
+    correctAnswer: 1,
+    explanation: "Both algorithms have O(V + E) time complexity. However, Tarjan's algorithm is often preferred in practice because it performs only one DFS pass and does not require transposing the graph, making it slightly faster and more memory-efficient."
+  },
+  {
+    question: "Consider a directed graph with vertices: 0, 1, 2. The edges are: 0 -> 1, 1 -> 2, and 2 -> 0. How many Strongly Connected Components (SCCs) are in this graph?",
+    options: [
+      "1",
+      "2",
+      "3",
+      "0"
+    ],
+    correctAnswer: 0,
+    explanation: "Since there is a cycle containing all three nodes (0 -> 1 -> 2 -> 0), every node is reachable from every other node. Thus, the entire graph is a single Strongly Connected Component."
+  },
+  {
+    question: "Consider a directed graph with 4 vertices: 0, 1, 2, 3. Edges: 0 -> 1, 1 -> 2, 2 -> 0, and 2 -> 3. How many Strongly Connected Components (SCCs) are in this graph?",
+    options: [
+      "1",
+      "2",
+      "3",
+      "4"
+    ],
+    correctAnswer: 1,
+    explanation: "Vertices 0, 1, 2 form a mutual cycle and are strongly connected. Node 3 has an incoming edge from 2 but cannot reach any of the other nodes. Thus, the SCCs are {0, 1, 2} and {3}, making a total of 2 SCCs."
+  },
+  {
+    question: "What would happen if, in the second pass of Kosaraju's Algorithm, we ran DFS on the original graph G (instead of the transposed graph G^T) using the stack ordering?",
+    options: [
+      "The algorithm would still correctly identify all SCCs.",
+      "The DFS would leak across components, potentially group multiple distinct SCCs into a single component, and yield incorrect results.",
+      "The algorithm would go into an infinite loop.",
+      "The time complexity would increase to O(V * E)."
+    ],
+    correctAnswer: 1,
+    explanation: "If we don't reverse the edges, DFS can travel from a source component to a sink component, causing different SCCs to be merged incorrectly during the traversal. Reversing edges locks the traversal within each component."
+  },
+  {
+    question: "If Kosaraju's Algorithm is run on a Directed Acyclic Graph (DAG) with V vertices, what will be the output?",
+    options: [
+      "A single Strongly Connected Component containing all V vertices.",
+      "No Strongly Connected Components.",
+      "V individual Strongly Connected Components, each containing exactly one vertex.",
+      "The algorithm will fail or throw an error."
+    ],
+    correctAnswer: 2,
+    explanation: "A DAG has no directed cycles. Since mutual reachability is impossible between distinct vertices in a DAG, each vertex is only mutually reachable with itself. Thus, the algorithm will output V individual SCCs, each containing one vertex."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Kosaraju's Algorithm Quiz"
+      questions={questions}
+    />
+  );
+}
diff --git a/src/app/visualizer/graph/algorithms/quiz/kruskal/page.jsx b/src/app/visualizer/graph/algorithms/quiz/kruskal/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/graph/algorithms/quiz/kruskal/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/algorithms/quiz/kruskal/quiz.jsx b/src/app/visualizer/graph/algorithms/quiz/kruskal/quiz.jsx
new file mode 100644
index 000000000..021cdbeac
--- /dev/null
+++ b/src/app/visualizer/graph/algorithms/quiz/kruskal/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the primary purpose of Kruskal's Algorithm?",
+    options: [
+      "Find the shortest path",
+      "Find the Minimum Spanning Tree (MST)",
+      "Perform graph traversal",
+      "Detect cycles"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Kruskal's Algorithm constructs a Minimum Spanning Tree by selecting the smallest edges without forming cycles."
+  },
+  {
+    question: "Kruskal's Algorithm follows which algorithmic strategy?",
+    options: [
+      "Dynamic Programming",
+      "Greedy",
+      "Backtracking",
+      "Divide and Conquer"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Kruskal's Algorithm is a greedy algorithm because it always chooses the smallest available edge."
+  },
+  {
+    question: "Which data structure is commonly used to detect cycles in Kruskal's Algorithm?",
+    options: [
+      "Queue",
+      "Stack",
+      "Disjoint Set (Union-Find)",
+      "Priority Queue"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Union-Find (Disjoint Set) efficiently detects whether adding an edge would create a cycle."
+  },
+  {
+    question: "What is the first step in Kruskal's Algorithm?",
+    options: [
+      "Choose any vertex",
+      "Sort all edges by weight",
+      "Traverse the graph",
+      "Build a heap"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The algorithm begins by sorting all edges in non-decreasing order of weight."
+  },
+  {
+    question: "Kruskal's Algorithm is mainly applied to:",
+    options: [
+      "Directed graphs",
+      "Undirected weighted graphs",
+      "Binary trees",
+      "Directed acyclic graphs"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Kruskal's Algorithm is designed for connected, undirected weighted graphs."
+  },
+  {
+    question: "How many edges are present in the Minimum Spanning Tree of a graph with V vertices?",
+    options: [
+      "V",
+      "V + 1",
+      "V - 1",
+      "E"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "A Minimum Spanning Tree always contains exactly V − 1 edges."
+  },
+  {
+    question: "What happens if adding an edge creates a cycle?",
+    options: [
+      "The edge is included",
+      "The edge is ignored",
+      "The graph is restarted",
+      "The graph becomes directed"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Edges that create cycles are skipped to maintain the spanning tree property."
+  },
+  {
+    question: "What is the overall time complexity of Kruskal's Algorithm?",
+    options: [
+      "O(V²)",
+      "O(E log E)",
+      "O(V + E)",
+      "O(log V)"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Sorting the edges dominates the running time, resulting in O(E log E)."
+  },
+  {
+    question: "Which of the following is an application of Kruskal's Algorithm?",
+    options: [
+      "Road Network Design",
+      "Network Cabling",
+      "Electrical Grid Construction",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "Kruskal's Algorithm is widely used for designing cost-efficient networks."
+  },
+  {
+    question: "Kruskal's Algorithm stops when:",
+    options: [
+      "All edges are processed",
+      "V − 1 edges have been added to the MST",
+      "The graph becomes disconnected",
+      "The priority queue is empty"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The algorithm terminates once the Minimum Spanning Tree contains V − 1 edges."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Kruskal's Algorithm Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/algorithms/quiz/page.jsx b/src/app/visualizer/graph/algorithms/quiz/page.jsx
new file mode 100644
index 000000000..2f3b85165
--- /dev/null
+++ b/src/app/visualizer/graph/algorithms/quiz/page.jsx
@@ -0,0 +1,5 @@
+import GraphAlgorithmsQuizClient from "./GraphAlgorithmsQuizClient";
+
+export default function Page() {
+  return <GraphAlgorithmsQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/algorithms/quiz/prim/page.jsx b/src/app/visualizer/graph/algorithms/quiz/prim/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/graph/algorithms/quiz/prim/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/algorithms/quiz/prim/quiz.jsx b/src/app/visualizer/graph/algorithms/quiz/prim/quiz.jsx
new file mode 100644
index 000000000..1b4491fea
--- /dev/null
+++ b/src/app/visualizer/graph/algorithms/quiz/prim/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the primary purpose of Prim's Algorithm?",
+    options: [
+      "Find the shortest path",
+      "Find the Minimum Spanning Tree (MST)",
+      "Perform graph traversal",
+      "Detect cycles"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Prim's Algorithm constructs a Minimum Spanning Tree by repeatedly adding the minimum-weight edge."
+  },
+  {
+    question: "Prim's Algorithm is based on which algorithmic strategy?",
+    options: [
+      "Dynamic Programming",
+      "Greedy",
+      "Backtracking",
+      "Divide and Conquer"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Prim's Algorithm is a greedy algorithm because it always chooses the smallest available edge."
+  },
+  {
+    question: "Prim's Algorithm works on:",
+    options: [
+      "Directed graphs",
+      "Undirected weighted graphs",
+      "Directed acyclic graphs",
+      "Binary trees"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Prim's Algorithm is designed for connected, undirected weighted graphs."
+  },
+  {
+    question: "Which data structure is commonly used to optimize Prim's Algorithm?",
+    options: [
+      "Stack",
+      "Queue",
+      "Priority Queue (Min Heap)",
+      "Hash Table"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "A Min Heap efficiently selects the minimum-weight edge."
+  },
+  {
+    question: "What is the time complexity of Prim's Algorithm using a Min Heap and adjacency list?",
+    options: [
+      "O(V²)",
+      "O(E log V)",
+      "O(V + E)",
+      "O(log V)"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Using a Min Heap and adjacency list gives a complexity of O(E log V)."
+  },
+  {
+    question: "What does a Minimum Spanning Tree contain?",
+    options: [
+      "All vertices with minimum total edge weight",
+      "Only shortest paths",
+      "Cycles",
+      "Only directed edges"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "An MST connects all vertices with the minimum possible total edge weight."
+  },
+  {
+    question: "How many edges are present in the MST of a graph with V vertices?",
+    options: [
+      "V",
+      "V + 1",
+      "V - 1",
+      "E"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Every Minimum Spanning Tree contains exactly V − 1 edges."
+  },
+  {
+    question: "Prim's Algorithm starts from:",
+    options: [
+      "The largest edge",
+      "Any arbitrary vertex",
+      "The destination vertex",
+      "The middle vertex"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Prim's Algorithm can start from any vertex in the graph."
+  },
+  {
+    question: "Which of the following is NOT an application of Prim's Algorithm?",
+    options: [
+      "Network Design",
+      "Road Construction",
+      "Electrical Grid Design",
+      "Shortest Path with Negative Weights"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "Prim's Algorithm finds an MST, not shortest paths."
+  },
+  {
+    question: "Prim's Algorithm stops when:",
+    options: [
+      "All edges are visited",
+      "The queue becomes empty",
+      "All vertices are included in the MST",
+      "A cycle is detected"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The algorithm terminates after all vertices have been added to the Minimum Spanning Tree."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Prim's Algorithm Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/algorithms/quiz/topological-sort/page.jsx b/src/app/visualizer/graph/algorithms/quiz/topological-sort/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/graph/algorithms/quiz/topological-sort/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/algorithms/quiz/topological-sort/quiz.jsx b/src/app/visualizer/graph/algorithms/quiz/topological-sort/quiz.jsx
new file mode 100644
index 000000000..1b655cf60
--- /dev/null
+++ b/src/app/visualizer/graph/algorithms/quiz/topological-sort/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the primary purpose of Topological Sort?",
+    options: [
+      "Find the shortest path",
+      "Arrange vertices in a linear order based on dependencies",
+      "Find the Minimum Spanning Tree",
+      "Detect cycles"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Topological Sort produces a linear ordering of vertices such that for every directed edge (u → v), u appears before v."
+  },
+  {
+    question: "Topological Sort can only be performed on:",
+    options: [
+      "Undirected Graphs",
+      "Directed Acyclic Graphs (DAGs)",
+      "Weighted Graphs",
+      "Complete Graphs"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Topological Sorting is defined only for Directed Acyclic Graphs (DAGs)."
+  },
+  {
+    question: "Which algorithm can be used to perform Topological Sort?",
+    options: [
+      "Kahn's Algorithm",
+      "DFS-based Algorithm",
+      "Both A and B",
+      "Prim's Algorithm"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Topological Sort can be implemented using Kahn's Algorithm (BFS) or DFS."
+  },
+  {
+    question: "Which data structure is mainly used in Kahn's Algorithm?",
+    options: [
+      "Stack",
+      "Queue",
+      "Priority Queue",
+      "Heap"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Kahn's Algorithm uses a queue to process vertices with zero in-degree."
+  },
+  {
+    question: "What does the in-degree of a vertex represent?",
+    options: [
+      "Number of outgoing edges",
+      "Number of incoming edges",
+      "Total number of edges",
+      "Number of neighboring vertices"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The in-degree of a vertex is the number of incoming edges."
+  },
+  {
+    question: "What is the time complexity of Topological Sort using an adjacency list?",
+    options: [
+      "O(V²)",
+      "O(E log V)",
+      "O(V + E)",
+      "O(log V)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Each vertex and edge is processed exactly once."
+  },
+  {
+    question: "If a graph contains a cycle, Topological Sort:",
+    options: [
+      "Still works correctly",
+      "Produces duplicate vertices",
+      "Is not possible",
+      "Removes the cycle automatically"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Topological ordering exists only for Directed Acyclic Graphs."
+  },
+  {
+    question: "Which of the following is a common application of Topological Sort?",
+    options: [
+      "Course Scheduling",
+      "Task Scheduling",
+      "Dependency Resolution",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "Topological Sort is widely used wherever dependency ordering is required."
+  },
+  {
+    question: "DFS-based Topological Sort stores vertices in:",
+    options: [
+      "Queue",
+      "Heap",
+      "Stack",
+      "Hash Table"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Vertices are pushed onto a stack after all their descendants have been visited."
+  },
+  {
+    question: "Which graph type always has at least one valid Topological Ordering?",
+    options: [
+      "Undirected Graph",
+      "Directed Cyclic Graph",
+      "Directed Acyclic Graph (DAG)",
+      "Complete Graph"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Every DAG has at least one valid topological ordering."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Topological Sort Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/bellman-ford/page.jsx b/src/app/visualizer/graph/bellman-ford/page.jsx
new file mode 100644
index 000000000..3b532b23d
--- /dev/null
+++ b/src/app/visualizer/graph/bellman-ford/page.jsx
@@ -0,0 +1,177 @@
+"use client";
+import React, { useState } from "react";
+import Link from "next/link";
+
+const BellmanFordVisualizer = () => {
+  const [source, setSource] = useState(0);
+  const [steps, setSteps] = useState([]);
+  const [currentStep, setCurrentStep] = useState(-1);
+  const [hasNegativeCycle, setHasNegativeCycle] = useState(false);
+
+  const nodes = 5;
+  const edges = [
+    { u: 0, v: 1, w: -1 },
+    { u: 0, v: 2, w: 4 },
+    { u: 1, v: 2, w: 3 },
+    { u: 1, v: 3, w: 2 },
+    { u: 1, v: 4, w: 2 },
+    { u: 3, v: 2, w: 5 },
+    { u: 3, v: 1, w: 1 },
+    { u: 4, v: 3, w: -3 },
+  ];
+
+  const positions = [
+    { x: 100, y: 180 },
+    { x: 250, y: 80 },
+    { x: 400, y: 180 },
+    { x: 350, y: 300 },
+    { x: 200, y: 300 },
+  ];
+
+  const bellmanFord = () => {
+    const dist = new Array(nodes).fill(Infinity);
+    dist[source] = 0;
+    const allSteps = [{ dist: [...dist], edge: null }];
+
+    for (let i = 0; i < nodes - 1; i++) {
+      for (let edge of edges) {
+        if (dist[edge.u] !== Infinity && dist[edge.u] + edge.w < dist[edge.v]) {
+          dist[edge.v] = dist[edge.u] + edge.w;
+          allSteps.push({ dist: [...dist], edge });
+        }
+      }
+    }
+
+    let negativeCycle = false;
+    for (let edge of edges) {
+      if (dist[edge.u] !== Infinity && dist[edge.u] + edge.w < dist[edge.v]) {
+        negativeCycle = true;
+        break;
+      }
+    }
+
+    setHasNegativeCycle(negativeCycle);
+    setSteps(allSteps);
+    setCurrentStep(0);
+  };
+
+  const currentDist = currentStep >= 0 ? steps[currentStep]?.dist : null;
+  const currentEdge = currentStep >= 0 ? steps[currentStep]?.edge : null;
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto">
+      <h1 className="text-3xl font-bold mb-2">Bellman-Ford Algorithm</h1>
+      <p className="text-gray-500 mb-6">Shortest Path with Negative Edge Weights</p>
+
+      <div className="flex items-center gap-4 mb-6">
+        <label className="font-medium">Source Node:</label>
+        <select
+          value={source}
+          onChange={(e) => setSource(Number(e.target.value))}
+          className="border rounded-lg px-3 py-1"
+        >
+          {Array.from({ length: nodes }, (_, i) => (
+            <option key={i} value={i}>{i}</option>
+          ))}
+        </select>
+      </div>
+
+      <div className="bg-gray-50 rounded-xl p-4 mb-6 border">
+        <svg width="500" height="380">
+          <defs>
+            <marker id="arrow" markerWidth="6" markerHeight="6"
+              refX="6" refY="3" orient="auto">
+              <path d="M0,0 L0,6 L6,3 z" fill="#888" />
+            </marker>
+            <marker id="arrow-active" markerWidth="6" markerHeight="6"
+              refX="6" refY="3" orient="auto">
+              <path d="M0,0 L0,6 L6,3 z" fill="#7c3aed" />
+            </marker>
+          </defs>
+
+          {edges.map((edge, i) => {
+            const isActive = currentEdge &&
+              currentEdge.u === edge.u && currentEdge.v === edge.v;
+            const mx = (positions[edge.u].x + positions[edge.v].x) / 2;
+            const my = (positions[edge.u].y + positions[edge.v].y) / 2;
+            return (
+              <g key={i}>
+                <line
+                  x1={positions[edge.u].x} y1={positions[edge.u].y}
+                  x2={positions[edge.v].x} y2={positions[edge.v].y}
+                  stroke={isActive ? "#7c3aed" : "#888"}
+                  strokeWidth={isActive ? 3 : 1.5}
+                  markerEnd={isActive ? "url(#arrow-active)" : "url(#arrow)"}
+                />
+                <text x={mx} y={my - 6} textAnchor="middle"
+                  fontSize="12" fill={isActive ? "#7c3aed" : "#555"}
+                  fontWeight={isActive ? "bold" : "normal"}>
+                  {edge.w}
+                </text>
+              </g>
+            );
+          })}
+
+          {positions.map((pos, i) => (
+            <g key={i}>
+              <circle cx={pos.x} cy={pos.y} r="26"
+                fill={i === source ? "#ede9fe" : "#f3f4f6"}
+                stroke={i === source ? "#7c3aed" : "#9ca3af"}
+                strokeWidth="2" />
+              <text x={pos.x} y={pos.y - 4} textAnchor="middle"
+                fontSize="13" fontWeight="bold" fill="#1f2937">{i}</text>
+              <text x={pos.x} y={pos.y + 12} textAnchor="middle"
+                fontSize="11" fill="#6d28d9">
+                {currentDist ? (currentDist[i] === Infinity ? "∞" : currentDist[i]) : "∞"}
+              </text>
+            </g>
+          ))}
+        </svg>
+      </div>
+
+      {hasNegativeCycle && (
+        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mb-4">
+          ⚠️ Negative Cycle Detected!
+        </div>
+      )}
+
+      <div className="flex gap-3 mb-6">
+        <button onClick={bellmanFord}
+          className="bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700">
+          Run Bellman-Ford
+        </button>
+        {currentStep >= 0 && currentStep < steps.length - 1 && (
+          <button onClick={() => setCurrentStep(s => s + 1)}
+            className="bg-teal-600 text-white px-6 py-2 rounded-lg hover:bg-teal-700">
+            Next Step
+          </button>
+        )}
+        <button onClick={() => { setSteps([]); setCurrentStep(-1); setHasNegativeCycle(false); }}
+          className="bg-gray-400 text-white px-6 py-2 rounded-lg hover:bg-gray-500">
+          Reset
+        </button>
+        <Link href="/visualizer/graph/algorithms/quiz/bellman-ford">
+          <button className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg font-medium ml-auto">
+            Take Quiz
+          </button>
+        </Link>
+      </div>
+
+      {currentDist && (
+        <div className="bg-white border rounded-xl p-4">
+          <h2 className="font-semibold text-lg mb-3">Distance Table</h2>
+          <div className="flex flex-wrap gap-3">
+            {currentDist.map((d, i) => (
+              <div key={i} className="bg-purple-50 border border-purple-200 px-4 py-2 rounded-lg text-center">
+                <div className="text-xs text-gray-500">Node {i}</div>
+                <div className="font-bold text-purple-700">{d === Infinity ? "∞" : d}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BellmanFordVisualizer;
\ No newline at end of file
diff --git a/src/app/visualizer/graph/components/GraphAnimation.jsx b/src/app/visualizer/graph/components/GraphAnimation.jsx
new file mode 100644
index 000000000..d0b115205
--- /dev/null
+++ b/src/app/visualizer/graph/components/GraphAnimation.jsx
@@ -0,0 +1,721 @@
+"use client";
+
+import { bellmanFordGenerator } from "@/features/algorithms/graph/bellmanFordLogic";
+import { useMemo, useRef, useState } from "react";
+import { Play, RotateCcw, ChevronLeft, ChevronRight } from "lucide-react";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { VisualizerCanvas } from "@/app/visualizer/components/VisualizerCanvas";
+import { aStarGenerator } from "@/features/algorithms/graph/aStarLogic";
+
+const nodes = [
+  { id: "A", x: 18, y: 32 },
+  { id: "B", x: 42, y: 16 },
+  { id: "C", x: 70, y: 28 },
+  { id: "D", x: 28, y: 72 },
+  { id: "E", x: 62, y: 70 },
+];
+
+const edges = [
+  { from: "A", to: "B", weight: 2 },
+  { from: "A", to: "D", weight: 6 },
+  { from: "B", to: "C", weight: 3 },
+  { from: "B", to: "D", weight: 8 },
+  { from: "B", to: "E", weight: 5 },
+  { from: "C", to: "E", weight: 7 },
+  { from: "D", to: "E", weight: 4 },
+];
+
+const sequences = {
+  matrix: ["A", "B", "D", "E"],
+  list: ["A", "B", "C", "E"],
+  bfs: ["A", "B", "D", "C", "E"],
+  dfs: ["A", "B", "C", "E", "D"],
+  dijkstra: ["A", "B", "C", "E", "D"],
+  prim: ["A", "B", "C", "E", "D"],
+  kruskal: ["A-B", "B-C", "D-E", "B-E"],
+  topological: ["A", "B", "D", "C", "E"],
+  "bellman-ford": ["A", "B", "C", "E", "D"],
+};
+
+// Algorithms that only make sense on directed graphs
+const DIRECTED_ONLY = ["topological", "dijkstra", "bellman-ford", "a-star", "ford-fulkerson"];
+
+// Algorithms that only make sense on undirected graphs
+const UNDIRECTED_ONLY = ["prim", "kruskal"];
+
+// Algorithms that require weighted edges
+const WEIGHTED_ONLY = ["dijkstra", "prim", "kruskal", "bellman-ford", "a-star", "ford-fulkerson"];
+
+function getNode(id) {
+  return nodes.find((node) => node.id === id);
+}
+
+function edgeId(edge) {
+  return `${edge.from}-${edge.to}`;
+}
+
+function arrowEndpoint(x1, y1, x2, y2, r = 6) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+  return {
+    x: x2 - (dx / dist) * (r + 1.5),
+    y: y2 - (dy / dist) * (r + 1.5),
+  };
+}
+
+export default function GraphAnimation({ type = "bfs", title = "Graph" }) {
+  const [step, setStep] = useState(0);
+  const svgRef = useRef(null);
+
+  // A* goal node selector
+  const [goalNode, setGoalNode] = useState("E");
+  const [startNodeAStar, setStartNodeAStar] = useState("A");
+
+  // Directed toggle
+  const canToggleDirected = !DIRECTED_ONLY.includes(type) && !UNDIRECTED_ONLY.includes(type);
+  const forceDirected = DIRECTED_ONLY.includes(type);
+  const [isDirected, setIsDirected] = useState(forceDirected);
+  useVisualizerReset(() => {
+    setStep(0);
+  });
+
+  // Weighted toggle — auto-lock ON for weight-dependent algorithms
+  const forceWeighted = WEIGHTED_ONLY.includes(type);
+  const canToggleWeighted = !WEIGHTED_ONLY.includes(type);
+  const [isWeighted, setIsWeighted] = useState(forceWeighted);
+
+  // A* frames computed from live start/goal selection
+  const aStarData = useMemo(() => {
+    if (type !== "a-star") return [];
+    return Array.from(aStarGenerator(nodes, edges, startNodeAStar, goalNode));
+  }, [type, startNodeAStar, goalNode]);
+
+  const currentAStarFrame = type === "a-star"
+    ? aStarData[Math.min(step, aStarData.length - 1)] || null
+    : null;
+
+  const sequence = sequences[type] || sequences.bfs;
+  const aStarSequenceLength = aStarData.length || 1;
+  const effectiveLength = type === "a-star" ? aStarSequenceLength : (type === "bellman-ford" ? null : sequence.length);
+
+  const current = type === "a-star"
+    ? (currentAStarFrame?.current || startNodeAStar)
+    : sequence[Math.min(step, sequence.length - 1)];
+
+  const activeNodes = useMemo(() => {
+    if (type === "kruskal") {
+      return new Set(sequence.slice(0, step + 1).flatMap((item) => item.split("-")));
+    }
+    return new Set(sequence.slice(0, step + 1));
+  }, [sequence, step, type]);
+
+  const activeEdges = useMemo(() => {
+    if (type === "kruskal") return new Set(sequence.slice(0, step + 1));
+    const selected = new Set();
+    const active = sequence.slice(0, step + 1);
+    for (let i = 1; i < active.length; i += 1) {
+      const prev = active[i - 1];
+      const next = active[i];
+      const direct = `${prev}-${next}`;
+      const reverse = `${next}-${prev}`;
+      const found = isDirected
+        ? edges.find((edge) => edgeId(edge) === direct)
+        : edges.find((edge) => edgeId(edge) === direct || edgeId(edge) === reverse);
+      if (found) selected.add(edgeId(found));
+    }
+    return selected;
+  }, [sequence, step, type, isDirected]);
+
+
+  // Bellman-Ford: compute frames when type === "bellman-ford"
+  const bellmanFrames = useMemo(() => {
+    if (type !== "bellman-ford") return [];
+    return Array.from(bellmanFordGenerator(nodes, edges, "A"));
+  }, [type]);
+
+  const bellmanFrame = type === "bellman-ford"
+    ? bellmanFrames[Math.min(step, bellmanFrames.length - 1)]
+    : null;
+
+  const totalSteps = type === "bellman-ford"
+    ? bellmanFrames.length
+    : (effectiveLength ?? sequence.length);
+
+  const advance = () => setStep((value) => Math.min(value + 1, totalSteps - 1));
+  const stepBack = () => setStep((value) => Math.max(0, value - 1));
+  const reset = () => setStep(0);
+
+  const handleToggleDirected = () => {
+    setIsDirected((d) => !d);
+    reset();
+  };
+
+  const handleToggleWeighted = () => {
+    setIsWeighted((w) => !w);
+    reset();
+  };
+
+  return (
+    <div className="mx-auto my-10 max-w-4xl rounded-2xl border border-surface-200 bg-white p-5 shadow-card dark:border-surface-800 dark:bg-surface-900">
+      <div className="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <p className="text-sm font-semibold uppercase tracking-wide text-primary">
+            Interactive graph view
+          </p>
+          <h2 className="text-2xl font-bold tracking-tight text-surface-900 dark:text-white">
+            {title}
+          </h2>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2">
+          {/* A* — Start and Goal node selectors */}
+          {type === "a-star" && (
+            <>
+              <div className="flex items-center gap-1">
+                <label className="text-xs font-medium text-surface-600 dark:text-surface-400">Start:</label>
+                <select
+                  value={startNodeAStar}
+                  onChange={(e) => { setStartNodeAStar(e.target.value); reset(); }}
+                  className="rounded-lg border border-green-400 bg-green-50 px-2 py-1 text-xs font-semibold text-green-700 dark:bg-green-900/20 dark:text-green-400"
+                >
+                  {nodes.filter((n) => n.id !== goalNode).map((n) => (
+                    <option key={n.id} value={n.id}>{n.id}</option>
+                  ))}
+                </select>
+              </div>
+              <div className="flex items-center gap-1">
+                <label className="text-xs font-medium text-surface-600 dark:text-surface-400">Goal:</label>
+                <select
+                  value={goalNode}
+                  onChange={(e) => { setGoalNode(e.target.value); reset(); }}
+                  className="rounded-lg border border-red-400 bg-red-50 px-2 py-1 text-xs font-semibold text-red-700 dark:bg-red-900/20 dark:text-red-400"
+                >
+                  {nodes.filter((n) => n.id !== startNodeAStar).map((n) => (
+                    <option key={n.id} value={n.id}>{n.id}</option>
+                  ))}
+                </select>
+              </div>
+            </>
+          )}
+          {/* Directed / Undirected toggle — hidden for prim/kruskal */}
+          {!UNDIRECTED_ONLY.includes(type) && (
+            <button
+              type="button"
+              onClick={canToggleDirected ? handleToggleDirected : undefined}
+              title={
+                forceDirected
+                  ? "This algorithm requires a directed graph"
+                  : "Toggle directed / undirected"
+              }
+              className={`btn-base border text-sm transition-colors ${
+                isDirected
+                  ? "border-primary bg-primary/10 text-primary"
+                  : "border-surface-300 text-surface-600 hover:border-primary hover:text-primary dark:border-surface-700 dark:text-surface-300"
+              } ${!canToggleDirected ? "cursor-default opacity-70" : ""}`}
+            >
+              {isDirected ? "Directed" : "Undirected"}
+            </button>
+          )}
+
+          {/* Weighted / Unweighted toggle — locked ON for dijkstra/prim/kruskal */}
+          <button
+            type="button"
+            onClick={canToggleWeighted ? handleToggleWeighted : undefined}
+            title={
+              forceWeighted
+                ? "This algorithm requires a weighted graph"
+                : "Toggle weighted / unweighted"
+            }
+            className={`btn-base border text-sm transition-colors ${
+              isWeighted
+                ? "border-yellow-500 bg-yellow-500/10 text-yellow-600 dark:text-yellow-400"
+                : "border-surface-300 text-surface-600 hover:border-yellow-500 hover:text-yellow-600 dark:border-surface-700 dark:text-surface-300"
+            } ${!canToggleWeighted ? "cursor-default opacity-70" : ""}`}
+          >
+            {isWeighted ? "Weighted" : "Unweighted"}
+          </button>
+
+          <button
+            type="button"
+            onClick={advance}
+            className="btn-base bg-primary text-white hover:bg-primary-dark touch-manipulation min-h-[44px] min-w-[44px]"
+          >
+            <Play className="h-4 w-4" aria-hidden="true" />
+            Next step
+          </button>
+          <button
+            type="button"
+            onClick={reset}
+            className="btn-base border border-surface-300 text-surface-800 hover:border-primary hover:text-primary dark:border-surface-700 dark:text-surface-200 touch-manipulation min-h-[44px] min-w-[44px]"
+          >
+            <RotateCcw className="h-4 w-4" aria-hidden="true" />
+            Reset
+          </button>
+        </div>
+      </div>
+
+      {/* ── Timeline Scrubber ─────────────────────────────────────────────── */}
+      <div className="mb-5 rounded-xl border border-surface-200 bg-surface-50 px-4 py-3 dark:border-surface-800 dark:bg-surface-950">
+        <div className="mb-2 flex items-center justify-between">
+          <span className="text-xs font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wide">
+            Timeline
+          </span>
+          <span className="text-xs font-medium tabular-nums text-surface-600 dark:text-surface-300">
+            Step <span className="font-bold text-primary">{step + 1}</span> / {totalSteps}
+          </span>
+        </div>
+        <div className="flex items-center gap-3">
+          {/* Step Back */}
+          <button
+            type="button"
+            onClick={stepBack}
+            disabled={step === 0}
+            aria-label="Step back"
+            className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg border border-surface-300 bg-white text-surface-600 transition-colors hover:border-primary hover:text-primary disabled:cursor-not-allowed disabled:opacity-40 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-300"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+
+          {/* Range slider */}
+          <input
+            id="timeline-scrubber"
+            type="range"
+            min={0}
+            max={totalSteps - 1}
+            value={step}
+            step={1}
+            onChange={(e) => setStep(Number(e.target.value))}
+            aria-label={`Timeline scrubber: step ${step + 1} of ${totalSteps}`}
+            className="
+              h-2 w-full cursor-pointer appearance-none rounded-full
+              bg-surface-200 dark:bg-surface-700
+              accent-primary
+              [&::-webkit-slider-thumb]:h-4
+              [&::-webkit-slider-thumb]:w-4
+              [&::-webkit-slider-thumb]:appearance-none
+              [&::-webkit-slider-thumb]:rounded-full
+              [&::-webkit-slider-thumb]:bg-primary
+              [&::-webkit-slider-thumb]:shadow-md
+              [&::-webkit-slider-thumb]:transition-transform
+              [&::-webkit-slider-thumb]:hover:scale-125
+              [&::-moz-range-thumb]:h-4
+              [&::-moz-range-thumb]:w-4
+              [&::-moz-range-thumb]:rounded-full
+              [&::-moz-range-thumb]:border-0
+              [&::-moz-range-thumb]:bg-primary
+              [&::-moz-range-thumb]:shadow-md
+            "
+            style={{
+              background: `linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) ${(step / Math.max(totalSteps - 1, 1)) * 100}%, var(--color-neutral-200) ${(step / Math.max(totalSteps - 1, 1)) * 100}%, var(--color-neutral-200) 100%)`,
+            }}
+          />
+
+          {/* Step Forward */}
+          <button
+            type="button"
+            onClick={advance}
+            disabled={step === totalSteps - 1}
+            aria-label="Step forward"
+            className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg border border-surface-300 bg-white text-surface-600 transition-colors hover:border-primary hover:text-primary disabled:cursor-not-allowed disabled:opacity-40 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-300"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        </div>
+
+        {/* Step tick marks */}
+        <div className="mt-1 flex justify-between px-11">
+          {Array.from({ length: Math.min(totalSteps, 10) }, (_, i) => {
+            const tickStep = Math.round((i / (Math.min(totalSteps, 10) - 1)) * (totalSteps - 1));
+            return (
+              <button
+                key={i}
+                type="button"
+                onClick={() => setStep(tickStep)}
+                aria-label={`Jump to step ${tickStep + 1}`}
+                className="flex flex-col items-center gap-0.5 group"
+              >
+                <span className={`h-1.5 w-0.5 rounded-full transition-colors ${tickStep <= step ? "bg-primary" : "bg-surface-300 dark:bg-surface-600"}`} />
+                <span className={`text-[9px] tabular-nums transition-colors ${tickStep === step ? "font-bold text-primary" : "text-surface-400 dark:text-surface-500 group-hover:text-primary"}`}>
+                  {tickStep + 1}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+      {/* ─────────────────────────────────────────────────────────────────── */}
+
+      <div className="grid gap-6 lg:grid-cols-[1.3fr_0.7fr]">
+        <VisualizerCanvas
+          onSwipeLeft={advance}
+          onSwipeRight={stepBack}
+          watchKey={step}
+        >
+        <svg
+          ref={svgRef}
+          viewBox="0 0 100 90"
+          role="img"
+          aria-label={`${title} graph animation`}
+          className="min-h-[280px] w-full rounded-xl bg-surface-50 dark:bg-surface-950"
+          style={{ touchAction: "manipulation" }}
+        >
+          <defs>
+            <marker
+              id="arrowhead"
+              viewBox="0 0 10 10"
+              refX="8"
+              refY="5"
+              markerWidth="4"
+              markerHeight="4"
+              orient="auto-start-reverse"
+            >
+              <path
+                d="M2 1L8 5L2 9"
+                fill="none"
+                stroke="var(--color-primary)"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </marker>
+            <marker
+              id="arrowhead-inactive"
+              viewBox="0 0 10 10"
+              refX="8"
+              refY="5"
+              markerWidth="4"
+              markerHeight="4"
+              orient="auto-start-reverse"
+            >
+              <path
+                d="M2 1L8 5L2 9"
+                fill="none"
+                stroke="var(--color-neutral-300)"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </marker>
+          </defs>
+
+          {edges.map((edge) => {
+            const start = getNode(edge.from);
+            const end = getNode(edge.to);
+            const active = activeEdges.has(edgeId(edge));
+
+            // A* active edge highlight (orange)
+            const isAStarActive = type === "a-star" &&
+              currentAStarFrame?.activeEdge?.from === edge.from &&
+              currentAStarFrame?.activeEdge?.to === edge.to;
+
+            // A* path edge highlight (purple)
+            const aStarPath = currentAStarFrame?.path || [];
+            const isAStarPath = type === "a-star" && aStarPath.length > 1 &&
+              aStarPath.some((n, i) => i < aStarPath.length - 1 &&
+                aStarPath[i] === edge.from && aStarPath[i + 1] === edge.to);
+
+            const edgeColor = isAStarActive
+              ? "#f97316"
+              : isAStarPath
+              ? "#a855f7"
+              : type === "bellman-ford" && bellmanFrame?.activeEdge?.from === edge.from && bellmanFrame?.activeEdge?.to === edge.to
+              ? "orange"
+              : active
+              ? "var(--color-primary)"
+              : "var(--color-neutral-300)";
+
+            const { x: ex, y: ey } = isDirected
+              ? arrowEndpoint(start.x, start.y, end.x, end.y)
+              : { x: end.x, y: end.y };
+
+            return (
+              <g key={edgeId(edge)}>
+                <line
+                  x1={start.x}
+                  y1={start.y}
+                  x2={ex}
+                  y2={ey}
+                  stroke={edgeColor}
+                  strokeWidth={isAStarActive || isAStarPath ? "2" : active ? "1.8" : "1"}
+                  markerEnd={
+                    isDirected
+                      ? active || isAStarActive || isAStarPath
+                        ? "url(#arrowhead)"
+                        : "url(#arrowhead-inactive)"
+                      : undefined
+                  }
+                />
+                {/* Weight label — only shown in weighted mode */}
+                {isWeighted && (
+                  <text
+                    x={(start.x + end.x) / 2}
+                    y={(start.y + end.y) / 2 - 1}
+                    textAnchor="middle"
+                    className="fill-yellow-500 text-[4px] font-bold"
+                    fontSize="4"
+                  >
+                    {edge.weight}
+                  </text>
+                )}
+              </g>
+            );
+          })}
+
+          {nodes.map((node) => {
+            const active = activeNodes.has(node.id);
+
+            // A* node color logic
+            const aStarPath = currentAStarFrame?.path || [];
+            const isAStarStart = type === "a-star" && node.id === startNodeAStar;
+            const isAStarGoal = type === "a-star" && node.id === goalNode;
+            const isAStarPathNode = type === "a-star" && aStarPath.includes(node.id) && currentAStarFrame?.phase === "found";
+            const isAStarOpen = type === "a-star" && currentAStarFrame?.openSet?.has(node.id);
+            const isAStarVisited = type === "a-star" && currentAStarFrame?.visited?.has(node.id);
+
+            let nodeFill = active ? "var(--vis-active-node-fill, var(--color-primary))" : "var(--vis-inactive-node-fill, white)";
+            let nodeStroke = active ? "var(--vis-active-node-stroke, var(--color-primary))" : "var(--vis-inactive-node-stroke, var(--color-neutral-300))";
+            let textFill = active ? "var(--vis-active-text-fill, white)" : "var(--vis-inactive-text-fill, var(--color-surface-800))";
+
+            if (type === "a-star") {
+              if (isAStarPathNode) {
+                nodeFill = "var(--vis-path-fill, #a855f7)"; nodeStroke = "var(--vis-path-stroke, #a855f7)"; textFill = "white";
+              } else if (isAStarGoal) {
+                nodeFill = "var(--vis-goal-fill, #ef4444)"; nodeStroke = "var(--vis-goal-stroke, #ef4444)"; textFill = "white";
+              } else if (isAStarStart) {
+                nodeFill = "var(--vis-start-fill, #22c55e)"; nodeStroke = "var(--vis-start-stroke, #22c55e)"; textFill = "white";
+              } else if (isAStarOpen) {
+                nodeFill = "var(--vis-open-fill, #eab308)"; nodeStroke = "var(--vis-open-stroke, #eab308)"; textFill = "white";
+              } else if (isAStarVisited) {
+                nodeFill = "var(--vis-visited-astar-fill, #3b82f6)"; nodeStroke = "var(--vis-visited-astar-stroke, #3b82f6)"; textFill = "white";
+              } else {
+                nodeFill = "var(--vis-inactive-node-fill, white)"; nodeStroke = "var(--vis-inactive-node-stroke, var(--color-neutral-300))"; textFill = "var(--vis-inactive-text-fill, var(--color-surface-800))";
+              }
+            }
+
+            // Advance to the step where this node is first visited on tap/click
+            const nodeStep = type === "a-star" ? -1 : sequence.indexOf(node.id);
+            const isReachable = nodeStep !== -1;
+            const handleNodeActivate = isReachable
+              ? () => setStep(nodeStep)
+              : undefined;
+
+            return (
+              <g
+                key={node.id}
+                onClick={handleNodeActivate}
+                onKeyDown={isReachable ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleNodeActivate(); } } : undefined}
+                role={isReachable ? "button" : undefined}
+                tabIndex={isReachable ? 0 : undefined}
+                aria-label={isReachable ? `Jump to node ${node.id}` : undefined}
+                style={{ cursor: isReachable ? "pointer" : "default" }}
+              >
+                {/* Enlarged invisible hit area for easy touch targeting (44x44 CSS px equivalent) */}
+                <circle
+                  cx={node.x}
+                  cy={node.y}
+                  r="10"
+                  fill="transparent"
+                  stroke="none"
+                />
+                <circle
+                  cx={node.x}
+                  cy={node.y}
+                  r="6"
+                  fill={nodeFill}
+                  stroke={nodeStroke}
+                  strokeWidth="1.5"
+                />
+                <text
+                  x={node.x}
+                  y={node.y + 1.5}
+                  textAnchor="middle"
+                  style={{ pointerEvents: "none", fill: textFill, fontSize: "5px", fontWeight: "bold" }}
+                >
+                  {node.id}
+                </text>
+              </g>
+            );
+          })}
+        </svg>
+        </VisualizerCanvas>
+
+        {/* A* Score Table + Banners */}
+        {type === "a-star" && currentAStarFrame && (
+          <div className="mt-3 space-y-3">
+            {/* Color legend */}
+            <div className="flex flex-wrap gap-2 text-xs">
+              <span className="flex items-center gap-1"><span className="inline-block h-3 w-3 rounded-full bg-green-500"></span>Start</span>
+              <span className="flex items-center gap-1"><span className="inline-block h-3 w-3 rounded-full bg-red-500"></span>Goal</span>
+              <span className="flex items-center gap-1"><span className="inline-block h-3 w-3 rounded-full bg-yellow-400"></span>Frontier</span>
+              <span className="flex items-center gap-1"><span className="inline-block h-3 w-3 rounded-full bg-blue-500"></span>Visited</span>
+              <span className="flex items-center gap-1"><span className="inline-block h-3 w-3 rounded-full bg-purple-500"></span>Path</span>
+              <span className="flex items-center gap-1"><span className="inline-block h-3 w-3 rounded-full bg-orange-400"></span>Active Edge</span>
+            </div>
+
+            {/* Score table */}
+            <div className="overflow-x-auto rounded-xl border border-surface-200 dark:border-surface-800">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b border-surface-200 bg-surface-50 dark:border-surface-800 dark:bg-surface-950">
+                    <th className="px-3 py-2 text-left font-semibold text-surface-700 dark:text-surface-300">Node</th>
+                    <th className="px-3 py-2 text-center font-semibold text-surface-700 dark:text-surface-300">g (cost)</th>
+                    <th className="px-3 py-2 text-center font-semibold text-surface-700 dark:text-surface-300">h (heuristic)</th>
+                    <th className="px-3 py-2 text-center font-semibold text-surface-700 dark:text-surface-300">f = g + h</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {nodes.map((n) => {
+                    const g = currentAStarFrame.gScore?.[n.id];
+                    const f = currentAStarFrame.fScore?.[n.id];
+                    const h = g !== undefined && f !== undefined && g !== Infinity && f !== Infinity
+                      ? f - g
+                      : null;
+                    const isActive = currentAStarFrame.current === n.id;
+                    return (
+                      <tr key={n.id} className={`border-b border-surface-100 dark:border-surface-800 ${isActive ? "bg-primary/5" : ""}`}>
+                        <td className={`px-3 py-2 font-semibold ${isActive ? "text-primary" : "text-surface-800 dark:text-surface-200"}`}>{n.id}</td>
+                        <td className="px-3 py-2 text-center text-surface-600 dark:text-surface-400">
+                          {g === Infinity || g === undefined ? "∞" : g.toFixed(1)}
+                        </td>
+                        <td className="px-3 py-2 text-center text-surface-600 dark:text-surface-400">
+                          {h === null ? "∞" : h.toFixed(1)}
+                        </td>
+                        <td className="px-3 py-2 text-center text-surface-600 dark:text-surface-400">
+                          {f === Infinity || f === undefined ? "∞" : f.toFixed(1)}
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+
+            {/* Phase banners */}
+            {currentAStarFrame.phase === "found" && (
+              <div className="rounded-xl border border-green-400 bg-green-50 px-4 py-3 text-sm font-semibold text-green-700 dark:bg-green-900/20 dark:text-green-400">
+                ✅ Path Found: {(currentAStarFrame.path || []).join(" → ")} (cost: {currentAStarFrame.gScore?.[goalNode]?.toFixed(1)})
+              </div>
+            )}
+            {currentAStarFrame.phase === "no_path" && (
+              <div className="rounded-xl border border-red-400 bg-red-50 px-4 py-3 text-sm font-semibold text-red-700 dark:bg-red-900/20 dark:text-red-400">
+                ❌ No path exists from {startNodeAStar} to {goalNode}
+              </div>
+            )}
+
+            {/* Step description */}
+            <p className="text-xs text-surface-500 dark:text-surface-400">{currentAStarFrame.description}</p>
+          </div>
+        )}
+
+        <div className="rounded-xl border border-surface-200 bg-surface-50 p-4 dark:border-surface-800 dark:bg-surface-950">
+          <p className="mb-3 text-sm font-semibold text-surface-700 dark:text-surface-300">
+            Step {step + 1} of {totalSteps}
+          </p>
+          <div className="space-y-2">
+            {type === "a-star" ? (
+              aStarData.map((frame, index) => (
+                <div
+                  key={index}
+                  className={`rounded-lg border px-3 py-2 text-sm transition-colors ${
+                    index === step
+                      ? "border-primary bg-primary/10 text-primary"
+                      : index < step
+                        ? "border-success/40 bg-success/10 text-surface-700 dark:text-surface-200"
+                        : "border-surface-200 bg-white text-surface-500 dark:border-surface-800 dark:bg-surface-900"
+                  }`}
+                >
+                  {frame.current ? `Expand ${frame.current}` : frame.phase === "found" ? "Path found!" : "No path"}
+                </div>
+              ))
+            ) : (
+              sequence.map((item, index) => (
+                <div
+                  key={item}
+                  className={`rounded-lg border px-3 py-2 text-sm transition-colors ${
+                    index === step
+                      ? "border-primary bg-primary/10 text-primary"
+                      : index < step
+                        ? "border-success/40 bg-success/10 text-surface-700 dark:text-surface-200"
+                        : "border-surface-200 bg-white text-surface-500 dark:border-surface-800 dark:bg-surface-900"
+                  }`}
+                >
+                  {type === "kruskal" ? `Choose edge ${item}` : `Visit vertex ${item}`}
+                </div>
+              ))
+            )}
+          </div>
+
+          {/* Mode info badges */}
+          <div className="mt-4 flex flex-col gap-2">
+            {isDirected && (
+              <div className="rounded-lg border border-primary/20 bg-primary/5 px-3 py-2 text-xs text-primary">
+                Directed mode — edges have one-way direction
+              </div>
+            )}
+            {isWeighted && (
+              <div className="rounded-lg border border-yellow-500/20 bg-yellow-500/5 px-3 py-2 text-xs text-yellow-600 dark:text-yellow-400">
+                Weighted mode — edge costs are shown
+              </div>
+            )}
+          </div>
+
+
+          {/* Bellman-Ford: Distance Table */}
+          {type === "bellman-ford" && bellmanFrame && (
+            <div className="mt-4">
+              {/* Negative Cycle Banner */}
+              {bellmanFrame.negativeCycle && (
+                <div className="mb-3 rounded-lg border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm font-semibold text-red-600 dark:text-red-400">
+                  ⚠️ Negative Cycle Detected!
+                </div>
+              )}
+              <p className="mb-2 text-sm font-semibold text-surface-700 dark:text-surface-300">
+                Distance Table
+              </p>
+              <div className="overflow-hidden rounded-lg border border-surface-200 dark:border-surface-800">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="bg-surface-100 dark:bg-surface-800">
+                      <th className="px-3 py-2 text-left font-semibold text-surface-700 dark:text-surface-300">Node</th>
+                      <th className="px-3 py-2 text-left font-semibold text-surface-700 dark:text-surface-300">Distance</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {Object.entries(bellmanFrame.distances).map(([node, dist]) => (
+                      <tr
+                        key={node}
+                        className={`border-t border-surface-200 dark:border-surface-800 ${
+                          bellmanFrame.updatedNode === node
+                            ? "bg-orange-500/10 text-orange-600 dark:text-orange-400"
+                            : bellmanFrame.visitingNodes?.has(node)
+                              ? "bg-primary/10 text-primary"
+                              : ""
+                        }`}
+                      >
+                        <td className="px-3 py-1.5 font-medium">{node}</td>
+                        <td className="px-3 py-1.5">
+                          {dist === Infinity ? "∞" : dist}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              <p className="mt-2 text-xs text-surface-500 dark:text-surface-400 italic">
+                {bellmanFrame.description}
+              </p>
+            </div>
+          )}
+
+          <p className="mt-3 text-sm text-surface-500 dark:text-surface-400">
+            Current focus:{" "}
+            <span className="font-semibold text-surface-800 dark:text-white">
+              {current}
+            </span>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/visualizer/graph/components/GraphTopicPage.jsx b/src/app/visualizer/graph/components/GraphTopicPage.jsx
new file mode 100644
index 000000000..3da4dead5
--- /dev/null
+++ b/src/app/visualizer/graph/components/GraphTopicPage.jsx
@@ -0,0 +1,92 @@
+import Footer from "@/app/components/footer";
+import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import { getGraphRelatedLinks } from "@/app/visualizer/graph/data";
+
+export default function GraphTopicPage({ topic, Animation, startNode }) {
+  const paths = [
+    { name: "Home", href: "/" },
+    { name: "Visualizer", href: "/visualizer" },
+    { name: topic.title, href: "" },
+  ];
+
+  return (
+    <>
+      <main className="bg-white pt-6 pb-16 text-surface-900 dark:bg-surface-950 dark:text-white">
+        <section className="container-app">
+          <div className="mb-8 mt-2">
+            <Breadcrumbs paths={paths} />
+          </div>
+
+          <div className="flex flex-col items-center text-center">
+            <p className="mb-3 rounded-full border border-primary/20 bg-primary/10 px-4 py-1 text-sm font-semibold uppercase tracking-wide text-primary">
+              {topic.category}
+            </p>
+            <h1 className="max-w-3xl text-4xl font-extrabold tracking-tight md:text-5xl">
+              {topic.title}
+            </h1>
+            <p className="mt-4 max-w-2xl text-lg text-surface-600 dark:text-surface-400">
+              {topic.description}
+            </p>
+            <ArticleActions />
+          </div>
+
+          <div className="mx-auto my-10 h-px max-w-4xl bg-gradient-to-r from-transparent via-surface-200 to-transparent dark:via-surface-800" />
+
+          <div className="mx-auto w-full grid gap-6 lg:grid-cols-[2fr_320px]">
+            <article className="rounded-2xl border border-surface-200 bg-white shadow-card dark:border-surface-800 dark:bg-surface-900">
+              <section className="border-b border-surface-100 p-6 dark:border-surface-800">
+                <h2 className="mb-4 text-2xl font-bold">Core idea</h2>
+                <div className="space-y-3 text-surface-700 dark:text-surface-300">
+                  {topic.summary.map((item) => (
+                    <p key={item}>{item}</p>
+                  ))}
+                </div>
+              </section>
+
+              <section className="p-6">
+                <h2 className="mb-4 text-2xl font-bold">How it works</h2>
+                <ol className="space-y-3 pl-5 text-surface-700 marker:text-primary dark:text-surface-300">
+                  {topic.steps.map((step) => (
+                    <li key={step} className="list-decimal pl-2">
+                      {step}
+                    </li>
+                  ))}
+                </ol>
+              </section>
+            </article>
+
+            <aside className="h-fit rounded-2xl border border-surface-200 bg-surface-50 p-5 dark:border-surface-800 dark:bg-surface-900">
+              <h2 className="mb-4 text-xl font-bold">Complexity</h2>
+              <div className="space-y-3">
+                {topic.complexity.map((item) => (
+                  <div
+                    key={item.label}
+                    className="flex items-center justify-between rounded-lg bg-white px-3 py-2 text-sm dark:bg-surface-950"
+                  >
+                    <span className="text-surface-500 dark:text-surface-400">{item.label}</span>
+                    <span className="font-semibold text-surface-900 dark:text-white">{item.value}</span>
+                  </div>
+                ))}
+              </div>
+            </aside>
+          </div>
+        </section>
+
+        <section className="container-app">
+          <Animation startNode={startNode} />
+        </section>
+
+        <section className="container-app">
+          <ExploreOther
+            title="Explore graph topics"
+            columns="4"
+            links={getGraphRelatedLinks(topic.key)}
+          />
+        </section>
+      </main>
+      <Footer />
+    </>
+  );
+}
diff --git a/src/app/visualizer/graph/components/GraphVisualizer.jsx b/src/app/visualizer/graph/components/GraphVisualizer.jsx
new file mode 100644
index 000000000..b4b1f2280
--- /dev/null
+++ b/src/app/visualizer/graph/components/GraphVisualizer.jsx
@@ -0,0 +1,1112 @@
+"use client";
+
+import React, { useState, useMemo, useCallback, useEffect, useRef } from "react";
+import {
+  Settings2,
+  BarChart3,
+  Info,
+  Trash2,
+  Wand2,
+  Code2,
+  Download,
+  AlertTriangle,
+  Palette
+} from "lucide-react";
+import { 
+  BarChart, 
+  Bar, 
+  XAxis, 
+  YAxis, 
+  CartesianGrid, 
+  Tooltip, 
+  ResponsiveContainer,
+  Cell
+} from 'recharts';
+import GraphCanvas from "@/app/components/models/GraphCanvas";
+import AdjacencyPanel from "@/app/components/models/AdjacencyPanel";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import ThemeSettingsModal from "@/app/visualizer/components/ThemeSettingsModal";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import { CustomInputPanel } from "@/app/visualizer/components/CustomInputPanel";
+import { bfsGenerator } from "@/features/algorithms/graph/bfsLogic";
+import { dfsGenerator } from "@/features/algorithms/graph/dfsLogic";
+import { dijkstraGenerator } from "@/features/algorithms/graph/dijkstraLogic";
+import { bellmanFordGenerator } from "@/features/algorithms/graph/bellmanFordLogic";
+import { floydWarshallGenerator } from "@/features/algorithms/graph/floydWarshallLogic";
+import { primGenerator } from "@/features/algorithms/graph/primLogic";
+import { kruskalGenerator } from "@/features/algorithms/graph/kruskalLogic";
+import { topologicalSortGenerator } from "@/features/algorithms/graph/topologicalSortLogic";
+import { kosarajuGenerator } from "@/features/algorithms/graph/kosarajuLogic";
+import { tarjanGenerator } from "@/features/algorithms/graph/tarjanLogic";
+import { aStarGenerator } from "@/features/algorithms/graph/aStarLogic";
+import { fordFulkersonGenerator } from "@/features/algorithms/graph/fordFulkersonLogic";
+import { adjacencyListGenerator } from "@/features/algorithms/graph/adjacencyListLogic";
+import { adjacencyMatrixGenerator } from "@/features/algorithms/graph/adjacencyMatrixLogic";
+import { ALGORITHM_PSEUDOCODE } from "../constants/pseudocode";
+
+const weightedAlgorithms = new Set(["dijkstra", "bellman-ford", "floyd-warshall", "prim", "kruskal", "a-star", "ford-fulkerson"]);
+const directedAlgorithms = new Set(["dijkstra", "bellman-ford", "floyd-warshall", "topological-sort", "kosaraju", "tarjan", "a-star", "ford-fulkerson"]);
+
+const defaultGraphs = {
+  bfs: {
+    nodes: [
+      { id: "0", x: 400, y: 80, label: "0" },
+      { id: "1", x: 250, y: 200, label: "1" },
+      { id: "2", x: 550, y: 200, label: "2" },
+      { id: "3", x: 150, y: 350, label: "3" },
+      { id: "4", x: 350, y: 350, label: "4" },
+      { id: "5", x: 650, y: 350, label: "5" },
+    ],
+    edges: [
+      { from: "0", to: "1", weight: 1, directed: false },
+      { from: "0", to: "2", weight: 1, directed: false },
+      { from: "1", to: "3", weight: 1, directed: false },
+      { from: "1", to: "4", weight: 1, directed: false },
+      { from: "2", to: "5", weight: 1, directed: false },
+    ]
+  },
+  dfs: {
+    nodes: [
+      { id: "0", x: 400, y: 80, label: "0" },
+      { id: "1", x: 250, y: 200, label: "1" },
+      { id: "2", x: 550, y: 200, label: "2" },
+      { id: "3", x: 150, y: 350, label: "3" },
+      { id: "4", x: 350, y: 350, label: "4" },
+      { id: "5", x: 650, y: 350, label: "5" },
+    ],
+    edges: [
+      { from: "0", to: "1", weight: 1, directed: false },
+      { from: "1", to: "3", weight: 1, directed: false },
+      { from: "3", to: "4", weight: 1, directed: false },
+      { from: "0", to: "2", weight: 1, directed: false },
+      { from: "2", to: "5", weight: 1, directed: false },
+    ]
+  },
+  dijkstra: {
+    nodes: [
+      { id: "0", x: 100, y: 250, label: "A" },
+      { id: "1", x: 300, y: 100, label: "B" },
+      { id: "2", x: 300, y: 400, label: "C" },
+      { id: "3", x: 500, y: 100, label: "D" },
+      { id: "4", x: 500, y: 400, label: "E" },
+      { id: "5", x: 700, y: 250, label: "F" },
+    ],
+    edges: [
+      { from: "0", to: "1", weight: 4, directed: true },
+      { from: "0", to: "2", weight: 2, directed: true },
+      { from: "1", to: "3", weight: 5, directed: true },
+      { from: "1", to: "2", weight: 1, directed: true },
+      { from: "2", to: "1", weight: 8, directed: true },
+      { from: "2", to: "3", weight: 10, directed: true },
+      { from: "2", to: "4", weight: 3, directed: true },
+      { from: "3", to: "5", weight: 2, directed: true },
+      { from: "4", to: "3", weight: 4, directed: true },
+      { from: "4", to: "5", weight: 6, directed: true },
+    ]
+  },
+  "floyd-warshall": {
+    nodes: [
+      { id: "0", x: 120, y: 160, label: "A" },
+      { id: "1", x: 340, y: 90, label: "B" },
+      { id: "2", x: 560, y: 160, label: "C" },
+      { id: "3", x: 250, y: 360, label: "D" },
+      { id: "4", x: 520, y: 350, label: "E" },
+    ],
+    edges: [
+      { from: "0", to: "1", weight: 3, directed: true },
+      { from: "0", to: "3", weight: 8, directed: true },
+      { from: "1", to: "2", weight: 1, directed: true },
+      { from: "1", to: "3", weight: 4, directed: true },
+      { from: "2", to: "4", weight: 2, directed: true },
+      { from: "3", to: "2", weight: 2, directed: true },
+      { from: "3", to: "4", weight: 7, directed: true },
+      { from: "4", to: "0", weight: 4, directed: true },
+    ]
+  },
+  "bellman-ford": {
+    nodes: [
+      { id: "0", x: 100, y: 250, label: "A" },
+      { id: "1", x: 300, y: 100, label: "B" },
+      { id: "2", x: 300, y: 400, label: "C" },
+      { id: "3", x: 500, y: 100, label: "D" },
+      { id: "4", x: 500, y: 400, label: "E" },
+      { id: "5", x: 700, y: 250, label: "F" },
+    ],
+    edges: [
+      { from: "0", to: "1", weight: 4, directed: true },
+      { from: "0", to: "2", weight: 2, directed: true },
+      { from: "1", to: "3", weight: 5, directed: true },
+      { from: "1", to: "2", weight: 1, directed: true },
+      { from: "2", to: "1", weight: 8, directed: true },
+      { from: "2", to: "3", weight: 10, directed: true },
+      { from: "2", to: "4", weight: 3, directed: true },
+      { from: "3", to: "5", weight: 2, directed: true },
+      { from: "4", to: "3", weight: -4, directed: true },
+      { from: "4", to: "5", weight: 6, directed: true },
+    ]
+  },
+  "a-star": {
+    nodes: [
+      { id: "0", x: 100, y: 250, label: "A" },
+      { id: "1", x: 300, y: 100, label: "B" },
+      { id: "2", x: 300, y: 400, label: "C" },
+      { id: "3", x: 500, y: 100, label: "D" },
+      { id: "4", x: 500, y: 400, label: "E" },
+      { id: "5", x: 700, y: 250, label: "F" },
+    ],
+    edges: [
+      { from: "0", to: "1", weight: 4, directed: true },
+      { from: "0", to: "2", weight: 2, directed: true },
+      { from: "1", to: "3", weight: 5, directed: true },
+      { from: "1", to: "2", weight: 1, directed: true },
+      { from: "2", to: "4", weight: 3, directed: true },
+      { from: "3", to: "5", weight: 2, directed: true },
+      { from: "4", to: "5", weight: 6, directed: true },
+    ]
+  },
+  "ford-fulkerson": {
+    nodes: [
+      { id: "0", x: 100, y: 250, label: "S" },
+      { id: "1", x: 300, y: 100, label: "A" },
+      { id: "2", x: 300, y: 400, label: "B" },
+      { id: "3", x: 500, y: 100, label: "C" },
+      { id: "4", x: 500, y: 400, label: "D" },
+      { id: "5", x: 700, y: 250, label: "T" },
+    ],
+    edges: [
+      { from: "0", to: "1", weight: 10, directed: true },
+      { from: "0", to: "2", weight: 10, directed: true },
+      { from: "1", to: "2", weight: 2, directed: true },
+      { from: "1", to: "3", weight: 4, directed: true },
+      { from: "1", to: "4", weight: 8, directed: true },
+      { from: "2", to: "4", weight: 9, directed: true },
+      { from: "4", to: "3", weight: 6, directed: true },
+      { from: "3", to: "5", weight: 10, directed: true },
+      { from: "4", to: "5", weight: 10, directed: true },
+    ]
+  },
+  prim: {
+    nodes: [
+      { id: "0", x: 400, y: 80, label: "0" },
+      { id: "1", x: 250, y: 200, label: "1" },
+      { id: "2", x: 550, y: 200, label: "2" },
+      { id: "3", x: 150, y: 350, label: "3" },
+      { id: "4", x: 350, y: 350, label: "4" },
+      { id: "5", x: 650, y: 350, label: "5" },
+    ],
+    edges: [
+      { from: "0", to: "1", weight: 2, directed: false },
+      { from: "0", to: "2", weight: 3, directed: false },
+      { from: "1", to: "3", weight: 5, directed: false },
+      { from: "1", to: "4", weight: 1, directed: false },
+      { from: "2", to: "5", weight: 4, directed: false },
+      { from: "4", to: "5", weight: 2, directed: false },
+    ]
+  },
+  kruskal: {
+    nodes: [
+      { id: "0", x: 400, y: 80, label: "0" },
+      { id: "1", x: 250, y: 200, label: "1" },
+      { id: "2", x: 550, y: 200, label: "2" },
+      { id: "3", x: 150, y: 350, label: "3" },
+      { id: "4", x: 350, y: 350, label: "4" },
+      { id: "5", x: 650, y: 350, label: "5" },
+    ],
+    edges: [
+      { from: "0", to: "1", weight: 2, directed: false },
+      { from: "0", to: "2", weight: 3, directed: false },
+      { from: "1", to: "3", weight: 5, directed: false },
+      { from: "1", to: "4", weight: 1, directed: false },
+      { from: "2", to: "5", weight: 4, directed: false },
+      { from: "4", to: "5", weight: 2, directed: false },
+    ]
+  },
+  "topological-sort": {
+    nodes: [
+      { id: "0", x: 100, y: 100, label: "A" },
+      { id: "1", x: 300, y: 100, label: "B" },
+      { id: "2", x: 500, y: 100, label: "C" },
+      { id: "3", x: 100, y: 400, label: "D" },
+      { id: "4", x: 300, y: 400, label: "E" },
+      { id: "5", x: 500, y: 400, label: "F" },
+    ],
+    edges: [
+      { from: "0", to: "1", weight: 1, directed: true },
+      { from: "1", to: "2", weight: 1, directed: true },
+      { from: "3", to: "1", weight: 1, directed: true },
+      { from: "3", to: "4", weight: 1, directed: true },
+      { from: "4", to: "5", weight: 1, directed: true },
+      { from: "2", to: "5", weight: 1, directed: true },
+    ]
+  },
+  "kosaraju": {
+    nodes: [
+      { id: "0", x: 150, y: 150, label: "0" },
+      { id: "1", x: 350, y: 100, label: "1" },
+      { id: "2", x: 250, y: 300, label: "2" },
+      { id: "3", x: 500, y: 300, label: "3" },
+      { id: "4", x: 650, y: 150, label: "4" },
+    ],
+    edges: [
+      { from: "0", to: "1", weight: 1, directed: true },
+      { from: "1", to: "2", weight: 1, directed: true },
+      { from: "2", to: "0", weight: 1, directed: true },
+      { from: "1", to: "3", weight: 1, directed: true },
+      { from: "3", to: "4", weight: 1, directed: true },
+      { from: "4", to: "3", weight: 1, directed: true },
+    ]
+  },
+  "tarjan": {
+    nodes: [
+      { id: "0", x: 150, y: 150, label: "0" },
+      { id: "1", x: 350, y: 100, label: "1" },
+      { id: "2", x: 250, y: 300, label: "2" },
+      { id: "3", x: 500, y: 300, label: "3" },
+      { id: "4", x: 650, y: 150, label: "4" },
+    ],
+    edges: [
+      { from: "0", to: "1", weight: 1, directed: true },
+      { from: "1", to: "2", weight: 1, directed: true },
+      { from: "2", to: "0", weight: 1, directed: true },
+      { from: "1", to: "3", weight: 1, directed: true },
+      { from: "3", to: "4", weight: 1, directed: true },
+      { from: "4", to: "3", weight: 1, directed: true },
+    ]
+  },
+  "adjacency-list": {
+    nodes: [
+      { id: "0", x: 100, y: 250, label: "0" },
+      { id: "1", x: 300, y: 100, label: "1" },
+      { id: "2", x: 300, y: 400, label: "2" },
+      { id: "3", x: 500, y: 250, label: "3" },
+    ],
+    edges: [
+      { from: "0", to: "1", weight: 1, directed: false },
+      { from: "0", to: "2", weight: 1, directed: false },
+      { from: "1", to: "3", weight: 1, directed: false },
+      { from: "2", to: "3", weight: 1, directed: false },
+    ]
+  },
+  "adjacency-matrix": {
+    nodes: [
+      { id: "0", x: 100, y: 250, label: "0" },
+      { id: "1", x: 300, y: 100, label: "1" },
+      { id: "2", x: 300, y: 400, label: "2" },
+      { id: "3", x: 500, y: 250, label: "3" },
+    ],
+    edges: [
+      { from: "0", to: "1", weight: 1, directed: false },
+      { from: "0", to: "2", weight: 1, directed: false },
+      { from: "1", to: "3", weight: 1, directed: false },
+      { from: "2", to: "3", weight: 1, directed: false },
+    ]
+  }
+};
+
+const complexityData = {
+  bfs: [
+    { name: 'Time', value: 80, label: 'O(V+E)', full: 'Time Complexity' },
+    { name: 'Space', value: 60, label: 'O(V)', full: 'Space Complexity' },
+  ],
+  dfs: [
+    { name: 'Time', value: 80, label: 'O(V+E)', full: 'Time Complexity' },
+    { name: 'Space', value: 60, label: 'O(V)', full: 'Space Complexity' },
+  ],
+  dijkstra: [
+    { name: 'Time', value: 95, label: 'O((V+E)logV)', full: 'Time Complexity' },
+    { name: 'Space', value: 60, label: 'O(V)', full: 'Space Complexity' },
+  ],
+  "floyd-warshall": [
+    { name: 'Time', value: 100, label: 'O(V^3)', full: 'Time Complexity' },
+    { name: 'Space', value: 90, label: 'O(V^2)', full: 'Space Complexity' },
+  ],
+  "bellman-ford": [
+    { name: 'Time', value: 90, label: 'O(VE)', full: 'Time Complexity' },
+    { name: 'Space', value: 60, label: 'O(V)', full: 'Space Complexity' },
+  ],
+  prim: [
+    { name: 'Time', value: 90, label: 'O(ElogV)', full: 'Time Complexity' },
+    { name: 'Space', value: 60, label: 'O(V)', full: 'Space Complexity' },
+  ],
+  "a-star": [
+    { name: 'Time', value: 85, label: 'O(E)', full: 'Time Complexity' },
+    { name: 'Space', value: 60, label: 'O(V)', full: 'Space Complexity' },
+  ],
+  "ford-fulkerson": [
+    { name: 'Time', value: 95, label: 'O(V E^2)', full: 'Time Complexity' },
+    { name: 'Space', value: 75, label: 'O(V^2)', full: 'Space Complexity' },
+  ],
+  kruskal: [
+    { name: 'Time', value: 90, label: 'O(ElogE)', full: 'Time Complexity' },
+    { name: 'Space', value: 60, label: 'O(V)', full: 'Space Complexity' },
+  ],
+  "topological-sort": [
+    { name: 'Time', value: 80, label: 'O(V+E)', full: 'Time Complexity' },
+    { name: 'Space', value: 60, label: 'O(V)', full: 'Space Complexity' },
+  ],
+  "kosaraju": [
+    { name: 'Time', value: 80, label: 'O(V+E)', full: 'Time Complexity' },
+    { name: 'Space', value: 60, label: 'O(V)', full: 'Space Complexity' },
+  ],
+  "tarjan": [
+    { name: 'Time', value: 80, label: 'O(V+E)', full: 'Time Complexity' },
+    { name: 'Space', value: 60, label: 'O(V)', full: 'Space Complexity' },
+  ],
+  "adjacency-list": [
+    { name: 'Space', value: 60, label: 'O(V+E)', full: 'Space Complexity' },
+    { name: 'Add Node', value: 10, label: 'O(1)', full: 'Time Complexity' },
+  ],
+  "adjacency-matrix": [
+    { name: 'Space', value: 90, label: 'O(V^2)', full: 'Space Complexity' },
+    { name: 'Edge Check', value: 10, label: 'O(1)', full: 'Time Complexity' },
+  ],
+};
+
+const comparisonData = [
+  { name: 'BFS', time: 80, space: 60 },
+  { name: 'DFS', time: 80, space: 60 },
+  { name: 'Dijkstra', time: 95, space: 65 },
+  { name: 'Bellman', time: 90, space: 60 },
+  { name: 'Floyd', time: 100, space: 90 },
+  { name: 'MST', time: 90, space: 60 },
+  { name: 'SCC', time: 80, space: 60 },
+];
+
+export default function GraphVisualizer({ algorithm = "bfs", startNode: initialStartNode }) {
+  const {
+    nodes, setNodes,
+    edges, setEdges,
+    updateGraph,
+    undo, redo, canUndo, canRedo,
+    resetGraph
+  } = useGraphHistory(defaultGraphs[algorithm]?.nodes || [], defaultGraphs[algorithm]?.edges || []);
+  const [isPseudocodeOpen, setIsPseudocodeOpen] = useState(true);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    try {
+      const savedNodes = localStorage.getItem(`algobuddy_custom_nodes_${algorithm}`);
+      const savedEdges = localStorage.getItem(`algobuddy_custom_edges_${algorithm}`);
+      if (savedNodes && savedEdges) {
+        resetGraph(JSON.parse(savedNodes), JSON.parse(savedEdges));
+      } else {
+        resetGraph(defaultGraphs[algorithm]?.nodes || [], defaultGraphs[algorithm]?.edges || []);
+      }
+    } catch (err) {
+      console.error("Failed to load custom graph:", err);
+    }
+    setIsLoaded(true);
+  }, [algorithm]);
+
+  useEffect(() => {
+    if (isLoaded) {
+      localStorage.setItem(`algobuddy_custom_nodes_${algorithm}`, JSON.stringify(nodes));
+      localStorage.setItem(`algobuddy_custom_edges_${algorithm}`, JSON.stringify(edges));
+    }
+  }, [nodes, edges, algorithm, isLoaded]);
+
+  const [isThemeModalOpen, setIsThemeModalOpen] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+
+  useEffect(() => {
+    if (!isEditing) return;
+
+    const handleKeyDown = (e) => {
+      const activeEl = document.activeElement;
+      const tag = activeEl?.tagName?.toLowerCase();
+      if (tag === "input" || tag === "textarea" || tag === "select" || activeEl?.isContentEditable) return;
+
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'z') {
+        e.preventDefault();
+        if (e.shiftKey) {
+          if (canRedo) redo();
+        } else {
+          if (canUndo) undo();
+        }
+      } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'y') {
+        e.preventDefault();
+        if (canRedo) redo();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isEditing, undo, redo, canUndo, canRedo]);
+
+  const [targetNode, setTargetNode] = useState("");
+  const canvasContainerRef = useRef(null);
+  const [isExporting, setIsExporting] = useState(false);
+
+  const [isDirectedManual, setIsDirectedManual] = useState(null);
+
+  useEffect(() => {
+    setIsDirectedManual(null);
+  }, [algorithm]);
+
+  // Derived flags
+  const isWeighted = weightedAlgorithms.has(algorithm);
+  const isDirected = isDirectedManual !== null ? isDirectedManual : directedAlgorithms.has(algorithm);
+
+  const frames = useMemo(() => {
+    const adj = {};
+    nodes.forEach(n => adj[n.id] = []);
+    edges.forEach(e => {
+      if (isWeighted) {
+        adj[e.from].push({ node: e.to, weight: e.weight ?? 1 });
+        if (!e.directed) adj[e.to].push({ node: e.from, weight: e.weight ?? 1 });
+      } else {
+        adj[e.from].push(e.to);
+        if (!e.directed) adj[e.to].push(e.from);
+      }
+    });
+
+    const startNodeId = initialStartNode || (nodes.length > 0 ? nodes[0].id : null);
+    const finalGoalNodeId = targetNode || (nodes.length > 1 ? nodes[nodes.length - 1].id : null);
+    
+    if (algorithm === "bfs") return Array.from(bfsGenerator(adj, startNodeId));
+    if (algorithm === "dfs") return Array.from(dfsGenerator(adj, startNodeId));
+    if (algorithm === "dijkstra") return Array.from(dijkstraGenerator(adj, startNodeId, targetNode || null));
+    if (algorithm === "a-star") return Array.from(aStarGenerator(nodes, edges, startNodeId, finalGoalNodeId));
+    if (algorithm === "bellman-ford") return Array.from(bellmanFordGenerator(nodes, edges, startNodeId));
+    if (algorithm === "floyd-warshall") return Array.from(floydWarshallGenerator(nodes, edges));
+    if (algorithm === "prim") return Array.from(primGenerator(adj, startNodeId));
+    if (algorithm === "kruskal") return Array.from(kruskalGenerator(nodes, edges));
+    if (algorithm === "topological-sort") return Array.from(topologicalSortGenerator(adj, nodes.map(n => n.id)));
+    if (algorithm === "kosaraju") return Array.from(kosarajuGenerator(adj, nodes));
+    if (algorithm === "tarjan") return Array.from(tarjanGenerator(adj, nodes));
+    if (algorithm === "ford-fulkerson") {
+      const sinkNodeId = nodes.length > 1 ? nodes[nodes.length - 1].id : null;
+      return Array.from(fordFulkersonGenerator(nodes, edges, startNodeId, sinkNodeId));
+    }
+    if (algorithm === "adjacency-list") return Array.from(adjacencyListGenerator(nodes, edges));
+    if (algorithm === "adjacency-matrix") return Array.from(adjacencyMatrixGenerator(nodes, edges));
+    return [];
+  }, [nodes, edges, algorithm, initialStartNode, targetNode, isWeighted]);
+
+  const hasNegativeWeightError = algorithm === "dijkstra" && edges.some(e => Number(e.weight) < 0);
+
+  const onStep = useCallback((step) => {
+    // No specific local state needs to be updated here 
+    // since the visual representation is fully derived from `frames[engine.currentStep]`.
+  }, []);
+
+  const engine = useAnimationEngine({ steps: frames, onStep, initialSpeed: 1000 });
+
+  // Handle edge weight updates from GraphCanvas
+  const handleUpdateEdgeWeight = useCallback((edgeIdx, newWeight) => {
+    setEdges((prev) =>
+      prev.map((e, i) => (i === edgeIdx ? { ...e, weight: newWeight } : e))
+    );
+    engine.reset();
+  }, [engine]);
+
+  // When adding an edge, default weight = 1
+  const handleAddEdge = useCallback((edge) => {
+    setEdges((prev) => [...prev, { ...edge, weight: 1, directed: isDirected }]);
+    engine.reset();
+  }, [isDirected, engine]);
+
+  const handleCustomGraphInput = useCallback((parsedEdges) => {
+    if (parsedEdges === null) {
+      resetGraph(defaultGraphs[algorithm]?.nodes || [], defaultGraphs[algorithm]?.edges || []);
+    } else {
+      const nodeIds = Array.from(
+        new Set(parsedEdges.flatMap(e => [e.source, e.target]))
+      ).sort((a, b) => a - b);
+      
+      const centerX = 400;
+      const centerY = 250;
+      const radius = 180;
+      const numNodes = nodeIds.length;
+      
+      const newNodes = nodeIds.map((id, idx) => {
+        const angle = (idx * 2 * Math.PI) / (numNodes || 1);
+        return {
+          id: String(id),
+          x: Math.round(centerX + radius * Math.cos(angle)),
+          y: Math.round(centerY + radius * Math.sin(angle)),
+          label: !isNaN(Number(id)) ? String.fromCharCode(65 + (Number(id) % 26)) : String(id)
+        };
+      });
+
+      const newEdges = parsedEdges.map(e => ({
+        from: String(e.source),
+        to: String(e.target),
+        weight: e.weight,
+        directed: isDirected
+      }));
+
+      resetGraph(newNodes, newEdges);
+    }
+    engine.reset();
+  }, [algorithm, isDirected, engine]);
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      setTimeout(() => engine.play(), 50);
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+    setIsEditing(false); // If they press play/pause, it shouldn't be in edit mode
+  };
+
+  const reset = () => {
+    engine.reset();
+    setIsEditing(true);
+  };
+
+  const stepForward = () => {
+    engine.stepForward();
+    setIsEditing(false);
+  };
+
+  const stepBackward = () => {
+    engine.stepBackward();
+    setIsEditing(false);
+  };
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: reset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrameData = frames[engine.currentStep] || {};
+  const showFloydMatrix = algorithm === "floyd-warshall" && currentFrameData.matrix;
+  const nodeLabelById = Object.fromEntries(nodes.map((node) => [node.id, node.label || node.id]));
+
+  const addNode = ({ x, y }) => {
+    const usedIds = new Set(nodes.map((node) => node.id));
+    let nextId = `${nodes.length}`;
+    let counter = nodes.length;
+    while (usedIds.has(nextId)) {
+      counter += 1;
+      nextId = `${counter}`;
+    }
+
+    setNodes((current) => [
+      ...current,
+      {
+        id: nextId,
+        x,
+        y,
+        label: String.fromCharCode(65 + (counter % 26)),
+      },
+    ]);
+    engine.reset();
+  };
+
+  const moveNode = (id, x, y) => {
+    setNodes((current) =>
+      current.map((node) =>
+        node.id === id
+          ? { ...node, x, y }
+          : node
+      )
+    );
+  };
+
+  const removeNode = (id) => {
+    updateGraph(
+      (current) => current.filter((node) => node.id !== id),
+      (current) => current.filter((edge) => edge.from !== id && edge.to !== id)
+    );
+    engine.reset();
+  };
+
+  const removeEdge = (edgeIndex) => {
+    setEdges((current) => current.filter((_, index) => index !== edgeIndex));
+    engine.reset();
+  };
+
+  const clearGraph = useCallback(() => {
+    resetGraph([], []);
+    engine.reset();
+  }, [resetGraph, engine]);
+
+  const generateRandomGraph = useCallback(() => {
+    const input = window.prompt("Enter number of nodes (max 20):", "6");
+    if (!input) return;
+    const count = parseInt(input, 10);
+    if (isNaN(count) || count < 2 || count > 20) {
+      alert("Please enter a valid number between 2 and 20.");
+      return;
+    }
+
+    const newNodes = [];
+    for (let i = 0; i < count; i++) {
+      newNodes.push({
+        id: String(i),
+        x: Math.floor(Math.random() * 600) + 100,
+        y: Math.floor(Math.random() * 300) + 50,
+        label: String(i),
+      });
+    }
+
+    const newEdges = [];
+    for (let i = 1; i < count; i++) {
+      const parent = Math.floor(Math.random() * i);
+      newEdges.push({
+        from: String(parent),
+        to: String(i),
+        weight: isWeighted ? Math.floor(Math.random() * 20) + 1 : 1,
+        directed: isDirected
+      });
+    }
+
+    const extraEdges = Math.floor(count * 0.5);
+    for (let i = 0; i < extraEdges; i++) {
+      const fromIdx = Math.floor(Math.random() * count);
+      const toIdx = Math.floor(Math.random() * count);
+      if (fromIdx !== toIdx) {
+        const exists = newEdges.some(e => (e.from === String(fromIdx) && e.to === String(toIdx)) || (!isDirected && e.from === String(toIdx) && e.to === String(fromIdx)));
+        if (!exists) {
+          newEdges.push({
+            from: String(fromIdx),
+            to: String(toIdx),
+            weight: isWeighted ? Math.floor(Math.random() * 20) + 1 : 1,
+            directed: isDirected
+          });
+        }
+      }
+    }
+
+    resetGraph(newNodes, newEdges);
+    engine.reset();
+  }, [isWeighted, isDirected, engine, resetGraph]);
+
+  const reverseEdge = (edgeIndex) => {
+    setEdges((current) =>
+      current.map((edge, index) =>
+        index === edgeIndex ? { ...edge, from: edge.to, to: edge.from } : edge,
+      ),
+    );
+    engine.reset();
+  };
+
+  return (
+    <div className="mt-8 space-y-6">
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center justify-between">
+          <div className="flex flex-wrap items-center gap-2">
+            <button
+              onClick={() => setIsEditing(!isEditing)}
+              className={`flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${
+                isEditing 
+                  ? "bg-primary text-white" 
+                  : "bg-surface-100 text-surface-600 hover:bg-surface-200 dark:bg-surface-800 dark:text-surface-300"
+              }`}
+            >
+              <Settings2 className="h-4 w-4" />
+              {isEditing ? "Editing Mode" : "Visualization Mode"}
+            </button>
+
+            {isEditing && (
+              <>
+                <button
+                  onClick={clearGraph}
+                  className="flex items-center gap-2 rounded-lg bg-red-100 px-3 py-1.5 text-sm font-medium text-red-600 transition-colors hover:bg-red-200 dark:bg-red-900/20 dark:text-red-400 dark:hover:bg-red-900/40"
+                >
+                  <Trash2 className="h-4 w-4" />
+                  Clear Graph
+                </button>
+                <button
+                  onClick={generateRandomGraph}
+                  className="flex items-center gap-2 rounded-lg bg-indigo-100 px-3 py-1.5 text-sm font-medium text-indigo-700 transition-colors hover:bg-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-400 dark:hover:bg-indigo-900/50"
+                >
+                  <Wand2 className="h-4 w-4" />
+                  Random Graph
+                </button>
+              </>
+            )}
+
+            <button
+              onClick={async () => {
+                if (!canvasContainerRef.current || isExporting) return;
+                setIsExporting(true);
+                try {
+                  const html2canvas = (await import("html2canvas")).default;
+                  const canvas = await html2canvas(canvasContainerRef.current, {
+                    backgroundColor: document.documentElement.classList.contains("dark") ? "#0f172a" : "#ffffff",
+                    scale: 2, // High resolution
+                  });
+                  const dataUrl = canvas.toDataURL("image/png");
+                  const a = document.createElement("a");
+                  a.href = dataUrl;
+                  a.download = `algobuddy-${algorithm}-graph.png`;
+                  a.click();
+                } catch (err) {
+                  console.error("Export failed", err);
+                } finally {
+                  setIsExporting(false);
+                }
+              }}
+              disabled={isExporting}
+              className="flex items-center gap-2 rounded-lg bg-green-100 px-3 py-1.5 text-sm font-medium text-green-700 transition-colors hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50"
+            >
+              <Download className="h-4 w-4" />
+              {isExporting ? "Exporting..." : "Export PNG"}
+            </button>
+            
+            <button
+              onClick={() => setIsThemeModalOpen(true)}
+              className="flex items-center gap-2 rounded-lg bg-purple-100 px-3 py-1.5 text-sm font-medium text-purple-700 transition-colors hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:hover:bg-purple-900/50"
+            >
+              <Palette className="h-4 w-4" />
+              Color Themes
+            </button>
+
+            {["dijkstra", "a-star", "ford-fulkerson"].includes(algorithm) && (
+              <div className="flex items-center gap-2 ml-2">
+                <label className="text-sm font-medium text-surface-600 dark:text-surface-300">Target Node:</label>
+                <select
+                  value={targetNode}
+                  onChange={(e) => {
+                    setTargetNode(e.target.value);
+                    engine.reset();
+                  }}
+                  className="bg-surface-50 border border-surface-200 dark:bg-surface-800 dark:border-surface-600 rounded px-2 py-1 text-sm text-surface-900 dark:text-white"
+                >
+                  {algorithm !== "a-star" && <option value="">None (Traverse all)</option>}
+                  {nodes.map(n => (
+                    <option key={n.id} value={n.id}>{n.label || n.id}</option>
+                  ))}
+                </select>
+              </div>
+            )}
+
+            {/* Weighted badge */}
+            {isWeighted && (
+              <span className="rounded-lg border border-yellow-500/30 bg-yellow-500/10 px-3 py-1.5 text-xs font-semibold text-yellow-600 dark:text-yellow-400">
+                Weighted
+              </span>
+            )}
+
+            {/* Directed/Undirected Toggle */}
+            <button
+              onClick={() => {
+                if (!isEditing) return;
+                const nextIsDirected = !isDirected;
+                setIsDirectedManual(nextIsDirected);
+                setEdges(prev => prev.map(e => ({ ...e, directed: nextIsDirected })));
+                engine.reset();
+              }}
+              disabled={!isEditing}
+              className={`rounded-lg border px-3 py-1.5 text-xs font-semibold transition-colors ${
+                isDirected 
+                  ? "border-primary/30 bg-primary/10 text-primary" 
+                  : "border-surface-400/30 bg-surface-400/10 text-surface-600 dark:text-surface-400"
+              } ${isEditing ? "hover:bg-primary/20 cursor-pointer" : "cursor-default"}`}
+            >
+              {isDirected ? "Directed" : "Undirected"}
+            </button>
+
+
+
+            {!isEditing && (
+              <div className="flex flex-wrap items-center gap-2">
+                <div className="flex items-center gap-2 rounded-lg bg-surface-100 px-3 py-1.5 text-sm font-medium text-surface-600 dark:bg-surface-800 dark:text-surface-300">
+                  <Info className="h-4 w-4 text-primary" />
+                  {currentFrameData.description || "Ready to start"}
+                </div>
+                {currentFrameData.queue && currentFrameData.queue.length > 0 && (
+                  <div className="flex items-center gap-2 rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-bold text-primary dark:bg-blue-900/20 dark:text-[#c27cf7]">
+                    Queue: [{currentFrameData.queue.join(", ")}]
+                  </div>
+                )}
+                {currentFrameData.stack && currentFrameData.stack.length > 0 && (
+                  <div className="flex items-center gap-2 rounded-lg bg-purple-50 px-3 py-1.5 text-xs font-bold text-purple-600 dark:bg-purple-900/20 dark:text-[#c27cf7]">
+                    Stack: [{currentFrameData.stack.join(", ")}]
+                  </div>
+                )}
+                {currentFrameData.distances && (
+                  <div className="flex items-center gap-2 rounded-lg bg-yellow-50 px-3 py-1.5 text-xs font-bold text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400">
+                    Distances: {Object.entries(currentFrameData.distances)
+                      .map(([k, v]) => `${nodeLabelById[k] || k}:${v === Infinity ? "∞" : v}`)
+                      .join(", ")}
+                  </div>
+                )}
+                {currentFrameData.pq && (
+                  <div className="flex items-center gap-2 rounded-lg bg-indigo-50 px-3 py-1.5 text-xs font-bold text-indigo-700 dark:bg-indigo-900/20 dark:text-indigo-400">
+                    PQ: [{currentFrameData.pq.map(item => `(${nodeLabelById[item.node] || item.node}:${item.dist})`).join(", ")}]
+                  </div>
+                )}
+                {currentFrameData.intermediate && (
+                  <div className="flex items-center gap-2 rounded-lg bg-amber-50 px-3 py-1.5 text-xs font-bold text-amber-700 dark:bg-amber-900/20 dark:text-amber-300">
+                    k: {nodes.find((node) => node.id === currentFrameData.intermediate)?.label || currentFrameData.intermediate}
+                  </div>
+                )}
+                {currentFrameData.result && currentFrameData.result.length > 0 && (
+                  <div className="flex items-center gap-2 rounded-lg bg-success/10 px-3 py-1.5 text-xs font-bold text-success">
+                    Order: {currentFrameData.result.join(" → ")}
+                  </div>
+                )}
+                {currentFrameData.sccs && currentFrameData.sccs.length > 0 && (
+                  <div className="flex items-center gap-2 rounded-lg bg-cyan-50 px-3 py-1.5 text-xs font-bold text-cyan-700 dark:bg-cyan-900/20 dark:text-cyan-400">
+                    SCCs: {currentFrameData.sccs.map(scc => `[${scc.join(",")}]`).join(" ")}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="flex flex-col lg:flex-row gap-6 items-stretch min-h-[420px]">
+          <div ref={canvasContainerRef} className="flex-1 border rounded-xl overflow-hidden bg-white dark:bg-surface-900 border-surface-200 dark:border-surface-800 flex flex-col">
+            <GraphCanvas
+              nodes={nodes}
+              edges={edges}
+              onAddNode={addNode}
+              onAddEdge={handleAddEdge}
+              onRemoveNode={removeNode}
+              onRemoveEdge={removeEdge}
+              onReverseEdge={reverseEdge}
+              onMoveNode={moveNode}
+              onUpdateEdgeWeight={handleUpdateEdgeWeight}
+              animationState={!isEditing ? currentFrameData : {}}
+              interactive={isEditing}
+              isWeighted={isWeighted}
+              isDirected={isDirected}
+              visitedSet={currentFrameData.visitedNodes}
+              currentNode={currentFrameData.currentNode}
+              className="w-full h-full flex-1"
+            />
+          </div>
+        </div>
+
+        {/* Controls Bar */}
+        <div className="flex flex-col gap-2">
+          {hasNegativeWeightError && (
+            <div className="flex items-center gap-2 rounded-lg bg-red-50 p-3 text-sm font-medium text-red-800 dark:bg-red-900/20 dark:text-red-400">
+              <AlertTriangle className="h-5 w-5 flex-shrink-0" />
+              <p>
+                <strong>Dijkstra's Algorithm cannot handle negative edge weights.</strong> It assumes all weights are non-negative to guarantee shortest paths. Please use <strong>Bellman-Ford</strong> instead, or remove the negative weights.
+              </p>
+            </div>
+          )}
+          <PlaybackControls
+            isPlaying={engine.isPlaying}
+            onPlayPause={togglePlay}
+            speed={engine.speed / 1000}
+            onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+            onStepForward={stepForward}
+            onStepBackward={stepBackward}
+            onReset={reset}
+            progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+            disabled={frames.length === 0 || hasNegativeWeightError}
+          />
+        </div>
+
+      {/* Info & Charts Section */}
+      <div className="grid gap-6 lg:grid-cols-2">
+        <div className="space-y-6">
+          {/* Complexity Card */}
+          <div className="rounded-2xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
+            <div className="mb-4 flex items-center gap-2 text-primary">
+              <BarChart3 className="h-5 w-5" />
+              <h3 className="font-bold">Complexity Analysis</h3>
+            </div>
+            <div className="h-48 w-full">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={complexityData[algorithm]} layout="vertical" margin={{ left: -20, right: 20 }}>
+                  <XAxis type="number" hide domain={[0, 100]} />
+                  <YAxis dataKey="name" type="category" stroke="currentColor" className="text-[10px] text-surface-500" />
+                  <Tooltip 
+                    cursor={{ fill: 'transparent' }}
+                    content={({ active, payload }) => {
+                      if (active && payload && payload.length) {
+                        return (
+                          <div className="rounded-lg border border-surface-200 bg-white p-2 text-xs shadow-lg dark:border-surface-800 dark:bg-surface-950">
+                            <p className="font-bold text-primary">{payload[0].payload.full}</p>
+                            <p className="font-mono font-bold text-surface-900 dark:text-white">{payload[0].payload.label}</p>
+                          </div>
+                        );
+                      }
+                      return null;
+                    }}
+                  />
+                  <Bar dataKey="value" radius={[0, 4, 4, 0]} barSize={20}>
+                    {complexityData[algorithm].map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={index === 0 ? "var(--color-primary)" : "var(--color-success)"} />
+                    ))}
+                  </Bar>
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+            <div className="mt-4 space-y-2">
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-surface-500">Worst Case Time</span>
+                <span className="font-mono font-bold text-primary">{complexityData[algorithm][0].label}</span>
+              </div>
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-surface-500">Worst Case Space</span>
+                <span className="font-mono font-bold text-success">{complexityData[algorithm][1].label}</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Algorithm Comparison */}
+          <div className="rounded-2xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
+            <h3 className="mb-4 text-sm font-bold text-surface-900 dark:text-white">Algorithm Comparison</h3>
+            <div className="h-40 w-full">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={comparisonData}>
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="var(--color-surface-200)" />
+                  <XAxis dataKey="name" stroke="currentColor" className="text-[10px] text-surface-500" />
+                  <YAxis hide />
+                  <Tooltip 
+                    contentStyle={{ backgroundColor: 'var(--color-surface-950)', border: 'none', borderRadius: '8px', fontSize: '10px' }}
+                    itemStyle={{ color: 'white' }}
+                  />
+                  <Bar dataKey="time" fill="var(--color-primary)" radius={[4, 4, 0, 0]} name="Time Complexity Score" />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+            <p className="mt-2 text-[10px] text-surface-500 leading-tight">
+              Higher score indicates more operations or complex data structures involved in the worst case.
+            </p>
+          </div>
+        </div>
+
+      {/* Adjacency Representation & Custom Input */}
+      <div className="grid gap-6 lg:grid-cols-3">
+        <div className="lg:col-span-2 rounded-2xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
+          <h3 className="mb-4 text-sm font-bold text-surface-900 dark:text-white">Adjacency Representation</h3>
+          <AdjacencyPanel
+            nodes={nodes}
+            edges={edges}
+            isDirected={isDirected}
+            isWeighted={isWeighted}
+          />
+          <div className="mt-4 space-y-4">
+            {showFloydMatrix && (
+              <div>
+                <h4 className="mb-2 text-[10px] font-bold uppercase tracking-wider text-surface-500">Floyd-Warshall Distance Matrix</h4>
+                <div className="overflow-auto rounded-lg bg-surface-50 p-3 font-mono text-[11px] dark:bg-surface-950">
+                  <table className="w-full border-collapse text-center">
+                    <thead>
+                      <tr>
+                        <th className="p-1"></th>
+                        {currentFrameData.matrixNodes.map((nodeId) => (
+                          <th
+                            key={nodeId}
+                            className={`p-1 ${
+                              currentFrameData.intermediate === nodeId
+                                ? "text-amber-600 dark:text-amber-300"
+                                : "text-primary"
+                            }`}
+                          >
+                            {nodeLabelById[nodeId]}
+                          </th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {currentFrameData.matrixNodes.map((rowId) => (
+                        <tr key={rowId}>
+                          <td className="p-1 font-bold text-primary">{nodeLabelById[rowId]}</td>
+                          {currentFrameData.matrixNodes.map((colId) => {
+                            const isFocus = currentFrameData.row === rowId && currentFrameData.col === colId;
+                            const isUpdated =
+                              currentFrameData.updatedCell?.row === rowId &&
+                              currentFrameData.updatedCell?.col === colId;
+                            const value = currentFrameData.matrix[rowId][colId];
+                            return (
+                              <td
+                                key={colId}
+                                className={`border border-surface-200 p-1 dark:border-surface-800 ${
+                                  isUpdated
+                                    ? "bg-success/20 text-success"
+                                    : isFocus
+                                      ? "bg-primary/10 text-primary"
+                                      : ""
+                                }`}
+                              >
+                                {value === Infinity ? "INF" : value}
+                              </td>
+                            );
+                          })}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )}
+            <div>
+              <h4 className="mb-2 text-[10px] font-bold uppercase tracking-wider text-surface-500">Adjacency List</h4>
+              <div className="max-h-64 overflow-auto rounded-lg bg-surface-50 p-3 font-mono text-[11px] dark:bg-surface-950">
+                {nodes.map(node => {
+                  const neighbors = edges
+                    .filter(e => e.from === node.id || (!e.directed && e.to === node.id))
+                    .map(e => {
+                      const neighbor = e.from === node.id ? e.to : e.from;
+                      const label = nodeLabelById[neighbor] || neighbor;
+                      return isWeighted ? `${label}(${e.weight})` : label;
+                    });
+                  return (
+                    <div key={node.id} className="mb-1">
+                      <span className="text-primary font-bold">{node.label}</span>: [{neighbors.join(", ")}]
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            <div>
+              <h4 className="mb-2 text-[10px] font-bold uppercase tracking-wider text-surface-500">Adjacency Matrix</h4>
+              <div className="overflow-auto rounded-lg bg-surface-50 p-3 font-mono text-[11px] dark:bg-surface-950">
+                <table className="w-full border-collapse text-center">
+                  <thead>
+                    <tr>
+                      <th className="p-1"></th>
+                      {nodes.map(n => <th key={n.id} className="p-1 text-primary">{n.label}</th>)}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {nodes.map(row => (
+                      <tr key={row.id}>
+                        <td className="p-1 font-bold text-primary">{row.label}</td>
+                        {nodes.map(col => {
+                          const edge = edges.find(e => 
+                            (e.from === row.id && e.to === col.id) || 
+                            (!e.directed && ((e.from === row.id && e.to === col.id) || (e.from === col.id && e.to === row.id)))
+                          );
+                          return (
+                            <td key={col.id} className="border border-surface-200 p-1 dark:border-surface-800">
+                              {edge ? (isWeighted ? edge.weight : 1) : 0}
+                            </td>
+                          );
+                        })}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="lg:col-span-1">
+          <CustomInputPanel
+            inputType="graph"
+            onApply={handleCustomGraphInput}
+            currentData={edges}
+          />
+        </div>
+        </div>
+      </div>
+      
+      <ThemeSettingsModal 
+        isOpen={isThemeModalOpen} 
+        onClose={() => setIsThemeModalOpen(false)} 
+      />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/visualizer/graph/constants/pseudocode.js b/src/app/visualizer/graph/constants/pseudocode.js
new file mode 100644
index 000000000..165baf54e
--- /dev/null
+++ b/src/app/visualizer/graph/constants/pseudocode.js
@@ -0,0 +1,156 @@
+export const ALGORITHM_PSEUDOCODE = {
+  "bfs": [
+    "BFS(G, startNode):",
+    "  let Q be a queue",
+    "  mark startNode as visited",
+    "  Q.enqueue(startNode)",
+    "  while Q is not empty:",
+    "    u = Q.dequeue()",
+    "    for each neighbor v of u:",
+    "      if v is not visited:",
+    "        mark v as visited",
+    "        Q.enqueue(v)"
+  ],
+  "dfs": [
+    "DFS(G, u):",
+    "  mark u as visited",
+    "  push u to stack",
+    "  for each neighbor v of u:",
+    "    if v is not visited:",
+    "      DFS(G, v)",
+    "  pop u from stack"
+  ],
+  "dijkstra": [
+    "Dijkstra(G, startNode):",
+    "  for each node v in G:",
+    "    dist[v] = ∞",
+    "  dist[startNode] = 0",
+    "  let PQ be a priority queue of nodes",
+    "  while PQ is not empty:",
+    "    u = PQ.extractMin()",
+    "    for each neighbor v of u:",
+    "      newDist = dist[u] + weight(u, v)",
+    "      if newDist < dist[v]:",
+    "        dist[v] = newDist",
+    "        PQ.decreaseKey(v, newDist)"
+  ],
+  "a-star": [
+    "AStar(G, startNode, goalNode):",
+    "  for each node v in G:",
+    "    gScore[v] = ∞, fScore[v] = ∞",
+    "  gScore[startNode] = 0",
+    "  fScore[startNode] = h(startNode, goalNode)",
+    "  let openSet be a priority queue of nodes",
+    "  while openSet is not empty:",
+    "    u = openSet.extractMin(fScore)",
+    "    if u == goalNode: return path",
+    "    for each neighbor v of u:",
+    "      newGScore = gScore[u] + weight(u, v)",
+    "      if newGScore < gScore[v]:",
+    "        gScore[v] = newGScore",
+    "        fScore[v] = gScore[v] + h(v, goalNode)",
+    "        openSet.add(v)"
+  ],
+  "bellman-ford": [
+    "BellmanFord(G, startNode):",
+    "  for each node v in G:",
+    "    dist[v] = ∞",
+    "  dist[startNode] = 0",
+    "  for i from 1 to |V|-1:",
+    "    for each edge (u, v) in G:",
+    "      if dist[u] + weight(u,v) < dist[v]:",
+    "        dist[v] = dist[u] + weight(u,v)",
+    "  for each edge (u, v) in G:",
+    "    if dist[u] + weight(u,v) < dist[v]:",
+    "      return 'Negative Cycle Detected'"
+  ],
+  "floyd-warshall": [
+    "FloydWarshall(G):",
+    "  let dist be a |V| x |V| array",
+    "  for each node u, v in G:",
+    "    dist[u][v] = weight(u, v) or ∞",
+    "  for each node k in G:",
+    "    for each node i in G:",
+    "      for each node j in G:",
+    "        if dist[i][j] > dist[i][k] + dist[k][j]:",
+    "          dist[i][j] = dist[i][k] + dist[k][j]"
+  ],
+  "prim": [
+    "Prim(G, startNode):",
+    "  for each node v in G:",
+    "    key[v] = ∞, inMST[v] = false",
+    "  key[startNode] = 0",
+    "  while there are nodes not in MST:",
+    "    u = node not in MST with min key",
+    "    inMST[u] = true",
+    "    for each neighbor v of u:",
+    "      if inMST[v] == false and weight(u, v) < key[v]:",
+    "        key[v] = weight(u, v)"
+  ],
+  "kruskal": [
+    "Kruskal(G):",
+    "  let MST be empty",
+    "  for each node v in G:",
+    "    MakeSet(v)",
+    "  sort edges of G in ascending weight order",
+    "  for each edge (u, v) in sorted edges:",
+    "    if Find(u) != Find(v):",
+    "      add (u, v) to MST",
+    "      Union(u, v)"
+  ],
+  "topological-sort": [
+    "TopologicalSort(G):",
+    "  let inDegree map store incoming edges count",
+    "  let Q be a queue of nodes with inDegree == 0",
+    "  let order be an empty list",
+    "  while Q is not empty:",
+    "    u = Q.dequeue()",
+    "    add u to order",
+    "    for each neighbor v of u:",
+    "      inDegree[v] -= 1",
+    "      if inDegree[v] == 0:",
+    "        Q.enqueue(v)"
+  ],
+  "kosaraju": [
+    "Kosaraju(G):",
+    "  let stack be empty",
+    "  for each node v in G:",
+    "    if v is unvisited: DFS(G, v, stack)",
+    "  reverse all edges in G to create G^T",
+    "  mark all nodes as unvisited",
+    "  while stack is not empty:",
+    "    u = stack.pop()",
+    "    if u is unvisited:",
+    "      DFS(G^T, u, SCC)"
+  ],
+  "tarjan": [
+    "Tarjan(G):",
+    "  let index = 0, stack = empty",
+    "  for each node v in G:",
+    "    if v.index is undefined:",
+    "      StrongConnect(v)",
+    "",
+    "StrongConnect(v):",
+    "  v.index = v.lowlink = index++",
+    "  stack.push(v); v.onStack = true",
+    "  for each neighbor w of v:",
+    "    if w.index is undefined:",
+    "      StrongConnect(w)",
+    "      v.lowlink = min(v.lowlink, w.lowlink)",
+    "    else if w.onStack:",
+    "      v.lowlink = min(v.lowlink, w.index)",
+    "  if v.lowlink == v.index:",
+    "    pop nodes from stack until v is popped"
+  ],
+  "ford-fulkerson": [
+    "FordFulkerson(G, s, t):",
+    "  Initialize max_flow = 0",
+    "  while there exists an augmenting path p from s to t:",
+    "    find bottleneck capacity c on path p",
+    "    for each edge (u, v) in p:",
+    "      flow(u, v) += c",
+    "      flow(v, u) -= c",
+    "    max_flow += c",
+    "  return max_flow"
+  ]
+};
diff --git a/src/app/visualizer/graph/data.js b/src/app/visualizer/graph/data.js
new file mode 100644
index 000000000..6f87893e6
--- /dev/null
+++ b/src/app/visualizer/graph/data.js
@@ -0,0 +1,422 @@
+const baseRelatedLinks = [
+  {
+    key: "adjacency-matrix",
+    text: "Adjacency Matrix",
+    url: "/visualizer/graph/adjacency-matrix",
+  },
+  {
+    key: "adjacency-list",
+    text: "Adjacency List",
+    url: "/visualizer/graph/adjacency-list",
+  },
+  { key: "bfs", text: "BFS", url: "/visualizer/graph/bfs" },
+  { key: "dfs", text: "DFS", url: "/visualizer/graph/dfs" },
+  { key: "dijkstra", text: "Dijkstra", url: "/visualizer/graph/dijkstra" },
+  { key: "bellman-ford", text: "Bellman-Ford", url: "/visualizer/graph/bellman-ford" },
+  { key: "kosaraju", text: "Kosaraju", url: "/visualizer/graph/kosaraju" },
+  {
+    key: "floyd-warshall",
+    text: "Floyd-Warshall",
+    url: "/visualizer/graph/floyd-warshall",
+  },
+  { key: "prim", text: "Prim", url: "/visualizer/graph/prim" },
+  { key: "kruskal", text: "Kruskal", url: "/visualizer/graph/kruskal" },
+  {
+    key: "topological-sort",
+    text: "Topological Sort",
+    url: "/visualizer/graph/topological-sort",
+  },
+  {
+    key: "kosaraju",
+    text: "Kosaraju's Algorithm",
+    url: "/visualizer/graph/kosaraju",
+  },
+  {
+    key: "tarjan",
+    text: "Tarjan's Algorithm",
+    url: "/visualizer/graph/tarjan",
+  },
+  {
+    key: "a-star",
+    text: "A* Search",
+    url: "/visualizer/graph/a-star",
+  },
+  {
+    key: "ford-fulkerson",
+    text: "Ford-Fulkerson",
+    url: "/visualizer/graph/ford-fulkerson",
+  },
+];
+
+export const graphTopics = {
+  "adjacency-matrix": {
+    key: "adjacency-matrix",
+    title: "Adjacency Matrix",
+    category: "Graph Representation",
+    description:
+      "Represent graph connections with a two-dimensional matrix where each cell shows whether an edge exists between two vertices.",
+    animationType: "matrix",
+    summary: [
+      "An adjacency matrix stores graph edges in a V x V grid.",
+      "Cell matrix[i][j] is 1 or the edge weight when vertex i connects to vertex j.",
+      "It gives O(1) edge lookup, but uses O(V^2) space even for sparse graphs.",
+    ],
+    steps: [
+      "List all vertices as rows and columns.",
+      "Mark matrix[i][j] when an edge connects vertex i to vertex j.",
+      "Mirror the value for undirected graphs.",
+      "Use weights instead of 1 for weighted graphs.",
+    ],
+    complexity: [
+      { label: "Space", value: "O(V^2)" },
+      { label: "Edge lookup", value: "O(1)" },
+      { label: "List neighbors", value: "O(V)" },
+    ],
+  },
+  "a-star": {
+    key: "a-star",
+    title: "A* Search",
+    category: "Shortest Path",
+    description: "Find the shortest path to a specific goal node by combining actual distance (g) with a heuristic estimate (h).",
+    animationType: "a-star",
+    summary: [
+      "A* evaluates nodes based on f = g + h.",
+      "g is the exact cost from the start node.",
+      "h is the estimated cost (heuristic) to the goal.",
+      "In this visualizer, the heuristic uses Euclidean distance based on the nodes' X/Y coordinates.",
+    ],
+    steps: [
+      "Initialize open set with start node (g=0, f=h).",
+      "Pick node from open set with lowest f-score.",
+      "If it's the goal, reconstruct and return the path.",
+      "Otherwise, check neighbors, update g-scores, and add to open set if shorter.",
+    ],
+    complexity: [
+      { label: "Time", value: "O(E)" },
+      { label: "Space", value: "O(V)" },
+      { label: "Heuristic", value: "Euclidean" },
+    ],
+  },
+  "adjacency-list": {
+    key: "adjacency-list",
+    title: "Adjacency List",
+    category: "Graph Representation",
+    description:
+      "Represent each vertex with a list of neighbors, making sparse graphs compact and easy to traverse.",
+    animationType: "list",
+    summary: [
+      "An adjacency list maps every vertex to the vertices directly connected to it.",
+      "It uses space proportional to vertices plus edges.",
+      "It is the common default for traversal and graph algorithms on sparse graphs.",
+    ],
+    steps: [
+      "Create one list for every vertex.",
+      "Append each destination vertex to the source list.",
+      "For undirected graphs, append both directions.",
+      "Store edge weights beside neighbors when needed.",
+    ],
+    complexity: [
+      { label: "Space", value: "O(V + E)" },
+      { label: "Edge lookup", value: "O(degree)" },
+      { label: "List neighbors", value: "O(degree)" },
+    ],
+  },
+  bfs: {
+    key: "bfs",
+    title: "Breadth-First Search",
+    category: "Graph Traversal",
+    description:
+      "Explore a graph level by level using a queue, visiting all nearest vertices before moving deeper.",
+    animationType: "bfs",
+    summary: [
+      "BFS starts from one source vertex and explores neighbors level by level.",
+      "A queue preserves the order of discovery.",
+      "It finds shortest paths in unweighted graphs.",
+    ],
+    steps: [
+      "Push the start vertex into a queue and mark it visited.",
+      "Remove the front vertex from the queue.",
+      "Visit each unvisited neighbor and push it into the queue.",
+      "Repeat until the queue is empty.",
+    ],
+    complexity: [
+      { label: "Time", value: "O(V + E)" },
+      { label: "Space", value: "O(V)" },
+      { label: "Best for", value: "Unweighted shortest path" },
+    ],
+  },
+  dfs: {
+    key: "dfs",
+    title: "Depth-First Search",
+    category: "Graph Traversal",
+    description:
+      "Explore as far as possible along one path before backtracking to visit remaining branches.",
+    animationType: "dfs",
+    summary: [
+      "DFS dives deep into one branch before returning to alternatives.",
+      "It can be implemented with recursion or an explicit stack.",
+      "It is useful for connected components, cycle checks, and topological ordering.",
+    ],
+    steps: [
+      "Start from a vertex and mark it visited.",
+      "Move to an unvisited neighbor.",
+      "Continue until no unvisited neighbor remains.",
+      "Backtrack and explore the next available branch.",
+    ],
+    complexity: [
+      { label: "Time", value: "O(V + E)" },
+      { label: "Space", value: "O(V)" },
+      { label: "Best for", value: "Reachability and cycles" },
+    ],
+  },
+  dijkstra: {
+    key: "dijkstra",
+    title: "Dijkstra's Algorithm",
+    category: "Advanced Graphs",
+    description:
+      "Find shortest paths from one source to all vertices in a weighted graph with non-negative edge weights.",
+    animationType: "dijkstra",
+    summary: [
+      "Dijkstra keeps the shortest known distance to each vertex.",
+      "The next vertex chosen is always the unvisited one with the smallest distance.",
+      "It does not support negative edge weights.",
+    ],
+    steps: [
+      "Set source distance to 0 and all others to infinity.",
+      "Pick the unvisited vertex with the smallest distance.",
+      "Relax all outgoing edges from that vertex.",
+      "Repeat until all reachable vertices are finalized.",
+    ],
+    complexity: [
+      { label: "Time", value: "O((V + E) log V)" },
+      { label: "Space", value: "O(V)" },
+      { label: "Requirement", value: "No negative weights" },
+    ],
+  },
+  "floyd-warshall": {
+    key: "floyd-warshall",
+    title: "Floyd-Warshall Algorithm",
+    category: "Graph Algorithm",
+    description:
+      "Find the shortest paths between every pair of vertices by repeatedly allowing one more intermediate vertex.",
+    animationType: "floyd-warshall",
+    summary: [
+      "Floyd-Warshall computes all-pairs shortest paths with dynamic programming.",
+      "The distance matrix starts with direct edge weights, zeroes on the diagonal, and infinity for unreachable pairs.",
+      "For each intermediate vertex k, it checks whether i -> k -> j improves the current distance from i to j.",
+    ],
+    steps: [
+      "Initialize a V x V distance matrix from the weighted graph.",
+      "Choose each vertex k as the allowed intermediate vertex.",
+      "For every source i and destination j, compare dist[i][j] with dist[i][k] + dist[k][j].",
+      "Update dist[i][j] when the route through k is shorter.",
+      "After all k values are processed, the matrix stores shortest distances for every ordered pair.",
+    ],
+    complexity: [
+      { label: "Time", value: "O(V^3)" },
+      { label: "Space", value: "O(V^2)" },
+      { label: "Output", value: "All-pairs shortest paths" },
+    ],
+  },
+  prim: {
+    key: "prim",
+    title: "Prim's Algorithm",
+    category: "Minimum Spanning Tree",
+    description:
+      "Build a minimum spanning tree by repeatedly adding the cheapest edge from the current tree to a new vertex.",
+    animationType: "prim",
+    summary: [
+      "Prim grows one connected tree from an arbitrary start vertex.",
+      "At each step it chooses the lowest-weight edge leaving the current tree.",
+      "It works on connected, weighted, undirected graphs.",
+    ],
+    steps: [
+      "Start from any vertex.",
+      "Find all edges that connect the tree to an unvisited vertex.",
+      "Choose the smallest such edge.",
+      "Add the edge and vertex to the tree until all vertices are included.",
+    ],
+    complexity: [
+      { label: "Time", value: "O(E log V)" },
+      { label: "Space", value: "O(V)" },
+      { label: "Output", value: "Minimum spanning tree" },
+    ],
+  },
+  kruskal: {
+    key: "kruskal",
+    title: "Kruskal's Algorithm",
+    category: "Minimum Spanning Tree",
+    description:
+      "Build a minimum spanning tree by sorting edges and adding the smallest edges that do not create a cycle.",
+    animationType: "kruskal",
+    summary: [
+      "Kruskal sorts all edges by weight.",
+      "It adds the next smallest edge only when it connects two different components.",
+      "Union-Find is used to detect cycles efficiently.",
+    ],
+    steps: [
+      "Sort all graph edges by ascending weight.",
+      "Start with every vertex in its own component.",
+      "Take the next smallest edge.",
+      "Add it if it connects two different components; otherwise skip it.",
+      "Stop after selecting V - 1 edges.",
+    ],
+    complexity: [
+      { label: "Time", value: "O(E log E)" },
+      { label: "Space", value: "O(V)" },
+      { label: "Output", value: "Minimum spanning tree" },
+    ],
+  },
+  "topological-sort": {
+    key: "topological-sort",
+    title: "Topological Sort",
+    category: "Directed Acyclic Graph",
+    description:
+      "Order vertices so every directed edge points from an earlier vertex to a later vertex.",
+    animationType: "topological",
+    summary: [
+      "Topological sort works only on directed acyclic graphs.",
+      "It is useful for dependency scheduling and build order problems.",
+      "Kahn's algorithm repeatedly removes vertices with zero incoming edges.",
+    ],
+    steps: [
+      "Compute indegree for each vertex.",
+      "Push all zero-indegree vertices into a queue.",
+      "Remove one vertex and append it to the order.",
+      "Decrease indegree of its neighbors.",
+      "Repeat until all vertices are ordered.",
+    ],
+    complexity: [
+      { label: "Time", value: "O(V + E)" },
+      { label: "Space", value: "O(V)" },
+      { label: "Requires", value: "DAG" },
+    ],
+  },
+
+  "bellman-ford": {
+    key: "bellman-ford",
+    title: "Bellman-Ford Algorithm",
+    category: "Graph Algorithm",
+    description:
+      "Find shortest paths from a source vertex to all others, handling negative weight edges and detecting negative weight cycles.",
+    animationType: "bellman-ford",
+    summary: [
+      "Bellman-Ford relaxes all edges V-1 times, where V is the number of vertices.",
+      "Unlike Dijkstra, it correctly handles negative weight edges.",
+      "A final extra pass over all edges detects negative weight cycles.",
+      "If any distance still improves in the final pass, a negative cycle exists.",
+    ],
+    steps: [
+      "Set distance to source as 0 and all other distances to infinity.",
+      "Repeat V-1 times: for every edge (u, v, w), if dist[u] + w < dist[v], update dist[v].",
+      "Run one more pass over all edges.",
+      "If any distance improves, a negative cycle is present in the graph.",
+    ],
+    complexity: [
+      { label: "Time", value: "O(V * E)" },
+      { label: "Space", value: "O(V)" },
+      { label: "Best for", value: "Negative weight edges / cycle detection" },
+    ],
+  },
+  kosaraju: {
+    key: "kosaraju",
+    title: "Kosaraju's Algorithm",
+    category: "Strongly Connected Components",
+    description:
+      "Find Strongly Connected Components (SCCs) in a directed graph using two passes of Depth-First Search (DFS).",
+    animationType: "kosaraju",
+    summary: [
+      "Kosaraju's algorithm uses two DFS passes.",
+      "First pass finds the finishing times of nodes in the original graph.",
+      "Second pass runs DFS on the transposed (reversed) graph in order of decreasing finishing time.",
+    ],
+    steps: [
+      "Run DFS on the original graph and push finished nodes to a stack.",
+      "Reverse the direction of all edges to create a transposed graph.",
+      "Pop nodes from the stack and run DFS on unvisited nodes in the transposed graph.",
+      "Each resulting DFS forest is a Strongly Connected Component.",
+    ],
+    complexity: [
+      { label: "Time", value: "O(V + E)" },
+      { label: "Space", value: "O(V + E)" },
+      { label: "Best for", value: "Finding SCCs efficiently" },
+    ],
+  },
+  tarjan: {
+    key: "tarjan",
+    title: "Tarjan's Algorithm",
+    category: "Strongly Connected Components",
+    description:
+      "Find Strongly Connected Components (SCCs) in a single pass using a stack and tracking low-link values.",
+    animationType: "tarjan",
+    summary: [
+      "Tarjan's algorithm finds SCCs in a single DFS pass.",
+      "It maintains an id, a low-link value, and a boolean for whether a node is on the current stack.",
+      "An SCC is found when a node's id matches its low-link value after returning from its descendants.",
+    ],
+    steps: [
+      "Run DFS, assigning IDs and low-link values, pushing nodes to a stack.",
+      "Update a node's low-link value based on descendants and back-edges to nodes on the stack.",
+      "If a node's ID equals its low-link value, it is the root of an SCC.",
+      "Pop the stack to extract all nodes in this newly discovered SCC.",
+    ],
+    complexity: [
+      { label: "Time", value: "O(V + E)" },
+      { label: "Space", value: "O(V)" },
+      { label: "Best for", value: "Single-pass SCC finding" },
+    ],
+  },
+  "a-star": {
+    key: "a-star",
+    title: "A* Search Algorithm",
+    category: "Pathfinding",
+    description: "Find the shortest path using a heuristic to guide the search efficiently.",
+    animationType: "a-star",
+    summary: [
+      "A* is an informed search algorithm.",
+      "It uses f(n) = g(n) + h(n) where g is the cost from start and h is the estimated cost to goal.",
+      "It is optimal if the heuristic is admissible."
+    ],
+    steps: [
+      "Initialize open set with the start node.",
+      "Pick the node with the lowest f(n).",
+      "If it's the goal, reconstruct the path.",
+      "Otherwise, expand neighbors and update their g and f scores."
+    ],
+    complexity: [
+      { label: "Time", value: "O(E)" },
+      { label: "Space", value: "O(V)" },
+      { label: "Best for", value: "Shortest path with heuristic" }
+    ],
+  },
+  "ford-fulkerson": {
+    key: "ford-fulkerson",
+    title: "Ford-Fulkerson Algorithm",
+    category: "Network Flow",
+    description: "Find the maximum flow in a flow network by finding augmenting paths.",
+    animationType: "ford-fulkerson",
+    summary: [
+      "Ford-Fulkerson computes the maximum flow in a network.",
+      "It repeatedly finds an augmenting path from source to sink in the residual graph.",
+      "The Edmonds-Karp implementation uses BFS to guarantee O(V E^2) time."
+    ],
+    steps: [
+      "Initialize flow to 0 on all edges.",
+      "Find an augmenting path using BFS.",
+      "Find the bottleneck capacity on this path.",
+      "Augment the flow by this capacity and update residual edges.",
+      "Repeat until no augmenting path exists."
+    ],
+    complexity: [
+      { label: "Time", value: "O(V E^2)" },
+      { label: "Space", value: "O(V^2)" },
+      { label: "Best for", value: "Maximum Flow / Minimum Cut" }
+    ],
+  }
+};
+
+export function getGraphRelatedLinks(currentKey) {
+  return baseRelatedLinks
+    .filter((link) => link.key !== currentKey)
+    .map(({ key, ...link }) => link);
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/kosaraju/page.jsx b/src/app/visualizer/graph/kosaraju/page.jsx
new file mode 100644
index 000000000..ff947118a
--- /dev/null
+++ b/src/app/visualizer/graph/kosaraju/page.jsx
@@ -0,0 +1,153 @@
+"use client";
+import React, { useState } from "react";
+import Link from "next/link";
+
+const KosarajuVisualizer = () => {
+  const [nodes, setNodes] = useState(6);
+  const [edges, setEdges] = useState([
+    [0, 1], [1, 2], [2, 0], [1, 3], [3, 4], [4, 5], [5, 3]
+  ]);
+  const [steps, setSteps] = useState([]);
+  const [currentStep, setCurrentStep] = useState(-1);
+  const [sccs, setSccs] = useState([]);
+  const [isRunning, setIsRunning] = useState(false);
+
+  const kosaraju = () => {
+    const visited = new Array(nodes).fill(false);
+    const stack = [];
+    const result = [];
+
+    const dfs1 = (v) => {
+      visited[v] = true;
+      for (let [u, w] of edges) {
+        if (u === v && !visited[w]) dfs1(w);
+      }
+      stack.push(v);
+    };
+
+    const dfs2 = (v, component, transposed) => {
+      visited[v] = true;
+      component.push(v);
+      for (let [u, w] of transposed) {
+        if (u === v && !visited[w]) dfs2(w, component, transposed);
+      }
+    };
+
+    for (let i = 0; i < nodes; i++) {
+      if (!visited[i]) dfs1(i);
+    }
+
+    const transposed = edges.map(([u, v]) => [v, u]);
+    visited.fill(false);
+    const newSteps = [];
+
+    while (stack.length) {
+      const v = stack.pop();
+      if (!visited[v]) {
+        const component = [];
+        dfs2(v, component, transposed);
+        result.push(component);
+        newSteps.push([...component]);
+      }
+    }
+
+    setSccs(result);
+    setSteps(newSteps);
+    setCurrentStep(0);
+  };
+
+  const colors = [
+    "bg-purple-200", "bg-teal-200", "bg-pink-200",
+    "bg-yellow-200", "bg-blue-200", "bg-green-200"
+  ];
+
+  const getNodeColor = () => {
+    if (currentStep < 0) return {};
+    const colorMap = {};
+    sccs.slice(0, currentStep + 1).forEach((scc, i) => {
+      scc.forEach(node => { colorMap[node] = colors[i % colors.length]; });
+    });
+    return colorMap;
+  };
+
+  const nodeColors = getNodeColor();
+
+  const positions = [
+    { x: 200, y: 80 }, { x: 350, y: 80 }, { x: 275, y: 200 },
+    { x: 500, y: 80 }, { x: 575, y: 200 }, { x: 500, y: 300 }
+  ];
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto">
+      <h1 className="text-3xl font-bold mb-2">Kosaraju's Algorithm</h1>
+      <p className="text-gray-500 mb-6">Strongly Connected Components Visualizer</p>
+
+      <div className="bg-gray-50 rounded-xl p-4 mb-6 border">
+        <svg width="700" height="350">
+          {edges.map(([u, v], i) => (
+            <g key={i}>
+              <defs>
+                <marker id={`arrow-${i}`} markerWidth="6" markerHeight="6"
+                  refX="6" refY="3" orient="auto">
+                  <path d="M0,0 L0,6 L6,3 z" fill="#888" />
+                </marker>
+              </defs>
+              <line
+                x1={positions[u].x} y1={positions[u].y}
+                x2={positions[v].x} y2={positions[v].y}
+                stroke="#888" strokeWidth="2"
+                markerEnd={`url(#arrow-${i})`}
+              />
+            </g>
+          ))}
+          {positions.map((pos, i) => (
+            <g key={i}>
+              <circle cx={pos.x} cy={pos.y} r="24"
+                fill={nodeColors[i] ? nodeColors[i].replace("bg-", "").replace("-200", "") : "#e5e7eb"}
+                stroke="#6d28d9" strokeWidth="2" />
+              <text x={pos.x} y={pos.y + 5} textAnchor="middle"
+                fontSize="14" fontWeight="bold" fill="#1f2937">{i}</text>
+            </g>
+          ))}
+        </svg>
+      </div>
+
+      <div className="flex gap-3 mb-6">
+        <button onClick={kosaraju}
+          className="bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700">
+          Run Kosaraju
+        </button>
+        {currentStep >= 0 && currentStep < steps.length - 1 && (
+          <button onClick={() => setCurrentStep(s => s + 1)}
+            className="bg-teal-600 text-white px-6 py-2 rounded-lg hover:bg-teal-700">
+            Next SCC
+          </button>
+        )}
+        <button onClick={() => { setSteps([]); setCurrentStep(-1); setSccs([]); }}
+          className="bg-gray-400 text-white px-6 py-2 rounded-lg hover:bg-gray-500">
+          Reset
+        </button>
+        <Link href="/visualizer/graph/algorithms/quiz/kosaraju">
+          <button className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg font-medium ml-auto">
+            Take Quiz
+          </button>
+        </Link>
+      </div>
+
+      {sccs.length > 0 && (
+        <div className="bg-white border rounded-xl p-4">
+          <h2 className="font-semibold text-lg mb-3">Strongly Connected Components</h2>
+          <div className="flex flex-wrap gap-3">
+            {sccs.slice(0, currentStep + 1).map((scc, i) => (
+              <div key={i} className={`${colors[i % colors.length]} px-4 py-2 rounded-lg`}>
+                <span className="font-medium">SCC {i + 1}:</span> {"{" + scc.join(", ") + "}"}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default KosarajuVisualizer;
\ No newline at end of file
diff --git a/src/app/visualizer/graph/quiz/page.jsx b/src/app/visualizer/graph/quiz/page.jsx
new file mode 100644
index 000000000..8a3920f37
--- /dev/null
+++ b/src/app/visualizer/graph/quiz/page.jsx
@@ -0,0 +1,10 @@
+import Quiz from "./quiz";
+
+export const metadata = {
+  title: "Graph Algorithms Quiz | AlgoBuddy",
+  description: "Test your understanding of Graph algorithms including BFS, DFS, Dijkstra, MST, and more.",
+};
+
+export default function Page() {
+  return <Quiz />;
+}
diff --git a/src/app/visualizer/graph/quiz/quiz.jsx b/src/app/visualizer/graph/quiz/quiz.jsx
new file mode 100644
index 000000000..37abae434
--- /dev/null
+++ b/src/app/visualizer/graph/quiz/quiz.jsx
@@ -0,0 +1,210 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const GraphAlgorithmsQuiz = () => {
+  const questions = [
+    {
+      question: "Which of the following describes a Graph in data structures?",
+      options: [
+        "A linear sequence of elements",
+        "A hierarchical structure with a single root",
+        "A collection of vertices (nodes) and edges connecting them",
+        "A continuous block of allocated memory"
+      ],
+      correctAnswer: 2,
+      explanation: "A graph is a non-linear data structure consisting of nodes (vertices) connected by links (edges)."
+    },
+    {
+      question: "What is the key difference between a Directed Graph and an Undirected Graph?",
+      options: [
+        "Directed graphs cannot have cycles",
+        "Edges in a directed graph have a specific direction (from one node to another), while undirected edges are bidirectional",
+        "Undirected graphs can only have positive edge weights",
+        "Directed graphs must be connected, whereas undirected graphs do not"
+      ],
+      correctAnswer: 1,
+      explanation: "In a directed graph, edges act like one-way streets. In an undirected graph, an edge between A and B allows traversal in both directions."
+    },
+    {
+      question: "What is an Adjacency Matrix?",
+      options: [
+        "A 2D array where matrix[i][j] indicates whether there is an edge between vertex i and j",
+        "A list where each vertex holds an array of its neighbors",
+        "A tree structure used to store graph edges",
+        "A hash map mapping edges to weights"
+      ],
+      correctAnswer: 0,
+      explanation: "An adjacency matrix uses a V x V 2D array, where each cell (i, j) represents the presence (and optionally weight) of an edge between vertices i and j."
+    },
+    {
+      question: "When is an Adjacency List generally preferred over an Adjacency Matrix?",
+      options: [
+        "When the graph is dense (has many edges)",
+        "When checking for the existence of a specific edge needs to be O(1)",
+        "When the graph is sparse (has relatively few edges)",
+        "When the graph requires a Minimum Spanning Tree"
+      ],
+      correctAnswer: 2,
+      explanation: "For sparse graphs, an Adjacency List saves significant memory (O(V + E)) compared to the O(V^2) space of an Adjacency Matrix."
+    },
+    {
+      question: "Which data structure is fundamentally used to implement Breadth-First Search (BFS)?",
+      options: [
+        "Stack",
+        "Queue",
+        "Priority Queue",
+        "Linked List"
+      ],
+      correctAnswer: 1,
+      explanation: "BFS uses a Queue to explore neighbors level-by-level in a First-In-First-Out (FIFO) manner."
+    },
+    {
+      question: "Which algorithm naturally explores as deeply as possible along each branch before backtracking?",
+      options: [
+        "Breadth-First Search (BFS)",
+        "Depth-First Search (DFS)",
+        "Dijkstra's Algorithm",
+        "Kruskal's Algorithm"
+      ],
+      correctAnswer: 1,
+      explanation: "DFS (Depth-First Search) goes deep into a graph branch by branch, commonly implemented recursively or with a Stack."
+    },
+    {
+      question: "What is the time complexity of BFS and DFS on a graph represented using an Adjacency List?",
+      options: [
+        "O(V)",
+        "O(E)",
+        "O(V + E)",
+        "O(V²)"
+      ],
+      correctAnswer: 2,
+      explanation: "Both BFS and DFS visit every vertex once and examine every edge once, resulting in O(V + E) time."
+    },
+    {
+      question: "What is a Connected Component in an undirected graph?",
+      options: [
+        "A subgraph where any two vertices are connected to each other by paths",
+        "A cycle within the graph",
+        "A vertex with a high degree",
+        "A graph with no edges"
+      ],
+      correctAnswer: 0,
+      explanation: "A connected component is a maximal set of vertices such that there is a path between every pair of vertices in the set."
+    },
+    {
+      question: "Which of the following methods can be used to detect a cycle in a Directed Graph?",
+      options: [
+        "Keeping a single visited set in BFS",
+        "Using DFS and maintaining a recursion stack (or tracking current path)",
+        "Using Dijkstra's algorithm",
+        "Sorting the adjacency matrix"
+      ],
+      correctAnswer: 1,
+      explanation: "In a directed graph, a cycle is detected if a DFS encounters a vertex that is currently in the recursion stack (an ancestor)."
+    },
+    {
+      question: "What is Topological Sorting?",
+      options: [
+        "Sorting vertices by their degree",
+        "A linear ordering of vertices such that for every directed edge U->V, U comes before V",
+        "Sorting edges by their weights",
+        "A way to sort the components of an undirected graph"
+      ],
+      correctAnswer: 1,
+      explanation: "Topological sorting linearly orders vertices of a Directed Acyclic Graph (DAG) such that all directed edges point from left to right."
+    },
+    {
+      question: "Which of the following is true about Topological Sort?",
+      options: [
+        "It can be applied to any graph",
+        "It can only be applied to undirected graphs",
+        "It can only be applied to Directed Acyclic Graphs (DAGs)",
+        "It is used to find the shortest path"
+      ],
+      correctAnswer: 2,
+      explanation: "Topological sort is only possible for Directed Acyclic Graphs. If there is a cycle, a valid linear ordering cannot exist."
+    },
+    {
+      question: "Dijkstra's Algorithm is used to find:",
+      options: [
+        "The Longest Path from a source to all other nodes",
+        "The Shortest Path from a single source to all other nodes in a graph with non-negative weights",
+        "The Minimum Spanning Tree of a graph",
+        "All-pairs shortest paths"
+      ],
+      correctAnswer: 1,
+      explanation: "Dijkstra's finds the single-source shortest path. It requires non-negative edge weights to work correctly."
+    },
+    {
+      question: "Which data structure is typically used to optimize Dijkstra's Algorithm?",
+      options: [
+        "Stack",
+        "Queue",
+        "Min-Priority Queue (or Min-Heap)",
+        "Hash Set"
+      ],
+      correctAnswer: 2,
+      explanation: "A Min-Priority Queue efficiently extracts the vertex with the current minimum distance, optimizing the algorithm to O((V+E) log V)."
+    },
+    {
+      question: "Which algorithm should be used to find the shortest path when a graph contains negative weight edges?",
+      options: [
+        "Dijkstra's Algorithm",
+        "Prim's Algorithm",
+        "Breadth-First Search",
+        "Bellman-Ford Algorithm"
+      ],
+      correctAnswer: 3,
+      explanation: "Bellman-Ford can handle negative weights and can also detect negative weight cycles, unlike Dijkstra's."
+    },
+    {
+      question: "What is a Minimum Spanning Tree (MST)?",
+      options: [
+        "A tree that includes all vertices of a connected, undirected graph with the minimum possible total edge weight",
+        "A tree that connects the shortest path between any two random nodes",
+        "A binary search tree formed from graph edges",
+        "A graph without any leaves"
+      ],
+      correctAnswer: 0,
+      explanation: "An MST spans all vertices of an undirected, weighted graph without cycles, ensuring the sum of the edge weights is minimized."
+    },
+    {
+      question: "How does Prim's Algorithm build a Minimum Spanning Tree?",
+      options: [
+        "By sorting all edges and adding them if they don't form a cycle",
+        "By starting from an arbitrary vertex and greedily adding the cheapest edge connecting the growing tree to a new vertex",
+        "By relaxing all edges V-1 times",
+        "By removing the most expensive edges one by one"
+      ],
+      correctAnswer: 1,
+      explanation: "Prim's builds the MST incrementally from a starting node, continually picking the smallest edge that expands the tree to an unvisited node."
+    },
+    {
+      question: "How does Kruskal's Algorithm build a Minimum Spanning Tree?",
+      options: [
+        "By sorting all edges by weight and adding them one by one, skipping those that form a cycle",
+        "By growing a tree from a single source vertex",
+        "By running BFS from every node",
+        "By repeatedly identifying the shortest path between all pairs of nodes"
+      ],
+      correctAnswer: 0,
+      explanation: "Kruskal's uses a greedy approach, processing edges in increasing order of weight and using a Disjoint Set (Union-Find) to avoid cycles."
+    },
+    {
+      question: "What is the primary use of the Disjoint Set (Union-Find) data structure in graph algorithms?",
+      options: [
+        "Finding the shortest path",
+        "Implementing BFS efficiently",
+        "Keeping track of connected components and detecting cycles (e.g., in Kruskal's algorithm)",
+        "Sorting the vertices"
+      ],
+      correctAnswer: 2,
+      explanation: "Union-Find efficiently tracks sets of elements. It is heavily used in Kruskal's algorithm to determine if adding an edge creates a cycle."
+    }
+  ];
+
+  return <QuizEngine title="Graph Algorithms Quiz" questions={questions} />;
+};
+
+export default GraphAlgorithmsQuiz;
diff --git a/src/app/visualizer/graph/representation/quiz/GraphRepresentationQuizClient.jsx b/src/app/visualizer/graph/representation/quiz/GraphRepresentationQuizClient.jsx
new file mode 100644
index 000000000..db817c268
--- /dev/null
+++ b/src/app/visualizer/graph/representation/quiz/GraphRepresentationQuizClient.jsx
@@ -0,0 +1,74 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { ArrowRight, Network } from "lucide-react";
+
+const quizzes = [
+  {
+    title: "Adjacency Matrix Quiz",
+    description:
+      "Practice graph representation using Adjacency Matrix, its properties, implementation, and complexity.",
+    href: "/visualizer/graph/representation/quiz/adjacency-matrix",
+  },
+  {
+    title: "Adjacency List Quiz",
+    description:
+      "Test your understanding of Adjacency List representation, traversal, memory usage, and applications.",
+    href: "/visualizer/graph/representation/quiz/adjacency-list",
+  },
+];
+
+export default function GraphRepresentationQuizClient() {
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <div className="mx-auto max-w-7xl px-6 py-12">
+        <motion.div
+          initial={{ opacity: 0, y: 25 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="mb-10"
+        >
+          <h1 className="text-4xl font-bold">
+            📊 Graph Representation Quiz
+          </h1>
+
+          <p className="mt-3 text-muted-foreground">
+            Practice Graph Representation concepts through interactive quizzes.
+          </p>
+        </motion.div>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.05 }}
+              className="rounded-2xl border border-cyan-500/20 bg-card p-6 shadow-sm transition-all hover:shadow-lg"
+            >
+              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-cyan-500/10 text-cyan-600">
+                <Network size={24} />
+              </div>
+
+              <h2 className="text-xl font-semibold">
+                {quiz.title}
+              </h2>
+
+              <p className="mt-2 text-sm text-muted-foreground">
+                {quiz.description}
+              </p>
+
+              <Link href={quiz.href}>
+                <button className="mt-6 flex w-full items-center justify-center gap-2 rounded-xl bg-cyan-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-cyan-700">
+                  <span>Start Quiz</span>
+                  <ArrowRight size={18} />
+                </button>
+              </Link>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/representation/quiz/adjacency-list/page.jsx b/src/app/visualizer/graph/representation/quiz/adjacency-list/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/graph/representation/quiz/adjacency-list/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/representation/quiz/adjacency-list/quiz.jsx b/src/app/visualizer/graph/representation/quiz/adjacency-list/quiz.jsx
new file mode 100644
index 000000000..4da21548e
--- /dev/null
+++ b/src/app/visualizer/graph/representation/quiz/adjacency-list/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is an Adjacency List?",
+    options: [
+      "A two-dimensional matrix",
+      "A list where each vertex stores its neighboring vertices",
+      "A binary search tree",
+      "A stack of graph nodes"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "An Adjacency List represents a graph by storing a list of adjacent vertices for each vertex."
+  },
+  {
+    question: "Which data structure is commonly used to implement an Adjacency List?",
+    options: [
+      "Array of Linked Lists",
+      "Stack",
+      "Queue",
+      "Heap"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "An Adjacency List is commonly implemented using an array (or vector) of linked lists or dynamic arrays."
+  },
+  {
+    question: "What is the space complexity of an Adjacency List?",
+    options: [
+      "O(V²)",
+      "O(V + E)",
+      "O(E²)",
+      "O(log V)"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "An Adjacency List stores only the existing edges, requiring O(V + E) space."
+  },
+  {
+    question: "Adjacency Lists are most suitable for:",
+    options: [
+      "Dense graphs",
+      "Sparse graphs",
+      "Complete graphs only",
+      "Binary trees only"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Sparse graphs benefit from the lower memory usage of Adjacency Lists."
+  },
+  {
+    question: "What is the average time complexity to check whether an edge exists using an Adjacency List?",
+    options: [
+      "O(1)",
+      "O(log V)",
+      "O(degree of the vertex)",
+      "O(V²)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The neighbors of the source vertex must be searched, giving O(degree(vertex)) time."
+  },
+  {
+    question: "In an undirected graph, an edge (A, B) is stored:",
+    options: [
+      "Only in A's list",
+      "Only in B's list",
+      "In both A's and B's adjacency lists",
+      "Nowhere"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "For undirected graphs, each edge appears in the adjacency list of both connected vertices."
+  },
+  {
+    question: "Which graph traversal algorithms commonly use an Adjacency List?",
+    options: [
+      "DFS",
+      "BFS",
+      "Both DFS and BFS",
+      "Heap Sort"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Both Depth-First Search and Breadth-First Search are efficiently implemented using Adjacency Lists."
+  },
+  {
+    question: "What is one major advantage of an Adjacency List over an Adjacency Matrix?",
+    options: [
+      "Constant-time edge lookup",
+      "Lower memory usage for sparse graphs",
+      "Stores all possible edges",
+      "Always faster traversal"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Adjacency Lists use much less memory when the graph contains relatively few edges."
+  },
+  {
+    question: "How many adjacency lists are maintained for a graph with V vertices?",
+    options: [
+      "V",
+      "E",
+      "V × V",
+      "V + E"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Each vertex maintains one adjacency list containing its neighbors."
+  },
+  {
+    question: "Which representation is generally preferred for sparse graphs?",
+    options: [
+      "Adjacency Matrix",
+      "Adjacency List",
+      "Incidence Matrix",
+      "Edge Matrix"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Adjacency Lists efficiently store only existing edges, making them ideal for sparse graphs."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Adjacency List Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/representation/quiz/adjacency-matrix/page.jsx b/src/app/visualizer/graph/representation/quiz/adjacency-matrix/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/graph/representation/quiz/adjacency-matrix/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/representation/quiz/adjacency-matrix/quiz.jsx b/src/app/visualizer/graph/representation/quiz/adjacency-matrix/quiz.jsx
new file mode 100644
index 000000000..8149254e3
--- /dev/null
+++ b/src/app/visualizer/graph/representation/quiz/adjacency-matrix/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is an Adjacency Matrix?",
+    options: [
+      "A linked list of vertices",
+      "A 2D matrix used to represent edges between vertices",
+      "A stack of graph nodes",
+      "A binary tree representation"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "An Adjacency Matrix is a two-dimensional array where rows and columns represent vertices."
+  },
+  {
+    question: "For a graph with V vertices, the size of an Adjacency Matrix is:",
+    options: [
+      "V",
+      "V × V",
+      "E × V",
+      "E × E"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "An Adjacency Matrix contains one row and one column for every vertex."
+  },
+  {
+    question: "What value indicates an edge exists between two vertices in an unweighted graph?",
+    options: [
+      "0",
+      "1",
+      "-1",
+      "Infinity"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "A value of 1 usually indicates that an edge exists between two vertices."
+  },
+  {
+    question: "What is stored when no edge exists between two vertices?",
+    options: [
+      "1",
+      "0",
+      "-1",
+      "Vertex ID"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "A value of 0 indicates there is no edge between the vertices."
+  },
+  {
+    question: "What is the space complexity of an Adjacency Matrix?",
+    options: [
+      "O(V)",
+      "O(E)",
+      "O(V²)",
+      "O(log V)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "An Adjacency Matrix always requires V² space regardless of the number of edges."
+  },
+  {
+    question: "Checking whether an edge exists using an Adjacency Matrix takes:",
+    options: [
+      "O(V)",
+      "O(E)",
+      "O(1)",
+      "O(log V)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The edge can be checked directly using matrix[row][column]."
+  },
+  {
+    question: "Adjacency Matrix is most suitable for:",
+    options: [
+      "Sparse graphs",
+      "Dense graphs",
+      "Trees only",
+      "Linked Lists"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Dense graphs benefit from the constant-time edge lookup provided by an Adjacency Matrix."
+  },
+  {
+    question: "In an undirected graph, an Adjacency Matrix is:",
+    options: [
+      "Triangular",
+      "Symmetric",
+      "Random",
+      "Diagonal"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "For undirected graphs, matrix[i][j] equals matrix[j][i]."
+  },
+  {
+    question: "The diagonal elements of an Adjacency Matrix are usually:",
+    options: [
+      "1",
+      "0",
+      "-1",
+      "Infinity"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Unless self-loops exist, the diagonal entries are typically 0."
+  },
+  {
+    question: "Which is an advantage of the Adjacency Matrix?",
+    options: [
+      "Uses very little memory",
+      "Constant-time edge lookup",
+      "Best for sparse graphs",
+      "Stores only existing edges"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The biggest advantage is O(1) edge existence checking."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Adjacency Matrix Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/representation/quiz/page.jsx b/src/app/visualizer/graph/representation/quiz/page.jsx
new file mode 100644
index 000000000..7a2ac44b3
--- /dev/null
+++ b/src/app/visualizer/graph/representation/quiz/page.jsx
@@ -0,0 +1,5 @@
+import GraphRepresentationQuizClient from "./GraphRepresentationQuizClient";
+
+export default function Page() {
+  return <GraphRepresentationQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/traversal/quiz/GraphTraversalQuizClient.jsx b/src/app/visualizer/graph/traversal/quiz/GraphTraversalQuizClient.jsx
new file mode 100644
index 000000000..2bce074d5
--- /dev/null
+++ b/src/app/visualizer/graph/traversal/quiz/GraphTraversalQuizClient.jsx
@@ -0,0 +1,74 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { ArrowRight, Network } from "lucide-react";
+
+const quizzes = [
+  {
+    title: "Breadth-First Search (BFS) Quiz",
+    description:
+      "Practice Breadth-First Search traversal, queue-based traversal, shortest path concepts, and BFS applications.",
+    href: "/visualizer/graph/traversal/quiz/bfs",
+  },
+  {
+    title: "Depth-First Search (DFS) Quiz",
+    description:
+      "Test your understanding of Depth-First Search traversal, recursion, stack-based traversal, and DFS applications.",
+    href: "/visualizer/graph/traversal/quiz/dfs",
+  },
+];
+
+export default function GraphTraversalQuizClient() {
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <div className="mx-auto max-w-7xl px-6 py-12">
+        <motion.div
+          initial={{ opacity: 0, y: 25 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="mb-10"
+        >
+          <h1 className="text-4xl font-bold">
+            🌐 Graph Traversal Quiz
+          </h1>
+
+          <p className="mt-3 text-muted-foreground">
+            Practice Graph Traversal concepts through interactive quizzes.
+          </p>
+        </motion.div>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.05 }}
+              className="rounded-2xl border border-sky-500/20 bg-card p-6 shadow-sm transition-all hover:shadow-lg"
+            >
+              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-sky-500/10 text-sky-600">
+                <Network size={24} />
+              </div>
+
+              <h2 className="text-xl font-semibold">
+                {quiz.title}
+              </h2>
+
+              <p className="mt-2 text-sm text-muted-foreground">
+                {quiz.description}
+              </p>
+
+              <Link href={quiz.href}>
+                <button className="mt-6 flex w-full items-center justify-center gap-2 rounded-xl bg-sky-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-sky-700">
+                  <span>Start Quiz</span>
+                  <ArrowRight size={18} />
+                </button>
+              </Link>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/traversal/quiz/bfs/page.jsx b/src/app/visualizer/graph/traversal/quiz/bfs/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/graph/traversal/quiz/bfs/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/traversal/quiz/bfs/quiz.jsx b/src/app/visualizer/graph/traversal/quiz/bfs/quiz.jsx
new file mode 100644
index 000000000..095747c9b
--- /dev/null
+++ b/src/app/visualizer/graph/traversal/quiz/bfs/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What does BFS stand for?",
+    options: [
+      "Binary First Search",
+      "Breadth-First Search",
+      "Balanced First Search",
+      "Branch First Search"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "BFS stands for Breadth-First Search, a graph traversal algorithm."
+  },
+  {
+    question: "Which data structure is primarily used in BFS?",
+    options: [
+      "Stack",
+      "Queue",
+      "Heap",
+      "Linked List"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "BFS uses a Queue to visit vertices level by level."
+  },
+  {
+    question: "BFS visits graph vertices in:",
+    options: [
+      "Depth-wise",
+      "Random order",
+      "Level-by-level",
+      "Reverse order"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "BFS explores all neighbors before moving to the next level."
+  },
+  {
+    question: "The time complexity of BFS using an adjacency list is:",
+    options: [
+      "O(V)",
+      "O(E)",
+      "O(V + E)",
+      "O(V²)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Each vertex and each edge is processed at most once."
+  },
+  {
+    question: "Which graph problem commonly uses BFS?",
+    options: [
+      "Shortest path in an unweighted graph",
+      "Minimum Spanning Tree",
+      "Heap Sort",
+      "Binary Search"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "BFS finds the shortest path in an unweighted graph."
+  },
+  {
+    question: "Before visiting a neighboring vertex in BFS, it should be:",
+    options: [
+      "Deleted",
+      "Marked as visited",
+      "Sorted",
+      "Balanced"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Vertices are marked visited before being added to the queue to avoid repeated visits."
+  },
+  {
+    question: "BFS is also called:",
+    options: [
+      "Level Order Traversal",
+      "Inorder Traversal",
+      "Postorder Traversal",
+      "Preorder Traversal"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "BFS processes vertices level by level, similar to level-order traversal in trees."
+  },
+  {
+    question: "Which graph representation is commonly used with BFS?",
+    options: [
+      "Adjacency List",
+      "Adjacency Matrix",
+      "Both Adjacency List and Matrix",
+      "Binary Heap"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "BFS can be implemented using either adjacency lists or adjacency matrices."
+  },
+  {
+    question: "What happens if a visited array is not used in BFS?",
+    options: [
+      "The graph becomes disconnected",
+      "Vertices may be visited repeatedly",
+      "The queue becomes empty",
+      "The graph is sorted"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Without tracking visited vertices, BFS can revisit the same vertices repeatedly."
+  },
+  {
+    question: "Which of the following is an application of BFS?",
+    options: [
+      "Social Network Analysis",
+      "Web Crawling",
+      "Shortest Path",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "BFS is widely used in networking, web crawling, social graphs, and shortest-path problems."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Breadth-First Search (BFS) Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/traversal/quiz/dfs/page.jsx b/src/app/visualizer/graph/traversal/quiz/dfs/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/graph/traversal/quiz/dfs/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/traversal/quiz/dfs/quiz.jsx b/src/app/visualizer/graph/traversal/quiz/dfs/quiz.jsx
new file mode 100644
index 000000000..c67c0c4e2
--- /dev/null
+++ b/src/app/visualizer/graph/traversal/quiz/dfs/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What does DFS stand for?",
+    options: [
+      "Depth-First Search",
+      "Data First Search",
+      "Directed First Search",
+      "Deep Function Search"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "DFS stands for Depth-First Search, a graph traversal algorithm that explores as far as possible before backtracking."
+  },
+  {
+    question: "Which data structure is primarily used in DFS?",
+    options: [
+      "Queue",
+      "Stack",
+      "Heap",
+      "Priority Queue"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "DFS uses a stack explicitly or implicitly through recursion."
+  },
+  {
+    question: "Recursive DFS uses which hidden data structure?",
+    options: [
+      "Queue",
+      "Call Stack",
+      "Heap",
+      "Hash Table"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Recursive function calls are managed using the system's call stack."
+  },
+  {
+    question: "The time complexity of DFS using an adjacency list is:",
+    options: [
+      "O(V)",
+      "O(E)",
+      "O(V + E)",
+      "O(V²)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "DFS visits every vertex and edge at most once."
+  },
+  {
+    question: "DFS explores vertices in which manner?",
+    options: [
+      "Level by level",
+      "Random order",
+      "As deep as possible before backtracking",
+      "Alphabetical order"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "DFS follows one path completely before exploring alternative branches."
+  },
+  {
+    question: "Which problem commonly uses DFS?",
+    options: [
+      "Cycle Detection",
+      "Topological Sorting",
+      "Connected Components",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "DFS is widely used for cycle detection, topological sorting, SCCs, and connected components."
+  },
+  {
+    question: "Why is a visited array required in DFS?",
+    options: [
+      "To sort the graph",
+      "To prevent revisiting vertices",
+      "To balance the graph",
+      "To calculate weights"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Without a visited array, DFS may revisit the same vertices indefinitely in cyclic graphs."
+  },
+  {
+    question: "Which graph representation works efficiently with DFS?",
+    options: [
+      "Adjacency List",
+      "Adjacency Matrix",
+      "Both",
+      "Heap"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "DFS can be implemented using either an adjacency list or an adjacency matrix."
+  },
+  {
+    question: "Which traversal technique is generally implemented recursively?",
+    options: [
+      "Breadth-First Search",
+      "Depth-First Search",
+      "Binary Search",
+      "Level Order Traversal"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "DFS is naturally implemented using recursion."
+  },
+  {
+    question: "Which application commonly uses DFS?",
+    options: [
+      "Maze Solving",
+      "Path Finding",
+      "Cycle Detection",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "DFS is used in maze solving, path finding, graph analysis, and cycle detection."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Depth-First Search (DFS) Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/graph/traversal/quiz/page.jsx b/src/app/visualizer/graph/traversal/quiz/page.jsx
new file mode 100644
index 000000000..3198d6eed
--- /dev/null
+++ b/src/app/visualizer/graph/traversal/quiz/page.jsx
@@ -0,0 +1,5 @@
+import GraphTraversalQuizClient from "./GraphTraversalQuizClient";
+
+export default function Page() {
+  return <GraphTraversalQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/hashmap/components/HashMapChainingVisualizer.jsx b/src/app/visualizer/hashmap/components/HashMapChainingVisualizer.jsx
new file mode 100644
index 000000000..683deea07
--- /dev/null
+++ b/src/app/visualizer/hashmap/components/HashMapChainingVisualizer.jsx
@@ -0,0 +1,479 @@
+"use client";
+import React, { useMemo, useState, useCallback, useEffect } from "react";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { AnimatePresence, motion } from "framer-motion";
+import { insertGenerator } from "@/features/algorithms/hashmap/hashmapInsertLogic";
+import { searchGenerator } from "@/features/algorithms/hashmap/hashmapSearchLogic";
+import { deleteGenerator } from "@/features/algorithms/hashmap/hashmapDeleteLogic";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+const TABLE_SIZE = 8;
+const makeTable = () => Array.from({ length: TABLE_SIZE }, () => []);
+
+const HashMapChainingVisualizer = ({ mode = "insert" }) => {
+  const [baseHashMap, setBaseHashMap] = useState(makeTable());
+  const [keyInput, setKeyInput] = useState("");
+  const [valueInput, setValueInput] = useState("");
+  const [insertKey, setInsertKey] = useState("");
+  const [insertValue, setInsertValue] = useState("");
+  
+  const [frames, setFrames] = useState([]);
+
+  // Clear frames when mode changes
+  useEffect(() => {
+    setFrames([]);
+  }, [mode]);
+
+  useVisualizerReset(() => {
+    setBaseHashMap(makeTable());
+    setKeyInput("");
+    setValueInput("");
+    setInsertKey("");
+    setInsertValue("");
+    setFrames([]);
+  });
+
+  const hashFunction = (key) => {
+    let hash = 0;
+    for (let i = 0; i < key.length; i += 1) {
+      hash = (hash + key.charCodeAt(i)) % TABLE_SIZE;
+    }
+    return hash;
+  };
+
+  const generateFrames = (generator) => {
+    const rawSteps = Array.from(generator);
+    const newFrames = [];
+    
+    let currentMap = baseHashMap;
+    let highlightIndex = null;
+    let collisionIndex = null;
+    let activeNode = { bucket: null, index: null };
+    let operation = null;
+    let toast = null;
+
+    for (const step of rawSteps) {
+      // Reset toast from previous frame
+      toast = null;
+      
+      if (step.type === 'hash') {
+        highlightIndex = step.index;
+        operation = step.operation;
+      } else if (step.type === 'collision') {
+        collisionIndex = step.index;
+        operation = step.operation;
+        toast = { message: step.message, type: "collision" };
+      } else if (step.type === 'resolve') {
+        operation = step.operation;
+      } else if (step.type === 'traverse') {
+        activeNode = step.activeNode;
+        operation = step.operation;
+      } else if (step.type === 'complete') {
+        if (step.hashMap) {
+          currentMap = step.hashMap;
+        }
+        if (step.activeNode) {
+          activeNode = step.activeNode;
+        } else {
+          // If searching/deleting and it wasn't found or activeNode wasn't updated
+          activeNode = { bucket: null, index: null };
+        }
+        operation = step.operation;
+      }
+
+      newFrames.push({
+        hashMap: currentMap,
+        highlightIndex,
+        collisionIndex,
+        activeNode,
+        operation,
+        toast,
+        isComplete: step.type === 'complete'
+      });
+    }
+
+    return newFrames;
+  };
+
+  const handleSequenceFinish = useCallback((stepIndex, currentFrames) => {
+    if (currentFrames.length > 0 && stepIndex === currentFrames.length - 1) {
+      const lastFrame = currentFrames[stepIndex];
+      if (lastFrame && lastFrame.isComplete) {
+        setBaseHashMap(lastFrame.hashMap);
+      }
+    }
+  }, []);
+
+  const engine = useAnimationEngine({ 
+    steps: frames, 
+    initialSpeed: 1000,
+    onStep: (stepIdx) => {
+      // We could trigger handleSequenceFinish here, but we also want it to apply 
+      // if the user scrubs to the end. The effect below handles it better.
+    }
+  });
+
+  // When animation finishes entirely (or user steps to the end manually), 
+  // lock in the state so subsequent operations start from the new state.
+  useEffect(() => {
+    if (frames.length > 0 && engine.currentStep === frames.length - 1) {
+      handleSequenceFinish(engine.currentStep, frames);
+    }
+  }, [engine.currentStep, frames, handleSequenceFinish]);
+
+  const applyInsert = (rawKey, rawValue) => {
+    const key = rawKey.trim();
+    const value = rawValue.trim();
+    if (!key || !value || engine.isPlaying) return;
+
+    // Use the current baseHashMap to generate the next sequence
+    const gen = insertGenerator(baseHashMap, key, value, TABLE_SIZE, hashFunction);
+    const newFrames = generateFrames(gen);
+    setFrames(newFrames);
+    engine.reset();
+    engine.play();
+  };
+
+  const handleInsert = () => {
+    applyInsert(keyInput, valueInput);
+    setKeyInput("");
+    setValueInput("");
+  };
+
+  const handleAuxInsert = () => {
+    applyInsert(insertKey, insertValue);
+    setInsertKey("");
+    setInsertValue("");
+  };
+
+  const handleSearch = () => {
+    const key = keyInput.trim();
+    if (!key || engine.isPlaying) return;
+
+    const gen = searchGenerator(baseHashMap, key, TABLE_SIZE, hashFunction);
+    const newFrames = generateFrames(gen);
+    setFrames(newFrames);
+    engine.reset();
+    engine.play();
+    setKeyInput("");
+  };
+
+  const handleDelete = () => {
+    const key = keyInput.trim();
+    if (!key || engine.isPlaying) return;
+
+    const gen = deleteGenerator(baseHashMap, key, TABLE_SIZE, hashFunction);
+    const newFrames = generateFrames(gen);
+    setFrames(newFrames);
+    engine.reset();
+    engine.play();
+    setKeyInput("");
+  };
+
+  const handleClear = () => {
+    setBaseHashMap(makeTable());
+    setFrames([]);
+    setKeyInput("");
+    setValueInput("");
+    setInsertKey("");
+    setInsertValue("");
+    engine.reset();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      setTimeout(() => engine.play(), 50);
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: engine.reset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  // Render State
+  const currentFrame = frames.length > 0 ? frames[engine.currentStep] : null;
+  const renderHashMap = currentFrame ? currentFrame.hashMap : baseHashMap;
+  const renderHighlight = currentFrame ? currentFrame.highlightIndex : null;
+  const renderCollision = currentFrame ? currentFrame.collisionIndex : null;
+  const renderActiveNode = currentFrame ? currentFrame.activeNode : { bucket: null, index: null };
+  const renderOperation = currentFrame ? currentFrame.operation : null;
+  const renderToast = currentFrame ? currentFrame.toast : null;
+
+  const totalCollisions = useMemo(
+    () => renderHashMap.reduce((sum, bucket) => sum + Math.max(0, bucket.length - 1), 0),
+    [renderHashMap]
+  );
+
+  return (
+    <main className="container mx-auto px-6 pb-8">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8 mt-6">
+        Visual hash buckets with separate chaining collision handling
+      </p>
+
+      <div className="max-w-5xl mx-auto">
+        {mode === "insert" ? (
+          <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-6">
+            <div className="flex flex-wrap gap-3 items-center justify-center">
+              <input
+                type="text"
+                placeholder="Key"
+                value={keyInput}
+                onChange={(e) => setKeyInput(e.target.value)}
+                className="border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-white w-36"
+              />
+              <input
+                type="text"
+                placeholder="Value"
+                value={valueInput}
+                onChange={(e) => setValueInput(e.target.value)}
+                className="border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-white w-36"
+              />
+              <button
+                onClick={handleInsert}
+                disabled={engine.isPlaying}
+                className="bg-[#a435f0] text-white px-4 py-2 rounded hover:bg-[#8710d8] disabled:opacity-50"
+              >
+                Insert
+              </button>
+              <button
+                onClick={handleClear}
+                className="border border-gray-300 dark:border-gray-600 px-4 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
+              >
+                Clear Map
+              </button>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-4">
+              <p className="text-sm text-gray-500 mb-3 font-medium">Add entries first:</p>
+              <div className="flex flex-wrap gap-3 items-center justify-center">
+                <input
+                  type="text"
+                  placeholder="Key"
+                  value={insertKey}
+                  onChange={(e) => setInsertKey(e.target.value)}
+                  className="border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-white w-32"
+                />
+                <input
+                  type="text"
+                  placeholder="Value"
+                  value={insertValue}
+                  onChange={(e) => setInsertValue(e.target.value)}
+                  className="border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-white w-32"
+                />
+                <button
+                  onClick={handleAuxInsert}
+                  disabled={engine.isPlaying}
+                  className="bg-[#a435f0] text-white px-4 py-2 rounded hover:bg-[#8710d8] disabled:opacity-50"
+                >
+                  Insert
+                </button>
+              </div>
+            </div>
+
+            <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-6">
+              <p className="text-sm text-gray-500 mb-3 font-medium">
+                {mode === "search" ? "Search by key:" : "Delete by key:"}
+              </p>
+              <div className="flex flex-wrap gap-3 items-center justify-center">
+                <input
+                  type="text"
+                  placeholder={mode === "search" ? "Key to search" : "Key to delete"}
+                  value={keyInput}
+                  onChange={(e) => setKeyInput(e.target.value)}
+                  className="border border-gray-300 dark:border-gray-600 rounded px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-white w-40"
+                />
+                <button
+                  onClick={mode === "search" ? handleSearch : handleDelete}
+                  disabled={engine.isPlaying}
+                  className={`text-white px-4 py-2 rounded disabled:opacity-50 ${
+                    mode === "search" ? "bg-blue-500 hover:bg-blue-600" : "bg-red-500 hover:bg-red-600"
+                  }`}
+                >
+                  {mode === "search" ? "Search" : "Delete"}
+                </button>
+                <button
+                  onClick={handleClear}
+                  className="border border-gray-300 dark:border-gray-600 px-4 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
+                >
+                  Clear Map
+                </button>
+              </div>
+            </div>
+          </>
+        )}
+
+        {renderOperation && (
+          <motion.div
+            initial={{ opacity: 0, y: -8 }}
+            animate={{ opacity: 1, y: 0 }}
+            className={`mb-4 p-3 rounded-lg text-center border ${
+              renderCollision !== null
+                ? "bg-orange-100 dark:bg-orange-900/30 border-orange-300 dark:border-orange-700 text-orange-900 dark:text-orange-200"
+                : "bg-blue-100 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700 text-primary-dark dark:text-blue-200"
+            }`}
+          >
+            {renderOperation}
+          </motion.div>
+        )}
+        <AnimatePresence>
+          {renderToast && (
+            <motion.div
+              initial={{ opacity: 0, y: 8, scale: 0.98 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={{ opacity: 0, y: -8, scale: 0.98 }}
+              className={`fixed bottom-6 right-6 z-50 px-4 py-2 rounded-lg border shadow-lg ${
+                renderToast.type === "collision"
+                  ? "bg-orange-100 dark:bg-orange-900/90 border-orange-300 dark:border-orange-700 text-orange-900 dark:text-orange-200"
+                  : "bg-blue-100 dark:bg-blue-900/90 border-blue-300 dark:border-blue-700 text-blue-900 dark:text-blue-200"
+              }`}
+            >
+              {renderToast.message}
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
+          <div className="flex items-center justify-between mb-4 gap-3 flex-wrap">
+            <h2 className="text-xl font-semibold">Hash Table (Size: {TABLE_SIZE})</h2>
+            <div className="text-sm px-3 py-1 rounded-full bg-[#faf5ff] dark:bg-[#1a0a2e] border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              Collisions: <span className="font-semibold text-[#a435f0]">{totalCollisions}</span>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            {renderHashMap.map((bucket, index) => {
+              const bucketCollisions = Math.max(0, bucket.length - 1);
+              const highlighted = renderHighlight === index;
+              const collisionGlow = renderCollision === index;
+              return (
+                <motion.div
+                  key={index}
+                  layout
+                  initial={false}
+                  animate={{
+                    boxShadow: collisionGlow
+                      ? "0 0 0 1px rgba(249,115,22,0.8), 0 0 24px rgba(249,115,22,0.35)"
+                      : highlighted
+                      ? "0 0 0 1px rgba(168,85,247,0.7), 0 0 16px rgba(168,85,247,0.22)"
+                      : "0 0 0 0px rgba(0,0,0,0)",
+                  }}
+                  className={`flex items-start gap-3 p-3 rounded-lg border transition-colors ${
+                    collisionGlow
+                      ? "border-orange-400 bg-orange-50 dark:bg-orange-950/20"
+                      : highlighted
+                      ? "border-[#a435f0] bg-[#faf5ff] dark:bg-[#1a0a2e]"
+                      : "border-gray-200 dark:border-gray-700"
+                  }`}
+                >
+                  <div className="w-10 h-10 flex items-center justify-center bg-[#a435f0] text-white rounded font-bold text-sm shrink-0 mt-1">
+                    {index}
+                  </div>
+
+                  <div className="flex-1 min-h-12">
+                    <div className="flex items-center gap-2 mb-2">
+                      <span className="text-xs text-gray-500 dark:text-gray-400">bucket[{index}]</span>
+                      {bucketCollisions > 0 && (
+                        <span className="text-xs px-2 py-0.5 rounded-full bg-amber-100 dark:bg-amber-900/40 text-amber-800 dark:text-amber-200 border border-amber-300 dark:border-amber-700">
+                          +{bucketCollisions} collision{bucketCollisions > 1 ? "s" : ""}
+                        </span>
+                      )}
+                    </div>
+
+                    <div className="flex flex-wrap items-center gap-2">
+                      {bucket.length === 0 ? (
+                        <span className="text-gray-400 text-sm">empty</span>
+                      ) : (
+                        <AnimatePresence>
+                          {bucket.map((pair, i) => {
+                            const isActive = renderActiveNode.bucket === index && renderActiveNode.index === i;
+                            return (
+                              <React.Fragment key={pair.id || `${pair.key}-${i}`}>
+                                <motion.div
+                                  layout
+                                  initial={{ opacity: 0, y: 8, scale: 0.96 }}
+                                  animate={{
+                                    opacity: 1,
+                                    y: 0,
+                                    scale: 1,
+                                    boxShadow: isActive
+                                      ? "0 0 0 1px rgba(59,130,246,0.65), 0 0 14px rgba(59,130,246,0.3)"
+                                      : "0 0 0 0px rgba(0,0,0,0)",
+                                  }}
+                                  exit={{ opacity: 0, y: -8, scale: 0.96 }}
+                                  transition={{ duration: 0.22 }}
+                                  className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-sm border ${
+                                    isActive
+                                      ? "bg-blue-100 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700"
+                                      : "bg-[#f3f4f6] dark:bg-[#222] border-transparent"
+                                  }`}
+                                >
+                                  <span className="font-medium text-[#a435f0]">{pair.key}</span>
+                                  <span className="text-gray-500">:</span>
+                                  <span>{pair.value}</span>
+                                </motion.div>
+                                {i < bucket.length - 1 && (
+                                  <motion.span
+                                    initial={{ opacity: 0.3, x: -2 }}
+                                    animate={{ opacity: 1, x: 2 }}
+                                    transition={{
+                                      duration: 0.55,
+                                      repeat: Infinity,
+                                      repeatType: "reverse",
+                                      ease: "easeInOut",
+                                    }}
+                                    className="text-orange-500 dark:text-orange-300 text-base font-semibold select-none"
+                                  >
+                                    →
+                                  </motion.span>
+                                )}
+                              </React.Fragment>
+                            );
+                          })}
+                        </AnimatePresence>
+                      )}
+                    </div>
+                  </div>
+                </motion.div>
+              );
+            })}
+          </div>
+
+          <div className="mt-4 p-3 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-lg border border-[#e9d5ff] dark:border-[#3b1a6e] text-sm text-gray-600 dark:text-gray-400">
+            Hash Function: sum of char codes % {TABLE_SIZE}. Collision handling: Separate Chaining.
+          </div>
+        </div>
+
+        {/* Playback Controls Wrapper */}
+        <div className="mt-6">
+          <PlaybackControls
+            isPlaying={engine.isPlaying}
+            onPlayPause={togglePlay}
+            speed={engine.speed / 1000}
+            onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+            onStepForward={engine.stepForward}
+            onStepBackward={engine.stepBackward}
+            onReset={engine.reset}
+            progressText={frames.length > 0 ? `${engine.currentStep + 1} / ${frames.length}` : "0 / 0"}
+            disabled={frames.length === 0}
+          />
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default HashMapChainingVisualizer;
diff --git a/src/app/visualizer/hashmap/delete/AlgorithmClient.jsx b/src/app/visualizer/hashmap/delete/AlgorithmClient.jsx
new file mode 100644
index 000000000..a72afe111
--- /dev/null
+++ b/src/app/visualizer/hashmap/delete/AlgorithmClient.jsx
@@ -0,0 +1,32 @@
+import Animation from "@/app/visualizer/hashmap/delete/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/hashmap/delete/content";
+import Code from "@/app/visualizer/hashmap/delete/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("HashMap", "Delete")}
+      title="Delete (remove)"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[
+            { text: "Insert", url: "/visualizer/hashmap/insert" },
+            { text: "Search", url: "/visualizer/hashmap/search" },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/hashmap/delete/animation.jsx b/src/app/visualizer/hashmap/delete/animation.jsx
new file mode 100644
index 000000000..cb6aaa4e6
--- /dev/null
+++ b/src/app/visualizer/hashmap/delete/animation.jsx
@@ -0,0 +1,7 @@
+"use client";
+import React from "react";
+import HashMapChainingVisualizer from "@/app/visualizer/hashmap/components/HashMapChainingVisualizer";
+
+const HashMapDeleteVisualizer = () => <HashMapChainingVisualizer mode="delete" />;
+
+export default HashMapDeleteVisualizer;
diff --git a/src/app/visualizer/hashmap/delete/codeBlock.jsx b/src/app/visualizer/hashmap/delete/codeBlock.jsx
new file mode 100644
index 000000000..865d73d4e
--- /dev/null
+++ b/src/app/visualizer/hashmap/delete/codeBlock.jsx
@@ -0,0 +1,121 @@
+"use client";
+import { useState } from "react";
+
+const codes = {
+  JavaScript: `// HashMap Delete in JavaScript
+const hashMap = new Map();
+
+// Insert some entries
+hashMap.set("name", "Alice");
+hashMap.set("age", 25);
+hashMap.set("city", "New York");
+
+// Delete a key
+hashMap.delete("age");
+
+// Verify deletion
+console.log(hashMap.has("age")); // false
+console.log(hashMap.size); // 2`,
+
+  Python: `# HashMap Delete in Python
+hash_map = {
+    "name": "Alice",
+    "age": 25,
+    "city": "New York"
+}
+
+# Delete a key
+del hash_map["age"]
+
+# Or use pop() with default
+hash_map.pop("city", None)
+
+# Verify deletion
+print("age" in hash_map)  # False
+print(hash_map)  # {"name": "Alice"}`,
+
+  Java: `// HashMap Delete in Java
+import java.util.HashMap;
+
+HashMap<String, Object> hashMap = new HashMap<>();
+hashMap.put("name", "Alice");
+hashMap.put("age", 25);
+hashMap.put("city", "New York");
+
+// Delete a key
+hashMap.remove("age");
+
+// Verify deletion
+System.out.println(hashMap.containsKey("age")); // false
+System.out.println(hashMap.size()); // 2`,
+
+  C: `// HashMap Delete in C (manual implementation)
+#include <stdio.h>
+#include <string.h>
+#include <stdlib.h>
+#define SIZE 8
+
+typedef struct Node {
+  char key[50];
+  int value;
+  struct Node* next;
+} Node;
+
+Node* table[SIZE];
+
+int hashFunction(char* key) {
+  int hash = 0;
+  for (int i = 0; key[i]; i++)
+    hash = (hash + key[i]) % SIZE;
+  return hash;
+}
+
+void deleteKey(char* key) {
+  int index = hashFunction(key);
+  Node* curr = table[index];
+  Node* prev = NULL;
+  while (curr) {
+    if (strcmp(curr->key, key) == 0) {
+      if (prev) prev->next = curr->next;
+      else table[index] = curr->next;
+      free(curr);
+      printf("Deleted key: %s\\n", key);
+      return;
+    }
+    prev = curr;
+    curr = curr->next;
+  }
+  printf("Key not found: %s\\n", key);
+}`,
+};
+
+const CodeBlock = () => {
+  const [activeTab, setActiveTab] = useState("JavaScript");
+
+  return (
+    <div className="max-w-4xl mx-auto mb-8">
+      <div className="bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden">
+        <div className="flex border-b border-[#e5e7eb] dark:border-[#222]">
+          {Object.keys(codes).map((lang) => (
+            <button
+              key={lang}
+              onClick={() => setActiveTab(lang)}
+              className={`px-4 py-3 text-sm font-medium transition-colors ${
+                activeTab === lang
+                  ? "text-[#a435f0] border-b-2 border-[#a435f0]"
+                  : "text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+              }`}
+            >
+              {lang}
+            </button>
+          ))}
+        </div>
+        <pre className="p-6 overflow-x-auto text-sm text-[#374151] dark:text-[#d1d5db] bg-[#f9fafb] dark:bg-[#0a0a0a]">
+          <code>{codes[activeTab]}</code>
+        </pre>
+      </div>
+    </div>
+  );
+};
+
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/hashmap/delete/content.jsx b/src/app/visualizer/hashmap/delete/content.jsx
new file mode 100644
index 000000000..a19160e86
--- /dev/null
+++ b/src/app/visualizer/hashmap/delete/content.jsx
@@ -0,0 +1,123 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+
+const Content = () => {
+  const paragraphs = [
+    `HashMap Delete operation removes a key-value pair from the hash table. It uses the hash function to locate the bucket index, then searches the bucket for the key and removes it.`,
+    `Delete is a fundamental HashMap operation with O(1) average time complexity, making it highly efficient for dynamic data management.`,
+  ];
+
+  const deleteSteps = [
+    { points: 'Call delete("age")' },
+    { points: 'Compute hash("age") = 5 → go to index 5' },
+    { points: "Search bucket at index 5 for key \"age\"" },
+    { points: "Key found → remove from bucket" },
+    { points: "If key not found → return null/false" },
+  ];
+
+  const complexity = [
+    { points: "Time Complexity (Average): O(1)" },
+    { points: "Time Complexity (Worst): O(n)" },
+    { points: "Space Complexity: O(1)" },
+  ];
+
+  const applications = [
+    { points: "Removing expired cache entries" },
+    { points: "Unregistering event listeners" },
+    { points: "Removing user sessions" },
+    { points: "Dynamic symbol table management in compilers" },
+  ];
+
+  const edgeCases = [
+    { title: "Key not found", detail: "Returns null or false without modifying the table" },
+    { title: "Collision chain", detail: "Only the matching key is removed, others in chain remain" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is HashMap Delete?
+          </h1>
+          <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+            {paragraphs[0]}
+          </p>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Delete Operation Steps
+          </h1>
+          <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+            {deleteSteps.map((item, index) => (
+              <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                {item.points}
+              </li>
+            ))}
+          </ol>
+          <ul className="mt-4 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+            {complexity.map((item, index) => (
+              <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm">
+                  {item.points.split(":")[0]}:
+                </span>
+                <span className="ml-2">{item.points.split(":")[1]}</span>
+              </li>
+            ))}
+          </ul>
+          <div className="mt-8">
+            <ComplexityGraph
+              bestCase={(n) => 1}
+              averageCase={(n) => 1}
+              worstCase={(n) => n}
+              maxN={25}
+            />
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Edge Cases
+          </h1>
+          <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+            {edgeCases.map((item, index) => (
+              <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                <span className="font-semibold">{item.title}:</span> {item.detail}
+              </li>
+            ))}
+          </ul>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Real-world Applications
+          </h1>
+          <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+            {applications.map((item, index) => (
+              <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                {item.points}
+              </li>
+            ))}
+          </ul>
+        </section>
+
+        <section className="p-6">
+          <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[1]}
+            </p>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+};
+
+export default Content;
\ No newline at end of file
diff --git a/src/app/visualizer/hashmap/delete/quiz.jsx b/src/app/visualizer/hashmap/delete/quiz.jsx
new file mode 100644
index 000000000..d43067238
--- /dev/null
+++ b/src/app/visualizer/hashmap/delete/quiz.jsx
@@ -0,0 +1,56 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const Quiz = () => {
+  const questions = [
+  {
+    "question": "What is the average time complexity of HashMap delete?",
+    "options": [
+      "O(n)",
+      "O(log n)",
+      "O(1)",
+      "O(n²)"
+    ],
+    "correctAnswer": 2,
+    "explanation": ""
+  },
+  {
+    "question": "What happens when you try to delete a key that doesn't exist?",
+    "options": [
+      "Error is thrown",
+      "Program crashes",
+      "Returns null/false, table unchanged",
+      "Deletes random key"
+    ],
+    "correctAnswer": 2,
+    "explanation": ""
+  },
+  {
+    "question": "Which method deletes a key in Java's HashMap?",
+    "options": [
+      "delete()",
+      "remove()",
+      "pop()",
+      "erase()"
+    ],
+    "correctAnswer": 1,
+    "explanation": ""
+  },
+  {
+    "question": "When deleting from a chained bucket, what happens to other entries?",
+    "options": [
+      "All entries are deleted",
+      "Table is rebuilt",
+      "Only matching key is removed, others remain",
+      "Bucket is cleared"
+    ],
+    "correctAnswer": 2,
+    "explanation": ""
+  }
+];
+
+  return <QuizEngine title="Quiz — HashMap Delete" questions={questions} />;
+};
+
+export default Quiz;
diff --git a/src/app/visualizer/hashmap/insert/AlgorithmClient.jsx b/src/app/visualizer/hashmap/insert/AlgorithmClient.jsx
new file mode 100644
index 000000000..c1117e2dc
--- /dev/null
+++ b/src/app/visualizer/hashmap/insert/AlgorithmClient.jsx
@@ -0,0 +1,32 @@
+import Animation from "@/app/visualizer/hashmap/insert/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/hashmap/insert/content";
+import Code from "@/app/visualizer/hashmap/insert/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("HashMap", "Insert")}
+      title="Insert (put)"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[
+            { text: "Search", url: "/visualizer/hashmap/search" },
+            { text: "Delete", url: "/visualizer/hashmap/delete" },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/hashmap/insert/animation.jsx b/src/app/visualizer/hashmap/insert/animation.jsx
new file mode 100644
index 000000000..3836b80ce
--- /dev/null
+++ b/src/app/visualizer/hashmap/insert/animation.jsx
@@ -0,0 +1,7 @@
+"use client";
+import React from "react";
+import HashMapChainingVisualizer from "@/app/visualizer/hashmap/components/HashMapChainingVisualizer";
+
+const HashMapVisualizer = () => <HashMapChainingVisualizer mode="insert" />;
+
+export default HashMapVisualizer;
diff --git a/src/app/visualizer/hashmap/insert/codeBlock.jsx b/src/app/visualizer/hashmap/insert/codeBlock.jsx
new file mode 100644
index 000000000..76bcbbac0
--- /dev/null
+++ b/src/app/visualizer/hashmap/insert/codeBlock.jsx
@@ -0,0 +1,108 @@
+"use client";
+import { useState } from "react";
+
+const codes = {
+  JavaScript: `// HashMap Insert in JavaScript
+const hashMap = new Map();
+
+// Insert key-value pairs
+hashMap.set("name", "Alice");
+hashMap.set("age", 25);
+hashMap.set("city", "New York");
+
+// Access value
+console.log(hashMap.get("name")); // Alice
+
+// Check if key exists
+console.log(hashMap.has("age")); // true`,
+
+  Python: `# HashMap Insert in Python
+hash_map = {}
+
+# Insert key-value pairs
+hash_map["name"] = "Alice"
+hash_map["age"] = 25
+hash_map["city"] = "New York"
+
+# Access value
+print(hash_map["name"])  # Alice
+
+# Check if key exists
+print("age" in hash_map)  # True`,
+
+  Java: `// HashMap Insert in Java
+import java.util.HashMap;
+
+HashMap<String, Object> hashMap = new HashMap<>();
+
+// Insert key-value pairs
+hashMap.put("name", "Alice");
+hashMap.put("age", 25);
+hashMap.put("city", "New York");
+
+// Access value
+System.out.println(hashMap.get("name")); // Alice
+
+// Check if key exists
+System.out.println(hashMap.containsKey("age")); // true`,
+
+  C: `// HashMap in C (manual implementation)
+#include <stdio.h>
+#include <string.h>
+#define SIZE 8
+
+typedef struct Node {
+  char key[50];
+  int value;
+  struct Node* next;
+} Node;
+
+Node* table[SIZE];
+
+int hashFunction(char* key) {
+  int hash = 0;
+  for (int i = 0; key[i]; i++)
+    hash = (hash + key[i]) % SIZE;
+  return hash;
+}
+
+void insert(char* key, int value) {
+  int index = hashFunction(key);
+  Node* newNode = malloc(sizeof(Node));
+  strcpy(newNode->key, key);
+  newNode->value = value;
+  newNode->next = table[index];
+  table[index] = newNode;
+}`,
+};
+
+const CodeBlock = () => {
+  const [activeTab, setActiveTab] = useState("JavaScript");
+
+  return (
+    <div className="max-w-4xl mx-auto mb-8">
+      <div className="bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden">
+        <div className="flex border-b border-[#e5e7eb] dark:border-[#222]">
+          {Object.keys(codes).map((lang) => (
+            <button
+              key={lang}
+              onClick={() => setActiveTab(lang)}
+              className={`px-4 py-3 text-sm font-medium transition-colors ${
+                activeTab === lang
+                  ? "text-[#a435f0] border-b-2 border-[#a435f0]"
+                  : "text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+              }`}
+            >
+              {lang}
+            </button>
+          ))}
+        </div>
+        <pre className="p-6 overflow-x-auto text-sm text-[#374151] dark:text-[#d1d5db] bg-[#f9fafb] dark:bg-[#0a0a0a]">
+          <code>{codes[activeTab]}</code>
+        </pre>
+      </div>
+    </div>
+  );
+};
+
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/hashmap/insert/content.jsx b/src/app/visualizer/hashmap/insert/content.jsx
new file mode 100644
index 000000000..dfd921bcb
--- /dev/null
+++ b/src/app/visualizer/hashmap/insert/content.jsx
@@ -0,0 +1,131 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+
+const Content = () => {
+  const paragraphs = [
+    `HashMap is a data structure that stores key-value pairs using a hash function to compute an index into an array of buckets. It provides average O(1) time complexity for insert, search, and delete operations.`,
+    `HashMap is one of the most important data structures in programming, widely used in interview problems and real-world applications for its constant-time average performance.`,
+  ];
+
+  const insertSteps = [
+    { points: "Start with empty HashMap of size 8" },
+    { points: 'Insert ("name", "Alice") → hash("name") = 3 → store at index 3' },
+    { points: 'Insert ("age", 25) → hash("age") = 5 → store at index 5' },
+    { points: 'Insert ("city", "NY") → hash("city") = 3 → collision! chain at index 3' },
+  ];
+
+  const complexity = [
+    { points: "Time Complexity (Average): O(1)" },
+    { points: "Time Complexity (Worst): O(n)" },
+    { points: "Space Complexity: O(n)" },
+  ];
+
+  const applications = [
+    { points: "Caching and memoization" },
+    { points: "Database indexing" },
+    { points: "Counting frequency of elements" },
+    { points: "Two Sum and similar interview problems" },
+    { points: "Symbol tables in compilers" },
+  ];
+
+  const collisions = [
+    { title: "Chaining", detail: "Each bucket holds a linked list of entries that hash to the same index" },
+    { title: "Open Addressing", detail: "Find next empty slot using linear/quadratic probing" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+
+        {/* What is HashMap Insert */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is HashMap Insert?
+          </h1>
+          <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+            {paragraphs[0]}
+          </p>
+        </section>
+
+        {/* Insert Operation */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Insert Operation
+          </h1>
+          <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+            Computes hash of key, finds bucket index, stores key-value pair.
+          </p>
+          <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+            {insertSteps.map((item, index) => (
+              <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                {item.points}
+              </li>
+            ))}
+          </ol>
+          <ul className="mt-4 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+            {complexity.map((item, index) => (
+              <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm">
+                  {item.points.split(":")[0]}:
+                </span>
+                <span className="ml-2">{item.points.split(":")[1]}</span>
+              </li>
+            ))}
+          </ul>
+          <div className="mt-8">
+            <ComplexityGraph
+              bestCase={(n) => 1}
+              averageCase={(n) => 1}
+              worstCase={(n) => n}
+              maxN={25}
+            />
+          </div>
+        </section>
+
+        {/* Collision Handling */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Collision Handling
+          </h1>
+          <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+            {collisions.map((item, index) => (
+              <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                <span className="font-semibold">{item.title}:</span> {item.detail}
+              </li>
+            ))}
+          </ul>
+        </section>
+
+        {/* Real-world Applications */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Real-world Applications
+          </h1>
+          <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+            {applications.map((item, index) => (
+              <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                {item.points}
+              </li>
+            ))}
+          </ul>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6">
+          <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[1]}
+            </p>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+};
+
+export default Content;
\ No newline at end of file
diff --git a/src/app/visualizer/hashmap/insert/quiz.jsx b/src/app/visualizer/hashmap/insert/quiz.jsx
new file mode 100644
index 000000000..7feddee5f
--- /dev/null
+++ b/src/app/visualizer/hashmap/insert/quiz.jsx
@@ -0,0 +1,56 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const Quiz = () => {
+  const questions = [
+  {
+    "question": "What is the average time complexity of HashMap insert?",
+    "options": [
+      "O(n)",
+      "O(log n)",
+      "O(1)",
+      "O(n²)"
+    ],
+    "correctAnswer": 2,
+    "explanation": ""
+  },
+  {
+    "question": "What happens when two keys hash to the same index?",
+    "options": [
+      "Error is thrown",
+      "First key is deleted",
+      "Collision occurs",
+      "HashMap resizes"
+    ],
+    "correctAnswer": 2,
+    "explanation": ""
+  },
+  {
+    "question": "Which method is used to insert in Java's HashMap?",
+    "options": [
+      "insert()",
+      "add()",
+      "push()",
+      "put()"
+    ],
+    "correctAnswer": 3,
+    "explanation": ""
+  },
+  {
+    "question": "What is chaining in HashMap?",
+    "options": [
+      "Linking multiple HashMaps",
+      "Storing colliding entries in a linked list at same index",
+      "Hashing a key twice",
+      "Resizing the table"
+    ],
+    "correctAnswer": 1,
+    "explanation": ""
+  }
+];
+
+  return <QuizEngine title="Quiz — HashMap Insert" questions={questions} />;
+};
+
+export default Quiz;
diff --git a/src/app/visualizer/hashmap/operations/quiz/HashMapQuizClient.jsx b/src/app/visualizer/hashmap/operations/quiz/HashMapQuizClient.jsx
new file mode 100644
index 000000000..9fba6c5d5
--- /dev/null
+++ b/src/app/visualizer/hashmap/operations/quiz/HashMapQuizClient.jsx
@@ -0,0 +1,76 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { ArrowRight, Database } from "lucide-react";
+
+const quizzes = [
+  {
+    title: "Insert (put) Quiz",
+    description:
+      "Practice inserting key-value pairs into a HashMap using the put() operation.",
+    href: "/visualizer/hashmap/operations/quiz/insert",
+  },
+  {
+    title: "Search (get) Quiz",
+    description:
+      "Test your understanding of retrieving values using the get() operation.",
+    href: "/visualizer/hashmap/operations/quiz/search",
+  },
+  {
+    title: "Delete (remove) Quiz",
+    description:
+      "Practice removing key-value pairs using the remove() operation.",
+    href: "/visualizer/hashmap/operations/quiz/delete",
+  },
+];
+
+export default function HashMapQuizClient() {
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <div className="mx-auto max-w-7xl px-6 py-12">
+        <motion.div
+          initial={{ opacity: 0, y: 25 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="mb-10"
+        >
+          <h1 className="text-4xl font-bold">#️⃣ HashMap Quiz</h1>
+
+          <p className="mt-3 text-muted-foreground">
+            Practice HashMap operations through interactive quizzes.
+          </p>
+        </motion.div>
+
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.05 }}
+              className="rounded-2xl border border-violet-500/20 bg-card p-6 shadow-sm transition-all hover:shadow-lg"
+            >
+              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-violet-500/10 text-violet-600">
+                <Database size={24} />
+              </div>
+
+              <h2 className="text-xl font-semibold">{quiz.title}</h2>
+
+              <p className="mt-2 text-sm text-muted-foreground">
+                {quiz.description}
+              </p>
+
+              <Link href={quiz.href}>
+                <button className="mt-6 flex w-full items-center justify-center gap-2 rounded-xl bg-violet-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-violet-700">
+                  <span>Start Quiz</span>
+                  <ArrowRight size={18} />
+                </button>
+              </Link>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/hashmap/operations/quiz/delete/page.jsx b/src/app/visualizer/hashmap/operations/quiz/delete/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/hashmap/operations/quiz/delete/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/hashmap/operations/quiz/delete/quiz.jsx b/src/app/visualizer/hashmap/operations/quiz/delete/quiz.jsx
new file mode 100644
index 000000000..26988e7d3
--- /dev/null
+++ b/src/app/visualizer/hashmap/operations/quiz/delete/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "Which method is used to remove a key-value pair from a HashMap in Java?",
+    options: [
+      "delete()",
+      "remove()",
+      "erase()",
+      "pop()"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The remove() method deletes the mapping associated with the specified key."
+  },
+  {
+    question: "What happens if remove() is called with a key that does not exist?",
+    options: [
+      "An exception is thrown",
+      "The program terminates",
+      "null is returned",
+      "The HashMap is cleared"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "If the specified key is absent, remove() simply returns null."
+  },
+  {
+    question: "What is the average time complexity of the remove() operation?",
+    options: [
+      "O(n)",
+      "O(log n)",
+      "O(1)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "HashMap deletion is O(1) on average because the key's bucket is found using hashing."
+  },
+  {
+    question: "Which method removes all key-value pairs from a HashMap?",
+    options: [
+      "deleteAll()",
+      "removeAll()",
+      "clear()",
+      "reset()"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The clear() method removes every mapping from the HashMap."
+  },
+  {
+    question: "What does remove(key) return when the key exists?",
+    options: [
+      "true",
+      "The removed value",
+      "The removed key",
+      "Nothing"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "remove(key) returns the value associated with the removed key."
+  },
+  {
+    question: "Which operation is performed before removing a key from a HashMap?",
+    options: [
+      "Sorting",
+      "Hashing the key",
+      "Balancing a tree",
+      "Binary Search"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The key is hashed to locate the correct bucket before deletion."
+  },
+  {
+    question: "Which method removes a key only if it is mapped to a specific value?",
+    options: [
+      "remove(key, value)",
+      "delete(key, value)",
+      "erase(key)",
+      "removeValue()"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "remove(key, value) removes the entry only if both the key and value match."
+  },
+  {
+    question: "After deleting a key from a HashMap, searching for that key using get() returns:",
+    options: [
+      "0",
+      "The previous value",
+      "null",
+      "false"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Once removed, get() returns null because the key no longer exists."
+  },
+  {
+    question: "What is one common use of HashMap deletion?",
+    options: [
+      "Removing expired cache entries",
+      "Sorting data",
+      "Balancing trees",
+      "Traversing graphs"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "HashMaps are often used in caches where outdated or expired entries need to be removed."
+  },
+  {
+    question: "Which of the following HashMap operations has an average time complexity of O(1)?",
+    options: [
+      "put()",
+      "get()",
+      "remove()",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "Insertion, searching, and deletion all have an average-case time complexity of O(1) in a HashMap."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Delete (remove) Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/hashmap/operations/quiz/insert/page.jsx b/src/app/visualizer/hashmap/operations/quiz/insert/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/hashmap/operations/quiz/insert/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/hashmap/operations/quiz/insert/quiz.jsx b/src/app/visualizer/hashmap/operations/quiz/insert/quiz.jsx
new file mode 100644
index 000000000..8500858bb
--- /dev/null
+++ b/src/app/visualizer/hashmap/operations/quiz/insert/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "Which method is used to insert a key-value pair into a HashMap in Java?",
+    options: [
+      "add()",
+      "insert()",
+      "put()",
+      "set()"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The put() method inserts or updates a key-value pair in a HashMap."
+  },
+  {
+    question: "What happens if put() is called with an existing key?",
+    options: [
+      "An exception is thrown",
+      "A duplicate key is created",
+      "The old value is replaced",
+      "Nothing happens"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "If the key already exists, put() replaces the previous value with the new one."
+  },
+  {
+    question: "Can a HashMap contain duplicate keys?",
+    options: [
+      "Yes",
+      "No",
+      "Only integers",
+      "Only strings"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "HashMap allows only unique keys, although values may be duplicated."
+  },
+  {
+    question: "What is the average time complexity of the put() operation?",
+    options: [
+      "O(n)",
+      "O(log n)",
+      "O(1)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The average-case complexity of put() is O(1) due to hashing."
+  },
+  {
+    question: "Which component determines where a key-value pair is stored in a HashMap?",
+    options: [
+      "Index Number",
+      "Hash Function",
+      "Binary Search",
+      "Tree Rotation"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "A hash function computes the bucket location for each key."
+  },
+  {
+    question: "What may happen when two different keys map to the same bucket?",
+    options: [
+      "Overflow",
+      "Collision",
+      "Deletion",
+      "Recursion"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "A collision occurs when multiple keys hash to the same bucket."
+  },
+  {
+    question: "Which data structure is commonly used to resolve collisions in Java HashMap?",
+    options: [
+      "Queue",
+      "Linked List (and Tree for many collisions)",
+      "Stack",
+      "Heap"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "HashMap uses linked lists and converts them to balanced trees when buckets become too large."
+  },
+  {
+    question: "Can HashMap store a null key?",
+    options: [
+      "Yes, one null key",
+      "No",
+      "Only in Java 7",
+      "Unlimited null keys"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Java's HashMap allows one null key and multiple null values."
+  },
+  {
+    question: "Which operation is performed before storing an element in a HashMap?",
+    options: [
+      "Sorting",
+      "Hashing the key",
+      "Traversing the map",
+      "Balancing the tree"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The key is hashed to determine the appropriate bucket."
+  },
+  {
+    question: "HashMap insertion is commonly used in:",
+    options: [
+      "Caching",
+      "Database indexing",
+      "Fast lookups",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "HashMaps are widely used for caching, indexing, and efficient key-value storage."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Insert (put) Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/hashmap/operations/quiz/page.jsx b/src/app/visualizer/hashmap/operations/quiz/page.jsx
new file mode 100644
index 000000000..7d2867dfd
--- /dev/null
+++ b/src/app/visualizer/hashmap/operations/quiz/page.jsx
@@ -0,0 +1,5 @@
+import HashMapQuizClient from "./HashMapQuizClient";
+
+export default function Page() {
+  return <HashMapQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/hashmap/operations/quiz/search/page.jsx b/src/app/visualizer/hashmap/operations/quiz/search/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/hashmap/operations/quiz/search/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/hashmap/operations/quiz/search/quiz.jsx b/src/app/visualizer/hashmap/operations/quiz/search/quiz.jsx
new file mode 100644
index 000000000..c59fa25e7
--- /dev/null
+++ b/src/app/visualizer/hashmap/operations/quiz/search/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "Which method is used to retrieve a value from a HashMap in Java?",
+    options: [
+      "search()",
+      "find()",
+      "get()",
+      "retrieve()"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The get() method returns the value associated with a specified key."
+  },
+  {
+    question: "What does get() return if the specified key does not exist?",
+    options: [
+      "0",
+      "false",
+      "null",
+      "Exception"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "If the key is not found, get() returns null."
+  },
+  {
+    question: "What is the average time complexity of the get() operation?",
+    options: [
+      "O(n)",
+      "O(log n)",
+      "O(1)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "HashMap provides average constant-time lookup using hashing."
+  },
+  {
+    question: "Which method checks whether a specific key exists in a HashMap?",
+    options: [
+      "contains()",
+      "containsKey()",
+      "hasKey()",
+      "exists()"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "containsKey() returns true if the specified key exists."
+  },
+  {
+    question: "Which method checks whether a specific value exists in a HashMap?",
+    options: [
+      "containsValue()",
+      "hasValue()",
+      "contains()",
+      "findValue()"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "containsValue() searches for a given value in the HashMap."
+  },
+  {
+    question: "Which component determines the bucket to search during get()?",
+    options: [
+      "Sorting",
+      "Hash Function",
+      "Binary Search",
+      "Recursion"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The hash function computes the bucket where the key should be located."
+  },
+  {
+    question: "If multiple keys are stored in the same bucket, searching may require:",
+    options: [
+      "Traversing the bucket entries",
+      "Sorting the entire map",
+      "Deleting duplicate keys",
+      "Heapify"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Collisions require searching through the entries within the bucket."
+  },
+  {
+    question: "Which operation is faster on average in a HashMap?",
+    options: [
+      "Searching using get()",
+      "Linear Search in an array",
+      "Bubble Sort",
+      "Depth-First Search"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "HashMap lookups are generally O(1), making them faster than linear search."
+  },
+  {
+    question: "What is the worst-case time complexity of get() if many collisions occur?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "In the worst case, many collisions can degrade lookup to O(n), though modern Java implementations often improve this using balanced trees."
+  },
+  {
+    question: "HashMap searching is commonly used in:",
+    options: [
+      "Caching",
+      "Database indexing",
+      "Fast key-value retrieval",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "HashMaps are widely used wherever efficient key-based lookup is required."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Search (get) Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/hashmap/search/AlgorithmClient.jsx b/src/app/visualizer/hashmap/search/AlgorithmClient.jsx
new file mode 100644
index 000000000..e433d5f72
--- /dev/null
+++ b/src/app/visualizer/hashmap/search/AlgorithmClient.jsx
@@ -0,0 +1,32 @@
+import Animation from "@/app/visualizer/hashmap/search/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/hashmap/search/content";
+import Code from "@/app/visualizer/hashmap/search/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("HashMap", "Search")}
+      title="Search (get)"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[
+            { text: "Insert", url: "/visualizer/hashmap/insert" },
+            { text: "Delete", url: "/visualizer/hashmap/delete" },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/hashmap/search/animation.jsx b/src/app/visualizer/hashmap/search/animation.jsx
new file mode 100644
index 000000000..43abc0a87
--- /dev/null
+++ b/src/app/visualizer/hashmap/search/animation.jsx
@@ -0,0 +1,7 @@
+"use client";
+import React from "react";
+import HashMapChainingVisualizer from "@/app/visualizer/hashmap/components/HashMapChainingVisualizer";
+
+const HashMapSearchVisualizer = () => <HashMapChainingVisualizer mode="search" />;
+
+export default HashMapSearchVisualizer;
diff --git a/src/app/visualizer/hashmap/search/codeBlock.jsx b/src/app/visualizer/hashmap/search/codeBlock.jsx
new file mode 100644
index 000000000..a420409fd
--- /dev/null
+++ b/src/app/visualizer/hashmap/search/codeBlock.jsx
@@ -0,0 +1,118 @@
+"use client";
+import { useState } from "react";
+
+const codes = {
+  JavaScript: `// HashMap Search in JavaScript
+const hashMap = new Map();
+
+// Insert some entries
+hashMap.set("name", "Alice");
+hashMap.set("age", 25);
+hashMap.set("city", "New York");
+
+// Search for a key
+console.log(hashMap.get("name")); // Alice
+console.log(hashMap.get("age"));  // 25
+
+// Check if key exists
+console.log(hashMap.has("city")); // true
+console.log(hashMap.has("country")); // false`,
+
+  Python: `# HashMap Search in Python
+hash_map = {
+    "name": "Alice",
+    "age": 25,
+    "city": "New York"
+}
+
+# Search for a key
+print(hash_map.get("name"))  # Alice
+print(hash_map.get("age"))   # 25
+
+# Safe search with default
+print(hash_map.get("country", "Not found"))  # Not found
+
+# Check if key exists
+print("city" in hash_map)  # True`,
+
+  Java: `// HashMap Search in Java
+import java.util.HashMap;
+
+HashMap<String, Object> hashMap = new HashMap<>();
+hashMap.put("name", "Alice");
+hashMap.put("age", 25);
+hashMap.put("city", "New York");
+
+// Search for a key
+System.out.println(hashMap.get("name")); // Alice
+System.out.println(hashMap.get("age"));  // 25
+
+// Check if key exists
+System.out.println(hashMap.containsKey("city"));    // true
+System.out.println(hashMap.containsKey("country")); // false`,
+
+  C: `// HashMap Search in C (manual implementation)
+#include <stdio.h>
+#include <string.h>
+#define SIZE 8
+
+typedef struct Node {
+  char key[50];
+  int value;
+  struct Node* next;
+} Node;
+
+Node* table[SIZE];
+
+int hashFunction(char* key) {
+  int hash = 0;
+  for (int i = 0; key[i]; i++)
+    hash = (hash + key[i]) % SIZE;
+  return hash;
+}
+
+int search(char* key) {
+  int index = hashFunction(key);
+  Node* curr = table[index];
+  while (curr) {
+    if (strcmp(curr->key, key) == 0) {
+      printf("Found: %s = %d\\n", key, curr->value);
+      return curr->value;
+    }
+    curr = curr->next;
+  }
+  printf("Key not found: %s\\n", key);
+  return -1;
+}`,
+};
+
+const CodeBlock = () => {
+  const [activeTab, setActiveTab] = useState("JavaScript");
+
+  return (
+    <div className="max-w-4xl mx-auto mb-8">
+      <div className="bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden">
+        <div className="flex border-b border-[#e5e7eb] dark:border-[#222]">
+          {Object.keys(codes).map((lang) => (
+            <button
+              key={lang}
+              onClick={() => setActiveTab(lang)}
+              className={`px-4 py-3 text-sm font-medium transition-colors ${
+                activeTab === lang
+                  ? "text-[#a435f0] border-b-2 border-[#a435f0]"
+                  : "text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+              }`}
+            >
+              {lang}
+            </button>
+          ))}
+        </div>
+        <pre className="p-6 overflow-x-auto text-sm text-[#374151] dark:text-[#d1d5db] bg-[#f9fafb] dark:bg-[#0a0a0a]">
+          <code>{codes[activeTab]}</code>
+        </pre>
+      </div>
+    </div>
+  );
+};
+
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/hashmap/search/content.jsx b/src/app/visualizer/hashmap/search/content.jsx
new file mode 100644
index 000000000..9d73ccf19
--- /dev/null
+++ b/src/app/visualizer/hashmap/search/content.jsx
@@ -0,0 +1,124 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+
+const Content = () => {
+  const paragraphs = [
+    `HashMap Search operation retrieves a value by its key. It uses the hash function to compute the bucket index, then searches the bucket for the matching key and returns its value.`,
+    `Search is the most frequently used HashMap operation with O(1) average time complexity, making HashMap ideal for fast lookups in real-world applications.`,
+  ];
+
+  const searchSteps = [
+    { points: 'Call get("name")' },
+    { points: 'Compute hash("name") = 3 → go to index 3' },
+    { points: "Search bucket at index 3 for key \"name\"" },
+    { points: "Key found → return its value \"Alice\"" },
+    { points: "If key not found → return null/undefined" },
+  ];
+
+  const complexity = [
+    { points: "Time Complexity (Average): O(1)" },
+    { points: "Time Complexity (Worst): O(n)" },
+    { points: "Space Complexity: O(1)" },
+  ];
+
+  const applications = [
+    { points: "Cache lookups" },
+    { points: "Database record retrieval by primary key" },
+    { points: "Two Sum problem — checking if complement exists" },
+    { points: "Frequency counting in strings/arrays" },
+    { points: "Routing tables in networking" },
+  ];
+
+  const edgeCases = [
+    { title: "Key not found", detail: "Returns null/undefined without throwing error" },
+    { title: "Collision chain", detail: "Searches entire chain at bucket until key matches or chain ends" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is HashMap Search?
+          </h1>
+          <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+            {paragraphs[0]}
+          </p>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Search Operation Steps
+          </h1>
+          <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+            {searchSteps.map((item, index) => (
+              <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                {item.points}
+              </li>
+            ))}
+          </ol>
+          <ul className="mt-4 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+            {complexity.map((item, index) => (
+              <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm">
+                  {item.points.split(":")[0]}:
+                </span>
+                <span className="ml-2">{item.points.split(":")[1]}</span>
+              </li>
+            ))}
+          </ul>
+          <div className="mt-8">
+            <ComplexityGraph
+              bestCase={(n) => 1}
+              averageCase={(n) => 1}
+              worstCase={(n) => n}
+              maxN={25}
+            />
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Edge Cases
+          </h1>
+          <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+            {edgeCases.map((item, index) => (
+              <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                <span className="font-semibold">{item.title}:</span> {item.detail}
+              </li>
+            ))}
+          </ul>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Real-world Applications
+          </h1>
+          <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+            {applications.map((item, index) => (
+              <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                {item.points}
+              </li>
+            ))}
+          </ul>
+        </section>
+
+        <section className="p-6">
+          <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[1]}
+            </p>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+};
+
+export default Content;
\ No newline at end of file
diff --git a/src/app/visualizer/hashmap/search/quiz.jsx b/src/app/visualizer/hashmap/search/quiz.jsx
new file mode 100644
index 000000000..e4e83550c
--- /dev/null
+++ b/src/app/visualizer/hashmap/search/quiz.jsx
@@ -0,0 +1,56 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const Quiz = () => {
+  const questions = [
+  {
+    "question": "What is the average time complexity of HashMap search?",
+    "options": [
+      "O(n)",
+      "O(log n)",
+      "O(1)",
+      "O(n²)"
+    ],
+    "correctAnswer": 2,
+    "explanation": ""
+  },
+  {
+    "question": "What does HashMap search return if key is not found?",
+    "options": [
+      "Error",
+      "0",
+      "null/undefined",
+      "Empty string"
+    ],
+    "correctAnswer": 2,
+    "explanation": ""
+  },
+  {
+    "question": "Which method searches a key in Java's HashMap?",
+    "options": [
+      "search()",
+      "find()",
+      "get()",
+      "fetch()"
+    ],
+    "correctAnswer": 2,
+    "explanation": ""
+  },
+  {
+    "question": "What is the worst case time complexity of HashMap search?",
+    "options": [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    "correctAnswer": 2,
+    "explanation": ""
+  }
+];
+
+  return <QuizEngine title="Quiz — HashMap Search" questions={questions} />;
+};
+
+export default Quiz;
diff --git a/src/app/visualizer/linkedlist/operations/comparison/AlgorithmClient.jsx b/src/app/visualizer/linkedlist/operations/comparison/AlgorithmClient.jsx
new file mode 100644
index 000000000..89b97213b
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/comparison/AlgorithmClient.jsx
@@ -0,0 +1,34 @@
+import Animation from "@/app/visualizer/linkedlist/operations/comparison/animation";
+import Content from "@/app/visualizer/linkedlist/operations/comparison/content";
+import CodeBlock from "@/app/visualizer/linkedlist/operations/comparison/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Linked List", "Comparison")}
+      title="Comparison"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      exploreOther={
+        <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" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/linkedlist/operations/comparison/animation.jsx b/src/app/visualizer/linkedlist/operations/comparison/animation.jsx
new file mode 100644
index 000000000..96f391544
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/comparison/animation.jsx
@@ -0,0 +1,225 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import { generateRandomListLogic } from "@/features/algorithms/linkedlist/traversalLogic";
+import { compareListsGenerator } from "@/features/algorithms/linkedlist/llComparisonLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+const LinkedListComparison = () => {
+  const [list1, setList1] = useState([]);
+  const [list2, setList2] = useState([]);
+  
+  const frames = useMemo(() => {
+    if (list1.length === 0 || list2.length === 0) return [];
+    return Array.from(compareListsGenerator(list1, list2));
+  }, [list1, list2]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  const handleGenerateIdentical = () => {
+    if (engine.isPlaying) return;
+    const baseList = generateRandomListLogic();
+    const listCopy = baseList.map((node) => ({ ...node }));
+    setList1(baseList);
+    setList2(listCopy);
+    engine.reset();
+  };
+
+  const handleGenerateDifferent = () => {
+    if (engine.isPlaying) return;
+    setList1(generateRandomListLogic());
+    setList2(generateRandomListLogic());
+    engine.reset();
+  };
+
+  const startComparison = () => {
+    if (engine.isPlaying || list1.length === 0 || list2.length === 0) return;
+    engine.reset();
+    engine.play();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      setTimeout(() => engine.play(), 50);
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  const handleReset = () => {
+    setList1([]);
+    setList2([]);
+    engine.reset();
+  };
+
+  useVisualizerKeyboard({
+    onStart: startComparison,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        phase: 'idle',
+        list1Index: -1,
+        list2Index: -1,
+        explanation: list1.length > 0 ? "Ready to compare. Click 'Compare Lists'." : "Generate identical or different lists to compare."
+      };
+
+  const renderList = (listData, name, activeIndex) => (
+    <div className="mb-6 flex flex-col items-center">
+      <h3 className="mb-4 text-lg font-bold text-gray-700 dark:text-gray-300">
+        {name}
+      </h3>
+      <div className="relative flex w-full items-start justify-center overflow-x-auto rounded-xl border border-[#e5e7eb] bg-[#f9fafb] p-4 dark:border-[#222] dark:bg-[#181818] min-h-[140px]">
+        {listData.length === 0 ? (
+          <div className="w-full py-6 text-center text-gray-500">
+            Empty List
+          </div>
+        ) : (
+          <div className="flex items-center space-x-4 sm:space-x-8">
+            {listData.map((node, index) => {
+              const isCurrent = activeIndex === index;
+              let bgData = "bg-primary";
+              let scaleClass = "scale-100";
+              
+              if (isCurrent) {
+                  if (currentFrame.phase === 'compare') {
+                      bgData = "bg-amber-500";
+                      scaleClass = "scale-110 shadow-lg";
+                  } else if (currentFrame.phase === 'matched' || currentFrame.match === true) {
+                      bgData = "bg-emerald-500";
+                      scaleClass = "scale-105";
+                  } else if (currentFrame.phase === 'complete' && currentFrame.match === false) {
+                      bgData = "bg-rose-500";
+                      scaleClass = "scale-105";
+                  }
+              }
+
+              return (
+              <div key={node.id} className="flex items-center">
+                <div className={`node flex flex-col items-center transition-all duration-300 ${scaleClass}`}>
+                  <span className="text-[10px] font-mono text-gray-500 mb-1">{node.address}</span>
+                  <div className="flex">
+                      <div className={`data-part w-16 rounded-l-lg ${bgData} p-3 text-center text-base text-white sm:w-20 sm:p-4 sm:text-lg transition-colors`}>
+                      {node.value}
+                      </div>
+                      <div className="next-part w-16 rounded-r-lg bg-[#c27cf7] p-3 text-center font-mono text-xs dark:bg-primary sm:w-20 sm:p-4 sm:text-base">
+                      {node.next}
+                      </div>
+                  </div>
+                </div>
+                {index < listData.length - 1 && (
+                  <div className="mx-1 text-2xl sm:mx-2 sm:text-3xl text-gray-400">&rarr;</div>
+                )}
+              </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize the parallel traversal required to compare two linked lists.
+      </p>
+
+      <VisualizerCard>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <button
+              onClick={handleGenerateIdentical}
+              disabled={engine.isPlaying}
+              className="flex-1 rounded-lg bg-[#10b981]/10 px-6 py-3 text-[#10b981] transition hover:bg-[#10b981]/20 border border-[#10b981]/30 disabled:opacity-50"
+            >
+              Generate Identical
+            </button>
+            <button
+              onClick={handleGenerateDifferent}
+              disabled={engine.isPlaying}
+              className="flex-1 rounded-lg bg-[#ef4444]/10 px-6 py-3 text-[#ef4444] transition hover:bg-[#ef4444]/20 border border-[#ef4444]/30 disabled:opacity-50"
+            >
+              Generate Different
+            </button>
+          </div>
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <button
+              onClick={startComparison}
+              disabled={engine.isPlaying || list1.length === 0}
+              className="flex-1 rounded-lg bg-primary px-6 py-3 text-white transition hover:bg-primary-dark disabled:bg-gray-400"
+            >
+              {engine.isPlaying ? "Comparing..." : "Compare Lists"}
+            </button>
+            <button
+              onClick={handleReset}
+              className="flex-1 rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 dark:border-white dark:text-white dark:hover:bg-gray-700"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+        
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center min-h-[60px] flex items-center justify-center">
+         <p className="text-gray-800 dark:text-gray-200 font-medium">
+             {currentFrame.explanation}
+         </p>
+      </div>
+
+      <VisualizerCard>
+        <div className="mb-6 flex justify-center gap-4 text-sm sm:gap-8 sm:text-base">
+          <div className="flex items-center">
+            <div className="mr-2 h-4 w-4 rounded-full bg-amber-500"></div>
+            <span>Comparing</span>
+          </div>
+          <div className="flex items-center">
+            <div className="mr-2 h-4 w-4 rounded-full bg-emerald-500"></div>
+            <span>Match</span>
+          </div>
+          <div className="flex items-center">
+            <div className="mr-2 h-4 w-4 rounded-full bg-rose-500"></div>
+            <span>Mismatch</span>
+          </div>
+        </div>
+
+        {renderList(list1, "List 1", currentFrame.list1Index)}
+        {renderList(list2, "List 2", currentFrame.list2Index)}
+
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default LinkedListComparison;
diff --git a/src/app/visualizer/linkedlist/operations/comparison/codeBlock.jsx b/src/app/visualizer/linkedlist/operations/comparison/codeBlock.jsx
new file mode 100644
index 000000000..b32a85539
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/comparison/codeBlock.jsx
@@ -0,0 +1,27 @@
+'use client';
+
+import CodeBlock from '@/app/components/ui/CodeBlock';
+import CodeExamples from '@/app/visualizer/linkedlist/operations/comparison/data/codeExamples.json';
+
+// ─── Code Examples ─────────────────────────────
+const codeExamples = CodeExamples;
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'linkedListComparison.js',
+    python:'linked_list_comparison.py',
+    java:'LinkedListComparison.java',
+    c:'linked_list_comparison.c',
+    cpp:'linked_list_comparison.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const LinkedListComparisonCode = () => (
+    <CodeBlock
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default LinkedListComparisonCode;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/comparison/content.jsx b/src/app/visualizer/linkedlist/operations/comparison/content.jsx
old mode 100755
new mode 100644
similarity index 100%
rename from app/visualizer/linkedList/operations/comparison/content.jsx
rename to src/app/visualizer/linkedlist/operations/comparison/content.jsx
diff --git a/src/app/visualizer/linkedlist/operations/comparison/data/codeExamples.json b/src/app/visualizer/linkedlist/operations/comparison/data/codeExamples.json
new file mode 100644
index 000000000..a5cb4a0fb
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/comparison/data/codeExamples.json
@@ -0,0 +1,7 @@
+{
+  "javascript": "class Node {\n  constructor(data) {\n    this.data = data;\n    this.next = null;\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\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}\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>\ntypedef struct Node {\n    int data;\n    struct Node* next;\n} Node;\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;\nclass Node {\npublic:\n    int data;\n    Node* next;\n    Node(int d) : data(d), next(nullptr) {}\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
diff --git a/src/app/visualizer/linkedlist/operations/comparison/quiz.jsx b/src/app/visualizer/linkedlist/operations/comparison/quiz.jsx
new file mode 100644
index 000000000..4a0d963d0
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/comparison/quiz.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const Quiz = () => {
+  const questions = [
+  {
+    "question": "What is the primary goal when comparing two linked lists?",
+    "options": [
+      "To merge them into one list",
+      "To determine if they are structurally and value-wise identical",
+      "To reverse both lists",
+      "To delete duplicate nodes"
+    ],
+    "correctAnswer": 1,
+    "explanation": "The comparison aims to check whether the two linked lists have the same sequence of values in the same order."
+  },
+  {
+    "question": "What condition indicates that two linked lists are not equal?",
+    "options": [
+      "Both have the same head node",
+      "One list is longer than the other",
+      "Both lists have the same length",
+      "Both are empty"
+    ],
+    "correctAnswer": 1,
+    "explanation": "If one list ends before the other, they differ in length and are not equal."
+  },
+  {
+    "question": "What approach is commonly used to compare two linked lists?",
+    "options": [
+      "Recursive traversal",
+      "Simultaneous traversal using two pointers",
+      "Storing values in a hash map",
+      "Binary search"
+    ],
+    "correctAnswer": 1,
+    "explanation": "The most common method is using two pointers to traverse both lists node by node and compare their values."
+  },
+  {
+    "question": "What should be checked at each step during linked list comparison?",
+    "options": [
+      "If node values are equal",
+      "If both nodes are at the tail",
+      "If the next pointers match",
+      "If memory addresses are the same"
+    ],
+    "correctAnswer": 0,
+    "explanation": "At each step, the values of corresponding nodes should be compared to determine equality."
+  },
+  {
+    "question": "What does it mean if both pointers reach null at the same time during comparison?",
+    "options": [
+      "The lists are not equal",
+      "An error occurred",
+      "Both lists are equal",
+      "One list is circular"
+    ],
+    "correctAnswer": 2,
+    "explanation": "If both lists end simultaneously without any mismatches, they are equal."
+  },
+  {
+    "question": "What is the time complexity of comparing two linked lists with n nodes each?",
+    "options": [
+      "O(n^2)",
+      "O(log n)",
+      "O(n)",
+      "O(1)"
+    ],
+    "correctAnswer": 2,
+    "explanation": "Each node is visited once during comparison, resulting in linear time complexity O(n)."
+  },
+  {
+    "question": "Which case is a valid edge case in linked list comparison?",
+    "options": [
+      "One list is empty",
+      "Both lists contain the same object references",
+      "Both lists are infinite",
+      "Both lists are sorted"
+    ],
+    "correctAnswer": 0,
+    "explanation": "An important edge case is when one list is empty and the other is not."
+  },
+  {
+    "question": "How should object nodes with same values but different references be treated in comparison?",
+    "options": [
+      "As equal if their values match",
+      "As unequal always",
+      "Only compare memory addresses",
+      "Skip such nodes"
+    ],
+    "correctAnswer": 0,
+    "explanation": "Linked list comparison typically checks for value equality, not memory address equality."
+  },
+  {
+    "question": "Why is it important to compare both length and values when comparing two linked lists?",
+    "options": [
+      "Length indicates memory usage",
+      "Lists must be sorted first",
+      "To ensure complete equality",
+      "To avoid stack overflow"
+    ],
+    "correctAnswer": 2,
+    "explanation": "Even if values match in part, differing lengths imply inequality. Full comparison ensures both length and value match."
+  },
+  {
+    "question": "What will the comparison function return if the lists differ at any node?",
+    "options": [
+      "True",
+      "Null",
+      "False",
+      "0"
+    ],
+    "correctAnswer": 2,
+    "explanation": "The comparison function returns false as soon as a mismatch is detected."
+  }
+];
+
+  return <QuizEngine title="Comparing Quiz Challenge" questions={questions} />;
+};
+
+export default Quiz;
diff --git a/src/app/visualizer/linkedlist/operations/deletion/AlgorithmClient.jsx b/src/app/visualizer/linkedlist/operations/deletion/AlgorithmClient.jsx
new file mode 100644
index 000000000..f7100e01f
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/deletion/AlgorithmClient.jsx
@@ -0,0 +1,32 @@
+import Animation from "@/app/visualizer/linkedlist/operations/deletion/animation";
+import Content from "@/app/visualizer/linkedlist/operations/deletion/content";
+import CodeBlock from "@/app/visualizer/linkedlist/operations/deletion/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Linked List", "Deletion")}
+      title="Deletion"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      exploreOther={
+        <ExploreOther
+          title="Explore Other Types"
+          links={[
+            { text: "Insertion", url: "./insertion" },
+            { text: "Searching", url: "./search" },
+            { text: "Merge Lists", url: "./merge" },
+            { text: "Comparison", url: "./comparison" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/linkedlist/operations/deletion/animation.jsx b/src/app/visualizer/linkedlist/operations/deletion/animation.jsx
new file mode 100644
index 000000000..b6aca9c11
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/deletion/animation.jsx
@@ -0,0 +1,346 @@
+"use client";
+import React, { useMemo, useState } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { addNodeDeletionGen, deleteLastNodeGen,deleteFirstNodeGen,deleteAtPositionGen} from "@/features/algorithms/linkedlist/deletionLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+const LinkedListDeletion = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [list, setList] = useState([]);
+  const [pendingOp, setPendingOp] = useState(null); // { type: 'add' | 'delete', val?: string }
+  const [positionInput, setPositionInput] = useState("");
+
+  const frames = useMemo(() => {
+    if (!pendingOp) return [];
+    if (pendingOp.type === "add") {
+      return Array.from(addNodeDeletionGen(list, pendingOp.val));
+    }
+
+    if (pendingOp.type === "delete") {
+      return Array.from(deleteLastNodeGen(list));
+    }
+
+    if (pendingOp.type === "delete_first") {
+      return Array.from(deleteFirstNodeGen(list));
+    }
+
+    if (pendingOp.type === "delete_position") {
+      return Array.from(
+        deleteAtPositionGen(list, pendingOp.position)
+      );
+    }
+
+    return [];
+  }, [list, pendingOp]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  const addNode = () => {
+    if (!inputValue || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'add', val: inputValue });
+    engine.reset();
+    engine.play();
+  };
+
+  const deleteNode = () => {
+    if (list.length === 0 || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'delete' });
+    engine.reset();
+    engine.play();
+  };
+
+  const deleteFirstNode = () => {
+    if (list.length === 0 || engine.isPlaying || pendingOp) return;
+
+    setPendingOp({ type: "delete_first" });
+    engine.reset();
+    engine.play();
+  };
+  
+  const handleReset = () => {
+    setInputValue("");
+    setList([]);
+    setPendingOp(null);
+    engine.reset();
+  };
+  const deleteAtPosition = () => {
+    const position = Number(positionInput);
+
+    if (
+      isNaN(position) ||
+      position < 0 ||
+      position >= list.length
+    )
+      return;
+
+    setPendingOp({
+      type: "delete_position",
+      position,
+    });
+
+    engine.reset();
+    engine.play();
+  };
+
+  useVisualizerReset(handleReset);
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.phase === 'complete') {
+         setList(finalFrame.list);
+      }
+      setPendingOp(null);
+      engine.reset();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  // When animation finishes naturally
+  React.useEffect(() => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0 && !engine.isPlaying) {
+        const finalFrame = frames[frames.length - 1];
+        if (finalFrame && finalFrame.phase === 'complete') {
+            setList(finalFrame.list);
+            setPendingOp(null);
+            if (pendingOp?.type === 'add') setInputValue("");
+            engine.reset();
+        }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine, pendingOp]);
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        list: list,
+        newNode: null,
+        phase: 'idle',
+        currentNodeIndex: -1,
+        targetNodeIndex: -1,
+        explanation: "Enter a value and click 'Add Node' to insert, or click 'Delete Last Node'."
+      };
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize how deleting the tail node updates the final pointer in a linked list.
+      </p>
+
+      <VisualizerCard>
+        <div className="flex flex-col gap-4">
+
+          {/* Add Node */}
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              className="flex-1 rounded-lg border bg-white p-3 dark:bg-gray-700"
+              placeholder="Enter value"
+              disabled={engine.isPlaying || pendingOp !== null}
+            />
+
+            <button
+              onClick={addNode}
+              disabled={engine.isPlaying || !inputValue || pendingOp !== null}
+              className="w-full rounded-lg bg-primary px-6 py-3 text-white disabled:bg-gray-400 sm:w-auto"
+            >
+              {engine.isPlaying && pendingOp?.type === "add"
+                ? "Adding..."
+                : "Add Node"}
+            </button>
+          </div>
+
+          {/* Delete Operations */}
+          <div className="flex flex-col gap-4">
+
+            <div className="flex flex-col gap-4 sm:flex-row">
+              <button
+                onClick={deleteNode}
+                disabled={
+                  engine.isPlaying ||
+                  list.length === 0 ||
+                  pendingOp !== null
+                }
+                className="w-full rounded-lg border border-black px-6 py-3 text-black disabled:opacity-50 dark:border-white dark:text-white"
+              >
+                {engine.isPlaying && pendingOp?.type === "delete"
+                  ? "Deleting..."
+                  : "Delete Last Node"}
+              </button>
+
+              <button
+                onClick={deleteFirstNode}
+                disabled={
+                  engine.isPlaying ||
+                  list.length === 0 ||
+                  pendingOp !== null
+                }
+                className="w-full rounded-lg border border-black px-6 py-3 text-black disabled:opacity-50 dark:border-white dark:text-white"
+              >
+                Delete First Node
+              </button>
+
+              <button
+                onClick={handleReset}
+                disabled={engine.isPlaying && pendingOp === null}
+                className="w-full rounded-lg border border-black px-6 py-3 text-black dark:border-white dark:text-white"
+              >
+                Reset
+              </button>
+            </div>
+
+            {/* Delete At Position */}
+            <div className="flex flex-col gap-4 sm:flex-row">
+              <input
+                type="number"
+                min="0"
+                value={positionInput}
+                onChange={(e) => setPositionInput(e.target.value)}
+                placeholder="Position"
+                disabled={engine.isPlaying || pendingOp !== null}
+                className="flex-1 rounded-lg border bg-white p-3 dark:bg-gray-700"
+              />
+
+              <button
+                onClick={deleteAtPosition}
+                disabled={
+                  engine.isPlaying ||
+                  list.length === 0 ||
+                  pendingOp !== null ||
+                  positionInput === ""
+                }
+                className="w-full rounded-lg border border-black px-6 py-3 text-black whitespace-nowrap disabled:opacity-50 dark:border-white dark:text-white sm:w-auto"
+              >
+                Delete At Position
+              </button>
+            </div>
+
+          </div>
+        </div>
+
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => {
+                engine.reset();
+              }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center">
+         <p className="text-gray-800 dark:text-gray-200 font-medium">
+             {currentFrame.explanation}
+         </p>
+      </div>
+
+      <VisualizerCard>
+        <div className="mb-6 flex justify-center gap-4 text-sm sm:gap-8 sm:text-base">
+          <div className="flex items-center">
+            <div className="mr-2 h-4 w-4 rounded-full bg-primary"></div>
+            <span>Data</span>
+          </div>
+          <div className="flex items-center">
+            <div className="mr-2 h-4 w-4 rounded-full bg-rose-500"></div>
+            <span>To Delete</span>
+          </div>
+          <div className="flex items-center">
+            <div className="mr-2 h-4 w-4 rounded-full bg-[#c27cf7] dark:bg-primary"></div>
+            <span>Next Pointer</span>
+          </div>
+        </div>
+
+        <div className="relative flex w-full flex-col items-center justify-center overflow-x-auto rounded-xl border border-[#e5e7eb] bg-[#f9fafb] p-4 dark:border-[#222] dark:bg-[#181818] min-h-[300px]">
+          {/* New Node Floating */}
+          {currentFrame.newNode && currentFrame.action === 'add' && (
+            <div className={`mb-8 flex transition-all duration-500 ease-in-out ${currentFrame.phase === 'traverse' ? 'translate-x-1/2 opacity-80' : 'translate-x-0 opacity-100 scale-110'}`}>
+               <div className="flex items-center flex-col">
+                  <span className="text-xs font-mono text-blue-600 mb-1 font-bold">New Node: {currentFrame.newNode.address}</span>
+                  <div className="flex shadow-lg shadow-blue-500/30">
+                    <div className="w-16 rounded-l-lg bg-emerald-500 p-3 text-center text-base text-white sm:w-20 sm:p-4 sm:text-lg">
+                      {currentFrame.newNode.value}
+                    </div>
+                    <div className="w-16 rounded-r-lg bg-emerald-400 p-3 text-center font-mono text-xs sm:w-20 sm:p-4 sm:text-base">
+                      {currentFrame.newNode.next}
+                    </div>
+                  </div>
+               </div>
+            </div>
+          )}
+        
+          {currentFrame.list.length === 0 ? (
+            <div className="w-full py-16 text-center text-gray-500">
+              No nodes added yet.
+            </div>
+          ) : (
+            <div className="flex items-center space-x-4 sm:space-x-8">
+              {currentFrame.list.map((node, index) => {
+                  const isCurrent = currentFrame.currentNodeIndex === index;
+                  const isTarget = currentFrame.targetNodeIndex === index;
+                  const isInsertTraversal =
+                    currentFrame.action === "insert_position" &&
+                    currentFrame.currentNodeIndex === index;
+
+                  const isDeleteFirst =
+                    currentFrame.action === "delete_first" &&
+                    currentFrame.targetNodeIndex === index;
+
+                  const bgData =  isDeleteFirst ? "bg-rose-500": isInsertTraversal ? "bg-amber-500" : isTarget ? "bg-rose-500" : isCurrent ? "bg-amber-500" : "bg-primary";
+                  const scaleClass = isTarget ? "scale-90 opacity-50 shadow-none" : isCurrent ? "scale-110 shadow-md z-10" : "scale-100";
+                  
+                  return (
+                    <div key={node.id} className="flex items-center">
+                      <div className={`node flex flex-col items-center transition-all duration-500 ${scaleClass}`}>
+                        <span className="text-[10px] font-mono text-gray-500 mb-1">{node.address}</span>
+                        <div className="flex">
+                            <div className={`data-part w-16 rounded-l-lg ${bgData} p-3 text-center text-base text-white sm:w-20 sm:p-4 sm:text-lg transition-colors`}>
+                            {node.value}
+                            </div>
+                            <div className="next-part w-16 rounded-r-lg bg-[#c27cf7] p-3 text-center font-mono text-xs dark:bg-primary sm:w-20 sm:p-4 sm:text-base">
+                            {node.next}
+                            </div>
+                        </div>
+                      </div>
+                      {index < currentFrame.list.length - 1 && (
+                        <div className="mx-1 text-2xl sm:mx-2 sm:text-3xl text-gray-400">&rarr;</div>
+                      )}
+                    </div>
+                  );
+              })}
+            </div>
+          )}
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default LinkedListDeletion;
diff --git a/src/app/visualizer/linkedlist/operations/deletion/codeBlock.jsx b/src/app/visualizer/linkedlist/operations/deletion/codeBlock.jsx
new file mode 100644
index 000000000..80c27696e
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/deletion/codeBlock.jsx
@@ -0,0 +1,27 @@
+'use client';
+
+import CodeBlock from '@/app/components/ui/CodeBlock';
+import CodeExamples from '@/app/visualizer/linkedlist/operations/deletion/data/codeExamples.json';
+
+// ─── Code Examples ─────────────────────────────
+const codeExamples = CodeExamples;
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'linkedListDeletion.js',
+    python:'linked_list_deletion.py',
+    java:'LinkedListDeletion.java',
+    c:'linked_list_deletion.c',
+    cpp:'linked_list_deletion.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const LinkedListDeletionCode = () => (
+    <CodeBlock
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default LinkedListDeletionCode;
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/deletion/content.jsx b/src/app/visualizer/linkedlist/operations/deletion/content.jsx
new file mode 100644
index 000000000..ab5f0014c
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/deletion/content.jsx
@@ -0,0 +1,405 @@
+const content = () => {
+  const overview = [
+    `Linked List deletion involves removing nodes from the linked data structure at various positions. Unlike arrays, linked lists allow efficient deletion at any point without requiring shifting of remaining elements.`,
+    `Deletion is a fundamental operation that enables dynamic modification of the list. The efficiency varies based on deletion position, from O(1) for head to O(n) for arbitrary positions or tail (without tail pointer).`,
+    `Proper deletion requires careful pointer manipulation to maintain list integrity and avoid memory leaks (in languages without garbage collection).`,
+  ];
+
+  const deletionTypes = [
+    { 
+      name: "Deletion at Head", 
+      complexity: "O(1)", 
+      description: "Removes the first node, making the next node the new head",
+      code: `function deleteHead() {
+  if (!head) return; // Empty list
+  
+  const temp = head;
+  head = head.next;
+  
+  // In languages without GC:
+  // temp.next = null; // Isolate node
+  // free(temp);       // Free memory
+  
+  // Special case: If list becomes empty
+  if (!head) tail = null;
+}`
+    },
+    { 
+      name: "Deletion at Tail", 
+      complexity: "O(n) without tail pointer, O(1) with doubly linked list", 
+      description: "Removes the last node, requiring traversal to find new tail",
+      code: `function deleteTail() {
+  if (!head) return; // Empty list
+  
+  // Single node case
+  if (!head.next) {
+    head = null;
+    tail = null;
+    return;
+  }
+  
+  // Traverse to find node before tail
+  let current = head;
+  while (current.next && current.next.next) {
+    current = current.next;
+  }
+  
+  // Now current is the new tail
+  current.next = null;
+  tail = current;
+}`
+    },
+    { 
+      name: "Deletion by Value", 
+      complexity: "O(n)", 
+      description: "Finds and removes first node containing matching value",
+      code: `function deleteValue(value) {
+  if (!head) return; // Empty list
+  
+  // Special case: head contains value
+  if (head.data === value) {
+    deleteHead();
+    return;
+  }
+  
+  let current = head;
+  while (current.next && current.next.data !== value) {
+    current = current.next;
+  }
+  
+  if (current.next) {
+    const toDelete = current.next;
+    current.next = toDelete.next;
+    
+    // Update tail if deleting last node
+    if (!current.next) tail = current;
+    
+    // In languages without GC:
+    // toDelete.next = null;
+    // free(toDelete);
+  }
+}`
+    },
+    { 
+      name: "Deletion at Position", 
+      complexity: "O(n)", 
+      description: "Removes node at specific index (0-based)",
+      code: `function deleteAt(position) {
+  if (!head || position < 0) return;
+  
+  if (position === 0) {
+    deleteHead();
+    return;
+  }
+  
+  let current = head;
+  for (let i = 0; current && i < position-1; i++) {
+    current = current.next;
+  }
+  
+  if (!current || !current.next) return; // Out of bounds
+  
+  const toDelete = current.next;
+  current.next = toDelete.next;
+  
+  // Update tail if deleting last node
+  if (!current.next) tail = current;
+  
+  // Memory cleanup in non-GC languages
+  // toDelete.next = null;
+  // free(toDelete);
+}`
+    },
+  ];
+
+  const headDeletionSteps = [
+    { step: "Check if list is empty (head is null)" },
+    { step: "Store reference to current head node" },
+    { step: "Update head pointer to head.next" },
+    { step: "Handle memory cleanup (if needed)" },
+    { step: "Special case: If list becomes empty, update tail pointer" },
+  ];
+
+  const tailDeletionSteps = [
+    { step: "Check for empty list" },
+    { step: "Handle single node case separately" },
+    { step: "Traverse to find node before tail (penultimate node)" },
+    { step: "Set penultimate node's next to null" },
+    { step: "Update tail pointer to penultimate node" },
+  ];
+
+  const middleDeletionSteps = [
+    { step: "Traverse to find node before target node" },
+    { step: "Update previous node's next pointer to skip target" },
+    { step: "Handle special case when deleting last node" },
+    { step: "Perform memory cleanup (if needed)" },
+  ];
+
+  const visualization = [
+    { operation: "Initial State", state: "head → [A] → [B] → [C] → [D] → null" },
+    { operation: "deleteHead()", state: "head → [B] → [C] → [D] → null" },
+    { operation: "deleteTail()", state: "head → [B] → [C] → null" },
+    { operation: "deleteValue('C')", state: "head → [B] → null" },
+    { operation: "deleteAt(0)", state: "head → null" },
+  ];
+
+  const edgeCases = [
+    "Empty list (head = null)",
+    "Single node list (head = tail)",
+    "Deleting head node",
+    "Deleting tail node",
+    "Deleting non-existent value",
+    "Deleting at invalid position (negative or out of bounds)",
+    "Memory management in non-GC languages",
+  ];
+
+  const bestPractices = [
+    "Always check for empty list before deletion",
+    "Maintain proper head/tail pointers after deletion",
+    "Handle single node case separately",
+    "In non-GC languages, properly free deleted node memory",
+    "Consider using dummy nodes to simplify edge cases",
+    "Document position/indexing scheme (0-based vs 1-based)",
+    "Validate position bounds before deletion attempts",
+  ];
+
+  const comparisonTable = [
+    { 
+      feature: "Time Complexity", 
+      array: "O(n) (requires shifting)", 
+      linkedList: "O(1) head, O(n) arbitrary/tail" 
+    },
+    { 
+      feature: "Space Complexity", 
+      array: "O(1)", 
+      linkedList: "O(1)" 
+    },
+    { 
+      feature: "Memory Usage", 
+      array: "Fixed size unless resized", 
+      linkedList: "Dynamic, no unused capacity" 
+    },
+    { 
+      feature: "Implementation", 
+      array: "Simple indexing", 
+      linkedList: "Pointer manipulation" 
+    },
+    { 
+      feature: "Best For", 
+      array: "Frequent random access", 
+      linkedList: "Frequent deletions at head" 
+    },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+        {/* Overview Section */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Deletion
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            {overview.map((para, index) => (
+              <p key={index} className="text-[#374151] dark:text-[#d1d5db] mb-3 leading-relaxed">
+                {para}
+              </p>
+            ))}
+            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                <strong>Key Consideration:</strong> Proper deletion requires maintaining list connectivity and handling memory appropriately to prevent leaks (in manual memory management environments).
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Deletion Types */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Deletion Types</h2>
+          <div className="space-y-6">
+            {deletionTypes.map((type, index) => (
+              <div key={index} className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{type.name}</h3>
+                <div className="flex flex-col md:flex-row gap-4">
+                  <div className="flex-1">
+                    <p className="text-[#374151] dark:text-[#d1d5db] mb-2"><strong>Complexity:</strong> <span className="font-mono">{type.complexity}</span></p>
+                    <p className="text-[#374151] dark:text-[#d1d5db]">{type.description}</p>
+                  </div>
+                  <div className="flex-1">
+                    <pre className="bg-gray-100 dark:bg-gray-800 p-3 rounded-md text-sm overflow-x-auto">
+                      <code className="text-gray-800 dark:text-gray-200">{type.code}</code>
+                    </pre>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Deletion Processes */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Deletion Processes</h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {/* Head Deletion */}
+            <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Head Deletion</h3>
+              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                {headDeletionSteps.map((step, index) => (
+                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                    {step.step}
+                  </li>
+                ))}
+              </ol>
+            </div>
+
+            {/* Tail Deletion */}
+            <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Tail Deletion</h3>
+              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                {tailDeletionSteps.map((step, index) => (
+                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                    {step.step}
+                  </li>
+                ))}
+              </ol>
+            </div>
+
+            {/* Middle Deletion */}
+            <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Middle Deletion</h3>
+              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                {middleDeletionSteps.map((step, index) => (
+                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                    {step.step}
+                  </li>
+                ))}
+              </ol>
+              </div>
+          </div>
+        </section>
+
+        {/* Visualization */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Operation Visualization</h2>
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+              <thead className="bg-gray-50 dark:bg-gray-700">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Operation</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">List State</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                {visualization.map((item, index) => (
+                  <tr key={index}>
+                    <td className="px-4 py-3 text-sm font-mono text-gray-900 dark:text-white">{item.operation}</td>
+                    <td className="px-4 py-3 text-sm font-mono text-[#374151] dark:text-[#d1d5db]">{item.state}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        {/* Edge Cases */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Edge Cases to Consider</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {edgeCases.map((caseItem, index) => (
+              <div key={index} className="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg border border-gray-200 dark:border-gray-600">
+                <div className="flex items-start">
+                  <div className="flex-shrink-0 h-5 w-5 text-yellow-500 mt-0.5">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                      <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                    </svg>
+                  </div>
+                  <div className="ml-3">
+                    <p className="text-sm text-[#374151] dark:text-[#d1d5db]">{caseItem}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Best Practices */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Best Practices</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {bestPractices.map((practice, index) => (
+              <div key={index} className="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg border border-gray-200 dark:border-gray-600">
+                <div className="flex items-start">
+                  <div className="flex-shrink-0 h-5 w-5 text-green-500 mt-0.5">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                    </svg>
+                  </div>
+                  <div className="ml-3">
+                    <p className="text-sm text-[#374151] dark:text-[#d1d5db]">{practice}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Comparison with Arrays */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Comparison with Array Deletion</h2>
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+              <thead className="bg-gray-50 dark:bg-gray-700">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Array</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Linked List</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                {comparisonTable.map((row, index) => (
+                  <tr key={index}>
+                    <td className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{row.feature}</td>
+                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.array}</td>
+                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.linkedList}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              <strong>When to Choose:</strong> Prefer linked lists when you need frequent deletions, especially at the head. Use arrays when you need index-based access and memory efficiency for small, fixed-size collections.
+            </p>
+          </div>
+        </section>
+
+        {/* Final Notes */}
+        <section className="p-6">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Implementation Notes</h2>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="list-disc pl-5 space-y-2 marker:text-primary dark:marker:text-[#c27cf7]">
+              <li className="text-[#374151] dark:text-[#d1d5db]">
+                <strong>Memory Management:</strong> In languages without garbage collection, ensure proper memory deallocation when deleting nodes
+              </li>
+              <li className="text-[#374151] dark:text-[#d1d5db]">
+                <strong>Error Handling:</strong> Implement robust checks for edge cases to prevent null pointer exceptions
+              </li>
+              <li className="text-[#374151] dark:text-[#d1d5db]">
+                <strong>Testing:</strong> Thoroughly test all deletion scenarios including empty list, single-node list, head/tail deletions
+              </li>
+              <li className="text-[#374151] dark:text-[#d1d5db]">
+                <strong>Optimizations:</strong> For frequent tail deletions, consider using a doubly linked list for O(1) performance
+              </li>
+              <li className="text-[#374151] dark:text-[#d1d5db]">
+                <strong>Documentation:</strong> Clearly document whether your deletion methods return the deleted value or just remove it
+              </li>
+            </ul>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default content;
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/deletion/data/codeExamples.json b/src/app/visualizer/linkedlist/operations/deletion/data/codeExamples.json
new file mode 100644
index 000000000..2ba3f5e5a
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/deletion/data/codeExamples.json
@@ -0,0 +1,7 @@
+{
+  "javascript": "class SinglyLinkedList {\n  // 1. Delete first node\n  deleteFirst() {\n    if (!this.head) return null;\n    const deletedNode = this.head;\n    this.head = this.head.next;\n    this.size--;\n    return deletedNode.data;\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    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  // 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    let current = this.head;\n    for (let i = 0; i < index - 1; i++) {\n      current = current.next;\n    }\n    const deletedNode = current.next;\n    current.next = deletedNode.next;\n    this.size--;\n    return deletedNode.data;\n  }\n  // 4. Delete by value (first occurrence)\n  deleteValue(value) {\n    if (!this.head) return null;\n    if (this.head.data === value) {\n      return this.deleteFirst();\n    }\n    let current = this.head;\n    while (current.next && current.next.data !== value) {\n      current = current.next;\n    }\n    if (!current.next) return null;\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        deleted_node = self.head\n        self.head = self.head.next\n        self.size -= 1\n        return deleted_node.data\n    # 2. Delete last node\n    def delete_last(self):\n        if not self.head:\n            return None\n        if not self.head.next:\n            data = self.head.data\n            self.head = None\n            self.size -= 1\n            return data\n        current = self.head\n        while current.next.next:\n            current = current.next\n        data = current.next.data\n        current.next = None\n        self.size -= 1\n        return data\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        current = self.head\n        for _ in range(index - 1):\n            current = current.next\n        deleted_node = current.next\n        current.next = deleted_node.next\n        self.size -= 1\n        return deleted_node.data\n    # 4. Delete by value (first occurrence)\n    def delete_value(self, value):\n        if not self.head:\n            return None\n        if self.head.data == value:\n            return self.delete_first()\n        current = self.head\n        while current.next and current.next.data != value:\n            current = current.next\n        if not current.next:\n            return None\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        int data = head.data;\n        head = head.next;\n        size--;\n        return data;\n    }\n    // 2. Delete last node\n    public Integer deleteLast() {\n        if (head == null) return null;\n        if (head.next == null) {\n            int data = head.data;\n            head = null;\n            size--;\n            return data;\n        }\n        Node current = head;\n        while (current.next.next != null) {\n            current = current.next;\n        }\n        int data = current.next.data;\n        current.next = null;\n        size--;\n        return data;\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        Node current = head;\n        for (int i = 0; i < index - 1; i++) {\n            current = current.next;\n        }\n        int data = current.next.data;\n        current.next = current.next.next;\n        size--;\n        return data;\n    }\n    // 4. Delete by value (first occurrence)\n    public Integer deleteValue(int value) {\n        if (head == null) return null;\n        if (head.data == value) {\n            return deleteFirst();\n        }\n        Node current = head;\n        while (current.next != null && current.next.data != value) {\n            current = current.next;\n        }\n        if (current.next == null) return null;\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        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    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// 2. Delete last node\nint deleteLast(SinglyLinkedList* list) {\n    if (list->head == NULL) return -1;\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    Node* current = list->head;\n    while (current->next->next != NULL) {\n        current = current->next;\n    }\n    int data = current->next->data;\n    free(current->next);\n    current->next = NULL;\n    list->size--;\n    return data;\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    Node* current = list->head;\n    for (int i = 0; i < index - 1; i++) {\n        current = current->next;\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// 4. Delete by value (first occurrence)\nint deleteValue(SinglyLinkedList* list, int value) {\n    if (list->head == NULL) return -1;\n    if (list->head->data == value) {\n        return deleteFirst(list);\n    }\n    Node* current = list->head;\n    while (current->next != NULL && current->next->data != value) {\n        current = current->next;\n    }\n    if (current->next == NULL) return -1;\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            Node* temp = head;\n        int data = temp->data;\n        head = head->next;\n        delete temp;\n        size--;\n        return data;\n    }\n    // 2. Delete last node\n    int deleteLast() {\n        if (!head) throw std::out_of_range(\"List is empty\");\n            if (!head->next) {\n            int data = head->data;\n            delete head;\n            head = nullptr;\n            size--;\n            return data;\n        }\n        Node* current = head;\n        while (current->next->next) {\n            current = current->next;\n        }\n            int data = current->next->data;\n        delete current->next;\n        current->next = nullptr;\n        size--;\n        return data;\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        Node* current = head;\n        for (int i = 0; i < index - 1; i++) {\n            current = current->next;\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    // 4. Delete by value (first occurrence)\n    int deleteValue(int value) {\n        if (!head) throw std::out_of_range(\"List is empty\");\n            if (head->data == value) {\n            return deleteFirst();\n        }\n        Node* current = head;\n        while (current->next && current->next->data != value) {\n            current = current->next;\n        }\n        if (!current->next) throw std::out_of_range(\"Value not found\");\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
diff --git a/src/app/visualizer/linkedlist/operations/deletion/quiz.jsx b/src/app/visualizer/linkedlist/operations/deletion/quiz.jsx
new file mode 100644
index 000000000..e35a6f228
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/deletion/quiz.jsx
@@ -0,0 +1,166 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const Quiz = () => {
+  const questions = [
+  {
+    "question": "What is the time complexity of deleting the head node in a linked list?",
+    "options": [
+      "O(1)",
+      "O(n)",
+      "O(log n)",
+      "O(n²)"
+    ],
+    "correctAnswer": 0,
+    "explanation": "Head deletion is O(1) as it only requires updating the head pointer."
+  },
+  {
+    "question": "What special case must be handled when deleting the last node in a linked list?",
+    "options": [
+      "Update both head and tail pointers to null",
+      "Only update the head pointer",
+      "Create a circular reference",
+      "No special handling needed"
+    ],
+    "correctAnswer": 0,
+    "explanation": "When deleting the last node, both head and tail pointers must be set to null as the list becomes empty."
+  },
+  {
+    "question": "What is the time complexity of deleting a node by value in the worst case?",
+    "options": [
+      "O(1)",
+      "O(n)",
+      "O(log n)",
+      "O(n log n)"
+    ],
+    "correctAnswer": 1,
+    "explanation": "Deleting by value is O(n) in the worst case as it may require traversing the entire list."
+  },
+  {
+    "question": "Which pointer modifications are needed when deleting a middle node?",
+    "options": [
+      "Update the previous node's next to skip the deleted node",
+      "Set the deleted node's next to null",
+      "Update the head pointer",
+      "Both A and B"
+    ],
+    "correctAnswer": 3,
+    "explanation": "Middle deletion requires: (1) bypassing the deleted node in the list, and (2) cleaning up the deleted node's pointers."
+  },
+  {
+    "question": "What is the main advantage of linked list deletion over array deletion?",
+    "options": [
+      "No need to shift remaining elements",
+      "Better cache locality",
+      "Lower memory usage overall",
+      "Built-in sorting after deletion"
+    ],
+    "correctAnswer": 0,
+    "explanation": "Linked lists don't require shifting elements during deletion, unlike arrays."
+  },
+  {
+    "question": "What critical step is needed when deleting nodes in languages without garbage collection?",
+    "options": [
+      "Manually free the deleted node's memory",
+      "Update all other nodes' data",
+      "Create a new tail pointer",
+      "Nothing special is needed"
+    ],
+    "correctAnswer": 0,
+    "explanation": "In non-GC languages, you must manually free the memory of deleted nodes to prevent leaks."
+  },
+  {
+    "question": "When deleting at position in a linked list, what case requires O(1) time?",
+    "options": [
+      "Position 0 (head)",
+      "Middle positions",
+      "Last position without tail pointer",
+      "All positions"
+    ],
+    "correctAnswer": 0,
+    "explanation": "Only head deletion (position 0) is O(1); others may require traversal."
+  },
+  {
+    "question": "What happens if you forget to update the tail pointer when deleting the last node?",
+    "options": [
+      "The tail pointer becomes dangling",
+      "Automatic garbage collection fixes it",
+      "No issues occur",
+      "The list becomes circular"
+    ],
+    "correctAnswer": 0,
+    "explanation": "The tail pointer would point to deallocated memory, creating a dangerous dangling pointer."
+  },
+  {
+    "question": "Which deletion scenario requires traversing approximately half the list on average?",
+    "options": [
+      "Head deletion",
+      "Tail deletion with tail pointer",
+      "Random middle position deletion",
+      "Deleting by value at head"
+    ],
+    "correctAnswer": 2,
+    "explanation": "Random middle deletions average n/2 traversal operations (O(n))."
+  },
+  {
+    "question": "What should be your first step in any deletion operation?",
+    "options": [
+      "Check if the list is empty",
+      "Update the head pointer",
+      "Free all memory",
+      "Traverse the entire list"
+    ],
+    "correctAnswer": 0,
+    "explanation": "Always first check for empty list to avoid null pointer exceptions."
+  },
+  {
+    "question": "Why is tail deletion O(n) in a singly linked list without a tail pointer?",
+    "options": [
+      "Need to traverse to find the new tail",
+      "Requires sorting after deletion",
+      "Must update all node values",
+      "Memory allocation is slow"
+    ],
+    "correctAnswer": 0,
+    "explanation": "Without a tail pointer, you must traverse from head to find the penultimate node to update."
+  },
+  {
+    "question": "What is the space complexity of deletion operations in a linked list?",
+    "options": [
+      "O(1)",
+      "O(n)",
+      "O(log n)",
+      "Depends on the position"
+    ],
+    "correctAnswer": 0,
+    "explanation": "Deletion uses constant space regardless of list size, only needing a few temporary pointers."
+  },
+  {
+    "question": "When deleting by value, what happens if the value appears multiple times?",
+    "options": [
+      "Only the first occurrence is deleted",
+      "All occurrences are deleted",
+      "Random occurrence is deleted",
+      "Implementation determines behavior"
+    ],
+    "correctAnswer": 3,
+    "explanation": "The behavior depends on implementation - some delete first match, some delete all."
+  },
+  {
+    "question": "What optimization allows O(1) tail deletion?",
+    "options": [
+      "Maintaining a tail pointer in doubly linked list",
+      "Using a circular list",
+      "Keeping a size counter",
+      "Storing all node addresses in an array"
+    ],
+    "correctAnswer": 0,
+    "explanation": "A doubly linked list with tail pointer enables O(1) tail deletion via the previous pointers."
+  }
+];
+
+  return <QuizEngine title="Deletion Quiz Challenge" questions={questions} />;
+};
+
+export default Quiz;
diff --git a/src/app/visualizer/linkedlist/operations/insertion/AlgorithmClient.jsx b/src/app/visualizer/linkedlist/operations/insertion/AlgorithmClient.jsx
new file mode 100644
index 000000000..5bd2fa263
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/insertion/AlgorithmClient.jsx
@@ -0,0 +1,34 @@
+import Animation from "@/app/visualizer/linkedlist/operations/insertion/animation";
+import Content from "@/app/visualizer/linkedlist/operations/insertion/content";
+import CodeBlock from "@/app/visualizer/linkedlist/operations/insertion/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Linked List", "Insertion")}
+      title="Insertion"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      exploreOther={
+        <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" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/linkedlist/operations/insertion/animation.jsx b/src/app/visualizer/linkedlist/operations/insertion/animation.jsx
new file mode 100644
index 000000000..ca7452245
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/insertion/animation.jsx
@@ -0,0 +1,209 @@
+"use client";
+import React, { useMemo, useState } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import { insertionGenerator } from "@/features/algorithms/linkedlist/insertionLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+const LinkedListInsertion = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [list, setList] = useState([]);
+  const [pendingInsertion, setPendingInsertion] = useState(null);
+
+  const frames = useMemo(() => {
+    if (!pendingInsertion) return [];
+    return Array.from(insertionGenerator(list, pendingInsertion));
+  }, [list, pendingInsertion]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  const addNode = () => {
+    if (engine.isPlaying || !inputValue) return;
+    setPendingInsertion(inputValue);
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setInputValue("");
+    setList([]);
+    setPendingInsertion(null);
+    engine.reset();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.phase === 'complete') {
+         setList(finalFrame.list);
+      }
+      setPendingInsertion(null);
+      engine.reset();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  // When animation finishes naturally
+  React.useEffect(() => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0 && !engine.isPlaying) {
+        const finalFrame = frames[frames.length - 1];
+        if (finalFrame && finalFrame.phase === 'complete') {
+            setList(finalFrame.list);
+            setPendingInsertion(null);
+            setInputValue("");
+            engine.reset();
+        }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine]);
+
+  useVisualizerKeyboard({
+    onStart: addNode,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        list: list,
+        newNode: null,
+        phase: 'idle',
+        currentNodeIndex: -1,
+        explanation: "Enter a value and click 'Add Node' to insert a new element."
+      };
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize how a new node is appended and linked to the end of a linked list.
+      </p>
+
+      <VisualizerCard>
+        <div className="flex flex-col gap-4 sm:flex-row">
+          <input
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            className="flex-1 rounded-lg border border-gray-400 bg-white p-3 dark:bg-gray-800"
+            placeholder="Enter value"
+            disabled={engine.isPlaying || pendingInsertion !== null}
+          />
+          <div className="flex flex-col gap-3 sm:flex-row">
+            <button
+              onClick={addNode}
+              disabled={engine.isPlaying || !inputValue || pendingInsertion !== null}
+              className="rounded-lg bg-primary px-6 py-3 text-white disabled:bg-gray-400"
+            >
+              {engine.isPlaying ? "Adding..." : "Add Node"}
+            </button>
+            <button
+              onClick={handleReset}
+              className="rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 dark:border-white dark:text-white dark:hover:bg-gray-700"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+        
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center">
+         <p className="text-gray-800 dark:text-gray-200 font-medium">
+             {currentFrame.explanation}
+         </p>
+      </div>
+
+      <VisualizerCard>
+        <div className="mb-6 flex justify-center gap-4 text-sm sm:gap-8 sm:text-base">
+          <div className="flex items-center">
+            <div className="mr-2 h-4 w-4 rounded-full bg-primary"></div>
+            <span>Data</span>
+          </div>
+          <div className="flex items-center">
+            <div className="mr-2 h-4 w-4 rounded-full bg-[#c27cf7] dark:bg-primary"></div>
+            <span>Next Pointer</span>
+          </div>
+        </div>
+
+        <div className="relative flex w-full flex-col items-center justify-center overflow-x-auto rounded-xl border border-[#e5e7eb] bg-[#f9fafb] p-4 dark:border-[#222] dark:bg-[#181818] min-h-[300px]">
+          {/* New Node Floating */}
+          {currentFrame.newNode && (
+            <div className={`mb-8 flex transition-all duration-500 ease-in-out ${currentFrame.phase === 'traverse' ? 'translate-x-1/2 opacity-80' : 'translate-x-0 opacity-100 scale-110'}`}>
+               <div className="flex items-center flex-col">
+                  <span className="text-xs font-mono text-blue-600 mb-1 font-bold">New Node: {currentFrame.newNode.address}</span>
+                  <div className="flex shadow-lg shadow-blue-500/30">
+                    <div className="w-16 rounded-l-lg bg-emerald-500 p-3 text-center text-base text-white sm:w-20 sm:p-4 sm:text-lg">
+                      {currentFrame.newNode.value}
+                    </div>
+                    <div className="w-16 rounded-r-lg bg-emerald-400 p-3 text-center font-mono text-xs sm:w-20 sm:p-4 sm:text-base">
+                      {currentFrame.newNode.next}
+                    </div>
+                  </div>
+               </div>
+            </div>
+          )}
+        
+          {currentFrame.list.length === 0 ? (
+            <div className="w-full py-12 text-center text-base text-gray-500 sm:py-16 sm:text-lg">
+              No nodes added yet.
+            </div>
+          ) : (
+            <div className="flex items-center space-x-4 sm:space-x-8">
+              {currentFrame.list.map((node, index) => {
+                  const isCurrent = currentFrame.currentNodeIndex === index;
+                  const bgData = isCurrent ? "bg-amber-500" : "bg-primary";
+                  const scaleClass = isCurrent ? "scale-110 shadow-md z-10" : "scale-100";
+                  
+                  return (
+                    <div key={node.id} className="flex items-center">
+                      <div className={`node flex flex-col items-center transition-all duration-300 ${scaleClass}`}>
+                        <span className="text-[10px] font-mono text-gray-500 mb-1">{node.address}</span>
+                        <div className="flex">
+                            <div className={`data-part w-16 rounded-l-lg ${bgData} p-3 text-center text-base text-white sm:w-20 sm:p-4 sm:text-lg transition-colors`}>
+                            {node.value}
+                            </div>
+                            <div className="next-part w-16 rounded-r-lg bg-[#c27cf7] p-3 text-center font-mono text-xs dark:bg-primary sm:w-20 sm:p-4 sm:text-base">
+                            {node.next}
+                            </div>
+                        </div>
+                      </div>
+                      {index < currentFrame.list.length - 1 && (
+                        <div className="mx-1 text-2xl sm:mx-2 sm:text-3xl text-gray-400">&rarr;</div>
+                      )}
+                    </div>
+                  );
+              })}
+            </div>
+          )}
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default LinkedListInsertion;
diff --git a/src/app/visualizer/linkedlist/operations/insertion/codeBlock.jsx b/src/app/visualizer/linkedlist/operations/insertion/codeBlock.jsx
new file mode 100644
index 000000000..0737f2273
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/insertion/codeBlock.jsx
@@ -0,0 +1,27 @@
+'use client';
+
+import CodeBlock from '@/app/components/ui/CodeBlock';
+import CodeExamples from '@/app/visualizer/linkedlist/operations/insertion/data/codeExamples.json';
+
+// ─── Code Examples ─────────────────────────────
+const codeExamples = CodeExamples;
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'linkedListInsertion.js',
+    python:'linked_list_insertion.py',
+    java:'LinkedListInsertion.java',
+    c:'linked_list_insertion.c',
+    cpp:'linked_list_insertion.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const LinkedListInsertionCode = () => (
+    <CodeBlock
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default LinkedListInsertionCode;
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/insertion/content.jsx b/src/app/visualizer/linkedlist/operations/insertion/content.jsx
new file mode 100644
index 000000000..81aed4035
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/insertion/content.jsx
@@ -0,0 +1,352 @@
+const content = () => {
+  const overview = [
+    `Linked List insertion involves adding new nodes to the linked data structure at various positions. Unlike arrays, linked lists allow efficient insertion at any point without reallocation or shifting of existing elements.`,
+    `Insertion is a fundamental operation that enables dynamic growth of the list. The efficiency varies based on insertion position, from O(1) for head/tail (with tail pointer) to O(n) for arbitrary positions.`,
+    `Mastering insertion techniques is crucial for building more complex data structures and algorithms that utilize linked lists as their foundation.`,
+  ];
+
+  const insertionTypes = [
+    { 
+      name: "Insertion at Head", 
+      complexity: "O(1)", 
+      description: "Adds new node at the beginning, making it the new head",
+      code: `function insertHead(data) {
+  const newNode = new Node(data);
+  newNode.next = head;
+  head = newNode;
+}`
+    },
+    { 
+      name: "Insertion at Tail", 
+      complexity: "O(1) with tail pointer, O(n) without", 
+      description: "Appends new node at the end of the list",
+      code: `function insertTail(data) {
+  const newNode = new Node(data);
+  if (!head) {
+    head = newNode;
+    tail = newNode;
+  } else {
+    tail.next = newNode;
+    tail = newNode;
+  }
+}`
+    },
+    { 
+      name: "Insertion at Position", 
+      complexity: "O(n)", 
+      description: "Inserts node at specific index (0-based)",
+      code: `function insertAt(data, position) {
+  if (position === 0) return insertHead(data);
+  
+  let current = head;
+  for (let i = 0; i < position-1 && current; i++) {
+    current = current.next;
+  }
+  
+  if (!current) return; // Position out of bounds
+  
+  const newNode = new Node(data);
+  newNode.next = current.next;
+  current.next = newNode;
+  
+  if (!newNode.next) tail = newNode;
+}`
+    },
+    { 
+      name: "Insertion After Node", 
+      complexity: "O(1)", 
+      description: "Inserts new node after a given reference node",
+      code: `function insertAfter(refNode, data) {
+  const newNode = new Node(data);
+  newNode.next = refNode.next;
+  refNode.next = newNode;
+  
+  if (refNode === tail) tail = newNode;
+}`
+    },
+  ];
+
+  const headInsertionSteps = [
+    { step: "Create a new node with the given data" },
+    { step: "Set the new node's next pointer to current head" },
+    { step: "Update the head pointer to point to the new node" },
+    { step: "Special case: If list was empty, update tail pointer too" },
+  ];
+
+  const tailInsertionSteps = [
+    { step: "Create a new node with the given data" },
+    { step: "If list is empty, set both head and tail to new node" },
+    { step: "Otherwise, set current tail's next pointer to new node" },
+    { step: "Update tail pointer to the new node" },
+  ];
+
+  const middleInsertionSteps = [
+    { step: "Traverse the list to find the insertion position" },
+    { step: "Create a new node with the given data" },
+    { step: "Set new node's next to the next node of current position" },
+    { step: "Set current node's next pointer to the new node" },
+    { step: "Special case: If inserting at end, update tail pointer" },
+  ];
+
+  const visualization = [
+    { operation: "Initial State", state: "head → [A] → [B] → [C] → null" },
+    { operation: "insertHead(X)", state: "head → [X] → [A] → [B] → [C] → null" },
+    { operation: "insertTail(Y)", state: "head → [X] → [A] → [B] → [C] → [Y] → null" },
+    { operation: "insertAt(Z, 2)", state: "head → [X] → [A] → [Z] → [B] → [C] → [Y] → null" },
+  ];
+
+  const edgeCases = [
+    "Empty list (head = null)",
+    "Insertion at position 0 (becomes new head)",
+    "Insertion at position = list length (becomes new tail)",
+    "Insertion at position > list length (should handle gracefully)",
+    "Insertion after tail node (should update tail pointer)",
+    "Insertion with invalid node references",
+  ];
+
+  const bestPractices = [
+    "Always check for empty list condition",
+    "Maintain tail pointer for O(1) tail insertion",
+    "Validate position bounds before insertion",
+    "Update tail pointer when inserting at end",
+    "Consider using dummy nodes to simplify edge cases",
+    "Document whether position is 0-based or 1-based",
+  ];
+
+  const comparisonTable = [
+    { 
+      feature: "Time Complexity", 
+      array: "O(n) (requires shifting)", 
+      linkedList: "O(1) head/tail, O(n) arbitrary" 
+    },
+    { 
+      feature: "Space Complexity", 
+      array: "O(1) (amortized)", 
+      linkedList: "O(1) per insertion" 
+    },
+    { 
+      feature: "Memory Usage", 
+      array: "May need reallocation", 
+      linkedList: "No reallocation needed" 
+    },
+    { 
+      feature: "Implementation", 
+      array: "Simple indexing", 
+      linkedList: "Pointer manipulation" 
+    },
+    { 
+      feature: "Best For", 
+      array: "Frequent random access", 
+      linkedList: "Frequent insertions/deletions" 
+    },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+        {/* Overview Section */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Insertion
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            {overview.map((para, index) => (
+              <p key={index} className="text-[#374151] dark:text-[#d1d5db] mb-3 leading-relaxed">
+                {para}
+              </p>
+            ))}
+            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                <strong>Key Insight:</strong> Linked list insertion doesn&apos;t require shifting elements like arrays, but does require careful pointer manipulation to maintain list integrity.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Insertion Types */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Insertion Types</h2>
+          <div className="space-y-6">
+            {insertionTypes.map((type, index) => (
+              <div key={index} className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{type.name}</h3>
+                <div className="flex flex-col md:flex-row gap-4">
+                  <div className="flex-1">
+                    <p className="text-[#374151] dark:text-[#d1d5db] mb-2"><strong>Complexity:</strong> <span className="font-mono">{type.complexity}</span></p>
+                    <p className="text-[#374151] dark:text-[#d1d5db]">{type.description}</p>
+                  </div>
+                  <div className="flex-1">
+                    <pre className="bg-gray-100 dark:bg-gray-800 p-3 rounded-md text-sm overflow-x-auto">
+                      <code className="text-gray-800 dark:text-gray-200">{type.code}</code>
+                    </pre>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Insertion Processes */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Insertion Processes</h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {/* Head Insertion */}
+            <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Head Insertion</h3>
+              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                {headInsertionSteps.map((step, index) => (
+                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                    {step.step}
+                  </li>
+                ))}
+              </ol>
+            </div>
+
+            {/* Tail Insertion */}
+            <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Tail Insertion</h3>
+              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                {tailInsertionSteps.map((step, index) => (
+                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                    {step.step}
+                  </li>
+                ))}
+              </ol>
+            </div>
+
+            {/* Middle Insertion */}
+            <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Middle Insertion</h3>
+              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                {middleInsertionSteps.map((step, index) => (
+                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                    {step.step}
+                  </li>
+                ))}
+              </ol>
+            </div>
+          </div>
+        </section>
+
+        {/* Visualization */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Operation Visualization</h2>
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+              <thead className="bg-gray-50 dark:bg-gray-700">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Operation</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">List State</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                {visualization.map((item, index) => (
+                  <tr key={index}>
+                    <td className="px-4 py-3 text-sm font-mono text-gray-900 dark:text-white">{item.operation}</td>
+                    <td className="px-4 py-3 text-sm font-mono text-[#374151] dark:text-[#d1d5db]">{item.state}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        {/* Edge Cases */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Edge Cases to Consider</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {edgeCases.map((caseItem, index) => (
+              <div key={index} className="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg border border-gray-200 dark:border-gray-600">
+                <div className="flex items-start">
+                  <div className="flex-shrink-0 h-5 w-5 text-yellow-500 mt-0.5">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                      <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                    </svg>
+                  </div>
+                  <div className="ml-3">
+                    <p className="text-sm text-[#374151] dark:text-[#d1d5db]">{caseItem}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Best Practices */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Best Practices</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {bestPractices.map((practice, index) => (
+              <div key={index} className="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg border border-gray-200 dark:border-gray-600">
+                <div className="flex items-start">
+                  <div className="flex-shrink-0 h-5 w-5 text-green-500 mt-0.5">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                    </svg>
+                  </div>
+                  <div className="ml-3">
+                    <p className="text-sm text-[#374151] dark:text-[#d1d5db]">{practice}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Comparison with Arrays */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Comparison with Array Insertion</h2>
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+              <thead className="bg-gray-50 dark:bg-gray-700">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Array</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Linked List</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                {comparisonTable.map((row, index) => (
+                  <tr key={index}>
+                    <td className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{row.feature}</td>
+                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.array}</td>
+                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.linkedList}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              <strong>When to Choose:</strong> Prefer linked lists when you need frequent insertions at arbitrary positions and don&apos;t require random access. Use arrays when you need index-based access and memory efficiency for small, fixed-size collections.
+            </p>
+          </div>
+        </section>
+
+        {/* Final Notes */}
+        <section className="p-6">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Implementation Notes</h2>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="list-disc pl-5 space-y-2 marker:text-primary dark:marker:text-[#c27cf7]">
+              <li className="text-[#374151] dark:text-[#d1d5db]">
+                <strong>Memory Management:</strong> Remember to properly allocate memory for new nodes in languages that require manual memory management
+              </li>
+              <li className="text-[#374151] dark:text-[#d1d5db]">
+                <strong>Error Handling:</strong> Always validate input parameters and handle edge cases gracefully
+              </li>
+              <li className="text-[#374151] dark:text-[#d1d5db]">
+                <strong>Testing:</strong> Thoroughly test all insertion scenarios including empty list, single-node list, head/tail insertions
+              </li>
+              <li className="text-[#374151] dark:text-[#d1d5db]">
+                <strong>Optimizations:</strong> Consider maintaining both head and tail pointers for O(1) insertions at both ends
+              </li>
+            </ul>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default content;
diff --git a/src/app/visualizer/linkedlist/operations/insertion/data/codeExamples.json b/src/app/visualizer/linkedlist/operations/insertion/data/codeExamples.json
new file mode 100644
index 000000000..d35b94d0d
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/insertion/data/codeExamples.json
@@ -0,0 +1,7 @@
+{
+  "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}\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
diff --git a/src/app/visualizer/linkedlist/operations/insertion/quiz.jsx b/src/app/visualizer/linkedlist/operations/insertion/quiz.jsx
new file mode 100644
index 000000000..48fdcb92b
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/insertion/quiz.jsx
@@ -0,0 +1,144 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const Quiz = () => {
+  const questions = [
+  {
+    "question": "What is the time complexity of inserting a node at the head of a linked list?",
+    "options": [
+      "O(1)",
+      "O(n)",
+      "O(log n)",
+      "O(n²)"
+    ],
+    "correctAnswer": 0,
+    "explanation": "Head insertion is O(1) as it only requires updating the head pointer and the new node's next pointer."
+  },
+  {
+    "question": "Which pointer modifications are needed for inserting a new node at the head?",
+    "options": [
+      "New node's next points to current head, then update head",
+      "Traverse to end first",
+      "Update tail pointer only",
+      "Modify all existing nodes' pointers"
+    ],
+    "correctAnswer": 0,
+    "explanation": "Head insertion requires: (1) new node's next = current head, (2) head = new node."
+  },
+  {
+    "question": "What is the time complexity of inserting at the tail without a tail pointer?",
+    "options": [
+      "O(1)",
+      "O(n)",
+      "O(log n)",
+      "Depends on list size"
+    ],
+    "correctAnswer": 1,
+    "explanation": "Without a tail pointer, you must traverse the entire list (O(n)) to reach the end before inserting."
+  },
+  {
+    "question": "When inserting at position in a linked list, what is the worst-case time complexity?",
+    "options": [
+      "O(1)",
+      "O(n)",
+      "O(log n)",
+      "O(n log n)"
+    ],
+    "correctAnswer": 1,
+    "explanation": "Position insertion is O(n) in the worst case when inserting near the end of the list."
+  },
+  {
+    "question": "What special case must be handled when inserting into an empty linked list?",
+    "options": [
+      "Update both head and tail pointers",
+      "Only update head pointer",
+      "Create a circular reference",
+      "No special handling needed"
+    ],
+    "correctAnswer": 0,
+    "explanation": "For an empty list, both head and tail pointers should point to the new node."
+  },
+  {
+    "question": "What is the correct sequence for inserting a node after a given reference node?",
+    "options": [
+      "newNode.next = refNode.next; refNode.next = newNode",
+      "refNode.next = newNode; newNode.next = refNode.next",
+      "Only set refNode.next = newNode",
+      "Traverse the entire list first"
+    ],
+    "correctAnswer": 0,
+    "explanation": "First set newNode's next to refNode's next, then update refNode's next to point to newNode."
+  },
+  {
+    "question": "Which of these is NOT an advantage of linked list insertion over array insertion?",
+    "options": [
+      "No need to shift existing elements",
+      "Dynamic size growth",
+      "Better cache locality",
+      "No reallocation needed"
+    ],
+    "correctAnswer": 2,
+    "explanation": "Linked lists generally have worse cache locality than arrays due to non-contiguous memory allocation."
+  },
+  {
+    "question": "What should you do when inserting at a position that's greater than the list length?",
+    "options": [
+      "Insert at head",
+      "Insert at tail",
+      "Throw an error or handle gracefully",
+      "Create multiple empty nodes"
+    ],
+    "correctAnswer": 2,
+    "explanation": "The implementation should either throw an error or handle the out-of-bounds case gracefully."
+  },
+  {
+    "question": "Why is maintaining a tail pointer beneficial for linked list insertion?",
+    "options": [
+      "Enables O(1) tail insertion",
+      "Allows random access to elements",
+      "Reduces memory usage",
+      "Simplifies middle insertions"
+    ],
+    "correctAnswer": 0,
+    "explanation": "A tail pointer allows O(1) insertion at the tail by eliminating the need for traversal."
+  },
+  {
+    "question": "What happens if you incorrectly order pointer assignments during insertion?",
+    "options": [
+      "Memory leak",
+      "Lost nodes or broken list",
+      "Compiler error",
+      "Automatic garbage collection"
+    ],
+    "correctAnswer": 1,
+    "explanation": "Incorrect pointer assignment order can lead to lost nodes or a broken list structure."
+  },
+  {
+    "question": "Which insertion scenario requires traversing approximately half the list on average?",
+    "options": [
+      "Head insertion",
+      "Tail insertion with tail pointer",
+      "Middle insertion at random position",
+      "Insertion after given node reference"
+    ],
+    "correctAnswer": 2,
+    "explanation": "Random middle insertions require traversal that averages n/2 operations (O(n))."
+  },
+  {
+    "question": "What is the space complexity for a single insertion operation in a linked list?",
+    "options": [
+      "O(1)",
+      "O(n)",
+      "O(log n)",
+      "Depends on position"
+    ],
+    "correctAnswer": 0,
+    "explanation": "Each insertion only requires space for one new node, regardless of list size (O(1))."
+  }
+];
+
+  return <QuizEngine title="Insertion Quiz Challenge" questions={questions} />;
+};
+
+export default Quiz;
diff --git a/src/app/visualizer/linkedlist/operations/merge/AlgorithmClient.jsx b/src/app/visualizer/linkedlist/operations/merge/AlgorithmClient.jsx
new file mode 100644
index 000000000..4a8ee4e18
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/merge/AlgorithmClient.jsx
@@ -0,0 +1,34 @@
+import Animation from "@/app/visualizer/linkedlist/operations/merge/animation";
+import Content from "@/app/visualizer/linkedlist/operations/merge/content";
+import CodeBlock from "@/app/visualizer/linkedlist/operations/merge/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Linked List", "Merge")}
+      title="Merge"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      exploreOther={
+        <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" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/linkedlist/operations/merge/animation.jsx b/src/app/visualizer/linkedlist/operations/merge/animation.jsx
new file mode 100644
index 000000000..0f45abcbe
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/merge/animation.jsx
@@ -0,0 +1,243 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import { generateRandomListLogic } from "@/features/algorithms/linkedlist/traversalLogic";
+import { mergeListsGenerator } from "@/features/algorithms/linkedlist/llMergeLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+const LinkedListMerge = () => {
+  const [list1, setList1] = useState([]);
+  const [list2, setList2] = useState([]);
+
+  const frames = useMemo(() => {
+    if (list1.length === 0 || list2.length === 0) return [];
+    return Array.from(mergeListsGenerator(list1, list2));
+  }, [list1, list2]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  const handleGenerate = () => {
+    if (engine.isPlaying) return;
+    setList1(generateRandomListLogic());
+    setList2(generateRandomListLogic());
+    engine.reset();
+  };
+
+  const startMerge = () => {
+    if (engine.isPlaying || list1.length === 0 || list2.length === 0) return;
+    engine.reset();
+    engine.play();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      setTimeout(() => engine.play(), 50);
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  const handleReset = () => {
+    setList1([]);
+    setList2([]);
+    engine.reset();
+  };
+
+  useVisualizerKeyboard({
+    onStart: startMerge,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        phase: 'idle',
+        list1Index: -1,
+        list2Index: -1,
+        mergedList: [],
+        list1: list1,
+        list2: list2,
+        explanation: list1.length > 0 ? "Ready to merge. The component will sort both lists ascendingly before merging." : "Click 'Generate Lists' to create two linked lists."
+      };
+
+  const renderList = (listData, name, activeIndex, baseColorClass) => (
+    <div className="mb-6 flex flex-col items-center">
+      <h3 className="mb-4 text-lg font-bold text-gray-700 dark:text-gray-300">
+        {name}
+      </h3>
+      <div className="relative flex w-full items-start justify-center overflow-x-auto rounded-xl border border-[#e5e7eb] bg-[#f9fafb] p-4 dark:border-[#222] dark:bg-[#181818] min-h-[140px]">
+        {listData.length === 0 ? (
+          <div className="w-full py-6 text-center text-gray-500">
+            Empty
+          </div>
+        ) : (
+          <div className="flex items-center space-x-4 sm:space-x-8">
+            {listData.map((node, index) => {
+              const isCurrent = activeIndex === index;
+              const isConsumed = activeIndex !== -1 && index < activeIndex;
+              
+              let bgData = baseColorClass;
+              let scaleClass = "scale-100";
+              let opacityClass = "opacity-100";
+              
+              if (isCurrent) {
+                  bgData = "bg-amber-500 shadow-lg";
+                  scaleClass = "scale-110 z-10";
+              } else if (isConsumed || currentFrame.phase === 'complete') {
+                  opacityClass = "opacity-40";
+              }
+
+              return (
+              <div key={node.id} className={`flex items-center transition-all duration-300 ${opacityClass}`}>
+                <div className={`node flex flex-col items-center transition-all duration-300 ${scaleClass}`}>
+                  <span className="text-[10px] font-mono text-gray-500 mb-1">{node.address}</span>
+                  <div className="flex">
+                      <div className={`data-part w-16 rounded-l-lg ${bgData} p-3 text-center text-base text-white sm:w-20 sm:p-4 sm:text-lg transition-colors`}>
+                      {node.value}
+                      </div>
+                      <div className="next-part w-16 rounded-r-lg bg-[#c27cf7] p-3 text-center font-mono text-xs dark:bg-primary sm:w-20 sm:p-4 sm:text-base">
+                      {node.next}
+                      </div>
+                  </div>
+                </div>
+                {index < listData.length - 1 && (
+                  <div className="mx-1 text-2xl sm:mx-2 sm:text-3xl text-gray-400">&rarr;</div>
+                )}
+              </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize the merging of two sorted linked lists into a single sorted list.
+      </p>
+
+      <VisualizerCard>
+        <div className="flex flex-col gap-4">
+          <button
+            onClick={handleGenerate}
+            disabled={engine.isPlaying}
+            className="w-full rounded-lg bg-[#10b981]/10 px-6 py-3 text-[#10b981] transition hover:bg-[#10b981]/20 border border-[#10b981]/30 disabled:opacity-50"
+          >
+            Generate Lists
+          </button>
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <button
+              onClick={startMerge}
+              disabled={engine.isPlaying || list1.length === 0}
+              className="flex-1 rounded-lg bg-primary px-6 py-3 text-white transition hover:bg-primary-dark disabled:bg-gray-400"
+            >
+              {engine.isPlaying ? "Merging..." : "Merge Lists"}
+            </button>
+            <button
+              onClick={handleReset}
+              className="flex-1 rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 dark:border-white dark:text-white dark:hover:bg-gray-700"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+        
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center min-h-[60px] flex items-center justify-center">
+         <p className="text-gray-800 dark:text-gray-200 font-medium">
+             {currentFrame.explanation}
+         </p>
+      </div>
+
+      <VisualizerCard>
+        <div className="mb-6 flex justify-center gap-4 text-sm sm:gap-8 sm:text-base">
+          <div className="flex items-center">
+            <div className="mr-2 h-4 w-4 rounded-full bg-blue-500"></div>
+            <span>List 1</span>
+          </div>
+          <div className="flex items-center">
+            <div className="mr-2 h-4 w-4 rounded-full bg-emerald-500"></div>
+            <span>List 2</span>
+          </div>
+          <div className="flex items-center">
+            <div className="mr-2 h-4 w-4 rounded-full bg-amber-500"></div>
+            <span>Comparing</span>
+          </div>
+        </div>
+
+        {renderList(currentFrame.list1, "List 1", currentFrame.list1Index, "bg-blue-500")}
+        {renderList(currentFrame.list2, "List 2", currentFrame.list2Index, "bg-emerald-500")}
+
+        <div className="mt-8 flex flex-col items-center border-t border-gray-200 dark:border-gray-800 pt-8">
+          <h3 className="mb-4 text-lg font-bold text-primary">
+            Merged List Result
+          </h3>
+          <div className="relative flex w-full items-start justify-center overflow-x-auto rounded-xl border-2 border-primary/20 bg-primary/5 p-4 min-h-[140px]">
+            {currentFrame.mergedList.length === 0 ? (
+              <div className="w-full py-6 text-center text-gray-500">
+                Empty Merged List
+              </div>
+            ) : (
+              <div className="flex items-center space-x-4 sm:space-x-8">
+                {currentFrame.mergedList.map((node, index) => {
+                  const bgData = node.source === "list1" ? "bg-blue-500" : "bg-emerald-500";
+                  return (
+                  <div key={node.id} className="flex items-center">
+                    <div className="node flex flex-col items-center">
+                      <span className="text-[10px] font-mono text-gray-500 mb-1">{node.address}</span>
+                      <div className="flex">
+                          <div className={`data-part w-16 rounded-l-lg ${bgData} p-3 text-center text-base text-white sm:w-20 sm:p-4 sm:text-lg transition-colors`}>
+                          {node.value}
+                          </div>
+                          <div className="next-part w-16 rounded-r-lg bg-[#c27cf7] p-3 text-center font-mono text-xs dark:bg-primary sm:w-20 sm:p-4 sm:text-base">
+                          {node.next}
+                          </div>
+                      </div>
+                    </div>
+                    {index < currentFrame.mergedList.length - 1 && (
+                      <div className="mx-1 text-2xl sm:mx-2 sm:text-3xl text-primary">&rarr;</div>
+                    )}
+                  </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default LinkedListMerge;
diff --git a/src/app/visualizer/linkedlist/operations/merge/codeBlock.jsx b/src/app/visualizer/linkedlist/operations/merge/codeBlock.jsx
new file mode 100644
index 000000000..b6f32bcaa
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/merge/codeBlock.jsx
@@ -0,0 +1,27 @@
+'use client';
+
+import CodeBlock from '@/app/components/ui/CodeBlock';
+import CodeExamples from '@/app/visualizer/linkedlist/operations/merge/data/codeExamples.json';
+
+// ─── Code Examples ─────────────────────────────
+const codeExamples = CodeExamples;
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'linkedListMerge.js',
+    python:'linked_list_merge.py',
+    java:'LinkedListMerge.java',
+    c:'linked_list_merge.c',
+    cpp:'linked_list_merge.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const LinkedListMergeCode = () => (
+    <CodeBlock
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default LinkedListMergeCode;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/merge/content.jsx b/src/app/visualizer/linkedlist/operations/merge/content.jsx
old mode 100755
new mode 100644
similarity index 100%
rename from app/visualizer/linkedList/operations/merge/content.jsx
rename to src/app/visualizer/linkedlist/operations/merge/content.jsx
diff --git a/src/app/visualizer/linkedlist/operations/merge/data/codeExamples.json b/src/app/visualizer/linkedlist/operations/merge/data/codeExamples.json
new file mode 100644
index 000000000..e876f7151
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/merge/data/codeExamples.json
@@ -0,0 +1,7 @@
+{
+  "javascript": "class Node {\n  constructor(data) {\n    this.data = data;\n    this.next = null;\n  }\n}\nfunction mergeLists(l1, l2) {\n  const dummy = new Node(0);\n  let current = dummy;\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  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\ndef merge_lists(l1, l2):\n    dummy = Node(0)\n    current = dummy\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    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}\npublic class MergeLists {\n    public static Node merge(Node l1, Node l2) {\n        Node dummy = new Node(0);\n        Node current = dummy;\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        current.next = (l1 != null) ? l1 : l2;\n        return dummy.next;\n    }\n}",
+  "c": "#include <stdio.h>\n#include <stdlib.h>\ntypedef struct Node {\n    int data;\n    struct Node* next;\n} Node;\nNode* mergeLists(Node* l1, Node* l2) {\n    Node dummy;\n    Node* current = &dummy;\n    dummy.next = NULL;\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    current->next = l1 ? l1 : l2;\n    return dummy.next;\n}",
+  "cpp": "#include <iostream>\nusing namespace std;\nclass Node {\npublic:\n    int data;\n    Node* next;\n    Node(int d) : data(d), next(nullptr) {}\n};\nNode* mergeLists(Node* l1, Node* l2) {\n    Node dummy(0);\n    Node* current = &dummy;\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    current->next = l1 ? l1 : l2;\n    return dummy.next;\n}"
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/merge/quiz.jsx b/src/app/visualizer/linkedlist/operations/merge/quiz.jsx
new file mode 100644
index 000000000..85032cbc8
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/merge/quiz.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const Quiz = () => {
+  const questions = [
+  {
+    "question": "What is the primary purpose of using a dummy node when merging two linked lists?",
+    "options": [
+      "To simplify pointer management and avoid edge cases",
+      "To increase performance",
+      "To store the tail node",
+      "To sort the input lists"
+    ],
+    "correctAnswer": 0,
+    "explanation": "A dummy node acts as a placeholder to simplify the logic and avoid handling head assignment edge cases separately."
+  },
+  {
+    "question": "Which approach is commonly used to merge two sorted linked lists?",
+    "options": [
+      "Two-pointer technique",
+      "Recursive backtracking",
+      "Binary search",
+      "Breadth-first traversal"
+    ],
+    "correctAnswer": 0,
+    "explanation": "The two-pointer technique is used to traverse both lists and compare current nodes to build the merged list."
+  },
+  {
+    "question": "What is the time complexity of merging two sorted linked lists with a total of n nodes?",
+    "options": [
+      "O(log n)",
+      "O(n)",
+      "O(n log n)",
+      "O(n²)"
+    ],
+    "correctAnswer": 1,
+    "explanation": "Each node is visited once during the merge, leading to O(n) time complexity."
+  },
+  {
+    "question": "What happens when one of the two input lists is empty during merging?",
+    "options": [
+      "The result is empty",
+      "Only dummy node is returned",
+      "The non-empty list is directly attached to the merged list",
+      "The algorithm throws an error"
+    ],
+    "correctAnswer": 2,
+    "explanation": "If one list is empty, the other list is appended as-is to the end of the merged list."
+  },
+  {
+    "question": "Which of these is NOT necessary before merging two linked lists?",
+    "options": [
+      "Sorting both input lists",
+      "Creating a dummy node",
+      "Tracking the current node in merged list",
+      "Comparing node values from both lists"
+    ],
+    "correctAnswer": 0,
+    "explanation": "Sorting is not required if the input lists are already sorted."
+  },
+  {
+    "question": "When merging lists, how do you decide which node to attach next?",
+    "options": [
+      "Attach the node with greater value",
+      "Alternate nodes from each list",
+      "Attach the node with smaller value",
+      "Attach the last node from each list first"
+    ],
+    "correctAnswer": 2,
+    "explanation": "The smaller value node is chosen to maintain sorted order."
+  },
+  {
+    "question": "What pointer is updated after attaching a node to the merged list?",
+    "options": [
+      "Tail of second list",
+      "Current pointer of merged list",
+      "Dummy pointer",
+      "Original head pointer"
+    ],
+    "correctAnswer": 1,
+    "explanation": "After attaching a node, the current pointer in the merged list is updated to point to the newly added node."
+  },
+  {
+    "question": "What is the space complexity of merging two linked lists iteratively?",
+    "options": [
+      "O(n)",
+      "O(1)",
+      "O(log n)",
+      "O(n²)"
+    ],
+    "correctAnswer": 1,
+    "explanation": "Iterative merging does not require extra space beyond a few pointers (O(1) auxiliary space)."
+  },
+  {
+    "question": "What advantage does recursion offer in list merging?",
+    "options": [
+      "Faster execution",
+      "Less memory usage",
+      "Simplified code",
+      "Always better performance"
+    ],
+    "correctAnswer": 2,
+    "explanation": "Recursion simplifies the logic but can use more stack space."
+  },
+  {
+    "question": "What kind of input lists produce a sorted merged output?",
+    "options": [
+      "Unsorted lists",
+      "Randomly linked nodes",
+      "Already sorted lists",
+      "Lists with circular references"
+    ],
+    "correctAnswer": 2,
+    "explanation": "Merging produces a sorted result only when both input lists are sorted."
+  }
+];
+
+  return <QuizEngine title="Merging Quiz Challenge" questions={questions} />;
+};
+
+export default Quiz;
diff --git a/src/app/visualizer/linkedlist/operations/quiz/LinkedListOperationsQuizClient.jsx b/src/app/visualizer/linkedlist/operations/quiz/LinkedListOperationsQuizClient.jsx
new file mode 100644
index 000000000..a36224327
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/quiz/LinkedListOperationsQuizClient.jsx
@@ -0,0 +1,156 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowLeft, Play } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function LinkedListOperationsQuizClient() {
+  const quizzes = [
+    {
+      title: "Insertion Quiz",
+      description:
+        "Practice inserting nodes at the beginning, end, and specific positions in a Linked List.",
+      href: "/visualizer/linkedlist/operations/quiz/insertion",
+      filename: "linked_list_insertion_quiz.js",
+    },
+    {
+      title: "Deletion Quiz",
+      description:
+        "Practice deleting nodes from the beginning, end, and specific positions in a Linked List.",
+      href: "/visualizer/linkedlist/operations/quiz/deletion",
+      filename: "linked_list_deletion_quiz.js",
+    },
+    {
+      title: "Search Quiz",
+      description:
+        "Practice searching elements using linear traversal and understand search complexity.",
+      href: "/visualizer/linkedlist/operations/quiz/search",
+      filename: "linked_list_search_quiz.js",
+    },
+    {
+      title: "Traversal Quiz",
+      description:
+        "Practice traversing Linked Lists and visiting each node efficiently.",
+      href: "/visualizer/linkedlist/operations/quiz/traversal",
+      filename: "linked_list_traversal_quiz.js",
+    },
+    {
+      title: "Reverse Quiz",
+      description:
+        "Practice reversing Linked Lists using iterative and pointer-based approaches.",
+      href: "/visualizer/linkedlist/operations/quiz/reverse",
+      filename: "linked_list_reverse_quiz.js",
+    },
+    {
+      title: "Middle Node Quiz",
+      description:
+        "Practice finding the middle node using the Fast and Slow Pointer technique.",
+      href: "/visualizer/linkedlist/operations/quiz/middle",
+      filename: "linked_list_middle_quiz.js",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-[var(--udemy-text)] dark:text-white transition-colors duration-300 pb-20">
+
+      {/* Header */}
+      <section className="relative pt-6 pb-4">
+        <div className="max-w-[1100px] mx-auto px-4">
+
+          <Link href="/visualizer/quiz">
+            <button className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] dark:text-[var(--color-primary-light)] hover:opacity-85 transition-opacity mb-3">
+              <ArrowLeft size={16} />
+              <span>Back to all quizzes</span>
+            </button>
+          </Link>
+
+          <h1 className="text-2xl md:text-3xl font-black mb-2">
+            Linked List Operations Quiz Portal
+          </h1>
+
+          <p className="text-[14px] text-surface-600 dark:text-surface-400 font-medium">
+            Choose a Linked List Operations quiz to test your understanding of insertion, deletion, searching, traversal, reversing, and finding the middle node.
+          </p>
+
+        </div>
+      </section>
+
+      {/* Cards */}
+      <div className="max-w-5xl mx-auto px-4 mt-8">
+
+        <div className="grid md:grid-cols-2 gap-6 items-stretch">
+
+          {quizzes.map((quiz, index) => (
+
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{
+                duration: 0.4,
+                delay: index * 0.1,
+                ease: [0.22, 1, 0.36, 1],
+              }}
+              whileHover={{ y: -6, scale: 1.015 }}
+              whileTap={{ scale: 0.985 }}
+              className="group flex flex-col h-full rounded-2xl border border-blue-500/20 dark:border-blue-500/30 bg-white dark:bg-[#1a1a1a] overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
+            >
+
+              {/* Top Bar */}
+              <div className="flex items-center justify-between px-4 py-2.5 bg-blue-500/10 dark:bg-blue-500/20 border-b border-blue-500/20 dark:border-blue-500/30">
+
+                <div className="flex items-center gap-1.5 font-mono text-[11px] text-surface-600 dark:text-surface-300">
+
+                  <span className="text-violet-500 font-bold">$</span>
+
+                  <span>node {quiz.filename}</span>
+
+                </div>
+
+              </div>
+
+              {/* Content */}
+
+              <div className="p-6 flex-1 flex flex-col justify-between">
+
+                <div>
+
+                  <h2 className="text-[20px] font-extrabold text-surface-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors mb-2">
+
+                    {quiz.title}
+
+                  </h2>
+
+                  <p className="text-[14px] text-surface-600 dark:text-surface-300 leading-relaxed mb-6">
+
+                    {quiz.description}
+
+                  </p>
+
+                </div>
+
+                <Link href={quiz.href} className="block mt-auto w-full">
+
+                  <button className="w-full h-11 rounded-xl bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-bold text-[14px] flex items-center justify-center gap-2 shadow-sm hover:shadow-md transition-all">
+
+                    <span>Start Quiz</span>
+
+                    <Play size={14} className="fill-current" />
+
+                  </button>
+
+                </Link>
+
+              </div>
+
+            </motion.div>
+
+          ))}
+
+        </div>
+
+      </div>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/quiz/deletion/page.jsx b/src/app/visualizer/linkedlist/operations/quiz/deletion/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/quiz/deletion/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/quiz/deletion/quiz.jsx b/src/app/visualizer/linkedlist/operations/quiz/deletion/quiz.jsx
new file mode 100644
index 000000000..4f3dd02e7
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/quiz/deletion/quiz.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "Which node is removed during deletion at the beginning of a linked list?",
+    options: [
+      "The last node",
+      "The middle node",
+      "The head node",
+      "A random node"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Deletion at the beginning removes the head node, and the head pointer is updated to the next node."
+  },
+  {
+    question: "What is the time complexity of deleting the first node in a singly linked list?",
+    options: ["O(1)", "O(log n)", "O(n)", "O(n²)"],
+    correctAnswer: 0,
+    explanation:
+      "Only the head pointer needs to be updated, so deletion takes constant time."
+  },
+  {
+    question: "Before deleting the last node of a singly linked list, what must be found?",
+    options: [
+      "The first node",
+      "The middle node",
+      "The second last node",
+      "The head node"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The second last node is needed so its next pointer can be updated to NULL."
+  },
+  {
+    question: "What is the time complexity of deleting the last node without a tail pointer?",
+    options: ["O(1)", "O(log n)", "O(n)", "O(n²)"],
+    correctAnswer: 2,
+    explanation:
+      "The list must be traversed to locate the second last node."
+  },
+  {
+    question: "Which pointer is updated after deleting the head node?",
+    options: [
+      "tail",
+      "head",
+      "prev",
+      "rear"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The head pointer is updated to the second node after deletion."
+  },
+  {
+    question: "What should be done before deleting a node from memory?",
+    options: [
+      "Disconnect it from the linked list",
+      "Reverse the list",
+      "Sort the list",
+      "Delete the tail first"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Pointers must first be updated so the remaining list stays connected."
+  },
+  {
+    question: "Deleting a node after a given node requires updating which pointer?",
+    options: [
+      "head",
+      "tail",
+      "current.next",
+      "front"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The current node's next pointer is updated to skip the deleted node."
+  },
+  {
+    question: "What happens when the only node in a linked list is deleted?",
+    options: [
+      "The list becomes empty",
+      "The tail becomes NULL only",
+      "The node remains accessible",
+      "Nothing changes"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Both head and tail become NULL after deleting the only node."
+  },
+  {
+    question: "Which linked list allows deleting a node more efficiently when its previous node is known?",
+    options: [
+      "Array",
+      "Stack",
+      "Singly Linked List",
+      "Doubly Linked List"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "A doubly linked list provides access to both previous and next nodes."
+  },
+  {
+    question: "Why is deleting the first node generally faster than deleting the last node?",
+    options: [
+      "No traversal is required",
+      "It uses binary search",
+      "The node is automatically removed",
+      "It requires recursion"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Deleting the first node only updates the head pointer, making it O(1)."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Linked List Deletion Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/quiz/insertion/page.jsx b/src/app/visualizer/linkedlist/operations/quiz/insertion/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/quiz/insertion/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/quiz/insertion/quiz.jsx b/src/app/visualizer/linkedlist/operations/quiz/insertion/quiz.jsx
new file mode 100644
index 000000000..b0e2ea4ca
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/quiz/insertion/quiz.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "Where is a new node inserted when performing insertion at the beginning of a linked list?",
+    options: [
+      "After the last node",
+      "Before the current head node",
+      "At the middle node",
+      "After the second node"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The new node becomes the new head and points to the previous head node."
+  },
+  {
+    question: "What is the time complexity of inserting a node at the beginning of a singly linked list?",
+    options: ["O(1)", "O(log n)", "O(n)", "O(n²)"],
+    correctAnswer: 0,
+    explanation:
+      "Only the head pointer needs to be updated, making insertion constant time."
+  },
+  {
+    question: "To insert a node at the end of a singly linked list without a tail pointer, what must be done first?",
+    options: [
+      "Reverse the list",
+      "Traverse to the last node",
+      "Delete the head",
+      "Sort the list"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The last node must be found before linking the new node."
+  },
+  {
+    question: "What is the time complexity of inserting at the end of a singly linked list without a tail pointer?",
+    options: ["O(1)", "O(log n)", "O(n)", "O(n²)"],
+    correctAnswer: 2,
+    explanation:
+      "Traversal to the last node requires O(n) time."
+  },
+  {
+    question: "Before inserting a node after a given node, what must be updated first?",
+    options: [
+      "Delete the next node",
+      "Set newNode.next to current.next",
+      "Change head pointer",
+      "Reverse the list"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The new node must first point to the next node before updating the current node's pointer."
+  },
+  {
+    question: "Which pointer is updated last while inserting after a node?",
+    options: [
+      "head",
+      "tail",
+      "current.next",
+      "newNode.next"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "After assigning newNode.next, current.next is updated to complete the insertion."
+  },
+  {
+    question: "What happens if insertion is attempted after a NULL node?",
+    options: [
+      "Insertion succeeds",
+      "A runtime error or invalid operation occurs",
+      "The node becomes head",
+      "The list is automatically resized"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "A valid node reference is required before inserting after it."
+  },
+  {
+    question: "Which linked list allows insertion before a given node without traversing from the head?",
+    options: [
+      "Singly Linked List",
+      "Circular Queue",
+      "Doubly Linked List",
+      "Stack"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "A doubly linked list provides access to the previous node using the prev pointer."
+  },
+  {
+    question: "If a linked list is empty, where does the first inserted node become?",
+    options: [
+      "Tail only",
+      "Head only",
+      "Both head and tail",
+      "Middle node"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "In an empty list, the first node acts as both head and tail."
+  },
+  {
+    question: "Which insertion operation is generally the fastest in a linked list?",
+    options: [
+      "Insertion at beginning",
+      "Insertion at end without tail",
+      "Insertion in sorted position",
+      "Insertion at middle after traversal"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Insertion at the beginning requires only updating the head pointer, resulting in O(1) complexity."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Linked List Insertion Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/quiz/middle/page.jsx b/src/app/visualizer/linkedlist/operations/quiz/middle/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/quiz/middle/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/quiz/middle/quiz.jsx b/src/app/visualizer/linkedlist/operations/quiz/middle/quiz.jsx
new file mode 100644
index 000000000..1f0ab0d1a
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/quiz/middle/quiz.jsx
@@ -0,0 +1,136 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "Which technique is most commonly used to find the middle node of a linked list?",
+    options: [
+      "Binary Search",
+      "Fast and Slow Pointer",
+      "Sliding Window",
+      "Recursion"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The Fast and Slow Pointer technique finds the middle node efficiently in one traversal."
+  },
+  {
+    question: "How many nodes does the fast pointer move in each iteration?",
+    options: [
+      "One",
+      "Two",
+      "Three",
+      "Four"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The fast pointer advances two nodes while the slow pointer advances one."
+  },
+  {
+    question: "How many nodes does the slow pointer move in each iteration?",
+    options: [
+      "One",
+      "Two",
+      "Three",
+      "Zero"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "The slow pointer moves one node at a time."
+  },
+  {
+    question: "When does the slow pointer reach the middle node?",
+    options: [
+      "When the fast pointer reaches the end of the list",
+      "When the slow pointer reaches NULL",
+      "When both pointers are equal initially",
+      "After half of the nodes are deleted"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "When the fast pointer reaches the end, the slow pointer is positioned at the middle."
+  },
+  {
+    question: "What is the time complexity of finding the middle node using the Fast and Slow Pointer technique?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The linked list is traversed only once."
+  },
+  {
+    question: "What is the space complexity of the Fast and Slow Pointer approach?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Only two pointers are used regardless of the list size."
+  },
+  {
+    question: "In an even-length linked list, where does the standard Fast and Slow Pointer algorithm usually stop?",
+    options: [
+      "First middle node",
+      "Second middle node",
+      "Last node",
+      "Head node"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The common implementation returns the second middle node for even-length lists."
+  },
+  {
+    question: "Which pointer determines when traversal should stop?",
+    options: [
+      "Slow pointer",
+      "Head pointer",
+      "Tail pointer",
+      "Fast pointer"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "The loop continues while the fast pointer and its next pointer are not NULL."
+  },
+  {
+    question: "Which linked list problem commonly uses the Fast and Slow Pointer technique besides finding the middle node?",
+    options: [
+      "Merge Sort",
+      "Cycle Detection",
+      "Heap Construction",
+      "Binary Search"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Floyd's Cycle Detection Algorithm also uses fast and slow pointers."
+  },
+  {
+    question: "What is the primary advantage of the Fast and Slow Pointer approach over counting nodes first?",
+    options: [
+      "Uses recursion",
+      "Requires two traversals",
+      "Finds the middle in a single traversal",
+      "Uses binary search"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The Fast and Slow Pointer technique finds the middle node in just one pass through the linked list."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Linked List Middle Node Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/quiz/page.jsx b/src/app/visualizer/linkedlist/operations/quiz/page.jsx
new file mode 100644
index 000000000..e16eead9f
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/quiz/page.jsx
@@ -0,0 +1,5 @@
+import LinkedListOperationsQuizClient from "./LinkedListOperationsQuizClient";
+
+export default function Page() {
+  return <LinkedListOperationsQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/quiz/reverse/page.jsx b/src/app/visualizer/linkedlist/operations/quiz/reverse/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/quiz/reverse/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/quiz/reverse/quiz.jsx b/src/app/visualizer/linkedlist/operations/quiz/reverse/quiz.jsx
new file mode 100644
index 000000000..177bb0863
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/quiz/reverse/quiz.jsx
@@ -0,0 +1,136 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the main goal of reversing a linked list?",
+    options: [
+      "Sort the linked list",
+      "Reverse the direction of all links",
+      "Delete all nodes",
+      "Find the middle node"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Reversing a linked list changes every node's next pointer to point to its previous node."
+  },
+  {
+    question: "Which pointers are commonly used to reverse a singly linked list iteratively?",
+    options: [
+      "front, rear",
+      "left, right",
+      "prev, current, next",
+      "head, tail, middle"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The iterative approach uses prev, current, and next pointers."
+  },
+  {
+    question: "What is the time complexity of reversing a linked list?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Each node is visited exactly once while reversing."
+  },
+  {
+    question: "What is the space complexity of the iterative reverse algorithm?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Only three pointers are used regardless of list size."
+  },
+  {
+    question: "After reversing a linked list, which node becomes the new head?",
+    options: [
+      "The original head",
+      "The original second node",
+      "The original last node",
+      "The middle node"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The last node becomes the first node after reversal."
+  },
+  {
+    question: "What should be stored before changing current.next?",
+    options: [
+      "Previous node",
+      "Tail node",
+      "Next node",
+      "Head node"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The next node must be saved before modifying the next pointer."
+  },
+  {
+    question: "Which pointer becomes NULL after the linked list is completely reversed?",
+    options: [
+      "Tail",
+      "Previous",
+      "Original head's next pointer",
+      "Current"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The original head becomes the last node, whose next pointer is NULL."
+  },
+  {
+    question: "Which technique can also be used to reverse a linked list?",
+    options: [
+      "Binary Search",
+      "Recursion",
+      "Merge Sort",
+      "Breadth First Search"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Linked lists can be reversed recursively as well as iteratively."
+  },
+  {
+    question: "How many times is each node visited during iterative reversal?",
+    options: [
+      "Once",
+      "Twice",
+      "Three times",
+      "Depends on list size"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Each node is processed exactly one time."
+  },
+  {
+    question: "Which statement about reversing a linked list is correct?",
+    options: [
+      "Node data is swapped.",
+      "Only pointer directions are changed.",
+      "The list is sorted.",
+      "New nodes are created."
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The reversal algorithm changes only the links between nodes; node values remain unchanged."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Linked List Reverse Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/quiz/search/page.jsx b/src/app/visualizer/linkedlist/operations/quiz/search/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/quiz/search/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/quiz/search/quiz.jsx b/src/app/visualizer/linkedlist/operations/quiz/search/quiz.jsx
new file mode 100644
index 000000000..8956e7bd9
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/quiz/search/quiz.jsx
@@ -0,0 +1,121 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the time complexity of searching for an element in a singly linked list?",
+    options: ["O(1)", "O(log n)", "O(n)", "O(n²)"],
+    correctAnswer: 2,
+    explanation: "A linked list must be traversed sequentially until the element is found or the end is reached."
+  },
+  {
+    question: "From which node does searching in a linked list begin?",
+    options: [
+      "Tail node",
+      "Middle node",
+      "Head node",
+      "Random node"
+    ],
+    correctAnswer: 2,
+    explanation: "Searching always starts from the head node."
+  },
+  {
+    question: "What happens if the searched element is not present in the linked list?",
+    options: [
+      "The list is deleted",
+      "The traversal reaches NULL",
+      "The list is reversed",
+      "A new node is created"
+    ],
+    correctAnswer: 1,
+    explanation: "If the traversal reaches NULL without finding the value, the element is not present."
+  },
+  {
+    question: "Which searching technique is generally used in a linked list?",
+    options: [
+      "Binary Search",
+      "Linear Search",
+      "Interpolation Search",
+      "Jump Search"
+    ],
+    correctAnswer: 1,
+    explanation: "Linked lists are searched using linear traversal."
+  },
+  {
+    question: "Why can't Binary Search be efficiently applied to a linked list?",
+    options: [
+      "Linked lists cannot store integers",
+      "Random access is not available",
+      "Pointers are too slow",
+      "Binary Search requires recursion"
+    ],
+    correctAnswer: 1,
+    explanation: "Binary Search requires direct access to the middle element, which linked lists do not provide."
+  },
+  {
+    question: "Which pointer is commonly used while searching a linked list?",
+    options: [
+      "temp/current",
+      "tail",
+      "rear",
+      "previous"
+    ],
+    correctAnswer: 0,
+    explanation: "A temporary pointer is used to traverse the linked list."
+  },
+  {
+    question: "If the target value is found at the first node, how many comparisons are required?",
+    options: [
+      "0",
+      "1",
+      "n",
+      "n/2"
+    ],
+    correctAnswer: 1,
+    explanation: "Only one comparison is needed when the first node contains the target value."
+  },
+  {
+    question: "In the worst case, how many nodes must be visited while searching?",
+    options: [
+      "1",
+      "log₂n",
+      "All nodes",
+      "Half of the nodes"
+    ],
+    correctAnswer: 2,
+    explanation: "If the element is last or absent, every node is visited."
+  },
+  {
+    question: "Which linked list operation is performed repeatedly during searching?",
+    options: [
+      "Insertion",
+      "Deletion",
+      "Traversal",
+      "Sorting"
+    ],
+    correctAnswer: 2,
+    explanation: "Searching requires traversing the linked list node by node."
+  },
+  {
+    question: "What is the average time complexity of searching in a linked list?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n log n)"
+    ],
+    correctAnswer: 2,
+    explanation: "On average, approximately half of the nodes are traversed, giving O(n) complexity."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Linked List Search Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/quiz/traversal/page.jsx b/src/app/visualizer/linkedlist/operations/quiz/traversal/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/quiz/traversal/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/quiz/traversal/quiz.jsx b/src/app/visualizer/linkedlist/operations/quiz/traversal/quiz.jsx
new file mode 100644
index 000000000..c318e28bd
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/quiz/traversal/quiz.jsx
@@ -0,0 +1,136 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the purpose of traversing a linked list?",
+    options: [
+      "To sort the linked list",
+      "To visit every node one by one",
+      "To reverse the linked list",
+      "To delete all nodes"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Traversal means visiting each node sequentially from the head to the end."
+  },
+  {
+    question: "Which node is visited first during traversal?",
+    options: [
+      "Tail node",
+      "Middle node",
+      "Head node",
+      "Last inserted node"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Traversal always starts from the head node."
+  },
+  {
+    question: "Which pointer is commonly used to traverse a linked list?",
+    options: [
+      "rear",
+      "tail",
+      "temp/current",
+      "front"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "A temporary pointer moves from one node to the next."
+  },
+  {
+    question: "What condition is used to stop traversal in a singly linked list?",
+    options: [
+      "current == head",
+      "current == NULL",
+      "tail == NULL",
+      "current == previous"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Traversal stops when the current pointer becomes NULL."
+  },
+  {
+    question: "What is the time complexity of traversing an entire linked list?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Every node is visited exactly once."
+  },
+  {
+    question: "Which operation is NOT performed during traversal?",
+    options: [
+      "Reading node values",
+      "Moving to the next node",
+      "Following next pointers",
+      "Random access to any node"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "Linked lists do not support random access."
+  },
+  {
+    question: "If a linked list is empty, what is the value of the head pointer?",
+    options: [
+      "0",
+      "1",
+      "NULL",
+      "Tail"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "An empty linked list has a NULL head pointer."
+  },
+  {
+    question: "How many times is each node visited during a complete traversal?",
+    options: [
+      "Twice",
+      "Once",
+      "Three times",
+      "Depends on sorting"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Each node is visited exactly one time."
+  },
+  {
+    question: "Which operation commonly requires traversal?",
+    options: [
+      "Searching",
+      "Binary Search",
+      "Heapify",
+      "Merge Sort"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Searching requires visiting nodes one by one."
+  },
+  {
+    question: "Which statement about linked list traversal is correct?",
+    options: [
+      "Nodes can be accessed directly by index.",
+      "Traversal always starts from the head node.",
+      "Traversal starts from the tail node.",
+      "Traversal requires recursion."
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Traversal begins from the head and follows the next pointers until NULL."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Linked List Traversal Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/reverse/AlgorithmClient.jsx b/src/app/visualizer/linkedlist/operations/reverse/AlgorithmClient.jsx
new file mode 100644
index 000000000..c61b74b9e
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/reverse/AlgorithmClient.jsx
@@ -0,0 +1,34 @@
+import Animation from "@/app/visualizer/linkedlist/operations/reverse/animation";
+import Content from "@/app/visualizer/linkedlist/operations/reverse/content";
+import CodeBlock from "@/app/visualizer/linkedlist/operations/reverse/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Linked List", "Reverse")}
+      title="Reverse"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      exploreOther={
+        <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" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/linkedlist/operations/reverse/animation.jsx b/src/app/visualizer/linkedlist/operations/reverse/animation.jsx
new file mode 100644
index 000000000..0d2218f7c
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/reverse/animation.jsx
@@ -0,0 +1,210 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import { generateRandomListLogic } from "@/features/algorithms/linkedlist/traversalLogic";
+import { reverseGenerator } from "@/features/algorithms/linkedlist/reverseLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+const LinkedListReverse = () => {
+  const [list, setList] = useState([]);
+
+  const frames = useMemo(() => {
+    if (list.length === 0) return [];
+    return Array.from(reverseGenerator(list));
+  }, [list]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  const handleGenerate = () => {
+    if (engine.isPlaying) return;
+    setList(generateRandomListLogic());
+    engine.reset();
+  };
+
+  const startReverse = () => {
+    if (engine.isPlaying || list.length === 0) return;
+    engine.reset();
+    engine.play();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      setTimeout(() => engine.play(), 50);
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  const handleReset = () => {
+    setList([]);
+    engine.reset();
+  };
+
+  // When animation finishes naturally
+  React.useEffect(() => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0 && !engine.isPlaying) {
+        const finalFrame = frames[frames.length - 1];
+        if (finalFrame && finalFrame.phase === 'complete') {
+            setList(finalFrame.list);
+            engine.reset();
+        }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine]);
+
+  useVisualizerKeyboard({
+    onStart: startReverse,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        phase: 'idle',
+        prevIndex: -1,
+        currentIndex: -1,
+        nextIndex: -1,
+        list: list,
+        explanation: list.length > 0 ? "Ready to reverse. Click 'Reverse List'." : "Click 'Generate List' to create a linked list."
+      };
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize how reversing a linked list involves carefully updating pointers one node at a time.
+      </p>
+
+      <VisualizerCard>
+        <div className="flex flex-col gap-4">
+          <button
+            onClick={handleGenerate}
+            disabled={engine.isPlaying}
+            className="w-full rounded-lg bg-[#a435f0]/10 px-6 py-3 text-[#a435f0] transition hover:bg-[#a435f0]/20 border border-[#a435f0]/30 disabled:opacity-50"
+          >
+            Generate List
+          </button>
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <button
+              onClick={startReverse}
+              disabled={engine.isPlaying || list.length === 0}
+              className="flex-1 rounded-lg bg-primary px-6 py-3 text-white transition hover:bg-primary-dark disabled:bg-gray-400"
+            >
+              {engine.isPlaying ? "Reversing..." : "Reverse List"}
+            </button>
+            <button
+              onClick={handleReset}
+              className="flex-1 rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 dark:border-white dark:text-white dark:hover:bg-gray-700"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+        
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center min-h-[60px] flex items-center justify-center">
+         <p className="text-gray-800 dark:text-gray-200 font-medium">
+             {currentFrame.explanation}
+         </p>
+      </div>
+
+      <VisualizerCard>
+        <div className="mb-6 flex justify-center gap-4 text-sm sm:gap-8 sm:text-base">
+          <div className="flex items-center">
+            <div className="mr-2 h-4 w-4 rounded-full bg-emerald-500"></div>
+            <span>Previous</span>
+          </div>
+          <div className="flex items-center">
+            <div className="mr-2 h-4 w-4 rounded-full bg-amber-500"></div>
+            <span>Current</span>
+          </div>
+          <div className="flex items-center">
+            <div className="mr-2 h-4 w-4 rounded-full bg-blue-500"></div>
+            <span>Next</span>
+          </div>
+        </div>
+
+        <div className="relative flex w-full flex-col items-center justify-center overflow-x-auto rounded-xl border border-[#e5e7eb] bg-[#f9fafb] p-4 dark:border-[#222] dark:bg-[#181818] min-h-[260px]">
+          {currentFrame.list.length === 0 ? (
+            <div className="w-full py-12 text-center text-gray-500">
+              No nodes generated yet.
+            </div>
+          ) : (
+            <div className="flex items-center space-x-4 sm:space-x-8">
+              {currentFrame.list.map((node, index) => {
+                const isPrev = currentFrame.prevIndex === index;
+                const isCurrent = currentFrame.currentIndex === index;
+                const isNext = currentFrame.nextIndex === index;
+                
+                let bgData = "bg-primary";
+                let scaleClass = "scale-100";
+                
+                if (isCurrent) {
+                    bgData = "bg-amber-500 shadow-lg";
+                    scaleClass = "scale-110 z-10";
+                } else if (isPrev) {
+                    bgData = "bg-emerald-500";
+                } else if (isNext) {
+                    bgData = "bg-blue-500";
+                }
+
+                // If this node is "reversed" relative to original list (which means it points to the previous index)
+                // we can show a reverse arrow. Since this is just a 1D array visualization, 
+                // we will just show standard nodes. The 'next' address text shows the reversal.
+                const nextAddress = node.next;
+
+                return (
+                  <div key={node.id} className="flex items-center">
+                    <div className={`node flex flex-col items-center transition-all duration-300 ${scaleClass}`}>
+                      <span className="text-[10px] font-mono text-gray-500 mb-1">{node.address}</span>
+                      <div className="flex">
+                          <div className={`data-part w-16 rounded-l-lg ${bgData} p-3 text-center text-base text-white sm:w-20 sm:p-4 sm:text-lg transition-colors`}>
+                          {node.value}
+                          </div>
+                          <div className="next-part w-16 rounded-r-lg bg-[#c27cf7] p-3 text-center font-mono text-xs dark:bg-primary sm:w-20 sm:p-4 sm:text-base">
+                          {nextAddress}
+                          </div>
+                      </div>
+                    </div>
+                    {index < currentFrame.list.length - 1 && (
+                      <div className="mx-1 text-2xl sm:mx-2 sm:text-3xl text-gray-400">&rarr;</div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default LinkedListReverse;
diff --git a/src/app/visualizer/linkedlist/operations/reverse/codeBlock.jsx b/src/app/visualizer/linkedlist/operations/reverse/codeBlock.jsx
new file mode 100644
index 000000000..cdbdeff88
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/reverse/codeBlock.jsx
@@ -0,0 +1,27 @@
+'use client';
+
+import CodeBlock from '@/app/components/ui/CodeBlock';
+import CodeExamples from '@/app/visualizer/linkedlist/operations/reverse/data/codeExamples.json';
+
+// ─── Code Examples ─────────────────────────────
+const codeExamples = CodeExamples;
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'linkedListReverse.js',
+    python:'linked_list_reverse.py',
+    java:'LinkedListReverse.java',
+    c:'linked_list_reverse.c',
+    cpp:'linked_list_reverse.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const LinkedListReverseCode = () => (
+    <CodeBlock
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default LinkedListReverseCode;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/reverse/content.jsx b/src/app/visualizer/linkedlist/operations/reverse/content.jsx
old mode 100755
new mode 100644
similarity index 100%
rename from app/visualizer/linkedList/operations/reverse/content.jsx
rename to src/app/visualizer/linkedlist/operations/reverse/content.jsx
diff --git a/src/app/visualizer/linkedlist/operations/reverse/data/codeExamples.json b/src/app/visualizer/linkedlist/operations/reverse/data/codeExamples.json
new file mode 100644
index 000000000..4595b7054
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/reverse/data/codeExamples.json
@@ -0,0 +1,7 @@
+{
+    "javascript": "class Node {\n  constructor(data) {\n    this.data = data;\n    this.next = null;\n  }\n}\nfunction reverseList(head) {\n  let prev = null;\n  let current = head;\n  while (current) {\n    let next = current.next;\n    current.next = prev;\n    prev = current;\n    current = next;\n  }\n  return prev;\n}",
+    "python": "class Node:\n    def __init__(self, data):\n        self.data = data\n        self.next = None\ndef reverse_list(head):\n    prev = None\n    current = head\n    while current:\n        next_node = current.next\n        current.next = prev\n        prev = current\n        current = next_node\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}\npublic class ReverseList {\n    public static Node reverse(Node head) {\n        Node prev = null;\n        Node current = head;\n        while (current != null) {\n            Node next = current.next;\n            current.next = prev;\n            prev = current;\n            current = next;\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;\nNode* reverseList(Node* head) {\n    Node* prev = NULL;\n    Node* current = head;\n    while (current) {\n        Node* next = current->next;\n        current->next = prev;\n        prev = current;\n        current = next;\n    }\n    return prev;\n}",
+    "cpp": "#include <iostream>\nusing namespace std;\nclass Node {\npublic:\n    int data;\n    Node* next;\n    Node(int d) : data(d), next(nullptr) {}\n};\nNode* reverseList(Node* head) {\n    Node* prev = nullptr;\n    Node* current = head;\n    while (current) {\n        Node* next = current->next;\n        current->next = prev;\n        prev = current;\n        current = next;\n    }\n    return prev;\n}"
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/reverse/quiz.jsx b/src/app/visualizer/linkedlist/operations/reverse/quiz.jsx
new file mode 100644
index 000000000..39f8a002d
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/reverse/quiz.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const Quiz = () => {
+  const questions = [
+  {
+    "question": "What is the primary purpose of reversing a linked list?",
+    "options": [
+      "To traverse the list in reverse order",
+      "To sort the list",
+      "To delete all nodes",
+      "To merge two lists"
+    ],
+    "correctAnswer": 0,
+    "explanation": "Reversing a linked list allows you to traverse the list from tail to head, which is not directly possible in a singly linked list."
+  },
+  {
+    "question": "Which pointers are typically used during the reversal process?",
+    "options": [
+      "Current, Previous, Next",
+      "Head, Tail, Middle",
+      "Left, Right, Mid",
+      "Start, End, Temp"
+    ],
+    "correctAnswer": 0,
+    "explanation": "The reversal process commonly uses three pointers: current (the node being processed), previous (the node before current), and next (the node after current)."
+  },
+  {
+    "question": "What is the time complexity of reversing a singly linked list iteratively?",
+    "options": [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n^2)"
+    ],
+    "correctAnswer": 2,
+    "explanation": "Each node is visited once, so the time complexity is O(n)."
+  },
+  {
+    "question": "What happens to the original head after a successful reversal?",
+    "options": [
+      "It becomes the new tail",
+      "It is deleted",
+      "It remains the head",
+      "It points to itself"
+    ],
+    "correctAnswer": 0,
+    "explanation": "After reversal, the original head node becomes the new tail of the linked list."
+  },
+  {
+    "question": "What is the space complexity of the iterative reversal approach?",
+    "options": [
+      "O(n)",
+      "O(1)",
+      "O(log n)",
+      "O(n^2)"
+    ],
+    "correctAnswer": 1,
+    "explanation": "Iterative reversal only uses a few pointers, so it has O(1) auxiliary space complexity."
+  },
+  {
+    "question": "What is the final value of the `.next` field of the new tail node after reversal?",
+    "options": [
+      "Points to the old head",
+      "Points to itself",
+      "Is null",
+      "Points to the new head"
+    ],
+    "correctAnswer": 2,
+    "explanation": "The new tail node's `.next` should be set to null, indicating the end of the list."
+  },
+  {
+    "question": "What happens if you reverse an empty linked list?",
+    "options": [
+      "It throws an error",
+      "The result is still an empty list",
+      "It becomes a circular list",
+      "It creates a new node"
+    ],
+    "correctAnswer": 1,
+    "explanation": "Reversing an empty linked list results in an empty list (null head)."
+  },
+  {
+    "question": "How can you visually confirm that the list has been reversed?",
+    "options": [
+      "By checking if the order of nodes is flipped",
+      "By checking if the length has changed",
+      "By checking memory addresses",
+      "By checking if all values are zero"
+    ],
+    "correctAnswer": 0,
+    "explanation": "The order of nodes should be the exact reverse of the original list."
+  },
+  {
+    "question": "What should be done before changing the `.next` pointer of a node?",
+    "options": [
+      "Save the next node in a temporary variable",
+      "Delete the node",
+      "Set the node's value to zero",
+      "Move the head pointer"
+    ],
+    "correctAnswer": 0,
+    "explanation": "Always save the next node in a temporary variable before changing `.next`, or you may lose access to the rest of the list."
+  },
+  {
+    "question": "Which approach is safer in terms of memory usage for large lists?",
+    "options": [
+      "Recursive reversal",
+      "Iterative reversal",
+      "Merging",
+      "Sorting"
+    ],
+    "correctAnswer": 1,
+    "explanation": "Iterative reversal is safer for large lists because it uses constant space, whereas recursion can cause stack overflow."
+  }
+];
+
+  return <QuizEngine title="Reverse Quiz Challenge" questions={questions} />;
+};
+
+export default Quiz;
diff --git a/src/app/visualizer/linkedlist/operations/sorting/AlgorithmClient.jsx b/src/app/visualizer/linkedlist/operations/sorting/AlgorithmClient.jsx
new file mode 100644
index 000000000..8cc0a7b2e
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/sorting/AlgorithmClient.jsx
@@ -0,0 +1,33 @@
+import Animation from "@/app/visualizer/linkedlist/operations/sorting/animation";
+import Content from "@/app/visualizer/linkedlist/operations/sorting/content";
+import CodeBlock from "@/app/visualizer/linkedlist/operations/sorting/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Linked List", "Sorting")}
+      title="Sorting"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      exploreOther={
+        <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" },
+            { text: "Reverse", url: "./reverse" },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/sorting/animation.jsx b/src/app/visualizer/linkedlist/operations/sorting/animation.jsx
new file mode 100644
index 000000000..d9ab46b57
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/sorting/animation.jsx
@@ -0,0 +1,242 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import { generateRandomListLogic } from "@/features/algorithms/linkedlist/traversalLogic";
+import { sortingGenerator } from "@/features/algorithms/linkedlist/sortingLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+const LinkedListSorting = () => {
+  const [list, setList] = useState([]);
+
+  const frames = useMemo(() => {
+    if (list.length === 0) return [];
+    return Array.from(sortingGenerator(list));
+  }, [list]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  const handleGenerate = () => {
+    if (engine.isPlaying) return;
+    setList([
+  { value: 45 },
+  { value: 12 },
+  { value: 78 },
+  { value: 23 },
+  { value: 9 }
+]);
+    engine.reset();
+  };
+
+  const startSort = () => {
+    if (engine.isPlaying || list.length === 0) return;
+    engine.reset();
+    engine.play();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      setTimeout(() => engine.play(), 50);
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  const handleReset = () => {
+    setList([]);
+    engine.reset();
+  };
+
+  // When animation finishes naturally
+  React.useEffect(() => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0 && !engine.isPlaying) {
+        const finalFrame = frames[frames.length - 1];
+        if (finalFrame && finalFrame.phase === 'complete') {
+            setList(finalFrame.list);
+            engine.reset();
+        }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine]);
+
+  useVisualizerKeyboard({
+    onStart: startSort,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        phase: "idle",
+        leftRange: null,
+        rightRange: null,
+        list,
+        explanation:
+          list.length > 0
+            ? "Ready to sort. Click 'Sort List'."
+            : "Click 'Generate List' to create a list."
+      };
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+      Visualize how Merge Sort recursively splits the list into smaller parts and then merges them back in sorted order.
+    </p>
+
+      <VisualizerCard>
+        <div className="flex flex-col gap-4">
+          <button
+            onClick={handleGenerate}
+            disabled={engine.isPlaying}
+            className="w-full rounded-lg bg-[#a435f0]/10 px-6 py-3 text-[#a435f0] transition hover:bg-[#a435f0]/20 border border-[#a435f0]/30 disabled:opacity-50"
+          >
+            Generate List
+          </button>
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <button
+              onClick={startSort}
+              disabled={engine.isPlaying || list.length === 0}
+              className="flex-1 rounded-lg bg-primary px-6 py-3 text-white transition hover:bg-primary-dark disabled:bg-gray-400"
+            >
+              {engine.isPlaying ? "Sorting..." : "Sort List"}
+            </button>
+            <button
+              onClick={handleReset}
+              className="flex-1 rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 dark:border-white dark:text-white dark:hover:bg-gray-700"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+        
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+      <div className="text-center mb-4">
+      <span className="px-4 py-2 rounded-full bg-primary text-white">
+        {currentFrame.phase?.toUpperCase()}
+      </span>
+    </div>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center min-h-[60px] flex items-center justify-center">
+         <p className="text-gray-800 dark:text-gray-200 font-medium">
+             {currentFrame.explanation}
+         </p>
+      </div>
+
+      <VisualizerCard>
+        <div className="mb-6 flex justify-center gap-6 flex-wrap">
+
+            <div className="flex items-center">
+              <div className="mr-2 h-4 w-4 rounded bg-blue-500"></div>
+              <span>Left Half</span>
+            </div>
+
+            <div className="flex items-center">
+              <div className="mr-2 h-4 w-4 rounded bg-yellow-500"></div>
+              <span>Right Half</span>
+            </div>
+
+            <div className="flex items-center">
+              <div className="mr-2 h-4 w-4 rounded bg-green-500"></div>
+              <span>Merged Section</span>
+            </div>
+
+        </div>  
+
+        <div className="relative flex w-full flex-col items-center justify-center overflow-x-auto rounded-xl border border-[#e5e7eb] bg-[#f9fafb] p-4 dark:border-[#222] dark:bg-[#181818] min-h-[260px]">
+          {currentFrame.list.length === 0 ? (
+            <div className="w-full py-12 text-center text-gray-500">
+              No nodes generated yet.
+            </div>
+          ) : (
+            <div className="flex items-center space-x-4 sm:space-x-8">
+              {currentFrame.list.map((node, index) => {
+                let bgData = "bg-primary";
+
+                const inLeft =
+                  currentFrame.leftRange &&
+                  index >= currentFrame.leftRange[0] &&
+                  index <= currentFrame.leftRange[1];
+
+                const inRight =
+                  currentFrame.rightRange &&
+                  index >= currentFrame.rightRange[0] &&
+                  index <= currentFrame.rightRange[1];
+
+                const isComparing =
+                  currentFrame.phase === "compare" &&
+                  (
+                    index === currentFrame.currentIndex ||
+                    index === currentFrame.compareIndex
+                  );
+
+                if (currentFrame.phase === "split") {
+                  if (inLeft) bgData = "bg-blue-500";
+                  if (inRight) bgData = "bg-yellow-500";
+                }
+
+                if (currentFrame.phase === "merge") {
+                  if (inLeft || inRight) {
+                    bgData = "bg-green-500";
+                  }
+                }
+
+                if (isComparing) {
+                  bgData = "bg-red-500";
+                }
+
+                return (
+              <div key={node.id || index} className="flex items-center">
+                <div className={`
+                    w-16 h-16
+                    rounded-xl
+                    ${bgData}
+                    flex items-center
+                    justify-center
+                    text-white
+                    font-bold
+                    text-xl
+                    transition-all
+                    duration-300
+                  `}
+                >
+                      {node.value}
+                    </div>
+                  </div>
+                );
+                })}
+                
+            </div>
+          )}
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default LinkedListSorting;
diff --git a/src/app/visualizer/linkedlist/operations/sorting/codeBlock.jsx b/src/app/visualizer/linkedlist/operations/sorting/codeBlock.jsx
new file mode 100644
index 000000000..0e913a3e2
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/sorting/codeBlock.jsx
@@ -0,0 +1,27 @@
+'use client';
+
+import CodeBlock from '@/app/components/ui/CodeBlock';
+import CodeExamples from '@/app/visualizer/linkedlist/operations/sorting/data/codeExamples.json';
+
+// ─── Code Examples ─────────────────────────────
+const codeExamples = CodeExamples;
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript: 'linkedListSorting.js',
+    python: 'linked_list_sorting.py',
+    java: 'LinkedListSorting.java',
+    c: 'linked_list_sorting.c',
+    cpp: 'linked_list_sorting.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const LinkedListSortingCode = () => (
+    <CodeBlock
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default LinkedListSortingCode;   
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/sorting/content.jsx b/src/app/visualizer/linkedlist/operations/sorting/content.jsx
new file mode 100644
index 000000000..696dc4b50
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/sorting/content.jsx
@@ -0,0 +1,90 @@
+const content = () => {
+  const overview = [
+    `Sorting a linked list means arranging its nodes in ascending or descending order based on their values.`,
+    `Merge Sort is the most efficient sorting algorithm for linked lists because it does not require random access and works efficiently by splitting and merging linked lists.`
+  ];
+
+  const sortingSteps = [
+    { step: "Find the middle node of the linked list using slow and fast pointers" },
+    { step: "Split the linked list into two halves" },
+    { step: "Recursively sort both halves using Merge Sort" },
+    { step: "Merge the two sorted linked lists" },
+    { step: "Repeat until the entire list becomes sorted" }
+  ];
+
+  const edgeCases = [
+    "Empty linked list",
+    "Single-node linked list",
+    "Already sorted linked list",
+    "Linked list with duplicate values",
+    "Linked list sorted in reverse order"
+  ];
+
+  const bestPractices = [
+    "Use Merge Sort for linked lists due to its O(n log n) performance",
+    "Avoid Bubble Sort and Selection Sort for large linked lists",
+    "Use slow and fast pointers to find the middle efficiently",
+    "Test with duplicate and negative values",
+    "Verify all node links after merging"
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+        {/* Overview */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Sorting a Linked List
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            {overview.map((para, index) => (
+              <p key={index} className="text-[#374151] dark:text-[#d1d5db] mb-3 leading-relaxed">
+                {para}
+              </p>
+            ))}
+            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                <strong>Tip:</strong> Merge Sort is considered the best general-purpose sorting algorithm for linked lists because it achieves O(n log n) time complexity while efficiently handling node-based structures.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Merge Steps */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Steps to Sort</h2>
+          <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+            {sortingSteps.map((item, index) => (
+              <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                {item.step}
+              </li>
+            ))}
+          </ol>
+        </section>
+
+        {/* Edge Cases */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Edge Cases</h2>
+          <ul className="list-disc pl-5 space-y-2 marker:text-yellow-500 dark:marker:text-yellow-400">
+            {edgeCases.map((item, index) => (
+              <li key={index} className="text-[#374151] dark:text-[#d1d5db]">{item}</li>
+            ))}
+          </ul>
+        </section>
+
+        {/* Best Practices */}
+        <section className="p-6">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Best Practices</h2>
+          <ul className="list-disc pl-5 space-y-2 marker:text-green-500 dark:marker:text-green-400">
+            {bestPractices.map((item, index) => (
+              <li key={index} className="text-[#374151] dark:text-[#d1d5db]">{item}</li>
+            ))}
+          </ul>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default content;
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/sorting/data/codeExamples.json b/src/app/visualizer/linkedlist/operations/sorting/data/codeExamples.json
new file mode 100644
index 000000000..98eb70eb0
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/sorting/data/codeExamples.json
@@ -0,0 +1,7 @@
+{
+  "javascript": "class Node {\n  constructor(data) {\n    this.data = data;\n    this.next = null;\n  }\n}\nfunction mergeSort(head) {\n  if (!head || !head.next) return head;\n\n  let slow = head;\n  let fast = head.next;\n\n  while (fast && fast.next) {\n    slow = slow.next;\n    fast = fast.next.next;\n  }\n\n  let mid = slow.next;\n  slow.next = null;\n\n  let left = mergeSort(head);\n  let right = mergeSort(mid);\n\n  return merge(left, right);\n}\n\nfunction merge(a, b) {\n  let dummy = new Node(0);\n  let tail = dummy;\n\n  while (a && b) {\n    if (a.data <= b.data) {\n      tail.next = a;\n      a = a.next;\n    } else {\n      tail.next = b;\n      b = b.next;\n    }\n    tail = tail.next;\n  }\n\n  tail.next = a || b;\n  return dummy.next;\n}",
+  "python": "class Node:\n    def __init__(self, data):\n        self.data = data\n        self.next = None\n\ndef merge_sort(head):\n    if not head or not head.next:\n        return head\n\n    slow = head\n    fast = head.next\n\n    while fast and fast.next:\n        slow = slow.next\n        fast = fast.next.next\n\n    mid = slow.next\n    slow.next = None\n\n    left = merge_sort(head)\n    right = merge_sort(mid)\n\n    return merge(left, right)\n\ndef merge(a, b):\n    dummy = Node(0)\n    tail = dummy\n\n    while a and b:\n        if a.data <= b.data:\n            tail.next = a\n            a = a.next\n        else:\n            tail.next = b\n            b = b.next\n        tail = tail.next\n\n    tail.next = a or b\n    return dummy.next",
+  "java": "class Node {\n    int data;\n    Node next;\n\n    Node(int data) {\n        this.data = data;\n        this.next = null;\n    }\n}\n\npublic class LinkedListSort {\n    public static Node mergeSort(Node head) {\n        if (head == null || head.next == null)\n            return head;\n\n        Node slow = head;\n        Node fast = head.next;\n\n        while (fast != null && fast.next != null) {\n            slow = slow.next;\n            fast = fast.next.next;\n        }\n\n        Node mid = slow.next;\n        slow.next = null;\n\n        Node left = mergeSort(head);\n        Node right = mergeSort(mid);\n\n        return merge(left, right);\n    }\n\n    private static Node merge(Node a, Node b) {\n        Node dummy = new Node(0);\n        Node tail = dummy;\n\n        while (a != null && b != null) {\n            if (a.data <= b.data) {\n                tail.next = a;\n                a = a.next;\n            } else {\n                tail.next = b;\n                b = b.next;\n            }\n            tail = tail.next;\n        }\n\n        tail.next = (a != null) ? a : b;\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* merge(Node* a, Node* b);\n\nNode* mergeSort(Node* head) {\n    if (!head || !head->next)\n        return head;\n\n    Node* slow = head;\n    Node* fast = head->next;\n\n    while (fast && fast->next) {\n        slow = slow->next;\n        fast = fast->next->next;\n    }\n\n    Node* mid = slow->next;\n    slow->next = NULL;\n\n    Node* left = mergeSort(head);\n    Node* right = mergeSort(mid);\n\n    return merge(left, right);\n}",
+  "cpp": "#include <iostream>\nusing namespace std;\n\nclass Node {\npublic:\n    int data;\n    Node* next;\n\n    Node(int d) {\n        data = d;\n        next = nullptr;\n    }\n};\n\nNode* merge(Node* a, Node* b);\n\nNode* mergeSort(Node* head) {\n    if (!head || !head->next)\n        return head;\n\n    Node* slow = head;\n    Node* fast = head->next;\n\n    while (fast && fast->next) {\n        slow = slow->next;\n        fast = fast->next->next;\n    }\n\n    Node* mid = slow->next;\n    slow->next = nullptr;\n\n    Node* left = mergeSort(head);\n    Node* right = mergeSort(mid);\n\n    return merge(left, right);\n}"
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/sorting/quiz.jsx b/src/app/visualizer/linkedlist/operations/sorting/quiz.jsx
new file mode 100644
index 000000000..75846fe05
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/sorting/quiz.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const Quiz = () => {
+const questions = [
+  {
+    question: "Which sorting algorithm is most commonly used for linked lists?",
+    options: [
+      "Bubble Sort",
+      "Selection Sort",
+      "Merge Sort",
+      "Insertion Sort"
+    ],
+    correctAnswer: 2,
+    explanation: "Merge Sort is preferred for linked lists because it does not require random access and works efficiently with node pointers."
+  },
+  {
+    question: "What is the time complexity of Merge Sort on a linked list?",
+    options: [
+      "O(n²)",
+      "O(n log n)",
+      "O(log n)",
+      "O(n)"
+    ],
+    correctAnswer: 1,
+    explanation: "Merge Sort divides the list recursively and merges sorted halves, resulting in O(n log n) time complexity."
+  },
+  {
+    question: "Why is Merge Sort preferred over Quick Sort for linked lists?",
+    options: [
+      "It uses less memory",
+      "It is easier to implement",
+      "It does not require random access",
+      "It is always faster"
+    ],
+    correctAnswer: 2,
+    explanation: "Linked lists do not support efficient random access, making Merge Sort a better choice."
+  },
+  {
+    question: "What is the first step in Merge Sort for a linked list?",
+    options: [
+      "Swap adjacent nodes",
+      "Find the middle node",
+      "Delete duplicate nodes",
+      "Reverse the list"
+    ],
+    correctAnswer: 1,
+    explanation: "Merge Sort starts by finding the middle node and splitting the list into two halves."
+  },
+  {
+    question: "What happens after splitting the linked list into two halves?",
+    options: [
+      "The halves are reversed",
+      "The halves are recursively sorted",
+      "The list is deleted",
+      "The nodes are shuffled"
+    ],
+    correctAnswer: 1,
+    explanation: "Each half is recursively sorted before being merged back together."
+  },
+  {
+    question: "What is the purpose of the merge step in Merge Sort?",
+    options: [
+      "To remove duplicates",
+      "To combine two sorted lists into one sorted list",
+      "To reverse the list",
+      "To find the largest element"
+    ],
+    correctAnswer: 1,
+    explanation: "The merge step combines two sorted sublists while maintaining sorted order."
+  },
+  {
+    question: "What is the space complexity of Merge Sort on a linked list due to recursion?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 1,
+    explanation: "The recursive call stack requires O(log n) extra space."
+  },
+  {
+    question: "Which pointer technique is commonly used to find the middle of a linked list?",
+    options: [
+      "Head and Tail",
+      "Previous and Current",
+      "Slow and Fast",
+      "Left and Right"
+    ],
+    correctAnswer: 2,
+    explanation: "The slow and fast pointer technique efficiently finds the middle node."
+  },
+  {
+    question: "What should be true about the two lists before performing the merge operation?",
+    options: [
+      "Both lists must be reversed",
+      "Both lists must be sorted",
+      "Both lists must have equal length",
+      "Both lists must be circular"
+    ],
+    correctAnswer: 1,
+    explanation: "Merge Sort merges two already sorted lists into a larger sorted list."
+  },
+  {
+    question: "What will be the result after completing the sorting process?",
+    options: [
+      "Nodes arranged in sorted order",
+      "Nodes arranged in reverse order",
+      "A circular linked list",
+      "An empty linked list"
+    ],
+    correctAnswer: 0,
+    explanation: "The final output is a linked list whose nodes are arranged in ascending (or specified) sorted order."
+  }
+];
+
+  return <QuizEngine title="Sorting Quiz Challenge" questions={questions} />;
+};
+
+export default Quiz;
diff --git a/src/app/visualizer/linkedlist/operations/traversal/AlgorithmClient.jsx b/src/app/visualizer/linkedlist/operations/traversal/AlgorithmClient.jsx
new file mode 100644
index 000000000..f9eef0057
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/traversal/AlgorithmClient.jsx
@@ -0,0 +1,34 @@
+import Animation from "@/app/visualizer/linkedlist/operations/traversal/animation";
+import Content from "@/app/visualizer/linkedlist/operations/traversal/content";
+import CodeBlock from "@/app/visualizer/linkedlist/operations/traversal/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Linked List", "Traversal")}
+      title="Traversal"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      exploreOther={
+        <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" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/linkedlist/operations/traversal/animation.jsx b/src/app/visualizer/linkedlist/operations/traversal/animation.jsx
new file mode 100644
index 000000000..8b7193e13
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/traversal/animation.jsx
@@ -0,0 +1,209 @@
+"use client";
+import React, { useMemo, useState } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import { generateRandomListLogic, traversalGenerator } from "@/features/algorithms/linkedlist/traversalLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+const LinkedListTraversal = () => {
+  const [list, setList] = useState([]);
+
+  const frames = useMemo(() => {
+    if (list.length === 0) return [];
+    return Array.from(traversalGenerator(list));
+  }, [list]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  const generateRandomList = () => {
+    if (engine.isPlaying) return;
+    const newList = generateRandomListLogic();
+    setList(newList);
+    engine.reset();
+  };
+
+  const animateTraversal = () => {
+    if (engine.isPlaying || list.length === 0) return;
+    engine.reset();
+    engine.play();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      setTimeout(() => engine.play(), 50);
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  const handleReset = () => {
+    setList([]);
+    engine.reset();
+  };
+
+  useVisualizerKeyboard({
+    onStart: animateTraversal,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame = frames[engine.currentStep] || {
+    list: list,
+    currentNodeIndex: -1,
+    explanation: list.length > 0 ? "Ready to traverse." : "Click \"Generate List\" to create a linked list."
+  };
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize how traversal visits each node in a linked list from head to tail.
+      </p>
+
+      <VisualizerCard>
+        <div className="flex flex-col gap-4 sm:flex-row">
+          <button
+            onClick={generateRandomList}
+            disabled={engine.isPlaying}
+            className="flex-1 rounded-lg bg-[#a435f0]/10 px-6 py-3 text-[#a435f0] transition hover:bg-[#a435f0]/20 border border-[#a435f0]/30 disabled:opacity-50"
+          >
+            Generate List
+          </button>
+          <button
+            onClick={animateTraversal}
+            disabled={engine.isPlaying || list.length === 0}
+            className="flex-1 rounded-lg bg-primary px-6 py-3 text-white transition hover:bg-primary-dark disabled:bg-gray-400"
+          >
+            {engine.isPlaying ? "Traversing..." : "Animate Traversal"}
+          </button>
+          <button
+            onClick={handleReset}
+            className="flex-1 rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 dark:border-white dark:text-white dark:hover:bg-gray-700"
+          >
+            Reset
+          </button>
+        </div>
+        
+        {list.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center">
+         <p className="text-gray-800 dark:text-gray-200 font-medium">
+             {currentFrame.explanation}
+         </p>
+      </div>
+
+      <VisualizerCard>
+        <div className="mb-6 flex flex-wrap justify-center gap-3 text-sm sm:gap-6 sm:text-base">
+          <div className="flex items-center">
+            <div className="mr-2 h-4 w-4 rounded-full bg-primary"></div>
+            <span>Node</span>
+          </div>
+          <div className="flex items-center">
+            <div className="mr-2 h-4 w-4 rounded-full bg-emerald-500"></div>
+            <span>Visited / Current</span>
+          </div>
+          <div className="flex items-center">
+            <div className="mr-2 h-4 w-4 rounded-full bg-[#c27cf7]"></div>
+            <span>Address</span>
+          </div>
+          <div className="flex items-center">
+            <div className="mr-2 h-4 w-4 rounded-full bg-gray-400"></div>
+            <span>Pointer</span>
+          </div>
+        </div>
+
+        <div className="relative flex min-h-[220px] w-full items-center justify-center overflow-x-auto rounded-xl border border-[#e5e7eb] bg-[#f9fafb] p-4 dark:border-[#222] dark:bg-[#181818]">
+          {list.length === 0 ? (
+            <div className="w-full py-12 text-center text-gray-500 dark:text-gray-400">
+              Click &quot;Generate List&quot; to create a linked list.
+            </div>
+          ) : (
+            <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-start sm:gap-6">
+              {currentFrame.list.map((node, index) => {
+                const isVisited = currentFrame.currentNodeIndex >= index && currentFrame.currentNodeIndex !== -1;
+                const isCurrent = currentFrame.currentNodeIndex === index;
+                
+                let nodeClass = "bg-primary";
+                let scaleClass = "scale-100";
+                
+                if (isCurrent) {
+                  nodeClass = "bg-emerald-500 shadow-lg shadow-emerald-500/30";
+                  scaleClass = "scale-110";
+                } else if (isVisited) {
+                  nodeClass = "bg-emerald-500";
+                }
+
+                let addressClass = "text-gray-500 dark:text-gray-400 font-normal";
+                if (isCurrent) {
+                  addressClass = "text-blue-600 dark:text-blue-400 font-bold";
+                }
+
+                let arrowClass = "text-gray-400 opacity-60";
+                if (isVisited && !isCurrent) {
+                   arrowClass = "text-blue-500 opacity-100 scale-110";
+                }
+
+                return (
+                  <React.Fragment key={node.id}>
+                    <div className="flex flex-col items-center gap-2">
+                      <div className={`text-xs font-mono transition-all duration-300 ${addressClass}`}>
+                        {node.address}
+                      </div>
+                      <div
+                        className={`flex h-16 w-16 cursor-pointer flex-col items-center justify-center rounded-full text-3xl text-white shadow-md transition-all duration-500 ${nodeClass} ${scaleClass}`}
+                      >
+                        {node.value}
+                      </div>
+                      <div className="rounded bg-blue-100 px-2 py-1 text-xs font-mono dark:bg-blue-900 text-gray-700 dark:text-gray-200">
+                        Next: {node.next}
+                      </div>
+                    </div>
+                    {index < currentFrame.list.length - 1 && (
+                      <svg
+                        className={`my-4 h-8 w-8 transition-all duration-300 ${arrowClass}`}
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <path d="M5 12h14M12 5l7 7-7 7" />
+                      </svg>
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default LinkedListTraversal;
diff --git a/src/app/visualizer/linkedlist/operations/traversal/codeBlock.jsx b/src/app/visualizer/linkedlist/operations/traversal/codeBlock.jsx
new file mode 100644
index 000000000..f38b06aeb
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/traversal/codeBlock.jsx
@@ -0,0 +1,27 @@
+'use client';
+
+import CodeBlock from '@/app/components/ui/CodeBlock';
+import CodeExamples from '@/app/visualizer/linkedlist/operations/traversal/data/codeExamples.json';
+
+// ─── Code Examples ─────────────────────────────
+const codeExamples = CodeExamples;
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'linkedListTraversal.js',
+    python:'linked_list_traversal.py',
+    java:'LinkedListTraversal.java',
+    c:'linked_list_traversal.c',
+    cpp:'linked_list_traversal.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const LinkedListTraversalCode = () => (
+    <CodeBlock
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default LinkedListTraversalCode;
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/traversal/content.jsx b/src/app/visualizer/linkedlist/operations/traversal/content.jsx
new file mode 100644
index 000000000..ee4bd50b3
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/traversal/content.jsx
@@ -0,0 +1,261 @@
+const content = () => {
+  const overview = [
+    `Linked List traversal involves visiting each node in the list exactly once, starting from the head and moving through the next pointers until the end is reached.`,
+    `Traversal is essential for operations like searching, displaying, or processing each element of the list. It ensures that all elements are accessed in sequence.`,
+    `Understanding traversal is a foundational step for more advanced linked list algorithms, including deletion, reversal, and cycle detection.`,
+  ];
+
+  const traversalTypes = [
+    {
+      name: "Iterative Traversal",
+      complexity: "O(n)",
+      description: "Uses a loop to traverse from head to end of list",
+      code: `function traverseIterative() {
+  let current = head;
+  while (current) {
+    console.log(current.data);
+    current = current.next;
+  }
+}`
+    },
+    {
+      name: "Recursive Traversal",
+      complexity: "O(n) and O(n) space (due to recursion stack)",
+      description: "Uses recursion to print each node from head to end",
+      code: `function traverseRecursive(node) {
+  if (!node) return;
+  console.log(node.data);
+  traverseRecursive(node.next);
+}`
+    }
+  ];
+
+  const traversalSteps = [
+    { step: "Start from the head node" },
+    { step: "Access the data of the current node" },
+    { step: "Move to the next node using the next pointer" },
+    { step: "Repeat until the current node becomes null" }
+  ];
+
+  const visualization = [
+    { operation: "Initial State", state: "head → [A] → [B] → [C] → null" },
+    { operation: "Traverse", state: "Visited: A → B → C" }
+  ];
+
+  const edgeCases = [
+    "Empty list (head = null)",
+    "Single-node list (head → [A] → null)",
+    "List with cycles (can cause infinite traversal if not handled)",
+    "Recursive traversal stack overflow for large lists"
+  ];
+
+  const bestPractices = [
+    "Always check if the list is empty before traversal",
+    "Avoid infinite loops by checking for cycles",
+    "Use iteration for large lists to prevent stack overflow",
+    "Keep traversal read-only unless modifying the list is necessary",
+    "Separate logic for display and manipulation for better modularity"
+  ];
+
+  const comparisonTable = [
+    {
+      feature: "Time Complexity",
+      array: "O(n)",
+      linkedList: "O(n)"
+    },
+    {
+      feature: "Access Method",
+      array: "Direct via index",
+      linkedList: "Sequential via next pointer"
+    },
+    {
+      feature: "Recursion Friendly",
+      array: "Not typically used recursively",
+      linkedList: "Supports recursive traversal"
+    },
+    {
+      feature: "Loop Detection Required",
+      array: "Not needed",
+      linkedList: "May be necessary in some cases"
+    }
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+        {/* Overview Section */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Traversal
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            {overview.map((para, index) => (
+              <p key={index} className="text-[#374151] dark:text-[#d1d5db] mb-3 leading-relaxed">
+                {para}
+              </p>
+            ))}
+            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                <strong>Key Insight:</strong> Traversal is the basis for all linked list operations—ensure you visit every node, and beware of cycles that can cause infinite loops.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Traversal Types */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Traversal Types</h2>
+          <div className="space-y-6">
+            {traversalTypes.map((type, index) => (
+              <div key={index} className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{type.name}</h3>
+                <div className="flex flex-col md:flex-row gap-4">
+                  <div className="flex-1">
+                    <p className="text-[#374151] dark:text-[#d1d5db] mb-2"><strong>Complexity:</strong> <span className="font-mono">{type.complexity}</span></p>
+                    <p className="text-[#374151] dark:text-[#d1d5db]">{type.description}</p>
+                  </div>
+                  <div className="flex-1">
+                    <pre className="bg-gray-100 dark:bg-gray-800 p-3 rounded-md text-sm overflow-x-auto">
+                      <code className="text-gray-800 dark:text-gray-200">{type.code}</code>
+                    </pre>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Traversal Process */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Traversal Process</h2>
+          <div>
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {traversalSteps.map((step, index) => (
+                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">{step.step}</li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Visualization */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Operation Visualization</h2>
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+              <thead className="bg-gray-50 dark:bg-gray-700">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Operation</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">List State</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                {visualization.map((item, index) => (
+                  <tr key={index}>
+                    <td className="px-4 py-3 text-sm font-mono text-gray-900 dark:text-white">{item.operation}</td>
+                    <td className="px-4 py-3 text-sm font-mono text-[#374151] dark:text-[#d1d5db]">{item.state}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        {/* Edge Cases */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Edge Cases to Consider</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {edgeCases.map((caseItem, index) => (
+              <div key={index} className="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg border border-gray-200 dark:border-gray-600">
+                <div className="flex items-start">
+                  <div className="flex-shrink-0 h-5 w-5 text-yellow-500 mt-0.5">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                      <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                    </svg>
+                  </div>
+                  <div className="ml-3">
+                    <p className="text-sm text-[#374151] dark:text-[#d1d5db]">{caseItem}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Best Practices */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Best Practices</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {bestPractices.map((practice, index) => (
+              <div key={index} className="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg border border-gray-200 dark:border-gray-600">
+                <div className="flex items-start">
+                  <div className="flex-shrink-0 h-5 w-5 text-green-500 mt-0.5">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                    </svg>
+                  </div>
+                  <div className="ml-3">
+                    <p className="text-sm text-[#374151] dark:text-[#d1d5db]">{practice}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Comparison with Arrays */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Comparison with Array Traversal</h2>
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+              <thead className="bg-gray-50 dark:bg-gray-700">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Array</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Linked List</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                {comparisonTable.map((row, index) => (
+                  <tr key={index}>
+                    <td className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{row.feature}</td>
+                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.array}</td>
+                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.linkedList}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              <strong>When to Choose:</strong> Use arrays for indexed, direct access and linked lists for flexible sequential access and recursive algorithms.
+            </p>
+          </div>
+        </section>
+
+        {/* Final Notes */}
+        <section className="p-6">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Implementation Notes</h2>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="list-disc pl-5 space-y-2 marker:text-primary dark:marker:text-[#c27cf7]">
+              <li className="text-[#374151] dark:text-[#d1d5db]">
+                <strong>Cycle Detection:</strong> Be cautious of loops in the list during traversal, consider Floyd’s algorithm for detection
+              </li>
+              <li className="text-[#374151] dark:text-[#d1d5db]">
+                <strong>Logging:</strong> Use console or UI to log visited nodes during visualization
+              </li>
+              <li className="text-[#374151] dark:text-[#d1d5db]">
+                <strong>Testing:</strong> Test traversal on empty, single-node, and multi-node lists
+              </li>
+              <li className="text-[#374151] dark:text-[#d1d5db]">
+                <strong>Efficiency:</strong> For large lists, prefer iteration to avoid stack issues with recursion
+              </li>
+            </ul>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default content;
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/traversal/data/codeExamples.json b/src/app/visualizer/linkedlist/operations/traversal/data/codeExamples.json
new file mode 100644
index 000000000..c4a23ca6a
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/traversal/data/codeExamples.json
@@ -0,0 +1,7 @@
+{
+  "javascript": "class Node {\n  constructor(data){\n    this.data = data;\n    this.next = null;\n  }\n}\nfunction traverse(head) {\n  let current = head;\n  while (current) {\n    console.log(current.data);\n    current = current.next;\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}\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    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>\nstruct Node {\n    int data;\n    struct Node* next;\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}\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    head->data = 1;\n    head->next = second;\n    second->data = 2;\n    second->next = third;\n    third->data = 3;\n    third->next = NULL;\n    traverse(head);\n    return 0;\n}",
+  "cpp": "#include <iostream>\nusing namespace std;\nclass Node {\npublic:\n    int data;\n    Node* next;\n    Node(int data) : data(data), next(nullptr) {}\n};\nvoid traverse(Node* head) {\n    Node* current = head;\n    while (current != nullptr) {\n        cout << current->data << endl;\n        current = current->next;\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    // Free memory\n    Node* temp;\n    while (head != nullptr) {\n        temp = head;\n        head = head->next;\n        delete temp;\n    }\n    return 0;\n}"
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/operations/traversal/quiz.jsx b/src/app/visualizer/linkedlist/operations/traversal/quiz.jsx
new file mode 100644
index 000000000..222637b7e
--- /dev/null
+++ b/src/app/visualizer/linkedlist/operations/traversal/quiz.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const Quiz = () => {
+  const questions = [
+  {
+    "question": "What is the main purpose of linked list traversal?",
+    "options": [
+      "To modify the structure of the list",
+      "To search, display or process each node",
+      "To reverse the list",
+      "To insert nodes efficiently"
+    ],
+    "correctAnswer": 1,
+    "explanation": "Traversal allows visiting each node for operations like searching, displaying, or processing."
+  },
+  {
+    "question": "What is the time complexity of traversing a singly linked list with 'n' nodes?",
+    "options": [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n log n)"
+    ],
+    "correctAnswer": 2,
+    "explanation": "Each of the n nodes is visited once, so the time complexity is O(n)."
+  },
+  {
+    "question": "What happens if a linked list has a cycle and you traverse it without detection?",
+    "options": [
+      "Traversal ends normally",
+      "Compiler throws an error",
+      "Traversal goes into infinite loop",
+      "Nodes are skipped"
+    ],
+    "correctAnswer": 2,
+    "explanation": "A cycle in the list causes infinite traversal unless cycle detection is implemented."
+  },
+  {
+    "question": "Which traversal method uses the call stack and can risk stack overflow?",
+    "options": [
+      "Iterative traversal",
+      "Recursive traversal",
+      "Tail traversal",
+      "Breadth-first traversal"
+    ],
+    "correctAnswer": 1,
+    "explanation": "Recursive traversal uses the call stack and may overflow for large lists."
+  },
+  {
+    "question": "Which pointer is used to move through a singly linked list during traversal?",
+    "options": [
+      "prev",
+      "head",
+      "tail",
+      "current"
+    ],
+    "correctAnswer": 3,
+    "explanation": "A 'current' pointer is typically used to walk through the nodes starting from head."
+  },
+  {
+    "question": "When does a traversal loop stop in a properly structured singly linked list?",
+    "options": [
+      "When current equals head",
+      "When current becomes null",
+      "When current reaches tail",
+      "After n iterations"
+    ],
+    "correctAnswer": 1,
+    "explanation": "Traversal ends when the current pointer reaches null."
+  },
+  {
+    "question": "Which of the following is NOT an edge case in traversal?",
+    "options": [
+      "Empty list",
+      "List with a cycle",
+      "List with one node",
+      "Head insertion"
+    ],
+    "correctAnswer": 3,
+    "explanation": "Head insertion is not a traversal case; it's an insertion case."
+  },
+  {
+    "question": "Why is it recommended to use iteration over recursion for large lists?",
+    "options": [
+      "Recursion is slower",
+      "Iteration uses less memory",
+      "Recursion doesn’t work with linked lists",
+      "Iteration is more readable"
+    ],
+    "correctAnswer": 1,
+    "explanation": "Iteration avoids the overhead of recursive call stacks and prevents stack overflow."
+  },
+  {
+    "question": "What is a key insight for safe traversal?",
+    "options": [
+      "Skip null checks to save time",
+      "Pre-allocate nodes for speed",
+      "Ensure there are no cycles",
+      "Avoid using a current pointer"
+    ],
+    "correctAnswer": 2,
+    "explanation": "Cycle detection (like Floyd’s algorithm) is important to avoid infinite loops."
+  },
+  {
+    "question": "How many times is each node visited during traversal?",
+    "options": [
+      "Only first and last nodes",
+      "Only once",
+      "Depends on data",
+      "Until tail is updated"
+    ],
+    "correctAnswer": 1,
+    "explanation": "Each node is visited once in a standard traversal operation."
+  }
+];
+
+  return <QuizEngine title="Traversal Quiz Challenge" questions={questions} />;
+};
+
+export default Quiz;
diff --git a/src/app/visualizer/linkedlist/types/circular/AlgorithmClient.jsx b/src/app/visualizer/linkedlist/types/circular/AlgorithmClient.jsx
new file mode 100644
index 000000000..8d03b9091
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/circular/AlgorithmClient.jsx
@@ -0,0 +1,30 @@
+import Animation from "@/app/visualizer/linkedlist/types/circular/animation";
+import Content from "@/app/visualizer/linkedlist/types/circular/content";
+import CodeBlock from "@/app/visualizer/linkedlist/types/circular/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Linked List", "Circular Linked List")}
+      title="Circular Linked List"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      exploreOther={
+        <ExploreOther
+          title="Explore Other Types"
+          links={[
+            { text: "Singly Linked List", url: "./singly" },
+            { text: "Doubly Linked List", url: "./doubly" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/linkedlist/types/circular/animation.jsx b/src/app/visualizer/linkedlist/types/circular/animation.jsx
new file mode 100644
index 000000000..8ecdc33a3
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/circular/animation.jsx
@@ -0,0 +1,351 @@
+"use client";
+
+import React, { useState, useRef, useEffect, useMemo } from "react";
+import ResetButton from "@/app/components/ui/resetButton";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import { addNodeGenerator } from "@/features/algorithms/linkedlist/circularLinkedListLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+
+const CircularLinkedListVisualizer = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [list, setList] = useState([]);
+  const [diagramSize, setDiagramSize] = useState({ width: 0, height: 0 });
+  const [pendingOp, setPendingOp] = useState(null); // { type: 'add', value: string }
+  const [nodeIdCounter, setNodeIdCounter] = useState(1);
+  const stageRef = useRef(null);
+
+  const frames = useMemo(() => {
+    if (!pendingOp) return [];
+    if (pendingOp.type === "add") {
+      let nextId = nodeIdCounter;
+      // We pass the starting ID to the generator.
+      return Array.from(addNodeGenerator(list, pendingOp.value, nextId));
+    }
+    return [];
+  }, [list, pendingOp, nodeIdCounter]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 800 });
+
+  const addNode = () => {
+    if (!inputValue || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: "add", value: inputValue });
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setInputValue("");
+    setList([]);
+    setPendingOp(null);
+    setNodeIdCounter(1);
+    engine.reset();
+  };
+
+  useVisualizerReset(handleReset);
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.type === "complete") {
+        setList(finalFrame.list);
+        setNodeIdCounter((prev) => prev + 1);
+      }
+      setPendingOp(null);
+      engine.reset();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  // Auto-commit on completion
+  useEffect(() => {
+    if (
+      engine.currentStep === frames.length - 1 &&
+      frames.length > 0 &&
+      !engine.isPlaying
+    ) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.type === "complete") {
+        setList(finalFrame.list);
+        setNodeIdCounter((prev) => prev + 1);
+        setPendingOp(null);
+        setInputValue("");
+        engine.reset();
+      }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine, pendingOp]);
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  useEffect(() => {
+    const updateDiagramSize = () => {
+      const rect = stageRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      setDiagramSize({ width: rect.width, height: rect.height });
+    };
+
+    const rafId = window.requestAnimationFrame(updateDiagramSize);
+    window.addEventListener("resize", updateDiagramSize);
+
+    return () => {
+      window.cancelAnimationFrame(rafId);
+      window.removeEventListener("resize", updateDiagramSize);
+    };
+  }, [list]);
+
+  const currentFrame =
+    frames.length > 0 && engine.currentStep >= 0
+      ? frames[engine.currentStep]
+      : {
+          type: "idle",
+          list: list,
+          message: 'Enter a value and click "Add Node" to start.',
+        };
+
+  // The generator only yields list at 'complete'. During 'start', use base list.
+  const displayList = currentFrame.list || list;
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize Circular Linked List Operations
+      </p>
+
+      {/* Input Form */}
+      <VisualizerCard className="mb-0">
+        <div className="mb-4">
+          <label className="block text-gray-700 dark:text-gray-300 mb-2 text-sm font-medium">
+            Node Value
+          </label>
+          <input
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+            placeholder="Enter value"
+            disabled={engine.isPlaying || pendingOp !== null}
+            onKeyDown={(e) => e.key === "Enter" && addNode()}
+          />
+        </div>
+        <div className="flex gap-4">
+          <button
+            onClick={addNode}
+            className={`flex-1 py-3 rounded-lg transition-all ${
+              engine.isPlaying || !inputValue || pendingOp !== null
+                ? "bg-gray-300 dark:bg-gray-600 cursor-not-allowed text-gray-500"
+                : "bg-primary hover:bg-primary-dark text-white"
+            }`}
+            disabled={engine.isPlaying || !inputValue || pendingOp !== null}
+          >
+            {engine.isPlaying && pendingOp?.type === "add"
+              ? "Adding Node..."
+              : "Add Node"}
+          </button>
+          <ResetButton onReset={handleReset} isAnimating={engine.isPlaying && pendingOp === null} />
+        </div>
+        
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => {
+                engine.reset();
+              }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      {/* Visualization Area */}
+      <VisualizerCard>
+        <div className="relative max-w-4xl mx-auto">
+          {displayList.length === 0 ? (
+            <div className="text-center py-16 bg-white dark:bg-gray-800 rounded-xl">
+              <div className="inline-block p-6 bg-gray-100 dark:bg-gray-700 rounded-full mb-4">
+                <svg
+                  className="w-12 h-12 text-gray-400 dark:text-gray-500"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="1.5"
+                    d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
+                  ></path>
+                </svg>
+              </div>
+              <h3 className="text-xl font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Empty List
+              </h3>
+              <p className="text-gray-500 dark:text-gray-400">
+                Add nodes to visualize the circular linked list
+              </p>
+            </div>
+          ) : (
+            <div
+              ref={stageRef}
+              className="relative mx-auto"
+              style={{ minHeight: "500px" }}
+            >
+              {/* Circular arrangement of nodes */}
+              <div className="relative mx-auto" style={{ minHeight: "500px" }}>
+                {displayList.length > 1 &&
+                  diagramSize.width > 0 &&
+                  diagramSize.height > 0 && (
+                    <svg
+                      className="pointer-events-none absolute inset-0 h-full w-full overflow-visible"
+                      style={{ zIndex: 0 }}
+                      viewBox={`0 0 ${diagramSize.width} ${diagramSize.height}`}
+                      preserveAspectRatio="none"
+                    >
+                      <defs>
+                        <marker
+                          id="circular-arrowhead"
+                          viewBox="0 0 10 10"
+                          refX="8"
+                          refY="5"
+                          markerWidth="6"
+                          markerHeight="6"
+                          orient="auto"
+                          markerUnits="strokeWidth"
+                        >
+                          <path d="M0,0 L10,5 L0,10 z" fill="#3b82f6" />
+                        </marker>
+                      </defs>
+
+                      {displayList.map((node, index) => {
+                        const step = (Math.PI * 2) / displayList.length;
+                        const startAngle = index * step;
+                        const nextAngle = ((index + 1) % displayList.length) * step;
+                        const adjustedNextAngle =
+                          nextAngle <= startAngle
+                            ? nextAngle + Math.PI * 2
+                            : nextAngle;
+                        const arcRadius =
+                          Math.min(125, 95 + displayList.length * 8) + 72;
+                        const centerX = diagramSize.width / 2;
+                        const centerY = diagramSize.height / 2;
+
+                        const startX = centerX + arcRadius * Math.cos(startAngle);
+                        const startY = centerY + arcRadius * Math.sin(startAngle);
+                        const endX =
+                          centerX + arcRadius * Math.cos(adjustedNextAngle);
+                        const endY =
+                          centerY + arcRadius * Math.sin(adjustedNextAngle);
+                        const largeArcFlag =
+                          adjustedNextAngle - startAngle > Math.PI ? 1 : 0;
+
+                        return (
+                          <path
+                            key={`connection-${node.id}`}
+                            className="connection-arrow"
+                            d={`M ${startX} ${startY} A ${arcRadius} ${arcRadius} 0 ${largeArcFlag} 1 ${endX} ${endY}`}
+                            fill="none"
+                            stroke="#3b82f6"
+                            strokeWidth="2.5"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            markerEnd="url(#circular-arrowhead)"
+                            opacity="0.9"
+                          />
+                        );
+                      })}
+                    </svg>
+                  )}
+
+                {displayList.map((node, index) => {
+                  const angle =
+                    (index * (360 / displayList.length)) * (Math.PI / 180);
+                  const radius = Math.min(125, 95 + displayList.length * 8);
+                  const centerX = 0;
+                  const centerY = 0;
+                  const nodeX = centerX + radius * Math.cos(angle);
+                  const nodeY = centerY + radius * Math.sin(angle);
+
+                  return (
+                    <div
+                      key={node.id}
+                      data-node-id={node.id}
+                      className="absolute transition-all duration-300 z-10"
+                      style={{
+                        left: `calc(50% + ${nodeX}px)`,
+                        top: `calc(50% + ${nodeY}px)`,
+                        transform: "translate(-50%, -50%)",
+                        width: "160px",
+                      }}
+                    >
+                      <div
+                        className={`flex flex-col border-2 ${
+                          index === 0 ? "border-green-500" : "border-blue-500"
+                        } rounded-xl p-4 bg-white dark:bg-gray-700 shadow-md`}
+                      >
+                        <div className="flex justify-between items-center mb-3">
+                          <span className="font-mono text-xs text-gray-600 dark:text-gray-300">
+                            {node.address}
+                          </span>
+                          <span
+                            className={`text-xs px-2 py-1 rounded ${
+                              index === 0
+                                ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+                                : "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
+                            }`}
+                          >
+                            {index === 0 ? "HEAD" : `Node ${index}`}
+                          </span>
+                        </div>
+                        <div className="grid grid-cols-2 gap-3 mb-2">
+                          <div className="bg-gray-50 dark:bg-gray-600 p-2 rounded">
+                            <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">
+                              Data
+                            </div>
+                            <div className="font-bold text-center text-lg">
+                              {node.value}
+                            </div>
+                          </div>
+                          <div className="bg-gray-50 dark:bg-gray-600 p-2 rounded">
+                            <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">
+                              Next
+                            </div>
+                            <div className="font-mono text-xs text-center truncate">
+                              {node.next === node.address ? "self" : node.next}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default CircularLinkedListVisualizer;
diff --git a/src/app/visualizer/linkedlist/types/circular/codeBlock.jsx b/src/app/visualizer/linkedlist/types/circular/codeBlock.jsx
new file mode 100644
index 000000000..5372bef45
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/circular/codeBlock.jsx
@@ -0,0 +1,159 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for Circular Linked List ─────────────────────
+const codeExamples = {
+  javascript: `// Circular Linked List Implementation in JavaScript
+class Node {
+  constructor(data) {
+    this.data = data;
+    this.next = null;
+  }
+}
+class CircularLinkedList {
+  constructor() {
+    this.head = null;
+    this.tail = null;
+    this.size = 0;
+  }
+  insertFirst(data) {
+    const newNode = new Node(data);
+    if (!this.head) {
+      this.head = newNode;
+      this.tail = newNode;
+      newNode.next = this.head;
+    } else {
+      newNode.next = this.head;
+      this.head = newNode;
+      this.tail.next = this.head;
+    }
+    this.size++;
+  }
+  insertLast(data) {
+    const newNode = new Node(data);
+    if (!this.head) {
+      this.head = newNode;
+      this.tail = newNode;
+      newNode.next = this.head;
+    } else {
+      this.tail.next = newNode;
+      newNode.next = this.head;
+      this.tail = newNode;
+    }
+    this.size++;
+  }
+  removeFirst() {
+    if (!this.head) return null;
+    const removedNode = this.head;
+    if (this.size === 1) {
+      this.head = null;
+      this.tail = null;
+    } else {
+      this.head = this.head.next;
+      this.tail.next = this.head;
+    }
+    this.size--;
+    return removedNode.data;
+  }
+}`,
+
+  python: `# Circular Linked List Implementation
+class Node:
+    def __init__(self, data):
+        self.data=data
+        self.next=None
+class CircularLinkedList:
+    def __init__(self):
+        self.head=None
+        self.tail=None
+        self.size=0
+    def insert_first(self, data):
+        new_node=Node(data)
+        if not self.head:
+            self.head=new_node
+            self.tail=new_node
+            new_node.next=self.head
+        else:
+            new_node.next=self.head
+            self.head=new_node
+            self.tail.next=self.head
+        self.size+=1`,
+  java: `// Circular Linked List Implementation
+public class CircularLinkedList{
+    class Node{
+        int data;
+        Node next;
+        Node(int data){
+            this.data=data;
+            this.next=null;
+        }
+    }
+    private Node head;
+    private Node tail;
+    private int size;
+    public CircularLinkedList(){
+        head=null;
+        tail=null;
+        size=0;
+    }
+}`,
+
+  c: `// Circular Linked List Implementation
+#include<stdio.h>
+#include<stdlib.h>
+typedef struct Node{
+    int data;
+    struct Node* next;
+}Node;
+typedef struct{
+    Node* head;
+    Node* tail;
+    int size;
+}CircularLinkedList;`,
+
+  cpp: `// Circular Linked List Implementation
+#include<iostream>
+using namespace std;
+class Node{
+public:
+    int data;
+    Node* next;
+    Node(int value){
+        data=value;
+        next=nullptr;
+    }
+};
+class CircularLinkedList{
+private:
+    Node* head;
+    Node* tail;
+    int size;
+public:
+    CircularLinkedList(){
+        head=nullptr;
+        tail=nullptr;
+        size=0;
+    }
+};`
+};
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'circularLinkedList.js',
+    python:'circular_queue.py',
+    java:'CircularLinkedList.java',
+    c:'circular_linked_list.c',
+    cpp:'circular_linked_list.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const CircularLinkedListCode = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default CircularLinkedListCode;
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/types/circular/content.jsx b/src/app/visualizer/linkedlist/types/circular/content.jsx
new file mode 100644
index 000000000..3e9a3e194
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/circular/content.jsx
@@ -0,0 +1,298 @@
+const content = () => {
+  const overview = [
+    `A Circular Linked List is a variation of a linked list where the last node points back to the first node instead of containing a null reference. This creates a circular structure that can be traversed indefinitely.`,
+    `Circular linked lists can be either singly linked (each node has one pointer) or doubly linked (each node has two pointers). The circular nature enables continuous traversal and is particularly useful in round-robin scheduling and buffer implementations.`,
+    `The main advantage of circular linked lists is that any node can be a starting point, and the entire list can be traversed from any node. This makes them ideal for applications that require cyclic processing.`,
+  ];
+
+  const basicOperations = [
+    { name: "Insertion at Head", complexity: "O(1)", description: "Add new node at beginning, point last node to new head" },
+    { name: "Insertion at Tail", complexity: "O(1)", description: "Add new node at end, point it to head (with tail pointer)" },
+    { name: "Deletion at Head", complexity: "O(1)", description: "Remove first node, update last node's pointer" },
+    { name: "Deletion by Value", complexity: "O(n)", description: "Traverse list to find and remove specific node" },
+    { name: "Traversal", complexity: "O(n)", description: "Loop through nodes until returning to starting point" },
+    { name: "Search", complexity: "O(n)", description: "Traverse list to find element" },
+  ];
+
+  const insertionSteps = [
+    { step: "1. Create new node with data" },
+    { step: "2. If list is empty, set head and tail to new node" },
+    { step: "3. Make new node point to itself (circular reference)" },
+    { step: "4. For non-empty list, set new node's next to current head" },
+    { step: "5. Update tail's next pointer to new node" },
+    { step: "6. Move head pointer to new node" },
+  ];
+
+  const deletionSteps = [
+    { step: "1. Check if list is empty" },
+    { step: "2. If single node exists, set head and tail to null" },
+    { step: "3. For head deletion, update head to head.next" },
+    { step: "4. Update tail's next pointer to new head" },
+    { step: "5. For middle deletion, find node and update previous node's pointer" },
+    { step: "6. Handle special case when deleting last node" },
+  ];
+
+  const prosCons = [
+    { point: "Continuous traversal from any node", type: "pro" },
+    { point: "Efficient round-robin scheduling", type: "pro" },
+    { point: "No need for null checks during traversal", type: "pro" },
+    { point: "Useful for circular buffer implementations", type: "pro" },
+    { point: "Risk of infinite loops if not handled carefully", type: "con" },
+    { point: "Slightly more complex implementation", type: "con" },
+    { point: "Harder to detect list boundaries", type: "con" },
+  ];
+
+  const visualization = [
+    { operation: "Initialization", state: "head → null" },
+    { operation: "insertFirst(10)", state: "head → [10] → (points back to head)" },
+    { operation: "insertFirst(20)", state: "head → [20] → [10] → (points back to head)" },
+    { operation: "insertFirst(30)", state: "head → [30] → [20] → [10] → (points back to head)" },
+    { operation: "deleteFirst()", state: "head → [20] → [10] → (points back to head)" },
+    { operation: "delete(10)", state: "head → [20] → (points back to itself)" },
+  ];
+
+  const applications = [
+    "Operating system round-robin scheduling",
+    "Multiplayer turn-based games",
+    "Music/video playlists with repeat functionality",
+    "Resource allocation in networking",
+    "Circular buffer implementations",
+    "Token ring networks",
+  ];
+
+  const comparisonTable = [
+    { feature: "Structure", linear: "Linear with null termination", circular: "Circular with no null" },
+    { feature: "Traversal", linear: "Stops at end", circular: "Continuous loop" },
+    { feature: "Memory Overhead", linear: "Standard", circular: "Same as linear" },
+    { feature: "Boundary Detection", linear: "Easy (null check)", circular: "Requires start reference" },
+    { feature: "Insert/Delete at Head", linear: "O(1)", circular: "O(1)" },
+    { feature: "Implementation Complexity", linear: "Simpler", circular: "More complex" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+        {/* Overview Section */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Circular Linked List
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            {overview.map((para, index) => (
+              <p key={index} className="text-[#374151] dark:text-[#d1d5db] mb-3 leading-relaxed">
+                {para}
+              </p>
+            ))}
+            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                <strong>Key Property:</strong> The last node&apos;s next pointer always points back to the first node, creating a continuous loop.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Basic Operations */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Basic Operations</h2>
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+              <thead className="bg-gray-50 dark:bg-gray-700">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Operation</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Complexity</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Description</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                {basicOperations.map((op, index) => (
+                  <tr key={index}>
+                    <td className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{op.name}</td>
+                    <td className="px-4 py-3 text-sm font-mono text-[#374151] dark:text-[#d1d5db]">{op.complexity}</td>
+                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{op.description}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        {/* Insertion Process */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Insertion Process</h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                {insertionSteps.map((step, index) => (
+                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                    {step.step}
+                  </li>
+                ))}
+              </ol>
+            </div>
+            <div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
+              <div className="flex flex-col items-center space-y-4">
+                <div className="relative">
+                  <div className="w-64 h-32 rounded-full border-2 border-primary/80 flex items-center justify-center">
+                    <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">head</div>
+                    <div className="absolute top-1/2 left-1/4 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[A]</div>
+                    <div className="absolute top-1/2 right-1/4 transform translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[B]</div>
+                  </div>
+                  <div className="text-center mt-4 text-gray-600 dark:text-gray-300">Existing circular list</div>
+                </div>
+                <div className="text-center text-gray-600 dark:text-gray-300">↓ Insert X at head ↓</div>
+                <div className="relative">
+                  <div className="w-64 h-32 rounded-full border-2 border-primary/80 flex items-center justify-center">
+                    <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">head</div>
+                    <div className="absolute top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[X]</div>
+                    <div className="absolute top-3/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[A]</div>
+                    <div className="absolute top-3/4 right-1/4 transform translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[B]</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Deletion Process */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Deletion Process</h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                {deletionSteps.map((step, index) => (
+                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                    {step.step}
+                  </li>
+                ))}
+              </ol>
+            </div>
+            <div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
+              <div className="flex flex-col items-center space-y-4">
+                <div className="relative">
+                  <div className="w-64 h-32 rounded-full border-2 border-primary/80 flex items-center justify-center">
+                    <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">head</div>
+                    <div className="absolute top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[X]</div>
+                    <div className="absolute top-3/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[A]</div>
+                    <div className="absolute top-3/4 right-1/4 transform translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[B]</div>
+                  </div>
+                  <div className="text-center mt-4 text-gray-600 dark:text-gray-300">Current circular list</div>
+                </div>
+                <div className="text-center text-gray-600 dark:text-gray-300">↓ Delete X (head) ↓</div>
+                <div className="relative">
+                  <div className="w-64 h-32 rounded-full border-2 border-primary/80 flex items-center justify-center">
+                    <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">head</div>
+                    <div className="absolute top-1/2 left-1/4 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[A]</div>
+                    <div className="absolute top-1/2 right-1/4 transform translate-x-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">[B]</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Visualization */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Operation Visualization</h2>
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+              <thead className="bg-gray-50 dark:bg-gray-700">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Operation</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">List State</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                {visualization.map((item, index) => (
+                  <tr key={index}>
+                    <td className="px-4 py-3 text-sm font-mono text-gray-900 dark:text-white">{item.operation}</td>
+                    <td className="px-4 py-3 text-sm font-mono text-[#374151] dark:text-[#d1d5db]">{item.state}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        {/* Comparison with Linear Linked List */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Comparison with Linear Linked List</h2>
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+              <thead className="bg-gray-50 dark:bg-gray-700">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Linear Linked List</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Circular Linked List</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                {comparisonTable.map((row, index) => (
+                  <tr key={index}>
+                    <td className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{row.feature}</td>
+                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.linear}</td>
+                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.circular}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        {/* Pros and Cons */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Pros and Cons</h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="text-lg font-semibold text-green-600 dark:text-green-400 mb-3">Advantages</h3>
+              <ul className="space-y-2">
+                {prosCons.filter(item => item.type === "pro").map((item, index) => (
+                  <li key={index} className="flex items-start">
+                    <svg className="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                    <span className="text-[#374151] dark:text-[#d1d5db]">{item.point}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-red-600 dark:text-red-400 mb-3">Limitations</h3>
+              <ul className="space-y-2">
+                {prosCons.filter(item => item.type === "con").map((item, index) => (
+                  <li key={index} className="flex items-start">
+                    <svg className="h-5 w-5 text-red-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                    <span className="text-[#374151] dark:text-[#d1d5db]">{item.point}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        {/* Applications */}
+        <section className="p-6">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Applications</h2>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="grid grid-cols-1 md:grid-cols-2 gap-2 list-disc pl-5 marker:text-primary dark:marker:text-[#c27cf7]">
+              {applications.map((app, index) => (
+                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                  {app}
+                </li>
+              ))}
+            </ul>
+            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                <strong>When to Choose:</strong> Prefer circular linked lists when you need continuous cycling through elements or when the application naturally follows a circular pattern (like round-robin scheduling).
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default content;
diff --git a/src/app/visualizer/linkedlist/types/circular/quiz.jsx b/src/app/visualizer/linkedlist/types/circular/quiz.jsx
new file mode 100644
index 000000000..d799ff055
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/circular/quiz.jsx
@@ -0,0 +1,144 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const Quiz = () => {
+  const questions = [
+        {
+        question: "What is the defining characteristic of a circular linked list?",
+        options: [
+            "The first node points to null",
+            "The last node points back to the first node",
+            "It uses doubly linked nodes",
+            "It cannot be traversed"
+        ],
+        correctAnswer: 1,
+        explanation: "In a circular linked list, the last node's next pointer points back to the first node, creating a loop."
+    },
+    {
+        question: "What is the time complexity of inserting a node at the head of a circular linked list?",
+        options: [
+            "O(1)",
+            "O(n)",
+            "O(log n)",
+            "O(n²)"
+        ],
+        correctAnswer: 0,
+        explanation: "Insertion at head is O(1) as it only requires updating a couple of pointers regardless of list size."
+    },
+    {
+        question: "In a circular singly linked list with 3 nodes (A→B→C→A), what does node C's next pointer point to?",
+        options: [
+            "null",
+            "Node A",
+            "Node B",
+            "Node C"
+        ],
+        correctAnswer: 1,
+        explanation: "In a circular list, the last node (C) points back to the first node (A)."
+    },
+    {
+        question: "Which of these is NOT a common application of circular linked lists?",
+        options: [
+            "Round-robin scheduling",
+            "Circular buffers",
+            "Random access databases",
+            "Turn-based game systems"
+        ],
+        correctAnswer: 2,
+        explanation: "Circular linked lists don't support efficient random access, making them unsuitable for most database implementations."
+    },
+    {
+        question: "How do you detect the end of a traversal in a circular linked list?",
+        options: [
+            "Check for a null pointer",
+            "Check if you've returned to the starting node",
+            "Count the number of nodes in advance",
+            "You can't detect the end"
+        ],
+        correctAnswer: 1,
+        explanation: "You know you've completed traversal when you return to your starting node, since there are no null pointers."
+    },
+    {
+        question: "What is one advantage of circular linked lists over linear linked lists?",
+        options: [
+            "Lower memory usage",
+            "Ability to traverse the entire list from any node",
+            "Faster random access",
+            "Simpler implementation"
+        ],
+        correctAnswer: 1,
+        explanation: "Any node can serve as a starting point for full traversal, which is useful in many applications."
+    },
+    {
+        question: "What special case must be handled when deleting the last node in a circular linked list?",
+        options: [
+            "Updating the head pointer to null",
+            "No special case needed",
+            "Setting the deleted node's pointers to null",
+            "Rebalancing the list"
+        ],
+        correctAnswer: 0,
+        explanation: "When deleting the last node, you must set the head pointer to null as the list becomes empty."
+    },
+    {
+        question: "In a circular doubly linked list, what additional property exists compared to a circular singly linked list?",
+        options: [
+            "Each node has a previous pointer",
+            "The list cannot be traversed backwards",
+            "It uses less memory",
+            "It must have even number of nodes"
+        ],
+        correctAnswer: 0,
+        explanation: "Circular doubly linked lists have both next and previous pointers, enabling bidirectional traversal."
+    },
+    {
+        question: "What is the main risk when working with circular linked lists?",
+        options: [
+            "Memory leaks",
+            "Infinite loops during traversal",
+            "Fixed size limitation",
+            "Slow insertion operations"
+        ],
+        correctAnswer: 1,
+        explanation: "Without proper termination conditions, traversals can become infinite loops since there's no null terminator."
+    },
+    {
+        question: "Which operation has the same time complexity in both linear and circular linked lists?",
+        options: [
+            "Searching for a value",
+            "Insertion at tail without tail pointer",
+            "Deletion at head",
+            "All of the above"
+        ],
+        correctAnswer: 3,
+        explanation: "All these operations have identical time complexities in both linear and circular implementations."
+    },
+    {
+        question: "In a circular linked list implementation of a music playlist, what feature does this structure naturally support?",
+        options: [
+            "Random song selection",
+            "Continuous looping playback",
+            "Sorting songs by length",
+            "Parallel playback"
+        ],
+        correctAnswer: 1,
+        explanation: "The circular nature perfectly supports continuous, looping playback of the playlist."
+    },
+    {
+        question: "What is the space complexity of a circular linked list?",
+        options: [
+            "O(1)",
+            "O(n)",
+            "O(log n)",
+            "O(n²)"
+        ],
+        correctAnswer: 1,
+        explanation: "Like other linked lists, space complexity is O(n) as it grows linearly with the number of elements."
+    }
+];
+
+  return <QuizEngine title="Linked List Quiz Challenge" questions={questions} />;
+};
+
+export default Quiz;
diff --git a/src/app/visualizer/linkedlist/types/doubly/AlgorithmClient.jsx b/src/app/visualizer/linkedlist/types/doubly/AlgorithmClient.jsx
new file mode 100644
index 000000000..c4b996fcb
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/doubly/AlgorithmClient.jsx
@@ -0,0 +1,30 @@
+import Animation from "@/app/visualizer/linkedlist/types/doubly/animation";
+import Content from "@/app/visualizer/linkedlist/types/doubly/content";
+import CodeBlock from "@/app/visualizer/linkedlist/types/doubly/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Linked List", "Doubly Linked List")}
+      title="Doubly Linked List"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      exploreOther={
+        <ExploreOther
+          title="Explore Other Types"
+          links={[
+            { text: "Singly Linked List", url: "./singly" },
+            { text: "Circular Linked List", url: "./circular" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/linkedlist/types/doubly/animation.jsx b/src/app/visualizer/linkedlist/types/doubly/animation.jsx
new file mode 100644
index 000000000..f5c3a9c7b
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/doubly/animation.jsx
@@ -0,0 +1,376 @@
+"use client";
+
+import React, { useState, useMemo, useEffect } from "react";
+import ResetButton from "@/app/components/ui/resetButton";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { insertDoublyGenerator } from "@/features/algorithms/linkedlist/doublyLinkedListLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+const DoublyLinkedListVisualizer = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [list, setList] = useState([]);
+  const [pendingOp, setPendingOp] = useState(null); // { type: 'add', value: string }
+  const [nodeIdCounter, setNodeIdCounter] = useState(1);
+
+  const frames = useMemo(() => {
+    if (!pendingOp) return [];
+    if (pendingOp.type === "add") {
+      let nextId = nodeIdCounter;
+      return Array.from(insertDoublyGenerator(list, pendingOp.value, () => nextId++));
+    }
+    return [];
+  }, [list, pendingOp, nodeIdCounter]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 800 });
+
+  const PointerBridge = ({ direction, label, color, reversed = false }) => {
+    const laneClass =
+      direction === "next"
+        ? "text-blue-600 dark:text-blue-400"
+        : "text-purple-600 dark:text-purple-400";
+
+    const markerId = `${direction}-bridge-arrow`;
+
+    return (
+      <div className={`flex flex-col items-center justify-center ${laneClass}`}>
+        <svg viewBox="0 0 40 72" className="h-16 w-10 overflow-visible">
+          <defs>
+            <marker
+              id={markerId}
+              viewBox="0 0 10 10"
+              refX="8"
+              refY="5"
+              markerWidth="6"
+              markerHeight="6"
+              orient="auto"
+              markerUnits="strokeWidth"
+            >
+              <path d="M0,0 L10,5 L0,10 z" fill={color} />
+            </marker>
+          </defs>
+          <path
+            d={reversed ? "M 20 66 V 12" : "M 20 6 V 60"}
+            fill="none"
+            stroke={color}
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            markerEnd={`url(#${markerId})`}
+          />
+        </svg>
+        <span className="-mt-1 text-[11px] font-semibold tracking-wide uppercase">
+          {label}
+        </span>
+      </div>
+    );
+  };
+
+  const addNode = () => {
+    if (!inputValue || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: "add", value: inputValue });
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setInputValue("");
+    setList([]);
+    setPendingOp(null);
+    setNodeIdCounter(1);
+    engine.reset();
+  };
+
+  useVisualizerReset(handleReset);
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.type === "complete") {
+        setList(finalFrame.list);
+        setNodeIdCounter((prev) => prev + 1);
+      }
+      setPendingOp(null);
+      engine.reset();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  // Auto-commit on completion
+  useEffect(() => {
+    if (
+      engine.currentStep === frames.length - 1 &&
+      frames.length > 0 &&
+      !engine.isPlaying
+    ) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.type === "complete") {
+        setList(finalFrame.list);
+        setNodeIdCounter((prev) => prev + 1);
+        setPendingOp(null);
+        setInputValue("");
+        engine.reset();
+      }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine, pendingOp]);
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame =
+    frames.length > 0 && engine.currentStep >= 0
+      ? frames[engine.currentStep]
+      : {
+          type: "idle",
+          list: list,
+          message: 'Enter a value and click "Add Node" to start.',
+        };
+
+  // The generator only yields list at 'complete'. During 'start', use base list.
+  const displayList = currentFrame.list || list;
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize Doubly Linked List Operations
+      </p>
+
+      {/* Input Form */}
+      <VisualizerCard className="mb-0">
+        <div className="mb-3">
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            Node Value
+          </label>
+          <div className="relative">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              className="w-full p-2 text-sm rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
+              placeholder="Enter value"
+              disabled={engine.isPlaying || pendingOp !== null}
+              onKeyDown={(e) => e.key === "Enter" && addNode()}
+            />
+            {inputValue && (
+              <button
+                onClick={() => setInputValue("")}
+                className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-4 w-4"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="flex flex-col gap-4 sm:flex-row">
+          <button
+            onClick={addNode}
+            disabled={engine.isPlaying || !inputValue || pendingOp !== null}
+            className={`w-full rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-3 text-white transition hover:from-blue-600 hover:to-blue-700 disabled:opacity-50 sm:w-auto ${
+              engine.isPlaying ? "cursor-not-allowed" : ""
+            }`}
+          >
+            {engine.isPlaying && pendingOp?.type === "add"
+              ? "Adding Node..."
+              : "Add Node"}
+          </button>
+          <ResetButton onReset={handleReset} isAnimating={engine.isPlaying && pendingOp === null} />
+        </div>
+        
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => {
+                engine.reset();
+              }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      {/* Linked List Visualization */}
+      <VisualizerCard>
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 text-center flex items-center justify-center gap-2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-5 w-5 text-primary"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+          Doubly Linked List Representation
+        </h2>
+
+        <div className="mb-3 flex flex-wrap items-center justify-center gap-4 text-xs font-medium">
+          <div className="flex items-center gap-2 text-primary dark:text-[#c27cf7]">
+            <span className="h-2.5 w-6 rounded-full bg-primary" />
+            <span>next pointer</span>
+          </div>
+          <div className="flex items-center gap-2 text-purple-600 dark:text-purple-400">
+            <span className="h-2.5 w-6 rounded-full bg-purple-500" />
+            <span>prev pointer</span>
+          </div>
+        </div>
+
+        {displayList.length === 0 ? (
+          <div className="text-center py-6 rounded-md bg-gray-50 dark:bg-gray-700/50 border border-dashed border-gray-300 dark:border-gray-600">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-10 w-10 mx-auto text-gray-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"
+              />
+            </svg>
+            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+              No nodes in the list yet. Add your first node!
+            </p>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center gap-1">
+            {displayList.map((node, index) => (
+              <React.Fragment key={node.id}>
+                <div className="w-full max-w-xs relative group z-10">
+                  <div
+                    className={`relative flex flex-col rounded-lg p-3 bg-white dark:bg-gray-700 border ${
+                      index === 0 ? "border-green-500" : "border-primary"
+                    } shadow-sm transition-all duration-200 overflow-hidden`}
+                  >
+                    <div className="flex justify-between items-center mb-2">
+                      <span className="font-mono text-xs text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">
+                        {node.address}
+                      </span>
+                      <span
+                        className={`text-xs px-1.5 py-0.5 rounded ${
+                          index === 0
+                            ? "bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200"
+                            : "bg-blue-100 dark:bg-blue-900/50 text-primary-dark dark:text-blue-200"
+                        }`}
+                      >
+                        {index === 0
+                          ? "HEAD"
+                          : index === displayList.length - 1
+                          ? "TAIL"
+                          : `Node ${index}`}
+                      </span>
+                    </div>
+
+                    <div className="grid grid-cols-3 gap-2 mb-1">
+                      <div
+                        data-port="prev"
+                        className="border-r border-gray-200 dark:border-gray-600 pr-2 relative z-10"
+                      >
+                        <div className="text-xs text-gray-500 dark:text-gray-400">
+                          Prev
+                        </div>
+                        <div className="font-mono text-xs">
+                          {node.prev || (
+                            <span className="text-red-500">NULL</span>
+                          )}
+                        </div>
+                      </div>
+
+                      <div className="border-r border-gray-200 dark:border-gray-600 pr-2">
+                        <div className="text-xs text-gray-500 dark:text-gray-400">
+                          Data
+                        </div>
+                        <div className="font-medium text-sm truncate">
+                          {node.value}
+                        </div>
+                      </div>
+
+                      <div data-port="next" className="relative z-10">
+                        <div className="text-xs text-gray-500 dark:text-gray-400">
+                          Next
+                        </div>
+                        <div className="font-mono text-xs">
+                          {node.next || (
+                            <span className="text-red-500">NULL</span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                {index < displayList.length - 1 && (
+                  <div className="w-full max-w-xs py-2">
+                    <div className="rounded-2xl border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3 dark:border-gray-600 dark:bg-gray-700/30">
+                      <div className="mb-2 flex items-center justify-center gap-3 text-xs font-medium text-gray-500 dark:text-gray-400">
+                        <span>
+                          node {index} to node {index + 1}
+                        </span>
+                      </div>
+                      <div className="flex items-center justify-between gap-2">
+                        <PointerBridge
+                          direction="next"
+                          label="next"
+                          color="#3b82f6"
+                        />
+                        <div className="flex-1 px-1">
+                          <div className="h-px w-full bg-gradient-to-r from-transparent via-gray-300 to-transparent dark:via-gray-600" />
+                        </div>
+                        <PointerBridge
+                          direction="prev"
+                          label="prev"
+                          color="#a855f7"
+                          reversed
+                        />
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </React.Fragment>
+            ))}
+          </div>
+        )}
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default DoublyLinkedListVisualizer;
diff --git a/src/app/visualizer/linkedlist/types/doubly/codeBlock.jsx b/src/app/visualizer/linkedlist/types/doubly/codeBlock.jsx
new file mode 100644
index 000000000..c7a47931c
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/doubly/codeBlock.jsx
@@ -0,0 +1,144 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+// ─── Code Examples ─────────────────────────────
+const codeExamples = {
+  javascript: `// Doubly Linked List Implementation in JavaScript
+class Node {
+  constructor(data) {
+    this.data=data;
+    this.next=null;
+    this.prev=null;
+  }
+}
+class DoublyLinkedList {
+  constructor() {
+    this.head=null;
+    this.tail=null;
+    this.size=0;
+  }
+  insertFirst(data){
+    const newNode=new Node(data);
+    if(!this.head){
+      this.head=newNode;
+      this.tail=newNode;
+    }else{
+      newNode.next=this.head;
+      this.head.prev=newNode;
+      this.head=newNode;
+    }
+    this.size++;
+  }
+  insertLast(data){
+    const newNode=new Node(data);
+    if(!this.head){
+      this.head=newNode;
+      this.tail=newNode;
+    }else{
+      newNode.prev=this.tail;
+      this.tail.next=newNode;
+      this.tail=newNode;
+    }
+    this.size++;
+  }
+}`,
+
+  python: `# Doubly Linked List
+class Node:
+    def __init__(self, data):
+        self.data=data
+        self.next=None
+        self.prev=None
+class DoublyLinkedList:
+    def __init__(self):
+        self.head=None
+        self.tail=None
+        self.size=0
+    def insert_first(self, data):
+        new_node=Node(data)
+        if not self.head:
+            self.head=new_node
+            self.tail=new_node
+        else:
+            new_node.next=self.head
+            self.head.prev=new_node
+            self.head=new_node
+        self.size+=1`,
+  java: `// Doubly Linked List
+public class DoublyLinkedList{
+    class Node{
+        int data;
+        Node next;
+        Node prev;
+        Node(int data){
+            this.data=data;
+        }
+    }
+    private Node head;
+    private Node tail;
+    public DoublyLinkedList(){
+        head=null;
+        tail=null;
+    }
+}`,
+
+  c: `// Doubly Linked List
+#include<stdio.h>
+#include<stdlib.h>
+typedef struct Node{
+    int data;
+    struct Node* next;
+    struct Node* prev;
+}Node;
+typedef struct{
+    Node* head;
+    Node* tail;
+    int size;
+}DoublyLinkedList;`,
+
+  cpp: `// Doubly Linked List
+#include<iostream>
+using namespace std;
+class Node{
+public:
+    int data;
+    Node* next;
+    Node* prev;
+    Node(int data){
+        this->data=data;
+        next=nullptr;
+        prev=nullptr;
+    }
+};
+class DoublyLinkedList{
+private:
+    Node* head;
+    Node* tail;
+public:
+    DoublyLinkedList(){
+        head=nullptr;
+        tail=nullptr;
+    }
+};`
+};
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'doublyLinkedList.js',
+    python:'doubly_linked_list.py',
+    java:'DoublyLinkedList.java',
+    c:'doubly_linked_list.c',
+    cpp:'doubly_linked_list.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const DoublyLinkedListCode = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default DoublyLinkedListCode;
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/types/doubly/content.jsx b/src/app/visualizer/linkedlist/types/doubly/content.jsx
new file mode 100644
index 000000000..69281911d
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/doubly/content.jsx
@@ -0,0 +1,337 @@
+const content = () => {
+  const overview = [
+    `A Doubly Linked List is an advanced variation of the linked list where each node contains data and two pointers - one to the next node and another to the previous node. This bidirectional linkage enables traversal in both directions.`,
+    `The list maintains head and tail pointers, allowing O(1) operations at both ends. Each node's previous pointer forms the backward chain, while the next pointer forms the forward chain.`,
+    `Doubly linked lists are particularly useful when you need frequent backward traversal or operations at both ends of the list, providing more flexibility than singly linked lists at the cost of slightly higher memory overhead.`,
+  ];
+
+  const basicOperations = [
+    { name: "Insertion at Head", complexity: "O(1)", description: "Add new node at beginning, update head and adjacent node's pointers" },
+    { name: "Insertion at Tail", complexity: "O(1)", description: "Add new node at end using tail pointer" },
+    { name: "Insertion at Position", complexity: "O(n)", description: "Traverse to position and insert with pointer updates" },
+    { name: "Deletion at Head", complexity: "O(1)", description: "Remove first node and update head pointer" },
+    { name: "Deletion at Tail", complexity: "O(1)", description: "Remove last node using tail pointer" },
+    { name: "Deletion by Value", complexity: "O(n)", description: "Traverse to find node and update adjacent pointers" },
+    { name: "Forward Traversal", complexity: "O(n)", description: "Traverse from head to tail using next pointers" },
+    { name: "Backward Traversal", complexity: "O(n)", description: "Traverse from tail to head using prev pointers" },
+  ];
+
+  const implementationCode = [
+    { code: "class DoublyNode {" },
+    { code: "  constructor(data) {" },
+    { code: "    this.data = data;" },
+    { code: "    this.prev = null;" },
+    { code: "    this.next = null;" },
+    { code: "  }" },
+    { code: "}" },
+    { code: "" },
+    { code: "class DoublyLinkedList {" },
+    { code: "  constructor() {" },
+    { code: "    this.head = null;" },
+    { code: "    this.tail = null;" },
+    { code: "    this.size = 0;" },
+    { code: "  }" },
+    { code: "" },
+    { code: "  isEmpty() {" },
+    { code: "    return this.head === null;" },
+    { code: "  }" },
+    { code: "" },
+    { code: "  // Insert at head" },
+    { code: "  insertFirst(data) {" },
+    { code: "    const newNode = new DoublyNode(data);" },
+    { code: "    if (this.isEmpty()) {" },
+    { code: "      this.head = newNode;" },
+    { code: "      this.tail = newNode;" },
+    { code: "    } else {" },
+    { code: "      newNode.next = this.head;" },
+    { code: "      this.head.prev = newNode;" },
+    { code: "      this.head = newNode;" },
+    { code: "    }" },
+    { code: "    this.size++;" },
+    { code: "  }" },
+  ];
+
+  const insertionSteps = [
+    { step: "1. Create new node with data, prev, and next pointers" },
+    { step: "2. For head insertion: Set new node's next to current head" },
+    { step: "3. Update current head's prev to new node" },
+    { step: "4. Move head pointer to new node" },
+    { step: "5. For empty list, set both head and tail to new node" },
+    { step: "6. For tail insertion: Similar steps but working from tail" },
+  ];
+
+  const deletionSteps = [
+    { step: "1. Check if list is empty" },
+    { step: "2. For head deletion: Store head reference, move head to head.next" },
+    { step: "3. Set new head's prev to null (if exists)" },
+    { step: "4. For tail deletion: Similar steps working from tail" },
+    { step: "5. For middle deletion: Find node, update adjacent nodes' pointers" },
+    { step: "6. Handle special cases (single node removal)" },
+  ];
+
+  const prosCons = [
+    { point: "Bidirectional traversal capability", type: "pro" },
+    { point: "O(1) operations at both ends", type: "pro" },
+    { point: "Easier node removal (no need to track previous node)", type: "pro" },
+    { point: "Better for certain algorithms (e.g., LRU cache)", type: "pro" },
+    { point: "Extra memory for prev pointers", type: "con" },
+    { point: "More pointer operations (slightly complex implementation)", type: "con" },
+    { point: "Slightly slower operations due to extra pointer updates", type: "con" },
+  ];
+
+  const visualization = [
+    { operation: "Initialization", state: "head → null ← tail" },
+    { operation: "insertFirst(10)", state: "head → [null|10|•] ← tail" },
+    { operation: "insertFirst(20)", state: "head → [null|20|•] ↔ [•|10|•] ← tail" },
+    { operation: "insertLast(30)", state: "head → [null|20|•] ↔ [•|10|•] ↔ [•|30|null] ← tail" },
+    { operation: "deleteFirst()", state: "head → [null|10|•] ↔ [•|30|null] ← tail" },
+    { operation: "deleteLast()", state: "head → [null|10|null] ← tail" },
+  ];
+
+  const applications = [
+    "Browser forward/backward navigation",
+    "Undo/Redo functionality in software",
+    "LRU (Least Recently Used) cache implementation",
+    "Navigation systems with bidirectional movement",
+    "Music/video playlists with forward/backward controls",
+    "Text editors with cursor movement in both directions",
+  ];
+
+  const comparisonTable = [
+    { feature: "Traversal Direction", singly: "Forward only", doubly: "Both directions" },
+    { feature: "Memory Overhead", singly: "Lower (1 pointer/node)", doubly: "Higher (2 pointers/node)" },
+    { feature: "Insert/Delete at Head", singly: "O(1)", doubly: "O(1)" },
+    { feature: "Insert/Delete at Tail", singly: "O(n) (or O(1) with tail pointer)", doubly: "O(1)" },
+    { feature: "Delete Current Node", singly: "Requires previous node", doubly: "Direct access via prev pointer" },
+    { feature: "Implementation Complexity", singly: "Simpler", doubly: "More complex" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+        {/* Overview Section */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Doubly Linked List
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            {overview.map((para, index) => (
+              <p key={index} className="text-[#374151] dark:text-[#d1d5db] mb-3 leading-relaxed">
+                {para}
+              </p>
+            ))}
+            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                <strong>Key Property:</strong> Each node is represented as [prev|data|next], showing the bidirectional links between nodes.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Basic Operations */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Basic Operations</h2>
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+              <thead className="bg-gray-50 dark:bg-gray-700">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Operation</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Complexity</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Description</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                {basicOperations.map((op, index) => (
+                  <tr key={index}>
+                    <td className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{op.name}</td>
+                    <td className="px-4 py-3 text-sm font-mono text-[#374151] dark:text-[#d1d5db]">{op.complexity}</td>
+                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{op.description}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        {/* Implementation */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Implementation</h2>
+          <div className="prose dark:prose-invert max-w-none">
+            <pre className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg overflow-x-auto">
+              <code className="text-sm font-mono text-gray-800 dark:text-gray-200">
+                {implementationCode.map((line, index) => (
+                  <div key={index}>{line.code}</div>
+                ))}
+              </code>
+            </pre>
+          </div>
+        </section>
+
+        {/* Insertion Process */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Insertion Process</h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                {insertionSteps.map((step, index) => (
+                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                    {step.step}
+                  </li>
+                ))}
+              </ol>
+            </div>
+            <div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
+              <div className="flex flex-col space-y-4">
+                <div className="flex items-center">
+                  <span className="font-mono mr-2">head →</span>
+                  <div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">[•|A|•] ↔ [•|B|•]</div>
+                  <span className="font-mono ml-2">← tail</span>
+                </div>
+                <div className="text-center text-gray-600 dark:text-gray-300">↓ Insert X at head ↓</div>
+                <div className="flex items-center">
+                  <span className="font-mono mr-2">head →</span>
+                  <div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">[null|X|•] ↔ [•|A|•] ↔ [•|B|•]</div>
+                  <span className="font-mono ml-2">← tail</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Deletion Process */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Deletion Process</h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                {deletionSteps.map((step, index) => (
+                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                    {step.step}
+                  </li>
+                ))}
+              </ol>
+            </div>
+            <div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
+              <div className="flex flex-col space-y-4">
+                <div className="flex items-center">
+                  <span className="font-mono mr-2">head →</span>
+                  <div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">[•|X|•] ↔ [•|A|•] ↔ [•|B|•]</div>
+                  <span className="font-mono ml-2">← tail</span>
+                </div>
+                <div className="text-center text-gray-600 dark:text-gray-300">↓ Delete A ↓</div>
+                <div className="flex items-center">
+                  <span className="font-mono mr-2">head →</span>
+                  <div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">[•|X|•] ↔ [•|B|•]</div>
+                  <span className="font-mono ml-2">← tail</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Visualization */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Operation Visualization</h2>
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+              <thead className="bg-gray-50 dark:bg-gray-700">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Operation</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">List State</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                {visualization.map((item, index) => (
+                  <tr key={index}>
+                    <td className="px-4 py-3 text-sm font-mono text-gray-900 dark:text-white">{item.operation}</td>
+                    <td className="px-4 py-3 text-sm font-mono text-[#374151] dark:text-[#d1d5db]">{item.state}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        {/* Comparison with Singly Linked List */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Comparison with Singly Linked List</h2>
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+              <thead className="bg-gray-50 dark:bg-gray-700">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Singly Linked List</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Doubly Linked List</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                {comparisonTable.map((row, index) => (
+                  <tr key={index}>
+                    <td className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{row.feature}</td>
+                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.singly}</td>
+                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{row.doubly}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        {/* Pros and Cons */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Pros and Cons</h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="text-lg font-semibold text-green-600 dark:text-green-400 mb-3">Advantages</h3>
+              <ul className="space-y-2">
+                {prosCons.filter(item => item.type === "pro").map((item, index) => (
+                  <li key={index} className="flex items-start">
+                    <svg className="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                    <span className="text-[#374151] dark:text-[#d1d5db]">{item.point}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-red-600 dark:text-red-400 mb-3">Limitations</h3>
+              <ul className="space-y-2">
+                {prosCons.filter(item => item.type === "con").map((item, index) => (
+                  <li key={index} className="flex items-start">
+                    <svg className="h-5 w-5 text-red-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                    <span className="text-[#374151] dark:text-[#d1d5db]">{item.point}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        {/* Applications */}
+        <section className="p-6">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Applications</h2>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="grid grid-cols-1 md:grid-cols-2 gap-2 list-disc pl-5 marker:text-primary dark:marker:text-[#c27cf7]">
+              {applications.map((app, index) => (
+                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                  {app}
+                </li>
+              ))}
+            </ul>
+            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                <strong>When to Choose:</strong> Prefer doubly linked lists when you need bidirectional traversal, frequent operations at both ends, or when the ability to delete arbitrary nodes without traversal is valuable.
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default content;
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/types/doubly/quiz.jsx b/src/app/visualizer/linkedlist/types/doubly/quiz.jsx
new file mode 100644
index 000000000..88fbcef6a
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/doubly/quiz.jsx
@@ -0,0 +1,144 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const Quiz = () => {
+  const questions = [
+        {
+        question: "What is the key difference between a node in a singly linked list and a doubly linked list?",
+        options: [
+            "Doubly linked list nodes have no pointers",
+            "Doubly linked list nodes have both next and previous pointers",
+            "Doubly linked list nodes have three pointers",
+            "There is no difference"
+        ],
+        correctAnswer: 1,
+        explanation: "Doubly linked list nodes contain both next and previous pointers, allowing bidirectional traversal."
+    },
+    {
+        question: "What do the 'previous' and 'next' pointers of the head node in a doubly linked list point to?",
+        options: [
+            "previous: null, next: second node",
+            "previous: tail, next: second node",
+            "previous: head, next: tail",
+            "previous: second node, next: null"
+        ],
+        correctAnswer: 0,
+        explanation: "The head's previous is null (no node before it) and next points to the second node."
+    },
+    {
+        question: "What is the time complexity of inserting a node at the tail of a doubly linked list with a tail pointer?",
+        options: [
+            "O(1)",
+            "O(n)",
+            "O(log n)",
+            "O(n²)"
+        ],
+        correctAnswer: 0,
+        explanation: "With a tail pointer, insertion at tail is O(1) as we can directly access the end."
+    },
+    {
+        question: "Which operation is more efficient in a doubly linked list compared to a singly linked list?",
+        options: [
+            "Forward traversal",
+            "Deleting a node given only its reference",
+            "Insertion at head",
+            "Checking if list is empty"
+        ],
+        correctAnswer: 1,
+        explanation: "With previous pointers, we can delete a node in O(1) time if we have its reference."
+    },
+    {
+        question: "What is the main disadvantage of doubly linked lists compared to singly linked lists?",
+        options: [
+            "Slower traversal speed",
+            "Higher memory usage per node",
+            "Cannot implement stacks or queues",
+            "Fixed size limitation"
+        ],
+        correctAnswer: 1,
+        explanation: "Each node requires an extra pointer (previous), increasing memory overhead."
+    },
+    {
+        question: "In a circular doubly linked list, what does the tail's next pointer point to?",
+        options: [
+            "null",
+            "head",
+            "tail itself",
+            "A random node"
+        ],
+        correctAnswer: 1,
+        explanation: "In a circular doubly linked list, tail's next points to head and head's previous points to tail."
+    },
+    {
+        question: "What is the time complexity of finding a node's predecessor in a doubly linked list?",
+        options: [
+            "O(1)",
+            "O(n)",
+            "O(log n)",
+            "O(n²)"
+        ],
+        correctAnswer: 0,
+        explanation: "We can directly access the predecessor via the previous pointer in O(1) time."
+    },
+    {
+        question: "Which of these applications would MOST benefit from a doubly linked list?",
+        options: [
+            "Implementing a stack",
+            "Browser forward/backward navigation",
+            "Storing pixel data for an image",
+            "Priority queue implementation"
+        ],
+        correctAnswer: 1,
+        explanation: "Browser navigation benefits from bidirectional traversal capabilities."
+    },
+    {
+        question: "How do you delete a middle node in a doubly linked list?",
+        options: [
+            "Set its data to null",
+            "Update its neighbors' pointers to bypass it",
+            "Only update the next node's pointer",
+            "You cannot delete middle nodes"
+        ],
+        correctAnswer: 1,
+        explanation: "To delete, set the previous node's next to the next node, and the next node's previous to the previous node."
+    },
+    {
+        question: "What is the space complexity of a doubly linked list with n nodes?",
+        options: [
+            "O(1)",
+            "O(n)",
+            "O(log n)",
+            "O(n²)"
+        ],
+        correctAnswer: 1,
+        explanation: "Space complexity is O(n) as it grows linearly with the number of nodes."
+    },
+    {
+        question: "In a non-empty doubly linked list, what does the head's previous pointer and tail's next pointer point to?",
+        options: [
+            "head.previous: null, tail.next: null",
+            "head.previous: tail, tail.next: head",
+            "Both point to themselves",
+            "head.previous: head, tail.next: tail"
+        ],
+        correctAnswer: 0,
+        explanation: "In a standard (non-circular) doubly linked list, head's previous and tail's next are null."
+    },
+    {
+        question: "What is one advantage of a sentinel node in a doubly linked list implementation?",
+        options: [
+            "Reduces memory usage",
+            "Simplifies edge cases by eliminating null pointers",
+            "Enables random access",
+            "Automatically sorts the list"
+        ],
+        correctAnswer: 1,
+        explanation: "Sentinel nodes act as dummy nodes that eliminate special cases for head/tail operations."
+    }
+];
+
+  return <QuizEngine title="Linked List Quiz Challenge" questions={questions} />;
+};
+
+export default Quiz;
diff --git a/src/app/visualizer/linkedlist/types/quiz/LinkedListTypesQuizClient.jsx b/src/app/visualizer/linkedlist/types/quiz/LinkedListTypesQuizClient.jsx
new file mode 100644
index 000000000..000dbac25
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/quiz/LinkedListTypesQuizClient.jsx
@@ -0,0 +1,112 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowLeft, Play } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function LinkedListTypesQuizClient() {
+  const quizzes = [
+    {
+      title: "Singly Linked List Quiz",
+      description:
+        "Practice node traversal, insertion, deletion, and basic operations in a Singly Linked List.",
+      href: "/visualizer/linkedlist/types/quiz/singly",
+      filename: "singly_linked_list_quiz.js",
+    },
+    {
+      title: "Doubly Linked List Quiz",
+      description:
+        "Practice forward and backward traversal, insertion, deletion, and pointer manipulation.",
+      href: "/visualizer/linkedlist/types/quiz/doubly",
+      filename: "doubly_linked_list_quiz.js",
+    },
+    {
+      title: "Circular Singly Linked List Quiz",
+      description:
+        "Practice circular traversal and operations using Circular Singly Linked Lists.",
+      href: "/visualizer/linkedlist/types/quiz/circular-singly",
+      filename: "circular_singly_linked_list_quiz.js",
+    },
+    {
+      title: "Circular Doubly Linked List Quiz",
+      description:
+        "Practice circular traversal, bidirectional navigation, and operations using Circular Doubly Linked Lists.",
+      href: "/visualizer/linkedlist/types/quiz/circular-doubly",
+      filename: "circular_doubly_linked_list_quiz.js",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-[var(--udemy-text)] dark:text-white transition-colors duration-300 pb-20">
+
+      {/* Header */}
+      <section className="relative pt-6 pb-4">
+        <div className="max-w-[1100px] mx-auto px-4">
+          <Link href="/visualizer/quiz">
+            <button className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] dark:text-[var(--color-primary-light)] hover:opacity-85 transition-opacity mb-3">
+              <ArrowLeft size={16} />
+              <span>Back to all quizzes</span>
+            </button>
+          </Link>
+
+          <h1 className="text-2xl md:text-3xl font-black mb-2">
+            Linked List Types Quiz Portal
+          </h1>
+
+          <p className="text-[14px] text-surface-600 dark:text-surface-400 font-medium">
+            Choose a Linked List quiz to strengthen your understanding of different linked list structures and operations.
+          </p>
+        </div>
+      </section>
+
+      {/* Quiz Cards */}
+      <div className="max-w-5xl mx-auto px-4 mt-8">
+        <div className="grid md:grid-cols-2 gap-6 items-stretch">
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{
+                duration: 0.4,
+                delay: index * 0.1,
+                ease: [0.22, 1, 0.36, 1],
+              }}
+              whileHover={{ y: -6, scale: 1.015 }}
+              whileTap={{ scale: 0.985 }}
+              className="group flex flex-col h-full rounded-2xl border border-blue-500/20 dark:border-blue-500/30 bg-white dark:bg-[#1a1a1a] overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
+            >
+              {/* Top Bar */}
+              <div className="flex items-center justify-between px-4 py-2.5 bg-blue-500/10 dark:bg-blue-500/20 border-b border-blue-500/20 dark:border-blue-500/30">
+                <div className="flex items-center gap-1.5 font-mono text-[11px] text-surface-600 dark:text-surface-300">
+                  <span className="text-violet-500 font-bold">$</span>
+                  <span>node {quiz.filename}</span>
+                </div>
+              </div>
+
+              {/* Card Content */}
+              <div className="p-6 flex-1 flex flex-col justify-between">
+                <div>
+                  <h2 className="text-[20px] font-extrabold text-surface-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors mb-2">
+                    {quiz.title}
+                  </h2>
+
+                  <p className="text-[14px] text-surface-600 dark:text-surface-300 leading-relaxed mb-6">
+                    {quiz.description}
+                  </p>
+                </div>
+
+                <Link href={quiz.href} className="block mt-auto w-full">
+                  <button className="w-full h-11 rounded-xl bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-bold text-[14px] flex items-center justify-center gap-2 shadow-sm hover:shadow-md transition-all">
+                    <span>Start Quiz</span>
+                    <Play size={14} className="fill-current" />
+                  </button>
+                </Link>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/types/quiz/circular-doubly/page.jsx b/src/app/visualizer/linkedlist/types/quiz/circular-doubly/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/quiz/circular-doubly/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/types/quiz/circular-doubly/quiz.jsx b/src/app/visualizer/linkedlist/types/quiz/circular-doubly/quiz.jsx
new file mode 100644
index 000000000..7d04d0713
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/quiz/circular-doubly/quiz.jsx
@@ -0,0 +1,128 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const CircularDoublyLinkedListQuiz = () => {
+  const questions = [
+    {
+      question: "What is the defining feature of a Circular Doubly Linked List?",
+      options: [
+        "Each node stores only one pointer.",
+        "The last node points to NULL.",
+        "The last node links to the first node and the first node links back to the last node.",
+        "Nodes are stored in contiguous memory."
+      ],
+      correctAnswer: 2,
+      explanation: "A Circular Doubly Linked List connects both ends, allowing continuous traversal in both directions."
+    },
+    {
+      question: "How many pointers does each node in a Circular Doubly Linked List contain?",
+      options: [
+        "One",
+        "Two",
+        "Three",
+        "Four"
+      ],
+      correctAnswer: 1,
+      explanation: "Each node contains a previous pointer and a next pointer."
+    },
+    {
+      question: "What does the next pointer of the last node point to?",
+      options: [
+        "NULL",
+        "The previous node",
+        "The head node",
+        "Itself"
+      ],
+      correctAnswer: 2,
+      explanation: "The last node's next pointer points back to the head, forming a circle."
+    },
+    {
+      question: "What does the previous pointer of the head node point to?",
+      options: [
+        "NULL",
+        "The last node",
+        "The second node",
+        "Itself"
+      ],
+      correctAnswer: 1,
+      explanation: "The head's previous pointer points to the last node."
+    },
+    {
+      question: "Which traversal is supported in a Circular Doubly Linked List?",
+      options: [
+        "Only forward",
+        "Only backward",
+        "Both forward and backward",
+        "Random traversal only"
+      ],
+      correctAnswer: 2,
+      explanation: "The previous and next pointers allow traversal in both directions."
+    },
+    {
+      question: "Which application commonly uses a Circular Doubly Linked List?",
+      options: [
+        "Music playlist with Next and Previous controls",
+        "Binary Search",
+        "Merge Sort",
+        "Hash Table"
+      ],
+      correctAnswer: 0,
+      explanation: "Media players often use Circular Doubly Linked Lists to navigate songs in both directions."
+    },
+    {
+      question: "What is the time complexity of inserting a node at the beginning?",
+      options: [
+        "O(1)",
+        "O(n)",
+        "O(log n)",
+        "O(n²)"
+      ],
+      correctAnswer: 0,
+      explanation: "Insertion only requires updating a few pointers."
+    },
+    {
+      question: "What is the time complexity of deleting a known node?",
+      options: [
+        "O(1)",
+        "O(n)",
+        "O(log n)",
+        "O(n²)"
+      ],
+      correctAnswer: 0,
+      explanation: "Given the node, deletion only requires pointer updates."
+    },
+    {
+      question: "What is the main disadvantage of a Circular Doubly Linked List?",
+      options: [
+        "Cannot traverse backward",
+        "Requires extra memory for previous pointers",
+        "Cannot insert nodes",
+        "Does not support deletion"
+      ],
+      correctAnswer: 1,
+      explanation: "Each node stores an additional previous pointer, increasing memory usage."
+    },
+    {
+      question: "Which statement about a Circular Doubly Linked List is correct?",
+      options: [
+        "The last node points to NULL.",
+        "Traversal stops when NULL is reached.",
+        "Both ends of the list are connected, allowing continuous traversal.",
+        "Only one pointer is stored in each node."
+      ],
+      correctAnswer: 2,
+      explanation: "The list forms a closed loop, enabling traversal in both forward and backward directions."
+    }
+  ];
+
+  return (
+    <QuizEngine
+      title="Circular Doubly Linked List Quiz"
+      questions={questions}
+    />
+  );
+};
+
+export default CircularDoublyLinkedListQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/types/quiz/circular-singly/page.jsx b/src/app/visualizer/linkedlist/types/quiz/circular-singly/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/quiz/circular-singly/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/types/quiz/circular-singly/quiz.jsx b/src/app/visualizer/linkedlist/types/quiz/circular-singly/quiz.jsx
new file mode 100644
index 000000000..bb7e7b075
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/quiz/circular-singly/quiz.jsx
@@ -0,0 +1,128 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const CircularSinglyLinkedListQuiz = () => {
+  const questions = [
+    {
+      question: "What is the defining characteristic of a Circular Singly Linked List?",
+      options: [
+        "Each node has two pointers.",
+        "The last node points back to the first node.",
+        "The first node points to NULL.",
+        "Nodes are stored in contiguous memory."
+      ],
+      correctAnswer: 1,
+      explanation: "In a Circular Singly Linked List, the last node's next pointer points back to the head node."
+    },
+    {
+      question: "What does the last node's next pointer reference?",
+      options: [
+        "NULL",
+        "The previous node",
+        "The head node",
+        "A random node"
+      ],
+      correctAnswer: 2,
+      explanation: "The last node connects back to the head, making the list circular."
+    },
+    {
+      question: "Which traversal condition is used in a Circular Singly Linked List?",
+      options: [
+        "Until current == NULL",
+        "Until current reaches the head again",
+        "Until current == tail",
+        "Infinite loop"
+      ],
+      correctAnswer: 1,
+      explanation: "Traversal stops when the current node reaches the head again."
+    },
+    {
+      question: "What is an advantage of a Circular Singly Linked List?",
+      options: [
+        "Supports backward traversal",
+        "Easy implementation of round-robin scheduling",
+        "Requires no pointers",
+        "Provides random access"
+      ],
+      correctAnswer: 1,
+      explanation: "Circular lists are widely used in round-robin CPU scheduling."
+    },
+    {
+      question: "What is the time complexity of inserting a node at the beginning (with a tail pointer)?",
+      options: [
+        "O(1)",
+        "O(n)",
+        "O(log n)",
+        "O(n²)"
+      ],
+      correctAnswer: 0,
+      explanation: "Using a tail pointer allows insertion at the beginning in constant time."
+    },
+    {
+      question: "Which application commonly uses a Circular Singly Linked List?",
+      options: [
+        "Browser history",
+        "Round Robin CPU Scheduling",
+        "Binary Search",
+        "Heap Sort"
+      ],
+      correctAnswer: 1,
+      explanation: "Round Robin scheduling repeatedly cycles through processes using a circular list."
+    },
+    {
+      question: "What is the biggest disadvantage of a Circular Singly Linked List?",
+      options: [
+        "Cannot insert nodes",
+        "Cannot traverse backward",
+        "Consumes no memory",
+        "Cannot delete nodes"
+      ],
+      correctAnswer: 1,
+      explanation: "Like a singly linked list, backward traversal is not possible."
+    },
+    {
+      question: "Which pointer is typically maintained for efficient insertion at both ends?",
+      options: [
+        "Middle pointer",
+        "Tail pointer",
+        "Current pointer",
+        "Index pointer"
+      ],
+      correctAnswer: 1,
+      explanation: "A tail pointer makes insertions at the beginning and end more efficient."
+    },
+    {
+      question: "What is the time complexity of searching for an element?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation: "The list may need to be traversed completely."
+    },
+    {
+      question: "Which statement about a Circular Singly Linked List is true?",
+      options: [
+        "The last node points to NULL.",
+        "The first node stores two pointers.",
+        "The last node links back to the head node.",
+        "Nodes are stored sequentially in memory."
+      ],
+      correctAnswer: 2,
+      explanation: "The defining feature is that the last node links back to the head."
+    }
+  ];
+
+  return (
+    <QuizEngine
+      title="Circular Singly Linked List Quiz"
+      questions={questions}
+    />
+  );
+};
+
+export default CircularSinglyLinkedListQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/types/quiz/doubly/page.jsx b/src/app/visualizer/linkedlist/types/quiz/doubly/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/quiz/doubly/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/types/quiz/doubly/quiz.jsx b/src/app/visualizer/linkedlist/types/quiz/doubly/quiz.jsx
new file mode 100644
index 000000000..6b3bf2caa
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/quiz/doubly/quiz.jsx
@@ -0,0 +1,128 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const DoublyLinkedListQuiz = () => {
+  const questions = [
+    {
+      question: "What is the main advantage of a Doubly Linked List over a Singly Linked List?",
+      options: [
+        "It requires less memory",
+        "It allows traversal in both directions",
+        "It stores elements in sorted order",
+        "It supports random access"
+      ],
+      correctAnswer: 1,
+      explanation: "Each node has both previous and next pointers, allowing forward and backward traversal."
+    },
+    {
+      question: "How many pointers does each node in a Doubly Linked List contain?",
+      options: [
+        "One",
+        "Two",
+        "Three",
+        "Four"
+      ],
+      correctAnswer: 1,
+      explanation: "Each node contains one previous pointer and one next pointer."
+    },
+    {
+      question: "Which pointer of the first node is NULL?",
+      options: [
+        "next",
+        "previous",
+        "both",
+        "neither"
+      ],
+      correctAnswer: 1,
+      explanation: "The previous pointer of the first node is NULL."
+    },
+    {
+      question: "Which pointer of the last node is NULL?",
+      options: [
+        "previous",
+        "next",
+        "both",
+        "head"
+      ],
+      correctAnswer: 1,
+      explanation: "The next pointer of the last node is NULL."
+    },
+    {
+      question: "What is the time complexity of inserting a node at the beginning?",
+      options: [
+        "O(1)",
+        "O(n)",
+        "O(log n)",
+        "O(n²)"
+      ],
+      correctAnswer: 0,
+      explanation: "Only a few pointer updates are required."
+    },
+    {
+      question: "Which operation becomes easier in a Doubly Linked List compared to a Singly Linked List?",
+      options: [
+        "Binary Search",
+        "Backward traversal",
+        "Sorting",
+        "Hashing"
+      ],
+      correctAnswer: 1,
+      explanation: "The previous pointer enables backward traversal."
+    },
+    {
+      question: "What is the major disadvantage of a Doubly Linked List?",
+      options: [
+        "Cannot insert nodes",
+        "Extra memory required for previous pointers",
+        "Cannot delete nodes",
+        "Cannot traverse"
+      ],
+      correctAnswer: 1,
+      explanation: "Each node stores an additional previous pointer."
+    },
+    {
+      question: "Which application commonly uses a Doubly Linked List?",
+      options: [
+        "Browser Back and Forward navigation",
+        "Binary Search",
+        "Heap Sort",
+        "Graph Coloring"
+      ],
+      correctAnswer: 0,
+      explanation: "Web browsers use Doubly Linked Lists for back and forward navigation."
+    },
+    {
+      question: "What is the time complexity of deleting a known node in a Doubly Linked List?",
+      options: [
+        "O(1)",
+        "O(n)",
+        "O(log n)",
+        "O(n²)"
+      ],
+      correctAnswer: 0,
+      explanation: "Pointers can be updated directly without traversal."
+    },
+    {
+      question: "Which statement about a Doubly Linked List is true?",
+      options: [
+        "Nodes can only be traversed forward.",
+        "Each node stores previous and next pointers.",
+        "Nodes are stored in contiguous memory.",
+        "It does not support insertion."
+      ],
+      correctAnswer: 1,
+      explanation: "Each node maintains links to both the previous and next nodes."
+    }
+  ];
+
+  return (
+    <QuizEngine
+      title="Doubly Linked List Quiz"
+      questions={questions}
+    />
+  );
+};
+
+export default DoublyLinkedListQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/types/quiz/page.jsx b/src/app/visualizer/linkedlist/types/quiz/page.jsx
new file mode 100644
index 000000000..f30baf70d
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/quiz/page.jsx
@@ -0,0 +1,5 @@
+import LinkedListTypesQuizClient from "./LinkedListTypesQuizClient";
+
+export default function Page() {
+  return <LinkedListTypesQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/types/quiz/singly/page.jsx b/src/app/visualizer/linkedlist/types/quiz/singly/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/quiz/singly/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/types/quiz/singly/quiz.jsx b/src/app/visualizer/linkedlist/types/quiz/singly/quiz.jsx
new file mode 100644
index 000000000..3746600c6
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/quiz/singly/quiz.jsx
@@ -0,0 +1,128 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const SinglyLinkedListQuiz = () => {
+  const questions = [
+    {
+      question: "What is the main characteristic of a Singly Linked List?",
+      options: [
+        "Each node stores only data",
+        "Each node stores data and a pointer to the next node",
+        "Each node stores pointers to both previous and next nodes",
+        "Nodes are stored in contiguous memory"
+      ],
+      correctAnswer: 1,
+      explanation: "Each node in a Singly Linked List contains data and a pointer to the next node."
+    },
+    {
+      question: "Which node marks the end of a Singly Linked List?",
+      options: [
+        "The first node",
+        "The node whose next pointer is NULL",
+        "The middle node",
+        "The node with the largest value"
+      ],
+      correctAnswer: 1,
+      explanation: "The last node's next pointer is NULL, indicating the end of the list."
+    },
+    {
+      question: "What is the time complexity of inserting a node at the beginning?",
+      options: [
+        "O(1)",
+        "O(n)",
+        "O(log n)",
+        "O(n²)"
+      ],
+      correctAnswer: 0,
+      explanation: "Insertion at the head only updates one pointer, making it O(1)."
+    },
+    {
+      question: "What is the time complexity of searching for an element in a Singly Linked List?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation: "The list may need to be traversed node by node."
+    },
+    {
+      question: "Which pointer is required to traverse a Singly Linked List?",
+      options: [
+        "Front pointer",
+        "Head pointer",
+        "Rear pointer",
+        "Tail pointer"
+      ],
+      correctAnswer: 1,
+      explanation: "Traversal begins from the head node."
+    },
+    {
+      question: "What is the biggest disadvantage of a Singly Linked List?",
+      options: [
+        "Cannot store integers",
+        "Cannot traverse backward",
+        "Consumes no memory",
+        "Requires sorting"
+      ],
+      correctAnswer: 1,
+      explanation: "Traversal is possible only in the forward direction."
+    },
+    {
+      question: "Which operation requires traversing the list before execution?",
+      options: [
+        "Insert at beginning",
+        "Delete first node",
+        "Insert at end (without tail pointer)",
+        "Create head node"
+      ],
+      correctAnswer: 2,
+      explanation: "Without a tail pointer, the entire list must be traversed."
+    },
+    {
+      question: "Which application commonly uses a Singly Linked List?",
+      options: [
+        "Music playlist",
+        "Hash Table",
+        "Polynomial representation",
+        "Binary Search"
+      ],
+      correctAnswer: 2,
+      explanation: "Polynomial manipulation commonly uses linked lists."
+    },
+    {
+      question: "Which pointer is updated after deleting the first node?",
+      options: [
+        "Head",
+        "Tail",
+        "Rear",
+        "NULL"
+      ],
+      correctAnswer: 0,
+      explanation: "The head pointer moves to the second node."
+    },
+    {
+      question: "What is the space complexity of storing n nodes in a Singly Linked List?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation: "Each node occupies memory, giving O(n) space complexity."
+    }
+  ];
+
+  return (
+    <QuizEngine
+      title="Singly Linked List Quiz"
+      questions={questions}
+    />
+  );
+};
+
+export default SinglyLinkedListQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/types/singly/AlgorithmClient.jsx b/src/app/visualizer/linkedlist/types/singly/AlgorithmClient.jsx
new file mode 100644
index 000000000..e744908cf
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/singly/AlgorithmClient.jsx
@@ -0,0 +1,30 @@
+import Animation from "@/app/visualizer/linkedlist/types/singly/animation";
+import Content from "@/app/visualizer/linkedlist/types/singly/content";
+import CodeBlock from "@/app/visualizer/linkedlist/types/singly/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Linked List", "Singly Linked List")}
+      title="Singly Linked List"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      exploreOther={
+        <ExploreOther
+          title="Explore Other Types"
+          links={[
+            { text: "Doubly Linked List", url: "./doubly" },
+            { text: "Circular Linked List", url: "./circular" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/linkedlist/types/singly/animation.jsx b/src/app/visualizer/linkedlist/types/singly/animation.jsx
new file mode 100644
index 000000000..0e714c760
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/singly/animation.jsx
@@ -0,0 +1,290 @@
+"use client";
+
+import React, { useState, useMemo, useEffect } from "react";
+import ResetButton from "@/app/components/ui/resetButton";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { addNodeGenerator } from "@/features/algorithms/linkedlist/singlyLinkedListLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+const SinglyLinkedListVisualizer = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [list, setList] = useState([]);
+  const [pendingOp, setPendingOp] = useState(null); // { type: 'add', value: string }
+  const [nodeIdCounter, setNodeIdCounter] = useState(1);
+
+  const frames = useMemo(() => {
+    if (!pendingOp) return [];
+    if (pendingOp.type === "add") {
+      return Array.from(addNodeGenerator(list, pendingOp.value, nodeIdCounter));
+    }
+    return [];
+  }, [list, pendingOp, nodeIdCounter]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 800 });
+
+  const addNode = () => {
+    if (!inputValue || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: "add", value: inputValue });
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setInputValue("");
+    setList([]);
+    setPendingOp(null);
+    setNodeIdCounter(1);
+    engine.reset();
+  };
+
+  useVisualizerReset(handleReset);
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.type === "complete") {
+        setList(finalFrame.list);
+        setNodeIdCounter(finalFrame.newNodeId + 1);
+      }
+      setPendingOp(null);
+      engine.reset();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  // Auto-commit on completion
+  useEffect(() => {
+    if (
+      engine.currentStep === frames.length - 1 &&
+      frames.length > 0 &&
+      !engine.isPlaying
+    ) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.type === "complete") {
+        setList(finalFrame.list);
+        setNodeIdCounter(finalFrame.newNodeId + 1);
+        setPendingOp(null);
+        setInputValue("");
+        engine.reset();
+      }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine, pendingOp]);
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame =
+    frames.length > 0 && engine.currentStep >= 0
+      ? frames[engine.currentStep]
+      : {
+          type: "idle",
+          list: list,
+          message: 'Enter a value and click "Add Node" to start.',
+        };
+
+  // Display list is the current base list, plus the new node if it's generated in this frame step 
+  // Wait, the logic yields `list` only at the end. So we use the base `list` state.
+  const displayList = currentFrame.list || list;
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize Singly Linked List Operations
+      </p>
+
+      <VisualizerCard className="mb-0">
+        <div className="mb-3">
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            Node Value
+          </label>
+          <div className="relative">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              className="w-full p-2 text-sm rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
+              placeholder="Enter value"
+              disabled={engine.isPlaying || pendingOp !== null}
+              onKeyDown={(e) => e.key === "Enter" && addNode()}
+            />
+            {inputValue && (
+              <button
+                onClick={() => setInputValue("")}
+                className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-4 w-4"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="flex flex-col gap-4 sm:flex-row">
+          <button
+            onClick={addNode}
+            disabled={engine.isPlaying || !inputValue || pendingOp !== null}
+            className={`w-full rounded-lg bg-primary px-6 py-3 text-white transition hover:bg-primary-dark disabled:bg-gray-400 sm:w-auto ${
+              engine.isPlaying ? "cursor-not-allowed" : ""
+            }`}
+          >
+            {engine.isPlaying && pendingOp?.type === "add"
+              ? "Adding Node..."
+              : "Add Node"}
+          </button>
+          <ResetButton onReset={handleReset} isAnimating={engine.isPlaying && pendingOp === null} />
+        </div>
+        
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => {
+                engine.reset();
+              }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center min-h-[60px] flex items-center justify-center">
+        <p className="text-gray-800 dark:text-gray-200 font-medium">
+          {currentFrame.message}
+        </p>
+      </div>
+
+      <VisualizerCard>
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 text-center flex items-center justify-center gap-2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-5 w-5 text-primary"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+            />
+          </svg>
+          Linked List Memory Representation
+        </h2>
+
+        {displayList.length === 0 ? (
+          <div className="text-center py-6 rounded-md bg-gray-50 dark:bg-gray-700/50 border border-dashed border-gray-300 dark:border-gray-600">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-10 w-10 mx-auto text-gray-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+              />
+            </svg>
+            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+              No nodes in the list yet. Add your first node!
+            </p>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center gap-4">
+            {displayList.map((node, index) => (
+              <React.Fragment key={node.id}>
+                <div className="w-full max-w-xs relative group">
+                  <div
+                    className={`relative flex flex-col rounded-lg p-3 bg-white dark:bg-gray-700 border ${
+                      index === 0 ? "border-green-500" : "border-primary"
+                    } shadow-sm transition-all duration-200 overflow-hidden`}
+                  >
+                    <div className="flex justify-between items-center mb-2">
+                      <span className="font-mono text-xs text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">
+                        {node.address}
+                      </span>
+                      <span
+                        className={`text-xs px-1.5 py-0.5 rounded ${
+                          index === 0
+                            ? "bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200"
+                            : "bg-blue-100 dark:bg-blue-900/50 text-primary-dark dark:text-blue-200"
+                        }`}
+                      >
+                        {index === 0 ? "HEAD" : `Node ${index}`}
+                      </span>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-2 mb-2">
+                      <div className="border-r border-gray-200 dark:border-gray-600 pr-2">
+                        <div className="text-xs text-gray-500 dark:text-gray-400">
+                          Data
+                        </div>
+                        <div className="font-medium text-base truncate">
+                          {node.value}
+                        </div>
+                      </div>
+
+                      <div>
+                        <div className="text-xs text-gray-500 dark:text-gray-400">
+                          Next Pointer
+                        </div>
+                        <div className="font-mono text-xs">
+                          {node.next || (
+                            <span className="text-red-500">0x0000 (NULL)</span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {node.next && (
+                    <div className="flex justify-center mt-1 relative">
+                      <div className="h-4 w-0.5 bg-gradient-to-b from-blue-500 to-blue-300 dark:from-blue-400 dark:to-blue-600 relative">
+                        <div className="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-3 border-r-3 border-t-3 border-l-transparent border-r-transparent border-t-blue-500 dark:border-t-blue-400"></div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </React.Fragment>
+            ))}
+          </div>
+        )}
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default SinglyLinkedListVisualizer;
diff --git a/src/app/visualizer/linkedlist/types/singly/codeBlock.jsx b/src/app/visualizer/linkedlist/types/singly/codeBlock.jsx
new file mode 100644
index 000000000..d11a15ea4
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/singly/codeBlock.jsx
@@ -0,0 +1,167 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+// ─── Code Examples ─────────────────────────────
+const codeExamples = {
+  javascript: `// Singly Linked List Implementation in JavaScript
+class Node{
+    constructor(data){
+        this.data=data;
+        this.next=null;
+    }
+}
+class SinglyLinkedList{
+    constructor(){
+        this.head=null;
+        this.size=0;
+    }
+    insertFirst(data){
+        const newNode=new Node(data);
+        newNode.next=this.head;
+        this.head=newNode;
+        this.size++;
+    }
+    insertLast(data){
+        const newNode=new Node(data);
+        if(!this.head){
+            this.head=newNode;
+        }else{
+            let current=this.head;
+            while(current.next){
+                current=current.next;
+            }
+            current.next=newNode;
+        }
+        this.size++;
+    }
+    insertAt(data, index){
+        if(index<0 || index>this.size) return;
+        if(index===0) return this.insertFirst(data);
+        const newNode=new Node(data);
+        let current=this.head;
+        let count=0;
+        while(count<index-1){
+            current=current.next;
+            count++;
+        }
+        newNode.next=current.next;
+        current.next=newNode;
+        this.size++;
+    }
+    getAt(index){
+        if(index<0 || index>=this.size){
+            return null;
+        }
+        let current=this.head;
+        let count=0;
+        while(count<index){
+            current=current.next;
+            count++;
+        }
+        return current.data;
+    }
+    removeAt(index){
+        if(index<0 || index>=this.size){
+            return null;
+        }
+        let current=this.head;
+        if(index===0){
+            this.head=current.next;
+        }else{
+            let count=0;
+            while(count<index-1){
+                current=current.next;
+                count++;
+            }
+            current.next=current.next.next;
+        }
+        this.size--;
+        return true;
+    }
+}`,
+
+  python: `# Singly Linked List Implementation
+class Node:
+    def __init__(self, data):
+        self.data=data
+        self.next=None
+class SinglyLinkedList:
+    def __init__(self):
+        self.head=None
+        self.size=0
+    def insert_first(self, data):
+        new_node=Node(data)
+        new_node.next=self.head
+        self.head=new_node
+        self.size+=1`,
+  java: `// Singly Linked List Implementation
+public class SinglyLinkedList{
+    class Node{
+        int data;
+        Node next;
+        Node(int data){
+            this.data=data;
+        }
+    }
+    private Node head;
+    private int size;
+    public SinglyLinkedList(){
+        head=null;
+        size=0;
+    }
+}`,
+  c: `// Singly Linked List Implementation
+#include<stdio.h>
+#include<stdlib.h>
+typedef struct Node{
+    int data;
+    struct Node* next;
+}Node;
+typedef struct{
+    Node* head;
+    int size;
+}SinglyLinkedList;`,
+  cpp: `// Singly Linked List Implementation
+#include<iostream>
+using namespace std;
+class Node{
+public:
+    int data;
+    Node* next;
+    Node(int data){
+        this->data=data;
+        next=nullptr;
+    }
+};
+class SinglyLinkedList{
+private:
+    Node* head;
+    int size;
+public:
+    SinglyLinkedList(){
+        head=nullptr;
+        size=0;
+    }
+};`
+};
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'singlyLinkedList.js',
+    python:'singly_linked_list.py',
+    java:'SinglyLinkedList.java',
+    c:'singly_linked_list.c',
+    cpp:'singly_linked_list.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const SinglyLinkedListCode = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default SinglyLinkedListCode;
\ No newline at end of file
diff --git a/src/app/visualizer/linkedlist/types/singly/content.jsx b/src/app/visualizer/linkedlist/types/singly/content.jsx
new file mode 100644
index 000000000..8afe50720
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/singly/content.jsx
@@ -0,0 +1,286 @@
+const content = () => {
+  const overview = [
+    `A Singly Linked List is a linear data structure where each element (node) contains data and a pointer to the next node. Unlike arrays, linked lists don't have fixed sizes and allow efficient insertion/deletion at any position.`,
+    `The list maintains a head pointer that points to the first node. The last node's next pointer is null, indicating the end of the list. This structure provides O(1) insertion/deletion at the head but O(n) access time for arbitrary elements.`,
+    `Singly linked lists are fundamental building blocks for more complex data structures like stacks, queues, and adjacency lists for graphs.`,
+  ];
+
+  const basicOperations = [
+    { name: "Insertion at Head", complexity: "O(1)", description: "Add new node at beginning by updating head pointer" },
+    { name: "Insertion at Tail", complexity: "O(n)", description: "Traverse to end and add new node (O(1) with tail pointer)" },
+    { name: "Deletion at Head", complexity: "O(1)", description: "Remove first node by updating head pointer" },
+    { name: "Deletion by Value", complexity: "O(n)", description: "Traverse list to find and remove specific node" },
+    { name: "Search", complexity: "O(n)", description: "Traverse list to find element" },
+    { name: "Access by Index", complexity: "O(n)", description: "Traverse list until reaching desired position" },
+  ];
+
+  const implementationCode = [
+    { code: "class Node {" },
+    { code: "  constructor(data) {" },
+    { code: "    this.data = data;" },
+    { code: "    this.next = null;" },
+    { code: "  }" },
+    { code: "}" },
+    { code: "" },
+    { code: "class SinglyLinkedList {" },
+    { code: "  constructor() {" },
+    { code: "    this.head = null;" },
+    { code: "    this.size = 0;" },
+    { code: "  }" },
+    { code: "" },
+    { code: "  // Check if list is empty" },
+    { code: "  isEmpty() {" },
+    { code: "    return this.head === null;" },
+    { code: "  }" },
+    { code: "" },
+    { code: "  // Insert at head" },
+    { code: "  insertFirst(data) {" },
+    { code: "    const newNode = new Node(data);" },
+    { code: "    newNode.next = this.head;" },
+    { code: "    this.head = newNode;" },
+    { code: "    this.size++;" },
+    { code: "  }" },
+  ];
+
+  const insertionAtHeadSteps = [
+    { step: "1. Create new node with given data" },
+    { step: "2. Set new node's next to current head" },
+    { step: "3. Update head pointer to new node" },
+    { step: "4. Increment list size counter" },
+  ];
+
+  const deletionSteps = [
+    { step: "1. Check if list is empty (head === null)" },
+    { step: "2. If deleting head, update head to head.next" },
+    { step: "3. For middle deletion, find previous node and update its next pointer" },
+    { step: "4. Decrement list size counter" },
+    { step: "5. Return deleted data (if needed)" },
+  ];
+
+  const prosCons = [
+    { point: "Dynamic size - grows as needed", type: "pro" },
+    { point: "Efficient insertion/deletion at head", type: "pro" },
+    { point: "No memory waste (only allocates needed nodes)", type: "pro" },
+    { point: "No random access - must traverse from head", type: "con" },
+    { point: "Extra memory for next pointers", type: "con" },
+    { point: "Not cache-friendly (nodes scattered in memory)", type: "con" },
+  ];
+
+  const visualization = [
+    { operation: "Initialization", state: "head → null" },
+    { operation: "insertFirst(10)", state: "head → [10|•] → null" },
+    { operation: "insertFirst(20)", state: "head → [20|•] → [10|•] → null" },
+    { operation: "insertLast(30)", state: "head → [20|•] → [10|•] → [30|•] → null" },
+    { operation: "deleteFirst()", state: "head → [10|•] → [30|•] → null" },
+    { operation: "delete(30)", state: "head → [10|•] → null" },
+  ];
+
+  const applications = [
+    "Implementing stacks and queues",
+    "Memory management systems",
+    "Undo functionality in software",
+    "Hash table collision handling",
+    "Polynomial representation and arithmetic",
+    "Browser history navigation",
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+        {/* Overview Section */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Singly Linked List
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            {overview.map((para, index) => (
+              <p key={index} className="text-[#374151] dark:text-[#d1d5db] mb-3 leading-relaxed">
+                {para}
+              </p>
+            ))}
+            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                <strong>Key Property:</strong> Each node contains data and a single pointer to the next node, forming a unidirectional chain.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Basic Operations */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Basic Operations</h2>
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+              <thead className="bg-gray-50 dark:bg-gray-700">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Operation</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Time Complexity</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Description</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                {basicOperations.map((op, index) => (
+                  <tr key={index}>
+                    <td className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{op.name}</td>
+                    <td className="px-4 py-3 text-sm font-mono text-[#374151] dark:text-[#d1d5db]">{op.complexity}</td>
+                    <td className="px-4 py-3 text-sm text-[#374151] dark:text-[#d1d5db]">{op.description}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        {/* Implementation */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Implementation</h2>
+          <div className="prose dark:prose-invert max-w-none">
+            <pre className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg overflow-x-auto">
+              <code className="text-sm font-mono text-gray-800 dark:text-gray-200">
+                {implementationCode.map((line, index) => (
+                  <div key={index}>{line.code}</div>
+                ))}
+              </code>
+            </pre>
+          </div>
+        </section>
+
+        {/* Insertion at Head */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Insertion at Head</h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                {insertionAtHeadSteps.map((step, index) => (
+                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                    {step.step}
+                  </li>
+                ))}
+              </ol>
+            </div>
+            <div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
+              <div className="flex flex-col space-y-4">
+                <div className="flex items-center">
+                  <span className="font-mono mr-2">head →</span>
+                  <div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">[A|•] → [B|•] → null</div>
+                </div>
+                <div className="text-center text-gray-600 dark:text-gray-300">↓ Insert X at head ↓</div>
+                <div className="flex items-center">
+                  <span className="font-mono mr-2">head →</span>
+                  <div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">[X|•] → [A|•] → [B|•] → null</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Deletion */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Deletion Operations</h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                {deletionSteps.map((step, index) => (
+                  <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                    {step.step}
+                  </li>
+                ))}
+              </ol>
+            </div>
+            <div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
+              <div className="flex flex-col space-y-4">
+                <div className="flex items-center">
+                  <span className="font-mono mr-2">head →</span>
+                  <div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">[X|•] → [A|•] → [B|•] → null</div>
+                </div>
+                <div className="text-center text-gray-600 dark:text-gray-300">↓ Delete A ↓</div>
+                <div className="flex items-center">
+                  <span className="font-mono mr-2">head →</span>
+                  <div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">[X|•] → [B|•] → null</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Visualization */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Operation Visualization</h2>
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+              <thead className="bg-gray-50 dark:bg-gray-700">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Operation</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">List State</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                {visualization.map((item, index) => (
+                  <tr key={index}>
+                    <td className="px-4 py-3 text-sm font-mono text-gray-900 dark:text-white">{item.operation}</td>
+                    <td className="px-4 py-3 text-sm font-mono text-[#374151] dark:text-[#d1d5db]">{item.state}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        {/* Pros and Cons */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Pros and Cons</h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="text-lg font-semibold text-green-600 dark:text-green-400 mb-3">Advantages</h3>
+              <ul className="space-y-2">
+                {prosCons.filter(item => item.type === "pro").map((item, index) => (
+                  <li key={index} className="flex items-start">
+                    <svg className="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                    <span className="text-[#374151] dark:text-[#d1d5db]">{item.point}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-red-600 dark:text-red-400 mb-3">Limitations</h3>
+              <ul className="space-y-2">
+                {prosCons.filter(item => item.type === "con").map((item, index) => (
+                  <li key={index} className="flex items-start">
+                    <svg className="h-5 w-5 text-red-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                    <span className="text-[#374151] dark:text-[#d1d5db]">{item.point}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        {/* Applications */}
+        <section className="p-6">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">Applications</h2>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="grid grid-cols-1 md:grid-cols-2 gap-2 list-disc pl-5 marker:text-primary dark:marker:text-[#c27cf7]">
+              {applications.map((app, index) => (
+                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                  {app}
+                </li>
+              ))}
+            </ul>
+            <div className="mt-4 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                <strong>Note:</strong> Singly linked lists are preferred when you need constant-time insertions/deletions at the beginning and don&apos;t require backward traversal.
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default content;
diff --git a/src/app/visualizer/linkedlist/types/singly/quiz.jsx b/src/app/visualizer/linkedlist/types/singly/quiz.jsx
new file mode 100644
index 000000000..812ba5146
--- /dev/null
+++ b/src/app/visualizer/linkedlist/types/singly/quiz.jsx
@@ -0,0 +1,144 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const Quiz = () => {
+  const questions = [
+    {
+        question: "What is the fundamental building block of a singly linked list?",
+        options: [
+            "Array",
+            "Node containing data and a next pointer",
+            "Hash table",
+            "Binary tree"
+        ],
+        correctAnswer: 1,
+        explanation: "A singly linked list is composed of nodes where each node contains data and a pointer to the next node."
+    },
+    {
+        question: "What does the 'next' pointer of the last node in a singly linked list point to?",
+        options: [
+            "The head node",
+            "A random node",
+            "null",
+            "Itself"
+        ],
+        correctAnswer: 2,
+        explanation: "The last node's next pointer is null, indicating the end of the list."
+    },
+    {
+        question: "What is the time complexity of inserting a new node at the head of a singly linked list?",
+        options: [
+            "O(1)",
+            "O(n)",
+            "O(log n)",
+            "O(n²)"
+        ],
+        correctAnswer: 0,
+        explanation: "Insertion at head is O(1) as it only requires updating the head pointer."
+    },
+    {
+        question: "Which operation in a singly linked list has O(n) time complexity?",
+        options: [
+            "Insertion at head",
+            "Deletion at head",
+            "Searching for an element",
+            "Checking if list is empty"
+        ],
+        correctAnswer: 2,
+        explanation: "Searching requires traversing the list from head to tail, which is O(n) in the worst case."
+    },
+    {
+        question: "What is the advantage of a singly linked list over an array?",
+        options: [
+            "Constant-time random access",
+            "Better cache locality",
+            "Dynamic size and efficient insertions/deletions",
+            "Built-in sorting capability"
+        ],
+        correctAnswer: 2,
+        explanation: "Linked lists can grow dynamically and allow efficient insertions/deletions without shifting elements."
+    },
+    {
+        question: "How do you check if a singly linked list is empty?",
+        options: [
+            "Check if size == 0",
+            "Check if head == null",
+            "Check if tail == null",
+            "All of the above"
+        ],
+        correctAnswer: 1,
+        explanation: "An empty list has its head pointer set to null."
+    },
+    {
+        question: "What is the time complexity of deleting a specific value from a singly linked list?",
+        options: [
+            "O(1)",
+            "O(n)",
+            "O(log n)",
+            "O(n²)"
+        ],
+        correctAnswer: 1,
+        explanation: "Deleting by value requires traversing the list to find the node, which is O(n)."
+    },
+    {
+        question: "Which of these applications would LEAST likely use a singly linked list?",
+        options: [
+            "Implementing a stack",
+            "Memory management system",
+            "Image processing filter",
+            "Browser history navigation"
+        ],
+        correctAnswer: 2,
+        explanation: "Image processing typically requires random access to pixels, which arrays handle better."
+    },
+    {
+        question: "What is the main disadvantage of singly linked lists compared to arrays?",
+        options: [
+            "Fixed size",
+            "No random access to elements",
+            "Inefficient insertion at head",
+            "Cannot store different data types"
+        ],
+        correctAnswer: 1,
+        explanation: "Accessing an arbitrary element requires traversal from the head, making it O(n) rather than O(1)."
+    },
+    {
+        question: "What happens during insertion at the head of a singly linked list?",
+        options: [
+            "New node's next points to current head, then head updates to new node",
+            "Traverse to end and add new node",
+            "Find middle position and insert",
+            "Replace all existing nodes"
+        ],
+        correctAnswer: 0,
+        explanation: "Insertion at head involves creating a new node that points to the current head, then making it the new head."
+    },
+    {
+        question: "How much extra memory per node does a singly linked list need compared to an array?",
+        options: [
+            "No extra memory",
+            "4 bytes for size counter",
+            "Pointer size (typically 4-8 bytes)",
+            "Double the data storage"
+        ],
+        correctAnswer: 2,
+        explanation: "Each node requires additional memory for the next pointer, typically 4-8 bytes depending on system."
+    },
+    {
+        question: "What is the purpose of maintaining a 'size' variable in a linked list implementation?",
+        options: [
+            "To limit the maximum number of nodes",
+            "To provide O(1) access to the list length",
+            "To improve cache performance",
+            "To enable random access"
+        ],
+        correctAnswer: 1,
+        explanation: "A size counter allows checking the list length in constant time without traversal."
+    }
+];
+
+  return <QuizEngine title="Linked List Quiz Challenge" questions={questions} />;
+};
+
+export default Quiz;
diff --git a/src/app/visualizer/linkedlist/utils/LinkedListTempNode.jsx b/src/app/visualizer/linkedlist/utils/LinkedListTempNode.jsx
new file mode 100644
index 000000000..5e2a5e861
--- /dev/null
+++ b/src/app/visualizer/linkedlist/utils/LinkedListTempNode.jsx
@@ -0,0 +1,12 @@
+export function LinkedListTempNode({ value, nextText = "NULL" }) {
+  return (
+    <div className="node absolute flex border border-gray-300">
+      <div className="data-part rounded-l-lg bg-blue-500 p-4 text-white">
+        {String(value ?? "")}
+      </div>
+      <div className="next-part rounded-r-lg bg-blue-300 p-4">
+        {String(nextText ?? "")}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/visualizer/linkedlist/utils/createTempNode.js b/src/app/visualizer/linkedlist/utils/createTempNode.js
new file mode 100644
index 000000000..d251dfe05
--- /dev/null
+++ b/src/app/visualizer/linkedlist/utils/createTempNode.js
@@ -0,0 +1,29 @@
+export function createLinkedListTempNode({
+  value,
+  nextText = "NULL",
+  doc,
+} = {}) {
+  const documentRef =
+    doc ?? (typeof document !== "undefined" ? document : undefined);
+  if (!documentRef) {
+    throw new Error(
+      "createLinkedListTempNode must be called in a DOM environment.",
+    );
+  }
+
+  const tempNode = documentRef.createElement("div");
+  tempNode.className = "node absolute flex border border-gray-300";
+
+  const dataPart = documentRef.createElement("div");
+  dataPart.className = "data-part rounded-l-lg bg-blue-500 p-4 text-white";
+  dataPart.textContent = String(value ?? "");
+
+  const nextPart = documentRef.createElement("div");
+  nextPart.className = "next-part rounded-r-lg bg-blue-300 p-4";
+  nextPart.textContent = String(nextText ?? "");
+
+  tempNode.appendChild(dataPart);
+  tempNode.appendChild(nextPart);
+
+  return tempNode;
+}
diff --git a/src/app/visualizer/loading.jsx b/src/app/visualizer/loading.jsx
new file mode 100644
index 000000000..e4df69011
--- /dev/null
+++ b/src/app/visualizer/loading.jsx
@@ -0,0 +1,23 @@
+export default function VisualizerLoading() {
+  return (
+    <div className="container-app section-app">
+      <div className="mx-auto max-w-6xl">
+        <div className="mb-8">
+          <div className="skeleton-shimmer mx-auto h-12 w-full max-w-2xl" />
+        </div>
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {[1, 2, 3, 4, 5, 6].map((i) => (
+            <div key={i} className="card-surface overflow-hidden">
+              <div className="skeleton-shimmer h-40 w-full rounded-none" />
+              <div className="space-y-2 p-4">
+                <div className="skeleton-shimmer h-5 w-3/4" />
+                <div className="skeleton-shimmer h-4 w-full" />
+                <div className="skeleton-shimmer h-4 w-1/2" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/visualizer/memory-view/page.jsx b/src/app/visualizer/memory-view/page.jsx
new file mode 100644
index 000000000..58c77b184
--- /dev/null
+++ b/src/app/visualizer/memory-view/page.jsx
@@ -0,0 +1,31 @@
+import MemoryRepresentation from "@/app/components/MemoryRepresentation";
+
+export const metadata = {
+  title: "Memory Representation | AlgoBuddy",
+  description:
+    "Visualize how arrays, linked lists, stacks, queues, trees, and hash maps are stored and managed in memory.",
+};
+
+export default function MemoryViewPage() {
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-gray-800 dark:text-white p-6">
+      
+      <div className="max-w-7xl mx-auto">
+        
+        <h1 className="text-4xl font-bold text-center mb-4">
+          Data Structure Memory Representation
+        </h1>
+
+        <p className="text-center text-gray-600 dark:text-gray-300 mb-10">
+          Understand how different data structures are organized in memory,
+          including indexing, node links, stack/queue behavior, tree relations,
+          and hash map bucket allocation.
+        </p>
+
+        <MemoryRepresentation />
+
+      </div>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/page.jsx b/src/app/visualizer/page.jsx
new file mode 100644
index 000000000..2588bb45d
--- /dev/null
+++ b/src/app/visualizer/page.jsx
@@ -0,0 +1,956 @@
+import React from "react";
+import Footer from "@/app/components/footer";
+import VisualizerClient from "./VisualizerClient";
+import ArrayModal from "@/app/components/models/ArrayModal";
+import StackModal from "@/app/components/models/StackModel";
+import QueueModal from "@/app/components/models/QueueModal";
+import LinkedListModal from "@/app/components/models/LinkedListModal";
+import TreeModal from "@/app/components/models/TreeModal";
+import GraphModal from "@/app/components/models/GraphModal";
+import TutorialOverlay from "@/app/components/ui/TutorialOverlay";
+import BackToTop from "../components/ui/backtotop";
+import BookmarkSection from "@/app/components/ui/BookmarkSection";
+
+export const metadata = {
+  title: "Algorithm Visualizer | AlgoBuddy",
+  description:
+    "Explore visual representations and source code for various DSA algorithms including searching, sorting, stacks, queues, trees, graphs, and stack-based expression evaluation like Polish Notation using arrays and linked lists. Interactive and beginner-friendly!",
+  keywords: [
+    "DSA Visualizer",
+    "Algorithm Visualizer",
+    "Data Structures",
+    "Searching Algorithms",
+    "Sorting Algorithms",
+    "Stack",
+    "Queue",
+    "Tree",
+    "Graph",
+    "Graph Algorithms",
+    "BFS",
+    "DFS",
+    "Linear Search",
+    "Bubble Sort",
+    "Tree Traversal",
+    "Heap Sort",
+    "Linked List",
+    "Singly Linked List",
+    "Doubly Linked List",
+    "Circular Linked List",
+    "Prefix Notation",
+    "Postfix Notation",
+    "Polish Notation",
+    "Stack using Array",
+    "Stack using Linked List",
+    "Prefix using Stack",
+    "Postfix using Stack",
+    "Polish Notation Implementation",
+    "Queue using Array",
+    "Queue using Linked List",
+    "Circular Queue",
+    "Priority Queue",
+    "Deque",
+    "Queue Operations",
+    "Graph Traversal",
+    "Code for DSA Algorithms",
+    "Code for Data Structures",
+    "Interactive Code Samples",
+    "DSA with Code",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/visualizer.png",
+        width: 1200,
+        height: 630,
+        alt: "Algorithm Visualization",
+      },
+    ],
+  },
+};
+
+const sections = [
+  {
+    title: "Code Lab",
+    slug: "code-lab",
+    desc: "Write custom code, run safe step-by-step dry runs, and analyze time & space complexity",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M8 9l-4 3 4 3m8-6l4 3-4 3M14 5l-4 14"
+        />
+      </svg>
+    ),
+    info: {
+      About:
+        "The Code Lab provides essential developer tools. Use the Dry Run Visualizer to inspect line-by-line execution state, and the Complexity Analyzer to understand Big O notations, best/worst cases, and optimization insights.",
+      Representation: null,
+    },
+    subsections: [
+      {
+        title: "Tools",
+        items: [
+          {
+            name: "Dry Run Visualizer",
+            path: "/visualizer/dry-run",
+          },
+          {
+            name: "Complexity Analyzer",
+            path: "/visualizer/complexity-analyzer",
+          },
+          {
+            name: "Code Execution Visualizer",
+            path: "/visualizer/code-execution",
+          },
+        ],
+      },    
+    ],
+  },
+  {
+    title: "Array",
+    slug: "array",
+    desc: "Searching & sorting algorithms on contiguous memory",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M9 5l7 7-7 7"
+        />
+      </svg>
+    ),
+    info: {
+      About:
+        "An array is a data structure that stores multiple values of the same type in a single variable. Each value is stored at a specific index, starting from 0.",
+      Representation: <ArrayModal />,
+    },
+    subsections: [
+      {
+        title: "Searching",
+        items: [
+          { name: "Linear Search", path: "/visualizer/array/linearsearch" },
+          { name: "Binary Search", path: "/visualizer/array/binarysearch" },
+        ],
+      },
+      {
+        title: "Sorting",
+        items: [
+          { name: "Bubble Sort", path: "/visualizer/array/bubblesort" },
+          { name: "Selection Sort", path: "/visualizer/array/selectionsort" },
+          { name: "Insertion Sort", path: "/visualizer/array/insertionsort" },
+          { name: "Merge Sort", path: "/visualizer/array/mergesort" },
+          { name: "Quick Sort", path: "/visualizer/array/quicksort" },
+          { name: "Heap Sort", path: "/visualizer/array/heapsort" },
+          { name: "Radix Sort", path: "/visualizer/array/radixsort" },
+          { name: "Counting Sort", path: "/visualizer/array/countingsort" },
+          { name: "Shell Sort", path: "/visualizer/array/shellsort" },
+          { name: "Tim Sort", path: "/visualizer/array/timsort" },
+        ],
+      },
+      {
+        title: "Interview Patterns",
+        items: [
+          { name: "Sliding Window", path: "/visualizer/array/slidingwindow" },
+          { name: "Two Pointers", path: "/visualizer/array/twopointers" },
+        ],
+      },
+      {
+        title: "Quizzes",
+        items: [
+          { name: "Searching Quiz", path: "/visualizer/array/searching/quiz" },
+          { name: "Sorting Quiz", path: "/visualizer/array/sorting/quiz" },
+          { name: "Interview Patterns Quiz", path: "/visualizer/array/Interview-Patterns/quiz" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "String",
+    slug: "string",
+    desc: "Pattern matching, string manipulation, and interview-based string algorithms",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M7 8h10M7 12h8M7 16h6"
+        />
+      </svg>
+    ),
+    info: {
+      About:
+        "Strings are sequences of characters used to represent text. String algorithms focus on searching, matching, manipulation, and optimization techniques.",
+      Representation: null,
+    },
+    subsections: [
+      {
+        title: "Basic Operations",
+        items: [
+          {
+            name: "Reverse String",
+            path: "/visualizer/string/reverse-string",
+          },
+          {
+            name: "Palindrome Check",
+            path: "/visualizer/string/palindrome",
+          },
+          {
+            name: "Character Frequency",
+            path: "/visualizer/string/frequency",
+          },
+          {
+            name: "Anagram Check",
+            path: "/visualizer/string/anagram",
+          },
+          {
+            name: "Longest Common Prefix",
+            path: "/visualizer/string/longest-common-prefix",
+          },
+        ],
+      },
+
+      {
+        title: "Pattern Matching",
+        items: [
+          {
+            name: "KMP Algorithm",
+            path: "/visualizer/string/kmp",
+          },
+          {
+            name: "Rabin-Karp",
+            path: "/visualizer/string/rabin-karp",
+          },
+          {
+            name: "Z Algorithm",
+            path: "/visualizer/string/z-algorithm",
+          },
+        ],
+      },
+
+      {
+        title: "Interview Problems",
+        items: [
+          {
+            name: "Longest Substring Without Repeating Characters",
+            path: "/visualizer/string/longest-substring",
+          },
+          {
+            name: "Minimum Window Substring",
+            path: "/visualizer/string/minimum-window-substring",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Recursion",
+    slug: "recursion",
+    desc: "Understand stack frames, call stacks, base cases, and tree recursion through animated execution flow",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M4 4v5h.582m15.356 2A8.001 8.001 0 1121.306 7.5L20 9"
+        />
+      </svg>
+    ),
+    info: {
+      About:
+        "Recursion is a programming technique where a function calls itself to solve smaller instances of the same problem. A recursive function consists of a base case (to stop recursion) and a recursive case (to continue).",
+      Representation: null,
+    },
+    subsections: [
+      {
+        title: "Recursion Topics",
+        items: [
+          { name: "Basic Recursion", path: "/visualizer/recursion/basic-recursion" },
+          { name: "Functional & Parameterized Recursion", path: "/visualizer/recursion/functional-parameterized" },
+          { name: "Multiple Recursive Calls", path: "/visualizer/recursion/multiple-calls" },
+          { name: "Recursion on Subsequences", path: "/visualizer/recursion/subsequences" },
+          { name: "Backtracking", path: "/visualizer/recursion/backtracking" },
+          { name: "Recursion Trees", path: "/visualizer/recursion/trees" },
+          { name: "Call Stack Visualization", path: "/visualizer/recursion/stack" },
+          { name: "Recursive Binary Search", path: "/visualizer/recursion/binary-search" },
+        ],
+      },
+      {
+        title: "Quizzes",
+        items: [
+          { name: "Recursion Quiz", path: "/visualizer/recursion/quiz" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Stack",
+    slug: "stack",
+    desc: "LIFO operations, polish notations & implementations",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
+        />
+      </svg>
+    ),
+    info: {
+      About:
+        "LIFO data structure; push adds to top; pop removes from top; peek views top; works like a stack of plates. Used in function calls, undo, expression evaluation.",
+      Representation: <StackModal />,
+    },
+    subsections: [
+      {
+        title: "Operations",
+        items: [
+          { name: "Push & Pop", path: "/visualizer/stack/push-pop" },
+          { name: "Peek", path: "/visualizer/stack/peek" },
+          { name: "Is Empty", path: "/visualizer/stack/isempty" },
+          { name: "Is Full", path: "/visualizer/stack/isfull" },
+        ],
+      },
+      {
+        title: "Polish Notations Evaluation",
+        items: [
+          { name: "Postfix", path: "/visualizer/stack/polish/postfix" },
+          { name: "Prefix", path: "/visualizer/stack/polish/prefix" },
+        ],
+      },
+      {
+        title: "Implementation",
+        items: [
+          {
+            name: "Using Array",
+            path: "/visualizer/stack/implementation/usingArray",
+          },
+          {
+            name: "Using Linked List",
+            path: "/visualizer/stack/implementation/usingLinkedList",
+          },
+        ],
+      },
+      {
+        title: "Quizzes",
+        items: [
+          { name: "Stack Operations Quiz", path: "/visualizer/stack/quiz" },
+          { name: "Polish Notation Evaluation Quiz", path: "/visualizer/stack/polish/quiz" },
+          { name: "Implementation Quiz", path: "/visualizer/stack/implementation/quiz" },
+          { name: "Monotonic Stack Quiz", path: "/visualizer/stack/monotonic/quiz" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Queue",
+    slug: "queue",
+    desc: "FIFO operations, variants & implementations",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M4 6h16M4 12h16m-7 6h7"
+        />
+      </svg>
+    ),
+    info: {
+      About:
+        "FIFO data structure; enqueue adds to rear; dequeue removes from front; peek views front; works like a line in a queue. Used in scheduling, buffering, BFS.",
+      Representation: <QueueModal />,
+    },
+    subsections: [
+      {
+        title: "Operations",
+        items: [
+          {
+            name: "Enqueue & Dequeue",
+            path: "/visualizer/queue/operations/enqueue-dequeue",
+          },
+          {
+            name: "Peek Front",
+            path: "/visualizer/queue/operations/peek-front",
+          },
+          { name: "Is Empty", path: "/visualizer/queue/operations/isempty" },
+          { name: "Is Full", path: "/visualizer/queue/operations/isfull" },
+        ],
+      },
+      {
+        title: "Types",
+        items: [
+          {
+            name: "Single Ended Queue",
+            path: "/visualizer/queue/types/singleEnded",
+          },
+          {
+            name: "Double Ended Queue",
+            path: "/visualizer/queue/types/deque",
+          },
+          { name: "Circular Queue", path: "/visualizer/queue/types/circular" },
+          { name: "Priority Queue", path: "/visualizer/queue/types/priority" },
+        ],
+      },
+      {
+        title: "Implementation",
+        items: [
+          {
+            name: "Using Array",
+            path: "/visualizer/queue/implementation/array",
+          },
+          {
+            name: "Using Linked List",
+            path: "/visualizer/queue/implementation/linkedList",
+          },
+        ],
+      },
+      {
+        title: "Quizzes",
+        items: [
+          { name: "Queue Operations Quiz", path: "/visualizer/queue/operations/quiz" },
+          { name: "Queue Types Quiz", path: "/visualizer/queue/types/quiz" },
+          { name: "Queue Implementation Quiz", path: "/visualizer/queue/implementation/quiz" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Linked List",
+    slug: "linked-list",
+    desc: "Singly, doubly, circular — traversal to merge",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M13 5l7 7-7 7"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M5 5l7 7-7 7"
+        />
+      </svg>
+    ),
+    info: {
+      About:
+        "Linear data structure; elements (nodes) connected using pointers; each node has data + next; no fixed size; types: singly, doubly, circular. Used in dynamic memory, insert/delete operations.",
+      Representation: <LinkedListModal />,
+    },
+    subsections: [
+      {
+        title: "Types",
+        items: [
+          {
+            name: "Singly Linked List",
+            path: "/visualizer/linkedlist/types/singly",
+          },
+          {
+            name: "Doubly Linked List",
+            path: "/visualizer/linkedlist/types/doubly",
+          },
+          {
+            name: "Circular Linked List",
+            path: "/visualizer/linkedlist/types/circular",
+          },
+        ],
+      },
+      {
+        title: "Operations",
+        items: [
+          {
+            name: "Traversal",
+            path: "/visualizer/linkedlist/operations/traversal",
+          },
+          {
+            name: "Insertion",
+            path: "/visualizer/linkedlist/operations/insertion",
+          },
+          {
+            name: "Deletion",
+            path: "/visualizer/linkedlist/operations/deletion",
+          },
+          {
+            name: "Reverse",
+            path: "/visualizer/linkedlist/operations/reverse",
+          },
+          {
+            name: "Merge",
+            path: "/visualizer/linkedlist/operations/merge",
+          },
+          {
+            name: "Comparison",
+            path: "/visualizer/linkedlist/operations/comparison",
+          },
+          {
+            name: "Sorting",
+            path: "/visualizer/linkedlist/operations/sorting",
+          },
+        ],
+      },
+      {
+        title: "Quizzes",
+        items: [
+          { name: "Linked List Types Quiz", path: "/visualizer/linkedlist/types/quiz" },
+          { name: "Linked List Operations Quiz", path: "/visualizer/linkedlist/operations/quiz" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Tree",
+    slug: "tree",
+    desc: "BST, AVL, traversals, tries & advanced trees",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M3 12h6m-6 4h6m0-8h6m6 0h-6m6 4h-6m-6-8v12m6-12v12"
+        />
+      </svg>
+    ),
+    info: {
+      About:
+        "Hierarchical data structure; has root, nodes, edges; each node has parent/child; no cycles; Used in hierarchies, file systems, searching.",
+      Types: "binary tree, BST, AVL, etc.",
+      Representation: <TreeModal maxLevel={3} />,
+    },
+    subsections: [
+      {
+        title: "Binary Tree",
+        items: [
+          {
+            name: "Structure & Properties",
+            path: "/visualizer/tree/binaryTree/properties",
+          },
+          {
+            name: "Types of Binary Trees",
+            path: "/visualizer/tree/binaryTree/types",
+          },
+        ],
+      },
+      {
+        title: "Binary Search Tree",
+        items: [
+          { name: "Insertion", path: "/visualizer/tree/bst/insertion" },
+          { name: "Deletion", path: "/visualizer/tree/bst/deletion" },
+          { name: "Searching", path: "/visualizer/tree/bst/searching" },
+          { name: "In-order Traversal", path: "/visualizer/tree/bst/in-order" },
+          { name: "Pre-order Traversal", path: "/visualizer/tree/bst/pre-order" },
+          { name: "Post-order Traversal", path: "/visualizer/tree/bst/post-order" },
+          { name: "Balancing (AVL)", path: "/visualizer/tree/bst/avl" },
+        ],
+      },
+      {
+        title: "Traversal",
+        items: [
+          { name: "Pre-order", path: "/visualizer/tree/traversing/pre-order" },
+          { name: "In-order", path: "/visualizer/tree/traversing/in-order" },
+          {
+            name: "Post-order",
+            path: "/visualizer/tree/traversing/post-order",
+          },
+          {
+            name: "Level-order (BFS)",
+            path: "/visualizer/tree/traversing/level-order",
+          },
+          {
+            name: "Morris Traversal",
+            path: "/visualizer/tree/traversing/morris",
+          },
+        ],
+      },
+      {
+        title: "Advanced Trees",
+        items: [
+          {
+            name: "Red-Black Trees",
+            path: "/visualizer/tree/advanced/red-black",
+          },
+          { name: "B-Trees", path: "/visualizer/tree/advanced/b-trees" },
+          { name: "AVL Tree Insertion", path: "/visualizer/tree/avl/insertion" },
+          { name: "AVL Tree Deletion", path: "/visualizer/tree/avl/deletion" },
+          {
+            name: "Trie (Prefix Tree)",
+            path: "/visualizer/tree/advanced/trie",
+          },
+          { name: "Segment Trees", path: "/visualizer/tree/advanced/segment" },
+          { name: "Fenwick Trees", path: "/visualizer/tree/advanced/fenwick" },
+          { name: "Disjoint Set Union (DSU)", path: "/visualizer/tree/advanced/dsu" },
+        ],
+      },
+      {
+        title: "Algorithms",
+        items: [
+          {
+            name: "Lowest Common Ancestor",
+            path: "/visualizer/tree/algorithms/lca",
+          },
+          {
+            name: "Tree Diameter",
+            path: "/visualizer/tree/algorithms/diameter",
+          },
+          {
+            name: "Tree Isomorphism",
+            path: "/visualizer/tree/algorithms/isomorphism",
+          },
+          {
+            name: "Serialize/Deserialize",
+            path: "/visualizer/tree/algorithms/serialization",
+          },
+        ],
+      },
+      {
+        title: "Applications",
+        items: [
+          {
+            name: "Heap (Min/Max)",
+            path: "/visualizer/tree/heap/min-heap",
+          },
+          { name: "Heap (Max)", path: "/visualizer/tree/heap/max-heap" },
+          {
+            name: "Heap Sort",
+            path: "/visualizer/tree/applications/heapsort",
+          },
+          {
+            name: "Huffman Coding",
+            path: "/visualizer/tree/applications/huffman",
+          },
+          {
+            name: "Decision Trees",
+            path: "/visualizer/tree/applications/decision-trees",
+          },
+          {
+            name: "Syntax Trees",
+            path: "/visualizer/tree/applications/syntax-trees",
+          },
+        ],
+      },
+      {
+        title: "Quizzes",
+        items: [
+          { name: "Binary Tree Quiz", path: "/visualizer/tree/binaryTree/quiz" },
+          { name: "Binary Search Tree Quiz", path: "/visualizer/tree/bst/quiz" },
+          { name: "Tree Traversal Quiz", path: "/visualizer/tree/traversing/quiz" },
+          { name: "Advanced Tree Quiz", path: "/visualizer/tree/advanced/quiz" },
+          { name: "Tree Applications Quiz", path: "/visualizer/tree/applications/quiz" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "HashMap",
+    slug: "hashmap",
+    desc: "Key-value pairs with hash function and collision handling",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"
+        />
+      </svg>
+    ),
+    info: {
+      About:
+        "HashMap stores key-value pairs using a hash function to compute bucket index. Provides O(1) average time for insert, search, and delete. Collision handled via chaining.",
+      Representation: null,
+    },
+    subsections: [
+      {
+        title: "Operations",
+        items: [
+          { name: "Insert (put)", path: "/visualizer/hashmap/insert" },
+          { name: "Search (get)", path: "/visualizer/hashmap/search" },
+          { name: "Delete (remove)", path: "/visualizer/hashmap/delete" },
+        ],
+      },
+      {
+        title: "Quizzes",
+        items: [
+          { name: "HashMap Operation Quiz", path: "/visualizer/hashmap/operations/quiz" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Graph",
+    slug: "graph",
+    desc: "BFS, DFS, shortest paths, MST & topological sort",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+        />
+      </svg>
+    ),
+    info: {
+      About:
+        "A graph is a data structure made up of: Nodes (also called vertices) Represent entities. Edges Represent connections between nodes.",
+      Representation: <GraphModal />,
+    },
+    subsections: [
+      {
+        title: "Representation",
+        items: [
+          {
+            name: "Adjacency Matrix",
+            path: "/visualizer/graph/adjacency-matrix",
+          },
+          {
+            name: "Adjacency List",
+            path: "/visualizer/graph/adjacency-list",
+          },
+        ],
+      },
+      {
+        title: "Traversal",
+        items: [
+          {
+            name: "Breadth-First Search (BFS)",
+            path: "/visualizer/graph/bfs",
+          },
+          {
+            name: "Depth-First Search (DFS)",
+            path: "/visualizer/graph/dfs",
+          },
+        ],
+      },
+      {
+        title: "Algorithms",
+        items: [
+          {
+            name: "Dijkstra's Algorithm",
+            path: "/visualizer/graph/dijkstra",
+          },
+          {
+            name: "Floyd-Warshall Algorithm",
+            path: "/visualizer/graph/floyd-warshall",
+          },
+          {
+            name: "Prim's Algorithm",
+            path: "/visualizer/graph/prim",
+          },
+          {
+            name: "Kruskal's Algorithm",
+            path: "/visualizer/graph/kruskal",
+          },
+          {
+            name: "Topological Sort",
+            path: "/visualizer/graph/topological-sort",
+          },
+          {
+            name: "Bellman-Ford Algorithm",
+            path: "/visualizer/graph/bellman-ford",
+          },
+          {
+            name: "Kosaraju's Algorithm",
+            path: "/visualizer/graph/kosaraju",
+          },
+        ],
+      },
+      {
+        title: "Quizzes",
+        items: [
+          { name: "Graph Representation Quiz", path: "/visualizer/graph/representation/quiz" },
+          { name: "Graph Traversal Quiz", path: "/visualizer/graph/traversal/quiz" },
+          { name: "Graph Algorithms Quiz", path: "/visualizer/graph/algorithms/quiz" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Dynamic Programming",
+    slug: "dp",
+    desc: "Visualized matrices for the Knapsack Problem, Longest Common Subsequence, and Coin Change",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
+      </svg>
+    ),
+    info: {
+      About:
+        "Dynamic Programming is a method for solving complex problems by breaking them down into simpler subproblems. It is applicable when the problem has overlapping subproblems and optimal substructure.",
+      Representation: null,
+    },
+    subsections: [
+      {
+        title: "Algorithms",
+        items: [
+          {
+            name: "0/1 Knapsack Problem",
+            path: "/visualizer/dp/knapsack",
+          },
+          {
+            name: "Longest Common Subsequence",
+            path: "/visualizer/dp/lcs",
+          },
+          {
+            name: "Coin Change",
+            path: "/visualizer/dp/coin-change",
+          },
+        ],
+      },
+      {
+        title: "Quizzes",
+        items: [
+          { name: "Dynamic Programming Quiz", path: "/visualizer/dp/quiz" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "AI Algorithms",
+    slug: "ai",
+    desc: "Search algorithms used in Artificial Intelligence, heuristic pathfinding, and game tree decision making",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+        />
+      </svg>
+    ),
+    info: {
+      About:
+        "AI algorithms involve search and optimization techniques used to find the best possible moves or paths, often used in game theory like Chess or Tic-Tac-Toe. Examples include Min Max, Alpha Beta Pruning, A* Search, and Monte Carlo Tree Search.",
+      Representation: null,
+    },
+    subsections: [
+      {
+        title: "Adversarial Search",
+        items: [
+          {
+            name: "Min Max Algorithm",
+            path: "/visualizer/ai/minmax",
+          },
+          {
+            name: "Alpha Beta Pruning",
+            path: "/visualizer/ai/alpha-beta-pruning",
+          },
+          {
+            name: "A* Search",
+            path: "/visualizer/ai/astar",
+          },
+          {
+            name: "Monte Carlo Tree Search (MCTS)",
+            path: "/visualizer/ai/mcts",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const Visualizer = () => {
+  const clientSections = sections.map(({ info, ...rest }) => ({
+    ...rest,
+    slug: rest.slug || rest.title.toLowerCase().replace(/\s+/g, "-")
+  }));
+
+  return (
+    <div
+      className="min-h-screen bg-white dark:bg-[#1c1d1f] text-gray-800 dark:text-gray-200 flex flex-col"
+      style={{ fontFamily: "'Inter', 'Source Sans 3', sans-serif" }}
+    >
+      <TutorialOverlay />
+      <VisualizerClient initialSections={clientSections} />
+      <BackToTop />
+      <div className="w-full relative">
+        <BookmarkSection />
+        <Footer />
+      </div>
+    </div>
+  );
+};
+
+export default Visualizer;
diff --git a/src/app/visualizer/queue/implementation/array/AlgorithmClient.jsx b/src/app/visualizer/queue/implementation/array/AlgorithmClient.jsx
new file mode 100644
index 000000000..1cea677f7
--- /dev/null
+++ b/src/app/visualizer/queue/implementation/array/AlgorithmClient.jsx
@@ -0,0 +1,27 @@
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/queue/implementation/array/content";
+import Code from "@/app/visualizer/queue/implementation/array/codeblock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Queue", "Using Array")}
+      title="Using Array"
+      headerActions={<ArticleActions />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other implementation"
+          links={[{ text: "Using Linked List", url: "./linkedList" }]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/queue/implementation/array/codeblock.jsx b/src/app/visualizer/queue/implementation/array/codeblock.jsx
new file mode 100644
index 000000000..1551a1713
--- /dev/null
+++ b/src/app/visualizer/queue/implementation/array/codeblock.jsx
@@ -0,0 +1,172 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for Queue (Array Implementation) ──────────────
+const codeExamples = {
+  javascript: `// Queue Implementation (Array)
+class Queue{
+    constructor(size){
+        this.capacity=size;
+        this.arr=new Array(size);
+        this.front=this.rear=-1;
+    }
+    enqueue(item){
+        if((this.rear+1)%this.capacity===this.front){
+            console.log("Queue Overflow");
+            return;
+        }
+        if(this.front===-1){
+            this.front=this.rear=0;
+        }else{
+            this.rear=(this.rear+1)%this.capacity;
+        }
+        this.arr[this.rear]=item;
+    }
+    dequeue(){
+        if(this.front===-1){
+            console.log("Queue Underflow");
+            return -1;
+        }
+        const item=this.arr[this.front];
+        if(this.front===this.rear){
+            this.front=this.rear=-1;
+        }else{
+            this.front=(this.front+1)%this.capacity;
+        }
+        return item;
+    }
+}
+// Usage
+const queue=new Queue(5);
+queue.enqueue(10);
+queue.enqueue(20);
+queue.enqueue(30);
+console.log(queue.dequeue());
+console.log(queue.dequeue());`,
+
+  python: `# Queue Implementation
+class Queue:
+    def __init__(self,size):
+        self.capacity=size
+        self.arr=[None]*size
+        self.front=self.rear=-1
+
+    def enqueue(self,item):
+        if((self.rear+1)%self.capacity==self.front):
+            print("Queue Overflow")
+            return
+        if(self.front==-1):
+            self.front=self.rear=0
+        else:
+            self.rear=(self.rear+1)%self.capacity
+        self.arr[self.rear]=item
+
+    def dequeue(self):
+        if(self.front==-1):
+            print("Queue Underflow")
+            return -1
+        item=self.arr[self.front]
+        if(self.front==self.rear):
+            self.front=self.rear=-1
+        else:
+            self.front=(self.front+1)%self.capacity
+        return item`,
+
+  java: `// Queue Implementation
+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 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;
+    }
+}`,
+
+  c: `// Queue Implementation
+#include<stdio.h>
+#include<stdbool.h>
+#define MAX_SIZE 100
+typedef struct{
+    int arr[MAX_SIZE];
+    int front;
+    int rear;
+}Queue;
+void initialize(Queue* q){
+    q->front=q->rear=-1;
+}
+void enqueue(Queue* q,int item){
+    if((q->rear+1)%MAX_SIZE==q->front){
+        printf("Queue Overflow\\n");
+        return;
+    }
+    if(q->front==-1){
+        q->front=q->rear=0;
+    }else{
+        q->rear=(q->rear+1)%MAX_SIZE;
+    }
+    q->arr[q->rear]=item;
+}`,
+
+  cpp: `// Queue Implementation
+#include<iostream>
+using namespace std;
+class Queue{
+private:
+    int* arr;
+    int front;
+    int rear;
+    int capacity;
+public:
+    Queue(int size){
+        capacity=size;
+        arr=new int[capacity];
+        front=rear=-1;
+    }
+    void enqueue(int item){
+        if((rear+1)%capacity==front){
+            cout<<"Queue Overflow";
+            return;
+        }
+        if(front==-1){
+            front=rear=0;
+        }else{
+            rear=(rear+1)%capacity;
+        }
+        arr[rear]=item;
+    }
+};`
+};
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'queue.js',
+    python:'queue.py',
+    java:'ArrayQueue.java',
+    c:'queue.c',
+    cpp:'queue.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/queue/implementation/array/content.jsx b/src/app/visualizer/queue/implementation/array/content.jsx
new file mode 100644
index 000000000..3cd7d6dd9
--- /dev/null
+++ b/src/app/visualizer/queue/implementation/array/content.jsx
@@ -0,0 +1,236 @@
+"use client";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraph = [
+    `Implementing a Queue using an array is a fundamental approach where we use a fixed-size or dynamic array to store elements while maintaining FIFO order. The array implementation requires careful handling of front and rear pointers to efficiently enqueue and dequeue elements.`,
+    `In a circular array implementation, we treat the array as circular to maximize space utilization. When either pointer reaches the end of the array, it wraps around to the beginning.`,
+    `Queues are widely used in scenarios like printer job scheduling, call center systems, and network packet handling where order preservation is crucial.`,
+  ];
+
+  const implementationSteps = [
+    {
+      points:
+        "Initialize an array of fixed size (for static implementation) or dynamic array",
+    },
+    {
+      points:
+        "Initialize two pointers: front (for dequeue) and rear (for enqueue), both set to -1 initially",
+    },
+    {
+      points:
+        "Implement boundary checks for overflow (full queue) and underflow (empty queue) conditions",
+    },
+    {
+      points:
+        "For circular queue implementation, use modulo arithmetic for pointer updates",
+    },
+  ];
+
+  const enqueueAlgorithm = [
+    {
+      points:
+        "Check if queue is full (if (rear == capacity - 1) for linear array)",
+    },
+    { points: "For empty queue, set both front and rear to 0" },
+    { points: "For circular queue: rear = (rear + 1) % capacity" },
+    { points: "Insert new element at items[rear]" },
+    { points: "Increment size counter" },
+  ];
+
+  const dequeueAlgorithm = [
+    { points: "Check if queue is empty (front == -1)" },
+    { points: "Store the front element to return later" },
+    { points: "If only one element (front == rear), reset pointers to -1" },
+    { points: "For circular queue: front = (front + 1) % capacity" },
+    { points: "Decrement size counter" },
+    { points: "Return the stored element" },
+  ];
+
+  const complexity = [
+    {
+      points:
+        "Enqueue Operation: O(1) - Amortized constant time for dynamic arrays",
+    },
+    {
+      points:
+        "Dequeue Operation: O(1) - No shifting needed with pointer approach",
+    },
+    { points: "Peek Operation: O(1) - Direct access via front pointer" },
+    { points: "Space Usage: O(n) - Linear space for storing elements" },
+  ];
+
+  const prosCons = [
+    {
+      points:
+        "Pros: Simple implementation, cache-friendly (array elements contiguous in memory)",
+    },
+    { points: "Pros: Efficient O(1) operations with pointer tracking" },
+    { points: "Cons: Fixed size limitation in static array implementation" },
+    {
+      points:
+        "Cons: Wasted space in linear array implementation without circular approach",
+    },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* Queue Array Implementation Overview */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Queue Implementation Using Array
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraph[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* Implementation Steps */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Implementation Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {implementationSteps.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Enqueue Algorithm */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Enqueue Algorithm
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {enqueueAlgorithm.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Dequeue Algorithm */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Dequeue Algorithm
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {dequeueAlgorithm.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time & Space Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {complexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                    {item.points.split(":")[0]}:
+                  </span>
+                  <span className="ml-2">{item.points.split(":")[1]}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Pros and Cons */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Pros and Cons
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {prosCons.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                Practical Considerations
+              </h3>
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraph[1]}
+              </p>
+              <p className="text-[#374151] dark:text-[#d1d5db] mt-2 leading-relaxed">
+                {paragraph[2]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/queue/implementation/linkedList/AlgorithmClient.jsx b/src/app/visualizer/queue/implementation/linkedList/AlgorithmClient.jsx
new file mode 100644
index 000000000..fdd7fcfa0
--- /dev/null
+++ b/src/app/visualizer/queue/implementation/linkedList/AlgorithmClient.jsx
@@ -0,0 +1,27 @@
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/queue/implementation/linkedList/content";
+import Code from "@/app/visualizer/queue/implementation/linkedList/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Queue", "Using Linked List")}
+      title="Using Linked List"
+      headerActions={<ArticleActions />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other implementation"
+          links={[{ text: "Using Array", url: "./array" }]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/queue/implementation/linkedList/codeBlock.jsx b/src/app/visualizer/queue/implementation/linkedList/codeBlock.jsx
new file mode 100644
index 000000000..910f271d8
--- /dev/null
+++ b/src/app/visualizer/queue/implementation/linkedList/codeBlock.jsx
@@ -0,0 +1,186 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for Queue using Linked List ─────────────────
+const codeExamples = {
+  javascript: `// Queue using Linked List
+class Node{
+    constructor(data){
+        this.data=data;
+        this.next=null;
+    }
+}
+class Queue{
+    constructor(){
+        this.front=null;
+        this.rear=null;
+    }
+    enqueue(item){
+        const newNode=new Node(item);
+        if(this.rear===null){
+            this.front=this.rear=newNode;
+        }else{
+            this.rear.next=newNode;
+            this.rear=newNode;
+        }
+    }
+    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;
+    }
+    isEmpty(){
+        return this.front===null;
+    }
+}
+// Usage
+const queue=new Queue();
+queue.enqueue(10);
+queue.enqueue(20);
+queue.enqueue(30);
+console.log(queue.dequeue());
+console.log(queue.isEmpty());`,
+
+  python: `# Queue using 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
+    def enqueue(self,item):
+        newNode=Node(item)
+        if(self.rear is None):
+            self.front=self.rear=newNode
+        else:
+            self.rear.next=newNode
+            self.rear=newNode
+    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
+    def is_empty(self):
+        return self.front is None`,
+
+  java: `// Queue using Linked List
+public class LinkedListQueue{
+    class Node{
+        int data;
+        Node next;
+        Node(int data){
+            this.data=data;
+            next=null;
+        }
+    }
+    private Node front,rear;
+    public void enqueue(int item){
+        Node newNode=new Node(item);
+        if(rear==null){
+            front=rear=newNode;
+        }else{
+            rear.next=newNode;
+            rear=newNode;
+        }
+    }
+    public int dequeue(){
+        if(front==null){
+            return -1;
+        }
+        Node temp=front;
+        front=front.next;
+        if(front==null){
+            rear=null;
+        }
+        return temp.data;
+    }
+}`,
+
+  c: `// Queue using Linked List
+#include<stdio.h>
+#include<stdlib.h>
+#include<stdbool.h>
+typedef struct Node{
+    int data;
+    struct Node* next;
+}Node;
+typedef struct{
+    Node* front;
+    Node* rear;
+}Queue;
+void enqueue(Queue* q,int item){
+    Node* newNode=(Node*)malloc(sizeof(Node));
+    newNode->data=item;
+    newNode->next=NULL;
+    if(q->rear==NULL){
+        q->front=q->rear=newNode;
+    }else{
+        q->rear->next=newNode;
+        q->rear=newNode;
+    }
+}`,
+
+  cpp: `// Queue using 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;
+    }
+    void enqueue(int item){
+        Node* newNode=new Node(item);
+        if(rear==nullptr){
+            front=rear=newNode;
+        }else{
+            rear->next=newNode;
+            rear=newNode;
+        }
+    }
+};`
+};
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'linkedListQueue.js',
+    python:'linked_list_queue.py',
+    java:'LinkedListQueue.java',
+    c:'linked_list_queue.c',
+    cpp:'linked_list_queue.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const LinkedListQueueCode = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default LinkedListQueueCode;
\ No newline at end of file
diff --git a/src/app/visualizer/queue/implementation/linkedList/content.jsx b/src/app/visualizer/queue/implementation/linkedList/content.jsx
new file mode 100644
index 000000000..e439370f2
--- /dev/null
+++ b/src/app/visualizer/queue/implementation/linkedList/content.jsx
@@ -0,0 +1,195 @@
+"use client";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraph = [
+    `Implementing a Queue using a linked list provides dynamic memory allocation and efficient insertion/removal operations. Unlike array implementation, linked list queues don't have fixed capacity limitations and can grow dynamically as needed.`,
+    `Each node in the linked list contains the data and a pointer to the next node. The front pointer points to the first node (for dequeue), while the rear pointer points to the last node (for enqueue).`,
+    `Linked list queues are particularly useful when the maximum size isn't known in advance or when frequent insertions/deletions are required.`,
+  ];
+
+  const implementationSteps = [
+    { points: "Define a Node class with data and next pointer attributes" },
+    { points: "Create Queue class with front and rear pointers initialized to null" },
+    { points: "Implement enqueue by adding nodes at the rear" },
+    { points: "Implement dequeue by removing nodes from the front" },
+    { points: "Maintain proper pointer connections during operations" },
+  ];
+
+  const enqueueAlgorithm = [
+    { points: "Create a new node with the given data" },
+    { points: "If queue is empty, set both front and rear to the new node" },
+    { points: "Else, set rear.next to the new node and update rear pointer" },
+    { points: "Increment the size counter" },
+  ];
+
+  const dequeueAlgorithm = [
+    { points: "Check if queue is empty (front === null)" },
+    { points: "Store the front node to return later" },
+    { points: "Move front pointer to front.next" },
+    { points: "If front becomes null (queue is now empty), set rear to null" },
+    { points: "Decrement the size counter" },
+    { points: "Return the stored node's data" },
+  ];
+
+  const complexity = [
+    { points: "Enqueue Operation: O(1) - Constant time to add at tail" },
+    { points: "Dequeue Operation: O(1) - Constant time to remove from head" },
+    { points: "Peek Operation: O(1) - Direct access via front pointer" },
+    { points: "Space Usage: O(n) - Linear space for storing elements plus pointer overhead" },
+  ];
+
+  const prosCons = [
+    { points: "Pros: No fixed size limitation - grows dynamically" },
+    { points: "Pros: Efficient O(1) operations for both enqueue and dequeue" },
+    { points: "Pros: No wasted memory (only allocates what's needed)" },
+    { points: "Cons: Extra memory for node pointers (next references)" },
+    { points: "Cons: Not cache-friendly (nodes may be scattered in memory)" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* Queue Linked List Implementation Overview */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Queue Implementation Using Linked List
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraph[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* Implementation Steps */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Implementation Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {implementationSteps.map((item, index) => (
+                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Enqueue Algorithm */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Enqueue Algorithm
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {enqueueAlgorithm.map((item, index) => (
+                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Dequeue Algorithm */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Dequeue Algorithm
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {dequeueAlgorithm.map((item, index) => (
+                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time & Space Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {complexity.map((item, index) => (
+                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                    {item.points.split(':')[0]}:
+                  </span>
+                  <span className="ml-2">{item.points.split(':')[1]}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Pros and Cons */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Pros and Cons
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {prosCons.map((item, index) => (
+                <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">When to Use Linked List Queue</h3>
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraph[2]}
+              </p>
+              <ul className="mt-2 space-y-1 list-disc pl-5 marker:text-primary dark:marker:text-[#c27cf7]">
+                <li className="text-[#374151] dark:text-[#d1d5db]">When the maximum queue size is unpredictable</li>
+                <li className="text-[#374151] dark:text-[#d1d5db]">When memory efficiency is more important than cache performance</li>
+                <li className="text-[#374151] dark:text-[#d1d5db]">In applications with frequent dynamic memory allocation/deallocation</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/queue/implementation/quiz/QueueImplementationQuizClient.jsx b/src/app/visualizer/queue/implementation/quiz/QueueImplementationQuizClient.jsx
new file mode 100644
index 000000000..8d9e44214
--- /dev/null
+++ b/src/app/visualizer/queue/implementation/quiz/QueueImplementationQuizClient.jsx
@@ -0,0 +1,98 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowLeft, Play } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function QueueImplementationQuizClient() {
+  const quizzes = [
+    {
+      title: "Queue Using Array Quiz",
+      description:
+        "Practice queue implementation using arrays, front and rear pointers, fixed-size storage, and circular indexing concepts.",
+      href: "/visualizer/queue/implementation/quiz/array",
+      filename: "queue_array_impl_quiz.js",
+    },
+    {
+      title: "Queue Using Linked List Quiz",
+      description:
+        "Practice queue implementation using linked lists, dynamic memory allocation, node linking, and pointer manipulation.",
+      href: "/visualizer/queue/implementation/quiz/linked-list",
+      filename: "queue_linked_list_impl_quiz.js",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-[var(--udemy-text)] dark:text-white transition-colors duration-300 pb-20">
+
+      {/* Header */}
+      <section className="relative pt-6 pb-4">
+        <div className="max-w-[1100px] mx-auto px-4">
+          <Link href="/visualizer/quiz">
+            <button className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] dark:text-[var(--color-primary-light)] hover:opacity-85 transition-opacity mb-3">
+              <ArrowLeft size={16} />
+              <span>Back to all quizzes</span>
+            </button>
+          </Link>
+
+          <h1 className="text-2xl md:text-3xl font-black mb-2">
+            Queue Implementation Quiz Portal
+          </h1>
+
+          <p className="text-[14px] text-surface-600 dark:text-surface-400 font-medium">
+            Choose a quiz to test your conceptual understanding of queue implementation techniques.
+          </p>
+        </div>
+      </section>
+
+      {/* Quiz Cards */}
+      <div className="max-w-4xl mx-auto px-4 mt-8">
+        <div className="grid md:grid-cols-2 gap-6 items-stretch">
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{
+                duration: 0.4,
+                delay: index * 0.1,
+                ease: [0.22, 1, 0.36, 1],
+              }}
+              whileHover={{ y: -6, scale: 1.015 }}
+              whileTap={{ scale: 0.985 }}
+              className="group flex flex-col h-full rounded-2xl border border-emerald-500/20 dark:border-emerald-500/30 bg-white dark:bg-[#1a1a1a] overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
+            >
+              {/* Top Bar */}
+              <div className="flex items-center justify-between px-4 py-2.5 bg-emerald-500/10 dark:bg-emerald-500/20 border-b border-emerald-500/20 dark:border-emerald-500/30">
+                <div className="flex items-center gap-1.5 font-mono text-[11px] text-surface-600 dark:text-surface-300">
+                  <span className="text-violet-500 font-bold">$</span>
+                  <span>node {quiz.filename}</span>
+                </div>
+              </div>
+
+              {/* Card Content */}
+              <div className="p-6 flex-1 flex flex-col justify-between">
+                <div>
+                  <h2 className="text-[20px] font-extrabold text-surface-900 dark:text-white group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors mb-2">
+                    {quiz.title}
+                  </h2>
+
+                  <p className="text-[14px] text-surface-600 dark:text-surface-300 leading-relaxed mb-6">
+                    {quiz.description}
+                  </p>
+                </div>
+
+                <Link href={quiz.href} className="block mt-auto w-full">
+                  <button className="w-full h-11 rounded-xl bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white font-bold text-[14px] flex items-center justify-center gap-2 shadow-sm hover:shadow-md transition-all">
+                    <span>Start Quiz</span>
+                    <Play size={14} className="fill-current" />
+                  </button>
+                </Link>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/queue/implementation/quiz/array/page.jsx b/src/app/visualizer/queue/implementation/quiz/array/page.jsx
new file mode 100644
index 000000000..e87914971
--- /dev/null
+++ b/src/app/visualizer/queue/implementation/quiz/array/page.jsx
@@ -0,0 +1,5 @@
+import QueueArrayQuiz from "./quiz";
+
+export default function Page() {
+  return <QueueArrayQuiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/queue/implementation/quiz/array/quiz.jsx b/src/app/visualizer/queue/implementation/quiz/array/quiz.jsx
new file mode 100644
index 000000000..658b6b53a
--- /dev/null
+++ b/src/app/visualizer/queue/implementation/quiz/array/quiz.jsx
@@ -0,0 +1,123 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QueueArrayQuiz = () => {
+  const questions = [
+    {
+      question: "Which data structure is commonly used to implement a queue using an array?",
+      options: [
+        "Static array with front and rear pointers",
+        "Binary Tree",
+        "Stack",
+        "Hash Table"
+      ],
+      correctAnswer: 0,
+      explanation:
+        "A queue implemented using an array maintains front and rear indices."
+    },
+    {
+      question: "Which pointer indicates the first element in an array-based queue?",
+      options: ["rear", "front", "top", "head"],
+      correctAnswer: 1,
+      explanation:
+        "The front pointer always points to the first element."
+    },
+    {
+      question: "Where is a new element inserted in an array queue?",
+      options: [
+        "Front",
+        "Middle",
+        "Rear",
+        "Random position"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "New elements are always inserted at the rear."
+    },
+    {
+      question: "Which condition causes queue overflow?",
+      options: [
+        "rear == front",
+        "rear == capacity - 1",
+        "front == -1",
+        "rear < front"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "When the rear reaches the last array index, overflow occurs."
+    },
+    {
+      question: "Which condition indicates an empty queue?",
+      options: [
+        "front == rear",
+        "front == -1",
+        "rear == capacity",
+        "front == capacity"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Initially, both pointers are generally set to -1."
+    },
+    {
+      question: "What is the time complexity of enqueue in an array queue?",
+      options: ["O(1)", "O(n)", "O(log n)", "O(n²)"],
+      correctAnswer: 0,
+      explanation:
+        "Enqueue simply inserts at the rear."
+    },
+    {
+      question: "What is the time complexity of dequeue in an array queue?",
+      options: ["O(1)", "O(n)", "O(log n)", "O(n²)"],
+      correctAnswer: 0,
+      explanation:
+        "Removing the front element takes constant time."
+    },
+    {
+      question: "Which drawback exists in a simple linear array queue?",
+      options: [
+        "Duplicate values",
+        "Memory wastage after dequeue",
+        "Slow searching",
+        "Cannot store integers"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Freed positions cannot be reused efficiently in a linear queue."
+    },
+    {
+      question: "Which queue implementation solves the memory wastage problem?",
+      options: [
+        "Priority Queue",
+        "Circular Queue",
+        "Deque",
+        "Stack"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Circular queues reuse empty positions."
+    },
+    {
+      question: "What is the initial value of front and rear in many implementations?",
+      options: [
+        "0",
+        "1",
+        "-1",
+        "capacity"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Both pointers usually start at -1 before insertion."
+    }
+  ];
+
+  return (
+    <QuizEngine
+      title="Queue Using Array Quiz"
+      questions={questions}
+    />
+  );
+};
+
+export default QueueArrayQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/queue/implementation/quiz/linked-list/page.jsx b/src/app/visualizer/queue/implementation/quiz/linked-list/page.jsx
new file mode 100644
index 000000000..462bd32de
--- /dev/null
+++ b/src/app/visualizer/queue/implementation/quiz/linked-list/page.jsx
@@ -0,0 +1,5 @@
+import QueueLinkedListQuiz from "./quiz";
+
+export default function Page() {
+  return <QueueLinkedListQuiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/queue/implementation/quiz/linked-list/quiz.jsx b/src/app/visualizer/queue/implementation/quiz/linked-list/quiz.jsx
new file mode 100644
index 000000000..8c531f724
--- /dev/null
+++ b/src/app/visualizer/queue/implementation/quiz/linked-list/quiz.jsx
@@ -0,0 +1,138 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QueueLinkedListQuiz = () => {
+  const questions = [
+    {
+      question: "Which data structure is used to implement a linked list queue?",
+      options: [
+        "Array",
+        "Linked List",
+        "Binary Tree",
+        "Stack"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "A linked list stores queue elements dynamically."
+    },
+    {
+      question: "Which pointer represents the beginning of the queue?",
+      options: [
+        "rear",
+        "front",
+        "tail",
+        "current"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The front pointer always points to the first node."
+    },
+    {
+      question: "Which pointer represents the last node?",
+      options: [
+        "front",
+        "rear",
+        "head",
+        "next"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The rear pointer always points to the newest node."
+    },
+    {
+      question: "Where is a new node inserted?",
+      options: [
+        "Front",
+        "Middle",
+        "Rear",
+        "Anywhere"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "New nodes are inserted at the rear."
+    },
+    {
+      question: "Which node is removed during dequeue?",
+      options: [
+        "Rear node",
+        "Middle node",
+        "Front node",
+        "Last inserted node"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "The front node is removed first."
+    },
+    {
+      question: "What is the time complexity of enqueue?",
+      options: [
+        "O(1)",
+        "O(n)",
+        "O(log n)",
+        "O(n²)"
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Maintaining a rear pointer allows O(1) insertion."
+    },
+    {
+      question: "What is the time complexity of dequeue?",
+      options: [
+        "O(1)",
+        "O(n)",
+        "O(log n)",
+        "O(n²)"
+      ],
+      correctAnswer: 0,
+      explanation:
+        "The front node is removed in constant time."
+    },
+    {
+      question: "Which advantage does a linked list queue have over an array queue?",
+      options: [
+        "Requires fixed memory",
+        "Dynamic memory allocation",
+        "Stores only integers",
+        "Cannot overflow"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Linked lists grow dynamically as needed."
+    },
+    {
+      question: "When does overflow occur in a linked list queue?",
+      options: [
+        "When rear reaches the end",
+        "When front equals rear",
+        "When system memory is exhausted",
+        "Never"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Overflow only occurs if memory allocation fails."
+    },
+    {
+      question: "Which real-world application commonly uses linked list queues?",
+      options: [
+        "Printer scheduling",
+        "Expression parsing",
+        "Binary search",
+        "Sorting arrays"
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Printer and task scheduling often use linked-list-based queues."
+    }
+  ];
+
+  return (
+    <QuizEngine
+      title="Queue Using Linked List Quiz"
+      questions={questions}
+    />
+  );
+};
+
+export default QueueLinkedListQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/queue/implementation/quiz/page.jsx b/src/app/visualizer/queue/implementation/quiz/page.jsx
new file mode 100644
index 000000000..010982f00
--- /dev/null
+++ b/src/app/visualizer/queue/implementation/quiz/page.jsx
@@ -0,0 +1,5 @@
+import QueueImplementationQuizClient from "./QueueImplementationQuizClient";
+
+export default function Page() {
+  return <QueueImplementationQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/queue/operations/enqueue-dequeue/AlgorithmClient.jsx b/src/app/visualizer/queue/operations/enqueue-dequeue/AlgorithmClient.jsx
new file mode 100644
index 000000000..beafe829a
--- /dev/null
+++ b/src/app/visualizer/queue/operations/enqueue-dequeue/AlgorithmClient.jsx
@@ -0,0 +1,33 @@
+import Animation from "@/app/visualizer/queue/operations/enqueue-dequeue/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/queue/operations/enqueue-dequeue/content";
+import Code from "@/app/visualizer/queue/operations/enqueue-dequeue/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Queue", "Enqueue & Dequeue")}
+      title="Enqueue & Dequeue"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore Other Operations"
+          links={[
+            { text: "Peek Front", url: "./peek-front" },
+            { text: "Is Empty", url: "./isempty" },
+            { text: "Is Full", url: "./isfull" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/queue/operations/enqueue-dequeue/animation.jsx b/src/app/visualizer/queue/operations/enqueue-dequeue/animation.jsx
new file mode 100644
index 000000000..7bd002f6e
--- /dev/null
+++ b/src/app/visualizer/queue/operations/enqueue-dequeue/animation.jsx
@@ -0,0 +1,216 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { enqueueGenerator, dequeueGenerator } from "@/features/algorithms/queue/enqueueDequeueLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+const QueueVisualizer = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [queue, setQueue] = useState([]);
+  const [pendingOp, setPendingOp] = useState(null); // { type: 'enqueue', value: string } | { type: 'dequeue' }
+
+  const frames = useMemo(() => {
+    if (!pendingOp) return [];
+    if (pendingOp.type === 'enqueue') {
+        return Array.from(enqueueGenerator(queue, pendingOp.value));
+    } else {
+        return Array.from(dequeueGenerator(queue));
+    }
+  }, [queue, pendingOp]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 800 });
+
+  const enqueue = () => {
+    if (!inputValue || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'enqueue', value: inputValue });
+    engine.reset();
+    engine.play();
+  };
+
+  const dequeue = () => {
+    if (queue.length === 0 || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'dequeue' });
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setInputValue("");
+    setQueue([]);
+    setPendingOp(null);
+    engine.reset();
+  };
+
+  useVisualizerReset(handleReset);
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.phase === 'complete') {
+         setQueue(finalFrame.queue);
+      }
+      setPendingOp(null);
+      engine.reset();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  // Auto-commit on completion
+  React.useEffect(() => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0 && !engine.isPlaying) {
+        const finalFrame = frames[frames.length - 1];
+        if (finalFrame && finalFrame.phase === 'complete') {
+            setQueue(finalFrame.queue);
+            setPendingOp(null);
+            if (pendingOp?.type === 'enqueue') setInputValue("");
+            engine.reset();
+        }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine, pendingOp]);
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        phase: 'idle',
+        queue: queue,
+        explanation: "Enter a value and click 'Enqueue' to add it to the rear, or 'Dequeue' to remove from the front."
+      };
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize the basic Enqueue (add to rear) and Dequeue (remove from front) operations.
+      </p>
+
+      <VisualizerCard>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              className="flex-1 rounded-lg border bg-white p-3 dark:bg-gray-700"
+              placeholder="Enter value"
+              disabled={engine.isPlaying || pendingOp !== null}
+            />
+            <button
+              onClick={enqueue}
+              disabled={engine.isPlaying || !inputValue || pendingOp !== null}
+              className="w-full rounded-lg bg-primary px-6 py-3 text-white transition hover:bg-primary-dark disabled:bg-gray-400 sm:w-auto"
+            >
+              {engine.isPlaying && pendingOp?.type === 'enqueue' ? "Enqueuing..." : "Enqueue"}
+            </button>
+          </div>
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <button
+              onClick={dequeue}
+              disabled={engine.isPlaying || queue.length === 0 || pendingOp !== null}
+              className="w-full rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 disabled:opacity-50 dark:border-white dark:text-white dark:hover:bg-gray-700 sm:w-1/2"
+            >
+              {engine.isPlaying && pendingOp?.type === 'dequeue' ? "Dequeuing..." : "Dequeue"}
+            </button>
+            <button
+              onClick={handleReset}
+              disabled={engine.isPlaying && pendingOp === null}
+              className="w-full rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 dark:border-white dark:text-white dark:hover:bg-gray-700 sm:w-1/2"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center min-h-[60px] flex items-center justify-center">
+         <p className="text-gray-800 dark:text-gray-200 font-medium">
+             {currentFrame.explanation}
+         </p>
+      </div>
+
+      <VisualizerCard>
+        <div className="mb-6 flex justify-between px-4 text-sm font-semibold text-gray-500 dark:text-gray-400 sm:px-8">
+          <div>Front (Head)</div>
+          <div>Rear (Tail)</div>
+        </div>
+        
+        <div className="relative flex min-h-[160px] w-full flex-col items-center justify-center overflow-x-auto rounded-xl border border-gray-200 bg-gray-50 p-6 dark:border-[#222] dark:bg-[#181818]">
+            {currentFrame.action === 'enqueue' && currentFrame.newValue && currentFrame.phase === 'start' && (
+                <div className="absolute right-10 top-0 mb-4 animate-bounce flex flex-col items-center">
+                    <span className="text-xs font-bold text-blue-500 mb-1">New Node</span>
+                    <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-blue-500 text-xl font-bold text-white shadow-lg">
+                        {currentFrame.newValue}
+                    </div>
+                </div>
+            )}
+            
+            {currentFrame.action === 'dequeue' && currentFrame.dequeuedNode && currentFrame.phase === 'start' && (
+                <div className="absolute left-10 top-0 mb-4 flex flex-col items-center opacity-50 scale-110 translate-y-[-20px] transition-all duration-500">
+                    <span className="text-xs font-bold text-rose-500 mb-1">Dequeued</span>
+                    <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-rose-500 text-xl font-bold text-white shadow-lg">
+                        {currentFrame.dequeuedNode.value}
+                    </div>
+                </div>
+            )}
+
+            {currentFrame.queue.length === 0 ? (
+                <div className="py-8 text-center text-gray-500">
+                Queue is empty
+                </div>
+            ) : (
+                <div className="flex items-center gap-4">
+                {currentFrame.queue.map((node, index) => {
+                    const isNew = currentFrame.action === 'enqueue' && currentFrame.phase === 'complete' && index === currentFrame.queue.length - 1;
+                    const scaleClass = isNew ? "scale-110 shadow-lg bg-blue-500" : "scale-100 bg-primary";
+                    
+                    return (
+                    <div
+                        key={node.id}
+                        className={`flex h-16 w-16 items-center justify-center rounded-lg text-xl font-bold text-white shadow-md transition-all duration-500 ${scaleClass}`}
+                    >
+                        {node.value}
+                    </div>
+                    );
+                })}
+                </div>
+            )}
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default QueueVisualizer;
diff --git a/src/app/visualizer/queue/operations/enqueue-dequeue/codeBlock.jsx b/src/app/visualizer/queue/operations/enqueue-dequeue/codeBlock.jsx
new file mode 100644
index 000000000..837e5a5f4
--- /dev/null
+++ b/src/app/visualizer/queue/operations/enqueue-dequeue/codeBlock.jsx
@@ -0,0 +1,173 @@
+'use client';
+
+import CodeBlock from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for Queue (Enqueue & Dequeue) ───────────────
+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;
+    }
+    enqueue(item){
+        const newNode=new Node(item);
+        if(this.rear===null){
+            this.front=this.rear=newNode;
+        }else{
+            this.rear.next=newNode;
+            this.rear=newNode;
+        }
+    }
+    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
+const queue=new Queue();
+queue.enqueue(10);
+queue.enqueue(20);
+queue.enqueue(30);
+console.log(queue.dequeue());
+console.log(queue.dequeue());`,
+
+  python: `# Queue Implementation in Python
+class Node:
+    def __init__(self,data):
+        self.data=data
+        self.next=None
+class Queue:
+    def __init__(self):
+        self.front=None
+        self.rear=None
+    def enqueue(self,item):
+        newNode=Node(item)
+        if(self.rear is None):
+            self.front=self.rear=newNode
+        else:
+            self.rear.next=newNode
+            self.rear=newNode
+    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`,
+
+  java: `// Queue Implementation in Java
+public class ArrayQueue{
+    private int[] arr;
+    private int front;
+    private int rear;
+    private int capacity;
+    public ArrayQueue(int size){
+        capacity=size;
+        arr=new int[capacity];
+        front=rear=-1;
+    }
+    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;
+    }
+    public int dequeue(){
+        if(front==-1){
+            return -1;
+        }
+        int item=arr[front];
+        if(front==rear){
+            front=rear=-1;
+        }else{
+            front=(front+1)%capacity;
+        }
+        return item;
+    }
+}`,
+
+  c: `// Queue Implementation in C
+#include<stdio.h>
+#include<stdbool.h>
+#define MAX_SIZE 100
+typedef struct{
+    int arr[MAX_SIZE];
+    int front;
+    int rear;
+}Queue;
+void initialize(Queue* q){
+    q->front=q->rear=-1;
+}
+void enqueue(Queue* q,int item){
+    if((q->rear+1)%MAX_SIZE==q->front){
+        printf("Queue Overflow\\n");
+        return;
+    }
+    if(q->front==-1){
+        q->front=q->rear=0;
+    }else{
+        q->rear=(q->rear+1)%MAX_SIZE;
+    }
+    q->arr[q->rear]=item;
+}`,
+
+  cpp: `// Queue Implementation in C++
+#include<iostream>
+using namespace std;
+class Queue{
+private:
+    Node* front;
+    Node* rear;
+public:
+    Queue(){
+        front=nullptr;
+        rear=nullptr;
+    }
+    void enqueue(int item){
+        Node* newNode=new Node(item);
+        if(rear==nullptr){
+            front=rear=newNode;
+        }else{
+            rear->next=newNode;
+            rear=newNode;
+        }
+    }
+}`
+};
+const fileNames = {
+    javascript:'enqueueDequeue.js',
+    python:'enqueue_dequeue.py',
+    java:'EnqueueDequeue.java',
+    c:'enqueue_dequeue.c',
+    cpp:'enqueue_dequeue.cpp'
+};
+const EnqueueDequeueCode = () => (
+    <CodeBlock
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default EnqueueDequeueCode;
\ No newline at end of file
diff --git a/src/app/visualizer/queue/operations/enqueue-dequeue/content.jsx b/src/app/visualizer/queue/operations/enqueue-dequeue/content.jsx
new file mode 100644
index 000000000..4ebb0469f
--- /dev/null
+++ b/src/app/visualizer/queue/operations/enqueue-dequeue/content.jsx
@@ -0,0 +1,224 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState('light');
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraph = [
+    `A Queue is a linear data structure that follows the First-In-First-Out (FIFO) principle. Elements are added at the rear (enqueue) and removed from the front (dequeue). It operates much like a real-world queue (line) where the first person to arrive is the first to be served.`,
+    `The space complexity is O(n) where n is the number of elements in the queue, as it needs to store all elements.`,
+    `Queues are fundamental in computer science and are used in various applications like CPU scheduling, disk scheduling, handling interrupts, breadth-first search, and any scenario where you need to maintain order of processing.`,
+  ];
+
+  const enqueue = [
+    { points : "Check if the queue is full (in case of fixed-size implementation)" },
+    { points : "If full, return overflow error (or resize in dynamic implementation)" },
+    { points : "Increment the rear pointer" },
+    { points : "Add the new element at the rear position" },
+  ];
+
+  const opeartionEnqueue = [
+    { points : "Before Enqueue: [10, 20, 30]" },
+    { points : "Enqueue(40): Add 40 to the rear" },
+    { points : "Enqueue(40): Add 40 to the rear" },
+  ];
+
+  const dequeue = [
+    { points : "Check if the queue is empty" },
+    { points : "If empty, return underflow error" },
+    { points : "Access the data at the front of the queue" },
+    { points : "Increment the front pointer to the next element" },
+    { points : "Return the accessed data" },
+  ];
+
+  const operationDequeue = [
+    { points : "Before Dequeue: [10, 20, 30, 40]" },
+    { points : "Dequeue(): Remove and return 10" },
+    { points : "After Dequeue: [20, 30, 40]" },
+  ];
+
+  const complexity = [
+    { points : "Enqueue Operation: O(1) - Constant time to add to the end" },
+    { points : "Dequeue Operation: O(1) - Constant time to remove from the front" },
+  ];
+
+    return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+    {/* What is a Queue? */}
+    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+        What is a Queue?
+      </h1>
+      <div className="prose dark:prose-invert max-w-none">
+        <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+          {paragraph[0]}
+        </p>
+      </div>
+    </section>
+
+    {/* Enqueue Operation */}
+    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+        Enqueue Operation
+      </h1>
+      <div className="prose dark:prose-invert max-w-none">
+        <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+          Enqueue adds an element to the end (rear) of the queue. Example with queue: [10, 20, 30]
+        </p>
+        
+        <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+          {opeartionEnqueue.map((item, index) => (
+            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+              {item.points}
+            </li>
+          ))}
+        </ol>
+        
+        <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+          The new element always goes to the end of the queue.
+        </p>
+      </div>
+    </section>
+
+    {/* Dequeue Operation */}
+    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+        Dequeue Operation
+      </h1>
+      <div className="prose dark:prose-invert max-w-none">
+        <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+          Dequeue removes and returns the element from the front (head) of the queue.
+        </p>
+        <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+          Example with queue: <span className="font-mono dark:text-amber-500 text-purple-600">[10, 20, 30, 40]</span>
+        </p>
+        
+        <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+          {operationDequeue.map((item, index) => (
+            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+              {item.points}
+            </li>
+          ))}
+        </ol>
+        
+        <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+          The oldest element (first one added) is always removed first.
+        </p>
+      </div>
+    </section>
+
+    {/* Algorithm Steps for Enqueue */}
+    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+        Algorithm Steps for Enqueue
+      </h1>
+      <div className="prose dark:prose-invert max-w-none">
+        <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+          {enqueue.map((item, index) => (
+            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+              {item.points}
+            </li>
+          ))}
+        </ol>
+      </div>
+    </section>
+
+    {/* Algorithm Steps for Dequeue */}
+    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+        Algorithm Steps for Dequeue
+      </h1>
+      <div className="prose dark:prose-invert max-w-none">
+        <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+          {dequeue.map((item, index) => (
+            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+              {item.points}
+            </li>
+          ))}
+        </ol>
+      </div>
+    </section>
+
+    {/* Time Complexity */}
+    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+        Time Complexity
+      </h1>
+      <div className="prose dark:prose-invert max-w-none">
+        <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+          {complexity.map((item, index) => (
+            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+              <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                {item.points.split(':')[0]}:
+              </span>
+              <span className="ml-2">{item.points.split(':')[1]}</span>
+            </li>
+          ))}
+        </ul>
+
+        <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => 1}
+                averageCase={(n) => 1}
+                worstCase={(n) => 1}
+                maxN={25}
+              />
+            </div>
+      </div>
+    </section>
+
+    {/* Space Complexity */}
+    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+        Space Complexity
+      </h1>
+      <div className="prose dark:prose-invert max-w-none">
+        <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+          {paragraph[1]}
+        </p>
+      </div>
+    </section>
+
+    {/* Additional Info */}
+    <section className="p-6">
+      <div className="prose dark:prose-invert max-w-none">
+        <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+          <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+            {paragraph[2]}
+          </p>
+        </div>
+      </div>
+    </section>
+  </article>
+</main>
+    );
+  };
+  
+  export default Content;
diff --git a/src/app/visualizer/queue/operations/enqueue-dequeue/quiz.jsx b/src/app/visualizer/queue/operations/enqueue-dequeue/quiz.jsx
new file mode 100644
index 000000000..3c63929a2
--- /dev/null
+++ b/src/app/visualizer/queue/operations/enqueue-dequeue/quiz.jsx
@@ -0,0 +1,62 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QueueQuiz = () => {
+  const questions = [
+    {
+      question: "What principle does a Queue data structure follow?",
+      options: [
+        "Last-In-First-Out (LIFO)",
+        "First-In-First-Out (FIFO)",
+        "Random Access",
+        "Priority-Based"
+      ],
+      correctAnswer: 1,
+      explanation: "Queues follow FIFO: The first element added is the first one removed."
+    },
+    {
+      question: "Where is a new element added in a Queue?",
+      options: [
+        "At the front",
+        "At the rear",
+        "In the middle",
+        "At any random position"
+      ],
+      correctAnswer: 1,
+      explanation: "Enqueue adds elements to the **rear** (end) of the queue."
+    },
+    {
+      question: "What is the time complexity of the enqueue operation?",
+      options: ["O(n)", "O(1)", "O(log n)", "O(n²)"],
+      correctAnswer: 1,
+      explanation: "Enqueue is O(1) as it only requires adding an element to the end."
+    },
+    {
+      question: "Given a queue [5, 10, 15], what will it look like after enqueue(20) and dequeue()?",
+      options: [
+        "[10, 15, 20]",
+        "[5, 10, 15]",
+        "[20, 10, 15]",
+        "[5, 10, 20]"
+      ],
+      correctAnswer: 0,
+      explanation: "Enqueue(20) → [5,10,15,20]; Dequeue() removes 5 → [10,15,20]."
+    },
+    {
+      question: "What happens if you try to dequeue from an empty queue?",
+      options: [
+        "Returns null",
+        "Returns 0",
+        "Causes an underflow error",
+        "Automatically resizes the queue"
+      ],
+      correctAnswer: 2,
+      explanation: "Dequeueing from an empty queue results in an **underflow** error."
+    }
+  ];
+
+  return <QuizEngine title="Queue Quiz Challenge" questions={questions} />;
+};
+
+export default QueueQuiz;
diff --git a/src/app/visualizer/queue/operations/isempty/AlgorithmClient.jsx b/src/app/visualizer/queue/operations/isempty/AlgorithmClient.jsx
new file mode 100644
index 000000000..7a1fcd588
--- /dev/null
+++ b/src/app/visualizer/queue/operations/isempty/AlgorithmClient.jsx
@@ -0,0 +1,33 @@
+import Animation from "@/app/visualizer/queue/operations/isempty/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/queue/operations/isempty/content";
+import Code from "@/app/visualizer/queue/operations/isempty/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Queue", "Is Empty")}
+      title="IsEmpty"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore Other Operations"
+          links={[
+            { text: "Peek Front", url: "./peek-front" },
+            { text: "Enqueue & Dequeue", url: "./enqueue-dequeue" },
+            { text: "Is Full", url: "./isfull" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/queue/operations/isempty/animation.jsx b/src/app/visualizer/queue/operations/isempty/animation.jsx
new file mode 100644
index 000000000..dced5801b
--- /dev/null
+++ b/src/app/visualizer/queue/operations/isempty/animation.jsx
@@ -0,0 +1,247 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import {
+  enqueueGenerator,
+  dequeueGenerator,
+  checkEmptyGenerator,
+} from "@/features/algorithms/queue/queueIsEmptyLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+const QueueIsEmptyVisualizer = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [queue, setQueue] = useState([]);
+  const [pendingOp, setPendingOp] = useState(null); // { type: 'enqueue', value: string } | { type: 'dequeue' } | { type: 'check' }
+
+  const frames = useMemo(() => {
+    if (!pendingOp) return [];
+    if (pendingOp.type === 'enqueue') {
+      return Array.from(enqueueGenerator(queue, pendingOp.value));
+    } else if (pendingOp.type === 'dequeue') {
+      return Array.from(dequeueGenerator(queue));
+    } else {
+      return Array.from(checkEmptyGenerator(queue));
+    }
+  }, [queue, pendingOp]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 800 });
+
+  const enqueue = () => {
+    if (!inputValue || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'enqueue', value: inputValue });
+    engine.reset();
+    engine.play();
+  };
+
+  const dequeue = () => {
+    if (queue.length === 0 || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'dequeue' });
+    engine.reset();
+    engine.play();
+  };
+
+  const checkEmpty = () => {
+    if (engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'check' });
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setInputValue("");
+    setQueue([]);
+    setPendingOp(null);
+    engine.reset();
+  };
+
+  useVisualizerReset(handleReset);
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.phase === 'complete') {
+         if (finalFrame.action !== 'check') {
+             setQueue(finalFrame.queue);
+         }
+      }
+      setPendingOp(null);
+      engine.reset();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  // Auto-commit on completion
+  React.useEffect(() => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0 && !engine.isPlaying) {
+        const finalFrame = frames[frames.length - 1];
+        if (finalFrame && finalFrame.phase === 'complete') {
+            if (finalFrame.action !== 'check') {
+                setQueue(finalFrame.queue);
+            }
+            setPendingOp(null);
+            if (pendingOp?.type === 'enqueue') setInputValue("");
+            engine.reset();
+        }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine, pendingOp]);
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        phase: 'idle',
+        queue: queue,
+        explanation: "Add items or remove them, then click 'Check IsEmpty' to test the length."
+      };
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize how checking if a queue is empty evaluates its length.
+      </p>
+
+      <VisualizerCard>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              className="flex-1 rounded-lg border bg-white p-3 dark:bg-gray-700"
+              placeholder="Enter value"
+              disabled={engine.isPlaying || pendingOp !== null}
+            />
+            <button
+              onClick={enqueue}
+              disabled={engine.isPlaying || !inputValue || pendingOp !== null}
+              className="w-full rounded-lg bg-primary px-6 py-3 text-white transition hover:bg-primary-dark disabled:bg-gray-400 sm:w-auto"
+            >
+              Enqueue
+            </button>
+          </div>
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <button
+              onClick={dequeue}
+              disabled={engine.isPlaying || queue.length === 0 || pendingOp !== null}
+              className="w-full rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 disabled:opacity-50 dark:border-white dark:text-white dark:hover:bg-gray-700 sm:w-1/3"
+            >
+              Dequeue
+            </button>
+            <button
+              onClick={checkEmpty}
+              disabled={engine.isPlaying || pendingOp !== null}
+              className="w-full rounded-lg bg-[#10b981]/10 px-6 py-3 text-[#10b981] transition hover:bg-[#10b981]/20 border border-[#10b981]/30 disabled:opacity-50 sm:w-1/3"
+            >
+              Check IsEmpty
+            </button>
+            <button
+              onClick={handleReset}
+              disabled={engine.isPlaying && pendingOp === null}
+              className="w-full rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 dark:border-white dark:text-white dark:hover:bg-gray-700 sm:w-1/3"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center min-h-[60px] flex items-center justify-center">
+         <p className="text-gray-800 dark:text-gray-200 font-medium">
+             {currentFrame.explanation}
+         </p>
+      </div>
+
+      <VisualizerCard>
+        <div className="mb-6 flex justify-between px-4 text-sm font-semibold text-gray-500 dark:text-gray-400 sm:px-8">
+          <div>Front</div>
+          <div>Rear</div>
+        </div>
+        
+        <div className={`relative flex min-h-[160px] w-full flex-col items-center justify-center overflow-x-auto rounded-xl border-2 transition-colors duration-500 ${currentFrame.action === 'check' && currentFrame.phase === 'complete' ? (currentFrame.isEmpty ? 'border-emerald-500 bg-emerald-500/10' : 'border-rose-500 bg-rose-500/10') : 'border-gray-200 bg-gray-50 dark:border-[#222] dark:bg-[#181818]' } p-6`}>
+            
+            {currentFrame.action === 'check' && currentFrame.phase === 'complete' && (
+                <div className={`absolute top-4 left-1/2 -translate-x-1/2 text-sm font-bold px-4 py-1 rounded-full ${currentFrame.isEmpty ? 'bg-emerald-500 text-white' : 'bg-rose-500 text-white'}`}>
+                    {currentFrame.isEmpty ? "TRUE" : "FALSE"}
+                </div>
+            )}
+
+            {currentFrame.action === 'enqueue' && currentFrame.newValue && currentFrame.phase === 'start' && (
+                <div className="absolute right-10 top-0 mb-4 animate-bounce flex flex-col items-center">
+                    <span className="text-xs font-bold text-blue-500 mb-1">New Node</span>
+                    <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-blue-500 text-xl font-bold text-white shadow-lg">
+                        {currentFrame.newValue}
+                    </div>
+                </div>
+            )}
+            
+            {currentFrame.action === 'dequeue' && currentFrame.dequeuedNode && currentFrame.phase === 'start' && (
+                <div className="absolute left-10 top-0 mb-4 flex flex-col items-center opacity-50 scale-110 translate-y-[-20px] transition-all duration-500">
+                    <span className="text-xs font-bold text-rose-500 mb-1">Dequeued</span>
+                    <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-rose-500 text-xl font-bold text-white shadow-lg">
+                        {currentFrame.dequeuedNode.value}
+                    </div>
+                </div>
+            )}
+
+            {currentFrame.queue.length === 0 ? (
+                <div className="py-8 text-center text-gray-500 font-medium">
+                []
+                </div>
+            ) : (
+                <div className="flex items-center gap-4">
+                {currentFrame.queue.map((node, index) => {
+                    const isNew = currentFrame.action === 'enqueue' && currentFrame.phase === 'complete' && index === currentFrame.queue.length - 1;
+                    const scaleClass = isNew ? "scale-110 shadow-lg bg-blue-500" : "scale-100 bg-primary";
+                    
+                    return (
+                    <div
+                        key={node.id}
+                        className={`flex h-16 w-16 items-center justify-center rounded-lg text-xl font-bold text-white shadow-md transition-all duration-500 ${scaleClass}`}
+                    >
+                        {node.value}
+                    </div>
+                    );
+                })}
+                </div>
+            )}
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default QueueIsEmptyVisualizer;
\ No newline at end of file
diff --git a/src/app/visualizer/queue/operations/isempty/codeBlock.jsx b/src/app/visualizer/queue/operations/isempty/codeBlock.jsx
new file mode 100644
index 000000000..ff2033021
--- /dev/null
+++ b/src/app/visualizer/queue/operations/isempty/codeBlock.jsx
@@ -0,0 +1,87 @@
+'use client';
+import CodeBlock from '@/app/components/ui/CodeBlock';
+// ─── All code examples for Queue isEmpty ─────────────────────────
+const codeExamples = {
+  javascript: `// Queue Implementation (isEmpty)
+class Queue{
+    constructor(){
+        this.front=null;
+        this.rear=null;
+    }
+    isEmpty(){
+        return this.front===null;
+    }
+}`,
+  python: `# Queue Implementation (isEmpty)
+class Queue:
+    def __init__(self):
+        self.front=None
+        self.rear=None
+    def is_empty(self):
+        return (self.front is None)`,
+  java: `// Queue Implementation (isEmpty)
+public class ArrayQueue{
+    private int front;
+    private int rear;
+    private int[] arr;
+    public ArrayQueue(int size){
+        arr=new int[size];
+        front=rear=-1;
+    }
+    public boolean isEmpty(){
+        return front==-1;
+    }
+}`,
+  c: `// Queue Implementation (isEmpty)
+#include<stdbool.h>
+#define MAX_SIZE 100
+typedef struct{
+    int arr[MAX_SIZE];
+    int front;
+    int rear;
+}Queue;
+bool isEmpty(Queue* q){
+    return q->front==-1;
+}`,
+  cpp: `// Queue Implementation (isEmpty)
+#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;
+    }
+    bool isEmpty() const{
+        return front==nullptr;
+    }
+};`
+};
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'queueIsEmpty.js',
+    python:'queue_is_empty.py',
+    java:'QueueIsEmpty.java',
+    c:'queue_is_empty.c',
+    cpp:'queue_is_empty.cpp'
+};
+// ─── Component ─────────────────────────────
+const QueueIsEmptyCode = () => (
+    <CodeBlock
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+export default QueueIsEmptyCode;
\ No newline at end of file
diff --git a/src/app/visualizer/queue/operations/isempty/content.jsx b/src/app/visualizer/queue/operations/isempty/content.jsx
new file mode 100644
index 000000000..1ceb01bb6
--- /dev/null
+++ b/src/app/visualizer/queue/operations/isempty/content.jsx
@@ -0,0 +1,247 @@
+"use client";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraphs = [
+    `The isEmpty operation checks whether a queue contains any elements or not. It returns true if the queue is empty (no elements) and false if it contains elements. This is a fundamental operation used to prevent underflow when performing dequeue operations.`,
+    `The isEmpty operation is a simple but crucial part of queue functionality, serving as a safety check before removal operations and helping manage queue processing flow in algorithms and applications.`,
+  ];
+
+  const example = [
+    { points: "Empty Queue: []", subpoints: ["isEmpty() → returns true"] },
+    {
+      points: "Non-empty Queue: [10, 20, 30]",
+      subpoints: ["isEmpty() → returns false"],
+    },
+  ];
+
+  const implementation = [
+    {
+      points: "Array-based Implementation:",
+      subpoints: [
+        "Check if front pointer == rear pointer",
+        "Or maintain a separate size counter",
+      ],
+    },
+    {
+      points: "Linked List Implementation:",
+      subpoints: ["Check if head pointer == null"],
+    },
+  ];
+
+  const steps = [
+    { points: "Examine the front of the queue" },
+    { points: "If front is null (or front == rear in array implementation)" },
+    { points: "Return true (queue is empty)" },
+    { points: "Else return false (queue has elements)" },
+  ];
+
+  const complexity = [
+    { points: "It only requires a simple pointer comparison" },
+    { points: "No iteration through elements is needed" },
+    { points: "Performance doesn't depend on queue size" },
+  ];
+
+  const usage = [
+    { points: "Before dequeue operations to prevent underflow" },
+    { points: "In queue processing loops" },
+    { points: "As a termination condition in algorithms" },
+    { points: "To initialize queue operations safely" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is the isEmpty Operation? */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is the isEmpty Operation?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* How Does It Work? */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            How Does It Work?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              The isEmpty operation simply checks the current state of the
+              queue. Example scenarios:
+            </p>
+
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {example.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                  {item.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.subpoints.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+
+            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+              The operation doesn&apos;t modify the queue in any way - it only checks
+              its state.
+            </p>
+          </div>
+        </section>
+
+        {/* Implementation Details */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Implementation Details
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Different implementations check emptiness differently:
+            </p>
+
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {implementation.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                  {item.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.subpoints.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Algorithm Steps */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Algorithm Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {steps.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              The isEmpty operation always runs in O(1) constant time because:
+            </p>
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {complexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Practical Usage */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Practical Usage
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              isEmpty is commonly used:
+            </p>
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {usage.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraphs[1]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/queue/operations/isempty/quiz.jsx b/src/app/visualizer/queue/operations/isempty/quiz.jsx
new file mode 100644
index 000000000..5cecdd355
--- /dev/null
+++ b/src/app/visualizer/queue/operations/isempty/quiz.jsx
@@ -0,0 +1,57 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QueueQuiz = () => {
+  const questions = [
+    {
+      question: "What does the isEmpty operation in a queue determine?",
+      options: [
+        "The total capacity of the queue",
+        "Whether the queue contains any elements",
+        "The position of the front element",
+        "The time complexity of other operations"
+      ],
+      correctAnswer: 1,
+      explanation: "isEmpty checks if the queue has zero elements (returns true if empty, false otherwise)."
+    },
+    {
+      question: "What does isEmpty() return for a queue with elements [10, 20]?",
+      options: ["true", "false", "null", "10"],
+      correctAnswer: 1,
+      explanation: "The queue contains elements, so isEmpty returns false."
+    },
+    {
+      question: "Why is isEmpty crucial before calling dequeue()?",
+      options: [
+        "To improve time complexity",
+        "To prevent queue underflow errors",
+        "To resize the queue",
+        "To count the elements"
+      ],
+      correctAnswer: 1,
+      explanation: "Checking isEmpty first avoids errors when attempting to dequeue from an empty queue."
+    },
+    {
+      question: "What is the time complexity of isEmpty?",
+      options: ["O(n)", "O(1)", "O(log n)", "O(n²)"],
+      correctAnswer: 1,
+      explanation: "isEmpty runs in O(1) time as it only checks if front == rear or head == null."
+    },
+    {
+      question: "How would you implement isEmpty for a linked list-based queue?",
+      options: [
+        "Check if head.next == null",
+        "Check if head == null",
+        "Count all nodes",
+        "Compare head and tail values"
+      ],
+      correctAnswer: 1,
+      explanation: "For linked list queues, isEmpty simply verifies if the head pointer is null."
+    }
+  ];
+
+  return <QuizEngine title="Queue isEmpty Operation Quiz" questions={questions} />;
+};
+
+export default QueueQuiz;
diff --git a/src/app/visualizer/queue/operations/isfull/AlgorithmClient.jsx b/src/app/visualizer/queue/operations/isfull/AlgorithmClient.jsx
new file mode 100644
index 000000000..28b28970e
--- /dev/null
+++ b/src/app/visualizer/queue/operations/isfull/AlgorithmClient.jsx
@@ -0,0 +1,33 @@
+import Animation from "@/app/visualizer/queue/operations/isfull/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/queue/operations/isfull/content";
+import Code from "@/app/visualizer/queue/operations/isfull/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Queue", "Is Full")}
+      title="IsFull"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore Other Operations"
+          links={[
+            { text: "Peek Front", url: "./peek-front" },
+            { text: "Enqueue & Dequeue", url: "./enqueue-dequeue" },
+            { text: "Is Empty", url: "./isempty" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/queue/operations/isfull/animation.jsx b/src/app/visualizer/queue/operations/isfull/animation.jsx
new file mode 100644
index 000000000..156bc0dec
--- /dev/null
+++ b/src/app/visualizer/queue/operations/isfull/animation.jsx
@@ -0,0 +1,256 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import {
+  enqueueGenerator,
+  dequeueGenerator,
+  checkFullGenerator,
+} from "@/features/algorithms/queue/queueIsFullLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+const QueueIsFullVisualizer = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [queue, setQueue] = useState([]);
+  const [capacity, setCapacity] = useState(5);
+  const [pendingOp, setPendingOp] = useState(null);
+
+  const frames = useMemo(() => {
+    if (!pendingOp) return [];
+    if (pendingOp.type === 'enqueue') {
+      return Array.from(enqueueGenerator(queue, pendingOp.value, capacity));
+    } else if (pendingOp.type === 'dequeue') {
+      return Array.from(dequeueGenerator(queue));
+    } else {
+      return Array.from(checkFullGenerator(queue, capacity));
+    }
+  }, [queue, pendingOp, capacity]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 800 });
+
+  const enqueue = () => {
+    if (!inputValue || engine.isPlaying || pendingOp) return;
+    if (queue.length >= capacity) {
+        setPendingOp({ type: 'check' }); // Or maybe an error state
+    } else {
+        setPendingOp({ type: 'enqueue', value: inputValue });
+    }
+    engine.reset();
+    engine.play();
+  };
+
+  const dequeue = () => {
+    if (queue.length === 0 || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'dequeue' });
+    engine.reset();
+    engine.play();
+  };
+
+  const checkFull = () => {
+    if (engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'check' });
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setInputValue("");
+    setQueue([]);
+    setPendingOp(null);
+    engine.reset();
+  };
+
+  useVisualizerReset(handleReset);
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.phase === 'complete') {
+         if (finalFrame.action !== 'check') {
+             setQueue(finalFrame.queue);
+         }
+      }
+      setPendingOp(null);
+      engine.reset();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  // Auto-commit on completion
+  React.useEffect(() => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0 && !engine.isPlaying) {
+        const finalFrame = frames[frames.length - 1];
+        if (finalFrame && finalFrame.phase === 'complete') {
+            if (finalFrame.action !== 'check') {
+                setQueue(finalFrame.queue);
+            }
+            setPendingOp(null);
+            if (pendingOp?.type === 'enqueue') setInputValue("");
+            engine.reset();
+        }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine, pendingOp]);
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        phase: 'idle',
+        queue: queue,
+        explanation: "Add items or remove them, then click 'Check IsFull' to test the capacity constraint."
+      };
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize how checking if a queue is full compares its length against a maximum capacity.
+      </p>
+
+      <VisualizerCard>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              className="flex-1 rounded-lg border bg-white p-3 dark:bg-gray-700"
+              placeholder="Enter value"
+              disabled={engine.isPlaying || pendingOp !== null || queue.length >= capacity}
+            />
+            <button
+              onClick={enqueue}
+              disabled={engine.isPlaying || !inputValue || pendingOp !== null || queue.length >= capacity}
+              className="w-full rounded-lg bg-primary px-6 py-3 text-white transition hover:bg-primary-dark disabled:bg-gray-400 sm:w-auto"
+            >
+              Enqueue
+            </button>
+          </div>
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <button
+              onClick={dequeue}
+              disabled={engine.isPlaying || queue.length === 0 || pendingOp !== null}
+              className="w-full rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 disabled:opacity-50 dark:border-white dark:text-white dark:hover:bg-gray-700 sm:w-1/3"
+            >
+              Dequeue
+            </button>
+            <button
+              onClick={checkFull}
+              disabled={engine.isPlaying || pendingOp !== null}
+              className="w-full rounded-lg bg-[#ef4444]/10 px-6 py-3 text-[#ef4444] transition hover:bg-[#ef4444]/20 border border-[#ef4444]/30 disabled:opacity-50 sm:w-1/3"
+            >
+              Check IsFull
+            </button>
+            <button
+              onClick={handleReset}
+              disabled={engine.isPlaying && pendingOp === null}
+              className="w-full rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 dark:border-white dark:text-white dark:hover:bg-gray-700 sm:w-1/3"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center min-h-[60px] flex items-center justify-center">
+         <p className="text-gray-800 dark:text-gray-200 font-medium">
+             {currentFrame.explanation}
+         </p>
+      </div>
+
+      <VisualizerCard>
+        <div className="mb-6 flex justify-between px-4 text-sm font-semibold text-gray-500 dark:text-gray-400 sm:px-8">
+          <div>Capacity: {capacity}</div>
+          <div>Current: {currentFrame.queue.length}</div>
+        </div>
+        
+        <div className={`relative flex min-h-[160px] w-full flex-col items-center justify-center overflow-x-auto rounded-xl border-2 transition-colors duration-500 ${currentFrame.action === 'check' && currentFrame.phase === 'complete' ? (currentFrame.isFull ? 'border-rose-500 bg-rose-500/10' : 'border-emerald-500 bg-emerald-500/10') : 'border-gray-200 bg-gray-50 dark:border-[#222] dark:bg-[#181818]' } p-6`}>
+            
+            {currentFrame.action === 'check' && currentFrame.phase === 'complete' && (
+                <div className={`absolute top-4 left-1/2 -translate-x-1/2 text-sm font-bold px-4 py-1 rounded-full ${currentFrame.isFull ? 'bg-rose-500 text-white' : 'bg-emerald-500 text-white'}`}>
+                    {currentFrame.isFull ? "TRUE" : "FALSE"}
+                </div>
+            )}
+
+            {currentFrame.action === 'enqueue' && currentFrame.newValue && currentFrame.phase === 'start' && (
+                <div className="absolute right-10 top-0 mb-4 animate-bounce flex flex-col items-center">
+                    <span className="text-xs font-bold text-blue-500 mb-1">New Node</span>
+                    <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-blue-500 text-xl font-bold text-white shadow-lg">
+                        {currentFrame.newValue}
+                    </div>
+                </div>
+            )}
+            
+            {currentFrame.action === 'dequeue' && currentFrame.dequeuedNode && currentFrame.phase === 'start' && (
+                <div className="absolute left-10 top-0 mb-4 flex flex-col items-center opacity-50 scale-110 translate-y-[-20px] transition-all duration-500">
+                    <span className="text-xs font-bold text-rose-500 mb-1">Dequeued</span>
+                    <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-rose-500 text-xl font-bold text-white shadow-lg">
+                        {currentFrame.dequeuedNode.value}
+                    </div>
+                </div>
+            )}
+
+            {/* Render empty slots to show capacity */}
+            <div className="flex gap-4">
+                {Array.from({ length: capacity }).map((_, i) => {
+                    const node = currentFrame.queue[i];
+                    
+                    if (node) {
+                        const isNew = currentFrame.action === 'enqueue' && currentFrame.phase === 'complete' && i === currentFrame.queue.length - 1;
+                        const scaleClass = isNew ? "scale-110 shadow-lg bg-blue-500" : "scale-100 bg-primary";
+                        
+                        return (
+                            <div
+                                key={node.id}
+                                className={`flex h-16 w-16 items-center justify-center rounded-lg text-xl font-bold text-white shadow-md transition-all duration-500 ${scaleClass}`}
+                            >
+                                {node.value}
+                            </div>
+                        );
+                    } else {
+                        return (
+                            <div key={`empty-${i}`} className="flex h-16 w-16 items-center justify-center rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700 bg-transparent text-gray-400">
+                            </div>
+                        );
+                    }
+                })}
+            </div>
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default QueueIsFullVisualizer;
\ No newline at end of file
diff --git a/src/app/visualizer/queue/operations/isfull/codeBlock.jsx b/src/app/visualizer/queue/operations/isfull/codeBlock.jsx
new file mode 100644
index 000000000..33341f59d
--- /dev/null
+++ b/src/app/visualizer/queue/operations/isfull/codeBlock.jsx
@@ -0,0 +1,106 @@
+'use client';
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+// ─── All code examples for Queue isFull ─────────────────────────
+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
+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
+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
+#include<stdbool.h>
+#define MAX_SIZE 100
+typedef struct{
+    int arr[MAX_SIZE];
+    int front;
+    int rear;
+}Queue;
+
+bool isFull(Queue* q){
+    return (    q->rear+1)%
+    MAX_SIZE==q->front;
+}`,
+
+  cpp: `// Array Queue isFull
+#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;
+    }
+};`
+};
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'queueIsFull.js',
+    python:'queue_is_full.py',
+    java:'ArrayQueue.java',
+    c:'queue_is_full.c',
+    cpp:'queue_is_full.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/queue/operations/isfull/content.jsx b/src/app/visualizer/queue/operations/isfull/content.jsx
new file mode 100644
index 000000000..5ddbfb437
--- /dev/null
+++ b/src/app/visualizer/queue/operations/isfull/content.jsx
@@ -0,0 +1,263 @@
+"use client";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraphs = [
+    `The isFull operation checks whether a queue has reached its maximum capacity in fixed-size implementations. It returns true if no more elements can be added (queue is full) and false if space remains. This operation is crucial for preventing overflow in array-based queue implementations.`,
+    `The isFull operation is critical for robust queue implementations in fixed-capacity scenarios, ensuring data integrity by preventing buffer overflow conditions in system programming and embedded applications.`,
+  ];
+
+  const example = [
+    {
+      points: "Full Queue: [10, 20, 30]",
+      subpoints: ["isFull() → returns true"],
+    },
+    {
+      points: "Non-full Queue: [10, 20]",
+      subpoints: ["isFull() → returns false"],
+    },
+  ];
+
+  const implementation = [
+    {
+      points: "Linear Array Implementation:",
+      subpoints: [
+        "Check if rear == capacity - 1",
+        "Simple but wastes space when front ≠ 0",
+      ],
+    },
+    {
+      points: "Circular Array Implementation:",
+      subpoints: [
+        "Check if (rear + 1) % capacity == front",
+        "More space-efficient",
+      ],
+    },
+    {
+      points: "Size Counter Approach:",
+      subpoints: ["Maintain a size variable", "Check if size == capacity"],
+    },
+  ];
+
+  const steps = [
+    { points: "Calculate next rear position: (rear + 1) % capacity" },
+    { points: "Compare with front position" },
+    { points: "If equal, return true (queue is full)" },
+    { points: "Else return false (space available)" },
+  ];
+
+  const complexity = [
+    { points: "It only requires simple pointer arithmetic and comparison" },
+    { points: "No iteration through elements is needed" },
+    { points: "Performance is independent of queue size" },
+  ];
+
+  const usage = [
+    { points: "Bounded buffer problems" },
+    { points: "Producer-consumer scenarios" },
+    { points: "Memory-constrained systems" },
+    { points: "Before enqueue operations to prevent overflow" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is the isFull Operation? */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is the isFull Operation?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* How Does It Work? */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            How Does It Work?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              The isFull operation examines the queue&apos;s capacity and current
+              state.
+            </p>
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Example scenarios (for a queue with capacity 3):
+            </p>
+
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {example.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                  {item.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.subpoints.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+
+            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+              Note: Dynamic implementations (like linked lists) typically don&apos;t
+              need this operation as they can grow indefinitely.
+            </p>
+          </div>
+        </section>
+
+        {/* Implementation Details */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Implementation Details
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Different approaches to check if a queue is full:
+            </p>
+
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {implementation.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-semibold">{item.points}</span>
+                  {item.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.subpoints.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Algorithm Steps */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Algorithm Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              For circular array implementation:
+            </p>
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {steps.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              The isFull operation always runs in O(1) constant time because:
+            </p>
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {complexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Practical Usage */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Practical Usage
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              isFull is essential in:
+            </p>
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {usage.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraphs[1]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/queue/operations/isfull/quiz.jsx b/src/app/visualizer/queue/operations/isfull/quiz.jsx
new file mode 100644
index 000000000..d83fc4193
--- /dev/null
+++ b/src/app/visualizer/queue/operations/isfull/quiz.jsx
@@ -0,0 +1,57 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QueueQuiz = () => {
+  const questions = [
+    {
+      question: "What does the isFull operation determine in a queue?",
+      options: [
+        "Whether the queue contains any elements",
+        "Whether the queue has reached its maximum capacity",
+        "The position of the front element",
+        "The time complexity of other operations"
+      ],
+      correctAnswer: 1,
+      explanation: "isFull checks if the queue has reached its maximum capacity in fixed-size implementations."
+    },
+    {
+      question: "In which type of queue implementation is isFull most commonly needed?",
+      options: [
+        "Linked list-based queues",
+        "Dynamic arrays",
+        "Array-based queues with fixed capacity",
+        "All queue implementations"
+      ],
+      correctAnswer: 2,
+      explanation: "isFull is crucial for array-based queues with fixed capacity to prevent overflow."
+    },
+    {
+      question: "What is the time complexity of the isFull operation?",
+      options: ["O(n)", "O(1)", "O(log n)", "O(n²)"],
+      correctAnswer: 1,
+      explanation: "isFull runs in O(1) constant time as it only requires simple pointer comparisons."
+    },
+    {
+      question: "In a circular array implementation, when is the queue considered full?",
+      options: [
+        "When front == 0",
+        "When rear == capacity - 1",
+        "When (rear + 1) % capacity == front",
+        "When front == rear"
+      ],
+      correctAnswer: 2,
+      explanation: "In circular arrays, the queue is full when the next position after rear equals front."
+    },
+    {
+      question: "What would isFull() return for a queue with capacity 3 containing [10, 20, 30]?",
+      options: ["true", "false", "null", "Error"],
+      correctAnswer: 0,
+      explanation: "The queue has reached its maximum capacity of 3 elements, so isFull returns true."
+    }
+  ];
+
+  return <QuizEngine title="Queue isFull Operation Quiz" questions={questions} />;
+};
+
+export default QueueQuiz;
diff --git a/src/app/visualizer/queue/operations/peek-front/AlgorithmClient.jsx b/src/app/visualizer/queue/operations/peek-front/AlgorithmClient.jsx
new file mode 100644
index 000000000..2b67a6a8c
--- /dev/null
+++ b/src/app/visualizer/queue/operations/peek-front/AlgorithmClient.jsx
@@ -0,0 +1,32 @@
+import Animation from "@/app/visualizer/queue/operations/peek-front/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/queue/operations/peek-front/content";
+import Code from "@/app/visualizer/queue/operations/peek-front/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Queue", "Peek Front")}
+      title="Peek Front"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore Other Operations"
+          links={[
+            { text: "Enqueue & Dequeue", url: "./enqueue-dequeue" },
+            { text: "Is Full", url: "./isfull" },
+            { text: "Is Empty", url: "./isempty" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/queue/operations/peek-front/animation.jsx b/src/app/visualizer/queue/operations/peek-front/animation.jsx
new file mode 100644
index 000000000..93a04445e
--- /dev/null
+++ b/src/app/visualizer/queue/operations/peek-front/animation.jsx
@@ -0,0 +1,260 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import {
+  enqueueGenerator,
+  dequeueGenerator,
+  peekFrontGenerator,
+} from "@/features/algorithms/queue/queuePeekFrontLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+const QueuePeekFrontVisualizer = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [queue, setQueue] = useState([]);
+  const [pendingOp, setPendingOp] = useState(null);
+
+  const frames = useMemo(() => {
+    if (!pendingOp) return [];
+    if (pendingOp.type === 'enqueue') {
+      return Array.from(enqueueGenerator(queue, pendingOp.value));
+    } else if (pendingOp.type === 'dequeue') {
+      return Array.from(dequeueGenerator(queue));
+    } else {
+      return Array.from(peekFrontGenerator(queue));
+    }
+  }, [queue, pendingOp]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 800 });
+
+  const enqueue = () => {
+    if (!inputValue || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'enqueue', value: inputValue });
+    engine.reset();
+    engine.play();
+  };
+
+  const dequeue = () => {
+    if (queue.length === 0 || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'dequeue' });
+    engine.reset();
+    engine.play();
+  };
+
+  const peekFront = () => {
+    if (queue.length === 0 || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'peek' });
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setInputValue("");
+    setQueue([]);
+    setPendingOp(null);
+    engine.reset();
+  };
+
+  useVisualizerReset(handleReset);
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.phase === 'complete') {
+         if (finalFrame.action !== 'peek') {
+             setQueue(finalFrame.queue);
+         }
+      }
+      setPendingOp(null);
+      engine.reset();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  // Auto-commit on completion
+  React.useEffect(() => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0 && !engine.isPlaying) {
+        const finalFrame = frames[frames.length - 1];
+        if (finalFrame && finalFrame.phase === 'complete') {
+            if (finalFrame.action !== 'peek') {
+                setQueue(finalFrame.queue);
+            }
+            setPendingOp(null);
+            if (pendingOp?.type === 'enqueue') setInputValue("");
+            engine.reset();
+        }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine, pendingOp]);
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        phase: 'idle',
+        queue: queue,
+        explanation: "Add items or remove them, then click 'Peek Front' to view the first element without removing it."
+      };
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize how the peek operation allows reading the front element without altering the queue.
+      </p>
+
+      <VisualizerCard>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              className="flex-1 rounded-lg border bg-white p-3 dark:bg-gray-700"
+              placeholder="Enter value"
+              disabled={engine.isPlaying || pendingOp !== null}
+            />
+            <button
+              onClick={enqueue}
+              disabled={engine.isPlaying || !inputValue || pendingOp !== null}
+              className="w-full rounded-lg bg-primary px-6 py-3 text-white transition hover:bg-primary-dark disabled:bg-gray-400 sm:w-auto"
+            >
+              Enqueue
+            </button>
+          </div>
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <button
+              onClick={dequeue}
+              disabled={engine.isPlaying || queue.length === 0 || pendingOp !== null}
+              className="w-full rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 disabled:opacity-50 dark:border-white dark:text-white dark:hover:bg-gray-700 sm:w-1/3"
+            >
+              Dequeue
+            </button>
+            <button
+              onClick={peekFront}
+              disabled={engine.isPlaying || queue.length === 0 || pendingOp !== null}
+              className="w-full rounded-lg bg-[#3b82f6]/10 px-6 py-3 text-[#3b82f6] transition hover:bg-[#3b82f6]/20 border border-[#3b82f6]/30 disabled:opacity-50 sm:w-1/3"
+            >
+              Peek Front
+            </button>
+            <button
+              onClick={handleReset}
+              disabled={engine.isPlaying && pendingOp === null}
+              className="w-full rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 dark:border-white dark:text-white dark:hover:bg-gray-700 sm:w-1/3"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center min-h-[60px] flex items-center justify-center">
+         <p className="text-gray-800 dark:text-gray-200 font-medium">
+             {currentFrame.explanation}
+         </p>
+      </div>
+
+      <VisualizerCard>
+        <div className="mb-6 flex justify-between px-4 text-sm font-semibold text-gray-500 dark:text-gray-400 sm:px-8">
+          <div>Front</div>
+          <div>Rear</div>
+        </div>
+        
+        <div className="relative flex min-h-[160px] w-full flex-col items-center justify-center overflow-x-auto rounded-xl border border-gray-200 bg-gray-50 dark:border-[#222] dark:bg-[#181818] p-6">
+            
+            {currentFrame.action === 'enqueue' && currentFrame.newValue && currentFrame.phase === 'start' && (
+                <div className="absolute right-10 top-0 mb-4 animate-bounce flex flex-col items-center">
+                    <span className="text-xs font-bold text-blue-500 mb-1">New Node</span>
+                    <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-blue-500 text-xl font-bold text-white shadow-lg">
+                        {currentFrame.newValue}
+                    </div>
+                </div>
+            )}
+            
+            {currentFrame.action === 'dequeue' && currentFrame.dequeuedNode && currentFrame.phase === 'start' && (
+                <div className="absolute left-10 top-0 mb-4 flex flex-col items-center opacity-50 scale-110 translate-y-[-20px] transition-all duration-500">
+                    <span className="text-xs font-bold text-rose-500 mb-1">Dequeued</span>
+                    <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-rose-500 text-xl font-bold text-white shadow-lg">
+                        {currentFrame.dequeuedNode.value}
+                    </div>
+                </div>
+            )}
+
+            {currentFrame.queue.length === 0 ? (
+                <div className="py-8 text-center text-gray-500 font-medium">
+                []
+                </div>
+            ) : (
+                <div className="flex items-center gap-4 relative">
+                {currentFrame.queue.map((node, index) => {
+                    const isNew = currentFrame.action === 'enqueue' && currentFrame.phase === 'complete' && index === currentFrame.queue.length - 1;
+                    const isPeeked = currentFrame.action === 'peek' && index === 0;
+                    
+                    let bgClass = "bg-primary";
+                    let scaleClass = "scale-100";
+                    let borderClass = "";
+
+                    if (isNew) {
+                        bgClass = "bg-blue-500";
+                        scaleClass = "scale-110 shadow-lg";
+                    } else if (isPeeked) {
+                        bgClass = "bg-amber-500";
+                        scaleClass = "scale-110 shadow-lg";
+                        borderClass = "ring-4 ring-amber-300 dark:ring-amber-700";
+                    }
+                    
+                    return (
+                    <div key={node.id} className="relative">
+                        {isPeeked && (
+                            <div className="absolute -top-10 left-1/2 -translate-x-1/2 text-xs font-bold text-amber-500 whitespace-nowrap bg-amber-50 dark:bg-amber-900/30 px-2 py-1 rounded-full border border-amber-200 dark:border-amber-800">
+                                Peeked: {node.value}
+                            </div>
+                        )}
+                        <div
+                            className={`flex h-16 w-16 items-center justify-center rounded-lg text-xl font-bold text-white shadow-md transition-all duration-500 ${bgClass} ${scaleClass} ${borderClass}`}
+                        >
+                            {node.value}
+                        </div>
+                    </div>
+                    );
+                })}
+                </div>
+            )}
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default QueuePeekFrontVisualizer;
\ No newline at end of file
diff --git a/src/app/visualizer/queue/operations/peek-front/codeBlock.jsx b/src/app/visualizer/queue/operations/peek-front/codeBlock.jsx
new file mode 100644
index 000000000..1f2d98695
--- /dev/null
+++ b/src/app/visualizer/queue/operations/peek-front/codeBlock.jsx
@@ -0,0 +1,85 @@
+'use client';
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+// ─── All code examples for Queue Peek ─────────────────────────
+const codeExamples = {
+  javascript: `// Queue Peek (Front)
+class Queue{
+    constructor(){
+        this.items=[];
+    }
+    peek(){
+        if(this.isEmpty()){
+            return "Queue is empty";
+        }
+        return this.items[0];
+    }
+    isEmpty(){
+        return (this.items.length===0);
+    }
+}`,
+  python: `# Queue Peek (Front)
+class Queue:
+    def __init__(self):
+        self.items=[]
+    def peek(self):
+        if(self.is_empty()):
+            return "Queue is empty"
+        return self.items[0]
+    def is_empty(self):
+        return (len(self.items)==0)`,
+  java: `// Queue Peek (Front)
+import java.util.LinkedList;
+import java.util.Queue;
+public class Main{
+    public static void main(String[] args){
+        Queue<Integer> queue=new LinkedList<>();
+        Integer front=queue.peek();
+        System.out.println("Front element:"+front);
+    }
+}`,
+  c: `// Queue Peek (Front)
+#include<stdio.h>
+#define MAX_SIZE 100
+typedef struct{
+    int items[MAX_SIZE];
+    int front;
+    int 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)
+#include<iostream>
+#include<queue>
+using namespace std;
+int main(){
+    queue<int> q;
+    if(!q.empty()){
+        cout<<"Front:"<<q.front()<<endl;
+    }else{
+        cout<<"Queue is empty"<<endl;
+    }
+    return 0;
+}`
+};
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'queuePeek.js',
+    python:'queue_peek.py',
+    java:'QueuePeek.java',
+    c:'queue_peek.c',
+    cpp:'queue_peek.cpp'
+};
+// ─── Component ─────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/queue/operations/peek-front/content.jsx b/src/app/visualizer/queue/operations/peek-front/content.jsx
new file mode 100644
index 000000000..257cf4903
--- /dev/null
+++ b/src/app/visualizer/queue/operations/peek-front/content.jsx
@@ -0,0 +1,235 @@
+"use client";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraph = [
+    `The peek front operation (also called front) retrieves the element at the front of the queue without removing it. This operation allows you to examine the next element to be processed while maintaining the queue's integrity.`,
+    `The peek front operation is essential for non-destructive queue inspection, enabling more flexible queue processing patterns while maintaining FIFO order. It's particularly valuable in scenarios where decision-making depends on the next item's properties without committing to its removal.`,
+  ];
+
+  const example = [
+    { points: "Current Queue: [A, B, C, D]" },
+    { points: "peekFront(): Returns 'A'" },
+    { points: "Queue After Peek: [A, B, C, D] (unchanged)" },
+  ];
+
+  const implementation = [
+    {
+      points: "Array-based Queue:",
+      subpoints: ["Return array[front]", "Check for empty queue first"],
+    },
+    { points: "Linked List Queue:", subpoints: ["Return head.data"] },
+    {
+      points: "Circular Buffer:",
+      subpoints: ["Return buffer[front]", "Handle wrap-around cases"],
+    },
+  ];
+
+  const steps = [
+    { points: "Check if queue is empty (use isEmpty())" },
+    { points: "If empty, return error/exception (or null)" },
+    { points: "Access the data at front position" },
+    { points: "Return the data without modifying pointers" },
+  ];
+
+  const complexity = [
+    { points: "Direct access to front element" },
+    { points: "No iteration needed" },
+    { points: "No structural changes to queue" },
+  ];
+
+  const application = [
+    { points: "Previewing next item before processing" },
+    { points: "Priority checking in priority queues" },
+    { points: "Conditional processing logic" },
+    { points: "Debugging queue contents" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is Peek Front Operation? */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is Peek Front Operation?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraph[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* How Does It Work? */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            How Does It Work?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Peek returns the front element while keeping the queue unchanged.
+            </p>
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Example with queue: [A, B, C, D]
+            </p>
+
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {example.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+
+            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+              Contrast with dequeue() which would remove &apos;A&apos; from the queue.
+            </p>
+          </div>
+        </section>
+
+        {/* Implementation Details */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Implementation Details
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Different implementations handle peek similarly:
+            </p>
+
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {implementation.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-semibold">{item.points}</span>
+                  {item.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.subpoints.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Algorithm Steps */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Algorithm Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Basic peek operation algorithm:
+            </p>
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {steps.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Peek operation always runs in O(1) constant time because:
+            </p>
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {complexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Practical Applications */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Practical Applications
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Common use cases for peek:
+            </p>
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {application.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraph[1]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/queue/operations/peek-front/quiz.jsx b/src/app/visualizer/queue/operations/peek-front/quiz.jsx
new file mode 100644
index 000000000..43802463c
--- /dev/null
+++ b/src/app/visualizer/queue/operations/peek-front/quiz.jsx
@@ -0,0 +1,62 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QueueQuiz = () => {
+  const questions = [
+    {
+      question: "What does the peek front operation do in a queue?",
+      options: [
+        "Removes the front element",
+        "Adds an element to the front",
+        "Retrieves the front element without removing it",
+        "Priority-Based"
+      ],
+      correctAnswer: 2,
+      explanation: "Peek retrieves the front element but doesn't remove it."
+    },
+    {
+      question: "What is the main difference between peekFront() and dequeue()?",
+      options: [
+        "peekFront() removes the element, dequeue() does not",
+        "dequeue() accesses the rear",
+        "peekFront() leaves the queue unchanged",
+        "They are the same"
+      ],
+      correctAnswer: 2,
+      explanation: "peekFront() retrieves without removal; dequeue() removes the front element."
+    },
+    {
+      question: "What will the queue look like after calling peekFront() on [A, B, C, D]",
+      options: ["[B, C, D]", "[A, B, C]", "[A, B, C, D]", "[D, C, B, A]"],
+      correctAnswer: 2,
+      explanation: "peekFront() does not modify the queue."
+    },
+    {
+      question: "What is the time complexity of the peek operation?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 0,
+      explanation: "Direct access makes it constant time."
+    },
+    {
+      question: "In an array-based queue, how is peekFront() typically implemented?",
+      options: [
+        "Return array[0]",
+        "Return array[front]",
+        "Return array[rear]",
+        "Remove array[front]"
+      ],
+      correctAnswer: 1,
+      explanation: "The front index gives the first element."
+    }
+  ];
+
+  return <QuizEngine title="Queue Peek Operation Quiz" questions={questions} />;
+};
+
+export default QueueQuiz;
diff --git a/src/app/visualizer/queue/operations/quiz/QueueQuizClient.jsx b/src/app/visualizer/queue/operations/quiz/QueueQuizClient.jsx
new file mode 100644
index 000000000..61d86801b
--- /dev/null
+++ b/src/app/visualizer/queue/operations/quiz/QueueQuizClient.jsx
@@ -0,0 +1,113 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowLeft, Play } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function QueueQuizClient() {
+  const quizzes = [
+    {
+      title: "Enqueue & Dequeue Quiz",
+      description:
+        "Practice enqueue and dequeue operations, queue insertion, removal, and FIFO behavior.",
+      href: "/visualizer/queue/operations/quiz/enqueue-dequeue",
+      filename: "queue_operations_quiz.js",
+    },
+    {
+      title: "Peek Front Quiz",
+      description:
+        "Practice accessing the front element without removing it from the queue.",
+      href: "/visualizer/queue/operations/quiz/peek",
+      filename: "queue_peek_quiz.js",
+    },
+    {
+      title: "Is Empty Quiz",
+      description:
+        "Practice determining whether a queue contains any elements.",
+      href: "/visualizer/queue/operations/quiz/isempty",
+      filename: "queue_isempty_quiz.js",
+    },
+    {
+      title: "Is Full Quiz",
+      description:
+        "Practice identifying whether a queue has reached its maximum capacity.",
+      href: "/visualizer/queue/operations/quiz/isfull",
+      filename: "queue_isfull_quiz.js",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-[var(--udemy-text)] dark:text-white transition-colors duration-300 pb-20">
+
+      {/* Header */}
+      <section className="relative pt-6 pb-4">
+        <div className="max-w-[1100px] mx-auto px-4">
+          <Link href="/visualizer/quiz">
+            <button className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] dark:text-[var(--color-primary-light)] hover:opacity-85 transition-opacity mb-3">
+              <ArrowLeft size={16} />
+              <span>Back to all quizzes</span>
+            </button>
+          </Link>
+
+          <h1 className="text-2xl md:text-3xl font-black mb-2">
+            Queue Quiz Portal
+          </h1>
+
+          <p className="text-[14px] text-surface-600 dark:text-surface-400 font-medium">
+            Choose a Queue Operations quiz to test your conceptual understanding
+            of queue data structures.
+          </p>
+        </div>
+      </section>
+
+      {/* Quiz Cards */}
+      <div className="max-w-5xl mx-auto px-4 mt-8">
+        <div className="grid md:grid-cols-2 gap-6 items-stretch">
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{
+                duration: 0.4,
+                delay: index * 0.1,
+                ease: [0.22, 1, 0.36, 1],
+              }}
+              whileHover={{ y: -6, scale: 1.015 }}
+              whileTap={{ scale: 0.985 }}
+              className="group flex flex-col h-full rounded-2xl border border-cyan-500/20 dark:border-cyan-500/30 bg-white dark:bg-[#1a1a1a] overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
+            >
+              {/* Top Bar */}
+              <div className="flex items-center justify-between px-4 py-2.5 bg-cyan-500/10 dark:bg-cyan-500/20 border-b border-cyan-500/20 dark:border-cyan-500/30">
+                <div className="flex items-center gap-1.5 font-mono text-[11px] text-surface-600 dark:text-surface-300">
+                  <span className="text-violet-500 font-bold">$</span>
+                  <span>node {quiz.filename}</span>
+                </div>
+              </div>
+
+              {/* Content */}
+              <div className="p-6 flex-1 flex flex-col justify-between">
+                <div>
+                  <h2 className="text-[20px] font-extrabold text-surface-900 dark:text-white group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors mb-2">
+                    {quiz.title}
+                  </h2>
+
+                  <p className="text-[14px] text-surface-600 dark:text-surface-300 leading-relaxed mb-6">
+                    {quiz.description}
+                  </p>
+                </div>
+
+                <Link href={quiz.href} className="block mt-auto w-full">
+                  <button className="w-full h-11 rounded-xl bg-cyan-600 hover:bg-cyan-700 dark:bg-cyan-500 dark:hover:bg-cyan-600 text-white font-bold text-[14px] flex items-center justify-center gap-2 shadow-sm hover:shadow-md transition-all">
+                    <span>Start Quiz</span>
+                    <Play size={14} className="fill-current" />
+                  </button>
+                </Link>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/queue/operations/quiz/enqueue-dequeue/page.jsx b/src/app/visualizer/queue/operations/quiz/enqueue-dequeue/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/queue/operations/quiz/enqueue-dequeue/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/queue/operations/quiz/enqueue-dequeue/quiz.jsx b/src/app/visualizer/queue/operations/quiz/enqueue-dequeue/quiz.jsx
new file mode 100644
index 000000000..4ca6c5445
--- /dev/null
+++ b/src/app/visualizer/queue/operations/quiz/enqueue-dequeue/quiz.jsx
@@ -0,0 +1,117 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QueueQuiz = () => {
+  const questions = [
+    {
+      question: "What principle does a Queue data structure follow?",
+      options: [
+        "Last-In-First-Out (LIFO)",
+        "First-In-First-Out (FIFO)",
+        "Random Access",
+        "Priority-Based"
+      ],
+      correctAnswer: 1,
+      explanation: "Queues follow FIFO: The first element added is the first one removed."
+    },
+    {
+      question: "Where is a new element added in a Queue?",
+      options: [
+        "At the front",
+        "At the rear",
+        "In the middle",
+        "At any random position"
+      ],
+      correctAnswer: 1,
+      explanation: "Enqueue adds elements to the **rear** (end) of the queue."
+    },
+    {
+      question: "What is the time complexity of the enqueue operation?",
+      options: ["O(n)", "O(1)", "O(log n)", "O(n²)"],
+      correctAnswer: 1,
+      explanation: "Enqueue is O(1) as it only requires adding an element to the end."
+    },
+    {
+      question: "Given a queue [5, 10, 15], what will it look like after enqueue(20) and dequeue()?",
+      options: [
+        "[10, 15, 20]",
+        "[5, 10, 15]",
+        "[20, 10, 15]",
+        "[5, 10, 20]"
+      ],
+      correctAnswer: 0,
+      explanation: "Enqueue(20) → [5,10,15,20]; Dequeue() removes 5 → [10,15,20]."
+    },
+    {
+      question: "What happens if you try to dequeue from an empty queue?",
+      options: [
+        "Returns null",
+        "Returns 0",
+        "Causes an underflow error",
+        "Automatically resizes the queue"
+      ],
+      correctAnswer: 2,
+      explanation: "Dequeueing from an empty queue results in an **underflow** error."
+    },
+    {
+  question: "Which operation removes an element from a queue?",
+  options: [
+    "Push",
+    "Pop",
+    "Enqueue",
+    "Dequeue"
+  ],
+  correctAnswer: 3,
+  explanation: "The dequeue operation removes the element from the front of the queue."
+},
+{
+  question: "Which element is returned by the front (peek) operation?",
+  options: [
+    "The last inserted element",
+    "The first inserted element",
+    "The middle element",
+    "The newest element"
+  ],
+  correctAnswer: 1,
+  explanation: "The front (peek) operation returns the first element without removing it."
+},
+{
+  question: "Which real-world example best represents a queue?",
+  options: [
+    "Stack of plates",
+    "People waiting in a ticket line",
+    "Undo operation in a text editor",
+    "Browser back button"
+  ],
+  correctAnswer: 1,
+  explanation: "People in a queue are served in the order they arrive, following FIFO."
+},
+{
+  question: "Which of the following applications commonly uses a queue?",
+  options: [
+    "Function call stack",
+    "CPU process scheduling",
+    "Undo/Redo operations",
+    "Expression evaluation using recursion"
+  ],
+  correctAnswer: 1,
+  explanation: "Operating systems use queues for scheduling processes and managing tasks."
+},
+{
+  question: "What is the time complexity of the dequeue operation in a standard queue implementation?",
+  options: [
+    "O(1)",
+    "O(log n)",
+    "O(n)",
+    "O(n²)"
+  ],
+  correctAnswer: 0,
+  explanation: "Dequeue removes the front element in constant time, making its complexity O(1)."
+},
+  ];
+
+  return <QuizEngine title="Queue Quiz Challenge" questions={questions} />;
+};
+
+export default QueueQuiz;
diff --git a/src/app/visualizer/queue/operations/quiz/isempty/page.jsx b/src/app/visualizer/queue/operations/quiz/isempty/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/queue/operations/quiz/isempty/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/queue/operations/quiz/isempty/quiz.jsx b/src/app/visualizer/queue/operations/quiz/isempty/quiz.jsx
new file mode 100644
index 000000000..c852ca7c0
--- /dev/null
+++ b/src/app/visualizer/queue/operations/quiz/isempty/quiz.jsx
@@ -0,0 +1,112 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QueueQuiz = () => {
+  const questions = [
+    {
+      question: "What does the isEmpty operation in a queue determine?",
+      options: [
+        "The total capacity of the queue",
+        "Whether the queue contains any elements",
+        "The position of the front element",
+        "The time complexity of other operations"
+      ],
+      correctAnswer: 1,
+      explanation: "isEmpty checks if the queue has zero elements (returns true if empty, false otherwise)."
+    },
+    {
+      question: "What does isEmpty() return for a queue with elements [10, 20]?",
+      options: ["true", "false", "null", "10"],
+      correctAnswer: 1,
+      explanation: "The queue contains elements, so isEmpty returns false."
+    },
+    {
+      question: "Why is isEmpty crucial before calling dequeue()?",
+      options: [
+        "To improve time complexity",
+        "To prevent queue underflow errors",
+        "To resize the queue",
+        "To count the elements"
+      ],
+      correctAnswer: 1,
+      explanation: "Checking isEmpty first avoids errors when attempting to dequeue from an empty queue."
+    },
+    {
+      question: "What is the time complexity of isEmpty?",
+      options: ["O(n)", "O(1)", "O(log n)", "O(n²)"],
+      correctAnswer: 1,
+      explanation: "isEmpty runs in O(1) time as it only checks if front == rear or head == null."
+    },
+    {
+      question: "How would you implement isEmpty for a linked list-based queue?",
+      options: [
+        "Check if head.next == null",
+        "Check if head == null",
+        "Count all nodes",
+        "Compare head and tail values"
+      ],
+      correctAnswer: 1,
+      explanation: "For linked list queues, isEmpty simply verifies if the head pointer is null."
+    },
+    {
+  question: "What does isEmpty() return when the queue has no elements?",
+  options: [
+    "false",
+    "true",
+    "0",
+    "-1"
+  ],
+  correctAnswer: 1,
+  explanation: "If the queue contains no elements, isEmpty() returns true."
+},
+{
+  question: "Which condition indicates an empty queue in an array-based implementation?",
+  options: [
+    "rear == size - 1",
+    "front == -1 || front > rear",
+    "rear == front + 1",
+    "front == size"
+  ],
+  correctAnswer: 1,
+  explanation: "A queue is empty when front is -1 initially or when front becomes greater than rear after all elements are removed."
+},
+{
+  question: "When is the isEmpty() operation commonly used?",
+  options: [
+    "Before performing dequeue",
+    "Before sorting the queue",
+    "Before resizing the queue",
+    "Before searching the queue"
+  ],
+  correctAnswer: 0,
+  explanation: "Checking isEmpty() before dequeue prevents attempting to remove an element from an empty queue."
+},
+{
+  question: "Which queue operation benefits the most from checking isEmpty() first?",
+  options: [
+    "Enqueue",
+    "Peek (Front)",
+    "Both Dequeue and Peek",
+    "Display"
+  ],
+  correctAnswer: 2,
+  explanation: "Both dequeue and peek require at least one element in the queue, so checking isEmpty() is important."
+},
+{
+  question: "What is the main purpose of the isEmpty() operation?",
+  options: [
+    "To count the number of elements",
+    "To determine whether the queue contains any elements",
+    "To remove the first element",
+    "To insert a new element"
+  ],
+  correctAnswer: 1,
+  explanation: "The purpose of isEmpty() is to determine whether the queue currently has any elements."
+},
+  ];
+
+  return <QuizEngine title="Queue isEmpty Operation Quiz" questions={questions} />;
+};
+
+export default QueueQuiz;
diff --git a/src/app/visualizer/queue/operations/quiz/isfull/page.jsx b/src/app/visualizer/queue/operations/quiz/isfull/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/queue/operations/quiz/isfull/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/queue/operations/quiz/isfull/quiz.jsx b/src/app/visualizer/queue/operations/quiz/isfull/quiz.jsx
new file mode 100644
index 000000000..a9e451001
--- /dev/null
+++ b/src/app/visualizer/queue/operations/quiz/isfull/quiz.jsx
@@ -0,0 +1,112 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QueueQuiz = () => {
+  const questions = [
+    {
+      question: "What does the isFull operation determine in a queue?",
+      options: [
+        "Whether the queue contains any elements",
+        "Whether the queue has reached its maximum capacity",
+        "The position of the front element",
+        "The time complexity of other operations"
+      ],
+      correctAnswer: 1,
+      explanation: "isFull checks if the queue has reached its maximum capacity in fixed-size implementations."
+    },
+    {
+      question: "In which type of queue implementation is isFull most commonly needed?",
+      options: [
+        "Linked list-based queues",
+        "Dynamic arrays",
+        "Array-based queues with fixed capacity",
+        "All queue implementations"
+      ],
+      correctAnswer: 2,
+      explanation: "isFull is crucial for array-based queues with fixed capacity to prevent overflow."
+    },
+    {
+      question: "What is the time complexity of the isFull operation?",
+      options: ["O(n)", "O(1)", "O(log n)", "O(n²)"],
+      correctAnswer: 1,
+      explanation: "isFull runs in O(1) constant time as it only requires simple pointer comparisons."
+    },
+    {
+      question: "In a circular array implementation, when is the queue considered full?",
+      options: [
+        "When front == 0",
+        "When rear == capacity - 1",
+        "When (rear + 1) % capacity == front",
+        "When front == rear"
+      ],
+      correctAnswer: 2,
+      explanation: "In circular arrays, the queue is full when the next position after rear equals front."
+    },
+    {
+      question: "What would isFull() return for a queue with capacity 3 containing [10, 20, 30]?",
+      options: ["true", "false", "null", "Error"],
+      correctAnswer: 0,
+      explanation: "The queue has reached its maximum capacity of 3 elements, so isFull returns true."
+    },
+    {
+  question: "What happens if you try to enqueue an element into a full queue?",
+  options: [
+    "The element is inserted at the front",
+    "The oldest element is removed automatically",
+    "A queue overflow error occurs",
+    "The queue doubles its size automatically"
+  ],
+  correctAnswer: 2,
+  explanation: "Attempting to enqueue into a full fixed-size queue results in a queue overflow."
+},
+{
+  question: "Which operation is typically performed before enqueueing into a fixed-size queue?",
+  options: [
+    "isEmpty()",
+    "isFull()",
+    "peek()",
+    "dequeue()"
+  ],
+  correctAnswer: 1,
+  explanation: "The isFull() operation is used to ensure there is space before inserting a new element."
+},
+{
+  question: "In a linear array-based queue of size 5, when is the queue considered full?",
+  options: [
+    "rear == 4",
+    "front == 0",
+    "front == rear",
+    "rear == front"
+  ],
+  correctAnswer: 0,
+  explanation: "In a linear queue, when the rear reaches the last index (size - 1), the queue is full."
+},
+{
+  question: "Why is the isFull() operation generally unnecessary in a linked list-based queue?",
+  options: [
+    "Because linked lists automatically sort elements",
+    "Because linked lists grow dynamically until memory is exhausted",
+    "Because linked lists never use enqueue",
+    "Because linked lists remove elements automatically"
+  ],
+  correctAnswer: 1,
+  explanation: "Linked list-based queues do not have a fixed capacity, so they grow dynamically until system memory is exhausted."
+},
+{
+  question: "What is the primary purpose of the isFull() operation?",
+  options: [
+    "To determine whether the queue has reached its storage limit",
+    "To count the number of elements in the queue",
+    "To remove the front element",
+    "To display all queue elements"
+  ],
+  correctAnswer: 0,
+  explanation: "The purpose of isFull() is to check whether a fixed-size queue has reached its maximum capacity."
+},
+  ];
+
+  return <QuizEngine title="Queue isFull Operation Quiz" questions={questions} />;
+};
+
+export default QueueQuiz;
diff --git a/src/app/visualizer/queue/operations/quiz/page.jsx b/src/app/visualizer/queue/operations/quiz/page.jsx
new file mode 100644
index 000000000..0badac9f7
--- /dev/null
+++ b/src/app/visualizer/queue/operations/quiz/page.jsx
@@ -0,0 +1,5 @@
+import QueueQuizClient from "./QueueQuizClient";
+
+export default function Page() {
+  return <QueueQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/queue/operations/quiz/peek/page.jsx b/src/app/visualizer/queue/operations/quiz/peek/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/queue/operations/quiz/peek/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/queue/operations/quiz/peek/quiz.jsx b/src/app/visualizer/queue/operations/quiz/peek/quiz.jsx
new file mode 100644
index 000000000..b2641c1c3
--- /dev/null
+++ b/src/app/visualizer/queue/operations/quiz/peek/quiz.jsx
@@ -0,0 +1,117 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QueueQuiz = () => {
+  const questions = [
+    {
+      question: "What does the peek front operation do in a queue?",
+      options: [
+        "Removes the front element",
+        "Adds an element to the front",
+        "Retrieves the front element without removing it",
+        "Priority-Based"
+      ],
+      correctAnswer: 2,
+      explanation: "Peek retrieves the front element but doesn't remove it."
+    },
+    {
+      question: "What is the main difference between peekFront() and dequeue()?",
+      options: [
+        "peekFront() removes the element, dequeue() does not",
+        "dequeue() accesses the rear",
+        "peekFront() leaves the queue unchanged",
+        "They are the same"
+      ],
+      correctAnswer: 2,
+      explanation: "peekFront() retrieves without removal; dequeue() removes the front element."
+    },
+    {
+      question: "What will the queue look like after calling peekFront() on [A, B, C, D]",
+      options: ["[B, C, D]", "[A, B, C]", "[A, B, C, D]", "[D, C, B, A]"],
+      correctAnswer: 2,
+      explanation: "peekFront() does not modify the queue."
+    },
+    {
+      question: "What is the time complexity of the peek operation?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 0,
+      explanation: "Direct access makes it constant time."
+    },
+    {
+      question: "In an array-based queue, how is peekFront() typically implemented?",
+      options: [
+        "Return array[0]",
+        "Return array[front]",
+        "Return array[rear]",
+        "Remove array[front]"
+      ],
+      correctAnswer: 1,
+      explanation: "The front index gives the first element."
+    },
+    {
+  question: "What happens if peekFront() is called on an empty queue?",
+  options: [
+    "Returns the rear element",
+    "Causes a queue underflow or returns an error",
+    "Adds a new element",
+    "Returns 0"
+  ],
+  correctAnswer: 1,
+  explanation: "Calling peekFront() on an empty queue results in an underflow error or an invalid value depending on the implementation."
+},
+{
+  question: "Which element is returned by peekFront()?",
+  options: [
+    "The last inserted element",
+    "The rear element",
+    "The front element",
+    "The middle element"
+  ],
+  correctAnswer: 2,
+  explanation: "peekFront() always returns the element at the front of the queue."
+},
+{
+  question: "Which queue operation modifies the queue?",
+  options: [
+    "peekFront()",
+    "isEmpty()",
+    "dequeue()",
+    "isFull()"
+  ],
+  correctAnswer: 2,
+  explanation: "dequeue() removes the front element, while peekFront(), isEmpty(), and isFull() only inspect the queue."
+},
+{
+  question: "Why is peekFront() useful before performing dequeue()?",
+  options: [
+    "It sorts the queue",
+    "It allows you to inspect the next element without removing it",
+    "It inserts a new element",
+    "It changes the rear pointer"
+  ],
+  correctAnswer: 1,
+  explanation: "peekFront() lets you view the next element to be removed while keeping the queue unchanged."
+},
+{
+  question: "Which statement about peekFront() is correct?",
+  options: [
+    "It always removes the front element",
+    "It changes the size of the queue",
+    "It returns the front element without changing the queue",
+    "It always returns the rear element"
+  ],
+  correctAnswer: 2,
+  explanation: "peekFront() simply accesses the front element without modifying the queue or its size."
+},
+  ];
+
+  return <QuizEngine title="Queue Peek Operation Quiz" questions={questions} />;
+};
+
+export default QueueQuiz;
diff --git a/src/app/visualizer/queue/types/circular/AlgorithmClient.jsx b/src/app/visualizer/queue/types/circular/AlgorithmClient.jsx
new file mode 100644
index 000000000..2ee9c897b
--- /dev/null
+++ b/src/app/visualizer/queue/types/circular/AlgorithmClient.jsx
@@ -0,0 +1,33 @@
+import Animation from "@/app/visualizer/queue/types/circular/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/queue/types/circular/content";
+import Code from "@/app/visualizer/queue/types/circular/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Queue", "Circular Queue")}
+      title="Circular Queue"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore Other Types"
+          links={[
+            { text: "Single Ended Queue", url: "./singleEnded" },
+            { text: "Double Ended Queue", url: "./deque" },
+            { text: "Multiple Queue", url: "./multiple" },
+            { text: "Priority Queue", url: "./priority" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/queue/types/circular/animation.jsx b/src/app/visualizer/queue/types/circular/animation.jsx
new file mode 100644
index 000000000..a5b40b956
--- /dev/null
+++ b/src/app/visualizer/queue/types/circular/animation.jsx
@@ -0,0 +1,245 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import {
+  enqueueCircularGenerator,
+  dequeueCircularGenerator,
+} from "@/features/algorithms/queue/circularQueueLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+const CircularQueueVisualizer = () => {
+  const [inputValue, setInputValue] = useState("");
+  const capacity = 8;
+  const [queue, setQueue] = useState(Array(capacity).fill(null));
+  const [front, setFront] = useState(0);
+  const [rear, setRear] = useState(0);
+  const [count, setCount] = useState(0);
+  const [pendingOp, setPendingOp] = useState(null);
+
+  const frames = useMemo(() => {
+    if (!pendingOp) return [];
+    if (pendingOp.type === 'enqueue') {
+      return Array.from(enqueueCircularGenerator(queue, front, rear, count, capacity, pendingOp.value));
+    } else if (pendingOp.type === 'dequeue') {
+      return Array.from(dequeueCircularGenerator(queue, front, rear, count, capacity));
+    }
+    return [];
+  }, [queue, front, rear, count, capacity, pendingOp]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 800 });
+
+  const enqueue = () => {
+    if (!inputValue || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'enqueue', value: inputValue });
+    engine.reset();
+    engine.play();
+  };
+
+  const dequeue = () => {
+    if (count === 0 || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'dequeue' });
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setInputValue("");
+    setQueue(Array(capacity).fill(null));
+    setFront(0);
+    setRear(0);
+    setCount(0);
+    setPendingOp(null);
+    engine.reset();
+  };
+
+  useVisualizerReset(handleReset);
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.phase === 'complete') {
+         setQueue(finalFrame.queue);
+         setFront(finalFrame.front);
+         setRear(finalFrame.rear);
+         setCount(finalFrame.count);
+      }
+      setPendingOp(null);
+      engine.reset();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  // Auto-commit on completion
+  React.useEffect(() => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0 && !engine.isPlaying) {
+        const finalFrame = frames[frames.length - 1];
+        if (finalFrame && finalFrame.phase === 'complete') {
+            setQueue(finalFrame.queue);
+            setFront(finalFrame.front);
+            setRear(finalFrame.rear);
+            setCount(finalFrame.count);
+            setPendingOp(null);
+            if (pendingOp?.type === 'enqueue') setInputValue("");
+            engine.reset();
+        }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine, pendingOp]);
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        phase: 'idle',
+        queue: queue,
+        front: front,
+        rear: rear,
+        count: count,
+        explanation: "Enter a value and click 'Enqueue' to add it to the rear, or 'Dequeue' to remove from the front."
+      };
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize how a circular queue wraps around when it reaches the end of the array.
+      </p>
+
+      <VisualizerCard>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              className="flex-1 rounded-lg border bg-white p-3 dark:bg-gray-700"
+              placeholder="Enter value"
+              disabled={engine.isPlaying || pendingOp !== null || count === capacity}
+            />
+            <button
+              onClick={enqueue}
+              disabled={engine.isPlaying || !inputValue || pendingOp !== null || count === capacity}
+              className="w-full rounded-lg bg-primary px-6 py-3 text-white transition hover:bg-primary-dark disabled:bg-gray-400 sm:w-auto"
+            >
+              Enqueue
+            </button>
+          </div>
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <button
+              onClick={dequeue}
+              disabled={engine.isPlaying || count === 0 || pendingOp !== null}
+              className="w-full rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 disabled:opacity-50 dark:border-white dark:text-white dark:hover:bg-gray-700 sm:w-1/2"
+            >
+              Dequeue
+            </button>
+            <button
+              onClick={handleReset}
+              disabled={engine.isPlaying && pendingOp === null}
+              className="w-full rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 dark:border-white dark:text-white dark:hover:bg-gray-700 sm:w-1/2"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center min-h-[60px] flex items-center justify-center">
+         <p className="text-gray-800 dark:text-gray-200 font-medium">
+             {currentFrame.explanation}
+         </p>
+      </div>
+
+      <VisualizerCard>
+        <div className="mb-6 flex justify-between px-4 text-sm font-semibold text-gray-500 dark:text-gray-400 sm:px-8">
+          <div>Front: {currentFrame.front}</div>
+          <div>Rear: {currentFrame.rear}</div>
+          <div>Count: {currentFrame.count} / {capacity}</div>
+        </div>
+        
+        <div className="relative flex min-h-[160px] w-full flex-col items-center justify-center overflow-x-auto rounded-xl border border-gray-200 bg-gray-50 p-6 dark:border-[#222] dark:bg-[#181818]">
+            {/* Render array slots */}
+            <div className="flex gap-4 mb-8">
+                {currentFrame.queue.map((node, i) => {
+                    const isFront = currentFrame.front === i && currentFrame.count > 0;
+                    const isRear = currentFrame.rear === i && currentFrame.count > 0;
+                    
+                    let bgClass = "bg-transparent border-2 border-dashed border-gray-300 dark:border-gray-700 text-gray-400";
+                    let scaleClass = "scale-100";
+                    
+                    if (node !== null) {
+                        bgClass = "bg-primary border-none text-white";
+                        if (currentFrame.action === 'enqueue' && currentFrame.phase === 'complete' && i === currentFrame.rear) {
+                            bgClass = "bg-blue-500";
+                            scaleClass = "scale-110 shadow-lg";
+                        }
+                    }
+
+                    if (currentFrame.action === 'dequeue' && currentFrame.phase === 'start' && i === currentFrame.front) {
+                        bgClass = "bg-rose-500 opacity-50";
+                        scaleClass = "scale-110 shadow-lg translate-y-[-10px]";
+                    }
+                    
+                    return (
+                        <div key={i} className="flex flex-col items-center gap-2">
+                            <span className="text-xs font-mono text-gray-500">{i}</span>
+                            <div
+                                className={`flex h-16 w-16 items-center justify-center rounded-lg text-xl font-bold shadow-md transition-all duration-500 ${bgClass} ${scaleClass}`}
+                            >
+                                {node !== null ? node : ""}
+                            </div>
+                            <div className="flex gap-1 h-4">
+                                {isFront && <span className="text-[10px] font-bold text-amber-500">F</span>}
+                                {isRear && <span className="text-[10px] font-bold text-emerald-500">R</span>}
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+            
+            <div className="flex items-center gap-4 text-xs font-mono">
+                <div className="flex items-center gap-1">
+                   <div className="w-3 h-3 bg-amber-500 rounded-sm"></div> Front
+                </div>
+                <div className="flex items-center gap-1">
+                   <div className="w-3 h-3 bg-emerald-500 rounded-sm"></div> Rear
+                </div>
+            </div>
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default CircularQueueVisualizer;
diff --git a/src/app/visualizer/queue/types/circular/codeBlock.jsx b/src/app/visualizer/queue/types/circular/codeBlock.jsx
new file mode 100644
index 000000000..3d453a5b5
--- /dev/null
+++ b/src/app/visualizer/queue/types/circular/codeBlock.jsx
@@ -0,0 +1,161 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for Circular Queue ─────────────────────
+const codeExamples = {
+  javascript: `// Circular Queue Implementation
+class CircularQueue{
+    constructor(capacity){
+        this.queue=new Array(capacity);
+        this.capacity=capacity;
+        this.front=-1;
+        this.rear=-1;
+        this.size=0;
+    }
+    isFull(){
+        return this.size===this.capacity;
+    }
+    isEmpty(){
+        return this.size===0;
+    }
+    enqueue(item){
+        if(this.isFull()){
+            console.log("Queue is full");
+            return false;
+        }
+        if(this.isEmpty()){
+            this.front=0;
+        }
+        this.rear=(this.rear+1)%this.capacity;
+        this.queue[this.rear]=item;
+        this.size++;
+        return true;
+    }
+    dequeue(){
+        if(this.isEmpty()){
+            console.log("Queue is empty");
+            return null;
+        }
+        let item=this.queue[this.front];
+        if(this.front===this.rear){
+            this.front=-1;
+            this.rear=-1;
+        }else{
+            this.front=(this.front+1)%this.capacity;
+        }
+        this.size--;
+        return item;
+    }
+}`,
+
+  python: `# Circular Queue Implementation
+class CircularQueue:
+    def __init__(self,capacity):
+        self.queue=[None]*capacity
+        self.capacity=capacity
+        self.front=-1
+        self.rear=-1
+        self.size=0
+
+    def is_full(self):
+        return self.size==self.capacity
+
+    def is_empty(self):
+        return self.size==0
+
+    def enqueue(self,item):
+        if(self.is_full()):
+            print("Queue is full")
+            return False
+        if(self.is_empty()):
+            self.front=0
+        self.rear=(self.rear+1)%self.capacity
+        self.queue[self.rear]=item
+        self.size+=1
+        return True`,
+
+  java: `// Circular Queue Implementation
+public class CircularQueue{
+    private int[] queue;
+    private int capacity;
+    private int front,rear,size;
+    public CircularQueue(int capacity){
+        this.capacity=capacity;
+        queue=new int[capacity];
+        front=-1;
+        rear=-1;
+        size=0;
+    }
+    public boolean isFull(){
+        return size==capacity;
+    }
+    public boolean isEmpty(){
+        return size==0;
+    }
+}`,
+
+  c: `// Circular Queue Implementation
+#include<stdio.h>
+#include<stdbool.h>
+#include<stdlib.h>
+typedef struct{
+    int* queue;
+    int capacity;
+    int front;
+    int rear;
+    int size;
+}CircularQueue;
+bool isFull(CircularQueue* q){
+    return q->size==q->capacity;
+}
+bool isEmpty(CircularQueue* q){
+    return q->size==0;
+}`,
+
+  cpp: `// Circular Queue Implementation
+#include<iostream>
+using namespace std;
+class CircularQueue{
+private:
+    int* queue;
+    int capacity;
+    int front;
+    int rear;
+    int size;
+public:
+    CircularQueue(int cap){
+        capacity=cap;
+        queue=new int[capacity];
+        front=-1;
+        rear=-1;
+        size=0;
+    }
+    bool isFull(){
+        return size==capacity;
+    }
+    bool isEmpty(){
+        return size==0;
+    }
+};`
+};
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'circularQueue.js',
+    python:'circular_queue.py',
+    java:'CircularQueue.java',
+    c:'circular_queue.c',
+    cpp:'circular_queue.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/queue/types/circular/content.jsx b/src/app/visualizer/queue/types/circular/content.jsx
new file mode 100644
index 000000000..d8f0fbe0d
--- /dev/null
+++ b/src/app/visualizer/queue/types/circular/content.jsx
@@ -0,0 +1,232 @@
+"use client";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraph = [
+    `A Circular Queue is an advanced version of a linear queue that connects the end of the queue back to the front, forming a circle. This efficient structure prevents memory wastage and allows better utilization of fixed-size buffers.`,
+    `The circular queue is an essential data structure for systems requiring efficient, fixed-size buffers with constant-time operations. Its circular nature solves the memory wastage problem of linear queues while maintaining simple and predictable performance characteristics, making it ideal for low-level system programming and real-time applications.`,
+  ];
+
+  const characteristics = [
+    { points : "Fixed capacity: Size is predetermined at creation" },
+    { points : "Two pointers:",
+      subpoints : [
+        "Front: Points to the first element",
+        "Rear: Points to the last element",
+      ],
+     },
+    { points : "Circular behavior: When pointers reach the end, they wrap around to the start" },
+    { points : "Efficient space utilization: Reuses empty spaces created after dequeues" },
+  ];
+
+  const implementation = [
+    { points : "Pointer Movement:", 
+      subpoints : [
+        "front = (front + 1) % capacity",
+        "rear = (rear + 1) % capacity",
+      ],
+    },
+    { points : "Full/Empty Conditions:", 
+      subpoints : [
+        "Full: (rear + 1) % capacity == front",
+        "Empty: front == rear",
+      ],
+    },
+    { points : "Always one empty slot:", 
+      subpoints : [
+        "Needed to distinguish between full and empty states",
+      ],
+    },
+  ];
+
+  const complexity = [
+    { points : "enqueue(): O(1)" },
+    { points : "dequeue(): O(1)" },
+    { points : "peekFront(): O(1)" },
+    { points : "peekRear(): O(1)" },
+    { points : "isEmpty(): O(1)" },
+    { points : "isFull(): O(1)" },
+  ];
+
+  const application = [
+    { points : "CPU Scheduling: Round-robin scheduling algorithms" },
+    { points : "Memory Management: Circular buffers in memory systems" },
+    { points : "Traffic Systems: Controlling the flow of traffic signals" },
+    { points : "Data Streams: Handling continuous data streams (audio/video buffers)" },
+    { points : "Producer-Consumer Problems: Where producers and consumers operate at different rates" },
+  ];
+
+  const advantages = [
+    { points : "Better memory utilization: Reuses empty spaces" },
+    { points : "Efficient operations: No need to shift elements" },
+    { points : "Fixed memory footprint: Predictable memory usage" },
+    { points : "Real-time systems friendly: Bounded execution time" },
+  ];
+
+    return (
+          <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+    {/* What is a Circular Queue? */}
+    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+        What is a Circular Queue?
+      </h1>
+      <div className="prose dark:prose-invert max-w-none">
+        <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+          {paragraph[0]}
+        </p>
+      </div>
+    </section>
+
+    {/* Key Characteristics */}
+    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+        Key Characteristics
+      </h1>
+      <div className="prose dark:prose-invert max-w-none">
+        <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+          Circular queues have these fundamental properties:
+        </p>
+        <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+          {characteristics.map((item, index) => (
+            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+              {item.points}
+              {item.subpoints && (
+                <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                  {item.subpoints.map((subitem, subindex) => (
+                    <li key={subindex} className="text-[#6b7280] dark:text-[#9ca3af]">
+                      {subitem}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          ))}
+        </ol>
+      </div>
+    </section>
+
+    {/* Implementation Details */}
+    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+        Implementation Details
+      </h1>
+      <div className="prose dark:prose-invert max-w-none">
+        <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+          Key implementation aspects:
+        </p>
+        <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+          {implementation.map((item, index) => (
+            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+              <span className="font-semibold">{item.points}</span>
+              {item.subpoints && (
+                <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                  {item.subpoints.map((subitem, subindex) => (
+                    <li key={subindex} className="text-[#6b7280] dark:text-[#9ca3af]">
+                      {subitem}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          ))}
+        </ol>
+      </div>
+    </section>
+
+    {/* Time Complexity */}
+    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+        Time Complexity
+      </h1>
+      <div className="prose dark:prose-invert max-w-none">
+        <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+          {complexity.map((item, index) => (
+            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+              <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                {item.points.split(':')[0]}:
+              </span>
+              <span className="ml-2">{item.points.split(':')[1]}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+
+    {/* Applications */}
+    <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+        Applications
+      </h1>
+      <div className="prose dark:prose-invert max-w-none">
+        <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+          Circular queues are used in:
+        </p>
+        <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+          {application.map((item, index) => (
+            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+              {item.points}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+
+    {/* Advantages Over Linear Queue */}
+    <section className="p-6">
+      <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+        <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+        Advantages Over Linear Queue
+      </h1>
+      <div className="prose dark:prose-invert max-w-none">
+        <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+          {advantages.map((item, index) => (
+            <li key={index} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+              {item.points}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+
+    {/* Additional Info */}
+    <section className="p-6 border-t border-[#f3f4f6] dark:border-[#1e1e1e]">
+      <div className="prose dark:prose-invert max-w-none">
+        <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+          <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+            {paragraph[1]}
+          </p>
+        </div>
+      </div>
+    </section>
+  </article>
+</main>
+    );
+  };
+  
+  export default Content;
diff --git a/src/app/visualizer/queue/types/circular/quiz.jsx b/src/app/visualizer/queue/types/circular/quiz.jsx
new file mode 100644
index 000000000..028eebc68
--- /dev/null
+++ b/src/app/visualizer/queue/types/circular/quiz.jsx
@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QueueQuiz = () => {
+  const questions = [
+    {
+      question: "What is the primary advantage of a circular queue over a linear queue?",
+      options: [
+        "Unlimited capacity",
+        "Better memory utilization by reusing empty spaces",
+        "Faster sorting capability",
+        "Built-in search functionality"
+      ],
+      correctAnswer: 1,
+      explanation: "Circular queues efficiently reuse empty spaces created by dequeue operations, preventing memory wastage."
+    },
+    {
+      question: "How is the rear pointer calculated after an enqueue operation in a circular queue?",
+      options: [
+        "rear = rear + 1",
+        "rear = (rear + 1) % capacity",
+        "rear = front + 1",
+        "rear = capacity - 1"
+      ],
+      correctAnswer: 1,
+      explanation: "The rear pointer wraps around using modulo arithmetic: rear = (rear + 1) % capacity."
+    },
+    {
+      question: "What condition indicates that a circular queue is full?",
+      options: [
+        "front == rear",
+        "(rear + 1) % capacity == front",
+        "front == 0 && rear == capacity - 1",
+        "rear == capacity - 1"
+      ],
+      correctAnswer: 1,
+      explanation: "The queue is full when the next position after rear (wrapped around) equals front."
+    },
+    {
+      question: "Why do circular queues typically maintain one empty slot?",
+      options: [
+        "To reduce memory usage",
+        "To distinguish between full and empty states",
+        "For temporary storage during operations",
+        "It's required by the implementation language"
+      ],
+      correctAnswer: 1,
+      explanation: "Without one empty slot, the conditions for full and empty states would be identical (front == rear)."
+    },
+    {
+      question: "What is the time complexity of peekFront() in a circular queue?",
+      options: [
+        "O(1)",
+        "O(n)",
+        "O(log n)",
+        "O(n²)"
+      ],
+      correctAnswer: 0,
+      explanation: "All basic operations (enqueue, dequeue, peek) are O(1) in a circular queue."
+    }
+  ];
+
+  return <QuizEngine title="Circular Queue Quiz" questions={questions} />;
+};
+
+export default QueueQuiz;
diff --git a/src/app/visualizer/queue/types/deque/AlgorithmClient.jsx b/src/app/visualizer/queue/types/deque/AlgorithmClient.jsx
new file mode 100644
index 000000000..38885f474
--- /dev/null
+++ b/src/app/visualizer/queue/types/deque/AlgorithmClient.jsx
@@ -0,0 +1,34 @@
+import Animation from "@/app/visualizer/queue/types/deque/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/queue/types/deque/content";
+import Code from "@/app/visualizer/queue/types/deque/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Queue", "Double Ended")}
+      title="Double Ended"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore Other Types"
+          links={[
+            { text: "Single Ended Queue", url: "./singleEnded" },
+            { text: "Circular Queue", url: "./circular" },
+            { text: "Multiple Queue", url: "./multiple" },
+            { text: "Priority Queue", url: "./priority" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/queue/types/deque/animation.jsx b/src/app/visualizer/queue/types/deque/animation.jsx
new file mode 100644
index 000000000..6d4ddb4ba
--- /dev/null
+++ b/src/app/visualizer/queue/types/deque/animation.jsx
@@ -0,0 +1,281 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import {
+  enqueueFrontGenerator,
+  enqueueRearGenerator,
+  dequeueFrontGenerator,
+  dequeueRearGenerator
+} from "@/features/algorithms/queue/dequeLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+const DequeVisualizer = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [queue, setQueue] = useState([]);
+  const [pendingOp, setPendingOp] = useState(null);
+
+  const frames = useMemo(() => {
+    if (!pendingOp) return [];
+    switch (pendingOp.type) {
+      case 'enqueueFront': return Array.from(enqueueFrontGenerator(queue, pendingOp.value));
+      case 'enqueueRear': return Array.from(enqueueRearGenerator(queue, pendingOp.value));
+      case 'dequeueFront': return Array.from(dequeueFrontGenerator(queue));
+      case 'dequeueRear': return Array.from(dequeueRearGenerator(queue));
+      default: return [];
+    }
+  }, [queue, pendingOp]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 800 });
+
+  const enqueueFront = () => {
+    if (!inputValue || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'enqueueFront', value: inputValue });
+    engine.reset();
+    engine.play();
+  };
+
+  const enqueueRear = () => {
+    if (!inputValue || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'enqueueRear', value: inputValue });
+    engine.reset();
+    engine.play();
+  };
+
+  const dequeueFront = () => {
+    if (queue.length === 0 || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'dequeueFront' });
+    engine.reset();
+    engine.play();
+  };
+
+  const dequeueRear = () => {
+    if (queue.length === 0 || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'dequeueRear' });
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setInputValue("");
+    setQueue([]);
+    setPendingOp(null);
+    engine.reset();
+  };
+
+  useVisualizerReset(handleReset);
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.phase === 'complete') {
+         setQueue(finalFrame.deque);
+      }
+      setPendingOp(null);
+      engine.reset();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  // Auto-commit on completion
+  React.useEffect(() => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0 && !engine.isPlaying) {
+        const finalFrame = frames[frames.length - 1];
+        if (finalFrame && finalFrame.phase === 'complete') {
+            setQueue(finalFrame.deque);
+            setPendingOp(null);
+            if (pendingOp?.type.startsWith('enqueue')) setInputValue("");
+            engine.reset();
+        }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine, pendingOp]);
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        phase: 'idle',
+        deque: queue,
+        explanation: "Enter a value and add/remove from either the front or the rear of the Double-Ended Queue."
+      };
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize how a Deque (Double-Ended Queue) allows insertions and deletions at both ends.
+      </p>
+
+      <VisualizerCard>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              className="flex-1 rounded-lg border bg-white p-3 dark:bg-gray-700"
+              placeholder="Enter value"
+              disabled={engine.isPlaying || pendingOp !== null}
+            />
+            <button
+              onClick={enqueueFront}
+              disabled={engine.isPlaying || !inputValue || pendingOp !== null}
+              className="rounded-lg bg-blue-600 px-4 py-3 text-white transition hover:bg-blue-700 disabled:opacity-50"
+            >
+              Enqueue Front
+            </button>
+            <button
+              onClick={enqueueRear}
+              disabled={engine.isPlaying || !inputValue || pendingOp !== null}
+              className="rounded-lg bg-emerald-600 px-4 py-3 text-white transition hover:bg-emerald-700 disabled:opacity-50"
+            >
+              Enqueue Rear
+            </button>
+          </div>
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <button
+              onClick={dequeueFront}
+              disabled={engine.isPlaying || queue.length === 0 || pendingOp !== null}
+              className="w-full rounded-lg border border-blue-600 px-4 py-3 text-blue-600 transition hover:bg-blue-50 dark:hover:bg-blue-900/20 disabled:opacity-50 sm:w-1/3"
+            >
+              Dequeue Front
+            </button>
+            <button
+              onClick={dequeueRear}
+              disabled={engine.isPlaying || queue.length === 0 || pendingOp !== null}
+              className="w-full rounded-lg border border-emerald-600 px-4 py-3 text-emerald-600 transition hover:bg-emerald-50 dark:hover:bg-emerald-900/20 disabled:opacity-50 sm:w-1/3"
+            >
+              Dequeue Rear
+            </button>
+            <button
+              onClick={handleReset}
+              disabled={engine.isPlaying && pendingOp === null}
+              className="w-full rounded-lg border border-black px-4 py-3 text-black transition hover:bg-gray-100 dark:border-white dark:text-white dark:hover:bg-gray-700 sm:w-1/3"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center min-h-[60px] flex items-center justify-center">
+         <p className="text-gray-800 dark:text-gray-200 font-medium">
+             {currentFrame.explanation}
+         </p>
+      </div>
+
+      <VisualizerCard>
+        <div className="mb-6 flex justify-between px-4 text-sm font-semibold text-gray-500 dark:text-gray-400 sm:px-8">
+          <div>Front</div>
+          <div>Rear</div>
+        </div>
+        
+        <div className="relative flex min-h-[160px] w-full flex-col items-center justify-center overflow-x-auto rounded-xl border border-gray-200 bg-gray-50 dark:border-[#222] dark:bg-[#181818] p-6">
+            
+            {currentFrame.action === 'enqueue_front' && currentFrame.newValue && currentFrame.phase === 'start' && (
+                <div className="absolute left-10 top-0 mb-4 animate-bounce flex flex-col items-center">
+                    <span className="text-xs font-bold text-blue-500 mb-1">New Front</span>
+                    <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-blue-500 text-xl font-bold text-white shadow-lg">
+                        {currentFrame.newValue}
+                    </div>
+                </div>
+            )}
+
+            {currentFrame.action === 'enqueue_rear' && currentFrame.newValue && currentFrame.phase === 'start' && (
+                <div className="absolute right-10 top-0 mb-4 animate-bounce flex flex-col items-center">
+                    <span className="text-xs font-bold text-emerald-500 mb-1">New Rear</span>
+                    <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-emerald-500 text-xl font-bold text-white shadow-lg">
+                        {currentFrame.newValue}
+                    </div>
+                </div>
+            )}
+            
+            {currentFrame.action === 'dequeue_front' && currentFrame.dequeuedNode && currentFrame.phase === 'start' && (
+                <div className="absolute left-10 top-0 mb-4 flex flex-col items-center opacity-50 scale-110 translate-y-[-20px] transition-all duration-500">
+                    <span className="text-xs font-bold text-rose-500 mb-1">Removed</span>
+                    <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-rose-500 text-xl font-bold text-white shadow-lg">
+                        {currentFrame.dequeuedNode.value}
+                    </div>
+                </div>
+            )}
+
+            {currentFrame.action === 'dequeue_rear' && currentFrame.dequeuedNode && currentFrame.phase === 'start' && (
+                <div className="absolute right-10 top-0 mb-4 flex flex-col items-center opacity-50 scale-110 translate-y-[-20px] transition-all duration-500">
+                    <span className="text-xs font-bold text-rose-500 mb-1">Removed</span>
+                    <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-rose-500 text-xl font-bold text-white shadow-lg">
+                        {currentFrame.dequeuedNode.value}
+                    </div>
+                </div>
+            )}
+
+            {currentFrame.deque.length === 0 ? (
+                <div className="py-8 text-center text-gray-500 font-medium">
+                Deque is empty
+                </div>
+            ) : (
+                <div className="flex items-center gap-4">
+                {currentFrame.deque.map((node, index) => {
+                    const isNewFront = currentFrame.action === 'enqueue_front' && currentFrame.phase === 'complete' && index === 0;
+                    const isNewRear = currentFrame.action === 'enqueue_rear' && currentFrame.phase === 'complete' && index === currentFrame.deque.length - 1;
+                    
+                    let bgClass = "bg-primary";
+                    let scaleClass = "scale-100";
+
+                    if (isNewFront) {
+                        bgClass = "bg-blue-500";
+                        scaleClass = "scale-110 shadow-lg";
+                    } else if (isNewRear) {
+                        bgClass = "bg-emerald-500";
+                        scaleClass = "scale-110 shadow-lg";
+                    }
+                    
+                    return (
+                    <div
+                        key={node.id}
+                        className={`flex h-16 w-16 items-center justify-center rounded-lg text-xl font-bold text-white shadow-md transition-all duration-500 ${bgClass} ${scaleClass}`}
+                    >
+                        {node.value}
+                    </div>
+                    );
+                })}
+                </div>
+            )}
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default DequeVisualizer;
\ No newline at end of file
diff --git a/src/app/visualizer/queue/types/deque/codeBlock.jsx b/src/app/visualizer/queue/types/deque/codeBlock.jsx
new file mode 100644
index 000000000..b540bbdf7
--- /dev/null
+++ b/src/app/visualizer/queue/types/deque/codeBlock.jsx
@@ -0,0 +1,178 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for Double Ended Queue ─────────────────────
+const codeExamples = {
+  javascript: `// Double Ended Queue Implementation
+class Deque{
+    constructor(size=10){
+        this.items=new Array(size);
+        this.front=-1;
+        this.rear=0;
+        this.size=0;
+        this.capacity=size;
+    }
+    addFront(item){
+        if(this.isFull()){
+            console.log("Deque Overflow");
+            return;
+        }
+        if(this.front===-1){
+            this.front=0;
+            this.rear=0;
+        }else if(this.front===0){
+            this.front=this.capacity-1;
+        }else{
+            this.front--;
+        }
+        this.items[this.front]=item;
+        this.size++;
+    }
+    addRear(item){
+        if(this.isFull()){
+            console.log("Deque Overflow");
+            return;
+        }
+        if(this.front===-1){
+            this.front=0;
+            this.rear=0;
+        }else if(this.rear===this.capacity-1){
+            this.rear=0;
+        }else{
+            this.rear++;
+        }
+        this.items[this.rear]=item;
+        this.size++;
+    }
+    removeFront(){
+        if(this.isEmpty()){
+            return undefined;
+        }
+        const item=this.items[this.front];
+        this.front=(this.front+1)%this.capacity;
+        this.size--;
+        return item;
+    }
+    isEmpty(){
+        return this.size===0;
+    }
+    isFull(){
+        return this.size===this.capacity;
+    }
+}`,
+
+  python: `# Double Ended Queue
+class Deque:
+    def __init__(self,size=10):
+        self.items=[None]*size
+        self.front=-1
+        self.rear=0
+        self.size=0
+        self.capacity=size
+
+    def add_front(self,item):
+        if self.is_full():
+            print("Deque Overflow")
+            return
+        if self.front==-1:
+            self.front=0
+            self.rear=0
+        elif self.front==0:
+            self.front=self.capacity-1
+        else:
+            self.front-=1
+        self.items[self.front]=item
+        self.size+=1
+
+    def is_empty(self):
+        return self.size==0
+
+    def is_full(self):
+        return self.size==self.capacity`,
+
+  java: `// Double Ended Queue
+public class ArrayDeque{
+    private int[] items;
+    private int front;
+    private int rear;
+    private int size;
+    private int capacity;
+    public ArrayDeque(int size){
+        items=new int[size];
+        front=-1;
+        rear=0;
+        this.size=0;
+        capacity=size;
+    }
+    public boolean isEmpty(){
+        return size==0;
+    }
+    public boolean isFull(){
+        return size==capacity;
+    }
+}`,
+
+  c: `// Double Ended Queue
+#include<stdio.h>
+#include<stdbool.h>
+typedef struct{
+    int* items;
+    int front;
+    int rear;
+    int size;
+    int capacity;
+}Deque;
+bool isEmpty(Deque* dq){
+    return dq->size==0;
+}
+bool isFull(Deque* dq){
+    return dq->size==dq->capacity;
+}`,
+
+  cpp: `// Double Ended Queue
+#include<iostream>
+using namespace std;
+class Deque{
+private:
+    int* items;
+    int front;
+    int rear;
+    int size;
+    int capacity;
+public:
+    Deque(int s){
+        items=new int[s];
+        front=-1;
+        rear=0;
+        size=0;
+        capacity=s;
+    }
+    bool isEmpty(){
+        return size==0;
+    }
+    bool isFull(){
+        return size==capacity;
+    }
+};`
+};
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'deque.js',
+    python:'deque.py',
+    java:'ArrayDeque.java',
+    c:'deque.c',
+    cpp:'deque.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/queue/types/deque/content.jsx b/src/app/visualizer/queue/types/deque/content.jsx
new file mode 100644
index 000000000..f8d8548f8
--- /dev/null
+++ b/src/app/visualizer/queue/types/deque/content.jsx
@@ -0,0 +1,267 @@
+"use client";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraph = [
+    `A Double-Ended Queue (Deque) is a versatile data structure that allows insertion and deletion of elements from both ends (front and rear). Unlike a single-ended queue, it provides more flexibility while maintaining efficient O(1) operations.`,
+    `The double-ended queue is a powerful hybrid data structure that combines the best features of stacks and queues. Its flexibility makes it invaluable for algorithms requiring access to both ends of a dataset, while maintaining efficient constant-time operations for all key functions.`,
+  ];
+
+  const characteristics = [
+    {
+      points: "Two open ends:",
+      subpoints: ["Supports operations at both front and rear"],
+    },
+    {
+      points: "Four core operations:",
+      subpoints: [
+        "addFront() - Insert at front",
+        "addRear() - Insert at rear",
+        "removeFront() - Delete from front",
+        "removeRear() - Delete from rear",
+      ],
+    },
+    {
+      points: "Hybrid nature:",
+      subpoints: ["Combines features of both stacks and queues"],
+    },
+  ];
+
+  const variations = [
+    {
+      points: "Doubly Linked List:",
+      subpoints: [
+        "Natural fit with head and tail pointers",
+        "All operations are O(1)",
+        "Extra memory for previous/next pointers",
+      ],
+    },
+    {
+      points: "Circular Array:",
+      subpoints: [
+        "Fixed capacity but efficient",
+        "Requires careful index management",
+        "Good for memory-constrained environments",
+      ],
+    },
+    {
+      points: "Dynamic Array:",
+      subpoints: ["Amortized O(1) operations", "May need occasional resizing"],
+    },
+  ];
+
+  const complexity = [
+    { points: "addFront(): O(1)" },
+    { points: "addRear(): O(1)" },
+    { points: "removeFront(): O(1)" },
+    { points: "removeRear(): O(1)" },
+    { points: "peekFront(): O(1)" },
+    { points: "peekRear(): O(1)" },
+  ];
+
+  const application = [
+    { points: "Undo/Redo operations: Store history at both ends" },
+    { points: "Palindrome checking: Compare front and rear elements" },
+    { points: "Steal algorithms: Work stealing in parallel processing" },
+    { points: "Sliding window problems: Efficient maximum/minimum tracking" },
+    { points: "Browser history: Navigation in both directions" },
+  ];
+
+  const cases = [
+    { points: "Input-Restricted Deque: Insertion only at one end" },
+    { points: "Output-Restricted Deque: Deletion only at one end" },
+    { points: "Palindrome Checker: Using deque properties" },
+    { points: "Priority Deque: Combines deque and priority queue features" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is a Double-Ended Queue (Deque)? */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is a Double-Ended Queue (Deque)?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraph[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* Key Characteristics */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Key Characteristics
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Deques have these fundamental properties:
+            </p>
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {characteristics.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                  {item.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.subpoints.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Implementation Variations */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Implementation Variations
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Common implementation approaches:
+            </p>
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {variations.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-semibold">{item.points}</span>
+                  {item.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.subpoints.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {complexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                    {item.points.split(":")[0]}:
+                  </span>
+                  <span className="ml-2">{item.points.split(":")[1]}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Applications */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Applications
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Deques are used in:
+            </p>
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {application.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Special Cases */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Special Cases
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Interesting deque variations:
+            </p>
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {cases.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6 border-t border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraph[1]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/queue/types/deque/quiz.jsx b/src/app/visualizer/queue/types/deque/quiz.jsx
new file mode 100644
index 000000000..a88cc89f9
--- /dev/null
+++ b/src/app/visualizer/queue/types/deque/quiz.jsx
@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QueueQuiz = () => {
+  const questions = [
+    {
+      question: "What is the key characteristic that distinguishes a deque from a single-ended queue?",
+      options: [
+        "Allows operations at only one end",
+        "Allows operations at both ends", 
+        "Only allows insertion at one end and removal at the other",
+        "Uses LIFO principle exclusively"
+      ],
+      correctAnswer: 1,
+      explanation: "Deques allow insertion and removal at both front and rear ends, unlike single-ended queues which are restricted to rear insertion and front removal."
+    },
+    {
+      question: "Which of the following is NOT a standard deque operation?",
+      options: [
+        "addFront()",
+        "addRear()", 
+        "removeMiddle()",
+        "removeRear()"
+      ],
+      correctAnswer: 2,
+      explanation: "Deques don't typically support direct middle removal - their core operations work at the two ends only."
+    },
+    {
+      question: "What would be the result of these operations on an empty deque? addFront(10), addRear(20), removeFront()",
+      options: [
+        "10",
+        "20", 
+        "[10, 20]",
+        "Empty deque"
+      ],
+      correctAnswer: 1,
+      explanation: "addFront(10) → [10], addRear(20) → [10, 20], removeFront() removes 10, leaving 20 as the return value."
+    },
+    {
+      question: "Which data structure is most commonly used to implement a deque efficiently?",
+      options: [
+        "Singly Linked List",
+        "Binary Tree", 
+        "Doubly Linked List",
+        "Hash Table"
+      ],
+      correctAnswer: 2,
+      explanation: "Doubly linked lists are ideal for deque implementation as they allow O(1) operations at both ends."
+    },
+    {
+      question: "What is the time complexity for removeRear() in a properly implemented deque?",
+      options: [
+        "O(1)",
+        "O(n)", 
+        "O(log n)",
+        "O(n²)"
+      ],
+      correctAnswer: 0,
+      explanation: "All core deque operations (addFront, addRear, removeFront, removeRear) should be O(1) in a proper implementation."
+    }
+  ];
+
+  return <QuizEngine title="Deque Quiz" questions={questions} />;
+};
+
+export default QueueQuiz;
diff --git a/src/app/visualizer/queue/types/priority/AlgorithmClient.jsx b/src/app/visualizer/queue/types/priority/AlgorithmClient.jsx
new file mode 100644
index 000000000..ef246b810
--- /dev/null
+++ b/src/app/visualizer/queue/types/priority/AlgorithmClient.jsx
@@ -0,0 +1,34 @@
+import Animation from "@/app/visualizer/queue/types/priority/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/queue/types/priority/content";
+import Code from "@/app/visualizer/queue/types/priority/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Queue", "Priority Queue")}
+      title="Priority Queue"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore Other Types"
+          links={[
+            { text: "Single Ended Queue", url: "./singleEnded" },
+            { text: "Circular Queue", url: "./circular" },
+            { text: "Double-Ended Queue", url: "./deque" },
+            { text: "Multiple Queue", url: "./multiple" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/queue/types/priority/animation.jsx b/src/app/visualizer/queue/types/priority/animation.jsx
new file mode 100644
index 000000000..65314bf45
--- /dev/null
+++ b/src/app/visualizer/queue/types/priority/animation.jsx
@@ -0,0 +1,234 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import {
+  insertGenerator,
+  extractMinGenerator,
+} from "@/features/algorithms/queue/priorityQueueLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+const PriorityQueueVisualizer = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [priorityValue, setPriorityValue] = useState("");
+  const [queue, setQueue] = useState([]);
+  const [pendingOp, setPendingOp] = useState(null); // { type: 'insert', value: string, priority: string } | { type: 'extract_min' }
+
+  const frames = useMemo(() => {
+    if (!pendingOp) return [];
+    if (pendingOp.type === 'insert') {
+      return Array.from(insertGenerator(queue, pendingOp.value, pendingOp.priority));
+    } else if (pendingOp.type === 'extract_min') {
+      return Array.from(extractMinGenerator(queue));
+    }
+    return [];
+  }, [queue, pendingOp]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 800 });
+
+  const insert = () => {
+    if (!inputValue || priorityValue === "" || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'insert', value: inputValue, priority: priorityValue });
+    engine.reset();
+    engine.play();
+  };
+
+  const extractMin = () => {
+    if (queue.length === 0 || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'extract_min' });
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setInputValue("");
+    setPriorityValue("");
+    setQueue([]);
+    setPendingOp(null);
+    engine.reset();
+  };
+
+  useVisualizerReset(handleReset);
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.phase === 'complete') {
+         setQueue(finalFrame.pq);
+      }
+      setPendingOp(null);
+      engine.reset();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  // Auto-commit on completion
+  React.useEffect(() => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0 && !engine.isPlaying) {
+        const finalFrame = frames[frames.length - 1];
+        if (finalFrame && finalFrame.phase === 'complete') {
+            setQueue(finalFrame.pq);
+            setPendingOp(null);
+            if (pendingOp?.type === 'insert') {
+                setInputValue("");
+                setPriorityValue("");
+            }
+            engine.reset();
+        }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine, pendingOp]);
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        phase: 'idle',
+        pq: queue,
+        explanation: "Enter a value and priority, then click 'Insert'. The queue will order elements by priority."
+      };
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize how a Priority Queue sorts elements based on priority (lowest number = highest priority).
+      </p>
+
+      <VisualizerCard>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              className="flex-1 rounded-lg border bg-white p-3 dark:bg-gray-700"
+              placeholder="Enter value"
+              disabled={engine.isPlaying || pendingOp !== null}
+            />
+            <input
+              type="number"
+              value={priorityValue}
+              onChange={(e) => setPriorityValue(e.target.value)}
+              className="w-full sm:w-32 rounded-lg border bg-white p-3 dark:bg-gray-700"
+              placeholder="Priority"
+              disabled={engine.isPlaying || pendingOp !== null}
+            />
+            <button
+              onClick={insert}
+              disabled={engine.isPlaying || !inputValue || priorityValue === "" || pendingOp !== null}
+              className="w-full rounded-lg bg-primary px-6 py-3 text-white transition hover:bg-primary-dark disabled:bg-gray-400 sm:w-auto"
+            >
+              Insert
+            </button>
+          </div>
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <button
+              onClick={extractMin}
+              disabled={engine.isPlaying || queue.length === 0 || pendingOp !== null}
+              className="w-full rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 disabled:opacity-50 dark:border-white dark:text-white dark:hover:bg-gray-700 sm:w-1/2"
+            >
+              Extract Min
+            </button>
+            <button
+              onClick={handleReset}
+              disabled={engine.isPlaying && pendingOp === null}
+              className="w-full rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 dark:border-white dark:text-white dark:hover:bg-gray-700 sm:w-1/2"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center min-h-[60px] flex items-center justify-center">
+         <p className="text-gray-800 dark:text-gray-200 font-medium">
+             {currentFrame.explanation}
+         </p>
+      </div>
+
+      <VisualizerCard>
+        <div className="mb-6 flex justify-between px-4 text-sm font-semibold text-gray-500 dark:text-gray-400 sm:px-8">
+          <div>Highest Priority (Min)</div>
+          <div>Lowest Priority</div>
+        </div>
+        
+        <div className="relative flex min-h-[160px] w-full flex-col items-center justify-center overflow-x-auto rounded-xl border border-gray-200 bg-gray-50 dark:border-[#222] dark:bg-[#181818] p-6">
+            
+            {currentFrame.action === 'extract_min' && currentFrame.extractedNode && currentFrame.phase === 'start' && (
+                <div className="absolute left-10 top-0 mb-4 flex flex-col items-center opacity-50 scale-110 translate-y-[-20px] transition-all duration-500">
+                    <span className="text-xs font-bold text-rose-500 mb-1">Extracted</span>
+                    <div className="flex flex-col items-center justify-center rounded-lg bg-rose-500 p-2 shadow-lg w-20">
+                        <div className="text-xs font-semibold text-rose-200">Pri: {currentFrame.extractedNode.pri}</div>
+                        <div className="text-xl font-bold text-white">{currentFrame.extractedNode.val}</div>
+                    </div>
+                </div>
+            )}
+
+            {currentFrame.pq.length === 0 ? (
+                <div className="py-8 text-center text-gray-500 font-medium">
+                Priority Queue is empty
+                </div>
+            ) : (
+                <div className="flex items-center gap-4">
+                {currentFrame.pq.map((node, index) => {
+                    const isNew = currentFrame.action === 'insert' && currentFrame.phase !== 'start' && node.val === currentFrame.newValue && node.pri === currentFrame.newPri;
+                    
+                    let bgClass = "bg-primary";
+                    let scaleClass = "scale-100";
+
+                    if (isNew) {
+                        bgClass = "bg-blue-500";
+                        scaleClass = "scale-110 shadow-lg z-10";
+                    }
+                    
+                    return (
+                    <div
+                        key={node.id}
+                        className={`flex flex-col items-center justify-center rounded-lg p-2 shadow-md transition-all duration-500 w-20 ${bgClass} ${scaleClass}`}
+                    >
+                        <div className="text-xs font-semibold text-white/70">Pri: {node.pri}</div>
+                        <div className="text-xl font-bold text-white">{node.val}</div>
+                    </div>
+                    );
+                })}
+                </div>
+            )}
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default PriorityQueueVisualizer;
\ No newline at end of file
diff --git a/src/app/visualizer/queue/types/priority/codeBlock.jsx b/src/app/visualizer/queue/types/priority/codeBlock.jsx
new file mode 100644
index 000000000..c9666c46a
--- /dev/null
+++ b/src/app/visualizer/queue/types/priority/codeBlock.jsx
@@ -0,0 +1,160 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for Priority Queue ─────────────────────
+const codeExamples = {
+  javascript: `// Priority Queue (Min Heap)
+class PriorityQueue{
+    constructor(comparator=(a,b)=>a.priority-b.priority){
+        this.heap=[];
+        this.comparator=comparator;
+    }
+    enqueue(value,priority){
+        const element={value,priority};
+        this.heap.push(element);
+        this.bubbleUp(this.heap.length-1);
+    }
+    dequeue(){
+        if(this.isEmpty()){
+            return null;
+        }
+        const root=this.heap[0];
+        const last=this.heap.pop();
+        if(this.heap.length>0){
+            this.heap[0]=last;
+            this.bubbleDown(0);
+        }
+        return root.value;
+    }
+    peek(){
+        return this.isEmpty()
+        ?null
+        :this.heap[0].value;
+    }
+    size(){
+        return this.heap.length;
+    }
+    isEmpty(){
+        return this.heap.length===0;
+    }
+}`,
+
+  python: `# Priority Queue
+import heapq
+
+class PriorityQueue:
+    def __init__(self):
+        self.heap=[]
+        self.index=0
+
+    def enqueue(self,value,priority):
+        heapq.heappush(self.heap,(priority,self.index,value))
+        self.index+=1
+
+    def dequeue(self):
+        if self.is_empty():
+            return None
+        return heapq.heappop(self.heap)[2]
+
+    def peek(self):
+        if self.is_empty():
+            return None
+        return self.heap[0][2]
+
+    def size(self):
+        return len(self.heap)
+
+    def is_empty(self):
+        return len(self.heap)==0`,
+
+  java: `// Priority Queue
+import java.util.PriorityQueue;
+import java.util.Comparator;
+
+public class Main{
+    static class Item<T>{
+        T value;
+        int priority;
+        Item(T value,int priority){
+            this.value=value;
+            this.priority=priority;
+        }
+    }
+    static class CustomPriorityQueue<T>{
+        private PriorityQueue<Item<T>> queue;
+        public CustomPriorityQueue(){
+            queue=new PriorityQueue<>(Comparator.comparingInt(item->item.priority));
+        }
+        public void enqueue(T value,int priority){
+            queue.add(new Item<>(value,priority));
+        }
+    }
+}`,
+
+  c: `// Priority Queue
+#include<stdio.h>
+#include<stdlib.h>
+
+typedef struct{
+    void* value;
+    int priority;
+}PriorityItem;
+
+typedef struct{
+    PriorityItem* heap;
+    int size;
+    int capacity;
+}PriorityQueue;
+
+PriorityQueue* createPriorityQueue(int capacity){
+    PriorityQueue* pq=(PriorityQueue*)malloc(sizeof(PriorityQueue));
+    pq->heap=malloc(capacity*sizeof(PriorityItem));
+    pq->capacity=capacity;
+    pq->size=0;
+    return pq;
+}`,
+
+  cpp: `// Priority Queue
+#include<iostream>
+#include<vector>
+using namespace std;
+
+template<typename T>
+class PriorityQueue{
+private:
+    struct Item{
+        T value;
+        int priority;
+        bool operator<(const Item& other)const{
+            return priority>other.priority;
+        }
+    };
+    vector<Item> heap;
+public:
+    void enqueue(const T& value,int priority){
+        heap.push_back({value,priority});
+        push_heap(heap.begin(),heap.end());
+    }
+};`
+};
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'priorityQueue.js',
+    python:'priority_queue.py',
+    java:'PriorityQueue.java',
+    c:'priority_queue.c',
+    cpp:'priority_queue.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/queue/types/priority/content.jsx b/src/app/visualizer/queue/types/priority/content.jsx
new file mode 100644
index 000000000..4a7fc06ea
--- /dev/null
+++ b/src/app/visualizer/queue/types/priority/content.jsx
@@ -0,0 +1,258 @@
+"use client";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraphs = [
+    `A Priority Queue is an abstract data type where each element has a priority value, and elements are served based on priority rather than insertion order. Unlike a standard queue (FIFO), higher-priority elements are dequeued before lower-priority ones, regardless of when they were added.`,
+    `The priority queue is a fundamental data structure that enables efficient management of elements based on their importance or urgency. Its ability to always provide access to the highest (or lowest) priority item makes it indispensable in algorithms where processing order significantly impacts performance or correctness. The choice of implementation (heap, BST, etc.) depends on the specific application's requirements for insertion, extraction, and auxiliary operations.`,
+  ];
+
+  const characteristic = [
+    {
+      points: "Priority-based ordering:",
+      subpoints: [
+        "Elements are processed by priority (highest first or lowest first)",
+      ],
+    },
+    {
+      points: "Two core operations:",
+      subpoints: [
+        "insert(item, priority) - Add with priority",
+        "extractMax()/extractMin() - Remove highest/lowest priority item",
+      ],
+    },
+    {
+      points: "Peek operation:",
+      subpoints: ["View highest/lowest priority item without removal"],
+    },
+    {
+      points: "No FIFO guarantee:",
+      subpoints: [
+        "Equal priority elements may be processed in arbitrary order",
+      ],
+    },
+  ];
+
+  const implementation = [
+    {
+      points: "Binary Heap:",
+      subpoints: [
+        "Most common implementation",
+        "O(log n) insert and extract",
+        "O(1) peek",
+        "Memory efficient",
+      ],
+    },
+    {
+      points: "Balanced Binary Search Tree:",
+      subpoints: [
+        "O(log n) all operations",
+        "Supports more operations (like delete-by-value)",
+        "Higher memory overhead",
+      ],
+    },
+    {
+      points: "Array (Unsorted):",
+      subpoints: [
+        "O(1) insert, O(n) extract",
+        "Simple but inefficient for large datasets",
+      ],
+    },
+    {
+      points: "Fibonacci Heap:",
+      subpoints: [
+        "Amortized O(1) insert",
+        "O(log n) extract",
+        "Complex implementation",
+      ],
+    },
+  ];
+
+  const application = [
+    { points: "Dijkstra's Algorithm: Finding shortest paths in graphs" },
+    { points: "Huffman Coding: Data compression" },
+    { points: "Operating Systems: Process scheduling" },
+    { points: "Event-driven Simulation: Processing events in time order" },
+    { points: "A* Search: Pathfinding in AI" },
+    { points: "Bandwidth Management: Prioritizing network packets" },
+  ];
+
+  const special = [
+    { points: "Min-Priority Queue: Extracts minimum priority first" },
+    { points: "Max-Priority Queue: Extracts maximum priority first" },
+    {
+      points:
+        "Double-Ended Priority Queue: Supports both min and max extraction",
+    },
+    { points: "Indexed Priority Queue: Allows priority updates by key" },
+    { points: "Bounded Priority Queue: Fixed capacity with eviction policies" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is a Priority Queue? */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is a Priority Queue?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* Key Characteristics */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Key Characteristics
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Priority queues have these fundamental properties:
+            </p>
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {characteristic.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                  {item.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.subpoints.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Implementation Variations */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Implementation Variations
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Common implementation approaches:
+            </p>
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {implementation.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-semibold">{item.points}</span>
+                  {item.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.subpoints.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Applications */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Applications
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Priority queues are used in:
+            </p>
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {application.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Special Cases */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Special Cases
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Interesting priority queue variations:
+            </p>
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {special.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6 border-t border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraphs[1]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/queue/types/priority/quiz.jsx b/src/app/visualizer/queue/types/priority/quiz.jsx
new file mode 100644
index 000000000..a996504ea
--- /dev/null
+++ b/src/app/visualizer/queue/types/priority/quiz.jsx
@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QueueQuiz = () => {
+  const questions = [
+    {
+      question: "What is the fundamental difference between a priority queue and a standard queue?",
+      options: [
+        "Priority queues use LIFO ordering",
+        "Elements are processed based on priority rather than insertion order",
+        "Priority queues can only store numeric values",
+        "Standard queues are always faster"
+      ],
+      correctAnswer: 1,
+      explanation: "Priority queues process elements by their priority value rather than following strict FIFO order like standard queues."
+    },
+    {
+      question: "Which operation in a max-priority queue returns the highest priority element without removing it?",
+      options: [
+        "extractMax()",
+        "insert()",
+        "peek()",
+        "remove()"
+      ],
+      correctAnswer: 2,
+      explanation: "peek() allows viewing the highest priority element while leaving it in the queue."
+    },
+    {
+      question: "What is the time complexity of insert() and extractMax() operations in a binary heap implementation?",
+      options: [
+        "O(1) for both",
+        "O(log n) for both",
+        "O(n) for insert, O(1) for extractMax",
+        "O(1) for insert, O(n) for extractMax"
+      ],
+      correctAnswer: 1,
+      explanation: "Binary heap implementations provide O(log n) time for both insertion and extraction operations."
+    },
+    {
+      question: "Which data structure is MOST commonly used to implement a priority queue?",
+      options: [
+        "Linked List",
+        "Hash Table",
+        "Binary Heap",
+        "Graph"
+      ],
+      correctAnswer: 2,
+      explanation: "Binary heaps are the most common implementation due to their balance of efficiency and simplicity."
+    },
+    {
+      question: "In Dijkstra's algorithm, why is a priority queue used?",
+      options: [
+        "To store visited nodes in FIFO order",
+        "To always process the node with the current shortest path estimate",
+        "To sort all nodes alphabetically",
+        "To implement depth-first search"
+      ],
+      correctAnswer: 1,
+      explanation: "The priority queue ensures the node with the smallest current distance estimate is processed next, which is crucial for Dijkstra's algorithm."
+    }
+  ];
+
+  return <QuizEngine title="Priority Queue Quiz" questions={questions} />;
+};
+
+export default QueueQuiz;
diff --git a/src/app/visualizer/queue/types/quiz/QueueTypesQuizClient.jsx b/src/app/visualizer/queue/types/quiz/QueueTypesQuizClient.jsx
new file mode 100644
index 000000000..18d1dcb19
--- /dev/null
+++ b/src/app/visualizer/queue/types/quiz/QueueTypesQuizClient.jsx
@@ -0,0 +1,112 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowLeft, Play } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function QueueTypesQuizClient() {
+  const quizzes = [
+    {
+      title: "Single Ended Queue Quiz",
+      description:
+        "Practice the basic FIFO queue with insertion at the rear and deletion from the front.",
+      href: "/visualizer/queue/types/quiz/single-ended",
+      filename: "single_ended_queue_quiz.js",
+    },
+    {
+      title: "Double Ended Queue Quiz",
+      description:
+        "Practice insertion and deletion from both ends using a deque.",
+      href: "/visualizer/queue/types/quiz/double-ended",
+      filename: "deque_quiz.js",
+    },
+    {
+      title: "Circular Queue Quiz",
+      description:
+        "Practice circular queue concepts including wrap-around indexing and efficient memory utilization.",
+      href: "/visualizer/queue/types/quiz/circular",
+      filename: "circular_queue_quiz.js",
+    },
+    {
+      title: "Priority Queue Quiz",
+      description:
+        "Practice priority-based queue operations and heap-based implementations.",
+      href: "/visualizer/queue/types/quiz/priority",
+      filename: "priority_queue_quiz.js",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-[var(--udemy-text)] dark:text-white transition-colors duration-300 pb-20">
+
+      {/* Header */}
+      <section className="relative pt-6 pb-4">
+        <div className="max-w-[1100px] mx-auto px-4">
+          <Link href="/visualizer/quiz">
+            <button className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] hover:opacity-80 mb-3">
+              <ArrowLeft size={16} />
+              <span>Back to all quizzes</span>
+            </button>
+          </Link>
+
+          <h1 className="text-2xl md:text-3xl font-black mb-2">
+            Queue Types Quiz Portal
+          </h1>
+
+          <p className="text-sm text-surface-600 dark:text-surface-400">
+            Choose a Queue Types quiz to strengthen your understanding of different queue implementations.
+          </p>
+        </div>
+      </section>
+
+      {/* Quiz Cards */}
+      <div className="max-w-5xl mx-auto px-4 mt-8">
+        <div className="grid md:grid-cols-2 gap-6">
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{
+                duration: 0.4,
+                delay: index * 0.1,
+                ease: [0.22, 1, 0.36, 1],
+              }}
+              whileHover={{ y: -6, scale: 1.015 }}
+              whileTap={{ scale: 0.985 }}
+              className="group flex flex-col rounded-2xl border border-indigo-500/20 dark:border-indigo-500/30 bg-white dark:bg-[#1a1a1a] overflow-hidden shadow-sm hover:shadow-xl transition-all"
+            >
+              {/* Top Bar */}
+              <div className="flex items-center justify-between px-4 py-2.5 bg-indigo-500/10 dark:bg-indigo-500/20 border-b border-indigo-500/20 dark:border-indigo-500/30">
+                <div className="flex items-center gap-1.5 font-mono text-[11px]">
+                  <span className="text-violet-500">$</span>
+                  <span>node {quiz.filename}</span>
+                </div>
+              </div>
+
+              {/* Card */}
+              <div className="p-6 flex flex-col flex-1">
+                <div>
+                  <h2 className="text-xl font-extrabold mb-2 group-hover:text-indigo-600 dark:group-hover:text-indigo-400">
+                    {quiz.title}
+                  </h2>
+
+                  <p className="text-sm text-surface-600 dark:text-surface-300 mb-6">
+                    {quiz.description}
+                  </p>
+                </div>
+
+                <Link href={quiz.href} className="mt-auto">
+                  <button className="w-full h-11 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-bold flex items-center justify-center gap-2">
+                    <span>Start Quiz</span>
+                    <Play size={14} className="fill-current" />
+                  </button>
+                </Link>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/queue/types/quiz/circular/page.jsx b/src/app/visualizer/queue/types/quiz/circular/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/queue/types/quiz/circular/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/queue/types/quiz/circular/quiz.jsx b/src/app/visualizer/queue/types/quiz/circular/quiz.jsx
new file mode 100644
index 000000000..21ba4e6ea
--- /dev/null
+++ b/src/app/visualizer/queue/types/quiz/circular/quiz.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QueueQuiz = () => {
+  const questions = [
+    {
+      question: "What is the primary advantage of a circular queue over a linear queue?",
+      options: [
+        "Unlimited capacity",
+        "Better memory utilization by reusing empty spaces",
+        "Faster sorting capability",
+        "Built-in search functionality"
+      ],
+      correctAnswer: 1,
+      explanation: "Circular queues efficiently reuse empty spaces created by dequeue operations, preventing memory wastage."
+    },
+    {
+      question: "How is the rear pointer calculated after an enqueue operation in a circular queue?",
+      options: [
+        "rear = rear + 1",
+        "rear = (rear + 1) % capacity",
+        "rear = front + 1",
+        "rear = capacity - 1"
+      ],
+      correctAnswer: 1,
+      explanation: "The rear pointer wraps around using modulo arithmetic: rear = (rear + 1) % capacity."
+    },
+    {
+      question: "What condition indicates that a circular queue is full?",
+      options: [
+        "front == rear",
+        "(rear + 1) % capacity == front",
+        "front == 0 && rear == capacity - 1",
+        "rear == capacity - 1"
+      ],
+      correctAnswer: 1,
+      explanation: "The queue is full when the next position after rear (wrapped around) equals front."
+    },
+    {
+      question: "Why do circular queues typically maintain one empty slot?",
+      options: [
+        "To reduce memory usage",
+        "To distinguish between full and empty states",
+        "For temporary storage during operations",
+        "It's required by the implementation language"
+      ],
+      correctAnswer: 1,
+      explanation: "Without one empty slot, the conditions for full and empty states would be identical (front == rear)."
+    },
+    {
+      question: "What is the time complexity of peekFront() in a circular queue?",
+      options: [
+        "O(1)",
+        "O(n)",
+        "O(log n)",
+        "O(n²)"
+      ],
+      correctAnswer: 0,
+      explanation: "All basic operations (enqueue, dequeue, peek) are O(1) in a circular queue."
+    },
+    {
+  question: "Which real-world application commonly uses a circular queue?",
+  options: [
+    "Browser history",
+    "CPU Round Robin Scheduling",
+    "Binary Search",
+    "Depth First Search"
+  ],
+  correctAnswer: 1,
+  explanation: "Circular queues are widely used in Round Robin CPU Scheduling to efficiently rotate processes."
+},
+{
+  question: "What happens when an enqueue operation is attempted on a full circular queue?",
+  options: [
+    "The oldest element is automatically removed",
+    "The queue overflows",
+    "The queue doubles its size",
+    "The rear pointer resets to zero"
+  ],
+  correctAnswer: 1,
+  explanation: "Attempting to enqueue into a full circular queue results in an overflow condition."
+},
+{
+  question: "Which operation removes an element from a circular queue?",
+  options: [
+    "Insert",
+    "Push",
+    "Dequeue",
+    "Peek"
+  ],
+  correctAnswer: 2,
+  explanation: "The dequeue operation removes the front element from the circular queue."
+},
+{
+  question: "After removing the last element from a circular queue, what is commonly done with the front and rear pointers?",
+  options: [
+    "Set both to -1",
+    "Set both to capacity",
+    "Set front to 0 and rear to capacity - 1",
+    "Keep them unchanged"
+  ],
+  correctAnswer: 0,
+  explanation: "In many implementations, both front and rear are reset to -1 when the queue becomes empty."
+},
+{
+  question: "Which data structure property makes a circular queue more efficient than a linear queue?",
+  options: [
+    "Elements are automatically sorted",
+    "Memory locations are reused after dequeue operations",
+    "Elements can only be inserted at the front",
+    "It supports recursive traversal"
+  ],
+  correctAnswer: 1,
+  explanation: "A circular queue reuses freed memory locations, avoiding the wasted space problem of a linear queue."
+},
+  ];
+
+  return <QuizEngine title="Circular Queue Quiz" questions={questions} />;
+};
+
+export default QueueQuiz;
diff --git a/src/app/visualizer/queue/types/quiz/double-ended/page.jsx b/src/app/visualizer/queue/types/quiz/double-ended/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/queue/types/quiz/double-ended/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/queue/types/quiz/double-ended/quiz.jsx b/src/app/visualizer/queue/types/quiz/double-ended/quiz.jsx
new file mode 100644
index 000000000..55fddedbd
--- /dev/null
+++ b/src/app/visualizer/queue/types/quiz/double-ended/quiz.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QueueQuiz = () => {
+  const questions = [
+    {
+      question: "What is the key characteristic that distinguishes a deque from a single-ended queue?",
+      options: [
+        "Allows operations at only one end",
+        "Allows operations at both ends", 
+        "Only allows insertion at one end and removal at the other",
+        "Uses LIFO principle exclusively"
+      ],
+      correctAnswer: 1,
+      explanation: "Deques allow insertion and removal at both front and rear ends, unlike single-ended queues which are restricted to rear insertion and front removal."
+    },
+    {
+      question: "Which of the following is NOT a standard deque operation?",
+      options: [
+        "addFront()",
+        "addRear()", 
+        "removeMiddle()",
+        "removeRear()"
+      ],
+      correctAnswer: 2,
+      explanation: "Deques don't typically support direct middle removal - their core operations work at the two ends only."
+    },
+    {
+      question: "What would be the result of these operations on an empty deque? addFront(10), addRear(20), removeFront()",
+      options: [
+        "10",
+        "20", 
+        "[10, 20]",
+        "Empty deque"
+      ],
+      correctAnswer: 1,
+      explanation: "addFront(10) → [10], addRear(20) → [10, 20], removeFront() removes 10, leaving 20 as the return value."
+    },
+    {
+      question: "Which data structure is most commonly used to implement a deque efficiently?",
+      options: [
+        "Singly Linked List",
+        "Binary Tree", 
+        "Doubly Linked List",
+        "Hash Table"
+      ],
+      correctAnswer: 2,
+      explanation: "Doubly linked lists are ideal for deque implementation as they allow O(1) operations at both ends."
+    },
+    {
+      question: "What is the time complexity for removeRear() in a properly implemented deque?",
+      options: [
+        "O(1)",
+        "O(n)", 
+        "O(log n)",
+        "O(n²)"
+      ],
+      correctAnswer: 0,
+      explanation: "All core deque operations (addFront, addRear, removeFront, removeRear) should be O(1) in a proper implementation."
+    },
+    {
+  question: "Which principle best describes the behavior of a deque?",
+  options: [
+    "Only FIFO",
+    "Only LIFO",
+    "Supports both FIFO and LIFO operations",
+    "Random access only"
+  ],
+  correctAnswer: 2,
+  explanation: "A deque supports insertion and deletion from both ends, allowing it to behave like both a queue and a stack."
+},
+{
+  question: "Which operation inserts an element at the rear of a deque?",
+  options: [
+    "addFront()",
+    "removeRear()",
+    "addRear()",
+    "peekFront()"
+  ],
+  correctAnswer: 2,
+  explanation: "The addRear() operation inserts an element at the rear end of the deque."
+},
+{
+  question: "Which application commonly uses a deque?",
+  options: [
+    "Palindrome checking",
+    "Binary Search",
+    "Selection Sort",
+    "Heap Construction"
+  ],
+  correctAnswer: 0,
+  explanation: "Deque is commonly used for palindrome checking because characters can be compared from both ends efficiently."
+},
+{
+  question: "What is returned by peekRear() in a deque?",
+  options: [
+    "The front element",
+    "The last element without removing it",
+    "The middle element",
+    "The first inserted element"
+  ],
+  correctAnswer: 1,
+  explanation: "peekRear() returns the element at the rear without removing it from the deque."
+},
+{
+  question: "Which statement about a deque is correct?",
+  options: [
+    "Elements can only be inserted at the rear.",
+    "Elements can only be removed from the front.",
+    "Insertion and deletion are allowed at both ends.",
+    "A deque cannot be implemented using an array."
+  ],
+  correctAnswer: 2,
+  explanation: "The defining feature of a deque is that insertion and deletion can be performed at both the front and rear ends."
+},
+  ];
+
+  return <QuizEngine title="Deque Quiz" questions={questions} />;
+};
+
+export default QueueQuiz;
diff --git a/src/app/visualizer/queue/types/quiz/page.js b/src/app/visualizer/queue/types/quiz/page.js
new file mode 100644
index 000000000..a0ca7ca22
--- /dev/null
+++ b/src/app/visualizer/queue/types/quiz/page.js
@@ -0,0 +1,5 @@
+import QueueTypesQuizClient from "./QueueTypesQuizClient";
+
+export default function Page() {
+  return <QueueTypesQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/queue/types/quiz/priority/page.jsx b/src/app/visualizer/queue/types/quiz/priority/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/queue/types/quiz/priority/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/queue/types/quiz/priority/quiz.jsx b/src/app/visualizer/queue/types/quiz/priority/quiz.jsx
new file mode 100644
index 000000000..77c379f79
--- /dev/null
+++ b/src/app/visualizer/queue/types/quiz/priority/quiz.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QueueQuiz = () => {
+  const questions = [
+    {
+      question: "What is the fundamental difference between a priority queue and a standard queue?",
+      options: [
+        "Priority queues use LIFO ordering",
+        "Elements are processed based on priority rather than insertion order",
+        "Priority queues can only store numeric values",
+        "Standard queues are always faster"
+      ],
+      correctAnswer: 1,
+      explanation: "Priority queues process elements by their priority value rather than following strict FIFO order like standard queues."
+    },
+    {
+      question: "Which operation in a max-priority queue returns the highest priority element without removing it?",
+      options: [
+        "extractMax()",
+        "insert()",
+        "peek()",
+        "remove()"
+      ],
+      correctAnswer: 2,
+      explanation: "peek() allows viewing the highest priority element while leaving it in the queue."
+    },
+    {
+      question: "What is the time complexity of insert() and extractMax() operations in a binary heap implementation?",
+      options: [
+        "O(1) for both",
+        "O(log n) for both",
+        "O(n) for insert, O(1) for extractMax",
+        "O(1) for insert, O(n) for extractMax"
+      ],
+      correctAnswer: 1,
+      explanation: "Binary heap implementations provide O(log n) time for both insertion and extraction operations."
+    },
+    {
+      question: "Which data structure is MOST commonly used to implement a priority queue?",
+      options: [
+        "Linked List",
+        "Hash Table",
+        "Binary Heap",
+        "Graph"
+      ],
+      correctAnswer: 2,
+      explanation: "Binary heaps are the most common implementation due to their balance of efficiency and simplicity."
+    },
+    {
+      question: "In Dijkstra's algorithm, why is a priority queue used?",
+      options: [
+        "To store visited nodes in FIFO order",
+        "To always process the node with the current shortest path estimate",
+        "To sort all nodes alphabetically",
+        "To implement depth-first search"
+      ],
+      correctAnswer: 1,
+      explanation: "The priority queue ensures the node with the smallest current distance estimate is processed next, which is crucial for Dijkstra's algorithm."
+    },
+    {
+  question: "In a min-priority queue, which element is removed first?",
+  options: [
+    "The element inserted first",
+    "The element with the highest priority value",
+    "The element with the lowest priority value",
+    "The last inserted element"
+  ],
+  correctAnswer: 2,
+  explanation: "A min-priority queue always removes the element with the lowest priority value first."
+},
+{
+  question: "Which real-world application commonly uses a priority queue?",
+  options: [
+    "Browser history",
+    "Printer job scheduling",
+    "Undo operation",
+    "Stack implementation"
+  ],
+  correctAnswer: 1,
+  explanation: "Printer job scheduling uses priority queues to process high-priority print jobs before lower-priority ones."
+},
+{
+  question: "What happens when two elements have the same priority in a priority queue?",
+  options: [
+    "One of them is discarded",
+    "The queue becomes invalid",
+    "They are usually processed in insertion order (implementation dependent)",
+    "Both are removed together"
+  ],
+  correctAnswer: 2,
+  explanation: "When priorities are equal, many implementations process elements in the order they were inserted, though this depends on the implementation."
+},
+{
+  question: "Which operation adds a new element to a priority queue?",
+  options: [
+    "enqueue()",
+    "insert()",
+    "extractMax()",
+    "peek()"
+  ],
+  correctAnswer: 1,
+  explanation: "The insert() operation adds a new element while maintaining the priority queue property."
+},
+{
+  question: "Which statement best describes a priority queue?",
+  options: [
+    "Elements are always removed in FIFO order.",
+    "Elements are always removed in LIFO order.",
+    "Elements are removed according to their priority.",
+    "Elements are stored in sorted order at all times."
+  ],
+  correctAnswer: 2,
+  explanation: "A priority queue removes elements based on their assigned priority rather than their insertion order."
+},
+  ];
+
+  return <QuizEngine title="Priority Queue Quiz" questions={questions} />;
+};
+
+export default QueueQuiz;
diff --git a/src/app/visualizer/queue/types/quiz/single-ended/page.jsx b/src/app/visualizer/queue/types/quiz/single-ended/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/queue/types/quiz/single-ended/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/queue/types/quiz/single-ended/quiz.jsx b/src/app/visualizer/queue/types/quiz/single-ended/quiz.jsx
new file mode 100644
index 000000000..e2fe4b920
--- /dev/null
+++ b/src/app/visualizer/queue/types/quiz/single-ended/quiz.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QueueQuiz = () => {
+  const questions = [
+    {
+      question: "What principle does a single-ended queue follow?",
+      options: [
+        "LIFO (Last-In-First-Out)",
+        "FIFO (First-In-First-Out)", 
+        "Priority-Based",
+        "Random Access"
+      ],
+      correctAnswer: 1,
+      explanation: "Single-ended queues strictly follow the First-In-First-Out (FIFO) principle."
+    },
+    {
+      question: "Where are elements added in a single-ended queue?",
+      options: [
+        "At the front",
+        "At the rear", 
+        "At any position",
+        "In the middle"
+      ],
+      correctAnswer: 1,
+      explanation: "Elements are always added (enqueued) at the rear of the queue."
+    },
+    {
+      question: "What operation removes an element from a single-ended queue?",
+      options: [
+        "enqueue()",
+        "dequeue()", 
+        "peek()",
+        "isEmpty()"
+      ],
+      correctAnswer: 1,
+      explanation: "dequeue() removes and returns the element from the front of the queue."
+    },
+    {
+      question: "What would the queue [10, 20, 30] look like after dequeue()?",
+      options: [
+        "[10, 20]",
+        "[20, 30]", 
+        "[10, 20, 30]",
+        "[30, 20]"
+      ],
+      correctAnswer: 1,
+      explanation: "dequeue() removes the front element (10), leaving [20, 30]."
+    },
+    {
+      question: "What is the time complexity of enqueue() and dequeue() operations?",
+      options: [
+        "O(1) for both",
+        "O(n) for both", 
+        "O(1) for enqueue, O(n) for dequeue",
+        "O(n) for enqueue, O(1) for dequeue"
+      ],
+      correctAnswer: 0,
+      explanation: "Both operations are O(1) in a properly implemented queue."
+    },
+    {
+  question: "Which operation returns the front element without removing it from a single-ended queue?",
+  options: [
+    "enqueue()",
+    "peek()",
+    "dequeue()",
+    "clear()"
+  ],
+  correctAnswer: 1,
+  explanation: "The peek() operation returns the front element without removing it from the queue."
+},
+{
+  question: "What happens when dequeue() is called on an empty single-ended queue?",
+  options: [
+    "A new element is created",
+    "The queue is reset",
+    "An underflow condition occurs",
+    "The rear pointer moves forward"
+  ],
+  correctAnswer: 2,
+  explanation: "Removing an element from an empty queue results in an underflow condition."
+},
+{
+  question: "Which real-world scenario best represents a single-ended queue?",
+  options: [
+    "Undo operation in a text editor",
+    "People waiting in a ticket counter line",
+    "Browser back button",
+    "Recursive function calls"
+  ],
+  correctAnswer: 1,
+  explanation: "A ticket queue follows FIFO, where the first person in line is served first."
+},
+{
+  question: "Which of the following operations inserts an element into a single-ended queue?",
+  options: [
+    "Push",
+    "InsertFront",
+    "Enqueue",
+    "Pop"
+  ],
+  correctAnswer: 2,
+  explanation: "The enqueue operation inserts an element at the rear of the queue."
+},
+{
+  question: "Which statement about a single-ended queue is correct?",
+  options: [
+    "Insertion and deletion both occur at the front.",
+    "Insertion occurs at the rear and deletion occurs at the front.",
+    "Insertion and deletion both occur at the rear.",
+    "Elements can be inserted or removed from any position."
+  ],
+  correctAnswer: 1,
+  explanation: "In a single-ended queue, elements are inserted at the rear and removed from the front, maintaining FIFO order."
+},
+  ];
+
+  return <QuizEngine title="Single-Ended Queue Quiz" questions={questions} />;
+};
+
+export default QueueQuiz;
diff --git a/src/app/visualizer/queue/types/singleEnded/AlgorithmClient.jsx b/src/app/visualizer/queue/types/singleEnded/AlgorithmClient.jsx
new file mode 100644
index 000000000..228ca9b6c
--- /dev/null
+++ b/src/app/visualizer/queue/types/singleEnded/AlgorithmClient.jsx
@@ -0,0 +1,34 @@
+import Animation from "@/app/visualizer/queue/types/singleEnded/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/queue/types/singleEnded/content";
+import Code from "@/app/visualizer/queue/types/singleEnded/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Queue", "Single Ended")}
+      title="Single Ended"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore Other Types"
+          links={[
+            { text: "Double Ended Queue", url: "./deque" },
+            { text: "Circular Queue", url: "./circular" },
+            { text: "Multiple Queue", url: "./multiple" },
+            { text: "Priority Queue", url: "./priority" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/queue/types/singleEnded/animation.jsx b/src/app/visualizer/queue/types/singleEnded/animation.jsx
new file mode 100644
index 000000000..b54c926a4
--- /dev/null
+++ b/src/app/visualizer/queue/types/singleEnded/animation.jsx
@@ -0,0 +1,281 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import {
+  enqueueRearGenerator,
+  dequeueFrontGenerator,
+  peekFrontGenerator,
+  peekRearGenerator
+} from "@/features/algorithms/queue/queueSingleEndedLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+const SingleEndedQueueVisualizer = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [queue, setQueue] = useState([]);
+  const [pendingOp, setPendingOp] = useState(null);
+
+  const frames = useMemo(() => {
+    if (!pendingOp) return [];
+    switch (pendingOp.type) {
+      case 'enqueue': return Array.from(enqueueRearGenerator(queue, pendingOp.value));
+      case 'dequeue': return Array.from(dequeueFrontGenerator(queue));
+      case 'peekFront': return Array.from(peekFrontGenerator(queue));
+      case 'peekRear': return Array.from(peekRearGenerator(queue));
+      default: return [];
+    }
+  }, [queue, pendingOp]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 800 });
+
+  const enqueue = () => {
+    if (!inputValue || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'enqueue', value: inputValue });
+    engine.reset();
+    engine.play();
+  };
+
+  const dequeue = () => {
+    if (queue.length === 0 || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'dequeue' });
+    engine.reset();
+    engine.play();
+  };
+
+  const peekFront = () => {
+    if (queue.length === 0 || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'peekFront' });
+    engine.reset();
+    engine.play();
+  };
+
+  const peekRear = () => {
+    if (queue.length === 0 || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: 'peekRear' });
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setInputValue("");
+    setQueue([]);
+    setPendingOp(null);
+    engine.reset();
+  };
+
+  useVisualizerReset(handleReset);
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.phase === 'complete') {
+         setQueue(finalFrame.queue);
+      }
+      setPendingOp(null);
+      engine.reset();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  // Auto-commit on completion
+  React.useEffect(() => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0 && !engine.isPlaying) {
+        const finalFrame = frames[frames.length - 1];
+        if (finalFrame && finalFrame.phase === 'complete') {
+            setQueue(finalFrame.queue);
+            setPendingOp(null);
+            if (pendingOp?.type === 'enqueue') setInputValue("");
+            engine.reset();
+        }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine, pendingOp]);
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        phase: 'idle',
+        queue: queue,
+        explanation: "Enter a value to enqueue, or remove from the front. You can also peek at the front or rear elements."
+      };
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize a standard Single-Ended Queue where insertions occur at the rear and deletions at the front.
+      </p>
+
+      <VisualizerCard>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              className="flex-1 rounded-lg border bg-white p-3 dark:bg-gray-700"
+              placeholder="Enter value"
+              disabled={engine.isPlaying || pendingOp !== null}
+            />
+            <button
+              onClick={enqueue}
+              disabled={engine.isPlaying || !inputValue || pendingOp !== null}
+              className="rounded-lg bg-primary px-6 py-3 text-white transition hover:bg-primary-dark disabled:bg-gray-400"
+            >
+              Enqueue
+            </button>
+            <button
+              onClick={dequeue}
+              disabled={engine.isPlaying || queue.length === 0 || pendingOp !== null}
+              className="rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 disabled:opacity-50 dark:border-white dark:text-white dark:hover:bg-gray-700"
+            >
+              Dequeue
+            </button>
+          </div>
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <button
+              onClick={peekFront}
+              disabled={engine.isPlaying || queue.length === 0 || pendingOp !== null}
+              className="w-full rounded-lg bg-[#3b82f6]/10 px-4 py-3 text-[#3b82f6] transition hover:bg-[#3b82f6]/20 border border-[#3b82f6]/30 disabled:opacity-50 sm:w-1/3"
+            >
+              Peek Front
+            </button>
+            <button
+              onClick={peekRear}
+              disabled={engine.isPlaying || queue.length === 0 || pendingOp !== null}
+              className="w-full rounded-lg bg-[#10b981]/10 px-4 py-3 text-[#10b981] transition hover:bg-[#10b981]/20 border border-[#10b981]/30 disabled:opacity-50 sm:w-1/3"
+            >
+              Peek Rear
+            </button>
+            <button
+              onClick={handleReset}
+              disabled={engine.isPlaying && pendingOp === null}
+              className="w-full rounded-lg border border-black px-4 py-3 text-black transition hover:bg-gray-100 dark:border-white dark:text-white dark:hover:bg-gray-700 sm:w-1/3"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center min-h-[60px] flex items-center justify-center">
+         <p className="text-gray-800 dark:text-gray-200 font-medium">
+             {currentFrame.explanation}
+         </p>
+      </div>
+
+      <VisualizerCard>
+        <div className="mb-6 flex justify-between px-4 text-sm font-semibold text-gray-500 dark:text-gray-400 sm:px-8">
+          <div>Front</div>
+          <div>Rear</div>
+        </div>
+        
+        <div className="relative flex min-h-[160px] w-full flex-col items-center justify-center overflow-x-auto rounded-xl border border-gray-200 bg-gray-50 dark:border-[#222] dark:bg-[#181818] p-6">
+            
+            {currentFrame.action === 'enqueue' && currentFrame.newValue && currentFrame.phase === 'start' && (
+                <div className="absolute right-10 top-0 mb-4 animate-bounce flex flex-col items-center">
+                    <span className="text-xs font-bold text-blue-500 mb-1">New Node</span>
+                    <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-blue-500 text-xl font-bold text-white shadow-lg">
+                        {currentFrame.newValue}
+                    </div>
+                </div>
+            )}
+            
+            {currentFrame.action === 'dequeue' && currentFrame.dequeuedNode && currentFrame.phase === 'start' && (
+                <div className="absolute left-10 top-0 mb-4 flex flex-col items-center opacity-50 scale-110 translate-y-[-20px] transition-all duration-500">
+                    <span className="text-xs font-bold text-rose-500 mb-1">Dequeued</span>
+                    <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-rose-500 text-xl font-bold text-white shadow-lg">
+                        {currentFrame.dequeuedNode.value}
+                    </div>
+                </div>
+            )}
+
+            {currentFrame.queue.length === 0 ? (
+                <div className="py-8 text-center text-gray-500 font-medium">
+                []
+                </div>
+            ) : (
+                <div className="flex items-center gap-4 relative">
+                {currentFrame.queue.map((node, index) => {
+                    const isNew = currentFrame.action === 'enqueue' && currentFrame.phase === 'complete' && index === currentFrame.queue.length - 1;
+                    const isPeekedFront = currentFrame.action === 'peek_front' && currentFrame.phase === 'start' && index === 0;
+                    const isPeekedRear = currentFrame.action === 'peek_rear' && currentFrame.phase === 'start' && index === currentFrame.queue.length - 1;
+                    
+                    let bgClass = "bg-primary";
+                    let scaleClass = "scale-100";
+                    let borderClass = "";
+
+                    if (isNew) {
+                        bgClass = "bg-blue-500";
+                        scaleClass = "scale-110 shadow-lg z-10";
+                    } else if (isPeekedFront) {
+                        bgClass = "bg-amber-500";
+                        scaleClass = "scale-110 shadow-lg z-10";
+                        borderClass = "ring-4 ring-amber-300 dark:ring-amber-700";
+                    } else if (isPeekedRear) {
+                        bgClass = "bg-emerald-500";
+                        scaleClass = "scale-110 shadow-lg z-10";
+                        borderClass = "ring-4 ring-emerald-300 dark:ring-emerald-700";
+                    }
+                    
+                    return (
+                    <div key={node.id} className="relative">
+                        {isPeekedFront && (
+                            <div className="absolute -top-10 left-1/2 -translate-x-1/2 text-xs font-bold text-amber-500 whitespace-nowrap bg-amber-50 dark:bg-amber-900/30 px-2 py-1 rounded-full border border-amber-200 dark:border-amber-800">
+                                Peeked: {node.value}
+                            </div>
+                        )}
+                        {isPeekedRear && (
+                            <div className="absolute -top-10 left-1/2 -translate-x-1/2 text-xs font-bold text-emerald-500 whitespace-nowrap bg-emerald-50 dark:bg-emerald-900/30 px-2 py-1 rounded-full border border-emerald-200 dark:border-emerald-800">
+                                Peeked: {node.value}
+                            </div>
+                        )}
+                        <div
+                            className={`flex h-16 w-16 items-center justify-center rounded-lg text-xl font-bold text-white shadow-md transition-all duration-500 ${bgClass} ${scaleClass} ${borderClass}`}
+                        >
+                            {node.value}
+                        </div>
+                    </div>
+                    );
+                })}
+                </div>
+            )}
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default SingleEndedQueueVisualizer;
\ No newline at end of file
diff --git a/src/app/visualizer/queue/types/singleEnded/codeBlock.jsx b/src/app/visualizer/queue/types/singleEnded/codeBlock.jsx
new file mode 100644
index 000000000..a3c429b3a
--- /dev/null
+++ b/src/app/visualizer/queue/types/singleEnded/codeBlock.jsx
@@ -0,0 +1,159 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for Single Ended Queue ─────────────────────
+const codeExamples = {
+  javascript: `// Single Ended Queue
+class Queue{
+    constructor(size=10){
+        this.items=new Array(size);
+        this.front=0;
+        this.rear=-1;
+        this.size=0;
+        this.capacity=size;
+    }
+    enqueue(item){
+        if(this.isFull()){
+            return;
+        }
+        this.rear=(this.rear+1)%this.capacity;
+        this.items[this.rear]=item;
+        this.size++;
+    }
+    dequeue(){
+        if(this.isEmpty()){
+            return undefined;
+        }
+        const item=this.items[this.front];
+        this.front=(this.front+1)%this.capacity;
+        this.size--;
+        return item;
+    }
+    peek(){
+        return this.isEmpty()
+        ?undefined
+        :this.items[this.front];
+    }
+    isEmpty(){
+        return this.size===0;
+    }
+    isFull(){
+        return this.size===this.capacity;
+    }
+}`,
+
+  python: `# Single Ended Queue
+class Queue:
+    def __init__(self,size=10):
+        self.items=[None]*size
+        self.front=0
+        self.rear=-1
+        self.size=0
+        self.capacity=size
+
+    def enqueue(self,item):
+        if self.is_full():
+            return
+        self.rear=(self.rear+1)%self.capacity
+        self.items[self.rear]=item
+        self.size+=1
+
+    def dequeue(self):
+        if self.is_empty():
+            return None
+        item=self.items[self.front]
+        self.front=(self.front+1)%self.capacity
+        self.size-=1
+        return item`,
+
+  java: `// Single Ended Queue
+public class Queue{
+    private int[] items;
+    private int front;
+    private int rear;
+    private int size;
+    private int capacity;
+    public Queue(int size){
+        items=new int[size];
+        front=0;
+        rear=-1;
+        this.size=0;
+        capacity=size;
+    }
+    public void enqueue(int item){
+        if(isFull()){
+            return;
+        }
+        rear=(rear+1)%capacity;
+        items[rear]=item;
+        size++;
+    }
+}`,
+
+  c: `// Single Ended Queue
+#include<stdio.h>
+typedef struct{
+    int* items;
+    int front;
+    int rear;
+    int size;
+    int capacity;
+}Queue;
+void enqueue(Queue* q,int item){
+    if(q->size==q->capacity){
+        return;
+    }
+    q->rear=(q->rear+1)%q->capacity;
+    q->items[q->rear]=item;
+    q->size++;
+}`,
+
+  cpp: `// Single Ended Queue
+#include<iostream>
+using namespace std;
+class Queue{
+private:
+    int* items;
+    int front;
+    int rear;
+    int size;
+    int capacity;
+public:
+    Queue(int s){
+        items=new int[s];
+        front=0;
+        rear=-1;
+        size=0;
+        capacity=s;
+    }
+    void enqueue(int item){
+        if(size==capacity){
+            return;
+        }
+        rear=(rear+1)%capacity;
+        items[rear]=item;
+        size++;
+    }
+};`
+};
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'singleQueue.js',
+    python:'single_queue.py',
+    java:'Queue.java',
+    c:'single_queue.c',
+    cpp:'single_queue.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/queue/types/singleEnded/content.jsx b/src/app/visualizer/queue/types/singleEnded/content.jsx
new file mode 100644
index 000000000..8d7e6a81f
--- /dev/null
+++ b/src/app/visualizer/queue/types/singleEnded/content.jsx
@@ -0,0 +1,293 @@
+"use client";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraphs = [
+    `A single-ended queue (often just called a queue) is a linear data structure that follows the FIFO (First-In-First-Out) principle. Elements are added (enqueued) at the rear and removed (dequeued) from the front, maintaining strict ordering.`,
+    `The single-ended queue is a fundamental data structure in computer science, providing predictable ordering that's essential for many algorithms and system design patterns where processing order matters.`,
+  ];
+
+  const characteristics = [
+    {
+      points: "Two ends:",
+      subpoints: ["Front (for removal) and rear (for insertion)"],
+    },
+    {
+      points: "Basic Operations:",
+      subpoints: [
+        "enqueue() - Add to rear",
+        "dequeue() - Remove from front",
+        "peek() - View front element",
+        "isEmpty() - Check if empty",
+      ],
+    },
+    {
+      points: "Fixed Order:",
+      subpoints: ["Elements are processed in exact arrival sequence"],
+    },
+  ];
+
+  const example = [
+    { points: "enqueue(10): [10]" },
+    { points: "enqueue(20): [10, 20]" },
+    { points: "enqueue(30): [10, 20, 30]" },
+    { points: "dequeue(): Returns 10 → [20, 30]" },
+    { points: "peek(): Returns 20 → [20, 30] (unchanged)" },
+  ];
+
+  const implementation = [
+    {
+      points: "Array-Based:",
+      subpoints: [
+        "Fixed or dynamic array",
+        "Need to handle wrap-around for circular queues",
+      ],
+    },
+    {
+      points: "Linked List:",
+      subpoints: [
+        "Head pointer as front",
+        "Tail pointer as rear",
+        "Efficient O(1) operations",
+      ],
+    },
+  ];
+
+  const complexity = [
+    { points: "enqueue(): O(1)" },
+    { points: "dequeue(): O(1)" },
+    { points: "peek(): O(1)" },
+    { points: "isEmpty(): O(1)" },
+  ];
+
+  const application = [
+    { points: "CPU task scheduling" },
+    { points: "Print job management" },
+    { points: "Breadth-First Search (BFS) algorithms" },
+    { points: "Buffering data streams" },
+    { points: "Handling requests in web servers" },
+  ];
+
+  const differences = [
+    {
+      points: "Single-ended only allows insertion at rear and removal at front",
+    },
+    { points: "Double-ended (deque) allows insertion/removal at both ends" },
+    { points: "Single-ended has stricter FIFO enforcement" },
+    { points: "Single-ended is simpler to implement" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is a Single-Ended Queue? */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is a Single-Ended Queue?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* Key Characteristics */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Key Characteristics
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Single-ended queues have these fundamental properties:
+            </p>
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {characteristics.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                  {item.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.subpoints.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Visual Example */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Visual Example
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Operation sequence on an initially empty queue:
+            </p>
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {example.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Implementation Variations */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Implementation Variations
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Common implementation approaches:
+            </p>
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {implementation.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-semibold">{item.points}</span>
+                  {item.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.subpoints.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {complexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                    {item.points.split(":")[0]}:
+                  </span>
+                  <span className="ml-2">{item.points.split(":")[1]}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Applications */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Applications
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Single-ended queues are used in:
+            </p>
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {application.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Comparison with Double-Ended Queue */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Comparison with Double-Ended Queue
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Key differences:
+            </p>
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {differences.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraphs[1]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/queue/types/singleEnded/quiz.jsx b/src/app/visualizer/queue/types/singleEnded/quiz.jsx
new file mode 100644
index 000000000..7da68bc43
--- /dev/null
+++ b/src/app/visualizer/queue/types/singleEnded/quiz.jsx
@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const QueueQuiz = () => {
+  const questions = [
+    {
+      question: "What principle does a single-ended queue follow?",
+      options: [
+        "LIFO (Last-In-First-Out)",
+        "FIFO (First-In-First-Out)", 
+        "Priority-Based",
+        "Random Access"
+      ],
+      correctAnswer: 1,
+      explanation: "Single-ended queues strictly follow the First-In-First-Out (FIFO) principle."
+    },
+    {
+      question: "Where are elements added in a single-ended queue?",
+      options: [
+        "At the front",
+        "At the rear", 
+        "At any position",
+        "In the middle"
+      ],
+      correctAnswer: 1,
+      explanation: "Elements are always added (enqueued) at the rear of the queue."
+    },
+    {
+      question: "What operation removes an element from a single-ended queue?",
+      options: [
+        "enqueue()",
+        "dequeue()", 
+        "peek()",
+        "isEmpty()"
+      ],
+      correctAnswer: 1,
+      explanation: "dequeue() removes and returns the element from the front of the queue."
+    },
+    {
+      question: "What would the queue [10, 20, 30] look like after dequeue()?",
+      options: [
+        "[10, 20]",
+        "[20, 30]", 
+        "[10, 20, 30]",
+        "[30, 20]"
+      ],
+      correctAnswer: 1,
+      explanation: "dequeue() removes the front element (10), leaving [20, 30]."
+    },
+    {
+      question: "What is the time complexity of enqueue() and dequeue() operations?",
+      options: [
+        "O(1) for both",
+        "O(n) for both", 
+        "O(1) for enqueue, O(n) for dequeue",
+        "O(n) for enqueue, O(1) for dequeue"
+      ],
+      correctAnswer: 0,
+      explanation: "Both operations are O(1) in a properly implemented queue."
+    }
+  ];
+
+  return <QuizEngine title="Single-Ended Queue Quiz" questions={questions} />;
+};
+
+export default QueueQuiz;
diff --git a/src/app/visualizer/quiz/page.jsx b/src/app/visualizer/quiz/page.jsx
new file mode 100644
index 000000000..51ef64289
--- /dev/null
+++ b/src/app/visualizer/quiz/page.jsx
@@ -0,0 +1,477 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { Layers, GitBranch, Terminal, HelpCircle, ArrowRight, Search, Network, Brain, TreePine, Hash, Cpu } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function QuizPage() {
+
+  const [searchTerm, setSearchTerm] = useState("");
+  
+  const quizzes = [
+    {
+      title: "Searching Quiz",
+      description: "Practice all searching algorithms including liner search, binary search, ternary search, etc.",
+      href: "/visualizer/array/searching/quiz",
+      icon: Search,
+      filename: "searching_quiz.js",
+      cardBorder: "border-cyan-500/20 dark:border-cyan-500/30",
+      topBarBg: "bg-cyan-500/10 dark:bg-cyan-500/20",
+      iconStyle: "bg-cyan-500/10 border border-cyan-500/20 dark:border-cyan-500/30 text-cyan-600 dark:text-cyan-400",
+      btnBg: "bg-cyan-600 hover:bg-cyan-700 dark:bg-cyan-500 dark:hover:bg-cyan-600",
+    },
+    {
+      title: "Sorting Quiz",
+      description: "Practice all sorting algorithms including Bubble, Selection, Insertion, Merge, Quick, Heap, Radix, and Counting Sort.",
+      href: "/visualizer/array/sorting/quiz",
+      icon: Terminal,
+      filename: "sorting_quiz.js",
+      cardBorder: "border-indigo-500/20 dark:border-indigo-500/30",
+      topBarBg: "bg-indigo-500/10 dark:bg-indigo-500/20",
+      iconStyle: "bg-indigo-500/10 border border-indigo-500/20 dark:border-indigo-500/30 text-indigo-600 dark:text-indigo-400",
+      btnBg: "bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600",
+    },
+    {
+      title: "Array-Interview Patterns Quiz",
+      description: "Practice all Interview Patterns algorithms including Sliding Window, Two Pointers.",
+      href: "/visualizer/array/Interview-Patterns/quiz",
+      icon: Terminal,
+      filename: "Interview-Patterns_quiz.js",
+      cardBorder: "border-indigo-500/20 dark:border-indigo-500/30",
+      topBarBg: "bg-indigo-500/10 dark:bg-indigo-500/20",
+      iconStyle: "bg-indigo-500/10 border border-indigo-500/20 dark:border-indigo-500/30 text-indigo-600 dark:text-indigo-400",
+      btnBg: "bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600",
+    },
+    {
+      title: "String Operations Quiz",
+      description:
+        "Practice Reverse String, Palindrome Check, Character Frequency, Longest Common Prefix, and Anagram Check.",
+      href: "/visualizer/string/quiz",
+      icon: Search,
+      filename: "string_operations_quiz.js",
+      cardBorder: "border-pink-500/20 dark:border-pink-500/30",
+      topBarBg: "bg-pink-500/10 dark:bg-pink-500/20",
+      iconStyle:
+        "bg-pink-500/10 border border-pink-500/20 dark:border-pink-500/30 text-pink-600 dark:text-pink-400",
+      btnBg:
+        "bg-pink-600 hover:bg-pink-700 dark:bg-pink-500 dark:hover:bg-pink-600",
+    },
+    {
+      title: "String Pattern Matching Quiz",
+      description:
+        "Practice String algorithms including Reverse String, Palindrome Check, Character Frequency, Longest Common Prefix, Anagram Check, KMP Algorithm, Rabin-Karp, and Z Algorithm.",
+      href: "/visualizer/string/pattern-matching/quiz",
+      icon: Search,
+      filename: "string_operations_quiz.js",
+      cardBorder: "border-pink-500/20 dark:border-pink-500/30",
+      topBarBg: "bg-pink-500/10 dark:bg-pink-500/20",
+      iconStyle:
+        "bg-pink-500/10 border border-pink-500/20 dark:border-pink-500/30 text-pink-600 dark:text-pink-400",
+      btnBg:
+        "bg-pink-600 hover:bg-pink-700 dark:bg-pink-500 dark:hover:bg-pink-600",
+    },
+    {
+      title: "String Interview Problems",
+      description:
+        "Practice frequently asked string interview problems including Longest Substring Without Repeating Characters, Minimum Window Substring, Longest Repeating Character Replacement, and more.",
+      href: "/visualizer/string/interview-problems",
+      icon: Search,
+      filename: "string_interview_problems.js",
+      cardBorder: "border-pink-500/20 dark:border-pink-500/30",
+      topBarBg: "bg-pink-500/10 dark:bg-pink-500/20",
+      iconStyle:
+        "bg-pink-500/10 border border-pink-500/20 dark:border-pink-500/30 text-pink-600 dark:text-pink-400",
+      btnBg:
+        "bg-pink-600 hover:bg-pink-700 dark:bg-pink-500 dark:hover:bg-pink-600",
+    },
+    {
+      title: "Recursion Quiz",
+      description: "Practice all recursion topics.",
+      href: "/visualizer/recursion/quiz",
+      icon: GitBranch,
+      filename: "recursion_quiz.js",
+      cardBorder: "border-violet-500/20 dark:border-violet-500/30",
+      topBarBg: "bg-violet-500/10 dark:bg-violet-500/20",
+      iconStyle: "bg-violet-500/10 border border-violet-500/20 dark:border-violet-500/30 text-violet-600 dark:text-violet-400",
+      btnBg: "bg-violet-600 hover:bg-violet-700 dark:bg-violet-500 dark:hover:bg-violet-600",
+    },
+    {
+      title: "Stack Operations Quiz",
+      description: "Test your understanding of Push & Pop, Peek, Is Empty, and Is Full operations.",
+      href: "/visualizer/stack/quiz",
+      icon: Layers,
+      filename: "stack_operations_quiz.js",
+      cardBorder: "border-fuchsia-500/20 dark:border-fuchsia-500/30",
+      topBarBg: "bg-fuchsia-500/10 dark:bg-fuchsia-500/20",
+      iconStyle: "bg-fuchsia-500/10 border border-fuchsia-500/20 dark:border-fuchsia-500/30 text-fuchsia-600 dark:text-fuchsia-400",
+      btnBg: "bg-fuchsia-600 hover:bg-fuchsia-700 dark:bg-fuchsia-500 dark:hover:bg-fuchsia-600",
+    },
+    {
+      title: "Polish Notation Evaluation Quiz",
+      description: "Test your understanding of Prefix and Postfix Expression Evaluation.",
+      href: "/visualizer/stack/polish/quiz",
+      icon: HelpCircle,
+      filename: "polish_notation_quiz.js",
+      cardBorder: "border-blue-500/20 dark:border-blue-500/30",
+      topBarBg: "bg-blue-500/10 dark:bg-blue-500/20",
+      iconStyle: "bg-blue-500/10 border border-blue-500/20 dark:border-blue-500/30 text-blue-600 dark:text-blue-400",
+      btnBg: "bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600",
+    },
+    {
+      title: "Implementation Quiz",
+      description: "Practice Stack implementation using Array and Linked List.",
+      href: "/visualizer/stack/implementation/quiz",
+      icon: Layers,
+      filename: "stack_impl_quiz.js",
+      cardBorder: "border-emerald-500/20 dark:border-emerald-500/30",
+      topBarBg: "bg-emerald-500/10 dark:bg-emerald-500/20",
+      iconStyle: "bg-emerald-500/10 border border-emerald-500/20 dark:border-emerald-500/30 text-emerald-600 dark:text-emerald-400",
+      btnBg: "bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600",
+    },
+    {
+      title: "Monotonic Stack Quiz",
+      description: "Practice Largest Rectangle in Histogram.",
+      href: "/visualizer/stack/monotonic/quiz",
+      icon: Layers,
+      filename: "monotonic_stack_quiz.js",
+      cardBorder: "border-teal-500/20 dark:border-teal-500/30",
+      topBarBg: "bg-teal-500/10 dark:bg-teal-500/20",
+      iconStyle: "bg-teal-500/10 border border-teal-500/20 dark:border-teal-500/30 text-teal-600 dark:text-teal-400",
+      btnBg: "bg-teal-600 hover:bg-teal-700 dark:bg-teal-500 dark:hover:bg-teal-600",
+    },
+    {
+      title: "Queue Operations Quiz",
+      description: "Test your understanding of Enqueue & Dequeue, Peek Front, Is Empty, and Is Full operations.",
+      href: "/visualizer/queue/operations/quiz",
+      icon: Layers,
+      filename: "queue_operations_quiz.js",
+      cardBorder: "border-teal-500/20 dark:border-teal-500/30",
+      topBarBg: "bg-fuchsia-500/10 dark:bg-fuchsia-500/20",
+      iconStyle: "bg-fuchsia-500/10 border border-fuchsia-500/20 dark:border-fuchsia-500/30 text-fuchsia-600 dark:text-fuchsia-400",
+      btnBg: "bg-fuchsia-600 hover:bg-fuchsia-700 dark:bg-fuchsia-500 dark:hover:bg-fuchsia-600",
+    },
+    {
+      title: "Queue Types Quiz",
+      description:
+        "Practice Single Ended Queue, Double Ended Queue, Circular Queue, and Priority Queue concepts.",
+      href: "/visualizer/queue/types/quiz",
+      icon: Layers,
+      filename: "queue_types_quiz.js",
+      cardBorder: "border-orange-500/20 dark:border-orange-500/30",
+      topBarBg: "bg-orange-500/10 dark:bg-orange-500/20",
+      iconStyle:
+        "bg-orange-500/10 border border-orange-500/20 dark:border-orange-500/30 text-orange-600 dark:text-orange-400",
+      btnBg:
+        "bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600",
+    },
+    {
+      title: "Queue Implementation Quiz",
+      description:
+        "Practice Queue implementations using Arrays and Linked Lists.",
+      href: "/visualizer/queue/implementation/quiz",
+      icon: Layers,
+      filename: "queue_implementation_quiz.js",
+      cardBorder: "border-emerald-500/20 dark:border-emerald-500/30",
+      topBarBg: "bg-emerald-500/10 dark:bg-emerald-500/20",
+      iconStyle:
+        "bg-emerald-500/10 border border-emerald-500/20 dark:border-emerald-500/30 text-emerald-600 dark:text-emerald-400",
+      btnBg:
+        "bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600",
+    },
+    {
+      title: "Linked List Types Quiz",
+      description:
+        "Practice Singly, Doubly, Circular Singly, and Circular Doubly Linked List concepts.",
+      href: "/visualizer/linkedlist/types/quiz",
+      icon: Layers,
+      filename: "linked_list_types_quiz.js",
+      cardBorder: "border-blue-500/20 dark:border-blue-500/30",
+      topBarBg: "bg-blue-500/10 dark:bg-blue-500/20",
+      iconStyle:
+        "bg-blue-500/10 border border-blue-500/20 dark:border-blue-500/30 text-blue-600 dark:text-blue-400",
+      btnBg:
+        "bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600",
+    },
+    {
+      title: "Linked List Operations Quiz",
+      description:
+        "Practice Linked List operations including Insertion, Deletion, Search, Traversal, Reverse, and Finding Middle Node.",
+      href: "/visualizer/linkedlist/operations/quiz",
+      icon: Layers,
+      filename: "linked_list_operations_quiz.js",
+      cardBorder: "border-blue-500/20 dark:border-blue-500/30",
+      topBarBg: "bg-blue-500/10 dark:bg-blue-500/20",
+      iconStyle:
+        "bg-blue-500/10 border border-blue-500/20 dark:border-blue-500/30 text-blue-600 dark:text-blue-400",
+      btnBg:
+        "bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600",
+    },
+    {
+      title: "Binary Tree Quiz",
+      description: "Practice Binary Tree Structure & Properties and Types.",
+      href: "/visualizer/tree/binaryTree/quiz",
+      filename: "binary_tree_quiz.js",
+      icon: Layers,
+      cardBorder: "border-green-500/20 dark:border-green-500/30",
+      topBarBg: "bg-green-500/10 dark:bg-green-500/20",
+      iconStyle:
+        "bg-green-500/10 border border-green-500/20 dark:border-green-500/30 text-green-600 dark:text-green-400",
+      btnBg:
+        "bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600",
+    },
+    {
+      title: "Binary Search Tree Quiz",
+      description: "Practice BST insertion, deletion, searching, traversals, and AVL balancing.",
+      href: "/visualizer/tree/bst/quiz",
+      filename: "binary_search_tree_quiz.js",
+      icon: Layers,
+      cardBorder: "border-emerald-500/20 dark:border-emerald-500/30",
+      topBarBg: "bg-emerald-500/10 dark:bg-emerald-500/20",
+      iconStyle:
+        "bg-emerald-500/10 border border-emerald-500/20 dark:border-emerald-500/30 text-emerald-600 dark:text-emerald-400",
+      btnBg:
+        "bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600",
+    },
+    {
+      title: "Tree Traversal Quiz",
+      description:
+        "Practice Pre-order, In-order, Post-order, and Level-order traversal algorithms.",
+      href: "/visualizer/tree/traversing/quiz",
+      filename: "tree_traversal_quiz.js",
+      icon: Layers,
+      cardBorder: "border-lime-500/20 dark:border-lime-500/30",
+      topBarBg: "bg-lime-500/10 dark:bg-lime-500/20",
+      iconStyle:
+        "bg-lime-500/10 border border-lime-500/20 dark:border-lime-500/30 text-lime-600 dark:text-lime-400",
+      btnBg:
+        "bg-lime-600 hover:bg-lime-700 dark:bg-lime-500 dark:hover:bg-lime-600",
+    },
+    {
+      title: "Advanced Tree Quiz",
+      description:
+        "Practice AVL, Red-Black Tree, B-Tree, B+ Tree, Segment Tree, Fenwick Tree, Trie, and Heap Tree concepts.",
+      href: "/visualizer/tree/advanced/quiz",
+      filename: "advanced_tree_quiz.js",
+      icon: Layers,
+      cardBorder: "border-emerald-500/20 dark:border-emerald-500/30",
+      topBarBg: "bg-emerald-500/10 dark:bg-emerald-500/20",
+      iconStyle:
+        "bg-emerald-500/10 border border-emerald-500/20 dark:border-emerald-500/30 text-emerald-600 dark:text-emerald-400",
+      btnBg:
+        "bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600",
+    },
+    {
+      title: "Tree Applications Quiz",
+      description:
+        "Practice Heap, Heap Sort, Huffman Coding, Decision Trees, and Syntax Trees.",
+      href: "/visualizer/tree/applications/quiz",
+      filename: "tree_applications_quiz.js",
+      icon: Layers,
+      cardBorder: "border-emerald-500/20 dark:border-emerald-500/30",
+      topBarBg: "bg-emerald-500/10 dark:bg-emerald-500/20",
+      iconStyle:
+        "bg-emerald-500/10 border border-emerald-500/20 dark:border-emerald-500/30 text-emerald-600 dark:text-emerald-400",
+      btnBg:
+        "bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600",
+    },
+    {
+      title: "HashMap Operation Quiz",
+      description:
+        "Practice HashMap insertion, searching, and deletion operations.",
+      href: "/visualizer/hashmap/operations/quiz",
+      filename: "hashmap_quiz.js",
+      icon: Hash,
+      cardBorder: "border-violet-500/20 dark:border-violet-500/30",
+      topBarBg: "bg-violet-500/10 dark:bg-violet-500/20",
+      iconStyle:
+        "bg-violet-500/10 border border-violet-500/20 dark:border-violet-500/30 text-violet-600 dark:text-violet-400",
+      btnBg:
+        "bg-violet-600 hover:bg-violet-700 dark:bg-violet-500 dark:hover:bg-violet-600",
+    },
+    {
+      title: "Graph Representation Quiz",
+      description:
+        "Practice Adjacency Matrix and Adjacency List representations.",
+      href: "/visualizer/graph/representation/quiz",
+      filename: "graph_representation_quiz.js",
+      icon: Network,
+      cardBorder: "border-cyan-500/20 dark:border-cyan-500/30",
+      topBarBg: "bg-cyan-500/10 dark:bg-cyan-500/20",
+      iconStyle:
+        "bg-cyan-500/10 border border-cyan-500/20 dark:border-cyan-500/30 text-cyan-600 dark:text-cyan-400",
+      btnBg:
+        "bg-cyan-600 hover:bg-cyan-700 dark:bg-cyan-500 dark:hover:bg-cyan-600",
+    },
+    {
+      title: "Graph Traversal Quiz",
+      description:
+        "Practice Breadth-First Search (BFS) and Depth-First Search (DFS).",
+      href: "/visualizer/graph/traversal/quiz",
+      filename: "graph_traversal_quiz.js",
+      icon: Network,
+      cardBorder: "border-sky-500/20 dark:border-sky-500/30",
+      topBarBg: "bg-sky-500/10 dark:bg-sky-500/20",
+      iconStyle:
+        "bg-sky-500/10 border border-sky-500/20 dark:border-sky-500/30 text-sky-600 dark:text-sky-400",
+      btnBg:
+        "bg-sky-600 hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-sky-600",
+    },
+    {
+      title: "Graph Algorithms Quiz",
+      description:
+        "Practice Dijkstra's, Bellman-Ford, Floyd-Warshall, Prim's, Kruskal's, Topological Sort, and Kosaraju's algorithms.",
+      href: "/visualizer/graph/algorithms/quiz",
+      filename: "graph_algorithms_quiz.js",
+      icon: Network,
+      cardBorder: "border-indigo-500/20 dark:border-indigo-500/30",
+      topBarBg: "bg-indigo-500/10 dark:bg-indigo-500/20",
+      iconStyle:
+        "bg-indigo-500/10 border border-indigo-500/20 dark:border-indigo-500/30 text-indigo-600 dark:text-indigo-400",
+      btnBg:
+        "bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600",
+    },
+    {
+      title: "Dynamic Programming Quiz",
+      description:
+        "Test your understanding of DP concepts including Memoization, Tabulation, Knapsack, and LCS.",
+      href: "/visualizer/dp/quiz",
+      icon: Brain,
+      filename: "dynamic_programming_quiz.js",
+      cardBorder: "border-rose-500/20 dark:border-rose-500/30",
+      topBarBg: "bg-rose-500/10 dark:bg-rose-500/20",
+      iconStyle:
+        "bg-rose-500/10 border border-rose-500/20 dark:border-rose-500/30 text-rose-600 dark:text-rose-400",
+      btnBg:
+        "bg-rose-600 hover:bg-rose-700 dark:bg-rose-500 dark:hover:bg-rose-600",
+    },
+    {
+      title: "Bit Manipulation Quiz",
+      description:
+        "Test your understanding of binary representations, bitwise operators (&, |, ^, ~, <<, >>), setting/clearing/toggling bits, power of two, Kernighan's algorithm, and bitmasking.",
+      href: "/visualizer/bit-manipulation/quiz",
+      icon: Cpu,
+      filename: "bit_manipulation_quiz.js",
+      cardBorder: "border-violet-500/20 dark:border-violet-500/30",
+      topBarBg: "bg-violet-500/10 dark:bg-violet-500/20",
+      iconStyle:
+        "bg-violet-500/10 border border-violet-500/20 dark:border-violet-500/30 text-violet-600 dark:text-violet-400",
+      btnBg:
+        "bg-violet-600 hover:bg-violet-700 dark:bg-violet-500 dark:hover:bg-violet-600",
+    },
+    {
+      title: "Sliding Window Quiz",
+      description:
+        "Test your understanding of the sliding window technique, fixed vs variable size windows, and contiguous subarrays.",
+      href: "/visualizer/array/Interview-Patterns/quiz/slidingWindow",
+      icon: Terminal,
+      filename: "sliding_window_quiz.js",
+      cardBorder: "border-cyan-500/20 dark:border-cyan-500/30",
+      topBarBg: "bg-cyan-500/10 dark:bg-cyan-500/20",
+      iconStyle:
+        "bg-cyan-500/10 border border-cyan-500/20 dark:border-cyan-500/30 text-cyan-600 dark:text-cyan-400",
+      btnBg:
+        "bg-cyan-600 hover:bg-cyan-700 dark:bg-cyan-500 dark:hover:bg-cyan-600",
+    },
+  ];
+  const filteredQuizzes = quizzes.filter((quiz) =>
+    quiz.title.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-[var(--udemy-text)] dark:text-white transition-colors duration-300 pb-20">
+      
+      {/* Grid of Quizzes */}
+      <div className="max-w-[1100px] mx-auto px-4 pt-6">
+        <div className="mb-10">
+          <h1 className="font-mono text-4xl md:text-5xl font-bold text-surface-900 dark:text-white">
+            <span className="text-violet-500">&gt;</span>{" "}
+            Quiz Portal
+            <span className="animate-pulse text-violet-500">_</span>
+          </h1>
+        </div>
+        <div className="mb-8">
+          <div className="relative">
+            <Search
+              size={20}
+              className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"
+            />
+
+            <input
+              type="text"
+              placeholder="Search quizzes... (Press / or Ctrl+K)"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full rounded-2xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-[#1a1a1a] py-4 pl-12 pr-4 text-base outline-none focus:border-violet-500 focus:ring-2 focus:ring-violet-200 dark:focus:ring-violet-800 transition"
+            />
+          </div>
+        </div>
+        <div className="grid md:grid-cols-2 gap-6 items-stretch">
+          {filteredQuizzes.length > 0 ? (
+            filteredQuizzes.map((quiz, index) => {
+            const IconComponent = quiz.icon;
+            return (
+              <motion.div
+                key={quiz.href}
+                initial={{ opacity: 0, y: 24 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.4, delay: index * 0.05, ease: [0.22, 1, 0.36, 1] }}
+                whileHover={{ y: -6, scale: 1.015 }}
+                whileTap={{ scale: 0.985 }}
+                className={`group flex flex-col h-full rounded-2xl border ${quiz.cardBorder} bg-white dark:bg-[#1a1a1a] overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300`}
+              >
+                {/* Terminal command execution style top bar */}
+                <div className={`flex items-center justify-between px-4 py-2.5 ${quiz.topBarBg} border-b ${quiz.cardBorder}`}>
+                  <div className="flex items-center gap-1.5 font-mono text-[11px] text-surface-600 dark:text-surface-300">
+                    <span className="text-violet-500 font-bold">$</span>
+                    <span>node {quiz.filename}</span>
+                  </div>
+                </div>
+
+                {/* Main content */}
+                <div className="p-6 flex-1 flex flex-col justify-between">
+                  <div className="flex items-start gap-4 mb-6">
+                    <div className={`w-12 h-12 rounded-xl flex items-center justify-center p-2.5 flex-shrink-0 ${quiz.iconStyle}`}>
+                      <IconComponent size={24} />
+                    </div>
+                    <div>
+                      <h2 className="text-[20px] font-extrabold text-surface-900 dark:text-white group-hover:text-[var(--color-primary)] dark:group-hover:text-[var(--color-primary-light)] transition-colors">
+                        {quiz.title}
+                      </h2>
+                      <p className="text-[14px] text-surface-500 dark:text-surface-400 font-medium mt-0.5">
+                        Interactive Challenge
+                      </p>
+                    </div>
+                  </div>
+
+                  <p className="text-[14px] text-surface-600 dark:text-surface-300 leading-relaxed mb-6">
+                    {quiz.description}
+                  </p>
+
+                  <Link href={quiz.href} className="block mt-auto w-full">
+                    <button className={`w-full h-11 rounded-xl ${quiz.btnBg} text-white font-bold text-[14px] flex items-center justify-center gap-2 shadow-sm hover:shadow-md transition-all`}>
+                      <span>Start Quiz</span>
+                      <ArrowRight size={16} className="group-hover:translate-x-1 transition-transform" />
+                    </button>
+                  </Link>
+                </div>
+              </motion.div>
+            );
+          })
+          ) : (
+            <div className="col-span-2 text-center py-20">
+              <p className="text-lg text-gray-500 dark:text-gray-400">
+                No quizzes found.
+              </p>
+            </div>
+          )}
+        </div>
+        <Link
+          href="/visualizer"
+            className="mt-16 mx-auto flex w-fit items-center gap-2 px-6 py-3 rounded-2xl border border-udemy-border dark:border-udemy-dark-border hover:border-udemy-purple hover:text-udemy-purple dark:hover:text-udemy-purple-light transition bg-white dark:hover:border-udemy-purple dark:bg-udemy-dark-surface font-medium"
+        >
+          ← Back to Visulaizer
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/visualizer/recursion/backtracking/AlgorithmClient.jsx b/src/app/visualizer/recursion/backtracking/AlgorithmClient.jsx
new file mode 100644
index 000000000..20b236bb1
--- /dev/null
+++ b/src/app/visualizer/recursion/backtracking/AlgorithmClient.jsx
@@ -0,0 +1,7 @@
+import BacktrackingClient from "./BacktrackingClient";
+
+
+
+export default function Page() {
+  return <BacktrackingClient />;
+}
diff --git a/src/app/visualizer/recursion/backtracking/BacktrackingClient.jsx b/src/app/visualizer/recursion/backtracking/BacktrackingClient.jsx
new file mode 100644
index 000000000..0132f99ce
--- /dev/null
+++ b/src/app/visualizer/recursion/backtracking/BacktrackingClient.jsx
@@ -0,0 +1,32 @@
+"use client";
+import React from "react";
+import NQueensAnimation from "../n-queens/animation";
+import Code from "../n-queens/codeBlock";
+import Content from "../n-queens/content";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function BacktrackingClient() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Recursion", "Backtracking")}
+      title="Backtracking"
+      headerDescription="Visualize classical backtracking recursively. Watch the algorithm place queens on a chessboard, backtrack upon conflicts, and find all safe placements."
+      animation={<NQueensAnimation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[
+            { text: "Recursion on Subsequences", url: "/visualizer/recursion/subsequences" },
+            { text: "Multiple Recursive Calls", url: "/visualizer/recursion/multiple-calls" },
+            { text: "Recursion Trees", url: "/visualizer/recursion/trees" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/recursion/backtracking/quiz/page.jsx b/src/app/visualizer/recursion/backtracking/quiz/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/recursion/backtracking/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/backtracking/quiz/quiz.jsx b/src/app/visualizer/recursion/backtracking/quiz/quiz.jsx
new file mode 100644
index 000000000..e742d6b5d
--- /dev/null
+++ b/src/app/visualizer/recursion/backtracking/quiz/quiz.jsx
@@ -0,0 +1,198 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const BacktrackingQuiz = () => {
+  const questions = [
+    {
+      question: "What is the primary idea behind backtracking?",
+      options: [
+        "Sorting elements",
+        "Exploring all possible solutions and undoing choices when needed",
+        "Searching elements linearly",
+        "Dividing arrays into halves",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Backtracking explores all possible choices and reverses decisions when a path does not lead to a valid solution.",
+    },
+    {
+      question: "Which operation is essential after exploring one recursive path in backtracking?",
+      options: [
+        "Sorting",
+        "Backtracking (undoing the last choice)",
+        "Binary Search",
+        "Hashing",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The last choice is undone so other possible paths can be explored.",
+    },
+    {
+      question: "Which of the following is a classic application of backtracking?",
+      options: [
+        "N-Queens Problem",
+        "Bubble Sort",
+        "Linear Search",
+        "Merge Sort",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "The N-Queens problem is one of the most common applications of backtracking.",
+    },
+    {
+      question: "What happens when a current solution violates a constraint?",
+      options: [
+        "The algorithm continues without changes",
+        "The algorithm backtracks to the previous state",
+        "The algorithm sorts the data",
+        "The recursion stops immediately",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Backtracking abandons invalid paths and returns to the previous decision point.",
+    },
+    {
+      question: "Which data structure is naturally used during recursive backtracking?",
+      options: [
+        "Queue",
+        "Stack",
+        "Heap",
+        "Graph",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Recursive calls are managed using the call stack.",
+    },
+    {
+      question: "Why is backtracking considered an exhaustive search technique?",
+      options: [
+        "It checks only one solution",
+        "It explores every possible valid choice systematically",
+        "It always uses dynamic programming",
+        "It avoids recursion",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Backtracking systematically explores all possible solutions while pruning invalid ones.",
+    },
+    {
+      question: "What is the purpose of pruning in backtracking?",
+      options: [
+        "To increase recursion depth",
+        "To eliminate unnecessary search paths",
+        "To sort the solution",
+        "To reduce memory usage to O(1)",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Pruning avoids exploring branches that cannot produce a valid solution.",
+    },
+    {
+      question: "Which statement best describes backtracking?",
+      options: [
+        "Choose → Explore → Undo",
+        "Sort → Search → Return",
+        "Divide → Merge → Repeat",
+        "Push → Pop → Sort",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Backtracking follows the pattern: choose an option, explore recursively, then undo the choice.",
+    },
+    {
+      question: "Which of the following problems is NOT commonly solved using backtracking?",
+      options: [
+        "Sudoku Solver",
+        "Rat in a Maze",
+        "Permutation Generation",
+        "Bubble Sort",
+      ],
+      correctAnswer: 3,
+      explanation:
+        "Bubble Sort is an iterative sorting algorithm and does not use backtracking.",
+    },
+    {
+      question: "What is the worst-case time complexity of many backtracking algorithms?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "Exponential",
+        "O(N)",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Many backtracking problems require exploring an exponential number of possibilities in the worst case.",
+    },
+    {
+      question: "What is the first step in a typical backtracking algorithm?",
+      options: [
+        "Choose a possible option",
+        "Sort the input",
+        "Print the answer",
+        "Delete all choices",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Backtracking begins by making a choice before exploring recursively.",
+    },
+    {
+      question: "Why do we remove the last choice after a recursive call?",
+      options: [
+        "To save memory",
+        "To restore the previous state",
+        "To stop recursion",
+        "To sort the answer",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Removing the last choice restores the previous state so other possibilities can be explored.",
+    },
+    {
+      question: "Which algorithmic technique is most closely related to backtracking?",
+      options: [
+        "Depth-First Search",
+        "Breadth-First Search",
+        "Binary Search",
+        "Merge Sort",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Backtracking explores one path completely before returning, similar to DFS.",
+    },
+    {
+      question: "Which problem commonly uses backtracking to generate all valid arrangements?",
+      options: [
+        "Permutations",
+        "Binary Search",
+        "Heap Sort",
+        "Counting Sort",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Generating permutations is a classic backtracking problem.",
+    },
+    {
+      question: "Why is a validity check performed before making recursive calls?",
+      options: [
+        "To prune invalid paths early",
+        "To increase recursion depth",
+        "To make recursion slower",
+        "To reduce the number of variables",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Checking constraints early avoids unnecessary recursive exploration.",
+    },
+  ];
+
+  return (
+    <QuizEngine
+      title="Backtracking Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default BacktrackingQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/basic-recursion/AlgorithmClient.jsx b/src/app/visualizer/recursion/basic-recursion/AlgorithmClient.jsx
new file mode 100644
index 000000000..7267b37a8
--- /dev/null
+++ b/src/app/visualizer/recursion/basic-recursion/AlgorithmClient.jsx
@@ -0,0 +1,7 @@
+import BasicRecursionClient from "./BasicRecursionClient";
+
+
+
+export default function Page() {
+  return <BasicRecursionClient />;
+}
diff --git a/src/app/visualizer/recursion/basic-recursion/BasicRecursionClient.jsx b/src/app/visualizer/recursion/basic-recursion/BasicRecursionClient.jsx
new file mode 100644
index 000000000..63882888f
--- /dev/null
+++ b/src/app/visualizer/recursion/basic-recursion/BasicRecursionClient.jsx
@@ -0,0 +1,68 @@
+"use client";
+import React, { useState } from "react";
+import Print1ToNAnimation from "../print-1-to-n/animation";
+import PrintNTo1Animation from "../print-n-to-1/animation";
+import Print1ToNCode from "../print-1-to-n/codeBlock";
+import PrintNTo1Code from "../print-n-to-1/codeBlock";
+import Print1ToNContent from "../print-1-to-n/content";
+import PrintNTo1Content from "../print-n-to-1/content";
+
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import ExploreOther from "@/app/components/ui/exploreOther";
+
+export default function BasicRecursionClient() {
+  const [problem, setProblem] = useState("1-to-n");
+
+  const is1ToN = problem === "1-to-n";
+
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Recursion", "Basic Recursion")}
+      title="Basic Recursion"
+      headerDescription={
+        is1ToN
+          ? "Understand the absolute basics of recursion by pushing frames onto the stack to count up from 1 to N."
+          : "Visualize the execution order when actions are performed before calling recursively to print down from N to 1."
+      }
+      headerActions={
+        <div className="flex gap-2 p-1.5 bg-gray-100 dark:bg-zinc-900 rounded-xl border dark:border-zinc-800 shadow-inner">
+          <button
+            onClick={() => setProblem("1-to-n")}
+            className={`px-5 py-2 text-sm font-semibold rounded-lg transition-all ${
+              is1ToN
+                ? "bg-white dark:bg-zinc-850 text-teal-600 dark:text-teal-400 shadow-md ring-1 ring-black/5"
+                : "text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-white"
+            }`}
+          >
+            Print 1 to N
+          </button>
+          <button
+            onClick={() => setProblem("n-to-1")}
+            className={`px-5 py-2 text-sm font-semibold rounded-lg transition-all ${
+              !is1ToN
+                ? "bg-white dark:bg-zinc-850 text-teal-600 dark:text-teal-400 shadow-md ring-1 ring-black/5"
+                : "text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-white"
+            }`}
+          >
+            Print N to 1
+          </button>
+        </div>
+      }
+      animation={is1ToN ? <Print1ToNAnimation /> : <PrintNTo1Animation />}
+      content={is1ToN ? <Print1ToNContent /> : <PrintNTo1Content />}
+      code={is1ToN ? <Print1ToNCode /> : <PrintNTo1Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[
+            { text: "Functional & Parameterized", url: "/visualizer/recursion/functional-parameterized" },
+            { text: "Multiple Recursive Calls", url: "/visualizer/recursion/multiple-calls" },
+            { text: "Backtracking", url: "/visualizer/recursion/backtracking" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/recursion/basic-recursion/quiz/page.jsx b/src/app/visualizer/recursion/basic-recursion/quiz/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/recursion/basic-recursion/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/basic-recursion/quiz/quiz.jsx b/src/app/visualizer/recursion/basic-recursion/quiz/quiz.jsx
new file mode 100644
index 000000000..d39b571a3
--- /dev/null
+++ b/src/app/visualizer/recursion/basic-recursion/quiz/quiz.jsx
@@ -0,0 +1,197 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const BasicRecursionQuiz = () => {
+    const questions = [
+  {
+    question: "What is recursion?",
+    options: [
+      "A function calling itself",
+      "A loop inside another loop",
+      "A sorting algorithm",
+      "A searching technique",
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Recursion is a programming technique where a function calls itself to solve a problem.",
+  },
+  {
+    question: "Why is a base case necessary in recursion?",
+    options: [
+      "To increase recursion depth",
+      "To stop recursive calls",
+      "To improve sorting speed",
+      "To reduce memory usage",
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The base case prevents infinite recursion by providing a stopping condition.",
+  },
+  {
+    question: "What happens if a recursive function has no base case?",
+    options: [
+      "Nothing happens",
+      "It automatically stops",
+      "It causes Stack Overflow",
+      "It becomes iterative",
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Without a base case, recursive calls continue until the call stack overflows.",
+  },
+  {
+    question: "Which memory area stores recursive function calls?",
+    options: [
+      "Heap",
+      "Stack",
+      "Cache",
+      "ROM",
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Every recursive call creates a new stack frame in the call stack.",
+  },
+  {
+    question: "Which data structure is used internally during recursion?",
+    options: [
+      "Queue",
+      "Stack",
+      "Linked List",
+      "Graph",
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Recursion is implemented using the function call stack.",
+  },
+  {
+    question: "For printing numbers from 1 to N recursively, when should the print statement execute?",
+    options: [
+      "Before the recursive call",
+      "After the recursive call",
+      "Inside a loop",
+      "Never",
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Printing after the recursive call produces output from 1 to N.",
+  },
+  {
+    question: "For printing numbers from N to 1 recursively, when should the print statement execute?",
+    options: [
+      "Before the recursive call",
+      "After the recursive call",
+      "After returning",
+      "Never",
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Printing before the recursive call gives N down to 1.",
+  },
+  {
+    question: "What is Head Recursion?",
+    options: [
+      "Recursive call comes first",
+      "Recursive call comes last",
+      "No recursive call",
+      "Multiple recursive calls",
+    ],
+    correctAnswer: 0,
+    explanation:
+      "In head recursion, the recursive call is executed before any processing.",
+  },
+  {
+    question: "What is Tail Recursion?",
+    options: [
+      "Recursive call is the last operation",
+      "Recursive call is first",
+      "No base case",
+      "Two recursive calls",
+    ],
+    correctAnswer: 0,
+    explanation:
+      "In tail recursion, the recursive call is the final operation.",
+  },
+  {
+    question: "What is the time complexity of printing numbers from 1 to N recursively?",
+    options: [
+      "O(1)",
+      "O(log N)",
+      "O(N)",
+      "O(N²)",
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Each recursive call processes one number, so the complexity is O(N).",
+  },
+  {
+    question: "What is the space complexity of recursion for printing N numbers?",
+    options: [
+      "O(1)",
+      "O(log N)",
+      "O(N)",
+      "O(N²)",
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The recursion stack stores N function calls.",
+  },
+  {
+    question: "Which of the following problems commonly uses recursion?",
+    options: [
+      "Binary Search",
+      "Tree Traversal",
+      "Tower of Hanoi",
+      "All of the above",
+    ],
+    correctAnswer: 3,
+    explanation:
+      "All these problems are naturally solved using recursion.",
+  },
+  {
+    question: "What is a recursive call?",
+    options: [
+      "Calling another function",
+      "Calling the same function from itself",
+      "Calling a loop",
+      "Calling a class",
+    ],
+    correctAnswer: 1,
+    explanation:
+      "A recursive call occurs when a function invokes itself.",
+  },
+  {
+    question: "Which statement about recursion is correct?",
+    options: [
+      "Every recursive function must reach a base case",
+      "Recursion never uses memory",
+      "Recursion is always faster than iteration",
+      "Recursion cannot call itself",
+    ],
+    correctAnswer: 0,
+    explanation:
+      "A base case is required to terminate recursion safely.",
+  },
+  {
+    question: "Which statement best describes recursion?",
+    options: [
+      "Breaking a problem into smaller subproblems",
+      "Sorting without comparisons",
+      "Searching only in arrays",
+      "Using multiple loops",
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Recursion solves a problem by repeatedly solving smaller instances of the same problem.",
+  },
+];
+return (
+    <QuizEngine
+      title="Basic Recursion Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default BasicRecursionQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/binary-search/AlgorithmClient.jsx b/src/app/visualizer/recursion/binary-search/AlgorithmClient.jsx
new file mode 100644
index 000000000..e7454d6a8
--- /dev/null
+++ b/src/app/visualizer/recursion/binary-search/AlgorithmClient.jsx
@@ -0,0 +1,7 @@
+import BinarySearchClient from "./BinarySearchClient";
+
+
+
+export default function Page() {
+  return <BinarySearchClient />;
+}
diff --git a/src/app/visualizer/recursion/binary-search/BinarySearchClient.jsx b/src/app/visualizer/recursion/binary-search/BinarySearchClient.jsx
new file mode 100644
index 000000000..d3bd132fc
--- /dev/null
+++ b/src/app/visualizer/recursion/binary-search/BinarySearchClient.jsx
@@ -0,0 +1,32 @@
+"use client";
+import React from "react";
+import BinarySearchAnimation from "./animation";
+import BinarySearchCode from "./codeBlock";
+import BinarySearchContent from "./content";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function BinarySearchClient() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Recursion", "Recursive Binary Search")}
+      title="Recursive Binary Search"
+      headerDescription="Visualize how Binary Search operates recursively by halving the search space, computing middle pointers, and recursively calling left or right intervals."
+      animation={<BinarySearchAnimation />}
+      content={<BinarySearchContent />}
+      code={<BinarySearchCode />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[
+            { text: "Basic Recursion", url: "/visualizer/recursion/basic-recursion" },
+            { text: "Functional & Parameterized", url: "/visualizer/recursion/functional-parameterized" },
+            { text: "Multiple Recursive Calls", url: "/visualizer/recursion/multiple-calls" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/recursion/binary-search/animation.jsx b/src/app/visualizer/recursion/binary-search/animation.jsx
new file mode 100644
index 000000000..ab683406e
--- /dev/null
+++ b/src/app/visualizer/recursion/binary-search/animation.jsx
@@ -0,0 +1,304 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import ResetButton from "@/app/components/ui/resetButton";
+import GoButton from "@/app/components/ui/goButton";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+import { generateBinarySearchFrames } from "@/features/algorithms/recursion/binarySearchLogic";
+
+const codeLines = [
+  { line: 1, code: "function binarySearch(arr, target, low, high) {" },
+  { line: 2, code: "  if (low > high) return -1;" },
+  { line: 3, code: "" },
+  { line: 4, code: "  let mid = Math.floor((low + high) / 2);" },
+  { line: 5, code: "  if (arr[mid] === target) return mid;" },
+  { line: 6, code: "" },
+  { line: 7, code: "  if (target < arr[mid]) {" },
+  { line: 8, code: "    return binarySearch(arr, target, low, mid - 1);" },
+  { line: 9, code: "  } else {" },
+  { line: 10, code: "    return binarySearch(arr, target, mid + 1, high);" },
+  { line: 11, code: "  }" },
+  { line: 12, code: "}" },
+];
+
+export default function BinarySearchAnimation() {
+  const [arrayVal, setArrayVal] = useState("10, 20, 30, 40, 50, 60, 70, 80");
+  const [targetVal, setTargetVal] = useState("60");
+  const [isVisualizing, setIsVisualizing] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const parsedArray = useMemo(() => {
+    return arrayVal
+      .split(",")
+      .map((x) => parseInt(x.trim(), 10))
+      .filter((x) => !isNaN(x))
+      .sort((a, b) => a - b);
+  }, [arrayVal]);
+
+  const frames = useMemo(() => {
+    if (!isVisualizing) return [];
+    const target = parseInt(targetVal, 10);
+    if (isNaN(target)) return [];
+    return Array.from(generateBinarySearchFrames(parsedArray, target));
+  }, [parsedArray, targetVal, isVisualizing]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  useVisualizerReset(() => {
+    setArrayVal("10, 20, 30, 40, 50, 60, 70, 80");
+    setTargetVal("60");
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  });
+
+  const handleGo = (e) => {
+    e.preventDefault();
+    if (parsedArray.length === 0) {
+      setErrorMsg("Please enter at least one integer value.");
+      return;
+    }
+    const target = parseInt(targetVal, 10);
+    if (isNaN(target)) {
+      setErrorMsg("Please enter a valid target integer.");
+      return;
+    }
+    setErrorMsg("");
+    setIsVisualizing(true);
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      engine.play();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const activeFrameData = frames.length > 0 && engine.currentStep >= 0 
+    ? frames[engine.currentStep] 
+    : {
+        stack: [],
+        low: null,
+        high: null,
+        mid: null,
+        activeLine: 0,
+        description: "Click Visualize Go! to watch recursive search state building.",
+      };
+
+  const activeStack = activeFrameData.stack || [];
+  const activeLine = activeFrameData.activeLine;
+  const activeLow = activeFrameData.low;
+  const activeHigh = activeFrameData.high;
+  const activeMid = activeFrameData.mid;
+
+  const stackColors = {
+    calling: "bg-[#e0f2fe] dark:bg-sky-950/40 border-sky-400 dark:border-sky-700 text-sky-800 dark:text-sky-200",
+    checking_base: "bg-[#fef3c7] dark:bg-amber-950/40 border-amber-400 dark:border-amber-700 text-amber-800 dark:text-amber-200",
+    computing_mid: "bg-[#fae8ff] dark:bg-purple-950/30 border-purple-400 dark:border-purple-800 text-purple-700 dark:text-purple-300",
+    checking_match: "bg-teal-50 dark:bg-teal-950/20 border-teal-400 dark:border-teal-800 text-teal-800 dark:text-teal-200",
+    found: "bg-[#dcfce7] dark:bg-emerald-950/40 border-emerald-400 dark:border-emerald-700 text-emerald-800 dark:text-emerald-200",
+    not_found: "bg-[#fee2e2] dark:bg-rose-950/40 border-rose-400 dark:border-rose-700 text-rose-800 dark:text-rose-200",
+    returning: "bg-gray-150 dark:bg-zinc-800 border-zinc-400 dark:border-zinc-700 text-zinc-850 dark:text-zinc-300",
+  };
+
+  return (
+    <main className="container mx-auto">
+      {/* Configuration Header */}
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8"
+      >
+        <div className="grid gap-4 sm:grid-cols-12 items-end">
+          <div className="sm:col-span-7">
+            <label className="block text-gray-700 dark:text-gray-300 mb-2 font-medium" htmlFor="arrayInput">
+              Sorted Array (Comma Separated)
+            </label>
+            <input
+              type="text"
+              id="arrayInput"
+              value={arrayVal}
+              onChange={(e) => {
+                setArrayVal(e.target.value);
+                handleReset();
+              }}
+              className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#0d9488] focus:outline-none focus:ring-2 focus:ring-[#0d9488]/30 transition duration-300"
+              placeholder="e.g. 10, 20, 30, 40, 50, 60, 70"
+              disabled={isVisualizing}
+            />
+          </div>
+
+          <div className="sm:col-span-2">
+            <label className="block text-gray-700 dark:text-gray-300 mb-2 font-medium" htmlFor="targetInput">
+              Target
+            </label>
+            <input
+              type="number"
+              id="targetInput"
+              value={targetVal}
+              onChange={(e) => {
+                setTargetVal(e.target.value);
+                handleReset();
+              }}
+              className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#0d9488] focus:outline-none focus:ring-2 focus:ring-[#0d9488]/30 transition duration-300"
+              placeholder="e.g. 60"
+              disabled={isVisualizing}
+            />
+          </div>
+
+          <div className="sm:col-span-3 flex gap-2 justify-end">
+            <GoButton onClick={handleGo} isAnimating={isVisualizing} disabled={isVisualizing} />
+            <ResetButton onReset={handleReset} isAnimating={isVisualizing} />
+          </div>
+        </div>
+
+        {errorMsg && <p className="text-red-500 dark:text-red-400 text-xs font-semibold mt-2">{errorMsg}</p>}
+
+        {isVisualizing && frames.length > 0 && (
+          <div className="mt-4">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </form>
+
+      {/* Narrative Explanation Block */}
+      <div className="max-w-4xl mx-auto mb-8 p-4 rounded-xl border border-teal-100 bg-teal-50/40 dark:border-teal-900/30 dark:bg-teal-950/10 text-teal-800 dark:text-teal-200">
+        <p className="text-center font-medium text-sm leading-relaxed">
+          {activeFrameData.description}
+        </p>
+      </div>
+
+      {/* Array Display Workspace */}
+      {isVisualizing && (
+        <div className="max-w-4xl mx-auto bg-white dark:bg-[#1a1a1a] p-6 rounded-xl border border-gray-200 dark:border-zinc-800 shadow mb-8 flex flex-col items-center">
+          <h3 className="text-xs font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider">
+            Array Search Space
+          </h3>
+          <div className="flex flex-wrap gap-2 justify-center items-center">
+            {parsedArray.map((val, idx) => {
+              const isInRange = activeLow !== null && activeHigh !== null && idx >= activeLow && idx <= activeHigh;
+              const isMid = idx === activeMid;
+              
+              let styleClass = "bg-gray-100 dark:bg-zinc-800 text-gray-400 border-gray-200 dark:border-zinc-700 opacity-40";
+              if (isInRange) {
+                styleClass = "bg-[#e0f2fe] dark:bg-sky-950/40 border-sky-400 dark:border-sky-800 text-sky-950 dark:text-sky-100";
+              }
+              if (isMid) {
+                styleClass = "bg-[#a435f0] text-white border-[#a435f0] scale-105 font-bold shadow-lg shadow-[#a435f0]/30 animate-pulse";
+              }
+
+              return (
+                <div key={idx} className="flex flex-col items-center">
+                  <div className={`w-12 h-12 rounded-lg border flex items-center justify-center text-sm font-semibold transition-all duration-300 ${styleClass}`}>
+                    {val}
+                  </div>
+                  <span className="text-[10px] font-mono text-zinc-500 dark:text-zinc-400 mt-1">
+                    {idx === activeLow && "L"}
+                    {isMid && "M"}
+                    {idx === activeHigh && "H"}
+                    {(!isMid && idx !== activeLow && idx !== activeHigh) && `[${idx}]`}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Visual Workspace Grid */}
+      <div className="max-w-4xl mx-auto grid gap-6 md:grid-cols-12 mb-8">
+        {/* Left Side: Call Stack */}
+        <div className="md:col-span-6 rounded-xl bg-white dark:bg-[#1a1a1a] p-5 shadow border border-gray-200 dark:border-zinc-800">
+          <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider text-center">
+            Active Call Stack
+          </h3>
+          {activeStack.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed border-gray-200 dark:border-zinc-800 rounded-xl">
+              <p className="text-gray-400 dark:text-zinc-500 text-sm">Call Stack is Empty</p>
+            </div>
+          ) : (
+            <div className="flex flex-col-reverse gap-2 items-center justify-end h-72 overflow-y-auto p-4 border border-gray-100 dark:border-zinc-800 rounded-xl bg-gray-50/50 dark:bg-zinc-900/20">
+              {activeStack.map((frame, index) => {
+                const isTop = index === activeStack.length - 1;
+                const statusClass = stackColors[frame.status] || stackColors.returning;
+
+                return (
+                  <div
+                    key={frame.id}
+                    className={`w-full max-w-[340px] p-3 rounded-lg border flex flex-col transition-all duration-300 ${statusClass} ${
+                      isTop ? "ring-2 ring-[#a435f0] ring-offset-2 dark:ring-offset-zinc-950 font-semibold" : ""
+                    }`}
+                  >
+                    <div className="flex justify-between w-full font-mono text-xs">
+                      <span>binarySearch(low={frame.low}, high={frame.high})</span>
+                      <span className="capitalize text-[10px] tracking-wide font-bold">{frame.status.replace("_", " ")}</span>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Right Side: Code Block Trace */}
+        <div className="md:col-span-6 flex flex-col">
+          <div className="w-full border border-gray-200 dark:border-zinc-800 rounded-xl overflow-hidden bg-zinc-950 font-mono text-xs shadow-inner h-full flex flex-col">
+            <div className="flex items-center justify-between px-4 py-2 bg-zinc-900 border-b border-zinc-800">
+              <span className="text-zinc-400 font-semibold">Active Code Trace</span>
+            </div>
+            <div className="p-4 text-zinc-300 leading-relaxed flex-1">
+              {codeLines.map((ln) => {
+                const isActive = ln.line === activeLine;
+                return (
+                  <div
+                    key={ln.line}
+                    className={`flex gap-4 px-2 py-0.5 rounded transition-colors duration-200 ${
+                      isActive ? "bg-[#a435f0]/20 border-l-4 border-[#a435f0] text-white font-bold" : "border-l-4 border-transparent"
+                    }`}
+                  >
+                    <span className="text-zinc-600 select-none w-4 text-right">{ln.line}</span>
+                    <span className="whitespace-pre">{ln.code}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/app/visualizer/recursion/binary-search/codeBlock.jsx b/src/app/visualizer/recursion/binary-search/codeBlock.jsx
new file mode 100644
index 000000000..8abedd341
--- /dev/null
+++ b/src/app/visualizer/recursion/binary-search/codeBlock.jsx
@@ -0,0 +1,181 @@
+'use client';
+import CodeBlock from '@/app/components/ui/CodeBlock';
+
+const codeExamples = {
+  javascript: `// Recursive Binary Search in JavaScript
+function binarySearch(arr, target, low, high) {
+  // Base case: Search space is exhausted
+  if (low > high) {
+    return -1; // Target not found
+  }
+
+  // Find the middle element
+  const mid = Math.floor((low + high) / 2);
+
+  // Target is found
+  if (arr[mid] === target) {
+    return mid;
+  }
+
+  // Target is in the left half
+  if (target < arr[mid]) {
+    return binarySearch(arr, target, low, mid - 1);
+  }
+  
+  // Target is in the right half
+  return binarySearch(arr, target, mid + 1, high);
+}
+
+// Usage Example
+const arr = [10, 20, 30, 40, 50, 60, 70, 80];
+const target = 60;
+const index = binarySearch(arr, target, 0, arr.length - 1);
+console.log("Found at index:", index); // Output: 5`,
+
+  python: `# Recursive Binary Search in Python
+def binary_search(arr, target, low, high):
+    # Base case: Search space is exhausted
+    if low > high:
+        return -1  # Target not found
+
+    # Find the middle element
+    mid = (low + high) // 2
+
+    # Target is found
+    if arr[mid] == target:
+        return mid
+
+    # Target is in the left half
+    if target < arr[mid]:
+        return binary_search(arr, target, low, mid - 1)
+
+    # Target is in the right half
+    return binary_search(arr, target, mid + 1, high)
+
+# Usage Example
+arr = [10, 20, 30, 40, 50, 60, 70, 80]
+target = 60
+index = binary_search(arr, target, 0, len(arr) - 1)
+print("Found at index:", index)  # Output: 5`,
+
+  java: `// Recursive Binary Search in Java
+public class BinarySearch {
+    public static int binarySearch(int[] arr, int target, int low, int high) {
+        // Base case: Search space is exhausted
+        if (low > high) {
+            return -1; // Target not found
+        }
+
+        // Find the middle element
+        int mid = low + (high - low) / 2;
+
+        // Target is found
+        if (arr[mid] == target) {
+            return mid;
+        }
+
+        // Target is in the left half
+        if (target < arr[mid]) {
+            return binarySearch(arr, target, low, mid - 1);
+        }
+
+        // Target is in the right half
+        return binarySearch(arr, target, mid + 1, high);
+    }
+
+    public static void main(String[] args) {
+        int[] arr = {10, 20, 30, 40, 50, 60, 70, 80};
+        int target = 60;
+        int index = binarySearch(arr, target, 0, arr.length - 1);
+        System.out.println("Found at index: " + index); // Output: 5
+    }
+}`,
+
+  c: `// Recursive Binary Search in C
+#include <stdio.h>
+
+int binarySearch(int arr[], int target, int low, int high) {
+    // Base case: Search space is exhausted
+    if (low > high) {
+        return -1; // Target not found
+    }
+
+    // Find the middle element
+    int mid = low + (high - low) / 2;
+
+    // Target is found
+    if (arr[mid] == target) {
+        return mid;
+    }
+
+    // Target is in the left half
+    if (target < arr[mid]) {
+        return binarySearch(arr, target, low, mid - 1);
+    }
+
+    // Target is in the right half
+    return binarySearch(arr, target, mid + 1, high);
+}
+
+int main() {
+    int arr[] = {10, 20, 30, 40, 50, 60, 70, 80};
+    int size = sizeof(arr) / sizeof(arr[0]);
+    int target = 60;
+    int index = binarySearch(arr, target, 0, size - 1);
+    printf("Found at index: %d\\n", index); // Output: 5
+    return 0;
+}`,
+
+  cpp: `// Recursive Binary Search in C++
+#include <iostream>
+#include <vector>
+
+int binarySearch(const std::vector<int>& arr, int target, int low, int high) {
+    // Base case: Search space is exhausted
+    if (low > high) {
+        return -1; // Target not found
+    }
+
+    // Find the middle element
+    int mid = low + (high - low) / 2;
+
+    // Target is found
+    if (arr[mid] == target) {
+        return mid;
+    }
+
+    // Target is in the left half
+    if (target < arr[mid]) {
+        return binarySearch(arr, target, low, mid - 1);
+    }
+
+    // Target is in the right half
+    return binarySearch(arr, target, mid + 1, high);
+}
+
+int main() {
+    std::vector<int> arr = {10, 20, 30, 40, 50, 60, 70, 80};
+    int target = 60;
+    int index = binarySearch(arr, target, 0, arr.size() - 1);
+    std::cout << "Found at index: " << index << std::endl; // Output: 5
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: 'binarySearchRecursive.js',
+  python: 'binary_search_recursive.py',
+  java: 'BinarySearchRecursive.java',
+  c: 'binary_search_recursive.c',
+  cpp: 'binary_search_recursive.cpp',
+};
+
+export default function BinarySearchCode() {
+  return (
+    <CodeBlock
+      variant="macos"
+      codeExamples={codeExamples}
+      fileNames={fileNames}
+    />
+  );
+}
diff --git a/src/app/visualizer/recursion/binary-search/content.jsx b/src/app/visualizer/recursion/binary-search/content.jsx
new file mode 100644
index 000000000..2844cd614
--- /dev/null
+++ b/src/app/visualizer/recursion/binary-search/content.jsx
@@ -0,0 +1,56 @@
+"use client";
+import React from "react";
+
+const Content = () => {
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8 shadow-sm">
+        {/* Concept */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Recursive Binary Search
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <p className="leading-relaxed">
+              <strong>Binary Search</strong> is a highly efficient algorithm for finding a target value within a <em>sorted</em> array. 
+              Instead of searching linearly item-by-item, it repeatedly halves the search space.
+            </p>
+            <p className="mt-4 leading-relaxed font-semibold">
+              How it works recursively:
+            </p>
+            <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              <li><strong>Base Case 1 (Empty Interval):</strong> If the search pointers cross (<code>low &gt; high</code>), the element is not present. Return <code>-1</code>.</li>
+              <li><strong>Mid Computation:</strong> Find the middle index: <code>mid = Math.floor((low + high) / 2)</code>.</li>
+              <li><strong>Base Case 2 (Match Found):</strong> If <code>arr[mid] === target</code>, the search is complete. Return <code>mid</code>.</li>
+              <li><strong>Recursive Step (Left Half):</strong> If the target is smaller than the middle element, search the left subsegment recursively: <code>binarySearch(arr, target, low, mid - 1)</code>.</li>
+              <li><strong>Recursive Step (Right Half):</strong> If the target is larger, search the right subsegment recursively: <code>binarySearch(arr, target, mid + 1, high)</code>.</li>
+            </ul>
+          </div>
+        </section>
+
+        {/* Complexity Analysis */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-3">
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Time Complexity: O(log N)</span>
+              <br />
+              Each recursive call divides the search space in half. For an array of size $N$, it takes at most $\log_2 N$ steps to find the element or determine its absence.
+            </p>
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Space Complexity: O(log N)</span>
+              <br />
+              Since it divides the array space recursively, the maximum call stack height is $\log_2 N$, requiring logarithmic auxiliary stack space.
+            </p>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/recursion/binary-search/quiz.jsx b/src/app/visualizer/recursion/binary-search/quiz.jsx
new file mode 100644
index 000000000..a3a1378b7
--- /dev/null
+++ b/src/app/visualizer/recursion/binary-search/quiz.jsx
@@ -0,0 +1,48 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    id: 1,
+    question: "What is the best-case time complexity of Recursive Binary Search?",
+    options: ["O(log N)", "O(1)", "O(N)", "O(N log N)"],
+    answer: "O(1)",
+    explanation: "If the target element lies exactly at the computed mid index in the very first call, it resolves in O(1) time.",
+  },
+  {
+    id: 2,
+    question: "What happens when the target is not present in the array?",
+    options: [
+      "The call stack grows infinitely causing a stack overflow",
+      "The function returns -1 when low exceeds high (low > high)",
+      "The function throws a compilation error",
+      "The function runs in O(N) time and returns null"
+    ],
+    answer: "The function returns -1 when low exceeds high (low > high)",
+    explanation: "Once the pointers cross (low > high), the search interval becomes invalid, hitting the base case returning -1.",
+  },
+  {
+    id: 3,
+    question: "What is the space complexity of Recursive Binary Search due to the recursion call stack?",
+    options: ["O(1)", "O(N)", "O(log N)", "O(N^2)"],
+    answer: "O(log N)",
+    explanation: "Because each recursive step cuts the search space in half, the maximum call stack height/recursion depth is log2(N).",
+  },
+  {
+    id: 4,
+    question: "If Recursive Binary Search is run on an unsorted array, what will happen?",
+    options: [
+      "It will automatically sort the array first",
+      "It may fail to find the element even if it exists in the array",
+      "It will always work but run in O(N) time",
+      "It will raise a runtime exception"
+    ],
+    answer: "It may fail to find the element even if it exists in the array",
+    explanation: "Binary search relies on the sorted order to discard half the search space. If unsorted, discarding could remove the region containing the target.",
+  },
+];
+
+export default function BinarySearchQuiz() {
+  return <QuizEngine questions={questions} />;
+}
diff --git a/src/app/visualizer/recursion/binary-search/quiz/page.jsx b/src/app/visualizer/recursion/binary-search/quiz/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/recursion/binary-search/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/binary-search/quiz/quiz.jsx b/src/app/visualizer/recursion/binary-search/quiz/quiz.jsx
new file mode 100644
index 000000000..c7e4720ff
--- /dev/null
+++ b/src/app/visualizer/recursion/binary-search/quiz/quiz.jsx
@@ -0,0 +1,198 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const RecursiveBinarySearchQuiz = () => {
+  const questions = [
+    {
+      question: "What is the prerequisite for Recursive Binary Search?",
+      options: [
+        "The array must be sorted",
+        "The array must be reversed",
+        "The array must contain only positive numbers",
+        "The array must be unsorted",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Binary Search requires the array to be sorted before searching.",
+    },
+    {
+      question: "What is the base case when the target is found?",
+      options: [
+        "low > high",
+        "arr[mid] === target",
+        "mid === 0",
+        "high === low",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The recursion stops immediately when the middle element equals the target.",
+    },
+    {
+      question: "If the target is smaller than the middle element, where does the recursive search continue?",
+      options: [
+        "Left half",
+        "Right half",
+        "Entire array",
+        "It stops",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "The algorithm recursively searches the left half of the array.",
+    },
+    {
+      question: "What is the worst-case time complexity of Recursive Binary Search?",
+      options: [
+        "O(N)",
+        "O(log N)",
+        "O(N²)",
+        "O(1)",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Each recursive call halves the search space, giving O(log N).",
+    },
+    {
+      question: "What happens when low becomes greater than high?",
+      options: [
+        "The element is found",
+        "The search continues",
+        "The element is not present",
+        "The array is sorted",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "When low > high, there are no elements left to search.",
+    },
+    {
+      question: "Which recursive call is made when the target is greater than the middle element?",
+      options: [
+        "binarySearch(low, mid - 1)",
+        "binarySearch(mid + 1, high)",
+        "binarySearch(low, high)",
+        "binarySearch(mid, high)",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The search continues in the right half.",
+    },
+    {
+      question: "What is the space complexity of Recursive Binary Search?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N²)",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The recursion depth is logarithmic, so stack space is O(log N).",
+    },
+    {
+      question: "Which technique does Recursive Binary Search use?",
+      options: [
+        "Greedy",
+        "Divide and Conquer",
+        "Dynamic Programming",
+        "Backtracking",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Binary Search repeatedly divides the search space into halves.",
+    },
+    {
+      question: "How many recursive calls are made in each recursive step?",
+      options: [
+        "One",
+        "Two",
+        "Three",
+        "Four",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Only one recursive call is made depending on the comparison result.",
+    },
+    {
+      question: "Why is Recursive Binary Search faster than Linear Search?",
+      options: [
+        "It checks every element",
+        "It halves the search space every step",
+        "It uses two arrays",
+        "It sorts automatically",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Binary Search eliminates half of the remaining elements after each comparison.",
+    },
+    {
+  question: "What is the purpose of calculating the middle index in Recursive Binary Search?",
+  options: [
+    "To divide the search space into two halves",
+    "To sort the array",
+    "To find the largest element",
+    "To reverse the array"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "The middle index divides the array into two halves so that one half can be discarded after each comparison."
+},
+{
+  question: "What value is typically returned if the target element is not found?",
+  options: [
+    "-1",
+    "0",
+    "1",
+    "The last index"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Most Recursive Binary Search implementations return -1 to indicate that the target element does not exist in the array."
+},
+{
+  question: "Which statement correctly updates the search range when searching the left half?",
+  options: [
+    "high = mid - 1",
+    "low = mid + 1",
+    "low = mid",
+    "high = mid + 1"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "When the target is smaller than the middle element, the search continues in the left half by updating high to mid - 1."
+},
+{
+  question: "Approximately how many comparisons are needed to search an array of 32 elements in the worst case?",
+  options: [
+    "5",
+    "16",
+    "32",
+    "64"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Since log₂(32) = 5, Binary Search requires at most about 5 comparisons."
+},
+{
+  question: "Why is Recursive Binary Search considered efficient for large datasets?",
+  options: [
+    "Because it reduces the search space by half after each comparison",
+    "Because it checks every element one by one",
+    "Because it always finds the element in one comparison",
+    "Because it sorts the array during the search"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "By eliminating half of the remaining elements after every comparison, Recursive Binary Search achieves O(log N) time complexity."
+}
+  ];
+
+  return (
+    <QuizEngine
+      title="Recursive Binary Search Quiz"
+      questions={questions}
+    />
+  );
+};
+
+export default RecursiveBinarySearchQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/factorial/AlgorithmClient.jsx b/src/app/visualizer/recursion/factorial/AlgorithmClient.jsx
new file mode 100644
index 000000000..8ccd43447
--- /dev/null
+++ b/src/app/visualizer/recursion/factorial/AlgorithmClient.jsx
@@ -0,0 +1,36 @@
+import FactorialAnimation from "@/app/visualizer/recursion/factorial/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/recursion/factorial/codeBlock";
+import Quiz from "@/app/visualizer/recursion/factorial/quiz";
+import Content from "@/app/visualizer/recursion/factorial/content";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Recursion", "Functional & Parameterized Recursion")}
+      title="Functional & Parameterized Recursion"
+      headerDescription="Visualize how the Factorial algorithm calls itself, pushes frames to the call stack, reaches the base case, and propagates return values back up."
+      headerActions={<ArticleActions />}
+      animation={<FactorialAnimation />}
+      content={<Content />}
+      code={<Code />}
+      quiz={<Quiz />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[
+            { text: "Sum of First N Numbers", url: "/visualizer/recursion/sum-of-n" },
+            { text: "Fibonacci (Tree Recursion)", url: "/visualizer/recursion/fibonacci" },
+            { text: "Stack operations", url: "/visualizer/stack/push-pop" }
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/recursion/factorial/animation.jsx b/src/app/visualizer/recursion/factorial/animation.jsx
new file mode 100644
index 000000000..2fe11372a
--- /dev/null
+++ b/src/app/visualizer/recursion/factorial/animation.jsx
@@ -0,0 +1,240 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import ResetButton from "@/app/components/ui/resetButton";
+import GoButton from "@/app/components/ui/goButton";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+import { generateFactorialFrames } from "@/features/algorithms/recursion/factorialLogic";
+
+const codeLines = [
+  { line: 1, code: "function fact(n) {" },
+  { line: 2, code: "  if (n <= 1) {" },
+  { line: 3, code: "    return 1;" },
+  { line: 4, code: "  } else {" },
+  { line: 5, code: "    return n * fact(n - 1);" },
+  { line: 6, code: "  }" },
+  { line: 7, code: "}" },
+];
+
+export default function FactorialAnimation() {
+  const [nVal, setNVal] = useState("5");
+  const [isVisualizing, setIsVisualizing] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const frames = useMemo(() => {
+    if (!isVisualizing) return [];
+    const n = parseInt(nVal, 10);
+    if (isNaN(n) || n < 0 || n > 12) return [];
+    return Array.from(generateFactorialFrames(n));
+  }, [nVal, isVisualizing]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  useVisualizerReset(() => {
+    setNVal("5");
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  });
+
+  const handleGo = (e) => {
+    e.preventDefault();
+    const n = parseInt(nVal, 10);
+    if (isNaN(n) || n < 0) {
+      setErrorMsg("Please enter a valid positive integer.");
+      return;
+    }
+    if (n > 12) {
+      setErrorMsg("Please enter a number <= 12 to prevent excessive recursion.");
+      return;
+    }
+    setErrorMsg("");
+    setIsVisualizing(true);
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      engine.play();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const activeFrameData = frames.length > 0 && engine.currentStep >= 0 
+    ? frames[engine.currentStep] 
+    : {
+        stack: [],
+        activeLine: 0,
+        description: "Click Visualize Go! to watch the recursion unfold.",
+      };
+
+  const activeStack = activeFrameData.stack || [];
+  const activeLine = activeFrameData.activeLine;
+
+  const stackColors = {
+    calling: "bg-[#e0f2fe] dark:bg-sky-950/40 border-sky-400 dark:border-sky-700 text-sky-800 dark:text-sky-200",
+    checking_base: "bg-[#fef3c7] dark:bg-amber-950/40 border-amber-400 dark:border-amber-700 text-amber-800 dark:text-amber-200",
+    base_case: "bg-[#dcfce7] dark:bg-emerald-950/40 border-emerald-400 dark:border-emerald-700 text-emerald-800 dark:text-emerald-200",
+    waiting: "bg-orange-50 dark:bg-orange-950/30 border-orange-300 dark:border-orange-800 text-orange-800 dark:text-orange-200 opacity-60",
+    calculating: "bg-[#fae8ff] dark:bg-purple-950/30 border-purple-400 dark:border-purple-800 text-purple-700 dark:text-purple-300",
+    returning: "bg-gray-150 dark:bg-zinc-800 border-zinc-400 dark:border-zinc-700 text-zinc-850 dark:text-zinc-300",
+  };
+
+  return (
+    <main className="container mx-auto">
+      {/* Configuration Header */}
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8"
+      >
+        <div className="grid gap-4 sm:grid-cols-12 items-end">
+          <div className="sm:col-span-9">
+            <label className="block text-gray-700 dark:text-gray-300 mb-2 font-medium" htmlFor="nInput">
+              Factorial (n!) - Enter n (Max 12)
+            </label>
+            <input
+              type="number"
+              id="nInput"
+              value={nVal}
+              onChange={(e) => {
+                setNVal(e.target.value);
+                handleReset();
+              }}
+              min="0"
+              max="12"
+              className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#0d9488] focus:outline-none focus:ring-2 focus:ring-[#0d9488]/30 transition duration-300"
+              placeholder="e.g. 5"
+              disabled={isVisualizing}
+            />
+          </div>
+
+          <div className="sm:col-span-3 flex gap-2 justify-end">
+            <GoButton onClick={handleGo} isAnimating={isVisualizing} disabled={isVisualizing} />
+            <ResetButton onReset={handleReset} isAnimating={isVisualizing} />
+          </div>
+        </div>
+
+        {errorMsg && <p className="text-red-500 dark:text-red-400 text-xs font-semibold mt-2">{errorMsg}</p>}
+
+        {isVisualizing && frames.length > 0 && (
+          <div className="mt-4">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </form>
+
+      {/* Narrative Explanation Block */}
+      <div className="max-w-4xl mx-auto mb-8 p-4 rounded-xl border border-teal-100 bg-teal-50/40 dark:border-teal-900/30 dark:bg-teal-950/10 text-teal-800 dark:text-teal-200">
+        <p className="text-center font-medium text-sm leading-relaxed">
+          {activeFrameData.description}
+        </p>
+      </div>
+
+      {/* Visual Workspace Grid */}
+      <div className="max-w-4xl mx-auto grid gap-6 md:grid-cols-12 mb-8">
+        {/* Left Side: Call Stack */}
+        <div className="md:col-span-6 rounded-xl bg-white dark:bg-[#1a1a1a] p-5 shadow border border-gray-200 dark:border-zinc-800">
+          <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider text-center">
+            Active Call Stack
+          </h3>
+          {activeStack.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed border-gray-200 dark:border-zinc-800 rounded-xl">
+              <p className="text-gray-400 dark:text-zinc-500 text-sm">Call Stack is Empty</p>
+            </div>
+          ) : (
+            <div className="flex flex-col-reverse gap-2 items-center justify-end h-[400px] overflow-y-auto p-4 border border-gray-100 dark:border-zinc-800 rounded-xl bg-gray-50/50 dark:bg-zinc-900/20">
+              {activeStack.map((frame, index) => {
+                const isTop = index === activeStack.length - 1;
+                const statusClass = stackColors[frame.status] || stackColors.returning;
+
+                return (
+                  <div
+                    key={frame.id}
+                    className={`w-full max-w-[340px] p-3 rounded-lg border flex flex-col transition-all duration-300 ${statusClass} ${
+                      isTop ? "ring-2 ring-[#a435f0] ring-offset-2 dark:ring-offset-zinc-950 font-semibold shadow-md" : "scale-[0.98]"
+                    }`}
+                  >
+                    <div className="flex justify-between w-full font-mono text-xs mb-1">
+                      <span>fact({frame.n})</span>
+                      <span className="capitalize text-[10px] tracking-wide font-bold">{frame.status.replace("_", " ")}</span>
+                    </div>
+                    {frame.subResult !== undefined && (
+                       <div className="text-[10px] mt-1 border-t border-black/10 pt-1">
+                           subResult = {frame.subResult}
+                       </div>
+                    )}
+                    {frame.retVal !== null && (
+                       <div className="text-xs font-bold mt-1 border-t border-black/10 pt-1">
+                           Returns: {frame.retVal}
+                       </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Right Side: Code Block Trace */}
+        <div className="md:col-span-6 flex flex-col">
+          <div className="w-full border border-gray-200 dark:border-zinc-800 rounded-xl overflow-hidden bg-zinc-950 font-mono text-xs shadow-inner h-full flex flex-col min-h-[400px]">
+            <div className="flex items-center justify-between px-4 py-2 bg-zinc-900 border-b border-zinc-800">
+              <span className="text-zinc-400 font-semibold">Active Code Trace</span>
+            </div>
+            <div className="p-4 text-zinc-300 leading-relaxed flex-1">
+              {codeLines.map((ln) => {
+                // Line 5 mapping because logic returns line 4 but we want line 5 for return n*fact(n-1)
+                const isActive = (ln.line === activeLine) || (ln.line === 5 && activeLine === 4);
+                return (
+                  <div
+                    key={ln.line}
+                    className={`flex gap-4 px-2 py-1 rounded transition-colors duration-200 ${
+                      isActive ? "bg-[#a435f0]/20 border-l-4 border-[#a435f0] text-white font-bold" : "border-l-4 border-transparent"
+                    }`}
+                  >
+                    <span className="text-zinc-600 select-none w-4 text-right">{ln.line}</span>
+                    <span className="whitespace-pre">{ln.code}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/app/visualizer/recursion/factorial/codeBlock.jsx b/src/app/visualizer/recursion/factorial/codeBlock.jsx
new file mode 100644
index 000000000..a94832671
--- /dev/null
+++ b/src/app/visualizer/recursion/factorial/codeBlock.jsx
@@ -0,0 +1,92 @@
+"use client";
+import React from "react";
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const factorialCode = {
+  javascript: `// Factorial in JavaScript
+function factorial(n) {
+  if (n <= 1) {
+    return 1; // Base case
+  }
+  return n * factorial(n - 1); // Recursive step
+}
+
+// Example call:
+const result = factorial(5); // Returns 120
+console.log(result);`,
+
+  python: `# Factorial in Python
+def factorial(n):
+    if n <= 1:
+        return 1  # Base case
+    return n * factorial(n - 1)  # Recursive step
+
+# Example call:
+result = factorial(5) # Returns 120
+print(result)`,
+
+  java: `// Factorial in Java
+public class Factorial {
+    public static int factorial(int n) {
+        if (n <= 1) {
+            return 1; // Base case
+        }
+        return n * factorial(n - 1); // Recursive step
+    }
+
+    public static void main(String[] args) {
+        int result = factorial(5); // Returns 120
+        System.out.println(result);
+    }
+}`,
+
+  c: `// Factorial in C
+#include <stdio.h>
+
+int factorial(int n) {
+    if (n <= 1) {
+        return 1; // Base case
+    }
+    return n * factorial(n - 1); // Recursive step
+}
+
+int main() {
+    int result = factorial(5); // Returns 120
+    printf("%d\\n", result);
+    return 0;
+}`,
+
+  cpp: `// Factorial in C++
+#include <iostream>
+
+int factorial(int n) {
+    if (n <= 1) {
+        return 1; // Base case
+    }
+    return n * factorial(n - 1); // Recursive step
+}
+
+int main() {
+    int result = factorial(5); // Returns 120
+    std::cout << result << std::endl;
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: "factorial.js",
+  python: "factorial.py",
+  java: "Factorial.java",
+  c: "factorial.c",
+  cpp: "factorial.cpp",
+};
+
+const FactorialCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={factorialCode}
+    fileNames={fileNames}
+  />
+);
+
+export default FactorialCode;
diff --git a/src/app/visualizer/recursion/factorial/content.jsx b/src/app/visualizer/recursion/factorial/content.jsx
new file mode 100644
index 000000000..abc95d831
--- /dev/null
+++ b/src/app/visualizer/recursion/factorial/content.jsx
@@ -0,0 +1,75 @@
+"use client";
+import React from "react";
+
+const Content = () => {
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8 shadow-sm">
+        {/* What is Factorial */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            What is Factorial?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <p className="leading-relaxed">
+              The factorial of a non-negative integer $N$ (denoted as $N!$) is the product of all positive integers less than or equal to $N$.
+            </p>
+            <p className="mt-2 font-mono bg-gray-50 dark:bg-zinc-900 p-3 rounded-lg border border-gray-150 dark:border-zinc-800 text-center text-lg">
+              N! = N * (N - 1) * (N - 2) * ... * 1
+            </p>
+            <p className="mt-4 leading-relaxed">
+              Factorial naturally lends itself to recursion because it can be defined in terms of a smaller sub-problem:
+            </p>
+            <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              <li><strong>Base Case:</strong> $1! = 1$ and $0! = 1$. The recursion stops here.</li>
+              <li><strong>Recursive Case:</strong> $N! = N \times (N-1)!$. The function calls itself with $N-1$.</li>
+            </ul>
+          </div>
+        </section>
+
+        {/* Step-by-Step Call Trace */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Trace of fact(3)
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <p className="leading-relaxed">
+              When we call <code>fact(3)</code>, the execution builds up stack frames and then resolves back down:
+            </p>
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400 mt-2">
+              <li className="pl-2"><code>fact(3)</code> is called. Since $3 &gt; 1$, it spawns <code>fact(2)</code> and waits.</li>
+              <li className="pl-2"><code>fact(2)</code> is called. Since $2 &gt; 1$, it spawns <code>fact(1)</code> and waits.</li>
+              <li className="pl-2"><code>fact(1)</code> is called. Since $1 \le 1$, the base case is met. It returns <strong>1</strong>.</li>
+              <li className="pl-2"><code>fact(2)</code> receives 1, calculates $2 \times 1 = 2$, and returns <strong>2</strong>.</li>
+              <li className="pl-2"><code>fact(3)</code> receives 2, calculates $3 \times 2 = 6$, and returns <strong>6</strong>.</li>
+            </ol>
+          </div>
+        </section>
+
+        {/* Complexity Analysis */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-3">
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Time Complexity: O(N)</span>
+              <br />
+              The function calls itself $N$ times, performing a constant amount of work (comparison and multiplication) in each call.
+            </p>
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Space Complexity: O(N)</span>
+              <br />
+              Since it pushes $N$ stack frames onto the Call Stack before popping them during the return phase, it requires $O(N)$ auxiliary stack memory.
+            </p>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/recursion/factorial/quiz.jsx b/src/app/visualizer/recursion/factorial/quiz.jsx
new file mode 100644
index 000000000..99dc257eb
--- /dev/null
+++ b/src/app/visualizer/recursion/factorial/quiz.jsx
@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const FactorialQuiz = () => {
+  const questions = [
+    {
+      question: "In the recursive call of fact(5), what is the maximum call stack depth?",
+      options: [
+        "1",
+        "3",
+        "5",
+        "10"
+      ],
+      correctAnswer: 2,
+      explanation: "For fact(5), the stack will push fact(5), fact(4), fact(3), fact(2), and fact(1) in a linear sequence, reaching a maximum height of 5 frames before popping."
+    },
+    {
+      question: "Which of the following describes the base case for the factorial recursion algorithm?",
+      options: [
+        "n == 0 or n == 1",
+        "n < 0",
+        "n == 10",
+        "Any negative integer"
+      ],
+      correctAnswer: 0,
+      explanation: "By mathematical definition, 0! = 1 and 1! = 1, which form the base cases that terminate the recursion."
+    },
+    {
+      question: "What is the time complexity of the recursive factorial algorithm?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N²)"
+      ],
+      correctAnswer: 2,
+      explanation: "Since the function runs exactly N times to calculate fact(N), the time complexity is linear, O(N)."
+    },
+    {
+      question: "What would happen if we call fact(5) but forget to check n <= 1 (no base case)?",
+      options: [
+        "The function returns 0",
+        "The compiler will fail to compile the code",
+        "The call stack grows infinitely until a Stack Overflow error occurs",
+        "It will calculate the factorial using iteration automatically"
+      ],
+      correctAnswer: 2,
+      explanation: "Without a base case, recursion will continue indefinitely (fact(-1), fact(-2), etc.) until call stack memory is exhausted, throwing a Stack Overflow error."
+    },
+    {
+      question: "What is the auxiliary space complexity of recursive factorial?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N²)"
+      ],
+      correctAnswer: 2,
+      explanation: "Because there are N concurrent stack frames allocated in the call stack during execution, the space complexity is O(N)."
+    }
+  ];
+
+  return <QuizEngine title="Factorial Recursion Quiz" questions={questions} />;
+};
+
+export default FactorialQuiz;
diff --git a/src/app/visualizer/recursion/fibonacci/AlgorithmClient.jsx b/src/app/visualizer/recursion/fibonacci/AlgorithmClient.jsx
new file mode 100644
index 000000000..e5ff8021b
--- /dev/null
+++ b/src/app/visualizer/recursion/fibonacci/AlgorithmClient.jsx
@@ -0,0 +1,36 @@
+import FibonacciAnimation from "@/app/visualizer/recursion/fibonacci/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/recursion/fibonacci/codeBlock";
+import Quiz from "@/app/visualizer/recursion/fibonacci/quiz";
+import Content from "@/app/visualizer/recursion/fibonacci/content";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Recursion", "Multiple Recursive Calls")}
+      title="Multiple Recursive Calls"
+      headerDescription="Visualize how Fibonacci uses tree recursion (calling itself twice per step), generating duplicate subproblem calculations and pushing multiple stack frames."
+      headerActions={<ArticleActions />}
+      animation={<FibonacciAnimation />}
+      content={<Content />}
+      code={<Code />}
+      quiz={<Quiz />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[
+            { text: "Factorial (Linear Recursion)", url: "/visualizer/recursion/factorial" },
+            { text: "Sum of First N Numbers", url: "/visualizer/recursion/sum-of-n" },
+            { text: "Stack operations", url: "/visualizer/stack/push-pop" }
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/recursion/fibonacci/animation.jsx b/src/app/visualizer/recursion/fibonacci/animation.jsx
new file mode 100644
index 000000000..f99ade9d9
--- /dev/null
+++ b/src/app/visualizer/recursion/fibonacci/animation.jsx
@@ -0,0 +1,369 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import ResetButton from "@/app/components/ui/resetButton";
+import GoButton from "@/app/components/ui/goButton";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+import { generateFibonacciFrames } from "@/features/algorithms/recursion/fibonacciLogic";
+
+const getCoords = (path, n) => {
+  const coordsMap = {
+    1: {
+      root: { x: 200, y: 40 },
+    },
+    2: {
+      root: { x: 200, y: 40 },
+      "root-L": { x: 100, y: 120 },
+      "root-R": { x: 300, y: 120 },
+    },
+    3: {
+      root: { x: 200, y: 40 },
+      "root-L": { x: 110, y: 110 },
+      "root-L-L": { x: 60, y: 180 },
+      "root-L-R": { x: 160, y: 180 },
+      "root-R": { x: 290, y: 110 },
+    },
+    4: {
+      root: { x: 200, y: 35 },
+      "root-L": { x: 110, y: 95 },
+      "root-L-L": { x: 60, y: 155 },
+      "root-L-L-L": { x: 30, y: 215 },
+      "root-L-L-R": { x: 90, y: 215 },
+      "root-L-R": { x: 160, y: 155 },
+      "root-R": { x: 290, y: 95 },
+      "root-R-L": { x: 240, y: 155 },
+      "root-R-R": { x: 340, y: 155 },
+    },
+  };
+  return coordsMap[n]?.[path] || { x: 200, y: 35 };
+};
+
+const codeLines = [
+  { line: 1, code: "function fib(n) {" },
+  { line: 2, code: "  if (n <= 1) return n;" },
+  { line: 3, code: "  return fib(n - 1) + fib(n - 2);" },
+  { line: 4, code: "}" },
+];
+
+const FibonacciAnimation = () => {
+  const [nVal, setNVal] = useState("3");
+  const [isVisualizing, setIsVisualizing] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const frames = useMemo(() => {
+    if (!isVisualizing) return [];
+    const n = parseInt(nVal, 10);
+    if (isNaN(n) || n < 1 || n > 4) return [];
+    return Array.from(generateFibonacciFrames(n));
+  }, [nVal, isVisualizing]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  useVisualizerReset(() => {
+    setNVal("3");
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  });
+
+  const handleGo = (e) => {
+    e.preventDefault();
+    const n = parseInt(nVal, 10);
+    if (isNaN(n) || n < 1) {
+      setErrorMsg("Please enter an integer >= 1.");
+      return;
+    }
+    if (n > 4) {
+      setErrorMsg("Please select N <= 4 to keep the recursion tree legible on the canvas.");
+      return;
+    }
+    setErrorMsg("");
+    setIsVisualizing(true);
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      engine.play();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const activeFrameData = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        stack: [],
+        treeNodes: [],
+        activeLine: 0,
+        description: "Enter N (between 1 and 4) and click Visualize Go!",
+      };
+
+  const activeStack = activeFrameData.stack || [];
+  const activeTreeNodes = activeFrameData.treeNodes || [];
+  const activeLine = activeFrameData.activeLine;
+
+  const stackColors = {
+    calling: "bg-[#e0f2fe] dark:bg-sky-950/40 border-sky-400 dark:border-sky-700 text-sky-800 dark:text-sky-200",
+    checking_base: "bg-[#fef3c7] dark:bg-amber-950/40 border-amber-400 dark:border-amber-700 text-amber-800 dark:text-amber-200",
+    base_case: "bg-[#dcfce7] dark:bg-emerald-950/40 border-emerald-400 dark:border-emerald-700 text-emerald-800 dark:text-emerald-200 shadow-[0_0_15px_rgba(34,197,94,0.3)]",
+    waiting: "bg-gray-100 dark:bg-zinc-800 border-gray-300 dark:border-zinc-700 text-gray-500 dark:text-zinc-400",
+    waiting_L: "bg-[#fae8ff] dark:bg-purple-950/30 border-purple-400 dark:border-purple-800 text-purple-700 dark:text-purple-300",
+    waiting_R: "bg-[#f5e0ff] dark:bg-fuchsia-950/30 border-fuchsia-400 dark:border-fuchsia-800 text-fuchsia-700 dark:text-fuchsia-300",
+    calculating: "bg-[#ffedd5] dark:bg-orange-950/40 border-orange-400 dark:border-orange-700 text-orange-800 dark:text-orange-200",
+    returning: "bg-[#fee2e2] dark:bg-rose-950/40 border-rose-400 dark:border-rose-700 text-rose-800 dark:text-rose-200 shadow-[0_0_15px_rgba(239,68,68,0.2)]",
+  };
+
+  const treeNodeColors = {
+    pending: "fill-gray-100 stroke-gray-300 dark:fill-zinc-800 dark:stroke-zinc-700 text-gray-400 dark:text-zinc-500",
+    active: "fill-sky-100 stroke-sky-500 dark:fill-sky-950 dark:stroke-sky-400 text-sky-800 dark:text-sky-200 font-bold stroke-2",
+    base: "fill-emerald-100 stroke-emerald-500 dark:fill-emerald-950 dark:stroke-emerald-400 text-emerald-800 dark:text-emerald-200 font-bold stroke-2 shadow-[0_0_10px_rgba(16,185,129,0.3)]",
+    returned: "fill-teal-100 stroke-teal-500 dark:fill-teal-950 dark:stroke-teal-400 text-teal-800 dark:text-teal-200 font-bold",
+  };
+
+  return (
+    <main className="container mx-auto">
+      {/* Configuration Header */}
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8"
+      >
+        <div className="flex flex-col sm:flex-row items-end gap-4">
+          <div className="flex-1">
+            <label className="block text-gray-700 dark:text-gray-300 mb-2 font-medium" htmlFor="nVal">
+              Input Value (N)
+            </label>
+            <input
+              type="number"
+              id="nVal"
+              min="1"
+              max="4"
+              value={nVal}
+              onChange={(e) => {
+                setNVal(e.target.value);
+                handleReset();
+              }}
+              className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#0d9488] focus:outline-none focus:ring-2 focus:ring-[#0d9488]/30 transition duration-300"
+              placeholder="e.g. 3"
+              disabled={isVisualizing}
+            />
+          </div>
+
+          <div className="flex gap-2">
+            <GoButton onClick={handleGo} isAnimating={isVisualizing} disabled={isVisualizing} />
+            <ResetButton onReset={handleReset} isAnimating={isVisualizing} />
+          </div>
+        </div>
+
+        {errorMsg && <p className="text-red-500 dark:text-red-400 text-xs font-semibold mt-2">{errorMsg}</p>}
+
+        {isVisualizing && frames.length > 0 && (
+          <div className="mt-4">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </form>
+
+      {/* Narrative Explanation Block */}
+      <div className="max-w-4xl mx-auto mb-8 p-4 rounded-xl border border-teal-100 bg-teal-50/40 dark:border-teal-900/30 dark:bg-teal-950/10 text-teal-800 dark:text-teal-200">
+        <p className="text-center font-medium text-sm leading-relaxed">
+          {activeFrameData.description}
+        </p>
+      </div>
+
+      {/* Visual Workspace */}
+      <div className="max-w-4xl mx-auto grid gap-6 md:grid-cols-12 mb-8">
+        {/* Left Side: Call Stack */}
+        <div className="md:col-span-4 rounded-xl bg-white dark:bg-[#1a1a1a] p-5 shadow border border-gray-200 dark:border-zinc-800">
+          <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider text-center">
+            Active Call Stack
+          </h3>
+          {activeStack.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-80 border-2 border-dashed border-gray-200 dark:border-zinc-800 rounded-xl">
+              <p className="text-gray-400 dark:text-zinc-500 text-sm">Call Stack is Empty</p>
+            </div>
+          ) : (
+            <div className="flex flex-col-reverse gap-2 items-center justify-end h-[340px] overflow-y-auto p-4 border border-gray-100 dark:border-zinc-800 rounded-xl bg-gray-50/50 dark:bg-zinc-900/20">
+              {activeStack.map((frame, index) => {
+                const isTop = index === activeStack.length - 1;
+                const statusClass = stackColors[frame.status] || stackColors.waiting;
+
+                return (
+                  <div
+                    key={frame.id}
+                    className={`w-full max-w-[280px] p-2.5 rounded-lg border flex flex-col items-center transition-all duration-300 ${statusClass} ${
+                      isTop ? "ring-2 ring-[#a435f0] dark:ring-[#a435f0] ring-offset-2 dark:ring-offset-zinc-950 shadow-md" : "scale-[0.98]"
+                    }`}
+                  >
+                    <div className="flex justify-between w-full font-mono text-[10px] font-semibold">
+                      <span>fib(n = {frame.n})</span>
+                      <span className="capitalize text-[9px]">{frame.status.replace("_", " ")}</span>
+                    </div>
+                    <div className="mt-1.5 text-[10px] w-full text-center">
+                      {frame.leftVal !== undefined && (
+                        <span className="block text-[9px] text-gray-500 dark:text-zinc-400">
+                          leftVal = {frame.leftVal}
+                        </span>
+                      )}
+                      {frame.rightVal !== undefined && (
+                        <span className="block text-[9px] text-gray-500 dark:text-zinc-400">
+                          rightVal = {frame.rightVal}
+                        </span>
+                      )}
+                      {frame.retVal !== null && (
+                        <span className="font-bold text-[#10b981] dark:text-[#34d399] block">
+                          returns {frame.retVal}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Right Side: Tree and Code Trace */}
+        <div className="md:col-span-8 flex flex-col gap-6">
+          {/* Tree panel */}
+          <div className="w-full border border-gray-100 dark:border-zinc-800 rounded-xl bg-white dark:bg-[#1a1a1a] p-5 shadow flex flex-col items-center">
+            <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-2 uppercase tracking-wider text-center">
+              Recursion Tree
+            </h3>
+            <svg viewBox="0 0 400 250" className="w-full max-w-[400px] h-[220px]">
+              {activeTreeNodes.map((node) => {
+                if (!node.parentId) return null;
+                const parent = activeTreeNodes.find((n) => n.id === node.parentId);
+                if (!parent) return null;
+                const childCoords = getCoords(node.id, parseInt(nVal, 10));
+                const parentCoords = getCoords(node.parentId, parseInt(nVal, 10));
+
+                let edgeColor = "#e4e4e7";
+                let strokeWidth = 1.5;
+                if (node.status === "active" || node.status === "returned" || node.status === "base") {
+                  edgeColor = "#0d9488";
+                  strokeWidth = 2;
+                }
+
+                return (
+                  <line
+                    key={`edge-${node.id}`}
+                    x1={parentCoords.x}
+                    y1={parentCoords.y}
+                    x2={childCoords.x}
+                    y2={childCoords.y}
+                    stroke={edgeColor}
+                    strokeWidth={strokeWidth}
+                    className="transition-colors duration-300"
+                  />
+                );
+              })}
+
+              {activeTreeNodes.map((node) => {
+                const coords = getCoords(node.id, parseInt(nVal, 10));
+                const nodeClass = treeNodeColors[node.status] || treeNodeColors.pending;
+
+                return (
+                  <g key={`node-${node.id}`}>
+                    <circle
+                      cx={coords.x}
+                      cy={coords.y}
+                      r="15"
+                      className={`${nodeClass} transition-colors duration-300`}
+                    />
+                    <text
+                      x={coords.x}
+                      y={coords.y + 3}
+                      textAnchor="middle"
+                      className="text-[9px] font-mono font-bold select-none fill-current"
+                    >
+                      {node.val}
+                    </text>
+                    {node.result !== null && (
+                      <g>
+                        <rect
+                          x={coords.x + 8}
+                          y={coords.y - 18}
+                          width="16"
+                          height="12"
+                          rx="3"
+                          className="fill-[#a435f0] text-white"
+                        />
+                        <text
+                          x={coords.x + 16}
+                          y={coords.y - 10}
+                          textAnchor="middle"
+                          className="text-[8px] font-bold fill-white"
+                        >
+                          {node.result}
+                        </text>
+                      </g>
+                    )}
+                  </g>
+                );
+              })}
+            </svg>
+          </div>
+
+          {/* Code Trace panel */}
+          <div className="w-full border border-gray-200 dark:border-zinc-800 rounded-xl overflow-hidden bg-zinc-950 font-mono text-xs shadow-inner">
+            <div className="flex items-center justify-between px-4 py-2 bg-zinc-900 border-b border-zinc-800">
+              <span className="text-zinc-400 font-semibold">Active Code Trace</span>
+            </div>
+            <div className="p-4 text-zinc-300 leading-relaxed">
+              {codeLines.map((ln) => {
+                const isActive = ln.line === activeLine;
+                return (
+                  <div
+                    key={ln.line}
+                    className={`flex gap-4 px-2 py-0.5 rounded transition-colors duration-200 ${
+                      isActive ? "bg-[#a435f0]/20 border-l-4 border-[#a435f0] text-white font-bold" : "border-l-4 border-transparent"
+                    }`}
+                  >
+                    <span className="text-zinc-600 select-none w-4 text-right">{ln.line}</span>
+                    <span className="whitespace-pre">{ln.code}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default FibonacciAnimation;
diff --git a/src/app/visualizer/recursion/fibonacci/codeBlock.jsx b/src/app/visualizer/recursion/fibonacci/codeBlock.jsx
new file mode 100644
index 000000000..9c12d3d6e
--- /dev/null
+++ b/src/app/visualizer/recursion/fibonacci/codeBlock.jsx
@@ -0,0 +1,97 @@
+"use client";
+import React from "react";
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const fibonacciCode = {
+  javascript: `// Fibonacci in JavaScript
+function fibonacci(n) {
+  if (n <= 1) {
+    return n; // Base case: fib(0) = 0, fib(1) = 1
+  }
+  // Recursive case: sum of previous two terms
+  return fibonacci(n - 1) + fibonacci(n - 2);
+}
+
+// Example call:
+const result = fibonacci(6); // Returns 8 (0, 1, 1, 2, 3, 5, 8)
+console.log(result);`,
+
+  python: `# Fibonacci in Python
+def fibonacci(n):
+    if n <= 1:
+        return n  # Base case
+    # Recursive case
+    return fibonacci(n - 1) + fibonacci(n - 2)
+
+# Example call:
+result = fibonacci(6) # Returns 8
+print(result)`,
+
+  java: `// Fibonacci in Java
+public class Fibonacci {
+    public static int fibonacci(int n) {
+        if (n <= 1) {
+            return n; // Base case
+        }
+        // Recursive case
+        return fibonacci(n - 1) + fibonacci(n - 2);
+    }
+
+    public static void main(String[] args) {
+        int result = fibonacci(6); // Returns 8
+        System.out.println(result);
+    }
+}`,
+
+  c: `// Fibonacci in C
+#include <stdio.h>
+
+int fibonacci(int n) {
+    if (n <= 1) {
+        return n; // Base case
+    }
+    // Recursive case
+    return fibonacci(n - 1) + fibonacci(n - 2);
+}
+
+int main() {
+    int result = fibonacci(6); // Returns 8
+    printf("%d\\n", result);
+    return 0;
+}`,
+
+  cpp: `// Fibonacci in C++
+#include <iostream>
+
+int fibonacci(int n) {
+    if (n <= 1) {
+        return n; // Base case
+    }
+    // Recursive case
+    return fibonacci(n - 1) + fibonacci(n - 2);
+}
+
+int main() {
+    int result = fibonacci(6); // Returns 8
+    std::cout << result << std::endl;
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: "fibonacci.js",
+  python: "fibonacci.py",
+  java: "Fibonacci.java",
+  c: "fibonacci.c",
+  cpp: "fibonacci.cpp",
+};
+
+const FibonacciCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={fibonacciCode}
+    fileNames={fileNames}
+  />
+);
+
+export default FibonacciCode;
diff --git a/src/app/visualizer/recursion/fibonacci/content.jsx b/src/app/visualizer/recursion/fibonacci/content.jsx
new file mode 100644
index 000000000..85d013147
--- /dev/null
+++ b/src/app/visualizer/recursion/fibonacci/content.jsx
@@ -0,0 +1,78 @@
+"use client";
+import React from "react";
+
+const Content = () => {
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8 shadow-sm">
+        {/* Concept */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            What is Tree Recursion? (Fibonacci example)
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <p className="leading-relaxed">
+              In linear recursion (like Factorial), a function makes at most <strong>one</strong> recursive call per execution frame. In <strong>Tree Recursion</strong>, a function makes <strong>multiple</strong> recursive calls per frame. This branches out, forming a tree-like execution graph.
+            </p>
+            <p className="mt-4 leading-relaxed font-semibold">
+              The Fibonacci recurrence relation is:
+            </p>
+            <p className="mt-2 font-mono bg-gray-50 dark:bg-zinc-900 p-3 rounded-lg border border-gray-150 dark:border-zinc-800 text-center text-lg">
+              fib(N) = fib(N - 1) + fib(N - 2)
+            </p>
+            <p className="mt-4 leading-relaxed">
+              This triggers two recursive calls at each step, except for base cases:
+            </p>
+            <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              <li><strong>Base Cases:</strong> <code>fib(0) = 0</code> and <code>fib(1) = 1</code>.</li>
+              <li><strong>Recursive Case:</strong> <code>fib(n) = fib(n-1) + fib(n-2)</code>.</li>
+            </ul>
+          </div>
+        </section>
+
+        {/* Overlapping Subproblems */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-amber-500 mr-3 rounded-full"></span>
+            Overlapping Subproblems
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <p className="leading-relaxed">
+              If you inspect the recursion tree, you will notice that the same state is calculated multiple times. For example, to calculate <code>fib(4)</code>:
+            </p>
+            <ul className="mt-2 space-y-1 list-disc pl-5 marker:text-gray-400">
+              <li><code>fib(2)</code> is calculated <strong>2 times</strong>.</li>
+              <li><code>fib(1)</code> is calculated <strong>3 times</strong>.</li>
+            </ul>
+            <p className="mt-4 leading-relaxed">
+              As $N$ grows, the number of redundant computations grows exponentially. This can be optimized using <strong>Memoization</strong> (caching results) or <strong>Dynamic Programming</strong> (iterative solutions) to reduce time complexity from exponential to linear.
+            </p>
+          </div>
+        </section>
+
+        {/* Complexity Analysis */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-3">
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Time Complexity: O(2^N)</span>
+              <br />
+              Specifically, the number of operations is proportional to the Golden Ratio raised to $N$ power, approx. $1.618^N$, which is mathematically bounded by $O(2^N)$ representing exponential growth.
+            </p>
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Space Complexity: O(N)</span>
+              <br />
+              Even though the total number of calls is exponential, the Call Stack only holds active frames. The maximum stack depth is bounded by the height of the tree, which is linear, $O(N)$.
+            </p>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/recursion/fibonacci/quiz.jsx b/src/app/visualizer/recursion/fibonacci/quiz.jsx
new file mode 100644
index 000000000..5ea2200e0
--- /dev/null
+++ b/src/app/visualizer/recursion/fibonacci/quiz.jsx
@@ -0,0 +1,188 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const FibonacciQuiz = () => {
+  const questions = [
+    {
+      question: "Why is the recursive implementation of Fibonacci called 'Tree Recursion'?",
+      options: [
+        "It stores values in a Binary Search Tree",
+        "The function calls itself twice per step, creating a branching tree-like execution structure",
+        "It only works on Tree data structures",
+        "It returns a tree-like nested list of numbers"
+      ],
+      correctAnswer: 1,
+      explanation: "Because the function makes multiple (specifically two) recursive calls inside the recursive step, the execution flow branches like a binary tree."
+    },
+    {
+      question: "For fib(4), how many times is the sub-problem fib(2) executed/called?",
+      options: [
+        "1",
+        "2",
+        "3",
+        "4"
+      ],
+      correctAnswer: 1,
+      explanation: "Tracing the tree: fib(4) calls fib(3) and fib(2). fib(3) calls fib(2) and fib(1). Thus, fib(2) is called twice: once as a direct child of fib(4), and once as a child of fib(3)."
+    },
+    {
+      question: "What is the primary drawback of the naive recursive Fibonacci algorithm?",
+      options: [
+        "It consumes too much disk storage",
+        "It performs a massive amount of redundant/duplicate calculations for the same states",
+        "It requires a graph layout library to run",
+        "It has a space complexity of O(2^N)"
+      ],
+      correctAnswer: 1,
+      explanation: "The lack of memoization or tracking calculated values causes the function to calculate the same sub-problems repeatedly, leading to poor performance."
+    },
+    {
+      question: "Although the time complexity of naive fib(N) is exponential, what is its space complexity (stack depth)?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(2^N)"
+      ],
+      correctAnswer: 2,
+      explanation: "The call stack only holds active frames on the current path from the root to a leaf node. Since the height of the recursion tree is N, the space complexity is linear, O(N)."
+    },
+    {
+      question: "Which optimization technique stores previously computed values of fib(x) to prevent redundant calls?",
+      options: [
+        "Memoization (caching)",
+        "De-escalation",
+        "Array flattening",
+        "LIFO frame clearing"
+      ],
+      correctAnswer: 0,
+      explanation: "Memoization caches the results of function calls so that when the same inputs occur again, the cached value can be returned instantly, optimizing time complexity to O(N)."
+    },
+    {
+  question: "What are the base cases of the Fibonacci recursive function?",
+  options: [
+    "n == 0 and n == 1",
+    "n == 1 and n == 2",
+    "n == 2 only",
+    "n == 0 only"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "The Fibonacci sequence starts with fib(0) = 0 and fib(1) = 1, which are the base cases."
+},
+{
+  question: "Which recursive formula is used to compute Fibonacci numbers?",
+  options: [
+    "fib(n) = fib(n - 1)",
+    "fib(n) = fib(n - 1) + fib(n - 2)",
+    "fib(n) = n × fib(n - 1)",
+    "fib(n) = fib(n / 2)"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Each Fibonacci number is the sum of the previous two Fibonacci numbers."
+},
+{
+  question: "Why does the recursion tree grow rapidly for larger values of n?",
+  options: [
+    "Each function call creates two more recursive calls",
+    "The compiler duplicates the function",
+    "The stack stores duplicate values",
+    "The array size doubles"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Every non-base call generates two recursive calls, causing exponential growth."
+},
+{
+  question: "What is the approximate time complexity of the naive recursive Fibonacci algorithm?",
+  options: [
+    "O(log N)",
+    "O(N)",
+    "O(2^N)",
+    "O(N²)"
+  ],
+  correctAnswer: 2,
+  explanation:
+    "The recursion tree grows exponentially because of repeated calculations."
+},
+{
+  question: "Which value is returned by fib(6)?",
+  options: [
+    "5",
+    "8",
+    "13",
+    "21"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "The sequence is 0, 1, 1, 2, 3, 5, 8. Therefore fib(6) = 8."
+},
+{
+  question: "Which traversal best represents recursive execution in Fibonacci?",
+  options: [
+    "Depth-First Search (DFS)",
+    "Breadth-First Search (BFS)",
+    "Binary Search",
+    "Linear Search"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Recursive calls are executed depth-first using the call stack."
+},
+{
+  question: "Why is memoization effective for Fibonacci recursion?",
+  options: [
+    "It reduces stack size to O(1)",
+    "It avoids recalculating the same Fibonacci values",
+    "It removes recursion completely",
+    "It increases recursion depth"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Memoization stores previously computed Fibonacci values, eliminating duplicate work."
+},
+{
+  question: "Which data structure is naturally used during recursive execution?",
+  options: [
+    "Queue",
+    "Stack",
+    "Heap",
+    "Linked List"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Recursive function calls are managed using the call stack."
+},
+{
+  question: "Which statement is TRUE about multiple recursive calls?",
+  options: [
+    "Only one recursive call is made",
+    "The function calls itself multiple times before returning",
+    "Recursion is replaced by loops",
+    "The function never reaches a base case"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Multiple recursive calls occur when a function invokes itself more than once in a single execution."
+},
+{
+  question: "Which algorithm is the classic example of multiple recursive calls?",
+  options: [
+    "Linear Search",
+    "Bubble Sort",
+    "Fibonacci Recursion",
+    "Insertion Sort"
+  ],
+  correctAnswer: 2,
+  explanation:
+    "The Fibonacci recursive algorithm is one of the most common examples of multiple recursive calls."
+},
+
+  ];
+
+  return <QuizEngine title="Fibonacci Recursion Quiz" questions={questions} />;
+};
+
+export default FibonacciQuiz;
diff --git a/src/app/visualizer/recursion/functional-parameterized/AlgorithmClient.jsx b/src/app/visualizer/recursion/functional-parameterized/AlgorithmClient.jsx
new file mode 100644
index 000000000..3eb053e22
--- /dev/null
+++ b/src/app/visualizer/recursion/functional-parameterized/AlgorithmClient.jsx
@@ -0,0 +1,7 @@
+import FunctionalParameterizedClient from "./FunctionalParameterizedClient";
+
+
+
+export default function Page() {
+  return <FunctionalParameterizedClient />;
+}
diff --git a/src/app/visualizer/recursion/functional-parameterized/FunctionalParameterizedClient.jsx b/src/app/visualizer/recursion/functional-parameterized/FunctionalParameterizedClient.jsx
new file mode 100644
index 000000000..998a6f7b1
--- /dev/null
+++ b/src/app/visualizer/recursion/functional-parameterized/FunctionalParameterizedClient.jsx
@@ -0,0 +1,109 @@
+"use client";
+import React, { useState } from "react";
+import SumOfNAnimation from "../sum-of-n/animation";
+import FactorialAnimation from "../factorial/animation";
+import ReverseArrayAnimation from "../reverse-array/animation";
+import PalindromeAnimation from "../palindrome/animation";
+
+import SumOfNCode from "../sum-of-n/codeBlock";
+import FactorialCode from "../factorial/codeBlock";
+import ReverseArrayCode from "../reverse-array/codeBlock";
+import PalindromeCode from "../palindrome/codeBlock";
+
+import SumOfNContent from "../sum-of-n/content";
+import FactorialContent from "../factorial/content";
+import ReverseArrayContent from "../reverse-array/content";
+import PalindromeContent from "../palindrome/content";
+
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import ExploreOther from "@/app/components/ui/exploreOther";
+
+export default function FunctionalParameterizedClient() {
+  const [problem, setProblem] = useState("sum-of-n");
+
+  const getProblemDetails = () => {
+    switch (problem) {
+      case "sum-of-n":
+        return {
+          title: "Sum of First N Numbers",
+          desc: "Visualize functional recursion calculating the sum of the first N integers (N + sum(N-1)).",
+          animation: <SumOfNAnimation />,
+          content: <SumOfNContent />,
+          code: <SumOfNCode />,
+        };
+      case "factorial":
+        return {
+          title: "Factorial of N",
+          desc: "Animate recursive call frames calculating N factorial (N * fact(N-1)) with LIFO resolution.",
+          animation: <FactorialAnimation />,
+          content: <FactorialContent />,
+          code: <FactorialCode />,
+        };
+      case "reverse-array":
+        return {
+          title: "Reverse an Array",
+          desc: "Watch how functional recursion swaps elements inwards using two pointers.",
+          animation: <ReverseArrayAnimation />,
+          content: <ReverseArrayContent />,
+          code: <ReverseArrayCode />,
+        };
+      case "palindrome":
+        return {
+          title: "String Palindrome Check",
+          desc: "Observe pointer comparisons working recursively from both ends of the string.",
+          animation: <PalindromeAnimation />,
+          content: <PalindromeContent />,
+          code: <PalindromeCode />,
+        };
+      default:
+        return {};
+    }
+  };
+
+  const details = getProblemDetails();
+
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Recursion", "Functional & Parameterized Recursion")}
+      title="Functional & Parameterized Recursion"
+      headerDescription={details.desc}
+      headerActions={
+        <div className="flex flex-wrap gap-2 p-1.5 bg-gray-100 dark:bg-zinc-900 rounded-xl border dark:border-zinc-800 shadow-inner justify-center max-w-2xl mx-auto">
+          {[
+            { id: "sum-of-n", label: "Sum of N" },
+            { id: "factorial", label: "Factorial" },
+            { id: "reverse-array", label: "Reverse Array" },
+            { id: "palindrome", label: "Palindrome Check" },
+          ].map((btn) => (
+            <button
+              key={btn.id}
+              onClick={() => setProblem(btn.id)}
+              className={`px-4 py-2 text-sm font-semibold rounded-lg transition-all ${
+                problem === btn.id
+                  ? "bg-white dark:bg-zinc-850 text-teal-600 dark:text-teal-400 shadow-md ring-1 ring-black/5"
+                  : "text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-white"
+              }`}
+            >
+              {btn.label}
+            </button>
+          ))}
+        </div>
+      }
+      animation={details.animation}
+      content={details.content}
+      code={details.code}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[
+            { text: "Basic Recursion", url: "/visualizer/recursion/basic-recursion" },
+            { text: "Multiple Recursive Calls", url: "/visualizer/recursion/multiple-calls" },
+            { text: "Backtracking", url: "/visualizer/recursion/backtracking" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/recursion/functional-parameterized/quiz/page.jsx b/src/app/visualizer/recursion/functional-parameterized/quiz/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/recursion/functional-parameterized/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/functional-parameterized/quiz/quiz.jsx b/src/app/visualizer/recursion/functional-parameterized/quiz/quiz.jsx
new file mode 100644
index 000000000..4d2fce83c
--- /dev/null
+++ b/src/app/visualizer/recursion/functional-parameterized/quiz/quiz.jsx
@@ -0,0 +1,198 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const FunctionalParameterizedQuiz = () => {
+  const questions = [
+    {
+      question: "What is the base case for calculating the sum of the first N numbers recursively?",
+      options: [
+        "n == 1",
+        "n <= 0",
+        "n == 2",
+        "n == -1",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The recursion stops when n <= 0, returning 0.",
+    },
+    {
+      question: "Which statement represents the recursive step in the Sum of N algorithm?",
+      options: [
+        "return 0;",
+        "return n + sum(n - 1);",
+        "return sum(n);",
+        "return n;",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The recursive call reduces the problem size by calling sum(n - 1).",
+    },
+    {
+      question: "What is the base case in the recursive factorial function?",
+      options: [
+        "n == 0",
+        "n == 2",
+        "n == 5",
+        "n == 10",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Factorial of 0 is defined as 1, making it the stopping condition.",
+    },
+    {
+      question: "Which expression correctly calculates factorial recursively?",
+      options: [
+        "n + factorial(n - 1)",
+        "factorial(n)",
+        "n * factorial(n - 1)",
+        "factorial(n + 1)",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Each recursive call multiplies the current value with factorial(n - 1).",
+    },
+    {
+      question: "What does factorial(5) return?",
+      options: [
+        "20",
+        "60",
+        "120",
+        "24",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "5 × 4 × 3 × 2 × 1 = 120.",
+    },
+    {
+      question: "When reversing an array recursively, which elements are swapped first?",
+      options: [
+        "Middle elements",
+        "Adjacent elements",
+        "First and last elements",
+        "Random elements",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "The recursion swaps the first and last elements before moving inward.",
+    },
+    {
+      question: "When should recursion stop while reversing an array?",
+      options: [
+        "When left index becomes greater than or equal to right index",
+        "After one swap",
+        "When left index is 0",
+        "Never",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "The recursion ends when the pointers meet or cross.",
+    },
+    {
+      question: "How many recursive calls are approximately required to reverse an array of size N?",
+      options: [
+        "N",
+        "N / 2",
+        "log N",
+        "1",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Each recursive call swaps two elements, so only about N/2 calls are needed.",
+    },
+    {
+      question: "While checking whether a string is a palindrome recursively, what is compared?",
+      options: [
+        "Adjacent characters",
+        "First and last characters",
+        "Only middle characters",
+        "ASCII values only",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Characters from both ends are compared and the pointers move inward.",
+    },
+    {
+      question: "When does the recursive palindrome algorithm stop?",
+      options: [
+        "When left >= right",
+        "When string length is even",
+        "After two comparisons",
+        "Never",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "If the pointers meet or cross, every previous comparison matched.",
+    },
+    {
+      question: "What happens if two compared characters do not match?",
+      options: [
+        "Continue recursion",
+        "Return true",
+        "Return false immediately",
+        "Swap characters",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "A mismatch proves the string is not a palindrome.",
+    },
+    {
+      question: "Functional recursion mainly returns:",
+      options: [
+        "A value",
+        "Nothing",
+        "Only arrays",
+        "Only strings",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Functional recursion solves the problem by returning a value from each recursive call.",
+    },
+    {
+      question: "Parameterized recursion mainly works by:",
+      options: [
+        "Passing accumulated values as parameters",
+        "Using loops only",
+        "Sorting arrays",
+        "Searching elements",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Parameterized recursion carries the answer through function parameters.",
+    },
+    {
+      question: "What is the time complexity of recursive factorial?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N²)",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Each recursive call processes one value until reaching the base case.",
+    },
+    {
+      question: "Which of the following is true for functional and parameterized recursion?",
+      options: [
+        "Both require a base case",
+        "Neither uses recursion",
+        "Only parameterized recursion needs a base case",
+        "Only functional recursion needs a base case",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Every recursive solution must include a base case to terminate recursion safely.",
+    }
+  ];
+
+  return (
+    <QuizEngine
+      title="Functional & Parameterized Recursion Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default FunctionalParameterizedQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/multiple-calls/AlgorithmClient.jsx b/src/app/visualizer/recursion/multiple-calls/AlgorithmClient.jsx
new file mode 100644
index 000000000..bea0d703b
--- /dev/null
+++ b/src/app/visualizer/recursion/multiple-calls/AlgorithmClient.jsx
@@ -0,0 +1,7 @@
+import MultipleCallsClient from "./MultipleCallsClient";
+
+
+
+export default function Page() {
+  return <MultipleCallsClient />;
+}
diff --git a/src/app/visualizer/recursion/multiple-calls/MultipleCallsClient.jsx b/src/app/visualizer/recursion/multiple-calls/MultipleCallsClient.jsx
new file mode 100644
index 000000000..c58e63f46
--- /dev/null
+++ b/src/app/visualizer/recursion/multiple-calls/MultipleCallsClient.jsx
@@ -0,0 +1,32 @@
+"use client";
+import React from "react";
+import FibonacciAnimation from "../fibonacci/animation";
+import Code from "../fibonacci/codeBlock";
+import Content from "../fibonacci/content";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function MultipleCallsClient() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Recursion", "Multiple Recursive Calls")}
+      title="Multiple Recursive Calls"
+      headerDescription="Visualize how Fibonacci uses multiple recursive calls (tree recursion), branching twice at each level and creating duplicate subproblems."
+      animation={<FibonacciAnimation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[
+            { text: "Functional & Parameterized", url: "/visualizer/recursion/functional-parameterized" },
+            { text: "Recursion on Subsequences", url: "/visualizer/recursion/subsequences" },
+            { text: "Backtracking", url: "/visualizer/recursion/backtracking" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/recursion/multiple-calls/quiz/page.jsx b/src/app/visualizer/recursion/multiple-calls/quiz/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/recursion/multiple-calls/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/multiple-calls/quiz/quiz.jsx b/src/app/visualizer/recursion/multiple-calls/quiz/quiz.jsx
new file mode 100644
index 000000000..bbe2b9afb
--- /dev/null
+++ b/src/app/visualizer/recursion/multiple-calls/quiz/quiz.jsx
@@ -0,0 +1,7 @@
+"use client";
+
+import FibonacciQuiz from "../../fibonacci/quiz";
+
+export default function Quiz() {
+  return <FibonacciQuiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/n-queens/AlgorithmClient.jsx b/src/app/visualizer/recursion/n-queens/AlgorithmClient.jsx
new file mode 100644
index 000000000..cb84d16bf
--- /dev/null
+++ b/src/app/visualizer/recursion/n-queens/AlgorithmClient.jsx
@@ -0,0 +1,36 @@
+import NQueensAnimation from "@/app/visualizer/recursion/n-queens/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/recursion/n-queens/codeBlock";
+import Quiz from "@/app/visualizer/recursion/n-queens/quiz";
+import Content from "@/app/visualizer/recursion/n-queens/content";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Recursion", "Backtracking")}
+      title="Backtracking"
+      headerDescription="Visualize the classic N-Queens puzzle recursively. Watch the algorithm place queens on a chessboard, backtrack upon conflicts, and find all safe placements."
+      headerActions={<ArticleActions />}
+      animation={<NQueensAnimation />}
+      content={<Content />}
+      code={<Code />}
+      quiz={<Quiz />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[
+            { text: "Print all Subsequences", url: "/visualizer/recursion/subsequences" },
+            { text: "Fibonacci (Multiple Calls)", url: "/visualizer/recursion/fibonacci" },
+            { text: "String Palindrome Check", url: "/visualizer/recursion/palindrome" }
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/recursion/n-queens/animation.jsx b/src/app/visualizer/recursion/n-queens/animation.jsx
new file mode 100644
index 000000000..a04abf990
--- /dev/null
+++ b/src/app/visualizer/recursion/n-queens/animation.jsx
@@ -0,0 +1,262 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import ResetButton from "@/app/components/ui/resetButton";
+import GoButton from "@/app/components/ui/goButton";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+import { generateNQueensFrames } from "@/features/algorithms/recursion/nQueensLogic";
+
+const codeLines = [
+  { line: 1, code: "function solve(col) {" },
+  { line: 2, code: "  if (col >= N) {" },
+  { line: 3, code: "    saveSolution(); return;" },
+  { line: 4, code: "  }" },
+  { line: 5, code: "  for (let row = 0; row < N; row++) {" },
+  { line: 6, code: "    if (isSafe(row, col)) {" },
+  { line: 7, code: "      board[col] = row;" },
+  { line: 8, code: "      solve(col + 1);" },
+  { line: 9, code: "      board[col] = -1; // backtrack" },
+  { line: 10, code: "    }" },
+  { line: 11, code: "  }" },
+  { line: 12, code: "}" },
+];
+
+const NQueensAnimation = () => {
+  const [isVisualizing, setIsVisualizing] = useState(false);
+
+  const frames = useMemo(() => {
+    if (!isVisualizing) return [];
+    return Array.from(generateNQueensFrames());
+  }, [isVisualizing]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  useVisualizerReset(() => {
+    setIsVisualizing(false);
+    engine.reset();
+  });
+
+  const handleGo = (e) => {
+    e.preventDefault();
+    setIsVisualizing(true);
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setIsVisualizing(false);
+    engine.reset();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      engine.play();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const activeFrameData = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        stack: [],
+        board: [-1, -1, -1, -1],
+        solutions: [],
+        activeCell: null,
+        conflictCell: null,
+        activeLine: 0,
+        description: "Click Visualize Go to see the N-Queens backtracking process!",
+      };
+
+  const activeStack = activeFrameData.stack || [];
+  const activeLine = activeFrameData.activeLine;
+  const board = activeFrameData.board || [-1, -1, -1, -1];
+  const activeCell = activeFrameData.activeCell;
+  const conflictCell = activeFrameData.conflictCell;
+  const solutions = activeFrameData.solutions || [];
+
+  return (
+    <main className="container mx-auto">
+      {/* Configuration Header */}
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8"
+      >
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
+          <div className="text-gray-700 dark:text-gray-300 font-medium text-lg">
+            N-Queens Backtracking Visualizer (4x4 Chessboard)
+          </div>
+
+          <div className="flex gap-2">
+            <GoButton onClick={handleGo} isAnimating={isVisualizing} disabled={isVisualizing} />
+            <ResetButton onReset={handleReset} isAnimating={isVisualizing} />
+          </div>
+        </div>
+
+        {isVisualizing && frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </form>
+
+      {/* Narrative Explanation Block */}
+      <div className="max-w-4xl mx-auto mb-8 p-4 rounded-xl border border-teal-100 bg-teal-50/40 dark:border-teal-900/30 dark:bg-teal-950/10 text-teal-800 dark:text-teal-200">
+        <p className="text-center font-medium text-sm leading-relaxed">
+          {activeFrameData.description}
+        </p>
+      </div>
+
+      {/* Visual Workspace */}
+      <div className="max-w-4xl mx-auto grid gap-6 md:grid-cols-12 mb-8">
+        {/* Call Stack */}
+        <div className="md:col-span-3 rounded-xl bg-white dark:bg-[#1a1a1a] p-5 shadow border border-gray-200 dark:border-zinc-800">
+          <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider text-center">
+            Recursion Stack
+          </h3>
+          {activeStack.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed border-gray-200 dark:border-zinc-800 rounded-xl">
+              <p className="text-gray-400 dark:text-zinc-500 text-sm">Empty</p>
+            </div>
+          ) : (
+            <div className="flex flex-col-reverse gap-2 items-center justify-end h-72 overflow-y-auto p-3 border border-gray-100 dark:border-zinc-800 rounded-xl bg-gray-50/50 dark:bg-zinc-900/20">
+              {activeStack.map((frame, index) => {
+                const isTop = index === activeStack.length - 1;
+                return (
+                  <div
+                    key={frame.id}
+                    className={`w-full p-2.5 rounded-lg border flex flex-col items-center font-mono text-[10px] font-semibold transition-all duration-300 ${
+                      isTop
+                        ? "bg-sky-100 dark:bg-sky-950/40 border-sky-400 text-sky-800 dark:text-sky-200 ring-2 ring-[#0d9488]"
+                        : "bg-gray-100 dark:bg-zinc-800 border-gray-300 text-gray-500 dark:text-zinc-400"
+                    }`}
+                  >
+                    solve(col = {frame.col})
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Chessboard visualization */}
+        <div className="md:col-span-6 rounded-xl bg-white dark:bg-[#1a1a1a] p-5 shadow border border-gray-200 dark:border-zinc-800 flex flex-col items-center justify-center">
+          <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider text-center">
+            Chessboard
+          </h3>
+          <div className="grid grid-cols-4 gap-1 p-2 bg-amber-900/80 rounded-xl border border-amber-950 shadow-lg">
+            {[0, 1, 2, 3].map((row) => (
+              <div key={row} className="flex gap-1">
+                {[0, 1, 2, 3].map((col) => {
+                  const hasQueen = board[col] === row;
+                  const isCellActive = activeCell?.row === row && activeCell?.col === col;
+                  const isConflict = conflictCell?.row === row && conflictCell?.col === col;
+                  const isLightSquare = (row + col) % 2 === 0;
+
+                  let cellColor = isLightSquare ? "bg-amber-100 dark:bg-amber-200" : "bg-amber-700 dark:bg-amber-800";
+                  let borderStyle = "border-transparent";
+
+                  if (isCellActive) {
+                    borderStyle = "border-teal-500 dark:border-teal-400 scale-105 shadow-md border-2 z-10";
+                    cellColor = "bg-teal-100 dark:bg-teal-950";
+                  }
+                  if (hasQueen) {
+                    cellColor = isConflict ? "bg-red-200 dark:bg-red-950/60" : "bg-emerald-100 dark:bg-emerald-950/60";
+                  }
+
+                  return (
+                    <div
+                      key={col}
+                      className={`relative w-14 h-14 rounded-lg flex items-center justify-center border-2 transition-all duration-300 font-bold ${cellColor} ${borderStyle}`}
+                    >
+                      {hasQueen ? (
+                        <span
+                          className={`text-2xl transition-all duration-300 ${
+                            isConflict ? "text-red-600 dark:text-red-400 animate-bounce" : "text-emerald-600 dark:text-emerald-400"
+                          }`}
+                        >
+                          👑
+                        </span>
+                      ) : (
+                        <span className="text-[10px] text-gray-400/40 select-none">
+                          {row},{col}
+                        </span>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Right Side: Solutions & Code Trace */}
+        <div className="md:col-span-3 flex flex-col gap-4">
+          <div className="border border-gray-200 dark:border-zinc-800 rounded-xl bg-zinc-950 p-4 font-mono text-[10px] text-emerald-400 min-h-36 shadow-inner flex flex-col">
+            <span className="text-zinc-500 font-semibold mb-2 uppercase tracking-wider text-center block text-[9px]">
+              Solutions Found
+            </span>
+            <div className="flex-1 overflow-y-auto max-h-32 flex flex-col gap-2 justify-center items-center">
+              {solutions.length === 0 ? (
+                <span className="text-zinc-600 text-xs">No solutions yet</span>
+              ) : (
+                solutions.map((sol, idx) => (
+                  <div key={idx} className="bg-zinc-900 border border-zinc-800 rounded p-1 text-center w-full animate-fade-in">
+                    Sol #{idx + 1}: [{sol.join(", ")}]
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+
+          <div className="w-full border border-gray-200 dark:border-zinc-800 rounded-xl overflow-hidden bg-zinc-950 font-mono text-[9px] shadow-inner">
+            <div className="p-3 text-zinc-300 leading-relaxed">
+              {codeLines.map((ln) => {
+                const isActive = ln.line === activeLine;
+                return (
+                  <div
+                    key={ln.line}
+                    className={`flex gap-3 px-1 py-0.5 rounded transition-colors duration-200 ${
+                      isActive ? "bg-[#0d9488]/20 border-l-3 border-[#0d9488] text-white font-bold" : "border-l-3 border-transparent"
+                    }`}
+                  >
+                    <span className="text-zinc-600 select-none w-3 text-right">{ln.line}</span>
+                    <span className="whitespace-pre">{ln.code}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default NQueensAnimation;
diff --git a/src/app/visualizer/recursion/n-queens/codeBlock.jsx b/src/app/visualizer/recursion/n-queens/codeBlock.jsx
new file mode 100644
index 000000000..767c201df
--- /dev/null
+++ b/src/app/visualizer/recursion/n-queens/codeBlock.jsx
@@ -0,0 +1,272 @@
+"use client";
+import React from "react";
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const nqueensCode = {
+  javascript: `// N-Queens Backtracking in JavaScript
+function solveNQueens(n = 4) {
+  const board = Array(n).fill().map(() => Array(n).fill('.'));
+  const solutions = [];
+
+  function isSafe(row, col) {
+    // Check row on left side
+    for (let i = 0; i < col; i++) {
+      if (board[row][i] === 'Q') return false;
+    }
+    // Check upper diagonal on left side
+    for (let i = row, j = col; i >= 0 && j >= 0; i--, j--) {
+      if (board[i][j] === 'Q') return false;
+    }
+    // Check lower diagonal on left side
+    for (let i = row, j = col; i < n && j >= 0; i++, j--) {
+      if (board[i][j] === 'Q') return false;
+    }
+    return true;
+  }
+
+  function solve(col) {
+    if (col >= n) {
+      solutions.push(board.map(r => r.join('')));
+      return;
+    }
+    for (let row = 0; row < n; row++) {
+      if (isSafe(row, col)) {
+        board[row][col] = 'Q'; // Place queen
+        solve(col + 1); // Recurse
+        board[row][col] = '.'; // Backtrack (remove queen)
+      }
+    }
+  }
+
+  solve(0);
+  return solutions;
+}
+
+// Example call:
+const result = solveNQueens(4);
+console.log("Total solutions:", result.length);`,
+
+  python: `# N-Queens Backtracking in Python
+def solveNQueens(n=4):
+    board = [['.' for _ in range(n)] for _ in range(n)]
+    solutions = []
+
+    def isSafe(row, col):
+        # Check row on left side
+        for i in range(col):
+            if board[row][i] == 'Q':
+                return False
+        # Check upper diagonal
+        i, j = row, col
+        while i >= 0 and j >= 0:
+            if board[i][j] == 'Q':
+                return False
+            i -= 1
+            j -= 1
+        # Check lower diagonal
+        i, j = row, col
+        while i < n and j >= 0:
+            if board[i][j] == 'Q':
+                return False
+            i += 1
+            j -= 1
+        return True
+
+    def solve(col):
+        if col >= n:
+            solutions.append(["".join(r) for r in board])
+            return
+        for row in range(n):
+            if isSafe(row, col):
+                board[row][col] = 'Q'  # Place queen
+                solve(col + 1)         # Recurse
+                board[row][col] = '.'  # Backtrack (remove queen)
+
+    solve(0)
+    return solutions
+
+# Example call:
+result = solveNQueens(4)
+print(f"Total solutions: {len(result)}")`,
+
+  java: `// N-Queens Backtracking in Java
+import java.util.ArrayList;
+import java.util.List;
+
+public class NQueens {
+    private static List<List<String>> solveNQueens(int n) {
+        char[][] board = new char[n][n];
+        for (int i = 0; i < n; i++) {
+            for (int j = 0; j < n; j++) {
+                board[i][j] = '.';
+            }
+        }
+        List<List<String>> solutions = new ArrayList<>();
+        solve(0, board, solutions, n);
+        return solutions;
+    }
+
+    private static boolean isSafe(int row, int col, char[][] board, int n) {
+        for (int i = 0; i < col; i++) {
+            if (board[row][i] == 'Q') return false;
+        }
+        for (int i = row, j = col; i >= 0 && j >= 0; i--, j--) {
+            if (board[i][j] == 'Q') return false;
+        }
+        for (int i = row, j = col; i < n && j >= 0; i++, j--) {
+            if (board[i][j] == 'Q') return false;
+        }
+        return true;
+    }
+
+    private static void solve(int col, char[][] board, List<List<String>> solutions, int n) {
+        if (col >= n) {
+            solutions.add(construct(board));
+            return;
+        }
+        for (int row = 0; row < n; row++) {
+            if (isSafe(row, col, board, n)) {
+                board[row][col] = 'Q'; // Place queen
+                solve(col + 1, board, solutions, n); // Recurse
+                board[row][col] = '.'; // Backtrack (remove queen)
+            }
+        }
+    }
+
+    private static List<String> construct(char[][] board) {
+        List<String> res = new ArrayList<>();
+        for (int i = 0; i < board.length; i++) {
+            res.add(new String(board[i]));
+        }
+        return res;
+    }
+
+    public static void main(String[] args) {
+        List<List<String>> result = solveNQueens(4);
+        System.out.println("Total solutions: " + result.size());
+    }
+}`,
+
+  c: `// N-Queens Backtracking in C
+#include <stdio.h>
+#include <stdbool.h>
+
+#define N 4
+
+int solutionsCount = 0;
+char board[N][N];
+
+void printSolution() {
+    printf("Solution %d:\\n", ++solutionsCount);
+    for (int i = 0; i < N; i++) {
+        for (int j = 0; j < N; j++) {
+            printf("%c ", board[i][j]);
+        }
+        printf("\\n");
+    }
+    printf("\\n");
+}
+
+bool isSafe(int row, int col) {
+    for (int i = 0; i < col; i++) {
+        if (board[row][i] == 'Q') return false;
+    }
+    for (int i = row, j = col; i >= 0 && j >= 0; i--, j--) {
+        if (board[i][j] == 'Q') return false;
+    }
+    for (int i = row, j = col; i < N && j >= 0; i++, j--) {
+        if (board[i][j] == 'Q') return false;
+    }
+    return true;
+}
+
+void solve(int col) {
+    if (col >= N) {
+        printSolution();
+        return;
+    }
+    for (int row = 0; row < N; row++) {
+        if (isSafe(row, col)) {
+            board[row][col] = 'Q'; // Place queen
+            solve(col + 1); // Recurse
+            board[row][col] = '.'; // Backtrack (remove queen)
+        }
+    }
+}
+
+int main() {
+    for (int i = 0; i < N; i++) {
+        for (int j = 0; j < N; j++) {
+            board[i][j] = '.';
+        }
+    }
+    solve(0);
+    printf("Total solutions found: %d\\n", solutionsCount);
+    return 0;
+}`,
+
+  cpp: `// N-Queens Backtracking in C++
+#include <iostream>
+#include <vector>
+#include <string>
+
+using namespace std;
+
+bool isSafe(int row, int col, const vector<string>& board, int n) {
+    for (int i = 0; i < col; i++) {
+        if (board[row][i] == 'Q') return false;
+    }
+    for (int i = row, j = col; i >= 0 && j >= 0; i--, j--) {
+        if (board[i][j] == 'Q') return false;
+    }
+    for (int i = row, j = col; i < n && j >= 0; i++, j--) {
+        if (board[i][j] == 'Q') return false;
+    }
+    return true;
+}
+
+void solve(int col, vector<string>& board, vector<vector<string>>& solutions, int n) {
+    if (col >= n) {
+        solutions.push_back(board);
+        return;
+    }
+    for (int row = 0; row < n; row++) {
+        if (isSafe(row, col, board, n)) {
+            board[row][col] = 'Q'; // Place queen
+            solve(col + 1, board, solutions, n); // Recurse
+            board[row][col] = '.'; // Backtrack (remove queen)
+        }
+    }
+}
+
+vector<vector<string>> solveNQueens(int n) {
+    vector<vector<string>> solutions;
+    vector<string> board(n, string(n, '.'));
+    solve(0, board, solutions, n);
+    return solutions;
+}
+
+int main() {
+    vector<vector<string>> result = solveNQueens(4);
+    cout << "Total solutions: " << result.size() << endl;
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: "nqueens.js",
+  python: "nqueens.py",
+  java: "NQueens.java",
+  c: "nqueens.c",
+  cpp: "nqueens.cpp",
+};
+
+const NQueensCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={nqueensCode}
+    fileNames={fileNames}
+  />
+);
+
+export default NQueensCode;
diff --git a/src/app/visualizer/recursion/n-queens/content.jsx b/src/app/visualizer/recursion/n-queens/content.jsx
new file mode 100644
index 000000000..3e7fde6c4
--- /dev/null
+++ b/src/app/visualizer/recursion/n-queens/content.jsx
@@ -0,0 +1,98 @@
+"use client";
+import React from "react";
+
+const Content = () => {
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8 shadow-sm">
+        {/* What is N-Queens */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            What is the N-Queens Problem?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <p className="leading-relaxed">
+              The <strong>N-Queens puzzle</strong> is the problem of placing $N$ chess queens on an $N \times N$ chessboard so that no two queens threaten each other. 
+              According to chess rules, a queen can attack another piece if it shares the same row, column, or diagonal.
+            </p>
+            <p className="mt-4 leading-relaxed">
+              Therefore, a valid solution requires that:
+            </p>
+            <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              <li>No two queens share the same <strong>row</strong>.</li>
+              <li>No two queens share the same <strong>column</strong>.</li>
+              <li>No two queens share the same <strong>diagonal</strong> (both major and minor diagonals).</li>
+            </ul>
+          </div>
+        </section>
+
+        {/* Backtracking Strategy */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            The Backtracking Strategy
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <p className="leading-relaxed">
+              Backtracking is a systematic way to search for solutions by trying to build a solution incrementally, one step at a time, and removing choices (backtracking) that fail to satisfy the constraints.
+            </p>
+            <p className="mt-4 leading-relaxed">
+              For N-Queens, we place queens column by column:
+            </p>
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400 mt-2">
+              <li className="pl-2">Start in the leftmost column (column 0).</li>
+              <li className="pl-2">For the current column, try placing a queen in row 0, 1, ..., $N-1$ and check if the position is safe.</li>
+              <li className="pl-2">If placing a queen in row $R$ is <strong>safe</strong>, record the choice and recursively move to the next column.</li>
+              <li className="pl-2">If we successfully place a queen in the last column ($N-1$), a solution is found!</li>
+              <li className="pl-2">If we find that <strong>no row</strong> in the current column is safe, we backtrack: return to the previous column, remove the queen placed there, and resume trying the next row candidates.</li>
+            </ol>
+          </div>
+        </section>
+
+        {/* Safety Checks */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Checking If a Position is Safe
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <p className="leading-relaxed">
+              Since we place queens column-by-column (from left to right), we only need to check for attacks on the left side of the current position:
+            </p>
+            <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              <li><strong>Horizontal row:</strong> Check if any queen is already in the same row to the left.</li>
+              <li><strong>Upper-left diagonal:</strong> Check if any queen is in the diagonal going up and left.</li>
+              <li><strong>Lower-left diagonal:</strong> Check if any queen is in the diagonal going down and left.</li>
+            </ul>
+            <p className="mt-4 leading-relaxed font-semibold">
+              Note: We do not need to check columns to the right, because we haven&apos;t placed any queens there yet.
+            </p>
+          </div>
+        </section>
+
+        {/* Complexity Analysis */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-3">
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Time Complexity: O(N!)</span>
+              <br />
+              There are $N$ choices for placing the first queen, at most $N-2$ choices for the second, $N-4$ for the third, and so on. In the worst case, the backtracking search tree generates $O(N!)$ states.
+            </p>
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Space Complexity: O(N)</span>
+              <br />
+              The auxiliary space required consists of the recursion stack ($O(N)$ depth) and the board array ($O(N)$ size to record the row positions of the queens).
+            </p>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/recursion/n-queens/quiz.jsx b/src/app/visualizer/recursion/n-queens/quiz.jsx
new file mode 100644
index 000000000..9eb980349
--- /dev/null
+++ b/src/app/visualizer/recursion/n-queens/quiz.jsx
@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const NQueensQuiz = () => {
+  const questions = [
+    {
+      question: "What is the primary constraint in the N-Queens problem?",
+      options: [
+        "Place N queens on an N×N board such that no two queens attack each other (same row, column, or diagonal).",
+        "Place N queens such that every row and column has exactly two queens.",
+        "Move a single queen across all chessboard squares without visiting any square twice.",
+        "Ensure all queens are placed only on white squares of the chessboard."
+      ],
+      correctAnswer: 0,
+      explanation: "The classic N-Queens puzzle requires placing N queens on an NxN grid such that no two queens share the same row, column, or diagonal."
+    },
+    {
+      question: "In the backtracking algorithm for N-Queens, if column 'col' reaches N (the board size), what does it signify?",
+      options: [
+        "A conflict has occurred, and the algorithm must backtrack.",
+        "A valid configuration/solution has been found and recorded.",
+        "The chessboard has run out of space and the program will crash.",
+        "The board is half-filled and we must start filling from the right side."
+      ],
+      correctAnswer: 1,
+      explanation: "Since columns are 0-indexed (from 0 to N-1), reaching column N means we have successfully placed a queen in every column (0 to N-1) without conflicts, which is a complete solution."
+    },
+    {
+      question: "For a standard 4x4 chessboard (N = 4), how many distinct solutions exist?",
+      options: [
+        "1",
+        "2",
+        "4",
+        "8"
+      ],
+      correctAnswer: 1,
+      explanation: "There are exactly 2 solutions for N = 4: [1, 3, 0, 2] and [2, 0, 3, 1] (represented as row indices for each column)."
+    },
+    {
+      question: "What is the purpose of the backtracking step (e.g., setting board[col] = -1 or board[row][col] = '.') after the recursive call?",
+      options: [
+        "It resets the whole board to try a completely new size.",
+        "It cleans up memory, but does not affect the search path.",
+        "It undoes the current queen placement so that the loop can try placing a queen in the next row of this column.",
+        "It tells the compiler that the function has finished execution."
+      ],
+      correctAnswer: 2,
+      explanation: "Backtracking relies on reverting choices. Reverting the current cell to empty allows the algorithm to explore other row candidates in the parent frame loop."
+    },
+    {
+      question: "What is the worst-case time complexity of the N-Queens backtracking algorithm?",
+      options: [
+        "O(N)",
+        "O(N²)",
+        "O(N!)",
+        "O(2^N)"
+      ],
+      correctAnswer: 2,
+      explanation: "In the worst case, we check placements in every row for each column, resulting in N options for the first column, N-1 for the second, N-2 for the third, etc., leading to O(N!) time complexity."
+    }
+  ];
+
+  return <QuizEngine title="N-Queens Backtracking Quiz" questions={questions} />;
+};
+
+export default NQueensQuiz;
diff --git a/src/app/visualizer/recursion/palindrome/AlgorithmClient.jsx b/src/app/visualizer/recursion/palindrome/AlgorithmClient.jsx
new file mode 100644
index 000000000..833f0908b
--- /dev/null
+++ b/src/app/visualizer/recursion/palindrome/AlgorithmClient.jsx
@@ -0,0 +1,36 @@
+import PalindromeAnimation from "@/app/visualizer/recursion/palindrome/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/recursion/palindrome/codeBlock";
+import Quiz from "@/app/visualizer/recursion/palindrome/quiz";
+import Content from "@/app/visualizer/recursion/palindrome/content";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Recursion", "Functional & Parameterized Recursion")}
+      title="Functional & Parameterized Recursion"
+      headerDescription="Observe how recursion checks if a string is a palindrome by comparing characters from outside inward."
+      headerActions={<ArticleActions />}
+      animation={<PalindromeAnimation />}
+      content={<Content />}
+      code={<Code />}
+      quiz={<Quiz />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[
+            { text: "Reverse an Array", url: "/visualizer/recursion/reverse-array" },
+            { text: "Print 1 to N", url: "/visualizer/recursion/print-1-to-n" },
+            { text: "Print all Subsequences", url: "/visualizer/recursion/subsequences" }
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/recursion/palindrome/animation.jsx b/src/app/visualizer/recursion/palindrome/animation.jsx
new file mode 100644
index 000000000..5b7703216
--- /dev/null
+++ b/src/app/visualizer/recursion/palindrome/animation.jsx
@@ -0,0 +1,295 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import ResetButton from "@/app/components/ui/resetButton";
+import GoButton from "@/app/components/ui/goButton";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+import { generatePalindromeFrames } from "@/features/algorithms/recursion/palindromeLogic";
+
+const codeLines = [
+  { line: 1, code: "function isPalindrome(i, str) {" },
+  { line: 2, code: "  if (i >= str.length / 2) return true;" },
+  { line: 3, code: "  if (str[i] !== str[str.length - 1 - i]) return false;" },
+  { line: 4, code: "  return isPalindrome(i + 1, str);" },
+  { line: 5, code: "}" },
+];
+
+const PalindromeAnimation = () => {
+  const [stringInput, setStringInput] = useState("radar");
+  const [isVisualizing, setIsVisualizing] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const frames = useMemo(() => {
+    if (!isVisualizing || !stringInput.trim()) return [];
+    return Array.from(generatePalindromeFrames(stringInput.trim()));
+  }, [stringInput, isVisualizing]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  useVisualizerReset(() => {
+    setStringInput("radar");
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  });
+
+  const handleGo = (e) => {
+    e.preventDefault();
+    const str = stringInput.trim();
+    if (!str) {
+      setErrorMsg("Please enter a valid string.");
+      return;
+    }
+    if (str.length > 8) {
+      setErrorMsg("Please keep string length <= 8 for layout readability.");
+      return;
+    }
+    setErrorMsg("");
+    setIsVisualizing(true);
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  };
+
+  const generateRandomString = () => {
+    const list = ["radar", "racecar", "hello", "level", "madam", "kayak", "coding"];
+    const str = list[Math.floor(Math.random() * list.length)];
+    setStringInput(str);
+    handleReset();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      engine.play();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const activeFrameData = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        stack: [],
+        activeLine: 0,
+        iIndex: -1,
+        oppIndex: -1,
+        statusType: "normal",
+        description: "Enter a word and click Visualize Go!",
+      };
+
+  const activeStack = activeFrameData.stack || [];
+  const activeLine = activeFrameData.activeLine;
+  const iPtr = activeFrameData.iIndex;
+  const oppPtr = activeFrameData.oppIndex;
+  const statusType = activeFrameData.statusType;
+
+  const stackColors = {
+    calling: "bg-[#e0f2fe] dark:bg-sky-950/40 border-sky-400 dark:border-sky-700 text-sky-800 dark:text-sky-200",
+    checking_base: "bg-[#fef3c7] dark:bg-amber-950/40 border-amber-400 dark:border-amber-700 text-amber-800 dark:text-amber-200",
+    base_case: "bg-[#dcfce7] dark:bg-emerald-950/40 border-emerald-400 dark:border-emerald-700 text-emerald-800 dark:text-emerald-200",
+    comparing: "bg-[#fae8ff] dark:bg-purple-950/30 border-purple-400 dark:border-purple-800 text-purple-700 dark:text-purple-300",
+    mismatch: "bg-red-100 dark:bg-red-950/20 border-red-400 dark:border-red-800 text-red-800 dark:text-red-200",
+    waiting: "bg-gray-100 dark:bg-zinc-800 border-gray-300 dark:border-zinc-700 text-gray-500 dark:text-zinc-400",
+    returning: "bg-[#fee2e2] dark:bg-rose-950/40 border-rose-400 dark:border-rose-700 text-rose-800 dark:text-rose-200",
+  };
+
+  return (
+    <main className="container mx-auto">
+      {/* Configuration Header */}
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8"
+      >
+        <div className="flex flex-col sm:flex-row items-end gap-4">
+          <div className="flex-1 w-full">
+            <label className="block text-gray-700 dark:text-gray-300 mb-2 font-medium" htmlFor="stringInput">
+              Input String
+            </label>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                id="stringInput"
+                value={stringInput}
+                onChange={(e) => {
+                  setStringInput(e.target.value.replace(/[^a-zA-Z]/g, ""));
+                  handleReset();
+                }}
+                className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#0d9488] focus:outline-none focus:ring-2 focus:ring-[#0d9488]/30 transition duration-300"
+                placeholder="e.g. radar"
+                disabled={isVisualizing}
+              />
+              <button
+                type="button"
+                onClick={generateRandomString}
+                className="px-4 py-2 font-bold bg-[#0d9488] text-white rounded-lg hover:bg-[#0b766e] transition-all duration-200"
+                disabled={isVisualizing}
+              >
+                Random
+              </button>
+            </div>
+          </div>
+
+          <div className="flex gap-2 w-full sm:w-auto justify-end">
+            <GoButton onClick={handleGo} isAnimating={isVisualizing} disabled={isVisualizing} />
+            <ResetButton onReset={handleReset} isAnimating={isVisualizing} />
+          </div>
+        </div>
+
+        {errorMsg && <p className="text-red-500 dark:text-red-400 text-xs font-semibold mt-2">{errorMsg}</p>}
+
+        {isVisualizing && frames.length > 0 && (
+          <div className="mt-4">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </form>
+
+      {/* Narrative Explanation Block */}
+      <div className="max-w-4xl mx-auto mb-8 p-4 rounded-xl border border-teal-100 bg-teal-50/40 dark:border-teal-900/30 dark:bg-teal-950/10 text-teal-800 dark:text-teal-200">
+        <p className="text-center font-medium text-sm leading-relaxed">
+          {activeFrameData.description}
+        </p>
+      </div>
+
+      {/* Visual Workspace */}
+      <div className="max-w-4xl mx-auto grid gap-6 md:grid-cols-12 mb-8">
+        {/* Left Side: Call Stack */}
+        <div className="md:col-span-4 rounded-xl bg-white dark:bg-[#1a1a1a] p-5 shadow border border-gray-200 dark:border-zinc-800">
+          <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider text-center">
+            Active Call Stack
+          </h3>
+          {activeStack.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-72 border-2 border-dashed border-gray-200 dark:border-zinc-800 rounded-xl">
+              <p className="text-gray-400 dark:text-zinc-500 text-sm">Call Stack is Empty</p>
+            </div>
+          ) : (
+            <div className="flex flex-col-reverse gap-2 items-center justify-end h-80 overflow-y-auto p-4 border border-gray-100 dark:border-zinc-800 rounded-xl bg-gray-50/50 dark:bg-zinc-900/20">
+              {activeStack.map((frame, index) => {
+                const isTop = index === activeStack.length - 1;
+                const statusClass = stackColors[frame.status] || stackColors.waiting;
+
+                return (
+                  <div
+                    key={frame.id}
+                    className={`w-full max-w-[280px] p-3 rounded-lg border flex flex-col items-center transition-all duration-300 ${statusClass} ${
+                      isTop ? "ring-2 ring-primary dark:ring-primary-light ring-offset-2 dark:ring-offset-zinc-950 shadow-md" : "scale-[0.98]"
+                    }`}
+                  >
+                    <div className="flex justify-between w-full font-mono text-xs font-semibold">
+                      <span>isPalindrome(i = {frame.i})</span>
+                    </div>
+                    {frame.retVal !== undefined && (
+                      <span className="font-bold text-[11px] text-zinc-600 dark:text-zinc-300 mt-1 block">
+                        returns {frame.retVal}
+                      </span>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Middle: String Blocks representation */}
+        <div className="md:col-span-4 rounded-xl bg-white dark:bg-[#1a1a1a] p-5 shadow border border-gray-200 dark:border-zinc-800 flex flex-col items-center justify-between">
+          <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider text-center">
+            String Visualization
+          </h3>
+          <div className="w-full flex-1 flex flex-col items-center justify-center gap-6 min-h-64">
+            <div className="flex gap-2 justify-center items-end">
+              {stringInput.split("").map((char, idx) => {
+                const isLeft = idx === iPtr;
+                const isRight = idx === oppPtr;
+                const active = isLeft || isRight;
+
+                let borderStyle = "border-gray-300 dark:border-zinc-700 bg-gray-100 dark:bg-zinc-800";
+                if (active) {
+                  if (statusType === "success") {
+                    borderStyle = "border-emerald-500 dark:border-emerald-400 bg-emerald-150 dark:bg-emerald-950 text-emerald-900 dark:text-emerald-100 font-bold stroke-2";
+                  } else if (statusType === "error") {
+                    borderStyle = "border-red-500 dark:border-red-400 bg-red-100 dark:bg-red-950 text-red-900 dark:text-red-100 font-bold stroke-2 animate-bounce";
+                  } else {
+                    borderStyle = "border-purple-500 dark:border-purple-400 bg-purple-100 dark:bg-purple-950 text-purple-900 dark:text-purple-100 font-bold stroke-2";
+                  }
+                }
+
+                return (
+                  <div key={idx} className="flex flex-col items-center gap-1">
+                    <div
+                      className={`w-10 h-10 flex items-center justify-center rounded-lg border-2 text-sm font-semibold uppercase transition-all duration-300 ${borderStyle}`}
+                    >
+                      {char}
+                    </div>
+                    <span className="text-[10px] text-gray-400 select-none">
+                      {isLeft && "i"}
+                      {isRight && "opp"}
+                      {!isLeft && !isRight && `[${idx}]`}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* Right Side: Code Block Trace */}
+        <div className="md:col-span-4 flex flex-col">
+          <div className="w-full border border-gray-200 dark:border-zinc-800 rounded-xl overflow-hidden bg-zinc-950 font-mono text-xs shadow-inner">
+            <div className="flex items-center justify-between px-4 py-2 bg-zinc-900 border-b border-zinc-800">
+              <span className="text-zinc-400 font-semibold">Active Code Trace</span>
+            </div>
+            <div className="p-4 text-zinc-300 leading-relaxed">
+              {codeLines.map((ln) => {
+                const isActive = ln.line === activeLine;
+                return (
+                  <div
+                    key={ln.line}
+                    className={`flex gap-4 px-2 py-0.5 rounded transition-colors duration-200 ${
+                      isActive ? "bg-[#0d9488]/20 border-l-4 border-[#0d9488] text-white font-bold" : "border-l-4 border-transparent"
+                    }`}
+                  >
+                    <span className="text-zinc-600 select-none w-4 text-right">{ln.line}</span>
+                    <span>{ln.code}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default PalindromeAnimation;
diff --git a/src/app/visualizer/recursion/palindrome/codeBlock.jsx b/src/app/visualizer/recursion/palindrome/codeBlock.jsx
new file mode 100644
index 000000000..966250403
--- /dev/null
+++ b/src/app/visualizer/recursion/palindrome/codeBlock.jsx
@@ -0,0 +1,130 @@
+"use client";
+import React from "react";
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const palindromeCode = {
+  javascript: `// String Palindrome Check in JavaScript
+function isPalindrome(i, str) {
+  // Base case: crossed middle index
+  if (i >= str.length / 2) {
+    return true;
+  }
+  // Mismatch case
+  if (str[i] !== str[str.length - 1 - i]) {
+    return false;
+  }
+  // Recursive case
+  return isPalindrome(i + 1, str);
+}
+
+// Example call:
+const word = "radar";
+const result = isPalindrome(0, word); // Returns true
+console.log(result);`,
+
+  python: `# String Palindrome Check in Python
+def is_palindrome(i, string):
+    # Base case
+    if i >= len(string) // 2:
+        return True
+    # Mismatch case
+    if string[i] != string[len(string) - 1 - i]:
+        return False
+    # Recursive case
+    return is_palindrome(i + 1, string)
+
+# Example call:
+word = "radar"
+result = is_palindrome(0, word) # Returns True
+print(result)`,
+
+  java: `// String Palindrome Check in Java
+public class PalindromeCheck {
+    public static boolean isPalindrome(int i, String str) {
+        // Base case
+        if (i >= str.length() / 2) {
+            return true;
+        }
+        // Mismatch case
+        if (str.charAt(i) != str.charAt(str.length() - 1 - i)) {
+            return false;
+        }
+        // Recursive case
+        return isPalindrome(i + 1, str);
+    }
+
+    public static void main(String[] args) {
+        String word = "radar";
+        boolean result = isPalindrome(0, word); // Returns true
+        System.out.println(result);
+    }
+}`,
+
+  c: `// String Palindrome Check in C
+#include <stdio.h>
+#include <string.h>
+#include <stdbool.h>
+
+bool isPalindrome(int i, char str[]) {
+    int len = strlen(str);
+    // Base case
+    if (i >= len / 2) {
+        return true;
+    }
+    // Mismatch case
+    if (str[i] != str[len - 1 - i]) {
+        return false;
+    }
+    // Recursive case
+    return isPalindrome(i + 1, str);
+}
+
+int main() {
+    char word[] = "radar";
+    bool result = isPalindrome(0, word);
+    printf("%s\\n", result ? "true" : "false");
+    return 0;
+}`,
+
+  cpp: `// String Palindrome Check in C++
+#include <iostream>
+#include <string>
+
+bool isPalindrome(int i, const std::string& str) {
+    // Base case
+    if (i >= str.length() / 2) {
+        return true;
+    }
+    // Mismatch case
+    if (str[i] != str[str.length() - 1 - i]) {
+        return false;
+    }
+    // Recursive case
+    return isPalindrome(i + 1, str);
+}
+
+int main() {
+    std::string word = "radar";
+    bool result = isPalindrome(0, word);
+    std::cout << (result ? "true" : "false") << std::endl;
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: "palindrome.js",
+  python: "palindrome_check.py",
+  java: "PalindromeCheck.java",
+  c: "palindrome.c",
+  cpp: "palindrome.cpp",
+};
+
+const PalindromeCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={palindromeCode}
+    fileNames={fileNames}
+  />
+);
+
+export default PalindromeCode;
diff --git a/src/app/visualizer/recursion/palindrome/content.jsx b/src/app/visualizer/recursion/palindrome/content.jsx
new file mode 100644
index 000000000..07d3b6fa4
--- /dev/null
+++ b/src/app/visualizer/recursion/palindrome/content.jsx
@@ -0,0 +1,54 @@
+"use client";
+import React from "react";
+
+const Content = () => {
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8 shadow-sm">
+        {/* Concept */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Recursion on Strings: Palindrome Check
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <p className="leading-relaxed">
+              A string is a palindrome if it reads the same backward as forward (e.g., &quot;radar&quot;, &quot;level&quot;, &quot;madam&quot;).
+            </p>
+            <p className="mt-4 leading-relaxed font-semibold">
+              To check this recursively, we compare characters from the outside inwards:
+            </p>
+            <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              <li><strong>Index Mapping:</strong> At index $i$, the corresponding symmetrically opposite character is located at <code>len - 1 - i</code>.</li>
+              <li><strong>Base Case:</strong> <code>i &gt;= len / 2</code>. When pointer $i$ reaches or crosses the middle of the string, it means all outer pairs matched. We return <code>true</code>.</li>
+              <li><strong>Mismatch check:</strong> If <code>str[i] !== str[len - 1 - i]</code>, the string cannot be a palindrome. We return <code>false</code> immediately.</li>
+              <li><strong>Recursive Step:</strong> If the characters match, call <code>isPalindrome(i + 1, str)</code>.</li>
+            </ul>
+          </div>
+        </section>
+
+        {/* Complexity Analysis */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-3">
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Time Complexity: O(N)</span>
+              <br />
+              In the worst case (palindrome string), the function compares $N/2$ pairs of characters, executing in $O(N)$ linear time.
+            </p>
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Space Complexity: O(N)</span>
+              <br />
+              The call stack size reaches a maximum height of $N/2$ stack frames. Thus, the auxiliary space complexity is linear, $O(N)$.
+            </p>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/recursion/palindrome/quiz.jsx b/src/app/visualizer/recursion/palindrome/quiz.jsx
new file mode 100644
index 000000000..9761b0f28
--- /dev/null
+++ b/src/app/visualizer/recursion/palindrome/quiz.jsx
@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const PalindromeQuiz = () => {
+  const questions = [
+    {
+      question: "Which expression yields the index of the character to compare with index 'i' in a string of length 'len'?",
+      options: [
+        "len - i",
+        "len - 1 - i",
+        "i + len / 2",
+        "len / 2"
+      ],
+      correctAnswer: 1,
+      explanation: "Using 0-based indexing, the symmetrically opposite character to index 'i' is located at index len - 1 - i."
+    },
+    {
+      question: "What is the base case condition for a recursive palindrome check?",
+      options: [
+        "i == 0",
+        "i >= str.length / 2",
+        "str[i] != str[len-1-i]",
+        "i == str.length"
+      ],
+      correctAnswer: 1,
+      explanation: "Once index 'i' reaches or crosses the middle of the string (i >= str.length / 2), all characters have been checked and match, so we return true."
+    },
+    {
+      question: "For the word 'coding', how many comparisons are made before the recursive function determines it is NOT a palindrome?",
+      options: [
+        "1",
+        "2",
+        "3",
+        "6"
+      ],
+      correctAnswer: 0,
+      explanation: "For 'coding', the first comparison is between 'c' (index 0) and 'g' (index 5). Since 'c' != 'g', the function returns false immediately on the 1st comparison."
+    },
+    {
+      question: "What is the time complexity of the recursive palindrome check in the worst case?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N²)"
+      ],
+      correctAnswer: 2,
+      explanation: "In the worst case (the string is a palindrome), the function checks N/2 character pairs, making it O(N) linear time."
+    },
+    {
+      question: "What does isPalindrome(0, 'level') return?",
+      options: [
+        "true",
+        "false",
+        "0",
+        "null"
+      ],
+      correctAnswer: 0,
+      explanation: "'level' is a palindrome, so the function returns true."
+    }
+  ];
+
+  return <QuizEngine title="Palindrome Check Quiz" questions={questions} />;
+};
+
+export default PalindromeQuiz;
diff --git a/src/app/visualizer/recursion/print-1-to-n/AlgorithmClient.jsx b/src/app/visualizer/recursion/print-1-to-n/AlgorithmClient.jsx
new file mode 100644
index 000000000..4c7a65695
--- /dev/null
+++ b/src/app/visualizer/recursion/print-1-to-n/AlgorithmClient.jsx
@@ -0,0 +1,36 @@
+import Print1ToNAnimation from "@/app/visualizer/recursion/print-1-to-n/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/recursion/print-1-to-n/codeBlock";
+import Quiz from "@/app/visualizer/recursion/print-1-to-n/quiz";
+import Content from "@/app/visualizer/recursion/print-1-to-n/content";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Recursion", "Basic Recursion")}
+      title="Basic Recursion"
+      headerDescription="Understand the absolute basics of recursion by pushing frames onto the stack to count up from 1 to N."
+      headerActions={<ArticleActions />}
+      animation={<Print1ToNAnimation />}
+      content={<Content />}
+      code={<Code />}
+      quiz={<Quiz />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[
+            { text: "Print N to 1", url: "/visualizer/recursion/print-n-to-1" },
+            { text: "Sum of First N Numbers", url: "/visualizer/recursion/sum-of-n" },
+            { text: "Factorial of N", url: "/visualizer/recursion/factorial" }
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/recursion/print-1-to-n/animation.jsx b/src/app/visualizer/recursion/print-1-to-n/animation.jsx
new file mode 100644
index 000000000..7fac264e0
--- /dev/null
+++ b/src/app/visualizer/recursion/print-1-to-n/animation.jsx
@@ -0,0 +1,251 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import ResetButton from "@/app/components/ui/resetButton";
+import GoButton from "@/app/components/ui/goButton";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+import { generatePrint1ToNFrames } from "@/features/algorithms/recursion/print1ToNLogic";
+
+const codeLines = [
+  { line: 1, code: "function print1ToN(i, n) {" },
+  { line: 2, code: "  if (i > n) return;" },
+  { line: 3, code: "  console.log(i);" },
+  { line: 4, code: "  print1ToN(i + 1, n);" },
+  { line: 5, code: "}" },
+];
+
+const Print1ToNAnimation = () => {
+  const [nVal, setNVal] = useState("3");
+  const [isVisualizing, setIsVisualizing] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const frames = useMemo(() => {
+    if (!isVisualizing) return [];
+    const n = parseInt(nVal, 10);
+    if (isNaN(n) || n < 1) return [];
+    return Array.from(generatePrint1ToNFrames(n));
+  }, [nVal, isVisualizing]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  useVisualizerReset(() => {
+    setNVal("3");
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  });
+
+  const handleGo = (e) => {
+    e.preventDefault();
+    const n = parseInt(nVal, 10);
+    if (isNaN(n) || n < 1) {
+      setErrorMsg("Please enter an integer >= 1.");
+      return;
+    }
+    if (n > 5) {
+      setErrorMsg("Please select N <= 5 to keep stack height and layouts clear.");
+      return;
+    }
+    setErrorMsg("");
+    setIsVisualizing(true);
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      engine.play();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const activeFrameData = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        stack: [],
+        printed: [],
+        activeLine: 0,
+        description: "Enter N (between 1 and 5) and click Visualize Go!",
+      };
+
+  const activeStack = activeFrameData.stack || [];
+  const activeLine = activeFrameData.activeLine;
+  const printedList = activeFrameData.printed || [];
+
+  const stackColors = {
+    calling: "bg-[#e0f2fe] dark:bg-sky-950/40 border-sky-400 dark:border-sky-700 text-sky-800 dark:text-sky-200",
+    checking_base: "bg-[#fef3c7] dark:bg-amber-950/40 border-amber-400 dark:border-amber-700 text-amber-800 dark:text-amber-200",
+    base_case: "bg-[#dcfce7] dark:bg-emerald-950/40 border-emerald-400 dark:border-emerald-700 text-emerald-800 dark:text-emerald-200",
+    printing: "bg-[#fae8ff] dark:bg-purple-950/30 border-purple-400 dark:border-purple-800 text-purple-700 dark:text-purple-300",
+    waiting: "bg-gray-100 dark:bg-zinc-800 border-gray-300 dark:border-zinc-700 text-gray-500 dark:text-zinc-400",
+    returning: "bg-[#fee2e2] dark:bg-rose-950/40 border-rose-400 dark:border-rose-700 text-rose-800 dark:text-rose-200",
+  };
+
+  return (
+    <main className="container mx-auto">
+      {/* Configuration Header */}
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8"
+      >
+        <div className="flex flex-col sm:flex-row items-end gap-4">
+          <div className="flex-1">
+            <label className="block text-gray-700 dark:text-gray-300 mb-2 font-medium" htmlFor="nVal">
+              Input Value (N)
+            </label>
+            <input
+              type="number"
+              id="nVal"
+              min="1"
+              max="5"
+              value={nVal}
+              onChange={(e) => {
+                setNVal(e.target.value);
+                handleReset();
+              }}
+              className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#0d9488] focus:outline-none focus:ring-2 focus:ring-[#0d9488]/30 transition duration-300"
+              placeholder="e.g. 3"
+              disabled={isVisualizing}
+            />
+          </div>
+
+          <div className="flex gap-2">
+            <GoButton onClick={handleGo} isAnimating={isVisualizing} disabled={isVisualizing} />
+            <ResetButton onReset={handleReset} isAnimating={isVisualizing} />
+          </div>
+        </div>
+
+        {errorMsg && <p className="text-red-500 dark:text-red-400 text-xs font-semibold mt-2">{errorMsg}</p>}
+
+        {isVisualizing && frames.length > 0 && (
+          <div className="mt-4">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </form>
+
+      {/* Narrative Explanation Block */}
+      <div className="max-w-4xl mx-auto mb-8 p-4 rounded-xl border border-teal-100 bg-teal-50/40 dark:border-teal-900/30 dark:bg-teal-950/10 text-teal-800 dark:text-teal-200">
+        <p className="text-center font-medium text-sm leading-relaxed">
+          {activeFrameData.description}
+        </p>
+      </div>
+
+      {/* Visual Workspace */}
+      <div className="max-w-4xl mx-auto grid gap-6 md:grid-cols-12 mb-8">
+        {/* Left Side: Call Stack */}
+        <div className="md:col-span-4 rounded-xl bg-white dark:bg-[#1a1a1a] p-5 shadow border border-gray-200 dark:border-zinc-800">
+          <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider text-center">
+            Active Call Stack
+          </h3>
+          {activeStack.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-72 border-2 border-dashed border-gray-200 dark:border-zinc-800 rounded-xl">
+              <p className="text-gray-400 dark:text-zinc-500 text-sm">Call Stack is Empty</p>
+            </div>
+          ) : (
+            <div className="flex flex-col-reverse gap-2 items-center justify-end h-80 overflow-y-auto p-4 border border-gray-100 dark:border-zinc-800 rounded-xl bg-gray-50/50 dark:bg-zinc-900/20">
+              {activeStack.map((frame, index) => {
+                const isTop = index === activeStack.length - 1;
+                const statusClass = stackColors[frame.status] || stackColors.waiting;
+
+                return (
+                  <div
+                    key={frame.id}
+                    className={`w-full max-w-[280px] p-3 rounded-lg border flex flex-col items-center transition-all duration-300 ${statusClass} ${
+                      isTop ? "ring-2 ring-[#a435f0] dark:ring-[#a435f0] ring-offset-2 dark:ring-offset-zinc-950 shadow-md" : "scale-[0.98]"
+                    }`}
+                  >
+                    <div className="flex justify-between w-full font-mono text-xs font-semibold">
+                      <span>print1ToN(i = {frame.i})</span>
+                      <span className="capitalize text-[10px]">{frame.status.replace("_", " ")}</span>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Middle: Printed output */}
+        <div className="md:col-span-4 rounded-xl bg-white dark:bg-[#1a1a1a] p-5 shadow border border-gray-200 dark:border-zinc-800 flex flex-col items-center">
+          <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider text-center">
+            Terminal Output
+          </h3>
+          <div className="w-full flex-1 flex flex-col items-center justify-center gap-2 p-4 bg-zinc-950 text-[#a435f0] font-mono text-lg rounded-xl min-h-64 shadow-inner border border-zinc-800">
+            {printedList.length === 0 ? (
+              <span className="text-zinc-600 text-xs">No output printed yet</span>
+            ) : (
+              <div className="flex flex-col gap-1 items-center">
+                {printedList.map((val, idx) => (
+                  <span key={idx} className="animate-fade-in font-bold">
+                    &gt; {val}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Right Side: Code Block Trace */}
+        <div className="md:col-span-4 flex flex-col">
+          <div className="w-full border border-gray-200 dark:border-zinc-800 rounded-xl overflow-hidden bg-zinc-950 font-mono text-xs shadow-inner h-full flex flex-col">
+            <div className="flex items-center justify-between px-4 py-2 bg-zinc-900 border-b border-zinc-800">
+              <span className="text-zinc-400 font-semibold">Active Code Trace</span>
+            </div>
+            <div className="p-4 text-zinc-300 leading-relaxed flex-1">
+              {codeLines.map((ln) => {
+                const isActive = ln.line === activeLine;
+                return (
+                  <div
+                    key={ln.line}
+                    className={`flex gap-4 px-2 py-0.5 rounded transition-colors duration-200 ${
+                      isActive ? "bg-[#a435f0]/20 border-l-4 border-[#a435f0] text-white font-bold" : "border-l-4 border-transparent"
+                    }`}
+                  >
+                    <span className="text-zinc-600 select-none w-4 text-right">{ln.line}</span>
+                    <span>{ln.code}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default Print1ToNAnimation;
diff --git a/src/app/visualizer/recursion/print-1-to-n/codeBlock.jsx b/src/app/visualizer/recursion/print-1-to-n/codeBlock.jsx
new file mode 100644
index 000000000..3525ef79c
--- /dev/null
+++ b/src/app/visualizer/recursion/print-1-to-n/codeBlock.jsx
@@ -0,0 +1,92 @@
+"use client";
+import React from "react";
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const printCode = {
+  javascript: `// Print 1 to N in JavaScript
+function print1ToN(i, n) {
+  if (i > n) {
+    return; // Base case
+  }
+  console.log(i); // Process
+  print1ToN(i + 1, n); // Recursive case
+}
+
+// Example call:
+print1ToN(1, 5); // Prints 1, 2, 3, 4, 5`,
+
+  python: `# Print 1 to N in Python
+def print_1_to_n(i, n):
+    if i > n:
+        return  # Base case
+    print(i)  # Process
+    print_1_to_n(i + 1, n)  # Recursive case
+
+# Example call:
+print_1_to_n(1, 5) # Prints 1, 2, 3, 4, 5`,
+
+  java: `// Print 1 to N in Java
+public class Print1ToN {
+    public static void print1ToN(int i, int n) {
+        if (i > n) {
+            return; // Base case
+        }
+        System.out.println(i); // Process
+        print1ToN(i + 1, n); // Recursive case
+    }
+
+    public static void main(String[] args) {
+        print1ToN(1, 5); // Prints 1 to 5
+    }
+}`,
+
+  c: `// Print 1 to N in C
+#include <stdio.h>
+
+void print1ToN(int i, int n) {
+    if (i > n) {
+        return; // Base case
+    }
+    printf("%d\\n", i); // Process
+    print1ToN(i + 1, n); // Recursive case
+}
+
+int main() {
+    print1ToN(1, 5); // Prints 1 to 5
+    return 0;
+}`,
+
+  cpp: `// Print 1 to N in C++
+#include <iostream>
+
+void print1ToN(int i, int n) {
+    if (i > n) {
+        return; // Base case
+    }
+    std::cout << i << std::endl; // Process
+    print1ToN(i + 1, n); // Recursive case
+}
+
+int main() {
+    print1ToN(1, 5); // Prints 1 to 5
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: "print1ToN.js",
+  python: "print_1_to_n.py",
+  java: "Print1ToN.java",
+  c: "print_1_to_n.c",
+  cpp: "print_1_to_n.cpp",
+};
+
+const Print1ToNCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={printCode}
+    fileNames={fileNames}
+  />
+);
+
+export default Print1ToNCode;
diff --git a/src/app/visualizer/recursion/print-1-to-n/content.jsx b/src/app/visualizer/recursion/print-1-to-n/content.jsx
new file mode 100644
index 000000000..18bce73d1
--- /dev/null
+++ b/src/app/visualizer/recursion/print-1-to-n/content.jsx
@@ -0,0 +1,58 @@
+"use client";
+import React from "react";
+
+const Content = () => {
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8 shadow-sm">
+        {/* Concept */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Basic Recursion: Print 1 to N
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <p className="leading-relaxed">
+              Printing numbers from $1$ to $N$ is one of the simplest recursive exercises. It illustrates how we track a loop counter inside function parameters instead of relying on a standard <code>for</code> or <code>while</code> loop.
+            </p>
+            <p className="mt-4 leading-relaxed font-semibold">
+              The recursive function signature is:
+            </p>
+            <p className="mt-2 font-mono bg-gray-50 dark:bg-zinc-900 p-3 rounded-lg border border-gray-155 dark:border-zinc-800 text-center text-md">
+              print1ToN(i, n)
+            </p>
+            <p className="mt-4 leading-relaxed">
+              We invoke the function initially with $i = 1$. In each recursive step, we print $i$ and call `print1ToN(i + 1, n)` to increment our virtual loop counter.
+            </p>
+            <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              <li><strong>Base Case:</strong> <code>i &gt; n</code>. Once $i$ exceeds $n$, we return to prevent infinite loops.</li>
+              <li><strong>Recursive Step:</strong> Increment $i$ by $1$ and call the function again.</li>
+            </ul>
+          </div>
+        </section>
+
+        {/* Complexity Analysis */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-3">
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Time Complexity: O(N)</span>
+              <br />
+              The function makes exactly $N+1$ recursive calls to print numbers from 1 to N.
+            </p>
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Space Complexity: O(N)</span>
+              <br />
+              At the deepest recursion level, there are $N+1$ stack frames concurrently on the Call Stack. Thus, auxiliary space is linear, $O(N)$.
+            </p>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/recursion/print-1-to-n/quiz.jsx b/src/app/visualizer/recursion/print-1-to-n/quiz.jsx
new file mode 100644
index 000000000..4cba08506
--- /dev/null
+++ b/src/app/visualizer/recursion/print-1-to-n/quiz.jsx
@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const PrintQuiz = () => {
+  const questions = [
+    {
+      question: "What is the initial value of 'i' passed to print1ToN(i, n) to print from 1 to N?",
+      options: [
+        "0",
+        "1",
+        "N",
+        "N - 1"
+      ],
+      correctAnswer: 1,
+      explanation: "Since we want to print starting from 1, the parameter 'i' (acting as the loop counter) should be initialized to 1."
+    },
+    {
+      question: "Which condition represents the base case for printing 1 to N recursively?",
+      options: [
+        "i == n",
+        "i > n",
+        "i < 1",
+        "n == 0"
+      ],
+      correctAnswer: 1,
+      explanation: "To stop printing once we go past N, we check if i > n. This terminates the recursion and pops the stack frames."
+    },
+    {
+      question: "Where does the print statement (console.log(i)) sit in this basic recursion algorithm?",
+      options: [
+        "Before the recursive call (pre-order process)",
+        "After the recursive call (post-order process)",
+        "Inside the base case block",
+        "In a separate function entirely"
+      ],
+      correctAnswer: 0,
+      explanation: "We print the current value 'i' first, and then call print1ToN(i + 1, n). This is a pre-order process where the action happens on the way down the stack."
+    },
+    {
+      question: "What is the time complexity of printing 1 to N recursively?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N²)"
+      ],
+      correctAnswer: 2,
+      explanation: "The function executes N times to print N values, which gives O(N) linear time complexity."
+    },
+    {
+      question: "What is the maximum stack height during print1ToN(1, 4)?",
+      options: [
+        "2",
+        "4",
+        "5",
+        "8"
+      ],
+      correctAnswer: 2,
+      explanation: "The calls made are: print1ToN(1, 4) -> (2, 4) -> (3, 4) -> (4, 4) -> (5, 4). Thus, at most 5 frames reside on the stack."
+    }
+  ];
+
+  return <QuizEngine title="Print 1 to N Quiz" questions={questions} />;
+};
+
+export default PrintQuiz;
diff --git a/src/app/visualizer/recursion/print-n-to-1/AlgorithmClient.jsx b/src/app/visualizer/recursion/print-n-to-1/AlgorithmClient.jsx
new file mode 100644
index 000000000..9ce697ed2
--- /dev/null
+++ b/src/app/visualizer/recursion/print-n-to-1/AlgorithmClient.jsx
@@ -0,0 +1,36 @@
+import PrintNTo1Animation from "@/app/visualizer/recursion/print-n-to-1/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/recursion/print-n-to-1/codeBlock";
+import Quiz from "@/app/visualizer/recursion/print-n-to-1/quiz";
+import Content from "@/app/visualizer/recursion/print-n-to-1/content";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Recursion", "Basic Recursion")}
+      title="Basic Recursion"
+      headerDescription="Observe the stack frame behavior while counting down from N to 1 using linear recursion."
+      headerActions={<ArticleActions />}
+      animation={<PrintNTo1Animation />}
+      content={<Content />}
+      code={<Code />}
+      quiz={<Quiz />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[
+            { text: "Print 1 to N", url: "/visualizer/recursion/print-1-to-n" },
+            { text: "Sum of First N Numbers", url: "/visualizer/recursion/sum-of-n" },
+            { text: "Factorial of N", url: "/visualizer/recursion/factorial" }
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/recursion/print-n-to-1/animation.jsx b/src/app/visualizer/recursion/print-n-to-1/animation.jsx
new file mode 100644
index 000000000..6a216d290
--- /dev/null
+++ b/src/app/visualizer/recursion/print-n-to-1/animation.jsx
@@ -0,0 +1,251 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import ResetButton from "@/app/components/ui/resetButton";
+import GoButton from "@/app/components/ui/goButton";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+import { generatePrintNTo1Frames } from "@/features/algorithms/recursion/printNTo1Logic";
+
+const codeLines = [
+  { line: 1, code: "function printNTo1(i) {" },
+  { line: 2, code: "  if (i < 1) return;" },
+  { line: 3, code: "  console.log(i);" },
+  { line: 4, code: "  printNTo1(i - 1);" },
+  { line: 5, code: "}" },
+];
+
+const PrintNTo1Animation = () => {
+  const [nVal, setNVal] = useState("3");
+  const [isVisualizing, setIsVisualizing] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const frames = useMemo(() => {
+    if (!isVisualizing) return [];
+    const n = parseInt(nVal, 10);
+    if (isNaN(n) || n < 1) return [];
+    return Array.from(generatePrintNTo1Frames(n));
+  }, [nVal, isVisualizing]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  useVisualizerReset(() => {
+    setNVal("3");
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  });
+
+  const handleGo = (e) => {
+    e.preventDefault();
+    const n = parseInt(nVal, 10);
+    if (isNaN(n) || n < 1) {
+      setErrorMsg("Please enter an integer >= 1.");
+      return;
+    }
+    if (n > 5) {
+      setErrorMsg("Please select N <= 5 to keep stack height and layouts clear.");
+      return;
+    }
+    setErrorMsg("");
+    setIsVisualizing(true);
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      engine.play();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const activeFrameData = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        stack: [],
+        printed: [],
+        activeLine: 0,
+        description: "Enter N (between 1 and 5) and click Visualize Go!",
+      };
+
+  const activeStack = activeFrameData.stack || [];
+  const activeLine = activeFrameData.activeLine;
+  const printedList = activeFrameData.printed || [];
+
+  const stackColors = {
+    calling: "bg-[#e0f2fe] dark:bg-sky-950/40 border-sky-400 dark:border-sky-700 text-sky-800 dark:text-sky-200",
+    checking_base: "bg-[#fef3c7] dark:bg-amber-950/40 border-amber-400 dark:border-amber-700 text-amber-800 dark:text-amber-200",
+    base_case: "bg-[#dcfce7] dark:bg-emerald-950/40 border-emerald-400 dark:border-emerald-700 text-emerald-800 dark:text-emerald-200",
+    printing: "bg-[#fae8ff] dark:bg-purple-950/30 border-purple-400 dark:border-purple-800 text-purple-700 dark:text-purple-300",
+    waiting: "bg-gray-100 dark:bg-zinc-800 border-gray-300 dark:border-zinc-700 text-gray-500 dark:text-zinc-400",
+    returning: "bg-[#fee2e2] dark:bg-rose-950/40 border-rose-400 dark:border-rose-700 text-rose-800 dark:text-rose-200",
+  };
+
+  return (
+    <main className="container mx-auto">
+      {/* Configuration Header */}
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8"
+      >
+        <div className="flex flex-col sm:flex-row items-end gap-4">
+          <div className="flex-1">
+            <label className="block text-gray-700 dark:text-gray-300 mb-2 font-medium" htmlFor="nVal">
+              Input Value (N)
+            </label>
+            <input
+              type="number"
+              id="nVal"
+              min="1"
+              max="5"
+              value={nVal}
+              onChange={(e) => {
+                setNVal(e.target.value);
+                handleReset();
+              }}
+              className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#0d9488] focus:outline-none focus:ring-2 focus:ring-[#0d9488]/30 transition duration-300"
+              placeholder="e.g. 3"
+              disabled={isVisualizing}
+            />
+          </div>
+
+          <div className="flex gap-2">
+            <GoButton onClick={handleGo} isAnimating={isVisualizing} disabled={isVisualizing} />
+            <ResetButton onReset={handleReset} isAnimating={isVisualizing} />
+          </div>
+        </div>
+
+        {errorMsg && <p className="text-red-500 dark:text-red-400 text-xs font-semibold mt-2">{errorMsg}</p>}
+
+        {isVisualizing && frames.length > 0 && (
+          <div className="mt-4">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </form>
+
+      {/* Narrative Explanation Block */}
+      <div className="max-w-4xl mx-auto mb-8 p-4 rounded-xl border border-teal-100 bg-teal-50/40 dark:border-teal-900/30 dark:bg-teal-950/10 text-teal-800 dark:text-teal-200">
+        <p className="text-center font-medium text-sm leading-relaxed">
+          {activeFrameData.description}
+        </p>
+      </div>
+
+      {/* Visual Workspace */}
+      <div className="max-w-4xl mx-auto grid gap-6 md:grid-cols-12 mb-8">
+        {/* Left Side: Call Stack */}
+        <div className="md:col-span-4 rounded-xl bg-white dark:bg-[#1a1a1a] p-5 shadow border border-gray-200 dark:border-zinc-800">
+          <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider text-center">
+            Active Call Stack
+          </h3>
+          {activeStack.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-72 border-2 border-dashed border-gray-200 dark:border-zinc-800 rounded-xl">
+              <p className="text-gray-400 dark:text-zinc-500 text-sm">Call Stack is Empty</p>
+            </div>
+          ) : (
+            <div className="flex flex-col-reverse gap-2 items-center justify-end h-80 overflow-y-auto p-4 border border-gray-100 dark:border-zinc-800 rounded-xl bg-gray-50/50 dark:bg-zinc-900/20">
+              {activeStack.map((frame, index) => {
+                const isTop = index === activeStack.length - 1;
+                const statusClass = stackColors[frame.status] || stackColors.waiting;
+
+                return (
+                  <div
+                    key={frame.id}
+                    className={`w-full max-w-[280px] p-3 rounded-lg border flex flex-col items-center transition-all duration-300 ${statusClass} ${
+                      isTop ? "ring-2 ring-[#a435f0] dark:ring-[#a435f0] ring-offset-2 dark:ring-offset-zinc-950 shadow-md" : "scale-[0.98]"
+                    }`}
+                  >
+                    <div className="flex justify-between w-full font-mono text-xs font-semibold">
+                      <span>printNTo1(i = {frame.i})</span>
+                      <span className="capitalize text-[10px]">{frame.status.replace("_", " ")}</span>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Middle: Printed output */}
+        <div className="md:col-span-4 rounded-xl bg-white dark:bg-[#1a1a1a] p-5 shadow border border-gray-200 dark:border-zinc-800 flex flex-col items-center">
+          <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider text-center">
+            Terminal Output
+          </h3>
+          <div className="w-full flex-1 flex flex-col items-center justify-center gap-2 p-4 bg-zinc-950 text-[#a435f0] font-mono text-lg rounded-xl min-h-64 shadow-inner border border-zinc-800">
+            {printedList.length === 0 ? (
+              <span className="text-zinc-600 text-xs">No output printed yet</span>
+            ) : (
+              <div className="flex flex-col gap-1 items-center">
+                {printedList.map((val, idx) => (
+                  <span key={idx} className="animate-fade-in font-bold">
+                    &gt; {val}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Right Side: Code Block Trace */}
+        <div className="md:col-span-4 flex flex-col">
+          <div className="w-full border border-gray-200 dark:border-zinc-800 rounded-xl overflow-hidden bg-zinc-950 font-mono text-xs shadow-inner h-full flex flex-col">
+            <div className="flex items-center justify-between px-4 py-2 bg-zinc-900 border-b border-zinc-800">
+              <span className="text-zinc-400 font-semibold">Active Code Trace</span>
+            </div>
+            <div className="p-4 text-zinc-300 leading-relaxed flex-1">
+              {codeLines.map((ln) => {
+                const isActive = ln.line === activeLine;
+                return (
+                  <div
+                    key={ln.line}
+                    className={`flex gap-4 px-2 py-0.5 rounded transition-colors duration-200 ${
+                      isActive ? "bg-[#a435f0]/20 border-l-4 border-[#a435f0] text-white font-bold" : "border-l-4 border-transparent"
+                    }`}
+                  >
+                    <span className="text-zinc-600 select-none w-4 text-right">{ln.line}</span>
+                    <span>{ln.code}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default PrintNTo1Animation;
diff --git a/src/app/visualizer/recursion/print-n-to-1/codeBlock.jsx b/src/app/visualizer/recursion/print-n-to-1/codeBlock.jsx
new file mode 100644
index 000000000..2aa216d02
--- /dev/null
+++ b/src/app/visualizer/recursion/print-n-to-1/codeBlock.jsx
@@ -0,0 +1,92 @@
+"use client";
+import React from "react";
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const printCode = {
+  javascript: `// Print N to 1 in JavaScript
+function printNTo1(i) {
+  if (i < 1) {
+    return; // Base case
+  }
+  console.log(i); // Process
+  printNTo1(i - 1); // Recursive case
+}
+
+// Example call:
+printNTo1(5); // Prints 5, 4, 3, 2, 1`,
+
+  python: `# Print N to 1 in Python
+def print_n_to_1(i):
+    if i < 1:
+        return  # Base case
+    print(i)  # Process
+    print_n_to_1(i - 1)  # Recursive case
+
+# Example call:
+print_n_to_1(5) # Prints 5, 4, 3, 2, 1`,
+
+  java: `// Print N to 1 in Java
+public class PrintNTo1 {
+    public static void printNTo1(int i) {
+        if (i < 1) {
+            return; // Base case
+        }
+        System.out.println(i); // Process
+        printNTo1(i - 1); // Recursive case
+    }
+
+    public static void main(String[] args) {
+        printNTo1(5); // Prints 5 down to 1
+    }
+}`,
+
+  c: `// Print N to 1 in C
+#include <stdio.h>
+
+void printNTo1(int i) {
+    if (i < 1) {
+        return; // Base case
+    }
+    printf("%d\\n", i); // Process
+    printNTo1(i - 1); // Recursive case
+}
+
+int main() {
+    printNTo1(5); // Prints 5 down to 1
+    return 0;
+}`,
+
+  cpp: `// Print N to 1 in C++
+#include <iostream>
+
+void printNTo1(int i) {
+    if (i < 1) {
+        return; // Base case
+    }
+    std::cout << i << std::endl; // Process
+    printNTo1(i - 1); // Recursive case
+}
+
+int main() {
+    printNTo1(5); // Prints 5 down to 1
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: "printNTo1.js",
+  python: "print_n_to_1.py",
+  java: "PrintNTo1.java",
+  c: "print_n_to_1.c",
+  cpp: "print_n_to_1.cpp",
+};
+
+const PrintNTo1Code = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={printCode}
+    fileNames={fileNames}
+  />
+);
+
+export default PrintNTo1Code;
diff --git a/src/app/visualizer/recursion/print-n-to-1/content.jsx b/src/app/visualizer/recursion/print-n-to-1/content.jsx
new file mode 100644
index 000000000..fb653192d
--- /dev/null
+++ b/src/app/visualizer/recursion/print-n-to-1/content.jsx
@@ -0,0 +1,58 @@
+"use client";
+import React from "react";
+
+const Content = () => {
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8 shadow-sm">
+        {/* Concept */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Basic Recursion: Print N to 1
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <p className="leading-relaxed">
+              Counting down recursively from $N$ to $1$ is another fundamental exercise. In this configuration, we initialize the loop parameter $i$ to $N$, and decrement it towards the base case of $0$.
+            </p>
+            <p className="mt-4 leading-relaxed font-semibold">
+              The recursive function signature is:
+            </p>
+            <p className="mt-2 font-mono bg-gray-50 dark:bg-zinc-900 p-3 rounded-lg border border-gray-155 dark:border-zinc-800 text-center text-md">
+              printNTo1(i)
+            </p>
+            <p className="mt-4 leading-relaxed">
+              The parameters and cases work as follows:
+            </p>
+            <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              <li><strong>Base Case:</strong> <code>i &lt; 1</code>. Once our counter goes below 1, we exit.</li>
+              <li><strong>Recursive Step:</strong> Decrement the counter and invoke `printNTo1(i - 1)`.</li>
+            </ul>
+          </div>
+        </section>
+
+        {/* Complexity Analysis */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-3">
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Time Complexity: O(N)</span>
+              <br />
+              The function makes exactly $N+1$ recursive calls to print numbers from N down to 1.
+            </p>
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Space Complexity: O(N)</span>
+              <br />
+              Just like printing 1 to N, there are at most $N+1$ active stack frames on the Call Stack. Thus, auxiliary space is linear, $O(N)$.
+            </p>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/recursion/print-n-to-1/quiz.jsx b/src/app/visualizer/recursion/print-n-to-1/quiz.jsx
new file mode 100644
index 000000000..d92e55d06
--- /dev/null
+++ b/src/app/visualizer/recursion/print-n-to-1/quiz.jsx
@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const PrintNQuiz = () => {
+  const questions = [
+    {
+      question: "What is the correct base case for printing N down to 1?",
+      options: [
+        "i == 0",
+        "i < 1",
+        "i > n",
+        "i == 1"
+      ],
+      correctAnswer: 1,
+      explanation: "To print down to 1, we stop when 'i' is less than 1 (i.e. 0). Hence, i < 1 is the base case."
+    },
+    {
+      question: "What argument is passed to the recursive call in printNTo1(i)?",
+      options: [
+        "i + 1",
+        "i - 1",
+        "i",
+        "n"
+      ],
+      correctAnswer: 1,
+      explanation: "Since we are printing down to 1, each recursive step decreases the value of 'i' by 1: printNTo1(i - 1)."
+    },
+    {
+      question: "Which of the following values is printed first when calling printNTo1(4)?",
+      options: [
+        "1",
+        "4",
+        "0",
+        "None"
+      ],
+      correctAnswer: 1,
+      explanation: "Because console.log(i) is executed BEFORE the recursive call, the initial value passed (4) is printed first."
+    },
+    {
+      question: "What is the space complexity of the printNTo1(n) function?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N²)"
+      ],
+      correctAnswer: 2,
+      explanation: "The space complexity is O(N) due to the call stack height during execution (N+1 active frames)."
+    },
+    {
+      question: "If we want to print from N down to 1, but we write printNTo1(i+1) by mistake, what occurs?",
+      options: [
+        "The numbers are printed in ascending order",
+        "Nothing, the code runs fine",
+        "The call stack grows infinitely, resulting in a Stack Overflow",
+        "The compiler catches this as a syntax error"
+      ],
+      correctAnswer: 2,
+      explanation: "Since 'i' starts at N (>=1) and we add 1, 'i' will keep growing and never become less than 1, causing infinite recursion and a Stack Overflow."
+    }
+  ];
+
+  return <QuizEngine title="Print N to 1 Quiz" questions={questions} />;
+};
+
+export default PrintNQuiz;
diff --git a/src/app/visualizer/recursion/quiz/RecursionQuizClient.jsx b/src/app/visualizer/recursion/quiz/RecursionQuizClient.jsx
new file mode 100644
index 000000000..1904a0128
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/RecursionQuizClient.jsx
@@ -0,0 +1,131 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowLeft, Play } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function RecursionQuizClient() {
+  const quizzes = [
+    {
+      title: "Basic Recursion Quiz",
+      href: "/visualizer/recursion/basic-recursion/quiz",
+      filename: "basic_recursion_quiz.js",
+      description: "Test your understanding of base cases, recursive calls, and simple inductive definitions.",
+    },
+    {
+      title: "Functional & Parameterized Recursion Quiz",
+      href: "/visualizer/recursion/functional-parameterized/quiz",
+      filename: "functional_recursion_quiz.js",
+      description: "Test your understanding of parameter mutation, accumulation, and return value composition.",
+    },
+    {
+      title: "Multiple Recursive Calls Quiz",
+      href: "/visualizer/recursion/multiple-calls/quiz",
+      filename: "multiple_calls_quiz.js",
+      description: "Test your understanding of branched recursion, Fibonacci trees, and execution traces.",
+    },
+    {
+      title: "Recursion on Subsequences Quiz",
+      href: "/visualizer/recursion/subsequences/quiz",
+      filename: "subsequences_quiz.js",
+      description: "Test your knowledge of subset generation, take/don't-take patterns, and combination sums.",
+    },
+    {
+      title: "Backtracking Quiz",
+      href: "/visualizer/recursion/backtracking/quiz",
+      filename: "backtracking_quiz.js",
+      description: "Test your knowledge of state restoration, search space exploration, N-Queens, and maze traversals.",
+    },
+    {
+      title: "Recursion Trees Quiz",
+      href: "/visualizer/recursion/trees/quiz",
+      filename: "recursion_trees_quiz.js",
+      description: "Test your understanding of tree branches, total execution counts, and node depths.",
+    },
+    {
+      title: "Call Stack Visualization Quiz",
+      href: "/visualizer/recursion/stack/quiz",
+      filename: "call_stack_quiz.js",
+      description: "Test your understanding of activation records, stack frames, push/pop events, and StackOverflow errors.",
+    },
+    {
+      title: "Recursive Binary Search Quiz",
+      href: "/visualizer/recursion/binary-search/quiz",
+      filename: "recursive_binary_search_quiz.js",
+      description: "Test your knowledge of recursive partitioning, low/high pointer ranges, and base bounds.",
+    },
+    {
+      title: "Tower of Hanoi Quiz",
+      href: "/visualizer/recursion/tower-of-hanoi/quiz",
+      filename: "tower_of_hanoi_quiz.js",
+      description: "Test your understanding of optimal disk moves, auxiliary pegs, and recurrence relationships.",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-[var(--udemy-text)] dark:text-white transition-colors duration-300 pb-20">
+      
+      {/* Header / Hero */}
+      <section className="relative pt-6 pb-4">
+        <div className="max-w-[1100px] mx-auto px-4">
+          <Link href="/visualizer/quiz">
+            <button className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] dark:text-[var(--color-primary-light)] hover:opacity-85 transition-opacity mb-3">
+              <ArrowLeft size={16} />
+              <span>Back to all quizzes</span>
+            </button>
+          </Link>
+          <h1 className="text-2xl md:text-3xl font-black mb-2">
+            Recursion Quiz Portal
+          </h1>
+          <p className="text-[14px] text-surface-600 dark:text-surface-400 font-medium">
+            Test your understanding of recursive functions, backtracking, and call stack mechanics.
+          </p>
+        </div>
+      </section>
+
+      {/* Grid of Sub-quizzes */}
+      <div className="max-w-[1100px] mx-auto px-4 mt-8">
+        <div className="grid md:grid-cols-2 gap-6 items-stretch">
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4, delay: index * 0.05, ease: [0.22, 1, 0.36, 1] }}
+              whileHover={{ y: -6, scale: 1.015 }}
+              whileTap={{ scale: 0.985 }}
+              className="group flex flex-col h-full rounded-2xl border border-violet-500/20 dark:border-violet-500/30 bg-white dark:bg-[#1a1a1a] overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
+            >
+              {/* Terminal command execution style top bar */}
+              <div className="flex items-center justify-between px-4 py-2.5 bg-violet-500/10 dark:bg-violet-500/20 border-b border-violet-500/20 dark:border-violet-500/30">
+                <div className="flex items-center gap-1.5 font-mono text-[11px] text-surface-600 dark:text-surface-300">
+                  <span className="text-violet-500 font-bold">$</span>
+                  <span>node {quiz.filename}</span>
+                </div>
+              </div>
+
+              {/* Main Card Content */}
+              <div className="p-6 flex-1 flex flex-col justify-between">
+                <div>
+                  <h2 className="text-[20px] font-extrabold text-surface-900 dark:text-white group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors mb-2">
+                    {quiz.title}
+                  </h2>
+                  <p className="text-[14px] text-surface-600 dark:text-surface-300 leading-relaxed mb-6">
+                    {quiz.description}
+                  </p>
+                </div>
+
+                <Link href={quiz.href} className="block mt-auto w-full">
+                  <button className="w-full h-11 rounded-xl bg-violet-600 hover:bg-violet-700 dark:bg-violet-500 dark:hover:bg-violet-600 text-white font-bold text-[14px] flex items-center justify-center gap-2 shadow-sm hover:shadow-md transition-all">
+                    <span>Start Quiz</span>
+                    <Play size={14} className="fill-current" />
+                  </button>
+                </Link>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/quiz/backtracking/page.jsx b/src/app/visualizer/recursion/quiz/backtracking/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/backtracking/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/quiz/backtracking/quiz.jsx b/src/app/visualizer/recursion/quiz/backtracking/quiz.jsx
new file mode 100644
index 000000000..e742d6b5d
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/backtracking/quiz.jsx
@@ -0,0 +1,198 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const BacktrackingQuiz = () => {
+  const questions = [
+    {
+      question: "What is the primary idea behind backtracking?",
+      options: [
+        "Sorting elements",
+        "Exploring all possible solutions and undoing choices when needed",
+        "Searching elements linearly",
+        "Dividing arrays into halves",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Backtracking explores all possible choices and reverses decisions when a path does not lead to a valid solution.",
+    },
+    {
+      question: "Which operation is essential after exploring one recursive path in backtracking?",
+      options: [
+        "Sorting",
+        "Backtracking (undoing the last choice)",
+        "Binary Search",
+        "Hashing",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The last choice is undone so other possible paths can be explored.",
+    },
+    {
+      question: "Which of the following is a classic application of backtracking?",
+      options: [
+        "N-Queens Problem",
+        "Bubble Sort",
+        "Linear Search",
+        "Merge Sort",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "The N-Queens problem is one of the most common applications of backtracking.",
+    },
+    {
+      question: "What happens when a current solution violates a constraint?",
+      options: [
+        "The algorithm continues without changes",
+        "The algorithm backtracks to the previous state",
+        "The algorithm sorts the data",
+        "The recursion stops immediately",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Backtracking abandons invalid paths and returns to the previous decision point.",
+    },
+    {
+      question: "Which data structure is naturally used during recursive backtracking?",
+      options: [
+        "Queue",
+        "Stack",
+        "Heap",
+        "Graph",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Recursive calls are managed using the call stack.",
+    },
+    {
+      question: "Why is backtracking considered an exhaustive search technique?",
+      options: [
+        "It checks only one solution",
+        "It explores every possible valid choice systematically",
+        "It always uses dynamic programming",
+        "It avoids recursion",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Backtracking systematically explores all possible solutions while pruning invalid ones.",
+    },
+    {
+      question: "What is the purpose of pruning in backtracking?",
+      options: [
+        "To increase recursion depth",
+        "To eliminate unnecessary search paths",
+        "To sort the solution",
+        "To reduce memory usage to O(1)",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Pruning avoids exploring branches that cannot produce a valid solution.",
+    },
+    {
+      question: "Which statement best describes backtracking?",
+      options: [
+        "Choose → Explore → Undo",
+        "Sort → Search → Return",
+        "Divide → Merge → Repeat",
+        "Push → Pop → Sort",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Backtracking follows the pattern: choose an option, explore recursively, then undo the choice.",
+    },
+    {
+      question: "Which of the following problems is NOT commonly solved using backtracking?",
+      options: [
+        "Sudoku Solver",
+        "Rat in a Maze",
+        "Permutation Generation",
+        "Bubble Sort",
+      ],
+      correctAnswer: 3,
+      explanation:
+        "Bubble Sort is an iterative sorting algorithm and does not use backtracking.",
+    },
+    {
+      question: "What is the worst-case time complexity of many backtracking algorithms?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "Exponential",
+        "O(N)",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Many backtracking problems require exploring an exponential number of possibilities in the worst case.",
+    },
+    {
+      question: "What is the first step in a typical backtracking algorithm?",
+      options: [
+        "Choose a possible option",
+        "Sort the input",
+        "Print the answer",
+        "Delete all choices",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Backtracking begins by making a choice before exploring recursively.",
+    },
+    {
+      question: "Why do we remove the last choice after a recursive call?",
+      options: [
+        "To save memory",
+        "To restore the previous state",
+        "To stop recursion",
+        "To sort the answer",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Removing the last choice restores the previous state so other possibilities can be explored.",
+    },
+    {
+      question: "Which algorithmic technique is most closely related to backtracking?",
+      options: [
+        "Depth-First Search",
+        "Breadth-First Search",
+        "Binary Search",
+        "Merge Sort",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Backtracking explores one path completely before returning, similar to DFS.",
+    },
+    {
+      question: "Which problem commonly uses backtracking to generate all valid arrangements?",
+      options: [
+        "Permutations",
+        "Binary Search",
+        "Heap Sort",
+        "Counting Sort",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Generating permutations is a classic backtracking problem.",
+    },
+    {
+      question: "Why is a validity check performed before making recursive calls?",
+      options: [
+        "To prune invalid paths early",
+        "To increase recursion depth",
+        "To make recursion slower",
+        "To reduce the number of variables",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Checking constraints early avoids unnecessary recursive exploration.",
+    },
+  ];
+
+  return (
+    <QuizEngine
+      title="Backtracking Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default BacktrackingQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/quiz/basic-recursion/page.jsx b/src/app/visualizer/recursion/quiz/basic-recursion/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/basic-recursion/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/quiz/basic-recursion/quiz.jsx b/src/app/visualizer/recursion/quiz/basic-recursion/quiz.jsx
new file mode 100644
index 000000000..d39b571a3
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/basic-recursion/quiz.jsx
@@ -0,0 +1,197 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const BasicRecursionQuiz = () => {
+    const questions = [
+  {
+    question: "What is recursion?",
+    options: [
+      "A function calling itself",
+      "A loop inside another loop",
+      "A sorting algorithm",
+      "A searching technique",
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Recursion is a programming technique where a function calls itself to solve a problem.",
+  },
+  {
+    question: "Why is a base case necessary in recursion?",
+    options: [
+      "To increase recursion depth",
+      "To stop recursive calls",
+      "To improve sorting speed",
+      "To reduce memory usage",
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The base case prevents infinite recursion by providing a stopping condition.",
+  },
+  {
+    question: "What happens if a recursive function has no base case?",
+    options: [
+      "Nothing happens",
+      "It automatically stops",
+      "It causes Stack Overflow",
+      "It becomes iterative",
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Without a base case, recursive calls continue until the call stack overflows.",
+  },
+  {
+    question: "Which memory area stores recursive function calls?",
+    options: [
+      "Heap",
+      "Stack",
+      "Cache",
+      "ROM",
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Every recursive call creates a new stack frame in the call stack.",
+  },
+  {
+    question: "Which data structure is used internally during recursion?",
+    options: [
+      "Queue",
+      "Stack",
+      "Linked List",
+      "Graph",
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Recursion is implemented using the function call stack.",
+  },
+  {
+    question: "For printing numbers from 1 to N recursively, when should the print statement execute?",
+    options: [
+      "Before the recursive call",
+      "After the recursive call",
+      "Inside a loop",
+      "Never",
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Printing after the recursive call produces output from 1 to N.",
+  },
+  {
+    question: "For printing numbers from N to 1 recursively, when should the print statement execute?",
+    options: [
+      "Before the recursive call",
+      "After the recursive call",
+      "After returning",
+      "Never",
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Printing before the recursive call gives N down to 1.",
+  },
+  {
+    question: "What is Head Recursion?",
+    options: [
+      "Recursive call comes first",
+      "Recursive call comes last",
+      "No recursive call",
+      "Multiple recursive calls",
+    ],
+    correctAnswer: 0,
+    explanation:
+      "In head recursion, the recursive call is executed before any processing.",
+  },
+  {
+    question: "What is Tail Recursion?",
+    options: [
+      "Recursive call is the last operation",
+      "Recursive call is first",
+      "No base case",
+      "Two recursive calls",
+    ],
+    correctAnswer: 0,
+    explanation:
+      "In tail recursion, the recursive call is the final operation.",
+  },
+  {
+    question: "What is the time complexity of printing numbers from 1 to N recursively?",
+    options: [
+      "O(1)",
+      "O(log N)",
+      "O(N)",
+      "O(N²)",
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Each recursive call processes one number, so the complexity is O(N).",
+  },
+  {
+    question: "What is the space complexity of recursion for printing N numbers?",
+    options: [
+      "O(1)",
+      "O(log N)",
+      "O(N)",
+      "O(N²)",
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The recursion stack stores N function calls.",
+  },
+  {
+    question: "Which of the following problems commonly uses recursion?",
+    options: [
+      "Binary Search",
+      "Tree Traversal",
+      "Tower of Hanoi",
+      "All of the above",
+    ],
+    correctAnswer: 3,
+    explanation:
+      "All these problems are naturally solved using recursion.",
+  },
+  {
+    question: "What is a recursive call?",
+    options: [
+      "Calling another function",
+      "Calling the same function from itself",
+      "Calling a loop",
+      "Calling a class",
+    ],
+    correctAnswer: 1,
+    explanation:
+      "A recursive call occurs when a function invokes itself.",
+  },
+  {
+    question: "Which statement about recursion is correct?",
+    options: [
+      "Every recursive function must reach a base case",
+      "Recursion never uses memory",
+      "Recursion is always faster than iteration",
+      "Recursion cannot call itself",
+    ],
+    correctAnswer: 0,
+    explanation:
+      "A base case is required to terminate recursion safely.",
+  },
+  {
+    question: "Which statement best describes recursion?",
+    options: [
+      "Breaking a problem into smaller subproblems",
+      "Sorting without comparisons",
+      "Searching only in arrays",
+      "Using multiple loops",
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Recursion solves a problem by repeatedly solving smaller instances of the same problem.",
+  },
+];
+return (
+    <QuizEngine
+      title="Basic Recursion Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default BasicRecursionQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/quiz/binary-search/page.jsx b/src/app/visualizer/recursion/quiz/binary-search/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/binary-search/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/quiz/binary-search/quiz.jsx b/src/app/visualizer/recursion/quiz/binary-search/quiz.jsx
new file mode 100644
index 000000000..c7e4720ff
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/binary-search/quiz.jsx
@@ -0,0 +1,198 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const RecursiveBinarySearchQuiz = () => {
+  const questions = [
+    {
+      question: "What is the prerequisite for Recursive Binary Search?",
+      options: [
+        "The array must be sorted",
+        "The array must be reversed",
+        "The array must contain only positive numbers",
+        "The array must be unsorted",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Binary Search requires the array to be sorted before searching.",
+    },
+    {
+      question: "What is the base case when the target is found?",
+      options: [
+        "low > high",
+        "arr[mid] === target",
+        "mid === 0",
+        "high === low",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The recursion stops immediately when the middle element equals the target.",
+    },
+    {
+      question: "If the target is smaller than the middle element, where does the recursive search continue?",
+      options: [
+        "Left half",
+        "Right half",
+        "Entire array",
+        "It stops",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "The algorithm recursively searches the left half of the array.",
+    },
+    {
+      question: "What is the worst-case time complexity of Recursive Binary Search?",
+      options: [
+        "O(N)",
+        "O(log N)",
+        "O(N²)",
+        "O(1)",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Each recursive call halves the search space, giving O(log N).",
+    },
+    {
+      question: "What happens when low becomes greater than high?",
+      options: [
+        "The element is found",
+        "The search continues",
+        "The element is not present",
+        "The array is sorted",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "When low > high, there are no elements left to search.",
+    },
+    {
+      question: "Which recursive call is made when the target is greater than the middle element?",
+      options: [
+        "binarySearch(low, mid - 1)",
+        "binarySearch(mid + 1, high)",
+        "binarySearch(low, high)",
+        "binarySearch(mid, high)",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The search continues in the right half.",
+    },
+    {
+      question: "What is the space complexity of Recursive Binary Search?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N²)",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The recursion depth is logarithmic, so stack space is O(log N).",
+    },
+    {
+      question: "Which technique does Recursive Binary Search use?",
+      options: [
+        "Greedy",
+        "Divide and Conquer",
+        "Dynamic Programming",
+        "Backtracking",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Binary Search repeatedly divides the search space into halves.",
+    },
+    {
+      question: "How many recursive calls are made in each recursive step?",
+      options: [
+        "One",
+        "Two",
+        "Three",
+        "Four",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Only one recursive call is made depending on the comparison result.",
+    },
+    {
+      question: "Why is Recursive Binary Search faster than Linear Search?",
+      options: [
+        "It checks every element",
+        "It halves the search space every step",
+        "It uses two arrays",
+        "It sorts automatically",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Binary Search eliminates half of the remaining elements after each comparison.",
+    },
+    {
+  question: "What is the purpose of calculating the middle index in Recursive Binary Search?",
+  options: [
+    "To divide the search space into two halves",
+    "To sort the array",
+    "To find the largest element",
+    "To reverse the array"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "The middle index divides the array into two halves so that one half can be discarded after each comparison."
+},
+{
+  question: "What value is typically returned if the target element is not found?",
+  options: [
+    "-1",
+    "0",
+    "1",
+    "The last index"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Most Recursive Binary Search implementations return -1 to indicate that the target element does not exist in the array."
+},
+{
+  question: "Which statement correctly updates the search range when searching the left half?",
+  options: [
+    "high = mid - 1",
+    "low = mid + 1",
+    "low = mid",
+    "high = mid + 1"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "When the target is smaller than the middle element, the search continues in the left half by updating high to mid - 1."
+},
+{
+  question: "Approximately how many comparisons are needed to search an array of 32 elements in the worst case?",
+  options: [
+    "5",
+    "16",
+    "32",
+    "64"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Since log₂(32) = 5, Binary Search requires at most about 5 comparisons."
+},
+{
+  question: "Why is Recursive Binary Search considered efficient for large datasets?",
+  options: [
+    "Because it reduces the search space by half after each comparison",
+    "Because it checks every element one by one",
+    "Because it always finds the element in one comparison",
+    "Because it sorts the array during the search"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "By eliminating half of the remaining elements after every comparison, Recursive Binary Search achieves O(log N) time complexity."
+}
+  ];
+
+  return (
+    <QuizEngine
+      title="Recursive Binary Search Quiz"
+      questions={questions}
+    />
+  );
+};
+
+export default RecursiveBinarySearchQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/quiz/functional-parameterized/page.jsx b/src/app/visualizer/recursion/quiz/functional-parameterized/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/functional-parameterized/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/quiz/functional-parameterized/quiz.jsx b/src/app/visualizer/recursion/quiz/functional-parameterized/quiz.jsx
new file mode 100644
index 000000000..4d2fce83c
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/functional-parameterized/quiz.jsx
@@ -0,0 +1,198 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const FunctionalParameterizedQuiz = () => {
+  const questions = [
+    {
+      question: "What is the base case for calculating the sum of the first N numbers recursively?",
+      options: [
+        "n == 1",
+        "n <= 0",
+        "n == 2",
+        "n == -1",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The recursion stops when n <= 0, returning 0.",
+    },
+    {
+      question: "Which statement represents the recursive step in the Sum of N algorithm?",
+      options: [
+        "return 0;",
+        "return n + sum(n - 1);",
+        "return sum(n);",
+        "return n;",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The recursive call reduces the problem size by calling sum(n - 1).",
+    },
+    {
+      question: "What is the base case in the recursive factorial function?",
+      options: [
+        "n == 0",
+        "n == 2",
+        "n == 5",
+        "n == 10",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Factorial of 0 is defined as 1, making it the stopping condition.",
+    },
+    {
+      question: "Which expression correctly calculates factorial recursively?",
+      options: [
+        "n + factorial(n - 1)",
+        "factorial(n)",
+        "n * factorial(n - 1)",
+        "factorial(n + 1)",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Each recursive call multiplies the current value with factorial(n - 1).",
+    },
+    {
+      question: "What does factorial(5) return?",
+      options: [
+        "20",
+        "60",
+        "120",
+        "24",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "5 × 4 × 3 × 2 × 1 = 120.",
+    },
+    {
+      question: "When reversing an array recursively, which elements are swapped first?",
+      options: [
+        "Middle elements",
+        "Adjacent elements",
+        "First and last elements",
+        "Random elements",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "The recursion swaps the first and last elements before moving inward.",
+    },
+    {
+      question: "When should recursion stop while reversing an array?",
+      options: [
+        "When left index becomes greater than or equal to right index",
+        "After one swap",
+        "When left index is 0",
+        "Never",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "The recursion ends when the pointers meet or cross.",
+    },
+    {
+      question: "How many recursive calls are approximately required to reverse an array of size N?",
+      options: [
+        "N",
+        "N / 2",
+        "log N",
+        "1",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Each recursive call swaps two elements, so only about N/2 calls are needed.",
+    },
+    {
+      question: "While checking whether a string is a palindrome recursively, what is compared?",
+      options: [
+        "Adjacent characters",
+        "First and last characters",
+        "Only middle characters",
+        "ASCII values only",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Characters from both ends are compared and the pointers move inward.",
+    },
+    {
+      question: "When does the recursive palindrome algorithm stop?",
+      options: [
+        "When left >= right",
+        "When string length is even",
+        "After two comparisons",
+        "Never",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "If the pointers meet or cross, every previous comparison matched.",
+    },
+    {
+      question: "What happens if two compared characters do not match?",
+      options: [
+        "Continue recursion",
+        "Return true",
+        "Return false immediately",
+        "Swap characters",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "A mismatch proves the string is not a palindrome.",
+    },
+    {
+      question: "Functional recursion mainly returns:",
+      options: [
+        "A value",
+        "Nothing",
+        "Only arrays",
+        "Only strings",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Functional recursion solves the problem by returning a value from each recursive call.",
+    },
+    {
+      question: "Parameterized recursion mainly works by:",
+      options: [
+        "Passing accumulated values as parameters",
+        "Using loops only",
+        "Sorting arrays",
+        "Searching elements",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Parameterized recursion carries the answer through function parameters.",
+    },
+    {
+      question: "What is the time complexity of recursive factorial?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N²)",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Each recursive call processes one value until reaching the base case.",
+    },
+    {
+      question: "Which of the following is true for functional and parameterized recursion?",
+      options: [
+        "Both require a base case",
+        "Neither uses recursion",
+        "Only parameterized recursion needs a base case",
+        "Only functional recursion needs a base case",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Every recursive solution must include a base case to terminate recursion safely.",
+    }
+  ];
+
+  return (
+    <QuizEngine
+      title="Functional & Parameterized Recursion Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default FunctionalParameterizedQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/quiz/multiple-calls/page.jsx b/src/app/visualizer/recursion/quiz/multiple-calls/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/multiple-calls/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/quiz/multiple-calls/quiz.jsx b/src/app/visualizer/recursion/quiz/multiple-calls/quiz.jsx
new file mode 100644
index 000000000..5ea2200e0
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/multiple-calls/quiz.jsx
@@ -0,0 +1,188 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const FibonacciQuiz = () => {
+  const questions = [
+    {
+      question: "Why is the recursive implementation of Fibonacci called 'Tree Recursion'?",
+      options: [
+        "It stores values in a Binary Search Tree",
+        "The function calls itself twice per step, creating a branching tree-like execution structure",
+        "It only works on Tree data structures",
+        "It returns a tree-like nested list of numbers"
+      ],
+      correctAnswer: 1,
+      explanation: "Because the function makes multiple (specifically two) recursive calls inside the recursive step, the execution flow branches like a binary tree."
+    },
+    {
+      question: "For fib(4), how many times is the sub-problem fib(2) executed/called?",
+      options: [
+        "1",
+        "2",
+        "3",
+        "4"
+      ],
+      correctAnswer: 1,
+      explanation: "Tracing the tree: fib(4) calls fib(3) and fib(2). fib(3) calls fib(2) and fib(1). Thus, fib(2) is called twice: once as a direct child of fib(4), and once as a child of fib(3)."
+    },
+    {
+      question: "What is the primary drawback of the naive recursive Fibonacci algorithm?",
+      options: [
+        "It consumes too much disk storage",
+        "It performs a massive amount of redundant/duplicate calculations for the same states",
+        "It requires a graph layout library to run",
+        "It has a space complexity of O(2^N)"
+      ],
+      correctAnswer: 1,
+      explanation: "The lack of memoization or tracking calculated values causes the function to calculate the same sub-problems repeatedly, leading to poor performance."
+    },
+    {
+      question: "Although the time complexity of naive fib(N) is exponential, what is its space complexity (stack depth)?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(2^N)"
+      ],
+      correctAnswer: 2,
+      explanation: "The call stack only holds active frames on the current path from the root to a leaf node. Since the height of the recursion tree is N, the space complexity is linear, O(N)."
+    },
+    {
+      question: "Which optimization technique stores previously computed values of fib(x) to prevent redundant calls?",
+      options: [
+        "Memoization (caching)",
+        "De-escalation",
+        "Array flattening",
+        "LIFO frame clearing"
+      ],
+      correctAnswer: 0,
+      explanation: "Memoization caches the results of function calls so that when the same inputs occur again, the cached value can be returned instantly, optimizing time complexity to O(N)."
+    },
+    {
+  question: "What are the base cases of the Fibonacci recursive function?",
+  options: [
+    "n == 0 and n == 1",
+    "n == 1 and n == 2",
+    "n == 2 only",
+    "n == 0 only"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "The Fibonacci sequence starts with fib(0) = 0 and fib(1) = 1, which are the base cases."
+},
+{
+  question: "Which recursive formula is used to compute Fibonacci numbers?",
+  options: [
+    "fib(n) = fib(n - 1)",
+    "fib(n) = fib(n - 1) + fib(n - 2)",
+    "fib(n) = n × fib(n - 1)",
+    "fib(n) = fib(n / 2)"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Each Fibonacci number is the sum of the previous two Fibonacci numbers."
+},
+{
+  question: "Why does the recursion tree grow rapidly for larger values of n?",
+  options: [
+    "Each function call creates two more recursive calls",
+    "The compiler duplicates the function",
+    "The stack stores duplicate values",
+    "The array size doubles"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Every non-base call generates two recursive calls, causing exponential growth."
+},
+{
+  question: "What is the approximate time complexity of the naive recursive Fibonacci algorithm?",
+  options: [
+    "O(log N)",
+    "O(N)",
+    "O(2^N)",
+    "O(N²)"
+  ],
+  correctAnswer: 2,
+  explanation:
+    "The recursion tree grows exponentially because of repeated calculations."
+},
+{
+  question: "Which value is returned by fib(6)?",
+  options: [
+    "5",
+    "8",
+    "13",
+    "21"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "The sequence is 0, 1, 1, 2, 3, 5, 8. Therefore fib(6) = 8."
+},
+{
+  question: "Which traversal best represents recursive execution in Fibonacci?",
+  options: [
+    "Depth-First Search (DFS)",
+    "Breadth-First Search (BFS)",
+    "Binary Search",
+    "Linear Search"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Recursive calls are executed depth-first using the call stack."
+},
+{
+  question: "Why is memoization effective for Fibonacci recursion?",
+  options: [
+    "It reduces stack size to O(1)",
+    "It avoids recalculating the same Fibonacci values",
+    "It removes recursion completely",
+    "It increases recursion depth"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Memoization stores previously computed Fibonacci values, eliminating duplicate work."
+},
+{
+  question: "Which data structure is naturally used during recursive execution?",
+  options: [
+    "Queue",
+    "Stack",
+    "Heap",
+    "Linked List"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Recursive function calls are managed using the call stack."
+},
+{
+  question: "Which statement is TRUE about multiple recursive calls?",
+  options: [
+    "Only one recursive call is made",
+    "The function calls itself multiple times before returning",
+    "Recursion is replaced by loops",
+    "The function never reaches a base case"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Multiple recursive calls occur when a function invokes itself more than once in a single execution."
+},
+{
+  question: "Which algorithm is the classic example of multiple recursive calls?",
+  options: [
+    "Linear Search",
+    "Bubble Sort",
+    "Fibonacci Recursion",
+    "Insertion Sort"
+  ],
+  correctAnswer: 2,
+  explanation:
+    "The Fibonacci recursive algorithm is one of the most common examples of multiple recursive calls."
+},
+
+  ];
+
+  return <QuizEngine title="Fibonacci Recursion Quiz" questions={questions} />;
+};
+
+export default FibonacciQuiz;
diff --git a/src/app/visualizer/recursion/quiz/page.jsx b/src/app/visualizer/recursion/quiz/page.jsx
new file mode 100644
index 000000000..85e4c89d3
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/page.jsx
@@ -0,0 +1,5 @@
+import RecursionQuizClient from "./RecursionQuizClient";
+
+export default function Page() {
+  return <RecursionQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/quiz/stack/page.jsx b/src/app/visualizer/recursion/quiz/stack/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/stack/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/quiz/stack/quiz.jsx b/src/app/visualizer/recursion/quiz/stack/quiz.jsx
new file mode 100644
index 000000000..2f02cbaa2
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/stack/quiz.jsx
@@ -0,0 +1,198 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const CallStackQuiz = () => {
+  const questions = [
+    {
+  question: "What is the primary purpose of the call stack?",
+  options: [
+    "To store arrays",
+    "To manage function calls during program execution",
+    "To sort data",
+    "To store global variables"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "The call stack manages active function calls and their execution order."
+},
+{
+  question: "Which data structure is used to implement the call stack?",
+  options: [
+    "Queue",
+    "Stack",
+    "Linked List",
+    "Heap"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "The call stack follows the Last-In, First-Out (LIFO) principle."
+},
+{
+  question: "What happens when a function is called?",
+  options: [
+    "A stack frame is pushed onto the call stack",
+    "The stack is cleared",
+    "The function is removed",
+    "The heap is emptied"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Each function call creates a new stack frame that is pushed onto the call stack."
+},
+{
+  question: "What happens when a function completes execution?",
+  options: [
+    "A new frame is created",
+    "Its stack frame is popped from the call stack",
+    "The stack doubles in size",
+    "Nothing happens"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "When a function returns, its stack frame is removed from the call stack."
+},
+{
+  question: "What does LIFO stand for?",
+  options: [
+    "Last In, First Out",
+    "Last Input, First Output",
+    "Linear Input Function Output",
+    "Low Input Fast Output"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Stacks operate on the Last-In, First-Out principle."
+},
+{
+  question: "Which of the following can cause a Stack Overflow error?",
+  options: [
+    "Infinite recursion without a base case",
+    "Sorting an array",
+    "Binary Search",
+    "Using a queue"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Without a base case, recursive calls continue until the call stack is exhausted."
+},
+{
+  question: "What information is stored inside each stack frame?",
+  options: [
+    "Local variables and return address",
+    "Only global variables",
+    "Only arrays",
+    "Database records"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Each stack frame stores local variables, parameters, and the return address."
+},
+{
+  question: "Which recursive call returns first?",
+  options: [
+    "The first function call",
+    "The deepest recursive call",
+    "The root function",
+    "All return together"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "The deepest call finishes first because of the LIFO behavior of the call stack."
+},
+{
+  question: "Why is the call stack important in recursion?",
+  options: [
+    "It keeps track of active recursive function calls",
+    "It sorts recursive calls",
+    "It reduces recursion depth",
+    "It stores only output values"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "The call stack manages every recursive call until it returns."
+},
+{
+  question: "What is the maximum call stack depth determined by?",
+  options: [
+    "The recursion depth before reaching the base case",
+    "The number of loops",
+    "The array size only",
+    "The number of variables"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "The maximum stack depth equals the deepest level of active recursive calls."
+},
+{
+  question: "Why is the return address stored in a stack frame?",
+  options: [
+    "To know where program execution should continue after the function returns",
+    "To store the function parameters",
+    "To save memory",
+    "To sort the call stack"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "The return address tells the program where execution should resume once the current function finishes."
+},
+{
+  question: "Which operation occurs first when a recursive function is called?",
+  options: [
+    "The function immediately returns",
+    "A new stack frame is pushed onto the call stack",
+    "The stack is cleared",
+    "The base case is skipped"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Every recursive function call creates a new stack frame before executing its statements."
+},
+{
+  question: "How does the call stack behave during recursive function returns?",
+  options: [
+    "Frames are removed in the same order they were added",
+    "Frames are removed in reverse order of their addition",
+    "All frames are removed simultaneously",
+    "Frames remain in memory permanently"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Since the call stack follows LIFO, the most recently added frame returns first."
+},
+{
+  question: "Which of the following best describes stack unwinding?",
+  options: [
+    "Creating new recursive calls",
+    "Removing stack frames as recursive calls return",
+    "Sorting the stack frames",
+    "Copying stack frames into the heap"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Stack unwinding is the process of popping stack frames after reaching the base case and returning from recursion."
+},
+{
+  question: "What is the relationship between recursion depth and call stack size?",
+  options: [
+    "They are unrelated",
+    "The call stack grows as recursion depth increases",
+    "The call stack size always remains constant",
+    "The call stack decreases before recursion starts"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Each recursive call adds a new stack frame, so deeper recursion results in a larger call stack."
+},
+  ];
+
+  return (
+    <QuizEngine
+      title="Call Stack Visualization Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default CallStackQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/quiz/subsequences/page.jsx b/src/app/visualizer/recursion/quiz/subsequences/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/subsequences/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/quiz/subsequences/quiz.jsx b/src/app/visualizer/recursion/quiz/subsequences/quiz.jsx
new file mode 100644
index 000000000..f3c532f16
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/subsequences/quiz.jsx
@@ -0,0 +1,187 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const SubsequencesQuiz = () => {
+  const questions = [
+    {
+      question: "How many subsequences (subsets) are generated recursively for a set of size N?",
+      options: [
+        "N",
+        "N²",
+        "2^N",
+        "N!"
+      ],
+      correctAnswer: 2,
+      explanation: "Since each of the N elements can either be taken or skipped, there are 2 * 2 * ... * 2 (N times) = 2^N total subsets."
+    },
+    {
+      question: "What does the term 'backtracking' refer to in subsequences recursion?",
+      options: [
+        "Moving to a different topic in DSA",
+        "Undoing the last decision (e.g. popping the element we just added) to explore another choice",
+        "Decreasing the loop index counter to 0",
+        "Throwing a compilation error on stack overflow"
+      ],
+      correctAnswer: 1,
+      explanation: "Backtracking means restoring the state (e.g., removing the taken element via current.pop()) before exploring the alternate 'skip' choice."
+    },
+    {
+      question: "For array [1, 2, 3], which of the following is NOT a valid subsequence?",
+      options: [
+        "[1, 3]",
+        "[2, 1]",
+        "[2, 3]",
+        "[]"
+      ],
+      correctAnswer: 1,
+      explanation: "A subsequence must preserve the original order of elements. In [1, 2, 3], '2' comes after '1', so [2, 1] is invalid."
+    },
+    {
+      question: "What is the time complexity of generating all subsets recursively?",
+      options: [
+        "O(N)",
+        "O(N log N)",
+        "O(2^N)",
+        "O(N!)"
+      ],
+      correctAnswer: 2,
+      explanation: "Generating all subsets explores a binary decision tree of size 2^N, yielding O(2^N) exponential time complexity."
+    },
+    {
+      question: "What is the maximum number of active stack frames on the call stack when generating subsequences for an array of size N?",
+      options: [
+        "2",
+        "N + 1",
+        "2^N",
+        "N!"
+      ],
+      correctAnswer: 1,
+      explanation: "The depth of the recursion tree is N. Hence, at most N+1 stack frames are active on the call stack at any one time."
+    },
+    {
+  question: "What is a subsequence?",
+  options: [
+    "A contiguous part of an array",
+    "A sequence obtained by deleting zero or more elements without changing the order",
+    "A sorted array",
+    "A reversed array"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "A subsequence preserves the original order but does not require elements to be contiguous."
+},
+{
+  question: "How many subsequences can an array of size N have?",
+  options: [
+    "N",
+    "2N",
+    "2^N",
+    "N!"
+  ],
+  correctAnswer: 2,
+  explanation:
+    "Each element has two choices: include or exclude, resulting in 2^N subsequences."
+},
+{
+  question: "Which recursion decision is made for every element while generating subsequences?",
+  options: [
+    "Swap or not swap",
+    "Include or exclude",
+    "Sort or reverse",
+    "Increment or decrement"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Every element is either included in the current subsequence or excluded."
+},
+{
+  question: "What is the base case when generating all subsequences recursively?",
+  options: [
+    "When the array is sorted",
+    "When the index reaches the array length",
+    "When the array becomes empty",
+    "When one element remains"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Once the index reaches the end of the array, the current subsequence is complete."
+},
+{
+  question: "What is the time complexity of generating all subsequences?",
+  options: [
+    "O(N)",
+    "O(N log N)",
+    "O(2^N)",
+    "O(N²)"
+  ],
+  correctAnswer: 2,
+  explanation:
+    "All possible subsequences are generated, resulting in O(2^N) recursive calls."
+},
+{
+  question: "What is the auxiliary space complexity of recursion for generating subsequences?",
+  options: [
+    "O(1)",
+    "O(log N)",
+    "O(N)",
+    "O(2^N)"
+  ],
+  correctAnswer: 2,
+  explanation:
+    "The recursion stack grows to a maximum depth of N."
+},
+{
+  question: "Which data structure is commonly used to store the current subsequence during recursion?",
+  options: [
+    "Queue",
+    "Stack",
+    "Vector or ArrayList",
+    "HashMap"
+  ],
+  correctAnswer: 2,
+  explanation:
+    "A dynamic list (such as a vector or ArrayList) stores the elements of the current subsequence."
+},
+{
+  question: "What happens after returning from the recursive call where an element was included?",
+  options: [
+    "The program terminates",
+    "The included element is removed (backtracking)",
+    "The array is sorted",
+    "The recursion stops"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Backtracking removes the last added element before exploring the exclude path."
+},
+{
+  question: "Why is backtracking important in generating subsequences?",
+  options: [
+    "It reduces time complexity",
+    "It restores the current state before exploring another choice",
+    "It sorts the subsequences",
+    "It removes duplicate elements automatically"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Backtracking restores the previous state so that other recursive branches can be explored correctly."
+},
+{
+  question: "Which classic problems are solved using recursion on subsequences?",
+  options: [
+    "Subset Sum",
+    "Combination Sum",
+    "Print All Subsequences",
+    "All of the above"
+  ],
+  correctAnswer: 3,
+  explanation:
+    "Recursion on subsequences is the foundation for problems like Subset Sum, Combination Sum, and generating all subsequences."
+},
+  ];
+
+  return <QuizEngine title="Subsequences Quiz" questions={questions} />;
+};
+
+export default SubsequencesQuiz;
diff --git a/src/app/visualizer/recursion/quiz/tower-of-hanoi/page.jsx b/src/app/visualizer/recursion/quiz/tower-of-hanoi/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/tower-of-hanoi/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/quiz/tower-of-hanoi/quiz.jsx b/src/app/visualizer/recursion/quiz/tower-of-hanoi/quiz.jsx
new file mode 100644
index 000000000..31c980f4f
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/tower-of-hanoi/quiz.jsx
@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const HanoiQuiz = () => {
+  const questions = [
+    {
+      question: "What is the recurrence relation for the number of moves required to solve the Tower of Hanoi with N disks?",
+      options: [
+        "T(N) = T(N - 1) + 1",
+        "T(N) = 2T(N - 1) + 1",
+        "T(N) = 2T(N - 1) + N",
+        "T(N) = T(N - 1) + T(N - 2) + 1"
+      ],
+      correctAnswer: 1,
+      explanation: "To solve N disks, we must recursively move N-1 disks to the auxiliary peg (T(N-1)), move the largest disk to the destination (1 move), and move the N-1 disks from auxiliary to destination (T(N-1)). Thus, T(N) = 2T(N-1) + 1."
+    },
+    {
+      question: "What is the minimum number of moves required to solve a Tower of Hanoi puzzle with 4 disks?",
+      options: [
+        "7 moves",
+        "10 moves",
+        "15 moves",
+        "31 moves"
+      ],
+      correctAnswer: 2,
+      explanation: "Using the formula T(N) = 2^N - 1, for N = 4 we get 2^4 - 1 = 16 - 1 = 15 moves."
+    },
+    {
+      question: "If we have 3 disks on Peg A (Source) and want to move them to Peg C (Destination) using Peg B (Auxiliary), what is the first step in the recursion?",
+      options: [
+        "Move disk 1 from A to B",
+        "Move disk 1 from A to C",
+        "Move disk 2 from A to B",
+        "Move disk 3 from A to C"
+      ],
+      correctAnswer: 1,
+      explanation: "To move 3 disks from A to C, we must first recursively move the top 2 disks (disks 1 and 2) from A to B. To move 2 disks from A to B using C, we recursively move the top 1 disk (disk 1) from A to C. So the first physical move is disk 1 from A to C."
+    },
+    {
+      question: "What is the auxiliary space complexity of the recursive Tower of Hanoi algorithm?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(2^N)"
+      ],
+      correctAnswer: 2,
+      explanation: "The space complexity is determined by the maximum height of the recursion tree on the call stack. Since we recurse down to 1 disk in a linear branch, the maximum number of simultaneous stack frames is N. Thus, the space complexity is O(N)."
+    },
+    {
+      question: "Which of the following is NOT a rule of the Tower of Hanoi puzzle?",
+      options: [
+        "Only one disk can be moved at a time.",
+        "A disk can only be placed on a larger disk or an empty peg.",
+        "A disk can only be moved from the top of its stack.",
+        "Disks must be moved directly from source to destination without using the auxiliary peg."
+      ],
+      correctAnswer: 3,
+      explanation: "Disks are allowed (and must be) moved using the auxiliary peg. The auxiliary peg is essential to act as temporary storage to solve the puzzle."
+    }
+  ];
+
+  return <QuizEngine title="Tower of Hanoi Recursion Quiz" questions={questions} />;
+};
+
+export default HanoiQuiz;
diff --git a/src/app/visualizer/recursion/quiz/trees/page.jsx b/src/app/visualizer/recursion/quiz/trees/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/trees/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/quiz/trees/quiz.jsx b/src/app/visualizer/recursion/quiz/trees/quiz.jsx
new file mode 100644
index 000000000..d96313972
--- /dev/null
+++ b/src/app/visualizer/recursion/quiz/trees/quiz.jsx
@@ -0,0 +1,198 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const RecursionTreesQuiz = () => {
+  const questions = [
+    {
+  question: "What is a recursion tree?",
+  options: [
+    "A Binary Search Tree",
+    "A visual representation of recursive function calls",
+    "A linked list",
+    "A graph traversal algorithm"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "A recursion tree illustrates how recursive calls are generated and how they relate to each other."
+},
+{
+  question: "What does each node in a recursion tree represent?",
+  options: [
+    "A variable",
+    "A recursive function call",
+    "An array element",
+    "A loop iteration"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Each node corresponds to one invocation of the recursive function."
+},
+{
+  question: "The root of a recursion tree represents:",
+  options: [
+    "The last recursive call",
+    "The initial function call",
+    "The base case",
+    "The final answer"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "The root node is the original function call made by the program."
+},
+{
+  question: "Why are recursion trees useful?",
+  options: [
+    "To visualize recursive execution",
+    "To sort arrays",
+    "To search graphs",
+    "To reduce recursion depth"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Recursion trees help understand recursive calls, repeated work, and time complexity."
+},
+{
+  question: "Which recursive algorithm commonly forms a binary recursion tree?",
+  options: [
+    "Factorial",
+    "Linear Search",
+    "Fibonacci",
+    "Bubble Sort"
+  ],
+  correctAnswer: 2,
+  explanation:
+    "Each Fibonacci call generates two recursive calls, forming a binary recursion tree."
+},
+{
+  question: "The leaves of a recursion tree usually represent:",
+  options: [
+    "Recursive calls",
+    "Base cases",
+    "Sorting operations",
+    "Loops"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Leaf nodes occur when recursion reaches the base condition."
+},
+{
+  question: "What can recursion trees help estimate?",
+  options: [
+    "Time complexity",
+    "Memory address",
+    "CPU frequency",
+    "Network speed"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "By counting work at each level, recursion trees help estimate overall time complexity."
+},
+{
+  question: "What happens to recursion tree nodes after returning from recursion?",
+  options: [
+    "They remain forever",
+    "They are removed as the call stack unwinds",
+    "They become arrays",
+    "They are sorted"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "As recursive calls return, their stack frames are removed."
+},
+{
+  question: "Which traversal best matches recursive execution?",
+  options: [
+    "Breadth-First Search",
+    "Depth-First Search",
+    "Level Order",
+    "Binary Search"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Recursive calls naturally follow Depth-First Search."
+},
+{
+  question: "A recursion tree with repeated subproblems often suggests using:",
+  options: [
+    "Memoization",
+    "Bubble Sort",
+    "Binary Search",
+    "Hash Table only"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Memoization stores previously computed results to avoid repeated recursive work."
+},
+{
+  question: "In a recursion tree, what does the height of the tree usually represent?",
+  options: [
+    "The number of loops in the program",
+    "The maximum recursion depth",
+    "The number of variables",
+    "The number of array elements"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "The height of a recursion tree corresponds to the maximum depth of recursive calls before reaching the base case."
+},
+{
+  question: "Why do some recursion trees grow exponentially?",
+  options: [
+    "Because each recursive call creates multiple new recursive calls",
+    "Because arrays are sorted recursively",
+    "Because recursion uses loops",
+    "Because the compiler duplicates the code"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "When each recursive call generates multiple child calls (such as in Fibonacci), the number of nodes grows exponentially."
+},
+{
+  question: "Which part of a recursion tree helps identify repeated subproblems?",
+  options: [
+    "The root node",
+    "The leaf nodes",
+    "Repeated branches containing identical function calls",
+    "The tree height"
+  ],
+  correctAnswer: 2,
+  explanation:
+    "Repeated branches indicate the same subproblems are being solved multiple times, suggesting optimization through memoization."
+},
+{
+  question: "What happens to the recursion tree after all recursive calls complete?",
+  options: [
+    "It remains in memory permanently",
+    "The call stack unwinds and all recursive frames are removed",
+    "It becomes a binary tree",
+    "It is converted into an array"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "As each recursive call returns, its stack frame is removed until the recursion completely finishes."
+},
+{
+  question: "Which optimization technique eliminates repeated computations visible in a recursion tree?",
+  options: [
+    "Memoization",
+    "Selection Sort",
+    "Binary Search",
+    "Breadth-First Search"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Memoization stores previously computed results, preventing repeated evaluation of identical recursive calls."
+}
+  ];
+
+  return (
+    <QuizEngine
+      title="Recursion Trees Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default RecursionTreesQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/reverse-array/AlgorithmClient.jsx b/src/app/visualizer/recursion/reverse-array/AlgorithmClient.jsx
new file mode 100644
index 000000000..88f6da4ef
--- /dev/null
+++ b/src/app/visualizer/recursion/reverse-array/AlgorithmClient.jsx
@@ -0,0 +1,36 @@
+import ReverseArrayAnimation from "@/app/visualizer/recursion/reverse-array/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/recursion/reverse-array/codeBlock";
+import Quiz from "@/app/visualizer/recursion/reverse-array/quiz";
+import Content from "@/app/visualizer/recursion/reverse-array/content";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Recursion", "Functional & Parameterized Recursion")}
+      title="Functional & Parameterized Recursion"
+      headerDescription="Visualize how two-pointer recursion swaps elements from outer bounds inward to reverse an array."
+      headerActions={<ArticleActions />}
+      animation={<ReverseArrayAnimation />}
+      content={<Content />}
+      code={<Code />}
+      quiz={<Quiz />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[
+            { text: "String Palindrome Check", url: "/visualizer/recursion/palindrome" },
+            { text: "Print 1 to N", url: "/visualizer/recursion/print-1-to-n" },
+            { text: "Sum of First N Numbers", url: "/visualizer/recursion/sum-of-n" }
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/recursion/reverse-array/animation.jsx b/src/app/visualizer/recursion/reverse-array/animation.jsx
new file mode 100644
index 000000000..c76fe0467
--- /dev/null
+++ b/src/app/visualizer/recursion/reverse-array/animation.jsx
@@ -0,0 +1,295 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import ResetButton from "@/app/components/ui/resetButton";
+import GoButton from "@/app/components/ui/goButton";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+import { generateReverseFrames } from "@/features/algorithms/recursion/reverseArrayLogic";
+
+const codeLines = [
+  { line: 1, code: "function reverse(l, r, arr) {" },
+  { line: 2, code: "  if (l >= r) return;" },
+  { line: 3, code: "  swap(arr, l, r);" },
+  { line: 4, code: "  reverse(l + 1, r - 1, arr);" },
+  { line: 5, code: "}" },
+];
+
+const ReverseArrayAnimation = () => {
+  const [arrayInput, setArrayInput] = useState("10, 20, 30, 40, 50");
+  const [isVisualizing, setIsVisualizing] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const parsedArray = useMemo(() => {
+    return arrayInput
+      .split(",")
+      .map((el) => el.trim())
+      .filter((el) => el !== "")
+      .map((el) => parseInt(el, 10))
+      .filter((el) => !isNaN(el));
+  }, [arrayInput]);
+
+  const frames = useMemo(() => {
+    if (!isVisualizing || parsedArray.length === 0) return [];
+    return Array.from(generateReverseFrames(parsedArray));
+  }, [parsedArray, isVisualizing]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  useVisualizerReset(() => {
+    setArrayInput("10, 20, 30, 40, 50");
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  });
+
+  const handleGo = (e) => {
+    e.preventDefault();
+    if (parsedArray.length === 0) {
+      setErrorMsg("Please enter a valid comma-separated array of integers.");
+      return;
+    }
+    if (parsedArray.length > 7) {
+      setErrorMsg("Please keep array size <= 7 for clear visualization.");
+      return;
+    }
+    setErrorMsg("");
+    setIsVisualizing(true);
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  };
+
+  const generateRandomArray = () => {
+    const size = Math.floor(Math.random() * 4) + 4; // 4 to 7
+    const elements = Array.from({ length: size }, () => Math.floor(Math.random() * 90) + 10);
+    setArrayInput(elements.join(", "));
+    handleReset();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      engine.play();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const activeFrameData = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        stack: [],
+        arr: parsedArray,
+        activeLine: 0,
+        lIndex: -1,
+        rIndex: -1,
+        isSwapping: false,
+        description: "Provide an array and click Visualize Go!",
+      };
+
+  const activeStack = activeFrameData.stack || [];
+  const activeLine = activeFrameData.activeLine;
+  const currentArray = activeFrameData.arr || [];
+  const lPointer = activeFrameData.lIndex;
+  const rPointer = activeFrameData.rIndex;
+  const isSwapping = activeFrameData.isSwapping;
+
+  const stackColors = {
+    calling: "bg-[#e0f2fe] dark:bg-sky-950/40 border-sky-400 dark:border-sky-700 text-sky-800 dark:text-sky-200",
+    checking_base: "bg-[#fef3c7] dark:bg-amber-950/40 border-amber-400 dark:border-amber-700 text-amber-800 dark:text-amber-200",
+    base_case: "bg-[#dcfce7] dark:bg-emerald-950/40 border-emerald-400 dark:border-emerald-700 text-emerald-800 dark:text-emerald-200",
+    swapping: "bg-[#fae8ff] dark:bg-purple-950/30 border-purple-400 dark:border-purple-800 text-purple-700 dark:text-purple-300 shadow-[0_0_10px_rgba(168,85,247,0.2)]",
+    waiting: "bg-gray-100 dark:bg-zinc-800 border-gray-300 dark:border-zinc-700 text-gray-500 dark:text-zinc-400",
+    returning: "bg-[#fee2e2] dark:bg-rose-950/40 border-rose-400 dark:border-rose-700 text-rose-800 dark:text-rose-200",
+  };
+
+  return (
+    <main className="container mx-auto">
+      {/* Configuration Header */}
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8"
+      >
+        <div className="flex flex-col md:flex-row items-end gap-4">
+          <div className="flex-1 w-full">
+            <label className="block text-gray-700 dark:text-gray-300 mb-2 font-medium" htmlFor="arrayInput">
+              Array Elements (comma-separated)
+            </label>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                id="arrayInput"
+                value={arrayInput}
+                onChange={(e) => {
+                  setArrayInput(e.target.value);
+                  handleReset();
+                }}
+                className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#0d9488] focus:outline-none focus:ring-2 focus:ring-[#0d9488]/30 transition duration-300"
+                placeholder="e.g. 1, 2, 3, 4"
+                disabled={isVisualizing}
+              />
+              <button
+                type="button"
+                onClick={generateRandomArray}
+                className="px-4 py-2 font-bold bg-[#0d9488] text-white rounded-lg hover:bg-[#0b766e] transition-all duration-200"
+                disabled={isVisualizing}
+              >
+                Random
+              </button>
+            </div>
+          </div>
+
+          <div className="flex gap-2 w-full md:w-auto justify-end">
+            <GoButton onClick={handleGo} isAnimating={isVisualizing} disabled={isVisualizing} />
+            <ResetButton onReset={handleReset} isAnimating={isVisualizing} />
+          </div>
+        </div>
+
+        {errorMsg && <p className="text-red-500 dark:text-red-400 text-xs font-semibold mt-2">{errorMsg}</p>}
+
+        {isVisualizing && frames.length > 0 && (
+          <div className="mt-4">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </form>
+
+      {/* Narrative Explanation Block */}
+      <div className="max-w-4xl mx-auto mb-8 p-4 rounded-xl border border-teal-100 bg-teal-50/40 dark:border-teal-900/30 dark:bg-teal-950/10 text-teal-800 dark:text-teal-200">
+        <p className="text-center font-medium text-sm leading-relaxed">
+          {activeFrameData.description}
+        </p>
+      </div>
+
+      {/* Visual Workspace */}
+      <div className="max-w-4xl mx-auto grid gap-6 md:grid-cols-12 mb-8">
+        {/* Left Side: Call Stack */}
+        <div className="md:col-span-4 rounded-xl bg-white dark:bg-[#1a1a1a] p-5 shadow border border-gray-200 dark:border-zinc-800">
+          <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider text-center">
+            Active Call Stack
+          </h3>
+          {activeStack.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-72 border-2 border-dashed border-gray-200 dark:border-zinc-800 rounded-xl">
+              <p className="text-gray-400 dark:text-zinc-500 text-sm">Call Stack is Empty</p>
+            </div>
+          ) : (
+            <div className="flex flex-col-reverse gap-2 items-center justify-end h-80 overflow-y-auto p-4 border border-gray-100 dark:border-zinc-800 rounded-xl bg-gray-50/50 dark:bg-zinc-900/20">
+              {activeStack.map((frame, index) => {
+                const isTop = index === activeStack.length - 1;
+                const statusClass = stackColors[frame.status] || stackColors.waiting;
+
+                return (
+                  <div
+                    key={frame.id}
+                    className={`w-full max-w-[280px] p-3 rounded-lg border flex flex-col items-center transition-all duration-300 ${statusClass} ${
+                      isTop ? "ring-2 ring-primary dark:ring-primary-light ring-offset-2 dark:ring-offset-zinc-950 shadow-md" : "scale-[0.98]"
+                    }`}
+                  >
+                    <div className="flex justify-between w-full font-mono text-xs font-semibold">
+                      <span>reverse(l = {frame.l}, r = {frame.r})</span>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Middle: Array Blocks representation */}
+        <div className="md:col-span-4 rounded-xl bg-white dark:bg-[#1a1a1a] p-5 shadow border border-gray-200 dark:border-zinc-800 flex flex-col items-center justify-between">
+          <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider text-center">
+            Array Visualization
+          </h3>
+          <div className="w-full flex-1 flex flex-col items-center justify-center gap-6 min-h-64">
+            <div className="flex gap-2.5 justify-center items-end">
+              {currentArray.map((val, idx) => {
+                const isLeft = idx === lPointer;
+                const isRight = idx === rPointer;
+                const active = isLeft || isRight;
+
+                let borderStyle = "border-gray-300 dark:border-zinc-700 bg-gray-100 dark:bg-zinc-800";
+                if (active) {
+                  borderStyle = isSwapping
+                    ? "border-[#a435f0] dark:border-[#a435f0] bg-[#a435f0]/20 dark:bg-[#a435f0]/20 text-[#a435f0] dark:text-[#d8b4fe] animate-pulse stroke-2"
+                    : "border-teal-500 dark:border-teal-400 bg-teal-100 dark:bg-teal-950 text-teal-900 dark:text-teal-100 font-bold stroke-2";
+                }
+
+                return (
+                  <div key={idx} className="flex flex-col items-center gap-1">
+                    <div
+                      className={`w-12 h-12 flex items-center justify-center rounded-lg border-2 text-sm font-semibold transition-all duration-300 ${borderStyle}`}
+                    >
+                      {val}
+                    </div>
+                    <span className="text-[10px] text-gray-400 select-none">
+                      {isLeft && "L"}
+                      {isRight && "R"}
+                      {!isLeft && !isRight && `[${idx}]`}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* Right Side: Code Block Trace */}
+        <div className="md:col-span-4 flex flex-col">
+          <div className="w-full border border-gray-200 dark:border-zinc-800 rounded-xl overflow-hidden bg-zinc-950 font-mono text-xs shadow-inner h-full flex flex-col">
+            <div className="flex items-center justify-between px-4 py-2 bg-zinc-900 border-b border-zinc-800">
+              <span className="text-zinc-400 font-semibold">Active Code Trace</span>
+            </div>
+            <div className="p-4 text-zinc-300 leading-relaxed flex-1">
+              {codeLines.map((ln) => {
+                const isActive = ln.line === activeLine;
+                return (
+                  <div
+                    key={ln.line}
+                    className={`flex gap-4 px-2 py-0.5 rounded transition-colors duration-200 ${
+                      isActive ? "bg-[#a435f0]/20 border-l-4 border-[#a435f0] text-white font-bold" : "border-l-4 border-transparent"
+                    }`}
+                  >
+                    <span className="text-zinc-600 select-none w-4 text-right">{ln.line}</span>
+                    <span>{ln.code}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default ReverseArrayAnimation;
diff --git a/src/app/visualizer/recursion/reverse-array/codeBlock.jsx b/src/app/visualizer/recursion/reverse-array/codeBlock.jsx
new file mode 100644
index 000000000..c276cae67
--- /dev/null
+++ b/src/app/visualizer/recursion/reverse-array/codeBlock.jsx
@@ -0,0 +1,126 @@
+"use client";
+import React from "react";
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const reverseCode = {
+  javascript: `// Reverse Array in JavaScript
+function reverseArray(l, r, arr) {
+  if (l >= r) {
+    return; // Base case
+  }
+  // Swap elements
+  const temp = arr[l];
+  arr[l] = arr[r];
+  arr[r] = temp;
+  
+  // Recursive case
+  reverseArray(l + 1, r - 1, arr);
+}
+
+// Example call:
+const numbers = [1, 2, 3, 4, 5];
+reverseArray(0, numbers.length - 1, numbers);
+console.log(numbers); // [5, 4, 3, 2, 1]`,
+
+  python: `# Reverse Array in Python
+def reverse_array(l, r, arr):
+    if l >= r:
+        return  # Base case
+    # Swap
+    arr[l], arr[r] = arr[r], arr[l]
+    # Recursive case
+    reverse_array(l + 1, r - 1, arr)
+
+# Example call:
+numbers = [1, 2, 3, 4, 5]
+reverse_array(0, len(numbers) - 1, numbers)
+print(numbers)  # [5, 4, 3, 2, 1]`,
+
+  java: `// Reverse Array in Java
+import java.util.Arrays;
+
+public class ReverseArray {
+    public static void reverse(int l, int r, int[] arr) {
+        if (l >= r) {
+            return; // Base case
+        }
+        // Swap
+        int temp = arr[l];
+        arr[l] = arr[r];
+        arr[r] = temp;
+        // Recursive case
+        reverse(l + 1, r - 1, arr);
+    }
+
+    public static void main(String[] args) {
+        int[] numbers = {1, 2, 3, 4, 5};
+        reverse(0, numbers.length - 1, numbers);
+        System.out.println(Arrays.toString(numbers));
+    }
+}`,
+
+  c: `// Reverse Array in C
+#include <stdio.h>
+
+void reverse(int l, int r, int arr[]) {
+    if (l >= r) {
+        return; // Base case
+    }
+    // Swap
+    int temp = arr[l];
+    arr[l] = arr[r];
+    arr[r] = temp;
+    // Recursive case
+    reverse(l + 1, r - 1, arr);
+}
+
+int main() {
+    int arr[] = {1, 2, 3, 4, 5};
+    reverse(0, 4, arr);
+    for (int i = 0; i < 5; i++) {
+        printf("%d ", arr[i]);
+    }
+    return 0;
+}`,
+
+  cpp: `// Reverse Array in C++
+#include <iostream>
+#include <vector>
+
+void reverse(int l, int r, std::vector<int>& arr) {
+    if (l >= r) {
+        return; // Base case
+    }
+    // Swap
+    std::swap(arr[l], arr[r]);
+    // Recursive case
+    reverse(l + 1, r - 1, arr);
+}
+
+int main() {
+    std::vector<int> arr = {1, 2, 3, 4, 5};
+    reverse(0, arr.size() - 1, arr);
+    for (int num : arr) {
+        std::cout << num << " ";
+    }
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: "reverseArray.js",
+  python: "reverse_array.py",
+  java: "ReverseArray.java",
+  c: "reverse_array.c",
+  cpp: "reverse_array.cpp",
+};
+
+const ReverseCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={reverseCode}
+    fileNames={fileNames}
+  />
+);
+
+export default ReverseCode;
diff --git a/src/app/visualizer/recursion/reverse-array/content.jsx b/src/app/visualizer/recursion/reverse-array/content.jsx
new file mode 100644
index 000000000..7e793af13
--- /dev/null
+++ b/src/app/visualizer/recursion/reverse-array/content.jsx
@@ -0,0 +1,53 @@
+"use client";
+import React from "react";
+
+const Content = () => {
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8 shadow-sm">
+        {/* Concept */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Recursion on Arrays: Reverse an Array
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <p className="leading-relaxed">
+              Reversing an array recursively utilizes a **two-pointer approach**. We maintain a left pointer ($L$) starting at index $0$ and a right pointer ($R$) starting at index $len - 1$.
+            </p>
+            <p className="mt-4 leading-relaxed font-semibold">
+              The recursive algorithm is structured as:
+            </p>
+            <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              <li><strong>Base Case:</strong> <code>l &gt;= r</code>. When the pointers cross or meet in the middle, the array is fully reversed, and the recursion halts.</li>
+              <li><strong>Swap Process:</strong> Swap elements at index $L$ and index $R$.</li>
+              <li><strong>Recursive Step:</strong> Increment $L$ by 1, decrement $R$ by 1, and make the recursive call: <code>reverse(l + 1, r - 1, arr)</code>.</li>
+            </ul>
+          </div>
+        </section>
+
+        {/* Complexity Analysis */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-3">
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Time Complexity: O(N)</span>
+              <br />
+              Since each recursive call processes 2 elements (one swap) and we swap $N/2$ times, the execution runs in linear time $O(N)$.
+            </p>
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Space Complexity: O(N)</span>
+              <br />
+              At the deepest recursion level, there are $N/2$ stack frames on the Call Stack. Thus, the auxiliary space is bounded by $O(N)$.
+            </p>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/recursion/reverse-array/quiz.jsx b/src/app/visualizer/recursion/reverse-array/quiz.jsx
new file mode 100644
index 000000000..4bdf83e43
--- /dev/null
+++ b/src/app/visualizer/recursion/reverse-array/quiz.jsx
@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const ReverseQuiz = () => {
+  const questions = [
+    {
+      question: "Which condition represents the base case for reversing an array recursively with left (l) and right (r) pointers?",
+      options: [
+        "l == 0",
+        "l >= r",
+        "r == 0",
+        "l > arr.length"
+      ],
+      correctAnswer: 1,
+      explanation: "When left pointer 'l' meets or crosses right pointer 'r' (l >= r), the middle has been reached. All elements are swapped, and recursion terminates."
+    },
+    {
+      question: "For an array of size 6, how many recursive swaps are performed?",
+      options: [
+        "2",
+        "3",
+        "6",
+        "0"
+      ],
+      correctAnswer: 1,
+      explanation: "For size 6, we swap elements at index (0,5), (1,4), and (2,3). Thus, exactly 3 swaps are performed."
+    },
+    {
+      question: "What argument is passed to update the pointers in the recursive step?",
+      options: [
+        "reverse(l, r, arr)",
+        "reverse(l - 1, r + 1, arr)",
+        "reverse(l + 1, r - 1, arr)",
+        "reverse(l + 2, r - 2, arr)"
+      ],
+      correctAnswer: 2,
+      explanation: "To move pointers inwards from outer bounds, left pointer increases by 1 (l + 1) and right pointer decreases by 1 (r - 1)."
+    },
+    {
+      question: "What is the auxiliary space complexity of the recursive array reverse function?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N²)"
+      ],
+      correctAnswer: 2,
+      explanation: "Because the call stack holds N/2 active frames before reaching the base case, the space complexity is linear, O(N)."
+    },
+    {
+      question: "If we pass arr = [5, 4, 3, 2] to reverse, what are the first elements swapped?",
+      options: [
+        "4 and 3",
+        "5 and 2",
+        "5 and 4",
+        "3 and 2"
+      ],
+      correctAnswer: 1,
+      explanation: "Left is 0 (value 5) and right is 3 (value 2). Therefore, 5 and 2 are the first elements swapped."
+    }
+  ];
+
+  return <QuizEngine title="Reverse Array Quiz" questions={questions} />;
+};
+
+export default ReverseQuiz;
diff --git a/src/app/visualizer/recursion/stack/AlgorithmClient.jsx b/src/app/visualizer/recursion/stack/AlgorithmClient.jsx
new file mode 100644
index 000000000..775578fb1
--- /dev/null
+++ b/src/app/visualizer/recursion/stack/AlgorithmClient.jsx
@@ -0,0 +1,7 @@
+import StackClient from "./StackClient";
+
+
+
+export default function Page() {
+  return <StackClient />;
+}
diff --git a/src/app/visualizer/recursion/stack/StackClient.jsx b/src/app/visualizer/recursion/stack/StackClient.jsx
new file mode 100644
index 000000000..0eb69410b
--- /dev/null
+++ b/src/app/visualizer/recursion/stack/StackClient.jsx
@@ -0,0 +1,32 @@
+"use client";
+import React from "react";
+import FactorialAnimation from "../factorial/animation";
+import Code from "../factorial/codeBlock";
+import Content from "../factorial/content";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function StackClient() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Recursion", "Call Stack Visualization")}
+      title="Call Stack Visualization"
+      headerDescription="Visualize how active calls construct LIFO frames on the system call stack, showing parameter variables and active execution paths."
+      animation={<FactorialAnimation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[
+            { text: "Recursion Trees", url: "/visualizer/recursion/trees" },
+            { text: "Functional & Parameterized", url: "/visualizer/recursion/functional-parameterized" },
+            { text: "Basic Recursion", url: "/visualizer/recursion/basic-recursion" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/recursion/stack/quiz/page.jsx b/src/app/visualizer/recursion/stack/quiz/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/recursion/stack/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/stack/quiz/quiz.jsx b/src/app/visualizer/recursion/stack/quiz/quiz.jsx
new file mode 100644
index 000000000..2f02cbaa2
--- /dev/null
+++ b/src/app/visualizer/recursion/stack/quiz/quiz.jsx
@@ -0,0 +1,198 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const CallStackQuiz = () => {
+  const questions = [
+    {
+  question: "What is the primary purpose of the call stack?",
+  options: [
+    "To store arrays",
+    "To manage function calls during program execution",
+    "To sort data",
+    "To store global variables"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "The call stack manages active function calls and their execution order."
+},
+{
+  question: "Which data structure is used to implement the call stack?",
+  options: [
+    "Queue",
+    "Stack",
+    "Linked List",
+    "Heap"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "The call stack follows the Last-In, First-Out (LIFO) principle."
+},
+{
+  question: "What happens when a function is called?",
+  options: [
+    "A stack frame is pushed onto the call stack",
+    "The stack is cleared",
+    "The function is removed",
+    "The heap is emptied"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Each function call creates a new stack frame that is pushed onto the call stack."
+},
+{
+  question: "What happens when a function completes execution?",
+  options: [
+    "A new frame is created",
+    "Its stack frame is popped from the call stack",
+    "The stack doubles in size",
+    "Nothing happens"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "When a function returns, its stack frame is removed from the call stack."
+},
+{
+  question: "What does LIFO stand for?",
+  options: [
+    "Last In, First Out",
+    "Last Input, First Output",
+    "Linear Input Function Output",
+    "Low Input Fast Output"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Stacks operate on the Last-In, First-Out principle."
+},
+{
+  question: "Which of the following can cause a Stack Overflow error?",
+  options: [
+    "Infinite recursion without a base case",
+    "Sorting an array",
+    "Binary Search",
+    "Using a queue"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Without a base case, recursive calls continue until the call stack is exhausted."
+},
+{
+  question: "What information is stored inside each stack frame?",
+  options: [
+    "Local variables and return address",
+    "Only global variables",
+    "Only arrays",
+    "Database records"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Each stack frame stores local variables, parameters, and the return address."
+},
+{
+  question: "Which recursive call returns first?",
+  options: [
+    "The first function call",
+    "The deepest recursive call",
+    "The root function",
+    "All return together"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "The deepest call finishes first because of the LIFO behavior of the call stack."
+},
+{
+  question: "Why is the call stack important in recursion?",
+  options: [
+    "It keeps track of active recursive function calls",
+    "It sorts recursive calls",
+    "It reduces recursion depth",
+    "It stores only output values"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "The call stack manages every recursive call until it returns."
+},
+{
+  question: "What is the maximum call stack depth determined by?",
+  options: [
+    "The recursion depth before reaching the base case",
+    "The number of loops",
+    "The array size only",
+    "The number of variables"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "The maximum stack depth equals the deepest level of active recursive calls."
+},
+{
+  question: "Why is the return address stored in a stack frame?",
+  options: [
+    "To know where program execution should continue after the function returns",
+    "To store the function parameters",
+    "To save memory",
+    "To sort the call stack"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "The return address tells the program where execution should resume once the current function finishes."
+},
+{
+  question: "Which operation occurs first when a recursive function is called?",
+  options: [
+    "The function immediately returns",
+    "A new stack frame is pushed onto the call stack",
+    "The stack is cleared",
+    "The base case is skipped"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Every recursive function call creates a new stack frame before executing its statements."
+},
+{
+  question: "How does the call stack behave during recursive function returns?",
+  options: [
+    "Frames are removed in the same order they were added",
+    "Frames are removed in reverse order of their addition",
+    "All frames are removed simultaneously",
+    "Frames remain in memory permanently"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Since the call stack follows LIFO, the most recently added frame returns first."
+},
+{
+  question: "Which of the following best describes stack unwinding?",
+  options: [
+    "Creating new recursive calls",
+    "Removing stack frames as recursive calls return",
+    "Sorting the stack frames",
+    "Copying stack frames into the heap"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Stack unwinding is the process of popping stack frames after reaching the base case and returning from recursion."
+},
+{
+  question: "What is the relationship between recursion depth and call stack size?",
+  options: [
+    "They are unrelated",
+    "The call stack grows as recursion depth increases",
+    "The call stack size always remains constant",
+    "The call stack decreases before recursion starts"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Each recursive call adds a new stack frame, so deeper recursion results in a larger call stack."
+},
+  ];
+
+  return (
+    <QuizEngine
+      title="Call Stack Visualization Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default CallStackQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/subsequences/AlgorithmClient.jsx b/src/app/visualizer/recursion/subsequences/AlgorithmClient.jsx
new file mode 100644
index 000000000..ae5c4320a
--- /dev/null
+++ b/src/app/visualizer/recursion/subsequences/AlgorithmClient.jsx
@@ -0,0 +1,34 @@
+import SubsequencesAnimation from "@/app/visualizer/recursion/subsequences/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/recursion/subsequences/codeBlock";
+import Content from "@/app/visualizer/recursion/subsequences/content";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Recursion", "Recursion on Subsequences")}
+      title="Recursion on Subsequences"
+      headerDescription="Visualize how recursion generates all subsets/subsequences of a set by making a binary choice (Take vs. Not Take) at each element."
+      headerActions={<ArticleActions />}
+      animation={<SubsequencesAnimation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[
+            { text: "N-Queens Placement", url: "/visualizer/recursion/n-queens" },
+            { text: "Fibonacci (Multiple Calls)", url: "/visualizer/recursion/fibonacci" },
+            { text: "Reverse an Array", url: "/visualizer/recursion/reverse-array" }
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/recursion/subsequences/animation.jsx b/src/app/visualizer/recursion/subsequences/animation.jsx
new file mode 100644
index 000000000..15b1cf7a8
--- /dev/null
+++ b/src/app/visualizer/recursion/subsequences/animation.jsx
@@ -0,0 +1,384 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import ResetButton from "@/app/components/ui/resetButton";
+import GoButton from "@/app/components/ui/goButton";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+import { generateSubsequencesFrames } from "@/features/algorithms/recursion/subsequencesLogic";
+
+const getCoords = (path, n) => {
+  const coordsMap = {
+    2: {
+      root: { x: 200, y: 35 },
+      "root-L": { x: 100, y: 100 },
+      "root-L-L": { x: 50, y: 170 },
+      "root-L-R": { x: 150, y: 170 },
+      "root-R": { x: 300, y: 100 },
+      "root-R-L": { x: 250, y: 170 },
+      "root-R-R": { x: 350, y: 170 },
+    },
+    3: {
+      root: { x: 200, y: 30 },
+      "root-L": { x: 105, y: 80 },
+      "root-L-L": { x: 55, y: 140 },
+      "root-L-L-L": { x: 30, y: 200 },
+      "root-L-L-R": { x: 80, y: 200 },
+      "root-L-R": { x: 155, y: 140 },
+      "root-L-R-L": { x: 130, y: 200 },
+      "root-L-R-R": { x: 180, y: 200 },
+      "root-R": { x: 295, y: 80 },
+      "root-R-L": { x: 245, y: 140 },
+      "root-R-L-L": { x: 220, y: 200 },
+      "root-R-L-R": { x: 270, y: 200 },
+      "root-R-R": { x: 345, y: 140 },
+      "root-R-R-L": { x: 320, y: 200 },
+      "root-R-R-R": { x: 370, y: 200 },
+    },
+  };
+  return coordsMap[n]?.[path] || { x: 200, y: 30 };
+};
+
+const codeLines = [
+  { line: 1, code: "function solve(index, current, arr) {" },
+  { line: 2, code: "  if (index === arr.length) {" },
+  { line: 3, code: "    print(current); return;" },
+  { line: 4, code: "  }" },
+  { line: 5, code: "  current.push(arr[index]);" },
+  { line: 6, code: "  solve(index + 1, current, arr);" },
+  { line: 7, code: "  current.pop();" },
+  { line: 8, code: "  solve(index + 1, current, arr);" },
+  { line: 9, code: "}" },
+];
+
+const SubsequencesAnimation = () => {
+  const [arrayInput, setArrayInput] = useState("1, 2, 3");
+  const [isVisualizing, setIsVisualizing] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const parsedArray = useMemo(() => {
+    return arrayInput
+      .split(",")
+      .map((el) => el.trim())
+      .filter((el) => el !== "")
+      .map((el) => parseInt(el, 10))
+      .filter((el) => !isNaN(el));
+  }, [arrayInput]);
+
+  const frames = useMemo(() => {
+    if (!isVisualizing || parsedArray.length === 0) return [];
+    return Array.from(generateSubsequencesFrames(parsedArray));
+  }, [parsedArray, isVisualizing]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  useVisualizerReset(() => {
+    setArrayInput("1, 2, 3");
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  });
+
+  const handleGo = (e) => {
+    e.preventDefault();
+    if (parsedArray.length === 0) {
+      setErrorMsg("Please enter a valid comma-separated array of integers.");
+      return;
+    }
+    if (parsedArray.length < 2 || parsedArray.length > 3) {
+      setErrorMsg("Please input an array of size 2 or 3 elements for the visualization.");
+      return;
+    }
+    setErrorMsg("");
+    setIsVisualizing(true);
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      engine.play();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const activeFrameData = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        stack: [],
+        treeNodes: [],
+        completed: [],
+        activeLine: 0,
+        description: "Provide an array of 2 or 3 elements and click Visualize Go!",
+      };
+
+  const activeStack = activeFrameData.stack || [];
+  const activeLine = activeFrameData.activeLine;
+  const activeTreeNodes = activeFrameData.treeNodes || [];
+  const completedSubsets = activeFrameData.completed || [];
+
+  const stackColors = {
+    calling: "bg-[#e0f2fe] dark:bg-sky-950/40 border-sky-400 dark:border-sky-700 text-sky-800 dark:text-sky-200",
+    checking_base: "bg-[#fef3c7] dark:bg-amber-950/40 border-amber-400 dark:border-amber-700 text-amber-800 dark:text-amber-200",
+    base_case: "bg-[#dcfce7] dark:bg-emerald-950/40 border-emerald-400 dark:border-emerald-700 text-emerald-800 dark:text-emerald-200",
+    taking: "bg-[#fae8ff] dark:bg-purple-950/30 border-purple-400 dark:border-purple-800 text-purple-700 dark:text-purple-300",
+    not_taking: "bg-[#ffedd5] dark:bg-orange-950/40 border-orange-400 dark:border-orange-700 text-orange-800 dark:text-orange-200",
+    returning: "bg-[#fee2e2] dark:bg-rose-950/40 border-rose-400 dark:border-rose-700 text-rose-800 dark:text-rose-200",
+  };
+
+  const treeNodeColors = {
+    pending: "fill-gray-100 stroke-gray-300 dark:fill-zinc-800 dark:stroke-zinc-700 text-gray-400 dark:text-zinc-500",
+    active: "fill-sky-100 stroke-sky-500 dark:fill-sky-950 dark:stroke-sky-400 text-sky-800 dark:text-sky-200 font-bold stroke-2",
+    base: "fill-emerald-100 stroke-emerald-500 dark:fill-emerald-950 dark:stroke-emerald-400 text-emerald-800 dark:text-emerald-200 font-bold stroke-2",
+    returned: "fill-teal-150 stroke-teal-500 dark:fill-teal-950 dark:stroke-teal-400 text-teal-800 dark:text-teal-200 font-bold",
+  };
+
+  return (
+    <main className="container mx-auto">
+      {/* Configuration Header */}
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8"
+      >
+        <div className="flex flex-col sm:flex-row items-end gap-4">
+          <div className="flex-1 w-full">
+            <label className="block text-gray-700 dark:text-gray-300 mb-2 font-medium" htmlFor="arrayInput">
+              Array Elements (comma-separated, size 2 or 3)
+            </label>
+            <input
+              type="text"
+              id="arrayInput"
+              value={arrayInput}
+              onChange={(e) => {
+                setArrayInput(e.target.value);
+                handleReset();
+              }}
+              className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#0d9488] focus:outline-none focus:ring-2 focus:ring-[#0d9488]/30 transition duration-300"
+              placeholder="e.g. 1, 2, 3"
+              disabled={isVisualizing}
+            />
+          </div>
+
+          <div className="flex gap-2 w-full sm:w-auto justify-end">
+            <GoButton onClick={handleGo} isAnimating={isVisualizing} disabled={isVisualizing} />
+            <ResetButton onReset={handleReset} isAnimating={isVisualizing} />
+          </div>
+        </div>
+
+        {errorMsg && <p className="text-red-500 dark:text-red-400 text-xs font-semibold mt-2">{errorMsg}</p>}
+
+        {isVisualizing && frames.length > 0 && (
+          <div className="mt-4">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </form>
+
+      {/* Narrative Explanation Block */}
+      <div className="max-w-4xl mx-auto mb-8 p-4 rounded-xl border border-teal-100 bg-teal-50/40 dark:border-teal-900/30 dark:bg-teal-950/10 text-teal-800 dark:text-teal-200">
+        <p className="text-center font-medium text-sm leading-relaxed">
+          {activeFrameData.description}
+        </p>
+      </div>
+
+      {/* Visual Workspace */}
+      <div className="max-w-4xl mx-auto grid gap-6 md:grid-cols-12 mb-8">
+        {/* Left Side: Call Stack */}
+        <div className="md:col-span-3 rounded-xl bg-white dark:bg-[#1a1a1a] p-5 shadow border border-gray-200 dark:border-zinc-800">
+          <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider text-center">
+            Call Stack
+          </h3>
+          {activeStack.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-80 border-2 border-dashed border-gray-200 dark:border-zinc-800 rounded-xl">
+              <p className="text-gray-400 dark:text-zinc-500 text-sm">Empty</p>
+            </div>
+          ) : (
+            <div className="flex flex-col-reverse gap-2 items-center justify-end h-[340px] overflow-y-auto p-3 border border-gray-100 dark:border-zinc-800 rounded-xl bg-gray-50/50 dark:bg-zinc-900/20">
+              {activeStack.map((frame, index) => {
+                const isTop = index === activeStack.length - 1;
+                const statusClass = stackColors[frame.status] || stackColors.waiting;
+
+                return (
+                  <div
+                    key={frame.id}
+                    className={`w-full p-2 rounded-lg border flex flex-col items-center transition-all duration-300 ${statusClass} ${
+                      isTop ? "ring-2 ring-primary dark:ring-primary-light ring-offset-2 dark:ring-offset-zinc-950" : ""
+                    }`}
+                  >
+                    <div className="flex justify-between w-full font-mono text-[9px] font-semibold">
+                      <span>solve(idx = {frame.index})</span>
+                    </div>
+                    <span className="text-[8px] text-zinc-500 dark:text-zinc-400 mt-1 block">
+                      curr = [{frame.current.join(",")}]
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Middle: Recursion Decision Tree */}
+        <div className="md:col-span-6 rounded-xl bg-white dark:bg-[#1a1a1a] p-5 shadow border border-gray-200 dark:border-zinc-800 flex flex-col items-center">
+          <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider text-center">
+            Decision Tree
+          </h3>
+          <svg viewBox="0 0 400 250" className="w-full max-w-[400px] h-[220px]">
+            {activeTreeNodes.map((node) => {
+              if (!node.parentId) return null;
+              const parent = activeTreeNodes.find((n) => n.id === node.parentId);
+              if (!parent) return null;
+              const childCoords = getCoords(node.id, parsedArray.length);
+              const parentCoords = getCoords(node.parentId, parsedArray.length);
+
+              let edgeColor = "#e4e4e7";
+              let strokeWidth = 1.5;
+              if (node.status === "active" || node.status === "returned" || node.status === "base") {
+                edgeColor = "#0d9488";
+                strokeWidth = 2;
+              }
+
+              return (
+                <g key={`edge-g-${node.id}`}>
+                  <line
+                    x1={parentCoords.x}
+                    y1={parentCoords.y}
+                    x2={childCoords.x}
+                    y2={childCoords.y}
+                    stroke={edgeColor}
+                    strokeWidth={strokeWidth}
+                    className="transition-colors duration-300"
+                  />
+                  {/* Draw decision labels */}
+                  <text
+                    x={(parentCoords.x + childCoords.x) / 2}
+                    y={(parentCoords.y + childCoords.y) / 2 - 4}
+                    textAnchor="middle"
+                    className="text-[7px] font-bold fill-zinc-400 dark:fill-zinc-500 select-none"
+                  >
+                    {node.id.endsWith("-L") ? "TAKE" : "SKIP"}
+                  </text>
+                </g>
+              );
+            })}
+
+            {activeTreeNodes.map((node) => {
+              const coords = getCoords(node.id, parsedArray.length);
+              const nodeClass = treeNodeColors[node.status] || treeNodeColors.pending;
+
+              return (
+                <g key={`node-${node.id}`}>
+                  <circle
+                    cx={coords.x}
+                    cy={coords.y}
+                    r="14"
+                    className={`${nodeClass} transition-colors duration-300`}
+                  />
+                  <text
+                    x={coords.x}
+                    y={coords.y + 3}
+                    textAnchor="middle"
+                    className="text-[7px] font-mono font-bold select-none fill-current"
+                  >
+                    {node.label}
+                  </text>
+                  {node.status !== "pending" && (
+                    <g>
+                      <rect
+                        x={coords.x - 20}
+                        y={coords.y + 16}
+                        width="40"
+                        height="10"
+                        rx="2"
+                        className="fill-teal-500/10 stroke-teal-500/20 text-teal-600 dark:text-teal-400 stroke"
+                      />
+                      <text
+                        x={coords.x}
+                        y={coords.y + 23}
+                        textAnchor="middle"
+                        className="text-[6px] font-bold fill-current"
+                      >
+                        [{node.sub.join(",")}]
+                      </text>
+                    </g>
+                  )}
+                </g>
+              );
+            })}
+          </svg>
+        </div>
+
+        {/* Right Side: Generated Subsets & Code Trace */}
+        <div className="md:col-span-3 flex flex-col gap-4">
+          {/* Subsets list */}
+          <div className="border border-gray-200 dark:border-zinc-800 rounded-xl bg-zinc-950 p-4 font-mono text-[10px] text-emerald-400 min-h-36 shadow-inner flex flex-col">
+            <span className="text-zinc-500 font-semibold mb-2 uppercase tracking-wider text-center block text-[9px]">
+              Subsets Generated
+            </span>
+            <div className="flex-1 overflow-y-auto max-h-32 flex flex-wrap gap-1.5 justify-center content-start">
+              {completedSubsets.map((sub, idx) => (
+                <span key={idx} className="bg-zinc-900 border border-zinc-800 rounded px-1.5 py-0.5 animate-fade-in">
+                  [{sub.join(", ")}]
+                </span>
+              ))}
+            </div>
+          </div>
+
+          {/* Code block trace */}
+          <div className="w-full border border-gray-200 dark:border-zinc-800 rounded-xl overflow-hidden bg-zinc-950 font-mono text-[10px] shadow-inner">
+            <div className="p-3 text-zinc-300 leading-relaxed">
+              {codeLines.map((ln) => {
+                const isActive = ln.line === activeLine;
+                return (
+                  <div
+                    key={ln.line}
+                    className={`flex gap-3 px-1 py-0.5 rounded transition-colors duration-200 ${
+                      isActive ? "bg-[#0d9488]/20 border-l-3 border-[#0d9488] text-white font-bold" : "border-l-3 border-transparent"
+                    }`}
+                  >
+                    <span className="text-zinc-600 select-none w-3 text-right">{ln.line}</span>
+                    <span>{ln.code}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default SubsequencesAnimation;
diff --git a/src/app/visualizer/recursion/subsequences/codeBlock.jsx b/src/app/visualizer/recursion/subsequences/codeBlock.jsx
new file mode 100644
index 000000000..b6c605d21
--- /dev/null
+++ b/src/app/visualizer/recursion/subsequences/codeBlock.jsx
@@ -0,0 +1,148 @@
+"use client";
+import React from "react";
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const subsequenceCode = {
+  javascript: `// Print all Subsequences in JavaScript
+function solve(index, current, arr) {
+  // Base case: index reaches end
+  if (index === arr.length) {
+    console.log(current);
+    return;
+  }
+  
+  // Choice 1: TAKE element
+  current.push(arr[index]);
+  solve(index + 1, current, arr);
+  
+  // Choice 2: BACKTRACK (Remove element) and SKIP it
+  current.pop();
+  solve(index + 1, current, arr);
+}
+
+// Example call:
+solve(0, [], [1, 2, 3]);`,
+
+  python: `# Print all Subsequences in Python
+def solve(index, current, arr):
+    # Base case
+    if index == len(arr):
+        print(current)
+        return
+        
+    # Choice 1: TAKE element
+    current.append(arr[index])
+    solve(index + 1, current, arr)
+    
+    # Choice 2: SKIP element (Backtrack)
+    current.pop()
+    solve(index + 1, current, arr)
+
+# Example call:
+solve(0, [], [1, 2, 3])`,
+
+  java: `// Print all Subsequences in Java
+import java.util.ArrayList;
+import java.util.List;
+
+public class Subsequences {
+    public static void solve(int index, List<Integer> current, int[] arr) {
+        // Base case
+        if (index == arr.length) {
+            System.out.println(current);
+            return;
+        }
+        
+        // Choice 1: TAKE element
+        current.add(arr[index]);
+        solve(index + 1, current, arr);
+        
+        // Choice 2: SKIP element (Backtrack)
+        current.remove(current.size() - 1);
+        solve(index + 1, current, arr);
+    }
+
+    public static void main(String[] args) {
+        int[] arr = {1, 2, 3};
+        solve(0, new ArrayList<>(), arr);
+    }
+}`,
+
+  c: `// Print all Subsequences in C
+#include <stdio.h>
+
+void solve(int index, int current[], int currentSize, int arr[], int arrSize) {
+    // Base case
+    if (index == arrSize) {
+        printf("[");
+        for (int i = 0; i < currentSize; i++) {
+            printf("%d ", current[i]);
+        }
+        printf("]\\n");
+        return;
+    }
+    
+    // Choice 1: TAKE element
+    current[currentSize] = arr[index];
+    solve(index + 1, current, currentSize + 1, arr, arrSize);
+    
+    // Choice 2: SKIP element (Implicit backtracking by ignoring index in next call)
+    solve(index + 1, current, currentSize, arr, arrSize);
+}
+
+int main() {
+    int arr[] = {1, 2, 3};
+    int current[10];
+    solve(0, current, 0, arr, 3);
+    return 0;
+}`,
+
+  cpp: `// Print all Subsequences in C++
+#include <iostream>
+#include <vector>
+
+void solve(int index, std::vector<int>& current, const std::vector<int>& arr) {
+    // Base case
+    if (index == arr.size()) {
+        std::cout << "[";
+        for (int i = 0; i < current.size(); ++i) {
+            std::cout << current[i] << (i == current.size() - 1 ? "" : " ");
+        }
+        std::cout << "]\\n";
+        return;
+    }
+    
+    // Choice 1: TAKE element
+    current.push_back(arr[index]);
+    solve(index + 1, current, arr);
+    
+    // Choice 2: SKIP element (Backtrack)
+    current.pop_back();
+    solve(index + 1, current, arr);
+}
+
+int main() {
+    std::vector<int> arr = {1, 2, 3};
+    std::vector<int> current;
+    solve(0, current, arr);
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: "subsequences.js",
+  python: "subsequences.py",
+  java: "Subsequences.java",
+  c: "subsequences.c",
+  cpp: "subsequences.cpp",
+};
+
+const SubsequenceCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={subsequenceCode}
+    fileNames={fileNames}
+  />
+);
+
+export default SubsequenceCode;
diff --git a/src/app/visualizer/recursion/subsequences/content.jsx b/src/app/visualizer/recursion/subsequences/content.jsx
new file mode 100644
index 000000000..3bfc8bb72
--- /dev/null
+++ b/src/app/visualizer/recursion/subsequences/content.jsx
@@ -0,0 +1,53 @@
+"use client";
+import React from "react";
+
+const Content = () => {
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8 shadow-sm">
+        {/* Concept */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Recursion on Subsequences: Take vs. Skip
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <p className="leading-relaxed">
+              A **subsequence** is a sequence that can be derived from another sequence by deleting some or no elements without changing the order of the remaining elements (e.g., for `[1, 2]`, subsequences are `[]`, `[1]`, `[2]`, `[1, 2]`).
+            </p>
+            <p className="mt-4 leading-relaxed font-semibold">
+              To generate all subsequences recursively, we make a **binary choice** at each index:
+            </p>
+            <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              <li><strong>Choice 1 (Take):</strong> Include the element at the current index in the active subsequence, and call the function recursively for the next index.</li>
+              <li><strong>Choice 2 (Skip/Backtrack):</strong> Remove the element from the active subsequence (backtrack), and call the function recursively for the next index.</li>
+              <li><strong>Base Case:</strong> <code>index === arr.length</code>. When we&apos;ve made decisions for all elements in the array, we print/save the current subsequence and return.</li>
+            </ul>
+          </div>
+        </section>
+
+        {/* Complexity Analysis */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-3">
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Time Complexity: O(2^N)</span>
+              <br />
+              Since we make 2 choices for each of the $N$ elements, the recursion tree has a branching factor of 2 and depth $N$, resulting in $2^N$ leaf nodes/subsequences.
+            </p>
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Space Complexity: O(N)</span>
+              <br />
+              The maximum height of the recursion tree and call stack depth is $N$, corresponding to the number of elements. Thus, auxiliary stack space is linear, $O(N)$.
+            </p>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/recursion/subsequences/quiz.jsx b/src/app/visualizer/recursion/subsequences/quiz.jsx
new file mode 100644
index 000000000..f3c532f16
--- /dev/null
+++ b/src/app/visualizer/recursion/subsequences/quiz.jsx
@@ -0,0 +1,187 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const SubsequencesQuiz = () => {
+  const questions = [
+    {
+      question: "How many subsequences (subsets) are generated recursively for a set of size N?",
+      options: [
+        "N",
+        "N²",
+        "2^N",
+        "N!"
+      ],
+      correctAnswer: 2,
+      explanation: "Since each of the N elements can either be taken or skipped, there are 2 * 2 * ... * 2 (N times) = 2^N total subsets."
+    },
+    {
+      question: "What does the term 'backtracking' refer to in subsequences recursion?",
+      options: [
+        "Moving to a different topic in DSA",
+        "Undoing the last decision (e.g. popping the element we just added) to explore another choice",
+        "Decreasing the loop index counter to 0",
+        "Throwing a compilation error on stack overflow"
+      ],
+      correctAnswer: 1,
+      explanation: "Backtracking means restoring the state (e.g., removing the taken element via current.pop()) before exploring the alternate 'skip' choice."
+    },
+    {
+      question: "For array [1, 2, 3], which of the following is NOT a valid subsequence?",
+      options: [
+        "[1, 3]",
+        "[2, 1]",
+        "[2, 3]",
+        "[]"
+      ],
+      correctAnswer: 1,
+      explanation: "A subsequence must preserve the original order of elements. In [1, 2, 3], '2' comes after '1', so [2, 1] is invalid."
+    },
+    {
+      question: "What is the time complexity of generating all subsets recursively?",
+      options: [
+        "O(N)",
+        "O(N log N)",
+        "O(2^N)",
+        "O(N!)"
+      ],
+      correctAnswer: 2,
+      explanation: "Generating all subsets explores a binary decision tree of size 2^N, yielding O(2^N) exponential time complexity."
+    },
+    {
+      question: "What is the maximum number of active stack frames on the call stack when generating subsequences for an array of size N?",
+      options: [
+        "2",
+        "N + 1",
+        "2^N",
+        "N!"
+      ],
+      correctAnswer: 1,
+      explanation: "The depth of the recursion tree is N. Hence, at most N+1 stack frames are active on the call stack at any one time."
+    },
+    {
+  question: "What is a subsequence?",
+  options: [
+    "A contiguous part of an array",
+    "A sequence obtained by deleting zero or more elements without changing the order",
+    "A sorted array",
+    "A reversed array"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "A subsequence preserves the original order but does not require elements to be contiguous."
+},
+{
+  question: "How many subsequences can an array of size N have?",
+  options: [
+    "N",
+    "2N",
+    "2^N",
+    "N!"
+  ],
+  correctAnswer: 2,
+  explanation:
+    "Each element has two choices: include or exclude, resulting in 2^N subsequences."
+},
+{
+  question: "Which recursion decision is made for every element while generating subsequences?",
+  options: [
+    "Swap or not swap",
+    "Include or exclude",
+    "Sort or reverse",
+    "Increment or decrement"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Every element is either included in the current subsequence or excluded."
+},
+{
+  question: "What is the base case when generating all subsequences recursively?",
+  options: [
+    "When the array is sorted",
+    "When the index reaches the array length",
+    "When the array becomes empty",
+    "When one element remains"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Once the index reaches the end of the array, the current subsequence is complete."
+},
+{
+  question: "What is the time complexity of generating all subsequences?",
+  options: [
+    "O(N)",
+    "O(N log N)",
+    "O(2^N)",
+    "O(N²)"
+  ],
+  correctAnswer: 2,
+  explanation:
+    "All possible subsequences are generated, resulting in O(2^N) recursive calls."
+},
+{
+  question: "What is the auxiliary space complexity of recursion for generating subsequences?",
+  options: [
+    "O(1)",
+    "O(log N)",
+    "O(N)",
+    "O(2^N)"
+  ],
+  correctAnswer: 2,
+  explanation:
+    "The recursion stack grows to a maximum depth of N."
+},
+{
+  question: "Which data structure is commonly used to store the current subsequence during recursion?",
+  options: [
+    "Queue",
+    "Stack",
+    "Vector or ArrayList",
+    "HashMap"
+  ],
+  correctAnswer: 2,
+  explanation:
+    "A dynamic list (such as a vector or ArrayList) stores the elements of the current subsequence."
+},
+{
+  question: "What happens after returning from the recursive call where an element was included?",
+  options: [
+    "The program terminates",
+    "The included element is removed (backtracking)",
+    "The array is sorted",
+    "The recursion stops"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Backtracking removes the last added element before exploring the exclude path."
+},
+{
+  question: "Why is backtracking important in generating subsequences?",
+  options: [
+    "It reduces time complexity",
+    "It restores the current state before exploring another choice",
+    "It sorts the subsequences",
+    "It removes duplicate elements automatically"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Backtracking restores the previous state so that other recursive branches can be explored correctly."
+},
+{
+  question: "Which classic problems are solved using recursion on subsequences?",
+  options: [
+    "Subset Sum",
+    "Combination Sum",
+    "Print All Subsequences",
+    "All of the above"
+  ],
+  correctAnswer: 3,
+  explanation:
+    "Recursion on subsequences is the foundation for problems like Subset Sum, Combination Sum, and generating all subsequences."
+},
+  ];
+
+  return <QuizEngine title="Subsequences Quiz" questions={questions} />;
+};
+
+export default SubsequencesQuiz;
diff --git a/src/app/visualizer/recursion/subsequences/quiz/page.jsx b/src/app/visualizer/recursion/subsequences/quiz/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/recursion/subsequences/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/subsequences/quiz/quiz.jsx b/src/app/visualizer/recursion/subsequences/quiz/quiz.jsx
new file mode 100644
index 000000000..327dcf09c
--- /dev/null
+++ b/src/app/visualizer/recursion/subsequences/quiz/quiz.jsx
@@ -0,0 +1,7 @@
+"use client";
+
+import SubsequencesQuiz from "../quiz";
+
+export default function Quiz() {
+  return <SubsequencesQuiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/sum-of-n/AlgorithmClient.jsx b/src/app/visualizer/recursion/sum-of-n/AlgorithmClient.jsx
new file mode 100644
index 000000000..14b9f91f3
--- /dev/null
+++ b/src/app/visualizer/recursion/sum-of-n/AlgorithmClient.jsx
@@ -0,0 +1,36 @@
+import SumAnimation from "@/app/visualizer/recursion/sum-of-n/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/recursion/sum-of-n/codeBlock";
+import Quiz from "@/app/visualizer/recursion/sum-of-n/quiz";
+import Content from "@/app/visualizer/recursion/sum-of-n/content";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Recursion", "Functional & Parameterized Recursion")}
+      title="Functional & Parameterized Recursion"
+      headerDescription="Visualize how recursion computes the sum of the first N integers (N + sum(N-1)), pushing call frames and resolving them LIFO-style."
+      headerActions={<ArticleActions />}
+      animation={<SumAnimation />}
+      content={<Content />}
+      code={<Code />}
+      quiz={<Quiz />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[
+            { text: "Factorial Recursion", url: "/visualizer/recursion/factorial" },
+            { text: "Fibonacci (Tree Recursion)", url: "/visualizer/recursion/fibonacci" },
+            { text: "Stack operations", url: "/visualizer/stack/push-pop" }
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/recursion/sum-of-n/animation.jsx b/src/app/visualizer/recursion/sum-of-n/animation.jsx
new file mode 100644
index 000000000..e42a733d5
--- /dev/null
+++ b/src/app/visualizer/recursion/sum-of-n/animation.jsx
@@ -0,0 +1,241 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import ResetButton from "@/app/components/ui/resetButton";
+import GoButton from "@/app/components/ui/goButton";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+import { generateSumFrames } from "@/features/algorithms/recursion/sumOfNLogic";
+
+const codeLines = [
+  { line: 1, code: "function sum(n) {" },
+  { line: 2, code: "  if (n <= 0)" },
+  { line: 3, code: "    return 0;" },
+  { line: 4, code: "  return n + sum(n - 1);" },
+  { line: 5, code: "}" },
+];
+
+const SumAnimation = () => {
+  const [nVal, setNVal] = useState("3");
+  const [isVisualizing, setIsVisualizing] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const frames = useMemo(() => {
+    if (!isVisualizing) return [];
+    const n = parseInt(nVal, 10);
+    if (isNaN(n) || n < 0) return [];
+    return Array.from(generateSumFrames(n));
+  }, [nVal, isVisualizing]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  useVisualizerReset(() => {
+    setNVal("3");
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  });
+
+  const handleGo = (e) => {
+    e.preventDefault();
+    const n = parseInt(nVal, 10);
+    if (isNaN(n) || n < 0) {
+      setErrorMsg("Please enter a non-negative integer.");
+      return;
+    }
+    if (n > 5) {
+      setErrorMsg("Please select N <= 5 to keep the call stack visualization fit for the screen.");
+      return;
+    }
+    setErrorMsg("");
+    setIsVisualizing(true);
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      engine.play();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const activeFrameData = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        stack: [],
+        activeLine: 0,
+        description: "Enter N (between 0 and 5) and click Visualize Go!",
+      };
+
+  const activeStack = activeFrameData.stack || [];
+  const activeLine = activeFrameData.activeLine;
+
+  const stackColors = {
+    calling: "bg-[#e0f2fe] dark:bg-sky-950/40 border-sky-400 dark:border-sky-700 text-sky-800 dark:text-sky-200",
+    checking_base: "bg-[#fef3c7] dark:bg-amber-950/40 border-amber-400 dark:border-amber-700 text-amber-800 dark:text-amber-200",
+    base_case: "bg-[#dcfce7] dark:bg-emerald-950/40 border-emerald-400 dark:border-emerald-700 text-emerald-800 dark:text-emerald-200 shadow-[0_0_15px_rgba(34,197,94,0.3)]",
+    waiting: "bg-gray-100 dark:bg-zinc-800 border-gray-300 dark:border-zinc-700 text-gray-500 dark:text-zinc-400",
+    calculating: "bg-[#ffedd5] dark:bg-orange-950/40 border-orange-400 dark:border-orange-700 text-orange-800 dark:text-orange-200",
+    returning: "bg-[#fee2e2] dark:bg-rose-950/40 border-rose-400 dark:border-rose-700 text-rose-800 dark:text-rose-200 shadow-[0_0_15px_rgba(239,68,68,0.2)]",
+  };
+
+  return (
+    <main className="container mx-auto">
+      {/* Configuration Header */}
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8"
+      >
+        <div className="flex flex-col sm:flex-row items-end gap-4">
+          <div className="flex-1">
+            <label className="block text-gray-700 dark:text-gray-300 mb-2 font-medium" htmlFor="nVal">
+              Input Value (N)
+            </label>
+            <input
+              type="number"
+              id="nVal"
+              min="0"
+              max="5"
+              value={nVal}
+              onChange={(e) => {
+                setNVal(e.target.value);
+                handleReset();
+              }}
+              className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#0d9488] focus:outline-none focus:ring-2 focus:ring-[#0d9488]/30 transition duration-300"
+              placeholder="e.g. 3"
+              disabled={isVisualizing}
+            />
+          </div>
+
+          <div className="flex gap-2">
+            <GoButton onClick={handleGo} isAnimating={isVisualizing} disabled={isVisualizing} />
+            <ResetButton onReset={handleReset} isAnimating={isVisualizing} />
+          </div>
+        </div>
+
+        {errorMsg && <p className="text-red-500 dark:text-red-400 text-xs font-semibold mt-2">{errorMsg}</p>}
+
+        {isVisualizing && frames.length > 0 && (
+          <div className="mt-4">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </form>
+
+      {/* Narrative Explanation Block */}
+      <div className="max-w-4xl mx-auto mb-8 p-4 rounded-xl border border-teal-100 bg-teal-50/40 dark:border-teal-900/30 dark:bg-teal-950/10 text-teal-800 dark:text-teal-200">
+        <p className="text-center font-medium text-sm leading-relaxed">
+          {activeFrameData.description}
+        </p>
+      </div>
+
+      {/* Visual Workspace */}
+      <div className="max-w-4xl mx-auto grid gap-6 md:grid-cols-12 mb-8">
+        {/* Left Side: Call Stack */}
+        <div className="md:col-span-6 rounded-xl bg-white dark:bg-[#1a1a1a] p-5 shadow border border-gray-200 dark:border-zinc-800">
+          <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider text-center">
+            Active Call Stack
+          </h3>
+          {activeStack.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-72 border-2 border-dashed border-gray-200 dark:border-zinc-800 rounded-xl">
+              <p className="text-gray-400 dark:text-zinc-500 text-sm">Call Stack is Empty</p>
+            </div>
+          ) : (
+            <div className="flex flex-col-reverse gap-2 items-center justify-end h-80 overflow-y-auto p-4 border border-gray-100 dark:border-zinc-800 rounded-xl bg-gray-50/50 dark:bg-zinc-900/20">
+              {activeStack.map((frame, index) => {
+                const isTop = index === activeStack.length - 1;
+                const statusClass = stackColors[frame.status] || stackColors.waiting;
+
+                return (
+                  <div
+                    key={frame.id}
+                    className={`w-full max-w-[280px] p-3 rounded-lg border flex flex-col items-center transition-all duration-300 ${statusClass} ${
+                      isTop ? "ring-2 ring-primary dark:ring-primary-light ring-offset-2 dark:ring-offset-zinc-950 shadow-md" : "scale-[0.98]"
+                    }`}
+                  >
+                    <div className="flex justify-between w-full font-mono text-xs font-semibold">
+                      <span>sum(n = {frame.n})</span>
+                      <span className="capitalize">{frame.status.replace("_", " ")}</span>
+                    </div>
+                    <div className="mt-2 text-xs">
+                      {frame.subResult !== undefined && (
+                        <span className="block text-[10px] text-gray-500 dark:text-zinc-400">
+                          subResult = {frame.subResult}
+                        </span>
+                      )}
+                      {frame.retVal !== null && (
+                        <span className="font-bold text-[#10b981] dark:text-[#34d399] mt-1 block">
+                          returns {frame.retVal}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Right Side: Code Block Trace */}
+        <div className="md:col-span-6 flex flex-col">
+          <div className="w-full border border-gray-200 dark:border-zinc-800 rounded-xl overflow-hidden bg-zinc-950 font-mono text-xs shadow-inner h-full flex flex-col">
+            <div className="flex items-center justify-between px-4 py-2 bg-zinc-900 border-b border-zinc-800">
+              <span className="text-zinc-400 font-semibold">Active Code Trace</span>
+            </div>
+            <div className="p-4 text-zinc-300 leading-relaxed flex-1">
+              {codeLines.map((ln) => {
+                const isActive = ln.line === activeLine;
+                return (
+                  <div
+                    key={ln.line}
+                    className={`flex gap-4 px-2 py-0.5 rounded transition-colors duration-200 ${
+                      isActive ? "bg-[#a435f0]/20 border-l-4 border-[#a435f0] text-white font-bold" : "border-l-4 border-transparent"
+                    }`}
+                  >
+                    <span className="text-zinc-600 select-none w-4 text-right">{ln.line}</span>
+                    <span>{ln.code}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default SumAnimation;
diff --git a/src/app/visualizer/recursion/sum-of-n/codeBlock.jsx b/src/app/visualizer/recursion/sum-of-n/codeBlock.jsx
new file mode 100644
index 000000000..63bb761aa
--- /dev/null
+++ b/src/app/visualizer/recursion/sum-of-n/codeBlock.jsx
@@ -0,0 +1,92 @@
+"use client";
+import React from "react";
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const sumCode = {
+  javascript: `// Sum of first N numbers in JavaScript
+function sum(n) {
+  if (n <= 0) {
+    return 0; // Base case
+  }
+  return n + sum(n - 1); // Recursive step
+}
+
+// Example call:
+const result = sum(5); // Returns 15 (5+4+3+2+1+0)
+console.log(result);`,
+
+  python: `# Sum of first N numbers in Python
+def sum(n):
+    if n <= 0:
+        return 0  # Base case
+    return n + sum(n - 1)  # Recursive step
+
+# Example call:
+result = sum(5) # Returns 15
+print(result)`,
+
+  java: `// Sum of first N numbers in Java
+public class SumN {
+    public static int sum(int n) {
+        if (n <= 0) {
+            return 0; // Base case
+        }
+        return n + sum(n - 1); // Recursive step
+    }
+
+    public static void main(String[] args) {
+        int result = sum(5); // Returns 15
+        System.out.println(result);
+    }
+}`,
+
+  c: `// Sum of first N numbers in C
+#include <stdio.h>
+
+int sum(int n) {
+    if (n <= 0) {
+        return 0; // Base case
+    }
+    return n + sum(n - 1); // Recursive step
+}
+
+int main() {
+    int result = sum(5); // Returns 15
+    printf("%d\\n", result);
+    return 0;
+}`,
+
+  cpp: `// Sum of first N numbers in C++
+#include <iostream>
+
+int sum(int n) {
+    if (n <= 0) {
+        return 0; // Base case
+    }
+    return n + sum(n - 1); // Recursive step
+}
+
+int main() {
+    int result = sum(5); // Returns 15
+    std::cout << result << std::endl;
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: "sumOfN.js",
+  python: "sum_of_n.py",
+  java: "SumN.java",
+  c: "sum_of_n.c",
+  cpp: "sum_of_n.cpp",
+};
+
+const SumCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={sumCode}
+    fileNames={fileNames}
+  />
+);
+
+export default SumCode;
diff --git a/src/app/visualizer/recursion/sum-of-n/content.jsx b/src/app/visualizer/recursion/sum-of-n/content.jsx
new file mode 100644
index 000000000..9030b0849
--- /dev/null
+++ b/src/app/visualizer/recursion/sum-of-n/content.jsx
@@ -0,0 +1,77 @@
+"use client";
+import React from "react";
+
+const Content = () => {
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8 shadow-sm">
+        {/* Concept */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Sum of First N Numbers Recursively
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <p className="leading-relaxed">
+              Summing numbers from $1$ to $N$ is a classic arithmetic operation. The sum of the first $N$ numbers can be calculated using recursion by formulating the problem as:
+            </p>
+            <p className="mt-2 font-mono bg-gray-50 dark:bg-zinc-900 p-3 rounded-lg border border-gray-150 dark:border-zinc-800 text-center text-lg">
+              sum(N) = N + sum(N - 1)
+            </p>
+            <p className="mt-4 leading-relaxed">
+              The structure of the recursive function consists of:
+            </p>
+            <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              <li><strong>Base Case:</strong> <code>sum(0) = 0</code>. When $N$ becomes $0$, the recursion stops and returns $0$.</li>
+              <li><strong>Recursive Step:</strong> <code>n + sum(n-1)</code>. The function calls itself with $n-1$.</li>
+            </ul>
+          </div>
+        </section>
+
+        {/* Step-by-Step Trace */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Trace of sum(3)
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <p className="leading-relaxed">
+              The step-by-step resolution of <code>sum(3)</code> is as follows:
+            </p>
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400 mt-2">
+              <li className="pl-2"><code>sum(3)</code> is called $\rightarrow$ calls <code>sum(2)</code>.</li>
+              <li className="pl-2"><code>sum(2)</code> is called $\rightarrow$ calls <code>sum(1)</code>.</li>
+              <li className="pl-2"><code>sum(1)</code> is called $\rightarrow$ calls <code>sum(0)</code>.</li>
+              <li className="pl-2"><code>sum(0)</code> is called $\rightarrow$ base case matched, returns <strong>0</strong>.</li>
+              <li className="pl-2"><code>sum(1)</code> receives 0, computes $1 + 0 = 1$, returns <strong>1</strong>.</li>
+              <li className="pl-2"><code>sum(2)</code> receives 1, computes $2 + 1 = 3$, returns <strong>3</strong>.</li>
+              <li className="pl-2"><code>sum(3)</code> receives 3, computes $3 + 3 = 6$, returns <strong>6</strong>.</li>
+            </ol>
+          </div>
+        </section>
+
+        {/* Complexity */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-3">
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Time Complexity: O(N)</span>
+              <br />
+              There are $N+1$ recursive calls, each executing in constant time $O(1)$.
+            </p>
+            <p>
+              <span className="font-mono font-bold bg-gray-50 dark:bg-zinc-900 px-2 py-1 rounded border dark:border-zinc-800 text-sm">Space Complexity: O(N)</span>
+              <br />
+              At the deepest recursion level, there are $N+1$ stack frames concurrently on the Call Stack. Thus, auxiliary space is linear, $O(N)$.
+            </p>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/recursion/sum-of-n/quiz.jsx b/src/app/visualizer/recursion/sum-of-n/quiz.jsx
new file mode 100644
index 000000000..572c3b0ed
--- /dev/null
+++ b/src/app/visualizer/recursion/sum-of-n/quiz.jsx
@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const SumQuiz = () => {
+  const questions = [
+    {
+      question: "For sum(N), if we pass n = 0, what is the returned value?",
+      options: [
+        "0",
+        "1",
+        "-1",
+        "Stack Overflow"
+      ],
+      correctAnswer: 0,
+      explanation: "For sum(n), the base case condition is n <= 0, which returns 0 immediately."
+    },
+    {
+      question: "Which line corresponds to the recursive step in the sum(N) function?",
+      options: [
+        "if (n <= 0)",
+        "return 0;",
+        "return n + sum(n - 1);",
+        "function sum(n)"
+      ],
+      correctAnswer: 2,
+      explanation: "The statement `return n + sum(n - 1)` is the recursive step because the function calls itself with a smaller argument (n - 1)."
+    },
+    {
+      question: "What is the peak stack frame depth when executing sum(3)?",
+      options: [
+        "1",
+        "2",
+        "3",
+        "4"
+      ],
+      correctAnswer: 3,
+      explanation: "Executing sum(3) calls sum(3), sum(2), sum(1), and sum(0). The stack grows to 4 frames before popping off."
+    },
+    {
+      question: "What is the time complexity of the recursive sum(N) algorithm?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N²)"
+      ],
+      correctAnswer: 2,
+      explanation: "The function makes a linear chain of calls from N down to 0, resulting in O(N) time complexity."
+    },
+    {
+      question: "What does sum(4) return?",
+      options: [
+        "4",
+        "6",
+        "10",
+        "15"
+      ],
+      correctAnswer: 2,
+      explanation: "sum(4) evaluates to 4 + 3 + 2 + 1 + 0 = 10."
+    }
+  ];
+
+  return <QuizEngine title="Sum of N Recursion Quiz" questions={questions} />;
+};
+
+export default SumQuiz;
diff --git a/src/app/visualizer/recursion/tower-of-hanoi/AlgorithmClient.jsx b/src/app/visualizer/recursion/tower-of-hanoi/AlgorithmClient.jsx
new file mode 100644
index 000000000..5e373b01c
--- /dev/null
+++ b/src/app/visualizer/recursion/tower-of-hanoi/AlgorithmClient.jsx
@@ -0,0 +1,33 @@
+"use client";
+import HanoiAnimation from "@/app/visualizer/recursion/tower-of-hanoi/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/recursion/tower-of-hanoi/codeBlock";
+import Content from "@/app/visualizer/recursion/tower-of-hanoi/content";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Recursion", "Tower of Hanoi")}
+      title="Tower of Hanoi Recursion"
+      headerDescription="Visualize how the Tower of Hanoi algorithm calls itself, pushes frames to the call stack, reaches the base case, and coordinates disk movements across pegs."
+      headerActions={<ArticleActions />}
+      animation={<HanoiAnimation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[
+            { text: "Fibonacci (Tree Recursion)", url: "/visualizer/recursion/fibonacci" },
+            { text: "Factorial Recursion", url: "/visualizer/recursion/factorial" },
+            { text: "Recursive Binary Search", url: "/visualizer/recursion/binary-search" }
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/recursion/tower-of-hanoi/animation.jsx b/src/app/visualizer/recursion/tower-of-hanoi/animation.jsx
new file mode 100644
index 000000000..a4d43c1bd
--- /dev/null
+++ b/src/app/visualizer/recursion/tower-of-hanoi/animation.jsx
@@ -0,0 +1,433 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import ResetButton from "@/app/components/ui/resetButton";
+import GoButton from "@/app/components/ui/goButton";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+// Helper to generate the execution states step-by-step
+import { generateHanoiFrames } from "@/features/algorithms/recursion/hanoiLogic";
+const codeLinesByLanguage = {
+  javascript: [
+    { line: 1, code: "function hanoi(n, src, dest, aux) {" },
+    { line: 2, code: "  if (n === 1) {" },
+    { line: 3, code: "    moveDisk(1, src, dest);" },
+    { line: 4, code: "    return;" },
+    { line: 5, code: "  }" },
+    { line: 6, code: "  hanoi(n - 1, src, aux, dest);" },
+    { line: 7, code: "  moveDisk(n, src, dest);" },
+    { line: 8, code: "  hanoi(n - 1, aux, dest, src);" },
+    { line: 9, code: "}" }
+  ],
+  python: [
+    { line: 1, code: "def hanoi(n, src, dest, aux):" },
+    { line: 2, code: "    if n == 1:" },
+    { line: 3, code: "        move_disk(1, src, dest)" },
+    { line: 4, code: "        return" },
+    { line: 5, code: "    hanoi(n - 1, src, aux, dest)" },
+    { line: 6, code: "    move_disk(n, src, dest)" },
+    { line: 7, code: "    hanoi(n - 1, aux, dest, src)" }
+  ],
+  java: [
+    { line: 1, code: "void solveHanoi(int n, char src, char dest, char aux) {" },
+    { line: 2, code: "    if (n == 1) {" },
+    { line: 3, code: "        moveDisk(1, src, dest);" },
+    { line: 4, code: "        return;" },
+    { line: 5, code: "    }" },
+    { line: 6, code: "    solveHanoi(n - 1, src, aux, dest);" },
+    { line: 7, code: "    moveDisk(n, src, dest);" },
+    { line: 8, code: "    solveHanoi(n - 1, aux, dest, src);" },
+    { line: 9, code: "}" }
+  ],
+  cpp: [
+    { line: 1, code: "void solveHanoi(int n, char src, char dest, char aux) {" },
+    { line: 2, code: "    if (n == 1) {" },
+    { line: 3, code: "        moveDisk(1, src, dest);" },
+    { line: 4, code: "        return;" },
+    { line: 5, code: "    }" },
+    { line: 6, code: "    solveHanoi(n - 1, src, aux, dest);" },
+    { line: 7, code: "    moveDisk(n, src, dest);" },
+    { line: 8, code: "    solveHanoi(n - 1, aux, dest, src);" },
+    { line: 9, code: "}" }
+  ]
+};
+
+const lineHighlightMap = {
+  javascript: { entry: 1, check: 2, move1: 3, ret1: 4, recurse1: 6, moveN: 7, recurse2: 8 },
+  python:     { entry: 1, check: 2, move1: 3, ret1: 4, recurse1: 5, moveN: 6, recurse2: 7 },
+  java:       { entry: 1, check: 2, move1: 3, ret1: 4, recurse1: 6, moveN: 7, recurse2: 8 },
+  cpp:        { entry: 1, check: 2, move1: 3, ret1: 4, recurse1: 6, moveN: 7, recurse2: 8 }
+};
+
+const HanoiAnimation = () => {
+  const [nVal, setNVal] = useState("3");
+  const [isVisualizing, setIsVisualizing] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+  const [selectedLang, setSelectedLang] = useState("javascript");
+
+  const frames = useMemo(() => {
+    if (!isVisualizing) return [];
+    const n = parseInt(nVal, 10);
+    if (isNaN(n) || n < 1) return [];
+    return Array.from(generateHanoiFrames(n));
+  }, [nVal, isVisualizing]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 1000 });
+
+  useVisualizerReset(() => {
+    setNVal("3");
+    setIsVisualizing(false);
+    setErrorMsg("");
+    setSelectedLang("javascript");
+    engine.reset();
+  });
+
+  const handleGo = (e) => {
+    e.preventDefault();
+    const n = parseInt(nVal, 10);
+    if (isNaN(n) || n < 1) {
+      setErrorMsg("Please enter an integer >= 1.");
+      return;
+    }
+    if (n > 5) {
+      setErrorMsg("Please select N <= 5 to keep the visualization clear and fit for the screen.");
+      return;
+    }
+    setErrorMsg("");
+    setIsVisualizing(true);
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setIsVisualizing(false);
+    setErrorMsg("");
+    engine.reset();
+  };
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      engine.reset();
+      engine.play();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const activeFrameData = frames.length > 0 && engine.currentStep >= 0
+    ? frames[engine.currentStep]
+    : {
+        stack: [],
+        pegs: { A: Array.from({ length: parseInt(nVal, 10) || 3 }, (_, i) => (parseInt(nVal, 10) || 3) - i), B: [], C: [] },
+        activeLine: "none",
+        description: "Enter N (between 1 and 5) and click Visualize Go!",
+        movingDisk: null
+      };
+
+  const activeStack = activeFrameData.stack || [];
+  const activePegs = activeFrameData.pegs || { A: [], B: [], C: [] };
+  const logicalLine = activeFrameData.activeLine;
+  const activeLine = lineHighlightMap[selectedLang]?.[logicalLine] || 0;
+
+  const stackColors = {
+    calling: "bg-[#e0f2fe] dark:bg-sky-950/40 border-sky-400 dark:border-sky-700 text-sky-800 dark:text-sky-200",
+    checking_base: "bg-[#fef3c7] dark:bg-amber-950/40 border-amber-400 dark:border-amber-700 text-amber-800 dark:text-amber-200",
+    base_case: "bg-[#dcfce7] dark:bg-emerald-950/40 border-emerald-400 dark:border-emerald-700 text-emerald-800 dark:text-emerald-200 shadow-[0_0_15px_rgba(34,197,94,0.3)]",
+    waiting_1: "bg-[#fae8ff] dark:bg-purple-950/30 border-purple-400 dark:border-purple-800 text-purple-700 dark:text-purple-300",
+    moving: "bg-[#ffedd5] dark:bg-orange-950/40 border-orange-400 dark:border-orange-700 text-orange-800 dark:text-orange-200",
+    waiting_2: "bg-[#f5e0ff] dark:bg-fuchsia-950/30 border-fuchsia-400 dark:border-fuchsia-800 text-fuchsia-700 dark:text-fuchsia-300",
+    returning: "bg-[#fee2e2] dark:bg-rose-950/40 border-rose-400 dark:border-rose-700 text-rose-800 dark:text-rose-200 shadow-[0_0_15px_rgba(239,68,68,0.2)]",
+    waiting: "bg-gray-100 dark:bg-zinc-800 border-gray-300 dark:border-zinc-700 text-gray-500 dark:text-zinc-400",
+  };
+
+  return (
+    <main className="container mx-auto">
+      {/* Configuration Header */}
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8 shadow-sm"
+      >
+        <div className="flex flex-col sm:flex-row items-end gap-4">
+          <div className="flex-1">
+            <label className="block text-gray-700 dark:text-gray-300 mb-2 font-medium" htmlFor="nVal">
+              Number of Disks (N)
+            </label>
+            <input
+              type="number"
+              id="nVal"
+              min="1"
+              max="5"
+              value={nVal}
+              onChange={(e) => {
+                setNVal(e.target.value);
+                handleReset();
+              }}
+              className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#0d9488] focus:outline-none focus:ring-2 focus:ring-[#0d9488]/30 transition duration-300 font-semibold"
+              placeholder="e.g. 3"
+              disabled={isVisualizing}
+            />
+          </div>
+
+          <div className="flex gap-2">
+            <GoButton onClick={handleGo} isAnimating={isVisualizing} disabled={isVisualizing} />
+            <ResetButton onReset={handleReset} isAnimating={isVisualizing} />
+          </div>
+        </div>
+
+        {errorMsg && <p className="text-red-500 dark:text-red-400 text-xs font-semibold mt-2">{errorMsg}</p>}
+
+        {isVisualizing && frames.length > 0 && (
+          <div className="mt-4">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => { engine.reset(); }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </form>
+
+      {/* Narrative Explanation Block */}
+      <div className="max-w-4xl mx-auto mb-8 p-4 rounded-xl border border-teal-100 bg-teal-50/40 dark:border-teal-900/30 dark:bg-teal-950/10 text-teal-800 dark:text-teal-200 shadow-sm">
+        <p className="text-center font-medium text-sm leading-relaxed">
+          {activeFrameData.description}
+        </p>
+      </div>
+
+      {/* Pegs Animation Workspace */}
+      <div className="max-w-4xl mx-auto mb-8 bg-white dark:bg-[#1a1a1a] p-6 rounded-xl border border-gray-200 dark:border-zinc-800 shadow flex flex-col items-center">
+        <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider text-center">
+          Peg State Representation
+        </h3>
+        
+        <svg viewBox="0 0 600 240" className="w-full max-w-[600px] h-[240px] drop-shadow-sm">
+          {/* Definitions for gorgeous disk gradients */}
+          <defs>
+            <linearGradient id="grad-disk-1" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#f97316" />
+              <stop offset="100%" stopColor="#f43f5e" />
+            </linearGradient>
+            <linearGradient id="grad-disk-2" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#34d399" />
+              <stop offset="100%" stopColor="#0d9488" />
+            </linearGradient>
+            <linearGradient id="grad-disk-3" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#22d3ee" />
+              <stop offset="100%" stopColor="#2563eb" />
+            </linearGradient>
+            <linearGradient id="grad-disk-4" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#c084fc" />
+              <stop offset="100%" stopColor="#4f46e5" />
+            </linearGradient>
+            <linearGradient id="grad-disk-5" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#f472b6" />
+              <stop offset="100%" stopColor="#db2777" />
+            </linearGradient>
+          </defs>
+
+          {/* Peg posts and labels */}
+          {[
+            { id: "A", name: "Source (A)", x: 100 },
+            { id: "B", name: "Auxiliary (B)", x: 300 },
+            { id: "C", name: "Destination (C)", x: 500 }
+          ].map((peg) => (
+            <g key={peg.id}>
+              {/* Peg Base */}
+              <line
+                x1={peg.x - 70}
+                y1={210}
+                x2={peg.x + 70}
+                y2={210}
+                stroke="#6b7280"
+                strokeWidth="8"
+                strokeLinecap="round"
+                className="opacity-80 dark:opacity-60"
+              />
+              {/* Peg Shaft */}
+              <line
+                x1={peg.x}
+                y1={60}
+                x2={peg.x}
+                y2={210}
+                stroke="#9ca3af"
+                strokeWidth="10"
+                strokeLinecap="round"
+                className="opacity-70 dark:opacity-50"
+              />
+              {/* Peg Title text */}
+              <text
+                x={peg.x}
+                y={232}
+                textAnchor="middle"
+                className="text-[11px] font-bold fill-gray-500 dark:fill-zinc-400 select-none tracking-wide"
+              >
+                {peg.name}
+              </text>
+            </g>
+          ))}
+
+          {/* Disks rendering */}
+          {Object.entries(activePegs).map(([pegKey, diskList]) => {
+            const pegXMap = { A: 100, B: 300, C: 500 };
+            const pegX = pegXMap[pegKey];
+
+            return diskList.map((diskVal, index) => {
+              const diskW = 45 + diskVal * 20; // Disk width
+              const diskH = 18; // Disk height
+              // Y calculations: base is at 210, stack starts just above base
+              const diskY = 210 - (index + 1) * diskH - index * 2;
+              const diskX = pegX - diskW / 2;
+
+              // Determine if this disk is currently active/moving
+              const isMoving = activeFrameData.movingDisk === diskVal && activeFrameData.fromPeg === pegKey;
+              const targetPegX = activeFrameData.toPeg ? pegXMap[activeFrameData.toPeg] : null;
+
+              return (
+                <g key={`disk-${diskVal}`} className="transition-all duration-500 ease-out">
+                  <rect
+                    x={diskX}
+                    y={diskY}
+                    width={diskW}
+                    height={diskH}
+                    rx="6"
+                    ry="6"
+                    fill={`url(#grad-disk-${diskVal})`}
+                    className={`transition-all duration-300 ${
+                      isMoving ? "stroke-white dark:stroke-zinc-100 stroke-2 filter drop-shadow-[0_0_8px_rgba(255,255,255,0.7)] animate-bounce" : ""
+                    }`}
+                  />
+                  <text
+                    x={pegX}
+                    y={diskY + 12}
+                    textAnchor="middle"
+                    className="text-[9px] font-black fill-white select-none pointer-events-none drop-shadow"
+                  >
+                    {diskVal}
+                  </text>
+                  {/* Arrow helper for movement */}
+                  {isMoving && targetPegX !== null && (
+                    <path
+                      d={`M ${pegX} ${diskY - 15} Q ${(pegX + targetPegX) / 2} ${diskY - 45} ${targetPegX} ${diskY - 15}`}
+                      fill="none"
+                      stroke="#a435f0"
+                      strokeWidth="2.5"
+                      strokeDasharray="4,4"
+                      className="animate-[dash_1s_linear_infinite]"
+                    />
+                  )}
+                </g>
+              );
+            });
+          })}
+        </svg>
+      </div>
+
+      {/* Visual Workspace: Call Stack & Code Trace */}
+      <div className="max-w-4xl mx-auto grid gap-6 md:grid-cols-12 mb-8">
+        
+        {/* Left Side: Call Stack */}
+        <div className="md:col-span-5 rounded-xl bg-white dark:bg-[#1a1a1a] p-5 shadow border border-gray-200 dark:border-zinc-800 flex flex-col">
+          <h3 className="text-sm font-semibold text-gray-500 dark:text-zinc-400 mb-4 uppercase tracking-wider text-center">
+            Active Call Stack
+          </h3>
+          {activeStack.length === 0 ? (
+            <div className="flex flex-col items-center justify-center flex-grow h-80 border-2 border-dashed border-gray-200 dark:border-zinc-800 rounded-xl">
+              <p className="text-gray-400 dark:text-zinc-500 text-sm">Call Stack is Empty</p>
+            </div>
+          ) : (
+            <div className="flex flex-col-reverse gap-2 items-center justify-end h-80 overflow-y-auto p-4 border border-gray-100 dark:border-zinc-800 rounded-xl bg-gray-50/50 dark:bg-zinc-900/20">
+              {activeStack.map((frame, index) => {
+                const isTop = index === activeStack.length - 1;
+                const statusClass = stackColors[frame.status] || stackColors.waiting;
+
+                return (
+                  <div
+                    key={frame.id}
+                    className={`w-full max-w-[280px] p-3 rounded-lg border flex flex-col items-center transition-all duration-300 ${statusClass} ${
+                      isTop ? "ring-2 ring-[#a435f0] dark:ring-[#a435f0] ring-offset-2 dark:ring-offset-zinc-950 shadow-md" : "scale-[0.98]"
+                    }`}
+                  >
+                    <div className="flex justify-between w-full font-mono text-[10px] font-bold">
+                      <span>hanoi(n={frame.n})</span>
+                      <span className="capitalize text-[9px]">{frame.status.replace("_", " ")}</span>
+                    </div>
+                    <div className="mt-2 text-[10px] font-mono w-full flex justify-between border-t border-black/5 dark:border-white/5 pt-1.5 opacity-90">
+                      <span>src: {frame.src}</span>
+                      <span>dest: {frame.dest}</span>
+                      <span>aux: {frame.aux}</span>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Right Side: Code Block Trace */}
+        <div className="md:col-span-7 flex flex-col">
+          <div className="w-full border border-gray-200 dark:border-zinc-800 rounded-xl overflow-hidden bg-zinc-950 font-mono text-xs shadow-inner flex flex-col h-full">
+            <div className="flex items-center justify-between px-4 py-2 bg-zinc-900 border-b border-zinc-800">
+              <div className="flex items-center gap-2">
+                <span className="text-zinc-400 font-semibold">Active Code Trace</span>
+                <select
+                  value={selectedLang}
+                  onChange={(e) => setSelectedLang(e.target.value)}
+                  className="bg-zinc-800 text-zinc-200 text-[11px] px-2 py-0.5 rounded border border-zinc-700 outline-none cursor-pointer hover:bg-zinc-700 focus:ring-1 focus:ring-[#a435f0]/50"
+                >
+                  <option value="javascript">JavaScript</option>
+                  <option value="python">Python</option>
+                  <option value="java">Java</option>
+                  <option value="cpp">C++</option>
+                </select>
+              </div>
+              <div className="flex gap-1">
+                <span className="w-2.5 h-2.5 rounded-full bg-[#ff5f57]" />
+                <span className="w-2.5 h-2.5 rounded-full bg-[#febc2e]" />
+                <span className="w-2.5 h-2.5 rounded-full bg-[#28c840]" />
+              </div>
+            </div>
+            <div className="p-4 text-zinc-300 leading-relaxed overflow-y-auto flex-grow max-h-[320px]">
+              {(codeLinesByLanguage[selectedLang] || []).map((ln) => {
+                const isActive = ln.line === activeLine;
+                return (
+                  <div
+                    key={ln.line}
+                    className={`flex gap-4 px-2 py-0.5 rounded transition-colors duration-200 ${
+                      isActive ? "bg-[#a435f0]/20 border-l-4 border-[#a435f0] text-white font-bold" : "border-l-4 border-transparent"
+                    }`}
+                  >
+                    <span className="text-zinc-600 select-none w-4 text-right">{ln.line}</span>
+                    <span className="whitespace-pre">{ln.code}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </main>
+  );
+};
+
+export default HanoiAnimation;
diff --git a/src/app/visualizer/recursion/tower-of-hanoi/codeBlock.jsx b/src/app/visualizer/recursion/tower-of-hanoi/codeBlock.jsx
new file mode 100644
index 000000000..6ec78cd5f
--- /dev/null
+++ b/src/app/visualizer/recursion/tower-of-hanoi/codeBlock.jsx
@@ -0,0 +1,111 @@
+"use client";
+import React from "react";
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const hanoiCode = {
+  javascript: `// Tower of Hanoi in JavaScript
+function towerOfHanoi(n, fromPeg, toPeg, auxPeg) {
+  if (n === 1) {
+    console.log(\`Move disk 1 from \${fromPeg} to \${toPeg}\`);
+    return;
+  }
+  
+  // Move top n-1 disks from source to auxiliary peg
+  towerOfHanoi(n - 1, fromPeg, auxPeg, toPeg);
+  
+  // Move the remaining largest disk from source to destination peg
+  console.log(\`Move disk \${n} from \${fromPeg} to \${toPeg}\`);
+  
+  // Move the n-1 disks from auxiliary to destination peg
+  towerOfHanoi(n - 1, auxPeg, toPeg, fromPeg);
+}
+
+// Example call:
+// Solve for 3 disks from peg 'A' to peg 'C' using 'B'
+towerOfHanoi(3, 'A', 'C', 'B');`,
+
+  python: `# Tower of Hanoi in Python
+def tower_of_hanoi(n, from_peg, to_peg, aux_peg):
+    if n == 1:
+        print(f"Move disk 1 from {from_peg} to {to_peg}")
+        return
+    
+    # Move top n-1 disks from source to auxiliary peg
+    tower_of_hanoi(n - 1, from_peg, aux_peg, to_peg)
+    
+    # Move the remaining largest disk from source to destination peg
+    print(f"Move disk {n} from {from_peg} to {to_peg}")
+    
+    # Move the n-1 disks from auxiliary to destination peg
+    tower_of_hanoi(n - 1, aux_peg, to_peg, from_peg)
+
+# Example call:
+# Solve for 3 disks from peg 'A' to peg 'C' using 'B'
+tower_of_hanoi(3, 'A', 'C', 'B')`,
+
+  java: `// Tower of Hanoi in Java
+public class TowerOfHanoi {
+    public static void solveHanoi(int n, char fromPeg, char toPeg, char auxPeg) {
+        if (n == 1) {
+            System.out.println("Move disk 1 from " + fromPeg + " to " + toPeg);
+            return;
+        }
+        
+        // Move top n-1 disks from source to auxiliary peg
+        solveHanoi(n - 1, fromPeg, auxPeg, toPeg);
+        
+        // Move the remaining largest disk from source to destination peg
+        System.out.println("Move disk " + n + " from " + fromPeg + " to " + toPeg);
+        
+        // Move the n-1 disks from auxiliary to destination peg
+        solveHanoi(n - 1, auxPeg, toPeg, fromPeg);
+    }
+
+    public static void main(String[] args) {
+        // Solve for 3 disks from peg 'A' to peg 'C' using 'B'
+        solveHanoi(3, 'A', 'C', 'B');
+    }
+}`,
+
+  cpp: `// Tower of Hanoi in C++
+#include <iostream>
+
+void solveHanoi(int n, char fromPeg, char toPeg, char auxPeg) {
+    if (n == 1) {
+        std::cout << "Move disk 1 from " << fromPeg << " to " << toPeg << std::endl;
+        return;
+    }
+    
+    // Move top n-1 disks from source to auxiliary peg
+    solveHanoi(n - 1, fromPeg, auxPeg, toPeg);
+    
+    // Move the remaining largest disk from source to destination peg
+    std::cout << "Move disk " << n << " from " << fromPeg << " to " << toPeg << std::endl;
+    
+    // Move the n-1 disks from auxiliary to destination peg
+    solveHanoi(n - 1, auxPeg, toPeg, fromPeg);
+}
+
+int main() {
+    // Solve for 3 disks from peg 'A' to peg 'C' using 'B'
+    solveHanoi(3, 'A', 'C', 'B');
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: "towerOfHanoi.js",
+  python: "tower_of_hanoi.py",
+  java: "TowerOfHanoi.java",
+  cpp: "tower_of_hanoi.cpp",
+};
+
+const HanoiCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={hanoiCode}
+    fileNames={fileNames}
+  />
+);
+
+export default HanoiCode;
diff --git a/src/app/visualizer/recursion/tower-of-hanoi/content.jsx b/src/app/visualizer/recursion/tower-of-hanoi/content.jsx
new file mode 100644
index 000000000..e37d681bb
--- /dev/null
+++ b/src/app/visualizer/recursion/tower-of-hanoi/content.jsx
@@ -0,0 +1,108 @@
+"use client";
+import React from "react";
+
+const Content = () => {
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8 shadow-sm">
+
+        {/* What is Tower of Hanoi */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            What is the Tower of Hanoi?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <p className="leading-relaxed">
+              The Tower of Hanoi is a classical mathematical puzzle consisting of three pegs and $N$ disks of different sizes.
+              The objective of the puzzle is to move the entire stack of disks from the Source Peg to the Destination Peg
+              using an Auxiliary Peg, obeying three simple rules:
+            </p>
+            <ol className="mt-3 space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              <li>Only one disk can be moved at a time.</li>
+              <li>Each move consists of taking the upper disk from one of the stacks and placing it on top of another stack or on an empty peg.</li>
+              <li>No larger disk may be placed on top of a smaller disk.</li>
+            </ol>
+            <p className="mt-4 leading-relaxed">
+              The puzzle is resolved using a Divide and Conquer recursive strategy:
+            </p>
+            <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              <li><strong>Base Case ($N=1$):</strong> Directly move the single disk from Source to Destination.</li>
+              <li><strong>Recursive Case ($N &gt; 1$):</strong>
+                <ol className="list-decimal pl-5 mt-1 space-y-1">
+                  <li>Move the top $N-1$ disks from Source to Auxiliary using Destination.</li>
+                  <li>Move the remaining largest disk from Source to Destination.</li>
+                  <li>Move the $N-1$ disks from Auxiliary to Destination using Source.</li>
+                </ol>
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        {/* The Recurrence Relation */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            The Recurrence Relation
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <p className="leading-relaxed">
+              To find the number of moves $T(N)$ required to solve the puzzle for $N$ disks, we can express the operations as a mathematical recurrence relation:
+            </p>
+            <p className="mt-2 font-mono bg-gray-50 dark:bg-zinc-900 p-3 rounded-lg border border-gray-150 dark:border-zinc-800 text-center text-lg">
+              T(N) = 2T(N - 1) + 1, &nbsp; with base case &nbsp; T(1) = 1
+            </p>
+            <p className="mt-4 leading-relaxed">
+              Let's solve this recurrence relation using substitution:
+            </p>
+            <ul className="mt-2 space-y-1.5 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400 font-mono text-sm bg-gray-50 dark:bg-zinc-900/50 p-3 rounded-lg">
+              <li>T(N) = 2T(N-1) + 1</li>
+              <li>T(N) = 2[2T(N-2) + 1] + 1 = 2²T(N-2) + 2 + 1</li>
+              <li>T(N) = 2³T(N-3) + 2² + 2¹ + 2⁰</li>
+              <li>...</li>
+              <li>T(N) = 2^(N-1)T(1) + 2^(N-2) + ... + 2¹ + 2⁰</li>
+              <li>T(N) = 2^(N-1) + 2^(N-2) + ... + 2¹ + 2⁰</li>
+            </ul>
+            <p className="mt-3 leading-relaxed">
+              This is a geometric progression with a sum of:
+            </p>
+            <p className="mt-2 font-mono bg-teal-50/40 dark:bg-teal-950/10 p-3 rounded-lg border border-teal-100 dark:border-teal-950/20 text-center text-lg font-bold text-teal-800 dark:text-teal-200">
+              T(N) = 2^N - 1
+            </p>
+            <p className="mt-3 leading-relaxed">
+              For example, if we have $N = 3$ disks, the total number of moves will be $2^3 - 1 = 7$ moves. Adding just one more disk doubles the size of the recursion tree, requiring $2^4 - 1 = 15$ moves!
+            </p>
+          </div>
+        </section>
+
+        {/* Complexity Analysis */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#0d9488] mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h1>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-4">
+            <div>
+              <span className="font-mono font-bold bg-rose-50 dark:bg-rose-950/20 px-2 py-1 rounded border border-rose-100 dark:border-rose-950/30 text-rose-800 dark:text-rose-300 text-sm">
+                Time Complexity: O(2^N)
+              </span>
+              <p className="mt-1 leading-relaxed">
+                Since solving the puzzle for $N$ disks requires resolving two sub-problems of size $N-1$ and executing 1 constant time disk move, the recursion tree doubles in width at every level. The total operations equal $2^N - 1$, which grows exponentially.
+              </p>
+            </div>
+            <div>
+              <span className="font-mono font-bold bg-amber-50 dark:bg-amber-950/20 px-2 py-1 rounded border border-amber-100 dark:border-amber-950/30 text-amber-800 dark:text-amber-300 text-sm">
+                Space Complexity: O(N)
+              </span>
+              <p className="mt-1 leading-relaxed">
+                The call stack size is determined by the height of the recursion tree. Since we recurse down to $N-1$ before executing moves, the maximum number of frames on the call stack at any point during execution is $N$. Therefore, the auxiliary space complexity is linear, $O(N)$.
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/recursion/tower-of-hanoi/quiz.jsx b/src/app/visualizer/recursion/tower-of-hanoi/quiz.jsx
new file mode 100644
index 000000000..31c980f4f
--- /dev/null
+++ b/src/app/visualizer/recursion/tower-of-hanoi/quiz.jsx
@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const HanoiQuiz = () => {
+  const questions = [
+    {
+      question: "What is the recurrence relation for the number of moves required to solve the Tower of Hanoi with N disks?",
+      options: [
+        "T(N) = T(N - 1) + 1",
+        "T(N) = 2T(N - 1) + 1",
+        "T(N) = 2T(N - 1) + N",
+        "T(N) = T(N - 1) + T(N - 2) + 1"
+      ],
+      correctAnswer: 1,
+      explanation: "To solve N disks, we must recursively move N-1 disks to the auxiliary peg (T(N-1)), move the largest disk to the destination (1 move), and move the N-1 disks from auxiliary to destination (T(N-1)). Thus, T(N) = 2T(N-1) + 1."
+    },
+    {
+      question: "What is the minimum number of moves required to solve a Tower of Hanoi puzzle with 4 disks?",
+      options: [
+        "7 moves",
+        "10 moves",
+        "15 moves",
+        "31 moves"
+      ],
+      correctAnswer: 2,
+      explanation: "Using the formula T(N) = 2^N - 1, for N = 4 we get 2^4 - 1 = 16 - 1 = 15 moves."
+    },
+    {
+      question: "If we have 3 disks on Peg A (Source) and want to move them to Peg C (Destination) using Peg B (Auxiliary), what is the first step in the recursion?",
+      options: [
+        "Move disk 1 from A to B",
+        "Move disk 1 from A to C",
+        "Move disk 2 from A to B",
+        "Move disk 3 from A to C"
+      ],
+      correctAnswer: 1,
+      explanation: "To move 3 disks from A to C, we must first recursively move the top 2 disks (disks 1 and 2) from A to B. To move 2 disks from A to B using C, we recursively move the top 1 disk (disk 1) from A to C. So the first physical move is disk 1 from A to C."
+    },
+    {
+      question: "What is the auxiliary space complexity of the recursive Tower of Hanoi algorithm?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(2^N)"
+      ],
+      correctAnswer: 2,
+      explanation: "The space complexity is determined by the maximum height of the recursion tree on the call stack. Since we recurse down to 1 disk in a linear branch, the maximum number of simultaneous stack frames is N. Thus, the space complexity is O(N)."
+    },
+    {
+      question: "Which of the following is NOT a rule of the Tower of Hanoi puzzle?",
+      options: [
+        "Only one disk can be moved at a time.",
+        "A disk can only be placed on a larger disk or an empty peg.",
+        "A disk can only be moved from the top of its stack.",
+        "Disks must be moved directly from source to destination without using the auxiliary peg."
+      ],
+      correctAnswer: 3,
+      explanation: "Disks are allowed (and must be) moved using the auxiliary peg. The auxiliary peg is essential to act as temporary storage to solve the puzzle."
+    }
+  ];
+
+  return <QuizEngine title="Tower of Hanoi Recursion Quiz" questions={questions} />;
+};
+
+export default HanoiQuiz;
diff --git a/src/app/visualizer/recursion/tower-of-hanoi/quiz/page.jsx b/src/app/visualizer/recursion/tower-of-hanoi/quiz/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/recursion/tower-of-hanoi/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/tower-of-hanoi/quiz/quiz.jsx b/src/app/visualizer/recursion/tower-of-hanoi/quiz/quiz.jsx
new file mode 100644
index 000000000..ee805f1c6
--- /dev/null
+++ b/src/app/visualizer/recursion/tower-of-hanoi/quiz/quiz.jsx
@@ -0,0 +1,178 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const TowerOfHanoiQuiz = () => {
+  const questions = [
+    {
+      question: "What is the objective of the Tower of Hanoi problem?",
+      options: [
+        "Sort the disks",
+        "Move all disks from source to destination following the rules",
+        "Find the largest disk",
+        "Reverse the stack"
+      ],
+      correctAnswer: 1,
+      explanation: "The goal is to move all disks from the source rod to the destination rod while following the puzzle's rules."
+    },
+    {
+      question: "How many rods are used in the Tower of Hanoi puzzle?",
+      options: ["2", "3", "4", "5"],
+      correctAnswer: 1,
+      explanation: "The classic Tower of Hanoi puzzle consists of three rods."
+    },
+    {
+      question: "How many disks can be moved at one time?",
+      options: [
+        "Only one",
+        "Two",
+        "Three",
+        "Any number"
+      ],
+      correctAnswer: 0,
+      explanation: "Only one disk may be moved during each step."
+    },
+    {
+      question: "Can a larger disk be placed on top of a smaller disk?",
+      options: [
+        "Yes",
+        "No",
+        "Only once",
+        "Only for the last move"
+      ],
+      correctAnswer: 1,
+      explanation: "A larger disk can never be placed on top of a smaller disk."
+    },
+    {
+      question: "What is the base case in the recursive solution?",
+      options: [
+        "n == 0 or n == 1",
+        "n == 5",
+        "n == 10",
+        "No base case"
+      ],
+      correctAnswer: 0,
+      explanation: "When only one disk remains, it is moved directly."
+    },
+    {
+      question: "Which algorithmic technique is used in Tower of Hanoi?",
+      options: [
+        "Greedy",
+        "Divide and Conquer",
+        "Dynamic Programming",
+        "Hashing"
+      ],
+      correctAnswer: 1,
+      explanation: "Tower of Hanoi is solved using Divide and Conquer recursion."
+    },
+    {
+      question: "What is the minimum number of moves required for 3 disks?",
+      options: [
+        "5",
+        "6",
+        "7",
+        "8"
+      ],
+      correctAnswer: 2,
+      explanation: "2³ − 1 = 7 moves."
+    },
+    {
+      question: "What is the formula for the minimum number of moves?",
+      options: [
+        "2ⁿ − 1",
+        "n²",
+        "n!",
+        "2n"
+      ],
+      correctAnswer: 0,
+      explanation: "The minimum number of moves required is 2ⁿ − 1."
+    },
+    {
+      question: "What is the time complexity of Tower of Hanoi?",
+      options: [
+        "O(log n)",
+        "O(n)",
+        "O(2ⁿ)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation: "The recursive solution requires 2ⁿ − 1 moves."
+    },
+    {
+      question: "What is the space complexity of Tower of Hanoi recursion?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation: "The recursion stack grows to a depth of n."
+    },
+    {
+      question: "Which rod is used as temporary storage?",
+      options: [
+        "Source",
+        "Destination",
+        "Auxiliary",
+        "None"
+      ],
+      correctAnswer: 2,
+      explanation: "The auxiliary rod temporarily holds disks during recursion."
+    },
+    {
+      question: "How many recursive calls are made for each non-base case?",
+      options: [
+        "One",
+        "Two",
+        "Three",
+        "Four"
+      ],
+      correctAnswer: 1,
+      explanation: "Each recursive step makes two recursive calls."
+    },
+    {
+      question: "How many moves are required for 4 disks?",
+      options: [
+        "15",
+        "16",
+        "17",
+        "18"
+      ],
+      correctAnswer: 0,
+      explanation: "2⁴ − 1 = 15 moves."
+    },
+    {
+      question: "What happens between the two recursive calls?",
+      options: [
+        "Move the largest disk",
+        "Sort the disks",
+        "Reverse the rods",
+        "Stop recursion"
+      ],
+      correctAnswer: 0,
+      explanation: "The largest remaining disk is moved between the two recursive calls."
+    },
+    {
+      question: "Why is Tower of Hanoi considered a classic recursion problem?",
+      options: [
+        "It demonstrates recursive decomposition into smaller subproblems.",
+        "It avoids recursion.",
+        "It uses loops only.",
+        "It requires sorting."
+      ],
+      correctAnswer: 0,
+      explanation: "The puzzle naturally breaks into smaller recursive problems."
+    }
+  ];
+
+  return (
+    <QuizEngine
+      title="Tower of Hanoi Recursion Quiz"
+      questions={questions}
+    />
+  );
+};
+
+export default TowerOfHanoiQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/trees/AlgorithmClient.jsx b/src/app/visualizer/recursion/trees/AlgorithmClient.jsx
new file mode 100644
index 000000000..fb65485d3
--- /dev/null
+++ b/src/app/visualizer/recursion/trees/AlgorithmClient.jsx
@@ -0,0 +1,7 @@
+import TreesClient from "./TreesClient";
+
+
+
+export default function Page() {
+  return <TreesClient />;
+}
diff --git a/src/app/visualizer/recursion/trees/TreesClient.jsx b/src/app/visualizer/recursion/trees/TreesClient.jsx
new file mode 100644
index 000000000..395290194
--- /dev/null
+++ b/src/app/visualizer/recursion/trees/TreesClient.jsx
@@ -0,0 +1,32 @@
+"use client";
+import React from "react";
+import FibonacciAnimation from "../fibonacci/animation";
+import Code from "../fibonacci/codeBlock";
+import Content from "../fibonacci/content";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function TreesClient() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Recursion", "Recursion Trees")}
+      title="Recursion Trees"
+      headerDescription="Visualize recursion trees using the Fibonacci calculation. Observe how the function execution branches out dynamically to form a decision tree."
+      animation={<FibonacciAnimation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other topics"
+          links={[
+            { text: "Call Stack Visualization", url: "/visualizer/recursion/stack" },
+            { text: "Backtracking", url: "/visualizer/recursion/backtracking" },
+            { text: "Multiple Recursive Calls", url: "/visualizer/recursion/multiple-calls" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/recursion/trees/quiz/page.jsx b/src/app/visualizer/recursion/trees/quiz/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/recursion/trees/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/recursion/trees/quiz/quiz.jsx b/src/app/visualizer/recursion/trees/quiz/quiz.jsx
new file mode 100644
index 000000000..d96313972
--- /dev/null
+++ b/src/app/visualizer/recursion/trees/quiz/quiz.jsx
@@ -0,0 +1,198 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const RecursionTreesQuiz = () => {
+  const questions = [
+    {
+  question: "What is a recursion tree?",
+  options: [
+    "A Binary Search Tree",
+    "A visual representation of recursive function calls",
+    "A linked list",
+    "A graph traversal algorithm"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "A recursion tree illustrates how recursive calls are generated and how they relate to each other."
+},
+{
+  question: "What does each node in a recursion tree represent?",
+  options: [
+    "A variable",
+    "A recursive function call",
+    "An array element",
+    "A loop iteration"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Each node corresponds to one invocation of the recursive function."
+},
+{
+  question: "The root of a recursion tree represents:",
+  options: [
+    "The last recursive call",
+    "The initial function call",
+    "The base case",
+    "The final answer"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "The root node is the original function call made by the program."
+},
+{
+  question: "Why are recursion trees useful?",
+  options: [
+    "To visualize recursive execution",
+    "To sort arrays",
+    "To search graphs",
+    "To reduce recursion depth"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Recursion trees help understand recursive calls, repeated work, and time complexity."
+},
+{
+  question: "Which recursive algorithm commonly forms a binary recursion tree?",
+  options: [
+    "Factorial",
+    "Linear Search",
+    "Fibonacci",
+    "Bubble Sort"
+  ],
+  correctAnswer: 2,
+  explanation:
+    "Each Fibonacci call generates two recursive calls, forming a binary recursion tree."
+},
+{
+  question: "The leaves of a recursion tree usually represent:",
+  options: [
+    "Recursive calls",
+    "Base cases",
+    "Sorting operations",
+    "Loops"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Leaf nodes occur when recursion reaches the base condition."
+},
+{
+  question: "What can recursion trees help estimate?",
+  options: [
+    "Time complexity",
+    "Memory address",
+    "CPU frequency",
+    "Network speed"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "By counting work at each level, recursion trees help estimate overall time complexity."
+},
+{
+  question: "What happens to recursion tree nodes after returning from recursion?",
+  options: [
+    "They remain forever",
+    "They are removed as the call stack unwinds",
+    "They become arrays",
+    "They are sorted"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "As recursive calls return, their stack frames are removed."
+},
+{
+  question: "Which traversal best matches recursive execution?",
+  options: [
+    "Breadth-First Search",
+    "Depth-First Search",
+    "Level Order",
+    "Binary Search"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Recursive calls naturally follow Depth-First Search."
+},
+{
+  question: "A recursion tree with repeated subproblems often suggests using:",
+  options: [
+    "Memoization",
+    "Bubble Sort",
+    "Binary Search",
+    "Hash Table only"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Memoization stores previously computed results to avoid repeated recursive work."
+},
+{
+  question: "In a recursion tree, what does the height of the tree usually represent?",
+  options: [
+    "The number of loops in the program",
+    "The maximum recursion depth",
+    "The number of variables",
+    "The number of array elements"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "The height of a recursion tree corresponds to the maximum depth of recursive calls before reaching the base case."
+},
+{
+  question: "Why do some recursion trees grow exponentially?",
+  options: [
+    "Because each recursive call creates multiple new recursive calls",
+    "Because arrays are sorted recursively",
+    "Because recursion uses loops",
+    "Because the compiler duplicates the code"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "When each recursive call generates multiple child calls (such as in Fibonacci), the number of nodes grows exponentially."
+},
+{
+  question: "Which part of a recursion tree helps identify repeated subproblems?",
+  options: [
+    "The root node",
+    "The leaf nodes",
+    "Repeated branches containing identical function calls",
+    "The tree height"
+  ],
+  correctAnswer: 2,
+  explanation:
+    "Repeated branches indicate the same subproblems are being solved multiple times, suggesting optimization through memoization."
+},
+{
+  question: "What happens to the recursion tree after all recursive calls complete?",
+  options: [
+    "It remains in memory permanently",
+    "The call stack unwinds and all recursive frames are removed",
+    "It becomes a binary tree",
+    "It is converted into an array"
+  ],
+  correctAnswer: 1,
+  explanation:
+    "As each recursive call returns, its stack frame is removed until the recursion completely finishes."
+},
+{
+  question: "Which optimization technique eliminates repeated computations visible in a recursion tree?",
+  options: [
+    "Memoization",
+    "Selection Sort",
+    "Binary Search",
+    "Breadth-First Search"
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Memoization stores previously computed results, preventing repeated evaluation of identical recursive calls."
+}
+  ];
+
+  return (
+    <QuizEngine
+      title="Recursion Trees Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default RecursionTreesQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/revision-flashcards/page.jsx b/src/app/visualizer/revision-flashcards/page.jsx
new file mode 100644
index 000000000..1d5bd3c6c
--- /dev/null
+++ b/src/app/visualizer/revision-flashcards/page.jsx
@@ -0,0 +1,9 @@
+import SmartRevisionFlashcards from "@/app/components/SmartRevisionFlashcards";
+
+export default function RevisionFlashcardsPage() {
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] p-6">
+      <SmartRevisionFlashcards />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/segment-tree/page.jsx b/src/app/visualizer/segment-tree/page.jsx
new file mode 100644
index 000000000..8a67ea692
--- /dev/null
+++ b/src/app/visualizer/segment-tree/page.jsx
@@ -0,0 +1,490 @@
+"use client";
+import { useState, useEffect, useRef, useCallback } from "react";
+
+// ─── Segment Tree Logic ────────────────────────────────────────────────────────
+function buildTree(arr, node, start, end, tree) {
+  if (start === end) {
+    tree[node] = { sum: arr[start], min: arr[start], max: arr[start] };
+  } else {
+    const mid = Math.floor((start + end) / 2);
+    buildTree(arr, 2 * node, start, mid, tree);
+    buildTree(arr, 2 * node + 1, mid + 1, end, tree);
+    tree[node] = {
+      sum: tree[2 * node].sum + tree[2 * node + 1].sum,
+      min: Math.min(tree[2 * node].min, tree[2 * node + 1].min),
+      max: Math.max(tree[2 * node].max, tree[2 * node + 1].max),
+    };
+  }
+}
+
+function queryTree(node, start, end, l, r, tree, visited) {
+  if (r < start || end < l) {
+    visited.push({ node, type: "out" });
+    return null;
+  }
+  visited.push({ node, type: start >= l && end <= r ? "in" : "partial" });
+  if (start >= l && end <= r) return;
+  const mid = Math.floor((start + end) / 2);
+  queryTree(2 * node, start, mid, l, r, tree, visited);
+  queryTree(2 * node + 1, mid + 1, end, l, r, tree, visited);
+}
+
+function updateTree(arr, node, start, end, idx, val, tree, visited) {
+  visited.push({ node, type: "update" });
+  if (start === end) {
+    arr[idx] = val;
+    tree[node] = { sum: val, min: val, max: val };
+    return;
+  }
+  const mid = Math.floor((start + end) / 2);
+  if (idx <= mid) updateTree(arr, 2 * node, start, mid, idx, val, tree, visited);
+  else updateTree(arr, 2 * node + 1, mid + 1, end, idx, val, tree, visited);
+  tree[node] = {
+    sum: tree[2 * node].sum + tree[2 * node + 1].sum,
+    min: Math.min(tree[2 * node].min, tree[2 * node + 1].min),
+    max: Math.max(tree[2 * node].max, tree[2 * node + 1].max),
+  };
+}
+
+// ─── Layout: assign x/y positions to each node ────────────────────────────────
+function getNodeLayout(n) {
+  const positions = {};
+  const nodeRanges = {};
+
+  function assign(node, start, end, depth, left, right) {
+    const x = (left + right) / 2;
+    const y = depth * 90 + 50;
+    positions[node] = { x, y };
+    nodeRanges[node] = { start, end };
+    if (start !== end) {
+      const mid = Math.floor((start + end) / 2);
+      assign(2 * node, start, mid, depth + 1, left, (left + right) / 2);
+      assign(2 * node + 1, mid + 1, end, depth + 1, (left + right) / 2, right);
+    }
+  }
+  assign(1, 0, n - 1, 0, 0, 800);
+  return { positions, nodeRanges };
+}
+
+// ─── Node Component ────────────────────────────────────────────────────────────
+function TreeNode({ x, y, tree, nodeId, highlightMap, queryMode }) {
+  const data = tree[nodeId];
+  if (!data) return null;
+
+  const hl = highlightMap[nodeId];
+  let fill = "#1e293b";
+  let stroke = "#334155";
+  let textCol = "#94a3b8";
+
+  if (hl === "in") { fill = "#16a34a"; stroke = "#22c55e"; textCol = "#fff"; }
+  else if (hl === "partial") { fill = "#b45309"; stroke = "#f59e0b"; textCol = "#fff"; }
+  else if (hl === "out") { fill = "#1e293b"; stroke = "#ef4444"; textCol = "#ef4444"; }
+  else if (hl === "update") { fill = "#1e40af"; stroke = "#3b82f6"; textCol = "#fff"; }
+
+  const val = queryMode === "sum" ? data.sum
+    : queryMode === "min" ? data.min
+    : data.max;
+
+  return (
+    <g>
+      <circle cx={x} cy={y} r={26} fill={fill} stroke={stroke} strokeWidth={2}
+        style={{ transition: "fill 0.3s, stroke 0.3s" }} />
+      <text x={x} y={y - 6} textAnchor="middle" fontSize={11}
+        fill={textCol} fontFamily="monospace" style={{ transition: "fill 0.3s" }}>
+        {val}
+      </text>
+      <text x={x} y={y + 8} textAnchor="middle" fontSize={9} fill="#64748b" fontFamily="monospace">
+        [{nodeId}]
+      </text>
+    </g>
+  );
+}
+
+// ─── Main Component ────────────────────────────────────────────────────────────
+export default function SegmentTreeVisualizer() {
+  const [inputVal, setInputVal] = useState("2, 4, 1, 7, 3, 6");
+  const [arr, setArr] = useState([2, 4, 1, 7, 3, 6]);
+  const [tree, setTree] = useState({});
+  const [positions, setPositions] = useState({});
+  const [nodeRanges, setNodeRanges] = useState({});
+  const [highlightMap, setHighlightMap] = useState({});
+  const [queryMode, setQueryMode] = useState("sum");
+  const [queryL, setQueryL] = useState(1);
+  const [queryR, setQueryR] = useState(4);
+  const [updateIdx, setUpdateIdx] = useState(2);
+  const [updateVal, setUpdateVal] = useState(9);
+  const [result, setResult] = useState(null);
+  const [resultLabel, setResultLabel] = useState("");
+  const [steps, setSteps] = useState([]);
+  const [currentStep, setCurrentStep] = useState(-1);
+  const [playing, setPlaying] = useState(false);
+  const [activeTab, setActiveTab] = useState("query"); // "query" | "update"
+  const [buildError, setBuildError] = useState("");
+  const [pendingUpdate, setPendingUpdate] = useState(null);
+  const intervalRef = useRef(null);
+
+  // Build tree from array
+  const handleBuild = useCallback(() => {
+    const parsed = inputVal.split(",").map((v) => parseInt(v.trim(), 10));
+    if (parsed.some(isNaN) || parsed.length < 1 || parsed.length > 10) {
+      setBuildError("Enter 1–10 comma-separated integers.");
+      return;
+    }
+    setBuildError("");
+    const newTree = {};
+    buildTree([...parsed], 1, 0, parsed.length - 1, newTree);
+    const { positions: pos, nodeRanges: nr } = getNodeLayout(parsed.length);
+    setArr([...parsed]);
+    setTree(newTree);
+    setPositions(pos);
+    setNodeRanges(nr);
+    setHighlightMap({});
+    setResult(null);
+    setSteps([]);
+    setCurrentStep(-1);
+    setPlaying(false);
+    setPendingUpdate(null);
+  }, [inputVal]);
+
+  useEffect(() => { handleBuild(); }, []); // eslint-disable-line
+
+  // Animate steps
+  useEffect(() => {
+    if (!playing) { clearInterval(intervalRef.current); return; }
+    intervalRef.current = setInterval(() => {
+      setCurrentStep((prev) => {
+        if (prev + 1 >= steps.length) { setPlaying(false); return prev; }
+        return prev + 1;
+      });
+    }, 600);
+    return () => clearInterval(intervalRef.current);
+  }, [playing, steps]);
+
+  // Sync highlight when step changes
+  useEffect(() => {
+    if (currentStep < 0 || steps.length === 0) return;
+    const map = {};
+    for (let i = 0; i <= currentStep; i++) {
+      const s = steps[i];
+      map[s.node] = s.type;
+    }
+    setHighlightMap(map);
+    // If we have a pending update, and we reached the last step (the leaf node)
+    if (currentStep === steps.length - 1 && pendingUpdate) {
+      setArr(pendingUpdate.arr);
+      setTree(pendingUpdate.tree);
+      setResultLabel(`arr[${pendingUpdate.idx}] updated to ${pendingUpdate.val}`);
+      setPendingUpdate(null);
+    }
+  }, [currentStep, steps, pendingUpdate]);
+
+  const runQuery = () => {
+    if (!Object.keys(tree).length) return;
+    const l = parseInt(queryL, 10);
+    const r = parseInt(queryR, 10);
+    if (isNaN(l) || isNaN(r) || l < 0 || r >= arr.length || l > r) return;
+
+    const visited = [];
+    queryTree(1, 0, arr.length - 1, l, r, tree, visited);
+    setSteps(visited);
+    setCurrentStep(-1);
+    setHighlightMap({});
+    setPlaying(false);
+
+    // Compute result
+    const sub = arr.slice(l, r + 1);
+    let res;
+    if (queryMode === "sum") res = sub.reduce((a, b) => a + b, 0);
+    else if (queryMode === "min") res = Math.min(...sub);
+    else res = Math.max(...sub);
+    setResult(res);
+    setResultLabel(`${queryMode.toUpperCase()}(${l}, ${r}) = ${res}`);
+  };
+
+  const runUpdate = () => {
+    if (!Object.keys(tree).length) return;
+    const idx = parseInt(updateIdx, 10);
+    const val = parseInt(updateVal, 10);
+    if (isNaN(idx) || isNaN(val) || idx < 0 || idx >= arr.length) return;
+
+    const newArr = [...arr];
+    const newTree = { ...tree };
+    const visited = [];
+    updateTree(newArr, 1, 0, newArr.length - 1, idx, val, newTree, visited);
+    setPendingUpdate({ arr: newArr, tree: newTree, val, idx });
+    setSteps(visited);
+    setCurrentStep(-1);
+    setHighlightMap({});
+    setResult(val);
+    setResultLabel(`arr[${idx}] updating to ${val}...`);
+    setPlaying(false);
+  };
+
+  const handlePlay = () => {
+    if (steps.length === 0) return;
+    if (currentStep >= steps.length - 1) setCurrentStep(-1);
+    setPlaying(true);
+  };
+
+  const handleStep = () => {
+    setPlaying(false);
+    setCurrentStep((p) => Math.min(p + 1, steps.length - 1));
+  };
+
+  const handlePause = () => setPlaying(false);
+  const handleReset = () => { setHighlightMap({}); setCurrentStep(-1); setPlaying(false); setPendingUpdate(null); };
+
+  // SVG edges
+  const edges = [];
+  Object.entries(positions).forEach(([id, { x, y }]) => {
+    const nodeId = parseInt(id);
+    const parentId = Math.floor(nodeId / 2);
+    if (parentId >= 1 && positions[parentId]) {
+      const { x: px, y: py } = positions[parentId];
+      edges.push(
+        <line key={`e${nodeId}`} x1={px} y1={py + 26} x2={x} y2={y - 26}
+          stroke="#334155" strokeWidth={1.5} />
+      );
+    }
+  });
+
+  const svgHeight = arr.length > 1 ? Math.ceil(Math.log2(arr.length) + 1) * 90 + 80 : 140;
+
+  return (
+    <div className="min-h-screen bg-slate-950 text-slate-100 font-sans">
+      {/* Header */}
+      <div className="border-b border-slate-800 px-6 py-5">
+        <h1 className="text-2xl font-bold tracking-tight text-white">
+          Segment Tree Visualizer
+        </h1>
+        <p className="text-sm text-slate-400 mt-1">
+          Build · Query · Update — O(N) build, O(log N) query & update
+        </p>
+      </div>
+
+      <div className="flex flex-col lg:flex-row gap-0 h-full">
+        {/* ── Left Panel ── */}
+        <div className="w-full lg:w-72 border-r border-slate-800 p-5 flex flex-col gap-5 shrink-0">
+
+          {/* Build */}
+          <section>
+            <h2 className="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-3">
+              1. Build Tree
+            </h2>
+            <label className="text-xs text-slate-400 mb-1 block">Array (1–10 integers)</label>
+            <input
+              className="w-full bg-slate-900 border border-slate-700 rounded-md px-3 py-2 text-sm text-white focus:outline-none focus:border-indigo-500 font-mono"
+              value={inputVal}
+              onChange={(e) => setInputVal(e.target.value)}
+              placeholder="e.g. 2, 4, 1, 7, 3, 6"
+            />
+            {buildError && <p className="text-xs text-red-400 mt-1">{buildError}</p>}
+            <button
+              onClick={handleBuild}
+              className="mt-2 w-full bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium py-2 rounded-md transition-colors"
+            >
+              Build
+            </button>
+          </section>
+
+          <hr className="border-slate-800" />
+
+          {/* Query Mode */}
+          <section>
+            <h2 className="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-3">
+              2. Query / Update
+            </h2>
+            <div className="flex rounded-md overflow-hidden border border-slate-700 mb-4">
+              {["query", "update"].map((tab) => (
+                <button key={tab}
+                  onClick={() => setActiveTab(tab)}
+                  className={`flex-1 text-xs py-2 font-medium transition-colors ${activeTab === tab ? "bg-slate-700 text-white" : "bg-slate-900 text-slate-400 hover:text-white"}`}>
+                  {tab === "query" ? "Range Query" : "Point Update"}
+                </button>
+              ))}
+            </div>
+
+            {activeTab === "query" ? (
+              <div className="flex flex-col gap-3">
+                <div className="flex gap-2">
+                  {["sum", "min", "max"].map((m) => (
+                    <button key={m}
+                      onClick={() => setQueryMode(m)}
+                      className={`flex-1 text-xs py-1.5 rounded-md border font-medium transition-colors ${queryMode === m ? "bg-emerald-600 border-emerald-500 text-white" : "border-slate-700 text-slate-400 hover:text-white bg-slate-900"}`}>
+                      {m.toUpperCase()}
+                    </button>
+                  ))}
+                </div>
+                <div className="flex gap-2">
+                  <div className="flex-1">
+                    <label className="text-xs text-slate-400 block mb-1">L (0-based)</label>
+                    <input type="number" min={0} max={arr.length - 1}
+                      value={queryL} onChange={(e) => setQueryL(e.target.value)}
+                      className="w-full bg-slate-900 border border-slate-700 rounded-md px-2 py-1.5 text-sm text-white focus:outline-none focus:border-indigo-500 font-mono" />
+                  </div>
+                  <div className="flex-1">
+                    <label className="text-xs text-slate-400 block mb-1">R (0-based)</label>
+                    <input type="number" min={0} max={arr.length - 1}
+                      value={queryR} onChange={(e) => setQueryR(e.target.value)}
+                      className="w-full bg-slate-900 border border-slate-700 rounded-md px-2 py-1.5 text-sm text-white focus:outline-none focus:border-indigo-500 font-mono" />
+                  </div>
+                </div>
+                <button onClick={runQuery}
+                  className="w-full bg-emerald-700 hover:bg-emerald-600 text-white text-sm font-medium py-2 rounded-md transition-colors">
+                  Run Query
+                </button>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-3">
+                <div className="flex gap-2">
+                  <div className="flex-1">
+                    <label className="text-xs text-slate-400 block mb-1">Index</label>
+                    <input type="number" min={0} max={arr.length - 1}
+                      value={updateIdx} onChange={(e) => setUpdateIdx(e.target.value)}
+                      className="w-full bg-slate-900 border border-slate-700 rounded-md px-2 py-1.5 text-sm text-white focus:outline-none focus:border-indigo-500 font-mono" />
+                  </div>
+                  <div className="flex-1">
+                    <label className="text-xs text-slate-400 block mb-1">New Value</label>
+                    <input type="number"
+                      value={updateVal} onChange={(e) => setUpdateVal(e.target.value)}
+                      className="w-full bg-slate-900 border border-slate-700 rounded-md px-2 py-1.5 text-sm text-white focus:outline-none focus:border-indigo-500 font-mono" />
+                  </div>
+                </div>
+                <button onClick={runUpdate}
+                  className="w-full bg-blue-700 hover:bg-blue-600 text-white text-sm font-medium py-2 rounded-md transition-colors">
+                  Run Update
+                </button>
+              </div>
+            )}
+          </section>
+
+          <hr className="border-slate-800" />
+
+          {/* Playback controls */}
+          <section>
+            <h2 className="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-3">
+              3. Animate Steps
+            </h2>
+            <div className="flex gap-2">
+              <button onClick={handlePlay} disabled={steps.length === 0}
+                className="flex-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-40 text-white text-xs py-2 rounded-md transition-colors font-medium">
+                ▶ Play
+              </button>
+              <button onClick={handlePause} disabled={!playing}
+                className="flex-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-40 text-white text-xs py-2 rounded-md transition-colors font-medium">
+                ⏸ Pause
+              </button>
+              <button onClick={handleStep} disabled={steps.length === 0 || currentStep >= steps.length - 1}
+                className="flex-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-40 text-white text-xs py-2 rounded-md transition-colors font-medium">
+                ⏭ Step
+              </button>
+            </div>
+            <button onClick={handleReset}
+              className="mt-2 w-full border border-slate-700 text-slate-400 hover:text-white text-xs py-2 rounded-md transition-colors">
+              Reset Highlight
+            </button>
+            {steps.length > 0 && (
+              <p className="text-xs text-slate-500 mt-2 text-center">
+                Step {Math.max(currentStep + 1, 0)} / {steps.length}
+              </p>
+            )}
+          </section>
+
+          <hr className="border-slate-800" />
+
+          {/* Result */}
+          {result !== null && (
+            <section className="bg-slate-900 border border-slate-700 rounded-lg p-3">
+              <p className="text-xs text-slate-400 mb-1">Result</p>
+              <p className="text-base font-mono font-bold text-white">{resultLabel}</p>
+            </section>
+          )}
+
+          {/* Legend */}
+          <section>
+            <h2 className="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-2">Legend</h2>
+            <div className="flex flex-col gap-1.5">
+              {[
+                { color: "#16a34a", label: "Fully in range" },
+                { color: "#b45309", label: "Partially in range" },
+                { color: "#ef4444", label: "Out of range" },
+                { color: "#1e40af", label: "Update path" },
+                { color: "#1e293b", label: "Unvisited" },
+              ].map(({ color, label }) => (
+                <div key={label} className="flex items-center gap-2">
+                  <span className="w-3 h-3 rounded-full inline-block border border-slate-600"
+                    style={{ backgroundColor: color }} />
+                  <span className="text-xs text-slate-400">{label}</span>
+                </div>
+              ))}
+            </div>
+          </section>
+        </div>
+
+        {/* ── Right Panel: SVG Tree ── */}
+        <div className="flex-1 overflow-auto p-4">
+          {/* Array display */}
+          <div className="mb-4">
+            <p className="text-xs text-slate-500 mb-2 uppercase tracking-widest">Input Array</p>
+            <div className="flex gap-1 flex-wrap">
+              {arr.map((v, i) => (
+                <div key={i} className="flex flex-col items-center">
+                  <div className="w-10 h-10 bg-slate-800 border border-slate-700 rounded-md flex items-center justify-center text-sm font-mono font-bold text-white">
+                    {v}
+                  </div>
+                  <span className="text-xs text-slate-500 mt-0.5">{i}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Tree SVG */}
+          {Object.keys(positions).length > 0 && (
+            <div className="overflow-x-auto">
+              <svg width={820} height={svgHeight} className="block">
+                {/* Edges */}
+                {edges}
+                {/* Nodes */}
+                {Object.entries(positions).map(([id, { x, y }]) => {
+                  const nodeId = parseInt(id);
+                  return (
+                    <g key={nodeId}>
+                      {/* Range label */}
+                      {nodeRanges[nodeId] && (
+                        <text x={x} y={y + 40} textAnchor="middle" fontSize={9}
+                          fill="#475569" fontFamily="monospace">
+                          [{nodeRanges[nodeId].start},{nodeRanges[nodeId].end}]
+                        </text>
+                      )}
+                      <TreeNode
+                        x={x} y={y}
+                        tree={tree}
+                        nodeId={nodeId}
+                        highlightMap={highlightMap}
+                        queryMode={queryMode}
+                      />
+                    </g>
+                  );
+                })}
+              </svg>
+            </div>
+          )}
+
+          {/* Complexity info */}
+          <div className="mt-6 grid grid-cols-3 gap-3 max-w-lg">
+            {[
+              { label: "Build", val: "O(N)" },
+              { label: "Query", val: "O(log N)" },
+              { label: "Update", val: "O(log N)" },
+            ].map(({ label, val }) => (
+              <div key={label} className="bg-slate-900 border border-slate-800 rounded-lg p-3 text-center">
+                <p className="text-xs text-slate-500">{label}</p>
+                <p className="text-sm font-mono font-bold text-indigo-400 mt-0.5">{val}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/visualizer/segment-tree/quiz/page.jsx b/src/app/visualizer/segment-tree/quiz/page.jsx
new file mode 100644
index 000000000..1d6079937
--- /dev/null
+++ b/src/app/visualizer/segment-tree/quiz/page.jsx
@@ -0,0 +1,10 @@
+import Quiz from "./quiz";
+
+export const metadata = {
+  title: "Segment Tree Quiz | AlgoBuddy",
+  description: "Test your understanding of Segment Trees, Range Queries, Point Updates, and Lazy Propagation.",
+};
+
+export default function Page() {
+  return <Quiz />;
+}
diff --git a/src/app/visualizer/segment-tree/quiz/quiz.jsx b/src/app/visualizer/segment-tree/quiz/quiz.jsx
new file mode 100644
index 000000000..3d7c50ee1
--- /dev/null
+++ b/src/app/visualizer/segment-tree/quiz/quiz.jsx
@@ -0,0 +1,210 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const SegmentTreeQuiz = () => {
+  const questions = [
+    {
+      question: "What is the primary purpose of a Segment Tree?",
+      options: [
+        "To compress data for efficient network transmission",
+        "To efficiently answer range queries and perform point/range updates over an array",
+        "To sort elements in O(N log N) time",
+        "To store hierarchical relationship data similar to a database"
+      ],
+      correctAnswer: 1,
+      explanation: "Segment Trees are primarily used for answering range queries (like sum, min, max in a specific interval) and updating elements or ranges efficiently."
+    },
+    {
+      question: "In a Segment Tree representing an array of size N, what does the root node represent?",
+      options: [
+        "The first element of the array",
+        "The largest element in the array",
+        "The entire range of the array [0, N-1]",
+        "The middle element of the array"
+      ],
+      correctAnswer: 2,
+      explanation: "The root node of a Segment Tree stores the aggregated value (like sum or minimum) for the entire array range from index 0 to N-1."
+    },
+    {
+      question: "How are the children of a node representing the range [L, R] determined in a Segment Tree?",
+      options: [
+        "The left child is [L, R-1] and the right child is [L+1, R]",
+        "The left child is [L, mid] and the right child is [mid+1, R], where mid = (L+R)/2",
+        "The children are randomly assigned based on hash values",
+        "The tree only has right children"
+      ],
+      correctAnswer: 1,
+      explanation: "A segment tree is a binary tree where a node representing [L, R] is split at the midpoint. Its left child represents [L, mid] and its right child represents [mid+1, R]."
+    },
+    {
+      question: "What is the height of a Segment Tree for an array of size N?",
+      options: [
+        "O(N)",
+        "O(N log N)",
+        "O(log N)",
+        "O(1)"
+      ],
+      correctAnswer: 2,
+      explanation: "Because the range is halved at each step down the tree, the height of a segment tree is bounded by O(log N)."
+    },
+    {
+      question: "What is the time complexity to build a Segment Tree from an array of size N?",
+      options: [
+        "O(log N)",
+        "O(N)",
+        "O(N log N)",
+        "O(N²)"
+      ],
+      correctAnswer: 1,
+      explanation: "Building the segment tree involves visiting each node exactly once to compute its value from its children, which takes O(N) time."
+    },
+    {
+      question: "What is the standard maximum size needed for the array to store a Segment Tree of an original array of size N?",
+      options: [
+        "N",
+        "2 * N",
+        "4 * N",
+        "N log N"
+      ],
+      correctAnswer: 2,
+      explanation: "To safely accommodate a segment tree in an array without out-of-bounds errors, the standard practice is to allocate an array of size 4 * N."
+    },
+    {
+      question: "What is the time complexity of querying the sum (or minimum) of a range [L, R] in a Segment Tree?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N log N)"
+      ],
+      correctAnswer: 1,
+      explanation: "A range query visits at most 4 nodes per level of the tree. Since the height is O(log N), the query time complexity is O(log N)."
+    },
+    {
+      question: "What is the time complexity of updating a single element (Point Update) in a Segment Tree?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N log N)"
+      ],
+      correctAnswer: 1,
+      explanation: "A point update traces a path from the root to a single leaf node and updates the values back up to the root. Since the height is O(log N), the update takes O(log N) time."
+    },
+    {
+      question: "When performing a Range Query for [L, R], in what scenario does a node representing range [start, end] completely contribute its value without recursive calls to its children?",
+      options: [
+        "When start == end",
+        "When the node's range [start, end] is completely inside the query range [L, R] (i.e., L <= start and end <= R)",
+        "When the node's range partially overlaps the query range",
+        "When the node's range is completely outside the query range"
+      ],
+      correctAnswer: 1,
+      explanation: "If the node's entire range is completely covered by the query range, we can just return the node's stored value immediately, which is the key to achieving O(log N) query time."
+    },
+    {
+      question: "What should a node return if its range [start, end] is completely outside the query range [L, R] in a Range Sum Query?",
+      options: [
+        "The maximum integer value",
+        "The minimum integer value",
+        "0 (zero)",
+        "-1"
+      ],
+      correctAnswer: 2,
+      explanation: "For a sum query, a range outside the query should return an identity value for addition, which is 0, so it doesn't affect the total sum."
+    },
+    {
+      question: "What should a node return if its range [start, end] is completely outside the query range [L, R] in a Range Minimum Query?",
+      options: [
+        "The maximum integer value (Infinity)",
+        "The minimum integer value (-Infinity)",
+        "0 (zero)",
+        "-1"
+      ],
+      correctAnswer: 0,
+      explanation: "For a minimum query, an out-of-bounds range should return Infinity (or max integer) so that the `min()` function ignores it."
+    },
+    {
+      question: "What technique is used in Segment Trees to perform efficient Range Updates (updating an entire interval [L, R] at once)?",
+      options: [
+        "Memoization",
+        "Lazy Propagation",
+        "Dynamic Programming",
+        "Hashing"
+      ],
+      correctAnswer: 1,
+      explanation: "Lazy Propagation is used to postpone updates to descendants of a node until those descendants are explicitly accessed, keeping range updates at O(log N)."
+    },
+    {
+      question: "How does Lazy Propagation achieve O(log N) for Range Updates?",
+      options: [
+        "By only updating the root node and ignoring the rest",
+        "By updating nodes only when their range is completely within the update interval, and marking them to update their children later",
+        "By using multiple threads to update the array in parallel",
+        "By changing the data structure to a Hash Map"
+      ],
+      correctAnswer: 1,
+      explanation: "When an update completely covers a node's range, we update the node and record the pending update for its children in a 'lazy' array, stopping the recursion."
+    },
+    {
+      question: "Which of the following is a common disadvantage of a Segment Tree compared to a Fenwick Tree (Binary Indexed Tree)?",
+      options: [
+        "Segment trees cannot handle range minimum queries",
+        "Segment trees are significantly slower theoretically",
+        "Segment trees require more memory (space) and have higher constant factor overhead",
+        "Segment trees only support point updates, not range queries"
+      ],
+      correctAnswer: 2,
+      explanation: "Segment Trees use more space (typically 4*N vs N for Fenwick Trees) and generally have a larger constant time factor due to recursive calls."
+    },
+    {
+      question: "Which of the following problems can be efficiently solved using a Segment Tree but NOT easily with a standard Fenwick Tree (Binary Indexed Tree)?",
+      options: [
+        "Range Sum Query with Point Updates",
+        "Range Minimum Query with Point Updates",
+        "Counting inversions in an array",
+        "Prefix Sum Queries"
+      ],
+      correctAnswer: 1,
+      explanation: "While a standard Fenwick Tree is great for cumulative/reversible operations (like sum or XOR), it cannot easily handle non-reversible operations like Minimum or Maximum for arbitrary ranges."
+    },
+    {
+      question: "If the index of a parent node in a 1-indexed array representation of a Segment Tree is `i`, what are the indices of its left and right children?",
+      options: [
+        "Left: i+1, Right: i+2",
+        "Left: 2*i, Right: 2*i + 1",
+        "Left: 2*i + 1, Right: 2*i + 2",
+        "Left: i-1, Right: i+1"
+      ],
+      correctAnswer: 1,
+      explanation: "In a 1-indexed array representing a binary tree, the left child is located at `2*i` and the right child at `2*i + 1`."
+    },
+    {
+      question: "What is the time complexity of a Range Update WITH Lazy Propagation?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N log N)"
+      ],
+      correctAnswer: 1,
+      explanation: "With Lazy Propagation, we do not update individual elements one by one; we update covering segments in O(log N) time, just like a range query."
+    },
+    {
+      question: "Without Lazy Propagation, what would be the worst-case time complexity of a Range Update?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N²)"
+      ],
+      correctAnswer: 2,
+      explanation: "Without lazy propagation, a range update would require updating every individual leaf node within the range, taking O(N) time in the worst case (if the range is [0, N-1])."
+    }
+  ];
+
+  return <QuizEngine title="Segment Tree Quiz" questions={questions} />;
+};
+
+export default SegmentTreeQuiz;
diff --git a/src/app/visualizer/smart-revision/page.jsx b/src/app/visualizer/smart-revision/page.jsx
new file mode 100644
index 000000000..95dcb6484
--- /dev/null
+++ b/src/app/visualizer/smart-revision/page.jsx
@@ -0,0 +1,23 @@
+import SmartRevisionFlashcards from "@/app/components/SmartRevisionFlashcards";
+
+export const metadata = {
+  title: "Smart Revision | AlgoBuddy",
+  description:
+    "Revise completed DSA topics and practice with flashcards to test your knowledge.",
+};
+
+export default function SmartRevisionPage() {
+  return (
+    <div className="min-h-screen p-8 bg-white dark:bg-[#1c1d1f] text-black dark:text-white">
+      <h1 className="text-4xl font-bold mb-4">
+        Smart Revision
+      </h1>
+
+      <p className="text-lg mb-6">
+        Revise your completed DSA topics using interactive flashcards.
+      </p>
+
+      <SmartRevisionFlashcards />
+    </div>
+  );
+}
diff --git a/src/app/visualizer/stack/implementation/quiz/ImplementationQuizClient.jsx b/src/app/visualizer/stack/implementation/quiz/ImplementationQuizClient.jsx
new file mode 100644
index 000000000..0f2eb5d2c
--- /dev/null
+++ b/src/app/visualizer/stack/implementation/quiz/ImplementationQuizClient.jsx
@@ -0,0 +1,89 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowLeft, Play } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function ImplementationQuizClient() {
+  const quizzes = [
+    {
+      title: "Stack Using Array Quiz",
+      description: "Practice stack implementation using arrays, index tracking, static sizes, and boundary limits.",
+      href: "/visualizer/stack/implementation/quiz/array",
+      filename: "stack_array_impl_quiz.js",
+    },
+    {
+      title: "Stack Using Linked List Quiz",
+      description: "Practice stack implementation using dynamic nodes, memory allocations, and pointer manipulations.",
+      href: "/visualizer/stack/implementation/quiz/linked-list",
+      filename: "stack_list_impl_quiz.js",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-[var(--udemy-text)] dark:text-white transition-colors duration-300 pb-20">
+      
+      {/* Header / Hero */}
+      <section className="relative pt-6 pb-4">
+        <div className="max-w-[1100px] mx-auto px-4">
+          <Link href="/visualizer/quiz">
+            <button className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] dark:text-[var(--color-primary-light)] hover:opacity-85 transition-opacity mb-3">
+              <ArrowLeft size={16} />
+              <span>Back to all quizzes</span>
+            </button>
+          </Link>
+          <h1 className="text-2xl md:text-3xl font-black mb-2">
+            Stack Implementation Quiz Portal
+          </h1>
+          <p className="text-[14px] text-surface-600 dark:text-surface-400 font-medium">
+            Choose a quiz to test your conceptual understanding of structural stack representations.
+          </p>
+        </div>
+      </section>
+
+      {/* Grid of Sub-quizzes */}
+      <div className="max-w-4xl mx-auto px-4 mt-8">
+        <div className="grid md:grid-cols-2 gap-6 items-stretch">
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4, delay: index * 0.1, ease: [0.22, 1, 0.36, 1] }}
+              whileHover={{ y: -6, scale: 1.015 }}
+              whileTap={{ scale: 0.985 }}
+              className="group flex flex-col h-full rounded-2xl border border-emerald-500/20 dark:border-emerald-500/30 bg-white dark:bg-[#1a1a1a] overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
+            >
+              {/* Terminal command execution style top bar */}
+              <div className="flex items-center justify-between px-4 py-2.5 bg-emerald-500/10 dark:bg-emerald-500/20 border-b border-emerald-500/20 dark:border-emerald-500/30">
+                <div className="flex items-center gap-1.5 font-mono text-[11px] text-surface-600 dark:text-surface-300">
+                  <span className="text-violet-500 font-bold">$</span>
+                  <span>node {quiz.filename}</span>
+                </div>
+              </div>
+
+              {/* Main Card Content */}
+              <div className="p-6 flex-1 flex flex-col justify-between">
+                <div>
+                  <h2 className="text-[20px] font-extrabold text-surface-900 dark:text-white group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors mb-2">
+                    {quiz.title}
+                  </h2>
+                  <p className="text-[14px] text-surface-600 dark:text-surface-300 leading-relaxed mb-6">
+                    {quiz.description}
+                  </p>
+                </div>
+
+                <Link href={quiz.href} className="block mt-auto w-full">
+                  <button className="w-full h-11 rounded-xl bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white font-bold text-[14px] flex items-center justify-center gap-2 shadow-sm hover:shadow-md transition-all">
+                    <span>Start Quiz</span>
+                    <Play size={14} className="fill-current" />
+                  </button>
+                </Link>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/stack/implementation/quiz/array/page.jsx b/src/app/visualizer/stack/implementation/quiz/array/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/stack/implementation/quiz/array/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/stack/implementation/quiz/array/quiz.jsx b/src/app/visualizer/stack/implementation/quiz/array/quiz.jsx
new file mode 100644
index 000000000..4c9f1fd39
--- /dev/null
+++ b/src/app/visualizer/stack/implementation/quiz/array/quiz.jsx
@@ -0,0 +1,93 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const StackUsingArrayQuiz = () => {
+  const questions = [
+    {
+      question: "Which data structure is used to implement a stack using an array?",
+      options: ["Queue", "Array", "Linked List", "Tree"],
+      correctAnswer: 1,
+      explanation: "A stack can be implemented using an array where elements are stored sequentially."
+    },
+    {
+      question: "Which variable keeps track of the top element in an array-based stack?",
+      options: ["front", "rear", "top", "head"],
+      correctAnswer: 2,
+      explanation: "The 'top' index points to the current top element."
+    },
+    {
+      question: "What is the time complexity of Push in an array-based stack?",
+      options: ["O(1)", "O(log N)", "O(N)", "O(N²)"],
+      correctAnswer: 0,
+      explanation: "Push is performed in constant time."
+    },
+    {
+      question: "What happens if Push is performed when the stack is full?",
+      options: ["Underflow", "Overflow", "Nothing", "Stack resets"],
+      correctAnswer: 1,
+      explanation: "Trying to insert into a full stack causes overflow."
+    },
+    {
+      question: "What is the time complexity of Pop?",
+      options: ["O(1)", "O(N)", "O(log N)", "O(N²)"],
+      correctAnswer: 0,
+      explanation: "Removing the top element takes constant time."
+    },
+    {
+  question: "Which operation returns the top element without removing it?",
+  options: ["Push", "Peek", "Pop", "Display"],
+  correctAnswer: 1,
+  explanation: "Peek returns the top element without modifying the stack."
+},
+{
+  question: "What is the initial value of the 'top' index in an empty array-based stack?",
+  options: ["0", "1", "-1", "NULL"],
+  correctAnswer: 2,
+  explanation: "The top index is initialized to -1 to indicate an empty stack."
+},
+{
+  question: "What condition indicates that the stack is full?",
+  options: [
+    "top == -1",
+    "top == size - 1",
+    "top == size",
+    "top == 0"
+  ],
+  correctAnswer: 1,
+  explanation: "When top reaches size - 1, no more elements can be inserted."
+},
+{
+  question: "Which of the following is a limitation of implementing a stack using an array?",
+  options: [
+    "Slow push operation",
+    "Fixed size",
+    "Cannot perform pop",
+    "Requires recursion"
+  ],
+  correctAnswer: 1,
+  explanation: "Array-based stacks have a fixed capacity unless dynamically resized."
+},
+{
+  question: "Which Stack principle is followed by an array implementation?",
+  options: [
+    "FIFO",
+    "LIFO",
+    "Priority",
+    "Round Robin"
+  ],
+  correctAnswer: 1,
+  explanation: "A stack always follows the Last In, First Out (LIFO) principle."
+},
+  ];
+
+  return (
+    <QuizEngine
+      title="Stack Using Array Quiz"
+      questions={questions}
+    />
+  );
+};
+
+export default StackUsingArrayQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/stack/implementation/quiz/linked-list/page.jsx b/src/app/visualizer/stack/implementation/quiz/linked-list/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/stack/implementation/quiz/linked-list/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/stack/implementation/quiz/linked-list/quiz.jsx b/src/app/visualizer/stack/implementation/quiz/linked-list/quiz.jsx
new file mode 100644
index 000000000..d197e6ef2
--- /dev/null
+++ b/src/app/visualizer/stack/implementation/quiz/linked-list/quiz.jsx
@@ -0,0 +1,103 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const StackUsingLinkedListQuiz = () => {
+  const questions = [
+    {
+      question: "Which pointer represents the top of a linked-list stack?",
+      options: ["head", "tail", "rear", "front"],
+      correctAnswer: 0,
+      explanation: "The head node acts as the top of the stack."
+    },
+    {
+      question: "What is the time complexity of Push in a linked-list stack?",
+      options: ["O(1)", "O(N)", "O(log N)", "O(N²)"],
+      correctAnswer: 0,
+      explanation: "Insertion at the head is constant time."
+    },
+    {
+      question: "Which memory allocation is used in a linked-list stack?",
+      options: ["Static", "Dynamic", "Fixed", "Sequential"],
+      correctAnswer: 1,
+      explanation: "Nodes are created dynamically."
+    },
+    {
+      question: "What error occurs when Pop is performed on an empty stack?",
+      options: ["Overflow", "Segmentation", "Underflow", "Timeout"],
+      correctAnswer: 2,
+      explanation: "Removing from an empty stack causes underflow."
+    },
+    {
+      question: "What is one advantage of a linked-list stack over an array stack?",
+      options: [
+        "Requires fixed memory",
+        "Dynamic size",
+        "Slower Push",
+        "Needs contiguous memory"
+      ],
+      correctAnswer: 1,
+      explanation: "Linked-list stacks grow dynamically as needed."
+    },
+    {
+  question: "Which operation inserts a new node at the beginning of the linked list stack?",
+  options: ["Push", "Pop", "Peek", "Search"],
+  correctAnswer: 0,
+  explanation: "Push inserts a new node at the head of the linked list."
+},
+{
+  question: "Why does a linked-list stack not suffer from overflow until memory is exhausted?",
+  options: [
+    "Because it uses recursion",
+    "Because it grows dynamically",
+    "Because it uses arrays",
+    "Because it stores fewer elements"
+  ],
+  correctAnswer: 1,
+  explanation: "Nodes are allocated dynamically, allowing the stack to grow as long as memory is available."
+},
+{
+  question: "Which pointer is updated after a Push operation in a linked-list stack?",
+  options: [
+    "rear",
+    "front",
+    "head (top)",
+    "tail"
+  ],
+  correctAnswer: 2,
+  explanation: "The head pointer is updated to point to the newly inserted node."
+},
+{
+  question: "What is removed during a Pop operation in a linked-list stack?",
+  options: [
+    "Last node",
+    "Middle node",
+    "Head node",
+    "Tail node"
+  ],
+  correctAnswer: 2,
+  explanation: "The top (head) node is removed from the linked-list stack."
+},
+{
+  question: "Compared to an array implementation, a linked-list stack mainly provides:",
+  options: [
+    "Lower memory usage in all cases",
+    "Dynamic memory allocation",
+    "Faster searching",
+    "Automatic sorting"
+  ],
+  correctAnswer: 1,
+  explanation: "Linked lists allow dynamic memory allocation, avoiding the fixed-size limitation of arrays."
+},
+  ];
+
+  return (
+    <QuizEngine
+      title="Stack Using Linked List Quiz"
+      questions={questions}
+    />
+  );
+};
+
+export default StackUsingLinkedListQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/stack/implementation/quiz/page.jsx b/src/app/visualizer/stack/implementation/quiz/page.jsx
new file mode 100644
index 000000000..c35c60dd5
--- /dev/null
+++ b/src/app/visualizer/stack/implementation/quiz/page.jsx
@@ -0,0 +1,5 @@
+import ImplementationQuizClient from "./ImplementationQuizClient";
+
+export default function Page() {
+  return <ImplementationQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/stack/implementation/usingArray/AlgorithmClient.jsx b/src/app/visualizer/stack/implementation/usingArray/AlgorithmClient.jsx
new file mode 100644
index 000000000..4f27a3a36
--- /dev/null
+++ b/src/app/visualizer/stack/implementation/usingArray/AlgorithmClient.jsx
@@ -0,0 +1,27 @@
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/stack/implementation/usingArray/content";
+import Code from "@/app/visualizer/stack/implementation/usingArray/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Stack", "Implementation Using Array")}
+      title="Implementation Using Array"
+      headerActions={<ArticleActions />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other implementation"
+          links={[{ text: "Using Linked List", url: "./usingLinkedList" }]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/stack/implementation/usingArray/codeBlock.jsx b/src/app/visualizer/stack/implementation/usingArray/codeBlock.jsx
new file mode 100644
index 000000000..6bfc436fa
--- /dev/null
+++ b/src/app/visualizer/stack/implementation/usingArray/codeBlock.jsx
@@ -0,0 +1,242 @@
+'use client';
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+// ─── All code examples for Stack using Array ───────────────────────────
+const codeExamples = {
+  javascript: `// Stack Implementation using Array (JavaScript)
+class Stack{
+    constructor(size=10){
+        this.items=new Array(size);
+        this.top=-1;
+        this.capacity=size;
+    }
+    push(element){
+        if(this.isFull()){
+            console.log("Stack Overflow");
+            return;
+        }
+        this.items[++this.top]=element;
+    }
+    pop(){
+        if(this.isEmpty()){
+            console.log("Stack Underflow");
+            return;
+        }
+        return this.items[this.top--];
+    }
+    peek(){
+        if(this.isEmpty()){
+            console.log("Stack is empty");
+            return;
+        }
+        return this.items[this.top];
+    }
+    isEmpty(){
+        return this.top===-1;
+    }
+    isFull(){
+        return this.top===this.capacity-1;
+    }
+    size(){
+        return this.top+1;
+    }
+}
+// Usage
+const stack=new Stack(5);
+stack.push(10);
+stack.push(20);
+stack.push(30);
+console.log("Top:",stack.peek());
+console.log("Size:",stack.size());
+stack.pop();
+console.log("After pop:",stack.peek());`,
+  python: `# Stack Implementation using Array
+class Stack:
+    def __init__(self,size=10):
+        self.items=[None]*size
+        self.top=-1
+        self.capacity=size
+    def push(self,element):
+        if self.is_full():
+            print("Stack Overflow")
+            return
+        self.top+=1
+        self.items[self.top]=element
+    def pop(self):
+        if self.is_empty():
+            print("Stack Underflow")
+            return
+        item=self.items[self.top]
+        self.top-=1
+        return item
+    def peek(self):
+        if self.is_empty():
+            print("Stack is empty")
+            return
+        return self.items[self.top]
+    def is_empty(self):
+        return self.top==-1
+    def is_full(self):
+        return self.top==self.capacity-1
+    def size(self):
+        return self.top+1
+stack=Stack(5)
+stack.push(10)
+stack.push(20)
+stack.push(30)
+print("Top:",stack.peek())
+print("Size:",stack.size())
+stack.pop()
+print("After pop:",stack.peek())`,
+  java: `// Stack Implementation using Array
+public class ArrayStack{
+    int[] items;
+    int top;
+    int capacity;
+    public ArrayStack(int size){
+        items=new int[size];
+        top=-1;
+        capacity=size;
+    }
+    public void push(int element){
+        if(isFull()){
+            System.out.println("Stack Overflow");
+            return;
+        }
+        items[++top]=element;
+    }
+    public int pop(){
+        if(isEmpty()){
+            System.out.println("Stack Underflow");
+            return -1;
+        }
+        return items[top--];
+    }
+    public int peek(){
+        if(isEmpty()){
+            return -1;
+        }
+        return items[top];
+    }
+    public boolean isEmpty(){
+        return top==-1;
+    }
+    public boolean isFull(){
+        return top==capacity-1;
+    }
+    public int size(){
+        return top+1;
+    }
+    public static void main(String[] args){
+        ArrayStack stack=new ArrayStack(5);
+        stack.push(10);
+        stack.push(20);
+        stack.push(30);
+        System.out.println("Top: "+stack.peek());
+        System.out.println("Size: "+stack.size());
+        stack.pop();
+        System.out.println("After pop: "+stack.peek());
+    }
+}`,
+  c: `// Stack Implementation using Array
+#include<stdio.h>
+#include<stdlib.h>
+typedef struct{
+    int* items;
+    int top;
+    int capacity;
+}Stack;
+void initialize(Stack* s,int size){
+    s->items=(int*)malloc(size*sizeof(int));
+    s->top=-1;
+    s->capacity=size;
+}
+void push(Stack* s,int element){
+    if(s->top==s->capacity-1){
+        printf("Stack Overflow\\n");
+        return;
+    }
+    s->items[++s->top]=element;
+}
+int pop(Stack* s){
+    if(s->top==-1){
+        printf("Stack Underflow\\n");
+        return -1;
+    }
+    return s->items[s->top--];
+}
+int peek(Stack* s){
+    return s->items[s->top];
+}
+int main(){
+    Stack stack;
+    initialize(&stack,5);
+    push(&stack,10);
+    push(&stack,20);
+    push(&stack,30);
+    printf("Top:%d\\n",peek(&stack));
+    pop(&stack);
+    printf("After pop:%d",peek(&stack));
+    return 0;
+}`,
+  cpp: `// Stack Implementation using Array
+#include<iostream>
+using namespace std;
+class Stack{
+private:
+    int* items;
+    int top;
+    int capacity;
+public:
+    Stack(int size=10){
+        items=new int[size];
+        top=-1;
+        capacity=size;
+    }
+    void push(int element){
+        if(top==capacity-1){
+            cout<<"Stack Overflow"<<endl;
+            return;
+        }
+        items[++top]=element;
+    }
+    int pop(){
+        if(top==-1){
+            cout<<"Stack Underflow"<<endl;
+            return -1;
+        }
+        return items[top--];
+    }
+    int peek(){
+        return items[top];
+    }
+    int size(){
+        return top+1;
+    }
+};
+int main(){
+    Stack stack(5);
+    stack.push(10);
+    stack.push(20);
+    stack.push(30);
+    cout<<"Top: "<<stack.peek()<<endl;
+    stack.pop();
+    cout<<"After pop: "<<stack.peek();
+}`
+};
+// ─── Filenames ──────────────────────────────────
+const fileNames = {
+    javascript:'stack.js',
+    python:'stack.py',
+    java:'ArrayStack.java',
+    c:'stack.c',
+    cpp:'stack.cpp'
+};
+// ─── Component ──────────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/stack/implementation/usingArray/content.jsx b/src/app/visualizer/stack/implementation/usingArray/content.jsx
new file mode 100644
index 000000000..a3d3b87b4
--- /dev/null
+++ b/src/app/visualizer/stack/implementation/usingArray/content.jsx
@@ -0,0 +1,216 @@
+"use client";
+import React from "react";
+import { motion } from "framer-motion";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const push = [
+    { points: "Check if stack is full" },
+    { points: 'If full, return "Stack Overflow"' },
+    { points: "Increment top pointer" },
+    { points: "Store element at array[top]" },
+  ];
+
+  const pop = [
+    { points: "Check if stack is empty" },
+    { points: 'If empty, return "Stack Underflow"' },
+    { points: "Access element at array[top]" },
+    { points: "Decrement top pointer" },
+    { points: "Return the element" },
+  ];
+
+  const peek = [
+    { points: "Check if stack is empty" },
+    { points: "If empty, return null" },
+    { points: "Return array[top] without removal" },
+  ];
+
+  const isEmpty = [
+    { points: "Return true if top pointer is -1" },
+    { points: "Return false otherwise" },
+  ];
+
+  const initialize = [
+    { points: "Create an empty array to store elements" },
+    { points: "Initialize top pointer/index to -1" },
+    { points: "Optional: Set maximum size limit" },
+  ];
+
+  const isFull = [
+    { points: "Return true if top equals (max_size - 1)" },
+    { points: "Return false otherwise" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+
+      <article className="max-w-4xl bg-white dark:bg-neutral-950 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+        {/* -------  HEADER  ------- */}
+        <section className="p-8 border-b border-gray-100 dark:border-gray-800">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
+            <span className="w-1.5 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Stack Implementation Using Array
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+              A stack is a linear data structure that follows the LIFO (Last In First Out) principle. Arrays provide a simple and memory-efficient way to implement stack operations with constant time complexity.
+            </p>
+          </div>
+        </section>
+
+        {/* -------  ALGORITHMIC STEPS – LIFT CARDS  ------- */}
+        <section className="p-8 border-b border-gray-100 dark:border-gray-800">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-6 flex items-center">
+            <span className="w-1.5 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Algorithmic Steps
+          </h1>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            {/* Basic Operations */}
+            <div className="rounded-xl p-6 bg-gray-50 dark:bg-gray-900/50 border border-gray-100 dark:border-gray-800">
+              <h2 className="text-xl mb-6 font-bold text-center text-gray-800 dark:text-gray-200">Stack Basic Operations</h2>
+              <div className="space-y-6">
+                {[{t:"Initialize Stack", s:initialize}, {t:"push()", s:push}, {t:"pop()", s:pop}].map(
+                  ({t, s}, idx) => (
+                    <motion.div
+                      key={t}
+                      initial={{ y: 40, opacity: 0 }}
+                      whileInView={{ y: 0, opacity: 1 }}
+                      viewport={{ once: true, amount: 0.3 }}
+                      transition={{ type: "spring", stiffness: 120, delay: idx * 0.1 }}
+                      whileHover={{ y: -4, boxShadow: "0 10px 20px -5px rgba(0,0,0,0.1)" }}
+                      className="p-4 rounded-lg bg-gray-50 dark:bg-neutral-900
+                                 border border-transparent hover:border-[#c27cf7]
+                                 dark:hover:border-primary transition"
+                    >
+                      <span className="inline-block mb-2 px-2 py-0.5 rounded-full text-xs font-semibold bg-indigo-100 dark:bg-blue-900 text-primary-dark dark:text-indigo-200">
+                        Step {idx + 1}
+                      </span>
+                      <h3 className="font-semibold mb-2">{t}</h3>
+                      <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                        {s.map((p, i) => (
+                          <li key={i} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                            {p.points}
+                          </li>
+                        ))}
+                      </ol>
+                    </motion.div>
+                  )
+                )}
+              </div>
+            </div>
+
+            {/* Helper Operations */}
+            <div className="rounded-lg p-4 bg-white dark:bg-neutral-950 shadow-md">
+              <h2 className="text-lg sm:text-xl mb-3 font-bold text-center">Stack Helper Operations</h2>
+              <div className="space-y-4">
+                {[{t:"peek()", s:peek}, {t:"isEmpty()", s:isEmpty}, {t:"isFull()", s:isFull}].map(
+                  ({t, s}, idx) => (
+                    <motion.div
+                      key={t}
+                      initial={{ y: 40, opacity: 0 }}
+                      whileInView={{ y: 0, opacity: 1 }}
+                      viewport={{ once: true, amount: 0.3 }}
+                      transition={{ type: "spring", stiffness: 120, delay: idx * 0.1 }}
+                      whileHover={{ y: -4, boxShadow: "0 10px 20px -5px rgba(0,0,0,0.1)" }}
+                      className="p-4 rounded-lg bg-gray-50 dark:bg-neutral-900
+                                 border border-transparent hover:border-[#c27cf7]
+                                 dark:hover:border-primary transition"
+                    >
+                      <span className="inline-block mb-2 px-2 py-0.5 rounded-full text-xs font-semibold bg-indigo-100 dark:bg-blue-900 text-primary-dark dark:text-indigo-200">
+                        Step {idx + 1}
+                      </span>
+                      <h3 className="font-semibold mb-2">{t}</h3>
+                      <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                        {s.map((p, i) => (
+                          <li key={i} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                            {p.points}
+                          </li>
+                        ))}
+                      </ol>
+                    </motion.div>
+                  )
+                )}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none overflow-x-auto">
+            <table className="min-w-full border-collapse border border-primary/80">
+              <thead>
+                <tr className="bg-blue-100 dark:bg-blue-900">
+                  <th className="border border-primary/80 p-3 font-semibold">Operation</th>
+                  <th className="border border-primary/80 p-3 font-semibold">Complexity</th>
+                  <th className="border border-primary/80 p-3 font-semibold hidden sm:table-cell">Reason</th>
+                </tr>
+              </thead>
+              <tbody>
+                {[
+                  ["push()", "O(1)", "Single array access"],
+                  ["pop()", "O(1)", "Single array access"],
+                  ["peek()", "O(1)", "Single array access"],
+                  ["isEmpty()", "O(1)", "Pointer comparison"],
+                ].map(([op, comp, reason], index) => (
+                  <tr key={op} className={index % 2 === 0 ? "bg-white dark:bg-neutral-950" : "bg-blue-50 dark:bg-neutral-900"}>
+                    <td className="border border-primary/80 p-3">{op}</td>
+                    <td className="border border-primary/80 p-3 font-mono">{comp}</td>
+                    <td className="border border-primary/80 p-3 hidden sm:table-cell">{reason}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Key Characteristics
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {[
+                "LIFO Principle: Last element added is first removed",
+                "Dynamic Size: Can grow until memory limits",
+                "Efficiency: All operations work in constant time",
+                "Versatility: Foundation for many algorithms",
+              ].map((item) => (
+                <li key={item} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/stack/implementation/usingLinkedList/AlgorithmClient.jsx b/src/app/visualizer/stack/implementation/usingLinkedList/AlgorithmClient.jsx
new file mode 100644
index 000000000..58ba76b26
--- /dev/null
+++ b/src/app/visualizer/stack/implementation/usingLinkedList/AlgorithmClient.jsx
@@ -0,0 +1,27 @@
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/stack/implementation/usingLinkedList/content";
+import Code from "@/app/visualizer/stack/implementation/usingLinkedList/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Stack", "Implementation Using Linked List")}
+      title="Implementation Using Linked List"
+      headerActions={<ArticleActions />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other implementation"
+          links={[{ text: "Using Array", url: "./usingArray" }]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/stack/implementation/usingLinkedList/codeBlock.jsx b/src/app/visualizer/stack/implementation/usingLinkedList/codeBlock.jsx
new file mode 100644
index 000000000..f01e64357
--- /dev/null
+++ b/src/app/visualizer/stack/implementation/usingLinkedList/codeBlock.jsx
@@ -0,0 +1,262 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for Stack using Linked List ─────────────────────
+const codeExamples = {
+  javascript: `// Stack using Linked List in JavaScript
+class Node{
+    constructor(value){
+        this.value=value;
+        this.next=null;
+    }
+}
+class LinkedListStack{
+    constructor(){
+        this.top=null;
+        this.size=0;
+    }
+    push(value){
+        const newNode=new Node(value);
+        newNode.next=this.top;
+        this.top=newNode;
+        this.size++;
+    }
+    pop(){
+        if(this.isEmpty()){
+            console.log("Stack Underflow");
+            return;
+        }
+        const value=this.top.value;
+        this.top=this.top.next;
+        this.size--;
+        return value;
+    }
+    peek(){
+        if(this.isEmpty()){
+            return null;
+        }
+        return this.top.value;
+    }
+    isEmpty(){
+        return this.size===0;
+    }
+    getSize(){
+        return this.size;
+    }
+}
+// Usage
+const stack=new LinkedListStack();
+stack.push(10);
+stack.push(20);
+stack.push(30);
+console.log("Top:",stack.peek());
+stack.pop();
+console.log("After pop:",stack.peek());`,
+
+  python: `# Stack using Linked List in Python
+class Node:
+    def __init__(self,value):
+        self.value=value
+        self.next=None
+
+class LinkedListStack:
+    def __init__(self):
+        self.top=None
+        self.size=0
+    def push(self,value):
+        new_node=Node(value)
+        new_node.next=self.top
+        self.top=new_node
+        self.size+=1
+    def pop(self):
+        if self.is_empty():
+            print("Stack Underflow")
+            return
+        value=self.top.value
+        self.top=self.top.next
+        self.size-=1
+        return value
+    def peek(self):
+        if self.is_empty():
+            return None
+        return self.top.value
+    def is_empty(self):
+        return self.size==0
+    def get_size(self):
+        return self.size
+
+stack=LinkedListStack()
+stack.push(10)
+stack.push(20)
+stack.push(30)
+print("Top:",stack.peek())
+stack.pop()
+print("After pop:",stack.peek())`,
+
+  java: `// Stack using Linked List in Java
+class Node{
+    int value;
+    Node next;
+    Node(int value){
+        this.value=value;
+        next=null;
+    }
+}
+public class LinkedListStack{
+    Node top;
+    int size;
+    public LinkedListStack(){
+        top=null;
+        size=0;
+    }
+    public void push(int value){
+        Node newNode=new Node(value);
+        newNode.next=top;
+        top=newNode;
+        size++;
+    }
+    public int pop(){
+        if(isEmpty()){
+            System.out.println("Stack Underflow");
+            return -1;
+        }
+        int value=top.value;
+        top=top.next;
+        size--;
+        return value;
+    }
+    public int peek(){
+        return top.value;
+    }
+    public boolean isEmpty(){
+        return size==0;
+    }
+    public static void main(String[] args){
+        LinkedListStack stack=new LinkedListStack();
+        stack.push(10);
+        stack.push(20);
+        stack.push(30);
+        System.out.println("Top:"+stack.peek());
+        stack.pop();
+        System.out.println("After pop:"+stack.peek());
+    }
+}`,
+
+  c: `// Stack using Linked List in C
+#include<stdio.h>
+#include<stdlib.h>
+typedef struct Node{
+    int value;
+    struct Node* next;
+}Node;
+typedef struct{
+    Node* top;
+    int size;
+}Stack;
+void push(Stack* s,int value){
+    Node* newNode=(Node*)malloc(sizeof(Node));
+    newNode->value=value;
+    newNode->next=s->top;
+    s->top=newNode;
+    s->size++;
+}
+int pop(Stack* s){
+    if(s->size==0){
+        printf("Stack Underflow\\n");
+        return -1;
+    }
+    Node* temp=s->top;
+    int value=temp->value;
+    s->top=s->top->next;
+    free(temp);
+    s->size--;
+    return value;
+}
+int peek(Stack* s){
+    return s->top->value;
+}
+int main(){
+    Stack stack={NULL,0};
+    push(&stack,10);
+    push(&stack,20);
+    push(&stack,30);
+    printf("Top:%d\\n",peek(&stack));
+    pop(&stack);
+    printf("After pop:%d",peek(&stack));
+    return 0;
+}`,
+
+  cpp: `// Stack using Linked List in C++
+#include<iostream>
+using namespace std;
+class Node{
+public:
+    int value;
+    Node* next;
+    Node(int value){
+        this->value=value;
+        next=nullptr;
+    }
+};
+class LinkedListStack{
+private:
+    Node* top;
+    int size;
+public:
+    LinkedListStack(){
+        top=nullptr;
+        size=0;
+    }
+    void push(int value){
+        Node* newNode=new Node(value);
+        newNode->next=top;
+        top=newNode;
+        size++;
+    }
+    int pop(){
+        if(size==0){
+            cout<<"Stack Underflow";
+            return -1;
+        }
+        Node* temp=top;
+        int value=temp->value;
+        top=top->next;
+        delete temp;
+        size--;
+        return value;
+    }
+    int peek(){
+        return top->value;
+    }
+};
+int main(){
+    LinkedListStack stack;
+    stack.push(10);
+    stack.push(20);
+    stack.push(30);
+    cout<<"Top:"<<stack.peek()<<endl;
+    stack.pop();
+    cout<<"After pop:"<<stack.peek();
+}`
+};
+
+// ─── Filenames ───────────────────────────────
+const fileNames = {
+    javascript:'linkedListStack.js',
+    python:'linked_list_stack.py',
+    java:'LinkedListStack.java',
+    c:'linked_list_stack.c',
+    cpp:'linked_list_stack.cpp'
+};
+
+// ─── Component ───────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/stack/implementation/usingLinkedList/content.jsx b/src/app/visualizer/stack/implementation/usingLinkedList/content.jsx
new file mode 100644
index 000000000..22e86b3c2
--- /dev/null
+++ b/src/app/visualizer/stack/implementation/usingLinkedList/content.jsx
@@ -0,0 +1,266 @@
+"use client";
+import React from "react";
+import { motion } from "framer-motion";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraph = [
+    `A stack implemented using a linked list follows the LIFO (Last In First Out) principle. Unlike array implementation, linked list stacks dynamically allocate memory for each element and don't have size limitations (until memory is exhausted).`,
+  ];
+
+  const opeartions = [
+    { points : "Initialize Stack",
+      subpoints : [
+        "Create a head pointer initialized to null.",
+        "Optional: Maintain a size counter initialized to 0.",
+      ],
+     },
+    { points : "push()",
+      subpoints : [
+        "Create a new node with the given data.",
+        "Set new node's next pointer to current head.",
+        "Update head to point to the new node.",
+        "Increment size counter (if maintained).",
+      ],
+     },
+    { points : "pop()",
+      subpoints : [
+        "Check if stack is empty (head is null).",
+        `If empty, return "Stack Underflow".`,
+        "Store current head node in a temporary variabl.",
+        "Update head to point to the next node.",
+        "Decrement size counter (if maintained).",
+        "Return data from the temporary node.",
+      ],
+     },
+  ];
+
+  const helper = [
+    { points : "peek()",
+      subpoints : [
+        "Check if stack is empty (head is null).",
+        "If empty, return null.",
+        "Return data from head node without removal.",
+      ],
+     },
+    { points : "isEmpty()",
+      subpoints : [
+        "Return true if head is null.",
+        "Return false otherwise.",
+      ],
+     },
+    { points : "size()",
+      subpoints : [
+        "If size counter is maintained, return its value.",
+        "Otherwise, traverse the list and count nodes.",
+      ],
+     },
+  ];
+
+    return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-neutral-950 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+        {/* Header Section */}
+        <section className="p-8 border-b border-gray-100 dark:border-gray-800">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-6 flex items-center">
+            <span className="w-1.5 h-6 bg-[#a435f0] mr-4 rounded-full"></span>
+            Stack Implementation Using Linked List
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-600 dark:text-gray-400 leading-relaxed text-lg">
+              {paragraph[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* Algorithmic Steps */}
+        <section className="p-8">
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-8 flex items-center">
+            <span className="w-1.5 h-6 bg-[#a435f0] mr-4 rounded-full"></span>
+            Algorithmic Steps
+          </h2>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            {/* Core Operations */}
+            <div className="rounded-xl p-6 bg-gray-50 dark:bg-gray-900/50 border border-gray-100 dark:border-gray-800">
+              <h3 className="text-xl mb-6 font-bold text-gray-800 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700 pb-2">Core Operations</h3>
+              <div className="space-y-6">
+                {opeartions.map((item, index) => (
+                  <motion.div
+                    key={index}
+                    initial={{ y: 20, opacity: 0 }}
+                    whileInView={{ y: 0, opacity: 1 }}
+                    viewport={{ once: true, amount: 0.1 }}
+                    transition={{ delay: index * 0.1 }}
+                    className="group"
+                  >
+                    <h4 className="font-bold text-[#a435f0] mb-3 flex items-center gap-2">
+                       <span className="w-2 h-2 rounded-full bg-[#a435f0]"></span>
+                       {item.points}
+                    </h4>
+                    {item.subpoints && (
+                      <ul className="space-y-2 ml-4">
+                        {item.subpoints.map((subitem, subindex) => (
+                          <li key={subindex} className="text-gray-600 dark:text-gray-400 text-sm flex items-start gap-2">
+                            <span className="mt-1.5 w-1 h-1 rounded-full bg-gray-400 dark:bg-gray-600 flex-shrink-0"></span>
+                            {subitem}
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                  </motion.div>
+                ))}
+              </div>
+            </div>
+
+            {/* Utility Operations */}
+            <div className="rounded-xl p-6 bg-gray-50 dark:bg-gray-900/50 border border-gray-100 dark:border-gray-800">
+              <h3 className="text-xl mb-6 font-bold text-gray-800 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700 pb-2">Utility Functions</h3>
+              <div className="space-y-6">
+                {helper.map((item, index) => (
+                  <motion.div
+                    key={index}
+                    initial={{ y: 20, opacity: 0 }}
+                    whileInView={{ y: 0, opacity: 1 }}
+                    viewport={{ once: true, amount: 0.1 }}
+                    transition={{ delay: index * 0.1 }}
+                    className="group"
+                  >
+                    <h4 className="font-bold text-[#a435f0] mb-3 flex items-center gap-2">
+                       <span className="w-2 h-2 rounded-full bg-[#a435f0]"></span>
+                       {item.points}
+                    </h4>
+                    {item.subpoints && (
+                      <ul className="space-y-2 ml-4">
+                        {item.subpoints.map((subitem, subindex) => (
+                          <li key={subindex} className="text-gray-600 dark:text-gray-400 text-sm flex items-start gap-2">
+                            <span className="mt-1.5 w-1 h-1 rounded-full bg-gray-400 dark:bg-gray-600 flex-shrink-0"></span>
+                            {subitem}
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                  </motion.div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Complexity Analysis */}
+        <section className="p-8 bg-gray-50/50 dark:bg-gray-900/30 border-t border-gray-100 dark:border-gray-800">
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6 flex items-center">
+            <span className="w-1.5 h-6 bg-[#a435f0] mr-4 rounded-full"></span>
+            Efficiency Analysis
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="p-5 rounded-xl bg-white dark:bg-neutral-900 border border-gray-200 dark:border-gray-800 shadow-sm">
+              <h3 className="font-bold text-gray-800 dark:text-gray-200 mb-3">Time Complexity</h3>
+              <ul className="space-y-2 text-sm">
+                <li className="flex justify-between">
+                  <span className="text-gray-600 dark:text-gray-400">Push/Pop/Peek:</span>
+                  <code className="text-[#a435f0] font-bold">O(1)</code>
+                </li>
+                <li className="flex justify-between">
+                  <span className="text-gray-600 dark:text-gray-400">Search:</span>
+                  <code className="text-[#a435f0] font-bold">O(n)</code>
+                </li>
+              </ul>
+            </div>
+            <div className="p-5 rounded-xl bg-white dark:bg-neutral-900 border border-gray-200 dark:border-gray-800 shadow-sm">
+              <h3 className="font-bold text-gray-800 dark:text-gray-200 mb-3">Space Complexity</h3>
+              <ul className="space-y-2 text-sm">
+                <li className="flex justify-between">
+                  <span className="text-gray-600 dark:text-gray-400">Overall Space:</span>
+                  <code className="text-[#a435f0] font-bold">O(n)</code>
+                </li>
+                <li className="flex justify-between">
+                  <span className="text-gray-600 dark:text-gray-400">Memory overhead:</span>
+                  <p className="text-xs text-right text-gray-500">(1 pointer per node)</p>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        {/* Key Characteristics */}
+        <section className="p-8 border-t border-gray-100 dark:border-gray-800">
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-8 flex items-center">
+            <span className="w-1.5 h-6 bg-[#a435f0] mr-4 rounded-full"></span>
+            Key Characteristics
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {[
+              "Dynamic Size: No fixed capacity (grows as needed)",
+              "Memory Efficiency: Uses only needed memory",
+              "No Wasted Space: Unlike array implementation",
+              "Extra Memory: Requires space for pointers",
+              "Flexibility: Can grow until memory exhausted",
+            ].map((text, i) => (
+              <div key={i} className="flex items-center gap-3 p-4 rounded-xl bg-gray-50 dark:bg-gray-900/50 border border-gray-100 dark:border-gray-800">
+                <div className="w-2 h-2 rounded-full bg-[#a435f0]"></div>
+                <span className="text-gray-600 dark:text-gray-400 font-medium">{text}</span>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Comparison Section */}
+        <section className="p-8 bg-gray-50/50 dark:bg-gray-900/30 border-t border-gray-100 dark:border-gray-800">
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6 flex items-center">
+            <span className="w-1.5 h-6 bg-[#a435f0] mr-4 rounded-full"></span>
+            Implementation Comparison
+          </h2>
+          <div className="prose dark:prose-invert max-w-none overflow-x-auto">
+            <table className="min-w-full border-collapse">
+              <thead>
+                <tr className="bg-gray-100 dark:bg-gray-800">
+                  <th className="border border-gray-200 dark:border-gray-700 p-4 text-left font-semibold">Feature</th>
+                  <th className="border border-gray-200 dark:border-gray-700 p-4 text-left font-semibold">Linked List</th>
+                  <th className="border border-gray-200 dark:border-gray-700 p-4 text-left font-semibold">Array</th>
+                </tr>
+              </thead>
+              <tbody>
+                {[
+                  ["Memory Usage", "Extra for pointers", "Fixed size, may be wasted"],
+                  ["Dynamic Size", "Yes", "No (unless resized)"],
+                  ["Memory Allocation", "Dynamic", "Static (usually)"],
+                  ["Access Time", "O(1) for top", "O(1) for all"],
+                  ["Complexity", "Slightly higher", "Very Simple"],
+                ].map(([feature, ll, arr], index) => (
+                  <tr key={feature} className="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors">
+                    <td className="p-4 text-gray-700 dark:text-gray-300 font-medium">{feature}</td>
+                    <td className="p-4 text-gray-600 dark:text-gray-400">{ll}</td>
+                    <td className="p-4 text-gray-600 dark:text-gray-400">{arr}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/stack/isempty/AlgorithmClient.jsx b/src/app/visualizer/stack/isempty/AlgorithmClient.jsx
new file mode 100644
index 000000000..25ba9b454
--- /dev/null
+++ b/src/app/visualizer/stack/isempty/AlgorithmClient.jsx
@@ -0,0 +1,33 @@
+import Animation from "@/app/visualizer/stack/isempty/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/stack/isempty/content";
+import Code from "@/app/visualizer/stack/isempty/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Stack", "Is Empty")}
+      title="IsEmpty Operation"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[
+            { text: "Push & Pop", url: "/visualizer/stack/push-pop" },
+            { text: "Peek", url: "/visualizer/stack/peek" },
+            { text: "Is Full", url: "/visualizer/stack/isfull" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/stack/isempty/animation.jsx b/src/app/visualizer/stack/isempty/animation.jsx
new file mode 100644
index 000000000..c1f4af787
--- /dev/null
+++ b/src/app/visualizer/stack/isempty/animation.jsx
@@ -0,0 +1,377 @@
+"use client";
+
+import React, { useState, useMemo, useEffect } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { pushGenerator, popGenerator, checkEmptyGenerator } from "@/features/algorithms/stack/stackIsEmptyLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import ResetButton from "@/app/components/ui/resetButton";
+
+const StackVisualizer = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [capacityInput, setCapacityInput] = useState("");
+  const [capacity, setCapacity] = useState(null);
+  const [stack, setStack] = useState([]);
+  const [pendingOp, setPendingOp] = useState(null); // { type: 'push', value: string } | { type: 'pop' } | { type: 'isempty' }
+  const [isEmptyStatus, setIsEmptyStatus] = useState(null);
+
+  const frames = useMemo(() => {
+    if (!pendingOp) return [];
+    if (pendingOp.type === "push") {
+      return Array.from(pushGenerator(stack, pendingOp.value, capacity));
+    } else if (pendingOp.type === "pop") {
+      return Array.from(popGenerator(stack));
+    } else if (pendingOp.type === "isempty") {
+      return Array.from(checkEmptyGenerator(stack));
+    }
+    return [];
+  }, [stack, pendingOp, capacity]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 800 });
+
+  const push = () => {
+    if (!inputValue || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: "push", value: inputValue });
+    setIsEmptyStatus(null);
+    engine.reset();
+    engine.play();
+  };
+
+  const pop = () => {
+    if (stack.length === 0 || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: "pop" });
+    setIsEmptyStatus(null);
+    engine.reset();
+    engine.play();
+  };
+
+  const checkEmpty = () => {
+    if (engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: "isempty" });
+    setIsEmptyStatus(null);
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setInputValue("");
+    setStack([]);
+    setPendingOp(null);
+    setCapacity(null);
+    setCapacityInput("");
+    setIsEmptyStatus(null);
+    engine.reset();
+  };
+
+  const handleSetCapacity = () => {
+    const size = parseInt(capacityInput, 10);
+    if (isNaN(size) || size < 1 || size > 10) {
+      alert("Please enter a valid capacity between 1 and 10.");
+      return;
+    }
+    setCapacity(size);
+    setCapacityInput("");
+  };
+
+  useVisualizerReset(handleReset);
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.type === "complete") {
+        if (pendingOp?.type === "push" || pendingOp?.type === "pop") {
+          setStack(finalFrame.stack);
+        } else if (pendingOp?.type === "isempty") {
+          setIsEmptyStatus(finalFrame.isEmpty);
+        }
+      }
+      setPendingOp(null);
+      engine.reset();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useEffect(() => {
+    if (
+      engine.currentStep === frames.length - 1 &&
+      frames.length > 0 &&
+      !engine.isPlaying
+    ) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.type === "complete") {
+        if (pendingOp?.type === "push" || pendingOp?.type === "pop") {
+          setStack(finalFrame.stack);
+        } else if (pendingOp?.type === "isempty") {
+          setIsEmptyStatus(finalFrame.isEmpty);
+        }
+        setPendingOp(null);
+        if (pendingOp?.type === "push") setInputValue("");
+        engine.reset();
+      } else if (finalFrame && finalFrame.type === "error") {
+        setPendingOp(null);
+        engine.reset();
+      }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine, pendingOp]);
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame =
+    frames.length > 0 && engine.currentStep >= 0
+      ? frames[engine.currentStep]
+      : {
+          type: "idle",
+          stack: stack,
+          message: capacity === null ? "Please set a valid stack capacity first." : "Ready for operations!",
+        };
+
+  const displayStack = currentFrame.stack || stack;
+
+  const slots = [];
+  if (capacity !== null) {
+    for (let i = capacity - 1; i >= 0; i--) {
+      const isFilled = i < displayStack.length;
+      const itemValue = isFilled ? displayStack[displayStack.length - 1 - i] : null;
+      slots.push({ index: i, isFilled, value: itemValue });
+    }
+  }
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize Push, Pop, Peek, and IsEmpty operations
+      </p>
+
+      <VisualizerCard className="mb-0">
+        {capacity === null ? (
+          <div className="flex flex-col gap-4">
+            <div className="flex gap-4">
+              <input
+                type="number"
+                min="1"
+                max="10"
+                value={capacityInput}
+                onChange={(e) => setCapacityInput(e.target.value)}
+                className="flex-1 rounded-lg border p-3 dark:bg-gray-700"
+                placeholder="Enter capacity (1-10)..."
+                onKeyDown={(e) => e.key === "Enter" && handleSetCapacity()}
+              />
+              <button
+                onClick={handleSetCapacity}
+                className="rounded-lg bg-primary px-6 py-3 text-white transition hover:bg-primary-dark"
+              >
+                Set Capacity
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-4">
+            <div className="flex gap-4">
+              <input
+                type="text"
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                className="flex-1 rounded-lg border p-3 dark:bg-gray-700"
+                placeholder="Enter value"
+                disabled={engine.isPlaying || pendingOp !== null || displayStack.length >= capacity}
+                onKeyDown={(e) => e.key === "Enter" && push()}
+              />
+              <button
+                onClick={push}
+                disabled={engine.isPlaying || !inputValue || pendingOp !== null || displayStack.length >= capacity}
+                className={`w-32 rounded-lg px-6 py-3 text-white transition ${
+                  engine.isPlaying || !inputValue || pendingOp !== null || displayStack.length >= capacity
+                    ? "bg-gray-400 cursor-not-allowed"
+                    : "bg-primary hover:bg-primary-dark"
+                }`}
+              >
+                {engine.isPlaying && pendingOp?.type === "push" ? "Pushing..." : "Push"}
+              </button>
+            </div>
+            <div className="flex gap-4">
+              <button
+                onClick={checkEmpty}
+                disabled={engine.isPlaying || pendingOp !== null}
+                className="flex-1 rounded-lg border border-[#a435f0] text-[#a435f0] px-6 py-3 transition hover:bg-[#a435f0] hover:text-white disabled:opacity-50 dark:hover:bg-[#a435f0] dark:hover:text-white"
+              >
+                {engine.isPlaying && pendingOp?.type === "isempty" ? "Checking..." : "IsEmpty"}
+              </button>
+              <button
+                onClick={pop}
+                disabled={engine.isPlaying || displayStack.length === 0 || pendingOp !== null}
+                className="flex-1 rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 disabled:opacity-50 dark:border-white dark:text-white dark:hover:bg-gray-700"
+              >
+                {engine.isPlaying && pendingOp?.type === "pop" ? "Popping..." : "Pop"}
+              </button>
+              <ResetButton onReset={handleReset} isAnimating={engine.isPlaying && pendingOp === null} />
+            </div>
+          </div>
+        )}
+
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => {
+                engine.reset();
+              }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center min-h-[60px] flex flex-col items-center justify-center">
+        <p className={`font-medium ${currentFrame.type === 'error' ? 'text-red-500' : 'text-gray-800 dark:text-gray-200'}`}>
+          {currentFrame.message || currentFrame.operation}
+        </p>
+        {isEmptyStatus !== null && !engine.isPlaying && (
+          <div className={`mt-2 font-bold text-lg ${isEmptyStatus ? 'text-rose-500' : 'text-emerald-500'}`}>
+            Result: {isEmptyStatus ? 'True (Empty)' : 'False (Not Empty)'}
+          </div>
+        )}
+      </div>
+
+      <VisualizerCard>
+        {capacity === null ? (
+          <div className="flex flex-col items-center justify-center min-h-[300px] border border-dashed border-slate-700/50 rounded-2xl p-8 bg-slate-900/5">
+            <span className="text-sm font-semibold text-slate-500 text-center">
+              Define stack capacity above to initialize the stack structure
+            </span>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center min-h-[300px]">
+            <div className="mb-6 text-center text-sm font-semibold text-slate-500">
+              Stack Status:{" "}
+              <span
+                className={
+                  displayStack.length >= capacity
+                    ? "text-rose-500 font-bold"
+                    : "text-[#a435f0] font-bold"
+                }
+              >
+                {displayStack.length === 0
+                  ? "Empty"
+                  : displayStack.length >= capacity
+                  ? "Full"
+                  : "Active"}
+              </span>
+              {" | "}Capacity:{" "}
+              <span className="text-slate-300 font-bold">{displayStack.length}</span>/
+              <span className="text-slate-400 font-bold">{capacity}</span>
+            </div>
+
+            <div className="w-full max-w-md space-y-1.5 relative">
+              {/* If pushing, animate the new element coming down */}
+              {currentFrame.type === "start" && pendingOp?.type === "push" && (
+                <div className="absolute left-0 right-0 -top-16 flex items-center justify-center gap-4 animate-bounce">
+                  <div className="w-16"></div>
+                  <div className="w-48 text-center text-xs font-bold text-[#a435f0]/80">
+                    Inserting...
+                  </div>
+                  <div className="w-20"></div>
+                </div>
+              )}
+              {/* If popping, animate the popped element going up */}
+              {currentFrame.type === "start" && pendingOp?.type === "pop" && (
+                <div className="absolute left-0 right-0 -top-16 flex items-center justify-center gap-4 opacity-50 scale-110 -translate-y-4 transition-all duration-500">
+                   <div className="w-16"></div>
+                   <div className="w-48 text-center text-xs font-bold text-rose-500">
+                    Removing...
+                  </div>
+                  <div className="w-20"></div>
+                </div>
+              )}
+
+              <div className={`transition-all duration-500 rounded-xl ${pendingOp?.type === 'isempty' && currentFrame.type === 'start' ? 'ring-4 ring-[#a435f0] shadow-2xl scale-105' : ''}`}>
+              {slots.map((slot) => {
+                const isTop = slot.index === displayStack.length - 1;
+                
+                // Animation states based on engine
+                let itemClass = "bg-slate-800/40 border-slate-700 text-slate-300";
+                
+                if (isTop) {
+                   if (currentFrame.type === 'start' && pendingOp?.type === 'pop') {
+                       itemClass = "bg-rose-500/20 border-rose-500 text-rose-300 scale-105 shadow-rose-500/20 shadow-lg";
+                   } else if (currentFrame.type === 'complete' && pendingOp?.type === 'push') {
+                       itemClass = "bg-[#a435f0] border-[#a435f0] text-white scale-110 shadow-[#a435f0]/30 shadow-xl";
+                   } else {
+                       itemClass = "bg-[#a435f0]/10 border-[#a435f0] text-slate-100 shadow-[#a435f0]/10 shadow-md";
+                   }
+                }
+
+                return (
+                  <div key={slot.index} className="flex items-center gap-4 justify-center">
+                    <div className="w-16 text-right text-xs font-bold text-slate-400 dark:text-slate-500">
+                      Index [{slot.index}]
+                    </div>
+
+                    <div className="w-48 relative">
+                      {slot.isFilled ? (
+                        <div
+                          className={`p-3 border-2 rounded-xl text-center font-medium transition-all duration-300 ${itemClass}`}
+                        >
+                          <div>{slot.value}</div>
+                        </div>
+                      ) : (
+                        <div className="p-3 border border-dashed border-slate-700/50 rounded-xl text-center text-slate-600 font-medium bg-slate-900/10 dark:bg-slate-950/20 transition-all duration-300">
+                          <div className="text-xs uppercase tracking-wider text-slate-600/80">
+                            Empty
+                          </div>
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="w-20 text-left">
+                      {isTop ? (
+                        <span className="text-xs font-extrabold text-[#a435f0] flex items-center gap-1 animate-pulse transition-all duration-300">
+                          ← top
+                        </span>
+                      ) : (
+                        <span className="text-xs text-transparent">top</span>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+
+              {displayStack.length === 0 && (
+                <div className="flex items-center gap-4 justify-center pt-2">
+                  <div className="w-16"></div>
+                  <div className="w-48 text-center text-xs font-bold text-[#a435f0]/80">
+                    top = -1 (Empty)
+                  </div>
+                  <div className="w-20"></div>
+                </div>
+              )}
+              </div>
+            </div>
+          </div>
+        )}
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default StackVisualizer;
diff --git a/src/app/visualizer/stack/isempty/codeBlock.jsx b/src/app/visualizer/stack/isempty/codeBlock.jsx
new file mode 100644
index 000000000..667a58264
--- /dev/null
+++ b/src/app/visualizer/stack/isempty/codeBlock.jsx
@@ -0,0 +1,202 @@
+'use client';
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+// ─── All code examples for Stack Push / Pop with isEmpty ────────────────
+const codeExamples = {
+  javascript: `// Stack with Push, Pop and isEmpty (JavaScript)
+class Stack{
+    constructor(){
+        this.items=[];
+        this.top=-1;
+    }
+    push(element){
+        this.items[++this.top]=element;
+        console.log("Pushed:",element);
+    }
+    pop(){
+        if(this.isEmpty()){
+            console.log("Stack Underflow");
+            return -1;
+        }
+        return this.items[this.top--];
+    }
+    isEmpty(){
+        return this.top===-1;
+    }
+    display(){
+        console.log(this.items.slice(0,this.top+1));
+    }
+}
+// Usage
+const stack=new Stack();
+stack.isEmpty();
+stack.push(10);
+stack.push(20);
+stack.display();
+stack.pop();
+stack.display();`,
+  python: `# Stack with Push, Pop and isEmpty
+class Stack:
+    def __init__(self):
+        self.items=[]
+        self.top=-1
+    def push(self,element):
+        self.top+=1
+        self.items.append(element)
+        print("Pushed:",element)
+    def pop(self):
+        if self.is_empty():
+            print("Stack Underflow")
+            return -1
+        self.top-=1
+        return self.items.pop()
+    def is_empty(self):
+        return self.top==-1
+    def display(self):
+        print(self.items)
+stack=Stack()
+stack.is_empty()
+stack.push(10)
+stack.push(20)
+stack.display()
+stack.pop()
+stack.display()`,
+  java: `// Stack with Push, Pop and isEmpty
+import java.util.ArrayList;
+class Stack{
+    ArrayList<Integer> items;
+    int top;
+    Stack(){
+        items=new ArrayList<>();
+        top=-1;
+    }
+    void push(int element){
+        items.add(element);
+        top++;
+        System.out.println("Pushed:"+element);
+    }
+    int pop(){
+        if(isEmpty()){
+            System.out.println("Stack Underflow");
+            return -1;
+        }
+        top--;
+        return items.remove(top+1);
+    }
+    boolean isEmpty(){
+        return top==-1;
+    }
+    void display(){
+        System.out.println(items);
+    }
+    public static void main(String args[]){
+        Stack stack=new Stack();
+        stack.isEmpty();
+        stack.push(10);
+        stack.push(20);
+        stack.display();
+        stack.pop();
+        stack.display();
+    }
+}`,
+  c: `// Stack with Push, Pop and isEmpty
+#include<stdio.h>
+#define MAX 100
+typedef struct{
+    int items[MAX];
+    int top;
+}Stack;
+void initialize(Stack* s){
+    s->top=-1;
+}
+void push(Stack* s,int element){
+    s->items[++s->top]=element;
+    printf("Pushed:%d\\n",element);
+}
+int pop(Stack* s){
+    if(s->top==-1){
+        printf("Stack Underflow\\n");
+        return -1;
+    }
+    return s->items[s->top--];
+}
+int isEmpty(Stack* s){
+    return s->top==-1;
+}
+void display(Stack* s){
+    for(int i=0;i<=s->top;i++){
+        printf("%d ",s->items[i]);
+    }
+}
+int main(){
+    Stack stack;
+    initialize(&stack);
+    push(&stack,10);
+    push(&stack,20);
+    display(&stack);
+    pop(&stack);
+    display(&stack);
+    return 0;
+}`,
+  cpp: `// Stack with Push, Pop and isEmpty
+#include<iostream>
+#include<vector>
+using namespace std;
+class Stack{
+private:
+    vector<int> items;
+    int top;
+public:
+    Stack(){
+        top=-1;
+    }
+    void push(int element){
+        items.push_back(element);
+        top++;
+        cout<<"Pushed:"<<element<<endl;
+    }
+    int pop(){
+        if(isEmpty()){
+            cout<<"Stack Underflow";
+            return -1;
+        }
+        int element=items.back();
+        items.pop_back();
+        top--;
+        return element;
+    }
+    bool isEmpty(){
+        return top==-1;
+    }
+    void display(){
+        for(int item:items){
+            cout<<item<<" ";
+        }
+    }
+};
+int main(){
+    Stack stack;
+    stack.push(10);
+    stack.push(20);
+    stack.display();
+    stack.pop();
+    stack.display();
+    return 0;
+}`
+};
+// ─── Filenames ───────────────────────────────────────
+const fileNames = {
+    javascript:'stackPushPop.js',
+    python:'stack_push_pop.py',
+    java:'Stack.java',
+    c:'stack_push_pop.c',
+    cpp:'stack_push_pop.cpp'
+};
+// ─── Component ───────────────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/stack/isempty/content.jsx b/src/app/visualizer/stack/isempty/content.jsx
new file mode 100644
index 000000000..a7f78c5a7
--- /dev/null
+++ b/src/app/visualizer/stack/isempty/content.jsx
@@ -0,0 +1,202 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState('light');
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraphs = [
+    `The isEmpty operation checks whether a stack contains any elements or not. It's a fundamental operation that helps prevent errors when trying to perform operations like pop() or peek() on an empty stack.`,
+    `The isEmpty operation is a simple but crucial part of stack implementation, ensuring safe stack manipulation and preventing runtime errors.`,
+  ];
+
+  const usage = [
+    { points : "Prevent stack underflow errors before pop() operations." },
+    { points : "Check if there are elements to process." },
+    { points : "Validate stack state in algorithms." },
+    { points : "Terminate processing loops when stack becomes empty." },
+  ];
+
+  const working = [
+    { points : "For an empty stack [ ],isEmpty() returns true." },
+    { points : "For a non-empty stack [5, 3, 8],isEmpty() returns false." },
+  ];
+
+  const implementation = [
+    { points : "Check the current size/length of the stack" },
+    { points : "Return the result :",
+      subpoints : [
+        "true if size equals 0.",
+        "false otherwise.",
+      ],
+     },
+  ];
+
+  const complexity = [
+    { points : "O(1) constant time complexity." },
+    { points : "The operation only needs to check one value (size/length) regardless of stack size." },
+  ];
+
+    return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+          {/* What is the isEmpty Operation in Stack? */}
+          <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+            <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+              <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+              What is the isEmpty Operation in Stack?
+            </h1>
+            <div className="prose dark:prose-invert max-w-none">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraphs[0]}
+              </p>
+            </div>
+          </section>
+
+          {/* How Does It Work? */}
+          <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+            <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+              <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+              How Does It Work?
+            </h1>
+            <div className="prose dark:prose-invert max-w-none">
+              <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+                Consider a stack represented as an array: [ ] (empty) or [5, 3,
+                8] (with elements).
+              </p>
+
+              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                {working.map((item, index) => (
+                  <li
+                    key={index}
+                    className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                  >
+                    {item.points}
+                  </li>
+                ))}
+              </ol>
+
+              <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+                The operation simply checks if the stack&apos;s size/length is zero.
+              </p>
+            </div>
+          </section>
+
+          {/* Algorithm Implementation */}
+          <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+            <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+              <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+              Algorithm Implementation
+            </h1>
+            <div className="prose dark:prose-invert max-w-none">
+              <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                {implementation.map((item, index) => (
+                  <li
+                    key={index}
+                    className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                  >
+                    {item.points}
+                    {item.subpoints && (
+                      <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                        {item.subpoints.map((subitem, subindex) => (
+                          <li
+                            key={subindex}
+                            className="text-[#6b7280] dark:text-[#9ca3af]"
+                          >
+                            {subitem}
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                  </li>
+                ))}
+              </ol>
+            </div>
+          </section>
+
+          {/* Time Complexity */}
+          <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+            <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+              <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+              Time Complexity
+            </h1>
+            <div className="prose dark:prose-invert max-w-none">
+              <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                {complexity.map((item, index) => (
+                  <li
+                    key={index}
+                    className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                  >
+                    <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                      {item.points.split(":")[0]}:
+                    </span>
+                    <span className="ml-2">{item.points.split(":")[1]}</span>
+                  </li>
+                ))}
+              </ul>
+
+              <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => 1}
+                averageCase={(n) => 1}
+                worstCase={(n) => 1}
+                maxN={25}
+              />
+            </div>
+            </div>
+          </section>
+
+          {/* Practical Usage */}
+          <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+            <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+              <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+              Practical Usage
+            </h1>
+            <div className="prose dark:prose-invert max-w-none">
+              <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                {usage.map((item, index) => (
+                  <li
+                    key={index}
+                    className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                  >
+                    {item.points}
+                  </li>
+                ))}
+              </ol>
+            </div>
+          </section>
+
+          {/* Additional Info */}
+          <section className="p-6">
+            <div className="prose dark:prose-invert max-w-none">
+              <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+                <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                  {paragraphs[1]}
+                </p>
+              </div>
+            </div>
+          </section>
+        </article>
+</main>
+    );
+  };
+  
+  export default Content;
diff --git a/src/app/visualizer/stack/isempty/quiz.jsx b/src/app/visualizer/stack/isempty/quiz.jsx
new file mode 100644
index 000000000..68294fd9f
--- /dev/null
+++ b/src/app/visualizer/stack/isempty/quiz.jsx
@@ -0,0 +1,62 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const StackQuiz = () => {
+  const questions = [
+    {
+      question: "What does the isEmpty operation in a stack determine?",
+      options: [
+        "The total capacity of the stack",
+        "Whether the stack contains any elements",
+        "The position of the top element",
+        "The time complexity of other operations"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "isEmpty checks if the stack has zero elements (true if empty, false otherwise).",
+    },
+    {
+      question: "What does isEmpty() return for a stack with elements [10, 20]?",
+      options: ["true", "false", "null", "10"],
+      correctAnswer: 1,
+      explanation:
+        "The stack contains elements, so isEmpty returns false.",
+    },
+    {
+      question: "Why is isEmpty crucial before calling pop() or peek()?",
+      options: [
+        "To improve time complexity",
+        "To prevent stack underflow errors",
+        "To resize the stack",
+        "To count the elements"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Checking isEmpty first avoids errors when attempting to pop/peek an empty stack.",
+    },
+    {
+      question: "What is the time complexity of isEmpty?",
+      options: ["O(n)", "O(1)", "O(log n)", "O(n²)"],
+      correctAnswer: 1,
+      explanation:
+        "isEmpty runs in O(1) time as it only checks if size/length equals zero.",
+    },
+    {
+      question: "How would you implement isEmpty for a stack stored in an array?",
+      options: [
+        "Check if array[0] === null",
+        "Return array.length === 0",
+        "Compare top and bottom indices",
+        "Count all non-zero elements"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "For array-based stacks, isEmpty simply verifies if the length is zero.",
+    }
+  ];
+
+  return <QuizEngine title="Stack Quiz Challenge" questions={questions} />;
+};
+
+export default StackQuiz;
diff --git a/src/app/visualizer/stack/isfull/AlgorithmClient.jsx b/src/app/visualizer/stack/isfull/AlgorithmClient.jsx
new file mode 100644
index 000000000..e97cf99cb
--- /dev/null
+++ b/src/app/visualizer/stack/isfull/AlgorithmClient.jsx
@@ -0,0 +1,33 @@
+import Animation from "@/app/visualizer/stack/isfull/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/stack/isfull/content";
+import Code from "@/app/visualizer/stack/isfull/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Stack", "Is Full")}
+      title="IsFull Operation"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[
+            { text: "Peek", url: "/visualizer/stack/peek" },
+            { text: "Is Empty", url: "/visualizer/stack/isempty" },
+            { text: "Push Pop", url: "/visualizer/stack/push-pop" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/stack/isfull/animation.jsx b/src/app/visualizer/stack/isfull/animation.jsx
new file mode 100644
index 000000000..29e033e01
--- /dev/null
+++ b/src/app/visualizer/stack/isfull/animation.jsx
@@ -0,0 +1,377 @@
+"use client";
+
+import React, { useState, useMemo, useEffect } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { pushGenerator, popGenerator, checkFullGenerator } from "@/features/algorithms/stack/stackIsFullLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import ResetButton from "@/app/components/ui/resetButton";
+
+const StackVisualizer = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [capacityInput, setCapacityInput] = useState("");
+  const [capacity, setCapacity] = useState(null);
+  const [stack, setStack] = useState([]);
+  const [pendingOp, setPendingOp] = useState(null); // { type: 'push', value: string } | { type: 'pop' } | { type: 'isfull' }
+  const [isFullStatus, setIsFullStatus] = useState(null);
+
+  const frames = useMemo(() => {
+    if (!pendingOp) return [];
+    if (pendingOp.type === "push") {
+      return Array.from(pushGenerator(stack, pendingOp.value, capacity));
+    } else if (pendingOp.type === "pop") {
+      return Array.from(popGenerator(stack));
+    } else if (pendingOp.type === "isfull") {
+      return Array.from(checkFullGenerator(stack, capacity));
+    }
+    return [];
+  }, [stack, pendingOp, capacity]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 800 });
+
+  const push = () => {
+    if (!inputValue || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: "push", value: inputValue });
+    setIsFullStatus(null);
+    engine.reset();
+    engine.play();
+  };
+
+  const pop = () => {
+    if (stack.length === 0 || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: "pop" });
+    setIsFullStatus(null);
+    engine.reset();
+    engine.play();
+  };
+
+  const checkFull = () => {
+    if (engine.isPlaying || pendingOp || capacity === null) return;
+    setPendingOp({ type: "isfull" });
+    setIsFullStatus(null);
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setInputValue("");
+    setStack([]);
+    setPendingOp(null);
+    setCapacity(null);
+    setCapacityInput("");
+    setIsFullStatus(null);
+    engine.reset();
+  };
+
+  const handleSetCapacity = () => {
+    const size = parseInt(capacityInput, 10);
+    if (isNaN(size) || size < 1 || size > 10) {
+      alert("Please enter a valid capacity between 1 and 10.");
+      return;
+    }
+    setCapacity(size);
+    setCapacityInput("");
+  };
+
+  useVisualizerReset(handleReset);
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.type === "complete") {
+        if (pendingOp?.type === "push" || pendingOp?.type === "pop") {
+          setStack(finalFrame.stack);
+        } else if (pendingOp?.type === "isfull") {
+          setIsFullStatus(finalFrame.isFull);
+        }
+      }
+      setPendingOp(null);
+      engine.reset();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useEffect(() => {
+    if (
+      engine.currentStep === frames.length - 1 &&
+      frames.length > 0 &&
+      !engine.isPlaying
+    ) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.type === "complete") {
+        if (pendingOp?.type === "push" || pendingOp?.type === "pop") {
+          setStack(finalFrame.stack);
+        } else if (pendingOp?.type === "isfull") {
+          setIsFullStatus(finalFrame.isFull);
+        }
+        setPendingOp(null);
+        if (pendingOp?.type === "push") setInputValue("");
+        engine.reset();
+      } else if (finalFrame && finalFrame.type === "error") {
+        setPendingOp(null);
+        engine.reset();
+      }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine, pendingOp]);
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame =
+    frames.length > 0 && engine.currentStep >= 0
+      ? frames[engine.currentStep]
+      : {
+          type: "idle",
+          stack: stack,
+          message: capacity === null ? "Please set a valid stack capacity first." : "Ready for operations!",
+        };
+
+  const displayStack = currentFrame.stack || stack;
+
+  const slots = [];
+  if (capacity !== null) {
+    for (let i = capacity - 1; i >= 0; i--) {
+      const isFilled = i < displayStack.length;
+      const itemValue = isFilled ? displayStack[displayStack.length - 1 - i] : null;
+      slots.push({ index: i, isFilled, value: itemValue });
+    }
+  }
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize Push, Pop, Peek, and IsFull operations
+      </p>
+
+      <VisualizerCard className="mb-0">
+        {capacity === null ? (
+          <div className="flex flex-col gap-4">
+            <div className="flex gap-4">
+              <input
+                type="number"
+                min="1"
+                max="10"
+                value={capacityInput}
+                onChange={(e) => setCapacityInput(e.target.value)}
+                className="flex-1 rounded-lg border p-3 dark:bg-gray-700"
+                placeholder="Enter capacity (1-10)..."
+                onKeyDown={(e) => e.key === "Enter" && handleSetCapacity()}
+              />
+              <button
+                onClick={handleSetCapacity}
+                className="rounded-lg bg-primary px-6 py-3 text-white transition hover:bg-primary-dark"
+              >
+                Set Capacity
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-4">
+            <div className="flex gap-4">
+              <input
+                type="text"
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                className="flex-1 rounded-lg border p-3 dark:bg-gray-700"
+                placeholder="Enter value"
+                disabled={engine.isPlaying || pendingOp !== null || displayStack.length >= capacity}
+                onKeyDown={(e) => e.key === "Enter" && push()}
+              />
+              <button
+                onClick={push}
+                disabled={engine.isPlaying || !inputValue || pendingOp !== null || displayStack.length >= capacity}
+                className={`w-32 rounded-lg px-6 py-3 text-white transition ${
+                  engine.isPlaying || !inputValue || pendingOp !== null || displayStack.length >= capacity
+                    ? "bg-gray-400 cursor-not-allowed"
+                    : "bg-primary hover:bg-primary-dark"
+                }`}
+              >
+                {engine.isPlaying && pendingOp?.type === "push" ? "Pushing..." : "Push"}
+              </button>
+            </div>
+            <div className="flex gap-4">
+              <button
+                onClick={checkFull}
+                disabled={engine.isPlaying || pendingOp !== null}
+                className="flex-1 rounded-lg border border-[#a435f0] text-[#a435f0] px-6 py-3 transition hover:bg-[#a435f0] hover:text-white disabled:opacity-50 dark:hover:bg-[#a435f0] dark:hover:text-white"
+              >
+                {engine.isPlaying && pendingOp?.type === "isfull" ? "Checking..." : "IsFull"}
+              </button>
+              <button
+                onClick={pop}
+                disabled={engine.isPlaying || displayStack.length === 0 || pendingOp !== null}
+                className="flex-1 rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 disabled:opacity-50 dark:border-white dark:text-white dark:hover:bg-gray-700"
+              >
+                {engine.isPlaying && pendingOp?.type === "pop" ? "Popping..." : "Pop"}
+              </button>
+              <ResetButton onReset={handleReset} isAnimating={engine.isPlaying && pendingOp === null} />
+            </div>
+          </div>
+        )}
+
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => {
+                engine.reset();
+              }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center min-h-[60px] flex flex-col items-center justify-center">
+        <p className={`font-medium ${currentFrame.type === 'error' ? 'text-red-500' : 'text-gray-800 dark:text-gray-200'}`}>
+          {currentFrame.message || currentFrame.operation}
+        </p>
+        {isFullStatus !== null && !engine.isPlaying && (
+          <div className={`mt-2 font-bold text-lg ${isFullStatus ? 'text-rose-500' : 'text-emerald-500'}`}>
+            Result: {isFullStatus ? 'True (Full)' : 'False (Not Full)'}
+          </div>
+        )}
+      </div>
+
+      <VisualizerCard>
+        {capacity === null ? (
+          <div className="flex flex-col items-center justify-center min-h-[300px] border border-dashed border-slate-700/50 rounded-2xl p-8 bg-slate-900/5">
+            <span className="text-sm font-semibold text-slate-500 text-center">
+              Define stack capacity above to initialize the stack structure
+            </span>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center min-h-[300px]">
+            <div className="mb-6 text-center text-sm font-semibold text-slate-500">
+              Stack Status:{" "}
+              <span
+                className={
+                  displayStack.length >= capacity
+                    ? "text-rose-500 font-bold"
+                    : "text-[#a435f0] font-bold"
+                }
+              >
+                {displayStack.length === 0
+                  ? "Empty"
+                  : displayStack.length >= capacity
+                  ? "Full"
+                  : "Active"}
+              </span>
+              {" | "}Capacity:{" "}
+              <span className="text-slate-300 font-bold">{displayStack.length}</span>/
+              <span className="text-slate-400 font-bold">{capacity}</span>
+            </div>
+
+            <div className="w-full max-w-md space-y-1.5 relative">
+              {/* If pushing, animate the new element coming down */}
+              {currentFrame.type === "start" && pendingOp?.type === "push" && (
+                <div className="absolute left-0 right-0 -top-16 flex items-center justify-center gap-4 animate-bounce">
+                  <div className="w-16"></div>
+                  <div className="w-48 text-center text-xs font-bold text-[#a435f0]/80">
+                    Inserting...
+                  </div>
+                  <div className="w-20"></div>
+                </div>
+              )}
+              {/* If popping, animate the popped element going up */}
+              {currentFrame.type === "start" && pendingOp?.type === "pop" && (
+                <div className="absolute left-0 right-0 -top-16 flex items-center justify-center gap-4 opacity-50 scale-110 -translate-y-4 transition-all duration-500">
+                   <div className="w-16"></div>
+                   <div className="w-48 text-center text-xs font-bold text-rose-500">
+                    Removing...
+                  </div>
+                  <div className="w-20"></div>
+                </div>
+              )}
+
+              <div className={`transition-all duration-500 rounded-xl ${pendingOp?.type === 'isfull' && currentFrame.type === 'start' ? 'ring-4 ring-rose-500 shadow-2xl scale-105' : ''}`}>
+              {slots.map((slot) => {
+                const isTop = slot.index === displayStack.length - 1;
+                
+                // Animation states based on engine
+                let itemClass = "bg-slate-800/40 border-slate-700 text-slate-300";
+                
+                if (isTop) {
+                   if (currentFrame.type === 'start' && pendingOp?.type === 'pop') {
+                       itemClass = "bg-rose-500/20 border-rose-500 text-rose-300 scale-105 shadow-rose-500/20 shadow-lg";
+                   } else if (currentFrame.type === 'complete' && pendingOp?.type === 'push') {
+                       itemClass = "bg-[#a435f0] border-[#a435f0] text-white scale-110 shadow-[#a435f0]/30 shadow-xl";
+                   } else {
+                       itemClass = "bg-[#a435f0]/10 border-[#a435f0] text-slate-100 shadow-[#a435f0]/10 shadow-md";
+                   }
+                }
+
+                return (
+                  <div key={slot.index} className="flex items-center gap-4 justify-center">
+                    <div className="w-16 text-right text-xs font-bold text-slate-400 dark:text-slate-500">
+                      Index [{slot.index}]
+                    </div>
+
+                    <div className="w-48 relative">
+                      {slot.isFilled ? (
+                        <div
+                          className={`p-3 border-2 rounded-xl text-center font-medium transition-all duration-300 ${itemClass}`}
+                        >
+                          <div>{slot.value}</div>
+                        </div>
+                      ) : (
+                        <div className="p-3 border border-dashed border-slate-700/50 rounded-xl text-center text-slate-600 font-medium bg-slate-900/10 dark:bg-slate-950/20 transition-all duration-300">
+                          <div className="text-xs uppercase tracking-wider text-slate-600/80">
+                            Empty
+                          </div>
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="w-20 text-left">
+                      {isTop ? (
+                        <span className="text-xs font-extrabold text-[#a435f0] flex items-center gap-1 animate-pulse transition-all duration-300">
+                          ← top
+                        </span>
+                      ) : (
+                        <span className="text-xs text-transparent">top</span>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+
+              {displayStack.length === 0 && (
+                <div className="flex items-center gap-4 justify-center pt-2">
+                  <div className="w-16"></div>
+                  <div className="w-48 text-center text-xs font-bold text-[#a435f0]/80">
+                    top = -1 (Empty)
+                  </div>
+                  <div className="w-20"></div>
+                </div>
+              )}
+              </div>
+            </div>
+          </div>
+        )}
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default StackVisualizer;
diff --git a/src/app/visualizer/stack/isfull/codeBlock.jsx b/src/app/visualizer/stack/isfull/codeBlock.jsx
new file mode 100644
index 000000000..c65f74f00
--- /dev/null
+++ b/src/app/visualizer/stack/isfull/codeBlock.jsx
@@ -0,0 +1,206 @@
+'use client';
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+// ─── All code examples for Stack with isFull ─────────────────────────
+const codeExamples = {
+  javascript: `// Stack with isFull (JavaScript)
+class Stack{
+    constructor(maxSize=5){
+        this.items=[];
+        this.top=-1;
+        this.MAX_SIZE=maxSize;
+    }
+    push(element){
+        if(this.isFull()){
+            console.log("Stack Overflow");
+            return;
+        }
+        this.items[++this.top]=element;
+        console.log("Pushed:",element);
+    }
+    pop(){
+        if(this.isEmpty()){
+            console.log("Stack Underflow");
+            return -1;
+        }
+        return this.items[this.top--];
+    }
+    isFull(){
+        return this.top===this.MAX_SIZE-1;
+    }
+    isEmpty(){
+        return this.top===-1;
+    }
+    display(){
+        console.log(this.items.slice(0,this.top+1));
+    }
+}
+// Usage
+const stack=new Stack(3);
+stack.push(10);
+stack.push(20);
+stack.push(30);
+stack.display();
+stack.push(40);`,
+  python: `# Stack with isFull
+class Stack:
+    def __init__(self,max_size=5):
+        self.items=[]
+        self.top=-1
+        self.MAX_SIZE=max_size
+    def push(self,element):
+        if self.is_full():
+            print("Stack Overflow")
+            return
+        self.top+=1
+        self.items.append(element)
+    def pop(self):
+        if self.is_empty():
+            print("Stack Underflow")
+            return -1
+        self.top-=1
+        return self.items.pop()
+    def is_full(self):
+        return self.top==(self.MAX_SIZE-1)
+    def is_empty(self):
+        return self.top==-1
+    def display(self):
+        print(self.items)
+stack=Stack(3)
+stack.push(10)
+stack.push(20)
+stack.push(30)
+stack.display()
+stack.push(40)`,
+  java: `// Stack with isFull
+import java.util.ArrayList;
+class Stack{
+    ArrayList<Integer> items;
+    int top;
+    int MAX_SIZE;
+    Stack(int maxSize){
+        items=new ArrayList<>();
+        top=-1;
+        MAX_SIZE=maxSize;
+    }
+    void push(int element){
+        if(isFull()){
+            System.out.println("Stack Overflow");
+            return;
+        }
+        items.add(element);
+        top++;
+    }
+    int pop(){
+        if(isEmpty()){
+            return -1;
+        }
+        top--;
+        return items.remove(top+1);
+    }
+    boolean isFull(){
+        return top==MAX_SIZE-1;
+    }
+    boolean isEmpty(){
+        return top==-1;
+    }
+    public static void main(String args[]){
+        Stack stack=new Stack(3);
+        stack.push(10);
+        stack.push(20);
+        stack.push(30);
+        stack.push(40);
+    }
+}`,
+  c: `// Stack with isFull
+#include<stdio.h>
+#define MAX 5
+typedef struct{
+    int items[MAX];
+    int top;
+}Stack;
+void initialize(Stack* s){
+    s->top=-1;
+}
+void push(Stack* s,int element){
+    if(s->top==MAX-1){
+        printf("Stack Overflow\\n");
+        return;
+    }
+    s->items[++s->top]=element;
+}
+int pop(Stack* s){
+    if(s->top==-1){
+        return -1;
+    }
+    return s->items[s->top--];
+}
+int main(){
+    Stack stack;
+    initialize(&stack);
+    push(&stack,10);
+    push(&stack,20);
+    push(&stack,30);
+    push(&stack,40);
+    return 0;
+}`,
+  cpp: `// Stack with isFull
+#include<iostream>
+#include<vector>
+using namespace std;
+class Stack{
+private:
+    vector<int> items;
+    int top;
+    int MAX_SIZE;
+public:
+    Stack(int maxSize=5){
+        top=-1;
+        MAX_SIZE=maxSize;
+    }
+    void push(int element){
+        if(isFull()){
+            cout<<"Stack Overflow";
+            return;
+        }
+        items.push_back(element);
+        top++;
+    }
+    bool isFull(){
+        return top==MAX_SIZE-1;
+    }
+    int pop(){
+        if(top==-1){
+            return -1;
+        }
+        int value=items.back();
+        items.pop_back();
+        top--;
+        return value;
+    }
+};
+int main(){
+    Stack stack(3);
+    stack.push(10);
+    stack.push(20);
+    stack.push(30);
+    stack.push(40);
+    return 0;
+}`
+};
+// ─── Filenames ───────────────────────────────────
+const fileNames = {
+    javascript:'stackIsFull.js',
+    python:'stack_is_full.py',
+    java:'Stack.java',
+    c:'stack_is_full.c',
+    cpp:'stack_is_full.cpp'
+};
+// ─── Component ───────────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/stack/isfull/content.jsx b/src/app/visualizer/stack/isfull/content.jsx
new file mode 100644
index 000000000..d9315b8c1
--- /dev/null
+++ b/src/app/visualizer/stack/isfull/content.jsx
@@ -0,0 +1,216 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraphs = [
+    `The Is Full operation checks whether a stack has reached its maximum capacity. This is particularly relevant for fixed-size stack implementations (arrays) rather than dynamic implementations (linked lists).`,
+    `The Is Full operation is crucial when working with fixed-size stacks to prevent overflow errors. While not needed for dynamically-sized stacks, it's an essential safety check in many system-level implementations.`,
+  ];
+
+  const working = [
+    { points: "Returns true if the stack cannot accept more elements." },
+    { points: "Returns false if the stack can accept more elements." },
+    {
+      points:
+        "For dynamic stacks (no fixed size), this operation typically always returns false.",
+    },
+    { points: "Often used with Push operations to prevent stack overflow." },
+  ];
+
+  const complexity = [
+    {
+      points: "Fixed-size Stack:",
+      subpoints: ["Time Complexity: O(1)", "Space Complexity: O(1)"],
+    },
+    {
+      points: "Dynamic Stack:",
+      subpoints: ["Time Complexity: O(1)", "Space Complexity: O(1)"],
+    },
+  ];
+
+  const useCase = [
+    { points: "Preventing stack overflow in memory-constrained systems." },
+    { points: "Implementing bounded buffers or fixed-size caches." },
+    { points: "Memory management in embedded systems." },
+    { points: "Validating stack capacity before push operations" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is the "Is Full" Operation? */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is the &quot;Is Full&quot; Operation?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* How It Works */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            How It Works
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {working.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Time and Space Complexity */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time and Space Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Here&apos;s the time and space complexity analysis for stack
+              operations:
+            </p>
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {complexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                    {item.points.split(":")[0]}:
+                  </span>
+                  <span className="ml-2">{item.points.split(":")[1]}</span>
+                  {item.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.subpoints.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-[#6b7280] dark:text-[#9ca3af]"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ul>
+
+            <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => 1}
+                averageCase={(n) => 1}
+                worstCase={(n) => 1}
+                maxN={25}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Practical Example */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Practical Example
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Consider a stack with maximum capacity of 3 elements:
+            </p>
+            <div className="space-y-4 mt-4">
+              <div className="flex items-center">
+                <div className="w-32 font-mono">Stack: [ ]</div>
+                <div className="ml-4 font-medium">
+                  isFull() →{" "}
+                  <span className="text-red-500 dark:text-red-400">false</span>
+                </div>
+              </div>
+              <div className="flex items-center">
+                <div className="w-32 font-mono">Stack: [5, 3]</div>
+                <div className="ml-4 font-medium">
+                  isFull() →{" "}
+                  <span className="text-red-500 dark:text-red-400">false</span>
+                </div>
+              </div>
+              <div className="flex items-center">
+                <div className="w-32 font-mono">Stack: [7, 3, 5]</div>
+                <div className="ml-4 font-medium">
+                  isFull() →{" "}
+                  <span className="text-green-600 dark:text-green-400">
+                    true
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Common Use Cases */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Common Use Cases
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {useCase.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraphs[1]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/stack/isfull/quiz.jsx b/src/app/visualizer/stack/isfull/quiz.jsx
new file mode 100644
index 000000000..9c7a45c1a
--- /dev/null
+++ b/src/app/visualizer/stack/isfull/quiz.jsx
@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const StackQuiz = () => {
+  const questions = [
+    {
+      question: "What is the primary purpose of the 'isFull' operation in a stack?",
+      options: [
+        "To count the number of elements in the stack",
+        "To check if the stack has reached its maximum capacity",
+        "To remove the top element when the stack is full",
+        "To dynamically resize the stack"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The 'isFull' operation checks whether a fixed-size stack can accept more elements (returns true if full).",
+    },
+    {
+      question: "For which type of stack implementation is 'isFull' most relevant?",
+      options: [
+        "Dynamic stacks (e.g., linked lists)",
+        "Fixed-size stacks (e.g., arrays)",
+        "Both equally",
+        "Stacks with unlimited capacity"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "'isFull' is critical for fixed-size implementations (like arrays) to prevent overflow. Dynamic stacks rarely need it.",
+    },
+    {
+      question: "What does isFull() return for a dynamic stack (no fixed size)?",
+      options: [
+        "Always true",
+        "Always false",
+        "Depends on current elements",
+        "Throws an error"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Dynamic stacks (e.g., linked lists) can theoretically grow indefinitely, so isFull() typically returns false.",
+    },
+    {
+      question: "Given a stack with max capacity 3: [8, 5], what does isFull() return?",
+      options: ["true", "false", "null", "Throws overflow error"],
+      correctAnswer: 1,
+      explanation:
+        "The stack has 2/3 elements, so isFull() returns false (not yet full).",
+    },
+    {
+      question: "Why is 'isFull' crucial before push operations in fixed-size stacks?",
+      options: [
+        "To improve time complexity",
+        "To prevent stack overflow errors",
+        "To count elements efficiently",
+        "To convert the stack to dynamic"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Checking isFull() before push() avoids overflow errors in fixed-capacity stacks.",
+    }
+  ];
+
+  return <QuizEngine title="Stack Quiz Challenge" questions={questions} />;
+};
+
+export default StackQuiz;
diff --git a/src/app/visualizer/stack/monotonic/largestrectangle/AlgorithmClient.jsx b/src/app/visualizer/stack/monotonic/largestrectangle/AlgorithmClient.jsx
new file mode 100644
index 000000000..802f1ec35
--- /dev/null
+++ b/src/app/visualizer/stack/monotonic/largestrectangle/AlgorithmClient.jsx
@@ -0,0 +1,33 @@
+import Animation from "@/app/visualizer/stack/monotonic/largestrectangle/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/stack/monotonic/largestrectangle/content";
+import Code from "@/app/visualizer/stack/monotonic/largestrectangle/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Stack", "Largest Rectangle in Histogram")}
+      title="Largest Rectangle in Histogram"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[
+            { text: "Push & Pop", url: "/visualizer/stack/push-pop" },
+            { text: "Peek", url: "/visualizer/stack/peek" },
+            { text: "Is Empty", url: "/visualizer/stack/isempty" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/stack/monotonic/largestrectangle/animation.jsx b/src/app/visualizer/stack/monotonic/largestrectangle/animation.jsx
new file mode 100644
index 000000000..3cb87e10b
--- /dev/null
+++ b/src/app/visualizer/stack/monotonic/largestrectangle/animation.jsx
@@ -0,0 +1,288 @@
+"use client";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { gsap } from "gsap";
+import ResetButton from "@/app/components/ui/resetButton";
+import GoButton from "@/app/components/ui/goButton";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import { largestRectangleGenerator } from "@/features/algorithms/stack/largestRectangleLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+const Animation = () => {
+  const [inputData, setInputData] = useState("2, 1, 5, 6, 2, 3");
+  const [dataArray, setDataArray] = useState([]);
+  
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+  const barRefs = useRef([]);
+
+  const [steps, setSteps] = useState([]);
+  const [visualState, setVisualState] = useState({
+    currentIndex: -1, stack: [], maxArea: 0, currentRect: null,
+    explanation: "", done: false
+  });
+
+  const onStep = useCallback((state) => {
+    setVisualState({
+      currentIndex: state.currentIndex,
+      stack: state.stack,
+      maxArea: state.maxArea,
+      currentRect: state.currentRect,
+      explanation: state.explanation,
+      done: state.done
+    });
+
+    barRefs.current.forEach((ref, index) => {
+      if (!ref) return;
+      if (state.currentRect) {
+        if (index >= state.currentRect.leftBoundary && index <= state.currentRect.rightBoundary) {
+            gsap.to(ref, { backgroundColor: "#c56eff", borderColor: "#a435f0", duration: 0.2 });
+        } else {
+            gsap.to(ref, { backgroundColor: "#E5E7EB", borderColor: "#D1D5DB", duration: 0.2 });
+        }
+      } else {
+        if (index === state.currentIndex && state.currentIndex < dataArray.length) {
+            gsap.to(ref, { backgroundColor: "#FCD34D", borderColor: "#F59E0B", duration: 0.2 });
+        } else {
+            gsap.to(ref, { backgroundColor: "#E5E7EB", borderColor: "#D1D5DB", duration: 0.2 });
+        }
+      }
+    });
+
+    if (state.done) {
+      setMessage("Visualization completed.");
+      setMessageType("success");
+    } else {
+      setMessage("");
+      setMessageType("");
+    }
+  }, [dataArray.length]);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 1000 });
+  const currentStepData = steps[engine.currentStep];
+
+  const handleReset = useCallback(() => {
+    engine.reset();
+    setDataArray([]);
+    setVisualState({
+      currentIndex: -1, stack: [], maxArea: 0, currentRect: null,
+      explanation: "", done: false
+    });
+    setSteps([]);
+    setMessage("");
+    setMessageType("");
+    
+    barRefs.current.forEach((ref) => {
+      if (ref) {
+        gsap.killTweensOf(ref);
+        gsap.to(ref, { opacity: 1, backgroundColor: "#E5E7EB", borderColor: "#D1D5DB", duration: 0 });
+      }
+    });
+  }, [engine]);
+
+  const handleGo = (e) => {
+    e.preventDefault();
+    handleReset();
+    
+    if (!inputData) {
+      setMessage("Please provide input data.");
+      setMessageType("warning");
+      return;
+    }
+
+    const parsedArray = inputData.split(',').map(s => parseInt(s.trim()));
+    if (parsedArray.some(isNaN) || parsedArray.some(v => v < 0)) {
+      setMessage("Invalid elements. Please provide comma-separated positive integers.");
+      setMessageType("warning");
+      return;
+    }
+
+    setDataArray(parsedArray);
+    
+    const generatedStates = Array.from(largestRectangleGenerator(parsedArray));
+    setSteps(generatedStates);
+    setTimeout(() => {
+      engine.play();
+    }, 50);
+  };
+
+  useVisualizerKeyboard({
+    onStart: handleGo,
+    onReset: handleReset,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+    onTogglePlayPause: engine.isPlaying ? engine.pause : engine.play,
+    speed: engine.speed / 500,
+    sorting: engine.isPlaying,
+    sorted: currentStepData?.done || false,
+  });
+
+  const maxVal = dataArray.length > 0 ? Math.max(...dataArray, 1) : 1; 
+
+  const messageClass =
+    messageType === "success"
+      ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
+      : messageType === "warning"
+      ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
+      : "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200";
+
+  return (
+    <main className="container mx-auto">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8 max-w-3xl mx-auto">
+        Visualize how a Monotonic Increasing Stack is used to find the Largest Rectangle in a Histogram in O(N) time.
+      </p>
+      
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8 shadow-sm"
+      >
+        <div className="flex flex-col md:flex-row gap-4 mb-4">
+          <div className="flex-1">
+            <label className="block text-gray-700 dark:text-gray-300 mb-2 font-medium" htmlFor="inputData">
+              Histogram Heights (comma-separated)
+            </label>
+            <input
+              type="text"
+              id="inputData"
+              value={inputData}
+              onChange={(e) => setInputData(e.target.value)}
+              className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#a435f0] focus:outline-none focus:ring-2 focus:ring-[#a435f0]/30 transition duration-300 font-mono"
+              placeholder="e.g., 2, 1, 5, 6, 2, 3"
+              disabled={engine.isPlaying || dataArray.length > 0 && !currentStepData?.done}
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-3 mt-6">
+          <GoButton onClick={handleGo} isAnimating={engine.isPlaying || (dataArray.length > 0 && !visualState.done)} disabled={engine.isPlaying} />
+          <ResetButton onReset={handleReset} isAnimating={engine.isPlaying || dataArray.length > 0} />
+        </div>
+
+        {(engine.isPlaying || dataArray.length > 0) && (
+          <div className="mt-6 border-t border-gray-100 dark:border-gray-800 pt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={engine.isPlaying ? engine.pause : engine.play}
+              speed={engine.speed / 500}
+              onSpeedChange={(s) => engine.setSpeed(s * 500)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={handleReset}
+              disabled={steps.length === 0}
+            />
+          </div>
+        )}
+      </form>
+
+      {message && (
+        <div className={`max-w-4xl mx-auto mb-8 p-4 rounded-lg ${messageClass}`}>
+          <p className="text-center font-medium">{message}</p>
+        </div>
+      )}
+
+      {dataArray.length > 0 && (
+        <div className="max-w-6xl mx-auto space-y-6">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            
+            <div className="lg:col-span-2 space-y-6">
+                <div className="bg-white dark:bg-gray-800 p-5 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm flex flex-col justify-center">
+                    <div className="flex items-center gap-2 mb-3">
+                        <span className="w-2 h-2 rounded-full bg-[#a435f0] animate-pulse"></span>
+                        <span className="text-sm font-semibold text-[#a435f0] dark:text-[#c56eff] uppercase tracking-wide">
+                        Current Step
+                        </span>
+                    </div>
+                    <p className="text-gray-700 dark:text-gray-200 text-base leading-relaxed font-mono min-h-[3rem]">
+                        {visualState.explanation || "Ready to begin..."}
+                    </p>
+                </div>
+                
+                <div className="bg-white dark:bg-gray-800 p-5 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm grid grid-cols-3 gap-4 text-center">
+                    <div>
+                        <h4 className="text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-1">Current Index `i`</h4>
+                        <div className="text-2xl font-bold text-gray-800 dark:text-gray-100 font-mono">
+                        {visualState.currentIndex !== -1 && visualState.currentIndex <= dataArray.length ? visualState.currentIndex : "-"}
+                        </div>
+                    </div>
+                    <div className="col-span-2 border-l border-gray-200 dark:border-gray-700 pl-4">
+                        <h4 className="text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-1">Max Area Found</h4>
+                        <div className="text-2xl font-bold text-[#a435f0] dark:text-[#c56eff] font-mono">
+                        {visualState.maxArea}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="bg-white dark:bg-gray-800 p-5 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm flex flex-col">
+                <h4 className="text-center font-semibold text-gray-700 dark:text-gray-300 mb-4 border-b pb-2 dark:border-gray-700">Monotonic Stack (Indices)</h4>
+                <div className="flex-1 flex flex-col-reverse justify-start items-center overflow-y-auto max-h-[250px] gap-2 p-2 border border-dashed border-gray-300 dark:border-gray-600 rounded">
+                    {visualState.stack.length === 0 ? (
+                        <div className="text-gray-400 dark:text-gray-500 text-sm font-mono my-auto">Empty Stack</div>
+                    ) : (
+                        visualState.stack.map((stackVal, idx) => (
+                            <div key={idx} className={`w-full max-w-[120px] p-2 text-center rounded border-2 ${idx === visualState.stack.length - 1 ? 'bg-[#a435f0] text-white border-[#8a2be2]' : 'bg-slate-200 dark:bg-slate-700 dark:border-slate-600 dark:text-white'}`}>
+                                <div className="text-xs opacity-75">Index: {stackVal}</div>
+                                <div className="font-bold">Height: {dataArray[stackVal]}</div>
+                            </div>
+                        ))
+                    )}
+                </div>
+            </div>
+          </div>
+
+          <div className="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 relative">
+            <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-6 text-center">
+              Histogram Visualization
+            </h2>
+            
+            <div className="flex items-end justify-center gap-1 md:gap-2 h-64 md:h-80 w-full px-4 border-b-2 border-gray-800 dark:border-gray-400 relative">
+              {visualState.currentRect && (
+                  <div 
+                     className="absolute bottom-0 bg-[#a435f0] opacity-30 border-2 border-[#8a2be2] z-10 transition-all duration-300"
+                     style={{
+                         height: `${(visualState.currentRect.height / maxVal) * 100}%`,
+                         left: `calc(${(visualState.currentRect.leftBoundary / dataArray.length) * 100}% + 1rem)`,
+                         width: `calc(${(visualState.currentRect.width / dataArray.length) * 100}% - 2rem)`, 
+                     }}
+                  >
+                  </div>
+              )}
+              
+              {dataArray.map((height, index) => {
+                const heightPercentage = (height / maxVal) * 100;
+                
+                return (
+                  <div key={index} className="flex flex-col items-center justify-end h-full flex-1 max-w-[80px] z-20 group relative">
+                    <div className="mb-2 text-sm font-bold text-gray-700 dark:text-gray-300 transition-opacity">
+                        {height}
+                    </div>
+                    <div
+                      ref={(el) => (barRefs.current[index] = el)}
+                      className="w-full rounded-t-sm border-2 shadow-sm transition-all duration-300 relative"
+                      style={{ 
+                          height: `${Math.max(heightPercentage, 2)}%`,
+                          backgroundColor: "#E5E7EB", 
+                          borderColor: "#D1D5DB" 
+                      }} 
+                    >
+                    </div>
+                    <div className="mt-2 text-xs text-gray-500 font-mono">
+                      {index}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            
+            <div className="mt-12 flex justify-center gap-6 text-xs text-gray-500 dark:text-gray-400 font-medium flex-wrap">
+               <div className="flex items-center gap-2"><div className="w-4 h-4 rounded bg-[#E5E7EB] border border-[#D1D5DB]"></div> Default Bar</div>
+               <div className="flex items-center gap-2"><div className="w-4 h-4 rounded bg-[#FCD34D] border border-[#F59E0B]"></div> Processing Index</div>
+               <div className="flex items-center gap-2"><div className="w-4 h-4 rounded bg-[#c56eff] border border-[#a435f0]"></div> Area Included in Pop</div>
+            </div>
+          </div>
+        </div>
+      )}
+    </main>
+  );
+};
+
+export default Animation;
diff --git a/src/app/visualizer/stack/monotonic/largestrectangle/codeBlock.jsx b/src/app/visualizer/stack/monotonic/largestrectangle/codeBlock.jsx
new file mode 100644
index 000000000..7634a0dc5
--- /dev/null
+++ b/src/app/visualizer/stack/monotonic/largestrectangle/codeBlock.jsx
@@ -0,0 +1,105 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+const codeExamples = {
+  javascript: `function largestRectangleArea(heights) {
+    let maxArea = 0;
+    const stack = []; // Stores indices
+    
+    for (let i = 0; i <= heights.length; i++) {
+        const h = (i === heights.length) ? 0 : heights[i];
+        
+        while (stack.length > 0 && h < heights[stack[stack.length - 1]]) {
+            const height = heights[stack.pop()];
+            const width = stack.length === 0 ? i : i - stack[stack.length - 1] - 1;
+            maxArea = Math.max(maxArea, height * width);
+        }
+        
+        stack.push(i);
+    }
+    
+    return maxArea;
+}`,
+  python: `def largestRectangleArea(heights):
+    stack = []
+    max_area = 0
+    
+    for i, h in enumerate(heights):
+        start = i
+        while stack and stack[-1][1] > h:
+            index, height = stack.pop()
+            max_area = max(max_area, height * (i - index))
+            start = index
+        stack.append((start, h))
+        
+    for i, h in stack:
+        max_area = max(max_area, h * (len(heights) - i))
+        
+    return max_area`,
+  java: `class Solution {
+    public int largestRectangleArea(int[] heights) {
+        int maxArea = 0;
+        Stack<Integer> stack = new Stack<>();
+        
+        for (int i = 0; i <= heights.length; i++) {
+            int h = (i == heights.length) ? 0 : heights[i];
+            
+            while (!stack.isEmpty() && h < heights[stack.peek()]) {
+                int height = heights[stack.pop()];
+                int width = stack.isEmpty() ? i : i - stack.peek() - 1;
+                maxArea = Math.max(maxArea, height * width);
+            }
+            
+            stack.push(i);
+        }
+        
+        return maxArea;
+    }
+}`,
+  c: `int largestRectangleArea(int* heights, int heightsSize) {
+    int maxArea = 0;
+    int* stack = (int*)malloc(sizeof(int) * (heightsSize + 1));
+    int top = -1;
+    
+    for (int i = 0; i <= heightsSize; i++) {
+        int h = (i == heightsSize) ? 0 : heights[i];
+        
+        while (top != -1 && h < heights[stack[top]]) {
+            int height = heights[stack[top--]];
+            int width = (top == -1) ? i : i - stack[top] - 1;
+            int area = height * width;
+            if (area > maxArea) {
+                maxArea = area;
+            }
+        }
+        
+        stack[++top] = i;
+    }
+    
+    free(stack);
+    return maxArea;
+}`
+};
+
+const fileNames = {
+  javascript: 'largestRectangle.js',
+  python: 'largest_rectangle.py',
+  java: 'LargestRectangle.java',
+  c: 'largest_rectangle.c'
+};
+
+const CodeBlock = () => (
+  <div className="space-y-4">
+    <h2 className="text-2xl font-bold dark:text-white mb-4">
+      Largest Rectangle in Histogram Code
+    </h2>
+    <CodeBlockUI
+      variant="macos"
+      codeExamples={codeExamples}
+      fileNames={fileNames}
+    />
+  </div>
+);
+
+export default CodeBlock;
diff --git a/src/app/visualizer/stack/monotonic/largestrectangle/content.jsx b/src/app/visualizer/stack/monotonic/largestrectangle/content.jsx
new file mode 100644
index 000000000..fb34f680b
--- /dev/null
+++ b/src/app/visualizer/stack/monotonic/largestrectangle/content.jsx
@@ -0,0 +1,61 @@
+export default function Content() {
+  return (
+    <article className="prose dark:prose-invert max-w-none">
+      <h2>Largest Rectangle in Histogram</h2>
+      <p>
+        The <strong>Largest Rectangle in Histogram</strong> problem asks us to find the area of the largest rectangle that can be formed within the bounds of a given histogram. A histogram is represented by an array of integers, where each integer denotes the height of a bar. All bars have a width of 1.
+      </p>
+
+      <h3>The Brute Force Approach</h3>
+      <p>
+        A naive solution would involve checking every possible pair of bars and calculating the minimum height between them to find the area. This approach has a time complexity of <code>O(N^2)</code>, which is inefficient for large histograms.
+      </p>
+
+      <h3>Optimized Approach: The Monotonic Stack</h3>
+      <p>
+        We can solve this problem in <strong>O(N) time</strong> using a <strong>Monotonic Increasing Stack</strong>. A monotonic increasing stack is a stack whose elements are always sorted in an increasing order from bottom to top.
+      </p>
+      <p>
+        The key observation is that the maximum area rectangle that includes a specific bar `i` will have a height equal to `histogram[i]`. Its width will extend to the left until it hits a bar shorter than `histogram[i]` and to the right until it hits another bar shorter than `histogram[i]`.
+      </p>
+      <p>
+        The stack helps us efficiently find the <strong>Next Smaller Element (NSE)</strong> and <strong>Previous Smaller Element (PSE)</strong> for every bar.
+      </p>
+
+      <h3>How it Works</h3>
+      <ol>
+        <li>
+          Iterate through the histogram from left to right (index `0` to `n`).
+        </li>
+        <li>
+          If the stack is empty, or the current bar&apos;s height is <strong>greater than or equal to</strong> the height of the bar at the top of the stack, we <strong>push the current index</strong> onto the stack. We maintain an increasing order.
+        </li>
+        <li>
+          If the current bar is <strong>shorter</strong> than the bar at the top of the stack, it means the current bar is the <strong>Next Smaller Element (NSE)</strong> for the bar at the stack&apos;s top.
+        </li>
+        <li>
+          We start <strong>popping elements</strong> from the stack. For every popped element (let&apos;s say its index is `poppedIndex`):
+          <ul>
+            <li>The height of the rectangle is <code>histogram[poppedIndex]</code>.</li>
+            <li>The <strong>Next Smaller Element (NSE)</strong> is the current index we are at (let&apos;s call it `i`).</li>
+            <li>The <strong>Previous Smaller Element (PSE)</strong> is the new top of the stack after popping. If the stack becomes empty, it means there are no smaller elements to the left, so the left boundary is <code>-1</code>.</li>
+            <li>The width of the rectangle is calculated as: <code>width = NSE - PSE - 1</code>.</li>
+            <li>The area is <code>height × width</code>. We update our maximum area if this calculated area is larger.</li>
+          </ul>
+        </li>
+        <li>
+          We continue popping and calculating area as long as the stack is not empty and the current bar is shorter than the top of the stack. Then, we push the current index.
+        </li>
+        <li>
+          After iterating through all bars, we may still have elements in the stack. We pop them one by one, treating the right boundary as the end of the histogram (index `n`).
+        </li>
+      </ol>
+
+      <h3>Complexity Analysis</h3>
+      <ul>
+        <li><strong>Time Complexity: O(N)</strong> - Every element is pushed and popped from the stack exactly once. Therefore, the operations are linear.</li>
+        <li><strong>Space Complexity: O(N)</strong> - The stack can hold up to `N` elements in the worst case (e.g., if the histogram is sorted in ascending order).</li>
+      </ul>
+    </article>
+  );
+}
diff --git a/src/app/visualizer/stack/monotonic/largestrectangle/quiz.jsx b/src/app/visualizer/stack/monotonic/largestrectangle/quiz.jsx
new file mode 100644
index 000000000..2dd3cc654
--- /dev/null
+++ b/src/app/visualizer/stack/monotonic/largestrectangle/quiz.jsx
@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const Quiz = () => {
+  const questions = [
+    {
+      question: "What is the time complexity of finding the largest rectangle in a histogram using a Monotonic Stack?",
+      options: [
+        "O(1)",
+        "O(N)",
+        "O(N log N)",
+        "O(N^2)"
+      ],
+      correctAnswer: 1,
+      explanation: "Using a monotonic stack, each element is pushed and popped at most once. Therefore, the algorithm runs in linear time."
+    },
+    {
+      question: "In the monotonic stack approach for the Largest Rectangle problem, what kind of order does the stack maintain?",
+      options: [
+        "Strictly decreasing order of heights",
+        "Strictly increasing order of heights",
+        "Non-decreasing order of heights (Monotonic Increasing Stack)",
+        "Random order based on indices"
+      ],
+      correctAnswer: 2,
+      explanation: "The stack stores indices in a way that the corresponding heights are always in an increasing (or non-decreasing) order from bottom to top."
+    },
+    {
+      question: "When do we pop an element from the stack?",
+      options: [
+        "When the stack is full",
+        "When the current bar's height is greater than the height of the bar at the top of the stack",
+        "When the current bar's height is less than the height of the bar at the top of the stack",
+        "We never pop elements, we only push"
+      ],
+      correctAnswer: 2,
+      explanation: "When we encounter a smaller bar, it means we have found the right boundary (Next Smaller Element) for the rectangle of the bar at the top of the stack. So, we pop the top element to calculate its maximum possible area."
+    },
+    {
+      question: "After popping an element to calculate area, what represents the left boundary (Previous Smaller Element) of its rectangle?",
+      options: [
+        "The next element to be pushed onto the stack",
+        "The newly revealed element at the top of the stack after popping",
+        "The very bottom element of the stack",
+        "Index 0"
+      ],
+      correctAnswer: 1,
+      explanation: "Because the stack is monotonic increasing, the element right below the popped element is the nearest bar to its left that is strictly smaller."
+    },
+    {
+      question: "What is the space complexity of the Monotonic Stack approach?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N^2)"
+      ],
+      correctAnswer: 2,
+      explanation: "In the worst case (e.g., when the histogram heights are continuously increasing), we might push all N indices onto the stack."
+    }
+  ];
+
+  return <QuizEngine title="Monotonic Stack Quiz Challenge" questions={questions} />;
+};
+
+export default Quiz;
diff --git a/src/app/visualizer/stack/monotonic/quiz/MonotonicQuizClient.jsx b/src/app/visualizer/stack/monotonic/quiz/MonotonicQuizClient.jsx
new file mode 100644
index 000000000..8aea05774
--- /dev/null
+++ b/src/app/visualizer/stack/monotonic/quiz/MonotonicQuizClient.jsx
@@ -0,0 +1,83 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowLeft, Play } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function MonotonicQuizClient() {
+  const quizzes = [
+    {
+      title: "Largest Rectangle in Histogram Quiz",
+      description: "Practice the Largest Rectangle in Histogram problem using Monotonic Stack, tracking heights and widths.",
+      href: "/visualizer/stack/monotonic/quiz/histogram",
+      filename: "largest_rectangle_histogram_quiz.js",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-[var(--udemy-text)] dark:text-white transition-colors duration-300 pb-20">
+      
+      {/* Header / Hero */}
+      <section className="relative pt-6 pb-4">
+        <div className="max-w-[1100px] mx-auto px-4">
+          <Link href="/visualizer/quiz">
+            <button className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] dark:text-[var(--color-primary-light)] hover:opacity-85 transition-opacity mb-3">
+              <ArrowLeft size={16} />
+              <span>Back to all quizzes</span>
+            </button>
+          </Link>
+          <h1 className="text-2xl md:text-3xl font-black mb-2">
+            Monotonic Stack Quiz Portal
+          </h1>
+          <p className="text-[14px] text-surface-600 dark:text-surface-400 font-medium">
+            Choose a Monotonic Stack quiz to test your understanding of algorithmic optimization concepts.
+          </p>
+        </div>
+      </section>
+
+      {/* Grid of Sub-quizzes */}
+      <div className="max-w-xl mx-auto px-4 mt-8">
+        <div className="grid gap-6 items-stretch">
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4, delay: index * 0.1, ease: [0.22, 1, 0.36, 1] }}
+              whileHover={{ y: -6, scale: 1.015 }}
+              whileTap={{ scale: 0.985 }}
+              className="group flex flex-col h-full rounded-2xl border border-teal-500/20 dark:border-teal-500/30 bg-white dark:bg-[#1a1a1a] overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
+            >
+              {/* Terminal command execution style top bar */}
+              <div className="flex items-center justify-between px-4 py-2.5 bg-teal-500/10 dark:bg-teal-500/20 border-b border-teal-500/20 dark:border-teal-500/30">
+                <div className="flex items-center gap-1.5 font-mono text-[11px] text-surface-600 dark:text-surface-300">
+                  <span className="text-violet-500 font-bold">$</span>
+                  <span>node {quiz.filename}</span>
+                </div>
+              </div>
+
+              {/* Main Card Content */}
+              <div className="p-6 flex-1 flex flex-col justify-between">
+                <div>
+                  <h2 className="text-[20px] font-extrabold text-surface-900 dark:text-white group-hover:text-teal-600 dark:group-hover:text-teal-400 transition-colors mb-2">
+                    {quiz.title}
+                  </h2>
+                  <p className="text-[14px] text-surface-600 dark:text-surface-300 leading-relaxed mb-6">
+                    {quiz.description}
+                  </p>
+                </div>
+
+                <Link href={quiz.href} className="block mt-auto w-full">
+                  <button className="w-full h-11 rounded-xl bg-teal-600 hover:bg-teal-700 dark:bg-teal-500 dark:hover:bg-teal-600 text-white font-bold text-[14px] flex items-center justify-center gap-2 shadow-sm hover:shadow-md transition-all">
+                    <span>Start Quiz</span>
+                    <Play size={14} className="fill-current" />
+                  </button>
+                </Link>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/stack/monotonic/quiz/histogram/page.jsx b/src/app/visualizer/stack/monotonic/quiz/histogram/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/stack/monotonic/quiz/histogram/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/stack/monotonic/quiz/histogram/quiz.jsx b/src/app/visualizer/stack/monotonic/quiz/histogram/quiz.jsx
new file mode 100644
index 000000000..2dd3cc654
--- /dev/null
+++ b/src/app/visualizer/stack/monotonic/quiz/histogram/quiz.jsx
@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const Quiz = () => {
+  const questions = [
+    {
+      question: "What is the time complexity of finding the largest rectangle in a histogram using a Monotonic Stack?",
+      options: [
+        "O(1)",
+        "O(N)",
+        "O(N log N)",
+        "O(N^2)"
+      ],
+      correctAnswer: 1,
+      explanation: "Using a monotonic stack, each element is pushed and popped at most once. Therefore, the algorithm runs in linear time."
+    },
+    {
+      question: "In the monotonic stack approach for the Largest Rectangle problem, what kind of order does the stack maintain?",
+      options: [
+        "Strictly decreasing order of heights",
+        "Strictly increasing order of heights",
+        "Non-decreasing order of heights (Monotonic Increasing Stack)",
+        "Random order based on indices"
+      ],
+      correctAnswer: 2,
+      explanation: "The stack stores indices in a way that the corresponding heights are always in an increasing (or non-decreasing) order from bottom to top."
+    },
+    {
+      question: "When do we pop an element from the stack?",
+      options: [
+        "When the stack is full",
+        "When the current bar's height is greater than the height of the bar at the top of the stack",
+        "When the current bar's height is less than the height of the bar at the top of the stack",
+        "We never pop elements, we only push"
+      ],
+      correctAnswer: 2,
+      explanation: "When we encounter a smaller bar, it means we have found the right boundary (Next Smaller Element) for the rectangle of the bar at the top of the stack. So, we pop the top element to calculate its maximum possible area."
+    },
+    {
+      question: "After popping an element to calculate area, what represents the left boundary (Previous Smaller Element) of its rectangle?",
+      options: [
+        "The next element to be pushed onto the stack",
+        "The newly revealed element at the top of the stack after popping",
+        "The very bottom element of the stack",
+        "Index 0"
+      ],
+      correctAnswer: 1,
+      explanation: "Because the stack is monotonic increasing, the element right below the popped element is the nearest bar to its left that is strictly smaller."
+    },
+    {
+      question: "What is the space complexity of the Monotonic Stack approach?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N^2)"
+      ],
+      correctAnswer: 2,
+      explanation: "In the worst case (e.g., when the histogram heights are continuously increasing), we might push all N indices onto the stack."
+    }
+  ];
+
+  return <QuizEngine title="Monotonic Stack Quiz Challenge" questions={questions} />;
+};
+
+export default Quiz;
diff --git a/src/app/visualizer/stack/monotonic/quiz/page.jsx b/src/app/visualizer/stack/monotonic/quiz/page.jsx
new file mode 100644
index 000000000..dae551f26
--- /dev/null
+++ b/src/app/visualizer/stack/monotonic/quiz/page.jsx
@@ -0,0 +1,5 @@
+import MonotonicQuizClient from "./MonotonicQuizClient";
+
+export default function Page() {
+  return <MonotonicQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/stack/peek/AlgorithmClient.jsx b/src/app/visualizer/stack/peek/AlgorithmClient.jsx
new file mode 100644
index 000000000..81ed4fcd8
--- /dev/null
+++ b/src/app/visualizer/stack/peek/AlgorithmClient.jsx
@@ -0,0 +1,33 @@
+import Animation from "@/app/visualizer/stack/peek/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/stack/peek/content";
+import Code from "@/app/visualizer/stack/peek/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Stack", "Peek")}
+      title="Peek Operation"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[
+            { text: "Push & Pop", url: "/visualizer/stack/push-pop" },
+            { text: "Is Empty", url: "/visualizer/stack/isempty" },
+            { text: "Is Full", url: "/visualizer/stack/isfull" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/stack/peek/animation.jsx b/src/app/visualizer/stack/peek/animation.jsx
new file mode 100644
index 000000000..1f840d2a4
--- /dev/null
+++ b/src/app/visualizer/stack/peek/animation.jsx
@@ -0,0 +1,310 @@
+"use client";
+
+import React, { useState, useMemo, useEffect } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { peekGenerator } from "@/features/algorithms/stack/stackLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import ResetButton from "@/app/components/ui/resetButton";
+
+const StackVisualizer = () => {
+  const [capacityInput, setCapacityInput] = useState("");
+  const [capacity, setCapacity] = useState(null);
+  const [stack, setStack] = useState([]);
+  const [pendingOp, setPendingOp] = useState(null); // { type: 'peek' }
+
+  const frames = useMemo(() => {
+    if (!pendingOp) return [];
+    if (pendingOp.type === "peek") {
+      return Array.from(peekGenerator(stack));
+    }
+    return [];
+  }, [stack, pendingOp]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 800 });
+
+  const peek = () => {
+    if (stack.length === 0 || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: "peek" });
+    engine.reset();
+    engine.play();
+  };
+
+  const addRandomStack = () => {
+    if (stack.length > 0 || capacity === null || engine.isPlaying || pendingOp) return;
+    const maxLen = Math.max(3, capacity - 1);
+    const minLen = Math.min(3, capacity);
+    const length = minLen + Math.floor(Math.random() * (maxLen - minLen + 1));
+    const nums = Array.from(
+      { length: Math.min(length, capacity) },
+      () => Math.floor(Math.random() * 999) + 1
+    );
+    // Reverse it so we get the visual effect of a pre-filled stack
+    setStack(nums);
+  };
+
+  const handleReset = () => {
+    setStack([]);
+    setPendingOp(null);
+    setCapacity(null);
+    setCapacityInput("");
+    engine.reset();
+  };
+
+  const handleSetCapacity = () => {
+    const size = parseInt(capacityInput, 10);
+    if (isNaN(size) || size < 1 || size > 10) {
+      alert("Please enter a valid capacity between 1 and 10.");
+      return;
+    }
+    setCapacity(size);
+    setCapacityInput("");
+  };
+
+  useVisualizerReset(handleReset);
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      setPendingOp(null);
+      engine.reset();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useEffect(() => {
+    if (
+      engine.currentStep === frames.length - 1 &&
+      frames.length > 0 &&
+      !engine.isPlaying
+    ) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.type === "complete") {
+        setPendingOp(null);
+        engine.reset();
+      } else if (finalFrame && finalFrame.type === "error") {
+        setPendingOp(null);
+        engine.reset();
+      }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine, pendingOp]);
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame =
+    frames.length > 0 && engine.currentStep >= 0
+      ? frames[engine.currentStep]
+      : {
+          type: "idle",
+          stack: stack,
+          message: capacity === null ? "Please set a valid stack capacity first." : "Ready for operations!",
+        };
+
+  const displayStack = currentFrame.stack || stack;
+
+  const slots = [];
+  if (capacity !== null) {
+    for (let i = capacity - 1; i >= 0; i--) {
+      const isFilled = i < displayStack.length;
+      const itemValue = isFilled ? displayStack[displayStack.length - 1 - i] : null;
+      slots.push({ index: i, isFilled, value: itemValue });
+    }
+  }
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize the Peek operation
+      </p>
+
+      <VisualizerCard className="mb-0">
+        {capacity === null ? (
+          <div className="flex flex-col gap-4">
+            <div className="flex gap-4">
+              <input
+                type="number"
+                min="1"
+                max="10"
+                value={capacityInput}
+                onChange={(e) => setCapacityInput(e.target.value)}
+                className="flex-1 rounded-lg border p-3 dark:bg-gray-700"
+                placeholder="Enter capacity (1-10)..."
+                onKeyDown={(e) => e.key === "Enter" && handleSetCapacity()}
+              />
+              <button
+                onClick={handleSetCapacity}
+                className="rounded-lg bg-primary px-6 py-3 text-white transition hover:bg-primary-dark"
+              >
+                Set Capacity
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-4">
+            <div className="flex gap-4">
+              <button
+                onClick={addRandomStack}
+                disabled={engine.isPlaying || pendingOp !== null || displayStack.length > 0}
+                className={`flex-1 rounded-lg px-6 py-3 text-white transition ${
+                  engine.isPlaying || pendingOp !== null || displayStack.length > 0
+                    ? "bg-gray-400 cursor-not-allowed"
+                    : "bg-blue-600 hover:bg-blue-700"
+                }`}
+              >
+                Add Random Stack
+              </button>
+              <button
+                onClick={peek}
+                disabled={engine.isPlaying || displayStack.length === 0 || pendingOp !== null}
+                className={`flex-1 rounded-lg px-6 py-3 text-white transition ${
+                   engine.isPlaying || displayStack.length === 0 || pendingOp !== null
+                    ? "bg-gray-400 cursor-not-allowed"
+                    : "bg-primary hover:bg-primary-dark"
+                }`}
+              >
+                {engine.isPlaying && pendingOp?.type === "peek" ? "Peeking..." : "Peek"}
+              </button>
+              <ResetButton onReset={handleReset} isAnimating={engine.isPlaying && pendingOp === null} />
+            </div>
+          </div>
+        )}
+
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => {
+                engine.reset();
+              }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center min-h-[60px] flex items-center justify-center">
+        <p className={`font-medium ${currentFrame.type === 'error' ? 'text-red-500' : 'text-gray-800 dark:text-gray-200'}`}>
+          {currentFrame.message || currentFrame.operation}
+        </p>
+      </div>
+
+      <VisualizerCard>
+        {capacity === null ? (
+          <div className="flex flex-col items-center justify-center min-h-[300px] border border-dashed border-slate-700/50 rounded-2xl p-8 bg-slate-900/5">
+            <span className="text-sm font-semibold text-slate-500 text-center">
+              Define stack capacity above to initialize the stack structure
+            </span>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center min-h-[300px]">
+            <div className="mb-6 text-center text-sm font-semibold text-slate-500">
+              Stack Status:{" "}
+              <span
+                className={
+                  displayStack.length >= capacity
+                    ? "text-rose-500 font-bold"
+                    : "text-[#a435f0] font-bold"
+                }
+              >
+                {displayStack.length === 0
+                  ? "Empty"
+                  : displayStack.length >= capacity
+                  ? "Full"
+                  : "Active"}
+              </span>
+              {" | "}Capacity:{" "}
+              <span className="text-slate-300 font-bold">{displayStack.length}</span>/
+              <span className="text-slate-400 font-bold">{capacity}</span>
+            </div>
+
+            <div className="w-full max-w-md space-y-1.5 relative">
+              {slots.map((slot) => {
+                const isTop = slot.index === displayStack.length - 1;
+                
+                // Animation states based on engine
+                let itemClass = "bg-slate-800/40 border-slate-700 text-slate-300";
+                
+                if (isTop) {
+                   if (currentFrame.type === 'start' && pendingOp?.type === 'peek') {
+                       // Glow effect for peek
+                       itemClass = "bg-[#a435f0]/20 border-[#a435f0] text-white scale-110 shadow-[#a435f0] shadow-lg animate-pulse";
+                   } else if (currentFrame.type === 'complete' && pendingOp?.type === 'peek') {
+                       itemClass = "bg-[#a435f0] border-[#a435f0] text-white scale-105 shadow-[#a435f0]/50 shadow-lg";
+                   } else {
+                       itemClass = "bg-[#a435f0]/10 border-[#a435f0] text-slate-100 shadow-[#a435f0]/10 shadow-md";
+                   }
+                }
+
+                return (
+                  <div key={slot.index} className="flex items-center gap-4 justify-center">
+                    <div className="w-16 text-right text-xs font-bold text-slate-400 dark:text-slate-500">
+                      Index [{slot.index}]
+                    </div>
+
+                    <div className="w-48 relative">
+                      {slot.isFilled ? (
+                        <div
+                          className={`p-3 border-2 rounded-xl text-center font-medium transition-all duration-300 ${itemClass}`}
+                        >
+                          <div>{slot.value}</div>
+                        </div>
+                      ) : (
+                        <div className="p-3 border border-dashed border-slate-700/50 rounded-xl text-center text-slate-600 font-medium bg-slate-900/10 dark:bg-slate-950/20 transition-all duration-300">
+                          <div className="text-xs uppercase tracking-wider text-slate-600/80">
+                            Empty
+                          </div>
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="w-20 text-left">
+                      {isTop ? (
+                        <span className="text-xs font-extrabold text-[#a435f0] flex items-center gap-1 transition-all duration-300">
+                          ← top
+                        </span>
+                      ) : (
+                        <span className="text-xs text-transparent">top</span>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+
+              {displayStack.length === 0 && (
+                <div className="flex items-center gap-4 justify-center pt-2">
+                  <div className="w-16"></div>
+                  <div className="w-48 text-center text-xs font-bold text-[#a435f0]/80">
+                    top = -1 (Empty)
+                  </div>
+                  <div className="w-20"></div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default StackVisualizer;
diff --git a/src/app/visualizer/stack/peek/codeBlock.jsx b/src/app/visualizer/stack/peek/codeBlock.jsx
new file mode 100644
index 000000000..4bf68ef01
--- /dev/null
+++ b/src/app/visualizer/stack/peek/codeBlock.jsx
@@ -0,0 +1,445 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for Stack with Peek ───────────────────────────
+const codeExamples = {
+  javascript: `// Stack with Peek Operation
+class Stack{
+
+    constructor(){
+
+        this.items=[];
+        this.top=-1;
+    }
+
+    push(element){
+
+        this.items[++this.top]
+        =element;
+
+        console.log(
+            "Pushed:",
+            element
+        );
+    }
+
+    pop(){
+
+        if(this.isEmpty()){
+
+            console.log(
+                "Stack Underflow"
+            );
+
+            return -1;
+        }
+
+        return this.items[
+            this.top--
+        ];
+    }
+
+    peek(){
+
+        if(this.isEmpty()){
+
+            console.log(
+                "Stack Empty"
+            );
+
+            return -1;
+        }
+
+        return this.items[
+            this.top
+        ];
+    }
+
+    isEmpty(){
+
+        return this.top===-1;
+    }
+
+    display(){
+
+        console.log(
+            this.items.slice(
+                0,
+                this.top+1
+            )
+        );
+    }
+}
+
+// Usage
+const stack=new Stack();
+
+stack.push(10);
+stack.push(20);
+stack.push(30);
+
+stack.display();
+
+console.log(
+    "Peek:",
+    stack.peek()
+);
+
+stack.pop();
+
+console.log(
+    "Peek:",
+    stack.peek()
+);`,
+
+  python: `# Stack with Peek
+
+class Stack:
+
+    def __init__(self):
+
+        self.items=[]
+        self.top=-1
+
+
+    def push(
+            self,
+            element):
+
+        self.top+=1
+
+        self.items.append(
+            element
+        )
+
+
+    def pop(self):
+
+        if self.is_empty():
+
+            print(
+            "Stack Underflow"
+            )
+
+            return -1
+
+        self.top-=1
+
+        return self.items.pop()
+
+
+    def peek(self):
+
+        if self.is_empty():
+
+            return -1
+
+        return self.items[
+            self.top
+        ]
+
+    def is_empty(self):
+
+        return self.top==-1
+
+
+    def display(self):
+
+        print(
+            self.items
+        )
+
+
+stack=Stack()
+
+stack.push(10)
+stack.push(20)
+stack.push(30)
+
+stack.display()
+
+print(
+    "Peek:",
+    stack.peek()
+)
+
+stack.pop()
+
+print(
+    "Peek:",
+    stack.peek()
+)`,
+
+  java: `// Stack with Peek
+import java.util.ArrayList;
+
+class Stack{
+
+    ArrayList<Integer>
+    items;
+
+    int top;
+
+    Stack(){
+
+        items=
+        new ArrayList<>();
+
+        top=-1;
+    }
+
+    void push(
+        int element){
+
+        items.add(
+            element
+        );
+
+        top++;
+    }
+
+    int pop(){
+
+        if(isEmpty()){
+
+            return -1;
+        }
+
+        top--;
+
+        return items.remove(
+            top+1
+        );
+    }
+
+    int peek(){
+
+        if(isEmpty()){
+
+            return -1;
+        }
+
+        return items.get(
+            top
+        );
+    }
+
+    boolean isEmpty(){
+
+        return top==-1;
+    }
+
+    public static void main(
+            String args[]){
+
+        Stack stack=
+        new Stack();
+
+        stack.push(10);
+        stack.push(20);
+        stack.push(30);
+
+        System.out.println(
+            stack.peek()
+        );
+
+        stack.pop();
+
+        System.out.println(
+            stack.peek()
+        );
+    }
+}`,
+
+  c: `// Stack with Peek
+#include<stdio.h>
+
+#define MAX 100
+
+typedef struct{
+
+    int items[MAX];
+    int top;
+
+}Stack;
+
+void initialize(
+        Stack* s){
+
+    s->top=-1;
+}
+
+void push(
+        Stack* s,
+        int element){
+
+    s->items[
+        ++s->top
+    ]=element;
+}
+
+int pop(
+    Stack* s){
+
+    if(
+    s->top==-1
+    ){
+
+        return -1;
+    }
+
+    return s->items[
+        s->top--
+    ];
+}
+
+int peek(
+    Stack* s){
+
+    return s->items[
+        s->top
+    ];
+}
+
+int main(){
+
+    Stack stack;
+
+    initialize(
+        &stack
+    );
+
+    push(
+        &stack,
+        10
+    );
+
+    push(
+        &stack,
+        20
+    );
+
+    push(
+        &stack,
+        30
+    );
+
+    printf(
+        "%d\\n",
+        peek(
+            &stack
+        )
+    );
+
+    pop(
+        &stack
+    );
+
+    printf(
+        "%d",
+        peek(
+            &stack
+        )
+    );
+
+    return 0;
+}`,
+
+  cpp: `// Stack with Peek
+#include<iostream>
+#include<vector>
+
+using namespace std;
+
+class Stack{
+
+private:
+
+    vector<int>
+    items;
+
+    int top;
+
+public:
+
+    Stack(){
+
+        top=-1;
+    }
+
+    void push(
+        int element){
+
+        items.push_back(
+            element
+        );
+
+        top++;
+    }
+
+    int pop(){
+
+        if(
+        top==-1
+        ){
+
+            return -1;
+        }
+
+        int value=
+        items.back();
+
+        items.pop_back();
+
+        top--;
+
+        return value;
+    }
+
+    int peek(){
+
+        return items.back();
+    }
+};
+
+int main(){
+
+    Stack stack;
+
+    stack.push(10);
+    stack.push(20);
+    stack.push(30);
+
+    cout
+    <<stack.peek()
+    <<endl;
+
+    stack.pop();
+
+    cout
+    <<stack.peek();
+
+    return 0;
+}`
+};
+
+// ─── Filenames ──────────────────────────────
+const fileNames = {
+    javascript:'stackPeek.js',
+    python:'stack_peek.py',
+    java:'StackPeek.java',
+    c:'stack_peek.c',
+    cpp:'stack_peek.cpp'
+};
+
+// ─── Component ──────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/stack/peek/content.jsx b/src/app/visualizer/stack/peek/content.jsx
new file mode 100644
index 000000000..fa9341d7e
--- /dev/null
+++ b/src/app/visualizer/stack/peek/content.jsx
@@ -0,0 +1,105 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraphs = [
+    `Returns the topmost element from the stack without removing it.`,
+    `The peek operation is useful when you need to inspect the top element before deciding whether to pop it or push another element onto the stack.`,
+  ];
+
+  const example = [
+    { points : "Current stack: [7, 3, 5]" },
+    { points : "Peek → returns 7: [7, 3, 5] (stack remains unchanged)" },
+    { points : "After pop: [3, 5]" },
+    { points : "Peek → returns 3: [3, 5]" },
+  ];
+
+  const complexity = [
+    { points : "Time Complexity: O(1)" },
+    { points : "Space Complexity: O(1)" },
+  ];
+
+  return (
+<main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* Peek Operation */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Peek Operation
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[0]}
+            </p>
+
+            <p className="text-[#374151] dark:text-[#d1d5db] font-medium mt-4 mb-2">
+              Example: Peeking at a stack
+            </p>
+
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {example.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+
+            <ul className="mt-4 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {complexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                    {item.points.split(":")[0]}:
+                  </span>
+                  <span className="ml-2">{item.points.split(":")[1]}</span>
+                </li>
+              ))}
+            </ul>
+
+            <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => 1}
+                averageCase={(n) => 1}
+                worstCase={(n) => 1}
+                maxN={25}
+              />
+            </div>
+
+            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+              {paragraphs[1]}
+            </p>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/stack/peek/quiz.jsx b/src/app/visualizer/stack/peek/quiz.jsx
new file mode 100644
index 000000000..62709980e
--- /dev/null
+++ b/src/app/visualizer/stack/peek/quiz.jsx
@@ -0,0 +1,117 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const StackQuiz = () => {
+  const questions = [
+    {
+      question: "What does the peek operation in a stack do?",
+      options: [
+        "Removes and returns the top element",
+        "Returns the top element without removing it",
+        "Adds a new element to the top",
+        "Returns the bottom element of the stack"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Peek only inspects the top element without modifying the stack, unlike pop which removes it.",
+    },
+    {
+      question: "What is the time complexity of the peek operation?",
+      options: ["O(n)", "O(log n)", "O(1)", "O(n²)"],
+      correctAnswer: 2,
+      explanation:
+        "Peek operates in O(1) time since it directly accesses the top element (constant time).",
+    },
+    {
+      question: "After pushing 10, 20, and 30 onto a stack, what does peek() return?",
+      options: ["10", "20", "30", "Error"],
+      correctAnswer: 2,
+      explanation:
+        "The stack becomes [30, 20, 10], so peek returns 30 (the top element).",
+    },
+    {
+      question: "What happens if you peek at an empty stack?",
+      options: [
+        "Returns null",
+        "Returns undefined",
+        "Causes stack underflow",
+        "Depends on implementation"
+      ],
+      correctAnswer: 3,
+      explanation:
+        "Most implementations throw a stack underflow exception (or similar error) when peeking an empty stack.",
+    },
+    {
+      question: "How does peek differ from pop?",
+      options: [
+        "Peek removes the element, pop doesn't",
+        "Peek doesn't modify the stack, pop does",
+        "Peek works at the bottom of the stack",
+        "Peek has O(n) time complexity"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Peek is non-destructive (only reads data), while pop modifies the stack by removing the top element.",
+    },
+    {
+      question: "In which scenario would peek be particularly useful?",
+      options: [
+        "When you need to remove all elements",
+        "When you need to check the top element before deciding to pop/push",
+        "When you need to reverse the stack",
+        "When you need to count all elements"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Peek is ideal for inspection before operations (e.g., checking if a parenthesis matches before popping).",
+    },
+    {
+      question: "Given stack = [5, 2, 9], what's the state after peek()?",
+      options: [
+        "[5, 2, 9]",
+        "[2, 9]",
+        "[5, 2]",
+        "[9, 5, 2]"
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Peek only reads the top element (9), leaving the stack unchanged as [5, 2, 9].",
+    },
+    {
+      question: "Which real-world analogy best describes peek?",
+      options: [
+        "Taking the top plate from a stack of plates",
+        "Looking at the top plate without taking it",
+        "Adding a new plate to the stack",
+        "Counting all plates in the stack"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Peek is like looking at the top plate to see if it's dirty before deciding to remove it.",
+    },
+    {
+      question: "What does peek() return after: push(8), push(4), pop(), peek()?",
+      options: ["8", "4", "Error", "Null"],
+      correctAnswer: 0,
+      explanation:
+        "Operations: push(8) → [8], push(4) → [4, 8], pop() → returns 4: [8], peek() → returns 8.",
+    },
+    {
+      question: "Why is peek considered a 'safe' operation?",
+      options: [
+        "It never throws errors",
+        "It doesn't modify stack data",
+        "It works on full stacks",
+        "It has O(1) space complexity"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Peek is 'safe' in terms of data integrity since it’s read-only (though it may throw errors on empty stacks).",
+    },
+  ];
+
+  return <QuizEngine title="Stack Quiz Challenge" questions={questions} />;
+};
+
+export default StackQuiz;
diff --git a/src/app/visualizer/stack/polish/postfix/AlgorithmClient.jsx b/src/app/visualizer/stack/polish/postfix/AlgorithmClient.jsx
new file mode 100644
index 000000000..d81d0c3bf
--- /dev/null
+++ b/src/app/visualizer/stack/polish/postfix/AlgorithmClient.jsx
@@ -0,0 +1,29 @@
+import Animation from "@/app/visualizer/stack/polish/postfix/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/stack/polish/postfix/content";
+import Code from "@/app/visualizer/stack/polish/postfix/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Stack", "Infix to Postfix")}
+      title="Infix to Postfix"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other conversions"
+          links={[{ text: "Infix to Prefix", url: "./prefix" }]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/stack/polish/postfix/animation.jsx b/src/app/visualizer/stack/polish/postfix/animation.jsx
new file mode 100644
index 000000000..3219f6ea0
--- /dev/null
+++ b/src/app/visualizer/stack/polish/postfix/animation.jsx
@@ -0,0 +1,260 @@
+"use client";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import gsap from "gsap";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { postfixGenerator } from "@/features/algorithms/stack/postfixLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+/* ----------  tiny reusable animated bits  ---------- */
+const AnimatedStackItem = ({ char, isTop }) => (
+  <motion.div
+    initial={{ y: -30, opacity: 0, scale: 0.8 }}
+    animate={{ y: 0, opacity: 1, scale: 1 }}
+    exit={{ y: 30, opacity: 0, scale: 0.8 }}
+    transition={{ type: "spring", stiffness: 300, damping: 20 }}
+    className={`p-3 border-2 rounded text-center font-medium
+      ${isTop ? "bg-blue-100 dark:bg-blue-900 border-[#c27cf7]" : "bg-white dark:bg-gray-700 border-gray-200"}`}
+  >
+    {char}
+    {isTop && <div className="text-xs mt-1 text-gray-500">(Top)</div>}
+  </motion.div>
+);
+
+const AnimatedOutputToken = ({ char }) => (
+  <motion.div
+    initial={{ scale: 0, rotate: -180 }}
+    animate={{ scale: 1, rotate: 0 }}
+    transition={{ type: "spring", stiffness: 300, damping: 15 }}
+    className="w-10 h-10 flex items-center justify-center rounded-md
+               bg-green-100 dark:bg-green-500 border border-white
+               text-green-800 dark:text-black font-mono font-bold"
+  >
+    {char}
+  </motion.div>
+);
+
+/* ----------  main component  ---------- */
+const InfixToPostfixVisualizer = () => {
+  const [infix, setInfix] = useState("(A+B)*C");
+  const [postfix, setPostfix] = useState("");
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [message, setMessage] = useState("Enter an infix expression and click Convert");
+  const [steps, setSteps] = useState([]);
+  const [visualState, setVisualState] = useState({
+    stack: [], output: [], operation: null, message: "Enter an infix expression and click Convert"
+  });
+
+  const onStep = useCallback((step) => {
+    setVisualState({
+      stack: step.stack,
+      output: step.output,
+      operation: step.action,
+      message: step.description
+    });
+  }, []);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 1000 });
+  const currentStepData = steps[engine.currentStep];
+
+  const reset = useCallback(() => {
+    engine.reset();
+    setPostfix("");
+    setSteps([]);
+    setMessage("Enter an infix expression and click Convert");
+    setVisualState({ stack: [], output: [], operation: null, message: "Enter an infix expression and click Convert" });
+    setIsProcessing(false);
+  }, [engine]);
+
+  const convertInfixToPostfix = () => {
+    if (!infix.trim()) { setMessage("Please enter an infix expression"); return; }
+    setIsProcessing(true);
+    reset();
+    const conversionSteps = Array.from(postfixGenerator(infix));
+    const finalPostfix = conversionSteps.length > 0 ? conversionSteps[conversionSteps.length - 1].output.join(" ") : "";
+    setSteps(conversionSteps);
+    setPostfix(finalPostfix);
+    setIsProcessing(false);
+    setTimeout(() => {
+      engine.play();
+    }, 50);
+  };
+
+  const statusRef = useRef();
+  
+  useVisualizerReset(() => {
+    setInfix("(A+B)*C");
+    reset();
+  });
+
+  useEffect(() => {
+    if (statusRef.current) gsap.fromTo(statusRef.current, { scale: 0.95, opacity: 0.7 }, { scale: 1, opacity: 1, duration: 0.3 });
+  }, [visualState.message]);
+
+  useVisualizerKeyboard({
+    onStart: undefined,
+    onReset: reset,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+    onTogglePlayPause: engine.isPlaying ? engine.pause : engine.play,
+    speed: engine.speed / 500,
+    sorting: engine.isPlaying,
+    sorted: engine.currentStep === steps.length - 1 && steps.length > 0,
+    enabled: true,
+  });
+
+  /* ----------  UI  ---------- */
+  return (
+    <main className="container mx-auto">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">Visualize the conversion from infix to postfix notation</p>
+      <div className="max-w-4xl mx-auto">
+        <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8">
+          <div className="mb-4">
+            <label className="block text-gray-700 dark:text-gray-300 mb-2">
+              Infix Expression
+            </label>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={infix}
+                onChange={e => setInfix(e.target.value)}
+                placeholder="Enter infix expression (e.g., (A+B)*C)"
+                className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#a435f0] focus:outline-none focus:ring-2 focus:ring-[#a435f0]/30 transition duration-300"
+                disabled={isProcessing || engine.isPlaying || (steps.length > 0 && engine.currentStep < steps.length - 1)}
+              />
+              <button
+                onClick={convertInfixToPostfix}
+                disabled={isProcessing || engine.isPlaying || (steps.length > 0 && engine.currentStep < steps.length - 1)}
+                className="px-6 py-2 font-bold bg-[#a435f0] text-white rounded-lg hover:bg-[#8f2cd6] transition-all duration-200"
+              >
+                {isProcessing ? "Converting..." : "Convert"}
+              </button>
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-4">
+            <button
+              onClick={reset}
+              className="flex-1 border-2 border-[#1a1a1a] dark:border-[#f7f9fa] text-[#1a1a1a] dark:text-[#f7f9fa] font-bold py-[10px] rounded-lg hover:bg-[#1a1a1a] hover:text-white dark:hover:bg-white dark:hover:text-[#1a1a1a] disabled:opacity-50 transition-all duration-200"
+            >
+              Reset
+            </button>
+          </div>
+
+          {steps.length > 0 && (
+            <div className="mt-6">
+              <PlaybackControls
+                isPlaying={engine.isPlaying}
+                onTogglePlayPause={engine.isPlaying ? engine.pause : engine.play}
+                speed={engine.speed / 500}
+                onSpeedChange={(s) => engine.setSpeed(s * 500)}
+                disabled={steps.length === 0}
+                showShortcuts={true}
+                onStepForward={engine.stepForward}
+                onStepBackward={engine.stepBackward}
+                onReset={reset}
+                progressText={`Step ${engine.currentStep + 1} of ${steps.length}`}
+              />
+            </div>
+          )}
+        </div>
+
+        <div ref={statusRef} className="bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8">
+          <h2 className="text-xl font-semibold mb-4">Conversion Status</h2>
+          {visualState.operation && (
+            <div className="mb-4 p-3 rounded-lg bg-[#a435f0]/10 dark:bg-[#a435f0]/20 text-[#a435f0] border border-[#a435f0]/20">
+              <span className="font-semibold uppercase text-xs tracking-wider mr-2">Status:</span>
+              {visualState.operation}
+            </div>
+          )}
+          {visualState.message && (
+            <div className="p-4 rounded-lg bg-blue-100 dark:bg-blue-900 text-primary-dark dark:text-blue-200">
+              <p className="font-medium text-center">{visualState.message}</p>
+            </div>
+          )}
+          {postfix && engine.currentStep === steps.length - 1 && (
+            <motion.div initial={{ scale: 0.8, y: 20 }} animate={{ scale: 1, y: 0 }} transition={{ type: "spring", stiffness: 200 }} className="mt-4 p-4 rounded-lg bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800 text-center">
+              <div className="font-bold uppercase text-xs tracking-widest mb-1">Final Postfix Result</div>
+              <div className="text-3xl font-bold font-mono">{postfix}</div>
+            </motion.div>
+          )}
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+          <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700">
+            <h2 className="text-xl font-semibold mb-6 flex items-center gap-2">
+              <span className="w-1.5 h-6 bg-primary rounded-full"></span>
+              Stack (Operators)
+            </h2>
+            <div className="flex flex-col items-center min-h-[300px]">
+              <div className="mb-2 text-sm text-gray-600 dark:text-gray-400">{visualState.stack.length > 0 ? "↑ Top" : ""}</div>
+              <div className="w-32 relative">
+                <AnimatePresence>
+                  {visualState.stack.length === 0 ? (
+                    <div className="text-center py-12 text-gray-400 border-2 border-dashed rounded-xl italic">
+                      Stack is empty
+                    </div>
+                  ) : (
+                    <div className="space-y-2">
+                      {visualState.stack.map((item, i) => (
+                        <AnimatedStackItem key={`${i}-${item}`} char={item} isTop={i === visualState.stack.length - 1} />
+                      ))}
+                    </div>
+                  )}
+                </AnimatePresence>
+              </div>
+              <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">{visualState.stack.length > 0 ? "↓ Bottom" : ""}</div>
+            </div>
+          </div>
+
+          <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700">
+            <h2 className="text-xl font-semibold mb-6 flex items-center gap-2">
+              <span className="w-1.5 h-6 bg-green-500 rounded-full"></span>
+              Output
+            </h2>
+            <div className="min-h-[300px] p-6 bg-gray-50 dark:bg-gray-900/50 rounded-xl border border-gray-100 dark:border-gray-800 flex flex-col">
+              <div className="flex flex-wrap gap-3 justify-center">
+                <AnimatePresence>
+                  {visualState.output.length === 0 ? (
+                    <div className="text-gray-400 italic w-full text-center py-12">Output will appear here</div>
+                  ) : (
+                    visualState.output.map((c, i) => <AnimatedOutputToken key={`${i}-${c}`} char={c} />)
+                  )}
+                </AnimatePresence>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {steps.length > 0 && (
+          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }} className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-6">
+            <h2 className="text-xl font-semibold mb-4">Conversion Steps</h2>
+            <div className="overflow-x-auto">
+              <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                <thead className="bg-gray-50 dark:bg-neutral-950"><tr>
+                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Step</th>
+                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Action</th>
+                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Character</th>
+                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Description</th>
+                </tr></thead>
+                <tbody className="bg-white dark:bg-neutral-900 divide-y divide-gray-200 dark:divide-gray-700">
+                  {steps.map((step, idx) => (
+                    <motion.tr key={idx} onClick={() => { engine.pause(); while(engine.currentStep !== idx) { if (engine.currentStep < idx) engine.stepForward(); else engine.stepBackward(); } }} className={`cursor-pointer ${engine.currentStep === idx ? "bg-blue-50 dark:bg-neutral-950" : "hover:bg-gray-50 dark:hover:bg-neutral-950"}`}
+                               whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.98 }}>
+                      <td className="px-4 py-2 whitespace-nowrap text-sm font-medium">{idx + 1}</td>
+                      <td className="px-4 py-2 whitespace-nowrap text-sm">{step.action}</td>
+                      <td className="px-4 py-2 whitespace-nowrap text-sm font-mono">{step.char || "-"}</td>
+                      <td className="px-4 py-2 text-sm">{step.description}</td>
+                    </motion.tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </motion.div>
+        )}
+      </div>
+    </main>
+  );
+};
+
+export default InfixToPostfixVisualizer;
diff --git a/src/app/visualizer/stack/polish/postfix/codeBlock.jsx b/src/app/visualizer/stack/polish/postfix/codeBlock.jsx
new file mode 100644
index 000000000..603620378
--- /dev/null
+++ b/src/app/visualizer/stack/polish/postfix/codeBlock.jsx
@@ -0,0 +1,183 @@
+'use client';
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+// ─── All code examples for Postfix Evaluation using Stack ─────────────
+const codeExamples = {
+  javascript: `// Postfix Evaluation using Stack
+function evaluatePostfix(expression){
+    let stack=[];
+    for(let char of expression){
+        if(!isNaN(char)){
+            stack.push(parseInt(char));
+        }else{
+            let b=stack.pop();
+            let 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();
+}
+// Usage
+console.log(evaluatePostfix("23*5+"));`,
+  python: `# Postfix Evaluation using Stack
+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()
+print(evaluate_postfix("23*5+"))`,
+  java: `// Postfix Evaluation using Stack
+import java.util.Stack;
+public class PostfixEvaluator{
+    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[]){
+        System.out.println(evaluatePostfix("23*5+"));
+    }
+}`,
+  c: `// Postfix Evaluation using Stack
+#include<stdio.h>
+#include<ctype.h>
+#define MAX 100
+typedef struct{
+    int data[MAX];
+    int top;
+}Stack;
+void push(Stack* s,int value){
+    s->data[++s->top]=value;
+}
+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(){
+    printf("%d",evaluatePostfix("23*5+"));
+    return 0;
+}`,
+  cpp: `// Postfix Evaluation using Stack
+#include<iostream>
+#include<stack>
+using namespace std;
+int evaluatePostfix(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(){
+    cout<<evaluatePostfix("23*5+");
+    return 0;
+}`
+};
+// ─── Filenames ───────────────────────────
+const fileNames = {
+    javascript:'postfix.js',
+    python:'postfix.py',
+    java:'PostfixEvaluator.java',
+    c:'postfix.c',
+    cpp:'postfix.cpp'
+};
+// ─── Component ───────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/stack/polish/postfix/content.jsx b/src/app/visualizer/stack/polish/postfix/content.jsx
new file mode 100644
index 000000000..f45889d02
--- /dev/null
+++ b/src/app/visualizer/stack/polish/postfix/content.jsx
@@ -0,0 +1,180 @@
+"use client";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraph = [
+    `Postfix notation (also called Reverse Polish Notation) is a way of writing expressions where the operator comes after the operands.`,
+    `For example, the infix expression 3 + 4 becomes 3 4 + in postfix. It removes the need for parentheses by making operator precedence explicit through position.`,
+    `Note: Higher precedence means the operation will happen first. When operators have equal precedence, they are evaluated left-to-right (except for exponentiation which is right-to-left).`,
+  ];
+
+  const steps = [
+    { points : "Initialize an empty stack and an empty output string." },
+    { points : "Scan the infix expression from left to right." },
+    { points : "If the element is an operand, add it to the output." },
+    { points : "If the element is a '(', push it onto the stack." },
+    { points : `If the element is a ')', pop from the stack and add to output until '(' is encountered.` },
+    { points : "If the element is an operator, pop from the stack all operators with higher or equal precedence, then push the current operator." },
+    { points : "After scanning, pop all remaining operators from the stack." },
+  ];
+
+  const example = [
+    { points : "Infix: (A + B) * (C - D)" },
+    { points : `Step 1: Push '(' → Stack: [ '(' ], Output: ''` },
+    { points : "Step 2: Add 'A' → Output: 'A'" },
+    { points : "Step 3: Push '+' → Stack: [ '(', '+' ]" },
+    { points : "Step 4: Add 'B' → Output: 'A B'" },
+    { points : "Step 5: Pop until '(' → Stack: [ ], Output: 'A B +'" },
+    { points : "Step 6: Continue similarly for the rest → Final Postfix: A B + C D - *" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is Postfix Notation? */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is Postfix Notation?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            {paragraph.map((text, idx) => (
+              <p
+                key={idx}
+                className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed"
+              >
+                {text}
+              </p>
+            ))}
+          </div>
+        </section>
+
+        {/* Infix to Postfix Conversion Steps */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Infix to Postfix Conversion Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {steps.map((item, idx) => (
+                <li key={idx} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+
+            <div className="mt-4">
+              <span className="font-medium">
+                Example:
+              </span>
+              <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                {example.map((item, idx) => (
+                  <li key={idx} className="text-[#6b7280] dark:text-[#9ca3af]">
+                    {item.points}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        {/* Operator Precedence Table */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Operator Precedence Table
+          </h1>
+          <div className="prose dark:prose-invert max-w-none overflow-x-auto">
+            <table className="min-w-full border-collapse border border-primary-dark">
+              <thead>
+                <tr className="bg-blue-50 dark:bg-blue-900/20">
+                  <th className="border border-primary-dark px-4 py-2 font-semibold">
+                    Operator
+                  </th>
+                  <th className="border border-primary-dark px-4 py-2 font-semibold">
+                    Meaning
+                  </th>
+                  <th className="border border-primary-dark px-4 py-2 font-semibold">
+                    Precedence
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td className="border border-primary-dark px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    ( )
+                  </td>
+                  <td className="border border-primary-dark px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    Parentheses
+                  </td>
+                  <td className="border border-primary-dark px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    Highest
+                  </td>
+                </tr>
+                <tr className="bg-gray-50 dark:bg-gray-700/20">
+                  <td className="border border-primary-dark px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    ^ %
+                  </td>
+                  <td className="border border-primary-dark px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    Exponentiation / Modulus
+                  </td>
+                  <td className="border border-primary-dark px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    2
+                  </td>
+                </tr>
+                <tr>
+                  <td className="border border-primary-dark px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    * /
+                  </td>
+                  <td className="border border-primary-dark px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    Multiplication / Division
+                  </td>
+                  <td className="border border-primary-dark px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    3
+                  </td>
+                </tr>
+                <tr className="bg-gray-50 dark:bg-gray-700/20">
+                  <td className="border border-primary-dark px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    + -
+                  </td>
+                  <td className="border border-primary-dark px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    Addition / Subtraction
+                  </td>
+                  <td className="border border-primary-dark px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    4 (Lowest)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+              {paragraph[2]}
+            </p>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+  };
+  
+  export default Content;
diff --git a/src/app/visualizer/stack/polish/postfix/quiz.jsx b/src/app/visualizer/stack/polish/postfix/quiz.jsx
new file mode 100644
index 000000000..7f6b32593
--- /dev/null
+++ b/src/app/visualizer/stack/polish/postfix/quiz.jsx
@@ -0,0 +1,107 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const StackQuiz = () => {
+  const questions = [
+    {
+      question: "What is the key characteristic of postfix notation?",
+      options: [
+        "Operators appear before their operands",
+        "Operators appear between their operands",
+        "Operators appear after their operands",
+        "Parentheses dictate evaluation order"
+      ],
+      correctAnswer: 2,
+      explanation: "Postfix notation places operators **after** their operands (e.g., `3 4 +` instead of `3 + 4`)."
+    },
+    {
+      question: "How would the infix expression `(A * B) + C` convert to postfix?",
+      options: [
+        "A B * C +",
+        "A B C * +",
+        "A * B + C",
+        "+ * A B C"
+      ],
+      correctAnswer: 0,
+      explanation: "Parentheses force `A * B` first → `A B *`, then `+ C` → `A B * C +`."
+    },
+    {
+      question: "Which operator has the **highest precedence** in infix-to-postfix conversion?",
+      options: ["+", "*", "^ (exponentiation)", "("],
+      correctAnswer: 3,
+      explanation: "Parentheses `(` have the highest precedence and are handled separately in the stack."
+    },
+    {
+      question: "What is the postfix form of `2 ^ 3 ^ 2`? (Note: `^` = exponentiation)",
+      options: [
+        "2 3 2 ^ ^",
+        "2 3 ^ 2 ^",
+        "2 3 2 ^",
+        "2 3 ^ 2"
+      ],
+      correctAnswer: 1,
+      explanation: "Exponentiation is **right-associative**, so `2 ^ (3 ^ 2)` → `2 3 2 ^ ^`."
+    },
+    {
+      question: "Which data structure is used to convert infix to postfix?",
+      options: ["Queue", "Stack", "Heap", "Linked List"],
+      correctAnswer: 1,
+      explanation: "A **stack** temporarily holds operators and parentheses during conversion."
+    },
+    {
+      question: "What is the postfix equivalent of `A + B * C - D / E`?",
+      options: [
+        "A B C * + D E / -",
+        "A B + C * D E - /",
+        "A B C + * D E / -",
+        "A B * C + D E / -"
+      ],
+      correctAnswer: 0,
+      explanation: "`*` and `/` have higher precedence than `+` and `-`. Steps: `B * C` → `A + (result)` → `D / E` → subtract."
+    },
+    {
+      question: "When converting infix to postfix, what happens when a closing `)` is encountered?",
+      options: [
+        "Push it to the stack",
+        "Pop operators from the stack until `(` is found",
+        "Ignore it",
+        "Add it to the output"
+      ],
+      correctAnswer: 1,
+      explanation: "Pop all operators until `(` is reached (discarding both `(` and `)`)."
+    },
+    {
+      question: "What is the postfix form of `3 + 4 * 5 / 6`?",
+      options: [
+        "3 4 5 * 6 / +",
+        "3 4 5 6 / * +",
+        "3 4 * 5 6 / +",
+        "3 4 + 5 6 / *"
+      ],
+      correctAnswer: 0,
+      explanation: "`*` and `/` have equal precedence (left-to-right): `4 * 5` → `result / 6` → `3 + (result)`."
+    },
+    {
+      question: "Why does postfix notation not need parentheses?",
+      options: [
+        "It uses a stack for evaluation",
+        "Operator position implicitly defines precedence",
+        "It only supports single operations",
+        "It reverses the operands"
+      ],
+      correctAnswer: 1,
+      explanation: "Postfix order ensures operations are evaluated correctly without parentheses (e.g., `A B + C *` vs. `A B C * +`)."
+    },
+    {
+      question: "What is the result of evaluating the postfix expression `5 1 2 + 4 * + 3 -`?",
+      options: ["14", "10", "18", "20"],
+      correctAnswer: 0,
+      explanation: "Steps: `1 2 +` → 3; `3 4 *` → 12; `5 12 +` → 17; `17 3 -` → **14**."
+    }
+];
+
+  return <QuizEngine title="Stack Quiz Challenge" questions={questions} />;
+};
+
+export default StackQuiz;
diff --git a/src/app/visualizer/stack/polish/prefix/AlgorithmClient.jsx b/src/app/visualizer/stack/polish/prefix/AlgorithmClient.jsx
new file mode 100644
index 000000000..a121b0f9b
--- /dev/null
+++ b/src/app/visualizer/stack/polish/prefix/AlgorithmClient.jsx
@@ -0,0 +1,29 @@
+import Animation from "@/app/visualizer/stack/polish/prefix/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/stack/polish/prefix/content";
+import Code from "@/app/visualizer/stack/polish/prefix/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Stack", "Infix to Prefix")}
+      title="Infix to Prefix"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other conversions"
+          links={[{ text: "Infix to Postfix", url: "./postfix" }]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/stack/polish/prefix/animation.jsx b/src/app/visualizer/stack/polish/prefix/animation.jsx
new file mode 100644
index 000000000..e6d885a27
--- /dev/null
+++ b/src/app/visualizer/stack/polish/prefix/animation.jsx
@@ -0,0 +1,303 @@
+"use client";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import gsap from "gsap";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { generateInfixToPrefixSteps } from "@/features/algorithms/stack/prefixLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+/* ----------  tiny animated bits  ---------- */
+const AnimatedStackItem = ({ char, isTop }) => (
+  <motion.div
+    initial={{ y: -30, opacity: 0, scale: 0.8 }}
+    animate={{ y: 0, opacity: 1, scale: 1 }}
+    exit={{ y: 30, opacity: 0, scale: 0.8 }}
+    transition={{ type: "spring", stiffness: 300, damping: 20 }}
+    className={`p-3 border-2 rounded text-center font-medium ${
+      isTop
+        ? "bg-blue-100 dark:bg-blue-900 border-[#c27cf7]"
+        : "bg-white dark:bg-gray-700 border-gray-200"
+    }`}
+  >
+    {char}
+    {isTop && <div className="text-xs mt-1 text-gray-500">(Top)</div>}
+  </motion.div>
+);
+
+const AnimatedOutputToken = ({ char }) => (
+  <motion.div
+    initial={{ scale: 0, rotate: -180 }}
+    animate={{ scale: 1, rotate: 0 }}
+    transition={{ type: "spring", stiffness: 300, damping: 15 }}
+    className="w-10 h-10 flex items-center justify-center rounded-md
+               bg-green-100 dark:bg-green-500 border border-white
+               text-green-800 dark:text-black font-mono font-bold"
+  >
+    {char}
+  </motion.div>
+);
+
+/* ----------  main component  ---------- */
+const InfixToPrefixVisualizer = () => {
+  /* =======  state  ======= */
+  const [infix, setInfix] = useState("(A+B)*C");
+  const [prefix, setPrefix] = useState("");
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [message, setMessage] = useState("Enter an infix expression and click Convert");
+  const [steps, setSteps] = useState([]);
+  const [visualState, setVisualState] = useState({
+    stack: [], output: [], operation: null, message: "Enter an infix expression and click Convert"
+  });
+
+  /* ----------  playback  ---------- */
+  const onStep = useCallback((step) => {
+    setVisualState({
+      stack: step.stack || [],
+      output: step.output || [],
+      operation: step.action,
+      message: step.description
+    });
+  }, []);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 1000 });
+  
+  /* ----------  helpers  ---------- */
+  const reset = useCallback(() => {
+    engine.reset();
+    setPrefix("");
+    setSteps([]);
+    setMessage("Enter an infix expression and click Convert");
+    setVisualState({ stack: [], output: [], operation: null, message: "Enter an infix expression and click Convert" });
+    setIsProcessing(false);
+  }, [engine]);
+
+  const convertInfixToPrefix = () => {
+    if (!infix.trim()) { setMessage("Please enter an infix expression"); return; }
+    setIsProcessing(true);
+    reset();
+
+    const result = generateInfixToPrefixSteps(infix);
+    if (result.error) {
+      setMessage(result.error);
+      setIsProcessing(false);
+      return;
+    }
+
+    setSteps(result.steps);
+    setPrefix(result.prefixResult);
+    setIsProcessing(false);
+    setTimeout(() => {
+      engine.play();
+    }, 50);
+  };
+
+
+  /* ----------  GSAP flash on message change  ---------- */
+  const statusRef = useRef();
+  
+  useVisualizerReset(() => {
+    setInfix("(A+B)*C");
+    reset();
+  });
+  
+  useEffect(() => {
+    if (statusRef.current)
+      gsap.fromTo(statusRef.current, { scale: 0.95, opacity: 0.7 }, { scale: 1, opacity: 1, duration: 0.3 });
+  }, [visualState.message]);
+
+  useVisualizerKeyboard({
+    onStart: undefined, 
+    onReset: reset,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+    onTogglePlayPause: engine.isPlaying ? engine.pause : engine.play,
+    speed: engine.speed / 500,
+    sorting: engine.isPlaying,
+    sorted: engine.currentStep === steps.length - 1 && steps.length > 0,
+    enabled: true,
+  });
+
+  /* ----------  render  ---------- */
+  return (
+    <main className="container mx-auto">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Visualize the conversion from infix to prefix notation
+      </p>
+      <div className="max-w-4xl mx-auto">
+        {/* Input & Controls */}
+        <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8">
+          <div className="mb-4">
+            <label className="block text-gray-700 dark:text-gray-300 mb-2">
+              Infix Expression
+            </label>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={infix}
+                onChange={(e) => setInfix(e.target.value)}
+                placeholder="Enter infix expression (e.g., (A+B)*C)"
+                className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#a435f0] focus:outline-none focus:ring-2 focus:ring-[#a435f0]/30 transition duration-300"
+                disabled={isProcessing || engine.isPlaying || (steps.length > 0 && engine.currentStep < steps.length - 1)}
+              />
+              <button
+                onClick={convertInfixToPrefix}
+                disabled={isProcessing || engine.isPlaying || (steps.length > 0 && engine.currentStep < steps.length - 1)}
+                className="px-6 py-2 font-bold bg-[#a435f0] text-white rounded-lg hover:bg-[#8f2cd6] transition-all duration-200"
+              >
+                {isProcessing ? "Converting..." : "Convert"}
+              </button>
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-4">
+            <button
+              onClick={reset}
+              className="flex-1 border-2 border-[#1a1a1a] dark:border-[#f7f9fa] text-[#1a1a1a] dark:text-[#f7f9fa] font-bold py-[10px] rounded-lg hover:bg-[#1a1a1a] hover:text-white dark:hover:bg-white dark:hover:text-[#1a1a1a] disabled:opacity-50 transition-all duration-200"
+            >
+              Reset
+            </button>
+          </div>
+
+          {steps.length > 0 && (
+            <div className="mt-6">
+              <PlaybackControls
+                isPlaying={engine.isPlaying}
+                onTogglePlayPause={engine.isPlaying ? engine.pause : engine.play}
+                speed={engine.speed / 500}
+                onSpeedChange={(s) => engine.setSpeed(s * 500)}
+                disabled={steps.length === 0}
+                showShortcuts={true}
+                onStepForward={engine.stepForward}
+                onStepBackward={engine.stepBackward}
+                onReset={reset}
+                progressText={`Step ${engine.currentStep + 1} of ${steps.length}`}
+              />
+            </div>
+          )}
+        </div>
+
+        {/* Status panel with GSAP flash */}
+        <div ref={statusRef} className="bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8">
+          <h2 className="text-xl font-semibold mb-4">Conversion Status</h2>
+          {visualState.operation && (
+            <div className="mb-4 p-3 rounded-lg bg-[#a435f0]/10 dark:bg-[#a435f0]/20 text-[#a435f0] border border-[#a435f0]/20">
+              <span className="font-semibold uppercase text-xs tracking-wider mr-2">Status:</span>
+              {visualState.operation}
+            </div>
+          )}
+          {visualState.message && (
+             <div className="p-4 rounded-lg bg-blue-100 dark:bg-blue-900 text-primary-dark dark:text-blue-200">
+               <p className="font-medium text-center">{visualState.message}</p>
+             </div>
+          )}
+          {prefix && engine.currentStep === steps.length - 1 && (
+            <motion.div
+              initial={{ scale: 0.8, y: 20 }}
+              animate={{ scale: 1, y: 0 }}
+              transition={{ type: "spring", stiffness: 200 }}
+              className="mt-4 p-4 rounded-lg bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800 text-center"
+            >
+              <div className="font-bold uppercase text-xs tracking-widest mb-1">Final Prefix Result</div>
+              <div className="text-3xl font-bold font-mono">{prefix}</div>
+            </motion.div>
+          )}
+        </div>
+
+        {/* Visualisations – now with motion */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+          {/* Stack */}
+          <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700">
+            <h2 className="text-xl font-semibold mb-6 flex items-center gap-2">
+              <span className="w-1.5 h-6 bg-primary rounded-full"></span>
+              Stack (Operators)
+            </h2>
+            <div className="flex flex-col items-center min-h-[300px]">
+              <div className="mb-2 text-sm text-gray-600 dark:text-gray-400">{visualState.stack.length > 0 ? "↑ Top" : ""}</div>
+              <div className="w-32 relative">
+                <AnimatePresence>
+                  {visualState.stack.length === 0 ? (
+                    <div className="text-center py-12 text-gray-400 border-2 border-dashed rounded-xl italic">
+                      Stack is empty
+                    </div>
+                  ) : (
+                    <div className="space-y-2">
+                      {visualState.stack.map((item, i) => (
+                        <AnimatedStackItem key={`${i}-${item}`} char={item} isTop={i === visualState.stack.length - 1} />
+                      ))}
+                    </div>
+                  )}
+                </AnimatePresence>
+              </div>
+              <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">{visualState.stack.length > 0 ? "↓ Bottom" : ""}</div>
+            </div>
+          </div>
+
+          {/* Output */}
+          <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700">
+            <h2 className="text-xl font-semibold mb-6 flex items-center gap-2">
+              <span className="w-1.5 h-6 bg-green-500 rounded-full"></span>
+              Prefix Output
+            </h2>
+            <div className="min-h-[300px] p-6 bg-gray-50 dark:bg-gray-900/50 rounded-xl border border-gray-100 dark:border-gray-800 flex flex-col">
+              <div className="flex flex-wrap gap-3 justify-center">
+                <AnimatePresence>
+                  {visualState.output.length === 0 ? (
+                    <div className="text-gray-400 italic w-full text-center py-12">
+                      Output will appear here
+                    </div>
+                  ) : (
+                    visualState.output.map((c, i) => <AnimatedOutputToken key={`${i}-${c}`} char={c} />)
+                  )}
+                </AnimatePresence>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Step table */}
+        {steps.length > 0 && (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.2 }}
+            className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-6"
+          >
+            <h2 className="text-xl font-semibold mb-4">Conversion Steps</h2>
+            <div className="overflow-x-auto">
+              <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                <thead className="bg-gray-50 dark:bg-neutral-950">
+                  <tr>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Step</th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Action</th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Character</th>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Description</th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white dark:bg-neutral-900 divide-y divide-gray-200 dark:divide-gray-700">
+                  {steps.map((step, idx) => (
+                    <motion.tr
+                      key={idx}
+                      onClick={() => { engine.pause(); while(engine.currentStep !== idx) { if (engine.currentStep < idx) engine.stepForward(); else engine.stepBackward(); } }}
+                      className={`cursor-pointer ${
+                        engine.currentStep === idx ? "bg-blue-50 dark:bg-neutral-950" : "hover:bg-gray-50 dark:hover:bg-neutral-950"
+                      }`}
+                      whileHover={{ scale: 1.01 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      <td className="px-4 py-2 whitespace-nowrap text-sm font-medium">{idx + 1}</td>
+                      <td className="px-4 py-2 whitespace-nowrap text-sm">{step.action}</td>
+                      <td className="px-4 py-2 whitespace-nowrap text-sm font-mono">{step.char || "-"}</td>
+                      <td className="px-4 py-2 text-sm">{step.description}</td>
+                    </motion.tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </motion.div>
+        )}
+      </div>
+    </main>
+  );
+};
+
+export default InfixToPrefixVisualizer;
diff --git a/src/app/visualizer/stack/polish/prefix/codeBlock.jsx b/src/app/visualizer/stack/polish/prefix/codeBlock.jsx
new file mode 100644
index 000000000..7eab866dc
--- /dev/null
+++ b/src/app/visualizer/stack/polish/prefix/codeBlock.jsx
@@ -0,0 +1,188 @@
+'use client';
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+// ─── All code examples for Prefix Evaluation using Stack ──────────────
+const codeExamples = {
+  javascript: `// Prefix Evaluation using Stack
+function evaluatePrefix(expression){
+    let stack=[];
+    for(let i=expression.length-1;i>=0;i--){
+        let char=expression[i];
+        if(!isNaN(char)){
+            stack.push(parseInt(char));
+        }else{
+            let a=stack.pop();
+            let 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();
+}
+// Usage
+console.log(evaluatePrefix("+*235"));`,
+  python: `# Prefix Evaluation using Stack
+def evaluate_prefix(expression):
+    stack=[]
+    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()
+print(evaluate_prefix("+*235"))`,
+  java: `// Prefix Evaluation using Stack
+import java.util.Stack;
+public class PrefixEvaluator{
+    static int evaluatePrefix(String expression){
+        Stack<Integer> stack=new Stack<>();
+        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[]){
+        System.out.println(evaluatePrefix("+*235"));
+    }
+}`,
+  c: `// Prefix Evaluation using Stack
+#include<stdio.h>
+#include<ctype.h>
+#include<string.h>
+#define MAX 100
+typedef struct{
+    int data[MAX];
+    int top;
+}Stack;
+void push(Stack* s,int value){
+    s->data[++s->top]=value;
+}
+int pop(Stack* s){
+    return s->data[s->top--];
+}
+int evaluatePrefix(char* expression){
+    Stack s={.top=-1};
+    int length=strlen(expression);
+    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(){
+    printf("%d",evaluatePrefix("+*235"));
+    return 0;
+}`,
+  cpp: `// Prefix Evaluation using Stack
+#include<iostream>
+#include<stack>
+using namespace std;
+int evaluatePrefix(string expression){
+    stack<int> st;
+    for(auto i=expression.rbegin();i!=expression.rend();i++){
+        char c=*i;
+        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(){
+    cout<<evaluatePrefix("+*235");
+    return 0;
+}`
+};
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'prefix.js',
+    python:'prefix.py',
+    java:'PrefixEvaluator.java',
+    c:'prefix.c',
+    cpp:'prefix.cpp'
+};
+// ─── Component ─────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/stack/polish/prefix/content.jsx b/src/app/visualizer/stack/polish/prefix/content.jsx
new file mode 100644
index 000000000..55e24c9bc
--- /dev/null
+++ b/src/app/visualizer/stack/polish/prefix/content.jsx
@@ -0,0 +1,175 @@
+"use client";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraph = [
+    `Prefix notation (also called Polish Notation) is a way of writing expressions where the operator comes before the operands.`,
+    `For example, the infix expression 3 + 4 becomes + 3 4 in prefix. It removes the need for parentheses by using operator order directly.`,
+    `Note: Higher precedence means the operation will happen first. Exponentiation (^) is evaluated right-to-left, while others are left-to-right.`,
+  ];
+
+  const steps = [
+    { points : "Reverse the infix expression, while keeping the positions of parentheses correct." },
+    { points : "Replace ( with ) and vice-versa." },
+    { points : "Convert the reversed expression to postfix using a stack." },
+    { points : "Finally, reverse the postfix expression to get the prefix expression." },
+  ];
+
+  const example = [
+    { points : "Infix: (A + B) * (C - D)" },
+    { points : "Step 1: Reverse → (D - C) * (B + A)" },
+    { points : "Step 2: Convert to postfix → D C - B A + *" },
+    { points : "Step 3: Reverse → * + A B - C D" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is Prefix Notation? */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is Prefix Notation?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraph[0]}
+            </p>
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed mt-4">
+              {paragraph[1]}
+            </p>
+          </div>
+        </section>
+
+        {/* Infix to Prefix Conversion Steps */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Infix to Prefix Conversion Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {steps.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+
+            <div className="mt-4">
+              <span className="font-medium dark:text-amber-500 text-purple-600">
+                Example:
+              </span>
+              <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                {example.map((item, index) => (
+                  <li key={index} className="text-[#6b7280] dark:text-[#9ca3af]">
+                    {item.points}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        {/* Operator Precedence Table */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Operator Precedence Table
+          </h1>
+          <div className="prose dark:prose-invert max-w-none overflow-x-auto">
+            <table className="min-w-full border-collapse border border-primary">
+              <thead>
+                <tr className="bg-blue-50 dark:bg-blue-900/20">
+                  <th className="border border-primary px-4 py-2 font-semibold">
+                    Operator
+                  </th>
+                  <th className="border border-primary px-4 py-2 font-semibold">
+                    Meaning
+                  </th>
+                  <th className="border border-primary px-4 py-2 font-semibold">
+                    Precedence
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td className="border border-primary px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    ( )
+                  </td>
+                  <td className="border border-primary px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    Parentheses
+                  </td>
+                  <td className="border border-primary px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    Highest
+                  </td>
+                </tr>
+                <tr className="bg-gray-50 dark:bg-gray-700/20">
+                  <td className="border border-primary px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    ^ %
+                  </td>
+                  <td className="border border-primary px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    Exponentiation / Modulus
+                  </td>
+                  <td className="border border-primary px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    2
+                  </td>
+                </tr>
+                <tr>
+                  <td className="border border-primary px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    * /
+                  </td>
+                  <td className="border border-primary px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    Multiplication / Division
+                  </td>
+                  <td className="border border-primary px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    3
+                  </td>
+                </tr>
+                <tr className="bg-gray-50 dark:bg-gray-700/20">
+                  <td className="border border-primary px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    + -
+                  </td>
+                  <td className="border border-primary px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    Addition / Subtraction
+                  </td>
+                  <td className="border border-primary px-4 py-2 text-[#374151] dark:text-[#d1d5db]">
+                    4 (Lowest)
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <p className="text-[#374151] dark:text-[#d1d5db] mt-4 leading-relaxed">
+              {paragraph[2]}
+            </p>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/stack/polish/prefix/quiz.jsx b/src/app/visualizer/stack/polish/prefix/quiz.jsx
new file mode 100644
index 000000000..3dd1013d5
--- /dev/null
+++ b/src/app/visualizer/stack/polish/prefix/quiz.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const StackQuiz = () => {
+  const questions = [
+    {
+      question: "What is the defining characteristic of prefix notation?",
+      options: [
+        "Operators appear between operands",
+        "Operators appear after operands",
+        "Operators appear before operands",
+        "Operators are omitted entirely"
+      ],
+      correctAnswer: 2,
+      explanation: "Prefix notation places operators **before** their operands (e.g., `+ 3 4` instead of `3 + 4`)."
+    },
+    {
+      question: "How is the infix expression `A * (B + C)` converted to prefix?",
+      options: [
+        "* A + B C",
+        "A * B + C",
+        "+ * A B C",
+        "* + A B C"
+      ],
+      correctAnswer: 0,
+      explanation: "Parentheses force `B + C` first → `+ B C`, then `* A` → `* A + B C`."
+    },
+    {
+      question: "Which step is unique to infix-to-prefix conversion (compared to postfix)?",
+      options: [
+        "Using a stack for operators",
+        "Reversing the infix expression",
+        "Handling operator precedence",
+        "Processing left to right"
+      ],
+      correctAnswer: 1,
+      explanation: "Prefix conversion requires **reversing the infix expression** first (while handling parentheses swaps)."
+    },
+    {
+      question: "What is the prefix form of `2 ^ 3 ^ 2`? (^ = exponentiation)",
+      options: [
+        "^ 2 ^ 3 2",
+        "^ ^ 2 3 2",
+        "2 ^ 3 ^ 2",
+        "^ 2 3 ^ 2"
+      ],
+      correctAnswer: 0,
+      explanation: "Exponentiation is right-associative: `2 ^ (3 ^ 2)` → `^ 2 ^ 3 2`."
+    },
+    {
+      question: "Why does prefix notation eliminate the need for parentheses?",
+      options: [
+        "Operators are evaluated in reverse order",
+        "Operator position implicitly defines precedence",
+        "It only supports two operands",
+        "It uses postfix internally"
+      ],
+      correctAnswer: 1,
+      explanation: "Operator order in prefix ensures correct evaluation (e.g., `* + A B - C D` = `(A+B) * (C-D)`)."
+    },
+    {
+      question: "What is the prefix equivalent of `A - B / C + D`?",
+      options: [
+        "+ - A / B C D",
+        "- A / B + C D",
+        "+ / - A B C D",
+        "- + A / B C D"
+      ],
+      correctAnswer: 0,
+      explanation: "`/` has higher precedence: `B / C` → `- A (result)` → `+ (result) D` → `+ - A / B C D`."
+    },
+    {
+      question: "Which data structure is used during infix-to-prefix conversion?",
+      options: [
+        "Queue",
+        "Stack",
+        "Binary Tree",
+        "Hash Table"
+      ],
+      correctAnswer: 1,
+      explanation: "A **stack** manages operators and parentheses during conversion."
+    },
+    {
+      question: "What is the prefix form of `(A + B) * C - D`?",
+      options: [
+        "- * + A B C D",
+        "* + A B - C D",
+        "- + * A B C D",
+        "* - + A B C D"
+      ],
+      correctAnswer: 0,
+      explanation: "Parentheses first: `+ A B` → `* (result) C` → `- (result) D` → `- * + A B C D`."
+    },
+    {
+      question: "How are parentheses handled during infix reversal for prefix conversion?",
+      options: [
+        "They are deleted",
+        "They are kept in the same order",
+        "`(` becomes `)` and vice versa",
+        "They are converted to brackets"
+      ],
+      correctAnswer: 2,
+      explanation: "During reversal, `(` and `)` are swapped to maintain correctness (e.g., `(A+B)` → `)B+A(`)."
+    },
+    {
+      question: "What is the result of evaluating the prefix expression `- * + 2 3 4 5`?",
+      options: [
+        "15",
+        "9",
+        "17",
+        "20"
+      ],
+      correctAnswer: 0,
+      explanation: "Steps: `+ 2 3` → 5; `* 5 4` → 20; `- 20 5` → **15**."
+    }
+];
+
+  return <QuizEngine title="Stack Quiz Challenge" questions={questions} />;
+};
+
+export default StackQuiz;
diff --git a/src/app/visualizer/stack/polish/quiz/PolishQuizClient.jsx b/src/app/visualizer/stack/polish/quiz/PolishQuizClient.jsx
new file mode 100644
index 000000000..16cdf46f7
--- /dev/null
+++ b/src/app/visualizer/stack/polish/quiz/PolishQuizClient.jsx
@@ -0,0 +1,89 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowLeft, Play } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function PolishQuizClient() {
+  const quizzes = [
+    {
+      title: "Postfix Quiz",
+      description: "Test your understanding of Postfix Expression Evaluation, operator precedence, and stack states.",
+      href: "/visualizer/stack/polish/quiz/postfix",
+      filename: "postfix_eval_quiz.js",
+    },
+    {
+      title: "Prefix Quiz",
+      description: "Test your understanding of Prefix Expression Evaluation, right-to-left parsing, and operator applications.",
+      href: "/visualizer/stack/polish/quiz/prefix",
+      filename: "prefix_eval_quiz.js",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-[var(--udemy-text)] dark:text-white transition-colors duration-300 pb-20">
+      
+      {/* Header / Hero */}
+      <section className="relative pt-6 pb-4">
+        <div className="max-w-[1100px] mx-auto px-4">
+          <Link href="/visualizer/quiz">
+            <button className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] dark:text-[var(--color-primary-light)] hover:opacity-85 transition-opacity mb-3">
+              <ArrowLeft size={16} />
+              <span>Back to all quizzes</span>
+            </button>
+          </Link>
+          <h1 className="text-2xl md:text-3xl font-black mb-2">
+            Polish Notation Evaluation Quiz Portal
+          </h1>
+          <p className="text-[14px] text-surface-600 dark:text-surface-400 font-medium">
+            Choose a quiz to test your understanding of Prefix and Postfix evaluation algorithms.
+          </p>
+        </div>
+      </section>
+
+      {/* Grid of Sub-quizzes */}
+      <div className="max-w-4xl mx-auto px-4 mt-8">
+        <div className="grid md:grid-cols-2 gap-6 items-stretch">
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4, delay: index * 0.1, ease: [0.22, 1, 0.36, 1] }}
+              whileHover={{ y: -6, scale: 1.015 }}
+              whileTap={{ scale: 0.985 }}
+              className="group flex flex-col h-full rounded-2xl border border-blue-500/20 dark:border-blue-500/30 bg-white dark:bg-[#1a1a1a] overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
+            >
+              {/* Terminal command execution style top bar */}
+              <div className="flex items-center justify-between px-4 py-2.5 bg-blue-500/10 dark:bg-blue-500/20 border-b border-blue-500/20 dark:border-blue-500/30">
+                <div className="flex items-center gap-1.5 font-mono text-[11px] text-surface-600 dark:text-surface-300">
+                  <span className="text-violet-500 font-bold">$</span>
+                  <span>node {quiz.filename}</span>
+                </div>
+              </div>
+
+              {/* Main Card Content */}
+              <div className="p-6 flex-1 flex flex-col justify-between">
+                <div>
+                  <h2 className="text-[20px] font-extrabold text-surface-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors mb-2">
+                    {quiz.title}
+                  </h2>
+                  <p className="text-[14px] text-surface-600 dark:text-surface-300 leading-relaxed mb-6">
+                    {quiz.description}
+                  </p>
+                </div>
+
+                <Link href={quiz.href} className="block mt-auto w-full">
+                  <button className="w-full h-11 rounded-xl bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-bold text-[14px] flex items-center justify-center gap-2 shadow-sm hover:shadow-md transition-all">
+                    <span>Start Quiz</span>
+                    <Play size={14} className="fill-current" />
+                  </button>
+                </Link>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/stack/polish/quiz/page.jsx b/src/app/visualizer/stack/polish/quiz/page.jsx
new file mode 100644
index 000000000..ee56fbee1
--- /dev/null
+++ b/src/app/visualizer/stack/polish/quiz/page.jsx
@@ -0,0 +1,5 @@
+import PolishQuizClient from "./PolishQuizClient";
+
+export default function Page() {
+  return <PolishQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/stack/polish/quiz/postfix/page.jsx b/src/app/visualizer/stack/polish/quiz/postfix/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/stack/polish/quiz/postfix/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/stack/polish/quiz/postfix/quiz.jsx b/src/app/visualizer/stack/polish/quiz/postfix/quiz.jsx
new file mode 100644
index 000000000..7f6b32593
--- /dev/null
+++ b/src/app/visualizer/stack/polish/quiz/postfix/quiz.jsx
@@ -0,0 +1,107 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const StackQuiz = () => {
+  const questions = [
+    {
+      question: "What is the key characteristic of postfix notation?",
+      options: [
+        "Operators appear before their operands",
+        "Operators appear between their operands",
+        "Operators appear after their operands",
+        "Parentheses dictate evaluation order"
+      ],
+      correctAnswer: 2,
+      explanation: "Postfix notation places operators **after** their operands (e.g., `3 4 +` instead of `3 + 4`)."
+    },
+    {
+      question: "How would the infix expression `(A * B) + C` convert to postfix?",
+      options: [
+        "A B * C +",
+        "A B C * +",
+        "A * B + C",
+        "+ * A B C"
+      ],
+      correctAnswer: 0,
+      explanation: "Parentheses force `A * B` first → `A B *`, then `+ C` → `A B * C +`."
+    },
+    {
+      question: "Which operator has the **highest precedence** in infix-to-postfix conversion?",
+      options: ["+", "*", "^ (exponentiation)", "("],
+      correctAnswer: 3,
+      explanation: "Parentheses `(` have the highest precedence and are handled separately in the stack."
+    },
+    {
+      question: "What is the postfix form of `2 ^ 3 ^ 2`? (Note: `^` = exponentiation)",
+      options: [
+        "2 3 2 ^ ^",
+        "2 3 ^ 2 ^",
+        "2 3 2 ^",
+        "2 3 ^ 2"
+      ],
+      correctAnswer: 1,
+      explanation: "Exponentiation is **right-associative**, so `2 ^ (3 ^ 2)` → `2 3 2 ^ ^`."
+    },
+    {
+      question: "Which data structure is used to convert infix to postfix?",
+      options: ["Queue", "Stack", "Heap", "Linked List"],
+      correctAnswer: 1,
+      explanation: "A **stack** temporarily holds operators and parentheses during conversion."
+    },
+    {
+      question: "What is the postfix equivalent of `A + B * C - D / E`?",
+      options: [
+        "A B C * + D E / -",
+        "A B + C * D E - /",
+        "A B C + * D E / -",
+        "A B * C + D E / -"
+      ],
+      correctAnswer: 0,
+      explanation: "`*` and `/` have higher precedence than `+` and `-`. Steps: `B * C` → `A + (result)` → `D / E` → subtract."
+    },
+    {
+      question: "When converting infix to postfix, what happens when a closing `)` is encountered?",
+      options: [
+        "Push it to the stack",
+        "Pop operators from the stack until `(` is found",
+        "Ignore it",
+        "Add it to the output"
+      ],
+      correctAnswer: 1,
+      explanation: "Pop all operators until `(` is reached (discarding both `(` and `)`)."
+    },
+    {
+      question: "What is the postfix form of `3 + 4 * 5 / 6`?",
+      options: [
+        "3 4 5 * 6 / +",
+        "3 4 5 6 / * +",
+        "3 4 * 5 6 / +",
+        "3 4 + 5 6 / *"
+      ],
+      correctAnswer: 0,
+      explanation: "`*` and `/` have equal precedence (left-to-right): `4 * 5` → `result / 6` → `3 + (result)`."
+    },
+    {
+      question: "Why does postfix notation not need parentheses?",
+      options: [
+        "It uses a stack for evaluation",
+        "Operator position implicitly defines precedence",
+        "It only supports single operations",
+        "It reverses the operands"
+      ],
+      correctAnswer: 1,
+      explanation: "Postfix order ensures operations are evaluated correctly without parentheses (e.g., `A B + C *` vs. `A B C * +`)."
+    },
+    {
+      question: "What is the result of evaluating the postfix expression `5 1 2 + 4 * + 3 -`?",
+      options: ["14", "10", "18", "20"],
+      correctAnswer: 0,
+      explanation: "Steps: `1 2 +` → 3; `3 4 *` → 12; `5 12 +` → 17; `17 3 -` → **14**."
+    }
+];
+
+  return <QuizEngine title="Stack Quiz Challenge" questions={questions} />;
+};
+
+export default StackQuiz;
diff --git a/src/app/visualizer/stack/polish/quiz/prefix/page.jsx b/src/app/visualizer/stack/polish/quiz/prefix/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/stack/polish/quiz/prefix/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/stack/polish/quiz/prefix/quiz.jsx b/src/app/visualizer/stack/polish/quiz/prefix/quiz.jsx
new file mode 100644
index 000000000..3dd1013d5
--- /dev/null
+++ b/src/app/visualizer/stack/polish/quiz/prefix/quiz.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const StackQuiz = () => {
+  const questions = [
+    {
+      question: "What is the defining characteristic of prefix notation?",
+      options: [
+        "Operators appear between operands",
+        "Operators appear after operands",
+        "Operators appear before operands",
+        "Operators are omitted entirely"
+      ],
+      correctAnswer: 2,
+      explanation: "Prefix notation places operators **before** their operands (e.g., `+ 3 4` instead of `3 + 4`)."
+    },
+    {
+      question: "How is the infix expression `A * (B + C)` converted to prefix?",
+      options: [
+        "* A + B C",
+        "A * B + C",
+        "+ * A B C",
+        "* + A B C"
+      ],
+      correctAnswer: 0,
+      explanation: "Parentheses force `B + C` first → `+ B C`, then `* A` → `* A + B C`."
+    },
+    {
+      question: "Which step is unique to infix-to-prefix conversion (compared to postfix)?",
+      options: [
+        "Using a stack for operators",
+        "Reversing the infix expression",
+        "Handling operator precedence",
+        "Processing left to right"
+      ],
+      correctAnswer: 1,
+      explanation: "Prefix conversion requires **reversing the infix expression** first (while handling parentheses swaps)."
+    },
+    {
+      question: "What is the prefix form of `2 ^ 3 ^ 2`? (^ = exponentiation)",
+      options: [
+        "^ 2 ^ 3 2",
+        "^ ^ 2 3 2",
+        "2 ^ 3 ^ 2",
+        "^ 2 3 ^ 2"
+      ],
+      correctAnswer: 0,
+      explanation: "Exponentiation is right-associative: `2 ^ (3 ^ 2)` → `^ 2 ^ 3 2`."
+    },
+    {
+      question: "Why does prefix notation eliminate the need for parentheses?",
+      options: [
+        "Operators are evaluated in reverse order",
+        "Operator position implicitly defines precedence",
+        "It only supports two operands",
+        "It uses postfix internally"
+      ],
+      correctAnswer: 1,
+      explanation: "Operator order in prefix ensures correct evaluation (e.g., `* + A B - C D` = `(A+B) * (C-D)`)."
+    },
+    {
+      question: "What is the prefix equivalent of `A - B / C + D`?",
+      options: [
+        "+ - A / B C D",
+        "- A / B + C D",
+        "+ / - A B C D",
+        "- + A / B C D"
+      ],
+      correctAnswer: 0,
+      explanation: "`/` has higher precedence: `B / C` → `- A (result)` → `+ (result) D` → `+ - A / B C D`."
+    },
+    {
+      question: "Which data structure is used during infix-to-prefix conversion?",
+      options: [
+        "Queue",
+        "Stack",
+        "Binary Tree",
+        "Hash Table"
+      ],
+      correctAnswer: 1,
+      explanation: "A **stack** manages operators and parentheses during conversion."
+    },
+    {
+      question: "What is the prefix form of `(A + B) * C - D`?",
+      options: [
+        "- * + A B C D",
+        "* + A B - C D",
+        "- + * A B C D",
+        "* - + A B C D"
+      ],
+      correctAnswer: 0,
+      explanation: "Parentheses first: `+ A B` → `* (result) C` → `- (result) D` → `- * + A B C D`."
+    },
+    {
+      question: "How are parentheses handled during infix reversal for prefix conversion?",
+      options: [
+        "They are deleted",
+        "They are kept in the same order",
+        "`(` becomes `)` and vice versa",
+        "They are converted to brackets"
+      ],
+      correctAnswer: 2,
+      explanation: "During reversal, `(` and `)` are swapped to maintain correctness (e.g., `(A+B)` → `)B+A(`)."
+    },
+    {
+      question: "What is the result of evaluating the prefix expression `- * + 2 3 4 5`?",
+      options: [
+        "15",
+        "9",
+        "17",
+        "20"
+      ],
+      correctAnswer: 0,
+      explanation: "Steps: `+ 2 3` → 5; `* 5 4` → 20; `- 20 5` → **15**."
+    }
+];
+
+  return <QuizEngine title="Stack Quiz Challenge" questions={questions} />;
+};
+
+export default StackQuiz;
diff --git a/src/app/visualizer/stack/push-pop/AlgorithmClient.jsx b/src/app/visualizer/stack/push-pop/AlgorithmClient.jsx
new file mode 100644
index 000000000..89cbd81e4
--- /dev/null
+++ b/src/app/visualizer/stack/push-pop/AlgorithmClient.jsx
@@ -0,0 +1,33 @@
+import Animation from "@/app/visualizer/stack/push-pop/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/stack/push-pop/content";
+import Code from "@/app/visualizer/stack/push-pop/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Stack", "Push & Pop")}
+      title="Push & Pop"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other operations"
+          links={[
+            { text: "Peek", url: "/visualizer/stack/peek" },
+            { text: "Is Empty", url: "/visualizer/stack/isempty" },
+            { text: "Is Full", url: "/visualizer/stack/isfull" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/stack/push-pop/animation.jsx b/src/app/visualizer/stack/push-pop/animation.jsx
new file mode 100644
index 000000000..47c165457
--- /dev/null
+++ b/src/app/visualizer/stack/push-pop/animation.jsx
@@ -0,0 +1,347 @@
+"use client";
+
+import React, { useState, useMemo, useEffect } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { pushGenerator, popGenerator } from "@/features/algorithms/stack/stackLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import ResetButton from "@/app/components/ui/resetButton";
+
+const StackVisualizer = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [capacityInput, setCapacityInput] = useState("");
+  const [capacity, setCapacity] = useState(null);
+  const [stack, setStack] = useState([]);
+  const [pendingOp, setPendingOp] = useState(null); // { type: 'push', value: string } | { type: 'pop' }
+
+  const frames = useMemo(() => {
+    if (!pendingOp) return [];
+    if (pendingOp.type === "push") {
+      return Array.from(pushGenerator(stack, pendingOp.value, capacity));
+    } else {
+      return Array.from(popGenerator(stack));
+    }
+  }, [stack, pendingOp, capacity]);
+
+  const engine = useAnimationEngine({ steps: frames, initialSpeed: 800 });
+
+  const push = () => {
+    if (!inputValue || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: "push", value: inputValue });
+    engine.reset();
+    engine.play();
+  };
+
+  const pop = () => {
+    if (stack.length === 0 || engine.isPlaying || pendingOp) return;
+    setPendingOp({ type: "pop" });
+    engine.reset();
+    engine.play();
+  };
+
+  const handleReset = () => {
+    setInputValue("");
+    setStack([]);
+    setPendingOp(null);
+    setCapacity(null);
+    setCapacityInput("");
+    engine.reset();
+  };
+
+  const handleSetCapacity = () => {
+    const size = parseInt(capacityInput, 10);
+    if (isNaN(size) || size < 1 || size > 10) {
+      alert("Please enter a valid capacity between 1 and 10.");
+      return;
+    }
+    setCapacity(size);
+    setCapacityInput("");
+  };
+
+  useVisualizerReset(handleReset);
+
+  const togglePlay = () => {
+    if (engine.currentStep === frames.length - 1 && frames.length > 0) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.type === "complete") {
+        setStack(finalFrame.stack);
+      }
+      setPendingOp(null);
+      engine.reset();
+    } else if (engine.isPlaying) {
+      engine.pause();
+    } else {
+      engine.play();
+    }
+  };
+
+  useEffect(() => {
+    if (
+      engine.currentStep === frames.length - 1 &&
+      frames.length > 0 &&
+      !engine.isPlaying
+    ) {
+      const finalFrame = frames[frames.length - 1];
+      if (finalFrame && finalFrame.type === "complete") {
+        setStack(finalFrame.stack);
+        setPendingOp(null);
+        if (pendingOp?.type === "push") setInputValue("");
+        engine.reset();
+      } else if (finalFrame && finalFrame.type === "error") {
+        setPendingOp(null);
+        engine.reset();
+      }
+    }
+  }, [engine.currentStep, frames, engine.isPlaying, engine, pendingOp]);
+
+  useVisualizerKeyboard({
+    onStart: togglePlay,
+    onTogglePlayPause: togglePlay,
+    sorting: engine.isPlaying,
+    onReset: handleReset,
+    speed: engine.speed / 1000,
+    onSpeedChange: (s) => engine.setSpeed(s * 1000),
+  });
+
+  const currentFrame =
+    frames.length > 0 && engine.currentStep >= 0
+      ? frames[engine.currentStep]
+      : {
+          type: "idle",
+          stack: stack,
+          message: capacity === null ? "Please set a valid stack capacity first." : "Ready for operations!",
+        };
+
+  const displayStack = currentFrame.stack || stack;
+
+  const slots = [];
+  if (capacity !== null) {
+    // We want index 0 to be the bottom visually, or index capacity-1 to be the top.
+    // In our logic, index 0 is TOP.
+    // displayStack[0] is Top element.
+    // displayStack[displayStack.length - 1] is Bottom element.
+    for (let i = capacity - 1; i >= 0; i--) {
+      // i represents the index from bottom (0) to top (capacity - 1)
+      const isFilled = i < displayStack.length;
+      // If displayStack length is 3 (indices 0,1,2). Bottom is index 2, top is index 0.
+      // For visual index i=0 (bottom), we want displayStack[length - 1].
+      const itemValue = isFilled ? displayStack[displayStack.length - 1 - i] : null;
+      slots.push({ index: i, isFilled, value: itemValue });
+    }
+  }
+
+  return (
+    <VisualizerInteractiveLayout>
+      <p className="text-center text-lg text-[#6b7280] dark:text-[#9ca3af]">
+        Visualize the LIFO (Last In, First Out) principle
+      </p>
+
+      <VisualizerCard className="mb-0">
+        {capacity === null ? (
+          <div className="flex flex-col gap-4">
+            <div className="flex gap-4">
+              <input
+                type="number"
+                min="1"
+                max="10"
+                value={capacityInput}
+                onChange={(e) => setCapacityInput(e.target.value)}
+                className="flex-1 rounded-lg border p-3 dark:bg-gray-700"
+                placeholder="Enter capacity (1-10)..."
+                onKeyDown={(e) => e.key === "Enter" && handleSetCapacity()}
+              />
+              <button
+                onClick={handleSetCapacity}
+                className="rounded-lg bg-primary px-6 py-3 text-white transition hover:bg-primary-dark"
+              >
+                Set Capacity
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-4">
+            <div className="flex gap-4">
+              <input
+                type="text"
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                className="flex-1 rounded-lg border p-3 dark:bg-gray-700"
+                placeholder="Enter value"
+                disabled={engine.isPlaying || pendingOp !== null || displayStack.length >= capacity}
+                onKeyDown={(e) => e.key === "Enter" && push()}
+              />
+              <button
+                onClick={push}
+                disabled={engine.isPlaying || !inputValue || pendingOp !== null || displayStack.length >= capacity}
+                className={`w-32 rounded-lg px-6 py-3 text-white transition ${
+                  engine.isPlaying || !inputValue || pendingOp !== null || displayStack.length >= capacity
+                    ? "bg-gray-400 cursor-not-allowed"
+                    : "bg-primary hover:bg-primary-dark"
+                }`}
+              >
+                {engine.isPlaying && pendingOp?.type === "push" ? "Pushing..." : "Push"}
+              </button>
+            </div>
+            <div className="flex gap-4">
+              <button
+                onClick={pop}
+                disabled={engine.isPlaying || displayStack.length === 0 || pendingOp !== null}
+                className="flex-1 rounded-lg border border-black px-6 py-3 text-black transition hover:bg-gray-100 disabled:opacity-50 dark:border-white dark:text-white dark:hover:bg-gray-700"
+              >
+                {engine.isPlaying && pendingOp?.type === "pop" ? "Popping..." : "Pop"}
+              </button>
+              <ResetButton onReset={handleReset} isAnimating={engine.isPlaying && pendingOp === null} />
+            </div>
+          </div>
+        )}
+
+        {frames.length > 0 && (
+          <div className="mt-6">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={togglePlay}
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) => engine.setSpeed(s * 1000)}
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={() => {
+                engine.reset();
+              }}
+              progressText={`${engine.currentStep + 1} / ${frames.length || 1}`}
+              disabled={frames.length === 0}
+            />
+          </div>
+        )}
+      </VisualizerCard>
+
+      <div className="w-full mb-6 max-w-4xl mx-auto p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm text-center min-h-[60px] flex items-center justify-center">
+        <p className={`font-medium ${currentFrame.type === 'error' ? 'text-red-500' : 'text-gray-800 dark:text-gray-200'}`}>
+          {currentFrame.message || currentFrame.operation}
+        </p>
+      </div>
+
+      <VisualizerCard>
+        {capacity === null ? (
+          <div className="flex flex-col items-center justify-center min-h-[300px] border border-dashed border-slate-700/50 rounded-2xl p-8 bg-slate-900/5">
+            <span className="text-sm font-semibold text-slate-500 text-center">
+              Define stack capacity above to initialize the stack structure
+            </span>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center min-h-[300px]">
+            <div className="mb-6 text-center text-sm font-semibold text-slate-500">
+              Stack Status:{" "}
+              <span
+                className={
+                  displayStack.length >= capacity
+                    ? "text-rose-500 font-bold"
+                    : "text-[#a435f0] font-bold"
+                }
+              >
+                {displayStack.length === 0
+                  ? "Empty"
+                  : displayStack.length >= capacity
+                  ? "Full"
+                  : "Active"}
+              </span>
+              {" | "}Capacity:{" "}
+              <span className="text-slate-300 font-bold">{displayStack.length}</span>/
+              <span className="text-slate-400 font-bold">{capacity}</span>
+            </div>
+
+            <div className="w-full max-w-md space-y-1.5 relative">
+              {/* If pushing, animate the new element coming down */}
+              {currentFrame.type === "start" && pendingOp?.type === "push" && (
+                <div className="absolute left-0 right-0 -top-16 flex items-center justify-center gap-4 animate-bounce">
+                  <div className="w-16"></div>
+                  <div className="w-48 text-center text-xs font-bold text-[#a435f0]/80">
+                    Inserting...
+                  </div>
+                  <div className="w-20"></div>
+                </div>
+              )}
+              {/* If popping, animate the popped element going up */}
+              {currentFrame.type === "start" && pendingOp?.type === "pop" && (
+                <div className="absolute left-0 right-0 -top-16 flex items-center justify-center gap-4 opacity-50 scale-110 -translate-y-4 transition-all duration-500">
+                   <div className="w-16"></div>
+                   <div className="w-48 text-center text-xs font-bold text-rose-500">
+                    Removing...
+                  </div>
+                  <div className="w-20"></div>
+                </div>
+              )}
+
+              {slots.map((slot) => {
+                const isTop = slot.index === displayStack.length - 1;
+                
+                // Animation states based on engine
+                let itemClass = "bg-slate-800/40 border-slate-700 text-slate-300";
+                
+                if (isTop) {
+                   if (currentFrame.type === 'start' && pendingOp?.type === 'pop') {
+                       itemClass = "bg-rose-500/20 border-rose-500 text-rose-300 scale-105 shadow-rose-500/20 shadow-lg";
+                   } else if (currentFrame.type === 'complete' && pendingOp?.type === 'push') {
+                       itemClass = "bg-[#a435f0] border-[#a435f0] text-white scale-110 shadow-[#a435f0]/30 shadow-xl";
+                   } else {
+                       itemClass = "bg-[#a435f0]/10 border-[#a435f0] text-slate-100 shadow-[#a435f0]/10 shadow-md";
+                   }
+                }
+
+                return (
+                  <div key={slot.index} className="flex items-center gap-4 justify-center">
+                    <div className="w-16 text-right text-xs font-bold text-slate-400 dark:text-slate-500">
+                      Index [{slot.index}]
+                    </div>
+
+                    <div className="w-48 relative">
+                      {slot.isFilled ? (
+                        <div
+                          className={`p-3 border-2 rounded-xl text-center font-medium transition-all duration-300 ${itemClass}`}
+                        >
+                          <div>{slot.value}</div>
+                        </div>
+                      ) : (
+                        <div className="p-3 border border-dashed border-slate-700/50 rounded-xl text-center text-slate-600 font-medium bg-slate-900/10 dark:bg-slate-950/20 transition-all duration-300">
+                          <div className="text-xs uppercase tracking-wider text-slate-600/80">
+                            Empty
+                          </div>
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="w-20 text-left">
+                      {isTop ? (
+                        <span className="text-xs font-extrabold text-[#a435f0] flex items-center gap-1 animate-pulse transition-all duration-300">
+                          ← top
+                        </span>
+                      ) : (
+                        <span className="text-xs text-transparent">top</span>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+
+              {displayStack.length === 0 && (
+                <div className="flex items-center gap-4 justify-center pt-2">
+                  <div className="w-16"></div>
+                  <div className="w-48 text-center text-xs font-bold text-[#a435f0]/80">
+                    top = -1 (Empty)
+                  </div>
+                  <div className="w-20"></div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+};
+
+export default StackVisualizer;
diff --git a/src/app/visualizer/stack/push-pop/codeBlock.jsx b/src/app/visualizer/stack/push-pop/codeBlock.jsx
new file mode 100644
index 000000000..5c893fd65
--- /dev/null
+++ b/src/app/visualizer/stack/push-pop/codeBlock.jsx
@@ -0,0 +1,220 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for Stack Push & Pop ──────────────────────────
+const codeExamples = {
+  javascript: `// Stack Push & Pop
+class Stack {
+    constructor() {
+        this.items = [];
+        this.top = -1;
+        this.MAX_SIZE = 10;
+    }
+    push(element) {
+        if (this.top >= this.MAX_SIZE - 1) {
+            console.log("Stack Overflow");
+            return;
+        }
+        this.items[++this.top] = element;
+        console.log("Pushed:", element);
+    }
+    pop() {
+        if (this.top < 0) {
+            console.log("Stack Underflow");
+            return -1;
+        }
+        const element = this.items[this.top--];
+        console.log("Popped:", element);
+        return element;
+    }
+    display() {
+        console.log(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 Push & Pop
+class Stack:
+    def __init__(self):
+        self.items = []
+        self.top = -1
+        self.MAX_SIZE = 10
+    def push(self, element):
+        if self.top >= self.MAX_SIZE - 1:
+            print("Stack Overflow")
+            return
+        self.top += 1
+        self.items.append(element)
+        print("Pushed:", element)
+    def pop(self):
+        if self.top < 0:
+            print("Stack Underflow")
+            return -1
+        element = self.items.pop()
+        self.top -= 1
+        print("Popped:", element)
+        return element
+    def display(self):
+        print(self.items)
+stack = Stack()
+stack.push(10)
+stack.push(20)
+stack.push(30)
+stack.display()
+stack.pop()
+stack.display()`,
+
+  java: `// Stack Push & Pop
+import java.util.ArrayList;
+class Stack {
+    ArrayList<Integer> items;
+    int top;
+    int MAX_SIZE = 10;
+    Stack() {
+        items = new ArrayList<>();
+        top = -1;
+    }
+    void push(int element) {
+        if (top >= MAX_SIZE - 1) {
+            System.out.println("Stack Overflow");
+            return;
+        }
+        items.add(++top, element);
+        System.out.println("Pushed:" + element);
+    }
+    int pop() {
+        if (top < 0) {
+            return -1;
+        }
+        int element = items.remove(top--);
+        return element;
+    }
+    void display() {
+        System.out.println(items);
+    }
+    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 Push & Pop
+#include<stdio.h>
+#define MAX 10
+typedef struct {
+    int items[MAX];
+    int top;
+} Stack;
+void initialize(Stack* s) {
+    s->top = -1;
+}
+void push(Stack* s, int element) {
+    if (s->top >= MAX - 1) {
+        printf("Stack Overflow\\n");
+        return;
+    }
+    s->items[++s->top] = element;
+}
+int pop(Stack* s) {
+    if (s->top < 0) {
+        printf("Stack Underflow\\n");
+        return -1;
+    }
+    return s->items[s->top--];
+}
+void display(Stack* s) {
+    for (int i = 0; i <= s->top; i++) {
+        printf("%d ", s->items[i]);
+    }
+}
+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 Push & Pop
+#include<iostream>
+#include<vector>
+using namespace std;
+class Stack {
+private:
+    vector<int> items;
+    int top;
+    int MAX_SIZE = 10;
+public:
+    Stack() {
+        top = -1;
+    }
+    void push(int element) {
+        if (top >= MAX_SIZE - 1) {
+            cout << "Stack Overflow";
+            return;
+        }
+        items.push_back(element);
+        top++;
+    }
+    int pop() {
+        if (top < 0) {
+            return -1;
+        }
+        int value = items.back();
+        items.pop_back();
+        top--;
+        return value;
+    }
+    void display() {
+        for (int item : items) {
+            cout << item << " ";
+        }
+    }
+};
+int main() {
+    Stack stack;
+    stack.push(10);
+    stack.push(20);
+    stack.push(30);
+    stack.display();
+    stack.pop();
+    stack.display();
+    return 0;
+}`
+};
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript: 'stackPushPop.js',
+    python: 'stack_push_pop.py',
+    java: 'Stack.java',
+    c: 'stack_push_pop.c',
+    cpp: 'stack_push_pop.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/stack/push-pop/content.jsx b/src/app/visualizer/stack/push-pop/content.jsx
new file mode 100644
index 000000000..0eebbb83d
--- /dev/null
+++ b/src/app/visualizer/stack/push-pop/content.jsx
@@ -0,0 +1,244 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraphs = [
+    `Push and Pop are the two fundamental operations in stack data structure. Stack follows LIFO (Last In First Out) principle - the last element added is the first one to be removed.`,
+    `Push and Pop operations are fundamental to stack functionality. While simple to implement, stacks are powerful data structures used in many algorithms and system designs.`,
+  ];
+
+  const examplePush = [
+    { points: "Start with empty stack: [ ]" },
+    { points: "Push 5: [5]" },
+    { points: "Push 3: [3, 5]" },
+    { points: "Push 7: [7, 3, 5]" },
+  ];
+
+  const pushComplexity = [
+    { points: "Time Complexity: O(1)" },
+    { points: "Space Complexity: O(1)" },
+  ];
+
+  const examplePop = [
+    { points: "Current stack: [7, 3, 5]" },
+    { points: "Pop → returns 7: [3, 5]" },
+    { points: "Pop → returns 3: [5]" },
+    { points: "Pop → returns 5: [ ]" },
+  ];
+
+  const popComplexity = [
+    { points: "Time Complexity: O(1)" },
+    { points: "Space Complexity: O(1)" },
+  ];
+
+  {
+    /* applications */
+  }
+  const applications = [
+    {
+      points: "Function call management in programming languages (call stack)",
+    },
+    { points: "Undo/Redo operations in text editors" },
+    { points: "Back/Forward navigation in web browsers" },
+    { points: "Expression evaluation and syntax parsing" },
+    { points: "Memory management" },
+  ];
+
+  {
+    /* underflow and overflow */
+  }
+  const flows = [{ title: "Stack Underflow" }, { title: "Stack Overflow" }];
+
+  const flowsDetails = [
+    { detail: "Trying to pop from an empty stack" },
+    {
+      detail: "Trying to push to a full stack (in fixed-size implementations)",
+    },
+  ];
+
+  const combineData = flows.map((item, index) => ({
+    title: item.title,
+    detail: flowsDetails[index].detail,
+  }));
+
+  return (
+    <main className="max-w-4xl mx-auto">

+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+        {/* What is Stack Push & Pop */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is Stack Push & Pop?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              {paragraphs[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* Push Operation */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Push Operation
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Adds an element to the top of the stack.
+            </p>
+            <p className="text-[#374151] dark:text-[#d1d5db] font-medium mb-2">
+              Example: Pushing elements onto a stack
+            </p>
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {examplePush.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+            <ul className="mt-4 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {pushComplexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                    {item.points.split(":")[0]}:
+                  </span>
+                  <span className="ml-2">{item.points.split(":")[1]}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Pop Operation */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Pop Operation
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-[#374151] dark:text-[#d1d5db] mb-4 leading-relaxed">
+              Removes and returns the topmost element from the stack.
+            </p>
+            <p className="text-[#374151] dark:text-[#d1d5db] font-medium mb-2">
+              Example: Popping elements from a stack
+            </p>
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {examplePop.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+            <ul className="mt-4 space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {popComplexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-mono">
+                    {item.points.split(":")[0]}:
+                  </span>
+                  <span className="ml-2">{item.points.split(":")[1]}</span>
+                </li>
+              ))}
+            </ul>
+
+            <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => 1}
+                averageCase={(n) => 1}
+                worstCase={(n) => 1}
+                maxN={25}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Stack Underflow & Overflow */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Stack Underflow & Overflow
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {combineData.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  <span className="font-semibold">{item.title}:</span>{" "}
+                  {item.detail}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Real-world Applications */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Real-world Applications
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {applications.map((items, index) => (
+                <li
+                  key={index}
+                  className="text-[#374151] dark:text-[#d1d5db] pl-2"
+                >
+                  {items.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                {paragraphs[1]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+</main>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/stack/push-pop/quiz.jsx b/src/app/visualizer/stack/push-pop/quiz.jsx
new file mode 100644
index 000000000..8742c5c8e
--- /dev/null
+++ b/src/app/visualizer/stack/push-pop/quiz.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const StackQuiz = () => {
+  const questions = [
+    {
+      question: "What principle does the stack data structure follow?",
+      options: [
+        "FIFO (First In First Out)",
+        "LIFO (Last In First Out)",
+        "Random Access",
+        "Priority Ordering"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Stack follows LIFO (Last In First Out) principle - the last element added is the first one to be removed.",
+    },
+    {
+      question: "What is the time complexity of push and pop operations in a stack?",
+      options: ["O(n)", "O(log n)", "O(1)", "O(n²)"],
+      correctAnswer: 2,
+      explanation:
+        "Both push and pop operations in a stack have O(1) time complexity as they only involve operations at the top of the stack.",
+    },
+    {
+      question: "What happens when you try to pop from an empty stack?",
+      options: [
+        "Stack Overflow",
+        "Stack Underflow",
+        "Null Pointer Exception",
+        "The stack resizes itself"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Attempting to pop from an empty stack results in stack underflow, which is an error condition.",
+    },
+    {
+      question: "After pushing 10, 20, and 30 onto an empty stack, what will be the result of two consecutive pop operations?",
+      options: [
+        "10 then 20",
+        "20 then 10",
+        "30 then 20",
+        "30 then 10"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "The stack will be [30, 20, 10] after pushes. First pop returns 30, second pop returns 20.",
+    },
+    {
+      question: "What is the space complexity of stack operations?",
+      options: ["O(n)", "O(1)", "O(log n)", "Depends on implementation"],
+      correctAnswer: 1,
+      explanation:
+        "Each push/pop operation itself uses constant space (O(1)), though the overall stack may use O(n) space.",
+    },
+    {
+      question: "Which of the following is NOT a typical application of stacks?",
+      options: [
+        "Function call management",
+        "Undo operations in text editors",
+        "CPU scheduling",
+        "Expression evaluation"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "CPU scheduling typically uses queues rather than stacks. Stacks are used in function calls, undo operations, and expression evaluation.",
+    },
+    {
+      question: "What happens when you push to a full stack (in fixed-size implementation)?",
+      options: [
+        "The stack automatically resizes",
+        "Stack Overflow",
+        "The oldest element is removed",
+        "The operation is queued"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Attempting to push to a full stack in fixed-size implementations results in stack overflow.",
+    },
+    {
+      question: "In a stack implementation, which end is used for both push and pop operations?",
+      options: [
+        "The front end",
+        "The rear end",
+        "The top end",
+        "Any random end"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "All stack operations (push and pop) happen at the top end of the stack.",
+    },
+    {
+      question: "Which data structure would be most appropriate to implement an undo feature?",
+      options: [
+        "Queue",
+        "Stack",
+        "Linked List",
+        "Tree"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "A stack is ideal for undo operations as it naturally follows the LIFO principle - the last action should be the first one undone.",
+    },
+    {
+      question: "What would be the result of pushing 'A', then 'B', then popping, then pushing 'C' to an empty stack?",
+      options: [
+        "[A, B, C]",
+        "[C, A]",
+        "[A, C]",
+        "[B, C]"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Operations: push A → [A], push B → [B, A], pop → returns B: [A], push C → [C, A].",
+    },
+  ];
+
+  return <QuizEngine title="Stack Quiz Challenge" questions={questions} />;
+};
+
+export default StackQuiz;
diff --git a/src/app/visualizer/stack/quiz/StackQuizClient.jsx b/src/app/visualizer/stack/quiz/StackQuizClient.jsx
new file mode 100644
index 000000000..cdb94793e
--- /dev/null
+++ b/src/app/visualizer/stack/quiz/StackQuizClient.jsx
@@ -0,0 +1,101 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowLeft, Play } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function StackQuizClient() {
+  const quizzes = [
+    {
+      title: "Push & Pop Quiz",
+      href: "/visualizer/stack/quiz/push-pop",
+      filename: "push_pop_quiz.js",
+      description: "Test your understanding of push and pop operations, indexing modifications, and order constraints (LIFO).",
+    },
+    {
+      title: "Peek Quiz",
+      href: "/visualizer/stack/quiz/peek",
+      filename: "peek_quiz.js",
+      description: "Test your understanding of inspecting the top element without removing it, index bounds, and error handling.",
+    },
+    {
+      title: "Is Empty Quiz",
+      href: "/visualizer/stack/quiz/isempty",
+      filename: "is_empty_quiz.js",
+      description: "Test your knowledge of stack emptiness validations, underflow conditions, and pointer checks.",
+    },
+    {
+      title: "Is Full Quiz",
+      href: "/visualizer/stack/quiz/isfull",
+      filename: "is_full_quiz.js",
+      description: "Test your understanding of overflow checks, maximum capacity bounds, and fixed-size limitations.",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-[var(--udemy-text)] dark:text-white transition-colors duration-300 pb-20">
+      
+      {/* Header / Hero */}
+      <section className="relative pt-6 pb-4">
+        <div className="max-w-[1100px] mx-auto px-4">
+          <Link href="/visualizer/quiz">
+            <button className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] dark:text-[var(--color-primary-light)] hover:opacity-85 transition-opacity mb-3">
+              <ArrowLeft size={16} />
+              <span>Back to all quizzes</span>
+            </button>
+          </Link>
+          <h1 className="text-2xl md:text-3xl font-black mb-2">
+            Stack Operations Quiz Portal
+          </h1>
+          <p className="text-[14px] text-surface-600 dark:text-surface-400 font-medium">
+            Test your understanding of Push, Pop, Peek, Is Empty, and Is Full stack operations.
+          </p>
+        </div>
+      </section>
+
+      {/* Grid of Sub-quizzes */}
+      <div className="max-w-4xl mx-auto px-4 mt-8">
+        <div className="grid md:grid-cols-2 gap-6 items-stretch">
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4, delay: index * 0.1, ease: [0.22, 1, 0.36, 1] }}
+              whileHover={{ y: -6, scale: 1.015 }}
+              whileTap={{ scale: 0.985 }}
+              className="group flex flex-col h-full rounded-2xl border border-fuchsia-500/20 dark:border-fuchsia-500/30 bg-white dark:bg-[#1a1a1a] overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
+            >
+              {/* Terminal command execution style top bar */}
+              <div className="flex items-center justify-between px-4 py-2.5 bg-fuchsia-500/10 dark:bg-fuchsia-500/20 border-b border-fuchsia-500/20 dark:border-fuchsia-500/30">
+                <div className="flex items-center gap-1.5 font-mono text-[11px] text-surface-600 dark:text-surface-300">
+                  <span className="text-violet-500 font-bold">$</span>
+                  <span>node {quiz.filename}</span>
+                </div>
+              </div>
+
+              {/* Main Card Content */}
+              <div className="p-6 flex-1 flex flex-col justify-between">
+                <div>
+                  <h2 className="text-[20px] font-extrabold text-surface-900 dark:text-white group-hover:text-fuchsia-600 dark:group-hover:text-fuchsia-400 transition-colors mb-2">
+                    {quiz.title}
+                  </h2>
+                  <p className="text-[14px] text-surface-600 dark:text-surface-300 leading-relaxed mb-6">
+                    {quiz.description}
+                  </p>
+                </div>
+
+                <Link href={quiz.href} className="block mt-auto w-full">
+                  <button className="w-full h-11 rounded-xl bg-fuchsia-600 hover:bg-fuchsia-700 dark:bg-fuchsia-500 dark:hover:bg-fuchsia-600 text-white font-bold text-[14px] flex items-center justify-center gap-2 shadow-sm hover:shadow-md transition-all">
+                    <span>Start Quiz</span>
+                    <Play size={14} className="fill-current" />
+                  </button>
+                </Link>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/stack/quiz/isempty/page.jsx b/src/app/visualizer/stack/quiz/isempty/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/stack/quiz/isempty/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/stack/quiz/isempty/quiz.jsx b/src/app/visualizer/stack/quiz/isempty/quiz.jsx
new file mode 100644
index 000000000..b94f8ecc9
--- /dev/null
+++ b/src/app/visualizer/stack/quiz/isempty/quiz.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const StackQuiz = () => {
+  const questions = [
+    {
+      question: "What does the isEmpty operation in a stack determine?",
+      options: [
+        "The total capacity of the stack",
+        "Whether the stack contains any elements",
+        "The position of the top element",
+        "The time complexity of other operations"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "isEmpty checks if the stack has zero elements (true if empty, false otherwise).",
+    },
+    {
+      question: "What does isEmpty() return for a stack with elements [10, 20]?",
+      options: ["true", "false", "null", "10"],
+      correctAnswer: 1,
+      explanation:
+        "The stack contains elements, so isEmpty returns false.",
+    },
+    {
+      question: "Why is isEmpty crucial before calling pop() or peek()?",
+      options: [
+        "To improve time complexity",
+        "To prevent stack underflow errors",
+        "To resize the stack",
+        "To count the elements"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Checking isEmpty first avoids errors when attempting to pop/peek an empty stack.",
+    },
+    {
+      question: "What is the time complexity of isEmpty?",
+      options: ["O(n)", "O(1)", "O(log n)", "O(n²)"],
+      correctAnswer: 1,
+      explanation:
+        "isEmpty runs in O(1) time as it only checks if size/length equals zero.",
+    },
+    {
+      question: "How would you implement isEmpty for a stack stored in an array?",
+      options: [
+        "Check if array[0] === null",
+        "Return array.length === 0",
+        "Compare top and bottom indices",
+        "Count all non-zero elements"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "For array-based stacks, isEmpty simply verifies if the length is zero.",
+    },
+    {
+  question: "What value does isEmpty() return when the stack has no elements?",
+  options: [
+    "true",
+    "false",
+    "0",
+    "-1",
+  ],
+  correctAnswer: 0,
+  explanation:
+    "The isEmpty() operation returns true when the stack contains no elements.",
+},
+{
+  question: "What is the time complexity of the isEmpty() operation?",
+  options: [
+    "O(1)",
+    "O(log N)",
+    "O(N)",
+    "O(N²)",
+  ],
+  correctAnswer: 0,
+  explanation:
+    "Checking whether a stack is empty only requires examining the top pointer or size, so it takes constant time.",
+},
+{
+  question: "Which condition is commonly used to check whether an array-based stack is empty?",
+  options: [
+    "top == -1",
+    "top == size",
+    "top > size",
+    "top == 0",
+  ],
+  correctAnswer: 0,
+  explanation:
+    "In an array implementation, the stack is empty when the top index is -1.",
+},
+{
+  question: "Why is the isEmpty() operation important before performing pop()?",
+  options: [
+    "To increase the stack size",
+    "To prevent stack underflow",
+    "To sort the stack",
+    "To reverse the stack",
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Checking isEmpty() before pop() prevents attempting to remove an element from an empty stack, avoiding stack underflow.",
+},
+{
+  question: "Which stack operation commonly uses isEmpty() as a safety check?",
+  options: [
+    "Pop",
+    "Peek",
+    "Both Pop and Peek",
+    "Push",
+  ],
+  correctAnswer: 2,
+  explanation:
+    "Both pop() and peek() should first verify that the stack is not empty before accessing the top element.",
+},
+  ];
+
+  return <QuizEngine title="Stack Quiz Challenge" questions={questions} />;
+};
+
+export default StackQuiz;
diff --git a/src/app/visualizer/stack/quiz/isfull/page.jsx b/src/app/visualizer/stack/quiz/isfull/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/stack/quiz/isfull/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/stack/quiz/isfull/quiz.jsx b/src/app/visualizer/stack/quiz/isfull/quiz.jsx
new file mode 100644
index 000000000..165389eef
--- /dev/null
+++ b/src/app/visualizer/stack/quiz/isfull/quiz.jsx
@@ -0,0 +1,127 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const StackQuiz = () => {
+  const questions = [
+    {
+      question: "What is the primary purpose of the 'isFull' operation in a stack?",
+      options: [
+        "To count the number of elements in the stack",
+        "To check if the stack has reached its maximum capacity",
+        "To remove the top element when the stack is full",
+        "To dynamically resize the stack"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The 'isFull' operation checks whether a fixed-size stack can accept more elements (returns true if full).",
+    },
+    {
+      question: "For which type of stack implementation is 'isFull' most relevant?",
+      options: [
+        "Dynamic stacks (e.g., linked lists)",
+        "Fixed-size stacks (e.g., arrays)",
+        "Both equally",
+        "Stacks with unlimited capacity"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "'isFull' is critical for fixed-size implementations (like arrays) to prevent overflow. Dynamic stacks rarely need it.",
+    },
+    {
+      question: "What does isFull() return for a dynamic stack (no fixed size)?",
+      options: [
+        "Always true",
+        "Always false",
+        "Depends on current elements",
+        "Throws an error"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Dynamic stacks (e.g., linked lists) can theoretically grow indefinitely, so isFull() typically returns false.",
+    },
+    {
+      question: "Given a stack with max capacity 3: [8, 5], what does isFull() return?",
+      options: ["true", "false", "null", "Throws overflow error"],
+      correctAnswer: 1,
+      explanation:
+        "The stack has 2/3 elements, so isFull() returns false (not yet full).",
+    },
+    {
+      question: "Why is 'isFull' crucial before push operations in fixed-size stacks?",
+      options: [
+        "To improve time complexity",
+        "To prevent stack overflow errors",
+        "To count elements efficiently",
+        "To convert the stack to dynamic"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Checking isFull() before push() avoids overflow errors in fixed-capacity stacks.",
+    },
+    {
+  question: "What value does isFull() return when the stack has reached its maximum capacity?",
+  options: [
+    "true",
+    "false",
+    "-1",
+    "0",
+  ],
+  correctAnswer: 0,
+  explanation:
+    "The isFull() operation returns true when no more elements can be pushed onto the stack.",
+},
+{
+  question: "In an array-based stack of size N, when is the stack considered full?",
+  options: [
+    "top == N",
+    "top == N - 1",
+    "top == 0",
+    "top == -1",
+  ],
+  correctAnswer: 1,
+  explanation:
+    "The highest valid index in an array of size N is N - 1, so the stack is full when top equals N - 1.",
+},
+{
+  question: "Which stack operation should check isFull() before execution?",
+  options: [
+    "Push",
+    "Pop",
+    "Peek",
+    "isEmpty",
+  ],
+  correctAnswer: 0,
+  explanation:
+    "The push operation must ensure the stack is not full before inserting a new element.",
+},
+{
+  question: "What problem occurs if push() is performed on a full stack without checking isFull()?",
+  options: [
+    "Stack Underflow",
+    "Stack Overflow",
+    "Memory Leak",
+    "Infinite Loop",
+  ],
+  correctAnswer: 1,
+  explanation:
+    "Attempting to push onto a full stack causes a stack overflow condition.",
+},
+{
+  question: "What is the time complexity of the isFull() operation?",
+  options: [
+    "O(1)",
+    "O(log N)",
+    "O(N)",
+    "O(N²)",
+  ],
+  correctAnswer: 0,
+  explanation:
+    "The isFull() operation only compares the top index with the stack capacity, making it a constant-time operation.",
+},
+  ];
+
+  return <QuizEngine title="Stack Quiz Challenge" questions={questions} />;
+};
+
+export default StackQuiz;
diff --git a/src/app/visualizer/stack/quiz/page.jsx b/src/app/visualizer/stack/quiz/page.jsx
new file mode 100644
index 000000000..7964714ad
--- /dev/null
+++ b/src/app/visualizer/stack/quiz/page.jsx
@@ -0,0 +1,5 @@
+import StackQuizClient from "./StackQuizClient";
+
+export default function Page() {
+  return <StackQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/stack/quiz/peek/page.jsx b/src/app/visualizer/stack/quiz/peek/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/stack/quiz/peek/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/stack/quiz/peek/quiz.jsx b/src/app/visualizer/stack/quiz/peek/quiz.jsx
new file mode 100644
index 000000000..62709980e
--- /dev/null
+++ b/src/app/visualizer/stack/quiz/peek/quiz.jsx
@@ -0,0 +1,117 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const StackQuiz = () => {
+  const questions = [
+    {
+      question: "What does the peek operation in a stack do?",
+      options: [
+        "Removes and returns the top element",
+        "Returns the top element without removing it",
+        "Adds a new element to the top",
+        "Returns the bottom element of the stack"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Peek only inspects the top element without modifying the stack, unlike pop which removes it.",
+    },
+    {
+      question: "What is the time complexity of the peek operation?",
+      options: ["O(n)", "O(log n)", "O(1)", "O(n²)"],
+      correctAnswer: 2,
+      explanation:
+        "Peek operates in O(1) time since it directly accesses the top element (constant time).",
+    },
+    {
+      question: "After pushing 10, 20, and 30 onto a stack, what does peek() return?",
+      options: ["10", "20", "30", "Error"],
+      correctAnswer: 2,
+      explanation:
+        "The stack becomes [30, 20, 10], so peek returns 30 (the top element).",
+    },
+    {
+      question: "What happens if you peek at an empty stack?",
+      options: [
+        "Returns null",
+        "Returns undefined",
+        "Causes stack underflow",
+        "Depends on implementation"
+      ],
+      correctAnswer: 3,
+      explanation:
+        "Most implementations throw a stack underflow exception (or similar error) when peeking an empty stack.",
+    },
+    {
+      question: "How does peek differ from pop?",
+      options: [
+        "Peek removes the element, pop doesn't",
+        "Peek doesn't modify the stack, pop does",
+        "Peek works at the bottom of the stack",
+        "Peek has O(n) time complexity"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Peek is non-destructive (only reads data), while pop modifies the stack by removing the top element.",
+    },
+    {
+      question: "In which scenario would peek be particularly useful?",
+      options: [
+        "When you need to remove all elements",
+        "When you need to check the top element before deciding to pop/push",
+        "When you need to reverse the stack",
+        "When you need to count all elements"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Peek is ideal for inspection before operations (e.g., checking if a parenthesis matches before popping).",
+    },
+    {
+      question: "Given stack = [5, 2, 9], what's the state after peek()?",
+      options: [
+        "[5, 2, 9]",
+        "[2, 9]",
+        "[5, 2]",
+        "[9, 5, 2]"
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Peek only reads the top element (9), leaving the stack unchanged as [5, 2, 9].",
+    },
+    {
+      question: "Which real-world analogy best describes peek?",
+      options: [
+        "Taking the top plate from a stack of plates",
+        "Looking at the top plate without taking it",
+        "Adding a new plate to the stack",
+        "Counting all plates in the stack"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Peek is like looking at the top plate to see if it's dirty before deciding to remove it.",
+    },
+    {
+      question: "What does peek() return after: push(8), push(4), pop(), peek()?",
+      options: ["8", "4", "Error", "Null"],
+      correctAnswer: 0,
+      explanation:
+        "Operations: push(8) → [8], push(4) → [4, 8], pop() → returns 4: [8], peek() → returns 8.",
+    },
+    {
+      question: "Why is peek considered a 'safe' operation?",
+      options: [
+        "It never throws errors",
+        "It doesn't modify stack data",
+        "It works on full stacks",
+        "It has O(1) space complexity"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Peek is 'safe' in terms of data integrity since it’s read-only (though it may throw errors on empty stacks).",
+    },
+  ];
+
+  return <QuizEngine title="Stack Quiz Challenge" questions={questions} />;
+};
+
+export default StackQuiz;
diff --git a/src/app/visualizer/stack/quiz/push-pop/page.jsx b/src/app/visualizer/stack/quiz/push-pop/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/stack/quiz/push-pop/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/stack/quiz/push-pop/quiz.jsx b/src/app/visualizer/stack/quiz/push-pop/quiz.jsx
new file mode 100644
index 000000000..8742c5c8e
--- /dev/null
+++ b/src/app/visualizer/stack/quiz/push-pop/quiz.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const StackQuiz = () => {
+  const questions = [
+    {
+      question: "What principle does the stack data structure follow?",
+      options: [
+        "FIFO (First In First Out)",
+        "LIFO (Last In First Out)",
+        "Random Access",
+        "Priority Ordering"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Stack follows LIFO (Last In First Out) principle - the last element added is the first one to be removed.",
+    },
+    {
+      question: "What is the time complexity of push and pop operations in a stack?",
+      options: ["O(n)", "O(log n)", "O(1)", "O(n²)"],
+      correctAnswer: 2,
+      explanation:
+        "Both push and pop operations in a stack have O(1) time complexity as they only involve operations at the top of the stack.",
+    },
+    {
+      question: "What happens when you try to pop from an empty stack?",
+      options: [
+        "Stack Overflow",
+        "Stack Underflow",
+        "Null Pointer Exception",
+        "The stack resizes itself"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Attempting to pop from an empty stack results in stack underflow, which is an error condition.",
+    },
+    {
+      question: "After pushing 10, 20, and 30 onto an empty stack, what will be the result of two consecutive pop operations?",
+      options: [
+        "10 then 20",
+        "20 then 10",
+        "30 then 20",
+        "30 then 10"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "The stack will be [30, 20, 10] after pushes. First pop returns 30, second pop returns 20.",
+    },
+    {
+      question: "What is the space complexity of stack operations?",
+      options: ["O(n)", "O(1)", "O(log n)", "Depends on implementation"],
+      correctAnswer: 1,
+      explanation:
+        "Each push/pop operation itself uses constant space (O(1)), though the overall stack may use O(n) space.",
+    },
+    {
+      question: "Which of the following is NOT a typical application of stacks?",
+      options: [
+        "Function call management",
+        "Undo operations in text editors",
+        "CPU scheduling",
+        "Expression evaluation"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "CPU scheduling typically uses queues rather than stacks. Stacks are used in function calls, undo operations, and expression evaluation.",
+    },
+    {
+      question: "What happens when you push to a full stack (in fixed-size implementation)?",
+      options: [
+        "The stack automatically resizes",
+        "Stack Overflow",
+        "The oldest element is removed",
+        "The operation is queued"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Attempting to push to a full stack in fixed-size implementations results in stack overflow.",
+    },
+    {
+      question: "In a stack implementation, which end is used for both push and pop operations?",
+      options: [
+        "The front end",
+        "The rear end",
+        "The top end",
+        "Any random end"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "All stack operations (push and pop) happen at the top end of the stack.",
+    },
+    {
+      question: "Which data structure would be most appropriate to implement an undo feature?",
+      options: [
+        "Queue",
+        "Stack",
+        "Linked List",
+        "Tree"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "A stack is ideal for undo operations as it naturally follows the LIFO principle - the last action should be the first one undone.",
+    },
+    {
+      question: "What would be the result of pushing 'A', then 'B', then popping, then pushing 'C' to an empty stack?",
+      options: [
+        "[A, B, C]",
+        "[C, A]",
+        "[A, C]",
+        "[B, C]"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Operations: push A → [A], push B → [B, A], pop → returns B: [A], push C → [C, A].",
+    },
+  ];
+
+  return <QuizEngine title="Stack Quiz Challenge" questions={questions} />;
+};
+
+export default StackQuiz;
diff --git a/src/app/visualizer/string/anagram-check/animation.jsx b/src/app/visualizer/string/anagram-check/animation.jsx
new file mode 100644
index 000000000..3c8b5df6d
--- /dev/null
+++ b/src/app/visualizer/string/anagram-check/animation.jsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { motion } from "framer-motion";
+
+export default function Animation() {
+  const [first, setFirst] = useState("listen");
+  const [second, setSecond] = useState("silent");
+
+  const result = useMemo(() => {
+    const normalize = (str) =>
+      str.toLowerCase().replace(/\s+/g, "").split("").sort().join("");
+
+    const a = normalize(first);
+    const b = normalize(second);
+
+    return {
+      isAnagram: a === b,
+      firstSorted: a,
+      secondSorted: b,
+    };
+  }, [first, second]);
+
+  return (
+    <div className="space-y-8">
+      <div className="grid md:grid-cols-2 gap-5">
+        <div>
+          <label className="font-medium text-sm text-gray-700 dark:text-gray-300">
+            First String
+          </label>
+
+          <input
+            value={first}
+            onChange={(e) => setFirst(e.target.value)}
+            className="mt-2 w-full rounded-lg border border-gray-300 bg-white p-3 text-gray-900 placeholder:text-gray-400 outline-none focus:ring-2 focus:ring-pink-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+            placeholder="Enter first string"
+          />
+        </div>
+
+        <div>
+          <label className="font-medium text-sm text-gray-700 dark:text-gray-300">
+            Second String
+          </label>
+
+          <input
+            value={second}
+            onChange={(e) => setSecond(e.target.value)}
+            className="mt-2 w-full rounded-lg border border-gray-300 bg-white p-3 text-gray-900 placeholder:text-gray-400 outline-none focus:ring-2 focus:ring-pink-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+            placeholder="Enter second string"
+          />
+        </div>
+      </div>
+
+      <div className="grid md:grid-cols-2 gap-5">
+        <motion.div
+          layout
+          className="rounded-xl border border-gray-200 bg-pink-50 p-5 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+        >
+          <h3 className="font-bold text-pink-600 dark:text-pink-400 mb-3">
+            First String (Sorted)
+          </h3>
+
+          <div className="flex flex-wrap gap-2">
+            {result.firstSorted.split("").map((ch, index) => (
+              <motion.div
+                key={index}
+                initial={{ scale: 0 }}
+                animate={{ scale: 1 }}
+                transition={{ delay: index * 0.05 }}
+                className="w-10 h-10 rounded-lg bg-pink-500 text-white flex items-center justify-center font-bold dark:bg-pink-600"
+              >
+                {ch}
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+
+        <motion.div
+          layout
+          className="rounded-xl border border-gray-200 bg-pink-50 p-5 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+        >
+          <h3 className="font-bold text-pink-600 dark:text-pink-400 mb-3">
+            Second String (Sorted)
+          </h3>
+
+          <div className="flex flex-wrap gap-2">
+            {result.secondSorted.split("").map((ch, index) => (
+              <motion.div
+                key={index}
+                initial={{ scale: 0 }}
+                animate={{ scale: 1 }}
+                transition={{ delay: index * 0.05 }}
+                className="w-10 h-10 rounded-lg bg-pink-500 text-white flex items-center justify-center font-bold dark:bg-pink-600"
+              >
+                {ch}
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+
+      <motion.div
+        layout
+        className={`rounded-xl p-6 text-center text-xl font-bold ${
+          result.isAnagram
+            ? "bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-200"
+            : "bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-200"
+        }`}
+      >
+        {result.isAnagram
+          ? "✅ These strings are Anagrams"
+          : "❌ These strings are NOT Anagrams"}
+      </motion.div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/anagram-check/codeBlock.jsx b/src/app/visualizer/string/anagram-check/codeBlock.jsx
new file mode 100644
index 000000000..6c2134889
--- /dev/null
+++ b/src/app/visualizer/string/anagram-check/codeBlock.jsx
@@ -0,0 +1,124 @@
+"use client";
+
+import ComplexityGraph from "@/app/components/ui/graph";
+
+const Content = () => {
+  const paragraphs = [
+    `An Anagram Check determines whether two strings contain exactly the same characters with the same frequencies, regardless of their order. For example, "listen" and "silent" are anagrams because they contain the same letters.`,
+
+    `There are multiple approaches to solve this problem. A common method is to sort both strings and compare them. Another efficient approach is to count the frequency of each character using a HashMap and compare the frequency maps.`,
+
+    `Anagram checking is widely used in text processing, spell checkers, cryptography, word games, and coding interviews.`,
+  ];
+
+  const example = [
+    { points: 'First String: "listen"' },
+    { points: 'Second String: "silent"' },
+    { points: 'Sort both strings' },
+    { points: '"eilnst" == "eilnst"' },
+    { points: "Therefore, both strings are anagrams." },
+  ];
+
+  const steps = [
+    { points: "Check if both strings have the same length." },
+    { points: "Convert both strings to lowercase (optional)." },
+    { points: "Sort both strings alphabetically." },
+    { points: "Compare the sorted strings." },
+    {
+      points: "If both are identical, return True; otherwise return False.",
+    },
+  ];
+
+  const complexity = [
+    {
+      points: "Best Case: O(n log n) using sorting.",
+    },
+    {
+      points:
+        "Using HashMap Frequency Count: O(n) time and O(n) auxiliary space.",
+    },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="bg-white dark:bg-[#111] rounded-2xl border border-gray-200 dark:border-[#222] overflow-hidden">
+
+        {/* What is Anagram */}
+        <section className="p-6 border-b dark:border-[#222]">
+          <h1 className="text-2xl font-black flex items-center mb-4">
+            <span className="w-1 h-6 bg-pink-500 rounded-full mr-3"></span>
+            What is Anagram Check?
+          </h1>
+
+          <p className="text-gray-700 dark:text-gray-300 leading-8">
+            {paragraphs[0]}
+          </p>
+        </section>
+
+        {/* Example */}
+        <section className="p-6 border-b dark:border-[#222]">
+          <h1 className="text-2xl font-black flex items-center mb-4">
+            <span className="w-1 h-6 bg-pink-500 rounded-full mr-3"></span>
+            Example
+          </h1>
+
+          <ul className="space-y-3 list-disc pl-5">
+            {example.map((item, index) => (
+              <li key={index}>{item.points}</li>
+            ))}
+          </ul>
+
+          <p className="mt-6 text-gray-700 dark:text-gray-300 leading-8">
+            {paragraphs[1]}
+          </p>
+        </section>
+
+        {/* Steps */}
+        <section className="p-6 border-b dark:border-[#222]">
+          <h1 className="text-2xl font-black flex items-center mb-4">
+            <span className="w-1 h-6 bg-pink-500 rounded-full mr-3"></span>
+            Algorithm Steps
+          </h1>
+
+          <ol className="list-decimal pl-5 space-y-3">
+            {steps.map((item, index) => (
+              <li key={index}>{item.points}</li>
+            ))}
+          </ol>
+        </section>
+
+        {/* Complexity */}
+        <section className="p-6">
+          <h1 className="text-2xl font-black flex items-center mb-4">
+            <span className="w-1 h-6 bg-pink-500 rounded-full mr-3"></span>
+            Time Complexity
+          </h1>
+
+          <ul className="space-y-3 list-disc pl-5">
+            {complexity.map((item, index) => (
+              <li key={index}>{item.points}</li>
+            ))}
+          </ul>
+
+          <div className="mt-8">
+            <ComplexityGraph
+              bestCase={(n) => n * Math.log2(n)}
+              averageCase={(n) => n * Math.log2(n)}
+              worstCase={(n) => n * Math.log2(n)}
+              maxN={25}
+            />
+          </div>
+
+          <div className="mt-8 p-5 rounded-xl bg-pink-50 dark:bg-pink-950 border border-pink-200 dark:border-pink-800">
+            <p className="text-gray-700 dark:text-gray-300 leading-8">
+              {paragraphs[2]}
+            </p>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+};
+
+export default Content;
\ No newline at end of file
diff --git a/src/app/visualizer/string/anagram-check/content.jsx b/src/app/visualizer/string/anagram-check/content.jsx
new file mode 100644
index 000000000..6c2134889
--- /dev/null
+++ b/src/app/visualizer/string/anagram-check/content.jsx
@@ -0,0 +1,124 @@
+"use client";
+
+import ComplexityGraph from "@/app/components/ui/graph";
+
+const Content = () => {
+  const paragraphs = [
+    `An Anagram Check determines whether two strings contain exactly the same characters with the same frequencies, regardless of their order. For example, "listen" and "silent" are anagrams because they contain the same letters.`,
+
+    `There are multiple approaches to solve this problem. A common method is to sort both strings and compare them. Another efficient approach is to count the frequency of each character using a HashMap and compare the frequency maps.`,
+
+    `Anagram checking is widely used in text processing, spell checkers, cryptography, word games, and coding interviews.`,
+  ];
+
+  const example = [
+    { points: 'First String: "listen"' },
+    { points: 'Second String: "silent"' },
+    { points: 'Sort both strings' },
+    { points: '"eilnst" == "eilnst"' },
+    { points: "Therefore, both strings are anagrams." },
+  ];
+
+  const steps = [
+    { points: "Check if both strings have the same length." },
+    { points: "Convert both strings to lowercase (optional)." },
+    { points: "Sort both strings alphabetically." },
+    { points: "Compare the sorted strings." },
+    {
+      points: "If both are identical, return True; otherwise return False.",
+    },
+  ];
+
+  const complexity = [
+    {
+      points: "Best Case: O(n log n) using sorting.",
+    },
+    {
+      points:
+        "Using HashMap Frequency Count: O(n) time and O(n) auxiliary space.",
+    },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="bg-white dark:bg-[#111] rounded-2xl border border-gray-200 dark:border-[#222] overflow-hidden">
+
+        {/* What is Anagram */}
+        <section className="p-6 border-b dark:border-[#222]">
+          <h1 className="text-2xl font-black flex items-center mb-4">
+            <span className="w-1 h-6 bg-pink-500 rounded-full mr-3"></span>
+            What is Anagram Check?
+          </h1>
+
+          <p className="text-gray-700 dark:text-gray-300 leading-8">
+            {paragraphs[0]}
+          </p>
+        </section>
+
+        {/* Example */}
+        <section className="p-6 border-b dark:border-[#222]">
+          <h1 className="text-2xl font-black flex items-center mb-4">
+            <span className="w-1 h-6 bg-pink-500 rounded-full mr-3"></span>
+            Example
+          </h1>
+
+          <ul className="space-y-3 list-disc pl-5">
+            {example.map((item, index) => (
+              <li key={index}>{item.points}</li>
+            ))}
+          </ul>
+
+          <p className="mt-6 text-gray-700 dark:text-gray-300 leading-8">
+            {paragraphs[1]}
+          </p>
+        </section>
+
+        {/* Steps */}
+        <section className="p-6 border-b dark:border-[#222]">
+          <h1 className="text-2xl font-black flex items-center mb-4">
+            <span className="w-1 h-6 bg-pink-500 rounded-full mr-3"></span>
+            Algorithm Steps
+          </h1>
+
+          <ol className="list-decimal pl-5 space-y-3">
+            {steps.map((item, index) => (
+              <li key={index}>{item.points}</li>
+            ))}
+          </ol>
+        </section>
+
+        {/* Complexity */}
+        <section className="p-6">
+          <h1 className="text-2xl font-black flex items-center mb-4">
+            <span className="w-1 h-6 bg-pink-500 rounded-full mr-3"></span>
+            Time Complexity
+          </h1>
+
+          <ul className="space-y-3 list-disc pl-5">
+            {complexity.map((item, index) => (
+              <li key={index}>{item.points}</li>
+            ))}
+          </ul>
+
+          <div className="mt-8">
+            <ComplexityGraph
+              bestCase={(n) => n * Math.log2(n)}
+              averageCase={(n) => n * Math.log2(n)}
+              worstCase={(n) => n * Math.log2(n)}
+              maxN={25}
+            />
+          </div>
+
+          <div className="mt-8 p-5 rounded-xl bg-pink-50 dark:bg-pink-950 border border-pink-200 dark:border-pink-800">
+            <p className="text-gray-700 dark:text-gray-300 leading-8">
+              {paragraphs[2]}
+            </p>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+};
+
+export default Content;
\ No newline at end of file
diff --git a/src/app/visualizer/string/anagram-check/page.jsx b/src/app/visualizer/string/anagram-check/page.jsx
new file mode 100644
index 000000000..617421d16
--- /dev/null
+++ b/src/app/visualizer/string/anagram-check/page.jsx
@@ -0,0 +1,39 @@
+import Animation from "./animation";
+import Code from "./codeBlock";
+import Content from "./content";
+
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("String", "Anagram Check")}
+      title="Anagram Check"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other string algorithms"
+          links={[
+            {
+              text: "Reverse String",
+              url: "../reverse-string",
+            },
+            {
+              text: "Palindrome Check",
+              url: "../palindrome-check",
+            },
+            {
+              text: "Character Frequency",
+              url: "../character-frequency",
+            },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/anagram-check/quiz.jsx b/src/app/visualizer/string/anagram-check/quiz.jsx
new file mode 100644
index 000000000..e84429346
--- /dev/null
+++ b/src/app/visualizer/string/anagram-check/quiz.jsx
@@ -0,0 +1,193 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const AnagramCheckQuiz = () => {
+  const questions = [
+    {
+      question: "What is an anagram?",
+      options: [
+        "A string written backwards",
+        "Two strings containing the same characters in different order",
+        "A palindrome",
+        "A sorted string",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Anagrams contain the same characters with the same frequencies but in a different order.",
+    },
+    {
+      question: 'Which of these is an anagram of "listen"?',
+      options: ["silent", "list", "listened", "stone"],
+      correctAnswer: 0,
+      explanation:
+        '"listen" and "silent" contain exactly the same letters.',
+    },
+    {
+      question: "What is the first thing to check before comparing two strings?",
+      options: [
+        "Sort them",
+        "Reverse them",
+        "Compare their lengths",
+        "Convert to uppercase",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "If the lengths differ, the strings cannot be anagrams.",
+    },
+    {
+      question: "Which data structure is commonly used for an O(n) anagram solution?",
+      options: [
+        "Queue",
+        "Stack",
+        "HashMap",
+        "Linked List",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "A HashMap stores the frequency of each character.",
+    },
+    {
+      question: "Which algorithm can also solve the anagram problem?",
+      options: [
+        "Sorting",
+        "DFS",
+        "Binary Search",
+        "Heapify",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Sorting both strings and comparing them is a common solution.",
+    },
+    {
+      question: "What is the time complexity of the sorting approach?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n log n)",
+      ],
+      correctAnswer: 3,
+      explanation:
+        "Sorting dominates the running time.",
+    },
+    {
+      question: "What is the time complexity of the HashMap approach?",
+      options: [
+        "O(n)",
+        "O(log n)",
+        "O(n²)",
+        "O(1)",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Each character is processed once.",
+    },
+    {
+      question: "Are 'evil' and 'vile' anagrams?",
+      options: [
+        "Yes",
+        "No",
+        "Only after sorting",
+        "Cannot determine",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Both words contain the same characters.",
+    },
+    {
+      question: "Which pair is NOT an anagram?",
+      options: [
+        "dusty & study",
+        "night & thing",
+        "apple & paple",
+        "hello & world",
+      ],
+      correctAnswer: 3,
+      explanation:
+        "'hello' and 'world' have different character sets.",
+    },
+    {
+      question: "Ignoring spaces and capitalization is useful because:",
+      options: [
+        "It makes comparison fair",
+        "It speeds up sorting",
+        "It changes the algorithm",
+        "It reduces memory",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Normalization allows equivalent strings to be compared correctly.",
+    },
+    {
+      question: "Which application commonly uses anagram checking?",
+      options: [
+        "Spell checking",
+        "Word games",
+        "Text processing",
+        "All of the above",
+      ],
+      correctAnswer: 3,
+      explanation:
+        "Anagram checking is useful in all of these applications.",
+    },
+    {
+      question: "Which of these strings is an anagram of 'race'?",
+      options: [
+        "care",
+        "acerx",
+        "racee",
+        "trace",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "'care' contains exactly the same letters.",
+    },
+    {
+      question: "If two strings have different lengths, they are:",
+      options: [
+        "Always anagrams",
+        "Never anagrams",
+        "Maybe anagrams",
+        "Need sorting first",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Different lengths immediately rule out anagrams.",
+    },
+    {
+      question: "Which approach generally uses less extra memory?",
+      options: [
+        "Sorting",
+        "HashMap",
+        "Both always use O(n)",
+        "Neither",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Sorting can be done in-place depending on the implementation.",
+    },
+    {
+      question: "Which statement about anagrams is true?",
+      options: [
+        "Character order must match",
+        "Character frequencies must match",
+        "String lengths may differ",
+        "Sorting is mandatory",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The defining property of anagrams is identical character frequencies.",
+    },
+  ];
+
+  return (
+    <QuizEngine
+      title="Anagram Check Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default AnagramCheckQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/string/anagram-check/quiz/page.jsx b/src/app/visualizer/string/anagram-check/quiz/page.jsx
new file mode 100644
index 000000000..9e232d9d0
--- /dev/null
+++ b/src/app/visualizer/string/anagram-check/quiz/page.jsx
@@ -0,0 +1,5 @@
+import AnagramCheckQuiz from "../quiz";
+
+export default function Page() {
+  return <AnagramCheckQuiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/character-frequency/animation.jsx b/src/app/visualizer/string/character-frequency/animation.jsx
new file mode 100644
index 000000000..29e7a9d6c
--- /dev/null
+++ b/src/app/visualizer/string/character-frequency/animation.jsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { motion } from "framer-motion";
+
+export default function Animation() {
+  const [text, setText] = useState("AlgoBuddy");
+
+  const frequency = useMemo(() => {
+    const map = {};
+
+    for (const ch of text) {
+      const key = ch.toLowerCase();
+
+      if (key === " ") continue;
+
+      map[key] = (map[key] || 0) + 1;
+    }
+
+    return Object.entries(map);
+  }, [text]);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <label className="font-medium text-sm text-gray-700 dark:text-gray-300">
+          Enter a String
+        </label>
+
+        <input
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          className="mt-2 w-full rounded-lg border border-gray-300 bg-white p-3 text-gray-900 placeholder:text-gray-400 outline-none focus:ring-2 focus:ring-pink-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
+          placeholder="Enter text..."
+        />
+      </div>
+
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+        {frequency.map(([char, count], index) => (
+          <motion.div
+            key={char}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: index * 0.08 }}
+            className="rounded-xl border border-gray-200 bg-pink-50 p-5 text-center text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+          >
+            <div className="text-3xl font-bold text-pink-600 dark:text-pink-400">
+              {char}
+            </div>
+
+            <div className="mt-2 text-gray-600 dark:text-gray-400">
+              Frequency
+            </div>
+
+            <div className="text-2xl font-bold">
+              {count}
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/character-frequency/codeBlock.jsx b/src/app/visualizer/string/character-frequency/codeBlock.jsx
new file mode 100644
index 000000000..1f93fb2aa
--- /dev/null
+++ b/src/app/visualizer/string/character-frequency/codeBlock.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const codeExamples = {
+  javascript: `// Character Frequency in JavaScript
+function characterFrequency(str) {
+  const freq = {};
+
+  for (const ch of str) {
+    if (freq[ch]) {
+      freq[ch]++;
+    } else {
+      freq[ch] = 1;
+    }
+  }
+
+  return freq;
+}
+
+// Usage
+const text = "banana";
+console.log(characterFrequency(text));
+
+// Output:
+// { b: 1, a: 3, n: 2 }`,
+
+  python: `# Character Frequency in Python
+def character_frequency(text):
+    freq = {}
+
+    for ch in text:
+        if ch in freq:
+            freq[ch] += 1
+        else:
+            freq[ch] = 1
+
+    return freq
+
+# Usage
+text = "banana"
+print(character_frequency(text))
+
+# Output:
+# {'b': 1, 'a': 3, 'n': 2}`,
+
+  java: `// Character Frequency in Java
+import java.util.HashMap;
+
+public class CharacterFrequency {
+
+    public static void frequency(String text) {
+
+        HashMap<Character, Integer> map = new HashMap<>();
+
+        for(char ch : text.toCharArray()) {
+            map.put(ch, map.getOrDefault(ch, 0) + 1);
+        }
+
+        System.out.println(map);
+    }
+
+    public static void main(String[] args) {
+        frequency("banana");
+    }
+}`,
+
+  cpp: `// Character Frequency in C++
+#include <iostream>
+#include <unordered_map>
+using namespace std;
+
+int main() {
+
+    string text = "banana";
+
+    unordered_map<char,int> freq;
+
+    for(char ch : text)
+        freq[ch]++;
+
+    for(auto x : freq)
+        cout << x.first << " : " << x.second << endl;
+
+    return 0;
+}`,
+
+  c: `// Character Frequency in C
+#include <stdio.h>
+#include <string.h>
+
+int main() {
+
+    char str[] = "banana";
+    int freq[256] = {0};
+
+    for(int i = 0; str[i] != '\\0'; i++) {
+        freq[(unsigned char)str[i]]++;
+    }
+
+    for(int i = 0; i < 256; i++) {
+        if(freq[i] != 0)
+            printf("%c : %d\\n", i, freq[i]);
+    }
+
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: "characterFrequency.js",
+  python: "character_frequency.py",
+  java: "CharacterFrequency.java",
+  cpp: "character_frequency.cpp",
+  c: "character_frequency.c",
+};
+
+export default function CharacterFrequencyCode() {
+  return (
+    <CodeBlock
+      variant="macos"
+      codeExamples={codeExamples}
+      fileNames={fileNames}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/character-frequency/content.jsx b/src/app/visualizer/string/character-frequency/content.jsx
new file mode 100644
index 000000000..c28eb4e89
--- /dev/null
+++ b/src/app/visualizer/string/character-frequency/content.jsx
@@ -0,0 +1,142 @@
+"use client";
+
+import ComplexityGraph from "@/app/components/ui/graph";
+
+const Content = () => {
+  const paragraphs = [
+    `Character Frequency is a string-processing technique used to count how many times each character appears in a given string. It is commonly implemented using a HashMap (or dictionary) where each character is stored as a key and its occurrence count as the value.`,
+
+    `The algorithm scans the string one character at a time. If the character already exists in the map, its count is increased. Otherwise, it is added with a frequency of 1.`,
+
+    `Character Frequency is widely used in text analysis, data compression, anagram detection, and many interview problems involving strings and hashing.`,
+  ];
+
+  const example = [
+    { points: 'Input String: "banana"' },
+    { points: "Read 'b' → { b: 1 }" },
+    { points: "Read 'a' → { b: 1, a: 1 }" },
+    { points: "Read 'n' → { b: 1, a: 1, n: 1 }" },
+    { points: "Read 'a' → { b: 1, a: 2, n: 1 }" },
+    { points: "Read 'n' → { b: 1, a: 2, n: 2 }" },
+    { points: "Read 'a' → { b: 1, a: 3, n: 2 }" },
+  ];
+
+  const steps = [
+    { points: "Create an empty HashMap (or Dictionary)." },
+    { points: "Traverse the string character by character." },
+    {
+      points: "For each character:",
+      subpoints: [
+        "If already present, increment its count.",
+        "Otherwise insert it with count = 1.",
+      ],
+    },
+    { points: "Display all characters with their frequencies." },
+  ];
+
+  const complexity = [
+    {
+      points:
+        "Best Case: O(n) (every character processed once).",
+    },
+    {
+      points:
+        "Worst Case: O(n) (HashMap insertion/search is O(1) on average).",
+    },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+
+      <article className="bg-white dark:bg-[#111] rounded-2xl border border-gray-200 dark:border-[#222] overflow-hidden">
+
+        {/* What is Character Frequency */}
+        <section className="p-6 border-b dark:border-[#222]">
+          <h1 className="text-2xl font-black flex items-center mb-4">
+            <span className="w-1 h-6 bg-pink-500 rounded-full mr-3"></span>
+            What is Character Frequency?
+          </h1>
+
+          <p className="text-gray-700 dark:text-gray-300 leading-8">
+            {paragraphs[0]}
+          </p>
+        </section>
+
+        {/* Example */}
+        <section className="p-6 border-b dark:border-[#222]">
+          <h1 className="text-2xl font-black flex items-center mb-4">
+            <span className="w-1 h-6 bg-pink-500 rounded-full mr-3"></span>
+            Example
+          </h1>
+
+          <ul className="space-y-3 list-disc pl-5">
+            {example.map((item, index) => (
+              <li key={index}>{item.points}</li>
+            ))}
+          </ul>
+
+          <p className="mt-5 text-gray-700 dark:text-gray-300 leading-8">
+            {paragraphs[1]}
+          </p>
+        </section>
+
+        {/* Steps */}
+        <section className="p-6 border-b dark:border-[#222]">
+          <h1 className="text-2xl font-black flex items-center mb-4">
+            <span className="w-1 h-6 bg-pink-500 rounded-full mr-3"></span>
+            Algorithm Steps
+          </h1>
+
+          <ol className="list-decimal pl-5 space-y-3">
+            {steps.map((item, index) => (
+              <li key={index}>
+                {item.points}
+
+                {item.subpoints && (
+                  <ul className="list-disc pl-5 mt-2 space-y-2">
+                    {item.subpoints.map((sub, i) => (
+                      <li key={i}>{sub}</li>
+                    ))}
+                  </ul>
+                )}
+              </li>
+            ))}
+          </ol>
+        </section>
+
+        {/* Complexity */}
+        <section className="p-6">
+          <h1 className="text-2xl font-black flex items-center mb-4">
+            <span className="w-1 h-6 bg-pink-500 rounded-full mr-3"></span>
+            Time Complexity
+          </h1>
+
+          <ul className="list-disc pl-5 space-y-3">
+            {complexity.map((item, index) => (
+              <li key={index}>{item.points}</li>
+            ))}
+          </ul>
+
+          <div className="mt-8">
+            <ComplexityGraph
+              bestCase={(n) => n}
+              averageCase={(n) => n}
+              worstCase={(n) => n}
+              maxN={25}
+            />
+          </div>
+
+          <div className="mt-8 p-5 rounded-xl bg-pink-50 dark:bg-pink-950 border border-pink-200 dark:border-pink-800">
+            <p className="text-gray-700 dark:text-gray-300 leading-8">
+              {paragraphs[2]}
+            </p>
+          </div>
+        </section>
+
+      </article>
+
+    </main>
+  );
+};
+
+export default Content;
\ No newline at end of file
diff --git a/src/app/visualizer/string/character-frequency/page.jsx b/src/app/visualizer/string/character-frequency/page.jsx
new file mode 100644
index 000000000..8f74a6e29
--- /dev/null
+++ b/src/app/visualizer/string/character-frequency/page.jsx
@@ -0,0 +1,39 @@
+import Animation from "./animation";
+import Code from "./codeBlock";
+import Content from "./content";
+
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("String", "Character Frequency")}
+      title="Character Frequency"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other string algorithms"
+          links={[
+            {
+              text: "Reverse String",
+              url: "../reverse-string",
+            },
+            {
+              text: "Palindrome Check",
+              url: "../palindrome-check",
+            },
+            {
+              text: "Anagram Check",
+              url: "../anagram-check",
+            },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/character-frequency/quiz.jsx b/src/app/visualizer/string/character-frequency/quiz.jsx
new file mode 100644
index 000000000..a6eca28d9
--- /dev/null
+++ b/src/app/visualizer/string/character-frequency/quiz.jsx
@@ -0,0 +1,193 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const CharacterFrequencyQuiz = () => {
+  const questions = [
+    {
+      question: "What is the main purpose of the Character Frequency algorithm?",
+      options: [
+        "Sort characters",
+        "Count occurrences of each character",
+        "Reverse a string",
+        "Remove duplicates"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Character Frequency counts how many times each character appears in a string.",
+    },
+    {
+      question: "Which data structure is commonly used to store character frequencies?",
+      options: [
+        "Stack",
+        "Queue",
+        "HashMap / Dictionary",
+        "Linked List"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "A HashMap (Dictionary) stores each character as a key and its count as the value.",
+    },
+    {
+      question: 'What is the frequency of "a" in the string "banana"?',
+      options: ["2", "3", "4", "1"],
+      correctAnswer: 1,
+      explanation:
+        "The string 'banana' contains 'a' three times.",
+    },
+    {
+      question: "What is the time complexity of counting character frequencies?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Each character is visited exactly once, giving O(n) time complexity.",
+    },
+    {
+      question: "What is the auxiliary space complexity in the worst case?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "If every character is unique, the HashMap stores n entries.",
+    },
+    {
+      question: "What happens when a character is encountered again?",
+      options: [
+        "Delete it",
+        "Ignore it",
+        "Increase its count",
+        "Restart counting"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Its existing frequency is incremented by one.",
+    },
+    {
+      question: "Which application commonly uses character frequency?",
+      options: [
+        "Text analysis",
+        "Image editing",
+        "Video rendering",
+        "Networking"
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Character frequency is heavily used in text analysis and NLP.",
+    },
+    {
+      question: "Which algorithm also relies heavily on character frequencies?",
+      options: [
+        "Binary Search",
+        "Huffman Coding",
+        "Selection Sort",
+        "DFS"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Huffman Coding builds its tree using character frequencies.",
+    },
+    {
+      question: "If the input string is empty, the frequency map will be:",
+      options: [
+        "Null",
+        "Empty",
+        "Contain one element",
+        "Cause an error"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "No characters means the map remains empty.",
+    },
+    {
+      question: "Character Frequency is mainly classified as which type of algorithm?",
+      options: [
+        "Searching",
+        "Sorting",
+        "Hashing",
+        "Greedy"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "The algorithm primarily uses hashing for constant-time updates.",
+    },
+    {
+      question: "What is stored as the key in the HashMap?",
+      options: [
+        "Frequency",
+        "Character",
+        "Index",
+        "String length"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Each character acts as the key in the HashMap.",
+    },
+    {
+      question: "What is stored as the value in the HashMap?",
+      options: [
+        "Character",
+        "ASCII Code",
+        "Frequency Count",
+        "Index"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "The value stores how many times the character appears.",
+    },
+    {
+      question: "Which of these problems can be solved using Character Frequency?",
+      options: [
+        "Anagram Detection",
+        "Merge Sort",
+        "Heap Construction",
+        "Tree Traversal"
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Anagram detection compares character frequencies of two strings.",
+    },
+    {
+      question: "What is the frequency of 's' in 'mississippi'?",
+      options: [
+        "2",
+        "3",
+        "4",
+        "5"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "The letter 's' appears four times in 'mississippi'.",
+    },
+    {
+      question: "Why is HashMap preferred for Character Frequency?",
+      options: [
+        "Fast insertion and lookup",
+        "Consumes no memory",
+        "Automatically sorts keys",
+        "Works only for integers"
+      ],
+      correctAnswer: 0,
+      explanation:
+        "HashMap provides average O(1) insertion and lookup.",
+    },
+  ];
+
+  return (
+    <QuizEngine
+      title="Character Frequency Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default CharacterFrequencyQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/string/character-frequency/quiz/page.jsx b/src/app/visualizer/string/character-frequency/quiz/page.jsx
new file mode 100644
index 000000000..b304f780d
--- /dev/null
+++ b/src/app/visualizer/string/character-frequency/quiz/page.jsx
@@ -0,0 +1,5 @@
+import CharacterFrequencyQuiz from "../quiz";
+
+export default function Page() {
+  return <CharacterFrequencyQuiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/interview-problems/InterviewProblemsClient.jsx b/src/app/visualizer/string/interview-problems/InterviewProblemsClient.jsx
new file mode 100644
index 000000000..f114c7e94
--- /dev/null
+++ b/src/app/visualizer/string/interview-problems/InterviewProblemsClient.jsx
@@ -0,0 +1,60 @@
+"use client";
+
+import Link from "next/link";
+import { BookOpen } from "lucide-react";
+
+export default function InterviewProblemsClient() {
+  const quizzes = [
+    {
+      title: "Longest Substring Without Repeating Characters",
+      description:
+        "Practice the classic Sliding Window interview problem.",
+      href: "/visualizer/string/longest-substring/quiz",
+    },
+    {
+      title: "Minimum Window Substring",
+      description:
+        "Practice one of the most frequently asked Sliding Window interview problems.",
+      href: "/visualizer/string/minimum-window-substring/quiz",
+    },
+  ];
+
+  return (
+    <div className="max-w-6xl mx-auto px-6 py-10">
+      <h1 className="text-4xl font-bold mb-2">
+        String Interview Problems
+      </h1>
+
+      <p className="text-gray-500 dark:text-gray-400 mb-8">
+        Practice the most frequently asked String interview questions.
+      </p>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        {quizzes.map((quiz) => (
+          <Link
+            key={quiz.title}
+            href={quiz.href}
+            className="rounded-xl border border-pink-500/20 bg-white dark:bg-neutral-900 p-6 hover:shadow-lg transition"
+          >
+            <div className="flex items-center gap-3 mb-4">
+              <BookOpen className="w-6 h-6 text-pink-500" />
+              <h2 className="text-xl font-semibold">{quiz.title}</h2>
+            </div>
+
+            <p className="text-gray-600 dark:text-gray-400">
+              {quiz.description}
+            </p>
+
+            <div className="mt-6">
+                <button
+                    className="w-full rounded-xl bg-pink-600 hover:bg-pink-700 text-white py-4 font-semibold transition-all duration-200"
+                >
+                    Start Quiz ▶
+                </button>
+                </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/interview-problems/page.jsx b/src/app/visualizer/string/interview-problems/page.jsx
new file mode 100644
index 000000000..5e70202bd
--- /dev/null
+++ b/src/app/visualizer/string/interview-problems/page.jsx
@@ -0,0 +1,5 @@
+import InterviewProblemsClient from "./InterviewProblemsClient";
+
+export default function Page() {
+  return <InterviewProblemsClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/kmp-algorithm/animation.jsx b/src/app/visualizer/string/kmp-algorithm/animation.jsx
new file mode 100644
index 000000000..4f6064847
--- /dev/null
+++ b/src/app/visualizer/string/kmp-algorithm/animation.jsx
@@ -0,0 +1,268 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Play, RotateCcw, SkipForward } from "lucide-react";
+
+/**
+ * Build the Longest Prefix Suffix (LPS / failure-function) array for the
+ * given pattern.  lps[i] is the length of the longest proper prefix of
+ * pattern[0..i] that is also a suffix.
+ */
+function buildLPS(pattern) {
+  const lps = new Array(pattern.length).fill(0);
+  let len = 0; // length of the previous longest prefix-suffix
+  let k = 1;
+
+  while (k < pattern.length) {
+    if (pattern[k] === pattern[len]) {
+      len++;
+      lps[k] = len;
+      k++;
+    } else if (len !== 0) {
+      // Do NOT increment k here — try the shorter prefix.
+      len = lps[len - 1];
+    } else {
+      lps[k] = 0;
+      k++;
+    }
+  }
+
+  return lps;
+}
+
+/**
+ * Generate one animation state per comparison step using the true KMP
+ * algorithm.  On a mismatch the pattern pointer is shifted via the LPS
+ * table instead of being naively reset to 0.
+ */
+function generateKMPStates(text, pattern) {
+  const result = [];
+  if (!pattern.length || !text.length) return result;
+
+  const lps = buildLPS(pattern);
+  let i = 0; // index into text
+  let j = 0; // index into pattern
+
+  while (i < text.length) {
+    const matched = text[i] === pattern[j];
+
+    result.push({
+      textIndex: i,
+      patternIndex: j,
+      match: matched,
+      // Snapshot the LPS row so the UI can display it.
+      lps: [...lps],
+      // Record a full match occurrence for the status panel.
+      fullMatch: matched && j === pattern.length - 1,
+    });
+
+    if (matched) {
+      i++;
+      j++;
+      if (j === pattern.length) {
+        // Full pattern matched — use LPS to continue without re-scanning.
+        j = lps[j - 1];
+      }
+    } else {
+      if (j !== 0) {
+        // Shift the pattern pointer using the failure function.
+        j = lps[j - 1];
+      } else {
+        // j is already 0; advance the text pointer.
+        i++;
+      }
+    }
+  }
+
+  return result;
+}
+
+export default function Animation() {
+  const [text, setText] = useState("ABABDABACDABABCABAB");
+  const [pattern, setPattern] = useState("ABABCABAB");
+  const [step, setStep] = useState(0);
+
+  const lps = useMemo(() => buildLPS(pattern), [pattern]);
+
+  const states = useMemo(
+    () => generateKMPStates(text, pattern),
+    [text, pattern]
+  );
+
+  const current = states[Math.min(step, states.length - 1)] || {
+    textIndex: 0,
+    patternIndex: 0,
+    match: false,
+  };
+
+  const nextStep = () => {
+    setStep((prev) => Math.min(prev + 1, states.length - 1));
+  };
+
+  const reset = () => {
+    setStep(0);
+  };
+
+  return (
+    <div className="rounded-xl border bg-white dark:bg-[#1a1a1a] p-6 shadow">
+
+      <div className="grid md:grid-cols-2 gap-4 mb-6">
+
+        <div>
+          <label className="block text-sm font-semibold mb-2">
+            Text
+          </label>
+
+          <input
+            value={text}
+            onChange={(e) => {
+              setText(e.target.value);
+              setStep(0);
+            }}
+            className="w-full rounded-lg border px-3 py-2"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-semibold mb-2">
+            Pattern
+          </label>
+
+          <input
+            value={pattern}
+            onChange={(e) => {
+              setPattern(e.target.value);
+              setStep(0);
+            }}
+            className="w-full rounded-lg border px-3 py-2"
+          />
+        </div>
+
+      </div>
+
+      <div className="space-y-4">
+
+        <div>
+
+          <h3 className="font-semibold mb-2">
+            Text
+          </h3>
+
+          <div className="flex flex-wrap gap-2">
+
+            {text.split("").map((ch, index) => (
+              <div
+                key={index}
+                className={`w-10 h-10 rounded-lg flex items-center justify-center border font-bold
+                ${
+                  index === current.textIndex
+                    ? current.match
+                      ? "bg-green-500 text-white"
+                      : "bg-red-500 text-white"
+                    : "bg-gray-100 dark:bg-gray-800"
+                }`}
+              >
+                {ch}
+              </div>
+            ))}
+
+          </div>
+
+        </div>
+
+        <div>
+
+          <h3 className="font-semibold mb-2">
+            Pattern
+          </h3>
+
+          <div className="flex flex-wrap gap-2">
+
+            {pattern.split("").map((ch, index) => (
+              <div
+                key={index}
+                className={`w-10 h-10 rounded-lg flex items-center justify-center border font-bold
+                ${
+                  index === current.patternIndex
+                    ? current.match
+                      ? "bg-green-500 text-white"
+                      : "bg-red-500 text-white"
+                    : "bg-gray-100 dark:bg-gray-800"
+                }`}
+              >
+                {ch}
+              </div>
+            ))}
+
+          </div>
+
+        </div>
+
+      </div>
+
+      <div className="flex gap-3 mt-8">
+
+        <button
+          onClick={nextStep}
+          className="px-4 py-2 rounded-lg bg-violet-600 text-white flex items-center gap-2"
+        >
+          <Play size={18} />
+          Next Step
+        </button>
+
+        <button
+          onClick={reset}
+          className="px-4 py-2 rounded-lg bg-gray-600 text-white flex items-center gap-2"
+        >
+          <RotateCcw size={18} />
+          Reset
+        </button>
+
+        <button
+          onClick={() => setStep(states.length - 1)}
+          className="px-4 py-2 rounded-lg bg-blue-600 text-white flex items-center gap-2"
+        >
+          <SkipForward size={18} />
+          Finish
+        </button>
+
+      </div>
+
+      <div className="mt-6 rounded-lg bg-gray-100 dark:bg-gray-800 p-4 space-y-2">
+
+        <p>
+          <strong>Current Text Index (i):</strong> {current.textIndex}
+        </p>
+
+        <p>
+          <strong>Current Pattern Index (j):</strong> {current.patternIndex}
+        </p>
+
+        <p>
+          <strong>Status:</strong>{" "}
+          {current.fullMatch
+            ? "✅ Full Match Found!"
+            : current.match
+            ? "Characters Match ✅"
+            : "Characters Mismatch ❌ — jumping j via LPS"}
+        </p>
+
+        <div>
+          <strong>LPS Array:</strong>
+          <div className="flex flex-wrap gap-1 mt-1">
+            {lps.map((val, idx) => (
+              <div
+                key={idx}
+                className="w-8 h-8 rounded flex items-center justify-center text-xs font-bold border bg-violet-100 dark:bg-violet-900"
+              >
+                {val}
+              </div>
+            ))}
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/kmp-algorithm/codeBlock.jsx b/src/app/visualizer/string/kmp-algorithm/codeBlock.jsx
new file mode 100644
index 000000000..8ed386671
--- /dev/null
+++ b/src/app/visualizer/string/kmp-algorithm/codeBlock.jsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { Copy } from "lucide-react";
+import { useState } from "react";
+
+const code = `function computeLPS(pattern) {
+  const lps = new Array(pattern.length).fill(0);
+
+  let len = 0;
+  let i = 1;
+
+  while (i < pattern.length) {
+    if (pattern[i] === pattern[len]) {
+      len++;
+      lps[i] = len;
+      i++;
+    } else {
+      if (len !== 0) {
+        len = lps[len - 1];
+      } else {
+        lps[i] = 0;
+        i++;
+      }
+    }
+  }
+
+  return lps;
+}
+
+function KMPSearch(text, pattern) {
+  const lps = computeLPS(pattern);
+
+  let i = 0;
+  let j = 0;
+
+  while (i < text.length) {
+    if (pattern[j] === text[i]) {
+      i++;
+      j++;
+    }
+
+    if (j === pattern.length) {
+      console.log("Pattern found at index", i - j);
+      j = lps[j - 1];
+    } else if (
+      i < text.length &&
+      pattern[j] !== text[i]
+    ) {
+      if (j !== 0) {
+        j = lps[j - 1];
+      } else {
+        i++;
+      }
+    }
+  }
+}`;
+
+export default function CodeBlock() {
+  const [copied, setCopied] = useState(false);
+
+  const copyCode = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+
+    setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
+
+  return (
+    <div className="rounded-xl overflow-hidden border bg-[#0d1117]">
+
+      <div className="flex items-center justify-between px-5 py-3 border-b border-gray-700">
+
+        <h2 className="text-white font-semibold">
+          JavaScript Implementation
+        </h2>
+
+        <button
+          onClick={copyCode}
+          className="flex items-center gap-2 px-3 py-2 rounded-lg bg-violet-600 hover:bg-violet-700 text-white transition"
+        >
+          <Copy size={16} />
+
+          {copied ? "Copied!" : "Copy"}
+        </button>
+
+      </div>
+
+      <pre className="overflow-x-auto p-6 text-sm text-green-400">
+        <code>{code}</code>
+      </pre>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/kmp-algorithm/content.jsx b/src/app/visualizer/string/kmp-algorithm/content.jsx
new file mode 100644
index 000000000..13c250eca
--- /dev/null
+++ b/src/app/visualizer/string/kmp-algorithm/content.jsx
@@ -0,0 +1,152 @@
+"use client";
+
+export default function Content() {
+  return (
+    <div className="space-y-8">
+
+      {/* Overview */}
+      <section>
+        <h2 className="text-3xl font-bold mb-4">
+          Knuth-Morris-Pratt (KMP) Algorithm
+        </h2>
+
+        <p className="text-gray-700 dark:text-gray-300 leading-8">
+          The Knuth-Morris-Pratt (KMP) Algorithm is an efficient string
+          pattern matching algorithm. Unlike the naive approach, KMP avoids
+          unnecessary comparisons by preprocessing the pattern and creating
+          an LPS (Longest Prefix Suffix) array. This allows the algorithm
+          to skip characters instead of restarting comparisons from the
+          beginning.
+        </p>
+      </section>
+
+      {/* Working */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4">
+          How KMP Works
+        </h2>
+
+        <ol className="list-decimal pl-6 space-y-3 text-gray-700 dark:text-gray-300">
+          <li>Preprocess the pattern to build the LPS array.</li>
+          <li>Compare characters of the text and pattern.</li>
+          <li>If characters match, move both pointers.</li>
+          <li>If mismatch occurs, use the LPS array to skip comparisons.</li>
+          <li>Repeat until the entire text is scanned.</li>
+        </ol>
+      </section>
+
+      {/* Example */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4">
+          Example
+        </h2>
+
+        <div className="rounded-xl border p-5 bg-gray-50 dark:bg-[#222]">
+          <p>
+            <strong>Text:</strong> ABABDABACDABABCABAB
+          </p>
+
+          <p className="mt-2">
+            <strong>Pattern:</strong> ABABCABAB
+          </p>
+
+          <p className="mt-4">
+            KMP preprocesses the pattern, builds the LPS array, and finds the
+            pattern without rechecking previously matched characters.
+          </p>
+        </div>
+      </section>
+
+      {/* Time Complexity */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4">
+          Time Complexity
+        </h2>
+
+        <div className="overflow-x-auto">
+          <table className="w-full border">
+
+            <thead className="bg-violet-600 text-white">
+              <tr>
+                <th className="border px-4 py-3">Case</th>
+                <th className="border px-4 py-3">Complexity</th>
+              </tr>
+            </thead>
+
+            <tbody>
+
+              <tr>
+                <td className="border px-4 py-3">Best</td>
+                <td className="border px-4 py-3">O(n + m)</td>
+              </tr>
+
+              <tr>
+                <td className="border px-4 py-3">Average</td>
+                <td className="border px-4 py-3">O(n + m)</td>
+              </tr>
+
+              <tr>
+                <td className="border px-4 py-3">Worst</td>
+                <td className="border px-4 py-3">O(n + m)</td>
+              </tr>
+
+            </tbody>
+
+          </table>
+        </div>
+
+        <p className="mt-4 text-gray-700 dark:text-gray-300">
+          Here,
+          <br />
+          <strong>n</strong> = Length of the text
+          <br />
+          <strong>m</strong> = Length of the pattern
+        </p>
+      </section>
+
+      {/* Space Complexity */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4">
+          Space Complexity
+        </h2>
+
+        <p className="text-gray-700 dark:text-gray-300">
+          The auxiliary space required is <strong>O(m)</strong> because the
+          algorithm stores the LPS array for the pattern.
+        </p>
+      </section>
+
+      {/* Advantages */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4">
+          Advantages
+        </h2>
+
+        <ul className="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
+          <li>Avoids unnecessary comparisons.</li>
+          <li>Linear time complexity.</li>
+          <li>Efficient for large text searching.</li>
+          <li>Widely used in search engines and text editors.</li>
+          <li>Works well for repeated pattern matching.</li>
+        </ul>
+      </section>
+
+      {/* Applications */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4">
+          Applications
+        </h2>
+
+        <ul className="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
+          <li>Text editors (Find & Replace).</li>
+          <li>DNA sequence matching.</li>
+          <li>Search engines.</li>
+          <li>Plagiarism detection.</li>
+          <li>Compiler pattern matching.</li>
+          <li>Bioinformatics.</li>
+        </ul>
+      </section>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/kmp-algorithm/page.jsx b/src/app/visualizer/string/kmp-algorithm/page.jsx
new file mode 100644
index 000000000..017cebc79
--- /dev/null
+++ b/src/app/visualizer/string/kmp-algorithm/page.jsx
@@ -0,0 +1,35 @@
+import Animation from "./animation";
+import Code from "./codeBlock";
+import Content from "./content";
+
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("String", "KMP Algorithm")}
+      title="KMP Algorithm"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other string algorithms"
+          links={[
+            {
+              text: "Rabin-Karp",
+              url: "../rabin-karp",
+            },
+            {
+              text: "Z Algorithm",
+              url: "../z-algorithm",
+            },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/kmp-algorithm/quiz.jsx b/src/app/visualizer/string/kmp-algorithm/quiz.jsx
new file mode 100644
index 000000000..eef0b737c
--- /dev/null
+++ b/src/app/visualizer/string/kmp-algorithm/quiz.jsx
@@ -0,0 +1,196 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What does KMP stand for?",
+    options: [
+      "Knuth-Morris-Pratt",
+      "Kernel Matching Process",
+      "Known Matching Procedure",
+      "Key Matching Pattern",
+    ],
+    answer: "Knuth-Morris-Pratt",
+    explanation:
+      "KMP stands for Knuth-Morris-Pratt, an efficient string pattern matching algorithm.",
+  },
+  {
+    question: "What is the primary purpose of the KMP algorithm?",
+    options: [
+      "Sorting arrays",
+      "Searching for a pattern in a text",
+      "Compressing strings",
+      "Finding duplicate characters",
+    ],
+    answer: "Searching for a pattern in a text",
+    explanation:
+      "KMP efficiently searches for occurrences of a pattern within a text.",
+  },
+  {
+    question: "Which data structure does KMP preprocess?",
+    options: [
+      "Text",
+      "Pattern",
+      "Hash Table",
+      "Queue",
+    ],
+    answer: "Pattern",
+    explanation:
+      "The pattern is preprocessed to create the LPS array.",
+  },
+  {
+    question: "What does LPS stand for?",
+    options: [
+      "Longest Prefix Suffix",
+      "Longest Proper Sequence",
+      "Linear Pattern Search",
+      "Longest Pattern String",
+    ],
+    answer: "Longest Prefix Suffix",
+    explanation:
+      "LPS stores the length of the longest proper prefix which is also a suffix.",
+  },
+  {
+    question: "What is the worst-case time complexity of KMP?",
+    options: [
+      "O(n²)",
+      "O(n log n)",
+      "O(n + m)",
+      "O(log n)",
+    ],
+    answer: "O(n + m)",
+    explanation:
+      "KMP preprocesses the pattern in O(m) and searches the text in O(n).",
+  },
+    {
+    question: "Which array helps KMP skip unnecessary comparisons?",
+    options: [
+      "Prefix Array",
+      "LPS Array",
+      "Suffix Array",
+      "Hash Array",
+    ],
+    answer: "LPS Array",
+    explanation:
+      "The LPS array stores the longest proper prefix that is also a suffix, allowing KMP to avoid redundant comparisons.",
+  },
+  {
+    question: "What is the space complexity of the KMP algorithm?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(m)",
+      "O(n)",
+    ],
+    answer: "O(m)",
+    explanation:
+      "The LPS array requires extra space proportional to the pattern length.",
+  },
+  {
+    question: "Which of the following algorithms is generally slower than KMP for repeated pattern searching?",
+    options: [
+      "Naive String Matching",
+      "Binary Search",
+      "Merge Sort",
+      "Heap Sort",
+    ],
+    answer: "Naive String Matching",
+    explanation:
+      "The naive algorithm may repeatedly compare the same characters, unlike KMP.",
+  },
+  {
+    question: "When is the LPS array computed?",
+    options: [
+      "After searching the text",
+      "Before searching begins",
+      "Only after a mismatch",
+      "At the end of the algorithm",
+    ],
+    answer: "Before searching begins",
+    explanation:
+      "KMP preprocesses the pattern and builds the LPS array before scanning the text.",
+  },
+  {
+    question: "Which statement about the KMP algorithm is true?",
+    options: [
+      "It never preprocesses the pattern",
+      "It preprocesses the pattern using the LPS array",
+      "It only works on sorted strings",
+      "It uses recursion for searching",
+    ],
+    answer: "It preprocesses the pattern using the LPS array",
+    explanation:
+      "Pattern preprocessing is the key optimization that makes KMP efficient.",
+  },
+    {
+    question: "What happens when a mismatch occurs after some characters have matched?",
+    options: [
+      "The search restarts from the beginning",
+      "The pattern index is updated using the LPS array",
+      "The text index is reset",
+      "The algorithm stops",
+    ],
+    answer: "The pattern index is updated using the LPS array",
+    explanation:
+      "KMP uses the LPS array to continue matching without rechecking previously matched characters.",
+  },
+  {
+    question: "Which type of applications commonly use the KMP algorithm?",
+    options: [
+      "Text Editors",
+      "Search Engines",
+      "DNA Sequence Matching",
+      "All of the above",
+    ],
+    answer: "All of the above",
+    explanation:
+      "KMP is widely used in text processing, bioinformatics, and search systems.",
+  },
+  {
+    question: "Which component of KMP allows it to achieve linear time complexity?",
+    options: [
+      "Hash Table",
+      "Queue",
+      "LPS Array",
+      "Stack",
+    ],
+    answer: "LPS Array",
+    explanation:
+      "The LPS array prevents redundant comparisons, making the search linear.",
+  },
+  {
+    question: "Which algorithm is considered an improvement over the Naive String Matching algorithm?",
+    options: [
+      "Bubble Sort",
+      "KMP Algorithm",
+      "Insertion Sort",
+      "Selection Sort",
+    ],
+    answer: "KMP Algorithm",
+    explanation:
+      "KMP improves efficiency by preprocessing the pattern and skipping unnecessary comparisons.",
+  },
+  {
+    question: "Why is the KMP algorithm preferred for large text searching?",
+    options: [
+      "It uses recursion",
+      "It has linear time complexity",
+      "It requires no extra memory",
+      "It works only for short strings",
+    ],
+    answer: "It has linear time complexity",
+    explanation:
+      "KMP runs in O(n + m), making it highly efficient for searching large texts.",
+  },
+];
+
+export default function KMPAlgorithmQuiz() {
+  return (
+    <QuizEngine
+      title="KMP Algorithm Quiz"
+      subtitle="Test your understanding of the Knuth-Morris-Pratt (KMP) string matching algorithm."
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/kmp-algorithm/quiz/page.jsx b/src/app/visualizer/string/kmp-algorithm/quiz/page.jsx
new file mode 100644
index 000000000..45c3070a8
--- /dev/null
+++ b/src/app/visualizer/string/kmp-algorithm/quiz/page.jsx
@@ -0,0 +1,5 @@
+import KMPAlgorithmQuiz from "../quiz";
+
+export default function Page() {
+  return <KMPAlgorithmQuiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/longest-common-prefix/animation.jsx b/src/app/visualizer/string/longest-common-prefix/animation.jsx
new file mode 100644
index 000000000..ecbcd3b45
--- /dev/null
+++ b/src/app/visualizer/string/longest-common-prefix/animation.jsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { motion } from "framer-motion";
+
+export default function Animation() {
+  const [input, setInput] = useState("flower, flow, flight");
+
+  const { words, prefix } = useMemo(() => {
+    const arr = input
+      .split(",")
+      .map((item) => item.trim())
+      .filter(Boolean);
+
+    if (arr.length === 0) {
+      return { words: [], prefix: "" };
+    }
+
+    let common = arr[0];
+
+    for (let i = 1; i < arr.length; i++) {
+      while (!arr[i].startsWith(common) && common.length > 0) {
+        common = common.slice(0, -1);
+      }
+
+      if (common === "") break;
+    }
+
+    return {
+      words: arr,
+      prefix: common,
+    };
+  }, [input]);
+
+  return (
+    <div className="space-y-6">
+
+      <div>
+        <label className="text-sm font-semibold">
+          Enter strings (comma separated)
+        </label>
+
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="flower, flow, flight"
+          className="mt-2 w-full rounded-lg border p-3 outline-none focus:ring-2 focus:ring-pink-500"
+        />
+      </div>
+
+      <div className="space-y-4">
+        {words.map((word, rowIndex) => (
+          <motion.div
+            key={rowIndex}
+            initial={{ opacity: 0, x: -30 }}
+            animate={{ opacity: 1, x: 0 }}
+            className="flex flex-wrap gap-2"
+          >
+            {word.split("").map((char, index) => (
+              <motion.div
+                key={index}
+                initial={{ scale: 0 }}
+                animate={{ scale: 1 }}
+                transition={{
+                  delay: index * 0.05,
+                }}
+                className={`w-10 h-10 rounded-lg flex items-center justify-center font-bold border
+                ${
+                  index < prefix.length
+                    ? "bg-pink-500 text-white border-pink-500"
+                    : "bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600"
+                }`}
+              >
+                {char}
+              </motion.div>
+            ))}
+          </motion.div>
+        ))}
+      </div>
+
+      <motion.div
+        layout
+        className="rounded-xl border bg-pink-50 dark:bg-pink-950 p-6"
+      >
+        <h3 className="text-lg font-bold text-pink-600">
+          Longest Common Prefix
+        </h3>
+
+        <div className="mt-3 text-3xl font-black">
+          {prefix ? (
+            <span className="text-pink-600">"{prefix}"</span>
+          ) : (
+            <span className="text-red-500">
+              No Common Prefix
+            </span>
+          )}
+        </div>
+
+        <p className="mt-3 text-gray-600 dark:text-gray-300">
+          Length: <strong>{prefix.length}</strong>
+        </p>
+      </motion.div>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/longest-common-prefix/codeBlock.jsx b/src/app/visualizer/string/longest-common-prefix/codeBlock.jsx
new file mode 100644
index 000000000..6aa209e16
--- /dev/null
+++ b/src/app/visualizer/string/longest-common-prefix/codeBlock.jsx
@@ -0,0 +1,139 @@
+"use client";
+
+const cpp = `#include <iostream>
+#include <vector>
+using namespace std;
+
+string longestCommonPrefix(vector<string>& strs) {
+    if (strs.empty()) return "";
+
+    string prefix = strs[0];
+
+    for (int i = 1; i < strs.size(); i++) {
+        while (strs[i].find(prefix) != 0) {
+            prefix.pop_back();
+
+            if (prefix.empty())
+                return "";
+        }
+    }
+
+    return prefix;
+}
+
+int main() {
+    vector<string> strs = {"flower", "flow", "flight"};
+
+    cout << "Longest Common Prefix: "
+         << longestCommonPrefix(strs);
+
+    return 0;
+}
+`;
+
+const java = `class Solution {
+
+    public String longestCommonPrefix(String[] strs) {
+
+        if (strs.length == 0) return "";
+
+        String prefix = strs[0];
+
+        for (int i = 1; i < strs.length; i++) {
+
+            while (!strs[i].startsWith(prefix)) {
+                prefix = prefix.substring(0, prefix.length() - 1);
+
+                if (prefix.isEmpty())
+                    return "";
+            }
+        }
+
+        return prefix;
+    }
+}
+`;
+
+const python = `def longest_common_prefix(strs):
+
+    if not strs:
+        return ""
+
+    prefix = strs[0]
+
+    for word in strs[1:]:
+
+        while not word.startswith(prefix):
+            prefix = prefix[:-1]
+
+            if prefix == "":
+                return ""
+
+    return prefix
+
+print(longest_common_prefix(
+    ["flower","flow","flight"]
+))
+`;
+
+const javascript = `function longestCommonPrefix(strs) {
+
+    if (strs.length === 0) return "";
+
+    let prefix = strs[0];
+
+    for (let i = 1; i < strs.length; i++) {
+
+        while (!strs[i].startsWith(prefix)) {
+            prefix = prefix.slice(0, -1);
+
+            if (prefix === "")
+                return "";
+        }
+    }
+
+    return prefix;
+}
+
+console.log(
+    longestCommonPrefix([
+        "flower",
+        "flow",
+        "flight"
+    ])
+);
+`;
+
+export default function CodeBlock() {
+  return (
+    <div className="space-y-8">
+      <div>
+        <h2 className="text-xl font-bold mb-3">C++</h2>
+        <pre className="rounded-lg bg-gray-900 text-green-400 p-4 overflow-x-auto text-sm">
+          <code>{cpp}</code>
+        </pre>
+      </div>
+
+      <div>
+        <h2 className="text-xl font-bold mb-3">Java</h2>
+        <pre className="rounded-lg bg-gray-900 text-green-400 p-4 overflow-x-auto text-sm">
+          <code>{java}</code>
+        </pre>
+      </div>
+
+      <div>
+        <h2 className="text-xl font-bold mb-3">Python</h2>
+        <pre className="rounded-lg bg-gray-900 text-green-400 p-4 overflow-x-auto text-sm">
+          <code>{python}</code>
+        </pre>
+      </div>
+
+      <div>
+        <h2 className="text-xl font-bold mb-3">JavaScript</h2>
+        <pre className="rounded-lg bg-gray-900 text-green-400 p-4 overflow-x-auto text-sm">
+          <code>{javascript}</code>
+        </pre>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/longest-common-prefix/content.jsx b/src/app/visualizer/string/longest-common-prefix/content.jsx
new file mode 100644
index 000000000..837983c06
--- /dev/null
+++ b/src/app/visualizer/string/longest-common-prefix/content.jsx
@@ -0,0 +1,113 @@
+"use client";
+
+import ComplexityGraph from "@/app/components/ui/graph";
+
+export default function Content() {
+  return (
+    <main className="max-w-5xl mx-auto">
+      <article className="bg-white dark:bg-[#111] rounded-2xl border border-gray-200 dark:border-[#222] overflow-hidden">
+
+        {/* Introduction */}
+        <section className="p-6 border-b dark:border-[#222]">
+          <h2 className="text-2xl font-black flex items-center mb-4">
+            <span className="w-1 h-6 bg-pink-500 rounded-full mr-3"></span>
+            What is Longest Common Prefix?
+          </h2>
+
+          <p className="text-gray-700 dark:text-gray-300 leading-8">
+            The <strong>Longest Common Prefix (LCP)</strong> of a group of
+            strings is the longest prefix shared by every string. If no common
+            prefix exists, the result is an empty string.
+          </p>
+
+          <p className="mt-4 text-gray-700 dark:text-gray-300 leading-8">
+            This problem frequently appears in coding interviews and is useful
+            in autocomplete systems, dictionaries, search engines, and text
+            processing.
+          </p>
+        </section>
+
+        {/* Example */}
+        <section className="p-6 border-b dark:border-[#222]">
+          <h2 className="text-2xl font-black flex items-center mb-4">
+            <span className="w-1 h-6 bg-pink-500 rounded-full mr-3"></span>
+            Example
+          </h2>
+
+          <div className="rounded-xl bg-pink-50 dark:bg-pink-950 border border-pink-200 dark:border-pink-800 p-5">
+            <p>
+              <strong>Input:</strong>
+            </p>
+
+            <pre className="mt-2 text-pink-700 dark:text-pink-300">
+{`["flower", "flow", "flight"]`}
+            </pre>
+
+            <p className="mt-4">
+              <strong>Output:</strong>
+            </p>
+
+            <pre className="mt-2 text-green-600 font-bold">
+"fl"
+            </pre>
+          </div>
+        </section>
+
+        {/* Algorithm */}
+        <section className="p-6 border-b dark:border-[#222]">
+          <h2 className="text-2xl font-black flex items-center mb-4">
+            <span className="w-1 h-6 bg-pink-500 rounded-full mr-3"></span>
+            Algorithm
+          </h2>
+
+          <ol className="list-decimal pl-6 space-y-3">
+            <li>Take the first string as the initial prefix.</li>
+            <li>Compare it with every remaining string.</li>
+            <li>
+              If the current string doesn't start with the prefix, remove the
+              last character from the prefix.
+            </li>
+            <li>Repeat until every string begins with the prefix.</li>
+            <li>Return the final prefix.</li>
+          </ol>
+        </section>
+
+        {/* Complexity */}
+        <section className="p-6">
+          <h2 className="text-2xl font-black flex items-center mb-4">
+            <span className="w-1 h-6 bg-pink-500 rounded-full mr-3"></span>
+            Complexity Analysis
+          </h2>
+
+          <ul className="list-disc pl-6 space-y-3">
+            <li>
+              <strong>Best Case:</strong> O(n)
+            </li>
+
+            <li>
+              <strong>Average Case:</strong> O(n × m)
+            </li>
+
+            <li>
+              <strong>Worst Case:</strong> O(n × m)
+            </li>
+
+            <li>
+              <strong>Space Complexity:</strong> O(1)
+            </li>
+          </ul>
+
+          <div className="mt-8">
+            <ComplexityGraph
+              bestCase={(n) => n}
+              averageCase={(n) => n * Math.log2(n)}
+              worstCase={(n) => n * Math.log2(n)}
+              maxN={25}
+            />
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/longest-common-prefix/page.jsx b/src/app/visualizer/string/longest-common-prefix/page.jsx
new file mode 100644
index 000000000..6ae0d92cc
--- /dev/null
+++ b/src/app/visualizer/string/longest-common-prefix/page.jsx
@@ -0,0 +1,46 @@
+import Animation from "./animation";
+import Code from "./codeBlock";
+import Content from "./content";
+
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths(
+        "String",
+        "Longest Common Prefix"
+      )}
+      title="Longest Common Prefix"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other string algorithms"
+          links={[
+            {
+              text: "Reverse String",
+              url: "../reverse-string",
+            },
+            {
+              text: "Palindrome Check",
+              url: "../palindrome-check",
+            },
+            {
+              text: "Character Frequency",
+              url: "../character-frequency",
+            },
+            {
+              text: "Anagram Check",
+              url: "../anagram-check",
+            },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/longest-common-prefix/quiz.jsx b/src/app/visualizer/string/longest-common-prefix/quiz.jsx
new file mode 100644
index 000000000..4ce39ccad
--- /dev/null
+++ b/src/app/visualizer/string/longest-common-prefix/quiz.jsx
@@ -0,0 +1,188 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const LongestCommonPrefixQuiz = () => {
+  const questions = [
+    {
+      question: "What is the Longest Common Prefix (LCP)?",
+      options: [
+        "The longest suffix shared by all strings",
+        "The longest prefix shared by all strings",
+        "The shortest common substring",
+        "The longest palindrome",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The Longest Common Prefix is the longest prefix that every string shares.",
+    },
+    {
+      question: 'What is the LCP of ["flower", "flow", "flight"]?',
+      options: ["flo", "flow", "fl", "f"],
+      correctAnswer: 2,
+      explanation:
+        '"fl" is the longest prefix common to all three strings.',
+    },
+    {
+      question: 'What is the output for ["dog", "racecar", "car"]?',
+      options: ["d", "do", "", "car"],
+      correctAnswer: 2,
+      explanation:
+        "There is no common prefix among the strings.",
+    },
+    {
+      question: "Which string is usually selected first as the initial prefix?",
+      options: [
+        "The shortest string",
+        "The longest string",
+        "The first string",
+        "The last string",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "The first string is commonly used as the initial prefix.",
+    },
+    {
+      question: "If a string does not start with the current prefix, what should happen?",
+      options: [
+        "Reverse the string",
+        "Remove the last character from the prefix",
+        "Sort the string",
+        "Skip the string",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The prefix is shortened until it matches.",
+    },
+    {
+      question: "What is the worst-case time complexity of the horizontal scanning approach?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n × m)",
+        "O(n²)",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Each character of each string may be compared once.",
+    },
+    {
+      question: "What does n represent in O(n × m)?",
+      options: [
+        "Length of the prefix",
+        "Number of strings",
+        "ASCII value",
+        "Number of characters removed",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "n is the number of strings.",
+    },
+    {
+      question: "What does m represent in O(n × m)?",
+      options: [
+        "Maximum string length",
+        "Number of words",
+        "Memory used",
+        "Prefix count",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "m is the maximum length of a string.",
+    },
+    {
+      question: "Which data structure is required for the basic LCP algorithm?",
+      options: [
+        "Stack",
+        "Queue",
+        "HashMap",
+        "None",
+      ],
+      correctAnswer: 3,
+      explanation:
+        "The basic approach only compares strings directly.",
+    },
+    {
+      question: "Which application commonly uses Longest Common Prefix?",
+      options: [
+        "Autocomplete",
+        "Spell Checker",
+        "Search Suggestions",
+        "All of the above",
+      ],
+      correctAnswer: 3,
+      explanation:
+        "LCP is useful in autocomplete, search engines, and text processing.",
+    },
+    {
+      question: "If only one string is provided, what is the LCP?",
+      options: [
+        "Empty string",
+        "First character",
+        "The string itself",
+        "Undefined",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "A single string is its own longest common prefix.",
+    },
+    {
+      question: "Which algorithmic technique is commonly used in this solution?",
+      options: [
+        "Greedy",
+        "Dynamic Programming",
+        "Backtracking",
+        "Divide and Conquer",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "The prefix is greedily reduced until it matches all strings.",
+    },
+    {
+      question: "When does the algorithm stop reducing the prefix?",
+      options: [
+        "When it becomes empty",
+        "When every string starts with it",
+        "Both A and B",
+        "Never",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "It stops if the prefix matches all strings or becomes empty.",
+    },
+    {
+      question: "Which of the following has LCP = 'inter'?",
+      options: [
+        '["internet","internal","interval"]',
+        '["apple","ape","april"]',
+        '["dog","door","cat"]',
+        '["sun","moon","star"]',
+      ],
+      correctAnswer: 0,
+      explanation:
+        "All three strings begin with 'inter'.",
+    },
+    {
+      question: "What is the space complexity of the basic LCP algorithm?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Only a prefix variable is maintained, requiring constant extra space.",
+    },
+  ];
+
+  return (
+    <QuizEngine
+      title="Longest Common Prefix Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default LongestCommonPrefixQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/string/longest-common-prefix/quiz/page.jsx b/src/app/visualizer/string/longest-common-prefix/quiz/page.jsx
new file mode 100644
index 000000000..bd07ff86b
--- /dev/null
+++ b/src/app/visualizer/string/longest-common-prefix/quiz/page.jsx
@@ -0,0 +1,5 @@
+import LongestCommonPrefixQuiz from "../quiz";
+
+export default function Page() {
+  return <LongestCommonPrefixQuiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/longest-substring/animation.jsx b/src/app/visualizer/string/longest-substring/animation.jsx
new file mode 100644
index 000000000..fc5ec1e47
--- /dev/null
+++ b/src/app/visualizer/string/longest-substring/animation.jsx
@@ -0,0 +1,253 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+export default function Animation() {
+  const [input, setInput] = useState("abcabcbb");
+
+  const [steps, setSteps] = useState([]);
+  const [currentStep, setCurrentStep] = useState(0);
+  const [playing, setPlaying] = useState(false);
+  const [speed, setSpeed] = useState(1000);
+
+  const generatedSteps = useMemo(() => {
+    const arr = input.split("");
+
+    const map = new Map();
+
+    let left = 0;
+    let maxLength = 0;
+    let bestStart = 0;
+
+    const history = [];
+
+    for (let right = 0; right < arr.length; right++) {
+      const ch = arr[right];
+
+      if (map.has(ch) && map.get(ch) >= left) {
+        left = map.get(ch) + 1;
+      }
+
+      map.set(ch, right);
+
+      const length = right - left + 1;
+
+      if (length > maxLength) {
+        maxLength = length;
+        bestStart = left;
+      }
+
+      history.push({
+        left,
+        right,
+        currentChar: ch,
+        currentLength: length,
+        maxLength,
+        bestStart,
+        map: new Map(map),
+      });
+    }
+
+    return history;
+  }, [input]);
+
+  useEffect(() => {
+    setSteps(generatedSteps);
+    setCurrentStep(0);
+    setPlaying(false);
+  }, [generatedSteps]);
+
+  useEffect(() => {
+    if (!playing) return;
+
+    if (currentStep >= steps.length - 1) {
+      setPlaying(false);
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setCurrentStep((prev) => prev + 1);
+    }, speed);
+
+    return () => clearTimeout(timer);
+  }, [playing, currentStep, speed, steps]);
+
+  if (steps.length === 0) {
+    return (
+      <div className="bg-white rounded-xl shadow-md p-8">
+        Enter a string to visualize.
+      </div>
+    );
+  }
+
+  const step = steps[currentStep];
+
+  return (
+    <div className="bg-white rounded-xl shadow-md p-6">
+      <h2 className="text-2xl font-bold mb-6">
+        Sliding Window Visualization
+      </h2>
+
+      <div className="mb-6">
+        <label className="font-semibold block mb-2">
+          Enter String
+        </label>
+
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          className="w-full border rounded-lg p-3"
+          placeholder="abcabcbb"
+        />
+      </div>
+
+      <div className="flex flex-wrap gap-3 mb-6">
+        <button
+          onClick={() => setPlaying(!playing)}
+          className="bg-indigo-600 text-white px-4 py-2 rounded-lg"
+        >
+          {playing ? "Pause" : "Play"}
+        </button>
+
+        <button
+          onClick={() =>
+            setCurrentStep((prev) => Math.max(prev - 1, 0))
+          }
+          className="bg-gray-200 px-4 py-2 rounded-lg"
+        >
+          Previous
+        </button>
+
+        <button
+          onClick={() =>
+            setCurrentStep((prev) =>
+              Math.min(prev + 1, steps.length - 1)
+            )
+          }
+          className="bg-gray-200 px-4 py-2 rounded-lg"
+        >
+          Next
+        </button>
+
+        <button
+          onClick={() => {
+            setCurrentStep(0);
+            setPlaying(false);
+          }}
+          className="bg-red-500 text-white px-4 py-2 rounded-lg"
+        >
+          Reset
+        </button>
+      </div>
+
+      <div className="mb-8">
+        <label className="font-semibold">
+          Animation Speed
+        </label>
+
+        <input
+          type="range"
+          min="300"
+          max="2000"
+          step="100"
+          value={speed}
+          onChange={(e) => setSpeed(Number(e.target.value))}
+          className="w-full mt-2"
+        />
+
+        <p>{speed} ms</p>
+      </div>
+
+      <div className="flex flex-wrap gap-3 justify-center">
+        {input.split("").map((char, index) => {
+          let bg = "bg-gray-200";
+
+          if (index >= step.left && index <= step.right)
+            bg = "bg-green-500 text-white";
+
+          if (
+            index >= step.bestStart &&
+            index < step.bestStart + step.maxLength
+          )
+            bg = "bg-blue-600 text-white";
+
+          return (
+            <div
+              key={index}
+              className={`${bg} w-14 h-14 rounded-xl flex flex-col justify-center items-center font-bold text-lg`}
+            >
+              {char}
+              <span className="text-xs">{index}</span>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div className="bg-indigo-100 p-4 rounded-lg">
+          <p className="font-semibold">Left</p>
+          <p className="text-2xl">{step.left}</p>
+        </div>
+
+        <div className="bg-purple-100 p-4 rounded-lg">
+          <p className="font-semibold">Right</p>
+          <p className="text-2xl">{step.right}</p>
+        </div>
+
+        <div className="bg-green-100 p-4 rounded-lg">
+          <p className="font-semibold">Current Length</p>
+          <p className="text-2xl">{step.currentLength}</p>
+        </div>
+
+        <div className="bg-orange-100 p-4 rounded-lg">
+          <p className="font-semibold">Maximum Length</p>
+          <p className="text-2xl">{step.maxLength}</p>
+        </div>
+      </div>
+
+      <div className="mt-8 bg-gray-100 rounded-lg p-5">
+        <h3 className="font-bold text-lg">
+          Current Character
+        </h3>
+
+        <p className="mt-2 text-xl">
+          {step.currentChar}
+        </p>
+      </div>
+
+      <div className="mt-8">
+        <h3 className="font-bold text-xl mb-3">
+          HashMap Contents
+        </h3>
+
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+          {[...step.map.entries()].map(([key, value]) => (
+            <div
+              key={key}
+              className="border rounded-lg p-3 text-center"
+            >
+              <p className="font-bold">{key}</p>
+              <p>Index: {value}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <p className="font-semibold">
+          Step {currentStep + 1} / {steps.length}
+        </p>
+
+        <div className="w-full bg-gray-200 rounded-full h-3 mt-2">
+          <div
+            className="bg-indigo-600 h-3 rounded-full"
+            style={{
+              width: `${((currentStep + 1) / steps.length) * 100}%`,
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/longest-substring/codeBlock.jsx b/src/app/visualizer/string/longest-substring/codeBlock.jsx
new file mode 100644
index 000000000..0513d061d
--- /dev/null
+++ b/src/app/visualizer/string/longest-substring/codeBlock.jsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+
+const code = {
+  cpp: `#include <iostream>
+#include <unordered_map>
+using namespace std;
+
+// Your C++ code here
+`,
+
+  java: `import java.util.*;
+
+// Your Java code here
+`,
+
+  python: `# Your Python code here
+`,
+
+  javascript: `// Your JavaScript code here
+`,
+};
+
+export default function CodeBlock() {
+  const [language, setLanguage] = useState("cpp");
+
+  return (
+    <div className="bg-gray-900 rounded-xl overflow-hidden shadow-lg">
+      <div className="bg-gray-800 px-5 py-3 flex justify-between items-center">
+        <h2 className="text-white font-semibold">
+          {language.toUpperCase()} Code
+        </h2>
+
+        <select
+          value={language}
+          onChange={(e) => setLanguage(e.target.value)}
+          className="bg-gray-700 text-white px-3 py-1 rounded-md"
+        >
+          <option value="cpp">C++</option>
+          <option value="java">Java</option>
+          <option value="python">Python</option>
+          <option value="javascript">JavaScript</option>
+        </select>
+      </div>
+
+      <pre className="overflow-x-auto p-6 text-green-400 text-sm leading-7">
+        <code>{code[language]}</code>
+      </pre>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/longest-substring/content.jsx b/src/app/visualizer/string/longest-substring/content.jsx
new file mode 100644
index 000000000..26555ddd8
--- /dev/null
+++ b/src/app/visualizer/string/longest-substring/content.jsx
@@ -0,0 +1,275 @@
+export default function Content() {
+  return (
+    <div className="bg-white rounded-xl shadow-md p-8 space-y-8">
+
+      {/* Problem Statement */}
+      <section>
+        <h2 className="text-3xl font-bold mb-4">
+          Problem Statement
+        </h2>
+
+        <p className="text-gray-700 leading-8">
+          Given a string <strong>s</strong>, find the length of the
+          longest substring without repeating characters.
+        </p>
+
+        <div className="bg-indigo-50 p-4 rounded-lg mt-4">
+          <p>
+            <strong>Example 1</strong>
+          </p>
+
+          <p className="mt-2">
+            Input: <code>"abcabcbb"</code>
+          </p>
+
+          <p>Output: <code>3</code></p>
+
+          <p className="mt-2">
+            Explanation: The longest substring is
+            <strong> "abc"</strong>.
+          </p>
+        </div>
+
+        <div className="bg-indigo-50 p-4 rounded-lg mt-4">
+          <p>
+            <strong>Example 2</strong>
+          </p>
+
+          <p className="mt-2">
+            Input: <code>"bbbbb"</code>
+          </p>
+
+          <p>Output: <code>1</code></p>
+
+          <p className="mt-2">
+            Explanation: Longest substring is
+            <strong> "b"</strong>.
+          </p>
+        </div>
+      </section>
+
+      {/* Algorithm */}
+      <section>
+
+        <h2 className="text-3xl font-bold mb-4">
+          Sliding Window Algorithm
+        </h2>
+
+        <ol className="list-decimal pl-6 space-y-3 text-gray-700 leading-8">
+
+          <li>Create an empty HashMap.</li>
+
+          <li>Maintain two pointers: Left and Right.</li>
+
+          <li>Move Right pointer one step at a time.</li>
+
+          <li>
+            If the character already exists inside the current window,
+            move Left pointer after its previous occurrence.
+          </li>
+
+          <li>
+            Store current character's latest index in the HashMap.
+          </li>
+
+          <li>
+            Update the maximum window length.
+          </li>
+
+          <li>
+            Continue until Right reaches the end.
+          </li>
+
+        </ol>
+
+      </section>
+
+      {/* Dry Run */}
+      <section>
+
+        <h2 className="text-3xl font-bold mb-4">
+          Dry Run
+        </h2>
+
+        <div className="overflow-x-auto">
+
+          <table className="w-full border">
+
+            <thead className="bg-indigo-100">
+
+              <tr>
+
+                <th className="border p-3">Step</th>
+                <th className="border p-3">Character</th>
+                <th className="border p-3">Left</th>
+                <th className="border p-3">Right</th>
+                <th className="border p-3">Window</th>
+                <th className="border p-3">Max Length</th>
+
+              </tr>
+
+            </thead>
+
+            <tbody>
+
+              <tr>
+                <td className="border p-3">1</td>
+                <td className="border p-3">a</td>
+                <td className="border p-3">0</td>
+                <td className="border p-3">0</td>
+                <td className="border p-3">a</td>
+                <td className="border p-3">1</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">2</td>
+                <td className="border p-3">b</td>
+                <td className="border p-3">0</td>
+                <td className="border p-3">1</td>
+                <td className="border p-3">ab</td>
+                <td className="border p-3">2</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">3</td>
+                <td className="border p-3">c</td>
+                <td className="border p-3">0</td>
+                <td className="border p-3">2</td>
+                <td className="border p-3">abc</td>
+                <td className="border p-3">3</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">4</td>
+                <td className="border p-3">a</td>
+                <td className="border p-3">1</td>
+                <td className="border p-3">3</td>
+                <td className="border p-3">bca</td>
+                <td className="border p-3">3</td>
+              </tr>
+
+            </tbody>
+
+          </table>
+
+        </div>
+
+      </section>
+
+      {/* Complexity */}
+
+      <section>
+
+        <h2 className="text-3xl font-bold mb-4">
+          Complexity Analysis
+        </h2>
+
+        <div className="grid md:grid-cols-2 gap-6">
+
+          <div className="bg-green-50 rounded-lg p-6">
+
+            <h3 className="text-xl font-bold mb-2">
+              Time Complexity
+            </h3>
+
+            <p className="text-4xl font-bold text-green-700">
+              O(n)
+            </p>
+
+            <p className="mt-3 text-gray-700">
+              Each character is visited at most twice.
+            </p>
+
+          </div>
+
+          <div className="bg-blue-50 rounded-lg p-6">
+
+            <h3 className="text-xl font-bold mb-2">
+              Space Complexity
+            </h3>
+
+            <p className="text-4xl font-bold text-blue-700">
+              O(min(n, charset))
+            </p>
+
+            <p className="mt-3 text-gray-700">
+              HashMap stores the latest index of characters.
+            </p>
+
+          </div>
+
+        </div>
+
+      </section>
+
+      {/* Applications */}
+
+      <section>
+
+        <h2 className="text-3xl font-bold mb-4">
+          Applications
+        </h2>
+
+        <ul className="list-disc pl-6 space-y-3 text-gray-700">
+
+          <li>Text Processing</li>
+
+          <li>Compiler Design</li>
+
+          <li>Pattern Matching</li>
+
+          <li>Data Compression</li>
+
+          <li>Bioinformatics</li>
+
+          <li>Cyber Security</li>
+
+          <li>Natural Language Processing</li>
+
+          <li>Search Engines</li>
+
+        </ul>
+
+      </section>
+
+      {/* Interview Tips */}
+
+      <section>
+
+        <h2 className="text-3xl font-bold mb-4">
+          Interview Tips
+        </h2>
+
+        <div className="bg-yellow-50 border-l-4 border-yellow-500 p-5 rounded">
+
+          <ul className="list-disc pl-6 space-y-3">
+
+            <li>
+              Sliding Window is the most optimized approach.
+            </li>
+
+            <li>
+              Avoid nested loops for better performance.
+            </li>
+
+            <li>
+              Always update the HashMap after processing a character.
+            </li>
+
+            <li>
+              Move the Left pointer only forward.
+            </li>
+
+            <li>
+              Be comfortable explaining why the algorithm is O(n).
+            </li>
+
+          </ul>
+
+        </div>
+
+      </section>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/longest-substring/page.jsx b/src/app/visualizer/string/longest-substring/page.jsx
new file mode 100644
index 000000000..fa637257e
--- /dev/null
+++ b/src/app/visualizer/string/longest-substring/page.jsx
@@ -0,0 +1,34 @@
+import Animation from "./animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "./codeBlock";
+import Content from "./content";
+
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths(
+        "String",
+        "Longest Substring Without Repeating Characters"
+      )}
+      title="Longest Substring Without Repeating Characters"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other string algorithms"
+          links={[
+            {
+              text: "Minimum Window Substring",
+              url: "../minimum-window-substring",
+            },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/longest-substring/quiz.jsx b/src/app/visualizer/string/longest-substring/quiz.jsx
new file mode 100644
index 000000000..250418413
--- /dev/null
+++ b/src/app/visualizer/string/longest-substring/quiz.jsx
@@ -0,0 +1,166 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "Which algorithmic technique is used to solve the Longest Substring Without Repeating Characters problem efficiently?",
+    options: [
+      "Sliding Window",
+      "Dynamic Programming",
+      "Binary Search",
+      "Greedy",
+    ],
+    answer: "Sliding Window",
+    explanation:
+      "The Sliding Window technique maintains a window of unique characters while scanning the string.",
+  },
+  {
+    question: "What is the optimal time complexity of the Sliding Window solution?",
+    options: ["O(n)", "O(n²)", "O(log n)", "O(n log n)"],
+    answer: "O(n)",
+    explanation:
+      "Each character is visited at most twice by the left and right pointers.",
+  },
+  {
+    question: "Which data structure is commonly used to store the last occurrence of characters?",
+    options: ["Hash Map", "Queue", "Stack", "Linked List"],
+    answer: "Hash Map",
+    explanation:
+      "A Hash Map provides O(1) average lookup time for character indices.",
+  },
+  {
+    question: "What happens when a duplicate character is encountered?",
+    options: [
+      "Move the left pointer after the previous occurrence",
+      "Restart the algorithm",
+      "Ignore the duplicate",
+      "Sort the string",
+    ],
+    answer: "Move the left pointer after the previous occurrence",
+    explanation:
+      "The left pointer is updated to keep all characters in the window unique.",
+  },
+  {
+    question: "Which pointer expands the current window?",
+    options: [
+      "Right Pointer",
+      "Left Pointer",
+      "Middle Pointer",
+      "None",
+    ],
+    answer: "Right Pointer",
+    explanation:
+      "The right pointer keeps moving forward to include new characters.",
+  },
+  {
+    question: "Which pointer shrinks the current window?",
+    options: [
+      "Left Pointer",
+      "Right Pointer",
+      "Middle Pointer",
+      "Last Pointer",
+    ],
+    answer: "Left Pointer",
+    explanation:
+      "The left pointer removes characters from the beginning of the window.",
+  },
+  {
+    question: "For the input 'abcabcbb', what is the answer?",
+    options: ["3", "2", "4", "5"],
+    answer: "3",
+    explanation:
+      "The longest substring without repeating characters is 'abc'.",
+  },
+  {
+    question: "For the input 'bbbbb', what is the answer?",
+    options: ["1", "2", "5", "0"],
+    answer: "1",
+    explanation:
+      "Only one unique character can exist in the substring.",
+  },
+  {
+    question: "For the input 'pwwkew', what is the answer?",
+    options: ["3", "2", "4", "5"],
+    answer: "3",
+    explanation:
+      "The longest substring is 'wke'.",
+  },
+  {
+    question: "What is the space complexity of the optimal solution?",
+    options: ["O(min(n, charset))", "O(n²)", "O(log n)", "O(1)"],
+    answer: "O(min(n, charset))",
+    explanation:
+      "The Hash Map stores only unique characters currently tracked.",
+  },
+  {
+    question: "Why is a Hash Map preferred?",
+    options: [
+      "Provides O(1) average lookup",
+      "Consumes zero memory",
+      "Automatically sorts characters",
+      "Uses recursion",
+    ],
+    answer: "Provides O(1) average lookup",
+    explanation:
+      "Fast lookup allows efficient Sliding Window implementation.",
+  },
+  {
+    question: "If the current character has never appeared before, what should happen?",
+    options: [
+      "Expand the window",
+      "Shrink the window",
+      "Restart",
+      "Remove previous characters",
+    ],
+    answer: "Expand the window",
+    explanation:
+      "The window continues growing while characters remain unique.",
+  },
+  {
+    question: "Which topic does this problem commonly belong to in coding interviews?",
+    options: [
+      "Sliding Window",
+      "Graphs",
+      "Trees",
+      "Dynamic Programming",
+    ],
+    answer: "Sliding Window",
+    explanation:
+      "It is one of the most common Sliding Window interview questions.",
+  },
+  {
+    question: "What is the main goal of the algorithm?",
+    options: [
+      "Find the longest substring without repeating characters",
+      "Sort the string",
+      "Reverse the string",
+      "Count vowels",
+    ],
+    answer: "Find the longest substring without repeating characters",
+    explanation:
+      "The objective is to maximize the length while maintaining unique characters.",
+  },
+  {
+    question: "What does the algorithm update whenever a longer valid substring is found?",
+    options: [
+      "Maximum length",
+      "Minimum length",
+      "Hash Map size",
+      "String order",
+    ],
+    answer: "Maximum length",
+    explanation:
+      "The maximum length variable stores the best answer found so far.",
+  },
+];
+
+export default function LongestSubstringQuiz() {
+  return (
+    <QuizEngine
+      title="Longest Substring Without Repeating Characters Quiz"
+      subtitle="Test your understanding of the Sliding Window technique used to solve the Longest Substring Without Repeating Characters problem."
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/longest-substring/quiz/page.jsx b/src/app/visualizer/string/longest-substring/quiz/page.jsx
new file mode 100644
index 000000000..c3687946a
--- /dev/null
+++ b/src/app/visualizer/string/longest-substring/quiz/page.jsx
@@ -0,0 +1,5 @@
+import LongestSubstringQuiz from "../quiz";
+
+export default function Page() {
+  return <LongestSubstringQuiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/minimum-window-substring/animation.jsx b/src/app/visualizer/string/minimum-window-substring/animation.jsx
new file mode 100644
index 000000000..536585a68
--- /dev/null
+++ b/src/app/visualizer/string/minimum-window-substring/animation.jsx
@@ -0,0 +1,160 @@
+"use client";
+
+import { useState } from "react";
+
+export default function Animation() {
+  const [text, setText] = useState("ADOBECODEBANC");
+  const [pattern, setPattern] = useState("ABC");
+  const [window, setWindow] = useState({ start: -1, end: -1 });
+
+  const runDemo = () => {
+    if (!text || !pattern) {
+      setWindow({ start: -1, end: -1 });
+      return;
+    }
+
+    const need = {};
+    const have = {};
+
+    for (const ch of pattern) {
+      need[ch] = (need[ch] || 0) + 1;
+    }
+
+    let required = Object.keys(need).length;
+    let formed = 0;
+
+    let left = 0;
+    let answer = [-1, 0, 0];
+
+    for (let right = 0; right < text.length; right++) {
+      const c = text[right];
+      have[c] = (have[c] || 0) + 1;
+
+      if (need[c] && have[c] === need[c]) {
+        formed++;
+      }
+
+      while (left <= right && formed === required) {
+        if (
+          answer[0] === -1 ||
+          right - left + 1 < answer[0]
+        ) {
+          answer = [right - left + 1, left, right];
+        }
+
+        const ch = text[left];
+        have[ch]--;
+
+        if (need[ch] && have[ch] < need[ch]) {
+          formed--;
+        }
+
+        left++;
+      }
+    }
+
+    if (answer[0] === -1) {
+      setWindow({ start: -1, end: -1 });
+    } else {
+      setWindow({
+        start: answer[1],
+        end: answer[2],
+      });
+    }
+  };
+
+  return (
+    <div className="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-[#1b1b1b] p-6">
+      <h2 className="text-2xl font-bold mb-6">
+        Minimum Window Substring Visualization
+      </h2>
+
+      <div className="space-y-5">
+        <div>
+          <label className="block mb-2 font-semibold">
+            Text
+          </label>
+
+          <input
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            className="w-full rounded-lg border px-4 py-2 dark:bg-[#111]"
+          />
+        </div>
+
+        <div>
+          <label className="block mb-2 font-semibold">
+            Pattern
+          </label>
+
+          <input
+            value={pattern}
+            onChange={(e) => setPattern(e.target.value)}
+            className="w-full rounded-lg border px-4 py-2 dark:bg-[#111]"
+          />
+        </div>
+
+        <button
+          onClick={runDemo}
+          className="px-6 py-2 rounded-lg bg-pink-600 hover:bg-pink-700 text-white font-semibold"
+        >
+          Find Minimum Window
+        </button>
+
+        <div className="rounded-xl bg-slate-100 dark:bg-slate-800 p-4">
+          <p className="font-semibold mb-3">Text</p>
+
+          <div className="flex flex-wrap gap-2">
+            {text.split("").map((ch, i) => {
+              const highlight =
+                window.start !== -1 &&
+                i >= window.start &&
+                i <= window.end;
+
+              return (
+                <span
+                  key={i}
+                  className={`w-8 h-8 rounded flex items-center justify-center font-bold ${
+                    highlight
+                      ? "bg-pink-600 text-white"
+                      : "bg-white dark:bg-slate-700"
+                  }`}
+                >
+                  {ch}
+                </span>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="rounded-xl bg-slate-100 dark:bg-slate-800 p-4">
+          {window.start === -1 ? (
+            <p>No valid window found.</p>
+          ) : (
+            <>
+              <p className="font-semibold text-green-600">
+                Minimum Window Found
+              </p>
+
+              <p className="mt-2">
+                Start Index: <strong>{window.start}</strong>
+              </p>
+
+              <p>
+                End Index: <strong>{window.end}</strong>
+              </p>
+
+              <p className="mt-2">
+                Window:
+                <strong>
+                  {" "}
+                  {text.slice(window.start, window.end + 1)}
+                </strong>
+              </p>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/minimum-window-substring/codeBlock.jsx b/src/app/visualizer/string/minimum-window-substring/codeBlock.jsx
new file mode 100644
index 000000000..27ede9389
--- /dev/null
+++ b/src/app/visualizer/string/minimum-window-substring/codeBlock.jsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { useState } from "react";
+
+const code = `function minWindow(s, t) {
+    if (!s.length || !t.length) return "";
+
+    const need = {};
+    const window = {};
+
+    for (const ch of t) {
+        need[ch] = (need[ch] || 0) + 1;
+    }
+
+    let required = Object.keys(need).length;
+    let formed = 0;
+
+    let left = 0;
+    let right = 0;
+
+    let minLength = Infinity;
+    let start = 0;
+
+    while (right < s.length) {
+        const ch = s[right];
+        window[ch] = (window[ch] || 0) + 1;
+
+        if (need[ch] && window[ch] === need[ch]) {
+            formed++;
+        }
+
+        while (left <= right && formed === required) {
+
+            if (right - left + 1 < minLength) {
+                minLength = right - left + 1;
+                start = left;
+            }
+
+            const leftChar = s[left];
+            window[leftChar]--;
+
+            if (
+                need[leftChar] &&
+                window[leftChar] < need[leftChar]
+            ) {
+                formed--;
+            }
+
+            left++;
+        }
+
+        right++;
+    }
+
+    return minLength === Infinity
+        ? ""
+        : s.substring(start, start + minLength);
+}
+
+const text = "ADOBECODEBANC";
+const pattern = "ABC";
+
+console.log(minWindow(text, pattern));
+`;
+
+export default function CodeBlock() {
+  const [copied, setCopied] = useState(false);
+
+  const copyCode = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-[#1b1b1b] p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-2xl font-bold">
+          JavaScript Implementation
+        </h2>
+
+        <button
+          onClick={copyCode}
+          className="px-4 py-2 rounded-lg bg-pink-600 hover:bg-pink-700 text-white font-medium"
+        >
+          {copied ? "Copied!" : "Copy Code"}
+        </button>
+      </div>
+
+      <pre className="overflow-x-auto rounded-xl bg-slate-100 dark:bg-slate-900 p-5 text-sm">
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/minimum-window-substring/content.jsx b/src/app/visualizer/string/minimum-window-substring/content.jsx
new file mode 100644
index 000000000..95269b1c2
--- /dev/null
+++ b/src/app/visualizer/string/minimum-window-substring/content.jsx
@@ -0,0 +1,141 @@
+export default function Content() {
+  return (
+    <div className="space-y-8">
+      {/* Overview */}
+      <section>
+        <h2 className="text-2xl font-bold mb-3">Overview</h2>
+
+        <p className="text-slate-700 dark:text-slate-300 leading-7">
+          The <strong>Minimum Window Substring</strong> problem is a classic
+          Sliding Window algorithm. Given a string <strong>s</strong> and a
+          target string <strong>t</strong>, the goal is to find the smallest
+          substring in <strong>s</strong> that contains every character of
+          <strong> t</strong>, including duplicate occurrences.
+        </p>
+
+        <p className="text-slate-700 dark:text-slate-300 leading-7 mt-3">
+          Instead of checking every possible substring, the Sliding Window
+          technique dynamically expands and shrinks the current window,
+          resulting in an efficient linear-time solution.
+        </p>
+      </section>
+
+      {/* Working */}
+      <section>
+        <h2 className="text-2xl font-bold mb-3">How It Works</h2>
+
+        <ol className="list-decimal ml-6 space-y-2 text-slate-700 dark:text-slate-300">
+          <li>Create a frequency map for all characters in the target string.</li>
+          <li>Expand the window using the right pointer.</li>
+          <li>Track the frequency of characters inside the current window.</li>
+          <li>Once every required character is included, shrink the window from the left.</li>
+          <li>Update the minimum window whenever a smaller valid window is found.</li>
+          <li>Continue until the right pointer reaches the end of the string.</li>
+        </ol>
+      </section>
+
+      {/* Example */}
+      <section>
+        <h2 className="text-2xl font-bold mb-3">Example</h2>
+
+        <div className="rounded-xl bg-slate-100 dark:bg-slate-800 p-5">
+          <p>
+            <strong>Text:</strong> ADOBECODEBANC
+          </p>
+
+          <p>
+            <strong>Pattern:</strong> ABC
+          </p>
+
+          <p className="mt-4">
+            The smallest substring containing all the required characters is:
+          </p>
+
+          <code className="block mt-3 rounded bg-white dark:bg-slate-900 p-3">
+            BANC
+          </code>
+        </div>
+      </section>
+
+      {/* Complexity */}
+      <section>
+        <h2 className="text-2xl font-bold mb-3">
+          Time & Space Complexity
+        </h2>
+
+        <div className="overflow-x-auto">
+          <table className="min-w-full border border-slate-300 dark:border-slate-700">
+            <thead>
+              <tr className="bg-slate-100 dark:bg-slate-800">
+                <th className="border p-3 text-left">Operation</th>
+                <th className="border p-3 text-left">Complexity</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td className="border p-3">Best Case</td>
+                <td className="border p-3">O(n + m)</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">Average Case</td>
+                <td className="border p-3">O(n + m)</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">Worst Case</td>
+                <td className="border p-3">O(n + m)</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">Space Complexity</td>
+                <td className="border p-3">O(m)</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* Advantages */}
+      <section>
+        <h2 className="text-2xl font-bold mb-3">Advantages</h2>
+
+        <ul className="list-disc ml-6 space-y-2 text-slate-700 dark:text-slate-300">
+          <li>Efficient linear-time solution.</li>
+          <li>Avoids checking every possible substring.</li>
+          <li>Uses the Sliding Window technique effectively.</li>
+          <li>Suitable for large input strings.</li>
+          <li>Frequently used in coding interviews.</li>
+        </ul>
+      </section>
+
+      {/* Disadvantages */}
+      <section>
+        <h2 className="text-2xl font-bold mb-3">Disadvantages</h2>
+
+        <ul className="list-disc ml-6 space-y-2 text-slate-700 dark:text-slate-300">
+          <li>Requires additional memory for frequency maps.</li>
+          <li>Can be difficult to understand for beginners.</li>
+          <li>Careful pointer management is required.</li>
+        </ul>
+      </section>
+
+      {/* Applications */}
+      <section>
+        <h2 className="text-2xl font-bold mb-3">Applications</h2>
+
+        <ul className="list-disc ml-6 space-y-2 text-slate-700 dark:text-slate-300">
+          <li>Text Searching</li>
+          <li>Search Engines</li>
+          <li>DNA Sequence Analysis</li>
+          <li>Natural Language Processing (NLP)</li>
+          <li>Log Analysis</li>
+          <li>Pattern Matching</li>
+          <li>Data Stream Processing</li>
+          <li>Coding Interview Problems</li>
+        </ul>
+      </section>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/minimum-window-substring/page.jsx b/src/app/visualizer/string/minimum-window-substring/page.jsx
new file mode 100644
index 000000000..d7a3a1c10
--- /dev/null
+++ b/src/app/visualizer/string/minimum-window-substring/page.jsx
@@ -0,0 +1,34 @@
+import Animation from "./animation";
+import Code from "./codeBlock";
+import Content from "./content";
+
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths(
+        "String",
+        "Minimum Window Substring"
+      )}
+      title="Minimum Window Substring"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other Sliding Window algorithms"
+          links={[
+            {
+              text: "Longest Substring Without Repeating Characters",
+              url: "../longest-substring",
+            },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/minimum-window-substring/quiz.jsx b/src/app/visualizer/string/minimum-window-substring/quiz.jsx
new file mode 100644
index 000000000..b04ce3dd1
--- /dev/null
+++ b/src/app/visualizer/string/minimum-window-substring/quiz.jsx
@@ -0,0 +1,171 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the primary goal of the Minimum Window Substring problem?",
+    options: [
+      "Find the longest substring",
+      "Find the smallest substring containing all characters of the target",
+      "Sort the string",
+      "Reverse the string",
+    ],
+    answer: "Find the smallest substring containing all characters of the target",
+    explanation:
+      "The objective is to locate the shortest substring that contains every character from the target string, including duplicates.",
+  },
+  {
+    question: "Which algorithmic technique is used to solve this problem efficiently?",
+    options: [
+      "Dynamic Programming",
+      "Sliding Window",
+      "Greedy",
+      "Binary Search",
+    ],
+    answer: "Sliding Window",
+    explanation:
+      "The Sliding Window technique expands and contracts the window while maintaining character frequencies.",
+  },
+  {
+    question: "What is the optimal time complexity of the Sliding Window solution?",
+    options: ["O(n²)", "O(n log n)", "O(n + m)", "O(m²)"],
+    answer: "O(n + m)",
+    explanation:
+      "Each pointer moves at most once through the string, resulting in linear complexity.",
+  },
+  {
+    question: "What data structure is commonly used to store required character frequencies?",
+    options: ["Stack", "Queue", "Hash Map", "Heap"],
+    answer: "Hash Map",
+    explanation:
+      "A Hash Map stores the frequency of each required character efficiently.",
+  },
+  {
+    question: "What does the 'left' pointer represent?",
+    options: [
+      "Beginning of the current window",
+      "End of the window",
+      "Pattern length",
+      "Answer index",
+    ],
+    answer: "Beginning of the current window",
+    explanation:
+      "The left pointer marks the starting position of the current sliding window.",
+  },
+  {
+    question: "What does the 'right' pointer do?",
+    options: [
+      "Shrinks the window",
+      "Expands the window",
+      "Stores frequencies",
+      "Sorts characters",
+    ],
+    answer: "Expands the window",
+    explanation:
+      "The right pointer continuously expands the window until it becomes valid.",
+  },
+  {
+    question: "When is the current window considered valid?",
+    options: [
+      "When all characters of the target are present with required frequency",
+      "When it has unique characters",
+      "When window length equals target length",
+      "When characters are sorted",
+    ],
+    answer: "When all characters of the target are present with required frequency",
+    explanation:
+      "A valid window contains every required character with at least the required count.",
+  },
+  {
+    question: "Why do we shrink the window from the left?",
+    options: [
+      "To reduce memory",
+      "To find a smaller valid window",
+      "To sort characters",
+      "To remove duplicates",
+    ],
+    answer: "To find a smaller valid window",
+    explanation:
+      "Shrinking helps minimize the window while keeping it valid.",
+  },
+  {
+    question: "If no valid window exists, what should the algorithm return?",
+    options: ["null", "-1", '""', "0"],
+    answer: '""',
+    explanation:
+      "If no substring satisfies the condition, an empty string is returned.",
+  },
+  {
+    question: "Which example produces 'BANC' as the answer?",
+    options: [
+      's="ADOBECODEBANC", t="ABC"',
+      's="HELLO", t="LL"',
+      's="ABCDE", t="AE"',
+      's="XYZ", t="Z"',
+    ],
+    answer: 's="ADOBECODEBANC", t="ABC"',
+    explanation:
+      "'BANC' is the smallest substring containing A, B, and C.",
+  },
+  {
+    question: "What happens when the right pointer moves?",
+    options: [
+      "Characters are removed",
+      "A new character enters the window",
+      "The answer is finalized",
+      "The string is reversed",
+    ],
+    answer: "A new character enters the window",
+    explanation:
+      "Moving the right pointer expands the window by including another character.",
+  },
+  {
+    question: "Why are duplicate characters in the target important?",
+    options: [
+      "They are ignored",
+      "Their frequency must also be satisfied",
+      "They reduce complexity",
+      "They are removed",
+    ],
+    answer: "Their frequency must also be satisfied",
+    explanation:
+      "The algorithm must satisfy the exact frequency requirements of every character.",
+  },
+  {
+    question: "What is the space complexity of the optimal solution?",
+    options: ["O(1)", "O(log n)", "O(m)", "O(n²)"],
+    answer: "O(m)",
+    explanation:
+      "The hash maps store only the required characters and their frequencies.",
+  },
+  {
+    question: "Which interview topic commonly includes this problem?",
+    options: [
+      "Graph Algorithms",
+      "Sliding Window",
+      "Tree Traversal",
+      "Backtracking",
+    ],
+    answer: "Sliding Window",
+    explanation:
+      "Minimum Window Substring is one of the most popular Sliding Window interview questions.",
+  },
+  {
+    question: "Which pointer is moved after removing a character from the current window?",
+    options: ["Right Pointer", "Left Pointer", "Middle Pointer", "Random Pointer"],
+    answer: "Left Pointer",
+    explanation:
+      "After removing the leftmost character, the left pointer advances to shrink the window.",
+  },
+];
+
+export default function MinimumWindowSubstringQuiz() {
+  return (
+    <QuizEngine
+      title="Minimum Window Substring Quiz"
+      subtitle="Test your understanding of the Sliding Window algorithm used to solve the Minimum Window Substring problem."
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/minimum-window-substring/quiz/page.jsx b/src/app/visualizer/string/minimum-window-substring/quiz/page.jsx
new file mode 100644
index 000000000..32d3864e7
--- /dev/null
+++ b/src/app/visualizer/string/minimum-window-substring/quiz/page.jsx
@@ -0,0 +1,5 @@
+import MinimumWindowSubstringQuiz from "../quiz";
+
+export default function Page() {
+  return <MinimumWindowSubstringQuiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/page.jsx b/src/app/visualizer/string/page.jsx
new file mode 100644
index 000000000..b5c06725e
--- /dev/null
+++ b/src/app/visualizer/string/page.jsx
@@ -0,0 +1,28 @@
+import CategoryClient from "@/app/visualizer/components/CategoryClient";
+import { sections } from "@/lib/visualizerSections";
+import Footer from "@/app/components/footer";
+import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
+
+export default function Page() {
+  const section = sections.find((s) => s.slug === "string");
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] flex flex-col">
+      <div className="px-6 md:px-12 pt-6">
+        <Breadcrumbs
+          paths={[
+            { name: "Home", href: "/" },
+            { name: "Visualizer", href: "/visualizer" },
+            { name: "String" },
+          ]}
+        />
+      </div>
+
+      <main className="flex-1 max-w-[1100px] w-full mx-auto px-5 pt-4 pb-20">
+        <CategoryClient section={section} />
+      </main>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/palindrome-check/animation.jsx b/src/app/visualizer/string/palindrome-check/animation.jsx
new file mode 100644
index 000000000..a6ce4f937
--- /dev/null
+++ b/src/app/visualizer/string/palindrome-check/animation.jsx
@@ -0,0 +1,384 @@
+"use client";
+
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+} from "react";
+
+import GoButton from "@/app/components/ui/goButton";
+import ResetButton from "@/app/components/ui/resetButton";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+
+import {
+  saveToStorage,
+  loadFromStorage,
+  removeFromStorage,
+} from "@/utils/storage";
+
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+import { palindromeCheckGenerator } from "@/features/algorithms/string/palindromeCheckLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+const PalindromeCheck = () => {
+  const [input, setInput] = useState(() =>
+    loadFromStorage("palindrome-input", "")
+  );
+
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+
+  const [text, setText] = useState("");
+
+  const [visualState, setVisualState] = useState({
+    left: -1,
+    right: -1,
+    matched: [],
+    mismatch: [],
+    stepExplanation: "",
+    stepCount: 0,
+    isPalindrome: null,
+  });
+
+  useEffect(() => {
+    saveToStorage("palindrome-input", input);
+  }, [input]);
+
+  const steps = useMemo(() => {
+    if (!text) return [];
+    return Array.from(palindromeCheckGenerator(text));
+  }, [text]);
+
+  const onStep = useCallback((step) => {
+    let explanation = "";
+    let msg = "";
+    let msgType = "";
+
+    switch (step.type) {
+      case "compare":
+        explanation = `Step ${step.step}: Compare '${step.leftChar}' at index ${step.left} with '${step.rightChar}' at index ${step.right}.`;
+        break;
+
+      case "match":
+        explanation = `Characters '${step.leftChar}' and '${step.rightChar}' match. Move both pointers inward.`;
+        break;
+
+      case "mismatch":
+        explanation = `Characters '${step.leftChar}' and '${step.rightChar}' do not match. Therefore, this string is NOT a palindrome.`;
+        msg = `"${text}" is NOT a palindrome.`;
+        msgType = "error";
+        break;
+
+      case "success":
+        explanation =
+          "All character pairs matched successfully. Therefore, the string IS a palindrome.";
+        msg = `"${text}" is a palindrome.`;
+        msgType = "success";
+        break;
+
+      default:
+        break;
+    }
+
+    setVisualState({
+      left: step.left ?? -1,
+      right: step.right ?? -1,
+      matched: step.matched || [],
+      mismatch: step.mismatch || [],
+      stepExplanation: explanation,
+      stepCount: step.step || 0,
+      isPalindrome: step.result ?? null,
+    });
+
+    if (msg) setMessage(msg);
+    if (msgType) setMessageType(msgType);
+  }, [text]);
+
+  const engine = useAnimationEngine({
+    steps,
+    onStep,
+    initialSpeed: 1000,
+  });
+
+  const isAnimating =
+    engine.isPlaying || engine.currentStep > 0;
+      const handleReset = () => {
+    engine.reset();
+
+    removeFromStorage("palindrome-input");
+
+    setInput("");
+    setText("");
+
+    setMessage("");
+    setMessageType("");
+
+    setVisualState({
+      left: -1,
+      right: -1,
+      matched: [],
+      mismatch: [],
+      stepExplanation: "",
+      stepCount: 0,
+      isPalindrome: null,
+    });
+  };
+
+  const handleGo = (e) => {
+    e.preventDefault();
+
+    engine.reset();
+
+    setMessage("");
+    setMessageType("");
+
+    setVisualState({
+      left: -1,
+      right: -1,
+      matched: [],
+      mismatch: [],
+      stepExplanation: "",
+      stepCount: 0,
+      isPalindrome: null,
+    });
+
+    if (!input.trim()) {
+      setMessage("Please enter a string.");
+      setMessageType("warning");
+      return;
+    }
+
+    const cleaned = input.trim();
+
+    setText(cleaned);
+
+    setTimeout(() => {
+      engine.play();
+    }, 50);
+  };
+
+  useVisualizerKeyboard({
+    onTogglePlayPause: engine.isPlaying
+      ? engine.pause
+      : () => {
+          if (text.length > 0) engine.play();
+        },
+
+    onStepForward: engine.stepForward,
+    onStepBackward: engine.stepBackward,
+
+    onSpeedChange: (speed) =>
+      engine.setSpeed(speed * 1000),
+
+    speed: engine.speed / 1000,
+
+    sorting: engine.isPlaying,
+
+    sorted:
+      engine.currentStep === steps.length - 1 &&
+      steps.length > 0,
+  });
+
+  const messageClass =
+    messageType === "success"
+      ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
+      : messageType === "warning"
+      ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
+      : "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200";
+
+  return (
+    <main className="container mx-auto">
+              <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Visualize how the Palindrome Check algorithm compares characters from
+        both ends of a string.
+      </p>
+
+      <form
+        onSubmit={handleGo}
+        className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8"
+      >
+        <div className="mb-5">
+          <label
+            htmlFor="inputString"
+            className="block text-gray-700 dark:text-gray-300 mb-2"
+          >
+            Enter a String
+          </label>
+
+          <input
+            id="inputString"
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="e.g. madam"
+            disabled={isAnimating}
+            className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#a435f0] focus:outline-none focus:ring-2 focus:ring-[#a435f0]/30 transition duration-300"
+          />
+        </div>
+
+        <div className="flex gap-2">
+          <GoButton
+            onClick={handleGo}
+            isAnimating={isAnimating}
+            disabled={isAnimating}
+          />
+
+          <ResetButton
+            onReset={handleReset}
+            isAnimating={isAnimating}
+          />
+        </div>
+
+        {isAnimating && (
+          <div className="mt-5">
+            <PlaybackControls
+              isPlaying={engine.isPlaying}
+              onPlayPause={
+                engine.isPlaying
+                  ? engine.pause
+                  : () => engine.play()
+              }
+              speed={engine.speed / 1000}
+              onSpeedChange={(s) =>
+                engine.setSpeed(s * 1000)
+              }
+              onStepForward={engine.stepForward}
+              onStepBackward={engine.stepBackward}
+              onReset={engine.reset}
+              onExplainStep={() => {}}
+              disabled={steps.length === 0}
+              progressText={`${Math.max(
+                engine.currentStep + 1,
+                0
+              )} / ${steps.length}`}
+            />
+          </div>
+        )}
+      </form>
+
+      {message && (
+        <div
+          className={`max-w-3xl mx-auto mb-8 p-4 rounded-lg ${messageClass}`}
+        >
+          <p className="text-center font-medium">
+            {message}
+          </p>
+        </div>
+      )}
+
+      {text.length > 0 && (
+        <div className="max-w-5xl mx-auto space-y-6">
+                      {visualState.stepExplanation && (
+            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+              <div className="flex items-center gap-2 bg-[#a435f0]/10 dark:bg-[#a435f0]/20 px-4 py-2 border-b border-[#a435f0]/20">
+                <span className="w-2 h-2 rounded-full bg-[#a435f0] animate-pulse"></span>
+
+                <span className="text-sm font-semibold text-[#a435f0] uppercase tracking-wide">
+                  Step Explanation
+                </span>
+
+                {visualState.stepCount > 0 && (
+                  <span className="ml-auto text-xs text-gray-500 dark:text-gray-400">
+                    Step #{visualState.stepCount}
+                  </span>
+                )}
+              </div>
+
+              <div className="px-4 py-3">
+                <p className="font-mono text-sm text-gray-700 dark:text-gray-200">
+                  {visualState.stepExplanation}
+                </p>
+              </div>
+            </div>
+          )}
+
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+            <h2 className="text-2xl font-semibold text-center mb-6 dark:text-white">
+              String Visualization
+            </h2>
+
+            <div className="flex flex-wrap justify-center gap-3">
+              {text.split("").map((char, index) => {
+                let bg =
+                  "bg-gray-200 dark:bg-gray-700 border-gray-300 dark:border-gray-600";
+
+                if (visualState.matched.includes(index)) {
+                  bg = "bg-green-500 border-green-700 text-white";
+                }
+
+                if (visualState.mismatch.includes(index)) {
+                  bg = "bg-red-500 border-red-700 text-white";
+                }
+
+                if (
+                  index === visualState.left &&
+                  !visualState.matched.includes(index)
+                ) {
+                  bg = "bg-blue-400 border-blue-600 text-white";
+                }
+
+                if (
+                  index === visualState.right &&
+                  !visualState.matched.includes(index)
+                ) {
+                  bg = "bg-yellow-400 border-yellow-600 text-black";
+                }
+
+                return (
+                  <div
+                    key={index}
+                    className="flex flex-col items-center"
+                  >
+                    <div
+                      className={`w-14 h-14 rounded-lg border-2 flex items-center justify-center text-xl font-bold transition-all duration-300 ${bg}`}
+                    >
+                      {char}
+                    </div>
+
+                    <div className="mt-2 text-xs text-gray-500">
+                      [{index}]
+                    </div>
+
+                    {index === visualState.left && (
+                      <div className="text-blue-500 text-xs font-semibold">
+                        Left
+                      </div>
+                    )}
+
+                    {index === visualState.right && (
+                      <div className="text-yellow-600 text-xs font-semibold">
+                        Right
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+
+            <div className="flex flex-wrap justify-center gap-6 mt-8 text-sm">
+              <span>
+                🟦 <strong>Left Pointer</strong>
+              </span>
+
+              <span>
+                🟨 <strong>Right Pointer</strong>
+              </span>
+
+              <span>
+                🟩 <strong>Matched</strong>
+              </span>
+
+              <span>
+                🟥 <strong>Mismatch</strong>
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+    </main>
+  );
+};
+
+export default PalindromeCheck;
\ No newline at end of file
diff --git a/src/app/visualizer/string/palindrome-check/codeBlock.jsx b/src/app/visualizer/string/palindrome-check/codeBlock.jsx
new file mode 100644
index 000000000..071e6b1f3
--- /dev/null
+++ b/src/app/visualizer/string/palindrome-check/codeBlock.jsx
@@ -0,0 +1,168 @@
+"use client";
+
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const codeExamples = {
+  javascript: `// Palindrome Check in JavaScript
+function isPalindrome(str) {
+    let left = 0;
+    let right = str.length - 1;
+
+    while (left < right) {
+        if (str[left] !== str[right]) {
+            return false;
+        }
+        left++;
+        right--;
+    }
+
+    return true;
+}
+
+// Example
+const text = "madam";
+
+if (isPalindrome(text)) {
+    console.log("Palindrome");
+} else {
+    console.log("Not Palindrome");
+}`,
+
+  python: `# Palindrome Check in Python
+def is_palindrome(text):
+    left = 0
+    right = len(text) - 1
+
+    while left < right:
+        if text[left] != text[right]:
+            return False
+
+        left += 1
+        right -= 1
+
+    return True
+
+text = "madam"
+
+if is_palindrome(text):
+    print("Palindrome")
+else:
+    print("Not Palindrome")`,
+
+  java: `// Palindrome Check in Java
+public class PalindromeCheck {
+
+    static boolean isPalindrome(String str) {
+
+        int left = 0;
+        int right = str.length() - 1;
+
+        while(left < right){
+
+            if(str.charAt(left) != str.charAt(right))
+                return false;
+
+            left++;
+            right--;
+        }
+
+        return true;
+    }
+
+    public static void main(String[] args){
+
+        String text = "madam";
+
+        if(isPalindrome(text))
+            System.out.println("Palindrome");
+        else
+            System.out.println("Not Palindrome");
+    }
+}`,
+
+  c: `// Palindrome Check in C
+#include <stdio.h>
+#include <string.h>
+
+int isPalindrome(char str[]) {
+
+    int left = 0;
+    int right = strlen(str) - 1;
+
+    while(left < right){
+
+        if(str[left] != str[right])
+            return 0;
+
+        left++;
+        right--;
+    }
+
+    return 1;
+}
+
+int main(){
+
+    char str[] = "madam";
+
+    if(isPalindrome(str))
+        printf("Palindrome");
+
+    else
+        printf("Not Palindrome");
+
+    return 0;
+}`,
+
+  cpp: `// Palindrome Check in C++
+#include <iostream>
+using namespace std;
+
+bool isPalindrome(string str){
+
+    int left = 0;
+    int right = str.length() - 1;
+
+    while(left < right){
+
+        if(str[left] != str[right])
+            return false;
+
+        left++;
+        right--;
+    }
+
+    return true;
+}
+
+int main(){
+
+    string text = "madam";
+
+    if(isPalindrome(text))
+        cout << "Palindrome";
+
+    else
+        cout << "Not Palindrome";
+
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: "palindromeCheck.js",
+  python: "palindrome_check.py",
+  java: "PalindromeCheck.java",
+  c: "palindrome_check.c",
+  cpp: "palindrome_check.cpp",
+};
+
+const PalindromeCheckCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default PalindromeCheckCode;
\ No newline at end of file
diff --git a/src/app/visualizer/string/palindrome-check/content.jsx b/src/app/visualizer/string/palindrome-check/content.jsx
new file mode 100644
index 000000000..7e2859f34
--- /dev/null
+++ b/src/app/visualizer/string/palindrome-check/content.jsx
@@ -0,0 +1,152 @@
+"use client";
+
+import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraphs = [
+    `A palindrome is a string that reads the same forward and backward. The Palindrome Check algorithm compares characters from the beginning and the end of the string, moving inward until all pairs have been checked.`,
+
+    `If every pair of characters matches, the string is a palindrome. If any pair differs, the algorithm immediately concludes that the string is not a palindrome.`,
+
+    `Using the two-pointer technique makes palindrome checking very efficient because only half of the string needs to be examined.`,
+  ];
+
+  const example = [
+    { points: "String: MADAM" },
+    { points: "Compare M and M ✔" },
+    { points: "Compare A and A ✔" },
+    { points: "Middle character D ✔" },
+    { points: "All comparisons matched → Palindrome" },
+  ];
+
+  const steps = [
+    { points: "Initialize two pointers: left at the beginning and right at the end." },
+    { points: "Compare the characters at both pointers." },
+    { points: "If they match, move left forward and right backward." },
+    { points: "If they do not match, stop — the string is not a palindrome." },
+    { points: "If all pairs match, the string is a palindrome." },
+  ];
+
+  const complexity = [
+    { points: "Best Case: O(1) (first comparison fails)." },
+    { points: "Worst Case: O(n) (all characters are checked)." },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+
+        {/* What is Palindrome */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-black mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is Palindrome Check?
+          </h1>
+
+          <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+            {paragraphs[0]}
+          </p>
+        </section>
+
+        {/* Example */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-black mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Example
+          </h1>
+
+          <ul className="list-disc pl-6 space-y-2">
+            {example.map((item, index) => (
+              <li
+                key={index}
+                className="text-[#374151] dark:text-[#d1d5db]"
+              >
+                {item.points}
+              </li>
+            ))}
+          </ul>
+
+          <p className="mt-4 text-[#374151] dark:text-[#d1d5db]">
+            {paragraphs[1]}
+          </p>
+        </section>
+
+        {/* Steps */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-black mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Algorithm Steps
+          </h1>
+
+          <ol className="list-decimal pl-6 space-y-3">
+            {steps.map((item, index) => (
+              <li
+                key={index}
+                className="text-[#374151] dark:text-[#d1d5db]"
+              >
+                {item.points}
+              </li>
+            ))}
+          </ol>
+        </section>
+
+        {/* Complexity */}
+        <section className="p-6">
+          <h1 className="text-2xl font-black mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+
+          <ul className="list-disc pl-6 space-y-3">
+            {complexity.map((item, index) => (
+              <li
+                key={index}
+                className="text-[#374151] dark:text-[#d1d5db]"
+              >
+                {item.points}
+              </li>
+            ))}
+          </ul>
+
+          <div className="mt-8">
+            <ComplexityGraph
+              bestCase={() => 1}
+              averageCase={(n) => n}
+              worstCase={(n) => n}
+              maxN={25}
+            />
+          </div>
+
+          <div className="mt-6 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+            <p className="text-[#374151] dark:text-[#d1d5db]">
+              {paragraphs[2]}
+            </p>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+};
+
+export default Content;
\ No newline at end of file
diff --git a/src/app/visualizer/string/palindrome-check/page.jsx b/src/app/visualizer/string/palindrome-check/page.jsx
new file mode 100644
index 000000000..3829a6675
--- /dev/null
+++ b/src/app/visualizer/string/palindrome-check/page.jsx
@@ -0,0 +1,45 @@
+import Animation from "./animation";
+import CodeBlock from "./codeBlock";
+import Content from "./content";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export const metadata = {
+  title: "Palindrome Check | AlgoBuddy",
+  description:
+    "Learn how the Palindrome Check algorithm works with an interactive visualization.",
+};
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("String", "Palindrome Check")}
+      title="Palindrome Check"
+      headerDescription="Visualize how the two-pointer technique determines whether a string is a palindrome."
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      exploreOther={
+        <ExploreOther
+            title="Explore other string algorithms"
+            links={[
+            {
+                text: "Reverse String",
+                url: "../reverse-string",
+            },
+            {
+              text: "Character Frequency",
+              url: "../character-frequency",
+            },
+            {
+              text: "Anagram Check",
+              url: "../anagram-check",
+            },
+            ]}
+        />
+        }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/palindrome-check/quiz.jsx b/src/app/visualizer/string/palindrome-check/quiz.jsx
new file mode 100644
index 000000000..438dc1a7d
--- /dev/null
+++ b/src/app/visualizer/string/palindrome-check/quiz.jsx
@@ -0,0 +1,138 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const PalindromeCheckQuiz = () => {
+  const questions = [
+    {
+      question: "What is a palindrome?",
+      options: [
+        "A string that contains only vowels",
+        "A string that reads the same forwards and backwards",
+        "A string with duplicate characters",
+        "A string sorted alphabetically",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "A palindrome is a string that remains the same when read from left to right and right to left.",
+    },
+    {
+      question: "Which technique is commonly used to check whether a string is a palindrome?",
+      options: [
+        "Binary Search",
+        "Breadth First Search",
+        "Two Pointers",
+        "Bubble Sort",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "The two-pointer technique compares characters from both ends of the string while moving inward.",
+    },
+    {
+      question: "What is the time complexity of the two-pointer palindrome algorithm?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Each character is checked at most once, resulting in O(n) time complexity.",
+    },
+    {
+      question: "What is the space complexity of the iterative palindrome check?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)",
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Only two pointers are used, so the auxiliary space complexity is O(1).",
+    },
+    {
+      question: "Which of these strings is a palindrome?",
+      options: [
+        "hello",
+        "level",
+        "apple",
+        "world",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The word 'level' reads the same in both directions.",
+    },
+    {
+      question: "What happens if the first mismatched pair of characters is found?",
+      options: [
+        "Continue checking",
+        "Restart the algorithm",
+        "Immediately conclude it is not a palindrome",
+        "Reverse the string",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "As soon as one mismatch is found, the string cannot be a palindrome.",
+    },
+    {
+      question: "Which pointer starts at the beginning of the string?",
+      options: [
+        "Right Pointer",
+        "Middle Pointer",
+        "Left Pointer",
+        "End Pointer",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "The left pointer starts from index 0 and moves toward the center.",
+    },
+    {
+      question: "Which pointer starts at the end of the string?",
+      options: [
+        "Left Pointer",
+        "Middle Pointer",
+        "Right Pointer",
+        "Front Pointer",
+      ],
+      correctAnswer: 2,
+      explanation:
+        "The right pointer starts from the last character and moves toward the center.",
+    },
+    {
+      question: "When does the palindrome checking process stop successfully?",
+      options: [
+        "After checking the first character",
+        "When all corresponding characters match",
+        "When half the string is skipped",
+        "After reversing the string",
+      ],
+      correctAnswer: 1,
+      explanation:
+        "If every pair matches until the pointers cross, the string is a palindrome.",
+    },
+    {
+      question: "Which of the following is NOT a palindrome?",
+      options: [
+        "madam",
+        "racecar",
+        "refer",
+        "coding",
+      ],
+      correctAnswer: 3,
+      explanation:
+        "'coding' does not read the same backward.",
+    },
+  ];
+
+  return (
+    <QuizEngine
+      title="Palindrome Check Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default PalindromeCheckQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/string/palindrome-check/quiz/page.jsx b/src/app/visualizer/string/palindrome-check/quiz/page.jsx
new file mode 100644
index 000000000..694d3d2af
--- /dev/null
+++ b/src/app/visualizer/string/palindrome-check/quiz/page.jsx
@@ -0,0 +1,5 @@
+import PalindromeCheckQuiz from "../quiz";
+
+export default function Page() {
+  return <PalindromeCheckQuiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/pattern-matching/quiz/PatternMatchingQuizClient.jsx b/src/app/visualizer/string/pattern-matching/quiz/PatternMatchingQuizClient.jsx
new file mode 100644
index 000000000..f995c5828
--- /dev/null
+++ b/src/app/visualizer/string/pattern-matching/quiz/PatternMatchingQuizClient.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowLeft, Play, Type } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function PatternMatchingQuizClient() {
+  const quizzes = [
+    {
+      title: "KMP Algorithm Quiz",
+      description:
+        "Practice KMP Algorithm concepts including LPS Array, preprocessing, efficient pattern matching, and time complexity.",
+      href: "/visualizer/string/kmp-algorithm/quiz",
+      filename: "kmp_algorithm_quiz.js",
+    },
+    {
+      title: "Rabin-Karp Quiz",
+      description:
+        "Practice Rabin-Karp concepts including rolling hash, hash collisions, and efficient string searching.",
+      href: "/visualizer/string/rabin-karp/quiz",
+      filename: "rabin_karp_quiz.js",
+    },
+    {
+      title: "Z Algorithm Quiz",
+      description:
+        "Practice Z Algorithm concepts including Z-array construction, prefix matching, and linear-time pattern searching.",
+      href: "/visualizer/string/z-algorithm/quiz",
+      filename: "z_algorithm_quiz.js",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-[var(--udemy-text)] dark:text-white transition-colors duration-300 pb-20">
+
+      {/* Header */}
+      <section className="relative pt-6 pb-4">
+        <div className="max-w-[1100px] mx-auto px-4">
+
+          <Link href="/visualizer/quiz">
+            <button className="inline-flex items-center gap-2 text-sm font-semibold text-pink-600 hover:opacity-80 transition mb-3">
+              <ArrowLeft size={16} />
+              <span>Back to all quizzes</span>
+            </button>
+          </Link>
+
+          <h1 className="text-3xl font-black mb-2">
+            Pattern Matching Quiz Portal
+          </h1>
+
+          <p className="text-sm text-surface-600 dark:text-surface-400">
+            Test your understanding of Pattern Matching algorithms through interactive quizzes.
+          </p>
+
+        </div>
+      </section>
+
+      {/* Quiz Cards */}
+      <div className="max-w-5xl mx-auto px-4 mt-8">
+        <div className="grid md:grid-cols-2 gap-6 items-stretch">
+
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{
+                duration: 0.4,
+                delay: index * 0.1,
+              }}
+              whileHover={{
+                y: -5,
+                scale: 1.02,
+              }}
+              className="group flex flex-col h-full rounded-2xl border border-pink-500/20 bg-white dark:bg-[#1a1a1a] overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
+            >
+
+              {/* Terminal Header */}
+              <div className="px-4 py-2 bg-pink-500/10 border-b border-pink-500/20">
+                <span className="font-mono text-xs">
+                  $ node {quiz.filename}
+                </span>
+              </div>
+
+              {/* Main Content */}
+              <div className="p-6 flex-1 flex flex-col justify-between">
+
+                <div className="flex items-start gap-4 mb-6">
+
+                  <div className="w-12 h-12 rounded-xl flex items-center justify-center bg-pink-500/10 border border-pink-500/20 text-pink-600">
+                    <Type size={24} />
+                  </div>
+
+                  <div>
+                    <h2 className="text-[20px] font-extrabold text-surface-900 dark:text-white group-hover:text-pink-600 transition-colors">
+                      {quiz.title}
+                    </h2>
+
+                    <p className="text-[14px] text-surface-500 dark:text-surface-400 font-medium">
+                      Interactive Challenge
+                    </p>
+                  </div>
+
+                </div>
+
+                <p className="text-[14px] text-surface-600 dark:text-surface-300 leading-relaxed mb-6">
+                  {quiz.description}
+                </p>
+
+                <Link href={quiz.href} className="block mt-auto w-full">
+                  <button className="w-full h-11 rounded-xl bg-pink-600 hover:bg-pink-700 text-white font-bold text-[14px] flex items-center justify-center gap-2 shadow-sm hover:shadow-md transition-all">
+                    <span>Start Quiz</span>
+                    <Play size={14} className="fill-current" />
+                  </button>
+                </Link>
+
+              </div>
+
+            </motion.div>
+          ))}
+
+        </div>
+      </div>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/pattern-matching/quiz/page.jsx b/src/app/visualizer/string/pattern-matching/quiz/page.jsx
new file mode 100644
index 000000000..7a955046f
--- /dev/null
+++ b/src/app/visualizer/string/pattern-matching/quiz/page.jsx
@@ -0,0 +1,5 @@
+import PatternMatchingQuizClient from "./PatternMatchingQuizClient";
+
+export default function Page() {
+  return <PatternMatchingQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/quiz/StringQuizClient.jsx b/src/app/visualizer/string/quiz/StringQuizClient.jsx
new file mode 100644
index 000000000..227af0dd5
--- /dev/null
+++ b/src/app/visualizer/string/quiz/StringQuizClient.jsx
@@ -0,0 +1,179 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowLeft, Play, Type } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function StringQuizClient() {
+  const quizzes = [
+    {
+      title: "Reverse String Quiz",
+      description:
+        "Practice Reverse String concepts, string manipulation techniques, two-pointer approach, and time complexities.",
+      href: "/visualizer/string/reverse-string/quiz",
+      filename: "reverse_string_quiz.js",
+    },
+    {
+      title: "Palindrome Check Quiz",
+      description:
+        "Practice Palindrome Check concepts, two-pointer technique, string comparison, and edge cases.",
+      href: "/visualizer/string/palindrome-check/quiz",
+      filename: "palindrome_check_quiz.js",
+    },
+    {
+      title: "Character Frequency Quiz",
+      description:
+        "Practice Character Frequency using maps, hashing, and frequency counting.",
+      href: "/visualizer/string/character-frequency/quiz",
+      filename: "character_frequency_quiz.js",
+    },
+    {
+      title: "Longest Common Prefix Quiz",
+      description:
+        "Practice Longest Common Prefix concepts, prefix matching, and string comparison.",
+      href: "/visualizer/string/longest-common-prefix/quiz",
+      filename: "longest_common_prefix_quiz.js",
+    },
+    {
+      title: "Anagram Check Quiz",
+      description:
+        "Practice Anagram Check concepts using sorting, hashing, and frequency comparison.",
+      href: "/visualizer/string/anagram-check/quiz",
+      filename: "anagram_check_quiz.js",
+    },
+   
+  ];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-[var(--udemy-text)] dark:text-white transition-colors duration-300 pb-20">
+
+      {/* Header */}
+      <section className="relative pt-6 pb-4">
+        <div className="max-w-[1100px] mx-auto px-4">
+
+          <Link href="/visualizer/quiz">
+            <button className="inline-flex items-center gap-2 text-sm font-semibold text-pink-600 hover:opacity-80 transition mb-3">
+              <ArrowLeft size={16} />
+              <span>Back to all quizzes</span>
+            </button>
+          </Link>
+
+          <h1 className="text-3xl font-black mb-2">
+            String Quiz Portal
+          </h1>
+
+          <p className="text-sm text-surface-600 dark:text-surface-400">
+            Test your understanding of String algorithms through interactive quizzes.
+          </p>
+
+        </div>
+      </section>
+
+      {/* Cards */}
+      <div className="max-w-5xl mx-auto px-4 mt-8">
+
+        <div className="grid md:grid-cols-2 gap-6 items-stretch">
+
+          {quizzes.map((quiz, index) => (
+
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{
+                duration: 0.4,
+                delay: index * 0.08,
+              }}
+              whileHover={{
+                y: -6,
+                scale: 1.015,
+              }}
+              whileTap={{
+                scale: 0.985,
+              }}
+              className="group flex flex-col h-full rounded-2xl border border-pink-500/20 dark:border-pink-500/30 bg-white dark:bg-[#1a1a1a] shadow-sm hover:shadow-xl transition-all duration-300"
+            >
+
+              {/* Top Bar */}
+              <div className="flex items-center justify-between px-4 py-2.5 bg-pink-500/10 dark:bg-pink-500/20 border-b border-pink-500/20 dark:border-pink-500/30">
+
+                <div className="flex items-center gap-1.5 font-mono text-xs">
+                  <span className="text-pink-500 font-bold">$</span>
+                  <span>node {quiz.filename}</span>
+                </div>
+
+              </div>
+
+              {/* Content */}
+              <div className="p-6 flex-1 flex flex-col justify-between">
+
+                <div>
+
+                  <div className="flex items-center gap-4 mb-4">
+
+                    <div className="w-12 h-12 rounded-xl bg-pink-500/10 border border-pink-500/20 flex items-center justify-center">
+
+                      <Type
+                        size={24}
+                        className="text-pink-600 dark:text-pink-400"
+                      />
+
+                    </div>
+
+                    <div>
+
+                      <h2 className="text-xl font-bold group-hover:text-pink-600 transition">
+
+                        {quiz.title}
+
+                      </h2>
+
+                      <p className="text-sm text-surface-500 dark:text-surface-400">
+
+                        Interactive Challenge
+
+                      </p>
+
+                    </div>
+
+                  </div>
+
+                  <p className="text-sm text-surface-600 dark:text-surface-300 leading-relaxed">
+
+                    {quiz.description}
+
+                  </p>
+
+                </div>
+
+                <Link
+                  href={quiz.href}
+                  className="block mt-6"
+                >
+
+                  <button className="w-full h-11 rounded-xl bg-pink-600 hover:bg-pink-700 dark:bg-pink-500 dark:hover:bg-pink-600 text-white font-bold flex items-center justify-center gap-2 transition">
+
+                    <span>Start Quiz</span>
+
+                    <Play
+                      size={15}
+                      className="fill-current"
+                    />
+
+                  </button>
+
+                </Link>
+
+              </div>
+
+            </motion.div>
+
+          ))}
+
+        </div>
+
+      </div>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/quiz/page.jsx b/src/app/visualizer/string/quiz/page.jsx
new file mode 100644
index 000000000..5f15ca199
--- /dev/null
+++ b/src/app/visualizer/string/quiz/page.jsx
@@ -0,0 +1,5 @@
+import StringQuizClient from "./StringQuizClient";
+
+export default function Page() {
+  return <StringQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/rabin-karp/animation.jsx b/src/app/visualizer/string/rabin-karp/animation.jsx
new file mode 100644
index 000000000..af69861f0
--- /dev/null
+++ b/src/app/visualizer/string/rabin-karp/animation.jsx
@@ -0,0 +1,84 @@
+"use client";
+
+import { useState } from "react";
+
+export default function Animation() {
+  const [text, setText] = useState("ABABDABACDABABCABAB");
+  const [pattern, setPattern] = useState("ABABCABAB");
+  const [index, setIndex] = useState(-1);
+
+  const runDemo = () => {
+    const found = text.indexOf(pattern);
+    setIndex(found);
+  };
+
+  return (
+    <div className="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-[#1b1b1b] p-6">
+      <h2 className="text-2xl font-bold mb-6">
+        Rabin-Karp Algorithm Visualization
+      </h2>
+
+      <div className="space-y-5">
+        <div>
+          <label className="block mb-2 font-semibold">Text</label>
+          <input
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            className="w-full rounded-lg border px-4 py-2 dark:bg-[#111]"
+          />
+        </div>
+
+        <div>
+          <label className="block mb-2 font-semibold">Pattern</label>
+          <input
+            value={pattern}
+            onChange={(e) => setPattern(e.target.value)}
+            className="w-full rounded-lg border px-4 py-2 dark:bg-[#111]"
+          />
+        </div>
+
+        <button
+          onClick={runDemo}
+          className="px-6 py-2 rounded-lg bg-pink-600 hover:bg-pink-700 text-white font-semibold"
+        >
+          Search Pattern
+        </button>
+
+        <div className="rounded-xl bg-slate-100 dark:bg-slate-800 p-4">
+          <p className="font-semibold">Text</p>
+          <div className="flex flex-wrap gap-2 mt-2">
+            {text.split("").map((ch, i) => {
+              const highlight =
+                index !== -1 &&
+                i >= index &&
+                i < index + pattern.length;
+
+              return (
+                <span
+                  key={i}
+                  className={`w-8 h-8 rounded flex items-center justify-center font-bold ${
+                    highlight
+                      ? "bg-pink-600 text-white"
+                      : "bg-white dark:bg-slate-700"
+                  }`}
+                >
+                  {ch}
+                </span>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="rounded-xl bg-slate-100 dark:bg-slate-800 p-4">
+          {index === -1 ? (
+            <p>No match found.</p>
+          ) : (
+            <p className="font-semibold text-green-600">
+              Pattern found at index {index}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/rabin-karp/codeBlock.jsx b/src/app/visualizer/string/rabin-karp/codeBlock.jsx
new file mode 100644
index 000000000..13a801c9c
--- /dev/null
+++ b/src/app/visualizer/string/rabin-karp/codeBlock.jsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { useState } from "react";
+import { Copy, Check } from "lucide-react";
+
+const code = `function rabinKarp(text, pattern) {
+  const d = 256;
+  const q = 101;
+
+  const n = text.length;
+  const m = pattern.length;
+
+  let patternHash = 0;
+  let textHash = 0;
+  let h = 1;
+
+  for (let i = 0; i < m - 1; i++) {
+    h = (h * d) % q;
+  }
+
+  for (let i = 0; i < m; i++) {
+    patternHash = (d * patternHash + pattern.charCodeAt(i)) % q;
+    textHash = (d * textHash + text.charCodeAt(i)) % q;
+  }
+
+  for (let i = 0; i <= n - m; i++) {
+
+    if (patternHash === textHash) {
+
+      let j = 0;
+
+      while (j < m && text[i + j] === pattern[j]) {
+        j++;
+      }
+
+      if (j === m) {
+        return i;
+      }
+
+    }
+
+    if (i < n - m) {
+      textHash =
+        (d * (textHash - text.charCodeAt(i) * h) +
+          text.charCodeAt(i + m)) % q;
+
+      if (textHash < 0) {
+        textHash += q;
+      }
+    }
+  }
+
+  return -1;
+}
+
+// Example
+const text = "ABABDABACDABABCABAB";
+const pattern = "ABABCABAB";
+
+console.log(rabinKarp(text, pattern));
+`;
+
+export default function CodeBlock() {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+
+    setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
+
+  return (
+    <div className="rounded-2xl border border-slate-200 dark:border-slate-700 overflow-hidden">
+
+      <div className="flex items-center justify-between px-5 py-4 bg-slate-100 dark:bg-slate-800">
+
+        <h2 className="text-lg font-bold">
+          JavaScript Implementation
+        </h2>
+
+        <button
+          onClick={handleCopy}
+          className="flex items-center gap-2 px-4 py-2 rounded-lg bg-pink-600 hover:bg-pink-700 text-white transition"
+        >
+          {copied ? (
+            <>
+              <Check size={16} />
+              Copied
+            </>
+          ) : (
+            <>
+              <Copy size={16} />
+              Copy
+            </>
+          )}
+        </button>
+
+      </div>
+
+      <pre className="overflow-x-auto p-6 text-sm bg-[#0d1117] text-green-400">
+        <code>{code}</code>
+      </pre>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/rabin-karp/content.jsx b/src/app/visualizer/string/rabin-karp/content.jsx
new file mode 100644
index 000000000..1fafed207
--- /dev/null
+++ b/src/app/visualizer/string/rabin-karp/content.jsx
@@ -0,0 +1,137 @@
+"use client";
+
+export default function Content() {
+  return (
+    <div className="space-y-8">
+
+      <section>
+        <h2 className="text-3xl font-bold mb-4">
+          Rabin-Karp Algorithm
+        </h2>
+
+        <p className="text-surface-700 dark:text-surface-300 leading-8">
+          Rabin-Karp is an efficient string searching algorithm that uses a
+          rolling hash technique to find a pattern inside a text. Instead of
+          comparing every character one by one, it computes hash values for the
+          pattern and each substring of the text. Character-by-character
+          comparison is performed only when the hash values match, making it
+          efficient for searching multiple patterns.
+        </p>
+      </section>
+
+      <section>
+        <h3 className="text-2xl font-bold mb-3">
+          Working Principle
+        </h3>
+
+        <ol className="list-decimal ml-6 space-y-2 text-surface-700 dark:text-surface-300">
+          <li>Compute the hash value of the pattern.</li>
+          <li>Compute the hash value of the first window of the text.</li>
+          <li>Compare both hash values.</li>
+          <li>
+            If hashes match, compare characters one by one to verify the match.
+          </li>
+          <li>
+            Slide the window by one character and update the hash using the
+            rolling hash technique.
+          </li>
+          <li>Repeat until the end of the text.</li>
+        </ol>
+      </section>
+
+      <section>
+        <h3 className="text-2xl font-bold mb-3">
+          Example
+        </h3>
+
+        <div className="rounded-xl bg-slate-100 dark:bg-slate-800 p-5 font-mono text-sm">
+          <p>Text : ABABDABACDABABCABAB</p>
+          <p>Pattern : ABABCABAB</p>
+          <p>Result : Pattern found at index 10</p>
+        </div>
+      </section>
+
+      <section>
+        <h3 className="text-2xl font-bold mb-3">
+          Time Complexity
+        </h3>
+
+        <div className="overflow-x-auto">
+          <table className="w-full border border-slate-300 dark:border-slate-700">
+            <thead>
+              <tr className="bg-slate-100 dark:bg-slate-800">
+                <th className="border p-3 text-left">Case</th>
+                <th className="border p-3 text-left">Complexity</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td className="border p-3">Best Case</td>
+                <td className="border p-3">O(n + m)</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">Average Case</td>
+                <td className="border p-3">O(n + m)</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">Worst Case</td>
+                <td className="border p-3">O(n × m)</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">Space Complexity</td>
+                <td className="border p-3">O(1)</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <section>
+        <h3 className="text-2xl font-bold mb-3">
+          Advantages
+        </h3>
+
+        <ul className="list-disc ml-6 space-y-2 text-surface-700 dark:text-surface-300">
+          <li>Efficient for multiple pattern searching.</li>
+          <li>Uses rolling hash to avoid recomputing hashes.</li>
+          <li>Average-case performance is very fast.</li>
+          <li>Simple implementation.</li>
+          <li>Widely used in plagiarism detection.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h3 className="text-2xl font-bold mb-3">
+          Disadvantages
+        </h3>
+
+        <ul className="list-disc ml-6 space-y-2 text-surface-700 dark:text-surface-300">
+          <li>Hash collisions may occur.</li>
+          <li>Worst-case complexity becomes O(n × m).</li>
+          <li>Requires a good hash function.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h3 className="text-2xl font-bold mb-3">
+          Applications
+        </h3>
+
+        <ul className="list-disc ml-6 space-y-2 text-surface-700 dark:text-surface-300">
+          <li>Pattern matching.</li>
+          <li>Plagiarism detection systems.</li>
+          <li>DNA sequence matching.</li>
+          <li>Virus signature detection.</li>
+          <li>Search engines.</li>
+          <li>Text editors.</li>
+          <li>Bioinformatics.</li>
+        </ul>
+      </section>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/rabin-karp/page.jsx b/src/app/visualizer/string/rabin-karp/page.jsx
new file mode 100644
index 000000000..af9a2c3ee
--- /dev/null
+++ b/src/app/visualizer/string/rabin-karp/page.jsx
@@ -0,0 +1,38 @@
+import Animation from "./animation";
+import Code from "./codeBlock";
+import Content from "./content";
+
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths(
+        "String",
+        "Rabin-Karp"
+      )}
+      title="Rabin-Karp Algorithm"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other Pattern Matching algorithms"
+          links={[
+            {
+              text: "KMP Algorithm",
+              url: "../kmp-algorithm",
+            },
+            {
+              text: "Z Algorithm",
+              url: "../z-algorithm",
+            },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/rabin-karp/quiz.jsx b/src/app/visualizer/string/rabin-karp/quiz.jsx
new file mode 100644
index 000000000..acdd4ccf9
--- /dev/null
+++ b/src/app/visualizer/string/rabin-karp/quiz.jsx
@@ -0,0 +1,196 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the primary purpose of the Rabin-Karp algorithm?",
+    options: [
+      "Sorting arrays",
+      "Searching for patterns in strings",
+      "Compressing strings",
+      "Encrypting text",
+    ],
+    answer: "Searching for patterns in strings",
+    explanation:
+      "Rabin-Karp is a string matching algorithm that efficiently searches for patterns using hashing.",
+  },
+  {
+    question: "Which technique is the Rabin-Karp algorithm based on?",
+    options: [
+      "Dynamic Programming",
+      "Rolling Hash",
+      "Binary Search",
+      "Greedy Algorithm",
+    ],
+    answer: "Rolling Hash",
+    explanation:
+      "Rabin-Karp uses a rolling hash function to efficiently compare substrings.",
+  },
+  {
+    question: "What is compared first in the Rabin-Karp algorithm?",
+    options: [
+      "Characters",
+      "Hash Values",
+      "ASCII Values",
+      "Indexes",
+    ],
+    answer: "Hash Values",
+    explanation:
+      "Hash values are compared first. Character-by-character comparison occurs only if the hashes match.",
+  },
+  {
+    question: "Why is a rolling hash used?",
+    options: [
+      "To sort the pattern",
+      "To avoid recomputing hash values from scratch",
+      "To reduce memory usage",
+      "To reverse strings",
+    ],
+    answer: "To avoid recomputing hash values from scratch",
+    explanation:
+      "Rolling hash updates the hash efficiently when the search window moves.",
+  },
+  {
+    question: "What is the average-case time complexity of Rabin-Karp?",
+    options: [
+      "O(n²)",
+      "O(n + m)",
+      "O(log n)",
+      "O(m²)",
+    ],
+    answer: "O(n + m)",
+    explanation:
+      "With a good hash function, Rabin-Karp performs in linear time on average.",
+  },
+  {
+    question: "What is the worst-case time complexity of Rabin-Karp?",
+    options: [
+      "O(n + m)",
+      "O(n × m)",
+      "O(log n)",
+      "O(m log n)",
+    ],
+    answer: "O(n × m)",
+    explanation:
+      "Hash collisions can force character-by-character comparisons, leading to O(n × m).",
+  },
+  {
+    question: "Which issue can reduce the efficiency of Rabin-Karp?",
+    options: [
+      "Recursion",
+      "Hash Collisions",
+      "Stack Overflow",
+      "Sorting",
+    ],
+    answer: "Hash Collisions",
+    explanation:
+      "Different strings may produce the same hash value, causing additional comparisons.",
+  },
+  {
+    question: "What happens after two hash values match?",
+    options: [
+      "The algorithm stops",
+      "The pattern is immediately accepted",
+      "Characters are compared one by one",
+      "The hash is discarded",
+    ],
+    answer: "Characters are compared one by one",
+    explanation:
+      "Hash equality is verified with a character-by-character comparison.",
+  },
+  {
+    question: "Which of the following is NOT an application of Rabin-Karp?",
+    options: [
+      "Plagiarism Detection",
+      "DNA Sequence Matching",
+      "String Pattern Matching",
+      "Binary Tree Traversal",
+    ],
+    answer: "Binary Tree Traversal",
+    explanation:
+      "Rabin-Karp is used for string matching, not tree traversal.",
+  },
+  {
+    question: "Which data structure is essential in Rabin-Karp?",
+    options: [
+      "Queue",
+      "Hash Function",
+      "Heap",
+      "Linked List",
+    ],
+    answer: "Hash Function",
+    explanation:
+      "The algorithm relies on hash functions to compare patterns efficiently.",
+  },
+  {
+    question: "Rabin-Karp is especially useful when searching for:",
+    options: [
+      "One pattern only",
+      "Multiple patterns",
+      "Numbers",
+      "Graphs",
+    ],
+    answer: "Multiple patterns",
+    explanation:
+      "The algorithm performs well when searching for multiple patterns using hashing.",
+  },
+  {
+    question: "Which value is updated when the search window slides?",
+    options: [
+      "Pattern Length",
+      "Rolling Hash",
+      "Array Size",
+      "Stack Pointer",
+    ],
+    answer: "Rolling Hash",
+    explanation:
+      "The rolling hash is updated efficiently without recalculating the entire hash.",
+  },
+  {
+    question: "Which algorithm also solves the string matching problem using preprocessing instead of hashing?",
+    options: [
+      "Merge Sort",
+      "KMP Algorithm",
+      "Heap Sort",
+      "Quick Sort",
+    ],
+    answer: "KMP Algorithm",
+    explanation:
+      "KMP preprocesses the pattern using the LPS array instead of hashing.",
+  },
+  {
+    question: "Which complexity best describes the space usage of Rabin-Karp?",
+    options: [
+      "O(1)",
+      "O(n)",
+      "O(log n)",
+      "O(n²)",
+    ],
+    answer: "O(1)",
+    explanation:
+      "Only a few variables are required besides the input strings.",
+  },
+  {
+    question: "Which statement about Rabin-Karp is correct?",
+    options: [
+      "It always compares every character.",
+      "It uses hashing to reduce comparisons.",
+      "It only works for sorted strings.",
+      "It cannot handle long texts.",
+    ],
+    answer: "It uses hashing to reduce comparisons.",
+    explanation:
+      "Hashing allows Rabin-Karp to avoid unnecessary character comparisons.",
+  },
+];
+
+export default function RabinKarpQuiz() {
+  return (
+    <QuizEngine
+      title="Rabin-Karp Algorithm Quiz"
+      subtitle="Test your understanding of the Rabin-Karp string matching algorithm."
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/rabin-karp/quiz/page.jsx b/src/app/visualizer/string/rabin-karp/quiz/page.jsx
new file mode 100644
index 000000000..3cd7350e8
--- /dev/null
+++ b/src/app/visualizer/string/rabin-karp/quiz/page.jsx
@@ -0,0 +1,5 @@
+import RabinKarpQuiz from "../quiz";
+
+export default function Page() {
+  return <RabinKarpQuiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/reverse-string/animation.jsx b/src/app/visualizer/string/reverse-string/animation.jsx
new file mode 100644
index 000000000..439d315f7
--- /dev/null
+++ b/src/app/visualizer/string/reverse-string/animation.jsx
@@ -0,0 +1,344 @@
+"use client";
+
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+} from "react";
+
+import GoButton from "@/app/components/ui/goButton";
+import ResetButton from "@/app/components/ui/resetButton";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+
+import {
+  saveToStorage,
+  loadFromStorage,
+  removeFromStorage,
+} from "@/utils/storage";
+
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+import { reverseStringGenerator } from "@/features/algorithms/string/reverseStringLogic";
+
+const ReverseString = () => {
+  const [inputString, setInputString] = useState(() =>
+    loadFromStorage("reverse-string-input", "")
+  );
+
+  const [characters, setCharacters] = useState([]);
+
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+
+  const [visualState, setVisualState] = useState({
+    left: -1,
+    right: -1,
+    array: [],
+    explanation: "",
+    step: 0,
+    completed: false,
+  });
+
+  useEffect(() => {
+    saveToStorage("reverse-string-input", inputString);
+  }, [inputString]);
+
+  const steps = useMemo(() => {
+    if (!characters.length) return [];
+    return Array.from(reverseStringGenerator(characters.join("")));
+  }, [characters]);
+
+  const onStep = useCallback((step) => {
+    setVisualState({
+      left: step.left,
+      right: step.right,
+      array: step.array,
+      explanation: step.explanation,
+      step: step.step,
+      completed: step.type === "complete",
+    });
+
+    if (step.type === "complete") {
+      setMessage(
+        `Reverse Completed : ${step.array.join("")}`
+      );
+      setMessageType("success");
+    }
+  }, []);
+
+  const engine = useAnimationEngine({
+    steps,
+    onStep,
+    initialSpeed: 1000,
+  });
+
+  const isAnimating =
+    engine.isPlaying || engine.currentStep > 0;
+
+  const handleReset = () => {
+    engine.reset();
+
+    removeFromStorage("reverse-string-input");
+
+    setInputString("");
+
+    setCharacters([]);
+
+    setMessage("");
+
+    setMessageType("");
+
+    setVisualState({
+      left: -1,
+      right: -1,
+      array: [],
+      explanation: "",
+      step: 0,
+      completed: false,
+    });
+  };
+
+  const handleGo = (e) => {
+    e.preventDefault();
+
+    engine.reset();
+
+    setMessage("");
+    setMessageType("");
+
+    if (!inputString.trim()) {
+      setMessage("Please enter a string.");
+      setMessageType("warning");
+      return;
+    }
+
+    const chars = inputString.split("");
+
+    setCharacters(chars);
+
+    setTimeout(() => {
+      engine.play();
+    }, 50);
+  };
+
+  useVisualizerKeyboard({
+    onTogglePlayPause: engine.isPlaying
+      ? engine.pause
+      : () => {
+          if (characters.length) engine.play();
+        },
+
+    onStepForward: engine.stepForward,
+
+    onStepBackward: engine.stepBackward,
+
+    onSpeedChange: (speed) =>
+      engine.setSpeed(speed * 1000),
+
+    speed: engine.speed / 1000,
+
+    sorting: engine.isPlaying,
+
+    sorted:
+      engine.currentStep === steps.length - 1 &&
+      steps.length > 0,
+  });
+
+  const messageClass =
+    messageType === "success"
+      ? "bg-green-100 text-green-800"
+      : messageType === "warning"
+      ? "bg-yellow-100 text-yellow-800"
+      : "bg-red-100 text-red-800";
+      return (
+  <main className="container mx-auto">
+
+    <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+      Visualize how the Reverse String algorithm swaps characters using two pointers.
+    </p>
+
+    <form
+      onSubmit={handleGo}
+      className="max-w-4xl mx-auto bg-white dark:bg-neutral-950 p-6 rounded-xl border border-gray-200 dark:border-gray-700 mb-8"
+    >
+      <div className="mb-4">
+        <label className="block text-gray-700 dark:text-gray-300 mb-2">
+          Input String
+        </label>
+
+        <input
+          type="text"
+          value={inputString}
+          onChange={(e) => setInputString(e.target.value)}
+          placeholder="Example: HELLO"
+          disabled={isAnimating}
+          className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:border-[#a435f0] focus:outline-none focus:ring-2 focus:ring-[#a435f0]/30 transition duration-300"
+        />
+      </div>
+
+      <div className="flex gap-2">
+        <GoButton
+          onClick={handleGo}
+          isAnimating={isAnimating}
+          disabled={isAnimating}
+        />
+
+        <ResetButton
+          onReset={handleReset}
+          isAnimating={isAnimating}
+        />
+      </div>
+
+      {isAnimating && (
+        <div className="mt-5">
+          <PlaybackControls
+            isPlaying={engine.isPlaying}
+            onPlayPause={
+              engine.isPlaying
+                ? engine.pause
+                : () => engine.play()
+            }
+            speed={engine.speed / 1000}
+            onSpeedChange={(s) =>
+              engine.setSpeed(s * 1000)
+            }
+            onStepForward={engine.stepForward}
+            onStepBackward={engine.stepBackward}
+            onReset={engine.reset}
+            onExplainStep={() => {}}
+            disabled={steps.length === 0}
+            progressText={`${Math.max(
+              engine.currentStep + 1,
+              0
+            )} / ${steps.length}`}
+          />
+        </div>
+      )}
+    </form>
+
+    {message && (
+      <div
+        className={`max-w-3xl mx-auto mb-8 p-4 rounded-lg ${messageClass}`}
+      >
+        <p className="text-center font-medium">
+          {message}
+        </p>
+      </div>
+    )}
+        {characters.length > 0 && (
+      <div className="max-w-4xl mx-auto space-y-6">
+
+        {visualState.explanation && (
+          <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+
+            <div className="flex items-center gap-2 bg-pink-100 dark:bg-pink-900 px-4 py-2 border-b">
+
+              <span className="w-2 h-2 rounded-full bg-pink-500 animate-pulse"></span>
+
+              <span className="text-sm font-semibold text-pink-600 uppercase">
+                Step Explanation
+              </span>
+
+              <span className="ml-auto text-xs text-gray-500">
+                Step {visualState.step}
+              </span>
+
+            </div>
+
+            <div className="px-4 py-4">
+              <p className="font-mono text-sm">
+                {visualState.explanation}
+              </p>
+            </div>
+
+          </div>
+        )}
+
+        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
+
+          <h2 className="text-2xl font-bold text-center mb-8">
+            Reverse String Visualization
+          </h2>
+
+          <div className="flex justify-center gap-4 flex-wrap">
+
+            {visualState.array.map((char, index) => {
+
+              let bg =
+                "bg-gray-200 dark:bg-gray-700";
+
+              let border =
+                "border-gray-400";
+
+              if (index === visualState.left) {
+                bg = "bg-blue-500";
+                border = "border-blue-700";
+              }
+
+              if (index === visualState.right) {
+                bg = "bg-pink-500";
+                border = "border-pink-700";
+              }
+
+              if (
+                visualState.completed
+              ) {
+                bg = "bg-green-500";
+                border = "border-green-700";
+              }
+
+              return (
+                <div
+                  key={index}
+                  className="flex flex-col items-center"
+                >
+
+                  <div
+                    className={`w-16 h-16 rounded-xl border-2 flex items-center justify-center font-bold text-2xl transition-all duration-500 ${bg} ${border} ${
+                      bg === "bg-gray-200 dark:bg-gray-700"
+                        ? "text-black dark:text-white"
+                        : "text-white"
+                    }`}
+                  >
+                    {char}
+                  </div>
+
+                  <div className="mt-2 text-xs h-6">
+
+                    {index === visualState.left && (
+                      <span className="text-blue-600 font-semibold">
+                        Left
+                      </span>
+                    )}
+
+                    {index === visualState.right && (
+                      <span className="text-pink-600 font-semibold">
+                        Right
+                      </span>
+                    )}
+
+                  </div>
+
+                  <div className="text-[11px] text-gray-500">
+
+                    [{index}]
+
+                  </div>
+
+                </div>
+              );
+            })}
+
+          </div>
+
+        </div>
+        </div>
+    )}
+  </main>
+);
+};
+
+export default ReverseString;
\ No newline at end of file
diff --git a/src/app/visualizer/string/reverse-string/codeBlock.jsx b/src/app/visualizer/string/reverse-string/codeBlock.jsx
new file mode 100644
index 000000000..494d11252
--- /dev/null
+++ b/src/app/visualizer/string/reverse-string/codeBlock.jsx
@@ -0,0 +1,139 @@
+"use client";
+
+import CodeBlock from "@/app/components/ui/CodeBlock";
+
+const codeExamples = {
+  javascript: `// Reverse String in JavaScript
+function reverseString(str) {
+    let arr = str.split("");
+    let left = 0;
+    let right = arr.length - 1;
+
+    while (left < right) {
+        [arr[left], arr[right]] = [arr[right], arr[left]];
+        left++;
+        right--;
+    }
+
+    return arr.join("");
+}
+
+// Usage
+const input = "HELLO";
+console.log(reverseString(input));`,
+
+  python: `# Reverse String in Python
+def reverse_string(s):
+    arr = list(s)
+    left = 0
+    right = len(arr) - 1
+
+    while left < right:
+        arr[left], arr[right] = arr[right], arr[left]
+        left += 1
+        right -= 1
+
+    return "".join(arr)
+
+# Usage
+print(reverse_string("HELLO"))`,
+
+  java: `// Reverse String in Java
+public class ReverseString {
+
+    public static String reverseString(String s) {
+        char[] arr = s.toCharArray();
+
+        int left = 0;
+        int right = arr.length - 1;
+
+        while (left < right) {
+            char temp = arr[left];
+            arr[left] = arr[right];
+            arr[right] = temp;
+
+            left++;
+            right--;
+        }
+
+        return new String(arr);
+    }
+
+    public static void main(String[] args) {
+        System.out.println(reverseString("HELLO"));
+    }
+}`,
+
+  c: `// Reverse String in C
+#include <stdio.h>
+#include <string.h>
+
+void reverseString(char str[]) {
+    int left = 0;
+    int right = strlen(str) - 1;
+
+    while (left < right) {
+        char temp = str[left];
+        str[left] = str[right];
+        str[right] = temp;
+
+        left++;
+        right--;
+    }
+}
+
+int main() {
+    char str[] = "HELLO";
+
+    reverseString(str);
+
+    printf("%s\\n", str);
+
+    return 0;
+}`,
+
+  cpp: `// Reverse String in C++
+#include <iostream>
+#include <string>
+
+using namespace std;
+
+void reverseString(string &s) {
+    int left = 0;
+    int right = s.length() - 1;
+
+    while (left < right) {
+        swap(s[left], s[right]);
+        left++;
+        right--;
+    }
+}
+
+int main() {
+    string s = "HELLO";
+
+    reverseString(s);
+
+    cout << s << endl;
+
+    return 0;
+}`,
+};
+
+const fileNames = {
+  javascript: "reverseString.js",
+  python: "reverse_string.py",
+  java: "ReverseString.java",
+  c: "reverse_string.c",
+  cpp: "reverse_string.cpp",
+};
+
+const ReverseStringCode = () => (
+  <CodeBlock
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default ReverseStringCode;
\ No newline at end of file
diff --git a/src/app/visualizer/string/reverse-string/content.jsx b/src/app/visualizer/string/reverse-string/content.jsx
new file mode 100644
index 000000000..86671ea7c
--- /dev/null
+++ b/src/app/visualizer/string/reverse-string/content.jsx
@@ -0,0 +1,162 @@
+"use client";
+
+import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState, useCallback } from "react";
+
+const Content = () => {
+  const [theme, setTheme] = useState("light");
+
+  const updateTheme = useCallback(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    updateTheme();
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, [updateTheme]);
+
+  const paragraphs = [
+    `Reverse String is a basic string manipulation algorithm that reverses the order of characters in a string. The most efficient approach uses two pointers—one starting from the beginning and the other from the end—and swaps characters until both pointers meet.`,
+
+    `This approach performs the reversal in-place without using any additional array, making it both time and space efficient.`,
+
+    `Reverse String is frequently used in interviews and serves as a foundation for many advanced string algorithms such as palindrome checking and rotation problems.`,
+  ];
+
+  const example = [
+    { points: "Input String: HELLO" },
+    { points: "Left points to H" },
+    { points: "Right points to O" },
+    { points: "Swap H and O → OELLH" },
+    { points: "Move pointers inward" },
+    { points: "Swap E and L → OLLEH" },
+    { points: "Pointers meet → Finished" },
+  ];
+
+  const steps = [
+    { points: "Initialize Left pointer at index 0." },
+    { points: "Initialize Right pointer at the last index." },
+    { points: "Swap characters at Left and Right." },
+    { points: "Increment Left pointer." },
+    { points: "Decrement Right pointer." },
+    { points: "Repeat until Left ≥ Right." },
+  ];
+
+  const complexity = [
+    { points: "Best Case: O(n)" },
+    { points: "Average Case: O(n)" },
+    { points: "Worst Case: O(n)" },
+    { points: "Space Complexity: O(1)" },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+
+      <article className="max-w-4xl bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8">
+
+        {/* What is Reverse String */}
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+
+          <h1 className="text-2xl font-black mb-4 flex items-center">
+            <span className="w-1 h-6 bg-pink-500 mr-3 rounded-full"></span>
+            What is Reverse String?
+          </h1>
+
+          <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+            {paragraphs[0]}
+          </p>
+
+        </section>
+
+        {/* Working */}
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+
+          <h1 className="text-2xl font-black mb-4 flex items-center">
+            <span className="w-1 h-6 bg-pink-500 mr-3 rounded-full"></span>
+            Example
+          </h1>
+
+          <ul className="space-y-3 list-disc pl-6">
+            {example.map((item, index) => (
+              <li key={index}>{item.points}</li>
+            ))}
+          </ul>
+
+          <p className="mt-5 text-gray-700 dark:text-gray-300">
+            {paragraphs[1]}
+          </p>
+
+        </section>
+
+        {/* Algorithm */}
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+
+          <h1 className="text-2xl font-black mb-4 flex items-center">
+            <span className="w-1 h-6 bg-pink-500 mr-3 rounded-full"></span>
+            Algorithm Steps
+          </h1>
+
+          <ol className="space-y-3 list-decimal pl-6">
+            {steps.map((item, index) => (
+              <li key={index}>{item.points}</li>
+            ))}
+          </ol>
+
+        </section>
+
+        {/* Complexity */}
+
+        <section className="p-6">
+
+          <h1 className="text-2xl font-black mb-4 flex items-center">
+            <span className="w-1 h-6 bg-pink-500 mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h1>
+
+          <ul className="space-y-3 list-disc pl-6">
+            {complexity.map((item, index) => (
+              <li key={index}>
+                {item.points}
+              </li>
+            ))}
+          </ul>
+
+          <div className="mt-8">
+
+            <ComplexityGraph
+              bestCase={(n) => n}
+              averageCase={(n) => n}
+              worstCase={(n) => n}
+              maxN={25}
+            />
+
+          </div>
+
+          <div className="mt-6 p-4 bg-pink-50 dark:bg-pink-950 rounded-xl border border-pink-200 dark:border-pink-800">
+
+            <p className="text-gray-700 dark:text-gray-300">
+              {paragraphs[2]}
+            </p>
+
+          </div>
+
+        </section>
+
+      </article>
+
+    </main>
+  );
+};
+
+export default Content;
\ No newline at end of file
diff --git a/src/app/visualizer/string/reverse-string/page.jsx b/src/app/visualizer/string/reverse-string/page.jsx
new file mode 100644
index 000000000..92f580bcb
--- /dev/null
+++ b/src/app/visualizer/string/reverse-string/page.jsx
@@ -0,0 +1,38 @@
+import Animation from "@/app/visualizer/string/reverse-string/animation";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Code from "@/app/visualizer/string/reverse-string/codeBlock";
+import Content from "@/app/visualizer/string/reverse-string/content";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("String", "Reverse String")}
+      title="Reverse String"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other string algorithms"
+          links={[
+            {
+              text: "Palindrome Check",
+              url: "../palindrome",
+            },
+            {
+            text: "Character Frequency",
+            url: "../character-frequency",
+          },
+          {
+            text: "Anagram Check",
+            url: "../anagram-check",
+          },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/reverse-string/quiz.jsx b/src/app/visualizer/string/reverse-string/quiz.jsx
new file mode 100644
index 000000000..9b2534cf9
--- /dev/null
+++ b/src/app/visualizer/string/reverse-string/quiz.jsx
@@ -0,0 +1,198 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const ReverseStringQuiz = () => {
+  const questions = [
+    {
+      question: "What is the primary goal of the Reverse String algorithm?",
+      options: [
+        "Sort the characters",
+        "Reverse the order of characters",
+        "Remove duplicate characters",
+        "Convert lowercase to uppercase"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The Reverse String algorithm reverses the order of characters in a string."
+    },
+    {
+      question: "Which approach is commonly used to reverse a string in-place?",
+      options: [
+        "Sliding Window",
+        "Two Pointers",
+        "Binary Search",
+        "Breadth First Search"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The two-pointer approach swaps characters from both ends until the pointers meet."
+    },
+    {
+      question: "What is the time complexity of the two-pointer reverse string algorithm?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "Each character is visited at most once, giving O(n) time complexity."
+    },
+    {
+      question: "What is the space complexity of the in-place reverse string algorithm?",
+      options: [
+        "O(1)",
+        "O(log n)",
+        "O(n)",
+        "O(n²)"
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Only a few variables are used, so the extra space required is O(1)."
+    },
+    {
+      question: "For the string 'HELLO', what is the reversed output?",
+      options: [
+        "OLLEH",
+        "HELLO",
+        "HLEOL",
+        "LOLEH"
+      ],
+      correctAnswer: 0,
+      explanation:
+        "The reverse of HELLO is OLLEH."
+    },
+    {
+      question: "When does the reverse string algorithm stop?",
+      options: [
+        "When left pointer reaches the last character",
+        "When left pointer becomes greater than or equal to right pointer",
+        "After one swap",
+        "When the string becomes sorted"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "The algorithm terminates when both pointers meet or cross."
+    },
+    {
+      question: "Which characters are swapped first in the string 'ABCDE'?",
+      options: [
+        "A and B",
+        "B and D",
+        "A and E",
+        "C and D"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "The first swap occurs between the first and last characters."
+    },
+    {
+      question: "Which pointer moves forward during the algorithm?",
+      options: [
+        "Left Pointer",
+        "Right Pointer",
+        "Both move backward",
+        "Neither pointer moves"
+      ],
+      correctAnswer: 0,
+      explanation:
+        "The left pointer increments after every swap."
+    },
+    {
+      question: "Which pointer moves backward during the algorithm?",
+      options: [
+        "Left Pointer",
+        "Middle Pointer",
+        "Right Pointer",
+        "All pointers"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "The right pointer decrements after every swap."
+    },
+    {
+      question: "Which of the following strings is a palindrome?",
+      options: [
+        "HELLO",
+        "LEVEL",
+        "WORLD",
+        "STRING"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "LEVEL reads the same forward and backward."
+    },
+    {
+      question: "How many swaps are required to reverse a string of length 6?",
+      options: [
+        "2",
+        "3",
+        "5",
+        "6"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Only n/2 swaps are needed, so 6/2 = 3."
+    },
+    {
+      question: "How many swaps are required to reverse a string of length 7?",
+      options: [
+        "3",
+        "4",
+        "5",
+        "7"
+      ],
+      correctAnswer: 0,
+      explanation:
+        "⌊7/2⌋ = 3 swaps."
+    },
+    {
+      question: "Which data structure stores the characters during in-place reversal?",
+      options: [
+        "Queue",
+        "Stack",
+        "Character Array",
+        "Graph"
+      ],
+      correctAnswer: 2,
+      explanation:
+        "The string is typically converted to a character array so characters can be swapped."
+    },
+    {
+      question: "Why is the two-pointer approach efficient?",
+      options: [
+        "It sorts the string",
+        "It visits each character only once",
+        "It uses recursion",
+        "It creates multiple copies"
+      ],
+      correctAnswer: 1,
+      explanation:
+        "Each character participates in at most one swap."
+    },
+    {
+      question: "Which interview problem commonly uses Reverse String as a foundation?",
+      options: [
+        "Palindrome Check",
+        "Heap Sort",
+        "Binary Search",
+        "Dijkstra Algorithm"
+      ],
+      correctAnswer: 0,
+      explanation:
+        "Palindrome checking also uses the two-pointer technique."
+    }
+  ];
+
+  return (
+    <QuizEngine
+      title="Reverse String Quiz Challenge"
+      questions={questions}
+    />
+  );
+};
+
+export default ReverseStringQuiz;
\ No newline at end of file
diff --git a/src/app/visualizer/string/reverse-string/quiz/page.jsx b/src/app/visualizer/string/reverse-string/quiz/page.jsx
new file mode 100644
index 000000000..5aa18db28
--- /dev/null
+++ b/src/app/visualizer/string/reverse-string/quiz/page.jsx
@@ -0,0 +1,5 @@
+import ReverseStringQuiz from "../quiz";
+
+export default function Page() {
+  return <ReverseStringQuiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/z-algorithm/animation.jsx b/src/app/visualizer/string/z-algorithm/animation.jsx
new file mode 100644
index 000000000..96cfbcb8a
--- /dev/null
+++ b/src/app/visualizer/string/z-algorithm/animation.jsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { useState } from "react";
+
+export default function Animation() {
+  const [text, setText] = useState("aabcaabxaaaz");
+  const [pattern, setPattern] = useState("aabx");
+  const [index, setIndex] = useState(-1);
+
+  const runDemo = () => {
+    // Demonstration using JavaScript's built-in search.
+    // The actual Z Algorithm implementation is shown in the code section.
+    const found = text.indexOf(pattern);
+    setIndex(found);
+  };
+
+  return (
+    <div className="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-[#1b1b1b] p-6">
+      <h2 className="text-2xl font-bold mb-6">
+        Z Algorithm Visualization
+      </h2>
+
+      <div className="space-y-5">
+        <div>
+          <label className="block mb-2 font-semibold">Text</label>
+          <input
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            className="w-full rounded-lg border px-4 py-2 dark:bg-[#111]"
+          />
+        </div>
+
+        <div>
+          <label className="block mb-2 font-semibold">Pattern</label>
+          <input
+            value={pattern}
+            onChange={(e) => setPattern(e.target.value)}
+            className="w-full rounded-lg border px-4 py-2 dark:bg-[#111]"
+          />
+        </div>
+
+        <button
+          onClick={runDemo}
+          className="px-6 py-2 rounded-lg bg-pink-600 hover:bg-pink-700 text-white font-semibold"
+        >
+          Search Pattern
+        </button>
+
+        <div className="rounded-xl bg-slate-100 dark:bg-slate-800 p-4">
+          <p className="font-semibold">Text</p>
+
+          <div className="flex flex-wrap gap-2 mt-2">
+            {text.split("").map((ch, i) => {
+              const highlight =
+                index !== -1 &&
+                i >= index &&
+                i < index + pattern.length;
+
+              return (
+                <span
+                  key={i}
+                  className={`w-8 h-8 rounded flex items-center justify-center font-bold ${
+                    highlight
+                      ? "bg-pink-600 text-white"
+                      : "bg-white dark:bg-slate-700"
+                  }`}
+                >
+                  {ch}
+                </span>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="rounded-xl bg-slate-100 dark:bg-slate-800 p-4">
+          {index === -1 ? (
+            <p>No match found.</p>
+          ) : (
+            <div className="space-y-2">
+              <p className="font-semibold text-green-600">
+                Pattern found at index {index}
+              </p>
+
+              <p className="text-sm text-slate-600 dark:text-slate-300">
+                The Z Algorithm builds a Z-array for the combined string
+                <span className="font-semibold"> "{pattern + "$" + text}" </span>
+                and identifies the pattern by finding Z-values equal to the
+                pattern length.
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/z-algorithm/codeBlock.jsx b/src/app/visualizer/string/z-algorithm/codeBlock.jsx
new file mode 100644
index 000000000..17963bb8d
--- /dev/null
+++ b/src/app/visualizer/string/z-algorithm/codeBlock.jsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { useState } from "react";
+
+const code = `function zAlgorithmSearch(text, pattern) {
+    const concat = pattern + "$" + text;
+    const n = concat.length;
+    const Z = new Array(n).fill(0);
+
+    let left = 0;
+    let right = 0;
+
+    for (let i = 1; i < n; i++) {
+        if (i <= right) {
+            Z[i] = Math.min(right - i + 1, Z[i - left]);
+        }
+
+        while (
+            i + Z[i] < n &&
+            concat[Z[i]] === concat[i + Z[i]]
+        ) {
+            Z[i]++;
+        }
+
+        if (i + Z[i] - 1 > right) {
+            left = i;
+            right = i + Z[i] - 1;
+        }
+    }
+
+    const result = [];
+
+    for (let i = 0; i < n; i++) {
+        if (Z[i] === pattern.length) {
+            result.push(i - pattern.length - 1);
+        }
+    }
+
+    return result;
+}
+
+const text = "aabcaabxaaaz";
+const pattern = "aabx";
+
+console.log(zAlgorithmSearch(text, pattern));
+`;
+
+export default function CodeBlock() {
+  const [copied, setCopied] = useState(false);
+
+  const copyCode = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-[#1b1b1b] p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-2xl font-bold">
+          JavaScript Implementation
+        </h2>
+
+        <button
+          onClick={copyCode}
+          className="px-4 py-2 rounded-lg bg-pink-600 hover:bg-pink-700 text-white font-medium"
+        >
+          {copied ? "Copied!" : "Copy Code"}
+        </button>
+      </div>
+
+      <pre className="overflow-x-auto rounded-xl bg-slate-100 dark:bg-slate-900 p-5 text-sm">
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/z-algorithm/content.jsx b/src/app/visualizer/string/z-algorithm/content.jsx
new file mode 100644
index 000000000..40cd4d33b
--- /dev/null
+++ b/src/app/visualizer/string/z-algorithm/content.jsx
@@ -0,0 +1,141 @@
+export default function Content() {
+  return (
+    <div className="space-y-8">
+      {/* Overview */}
+      <section>
+        <h2 className="text-2xl font-bold mb-3">Overview</h2>
+        <p className="text-slate-700 dark:text-slate-300 leading-7">
+          The <strong>Z Algorithm</strong> is a linear-time string matching
+          algorithm used to efficiently find all occurrences of a pattern
+          within a text. It constructs a <strong>Z-array</strong>, where each
+          element represents the length of the longest substring starting from
+          that position that matches the prefix of the string. By combining the
+          pattern and text into a single string, the algorithm can locate every
+          pattern occurrence in <strong>O(n + m)</strong> time.
+        </p>
+      </section>
+
+      {/* Working */}
+      <section>
+        <h2 className="text-2xl font-bold mb-3">How It Works</h2>
+
+        <ol className="list-decimal ml-6 space-y-2 text-slate-700 dark:text-slate-300">
+          <li>Concatenate the pattern, a special separator ($), and the text.</li>
+          <li>Construct the Z-array for the combined string.</li>
+          <li>Maintain a Z-box using two pointers (Left and Right).</li>
+          <li>Reuse previously computed values whenever possible.</li>
+          <li>Extend matches beyond the current Z-box if needed.</li>
+          <li>Whenever a Z-value equals the pattern length, a match is found.</li>
+        </ol>
+      </section>
+
+      {/* Example */}
+      <section>
+        <h2 className="text-2xl font-bold mb-3">Example</h2>
+
+        <div className="rounded-xl bg-slate-100 dark:bg-slate-800 p-5">
+          <p>
+            <strong>Text:</strong> aabcaabxaaaz
+          </p>
+
+          <p>
+            <strong>Pattern:</strong> aabx
+          </p>
+
+          <p className="mt-3">
+            Combined String:
+          </p>
+
+          <code className="block mt-2 rounded bg-white dark:bg-slate-900 p-3">
+            aabx$aabcaabxaaaz
+          </code>
+
+          <p className="mt-3">
+            After computing the Z-array, a value equal to the pattern length
+            (4) indicates that the pattern starts at that position in the text.
+          </p>
+        </div>
+      </section>
+
+      {/* Complexity */}
+      <section>
+        <h2 className="text-2xl font-bold mb-3">
+          Time & Space Complexity
+        </h2>
+
+        <div className="overflow-x-auto">
+          <table className="min-w-full border border-slate-300 dark:border-slate-700">
+            <thead>
+              <tr className="bg-slate-100 dark:bg-slate-800">
+                <th className="border p-3 text-left">Operation</th>
+                <th className="border p-3 text-left">Complexity</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td className="border p-3">Best Case</td>
+                <td className="border p-3">O(n + m)</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">Average Case</td>
+                <td className="border p-3">O(n + m)</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">Worst Case</td>
+                <td className="border p-3">O(n + m)</td>
+              </tr>
+
+              <tr>
+                <td className="border p-3">Space Complexity</td>
+                <td className="border p-3">O(n + m)</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* Advantages */}
+      <section>
+        <h2 className="text-2xl font-bold mb-3">Advantages</h2>
+
+        <ul className="list-disc ml-6 space-y-2 text-slate-700 dark:text-slate-300">
+          <li>Linear time complexity.</li>
+          <li>Efficient for large text searching.</li>
+          <li>Finds all occurrences of a pattern.</li>
+          <li>Avoids unnecessary character comparisons.</li>
+          <li>Simple once the Z-array concept is understood.</li>
+        </ul>
+      </section>
+
+      {/* Disadvantages */}
+      <section>
+        <h2 className="text-2xl font-bold mb-3">Disadvantages</h2>
+
+        <ul className="list-disc ml-6 space-y-2 text-slate-700 dark:text-slate-300">
+          <li>Requires additional memory for the Z-array.</li>
+          <li>The algorithm is less intuitive than naive matching.</li>
+          <li>Mainly useful for exact string matching.</li>
+        </ul>
+      </section>
+
+      {/* Applications */}
+      <section>
+        <h2 className="text-2xl font-bold mb-3">Applications</h2>
+
+        <ul className="list-disc ml-6 space-y-2 text-slate-700 dark:text-slate-300">
+          <li>Pattern Matching</li>
+          <li>Search Engines</li>
+          <li>Text Editors</li>
+          <li>DNA Sequence Analysis</li>
+          <li>Bioinformatics</li>
+          <li>Plagiarism Detection</li>
+          <li>Compiler Design</li>
+          <li>Data Compression</li>
+        </ul>
+      </section>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/z-algorithm/page.jsx b/src/app/visualizer/string/z-algorithm/page.jsx
new file mode 100644
index 000000000..b08dfd6a1
--- /dev/null
+++ b/src/app/visualizer/string/z-algorithm/page.jsx
@@ -0,0 +1,38 @@
+import Animation from "./animation";
+import Code from "./codeBlock";
+import Content from "./content";
+
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths(
+        "String",
+        "Z Algorithm"
+      )}
+      title="Z Algorithm"
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other Pattern Matching algorithms"
+          links={[
+            {
+              text: "KMP Algorithm",
+              url: "../kmp-algorithm",
+            },
+            {
+              text: "Rabin-Karp",
+              url: "../rabin-karp",
+            },
+          ]}
+        />
+      }
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/z-algorithm/quiz.jsx b/src/app/visualizer/string/z-algorithm/quiz.jsx
new file mode 100644
index 000000000..02fc986cc
--- /dev/null
+++ b/src/app/visualizer/string/z-algorithm/quiz.jsx
@@ -0,0 +1,196 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the primary purpose of the Z Algorithm?",
+    options: [
+      "Sorting arrays",
+      "Pattern matching in strings",
+      "Compressing files",
+      "Encrypting data",
+    ],
+    answer: "Pattern matching in strings",
+    explanation:
+      "The Z Algorithm is used for efficient pattern matching by computing the Z-array.",
+  },
+  {
+    question: "What does the Z-array represent?",
+    options: [
+      "Character frequencies",
+      "Longest substring matching the prefix",
+      "ASCII values",
+      "Hash values",
+    ],
+    answer: "Longest substring matching the prefix",
+    explanation:
+      "Each Z[i] stores the length of the longest substring starting at index i that matches the prefix of the string.",
+  },
+  {
+    question: "What is the time complexity of the Z Algorithm?",
+    options: [
+      "O(n²)",
+      "O(n)",
+      "O(log n)",
+      "O(n log n)",
+    ],
+    answer: "O(n)",
+    explanation:
+      "The Z-array is computed in linear time, making the Z Algorithm very efficient.",
+  },
+  {
+    question: "Which two pointers are maintained while computing the Z-array?",
+    options: [
+      "Top and Bottom",
+      "Left and Right",
+      "Front and Rear",
+      "Start and End",
+    ],
+    answer: "Left and Right",
+    explanation:
+      "The algorithm maintains Left (L) and Right (R) pointers to represent the current Z-box.",
+  },
+  {
+    question: "What is a Z-box?",
+    options: [
+      "A sorting window",
+      "A substring matching the prefix",
+      "A binary tree node",
+      "A hash table",
+    ],
+    answer: "A substring matching the prefix",
+    explanation:
+      "The Z-box represents the interval where the substring matches the prefix of the string.",
+  },
+  {
+    question: "Which string is typically created before computing the Z-array for pattern matching?",
+    options: [
+      "Text + Pattern",
+      "Pattern + '$' + Text",
+      "Pattern + Pattern",
+      "Text + Text",
+    ],
+    answer: "Pattern + '$' + Text",
+    explanation:
+      "A separator ('$') prevents unwanted matches between the pattern and text.",
+  },
+  {
+    question: "When is a pattern found using the Z Algorithm?",
+    options: [
+      "When Z[i] = 0",
+      "When Z[i] equals the pattern length",
+      "When Z[i] = i",
+      "When Z[i] is negative",
+    ],
+    answer: "When Z[i] equals the pattern length",
+    explanation:
+      "A Z-value equal to the pattern length indicates a complete pattern match.",
+  },
+  {
+    question: "Which of the following best describes the Z Algorithm?",
+    options: [
+      "A graph traversal algorithm",
+      "A linear-time string matching algorithm",
+      "A sorting algorithm",
+      "A shortest path algorithm",
+    ],
+    answer: "A linear-time string matching algorithm",
+    explanation:
+      "The Z Algorithm efficiently performs exact pattern matching in linear time.",
+  },
+  {
+    question: "Which of these is an application of the Z Algorithm?",
+    options: [
+      "Binary Tree Traversal",
+      "Pattern Searching",
+      "Heap Construction",
+      "Graph Coloring",
+    ],
+    answer: "Pattern Searching",
+    explanation:
+      "The Z Algorithm is widely used for searching patterns within strings.",
+  },
+  {
+    question: "What is the worst-case time complexity of the Z Algorithm?",
+    options: [
+      "O(n²)",
+      "O(n log n)",
+      "O(n)",
+      "O(log n)",
+    ],
+    answer: "O(n)",
+    explanation:
+      "The Z Algorithm guarantees linear-time performance even in the worst case.",
+  },
+  {
+    question: "How much extra space does the Z Algorithm require?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)",
+    ],
+    answer: "O(n)",
+    explanation:
+      "The algorithm stores one Z-array of size equal to the input string.",
+  },
+  {
+    question: "Which algorithm also performs linear-time pattern matching?",
+    options: [
+      "Merge Sort",
+      "KMP Algorithm",
+      "Quick Sort",
+      "Selection Sort",
+    ],
+    answer: "KMP Algorithm",
+    explanation:
+      "Both KMP and the Z Algorithm solve the string matching problem in linear time.",
+  },
+  {
+    question: "Why does the Z Algorithm reuse previous computations?",
+    options: [
+      "To reduce memory usage",
+      "To avoid repeated character comparisons",
+      "To sort faster",
+      "To increase recursion depth",
+    ],
+    answer: "To avoid repeated character comparisons",
+    explanation:
+      "Previously computed Z-values are reused to achieve O(n) complexity.",
+  },
+  {
+    question: "Which of the following is NOT an application of the Z Algorithm?",
+    options: [
+      "DNA Sequence Analysis",
+      "Plagiarism Detection",
+      "Text Searching",
+      "Binary Search Tree Balancing",
+    ],
+    answer: "Binary Search Tree Balancing",
+    explanation:
+      "The Z Algorithm is designed for string processing, not tree balancing.",
+  },
+  {
+    question: "Which statement about the Z Algorithm is correct?",
+    options: [
+      "It only works on sorted strings.",
+      "It uses the Z-array for efficient pattern matching.",
+      "It requires hashing.",
+      "It is slower than brute-force search.",
+    ],
+    answer: "It uses the Z-array for efficient pattern matching.",
+    explanation:
+      "The Z Algorithm relies on the Z-array to efficiently identify pattern matches in linear time.",
+  },
+];
+
+export default function ZAlgorithmQuiz() {
+  return (
+    <QuizEngine
+      title="Z Algorithm Quiz"
+      subtitle="Test your understanding of the Z Algorithm and Z-array construction."
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/string/z-algorithm/quiz/page.jsx b/src/app/visualizer/string/z-algorithm/quiz/page.jsx
new file mode 100644
index 000000000..35e32c743
--- /dev/null
+++ b/src/app/visualizer/string/z-algorithm/quiz/page.jsx
@@ -0,0 +1,5 @@
+import ZAlgorithmQuiz from "../quiz";
+
+export default function Page() {
+  return <ZAlgorithmQuiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/b-trees/AlgorithmClient.jsx b/src/app/visualizer/tree/advanced/b-trees/AlgorithmClient.jsx
new file mode 100644
index 000000000..68b1bfef0
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/b-trees/AlgorithmClient.jsx
@@ -0,0 +1,43 @@
+import BTreeAnimation from "@/app/visualizer/tree/advanced/b-trees/animation";
+import BTreeContent from "@/app/visualizer/tree/advanced/b-trees/content";
+import BTreeCode from "@/app/visualizer/tree/advanced/b-trees/codeBlock";
+import BTreeQuiz from "@/app/visualizer/tree/advanced/b-trees/quiz";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+
+
+export default function BTreePage() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Advanced Trees", "B-Tree")}
+      title="B-Tree"
+      animation={<BTreeAnimation />}
+      content={<BTreeContent />}
+      code={<BTreeCode />}
+      quiz={<BTreeQuiz />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.bTree}
+          description="Mark B-Tree as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other Advanced Trees"
+          links={[
+            { text: "Red-Black Trees", url: "./red-black" },
+            { text: "Trie (Prefix Tree)", url: "./trie" },
+            { text: "Segment Trees", url: "./segment" },
+            { text: "Fenwick Trees", url: "./fenwick" }
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/advanced/b-trees/animation.jsx b/src/app/visualizer/tree/advanced/b-trees/animation.jsx
new file mode 100644
index 000000000..8e1faec83
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/b-trees/animation.jsx
@@ -0,0 +1,368 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import {
+  RefreshCw,
+  Plus,
+  Search
+} from "lucide-react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import usePlayback from "@/app/hooks/usePlayback";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { BTreeManager, T, cloneTree } from "@/features/algorithms/tree/bTreeLogic";
+
+// Logic moved to src/features/algorithms/tree/bTreeLogic.js
+
+// Layout: compute (x, y) positions for rendering
+function layoutTree(root) {
+  if (!root) return { nodes: [], edges: [] };
+  const nodes = [];
+  const edges = [];
+  const NODE_W = 100;
+  const HGAP = 20;
+  const VERT_GAP = 100;
+
+  const computeWidth = (node) => {
+    if (node.isLeaf || node.children.length === 0) {
+      return Math.max(NODE_W, node.keys.length * 28 + 16);
+    }
+    return node.children.reduce((sum, c) => sum + computeWidth(c) + HGAP, 0) - HGAP;
+  };
+
+  const dfs = (node, depth, xStart) => {
+    const totalW = computeWidth(node);
+    const nodeW = Math.max(NODE_W, node.keys.length * 28 + 16);
+    const x = xStart + totalW / 2 - nodeW / 2;
+    const y = 50 + depth * VERT_GAP;
+
+    nodes.push({ id: node.id, keys: node.keys, isLeaf: node.isLeaf, x, y, w: nodeW });
+
+    if (!node.isLeaf && node.children.length > 0) {
+      let childX = xStart;
+      node.children.forEach(child => {
+        const cW = computeWidth(child);
+        const childNodeW = Math.max(NODE_W, child.keys.length * 28 + 16);
+        const childXCenter = childX + cW / 2 - childNodeW / 2;
+        const childY = 50 + (depth + 1) * VERT_GAP;
+        edges.push({ x1: x + nodeW / 2, y1: y + 24, x2: childXCenter + childNodeW / 2, y2: childY - 8, childId: child.id });
+        dfs(child, depth + 1, childX);
+        childX += cW + HGAP;
+      });
+    }
+  };
+
+  dfs(root, 0, 40);
+  return { nodes, edges };
+}
+
+const INITIAL_KEYS = [10, 20, 5, 6, 12, 30, 7, 17];
+
+export default function BTreeAnimation() {
+  const managerRef = useRef(null);
+  const [displayRoot, setDisplayRoot] = useState(null);
+  const [inputValue, setInputValue] = useState("");
+  const [searchValue, setSearchValue] = useState("");
+  const [mode, setMode] = useState("insert");
+  const [steps, setSteps] = useState([]);
+  const [currentStepIdx, setCurrentStepIdx] = useState(-1);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const { speed, setSpeed } = usePlayback(1);
+  const [message, setMessage] = useState(`B-Tree pre-loaded (order ${2 * T}, max ${2 * T - 1} keys/node)! Insert or Search keys.`);
+  const [highlighted, setHighlighted] = useState({});
+
+  const timerRef = useRef(null);
+  useVisualizerReset(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setIsAnimating(false);
+    setMessage("...");
+    setSteps([]);
+    setCurrentStepIdx(-1);
+  });
+
+  // Initialize tree
+  useEffect(() => {
+    const mgr = new BTreeManager();
+    for (const key of INITIAL_KEYS) {
+      const gen = mgr.insertGenerator(key);
+      for (const step of gen) {} // exhaust generator
+    }
+    managerRef.current = mgr;
+    setDisplayRoot(cloneTree(mgr.root));
+  }, []);
+
+
+
+  useEffect(() => {
+    if (currentStepIdx < 0 || currentStepIdx >= steps.length) return;
+    const step = steps[currentStepIdx];
+    setDisplayRoot(step.tree);
+    setHighlighted(step.highlighted || {});
+    setMessage(step.explanation || "");
+  }, [currentStepIdx, steps]);
+
+  useEffect(() => {
+    if (!isAnimating || steps.length === 0) return;
+    if (currentStepIdx >= steps.length - 1) { setIsAnimating(false); return; }
+    timerRef.current = setTimeout(() => setCurrentStepIdx(p => p + 1), 1600 / speed);
+    return () => { if (timerRef.current) clearTimeout(timerRef.current); };
+  }, [isAnimating, currentStepIdx, steps, speed]);
+
+  const pauseVisualizer = () => { setIsAnimating(false); if (timerRef.current) clearTimeout(timerRef.current); };
+  const startVisualizer = () => {
+    if (steps.length === 0) return;
+    setIsAnimating(true);
+    const nextIdx = currentStepIdx === -1 || currentStepIdx >= steps.length - 1 ? 0 : currentStepIdx + 1;
+    setCurrentStepIdx(nextIdx);
+  };
+  const stepForward = () => { setIsAnimating(false); if (currentStepIdx < steps.length - 1) setCurrentStepIdx(p => p + 1); };
+  const stepBackward = () => { setIsAnimating(false); if (currentStepIdx > 0) setCurrentStepIdx(p => p - 1); };
+  const resetPlayback = () => {
+    setIsAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setCurrentStepIdx(-1);
+    setHighlighted({});
+    setDisplayRoot(managerRef.current ? cloneTree(managerRef.current.root) : null);
+    setMessage("Playback reset.");
+  };
+
+  const handleReset = () => {
+    setIsAnimating(false);
+    const mgr = new BTreeManager();
+    for (const key of INITIAL_KEYS) {
+      const gen = mgr.insertGenerator(key);
+      for (const step of gen) {} // exhaust generator
+    }
+    managerRef.current = mgr;
+    setDisplayRoot(cloneTree(mgr.root));
+    setSteps([]);
+    setCurrentStepIdx(-1);
+    setHighlighted({});
+    setInputValue(""); setSearchValue("");
+    setMessage(`Tree reset to default (order ${2 * T}). Insert or search keys.`);
+  };
+
+  const triggerInsert = () => {
+    const key = parseInt(inputValue);
+    if (isNaN(key) || key < 1 || key > 999) { setMessage("⚠️ Enter a valid key (1-999)."); return; }
+    setIsAnimating(false);
+    setInputValue("");
+    
+    const gen = managerRef.current.insertGenerator(key);
+    const newSteps = Array.from(gen);
+    
+    setSteps(newSteps);
+    setCurrentStepIdx(0);
+    setIsAnimating(true);
+  };
+
+  const triggerSearch = () => {
+    const key = parseInt(searchValue);
+    if (isNaN(key) || key < 1 || key > 999) { setMessage("⚠️ Enter a valid key to search (1-999)."); return; }
+    setIsAnimating(false);
+    setSearchValue("");
+    
+    const gen = managerRef.current.searchGenerator(key);
+    const newSteps = Array.from(gen);
+    
+    setSteps(newSteps);
+    setCurrentStepIdx(0);
+    setIsAnimating(true);
+  };
+
+  useVisualizerKeyboard({
+    onStepForward: stepForward,
+    onStepBackward: stepBackward,
+    onTogglePlay: isAnimating ? pauseVisualizer : startVisualizer,
+    onReset: resetPlayback,
+    onSpeedChange: setSpeed,
+    speed: speed,
+    sorting: isAnimating,
+    sorted: false,
+    enabled: true,
+  });
+
+  // Layout
+  const { nodes, edges } = layoutTree(displayRoot);
+  const svgWidth = nodes.length > 0 ? Math.max(800, Math.max(...nodes.map(n => n.x + n.w)) + 60) : 800;
+  const svgHeight = nodes.length > 0 ? Math.max(380, Math.max(...nodes.map(n => n.y)) + 80) : 380;
+
+  const getNodeStyle = (nodeId) => {
+    const state = highlighted[nodeId];
+    if (state === "visiting") return { fill: "#a435f0", stroke: "#d38cff" };
+    if (state === "active")   return { fill: "#10b981", stroke: "#34d399" };
+    if (state === "matched")  return { fill: "#f59e0b", stroke: "#fbbf24" };
+    if (state === "error")    return { fill: "#ef4444", stroke: "#f87171" };
+    return { fill: "var(--background)", stroke: "#64748b" };
+  };
+
+  return (
+    <VisualizerInteractiveLayout>
+      <VisualizerCard>
+        <div className="flex gap-2 mb-4 bg-gray-100 p-1 rounded-xl w-fit dark:bg-gray-800">
+          {[["insert", "Insert"], ["search", "Search"]].map(([val, label]) => (
+            <button key={val} onClick={() => { setMode(val); resetPlayback(); }}
+              className={`px-4 py-1.5 text-xs font-bold rounded-lg transition-all ${mode === val ? "bg-[#a435f0] text-white shadow-md" : "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"}`}>
+              {label}
+            </button>
+          ))}
+        </div>
+
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div className="flex flex-col sm:flex-row gap-2">
+            {mode === "insert" ? (
+              <>
+                <input type="number" value={inputValue} onChange={e => setInputValue(e.target.value)} placeholder="Key (1-999)"
+                  className="flex-1 rounded-lg border p-2 transition-all focus:border-transparent focus:ring-2 focus:ring-[#a435f0] dark:bg-gray-700"
+                  disabled={isAnimating} onKeyDown={e => e.key === "Enter" && triggerInsert()} />
+                <button onClick={triggerInsert} disabled={isAnimating}
+                  className="flex items-center gap-1.5 px-4 py-2 text-white bg-[#a435f0] rounded-lg transition-colors hover:bg-[#8f2cd6] disabled:opacity-50 h-[42px]">
+                  <Plus className="w-4 h-4" /> Insert
+                </button>
+              </>
+            ) : (
+              <>
+                <input type="number" value={searchValue} onChange={e => setSearchValue(e.target.value)} placeholder="Key to search"
+                  className="flex-1 rounded-lg border p-2 transition-all focus:border-transparent focus:ring-2 focus:ring-[#a435f0] dark:bg-gray-700"
+                  disabled={isAnimating} onKeyDown={e => e.key === "Enter" && triggerSearch()} />
+                <button onClick={triggerSearch} disabled={isAnimating}
+                  className="flex items-center gap-1.5 px-4 py-2 text-white bg-[#a435f0] rounded-lg transition-colors hover:bg-[#8f2cd6] disabled:opacity-50 h-[42px]">
+                  <Search className="w-4 h-4" /> Search
+                </button>
+              </>
+            )}
+          </div>
+          
+          <div className="flex justify-end gap-2 items-start">
+            <button onClick={handleReset} className="flex items-center gap-1.5 rounded-lg border border-red-500 text-red-500 px-4 py-2 transition-colors hover:bg-red-500 hover:text-white h-[42px]">
+              <RefreshCw className="w-4 h-4" /> Reset
+            </button>
+          </div>
+        </div>
+
+        <div className="mt-6">
+          <PlaybackControls 
+            isPlaying={isAnimating}
+            onPlayPause={isAnimating ? pauseVisualizer : startVisualizer}
+            onStepForward={stepForward}
+            onStepBackward={stepBackward}
+            onReset={resetPlayback}
+            speed={speed}
+            onSpeedChange={setSpeed}
+            disabled={steps.length === 0}
+            showPlayPause={true}
+          />
+        </div>
+      </VisualizerCard>
+
+      <VisualizerCard
+        className={
+          message.includes("✅") || message.includes("successfully")
+            ? "border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30"
+            : message.includes("not found") || message.includes("error") || message.includes("⚠️")
+              ? "border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-950/30"
+              : isAnimating
+                ? "border-[#a435f0]/30 bg-[#a435f0]/10 dark:border-[#a435f0]/50 dark:bg-[#a435f0]/20"
+                : ""
+        }
+      >
+        <div className="flex justify-between items-center text-xs text-gray-500 mb-2">
+          <span>Operation Explanation</span>
+          <div className="flex items-center gap-2">
+            <span className="text-gray-400 font-mono">Order {2*T} B-Tree (max {2*T-1} keys/node)</span>
+            <span className="font-bold bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
+              Step {currentStepIdx !== -1 ? currentStepIdx + 1 : 0} / {steps.length || 0}
+            </span>
+          </div>
+        </div>
+        <p className="font-medium text-lg min-h-[28px]">{message}</p>
+      </VisualizerCard>
+
+      <VisualizerCard>
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-lg font-semibold">B-Tree Visualization</h2>
+          <div className="flex flex-wrap gap-2 text-xs">
+            {[
+              { color: "bg-[#a435f0]", label: "Visiting" },
+              { color: "bg-emerald-500", label: "Split / Active" },
+              { color: "bg-amber-500", label: "Found" },
+              { color: "bg-red-500", label: "Not Found" },
+            ].map(({ color, label }) => (
+              <div key={label} className="flex items-center gap-1.5 px-2 py-1 rounded-lg">
+                <span className={`w-2.5 h-2.5 rounded-full ${color}`} />
+                <span className="text-gray-500 dark:text-gray-400">{label}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="overflow-auto flex justify-center py-8 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 relative min-h-[380px]">
+          <svg width={svgWidth} height={svgHeight} viewBox={`0 0 ${svgWidth} ${svgHeight}`} className="max-w-full h-auto">
+            {/* Edges */}
+            {edges.map((e, i) => (
+              <line key={i} x1={e.x1} y1={e.y1} x2={e.x2} y2={e.y2}
+                stroke={highlighted[e.childId] ? "#a435f0" : "currentColor"} strokeWidth={highlighted[e.childId] ? "2.5" : "1.5"}
+                className={`transition-all duration-300 ${highlighted[e.childId] ? '' : 'stroke-gray-300 dark:stroke-gray-600'}`} />
+            ))}
+
+            {/* Nodes */}
+            {nodes.map(node => {
+              const style = getNodeStyle(node.id);
+              const keyW = node.w / Math.max(node.keys.length, 1);
+              
+              let fillStyle = style.fill;
+              if (fillStyle === "var(--background)") {
+                fillStyle = "currentColor";
+              }
+              
+              return (
+                <g key={node.id} className="transition-all duration-300">
+                  {/* Glow */}
+                  {highlighted[node.id] && <rect x={node.x - 4} y={node.y - 12} width={node.w + 8} height={36} rx="10" fill="none" stroke={style.stroke} strokeWidth="1.5" strokeDasharray="4,2" className="opacity-80 animate-pulse" />}
+
+                  {/* Node background */}
+                  <rect x={node.x} y={node.y - 8} width={node.w} height={28} rx="6" fill={fillStyle} stroke={style.stroke} strokeWidth="1.5" 
+                    className={`transition-all duration-300 ${style.fill === 'var(--background)' ? 'fill-white dark:fill-gray-900' : ''}`} />
+
+                  {/* Key dividers + text */}
+                  {node.keys.map((key, ki) => (
+                    <g key={ki}>
+                      {ki > 0 && <line x1={node.x + ki * keyW} y1={node.y - 8} x2={node.x + ki * keyW} y2={node.y + 20} stroke={style.stroke} strokeWidth="1" className="opacity-50" />}
+                      <text 
+                        x={node.x + ki * keyW + keyW / 2} y={node.y + 7} 
+                        textAnchor="middle" 
+                        fill={style.fill === 'var(--background)' ? 'currentColor' : '#ffffff'} 
+                        fontSize="11" 
+                        fontWeight="bold"
+                        className={style.fill === 'var(--background)' ? 'fill-gray-900 dark:fill-gray-100' : ''}
+                      >
+                        {key}
+                      </text>
+                    </g>
+                  ))}
+
+                  {/* Empty node */}
+                  {node.keys.length === 0 && <text x={node.x + node.w / 2} y={node.y + 7} textAnchor="middle" className="fill-gray-500 dark:fill-gray-400" fontSize="10">(empty)</text>}
+                </g>
+              );
+            })}
+
+            {/* Empty state */}
+            {nodes.length === 0 && <text x="400" y="180" textAnchor="middle" className="fill-gray-500 dark:fill-gray-400" fontSize="14">Insert keys to build the B-Tree</text>}
+          </svg>
+          
+          {/* B-Tree properties */}
+          <div className="absolute bottom-4 right-4 bg-white/90 dark:bg-gray-800/90 backdrop-blur border border-gray-200 dark:border-gray-700 rounded-xl px-3 py-2 text-xs space-y-0.5 max-w-xs shadow-sm">
+            <p className="text-gray-700 dark:text-gray-300 font-bold mb-1">B-Tree Properties (t={T}):</p>
+            <p className="text-gray-500 dark:text-gray-400">Min keys: {T - 1} (root: 1)</p>
+            <p className="text-gray-500 dark:text-gray-400">Max keys: {2 * T - 1}</p>
+            <p className="text-gray-500 dark:text-gray-400">All leaves at same level</p>
+          </div>
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+}
diff --git a/src/app/visualizer/tree/advanced/b-trees/codeBlock.jsx b/src/app/visualizer/tree/advanced/b-trees/codeBlock.jsx
new file mode 100644
index 000000000..81094f1eb
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/b-trees/codeBlock.jsx
@@ -0,0 +1,117 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for B-Tree ─────────────────────────────
+const codeExamples = {
+  javascript: `// B-Tree Node Implementation in JavaScript
+class BTreeNode{
+    constructor(t,leaf=true){
+        this.t=t;
+        this.keys=[];
+        this.C=[];
+        this.leaf=leaf;
+    }
+    traverse(){
+        let i;
+        for(i=0;i<this.keys.length;i++){
+            if(!this.leaf){
+                this.C[i].traverse();
+            }
+            console.log(this.keys[i]);
+        }
+        if(!this.leaf){
+            this.C[i].traverse();
+        }
+    }
+    search(k){
+        let i=0;
+        while(i<this.keys.length && k>this.keys[i]){
+            i++;
+        }
+        if(this.keys[i]===k){
+            return this;
+        }
+        if(this.leaf){
+            return null;
+        }
+        return this.C[i].search(k);
+    }
+}`,
+
+  python: `# B-Tree Node Implementation
+class BTreeNode:
+    def __init__(self,t,leaf=True):
+        self.t=t
+        self.keys=[]
+        self.C=[]
+        self.leaf=leaf
+
+    def traverse(self):
+        for i in range(len(self.keys)):
+            if not self.leaf:
+                self.C[i].traverse()
+            print(self.keys[i])
+        if not self.leaf:
+            self.C[-1].traverse()
+
+    def search(self,k):
+        i=0
+        while(i<len(self.keys) and k>self.keys[i]):
+            i+=1
+        if(i<len(self.keys) and self.keys[i]==k):
+            return self
+        if self.leaf:
+            return None
+        return self.C[i].search(k)`,
+
+  cpp: `// B-Tree Node Implementation
+#include<iostream>
+using namespace std;
+
+class BTreeNode{
+    int *keys;
+    int t;
+    BTreeNode **C;
+    int n;
+    bool leaf;
+public:
+    BTreeNode(int _t,bool _leaf){
+        t=_t;
+        leaf=_leaf;
+        keys=new int[2*t-1];
+        C=new BTreeNode*[2*t];
+        n=0;
+    }
+    void traverse(){
+        int i;
+        for(i=0;i<n;i++){
+            if(leaf==false){
+                C[i]->traverse();
+            }
+            cout<<" "<<keys[i];
+        }
+        if(leaf==false){
+            C[i]->traverse();
+        }
+    }
+};`
+};
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'btree.js',
+    python:'btree.py',
+    cpp:'btree.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/b-trees/content.jsx b/src/app/visualizer/tree/advanced/b-trees/content.jsx
new file mode 100644
index 000000000..234080a21
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/b-trees/content.jsx
@@ -0,0 +1,66 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+
+const BTreeContent = () => {
+  return (
+    <main className="max-w-7xl mx-auto mt-8">
+      <article className="max-w-4xl mx-auto bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8 shadow-sm">
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is a B-Tree?
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed space-y-4">
+            <p>
+              A **B-Tree** is a self-balancing search tree data structure that maintains sorted data and allows searches, sequential access, insertions, and deletions in logarithmic time. 
+            </p>
+            <p>
+              Unlike standard binary search trees, a B-Tree is optimized for systems that read and write large blocks of data. It is widely used in **databases** and **file systems** (such as MySQL, PostgreSQL, and NTFS) because it minimizes expensive disk access operations by grouping multiple keys inside a single broad node.
+            </p>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            B-Tree Properties (of Order M)
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500">
+              <li><strong>Node capacity:</strong> Every node contains at most $M-1$ keys.</li>
+              <li><strong>Child limits:</strong> Every internal node (except root) has at least $\lceil M/2 \rceil$ children.</li>
+              <li><strong>Root condition:</strong> The root has at least 2 children if it is not a leaf node.</li>
+              <li><strong>Leaf leveling:</strong> All leaf nodes appear on the exact same level, ensuring uniform path depths.</li>
+              <li><strong>Keys and splits:</strong> An internal node with $k$ children contains exactly $k-1$ keys.</li>
+            </ul>
+          </div>
+        </section>
+
+        <section className="p-6">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Complexity and Performance
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <ul className="space-y-2 font-mono text-sm bg-gray-50 dark:bg-[#1b1b1b] p-4 rounded-xl border border-gray-200 dark:border-gray-800">
+              <li>Search Complexity: O(log N)</li>
+              <li>Insertion Complexity: O(log N)</li>
+              <li>Deletion Complexity: O(log N)</li>
+              <li>Disk Access Cost: O(log_M N) - Extremely low!</li>
+            </ul>
+            <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => Math.log(n) / Math.log(5)}
+                averageCase={(n) => Math.log(n) / Math.log(4)}
+                worstCase={(n) => Math.log(n) / Math.log(2)}
+                maxN={50}
+              />
+            </div>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default BTreeContent;
diff --git a/src/app/visualizer/tree/advanced/b-trees/quiz.jsx b/src/app/visualizer/tree/advanced/b-trees/quiz.jsx
new file mode 100644
index 000000000..6be6163ca
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/b-trees/quiz.jsx
@@ -0,0 +1,34 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const BTreeQuiz = () => {
+  const questions = [
+    {
+      question: "Why are B-Trees preferred over Binary Search Trees for disk-based databases?",
+      options: [
+        "B-Trees use less memory.",
+        "B-Trees have broader, shallower nodes, significantly reducing disk read operations.",
+        "B-Trees are simpler to write and debug.",
+        "B-Trees support more floating-point operations."
+      ],
+      correctAnswer: 1,
+      explanation: "By grouping multiple keys in a single broad node, B-Trees reduce the tree height and the number of disk seek calls."
+    },
+    {
+      question: "In a B-Tree of order M, what is the maximum number of children any internal node can have?",
+      options: [
+        "M - 1 children",
+        "M children",
+        "2M children",
+        "Unlimited children"
+      ],
+      correctAnswer: 1,
+      explanation: "A B-Tree of order M allows any node to have up to M children."
+    }
+  ];
+
+  return <QuizEngine title="B-Tree Concepts Quiz" questions={questions} />;
+};
+
+export default BTreeQuiz;
diff --git a/src/app/visualizer/tree/advanced/dsu/AlgorithmClient.jsx b/src/app/visualizer/tree/advanced/dsu/AlgorithmClient.jsx
new file mode 100644
index 000000000..9d4caf7ac
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/dsu/AlgorithmClient.jsx
@@ -0,0 +1,44 @@
+import DsuAnimation from "@/app/visualizer/tree/advanced/dsu/animation";
+import DsuContent from "@/app/visualizer/tree/advanced/dsu/content";
+import DsuCode from "@/app/visualizer/tree/advanced/dsu/codeBlock";
+import DsuQuiz from "@/app/visualizer/tree/advanced/dsu/quiz";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+
+
+export default function DsuPage() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Advanced Trees", "Disjoint Set Union (DSU)")}
+      title="Disjoint Set Union (DSU / Union-Find)"
+      animation={<DsuAnimation />}
+      content={<DsuContent />}
+      code={<DsuCode />}
+      quiz={<DsuQuiz />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.dsu}
+          description="Mark Disjoint Set Union (DSU) as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other Advanced Trees"
+          links={[
+            { text: "Red-Black Trees", url: "./red-black" },
+            { text: "B-Trees", url: "./b-trees" },
+            { text: "Trie (Prefix Tree)", url: "./trie" },
+            { text: "Segment Trees", url: "./segment" },
+            { text: "Fenwick Trees", url: "./fenwick" }
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/advanced/dsu/animation.jsx b/src/app/visualizer/tree/advanced/dsu/animation.jsx
new file mode 100644
index 000000000..9e03d63c0
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/dsu/animation.jsx
@@ -0,0 +1,746 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import {
+  Play,
+  Pause,
+  RotateCcw,
+  SkipForward,
+  Plus,
+  Compass,
+  Link2,
+  HelpCircle,
+  TrendingUp,
+  GitBranch,
+  Layers,
+  Settings
+} from "lucide-react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import usePlayback from "@/app/hooks/usePlayback";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { findGenerator, unionGenerator } from "@/features/algorithms/tree/dsuLogic";
+
+export default function DsuAnimation() {
+  const [numElements, setNumElements] = useState(8);
+  const [parentArray, setParentArray] = useState([]);
+  const [rankArray, setRankArray] = useState([]);
+  const [sizeArray, setSizeArray] = useState([]);
+  
+  // Custom Controls State
+  const [findVal, setFindVal] = useState("");
+  const [unionValX, setUnionValX] = useState("");
+  const [unionValY, setUnionValY] = useState("");
+  
+  // Optimizations
+  const [pathCompression, setPathCompression] = useState(true);
+  const [unionByRank, setUnionByRank] = useState(true);
+  
+  // Visualizer Status & Steps
+  const [message, setMessage] = useState("Disjoint Set Union (Union-Find) Visualizer. Adjust toggles or enter an operation!");
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [steps, setSteps] = useState([]);
+  const [currentStepIdx, setCurrentStepIdx] = useState(-1);
+  const { speed, setSpeed } = usePlayback(1);
+
+  const timerRef = useRef(null);
+
+  // Initialize nodes
+  useEffect(() => {
+    resetDsu(numElements);
+  }, [numElements]);
+
+  const resetDsu = (size) => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    const initialParent = Array.from({ length: size }, (_, i) => i);
+    const initialRank = new Array(size).fill(0);
+    const initialSize = new Array(size).fill(1);
+    
+    setParentArray(initialParent);
+    setRankArray(initialRank);
+    setSizeArray(initialSize);
+    
+    setSteps([]);
+    setCurrentStepIdx(-1);
+    setIsAnimating(false);
+    setMessage(`DSU initialized with ${size} elements. Every node starts as its own representative root.`);
+  };
+
+  useVisualizerReset(() => {
+    resetDsu(numElements);
+  });
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  // Compute Tree Layout (Parent pointing up to root)
+  const computeTreeLayout = () => {
+    // 1. Build adjacency list of children
+    const childrenMap = {};
+    for (let i = 0; i < numElements; i++) {
+      childrenMap[i] = [];
+    }
+    
+    const roots = [];
+    for (let i = 0; i < numElements; i++) {
+      const p = parentArray[i];
+      if (p === i) {
+        roots.push(i);
+      } else {
+        if (!childrenMap[p]) {
+          childrenMap[p] = [];
+        }
+        childrenMap[p].push(i);
+      }
+    }
+    
+    // Sort roots for consistent rendering
+    roots.sort((a, b) => a - b);
+    
+    const nodesMap = {};
+    const edgesList = [];
+    
+    // Calculate widths recursively to avoid overlap
+    const subtreeWidths = {};
+    const getSubtreeWidth = (node) => {
+      const children = childrenMap[node] || [];
+      if (children.length === 0) {
+        subtreeWidths[node] = 70; // min width per leaf
+        return 70;
+      }
+      const sum = children.reduce((acc, c) => acc + getSubtreeWidth(c), 0);
+      subtreeWidths[node] = Math.max(70, sum);
+      return subtreeWidths[node];
+    };
+    
+    roots.forEach(r => getSubtreeWidth(r));
+    
+    // Layout DFS
+    let currentXOffset = 40;
+    const layoutDFS = (node, level = 0, startX = 0) => {
+      const width = subtreeWidths[node];
+      const children = childrenMap[node] || [];
+      
+      const y = 80 + level * 80;
+      let x = startX + width / 2;
+      
+      if (children.length > 0) {
+        let childOffset = startX;
+        children.forEach(c => {
+          layoutDFS(c, level + 1, childOffset);
+          childOffset += subtreeWidths[c];
+        });
+        
+        // Center parent node exactly above its children
+        const firstChildX = nodesMap[children[0]].x;
+        const lastChildX = nodesMap[children[children.length - 1]].x;
+        x = (firstChildX + lastChildX) / 2;
+      }
+      
+      nodesMap[node] = { id: node, x, y };
+    };
+    
+    roots.forEach(r => {
+      layoutDFS(r, 0, currentXOffset);
+      currentXOffset += subtreeWidths[r] + 30; // buffer between trees
+    });
+    
+    // Generate Edges: pointer points upwards from child to parent
+    for (let i = 0; i < numElements; i++) {
+      const p = parentArray[i];
+      if (p !== i && nodesMap[i] && nodesMap[p]) {
+        edgesList.push({
+          from: i,
+          to: p,
+          x1: nodesMap[i].x,
+          y1: nodesMap[i].y - 18,
+          x2: nodesMap[p].x,
+          y2: nodesMap[p].y + 18,
+        });
+      }
+    }
+    
+    const nodesList = Object.keys(nodesMap).map(k => ({
+      id: Number(k),
+      x: nodesMap[k].x,
+      y: nodesMap[k].y,
+      parent: parentArray[Number(k)],
+      rank: rankArray[Number(k)],
+      size: sizeArray[Number(k)]
+    }));
+    
+    return { nodesList, edgesList, totalWidth: Math.max(800, currentXOffset + 20) };
+  };
+
+  const { nodesList: layoutNodes, edgesList: layoutEdges, totalWidth: canvasWidth } = computeTreeLayout();
+
+  // Playback Step loop
+  useEffect(() => {
+    if (!isAnimating || steps.length === 0) return;
+
+    if (currentStepIdx >= steps.length) {
+      setIsAnimating(false);
+      return;
+    }
+
+    const currentStep = steps[currentStepIdx];
+    setMessage(currentStep.explanation);
+    
+    if (currentStep.parent) setParentArray(currentStep.parent);
+    if (currentStep.rank) setRankArray(currentStep.rank);
+    if (currentStep.size) setSizeArray(currentStep.size);
+
+    timerRef.current = setTimeout(() => {
+      if (currentStepIdx < steps.length - 1) {
+        setCurrentStepIdx(prev => prev + 1);
+      } else {
+        setIsAnimating(false);
+      }
+    }, 1800 / speed);
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [isAnimating, currentStepIdx, steps, speed]);
+
+  const startVisualizer = () => {
+    if (steps.length === 0) return;
+    setIsAnimating(true);
+    let nextIdx = currentStepIdx === -1 || currentStepIdx >= steps.length - 1 ? 0 : currentStepIdx + 1;
+    setCurrentStepIdx(nextIdx);
+  };
+
+  const pauseVisualizer = () => {
+    setIsAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+  };
+
+  const stepForward = () => {
+    setIsAnimating(false);
+    if (currentStepIdx < steps.length - 1) {
+      const nextIdx = currentStepIdx + 1;
+      setCurrentStepIdx(nextIdx);
+      const step = steps[nextIdx];
+      setMessage(step.explanation);
+      if (step.parent) setParentArray(step.parent);
+      if (step.rank) setRankArray(step.rank);
+      if (step.size) setSizeArray(step.size);
+    }
+  };
+
+  const stepBackward = () => {
+    setIsAnimating(false);
+    if (currentStepIdx > 0) {
+      const prevIdx = currentStepIdx - 1;
+      setCurrentStepIdx(prevIdx);
+      const step = steps[prevIdx];
+      setMessage(step.explanation);
+      if (step.parent) setParentArray(step.parent);
+      if (step.rank) setRankArray(step.rank);
+      if (step.size) setSizeArray(step.size);
+    }
+  };
+
+  const resetPlayback = () => {
+    setIsAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setCurrentStepIdx(-1);
+    if (steps.length > 0 && steps[0].parentBefore) {
+      setParentArray(steps[0].parentBefore);
+      setRankArray(steps[0].rankBefore);
+      setSizeArray(steps[0].sizeBefore);
+    }
+    setMessage("Playback reset. Click play to watch step-by-step.");
+  };
+
+  // Find Animation Generator
+  const runFindAnimation = (targetId) => {
+    if (targetId < 0 || targetId >= numElements) {
+      setMessage(`⚠️ Node ${targetId} is out of bounds. Element must be 0 to ${numElements - 1}.`);
+      return;
+    }
+
+    pauseVisualizer();
+    
+    const gen = findGenerator(targetId, numElements, parentArray, rankArray, sizeArray, pathCompression);
+    const newSteps = Array.from(gen);
+
+    setSteps(newSteps);
+    setCurrentStepIdx(0);
+    setIsAnimating(true);
+  };
+
+  // Union Animation Generator
+  const runUnionAnimation = (x, y) => {
+    if (x < 0 || x >= numElements || y < 0 || y >= numElements) {
+      setMessage("⚠️ Out of bounds. Elements must be between 0 and " + (numElements - 1));
+      return;
+    }
+
+    pauseVisualizer();
+    
+    const gen = unionGenerator(x, y, numElements, parentArray, rankArray, sizeArray, unionByRank);
+    const newSteps = Array.from(gen);
+
+    setSteps(newSteps);
+    setCurrentStepIdx(0);
+    setIsAnimating(true);
+  };
+
+  const handleMakeSet = () => {
+    resetDsu(numElements);
+  };
+
+  const currentStep = steps[currentStepIdx] || null;
+
+  return (
+    <VisualizerInteractiveLayout>
+      {/* 1. Deck Controls */}
+      <VisualizerCard>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-start">
+          
+          {/* Operations panel */}
+          <div className="space-y-4">
+            <h3 className="text-sm font-semibold flex items-center gap-1.5 text-gray-700 dark:text-gray-300">
+              <Settings className="w-4.5 h-4.5 text-[#a435f0]" /> Operations
+            </h3>
+            
+            {/* Initializer */}
+            <div className="flex gap-2">
+              <div className="flex-1 flex flex-col">
+                <label className="text-[10px] text-gray-500 mb-1">Set Size N (2-12)</label>
+                <input
+                  type="number"
+                  min="2"
+                  max="12"
+                  value={numElements}
+                  onChange={(e) => setNumElements(Math.min(12, Math.max(2, parseInt(e.target.value) || 2)))}
+                  className="rounded-lg border p-2 text-sm dark:bg-gray-700 w-full"
+                  disabled={isAnimating}
+                />
+              </div>
+              <button
+                onClick={handleMakeSet}
+                disabled={isAnimating}
+                className="flex items-end justify-center rounded-lg bg-[#a435f0] text-white px-4 py-2 hover:bg-[#8f2cd6] transition-colors font-medium text-sm h-[40px] mt-auto"
+              >
+                MakeSet(N)
+              </button>
+            </div>
+
+            {/* Find input */}
+            <div className="flex gap-2">
+              <input
+                type="number"
+                min="0"
+                max={numElements - 1}
+                value={findVal}
+                onChange={(e) => setFindVal(e.target.value)}
+                placeholder={`Node (0-${numElements - 1})`}
+                className="flex-1 rounded-lg border p-2 text-sm dark:bg-gray-700"
+                disabled={isAnimating}
+              />
+              <button
+                onClick={() => runFindAnimation(parseInt(findVal))}
+                disabled={isAnimating || findVal === ""}
+                className="flex items-center gap-1 border border-[#a435f0] text-[#a435f0] hover:bg-[#a435f0] hover:text-white px-4 py-2 rounded-lg transition-colors font-medium text-sm"
+              >
+                <Compass className="w-4 h-4" /> Find
+              </button>
+            </div>
+
+            {/* Union input */}
+            <div className="flex gap-2">
+              <input
+                type="number"
+                min="0"
+                max={numElements - 1}
+                value={unionValX}
+                onChange={(e) => setUnionValX(e.target.value)}
+                placeholder="Node X"
+                className="flex-1 rounded-lg border p-2 text-sm dark:bg-gray-700"
+                disabled={isAnimating}
+              />
+              <input
+                type="number"
+                min="0"
+                max={numElements - 1}
+                value={unionValY}
+                onChange={(e) => setUnionValY(e.target.value)}
+                placeholder="Node Y"
+                className="flex-1 rounded-lg border p-2 text-sm dark:bg-gray-700"
+                disabled={isAnimating}
+              />
+              <button
+                onClick={() => runUnionAnimation(parseInt(unionValX), parseInt(unionValY))}
+                disabled={isAnimating || unionValX === "" || unionValY === ""}
+                className="flex items-center gap-1 bg-[#a435f0] text-white px-4 py-2 rounded-lg hover:bg-[#8f2cd6] transition-colors font-medium text-sm"
+              >
+                <Link2 className="w-4 h-4" /> Union
+              </button>
+            </div>
+          </div>
+
+          {/* Optimizations toggles */}
+          <div className="space-y-4">
+            <h3 className="text-sm font-semibold flex items-center gap-1.5 text-gray-700 dark:text-gray-300">
+              <TrendingUp className="w-4.5 h-4.5 text-[#a435f0]" /> Optimizations
+            </h3>
+            
+            {/* Path compression */}
+            <label className="flex items-center justify-between border dark:border-gray-800 rounded-xl p-3 bg-gray-50/50 dark:bg-gray-800/20 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/40 duration-300 transition-colors">
+              <div className="flex flex-col gap-0.5">
+                <span className="text-sm font-semibold">Path Compression</span>
+                <span className="text-[10px] text-gray-500">Flattens paths recursively on Find</span>
+              </div>
+              <input
+                type="checkbox"
+                checked={pathCompression}
+                onChange={(e) => setPathCompression(e.target.checked)}
+                className="w-4.5 h-4.5 accent-[#a435f0] cursor-pointer"
+                disabled={isAnimating}
+              />
+            </label>
+
+            {/* Union by rank */}
+            <label className="flex items-center justify-between border dark:border-gray-800 rounded-xl p-3 bg-gray-50/50 dark:bg-gray-800/20 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/40 duration-300 transition-colors">
+              <div className="flex flex-col gap-0.5">
+                <span className="text-sm font-semibold">Union by Rank</span>
+                <span className="text-[10px] text-gray-500">Attach shallow tree under deeper root</span>
+              </div>
+              <input
+                type="checkbox"
+                checked={unionByRank}
+                onChange={(e) => setUnionByRank(e.target.checked)}
+                className="w-4.5 h-4.5 accent-[#a435f0] cursor-pointer"
+                disabled={isAnimating}
+              />
+            </label>
+          </div>
+
+          {/* Quick presets / Info */}
+          <div className="space-y-4">
+            <h3 className="text-sm font-semibold flex items-center gap-1.5 text-gray-700 dark:text-gray-300">
+              <HelpCircle className="w-4.5 h-4.5 text-[#a435f0]" /> Quick Presets
+            </h3>
+            
+            <div className="grid grid-cols-2 gap-2 text-xs">
+              <button
+                onClick={() => {
+                  resetDsu(8);
+                  setPathCompression(true);
+                  setUnionByRank(true);
+                }}
+                disabled={isAnimating}
+                className="p-2 border.rounded-lg text-center bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg duration-200 transition-all font-medium"
+              >
+                Full Optimizations
+              </button>
+              <button
+                onClick={() => {
+                  resetDsu(8);
+                  setPathCompression(false);
+                  setUnionByRank(false);
+                }}
+                disabled={isAnimating}
+                className="p-2 border rounded-lg text-center bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg duration-200 transition-all font-medium"
+              >
+                No Optimizations
+              </button>
+            </div>
+            
+            <div className="bg-[#faf5ff] dark:bg-[#1a0a2e] p-3 rounded-lg border border-[#e9d5ff] dark:border-[#3b1a6e] text-[11px] text-purple-950 dark:text-purple-300 leading-normal">
+              💡 <strong>Pro-Tip:</strong> Try turning optimizations **OFF**, perform several union merges to build a straight chain node tree, and then turn **Path Compression** back **ON** and call `Find` on the leaf node to watch the entire path collapse and flatten live!
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-6">
+          <PlaybackControls
+            isPlaying={isAnimating}
+            onPlayPause={isAnimating ? pauseVisualizer : startVisualizer}
+            onStepForward={stepForward}
+            onStepBackward={stepBackward}
+            onReset={resetPlayback}
+            speed={speed}
+            onSpeedChange={setSpeed}
+            disabled={steps.length === 0}
+            showPlayPause={true}
+          />
+        </div>
+      </VisualizerCard>
+
+      {/* 2. Visual Explanation Card */}
+      <VisualizerCard
+        className={
+          message.includes("complete") || message.includes("merged") || message.includes("found")
+            ? "border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30"
+            : message.includes("out of bounds") || message.includes("⚠️")
+              ? "border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-950/30"
+              : isAnimating
+                ? "border-[#a435f0]/30 bg-[#a435f0]/10 dark:border-[#a435f0]/50 dark:bg-[#a435f0]/20"
+                : ""
+        }
+      >
+        <div className="flex justify-between items-center text-xs text-gray-500 mb-2">
+          <span>Current Steps Explanation</span>
+          <span className="font-bold bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
+            Step {currentStepIdx !== -1 ? currentStepIdx + 1 : 0} / {steps.length || 0}
+          </span>
+        </div>
+        <p className="text-center font-medium text-lg min-h-[28px]">{message}</p>
+      </VisualizerCard>
+
+      {/* 3. Graph Rendering Canvas */}
+      <VisualizerCard>
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-lg font-semibold flex items-center gap-1.5">
+            <GitBranch className="w-5 h-5 text-[#a435f0]" /> Tree Visuals
+          </h2>
+          
+          <div className="flex flex-wrap gap-2 text-[10px]">
+            <div className="flex items-center gap-1">
+              <span className="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
+              <span className="text-gray-500">Visiting</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <span className="w-2.5 h-2.5 rounded-full bg-blue-500"></span>
+              <span className="text-gray-500">Traversed</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <span className="w-2.5 h-2.5 rounded-full bg-[#a435f0]"></span>
+              <span className="text-gray-500">Root / Representative</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex justify-center overflow-x-auto py-6 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 min-h-[380px]">
+          <div className="relative">
+            <svg
+              width={canvasWidth}
+              height={360}
+              viewBox={`0 0 ${canvasWidth} 360`}
+              className="mx-auto"
+            >
+              {/* SVG Markers for custom arrows pointing upward to parent */}
+              <defs>
+                <marker
+                  id="arrow"
+                  viewBox="0 0 10 10"
+                  refX="6"
+                  refY="5"
+                  markerWidth="6"
+                  markerHeight="6"
+                  orient="auto-start-reverse"
+                >
+                  <path d="M 0 0 L 10 5 L 0 10 z" className="fill-slate-400 dark:fill-slate-400 fill-gray-400 dark:fill-gray-600" />
+                </marker>
+                <marker
+                  id="arrow-active"
+                  viewBox="0 0 10 10"
+                  refX="6"
+                  refY="5"
+                  markerWidth="8"
+                  markerHeight="8"
+                  orient="auto-start-reverse"
+                >
+                  <path d="M 0 0 L 10 5 L 0 10 z" className="fill-blue-500 dark:fill-blue-400" />
+                </marker>
+              </defs>
+
+              {/* Render edges */}
+              {layoutEdges.map((edge, idx) => {
+                const edgeKey = `${edge.from}->${edge.to}`;
+                const isActive = currentStep?.highlightedEdges?.[edgeKey] || false;
+                
+                return (
+                  <line
+                    key={`edge-${idx}`}
+                    x1={edge.x1}
+                    y1={edge.y1}
+                    x2={edge.x2}
+                    y2={edge.y2}
+                    stroke={isActive ? "#3b82f6" : "#cbd5e1"}
+                    strokeWidth={isActive ? "3" : "2"}
+                    className="transition-all duration-300 dark:stroke-gray-600"
+                    style={{
+                      stroke: isActive ? "#3b82f6" : undefined
+                    }}
+                    markerEnd={isActive ? "url(#arrow-active)" : "url(#arrow)"}
+                  />
+                );
+              })}
+
+              {/* Render nodes */}
+              {layoutNodes.map((node, idx) => {
+                const nodeState = currentStep?.highlightedNodes?.[node.id] || null;
+                const isCurr = nodeState === "visiting";
+                const isActivePath = nodeState === "active";
+                const isMatch = nodeState === "matched";
+                
+                let nodeClass = "fill-white stroke-gray-400 dark:fill-gray-800 dark:stroke-gray-600";
+                let textClass = "fill-gray-800 dark:fill-white";
+                let strokeWidth = "2";
+                
+                if (isCurr) {
+                  nodeClass = "fill-emerald-50 stroke-emerald-500 dark:fill-emerald-900/30 dark:stroke-emerald-400";
+                  textClass = "fill-emerald-700 dark:fill-emerald-300";
+                  strokeWidth = "3";
+                } else if (isActivePath) {
+                  nodeClass = "fill-blue-50 stroke-blue-500 dark:fill-blue-900/30 dark:stroke-blue-400";
+                  textClass = "fill-blue-700 dark:fill-blue-300";
+                  strokeWidth = "3";
+                } else if (isMatch) {
+                  nodeClass = "fill-[#a435f0]/10 stroke-[#a435f0] dark:fill-[#a435f0]/20 dark:stroke-[#d38cff]";
+                  textClass = "fill-[#a435f0] dark:fill-[#d38cff]";
+                  strokeWidth = "3";
+                }
+
+                // If this is a root, add a dashed ring indicating representative status
+                const isRoot = node.parent === node.id;
+
+                return (
+                  <g key={`node-${idx}`} className="transition-all duration-500">
+                    {/* Ring showing root representation status */}
+                    {isRoot && (
+                      <circle
+                        cx={node.x}
+                        cy={node.y}
+                        r="23"
+                        fill="none"
+                        className="stroke-[#a435f0]/40 dark:stroke-[#a435f0]/70"
+                        strokeWidth="1.5"
+                        strokeDasharray="4,4"
+                      />
+                    )}
+
+                    {/* Glowing outer active ring */}
+                    {(isCurr || isMatch || isActivePath) && (
+                      <circle
+                        cx={node.x}
+                        cy={node.y}
+                        r="26"
+                        fill="none"
+                        className={isCurr ? "stroke-emerald-400" : isMatch ? "stroke-[#a435f0]" : "stroke-blue-400"}
+                        strokeWidth="1.5"
+                        strokeDasharray="4,2"
+                      >
+                        <animateTransform
+                          attributeName="transform"
+                          type="rotate"
+                          from={`0 ${node.x} ${node.y}`}
+                          to={`360 ${node.x} ${node.y}`}
+                          dur="4s"
+                          repeatCount="indefinite"
+                        />
+                      </circle>
+                    )}
+
+                    <circle
+                      cx={node.x}
+                      cy={node.y}
+                      r="18"
+                      strokeWidth={strokeWidth}
+                      className={`shadow-sm transition-all duration-500 ${nodeClass}`}
+                    />
+                    
+                    <text
+                      x={node.x}
+                      y={node.y + 4.5}
+                      textAnchor="middle"
+                      fontSize="12"
+                      fontWeight="bold"
+                      className={`${textClass}`}
+                    >
+                      {node.id}
+                    </text>
+                  </g>
+                );
+              })}
+            </svg>
+          </div>
+        </div>
+      </VisualizerCard>
+
+      {/* 4. Array Representation Grid */}
+      <VisualizerCard>
+        <h2 className="text-lg font-semibold mb-4 flex items-center gap-1.5">
+          <Layers className="w-5 h-5 text-[#a435f0]" /> Array Synchronization
+        </h2>
+
+        <div className="overflow-x-auto">
+          <table className="w-full border-collapse border border-gray-200 dark:border-gray-800 text-sm text-center">
+            <thead>
+              <tr className="bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400">
+                <th className="border border-gray-200 dark:border-gray-800 p-2 font-semibold">Array</th>
+                {Array.from({ length: numElements }).map((_, i) => (
+                  <th key={i} className="border border-gray-200 dark:border-gray-800 p-2 font-semibold min-w-[50px]">{i}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {/* Parent array */}
+              <tr>
+                <td className="border border-gray-200 dark:border-gray-800 p-2 font-semibold bg-gray-50 dark:bg-gray-900/50">Parent</td>
+                {parentArray.map((p, i) => {
+                  const isHighlighted = currentStep?.arrayHighlight === i;
+                  return (
+                    <td
+                      key={i}
+                      className={`border border-gray-200 dark:border-gray-800 p-2 font-mono transition-colors duration-500 ${
+                        isHighlighted ? "bg-amber-100 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300 font-bold" : ""
+                      }`}
+                    >
+                      {p}
+                    </td>
+                  );
+                })}
+              </tr>
+              
+              {/* Rank array */}
+              {unionByRank && (
+                <tr>
+                  <td className="border border-gray-200 dark:border-gray-800 p-2 font-semibold bg-gray-50 dark:bg-gray-900/50">Rank</td>
+                  {rankArray.map((r, i) => {
+                    const isHighlighted = currentStep?.arrayHighlight === i && steps[currentStepIdx]?.explanation?.includes("Rank");
+                    return (
+                      <td
+                        key={i}
+                        className={`border border-gray-200 dark:border-gray-800 p-2 font-mono transition-colors duration-500 ${
+                          isHighlighted ? "bg-amber-100 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300 font-bold" : ""
+                        }`}
+                      >
+                        {r}
+                      </td>
+                    );
+                  })}
+                </tr>
+              )}
+
+              {/* Size array */}
+              {!unionByRank && (
+                <tr>
+                  <td className="border border-gray-200 dark:border-gray-800 p-2 font-semibold bg-gray-50 dark:bg-gray-900/50">Size</td>
+                  {sizeArray.map((s, i) => (
+                    <td
+                      key={i}
+                      className="border border-gray-200 dark:border-gray-800 p-2 font-mono"
+                    >
+                      {s}
+                    </td>
+                  ))}
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+}
diff --git a/src/app/visualizer/tree/advanced/dsu/codeBlock.jsx b/src/app/visualizer/tree/advanced/dsu/codeBlock.jsx
new file mode 100644
index 000000000..6b9b9a2b1
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/dsu/codeBlock.jsx
@@ -0,0 +1,217 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+const codeExamples = {
+  javascript: `// Disjoint Set Union (DSU / Union-Find) Implementation
+class DSU {
+    constructor(n) {
+        // Initialize parent pointing to itself and rank/size to default
+        this.parent = Array.from({ length: n }, (_, i) => i);
+        this.rank = new Array(n).fill(0);
+        this.size = new Array(n).fill(1);
+    }
+
+    // Find operation with Path Compression
+    find(i) {
+        if (this.parent[i] === i) {
+            return i;
+        }
+        // Path compression: recursively point parent directly to the root
+        this.parent[i] = this.find(this.parent[i]);
+        return this.parent[i];
+    }
+
+    // Union operation by Rank
+    unionByRank(i, j) {
+        const rootI = this.find(i);
+        const rootJ = this.find(j);
+
+        if (rootI === rootJ) {
+            return false; // Already in the same set
+        }
+
+        // Attach smaller rank tree under larger rank tree
+        if (this.rank[rootI] < this.rank[rootJ]) {
+            this.parent[rootI] = rootJ;
+            this.size[rootJ] += this.size[rootI];
+        } else if (this.rank[rootI] > this.rank[rootJ]) {
+            this.parent[rootJ] = rootI;
+            this.size[rootI] += this.size[rootJ];
+        } else {
+            this.parent[rootJ] = rootI;
+            this.size[rootI] += this.size[rootJ];
+            this.rank[rootI] += 1;
+        }
+        return true;
+    }
+}
+
+// Example usage:
+const dsu = new DSU(6);
+dsu.unionByRank(0, 1);
+dsu.unionByRank(2, 3);
+dsu.unionByRank(1, 2);
+console.log(dsu.find(0) === dsu.find(3)); // true`,
+
+  python: `# Disjoint Set Union (DSU / Union-Find) Implementation
+class DSU:
+    def __init__(self, n):
+        # Initialize parent pointing to itself and rank/size to default
+        self.parent = list(range(n))
+        self.rank = [0] * n
+        self.size = [1] * n
+
+    # Find operation with Path Compression
+    def find(self, i):
+        if self.parent[i] == i:
+            return i
+        # Path compression: recursively point parent directly to the root
+        self.parent[i] = self.find(self.parent[i])
+        return self.parent[i]
+
+    # Union operation by Rank
+    def union_by_rank(self, i, j):
+        root_i = self.find(i)
+        root_j = self.find(j)
+
+        if root_i == root_j:
+            return False  # Already in the same set
+
+        # Attach smaller rank tree under larger rank tree
+        if self.rank[root_i] < self.rank[root_j]:
+            self.parent[root_i] = root_j
+            self.size[root_j] += self.size[root_i]
+        elif self.rank[root_i] > self.rank[root_j]:
+            self.parent[root_j] = root_i
+            self.size[root_i] += self.size[root_j]
+        else:
+            self.parent[root_j] = root_i
+            self.size[root_i] += self.size[root_j]
+            self.rank[root_i] += 1
+        return True`,
+
+  java: `// Disjoint Set Union (DSU / Union-Find) Implementation
+public class DSU {
+    private int[] parent;
+    private int[] rank;
+    private int[] size;
+
+    public DSU(int n) {
+        parent = new int[n];
+        rank = new int[n];
+        size = new int[n];
+        // Initialize parent pointing to itself and rank/size to default
+        for (int i = 0; i < n; i++) {
+            parent[i] = i;
+            rank[i] = 0;
+            size[i] = 1;
+        }
+    }
+
+    // Find operation with Path Compression
+    public int find(int i) {
+        if (parent[i] == i) {
+            return i;
+        }
+        // Path compression: recursively point parent directly to the root
+        parent[i] = find(parent[i]);
+        return parent[i];
+    }
+
+    // Union operation by Rank
+    public boolean unionByRank(int i, int j) {
+        int rootI = find(i);
+        int rootJ = find(j);
+
+        if (rootI == rootJ) {
+            return false; // Already in the same set
+        }
+
+        // Attach smaller rank tree under larger rank tree
+        if (rank[rootI] < rank[rootJ]) {
+            parent[rootI] = rootJ;
+            size[rootJ] += size[rootI];
+        } else if (rank[rootI] > rank[rootJ]) {
+            parent[rootJ] = rootI;
+            size[rootI] += size[rootJ];
+        } else {
+            parent[rootJ] = rootI;
+            size[rootI] += size[rootJ];
+            rank[rootI] += 1;
+        }
+        return true;
+    }
+}`,
+
+  cpp: `// Disjoint Set Union (DSU / Union-Find) Implementation
+#include <vector>
+#include <numeric>
+
+using namespace std;
+
+class DSU {
+private:
+    vector<int> parent;
+    vector<int> rank;
+    vector<int> size;
+
+public:
+    DSU(int n) {
+        parent.resize(n);
+        iota(parent.begin(), parent.end(), 0); // parent[i] = i
+        rank.assign(n, 0);
+        size.assign(n, 1);
+    }
+
+    // Find operation with Path Compression
+    int find(int i) {
+        if (parent[i] == i) {
+            return i;
+        }
+        // Path compression: recursively point parent directly to the root
+        return parent[i] = find(parent[i]);
+    }
+
+    // Union operation by Rank
+    bool unionByRank(int i, int j) {
+        int rootI = find(i);
+        int rootJ = find(j);
+
+        if (rootI == rootJ) {
+            return false; // Already in the same set
+        }
+
+        // Attach smaller rank tree under larger rank tree
+        if (rank[rootI] < rank[rootJ]) {
+            parent[rootI] = rootJ;
+            size[rootJ] += size[rootI];
+        } else if (rank[rootI] > rank[rootJ]) {
+            parent[rootJ] = rootI;
+            size[rootI] += size[rootJ];
+        } else {
+            parent[rootJ] = rootI;
+            size[rootI] += size[rootJ];
+            rank[rootI] += 1;
+        }
+        return true;
+    }
+};`
+};
+
+const fileNames = {
+  javascript: 'dsu.js',
+  python: 'dsu.py',
+  java: 'DSU.java',
+  cpp: 'dsu.cpp'
+};
+
+const CodeBlock = () => (
+  <CodeBlockUI
+    variant="macos"
+    codeExamples={codeExamples}
+    fileNames={fileNames}
+  />
+);
+
+export default CodeBlock;
diff --git a/src/app/visualizer/tree/advanced/dsu/content.jsx b/src/app/visualizer/tree/advanced/dsu/content.jsx
new file mode 100644
index 000000000..b2c67569e
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/dsu/content.jsx
@@ -0,0 +1,162 @@
+"use client";
+import React from "react";
+import ComplexityGraph from "@/app/components/ui/graph";
+
+const DsuContent = () => {
+  const paragraphs = [
+    `Disjoint Set Union (DSU), also known as the Union-Find data structure, is an advanced tree-based data structure that tracks a set of elements partitioned into a number of disjoint (non-overlapping) subsets. It provides near-constant time operations to merge two sets and to determine if elements belong to the same set.`,
+    `DSU is incredibly powerful and serves as the core backbone of several graph algorithms, such as Kruskal's Minimum Spanning Tree (MST), network connectivity tracking, cycle detection in undirected graphs, and dynamic connectivity queries.`,
+    `At its core, DSU models each set as a tree. The root of the tree serves as the 'representative' or 'signature' of that entire set. Elements within the same set point upward towards their parent nodes, eventually terminating at the root.`,
+    `Without optimizations, operations can degrade to O(N) when trees grow into deep straight chains (similar to degenerate linked lists). However, two simple optimizations keep the trees extremely flat and balanced: Path Compression and Union by Rank.`
+  ];
+
+  const makeSetSteps = [
+    { points: "Create a parent array of size N." },
+    { points: "For each element i, set parent[i] = i, indicating that every element is initially in its own set of size 1." },
+    { points: "Initialize a rank or size array for every element, setting rank[i] = 0 or size[i] = 1." }
+  ];
+
+  const findSteps = [
+    { points: "Start at the target element X." },
+    { points: "Follow parent pointers upward (parent[x]) until reaching a node where parent[root] == root." },
+    { points: "If Path Compression is enabled: During the backtracking phase of recursion, set parent[x] = root for all nodes visited along the traversal path." },
+    { points: "Return the root node as the set representative." }
+  ];
+
+  const unionSteps = [
+    { points: "Find the root representatives of both target elements X and Y using the Find operation: rootX = Find(X) and rootY = Find(Y)." },
+    { points: "If rootX == rootY, the elements are already in the same set; terminate the operation." },
+    { points: "If Union by Rank is enabled: Compare rank[rootX] and rank[rootY]. Attach the root with smaller rank under the root with larger rank." },
+    { points: "If ranks are identical, attach one under the other arbitrarily, and increment the rank of the new root by 1." },
+    { points: "If optimizations are off: simply point parent[rootX] = rootY." }
+  ];
+
+  const complexity = [
+    { data: "Initialization (MakeSet) Time Complexity: O(N) - to set up parent arrays." },
+    { data: "Amortized Operation (Find/Union) Complexity: O(α(N)) - when combining both Path Compression and Union by Rank optimizations." },
+    { data: "Unoptimized Find/Union Complexity: O(N) - in worst-case degenerate chain conditions." },
+    { data: "Space Complexity: O(N) - to store parent and rank arrays." }
+  ];
+
+  return (
+    <main className="max-w-7xl mx-auto mt-8">
+      <article className="max-w-4xl mx-auto bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8 shadow-sm">
+        {/* What is DSU */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is Disjoint Set Union (Union-Find)?
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed space-y-4">
+            <p>{paragraphs[0]}</p>
+            <p>{paragraphs[1]}</p>
+          </div>
+        </section>
+
+        {/* Tree & Node Representation */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Underlying Representation
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed space-y-4">
+            <p>{paragraphs[2]}</p>
+            <p>{paragraphs[3]}</p>
+            <div className="bg-gray-50 dark:bg-[#1b1b1b] p-4 rounded-xl border border-gray-200 dark:border-gray-800 font-mono text-sm space-y-2">
+              <div>
+                <span className="text-purple-600 dark:text-purple-400">class</span> DSU {"{"}<br />
+                &nbsp;&nbsp;<span className="text-purple-600 dark:text-purple-400">vector&lt;int&gt;</span> parent;<br />
+                &nbsp;&nbsp;<span className="text-purple-600 dark:text-purple-400">vector&lt;int&gt;</span> rank;<br />
+                <span className="text-purple-600 dark:text-purple-400">public:</span><br />
+                &nbsp;&nbsp;DSU(<span className="text-primary dark:text-[#c27cf7]">int</span> n) {"{"}<br />
+                &nbsp;&nbsp;&nbsp;&nbsp;parent.resize(n);<br />
+                &nbsp;&nbsp;&nbsp;&nbsp;rank.assign(n, 0);<br />
+                &nbsp;&nbsp;&nbsp;&nbsp;<span className="text-primary dark:text-[#c27cf7]">for</span>(<span className="text-primary dark:text-[#c27cf7]">int</span> i=0; i&lt;n; ++i) parent[i] = i;<br />
+                &nbsp;&nbsp;{"}"}<br />
+                {"}"};
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Operations */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e] space-y-6">
+          <div>
+            <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+              <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+              1. MakeSet Algorithm
+            </h2>
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 text-[#374151] dark:text-[#d1d5db]">
+              {makeSetSteps.map((step, idx) => (
+                <li key={idx} className="pl-1">{step.points}</li>
+              ))}
+            </ol>
+          </div>
+
+          <div>
+            <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+              <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+              2. Find Representative Algorithm
+            </h2>
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 text-[#374151] dark:text-[#d1d5db]">
+              {findSteps.map((step, idx) => (
+                <li key={idx} className="pl-1">{step.points}</li>
+              ))}
+            </ol>
+          </div>
+
+          <div>
+            <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+              <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+              3. Union Merge Algorithm
+            </h2>
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 text-[#374151] dark:text-[#d1d5db]">
+              {unionSteps.map((step, idx) => (
+                <li key={idx} className="pl-1">{step.points}</li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Performance and Complexity
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {complexity.map((item, index) => (
+                <li key={index} className="pl-2">
+                  <span className="font-mono bg-[#f3f4f6] dark:bg-[#222] px-2 py-1 rounded-md text-sm font-semibold text-purple-700 dark:text-purple-300">
+                    {item.data.split(":")[0]}:
+                  </span>
+                  <span className="ml-2">{item.data.split(":")[1]}</span>
+                </li>
+              ))}
+            </ul>
+
+            <div className="mt-8">
+              <h3 className="text-lg font-bold mb-3">Time Complexity with Optimizations: α(N) vs log(N)</h3>
+              <ComplexityGraph
+                bestCase={(n) => 1}
+                averageCase={(n) => Math.log2(n) / 2}
+                worstCase={(n) => Math.log2(n)}
+                maxN={20}
+              />
+            </div>
+
+            <div className="mt-6 p-4 bg-[#faf5ff] dark:bg-[#1a0a2e] rounded-xl border border-[#e9d5ff] dark:border-[#3b1a6e]">
+              <h4 className="font-semibold text-purple-900 dark:text-purple-300 mb-1">Amortized Complexity O(α(N)):</h4>
+              <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+                The Inverse Ackermann function α(N) grows incredibly slowly. For all physical values of N in our universe (e.g. N = 2^(2^65536)), α(N) ≤ 4. Therefore, combining both Union by Rank and Path Compression gives the data structure a practically **constant amortized time complexity** of O(1) per operation.
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default DsuContent;
diff --git a/src/app/visualizer/tree/advanced/dsu/quiz.jsx b/src/app/visualizer/tree/advanced/dsu/quiz.jsx
new file mode 100644
index 000000000..c7df3e6d4
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/dsu/quiz.jsx
@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const DsuQuiz = () => {
+  const questions = [
+    {
+      question: "What is the worst-case time complexity of a single Find operation in a DSU containing N elements without any optimizations?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N log N)"
+      ],
+      correctAnswer: 2,
+      explanation: "Without Path Compression or Union by Rank, Union operations can link nodes into a single straight line, turning the disjoint set tree into a degenerate linked list where a Find requires O(N) operations."
+    },
+    {
+      question: "Which optimization ensures that a tree's height is kept as small as possible by always attaching the shallower tree under the root of the deeper tree?",
+      options: [
+        "Path Compression",
+        "Union by Rank / Size",
+        "Lazy Propagation",
+        "Amortized Balancing"
+      ],
+      correctAnswer: 1,
+      explanation: "Union by Rank (or Size) always hooks the root of the tree with smaller rank/size to the root of the tree with larger rank/size. This guarantees that the height of any tree never exceeds O(log N)."
+    },
+    {
+      question: "What is the primary role of the 'Path Compression' optimization during a Find operation?",
+      options: [
+        "It balances the tree during the Union step.",
+        "It updates parent pointers of all visited nodes along the traversal path to point directly to the root.",
+        "It removes all elements from the set that are not roots.",
+        "It performs a binary lookup on parent ranks."
+      ],
+      correctAnswer: 1,
+      explanation: "Path Compression is a recursive technique during the Find operation that flattens the tree. It modifies the parent pointer of every node visited on the way to the root to point directly to the root, optimizing future lookups to O(1)."
+    },
+    {
+      question: "When both Union by Rank and Path Compression are implemented, what is the amortized time complexity per operation in a sequence of M operations on N elements?",
+      options: [
+        "O(log N)",
+        "O(log* N) (Iterated logarithm)",
+        "O(α(N)) (Inverse Ackermann function)",
+        "O(1)"
+      ],
+      correctAnswer: 2,
+      explanation: "When both optimizations are combined, the amortized time complexity per operation is O(α(N)), where α is the Inverse Ackermann function. This function grows extremely slowly and is practically <= 4 for all realistic values of N, making it effectively near-constant."
+    },
+    {
+      question: "How is the Union-Find data structure initialized in terms of parent pointer configurations?",
+      options: [
+        "All elements have parent set to 0",
+        "All elements have parent pointing to their own index (parent[i] = i)",
+        "All elements point to a single global root node",
+        "Parent values are initialized to random numbers"
+      ],
+      correctAnswer: 1,
+      explanation: "During MakeSet initialization, every element is put in its own set. Since it is the only element, it is its own root. Thus, every element's parent pointer points to itself (parent[i] = i)."
+    }
+  ];
+
+  return <QuizEngine title="Disjoint Set Union (DSU) Quiz" questions={questions} />;
+};
+
+export default DsuQuiz;
diff --git a/src/app/visualizer/tree/advanced/fenwick/AlgorithmClient.jsx b/src/app/visualizer/tree/advanced/fenwick/AlgorithmClient.jsx
new file mode 100644
index 000000000..b69935c84
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/fenwick/AlgorithmClient.jsx
@@ -0,0 +1,43 @@
+import FenwickAnimation from "@/app/visualizer/tree/advanced/fenwick/animation";
+import FenwickContent from "@/app/visualizer/tree/advanced/fenwick/content";
+import FenwickCode from "@/app/visualizer/tree/advanced/fenwick/codeBlock";
+import FenwickQuiz from "@/app/visualizer/tree/advanced/fenwick/quiz";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+
+
+export default function FenwickTreePage() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Advanced Trees", "Fenwick Trees")}
+      title="Fenwick Trees"
+      animation={<FenwickAnimation />}
+      content={<FenwickContent />}
+      code={<FenwickCode />}
+      quiz={<FenwickQuiz />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.fenwickTree}
+          description="Mark Fenwick Tree as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other Advanced Trees"
+          links={[
+            { text: "Red-Black Trees", url: "./red-black" },
+            { text: "B-Trees", url: "./b-trees" },
+            { text: "Trie (Prefix Tree)", url: "./trie" },
+            { text: "Segment Trees", url: "./segment" }
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/advanced/fenwick/animation.jsx b/src/app/visualizer/tree/advanced/fenwick/animation.jsx
new file mode 100644
index 000000000..a433b486e
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/fenwick/animation.jsx
@@ -0,0 +1,430 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import {
+  RefreshCw
+} from "lucide-react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import usePlayback from "@/app/hooks/usePlayback";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { buildBIT, updateGenerator, queryGenerator } from "@/features/algorithms/tree/fenwickTreeLogic";
+
+const DEFAULT_ARRAY = [0, 5, 3, 7, 2, 6, 4, 8, 1]; // 1-indexed, index 0 unused
+
+export default function FenwickAnimation() {
+  const [baseArray, setBaseArray] = useState([...DEFAULT_ARRAY]);
+  const [bit, setBit] = useState(() => buildBIT(DEFAULT_ARRAY));
+  const [inputIndex, setInputIndex] = useState("");
+  const [inputValue, setInputValue] = useState("");
+  const [queryL, setQueryL] = useState("");
+  const [queryR, setQueryR] = useState("");
+  const [mode, setMode] = useState("update"); // "update" | "query"
+  const [steps, setSteps] = useState([]);
+  const [currentStepIdx, setCurrentStepIdx] = useState(-1);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const { speed, setSpeed } = usePlayback(1);
+  const [message, setMessage] = useState("Enter an index & value to perform a point update, or query a range prefix sum.");
+  const [highlightedBIT, setHighlightedBIT] = useState({}); // {index: state}
+  const [highlightedBase, setHighlightedBase] = useState({});
+  const [resultBox, setResultBox] = useState(null);
+
+  const timerRef = useRef(null);
+  useVisualizerReset(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setBaseArray([...DEFAULT_ARRAY]);
+    setBit(buildBIT(DEFAULT_ARRAY));
+    setInputIndex("");
+    setInputValue("");
+    setQueryL("");
+    setQueryR("");
+    setMode("update");
+    setSteps([]);
+    setCurrentStepIdx(-1);
+    setIsAnimating(false);
+    setMessage("...");
+    setHighlightedBIT({});
+    setHighlightedBase({});
+    setResultBox(null);
+  });
+  const n = baseArray.length - 1;
+
+
+  // Apply current step's highlight state
+  useEffect(() => {
+    if (currentStepIdx < 0 || currentStepIdx >= steps.length) return;
+    const step = steps[currentStepIdx];
+    setHighlightedBIT(step.highlightedBIT || {});
+    setHighlightedBase(step.highlightedBase || {});
+    setMessage(step.explanation || "");
+    if (step.result !== undefined) setResultBox(step.result);
+  }, [currentStepIdx, steps]);
+
+  // Animation loop
+  useEffect(() => {
+    if (!isAnimating || steps.length === 0) return;
+    if (currentStepIdx >= steps.length - 1) {
+      setIsAnimating(false);
+      return;
+    }
+    timerRef.current = setTimeout(() => {
+      setCurrentStepIdx(prev => prev + 1);
+    }, 1600 / speed);
+    return () => { if (timerRef.current) clearTimeout(timerRef.current); };
+  }, [isAnimating, currentStepIdx, steps, speed]);
+
+  const pauseVisualizer = () => { setIsAnimating(false); if (timerRef.current) clearTimeout(timerRef.current); };
+  const startVisualizer = () => {
+    if (steps.length === 0) return;
+    setIsAnimating(true);
+    const nextIdx = currentStepIdx === -1 || currentStepIdx >= steps.length - 1 ? 0 : currentStepIdx + 1;
+    setCurrentStepIdx(nextIdx);
+  };
+  const stepForward = () => { setIsAnimating(false); if (currentStepIdx < steps.length - 1) setCurrentStepIdx(p => p + 1); };
+  const stepBackward = () => { setIsAnimating(false); if (currentStepIdx > 0) setCurrentStepIdx(p => p - 1); };
+  const resetPlayback = () => {
+    setIsAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setCurrentStepIdx(-1);
+    setHighlightedBIT({});
+    setHighlightedBase({});
+    setResultBox(null);
+    setMessage("Playback reset. Click play to begin.");
+  };
+
+  const handleReset = () => {
+    setIsAnimating(false);
+    setBaseArray([...DEFAULT_ARRAY]);
+    setBit(buildBIT(DEFAULT_ARRAY));
+    setSteps([]);
+    setCurrentStepIdx(-1);
+    setHighlightedBIT({});
+    setHighlightedBase({});
+    setResultBox(null);
+    setInputIndex(""); setInputValue(""); setQueryL(""); setQueryR("");
+    setMessage("Tree reset to default. Enter values to start a new operation.");
+  };
+
+  // === POINT UPDATE ===
+  const triggerUpdate = () => {
+    const idx = parseInt(inputIndex);
+    const delta = parseInt(inputValue);
+    
+    setIsAnimating(false);
+    setResultBox(null);
+
+    const gen = updateGenerator(idx, delta, baseArray, bit, n);
+    const newSteps = [];
+    
+    for (const step of gen) {
+      if (step.type === 'error') {
+        setMessage(step.message);
+        return;
+      }
+      newSteps.push(step);
+      if (step.type === 'complete') {
+        setBaseArray(step.newBase);
+        setBit(step.newBit);
+      }
+    }
+
+    setInputIndex(""); setInputValue("");
+    setSteps(newSteps);
+    setCurrentStepIdx(0);
+    setIsAnimating(true);
+  };
+
+  // === PREFIX SUM QUERY ===
+  const triggerQuery = () => {
+    const l = parseInt(queryL);
+    const r = parseInt(queryR);
+    
+    setIsAnimating(false);
+    setResultBox(null);
+
+    const gen = queryGenerator(l, r, bit, n);
+    const newSteps = [];
+    
+    for (const step of gen) {
+      if (step.type === 'error') {
+        setMessage(step.message);
+        return;
+      }
+      newSteps.push(step);
+    }
+
+    setQueryL(""); setQueryR("");
+    setSteps(newSteps);
+    setCurrentStepIdx(0);
+    setIsAnimating(true);
+  };
+
+  useVisualizerKeyboard({
+    onStepForward: stepForward,
+    onStepBackward: stepBackward,
+    onTogglePlay: isAnimating ? pauseVisualizer : startVisualizer,
+    onReset: resetPlayback,
+    onSpeedChange: setSpeed,
+    speed: speed,
+    sorting: isAnimating,
+    sorted: false,
+    enabled: true,
+  });
+
+  // Color helpers
+  const getBITColor = (i) => {
+    const state = highlightedBIT[i];
+    if (state === "active") return { fill: "#10b981", stroke: "#34d399", text: "#fff" };
+    if (state === "visiting") return { fill: "#a435f0", stroke: "#d38cff", text: "#fff" };
+    if (state === "matched") return { fill: "#f59e0b", stroke: "#fbbf24", text: "#1a1a1a" };
+    return { fill: "var(--background)", stroke: "#64748b", text: "var(--foreground)" };
+  };
+
+  const getBaseColor = (i) => {
+    const state = highlightedBase[i];
+    if (state === "active") return "border-emerald-500 bg-emerald-50 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400";
+    if (state === "visiting") return "border-[#a435f0] bg-[#a435f0]/10 text-[#a435f0] dark:text-[#d38cff]";
+    if (state === "matched") return "border-amber-500 bg-amber-50 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400";
+    return "border-gray-300 bg-white text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300";
+  };
+
+  const cellW = 72;
+  const svgPaddingX = 30;
+  const svgWidth = n * cellW + svgPaddingX * 2 + 20;
+
+  return (
+    <VisualizerInteractiveLayout>
+      <VisualizerCard>
+        <div className="flex gap-2 mb-4 bg-gray-100 p-1 rounded-xl w-fit dark:bg-gray-800">
+          <button
+            onClick={() => { setMode("update"); resetPlayback(); }}
+            className={`px-4 py-1.5 text-xs font-bold rounded-lg transition-all ${mode === "update" ? "bg-[#a435f0] text-white shadow-md" : "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"}`}
+          >
+            Point Update
+          </button>
+          <button
+            onClick={() => { setMode("query"); resetPlayback(); }}
+            className={`px-4 py-1.5 text-xs font-bold rounded-lg transition-all ${mode === "query" ? "bg-[#a435f0] text-white shadow-md" : "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"}`}
+          >
+            Range Query
+          </button>
+        </div>
+
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div className="flex flex-col sm:flex-row gap-2">
+            {mode === "update" ? (
+              <>
+                <input
+                  type="number"
+                  value={inputIndex}
+                  onChange={(e) => setInputIndex(e.target.value)}
+                  placeholder={`Index (1-${n})`}
+                  className="flex-1 rounded-lg border p-2 transition-all focus:border-transparent focus:ring-2 focus:ring-[#a435f0] dark:bg-gray-700"
+                  disabled={isAnimating}
+                />
+                <input
+                  type="number"
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                  placeholder="Delta (e.g. +3)"
+                  className="flex-1 rounded-lg border p-2 transition-all focus:border-transparent focus:ring-2 focus:ring-[#a435f0] dark:bg-gray-700"
+                  disabled={isAnimating}
+                  onKeyDown={(e) => e.key === "Enter" && triggerUpdate()}
+                />
+                <button
+                  onClick={triggerUpdate}
+                  disabled={isAnimating}
+                  className="rounded-lg bg-[#a435f0] px-4 py-2 text-white transition-colors hover:bg-[#8f2cd6] disabled:opacity-50"
+                >
+                  Update
+                </button>
+              </>
+            ) : (
+              <>
+                <input
+                  type="number"
+                  value={queryL}
+                  onChange={(e) => setQueryL(e.target.value)}
+                  placeholder={`L (1-${n})`}
+                  className="flex-1 rounded-lg border p-2 transition-all focus:border-transparent focus:ring-2 focus:ring-[#a435f0] dark:bg-gray-700"
+                  disabled={isAnimating}
+                />
+                <input
+                  type="number"
+                  value={queryR}
+                  onChange={(e) => setQueryR(e.target.value)}
+                  placeholder={`R (1-${n})`}
+                  className="flex-1 rounded-lg border p-2 transition-all focus:border-transparent focus:ring-2 focus:ring-[#a435f0] dark:bg-gray-700"
+                  disabled={isAnimating}
+                  onKeyDown={(e) => e.key === "Enter" && triggerQuery()}
+                />
+                <button
+                  onClick={triggerQuery}
+                  disabled={isAnimating}
+                  className="rounded-lg bg-[#a435f0] px-4 py-2 text-white transition-colors hover:bg-[#8f2cd6] disabled:opacity-50"
+                >
+                  Query Sum
+                </button>
+              </>
+            )}
+          </div>
+
+          <div className="flex justify-end gap-2 items-start">
+            <button onClick={handleReset} className="flex items-center gap-1.5 rounded-lg border border-red-500 text-red-500 px-4 py-2 transition-colors hover:bg-red-500 hover:text-white h-[42px]">
+              <RefreshCw className="w-4 h-4" /> Reset
+            </button>
+          </div>
+        </div>
+
+        <div className="mt-6">
+          <PlaybackControls 
+            isPlaying={isAnimating}
+            onPlayPause={isAnimating ? pauseVisualizer : startVisualizer}
+            onStepForward={stepForward}
+            onStepBackward={stepBackward}
+            onReset={resetPlayback}
+            speed={speed}
+            onSpeedChange={setSpeed}
+            disabled={steps.length === 0}
+            showPlayPause={true}
+          />
+        </div>
+      </VisualizerCard>
+
+      <VisualizerCard
+        className={
+          message.includes("complete") || message.includes("✅")
+            ? "border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30"
+            : message.includes("⚠️") || message.includes("error")
+              ? "border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-950/30"
+              : isAnimating
+                ? "border-[#a435f0]/30 bg-[#a435f0]/10 dark:border-[#a435f0]/50 dark:bg-[#a435f0]/20"
+                : ""
+        }
+      >
+        <div className="flex justify-between items-center text-xs text-gray-500 mb-2">
+          <span>Step Explanation</span>
+          <span className="font-bold bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
+            Step {currentStepIdx !== -1 ? currentStepIdx + 1 : 0} / {steps.length || 0}
+          </span>
+        </div>
+        <div className="flex items-center gap-3">
+          <p className="font-medium text-lg min-h-[28px]">{message}</p>
+          {resultBox && (
+            <span className="ml-auto shrink-0 bg-emerald-100 border border-emerald-200 text-emerald-700 px-3 py-1 rounded-xl text-sm font-bold dark:bg-emerald-900/40 dark:border-emerald-800 dark:text-emerald-400">
+              {resultBox}
+            </span>
+          )}
+        </div>
+      </VisualizerCard>
+
+      <VisualizerCard>
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-lg font-semibold">Fenwick Tree (BIT) Visualization</h2>
+          <div className="flex flex-wrap gap-2 text-xs">
+            {[
+              { color: "bg-[#a435f0]", label: "Visiting" },
+              { color: "bg-emerald-500", label: "Processing" },
+              { color: "bg-amber-500", label: "Matched" },
+            ].map(({ color, label }) => (
+              <div key={label} className="flex items-center gap-1.5 px-2 py-1 rounded-lg">
+                <span className={`w-2.5 h-2.5 rounded-full ${color}`} />
+                <span className="text-gray-500 dark:text-gray-400">{label}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-8 overflow-auto items-center py-6 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 min-h-[420px] relative">
+          
+          {/* Source Array Display */}
+          <div className="flex flex-col items-center gap-2">
+            <span className="text-xs font-bold text-gray-400 uppercase tracking-widest">Source Array (1-indexed)</span>
+            <div className="flex gap-1.5">
+              {baseArray.slice(1).map((val, i) => {
+                const idx = i + 1;
+                return (
+                  <div key={idx} className="flex flex-col items-center gap-0.5">
+                    <div className={`w-14 h-10 flex items-center justify-center border-2 rounded-xl text-sm font-bold transition-all duration-300 ${getBaseColor(idx)}`}>
+                      {val}
+                    </div>
+                    <span className="text-[10px] text-gray-500 font-mono">[{idx}]</span>
+                    <span className="text-[9px] text-gray-400 font-mono">{idx.toString(2).padStart(4, '0')}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* BIT Array Display as bars + labeled cells */}
+          <div className="flex flex-col items-center gap-2">
+            <span className="text-xs font-bold text-gray-400 uppercase tracking-widest">BIT Array — Implicit Fenwick Structure</span>
+            <div className="overflow-auto">
+              <svg width={svgWidth} height={220} viewBox={`0 0 ${svgWidth} 220`} className="max-w-full h-auto">
+                {bit.slice(1).map((val, i) => {
+                  const idx = i + 1;
+                  const lsb = idx & -idx;
+                  const barMaxH = 100;
+                  const barH = Math.max(12, Math.min(barMaxH, (val / Math.max(...bit.slice(1))) * barMaxH));
+                  const x = svgPaddingX + i * cellW;
+                  const y = 130 - barH;
+                  const colors = getBITColor(idx);
+
+                  let fillStyle = colors.fill;
+                  if (fillStyle === "var(--background)") {
+                    fillStyle = "currentColor";
+                  }
+
+                  return (
+                    <g key={idx}>
+                      {/* Bar */}
+                      <rect
+                        x={x + 8}
+                        y={y}
+                        width={cellW - 16}
+                        height={barH}
+                        rx="4"
+                        fill={fillStyle}
+                        stroke={colors.stroke}
+                        strokeWidth="1.5"
+                        className={`transition-all duration-300 ${colors.fill === 'var(--background)' ? 'fill-white dark:fill-gray-900' : ''}`}
+                      />
+                      {/* Value inside bar */}
+                      <text 
+                        x={x + cellW / 2} y={y + barH / 2 + 4} 
+                        textAnchor="middle" 
+                        fill={colors.text} 
+                        fontSize="11" 
+                        fontWeight="bold"
+                        className={colors.text === 'var(--foreground)' ? 'fill-gray-900 dark:fill-gray-100' : ''}
+                      >
+                        {val}
+                      </text>
+                      {/* Index label */}
+                      <text x={x + cellW / 2} y="153" textAnchor="middle" className="fill-slate-400 dark:fill-slate-400" fontSize="11" fontWeight="bold">[{idx}]</text>
+                      {/* Binary label */}
+                      <text x={x + cellW / 2} y="170" textAnchor="middle" className="fill-gray-500 dark:fill-gray-400" fontSize="8.5">{idx.toString(2).padStart(4, '0')}</text>
+                      {/* LSB label */}
+                      <text x={x + cellW / 2} y="185" textAnchor="middle" className="fill-purple-600 dark:fill-purple-500" fontSize="8.5" fontWeight="bold">LSB:{lsb}</text>
+                      {/* Range covered */}
+                      <text x={x + cellW / 2} y="200" textAnchor="middle" className="fill-gray-600 dark:fill-gray-400" fontSize="7.5">[{idx - lsb + 1}..{idx}]</text>
+                    </g>
+                  );
+                })}
+              </svg>
+            </div>
+          </div>
+          
+          {/* LSB formula reminder */}
+          <div className="absolute bottom-4 right-4 bg-white/90 dark:bg-gray-800/90 backdrop-blur border border-gray-200 dark:border-gray-700 rounded-xl px-3 py-2 text-xs font-mono shadow-sm">
+            <span className="text-[#a435f0] font-bold">LSB(i)</span>
+            <span className="text-gray-600 dark:text-gray-400"> = i & (-i)</span>
+          </div>
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+}
diff --git a/src/app/visualizer/tree/advanced/fenwick/codeBlock.jsx b/src/app/visualizer/tree/advanced/fenwick/codeBlock.jsx
new file mode 100644
index 000000000..13e0c5ce8
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/fenwick/codeBlock.jsx
@@ -0,0 +1,253 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for Fenwick Tree ─────────────────────────
+const codeExamples = {
+  javascript: `// Fenwick Tree (Binary Indexed Tree)
+class FenwickTree{
+
+    constructor(n){
+
+        this.n=n;
+
+        this.tree=
+        new Array(
+        n+1
+        ).fill(0);
+    }
+
+    // Returns prefix sum
+    query(index){
+
+        let sum=0;
+
+        while(
+        index>0
+        ){
+
+            sum+=
+            this.tree[
+            index
+            ];
+
+            index-=
+            index&
+            -index;
+        }
+
+        return sum;
+    }
+
+    // Update value
+    update(
+        index,
+        value){
+
+        while(
+        index<=
+        this.n
+        ){
+
+            this.tree[
+            index
+            ]+=value;
+
+            index+=
+            index&
+            -index;
+        }
+    }
+}
+
+// Usage
+const fenwick=
+new FenwickTree(5);
+
+fenwick.update(1,5);
+fenwick.update(2,3);
+
+console.log(
+fenwick.query(2)
+);`,
+
+  python: `# Fenwick Tree
+
+class FenwickTree:
+
+    def __init__(
+            self,
+            n):
+
+        self.n=n
+
+        self.tree=
+        [0]*(n+1)
+
+
+    def query(
+            self,
+            index):
+
+        total=0
+
+        while(
+        index>0
+        ):
+
+            total+=\
+            self.tree[
+            index
+            ]
+
+            index-=\
+            index&(
+            -index
+            )
+
+        return total
+
+
+    def update(
+            self,
+            index,
+            value):
+
+        while(
+        index<=
+        self.n
+        ):
+
+            self.tree[
+            index
+            ]+=value
+
+            index+=\
+            index&(
+            -index
+            )
+
+
+fenwick=
+FenwickTree(5)
+
+fenwick.update(
+1,5
+)
+
+fenwick.update(
+2,3
+)
+
+print(
+fenwick.query(2)
+)`,
+
+  cpp: `// Fenwick Tree
+#include<iostream>
+#include<vector>
+
+using namespace std;
+
+class FenwickTree{
+
+private:
+
+    vector<int>
+    tree;
+
+    int n;
+
+public:
+
+    FenwickTree(
+            int size){
+
+        n=size;
+
+        tree.resize(
+        n+1,
+        0
+        );
+    }
+
+    int query(
+            int index){
+
+        int sum=0;
+
+        while(
+        index>0
+        ){
+
+            sum+=
+            tree[
+            index
+            ];
+
+            index-=
+            index&
+            -index;
+        }
+
+        return sum;
+    }
+
+    void update(
+            int index,
+            int value){
+
+        while(
+        index<=n
+        ){
+
+            tree[
+            index
+            ]+=value;
+
+            index+=
+            index&
+            -index;
+        }
+    }
+};
+
+int main(){
+
+    FenwickTree
+    fenwick(5);
+
+    fenwick.update(
+    1,5
+    );
+
+    fenwick.update(
+    2,3
+    );
+
+    cout
+    <<fenwick.query(
+    2
+    );
+
+    return 0;
+}`
+};
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'fenwickTree.js',
+    python:'fenwick_tree.py',
+    cpp:'fenwick_tree.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default CodeBlock;
diff --git a/src/app/visualizer/tree/advanced/fenwick/content.jsx b/src/app/visualizer/tree/advanced/fenwick/content.jsx
new file mode 100644
index 000000000..6b7a353bf
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/fenwick/content.jsx
@@ -0,0 +1,68 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+
+const FenwickContent = () => {
+  return (
+    <main className="max-w-7xl mx-auto mt-8">
+      <article className="max-w-4xl mx-auto bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden mb-8 shadow-sm">
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is a Fenwick Tree (Binary Indexed Tree)?
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed space-y-4">
+            <p>
+              A **Fenwick Tree** (also known as a **Binary Indexed Tree** or **BIT**) is a highly efficient tree-like data structure represented implicitly inside a flat 1D array. It is primarily used to perform dynamic prefix sum queries and point updates in logarithmic time.
+            </p>
+            <p>
+              Compared to a Segment Tree, a Fenwick Tree requires far less memory space ($N$ elements instead of $4N$) and is significantly easier to implement using smart bitwise arithmetic.
+            </p>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Bit Manipulation & The LSB
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed space-y-4">
+            <p>
+              The core mechanism of a Fenwick Tree revolves around index manipulation using the **Least Significant Bit (LSB)** of index binary representations:
+            </p>
+            <div className="bg-gray-50 dark:bg-[#1b1b1b] p-4 rounded-xl border border-gray-200 dark:border-gray-800 font-mono text-sm">
+              LSB(i) = i & (-i)
+            </div>
+              <ul className="space-y-3 list-disc pl-5 marker:text-gray-500">
+              <li><strong>Update key step:</strong> To propagate a point update at index i, we repeatedly add its LSB (i ← i + LSB(i)) to correct dependent node values up the array bounds.</li>
+              <li><strong>Query prefix sum step:</strong> To query the sum from index 1 to i, we repeatedly subtract its LSB (i ← i - LSB(i)) to merge segment ranges backwards.</li>
+            </ul>
+          </div>
+        </section>
+
+        <section className="p-6">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Performance and Space
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <ul className="space-y-2 font-mono text-sm bg-gray-50 dark:bg-[#1b1b1b] p-4 rounded-xl border border-gray-200 dark:border-gray-800">
+              <li>Prefix Sum Query Time: O(log N)</li>
+              <li>Point Update Time: O(log N)</li>
+              <li>Space Complexity: O(N) - exact space match!</li>
+            </ul>
+            <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => Math.log2(n)}
+                averageCase={(n) => Math.log2(n)}
+                worstCase={(n) => Math.log2(n)}
+                maxN={50}
+              />
+            </div>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+};
+
+export default FenwickContent;
diff --git a/src/app/visualizer/tree/advanced/fenwick/quiz.jsx b/src/app/visualizer/tree/advanced/fenwick/quiz.jsx
new file mode 100644
index 000000000..b806216a5
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/fenwick/quiz.jsx
@@ -0,0 +1,34 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const FenwickQuiz = () => {
+  const questions = [
+    {
+      question: "Which bitwise operation extracts the Least Significant Bit (LSB) of an index i?",
+      options: [
+        "i & (i - 1)",
+        "i | (-i)",
+        "i & (-i)",
+        "i ^ (~i)"
+      ],
+      correctAnswer: 2,
+      explanation: "Using two's complement arithmetic, the LSB is extracted via the expression i & (-i)."
+    },
+    {
+      question: "What is the memory size advantage of a Fenwick Tree compared to a Segment Tree?",
+      options: [
+        "Fenwick Tree takes O(1) extra space.",
+        "Fenwick Tree requires only N elements, while a Segment Tree typically requires up to 4N nodes.",
+        "Fenwick Tree uses half the bit allocations per pointer.",
+        "There is no difference in memory size."
+      ],
+      correctAnswer: 1,
+      explanation: "A Fenwick Tree stores aggregate values implicitly inside an array of size N, bypassing the extensive structural tree node allocations of Segment Trees."
+    }
+  ];
+
+  return <QuizEngine title="Fenwick Tree Quiz" questions={questions} />;
+};
+
+export default FenwickQuiz;
diff --git a/src/app/visualizer/tree/advanced/quiz/AdvancedTreeQuizClient.jsx b/src/app/visualizer/tree/advanced/quiz/AdvancedTreeQuizClient.jsx
new file mode 100644
index 000000000..89dc1da89
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/AdvancedTreeQuizClient.jsx
@@ -0,0 +1,108 @@
+"use client";
+
+import Link from "next/link";
+import { Trees, ArrowRight } from "lucide-react";
+
+const quizzes = [
+  {
+    title: "AVL Tree Quiz",
+    description:
+      "Test your knowledge of AVL Trees, rotations, balancing factors, and self-balancing operations.",
+    href: "/visualizer/tree/advanced/quiz/avl",
+  },
+  {
+    title: "Red-Black Tree Quiz",
+    description:
+      "Practice Red-Black Tree properties, coloring rules, rotations, and balancing operations.",
+    href: "/visualizer/tree/advanced/quiz/red-black",
+  },
+  {
+    title: "B-Tree Quiz",
+    description:
+      "Learn B-Tree insertion, deletion, search, node splitting, and disk-based indexing concepts.",
+    href: "/visualizer/tree/advanced/quiz/b-tree",
+  },
+  {
+    title: "B+ Tree Quiz",
+    description:
+      "Practice B+ Tree structure, leaf node organization, indexing, and range query concepts.",
+    href: "/visualizer/tree/advanced/quiz/b-plus-tree",
+  },
+  {
+    title: "Segment Tree Quiz",
+    description:
+      "Test your understanding of Segment Trees for efficient range queries and updates.",
+    href: "/visualizer/tree/advanced/quiz/segment-tree",
+  },
+  {
+    title: "2D Segment Tree Quiz",
+    description:
+      "Test your understanding of 2D Segment Trees for efficient grid/matrix range queries and updates.",
+    href: "/visualizer/tree/advanced/quiz/segment-tree-2d",
+  },
+  {
+    title: "Fenwick Tree Quiz",
+    description:
+      "Practice Binary Indexed Tree (Fenwick Tree) operations, prefix sums, and updates.",
+    href: "/visualizer/tree/advanced/quiz/fenwick-tree",
+  },
+  {
+    title: "Trie Quiz",
+    description:
+      "Learn Trie insertion, searching, prefix matching, and autocomplete operations.",
+    href: "/visualizer/tree/advanced/quiz/trie",
+  },
+  {
+    title: "Heap Tree Quiz",
+    description:
+      "Practice Heap properties, insertion, deletion, heapify, and priority queue concepts.",
+    href: "/visualizer/tree/advanced/quiz/heap-tree",
+  },
+];
+
+export default function AdvancedTreeQuizClient() {
+  return (
+    <div className="min-h-screen bg-background p-6">
+      <div className="mx-auto max-w-7xl">
+        <div className="mb-10 text-center">
+          <h1 className="text-4xl font-bold">
+            🌲 Advanced Tree Quiz Portal
+          </h1>
+
+          <p className="mt-3 text-muted-foreground">
+            Select an Advanced Tree topic and test your understanding.
+          </p>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
+          {quizzes.map((quiz) => (
+            <div
+              key={quiz.title}
+              className="rounded-2xl border border-emerald-500/20 bg-card p-6 shadow-sm transition-all hover:border-emerald-500/40 hover:shadow-lg"
+            >
+              <div className="mb-5 flex h-14 w-14 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-600">
+                <Trees size={28} />
+              </div>
+
+              <h2 className="text-xl font-semibold">
+                {quiz.title}
+              </h2>
+
+              <p className="mt-3 text-sm text-muted-foreground">
+                {quiz.description}
+              </p>
+
+              <Link
+                href={quiz.href}
+                className="mt-6 inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-5 py-2.5 font-medium text-white transition hover:bg-emerald-700"
+              >
+                Start Quiz
+                <ArrowRight size={18} />
+              </Link>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/quiz/avl/page.jsx b/src/app/visualizer/tree/advanced/quiz/avl/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/avl/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/quiz/avl/quiz.jsx b/src/app/visualizer/tree/advanced/quiz/avl/quiz.jsx
new file mode 100644
index 000000000..ef6ac6f27
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/avl/quiz.jsx
@@ -0,0 +1,136 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What does AVL stand for?",
+    options: [
+      "Automatic Variable Level",
+      "Adelson-Velsky and Landis",
+      "Advanced Vertex List",
+      "Array Value Logic"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "AVL Trees are named after their inventors, Adelson-Velsky and Landis."
+  },
+  {
+    question: "AVL Tree is a type of:",
+    options: [
+      "Binary Heap",
+      "Binary Search Tree",
+      "Trie",
+      "B-Tree"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "An AVL Tree is a self-balancing Binary Search Tree."
+  },
+  {
+    question: "What is the balance factor of a node?",
+    options: [
+      "Left Height + Right Height",
+      "Left Height - Right Height",
+      "Left Height × Right Height",
+      "Node Value - Height"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Balance Factor = Height(Left Subtree) − Height(Right Subtree)."
+  },
+  {
+    question: "What balance factor values are allowed in an AVL Tree?",
+    options: [
+      "-1, 0, +1",
+      "0, 1, 2",
+      "-2, -1, 0",
+      "Any integer"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "A node is balanced if its balance factor is -1, 0, or +1."
+  },
+  {
+    question: "Which operation restores balance in an AVL Tree?",
+    options: [
+      "Sorting",
+      "Rotation",
+      "Swapping",
+      "Searching"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Rotations are performed to restore balance after insertion or deletion."
+  },
+  {
+    question: "How many basic rotations exist in AVL Trees?",
+    options: [
+      "2",
+      "3",
+      "4",
+      "5"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The four rotations are LL, RR, LR, and RL."
+  },
+  {
+    question: "Which rotation is used for a Left-Left imbalance?",
+    options: [
+      "Left Rotation",
+      "Right Rotation",
+      "Left-Right Rotation",
+      "Right-Left Rotation"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "A Right Rotation fixes an LL imbalance."
+  },
+  {
+    question: "What is the worst-case time complexity of searching in an AVL Tree?",
+    options: [
+      "O(n)",
+      "O(log n)",
+      "O(n log n)",
+      "O(1)"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "AVL Trees remain balanced, so search takes O(log n)."
+  },
+  {
+    question: "Why are AVL Trees faster than ordinary BSTs in searching?",
+    options: [
+      "They use hashing",
+      "They are always balanced",
+      "They store fewer nodes",
+      "They don't use recursion"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Balanced height ensures logarithmic search time."
+  },
+  {
+    question: "Which operation may require multiple rotations?",
+    options: [
+      "Insertion",
+      "Deletion",
+      "Traversal",
+      "Searching"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Deletion can propagate imbalance upward and require multiple rotations."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="AVL Tree Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/quiz/b-plus-tree/page.jsx b/src/app/visualizer/tree/advanced/quiz/b-plus-tree/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/b-plus-tree/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/quiz/b-plus-tree/quiz.jsx b/src/app/visualizer/tree/advanced/quiz/b-plus-tree/quiz.jsx
new file mode 100644
index 000000000..ae9af804f
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/b-plus-tree/quiz.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the primary difference between a B+ Tree and a B-Tree?",
+    options: [
+      "B+ Trees have only one child per node.",
+      "All records are stored only in leaf nodes in a B+ Tree.",
+      "B+ Trees are not balanced.",
+      "B+ Trees do not support searching."
+    ],
+    correctAnswer: 1,
+    explanation: "In a B+ Tree, internal nodes store only keys, while all records are stored in the leaf nodes."
+  },
+  {
+    question: "Why are B+ Trees widely used in database indexing?",
+    options: [
+      "They require no balancing.",
+      "They support efficient range queries and sequential access.",
+      "They always use less memory than arrays.",
+      "They eliminate disk access."
+    ],
+    correctAnswer: 1,
+    explanation: "Linked leaf nodes make range queries and sequential traversal much more efficient."
+  },
+  {
+    question: "Where are actual data records stored in a B+ Tree?",
+    options: [
+      "Internal nodes",
+      "Leaf nodes",
+      "Root node only",
+      "Randomly"
+    ],
+    correctAnswer: 1,
+    explanation: "Only leaf nodes contain the actual records in a B+ Tree."
+  },
+  {
+    question: "What do internal nodes contain in a B+ Tree?",
+    options: [
+      "Only records",
+      "Keys used for searching",
+      "Pointers to arrays",
+      "Leaf data"
+    ],
+    correctAnswer: 1,
+    explanation: "Internal nodes contain only keys and child pointers."
+  },
+  {
+    question: "Which operation benefits the most from linked leaf nodes?",
+    options: [
+      "Insertion",
+      "Range queries",
+      "Deletion",
+      "Balancing"
+    ],
+    correctAnswer: 1,
+    explanation: "Sequentially linked leaf nodes make range queries very efficient."
+  },
+  {
+    question: "What is the average search complexity of a B+ Tree?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 1,
+    explanation: "Like B-Trees, B+ Trees provide logarithmic search complexity."
+  },
+  {
+    question: "Are all leaf nodes in a B+ Tree at the same level?",
+    options: [
+      "Yes",
+      "No",
+      "Only if the tree has 3 levels",
+      "Only after deletion"
+    ],
+    correctAnswer: 0,
+    explanation: "B+ Trees are height-balanced, so all leaves remain at the same depth."
+  },
+  {
+    question: "Which structure connects the leaf nodes of a B+ Tree?",
+    options: [
+      "Stack",
+      "Queue",
+      "Linked List",
+      "Hash Table"
+    ],
+    correctAnswer: 2,
+    explanation: "Leaf nodes are linked together to support sequential traversal."
+  },
+  {
+    question: "Compared to a B-Tree, a B+ Tree generally has:",
+    options: [
+      "Lower fan-out",
+      "Higher fan-out",
+      "No internal nodes",
+      "Only one level"
+    ],
+    correctAnswer: 1,
+    explanation: "Since internal nodes store only keys, they can contain more keys and child pointers."
+  },
+  {
+    question: "B+ Trees are commonly used in:",
+    options: [
+      "Database indexing",
+      "File systems",
+      "Operating systems",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation: "B+ Trees are widely used in databases and modern file systems due to their efficient indexing."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="B+ Tree Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/quiz/b-tree/page.jsx b/src/app/visualizer/tree/advanced/quiz/b-tree/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/b-tree/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/quiz/b-tree/quiz.jsx b/src/app/visualizer/tree/advanced/quiz/b-tree/quiz.jsx
new file mode 100644
index 000000000..5c5748e65
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/b-tree/quiz.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the primary purpose of a B-Tree?",
+    options: [
+      "Sorting arrays",
+      "Efficient storage and retrieval of large amounts of data",
+      "Graph traversal",
+      "String matching"
+    ],
+    correctAnswer: 1,
+    explanation: "B-Trees are designed for efficient searching, insertion, and deletion in large datasets, especially on disks."
+  },
+  {
+    question: "Where are B-Trees commonly used?",
+    options: [
+      "Operating Systems",
+      "Database Management Systems",
+      "Computer Graphics",
+      "Machine Learning"
+    ],
+    correctAnswer: 1,
+    explanation: "B-Trees are widely used in databases and file systems for indexing."
+  },
+  {
+    question: "A B-Tree is primarily optimized for:",
+    options: [
+      "Main memory",
+      "Disk storage",
+      "GPU memory",
+      "Cache memory"
+    ],
+    correctAnswer: 1,
+    explanation: "B-Trees minimize disk accesses by storing multiple keys per node."
+  },
+  {
+    question: "Each node in a B-Tree can contain:",
+    options: [
+      "Only one key",
+      "Multiple keys",
+      "Only two keys",
+      "No keys"
+    ],
+    correctAnswer: 1,
+    explanation: "Unlike BSTs, B-Trees allow multiple keys in each node."
+  },
+  {
+    question: "What happens when a B-Tree node becomes full during insertion?",
+    options: [
+      "The tree becomes invalid",
+      "The node is split",
+      "The insertion is rejected",
+      "The root is deleted"
+    ],
+    correctAnswer: 1,
+    explanation: "A full node is split and its middle key is promoted."
+  },
+  {
+    question: "What is the average search complexity of a B-Tree?",
+    options: [
+      "O(n)",
+      "O(log n)",
+      "O(1)",
+      "O(n²)"
+    ],
+    correctAnswer: 1,
+    explanation: "Searching in a balanced B-Tree requires logarithmic time."
+  },
+  {
+    question: "Why are B-Trees preferred over Binary Search Trees for databases?",
+    options: [
+      "They use less memory",
+      "They reduce disk I/O operations",
+      "They don't require balancing",
+      "They are recursive"
+    ],
+    correctAnswer: 1,
+    explanation: "Multiple keys per node reduce the tree height and disk accesses."
+  },
+  {
+    question: "What is the maximum number of children for a B-Tree node of order m?",
+    options: [
+      "m",
+      "m-1",
+      "2m",
+      "m+1"
+    ],
+    correctAnswer: 0,
+    explanation: "A B-Tree of order m can have at most m children."
+  },
+  {
+    question: "What property do all leaf nodes of a B-Tree share?",
+    options: [
+      "They have different depths",
+      "They are at the same level",
+      "They contain only one key",
+      "They have no parent"
+    ],
+    correctAnswer: 1,
+    explanation: "All leaf nodes are maintained at the same depth, keeping the tree balanced."
+  },
+  {
+    question: "Which operation may require node merging in a B-Tree?",
+    options: [
+      "Searching",
+      "Traversal",
+      "Deletion",
+      "Insertion"
+    ],
+    correctAnswer: 2,
+    explanation: "Deletion may require merging nodes to maintain B-Tree properties."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="B-Tree Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/quiz/fenwick-tree/page.jsx b/src/app/visualizer/tree/advanced/quiz/fenwick-tree/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/fenwick-tree/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/quiz/fenwick-tree/quiz.jsx b/src/app/visualizer/tree/advanced/quiz/fenwick-tree/quiz.jsx
new file mode 100644
index 000000000..160651a17
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/fenwick-tree/quiz.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is another name for a Fenwick Tree?",
+    options: [
+      "AVL Tree",
+      "Binary Indexed Tree",
+      "Segment Tree",
+      "Trie"
+    ],
+    correctAnswer: 1,
+    explanation: "Fenwick Tree is also known as a Binary Indexed Tree (BIT)."
+  },
+  {
+    question: "What is the primary purpose of a Fenwick Tree?",
+    options: [
+      "Sorting arrays",
+      "Efficient prefix sum queries and updates",
+      "Graph traversal",
+      "Binary searching"
+    ],
+    correctAnswer: 1,
+    explanation: "Fenwick Trees efficiently support prefix sum queries and point updates."
+  },
+  {
+    question: "What is the time complexity of updating an element in a Fenwick Tree?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n log n)"
+    ],
+    correctAnswer: 1,
+    explanation: "Updates require traversing parent indices, giving O(log n) complexity."
+  },
+  {
+    question: "What is the time complexity of a prefix sum query?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 1,
+    explanation: "Fenwick Trees compute prefix sums in logarithmic time."
+  },
+  {
+    question: "Which operation is NOT commonly supported directly by a Fenwick Tree?",
+    options: [
+      "Point Update",
+      "Prefix Sum Query",
+      "Range Sum Query (using two prefix sums)",
+      "Level-order Traversal"
+    ],
+    correctAnswer: 3,
+    explanation: "Level-order traversal is unrelated to Fenwick Trees."
+  },
+  {
+    question: "Fenwick Trees are generally implemented using:",
+    options: [
+      "Linked List",
+      "Array",
+      "Hash Table",
+      "Graph"
+    ],
+    correctAnswer: 1,
+    explanation: "Fenwick Trees are efficiently represented using an array."
+  },
+  {
+    question: "Which bitwise operation is commonly used in Fenwick Tree implementation?",
+    options: [
+      "index & (-index)",
+      "index | (-index)",
+      "index ^ (-index)",
+      "index >> 2"
+    ],
+    correctAnswer: 0,
+    explanation: "The expression index & (-index) extracts the least significant set bit."
+  },
+  {
+    question: "Compared to a Segment Tree, a Fenwick Tree usually:",
+    options: [
+      "Uses more memory",
+      "Uses less memory",
+      "Cannot perform updates",
+      "Cannot answer queries"
+    ],
+    correctAnswer: 1,
+    explanation: "Fenwick Trees are more space-efficient than Segment Trees."
+  },
+  {
+    question: "Fenwick Trees are best suited for:",
+    options: [
+      "Dynamic Programming",
+      "Prefix sum computations",
+      "Shortest path algorithms",
+      "Tree balancing"
+    ],
+    correctAnswer: 1,
+    explanation: "Fenwick Trees are designed specifically for prefix sums and updates."
+  },
+  {
+    question: "The space complexity of a Fenwick Tree is:",
+    options: [
+      "O(log n)",
+      "O(n)",
+      "O(n²)",
+      "O(1)"
+    ],
+    correctAnswer: 1,
+    explanation: "Fenwick Trees require an array of size n, resulting in O(n) space."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Fenwick Tree Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/quiz/heap-tree/page.jsx b/src/app/visualizer/tree/advanced/quiz/heap-tree/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/heap-tree/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/quiz/heap-tree/quiz.jsx b/src/app/visualizer/tree/advanced/quiz/heap-tree/quiz.jsx
new file mode 100644
index 000000000..27fabaae8
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/heap-tree/quiz.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the defining property of a Max Heap?",
+    options: [
+      "Every parent node is smaller than its children",
+      "Every parent node is greater than or equal to its children",
+      "The tree is always a Binary Search Tree",
+      "All leaf nodes are sorted"
+    ],
+    correctAnswer: 1,
+    explanation: "In a Max Heap, every parent node has a value greater than or equal to its children."
+  },
+  {
+    question: "What is the defining property of a Min Heap?",
+    options: [
+      "Every parent node is smaller than or equal to its children",
+      "Every parent node is greater than its children",
+      "Leaf nodes contain the smallest values",
+      "The tree is always balanced"
+    ],
+    correctAnswer: 0,
+    explanation: "In a Min Heap, every parent node has a value less than or equal to its children."
+  },
+  {
+    question: "Which type of binary tree is used to implement a Heap?",
+    options: [
+      "Perfect Binary Tree",
+      "Complete Binary Tree",
+      "Binary Search Tree",
+      "AVL Tree"
+    ],
+    correctAnswer: 1,
+    explanation: "A Heap is always implemented as a Complete Binary Tree."
+  },
+  {
+    question: "Which data structure is commonly used to store a Heap?",
+    options: [
+      "Linked List",
+      "Array",
+      "Stack",
+      "Hash Table"
+    ],
+    correctAnswer: 1,
+    explanation: "Heaps are efficiently stored in arrays without explicit pointers."
+  },
+  {
+    question: "What is the time complexity of inserting an element into a Heap?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n log n)"
+    ],
+    correctAnswer: 1,
+    explanation: "Insertion may require heapifying upward, resulting in O(log n)."
+  },
+  {
+    question: "What is the time complexity of deleting the root element from a Heap?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 1,
+    explanation: "Deleting the root requires heapifying downward, which takes O(log n)."
+  },
+  {
+    question: "Which algorithm is commonly implemented using a Heap?",
+    options: [
+      "Merge Sort",
+      "Heap Sort",
+      "Quick Sort",
+      "Insertion Sort"
+    ],
+    correctAnswer: 1,
+    explanation: "Heap Sort uses a Binary Heap to efficiently sort elements."
+  },
+  {
+    question: "Which operation returns the highest-priority element in a Max Heap?",
+    options: [
+      "Peek",
+      "Push",
+      "Search",
+      "Traverse"
+    ],
+    correctAnswer: 0,
+    explanation: "The root node contains the maximum element and can be accessed using peek."
+  },
+  {
+    question: "Which application commonly uses Heaps?",
+    options: [
+      "Priority Queues",
+      "Breadth-First Search",
+      "Trie Searching",
+      "Binary Search"
+    ],
+    correctAnswer: 0,
+    explanation: "Priority Queues are commonly implemented using Binary Heaps."
+  },
+  {
+    question: "What is the time complexity of accessing the root element of a Heap?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n log n)"
+    ],
+    correctAnswer: 0,
+    explanation: "The root element is stored at the first position, making access constant time."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Heap Tree Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/quiz/page.jsx b/src/app/visualizer/tree/advanced/quiz/page.jsx
new file mode 100644
index 000000000..c52d51e2e
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/page.jsx
@@ -0,0 +1,5 @@
+import AdvancedTreeQuizClient from "./AdvancedTreeQuizClient";
+
+export default function Page() {
+  return <AdvancedTreeQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/quiz/red-black/page.jsx b/src/app/visualizer/tree/advanced/quiz/red-black/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/red-black/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/quiz/red-black/quiz.jsx b/src/app/visualizer/tree/advanced/quiz/red-black/quiz.jsx
new file mode 100644
index 000000000..746faa51c
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/red-black/quiz.jsx
@@ -0,0 +1,121 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the root node color in a Red-Black Tree?",
+    options: ["Red", "Black", "Either Red or Black", "Blue"],
+    correctAnswer: 1,
+    explanation: "The root of every Red-Black Tree must always be black."
+  },
+  {
+    question: "Which type of Binary Search Tree is a Red-Black Tree?",
+    options: [
+      "Complete BST",
+      "Self-balancing BST",
+      "Threaded BST",
+      "Skewed BST"
+    ],
+    correctAnswer: 1,
+    explanation: "Red-Black Trees automatically maintain balance after insertions and deletions."
+  },
+  {
+    question: "Can two consecutive red nodes exist in a Red-Black Tree?",
+    options: [
+      "Yes",
+      "No",
+      "Only at the root",
+      "Only in leaf nodes"
+    ],
+    correctAnswer: 1,
+    explanation: "A red node cannot have a red parent."
+  },
+  {
+    question: "Every path from a node to its descendant NULL nodes must contain:",
+    options: [
+      "Equal number of red nodes",
+      "Equal number of black nodes",
+      "Equal height",
+      "Equal number of leaves"
+    ],
+    correctAnswer: 1,
+    explanation: "This is called the Black Height property."
+  },
+  {
+    question: "Which operation is used to restore balance after insertion?",
+    options: [
+      "Sorting",
+      "Rotations and recoloring",
+      "Searching",
+      "Heapify"
+    ],
+    correctAnswer: 1,
+    explanation: "Balancing is achieved using rotations along with recoloring."
+  },
+  {
+    question: "What is the worst-case height of a Red-Black Tree?",
+    options: [
+      "O(n)",
+      "O(log n)",
+      "O(n²)",
+      "O(1)"
+    ],
+    correctAnswer: 1,
+    explanation: "Red-Black Trees guarantee logarithmic height."
+  },
+  {
+    question: "Which color are all NULL (NIL) leaves considered?",
+    options: [
+      "Red",
+      "Black",
+      "Green",
+      "White"
+    ],
+    correctAnswer: 1,
+    explanation: "All NIL leaves are treated as black nodes."
+  },
+  {
+    question: "Which operation has O(log n) complexity in a Red-Black Tree?",
+    options: [
+      "Search",
+      "Insertion",
+      "Deletion",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation: "Search, insertion, and deletion all execute in O(log n)."
+  },
+  {
+    question: "Why are Red-Black Trees preferred over normal BSTs?",
+    options: [
+      "They require less memory",
+      "They always remain balanced",
+      "They eliminate recursion",
+      "They sort automatically"
+    ],
+    correctAnswer: 1,
+    explanation: "Self-balancing prevents degeneration into a linked list."
+  },
+  {
+    question: "Red-Black Trees are commonly used in:",
+    options: [
+      "Compilers",
+      "Operating Systems",
+      "STL map/set implementations",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation: "Red-Black Trees are widely used in standard libraries, operating systems, and compilers."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Red-Black Tree Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/quiz/segment-tree-2d/page.jsx b/src/app/visualizer/tree/advanced/quiz/segment-tree-2d/page.jsx
new file mode 100644
index 000000000..d40f95b3a
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/segment-tree-2d/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
diff --git a/src/app/visualizer/tree/advanced/quiz/segment-tree-2d/quiz.jsx b/src/app/visualizer/tree/advanced/quiz/segment-tree-2d/quiz.jsx
new file mode 100644
index 000000000..5be6b02b1
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/segment-tree-2d/quiz.jsx
@@ -0,0 +1,351 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  // --- BEGINNER (1-12) ---
+  {
+    question: "What is the fundamental structural concept behind a 2D Segment Tree?",
+    options: [
+      "A nested tree structure (Tree of Trees) where outer tree nodes represent row ranges and point to inner column segment trees",
+      "A balanced binary search tree where each node contains a 2D matrix",
+      "A tree with 4 children per node representing quadrants of a matrix",
+      "A collection of independent 1D segment trees, one for each diagonal of a grid"
+    ],
+    correctAnswer: 0,
+    explanation: "A 2D Segment Tree is structured as a Tree of Trees. The outer tree segment tree handles row intervals, and each node in this outer tree stores a complete 1D segment tree that manages column intervals for that row range."
+  },
+  {
+    question: "Why is a standard 1D Segment Tree inadequate for direct 2D rectangular subgrid range queries?",
+    options: [
+      "1D trees cannot store integer values in grids",
+      "A contiguous 2D subgrid does not map to a single contiguous index range in a flattened 1D array representation",
+      "1D trees only support prefix sums, not range minimum queries",
+      "1D segment trees cannot perform point updates"
+    ],
+    correctAnswer: 1,
+    explanation: "If you flatten a 2D matrix into a 1D array, a rectangular subgrid becomes multiple non-contiguous segment slices. A 1D segment tree cannot query these separate slices in a single logarithmic query."
+  },
+  {
+    question: "In a 2D Segment Tree representing an M × N matrix, what does the root node of the outer tree represent?",
+    options: [
+      "The entire row range [0, M-1]",
+      "The entire column range [0, N-1]",
+      "The single top-left cell (0, 0)",
+      "The sum of all cells in the matrix"
+    ],
+    correctAnswer: 0,
+    explanation: "The outer tree partitions rows. The root node of the outer tree covers the complete range of rows from index 0 to M-1."
+  },
+  {
+    question: "What does each leaf node in the outer row-wise segment tree of a 2D Segment Tree contain?",
+    options: [
+      "A single floating-point decimal value",
+      "A complete 1D segment tree representing that specific row's columns",
+      "A linked list of active grid coordinates",
+      "An array of row indices"
+    ],
+    correctAnswer: 1,
+    explanation: "A leaf node in the outer tree represents a single row interval [i, i]. It contains a 1D column segment tree built over the elements of that specific row."
+  },
+  {
+    question: "What is the time complexity of building a 2D Segment Tree for an N × N matrix?",
+    options: [
+      "O(log N)",
+      "O(N log N)",
+      "O(N²)",
+      "O(N³)"
+    ],
+    correctAnswer: 2,
+    explanation: "Building the 2D segment tree requires constructing 1D segment trees for all nodes in the row tree. The leaf rows take O(N²), and merging them upward takes O(N²), giving an overall O(N²) build time complexity."
+  },
+  {
+    question: "Which dimensions are typically indexed by the outer tree and the inner trees of a 2D Segment Tree, respectively?",
+    options: [
+      "Outer indexes row ranges; inner indexes column ranges",
+      "Outer indexes column ranges; inner indexes row ranges",
+      "Outer indexes diagonal ranges; inner indexes anti-diagonals",
+      "Outer indexes grid quadrants; inner indexes grid cells"
+    ],
+    correctAnswer: 0,
+    explanation: "By convention, the outer tree handles row intervals (Y-axis partitioning), and the inner trees handle column intervals (X-axis partitioning)."
+  },
+  {
+    question: "What type of problem is a 2D Segment Tree primarily designed to solve?",
+    options: [
+      "Matrix multiplication",
+      "Subgrid/rectangular range queries and point updates",
+      "Finding the shortest path in a grid",
+      "Transposing a matrix"
+    ],
+    correctAnswer: 1,
+    explanation: "2D Segment Trees are used to answer range queries (Sum, Minimum, Maximum, GCD) on rectangular regions of a matrix while supporting dynamic point updates."
+  },
+  {
+    question: "In a 2D Segment Tree, how many children does a non-leaf node in the outer tree have?",
+    options: [
+      "2",
+      "4",
+      "8",
+      "Varies based on matrix aspect ratio"
+    ],
+    correctAnswer: 0,
+    explanation: "The outer tree is a standard binary segment tree structure, so every non-leaf row node has exactly 2 children (representing the left and right halves of the row range)."
+  },
+  {
+    question: "Which of the following is a primary advantage of a 2D Segment Tree over a naive cell-by-cell loop query?",
+    options: [
+      "It requires no additional memory",
+      "It reduces range query time from O(N²) to O(log² N) for N × N grids",
+      "It makes cell updates O(1) time",
+      "It sorts the matrix automatically"
+    ],
+    correctAnswer: 1,
+    explanation: "For an N × N grid, a naive subgrid query traverses every cell in O(N²) time. A 2D Segment Tree cuts this query complexity to O(log² N) using interval partitioning."
+  },
+  {
+    question: "What is a major limitation of a 2D Segment Tree?",
+    options: [
+      "It cannot handle updates",
+      "It can only answer sum queries",
+      "High memory consumption",
+      "It is restricted to strictly square matrices"
+    ],
+    correctAnswer: 2,
+    explanation: "Because each node of the row segment tree contains a full column segment tree, the space complexity is O(16 × M × N) in static arrays, which represents a large memory overhead."
+  },
+  {
+    question: "If you perform a query on a 2D Segment Tree where the query ranges are [r, r] and [c, c], what does this query perform?",
+    options: [
+      "A point query (finding the value of a single cell)",
+      "A row query",
+      "A column query",
+      "A total sum query"
+    ],
+    correctAnswer: 0,
+    explanation: "Querying a single row index r and a single column index c retrieves the exact cell value at (r, c), which is equivalent to a point query."
+  },
+  {
+    question: "In a 2D Segment Tree for range sum queries, what value should be returned by a node whose range has zero overlap with the query?",
+    options: [
+      "-1",
+      "Infinity",
+      "0",
+      "Null"
+    ],
+    correctAnswer: 2,
+    explanation: "For range sum queries, 0 is the additive identity and does not alter the sum. For range minimum queries, infinity would be returned; for range maximums, negative infinity."
+  },
+
+  // --- INTERMEDIATE (13-24) ---
+  {
+    question: "What is the worst-case time complexity of updating a single cell (point update) in a 2D Segment Tree of size N × N?",
+    options: [
+      "O(N)",
+      "O(log² N)",
+      "O(N log N)",
+      "O(1)"
+    ],
+    correctAnswer: 1,
+    explanation: "Updating a cell requires traversing O(log N) row nodes. At each row node, we perform a 1D column tree update which takes O(log N) steps. Thus, the total complexity is O(log² N)."
+  },
+  {
+    question: "What is the worst-case time complexity of a 2D range query in a 2D Segment Tree of size N × N?",
+    options: [
+      "O(N log N)",
+      "O(log² N)",
+      "O(log N)",
+      "O(N)"
+    ],
+    correctAnswer: 1,
+    explanation: "A 2D query visits O(log N) row tree segments, and for each visited row segment, queries its inner column segment tree in O(log N) time, resulting in O(log² N) time."
+  },
+  {
+    question: "What is the space complexity of a 2D Segment Tree for an M × N matrix in a standard flat array implementation?",
+    options: [
+      "O(M + N)",
+      "O(M × N log(M × N))",
+      "O(M × N)",
+      "O(M² × N²)"
+    ],
+    correctAnswer: 2,
+    explanation: "Though the constant factor is large (approx 16), the space complexity is asymptotically O(M × N) because the number of elements is directly proportional to M × N."
+  },
+  {
+    question: "During a point update at cell (r, c), which of the following describes the correct update propagation in the 2D Segment Tree?",
+    options: [
+      "First update the leaf row's column tree at c, then walk up the row tree, updating the column trees of parent row nodes at index c by merging values from children row nodes",
+      "Update the outer row tree first, then recursively update all inner columns from index 0 to N-1",
+      "Update only the root node of the outer row tree and defer child updates",
+      "Update all leaf nodes in all row and column trees simultaneously"
+    ],
+    correctAnswer: 0,
+    explanation: "Updates are bottom-up. First, we find leaf row r and update its col tree at index c. Then, we walk back up to the root, updating column tree node c of each row ancestor by combining child row node column values."
+  },
+  {
+    question: "Which of the following statements is true when comparing a 2D Segment Tree with a 2D Fenwick Tree (Binary Indexed Tree)?",
+    options: [
+      "2D Fenwick trees use more space than 2D Segment Trees",
+      "2D Segment Trees are more flexible because they support non-invertible operators (like Range Max) easily, whereas standard 2D Fenwick Trees require invertible operators (like Sum)",
+      "2D Segment Trees have a smaller constant factor in execution time",
+      "2D Fenwick Trees do not support point updates"
+    ],
+    correctAnswer: 1,
+    explanation: "A 2D Fenwick tree is highly space efficient, but relies on prefix subtraction (invertibility) to answer subgrid queries. A 2D Segment Tree only needs associativity, allowing it to easily support RMQ (Range Max/Min)."
+  },
+  {
+    question: "To support 2D Range Maximum Queries (RMQ), how is a parent row node's inner column tree constructed from its children row nodes' column trees?",
+    options: [
+      "Each node in the parent's column tree stores the maximum of the corresponding nodes in the children's column trees",
+      "We add the values of the children row nodes' column tree nodes",
+      "We concatenate the children row nodes' column tree arrays",
+      "Only the root node of the parent column tree contains the maximum value"
+    ],
+    correctAnswer: 0,
+    explanation: "To merge two column trees, we define parent_tree[col_node] = max(left_child_tree[col_node], right_child_tree[col_node]) at every node of the column segment tree."
+  },
+  {
+    question: "Which mathematical property is REQUIRED for an operation (like sum, min, gcd) to be valid on a 2D Segment Tree?",
+    options: [
+      "Commutativity",
+      "Invertibility",
+      "Associativity",
+      "Distributivity"
+    ],
+    correctAnswer: 2,
+    explanation: "Associativity is required because segment trees partition ranges into arbitrary binary cuts, and merging results must yield the same answer regardless of the grouping of operations."
+  },
+  {
+    question: "Why are static 2D prefix sum arrays insufficient compared to 2D Segment Trees in dynamic grid applications?",
+    options: [
+      "2D prefix sum arrays cannot handle negative numbers",
+      "Updating a cell in a 2D prefix sum array requires O(M × N) time, which is too slow for frequent updates",
+      "2D prefix sum arrays take O(N²) space for queries",
+      "2D prefix sum arrays do not work with rectangular grids"
+    ],
+    correctAnswer: 1,
+    explanation: "A 2D prefix sum array can query in O(1) time but cell updates require recomputing the prefix sum of all cells below and to the right, which takes O(M × N) time in the worst case."
+  },
+  {
+    question: "When querying a row range [r1, r2] and column range [c1, c2] in a 2D Segment Tree, how many inner column segment trees are queried in the worst case?",
+    options: [
+      "O(1)",
+      "O(M) where M is the number of rows",
+      "O(log M) where M is the number of rows",
+      "O(M × N)"
+    ],
+    correctAnswer: 2,
+    explanation: "The outer row tree is traversed, and exactly O(log M) disjoint row intervals covering [r1, r2] are selected. For each of these row nodes, we query their inner column tree, thus querying O(log M) column trees."
+  },
+  {
+    question: "During a point update at coordinates (r, c), which of the following is true regarding node updates?",
+    options: [
+      "We update column trees of exactly O(log M) row nodes, traversing O(log N) column nodes in each",
+      "We update all N² nodes of the 2D segment tree",
+      "We only update the root node of the outer tree",
+      "We only update the column tree of leaf row r"
+    ],
+    correctAnswer: 0,
+    explanation: "We traverse the path from root to leaf row r (which has O(log M) nodes). For each node on this path, we update the column tree node corresponding to index c (which has O(log N) nodes)."
+  },
+  {
+    question: "If we change the query operation from Range Sum to Range Greatest Common Divisor (GCD), what modification is required?",
+    options: [
+      "No changes; the code is exactly identical",
+      "We must add a hash map to the segment tree nodes",
+      "Replace the addition (+) operator with the GCD operator in both inner and outer tree node combining steps",
+      "The tree must be reconstructed as a trie"
+    ],
+    correctAnswer: 2,
+    explanation: "Because GCD is associative, we can simply replace the combination step. Instead of summing child nodes, we take their GCD during builds, updates, and query returns."
+  },
+  {
+    question: "In competitive programming, when is a 2D Segment Tree preferred over a 2D Fenwick Tree?",
+    options: [
+      "When the grid never changes after construction",
+      "When the range query operation is not invertible (like Range Max/Min) and dynamic point updates are required",
+      "When memory is extremely limited and constant factor speed is critical",
+      "When only 1D range queries are needed"
+    ],
+    correctAnswer: 1,
+    explanation: "For Range Sum, a 2D Fenwick tree is better due to simplicity and memory. For Range Max/Min (which are non-invertible), a 2D Fenwick tree cannot answer arbitrary range queries easily, making 2D Segment Tree the tool of choice."
+  },
+
+  // --- ADVANCED (25-30) ---
+  {
+    question: "Why is a general 2D range update (e.g., adding val to subgrid) with lazy propagation extremely complex in a standard 2D Segment Tree?",
+    options: [
+      "Lazy tags cannot be represented as numbers",
+      "Row nodes do not have left and right children",
+      "Columns do not have a binary midpoint",
+      "Propagating a lazy update tag down a row node's children requires updating or creating lazy flags on their entire inner column trees, which cannot be done in O(log N) time"
+    ],
+    correctAnswer: 3,
+    explanation: "In 1D, lazy propagation is O(1) because you store a tag at a node. In 2D, a row node covers many columns. Propagating a row tag down requires modifying column segments, which results in O(N) or O(N log N) work, destroying the O(log² N) update complexity."
+  },
+  {
+    question: "How can you support 2D range updates (add to subgrid) and point queries (value at a cell) efficiently without using complex 2D lazy propagation?",
+    options: [
+      "By using a 'championship' approach: apply the update to covered segment nodes in the row/col trees, and accumulate the sum of these nodes along the search paths during point queries",
+      "By using a 1D segment tree and flattening the grid",
+      "By rebuilding the entire tree from scratch after each update",
+      "By locking the matrix to prevent simultaneous operations"
+    ],
+    correctAnswer: 0,
+    explanation: "This is the 'update-range, query-point' duality. Instead of pushing lazy tags down, we add the value to the matching nodes. A point query at (r,c) sums up all values stored in the nodes covering (r,c) along the root-to-leaf paths."
+  },
+  {
+    question: "For a sparse grid of size 10⁹ × 10⁹ with K non-zero elements, how can a 2D Segment Tree be represented without running out of memory?",
+    options: [
+      "Using a 1D array of size 10¹⁸ elements",
+      "By using an adjacency list of a graph",
+      "By utilizing dynamic node allocation (pointer-based sparse segment tree) for both outer and inner trees, keeping space to O(K log M log N)",
+      "By compressing the coordinates into a hash table and querying it linearly"
+    ],
+    correctAnswer: 2,
+    explanation: "A sparse segment tree allocates nodes dynamically only when they are updated. By using dynamic node creation for both row and column trees, we only instantiate nodes along paths of updated elements, saving space."
+  },
+  {
+    question: "During a bottom-up build of a 2D Segment Tree, how is the inner column tree of a parent row node constructed from its children row nodes' column trees?",
+    options: [
+      "By building it from scratch from the base matrix, taking O(N) time",
+      "By merging the children row nodes' column trees node-by-node recursively, taking O(N) time",
+      "By copying the left child's column tree and ignoring the right",
+      "By summing only the root nodes of children column trees"
+    ],
+    correctAnswer: 1,
+    explanation: "To build a parent's column tree, we recursively combine the corresponding column tree nodes of the left child row tree and the right child row tree: parent[node] = merge(left_child[node], right_child[node]). This takes O(N) time, equivalent to the column tree size."
+  },
+  {
+    question: "What is the time complexity of a 2D range query on a static grid if each node of a 1D row segment tree contains a sorted array of columns (queried via binary search or fractional cascading)?",
+    options: [
+      "O(log M + log N) with fractional cascading, or O(log M × log N) with binary search",
+      "O(M × N)",
+      "O(1)",
+      "O(log(M + N))"
+    ],
+    correctAnswer: 0,
+    explanation: "If rows are partitioned by a segment tree where each node holds sorted elements of columns, we query O(log M) nodes. Using binary search takes O(log N) per node, totaling O(log M × log N). Fractional cascading optimizes this to O(log M + log N)."
+  },
+  {
+    question: "In a 2D Segment Tree, why does combining inner trees node-by-node during parent row tree calculations preserve mathematical correctness?",
+    options: [
+      "Because the row-wise range merge operation and the column-wise range merge operation are commutative and associative, ensuring consistency",
+      "Because parent nodes are always twice the value of their children",
+      "Because column trees are always sorted in ascending order",
+      "Because the matrix values are strictly positive integers"
+    ],
+    correctAnswer: 0,
+    explanation: "Since the operations are associative and commutative (or combine independently), merging row intervals first, then column intervals, yields the same result as column-wise merging first, then row-wise."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="2D Segment Tree Quiz"
+      questions={questions}
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/advanced/quiz/segment-tree/page.jsx b/src/app/visualizer/tree/advanced/quiz/segment-tree/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/segment-tree/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/quiz/segment-tree/quiz.jsx b/src/app/visualizer/tree/advanced/quiz/segment-tree/quiz.jsx
new file mode 100644
index 000000000..51e2f52a9
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/segment-tree/quiz.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the primary purpose of a Segment Tree?",
+    options: [
+      "Sorting elements",
+      "Efficient range queries and updates",
+      "Graph traversal",
+      "String matching"
+    ],
+    correctAnswer: 1,
+    explanation: "Segment Trees efficiently support range queries and point/range updates."
+  },
+  {
+    question: "Which of the following queries is commonly solved using a Segment Tree?",
+    options: [
+      "Range Sum Query",
+      "Graph Coloring",
+      "Shortest Path",
+      "Topological Sort"
+    ],
+    correctAnswer: 0,
+    explanation: "Segment Trees are widely used for range sum, minimum, and maximum queries."
+  },
+  {
+    question: "What is the time complexity of building a Segment Tree?",
+    options: [
+      "O(log n)",
+      "O(n)",
+      "O(n log n)",
+      "O(n²)"
+    ],
+    correctAnswer: 1,
+    explanation: "Building the Segment Tree requires visiting every element once."
+  },
+  {
+    question: "What is the time complexity of a range query in a Segment Tree?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 1,
+    explanation: "Range queries are answered in logarithmic time."
+  },
+  {
+    question: "What is the time complexity of updating a single element in a Segment Tree?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n log n)"
+    ],
+    correctAnswer: 1,
+    explanation: "Only nodes on one root-to-leaf path need updating."
+  },
+  {
+    question: "Which traversal is commonly used to build a Segment Tree recursively?",
+    options: [
+      "Preorder",
+      "Postorder",
+      "Recursive Divide and Conquer",
+      "Level Order"
+    ],
+    correctAnswer: 2,
+    explanation: "Segment Trees are constructed using divide-and-conquer recursion."
+  },
+  {
+    question: "Which type of tree is a Segment Tree?",
+    options: [
+      "Binary Tree",
+      "AVL Tree",
+      "Trie",
+      "Heap"
+    ],
+    correctAnswer: 0,
+    explanation: "A Segment Tree is a complete binary tree built over array segments."
+  },
+  {
+    question: "What is the approximate space complexity of a Segment Tree?",
+    options: [
+      "O(log n)",
+      "O(n)",
+      "O(2n)",
+      "O(4n)"
+    ],
+    correctAnswer: 3,
+    explanation: "Most implementations allocate an array of size around 4n."
+  },
+  {
+    question: "Segment Trees are especially useful when:",
+    options: [
+      "There are many range queries and updates",
+      "The array never changes",
+      "Only sorting is required",
+      "Searching strings"
+    ],
+    correctAnswer: 0,
+    explanation: "They efficiently handle frequent updates and range queries."
+  },
+  {
+    question: "Which of the following is NOT a common Segment Tree application?",
+    options: [
+      "Range Minimum Query",
+      "Range Maximum Query",
+      "Range Sum Query",
+      "Breadth-First Search"
+    ],
+    correctAnswer: 3,
+    explanation: "Breadth-First Search is a graph traversal algorithm, not a Segment Tree application."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Segment Tree Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/quiz/trie/page.jsx b/src/app/visualizer/tree/advanced/quiz/trie/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/trie/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/quiz/trie/quiz.jsx b/src/app/visualizer/tree/advanced/quiz/trie/quiz.jsx
new file mode 100644
index 000000000..f17e33eee
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/quiz/trie/quiz.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the primary purpose of a Trie data structure?",
+    options: [
+      "Sorting numbers",
+      "Efficient string storage and searching",
+      "Balancing binary trees",
+      "Graph traversal"
+    ],
+    correctAnswer: 1,
+    explanation: "A Trie is designed for fast storage, searching, and retrieval of strings."
+  },
+  {
+    question: "What does each node in a Trie typically represent?",
+    options: [
+      "A complete word",
+      "A single character",
+      "An integer value",
+      "A subtree"
+    ],
+    correctAnswer: 1,
+    explanation: "Each Trie node stores one character of a word."
+  },
+  {
+    question: "Which operation is especially efficient in a Trie?",
+    options: [
+      "Matrix multiplication",
+      "Prefix searching",
+      "Heap sort",
+      "Graph coloring"
+    ],
+    correctAnswer: 1,
+    explanation: "Tries are ideal for prefix-based searching."
+  },
+  {
+    question: "What is the average time complexity for searching a word of length m in a Trie?",
+    options: [
+      "O(n)",
+      "O(log n)",
+      "O(m)",
+      "O(n log n)"
+    ],
+    correctAnswer: 2,
+    explanation: "Searching depends only on the number of characters in the word."
+  },
+  {
+    question: "Which application commonly uses a Trie?",
+    options: [
+      "Autocomplete suggestions",
+      "Sorting arrays",
+      "Finding shortest paths",
+      "Binary searching"
+    ],
+    correctAnswer: 0,
+    explanation: "Autocomplete systems rely on Trie prefix matching."
+  },
+  {
+    question: "Which flag is commonly stored in Trie nodes?",
+    options: [
+      "visited",
+      "isEndOfWord",
+      "balanced",
+      "height"
+    ],
+    correctAnswer: 1,
+    explanation: "The isEndOfWord flag indicates whether a node marks the end of a valid word."
+  },
+  {
+    question: "Compared to Hash Tables, what is a major advantage of Tries?",
+    options: [
+      "Better prefix searching",
+      "Lower memory usage",
+      "Always faster insertion",
+      "No pointers are required"
+    ],
+    correctAnswer: 0,
+    explanation: "Tries naturally support efficient prefix-based operations."
+  },
+  {
+    question: "What is the time complexity of inserting a word of length m into a Trie?",
+    options: [
+      "O(log m)",
+      "O(m)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 1,
+    explanation: "Insertion processes one character at a time."
+  },
+  {
+    question: "A Trie is also commonly known as:",
+    options: [
+      "Prefix Tree",
+      "AVL Tree",
+      "Heap Tree",
+      "Segment Tree"
+    ],
+    correctAnswer: 0,
+    explanation: "Trie is also called a Prefix Tree."
+  },
+  {
+    question: "Which type of data is best suited for storage in a Trie?",
+    options: [
+      "Integers",
+      "Floating-point values",
+      "Strings",
+      "Matrices"
+    ],
+    correctAnswer: 2,
+    explanation: "Tries are specifically designed for storing and searching strings efficiently."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Trie Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/advanced/red-black/AlgorithmClient.jsx b/src/app/visualizer/tree/advanced/red-black/AlgorithmClient.jsx
new file mode 100644
index 000000000..9efe87c3f
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/red-black/AlgorithmClient.jsx
@@ -0,0 +1,43 @@
+import RedBlackAnimation from "@/app/visualizer/tree/advanced/red-black/animation";
+import RedBlackContent from "@/app/visualizer/tree/advanced/red-black/content";
+import RedBlackCode from "@/app/visualizer/tree/advanced/red-black/codeBlock";
+import RedBlackQuiz from "@/app/visualizer/tree/advanced/red-black/quiz";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+
+
+export default function RedBlackPage() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Advanced Trees", "Red-Black Tree")}
+      title="Red-Black Tree"
+      animation={<RedBlackAnimation />}
+      content={<RedBlackContent />}
+      code={<RedBlackCode />}
+      quiz={<RedBlackQuiz />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.redBlackTree}
+          description="Mark Red-Black Tree as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other Advanced Trees"
+          links={[
+            { text: "B-Trees", url: "./b-trees" },
+            { text: "Trie (Prefix Tree)", url: "./trie" },
+            { text: "Segment Trees", url: "./segment" },
+            { text: "Fenwick Trees", url: "./fenwick" }
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/advanced/red-black/animation.jsx b/src/app/visualizer/tree/advanced/red-black/animation.jsx
new file mode 100644
index 000000000..ce1423b17
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/red-black/animation.jsx
@@ -0,0 +1,260 @@
+"use client";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import {
+  Info,
+  RefreshCw,
+  Plus
+} from "lucide-react";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { RBTree, RBNode, RED, BLACK } from "@/features/algorithms/tree/redBlackTreeLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+// Compute tree layout (x, y coordinates for each node)
+function computeLayout(tree) {
+  const nodes = [];
+  const edges = [];
+  let leafIndex = 0;
+
+  const dfs = (node, depth) => {
+    if (!node || node.id === "NIL") return;
+    node._depth = depth;
+    const leftChild = node.left?.id !== "NIL" ? node.left : null;
+    const rightChild = node.right?.id !== "NIL" ? node.right : null;
+
+    if (!leftChild && !rightChild) {
+      node._x = 60 + leafIndex * 80;
+      leafIndex++;
+    } else {
+      if (leftChild) dfs(leftChild, depth + 1);
+      if (rightChild) dfs(rightChild, depth + 1);
+      const childXs = [];
+      if (leftChild) childXs.push(leftChild._x);
+      if (rightChild) childXs.push(rightChild._x);
+      node._x = childXs.reduce((a, b) => a + b, 0) / childXs.length;
+    }
+    node._y = 60 + depth * 90;
+
+    nodes.push({ id: node.id, value: node.value, color: node.color, x: node._x, y: node._y });
+
+    if (leftChild) edges.push({ x1: node._x, y1: node._y + 20, x2: leftChild._x, y2: leftChild._y - 20, childId: leftChild.id });
+    if (rightChild) edges.push({ x1: node._x, y1: node._y + 20, x2: rightChild._x, y2: rightChild._y - 20, childId: rightChild.id });
+  };
+
+  if (tree.root?.id !== "NIL") dfs(tree.root, 0);
+  return { nodes, edges };
+}
+
+const INITIAL_VALUES = [30, 15, 70, 10, 20, 60, 85];
+
+export default function RedBlackAnimation() {
+  const [displayTree, setDisplayTree] = useState(() => {
+    const t = new RBTree();
+    for (const v of INITIAL_VALUES) {
+      for (const step of t.insertGenerator(v)) {}
+    }
+    return t;
+  });
+  const [inputValue, setInputValue] = useState("");
+  const [steps, setSteps] = useState([]);
+  const [message, setMessage] = useState("Red-Black Tree pre-loaded! Insert values to observe rotations and recoloring.");
+  
+  const [visualState, setVisualState] = useState(null);
+
+  const activeTreeRef = useRef(() => {
+    const t = new RBTree();
+    for (const v of INITIAL_VALUES) {
+      for (const step of t.insertGenerator(v)) {}
+    }
+    return t;
+  });
+
+  useEffect(() => {
+    const t = new RBTree();
+    for (const v of INITIAL_VALUES) {
+      for (const step of t.insertGenerator(v)) {}
+    }
+    activeTreeRef.current = t;
+  }, []);
+
+  const onStep = useCallback((step, idx) => {
+    if (idx === -1) {
+      setVisualState(null);
+      return;
+    }
+    setVisualState(step);
+    if (step.tree) setDisplayTree(step.tree);
+    setMessage(step.explanation || "");
+  }, []);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 1 });
+
+  useVisualizerReset(() => {
+    engine.reset();
+    setMessage("...");
+    setSteps([]);
+    setVisualState(null);
+  });
+
+  const handleReset = () => {
+    engine.reset();
+    const t = new RBTree();
+    for (const v of INITIAL_VALUES) {
+      for (const step of t.insertGenerator(v)) {}
+    }
+    activeTreeRef.current = t;
+    setDisplayTree(t.clone());
+    setSteps([]);
+    setVisualState(null);
+    setInputValue("");
+    setMessage("Tree reset to default. Insert values to observe RB tree balancing.");
+  };
+
+  const triggerInsert = () => {
+    const val = parseInt(inputValue);
+    if (isNaN(val) || val < 1 || val > 999) {
+      setMessage("⚠️ Please enter a valid integer (1-999).");
+      return;
+    }
+    setInputValue("");
+
+    engine.reset();
+    const gen = activeTreeRef.current.insertGenerator(val);
+    const newSteps = Array.from(gen);
+    
+    setSteps(newSteps);
+    if (newSteps.length > 0) {
+      setVisualState(newSteps[0]);
+      setTimeout(() => {
+        engine.play();
+      }, 50);
+    }
+  };
+
+  useVisualizerKeyboard({
+    onStepForward: engine.stepForward,
+    onStepBackward: engine.stepBackward,
+    onTogglePlayPause: engine.isPlaying ? engine.pause : (steps.length > 0 ? engine.play : undefined),
+    onReset: engine.reset,
+    onSpeedChange: (s) => engine.setSpeed(s * 500),
+    speed: engine.speed / 500,
+    sorting: engine.isPlaying,
+    sorted: engine.currentStep >= steps.length - 1 && steps.length > 0,
+    enabled: true,
+  });
+
+  const { nodes, edges } = computeLayout(displayTree);
+  const svgWidth = Math.max(800, nodes.length > 0 ? Math.max(...nodes.map(n => n.x)) + 100 : 800);
+  const svgHeight = Math.max(380, nodes.length > 0 ? Math.max(...nodes.map(n => n.y)) + 60 : 380);
+
+  const highlighted = visualState?.highlighted || {};
+
+  const getNodeStyle = (nodeId, color) => {
+    const state = highlighted[nodeId];
+    if (state === "visiting") return { fill: "#8b5cf6", stroke: "#c084fc", glow: true };
+    if (state === "active")   return { fill: "#10b981", stroke: "#34d399", glow: true };
+    if (state === "matched")  return { fill: "#f59e0b", stroke: "#fbbf24", glow: true };
+    if (color === "RED")      return { fill: "#dc2626", stroke: "#ef4444", glow: false };
+    return { fill: "#0f172a", stroke: "#475569", glow: false }; // BLACK node
+  };
+
+  return (
+    <div className="bg-slate-950 text-slate-100 font-sans p-6 rounded-3xl border border-slate-900 shadow-2xl flex flex-col gap-6 max-w-7xl mx-auto selection:bg-purple-500/30 selection:text-purple-200">
+
+      {/* Control Bar */}
+      <div className="bg-slate-900/60 backdrop-blur-xl border border-slate-800 p-5 rounded-2xl flex flex-col xl:flex-row gap-5 justify-between items-center shadow-lg shadow-black/20">
+        <div className="flex flex-col sm:flex-row gap-3 w-full xl:w-auto items-center">
+          <input
+            type="number"
+            value={inputValue}
+            onChange={e => setInputValue(e.target.value)}
+            placeholder="Value (1-999)"
+            className="w-full sm:w-36 px-3 py-2 text-xs bg-slate-950 border border-slate-800 rounded-xl text-slate-100 placeholder-slate-600 focus:outline-none focus:border-[#a435f0] transition-colors"
+            disabled={engine.isPlaying}
+            onKeyDown={e => e.key === "Enter" && triggerInsert()}
+          />
+          <button onClick={triggerInsert} disabled={engine.isPlaying}
+            className="flex items-center justify-center gap-1.5 px-4 py-2 text-xs font-bold bg-[#a435f0] hover:bg-[#8f2cd6] text-white rounded-xl transition-all shadow-md w-full sm:w-auto">
+            <Plus className="w-3.5 h-3.5" /> Insert
+          </button>
+        </div>
+
+        <div className="w-full xl:w-auto flex justify-center xl:justify-end">
+          <PlaybackControls 
+            isPlaying={engine.isPlaying}
+            onPlayPause={engine.isPlaying ? engine.pause : engine.play}
+            onStepForward={engine.stepForward}
+            onStepBackward={engine.stepBackward}
+            onReset={engine.reset}
+            onClear={handleReset}
+            clearLabel="Clear Tree"
+            speed={engine.speed / 500}
+            onSpeedChange={(s) => engine.setSpeed(s * 500)}
+            disabled={steps.length === 0}
+            showPlayPause={true}
+          />
+        </div>
+      </div>
+
+      {/* Explanation Panel */}
+      <div className="bg-slate-900/40 border border-slate-800/80 rounded-2xl p-4 flex flex-col gap-2">
+        <div className="flex justify-between items-center text-xs">
+          <span className="text-slate-400 font-semibold flex items-center gap-1.5"><Info className="w-3.5 h-3.5 text-red-400" /> Insertion Step Explanation</span>
+          <span className="text-slate-500 font-bold bg-slate-950 px-2.5 py-0.5 rounded-full border border-slate-900">Step {engine.currentStep !== -1 ? engine.currentStep + 1 : 0} / {steps.length || 0}</span>
+        </div>
+        <div className="text-sm font-medium text-red-200/90 leading-relaxed min-h-[40px] flex items-center">{message}</div>
+      </div>
+
+      {/* Legend + SVG Canvas */}
+      <div className="bg-slate-900/30 border border-slate-800 rounded-3xl p-6 relative overflow-hidden min-h-[380px] flex flex-col gap-4">
+        <div className="flex flex-wrap gap-2 text-xs">
+          {[
+            { bg: "bg-red-600 border border-red-400", label: "RED node" },
+            { bg: "bg-slate-900 border border-slate-500", label: "BLACK node" },
+            { bg: "bg-purple-600", label: "Visiting / Being Fixed" },
+            { bg: "bg-emerald-600", label: "Rotated / Active" },
+            { bg: "bg-amber-500", label: "Fixed / Root" },
+          ].map(({ bg, label }) => (
+            <div key={label} className="flex items-center gap-1.5 bg-slate-950/70 border border-slate-800 px-2.5 py-1 rounded-lg">
+              <span className={`w-3 h-3 rounded-full ${bg}`} />
+              <span className="text-slate-400">{label}</span>
+            </div>
+          ))}
+        </div>
+
+        <div className="overflow-auto flex justify-center">
+          <svg width={svgWidth} height={svgHeight} viewBox={`0 0 ${svgWidth} ${svgHeight}`} className="max-w-full h-auto">
+            {edges.map((e, i) => (
+              <line key={i} x1={e.x1} y1={e.y1} x2={e.x2} y2={e.y2}
+                stroke={highlighted[e.childId] ? "#8b5cf6" : "#334155"} strokeWidth={highlighted[e.childId] ? "2.5" : "2"}
+                className="transition-all duration-300" />
+            ))}
+            {nodes.map(node => {
+              const style = getNodeStyle(node.id, node.color);
+              return (
+                <g key={node.id} className="transition-all duration-300">
+                  {style.glow && <circle cx={node.x} cy={node.y} r="28" fill="none" stroke={style.stroke} strokeWidth="1.5" strokeDasharray="4,2" className="opacity-60 animate-pulse" />}
+                  <circle cx={node.x} cy={node.y} r="20" fill={style.fill} stroke={style.stroke} strokeWidth="2.5" className="transition-all duration-300 shadow-xl" />
+                  <text x={node.x} y={node.y + 4.5} textAnchor="middle" className="fill-white dark:fill-slate-800" fontSize="11" fontWeight="bold">{node.value}</text>
+                  <text x={node.x} y={node.y - 26} textAnchor="middle" fill={node.color === "RED" ? "#f87171" : "#64748b"} fontSize="7.5" fontWeight="bold">{node.color}</text>
+                </g>
+              );
+            })}
+            {nodes.length === 0 && (
+              <text x="400" y="180" textAnchor="middle" className="fill-slate-600 dark:fill-slate-400" fontSize="14">Insert a value to start the Red-Black Tree visualization</text>
+            )}
+          </svg>
+        </div>
+
+        {/* RB Properties Reminder */}
+        <div className="absolute bottom-4 right-4 bg-slate-950/90 border border-slate-800 rounded-xl px-3 py-2 text-xs space-y-0.5 max-w-xs">
+          <p className="text-slate-400 font-bold mb-1">RB Tree Rules:</p>
+          <p className="text-slate-500">1. Root is always BLACK</p>
+          <p className="text-slate-500">2. RED node has BLACK children</p>
+          <p className="text-slate-500">3. All paths: equal BLACK height</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/visualizer/tree/advanced/red-black/codeBlock.jsx b/src/app/visualizer/tree/advanced/red-black/codeBlock.jsx
new file mode 100644
index 000000000..1d71ed0d2
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/red-black/codeBlock.jsx
@@ -0,0 +1,361 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for Red-Black Tree ─────────────────────────
+const codeExamples = {
+  javascript: `// Red-Black Tree Implementation
+
+const COLOR={
+    RED:"RED",
+    BLACK:"BLACK"
+};
+
+class Node{
+
+    constructor(
+        data,
+        color=
+        COLOR.RED
+    ){
+
+        this.data=data;
+        this.color=color;
+
+        this.left=null;
+        this.right=null;
+        this.parent=null;
+    }
+}
+
+class RedBlackTree{
+
+    constructor(){
+
+        this.TNULL=
+        new Node(
+        0,
+        COLOR.BLACK
+        );
+
+        this.root=
+        this.TNULL;
+    }
+
+    leftRotate(x){
+
+        let y=
+        x.right;
+
+        x.right=
+        y.left;
+
+        if(
+        y.left!==
+        this.TNULL
+        ){
+
+            y.left.parent=x;
+        }
+
+        y.parent=
+        x.parent;
+
+        if(
+        x.parent===
+        null
+        ){
+
+            this.root=y;
+        }
+
+        else if(
+        x===
+        x.parent.left
+        ){
+
+            x.parent.left=y;
+        }
+
+        else{
+
+            x.parent.right=y;
+        }
+
+        y.left=x;
+
+        x.parent=y;
+    }
+
+    rightRotate(x){
+
+        let y=
+        x.left;
+
+        x.left=
+        y.right;
+
+        if(
+        y.right!==
+        this.TNULL
+        ){
+
+            y.right.parent=x;
+        }
+
+        y.parent=
+        x.parent;
+
+        if(
+        x.parent===
+        null
+        ){
+
+            this.root=y;
+        }
+
+        else if(
+        x===
+        x.parent.right
+        ){
+
+            x.parent.right=y;
+        }
+
+        else{
+
+            x.parent.left=y;
+        }
+
+        y.right=x;
+
+        x.parent=y;
+    }
+}`,
+
+  python: `# Red-Black Tree
+
+class Node:
+
+    def __init__(
+            self,
+            data,
+            color="RED"):
+
+        self.data=data
+        self.color=color
+
+        self.left=None
+        self.right=None
+        self.parent=None
+
+
+class RedBlackTree:
+
+    def __init__(
+            self):
+
+        self.TNULL=
+        Node(
+        0,
+        "BLACK"
+        )
+
+        self.root=
+        self.TNULL
+
+
+    def left_rotate(
+            self,
+            x):
+
+        y=x.right
+
+        x.right=
+        y.left
+
+        if(
+        y.left!=
+        self.TNULL
+        ):
+
+            y.left.parent=x
+
+        y.parent=
+        x.parent
+
+        if(
+        x.parent
+        is None
+        ):
+
+            self.root=y
+
+        elif(
+        x==
+        x.parent.left
+        ):
+
+            x.parent.left=y
+
+        else:
+
+            x.parent.right=y
+
+        y.left=x
+
+        x.parent=y`,
+
+  java: `// Red-Black Tree
+
+class Node{
+
+    int data;
+
+    Node left;
+    Node right;
+    Node parent;
+
+    int color;
+
+    Node(
+        int data){
+
+        this.data=
+        data;
+
+        color=0;
+    }
+}
+
+public class RedBlackTree{
+
+    private Node root;
+
+    private Node TNULL;
+
+    public RedBlackTree(){
+
+        TNULL=
+        new Node(0);
+
+        TNULL.color=1;
+
+        root=TNULL;
+    }
+
+    public void leftRotate(
+            Node x){
+
+        Node y=
+        x.right;
+
+        x.right=
+        y.left;
+
+        if(
+        y.left!=
+        TNULL
+        ){
+
+            y.left.parent=x;
+        }
+
+        y.parent=
+        x.parent;
+
+        if(
+        x.parent==
+        null
+        ){
+
+            root=y;
+        }
+
+        else if(
+        x==
+        x.parent.left
+        ){
+
+            x.parent.left=y;
+        }
+
+        else{
+
+            x.parent.right=y;
+        }
+
+        y.left=x;
+
+        x.parent=y;
+    }
+}`,
+
+  cpp: `// Red-Black Tree
+#include<iostream>
+
+using namespace std;
+
+enum Color{
+    RED,
+    BLACK
+};
+
+struct Node{
+
+    int data;
+
+    Node* parent;
+    Node* left;
+    Node* right;
+
+    Color color;
+};
+
+class RedBlackTree{
+
+private:
+
+    Node* root;
+    Node* TNULL;
+
+public:
+
+    RedBlackTree(){
+
+        TNULL=
+        new Node;
+
+        TNULL->color=
+        BLACK;
+
+        TNULL->left=
+        nullptr;
+
+        TNULL->right=
+        nullptr;
+
+        root=
+        TNULL;
+    }
+};`
+};
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'redBlackTree.js',
+    python:'red_black_tree.py',
+    java:'RedBlackTree.java',
+    cpp:'red_black_tree.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default CodeBlock;
diff --git a/src/app/visualizer/tree/advanced/red-black/content.jsx b/src/app/visualizer/tree/advanced/red-black/content.jsx
new file mode 100644
index 000000000..2c50b42bf
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/red-black/content.jsx
@@ -0,0 +1,112 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+
+const RedBlackContent = () => {
+  return (
+    <main className="max-w-4xl mx-auto mt-8 mb-8">
+      <article className="bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden shadow-sm">
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is a Red-Black Tree?
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed space-y-4">
+            <p>
+              A Red-Black Tree is a specialized self-balancing binary search tree (BST) where each node
+              carries an extra bit representing its color — either Red or Black.
+            </p>
+            <p>
+              These colors are used to keep the tree approximately balanced during insertions and
+              deletions, guaranteeing that search, insertion, and deletion all complete in O(log N)
+              time, even in the worst case.
+            </p>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Five Red-Black Tree Properties
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500">
+              <li><strong>Node Color:</strong> Every node is either Red or Black.</li>
+              <li><strong>Root Property:</strong> The root is always Black.</li>
+              <li><strong>Leaf Property:</strong> Every leaf (NULL sentinel) is Black.</li>
+              <li>
+                <strong>Red Node Property:</strong> If a node is Red, both its children must be
+                Black — no two consecutive Red nodes may appear on any root-to-leaf path.
+              </li>
+              <li>
+                <strong>Black Height Property:</strong> For every node, all simple paths from that
+                node to its descendant leaves contain the same number of Black nodes.
+              </li>
+            </ol>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Balancing Operations
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-4 leading-relaxed">
+            <p>
+              Every new node is inserted as Red. If this violates the RB properties, two operations
+              restore balance:
+            </p>
+            <ol className="space-y-3 list-decimal pl-5">
+              <li>
+                <strong>Rotations (Left or Right):</strong> Structural changes that adjust the local
+                height without breaking the BST ordering.
+              </li>
+              <li>
+                <strong>Recoloring / Color Flips:</strong> Toggling node colors between Red and Black
+                to redistribute Black-height evenly.
+              </li>
+            </ol>
+            <div className="mt-4 grid sm:grid-cols-3 gap-3">
+              {[
+                { case: "Case 1", desc: "Uncle is RED → Recolor parent, uncle, and grandparent. Move z up.", color: "bg-purple-50 dark:bg-purple-950/30 border-purple-200 dark:border-purple-800" },
+                { case: "Case 2", desc: "Uncle is BLACK, z is right child → Left-rotate parent. Convert to Case 3.", color: "bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800" },
+                { case: "Case 3", desc: "Uncle is BLACK, z is left child → Recolor + Right-rotate grandparent. Done.", color: "bg-emerald-50 dark:bg-emerald-950/30 border-emerald-200 dark:border-emerald-800" },
+              ].map(({ case: c, desc, color }) => (
+                <div key={c} className={`p-4 rounded-xl border ${color}`}>
+                  <p className="font-bold text-sm mb-1 text-[#1a1a1a] dark:text-white">{c}</p>
+                  <p className="text-xs text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">{desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <section className="p-6">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <ul className="space-y-2 font-mono text-sm bg-gray-50 dark:bg-[#1b1b1b] p-4 rounded-xl border border-gray-200 dark:border-gray-800">
+              <li>Insertion Time: O(log N)</li>
+              <li>Deletion Time: O(log N)</li>
+              <li>Search Time: O(log N)</li>
+              <li>Space Complexity: O(N)</li>
+            </ul>
+            <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => Math.log2(n + 1)}
+                averageCase={(n) => Math.log2(n + 1)}
+                worstCase={(n) => Math.log2(n + 1) * 2}
+                maxN={50}
+              />
+            </div>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+};
+
+export default RedBlackContent;
diff --git a/src/app/visualizer/tree/advanced/red-black/quiz.jsx b/src/app/visualizer/tree/advanced/red-black/quiz.jsx
new file mode 100644
index 000000000..877c9d03a
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/red-black/quiz.jsx
@@ -0,0 +1,34 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const RedBlackQuiz = () => {
+  const questions = [
+    {
+      question: "Which of the following is NOT a property of a Red-Black Tree?",
+      options: [
+        "The root node is always Black.",
+        "A Red node must have Black children.",
+        "The black height from any node to its descendant leaves varies.",
+        "NIL leaf nodes are colored Black."
+      ],
+      correctAnswer: 2,
+      explanation: "By property, the black height from any node to its descendant leaves must be exactly the same, ensuring balanced paths."
+    },
+    {
+      question: "What is the maximum height of a Red-Black tree containing N keys?",
+      options: [
+        "O(N)",
+        "O(log N)",
+        "O(N log N)",
+        "O(1)"
+      ],
+      correctAnswer: 1,
+      explanation: "Even in the worst case (alternating red and black nodes), the height of a Red-Black tree is guaranteed to be bounded by O(log N)."
+    }
+  ];
+
+  return <QuizEngine title="Red-Black Tree Quiz" questions={questions} />;
+};
+
+export default RedBlackQuiz;
diff --git a/src/app/visualizer/tree/advanced/segment-2d/AlgorithmClient.jsx b/src/app/visualizer/tree/advanced/segment-2d/AlgorithmClient.jsx
new file mode 100644
index 000000000..4f513be02
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/segment-2d/AlgorithmClient.jsx
@@ -0,0 +1,42 @@
+import Segment2DAnimation from "@/app/visualizer/tree/advanced/segment-2d/animation";
+import Segment2DContent from "@/app/visualizer/tree/advanced/segment-2d/content";
+import Segment2DCode from "@/app/visualizer/tree/advanced/segment-2d/codeBlock";
+import Segment2DQuiz from "@/app/visualizer/tree/advanced/segment-2d/quiz";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+export default function SegmentTree2DPage() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Advanced Trees", "2D Segment Trees")}
+      title="2D Segment Trees"
+      animation={<Segment2DAnimation />}
+      content={<Segment2DContent />}
+      code={<Segment2DCode />}
+      quiz={<Segment2DQuiz />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.segmentTree2D}
+          description="Mark 2D Segment Tree as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other Advanced Trees"
+          links={[
+            { text: "Segment Trees (1D)", url: "./segment" },
+            { text: "Red-Black Trees", url: "./red-black" },
+            { text: "B-Trees", url: "./b-trees" },
+            { text: "Trie (Prefix Tree)", url: "./trie" },
+            { text: "Fenwick Trees", url: "./fenwick" }
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/advanced/segment-2d/animation.jsx b/src/app/visualizer/tree/advanced/segment-2d/animation.jsx
new file mode 100644
index 000000000..09fa80efb
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/segment-2d/animation.jsx
@@ -0,0 +1,787 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import { Play, Pause, ChevronLeft, ChevronRight, RotateCcw, AlertCircle } from "lucide-react";
+import { VisualizerCard } from "@/app/visualizer/components/VisualizerInteractiveLayout";
+
+const INITIAL_MATRIX = [
+  [3, 8, 4, 1],
+  [5, 2, 9, 6],
+  [7, 3, 2, 8],
+  [4, 6, 5, 3]
+];
+
+export default function Segment2DAnimation() {
+  const [matrix, setMatrix] = useState(() => INITIAL_MATRIX.map(row => [...row]));
+  const [mode, setMode] = useState("query"); // "query" | "update"
+  
+  // Input fields
+  const [qR1, setQR1] = useState("1");
+  const [qR2, setQR2] = useState("3");
+  const [qC1, setQC1] = useState("1");
+  const [qC2, setQC2] = useState("3");
+  
+  const [upR, setUpR] = useState("2");
+  const [upC, setUpC] = useState("2");
+  const [upVal, setUpVal] = useState("10");
+
+  const [steps, setSteps] = useState([]);
+  const [currentStepIdx, setCurrentStepIdx] = useState(-1);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [speed, setSpeed] = useState(1500); // ms per step
+  const [errorMessage, setErrorMessage] = useState("");
+  const playTimerRef = useRef(null);
+
+  // Playback timer effect
+  useEffect(() => {
+    if (isPlaying) {
+      playTimerRef.current = setInterval(() => {
+        setCurrentStepIdx(prev => {
+          if (prev < steps.length - 1) {
+            return prev + 1;
+          } else {
+            setIsPlaying(false);
+            return prev;
+          }
+        });
+      }, speed);
+    } else {
+      if (playTimerRef.current) clearInterval(playTimerRef.current);
+    }
+    return () => {
+      if (playTimerRef.current) clearInterval(playTimerRef.current);
+    };
+  }, [isPlaying, steps, speed]);
+
+  const handleStepForward = () => {
+    setIsPlaying(false);
+    if (currentStepIdx < steps.length - 1) {
+      setCurrentStepIdx(currentStepIdx + 1);
+    }
+  };
+
+  const handleStepBackward = () => {
+    setIsPlaying(false);
+    if (currentStepIdx > 0) {
+      setCurrentStepIdx(currentStepIdx - 1);
+    }
+  };
+
+  const handleReset = () => {
+    setIsPlaying(false);
+    setCurrentStepIdx(-1);
+    setSteps([]);
+    setErrorMessage("");
+    setMatrix(INITIAL_MATRIX.map(row => [...row]));
+  };
+
+  // Range Query Step Generator
+  const generateQuerySteps = (r1, r2, c1, c2) => {
+    const generatedSteps = [];
+    let accumulatedSum = 0;
+
+    // Define outer row segment tree nodes
+    // Node struct: { id, rStart, rEnd, label }
+    const outerNodes = [
+      { id: 0, rStart: 0, rEnd: 3, label: "Rows 0-3" },
+      { id: 1, rStart: 0, rEnd: 1, label: "Rows 0-1" },
+      { id: 2, rStart: 2, rEnd: 3, label: "Rows 2-3" },
+      { id: 3, rStart: 0, rEnd: 0, label: "Row 0" },
+      { id: 4, rStart: 1, rEnd: 1, label: "Row 1" },
+      { id: 5, rStart: 2, rEnd: 2, label: "Row 2" },
+      { id: 6, rStart: 3, rEnd: 3, label: "Row 3" }
+    ];
+
+    const innerNodes = [
+      { id: 0, cStart: 0, cEnd: 3, label: "Cols 0-3" },
+      { id: 1, cStart: 0, cEnd: 1, label: "Cols 0-1" },
+      { id: 2, cStart: 2, cEnd: 3, label: "Cols 2-3" },
+      { id: 3, cStart: 0, cEnd: 0, label: "Col 0" },
+      { id: 4, cStart: 1, cEnd: 1, label: "Col 1" },
+      { id: 5, cStart: 2, cEnd: 2, label: "Col 2" },
+      { id: 6, cStart: 3, cEnd: 3, label: "Col 3" }
+    ];
+
+    // Helper to calculate segment sum for a row range and col range directly from current matrix
+    const getGridSum = (rs, re, cs, ce) => {
+      let sum = 0;
+      for (let r = rs; r <= re; r++) {
+        for (let c = cs; c <= ce; c++) {
+          sum += matrix[r][c];
+        }
+      }
+      return sum;
+    };
+
+    // Helper to record cells highlighted in various colors
+    const getCellsMap = (rs, re, cs, ce, status) => {
+      const map = {};
+      for (let r = rs; r <= re; r++) {
+        for (let c = cs; c <= ce; c++) {
+          map[`${r}-${c}`] = status;
+        }
+      }
+      return map;
+    };
+
+    generatedSteps.push({
+      explanation: `Initializing 2D Range Query for subgrid Row [${r1}, ${r2}], Col [${c1}, ${c2}]. Start traversal at outer root node (Rows 0-3).`,
+      outerHighlight: { 0: "visiting" },
+      innerHighlight: {},
+      highlightedCells: {},
+      currentSum: 0,
+      activeRowNode: 0,
+      activeColNode: null
+    });
+
+    const traverseRow = (rowNodeId) => {
+      const node = outerNodes.find(n => n.id === rowNodeId);
+      if (!node) return;
+
+      const { rStart, rEnd, label } = node;
+
+      // Check overlap of [rStart, rEnd] and query range [r1, r2]
+      if (rEnd < r1 || rStart > r2) {
+        // No overlap
+        generatedSteps.push({
+          explanation: `Outer node ${label} does not overlap with query row range [${r1}, ${r2}]. Skipping subtree.`,
+          outerHighlight: { [rowNodeId]: "inactive" },
+          innerHighlight: {},
+          highlightedCells: {},
+          currentSum: accumulatedSum,
+          activeRowNode: rowNodeId,
+          activeColNode: null
+        });
+        return;
+      }
+
+      if (r1 <= rStart && rEnd <= r2) {
+        // Total overlap: trigger inner column tree query for this outer row node
+        generatedSteps.push({
+          explanation: `Outer node ${label} is fully inside query row range [${r1}, ${r2}]. Initiating inner column tree traversal for this node.`,
+          outerHighlight: { [rowNodeId]: "matched" },
+          innerHighlight: { 0: "visiting" },
+          highlightedCells: getCellsMap(rStart, rEnd, 0, 3, "active"),
+          currentSum: accumulatedSum,
+          activeRowNode: rowNodeId,
+          activeColNode: 0
+        });
+
+        const traverseCol = (colNodeId) => {
+          const colNode = innerNodes.find(n => n.id === colNodeId);
+          if (!colNode) return;
+
+          const { cStart, cEnd, label: colLabel } = colNode;
+
+          if (cEnd < c1 || cStart > c2) {
+            // No overlap
+            generatedSteps.push({
+              explanation: `Inner column node ${colLabel} does not overlap with query column range [${c1}, ${c2}]. Skipping column subtree.`,
+              outerHighlight: { [rowNodeId]: "matched" },
+              innerHighlight: { [colNodeId]: "inactive" },
+              highlightedCells: getCellsMap(rStart, rEnd, cStart, cEnd, "inactive"),
+              currentSum: accumulatedSum,
+              activeRowNode: rowNodeId,
+              activeColNode: colNodeId
+            });
+            return;
+          }
+
+          if (c1 <= cStart && cEnd <= qC2) {
+            // Total overlap of column node
+            const segmentVal = getGridSum(rStart, rEnd, cStart, cEnd);
+            accumulatedSum += segmentVal;
+
+            generatedSteps.push({
+              explanation: `Inner column node ${colLabel} is fully inside query column range [${c1}, ${c2}]. Adding segment value of ${segmentVal} to sum.`,
+              outerHighlight: { [rowNodeId]: "matched" },
+              innerHighlight: { [colNodeId]: "matched" },
+              highlightedCells: getCellsMap(rStart, rEnd, cStart, cEnd, "matched"),
+              currentSum: accumulatedSum,
+              activeRowNode: rowNodeId,
+              activeColNode: colNodeId
+            });
+            return;
+          }
+
+          // Partial overlap of column node: traverse children
+          generatedSteps.push({
+            explanation: `Inner column node ${colLabel} partially overlaps column range [${c1}, ${c2}]. Splitting into children.`,
+            outerHighlight: { [rowNodeId]: "matched" },
+            innerHighlight: { [colNodeId]: "visiting" },
+            highlightedCells: getCellsMap(rStart, rEnd, cStart, cEnd, "active"),
+            currentSum: accumulatedSum,
+            activeRowNode: rowNodeId,
+            activeColNode: colNodeId
+          });
+
+          const mid = Math.floor((cStart + cEnd) / 2);
+          traverseCol(2 * colNodeId + 1);
+          traverseCol(2 * colNodeId + 2);
+        };
+
+        traverseCol(0);
+        return;
+      }
+
+      // Partial overlap: split row range
+      generatedSteps.push({
+        explanation: `Outer row node ${label} partially overlaps query row range [${r1}, ${r2}]. Splitting into left and right row subtrees.`,
+        outerHighlight: { [rowNodeId]: "visiting" },
+        innerHighlight: {},
+        highlightedCells: {},
+        currentSum: accumulatedSum,
+        activeRowNode: rowNodeId,
+        activeColNode: null
+      });
+
+      traverseRow(2 * rowNodeId + 1);
+      traverseRow(2 * rowNodeId + 2);
+    };
+
+    traverseRow(0);
+
+    generatedSteps.push({
+      explanation: `2D Range Query finished! Final accumulated subgrid sum is: ${accumulatedSum}`,
+      outerHighlight: {},
+      innerHighlight: {},
+      highlightedCells: getCellsMap(r1, r2, c1, c2, "matched"),
+      currentSum: accumulatedSum,
+      activeRowNode: null,
+      activeColNode: null,
+      isFinal: true
+    });
+
+    return generatedSteps;
+  };
+
+  // Point Update Step Generator
+  const generateUpdateSteps = (uRow, uCol, uValue) => {
+    const generatedSteps = [];
+    const tempMatrix = matrix.map(row => [...row]);
+
+    // Visited outer/inner nodes trace
+    // Walk down the row tree to row uRow
+    // Outer nodes matching the path
+    const rowPath = [];
+    let rNode = 0;
+    let rS = 0, rE = 3;
+    rowPath.push({ id: rNode, rS, rE });
+    while (rS < rE) {
+      let mid = Math.floor((rS + rE) / 2);
+      if (uRow <= mid) {
+        rNode = 2 * rNode + 1;
+        rE = mid;
+      } else {
+        rNode = 2 * rNode + 2;
+        rS = mid + 1;
+      }
+      rowPath.push({ id: rNode, rStart: rS, rEnd: rE });
+    }
+
+    generatedSteps.push({
+      explanation: `Initializing Point Update. First, traverse down the outer row tree to find the leaf node for Row ${uRow}. Path: Row Nodes ${rowPath.map(p => `[${p.rS !== undefined ? p.rS : p.rStart}-${p.rE !== undefined ? p.rE : p.rEnd}]`).join(" → ")}.`,
+      outerHighlight: rowPath.reduce((acc, p) => ({ ...acc, [p.id]: "visiting" }), {}),
+      innerHighlight: {},
+      highlightedCells: { [`${uRow}-${uCol}`]: "active" },
+      activeRowNode: rNode,
+      activeColNode: null,
+      matrixState: tempMatrix.map(row => [...row])
+    });
+
+    // We update the column tree of the leaf row
+    const colPath = [];
+    let cNode = 0;
+    let cS = 0, cE = 3;
+    colPath.push({ id: cNode, cS, cE });
+    while (cS < cE) {
+      let mid = Math.floor((cS + cE) / 2);
+      if (uCol <= mid) {
+        cNode = 2 * cNode + 1;
+        cE = mid;
+      } else {
+        cNode = 2 * cNode + 2;
+        cS = mid + 1;
+      }
+      colPath.push({ id: cNode, cS, cE });
+    }
+
+    generatedSteps.push({
+      explanation: `Row leaf found. Now traverse down its inner column tree to find the leaf node for Col ${uCol}. Path: Col Nodes ${colPath.map(p => `[${p.cS}-${p.cE}]`).join(" → ")}.`,
+      outerHighlight: { [rNode]: "matched" },
+      innerHighlight: colPath.reduce((acc, p) => ({ ...acc, [p.id]: "visiting" }), {}),
+      highlightedCells: { [`${uRow}-${uCol}`]: "active" },
+      activeRowNode: rNode,
+      activeColNode: cNode,
+      matrixState: tempMatrix.map(row => [...row])
+    });
+
+    // Update leaf value
+    tempMatrix[uRow][uCol] = uValue;
+    generatedSteps.push({
+      explanation: `Updating cell (${uRow}, ${uCol}) value from ${matrix[uRow][uCol]} to ${uValue} in the leaf row tree.`,
+      outerHighlight: { [rNode]: "matched" },
+      innerHighlight: { [cNode]: "matched" },
+      highlightedCells: { [`${uRow}-${uCol}`]: "matched" },
+      activeRowNode: rNode,
+      activeColNode: cNode,
+      matrixState: tempMatrix.map(row => [...row])
+    });
+
+    // Recalculate inner ancestors for this row tree node
+    generatedSteps.push({
+      explanation: `Recalculate parent nodes in the inner column tree of Row ${uRow} bottom-up by combining child values.`,
+      outerHighlight: { [rNode]: "matched" },
+      innerHighlight: colPath.reduce((acc, p) => ({ ...acc, [p.id]: "matched" }), {}),
+      highlightedCells: { [`${uRow}-${uCol}`]: "matched" },
+      activeRowNode: rNode,
+      activeColNode: 0,
+      matrixState: tempMatrix.map(row => [...row])
+    });
+
+    // Recalculate outer row ancestors bottom-up
+    // Walk back up the row tree, updating the column trees at index uCol
+    for (let i = rowPath.length - 2; i >= 0; i--) {
+      const ancestorRow = rowPath[i];
+      generatedSteps.push({
+        explanation: `Propagating point update to outer row tree ancestor node [${ancestorRow.rS !== undefined ? ancestorRow.rS : ancestorRow.rStart}-${ancestorRow.rE !== undefined ? ancestorRow.rE : ancestorRow.rEnd}]. Recalculating its column tree node for Col ${uCol} by combining its children row trees' column values.`,
+        outerHighlight: { [ancestorRow.id]: "visiting", [rowPath[i+1].id]: "matched" },
+        innerHighlight: { 0: "visiting" },
+        highlightedCells: { [`${uRow}-${uCol}`]: "active" },
+        activeRowNode: ancestorRow.id,
+        activeColNode: 0,
+        matrixState: tempMatrix.map(row => [...row])
+      });
+    }
+
+    generatedSteps.push({
+      explanation: `Point update complete! Matrix values successfully updated in all containing 2D Segment Tree segments.`,
+      outerHighlight: {},
+      innerHighlight: {},
+      highlightedCells: { [`${uRow}-${uCol}`]: "matched" },
+      activeRowNode: null,
+      activeColNode: null,
+      matrixState: tempMatrix.map(row => [...row]),
+      isFinal: true
+    });
+
+    return generatedSteps;
+  };
+
+  const handleRunQuery = () => {
+    setErrorMessage("");
+    const r1 = parseInt(qR1);
+    const r2 = parseInt(qR2);
+    const c1 = parseInt(qC1);
+    const c2 = parseInt(qC2);
+
+    if (isNaN(r1) || isNaN(r2) || isNaN(c1) || isNaN(c2) ||
+        r1 < 0 || r1 > 3 || r2 < 0 || r2 > 3 || r1 > r2 ||
+        c1 < 0 || c1 > 3 || c2 < 0 || c2 > 3 || c1 > c2) {
+      setErrorMessage("Please check indices. They must be between 0 and 3, with Start <= End.");
+      return;
+    }
+
+    const newSteps = generateQuerySteps(r1, r2, c1, c2);
+    setSteps(newSteps);
+    setCurrentStepIdx(0);
+    setIsPlaying(true);
+  };
+
+  const handleRunUpdate = () => {
+    setErrorMessage("");
+    const r = parseInt(upR);
+    const c = parseInt(upC);
+    const val = parseInt(upVal);
+
+    if (isNaN(r) || isNaN(c) || isNaN(val) || r < 0 || r > 3 || c < 0 || c > 3) {
+      setErrorMessage("Indices must be between 0 and 3.");
+      return;
+    }
+
+    const newSteps = generateUpdateSteps(r, c, val);
+    setSteps(newSteps);
+    setCurrentStepIdx(0);
+    setIsPlaying(true);
+  };
+
+  // Retrieve current step variables
+  const currentStep = currentStepIdx >= 0 && currentStepIdx < steps.length ? steps[currentStepIdx] : null;
+  const explanation = currentStep ? currentStep.explanation : "Click Run to start visualizing the 2D Segment Tree operations.";
+  const highlightedCells = currentStep ? currentStep.highlightedCells : {};
+  const outerHighlight = currentStep ? currentStep.outerHighlight : {};
+  const innerHighlight = currentStep ? currentStep.innerHighlight : {};
+  const currentSum = currentStep && currentStep.currentSum !== undefined ? currentStep.currentSum : 0;
+  const currentMatrix = currentStep && currentStep.matrixState ? currentStep.matrixState : matrix;
+
+  // Apply matrix state modification when update completes
+  useEffect(() => {
+    if (currentStep && currentStep.isFinal && mode === "update" && currentStep.matrixState) {
+      setMatrix(currentStep.matrixState.map(row => [...row]));
+    }
+  }, [currentStepIdx]);
+
+  // Color functions
+  const getCellClassName = (r, c) => {
+    const key = `${r}-${c}`;
+    const status = highlightedCells[key];
+    if (status === "active") return "bg-purple-100 dark:bg-purple-950/40 border-purple-500 border-2 font-bold text-purple-700 dark:text-purple-300";
+    if (status === "matched") return "bg-emerald-100 dark:bg-emerald-950/40 border-emerald-500 border-2 font-bold text-emerald-700 dark:text-emerald-300";
+    if (status === "inactive") return "opacity-40 bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-800";
+    return "bg-white dark:bg-[#181818] border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 text-gray-800 dark:text-gray-200";
+  };
+
+  return (
+    <VisualizerCard className="w-full flex flex-col gap-6">
+      
+      {/* Tab controls */}
+      <div className="flex border-b border-[#e5e7eb] dark:border-[#222]">
+        <button
+          onClick={() => { setMode("query"); handleReset(); }}
+          className={`px-6 py-3 font-semibold transition-all border-b-2 text-sm ${
+            mode === "query"
+              ? "border-[#a435f0] text-[#a435f0] dark:text-[#d38cff]"
+              : "border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+          }`}
+        >
+          2D Range Query
+        </button>
+        <button
+          onClick={() => { setMode("update"); handleReset(); }}
+          className={`px-6 py-3 font-semibold transition-all border-b-2 text-sm ${
+            mode === "update"
+              ? "border-[#a435f0] text-[#a435f0] dark:text-[#d38cff]"
+              : "border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+          }`}
+        >
+          Point Update
+        </button>
+      </div>
+
+      {/* Input controller */}
+      <div className="flex flex-wrap gap-4 items-center justify-between p-4 bg-gray-50 dark:bg-[#1b1b1b] rounded-2xl border border-gray-150 dark:border-gray-800">
+        {mode === "query" ? (
+          <div className="flex flex-wrap items-center gap-3 text-sm">
+            <span className="font-semibold text-gray-700 dark:text-gray-300">Subgrid Rows:</span>
+            <input
+              type="number"
+              min="0"
+              max="3"
+              value={qR1}
+              onChange={e => setQR1(e.target.value)}
+              className="w-14 rounded-lg border p-1.5 text-center focus:outline-none focus:ring-2 focus:ring-[#a435f0] dark:bg-[#222] dark:border-gray-700"
+              placeholder="R1"
+            />
+            <span className="text-gray-500">to</span>
+            <input
+              type="number"
+              min="0"
+              max="3"
+              value={qR2}
+              onChange={e => setQR2(e.target.value)}
+              className="w-14 rounded-lg border p-1.5 text-center focus:outline-none focus:ring-2 focus:ring-[#a435f0] dark:bg-[#222] dark:border-gray-700"
+              placeholder="R2"
+            />
+
+            <span className="font-semibold text-gray-700 dark:text-gray-300 ml-4">Cols:</span>
+            <input
+              type="number"
+              min="0"
+              max="3"
+              value={qC1}
+              onChange={e => setQC1(e.target.value)}
+              className="w-14 rounded-lg border p-1.5 text-center focus:outline-none focus:ring-2 focus:ring-[#a435f0] dark:bg-[#222] dark:border-gray-700"
+              placeholder="C1"
+            />
+            <span className="text-gray-500">to</span>
+            <input
+              type="number"
+              min="0"
+              max="3"
+              value={qC2}
+              onChange={e => setQC2(e.target.value)}
+              className="w-14 rounded-lg border p-1.5 text-center focus:outline-none focus:ring-2 focus:ring-[#a435f0] dark:bg-[#222] dark:border-gray-700"
+              placeholder="C2"
+            />
+
+            <button
+              onClick={handleRunQuery}
+              className="ml-4 rounded-xl bg-[#a435f0] px-5 py-2 text-white font-semibold transition hover:bg-[#8f2cd6]"
+            >
+              Run Query
+            </button>
+          </div>
+        ) : (
+          <div className="flex flex-wrap items-center gap-3 text-sm">
+            <span className="font-semibold text-gray-700 dark:text-gray-300">Cell:</span>
+            <input
+              type="number"
+              min="0"
+              max="3"
+              value={upR}
+              onChange={e => setUpR(e.target.value)}
+              className="w-14 rounded-lg border p-1.5 text-center focus:outline-none focus:ring-2 focus:ring-[#a435f0] dark:bg-[#222] dark:border-gray-700"
+              placeholder="Row"
+            />
+            <span className="text-gray-500">,</span>
+            <input
+              type="number"
+              min="0"
+              max="3"
+              value={upC}
+              onChange={e => setUpC(e.target.value)}
+              className="w-14 rounded-lg border p-1.5 text-center focus:outline-none focus:ring-2 focus:ring-[#a435f0] dark:bg-[#222] dark:border-gray-700"
+              placeholder="Col"
+            />
+
+            <span className="font-semibold text-gray-700 dark:text-gray-300 ml-4">New Value:</span>
+            <input
+              type="number"
+              value={upVal}
+              onChange={e => setUpVal(e.target.value)}
+              className="w-20 rounded-lg border p-1.5 text-center focus:outline-none focus:ring-2 focus:ring-[#a435f0] dark:bg-[#222] dark:border-gray-700"
+              placeholder="Val"
+            />
+
+            <button
+              onClick={handleRunUpdate}
+              className="ml-4 rounded-xl bg-[#a435f0] px-5 py-2 text-white font-semibold transition hover:bg-[#8f2cd6]"
+            >
+              Run Update
+            </button>
+          </div>
+        )}
+
+        <button
+          onClick={handleReset}
+          className="rounded-xl border border-gray-300 dark:border-gray-700 px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 text-sm font-semibold transition"
+        >
+          Reset
+        </button>
+      </div>
+
+      {errorMessage && (
+        <div className="flex items-center gap-2 text-red-500 bg-red-50 dark:bg-red-950/20 p-3 rounded-xl text-sm">
+          <AlertCircle size={18} />
+          <span>{errorMessage}</span>
+        </div>
+      )}
+
+      {/* Main split-screen visualizer */}
+      <div className="grid md:grid-cols-2 gap-8 items-start">
+        
+        {/* Left Side: 2D Matrix Grid */}
+        <div className="flex flex-col gap-4">
+          <h3 className="font-bold text-[#1a1a1a] dark:text-white text-base">4 × 4 Grid Matrix</h3>
+          <div className="grid grid-cols-4 gap-2 w-full max-w-[320px] mx-auto md:mx-0">
+            {currentMatrix.map((row, rIdx) =>
+              row.map((val, cIdx) => (
+                <div
+                  key={`${rIdx}-${cIdx}`}
+                  className={`aspect-square flex flex-col items-center justify-center border-2 rounded-xl text-lg font-bold transition-all duration-300 ${getCellClassName(rIdx, cIdx)}`}
+                >
+                  <span className="text-xs font-normal text-gray-400 dark:text-gray-500">({rIdx},{cIdx})</span>
+                  <span>{val}</span>
+                </div>
+              ))
+            )}
+          </div>
+
+          {mode === "query" && (
+            <div className="mt-4 p-4 bg-purple-50 dark:bg-purple-950/20 rounded-xl border border-purple-100 dark:border-purple-900/30 text-sm">
+              <div className="flex justify-between items-center font-bold text-gray-800 dark:text-gray-200">
+                <span>Accumulated Subgrid Sum:</span>
+                <span className="text-xl text-[#a435f0] dark:text-[#d38cff]">{currentSum}</span>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Right Side: Tree of Trees Segment Tree Structure Visualization */}
+        <div className="flex flex-col gap-6">
+          <h3 className="font-bold text-[#1a1a1a] dark:text-white text-base">
+            Tree of Trees Representation
+          </h3>
+
+          <div className="flex flex-col gap-4">
+            {/* Outer Row Tree */}
+            <div className="bg-gray-50 dark:bg-[#161616] p-4 rounded-2xl border border-gray-150 dark:border-gray-800">
+              <p className="text-xs font-bold text-gray-400 dark:text-gray-500 mb-2 uppercase tracking-wide">
+                Outer Row Tree (Segments rows)
+              </p>
+              <div className="flex justify-center">
+                <svg width="300" height="120" className="overflow-visible">
+                  {/* Edges */}
+                  <line x1="150" y1="20" x2="80" y2="60" stroke="#94a3b8" strokeWidth="1.5" />
+                  <line x1="150" y1="20" x2="220" y2="60" stroke="#94a3b8" strokeWidth="1.5" />
+                  <line x1="80" y1="60" x2="40" y2="100" stroke="#94a3b8" strokeWidth="1.5" />
+                  <line x1="80" y1="60" x2="120" y2="100" stroke="#94a3b8" strokeWidth="1.5" />
+                  <line x1="220" y1="60" x2="180" y2="100" stroke="#94a3b8" strokeWidth="1.5" />
+                  <line x1="220" y1="60" x2="260" y2="100" stroke="#94a3b8" strokeWidth="1.5" />
+
+                  {/* Nodes */}
+                  {[
+                    { id: 0, x: 150, y: 20, txt: "[0-3]" },
+                    { id: 1, x: 80, y: 60, txt: "[0-1]" },
+                    { id: 2, x: 220, y: 60, txt: "[2-3]" },
+                    { id: 3, x: 40, y: 100, txt: "[0]" },
+                    { id: 4, x: 120, y: 100, txt: "[1]" },
+                    { id: 5, x: 180, y: 100, txt: "[2]" },
+                    { id: 6, x: 260, y: 100, txt: "[3]" }
+                  ].map(n => {
+                    const status = outerHighlight[n.id];
+                    let fill = "var(--background, #fff)";
+                    let stroke = "#64748b";
+                    let textWeight = "font-medium";
+                    if (status === "visiting") { fill = "#c084fc"; stroke = "#a435f0"; textWeight = "font-bold"; }
+                    else if (status === "matched") { fill = "#34d399"; stroke = "#10b981"; textWeight = "font-bold"; }
+                    else if (status === "inactive") { fill = "#e2e8f0"; stroke = "#cbd5e1"; }
+
+                    return (
+                      <g key={n.id}>
+                        <circle cx={n.x} cy={n.y} r="16" fill={fill} stroke={stroke} strokeWidth="2" className="transition-all duration-300" />
+                        <text x={n.x} y={n.y + 4} textAnchor="middle" fontSize="10" className={`fill-gray-800 dark:fill-gray-250 ${textWeight}`}>
+                          {n.txt}
+                        </text>
+                      </g>
+                    );
+                  })}
+                </svg>
+              </div>
+            </div>
+
+            {/* Inner Column Tree */}
+            <div className="bg-gray-50 dark:bg-[#161616] p-4 rounded-2xl border border-gray-150 dark:border-gray-800 min-h-[160px] flex flex-col justify-between">
+              <div>
+                <p className="text-xs font-bold text-gray-400 dark:text-gray-500 mb-1 uppercase tracking-wide">
+                  Inner Column Tree (Segment cols for active row node)
+                </p>
+                <p className="text-[11px] text-gray-500 dark:text-gray-400 mb-2">
+                  {currentStep && currentStep.activeRowNode !== null 
+                    ? `Showing columns tree for Row node [${currentStep.activeRowNode === 0 ? "0-3" : currentStep.activeRowNode === 1 ? "0-1" : currentStep.activeRowNode === 2 ? "2-3" : currentStep.activeRowNode === 3 ? "0" : currentStep.activeRowNode === 4 ? "1" : currentStep.activeRowNode === 5 ? "2" : "3"}]`
+                    : "No active row node. Start/step the query to view."}
+                </p>
+              </div>
+
+              {currentStep && currentStep.activeRowNode !== null ? (
+                <div className="flex justify-center transition-all duration-350">
+                  <svg width="300" height="120" className="overflow-visible">
+                    {/* Edges */}
+                    <line x1="150" y1="20" x2="80" y2="60" stroke="#94a3b8" strokeWidth="1.5" />
+                    <line x1="150" y1="20" x2="220" y2="60" stroke="#94a3b8" strokeWidth="1.5" />
+                    <line x1="80" y1="60" x2="40" y2="100" stroke="#94a3b8" strokeWidth="1.5" />
+                    <line x1="80" y1="60" x2="120" y2="100" stroke="#94a3b8" strokeWidth="1.5" />
+                    <line x1="220" y1="60" x2="180" y2="100" stroke="#94a3b8" strokeWidth="1.5" />
+                    <line x1="220" y1="60" x2="260" y2="100" stroke="#94a3b8" strokeWidth="1.5" />
+
+                    {/* Nodes */}
+                    {[
+                      { id: 0, x: 150, y: 20, txt: "[0-3]" },
+                      { id: 1, x: 80, y: 60, txt: "[0-1]" },
+                      { id: 2, x: 220, y: 60, txt: "[2-3]" },
+                      { id: 3, x: 40, y: 100, txt: "[0]" },
+                      { id: 4, x: 120, y: 100, txt: "[1]" },
+                      { id: 5, x: 180, y: 100, txt: "[2]" },
+                      { id: 6, x: 260, y: 100, txt: "[3]" }
+                    ].map(n => {
+                      const status = innerHighlight[n.id];
+                      let fill = "var(--background, #fff)";
+                      let stroke = "#64748b";
+                      let textWeight = "font-medium";
+                      if (status === "visiting") { fill = "#c084fc"; stroke = "#a435f0"; textWeight = "font-bold"; }
+                      else if (status === "matched") { fill = "#34d399"; stroke = "#10b981"; textWeight = "font-bold"; }
+                      else if (status === "inactive") { fill = "#e2e8f0"; stroke = "#cbd5e1"; }
+
+                      return (
+                        <g key={n.id}>
+                          <circle cx={n.x} cy={n.y} r="16" fill={fill} stroke={stroke} strokeWidth="2" className="transition-all duration-300" />
+                          <text x={n.x} y={n.y + 4} textAnchor="middle" fontSize="10" className={`fill-gray-800 dark:fill-gray-250 ${textWeight}`}>
+                            {n.txt}
+                          </text>
+                        </g>
+                      );
+                    })}
+                  </svg>
+                </div>
+              ) : (
+                <div className="flex-1 flex items-center justify-center border-2 border-dashed border-gray-200 dark:border-gray-800 rounded-xl py-8">
+                  <span className="text-gray-400 text-xs">Waiting for tree traversal...</span>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      {/* Narrative Board / Controls */}
+      <div className="border-t border-[#e5e7eb] dark:border-[#222] pt-6 flex flex-col gap-4">
+        
+        {/* Narrative Box */}
+        <div className="bg-[#fcf8ff] dark:bg-purple-950/10 border border-purple-100 dark:border-purple-950/30 p-4 rounded-xl text-sm min-h-[64px] flex items-center">
+          <p className="text-gray-700 dark:text-gray-300 leading-relaxed font-medium">
+            {explanation}
+          </p>
+        </div>
+
+        {/* Playback Button Group */}
+        {steps.length > 0 && (
+          <div className="flex flex-wrap items-center justify-between gap-4">
+            <div className="flex items-center gap-2">
+              <button
+                onClick={handleStepBackward}
+                disabled={currentStepIdx <= 0}
+                className="p-2 border border-gray-300 dark:border-gray-700 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 disabled:opacity-40 transition"
+                title="Step Backward"
+              >
+                <ChevronLeft size={20} />
+              </button>
+
+              <button
+                onClick={() => setIsPlaying(!isPlaying)}
+                className="h-10 px-5 rounded-xl bg-[#a435f0] hover:bg-[#8f2cd6] text-white flex items-center gap-2 font-bold text-sm shadow-sm transition"
+              >
+                {isPlaying ? <Pause size={16} /> : <Play size={16} />}
+                <span>{isPlaying ? "Pause" : "Play"}</span>
+              </button>
+
+              <button
+                onClick={handleStepForward}
+                disabled={currentStepIdx >= steps.length - 1}
+                className="p-2 border border-gray-300 dark:border-gray-700 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 disabled:opacity-40 transition"
+                title="Step Forward"
+              >
+                <ChevronRight size={20} />
+              </button>
+
+              <button
+                onClick={() => setCurrentStepIdx(0)}
+                className="p-2 border border-gray-300 dark:border-gray-700 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition"
+                title="Reset Animation"
+              >
+                <RotateCcw size={18} />
+              </button>
+            </div>
+
+            <div className="flex items-center gap-2 text-xs font-semibold text-gray-500">
+              <span>Step {currentStepIdx + 1} of {steps.length}</span>
+              <span className="text-gray-300">|</span>
+              <div className="flex items-center gap-1.5">
+                <span>Speed:</span>
+                <select
+                  value={speed}
+                  onChange={e => setSpeed(Number(e.target.value))}
+                  className="rounded-lg border p-1 dark:bg-gray-800 dark:border-gray-700 focus:outline-none"
+                >
+                  <option value={2500}>0.5x</option>
+                  <option value={1500}>1.0x</option>
+                  <option value={800}>2.0x</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+    </VisualizerCard>
+  );
+}
diff --git a/src/app/visualizer/tree/advanced/segment-2d/codeBlock.jsx b/src/app/visualizer/tree/advanced/segment-2d/codeBlock.jsx
new file mode 100644
index 000000000..61a5cda7a
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/segment-2d/codeBlock.jsx
@@ -0,0 +1,283 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+const codeExamples = {
+  javascript: `// 2D Segment Tree (Range Sum Query)
+class SegmentTree2D {
+    constructor(matrix) {
+        this.m = matrix.length;
+        this.n = this.m > 0 ? matrix[0].length : 0;
+        this.tree = Array.from({ length: 4 * this.m }, () => new Array(4 * this.n).fill(0));
+        
+        if (this.m > 0 && this.n > 0) {
+            this.buildRow(matrix, 0, 0, this.m - 1);
+        }
+    }
+
+    buildCol(matrix, rNode, rStart, rEnd, cNode, cStart, cEnd) {
+        if (cStart === cEnd) {
+            if (rStart === rEnd) {
+                this.tree[rNode][cNode] = matrix[rStart][cStart];
+            } else {
+                this.tree[rNode][cNode] = this.tree[2 * rNode + 1][cNode] + this.tree[2 * rNode + 2][cNode];
+            }
+            return;
+        }
+        let mid = Math.floor((cStart + cEnd) / 2);
+        this.buildCol(matrix, rNode, rStart, rEnd, 2 * cNode + 1, cStart, mid);
+        this.buildCol(matrix, rNode, rStart, rEnd, 2 * cNode + 2, mid + 1, cEnd);
+        this.tree[rNode][cNode] = this.tree[rNode][2 * cNode + 1] + this.tree[rNode][2 * cNode + 2];
+    }
+
+    buildRow(matrix, rNode, rStart, rEnd) {
+        if (rStart !== rEnd) {
+            let mid = Math.floor((rStart + rEnd) / 2);
+            this.buildRow(matrix, 2 * rNode + 1, rStart, mid);
+            this.buildRow(matrix, 2 * rNode + 2, mid + 1, rEnd);
+        }
+        this.buildCol(matrix, rNode, rStart, rEnd, 0, 0, this.n - 1);
+    }
+
+    updateCol(rNode, rStart, rEnd, cNode, cStart, cEnd, rIdx, cIdx, val) {
+        if (cStart === cEnd) {
+            if (rStart === rEnd) {
+                this.tree[rNode][cNode] = val;
+            } else {
+                this.tree[rNode][cNode] = this.tree[2 * rNode + 1][cNode] + this.tree[2 * rNode + 2][cNode];
+            }
+            return;
+        }
+        let mid = Math.floor((cStart + cEnd) / 2);
+        if (cIdx <= mid) {
+            this.updateCol(rNode, rStart, rEnd, 2 * cNode + 1, cStart, mid, rIdx, cIdx, val);
+        } else {
+            this.updateCol(rNode, rStart, rEnd, 2 * cNode + 2, mid + 1, cEnd, rIdx, cIdx, val);
+        }
+        this.tree[rNode][cNode] = this.tree[rNode][2 * cNode + 1] + this.tree[rNode][2 * cNode + 2];
+    }
+
+    updateRow(rNode, rStart, rEnd, rIdx, cIdx, val) {
+        if (rStart !== rEnd) {
+            let mid = Math.floor((rStart + rEnd) / 2);
+            if (rIdx <= mid) {
+                this.updateRow(2 * rNode + 1, rStart, mid, rIdx, cIdx, val);
+            } else {
+                this.updateRow(2 * rNode + 2, mid + 1, rEnd, rIdx, cIdx, val);
+            }
+        }
+        this.updateCol(rNode, rStart, rEnd, 0, 0, this.n - 1, rIdx, cIdx, val);
+    }
+
+    queryCol(rNode, cNode, cStart, cEnd, qColStart, qColEnd) {
+        if (qColEnd < cStart || cEnd < qColStart) return 0;
+        if (qColStart <= cStart && cEnd <= qColEnd) return this.tree[rNode][cNode];
+        let mid = Math.floor((cStart + cEnd) / 2);
+        return this.queryCol(rNode, 2 * cNode + 1, cStart, mid, qColStart, qColEnd) +
+               this.queryCol(rNode, 2 * cNode + 2, mid + 1, cEnd, qColStart, qColEnd);
+    }
+
+    queryRow(rNode, rStart, rEnd, qRowStart, qRowEnd, qColStart, qColEnd) {
+        if (qRowEnd < rStart || rEnd < qRowStart) return 0;
+        if (qRowStart <= rStart && rEnd <= qRowEnd) {
+            return this.queryCol(rNode, 0, 0, this.n - 1, qColStart, qColEnd);
+        }
+        let mid = Math.floor((rStart + rEnd) / 2);
+        return this.queryRow(2 * rNode + 1, rStart, mid, qRowStart, qRowEnd, qColStart, qColEnd) +
+               this.queryRow(2 * rNode + 2, mid + 1, rEnd, qRowStart, qRowEnd, qColStart, qColEnd);
+    }
+}`,
+
+  python: `# 2D Segment Tree (Range Sum Query)
+class SegmentTree2D:
+    def __init__(self, matrix):
+        self.m = len(matrix)
+        self.n = len(matrix[0]) if self.m > 0 else 0
+        self.tree = [[0] * (4 * self.n) for _ in range(4 * self.m)]
+        if self.m > 0 and self.n > 0:
+            self.build_row(matrix, 0, 0, self.m - 1)
+
+    def build_col(self, matrix, r_node, r_start, r_end, c_node, c_start, c_end):
+        if c_start == c_end:
+            if r_start == r_end:
+                self.tree[r_node][c_node] = matrix[r_start][c_start]
+            else:
+                self.tree[r_node][c_node] = self.tree[2 * r_node + 1][c_node] + self.tree[2 * r_node + 2][c_node]
+            return
+        
+        mid = (c_start + c_end) // 2
+        self.build_col(matrix, r_node, r_start, r_end, 2 * c_node + 1, c_start, mid)
+        self.build_col(matrix, r_node, r_start, r_end, 2 * c_node + 2, mid + 1, c_end)
+        self.tree[r_node][c_node] = self.tree[r_node][2 * c_node + 1] + self.tree[r_node][2 * c_node + 2]
+
+    def build_row(self, matrix, r_node, r_start, r_end):
+        if r_start != r_end:
+            mid = (r_start + r_end) // 2
+            self.build_row(matrix, 2 * r_node + 1, r_start, mid)
+            self.build_row(matrix, 2 * r_node + 2, mid + 1, r_end)
+        self.build_col(matrix, r_node, r_start, r_end, 0, 0, self.n - 1)
+
+    def update_col(self, r_node, r_start, r_end, c_node, c_start, c_end, r_idx, c_idx, val):
+        if c_start == c_end:
+            if r_start == r_end:
+                self.tree[r_node][c_node] = val
+            else:
+                self.tree[r_node][c_node] = self.tree[2 * r_node + 1][c_node] + self.tree[2 * r_node + 2][c_node]
+            return
+        
+        mid = (c_start + c_end) // 2
+        if c_idx <= mid:
+            self.update_col(r_node, r_start, r_end, 2 * c_node + 1, c_start, mid, r_idx, c_idx, val)
+        else:
+            self.update_col(r_node, r_start, r_end, 2 * c_node + 2, mid + 1, c_end, r_idx, c_idx, val)
+        self.tree[r_node][c_node] = self.tree[r_node][2 * c_node + 1] + self.tree[r_node][2 * c_node + 2]
+
+    def update_row(self, r_node, r_start, r_end, r_idx, c_idx, val):
+        if r_start != r_end:
+            mid = (r_start + r_end) // 2
+            if r_idx <= mid:
+                self.update_row(2 * r_node + 1, r_start, mid, r_idx, c_idx, val)
+            else:
+                self.update_row(2 * r_node + 2, mid + 1, r_end, r_idx, c_idx, val)
+        self.update_col(r_node, r_start, r_end, 0, 0, self.n - 1, r_idx, c_idx, val)
+
+    def query_col(self, r_node, c_node, c_start, c_end, q_c_start, q_c_end):
+        if q_c_end < c_start or c_end < q_c_start:
+            return 0
+        if q_c_start <= c_start and c_end <= q_c_end:
+            return self.tree[r_node][c_node]
+        
+        mid = (c_start + c_end) // 2
+        return self.query_col(r_node, 2 * c_node + 1, c_start, mid, q_c_start, q_c_end) + \
+               self.query_col(r_node, 2 * c_node + 2, mid + 1, c_end, q_c_start, q_c_end)
+
+    def query_row(self, r_node, r_start, r_end, q_r_start, q_r_end, q_c_start, q_c_end):
+        if q_r_end < r_start or r_end < q_r_start:
+            return 0
+        if q_r_start <= r_start and r_end <= q_r_end:
+            return self.query_col(r_node, 0, 0, self.n - 1, q_c_start, q_c_end)
+        
+        mid = (r_start + r_end) // 2
+        return self.query_row(2 * r_node + 1, r_start, mid, q_r_start, q_r_end, q_c_start, q_c_end) + \
+               self.query_row(2 * r_node + 2, mid + 1, r_end, q_r_start, q_r_end, q_c_start, q_c_end)
+`,
+
+  cpp: `// 2D Segment Tree (Range Sum Query)
+#include <vector>
+using namespace std;
+
+class SegmentTree2D {
+private:
+    int m, n;
+    vector<vector<int>> tree;
+
+    void buildCol(const vector<vector<int>>& matrix, int rNode, int rStart, int rEnd, int cNode, int cStart, int cEnd) {
+        if (cStart == cEnd) {
+            if (rStart == rEnd) {
+                tree[rNode][cNode] = matrix[rStart][cStart];
+            } else {
+                tree[rNode][cNode] = tree[2 * rNode + 1][cNode] + tree[2 * rNode + 2][cNode];
+            }
+            return;
+        }
+        int mid = (cStart + cEnd) / 2;
+        buildCol(matrix, rNode, rStart, rEnd, 2 * cNode + 1, cStart, mid);
+        buildCol(matrix, rNode, rStart, rEnd, 2 * cNode + 2, mid + 1, cEnd);
+        tree[rNode][cNode] = tree[rNode][2 * cNode + 1] + tree[rNode][2 * cNode + 2];
+    }
+
+    void buildRow(const vector<vector<int>>& matrix, int rNode, int rStart, int rEnd) {
+        if (rStart != rEnd) {
+            int mid = (rStart + rEnd) / 2;
+            buildRow(matrix, 2 * rNode + 1, rStart, mid);
+            buildRow(matrix, 2 * rNode + 2, mid + 1, rEnd);
+        }
+        buildCol(matrix, rNode, rStart, rEnd, 0, 0, n - 1);
+    }
+
+    void updateCol(int rNode, int rStart, int rEnd, int cNode, int cStart, int cEnd, int rIdx, int cIdx, int val) {
+        if (cStart == cEnd) {
+            if (rStart == rEnd) {
+                tree[rNode][cNode] = val;
+            } else {
+                tree[rNode][cNode] = tree[2 * rNode + 1][cNode] + tree[2 * rNode + 2][cNode];
+            }
+            return;
+        }
+        int mid = (cStart + cEnd) / 2;
+        if (cIdx <= mid) {
+            updateCol(rNode, rStart, rEnd, 2 * cNode + 1, cStart, mid, rIdx, cIdx, val);
+        } else {
+            updateCol(rNode, rStart, rEnd, 2 * cNode + 2, mid + 1, cEnd, rIdx, cIdx, val);
+        }
+        tree[rNode][cNode] = tree[rNode][2 * cNode + 1] + tree[rNode][2 * cNode + 2];
+    }
+
+    void updateRow(int rNode, int rStart, int rEnd, int rIdx, int cIdx, int val) {
+        if (rStart != rEnd) {
+            int mid = (rStart + rEnd) / 2;
+            if (rIdx <= mid) {
+                updateRow(2 * rNode + 1, rStart, mid, rIdx, cIdx, val);
+            } else {
+                updateRow(2 * rNode + 2, mid + 1, rEnd, rIdx, cIdx, val);
+            }
+        }
+        updateCol(rNode, rStart, rEnd, 0, 0, n - 1, rIdx, cIdx, val);
+    }
+
+    int queryCol(int rNode, int cNode, int cStart, int cEnd, int qColStart, int qColEnd) {
+        if (qColEnd < cStart || cEnd < qColStart) return 0;
+        if (qColStart <= cStart && cEnd <= qColEnd) return tree[rNode][cNode];
+        int mid = (cStart + cEnd) / 2;
+        return queryCol(rNode, 2 * cNode + 1, cStart, mid, qColStart, qColEnd) +
+               queryCol(rNode, 2 * cNode + 2, mid + 1, cEnd, qColStart, qColEnd);
+    }
+
+    int queryRow(int rNode, int rStart, int rEnd, int qRowStart, int qRowEnd, int qColStart, int qColEnd) {
+        if (qRowEnd < rStart || rEnd < qRowStart) return 0;
+        if (qRowStart <= rStart && rEnd <= qRowEnd) {
+            return queryCol(rNode, 0, 0, n - 1, qColStart, qColEnd);
+        }
+        int mid = (rStart + rEnd) / 2;
+        return queryRow(2 * rNode + 1, rStart, mid, qRowStart, qRowEnd, qColStart, qColEnd) +
+               queryRow(2 * rNode + 2, mid + 1, rEnd, qRowStart, qRowEnd, qColStart, qColEnd);
+    }
+
+public:
+    SegmentTree2D(const vector<vector<int>>& matrix) {
+        m = matrix.size();
+        n = m > 0 ? matrix[0].size() : 0;
+        tree.assign(4 * m, vector<int>(4 * n, 0));
+        if (m > 0 && n > 0) {
+            buildRow(matrix, 0, 0, m - 1);
+        }
+    }
+
+    void update(int rIdx, int cIdx, int val) {
+        if (m > 0 && n > 0) {
+            updateRow(0, 0, m - 1, rIdx, cIdx, val);
+        }
+    }
+
+    int query(int qRowStart, int qRowEnd, int qColStart, int qColEnd) {
+        if (m == 0 || n == 0) return 0;
+        return queryRow(0, 0, m - 1, qRowStart, qRowEnd, qColStart, qColEnd);
+    }
+};`
+};
+
+const fileNames = {
+    javascript: 'segmentTree2D.js',
+    python: 'segment_tree_2d.py',
+    cpp: 'segment_tree_2d.cpp'
+};
+
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default CodeBlock;
diff --git a/src/app/visualizer/tree/advanced/segment-2d/content.jsx b/src/app/visualizer/tree/advanced/segment-2d/content.jsx
new file mode 100644
index 000000000..c15623f32
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/segment-2d/content.jsx
@@ -0,0 +1,96 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+
+const Segment2DContent = () => {
+  return (
+    <main className="max-w-4xl mx-auto mt-8 mb-8">
+      <article className="bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden shadow-sm">
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is a 2D Segment Tree?
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed space-y-4">
+            <p>
+              A 2D Segment Tree (also known as a <strong>Tree of Trees</strong>) is an extension of the standard 1D Segment Tree to two dimensions. It is designed to perform range queries (such as sum, min, or max) and updates on a 2D grid/matrix efficiently.
+            </p>
+            <p>
+              While a standard 2D prefix-sum matrix answers subgrid queries in O(1) time, updating any cell takes O(N&sup2;) in the worst case to recompute. A 2D Segment Tree resolves this balance, executing both subgrid queries and point updates in O(log M &times; log N) time.
+            </p>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Structural Concept
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500">
+              <li><strong>Outer Segment Tree:</strong> Built along the rows of the matrix. Each node of this tree represents a range of rows.</li>
+              <li>
+                <strong>Inner Segment Trees:</strong> Instead of holding single values, every node in the outer tree points to an entire 1D Segment Tree built along the columns of the matrix.
+              </li>
+              <li>
+                <strong>Leaf of Outer Tree:</strong> Represents a single row, and stores a 1D Segment Tree over columns for that row.
+              </li>
+              <li>
+                <strong>Ancestor of Outer Tree:</strong> Represents a range of rows. Its column-wise Segment Tree is formed by merging the column trees of its two children nodes.
+              </li>
+              <li>
+                <strong>Tree Size:</strong> For a matrix of size M &times; N, the memory required is approximately O(16 &times; M &times; N) in a static array representation.
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Three Core Operations
+          </h2>
+          <div className="grid sm:grid-cols-3 gap-3 text-[#374151] dark:text-[#d1d5db]">
+            {[
+              { op: "Build", cost: "O(M × N)", desc: "Build row trees bottom-up. Column trees are initialized at outer leaves and recursively merged for parent rows." },
+              { op: "Matrix Range Query", cost: "O(log M × log N)", desc: "Queries row intervals covering the range, triggering inner 1D queries on those nodes." },
+              { op: "Point Update", cost: "O(log M × log N)", desc: "Walk down the row tree to target row leaf, update its column tree, then update ancestor column trees." },
+            ].map(({ op, cost, desc }) => (
+              <div key={op} className="p-4 rounded-xl bg-gray-50 dark:bg-[#1b1b1b] border border-gray-200 dark:border-gray-800">
+                <p className="font-bold text-[#1a1a1a] dark:text-white">{op}</p>
+                <p className="text-xs font-mono text-purple-600 dark:text-purple-400 mb-1">{cost}</p>
+                <p className="text-xs leading-relaxed">{desc}</p>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className="p-6">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Performance Complexity (Square Matrix N × N)
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <ul className="space-y-2 font-mono text-sm bg-gray-50 dark:bg-[#1b1b1b] p-4 rounded-xl border border-gray-200 dark:border-gray-800">
+              <li>Matrix Construction: O(N&sup2;)</li>
+              <li>Subgrid Range Query Time: O(log&sup2; N)</li>
+              <li>Point Update Time: O(log&sup2; N)</li>
+              <li>Space Complexity: O(N&sup2;)</li>
+            </ul>
+            <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => Math.log2(n) * Math.log2(n)}
+                averageCase={(n) => Math.log2(n) * Math.log2(n)}
+                worstCase={(n) => Math.log2(n) * Math.log2(n)}
+                maxN={50}
+              />
+            </div>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+};
+
+export default Segment2DContent;
diff --git a/src/app/visualizer/tree/advanced/segment-2d/quiz.jsx b/src/app/visualizer/tree/advanced/segment-2d/quiz.jsx
new file mode 100644
index 000000000..93995ce20
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/segment-2d/quiz.jsx
@@ -0,0 +1,45 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const Segment2DQuiz = () => {
+  const questions = [
+    {
+      question: "For a matrix of size M × N, what is the worst-case time complexity of a 2D range sum query using a 2D Segment Tree?",
+      options: [
+        "O(M + N)",
+        "O(log M + log N)",
+        "O(log M × log N)",
+        "O(M × N)"
+      ],
+      correctAnswer: 2,
+      explanation: "A 2D range query performs a row range query in O(log M) time, and for each row tree node visited, it triggers a 1D column query in O(log N) time, resulting in O(log M × log N) overall."
+    },
+    {
+      question: "What is the approximate maximum number of node entries needed in a standard array representation of a 2D Segment Tree for an M × N matrix?",
+      options: [
+        "4(M + N)",
+        "4 × M × N",
+        "8 × M × N",
+        "16 × M × N"
+      ],
+      correctAnswer: 3,
+      explanation: "A 1D segment tree over M elements takes 4M space. A 2D segment tree consists of an outer tree of size 4M where each node is an inner tree of size 4N. Therefore, the total space is 4M × 4N = 16MN."
+    },
+    {
+      question: "Which of the following is the main reason to prefer a 2D Segment Tree over a 2D Prefix Sum array?",
+      options: [
+        "2D Prefix Sum takes more space",
+        "2D Segment Tree handles dynamic updates in O(log M × log N) time",
+        "2D Prefix Sum cannot do range queries",
+        "2D Segment Tree queries are O(1) time"
+      ],
+      correctAnswer: 1,
+      explanation: "A 2D Prefix Sum array can perform queries in O(1) time but takes O(M × N) time for point updates. A 2D Segment Tree balances both updates and queries in O(log M × log N) time, making it ideal for dynamic grids."
+    }
+  ];
+
+  return <QuizEngine title="2D Segment Tree Module Quiz" questions={questions} />;
+};
+
+export default Segment2DQuiz;
diff --git a/src/app/visualizer/tree/advanced/segment/AlgorithmClient.jsx b/src/app/visualizer/tree/advanced/segment/AlgorithmClient.jsx
new file mode 100644
index 000000000..885dc295e
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/segment/AlgorithmClient.jsx
@@ -0,0 +1,43 @@
+import SegmentAnimation from "@/app/visualizer/tree/advanced/segment/animation";
+import SegmentContent from "@/app/visualizer/tree/advanced/segment/content";
+import SegmentCode from "@/app/visualizer/tree/advanced/segment/codeBlock";
+import SegmentQuiz from "@/app/visualizer/tree/advanced/segment/quiz";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+
+
+export default function SegmentTreePage() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Advanced Trees", "Segment Trees")}
+      title="Segment Trees"
+      animation={<SegmentAnimation />}
+      content={<SegmentContent />}
+      code={<SegmentCode />}
+      quiz={<SegmentQuiz />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.segmentTree}
+          description="Mark Segment Tree as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other Advanced Trees"
+          links={[
+            { text: "Red-Black Trees", url: "./red-black" },
+            { text: "B-Trees", url: "./b-trees" },
+            { text: "Trie (Prefix Tree)", url: "./trie" },
+            { text: "Fenwick Trees", url: "./fenwick" }
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/advanced/segment/animation.jsx b/src/app/visualizer/tree/advanced/segment/animation.jsx
new file mode 100644
index 000000000..f81696903
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/segment/animation.jsx
@@ -0,0 +1,324 @@
+"use client";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import {
+  RefreshCw,
+} from "lucide-react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { buildSegTree, collectNodes, queryGenerator, updateGenerator } from "@/features/algorithms/tree/segmentTreeLogic";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+
+const DEFAULT_VALUES = [5, 11, 8, 12, 4, 9, 3, 7];
+
+export default function SegmentAnimation() {
+  const [arr, setArr] = useState([...DEFAULT_VALUES]);
+  const [tree, setTree] = useState(() => buildSegTree(DEFAULT_VALUES));
+  const [mode, setMode] = useState("query"); // "query" | "update"
+  const [queryL, setQueryL] = useState("");
+  const [queryR, setQueryR] = useState("");
+  const [updateIdx, setUpdateIdx] = useState("");
+  const [updateVal, setUpdateVal] = useState("");
+  
+  const [steps, setSteps] = useState([]);
+  const [message, setMessage] = useState("Build complete! Select a range query or point update to visualize.");
+  const [visualState, setVisualState] = useState(null);
+  const [resultBox, setResultBox] = useState(null);
+
+  const onStep = useCallback((step, idx) => {
+    if (idx === -1) {
+      setVisualState(null);
+      setResultBox(null);
+      return;
+    }
+    setVisualState(step);
+    setMessage(step.explanation || "");
+    if (step.result !== undefined) setResultBox(step.result);
+    if (step.type === 'complete' && step.newArr) {
+      setArr(step.newArr);
+      setTree(step.newTree);
+    }
+  }, []);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 1 });
+
+  useVisualizerReset(() => {
+    engine.reset();
+    setArr([...DEFAULT_VALUES]);
+    setTree(buildSegTree(DEFAULT_VALUES));
+    setSteps([]);
+    setMessage("...");
+    setVisualState(null);
+    setResultBox(null);
+  });
+
+  const n = arr.length;
+  const treeNodes = collectNodes(tree, n);
+
+  const handleReset = () => {
+    engine.reset();
+    setArr([...DEFAULT_VALUES]);
+    setTree(buildSegTree(DEFAULT_VALUES));
+    setSteps([]);
+    setVisualState(null);
+    setResultBox(null);
+    setQueryL(""); setQueryR(""); setUpdateIdx(""); setUpdateVal("");
+    setMessage("Tree reset to default. Choose an operation to begin.");
+  };
+
+  const runOperation = (generatorFunc) => {
+    engine.reset();
+    setResultBox(null);
+    const generator = generatorFunc();
+    const newSteps = [];
+    for (const step of generator) {
+      if (step.type === 'error') {
+        setMessage(step.message);
+        return;
+      }
+      newSteps.push(step);
+    }
+    setSteps(newSteps);
+    if (newSteps.length > 0) {
+      setVisualState(newSteps[0]);
+      setTimeout(() => {
+        engine.play();
+      }, 50);
+    }
+  };
+
+  // === RANGE QUERY ===
+  const triggerQuery = () => {
+    const l = parseInt(queryL);
+    const r = parseInt(queryR);
+    setQueryL(""); setQueryR("");
+    runOperation(() => queryGenerator(l, r, tree, n));
+  };
+
+  // === POINT UPDATE ===
+  const triggerUpdate = () => {
+    const idx = parseInt(updateIdx);
+    const newVal = parseInt(updateVal);
+    setUpdateIdx(""); setUpdateVal("");
+    runOperation(() => updateGenerator(idx, newVal, arr, n));
+  };
+
+  useVisualizerKeyboard({
+    onStepForward: engine.stepForward,
+    onStepBackward: engine.stepBackward,
+    onTogglePlay: engine.isPlaying ? engine.pause : (steps.length > 0 ? engine.play : undefined),
+    onReset: engine.reset,
+    onSpeedChange: (s) => engine.setSpeed(s * 500),
+    speed: engine.speed / 500,
+    sorting: engine.isPlaying,
+    sorted: engine.currentStep >= steps.length - 1 && steps.length > 0,
+    enabled: true,
+  });
+
+  const highlightedNodes = visualState?.highlightedNodes || {};
+  const highlightedArray = visualState?.highlightedArray || {};
+
+  // Color helpers
+  const getNodeColor = (nodeId) => {
+    const s = highlightedNodes[nodeId];
+    if (s === "visiting") return { fill: "#a435f0", stroke: "#d38cff", text: "#fff", glow: true };
+    if (s === "matched")  return { fill: "#10b981", stroke: "#34d399", text: "#fff", glow: true };
+    if (s === "error")    return { fill: "#ef4444", stroke: "#f87171", text: "#fff", glow: false };
+    return { fill: "var(--background)", stroke: "#64748b", text: "var(--foreground)", glow: false };
+  };
+
+  const getArrayColor = (i) => {
+    const s = highlightedArray[i];
+    if (s === "active")   return "border-[#a435f0] bg-[#a435f0]/10 text-[#a435f0] dark:text-[#d38cff]";
+    if (s === "matched")  return "border-emerald-500 bg-emerald-50 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400";
+    if (s === "error")    return "border-rose-500 bg-rose-50 text-rose-600 dark:bg-rose-900/30 dark:text-rose-400";
+    return "border-gray-300 bg-white text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300";
+  };
+
+  // Build edge list from treeNodes
+  const edges = treeNodes
+    .filter(node => node.start < node.end)
+    .flatMap(parent => {
+      const mid = Math.floor((parent.start + parent.end) / 2);
+      const leftChild = treeNodes.find(n => n.node === 2 * parent.node && n.start === parent.start && n.end === mid);
+      const rightChild = treeNodes.find(n => n.node === 2 * parent.node + 1 && n.start === mid + 1 && n.end === parent.end);
+      const edges = [];
+      if (leftChild) edges.push({ x1: parent.x, y1: parent.y + 22, x2: leftChild.x, y2: leftChild.y - 22, highlighted: !!highlightedNodes[leftChild.node] });
+      if (rightChild) edges.push({ x1: parent.x, y1: parent.y + 22, x2: rightChild.x, y2: rightChild.y - 22, highlighted: !!highlightedNodes[rightChild.node] });
+      return edges;
+    });
+
+  return (
+    <VisualizerInteractiveLayout>
+      <VisualizerCard>
+        <div className="flex gap-2 mb-4 bg-gray-100 p-1 rounded-xl w-fit dark:bg-gray-800">
+          {[["query", "Range Query"], ["update", "Point Update"]].map(([val, label]) => (
+            <button key={val} onClick={() => { setMode(val); engine.reset(); }}
+              className={`px-4 py-1.5 text-xs font-bold rounded-lg transition-all ${mode === val ? "bg-[#a435f0] text-white shadow-md" : "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"}`}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div className="flex flex-col sm:flex-row gap-2">
+            {mode === "query" ? (
+              <>
+                <input type="number" value={queryL} onChange={e => setQueryL(e.target.value)} placeholder={`L (0-${n-1})`}
+                  className="flex-1 rounded-lg border p-2 transition-all focus:border-transparent focus:ring-2 focus:ring-[#a435f0] dark:bg-gray-700" disabled={engine.isPlaying} />
+                <input type="number" value={queryR} onChange={e => setQueryR(e.target.value)} placeholder={`R (0-${n-1})`}
+                  className="flex-1 rounded-lg border p-2 transition-all focus:border-transparent focus:ring-2 focus:ring-[#a435f0] dark:bg-gray-700" disabled={engine.isPlaying}
+                  onKeyDown={e => e.key === "Enter" && triggerQuery()} />
+                <button onClick={triggerQuery} disabled={engine.isPlaying}
+                  className="rounded-lg bg-[#a435f0] px-4 py-2 text-white transition-colors hover:bg-[#8f2cd6] disabled:opacity-50">
+                  Query Sum
+                </button>
+              </>
+            ) : (
+              <>
+                <input type="number" value={updateIdx} onChange={e => setUpdateIdx(e.target.value)} placeholder={`Index (0-${n-1})`}
+                  className="flex-1 rounded-lg border p-2 transition-all focus:border-transparent focus:ring-2 focus:ring-[#a435f0] dark:bg-gray-700" disabled={engine.isPlaying} />
+                <input type="number" value={updateVal} onChange={e => setUpdateVal(e.target.value)} placeholder="New value"
+                  className="flex-1 rounded-lg border p-2 transition-all focus:border-transparent focus:ring-2 focus:ring-[#a435f0] dark:bg-gray-700" disabled={engine.isPlaying}
+                  onKeyDown={e => e.key === "Enter" && triggerUpdate()} />
+                <button onClick={triggerUpdate} disabled={engine.isPlaying}
+                  className="rounded-lg bg-[#a435f0] px-4 py-2 text-white transition-colors hover:bg-[#8f2cd6] disabled:opacity-50">
+                  Update
+                </button>
+              </>
+            )}
+          </div>
+          
+          <div className="flex justify-end gap-2 items-start">
+            <button onClick={handleReset} className="flex items-center gap-1.5 rounded-lg border border-red-500 text-red-500 px-4 py-2 transition-colors hover:bg-red-500 hover:text-white h-[42px]">
+              <RefreshCw className="w-4 h-4" /> Reset
+            </button>
+          </div>
+        </div>
+
+        <div className="mt-6">
+          <PlaybackControls 
+            isPlaying={engine.isPlaying}
+            onPlayPause={engine.isPlaying ? engine.pause : engine.play}
+            onStepForward={engine.stepForward}
+            onStepBackward={engine.stepBackward}
+            onReset={engine.reset}
+            speed={engine.speed / 500}
+            onSpeedChange={(s) => engine.setSpeed(s * 500)}
+            disabled={steps.length === 0}
+            showPlayPause={true}
+          />
+        </div>
+      </VisualizerCard>
+
+      <VisualizerCard
+        className={
+          message.includes("complete") || message.includes("✅")
+            ? "border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30"
+            : message.includes("Out of range") || message.includes("error") || message.includes("⚠️")
+              ? "border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-950/30"
+              : engine.isPlaying
+                ? "border-[#a435f0]/30 bg-[#a435f0]/10 dark:border-[#a435f0]/50 dark:bg-[#a435f0]/20"
+                : ""
+        }
+      >
+        <div className="flex justify-between items-center text-xs text-gray-500 mb-2">
+          <span>Step Explanation</span>
+          <span className="font-bold bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
+            Step {engine.currentStep !== -1 ? engine.currentStep + 1 : 0} / {steps.length || 0}
+          </span>
+        </div>
+        <div className="flex items-center gap-3">
+          <p className="font-medium text-lg min-h-[28px]">{message}</p>
+          {resultBox && <span className="ml-auto shrink-0 bg-emerald-100 border border-emerald-200 text-emerald-700 px-3 py-1 rounded-xl text-sm font-bold dark:bg-emerald-900/40 dark:border-emerald-800 dark:text-emerald-400">{resultBox}</span>}
+        </div>
+      </VisualizerCard>
+
+      <VisualizerCard>
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-lg font-semibold">Segment Tree Visualization</h2>
+          <div className="flex flex-wrap gap-2 text-xs">
+            {[{ color: "bg-[#a435f0]", label: "Visiting" }, { color: "bg-emerald-500", label: "In Range / Updated" }, { color: "bg-red-500", label: "Out of Range" }].map(({ color, label }) => (
+              <div key={label} className="flex items-center gap-1.5 px-2 py-1 rounded-lg">
+                <span className={`w-2.5 h-2.5 rounded-full ${color}`} />
+                <span className="text-gray-500 dark:text-gray-400">{label}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-6 py-4 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 min-h-[480px]">
+          
+          {/* Source Array */}
+          <div className="flex flex-col items-center gap-2">
+            <span className="text-xs font-bold text-gray-400 uppercase tracking-widest">Source Array (0-indexed)</span>
+            <div className="flex gap-1.5">
+              {arr.map((val, i) => (
+                <div key={i} className="flex flex-col items-center gap-0.5">
+                  <div className={`w-12 h-10 flex items-center justify-center border-2 rounded-xl text-sm font-bold transition-all duration-300 ${getArrayColor(i)}`}>{val}</div>
+                  <span className="text-[10px] text-gray-500 font-mono">[{i}]</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Tree SVG */}
+          <div className="overflow-auto flex justify-center">
+            <svg width="800" height={50 + Math.ceil(Math.log2(n + 1)) * 90 + 40} viewBox={`0 0 800 ${50 + Math.ceil(Math.log2(n + 1)) * 90 + 40}`} className="max-w-full h-auto">
+              {/* Edges */}
+              {edges.map((e, i) => (
+                <line key={i} x1={e.x1} y1={e.y1} x2={e.x2} y2={e.y2}
+                  stroke={e.highlighted ? "#a435f0" : "currentColor"} strokeWidth={e.highlighted ? "2.5" : "1.5"}
+                  className={`transition-all duration-300 ${e.highlighted ? '' : 'stroke-gray-300 dark:stroke-gray-600'}`} />
+              ))}
+              {/* Nodes */}
+              {treeNodes.map(n => {
+                const colors = getNodeColor(n.node);
+                const isLeaf = n.start === n.end;
+                const label = isLeaf ? `${n.value}` : `Σ${n.value}`;
+                const sublabel = `[${n.start}..${n.end}]`;
+                
+                let fillStyle = colors.fill;
+                if (fillStyle === "var(--background)") {
+                  fillStyle = "currentColor";
+                }
+                
+                return (
+                  <g key={n.node} className="transition-all duration-300">
+                    {colors.glow && (
+                      <circle cx={n.x} cy={n.y} r="28" fill="none" stroke={colors.stroke} strokeWidth="1.5" strokeDasharray="4,2" className="opacity-80">
+                        <animateTransform attributeName="transform" type="rotate" from={`0 ${n.x} ${n.y}`} to={`360 ${n.x} ${n.y}`} dur="4s" repeatCount="indefinite" />
+                      </circle>
+                    )}
+                    <rect x={n.x - 32} y={n.y - 20} width="64" height="40" rx="8"
+                      fill={fillStyle} 
+                      stroke={colors.stroke} 
+                      strokeWidth="1.5" 
+                      className={`transition-all duration-300 ${colors.fill === 'var(--background)' ? 'fill-white dark:fill-gray-900' : ''}`} 
+                    />
+                    <text 
+                      x={n.x} y={n.y + 2} 
+                      textAnchor="middle" 
+                      fill={colors.text} 
+                      fontSize="10" 
+                      fontWeight="bold"
+                      className={colors.text === 'var(--foreground)' ? 'fill-gray-900 dark:fill-gray-100' : ''}
+                    >
+                      {label}
+                    </text>
+                    <text x={n.x} y={n.y + 14} textAnchor="middle" fill={colors.text === "#fff" ? "rgba(255,255,255,0.7)" : "#64748b"} fontSize="8">{sublabel}</text>
+                  </g>
+                );
+              })}
+            </svg>
+          </div>
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+}
diff --git a/src/app/visualizer/tree/advanced/segment/codeBlock.jsx b/src/app/visualizer/tree/advanced/segment/codeBlock.jsx
new file mode 100644
index 000000000..252dc6a36
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/segment/codeBlock.jsx
@@ -0,0 +1,345 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for Segment Tree ─────────────────────────
+const codeExamples = {
+  javascript: `// Segment Tree (Range Sum Query)
+class SegmentTree{
+
+    constructor(arr){
+
+        this.n=arr.length;
+
+        this.tree=
+        new Array(
+        4*this.n
+        ).fill(0);
+
+        if(
+        this.n>0
+        ){
+
+            this.build(
+                arr,
+                0,
+                0,
+                this.n-1
+            );
+        }
+    }
+
+    build(
+        arr,
+        node,
+        start,
+        end){
+
+        if(
+        start===end
+        ){
+
+            this.tree[
+            node
+            ]=arr[start];
+
+            return;
+        }
+
+        let mid=
+        Math.floor(
+        (start+end)/2
+        );
+
+        this.build(
+        arr,
+        2*node+1,
+        start,
+        mid
+        );
+
+        this.build(
+        arr,
+        2*node+2,
+        mid+1,
+        end
+        );
+
+        this.tree[node]=
+        this.tree[
+        2*node+1
+        ]+
+        this.tree[
+        2*node+2
+        ];
+    }
+
+    query(
+        node,
+        start,
+        end,
+        l,
+        r){
+
+        if(
+        r<start ||
+        end<l
+        ){
+
+            return 0;
+        }
+
+        if(
+        l<=start &&
+        end<=r
+        ){
+
+            return this.tree[
+            node
+            ];
+        }
+
+        let mid=
+        Math.floor(
+        (start+end)/2
+        );
+
+        let left=
+        this.query(
+        2*node+1,
+        start,
+        mid,
+        l,
+        r
+        );
+
+        let right=
+        this.query(
+        2*node+2,
+        mid+1,
+        end,
+        l,
+        r
+        );
+
+        return left+right;
+    }
+}`,
+
+  python: `# Segment Tree
+
+class SegmentTree:
+
+    def __init__(
+            self,
+            arr):
+
+        self.n=
+        len(arr)
+
+        self.tree=
+        [0]*(
+        4*self.n
+        )
+
+        if self.n>0:
+
+            self.build(
+            arr,
+            0,
+            0,
+            self.n-1
+            )
+
+
+    def build(
+            self,
+            arr,
+            node,
+            start,
+            end):
+
+        if start==end:
+
+            self.tree[
+            node
+            ]=arr[start]
+
+            return
+
+        mid=(
+        start+end
+        )//2
+
+        self.build(
+        arr,
+        2*node+1,
+        start,
+        mid
+        )
+
+        self.build(
+        arr,
+        2*node+2,
+        mid+1,
+        end
+        )
+
+        self.tree[node]=\
+        self.tree[
+        2*node+1
+        ]+\
+        self.tree[
+        2*node+2
+        ]
+
+
+    def query(
+            self,
+            node,
+            start,
+            end,
+            l,
+            r):
+
+        if(
+        r<start or
+        end<l
+        ):
+
+            return 0
+
+        if(
+        l<=start and
+        end<=r
+        ):
+
+            return self.tree[
+            node
+            ]
+
+        mid=(
+        start+end
+        )//2
+
+        left=\
+        self.query(
+        2*node+1,
+        start,
+        mid,
+        l,
+        r
+        )
+
+        right=\
+        self.query(
+        2*node+2,
+        mid+1,
+        end,
+        l,
+        r
+        )
+
+        return left+right`,
+
+  cpp: `// Segment Tree
+#include<iostream>
+#include<vector>
+
+using namespace std;
+
+class SegmentTree{
+
+private:
+
+    vector<int>
+    tree;
+
+    int n;
+
+public:
+
+    SegmentTree(
+    const vector<int>& arr){
+
+        n=arr.size();
+
+        tree.resize(
+        4*n,
+        0
+        );
+
+        if(
+        n>0
+        ){
+
+            build(
+            arr,
+            0,
+            0,
+            n-1
+            );
+        }
+    }
+
+    void build(
+        const vector<int>& arr,
+        int node,
+        int start,
+        int end){
+
+        if(
+        start==end
+        ){
+
+            tree[node]=
+            arr[start];
+
+            return;
+        }
+
+        int mid=
+        (start+end)/2;
+
+        build(
+        arr,
+        2*node+1,
+        start,
+        mid
+        );
+
+        build(
+        arr,
+        2*node+2,
+        mid+1,
+        end
+        );
+
+        tree[node]=
+        tree[
+        2*node+1
+        ]+
+        tree[
+        2*node+2
+        ];
+    }
+};`
+};
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'segmentTree.js',
+    python:'segment_tree.py',
+    cpp:'segment_tree.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default CodeBlock;
diff --git a/src/app/visualizer/tree/advanced/segment/content.jsx b/src/app/visualizer/tree/advanced/segment/content.jsx
new file mode 100644
index 000000000..ea51fa71a
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/segment/content.jsx
@@ -0,0 +1,96 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+
+const SegmentContent = () => {
+  return (
+    <main className="max-w-4xl mx-auto mt-8 mb-8">
+      <article className="bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden shadow-sm">
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            What is a Segment Tree?
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed space-y-4">
+            <p>
+              A Segment Tree is a binary tree data structure used to store intervals or segments. It
+              lets you efficiently answer range aggregate queries (sum, min, max) and apply point or
+              range updates on an underlying array.
+            </p>
+            <p>
+              While a prefix-sum array answers range sum queries in O(1), any update costs O(N) to
+              recompute. A Segment Tree solves this by supporting both range queries and point updates
+              in O(log N) time.
+            </p>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Segment Tree Structure
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500">
+              <li><strong>Leaf Nodes:</strong> Store individual elements of the base array.</li>
+              <li>
+                <strong>Internal Nodes:</strong> Store the merged aggregate of their left and right
+                children.
+              </li>
+              <li>
+                <strong>Tree Size:</strong> For an array of size N, the Segment Tree needs an array
+                of size 4N to accommodate all leaves and padding branches.
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Three Core Operations
+          </h2>
+          <div className="grid sm:grid-cols-3 gap-3 text-[#374151] dark:text-[#d1d5db]">
+            {[
+              { op: "Build", cost: "O(N)", desc: "Recursively construct the tree by merging leaves up to the root." },
+              { op: "Range Query", cost: "O(log N)", desc: "Traverse overlapping segments, accumulating the result at each matching node." },
+              { op: "Point Update", cost: "O(log N)", desc: "Walk from the root to the target leaf, recomputing ancestor nodes on the way back." },
+            ].map(({ op, cost, desc }) => (
+              <div key={op} className="p-4 rounded-xl bg-gray-50 dark:bg-[#1b1b1b] border border-gray-200 dark:border-gray-800">
+                <p className="font-bold text-[#1a1a1a] dark:text-white">{op}</p>
+                <p className="text-xs font-mono text-purple-600 dark:text-purple-400 mb-1">{cost}</p>
+                <p className="text-xs leading-relaxed">{desc}</p>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className="p-6">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Performance Complexity
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <ul className="space-y-2 font-mono text-sm bg-gray-50 dark:bg-[#1b1b1b] p-4 rounded-xl border border-gray-200 dark:border-gray-800">
+              <li>Tree Construction: O(N)</li>
+              <li>Range Query Time: O(log N)</li>
+              <li>Point Update Time: O(log N)</li>
+              <li>Space Complexity: O(N)</li>
+            </ul>
+            <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => Math.log2(n)}
+                averageCase={(n) => Math.log2(n)}
+                worstCase={(n) => Math.log2(n)}
+                maxN={50}
+              />
+            </div>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+};
+
+export default SegmentContent;
diff --git a/src/app/visualizer/tree/advanced/segment/quiz.jsx b/src/app/visualizer/tree/advanced/segment/quiz.jsx
new file mode 100644
index 000000000..8c9c04e18
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/segment/quiz.jsx
@@ -0,0 +1,34 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const SegmentQuiz = () => {
+  const questions = [
+    {
+      question: "For a base array of size N, what is the maximum number of nodes required in the Segment Tree array representation?",
+      options: [
+        "N nodes",
+        "2N nodes",
+        "4N nodes",
+        "N^2 nodes"
+      ],
+      correctAnswer: 2,
+      explanation: "To fully accommodate leaf elements and empty branch padding, a Segment Tree array representation typically requires up to 4N nodes."
+    },
+    {
+      question: "What is the worst-case time complexity for a Range Sum Query and a Point Update in a Segment Tree?",
+      options: [
+        "O(N) for both",
+        "O(log N) for both",
+        "O(1) for query, O(N) for update",
+        "O(log N) for query, O(N) for update"
+      ],
+      correctAnswer: 1,
+      explanation: "Both range queries and point updates require traversing the depth of the binary tree, taking O(log N) time."
+    }
+  ];
+
+  return <QuizEngine title="Segment Tree Quiz" questions={questions} />;
+};
+
+export default SegmentQuiz;
diff --git a/src/app/visualizer/tree/advanced/trie/AlgorithmClient.jsx b/src/app/visualizer/tree/advanced/trie/AlgorithmClient.jsx
new file mode 100644
index 000000000..71369a26b
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/trie/AlgorithmClient.jsx
@@ -0,0 +1,41 @@
+import Animation from "@/app/visualizer/tree/advanced/trie/animation";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/tree/advanced/trie/content";
+import Quiz from "@/app/visualizer/tree/advanced/trie/quiz";
+import Code from "@/app/visualizer/tree/advanced/trie/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Trie (Prefix Tree)")}
+      title="Trie (Prefix Tree)"
+      headerActions={<ArticleActions />}
+      animation={<Animation />}
+      content={<Content />}
+      code={<Code />}
+      quiz={<Quiz mode="insertion" />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.trie}
+          description="Mark Trie : Prefix Tree as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other Trees"
+          links={[
+            { text: "Binary Search Tree", url: "/visualizer/tree/bst/insertion" },
+            { text: "Red Black Tree", url: "/visualizer/tree/advanced/red-black" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/advanced/trie/animation.jsx b/src/app/visualizer/tree/advanced/trie/animation.jsx
new file mode 100644
index 000000000..6f6fb9728
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/trie/animation.jsx
@@ -0,0 +1,451 @@
+"use client";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import usePlayback from "@/app/hooks/usePlayback";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import { Info, Layers } from "lucide-react";
+import { TrieNode, cloneTrie, insertGenerator, searchGenerator, prefixSearchGenerator } from "@/features/algorithms/tree/trieLogic";
+
+const calculateNodeWidth = (node) => {
+  if (!node) return 0;
+  const children = Object.values(node.children).sort((a, b) => a.char.localeCompare(b.char));
+  if (children.length === 0) return 1;
+  let width = 0;
+  for (const child of children) {
+    width += calculateNodeWidth(child);
+  }
+  return width;
+};
+
+const layoutTrie = (node, x, y, allocatedWidth, nodesList = [], edgesList = [], currentStep) => {
+  if (!node) return { nodesList, edgesList };
+
+  const nodeRadius = 24;
+  const yOffset = 80;
+
+  const highlightedState = currentStep?.highlightedNodes?.[node.id] || null;
+
+  nodesList.push({
+    id: node.id,
+    char: node.char || "Root",
+    isEndOfWord: node.isEndOfWord,
+    x,
+    y,
+    state: highlightedState,
+  });
+
+  const children = Object.values(node.children).sort((a, b) => a.char.localeCompare(b.char));
+  if (children.length > 0) {
+    let currentXStart = x - (allocatedWidth / 2);
+    const widthPerUnit = allocatedWidth / calculateNodeWidth(node);
+
+    for (const child of children) {
+      const childWidthUnits = calculateNodeWidth(child);
+      const childAllocatedWidth = childWidthUnits * widthPerUnit;
+      const childX = currentXStart + (childAllocatedWidth / 2);
+      const childY = y + yOffset;
+
+      const edgeState = currentStep?.highlightedEdges?.[`${node.id}->${child.id}`] ? "active" : "default";
+
+      edgesList.push({
+        id: `${node.id}->${child.id}`,
+        x1: x,
+        y1: y + nodeRadius,
+        x2: childX,
+        y2: childY - nodeRadius,
+        state: edgeState
+      });
+
+      layoutTrie(child, childX, childY, childAllocatedWidth, nodesList, edgesList, currentStep);
+      currentXStart += childAllocatedWidth;
+    }
+  }
+
+  return { nodesList, edgesList };
+};
+
+export default function TrieAnimation() {
+  const [mode, setMode] = useState("insertion");
+  const [root, setRoot] = useState(null);
+  const [targetTrieRoot, setTargetTrieRoot] = useState(null);
+  const [inputValue, setInputValue] = useState("");
+  const [steps, setSteps] = useState([]);
+  const [currentStepIdx, setCurrentStepIdx] = useState(-1);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [message, setMessage] = useState("Add words or select a mode to begin.");
+  const [nodeIdCounter, setNodeIdCounter] = useState(0);
+
+  const { speed, setSpeed } = usePlayback(1);
+  const timerRef = useRef(null);
+
+  const resetPlayback = useCallback(() => {
+    setIsAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setCurrentStepIdx(-1);
+    setSteps([]);
+    setRoot(targetTrieRoot);
+    setMessage("Playback reset. Click Start to begin operations.");
+  }, [targetTrieRoot]);
+
+  useEffect(() => {
+    // Initial Root node setup
+    const initialRoot = new TrieNode("", "root");
+    setRoot(initialRoot);
+    setTargetTrieRoot(initialRoot);
+    setNodeIdCounter(0);
+  }, []);
+
+  const handleInsert = () => {
+    const val = inputValue.trim().toLowerCase();
+    if (!val || !/^[a-z]+$/.test(val)) {
+      setMessage("⚠️ Please enter a valid lowercase word (a-z)");
+      return;
+    }
+
+    resetPlayback();
+    const generator = insertGenerator(targetTrieRoot, val, nodeIdCounter);
+    const preCalculated = [...generator];
+    
+    setSteps(preCalculated);
+    if (preCalculated.length > 0) {
+      const finalStep = preCalculated[preCalculated.length - 1];
+      setTargetTrieRoot(finalStep.tree);
+      setNodeIdCounter(finalStep.newNodeIdCounter);
+    }
+    
+    setCurrentStepIdx(0);
+    setIsAnimating(true);
+    setInputValue("");
+  };
+
+  const handleSearch = () => {
+    const val = inputValue.trim().toLowerCase();
+    if (!val || !/^[a-z]+$/.test(val)) {
+      setMessage("⚠️ Please enter a valid lowercase word (a-z)");
+      return;
+    }
+
+    resetPlayback();
+    const preCalculated = [...searchGenerator(targetTrieRoot, val)];
+    setSteps(preCalculated);
+    setCurrentStepIdx(0);
+    setIsAnimating(true);
+    setInputValue("");
+  };
+
+  const handlePrefixSearch = () => {
+    const val = inputValue.trim().toLowerCase();
+    if (!val || !/^[a-z]+$/.test(val)) {
+      setMessage("⚠️ Please enter a valid lowercase prefix (a-z)");
+      return;
+    }
+
+    resetPlayback();
+    const preCalculated = [...prefixSearchGenerator(targetTrieRoot, val)];
+    setSteps(preCalculated);
+    setCurrentStepIdx(0);
+    setIsAnimating(true);
+    setInputValue("");
+  };
+
+  const handleClear = () => {
+    const initialRoot = new TrieNode("", "root");
+    setRoot(initialRoot);
+    setTargetTrieRoot(initialRoot);
+    setNodeIdCounter(0);
+    setIsAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setCurrentStepIdx(-1);
+    setSteps([]);
+    setMessage("Trie cleared.");
+  };
+
+  const startVisualizer = () => {
+    if (steps.length === 0) {
+      if (mode === "insertion") handleInsert();
+      else if (mode === "searching") handleSearch();
+      else handlePrefixSearch();
+      return;
+    }
+    setIsAnimating(true);
+    let nextIdx = currentStepIdx === -1 || currentStepIdx >= steps.length - 1 ? 0 : currentStepIdx + 1;
+    setCurrentStepIdx(nextIdx);
+  };
+
+  const pauseVisualizer = () => {
+    setIsAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+  };
+
+  const stepForward = () => {
+    setIsAnimating(false);
+    if (currentStepIdx < steps.length - 1) {
+      setCurrentStepIdx(prev => prev + 1);
+      if (currentStepIdx === steps.length - 2 && mode === "insertion") {
+        setRoot(targetTrieRoot);
+      }
+    }
+  };
+
+  const stepBackward = () => {
+    setIsAnimating(false);
+    if (currentStepIdx > 0) {
+      setCurrentStepIdx(prev => prev - 1);
+    }
+  };
+
+  useEffect(() => {
+    if (!isAnimating || steps.length === 0) return;
+
+    if (currentStepIdx >= steps.length) {
+      setIsAnimating(false);
+      return;
+    }
+
+    const currentStep = steps[currentStepIdx];
+    setMessage(currentStep.explanation);
+
+    timerRef.current = setTimeout(() => {
+      if (currentStepIdx < steps.length - 1) {
+        setCurrentStepIdx(prev => prev + 1);
+      } else {
+        setIsAnimating(false);
+        if (mode === "insertion") {
+          setRoot(targetTrieRoot);
+        }
+        setMessage(currentStep.explanation);
+      }
+    }, 1800 / speed);
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [isAnimating, currentStepIdx, steps, speed, targetTrieRoot, mode]);
+
+  const currentStep = steps[currentStepIdx] || null;
+
+  const buildTreeRenderData = () => {
+    const activeTree = (mode === "insertion" && currentStep && currentStep.tree) ? currentStep.tree : root;
+    if (!activeTree) return { renderNodes: [], renderEdges: [] };
+    
+    const treeWidthUnits = calculateNodeWidth(activeTree);
+    const allocatedWidth = Math.max(800, treeWidthUnits * 80);
+    return layoutTrie(activeTree, allocatedWidth / 2, 60, allocatedWidth, [], [], currentStep);
+  };
+
+  const { renderNodes, renderEdges } = buildTreeRenderData();
+
+  const getSvgDimensions = () => {
+    if (renderNodes.length === 0) return { width: 800, height: 400, viewBoxOffset: 0 };
+    const xCoords = renderNodes.map(n => n.x);
+    const yCoords = renderNodes.map(n => n.y);
+
+    const minX = Math.min(...xCoords);
+    const maxX = Math.max(...xCoords);
+    const maxY = Math.max(...yCoords);
+
+    const padding = 60;
+    const computedWidth = maxX - minX + padding * 2;
+    const computedHeight = maxY + padding * 1.5;
+
+    return {
+      width: Math.max(800, computedWidth),
+      height: Math.max(380, computedHeight),
+      viewBoxOffset: minX - padding
+    };
+  };
+
+  const svgDimensions = getSvgDimensions();
+
+  return (
+    <div className="flex flex-col gap-6">
+      
+      {/* Mode Selector */}
+      <div className="flex flex-wrap gap-2">
+        {["insertion", "searching", "prefix-search"].map(tab => (
+          <button
+            key={tab}
+            onClick={() => {
+              setMode(tab);
+              resetPlayback();
+            }}
+            className={`px-4 py-2 text-sm font-semibold rounded-xl capitalize transition-all ${
+              mode === tab
+                ? "bg-indigo-600 text-white shadow-md"
+                : "bg-gray-100 text-slate-700 hover:bg-gray-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
+            }`}
+          >
+            {tab.replace("-", " ")}
+          </button>
+        ))}
+      </div>
+
+      {/* Controls & Playback Dashboard */}
+      <div className="bg-white dark:bg-[#111] border border-gray-200 dark:border-[#222] p-5 rounded-2xl flex flex-col md:flex-row gap-5 justify-between items-center shadow-sm">
+        <div className="flex flex-col sm:flex-row gap-2.5 w-full md:w-auto">
+          <input
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            placeholder={mode === "insertion" ? "Insert word" : mode === "searching" ? "Search exact word" : "Starts with prefix"}
+            className="w-full sm:w-40 px-4 py-2.5 text-sm bg-white dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] rounded-xl text-slate-900 dark:text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors"
+            disabled={isAnimating}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                if (mode === "insertion") handleInsert();
+                else if (mode === "searching") handleSearch();
+                else handlePrefixSearch();
+              }
+            }}
+          />
+          <button
+            onClick={() => {
+              if (mode === "insertion") handleInsert();
+              else if (mode === "searching") handleSearch();
+              else handlePrefixSearch();
+            }}
+            disabled={isAnimating || !inputValue}
+            className="px-5 py-2.5 text-sm font-bold bg-indigo-600 hover:bg-indigo-500 disabled:bg-indigo-900/50 disabled:opacity-50 text-white rounded-xl transition-all"
+          >
+            {mode === "insertion" ? "Insert" : "Search"}
+          </button>
+        </div>
+
+        <PlaybackControls
+          isPlaying={isAnimating}
+          onPlayPause={isAnimating ? pauseVisualizer : startVisualizer}
+          onStepForward={stepForward}
+          onStepBackward={stepBackward}
+          onReset={resetPlayback}
+          onClear={handleClear}
+          clearLabel="Clear Trie"
+          speed={speed}
+          onSpeedChange={setSpeed}
+          disabled={steps.length === 0 && !isAnimating}
+          showPlayPause={true}
+          progressText={`Step ${currentStepIdx !== -1 ? currentStepIdx + 1 : 0} / ${steps.length || 0}`}
+        />
+      </div>
+
+      {/* Explanation Area */}
+      <div className="bg-white dark:bg-[#111] border border-gray-200 dark:border-[#222] rounded-2xl p-5 flex flex-col gap-3">
+        <div className="flex justify-between items-center text-sm">
+          <span className="text-slate-600 dark:text-slate-400 font-semibold flex items-center gap-2">
+            <Info className="w-4 h-4 text-indigo-500" /> Action Explanation
+          </span>
+          <span className="text-slate-600 dark:text-slate-400 font-bold bg-gray-100 dark:bg-[#1a1a1a] px-3 py-1 rounded-full border border-gray-300 dark:border-[#333]">
+            Step {currentStepIdx !== -1 ? currentStepIdx + 1 : 0} / {steps.length || 0}
+          </span>
+        </div>
+        <div className="text-base leading-relaxed text-slate-800 dark:text-slate-200 font-medium">
+          {message}
+        </div>
+      </div>
+
+      {/* SVG Canvas */}
+      <div className="bg-white dark:bg-[#111] border border-gray-200 dark:border-[#222] rounded-3xl p-6 relative overflow-hidden flex flex-col justify-center min-h-[440px] items-center">
+        
+        {/* Legend */}
+        <div className="absolute top-4 left-4 flex flex-wrap gap-2 text-xs hidden sm:flex">
+          <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] px-2.5 py-1.5 rounded-xl">
+            <span className="w-3 h-3 rounded-full bg-emerald-500 shadow-sm shadow-emerald-500/20"></span>
+            <span className="text-slate-600 dark:text-slate-400 font-medium">Visiting / Traversing</span>
+          </div>
+          <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] px-2.5 py-1.5 rounded-xl">
+            <span className="w-3 h-3 rounded-full border-2 border-indigo-500"></span>
+            <span className="text-slate-600 dark:text-slate-400 font-medium">End of Word</span>
+          </div>
+          <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] px-2.5 py-1.5 rounded-xl">
+            <span className="w-3 h-3 rounded-full bg-amber-500 shadow-sm shadow-amber-500/20"></span>
+            <span className="text-slate-600 dark:text-slate-400 font-medium">Matched Success</span>
+          </div>
+          <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] px-2.5 py-1.5 rounded-xl">
+            <span className="w-3 h-3 rounded-full bg-rose-500 shadow-sm shadow-rose-500/20"></span>
+            <span className="text-slate-600 dark:text-slate-400 font-medium">Error / Not Found</span>
+          </div>
+        </div>
+
+        <div className="w-full h-full overflow-auto custom-scrollbar flex items-center justify-center pt-16">
+          <svg
+            width={svgDimensions.width}
+            height={svgDimensions.height}
+            viewBox={`${svgDimensions.viewBoxOffset} 0 ${svgDimensions.width} ${svgDimensions.height}`}
+            className="transition-all duration-300"
+          >
+            {renderEdges.map((edge) => (
+              <line
+                key={edge.id}
+                x1={edge.x1}
+                y1={edge.y1}
+                x2={edge.x2}
+                y2={edge.y2}
+                strokeWidth={edge.state === "active" ? 4 : 2}
+                className={`transition-all duration-300 ${edge.state === "active" ? "stroke-emerald-500" : "stroke-slate-300 dark:stroke-slate-600"}`}
+                strokeOpacity={edge.state === "active" ? 1 : 0.3}
+              />
+            ))}
+            {renderNodes.map((node) => {
+              let bgClass = "fill-white dark:fill-slate-800";
+              let strokeClass = "stroke-slate-300 dark:stroke-slate-600";
+              let textClass = "fill-slate-700 dark:fill-slate-200";
+              let strokeWidth = 2;
+
+              if (node.state === "visiting" || node.state === "active") {
+                bgClass = "fill-emerald-100 dark:fill-emerald-500/20";
+                strokeClass = "stroke-emerald-500 dark:stroke-emerald-400";
+                textClass = "fill-emerald-700 dark:fill-emerald-400";
+              } else if (node.state === "matched") {
+                bgClass = "fill-amber-100 dark:fill-amber-500/20";
+                strokeClass = "stroke-amber-500 dark:stroke-amber-400";
+                textClass = "fill-amber-700 dark:fill-amber-400";
+              } else if (node.state === "error") {
+                bgClass = "fill-rose-100 dark:fill-rose-500/20";
+                strokeClass = "stroke-rose-500 dark:stroke-rose-400";
+                textClass = "fill-rose-700 dark:fill-rose-400";
+              } else {
+                if (node.isEndOfWord) {
+                  strokeClass = "stroke-indigo-500 dark:stroke-indigo-400";
+                  strokeWidth = 4;
+                }
+              }
+
+              return (
+                <g key={node.id} className="transition-all duration-300">
+                  <circle
+                    cx={node.x}
+                    cy={node.y}
+                    r={24}
+                    strokeWidth={strokeWidth}
+                    className={`transition-all duration-300 shadow-sm ${bgClass} ${strokeClass}`}
+                  />
+                  <text
+                    x={node.x}
+                    y={node.y}
+                    textAnchor="middle"
+                    dy=".3em"
+                    fontSize="18px"
+                    fontWeight="600"
+                    className={`font-sans ${textClass}`}
+                  >
+                    {node.char}
+                  </text>
+                  {node.isEndOfWord && (
+                    <circle
+                      cx={node.x}
+                      cy={node.y}
+                      r={20}
+                      fill="none"
+                      strokeWidth={1}
+                      strokeDasharray="4 2"
+                      opacity={0.5}
+                      className={strokeClass}
+                    />
+                  )}
+                </g>
+              );
+            })}
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/visualizer/tree/advanced/trie/codeBlock.jsx b/src/app/visualizer/tree/advanced/trie/codeBlock.jsx
new file mode 100644
index 000000000..854b8aa3c
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/trie/codeBlock.jsx
@@ -0,0 +1,205 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+const trieCode = {
+  javascript: `class TrieNode {
+  constructor() {
+    this.children = {};
+    this.isEndOfWord = false;
+  }
+}
+
+class Trie {
+  constructor() {
+    this.root = new TrieNode();
+  }
+
+  insert(word) {
+    let current = this.root;
+    for (let char of word) {
+      if (!current.children[char]) {
+        current.children[char] = new TrieNode();
+      }
+      current = current.children[char];
+    }
+    current.isEndOfWord = true;
+  }
+
+  search(word) {
+    let current = this.root;
+    for (let char of word) {
+      if (!current.children[char]) {
+        return false;
+      }
+      current = current.children[char];
+    }
+    return current.isEndOfWord;
+  }
+
+  startsWith(prefix) {
+    let current = this.root;
+    for (let char of prefix) {
+      if (!current.children[char]) {
+        return false;
+      }
+      current = current.children[char];
+    }
+    return true;
+  }
+}`,
+  python: `class TrieNode:
+    def __init__(self):
+        self.children = {}
+        self.is_end_of_word = False
+
+class Trie:
+    def __init__(self):
+        self.root = TrieNode()
+
+    def insert(self, word: str) -> None:
+        current = self.root
+        for char in word:
+            if char not in current.children:
+                current.children[char] = TrieNode()
+            current = current.children[char]
+        current.is_end_of_word = True
+
+    def search(self, word: str) -> bool:
+        current = self.root
+        for char in word:
+            if char not in current.children:
+                return False
+            current = current.children[char]
+        return current.is_end_of_word
+
+    def startsWith(self, prefix: str) -> bool:
+        current = self.root
+        for char in prefix:
+            if char not in current.children:
+                return False
+            current = current.children[char]
+        return True`,
+  java: `class TrieNode {
+    TrieNode[] children = new TrieNode[26];
+    boolean isEndOfWord = false;
+}
+
+class Trie {
+    TrieNode root;
+
+    public Trie() {
+        root = new TrieNode();
+    }
+    
+    public void insert(String word) {
+        TrieNode current = root;
+        for (int i = 0; i < word.length(); i++) {
+            int index = word.charAt(i) - 'a';
+            if (current.children[index] == null) {
+                current.children[index] = new TrieNode();
+            }
+            current = current.children[index];
+        }
+        current.isEndOfWord = true;
+    }
+    
+    public boolean search(String word) {
+        TrieNode current = root;
+        for (int i = 0; i < word.length(); i++) {
+            int index = word.charAt(i) - 'a';
+            if (current.children[index] == null) {
+                return false;
+            }
+            current = current.children[index];
+        }
+        return current.isEndOfWord;
+    }
+    
+    public boolean startsWith(String prefix) {
+        TrieNode current = root;
+        for (int i = 0; i < prefix.length(); i++) {
+            int index = prefix.charAt(i) - 'a';
+            if (current.children[index] == null) {
+                return false;
+            }
+            current = current.children[index];
+        }
+        return true;
+    }
+}`,
+  cpp: `class TrieNode {
+public:
+    TrieNode* children[26];
+    bool isEndOfWord;
+
+    TrieNode() {
+        isEndOfWord = false;
+        for (int i = 0; i < 26; i++) {
+            children[i] = nullptr;
+        }
+    }
+};
+
+class Trie {
+private:
+    TrieNode* root;
+public:
+    Trie() {
+        root = new TrieNode();
+    }
+    
+    void insert(string word) {
+        TrieNode* current = root;
+        for (char c : word) {
+            int index = c - 'a';
+            if (current->children[index] == nullptr) {
+                current->children[index] = new TrieNode();
+            }
+            current = current->children[index];
+        }
+        current->isEndOfWord = true;
+    }
+    
+    bool search(string word) {
+        TrieNode* current = root;
+        for (char c : word) {
+            int index = c - 'a';
+            if (current->children[index] == nullptr) {
+                return false;
+            }
+            current = current->children[index];
+        }
+        return current->isEndOfWord;
+    }
+    
+    bool startsWith(string prefix) {
+        TrieNode* current = root;
+        for (char c : prefix) {
+            int index = c - 'a';
+            if (current->children[index] == nullptr) {
+                return false;
+            }
+            current = current->children[index];
+        }
+        return true;
+    }
+};`
+};
+
+const fileNames = {
+  javascript: 'trie.js',
+  python: 'trie.py',
+  java: 'Trie.java',
+  cpp: 'trie.cpp'
+};
+
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={trieCode}
+        fileNames={fileNames}
+    />
+);
+
+export default CodeBlock;
diff --git a/src/app/visualizer/tree/advanced/trie/content.jsx b/src/app/visualizer/tree/advanced/trie/content.jsx
new file mode 100644
index 000000000..c2af1f40c
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/trie/content.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+const trieMarkdown = `
+# Trie (Prefix Tree)
+
+A **Trie** (derived from re**trie**val), also known as a **Prefix Tree**, is a specialized tree-like data structure used primarily to store an associative array or dynamic set where the keys are usually strings.
+
+Unlike a binary search tree, no node in the tree stores the key associated with that node; instead, its position in the tree defines the key with which it is associated. All the descendants of a node have a common prefix of the string associated with that node, and the root is associated with the empty string.
+
+### Core Operations
+
+1. **Insert**: Adds a word to the Trie. We start from the root and for every character in the word, we check if a child node exists. If it does, we move to it. If it doesn't, we create a new node. Once all characters are processed, we mark the final node as the end of the word (\`isEndOfWord = true\`).
+2. **Search**: Checks if an exact word exists in the Trie. We traverse down the tree character by character. If we reach the end of the word and the final node's \`isEndOfWord\` flag is true, the word exists. If at any point the next character is missing, the word does not exist.
+3. **Starts With (Prefix Search)**: Similar to search, but we only care if the path exists for the given prefix. We don't check the \`isEndOfWord\` flag at the end.
+
+### Applications
+
+- **Autocomplete**: Predictive text and search engines use Tries to quickly fetch all words starting with a given prefix.
+- **Spell Checking**: Word processors use Tries to check if a word is correctly spelled.
+- **IP Routing (Longest Prefix Matching)**: Routers use variations of Tries to determine the best route for an IP address.
+
+### Complexity
+
+Let **L** be the length of the word being inserted, searched, or prefixed, and **N** be the number of words in the Trie.
+
+| Operation | Time Complexity | Space Complexity |
+| --------- | --------------- | ---------------- |
+| Insert    | O(L)            | O(L)             |
+| Search    | O(L)            | O(1)             |
+| Prefix    | O(L)            | O(1)             |
+
+### Advantages over Hash Maps
+While Hash Maps also provide O(1) or O(L) string lookups, Tries excel when you need to perform **prefix searches** or find all words with a common prefix. Hash maps cannot efficiently return "all words starting with 'app'". Furthermore, Tries can be more space-efficient than Hash Maps when storing many words sharing the same prefix.
+`;
+
+const Content = () => {
+  return (
+    <div className="prose prose-slate dark:prose-invert max-w-none">
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{trieMarkdown}</ReactMarkdown>
+    </div>
+  );
+};
+
+export default Content;
diff --git a/src/app/visualizer/tree/advanced/trie/quiz.jsx b/src/app/visualizer/tree/advanced/trie/quiz.jsx
new file mode 100644
index 000000000..795c57b38
--- /dev/null
+++ b/src/app/visualizer/tree/advanced/trie/quiz.jsx
@@ -0,0 +1,165 @@
+"use client";
+import React, { useState } from 'react';
+import { CheckCircle2, XCircle } from 'lucide-react';
+
+const quizzes = {
+  insertion: [
+    {
+      question: "What is the time complexity of inserting a word of length L into a Trie?",
+      options: ["O(L)", "O(1)", "O(N * L)", "O(log N)"],
+      answer: 0,
+      explanation: "We traverse the Trie down one level for each character in the word. Thus, for a word of length L, the time complexity is exactly O(L)."
+    },
+    {
+      question: "What does the 'isEndOfWord' flag signify in a TrieNode?",
+      options: [
+        "That the node has no children",
+        "That a valid inserted word terminates at this exact node",
+        "That the node is a leaf node",
+        "That the Trie is full"
+      ],
+      answer: 1,
+      explanation: "A node might have children but still be the end of a word (e.g., if 'app' and 'apple' are both inserted, the second 'p' isEndOfWord but still has child 'l')."
+    }
+  ],
+  searching: [
+    {
+      question: "If we search for 'cat' and reach the node for 't', but its 'isEndOfWord' is false, what does it mean?",
+      options: [
+        "The word 'cat' exists in the Trie",
+        "The word 'cat' does not exist, but is a prefix for another word like 'category'",
+        "The Trie is broken",
+        "We should search the children of 't' for 'cat'"
+      ],
+      answer: 1,
+      explanation: "If isEndOfWord is false, it means 'cat' was never inserted as a full word, but its characters exist because a longer word starting with 'cat' was inserted."
+    }
+  ],
+  "prefix-search": [
+    {
+      question: "How does StartsWith (Prefix Search) differ from regular Search in a Trie?",
+      options: [
+        "Prefix Search is slower than regular Search",
+        "Prefix Search checks the isEndOfWord flag, Search does not",
+        "Prefix Search does NOT check the isEndOfWord flag on the final node",
+        "Prefix Search iterates backwards"
+      ],
+      answer: 2,
+      explanation: "For StartsWith, we only care that a path exists for the prefix characters. It does not matter if the final node is marked as the end of a word."
+    }
+  ]
+};
+
+const Quiz = ({ mode }) => {
+  const activeQuizList = quizzes[mode] || quizzes.insertion;
+  const [quizIdx, setQuizIdx] = useState(0);
+  const [selectedOption, setSelectedOption] = useState(null);
+  const [quizSubmitted, setQuizSubmitted] = useState(false);
+
+  const activeQuestion = activeQuizList[quizIdx];
+
+  const handleQuizAnswer = (idx) => {
+    if (quizSubmitted) return;
+    setSelectedOption(idx);
+  };
+
+  const submitQuiz = () => {
+    if (selectedOption === null) return;
+    setQuizSubmitted(true);
+  };
+
+  const nextQuizQuestion = () => {
+    setSelectedOption(null);
+    setQuizSubmitted(false);
+    setQuizIdx((prev) => (prev + 1) % activeQuizList.length);
+  };
+
+  return (
+    <div className="bg-white dark:bg-[#111] border border-gray-200 dark:border-[#222] rounded-2xl p-6 shadow-sm">
+      <div className="flex justify-between items-center mb-6 border-b border-gray-100 dark:border-slate-800 pb-4">
+        <h3 className="text-xl font-bold text-slate-900 dark:text-slate-100">
+          Knowledge Check
+        </h3>
+        <span className="text-sm font-semibold text-slate-500 dark:text-slate-400 bg-gray-100 dark:bg-slate-800 px-3 py-1 rounded-full">
+          Question {quizIdx + 1} of {activeQuizList.length}
+        </span>
+      </div>
+
+      <p className="text-[15px] font-semibold text-slate-800 dark:text-slate-200 mb-6 leading-relaxed">
+        {activeQuestion.question}
+      </p>
+
+      <div className="flex flex-col gap-3">
+        {activeQuestion.options.map((option, idx) => {
+          let optionStyle = "border-gray-200 dark:border-[#333] hover:border-indigo-400 dark:hover:border-indigo-500 bg-white dark:bg-[#1a1a1a]";
+          let textStyle = "text-slate-700 dark:text-slate-300";
+          let icon = null;
+
+          if (quizSubmitted) {
+            if (idx === activeQuestion.answer) {
+              optionStyle = "border-emerald-500 bg-emerald-50 dark:bg-emerald-950/30";
+              textStyle = "text-emerald-800 dark:text-emerald-400 font-medium";
+              icon = <CheckCircle2 className="w-5 h-5 text-emerald-500" />;
+            } else if (selectedOption === idx) {
+              optionStyle = "border-rose-500 bg-rose-50 dark:bg-rose-950/30";
+              textStyle = "text-rose-800 dark:text-rose-400";
+              icon = <XCircle className="w-5 h-5 text-rose-500" />;
+            } else {
+              optionStyle = "border-gray-100 dark:border-[#222] opacity-50";
+            }
+          } else if (selectedOption === idx) {
+            optionStyle = "border-indigo-500 bg-indigo-50 dark:bg-indigo-950/30 ring-1 ring-indigo-500";
+            textStyle = "text-indigo-800 dark:text-indigo-300 font-medium";
+          }
+
+          return (
+            <button
+              key={idx}
+              onClick={() => handleQuizAnswer(idx)}
+              disabled={quizSubmitted}
+              className={`flex items-center justify-between p-4 rounded-xl border-2 transition-all text-left ${optionStyle}`}
+            >
+              <span className={textStyle}>{option}</span>
+              {icon}
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="mt-6 flex items-center justify-between">
+        <div className="flex-1">
+          {quizSubmitted && (
+            <p className={`text-sm p-4 rounded-xl font-medium ${
+              selectedOption === activeQuestion.answer
+                ? "bg-emerald-50 text-emerald-800 border border-emerald-200 dark:bg-emerald-950/30 dark:text-emerald-400 dark:border-emerald-900/50"
+                : "bg-rose-50 text-rose-800 border border-rose-200 dark:bg-rose-950/30 dark:text-rose-400 dark:border-rose-900/50"
+            }`}>
+              <strong className="block mb-1">Explanation:</strong>
+              {activeQuestion.explanation}
+            </p>
+          )}
+        </div>
+        <div className="ml-6 shrink-0">
+          {!quizSubmitted ? (
+            <button
+              onClick={submitQuiz}
+              disabled={selectedOption === null}
+              className="px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-300 dark:disabled:bg-slate-700 disabled:cursor-not-allowed text-white text-sm font-bold rounded-xl transition-all"
+            >
+              Submit Answer
+            </button>
+          ) : (
+            <button
+              onClick={nextQuizQuestion}
+              className="px-6 py-2.5 bg-slate-800 hover:bg-slate-900 dark:bg-white dark:hover:bg-gray-100 dark:text-slate-900 text-white text-sm font-bold rounded-xl transition-all"
+            >
+              Next Question
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Quiz;
diff --git a/src/app/visualizer/tree/algorithms/diameter/AlgorithmClient.jsx b/src/app/visualizer/tree/algorithms/diameter/AlgorithmClient.jsx
new file mode 100644
index 000000000..1d409321e
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/diameter/AlgorithmClient.jsx
@@ -0,0 +1,43 @@
+import Animation from "./animation";
+import Content from "./content";
+import CodeBlock from "./codeBlock";
+import Quiz from "./quiz";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+
+
+export default function DiameterAlgorithmPage() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Algorithms", "Tree Diameter")}
+      title="Tree Diameter"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      quiz={<Quiz />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.diameter}
+          description="Mark Tree Diameter as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other Tree Algorithms"
+          links={[
+            { text: "Lowest Common Ancestor", description: "Find the lowest shared parent.", url: "./lca" },
+            { text: "Tree Isomorphism", description: "Check if two trees are structurally identical.", url: "./isomorphism" },
+            { text: "Serialize/Deserialize", description: "Convert trees to strings and back.", url: "./serialization" },
+          ]}
+          columns="3"
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/algorithms/diameter/animation.jsx b/src/app/visualizer/tree/algorithms/diameter/animation.jsx
new file mode 100644
index 000000000..e4cbbfb50
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/diameter/animation.jsx
@@ -0,0 +1,249 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import { Play, RotateCcw, Info, Scan, RefreshCw } from "lucide-react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import usePlayback from "@/app/hooks/usePlayback";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { generateDiameterSteps } from "@/features/algorithms/tree/diameterLogic";
+
+const NODES = [
+  { id: "A", x: 400, y: 50, parent: null },
+  { id: "B", x: 250, y: 120, parent: "A" },
+  { id: "C", x: 550, y: 120, parent: "A" },
+  { id: "D", x: 150, y: 210, parent: "B" },
+  { id: "E", x: 350, y: 210, parent: "B" },
+  { id: "F", x: 100, y: 300, parent: "D" },
+  { id: "G", x: 200, y: 300, parent: "D" },
+  { id: "H", x: 400, y: 300, parent: "E" },
+  { id: "I", x: 450, y: 390, parent: "H" },
+];
+
+const EDGES = NODES.filter(n => n.parent).map(n => {
+  const p = NODES.find(parent => parent.id === n.parent);
+  return { id: `${p.id}-${n.id}`, x1: p.x, y1: p.y + 20, x2: n.x, y2: n.y - 20, parent: p.id, child: n.id };
+});
+
+export default function DiameterAnimation() {
+  const [animating, setAnimating] = useState(false);
+  const [message, setMessage] = useState("Click 'Find Diameter' to calculate subtree heights.");
+  
+  const [steps, setSteps] = useState([]);
+  const [currentStepIdx, setCurrentStepIdx] = useState(-1);
+  const { speed, setSpeed } = usePlayback(1);
+  const timerRef = useRef(null);
+  const lockRef = useRef(false);
+  const stepIdxRef = useRef(currentStepIdx);
+  const animatingRef = useRef(animating);
+
+  useEffect(() => { stepIdxRef.current = currentStepIdx; }, [currentStepIdx]);
+  useEffect(() => { animatingRef.current = animating; }, [animating]);
+
+  useVisualizerReset(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    lockRef.current = false;
+    setAnimating(false);
+    setMessage("...");
+    setSteps([]);
+    setCurrentStepIdx(-1);
+  });
+
+  const currentStep = steps[currentStepIdx] || null;
+  const activeNodes = currentStep ? currentStep.activeNodes : [];
+  const calculatedHeights = currentStep ? currentStep.calculatedHeights : {};
+  const maxDiameter = currentStep ? currentStep.maxDiameter : 0;
+  const diameterPathEdges = currentStep ? currentStep.diameterPathEdges : [];
+  const diameterPathNodes = currentStep ? currentStep.diameterPathNodes : [];
+
+
+  useEffect(() => {
+    if (currentStep) {
+      setMessage(currentStep.message);
+    }
+  }, [currentStep]);
+
+  useEffect(() => {
+    if (!animating || steps.length === 0 || lockRef.current) return;
+    if (currentStepIdx >= steps.length - 1) { setAnimating(false); return; }
+    lockRef.current = true;
+    timerRef.current = setTimeout(() => {
+      lockRef.current = false;
+      setCurrentStepIdx(p => p + 1);
+    }, 1600 / speed);
+    return () => { if (timerRef.current) clearTimeout(timerRef.current); };
+  }, [animating, currentStepIdx, steps, speed]);
+
+  const pauseVisualizer = () => { setAnimating(false); if (timerRef.current) clearTimeout(timerRef.current); lockRef.current = false; };
+  const startVisualizer = () => {
+    if (steps.length === 0) return;
+    setAnimating(true);
+    const nextIdx = currentStepIdx === -1 || currentStepIdx >= steps.length - 1 ? 0 : currentStepIdx + 1;
+    setCurrentStepIdx(nextIdx);
+  };
+  const stepForward = () => { if (lockRef.current) return; setAnimating(false); if (timerRef.current) clearTimeout(timerRef.current); if (stepIdxRef.current < steps.length - 1) setCurrentStepIdx(p => p + 1); };
+  const stepBackward = () => { if (lockRef.current) return; setAnimating(false); if (timerRef.current) clearTimeout(timerRef.current); if (stepIdxRef.current > 0) setCurrentStepIdx(p => p - 1); };
+  const resetPlayback = () => {
+    setAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    lockRef.current = false;
+    setCurrentStepIdx(-1);
+    setMessage("Playback reset.");
+  };
+
+  const handleFindDiameter = () => {
+    setAnimating(false);
+
+    const newSteps = generateDiameterSteps();
+
+    setSteps(newSteps);
+    setCurrentStepIdx(0);
+    setAnimating(true);
+  };
+
+  const handleReset = () => {
+    setAnimating(false);
+    setSteps([]);
+    setCurrentStepIdx(-1);
+    setMessage("Click 'Find Diameter' to calculate subtree heights.");
+  };
+
+  useVisualizerKeyboard({
+    onStepForward: stepForward,
+    onStepBackward: stepBackward,
+    onTogglePlay: animating ? pauseVisualizer : startVisualizer,
+    onReset: resetPlayback,
+    onSpeedChange: setSpeed,
+    speed: speed,
+    sorting: animating,
+    sorted: false,
+    enabled: true,
+  });
+
+  return (
+    <VisualizerInteractiveLayout>
+      <VisualizerCard>
+        <div className="flex justify-between items-center mb-6">
+          <div className="flex items-center gap-4 text-cyan-600 dark:text-cyan-400 font-mono bg-cyan-50 dark:bg-cyan-950/30 px-4 py-2 rounded-lg border border-cyan-200 dark:border-cyan-900/50">
+            Max Diameter: <span className="text-xl font-bold ml-2 text-cyan-700 dark:text-cyan-300">{maxDiameter}</span>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <button 
+              onClick={handleFindDiameter} 
+              disabled={animating}
+              className="flex items-center gap-2 px-6 py-2.5 text-sm font-bold bg-[#a435f0] hover:bg-[#8f2cd6] disabled:opacity-50 text-white rounded-xl transition-all shadow-md"
+            >
+              <Scan className="w-4 h-4" /> Find Diameter
+            </button>
+            <button 
+              onClick={handleReset} 
+              className="px-4 py-2.5 text-sm font-bold text-red-500 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-xl transition-all border border-red-500/30 flex items-center gap-2"
+            >
+              <RefreshCw className="w-4 h-4" /> Reset
+            </button>
+          </div>
+        </div>
+
+        <PlaybackControls 
+          isPlaying={animating}
+          onPlayPause={animating ? pauseVisualizer : startVisualizer}
+          onStepForward={stepForward}
+          onStepBackward={stepBackward}
+          onReset={resetPlayback}
+          speed={speed}
+          onSpeedChange={setSpeed}
+          disabled={steps.length === 0}
+          showPlayPause={true}
+        />
+      </VisualizerCard>
+
+      <VisualizerCard
+        className={
+          diameterPathEdges.length > 0
+            ? "border-cyan-200 bg-cyan-50 dark:border-cyan-900 dark:bg-cyan-950/30"
+            : animating
+                ? "border-[#a435f0]/30 bg-[#a435f0]/10 dark:border-[#a435f0]/50 dark:bg-[#a435f0]/20"
+                : ""
+        }
+      >
+        <div className="flex items-center text-xs text-gray-500 font-semibold gap-1.5 mb-2">
+          <Info className="w-4 h-4 text-[#a435f0]" /> Animation Status
+          <span className="ml-auto font-bold bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-gray-600 dark:text-gray-400">
+            Step {currentStepIdx !== -1 ? currentStepIdx + 1 : 0} / {steps.length || 0}
+          </span>
+        </div>
+        <div className="text-lg font-medium min-h-[28px]">{message}</div>
+      </VisualizerCard>
+
+      <VisualizerCard>
+        <div className="overflow-auto flex justify-center py-6 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 relative min-h-[500px]">
+          <svg width="800" height="420" viewBox="0 0 800 420" className="max-w-full h-auto drop-shadow-sm">
+            {/* Edges */}
+            {EDGES.map(e => {
+              const isPath = diameterPathEdges.includes(e.id) || diameterPathEdges.includes(`${e.child}-${e.parent}`);
+              
+              return (
+                <line 
+                  key={e.id} 
+                  x1={e.x1} y1={e.y1} x2={e.x2} y2={e.y2} 
+                  stroke={isPath ? "#06b6d4" : "#cbd5e1"} 
+                  strokeWidth={isPath ? "5" : "2"}
+                  className={`transition-all duration-500 ${!isPath && 'dark:stroke-slate-700'}`}
+                />
+              );
+            })}
+
+            {/* Nodes */}
+            {NODES.map(node => {
+              const isActive = activeNodes.includes(node.id);
+              const isPath = diameterPathNodes.includes(node.id);
+              const h = calculatedHeights[node.id];
+              
+              let fill = "var(--background)";
+              let stroke = "#94a3b8"; // slate-400
+              let r = "20";
+              let textFill = "var(--foreground)";
+
+              if (isPath) {
+                fill = "#cffafe"; // cyan-100
+                stroke = "#06b6d4"; // cyan-500
+                r = "26";
+                textFill = "#164e63"; // cyan-900
+              } else if (isActive) {
+                fill = "#ecfeff"; // cyan-50
+                stroke = "#06b6d4";
+                r = "24";
+                textFill = "#164e63";
+              } else if (h !== undefined) {
+                stroke = "#0891b2"; // cyan-600
+              }
+
+              return (
+                <g key={node.id} className="transition-all duration-500">
+                  {isPath && <circle cx={node.x} cy={node.y} r="32" fill="none" strokeWidth="2" className="stroke-cyan-400 opacity-80 animate-ping dark:stroke-cyan-400" />}
+                  {isActive && <circle cx={node.x} cy={node.y} r="30" fill="none" className="stroke-cyan-500 dark:stroke-cyan-400" strokeWidth="2" strokeDasharray="4,2" className="animate-spin-slow opacity-80" />}
+                  
+                  <circle 
+                    cx={node.x} cy={node.y} r={r} 
+                    fill={fill} stroke={stroke} strokeWidth="2.5" 
+                    className="shadow-sm transition-all duration-500 dark:stroke-slate-600" 
+                  />
+                  <text x={node.x} y={node.y + 4} textAnchor="middle" fill={textFill} fontSize="12" fontWeight="bold" className="transition-colors">{node.id}</text>
+                  
+                  {/* Height Indicator Label */}
+                  {h !== undefined && (
+                    <text x={node.x + 28} y={node.y + 4} fontSize="12" fontWeight="bold" className="fill-cyan-500 dark:fill-cyan-400">h:{h}</text>
+                  )}
+                </g>
+              );
+            })}
+          </svg>
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+}
diff --git a/src/app/visualizer/tree/algorithms/diameter/codeBlock.jsx b/src/app/visualizer/tree/algorithms/diameter/codeBlock.jsx
new file mode 100644
index 000000000..604c636c9
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/diameter/codeBlock.jsx
@@ -0,0 +1,76 @@
+"use client";
+import SharedCodeBlock from "@/app/components/ui/SharedCodeBlock";
+
+export default function DiameterCodeBlock() {
+  const codeExamples = {
+    javascript: `function diameterOfBinaryTree(root) {
+  let diameter = 0;
+  
+  function height(node) {
+    if (!node) return 0;
+    
+    const leftHeight = height(node.left);
+    const rightHeight = height(node.right);
+    
+    diameter = Math.max(diameter, leftHeight + rightHeight);
+    
+    return Math.max(leftHeight, rightHeight) + 1;
+  }
+  
+  height(root);
+  return diameter;
+}`,
+    python: `def diameterOfBinaryTree(self, root: Optional[TreeNode]) -> int:
+    self.diameter = 0
+    
+    def height(node):
+        if not node:
+            return 0
+            
+        left_height = height(node.left)
+        right_height = height(node.right)
+        
+        self.diameter = max(self.diameter, left_height + right_height)
+        
+        return max(left_height, right_height) + 1
+        
+    height(root)
+    return self.diameter`,
+    java: `int diameter = 0;
+
+public int diameterOfBinaryTree(TreeNode root) {
+    height(root);
+    return diameter;
+}
+
+private int height(TreeNode node) {
+    if (node == null) return 0;
+    
+    int leftHeight = height(node.left);
+    int rightHeight = height(node.right);
+    
+    diameter = Math.max(diameter, leftHeight + rightHeight);
+    
+    return Math.max(leftHeight, rightHeight) + 1;
+}`,
+    cpp: `int diameter = 0;
+
+int diameterOfBinaryTree(TreeNode* root) {
+    height(root);
+    return diameter;
+}
+
+int height(TreeNode* node) {
+    if (!node) return 0;
+    
+    int leftHeight = height(node->left);
+    int rightHeight = height(node->right);
+    
+    diameter = max(diameter, leftHeight + rightHeight);
+    
+    return max(leftHeight, rightHeight) + 1;
+}`
+  };
+
+  return <SharedCodeBlock title="Tree Diameter Code" codeExamples={codeExamples} color="text-cyan-500" />;
+}
diff --git a/src/app/visualizer/tree/algorithms/diameter/content.jsx b/src/app/visualizer/tree/algorithms/diameter/content.jsx
new file mode 100644
index 000000000..6bf2f5e03
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/diameter/content.jsx
@@ -0,0 +1,158 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { ArrowDownToLine, Maximize2, MoveUpRight, Lightbulb } from "lucide-react";
+
+const DiameterContent = () => {
+  return (
+    <main className="max-w-4xl mx-auto mt-8 mb-8">
+      <article className="bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden shadow-lg shadow-cyan-500/5">
+        
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-cyan-500 mr-3 rounded-full"></span>
+            What is Tree Diameter?
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed space-y-4">
+            <p>
+              The diameter of a binary tree is the length of the longest path between any two nodes in a tree. 
+              This path may or may not pass through the root. The length of a path between two nodes is represented by the number of edges between them.
+            </p>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e] bg-cyan-50/30 dark:bg-cyan-900/5">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-cyan-500 mr-3 rounded-full"></span>
+            Visual Example
+          </h2>
+          <div className="flex justify-center my-6">
+            <svg width="400" height="250" viewBox="0 0 400 250" className="drop-shadow-lg">
+              <line x1="200" y1="50" x2="100" y2="120" className="stroke-cyan-500 dark:stroke-cyan-400" strokeWidth="3" />
+              <line x1="200" y1="50" x2="300" y2="120" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="100" y1="120" x2="50" y2="190" className="stroke-cyan-500 dark:stroke-cyan-400" strokeWidth="3" />
+              <line x1="100" y1="120" x2="150" y2="190" className="stroke-cyan-500 dark:stroke-cyan-400" strokeWidth="3" />
+              <circle cx="200" cy="50" r="24" className="fill-cyan-900 dark:fill-cyan-800 stroke-cyan-500 dark:stroke-cyan-400" strokeWidth="2" />
+              <text x="200" y="55" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">1</text>
+              
+              <circle cx="100" cy="120" r="24" className="fill-cyan-900 dark:fill-cyan-800 stroke-cyan-500 dark:stroke-cyan-400" strokeWidth="2" />
+              <text x="100" y="125" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">2</text>
+              
+              <circle cx="300" cy="120" r="24" className="fill-white dark:fill-slate-900 stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <text x="300" y="125" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">3</text>
+              
+              <circle cx="50" cy="190" r="24" className="fill-cyan-900 dark:fill-cyan-800 stroke-cyan-500 dark:stroke-cyan-400" strokeWidth="2" className="drop-shadow-[0_0_10px_rgba(6,182,212,0.5)]" />
+              <text x="50" y="195" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">4</text>
+              
+              <circle cx="150" cy="190" r="24" className="fill-cyan-900 dark:fill-cyan-800 stroke-cyan-500 dark:stroke-cyan-400" strokeWidth="2" className="drop-shadow-[0_0_10px_rgba(6,182,212,0.5)]" />
+              <text x="150" y="195" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">5</text>
+            </svg>
+          </div>
+          <p className="text-center text-sm text-gray-500 dark:text-gray-400">
+            The longest path is [4, 2, 1, 5] (or [5, 2, 1, 4]) which has a length of 3 edges.
+          </p>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-cyan-500 mr-3 rounded-full"></span>
+            Algorithm Strategy
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-4 leading-relaxed">
+            <div className="mt-6 grid gap-4">
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-cyan-50/30 dark:from-neutral-900 dark:to-cyan-950/20 border-cyan-100 dark:border-cyan-900/50 hover:shadow-md hover:border-cyan-300 dark:hover:border-cyan-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-cyan-100 dark:bg-cyan-900/60 p-2 rounded-lg text-cyan-600 dark:text-cyan-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <ArrowDownToLine className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">1. Compute Subtree Heights</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      At any given node, recursively calculate the height of its left subtree and its right subtree. A null node has a height of 0.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-cyan-50/30 dark:from-neutral-900 dark:to-cyan-950/20 border-cyan-100 dark:border-cyan-900/50 hover:shadow-md hover:border-cyan-300 dark:hover:border-cyan-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-cyan-100 dark:bg-cyan-900/60 p-2 rounded-lg text-cyan-600 dark:text-cyan-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <Maximize2 className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">2. Update Max Diameter</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      The longest path passing through the current node is `leftHeight + rightHeight`. Keep track of the maximum sum seen so far globally.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-cyan-50/30 dark:from-neutral-900 dark:to-cyan-950/20 border-cyan-100 dark:border-cyan-900/50 hover:shadow-md hover:border-cyan-300 dark:hover:border-cyan-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-cyan-100 dark:bg-cyan-900/60 p-2 rounded-lg text-cyan-600 dark:text-cyan-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <MoveUpRight className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">3. Return Height</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      Return `Math.max(leftHeight, rightHeight) + 1` to the parent node so it can compute its own height and local diameter.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="p-6">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-cyan-500 mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <div className="flex flex-wrap gap-4 mb-6">
+              <div className="flex items-center gap-2 bg-cyan-50 dark:bg-cyan-900/20 px-4 py-2 rounded-lg border border-cyan-200 dark:border-cyan-800 shadow-sm">
+                <span className="font-semibold text-cyan-800 dark:text-cyan-300">Time:</span>
+                <span className="font-mono text-cyan-600 dark:text-cyan-400">O(N)</span>
+              </div>
+              <div className="flex items-center gap-2 bg-cyan-50 dark:bg-cyan-900/20 px-4 py-2 rounded-lg border border-cyan-200 dark:border-cyan-800 shadow-sm">
+                <span className="font-semibold text-cyan-800 dark:text-cyan-300">Space:</span>
+                <span className="font-mono text-cyan-600 dark:text-cyan-400">O(H)</span>
+              </div>
+            </div>
+            <p className="text-sm mb-6">Where N is the number of nodes, and H is the height of the tree (recursion stack).</p>
+            <div className="mt-4 bg-gray-50 dark:bg-neutral-900 rounded-xl p-4 border border-gray-200 dark:border-gray-800 shadow-inner">
+              <ComplexityGraph
+                bestCase={(n) => n}
+                averageCase={(n) => n}
+                worstCase={(n) => n}
+                maxN={50}
+                title="Time Complexity: O(N)"
+              />
+            </div>
+          </div>
+        </section>
+        
+        <section className="p-6 border-t border-[#f3f4f6] dark:border-[#1e1e1e] bg-gradient-to-r from-cyan-50 to-white dark:from-cyan-950/20 dark:to-neutral-950">
+          <div className="flex items-start gap-4">
+            <div className="mt-1 bg-cyan-100 dark:bg-cyan-900/50 p-2.5 rounded-xl shadow-sm text-cyan-600 dark:text-cyan-400">
+              <Lightbulb className="w-6 h-6" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold text-cyan-900 dark:text-cyan-300 mb-2">
+                Key Takeaways
+              </h2>
+              <ul className="list-disc pl-5 space-y-2 text-sm text-cyan-800 dark:text-cyan-200/80 leading-relaxed">
+                <li>You calculate the answer (diameter) as a side effect while performing a standard depth-first height calculation.</li>
+                <li>The diameter does not strictly have to pass through the absolute root of the entire tree. It can be localized to a left or right subtree.</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+};
+
+export default DiameterContent;
diff --git a/src/app/visualizer/tree/algorithms/diameter/quiz.jsx b/src/app/visualizer/tree/algorithms/diameter/quiz.jsx
new file mode 100644
index 000000000..fc3627bb2
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/diameter/quiz.jsx
@@ -0,0 +1,34 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const handleNext = () => {
+  const questions = [
+  {
+    "question": "What does 'diameter' measure in a binary tree?",
+    "options": [
+      "The number of leaf nodes",
+      "The longest path between any two nodes",
+      "The smallest subtree height",
+      "The number of nodes in the shortest path"
+    ],
+    "correctAnswer": 1,
+    "explanation": "The diameter is the number of edges in the longest path between two nodes."
+  },
+  {
+    "question": "How is the diameter typically computed at each node?",
+    "options": [
+      "height(left) + height(right)",
+      "height(left) - height(right)",
+      "height(left) * height(right)",
+      "min(height(left), height(right))"
+    ],
+    "correctAnswer": 0,
+    "explanation": "The candidate diameter through a node combines the heights of its left and right subtrees."
+  }
+];
+
+  return <QuizEngine title="Diameter Quiz" questions={questions} />;
+};
+
+export default handleNext;
diff --git a/src/app/visualizer/tree/algorithms/isomorphism/AlgorithmClient.jsx b/src/app/visualizer/tree/algorithms/isomorphism/AlgorithmClient.jsx
new file mode 100644
index 000000000..91163e557
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/isomorphism/AlgorithmClient.jsx
@@ -0,0 +1,43 @@
+import Animation from "./animation";
+import Content from "./content";
+import CodeBlock from "./codeBlock";
+import Quiz from "./quiz";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+
+
+export default function IsomorphismAlgorithmPage() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Algorithms", "Tree Isomorphism")}
+      title="Tree Isomorphism"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      quiz={<Quiz />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.isomorphism}
+          description="Mark Tree Isomorphism as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other Tree Algorithms"
+          links={[
+            { text: "Lowest Common Ancestor", description: "Find the lowest shared parent.", url: "./lca" },
+            { text: "Tree Diameter", description: "Find the longest path between any two nodes.", url: "./diameter" },
+            { text: "Serialize/Deserialize", description: "Convert trees to strings and back.", url: "./serialization" },
+          ]}
+          columns="3"
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/algorithms/isomorphism/animation.jsx b/src/app/visualizer/tree/algorithms/isomorphism/animation.jsx
new file mode 100644
index 000000000..861f19b01
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/isomorphism/animation.jsx
@@ -0,0 +1,277 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import { Play, RotateCcw, Info, ArrowLeftRight, RefreshCw } from "lucide-react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import usePlayback from "@/app/hooks/usePlayback";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { generateIsomorphismSteps } from "@/features/algorithms/tree/isomorphismLogic";
+
+// Tree 1 Setup
+const NODES1 = [
+  { id: "1-1", val: "1", x: 200, y: 50, parent: null },
+  { id: "1-2", val: "2", x: 100, y: 150, parent: "1-1", isLeft: true },
+  { id: "1-3", val: "3", x: 300, y: 150, parent: "1-1", isLeft: false },
+  { id: "1-4", val: "4", x: 50, y: 250, parent: "1-2", isLeft: true },
+  { id: "1-5", val: "5", x: 150, y: 250, parent: "1-2", isLeft: false },
+];
+
+const EDGES1 = NODES1.filter(n => n.parent).map(n => {
+  const p = NODES1.find(parent => parent.id === n.parent);
+  return { id: `${p.id}-${n.id}`, x1: p.x, y1: p.y + 20, x2: n.x, y2: n.y - 20, parent: p.id, child: n.id };
+});
+
+// Tree 2 Setup (Isomorphic, 2 and 3 swapped, 4 and 5 swapped under 2)
+const NODES2 = [
+  { id: "2-1", val: "1", x: 600, y: 50, parent: null },
+  { id: "2-3", val: "3", x: 500, y: 150, parent: "2-1", isLeft: true }, // swapped
+  { id: "2-2", val: "2", x: 700, y: 150, parent: "2-1", isLeft: false }, // swapped
+  { id: "2-5", val: "5", x: 650, y: 250, parent: "2-2", isLeft: true }, // swapped
+  { id: "2-4", val: "4", x: 750, y: 250, parent: "2-2", isLeft: false }, // swapped
+];
+
+const EDGES2 = NODES2.filter(n => n.parent).map(n => {
+  const p = NODES2.find(parent => parent.id === n.parent);
+  return { id: `${p.id}-${n.id}`, x1: p.x, y1: p.y + 20, x2: n.x, y2: n.y - 20, parent: p.id, child: n.id };
+});
+
+export default function IsomorphismAnimation() {
+  const [animating, setAnimating] = useState(false);
+  const [message, setMessage] = useState("Click 'Check Isomorphism' to compare the two trees step-by-step.");
+  
+  const [steps, setSteps] = useState([]);
+  const [currentStepIdx, setCurrentStepIdx] = useState(-1);
+  const { speed, setSpeed } = usePlayback(1);
+  const timerRef = useRef(null);
+  const lockRef = useRef(false);
+  const stepIdxRef = useRef(currentStepIdx);
+  const animatingRef = useRef(animating);
+
+  useEffect(() => { stepIdxRef.current = currentStepIdx; }, [currentStepIdx]);
+  useEffect(() => { animatingRef.current = animating; }, [animating]);
+
+  useVisualizerReset(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    lockRef.current = false;
+    setAnimating(false);
+    setMessage("...");
+    setSteps([]);
+    setCurrentStepIdx(-1);
+  });
+
+  const currentStep = steps[currentStepIdx] || null;
+  const activePairs = currentStep ? currentStep.activePairs : [];
+  const matchStatus = currentStep ? currentStep.matchStatus : {};
+  const isomorphic = currentStep ? currentStep.isomorphicResult : null;
+
+
+  useEffect(() => {
+    if (currentStep) {
+      setMessage(currentStep.message);
+    }
+  }, [currentStep]);
+
+  useEffect(() => {
+    if (!animating || steps.length === 0 || lockRef.current) return;
+    if (currentStepIdx >= steps.length - 1) { setAnimating(false); return; }
+    lockRef.current = true;
+    timerRef.current = setTimeout(() => {
+      lockRef.current = false;
+      setCurrentStepIdx(p => p + 1);
+    }, 1600 / speed);
+    return () => { if (timerRef.current) clearTimeout(timerRef.current); };
+  }, [animating, currentStepIdx, steps, speed]);
+
+  const pauseVisualizer = () => { setAnimating(false); if (timerRef.current) clearTimeout(timerRef.current); lockRef.current = false; };
+  const startVisualizer = () => {
+    if (steps.length === 0) return;
+    setAnimating(true);
+    const nextIdx = currentStepIdx === -1 || currentStepIdx >= steps.length - 1 ? 0 : currentStepIdx + 1;
+    setCurrentStepIdx(nextIdx);
+  };
+  const stepForward = () => { if (lockRef.current) return; setAnimating(false); if (timerRef.current) clearTimeout(timerRef.current); if (stepIdxRef.current < steps.length - 1) setCurrentStepIdx(p => p + 1); };
+  const stepBackward = () => { if (lockRef.current) return; setAnimating(false); if (timerRef.current) clearTimeout(timerRef.current); if (stepIdxRef.current > 0) setCurrentStepIdx(p => p - 1); };
+  const resetPlayback = () => {
+    setAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    lockRef.current = false;
+    setCurrentStepIdx(-1);
+    setMessage("Playback reset.");
+  };
+
+  const handleCheck = () => {
+    setAnimating(false);
+    const newSteps = generateIsomorphismSteps();
+    setSteps(newSteps);
+    setCurrentStepIdx(0);
+    setAnimating(true);
+  };
+
+  const handleReset = () => {
+    setAnimating(false);
+    setSteps([]);
+    setCurrentStepIdx(-1);
+    setMessage("Click 'Check Isomorphism' to compare the two trees step-by-step.");
+  };
+
+  useVisualizerKeyboard({
+    onStepForward: stepForward,
+    onStepBackward: stepBackward,
+    onTogglePlay: animating ? pauseVisualizer : startVisualizer,
+    onReset: resetPlayback,
+    onSpeedChange: setSpeed,
+    speed: speed,
+    sorting: animating,
+    sorted: false,
+    enabled: true,
+  });
+
+  return (
+    <VisualizerInteractiveLayout>
+      <VisualizerCard>
+        <div className="flex justify-between items-center mb-6">
+          <div className="flex items-center gap-4 text-emerald-600 dark:text-emerald-400 font-mono bg-emerald-50 dark:bg-emerald-950/30 px-4 py-2 rounded-lg border border-emerald-200 dark:border-emerald-900/50">
+            Result: <span className="text-xl font-bold ml-2 text-emerald-700 dark:text-emerald-300">{isomorphic === null ? "?" : (isomorphic ? "True" : "False")}</span>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <button 
+              onClick={handleCheck} 
+              disabled={animating}
+              className="flex items-center gap-2 px-6 py-2.5 text-sm font-bold bg-[#a435f0] hover:bg-[#8f2cd6] disabled:opacity-50 text-white rounded-xl transition-all shadow-md"
+            >
+              <Play className="w-4 h-4 fill-white" /> Check Isomorphism
+            </button>
+            <button 
+              onClick={handleReset} 
+              className="px-4 py-2.5 text-sm font-bold text-red-500 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-xl transition-all border border-red-500/30 flex items-center gap-2"
+            >
+              <RefreshCw className="w-4 h-4" /> Reset
+            </button>
+          </div>
+        </div>
+
+        <PlaybackControls 
+          isPlaying={animating}
+          onPlayPause={animating ? pauseVisualizer : startVisualizer}
+          onStepForward={stepForward}
+          onStepBackward={stepBackward}
+          onReset={resetPlayback}
+          speed={speed}
+          onSpeedChange={setSpeed}
+          disabled={steps.length === 0}
+          showPlayPause={true}
+        />
+      </VisualizerCard>
+
+      <VisualizerCard
+        className={
+          isomorphic !== null
+            ? "border-emerald-200 bg-emerald-50 dark:border-emerald-900 dark:bg-emerald-950/30"
+            : animating
+                ? "border-[#a435f0]/30 bg-[#a435f0]/10 dark:border-[#a435f0]/50 dark:bg-[#a435f0]/20"
+                : ""
+        }
+      >
+        <div className="flex items-center text-xs text-gray-500 font-semibold gap-1.5 mb-2">
+          <Info className="w-4 h-4 text-[#a435f0]" /> Animation Status
+          <span className="ml-auto font-bold bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-gray-600 dark:text-gray-400">
+            Step {currentStepIdx !== -1 ? currentStepIdx + 1 : 0} / {steps.length || 0}
+          </span>
+        </div>
+        <div className="text-lg font-medium min-h-[28px]">{message}</div>
+      </VisualizerCard>
+
+      <VisualizerCard>
+        <div className="overflow-auto flex justify-center py-6 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 relative min-h-[500px]">
+          <svg width="800" height="350" viewBox="0 0 800 350" className="max-w-full h-auto drop-shadow-sm">
+            {/* Divider */}
+            <line x1="400" y1="0" x2="400" y2="350" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" strokeDasharray="5,5" className="dark:stroke-slate-700" />
+            <text x="200" y="20" fill="var(--foreground)" fontSize="16" fontWeight="bold" textAnchor="middle">Tree 1</text>
+            <text x="600" y="20" fill="var(--foreground)" fontSize="16" fontWeight="bold" textAnchor="middle">Tree 2</text>
+
+            {/* Tree 1 Edges */}
+            {EDGES1.map(e => <line key={e.id} x1={e.x1} y1={e.y1} x2={e.x2} y2={e.y2} className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" className="dark:stroke-slate-700 transition-colors" />)}
+            {/* Tree 2 Edges */}
+            {EDGES2.map(e => <line key={e.id} x1={e.x1} y1={e.y1} x2={e.x2} y2={e.y2} className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" className="dark:stroke-slate-700 transition-colors" />)}
+
+            {/* Active Comparison Indicator */}
+            {activePairs.length === 2 && (
+              <path 
+                d={`M ${NODES1.find(n => n.id === activePairs[0]).x} ${NODES1.find(n => n.id === activePairs[0]).y} Q 400 0 ${NODES2.find(n => n.id === activePairs[1]).x} ${NODES2.find(n => n.id === activePairs[1]).y}`}
+                fill="none"
+                className="stroke-purple-600 dark:stroke-purple-500"
+                strokeWidth="2"
+                strokeDasharray="5,5"
+                className="opacity-60 animate-pulse"
+              />
+            )}
+
+            {/* Tree 1 Nodes */}
+            {NODES1.map(node => {
+              const isActive = activePairs[0] === node.id;
+              let stroke = "#94a3b8"; // slate-400
+              let fill = "var(--background)";
+              let textFill = "var(--foreground)";
+              
+              if (isActive) {
+                stroke = "#a435f0";
+                fill = "#f3e8ff"; // purple-100
+                textFill = "#6b21a8"; // purple-800
+              }
+
+              // Check if involved in a match/mismatch
+              Object.entries(matchStatus).forEach(([pairKey, status]) => {
+                if (pairKey.startsWith(node.id + "_")) {
+                  if (status === "match") { stroke = "#10b981"; fill = "#d1fae5"; textFill = "#047857"; } // emerald
+                  if (status === "mismatch") { stroke = "#ef4444"; fill = "#fee2e2"; textFill = "#b91c1c"; } // red
+                }
+              });
+
+              return (
+                <g key={node.id} className="transition-all duration-300">
+                  {isActive && <circle cx={node.x} cy={node.y} r="30" fill="none" className="stroke-purple-300 dark:stroke-purple-400" strokeWidth="2" strokeDasharray="4,2" className="animate-spin-slow opacity-80" />}
+                  <circle cx={node.x} cy={node.y} r="24" fill={fill} stroke={stroke} strokeWidth="2.5" className="shadow-sm transition-all duration-300 dark:stroke-slate-600" />
+                  <text x={node.x} y={node.y + 5} textAnchor="middle" fill={textFill} fontSize="14" fontWeight="bold" className="transition-colors">{node.val}</text>
+                </g>
+              );
+            })}
+
+            {/* Tree 2 Nodes */}
+            {NODES2.map(node => {
+              const isActive = activePairs[1] === node.id;
+              let stroke = "#94a3b8";
+              let fill = "var(--background)";
+              let textFill = "var(--foreground)";
+              
+              if (isActive) {
+                stroke = "#a435f0";
+                fill = "#f3e8ff";
+                textFill = "#6b21a8";
+              }
+
+              Object.entries(matchStatus).forEach(([pairKey, status]) => {
+                if (pairKey.endsWith("_" + node.id)) {
+                  if (status === "match") { stroke = "#10b981"; fill = "#d1fae5"; textFill = "#047857"; }
+                  if (status === "mismatch") { stroke = "#ef4444"; fill = "#fee2e2"; textFill = "#b91c1c"; }
+                }
+              });
+
+              return (
+                <g key={node.id} className="transition-all duration-300">
+                  {isActive && <circle cx={node.x} cy={node.y} r="30" fill="none" className="stroke-purple-300 dark:stroke-purple-400" strokeWidth="2" strokeDasharray="4,2" className="animate-spin-slow opacity-80" />}
+                  <circle cx={node.x} cy={node.y} r="24" fill={fill} stroke={stroke} strokeWidth="2.5" className="shadow-sm transition-all duration-300 dark:stroke-slate-600" />
+                  <text x={node.x} y={node.y + 5} textAnchor="middle" fill={textFill} fontSize="14" fontWeight="bold" className="transition-colors">{node.val}</text>
+                </g>
+              );
+            })}
+          </svg>
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+}
diff --git a/src/app/visualizer/tree/algorithms/isomorphism/codeBlock.jsx b/src/app/visualizer/tree/algorithms/isomorphism/codeBlock.jsx
new file mode 100644
index 000000000..ede2bed98
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/isomorphism/codeBlock.jsx
@@ -0,0 +1,63 @@
+"use client";
+import SharedCodeBlock from "@/app/components/ui/SharedCodeBlock";
+
+export default function IsomorphismCodeBlock() {
+  const codeExamples = {
+    javascript: `function isIsomorphic(root1, root2) {
+  if (!root1 && !root2) return true;
+  if (!root1 || !root2) return false;
+  if (root1.val !== root2.val) return false;
+
+  const noSwap = isIsomorphic(root1.left, root2.left) && 
+                 isIsomorphic(root1.right, root2.right);
+                 
+  const swap = isIsomorphic(root1.left, root2.right) && 
+               isIsomorphic(root1.right, root2.left);
+
+  return noSwap || swap;
+}`,
+    python: `def isIsomorphic(self, root1: Optional[TreeNode], root2: Optional[TreeNode]) -> bool:
+    if not root1 and not root2:
+        return True
+    if not root1 or not root2:
+        return False
+    if root1.val != root2.val:
+        return False
+        
+    no_swap = self.isIsomorphic(root1.left, root2.left) and \\
+              self.isIsomorphic(root1.right, root2.right)
+              
+    swap = self.isIsomorphic(root1.left, root2.right) and \\
+           self.isIsomorphic(root1.right, root2.left)
+           
+    return no_swap or swap`,
+    java: `public boolean isIsomorphic(TreeNode root1, TreeNode root2) {
+    if (root1 == null && root2 == null) return true;
+    if (root1 == null || root2 == null) return false;
+    if (root1.val != root2.val) return false;
+    
+    boolean noSwap = isIsomorphic(root1.left, root2.left) && 
+                     isIsomorphic(root1.right, root2.right);
+                     
+    boolean swap = isIsomorphic(root1.left, root2.right) && 
+                   isIsomorphic(root1.right, root2.left);
+                   
+    return noSwap || swap;
+}`,
+    cpp: `bool isIsomorphic(TreeNode* root1, TreeNode* root2) {
+    if (!root1 && !root2) return true;
+    if (!root1 || !root2) return false;
+    if (root1->val != root2->val) return false;
+    
+    bool noSwap = isIsomorphic(root1->left, root2->left) && 
+                  isIsomorphic(root1->right, root2->right);
+                  
+    bool swap = isIsomorphic(root1->left, root2->right) && 
+                isIsomorphic(root1->right, root2->left);
+                
+    return noSwap || swap;
+}`
+  };
+
+  return <SharedCodeBlock title="Tree Isomorphism Code" codeExamples={codeExamples} color="text-green-500" />;
+}
diff --git a/src/app/visualizer/tree/algorithms/isomorphism/content.jsx b/src/app/visualizer/tree/algorithms/isomorphism/content.jsx
new file mode 100644
index 000000000..1156f3598
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/isomorphism/content.jsx
@@ -0,0 +1,184 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { CopySlash, ArrowLeftRight, CheckCircle2, Lightbulb } from "lucide-react";
+
+const IsomorphismContent = () => {
+  return (
+    <main className="max-w-4xl mx-auto mt-8 mb-8">
+      <article className="bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden shadow-lg shadow-green-500/5">
+        
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-green-500 mr-3 rounded-full"></span>
+            What is Tree Isomorphism?
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed space-y-4">
+            <p>
+              Two trees are considered <strong>isomorphic</strong> if one tree can be transformed into the other by swapping the left and right children of a number of nodes (including potentially zero swaps). Essentially, they represent the same structure if we ignore the left/right ordering of children.
+            </p>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e] bg-green-50/30 dark:bg-green-900/5">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-green-500 mr-3 rounded-full"></span>
+            Visual Example
+          </h2>
+          <div className="flex justify-center my-6 gap-8 items-center">
+            {/* Tree 1 */}
+            <svg width="250" height="200" viewBox="0 0 250 200" className="drop-shadow-lg">
+              <line x1="125" y1="40" x2="60" y2="100" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="125" y1="40" x2="190" y2="100" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="60" y1="100" x2="30" y2="160" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="60" y1="100" x2="90" y2="160" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              
+              <circle cx="125" cy="40" r="20" className="fill-white dark:fill-slate-900 stroke-green-500 dark:stroke-green-400" strokeWidth="2" />
+              <text x="125" y="45" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">1</text>
+              
+              <circle cx="60" cy="100" r="20" className="fill-green-900 dark:fill-green-800 stroke-green-500 dark:stroke-green-400" strokeWidth="2" />
+              <text x="60" y="105" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">2</text>
+              
+              <circle cx="190" cy="100" r="20" className="fill-white dark:fill-slate-900 stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <text x="190" y="105" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">3</text>
+              
+              <circle cx="30" cy="160" r="20" className="fill-green-900 dark:fill-green-800 stroke-green-500 dark:stroke-green-400" strokeWidth="2" />
+              <text x="30" y="165" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">4</text>
+
+              <circle cx="90" cy="160" r="20" className="fill-green-900 dark:fill-green-800 stroke-green-500 dark:stroke-green-400" strokeWidth="2" />
+              <text x="90" y="165" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">5</text>
+            </svg>
+
+            <ArrowLeftRight className="w-8 h-8 text-green-500" />
+
+            {/* Tree 2 */}
+            <svg width="250" height="200" viewBox="0 0 250 200" className="drop-shadow-lg">
+              <line x1="125" y1="40" x2="60" y2="100" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="125" y1="40" x2="190" y2="100" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="190" y1="100" x2="160" y2="160" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="190" y1="100" x2="220" y2="160" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              
+              <circle cx="125" cy="40" r="20" className="fill-white dark:fill-slate-900 stroke-green-500 dark:stroke-green-400" strokeWidth="2" />
+              <text x="125" y="45" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">1</text>
+              
+              <circle cx="60" cy="100" r="20" className="fill-white dark:fill-slate-900 stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <text x="60" y="105" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">3</text>
+              
+              <circle cx="190" cy="100" r="20" className="fill-green-900 dark:fill-green-800 stroke-green-500 dark:stroke-green-400" strokeWidth="2" />
+              <text x="190" y="105" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">2</text>
+              
+              <circle cx="160" cy="160" r="20" className="fill-green-900 dark:fill-green-800 stroke-green-500 dark:stroke-green-400" strokeWidth="2" />
+              <text x="160" y="165" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">5</text>
+
+              <circle cx="220" cy="160" r="20" className="fill-green-900 dark:fill-green-800 stroke-green-500 dark:stroke-green-400" strokeWidth="2" />
+              <text x="220" y="165" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">4</text>
+            </svg>
+          </div>
+          <p className="text-center text-sm text-gray-500 dark:text-gray-400">
+            These trees are isomorphic. If you swap the children of node 1, and then swap the children of node 2, they become identical.
+          </p>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-green-500 mr-3 rounded-full"></span>
+            Algorithm Strategy
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-4 leading-relaxed">
+            <div className="mt-6 grid gap-4">
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-green-50/30 dark:from-neutral-900 dark:to-green-950/20 border-green-100 dark:border-green-900/50 hover:shadow-md hover:border-green-300 dark:hover:border-green-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-green-100 dark:bg-green-900/60 p-2 rounded-lg text-green-600 dark:text-green-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <CheckCircle2 className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">1. Value Equality</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      First check if both nodes are null (return true) or if only one is null or values differ (return false).
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-green-50/30 dark:from-neutral-900 dark:to-green-950/20 border-green-100 dark:border-green-900/50 hover:shadow-md hover:border-green-300 dark:hover:border-green-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-green-100 dark:bg-green-900/60 p-2 rounded-lg text-green-600 dark:text-green-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <CopySlash className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">2. Check Non-Swapped</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      Assume the children were NOT swapped. Recursively verify if `root1.left` is isomorphic to `root2.left`, AND `root1.right` is isomorphic to `root2.right`.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-green-50/30 dark:from-neutral-900 dark:to-green-950/20 border-green-100 dark:border-green-900/50 hover:shadow-md hover:border-green-300 dark:hover:border-green-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-green-100 dark:bg-green-900/60 p-2 rounded-lg text-green-600 dark:text-green-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <ArrowLeftRight className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">3. Check Swapped</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      Assume the children WERE swapped. Recursively verify if `root1.left` is isomorphic to `root2.right`, AND `root1.right` is isomorphic to `root2.left`. Return true if either the swapped or non-swapped check passes.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="p-6">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-green-500 mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <div className="flex flex-wrap gap-4 mb-6">
+              <div className="flex items-center gap-2 bg-green-50 dark:bg-green-900/20 px-4 py-2 rounded-lg border border-green-200 dark:border-green-800 shadow-sm">
+                <span className="font-semibold text-green-800 dark:text-green-300">Time:</span>
+                <span className="font-mono text-green-600 dark:text-green-400">O(min(N1, N2))</span>
+              </div>
+              <div className="flex items-center gap-2 bg-green-50 dark:bg-green-900/20 px-4 py-2 rounded-lg border border-green-200 dark:border-green-800 shadow-sm">
+                <span className="font-semibold text-green-800 dark:text-green-300">Space:</span>
+                <span className="font-mono text-green-600 dark:text-green-400">O(min(H1, H2))</span>
+              </div>
+            </div>
+            <p className="text-sm mb-6">Where N1/N2 are the number of nodes, and H1/H2 are the heights. In the worst case (e.g. perfect binary trees), time could be O(N^2) if not optimized, but practically bounds are close to O(N) for unbalanced comparisons.</p>
+            <div className="mt-4 bg-gray-50 dark:bg-neutral-900 rounded-xl p-4 border border-gray-200 dark:border-gray-800 shadow-inner">
+              <ComplexityGraph
+                bestCase={(n) => n}
+                averageCase={(n) => n}
+                worstCase={(n) => n * n}
+                maxN={50}
+                title="Time Complexity: O(min(M, N))"
+              />
+            </div>
+          </div>
+        </section>
+        
+        <section className="p-6 border-t border-[#f3f4f6] dark:border-[#1e1e1e] bg-gradient-to-r from-green-50 to-white dark:from-green-950/20 dark:to-neutral-950">
+          <div className="flex items-start gap-4">
+            <div className="mt-1 bg-green-100 dark:bg-green-900/50 p-2.5 rounded-xl shadow-sm text-green-600 dark:text-green-400">
+              <Lightbulb className="w-6 h-6" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold text-green-900 dark:text-green-300 mb-2">
+                Key Takeaways
+              </h2>
+              <ul className="list-disc pl-5 space-y-2 text-sm text-green-800 dark:text-green-200/80 leading-relaxed">
+                <li>Isomorphism is a classic example of &quot;try both possibilities&quot; recursion. We branch into two possibilities at every step: swapped and unswapped.</li>
+                <li>Because of short-circuit evaluation (`||` and `&&`), the recursion often stops early if structural mismatches are found.</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+};
+
+export default IsomorphismContent;
diff --git a/src/app/visualizer/tree/algorithms/isomorphism/quiz.jsx b/src/app/visualizer/tree/algorithms/isomorphism/quiz.jsx
new file mode 100644
index 000000000..b321dec90
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/isomorphism/quiz.jsx
@@ -0,0 +1,34 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const handleNext = () => {
+  const questions = [
+  {
+    "question": "Can two trees with different node values still be isomorphic?",
+    "options": [
+      "Yes, if the structure matches",
+      "No, values must match exactly",
+      "Only if they are both binary search trees",
+      "Only if the trees are balanced"
+    ],
+    "correctAnswer": 0,
+    "explanation": "Tree isomorphism depends on structure, so values can differ."
+  },
+  {
+    "question": "What operation may be needed to compare two trees for isomorphism?",
+    "options": [
+      "Swapping left and right children",
+      "Rotating the tree",
+      "Rebalancing the tree",
+      "Reversing the node values"
+    ],
+    "correctAnswer": 0,
+    "explanation": "Structural equivalence may require swapping children at some nodes."
+  }
+];
+
+  return <QuizEngine title="Isomorphism Quiz" questions={questions} />;
+};
+
+export default handleNext;
diff --git a/src/app/visualizer/tree/algorithms/lca/AlgorithmClient.jsx b/src/app/visualizer/tree/algorithms/lca/AlgorithmClient.jsx
new file mode 100644
index 000000000..68a4fb32f
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/lca/AlgorithmClient.jsx
@@ -0,0 +1,43 @@
+import Animation from "./animation";
+import Content from "./content";
+import CodeBlock from "./codeBlock";
+import Quiz from "./quiz";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+
+
+export default function LCAAlgorithmPage() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Algorithms", "Lowest Common Ancestor")}
+      title="Lowest Common Ancestor"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      quiz={<Quiz />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.lca}
+          description="Mark Lowest Common Ancestor as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other Tree Algorithms"
+          links={[
+            { text: "Tree Diameter", description: "Find the longest path between any two nodes.", url: "./diameter" },
+            { text: "Tree Isomorphism", description: "Check if two trees are structurally identical.", url: "./isomorphism" },
+            { text: "Serialize/Deserialize", description: "Convert trees to strings and back.", url: "./serialization" },
+          ]}
+          columns="3"
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/algorithms/lca/animation.jsx b/src/app/visualizer/tree/algorithms/lca/animation.jsx
new file mode 100644
index 000000000..939eb3006
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/lca/animation.jsx
@@ -0,0 +1,374 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import { Search, RotateCcw, Info, RefreshCw } from "lucide-react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import usePlayback from "@/app/hooks/usePlayback";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { generateLcaSequence } from "@/features/algorithms/tree/lcaLogic";
+
+const NODES = [
+  { id: "3", val: "3", x: 400, y: 60, parent: null },
+  { id: "5", val: "5", x: 250, y: 150, parent: "3" },
+  { id: "1", val: "1", x: 550, y: 150, parent: "3" },
+  { id: "6", val: "6", x: 150, y: 240, parent: "5" },
+  { id: "2", val: "2", x: 350, y: 240, parent: "5" },
+  { id: "0", val: "0", x: 450, y: 240, parent: "1" },
+  { id: "8", val: "8", x: 650, y: 240, parent: "1" },
+  { id: "7", val: "7", x: 280, y: 330, parent: "2" },
+  { id: "4", val: "4", x: 420, y: 330, parent: "2" },
+];
+
+const EDGES = NODES.filter(n => n.parent).map(n => {
+  const p = NODES.find(parent => parent.id === n.parent);
+  return { id: `${p.id}-${n.id}`, x1: p.x, y1: p.y + 20, x2: n.x, y2: n.y - 20, parent: p.id, child: n.id };
+});
+
+export default function LCAAnimation() {
+  const [targetP, setTargetP] = useState("5");
+  const [targetQ, setTargetQ] = useState("1");
+  const [animating, setAnimating] = useState(false);
+  const [message, setMessage] = useState("Select two nodes and click 'Find LCA' to trace the paths.");
+  
+  const [steps, setSteps] = useState([]);
+  const [currentStepIdx, setCurrentStepIdx] = useState(-1);
+  const { speed, setSpeed } = usePlayback(1);
+  const timerRef = useRef(null);
+  const lockRef = useRef(false);
+  const stepIdxRef = useRef(currentStepIdx);
+  const animatingRef = useRef(animating);
+
+  useEffect(() => { stepIdxRef.current = currentStepIdx; }, [currentStepIdx]);
+  useEffect(() => { animatingRef.current = animating; }, [animating]);
+
+  useVisualizerReset(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    lockRef.current = false;
+    setTargetP("5");
+    setTargetQ("1");
+    setAnimating(false);
+    setMessage("...");
+    setSteps([]);
+    setCurrentStepIdx(-1);
+  });
+
+  const currentStep = steps[currentStepIdx] || null;
+  const activeNode = currentStep ? currentStep.activeNode : null;
+  const visitedNodes = currentStep ? currentStep.visitedNodes : [];
+  const foundNodes = currentStep ? currentStep.foundNodes : [];
+  const backtrackingEdges = currentStep ? currentStep.backtrackingEdges : [];
+  const lcaNode = currentStep ? currentStep.lcaNode : null;
+
+
+  useEffect(() => {
+    if (currentStep) {
+      setMessage(currentStep.message);
+    }
+  }, [currentStep]);
+
+  useEffect(() => {
+    if (!animating || steps.length === 0 || lockRef.current) return;
+    if (currentStepIdx >= steps.length - 1) { setAnimating(false); return; }
+    lockRef.current = true;
+    timerRef.current = setTimeout(() => {
+      lockRef.current = false;
+      setCurrentStepIdx(p => p + 1);
+    }, 1600 / speed);
+    return () => { if (timerRef.current) clearTimeout(timerRef.current); };
+  }, [animating, currentStepIdx, steps, speed]);
+
+  const pauseVisualizer = () => { setAnimating(false); if (timerRef.current) clearTimeout(timerRef.current); lockRef.current = false; };
+  const startVisualizer = () => {
+    if (steps.length === 0) return;
+    setAnimating(true);
+    const nextIdx = currentStepIdx === -1 || currentStepIdx >= steps.length - 1 ? 0 : currentStepIdx + 1;
+    setCurrentStepIdx(nextIdx);
+  };
+  const stepForward = () => { if (lockRef.current) return; setAnimating(false); if (timerRef.current) clearTimeout(timerRef.current); if (stepIdxRef.current < steps.length - 1) setCurrentStepIdx(p => p + 1); };
+  const stepBackward = () => { if (lockRef.current) return; setAnimating(false); if (timerRef.current) clearTimeout(timerRef.current); if (stepIdxRef.current > 0) setCurrentStepIdx(p => p - 1); };
+  const resetPlayback = () => {
+    setAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    lockRef.current = false;
+    setCurrentStepIdx(-1);
+    setMessage("Playback reset.");
+  };
+
+
+
+  const handleFindLca = () => {
+    if (targetP === targetQ) {
+      setMessage("Please select two distinct nodes.");
+      return;
+    }
+    setAnimating(false);
+
+    const sequence = generateLcaSequence("3", targetP, targetQ, EDGES);
+    const newSteps = [];
+    
+    let currentVisited = [];
+    let currentFound = [];
+    let currentBacktracking = [];
+    let currentLca = null;
+    let currentActiveNode = null;
+    let lcaResolved = false;
+    let msg = "";
+
+    for (const event of sequence) {
+      switch (event.type) {
+        case "VISIT":
+          if (!lcaResolved) {
+            currentActiveNode = event.node;
+            if (!currentVisited.includes(event.node)) {
+              currentVisited = [...currentVisited, event.node];
+            }
+            msg = `Exploring node ${event.node}...`;
+          }
+          break;
+        case "FOUND_TARGET":
+          if (!currentFound.includes(event.node)) {
+            currentFound = [...currentFound, event.node];
+          }
+          if (!lcaResolved) {
+            msg = `Node ${event.node} matches target!`;
+          }
+          break;
+        case "RETURN_LEFT":
+        case "RETURN_RIGHT":
+          if (!lcaResolved) {
+            currentActiveNode = event.node;
+            if (event.val) {
+              const edge = `${event.node}-${event.child}`;
+              if (!currentBacktracking.includes(edge)) currentBacktracking = [...currentBacktracking, edge];
+              msg = `Subtree returned ${event.val}. Propagating up to ${event.node}.`;
+            } else {
+              msg = `Subtree returned null.`;
+            }
+          } else if (event.val) {
+            const edge = `${event.node}-${event.child}`;
+            if (!currentBacktracking.includes(edge)) currentBacktracking = [...currentBacktracking, edge];
+          }
+          break;
+        case "LCA_FOUND":
+          lcaResolved = true;
+          currentLca = event.node;
+          currentActiveNode = null; 
+          msg = `Lowest Common Ancestor = ${event.node}`;
+          break;
+        case "BACKTRACK":
+          if (!lcaResolved && event.node !== "3") { 
+            if (event.returnValue) {
+              msg = `Returning ${event.returnValue} up to parent.`;
+            } else {
+              msg = `Returning null up to parent.`;
+            }
+          }
+          break;
+        case "FINISH":
+          currentActiveNode = null;
+          if (!lcaResolved) {
+              const actualLca = sequence.find(s => s.type === "BACKTRACK" && s.returnValue && s.node === s.returnValue)?.node;
+              currentLca = actualLca;
+              msg = `Lowest Common Ancestor = ${actualLca}`;
+          }
+          break;
+      }
+      
+      newSteps.push({
+        activeNode: currentActiveNode,
+        visitedNodes: [...currentVisited],
+        foundNodes: [...currentFound],
+        backtrackingEdges: [...currentBacktracking],
+        lcaNode: currentLca,
+        message: msg
+      });
+    }
+
+    setSteps(newSteps);
+    setCurrentStepIdx(0);
+    setAnimating(true);
+  };
+
+  const handleReset = () => {
+    setAnimating(false);
+    setSteps([]);
+    setCurrentStepIdx(-1);
+    setMessage("Select two nodes and click 'Find LCA' to trace the paths.");
+  };
+
+  useVisualizerKeyboard({
+    onStepForward: stepForward,
+    onStepBackward: stepBackward,
+    onTogglePlay: animating ? pauseVisualizer : startVisualizer,
+    onReset: resetPlayback,
+    onSpeedChange: setSpeed,
+    speed: speed,
+    sorting: animating,
+    sorted: false,
+    enabled: true,
+  });
+
+  // SVG Helper functions
+  const getNodeFill = (nodeId) => {
+      if (lcaNode === nodeId) return "var(--background)"; 
+      if (foundNodes.includes(nodeId)) return "#fef3c7"; 
+      if (activeNode === nodeId) return "#fef3c7";
+      return "var(--background)";
+  };
+
+  const getNodeStroke = (nodeId) => {
+      if (lcaNode === nodeId) return "#f59e0b"; 
+      if (foundNodes.includes(nodeId)) return "#f59e0b"; 
+      if (activeNode === nodeId) return "#f59e0b"; 
+      if (visitedNodes.includes(nodeId)) return "#94a3b8"; 
+      return "#94a3b8"; 
+  };
+  
+  const getTextColor = (nodeId) => {
+      if (lcaNode === nodeId) return "#f59e0b"; 
+      if (foundNodes.includes(nodeId)) return "#d97706"; 
+      if (activeNode === nodeId) return "#d97706"; 
+      if (visitedNodes.includes(nodeId)) return "var(--foreground)"; 
+      return "var(--foreground)"; 
+  };
+
+  return (
+    <VisualizerInteractiveLayout>
+      <VisualizerCard>
+        <div className="flex justify-between items-center mb-6">
+          <div className="flex items-center gap-6">
+            <div className="flex items-center gap-2">
+              <label className="text-sm font-bold text-gray-700 dark:text-gray-300">Node p:</label>
+              <select 
+                value={targetP} 
+                onChange={e => setTargetP(e.target.value)}
+                disabled={animating}
+                className="bg-gray-50 text-amber-600 font-bold px-3 py-1.5 rounded-lg border border-gray-200 outline-none focus:border-amber-500 dark:bg-gray-800 dark:border-gray-700 dark:text-amber-500 disabled:opacity-50 transition-colors"
+              >
+                {NODES.map(n => <option key={`p-${n.id}`} value={n.id}>{n.val}</option>)}
+              </select>
+            </div>
+            <div className="flex items-center gap-2">
+              <label className="text-sm font-bold text-gray-700 dark:text-gray-300">Node q:</label>
+              <select 
+                value={targetQ} 
+                onChange={e => setTargetQ(e.target.value)}
+                disabled={animating}
+                className="bg-gray-50 text-amber-600 font-bold px-3 py-1.5 rounded-lg border border-gray-200 outline-none focus:border-amber-500 dark:bg-gray-800 dark:border-gray-700 dark:text-amber-500 disabled:opacity-50 transition-colors"
+              >
+                {NODES.map(n => <option key={`q-${n.id}`} value={n.id}>{n.val}</option>)}
+              </select>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <button 
+              onClick={handleFindLca} 
+              disabled={animating}
+              className="flex items-center gap-2 px-6 py-2.5 text-sm font-bold bg-[#a435f0] hover:bg-[#8f2cd6] disabled:opacity-50 text-white rounded-xl transition-all shadow-md"
+            >
+              <Search className="w-4 h-4" /> Find LCA
+            </button>
+            <button 
+              onClick={handleReset} 
+              className="px-4 py-2.5 text-sm font-bold text-red-500 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-xl transition-all border border-red-500/30 flex items-center gap-2"
+            >
+              <RefreshCw className="w-4 h-4" /> Reset
+            </button>
+          </div>
+        </div>
+
+        <PlaybackControls 
+          isPlaying={animating}
+          onPlayPause={animating ? pauseVisualizer : startVisualizer}
+          onStepForward={stepForward}
+          onStepBackward={stepBackward}
+          onReset={resetPlayback}
+          speed={speed}
+          onSpeedChange={setSpeed}
+          disabled={steps.length === 0}
+          showPlayPause={true}
+        />
+      </VisualizerCard>
+
+      <VisualizerCard
+        className={
+          lcaNode 
+            ? "border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30"
+            : animating
+                ? "border-[#a435f0]/30 bg-[#a435f0]/10 dark:border-[#a435f0]/50 dark:bg-[#a435f0]/20"
+                : ""
+        }
+      >
+        <div className="flex items-center text-xs text-gray-500 font-semibold gap-1.5 mb-2">
+          <Info className="w-4 h-4 text-[#a435f0]" /> Animation Status
+          <span className="ml-auto font-bold bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-gray-600 dark:text-gray-400">
+            Step {currentStepIdx !== -1 ? currentStepIdx + 1 : 0} / {steps.length || 0}
+          </span>
+        </div>
+        <div className="text-lg font-medium min-h-[28px]">{message}</div>
+      </VisualizerCard>
+
+      <VisualizerCard>
+        <div className="overflow-auto flex justify-center py-6 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 relative min-h-[500px]">
+          <svg width="800" height="420" viewBox="0 0 800 420" className="max-w-full h-auto drop-shadow-sm">
+            {/* Edges */}
+            {EDGES.map(e => {
+              const edgeId = `${e.parent}-${e.child}`;
+              const isBacktracking = backtrackingEdges.includes(edgeId);
+              
+              return (
+                <line 
+                  key={e.id} 
+                  x1={e.x1} y1={e.y1} x2={e.x2} y2={e.y2} 
+                  stroke={isBacktracking ? "#f59e0b" : "#cbd5e1"} 
+                  strokeWidth={isBacktracking ? "4" : "2"}
+                  strokeDasharray={isBacktracking ? "6,4" : "0"}
+                  className={`transition-all duration-500 ${!isBacktracking && 'dark:stroke-slate-700'}`}
+                />
+              );
+            })}
+
+            {/* Nodes */}
+            {NODES.map(node => {
+              const isP = node.id === targetP;
+              const isQ = node.id === targetQ;
+              const isLCA = node.id === lcaNode;
+              const isActive = node.id === activeNode;
+              
+              let r = isLCA ? "30" : "24";
+
+              return (
+                <g key={node.id} className="transition-all duration-500">
+                  {/* Active node glow */}
+                  {isActive && !isLCA && <circle cx={node.x} cy={node.y} r="32" fill="none" className="stroke-yellow-300 dark:stroke-yellow-400" strokeWidth="2" strokeDasharray="4,2" className="animate-spin-slow opacity-80" />}
+                  
+                  {/* LCA ultimate glow */}
+                  {isLCA && <circle cx={node.x} cy={node.y} r="38" fill="none" className="stroke-yellow-300 dark:stroke-yellow-400" strokeWidth="2" className="opacity-80 animate-ping" />}
+                  {isLCA && <circle cx={node.x} cy={node.y} r="45" fill="none" className="stroke-amber-500 dark:stroke-amber-400" strokeWidth="1" className="opacity-40 animate-pulse" />}
+                  
+                  <circle 
+                    cx={node.x} cy={node.y} r={r} 
+                    fill={getNodeFill(node.id)} 
+                    stroke={getNodeStroke(node.id)} 
+                    strokeWidth="2.5" 
+                    className="shadow-sm transition-all duration-500 dark:stroke-slate-600" 
+                  />
+                  <text x={node.x} y={node.y + 5} textAnchor="middle" fill={getTextColor(node.id)} fontSize="14" fontWeight="bold" className="transition-colors">{node.val}</text>
+                  
+                  {isP && !isLCA && <text x={node.x + 35} y={node.y + 5} className="fill-amber-500 dark:fill-amber-400" fontSize="14" fontWeight="bold">p</text>}
+                  {isQ && !isLCA && <text x={node.x + 35} y={node.y + 5} className="fill-amber-500 dark:fill-amber-400" fontSize="14" fontWeight="bold">q</text>}
+                  {isLCA && <text x={node.x + 45} y={node.y + 5} className="fill-amber-500 dark:fill-amber-400" fontSize="16" fontWeight="black">LCA</text>}
+                </g>
+              );
+            })}
+          </svg>
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+}
diff --git a/src/app/visualizer/tree/algorithms/lca/codeBlock.jsx b/src/app/visualizer/tree/algorithms/lca/codeBlock.jsx
new file mode 100644
index 000000000..850081bf0
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/lca/codeBlock.jsx
@@ -0,0 +1,46 @@
+"use client";
+import SharedCodeBlock from "@/app/components/ui/SharedCodeBlock";
+
+export default function LCACodeBlock() {
+  const codeExamples = {
+    javascript: `function lowestCommonAncestor(root, p, q) {
+  if (!root || root === p || root === q) return root;
+
+  const left = lowestCommonAncestor(root.left, p, q);
+  const right = lowestCommonAncestor(root.right, p, q);
+
+  if (left && right) return root;
+  return left ? left : right;
+}`,
+    python: `def lowestCommonAncestor(self, root: 'TreeNode', p: 'TreeNode', q: 'TreeNode') -> 'TreeNode':
+    if not root or root == p or root == q:
+        return root
+        
+    left = self.lowestCommonAncestor(root.left, p, q)
+    right = self.lowestCommonAncestor(root.right, p, q)
+    
+    if left and right:
+        return root
+    return left if left else right`,
+    java: `public TreeNode lowestCommonAncestor(TreeNode root, TreeNode p, TreeNode q) {
+    if (root == null || root == p || root == q) return root;
+    
+    TreeNode left = lowestCommonAncestor(root.left, p, q);
+    TreeNode right = lowestCommonAncestor(root.right, p, q);
+    
+    if (left != null && right != null) return root;
+    return left != null ? left : right;
+}`,
+    cpp: `TreeNode* lowestCommonAncestor(TreeNode* root, TreeNode* p, TreeNode* q) {
+    if (!root || root == p || root == q) return root;
+    
+    TreeNode* left = lowestCommonAncestor(root->left, p, q);
+    TreeNode* right = lowestCommonAncestor(root->right, p, q);
+    
+    if (left && right) return root;
+    return left ? left : right;
+}`
+  };
+
+  return <SharedCodeBlock title="Lowest Common Ancestor Code" codeExamples={codeExamples} color="text-purple-500" />;
+}
diff --git a/src/app/visualizer/tree/algorithms/lca/content.jsx b/src/app/visualizer/tree/algorithms/lca/content.jsx
new file mode 100644
index 000000000..7e9851acc
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/lca/content.jsx
@@ -0,0 +1,157 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { Search, MoveUp, ArrowRight, Lightbulb } from "lucide-react";
+
+const LCAContent = () => {
+  return (
+    <main className="max-w-4xl mx-auto mt-8 mb-8">
+      <article className="bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden shadow-lg shadow-purple-500/5">
+        
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            What is the Lowest Common Ancestor?
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed space-y-4">
+            <p>
+              The Lowest Common Ancestor (LCA) of two nodes <strong>p</strong> and <strong>q</strong> in a tree is the lowest (i.e. deepest) node that has both <strong>p</strong> and <strong>q</strong> as descendants. Note that a node can be a descendant of itself.
+            </p>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e] bg-purple-50/30 dark:bg-purple-900/5">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            Visual Example
+          </h2>
+          <div className="flex justify-center my-6">
+            <svg width="400" height="250" viewBox="0 0 400 250" className="drop-shadow-lg">
+              <line x1="200" y1="50" x2="100" y2="120" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="200" y1="50" x2="300" y2="120" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="100" y1="120" x2="50" y2="190" className="stroke-purple-500 dark:stroke-purple-400" strokeWidth="3" strokeDasharray="5,5" />
+              <line x1="100" y1="120" x2="150" y2="190" className="stroke-purple-500 dark:stroke-purple-400" strokeWidth="3" strokeDasharray="5,5" />
+              <circle cx="200" cy="50" r="24" className="fill-white dark:fill-slate-900 stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <text x="200" y="55" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">3</text>
+              
+              <circle cx="100" cy="120" r="26" className="fill-purple-100 dark:fill-purple-900 stroke-purple-500 dark:stroke-purple-400" strokeWidth="3" className="drop-shadow-[0_0_10px_rgba(168,85,247,0.5)]" />
+              <text x="100" y="125" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">5 (LCA)</text>
+              
+              <circle cx="300" cy="120" r="24" className="fill-white dark:fill-slate-900 stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <text x="300" y="125" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">1</text>
+              
+              <circle cx="50" cy="190" r="24" className="fill-purple-50 dark:fill-indigo-950 stroke-purple-500 dark:stroke-purple-400" strokeWidth="2" />
+              <text x="50" y="195" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">6 (p)</text>
+              
+              <circle cx="150" cy="190" r="24" className="fill-purple-50 dark:fill-indigo-950 stroke-purple-500 dark:stroke-purple-400" strokeWidth="2" />
+              <text x="150" y="195" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">2 (q)</text>
+            </svg>
+          </div>
+          <p className="text-center text-sm text-gray-500 dark:text-gray-400">
+            Node 5 is the deepest node that is an ancestor to both 6 and 2.
+          </p>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            Algorithm Strategy
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-4 leading-relaxed">
+            <div className="mt-6 grid gap-4">
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-purple-50/30 dark:from-neutral-900 dark:to-purple-950/20 border-purple-100 dark:border-purple-900/50 hover:shadow-md hover:border-purple-300 dark:hover:border-purple-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-purple-100 dark:bg-purple-900/60 p-2 rounded-lg text-purple-600 dark:text-purple-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <Search className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">1. Search Down</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      Start at the root and recursively search the left and right subtrees. If you hit a null node, return null. If the current node matches either <strong>p</strong> or <strong>q</strong>, return the current node.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-purple-50/30 dark:from-neutral-900 dark:to-purple-950/20 border-purple-100 dark:border-purple-900/50 hover:shadow-md hover:border-purple-300 dark:hover:border-purple-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-purple-100 dark:bg-purple-900/60 p-2 rounded-lg text-purple-600 dark:text-purple-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <MoveUp className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">2. Bubble Up</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      As recursion unwinds, pass the found nodes back up the tree. At any given node, look at what was returned from its left and right children.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-purple-50/30 dark:from-neutral-900 dark:to-purple-950/20 border-purple-100 dark:border-purple-900/50 hover:shadow-md hover:border-purple-300 dark:hover:border-purple-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-purple-100 dark:bg-purple-900/60 p-2 rounded-lg text-purple-600 dark:text-purple-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <ArrowRight className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">3. Evaluate</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      If both left and right return a non-null node, then the current node is the LCA! Otherwise, return whichever child is non-null.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="p-6">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <div className="flex flex-wrap gap-4 mb-6">
+              <div className="flex items-center gap-2 bg-purple-50 dark:bg-purple-900/20 px-4 py-2 rounded-lg border border-purple-200 dark:border-purple-800 shadow-sm">
+                <span className="font-semibold text-purple-800 dark:text-purple-300">Time:</span>
+                <span className="font-mono text-purple-600 dark:text-purple-400">O(N)</span>
+              </div>
+              <div className="flex items-center gap-2 bg-purple-50 dark:bg-purple-900/20 px-4 py-2 rounded-lg border border-purple-200 dark:border-purple-800 shadow-sm">
+                <span className="font-semibold text-purple-800 dark:text-purple-300">Space:</span>
+                <span className="font-mono text-purple-600 dark:text-purple-400">O(H)</span>
+              </div>
+            </div>
+            <p className="text-sm mb-6">Where N is the number of nodes, and H is the height of the tree (recursion stack).</p>
+            <div className="mt-4 bg-gray-50 dark:bg-neutral-900 rounded-xl p-4 border border-gray-200 dark:border-gray-800 shadow-inner">
+              <ComplexityGraph
+                bestCase={(n) => n}
+                averageCase={(n) => n}
+                worstCase={(n) => n}
+                maxN={50}
+                title="Time Complexity: O(N)"
+              />
+            </div>
+          </div>
+        </section>
+        
+        <section className="p-6 border-t border-[#f3f4f6] dark:border-[#1e1e1e] bg-gradient-to-r from-purple-50 to-white dark:from-purple-950/20 dark:to-neutral-950">
+          <div className="flex items-start gap-4">
+            <div className="mt-1 bg-purple-100 dark:bg-purple-900/50 p-2.5 rounded-xl shadow-sm text-purple-600 dark:text-purple-400">
+              <Lightbulb className="w-6 h-6" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold text-purple-900 dark:text-purple-300 mb-2">
+                Key Takeaways
+              </h2>
+              <ul className="list-disc pl-5 space-y-2 text-sm text-purple-800 dark:text-purple-200/80 leading-relaxed">
+                <li>LCA naturally relies on a bottom-up (post-order) traversal. You need information from children before deciding if the current node is the LCA.</li>
+                <li>If a node is an ancestor of the other (e.g., p is ancestor of q), the algorithm returns p directly without needing to explore its subtree.</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+};
+
+export default LCAContent;
diff --git a/src/app/visualizer/tree/algorithms/lca/quiz.jsx b/src/app/visualizer/tree/algorithms/lca/quiz.jsx
new file mode 100644
index 000000000..3bf1b03d2
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/lca/quiz.jsx
@@ -0,0 +1,34 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const handleNext = () => {
+  const questions = [
+  {
+    "question": "Which node is the Lowest Common Ancestor of nodes p and q?",
+    "options": [
+      "The deepest node that is ancestor of both",
+      "The shallowest node in the tree",
+      "The first leaf node encountered",
+      "The node with smallest value"
+    ],
+    "correctAnswer": 0,
+    "explanation": "The LCA is defined as the deepest node that is an ancestor of both target nodes."
+  },
+  {
+    "question": "What is the time complexity of the standard recursive LCA algorithm?",
+    "options": [
+      "O(1)",
+      "O(log N)",
+      "O(N)",
+      "O(N log N)"
+    ],
+    "correctAnswer": 2,
+    "explanation": "Each node is visited at most once, giving O(N) time complexity."
+  }
+];
+
+  return <QuizEngine title="LCA Quick Quiz" questions={questions} />;
+};
+
+export default handleNext;
diff --git a/src/app/visualizer/tree/algorithms/quiz/TreeAlgorithmsQuizClient.jsx b/src/app/visualizer/tree/algorithms/quiz/TreeAlgorithmsQuizClient.jsx
new file mode 100644
index 000000000..052351347
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/TreeAlgorithmsQuizClient.jsx
@@ -0,0 +1,108 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { ArrowRight, GitBranch } from "lucide-react";
+
+const quizzes = [
+  {
+    title: "Lowest Common Ancestor Quiz",
+    description: "Practice Lowest Common Ancestor (LCA) concepts.",
+    href: "/visualizer/tree/algorithms/quiz/lowest-common-ancestor",
+  },
+  {
+    title: "Diameter of Binary Tree Quiz",
+    description: "Test your understanding of Diameter algorithms.",
+    href: "/visualizer/tree/algorithms/quiz/diameter",
+  },
+  {
+    title: "Height of Tree Quiz",
+    description: "Practice height calculation algorithms.",
+    href: "/visualizer/tree/algorithms/quiz/height",
+  },
+  {
+    title: "Tree Views Quiz",
+    description: "Learn Left, Right, Top and Bottom Views.",
+    href: "/visualizer/tree/algorithms/quiz/tree-views",
+  },
+  {
+    title: "Boundary Traversal Quiz",
+    description: "Practice Boundary Traversal concepts.",
+    href: "/visualizer/tree/algorithms/quiz/boundary-traversal",
+  },
+  {
+    title: "Vertical Order Traversal Quiz",
+    description: "Practice Vertical Order Traversal algorithms.",
+    href: "/visualizer/tree/algorithms/quiz/vertical-order",
+  },
+  {
+    title: "Zigzag Traversal Quiz",
+    description: "Test Zigzag (Spiral) Traversal concepts.",
+    href: "/visualizer/tree/algorithms/quiz/zigzag",
+  },
+  {
+    title: "Morris Traversal Quiz",
+    description: "Practice Morris Traversal algorithms.",
+    href: "/visualizer/tree/algorithms/quiz/morris",
+  },
+  {
+    title: "Serialization & Deserialization Quiz",
+    description: "Practice tree serialization concepts.",
+    href: "/visualizer/tree/algorithms/quiz/serialization",
+  },
+];
+
+export default function TreeAlgorithmsQuizClient() {
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <div className="max-w-7xl mx-auto px-6 py-12">
+        <motion.div
+          initial={{ opacity: 0, y: 25 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="mb-10"
+        >
+          <h1 className="text-4xl font-bold">
+            🌳 Tree Algorithms Quiz
+          </h1>
+
+          <p className="mt-3 text-muted-foreground">
+            Strengthen your understanding of common Tree Algorithms through
+            interactive quizzes.
+          </p>
+        </motion.div>
+
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.05 }}
+              className="rounded-2xl border border-green-500/20 bg-card p-6 shadow-sm hover:shadow-lg transition-all"
+            >
+              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-green-500/10 text-green-600">
+                <GitBranch size={24} />
+              </div>
+
+              <h2 className="text-xl font-semibold">
+                {quiz.title}
+              </h2>
+
+              <p className="mt-2 text-sm text-muted-foreground">
+                {quiz.description}
+              </p>
+
+              <Link href={quiz.href}>
+                <button className="mt-6 flex w-full items-center justify-center gap-2 rounded-xl bg-green-600 px-4 py-3 font-semibold text-white hover:bg-green-700 transition-colors">
+                  Start Quiz
+                  <ArrowRight size={18} />
+                </button>
+              </Link>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/boundary-traversal/page.jsx b/src/app/visualizer/tree/algorithms/quiz/boundary-traversal/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/boundary-traversal/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/boundary-traversal/quiz.jsx b/src/app/visualizer/tree/algorithms/quiz/boundary-traversal/quiz.jsx
new file mode 100644
index 000000000..6ebae4a63
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/boundary-traversal/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is Boundary Traversal of a Binary Tree?",
+    options: [
+      "Traversing only the leaf nodes",
+      "Traversing nodes on the boundary of the tree in anti-clockwise order",
+      "Traversing all internal nodes",
+      "Traversing only the root node"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Boundary Traversal visits the boundary nodes of a binary tree in anti-clockwise order."
+  },
+  {
+    question: "Which node is always included first in Boundary Traversal?",
+    options: [
+      "Left-most leaf",
+      "Root node",
+      "Right-most node",
+      "Last leaf"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Boundary Traversal always starts from the root node."
+  },
+  {
+    question: "Which part is traversed immediately after the root?",
+    options: [
+      "Right Boundary",
+      "Leaf Nodes",
+      "Left Boundary",
+      "Bottom View"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "After visiting the root, the left boundary is traversed (excluding leaf nodes)."
+  },
+  {
+    question: "Which nodes are visited after the Left Boundary?",
+    options: [
+      "Right Boundary",
+      "Leaf Nodes",
+      "Root",
+      "Top View"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "All leaf nodes from left to right are visited after the left boundary."
+  },
+  {
+    question: "In Boundary Traversal, the Right Boundary is visited:",
+    options: [
+      "Top to Bottom",
+      "Bottom to Top",
+      "Randomly",
+      "Level by Level"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The right boundary is added in reverse order (bottom to top)."
+  },
+  {
+    question: "Leaf nodes are traversed:",
+    options: [
+      "Right to Left",
+      "Top to Bottom",
+      "Left to Right",
+      "Only on the left subtree"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Leaf nodes are collected from left to right."
+  },
+  {
+    question: "What is the time complexity of Boundary Traversal?",
+    options: [
+      "O(log n)",
+      "O(n)",
+      "O(n²)",
+      "O(1)"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Every node is visited at most once."
+  },
+  {
+    question: "Which traversal is commonly used while collecting leaf nodes?",
+    options: [
+      "DFS",
+      "BFS",
+      "Binary Search",
+      "Heap Traversal"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Depth-First Search (DFS) is commonly used to collect leaf nodes."
+  },
+  {
+    question: "Which nodes are excluded from the Left and Right Boundary lists?",
+    options: [
+      "Internal Nodes",
+      "Leaf Nodes",
+      "Root Node",
+      "Parent Nodes"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Leaf nodes are excluded because they are collected separately."
+  },
+  {
+    question: "Boundary Traversal is commonly asked in:",
+    options: [
+      "Tree visualization problems",
+      "Technical interviews",
+      "Competitive programming",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "Boundary Traversal is a popular interview and competitive programming problem."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Boundary Traversal Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/diameter/page.jsx b/src/app/visualizer/tree/algorithms/quiz/diameter/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/diameter/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/diameter/quiz.jsx b/src/app/visualizer/tree/algorithms/quiz/diameter/quiz.jsx
new file mode 100644
index 000000000..c0c1321ff
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/diameter/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the diameter of a binary tree?",
+    options: [
+      "The maximum value in the tree",
+      "The longest path between any two nodes",
+      "The height of the root",
+      "The number of leaf nodes"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The diameter is the length of the longest path between any two nodes in the tree."
+  },
+  {
+    question: "The diameter of a tree may or may not pass through:",
+    options: [
+      "The root node",
+      "A leaf node",
+      "The left subtree",
+      "The right subtree"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "The longest path doesn't always pass through the root."
+  },
+  {
+    question: "Which value is commonly computed while finding the diameter?",
+    options: [
+      "Width",
+      "Height",
+      "Depth only",
+      "Level"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The height of left and right subtrees is required to compute the diameter."
+  },
+  {
+    question: "The diameter through a node equals:",
+    options: [
+      "Left Height + Right Height",
+      "Height × Width",
+      "Depth + Height",
+      "Left Nodes + Right Nodes"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Diameter passing through a node equals the height of its left subtree plus the height of its right subtree."
+  },
+  {
+    question: "What is the time complexity of the optimized diameter algorithm?",
+    options: [
+      "O(n²)",
+      "O(log n)",
+      "O(n)",
+      "O(1)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The optimized solution computes height and diameter together in one traversal."
+  },
+  {
+    question: "Which traversal style is commonly used for the recursive diameter algorithm?",
+    options: [
+      "Level Order",
+      "Preorder",
+      "Postorder",
+      "Inorder"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Postorder traversal ensures subtree heights are known before processing the parent."
+  },
+  {
+    question: "If a tree contains only one node, its diameter is:",
+    options: [
+      "0",
+      "1",
+      "2",
+      "Undefined"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "A single node has no edges, so its diameter is 0."
+  },
+  {
+    question: "The diameter of a tree is measured using:",
+    options: [
+      "Edges",
+      "Only nodes",
+      "Levels",
+      "Leaves"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Most implementations define diameter as the number of edges on the longest path."
+  },
+  {
+    question: "Which recursive value is returned after processing each node?",
+    options: [
+      "Width",
+      "Height",
+      "Diameter",
+      "Depth"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Each recursive call returns the height of the current subtree."
+  },
+  {
+    question: "Finding the diameter of a tree is commonly used in:",
+    options: [
+      "Network design",
+      "Tree optimization",
+      "Graph analysis",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "Diameter algorithms are useful in networking, graph theory, and tree-based optimization problems."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Diameter of Binary Tree Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/height/page.jsx b/src/app/visualizer/tree/algorithms/quiz/height/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/height/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/height/quiz.jsx b/src/app/visualizer/tree/algorithms/quiz/height/quiz.jsx
new file mode 100644
index 000000000..b87bb5ab4
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/height/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the height of a tree?",
+    options: [
+      "The number of nodes in the tree",
+      "The length of the longest path from the root to a leaf",
+      "The number of leaf nodes",
+      "The diameter of the tree"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The height of a tree is the number of edges (or sometimes nodes) on the longest path from the root to a leaf."
+  },
+  {
+    question: "What is the height of an empty tree?",
+    options: [
+      "-1",
+      "0",
+      "1",
+      "Undefined"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "In most implementations, the height of an empty tree is defined as -1."
+  },
+  {
+    question: "What is the height of a tree containing only the root node?",
+    options: [
+      "0",
+      "1",
+      "2",
+      "-1"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "A single-node tree has a height of 0 because there are no edges below the root."
+  },
+  {
+    question: "Which traversal is commonly used to compute the height recursively?",
+    options: [
+      "Preorder",
+      "Inorder",
+      "Postorder",
+      "Level Order"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Postorder traversal computes the heights of child subtrees before processing the parent."
+  },
+  {
+    question: "The height of a node is calculated as:",
+    options: [
+      "min(left, right) + 1",
+      "max(left, right) + 1",
+      "left + right",
+      "left - right"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The height of a node equals the maximum height of its children plus one."
+  },
+  {
+    question: "What is the time complexity of computing the height of a binary tree?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Each node is visited once while computing the height."
+  },
+  {
+    question: "Which data structure is used implicitly in the recursive solution?",
+    options: [
+      "Queue",
+      "Stack",
+      "Heap",
+      "Hash Map"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Recursive calls use the system call stack."
+  },
+  {
+    question: "A balanced binary tree generally has a height of:",
+    options: [
+      "O(log n)",
+      "O(n)",
+      "O(n²)",
+      "O(1)"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Balanced trees maintain logarithmic height."
+  },
+  {
+    question: "Why is tree height important?",
+    options: [
+      "It determines search efficiency",
+      "It determines insertion order",
+      "It counts leaf nodes",
+      "It stores parent nodes"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Operations like search, insertion, and deletion often depend on the tree's height."
+  },
+  {
+    question: "Which application commonly requires tree height calculation?",
+    options: [
+      "AVL Tree balancing",
+      "Heap operations",
+      "Expression trees",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "Tree height is fundamental in AVL Trees, Heaps, expression trees, and many other tree algorithms."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Height of Tree Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/lowest-common-ancestor/page.jsx b/src/app/visualizer/tree/algorithms/quiz/lowest-common-ancestor/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/lowest-common-ancestor/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/lowest-common-ancestor/quiz.jsx b/src/app/visualizer/tree/algorithms/quiz/lowest-common-ancestor/quiz.jsx
new file mode 100644
index 000000000..175069353
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/lowest-common-ancestor/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What does LCA stand for in Trees?",
+    options: [
+      "Lowest Common Ancestor",
+      "Largest Common Ancestor",
+      "Longest Child Algorithm",
+      "Lowest Child Algorithm",
+    ],
+    correctAnswer: 0,
+    explanation:
+      "LCA stands for Lowest Common Ancestor, the deepest common ancestor of two nodes.",
+  },
+  {
+    question: "The Lowest Common Ancestor of two nodes is:",
+    options: [
+      "The root node",
+      "The deepest node that is an ancestor of both nodes",
+      "The smallest valued node",
+      "The parent of the root",
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The LCA is the deepest node that has both target nodes as descendants.",
+  },
+  {
+    question: "Which traversal is commonly used in recursive LCA algorithms?",
+    options: [
+      "Preorder",
+      "Postorder",
+      "Level Order",
+      "Morris Traversal",
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Recursive LCA solutions typically use postorder traversal.",
+  },
+  {
+    question: "What is the time complexity of the standard recursive LCA algorithm in a binary tree?",
+    options: [
+      "O(log n)",
+      "O(n)",
+      "O(n log n)",
+      "O(1)",
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Every node may be visited once, giving O(n) complexity.",
+  },
+  {
+    question: "In a Binary Search Tree, LCA can be found efficiently using:",
+    options: [
+      "Heap Property",
+      "BST Property",
+      "Breadth First Search",
+      "Sorting",
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The BST ordering property helps locate the LCA in O(h) time.",
+  },
+  {
+    question: "If one node is an ancestor of the other, then the LCA is:",
+    options: [
+      "The root",
+      "The descendant node",
+      "The ancestor node",
+      "Undefined",
+    ],
+    correctAnswer: 2,
+    explanation:
+      "A node is considered an ancestor of itself, so it becomes the LCA.",
+  },
+  {
+    question: "Which data structure is NOT required in the recursive LCA solution?",
+    options: [
+      "Call Stack",
+      "Binary Tree",
+      "Queue",
+      "Tree Nodes",
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The recursive solution doesn't require a queue.",
+  },
+  {
+    question: "Which algorithm property is used while returning from recursive calls?",
+    options: [
+      "Backtracking",
+      "Greedy",
+      "Dynamic Programming",
+      "Hashing",
+    ],
+    correctAnswer: 0,
+    explanation:
+      "The recursive LCA algorithm works by backtracking from child nodes.",
+  },
+  {
+    question: "If the two target nodes lie in different subtrees of a node, then that node is:",
+    options: [
+      "Leaf",
+      "Lowest Common Ancestor",
+      "Parent of Root",
+      "Balanced Node",
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The first node where both targets split into different branches is their LCA.",
+  },
+  {
+    question: "Which application commonly uses Lowest Common Ancestor algorithms?",
+    options: [
+      "Version Control Systems",
+      "Network Routing",
+      "Genealogy Trees",
+      "All of the above",
+    ],
+    correctAnswer: 3,
+    explanation:
+      "LCA algorithms are useful in genealogy, routing, compiler analysis, and many tree-based applications.",
+  },
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Lowest Common Ancestor Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/morris/page.jsx b/src/app/visualizer/tree/algorithms/quiz/morris/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/morris/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/morris/quiz.jsx b/src/app/visualizer/tree/algorithms/quiz/morris/quiz.jsx
new file mode 100644
index 000000000..91ace49fd
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/morris/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the primary advantage of Morris Traversal?",
+    options: [
+      "It uses recursion.",
+      "It performs tree traversal without using recursion or a stack.",
+      "It sorts the tree.",
+      "It balances the tree."
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Morris Traversal visits nodes without recursion or an explicit stack by temporarily modifying tree links."
+  },
+  {
+    question: "What is the auxiliary space complexity of Morris Traversal?",
+    options: [
+      "O(n)",
+      "O(log n)",
+      "O(1)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Morris Traversal uses constant extra space."
+  },
+  {
+    question: "Which tree pointer is temporarily modified during Morris Traversal?",
+    options: [
+      "Left pointer",
+      "Parent pointer",
+      "Right pointer",
+      "Root pointer"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The right pointer of the inorder predecessor is temporarily linked to the current node."
+  },
+  {
+    question: "Morris Traversal is primarily used to perform:",
+    options: [
+      "Level Order Traversal",
+      "Inorder Traversal",
+      "Breadth First Search",
+      "Heap Traversal"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The original Morris algorithm performs Inorder Traversal without extra space."
+  },
+  {
+    question: "What is the time complexity of Morris Traversal?",
+    options: [
+      "O(log n)",
+      "O(n)",
+      "O(n²)",
+      "O(1)"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Every edge is traversed at most twice, resulting in O(n) time."
+  },
+  {
+    question: "Why is Morris Traversal considered efficient?",
+    options: [
+      "It avoids recursion and stack usage.",
+      "It reduces the number of tree nodes.",
+      "It balances the tree automatically.",
+      "It sorts the tree."
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Its major advantage is constant auxiliary space."
+  },
+  {
+    question: "After visiting a node, the temporary threaded link is:",
+    options: [
+      "Deleted permanently",
+      "Ignored",
+      "Restored to its original NULL value",
+      "Converted into a left pointer"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Temporary links are always removed to restore the original tree."
+  },
+  {
+    question: "Morris Traversal relies on finding the:",
+    options: [
+      "Root node",
+      "Leaf node",
+      "Inorder predecessor",
+      "Maximum node"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The algorithm repeatedly finds the inorder predecessor of the current node."
+  },
+  {
+    question: "Which traversal can also be implemented using Morris Traversal with slight modifications?",
+    options: [
+      "Preorder Traversal",
+      "Level Order Traversal",
+      "Boundary Traversal",
+      "Vertical Order Traversal"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Morris Traversal can be adapted to perform Preorder Traversal."
+  },
+  {
+    question: "Morris Traversal is commonly used when:",
+    options: [
+      "Memory usage must be minimized",
+      "The tree must be balanced",
+      "Only leaf nodes are required",
+      "The tree is stored in an array"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Morris Traversal is ideal when O(1) auxiliary space is required."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Morris Traversal Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/page.jsx b/src/app/visualizer/tree/algorithms/quiz/page.jsx
new file mode 100644
index 000000000..9964e6cd9
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/page.jsx
@@ -0,0 +1,11 @@
+import TreeAlgorithmsQuizClient from "./TreeAlgorithmsQuizClient";
+
+export const metadata = {
+  title: "Tree Algorithms Quiz | AlgoBuddy",
+  description:
+    "Practice Lowest Common Ancestor, Diameter, Height, Tree Views, Boundary Traversal, Vertical Order, Zigzag Traversal, Morris Traversal, and Serialization algorithms.",
+};
+
+export default function Page() {
+  return <TreeAlgorithmsQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/serialization/page.jsx b/src/app/visualizer/tree/algorithms/quiz/serialization/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/serialization/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/serialization/quiz.jsx b/src/app/visualizer/tree/algorithms/quiz/serialization/quiz.jsx
new file mode 100644
index 000000000..261554977
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/serialization/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is Serialization in a Binary Tree?",
+    options: [
+      "Deleting all nodes of the tree",
+      "Converting a tree into a storable or transmittable format",
+      "Balancing a binary tree",
+      "Sorting tree nodes"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Serialization converts a tree into a sequence of values so it can be stored or transmitted."
+  },
+  {
+    question: "What is Deserialization?",
+    options: [
+      "Deleting duplicate nodes",
+      "Reconstructing a binary tree from serialized data",
+      "Traversing a binary tree",
+      "Finding the height of a tree"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Deserialization reconstructs the original tree from its serialized representation."
+  },
+  {
+    question: "Which traversal is commonly used during Serialization?",
+    options: [
+      "Preorder Traversal",
+      "Heap Traversal",
+      "Boundary Traversal",
+      "Vertical Traversal"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Preorder Traversal with NULL markers is one of the most common serialization techniques."
+  },
+  {
+    question: "Why are NULL markers included during Serialization?",
+    options: [
+      "To reduce memory usage",
+      "To preserve the exact tree structure",
+      "To sort the nodes",
+      "To improve traversal speed"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "NULL markers ensure the original tree structure can be reconstructed correctly."
+  },
+  {
+    question: "What is the time complexity of Serialization?",
+    options: [
+      "O(log n)",
+      "O(n)",
+      "O(n²)",
+      "O(1)"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Every node is visited exactly once during serialization."
+  },
+  {
+    question: "What is the time complexity of Deserialization?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Each serialized element is processed once while rebuilding the tree."
+  },
+  {
+    question: "Which data structure is commonly used while deserializing recursively?",
+    options: [
+      "Queue",
+      "Call Stack",
+      "Heap",
+      "Hash Table"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Recursive deserialization uses the system call stack."
+  },
+  {
+    question: "Serialization is commonly used in:",
+    options: [
+      "Saving tree structures",
+      "Network communication",
+      "Databases",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "Serialization is widely used for storage, databases, caching, and data transmission."
+  },
+  {
+    question: "Which problem occurs if NULL nodes are not serialized?",
+    options: [
+      "The tree becomes balanced",
+      "The original tree structure cannot always be reconstructed",
+      "Traversal becomes faster",
+      "The height increases"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Without NULL markers, different tree structures can produce the same traversal sequence."
+  },
+  {
+    question: "Serialization & Deserialization are frequently asked in:",
+    options: [
+      "System Design",
+      "Technical Interviews",
+      "Competitive Programming",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "These concepts are widely tested in interviews and are used in real-world distributed systems."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Serialization & Deserialization Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/tree-views/page.jsx b/src/app/visualizer/tree/algorithms/quiz/tree-views/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/tree-views/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/tree-views/quiz.jsx b/src/app/visualizer/tree/algorithms/quiz/tree-views/quiz.jsx
new file mode 100644
index 000000000..4bd6597ba
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/tree-views/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What does the Left View of a binary tree represent?",
+    options: [
+      "All leaf nodes",
+      "The first node visible from the left side at each level",
+      "The last node at each level",
+      "Only the root node"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The Left View consists of the first node encountered at every level when viewed from the left."
+  },
+  {
+    question: "What does the Right View of a binary tree represent?",
+    options: [
+      "All right child nodes",
+      "The last node visible from the right side at each level",
+      "Only leaf nodes",
+      "The root and its right child"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The Right View contains the last visible node at every level."
+  },
+  {
+    question: "Which traversal is commonly used to compute Left and Right Views?",
+    options: [
+      "Depth-First Search",
+      "Level Order Traversal",
+      "Inorder Traversal",
+      "Postorder Traversal"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Level Order Traversal (BFS) naturally processes nodes level by level."
+  },
+  {
+    question: "The Top View of a binary tree contains:",
+    options: [
+      "The highest node for each horizontal distance",
+      "All root-to-leaf paths",
+      "Only left subtree nodes",
+      "Only right subtree nodes"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "The Top View shows the first node encountered at every horizontal distance."
+  },
+  {
+    question: "The Bottom View of a binary tree contains:",
+    options: [
+      "The deepest node for each horizontal distance",
+      "Only leaf nodes",
+      "Only internal nodes",
+      "The root node"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Bottom View keeps the last (deepest) node for every horizontal distance."
+  },
+  {
+    question: "Which data structure is commonly used while computing Top View?",
+    options: [
+      "Queue and Hash Map",
+      "Stack",
+      "Heap",
+      "Priority Queue"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "A queue performs level-order traversal while a map stores horizontal distances."
+  },
+  {
+    question: "Horizontal Distance (HD) of the root node is:",
+    options: [
+      "-1",
+      "0",
+      "1",
+      "Depends on the tree"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The root node is assigned a horizontal distance of 0."
+  },
+  {
+    question: "Moving to the left child changes the Horizontal Distance by:",
+    options: [
+      "+1",
+      "-1",
+      "0",
+      "+2"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Each left child decreases the horizontal distance by 1."
+  },
+  {
+    question: "Moving to the right child changes the Horizontal Distance by:",
+    options: [
+      "-1",
+      "0",
+      "+1",
+      "+2"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Each right child increases the horizontal distance by 1."
+  },
+  {
+    question: "Tree Views are commonly used in:",
+    options: [
+      "Visualization problems",
+      "Interview coding questions",
+      "Tree analysis",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "Tree Views are widely used in visualization, competitive programming, and interviews."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Tree Views Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/vertical-order/page.jsx b/src/app/visualizer/tree/algorithms/quiz/vertical-order/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/vertical-order/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/vertical-order/quiz.jsx b/src/app/visualizer/tree/algorithms/quiz/vertical-order/quiz.jsx
new file mode 100644
index 000000000..7c59f159f
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/vertical-order/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is Vertical Order Traversal in a Binary Tree?",
+    options: [
+      "Visiting nodes level by level",
+      "Grouping nodes based on their horizontal distance from the root",
+      "Traversing only leaf nodes",
+      "Traversing only the left subtree"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Vertical Order Traversal groups nodes according to their horizontal distance (HD) from the root."
+  },
+  {
+    question: "What is the Horizontal Distance (HD) of the root node?",
+    options: [
+      "-1",
+      "0",
+      "1",
+      "Depends on the tree"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The root is always assigned a horizontal distance of 0."
+  },
+  {
+    question: "Moving to the left child changes the Horizontal Distance by:",
+    options: [
+      "+1",
+      "-1",
+      "0",
+      "+2"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The left child decreases the horizontal distance by 1."
+  },
+  {
+    question: "Moving to the right child changes the Horizontal Distance by:",
+    options: [
+      "-1",
+      "0",
+      "+1",
+      "+2"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The right child increases the horizontal distance by 1."
+  },
+  {
+    question: "Which traversal technique is commonly used for Vertical Order Traversal?",
+    options: [
+      "Depth-First Search only",
+      "Breadth-First Search (Level Order)",
+      "Postorder Traversal",
+      "Morris Traversal"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Level Order Traversal ensures nodes are processed level by level for each horizontal distance."
+  },
+  {
+    question: "Which data structure is commonly used to group nodes by horizontal distance?",
+    options: [
+      "Queue and Map",
+      "Stack",
+      "Heap",
+      "Linked List"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "A queue performs BFS while a map stores nodes according to their horizontal distance."
+  },
+  {
+    question: "What is the time complexity of Vertical Order Traversal?",
+    options: [
+      "O(log n)",
+      "O(n)",
+      "O(n²)",
+      "O(1)"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Each node is visited exactly once during traversal."
+  },
+  {
+    question: "Why is Breadth-First Search preferred over DFS for Vertical Order Traversal?",
+    options: [
+      "It uses less memory",
+      "It naturally preserves top-to-bottom ordering",
+      "It is always faster",
+      "DFS cannot visit all nodes"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "BFS processes nodes level by level, preserving the correct vertical order."
+  },
+  {
+    question: "Which tree view problem is closely related to Vertical Order Traversal?",
+    options: [
+      "Top View",
+      "Bottom View",
+      "Left View",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "Top View, Bottom View, and Vertical Order all rely on horizontal distances."
+  },
+  {
+    question: "Vertical Order Traversal is commonly used in:",
+    options: [
+      "Binary tree visualization",
+      "Interview coding questions",
+      "Competitive programming",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "Vertical Order Traversal is a common tree algorithm in interviews and competitive programming."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Vertical Order Traversal Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/zigzag/page.jsx b/src/app/visualizer/tree/algorithms/quiz/zigzag/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/zigzag/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/quiz/zigzag/quiz.jsx b/src/app/visualizer/tree/algorithms/quiz/zigzag/quiz.jsx
new file mode 100644
index 000000000..ce5a92712
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/quiz/zigzag/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is Zigzag Traversal of a Binary Tree?",
+    options: [
+      "Traversing only left children",
+      "Traversing level by level while alternating direction",
+      "Traversing leaf nodes only",
+      "Traversing in sorted order"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Zigzag Traversal visits tree levels alternately from left-to-right and right-to-left."
+  },
+  {
+    question: "Zigzag Traversal is also known as:",
+    options: [
+      "Diagonal Traversal",
+      "Spiral Traversal",
+      "Boundary Traversal",
+      "Morris Traversal"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Zigzag Traversal is commonly called Spiral Traversal."
+  },
+  {
+    question: "Which traversal forms the basis of Zigzag Traversal?",
+    options: [
+      "Inorder Traversal",
+      "Preorder Traversal",
+      "Level Order Traversal",
+      "Postorder Traversal"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Zigzag Traversal is a modified Level Order (Breadth-First Search) traversal."
+  },
+  {
+    question: "Which data structure is commonly used to perform Zigzag Traversal?",
+    options: [
+      "Queue",
+      "Stack",
+      "Queue with direction tracking",
+      "Hash Map"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "A queue performs level-order traversal while direction is alternated after every level."
+  },
+  {
+    question: "The direction changes:",
+    options: [
+      "After every node",
+      "After every level",
+      "After every subtree",
+      "Only once"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Traversal direction alternates after completing each level."
+  },
+  {
+    question: "What is the time complexity of Zigzag Traversal?",
+    options: [
+      "O(log n)",
+      "O(n)",
+      "O(n²)",
+      "O(1)"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Every node is visited exactly once."
+  },
+  {
+    question: "What is the auxiliary space complexity in the worst case?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The queue may contain an entire level of the tree."
+  },
+  {
+    question: "The root node is visited:",
+    options: [
+      "Last",
+      "First",
+      "In the middle",
+      "Randomly"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Like all BFS-based traversals, Zigzag Traversal begins with the root."
+  },
+  {
+    question: "Which traversal direction is typically used for the second level?",
+    options: [
+      "Left to Right",
+      "Right to Left",
+      "Top to Bottom",
+      "Bottom to Top"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "After traversing the first level left-to-right, the second level is traversed right-to-left."
+  },
+  {
+    question: "Zigzag Traversal is commonly asked in:",
+    options: [
+      "Tree visualization problems",
+      "Technical interviews",
+      "Competitive programming",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "Zigzag Traversal is a popular interview and competitive programming problem."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Zigzag Traversal Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/algorithms/serialization/AlgorithmClient.jsx b/src/app/visualizer/tree/algorithms/serialization/AlgorithmClient.jsx
new file mode 100644
index 000000000..1620bf367
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/serialization/AlgorithmClient.jsx
@@ -0,0 +1,43 @@
+import Animation from "./animation";
+import Content from "./content";
+import CodeBlock from "./codeBlock";
+import Quiz from "./quiz";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+
+
+export default function SerializationAlgorithmPage() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Algorithms", "Serialize/Deserialize")}
+      title="Serialize/Deserialize Binary Tree"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      quiz={<Quiz />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.serialization}
+          description="Mark Serialize/Deserialize as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other Tree Algorithms"
+          links={[
+            { text: "Lowest Common Ancestor", description: "Find the lowest shared parent.", url: "./lca" },
+            { text: "Tree Diameter", description: "Find the longest path between any two nodes.", url: "./diameter" },
+            { text: "Tree Isomorphism", description: "Check if two trees are structurally identical.", url: "./isomorphism" },
+          ]}
+          columns="3"
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/algorithms/serialization/animation.jsx b/src/app/visualizer/tree/algorithms/serialization/animation.jsx
new file mode 100644
index 000000000..f6a36d7f9
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/serialization/animation.jsx
@@ -0,0 +1,290 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import { Play, RotateCcw, Info, FileDown, FileUp, RefreshCw } from "lucide-react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import usePlayback from "@/app/hooks/usePlayback";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+import { generateSerializationSteps, generateDeserializationSteps } from "@/features/algorithms/tree/serializationLogic";
+
+const NODES = [
+  { id: "1", val: "1", x: 400, y: 60, parent: null },
+  { id: "2", val: "2", x: 250, y: 150, parent: "1", isLeft: true },
+  { id: "3", val: "3", x: 550, y: 150, parent: "1", isLeft: false },
+  { id: "4", val: "4", x: 450, y: 240, parent: "3", isLeft: true },
+  { id: "5", val: "5", x: 650, y: 240, parent: "3", isLeft: false },
+];
+
+const EDGES = NODES.filter(n => n.parent).map(n => {
+  const p = NODES.find(parent => parent.id === n.parent);
+  return { id: `${p.id}-${n.id}`, x1: p.x, y1: p.y + 20, x2: n.x, y2: n.y - 20, parent: p.id, child: n.id };
+});
+
+const SEQUENCE = [
+  { type: "node", id: "1", val: "1" },
+  { type: "node", id: "2", val: "2" },
+  { type: "null", parent: "2", dir: "left" },
+  { type: "null", parent: "2", dir: "right" },
+  { type: "node", id: "3", val: "3" },
+  { type: "node", id: "4", val: "4" },
+  { type: "null", parent: "4", dir: "left" },
+  { type: "null", parent: "4", dir: "right" },
+  { type: "node", id: "5", val: "5" },
+  { type: "null", parent: "5", dir: "left" },
+  { type: "null", parent: "5", dir: "right" },
+];
+
+export default function SerializationAnimation() {
+  const [animating, setAnimating] = useState(false);
+  const [mode, setMode] = useState("idle"); 
+  const [message, setMessage] = useState("Click 'Serialize' to start flattening the tree into a string.");
+  
+  const [steps, setSteps] = useState([]);
+  const [currentStepIdx, setCurrentStepIdx] = useState(-1);
+  const { speed, setSpeed } = usePlayback(1);
+  const timerRef = useRef(null);
+  useVisualizerReset(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setAnimating(false);
+    setMode("idle");
+    setMessage("...");
+    setSteps([]);
+    setCurrentStepIdx(-1);
+  });
+
+  const currentStep = steps[currentStepIdx] || null;
+  const activeStep = currentStep ? currentStep.activeStep : -1;
+  const serializedArray = currentStep ? currentStep.serializedArray : (mode === "deserializing" ? SEQUENCE.map(s => s.val || "N") : []);
+  const builtNodes = currentStep ? currentStep.builtNodes : [];
+  const builtEdges = currentStep ? currentStep.builtEdges : [];
+
+
+  useEffect(() => {
+    if (currentStep) {
+      setMessage(currentStep.message);
+    }
+  }, [currentStep]);
+
+  useEffect(() => {
+    if (!animating || steps.length === 0) return;
+    if (currentStepIdx >= steps.length - 1) { setAnimating(false); return; }
+    timerRef.current = setTimeout(() => setCurrentStepIdx(p => p + 1), 1600 / speed);
+    return () => { if (timerRef.current) clearTimeout(timerRef.current); };
+  }, [animating, currentStepIdx, steps, speed]);
+
+  const pauseVisualizer = () => { setAnimating(false); if (timerRef.current) clearTimeout(timerRef.current); };
+  const startVisualizer = () => {
+    if (steps.length === 0) return;
+    setAnimating(true);
+    const nextIdx = currentStepIdx === -1 || currentStepIdx >= steps.length - 1 ? 0 : currentStepIdx + 1;
+    setCurrentStepIdx(nextIdx);
+  };
+  const stepForward = () => { setAnimating(false); if (currentStepIdx < steps.length - 1) setCurrentStepIdx(p => p + 1); };
+  const stepBackward = () => { setAnimating(false); if (currentStepIdx > 0) setCurrentStepIdx(p => p - 1); };
+  const resetPlayback = () => {
+    setAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setCurrentStepIdx(-1);
+    setMessage("Playback reset.");
+  };
+
+  const handleSerialize = () => {
+    setAnimating(false);
+    setMode("serializing");
+    const newSteps = generateSerializationSteps(SEQUENCE);
+    setSteps(newSteps);
+    setCurrentStepIdx(0);
+    setAnimating(true);
+  };
+
+  const handleDeserialize = () => {
+    setAnimating(false);
+    setMode("deserializing");
+    const newSteps = generateDeserializationSteps(SEQUENCE);
+    setSteps(newSteps);
+    setCurrentStepIdx(0);
+    setAnimating(true);
+  };
+
+  const handleReset = () => {
+    setAnimating(false);
+    setMode("idle");
+    setSteps([]);
+    setCurrentStepIdx(-1);
+    setMessage("Click 'Serialize' to start flattening the tree into a string.");
+  };
+
+  useVisualizerKeyboard({
+    onStepForward: stepForward,
+    onStepBackward: stepBackward,
+    onTogglePlay: animating ? pauseVisualizer : startVisualizer,
+    onReset: resetPlayback,
+    onSpeedChange: setSpeed,
+    speed: speed,
+    sorting: animating,
+    sorted: false,
+    enabled: true,
+  });
+
+  return (
+    <VisualizerInteractiveLayout>
+      <VisualizerCard>
+        <div className="flex flex-col gap-4 mb-6">
+          <div className="flex flex-wrap justify-between items-center gap-4">
+            <div className="flex items-center gap-3">
+              <button 
+                onClick={handleSerialize} 
+                disabled={animating || mode === "serializing" || serializedArray.length === SEQUENCE.length}
+                className="flex items-center gap-2 px-6 py-2.5 text-sm font-bold bg-[#a435f0] hover:bg-[#8f2cd6] disabled:opacity-50 text-white rounded-xl transition-all shadow-md"
+              >
+                <FileDown className="w-4 h-4" /> Serialize
+              </button>
+              
+              <button 
+                onClick={handleDeserialize} 
+                disabled={animating || (mode === "idle" && serializedArray.length !== SEQUENCE.length) || mode === "deserializing"}
+                className="flex items-center gap-2 px-6 py-2.5 text-sm font-bold bg-[#a435f0] hover:bg-[#8f2cd6] disabled:opacity-50 text-white rounded-xl transition-all shadow-md"
+              >
+                <FileUp className="w-4 h-4" /> Deserialize
+              </button>
+            </div>
+            
+            <button 
+              onClick={handleReset} 
+              className="px-4 py-2.5 text-sm font-bold text-red-500 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-xl transition-all border border-red-500/30 flex items-center gap-2"
+            >
+              <RefreshCw className="w-4 h-4" /> Reset
+            </button>
+          </div>
+          
+          <div className="bg-gray-50 dark:bg-gray-900 p-4 rounded-xl border border-gray-100 dark:border-gray-800 flex items-center gap-2 overflow-x-auto min-h-[70px] shadow-inner">
+              {serializedArray.length === 0 && mode === "idle" && <span className="text-gray-400 dark:text-gray-500 text-sm italic">Serialized string will appear here...</span>}
+              {serializedArray.map((val, idx) => (
+                  <div key={idx} className={`w-10 h-10 flex items-center justify-center font-mono font-bold rounded-lg shadow-sm text-sm shrink-0 transition-all ${
+                      idx === activeStep 
+                      ? "bg-amber-500 text-white scale-110 shadow-amber-500/30 shadow-lg" 
+                      : val === "N" 
+                          ? "bg-gray-200 text-gray-400 dark:bg-gray-800 dark:text-gray-500" 
+                          : "bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:border-amber-700/50"
+                  }`}>
+                      {val}
+                  </div>
+              ))}
+              {serializedArray.length > 0 && <span className="text-amber-500 font-mono text-xl ml-2 animate-pulse">_</span>}
+          </div>
+        </div>
+
+        <PlaybackControls 
+          isPlaying={animating}
+          onPlayPause={animating ? pauseVisualizer : startVisualizer}
+          onStepForward={stepForward}
+          onStepBackward={stepBackward}
+          onReset={resetPlayback}
+          speed={speed}
+          onSpeedChange={setSpeed}
+          disabled={steps.length === 0}
+          showPlayPause={true}
+        />
+      </VisualizerCard>
+
+      <VisualizerCard
+        className={
+          message.includes("Complete") 
+            ? "border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30"
+            : animating
+                ? "border-[#a435f0]/30 bg-[#a435f0]/10 dark:border-[#a435f0]/50 dark:bg-[#a435f0]/20"
+                : ""
+        }
+      >
+        <div className="flex items-center text-xs text-gray-500 font-semibold gap-1.5 mb-2">
+          <Info className="w-4 h-4 text-[#a435f0]" /> Animation Status
+          <span className="ml-auto font-bold bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-gray-600 dark:text-gray-400">
+            Step {currentStepIdx !== -1 ? currentStepIdx + 1 : 0} / {steps.length || 0}
+          </span>
+        </div>
+        <div className="text-lg font-medium min-h-[28px]">{message}</div>
+      </VisualizerCard>
+
+      <VisualizerCard>
+        <div className="overflow-auto flex justify-center py-6 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 relative min-h-[400px]">
+          <svg width="800" height="350" viewBox="0 0 800 350" className="max-w-full h-auto drop-shadow-sm">
+            
+            {/* Edges */}
+            {EDGES.map(e => {
+              const isVisible = mode === "serializing" || mode === "idle" || builtEdges.includes(e.id);
+              const isActive = mode === "serializing" && activeStep >= 0 && (
+                  (SEQUENCE[activeStep].id === e.child) || 
+                  (SEQUENCE[activeStep].parent === e.parent && SEQUENCE[activeStep].type === "null")
+              );
+              
+              if (!isVisible) return null;
+
+              return (
+                <line 
+                  key={e.id} 
+                  x1={e.x1} y1={e.y1} x2={e.x2} y2={e.y2} 
+                  stroke={isActive ? "#f59e0b" : "#cbd5e1"} 
+                  strokeWidth={isActive ? "4" : "2"}
+                  className={`transition-all duration-500 ${!isActive && 'dark:stroke-slate-700'}`}
+                />
+              );
+            })}
+
+            {/* Nodes */}
+            {NODES.map(node => {
+              const isVisible = mode === "serializing" || mode === "idle" || builtNodes.includes(node.id);
+              const isActive = mode === "serializing" && activeStep >= 0 && SEQUENCE[activeStep].id === node.id;
+              const isDeserializingActive = mode === "deserializing" && activeStep >= 0 && SEQUENCE[activeStep].id === node.id;
+              
+              if (!isVisible) return null;
+
+              let stroke = "#94a3b8"; // slate-400
+              let fill = "var(--background)";
+              let textFill = "var(--foreground)";
+              
+              if (isActive || isDeserializingActive) {
+                stroke = "#f59e0b"; // amber-500
+                fill = "#fef3c7"; // amber-50
+                textFill = "#92400e"; // amber-800
+              } else if (builtNodes.includes(node.id)) {
+                 stroke = "#f59e0b"; // amber-500
+                 fill = "var(--background)";
+              }
+
+              return (
+                <g key={node.id} className="transition-all duration-500">
+                  {(isActive || isDeserializingActive) && <circle cx={node.x} cy={node.y} r="32" fill="none" className="stroke-yellow-300 dark:stroke-yellow-400" strokeWidth="2" strokeDasharray="4,2" className="animate-spin-slow opacity-80" />}
+                  <circle cx={node.x} cy={node.y} r="26" fill={fill} stroke={stroke} strokeWidth="2.5" className="shadow-sm transition-all duration-500 dark:stroke-slate-600" />
+                  <text x={node.x} y={node.y + 5} textAnchor="middle" fill={isActive || isDeserializingActive ? textFill : "var(--foreground)"} fontSize="14" fontWeight="bold" className="transition-all duration-500">{node.val}</text>
+                </g>
+              );
+            })}
+
+            {/* Null pointers visualization (only show active ones) */}
+            {activeStep >= 0 && SEQUENCE[activeStep].type === "null" && (
+                <g className="transition-all duration-500">
+                    {(() => {
+                        const parentNode = NODES.find(n => n.id === SEQUENCE[activeStep].parent);
+                        const dx = SEQUENCE[activeStep].dir === "left" ? -40 : 40;
+                        const dy = 50;
+                        return (
+                            <>
+                                <line x1={parentNode.x} y1={parentNode.y + 20} x2={parentNode.x + dx} y2={parentNode.y + dy} className="stroke-amber-500 dark:stroke-amber-400" strokeWidth="2" strokeDasharray="4,4" className="animate-pulse"/>
+                                <circle cx={parentNode.x + dx} cy={parentNode.y + dy} r="15" fill="var(--background)" className="stroke-amber-500 dark:stroke-amber-400" strokeWidth="2" />
+                                <text x={parentNode.x + dx} y={parentNode.y + dy + 4} textAnchor="middle" className="fill-amber-500 dark:fill-amber-400" fontSize="12" fontWeight="bold" fontFamily="monospace">N</text>
+                            </>
+                        )
+                    })()}
+                </g>
+            )}
+
+          </svg>
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+}
diff --git a/src/app/visualizer/tree/algorithms/serialization/codeBlock.jsx b/src/app/visualizer/tree/algorithms/serialization/codeBlock.jsx
new file mode 100644
index 000000000..72913354f
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/serialization/codeBlock.jsx
@@ -0,0 +1,145 @@
+"use client";
+import SharedCodeBlock from "@/app/components/ui/SharedCodeBlock";
+
+export default function SerializationCodeBlock() {
+  const codeExamples = {
+    javascript: `class Codec {
+  // Encodes a tree to a single string.
+  serialize(root) {
+    const res = [];
+    function dfs(node) {
+      if (!node) {
+        res.push("N");
+        return;
+      }
+      res.push(node.val.toString());
+      dfs(node.left);
+      dfs(node.right);
+    }
+    dfs(root);
+    return res.join(",");
+  }
+
+  // Decodes your encoded data to tree.
+  deserialize(data) {
+    const vals = data.split(",");
+    let i = 0;
+    
+    function dfs() {
+      if (vals[i] === "N") {
+        i++;
+        return null;
+      }
+      const node = new TreeNode(Number(vals[i]));
+      i++;
+      node.left = dfs();
+      node.right = dfs();
+      return node;
+    }
+    return dfs();
+  }
+}`,
+    python: `class Codec:
+    def serialize(self, root):
+        res = []
+        def dfs(node):
+            if not node:
+                res.append("N")
+                return
+            res.append(str(node.val))
+            dfs(node.left)
+            dfs(node.right)
+            
+        dfs(root)
+        return ",".join(res)
+
+    def deserialize(self, data):
+        vals = data.split(",")
+        self.i = 0
+        
+        def dfs():
+            if vals[self.i] == "N":
+                self.i += 1
+                return None
+                
+            node = TreeNode(int(vals[self.i]))
+            self.i += 1
+            node.left = dfs()
+            node.right = dfs()
+            return node
+            
+        return dfs()`,
+    java: `public class Codec {
+    // Encodes a tree to a single string.
+    public String serialize(TreeNode root) {
+        StringBuilder sb = new StringBuilder();
+        buildString(root, sb);
+        return sb.toString();
+    }
+
+    private void buildString(TreeNode node, StringBuilder sb) {
+        if (node == null) {
+            sb.append("N").append(",");
+        } else {
+            sb.append(node.val).append(",");
+            buildString(node.left, sb);
+            buildString(node.right, sb);
+        }
+    }
+
+    // Decodes your encoded data to tree.
+    public TreeNode deserialize(String data) {
+        Queue<String> nodes = new LinkedList<>();
+        nodes.addAll(Arrays.asList(data.split(",")));
+        return buildTree(nodes);
+    }
+    
+    private TreeNode buildTree(Queue<String> nodes) {
+        String val = nodes.remove();
+        if (val.equals("N")) return null;
+        
+        TreeNode node = new TreeNode(Integer.parseInt(val));
+        node.left = buildTree(nodes);
+        node.right = buildTree(nodes);
+        return node;
+    }
+}`,
+    cpp: `class Codec {
+public:
+    // Encodes a tree to a single string.
+    string serialize(TreeNode* root) {
+        if (!root) return "N,";
+        return to_string(root->val) + "," + serialize(root->left) + serialize(root->right);
+    }
+
+    // Decodes your encoded data to tree.
+    TreeNode* deserialize(string data) {
+        queue<string> q;
+        string s;
+        for (char c : data) {
+            if (c == ',') {
+                q.push(s);
+                s = "";
+            } else {
+                s += c;
+            }
+        }
+        return buildTree(q);
+    }
+    
+private:
+    TreeNode* buildTree(queue<string>& q) {
+        string s = q.front();
+        q.pop();
+        if (s == "N") return nullptr;
+        
+        TreeNode* node = new TreeNode(stoi(s));
+        node->left = buildTree(q);
+        node->right = buildTree(q);
+        return node;
+    }
+};`
+  };
+
+  return <SharedCodeBlock title="Serialize / Deserialize Code" codeExamples={codeExamples} color="text-orange-500" />;
+}
diff --git a/src/app/visualizer/tree/algorithms/serialization/content.jsx b/src/app/visualizer/tree/algorithms/serialization/content.jsx
new file mode 100644
index 000000000..7c52ff8b7
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/serialization/content.jsx
@@ -0,0 +1,171 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { FileDown, FileUp, Braces, Lightbulb } from "lucide-react";
+
+const SerializationContent = () => {
+  return (
+    <main className="max-w-4xl mx-auto mt-8 mb-8">
+      <article className="bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden shadow-lg shadow-orange-500/5">
+        
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-orange-500 mr-3 rounded-full"></span>
+            What is Tree Serialization?
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed space-y-4">
+            <p>
+              <strong>Serialization</strong> is the process of converting a data structure or object (like a binary tree) into a sequence of bits or a string so that it can be stored in a file or memory buffer, or transmitted across a network connection link to be reconstructed later in the same or another computer environment. 
+              <strong>Deserialization</strong> is the reverse process of taking that string and rebuilding the original tree structure in memory.
+            </p>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e] bg-orange-50/30 dark:bg-orange-900/5">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-orange-500 mr-3 rounded-full"></span>
+            Visual Example
+          </h2>
+          <div className="flex flex-col md:flex-row justify-center my-6 gap-8 items-center">
+            {/* Tree */}
+            <svg width="250" height="200" viewBox="0 0 250 200" className="drop-shadow-lg">
+              <line x1="125" y1="40" x2="60" y2="100" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="125" y1="40" x2="190" y2="100" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="190" y1="100" x2="160" y2="160" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="190" y1="100" x2="220" y2="160" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              
+              <circle cx="125" cy="40" r="20" className="fill-white dark:fill-slate-900 stroke-orange-500 dark:stroke-orange-400" strokeWidth="2" />
+              <text x="125" y="45" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">1</text>
+              
+              <circle cx="60" cy="100" r="20" className="fill-white dark:fill-slate-900 stroke-orange-500 dark:stroke-orange-400" strokeWidth="2" />
+              <text x="60" y="105" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">2</text>
+              
+              <circle cx="190" cy="100" r="20" className="fill-white dark:fill-slate-900 stroke-orange-500 dark:stroke-orange-400" strokeWidth="2" />
+              <text x="190" y="105" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">3</text>
+              
+              <circle cx="160" cy="160" r="20" className="fill-white dark:fill-slate-900 stroke-orange-500 dark:stroke-orange-400" strokeWidth="2" />
+              <text x="160" y="165" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">4</text>
+
+              <circle cx="220" cy="160" r="20" className="fill-white dark:fill-slate-900 stroke-orange-500 dark:stroke-orange-400" strokeWidth="2" />
+              <text x="220" y="165" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">5</text>
+            </svg>
+
+            <div className="flex flex-col items-center gap-2">
+              <FileDown className="w-8 h-8 text-orange-500" />
+              <FileUp className="w-8 h-8 text-orange-500" />
+            </div>
+
+            {/* String Representation */}
+            <div className="bg-slate-900 p-4 rounded-xl border border-slate-800 font-mono text-orange-300 drop-shadow-xl text-center">
+              <div className="text-xs text-slate-500 mb-2 uppercase tracking-widest font-sans">Pre-order String</div>
+              &quot;1,2,N,N,3,4,N,N,5,N,N&quot;
+            </div>
+          </div>
+          <p className="text-center text-sm text-gray-500 dark:text-gray-400">
+            Using Pre-order traversal, the tree is flattened. &apos;N&apos; is used to explicitly mark null pointers to preserve the exact structure.
+          </p>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-orange-500 mr-3 rounded-full"></span>
+            Algorithm Strategy
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-4 leading-relaxed">
+            <div className="mt-6 grid gap-4">
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-orange-50/30 dark:from-neutral-900 dark:to-orange-950/20 border-orange-100 dark:border-orange-900/50 hover:shadow-md hover:border-orange-300 dark:hover:border-orange-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-orange-100 dark:bg-orange-900/60 p-2 rounded-lg text-orange-600 dark:text-orange-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <FileDown className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">1. Serialize (DFS Pre-order)</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      Traverse the tree using Depth-First Search (DFS) in Pre-order (Root, Left, Right). Append the current node&apos;s value to a list. If a node is null, append a special marker like &quot;N&quot;.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-orange-50/30 dark:from-neutral-900 dark:to-orange-950/20 border-orange-100 dark:border-orange-900/50 hover:shadow-md hover:border-orange-300 dark:hover:border-orange-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-orange-100 dark:bg-orange-900/60 p-2 rounded-lg text-orange-600 dark:text-orange-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <Braces className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">2. Format Output</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      Join the list of strings using a delimiter like a comma &quot;,&quot;. This creates a single continuous string representation of the tree.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-orange-50/30 dark:from-neutral-900 dark:to-orange-950/20 border-orange-100 dark:border-orange-900/50 hover:shadow-md hover:border-orange-300 dark:hover:border-orange-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-orange-100 dark:bg-orange-900/60 p-2 rounded-lg text-orange-600 dark:text-orange-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <FileUp className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">3. Deserialize</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      Split the string by commas into a queue or array. Use DFS again, reading values one by one in the exact same Pre-order sequence. If you encounter &quot;N&quot;, return null. Otherwise, construct a new node, recursively attach its left and right children, and return it.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="p-6">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-orange-500 mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <div className="flex flex-wrap gap-4 mb-6">
+              <div className="flex items-center gap-2 bg-orange-50 dark:bg-orange-900/20 px-4 py-2 rounded-lg border border-orange-200 dark:border-orange-800 shadow-sm">
+                <span className="font-semibold text-orange-800 dark:text-orange-300">Time:</span>
+                <span className="font-mono text-orange-600 dark:text-orange-400">O(N)</span>
+              </div>
+              <div className="flex items-center gap-2 bg-orange-50 dark:bg-orange-900/20 px-4 py-2 rounded-lg border border-orange-200 dark:border-orange-800 shadow-sm">
+                <span className="font-semibold text-orange-800 dark:text-orange-300">Space:</span>
+                <span className="font-mono text-orange-600 dark:text-orange-400">O(N)</span>
+              </div>
+            </div>
+            <p className="text-sm mb-6">Where N is the number of nodes. We visit every node exactly once during both serialization and deserialization. The resulting string and the array used to process it will take O(N) space.</p>
+            <div className="mt-4 bg-gray-50 dark:bg-neutral-900 rounded-xl p-4 border border-gray-200 dark:border-gray-800 shadow-inner">
+              <ComplexityGraph
+                bestCase={(n) => n}
+                averageCase={(n) => n}
+                worstCase={(n) => n}
+                maxN={50}
+                title="Time Complexity: O(N)"
+              />
+            </div>
+          </div>
+        </section>
+        
+        <section className="p-6 border-t border-[#f3f4f6] dark:border-[#1e1e1e] bg-gradient-to-r from-orange-50 to-white dark:from-orange-950/20 dark:to-neutral-950">
+          <div className="flex items-start gap-4">
+            <div className="mt-1 bg-orange-100 dark:bg-orange-900/50 p-2.5 rounded-xl shadow-sm text-orange-600 dark:text-orange-400">
+              <Lightbulb className="w-6 h-6" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold text-orange-900 dark:text-orange-300 mb-2">
+                Key Takeaways
+              </h2>
+              <ul className="list-disc pl-5 space-y-2 text-sm text-orange-800 dark:text-orange-200/80 leading-relaxed">
+                <li>Pre-order traversal is excellent for this because the root node is always processed first, which perfectly matches how you need to read the data to rebuild the tree top-down.</li>
+                <li>Explicitly marking null pointers is crucial. Without them, you lose the structural information needed to know when to stop attaching children.</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+};
+
+export default SerializationContent;
diff --git a/src/app/visualizer/tree/algorithms/serialization/quiz.jsx b/src/app/visualizer/tree/algorithms/serialization/quiz.jsx
new file mode 100644
index 000000000..d349cf7d8
--- /dev/null
+++ b/src/app/visualizer/tree/algorithms/serialization/quiz.jsx
@@ -0,0 +1,34 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const handleNext = () => {
+  const questions = [
+  {
+    "question": "Why are null markers important during tree serialization?",
+    "options": [
+      "They reduce the string length",
+      "They preserve the exact tree structure",
+      "They make the tree balanced",
+      "They speed up traversal"
+    ],
+    "correctAnswer": 1,
+    "explanation": "Null markers ensure the serialized output can be decoded back into the original tree shape."
+  },
+  {
+    "question": "Which traversal order is standard for deterministic tree serialization?",
+    "options": [
+      "Pre-order",
+      "In-order",
+      "Post-order",
+      "Level-order"
+    ],
+    "correctAnswer": 0,
+    "explanation": "Pre-order is commonly used because it serializes the root before its children, making reconstruction straightforward."
+  }
+];
+
+  return <QuizEngine title="Serialization Quiz" questions={questions} />;
+};
+
+export default handleNext;
diff --git a/src/app/visualizer/tree/applications/decision-trees/AlgorithmClient.jsx b/src/app/visualizer/tree/applications/decision-trees/AlgorithmClient.jsx
new file mode 100644
index 000000000..f894d83d9
--- /dev/null
+++ b/src/app/visualizer/tree/applications/decision-trees/AlgorithmClient.jsx
@@ -0,0 +1,43 @@
+import Animation from "./animation";
+import Content from "./content";
+import CodeBlock from "./codeBlock";
+import Quiz from "./quiz";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+
+
+export default function DecisionTreesPage() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Applications", "Decision Trees")}
+      title="Decision Trees"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      quiz={<Quiz />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.decisionTrees}
+          description="Mark Decision Trees as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other Tree Applications"
+          links={[
+            { text: "Heap Sort", description: "Efficient sorting algorithm based on binary heap.", url: "./heapsort" },
+            { text: "Huffman Coding", description: "Data compression using Huffman Trees.", url: "./huffman" },
+            { text: "Syntax Trees", description: "Abstract Syntax Trees in compilers.", url: "./syntax-trees" },
+          ]}
+          columns="3"
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/applications/decision-trees/animation.jsx b/src/app/visualizer/tree/applications/decision-trees/animation.jsx
new file mode 100644
index 000000000..ef695e0bf
--- /dev/null
+++ b/src/app/visualizer/tree/applications/decision-trees/animation.jsx
@@ -0,0 +1,309 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import { Play, RotateCcw, Info, RefreshCw } from "lucide-react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import usePlayback from "@/app/hooks/usePlayback";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+
+export default function DecisionTreeAnimation() {
+  const [animating, setAnimating] = useState(false);
+  const [message, setMessage] = useState("Click 'Classify' to trace a decision path.");
+  const [sample, setSample] = useState({ weather: "Rainy", wind: "Strong" });
+  
+  const [steps, setSteps] = useState([]);
+  const [currentStepIdx, setCurrentStepIdx] = useState(-1);
+  const { speed, setSpeed } = usePlayback(1);
+  const timerRef = useRef(null);
+  useVisualizerReset(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setAnimating(false);
+    setMessage("...");
+    setSample({ weather: "Rainy", wind: "Strong" });
+    setSteps([]);
+    setCurrentStepIdx(-1);
+  });
+
+  const currentStep = steps[currentStepIdx] || null;
+  const activeNode = currentStep ? currentStep.activeNode : null;
+  const activeEdge = currentStep ? currentStep.activeEdge : null;
+  const prediction = currentStep ? currentStep.prediction : null;
+
+
+  useEffect(() => {
+    if (currentStep) {
+      setMessage(currentStep.message);
+    }
+  }, [currentStep]);
+
+  useEffect(() => {
+    if (!animating || steps.length === 0) return;
+    if (currentStepIdx >= steps.length - 1) { setAnimating(false); return; }
+    timerRef.current = setTimeout(() => setCurrentStepIdx(p => p + 1), 1600 / speed);
+    return () => { if (timerRef.current) clearTimeout(timerRef.current); };
+  }, [animating, currentStepIdx, steps, speed]);
+
+  const pauseVisualizer = () => { setAnimating(false); if (timerRef.current) clearTimeout(timerRef.current); };
+  const startVisualizer = () => {
+    if (steps.length === 0) return;
+    setAnimating(true);
+    const nextIdx = currentStepIdx === -1 || currentStepIdx >= steps.length - 1 ? 0 : currentStepIdx + 1;
+    setCurrentStepIdx(nextIdx);
+  };
+  const stepForward = () => { setAnimating(false); if (currentStepIdx < steps.length - 1) setCurrentStepIdx(p => p + 1); };
+  const stepBackward = () => { setAnimating(false); if (currentStepIdx > 0) setCurrentStepIdx(p => p - 1); };
+  const resetPlayback = () => {
+    setAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setCurrentStepIdx(-1);
+    setMessage("Playback reset.");
+  };
+
+  const classify = () => {
+    setAnimating(false);
+    const newSteps = [];
+
+    newSteps.push({
+      activeNode: null,
+      activeEdge: null,
+      prediction: null,
+      message: `Classifying instance: { Weather: ${sample.weather}, Wind: ${sample.wind} }`
+    });
+
+    newSteps.push({
+      activeNode: "N1",
+      activeEdge: null,
+      prediction: null,
+      message: "Node N1: What is the Weather?"
+    });
+
+    if (sample.weather === "Sunny") {
+      newSteps.push({
+        activeNode: "N1",
+        activeEdge: "E1",
+        prediction: null,
+        message: "Weather is Sunny -> Go Left"
+      });
+      
+      newSteps.push({
+        activeNode: "N2",
+        activeEdge: "E1",
+        prediction: "Yes",
+        message: "Leaf Node N2: Play Tennis = Yes!"
+      });
+    } else {
+      newSteps.push({
+        activeNode: "N1",
+        activeEdge: "E2",
+        prediction: null,
+        message: "Weather is Rainy -> Go Right"
+      });
+      
+      newSteps.push({
+        activeNode: "N3",
+        activeEdge: "E2",
+        prediction: null,
+        message: "Node N3: What is the Wind?"
+      });
+
+      if (sample.wind === "Weak") {
+        newSteps.push({
+          activeNode: "N3",
+          activeEdge: "E3",
+          prediction: null,
+          message: "Wind is Weak -> Go Left"
+        });
+
+        newSteps.push({
+          activeNode: "N4",
+          activeEdge: "E3",
+          prediction: "Yes",
+          message: "Leaf Node N4: Play Tennis = Yes!"
+        });
+      } else {
+        newSteps.push({
+          activeNode: "N3",
+          activeEdge: "E4",
+          prediction: null,
+          message: "Wind is Strong -> Go Right"
+        });
+
+        newSteps.push({
+          activeNode: "N5",
+          activeEdge: "E4",
+          prediction: "No",
+          message: "Leaf Node N5: Play Tennis = No!"
+        });
+      }
+    }
+    
+    setSteps(newSteps);
+    setCurrentStepIdx(0);
+    setAnimating(true);
+  };
+
+  const handleReset = () => {
+    setAnimating(false);
+    setSteps([]);
+    setCurrentStepIdx(-1);
+    setMessage("Click 'Classify' to trace a decision path.");
+  };
+
+  const toggleSample = () => {
+    if (sample.weather === "Sunny") {
+      setSample({ weather: "Rainy", wind: "Weak" });
+    } else if (sample.weather === "Rainy" && sample.wind === "Weak") {
+      setSample({ weather: "Rainy", wind: "Strong" });
+    } else {
+      setSample({ weather: "Sunny", wind: "Strong" });
+    }
+    handleReset();
+  };
+
+  useVisualizerKeyboard({
+    onStepForward: stepForward,
+    onStepBackward: stepBackward,
+    onTogglePlay: animating ? pauseVisualizer : startVisualizer,
+    onReset: resetPlayback,
+    onSpeedChange: setSpeed,
+    speed: speed,
+    sorting: animating,
+    sorted: false,
+    enabled: true,
+  });
+
+  // Node styles
+  const getFill = (id, isLeaf) => {
+    if (activeNode === id) return "#a435f0";
+    if (isLeaf) return "var(--background)";
+    return "var(--background)";
+  };
+
+  const getStroke = (id, isLeaf, color) => {
+    if (activeNode === id) return "#d38cff";
+    if (isLeaf) return color || "#64748b";
+    return "#a435f0";
+  };
+  
+  const getTextColor = (id, isLeaf, color) => {
+    if (activeNode === id) return "#ffffff";
+    if (isLeaf) return color || "var(--foreground)";
+    return "var(--foreground)";
+  };
+
+  return (
+    <VisualizerInteractiveLayout>
+      <VisualizerCard>
+        <div className="flex justify-between items-center mb-6">
+          <div className="flex items-center gap-4">
+            <div className="text-sm font-bold text-gray-700 dark:text-gray-300">Current Sample: </div>
+            <button 
+              onClick={toggleSample}
+              disabled={animating}
+              className="px-3 py-1.5 bg-gray-100 text-[#a435f0] border border-gray-200 dark:bg-gray-800 dark:border-gray-700 dark:text-[#d38cff] rounded-lg text-sm font-bold hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors disabled:opacity-50"
+            >
+              Weather: {sample.weather}, Wind: {sample.wind}
+            </button>
+          </div>
+          <div className="flex items-center gap-3">
+            <button 
+              onClick={classify} 
+              disabled={animating}
+              className="flex items-center gap-2 px-6 py-2.5 text-sm font-bold bg-[#a435f0] hover:bg-[#8f2cd6] disabled:opacity-50 text-white rounded-xl transition-all shadow-md"
+            >
+              <Play className="w-4 h-4" /> Classify
+            </button>
+            <button 
+              onClick={handleReset} 
+              className="px-4 py-2.5 text-sm font-bold text-red-500 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-xl transition-all border border-red-500/30 flex items-center gap-2"
+            >
+              <RefreshCw className="w-4 h-4" /> Reset
+            </button>
+          </div>
+        </div>
+
+        <PlaybackControls 
+          isPlaying={animating}
+          onPlayPause={animating ? pauseVisualizer : startVisualizer}
+          onStepForward={stepForward}
+          onStepBackward={stepBackward}
+          onReset={resetPlayback}
+          speed={speed}
+          onSpeedChange={setSpeed}
+          disabled={steps.length === 0}
+          showPlayPause={true}
+        />
+      </VisualizerCard>
+
+      <VisualizerCard
+        className={
+          prediction === "Yes" 
+            ? "border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30"
+            : prediction === "No"
+              ? "border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-950/30"
+              : animating
+                ? "border-[#a435f0]/30 bg-[#a435f0]/10 dark:border-[#a435f0]/50 dark:bg-[#a435f0]/20"
+                : ""
+        }
+      >
+        <div className="flex items-center text-xs text-gray-500 font-semibold gap-1.5 mb-2">
+          <Info className="w-4 h-4 text-[#a435f0]" /> Animation Status
+          <span className="ml-auto font-bold bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-gray-600 dark:text-gray-400">
+            Step {currentStepIdx !== -1 ? currentStepIdx + 1 : 0} / {steps.length || 0}
+          </span>
+        </div>
+        <div className="text-lg font-medium min-h-[28px]">{message}</div>
+      </VisualizerCard>
+
+      <VisualizerCard>
+        <div className="overflow-auto flex justify-center py-6 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 relative min-h-[350px]">
+          <svg width="600" height="300" viewBox="0 0 600 300" className="max-w-full h-auto drop-shadow-sm">
+            {/* Edges */}
+            <g>
+              <line x1="300" y1="60" x2="150" y2="150" stroke={activeEdge === "E1" ? "#a435f0" : "#cbd5e1"} strokeWidth={activeEdge === "E1" ? "4" : "2"} className="transition-all duration-500 dark:stroke-slate-700" />
+              <line x1="300" y1="60" x2="450" y2="150" stroke={activeEdge === "E2" ? "#a435f0" : "#cbd5e1"} strokeWidth={activeEdge === "E2" ? "4" : "2"} className="transition-all duration-500 dark:stroke-slate-700" />
+              <line x1="450" y1="150" x2="350" y2="240" stroke={activeEdge === "E3" ? "#a435f0" : "#cbd5e1"} strokeWidth={activeEdge === "E3" ? "4" : "2"} className="transition-all duration-500 dark:stroke-slate-700" />
+              <line x1="450" y1="150" x2="550" y2="240" stroke={activeEdge === "E4" ? "#a435f0" : "#cbd5e1"} strokeWidth={activeEdge === "E4" ? "4" : "2"} className="transition-all duration-500 dark:stroke-slate-700" />
+              
+              <text x="210" y="95" className="fill-gray-500 dark:fill-gray-400" fontSize="12" fontWeight="bold">Sunny</text>
+              <text x="390" y="95" className="fill-gray-500 dark:fill-gray-400" fontSize="12" fontWeight="bold">Rainy</text>
+              <text x="380" y="190" className="fill-gray-500 dark:fill-gray-400" fontSize="12" fontWeight="bold">Weak</text>
+              <text x="510" y="190" className="fill-gray-500 dark:fill-gray-400" fontSize="12" fontWeight="bold">Strong</text>
+            </g>
+
+            {/* Nodes */}
+            <g className="transition-all duration-500">
+              {activeNode === "N1" && <rect x="230" y="40" width="140" height="40" rx="20" fill="none" className="stroke-purple-300 dark:stroke-purple-400" strokeWidth="2" strokeDasharray="4,2" className="animate-spin-slow opacity-80" />}
+              <rect x="240" y="40" width="120" height="40" rx="20" fill={getFill("N1", false)} stroke={getStroke("N1", false)} strokeWidth="2.5" className="shadow-sm transition-all duration-500" />
+              <text x="300" y="65" textAnchor="middle" fill={getTextColor("N1", false)} fontSize="14" fontWeight="bold">Weather?</text>
+            </g>
+
+            <g className="transition-all duration-500">
+              <rect x="100" y="130" width="100" height="40" rx="8" fill={getFill("N2", true)} stroke={getStroke("N2", true, "#10b981")} strokeWidth="2.5" className="shadow-sm transition-all duration-500" />
+              <text x="150" y="155" textAnchor="middle" fill={getTextColor("N2", true, "#059669")} fontSize="14" fontWeight="bold">Yes</text>
+            </g>
+
+            <g className="transition-all duration-500">
+              <rect x="390" y="130" width="120" height="40" rx="20" fill={getFill("N3", false)} stroke={getStroke("N3", false)} strokeWidth="2.5" className="shadow-sm transition-all duration-500" />
+              <text x="450" y="155" textAnchor="middle" fill={getTextColor("N3", false)} fontSize="14" fontWeight="bold">Wind?</text>
+            </g>
+
+            <g className="transition-all duration-500">
+              <rect x="300" y="220" width="100" height="40" rx="8" fill={getFill("N4", true)} stroke={getStroke("N4", true, "#10b981")} strokeWidth="2.5" className="shadow-sm transition-all duration-500" />
+              <text x="350" y="245" textAnchor="middle" fill={getTextColor("N4", true, "#059669")} fontSize="14" fontWeight="bold">Yes</text>
+            </g>
+
+            <g className="transition-all duration-500">
+              <rect x="500" y="220" width="100" height="40" rx="8" fill={getFill("N5", true)} stroke={getStroke("N5", true, "#ef4444")} strokeWidth="2.5" className="shadow-sm transition-all duration-500" />
+              <text x="550" y="245" textAnchor="middle" fill={getTextColor("N5", true, "#dc2626")} fontSize="14" fontWeight="bold">No</text>
+            </g>
+          </svg>
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+}
diff --git a/src/app/visualizer/tree/applications/decision-trees/codeBlock.jsx b/src/app/visualizer/tree/applications/decision-trees/codeBlock.jsx
new file mode 100644
index 000000000..27eff92d4
--- /dev/null
+++ b/src/app/visualizer/tree/applications/decision-trees/codeBlock.jsx
@@ -0,0 +1,60 @@
+"use client";
+import SharedCodeBlock from "@/app/components/ui/SharedCodeBlock";
+
+export default function DecisionTreesCodeBlock() {
+  const codeExamples = {
+    python: `from sklearn.tree import DecisionTreeClassifier
+from sklearn import datasets
+from sklearn.model_selection import train_test_split
+
+# Load Iris dataset
+iris = datasets.load_iris()
+X = iris.data
+y = iris.target
+
+# Split dataset into training set and test set
+X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.3, random_state=1)
+
+# Create Decision Tree classifer object
+clf = DecisionTreeClassifier(criterion="entropy", max_depth=3)
+
+# Train Decision Tree Classifer
+clf = clf.fit(X_train,y_train)
+
+# Predict the response for test dataset
+y_pred = clf.predict(X_test)`,
+    javascript: `// A simple manual Decision Tree implementation in JS
+class DecisionNode {
+  constructor(feature, threshold, left, right, value) {
+    this.feature = feature;
+    this.threshold = threshold;
+    this.left = left;
+    this.right = right;
+    this.value = value;
+  }
+}
+
+function predict(node, row) {
+  if (node.value !== undefined) {
+    return node.value;
+  }
+  if (row[node.feature] < node.threshold) {
+    return predict(node.left, row);
+  } else {
+    return predict(node.right, row);
+  }
+}
+
+// Example tree: If feature 0 < 5.0, class is 0, else 1
+const root = new DecisionNode(0, 5.0, 
+  new DecisionNode(null, null, null, null, 0),
+  new DecisionNode(null, null, null, null, 1)
+);
+
+const sample = [4.5, 3.2, 1.3, 0.2];
+const prediction = predict(root, sample);
+console.log("Predicted class:", prediction);`
+  };
+
+  return <SharedCodeBlock title="Decision Tree Example" codeExamples={codeExamples} color="text-purple-500" />;
+}
diff --git a/src/app/visualizer/tree/applications/decision-trees/content.jsx b/src/app/visualizer/tree/applications/decision-trees/content.jsx
new file mode 100644
index 000000000..f6b54e404
--- /dev/null
+++ b/src/app/visualizer/tree/applications/decision-trees/content.jsx
@@ -0,0 +1,137 @@
+"use client";
+import { GitBranch, GitMerge, FileQuestion, Lightbulb } from "lucide-react";
+
+const DecisionTreesContent = () => {
+  return (
+    <main className="max-w-4xl mx-auto mt-8 mb-8">
+      <article className="bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden shadow-lg shadow-purple-500/5">
+        
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            What are Decision Trees?
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed space-y-4">
+            <p>
+              A Decision Tree is a supervised machine learning algorithm that is used for both classification and regression tasks. It builds a flowchart-like tree structure where each internal node represents a &quot;test&quot; on an attribute (e.g., whether a coin flip comes up heads or tails), each branch represents the outcome of the test, and each leaf node represents a class label or continuous value.
+            </p>
+            <p>
+              It is a highly interpretable model, meaning it is easy to understand exactly how the model arrived at a particular decision.
+            </p>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e] bg-purple-50/30 dark:bg-purple-900/5">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            Visual Example
+          </h2>
+          <div className="flex justify-center my-6">
+            <svg width="500" height="280" viewBox="0 0 500 280" className="drop-shadow-lg">
+              <line x1="250" y1="50" x2="150" y2="130" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="250" y1="50" x2="350" y2="130" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="350" y1="130" x2="280" y2="210" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="350" y1="130" x2="420" y2="210" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+
+              <text x="180" y="80" className="fill-purple-500 dark:fill-purple-400" fontSize="14" fontWeight="bold">Yes</text>
+              <text x="310" y="80" className="fill-purple-500 dark:fill-purple-400" fontSize="14" fontWeight="bold">No</text>
+              <text x="300" y="160" className="fill-purple-500 dark:fill-purple-400" fontSize="14" fontWeight="bold">&lt; 30</text>
+              <text x="390" y="160" className="fill-purple-500 dark:fill-purple-400" fontSize="14" fontWeight="bold">&gt;= 30</text>
+
+              <rect x="170" y="30" width="160" height="40" rx="20" className="fill-purple-100 dark:fill-purple-900 stroke-purple-500 dark:stroke-purple-400" strokeWidth="2" />
+              <text x="250" y="55" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">Is it raining?</text>
+              
+              <rect x="70" y="110" width="160" height="40" rx="8" className="fill-purple-50 dark:fill-indigo-950 stroke-purple-500 dark:stroke-purple-400" strokeWidth="2" />
+              <text x="150" y="135" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">Stay Indoors</text>
+              
+              <rect x="270" y="110" width="160" height="40" rx="20" className="fill-purple-100 dark:fill-purple-900 stroke-purple-500 dark:stroke-purple-400" strokeWidth="2" />
+              <text x="350" y="135" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">Temperature?</text>
+
+              <rect x="200" y="190" width="160" height="40" rx="8" className="fill-purple-50 dark:fill-indigo-950 stroke-purple-500 dark:stroke-purple-400" strokeWidth="2" />
+              <text x="280" y="215" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">Play Tennis</text>
+              
+              <rect x="370" y="190" width="100" height="40" rx="8" className="fill-purple-50 dark:fill-indigo-950 stroke-purple-500 dark:stroke-purple-400" strokeWidth="2" />
+              <text x="420" y="215" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">Go Swimming</text>
+            </svg>
+          </div>
+          <p className="text-center text-sm text-gray-500 dark:text-gray-400">
+            A simple decision tree to decide an activity based on the weather conditions.
+          </p>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            Algorithm Strategy
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-4 leading-relaxed">
+            <div className="mt-6 grid gap-4">
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-purple-50/30 dark:from-neutral-900 dark:to-purple-950/20 border-purple-100 dark:border-purple-900/50 hover:shadow-md hover:border-purple-300 dark:hover:border-purple-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-purple-100 dark:bg-purple-900/60 p-2 rounded-lg text-purple-600 dark:text-purple-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <FileQuestion className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">1. Select the Best Attribute</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      Evaluate all features to find the one that best splits the data. This is typically done using metrics like Gini Impurity, Information Gain, or Variance Reduction.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-purple-50/30 dark:from-neutral-900 dark:to-purple-950/20 border-purple-100 dark:border-purple-900/50 hover:shadow-md hover:border-purple-300 dark:hover:border-purple-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-purple-100 dark:bg-purple-900/60 p-2 rounded-lg text-purple-600 dark:text-purple-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <GitBranch className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">2. Split the Dataset</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      Divide the dataset into subsets based on the selected attribute. Create a child node for each possible outcome of the condition.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-purple-50/30 dark:from-neutral-900 dark:to-purple-950/20 border-purple-100 dark:border-purple-900/50 hover:shadow-md hover:border-purple-300 dark:hover:border-purple-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-purple-100 dark:bg-purple-900/60 p-2 rounded-lg text-purple-600 dark:text-purple-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <GitMerge className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">3. Repeat Recursively</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      Repeat the process for each subset. Stop when the subset is pure (all examples belong to the same class) or a stopping criterion (like max depth) is reached.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="p-6 border-t border-[#f3f4f6] dark:border-[#1e1e1e] bg-gradient-to-r from-purple-50 to-white dark:from-purple-950/20 dark:to-neutral-950">
+          <div className="flex items-start gap-4">
+            <div className="mt-1 bg-purple-100 dark:bg-purple-900/50 p-2.5 rounded-xl shadow-sm text-purple-600 dark:text-purple-400">
+              <Lightbulb className="w-6 h-6" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold text-purple-900 dark:text-purple-300 mb-2">
+                Key Takeaways
+              </h2>
+              <ul className="list-disc pl-5 space-y-2 text-sm text-purple-800 dark:text-purple-200/80 leading-relaxed">
+                <li>Decision Trees are prone to <strong>overfitting</strong> if they are allowed to grow too deep.</li>
+                <li>Pruning is a technique used to remove sections of the tree that provide little power to classify instances, thus reducing overfitting.</li>
+                <li>They handle both numerical and categorical data naturally.</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+};
+
+export default DecisionTreesContent;
diff --git a/src/app/visualizer/tree/applications/decision-trees/quiz.jsx b/src/app/visualizer/tree/applications/decision-trees/quiz.jsx
new file mode 100644
index 000000000..ca5dab8ae
--- /dev/null
+++ b/src/app/visualizer/tree/applications/decision-trees/quiz.jsx
@@ -0,0 +1,45 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const handleNext = () => {
+  const questions = [
+  {
+    "question": "What is a major advantage of Decision Trees?",
+    "options": [
+      "They always achieve 100% accuracy on test data",
+      "They are highly interpretable and easy to understand",
+      "They never overfit the training data",
+      "They only work with numerical data"
+    ],
+    "correctAnswer": 1,
+    "explanation": "Decision Trees are considered \"white-box\" models because their rules can be easily visualized and understood by humans."
+  },
+  {
+    "question": "What technique is commonly used to prevent a Decision Tree from overfitting?",
+    "options": [
+      "Gradient Descent",
+      "Backpropagation",
+      "Pruning",
+      "K-Means Clustering"
+    ],
+    "correctAnswer": 2,
+    "explanation": "Pruning reduces the size of decision trees by removing sections of the tree that provide little power to classify instances, thus preventing overfitting."
+  },
+  {
+    "question": "In a Decision Tree, what does a leaf node represent?",
+    "options": [
+      "A test on an attribute",
+      "The root of the tree",
+      "The final decision or class label",
+      "A missing value"
+    ],
+    "correctAnswer": 2,
+    "explanation": "Leaf nodes (or terminal nodes) hold the final output label or continuous value prediction."
+  }
+];
+
+  return <QuizEngine title="Decision Trees Quiz" questions={questions} />;
+};
+
+export default handleNext;
diff --git a/src/app/visualizer/tree/applications/heap/AlgorithmClient.jsx b/src/app/visualizer/tree/applications/heap/AlgorithmClient.jsx
new file mode 100644
index 000000000..f57075fb2
--- /dev/null
+++ b/src/app/visualizer/tree/applications/heap/AlgorithmClient.jsx
@@ -0,0 +1,43 @@
+import Animation from "./animation";
+import Content from "./content";
+import CodeBlock from "./codeBlock";
+import Quiz from "./quiz";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+
+
+export default function HeapPage() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Applications", "Heap")}
+      title="Heap Visualizer"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      quiz={<Quiz />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.heapVisualizer}
+          description="Mark Heap Visualizer as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other Tree Applications"
+          links={[
+            { text: "Heap Sort", description: "Use heap structure to sort arrays efficiently.", url: "/visualizer/tree/applications/heapsort" },
+            { text: "Huffman Coding", description: "Tree-based lossless compression strategy.", url: "/visualizer/tree/applications/huffman" },
+            { text: "Decision Trees", description: "Decision boundaries and classification logic.", url: "/visualizer/tree/applications/decision-trees" },
+          ]}
+          columns="3"
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/applications/heap/animation.jsx b/src/app/visualizer/tree/applications/heap/animation.jsx
new file mode 100644
index 000000000..d77f381db
--- /dev/null
+++ b/src/app/visualizer/tree/applications/heap/animation.jsx
@@ -0,0 +1,504 @@
+"use client";
+
+import React, { useMemo, useRef, useState } from "react";
+import { ArrowDownToLine, ArrowUpToLine, Eye, Layers, Repeat, Sparkles } from "lucide-react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+
+const INITIAL_HEAP = [20, 35, 40, 55, 60, 75];
+const STEP_DELAY = 650;
+
+const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const parentIndex = (i) => Math.floor((i - 1) / 2);
+const leftChild = (i) => 2 * i + 1;
+const rightChild = (i) => 2 * i + 2;
+
+export default function HeapAnimation() {
+  const [heapType, setHeapType] = useState("min");
+  const [heap, setHeap] = useState(INITIAL_HEAP);
+  const [inputValue, setInputValue] = useState("");
+  const [operation, setOperation] = useState("Ready");
+  const [explanation, setExplanation] = useState("Choose a heap type and run an operation to start learning.");
+  const [comparisonText, setComparisonText] = useState("");
+  const [activeIndices, setActiveIndices] = useState([]);
+  const [swappingIndices, setSwappingIndices] = useState([]);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const animationTokenRef = useRef(0);
+
+  const compare = (a, b, mode = heapType) => (mode === "min" ? a < b : a > b);
+
+  const runFrame = async (frame, token) => {
+    if (animationTokenRef.current !== token) return;
+    setHeap(frame.heap);
+    setOperation(frame.operation);
+    setExplanation(frame.explanation);
+    setComparisonText(frame.comparison || "");
+    setActiveIndices(frame.activeIndices || []);
+    setSwappingIndices(frame.swappingIndices || []);
+    await wait(STEP_DELAY);
+  };
+
+  const playFrames = async (frames) => {
+    const token = Date.now();
+    animationTokenRef.current = token;
+    setIsAnimating(true);
+    for (const frame of frames) {
+      await runFrame(frame, token);
+      if (animationTokenRef.current !== token) return;
+    }
+    setActiveIndices([]);
+    setSwappingIndices([]);
+    setComparisonText("");
+    setIsAnimating(false);
+  };
+
+  const buildHeapFrames = (seedHeap, mode) => {
+    const arr = [...seedHeap];
+    const frames = [
+      {
+        heap: [...arr],
+        operation: `Switch to ${mode === "min" ? "Min Heap" : "Max Heap"}`,
+        explanation: "Rebuilding structure to satisfy the new heap property.",
+      },
+    ];
+
+    const heapifyDown = (start, size) => {
+      let i = start;
+      while (true) {
+        let target = i;
+        const l = leftChild(i);
+        const r = rightChild(i);
+
+        if (l < size) {
+          frames.push({
+            heap: [...arr],
+            operation: "Heapify",
+            explanation: `${mode === "min" ? "Min" : "Max"} Heap property check in progress.`,
+            comparison: `Comparing node ${arr[i]} with left child ${arr[l]}`,
+            activeIndices: [i, l],
+          });
+          if (compare(arr[l], arr[target], mode)) target = l;
+        }
+
+        if (r < size) {
+          frames.push({
+            heap: [...arr],
+            operation: "Heapify",
+            explanation: `${mode === "min" ? "Min" : "Max"} Heap property check in progress.`,
+            comparison: `Comparing node ${arr[target]} with right child ${arr[r]}`,
+            activeIndices: [target, r],
+          });
+          if (compare(arr[r], arr[target], mode)) target = r;
+        }
+
+        if (target === i) break;
+
+        frames.push({
+          heap: [...arr],
+          operation: "Heapify",
+          explanation: `Swapping nodes to restore ${mode === "min" ? "Min" : "Max"} Heap property.`,
+          comparison: `Swapping ${arr[i]} and ${arr[target]}`,
+          swappingIndices: [i, target],
+          activeIndices: [i, target],
+        });
+
+        [arr[i], arr[target]] = [arr[target], arr[i]];
+
+        frames.push({
+          heap: [...arr],
+          operation: "Heapify",
+          explanation: "Partial heap fixed. Continuing down the tree.",
+          activeIndices: [target],
+        });
+
+        i = target;
+      }
+    };
+
+    for (let i = Math.floor(arr.length / 2) - 1; i >= 0; i -= 1) {
+      heapifyDown(i, arr.length);
+    }
+
+    frames.push({
+      heap: [...arr],
+      operation: "Heapify Complete",
+      explanation: `${mode === "min" ? "Min" : "Max"} Heap property restored for entire tree.`,
+    });
+
+    return frames;
+  };
+
+  const insertValue = async () => {
+    if (isAnimating) return;
+    const parsed = Number(inputValue);
+    if (!Number.isFinite(parsed)) {
+      setExplanation("Please enter a valid number before inserting.");
+      return;
+    }
+
+    const arr = [...heap, parsed];
+    const frames = [
+      {
+        heap: [...arr],
+        operation: "Insert",
+        explanation: `Inserted ${parsed} at the end of the heap (next available position).`,
+        activeIndices: [arr.length - 1],
+      },
+    ];
+
+    let i = arr.length - 1;
+    while (i > 0) {
+      const p = parentIndex(i);
+      frames.push({
+        heap: [...arr],
+        operation: "Heapify Up",
+        explanation: "Checking if child violates heap property with its parent.",
+        comparison: `Comparing ${arr[i]} with parent ${arr[p]}`,
+        activeIndices: [i, p],
+      });
+
+      if (!compare(arr[i], arr[p])) break;
+
+      frames.push({
+        heap: [...arr],
+        operation: "Heapify Up",
+        explanation: `Swapping nodes to maintain ${heapType === "min" ? "Min" : "Max"} Heap property.`,
+        comparison: `Swapping ${arr[i]} and ${arr[p]}`,
+        swappingIndices: [i, p],
+        activeIndices: [i, p],
+      });
+
+      [arr[i], arr[p]] = [arr[p], arr[i]];
+
+      frames.push({
+        heap: [...arr],
+        operation: "Heapify Up",
+        explanation: "Node moved up one level.",
+        activeIndices: [p],
+      });
+
+      i = p;
+    }
+
+    frames.push({
+      heap: [...arr],
+      operation: "Insert Complete",
+      explanation: `${parsed} inserted and heap property is satisfied.`,
+    });
+
+    await playFrames(frames);
+    setInputValue("");
+  };
+
+  const extractRoot = async () => {
+    if (isAnimating) return;
+    if (heap.length === 0) {
+      setExplanation("Heap is empty. Nothing to extract.");
+      return;
+    }
+
+    const arr = [...heap];
+    const rootLabel = heapType === "min" ? "Min" : "Max";
+    const rootValue = arr[0];
+    const frames = [
+      {
+        heap: [...arr],
+        operation: `Extract ${rootLabel}`,
+        explanation: `Removing root value ${rootValue}.`,
+        activeIndices: [0],
+      },
+    ];
+
+    if (arr.length === 1) {
+      frames.push({
+        heap: [],
+        operation: `Extract ${rootLabel} Complete`,
+        explanation: `Extracted ${rootValue}. Heap is now empty.`,
+      });
+      await playFrames(frames);
+      return;
+    }
+
+    const last = arr[arr.length - 1];
+    arr[0] = last;
+    arr.pop();
+
+    frames.push({
+      heap: [...arr],
+      operation: "Replace Root",
+      explanation: `Replaced root with last node ${last}. Heapify Down begins.`,
+      activeIndices: [0],
+    });
+
+    let i = 0;
+    while (true) {
+      let target = i;
+      const l = leftChild(i);
+      const r = rightChild(i);
+
+      if (l < arr.length) {
+        frames.push({
+          heap: [...arr],
+          operation: "Heapify Down",
+          explanation: "Comparing root candidate with children.",
+          comparison: `Comparing ${arr[target]} with left child ${arr[l]}`,
+          activeIndices: [target, l],
+        });
+        if (compare(arr[l], arr[target])) target = l;
+      }
+
+      if (r < arr.length) {
+        frames.push({
+          heap: [...arr],
+          operation: "Heapify Down",
+          explanation: "Choosing best child according to heap type.",
+          comparison: `Comparing ${arr[target]} with right child ${arr[r]}`,
+          activeIndices: [target, r],
+        });
+        if (compare(arr[r], arr[target])) target = r;
+      }
+
+      if (target === i) break;
+
+      frames.push({
+        heap: [...arr],
+        operation: "Heapify Down",
+        explanation: "Swapping to restore heap property.",
+        comparison: `Swapping ${arr[i]} and ${arr[target]}`,
+        swappingIndices: [i, target],
+        activeIndices: [i, target],
+      });
+
+      [arr[i], arr[target]] = [arr[target], arr[i]];
+
+      frames.push({
+        heap: [...arr],
+        operation: "Heapify Down",
+        explanation: "Continuing down toward leaves.",
+        activeIndices: [target],
+      });
+
+      i = target;
+    }
+
+    frames.push({
+      heap: [...arr],
+      operation: `Extract ${rootLabel} Complete`,
+      explanation: `Extracted ${rootValue}. Final heap structure restored.`,
+    });
+
+    await playFrames(frames);
+  };
+
+  const peekRoot = async () => {
+    if (isAnimating) return;
+    if (heap.length === 0) {
+      setExplanation("Heap is empty. No root to peek.");
+      return;
+    }
+
+    await playFrames([
+      {
+        heap: [...heap],
+        operation: "Peek",
+        explanation: `Root value is ${heap[0]}.`,
+        comparison: `${heapType === "min" ? "Min" : "Max"} element always stays at root.`,
+        activeIndices: [0],
+      },
+    ]);
+  };
+
+  const manualHeapify = async () => {
+    if (isAnimating) return;
+    await playFrames(buildHeapFrames(heap, heapType));
+  };
+
+  const onHeapTypeChange = async (type) => {
+    if (type === heapType || isAnimating) return;
+    setHeapType(type);
+    await playFrames(buildHeapFrames(heap, type));
+  };
+
+  const reset = async () => {
+    if (isAnimating) return;
+    setHeapType("min");
+    await playFrames(buildHeapFrames(INITIAL_HEAP, "min"));
+  };
+
+  const nodes = useMemo(() => {
+    const levelHeight = 110;
+    return heap.map((value, index) => {
+      const level = Math.floor(Math.log2(index + 1));
+      const levelStart = (1 << level) - 1;
+      const positionInLevel = index - levelStart;
+      const nodesInLevel = 1 << level;
+      const x = ((positionInLevel + 1) * 1000) / (nodesInLevel + 1);
+      const y = 70 + level * levelHeight;
+      return { index, value, x, y };
+    });
+  }, [heap]);
+
+  const treeHeight = useMemo(() => {
+    const levels = Math.max(1, Math.ceil(Math.log2(heap.length + 1)));
+    return 80 + levels * 110;
+  }, [heap.length]);
+
+  return (
+    <VisualizerInteractiveLayout>
+      <VisualizerCard>
+        <div className="flex flex-wrap items-end gap-3 justify-between">
+          <div className="flex flex-wrap gap-2">
+            <button
+              onClick={() => onHeapTypeChange("min")}
+              disabled={isAnimating}
+              className={`px-4 py-2 rounded-xl text-sm font-semibold transition-all border ${
+                heapType === "min"
+                  ? "bg-[#a435f0] text-white border-[#a435f0]"
+                  : "bg-white text-[#6b7280] border-[#d1d5db] dark:bg-[#111] dark:text-[#d1d5db] dark:border-[#333]"
+              }`}
+            >
+              Min Heap
+            </button>
+            <button
+              onClick={() => onHeapTypeChange("max")}
+              disabled={isAnimating}
+              className={`px-4 py-2 rounded-xl text-sm font-semibold transition-all border ${
+                heapType === "max"
+                  ? "bg-[#a435f0] text-white border-[#a435f0]"
+                  : "bg-white text-[#6b7280] border-[#d1d5db] dark:bg-[#111] dark:text-[#d1d5db] dark:border-[#333]"
+              }`}
+            >
+              Max Heap
+            </button>
+          </div>
+
+          <div className="flex flex-wrap gap-2 items-center">
+            <input
+              type="number"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              placeholder="Enter value"
+              disabled={isAnimating}
+              className="w-36 rounded-xl border border-[#d1d5db] dark:border-[#333] bg-white dark:bg-[#111] px-3 py-2 text-sm"
+            />
+            <button onClick={insertValue} disabled={isAnimating} className="px-3 py-2 rounded-xl bg-[#a435f0] text-white text-sm font-semibold inline-flex items-center gap-2">
+              <ArrowDownToLine className="w-4 h-4" /> Insert
+            </button>
+            <button onClick={extractRoot} disabled={isAnimating} className="px-3 py-2 rounded-xl bg-[#7e22ce] text-white text-sm font-semibold inline-flex items-center gap-2">
+              <ArrowUpToLine className="w-4 h-4" /> {heapType === "min" ? "Extract Min" : "Extract Max"}
+            </button>
+            <button onClick={peekRoot} disabled={isAnimating} className="px-3 py-2 rounded-xl bg-[#9333ea] text-white text-sm font-semibold inline-flex items-center gap-2">
+              <Eye className="w-4 h-4" /> Peek
+            </button>
+            <button onClick={manualHeapify} disabled={isAnimating} className="px-3 py-2 rounded-xl bg-[#6d28d9] text-white text-sm font-semibold inline-flex items-center gap-2">
+              <Layers className="w-4 h-4" /> Heapify
+            </button>
+            <button onClick={reset} disabled={isAnimating} className="px-3 py-2 rounded-xl border border-[#a435f0]/40 text-[#7e22ce] dark:text-[#d8b4fe] text-sm font-semibold inline-flex items-center gap-2">
+              <Repeat className="w-4 h-4" /> Reset
+            </button>
+          </div>
+        </div>
+      </VisualizerCard>
+
+      <VisualizerCard className="border-[#a435f0]/20 bg-[#a435f0]/5 dark:bg-[#a435f0]/10">
+        <div className="flex items-center justify-between text-xs text-[#6b7280] dark:text-[#c4b5fd] mb-1">
+          <span className="inline-flex items-center gap-1 font-semibold"><Sparkles className="w-4 h-4 text-[#a435f0]" /> Current Operation</span>
+          <span>{isAnimating ? "Animating" : "Idle"}</span>
+        </div>
+        <p className="text-lg font-semibold text-[#3b0764] dark:text-[#f5d0fe]">{operation}</p>
+        <p className="text-sm text-[#5b21b6] dark:text-[#ddd6fe] mt-1">{explanation}</p>
+        <p className="text-sm text-[#6b7280] dark:text-[#c4b5fd] mt-1 min-h-[20px]">{comparisonText}</p>
+      </VisualizerCard>
+
+      <VisualizerCard>
+        <p className="text-sm font-semibold mb-3 text-[#6b21a8] dark:text-[#d8b4fe]">Tree Representation ({heapType === "min" ? "Min Heap" : "Max Heap"})</p>
+        <div className="overflow-x-auto rounded-xl border border-[#ede9fe] dark:border-[#312e81] bg-[#faf5ff] dark:bg-[#0f0a1f]">
+          <svg viewBox={`0 0 1000 ${treeHeight}`} className="w-full h-auto min-w-[640px]">
+            {nodes.map((node) => {
+              const l = leftChild(node.index);
+              const r = rightChild(node.index);
+              return (
+                <g key={`edge-${node.index}`}>
+                  {l < nodes.length && (
+                    <line
+                      x1={node.x}
+                      y1={node.y + 25}
+                      x2={nodes[l].x}
+                      y2={nodes[l].y - 25}
+                      className="stroke-violet-500 dark:stroke-violet-400"
+                      strokeOpacity="0.45"
+                      strokeWidth="2"
+                    />
+                  )}
+                  {r < nodes.length && (
+                    <line
+                      x1={node.x}
+                      y1={node.y + 25}
+                      x2={nodes[r].x}
+                      y2={nodes[r].y - 25}
+                      className="stroke-violet-500 dark:stroke-violet-400"
+                      strokeOpacity="0.45"
+                      strokeWidth="2"
+                    />
+                  )}
+                </g>
+              );
+            })}
+
+            {nodes.map((node) => {
+              const isSwap = swappingIndices.includes(node.index);
+              const isActive = activeIndices.includes(node.index);
+              return (
+                <g key={`node-${node.index}`}>
+                  <circle
+                    cx={node.x}
+                    cy={node.y}
+                    r="28"
+                    fill={isSwap ? "#c026d3" : isActive ? "#a855f7" : "#ffffff"}
+                    stroke={isSwap ? "#f5d0fe" : isActive ? "#e9d5ff" : "#a78bfa"}
+                    strokeWidth="3"
+                    className="transition-all duration-500"
+                  />
+                  <text x={node.x} y={node.y + 5} textAnchor="middle" fill={isActive || isSwap ? "#fff" : "#4c1d95"} fontSize="15" fontWeight="700">
+                    {node.value}
+                  </text>
+                  <text x={node.x} y={node.y + 42} textAnchor="middle" className="fill-violet-600 dark:fill-violet-500" fontSize="11" fontWeight="600">
+                    idx {node.index}
+                  </text>
+                </g>
+              );
+            })}
+          </svg>
+        </div>
+      </VisualizerCard>
+
+      <VisualizerCard>
+        <p className="text-sm font-semibold mb-3 text-[#6b21a8] dark:text-[#d8b4fe]">Array Representation (Synced)</p>
+        <div className="flex flex-wrap gap-2">
+          {heap.map((value, index) => {
+            const isSwap = swappingIndices.includes(index);
+            const isActive = activeIndices.includes(index);
+            return (
+              <div key={`arr-${index}`} className={`w-16 h-16 rounded-xl border-2 flex flex-col items-center justify-center transition-all duration-500 ${
+                isSwap
+                  ? "bg-fuchsia-600 border-fuchsia-300 text-white scale-105"
+                  : isActive
+                    ? "bg-purple-500 border-purple-200 text-white scale-105"
+                    : "bg-white dark:bg-[#111] border-purple-200 dark:border-purple-900 text-[#5b21b6] dark:text-[#ddd6fe]"
+              }`}>
+                <span className="text-base font-bold">{value}</span>
+                <span className="text-[10px] opacity-80">[{index}]</span>
+              </div>
+            );
+          })}
+          {heap.length === 0 && (
+            <div className="text-sm text-[#6b7280] dark:text-[#9ca3af]">Heap is empty.</div>
+          )}
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+}
diff --git a/src/app/visualizer/tree/applications/heap/codeBlock.jsx b/src/app/visualizer/tree/applications/heap/codeBlock.jsx
new file mode 100644
index 000000000..165a58f1d
--- /dev/null
+++ b/src/app/visualizer/tree/applications/heap/codeBlock.jsx
@@ -0,0 +1,188 @@
+"use client";
+
+import SharedCodeBlock from "@/app/components/ui/SharedCodeBlock";
+
+export default function HeapCodeBlock() {
+  const codeExamples = {
+    javascript: `class Heap {
+  constructor(type = "min") {
+    this.heap = [];
+    this.type = type;
+  }
+
+  compare(a, b) {
+    return this.type === "min" ? a < b : a > b;
+  }
+
+  insert(value) {
+    this.heap.push(value);
+    this.heapifyUp(this.heap.length - 1);
+  }
+
+  extractRoot() {
+    if (this.heap.length === 0) return null;
+    if (this.heap.length === 1) return this.heap.pop();
+
+    const root = this.heap[0];
+    this.heap[0] = this.heap.pop();
+    this.heapifyDown(0);
+    return root;
+  }
+
+  peek() {
+    return this.heap.length ? this.heap[0] : null;
+  }
+
+  heapifyUp(i) {
+    while (i > 0) {
+      const p = Math.floor((i - 1) / 2);
+      if (!this.compare(this.heap[i], this.heap[p])) break;
+      [this.heap[i], this.heap[p]] = [this.heap[p], this.heap[i]];
+      i = p;
+    }
+  }
+
+  heapifyDown(i) {
+    const n = this.heap.length;
+    while (true) {
+      let target = i;
+      const l = 2 * i + 1;
+      const r = 2 * i + 2;
+
+      if (l < n && this.compare(this.heap[l], this.heap[target])) target = l;
+      if (r < n && this.compare(this.heap[r], this.heap[target])) target = r;
+      if (target === i) break;
+
+      [this.heap[i], this.heap[target]] = [this.heap[target], this.heap[i]];
+      i = target;
+    }
+  }
+}`,
+    python: `class Heap:
+    def __init__(self, heap_type="min"):
+        self.heap = []
+        self.heap_type = heap_type
+
+    def compare(self, a, b):
+        return a < b if self.heap_type == "min" else a > b
+
+    def insert(self, value):
+        self.heap.append(value)
+        self.heapify_up(len(self.heap) - 1)
+
+    def extract_root(self):
+        if not self.heap:
+            return None
+        if len(self.heap) == 1:
+            return self.heap.pop()
+
+        root = self.heap[0]
+        self.heap[0] = self.heap.pop()
+        self.heapify_down(0)
+        return root
+
+    def peek(self):
+        return self.heap[0] if self.heap else None
+
+    def heapify_up(self, i):
+        while i > 0:
+            p = (i - 1) // 2
+            if not self.compare(self.heap[i], self.heap[p]):
+                break
+            self.heap[i], self.heap[p] = self.heap[p], self.heap[i]
+            i = p
+
+    def heapify_down(self, i):
+        n = len(self.heap)
+        while True:
+            target = i
+            l = 2 * i + 1
+            r = 2 * i + 2
+
+            if l < n and self.compare(self.heap[l], self.heap[target]):
+                target = l
+            if r < n and self.compare(self.heap[r], self.heap[target]):
+                target = r
+            if target == i:
+                break
+
+            self.heap[i], self.heap[target] = self.heap[target], self.heap[i]
+            i = target`,
+    java: `class Heap {
+    private List<Integer> heap = new ArrayList<>();
+    private String type;
+
+    public Heap(String type) {
+        this.type = type; // "min" or "max"
+    }
+
+    private boolean compare(int a, int b) {
+        return type.equals("min") ? a < b : a > b;
+    }
+
+    public void insert(int value) {
+        heap.add(value);
+        heapifyUp(heap.size() - 1);
+    }
+
+    public Integer extractRoot() {
+        if (heap.isEmpty()) return null;
+        if (heap.size() == 1) return heap.remove(0);
+
+        int root = heap.get(0);
+        heap.set(0, heap.remove(heap.size() - 1));
+        heapifyDown(0);
+        return root;
+    }
+}`,
+    cpp: `class Heap {
+  vector<int> heap;
+  bool isMin;
+
+  bool compare(int a, int b) {
+    return isMin ? a < b : a > b;
+  }
+
+public:
+  Heap(bool minHeap = true) : isMin(minHeap) {}
+
+  void insert(int value) {
+    heap.push_back(value);
+    heapifyUp(heap.size() - 1);
+  }
+
+  int extractRoot() {
+    if (heap.empty()) return -1;
+    int root = heap[0];
+    heap[0] = heap.back();
+    heap.pop_back();
+    heapifyDown(0);
+    return root;
+  }
+
+  void heapifyUp(int i) {
+    while (i > 0) {
+      int p = (i - 1) / 2;
+      if (!compare(heap[i], heap[p])) break;
+      swap(heap[i], heap[p]);
+      i = p;
+    }
+  }
+
+  void heapifyDown(int i) {
+    int n = heap.size();
+    while (true) {
+      int target = i;
+      int l = 2 * i + 1, r = 2 * i + 2;
+      if (l < n && compare(heap[l], heap[target])) target = l;
+      if (r < n && compare(heap[r], heap[target])) target = r;
+      if (target == i) break;
+      swap(heap[i], heap[target]);
+      i = target;
+    }
+  }
+};`,
+  };
+
+  return <SharedCodeBlock title="Min Heap & Max Heap Operations" codeExamples={codeExamples} color="text-purple-500" />;
+}
diff --git a/src/app/visualizer/tree/applications/heap/content.jsx b/src/app/visualizer/tree/applications/heap/content.jsx
new file mode 100644
index 000000000..699a264fe
--- /dev/null
+++ b/src/app/visualizer/tree/applications/heap/content.jsx
@@ -0,0 +1,87 @@
+"use client";
+
+import ComplexityGraph from "@/app/components/ui/graph";
+import { Lightbulb, ArrowDownToLine, ArrowUpToLine, Eye, Layers } from "lucide-react";
+
+export default function HeapContent() {
+  return (
+    <main className="max-w-4xl mx-auto mt-8 mb-8">
+      <article className="bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden shadow-lg shadow-purple-500/5">
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            What is a Heap?
+          </h2>
+          <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+            A heap is a complete binary tree stored in an array. In a Min Heap, every parent is smaller than its children.
+            In a Max Heap, every parent is larger than its children. This visualizer helps you track heap operations step by step
+            through both tree and array views.
+          </p>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e] bg-purple-50/30 dark:bg-purple-900/5">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            Core Operations
+          </h2>
+          <div className="grid sm:grid-cols-2 gap-4">
+            <div className="rounded-xl border border-purple-200 dark:border-purple-900 p-4 bg-white dark:bg-[#161025]">
+              <p className="font-semibold text-purple-800 dark:text-purple-300 inline-flex items-center gap-2"><ArrowDownToLine className="w-4 h-4" /> Insert</p>
+              <p className="text-sm mt-1 text-[#6b7280] dark:text-[#cbd5e1]">Insert at the last position, then Heapify Up with parent-child comparisons and swaps.</p>
+            </div>
+            <div className="rounded-xl border border-purple-200 dark:border-purple-900 p-4 bg-white dark:bg-[#161025]">
+              <p className="font-semibold text-purple-800 dark:text-purple-300 inline-flex items-center gap-2"><ArrowUpToLine className="w-4 h-4" /> Extract Root</p>
+              <p className="text-sm mt-1 text-[#6b7280] dark:text-[#cbd5e1]">Remove root, place last node at root, then Heapify Down to restore order.</p>
+            </div>
+            <div className="rounded-xl border border-purple-200 dark:border-purple-900 p-4 bg-white dark:bg-[#161025]">
+              <p className="font-semibold text-purple-800 dark:text-purple-300 inline-flex items-center gap-2"><Eye className="w-4 h-4" /> Peek</p>
+              <p className="text-sm mt-1 text-[#6b7280] dark:text-[#cbd5e1]">Read the root instantly: min for Min Heap, max for Max Heap.</p>
+            </div>
+            <div className="rounded-xl border border-purple-200 dark:border-purple-900 p-4 bg-white dark:bg-[#161025]">
+              <p className="font-semibold text-purple-800 dark:text-purple-300 inline-flex items-center gap-2"><Layers className="w-4 h-4" /> Heapify</p>
+              <p className="text-sm mt-1 text-[#6b7280] dark:text-[#cbd5e1]">Rebuild heap property manually by checking internal nodes from bottom to top.</p>
+            </div>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            Time Complexity
+          </h2>
+          <div className="flex flex-wrap gap-4 mb-4">
+            <span className="px-3 py-1 rounded-lg text-sm bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800">Insert: O(log N)</span>
+            <span className="px-3 py-1 rounded-lg text-sm bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800">Extract Root: O(log N)</span>
+            <span className="px-3 py-1 rounded-lg text-sm bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800">Peek: O(1)</span>
+            <span className="px-3 py-1 rounded-lg text-sm bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800">Heapify (full): O(N)</span>
+          </div>
+          <div className="mt-4 bg-gray-50 dark:bg-neutral-900 rounded-xl p-4 border border-gray-200 dark:border-gray-800 shadow-inner">
+            <ComplexityGraph
+              bestCase={(n) => Math.log2(n)}
+              averageCase={(n) => Math.log2(n)}
+              worstCase={(n) => Math.log2(n)}
+              maxN={64}
+              title="Insert/Extract Complexity: O(log N)"
+            />
+          </div>
+        </section>
+
+        <section className="p-6 bg-gradient-to-r from-purple-50 to-white dark:from-purple-950/20 dark:to-neutral-950">
+          <div className="flex items-start gap-4">
+            <div className="mt-1 bg-purple-100 dark:bg-purple-900/50 p-2.5 rounded-xl shadow-sm text-purple-600 dark:text-purple-400">
+              <Lightbulb className="w-6 h-6" />
+            </div>
+            <div>
+              <h3 className="text-xl font-bold text-purple-900 dark:text-purple-300 mb-2">Learning Focus</h3>
+              <ul className="list-disc pl-5 space-y-1 text-sm text-purple-800 dark:text-purple-200/80">
+                <li>How array indices map directly to parent-child tree links.</li>
+                <li>Why local swaps are enough to restore global heap property.</li>
+                <li>How Min Heap and Max Heap differ only in comparison direction.</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+}
diff --git a/src/app/visualizer/tree/applications/heap/quiz.jsx b/src/app/visualizer/tree/applications/heap/quiz.jsx
new file mode 100644
index 000000000..b59accee2
--- /dev/null
+++ b/src/app/visualizer/tree/applications/heap/quiz.jsx
@@ -0,0 +1,28 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+export default function HeapQuiz() {
+  const questions = [
+    {
+      question: "In a Min Heap, where is the smallest element located?",
+      options: ["Any leaf node", "Root node", "Last array index", "Middle level"],
+      correctAnswer: 1,
+      explanation: "Min Heap keeps the minimum value at index 0 (the root).",
+    },
+    {
+      question: "After extracting root from a heap, what is the first correction step?",
+      options: ["Run BFS", "Insert a random value", "Place last node at root", "Reverse array"],
+      correctAnswer: 2,
+      explanation: "Heap extraction replaces root with last node before heapify down.",
+    },
+    {
+      question: "What is the time complexity of insert in a binary heap?",
+      options: ["O(1)", "O(log N)", "O(N)", "O(N log N)"],
+      correctAnswer: 1,
+      explanation: "Insert may travel up the tree height, which is log N.",
+    },
+  ];
+
+  return <QuizEngine title="Heap Operations Quiz" questions={questions} />;
+}
diff --git a/src/app/visualizer/tree/applications/heapsort/AlgorithmClient.jsx b/src/app/visualizer/tree/applications/heapsort/AlgorithmClient.jsx
new file mode 100644
index 000000000..edfd676b0
--- /dev/null
+++ b/src/app/visualizer/tree/applications/heapsort/AlgorithmClient.jsx
@@ -0,0 +1,43 @@
+import Animation from "./animation";
+import Content from "./content";
+import CodeBlock from "./codeBlock";
+import Quiz from "./quiz";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+
+
+export default function HeapSortPage() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Applications", "Heap Sort")}
+      title="Heap Sort"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      quiz={<Quiz />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.heapSort}
+          description="Mark Heap Sort as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other Tree Applications"
+          links={[
+            { text: "Huffman Coding", description: "Data compression using Huffman Trees.", url: "./huffman" },
+            { text: "Decision Trees", description: "Machine learning decision-making workflows.", url: "./decision-trees" },
+            { text: "Syntax Trees", description: "Abstract Syntax Trees in compilers.", url: "./syntax-trees" },
+          ]}
+          columns="3"
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/applications/heapsort/animation.jsx b/src/app/visualizer/tree/applications/heapsort/animation.jsx
new file mode 100644
index 000000000..aa266fa30
--- /dev/null
+++ b/src/app/visualizer/tree/applications/heapsort/animation.jsx
@@ -0,0 +1,322 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import { Play, RotateCcw, Info, RefreshCw } from "lucide-react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import usePlayback from "@/app/hooks/usePlayback";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+
+const INITIAL_ARRAY = [7, 1, 8, 5, 2];
+
+export default function HeapSortAnimation() {
+  const [animating, setAnimating] = useState(false);
+  const [message, setMessage] = useState("Click 'Start Sort' to visualize Heap Sort.");
+  
+  const [steps, setSteps] = useState([]);
+  const [currentStepIdx, setCurrentStepIdx] = useState(-1);
+  const { speed, setSpeed } = usePlayback(1);
+  const timerRef = useRef(null);
+  useVisualizerReset(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setAnimating(false);
+    setMessage("...");
+    setSteps([]);
+    setCurrentStepIdx(-1);
+  });
+
+  const currentStep = steps[currentStepIdx] || null;
+  const array = currentStep ? currentStep.array : [...INITIAL_ARRAY];
+  const activeIndices = currentStep ? currentStep.activeIndices : [];
+  const sortedIndices = currentStep ? currentStep.sortedIndices : [];
+  const heapSize = currentStep ? currentStep.heapSize : INITIAL_ARRAY.length;
+
+
+  useEffect(() => {
+    if (currentStep) {
+      setMessage(currentStep.message);
+    }
+  }, [currentStep]);
+
+  useEffect(() => {
+    if (!animating || steps.length === 0) return;
+    if (currentStepIdx >= steps.length - 1) { setAnimating(false); return; }
+    timerRef.current = setTimeout(() => setCurrentStepIdx(p => p + 1), 1600 / speed);
+    return () => { if (timerRef.current) clearTimeout(timerRef.current); };
+  }, [animating, currentStepIdx, steps, speed]);
+
+  const pauseVisualizer = () => { setAnimating(false); if (timerRef.current) clearTimeout(timerRef.current); };
+  const startVisualizer = () => {
+    if (steps.length === 0) return;
+    setAnimating(true);
+    const nextIdx = currentStepIdx === -1 || currentStepIdx >= steps.length - 1 ? 0 : currentStepIdx + 1;
+    setCurrentStepIdx(nextIdx);
+  };
+  const stepForward = () => { setAnimating(false); if (currentStepIdx < steps.length - 1) setCurrentStepIdx(p => p + 1); };
+  const stepBackward = () => { setAnimating(false); if (currentStepIdx > 0) setCurrentStepIdx(p => p - 1); };
+  const resetPlayback = () => {
+    setAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setCurrentStepIdx(-1);
+    setMessage("Playback reset.");
+  };
+
+  const startHeapSort = () => {
+    setAnimating(false);
+    const newSteps = [];
+    
+    const pushStep = (msg, arr, active, sorted, hs) => {
+      newSteps.push({
+        message: msg,
+        array: [...arr],
+        activeIndices: [...active],
+        sortedIndices: [...sorted],
+        heapSize: hs,
+      });
+    };
+
+    const heapify = (arr, n, i, sorted, hs) => {
+      let largest = i;
+      const left = 2 * i + 1;
+      const right = 2 * i + 2;
+
+      pushStep(`Checking node ${arr[i]} at index ${i}`, arr, [i], sorted, hs);
+
+      if (left < n) {
+        pushStep(`Comparing ${arr[largest]} with left child ${arr[left]}`, arr, [i, left], sorted, hs);
+        if (arr[left] > arr[largest]) {
+          largest = left;
+        }
+      }
+
+      if (right < n) {
+        pushStep(`Comparing ${arr[largest]} with right child ${arr[right]}`, arr, [largest, right], sorted, hs);
+        if (arr[right] > arr[largest]) {
+          largest = right;
+        }
+      }
+
+      if (largest !== i) {
+        pushStep(`Swapping ${arr[i]} and ${arr[largest]}`, arr, [i, largest], sorted, hs);
+        
+        const temp = arr[i];
+        arr[i] = arr[largest];
+        arr[largest] = temp;
+        
+        pushStep(`Swapped`, arr, [i, largest], sorted, hs);
+        heapify(arr, n, largest, sorted, hs);
+      }
+    };
+
+    let arr = [...INITIAL_ARRAY];
+    let n = arr.length;
+    let sorted = [];
+
+    pushStep("Phase 1: Build Max-Heap", arr, [], [], n);
+
+    for (let i = Math.floor(n / 2) - 1; i >= 0; i--) {
+      heapify(arr, n, i, sorted, n);
+    }
+
+    pushStep("Max-Heap built successfully!", arr, [], [], n);
+    pushStep("Phase 2: Extract max and shrink heap", arr, [], [], n);
+
+    for (let i = n - 1; i > 0; i--) {
+      pushStep(`Swapping root (Max: ${arr[0]}) with last heap element ${arr[i]}`, arr, [0, i], sorted, i + 1);
+
+      const temp = arr[0];
+      arr[0] = arr[i];
+      arr[i] = temp;
+
+      sorted.push(i);
+      pushStep(`Element ${arr[i]} is now in its sorted position.`, arr, [], sorted, i);
+
+      heapify(arr, i, 0, sorted, i);
+    }
+    
+    sorted.push(0);
+    pushStep("Heap Sort complete!", arr, [], sorted, 0);
+
+    setSteps(newSteps);
+    setCurrentStepIdx(0);
+    setAnimating(true);
+  };
+
+  const handleReset = () => {
+    setAnimating(false);
+    setSteps([]);
+    setCurrentStepIdx(-1);
+    setMessage("Click 'Start Sort' to visualize Heap Sort.");
+  };
+
+  useVisualizerKeyboard({
+    onStepForward: stepForward,
+    onStepBackward: stepBackward,
+    onTogglePlay: animating ? pauseVisualizer : startVisualizer,
+    onReset: resetPlayback,
+    onSpeedChange: setSpeed,
+    speed: speed,
+    sorting: animating,
+    sorted: false,
+    enabled: true,
+  });
+
+  // SVG Helper
+  const getNodeColor = (index) => {
+    if (sortedIndices.includes(index)) return "var(--background)";
+    if (activeIndices.includes(index)) return "#a435f0";
+    if (index >= heapSize) return "var(--background)";
+    return "var(--background)";
+  };
+  
+  const getStrokeColor = (index) => {
+    if (sortedIndices.includes(index)) return "#fbbf24"; // yellow/amber for sorted
+    if (activeIndices.includes(index)) return "#d38cff";
+    return "#64748b";
+  };
+  
+  const getTextColor = (index) => {
+    if (activeIndices.includes(index)) return "#ffffff";
+    if (sortedIndices.includes(index)) return "#b45309";
+    return "var(--foreground)";
+  };
+
+  // Node positions for a tree of size 5
+  const positions = [
+    { x: 400, y: 50 },
+    { x: 250, y: 140 },
+    { x: 550, y: 140 },
+    { x: 150, y: 230 },
+    { x: 350, y: 230 }
+  ];
+
+  return (
+    <VisualizerInteractiveLayout>
+      <VisualizerCard>
+        <div className="flex justify-between items-center mb-6">
+          <div className="text-sm font-bold text-gray-700 dark:text-gray-300">Array: [{INITIAL_ARRAY.join(", ")}]</div>
+          <div className="flex items-center gap-3">
+            <button 
+              onClick={startHeapSort} 
+              disabled={animating}
+              className="flex items-center gap-2 px-6 py-2.5 text-sm font-bold bg-[#a435f0] hover:bg-[#8f2cd6] disabled:opacity-50 text-white rounded-xl transition-all shadow-md"
+            >
+              <Play className="w-4 h-4" /> Start Sort
+            </button>
+            <button 
+              onClick={handleReset} 
+              className="px-4 py-2.5 text-sm font-bold text-red-500 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-xl transition-all border border-red-500/30 flex items-center gap-2"
+            >
+              <RefreshCw className="w-4 h-4" /> Reset
+            </button>
+          </div>
+        </div>
+
+        <PlaybackControls 
+          isPlaying={animating}
+          onPlayPause={animating ? pauseVisualizer : startVisualizer}
+          onStepForward={stepForward}
+          onStepBackward={stepBackward}
+          onReset={resetPlayback}
+          speed={speed}
+          onSpeedChange={setSpeed}
+          disabled={steps.length === 0}
+          showPlayPause={true}
+        />
+      </VisualizerCard>
+
+      <VisualizerCard
+        className={
+          message.includes("complete") || message.includes("successfully")
+            ? "border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30"
+            : animating
+                ? "border-[#a435f0]/30 bg-[#a435f0]/10 dark:border-[#a435f0]/50 dark:bg-[#a435f0]/20"
+                : ""
+        }
+      >
+        <div className="flex items-center text-xs text-gray-500 font-semibold gap-1.5 mb-2">
+          <Info className="w-4 h-4 text-[#a435f0]" /> Animation Status
+          <span className="ml-auto font-bold bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-gray-600 dark:text-gray-400">
+            Step {currentStepIdx !== -1 ? currentStepIdx + 1 : 0} / {steps.length || 0}
+          </span>
+        </div>
+        <div className="text-lg font-medium min-h-[28px]">{message}</div>
+      </VisualizerCard>
+
+      <VisualizerCard>
+        <div className="flex justify-center gap-2 mb-8">
+          {array.map((val, idx) => (
+            <div 
+              key={idx} 
+              className={`w-12 h-12 flex items-center justify-center font-bold text-lg rounded-lg border-2 ${
+                sortedIndices.includes(idx) ? "bg-amber-100 border-amber-400 text-amber-700 dark:bg-amber-900/30 dark:border-amber-700 dark:text-amber-400" :
+                activeIndices.includes(idx) ? "bg-[#a435f0] border-[#d38cff] text-white scale-110 shadow-lg shadow-[#a435f0]/30" :
+                "bg-white border-gray-300 text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300"
+              } transition-all duration-300`}
+            >
+              {val}
+            </div>
+          ))}
+        </div>
+
+        <div className="overflow-auto flex justify-center py-6 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 relative min-h-[350px]">
+          <svg width="800" height="300" viewBox="0 0 800 300" className="max-w-full h-auto drop-shadow-sm">
+            {/* Edges */}
+            {array.map((_, i) => {
+              const left = 2 * i + 1;
+              const right = 2 * i + 2;
+              const edges = [];
+              if (left < array.length) {
+                edges.push(
+                  <line 
+                    key={`${i}-${left}`}
+                    x1={positions[i].x} y1={positions[i].y + 20}
+                    x2={positions[left].x} y2={positions[left].y - 20}
+                    stroke={(sortedIndices.includes(left) || sortedIndices.includes(i)) ? "#cbd5e1" : "currentColor"}
+                    strokeWidth="2"
+                    className={`transition-all duration-500 ${(sortedIndices.includes(left) || sortedIndices.includes(i)) ? 'dark:stroke-gray-800' : 'stroke-gray-400 dark:stroke-gray-600'}`}
+                  />
+                );
+              }
+              if (right < array.length) {
+                edges.push(
+                  <line 
+                    key={`${i}-${right}`}
+                    x1={positions[i].x} y1={positions[i].y + 20}
+                    x2={positions[right].x} y2={positions[right].y - 20}
+                    stroke={(sortedIndices.includes(right) || sortedIndices.includes(i)) ? "#cbd5e1" : "currentColor"}
+                    strokeWidth="2"
+                    className={`transition-all duration-500 ${(sortedIndices.includes(right) || sortedIndices.includes(i)) ? 'dark:stroke-gray-800' : 'stroke-gray-400 dark:stroke-gray-600'}`}
+                  />
+                );
+              }
+              return edges;
+            })}
+
+            {/* Nodes */}
+            {array.map((val, i) => {
+              const isSorted = sortedIndices.includes(i);
+              return (
+                <g key={i} className={`transition-all duration-500 ${isSorted ? "opacity-60" : ""}`}>
+                  {activeIndices.includes(i) && <circle cx={positions[i].x} cy={positions[i].y} r="32" fill="none" className="stroke-purple-300 dark:stroke-purple-400" strokeWidth="2" strokeDasharray="4,2" className="animate-spin-slow opacity-80" />}
+                  <circle 
+                    cx={positions[i].x} cy={positions[i].y} r="24" 
+                    fill={getNodeColor(i)} 
+                    stroke={getStrokeColor(i)} 
+                    strokeWidth="2.5" 
+                    className="shadow-sm transition-all duration-500" 
+                  />
+                  <text x={positions[i].x} y={positions[i].y + 5} textAnchor="middle" fill={getTextColor(i)} fontSize="14" fontWeight="bold">{val}</text>
+                  <text x={positions[i].x + 35} y={positions[i].y + 5} className="fill-gray-500 dark:fill-gray-400" fontSize="12">[{i}]</text>
+                </g>
+              );
+            })}
+          </svg>
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+}
diff --git a/src/app/visualizer/tree/applications/heapsort/codeBlock.jsx b/src/app/visualizer/tree/applications/heapsort/codeBlock.jsx
new file mode 100644
index 000000000..490a458e8
--- /dev/null
+++ b/src/app/visualizer/tree/applications/heapsort/codeBlock.jsx
@@ -0,0 +1,122 @@
+"use client";
+import SharedCodeBlock from "@/app/components/ui/SharedCodeBlock";
+
+export default function HeapSortCodeBlock() {
+  const codeExamples = {
+    javascript: `function heapify(arr, n, i) {
+  let largest = i;
+  let left = 2 * i + 1;
+  let right = 2 * i + 2;
+
+  if (left < n && arr[left] > arr[largest]) {
+    largest = left;
+  }
+
+  if (right < n && arr[right] > arr[largest]) {
+    largest = right;
+  }
+
+  if (largest !== i) {
+    [arr[i], arr[largest]] = [arr[largest], arr[i]];
+    heapify(arr, n, largest);
+  }
+}
+
+function heapSort(arr) {
+  const n = arr.length;
+
+  for (let i = Math.floor(n / 2) - 1; i >= 0; i--) {
+    heapify(arr, n, i);
+  }
+
+  for (let i = n - 1; i > 0; i--) {
+    [arr[0], arr[i]] = [arr[i], arr[0]];
+    heapify(arr, i, 0);
+  }
+}`,
+    python: `def heapify(arr, n, i):
+    largest = i
+    left = 2 * i + 1
+    right = 2 * i + 2
+
+    if left < n and arr[i] < arr[left]:
+        largest = left
+
+    if right < n and arr[largest] < arr[right]:
+        largest = right
+
+    if largest != i:
+        arr[i], arr[largest] = arr[largest], arr[i]
+        heapify(arr, n, largest)
+
+def heapSort(arr):
+    n = len(arr)
+
+    for i in range(n // 2 - 1, -1, -1):
+        heapify(arr, n, i)
+
+    for i in range(n - 1, 0, -1):
+        arr[i], arr[0] = arr[0], arr[i]
+        heapify(arr, i, 0)`,
+    java: `public void heapify(int arr[], int n, int i) {
+    int largest = i;
+    int left = 2 * i + 1;
+    int right = 2 * i + 2;
+
+    if (left < n && arr[left] > arr[largest])
+        largest = left;
+
+    if (right < n && arr[right] > arr[largest])
+        largest = right;
+
+    if (largest != i) {
+        int swap = arr[i];
+        arr[i] = arr[largest];
+        arr[largest] = swap;
+        heapify(arr, n, largest);
+    }
+}
+
+public void heapSort(int arr[]) {
+    int n = arr.length;
+
+    for (int i = n / 2 - 1; i >= 0; i--)
+        heapify(arr, n, i);
+
+    for (int i = n - 1; i > 0; i--) {
+        int temp = arr[0];
+        arr[0] = arr[i];
+        arr[i] = temp;
+        heapify(arr, i, 0);
+    }
+}`,
+    cpp: `void heapify(int arr[], int n, int i) {
+    int largest = i;
+    int left = 2 * i + 1;
+    int right = 2 * i + 2;
+
+    if (left < n && arr[left] > arr[largest])
+        largest = left;
+
+    if (right < n && arr[right] > arr[largest])
+        largest = right;
+
+    if (largest != i) {
+        swap(arr[i], arr[largest]);
+        heapify(arr, n, largest);
+    }
+}
+
+void heapSort(int arr[], int n) {
+    for (int i = n / 2 - 1; i >= 0; i--)
+        heapify(arr, n, i);
+
+    for (int i = n - 1; i >= 0; i--) {
+        swap(arr[0], arr[i]);
+        heapify(arr, i, 0);
+    }
+}`
+  };
+
+  return <SharedCodeBlock title="Heap Sort Implementation" codeExamples={codeExamples} color="text-purple-500" />;
+}
diff --git a/src/app/visualizer/tree/applications/heapsort/content.jsx b/src/app/visualizer/tree/applications/heapsort/content.jsx
new file mode 100644
index 000000000..c53b6d452
--- /dev/null
+++ b/src/app/visualizer/tree/applications/heapsort/content.jsx
@@ -0,0 +1,166 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { ArrowUp, ArrowDown, Repeat, Lightbulb } from "lucide-react";
+
+const HeapSortContent = () => {
+  return (
+    <main className="max-w-4xl mx-auto mt-8 mb-8">
+      <article className="bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden shadow-lg shadow-purple-500/5">
+        
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            What is Heap Sort?
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed space-y-4">
+            <p>
+              Heap Sort is a popular and efficient sorting algorithm that is based on the <strong>Binary Heap</strong> data structure. It works by visualizing the elements of the array as a special kind of complete binary tree called a heap.
+            </p>
+            <p>
+              The algorithm operates in two main phases: building a max-heap from the unsorted array, and then repeatedly extracting the maximum element from the heap and rebuilding it until the array is sorted.
+            </p>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e] bg-purple-50/30 dark:bg-purple-900/5">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            Visual Example
+          </h2>
+          <div className="flex justify-center my-6">
+            <svg width="400" height="250" viewBox="0 0 400 250" className="drop-shadow-lg">
+              <line x1="200" y1="50" x2="100" y2="120" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="200" y1="50" x2="300" y2="120" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="100" y1="120" x2="50" y2="190" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="100" y1="120" x2="150" y2="190" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="300" y1="120" x2="250" y2="190" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+
+              <circle cx="200" cy="50" r="24" className="fill-purple-100 dark:fill-purple-900 stroke-purple-500 dark:stroke-purple-400" strokeWidth="3" className="drop-shadow-[0_0_10px_rgba(168,85,247,0.5)]" />
+              <text x="200" y="55" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">9 (Max)</text>
+              
+              <circle cx="100" cy="120" r="24" className="fill-white dark:fill-slate-900 stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <text x="100" y="125" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">7</text>
+              
+              <circle cx="300" cy="120" r="24" className="fill-white dark:fill-slate-900 stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <text x="300" y="125" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">8</text>
+              
+              <circle cx="50" cy="190" r="24" className="fill-white dark:fill-slate-900 stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <text x="50" y="195" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">1</text>
+              
+              <circle cx="150" cy="190" r="24" className="fill-white dark:fill-slate-900 stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <text x="150" y="195" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">5</text>
+
+              <circle cx="250" cy="190" r="24" className="fill-white dark:fill-slate-900 stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <text x="250" y="195" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">2</text>
+            </svg>
+          </div>
+          <p className="text-center text-sm text-gray-500 dark:text-gray-400">
+            A Max-Heap where the root is always the largest element. We swap it with the last element and remove it to sort the array.
+          </p>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            Algorithm Strategy
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-4 leading-relaxed">
+            <div className="mt-6 grid gap-4">
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-purple-50/30 dark:from-neutral-900 dark:to-purple-950/20 border-purple-100 dark:border-purple-900/50 hover:shadow-md hover:border-purple-300 dark:hover:border-purple-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-purple-100 dark:bg-purple-900/60 p-2 rounded-lg text-purple-600 dark:text-purple-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <ArrowUp className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">1. Build Max Heap</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      Rearrange the array elements so they form a Max-Heap (where the parent node is greater than its children).
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-purple-50/30 dark:from-neutral-900 dark:to-purple-950/20 border-purple-100 dark:border-purple-900/50 hover:shadow-md hover:border-purple-300 dark:hover:border-purple-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-purple-100 dark:bg-purple-900/60 p-2 rounded-lg text-purple-600 dark:text-purple-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <ArrowDown className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">2. Swap Root</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      The largest item is stored at the root of the heap. Swap it with the last item of the heap followed by reducing the size of heap by 1.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-purple-50/30 dark:from-neutral-900 dark:to-purple-950/20 border-purple-100 dark:border-purple-900/50 hover:shadow-md hover:border-purple-300 dark:hover:border-purple-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-purple-100 dark:bg-purple-900/60 p-2 rounded-lg text-purple-600 dark:text-purple-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <Repeat className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">3. Heapify and Repeat</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      Heapify the root of the tree to maintain the max-heap property. Repeat this process while size of heap is greater than 1.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="p-6">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <div className="flex flex-wrap gap-4 mb-6">
+              <div className="flex items-center gap-2 bg-purple-50 dark:bg-purple-900/20 px-4 py-2 rounded-lg border border-purple-200 dark:border-purple-800 shadow-sm">
+                <span className="font-semibold text-purple-800 dark:text-purple-300">Time:</span>
+                <span className="font-mono text-purple-600 dark:text-purple-400">O(N log N)</span>
+              </div>
+              <div className="flex items-center gap-2 bg-purple-50 dark:bg-purple-900/20 px-4 py-2 rounded-lg border border-purple-200 dark:border-purple-800 shadow-sm">
+                <span className="font-semibold text-purple-800 dark:text-purple-300">Space:</span>
+                <span className="font-mono text-purple-600 dark:text-purple-400">O(1)</span>
+              </div>
+            </div>
+            <p className="text-sm mb-6">Time complexity is O(N log N) for all cases (best, average, worst) because building a heap takes O(N) and then we call heapify N times which takes O(log N) each time.</p>
+            <div className="mt-4 bg-gray-50 dark:bg-neutral-900 rounded-xl p-4 border border-gray-200 dark:border-gray-800 shadow-inner">
+              <ComplexityGraph
+                bestCase={(n) => n * Math.log2(n)}
+                averageCase={(n) => n * Math.log2(n)}
+                worstCase={(n) => n * Math.log2(n)}
+                maxN={50}
+                title="Time Complexity: O(N log N)"
+              />
+            </div>
+          </div>
+        </section>
+        
+        <section className="p-6 border-t border-[#f3f4f6] dark:border-[#1e1e1e] bg-gradient-to-r from-purple-50 to-white dark:from-purple-950/20 dark:to-neutral-950">
+          <div className="flex items-start gap-4">
+            <div className="mt-1 bg-purple-100 dark:bg-purple-900/50 p-2.5 rounded-xl shadow-sm text-purple-600 dark:text-purple-400">
+              <Lightbulb className="w-6 h-6" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold text-purple-900 dark:text-purple-300 mb-2">
+                Key Takeaways
+              </h2>
+              <ul className="list-disc pl-5 space-y-2 text-sm text-purple-800 dark:text-purple-200/80 leading-relaxed">
+                <li>Heap Sort is an in-place algorithm, meaning it takes O(1) auxiliary space.</li>
+                <li>Unlike Quick Sort, its worst-case time complexity is O(N log N).</li>
+                <li>It is not a stable sort, meaning it does not preserve the relative order of elements with equal keys.</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+};
+
+export default HeapSortContent;
diff --git a/src/app/visualizer/tree/applications/heapsort/quiz.jsx b/src/app/visualizer/tree/applications/heapsort/quiz.jsx
new file mode 100644
index 000000000..388a980b5
--- /dev/null
+++ b/src/app/visualizer/tree/applications/heapsort/quiz.jsx
@@ -0,0 +1,45 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const handleNext = () => {
+  const questions = [
+  {
+    "question": "What is the time complexity of Heap Sort in the worst case?",
+    "options": [
+      "O(N)",
+      "O(log N)",
+      "O(N log N)",
+      "O(N^2)"
+    ],
+    "correctAnswer": 2,
+    "explanation": "Heap Sort always takes O(N log N) time because the heapify process takes O(log N) and it is called N times."
+  },
+  {
+    "question": "Which of the following properties is true about Heap Sort?",
+    "options": [
+      "It is a stable sorting algorithm",
+      "It requires O(N) extra space",
+      "It is an in-place sorting algorithm",
+      "It is slower than Bubble Sort"
+    ],
+    "correctAnswer": 2,
+    "explanation": "Heap sort is an in-place sorting algorithm and requires O(1) extra space. However, it is not stable."
+  },
+  {
+    "question": "When sorting an array in ascending order using Heap Sort, which type of heap is used?",
+    "options": [
+      "Min-Heap",
+      "Max-Heap",
+      "Binary Search Tree",
+      "Fibonacci Heap"
+    ],
+    "correctAnswer": 1,
+    "explanation": "A Max-Heap is built so that the largest element is at the root. We swap it with the last element and reduce the heap size to sort the array in ascending order."
+  }
+];
+
+  return <QuizEngine title="Heap Sort Quiz" questions={questions} />;
+};
+
+export default handleNext;
diff --git a/src/app/visualizer/tree/applications/heapsort/quiz/page.jsx b/src/app/visualizer/tree/applications/heapsort/quiz/page.jsx
new file mode 100644
index 000000000..b76e22c2b
--- /dev/null
+++ b/src/app/visualizer/tree/applications/heapsort/quiz/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "../quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/applications/huffman/AlgorithmClient.jsx b/src/app/visualizer/tree/applications/huffman/AlgorithmClient.jsx
new file mode 100644
index 000000000..a8d6aba47
--- /dev/null
+++ b/src/app/visualizer/tree/applications/huffman/AlgorithmClient.jsx
@@ -0,0 +1,43 @@
+import Animation from "./animation";
+import Content from "./content";
+import CodeBlock from "./codeBlock";
+import Quiz from "./quiz";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+
+
+export default function HuffmanCodingPage() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Applications", "Huffman Coding")}
+      title="Huffman Coding"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      quiz={<Quiz />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.huffmanCoding}
+          description="Mark Huffman Coding as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other Tree Applications"
+          links={[
+            { text: "Heap Sort", description: "Efficient sorting algorithm based on binary heap.", url: "./heapsort" },
+            { text: "Decision Trees", description: "Machine learning decision-making workflows.", url: "./decision-trees" },
+            { text: "Syntax Trees", description: "Abstract Syntax Trees in compilers.", url: "./syntax-trees" },
+          ]}
+          columns="3"
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/applications/huffman/animation.jsx b/src/app/visualizer/tree/applications/huffman/animation.jsx
new file mode 100644
index 000000000..78ff26f76
--- /dev/null
+++ b/src/app/visualizer/tree/applications/huffman/animation.jsx
@@ -0,0 +1,287 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import { Play, RotateCcw, Info, RefreshCw } from "lucide-react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import usePlayback from "@/app/hooks/usePlayback";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+
+const INITIAL_NODES = [
+  { id: "A", val: 5, char: "A", x: 100, y: 250, active: true },
+  { id: "B", val: 9, char: "B", x: 250, y: 250, active: true },
+  { id: "C", val: 12, char: "C", x: 400, y: 250, active: true },
+  { id: "D", val: 13, char: "D", x: 550, y: 250, active: true },
+  { id: "E", val: 16, char: "E", x: 700, y: 250, active: true },
+];
+
+export default function HuffmanAnimation() {
+  const [animating, setAnimating] = useState(false);
+  const [message, setMessage] = useState("Click 'Build Tree' to start Huffman Coding.");
+  const [treeBuilt, setTreeBuilt] = useState(false);
+  
+  const [steps, setSteps] = useState([]);
+  const [currentStepIdx, setCurrentStepIdx] = useState(-1);
+  const { speed, setSpeed } = usePlayback(1);
+  const timerRef = useRef(null);
+  const lockRef = useRef(false);
+  const stepIdxRef = useRef(currentStepIdx);
+  const animatingRef = useRef(animating);
+
+  useEffect(() => { stepIdxRef.current = currentStepIdx; }, [currentStepIdx]);
+  useEffect(() => { animatingRef.current = animating; }, [animating]);
+
+  useVisualizerReset(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    lockRef.current = false;
+    setAnimating(false);
+    setMessage("...");
+    setTreeBuilt(false);
+    setSteps([]);
+    setCurrentStepIdx(-1);
+  });
+
+  const currentStep = steps[currentStepIdx] || null;
+  const nodes = currentStep ? currentStep.nodes : [...INITIAL_NODES];
+  const edges = currentStep ? currentStep.edges : [];
+  const activeIds = currentStep ? currentStep.activeIds : [];
+
+
+  useEffect(() => {
+    if (currentStep) {
+      setMessage(currentStep.message);
+    }
+  }, [currentStep]);
+
+  useEffect(() => {
+    if (!animating || steps.length === 0 || lockRef.current) return;
+    if (currentStepIdx >= steps.length - 1) { 
+      setAnimating(false);
+      setTreeBuilt(true);
+      return; 
+    }
+    lockRef.current = true;
+    timerRef.current = setTimeout(() => {
+      lockRef.current = false;
+      setCurrentStepIdx(p => p + 1);
+    }, 1600 / speed);
+    return () => { if (timerRef.current) clearTimeout(timerRef.current); };
+  }, [animating, currentStepIdx, steps, speed]);
+
+  const pauseVisualizer = () => { setAnimating(false); if (timerRef.current) clearTimeout(timerRef.current); lockRef.current = false; };
+  const startVisualizer = () => {
+    if (steps.length === 0) return;
+    setAnimating(true);
+    const nextIdx = currentStepIdx === -1 || currentStepIdx >= steps.length - 1 ? 0 : currentStepIdx + 1;
+    setCurrentStepIdx(nextIdx);
+  };
+  const stepForward = () => { if (lockRef.current) return; setAnimating(false); if (timerRef.current) clearTimeout(timerRef.current); if (stepIdxRef.current < steps.length - 1) setCurrentStepIdx(p => p + 1); };
+  const stepBackward = () => { if (lockRef.current) return; setAnimating(false); if (timerRef.current) clearTimeout(timerRef.current); if (stepIdxRef.current > 0) setCurrentStepIdx(p => p - 1); };
+  const resetPlayback = () => {
+    setAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    lockRef.current = false;
+    setCurrentStepIdx(-1);
+    setTreeBuilt(false);
+    setMessage("Playback reset.");
+  };
+
+  const buildTree = () => {
+    setAnimating(false);
+    const newSteps = [];
+    
+    let currentNodes = INITIAL_NODES.map(n => ({...n}));
+    let currentEdges = [];
+    let idCounter = 1;
+
+    newSteps.push({
+      nodes: currentNodes.map(n => ({...n})),
+      edges: [...currentEdges],
+      activeIds: [],
+      message: "Starting to build Huffman Tree..."
+    });
+
+    while (currentNodes.filter(n => n.active).length > 1) {
+      let activeNodes = currentNodes.filter(n => n.active).sort((a, b) => a.val - b.val);
+      
+      let left = activeNodes[0];
+      let right = activeNodes[1];
+
+      newSteps.push({
+        nodes: currentNodes.map(n => ({...n})),
+        edges: [...currentEdges],
+        activeIds: [left.id, right.id],
+        message: `Selecting two nodes with minimum frequencies: ${left.val} (${left.char || '*'}) and ${right.val} (${right.char || '*'})`
+      });
+
+      let sum = left.val + right.val;
+      let newNodeId = `N${idCounter++}`;
+      
+      let newX = (left.x + right.x) / 2;
+      let newY = Math.min(left.y, right.y) - 60;
+
+      let newNode = { id: newNodeId, val: sum, char: "", x: newX, y: newY, active: true };
+      
+      let leftIdx = currentNodes.findIndex(n => n.id === left.id);
+      let rightIdx = currentNodes.findIndex(n => n.id === right.id);
+      currentNodes[leftIdx].active = false;
+      currentNodes[rightIdx].active = false;
+
+      currentNodes.push(newNode);
+      currentEdges.push({ source: newNode, target: left, label: "0" });
+      currentEdges.push({ source: newNode, target: right, label: "1" });
+
+      newSteps.push({
+        nodes: currentNodes.map(n => ({...n})),
+        edges: [...currentEdges],
+        activeIds: [],
+        message: `Combined ${left.val} and ${right.val} to form a new node with frequency ${sum}`
+      });
+    }
+
+    newSteps.push({
+      nodes: currentNodes.map(n => ({...n})),
+      edges: [...currentEdges],
+      activeIds: [],
+      message: "Huffman Tree built successfully! Left branches are '0', right branches are '1'."
+    });
+
+    setSteps(newSteps);
+    setCurrentStepIdx(0);
+    setAnimating(true);
+    setTreeBuilt(false);
+  };
+
+  const handleReset = () => {
+    setAnimating(false);
+    setSteps([]);
+    setCurrentStepIdx(-1);
+    setTreeBuilt(false);
+    setMessage("Click 'Build Tree' to start Huffman Coding.");
+  };
+
+  useVisualizerKeyboard({
+    onStepForward: stepForward,
+    onStepBackward: stepBackward,
+    onTogglePlay: animating ? pauseVisualizer : startVisualizer,
+    onReset: resetPlayback,
+    onSpeedChange: setSpeed,
+    speed: speed,
+    sorting: animating,
+    sorted: false,
+    enabled: true,
+  });
+
+  return (
+    <VisualizerInteractiveLayout>
+      <VisualizerCard>
+        <div className="flex justify-between items-center mb-6">
+          <div className="text-sm font-bold text-gray-700 dark:text-gray-300">Characters & Frequencies</div>
+          <div className="flex items-center gap-3">
+            <button 
+              onClick={buildTree} 
+              disabled={animating || treeBuilt}
+              className="flex items-center gap-2 px-6 py-2.5 text-sm font-bold bg-[#a435f0] hover:bg-[#8f2cd6] disabled:opacity-50 text-white rounded-xl transition-all shadow-md"
+            >
+              <Play className="w-4 h-4" /> Build Tree
+            </button>
+            <button 
+              onClick={handleReset} 
+              className="px-4 py-2.5 text-sm font-bold text-red-500 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-xl transition-all border border-red-500/30 flex items-center gap-2"
+            >
+              <RefreshCw className="w-4 h-4" /> Reset
+            </button>
+          </div>
+        </div>
+
+        <PlaybackControls 
+          isPlaying={animating}
+          onPlayPause={animating ? pauseVisualizer : startVisualizer}
+          onStepForward={stepForward}
+          onStepBackward={stepBackward}
+          onReset={resetPlayback}
+          speed={speed}
+          onSpeedChange={setSpeed}
+          disabled={steps.length === 0}
+          showPlayPause={true}
+        />
+      </VisualizerCard>
+
+      <VisualizerCard
+        className={
+          message.includes("successfully") 
+            ? "border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30"
+            : animating
+                ? "border-[#a435f0]/30 bg-[#a435f0]/10 dark:border-[#a435f0]/50 dark:bg-[#a435f0]/20"
+                : ""
+        }
+      >
+        <div className="flex items-center text-xs text-gray-500 font-semibold gap-1.5 mb-2">
+          <Info className="w-4 h-4 text-[#a435f0]" /> Animation Status
+          <span className="ml-auto font-bold bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-gray-600 dark:text-gray-400">
+            Step {currentStepIdx !== -1 ? currentStepIdx + 1 : 0} / {steps.length || 0}
+          </span>
+        </div>
+        <div className="text-lg font-medium min-h-[28px]">{message}</div>
+      </VisualizerCard>
+
+      <VisualizerCard>
+        <div className="overflow-auto flex justify-center py-6 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 relative min-h-[400px]">
+          <svg width="800" height="350" viewBox="0 0 800 350" className="max-w-full h-auto drop-shadow-sm">
+            {/* Edges */}
+            {edges.map((edge, i) => (
+              <g key={i}>
+                <line 
+                  x1={edge.source.x} y1={edge.source.y + 20}
+                  x2={edge.target.x} y2={edge.target.y - 20}
+                  className="stroke-slate-400 dark:stroke-slate-400" strokeWidth="2"
+                  className="transition-all duration-500 dark:stroke-slate-700"
+                />
+                <text 
+                  x={(edge.source.x + edge.target.x) / 2} 
+                  y={(edge.source.y + edge.target.y) / 2 - 5} 
+                  className="fill-purple-600 dark:fill-purple-500" fontSize="14" fontWeight="bold"
+                >
+                  {edge.label}
+                </text>
+              </g>
+            ))}
+
+            {/* Nodes */}
+            {nodes.map((node, i) => {
+              const isActive = activeIds.includes(node.id);
+              return (
+                <g key={node.id} className="transition-all duration-500">
+                  {isActive && <circle cx={node.x} cy={node.y} r="32" fill="none" className="stroke-purple-300 dark:stroke-purple-400" strokeWidth="2" strokeDasharray="4,2" className="animate-spin-slow opacity-80" />}
+                  <circle 
+                    cx={node.x} cy={node.y} r="24" 
+                    fill={node.char ? "var(--background)" : "#a435f0"} 
+                    stroke={isActive ? "#d38cff" : (node.char ? "#64748b" : "#a435f0")} 
+                    strokeWidth="2.5" 
+                    className="shadow-sm transition-all duration-500" 
+                  />
+                  <text 
+                    x={node.x} y={node.y + 5} 
+                    textAnchor="middle" 
+                    fill={node.char ? "var(--foreground)" : "#ffffff"} 
+                    fontSize="14" fontWeight="bold"
+                  >
+                    {node.val}
+                  </text>
+                  {node.char && (
+                    <text x={node.x} y={node.y + 40} textAnchor="middle" className="fill-purple-600 dark:fill-purple-500" fontSize="14" fontWeight="bold">
+                      {node.char}
+                    </text>
+                  )}
+                </g>
+              );
+            })}
+          </svg>
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+}
diff --git a/src/app/visualizer/tree/applications/huffman/codeBlock.jsx b/src/app/visualizer/tree/applications/huffman/codeBlock.jsx
new file mode 100644
index 000000000..970a4a3f1
--- /dev/null
+++ b/src/app/visualizer/tree/applications/huffman/codeBlock.jsx
@@ -0,0 +1,146 @@
+"use client";
+import SharedCodeBlock from "@/app/components/ui/SharedCodeBlock";
+
+export default function HuffmanCodeBlock() {
+  const codeExamples = {
+    javascript: `class Node {
+  constructor(char, freq) {
+    this.char = char;
+    this.freq = freq;
+    this.left = null;
+    this.right = null;
+  }
+}
+
+function buildHuffmanTree(chars, freqs) {
+  let pq = [];
+  for (let i = 0; i < chars.length; i++) {
+    pq.push(new Node(chars[i], freqs[i]));
+  }
+  
+  pq.sort((a, b) => a.freq - b.freq);
+
+  while (pq.length > 1) {
+    let left = pq.shift();
+    let right = pq.shift();
+
+    let sumNode = new Node(null, left.freq + right.freq);
+    sumNode.left = left;
+    sumNode.right = right;
+
+    pq.push(sumNode);
+    pq.sort((a, b) => a.freq - b.freq);
+  }
+  return pq[0];
+}`,
+    python: `import heapq
+
+class Node:
+    def __init__(self, char, freq):
+        self.char = char
+        self.freq = freq
+        self.left = None
+        self.right = None
+
+    def __lt__(self, other):
+        return self.freq < other.freq
+
+def buildHuffmanTree(chars, freqs):
+    pq = []
+    for i in range(len(chars)):
+        heapq.heappush(pq, Node(chars[i], freqs[i]))
+
+    while len(pq) > 1:
+        left = heapq.heappop(pq)
+        right = heapq.heappop(pq)
+
+        sumNode = Node(None, left.freq + right.freq)
+        sumNode.left = left
+        sumNode.right = right
+
+        heapq.heappush(pq, sumNode)
+
+    return heapq.heappop(pq)`,
+    java: `import java.util.PriorityQueue;
+
+class Node implements Comparable<Node> {
+    char ch;
+    int freq;
+    Node left, right;
+
+    Node(char ch, int freq) {
+        this.ch = ch;
+        this.freq = freq;
+    }
+    
+    public int compareTo(Node other) {
+        return this.freq - other.freq;
+    }
+}
+
+public Node buildHuffmanTree(char[] chars, int[] freqs) {
+    PriorityQueue<Node> pq = new PriorityQueue<>();
+
+    for (int i = 0; i < chars.length; i++) {
+        pq.add(new Node(chars[i], freqs[i]));
+    }
+
+    while (pq.size() > 1) {
+        Node left = pq.poll();
+        Node right = pq.poll();
+
+        Node sumNode = new Node('\\0', left.freq + right.freq);
+        sumNode.left = left;
+        sumNode.right = right;
+
+        pq.add(sumNode);
+    }
+
+    return pq.poll();
+}`,
+    cpp: `#include <queue>
+#include <vector>
+
+using namespace std;
+
+struct Node {
+    char ch;
+    int freq;
+    Node *left, *right;
+
+    Node(char c, int f) {
+        ch = c;
+        freq = f;
+        left = right = nullptr;
+    }
+};
+
+struct compare {
+    bool operator()(Node* l, Node* r) {
+        return (l->freq > r->freq);
+    }
+};
+
+Node* buildHuffmanTree(vector<char> chars, vector<int> freqs) {
+    priority_queue<Node*, vector<Node*>, compare> pq;
+
+    for (int i = 0; i < chars.size(); ++i)
+        pq.push(new Node(chars[i], freqs[i]));
+
+    while (pq.size() > 1) {
+        Node *left = pq.top(); pq.pop();
+        Node *right = pq.top(); pq.pop();
+
+        Node *sumNode = new Node('\\0', left->freq + right->freq);
+        sumNode->left = left;
+        sumNode->right = right;
+
+        pq.push(sumNode);
+    }
+
+    return pq.top();
+}`
+  };
+
+  return <SharedCodeBlock title="Huffman Coding Implementation" codeExamples={codeExamples} color="text-purple-500" />;
+}
diff --git a/src/app/visualizer/tree/applications/huffman/content.jsx b/src/app/visualizer/tree/applications/huffman/content.jsx
new file mode 100644
index 000000000..9d6b71158
--- /dev/null
+++ b/src/app/visualizer/tree/applications/huffman/content.jsx
@@ -0,0 +1,166 @@
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { Combine, ArrowDownUp, Minimize2, Lightbulb } from "lucide-react";
+
+const HuffmanContent = () => {
+  return (
+    <main className="max-w-4xl mx-auto mt-8 mb-8">
+      <article className="bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden shadow-lg shadow-purple-500/5">
+        
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            What is Huffman Coding?
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed space-y-4">
+            <p>
+              Huffman Coding is a lossless data compression algorithm. The idea is to assign variable-length codes to input characters, with lengths based on the frequencies of corresponding characters.
+            </p>
+            <p>
+              The most frequent character gets the smallest code and the least frequent character gets the largest code. This variable-length coding is created using a <strong>Huffman Tree</strong>, which is built using a greedy approach.
+            </p>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e] bg-purple-50/30 dark:bg-purple-900/5">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            Visual Example
+          </h2>
+          <div className="flex justify-center my-6">
+            <svg width="400" height="250" viewBox="0 0 400 250" className="drop-shadow-lg">
+              <line x1="200" y1="50" x2="100" y2="120" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="200" y1="50" x2="300" y2="120" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="100" y1="120" x2="50" y2="190" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="100" y1="120" x2="150" y2="190" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+
+              <text x="140" y="80" className="fill-purple-500 dark:fill-purple-400" fontSize="14" fontWeight="bold">0</text>
+              <text x="260" y="80" className="fill-purple-500 dark:fill-purple-400" fontSize="14" fontWeight="bold">1</text>
+              <text x="65" y="150" className="fill-purple-500 dark:fill-purple-400" fontSize="14" fontWeight="bold">0</text>
+              <text x="135" y="150" className="fill-purple-500 dark:fill-purple-400" fontSize="14" fontWeight="bold">1</text>
+
+              <circle cx="200" cy="50" r="24" className="fill-white dark:fill-slate-900 stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <text x="200" y="55" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">100</text>
+              
+              <circle cx="100" cy="120" r="24" className="fill-white dark:fill-slate-900 stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <text x="100" y="125" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">45</text>
+              
+              <circle cx="300" cy="120" r="24" className="fill-purple-100 dark:fill-purple-900 stroke-purple-500 dark:stroke-purple-400" strokeWidth="3" />
+              <text x="300" y="125" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">55 (A)</text>
+              
+              <circle cx="50" cy="190" r="24" className="fill-purple-50 dark:fill-indigo-950 stroke-purple-500 dark:stroke-purple-400" strokeWidth="2" />
+              <text x="50" y="195" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">20 (B)</text>
+              
+              <circle cx="150" cy="190" r="24" className="fill-purple-50 dark:fill-indigo-950 stroke-purple-500 dark:stroke-purple-400" strokeWidth="2" />
+              <text x="150" y="195" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">25 (C)</text>
+            </svg>
+          </div>
+          <p className="text-center text-sm text-gray-500 dark:text-gray-400">
+            A: 1, B: 00, C: 01. The most frequent character &apos;A&apos; has the shortest code.
+          </p>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            Algorithm Strategy
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-4 leading-relaxed">
+            <div className="mt-6 grid gap-4">
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-purple-50/30 dark:from-neutral-900 dark:to-purple-950/20 border-purple-100 dark:border-purple-900/50 hover:shadow-md hover:border-purple-300 dark:hover:border-purple-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-purple-100 dark:bg-purple-900/60 p-2 rounded-lg text-purple-600 dark:text-purple-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <ArrowDownUp className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">1. Calculate Frequencies</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      Count how often each character appears in the data. Create a leaf node for each character and build a min-heap of all leaf nodes.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-purple-50/30 dark:from-neutral-900 dark:to-purple-950/20 border-purple-100 dark:border-purple-900/50 hover:shadow-md hover:border-purple-300 dark:hover:border-purple-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-purple-100 dark:bg-purple-900/60 p-2 rounded-lg text-purple-600 dark:text-purple-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <Combine className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">2. Build Tree</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      Extract two nodes with the minimum frequency from the min-heap. Create a new internal node with a frequency equal to the sum of the two nodes&apos; frequencies. Insert this new node back into the min-heap. Repeat until one node remains.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-purple-50/30 dark:from-neutral-900 dark:to-purple-950/20 border-purple-100 dark:border-purple-900/50 hover:shadow-md hover:border-purple-300 dark:hover:border-purple-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-purple-100 dark:bg-purple-900/60 p-2 rounded-lg text-purple-600 dark:text-purple-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <Minimize2 className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">3. Generate Codes</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      Traverse the constructed tree from root to leaves. Assign &apos;0&apos; for a left branch and &apos;1&apos; for a right branch. The sequence of bits from root to a leaf node is the code for that character.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="p-6">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            Complexity Analysis
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db]">
+            <div className="flex flex-wrap gap-4 mb-6">
+              <div className="flex items-center gap-2 bg-purple-50 dark:bg-purple-900/20 px-4 py-2 rounded-lg border border-purple-200 dark:border-purple-800 shadow-sm">
+                <span className="font-semibold text-purple-800 dark:text-purple-300">Time:</span>
+                <span className="font-mono text-purple-600 dark:text-purple-400">O(N log N)</span>
+              </div>
+              <div className="flex items-center gap-2 bg-purple-50 dark:bg-purple-900/20 px-4 py-2 rounded-lg border border-purple-200 dark:border-purple-800 shadow-sm">
+                <span className="font-semibold text-purple-800 dark:text-purple-300">Space:</span>
+                <span className="font-mono text-purple-600 dark:text-purple-400">O(N)</span>
+              </div>
+            </div>
+            <p className="text-sm mb-6">Where N is the number of unique characters. Extracting minimum from the priority queue takes O(log N) and it is done 2*(N-1) times.</p>
+            <div className="mt-4 bg-gray-50 dark:bg-neutral-900 rounded-xl p-4 border border-gray-200 dark:border-gray-800 shadow-inner">
+              <ComplexityGraph
+                bestCase={(n) => n * Math.log2(n)}
+                averageCase={(n) => n * Math.log2(n)}
+                worstCase={(n) => n * Math.log2(n)}
+                maxN={50}
+                title="Time Complexity: O(N log N)"
+              />
+            </div>
+          </div>
+        </section>
+        
+        <section className="p-6 border-t border-[#f3f4f6] dark:border-[#1e1e1e] bg-gradient-to-r from-purple-50 to-white dark:from-purple-950/20 dark:to-neutral-950">
+          <div className="flex items-start gap-4">
+            <div className="mt-1 bg-purple-100 dark:bg-purple-900/50 p-2.5 rounded-xl shadow-sm text-purple-600 dark:text-purple-400">
+              <Lightbulb className="w-6 h-6" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold text-purple-900 dark:text-purple-300 mb-2">
+                Key Takeaways
+              </h2>
+              <ul className="list-disc pl-5 space-y-2 text-sm text-purple-800 dark:text-purple-200/80 leading-relaxed">
+                <li>Huffman Coding generates <strong>prefix codes</strong>, meaning no code is a prefix of another code. This ensures unambiguous decoding.</li>
+                <li>It is optimally efficient for character-by-character coding when character frequencies are known.</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+};
+
+export default HuffmanContent;
diff --git a/src/app/visualizer/tree/applications/huffman/quiz.jsx b/src/app/visualizer/tree/applications/huffman/quiz.jsx
new file mode 100644
index 000000000..26f109a27
--- /dev/null
+++ b/src/app/visualizer/tree/applications/huffman/quiz.jsx
@@ -0,0 +1,45 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const handleNext = () => {
+  const questions = [
+  {
+    "question": "What type of codes are generated by Huffman Coding?",
+    "options": [
+      "Fixed-length codes",
+      "Prefix codes",
+      "Hash codes",
+      "Postfix codes"
+    ],
+    "correctAnswer": 1,
+    "explanation": "Huffman coding generates prefix codes, meaning no code is a prefix of another code, ensuring unambiguous decoding."
+  },
+  {
+    "question": "Which data structure is primarily used to build a Huffman Tree efficiently?",
+    "options": [
+      "Stack",
+      "Queue",
+      "Priority Queue (Min-Heap)",
+      "Graph"
+    ],
+    "correctAnswer": 2,
+    "explanation": "A priority queue (typically implemented as a min-heap) is used to efficiently extract the two nodes with the smallest frequencies."
+  },
+  {
+    "question": "In a Huffman Tree, where do the actual characters reside?",
+    "options": [
+      "At the root node",
+      "Only at the internal nodes",
+      "Only at the leaf nodes",
+      "At any random node"
+    ],
+    "correctAnswer": 2,
+    "explanation": "All characters reside at the leaf nodes of the Huffman Tree. Internal nodes only store the sum of frequencies."
+  }
+];
+
+  return <QuizEngine title="Huffman Coding Quiz" questions={questions} />;
+};
+
+export default handleNext;
diff --git a/src/app/visualizer/tree/applications/quiz/TreeApplicationsQuizClient.jsx b/src/app/visualizer/tree/applications/quiz/TreeApplicationsQuizClient.jsx
new file mode 100644
index 000000000..226a45cc3
--- /dev/null
+++ b/src/app/visualizer/tree/applications/quiz/TreeApplicationsQuizClient.jsx
@@ -0,0 +1,98 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { ArrowRight, Layers } from "lucide-react";
+
+const quizzes = [
+  {
+    title: "Heap (Min/Max) Quiz",
+    description:
+      "Practice concepts of Min Heap, Max Heap, insertion, deletion, and heap properties.",
+    href: "/visualizer/tree/applications/quiz/heap-min-max",
+  },
+  {
+    title: "Heap (Max) Quiz",
+    description:
+      "Test your understanding of Max Heap operations and applications.",
+    href: "/visualizer/tree/applications/quiz/heap-max",
+  },
+  {
+    title: "Heap Sort Quiz",
+    description:
+      "Practice Heap Sort algorithm, complexity, and implementation concepts.",
+    href: "/visualizer/tree/applications/quiz/heap-sort",
+  },
+  {
+    title: "Huffman Coding Quiz",
+    description:
+      "Learn Huffman Trees, optimal prefix codes, and compression techniques.",
+    href: "/visualizer/tree/applications/quiz/huffman-coding",
+  },
+  {
+    title: "Decision Trees Quiz",
+    description:
+      "Practice Decision Tree concepts used in Machine Learning and classification.",
+    href: "/visualizer/tree/applications/quiz/decision-trees",
+  },
+  {
+    title: "Syntax Trees Quiz",
+    description:
+      "Test your knowledge of Abstract Syntax Trees and expression parsing.",
+    href: "/visualizer/tree/applications/quiz/syntax-trees",
+  },
+];
+
+export default function TreeApplicationsQuizClient() {
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <div className="max-w-7xl mx-auto px-6 py-12">
+        <motion.div
+          initial={{ opacity: 0, y: 25 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="mb-10"
+        >
+          <h1 className="text-4xl font-bold">
+            🌳 Tree Applications Quiz
+          </h1>
+
+          <p className="mt-3 text-muted-foreground">
+            Practice real-world applications of Trees through interactive quizzes.
+          </p>
+        </motion.div>
+
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {quizzes.map((quiz, index) => (
+            <motion.div
+              key={quiz.title}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.05 }}
+              className="rounded-2xl border border-emerald-500/20 bg-card p-6 shadow-sm hover:shadow-lg transition-all"
+            >
+              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-600">
+                <Layers size={24} />
+              </div>
+
+              <h2 className="text-xl font-semibold">
+                {quiz.title}
+              </h2>
+
+              <p className="mt-2 text-sm text-muted-foreground">
+                {quiz.description}
+              </p>
+
+              <Link href={quiz.href}>
+                <button className="mt-6 flex w-full items-center justify-center gap-2 rounded-xl bg-emerald-600 px-4 py-3 font-semibold text-white hover:bg-emerald-700 transition-colors">
+                  <span>Start Quiz</span>
+                  <ArrowRight size={18} />
+                </button>
+              </Link>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/visualizer/tree/applications/quiz/decision-trees/page.jsx b/src/app/visualizer/tree/applications/quiz/decision-trees/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/applications/quiz/decision-trees/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/applications/quiz/decision-trees/quiz.jsx b/src/app/visualizer/tree/applications/quiz/decision-trees/quiz.jsx
new file mode 100644
index 000000000..4104c5dd6
--- /dev/null
+++ b/src/app/visualizer/tree/applications/quiz/decision-trees/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is a Decision Tree primarily used for?",
+    options: [
+      "Sorting arrays",
+      "Classification and Regression",
+      "Graph traversal",
+      "Memory allocation"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Decision Trees are supervised machine learning models used for both classification and regression tasks."
+  },
+  {
+    question: "What does the root node of a Decision Tree represent?",
+    options: [
+      "A prediction",
+      "The first feature or attribute used to split the data",
+      "The final class label",
+      "A leaf node"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The root node represents the feature that best splits the dataset according to the chosen criterion."
+  },
+  {
+    question: "What do the leaf nodes of a Decision Tree represent?",
+    options: [
+      "Features",
+      "Intermediate calculations",
+      "Final prediction or class label",
+      "Training samples"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Leaf nodes contain the final decision, prediction, or class label."
+  },
+  {
+    question: "Which algorithm is commonly used to build Decision Trees?",
+    options: [
+      "Dijkstra's Algorithm",
+      "ID3",
+      "Binary Search",
+      "Prim's Algorithm"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "ID3 is one of the earliest and most widely known algorithms for constructing Decision Trees."
+  },
+  {
+    question: "Which metric is commonly used to select the best feature in ID3?",
+    options: [
+      "Mean Squared Error",
+      "Information Gain",
+      "Euclidean Distance",
+      "Cosine Similarity"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "ID3 selects the attribute with the highest Information Gain."
+  },
+  {
+    question: "Which metric is commonly used in the CART algorithm?",
+    options: [
+      "Entropy",
+      "Gini Index",
+      "Jaccard Index",
+      "Pearson Correlation"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "CART uses the Gini Index to measure the quality of splits."
+  },
+  {
+    question: "What is overfitting in a Decision Tree?",
+    options: [
+      "The tree is too small to learn patterns.",
+      "The tree memorizes training data and performs poorly on new data.",
+      "The tree has too few features.",
+      "The tree cannot classify data."
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Overfitting occurs when the tree becomes overly complex and fails to generalize to unseen data."
+  },
+  {
+    question: "Which technique helps reduce overfitting in Decision Trees?",
+    options: [
+      "Heapify",
+      "Pruning",
+      "Hashing",
+      "Serialization"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Pruning removes unnecessary branches, improving generalization."
+  },
+  {
+    question: "Decision Trees are an example of which type of Machine Learning?",
+    options: [
+      "Unsupervised Learning",
+      "Reinforcement Learning",
+      "Supervised Learning",
+      "Deep Learning"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Decision Trees are supervised learning algorithms trained using labeled data."
+  },
+  {
+    question: "Decision Trees are commonly used in:",
+    options: [
+      "Medical Diagnosis",
+      "Fraud Detection",
+      "Customer Classification",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "Decision Trees are widely used across domains such as healthcare, finance, and customer analytics."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Decision Trees Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/applications/quiz/heap-max/page.jsx b/src/app/visualizer/tree/applications/quiz/heap-max/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/applications/quiz/heap-max/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/applications/quiz/heap-max/quiz.jsx b/src/app/visualizer/tree/applications/quiz/heap-max/quiz.jsx
new file mode 100644
index 000000000..6aca0b06a
--- /dev/null
+++ b/src/app/visualizer/tree/applications/quiz/heap-max/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the defining property of a Max Heap?",
+    options: [
+      "Every parent node is less than its children",
+      "Every parent node is greater than or equal to its children",
+      "Nodes are stored in sorted order",
+      "Leaf nodes contain the largest values"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "In a Max Heap, every parent node has a value greater than or equal to its children."
+  },
+  {
+    question: "Which element is always stored at the root of a Max Heap?",
+    options: [
+      "Smallest element",
+      "Median element",
+      "Largest element",
+      "Last inserted element"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The maximum element is always stored at the root."
+  },
+  {
+    question: "What is the time complexity of finding the maximum element in a Max Heap?",
+    options: [
+      "O(log n)",
+      "O(n)",
+      "O(1)",
+      "O(n log n)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The largest element is at the root, so it can be accessed in constant time."
+  },
+  {
+    question: "After deleting the root from a Max Heap, which operation restores the heap property?",
+    options: [
+      "Heapify Up",
+      "Heapify Down",
+      "Binary Search",
+      "Tree Rotation"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Heapify Down restores the Max Heap property after removing the root."
+  },
+  {
+    question: "What is the worst-case time complexity of inserting an element into a Max Heap?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "The new element may move up to the root during Heapify Up."
+  },
+  {
+    question: "A Max Heap is commonly implemented using:",
+    options: [
+      "Linked List",
+      "Array",
+      "Hash Table",
+      "Graph"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "An array efficiently stores a complete binary tree."
+  },
+  {
+    question: "Which application commonly uses a Max Heap?",
+    options: [
+      "Priority Queue",
+      "Expression Tree",
+      "Trie",
+      "Binary Search"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Max Heaps are commonly used to implement Priority Queues."
+  },
+  {
+    question: "Which of the following is TRUE about a Max Heap?",
+    options: [
+      "It is always a Binary Search Tree",
+      "Sibling nodes are always sorted",
+      "Only the heap property is guaranteed",
+      "All levels are completely full"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Only the parent-child heap property is guaranteed; siblings are not necessarily ordered."
+  },
+  {
+    question: "The height of a Max Heap containing n elements is:",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "A complete binary tree has logarithmic height."
+  },
+  {
+    question: "Which sorting algorithm is based on a Max Heap?",
+    options: [
+      "Merge Sort",
+      "Quick Sort",
+      "Heap Sort",
+      "Insertion Sort"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Heap Sort repeatedly removes the maximum element from a Max Heap."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Heap (Max) Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/applications/quiz/heap-min-max/page.jsx b/src/app/visualizer/tree/applications/quiz/heap-min-max/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/applications/quiz/heap-min-max/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/applications/quiz/heap-min-max/quiz.jsx b/src/app/visualizer/tree/applications/quiz/heap-min-max/quiz.jsx
new file mode 100644
index 000000000..924f622ee
--- /dev/null
+++ b/src/app/visualizer/tree/applications/quiz/heap-min-max/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is a Heap?",
+    options: [
+      "A linear data structure",
+      "A complete binary tree that satisfies the heap property",
+      "A balanced BST",
+      "A graph"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "A Heap is a complete binary tree that satisfies either the Min Heap or Max Heap property."
+  },
+  {
+    question: "In a Min Heap, the value of the parent node is:",
+    options: [
+      "Greater than or equal to its children",
+      "Less than or equal to its children",
+      "Equal to its children",
+      "Always the largest element"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Every parent node in a Min Heap has a value less than or equal to its children."
+  },
+  {
+    question: "In a Max Heap, the root node contains:",
+    options: [
+      "The smallest element",
+      "The median element",
+      "The largest element",
+      "A random element"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The largest element is always stored at the root of a Max Heap."
+  },
+  {
+    question: "A Heap is implemented using:",
+    options: [
+      "Linked List",
+      "Array",
+      "Graph",
+      "Hash Table"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Heaps are efficiently represented using arrays because they are complete binary trees."
+  },
+  {
+    question: "The height of a Heap containing n nodes is:",
+    options: [
+      "O(n)",
+      "O(log n)",
+      "O(1)",
+      "O(n²)"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Since a Heap is a complete binary tree, its height is logarithmic."
+  },
+  {
+    question: "Insertion into a Heap requires:",
+    options: [
+      "Heapify Up",
+      "Heapify Down",
+      "DFS",
+      "Sorting"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "After insertion, Heapify Up restores the heap property."
+  },
+  {
+    question: "Deleting the root from a Heap requires:",
+    options: [
+      "Heapify Down",
+      "Heapify Up",
+      "Binary Search",
+      "Tree Rotation"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "After replacing the root with the last element, Heapify Down restores the heap property."
+  },
+  {
+    question: "Which Heap is commonly used for Priority Queues?",
+    options: [
+      "Min Heap",
+      "Max Heap",
+      "Both Min Heap and Max Heap",
+      "AVL Tree"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Priority Queues can be implemented using either Min Heaps or Max Heaps depending on the requirement."
+  },
+  {
+    question: "What is the time complexity of inserting into a Heap?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n log n)"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Insertion may require moving up the tree, taking O(log n)."
+  },
+  {
+    question: "Which of the following is NOT an application of Heaps?",
+    options: [
+      "Priority Queue",
+      "Heap Sort",
+      "Graph Algorithms",
+      "Binary Search"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "Binary Search operates on sorted arrays and does not use a Heap."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Heap (Min/Max) Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/applications/quiz/heap-sort/page.jsx b/src/app/visualizer/tree/applications/quiz/heap-sort/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/applications/quiz/heap-sort/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/applications/quiz/heap-sort/quiz.jsx b/src/app/visualizer/tree/applications/quiz/heap-sort/quiz.jsx
new file mode 100644
index 000000000..b5244c259
--- /dev/null
+++ b/src/app/visualizer/tree/applications/quiz/heap-sort/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the first step in the Heap Sort algorithm?",
+    options: [
+      "Build a Max Heap",
+      "Build a Min Heap",
+      "Sort the array",
+      "Reverse the array"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Heap Sort begins by converting the input array into a Max Heap."
+  },
+  {
+    question: "Heap Sort is based on which data structure?",
+    options: [
+      "Queue",
+      "Binary Heap",
+      "Trie",
+      "Graph"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Heap Sort uses a Binary Heap (typically a Max Heap) to sort elements."
+  },
+  {
+    question: "What is the worst-case time complexity of Heap Sort?",
+    options: [
+      "O(n²)",
+      "O(n log n)",
+      "O(log n)",
+      "O(n)"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Heap Sort performs heap construction and repeated heapify operations, resulting in O(n log n)."
+  },
+  {
+    question: "What is the best-case time complexity of Heap Sort?",
+    options: [
+      "O(n)",
+      "O(log n)",
+      "O(n log n)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Heap Sort has O(n log n) complexity in the best, average, and worst cases."
+  },
+  {
+    question: "Heap Sort sorts the array in ascending order by using:",
+    options: [
+      "Min Heap",
+      "Max Heap",
+      "AVL Tree",
+      "Trie"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "A Max Heap repeatedly places the largest element at the end of the array."
+  },
+  {
+    question: "Which operation is repeatedly performed after removing the root element?",
+    options: [
+      "Binary Search",
+      "Heapify Down",
+      "Tree Rotation",
+      "Insertion"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "After swapping the root with the last element, Heapify Down restores the heap property."
+  },
+  {
+    question: "Is Heap Sort a stable sorting algorithm?",
+    options: [
+      "Yes",
+      "No",
+      "Only for integers",
+      "Only for strings"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Heap Sort is not stable because equal elements may change their relative order."
+  },
+  {
+    question: "What is the auxiliary space complexity of Heap Sort?",
+    options: [
+      "O(n)",
+      "O(log n)",
+      "O(1)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Heap Sort is an in-place sorting algorithm and requires only constant extra space."
+  },
+  {
+    question: "Which of the following is an advantage of Heap Sort?",
+    options: [
+      "Stable sorting",
+      "Guaranteed O(n log n) performance",
+      "Requires additional arrays",
+      "Works only on linked lists"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Heap Sort guarantees O(n log n) performance regardless of input."
+  },
+  {
+    question: "Heap Sort is commonly used when:",
+    options: [
+      "Predictable worst-case performance is required",
+      "Only stable sorting is needed",
+      "The data is already sorted",
+      "Working exclusively with linked lists"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Heap Sort is useful when guaranteed O(n log n) worst-case time is important."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Heap Sort Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/applications/quiz/huffman-coding/page.jsx b/src/app/visualizer/tree/applications/quiz/huffman-coding/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/applications/quiz/huffman-coding/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/applications/quiz/huffman-coding/quiz.jsx b/src/app/visualizer/tree/applications/quiz/huffman-coding/quiz.jsx
new file mode 100644
index 000000000..e0ec1b2b3
--- /dev/null
+++ b/src/app/visualizer/tree/applications/quiz/huffman-coding/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the primary purpose of Huffman Coding?",
+    options: [
+      "Sorting numbers",
+      "Data compression",
+      "Searching trees",
+      "Balancing binary trees"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Huffman Coding is a lossless data compression algorithm that assigns variable-length codes to characters."
+  },
+  {
+    question: "Huffman Coding is based on which type of binary tree?",
+    options: [
+      "Binary Search Tree",
+      "AVL Tree",
+      "Huffman Tree",
+      "Segment Tree"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "A Huffman Tree is a binary tree specifically constructed for optimal prefix coding."
+  },
+  {
+    question: "Which characters receive shorter binary codes in Huffman Coding?",
+    options: [
+      "Least frequent characters",
+      "Most frequent characters",
+      "All characters receive equal-length codes",
+      "Random characters"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Frequently occurring characters receive shorter codes to reduce the total encoded size."
+  },
+  {
+    question: "Which data structure is commonly used while constructing a Huffman Tree?",
+    options: [
+      "Stack",
+      "Queue",
+      "Priority Queue (Min Heap)",
+      "Hash Table"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "A Min Heap (Priority Queue) efficiently selects the two nodes with the lowest frequencies."
+  },
+  {
+    question: "What type of compression does Huffman Coding provide?",
+    options: [
+      "Lossy",
+      "Lossless",
+      "Hybrid",
+      "Encrypted"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Huffman Coding is a lossless compression technique, allowing the original data to be perfectly reconstructed."
+  },
+  {
+    question: "The Huffman Tree is built by repeatedly combining:",
+    options: [
+      "The two largest frequency nodes",
+      "The root and leaf nodes",
+      "The two smallest frequency nodes",
+      "Random nodes"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "The two nodes with the smallest frequencies are merged until only one tree remains."
+  },
+  {
+    question: "What property do Huffman Codes satisfy?",
+    options: [
+      "Balanced Property",
+      "Prefix Property",
+      "Heap Property",
+      "BST Property"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "No Huffman code is a prefix of another, ensuring unique decoding."
+  },
+  {
+    question: "Which algorithmic strategy is used in Huffman Coding?",
+    options: [
+      "Dynamic Programming",
+      "Greedy Algorithm",
+      "Divide and Conquer",
+      "Backtracking"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Huffman Coding uses a greedy strategy by repeatedly combining the least frequent nodes."
+  },
+  {
+    question: "Where is Huffman Coding commonly used?",
+    options: [
+      "JPEG",
+      "ZIP Compression",
+      "PNG",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "Huffman Coding is widely used in file compression formats such as ZIP, PNG, and JPEG."
+  },
+  {
+    question: "What is the time complexity of building a Huffman Tree using a Min Heap?",
+    options: [
+      "O(n)",
+      "O(log n)",
+      "O(n log n)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation:
+      "Building the Huffman Tree requires repeated heap operations, resulting in O(n log n) complexity."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Huffman Coding Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/applications/quiz/page.jsx b/src/app/visualizer/tree/applications/quiz/page.jsx
new file mode 100644
index 000000000..2e19e1804
--- /dev/null
+++ b/src/app/visualizer/tree/applications/quiz/page.jsx
@@ -0,0 +1,5 @@
+import TreeApplicationsQuizClient from "./TreeApplicationsQuizClient";
+
+export default function Page() {
+  return <TreeApplicationsQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/applications/quiz/syntax-trees/page.jsx b/src/app/visualizer/tree/applications/quiz/syntax-trees/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/applications/quiz/syntax-trees/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/applications/quiz/syntax-trees/quiz.jsx b/src/app/visualizer/tree/applications/quiz/syntax-trees/quiz.jsx
new file mode 100644
index 000000000..883c33158
--- /dev/null
+++ b/src/app/visualizer/tree/applications/quiz/syntax-trees/quiz.jsx
@@ -0,0 +1,135 @@
+"use client";
+
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is a Syntax Tree primarily used for?",
+    options: [
+      "Sorting data",
+      "Representing the syntactic structure of source code",
+      "Compressing files",
+      "Managing databases"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "A Syntax Tree represents the grammatical structure of source code according to a programming language's syntax."
+  },
+  {
+    question: "Another common name for a Syntax Tree is:",
+    options: [
+      "Binary Heap",
+      "Abstract Syntax Tree (AST)",
+      "Trie",
+      "AVL Tree"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Syntax Trees are commonly referred to as Abstract Syntax Trees (ASTs)."
+  },
+  {
+    question: "Which software component typically generates a Syntax Tree?",
+    options: [
+      "Compiler Parser",
+      "Database Engine",
+      "Operating System",
+      "Web Browser"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "The parser phase of a compiler constructs the Abstract Syntax Tree after lexical analysis."
+  },
+  {
+    question: "In a Syntax Tree, internal nodes usually represent:",
+    options: [
+      "Variables only",
+      "Operators or language constructs",
+      "Comments",
+      "Memory addresses"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Internal nodes represent operations, expressions, or programming language constructs."
+  },
+  {
+    question: "Leaf nodes in a Syntax Tree generally represent:",
+    options: [
+      "Operators",
+      "Operands such as identifiers or constants",
+      "Functions",
+      "Loops"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Leaf nodes usually store identifiers, literals, or constants."
+  },
+  {
+    question: "Which compiler phase uses the Syntax Tree for semantic analysis?",
+    options: [
+      "Lexical Analysis",
+      "Semantic Analysis",
+      "Linking",
+      "Loading"
+    ],
+    correctAnswer: 1,
+    explanation:
+      "Semantic analysis operates on the AST to perform type checking and validate program correctness."
+  },
+  {
+    question: "Syntax Trees are widely used in:",
+    options: [
+      "Compilers and Interpreters",
+      "Computer Networks",
+      "Operating Systems",
+      "Database Indexing"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "Compilers and interpreters rely on Syntax Trees for code analysis and optimization."
+  },
+  {
+    question: "Which compiler phase typically follows Syntax Tree construction?",
+    options: [
+      "Semantic Analysis",
+      "Power Management",
+      "Memory Allocation",
+      "File Compression"
+    ],
+    correctAnswer: 0,
+    explanation:
+      "After parsing builds the AST, semantic analysis verifies the program before optimization."
+  },
+  {
+    question: "What is one major advantage of using an Abstract Syntax Tree?",
+    options: [
+      "It reduces program size automatically.",
+      "It simplifies code analysis and optimization.",
+      "It stores data permanently.",
+      "It replaces machine code."
+    ],
+    correctAnswer: 1,
+    explanation:
+      "ASTs provide a structured representation that makes optimization and code generation easier."
+  },
+  {
+    question: "Syntax Trees are commonly used in:",
+    options: [
+      "Compiler Design",
+      "Code Optimization",
+      "Static Code Analysis",
+      "All of the above"
+    ],
+    correctAnswer: 3,
+    explanation:
+      "Syntax Trees are fundamental in compiler design, optimization, and static analysis tools."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Syntax Trees Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/applications/syntax-trees/AlgorithmClient.jsx b/src/app/visualizer/tree/applications/syntax-trees/AlgorithmClient.jsx
new file mode 100644
index 000000000..7bc024edf
--- /dev/null
+++ b/src/app/visualizer/tree/applications/syntax-trees/AlgorithmClient.jsx
@@ -0,0 +1,43 @@
+import Animation from "./animation";
+import Content from "./content";
+import CodeBlock from "./codeBlock";
+import Quiz from "./quiz";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+
+
+
+export default function SyntaxTreesPage() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Applications", "Syntax Trees")}
+      title="Syntax Trees"
+      animation={<Animation />}
+      content={<Content />}
+      code={<CodeBlock />}
+      quiz={<Quiz />}
+      moduleCard={
+        <ModuleCard
+          moduleId={MODULE_MAPS.syntaxTrees}
+          description="Mark Syntax Trees as done and track your progress"
+          initialDone={false}
+        />
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other Tree Applications"
+          links={[
+            { text: "Heap Sort", description: "Efficient sorting algorithm based on binary heap.", url: "./heapsort" },
+            { text: "Huffman Coding", description: "Data compression using Huffman Trees.", url: "./huffman" },
+            { text: "Decision Trees", description: "Machine learning decision-making workflows.", url: "./decision-trees" },
+          ]}
+          columns="3"
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/applications/syntax-trees/animation.jsx b/src/app/visualizer/tree/applications/syntax-trees/animation.jsx
new file mode 100644
index 000000000..fb5cd3dfd
--- /dev/null
+++ b/src/app/visualizer/tree/applications/syntax-trees/animation.jsx
@@ -0,0 +1,255 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import { Play, RotateCcw, Info, RefreshCw } from "lucide-react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import usePlayback from "@/app/hooks/usePlayback";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+
+export default function SyntaxTreesAnimation() {
+  const [animating, setAnimating] = useState(false);
+  const [message, setMessage] = useState("Click 'Evaluate AST' to evaluate: 3 + (5 * 2)");
+  
+  const [steps, setSteps] = useState([]);
+  const [currentStepIdx, setCurrentStepIdx] = useState(-1);
+  const { speed, setSpeed } = usePlayback(1);
+  const timerRef = useRef(null);
+  useVisualizerReset(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setAnimating(false);
+    setMessage("...");
+    setSteps([]);
+    setCurrentStepIdx(-1);
+  });
+
+  // Derived state from steps
+  const currentStep = steps[currentStepIdx] || null;
+  const activeNode = currentStep ? currentStep.activeNode : null;
+  const activeEdge = currentStep ? currentStep.activeEdge : null;
+  const nodeValues = currentStep && currentStep.nodeValues ? currentStep.nodeValues : { N1: "?", N2: "3", N3: "?", N4: "5", N5: "2" };
+
+
+  useEffect(() => {
+    if (currentStep) {
+      setMessage(currentStep.message);
+    }
+  }, [currentStep]);
+
+  useEffect(() => {
+    if (!animating || steps.length === 0) return;
+    if (currentStepIdx >= steps.length - 1) { setAnimating(false); return; }
+    timerRef.current = setTimeout(() => setCurrentStepIdx(p => p + 1), 1600 / speed);
+    return () => { if (timerRef.current) clearTimeout(timerRef.current); };
+  }, [animating, currentStepIdx, steps, speed]);
+
+  const pauseVisualizer = () => { setAnimating(false); if (timerRef.current) clearTimeout(timerRef.current); };
+  const startVisualizer = () => {
+    if (steps.length === 0) return;
+    setAnimating(true);
+    const nextIdx = currentStepIdx === -1 || currentStepIdx >= steps.length - 1 ? 0 : currentStepIdx + 1;
+    setCurrentStepIdx(nextIdx);
+  };
+  const stepForward = () => { setAnimating(false); if (currentStepIdx < steps.length - 1) setCurrentStepIdx(p => p + 1); };
+  const stepBackward = () => { setAnimating(false); if (currentStepIdx > 0) setCurrentStepIdx(p => p - 1); };
+  const resetPlayback = () => {
+    setAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setCurrentStepIdx(-1);
+    setMessage("Playback reset.");
+  };
+
+  const evaluateAST = () => {
+    setAnimating(false);
+    const newSteps = [];
+    
+    let vals = { N1: "?", N2: "3", N3: "?", N4: "5", N5: "2" };
+
+    newSteps.push({
+      activeNode: null, activeEdge: null, nodeValues: { ...vals },
+      message: "Starting Post-Order Traversal to evaluate AST..."
+    });
+
+    newSteps.push({
+      activeNode: "N2", activeEdge: "E1", nodeValues: { ...vals },
+      message: "Visiting left leaf node: 3. Return 3."
+    });
+
+    newSteps.push({
+      activeNode: "N3", activeEdge: "E2", nodeValues: { ...vals },
+      message: "Visiting right subtree (*). Must evaluate its children first."
+    });
+
+    newSteps.push({
+      activeNode: "N4", activeEdge: "E3", nodeValues: { ...vals },
+      message: "Visiting left leaf node: 5. Return 5."
+    });
+
+    newSteps.push({
+      activeNode: "N5", activeEdge: "E4", nodeValues: { ...vals },
+      message: "Visiting right leaf node: 2. Return 2."
+    });
+
+    vals = { ...vals, N3: "10" };
+    newSteps.push({
+      activeNode: "N3", activeEdge: null, nodeValues: { ...vals },
+      message: "Evaluating Node (*): 5 * 2 = 10."
+    });
+
+    vals = { ...vals, N1: "13" };
+    newSteps.push({
+      activeNode: "N1", activeEdge: null, nodeValues: { ...vals },
+      message: "Evaluating Root (+): 3 + 10 = 13."
+    });
+
+    newSteps.push({
+      activeNode: null, activeEdge: null, nodeValues: { ...vals },
+      message: "AST Evaluation Complete. Final Result: 13."
+    });
+
+    setSteps(newSteps);
+    setCurrentStepIdx(0);
+    setAnimating(true);
+  };
+
+  const handleReset = () => {
+    setAnimating(false);
+    setSteps([]);
+    setCurrentStepIdx(-1);
+    setMessage("Click 'Evaluate AST' to evaluate: 3 + (5 * 2)");
+  };
+
+  useVisualizerKeyboard({
+    onStepForward: stepForward,
+    onStepBackward: stepBackward,
+    onTogglePlay: animating ? pauseVisualizer : startVisualizer,
+    onReset: resetPlayback,
+    onSpeedChange: setSpeed,
+    speed: speed,
+    sorting: animating,
+    sorted: false,
+    enabled: true,
+  });
+
+  const getNodeFill = (id, isLeaf) => {
+    if (activeNode === id) return "#a435f0";
+    if (nodeValues[id] !== "?") return "var(--background)";
+    return isLeaf ? "var(--background)" : "var(--background)";
+  };
+
+  const getStroke = (id) => {
+    if (activeNode === id) return "#d38cff";
+    if (nodeValues[id] !== "?") return "#a435f0";
+    return "#64748b";
+  };
+  
+  const getTextColor = (id) => {
+    if (activeNode === id) return "#ffffff";
+    return "var(--foreground)";
+  };
+
+  return (
+    <VisualizerInteractiveLayout>
+      <VisualizerCard>
+        <div className="flex justify-between items-center mb-6">
+          <div className="text-sm font-bold text-gray-700 dark:text-gray-300">Expression: 3 + (5 * 2)</div>
+          <div className="flex items-center gap-3">
+            <button 
+              onClick={evaluateAST} 
+              disabled={animating || nodeValues.N1 !== "?"}
+              className="flex items-center gap-2 px-6 py-2.5 text-sm font-bold bg-[#a435f0] hover:bg-[#8f2cd6] disabled:opacity-50 text-white rounded-xl transition-all shadow-md"
+            >
+              <Play className="w-4 h-4" /> Evaluate AST
+            </button>
+            <button 
+              onClick={handleReset} 
+              className="px-4 py-2.5 text-sm font-bold text-red-500 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-xl transition-all border border-red-500/30 flex items-center gap-2"
+            >
+              <RefreshCw className="w-4 h-4" /> Reset
+            </button>
+          </div>
+        </div>
+
+        <PlaybackControls 
+          isPlaying={animating}
+          onPlayPause={animating ? pauseVisualizer : startVisualizer}
+          onStepForward={stepForward}
+          onStepBackward={stepBackward}
+          onReset={resetPlayback}
+          speed={speed}
+          onSpeedChange={setSpeed}
+          disabled={steps.length === 0}
+          showPlayPause={true}
+        />
+      </VisualizerCard>
+
+      <VisualizerCard
+        className={
+          message.includes("Complete") 
+            ? "border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30"
+            : animating
+                ? "border-[#a435f0]/30 bg-[#a435f0]/10 dark:border-[#a435f0]/50 dark:bg-[#a435f0]/20"
+                : ""
+        }
+      >
+        <div className="flex items-center text-xs text-gray-500 font-semibold gap-1.5 mb-2">
+          <Info className="w-4 h-4 text-[#a435f0]" /> Animation Status
+          <span className="ml-auto font-bold bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-gray-600 dark:text-gray-400">
+            Step {currentStepIdx !== -1 ? currentStepIdx + 1 : 0} / {steps.length || 0}
+          </span>
+        </div>
+        <div className="text-lg font-medium min-h-[28px]">{message}</div>
+      </VisualizerCard>
+
+      <VisualizerCard>
+        <div className="overflow-auto flex justify-center py-6 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 relative min-h-[350px]">
+          <svg width="500" height="300" viewBox="0 0 500 300" className="max-w-full h-auto drop-shadow-sm">
+            {/* Edges */}
+            <g>
+              <line x1="250" y1="50" x2="150" y2="120" stroke={activeEdge === "E1" ? "#a435f0" : "#cbd5e1"} strokeWidth={activeEdge === "E1" ? "4" : "2"} className="transition-all duration-500 dark:stroke-slate-700" />
+              <line x1="250" y1="50" x2="350" y2="120" stroke={activeEdge === "E2" ? "#a435f0" : "#cbd5e1"} strokeWidth={activeEdge === "E2" ? "4" : "2"} className="transition-all duration-500 dark:stroke-slate-700" />
+              <line x1="350" y1="120" x2="280" y2="190" stroke={activeEdge === "E3" ? "#a435f0" : "#cbd5e1"} strokeWidth={activeEdge === "E3" ? "4" : "2"} className="transition-all duration-500 dark:stroke-slate-700" />
+              <line x1="350" y1="120" x2="420" y2="190" stroke={activeEdge === "E4" ? "#a435f0" : "#cbd5e1"} strokeWidth={activeEdge === "E4" ? "4" : "2"} className="transition-all duration-500 dark:stroke-slate-700" />
+            </g>
+
+            {/* Nodes */}
+            <g className="transition-all duration-500">
+              {activeNode === "N1" && <circle cx="250" cy="50" r="32" fill="none" className="stroke-purple-300 dark:stroke-purple-400" strokeWidth="2" strokeDasharray="4,2" className="animate-spin-slow opacity-80" />}
+              <circle cx="250" cy="50" r="24" fill={getNodeFill("N1", false)} stroke={getStroke("N1")} strokeWidth="2.5" className="shadow-sm transition-all duration-500" />
+              <text x="250" y="55" textAnchor="middle" fill={getTextColor("N1")} fontSize="16" fontWeight="bold">+</text>
+              <text x="250" y="90" textAnchor="middle" className="fill-gray-500 dark:fill-gray-400" fontSize="12" fontWeight="bold">{nodeValues.N1}</text>
+            </g>
+
+            <g className="transition-all duration-500">
+              {activeNode === "N2" && <circle cx="150" cy="120" r="32" fill="none" className="stroke-purple-300 dark:stroke-purple-400" strokeWidth="2" strokeDasharray="4,2" className="animate-spin-slow opacity-80" />}
+              <circle cx="150" cy="120" r="24" fill={getNodeFill("N2", true)} stroke={getStroke("N2")} strokeWidth="2.5" className="shadow-sm transition-all duration-500" />
+              <text x="150" y="125" textAnchor="middle" fill={getTextColor("N2")} fontSize="14" fontWeight="bold">3</text>
+            </g>
+
+            <g className="transition-all duration-500">
+              {activeNode === "N3" && <circle cx="350" cy="120" r="32" fill="none" className="stroke-purple-300 dark:stroke-purple-400" strokeWidth="2" strokeDasharray="4,2" className="animate-spin-slow opacity-80" />}
+              <circle cx="350" cy="120" r="24" fill={getNodeFill("N3", false)} stroke={getStroke("N3")} strokeWidth="2.5" className="shadow-sm transition-all duration-500" />
+              <text x="350" y="125" textAnchor="middle" fill={getTextColor("N3")} fontSize="16" fontWeight="bold">*</text>
+              <text x="350" y="160" textAnchor="middle" className="fill-gray-500 dark:fill-gray-400" fontSize="12" fontWeight="bold">{nodeValues.N3}</text>
+            </g>
+
+            <g className="transition-all duration-500">
+              {activeNode === "N4" && <circle cx="280" cy="190" r="32" fill="none" className="stroke-purple-300 dark:stroke-purple-400" strokeWidth="2" strokeDasharray="4,2" className="animate-spin-slow opacity-80" />}
+              <circle cx="280" cy="190" r="24" fill={getNodeFill("N4", true)} stroke={getStroke("N4")} strokeWidth="2.5" className="shadow-sm transition-all duration-500" />
+              <text x="280" y="195" textAnchor="middle" fill={getTextColor("N4")} fontSize="14" fontWeight="bold">5</text>
+            </g>
+
+            <g className="transition-all duration-500">
+              {activeNode === "N5" && <circle cx="420" cy="190" r="32" fill="none" className="stroke-purple-300 dark:stroke-purple-400" strokeWidth="2" strokeDasharray="4,2" className="animate-spin-slow opacity-80" />}
+              <circle cx="420" cy="190" r="24" fill={getNodeFill("N5", true)} stroke={getStroke("N5")} strokeWidth="2.5" className="shadow-sm transition-all duration-500" />
+              <text x="420" y="195" textAnchor="middle" fill={getTextColor("N5")} fontSize="14" fontWeight="bold">2</text>
+            </g>
+          </svg>
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+}
diff --git a/src/app/visualizer/tree/applications/syntax-trees/codeBlock.jsx b/src/app/visualizer/tree/applications/syntax-trees/codeBlock.jsx
new file mode 100644
index 000000000..2ff9d2941
--- /dev/null
+++ b/src/app/visualizer/tree/applications/syntax-trees/codeBlock.jsx
@@ -0,0 +1,72 @@
+"use client";
+import SharedCodeBlock from "@/app/components/ui/SharedCodeBlock";
+
+export default function SyntaxTreesCodeBlock() {
+  const codeExamples = {
+    javascript: `// A simple AST Node and Evaluator in JS
+class ASTNode {
+  constructor(value, left = null, right = null) {
+    this.value = value;
+    this.left = left;
+    this.right = right;
+  }
+}
+
+function evaluateAST(node) {
+  // If it's a leaf node (a number), return its numeric value
+  if (!node.left && !node.right) {
+    return parseFloat(node.value);
+  }
+
+  // Evaluate left and right subtrees
+  const leftVal = evaluateAST(node.left);
+  const rightVal = evaluateAST(node.right);
+
+  // Apply the operator
+  switch (node.value) {
+    case '+': return leftVal + rightVal;
+    case '-': return leftVal - rightVal;
+    case '*': return leftVal * rightVal;
+    case '/': return leftVal / rightVal;
+    default: throw new Error("Unknown operator " + node.value);
+  }
+}
+
+// Representing the expression: 3 + (5 * 2)
+const root = new ASTNode('+', 
+  new ASTNode('3'),
+  new ASTNode('*', new ASTNode('5'), new ASTNode('2'))
+);
+
+console.log("Result:", evaluateAST(root)); // Output: 13`,
+    python: `class ASTNode:
+    def __init__(self, value, left=None, right=None):
+        self.value = value
+        self.left = left
+        self.right = right
+
+def evaluate_ast(node):
+    if not node.left and not node.right:
+        return float(node.value)
+        
+    left_val = evaluate_ast(node.left)
+    right_val = evaluate_ast(node.right)
+    
+    if node.value == '+': return left_val + right_val
+    if node.value == '-': return left_val - right_val
+    if node.value == '*': return left_val * right_val
+    if node.value == '/': return left_val / right_val
+    
+    raise ValueError(f"Unknown operator {node.value}")
+
+# Expression: 3 + (5 * 2)
+root = ASTNode('+',
+    ASTNode('3'),
+    ASTNode('*', ASTNode('5'), ASTNode('2'))
+)
+
+print("Result:", evaluate_ast(root)) # Output: 13.0`
+  };
+
+  return <SharedCodeBlock title="AST Evaluation Code" codeExamples={codeExamples} color="text-purple-500" />;
+}
diff --git a/src/app/visualizer/tree/applications/syntax-trees/content.jsx b/src/app/visualizer/tree/applications/syntax-trees/content.jsx
new file mode 100644
index 000000000..36bcf95b0
--- /dev/null
+++ b/src/app/visualizer/tree/applications/syntax-trees/content.jsx
@@ -0,0 +1,131 @@
+"use client";
+import { Network, Terminal, Code2, Lightbulb } from "lucide-react";
+
+const SyntaxTreesContent = () => {
+  return (
+    <main className="max-w-4xl mx-auto mt-8 mb-8">
+      <article className="bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] overflow-hidden shadow-lg shadow-purple-500/5">
+        
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            What are Syntax Trees?
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] leading-relaxed space-y-4">
+            <p>
+              An Abstract Syntax Tree (AST), or just Syntax Tree, is a tree representation of the abstract syntactic structure of source code written in a programming language. Each node of the tree denotes a construct occurring in the source code.
+            </p>
+            <p>
+              ASTs are widely used in compilers to check code for accuracy (syntax analysis) and to convert the code into machine language or intermediate code (code generation). They are &quot;abstract&quot; because they do not represent every detail appearing in the real syntax, but rather just the structural or content-related details.
+            </p>
+          </div>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e] bg-purple-50/30 dark:bg-purple-900/5">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            Visual Example
+          </h2>
+          <div className="flex justify-center my-6">
+            <svg width="400" height="250" viewBox="0 0 400 250" className="drop-shadow-lg">
+              <line x1="200" y1="50" x2="100" y2="120" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="200" y1="50" x2="300" y2="120" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="300" y1="120" x2="250" y2="190" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <line x1="300" y1="120" x2="350" y2="190" className="stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+
+              <circle cx="200" cy="50" r="24" className="fill-purple-100 dark:fill-purple-900 stroke-purple-500 dark:stroke-purple-400" strokeWidth="3" />
+              <text x="200" y="55" textAnchor="middle" fill="white" fontSize="16" fontWeight="bold">+</text>
+              
+              <circle cx="100" cy="120" r="24" className="fill-white dark:fill-slate-900 stroke-slate-300 dark:stroke-slate-600" strokeWidth="2" />
+              <text x="100" y="125" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">3</text>
+              
+              <circle cx="300" cy="120" r="24" className="fill-purple-100 dark:fill-purple-900 stroke-purple-500 dark:stroke-purple-400" strokeWidth="2" />
+              <text x="300" y="125" textAnchor="middle" fill="white" fontSize="16" fontWeight="bold">*</text>
+              
+              <circle cx="250" cy="190" r="24" className="fill-purple-50 dark:fill-indigo-950 stroke-purple-500 dark:stroke-purple-400" strokeWidth="2" />
+              <text x="250" y="195" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">5</text>
+              
+              <circle cx="350" cy="190" r="24" className="fill-purple-50 dark:fill-indigo-950 stroke-purple-500 dark:stroke-purple-400" strokeWidth="2" />
+              <text x="350" y="195" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">2</text>
+            </svg>
+          </div>
+          <p className="text-center text-sm text-gray-500 dark:text-gray-400">
+            An Abstract Syntax Tree for the expression: <code className="bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded">3 + (5 * 2)</code>
+          </p>
+        </section>
+
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-purple-500 mr-3 rounded-full"></span>
+            How It Works in Compilers
+          </h2>
+          <div className="prose dark:prose-invert max-w-none text-[#374151] dark:text-[#d1d5db] space-y-4 leading-relaxed">
+            <div className="mt-6 grid gap-4">
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-purple-50/30 dark:from-neutral-900 dark:to-purple-950/20 border-purple-100 dark:border-purple-900/50 hover:shadow-md hover:border-purple-300 dark:hover:border-purple-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-purple-100 dark:bg-purple-900/60 p-2 rounded-lg text-purple-600 dark:text-purple-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <Terminal className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">1. Lexical Analysis</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      Source code is converted into a stream of tokens. For example, <code>3 + 5</code> becomes tokens: <code>NUMBER(3)</code>, <code>PLUS</code>, <code>NUMBER(5)</code>.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-purple-50/30 dark:from-neutral-900 dark:to-purple-950/20 border-purple-100 dark:border-purple-900/50 hover:shadow-md hover:border-purple-300 dark:hover:border-purple-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-purple-100 dark:bg-purple-900/60 p-2 rounded-lg text-purple-600 dark:text-purple-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <Network className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">2. Syntax Analysis (Parsing)</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      The parser takes the tokens and arranges them into an Abstract Syntax Tree based on the rules of the programming language&apos;s grammar.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="group relative p-5 rounded-2xl border bg-gradient-to-br from-white to-purple-50/30 dark:from-neutral-900 dark:to-purple-950/20 border-purple-100 dark:border-purple-900/50 hover:shadow-md hover:border-purple-300 dark:hover:border-purple-700 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="bg-purple-100 dark:bg-purple-900/60 p-2 rounded-lg text-purple-600 dark:text-purple-400 mt-1 shadow-sm group-hover:scale-110 transition-transform">
+                    <Code2 className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="font-bold text-lg mb-1 text-[#1a1a1a] dark:text-white">3. Evaluation or Compilation</p>
+                    <p className="text-sm text-[#6b7280] dark:text-[#9ca3af] leading-relaxed">
+                      The AST is traversed (usually post-order) to evaluate the result (in interpreters) or generate target machine code (in compilers).
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="p-6 border-t border-[#f3f4f6] dark:border-[#1e1e1e] bg-gradient-to-r from-purple-50 to-white dark:from-purple-950/20 dark:to-neutral-950">
+          <div className="flex items-start gap-4">
+            <div className="mt-1 bg-purple-100 dark:bg-purple-900/50 p-2.5 rounded-xl shadow-sm text-purple-600 dark:text-purple-400">
+              <Lightbulb className="w-6 h-6" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold text-purple-900 dark:text-purple-300 mb-2">
+                Key Takeaways
+              </h2>
+              <ul className="list-disc pl-5 space-y-2 text-sm text-purple-800 dark:text-purple-200/80 leading-relaxed">
+                <li>Operator precedence is naturally enforced by the structure of the AST (operators lower in the tree are evaluated first).</li>
+                <li>ASTs strip away syntax details like parentheses, semi-colons, and whitespace that aren&apos;t strictly necessary for execution.</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+      </article>
+    </main>
+  );
+};
+
+export default SyntaxTreesContent;
diff --git a/src/app/visualizer/tree/applications/syntax-trees/quiz.jsx b/src/app/visualizer/tree/applications/syntax-trees/quiz.jsx
new file mode 100644
index 000000000..da908ea6f
--- /dev/null
+++ b/src/app/visualizer/tree/applications/syntax-trees/quiz.jsx
@@ -0,0 +1,45 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const handleNext = () => {
+  const questions = [
+  {
+    "question": "What is an Abstract Syntax Tree (AST)?",
+    "options": [
+      "A tree containing all whitespace and comments from source code",
+      "A tree representation of the structural meaning of source code",
+      "A tree used only for sorting algorithms",
+      "A tree used to store compiled machine code directly"
+    ],
+    "correctAnswer": 1,
+    "explanation": "An AST represents the abstract syntactic structure of source code, ignoring unnecessary syntax like braces and whitespace."
+  },
+  {
+    "question": "Which phase of a compiler is responsible for creating an AST?",
+    "options": [
+      "Lexical Analysis",
+      "Code Generation",
+      "Syntax Analysis (Parsing)",
+      "Optimization"
+    ],
+    "correctAnswer": 2,
+    "explanation": "The parsing (Syntax Analysis) phase takes the tokens generated by lexical analysis and arranges them into an AST based on the language's grammar rules."
+  },
+  {
+    "question": "In an AST representing mathematical expressions, what do the leaf nodes typically represent?",
+    "options": [
+      "Operators (like +, -, *, /)",
+      "Operands (like numbers or variables)",
+      "Syntax symbols (like parentheses)",
+      "Function calls"
+    ],
+    "correctAnswer": 1,
+    "explanation": "Leaf nodes in an expression AST typically contain the operands (values), while internal nodes contain the operators."
+  }
+];
+
+  return <QuizEngine title="Syntax Trees Quiz" questions={questions} />;
+};
+
+export default handleNext;
diff --git a/src/app/visualizer/tree/avl/TreeAVLVisualizer.jsx b/src/app/visualizer/tree/avl/TreeAVLVisualizer.jsx
new file mode 100644
index 000000000..987bb8dc2
--- /dev/null
+++ b/src/app/visualizer/tree/avl/TreeAVLVisualizer.jsx
@@ -0,0 +1,559 @@
+"use client";
+import React, { useEffect, useRef, useState, useCallback } from "react";
+import Footer from "@/app/components/footer";
+import usePlayback from "@/app/hooks/usePlayback";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
+import { createVisualizerPaths } from "@/app/visualizer/components/VisualizerPageLayout";
+import { insertAVL, deleteAVL } from "./avlUtils";
+import { Info, Layers, AlertCircle } from "lucide-react";
+import { CustomInputPanel } from "@/app/visualizer/components/CustomInputPanel";
+
+const nodeRadius = 21;
+
+const calculateCoordinates = (node, currentStep, x = 400, y = 60, level = 0, nodesList = [], edgesList = []) => {
+  if (!node) return { nodesList, edgesList };
+
+  const xOffset = 260 / Math.pow(2, level);
+  const yOffset = 80;
+
+  const highlightedState = currentStep?.highlightedNodes?.[node.value] || null;
+
+  nodesList.push({
+    value: node.value,
+    x,
+    y,
+    state: highlightedState,
+    isVisited: currentStep?.visited?.includes(node.value) || false,
+    height: node.height,
+    balanceFactor: node.balanceFactor,
+  });
+
+  if (node.left) {
+    const leftX = x - xOffset;
+    const leftY = y + yOffset;
+    edgesList.push({
+      x1: x,
+      y1: y + nodeRadius,
+      x2: leftX,
+      y2: leftY - nodeRadius,
+    });
+    calculateCoordinates(node.left, currentStep, leftX, leftY, level + 1, nodesList, edgesList);
+  }
+
+  if (node.right) {
+    const rightX = x + xOffset;
+    const rightY = y + yOffset;
+    edgesList.push({
+      x1: x,
+      y1: y + nodeRadius,
+      x2: rightX,
+      y2: rightY - nodeRadius,
+    });
+    calculateCoordinates(node.right, currentStep, rightX, rightY, level + 1, nodesList, edgesList);
+  }
+
+  return { nodesList, edgesList };
+};
+
+export default function TreeAVLVisualizer({ initialMode = "avl" }) {
+  const mode = initialMode === "avl" ? initialMode : "avl";
+  const [root, setRoot] = useState(null);
+  const [targetTreeRoot, setTargetTreeRoot] = useState(null);
+  const [inputValue, setInputValue] = useState("");
+  const [steps, setSteps] = useState([]);
+  const [currentStepIdx, setCurrentStepIdx] = useState(-1);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [message, setMessage] = useState("Insert nodes to build an AVL tree.");
+  const [operationLabel, setOperationLabel] = useState(mode.toUpperCase());
+  const timerRef = useRef(null);
+  const lockRef = useRef(false);
+  const stepIdxRef = useRef(currentStepIdx);
+  const isAnimatingRef = useRef(isAnimating);
+  const { speed, setSpeed } = usePlayback(1);
+
+  useEffect(() => { stepIdxRef.current = currentStepIdx; }, [currentStepIdx]);
+  useEffect(() => { isAnimatingRef.current = isAnimating; }, [isAnimating]);
+
+  const resetPlayback = useCallback(() => {
+    setIsAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    lockRef.current = false;
+    setSteps([]);
+    setCurrentStepIdx(-1);
+  }, []);
+
+  const clearTree = useCallback(() => {
+    resetPlayback();
+    setRoot(null);
+    setTargetTreeRoot(null);
+    setInputValue("");
+    setMessage("AVL tree cleared.");
+  }, [resetPlayback]);
+
+  const handleCustomTreeInput = useCallback((parsedArray) => {
+    if (parsedArray === null) {
+      clearTree();
+    } else {
+      resetPlayback();
+      let newRoot = null;
+      parsedArray.forEach(val => {
+        const nextSteps = [];
+        const result = insertAVL(newRoot, val, nextSteps);
+        newRoot = result.root;
+      });
+      setRoot(newRoot);
+      setTargetTreeRoot(newRoot);
+      setMessage(`Generated custom AVL tree with ${parsedArray.length} nodes.`);
+    }
+  }, [clearTree, resetPlayback]);
+
+  const applySteps = useCallback((nextRoot, nextSteps, label) => {
+    if (!nextSteps || nextSteps.length === 0) {
+      setMessage("No animation steps were generated.");
+      return;
+    }
+
+    setTargetTreeRoot(nextRoot);
+    setSteps(nextSteps);
+    setCurrentStepIdx(0);
+    setIsAnimating(true);
+    setOperationLabel(label);
+  }, []);
+
+  const handleInsert = useCallback(() => {
+    const value = parseInt(inputValue, 10);
+    if (Number.isNaN(value)) {
+      setMessage("Please enter a valid number to insert.");
+      return;
+    }
+
+    resetPlayback();
+    const nextSteps = [];
+    const result = insertAVL(root, value, nextSteps);
+    setInputValue("");
+    setMessage(`Inserting ${value} into the AVL tree...`);
+    applySteps(result.root, nextSteps, `Insert ${value}`);
+  }, [applySteps, inputValue, resetPlayback, root]);
+
+  const handleDelete = useCallback(() => {
+    const value = parseInt(inputValue, 10);
+    if (Number.isNaN(value)) {
+      setMessage("Please enter a valid number to delete.");
+      return;
+    }
+
+    if (!root) {
+      setMessage("The AVL tree is empty.");
+      return;
+    }
+
+    resetPlayback();
+    const nextSteps = [];
+    const result = deleteAVL(root, value, nextSteps);
+    setInputValue("");
+    setMessage(`Deleting ${value} from the AVL tree...`);
+    applySteps(result.root, nextSteps, `Delete ${value}`);
+  }, [applySteps, inputValue, resetPlayback, root]);
+
+  const startVisualizer = useCallback(() => {
+    if (steps.length === 0) {
+      setMessage("Insert or delete a value first to generate an animation.");
+      return;
+    }
+    setIsAnimating(true);
+    if (currentStepIdx === -1) setCurrentStepIdx(0);
+  }, [currentStepIdx, steps.length]);
+
+  const pauseVisualizer = useCallback(() => {
+    setIsAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    lockRef.current = false;
+  }, []);
+
+  const stepForward = useCallback(() => {
+    if (lockRef.current) return;
+    setIsAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    if (stepIdxRef.current < steps.length - 1) {
+      setCurrentStepIdx((prev) => prev + 1);
+    }
+  }, [steps.length]);
+
+  const stepBackward = useCallback(() => {
+    if (lockRef.current) return;
+    setIsAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    if (stepIdxRef.current > 0) {
+      setCurrentStepIdx((prev) => prev - 1);
+    }
+  }, []);
+
+  const handleResetPlayback = useCallback(() => {
+    setIsAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    lockRef.current = false;
+    setCurrentStepIdx(-1);
+    setSteps([]);
+    setMessage("Playback reset.");
+  }, []);
+
+  useEffect(() => {
+    if (!isAnimating || steps.length === 0 || lockRef.current) return;
+
+    if (currentStepIdx >= steps.length) {
+      setIsAnimating(false);
+      return;
+    }
+
+    const currentStep = steps[currentStepIdx];
+    setMessage(currentStep.explanation);
+
+    lockRef.current = true;
+
+    timerRef.current = setTimeout(() => {
+      lockRef.current = false;
+      if (stepIdxRef.current < steps.length - 1) {
+        setCurrentStepIdx((prev) => prev + 1);
+      } else {
+        setIsAnimating(false);
+        if (targetTreeRoot) {
+          setRoot(targetTreeRoot);
+        }
+        setMessage("Operation completed successfully!");
+      }
+    }, 1800 / speed);
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [currentStepIdx, isAnimating, speed, steps, targetTreeRoot]);
+
+  const currentStep = steps[currentStepIdx] || null;
+
+  const activeTree = currentStep?.treeSnapshot || root;
+
+  const buildTreeRenderData = useCallback(() => {
+    if (!activeTree) return { renderNodes: [], renderEdges: [] };
+    const { nodesList, edgesList } = calculateCoordinates(activeTree, currentStep);
+    return { renderNodes: nodesList, renderEdges: edgesList };
+  }, [activeTree, currentStep]);
+
+  const { renderNodes, renderEdges } = buildTreeRenderData();
+
+  const getNodeColors = (node) => {
+    const stepType = currentStep?.stepType;
+    const currentNode = currentStep?.currentNode;
+    const state = node.state;
+
+    let fillHex = "#0f172a";
+    let strokeHex = "#334155";
+
+    if (stepType === "compare" && node.value === currentNode) {
+      fillHex = "#3b82f6";
+      strokeHex = "#60a5fa";
+    } else if (stepType === "insert-node" && node.value === currentNode) {
+      fillHex = "#10b981";
+      strokeHex = "#34d399";
+    } else if (stepType === "imbalance-detected" && node.value === currentNode) {
+      fillHex = "#ef4444";
+      strokeHex = "#f87171";
+    } else if (stepType === "rotation-complete" && node.value === currentNode) {
+      fillHex = "#10b981";
+      strokeHex = "#34d399";
+    } else if (state === "found") {
+      fillHex = "#f59e0b";
+      strokeHex = "#fbbf24";
+    } else if (state === "inserted") {
+      fillHex = "#10b981";
+      strokeHex = "#34d399";
+    } else if (state === "deleted") {
+      fillHex = "#ef4444";
+      strokeHex = "#f87171";
+    } else if (state === "predecessor" || state === "visiting-succ") {
+      fillHex = "#a855f7";
+      strokeHex = "#c084fc";
+    } else if (state === "visiting" || state === "active") {
+      fillHex = "#3b82f6";
+      strokeHex = "#60a5fa";
+    } else if (state === "active-succ") {
+      fillHex = "#14b8a6";
+      strokeHex = "#5eead4";
+    }
+
+    return { fillHex, strokeHex };
+  };
+
+  const currentHighlightLine = currentStep ? currentStep.codeLine : -1;
+  const showBanner = currentStep && (currentStep.stepType === "imbalance-detected" || currentStep.stepType === "rotation-complete");
+  const bannerStyle = currentStep?.stepType === "rotation-complete"
+    ? {
+        backgroundColor: "color-mix(in srgb, var(--color-success) 12%, var(--color-neutral-950))",
+        borderColor: "color-mix(in srgb, var(--color-success) 35%, var(--color-neutral-700))",
+        color: "var(--color-success)",
+      }
+    : {
+        backgroundColor: "color-mix(in srgb, var(--color-warning) 12%, var(--color-neutral-950))",
+        borderColor: "color-mix(in srgb, var(--color-warning) 35%, var(--color-neutral-700))",
+        color: "var(--color-warning)",
+      };
+  const swapValues = currentStep?.swapValues || null;
+  const isSwapPhase = currentStep?.stepType === "swap-values" || currentStep?.stepType === "delete-successor";
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-slate-900 dark:text-slate-100">
+      <main className="flex-1 w-full max-w-7xl mx-auto px-4 md:px-8 py-24 flex flex-col gap-8">
+        <div className="w-full">
+          <Breadcrumbs paths={createVisualizerPaths("Tree", "AVL", "AVL Tree")} />
+        </div>
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 border-b border-slate-200 dark:border-slate-800 pb-6">
+          <div>
+            <div className="flex items-center gap-2 mb-2 text-xs font-semibold uppercase tracking-wider text-indigo-600 bg-indigo-50 dark:text-indigo-400 dark:bg-indigo-950/40 px-3 py-1 rounded-full w-fit border border-indigo-100 dark:border-indigo-900/50">
+              <Layers className="w-3.5 h-3.5" /> AVL Interactive Operations
+            </div>
+            <h1 className="text-3xl md:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-slate-900 via-indigo-600 to-indigo-400 dark:from-white dark:via-indigo-200 dark:to-indigo-400">
+              AVL Tree
+            </h1>
+            <p className="text-sm text-slate-600 dark:text-slate-400 mt-1 max-w-xl">
+              Insert and delete operations keep the tree height-balanced with rotations.
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="px-3 py-1 rounded-full bg-gray-100 dark:bg-slate-900 border border-gray-300 dark:border-slate-800 text-xs text-slate-900 dark:text-slate-300 font-semibold">
+              {operationLabel}
+            </span>
+          </div>
+        </div>
+
+        <div className="bg-white dark:bg-[#111] backdrop-blur-xl border border-gray-200 dark:border-[#222] p-5 rounded-2xl flex flex-col md:flex-row gap-5 justify-between items-center shadow-lg shadow-black/20">
+          <div className="flex flex-col sm:flex-row gap-2.5 w-full md:w-auto">
+            <button
+              onClick={handleInsert}
+              disabled={isAnimating}
+              className="px-4 py-2 text-xs font-bold bg-gray-900 hover:bg-slate-800 dark:bg-[#1a1a1a] dark:hover:bg-[#2a2a2a] text-white rounded-xl transition-all border border-gray-200 dark:border-[#333] disabled:opacity-40"
+            >
+              Insert
+            </button>
+            <button
+              onClick={handleDelete}
+              disabled={isAnimating}
+              className="px-4 py-2 text-xs font-bold bg-gray-100 dark:bg-slate-800 text-slate-900 dark:text-slate-200 rounded-xl transition-all border border-gray-200 dark:border-slate-700 disabled:opacity-40"
+            >
+              Delete
+            </button>
+            <input
+              type="number"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              placeholder="Enter value"
+              className="w-full sm:w-32 px-3 py-2 text-xs bg-white dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] rounded-xl text-slate-900 dark:text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors"
+              disabled={isAnimating}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  handleInsert();
+                }
+              }}
+            />
+          </div>
+
+          <PlaybackControls
+            isPlaying={isAnimating}
+            onPlayPause={isAnimating ? pauseVisualizer : startVisualizer}
+            onStepForward={stepForward}
+            onStepBackward={stepBackward}
+            onReset={handleResetPlayback}
+            onClear={clearTree}
+            clearLabel="Clear Tree"
+            speed={speed}
+            onSpeedChange={setSpeed}
+            disabled={steps.length === 0 && !isAnimating}
+            showPlayPause={true}
+            progressText={`Step ${currentStepIdx !== -1 ? currentStepIdx + 1 : 0} / ${steps.length || 0}`}
+          />
+        </div>
+
+        <div className="bg-white dark:bg-[#111] border border-gray-200 dark:border-[#222] rounded-2xl p-4 flex flex-col gap-2">
+          <div className="flex justify-between items-center text-xs">
+            <span className="text-slate-600 dark:text-slate-400 font-semibold flex items-center gap-1.5">
+              <Info className="w-3.5 h-3.5 text-indigo-400" /> Action Explanation
+            </span>
+            <span className="text-slate-600 dark:text-slate-400 font-bold bg-gray-100 dark:bg-[#1a1a1a] px-2.5 py-0.5 rounded-full border border-gray-300 dark:border-[#333]">
+              Step {currentStepIdx !== -1 ? currentStepIdx + 1 : 0} / {steps.length || 0}
+            </span>
+          </div>
+          <div
+            className="text-[14px] leading-relaxed min-h-[24px] text-center text-slate-600 dark:text-slate-400"
+          >
+            {message}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+          <div className="lg:col-span-3 bg-white dark:bg-[#111] border border-gray-200 dark:border-[#222] rounded-3xl p-6 shadow-inner relative overflow-hidden flex flex-col justify-center min-h-[440px] items-center">
+            {showBanner && (
+              <div
+                className="absolute top-4 left-1/2 -translate-x-1/2 z-20 max-w-4xl w-[calc(100%-2rem)] border rounded-2xl px-4 py-3 shadow-lg shadow-black/30"
+                style={bannerStyle}
+              >
+                <div className="text-[11px] uppercase tracking-[0.2em] font-bold mb-1">AVL Balance Update</div>
+                <div className="text-sm font-semibold leading-relaxed">{currentStep?.explanation}</div>
+              </div>
+            )}
+
+            {!activeTree ? (
+              <div className="flex flex-col items-center gap-2.5 text-slate-400 dark:text-slate-500 py-12">
+                <AlertCircle className="w-10 h-10 text-slate-400 dark:text-slate-600" />
+                <span className="text-sm font-semibold text-slate-700 dark:text-slate-300">Workspace Empty</span>
+                <span className="text-xs max-w-xs text-center text-slate-500 dark:text-slate-400">
+                  Enter a value and click Insert or Delete to begin.
+                </span>
+              </div>
+            ) : (
+              <div className="w-full overflow-x-auto">
+                <svg
+                  width="100%"
+                  height="100%"
+                  viewBox="0 0 800 520"
+                  className="overflow-visible"
+                  style={{ minHeight: "440px" }}
+                >
+                  <defs>
+                    <filter id="shadow" x="-30%" y="-30%" width="160%" height="160%">
+                      <feDropShadow dx="0" dy="4" stdDeviation="8" floodColor="#000" floodOpacity="0.35" />
+                    </filter>
+                  </defs>
+
+                  {renderEdges.map((edge, idx) => (
+                    <line
+                      key={`edge-${idx}`}
+                      x1={edge.x1}
+                      y1={edge.y1}
+                      x2={edge.x2}
+                      y2={edge.y2}
+                      className="stroke-slate-300 dark:stroke-slate-700"
+                      strokeWidth="2.5"
+                      className="transition-all duration-300"
+                    />
+                  ))}
+
+                  {renderNodes.map((node, idx) => {
+                    const { fillHex, strokeHex } = getNodeColors(node);
+                    const displayValue = swapValues && isSwapPhase
+                      ? (node.value === swapValues.targetValue
+                          ? swapValues.successorValue
+                          : node.value === swapValues.successorValue
+                            ? swapValues.targetValue
+                            : node.value)
+                      : node.value;
+                    const bfAbs = Math.abs(node.balanceFactor || 0);
+                    const bfFill = bfAbs > 1 ? "var(--color-danger)" : bfAbs === 1 ? "var(--color-warning)" : "var(--color-neutral-700)";
+                    const bfStroke = bfAbs > 1 ? "var(--color-danger)" : bfAbs === 1 ? "var(--color-warning)" : "var(--color-neutral-500)";
+                    const bfText = bfAbs > 1 || bfAbs === 1 ? "var(--color-neutral-950)" : "var(--color-neutral-50)";
+
+                    return (
+                      <g key={`node-${idx}`} className="transition-all duration-300">
+                        {(node.state === "visiting" || node.state === "found" || node.state === "inserted" || node.state === "deleted" || node.state === "predecessor") && (
+                          <circle
+                            cx={node.x}
+                            cy={node.y}
+                            r="28"
+                            fill="none"
+                            stroke={strokeHex}
+                            strokeWidth="1.5"
+                            strokeDasharray="4,2"
+                            className="opacity-60"
+                          />
+                        )}
+
+                        <g transform={`translate(${node.x - 18}, ${node.y - 44})`}>
+                          <rect width="36" height="18" rx="6" fill={bfFill} stroke={bfStroke} strokeWidth="1" />
+                          <text x="18" y="12.5" fill={bfText} fontSize="9" fontWeight="700" textAnchor="middle">
+                            BF {node.balanceFactor}
+                          </text>
+                        </g>
+
+                        <circle
+                          cx={node.x}
+                          cy={node.y}
+                          r="21"
+                          fill={fillHex}
+                          stroke={strokeHex}
+                          strokeWidth="2.5"
+                          filter="url(#shadow)"
+                          className="transition-all duration-300"
+                        />
+
+                        <text
+                          x={node.x}
+                          y={node.y + 4.5}
+                          textAnchor="middle"
+                          className="fill-white dark:fill-slate-800"
+                          fontSize="12"
+                          fontWeight="bold"
+                        >
+                          {displayValue}
+                        </text>
+
+                        <text
+                          x={node.x}
+                          y={node.y + 39}
+                          textAnchor="middle"
+                          className="fill-slate-400 dark:fill-slate-400"
+                          fontSize="9"
+                          fontWeight="700"
+                        >
+                          h {node.height}
+                        </text>
+                      </g>
+                    );
+                  })}
+                </svg>
+              </div>
+            )}
+          </div>
+
+          <div className="lg:col-span-1">
+            <CustomInputPanel
+              inputType="array"
+              onApply={handleCustomTreeInput}
+              currentData={[]}
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+          <div className="bg-gray-50 dark:bg-slate-900/40 border border-gray-200 dark:border-slate-800/80 rounded-2xl p-5 flex flex-col gap-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Layers className="w-4 h-4 text-emerald-400" />
+                <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-200">Time Complexity</h3>
+              </div>
+              <span className="px-2 py-0.5 text-xs font-bold rounded bg-emerald-950/40 text-emerald-400 border border-emerald-900/50">
+                O(log N)
+              </span>
+            </div>
+            <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed mt-1">
+              AVL rebalancing keeps the height logarithmic after insertions and deletions.
+            </p>
+          </div>
+
+          <div className="bg-gray-50 dark:bg-slate-900/40 border border-gray-200 dark:border-slate-800/80 rounded-2xl p-5 flex flex-col gap-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Layers className="w-4 h-4 text-purple-400" />
+                <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-200">Space Complexity</h3>
+              </div>
+              <span className="px-2 py-0.5 text-xs font-bold rounded bg-purple-950/40 text-purple-400 border border-purple-900/50">
+                O(log N)
+              </span>
+            </div>
+            <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed mt-1">
+              Recursive operations use the call stack proportional to the tree height.
+            </p>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/src/app/visualizer/tree/avl/avlUtils.js b/src/app/visualizer/tree/avl/avlUtils.js
new file mode 100644
index 000000000..3d5f73a19
--- /dev/null
+++ b/src/app/visualizer/tree/avl/avlUtils.js
@@ -0,0 +1,461 @@
+export class AVLNode {
+  constructor(value) {
+    this.value = value;
+    this.left = null;
+    this.right = null;
+    this.height = 1;
+    this.balanceFactor = 0;
+  }
+}
+
+export const getHeight = (node) => (node ? node.height : 0);
+
+export const getBalanceFactor = (node) => {
+  if (!node) return 0;
+  return getHeight(node.left) - getHeight(node.right);
+};
+
+export const updateHeightAndBF = (node) => {
+  if (!node) return node;
+  node.height = 1 + Math.max(getHeight(node.left), getHeight(node.right));
+  node.balanceFactor = getBalanceFactor(node);
+  return node;
+};
+
+export const rotateRight = (y) => {
+  if (!y || !y.left) return y;
+  const x = y.left;
+  const t2 = x.right;
+
+  x.right = y;
+  y.left = t2;
+
+  updateHeightAndBF(y);
+  updateHeightAndBF(x);
+  return x;
+};
+
+export const rotateLeft = (x) => {
+  if (!x || !x.right) return x;
+  const y = x.right;
+  const t2 = y.left;
+
+  y.left = x;
+  x.right = t2;
+
+  updateHeightAndBF(x);
+  updateHeightAndBF(y);
+  return y;
+};
+
+const cloneTree = (node) => {
+  if (!node) return null;
+  return {
+    value: node.value,
+    left: cloneTree(node.left),
+    right: cloneTree(node.right),
+    height: node.height,
+    balanceFactor: node.balanceFactor,
+  };
+};
+
+const recordStep = (steps, root, step) => {
+  steps.push({
+    ...step,
+    treeSnapshot: cloneTree(root),
+  });
+};
+
+const buildPathHighlights = (path, currentValue, state) => {
+  const highlightedNodes = {};
+  path.slice(0, -1).forEach((value) => {
+    highlightedNodes[value] = "active";
+  });
+  if (currentValue !== undefined && currentValue !== null) {
+    highlightedNodes[currentValue] = state;
+  }
+  return highlightedNodes;
+};
+
+const getInsertRotationInfo = (node, value) => {
+  if (node.balanceFactor > 1 && node.left && value < node.left.value) {
+    return {
+      caseName: "Left-Left (LL)",
+      detectedText: `Imbalance at node ${node.value}  Left-Left (LL) case`,
+      rotationText: `Performed right rotation at node ${node.value}. New subtree root is ${node.left.value}.`,
+      rotatedNode: rotateRight(node),
+      rotationType: "right",
+    };
+  }
+
+  if (node.balanceFactor < -1 && node.right && value > node.right.value) {
+    return {
+      caseName: "Right-Right (RR)",
+      detectedText: `Imbalance at node ${node.value}  Right-Right (RR) case`,
+      rotationText: `Performed left rotation at node ${node.value}. New subtree root is ${node.right.value}.`,
+      rotatedNode: rotateLeft(node),
+      rotationType: "left",
+    };
+  }
+
+  if (node.balanceFactor > 1 && node.left && value > node.left.value) {
+    const leftChildValue = node.left.value;
+    node.left = rotateLeft(node.left);
+    updateHeightAndBF(node);
+    const rotatedNode = rotateRight(node);
+    return {
+      caseName: "Left-Right (LR)",
+      detectedText: `Imbalance at node ${node.value}  Left-Right (LR) case`,
+      rotationText: `Performed left rotation on node ${leftChildValue}, then right rotation at node ${node.value}. New subtree root is ${rotatedNode.value}.`,
+      rotatedNode,
+      rotationType: "left-right",
+    };
+  }
+
+  if (node.balanceFactor < -1 && node.right && value < node.right.value) {
+    const rightChildValue = node.right.value;
+    node.right = rotateRight(node.right);
+    updateHeightAndBF(node);
+    const rotatedNode = rotateLeft(node);
+    return {
+      caseName: "Right-Left (RL)",
+      detectedText: `Imbalance at node ${node.value}  Right-Left (RL) case`,
+      rotationText: `Performed right rotation on node ${rightChildValue}, then left rotation at node ${node.value}. New subtree root is ${rotatedNode.value}.`,
+      rotatedNode,
+      rotationType: "right-left",
+    };
+  }
+
+  return null;
+};
+
+const getDeleteRotationInfo = (node) => {
+  if (node.balanceFactor > 1 && getBalanceFactor(node.left) >= 0) {
+    return {
+      caseName: "Left-Left (LL)",
+      detectedText: `Imbalance at node ${node.value}  Left-Left (LL) case`,
+      rotationText: `Performed right rotation at node ${node.value}. New subtree root is ${node.left.value}.`,
+      rotatedNode: rotateRight(node),
+      rotationType: "right",
+    };
+  }
+
+  if (node.balanceFactor > 1 && getBalanceFactor(node.left) < 0) {
+    const leftChildValue = node.left.value;
+    node.left = rotateLeft(node.left);
+    updateHeightAndBF(node);
+    const rotatedNode = rotateRight(node);
+    return {
+      caseName: "Left-Right (LR)",
+      detectedText: `Imbalance at node ${node.value}  Left-Right (LR) case`,
+      rotationText: `Performed left rotation on node ${leftChildValue}, then right rotation at node ${node.value}. New subtree root is ${rotatedNode.value}.`,
+      rotatedNode,
+      rotationType: "left-right",
+    };
+  }
+
+  if (node.balanceFactor < -1 && getBalanceFactor(node.right) <= 0) {
+    return {
+      caseName: "Right-Right (RR)",
+      detectedText: `Imbalance at node ${node.value}  Right-Right (RR) case`,
+      rotationText: `Performed left rotation at node ${node.value}. New subtree root is ${node.right.value}.`,
+      rotatedNode: rotateLeft(node),
+      rotationType: "left",
+    };
+  }
+
+  if (node.balanceFactor < -1 && getBalanceFactor(node.right) > 0) {
+    const rightChildValue = node.right.value;
+    node.right = rotateRight(node.right);
+    updateHeightAndBF(node);
+    const rotatedNode = rotateLeft(node);
+    return {
+      caseName: "Right-Left (RL)",
+      detectedText: `Imbalance at node ${node.value}  Right-Left (RL) case`,
+      rotationText: `Performed right rotation on node ${rightChildValue}, then left rotation at node ${node.value}. New subtree root is ${rotatedNode.value}.`,
+      rotatedNode,
+      rotationType: "right-left",
+    };
+  }
+
+  return null;
+};
+
+export const insertAVL = (root, value, steps = []) => {
+  const rootRef = { root };
+
+  const insertRec = (node, path = []) => {
+    if (!node) {
+      const newNode = new AVLNode(value);
+      return {
+        node: newNode,
+        pendingSteps: [
+          {
+            currentNode: value,
+            visited: [...path, value],
+            explanation: `Inserted Node ${value} at the empty position.`,
+            codeLine: 2,
+            stepType: "insert-node",
+            highlightedNodes: buildPathHighlights([...path, value], value, "inserted"),
+          },
+        ],
+      };
+    }
+
+    const currentPath = [...path, node.value];
+    recordStep(steps, rootRef.root, {
+      currentNode: node.value,
+      visited: currentPath,
+      explanation: `Comparing key ${value} with current node ${node.value}.`,
+      codeLine: 1,
+      stepType: "compare",
+      highlightedNodes: buildPathHighlights(currentPath, node.value, "visiting"),
+    });
+
+    let childResult = { node: null, pendingSteps: [] };
+    if (value < node.value) {
+      childResult = insertRec(node.left, currentPath);
+      node.left = childResult.node;
+    } else if (value > node.value) {
+      childResult = insertRec(node.right, currentPath);
+      node.right = childResult.node;
+    } else {
+      return { node, pendingSteps: [] };
+    }
+
+    updateHeightAndBF(node);
+    childResult.pendingSteps.forEach((step) => recordStep(steps, rootRef.root, step));
+    const rotationInfo = getInsertRotationInfo(node, value);
+    if (rotationInfo) {
+      recordStep(steps, rootRef.root, {
+        currentNode: node.value,
+        visited: currentPath,
+        explanation: rotationInfo.detectedText,
+        codeLine: 4,
+        stepType: "imbalance-detected",
+        highlightedNodes: buildPathHighlights(currentPath, node.value, "deleted"),
+      });
+
+      const rotatedNode = rotationInfo.rotatedNode;
+      updateHeightAndBF(rotatedNode);
+      return {
+        node: rotatedNode,
+        pendingSteps: [
+          {
+            currentNode: rotatedNode.value,
+            visited: currentPath,
+            explanation: rotationInfo.rotationText,
+            codeLine: 5,
+            stepType: "rotation-complete",
+            highlightedNodes: buildPathHighlights(currentPath, rotatedNode.value, "inserted"),
+          },
+        ],
+      };
+    }
+
+    return { node, pendingSteps: [] };
+  };
+
+  const result = insertRec(root, []);
+  rootRef.root = result.node;
+  result.pendingSteps.forEach((step) => recordStep(steps, rootRef.root, step));
+  return { root: rootRef.root, steps };
+};
+
+export const deleteAVL = (root, value, steps = []) => {
+  const rootRef = { root };
+
+  const deleteRec = (node, path = []) => {
+    if (!node) {
+      return { node: null, pendingSteps: [] };
+    }
+
+    const currentPath = [...path, node.value];
+    recordStep(steps, rootRef.root, {
+      currentNode: node.value,
+      visited: currentPath,
+      explanation: `Comparing delete key ${value} with current node ${node.value}.`,
+      codeLine: 1,
+      stepType: "delete-compare",
+      highlightedNodes: buildPathHighlights(currentPath, node.value, "visiting"),
+    });
+
+    if (value < node.value) {
+      const childResult = deleteRec(node.left, currentPath);
+      node.left = childResult.node;
+      updateHeightAndBF(node);
+      childResult.pendingSteps.forEach((step) => recordStep(steps, rootRef.root, step));
+    } else if (value > node.value) {
+      const childResult = deleteRec(node.right, currentPath);
+      node.right = childResult.node;
+      updateHeightAndBF(node);
+      childResult.pendingSteps.forEach((step) => recordStep(steps, rootRef.root, step));
+    } else {
+      recordStep(steps, rootRef.root, {
+        currentNode: node.value,
+        visited: currentPath,
+        explanation: `Found Node ${value} to delete! Evaluating children cases.`,
+        codeLine: 4,
+        stepType: "delete-found",
+        highlightedNodes: buildPathHighlights(currentPath, node.value, "found"),
+      });
+
+      if (!node.left && !node.right) {
+        return {
+          node: null,
+          pendingSteps: [
+            {
+              currentNode: node.value,
+              visited: currentPath,
+              explanation: `Node ${value} is a leaf. Delete it.`,
+              codeLine: 5,
+              stepType: "delete-leaf",
+              highlightedNodes: buildPathHighlights(currentPath, node.value, "deleted"),
+            },
+          ],
+        };
+      }
+
+      if (!node.left || !node.right) {
+        const replacement = node.left || node.right;
+        return {
+          node: replacement,
+          pendingSteps: [
+            {
+              currentNode: node.value,
+              visited: currentPath,
+              explanation: `Node ${value} has one child. Replace it with its child.`,
+              codeLine: 6,
+              stepType: "delete-one-child",
+              highlightedNodes: buildPathHighlights(currentPath, node.value, "deleted"),
+            },
+          ],
+        };
+      }
+
+      recordStep(steps, rootRef.root, {
+        currentNode: node.value,
+        visited: currentPath,
+        explanation: `Node ${node.value} has two children. Finding its inorder successor: leftmost node in right subtree.`,
+        codeLine: 7,
+        stepType: "find-successor",
+        highlightedNodes: buildPathHighlights(currentPath, node.value, "found"),
+      });
+
+      const successorPath = [...currentPath];
+      let successor = node.right;
+      while (successor && successor.left) {
+        successorPath.push(successor.value);
+        recordStep(steps, rootRef.root, {
+          currentNode: node.value,
+          visited: currentPath,
+          explanation: `Traversing successor search path: Node ${successor.value}.`,
+          codeLine: 7,
+          stepType: "find-successor",
+          highlightedNodes: {
+            ...buildPathHighlights(currentPath, node.value, "found"),
+            ...Object.fromEntries(successorPath.slice(0, -1).map((v) => [v, "active-succ"])),
+            [successor.value]: "visiting-succ",
+          },
+        });
+        successor = successor.left;
+      }
+
+      if (successor) {
+        recordStep(steps, rootRef.root, {
+          currentNode: node.value,
+          visited: currentPath,
+          explanation: `Inorder successor located: Node ${successor.value} (smallest value in right subtree).`,
+          codeLine: 7,
+          stepType: "highlight-successor",
+          highlightedNodes: {
+            ...buildPathHighlights(currentPath, node.value, "found"),
+            ...Object.fromEntries(successorPath.slice(0, -1).map((v) => [v, "active-succ"])),
+            [successor.value]: "predecessor",
+          },
+        });
+      }
+
+      const targetValue = node.value;
+      const successorValue = successor ? successor.value : node.value;
+      node.value = successorValue;
+
+      recordStep(steps, rootRef.root, {
+        currentNode: node.value,
+        visited: currentPath,
+        explanation: `Swap the value of Node ${targetValue} with successor Node ${successorValue}.`,
+        codeLine: 8,
+        stepType: "swap-values",
+        swapValues: {
+          targetValue,
+          successorValue,
+        },
+        highlightedNodes: {
+          ...buildPathHighlights(currentPath, node.value, "inserted"),
+          [successorValue]: "predecessor",
+        },
+      });
+
+      if (node.right) {
+        const successorDelete = deleteRec(node.right, [...currentPath, node.value]);
+        node.right = successorDelete.node;
+        updateHeightAndBF(node);
+        successorDelete.pendingSteps.forEach((step) => recordStep(steps, rootRef.root, step));
+      }
+
+      return {
+        node,
+        pendingSteps: [
+          {
+            currentNode: node.value,
+            visited: currentPath,
+            explanation: `Delete the old successor leaf Node ${successorValue} from the right subtree.`,
+            codeLine: 9,
+            stepType: "delete-successor",
+            swapValues: {
+              targetValue,
+              successorValue,
+            },
+            highlightedNodes: {
+              ...buildPathHighlights(currentPath, node.value, "active"),
+              [successorValue]: "deleted",
+            },
+          },
+        ],
+      };
+    }
+
+    updateHeightAndBF(node);
+    const rotationInfo = getDeleteRotationInfo(node);
+    if (rotationInfo) {
+      return {
+        node: rotationInfo.rotatedNode,
+        pendingSteps: [
+          {
+            currentNode: node.value,
+            visited: currentPath,
+            explanation: rotationInfo.detectedText,
+            codeLine: 10,
+            stepType: "imbalance-detected",
+            highlightedNodes: buildPathHighlights(currentPath, node.value, "deleted"),
+          },
+          {
+            currentNode: rotationInfo.rotatedNode.value,
+            visited: currentPath,
+            explanation: rotationInfo.rotationText,
+            codeLine: 11,
+            stepType: "rotation-complete",
+            highlightedNodes: buildPathHighlights(currentPath, rotationInfo.rotatedNode.value, "inserted"),
+          },
+        ],
+      };
+    }
+
+    return { node, pendingSteps: [] };
+  };
+
+  const result = deleteRec(root, []);
+  rootRef.root = result.node;
+  result.pendingSteps.forEach((step) => recordStep(steps, rootRef.root, step));
+  return { root: rootRef.root, steps };
+};
diff --git a/src/app/visualizer/tree/avl/deletion/AlgorithmClient.jsx b/src/app/visualizer/tree/avl/deletion/AlgorithmClient.jsx
new file mode 100644
index 000000000..9e6bc9c8c
--- /dev/null
+++ b/src/app/visualizer/tree/avl/deletion/AlgorithmClient.jsx
@@ -0,0 +1,9 @@
+import TreeAVLVisualizer from "../TreeAVLVisualizer";
+
+
+
+const AVLDeletionPage = () => {
+  return <TreeAVLVisualizer initialMode="deletion" />;
+};
+
+export default AVLDeletionPage;
diff --git a/src/app/visualizer/tree/avl/insertion/AlgorithmClient.jsx b/src/app/visualizer/tree/avl/insertion/AlgorithmClient.jsx
new file mode 100644
index 000000000..c605bf082
--- /dev/null
+++ b/src/app/visualizer/tree/avl/insertion/AlgorithmClient.jsx
@@ -0,0 +1,9 @@
+import TreeAVLVisualizer from "../TreeAVLVisualizer";
+
+
+
+const AVLInsertionPage = () => {
+  return <TreeAVLVisualizer initialMode="insertion" />;
+};
+
+export default AVLInsertionPage;
diff --git a/src/app/visualizer/tree/binaryTree/properties/AlgorithmClient.jsx b/src/app/visualizer/tree/binaryTree/properties/AlgorithmClient.jsx
new file mode 100644
index 000000000..716ba8bbc
--- /dev/null
+++ b/src/app/visualizer/tree/binaryTree/properties/AlgorithmClient.jsx
@@ -0,0 +1,30 @@
+import Content from "./content";
+import CodeBlock from "./codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Structure & Properties")}
+      title="Binary Tree Structure & Properties"
+      content={<Content />}
+      code={<CodeBlock />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other tree modules"
+          links={[
+            { text: "Types of Binary Trees", url: "/visualizer/tree/binaryTree/types" },
+            { text: "BST Insertion", url: "/visualizer/tree/bst/insertion" },
+            { text: "In-order Traversal", url: "/visualizer/tree/traversing/in-order" },
+            { text: "Morris Traversal", url: "/visualizer/tree/traversing/morris" },
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/binaryTree/properties/codeBlock.jsx b/src/app/visualizer/tree/binaryTree/properties/codeBlock.jsx
new file mode 100644
index 000000000..a5b3a4311
--- /dev/null
+++ b/src/app/visualizer/tree/binaryTree/properties/codeBlock.jsx
@@ -0,0 +1,395 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for Binary Tree Operations ───────────────────
+const codeExamples = {
+  javascript: `// Binary Tree Operations
+
+class Node{
+
+    constructor(value){
+
+        this.value=value;
+        this.left=null;
+        this.right=null;
+    }
+}
+
+function getHeight(node){
+
+    if(node===null)
+        return -1;
+
+    return 1+
+    Math.max(
+        getHeight(
+        node.left
+        ),
+        getHeight(
+        node.right
+        )
+    );
+}
+
+function getDepth(
+        root,
+        target,
+        currentDepth=0){
+
+    if(root===null)
+        return -1;
+
+    if(root===target)
+        return currentDepth;
+
+    let leftDepth=
+    getDepth(
+    root.left,
+    target,
+    currentDepth+1
+    );
+
+    if(
+    leftDepth!==-1
+    ){
+
+        return leftDepth;
+    }
+
+    return getDepth(
+    root.right,
+    target,
+    currentDepth+1
+    );
+}
+
+function countLeaves(node){
+
+    if(node===null)
+        return 0;
+
+    if(
+    node.left===null &&
+    node.right===null
+    ){
+        return 1;
+    }
+
+    return countLeaves(
+    node.left
+    )+
+    countLeaves(
+    node.right
+    );
+}`,
+
+  python: `# Binary Tree Operations
+
+class Node:
+
+    def __init__(
+            self,
+            value):
+
+        self.value=value
+        self.left=None
+        self.right=None
+
+
+def get_height(
+        node):
+
+    if node is None:
+
+        return -1
+
+    return 1+max(
+        get_height(
+        node.left
+        ),
+        get_height(
+        node.right
+        )
+    )
+
+
+def get_depth(
+        root,
+        target,
+        current_depth=0):
+
+    if root is None:
+
+        return -1
+
+    if root==target:
+
+        return current_depth
+
+    left_depth=
+    get_depth(
+    root.left,
+    target,
+    current_depth+1
+    )
+
+    if left_depth!=-1:
+
+        return left_depth
+
+    return get_depth(
+    root.right,
+    target,
+    current_depth+1
+    )
+
+
+def count_leaves(
+        node):
+
+    if node is None:
+
+        return 0
+
+    if(
+    node.left is None
+    and
+    node.right is None
+    ):
+
+        return 1
+
+    return (
+    count_leaves(
+    node.left
+    )+
+    count_leaves(
+    node.right
+    ))`,
+
+  java: `// Binary Tree Operations
+
+class Node{
+
+    int value;
+
+    Node left;
+    Node right;
+
+    Node(
+        int value){
+
+        this.value=
+        value;
+    }
+}
+
+public class BinaryTreeOperations{
+
+    public static int
+    getHeight(
+    Node node){
+
+        if(node==null)
+            return -1;
+
+        return 1+
+        Math.max(
+        getHeight(
+        node.left
+        ),
+        getHeight(
+        node.right
+        ));
+    }
+
+    public static int
+    getDepth(
+    Node root,
+    Node target,
+    int currentDepth){
+
+        if(root==null)
+            return -1;
+
+        if(root==target)
+            return currentDepth;
+
+        int leftDepth=
+        getDepth(
+        root.left,
+        target,
+        currentDepth+1
+        );
+
+        if(
+        leftDepth!=-1
+        ){
+
+            return leftDepth;
+        }
+
+        return getDepth(
+        root.right,
+        target,
+        currentDepth+1
+        );
+    }
+
+    public static int
+    countLeaves(
+    Node node){
+
+        if(node==null)
+            return 0;
+
+        if(
+        node.left==null
+        &&
+        node.right==null
+        ){
+
+            return 1;
+        }
+
+        return countLeaves(
+        node.left
+        )+
+        countLeaves(
+        node.right
+        );
+    }
+}`,
+
+  c: `// Binary Tree Operations
+#include<stdio.h>
+#include<stdlib.h>
+
+struct Node{
+
+    int value;
+
+    struct Node*
+    left;
+
+    struct Node*
+    right;
+};
+
+struct Node*
+createNode(
+        int value){
+
+    struct Node*
+    newNode=
+
+    (struct Node*)
+    malloc(
+    sizeof(
+    struct Node
+    ));
+
+    newNode->value=
+    value;
+
+    newNode->left=
+    NULL;
+
+    newNode->right=
+    NULL;
+
+    return newNode;
+}
+
+int getHeight(
+        struct Node*
+        node){
+
+    if(
+    node==NULL
+    )
+        return -1;
+
+    int left=
+    getHeight(
+    node->left
+    );
+
+    int right=
+    getHeight(
+    node->right
+    );
+
+    return 1+
+    (
+    left>right
+    ?left:right
+    );
+}`,
+
+  cpp: `// Binary Tree Operations
+#include<iostream>
+#include<algorithm>
+
+using namespace std;
+
+struct Node{
+
+    int value;
+
+    Node* left;
+    Node* right;
+
+    Node(
+        int val){
+
+        value=val;
+
+        left=
+        nullptr;
+
+        right=
+        nullptr;
+    }
+};
+
+int getHeight(
+        Node* node){
+
+    if(
+    node==
+    nullptr
+    )
+        return -1;
+
+    return 1+
+    max(
+    getHeight(
+    node->left
+    ),
+    getHeight(
+    node->right
+    ));
+}`
+};
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'binaryTree.js',
+    python:'binary_tree.py',
+    java:'BinaryTreeOperations.java',
+    c:'binary_tree.c',
+    cpp:'binary_tree.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default CodeBlock;
diff --git a/src/app/visualizer/tree/binaryTree/properties/content.jsx b/src/app/visualizer/tree/binaryTree/properties/content.jsx
new file mode 100644
index 000000000..9603f524c
--- /dev/null
+++ b/src/app/visualizer/tree/binaryTree/properties/content.jsx
@@ -0,0 +1,516 @@
+'use client';
+
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { 
+  BookOpen, 
+  HelpCircle, 
+  Layers, 
+  GitFork, 
+  TrendingUp, 
+  Binary, 
+  Database,
+  ChevronRight,
+  Info
+} from 'lucide-react';
+
+export default function Content() {
+  const [selectedNode, setSelectedNode] = useState('A');
+
+  // Pre-calculated node properties for the interactive sample tree
+  const treeNodes = {
+    A: {
+      name: 'Node A',
+      type: 'Root Node',
+      typeDesc: 'The topmost node of the tree, which has no parent.',
+      parent: 'None (It is the root)',
+      children: 'B, C',
+      siblings: 'None',
+      degree: 2,
+      depth: 0,
+      level: 1,
+      height: 2,
+      color: 'from-purple-500 to-indigo-600',
+    },
+    B: {
+      name: 'Node B',
+      type: 'Internal Node',
+      typeDesc: 'A node that is not a leaf; it has a parent and at least one child.',
+      parent: 'A',
+      children: 'D, E',
+      siblings: 'C',
+      degree: 2,
+      depth: 1,
+      level: 2,
+      height: 1,
+      color: 'from-blue-500 to-cyan-600',
+    },
+    C: {
+      name: 'Node C',
+      type: 'Internal Node',
+      typeDesc: 'A node that is not a leaf; it has a parent and at least one child.',
+      parent: 'A',
+      children: 'F, G',
+      siblings: 'B',
+      degree: 2,
+      depth: 1,
+      level: 2,
+      height: 1,
+      color: 'from-blue-500 to-cyan-600',
+    },
+    D: {
+      name: 'Node D',
+      type: 'Leaf Node',
+      typeDesc: 'A node with no children (degree 0). It terminates a branch.',
+      parent: 'B',
+      children: 'None',
+      siblings: 'E',
+      degree: 0,
+      depth: 2,
+      level: 3,
+      height: 0,
+      color: 'from-emerald-500 to-teal-600',
+    },
+    E: {
+      name: 'Node E',
+      type: 'Leaf Node',
+      typeDesc: 'A node with no children (degree 0). It terminates a branch.',
+      parent: 'B',
+      children: 'None',
+      siblings: 'D',
+      degree: 0,
+      depth: 2,
+      level: 3,
+      height: 0,
+      color: 'from-emerald-500 to-teal-600',
+    },
+    F: {
+      name: 'Node F',
+      type: 'Leaf Node',
+      typeDesc: 'A node with no children (degree 0). It terminates a branch.',
+      parent: 'C',
+      children: 'None',
+      siblings: 'G',
+      degree: 0,
+      depth: 2,
+      level: 3,
+      height: 0,
+      color: 'from-emerald-500 to-teal-600',
+    },
+    G: {
+      name: 'Node G',
+      type: 'Leaf Node',
+      typeDesc: 'A node with no children (degree 0). It terminates a branch.',
+      parent: 'C',
+      children: 'None',
+      siblings: 'F',
+      degree: 0,
+      depth: 2,
+      level: 3,
+      height: 0,
+      color: 'from-emerald-500 to-teal-600',
+    }
+  };
+
+  const terminology = [
+    {
+      title: 'Root Node',
+      desc: 'The unique topmost node in a tree. Every search or traversal starts here. It has no incoming edges and is the ancestor of all other nodes.',
+      badge: 'Start'
+    },
+    {
+      title: 'Parent Node',
+      desc: 'Any node that has a direct link (edge) to one or more subordinate nodes. A node can have at most one parent in a tree.',
+      badge: 'Predecessor'
+    },
+    {
+      title: 'Child Node',
+      desc: 'A node connected directly to another node when moving away from the root. A node can have 0, 1, or 2 children in a binary tree.',
+      badge: 'Successor'
+    },
+    {
+      title: 'Sibling Node',
+      desc: 'Nodes that share the exact same parent node. For example, B and C are siblings as they share parent A.',
+      badge: 'Peers'
+    },
+    {
+      title: 'Leaf Node',
+      desc: 'A terminal node containing no children (degree 0). Leaf nodes represent the endpoints of paths starting at the root.',
+      badge: 'End'
+    },
+    {
+      title: 'Internal Node',
+      desc: 'A non-leaf node. An internal node has a parent and at least one child (degree > 0). It connects structure branches together.',
+      badge: 'Middle'
+    },
+    {
+      title: 'Subtree',
+      desc: 'A tree structure formed by taking any node in the tree along with all its descendants. Every node forms the root of its own subtree.',
+      badge: 'Sub-structure'
+    }
+  ];
+
+  const structuralProperties = [
+    {
+      name: 'Degree of a Node',
+      desc: 'The number of children directly connected to that node. In a binary tree, the degree of any node can only be 0, 1, or 2.',
+      detail: 'Leaves have a degree of 0, while full internal nodes have a degree of 2.'
+    },
+    {
+      name: 'Height of a Node',
+      desc: 'The number of edges on the longest downward path from that node to a leaf node. Leaf nodes always have a height of 0.',
+      detail: 'Calculated recursively as: height(u) = 1 + max(height(u.left), height(u.right)).'
+    },
+    {
+      name: 'Height of a Tree',
+      desc: 'The height of the Root Node. It represents the maximum length of any path from the root to any leaf in the tree.',
+      detail: 'An empty tree typically has height -1 (or 0 under some conventions), and a single-node tree has height 0.'
+    },
+    {
+      name: 'Depth of a Node',
+      desc: 'The number of edges on the path from the root node to that specific node. The depth of the root node is 0.',
+      detail: 'Depth measures how far down a node is from the root of the tree.'
+    },
+    {
+      name: 'Level of a Node',
+      desc: 'The position or tier of a node in the tree hierarchy. It is commonly defined as 1-based, where Level = Depth + 1.',
+      detail: 'The root node sits at Level 1, its children at Level 2, grandchildren at Level 3, and so on.'
+    }
+  ];
+
+  const formulas = [
+    {
+      title: 'Maximum Nodes at Level i',
+      formula: '2^i',
+      variableDesc: 'where i is the 0-based level index (depth)',
+      example: 'At Level 2 (depth 2), the maximum number of nodes is 2^2 = 4 nodes (which are D, E, F, G in a perfect tree).'
+    },
+    {
+      title: 'Maximum Nodes in Tree of Height h',
+      formula: '2^(h + 1) - 1',
+      variableDesc: 'where h is the tree height',
+      example: 'For a tree of height h = 2, the maximum nodes = 2^(2 + 1) - 1 = 8 - 1 = 7 nodes.'
+    },
+    {
+      title: 'Leaves vs Degree-2 Nodes',
+      formula: 'L = N₂ + 1',
+      variableDesc: 'where L is leaf count, N₂ is number of nodes with degree 2',
+      example: 'In a complete tree with 3 degree-2 nodes (A, B, C), the leaf count is L = 3 + 1 = 4 leaves.'
+    },
+    {
+      title: 'Minimum Height for N Nodes',
+      formula: '⌈log₂(N + 1)⌉ - 1',
+      variableDesc: 'where N is the total number of nodes',
+      example: 'For N = 7 nodes, the minimum height is ⌈log₂(7 + 1)⌉ - 1 = ⌈log₂(8)⌉ - 1 = 3 - 1 = 2.'
+    }
+  ];
+
+  const applications = [
+    {
+      title: 'Expression Trees',
+      desc: 'Used by compilers and interpreters to evaluate algebraic expressions. Operators act as internal nodes, while operands represent leaves.',
+      icon: <Binary className="w-6 h-6 text-purple-500" />
+    },
+    {
+      title: 'File Systems',
+      desc: 'While general hierarchies represent folders, directory search structures are frequently balanced using binary trees to enable instantaneous lookups.',
+      icon: <Database className="w-6 h-6 text-primary" />
+    },
+    {
+      title: 'Decision Trees',
+      desc: 'Used extensively in Artificial Intelligence, machine learning algorithms, and expert systems to categorize objects and predict actions step-by-step.',
+      icon: <GitFork className="w-6 h-6 text-emerald-500" />
+    },
+    {
+      title: 'Syntax Trees',
+      desc: 'Abstract Syntax Trees (ASTs) represent the logical grammar of program source code, critical for language parsers, compilers, and transpilers.',
+      icon: <Layers className="w-6 h-6 text-orange-500" />
+    },
+    {
+      title: 'Searching & Indexing',
+      desc: 'Self-balancing binary search trees (e.g. AVL, Red-Black Trees) are the foundation of database indexing systems, guaranteeing fast O(log N) searches.',
+      icon: <TrendingUp className="w-6 h-6 text-cyan-500" />
+    }
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto space-y-12">
+      {/* Introduction Section */}
+      <section className="bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-2xl p-6 md:p-8 shadow-sm transition-colors duration-300">
+        <div className="flex items-center gap-3 mb-4">
+          <BookOpen className="w-7 h-7 text-[#a435f0]" />
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Introduction to Binary Trees</h2>
+        </div>
+        <div className="space-y-4 text-gray-600 dark:text-gray-300 leading-relaxed text-base">
+          <p>
+            A <strong>Binary Tree</strong> is a hierarchical data structure in which each node has at most two children, 
+            referred to as the <strong>left child</strong> and the <strong>right child</strong>. Unlike linear structures 
+            like arrays, linked lists, stacks, and queues, trees store elements in an organized parent-child hierarchy, 
+            which makes them extremely powerful for organizing data that naturally features hierarchical relationships.
+          </p>
+          <p>
+            Binary trees serve as the foundational bedrock for highly efficient advanced structures like 
+            Binary Search Trees (BST), AVL trees, Heaps, and Huffman coding trees. Understanding the structure 
+            and essential formulas governing binary trees is the single most critical step in mastering data structures 
+            and algorithm complexity.
+          </p>
+        </div>
+      </section>
+
+      {/* Interactive Example Tree Section */}
+      <section className="bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-2xl p-6 md:p-8 shadow-sm transition-colors duration-300">
+        <div className="flex items-center gap-3 mb-6">
+          <Layers className="w-7 h-7 text-[#a435f0]" />
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Interactive Tree Property Inspector</h2>
+        </div>
+        <p className="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
+          Click or tap on any node in the SVG tree below to inspect its unique properties, structural metrics, 
+          and category type dynamically!
+        </p>
+
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
+          {/* Tree SVG Visualization */}
+          <div className="lg:col-span-6 flex flex-col items-center justify-center p-4 bg-gray-50 dark:bg-neutral-950 rounded-2xl border border-gray-100 dark:border-neutral-800 shadow-inner">
+            <svg 
+              viewBox="0 0 300 200" 
+              className="w-full max-w-[340px] h-auto drop-shadow-md select-none"
+            >
+              {/* Edges */}
+              <line x1="150" y1="40" x2="75" y2="100" className="stroke-gray-300 dark:stroke-neutral-700" strokeWidth="2.5" />
+              <line x1="150" y1="40" x2="225" y2="100" className="stroke-gray-300 dark:stroke-neutral-700" strokeWidth="2.5" />
+              <line x1="75" y1="100" x2="35" y2="160" className="stroke-gray-300 dark:stroke-neutral-700" strokeWidth="2.5" />
+              <line x1="75" y1="100" x2="115" y2="160" className="stroke-gray-300 dark:stroke-neutral-700" strokeWidth="2.5" />
+              <line x1="225" y1="100" x2="185" y2="160" className="stroke-gray-300 dark:stroke-neutral-700" strokeWidth="2.5" />
+              <line x1="225" y1="100" x2="265" y2="160" className="stroke-gray-300 dark:stroke-neutral-700" strokeWidth="2.5" />
+
+              {/* Nodes */}
+              {[
+                { id: 'A', cx: 150, cy: 40, label: 'A' },
+                { id: 'B', cx: 75, cy: 100, label: 'B' },
+                { id: 'C', cx: 225, cy: 100, label: 'C' },
+                { id: 'D', cx: 35, cy: 160, label: 'D' },
+                { id: 'E', cx: 115, cy: 160, label: 'E' },
+                { id: 'F', cx: 185, cy: 160, label: 'F' },
+                { id: 'G', cx: 265, cy: 160, label: 'G' },
+              ].map((node) => {
+                const isSelected = selectedNode === node.id;
+                return (
+                  <g 
+                    key={node.id} 
+                    className="cursor-pointer group"
+                    onClick={() => setSelectedNode(node.id)}
+                  >
+                    <circle
+                      cx={node.cx}
+                      cy={node.cy}
+                      r="16"
+                      className={`transition-all duration-300 stroke-[2.5px] ${
+                        isSelected 
+                          ? 'fill-purple-600 stroke-purple-300 dark:stroke-purple-800 r-18' 
+                          : 'fill-blue-500 stroke-blue-700 dark:fill-zinc-800 dark:stroke-neutral-600 group-hover:fill-blue-400 dark:group-hover:fill-neutral-700'
+                      }`}
+                    />
+                    <text
+                      x={node.cx}
+                      y={node.cy + 5}
+                      textAnchor="middle"
+                      className="font-bold text-sm fill-white select-none pointer-events-none"
+                    >
+                      {node.label}
+                    </text>
+                  </g>
+                );
+              })}
+            </svg>
+            <div className="mt-4 text-xs text-gray-500 dark:text-neutral-400 font-medium italic">
+              💡 Tip: Click nodes to inspect properties!
+            </div>
+          </div>
+
+          {/* Node Property Display Panel */}
+          <div className="lg:col-span-6 flex flex-col justify-between h-full bg-gray-50 dark:bg-neutral-950 rounded-2xl p-6 border border-gray-100 dark:border-neutral-800 transition-all">
+            <div>
+              <div className="flex items-center justify-between border-b border-gray-200 dark:border-neutral-800 pb-3 mb-4">
+                <h3 className="text-xl font-bold text-gray-800 dark:text-white flex items-center gap-2">
+                  <span className={`w-3 h-3 rounded-full bg-gradient-to-r ${treeNodes[selectedNode].color}`} />
+                  Properties of {treeNodes[selectedNode].name}
+                </h3>
+                <span className="px-3 py-1 bg-purple-100 dark:bg-purple-950/40 text-purple-600 dark:text-purple-300 rounded-full text-xs font-bold uppercase tracking-wider">
+                  {treeNodes[selectedNode].type}
+                </span>
+              </div>
+
+              <div className="text-sm text-gray-500 dark:text-neutral-400 mb-4 bg-white dark:bg-neutral-900 border border-gray-200/50 dark:border-neutral-800/80 rounded-xl p-3 flex gap-2">
+                <Info className="w-5 h-5 text-purple-400 shrink-0 mt-0.5" />
+                <p>{treeNodes[selectedNode].typeDesc}</p>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div className="bg-white dark:bg-neutral-900 p-3 rounded-xl border border-gray-100 dark:border-neutral-800/60 shadow-sm">
+                  <span className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Parent</span>
+                  <span className="text-sm font-bold text-gray-700 dark:text-gray-200">{treeNodes[selectedNode].parent}</span>
+                </div>
+                <div className="bg-white dark:bg-neutral-900 p-3 rounded-xl border border-gray-100 dark:border-neutral-800/60 shadow-sm">
+                  <span className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Children</span>
+                  <span className="text-sm font-bold text-gray-700 dark:text-gray-200">{treeNodes[selectedNode].children}</span>
+                </div>
+                <div className="bg-white dark:bg-neutral-900 p-3 rounded-xl border border-gray-100 dark:border-neutral-800/60 shadow-sm">
+                  <span className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Siblings</span>
+                  <span className="text-sm font-bold text-gray-700 dark:text-gray-200">{treeNodes[selectedNode].siblings}</span>
+                </div>
+                <div className="bg-white dark:bg-neutral-900 p-3 rounded-xl border border-gray-100 dark:border-neutral-800/60 shadow-sm">
+                  <span className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Node Degree</span>
+                  <span className="text-sm font-bold text-gray-700 dark:text-gray-200">{treeNodes[selectedNode].degree}</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-3 gap-2 mt-6 pt-4 border-t border-gray-200 dark:border-neutral-800">
+              <div className="text-center bg-purple-500/10 dark:bg-purple-500/5 py-2.5 rounded-xl border border-purple-200/40 dark:border-purple-950/20">
+                <span className="block text-xs font-semibold text-purple-600 dark:text-purple-400 uppercase mb-0.5">Depth</span>
+                <span className="text-lg font-black text-purple-700 dark:text-purple-300">{treeNodes[selectedNode].depth}</span>
+              </div>
+              <div className="text-center bg-primary/10 dark:bg-primary/5 py-2.5 rounded-xl border border-blue-200/40 dark:border-blue-950/20">
+                <span className="block text-xs font-semibold text-primary dark:text-[#c27cf7] uppercase mb-0.5">Level</span>
+                <span className="text-lg font-black text-primary-dark dark:text-[#c27cf7]">{treeNodes[selectedNode].level}</span>
+              </div>
+              <div className="text-center bg-emerald-500/10 dark:bg-emerald-500/5 py-2.5 rounded-xl border border-emerald-200/40 dark:border-emerald-950/20">
+                <span className="block text-xs font-semibold text-emerald-600 dark:text-emerald-400 uppercase mb-0.5">Height</span>
+                <span className="text-lg font-black text-emerald-700 dark:text-emerald-300">{treeNodes[selectedNode].height}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Terminology Cards Section */}
+      <section className="bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-2xl p-6 md:p-8 shadow-sm transition-colors duration-300">
+        <div className="flex items-center gap-3 mb-6">
+          <BookOpen className="w-7 h-7 text-[#a435f0]" />
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Terminology Glossary</h2>
+        </div>
+        <p className="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
+          Master the standard glossary terms used to describe and navigate relationships inside trees:
+        </p>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {terminology.map((t, idx) => (
+            <div 
+              key={idx}
+              className="group bg-gray-50 hover:bg-white dark:bg-neutral-950 dark:hover:bg-neutral-900 border border-gray-150 dark:border-neutral-800/80 hover:border-purple-300 dark:hover:border-purple-900/60 rounded-xl p-5 shadow-sm hover:shadow-md transition-all duration-300"
+            >
+              <div className="flex justify-between items-center mb-2">
+                <h3 className="text-lg font-bold text-gray-800 dark:text-gray-200 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">
+                  {t.title}
+                </h3>
+                <span className="text-[10px] uppercase font-bold tracking-widest px-2 py-0.5 bg-gray-200/60 dark:bg-neutral-800 text-gray-500 dark:text-gray-400 rounded-md">
+                  {t.badge}
+                </span>
+              </div>
+              <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
+                {t.desc}
+              </p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Structural Properties Section */}
+      <section className="bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-2xl p-6 md:p-8 shadow-sm transition-colors duration-300">
+        <div className="flex items-center gap-3 mb-6">
+          <HelpCircle className="w-7 h-7 text-[#a435f0]" />
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Key Structural Properties</h2>
+        </div>
+        <p className="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
+          The quantitative metrics that define a tree&apos;s geometry and complexity:
+        </p>
+
+        <div className="space-y-4">
+          {structuralProperties.map((prop, idx) => (
+            <div 
+              key={idx}
+              className="border-l-4 border-purple-500 bg-gray-50 dark:bg-neutral-950 p-5 rounded-r-xl border-y border-r border-gray-200/60 dark:border-neutral-800/60"
+            >
+              <h3 className="text-lg font-bold text-gray-800 dark:text-white mb-1.5">{prop.name}</h3>
+              <p className="text-sm text-gray-600 dark:text-gray-300 mb-2 leading-relaxed">{prop.desc}</p>
+              <div className="text-xs text-gray-400 dark:text-neutral-500 font-medium italic flex items-center gap-1.5">
+                <span className="inline-block w-1.5 h-1.5 bg-purple-400 rounded-full shrink-0" />
+                {prop.detail}
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Formulas Section */}
+      <section className="bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-2xl p-6 md:p-8 shadow-sm transition-colors duration-300">
+        <div className="flex items-center gap-3 mb-6">
+          <Binary className="w-7 h-7 text-[#a435f0]" />
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Binary Tree Formula Sheet</h2>
+        </div>
+        <p className="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
+          Fundamental equations used to analyze binary tree characteristics, space layouts, and boundary limits:
+        </p>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {formulas.map((f, idx) => (
+            <div 
+              key={idx}
+              className="flex flex-col justify-between bg-gray-50 dark:bg-neutral-950 border border-gray-200 dark:border-neutral-800/80 rounded-2xl p-6 shadow-sm"
+            >
+              <div>
+                <h3 className="text-sm uppercase font-extrabold tracking-wider text-gray-400 dark:text-neutral-500 mb-2">
+                  {f.title}
+                </h3>
+                <div className="bg-white dark:bg-neutral-900 rounded-xl py-4 px-6 border border-gray-150 dark:border-neutral-800/50 shadow-inner flex items-center justify-center mb-3">
+                  <code className="text-2xl font-black text-purple-600 dark:text-purple-400 font-mono">
+                    {f.formula}
+                  </code>
+                </div>
+                <p className="text-xs text-gray-400 dark:text-neutral-500 text-center italic mb-4 font-medium">
+                  {f.variableDesc}
+                </p>
+              </div>
+              <div className="bg-purple-500/5 border border-purple-200/20 dark:border-purple-950/20 rounded-xl p-3.5 text-xs text-gray-600 dark:text-gray-300 leading-relaxed">
+                <span className="font-bold text-purple-600 dark:text-purple-400 block mb-0.5">Example:</span>
+                {f.example}
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Applications Section */}
+      <section className="bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-2xl p-6 md:p-8 shadow-sm transition-colors duration-300">
+        <div className="flex items-center gap-3 mb-6">
+          <Database className="w-7 h-7 text-[#a435f0]" />
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Real-world Applications</h2>
+        </div>
+        <p className="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
+          How binary trees serve critical real-world processing, computation, and classification services:
+        </p>
+
+        <div className="space-y-4">
+          {applications.map((app, idx) => (
+            <div 
+              key={idx}
+              className="flex gap-4 items-start bg-gray-50 hover:bg-white dark:bg-neutral-950 dark:hover:bg-neutral-900 p-5 rounded-2xl border border-gray-150 dark:border-neutral-800/80 hover:border-purple-200 dark:hover:border-purple-950/40 hover:shadow-md transition-all duration-300"
+            >
+              <div className="p-3 bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-xl shadow-sm group-hover:scale-105 transition-transform shrink-0">
+                {app.icon}
+              </div>
+              <div>
+                <h3 className="text-lg font-bold text-gray-800 dark:text-white mb-1">
+                  {app.title}
+                </h3>
+                <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
+                  {app.desc}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </main>
+  );
+}
diff --git a/src/app/visualizer/tree/binaryTree/quiz/BinaryTreeQuizClient.jsx b/src/app/visualizer/tree/binaryTree/quiz/BinaryTreeQuizClient.jsx
new file mode 100644
index 000000000..0627f9410
--- /dev/null
+++ b/src/app/visualizer/tree/binaryTree/quiz/BinaryTreeQuizClient.jsx
@@ -0,0 +1,65 @@
+"use client";
+
+import Link from "next/link";
+import { Layers, ArrowRight } from "lucide-react";
+
+const quizzes = [
+  {
+    title: "Structure & Properties Quiz",
+    description:
+      "Practice Binary Tree structure, nodes, height, depth, levels, and fundamental properties.",
+    href: "/visualizer/tree/binaryTree/quiz/structure-properties",
+  },
+  {
+    title: "Types of Binary Trees Quiz",
+    description:
+      "Test your understanding of Full, Complete, Perfect, Balanced, Degenerate, and other Binary Tree types.",
+    href: "/visualizer/tree/binaryTree/quiz/types",
+  },
+];
+
+export default function BinaryTreeQuizClient() {
+  return (
+    <div className="min-h-screen bg-background p-6">
+      <div className="mx-auto max-w-6xl">
+        <div className="mb-10 text-center">
+          <h1 className="text-4xl font-bold">
+            🌳 Binary Tree Quiz Portal
+          </h1>
+          <p className="mt-3 text-muted-foreground">
+            Choose a Binary Tree topic and test your understanding.
+          </p>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          {quizzes.map((quiz) => (
+            <div
+              key={quiz.title}
+              className="rounded-2xl border border-green-500/20 bg-card p-6 shadow-sm transition-all hover:shadow-lg hover:border-green-500/40"
+            >
+              <div className="mb-5 flex h-14 w-14 items-center justify-center rounded-xl bg-green-500/10 text-green-600">
+                <Layers size={28} />
+              </div>
+
+              <h2 className="text-2xl font-semibold">
+                {quiz.title}
+              </h2>
+
+              <p className="mt-3 text-muted-foreground">
+                {quiz.description}
+              </p>
+
+              <Link
+                href={quiz.href}
+                className="mt-6 inline-flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2.5 font-medium text-white transition hover:bg-green-700"
+              >
+                Start Quiz
+                <ArrowRight size={18} />
+              </Link>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/binaryTree/quiz/page.jsx b/src/app/visualizer/tree/binaryTree/quiz/page.jsx
new file mode 100644
index 000000000..ed7c78b78
--- /dev/null
+++ b/src/app/visualizer/tree/binaryTree/quiz/page.jsx
@@ -0,0 +1,5 @@
+import BinaryTreeQuizClient from "./BinaryTreeQuizClient";
+
+export default function Page() {
+  return <BinaryTreeQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/binaryTree/quiz/structure-properties/page.jsx b/src/app/visualizer/tree/binaryTree/quiz/structure-properties/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/binaryTree/quiz/structure-properties/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/binaryTree/quiz/structure-properties/quiz.jsx b/src/app/visualizer/tree/binaryTree/quiz/structure-properties/quiz.jsx
new file mode 100644
index 000000000..2bb2790c7
--- /dev/null
+++ b/src/app/visualizer/tree/binaryTree/quiz/structure-properties/quiz.jsx
@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the maximum number of children a node can have in a Binary Tree?",
+    options: ["1", "2", "3", "Unlimited"],
+    correctAnswer: 1,
+    explanation: "Each node in a Binary Tree can have at most two children."
+  },
+  {
+    question: "Which node is located at the top of a Binary Tree?",
+    options: ["Leaf Node", "Root Node", "Internal Node", "Parent Node"],
+    correctAnswer: 1,
+    explanation: "The Root Node is the first and topmost node of a Binary Tree."
+  },
+  {
+    question: "A node with no children is called:",
+    options: ["Root Node", "Internal Node", "Leaf Node", "Parent Node"],
+    correctAnswer: 2,
+    explanation: "Leaf nodes do not have any children."
+  },
+  {
+    question: "The number of edges from the root to a node is called:",
+    options: ["Height", "Depth", "Degree", "Width"],
+    correctAnswer: 1,
+    explanation: "Depth is the number of edges from the root to a node."
+  },
+  {
+    question: "The height of a Binary Tree is measured from:",
+    options: [
+      "Leaf to Root",
+      "Root to Deepest Leaf",
+      "Middle Node",
+      "Any Random Node"
+    ],
+    correctAnswer: 1,
+    explanation: "Height is the longest path from the root to a leaf."
+  },
+  {
+    question: "How many edges are present in a Binary Tree with N nodes?",
+    options: ["N", "N-1", "N+1", "2N"],
+    correctAnswer: 1,
+    explanation: "Every tree with N nodes has exactly N−1 edges."
+  },
+  {
+    question: "Which traversal visits Root, Left, Right?",
+    options: ["Inorder", "Postorder", "Preorder", "Level Order"],
+    correctAnswer: 2,
+    explanation: "Preorder traversal follows Root → Left → Right."
+  },
+  {
+    question: "Which traversal visits Left, Root, Right?",
+    options: ["Inorder", "Preorder", "Postorder", "Level Order"],
+    correctAnswer: 0,
+    explanation: "Inorder traversal follows Left → Root → Right."
+  },
+  {
+    question: "Which traversal visits Left, Right, Root?",
+    options: ["Inorder", "Postorder", "Preorder", "Level Order"],
+    correctAnswer: 1,
+    explanation: "Postorder traversal follows Left → Right → Root."
+  },
+  {
+    question: "What is the degree of a leaf node?",
+    options: ["2", "1", "0", "Depends"],
+    correctAnswer: 2,
+    explanation: "Leaf nodes have no children, so their degree is 0."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Binary Tree Structure & Properties Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/binaryTree/quiz/types/page.jsx b/src/app/visualizer/tree/binaryTree/quiz/types/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/binaryTree/quiz/types/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/binaryTree/quiz/types/quiz.jsx b/src/app/visualizer/tree/binaryTree/quiz/types/quiz.jsx
new file mode 100644
index 000000000..72327cb4b
--- /dev/null
+++ b/src/app/visualizer/tree/binaryTree/quiz/types/quiz.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "Which Binary Tree has every node with either 0 or 2 children?",
+    options: [
+      "Complete Binary Tree",
+      "Perfect Binary Tree",
+      "Full Binary Tree",
+      "Balanced Binary Tree"
+    ],
+    correctAnswer: 2,
+    explanation: "A Full Binary Tree allows only 0 or 2 children per node."
+  },
+  {
+    question: "Which Binary Tree has all levels completely filled except possibly the last?",
+    options: [
+      "Perfect Binary Tree",
+      "Complete Binary Tree",
+      "Degenerate Tree",
+      "Balanced Tree"
+    ],
+    correctAnswer: 1,
+    explanation: "Complete Binary Trees fill every level except possibly the last."
+  },
+  {
+    question: "A Perfect Binary Tree has:",
+    options: [
+      "Only one child per node",
+      "All internal nodes with two children and all leaves at the same level",
+      "Uneven height",
+      "Random structure"
+    ],
+    correctAnswer: 1,
+    explanation: "Perfect Binary Trees have all leaves at the same depth."
+  },
+  {
+    question: "Which Binary Tree resembles a linked list?",
+    options: [
+      "Perfect Tree",
+      "Balanced Tree",
+      "Degenerate Tree",
+      "Complete Tree"
+    ],
+    correctAnswer: 2,
+    explanation: "A Degenerate Tree has only one child per node."
+  },
+  {
+    question: "Which Binary Tree keeps height approximately logarithmic?",
+    options: [
+      "Balanced Binary Tree",
+      "Degenerate Tree",
+      "Perfect Tree",
+      "Random Tree"
+    ],
+    correctAnswer: 0,
+    explanation: "Balanced Trees maintain nearly equal subtree heights."
+  },
+  {
+    question: "A left-skewed tree has:",
+    options: [
+      "Only right children",
+      "Both children",
+      "Only left children",
+      "No children"
+    ],
+    correctAnswer: 2,
+    explanation: "Every node has only a left child."
+  },
+  {
+    question: "A right-skewed tree has:",
+    options: [
+      "Only right children",
+      "Only left children",
+      "Both children",
+      "No children"
+    ],
+    correctAnswer: 0,
+    explanation: "Every node has only a right child."
+  },
+  {
+    question: "Which Binary Tree is commonly used to implement priority queues?",
+    options: [
+      "AVL Tree",
+      "Binary Heap",
+      "Red-Black Tree",
+      "BST"
+    ],
+    correctAnswer: 1,
+    explanation: "Priority queues are commonly implemented using Binary Heaps."
+  },
+  {
+    question: "Which Binary Tree is self-balancing?",
+    options: [
+      "AVL Tree",
+      "Degenerate Tree",
+      "Complete Tree",
+      "Perfect Tree"
+    ],
+    correctAnswer: 0,
+    explanation: "AVL Trees automatically maintain balance."
+  },
+  {
+    question: "Which statement about a Complete Binary Tree is TRUE?",
+    options: [
+      "Every node has two children",
+      "Leaves must be at different levels",
+      "Nodes in the last level are filled from left to right",
+      "It always has equal subtree heights"
+    ],
+    correctAnswer: 2,
+    explanation: "In a Complete Binary Tree, the last level is filled from left to right."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Binary Tree Types Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/binaryTree/types/AlgorithmClient.jsx b/src/app/visualizer/tree/binaryTree/types/AlgorithmClient.jsx
new file mode 100644
index 000000000..a7635976b
--- /dev/null
+++ b/src/app/visualizer/tree/binaryTree/types/AlgorithmClient.jsx
@@ -0,0 +1,25 @@
+import Content from "@/app/visualizer/tree/binaryTree/types/content";
+import CodeBlock from "@/app/visualizer/tree/binaryTree/types/codeBlock";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+
+
+
+export default function Page() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Types of Binary Trees")}
+      title="Types of Binary Trees"
+      content={<Content />}
+      code={<CodeBlock />}
+      exploreOther={
+        <ExploreOther
+          title="Explore other implementation"
+          links={[{ text: "Structure & Properties", url: "/visualizer/tree/binaryTree/properties" }]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/binaryTree/types/codeBlock.jsx b/src/app/visualizer/tree/binaryTree/types/codeBlock.jsx
new file mode 100644
index 000000000..1966cbdd6
--- /dev/null
+++ b/src/app/visualizer/tree/binaryTree/types/codeBlock.jsx
@@ -0,0 +1,246 @@
+'use client';
+
+import CodeBlockUI from '@/app/components/ui/CodeBlock';
+
+// ─── All code examples for Binary Tree Types ──────────────────────
+const codeExamples = {
+  javascript: `// Binary Tree Types
+
+class Node{
+
+    constructor(value){
+
+        this.value=
+        value;
+
+        this.left=
+        null;
+
+        this.right=
+        null;
+    }
+}
+
+// Create Binary Tree
+const root=
+new Node(1);
+
+root.left=
+new Node(2);
+
+root.right=
+new Node(3);
+
+root.left.left=
+new Node(4);
+
+root.left.right=
+new Node(5);
+
+console.log(
+"Binary Tree created!"
+);`,
+
+  python: `# Binary Tree Types
+
+class Node:
+
+    def __init__(
+            self,
+            value):
+
+        self.value=
+        value
+
+        self.left=
+        None
+
+        self.right=
+        None
+
+
+root=
+Node(1)
+
+root.left=
+Node(2)
+
+root.right=
+Node(3)
+
+root.left.left=
+Node(4)
+
+root.left.right=
+Node(5)
+
+print(
+"Binary Tree created!"
+)`,
+
+  java: `// Binary Tree Types
+
+class Node{
+
+    int value;
+
+    Node left;
+    Node right;
+
+    Node(
+        int value){
+
+        this.value=
+        value;
+
+        left=
+        null;
+
+        right=
+        null;
+    }
+}
+
+public class BinaryTreeTypes{
+
+    public static void main(
+            String[] args){
+
+        Node root=
+        new Node(1);
+
+        root.left=
+        new Node(2);
+
+        root.right=
+        new Node(3);
+
+        System.out.println(
+        "Binary Tree created!"
+        );
+    }
+}`,
+
+  c: `// Binary Tree Types
+#include<stdio.h>
+#include<stdlib.h>
+
+struct Node{
+
+    int value;
+
+    struct Node*
+    left;
+
+    struct Node*
+    right;
+};
+
+struct Node*
+createNode(
+        int value){
+
+    struct Node*
+    node=
+
+    (struct Node*)
+    malloc(
+    sizeof(
+    struct Node
+    ));
+
+    node->value=
+    value;
+
+    node->left=
+    NULL;
+
+    node->right=
+    NULL;
+
+    return node;
+}
+
+int main(){
+
+    struct Node*
+    root=
+    createNode(1);
+
+    root->left=
+    createNode(2);
+
+    root->right=
+    createNode(3);
+
+    printf(
+    "Binary Tree created!\\n"
+    );
+
+    return 0;
+}`,
+
+  cpp: `// Binary Tree Types
+#include<iostream>
+
+using namespace std;
+
+struct Node{
+
+    int value;
+
+    Node* left;
+    Node* right;
+
+    Node(
+        int val){
+
+        value=
+        val;
+
+        left=
+        nullptr;
+
+        right=
+        nullptr;
+    }
+};
+
+int main(){
+
+    Node* root=
+    new Node(1);
+
+    root->left=
+    new Node(2);
+
+    root->right=
+    new Node(3);
+
+    cout
+    <<"Binary Tree created!"
+    <<endl;
+
+    return 0;
+}`
+};
+
+// ─── Filenames ─────────────────────────────
+const fileNames = {
+    javascript:'binaryTreeTypes.js',
+    python:'binary_tree_types.py',
+    java:'BinaryTreeTypes.java',
+    c:'binary_tree_types.c',
+    cpp:'binary_tree_types.cpp'
+};
+
+// ─── Component ─────────────────────────────
+const CodeBlock = () => (
+    <CodeBlockUI
+        variant="macos"
+        codeExamples={codeExamples}
+        fileNames={fileNames}
+    />
+);
+
+export default CodeBlock;
\ No newline at end of file
diff --git a/src/app/visualizer/tree/binaryTree/types/content.jsx b/src/app/visualizer/tree/binaryTree/types/content.jsx
new file mode 100644
index 000000000..40ecea386
--- /dev/null
+++ b/src/app/visualizer/tree/binaryTree/types/content.jsx
@@ -0,0 +1,300 @@
+"use client";
+
+/*  content.jsx  */
+import React, { useEffect, useRef } from 'react';
+import { gsap } from 'gsap';
+
+/* ------------- tiny helper to draw a tree ------------- */
+function drawTree(
+  svg,                // <svg> element
+  nodes,              // flat list [ {value, x, y}, ... ]
+  edges,              // [ {from, to}, ... ]  (indices)
+  radius = 18
+) {
+  // clear previous drawings
+  svg.replaceChildren();
+
+  // edges (lines)
+  edges.forEach(({ from, to }) => {
+    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    line.setAttribute('x1', nodes[from].x);
+    line.setAttribute('y1', nodes[from].y);
+    line.setAttribute('x2', nodes[to].x);
+    line.setAttribute('y2', nodes[to].y);
+    line.setAttribute('stroke', '#3b82f6'); // blue-500
+    line.setAttribute('stroke-width', '2');
+    svg.appendChild(line);
+  });
+
+  // nodes (circles + text)
+  nodes.forEach(({ value, x, y }, i) => {
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+
+    circle.setAttribute('cx', x);
+    circle.setAttribute('cy', y);
+    circle.setAttribute('r', radius);
+    circle.setAttribute('fill', '#3b82f6'); // blue-500
+    circle.setAttribute('stroke', '#1e40af'); // blue-800
+    circle.setAttribute('stroke-width', '2');
+
+    text.setAttribute('x', x);
+    text.setAttribute('y', y + 5);
+    text.setAttribute('text-anchor', 'middle');
+    text.setAttribute('fill', '#fff');
+    text.setAttribute('font-size', '14');
+    text.textContent = value;
+
+    g.appendChild(circle);
+    g.appendChild(text);
+    svg.appendChild(g);
+
+    // animate in
+    gsap.from(g, { scale: 0, duration: 0.6, ease: 'back.out(1.7)', delay: i * 0.15 });
+  });
+}
+
+export default function Content() {
+  /* refs for the three svgs */
+  const fullSvg    = useRef(null);
+  const degenSvg   = useRef(null);
+  const completeSvg = useRef(null);
+
+  /* ------------- GSAP trees ------------- */
+  useEffect(() => {
+    /* Full tree (height 2) */
+    drawTree(
+      fullSvg.current,
+      [
+        { value: 'A', x: 60, y: 30 },
+        { value: 'B', x: 30, y: 80 },
+        { value: 'C', x: 90, y: 80 },
+        { value: 'D', x: 15, y: 130 },
+        { value: 'E', x: 45, y: 130 },
+        { value: 'F', x: 75, y: 130 },
+        { value: 'G', x: 105, y: 130 },
+      ],
+      [
+        { from: 0, to: 1 },
+        { from: 0, to: 2 },
+        { from: 1, to: 3 },
+        { from: 1, to: 4 },
+        { from: 2, to: 5 },
+        { from: 2, to: 6 },
+      ]
+    );
+
+    /* Degenerate / right-skewed */
+    drawTree(
+      degenSvg.current,
+      [
+        { value: '1', x: 30, y: 30 },
+        { value: '2', x: 30, y: 80 },
+        { value: '3', x: 30, y: 130 },
+        { value: '4', x: 30, y: 180 },
+      ],
+      [
+        { from: 0, to: 1 },
+        { from: 1, to: 2 },
+        { from: 2, to: 3 },
+      ]
+    );
+
+    /* Complete tree (7 nodes) */
+    drawTree(
+      completeSvg.current,
+      [
+        { value: '1', x: 60, y: 30 },
+        { value: '2', x: 30, y: 80 },
+        { value: '3', x: 90, y: 80 },
+        { value: '4', x: 15, y: 130 },
+        { value: '5', x: 45, y: 130 },
+        { value: '6', x: 75, y: 130 },
+        { value: '7', x: 105, y: 130 },
+      ],
+      [
+        { from: 0, to: 1 },
+        { from: 0, to: 2 },
+        { from: 1, to: 3 },
+        { from: 1, to: 4 },
+        { from: 2, to: 5 },
+        { from: 2, to: 6 },
+      ]
+    );
+  }, []);
+
+  /* ------------- textual content ------------- */
+  const defFull = [
+    { points: 'Every internal node has exactly two children' },
+    { points: 'All leaves are on the same or adjacent levels' },
+    { points: 'Maximum nodes for height h = 2^(h+1) – 1' },
+  ];
+  const defDegenerate = [
+    { points: 'Each parent has only one child (left or right)' },
+    { points: 'Effectively a linked list → Θ(n) height' },
+    { points: 'Worst-case BST shape when data is sorted' },
+  ];
+  const defComplete = [
+    { points: 'All levels fully filled except possibly the last' },
+    { points: 'Last-level nodes are packed from the left' },
+    { points: 'Array-based heap relies on this structure' },
+  ];
+  const identify = [
+    { points: 'Count children for every node' },
+    { points: 'If any node has exactly one child → not full' },
+    { points: 'If height = n – 1 → degenerate / skewed' },
+    { points: 'If level-order scan finds a gap before last node → not complete' },
+  ];
+
+  return (
+    <main className="max-w-4xl mx-auto">
+      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+        {/* Quick tags */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Three Types
+          </h1>
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-center">
+            {['Full Binary Tree', 'Degenerate / Skewed', 'Complete Binary Tree'].map(
+              (t) => (
+                <div
+                  key={t}
+                  className="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg shadow-sm"
+                >
+                  {t}
+                </div>
+              )
+            )}
+          </div>
+        </section>
+
+        {/* GSAP trees */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Visual Comparison
+          </h1>
+
+          <div className="space-y-10">
+            {[
+              {
+                title: 'Full Binary Tree',
+                svgRef: fullSvg,
+                description: 'A Full Binary Tree is a type of binary tree in which every node has either 0 or 2 children. It is perfectly structured, and all internal nodes have exactly two children while leaves are aligned at the same or adjacent levels, making it balanced for operations and ideal for understanding fundamental tree structures.'
+              },
+              {
+                title: 'Degenerate (Skewed) Tree',
+                svgRef: degenSvg,
+                description: 'A Degenerate or Skewed Tree is a tree where each parent has only one child, making it essentially a linked list. It has the worst-case height of Θ(n), which can occur in unbalanced binary search trees when inserting sorted data without balancing, leading to inefficient operations.'
+              },
+              {
+                title: 'Complete Binary Tree',
+                svgRef: completeSvg,
+                description: 'A Complete Binary Tree is a binary tree in which all levels are fully filled except possibly the last, which is filled from left to right. It is the structure used by heaps, ensuring operations can be performed efficiently with predictable height and balanced shape.'
+              },
+            ].map(({ title, svgRef, description }, i) => (
+              <div key={i} className="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
+                <div className="flex justify-center">
+                  <svg
+                    ref={svgRef}
+                    viewBox="0 0 120 210"
+                    className="w-full max-w-[200px] h-[200px] rounded bg-white dark:bg-gray-800"
+                  ></svg>
+                </div>
+                <div>
+                  <h3 className="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">{title}</h3>
+                  <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">{description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Structural Rules */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Structural Rules
+          </h1>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {[defFull, defDegenerate, defComplete].map((rules, idx) => (
+              <div
+                key={idx}
+                className="border border-black/10 dark:border-gray-400 rounded-lg p-4 bg-white dark:bg-gray-800 shadow-md"
+              >
+                <h2 className="text-lg font-bold mb-2">
+                  {['Full', 'Degenerate', 'Complete'][idx]}
+                </h2>
+                <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                  {rules.map((r, i) => (
+                    <li key={i} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                      {r.points}
+                    </li>
+                  ))}
+                </ol>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Identification */}
+        <section className="p-6 border-b border-[#f3f4f6] dark:border-[#1e1e1e]">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            How to Identify a Type
+          </h1>
+          <div className="p-4 rounded-lg bg-gray-50 dark:bg-gray-700">
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {identify.map((r, i) => (
+                <li key={i} className="text-[#374151] dark:text-[#d1d5db] pl-2">
+                  {r.points}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Complexity */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+            Height & Complexity
+          </h1>
+          <div className="overflow-x-auto">
+            <table className="min-w-full border-collapse border border-gray-400">
+              <thead className="bg-gray-100 dark:bg-gray-700">
+                <tr>
+                  <th className="border border-gray-400 p-3">Tree Type</th>
+                  <th className="border border-gray-400 p-3">Height</th>
+                  <th className="border border-gray-400 p-3 hidden sm:table-cell">
+                    Search/Insert/Delete
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {[
+                  ['Full (balanced)', 'Θ(log n)', 'Θ(log n)'],
+                  ['Complete', 'Θ(log n)', 'Θ(log n)'],
+                  ['Degenerate / Skewed', 'Θ(n)', 'Θ(n)'],
+                ].map(([t, h, op], i) => (
+                  <tr
+                    key={t}
+                    className={i % 2 ? 'bg-gray-50 dark:bg-gray-700' : 'bg-white dark:bg-gray-800'}
+                  >
+                    <td className="border border-gray-400 p-3">{t}</td>
+                    <td className="border border-gray-400 p-3 font-mono">{h}</td>
+                    <td className="border border-gray-400 p-3 hidden sm:table-cell font-mono">
+                      {op}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+}
diff --git a/src/app/visualizer/tree/bst/TreeBSTVisualizer.jsx b/src/app/visualizer/tree/bst/TreeBSTVisualizer.jsx
new file mode 100644
index 000000000..86be67cf2
--- /dev/null
+++ b/src/app/visualizer/tree/bst/TreeBSTVisualizer.jsx
@@ -0,0 +1,1111 @@
+"use client";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import Footer from "@/app/components/footer";
+import usePlayback from "@/app/hooks/usePlayback";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
+import { createVisualizerPaths } from "@/app/visualizer/components/VisualizerPageLayout";
+import { generateDeleteSteps } from "@/features/algorithms/tree/bstDeleteLogic";
+import { generateInOrderSteps } from "@/features/algorithms/tree/bstInOrderLogic";
+import { generatePreOrderSteps } from "@/features/algorithms/tree/bstPreOrderLogic";
+import { CustomInputPanel } from "@/app/visualizer/components/CustomInputPanel";
+import {
+  Info,
+  Layers,
+  BookOpen,
+  Award,
+  CheckCircle,
+  AlertCircle
+} from "lucide-react";
+
+class TreeNode {
+  constructor(value) {
+    this.value = value;
+    this.left = null;
+    this.right = null;
+  }
+}
+
+// functional BST insertion
+const insertNodeFunctional = (node, value) => {
+  if (!node) return new TreeNode(value);
+  if (value < node.value) {
+    return { ...node, left: insertNodeFunctional(node.left, value) };
+  } else if (value > node.value) {
+    return { ...node, right: insertNodeFunctional(node.right, value) };
+  }
+  return node;
+};
+
+// functional BST deletion
+const deleteNodeFunctional = (node, value) => {
+  if (!node) return null;
+  if (value < node.value) {
+    return { ...node, left: deleteNodeFunctional(node.left, value) };
+  } else if (value > node.value) {
+    return { ...node, right: deleteNodeFunctional(node.right, value) };
+  } else {
+    if (!node.left) return node.right;
+    if (!node.right) return node.left;
+
+    let succ = node.right;
+    while (succ.left) {
+      succ = succ.left;
+    }
+    const updatedNode = { ...node, value: succ.value };
+    updatedNode.right = deleteNodeFunctional(node.right, succ.value);
+    return updatedNode;
+  }
+};
+
+const hasDuplicate = (node, value) => {
+  if (!node) return false;
+  if (value === node.value) return true;
+  if (value < node.value) return hasDuplicate(node.left, value);
+  return hasDuplicate(node.right, value);
+};
+
+const pseudocode = {
+  searching: [
+    "Node search(Node root, int key) {",
+    "  if (root == null || root.key == key)",
+    "    return root;",
+    "  if (key < root.key)",
+    "    return search(root.left, key);",
+    "  return search(root.right, key);",
+    "}"
+  ],
+  insertion: [
+    "Node insert(Node root, int key) {",
+    "  if (root == null)",
+    "    return new Node(key);",
+    "  if (key < root.key)",
+    "    root.left = insert(root.left, key);",
+    "  else if (key > root.key)",
+    "    root.right = insert(root.right, key);",
+    "  return root;",
+    "}"
+  ],
+  deletion: [
+    "Node delete(Node root, int key) {",
+    "  if (root == null) return null;",
+    "  if (key < root.key) root.left = delete(root.left, key);",
+    "  else if (key > root.key) root.right = delete(root.right, key);",
+    "  else {",
+    "    if (root.left == null) return root.right;",
+    "    if (root.right == null) return root.left;",
+    "    Node succ = getSuccessor(root.right);",
+    "    root.key = succ.key;",
+    "    root.right = delete(root.right, succ.key);",
+    "  }",
+    "  return root;",
+    "}"
+  ],
+  "in-order": [
+    "inOrder(node) {",
+    "  if (node == null) return;",
+    "  inOrder(node.left);",
+    "  visit(node);",
+    "  inOrder(node.right);",
+    "}"
+  ],
+  "pre-order": [
+    "preOrder(node) {",
+    "  if (node == null) return;",
+    "  visit(node);",
+    "  preOrder(node.left);",
+    "  preOrder(node.right);",
+    "}"
+  ],
+  "post-order": [
+    "postOrder(node) {",
+    "  if (node == null) return;",
+    "  postOrder(node.left);",
+    "  postOrder(node.right);",
+    "  visit(node);",
+    "}"
+  ]
+};
+
+const complexityInfo = {
+  searching: {
+    time: "O(h)",
+    timeDesc: "Where h is the height of the tree. In a balanced BST, h = O(log N). In a skewed tree, it degrades to O(N).",
+    space: "O(h)",
+    spaceDesc: "Takes O(h) space due to recursion stack frames. Can be optimized to O(1) space if implemented iteratively."
+  },
+  insertion: {
+    time: "O(h)",
+    timeDesc: "Where h is the height of the tree. Traverses the depth of the tree to find the correct leaf node location.",
+    space: "O(h)",
+    spaceDesc: "Occupies O(h) recursion stack space. Storing/updating node pointers recursively consumes depth-related call stacks."
+  },
+  deletion: {
+    time: "O(h)",
+    timeDesc: "Where h is the height of the tree. Finding the successor or predecessor in Case 3 requires traversing the right child's left spine.",
+    space: "O(h)",
+    spaceDesc: "Recursively rebuilds subtrees from leaf to pivot point, requiring O(h) call stack memory."
+  },
+  "in-order": {
+    time: "O(N)",
+    timeDesc: "Every node in the tree is visited exactly once.",
+    space: "O(H)",
+    spaceDesc: "H is the height of the tree. The call stack grows with the depth of the recursion."
+  },
+  "pre-order": {
+    time: "O(N)",
+    timeDesc: "Every node in the tree is visited exactly once.",
+    space: "O(H)",
+    spaceDesc: "H is the height of the tree. The call stack grows with the depth of the recursion."
+  },
+  "post-order": {
+    time: "O(N)",
+    timeDesc: "Every node in the tree is visited exactly once.",
+    space: "O(H)",
+    spaceDesc: "H is the height of the tree. The call stack grows with the depth of the recursion."
+  }
+};
+
+const traversalModes = ["in-order", "pre-order", "post-order"];
+
+const quizzes = {
+  searching: [
+    {
+      question: "What is the worst-case search time complexity in a skewed Binary Search Tree of N nodes?",
+      options: ["O(log N)", "O(N)", "O(N log N)", "O(1)"],
+      answer: 1,
+      explanation: "In a skewed BST (where every node has only one child, forming a straight line), searching behaves like a linear search on a linked list, degrading to O(N) time."
+    },
+    {
+      question: "Which child do we traverse to if the search key is less than the current node's key?",
+      options: ["Right child", "Left child", "Inorder Successor", "Parent node"],
+      answer: 1,
+      explanation: "By definition, all keys in a node's left subtree are smaller than the node's key, and all keys in the right subtree are larger. So we traverse to the left child."
+    }
+  ],
+  insertion: [
+    {
+      question: "Where are new nodes always inserted in a standard Binary Search Tree?",
+      options: ["As a new root", "As a leaf node", "As an internal parent", "Replacing the predecessor"],
+      answer: 1,
+      explanation: "In a standard BST, insertions always result in creating a new leaf node at the bottom of the tree once a null reference is reached."
+    },
+    {
+      question: "What happens if we try to insert a duplicate value that already exists in the BST?",
+      options: ["It replaces the root", "It is placed in the left subtree", "It is usually ignored or increments a count", "It triggers a tree split"],
+      answer: 2,
+      explanation: "For visual and conceptual clarity, duplicate values are typically ignored or not allowed in standard BST animations to keep coordinates clean."
+    }
+  ],
+  deletion: [
+    {
+      question: "How do we delete a node that has two children in a BST?",
+      options: [
+        "Delete it and let the children hang",
+        "Replace it with either inorder successor or inorder predecessor, then delete that leaf",
+        "Promote the left child to root immediately",
+        "Delete both children recursively first"
+      ],
+      answer: 1,
+      explanation: "To preserve BST properties, a node with two children is replaced by its inorder successor (min of right subtree) or inorder predecessor (max of left subtree). The successor's duplicate is then recursively deleted."
+    },
+    {
+      question: "What is the inorder successor of a node in a BST?",
+      options: [
+        "The rightmost node in the left subtree",
+        "The leftmost node in the right subtree",
+        "The parent node",
+        "The closest sibling leaf"
+      ],
+      answer: 1,
+      explanation: "The inorder successor represents the smallest value that is larger than the target node's value. This is located by going to the right child and then following the left pointers to the very bottom."
+    }
+  ],
+  "in-order": [
+    {
+      question: "What is the visiting order of In-Order traversal?",
+      options: [
+        "Root, Left, Right",
+        "Left, Root, Right",
+        "Left, Right, Root",
+        "Right, Root, Left"
+      ],
+      answer: 1,
+      explanation: "In-Order traversal first visits the left subtree, then the current node, then the right subtree."
+    }
+  ],
+  "pre-order": [
+    {
+      question: "What is the visiting order of Pre-Order traversal?",
+      options: [
+        "Root, Left, Right",
+        "Left, Root, Right",
+        "Left, Right, Root",
+        "Right, Root, Left"
+      ],
+      answer: 0,
+      explanation: "Pre-Order traversal visits the current node before exploring its children."
+    }
+  ],
+  "post-order": [
+    {
+      question: "What is the visiting order of Post-Order traversal?",
+      options: [
+        "Root, Left, Right",
+        "Left, Root, Right",
+        "Left, Right, Root",
+        "Right, Root, Left"
+      ],
+      answer: 2,
+      explanation: "Post-Order traversal visits both subtrees before processing the current node."
+    }
+  ]
+};
+
+export default function TreeBSTVisualizer({ initialMode }) {
+  const [mode, setMode] = useState(initialMode);
+  const [root, setRoot] = useState(null);
+  const [targetTreeRoot, setTargetTreeRoot] = useState(null);
+  const [inputValue, setInputValue] = useState("");
+  const [activeOperationValue, setActiveOperationValue] = useState(null);
+  const [steps, setSteps] = useState([]);
+  const [currentStepIdx, setCurrentStepIdx] = useState(-1);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [message, setMessage] = useState("Add nodes or select a mode to begin.");
+  const [quizIdx, setQuizIdx] = useState(0);
+  const [selectedOption, setSelectedOption] = useState(null);
+  const [quizSubmitted, setQuizSubmitted] = useState(false);
+
+  const { speed, setSpeed } = usePlayback(1);
+  const timerRef = useRef(null);
+  const lockRef = useRef(false);
+  const stepIdxRef = useRef(currentStepIdx);
+  const isAnimatingRef = useRef(isAnimating);
+
+  useEffect(() => { stepIdxRef.current = currentStepIdx; }, [currentStepIdx]);
+  useEffect(() => { isAnimatingRef.current = isAnimating; }, [isAnimating]);
+
+  const resetPlayback = useCallback(() => {
+    setIsAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    lockRef.current = false;
+    setCurrentStepIdx(-1);
+    setSteps([]);
+    setMessage("Playback reset. Click Start to begin operations.");
+  }, []);
+
+  // Sync mode changes
+  useEffect(() => {
+    setMode(initialMode);
+    resetPlayback();
+  }, [initialMode, resetPlayback]);
+
+  const handleInsert = (customValue) => {
+    const val = customValue !== undefined ? customValue : parseInt(inputValue);
+    if (isNaN(val) || val < 1 || val > 99) {
+      setMessage("⚠️ Please enter a number between 1 and 99");
+      return;
+    }
+
+    if (hasDuplicate(root, val)) {
+      setMessage(`⚠️ Node ${val} already exists in the tree!`);
+      return;
+    }
+
+    if (mode === "insertion") {
+      resetPlayback();
+      setActiveOperationValue(val);
+      const newRoot = insertNodeFunctional(root, val);
+      setTargetTreeRoot(newRoot);
+      const preCalculated = generateInsertSteps(root, val);
+      setSteps(preCalculated);
+      setCurrentStepIdx(0);
+      setIsAnimating(true);
+      setInputValue("");
+    } else {
+      setRoot(prev => insertNodeFunctional(prev, val));
+      setMessage(`Inserted Node ${val} into BST.`);
+      setInputValue("");
+    }
+  };
+
+  const handleSearch = () => {
+    const val = parseInt(inputValue);
+    if (isNaN(val)) {
+      setMessage("⚠️ Please enter a valid number");
+      return;
+    }
+    if (!root) {
+      setMessage("⚠️ Tree is empty! Insert nodes first.");
+      return;
+    }
+
+    resetPlayback();
+    setActiveOperationValue(val);
+    const preCalculated = generateSearchSteps(root, val);
+    setSteps(preCalculated);
+    setCurrentStepIdx(0);
+    setIsAnimating(true);
+    setInputValue("");
+  };
+
+  const handleDelete = () => {
+    const val = parseInt(inputValue);
+    if (isNaN(val)) {
+      setMessage("⚠️ Please enter a valid number");
+      return;
+    }
+    if (!root) {
+      setMessage("⚠️ Tree is empty!");
+      return;
+    }
+
+    if (!hasDuplicate(root, val)) {
+      setMessage(`⚠️ Node ${val} does not exist in the tree!`);
+      return;
+    }
+
+    resetPlayback();
+    setActiveOperationValue(val);
+    const newRoot = deleteNodeFunctional(root, val);
+    setTargetTreeRoot(newRoot);
+    const preCalculated = generateDeleteSteps(root, val);
+    setSteps(preCalculated);
+    setCurrentStepIdx(0);
+    setIsAnimating(true);
+    setInputValue("");
+  };
+
+  const generateRandomTree = useCallback(() => {
+    resetPlayback();
+    const trees = [
+      [40, 20, 60, 10, 30, 50, 70],
+      [50, 30, 70, 15, 35, 62, 85],
+      [45, 25, 75, 12, 37, 60, 88]
+    ];
+    const sequence = trees[Math.floor(Math.random() * trees.length)];
+    let newRoot = null;
+    sequence.forEach(val => {
+      newRoot = insertNodeFunctional(newRoot, val);
+    });
+    setRoot(newRoot);
+    setTargetTreeRoot(newRoot);
+    setMessage(`Generated beautiful BST with ${sequence.length} nodes.`);
+  }, [resetPlayback]);
+
+  const handleCustomTreeInput = useCallback((parsedArray) => {
+    if (parsedArray === null) {
+      generateRandomTree();
+    } else {
+      resetPlayback();
+      let newRoot = null;
+      parsedArray.forEach(val => {
+        newRoot = insertNodeFunctional(newRoot, val);
+      });
+      setRoot(newRoot);
+      setTargetTreeRoot(newRoot);
+      setMessage(`Generated custom BST with ${parsedArray.length} nodes.`);
+    }
+  }, [generateRandomTree, resetPlayback]);
+
+
+
+
+
+
+
+
+
+
+
+
+
+  const preCalculateSteps = () => {
+    if (!root) return [];
+
+    switch (mode) {
+      case "searching":
+        return generateSearchSteps(root, activeOperationValue ?? parseInt(inputValue));
+      case "insertion":
+        return inputValue ? generateInsertSteps(root, parseInt(inputValue)) : [];
+      case "deletion":
+        return generateDeleteSteps(root, activeOperationValue ?? parseInt(inputValue));
+      case "in-order":
+        return generateInOrderSteps(root);
+      case "pre-order":
+        return generatePreOrderSteps(root);
+      case "post-order":
+        return generatePostOrderSteps(root);
+      default:
+        return [];
+    }
+  };
+
+  const startVisualizer = () => {
+    if (!root && mode !== "insertion") {
+      setMessage("⚠️ Please generate a random tree or enter an insert element first!");
+      return;
+    }
+
+    if (traversalModes.includes(mode)) {
+      if (steps.length === 0) {
+        const preCalculated = preCalculateSteps();
+        if (preCalculated.length === 0) {
+          setMessage("⚠️ Please generate a random tree first!");
+          return;
+        }
+        setSteps(preCalculated);
+        setCurrentStepIdx(0);
+        setIsAnimating(true);
+        return;
+      }
+    }
+
+    if (mode === "searching" || mode === "deletion") {
+      if (inputValue) {
+        mode === "searching" ? handleSearch() : handleDelete();
+        return;
+      }
+      if (steps.length === 0) {
+        setMessage("⚠️ Please enter a target value in the input box to visualize!");
+        return;
+      }
+    }
+
+    if (mode === "insertion" && inputValue) {
+      handleInsert();
+      return;
+    }
+
+    setIsAnimating(true);
+    setQuizSubmitted(false);
+    setSelectedOption(null);
+
+    let nextIdx = currentStepIdx === -1 || currentStepIdx >= steps.length - 1 ? 0 : currentStepIdx + 1;
+    setCurrentStepIdx(nextIdx);
+  };
+
+  useEffect(() => {
+    if (!isAnimating || steps.length === 0 || lockRef.current) return;
+
+    if (currentStepIdx >= steps.length) {
+      setIsAnimating(false);
+      return;
+    }
+
+    const currentStep = steps[currentStepIdx];
+    setMessage(currentStep.explanation);
+
+    lockRef.current = true;
+
+    timerRef.current = setTimeout(() => {
+      lockRef.current = false;
+      if (stepIdxRef.current < steps.length - 1) {
+        setCurrentStepIdx(prev => prev + 1);
+      } else {
+        setIsAnimating(false);
+        if (mode === "insertion" || mode === "deletion") {
+          setRoot(targetTreeRoot);
+          setMessage("Operation completed successfully!");
+        } else {
+          setMessage(currentStep.explanation);
+        }
+      }
+    }, 1800 / speed);
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [isAnimating, currentStepIdx, steps, speed, targetTreeRoot, mode]);
+
+  const pauseVisualizer = () => {
+    setIsAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    lockRef.current = false;
+  };
+
+  const stepForward = () => {
+    if (lockRef.current) return;
+    setIsAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    if (stepIdxRef.current < steps.length - 1) {
+      setCurrentStepIdx(prev => prev + 1);
+      if (stepIdxRef.current === steps.length - 2 && (mode === "insertion" || mode === "deletion")) {
+        setRoot(targetTreeRoot);
+      }
+    }
+  };
+
+  const stepBackward = () => {
+    if (lockRef.current) return;
+    setIsAnimating(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    if (stepIdxRef.current > 0) {
+      setCurrentStepIdx(prev => prev - 1);
+    }
+  };
+
+  const handleResetTree = () => {
+    setRoot(null);
+    setTargetTreeRoot(null);
+    resetPlayback();
+    setMessage("Tree has been cleared. Add nodes or click Generate.");
+  };
+
+  const handleQuizAnswer = (idx) => {
+    if (quizSubmitted) return;
+    setSelectedOption(idx);
+  };
+
+  const submitQuiz = () => {
+    if (selectedOption === null) return;
+    setQuizSubmitted(true);
+  };
+
+  const nextQuizQuestion = () => {
+    setSelectedOption(null);
+    setQuizSubmitted(false);
+    const questionsList = quizzes[mode];
+    setQuizIdx(prev => (prev + 1) % questionsList.length);
+  };
+
+  const calculateCoordinates = (node, x = 400, y = 60, level = 0, nodesList = [], edgesList = []) => {
+    if (!node) return { nodesList, edgesList };
+
+    const nodeRadius = 24;
+    const xOffset = 260 / Math.pow(2, level);
+    const yOffset = 80;
+
+    const currentStep = steps[currentStepIdx];
+    const highlightedState = currentStep?.highlightedNodes?.[node.value] || null;
+
+    nodesList.push({
+      value: node.value,
+      x,
+      y,
+      state: highlightedState,
+      isVisited: currentStep?.visited?.includes(node.value) || false
+    });
+
+    if (node.left) {
+      const leftX = x - xOffset;
+      const leftY = y + yOffset;
+      edgesList.push({
+        x1: x,
+        y1: y + nodeRadius,
+        x2: leftX,
+        y2: leftY - nodeRadius,
+      });
+      calculateCoordinates(node.left, leftX, leftY, level + 1, nodesList, edgesList);
+    }
+
+    if (node.right) {
+      const rightX = x + xOffset;
+      const rightY = y + yOffset;
+      edgesList.push({
+        x1: x,
+        y1: y + nodeRadius,
+        x2: rightX,
+        y2: rightY - nodeRadius,
+      });
+      calculateCoordinates(node.right, rightX, rightY, level + 1, nodesList, edgesList);
+    }
+
+    return { nodesList, edgesList };
+  };
+
+  const buildTreeRenderData = () => {
+    const currentStep = steps[currentStepIdx];
+    const showInsertedNode = currentStep?.isNodeCreated || false;
+
+    // Use the animated target tree only during write operations.
+    const activeTree = (mode === "insertion" || mode === "deletion")
+      ? ((mode === "insertion" && !showInsertedNode) ? root : targetTreeRoot || root)
+      : root;
+
+    if (!activeTree) return { renderNodes: [], renderEdges: [] };
+    const { nodesList, edgesList } = calculateCoordinates(activeTree);
+    return { renderNodes: nodesList, renderEdges: edgesList };
+  };
+
+  const { renderNodes, renderEdges } = buildTreeRenderData();
+
+  const getSvgDimensions = () => {
+    if (renderNodes.length === 0) return { width: 800, height: 400, viewBoxOffset: 0 };
+    const xCoords = renderNodes.map(n => n.x);
+    const yCoords = renderNodes.map(n => n.y);
+
+    const minX = Math.min(...xCoords);
+    const maxX = Math.max(...xCoords);
+    const maxY = Math.max(...yCoords);
+
+    const padding = 60;
+    const computedWidth = maxX - minX + padding * 2;
+    const computedHeight = maxY + padding * 1.5;
+
+    return {
+      width: Math.max(800, computedWidth),
+      height: Math.max(380, computedHeight),
+      viewBoxOffset: minX - padding
+    };
+  };
+
+  const svgDimensions = getSvgDimensions();
+
+  useEffect(() => {
+    generateRandomTree();
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      lockRef.current = false;
+    };
+  }, [generateRandomTree]);
+
+  const currentStep = steps[currentStepIdx] || null;
+  const currentHighlightLine = currentStep ? currentStep.codeLine : -1;
+  const activeComplexity = complexityInfo[mode];
+  const activeQuizList = quizzes[mode];
+  const activeQuestion = activeQuizList[quizIdx];
+  const isTraversalMode = traversalModes.includes(mode);
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-slate-900 dark:text-slate-100 font-sans flex flex-col antialiased selection:bg-indigo-500/30 selection:text-indigo-200">
+
+      <main className="flex-1 w-full max-w-7xl mx-auto px-4 md:px-8 py-24 flex flex-col gap-8">
+        <div className="w-full">
+          <Breadcrumbs paths={createVisualizerPaths("Tree", "Binary Search Tree", mode.split("-").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(" "))} />
+        </div>
+        
+        {/* Title Block */}
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 border-b border-slate-200 dark:border-slate-800 pb-6">
+          <div>
+            <div className="flex items-center gap-2 mb-2 text-xs font-semibold uppercase tracking-wider text-indigo-600 bg-indigo-50 dark:text-indigo-400 dark:bg-indigo-950/40 px-3 py-1 rounded-full w-fit border border-indigo-100 dark:border-indigo-900/50">
+              <Layers className="w-3.5 h-3.5" /> BST Interactive Operations
+            </div>
+            <h1 className="text-3xl md:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-slate-900 via-indigo-600 to-indigo-400 dark:from-white dark:via-indigo-200 dark:to-indigo-400 capitalize">
+              {mode.replace("-", " ")}
+            </h1>
+            <p className="text-sm text-slate-600 dark:text-slate-400 mt-1 max-w-xl">
+              Visualize binary search trees, node path traversals, element insertions, and structural node deletions.
+            </p>
+          </div>
+
+          {/* Mode Selector Tabs */}
+          <div className="flex flex-wrap gap-1.5 bg-gray-100 dark:bg-slate-900/90 p-1.5 rounded-xl border border-gray-300 dark:border-slate-800">
+            {["searching", "insertion", "deletion", "in-order", "pre-order", "post-order"].map(tab => (
+              <button
+                key={tab}
+                onClick={() => {
+                  setMode(tab);
+                  resetPlayback();
+                }}
+                className={`px-3 py-1.5 text-xs font-semibold rounded-lg capitalize transition-all ${
+                  mode === tab
+                    ? "bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-md shadow-indigo-950"
+                    : "text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 hover:bg-gray-200 dark:hover:bg-slate-800/50"
+                }`}
+              >
+                {tab.replace("-", " ")}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Dashboard Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
+          
+          {/* LEFT: Tree Workspace & Control cards */}
+          <div className="lg:col-span-8 flex flex-col gap-6">
+            
+            <div className="bg-white dark:bg-[#111] backdrop-blur-xl border border-gray-200 dark:border-[#222] p-5 rounded-2xl flex flex-col md:flex-row gap-5 justify-between items-center shadow-lg shadow-black/20">
+              {/* Insert / Search / Delete input controls */}
+              <div className="flex flex-col sm:flex-row gap-2.5 w-full md:w-auto">
+                <button
+                  onClick={generateRandomTree}
+                  disabled={isAnimating}
+                  className="px-4 py-2 text-xs font-bold bg-gray-900 hover:bg-slate-800 dark:bg-[#1a1a1a] dark:hover:bg-[#2a2a2a] text-white rounded-xl transition-all border border-gray-200 dark:border-[#333] disabled:opacity-40"
+                >
+                  🎲 Random BST
+                </button>
+                <div className="flex gap-1.5 flex-1 sm:flex-initial">
+                  <input
+                    type="number"
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    placeholder={isTraversalMode ? "Traversal uses the current tree" : mode === "searching" ? "Find key (1-99)" : mode === "deletion" ? "Delete key" : "Insert key (1-99)"}
+                    className="w-full sm:w-28 px-3 py-2 text-xs bg-white dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] rounded-xl text-slate-900 dark:text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors"
+                    disabled={isAnimating}
+                    onKeyDown={(e) => e.key === "Enter" && (isTraversalMode ? startVisualizer() : mode === "searching" ? handleSearch() : mode === "deletion" ? handleDelete() : handleInsert())}
+                  />
+                  <button
+                    onClick={() => (isTraversalMode ? startVisualizer() : mode === "searching" ? handleSearch() : mode === "deletion" ? handleDelete() : handleInsert())}
+                    disabled={isAnimating}
+                    className="px-3.5 py-2 text-xs font-bold bg-indigo-600 hover:bg-indigo-500 disabled:bg-indigo-900 disabled:opacity-40 text-white rounded-xl transition-all font-semibold"
+                  >
+                    {isTraversalMode ? "Traverse" : mode === "searching" ? "Search" : mode === "deletion" ? "Delete" : "Insert"}
+                  </button>
+                </div>
+              </div>
+
+              {/* Playback Controls */}
+              <PlaybackControls
+                isPlaying={isAnimating}
+                onPlayPause={isAnimating ? pauseVisualizer : startVisualizer}
+                onStepForward={stepForward}
+                onStepBackward={stepBackward}
+                onReset={resetPlayback}
+                onClear={handleResetTree}
+                clearLabel="Clear Tree"
+                speed={speed}
+                onSpeedChange={setSpeed}
+                disabled={steps.length === 0 && !isAnimating}
+                showPlayPause={true}
+                progressText={`Step ${currentStepIdx !== -1 ? currentStepIdx + 1 : 0} / ${steps.length || 0}`}
+              />
+            </div>
+
+            {/* Explanation Area */}
+            <div className="bg-white dark:bg-[#111] border border-gray-200 dark:border-[#222] rounded-2xl p-4 flex flex-col gap-2">
+              <div className="flex justify-between items-center text-xs">
+                <span className="text-slate-600 dark:text-slate-400 font-semibold flex items-center gap-1.5">
+                  <Info className="w-3.5 h-3.5 text-indigo-400" /> Action Explanation
+                </span>
+                <span className="text-slate-600 dark:text-slate-400 font-bold bg-gray-100 dark:bg-[#1a1a1a] px-2.5 py-0.5 rounded-full border border-gray-300 dark:border-[#333]">
+                  Step {currentStepIdx !== -1 ? currentStepIdx + 1 : 0} / {steps.length || 0}
+                </span>
+              </div>
+              <div
+                className="text-[14px] leading-relaxed min-h-[24px] text-center text-slate-600 dark:text-slate-400"
+              >
+                {message}
+              </div>
+            </div>
+
+            {/* Trees SVG Render Canvas */}
+            <div className="bg-white dark:bg-[#111] border border-gray-200 dark:border-[#222] rounded-3xl p-6 shadow-inner relative overflow-hidden flex flex-col justify-center min-h-[440px] items-center">
+              
+              {/* Dynamic Legend Labels */}
+              <div className="absolute top-4 left-4 flex flex-wrap gap-2 text-xs">
+                <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] px-2.5 py-1 rounded-lg">
+                  <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-md shadow-emerald-950/20"></span>
+                  <span className="text-slate-600 dark:text-slate-400">Comparing (visiting)</span>
+                </div>
+                <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] px-2.5 py-1 rounded-lg">
+                  <span className="w-2.5 h-2.5 rounded-full bg-primary shadow-md shadow-purple-950/20"></span>
+                  <span className="text-slate-600 dark:text-slate-400">Path Traversed</span>
+                </div>
+                {mode === "searching" && (
+                  <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] px-2.5 py-1 rounded-lg">
+                    <span className="w-2.5 h-2.5 rounded-full bg-amber-500 shadow-md shadow-amber-950/20"></span>
+                    <span className="text-slate-600 dark:text-slate-400">Node Found!</span>
+                  </div>
+                )}
+                {mode === "insertion" && (
+                  <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] px-2.5 py-1 rounded-lg">
+                    <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-md shadow-emerald-950/20 animate-pulse"></span>
+                    <span className="text-slate-600 dark:text-slate-400">Newly Placed Leaf</span>
+                  </div>
+                )}
+                {mode === "deletion" && (
+                  <>
+                    <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] px-2.5 py-1 rounded-lg">
+                      <span className="w-2.5 h-2.5 rounded-full bg-rose-500 shadow-md shadow-rose-950/20"></span>
+                      <span className="text-slate-600 dark:text-slate-400">Deleted (removal)</span>
+                    </div>
+                    <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] px-2.5 py-1 rounded-lg">
+                      <span className="w-2.5 h-2.5 rounded-full bg-purple-500 shadow-md shadow-purple-950/20"></span>
+                      <span className="text-slate-600 dark:text-slate-400">Inorder Successor</span>
+                    </div>
+                  </>
+                )}
+              </div>
+
+              {renderNodes.length > 0 ? (
+                <div className="overflow-auto w-full flex justify-center py-6">
+                  <svg
+                    width={svgDimensions.width}
+                    height={svgDimensions.height}
+                    viewBox={`${svgDimensions.viewBoxOffset} 0 ${svgDimensions.width} ${svgDimensions.height}`}
+                    className="max-w-full h-auto transition-transform duration-300"
+                  >
+                    {/* Render Edges */}
+                    {renderEdges.map((edge, idx) => (
+                      <line
+                        key={`edge-${idx}`}
+                        x1={edge.x1}
+                        y1={edge.y1}
+                        x2={edge.x2}
+                        y2={edge.y2}
+                        className="stroke-slate-300 dark:stroke-slate-700"
+                        strokeWidth="2.5"
+                      />
+                    ))}
+
+                    {/* Render Nodes */}
+                    {renderNodes.map((node, idx) => {
+                      const isCurr = node.state === "visiting" || node.state === "visiting-succ";
+                      const isFound = node.state === "found";
+                      const isInserted = node.state === "inserted";
+                      const isDeleted = node.state === "deleted";
+                      const isPred = node.state === "predecessor";
+                      const isVisited = node.isVisited;
+                      const swapValues = currentStep?.swapValues || null;
+                      const isSwapPhase = currentStep?.stepType === "swap-values" || currentStep?.stepType === "delete-successor";
+                      const displayValue = swapValues && isSwapPhase
+                        ? (node.value === swapValues.targetValue
+                            ? swapValues.successorValue
+                            : node.value === swapValues.successorValue
+                              ? swapValues.targetValue
+                              : node.value)
+                        : node.value;
+
+                      let fillHex = "#0f172a";
+                      let strokeHex = "#334155";
+
+                      if (isCurr) {
+                        fillHex = "#10b981"; // emerald-500
+                        strokeHex = "#34d399";
+                      } else if (isFound) {
+                        fillHex = "#f59e0b"; // amber-500
+                        strokeHex = "#fbbf24";
+                      } else if (isInserted) {
+                        fillHex = "#10b981"; // emerald-500
+                        strokeHex = "#34d399";
+                      } else if (isDeleted) {
+                        fillHex = "#ef4444"; // red-500
+                        strokeHex = "#f87171";
+                      } else if (isPred) {
+                        fillHex = "#a855f7"; // purple-500
+                        strokeHex = "#c084fc";
+                      } else if (isVisited) {
+                        fillHex = "#3b82f6"; // blue-500
+                        strokeHex = "#60a5fa";
+                      }
+
+                      return (
+                        <g key={`node-${idx}`} className="transition-all duration-300">
+                          {/* Glow ring */}
+                          {(isCurr || isFound || isPred || isInserted || isDeleted) && (
+                            <circle
+                              cx={node.x}
+                              cy={node.y}
+                              r="28"
+                              fill="none"
+                              stroke={strokeHex}
+                              strokeWidth="1.5"
+                              strokeDasharray="4,2"
+                              className="animate-spin-slow opacity-60"
+                            />
+                          )}
+
+                          {/* Node Circle */}
+                          <circle
+                            cx={node.x}
+                            cy={node.y}
+                            r="21"
+                            fill={fillHex}
+                            stroke={strokeHex}
+                            strokeWidth="2.5"
+                            className="transition-all duration-300 shadow-xl shadow-black"
+                          />
+
+                          {/* Node Value Label */}
+                          <text
+                            x={node.x}
+                            y={node.y + 4.5}
+                            textAnchor="middle"
+                            className="fill-white dark:fill-slate-800"
+                            fontSize="12"
+                            fontWeight="bold"
+                          >
+                            {displayValue}
+                          </text>
+
+                          {/* Label labels */}
+                          {isCurr && node.state === "visiting" && (
+                            <g transform={`translate(${node.x - 22}, ${node.y - 35})`}>
+                              <rect width="44" height="15" rx="4" className="fill-emerald-700 dark:fill-emerald-600 stroke stroke-emerald-400" strokeWidth="0.5" />
+                              <text x="22" y="11" fill="white" fontSize="9" fontWeight="bold" textAnchor="middle">curr</text>
+                            </g>
+                          )}
+                          {isPred && (
+                            <g transform={`translate(${node.x - 22}, ${node.y - 35})`}>
+                              <rect width="44" height="15" rx="4" className="fill-purple-800 dark:fill-purple-700 stroke stroke-purple-400" strokeWidth="0.5" />
+                              <text x="22" y="11" fill="white" fontSize="9" fontWeight="bold" textAnchor="middle">succ</text>
+                            </g>
+                          )}
+                        </g>
+                      );
+                    })}
+                  </svg>
+                </div>
+              ) : (
+                <div className="flex flex-col items-center gap-2.5 text-slate-500 py-12">
+                  <AlertCircle className="w-10 h-10 text-slate-700" />
+                  <span className="text-sm font-semibold">Workspace Empty</span>
+                  <span className="text-xs max-w-xs text-center text-slate-600">Enter a value and click Insert, Search, or Delete to begin.</span>
+                </div>
+              )}
+            </div>
+
+            {/* Time / Space Complexity Cards */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+              <div className="bg-gray-50 dark:bg-slate-900/40 border border-gray-200 dark:border-slate-800/80 rounded-2xl p-5 flex flex-col gap-2">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <Layers className="w-4 h-4 text-emerald-400" />
+                    <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-200">Time Complexity</h3>
+                  </div>
+                  <span className="px-2 py-0.5 text-xs font-bold rounded bg-emerald-950/40 text-emerald-400 border border-emerald-900/50">
+                    {activeComplexity.time}
+                  </span>
+                </div>
+                <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed mt-1">
+                  {activeComplexity.timeDesc}
+                </p>
+              </div>
+
+              <div className="bg-gray-50 dark:bg-slate-900/40 border border-gray-200 dark:border-slate-800/80 rounded-2xl p-5 flex flex-col gap-2">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <Layers className="w-4 h-4 text-purple-400" />
+                    <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-200">Space Complexity</h3>
+                  </div>
+                  <span className="px-2 py-0.5 text-xs font-bold rounded bg-purple-950/40 text-purple-400 border border-purple-900/50">
+                    {activeComplexity.space}
+                  </span>
+                </div>
+                <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed mt-1">
+                  {activeComplexity.spaceDesc}
+                </p>
+              </div>
+            </div>
+
+          </div>
+
+          {/* RIGHT: Pseudocode & Quizzes */}
+          <div className="lg:col-span-4 flex flex-col gap-6 w-full">
+            
+            {/* Pseudocode Highlighter Card */}
+            <div className="bg-gray-50 dark:bg-slate-900/70 border border-gray-200 dark:border-slate-800 rounded-2xl p-5 flex flex-col shadow-lg shadow-black/20">
+              <div className="flex items-center gap-2 border-b border-slate-200 dark:border-slate-800 pb-3 mb-4">
+                <BookOpen className="w-4 h-4 text-indigo-400" />
+                <h2 className="text-sm font-bold uppercase tracking-wider text-slate-700 dark:text-slate-300">Pseudocode</h2>
+              </div>
+              <div className="flex flex-col gap-1 font-mono text-xs text-slate-700 dark:text-slate-400 bg-gray-50 dark:bg-[#1a1a1a] p-4 rounded-xl border border-gray-200 dark:border-[#333] overflow-x-auto leading-relaxed">
+                {pseudocode[mode].map((line, idx) => {
+                  const isHighlighted = idx === currentHighlightLine;
+                  return (
+                    <div
+                      key={`code-${idx}`}
+                      className={`flex gap-3 px-2 py-0.5 rounded transition-all ${
+                        isHighlighted
+                          ? "bg-indigo-600/25 text-indigo-200 font-semibold border-l-2 border-indigo-500 pl-1.5"
+                          : ""
+                      }`}
+                    >
+                      <span className="text-[10px] text-slate-400 dark:text-slate-600 select-none w-4 text-right">{idx + 1}</span>
+                      <pre className="flex-1 whitespace-pre">{line}</pre>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* Custom Input Panel for Tree */}
+            <CustomInputPanel
+              inputType="array"
+              onApply={handleCustomTreeInput}
+              currentData={[]}
+            />
+
+            {/* Quiz Challenge Card */}
+            <div className="bg-gray-50 dark:bg-slate-900/70 border border-gray-200 dark:border-slate-800 rounded-2xl p-5 flex flex-col gap-4 shadow-lg shadow-black/20">
+              <div className="flex items-center gap-2 border-b border-slate-200 dark:border-slate-800 pb-3">
+                <Award className="w-4.5 h-4.5 text-amber-400 animate-pulse" />
+                <h2 className="text-sm font-bold uppercase tracking-wider text-slate-700 dark:text-slate-300">Quiz Challenge</h2>
+              </div>
+              
+              <div className="flex flex-col gap-3.5">
+                <div className="text-xs font-semibold text-slate-700 dark:text-slate-300 leading-normal bg-white dark:bg-[#111] p-3 rounded-xl border border-gray-200 dark:border-[#222]">
+                  {activeQuestion.question}
+                </div>
+
+                {/* Option buttons */}
+                <div className="flex flex-col gap-2">
+                  {activeQuestion.options.map((opt, oIdx) => {
+                    const isSelected = selectedOption === oIdx;
+                    const isCorrect = oIdx === activeQuestion.answer;
+                    
+                    let btnColor = "bg-white hover:bg-gray-50 border-gray-200 text-slate-700 dark:bg-[#1a1a1a] dark:hover:bg-[#222] dark:border-[#333] dark:text-slate-400";
+                    if (isSelected) {
+                      btnColor = "bg-indigo-50 border-indigo-500 text-indigo-600 dark:bg-indigo-950/40 dark:border-indigo-500 dark:text-indigo-300";
+                    }
+                    if (quizSubmitted) {
+                      if (isCorrect) {
+                        btnColor = "bg-emerald-50 border-emerald-500 text-emerald-600 dark:bg-emerald-950/40 dark:border-emerald-500 dark:text-emerald-300";
+                      } else if (isSelected) {
+                        btnColor = "bg-rose-50 border-rose-500 text-rose-600 dark:bg-rose-950/40 dark:border-rose-500 dark:text-rose-300";
+                      }
+                    }
+
+                    return (
+                      <button
+                        key={`opt-${oIdx}`}
+                        onClick={() => handleQuizAnswer(oIdx)}
+                        className={`w-full text-left px-4 py-2.5 text-xs font-medium rounded-xl border transition-all flex items-center justify-between gap-2.5 ${btnColor}`}
+                        disabled={quizSubmitted}
+                      >
+                        <span>{opt}</span>
+                        {quizSubmitted && isCorrect && <CheckCircle className="w-4.5 h-4.5 text-emerald-400 shrink-0" />}
+                        {quizSubmitted && isSelected && !isCorrect && <AlertCircle className="w-4.5 h-4.5 text-rose-400 shrink-0" />}
+                      </button>
+                    );
+                  })}
+                </div>
+
+                {/* Submission Controls */}
+                <div className="flex gap-2 justify-end mt-1.5">
+                  {!quizSubmitted ? (
+                    <button
+                      onClick={submitQuiz}
+                      disabled={selectedOption === null}
+                      className="px-4 py-2 text-xs font-bold bg-indigo-600 hover:bg-indigo-500 disabled:opacity-40 text-white rounded-xl transition-all shadow shadow-indigo-950"
+                    >
+                      Submit Answer
+                    </button>
+                  ) : (
+                    <button
+                      onClick={nextQuizQuestion}
+                      className="px-4 py-2 text-xs font-bold bg-gray-100 hover:bg-gray-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 rounded-xl transition-all border border-gray-300 dark:border-slate-700"
+                    >
+                      Next Question
+                    </button>
+                  )}
+                </div>
+
+                {/* Quiz feedback explanation */}
+                {quizSubmitted && (
+                  <div className="bg-gray-100 dark:bg-[#1a1a1a] border border-gray-300 dark:border-[#333] p-3.5 rounded-xl flex gap-2.5 items-start mt-1">
+                    <Info className="w-4 h-4 text-indigo-400 shrink-0 mt-0.5" />
+                    <div className="text-[11px] text-slate-600 dark:text-slate-400 leading-normal">
+                      <span className="font-semibold text-indigo-300 block mb-0.5">
+                        {selectedOption === activeQuestion.answer ? "🎉 Correct Answer!" : "❌ Incorrect Answer"}
+                      </span>
+                      {activeQuestion.explanation}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+
+      </main>
+
+      <Footer />
+    </div>
+  );
+}
+
diff --git a/src/app/visualizer/tree/bst/avl/AlgorithmClient.jsx b/src/app/visualizer/tree/bst/avl/AlgorithmClient.jsx
new file mode 100644
index 000000000..a6ba548bf
--- /dev/null
+++ b/src/app/visualizer/tree/bst/avl/AlgorithmClient.jsx
@@ -0,0 +1,56 @@
+import VisualizerPageLayout, {
+  createVisualizerPaths,
+} from "@/app/visualizer/components/VisualizerPageLayout";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import { Info, Sparkles } from "lucide-react";
+
+
+
+export default function AVLPage() {
+  return (
+    <VisualizerPageLayout
+      paths={createVisualizerPaths("Tree", "Binary Search Tree", "Balancing (AVL)")}
+      title="AVL Tree Balancing"
+      animation={
+        <div className="bg-slate-950 text-slate-100 font-sans p-6 rounded-3xl border border-slate-900 shadow-2xl flex flex-col gap-6 max-w-7xl mx-auto">
+          <div className="bg-slate-900/60 backdrop-blur-xl border border-slate-800 p-5 rounded-2xl flex justify-between items-center shadow-lg">
+            <div className="text-xs text-purple-400 font-semibold flex items-center gap-1.5 bg-purple-950/40 px-3 py-1.5 rounded-xl border border-purple-900/35">
+              <Sparkles className="w-4 h-4 animate-pulse" /> Active Visualizer under development for GSSoc &apos;26!
+            </div>
+          </div>
+          <div className="bg-slate-900/40 border border-slate-800/80 rounded-2xl p-4">
+            <div className="flex items-center gap-1.5 text-xs text-slate-400 font-semibold mb-1">
+              <Info className="w-3.5 h-3.5 text-purple-400" /> Module Status
+            </div>
+            <p className="text-sm font-medium text-purple-200/90 leading-relaxed">
+              Welcome to the AVL Tree learning module! In AVL Trees, the heights of the two child subtrees of any node differ by at most one. Study standard balance factor criteria and tree rotations in your DSA courses, and practice the interactive BST visualizers in the sidebar.
+            </p>
+          </div>
+        </div>
+      }
+      content={
+        <main className="max-w-4xl mx-auto bg-white dark:bg-[#111] rounded-2xl border border-[#e5e7eb] dark:border-[#222] p-6 space-y-6 shadow-sm mt-8">
+          <section>
+            <h2 className="text-2xl font-bold text-[#1a1a1a] dark:text-white mb-4 flex items-center">
+              <span className="w-1 h-6 bg-[#a435f0] mr-3 rounded-full"></span>
+              What is an AVL Tree?
+            </h2>
+            <p className="text-[#374151] dark:text-[#d1d5db] leading-relaxed">
+              Named after its inventors Adelson-Velsky and Landis, the AVL Tree is the first self-balancing binary search tree. In an AVL Tree, each node maintains a Balance Factor (defined as the height difference between the left and right subtrees: Height_left - Height_right). For any node to remain balanced, its Balance Factor must belong to the set {"{-1, 0, 1}"}.
+            </p>
+          </section>
+        </main>
+      }
+      exploreOther={
+        <ExploreOther
+          title="Explore other BST operations"
+          links={[
+            { text: "Insertion", url: "/visualizer/tree/bst/insertion" },
+            { text: "Deletion", url: "/visualizer/tree/bst/deletion" },
+            { text: "Searching", url: "/visualizer/tree/bst/searching" }
+          ]}
+        />
+      }
+    />
+  );
+}
diff --git a/src/app/visualizer/tree/bst/deletion/AlgorithmClient.jsx b/src/app/visualizer/tree/bst/deletion/AlgorithmClient.jsx
new file mode 100644
index 000000000..2aff7346d
--- /dev/null
+++ b/src/app/visualizer/tree/bst/deletion/AlgorithmClient.jsx
@@ -0,0 +1,9 @@
+import TreeBSTVisualizer from "../TreeBSTVisualizer";
+
+
+
+const BSTDeletionPage = () => {
+  return <TreeBSTVisualizer initialMode="deletion" />;
+};
+
+export default BSTDeletionPage;
diff --git a/src/app/visualizer/tree/bst/in-order/AlgorithmClient.jsx b/src/app/visualizer/tree/bst/in-order/AlgorithmClient.jsx
new file mode 100644
index 000000000..92f763aeb
--- /dev/null
+++ b/src/app/visualizer/tree/bst/in-order/AlgorithmClient.jsx
@@ -0,0 +1,9 @@
+import TreeBSTVisualizer from "../TreeBSTVisualizer";
+
+
+
+const BSTInOrderPage = () => {
+  return <TreeBSTVisualizer initialMode="in-order" />;
+};
+
+export default BSTInOrderPage;
diff --git a/src/app/visualizer/tree/bst/insertion/AlgorithmClient.jsx b/src/app/visualizer/tree/bst/insertion/AlgorithmClient.jsx
new file mode 100644
index 000000000..7b8f68ff3
--- /dev/null
+++ b/src/app/visualizer/tree/bst/insertion/AlgorithmClient.jsx
@@ -0,0 +1,9 @@
+import TreeBSTVisualizer from "../TreeBSTVisualizer";
+
+
+
+const BSTInsertionPage = () => {
+  return <TreeBSTVisualizer initialMode="insertion" />;
+};
+
+export default BSTInsertionPage;
diff --git a/src/app/visualizer/tree/bst/post-order/AlgorithmClient.jsx b/src/app/visualizer/tree/bst/post-order/AlgorithmClient.jsx
new file mode 100644
index 000000000..87a7072b9
--- /dev/null
+++ b/src/app/visualizer/tree/bst/post-order/AlgorithmClient.jsx
@@ -0,0 +1,9 @@
+import TreeBSTVisualizer from "../TreeBSTVisualizer";
+
+
+
+const BSTPostOrderPage = () => {
+  return <TreeBSTVisualizer initialMode="post-order" />;
+};
+
+export default BSTPostOrderPage;
diff --git a/src/app/visualizer/tree/bst/pre-order/AlgorithmClient.jsx b/src/app/visualizer/tree/bst/pre-order/AlgorithmClient.jsx
new file mode 100644
index 000000000..bb63453e7
--- /dev/null
+++ b/src/app/visualizer/tree/bst/pre-order/AlgorithmClient.jsx
@@ -0,0 +1,9 @@
+import TreeBSTVisualizer from "../TreeBSTVisualizer";
+
+
+
+const BSTPreOrderPage = () => {
+  return <TreeBSTVisualizer initialMode="pre-order" />;
+};
+
+export default BSTPreOrderPage;
diff --git a/src/app/visualizer/tree/bst/quiz/BSTQuizClient.jsx b/src/app/visualizer/tree/bst/quiz/BSTQuizClient.jsx
new file mode 100644
index 000000000..e889a195a
--- /dev/null
+++ b/src/app/visualizer/tree/bst/quiz/BSTQuizClient.jsx
@@ -0,0 +1,93 @@
+"use client";
+
+import Link from "next/link";
+import { Layers, ArrowRight } from "lucide-react";
+
+const quizzes = [
+  {
+    title: "BST Insertion Quiz",
+    description:
+      "Practice inserting nodes into a Binary Search Tree while maintaining BST properties.",
+    href: "/visualizer/tree/bst/quiz/insertion",
+  },
+  {
+    title: "BST Deletion Quiz",
+    description:
+      "Test your understanding of deleting leaf nodes, nodes with one child, and nodes with two children.",
+    href: "/visualizer/tree/bst/quiz/deletion",
+  },
+  {
+    title: "BST Searching Quiz",
+    description:
+      "Assess your knowledge of searching elements efficiently in a Binary Search Tree.",
+    href: "/visualizer/tree/bst/quiz/searching",
+  },
+  {
+    title: "In-order Traversal Quiz",
+    description:
+      "Practice In-order traversal and understand why it produces sorted output in a BST.",
+    href: "/visualizer/tree/bst/quiz/inorder",
+  },
+  {
+    title: "Pre-order Traversal Quiz",
+    description:
+      "Test your understanding of Pre-order traversal and its applications.",
+    href: "/visualizer/tree/bst/quiz/preorder",
+  },
+  {
+    title: "Post-order Traversal Quiz",
+    description:
+      "Practice Post-order traversal and learn where it is commonly used.",
+    href: "/visualizer/tree/bst/quiz/postorder",
+  },
+  {
+    title: "AVL Balancing Quiz",
+    description:
+      "Challenge yourself with AVL Tree balancing, rotations, and height-balanced BST concepts.",
+    href: "/visualizer/tree/bst/quiz/avl",
+  },
+];
+
+export default function BSTQuizClient() {
+  return (
+    <div className="min-h-screen bg-background p-6">
+      <div className="mx-auto max-w-7xl">
+        <div className="mb-10 text-center">
+          <h1 className="text-4xl font-bold">
+            🌲 Binary Search Tree Quiz Portal
+          </h1>
+          <p className="mt-3 text-muted-foreground">
+            Choose a Binary Search Tree topic and test your understanding.
+          </p>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
+          {quizzes.map((quiz) => (
+            <div
+              key={quiz.title}
+              className="rounded-2xl border border-emerald-500/20 bg-card p-6 shadow-sm transition-all hover:border-emerald-500/40 hover:shadow-lg"
+            >
+              <div className="mb-5 flex h-14 w-14 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-600">
+                <Layers size={28} />
+              </div>
+
+              <h2 className="text-xl font-semibold">{quiz.title}</h2>
+
+              <p className="mt-3 text-sm text-muted-foreground">
+                {quiz.description}
+              </p>
+
+              <Link
+                href={quiz.href}
+                className="mt-6 inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-5 py-2.5 font-medium text-white transition hover:bg-emerald-700"
+              >
+                Start Quiz
+                <ArrowRight size={18} />
+              </Link>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/bst/quiz/avl/page.jsx b/src/app/visualizer/tree/bst/quiz/avl/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/bst/quiz/avl/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/bst/quiz/avl/quiz.jsx b/src/app/visualizer/tree/bst/quiz/avl/quiz.jsx
new file mode 100644
index 000000000..b8e0796cd
--- /dev/null
+++ b/src/app/visualizer/tree/bst/quiz/avl/quiz.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the primary purpose of an AVL Tree?",
+    options: [
+      "To store duplicate values",
+      "To maintain a balanced Binary Search Tree",
+      "To reduce memory usage",
+      "To perform breadth-first traversal"
+    ],
+    correctAnswer: 1,
+    explanation: "AVL Trees automatically maintain balance after insertion and deletion, ensuring efficient operations."
+  },
+  {
+    question: "Who invented the AVL Tree?",
+    options: [
+      "Donald Knuth",
+      "Adelson-Velsky and Landis",
+      "Alan Turing",
+      "Edsger Dijkstra"
+    ],
+    correctAnswer: 1,
+    explanation: "AVL stands for Adelson-Velsky and Landis, the inventors of the AVL Tree."
+  },
+  {
+    question: "What is the balance factor of a node?",
+    options: [
+      "Height of left subtree + Height of right subtree",
+      "Height of left subtree − Height of right subtree",
+      "Number of children",
+      "Depth − Height"
+    ],
+    correctAnswer: 1,
+    explanation: "Balance Factor = Height(Left Subtree) − Height(Right Subtree)."
+  },
+  {
+    question: "Which balance factor values are allowed in an AVL Tree?",
+    options: [
+      "-2, -1, 0",
+      "-1, 0, +1",
+      "0, +1, +2",
+      "Only 0"
+    ],
+    correctAnswer: 1,
+    explanation: "Every node in an AVL Tree must have a balance factor of -1, 0, or +1."
+  },
+  {
+    question: "Which rotation is performed for a Left-Left (LL) imbalance?",
+    options: [
+      "Left Rotation",
+      "Right Rotation",
+      "Left-Right Rotation",
+      "Right-Left Rotation"
+    ],
+    correctAnswer: 1,
+    explanation: "A Right Rotation fixes a Left-Left imbalance."
+  },
+  {
+    question: "Which rotation is performed for a Right-Right (RR) imbalance?",
+    options: [
+      "Left Rotation",
+      "Right Rotation",
+      "Left-Right Rotation",
+      "Right-Left Rotation"
+    ],
+    correctAnswer: 0,
+    explanation: "A Left Rotation fixes a Right-Right imbalance."
+  },
+  {
+    question: "Which rotation fixes a Left-Right (LR) imbalance?",
+    options: [
+      "Single Left Rotation",
+      "Single Right Rotation",
+      "Left Rotation followed by Right Rotation",
+      "Right Rotation followed by Left Rotation"
+    ],
+    correctAnswer: 2,
+    explanation: "An LR imbalance is corrected using a Left Rotation on the child followed by a Right Rotation on the parent."
+  },
+  {
+    question: "Which rotation fixes a Right-Left (RL) imbalance?",
+    options: [
+      "Right Rotation followed by Left Rotation",
+      "Left Rotation followed by Right Rotation",
+      "Single Right Rotation",
+      "Single Left Rotation"
+    ],
+    correctAnswer: 0,
+    explanation: "An RL imbalance is corrected using a Right Rotation on the child followed by a Left Rotation on the parent."
+  },
+  {
+    question: "What is the average time complexity of searching in an AVL Tree?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 1,
+    explanation: "AVL Trees remain balanced, giving O(log n) search complexity."
+  },
+  {
+    question: "Why are AVL Trees generally faster than ordinary BSTs for searching?",
+    options: [
+      "They use hashing",
+      "They always remain height-balanced",
+      "They allow duplicate keys",
+      "They store nodes in arrays"
+    ],
+    correctAnswer: 1,
+    explanation: "Because AVL Trees maintain balance, their height remains logarithmic, resulting in faster search, insertion, and deletion."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="AVL Balancing Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/bst/quiz/deletion/page.jsx b/src/app/visualizer/tree/bst/quiz/deletion/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/bst/quiz/deletion/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/bst/quiz/deletion/quiz.jsx b/src/app/visualizer/tree/bst/quiz/deletion/quiz.jsx
new file mode 100644
index 000000000..44ebac99c
--- /dev/null
+++ b/src/app/visualizer/tree/bst/quiz/deletion/quiz.jsx
@@ -0,0 +1,121 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "Which node is the easiest to delete in a Binary Search Tree?",
+    options: [
+      "Root node",
+      "Leaf node",
+      "Node with two children",
+      "Internal node"
+    ],
+    correctAnswer: 1,
+    explanation: "A leaf node has no children, so it can simply be removed."
+  },
+  {
+    question: "How many cases are there for deleting a node in a BST?",
+    options: ["2", "3", "4", "5"],
+    correctAnswer: 1,
+    explanation: "Deletion has three cases: leaf node, one child, and two children."
+  },
+  {
+    question: "When deleting a node with one child, what happens?",
+    options: [
+      "Delete both nodes",
+      "Replace the node with its child",
+      "Delete the child",
+      "Rebuild the tree"
+    ],
+    correctAnswer: 1,
+    explanation: "The child takes the deleted node's position."
+  },
+  {
+    question: "When deleting a node with two children, which node commonly replaces it?",
+    options: [
+      "Random node",
+      "Parent node",
+      "Inorder Successor or Inorder Predecessor",
+      "Leaf node"
+    ],
+    correctAnswer: 2,
+    explanation: "The inorder successor (or predecessor) preserves BST properties."
+  },
+  {
+    question: "The inorder successor is:",
+    options: [
+      "Largest node in left subtree",
+      "Smallest node in right subtree",
+      "Root node",
+      "Parent node"
+    ],
+    correctAnswer: 1,
+    explanation: "The inorder successor is the minimum value in the right subtree."
+  },
+  {
+    question: "Average-case deletion complexity in a balanced BST is:",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 1,
+    explanation: "Balanced BST deletion requires traversing tree height."
+  },
+  {
+    question: "Worst-case deletion complexity in a skewed BST is:",
+    options: [
+      "O(log n)",
+      "O(n)",
+      "O(1)",
+      "O(n log n)"
+    ],
+    correctAnswer: 1,
+    explanation: "A skewed BST behaves like a linked list."
+  },
+  {
+    question: "Deleting the root node with two children generally requires:",
+    options: [
+      "AVL Rotation",
+      "Finding inorder successor/predecessor",
+      "Sorting the tree",
+      "Deleting the entire subtree"
+    ],
+    correctAnswer: 1,
+    explanation: "The inorder successor/predecessor replaces the deleted root."
+  },
+  {
+    question: "Which traversal still gives sorted order after correct deletion?",
+    options: [
+      "Preorder",
+      "Postorder",
+      "Inorder",
+      "Level Order"
+    ],
+    correctAnswer: 2,
+    explanation: "A correctly maintained BST always gives sorted output in inorder."
+  },
+  {
+    question: "BST deletion mainly depends on:",
+    options: [
+      "Number of nodes",
+      "Tree height",
+      "Number of leaves",
+      "Node colors"
+    ],
+    correctAnswer: 1,
+    explanation: "Deletion complexity depends on the height of the tree."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="BST Deletion Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/bst/quiz/inorder/page.jsx b/src/app/visualizer/tree/bst/quiz/inorder/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/bst/quiz/inorder/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/bst/quiz/inorder/quiz.jsx b/src/app/visualizer/tree/bst/quiz/inorder/quiz.jsx
new file mode 100644
index 000000000..e22685e18
--- /dev/null
+++ b/src/app/visualizer/tree/bst/quiz/inorder/quiz.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the order of nodes visited in In-order Traversal?",
+    options: [
+      "Root → Left → Right",
+      "Left → Root → Right",
+      "Left → Right → Root",
+      "Right → Root → Left"
+    ],
+    correctAnswer: 1,
+    explanation: "In-order traversal visits the Left subtree, then the Root, and finally the Right subtree."
+  },
+  {
+    question: "What is the main property of In-order Traversal in a Binary Search Tree?",
+    options: [
+      "Produces reverse order",
+      "Produces sorted order",
+      "Visits root first",
+      "Visits leaves first"
+    ],
+    correctAnswer: 1,
+    explanation: "In-order traversal of a BST always visits nodes in ascending order."
+  },
+  {
+    question: "Which subtree is visited first during In-order Traversal?",
+    options: [
+      "Right subtree",
+      "Root",
+      "Left subtree",
+      "Leaf nodes"
+    ],
+    correctAnswer: 2,
+    explanation: "The traversal always begins with the left subtree."
+  },
+  {
+    question: "Which node is visited after the left subtree?",
+    options: [
+      "Leaf node",
+      "Root node",
+      "Right subtree",
+      "Parent node"
+    ],
+    correctAnswer: 1,
+    explanation: "After completing the left subtree, the current root node is visited."
+  },
+  {
+    question: "Which subtree is visited last?",
+    options: [
+      "Root",
+      "Left subtree",
+      "Right subtree",
+      "Middle subtree"
+    ],
+    correctAnswer: 2,
+    explanation: "The right subtree is visited after the root."
+  },
+  {
+    question: "What is the time complexity of In-order Traversal?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation: "Every node is visited exactly once."
+  },
+  {
+    question: "What is the auxiliary space complexity of recursive In-order Traversal?",
+    options: [
+      "O(1)",
+      "O(log n) average (O(h))",
+      "O(n²)",
+      "O(n³)"
+    ],
+    correctAnswer: 1,
+    explanation: "The recursion stack depends on the tree height (h)."
+  },
+  {
+    question: "Which data structure is used internally in recursive In-order Traversal?",
+    options: [
+      "Queue",
+      "Heap",
+      "Stack",
+      "Hash Table"
+    ],
+    correctAnswer: 2,
+    explanation: "Recursive calls are managed using the system call stack."
+  },
+  {
+    question: "Which application commonly uses In-order Traversal?",
+    options: [
+      "Sorting BST elements",
+      "Level-order printing",
+      "Graph traversal",
+      "Heap construction"
+    ],
+    correctAnswer: 0,
+    explanation: "In-order traversal retrieves BST elements in sorted order."
+  },
+  {
+    question: "Which traversal is best for obtaining ascending values from a BST?",
+    options: [
+      "Pre-order",
+      "Post-order",
+      "In-order",
+      "Level-order"
+    ],
+    correctAnswer: 2,
+    explanation: "Only In-order traversal guarantees ascending order in a BST."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="BST In-order Traversal Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/bst/quiz/insertion/page.jsx b/src/app/visualizer/tree/bst/quiz/insertion/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/bst/quiz/insertion/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/bst/quiz/insertion/quiz.jsx b/src/app/visualizer/tree/bst/quiz/insertion/quiz.jsx
new file mode 100644
index 000000000..790fd0a12
--- /dev/null
+++ b/src/app/visualizer/tree/bst/quiz/insertion/quiz.jsx
@@ -0,0 +1,116 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What property must always be maintained while inserting a node into a Binary Search Tree?",
+    options: [
+      "Left child > Parent and Right child < Parent",
+      "Left subtree contains smaller values and Right subtree contains larger values",
+      "Both subtrees contain equal values",
+      "Nodes are inserted randomly"
+    ],
+    correctAnswer: 1,
+    explanation: "In a BST, every left subtree contains smaller values and every right subtree contains larger values than the parent."
+  },
+  {
+    question: "Where is a new node inserted in a BST?",
+    options: [
+      "Always at the root",
+      "Always as the left child",
+      "At the first available position satisfying BST properties",
+      "Randomly"
+    ],
+    correctAnswer: 2,
+    explanation: "The node is inserted where it satisfies the BST ordering property."
+  },
+  {
+    question: "What is the average-case time complexity of BST insertion?",
+    options: ["O(1)", "O(log n)", "O(n)", "O(n²)"],
+    correctAnswer: 1,
+    explanation: "For a balanced BST, insertion takes O(log n)."
+  },
+  {
+    question: "What is the worst-case time complexity of BST insertion?",
+    options: ["O(log n)", "O(n)", "O(1)", "O(n log n)"],
+    correctAnswer: 1,
+    explanation: "A skewed BST behaves like a linked list, resulting in O(n) insertion."
+  },
+  {
+    question: "If the inserted value is smaller than the current node, where should the algorithm move?",
+    options: [
+      "Right subtree",
+      "Parent node",
+      "Left subtree",
+      "Root"
+    ],
+    correctAnswer: 2,
+    explanation: "Smaller values are always inserted into the left subtree."
+  },
+  {
+    question: "If the inserted value is greater than the current node, where should the algorithm move?",
+    options: [
+      "Left subtree",
+      "Root",
+      "Right subtree",
+      "Previous node"
+    ],
+    correctAnswer: 2,
+    explanation: "Greater values are always inserted into the right subtree."
+  },
+  {
+    question: "Which traversal displays inserted elements in sorted order?",
+    options: [
+      "Preorder",
+      "Postorder",
+      "Level Order",
+      "Inorder"
+    ],
+    correctAnswer: 3,
+    explanation: "Inorder traversal of a BST always produces sorted output."
+  },
+  {
+    question: "What happens if duplicate values are not allowed in a BST?",
+    options: [
+      "Duplicates are ignored",
+      "Duplicates become root",
+      "Duplicates go to both sides",
+      "Tree becomes invalid"
+    ],
+    correctAnswer: 0,
+    explanation: "Most BST implementations simply ignore duplicate insertions."
+  },
+  {
+    question: "Insertion in a balanced BST primarily depends on:",
+    options: [
+      "Number of leaf nodes",
+      "Height of the tree",
+      "Number of edges",
+      "Number of internal nodes"
+    ],
+    correctAnswer: 1,
+    explanation: "Insertion time depends on the height of the tree."
+  },
+  {
+    question: "Which data structure concept does BST insertion mainly use?",
+    options: [
+      "Recursion or Iteration",
+      "Hashing",
+      "Queue",
+      "Stack only"
+    ],
+    correctAnswer: 0,
+    explanation: "BST insertion is commonly implemented recursively or iteratively."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="BST Insertion Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/bst/quiz/page.jsx b/src/app/visualizer/tree/bst/quiz/page.jsx
new file mode 100644
index 000000000..1817ecfc6
--- /dev/null
+++ b/src/app/visualizer/tree/bst/quiz/page.jsx
@@ -0,0 +1,5 @@
+import BSTQuizClient from "./BSTQuizClient";
+
+export default function Page() {
+  return <BSTQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/bst/quiz/postorder/page.jsx b/src/app/visualizer/tree/bst/quiz/postorder/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/bst/quiz/postorder/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/bst/quiz/postorder/quiz.jsx b/src/app/visualizer/tree/bst/quiz/postorder/quiz.jsx
new file mode 100644
index 000000000..8118a9b10
--- /dev/null
+++ b/src/app/visualizer/tree/bst/quiz/postorder/quiz.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the correct order of Post-order Traversal?",
+    options: [
+      "Root → Left → Right",
+      "Left → Root → Right",
+      "Left → Right → Root",
+      "Right → Left → Root"
+    ],
+    correctAnswer: 2,
+    explanation: "Post-order traversal visits the Left subtree, then the Right subtree, and finally the Root."
+  },
+  {
+    question: "Which node is visited last during Post-order Traversal?",
+    options: [
+      "Leaf node",
+      "Left child",
+      "Right child",
+      "Root node"
+    ],
+    correctAnswer: 3,
+    explanation: "The root node is always visited after both subtrees."
+  },
+  {
+    question: "Which subtree is visited first in Post-order Traversal?",
+    options: [
+      "Right subtree",
+      "Root",
+      "Left subtree",
+      "Middle subtree"
+    ],
+    correctAnswer: 2,
+    explanation: "The traversal begins with the left subtree."
+  },
+  {
+    question: "Which subtree is visited after the left subtree?",
+    options: [
+      "Root",
+      "Right subtree",
+      "Leaf nodes",
+      "Parent node"
+    ],
+    correctAnswer: 1,
+    explanation: "After the left subtree, the right subtree is traversed."
+  },
+  {
+    question: "What is the time complexity of Post-order Traversal?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation: "Each node is visited exactly once."
+  },
+  {
+    question: "Which data structure supports recursive Post-order Traversal?",
+    options: [
+      "Queue",
+      "Heap",
+      "Stack",
+      "Hash Table"
+    ],
+    correctAnswer: 2,
+    explanation: "Recursive calls are managed using the system call stack."
+  },
+  {
+    question: "Which application commonly uses Post-order Traversal?",
+    options: [
+      "Sorting BST elements",
+      "Deleting or freeing a tree",
+      "Level-order traversal",
+      "Searching in BST"
+    ],
+    correctAnswer: 1,
+    explanation: "Post-order traversal deletes child nodes before deleting the parent."
+  },
+  {
+    question: "What is the auxiliary space complexity of recursive Post-order Traversal?",
+    options: [
+      "O(1)",
+      "O(h)",
+      "O(n²)",
+      "O(log log n)"
+    ],
+    correctAnswer: 1,
+    explanation: "The recursion stack requires O(h) space, where h is the tree height."
+  },
+  {
+    question: "Does Post-order Traversal produce sorted output in a BST?",
+    options: [
+      "Yes",
+      "No",
+      "Only in AVL Trees",
+      "Only for Complete Binary Trees"
+    ],
+    correctAnswer: 1,
+    explanation: "Only In-order traversal produces sorted output in a Binary Search Tree."
+  },
+  {
+    question: "Which sequence correctly represents Post-order Traversal?",
+    options: [
+      "Root → Left → Right",
+      "Left → Root → Right",
+      "Left → Right → Root",
+      "Right → Root → Left"
+    ],
+    correctAnswer: 2,
+    explanation: "Post-order traversal follows Left → Right → Root."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="BST Post-order Traversal Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/bst/quiz/preorder/page.jsx b/src/app/visualizer/tree/bst/quiz/preorder/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/bst/quiz/preorder/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/bst/quiz/preorder/quiz.jsx b/src/app/visualizer/tree/bst/quiz/preorder/quiz.jsx
new file mode 100644
index 000000000..b0c555b03
--- /dev/null
+++ b/src/app/visualizer/tree/bst/quiz/preorder/quiz.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the correct order of Pre-order Traversal?",
+    options: [
+      "Left → Root → Right",
+      "Root → Left → Right",
+      "Left → Right → Root",
+      "Right → Root → Left"
+    ],
+    correctAnswer: 1,
+    explanation: "Pre-order traversal visits the Root first, followed by the Left subtree and then the Right subtree."
+  },
+  {
+    question: "Which node is visited first during Pre-order Traversal?",
+    options: [
+      "Left child",
+      "Root node",
+      "Right child",
+      "Leaf node"
+    ],
+    correctAnswer: 1,
+    explanation: "The root node is always processed before its children."
+  },
+  {
+    question: "Which subtree is visited after the root?",
+    options: [
+      "Right subtree",
+      "Left subtree",
+      "Middle subtree",
+      "None"
+    ],
+    correctAnswer: 1,
+    explanation: "The left subtree is completely traversed before moving to the right subtree."
+  },
+  {
+    question: "Which subtree is visited last in Pre-order Traversal?",
+    options: [
+      "Left subtree",
+      "Root",
+      "Right subtree",
+      "Leaf nodes"
+    ],
+    correctAnswer: 2,
+    explanation: "The right subtree is visited after the left subtree."
+  },
+  {
+    question: "What is the time complexity of Pre-order Traversal?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation: "Every node is visited exactly once."
+  },
+  {
+    question: "Which data structure supports recursive Pre-order Traversal?",
+    options: [
+      "Queue",
+      "Heap",
+      "Stack",
+      "Graph"
+    ],
+    correctAnswer: 2,
+    explanation: "Recursive function calls use the system call stack."
+  },
+  {
+    question: "Which application commonly uses Pre-order Traversal?",
+    options: [
+      "Deleting a tree",
+      "Creating a copy of a tree",
+      "Sorting BST values",
+      "Level-order printing"
+    ],
+    correctAnswer: 1,
+    explanation: "Pre-order traversal is commonly used to copy or serialize a tree."
+  },
+  {
+    question: "In a BST, does Pre-order Traversal produce sorted output?",
+    options: [
+      "Always",
+      "Never",
+      "Only for balanced trees",
+      "Only for AVL trees"
+    ],
+    correctAnswer: 1,
+    explanation: "Only In-order traversal produces sorted output in a BST."
+  },
+  {
+    question: "What is the auxiliary space complexity of recursive Pre-order Traversal?",
+    options: [
+      "O(1)",
+      "O(h)",
+      "O(n²)",
+      "O(log log n)"
+    ],
+    correctAnswer: 1,
+    explanation: "The recursion stack depends on the tree height (h)."
+  },
+  {
+    question: "Which traversal sequence correctly represents Pre-order?",
+    options: [
+      "Root → Left → Right",
+      "Left → Root → Right",
+      "Left → Right → Root",
+      "Right → Left → Root"
+    ],
+    correctAnswer: 0,
+    explanation: "Pre-order traversal follows Root → Left → Right."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="BST Pre-order Traversal Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/bst/quiz/searching/page.jsx b/src/app/visualizer/tree/bst/quiz/searching/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/bst/quiz/searching/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/bst/quiz/searching/quiz.jsx b/src/app/visualizer/tree/bst/quiz/searching/quiz.jsx
new file mode 100644
index 000000000..1a93c2bf8
--- /dev/null
+++ b/src/app/visualizer/tree/bst/quiz/searching/quiz.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the primary advantage of searching in a Binary Search Tree compared to a normal Binary Tree?",
+    options: [
+      "It always takes O(1) time",
+      "It uses less memory",
+      "The BST property allows efficient searching",
+      "It does not require recursion"
+    ],
+    correctAnswer: 2,
+    explanation: "The BST ordering property allows us to eliminate half of the search path at each step."
+  },
+  {
+    question: "If the search key is smaller than the current node, where should the search continue?",
+    options: [
+      "Right subtree",
+      "Left subtree",
+      "Parent node",
+      "Root node"
+    ],
+    correctAnswer: 1,
+    explanation: "Smaller values are always located in the left subtree."
+  },
+  {
+    question: "If the search key is greater than the current node, where should the search continue?",
+    options: [
+      "Left subtree",
+      "Parent node",
+      "Right subtree",
+      "Root node"
+    ],
+    correctAnswer: 2,
+    explanation: "Greater values are always located in the right subtree."
+  },
+  {
+    question: "What is the average-case time complexity of searching in a balanced BST?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 1,
+    explanation: "Balanced BSTs have logarithmic height, resulting in O(log n) search."
+  },
+  {
+    question: "What is the worst-case time complexity of searching in a skewed BST?",
+    options: [
+      "O(log n)",
+      "O(1)",
+      "O(n)",
+      "O(n log n)"
+    ],
+    correctAnswer: 2,
+    explanation: "A skewed BST behaves like a linked list, requiring O(n) search."
+  },
+  {
+    question: "When does the search operation stop successfully?",
+    options: [
+      "When the root is reached",
+      "When the target value matches the current node",
+      "When a leaf node is found",
+      "When both children exist"
+    ],
+    correctAnswer: 1,
+    explanation: "The search is successful when the current node contains the target value."
+  },
+  {
+    question: "What indicates that an element is not present in the BST?",
+    options: [
+      "The traversal reaches NULL",
+      "The root changes",
+      "The tree becomes empty",
+      "The parent node is reached"
+    ],
+    correctAnswer: 0,
+    explanation: "If the search reaches a NULL pointer, the element does not exist."
+  },
+  {
+    question: "Which traversal of a BST always produces sorted output?",
+    options: [
+      "Preorder",
+      "Postorder",
+      "Level Order",
+      "Inorder"
+    ],
+    correctAnswer: 3,
+    explanation: "Inorder traversal visits nodes in ascending order."
+  },
+  {
+    question: "Searching in a BST mainly depends on:",
+    options: [
+      "Number of leaf nodes",
+      "Height of the tree",
+      "Number of edges",
+      "Tree width"
+    ],
+    correctAnswer: 1,
+    explanation: "The search complexity is proportional to the height of the tree."
+  },
+  {
+    question: "Which implementation approach is commonly used for BST searching?",
+    options: [
+      "Recursion or Iteration",
+      "Dynamic Programming",
+      "Breadth First Search only",
+      "Hashing"
+    ],
+    correctAnswer: 0,
+    explanation: "BST searching can be implemented using either recursion or iteration."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="BST Searching Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/bst/searching/AlgorithmClient.jsx b/src/app/visualizer/tree/bst/searching/AlgorithmClient.jsx
new file mode 100644
index 000000000..2978caf23
--- /dev/null
+++ b/src/app/visualizer/tree/bst/searching/AlgorithmClient.jsx
@@ -0,0 +1,9 @@
+import TreeBSTVisualizer from "../TreeBSTVisualizer";
+
+
+
+const BSTSearchPage = () => {
+  return <TreeBSTVisualizer initialMode="searching" />;
+};
+
+export default BSTSearchPage;
diff --git a/src/app/visualizer/tree/heap/HeapVisualizerClient.jsx b/src/app/visualizer/tree/heap/HeapVisualizerClient.jsx
new file mode 100644
index 000000000..5b16fb407
--- /dev/null
+++ b/src/app/visualizer/tree/heap/HeapVisualizerClient.jsx
@@ -0,0 +1,210 @@
+'use client';
+
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import {
+  generateInsertSteps,
+  generateExtractSteps,
+  generateHeapifySteps,
+  computeTreeLayout,
+} from './heapVisualizerLogic';
+
+const DEFAULT_ARRAY = [10, 15, 30, 40, 50, 35, 45];
+
+export default function HeapVisualizerClient() {
+  const [heapType, setHeapType] = useState('min');
+  const [array, setArray] = useState(DEFAULT_ARRAY);
+  const [inputValue, setInputValue] = useState('');
+  const [steps, setSteps] = useState([]);
+  const [stepIndex, setStepIndex] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [speed, setSpeed] = useState(800);
+  const timerRef = useRef(null);
+
+  const currentStep = steps[stepIndex] || { array, comparing: [], swapping: [], action: 'Ready.' };
+
+  useEffect(() => {
+    if (isPlaying && stepIndex < steps.length - 1) {
+      timerRef.current = setTimeout(() => setStepIndex((s) => s + 1), speed);
+    } else if (stepIndex >= steps.length - 1) {
+      setIsPlaying(false);
+    }
+    return () => clearTimeout(timerRef.current);
+  }, [isPlaying, stepIndex, steps, speed]);
+
+  const runSteps = useCallback((newSteps) => {
+    setSteps(newSteps);
+    setStepIndex(0);
+    setIsPlaying(true);
+  }, []);
+
+  useEffect(() => {
+    if (steps.length > 0 && stepIndex === steps.length - 1) {
+      setArray(steps[steps.length - 1].array);
+    }
+  }, [stepIndex, steps]);
+
+  const handleInsert = () => {
+    const value = parseInt(inputValue, 10);
+    if (Number.isNaN(value)) return;
+    const currentArray = steps.length > 0 ? steps[steps.length - 1].array : array;
+    const newSteps = generateInsertSteps(currentArray, value, heapType);
+    runSteps(newSteps);
+    setInputValue('');
+  };
+
+  const handleExtract = () => {
+    const currentArray = steps.length > 0 ? steps[steps.length - 1].array : array;
+    if (currentArray.length === 0) return;
+    const newSteps = generateExtractSteps(currentArray, heapType);
+    runSteps(newSteps);
+  };
+
+  const handleRandomArray = () => {
+    const n = 7 + Math.floor(Math.random() * 4);
+    const randomArr = Array.from({ length: n }, () => Math.floor(Math.random() * 90) + 10);
+    const newSteps = generateHeapifySteps(randomArr, heapType);
+    runSteps(newSteps);
+  };
+
+  const handleReset = () => {
+    setSteps([]);
+    setStepIndex(0);
+    setIsPlaying(false);
+    setArray(DEFAULT_ARRAY);
+  };
+
+  const handleHeapTypeChange = (type) => {
+    setHeapType(type);
+    const currentArray = steps.length > 0 ? steps[steps.length - 1].array : array;
+    const newSteps = generateHeapifySteps(currentArray, type);
+    runSteps(newSteps);
+  };
+
+  const stepForward = () => {
+    setIsPlaying(false);
+    setStepIndex((s) => Math.min(s + 1, steps.length - 1));
+  };
+
+  const stepBack = () => {
+    setIsPlaying(false);
+    setStepIndex((s) => Math.max(s - 1, 0));
+  };
+
+  const displayArray = currentStep.array;
+  const layout = computeTreeLayout(displayArray);
+  const maxLevel = layout.length > 0 ? Math.max(...layout.map((p) => p.y)) : 0;
+  const svgHeight = (maxLevel + 1) * 90 + 40;
+  const svgWidth = 700;
+
+  const nodeColor = (i) => {
+    if (currentStep.swapping?.includes(i)) return '#f97316';
+    if (currentStep.comparing?.includes(i)) return '#facc15';
+    return heapType === 'min' ? '#6366f1' : '#a855f7';
+  };
+
+  return (
+    <div className="w-full max-w-5xl mx-auto p-4 space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold mb-1">Heap Visualizer</h1>
+        <p className="text-sm text-gray-500">
+          Insert, extract, and heapify with step-by-step Min-Heap / Max-Heap animation.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="border rounded-xl p-4 space-y-3">
+          <h3 className="text-xs font-semibold uppercase text-gray-500">Heap Type</h3>
+          <div className="flex gap-2">
+            <button onClick={() => handleHeapTypeChange('min')} disabled={isPlaying} className={`flex-1 py-2 rounded-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed ${heapType === 'min' ? 'bg-indigo-600 text-white' : 'bg-gray-100'}`}>
+              Min-Heap
+            </button>
+            <button onClick={() => handleHeapTypeChange('max')} disabled={isPlaying} className={`flex-1 py-2 rounded-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed ${heapType === 'max' ? 'bg-purple-600 text-white' : 'bg-gray-100'}`}>
+              Max-Heap
+            </button>
+          </div>
+        </div>
+
+        <div className="border rounded-xl p-4 space-y-3">
+          <h3 className="text-xs font-semibold uppercase text-gray-500">Insert / Extract</h3>
+          <div className="flex gap-2">
+            <input type="number" value={inputValue} onChange={(e) => setInputValue(e.target.value)} disabled={isPlaying} placeholder="Value" className="flex-1 border rounded-lg px-3 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed" />
+            <button onClick={handleInsert} disabled={isPlaying} className="px-3 py-2 rounded-lg bg-emerald-600 text-white text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed">
+              Insert
+            </button>
+          </div>
+          <button onClick={handleExtract} disabled={isPlaying} className="w-full py-2 rounded-lg bg-rose-600 text-white text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed">
+            Extract {heapType === 'min' ? 'Min' : 'Max'} (Root)
+          </button>
+        </div>
+
+        <div className="border rounded-xl p-4 space-y-3">
+          <h3 className="text-xs font-semibold uppercase text-gray-500">Dataset</h3>
+          <button onClick={handleRandomArray} disabled={isPlaying} className="w-full py-2 rounded-lg bg-indigo-100 text-indigo-700 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed">
+            Generate Random Array
+          </button>
+          <button onClick={handleReset} className="w-full py-2 rounded-lg bg-gray-100 text-sm font-medium">
+            Reset
+          </button>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3 flex-wrap border rounded-xl p-4">
+        <button onClick={stepBack} disabled={stepIndex === 0} className="px-3 py-2 rounded-lg bg-gray-100 disabled:opacity-40">
+          Step Back
+        </button>
+        <button onClick={() => setIsPlaying((p) => !p)} disabled={steps.length === 0} className="px-4 py-2 rounded-lg bg-black text-white disabled:opacity-40">
+          {isPlaying ? 'Pause' : 'Play'}
+        </button>
+        <button onClick={stepForward} disabled={stepIndex >= steps.length - 1} className="px-3 py-2 rounded-lg bg-gray-100 disabled:opacity-40">
+          Step Forward
+        </button>
+
+        <div className="flex items-center gap-2 ml-auto text-sm">
+          <span>Speed</span>
+          <input type="range" min="200" max="1500" step="100" value={speed} onChange={(e) => setSpeed(Number(e.target.value))} />
+        </div>
+
+        <span className="text-xs text-gray-500 w-full md:w-auto">
+          Step {steps.length === 0 ? 0 : stepIndex + 1} / {steps.length}
+        </span>
+      </div>
+
+      <div className="text-center text-sm font-medium bg-gray-50 border rounded-lg py-2">
+        {currentStep.action}
+      </div>
+
+      <div className="border rounded-xl p-4 overflow-x-auto">
+        <h3 className="text-xs font-semibold uppercase text-gray-500 mb-2">Tree View</h3>
+        <svg width={svgWidth} height={svgHeight}>
+          {layout.map((p) =>
+            p.parent !== null ? (
+              <line key={`edge-${p.index}`} x1={layout[p.parent].x * svgWidth} y1={layout[p.parent].y * 90 + 30} x2={p.x * svgWidth} y2={p.y * 90 + 30} stroke="#cbd5e1" strokeWidth="2" />
+            ) : null
+          )}
+          {layout.map((p) => (
+            <g key={`node-${p.index}`}>
+              <circle cx={p.x * svgWidth} cy={p.y * 90 + 30} r="22" fill={nodeColor(p.index)} style={{ transition: 'all 0.3s ease' }} />
+              <text x={p.x * svgWidth} y={p.y * 90 + 35} textAnchor="middle" fill="white" fontSize="14" fontWeight="600">
+                {displayArray[p.index]}
+              </text>
+            </g>
+          ))}
+        </svg>
+      </div>
+
+      <div className="border rounded-xl p-4">
+        <h3 className="text-xs font-semibold uppercase text-gray-500 mb-3">Array Representation</h3>
+        <div className="flex gap-2 flex-wrap">
+          {displayArray.map((val, i) => (
+            <div key={i} className="flex flex-col items-center">
+              <div className="w-14 h-14 flex items-center justify-center rounded-lg text-white font-semibold text-sm" style={{ backgroundColor: nodeColor(i), transition: 'background-color 0.3s ease' }}>
+                {val}
+              </div>
+              <span className="text-xs text-gray-400 mt-1">{i}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/visualizer/tree/heap/TreeHeapVisualizer.jsx b/src/app/visualizer/tree/heap/TreeHeapVisualizer.jsx
new file mode 100644
index 000000000..f4d53d916
--- /dev/null
+++ b/src/app/visualizer/tree/heap/TreeHeapVisualizer.jsx
@@ -0,0 +1,429 @@
+"use client";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import Footer from "@/app/components/footer";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
+import { createVisualizerPaths } from "@/app/visualizer/components/VisualizerPageLayout";
+import { heapIndexToTreeCoords, insertHeap, extractRoot, buildHeap } from "./heapUtils";
+import { Info, Layers, AlertCircle } from "lucide-react";
+
+const stateColors = {
+  comparing: { fill: "#3b82f6", stroke: "#60a5fa" },
+  swapping: { fill: "#f59e0b", stroke: "#fbbf24" },
+  inserted: { fill: "#10b981", stroke: "#34d399" },
+  extracted: { fill: "#ef4444", stroke: "#f87171" },
+  done: { fill: "#334155", stroke: "#64748b" },
+};
+
+const nodeRadius = 21;
+
+const getStateColor = (state) => stateColors[state] || { fill: "#0f172a", stroke: "#334155" };
+
+const getSvgDimensions = (nodes) => {
+  if (nodes.length === 0) return { width: 800, height: 400, offsetX: 0 };
+
+  const xCoords = nodes.map((n) => n.x);
+  const yCoords = nodes.map((n) => n.y);
+  const minX = Math.min(...xCoords);
+  const maxX = Math.max(...xCoords);
+  const maxY = Math.max(...yCoords);
+  const padding = 60;
+
+  return {
+    width: Math.max(800, maxX - minX + padding * 2),
+    height: Math.max(380, maxY + padding * 1.8),
+    offsetX: minX - padding,
+  };
+};
+
+const parseBuildInput = (value) =>
+  value
+    .split(",")
+    .map((item) => parseInt(item.trim(), 10))
+    .filter((item) => !Number.isNaN(item));
+
+export default function TreeHeapVisualizer({ initialHeapType = "min" }) {
+  const [heapArray, setHeapArray] = useState([null]);
+  const [targetHeapArray, setTargetHeapArray] = useState([null]);
+  const [isMinHeap, setIsMinHeap] = useState(initialHeapType !== "max");
+  const [inputValue, setInputValue] = useState("");
+  const [buildInput, setBuildInput] = useState("");
+  const [steps, setSteps] = useState([]);
+  const [message, setMessage] = useState("Build or insert values to start.");
+  const onStep = useCallback((step) => {
+    setMessage(step.explanation);
+  }, []);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 1800 });
+
+  const resetPlayback = useCallback(() => {
+    engine.reset();
+    setSteps([]);
+  }, [engine]);
+
+  const resetHeap = useCallback(
+    (nextType) => {
+      resetPlayback();
+      setHeapArray([null]);
+      setTargetHeapArray([null]);
+      setInputValue("");
+      setBuildInput("");
+      setIsMinHeap(nextType);
+      setMessage(nextType ? "Min-heap mode selected." : "Max-heap mode selected.");
+    },
+    [resetPlayback]
+  );
+
+  useEffect(() => {
+    resetHeap(initialHeapType !== "max");
+  }, [initialHeapType, resetHeap]);
+
+  const startPlayback = useCallback((nextArray, nextSteps) => {
+    setTargetHeapArray(nextArray);
+    setSteps(nextSteps);
+    setTimeout(() => { engine.play(); }, 50);
+  }, [engine]);
+
+  const handleInsert = useCallback(() => {
+    const value = parseInt(inputValue, 10);
+    if (Number.isNaN(value)) {
+      setMessage("Please enter a valid number to insert.");
+      return;
+    }
+
+    resetPlayback();
+    const nextSteps = [];
+    const result = insertHeap(heapArray, value, isMinHeap, nextSteps);
+    setInputValue("");
+    setMessage(`Inserting ${value} into the heap...`);
+    startPlayback(result.array, nextSteps);
+  }, [heapArray, inputValue, isMinHeap, resetPlayback, startPlayback]);
+
+  const handleExtract = useCallback(() => {
+    if (heapArray.length <= 1) {
+      setMessage("The heap is empty.");
+      return;
+    }
+
+    resetPlayback();
+    const nextSteps = [];
+    const result = extractRoot(heapArray, isMinHeap, nextSteps);
+    setMessage(`Extracting the root value ${result.extractedValue}...`);
+    startPlayback(result.array, nextSteps);
+  }, [heapArray, isMinHeap, resetPlayback, startPlayback]);
+
+  const handleBuild = useCallback(() => {
+    const values = parseBuildInput(buildInput);
+    if (values.length === 0) {
+      setMessage("Enter comma-separated numbers to build a heap.");
+      return;
+    }
+
+    resetPlayback();
+    const nextSteps = [];
+    const result = buildHeap(values, isMinHeap, nextSteps);
+    setBuildInput("");
+    setMessage("Building heap with Floyd's algorithm...");
+    startPlayback(result.array, nextSteps);
+  }, [buildInput, isMinHeap, resetPlayback, startPlayback]);
+
+  const startVisualizer = useCallback(() => {
+    if (steps.length === 0) {
+      setMessage("Run an operation first to generate an animation.");
+      return;
+    }
+    engine.play();
+  }, [engine, steps.length]);
+
+  const handleResetPlayback = useCallback(() => {
+    engine.reset();
+    setSteps([]);
+    setMessage("Playback reset.");
+  }, [engine]);
+
+  const clearHeap = useCallback(() => {
+    resetPlayback();
+    setHeapArray([null]);
+    setTargetHeapArray([null]);
+    setInputValue("");
+    setBuildInput("");
+    setMessage(isMinHeap ? "Min heap cleared." : "Max heap cleared.");
+  }, [isMinHeap, resetPlayback]);
+
+  useEffect(() => {
+    if (engine.currentStep === steps.length - 1 && steps.length > 0 && !engine.isPlaying) {
+      setHeapArray(targetHeapArray);
+      setMessage("Operation completed successfully!");
+    }
+  }, [engine.currentStep, steps.length, engine.isPlaying, targetHeapArray]);
+
+  useVisualizerKeyboard({
+    onStart: startVisualizer,
+    onReset: clearHeap,
+    onSpeedChange: (s) => engine.setSpeed(1800 / s),
+    onTogglePlayPause: engine.isPlaying ? engine.pause : engine.play,
+    speed: 1800 / engine.speed,
+    sorting: engine.isPlaying,
+    sorted: engine.currentStep === steps.length - 1 && steps.length > 0,
+    enabled: true,
+  });
+
+  const currentStep = steps[engine.currentStep] || null;
+  const activeArray = currentStep?.arraySnapshot || heapArray;
+  const activeTypeLabel = isMinHeap ? "Min-Heap" : "Max-Heap";
+
+  const treeNodes = heapIndexToTreeCoords(activeArray, activeArray.length - 1, 800);
+  const svgDimensions = getSvgDimensions(treeNodes);
+
+  const getStateForIndex = (index) => {
+    if (!currentStep) return null;
+    return currentStep.highlightedNodes?.[index] || (currentStep.highlightedIndices?.includes(index) ? "comparing" : null);
+  };
+
+  const showAmberBanner = currentStep && (currentStep.stepType.includes("imbalance") || currentStep.stepType.includes("rotation"));
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-slate-900 dark:text-slate-100 flex flex-col">
+      <main className="flex-1 w-full max-w-7xl mx-auto px-4 md:px-8 py-24 flex flex-col gap-8">
+        <div className="w-full">
+          <Breadcrumbs paths={createVisualizerPaths("Tree", "Heap", isMinHeap ? "Min-Heap" : "Max-Heap")} />
+        </div>
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 border-b border-slate-200 dark:border-slate-800 pb-6">
+          <div>
+            <div className="flex items-center gap-2 mb-2 text-xs font-semibold uppercase tracking-wider text-indigo-600 bg-indigo-50 px-3 py-1 rounded-full w-fit border border-indigo-100 dark:text-indigo-400 dark:bg-indigo-950/40 dark:border-indigo-900/50">
+              <Layers className="w-3.5 h-3.5" /> Heap Interactive Operations
+            </div>
+            <h1 className="text-3xl md:text-4xl font-extrabold text-slate-900 dark:text-white">
+              {activeTypeLabel}
+            </h1>
+            <p className="text-sm text-slate-600 dark:text-slate-400 mt-1 max-w-xl">
+              Insert, extract, and build the heap while watching the tree and array stay in sync.
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => resetHeap(true)}
+              aria-pressed={isMinHeap}
+              className={`px-3 py-1.5 rounded-lg text-xs font-semibold border transition-all ${isMinHeap ? "bg-indigo-600 text-white border-indigo-500" : "bg-gray-100 dark:bg-slate-800 text-slate-900 dark:text-slate-200 border-gray-300 dark:border-slate-600"}`}
+            >
+              Min-Heap
+            </button>
+            <button
+              type="button"
+              onClick={() => resetHeap(false)}
+              aria-pressed={!isMinHeap}
+              className={`px-3 py-1.5 rounded-lg text-xs font-semibold border transition-all ${!isMinHeap ? "bg-indigo-600 text-white border-indigo-500" : "bg-gray-100 dark:bg-slate-800 text-slate-900 dark:text-slate-200 border-gray-300 dark:border-slate-600"}`}
+            >
+              Max-Heap
+            </button>
+          </div>
+        </div>
+
+        <div className="bg-white dark:bg-[#111] backdrop-blur-xl border border-gray-200 dark:border-[#222] p-5 rounded-2xl flex flex-col gap-5 shadow-lg shadow-black/20">
+          <div className="flex flex-col lg:flex-row gap-4 lg:items-end justify-between">
+            <div className="flex flex-col sm:flex-row gap-2.5 w-full lg:w-auto">
+              <input
+                type="number"
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                placeholder="Insert value"
+                disabled={engine.isPlaying}
+                className="w-full sm:w-36 px-3 py-2 text-xs bg-white dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] rounded-xl text-slate-900 dark:text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors"
+                onKeyDown={(e) => e.key === "Enter" && handleInsert()}
+              />
+              <button
+                type="button"
+                onClick={handleInsert}
+                disabled={engine.isPlaying}
+                className="px-4 py-2 text-xs font-bold bg-indigo-600 hover:bg-indigo-500 disabled:bg-indigo-900 disabled:opacity-40 text-white rounded-xl transition-all"
+              >
+                Insert
+              </button>
+              <button
+                type="button"
+                onClick={handleExtract}
+                disabled={engine.isPlaying || heapArray.length <= 1}
+                className="px-4 py-2 text-xs font-bold bg-white dark:bg-[#1a1a1a] hover:bg-gray-50 dark:hover:bg-[#2a2a2a] text-slate-900 dark:text-slate-200 rounded-xl transition-all border border-gray-200 dark:border-[#333] disabled:opacity-40 disabled:cursor-not-allowed"
+              >
+                Extract Root
+              </button>
+            </div>
+
+            <div className="flex flex-col sm:flex-row gap-2.5 w-full lg:w-auto">
+              <input
+                type="text"
+                value={buildInput}
+                onChange={(e) => setBuildInput(e.target.value)}
+                placeholder="e.g. 5, 3, 8, 1, 4"
+                disabled={engine.isPlaying}
+                className="w-full sm:w-72 px-3 py-2 text-xs bg-white dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] rounded-xl text-slate-900 dark:text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors"
+              />
+              <button
+                type="button"
+                onClick={handleBuild}
+                disabled={engine.isPlaying}
+                className="px-4 py-2 text-xs font-bold bg-gray-900 hover:bg-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600 text-white rounded-xl transition-all border border-gray-800 dark:border-slate-600 disabled:opacity-40"
+              >
+                Build Heap
+              </button>
+            </div>
+          </div>
+
+          <PlaybackControls
+            isPlaying={engine.isPlaying}
+            onPlayPause={engine.isPlaying ? engine.pause : startVisualizer}
+            onStepForward={engine.stepForward}
+            onStepBackward={engine.stepBackward}
+            onReset={handleResetPlayback}
+            onClear={clearHeap}
+            clearLabel="Clear Heap"
+            speed={1800 / engine.speed}
+            onSpeedChange={(s) => engine.setSpeed(1800 / s)}
+            disabled={steps.length === 0 && !engine.isPlaying}
+            showPlayPause={true}
+            progressText={`Step ${steps.length > 0 ? engine.currentStep + 1 : 0} / ${steps.length || 0}`}
+          />
+        </div>
+
+          <div className={`bg-white dark:bg-[#111] border border-gray-200 dark:border-[#222] rounded-2xl p-4 flex flex-col gap-2 ${showAmberBanner ? "text-amber-100" : ""}`}>
+          <div className="flex justify-between items-center text-xs">
+            <span className="text-slate-600 dark:text-slate-400 font-semibold flex items-center gap-1.5">
+              <Info className="w-3.5 h-3.5 text-indigo-400" /> Action Explanation
+            </span>
+            <span className="text-slate-600 dark:text-slate-400 font-bold bg-gray-100 dark:bg-slate-900 px-2.5 py-0.5 rounded-full border border-gray-300 dark:border-slate-700">
+              Step {steps.length > 0 ? engine.currentStep + 1 : 0} / {steps.length || 0}
+            </span>
+          </div>
+          <div className="text-[14px] leading-relaxed min-h-[24px] text-center" style={{ color: "var(--color-muted)" }}>
+            {message}
+          </div>
+        </div>
+
+        <div className="flex flex-col lg:flex-row gap-5">
+          <div className="w-full lg:w-1/2 bg-white dark:bg-[#111] border border-gray-200 dark:border-[#222] rounded-3xl p-6 shadow-inner relative overflow-hidden min-h-[440px]">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-indigo-400">
+                <Layers className="w-3.5 h-3.5" /> Tree View
+              </div>
+              <span className="text-xs text-slate-400">Heap nodes by index</span>
+            </div>
+
+            {!treeNodes.length ? (
+              <div className="flex flex-col items-center gap-2.5 text-slate-500 py-12">
+                <AlertCircle className="w-10 h-10 text-slate-400" />
+                <span className="text-sm font-semibold">Workspace Empty</span>
+                <span className="text-xs max-w-xs text-center text-slate-600">Build the heap or insert values to see the tree.</span>
+              </div>
+            ) : (
+              <svg
+                width="100%"
+                height="100%"
+                viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}
+                className="overflow-visible"
+                style={{ minHeight: "360px" }}
+              >
+                {treeNodes.map((node) => {
+                  const parent = treeNodes.find((item) => item.index === node.parentIndex);
+                  const state = getStateForIndex(node.index);
+                  const { fill, stroke } = getStateColor(state);
+                  return parent ? (
+                    <line
+                      key={`edge-${node.index}`}
+                      x1={parent.x - svgDimensions.offsetX}
+                      y1={parent.y + nodeRadius}
+                      x2={node.x - svgDimensions.offsetX}
+                      y2={node.y - nodeRadius}
+                      className="stroke-slate-300 dark:stroke-slate-700"
+                    strokeWidth="2.5"
+                  />
+                ) : null;
+              })}
+
+                {treeNodes.map((node) => {
+                  const state = getStateForIndex(node.index);
+                  const { fill, stroke } = getStateColor(state);
+                  const isNull = node.index === 0;
+                  return (
+                    <g key={`node-${node.index}`} className="transition-all duration-300">
+                      <circle
+                        cx={node.x - svgDimensions.offsetX}
+                        cy={node.y}
+                        r={nodeRadius}
+                        fill={isNull ? "#0f172a" : fill}
+                        stroke={isNull ? "#475569" : stroke}
+                        strokeWidth="2.5"
+                        strokeDasharray={isNull ? "4,3" : undefined}
+                        opacity={isNull ? 0.75 : 1}
+                      />
+                      <text
+                        x={node.x - svgDimensions.offsetX}
+                        y={node.y + 4}
+                        textAnchor="middle"
+                        fill={isNull ? "#94a3b8" : "#fff"}
+                        fontSize="12"
+                        fontWeight="700"
+                      >
+                        {isNull ? "null" : node.value}
+                      </text>
+                      <text
+                        x={node.x - svgDimensions.offsetX}
+                        y={node.y + 38}
+                        textAnchor="middle"
+                        fill={isNull ? "#64748b" : "#94a3b8"}
+                        fontSize="9"
+                        fontWeight="700"
+                      >
+                        {node.index}
+                      </text>
+                    </g>
+                  );
+                })}
+              </svg>
+            )}
+          </div>
+
+          <div className="w-full lg:w-1/2 bg-white dark:bg-[#111] border border-gray-200 dark:border-[#222] rounded-3xl p-6 shadow-inner relative overflow-hidden min-h-[440px]">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-indigo-400">
+                <Layers className="w-3.5 h-3.5" /> Array View
+              </div>
+              <span className="text-xs text-slate-400">1-indexed heap array</span>
+            </div>
+
+            <div className="w-full overflow-x-auto pb-2">
+              <div className="flex items-stretch gap-2 min-w-max">
+                {(activeArray || [null]).map((value, index) => {
+                  const state = currentStep?.highlightedNodes?.[index] || (currentStep?.highlightedIndices?.includes(index) ? "comparing" : null);
+                  const { fill, stroke } = getStateColor(state);
+                  const isNull = index === 0;
+
+                  return (
+                    <div
+                      key={`array-${index}`}
+                      className={`relative rounded-xl border flex flex-col items-center justify-center shrink-0 ${isNull ? "w-14 h-16 opacity-75 border-dashed" : "w-16 h-20"}`}
+                      style={{
+                        backgroundColor: isNull ? "#0f172a" : fill,
+                        borderColor: isNull ? "#334155" : stroke,
+                      }}
+                    >
+                      <div className="absolute top-1 left-1.5 text-[9px] text-slate-400 font-bold">
+                        {index}
+                      </div>
+                      <div className="text-sm font-bold text-white mt-2">
+                        {isNull ? "null" : value}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/src/app/visualizer/tree/heap/heapUtils.js b/src/app/visualizer/tree/heap/heapUtils.js
new file mode 100644
index 000000000..a30fb0178
--- /dev/null
+++ b/src/app/visualizer/tree/heap/heapUtils.js
@@ -0,0 +1,310 @@
+const cloneArray = (array) => array.slice();
+
+const createStep = (array, step) => ({
+  ...step,
+  arraySnapshot: cloneArray(array),
+});
+
+const compareParentValues = (childValue, parentValue, isMinHeap) => {
+  return isMinHeap ? childValue < parentValue : childValue > parentValue;
+};
+
+const compareChildValues = (currentValue, childValue, isMinHeap) => {
+  return isMinHeap ? childValue < currentValue : childValue > currentValue;
+};
+
+const chooseChildIndex = (array, currentIndex, isMinHeap) => {
+  const leftIndex = currentIndex * 2;
+  const rightIndex = leftIndex + 1;
+  const hasLeft = leftIndex < array.length && array[leftIndex] !== undefined;
+  const hasRight = rightIndex < array.length && array[rightIndex] !== undefined;
+
+  if (!hasLeft) return null;
+  if (!hasRight) return leftIndex;
+
+  return compareChildValues(array[leftIndex], array[rightIndex], isMinHeap) ? rightIndex : leftIndex;
+};
+
+const heapifyUp = (array, index, isMinHeap, steps) => {
+  let currentIndex = index;
+
+  while (currentIndex > 1) {
+    const parentIndex = Math.floor(currentIndex / 2);
+    const currentValue = array[currentIndex];
+    const parentValue = array[parentIndex];
+
+    steps.push(
+      createStep(array, {
+        currentNode: currentIndex,
+        visited: [parentIndex, currentIndex],
+        explanation: `Compare element ${currentValue} with its parent ${parentValue}.`,
+        codeLine: 2,
+        stepType: "compare-parent",
+        highlightedIndices: [parentIndex, currentIndex],
+        highlightedNodes: {
+          [parentIndex]: "comparing",
+          [currentIndex]: "comparing",
+        },
+      })
+    );
+
+    if (!compareParentValues(currentValue, parentValue, isMinHeap)) {
+      break;
+    }
+
+    const temp = array[currentIndex];
+    array[currentIndex] = array[parentIndex];
+    array[parentIndex] = temp;
+
+    steps.push(
+      createStep(array, {
+        currentNode: parentIndex,
+        visited: [parentIndex, currentIndex],
+        explanation: `Swap ${array[currentIndex]} with parent ${array[parentIndex]} to restore heap order.`,
+        codeLine: 3,
+        stepType: "swap-up",
+        highlightedIndices: [parentIndex, currentIndex],
+        highlightedNodes: {
+          [parentIndex]: "swapping",
+          [currentIndex]: "swapping",
+        },
+      })
+    );
+
+    currentIndex = parentIndex;
+  }
+
+  steps.push(
+    createStep(array, {
+      currentNode: currentIndex,
+      visited: [currentIndex],
+      explanation: `Heapify-up complete. Element settled at index ${currentIndex}.`,
+      codeLine: 4,
+      stepType: "heapify-up-done",
+      highlightedIndices: [currentIndex],
+      highlightedNodes: {
+        [currentIndex]: "done",
+      },
+    })
+  );
+
+  return array;
+};
+
+const heapifyDown = (array, index, isMinHeap, steps) => {
+  let currentIndex = index;
+  const totalNodes = array.length - 1;
+
+  while (true) {
+    const leftIndex = currentIndex * 2;
+    const rightIndex = leftIndex + 1;
+    if (leftIndex > totalNodes) break;
+
+    const childIndex = chooseChildIndex(array, currentIndex, isMinHeap);
+    const highlighted = [currentIndex];
+    if (leftIndex <= totalNodes) highlighted.push(leftIndex);
+    if (rightIndex <= totalNodes) highlighted.push(rightIndex);
+
+    steps.push(
+      createStep(array, {
+        currentNode: currentIndex,
+        visited: highlighted,
+        explanation: childIndex
+          ? `Compare element ${array[currentIndex]} with its child ${array[childIndex]}.`
+          : `Compare element ${array[currentIndex]} with its only child ${array[leftIndex]}.`,
+        codeLine: 3,
+        stepType: "compare-children",
+        highlightedIndices: highlighted,
+        highlightedNodes: highlighted.reduce((acc, heapIndex) => {
+          acc[heapIndex] = "comparing";
+          return acc;
+        }, {}),
+      })
+    );
+
+    if (childIndex == null) break;
+
+    const shouldSwap = compareChildValues(array[currentIndex], array[childIndex], isMinHeap);
+    if (!shouldSwap) break;
+
+    const temp = array[currentIndex];
+    array[currentIndex] = array[childIndex];
+    array[childIndex] = temp;
+
+    steps.push(
+      createStep(array, {
+        currentNode: childIndex,
+        visited: [currentIndex, childIndex],
+        explanation: `Swap ${array[currentIndex]} with child ${array[childIndex]} to restore heap order.`,
+        codeLine: 4,
+        stepType: "swap-down",
+        highlightedIndices: [currentIndex, childIndex],
+        highlightedNodes: {
+          [currentIndex]: "swapping",
+          [childIndex]: "swapping",
+        },
+      })
+    );
+
+    currentIndex = childIndex;
+  }
+
+  steps.push(
+    createStep(array, {
+      currentNode: currentIndex,
+      visited: [currentIndex],
+      explanation: `Heapify-down complete. Element settled at index ${currentIndex}.`,
+      codeLine: 5,
+      stepType: "heapify-down-done",
+      highlightedIndices: [currentIndex],
+      highlightedNodes: {
+        [currentIndex]: "done",
+      },
+    })
+  );
+
+  return array;
+};
+
+export const heapIndexToTreeCoords = (heapArray, totalNodes, svgWidth) => {
+  const coords = [];
+  const maxIndex = Math.min(totalNodes, heapArray.length - 1);
+
+  const traverse = (index, x, y, level, parentIndex) => {
+    if (index > maxIndex || heapArray[index] === undefined || heapArray[index] === null) return;
+
+    coords.push({
+      index,
+      value: heapArray[index],
+      x,
+      y,
+      parentIndex,
+    });
+
+    const xOffset = 260 / Math.pow(2, level);
+    const yOffset = 80;
+
+    const leftIndex = index * 2;
+    const rightIndex = leftIndex + 1;
+
+    if (leftIndex <= maxIndex) {
+      traverse(leftIndex, x - xOffset, y + yOffset, level + 1, index);
+    }
+
+    if (rightIndex <= maxIndex) {
+      traverse(rightIndex, x + xOffset, y + yOffset, level + 1, index);
+    }
+  };
+
+  if (maxIndex >= 1) {
+    traverse(1, svgWidth / 2, 60, 0, null);
+  }
+
+  return coords;
+};
+
+export const insertHeap = (array, value, isMinHeap, steps = []) => {
+  const nextArray = cloneArray(array.length ? array : [null]);
+  if (nextArray[0] !== null) nextArray.unshift(null);
+  nextArray.push(value);
+
+  const insertIndex = nextArray.length - 1;
+  steps.push(
+    createStep(nextArray, {
+      currentNode: insertIndex,
+      visited: [insertIndex],
+      explanation: `Placed ${value} at the end of the heap array.`,
+      codeLine: 1,
+      stepType: "insert-end",
+      highlightedIndices: [insertIndex],
+      highlightedNodes: {
+        [insertIndex]: "inserted",
+      },
+    })
+  );
+
+  heapifyUp(nextArray, insertIndex, isMinHeap, steps);
+  return { array: nextArray, steps };
+};
+
+export const extractRoot = (array, isMinHeap, steps = []) => {
+  const nextArray = cloneArray(array.length ? array : [null]);
+  if (nextArray.length <= 1) {
+    return { extractedValue: null, array: [null], steps };
+  }
+
+  const extractedValue = nextArray[1];
+  steps.push(
+    createStep(nextArray, {
+      currentNode: 1,
+      visited: [1],
+      explanation: `Extract the root value ${extractedValue} from the heap.`,
+      codeLine: 1,
+      stepType: "extract-root",
+      highlightedIndices: [1],
+      highlightedNodes: {
+        [1]: "extracted",
+      },
+    })
+  );
+
+  if (nextArray.length === 2) {
+    nextArray.pop();
+    return { extractedValue, array: nextArray, steps };
+  }
+
+  const lastValue = nextArray.pop();
+  nextArray[1] = lastValue;
+
+  steps.push(
+    createStep(nextArray, {
+      currentNode: 1,
+      visited: [1],
+      explanation: `Move last element ${lastValue} to the root position.`,
+      codeLine: 2,
+      stepType: "move-last-to-root",
+      highlightedIndices: [1],
+      highlightedNodes: {
+        [1]: "swapping",
+      },
+    })
+  );
+
+  heapifyDown(nextArray, 1, isMinHeap, steps);
+  return { extractedValue, array: nextArray, steps };
+};
+
+export const buildHeap = (inputArray, isMinHeap, steps = []) => {
+  const nextArray = [null, ...inputArray];
+
+  steps.push(
+    createStep(nextArray, {
+      currentNode: inputArray.length > 0 ? 1 : null,
+      visited: [],
+      explanation: `Render the initial unsorted array as a complete binary tree.`,
+      codeLine: 1,
+      stepType: "build-heap-start",
+      highlightedIndices: [],
+      highlightedNodes: {},
+    })
+  );
+
+  for (let i = Math.floor((nextArray.length - 1) / 2); i >= 1; i -= 1) {
+    steps.push(
+      createStep(nextArray, {
+        currentNode: i,
+        visited: [i],
+        explanation: `Heapify down from index ${i} during Floyd's build-heap algorithm.`,
+        codeLine: 2,
+        stepType: "build-heap-step",
+        highlightedIndices: [i],
+        highlightedNodes: {
+          [i]: "comparing",
+        },
+      })
+    );
+    heapifyDown(nextArray, i, isMinHeap, steps);
+  }
+
+  return { array: nextArray, steps };
+};
diff --git a/src/app/visualizer/tree/heap/heapVisualizerLogic.js b/src/app/visualizer/tree/heap/heapVisualizerLogic.js
new file mode 100644
index 000000000..e67f775b6
--- /dev/null
+++ b/src/app/visualizer/tree/heap/heapVisualizerLogic.js
@@ -0,0 +1,107 @@
+// heapVisualizerLogic.js
+function compare(a, b, type) {
+  return type === 'min' ? a < b : a > b;
+}
+function parentIndex(i) { return Math.floor((i - 1) / 2); }
+function leftChildIndex(i) { return 2 * i + 1; }
+function rightChildIndex(i) { return 2 * i + 2; }
+
+export function generateInsertSteps(arr, value, type = 'min') {
+  const steps = [];
+  const heap = [...arr, value];
+  let i = heap.length - 1;
+  steps.push({ array: [...heap], comparing: [], swapping: [i], action: `Inserted ${value} at index ${i} (end of array)` });
+  while (i > 0) {
+    const p = parentIndex(i);
+    steps.push({ array: [...heap], comparing: [i, p], swapping: [], action: `Comparing node ${heap[i]} (index ${i}) with parent ${heap[p]} (index ${p})` });
+    if (compare(heap[i], heap[p], type)) {
+      [heap[i], heap[p]] = [heap[p], heap[i]];
+      steps.push({ array: [...heap], comparing: [], swapping: [i, p], action: `Swapped ${heap[p]} and ${heap[i]} (bubble up)` });
+      i = p;
+    } else {
+      steps.push({ array: [...heap], comparing: [], swapping: [], action: `Heap property satisfied. Stopping bubble-up.` });
+      break;
+    }
+  }
+  return steps;
+}
+
+export function generateExtractSteps(arr, type = 'min') {
+  const steps = [];
+  if (arr.length === 0) return steps;
+  const heap = [...arr];
+  const removedValue = heap[0];
+  const last = heap.pop();
+  steps.push({ array: [...heap, last], comparing: [], swapping: [0, heap.length], action: `Removing root (${removedValue}). Moving last element (${last}) to root.` });
+  if (heap.length === 0) {
+    steps.push({ array: [], comparing: [], swapping: [], action: 'Heap is now empty.' });
+    return steps;
+  }
+  heap[0] = last;
+  steps.push({ array: [...heap], comparing: [], swapping: [0], action: `Root is now ${last}. Starting bubble-down (heapify-down).` });
+  let i = 0;
+  while (true) {
+    const l = leftChildIndex(i);
+    const r = rightChildIndex(i);
+    let target = i;
+    if (l < heap.length) {
+      steps.push({ array: [...heap], comparing: [target, l], swapping: [], action: `Comparing node ${heap[target]} (index ${target}) with left child ${heap[l]} (index ${l})` });
+      if (compare(heap[l], heap[target], type)) target = l;
+    }
+    if (r < heap.length) {
+      steps.push({ array: [...heap], comparing: [target, r], swapping: [], action: `Comparing node ${heap[target]} (index ${target}) with right child ${heap[r]} (index ${r})` });
+      if (compare(heap[r], heap[target], type)) target = r;
+    }
+    if (target === i) {
+      steps.push({ array: [...heap], comparing: [], swapping: [], action: 'Heap property satisfied. Stopping bubble-down.' });
+      break;
+    }
+    [heap[i], heap[target]] = [heap[target], heap[i]];
+    steps.push({ array: [...heap], comparing: [], swapping: [i, target], action: `Swapped ${heap[target]} and ${heap[i]} (bubble down)` });
+    i = target;
+  }
+  return steps;
+}
+
+export function generateHeapifySteps(arr, type = 'min') {
+  const steps = [];
+  const heap = [...arr];
+  const n = heap.length;
+  steps.push({ array: [...heap], comparing: [], swapping: [], action: 'Starting build-heap (bottom-up heapify).' });
+  for (let start = Math.floor(n / 2) - 1; start >= 0; start--) {
+    let i = start;
+    while (true) {
+      const l = leftChildIndex(i);
+      const r = rightChildIndex(i);
+      let target = i;
+      if (l < n) {
+        steps.push({ array: [...heap], comparing: [target, l], swapping: [], action: `Comparing node ${heap[target]} (index ${target}) with left child ${heap[l]} (index ${l})` });
+        if (compare(heap[l], heap[target], type)) target = l;
+      }
+      if (r < n) {
+        steps.push({ array: [...heap], comparing: [target, r], swapping: [], action: `Comparing node ${heap[target]} (index ${target}) with right child ${heap[r]} (index ${r})` });
+        if (compare(heap[r], heap[target], type)) target = r;
+      }
+      if (target === i) break;
+      [heap[i], heap[target]] = [heap[target], heap[i]];
+      steps.push({ array: [...heap], comparing: [], swapping: [i, target], action: `Swapped ${heap[target]} and ${heap[i]}` });
+      i = target;
+    }
+  }
+  steps.push({ array: [...heap], comparing: [], swapping: [], action: 'Heap build complete.' });
+  return steps;
+}
+
+export function computeTreeLayout(arr) {
+  const positions = [];
+  arr.forEach((_, i) => {
+    const level = Math.floor(Math.log2(i + 1));
+    const firstIndexOfLevel = Math.pow(2, level) - 1;
+    const posInLevel = i - firstIndexOfLevel;
+    const nodesInLevel = Math.pow(2, level);
+    const x = (posInLevel + 0.5) / nodesInLevel;
+    const y = level;
+    positions.push({ index: i, x, y, parent: i === 0 ? null : parentIndex(i) });
+  });
+  return positions;
+}
diff --git a/src/app/visualizer/tree/heap/max-heap/AlgorithmClient.jsx b/src/app/visualizer/tree/heap/max-heap/AlgorithmClient.jsx
new file mode 100644
index 000000000..5c24cddf8
--- /dev/null
+++ b/src/app/visualizer/tree/heap/max-heap/AlgorithmClient.jsx
@@ -0,0 +1,9 @@
+import TreeHeapVisualizer from "../TreeHeapVisualizer";
+
+
+
+const MaxHeapPage = () => {
+  return <TreeHeapVisualizer initialHeapType="max" />;
+};
+
+export default MaxHeapPage;
diff --git a/src/app/visualizer/tree/heap/min-heap/AlgorithmClient.jsx b/src/app/visualizer/tree/heap/min-heap/AlgorithmClient.jsx
new file mode 100644
index 000000000..9056f12d4
--- /dev/null
+++ b/src/app/visualizer/tree/heap/min-heap/AlgorithmClient.jsx
@@ -0,0 +1,9 @@
+import TreeHeapVisualizer from "../TreeHeapVisualizer";
+
+
+
+const MinHeapPage = () => {
+  return <TreeHeapVisualizer initialHeapType="min" />;
+};
+
+export default MinHeapPage;
diff --git a/src/app/visualizer/tree/heap/page.jsx b/src/app/visualizer/tree/heap/page.jsx
new file mode 100644
index 000000000..3bac8b96f
--- /dev/null
+++ b/src/app/visualizer/tree/heap/page.jsx
@@ -0,0 +1,5 @@
+import HeapVisualizerClient from './HeapVisualizerClient';
+
+export default function Page() {
+  return <HeapVisualizerClient />;
+}
diff --git a/src/app/visualizer/tree/quiz/page.jsx b/src/app/visualizer/tree/quiz/page.jsx
new file mode 100644
index 000000000..67503febc
--- /dev/null
+++ b/src/app/visualizer/tree/quiz/page.jsx
@@ -0,0 +1,10 @@
+import Quiz from "./quiz";
+
+export const metadata = {
+  title: "Tree Data Structure Quiz | AlgoBuddy",
+  description: "Test your understanding of Tree Data Structures including Binary Trees, BSTs, Traversals, and more.",
+};
+
+export default function Page() {
+  return <Quiz />;
+}
diff --git a/src/app/visualizer/tree/quiz/quiz.jsx b/src/app/visualizer/tree/quiz/quiz.jsx
new file mode 100644
index 000000000..5dc88b48c
--- /dev/null
+++ b/src/app/visualizer/tree/quiz/quiz.jsx
@@ -0,0 +1,210 @@
+"use client";
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const TreeQuiz = () => {
+  const questions = [
+    {
+      question: "Which of the following best describes a Tree data structure?",
+      options: [
+        "A linear sequence of elements stored contiguously in memory",
+        "A hierarchical structure consisting of nodes connected by edges, without cycles",
+        "A collection of nodes where each node has exactly two children",
+        "A graph where any two nodes are connected by multiple paths"
+      ],
+      correctAnswer: 1,
+      explanation: "A tree is a non-linear, hierarchical data structure consisting of a root node and subtrees of children, with no cycles or loops."
+    },
+    {
+      question: "In a tree, what is a 'Leaf' node?",
+      options: [
+        "The very top node of the tree",
+        "A node that has exactly one child",
+        "A node that has no children",
+        "Any node that is not the root"
+      ],
+      correctAnswer: 2,
+      explanation: "A leaf node (or external node) is a node that does not have any children."
+    },
+    {
+      question: "What is the 'Depth' of a node in a tree?",
+      options: [
+        "The number of edges from the node to the deepest leaf",
+        "The number of edges from the root to the node",
+        "The total number of nodes in the tree",
+        "The number of children the node has"
+      ],
+      correctAnswer: 1,
+      explanation: "The depth of a node is defined as the number of edges along the unique path from the root node to that node."
+    },
+    {
+      question: "What defines a 'Binary Tree'?",
+      options: [
+        "Every node must have exactly two children",
+        "Every node can have at most two children",
+        "The values in the left subtree are smaller than the parent",
+        "The tree must be perfectly balanced"
+      ],
+      correctAnswer: 1,
+      explanation: "A Binary Tree is a tree data structure in which each node has at most two children, referred to as the left child and the right child."
+    },
+    {
+      question: "Which of the following describes a 'Full Binary Tree'?",
+      options: [
+        "All levels are completely filled except possibly for the last level",
+        "Every internal node has exactly two children, and all leaves are at the same level",
+        "Every node has either 0 or 2 children",
+        "The height of the left and right subtrees of every node differ by at most 1"
+      ],
+      correctAnswer: 2,
+      explanation: "A Full Binary Tree is a binary tree in which every node has either zero or two children."
+    },
+    {
+      question: "Which of the following describes a 'Complete Binary Tree'?",
+      options: [
+        "Every node has exactly two children",
+        "Every level, except possibly the last, is completely filled, and all nodes are as far left as possible",
+        "All leaves are at the same depth",
+        "The tree has exactly 2^h - 1 nodes"
+      ],
+      correctAnswer: 1,
+      explanation: "In a Complete Binary Tree, all levels are fully filled except the lowest one, which is filled from left to right."
+    },
+    {
+      question: "What is the primary property of a Binary Search Tree (BST)?",
+      options: [
+        "All nodes must have exactly two children",
+        "The left subtree contains values less than the parent, and the right subtree contains values greater than the parent",
+        "The tree must always be perfectly balanced",
+        "The root node always holds the maximum value"
+      ],
+      correctAnswer: 1,
+      explanation: "A BST enforces the property that for every node, all values in its left subtree are smaller, and all values in its right subtree are greater."
+    },
+    {
+      question: "Which tree traversal method visits nodes in the order: Left Subtree, Root, Right Subtree?",
+      options: [
+        "Preorder",
+        "Inorder",
+        "Postorder",
+        "Level Order"
+      ],
+      correctAnswer: 1,
+      explanation: "Inorder traversal visits the left subtree, then the root node, then the right subtree. In a BST, this traversal outputs values in sorted ascending order."
+    },
+    {
+      question: "Which tree traversal method is often used to safely delete a tree from memory?",
+      options: [
+        "Inorder",
+        "Preorder",
+        "Postorder",
+        "Level Order"
+      ],
+      correctAnswer: 2,
+      explanation: "Postorder traversal visits the left subtree, right subtree, and then the root. It's ideal for deleting a tree because a node is deleted only after its children are deleted."
+    },
+    {
+      question: "Level Order Traversal of a tree is equivalent to which graph algorithm?",
+      options: [
+        "Depth-First Search (DFS)",
+        "Breadth-First Search (BFS)",
+        "Dijkstra's Algorithm",
+        "Prim's Algorithm"
+      ],
+      correctAnswer: 1,
+      explanation: "Level order traversal explores the tree level by level, from top to bottom, left to right. This is exactly how Breadth-First Search (BFS) operates."
+    },
+    {
+      question: "What is the worst-case time complexity for searching an element in a general (unbalanced) Binary Search Tree?",
+      options: [
+        "O(1)",
+        "O(log N)",
+        "O(N)",
+        "O(N log N)"
+      ],
+      correctAnswer: 2,
+      explanation: "In the worst case (e.g., when elements are inserted in sorted order), the BST degenerates into a linked list, making the search time O(N)."
+    },
+    {
+      question: "What happens when you insert a new node into a standard Binary Search Tree?",
+      options: [
+        "It replaces the root node and pushes other nodes down",
+        "It is always attached as a leaf node at the correct position according to BST rules",
+        "It reorganizes the entire tree to stay balanced automatically",
+        "It is inserted at the first available spot from left to right"
+      ],
+      correctAnswer: 1,
+      explanation: "Standard BST insertion traverses down the tree based on comparisons and attaches the new node as a leaf at the correct position."
+    },
+    {
+      question: "When deleting a node with TWO children in a Binary Search Tree, what is typically used to replace the deleted node?",
+      options: [
+        "The node's left child",
+        "The node's right child",
+        "The Inorder Successor or Inorder Predecessor",
+        "A completely new random node"
+      ],
+      correctAnswer: 2,
+      explanation: "To maintain the BST property, a node with two children is replaced by its Inorder Successor (the smallest node in the right subtree) or Inorder Predecessor."
+    },
+    {
+      question: "What is the 'Lowest Common Ancestor' (LCA) of two nodes v and w in a tree?",
+      options: [
+        "The root of the tree",
+        "The deepest node that has both v and w as descendants",
+        "The node that is halfway between v and w",
+        "The leaf node that is closest to both v and w"
+      ],
+      correctAnswer: 1,
+      explanation: "The LCA of two nodes is the lowest (deepest) node in the tree that has both nodes as descendants (where a node can be a descendant of itself)."
+    },
+    {
+      question: "What does the 'Diameter' of a tree represent?",
+      options: [
+        "The number of leaf nodes in the tree",
+        "The longest path between any two nodes in the tree",
+        "The maximum number of children any node has",
+        "The total number of edges in the tree"
+      ],
+      correctAnswer: 1,
+      explanation: "The diameter (or width) of a tree is the length of the longest path between any two nodes. This path may or may not pass through the root."
+    },
+    {
+      question: "Why are self-balancing Binary Search Trees (like AVL or Red-Black trees) used?",
+      options: [
+        "To ensure the tree always uses the minimum amount of memory",
+        "To guarantee that the tree is always a Perfect Binary Tree",
+        "To maintain O(log N) time complexity for search, insertion, and deletion operations",
+        "To allow duplicate values to be stored easily"
+      ],
+      correctAnswer: 2,
+      explanation: "Self-balancing trees automatically adjust their structure during insertions and deletions to prevent degenerating into a list, guaranteeing O(log N) operations."
+    },
+    {
+      question: "What is the time complexity to find the Minimum value in a valid Binary Search Tree?",
+      options: [
+        "O(1)",
+        "O(log N) on average, O(N) in worst case",
+        "O(N) always",
+        "O(N log N)"
+      ],
+      correctAnswer: 1,
+      explanation: "The minimum value is found by continuously traversing to the left child. This takes O(h) time, which is O(log N) for balanced trees and O(N) for degenerate trees."
+    },
+    {
+      question: "Which data structure is best suited for implementing a Trie (Prefix Tree)?",
+      options: [
+        "An array",
+        "A stack",
+        "A specialized tree where nodes represent characters of a string",
+        "A priority queue"
+      ],
+      correctAnswer: 2,
+      explanation: "A Trie is a specialized n-ary tree used for storing strings, where each node represents a character, making prefix searches very efficient."
+    }
+  ];
+
+  return <QuizEngine title="Tree Data Structure Quiz" questions={questions} />;
+};
+
+export default TreeQuiz;
diff --git a/src/app/visualizer/tree/traversing/TreeTraversalVisualizer.jsx b/src/app/visualizer/tree/traversing/TreeTraversalVisualizer.jsx
new file mode 100644
index 000000000..4dd680b44
--- /dev/null
+++ b/src/app/visualizer/tree/traversing/TreeTraversalVisualizer.jsx
@@ -0,0 +1,973 @@
+'use client';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import Footer from '@/app/components/footer';
+import { AlertCircle, CheckCircle, Info, BookOpen, Layers, Award } from 'lucide-react';
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
+import { useAnimationEngine } from "@/lib/visualizer/useAnimationEngine";
+import { createVisualizerPaths } from "@/app/visualizer/components/VisualizerPageLayout";
+import { generateInOrderSteps } from "@/features/algorithms/tree/inOrderLogic";
+import { generatePreOrderSteps } from "@/features/algorithms/tree/preOrderLogic";
+import { generateMorrisSteps } from "@/features/algorithms/tree/morrisLogic";
+import { generateLevelOrderSteps } from "@/features/algorithms/tree/levelOrderLogic";
+import { generatePostOrderSteps } from "@/features/algorithms/tree/postOrderLogic";
+
+class TreeNode {
+  constructor(value) {
+    this.value = value;
+    this.left = null;
+    this.right = null;
+  }
+}
+
+// Complexity mapping
+const complexityInfo = {
+  'pre-order': {
+    time: 'O(N)',
+    timeDesc: 'Every node in the tree is visited exactly once.',
+    space: 'O(H)',
+    spaceDesc: 'H is the height of the tree. In the worst case (skewed tree), the call stack requires O(N) space, while in a balanced tree it takes O(log N).'
+  },
+  'in-order': {
+    time: 'O(N)',
+    timeDesc: 'Every node in the tree is visited exactly once.',
+    space: 'O(H)',
+    spaceDesc: 'H is the height of the tree. The call stack holds function calls up to the deepest leaf node.'
+  },
+  'post-order': {
+    time: 'O(N)',
+    timeDesc: 'Every node in the tree is visited exactly once.',
+    space: 'O(H)',
+    spaceDesc: 'H is the height of the tree. Space is required for recursion stack frames representing parents waiting to be visited.'
+  },
+  'level-order': {
+    time: 'O(N)',
+    timeDesc: 'Every node is dequeued and visited once.',
+    space: 'O(W)',
+    spaceDesc: 'W is the maximum width of the tree. In a complete binary tree, the last level contains N/2 nodes, requiring O(N) space in the queue.'
+  },
+  'morris': {
+    time: 'O(N)',
+    timeDesc: 'Each edge is traversed at most 3 times (finding predecessor, creating thread, removing thread). Thus, overall time remains O(N).',
+    space: 'O(1)',
+    spaceDesc: 'Extraordinary feature: Morris Traversal uses threaded binary trees to navigate without recursion stack or queues, achieving true constant auxiliary space!'
+  }
+};
+
+// Pseudocode mapping
+const pseudocode = {
+  'pre-order': [
+    'preOrder(node) {',
+    '  if (node === null) return;',
+    '  visit(node); // Process current node',
+    '  preOrder(node.left); // Traverse left subtree',
+    '  preOrder(node.right); // Traverse right subtree',
+    '}'
+  ],
+  'in-order': [
+    'inOrder(node) {',
+    '  if (node === null) return;',
+    '  inOrder(node.left); // Traverse left subtree',
+    '  visit(node); // Process current node',
+    '  inOrder(node.right); // Traverse right subtree',
+    '}'
+  ],
+  'post-order': [
+    'postOrder(node) {',
+    '  if (node === null) return;',
+    '  postOrder(node.left); // Traverse left subtree',
+    '  postOrder(node.right); // Traverse right subtree',
+    '  visit(node); // Process current node',
+    '}'
+  ],
+  'level-order': [
+    'levelOrder(root) {',
+    '  if (root === null) return;',
+    '  queue.enqueue(root);',
+    '  while (!queue.isEmpty()) {',
+    '    node = queue.dequeue(); visit(node);',
+    '    if (node.left) queue.enqueue(node.left);',
+    '    if (node.right) queue.enqueue(node.right);',
+    '  }',
+    '}'
+  ],
+  'morris': [
+    'morrisInOrder(root) {',
+    '  curr = root;',
+    '  while (curr !== null) {',
+    '    if (curr.left === null) {',
+    '      visit(curr); curr = curr.right;',
+    '    } else {',
+    '      pred = findPredecessor(curr);',
+    '      if (pred.right === null) {',
+    '        pred.right = curr; // Create thread',
+    '        curr = curr.left;',
+    '      } else {',
+    '        pred.right = null; // Clear thread',
+    '        visit(curr); curr = curr.right;',
+    '      }',
+    '    }',
+    '  }',
+    '}'
+  ]
+};
+
+// Quizzes data
+const quizzes = {
+  'pre-order': [
+    {
+      question: 'Which of the following describes the visiting order of Pre-Order traversal?',
+      options: [
+        'Root, Left Subtree, Right Subtree',
+        'Left Subtree, Root, Right Subtree',
+        'Left Subtree, Right Subtree, Root',
+        'Root, Right Subtree, Left Subtree'
+      ],
+      answer: 0,
+      explanation: 'Pre-Order traversal is so named because the Root node is visited PRE (before) its subtrees. So the order is Root -> Left -> Right.'
+    },
+    {
+      question: 'Which of the following is a common application of Pre-Order traversal?',
+      options: [
+        'Getting sorted nodes of a BST',
+        'Creating a copy or clone of a binary tree',
+        'Deleting/destroying a tree to avoid memory leaks',
+        'Finding the height of a tree'
+      ],
+      answer: 1,
+      explanation: 'Pre-Order traversal is commonly used to create a copy or serialize a binary tree, because the root is created first, followed by its children recursively.'
+    }
+  ],
+  'in-order': [
+    {
+      question: 'What is the special characteristic of In-Order traversal on a Binary Search Tree (BST)?',
+      options: [
+        'It visits the nodes in random order',
+        'It visits the nodes in sorted ascending order',
+        'It visits the nodes in sorted descending order',
+        'It visits leaves first, then intermediate parent nodes'
+      ],
+      answer: 1,
+      explanation: 'Because of the BST property (Left < Root < Right), an In-Order traversal (Left -> Root -> Right) always produces the values in sorted ascending order.'
+    },
+    {
+      question: 'What is the auxiliary space complexity of standard In-Order traversal on a balanced binary tree?',
+      options: [
+        'O(1)',
+        'O(log N) due to recursion stack height',
+        'O(N) always',
+        'O(N^2)'
+      ],
+      answer: 1,
+      explanation: 'In a balanced binary tree, the height of the tree is log(N). Since the recursion call stack goes as deep as the height, the auxiliary space is O(log N).'
+    }
+  ],
+  'post-order': [
+    {
+      question: 'What is the visiting order of Post-Order traversal?',
+      options: [
+        'Root, Left Subtree, Right Subtree',
+        'Left Subtree, Root, Right Subtree',
+        'Left Subtree, Right Subtree, Root',
+        'Root, Right Subtree, Left Subtree'
+      ],
+      answer: 2,
+      explanation: 'Post-Order traversal visits the Root node POST (after) its subtrees. So the order is Left -> Right -> Root.'
+    },
+    {
+      question: 'Why is Post-Order traversal ideal for deleting or freeing memory of a binary tree?',
+      options: [
+        'It is faster than other traversals',
+        'It processes the root before any of its descendants',
+        'It processes children first, ensuring parents are deleted only after children are safe to delete',
+        'It uses zero auxiliary memory space'
+      ],
+      answer: 2,
+      explanation: 'Post-Order processes children before parent (Left -> Right -> Root). This ensures you delete child nodes first so you do not lose references to children before deleting their parent!'
+    }
+  ],
+  'level-order': [
+    {
+      question: 'What data structure is standard for implementing Level-Order traversal iteratively?',
+      options: [
+        'Stack (LIFO)',
+        'Queue (FIFO)',
+        'Priority Queue',
+        'Hash Map'
+      ],
+      answer: 1,
+      explanation: 'A Queue (First-In-First-Out) is used to explore nodes level-by-level, ensuring nodes at level L are processed before any nodes at level L+1.'
+    },
+    {
+      question: 'In the worst case (e.g. a complete binary tree), what is the maximum number of nodes inside the queue at any time?',
+      options: [
+        'O(1)',
+        'O(log N)',
+        'O(N) (specifically, about N/2 at the leaf level)',
+        'O(N log N)'
+      ],
+      answer: 2,
+      explanation: 'In a complete binary tree, the leaf level contains roughly N/2 nodes. In Level-Order traversal, the queue will hold all nodes of the leaf level at the same time, making space complexity O(N).'
+    }
+  ],
+  'morris': [
+    {
+      question: 'What is the main advantage of Morris Traversal over standard traversals?',
+      options: [
+        'It runs in O(log N) time complexity',
+        'It performs the traversal with O(1) auxiliary space, requiring no recursion stack or queue',
+        'It works on graphs without modification',
+        'It avoids visiting left subtrees altogether'
+      ],
+      answer: 1,
+      explanation: 'Morris Traversal uses the concept of threaded binary trees (temporary links from inorder predecessors back to current nodes) to traverse the tree without any recursion stack or auxiliary queues, achieving true O(1) space!'
+    },
+    {
+      question: 'What does Morris Traversal do to a node\'s inorder predecessor when visiting for the first time?',
+      options: [
+        'Deletes the predecessor node',
+        'Swaps it with the root node',
+        'Sets its right child to point to the current node (creating a temporary thread)',
+        'Sets its left child to point to the current node'
+      ],
+      answer: 2,
+      explanation: 'Morris Traversal finds the inorder predecessor (rightmost node in left subtree) and sets its right child to point back to the current node. This thread is later removed when traversing that path a second time.'
+    }
+  ]
+};
+
+export default function TreeTraversalVisualizer({ initialMode = 'in-order' }) {
+  const [mode, setMode] = useState(initialMode);
+  const [root, setRoot] = useState(null);
+  const [inputValue, setInputValue] = useState('');
+  const [message, setMessage] = useState('Tree is empty');
+
+  // Quiz states
+  const [quizIdx, setQuizIdx] = useState(0);
+  const [selectedOption, setSelectedOption] = useState(null);
+  const [quizSubmitted, setQuizSubmitted] = useState(false);
+  
+
+  // Pre-calculate steps when tree or mode changes
+  const steps = useMemo(() => {
+    if (!root) return [];
+    switch (mode) {
+      case 'pre-order': return generatePreOrderSteps(root);
+      case 'in-order': return generateInOrderSteps(root);
+      case 'post-order': return generatePostOrderSteps(root);
+      case 'level-order': return generateLevelOrderSteps(root);
+      case 'morris': return generateMorrisSteps(root);
+      default: return [];
+    }
+  }, [root, mode]);
+
+  const onStep = useCallback((step, idx) => {
+    if (idx === -1) {
+      setMessage('Playback reset. Click Start Traversal to begin.');
+      return;
+    }
+    if (idx >= steps.length - 1) {
+      setMessage(`Traversal Finished! Visited Order: [${step.visited.join(', ')}]`);
+      return;
+    }
+    setMessage(step.explanation);
+  }, [steps]);
+
+  const engine = useAnimationEngine({ steps, onStep, initialSpeed: 1 });
+
+  const startPlayback = useCallback(() => {
+    if (!root) {
+      setMessage('⚠️ Please insert a node or generate a random tree first!');
+      return;
+    }
+    setQuizSubmitted(false);
+    setSelectedOption(null);
+    if (engine.currentStep >= steps.length - 1) {
+      engine.reset();
+    }
+    setTimeout(() => engine.play(), 0);
+  }, [root, steps, engine]);
+
+  useEffect(() => {
+    setMode(initialMode);
+    engine.reset();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialMode]);
+
+  // Pure functional BST insertion
+  const insertNode = (node, value) => {
+    if (!node) return new TreeNode(value);
+    if (value < node.value) {
+      return { ...node, left: insertNode(node.left, value) };
+    } else if (value > node.value) {
+      return { ...node, right: insertNode(node.right, value) };
+    }
+    return node; // No duplicates allowed for visual clarity
+  };
+
+  const handleInsert = () => {
+    const value = parseInt(inputValue);
+    if (isNaN(value)) {
+      setMessage('⚠️ Please enter a valid number');
+      return;
+    }
+    if (value < 1 || value > 999) {
+      setMessage('⚠️ Please enter a number between 1 and 999');
+      return;
+    }
+
+    setRoot(prev => {
+      const newRoot = insertNode(prev, value);
+      setMessage(`Inserted node ${value}`);
+      return newRoot;
+    });
+    setInputValue('');
+    engine.reset();
+  };
+
+  const generateRandomTree = () => {
+    engine.reset();
+    // Predefined sequences that create highly balanced, beautiful trees
+    const trees = [
+      [50, 30, 70, 20, 40, 60, 80],
+      [45, 25, 65, 15, 35, 55, 75],
+      [55, 35, 75, 25, 45, 65, 85, 15, 95],
+      [50, 25, 75, 12, 37, 62, 87],
+      [40, 20, 60, 10, 30, 50, 70, 5, 15, 25]
+    ];
+    const sequence = trees[Math.floor(Math.random() * trees.length)];
+    
+    let newRoot = null;
+    sequence.forEach(val => {
+      newRoot = insertNode(newRoot, val);
+    });
+    
+    setRoot(newRoot);
+    setMessage(`Generated beautiful BST with ${sequence.length} nodes.`);
+  };
+
+  // Load a default tree on mount if empty
+  useEffect(() => {
+    if (!root) {
+      generateRandomTree();
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useVisualizerKeyboard({
+    onTogglePlayPause: engine.isPlaying ? engine.pause : startPlayback,
+    onReset: engine.reset,
+    onSpeedChange: (s) => engine.setSpeed(s * 500),
+    speed: engine.speed / 500,
+    sorting: engine.isPlaying,
+    sorted: false,
+    enabled: true,
+  });
+
+  const handleResetTree = () => {
+    setRoot(null);
+    engine.reset();
+    setMessage('Tree has been cleared. Add nodes or click Generate.');
+  };
+
+  // Quiz behaviors
+  const handleQuizAnswer = (idx) => {
+    if (quizSubmitted) return;
+    setSelectedOption(idx);
+  };
+
+  const submitQuiz = () => {
+    if (selectedOption === null) return;
+    setQuizSubmitted(true);
+  };
+
+  const nextQuizQuestion = () => {
+    setSelectedOption(null);
+    setQuizSubmitted(false);
+    const questionsList = quizzes[mode];
+    setQuizIdx(prev => (prev + 1) % questionsList.length);
+  };
+
+  const nodeRadius = 24;
+
+  const renderData = useMemo(() => {
+    if (!root) return { renderNodes: [], renderEdges: [] };
+
+    const calculateCoordinates = (node, x = 400, y = 60, level = 0, nodesList = [], edgesList = []) => {
+      if (!node) return;
+
+      const xOffset = 260 / Math.pow(2, level);
+      const yOffset = 80;
+      const currentStep = steps[engine.currentStep];
+      const highlightedState = currentStep?.highlightedNodes?.[node.value] || null;
+
+      nodesList.push({
+        value: node.value, x, y,
+        state: highlightedState,
+        isVisited: currentStep?.visited?.includes(node.value) || false,
+      });
+
+      if (node.left) {
+        const leftX = x - xOffset;
+        const leftY = y + yOffset;
+        edgesList.push({ x1: x, y1: y + nodeRadius, x2: leftX, y2: leftY - nodeRadius, isMorrisThread: false });
+        calculateCoordinates(node.left, leftX, leftY, level + 1, nodesList, edgesList);
+      }
+
+      if (node.right) {
+        const rightX = x + xOffset;
+        const rightY = y + yOffset;
+        edgesList.push({ x1: x, y1: y + nodeRadius, x2: rightX, y2: rightY - nodeRadius, isMorrisThread: false });
+        calculateCoordinates(node.right, rightX, rightY, level + 1, nodesList, edgesList);
+      }
+    };
+
+    const nodesList = [];
+    const edgesList = [];
+    calculateCoordinates(root, 400, 60, 0, nodesList, edgesList);
+
+    const currentStep = steps[engine.currentStep];
+    if (currentStep?.threads?.length > 0) {
+      currentStep.threads.forEach(thread => {
+        const fromNode = nodesList.find(n => n.value === thread.from);
+        const toNode = nodesList.find(n => n.value === thread.to);
+        if (fromNode && toNode) {
+          edgesList.push({ x1: fromNode.x, y1: fromNode.y, x2: toNode.x, y2: toNode.y, isMorrisThread: true });
+        }
+      });
+    }
+
+    return { renderNodes: nodesList, renderEdges: edgesList };
+  }, [root, steps, engine.currentStep, nodeRadius]);
+
+  const { renderNodes, renderEdges } = renderData;
+
+  const svgDimensions = useMemo(() => {
+    if (renderNodes.length === 0) return { width: 800, height: 400 };
+    const xCoords = renderNodes.map(n => n.x);
+    const yCoords = renderNodes.map(n => n.y);
+    const minX = Math.min(...xCoords);
+    const maxX = Math.max(...xCoords);
+    const maxY = Math.max(...yCoords);
+    const padding = 60;
+    return {
+      width: Math.max(800, maxX - minX + padding * 2),
+      height: Math.max(380, maxY + padding * 1.5),
+      viewBoxOffset: minX - padding,
+    };
+  }, [renderNodes]);
+
+  const drawMorrisCurve = (x1, y1, x2, y2) => {
+    const cx = (x1 + x2) / 2 + 35;
+    const cy = (y1 + y2) / 2 - 30;
+    return `M ${x1} ${y1} Q ${cx} ${cy} ${x2} ${y2}`;
+  };
+
+  const currentStep = steps[engine.currentStep] || null;
+  const currentHighlightLine = currentStep ? currentStep.codeLine : -1;
+  const activeComplexity = complexityInfo[mode];
+  const activeQuizList = quizzes[mode];
+  const activeQuestion = activeQuizList[quizIdx];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#1c1d1f] text-slate-900 dark:text-slate-100 font-sans flex flex-col antialiased selection:bg-indigo-500/30 selection:text-indigo-200">
+
+      <main className="flex-1 w-full max-w-7xl mx-auto px-4 md:px-8 py-24 flex flex-col gap-8">
+
+        <div className="w-full">
+          <Breadcrumbs paths={createVisualizerPaths("Tree", "Traversal", mode.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join('-') + " Traversal")} />
+        </div>
+
+        {/* Title Block */}
+
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 border-b border-slate-200 dark:border-slate-800 pb-6">
+          <div>
+            <div className="flex items-center gap-2 mb-2 text-xs font-semibold uppercase tracking-wider text-indigo-600 bg-indigo-50 dark:text-indigo-400 dark:bg-indigo-950/40 px-3 py-1 rounded-full w-fit border border-indigo-100 dark:border-indigo-900/50">
+              <Layers className="w-3.5 h-3.5" /> Binary Tree Algorithms
+            </div>
+            <h1 className="text-3xl md:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-slate-900 via-indigo-600 to-indigo-400 dark:from-white dark:via-indigo-200 dark:to-indigo-400 capitalize">
+              {mode.replace('-', ' ')} Traversal
+            </h1>
+            <p className="text-sm text-slate-600 dark:text-slate-400 mt-1 max-w-xl">
+              Visualize recursive call stacks, queue progressions, and constant space threaded Morris algorithms.
+            </p>
+          </div>
+
+          {/* Mode Tabs */}
+          <div className="flex flex-wrap gap-1.5 bg-gray-100 dark:bg-slate-900/90 p-1.5 rounded-xl border border-gray-300 dark:border-slate-800">
+            {['pre-order', 'in-order', 'post-order', 'level-order', 'morris'].map(tab => (
+              <button
+                key={tab}
+                onClick={() => {
+                  setMode(tab);
+                  engine.reset();
+                }}
+                className={`px-3 py-1.5 text-xs font-semibold rounded-lg capitalize transition-all ${
+                  mode === tab 
+                    ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-md shadow-indigo-950/20'
+                    : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 hover:bg-gray-200 dark:hover:bg-slate-800/50'
+                }`}
+              >
+                {tab.replace('-', ' ')}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Dashboard Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
+          
+          {/* LEFT: Tree Workspace & Controls */}
+          <div className="lg:col-span-8 flex flex-col gap-6">
+            
+            {/* Control Bar Card */}
+            <div className="bg-white dark:bg-[#111] backdrop-blur-xl border border-gray-200 dark:border-[#222] p-5 rounded-2xl flex flex-col md:flex-row gap-5 justify-between items-center shadow-lg shadow-black/20">
+              <div className="flex flex-col sm:flex-row gap-2.5 w-full md:w-auto">
+                  <button
+                    onClick={generateRandomTree}
+                    disabled={engine.isPlaying}
+                    className="px-4 py-2 text-xs font-bold bg-gray-900 hover:bg-slate-800 dark:bg-[#1a1a1a] dark:hover:bg-[#2a2a2a] text-white rounded-xl transition-all border border-gray-200 dark:border-[#333] disabled:opacity-40"
+                  >
+                    🎲 Random Balanced Tree
+                  </button>
+                  <div className="flex gap-1.5 flex-1 sm:flex-initial">
+                    <input
+                      type="number"
+                      value={inputValue}
+                      onChange={(e) => setInputValue(e.target.value)}
+                      placeholder="Value (1-99)"
+                      className="w-full sm:w-28 px-3 py-2 text-xs bg-white dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] rounded-xl text-slate-900 dark:text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors"
+                      disabled={engine.isPlaying}
+                      onKeyDown={(e) => e.key === 'Enter' && handleInsert()}
+                    />
+                    <button
+                      onClick={handleInsert}
+                      disabled={engine.isPlaying}
+                      className="px-3.5 py-2 text-xs font-bold bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white rounded-xl transition-all"
+                    >
+                      Insert
+                    </button>
+                  </div>
+                </div>
+
+                <div className="flex flex-wrap items-center gap-3 flex-1 justify-end">
+                  <PlaybackControls
+                    isPlaying={engine.isPlaying}
+                    onPlayPause={engine.isPlaying ? engine.pause : startPlayback}
+                    onStepForward={engine.stepForward}
+                    onStepBackward={engine.stepBackward}
+                    onReset={engine.reset}
+                    speed={engine.speed / 500}
+                    onSpeedChange={(s) => engine.setSpeed(s * 500)}
+                    disabled={steps.length === 0}
+                    showPlayPause={true}
+                  />
+
+                  <button
+                    onClick={handleResetTree}
+                    className="px-3.5 py-2 text-xs font-bold text-rose-600 hover:text-rose-700 bg-rose-50 hover:bg-rose-100 dark:text-rose-500 dark:bg-rose-950/20 dark:hover:bg-rose-950/40 rounded-xl transition-all border border-rose-200 dark:border-rose-900/30 ml-2"
+                  >
+                    Clear Tree
+                  </button>
+                </div>
+            </div>
+
+            {/* Explanation / Progress Bar */}
+            <div className="bg-white dark:bg-[#111] border border-gray-200 dark:border-[#222] rounded-2xl p-4 flex flex-col gap-2">
+              <div className="flex justify-between items-center text-xs">
+                <span className="text-slate-600 dark:text-slate-400 font-semibold flex items-center gap-1.5">
+                  <Info className="w-3.5 h-3.5 text-indigo-400" /> Current Step Activity
+                </span>
+                <span className="text-slate-600 dark:text-slate-400 font-bold bg-gray-100 dark:bg-[#1a1a1a] px-2.5 py-0.5 rounded-full border border-gray-300 dark:border-[#333]">
+                    Step {engine.currentStep + 1} / {steps.length || 0}
+                </span>
+              </div>
+              <div className="text-sm font-medium text-slate-700 dark:text-indigo-200/90 leading-relaxed min-h-[40px]">
+                {message}
+              </div>
+            </div>
+
+            {/* Tree SVG Visualization Area */}
+            <div className="bg-white dark:bg-[#111] border border-gray-200 dark:border-[#222] rounded-3xl p-6 shadow-inner relative overflow-hidden flex flex-col justify-center min-h-[440px] items-center">
+              
+              {/* Dynamic Overlay labels */}
+              <div className="absolute top-4 left-4 flex flex-wrap gap-2 text-xs">
+                <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] px-2.5 py-1 rounded-lg">
+                  <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-md shadow-emerald-950/20"></span>
+                  <span className="text-slate-600 dark:text-slate-400">Current Node (curr)</span>
+                </div>
+                <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] px-2.5 py-1 rounded-lg">
+                  <span className="w-2.5 h-2.5 rounded-full bg-amber-500 shadow-md shadow-amber-950/20"></span>
+                  <span className="text-slate-600 dark:text-slate-400">Visited Node</span>
+                </div>
+                {mode === 'morris' && (
+                  <>
+                    <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] px-2.5 py-1 rounded-lg">
+                      <span className="w-2.5 h-2.5 rounded-full bg-purple-500 shadow-md shadow-purple-950/20"></span>
+                      <span className="text-slate-600 dark:text-slate-400">Predecessor (pred)</span>
+                    </div>
+                    <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-[#1a1a1a] border border-gray-200 dark:border-[#333] px-2.5 py-1 rounded-lg">
+                      <span className="w-6 border-t-2 border-dashed border-purple-500"></span>
+                      <span className="text-slate-600 dark:text-slate-400">Temporary Thread Link</span>
+                    </div>
+                  </>
+                )}
+              </div>
+
+              {/* Main SVG Render */}
+              {renderNodes.length > 0 ? (
+                <div className="overflow-auto w-full flex justify-center py-6">
+                  <svg
+                    width={svgDimensions.width}
+                    height={svgDimensions.height}
+                    viewBox={`${svgDimensions.viewBoxOffset} 0 ${svgDimensions.width} ${svgDimensions.height}`}
+                    className="max-w-full h-auto transition-transform duration-300"
+                  >
+                    <defs>
+                      <marker id="arrow-morris" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+                        <path d="M 0 1.5 L 9 5 L 0 8.5 z" className="fill-purple-400 dark:fill-purple-400" />
+                      </marker>
+                    </defs>
+
+                    {/* Render Edges / Thread lines */}
+                    {renderEdges.map((edge, idx) => {
+                      if (edge.isMorrisThread) {
+                        return (
+                          <path
+                            key={`thread-${idx}`}
+                            d={drawMorrisCurve(edge.x1, edge.y1, edge.x2, edge.y2)}
+                            fill="none"
+                            className="stroke-purple-400 dark:stroke-purple-400"
+                            strokeWidth="2.5"
+                            strokeDasharray="6,4"
+                            markerEnd="url(#arrow-morris)"
+                            className="animate-pulse"
+                          />
+                        );
+                      }
+                      return (
+                        <line
+                          key={`edge-${idx}`}
+                          x1={edge.x1}
+                          y1={edge.y1}
+                          x2={edge.x2}
+                          y2={edge.y2}
+                          className="stroke-slate-300 dark:stroke-slate-700"
+                          strokeWidth="2.5"
+                        />
+                      );
+                    })}
+
+                    {/* Render Nodes */}
+                    {renderNodes.map((node, idx) => {
+                      const isCurr = node.state === 'visiting';
+                      const isPred = node.state === 'predecessor';
+                      const isActive = node.state === 'active';
+                      const isVisited = node.isVisited;
+
+                      let nodeColor = 'bg-slate-900 border-slate-700 text-slate-300';
+                      let fillHex = '#0f172a';
+                      let strokeHex = '#334155';
+
+                      if (isCurr) {
+                        fillHex = '#10b981'; // emerald-500
+                        strokeHex = '#34d399';
+                      } else if (isPred) {
+                        fillHex = '#a855f7'; // purple-500
+                        strokeHex = '#c084fc';
+                      } else if (isVisited) {
+                        fillHex = '#f59e0b'; // amber-500
+                        strokeHex = '#fbbf24';
+                      } else if (isActive) {
+                        fillHex = '#3b82f6'; // blue-500
+                        strokeHex = '#60a5fa';
+                      }
+
+                      return (
+                        <g key={`node-${idx}`} className="transition-all duration-300">
+                          {/* Outer glow ring for curr or predecessor */}
+                          {(isCurr || isPred) && (
+                            <circle
+                              cx={node.x}
+                              cy={node.y}
+                              r="28"
+                              fill="none"
+                              stroke={strokeHex}
+                              strokeWidth="1.5"
+                              strokeDasharray="4,2"
+                              className="animate-spin-slow opacity-60"
+                            />
+                          )}
+                          
+                          {/* Main node circle */}
+                          <circle
+                            cx={node.x}
+                            cy={node.y}
+                            r="21"
+                            fill={fillHex}
+                            stroke={strokeHex}
+                            strokeWidth="2.5"
+                            className="transition-all duration-300 shadow-xl shadow-black"
+                          />
+
+                          {/* Inner text node label */}
+                          <text
+                            x={node.x}
+                            y={node.y + 4.5}
+                            textAnchor="middle"
+                            className="fill-white dark:fill-slate-800"
+                            fontSize="12"
+                            fontWeight="bold"
+                          >
+                            {node.value}
+                          </text>
+
+                          {/* Extra pointers labels inside SVGs */}
+                          {isCurr && (
+                            <g transform={`translate(${node.x - 22}, ${node.y - 35})`}>
+                              <rect width="44" height="15" rx="4" className="fill-emerald-700 dark:fill-emerald-600 stroke stroke-emerald-400" strokeWidth="0.5" />
+                              <text x="22" y="11" fill="white" fontSize="9" fontWeight="bold" textAnchor="middle">curr</text>
+                            </g>
+                          )}
+                        </g>
+                      );
+                    })}
+                  </svg>
+                </div>
+              ) : (
+                <div className="flex flex-col items-center gap-2.5 text-slate-400 dark:text-slate-500 py-12">
+                  <AlertCircle className="w-10 h-10 text-slate-400 dark:text-slate-600" />
+                  <span className="text-sm font-semibold text-slate-700 dark:text-slate-300">Workspace Empty</span>
+                  <span className="text-xs max-w-xs text-center text-slate-500 dark:text-slate-400">Please generate a random tree or insert custom node elements.</span>
+                </div>
+              )}
+
+              {/* BFS Queue or Stack Visualization strip */}
+              {currentStep && (
+                <div className="w-full mt-4 border-t border-gray-200 dark:border-[#333] pt-4 flex flex-col gap-2 bg-white dark:bg-[#111] p-4 rounded-xl border border-gray-200 dark:border-[#222]">
+                  {mode === 'level-order' && (
+                    <div className="flex items-center gap-3">
+                      <div className="text-[10px] text-slate-500 font-bold uppercase tracking-wider w-16">FIFO Queue:</div>
+                      <div className="flex items-center gap-1.5 overflow-x-auto py-1">
+                        {currentStep.queue && currentStep.queue.length > 0 ? (
+                          currentStep.queue.map((val, qidx) => (
+                            <div
+                              key={`q-${qidx}`}
+                              className={`px-3 py-1 text-xs font-bold rounded-lg border flex items-center justify-center min-w-8 ${
+                                qidx === 0
+                                  ? 'bg-emerald-50 dark:bg-emerald-500/20 text-emerald-600 dark:text-emerald-300 border-emerald-200 dark:border-emerald-500/30'
+                                  : 'bg-gray-100 dark:bg-slate-900 border-gray-200 dark:border-slate-800 text-slate-600 dark:text-slate-400'
+                              }`}
+                            >
+                              {val}
+                            </div>
+                          ))
+                        ) : (
+                          <div className="text-slate-650 dark:text-slate-400 text-xs italic">Queue is empty</div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {(mode === 'pre-order' || mode === 'in-order' || mode === 'post-order') && (
+                    <div className="flex items-center gap-3">
+                      <div className="text-[10px] text-slate-500 font-bold uppercase tracking-wider w-16">Call Stack:</div>
+                      <div className="flex items-center gap-1.5 overflow-x-auto py-1">
+                        {currentStep.stack && currentStep.stack.length > 0 ? (
+                          currentStep.stack.map((val, sidx) => (
+                            <div
+                              key={`s-${sidx}`}
+                              className="px-3 py-1 text-xs font-bold rounded-lg border bg-indigo-50 dark:bg-indigo-950/20 text-indigo-600 dark:text-indigo-300 border-indigo-200 dark:border-indigo-500/20"
+                            >
+                              {val}
+                            </div>
+                          ))
+                        ) : (
+                          <div className="text-slate-650 dark:text-slate-400 text-xs italic">Recursion stack empty (at root level)</div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Active Traversal Result Path Output */}
+                  <div className="flex items-center gap-3 mt-1.5 border-t border-gray-200 dark:border-slate-900 pt-2">
+                    <div className="text-[10px] text-slate-500 font-bold uppercase tracking-wider w-16">Result Path:</div>
+                    <div className="flex flex-wrap items-center gap-1.5">
+                      {currentStep.visited && currentStep.visited.length > 0 ? (
+                        currentStep.visited.map((val, pidx) => (
+                          <React.Fragment key={`p-${pidx}`}>
+                            <div className="px-2.5 py-0.5 text-xs font-bold rounded bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-200 dark:border-amber-500/20 shadow shadow-amber-950/10">
+                              {val}
+                            </div>
+                            {pidx < currentStep.visited.length - 1 && (
+                              <span className="text-slate-400 dark:text-slate-700 text-xs font-bold">→</span>
+                            )}
+                          </React.Fragment>
+                        ))
+                      ) : (
+                        <div className="text-slate-650 dark:text-slate-400 text-xs italic">No nodes visited yet. Click Play.</div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Complexity Information Panel */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+              
+              {/* Time Complexity Card */}
+              <div className="bg-gray-50 dark:bg-slate-900/40 border border-gray-200 dark:border-slate-800/80 rounded-2xl p-5 flex flex-col gap-2">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <Layers className="w-4 h-4 text-emerald-400" />
+                    <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-200">Time Complexity</h3>
+                  </div>
+                  <span className="px-2 py-0.5 text-xs font-bold rounded bg-emerald-950/40 text-emerald-400 border border-emerald-900/50">
+                    {activeComplexity.time}
+                  </span>
+                </div>
+                <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed mt-1">
+                  {activeComplexity.timeDesc}
+                </p>
+              </div>
+
+              {/* Space Complexity Card */}
+              <div className="bg-gray-50 dark:bg-slate-900/40 border border-gray-200 dark:border-slate-800/80 rounded-2xl p-5 flex flex-col gap-2">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <Layers className="w-4 h-4 text-purple-400" />
+                    <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-200">Space Complexity</h3>
+                  </div>
+                  <span className="px-2 py-0.5 text-xs font-bold rounded bg-purple-950/40 text-purple-400 border border-purple-900/50">
+                    {activeComplexity.space}
+                  </span>
+                </div>
+                <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed mt-1">
+                  {activeComplexity.spaceDesc}
+                </p>
+              </div>
+            </div>
+
+          </div>
+
+          {/* RIGHT: Code Block & Quiz Modules */}
+          <div className="lg:col-span-4 flex flex-col gap-6 w-full">
+            
+            {/* Interactive Code Highlighter Card */}
+            <div className="bg-gray-50 dark:bg-slate-900/70 border border-gray-200 dark:border-slate-800 rounded-2xl p-5 flex flex-col shadow-lg shadow-black/20">
+              <div className="flex items-center gap-2 border-b border-slate-200 dark:border-slate-800 pb-3 mb-4">
+                <BookOpen className="w-4 h-4 text-indigo-400" />
+                <h2 className="text-sm font-bold uppercase tracking-wider text-slate-700 dark:text-slate-300">Pseudocode</h2>
+              </div>
+              <div className="flex flex-col gap-1 font-mono text-xs text-slate-700 dark:text-slate-400 bg-white dark:bg-[#1a1a1a] p-4 rounded-xl border border-gray-200 dark:border-[#333] overflow-x-auto leading-relaxed">
+                {pseudocode[mode].map((line, idx) => {
+                  const isHighlighted = idx === currentHighlightLine;
+                  return (
+                    <div
+                      key={`code-${idx}`}
+                      className={`flex gap-3 px-2 py-0.5 rounded transition-all ${
+                        isHighlighted 
+                          ? 'bg-indigo-600/25 text-indigo-200 font-semibold border-l-2 border-indigo-500 pl-1.5'
+                          : ''
+                      }`}
+                    >
+                      <span className="text-[10px] text-slate-400 dark:text-slate-700 select-none w-4 text-right">{idx + 1}</span>
+                      <pre className="flex-1 whitespace-pre">{line}</pre>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* Quiz Challenge Card */}
+            <div className="bg-gray-50 dark:bg-slate-900/70 border border-gray-200 dark:border-slate-800 rounded-2xl p-5 flex flex-col gap-4 shadow-lg shadow-black/20">
+              <div className="flex items-center gap-2 border-b border-slate-200 dark:border-slate-800 pb-3">
+                <Award className="w-4.5 h-4.5 text-amber-400 animate-pulse" />
+                <h2 className="text-sm font-bold uppercase tracking-wider text-slate-700 dark:text-slate-300">Quiz Challenge</h2>
+              </div>
+              
+              <div className="flex flex-col gap-3.5">
+                <div className="text-xs font-semibold text-slate-700 dark:text-slate-300 leading-normal bg-white dark:bg-[#111] p-3 rounded-xl border border-gray-200 dark:border-[#222]">
+                  {activeQuestion.question}
+                </div>
+
+                {/* Option list */}
+                <div className="flex flex-col gap-2">
+                  {activeQuestion.options.map((opt, oIdx) => {
+                    const isSelected = selectedOption === oIdx;
+                    const isCorrect = oIdx === activeQuestion.answer;
+                    
+                    let btnColor = "bg-white hover:bg-gray-50 border-gray-200 text-slate-700 dark:bg-[#1a1a1a] dark:hover:bg-[#222] dark:border-[#333] dark:text-slate-400";
+                    if (isSelected) {
+                      btnColor = "bg-indigo-50 border-indigo-500 text-indigo-600 dark:bg-indigo-950/40 dark:border-indigo-500 dark:text-indigo-300";
+                    }
+                    if (quizSubmitted) {
+                      if (isCorrect) {
+                        btnColor = "bg-emerald-50 border-emerald-500 text-emerald-600 dark:bg-emerald-950/40 dark:border-emerald-500 dark:text-emerald-300";
+                      } else if (isSelected) {
+                        btnColor = "bg-rose-50 border-rose-500 text-rose-600 dark:bg-rose-950/40 dark:border-rose-500 dark:text-rose-300";
+                      }
+                    }
+
+                    return (
+                      <button
+                        key={`opt-${oIdx}`}
+                        onClick={() => handleQuizAnswer(oIdx)}
+                        className={`w-full text-left px-4 py-2.5 text-xs font-medium rounded-xl border transition-all flex items-center justify-between gap-2.5 ${btnColor}`}
+                        disabled={quizSubmitted}
+                      >
+                        <span>{opt}</span>
+                        {quizSubmitted && isCorrect && <CheckCircle className="w-4 h-4 text-emerald-400 shrink-0" />}
+                        {quizSubmitted && isSelected && !isCorrect && <AlertCircle className="w-4 h-4 text-rose-400 shrink-0" />}
+                      </button>
+                    );
+                  })}
+                </div>
+
+                {/* Submission Controls */}
+                <div className="flex gap-2 justify-end mt-1.5">
+                  {!quizSubmitted ? (
+                    <button
+                      onClick={submitQuiz}
+                      disabled={selectedOption === null}
+                      className="px-4 py-2 text-xs font-bold bg-indigo-600 hover:bg-indigo-500 disabled:opacity-40 text-white rounded-xl transition-all shadow shadow-indigo-950"
+                    >
+                      Submit Answer
+                    </button>
+                  ) : (
+                    <button
+                      onClick={nextQuizQuestion}
+                      className="px-4 py-2 text-xs font-bold bg-gray-100 hover:bg-gray-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 rounded-xl transition-all border border-gray-300 dark:border-slate-700"
+                    >
+                      Next Question
+                    </button>
+                  )}
+                </div>
+
+                {/* Quiz feedback explanation */}
+                {quizSubmitted && (
+                  <div className="bg-gray-100 dark:bg-[#1a1a1a] border border-gray-300 dark:border-[#333] p-3.5 rounded-xl flex gap-2.5 items-start mt-1">
+                    <Info className="w-4 h-4 text-indigo-400 shrink-0 mt-0.5" />
+                    <div className="text-[11px] text-slate-600 dark:text-slate-400 leading-normal">
+                      <span className="font-semibold text-indigo-300 block mb-0.5">
+                        {selectedOption === activeQuestion.answer ? '🎉 Correct Answer!' : '❌ Incorrect Answer'}
+                      </span>
+                      {activeQuestion.explanation}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+
+      </main>
+
+      <Footer />
+    </div>
+  );
+}
+
diff --git a/src/app/visualizer/tree/traversing/in-order/AlgorithmClient.jsx b/src/app/visualizer/tree/traversing/in-order/AlgorithmClient.jsx
new file mode 100644
index 000000000..586f818e0
--- /dev/null
+++ b/src/app/visualizer/tree/traversing/in-order/AlgorithmClient.jsx
@@ -0,0 +1,9 @@
+import TreeTraversalVisualizer from "@/app/visualizer/tree/traversing/TreeTraversalVisualizer";
+
+
+
+const InOrderPage = () => {
+  return <TreeTraversalVisualizer initialMode="in-order" />;
+};
+
+export default InOrderPage;
diff --git a/src/app/visualizer/tree/traversing/in-order/animation.jsx b/src/app/visualizer/tree/traversing/in-order/animation.jsx
new file mode 100644
index 000000000..76a796651
--- /dev/null
+++ b/src/app/visualizer/tree/traversing/in-order/animation.jsx
@@ -0,0 +1,458 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import {
+  VisualizerCard,
+  VisualizerInteractiveLayout,
+} from "@/app/visualizer/components/VisualizerInteractiveLayout";
+import usePlayback from "@/app/hooks/usePlayback";
+import useVisualizerKeyboard from "@/app/hooks/useVisualizerKeyboard";
+import PlaybackControls from "@/app/components/ui/PlaybackControls";
+import useVisualizerReset from "@/app/hooks/useVisualizerReset";
+
+class TreeNode {
+  constructor(value) {
+    this.value = value;
+    this.left = null;
+    this.right = null;
+  }
+}
+
+export default function InOrderVisualizer() {
+  const [root, setRoot] = useState(null);
+  const [inputValue, setInputValue] = useState("");
+  const [message, setMessage] = useState("Tree is empty");
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [highlightedNodes, setHighlightedNodes] = useState([]);
+  const [traversalResult, setTraversalResult] = useState([]);
+  const [steps, setSteps] = useState(0);
+  const [theme, setTheme] = useState("default");
+  const animationRef = useRef(null);
+  useVisualizerReset(() => {
+    if (animationRef.current) clearTimeout(animationRef.current);
+    setRoot(null);
+    setInputValue("");
+    setMessage("Tree is empty");
+    setIsAnimating(false);
+    setHighlightedNodes([]);
+    setTraversalResult([]);
+    setSteps(0);
+  });
+  const { speed, setSpeed } = usePlayback(1);
+
+  const insertNode = (node, value) => {
+    if (!node) return new TreeNode(value);
+    if (value < node.value) {
+      return { ...node, left: insertNode(node.left, value) };
+    }
+    if (value > node.value) {
+      return { ...node, right: insertNode(node.right, value) };
+    }
+    return node;
+  };
+
+  const handleInsert = () => {
+    const value = parseInt(inputValue, 10);
+    if (Number.isNaN(value)) {
+      setMessage("Please enter a valid number");
+      return;
+    }
+
+    setRoot((prev) => {
+      const newRoot = insertNode(prev, value);
+      setMessage(`Inserted ${value}`);
+      return newRoot;
+    });
+    setInputValue("");
+    setTraversalResult([]);
+    setHighlightedNodes([]);
+    setSteps(0);
+  };
+
+  const generateRandomTree = () => {
+    const size = Math.floor(Math.random() * 5) + 5;
+    const values = Array.from({ length: size }, () => Math.floor(Math.random() * 100) + 1);
+
+    let newRoot = null;
+    values.forEach((value) => {
+      newRoot = insertNode(newRoot, value);
+    });
+
+    setRoot(newRoot);
+    setMessage(`Generated tree with ${size} nodes`);
+    setTraversalResult([]);
+    setHighlightedNodes([]);
+    setSteps(0);
+  };
+
+  const reset = () => {
+    if (animationRef.current) {
+      clearTimeout(animationRef.current);
+    }
+    setRoot(null);
+    setInputValue("");
+    setIsAnimating(false);
+    setMessage("Tree is empty");
+    setTraversalResult([]);
+    setHighlightedNodes([]);
+    setSteps(0);
+  };
+
+  const inOrderTraversal = (node, path = []) => {
+    if (!node) return path;
+
+    const leftPath = inOrderTraversal(node.left, path);
+    leftPath.push({
+      value: node.value,
+      action: "visit",
+      highlighted: true,
+    });
+    return inOrderTraversal(node.right, leftPath);
+  };
+
+  const visualizeInOrder = () => {
+    if (!root) {
+      setMessage("Tree is empty!");
+      return;
+    }
+
+    setIsAnimating(true);
+    setMessage("Performing in-order traversal...");
+    setTraversalResult([]);
+    setHighlightedNodes([]);
+    setSteps(0);
+
+    const traversalPath = inOrderTraversal(root);
+    let step = 0;
+
+    const animateStep = () => {
+      if (step < traversalPath.length) {
+        const current = traversalPath[step];
+        setHighlightedNodes([current.value]);
+        setTraversalResult((prev) => [...prev, current.value]);
+        setSteps(step + 1);
+        step++;
+        animationRef.current = setTimeout(animateStep, 1000 / speed);
+      } else {
+        setMessage(
+          `In-order traversal complete: [${traversalPath.map((node) => node.value).join(", ")}]`
+        );
+        setIsAnimating(false);
+        setHighlightedNodes([]);
+      }
+    };
+
+    animateStep();
+  };
+
+  useVisualizerKeyboard({
+    onReset: reset,
+    onSpeedChange: setSpeed,
+    speed: speed,
+    sorting: isAnimating,
+    sorted: false,
+    enabled: true,
+  });
+
+  const renderTree = (node, x = 400, y = 50, level = 0, nodes = [], edges = []) => {
+    if (!node) return { nodes, edges };
+
+    const nodeRadius = 25;
+    const xOffset = Math.max(50, 200 / (level + 1));
+    const yOffset = 80;
+
+    nodes.push({
+      value: node.value,
+      x,
+      y,
+      highlighted: highlightedNodes.includes(node.value),
+    });
+
+    if (node.left) {
+      const leftX = x - xOffset;
+      const leftY = y + yOffset;
+      edges.push({
+        x1: x,
+        y1: y + nodeRadius,
+        x2: leftX,
+        y2: leftY - nodeRadius,
+      });
+      renderTree(node.left, leftX, leftY, level + 1, nodes, edges);
+    }
+
+    if (node.right) {
+      const rightX = x + xOffset;
+      const rightY = y + yOffset;
+      edges.push({
+        x1: x,
+        y1: y + nodeRadius,
+        x2: rightX,
+        y2: rightY - nodeRadius,
+      });
+      renderTree(node.right, rightX, rightY, level + 1, nodes, edges);
+    }
+
+    return { nodes, edges };
+  };
+
+  const { nodes, edges } = root ? renderTree(root) : { nodes: [], edges: [] };
+
+  const getSvgDimensions = () => {
+    if (nodes.length === 0) return { width: 800, height: 400 };
+
+    const xValues = nodes.map((node) => node.x);
+    const yValues = nodes.map((node) => node.y);
+    const padding = 50;
+
+    return {
+      width: Math.max(800, Math.max(...xValues) - Math.min(...xValues) + 2 * padding),
+      height: Math.max(400, Math.max(...yValues) + 2 * padding),
+    };
+  };
+
+  const svgDimensions = getSvgDimensions();
+
+  useEffect(() => {
+    return () => {
+      if (animationRef.current) {
+        clearTimeout(animationRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <VisualizerInteractiveLayout>
+      <VisualizerCard>
+        <div className="mb-4">
+  <label className="block mb-2 font-medium">
+    Select Theme
+  </label>
+
+  <select
+    value={theme}
+    onChange={(e) => setTheme(e.target.value)}
+    className="w-full rounded-lg border p-2"
+  >
+    <option value="default">Default Dark</option>
+    <option value="amoled">AMOLED Dark</option>
+    <option value="ocean">Ocean Blue</option>
+    <option value="forest">Forest Green</option>
+    <option value="sepia">Sepia</option>
+  </select>
+</div>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div>
+            <button
+              onClick={generateRandomTree}
+              disabled={isAnimating}
+              className="mb-2 w-full rounded-lg bg-[#a435f0] px-4 py-2 text-white transition-colors hover:bg-[#8f2cd6] disabled:opacity-50"
+            >
+              Generate Random Tree
+            </button>
+            <div className="flex gap-2">
+              <input
+                type="number"
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                placeholder="Enter number"
+                className="flex-1 rounded-lg border p-2 transition-all focus:border-transparent focus:ring-2 focus:ring-[#a435f0] dark:bg-gray-700"
+                disabled={isAnimating}
+                onKeyDown={(e) => e.key === "Enter" && handleInsert()}
+              />
+              <button
+                onClick={handleInsert}
+                disabled={isAnimating}
+                className="rounded-lg bg-[#a435f0] px-4 py-2 text-white transition-colors hover:bg-[#8f2cd6] disabled:opacity-50"
+              >
+                Insert
+              </button>
+            </div>
+          </div>
+          <div className="flex flex-col gap-2">
+            <button
+              onClick={visualizeInOrder}
+              disabled={!root || isAnimating}
+              className="w-full rounded-lg bg-[#a435f0] px-4 py-2 text-white transition-colors hover:bg-[#8f2cd6] disabled:opacity-50"
+            >
+              {isAnimating ? "Traversing..." : "Start Traversal"}
+            </button>
+            <button
+              onClick={reset}
+              className="w-full rounded-lg bg-red-600 px-4 py-2 text-white transition-colors hover:bg-red-700"
+            >
+              Reset All
+            </button>
+          </div>
+        </div>
+
+        <div className="mt-6 flex flex-col gap-4">
+          <PlaybackControls 
+            showPlayPause={false}
+            speed={speed}
+            onSpeedChange={setSpeed}
+            disabled={isAnimating}
+          />
+          <div className="flex gap-4">
+            <div className="flex-1 rounded-lg bg-gray-100 p-2 text-center dark:bg-gray-700">
+              <div className="text-xs text-gray-500 dark:text-gray-400">Nodes</div>
+              <div className="font-bold">{nodes.length}</div>
+            </div>
+            <div className="flex-1 rounded-lg bg-gray-100 p-2 text-center dark:bg-gray-700">
+              <div className="text-xs text-gray-500 dark:text-gray-400">Steps</div>
+              <div className="font-bold">{steps}</div>
+            </div>
+          </div>
+        </div>
+      </VisualizerCard>
+
+      <VisualizerCard
+        className={
+          message.includes("complete")
+            ? "border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30"
+            : isAnimating
+              ? "border-[#a435f0]/30 bg-[#a435f0]/10 dark:border-[#a435f0]/50 dark:bg-[#a435f0]/20"
+              : ""
+        }
+      >
+        <p className="text-center font-medium">{message}</p>
+      </VisualizerCard>
+
+      <VisualizerCard>
+       <VisualizerCard
+  className={
+    theme === "amoled"
+      ? "bg-black text-white"
+      : theme === "ocean"
+      ? "bg-blue-950 text-blue-100"
+      : theme === "forest"
+      ? "bg-green-950 text-green-100"
+      : theme === "sepia"
+      ? "bg-amber-100 text-amber-900"
+      : ""
+  }
+>Tree Visualization</h2>
+        <div className="flex min-h-[400px] justify-center overflow-auto py-4">
+          {nodes.length > 0 ? (
+            <div className="relative" style={{ minWidth: `${svgDimensions.width}px` }}>
+              <svg
+                width={svgDimensions.width}
+                height={svgDimensions.height}
+                viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}
+                className="mx-auto"
+              >
+                {edges.map((edge, i) => (
+                  <line
+                    key={i}
+                    x1={edge.x1}
+                    y1={edge.y1}
+                    x2={edge.x2}
+                    y2={edge.y2}
+                    className="stroke-slate-400 dark:stroke-slate-400"
+                    strokeWidth="2"
+                    className="dark:stroke-gray-600"
+                  />
+                ))}
+                {nodes.map((node, i) => (
+                  <g key={i}>
+                    <circle
+                      cx={node.x}
+                      cy={node.y}
+                      r="22"
+                      fill={
+  theme === "amoled"
+    ? (node.highlighted ? "#ffffff" : "#444444")
+    : theme === "ocean"
+    ? (node.highlighted ? "#2563eb" : "#93c5fd")
+    : theme === "forest"
+    ? (node.highlighted ? "#15803d" : "#86efac")
+    : theme === "sepia"
+    ? (node.highlighted ? "#92400e" : "#fcd34d")
+    : (node.highlighted ? "#a435f0" : "#d38cff")
+}
+
+stroke={
+  theme === "amoled"
+    ? "#ffffff"
+    : theme === "ocean"
+    ? "#1d4ed8"
+    : theme === "forest"
+    ? "#166534"
+    : theme === "sepia"
+    ? "#78350f"
+    : "#a435f0"
+}
+                      strokeWidth="2"
+                      className={`transition-colors ${node.highlighted ? "animate-pulse" : ""}`}
+                    />
+                    <text
+                      x={node.x}
+                      y={node.y + 5}
+                      textAnchor="middle"
+                      fill={node.highlighted ? "white" : "black"}
+                      fontSize="13"
+                      fontWeight="600"
+                    >
+                      {node.value}
+                    </text>
+                  </g>
+                ))}
+              </svg>
+            </div>
+          ) : (
+            <div className="flex h-full w-full items-center justify-center rounded-lg border-2 border-dashed text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              {isAnimating ? "Traversing..." : "No tree generated yet"}
+            </div>
+          )}
+        </div>
+
+        {traversalResult.length > 0 && (
+          <div className="mt-4 rounded-lg border border-[#a435f0]/30 bg-[#a435f0]/10 p-3 text-center dark:border-[#a435f0]/50 dark:bg-[#a435f0]/20">
+            <span className="font-medium">Path: </span>
+            <span className="text-[#a435f0] dark:text-[#d38cff] font-bold">
+              [{traversalResult.join(", ")}]
+            </span>
+          </div>
+        )}
+      </VisualizerCard>
+
+      <VisualizerCard>
+        <h2 className="mb-3 text-lg font-semibold">About In-Order Traversal</h2>
+        <div className="space-y-4">
+          <div className="prose text-sm dark:prose-invert">
+            <p>Visits nodes in the order:</p>
+            <ol className="space-y-1 pl-5">
+              <li>Left subtree</li>
+              <li>Root node</li>
+              <li>Right subtree</li>
+            </ol>
+            <p className="mt-2">For BSTs, this produces nodes in sorted order.</p>
+          </div>
+
+          <div className="rounded-lg border border-[#a435f0]/30 bg-[#a435f0]/10 p-3 dark:border-[#a435f0]/50 dark:bg-[#a435f0]/20">
+            <h3 className="mb-2 text-sm font-medium text-[#a435f0] dark:text-[#d38cff]">Algorithm:</h3>
+            <pre className="overflow-x-auto rounded bg-white dark:bg-gray-800 p-2 text-xs">
+{`function inOrder(node) {
+  if (node !== null) {
+    inOrder(node.left);
+    visit(node);
+    inOrder(node.right);
+  }
+}`}
+            </pre>
+          </div>
+
+          <div className="grid grid-cols-2 gap-2 text-xs">
+            <div className="rounded-lg bg-gray-100 p-2 text-center dark:bg-gray-700">
+              <div className="text-gray-500 dark:text-gray-400">Time</div>
+              <div className="font-bold">O(n)</div>
+            </div>
+            <div className="rounded-lg bg-gray-100 p-2 text-center dark:bg-gray-700">
+              <div className="text-gray-500 dark:text-gray-400">Space</div>
+              <div className="font-bold">O(h)</div>
+            </div>
+          </div>
+        </div>
+      </VisualizerCard>
+    </VisualizerInteractiveLayout>
+  );
+}
diff --git a/src/app/visualizer/tree/traversing/level-order/AlgorithmClient.jsx b/src/app/visualizer/tree/traversing/level-order/AlgorithmClient.jsx
new file mode 100644
index 000000000..423f47be6
--- /dev/null
+++ b/src/app/visualizer/tree/traversing/level-order/AlgorithmClient.jsx
@@ -0,0 +1,9 @@
+import TreeTraversalVisualizer from "@/app/visualizer/tree/traversing/TreeTraversalVisualizer";
+
+
+
+const LevelOrderPage = () => {
+  return <TreeTraversalVisualizer initialMode="level-order" />;
+};
+
+export default LevelOrderPage;
diff --git a/src/app/visualizer/tree/traversing/morris/AlgorithmClient.jsx b/src/app/visualizer/tree/traversing/morris/AlgorithmClient.jsx
new file mode 100644
index 000000000..890beb96e
--- /dev/null
+++ b/src/app/visualizer/tree/traversing/morris/AlgorithmClient.jsx
@@ -0,0 +1,9 @@
+import TreeTraversalVisualizer from "@/app/visualizer/tree/traversing/TreeTraversalVisualizer";
+
+
+
+const MorrisPage = () => {
+  return <TreeTraversalVisualizer initialMode="morris" />;
+};
+
+export default MorrisPage;
diff --git a/src/app/visualizer/tree/traversing/post-order/AlgorithmClient.jsx b/src/app/visualizer/tree/traversing/post-order/AlgorithmClient.jsx
new file mode 100644
index 000000000..ad99bba82
--- /dev/null
+++ b/src/app/visualizer/tree/traversing/post-order/AlgorithmClient.jsx
@@ -0,0 +1,9 @@
+import TreeTraversalVisualizer from "@/app/visualizer/tree/traversing/TreeTraversalVisualizer";
+
+
+
+const PostOrderPage = () => {
+  return <TreeTraversalVisualizer initialMode="post-order" />;
+};
+
+export default PostOrderPage;
diff --git a/src/app/visualizer/tree/traversing/pre-order/AlgorithmClient.jsx b/src/app/visualizer/tree/traversing/pre-order/AlgorithmClient.jsx
new file mode 100644
index 000000000..e3025f6ea
--- /dev/null
+++ b/src/app/visualizer/tree/traversing/pre-order/AlgorithmClient.jsx
@@ -0,0 +1,9 @@
+import TreeTraversalVisualizer from "@/app/visualizer/tree/traversing/TreeTraversalVisualizer";
+
+
+
+const PreOrderPage = () => {
+  return <TreeTraversalVisualizer initialMode="pre-order" />;
+};
+
+export default PreOrderPage;
diff --git a/src/app/visualizer/tree/traversing/quiz/TreeTraversalQuizClient.jsx b/src/app/visualizer/tree/traversing/quiz/TreeTraversalQuizClient.jsx
new file mode 100644
index 000000000..90e4f2d8a
--- /dev/null
+++ b/src/app/visualizer/tree/traversing/quiz/TreeTraversalQuizClient.jsx
@@ -0,0 +1,78 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowRight, Trees } from "lucide-react";
+
+const quizzes = [
+  {
+    title: "Pre-order Traversal Quiz",
+    description:
+      "Practice Root → Left → Right traversal and understand its applications.",
+    href: "/visualizer/tree/traversing/quiz/preorder",
+  },
+  {
+    title: "In-order Traversal Quiz",
+    description:
+      "Practice Left → Root → Right traversal and learn how BSTs produce sorted output.",
+    href: "/visualizer/tree/traversing/quiz/inorder",
+  },
+  {
+    title: "Post-order Traversal Quiz",
+    description:
+      "Test your knowledge of Left → Right → Root traversal and tree deletion.",
+    href: "/visualizer/tree/traversing/quiz/postorder",
+  },
+  {
+    title: "Level-order Traversal Quiz",
+    description:
+      "Learn Breadth-First Search (BFS) and level-wise traversal using queues.",
+    href: "/visualizer/tree/traversing/quiz/levelorder",
+  },
+];
+
+export default function TreeTraversalQuizClient() {
+  return (
+    <div className="min-h-screen bg-background p-6">
+      <div className="mx-auto max-w-7xl">
+        <div className="mb-10 text-center">
+          <h1 className="text-4xl font-bold">
+            🌳 Tree Traversal Quiz
+          </h1>
+
+          <p className="mt-3 text-muted-foreground">
+            Select a traversal algorithm and test your understanding.
+          </p>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          {quizzes.map((quiz) => (
+            <div
+              key={quiz.title}
+              className="rounded-2xl border border-green-500/20 bg-card p-6 shadow-sm transition-all hover:border-green-500/40 hover:shadow-lg"
+            >
+              <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-green-500/10 text-green-600">
+                <Trees size={28} />
+              </div>
+
+              <h2 className="text-xl font-semibold">
+                {quiz.title}
+              </h2>
+
+              <p className="mt-3 text-sm text-muted-foreground">
+                {quiz.description}
+              </p>
+
+              <Link
+                href={quiz.href}
+                className="mt-6 inline-flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2.5 font-medium text-white transition hover:bg-green-700"
+              >
+                Start Quiz
+                <ArrowRight size={18} />
+              </Link>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/traversing/quiz/inorder/page.jsx b/src/app/visualizer/tree/traversing/quiz/inorder/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/traversing/quiz/inorder/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/traversing/quiz/inorder/quiz.jsx b/src/app/visualizer/tree/traversing/quiz/inorder/quiz.jsx
new file mode 100644
index 000000000..a19a37f24
--- /dev/null
+++ b/src/app/visualizer/tree/traversing/quiz/inorder/quiz.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the correct order of In-order Traversal?",
+    options: [
+      "Root → Left → Right",
+      "Left → Root → Right",
+      "Left → Right → Root",
+      "Right → Root → Left"
+    ],
+    correctAnswer: 1,
+    explanation: "In-order traversal visits the Left subtree, then the Root, and finally the Right subtree."
+  },
+  {
+    question: "In a Binary Search Tree, what does In-order Traversal produce?",
+    options: [
+      "Descending order",
+      "Random order",
+      "Ascending sorted order",
+      "Level-wise order"
+    ],
+    correctAnswer: 2,
+    explanation: "In-order traversal of a BST always visits nodes in ascending order."
+  },
+  {
+    question: "Which subtree is visited first during In-order Traversal?",
+    options: [
+      "Right subtree",
+      "Left subtree",
+      "Root",
+      "Leaf nodes"
+    ],
+    correctAnswer: 1,
+    explanation: "The traversal always starts with the left subtree."
+  },
+  {
+    question: "When is the root node processed in In-order Traversal?",
+    options: [
+      "Before both subtrees",
+      "After the left subtree",
+      "After the right subtree",
+      "Last"
+    ],
+    correctAnswer: 1,
+    explanation: "The root is visited after the left subtree but before the right subtree."
+  },
+  {
+    question: "Which subtree is visited after the root?",
+    options: [
+      "Left subtree",
+      "Right subtree",
+      "None",
+      "Middle subtree"
+    ],
+    correctAnswer: 1,
+    explanation: "The right subtree is visited after the root."
+  },
+  {
+    question: "What is the time complexity of In-order Traversal?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation: "Each node is visited exactly once."
+  },
+  {
+    question: "Which data structure is used in iterative In-order Traversal?",
+    options: [
+      "Queue",
+      "Heap",
+      "Stack",
+      "Hash Table"
+    ],
+    correctAnswer: 2,
+    explanation: "A stack is used to simulate recursive traversal."
+  },
+  {
+    question: "What is the auxiliary space complexity of recursive In-order Traversal?",
+    options: [
+      "O(1)",
+      "O(h)",
+      "O(n²)",
+      "O(log log n)"
+    ],
+    correctAnswer: 1,
+    explanation: "The recursion stack requires O(h) space, where h is the tree height."
+  },
+  {
+    question: "Which application commonly uses In-order Traversal?",
+    options: [
+      "Deleting a tree",
+      "Printing BST elements in sorted order",
+      "Breadth-First Search",
+      "Heap construction"
+    ],
+    correctAnswer: 1,
+    explanation: "In-order traversal is commonly used to retrieve BST elements in sorted order."
+  },
+  {
+    question: "Which traversal sequence represents In-order Traversal?",
+    options: [
+      "Root → Left → Right",
+      "Left → Root → Right",
+      "Left → Right → Root",
+      "Right → Root → Left"
+    ],
+    correctAnswer: 1,
+    explanation: "The correct order is Left → Root → Right."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="In-order Traversal Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/traversing/quiz/levelorder/page.jsx b/src/app/visualizer/tree/traversing/quiz/levelorder/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/traversing/quiz/levelorder/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/traversing/quiz/levelorder/quiz.jsx b/src/app/visualizer/tree/traversing/quiz/levelorder/quiz.jsx
new file mode 100644
index 000000000..4dcb9edcd
--- /dev/null
+++ b/src/app/visualizer/tree/traversing/quiz/levelorder/quiz.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the order of Level-order Traversal?",
+    options: [
+      "Root → Left → Right",
+      "Left → Root → Right",
+      "Node by node level from top to bottom",
+      "Left → Right → Root"
+    ],
+    correctAnswer: 2,
+    explanation: "Level-order Traversal visits nodes level by level, starting from the root."
+  },
+  {
+    question: "Which data structure is primarily used for Level-order Traversal?",
+    options: [
+      "Stack",
+      "Queue",
+      "Heap",
+      "Hash Table"
+    ],
+    correctAnswer: 1,
+    explanation: "A queue is used to process nodes in First-In-First-Out (FIFO) order."
+  },
+  {
+    question: "Level-order Traversal is also known as:",
+    options: [
+      "Depth-First Search",
+      "Breadth-First Search",
+      "Binary Search",
+      "Recursive Search"
+    ],
+    correctAnswer: 1,
+    explanation: "Level-order Traversal is the Breadth-First Search (BFS) traversal of a tree."
+  },
+  {
+    question: "Which node is visited first during Level-order Traversal?",
+    options: [
+      "Left child",
+      "Right child",
+      "Root node",
+      "Deepest node"
+    ],
+    correctAnswer: 2,
+    explanation: "Traversal always starts from the root node."
+  },
+  {
+    question: "After visiting a node in Level-order Traversal, what is typically done?",
+    options: [
+      "Delete the node",
+      "Push its children into the queue",
+      "Sort its children",
+      "Move to the parent"
+    ],
+    correctAnswer: 1,
+    explanation: "The node's children are enqueued so they can be processed later."
+  },
+  {
+    question: "What is the time complexity of Level-order Traversal?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation: "Every node is visited exactly once, resulting in O(n) time."
+  },
+  {
+    question: "What is the auxiliary space complexity of Level-order Traversal?",
+    options: [
+      "O(1)",
+      "O(h)",
+      "O(w)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation: "The queue may store all nodes at the widest level, giving O(w) space where w is the maximum width of the tree."
+  },
+  {
+    question: "Which application commonly uses Level-order Traversal?",
+    options: [
+      "Printing nodes level by level",
+      "Sorting BST elements",
+      "Deleting a tree",
+      "AVL balancing"
+    ],
+    correctAnswer: 0,
+    explanation: "Level-order Traversal is commonly used to print or process nodes level by level."
+  },
+  {
+    question: "Which traversal explores all nodes at the current depth before moving deeper?",
+    options: [
+      "Pre-order",
+      "In-order",
+      "Post-order",
+      "Level-order"
+    ],
+    correctAnswer: 3,
+    explanation: "Level-order Traversal processes one level completely before moving to the next."
+  },
+  {
+    question: "What principle does the queue follow in Level-order Traversal?",
+    options: [
+      "LIFO",
+      "FIFO",
+      "Priority-based",
+      "Random"
+    ],
+    correctAnswer: 1,
+    explanation: "Queues follow the First-In-First-Out (FIFO) principle, which is essential for Breadth-First Search."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Level-order Traversal Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/traversing/quiz/page.jsx b/src/app/visualizer/tree/traversing/quiz/page.jsx
new file mode 100644
index 000000000..c5d3498e9
--- /dev/null
+++ b/src/app/visualizer/tree/traversing/quiz/page.jsx
@@ -0,0 +1,5 @@
+import TreeTraversalQuizClient from "./TreeTraversalQuizClient";
+
+export default function Page() {
+  return <TreeTraversalQuizClient />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/traversing/quiz/postorder/page.jsx b/src/app/visualizer/tree/traversing/quiz/postorder/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/traversing/quiz/postorder/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/traversing/quiz/postorder/quiz.jsx b/src/app/visualizer/tree/traversing/quiz/postorder/quiz.jsx
new file mode 100644
index 000000000..e9ee359e5
--- /dev/null
+++ b/src/app/visualizer/tree/traversing/quiz/postorder/quiz.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the correct order of Post-order Traversal?",
+    options: [
+      "Root → Left → Right",
+      "Left → Root → Right",
+      "Left → Right → Root",
+      "Right → Left → Root"
+    ],
+    correctAnswer: 2,
+    explanation: "Post-order traversal visits the Left subtree, then the Right subtree, and finally the Root."
+  },
+  {
+    question: "Which node is always visited last in Post-order Traversal?",
+    options: [
+      "Left child",
+      "Right child",
+      "Root node",
+      "Leaf node"
+    ],
+    correctAnswer: 2,
+    explanation: "The root node is visited after both left and right subtrees."
+  },
+  {
+    question: "Which subtree is visited first in Post-order Traversal?",
+    options: [
+      "Right subtree",
+      "Left subtree",
+      "Root",
+      "Middle subtree"
+    ],
+    correctAnswer: 1,
+    explanation: "Traversal begins with the left subtree."
+  },
+  {
+    question: "Which subtree is visited immediately after the left subtree?",
+    options: [
+      "Root",
+      "Right subtree",
+      "Leaf nodes",
+      "Parent node"
+    ],
+    correctAnswer: 1,
+    explanation: "After completing the left subtree, the traversal continues with the right subtree."
+  },
+  {
+    question: "What is the time complexity of Post-order Traversal?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation: "Every node is visited exactly once, resulting in O(n) time."
+  },
+  {
+    question: "Which data structure is commonly used for iterative Post-order Traversal?",
+    options: [
+      "Queue",
+      "Heap",
+      "Stack",
+      "Hash Table"
+    ],
+    correctAnswer: 2,
+    explanation: "A stack is commonly used to implement iterative Post-order Traversal."
+  },
+  {
+    question: "Which application commonly uses Post-order Traversal?",
+    options: [
+      "Printing BST values in sorted order",
+      "Deleting an entire tree",
+      "Finding the minimum node",
+      "Level-order printing"
+    ],
+    correctAnswer: 1,
+    explanation: "Post-order Traversal is commonly used when deleting or freeing every node of a tree."
+  },
+  {
+    question: "What is the auxiliary space complexity of recursive Post-order Traversal?",
+    options: [
+      "O(1)",
+      "O(h)",
+      "O(n²)",
+      "O(log log n)"
+    ],
+    correctAnswer: 1,
+    explanation: "The recursion stack requires O(h) space, where h is the height of the tree."
+  },
+  {
+    question: "Which traversal sequence correctly represents Post-order?",
+    options: [
+      "Root → Left → Right",
+      "Left → Root → Right",
+      "Left → Right → Root",
+      "Right → Root → Left"
+    ],
+    correctAnswer: 2,
+    explanation: "Post-order Traversal always follows Left → Right → Root."
+  },
+  {
+    question: "Post-order Traversal is most suitable when:",
+    options: [
+      "The parent must be processed before its children",
+      "Child nodes must be processed before their parent",
+      "Nodes should be visited level by level",
+      "Elements need to be sorted"
+    ],
+    correctAnswer: 1,
+    explanation: "Post-order ensures both child subtrees are processed before the parent node."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Post-order Traversal Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/traversing/quiz/preorder/page.jsx b/src/app/visualizer/tree/traversing/quiz/preorder/page.jsx
new file mode 100644
index 000000000..a2c68e3b6
--- /dev/null
+++ b/src/app/visualizer/tree/traversing/quiz/preorder/page.jsx
@@ -0,0 +1,5 @@
+import Quiz from "./quiz";
+
+export default function Page() {
+  return <Quiz />;
+}
\ No newline at end of file
diff --git a/src/app/visualizer/tree/traversing/quiz/preorder/quiz.jsx b/src/app/visualizer/tree/traversing/quiz/preorder/quiz.jsx
new file mode 100644
index 000000000..b47454731
--- /dev/null
+++ b/src/app/visualizer/tree/traversing/quiz/preorder/quiz.jsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React from "react";
+import QuizEngine from "@/app/components/ui/QuizEngine";
+
+const questions = [
+  {
+    question: "What is the correct order of Pre-order Traversal?",
+    options: [
+      "Left → Root → Right",
+      "Root → Left → Right",
+      "Left → Right → Root",
+      "Right → Left → Root"
+    ],
+    correctAnswer: 1,
+    explanation: "Pre-order traversal visits the Root first, followed by the Left subtree and then the Right subtree."
+  },
+  {
+    question: "Which node is visited first during Pre-order Traversal?",
+    options: [
+      "Left child",
+      "Right child",
+      "Root node",
+      "Leaf node"
+    ],
+    correctAnswer: 2,
+    explanation: "The root node is always visited first in Pre-order traversal."
+  },
+  {
+    question: "Which subtree is completely traversed immediately after the root?",
+    options: [
+      "Right subtree",
+      "Left subtree",
+      "Both simultaneously",
+      "No subtree"
+    ],
+    correctAnswer: 1,
+    explanation: "After visiting the root, the entire left subtree is traversed before moving to the right subtree."
+  },
+  {
+    question: "Which data structure is commonly used for iterative Pre-order Traversal?",
+    options: [
+      "Queue",
+      "Stack",
+      "Heap",
+      "Hash Table"
+    ],
+    correctAnswer: 1,
+    explanation: "A stack is used to simulate recursion in iterative Pre-order traversal."
+  },
+  {
+    question: "What is the time complexity of Pre-order Traversal?",
+    options: [
+      "O(1)",
+      "O(log n)",
+      "O(n)",
+      "O(n²)"
+    ],
+    correctAnswer: 2,
+    explanation: "Every node is visited exactly once."
+  },
+  {
+    question: "What is the auxiliary space complexity of recursive Pre-order Traversal?",
+    options: [
+      "O(1)",
+      "O(h)",
+      "O(n²)",
+      "O(log log n)"
+    ],
+    correctAnswer: 1,
+    explanation: "The recursion stack requires O(h) space where h is the tree height."
+  },
+  {
+    question: "Which application commonly uses Pre-order Traversal?",
+    options: [
+      "Sorting BST elements",
+      "Copying or serializing a tree",
+      "Deleting a tree",
+      "Level-order printing"
+    ],
+    correctAnswer: 1,
+    explanation: "Pre-order traversal is useful for copying and serializing tree structures."
+  },
+  {
+    question: "Which sequence correctly represents a Pre-order traversal?",
+    options: [
+      "Root → Left → Right",
+      "Left → Root → Right",
+      "Left → Right → Root",
+      "Right → Root → Left"
+    ],
+    correctAnswer: 0,
+    explanation: "Pre-order traversal always follows Root → Left → Right."
+  },
+  {
+    question: "Recursive Pre-order Traversal primarily relies on:",
+    options: [
+      "Queue",
+      "Stack (call stack)",
+      "Heap",
+      "Linked List"
+    ],
+    correctAnswer: 1,
+    explanation: "Recursive function calls are managed by the system call stack."
+  },
+  {
+    question: "Pre-order Traversal is especially useful when:",
+    options: [
+      "Printing sorted values",
+      "Constructing or saving tree structures",
+      "Finding minimum values",
+      "Balancing AVL trees"
+    ],
+    correctAnswer: 1,
+    explanation: "Pre-order traversal preserves parent-child relationships, making it useful for tree reconstruction."
+  }
+];
+
+export default function Quiz() {
+  return (
+    <QuizEngine
+      title="Pre-order Traversal Quiz"
+      questions={questions}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/authProxy.js b/src/authProxy.js
new file mode 100644
index 000000000..98d0c43ea
--- /dev/null
+++ b/src/authProxy.js
@@ -0,0 +1,122 @@
+import { createServerClient } from "@supabase/ssr";
+import { NextResponse } from "next/server";
+import {
+  validateCsrfOrigin,
+  isStateChangingMethod,
+  isApiRoute,
+  CSRF_COOKIE_NAME,
+  CSRF_HEADER_NAME,
+} from "@/lib/csrfConstants";
+import { validateCsrfTokenEdge } from "@/lib/csrfToken";
+import { getSupabaseConfig } from "@/lib/shared-utils";
+
+const SUPABASE_ENV_ERROR =
+  "Missing NEXT_PUBLIC_SUPABASE_URL and/or NEXT_PUBLIC_SUPABASE_ANON_KEY. Copy .env.example to .env.local and add your Supabase project URL and anon key.";
+
+const CSRF_EXEMPT_ROUTES = new Set(["/api/csrf-token"]);
+
+const protectedRoutes = ["/arena", "/practice", "/profile"];
+
+export async function proxy(request) {
+  let supabaseResponse = NextResponse.next({ request });
+
+  const supabaseConfig = getSupabaseConfig();
+  if (!supabaseConfig) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(SUPABASE_ENV_ERROR);
+    }
+    return supabaseResponse;
+  }
+
+  const supabase = createServerClient(
+    supabaseConfig.supabaseUrl,
+    supabaseConfig.supabaseAnonKey,
+    {
+      cookies: {
+        getAll() {
+          return request.cookies.getAll();
+        },
+        setAll(cookiesToSet) {
+          cookiesToSet.forEach(({ name, value }) =>
+            request.cookies.set(name, value),
+          );
+          supabaseResponse = NextResponse.next({ request });
+          cookiesToSet.forEach(({ name, value, options }) =>
+            supabaseResponse.cookies.set(name, value, {
+              ...options,
+              secure: process.env.NODE_ENV === "production",
+            }),
+          );
+        },
+      },
+    },
+  );
+
+  const { data: { user }, error } = await supabase.auth.getUser();
+// Forward the verified user to route handlers so they can skip
+// a redundant getUser() call, cutting auth latency in half.
+const requestHeaders = new Headers(request.headers);
+
+// Always strip client-supplied identity headers first
+requestHeaders.delete('x-user-id');
+requestHeaders.delete('x-user-email');
+
+if (user) {
+  // Only set after Supabase has verified the session
+  requestHeaders.set('x-user-id', user.id);
+  requestHeaders.set('x-user-email', user.email || '');
+}
+
+supabaseResponse = NextResponse.next({
+  request: { headers: requestHeaders },
+});
+  const pathname = request.nextUrl.pathname;
+  if (protectedRoutes.some((route) => pathname.startsWith(route))) {
+    if (error || !user) {
+      const url = new URL("/login", request.url);
+      url.searchParams.set("redirect", pathname);
+      return NextResponse.redirect(url);
+    }
+  }
+
+  if (
+    isApiRoute(pathname) &&
+    isStateChangingMethod(request.method) &&
+    !CSRF_EXEMPT_ROUTES.has(pathname)
+  ) {
+    if (!validateCsrfOrigin(request)) {
+      return NextResponse.json(
+        { error: "CSRF validation failed: untrusted origin" },
+        { status: 403 },
+      );
+    }
+
+    const headerToken = request.headers.get(CSRF_HEADER_NAME);
+    const cookieToken = request.cookies.get(CSRF_COOKIE_NAME)?.value;
+
+    if (!headerToken || !cookieToken) {
+      return NextResponse.json(
+        { error: "CSRF validation failed: token missing" },
+        { status: 403 },
+      );
+    }
+
+    if (!(await validateCsrfTokenEdge(cookieToken))) {
+      return NextResponse.json(
+        { error: "CSRF validation failed: invalid token signature" },
+        { status: 403 },
+      );
+    }
+
+    if (headerToken !== cookieToken) {
+      return NextResponse.json(
+        { error: "CSRF validation failed: token mismatch" },
+        { status: 403 },
+      );
+    }
+  }
+
+  return supabaseResponse;
+}
+
+
diff --git a/src/components/ui/AuthForm.jsx b/src/components/ui/AuthForm.jsx
new file mode 100644
index 000000000..e94f5d7d6
--- /dev/null
+++ b/src/components/ui/AuthForm.jsx
@@ -0,0 +1,307 @@
+"use client";
+import Image from "next/image";
+import { useState } from "react";
+import { supabase } from "@/lib/supabase";
+import { useRouter } from "next/navigation";
+import { Mail, Lock, User, LogIn, UserPlus, Loader2 } from "lucide-react";
+import toast from "react-hot-toast";
+import { motion } from "framer-motion";
+import Link from "next/link";
+import dynamic from "next/dynamic";
+import { useUser } from "@/features/user/UserContext";
+import { api } from "@/lib/apiClient";
+
+const Turnstile = dynamic(
+  () => import("@marsidev/react-turnstile").then((mod) => mod.Turnstile),
+  { ssr: false },
+);
+
+export default function AuthForm({ isLogin = true }) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [emailError, setEmailError] = useState("");
+  const [captchaToken, setCaptchaToken] = useState(null);
+  const router = useRouter();
+  const { setUser } = useUser();
+
+  const validateEmail = (value) => {
+    if (!value) {
+      setEmailError("");
+      return true;
+    }
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(value)) {
+      setEmailError("Please enter a valid email address");
+      return false;
+    }
+    setEmailError("");
+    return true;
+  };
+
+  const handleAuth = async (event) => {
+    event?.preventDefault();
+    setLoading(true);
+    setError("");
+
+    if (!validateEmail(email)) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      if (!captchaToken) throw new Error("Please complete captcha");
+
+      if (isLogin) {
+        const data = await api.request("/api/auth", {
+          method: "POST",
+          body: { email, password, captchaToken, action: "login" },
+        });
+        if (!data.success) throw new Error(data.message || "Login failed");
+
+        // The API route set the session as cookies.
+        const { data: { user } } = await supabase.auth.getUser();
+        setUser(user || null);
+        router.push("/arena");
+      } else {
+        const data = await api.request("/api/auth", {
+          method: "POST",
+          body: { email, password, captchaToken, action: "signup", name },
+        });
+        if (!data.success) throw new Error(data.message || "Signup failed");
+        toast.success(data.message || "Account created! Please sign in.");
+        router.push("/login");
+      }
+    } catch (err) {
+      setError(err.message || "Something went wrong");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleGoogleSignIn = async () => {
+    const { error } = await supabase.auth.signInWithOAuth({
+      provider: "google",
+      options: {
+        redirectTo: `${window.location.origin}/auth/callback`,
+        queryParams: {
+          access_type: "offline",
+          prompt: "consent",
+        },
+      },
+    });
+    if (error) setError(error.message);
+  };
+
+  // Safe Turnstile sitekey fallback for testing/dev environments
+  const turnstileSiteKey =
+    (process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY &&
+      process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY !== "Your Cloudfare Captcha Key")
+      ? process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY
+      : "1x00000000000000000000AA";
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4 bg-udemy-surface dark:bg-udemy-dark-bg">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="w-full max-w-md bg-white dark:bg-udemy-dark-surface rounded-xl shadow-lg overflow-hidden border border-udemy-border dark:border-udemy-dark-border"
+      >
+        {/* Header */}
+        <div className="bg-udemy-purple p-6 text-white">
+          <div className="mb-4 text-white hover:text-white/80 hover:-translate-x-1 transition cursor-pointer">
+            <Link href="/">
+              ← Back To Home
+            </Link>
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold font-sans">
+              {isLogin ? "Welcome Back" : "Create Account"}
+            </h1>
+            <p className="text-purple-200 text-sm mt-1">
+              {isLogin
+                ? "Sign in to access Arena"
+                : "Join us to get started"}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex justify-center items-center p-6">
+          {/* Google OAuth */}
+          <button
+            onClick={handleGoogleSignIn}
+            disabled={loading}
+            className="w-full flex items-center justify-center py-3 px-4 rounded-lg border border-udemy-border dark:border-udemy-dark-border bg-white dark:bg-udemy-dark-surface text-udemy-text dark:text-udemy-dark-text font-medium hover:bg-udemy-surface dark:hover:bg-udemy-dark-bg duration-300 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <Image
+              src="/google.webp"
+              width={24}
+              height={24}
+              alt=""
+              aria-hidden="true"
+            />
+            <span className="mx-2">Continue with Google</span>
+          </button>
+        </div>
+
+        <div className="relative flex items-center px-6">
+          <div className="flex-grow border-t border-udemy-border dark:border-udemy-dark-border"></div>
+          <span className="flex-shrink mx-4 text-udemy-muted dark:text-udemy-dark-muted">
+            or
+          </span>
+          <div className="flex-grow border-t border-udemy-border dark:border-udemy-dark-border"></div>
+        </div>
+
+        <div className="p-6 space-y-4">
+          {error && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              id="error-message"
+              role="alert"
+              className="bg-red-100 dark:bg-red-900/30 border-l-4 border-red-500 text-red-700 dark:text-red-300 p-3 rounded"
+            >
+              {error}
+            </motion.div>
+          )}
+
+          {/* Form */}
+          <form onSubmit={handleAuth} noValidate className="space-y-4">
+            <div>
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 pl-3 w-10 flex items-center pointer-events-none">
+                  <Mail size={18} className="text-gray-400 dark:text-gray-500" />
+                </div>
+                <input
+                  type="email"
+                  aria-label="Email address"
+                  disabled={loading}
+                  className="w-full pl-10 pr-4 py-3 rounded-lg border border-udemy-border dark:border-udemy-dark-border focus:outline-none focus:ring-2 focus:ring-udemy-purple bg-white dark:bg-udemy-dark-surface text-udemy-text dark:text-udemy-dark-text"
+                  placeholder="Email address"
+                  value={email}
+                  onChange={(e) => {
+                    setEmail(e.target.value);
+                    validateEmail(e.target.value);
+                  }}
+                />
+              </div>
+              {emailError && (
+                <p className="mt-1 text-sm text-red-600 dark:text-red-400">
+                  {emailError}
+                </p>
+              )}
+            </div>
+
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Lock size={18} className="text-gray-400 dark:text-gray-500" />
+              </div>
+              <input
+                type="password"
+                aria-label="Password"
+                disabled={loading}
+                className="w-full pl-10 pr-4 py-3 rounded-lg border border-udemy-border dark:border-udemy-dark-border focus:outline-none focus:ring-2 focus:ring-udemy-purple bg-white dark:bg-udemy-dark-surface text-udemy-text dark:text-udemy-dark-text"
+                placeholder="Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+
+            {!isLogin && (
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <User size={18} className="text-gray-400 dark:text-gray-500" />
+                </div>
+                <input
+                  type="text"
+                  aria-label="Full name"
+                  disabled={loading}
+                  className="w-full pl-10 pr-4 py-3 rounded-lg border border-udemy-border dark:border-udemy-dark-border focus:outline-none focus:ring-2 focus:ring-udemy-purple bg-white dark:bg-udemy-dark-surface text-udemy-text dark:text-udemy-dark-text"
+                  placeholder="Full name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                />
+              </div>
+            )}
+
+            {/* Turnstile for both login and signup */}
+            <div className="flex justify-center">
+              <Turnstile
+                siteKey={turnstileSiteKey}
+                onSuccess={(token) => setCaptchaToken(token)}
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading || !captchaToken || (email && emailError)}
+              className={`w-full flex items-center justify-center py-3 px-4 rounded text-white font-bold transition-all ${loading || !captchaToken || (email && emailError)
+                  ? "bg-gray-400 dark:bg-gray-600 cursor-not-allowed"
+                  : "bg-udemy-purple hover:bg-udemy-purple-dark shadow-md hover:shadow-lg"
+                }`}
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Processing...
+                </>
+              ) : isLogin ? (
+                <>
+                  <LogIn size={18} className="mr-2" /> Continue
+                </>
+              ) : (
+                <>
+                  <UserPlus size={18} className="mr-2" /> Continue
+                </>
+              )}
+            </button>
+          </form>
+
+          {/* Switch forms */}
+          <div className="text-center text-sm text-udemy-muted dark:text-udemy-dark-muted">
+            {isLogin ? (
+              <p>
+                Don't have an account?{" "}
+                <Link
+                  href="/signup"
+                  className="text-udemy-purple dark:text-udemy-purple-light hover:underline font-semibold"
+                >
+                  Sign up
+                </Link>
+              </p>
+            ) : (
+              <p>
+                Already have an account?{" "}
+                <Link
+                  href="/login"
+                  className="text-udemy-purple dark:text-udemy-purple-light hover:underline font-semibold"
+                >
+                  Sign in
+                </Link>
+              </p>
+            )}
+          </div>
+
+          <div className="text-center text-xs text-udemy-muted dark:text-udemy-dark-muted mt-6">
+            By continuing, you agree to our{" "}
+            <Link
+              href="/terms"
+              className="text-udemy-purple dark:text-udemy-purple-light hover:underline"
+            >
+              Terms of Service
+            </Link>{" "}
+            and{" "}
+            <Link
+              href="/privacy"
+              className="text-udemy-purple dark:text-udemy-purple-light hover:underline"
+            >
+              Privacy Policy
+            </Link>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+}
diff --git a/src/config/algorithms.js b/src/config/algorithms.js
new file mode 100644
index 000000000..faa18421c
--- /dev/null
+++ b/src/config/algorithms.js
@@ -0,0 +1,2129 @@
+import dynamic from 'next/dynamic';
+
+export const algorithmRegistry = {
+  "ai/alpha-beta-pruning": {
+    metadata: {
+  title: "Alpha Beta Pruning | Step-by-Step Animation",
+  description:
+    "Visualize Alpha Beta Pruning with intuitive step-by-step animations, code examples in JavaScript, C++, Python, and Java.",
+  keywords: [
+    "Alpha Beta Pruning Visualizer",
+    "Alpha Beta Pruning Visualization",
+    "Alpha Beta Pruning Animation",
+    "Learn Alpha Beta Pruning",
+    "Alpha Beta Pruning for Beginners",
+    "Alpha Beta Pruning Step-by-Step",
+    "Visualize Alpha Beta Pruning Algorithm",
+    "Adversarial Search",
+    "Game Tree Optimization",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/ai/alpha-beta-pruning/AlgorithmClient')),
+  },
+  "ai/mcts": {
+    metadata: {
+  title: "Monte Carlo Tree Search (MCTS) | Step-by-Step Animation",
+  description: "Visualize Monte Carlo Tree Search with visit counts, win rates and live playouts.",
+},
+    component: dynamic(() => import('@/app/visualizer/ai/mcts/AlgorithmClient')),
+  },
+  "ai/minmax": {
+    metadata: {
+  title: "Min Max Algorithm | Step-by-Step Animation",
+  description:
+    "Visualize the Min Max algorithm with intuitive step-by-step animations, code examples in JavaScript, C++, Python, and Java.",
+  keywords: [
+    "Min Max Visualizer",
+    "Min Max Visualization",
+    "Min Max Animation",
+    "Learn Min Max",
+    "Min Max for Beginners",
+    "Min Max Step-by-Step",
+    "Visualize Min Max Algorithm",
+    "Adversarial Search",
+    "Game Tree Algorithm",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/ai/minmax/AlgorithmClient')),
+  },
+  "array/binarysearch": {
+    metadata: {
+  title: "Binary Search Algorithm | Step-by-Step Animation",
+  description:
+    "Visualize the Binary Search algorithm with intuitive step-by-step animations, code examples in JavaScript, C, Python, and Java, and an interactive Binary Search Quiz to test your knowledge. Perfect for DSA preparation and beginners learning efficient search algorithms.",
+  keywords: [
+    "Binary Search Visualizer",
+    "Binary Search Visualization",
+    "Binary Search Animation",
+    "Learn Binary Search",
+    "Binary Search for Beginners",
+    "Binary Search Step-by-Step",
+    "Visualize Binary Search Algorithm",
+    "DSA Binary Search",
+    "Binary Search Explanation",
+    "Binary Search Visualization Tool",
+    "Efficient Searching Algorithms",
+    "Binary Search in JavaScript",
+    "Binary Search in C",
+    "Binary Search in Python",
+    "Binary Search in Java",
+    "Binary Search Code Examples",
+    "Binary Search Quiz",
+    "Interactive Binary Search Quiz",
+    "DSA Quiz",
+    "Quiz for Binary Search",
+    "Learn DSA with Quizzes",
+    "Binary Search Practice",
+    "Test Your Binary Search Skills",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/array/binarySearch.png",
+        width: 1200,
+        height: 630,
+        alt: "Binary Search Algorithm Visualization",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/array/binarysearch/AlgorithmClient')),
+  },
+  "array/bubblesort": {
+    metadata: {
+  title: "Bubble Sort Algorithm | Step-by-Step Animation",
+  description: "Visualize Bubble Sort in action with interactive animations.",
+  robots: "index, follow",
+  openGraph: { images: [{ url: "/og/array/bubbleSort.png", width: 1200, height: 630, alt: "Bubble Sort" }] },
+},
+    component: dynamic(() => import('@/app/visualizer/array/bubblesort/AlgorithmClient')),
+  },
+  "array/bucketsort": {
+    metadata: {
+      title: "Bucket Sort Algorithm | Step-by-Step Animation",
+      description: "Learn Bucket Sort with interactive animations.",
+      robots: "index, follow",
+      openGraph: { images: [{ url: "/og/visualizer.png", width: 1200, height: 630, alt: "Bucket Sort" }] },
+    },
+    component: dynamic(() => import('@/app/visualizer/array/bucketsort/AlgorithmClient')),
+  },
+  "array/comparison": {
+    metadata: {
+  title: "Sorting Algorithm Comparison Mode | Side-by-Side Visualizer",
+  description:
+    "Compare Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, Quick Sort, and Heap Sort side-by-side on AlgoBuddy. Watch synchronous animations on identical datasets and compare comparisons, swaps, and time in real-time.",
+  keywords: [
+    "algorithm comparison",
+    "sorting visualizer",
+    "bubble sort vs merge sort",
+    "quick sort vs merge sort",
+    "dsa visualizer comparison",
+    "sorting algorithm performance",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/array/comparison.png",
+        width: 1200,
+        height: 630,
+        alt: "Sorting Algorithm Comparison Mode Visualization",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/array/comparison/AlgorithmClient')),
+  },
+  "array/countingsort": {
+    metadata: {
+  title: "Counting Sort Algorithm | Step-by-Step Animation",
+  description: "Learn Counting Sort with interactive animations.",
+  robots: "index, follow",
+  openGraph: { images: [{ url: "/og/visualizer.png", width: 1200, height: 630, alt: "Counting Sort" }] },
+},
+    component: dynamic(() => import('@/app/visualizer/array/countingsort/AlgorithmClient')),
+  },
+  "array/heapsort": {
+    metadata: {
+  title: "Heap Sort Algorithm | Learn with Interactive Animations",
+  description: "Learn Heap Sort with step-by-step visualization of max-heap construction, swapping, heapifying, and extraction.",
+  robots: "index, follow",
+  openGraph: {
+    images: [{ url: "/og/visualizer.png", width: 1200, height: 630, alt: "Heap Sort Algorithm Visualization" }],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/array/heapsort/AlgorithmClient')),
+  },
+  "array/radixsort": {
+  metadata: {
+    title: "Radix Sort Algorithm | Step-by-Step Visualization",
+    description:
+      "Learn Radix Sort with interactive animations and step-by-step visualization.",
+    robots: "index, follow",
+    openGraph: {
+      images: [
+        {
+          url: "/og/visualizer.png",
+          width: 1200,
+          height: 630,
+          alt: "Radix Sort Algorithm Visualization",
+        },
+      ],
+    },
+  },
+  component: dynamic(
+    () => import("@/app/visualizer/array/radixsort/AlgorithmClient")
+  ),
+},
+  "array/insertionsort": {
+    metadata: {
+  title: "Insertion Sort Algorithm | Step-by-Step Visualization",
+  description: "Learn Insertion Sort with interactive animations and step-by-step visualization.",
+  robots: "index, follow",
+  openGraph: {
+    images: [{ url: "/og/visualizer.png", width: 1200, height: 630, alt: "Insertion Sort Algorithm Visualization" }],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/array/insertionsort/AlgorithmClient')),
+  },
+  "array/linearsearch": {
+    metadata: {
+  title: "Linear Search Algorithm | Step-by-Step Animation",
+  description:
+    "Visualize the Linear Search algorithm with step-by-step animations, code examples in JavaScript, C, Python, and Java, and a Linear Search Quiz to test your understanding. Build a strong foundation in DSA through interactive learning.",
+  keywords: [
+    "Linear Search Visualizer",
+    "Linear Search Visualization",
+    "Linear Search Animation",
+    "Learn Linear Search",
+    "Linear Search for Beginners",
+    "Step-by-Step Linear Search",
+    "Visualize Linear Search Algorithm",
+    "DSA Linear Search",
+    "Algorithm Visualizer",
+    "DSA Searching Algorithms",
+    "Search Algorithms DSA",
+    "Linear Search in JavaScript",
+    "Linear Search in C",
+    "Linear Search in Python",
+    "Linear Search in Java",
+    "Linear Search Code Examples",
+    "Linear Search Quiz",
+    "Interactive Linear Search Quiz",
+    "DSA Quiz",
+    "Quiz for Searching Algorithms",
+    "Learn DSA with Quizzes",
+    "Linear Search Practice",
+    "Test Your Linear Search Skills",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/array/linearSearch.png",
+        width: 1200,
+        height: 630,
+        alt: "Linear Search Algorithm Visualization",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/array/linearsearch/AlgorithmClient')),
+  },
+  "array/mergesort": {
+    metadata: {
+  title: "Merge Sort Algorithm | Step-by-Step Animation",
+  description: "Learn Merge Sort with interactive animations.",
+  robots: "index, follow",
+  openGraph: { images: [{ url: "/og/visualizer.png", width: 1200, height: 630, alt: "Merge Sort" }] },
+},
+    component: dynamic(() => import('@/app/visualizer/array/mergesort/AlgorithmClient')),
+  },
+  "array/quicksort": {
+    metadata: {
+  title: "Quick Sort Algorithm | Step-by-Step Visualization",
+  description: "Learn Quick Sort with interactive animations and step-by-step visualization.",
+  robots: "index, follow",
+  openGraph: {
+    images: [{ url: "/og/visualizer.png", width: 1200, height: 630, alt: "Quick Sort Algorithm Visualization" }],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/array/quicksort/AlgorithmClient')),
+  },
+  "array/shellsort": {
+    metadata: {
+  title: "Shell Sort Algorithm | Step-by-Step Visualization",
+  description: "Learn Shell Sort with interactive animations and step-by-step gap-based insertion sorting visualization.",
+  robots: "index, follow",
+  openGraph: {
+    images: [{ url: "/og/visualizer.png", width: 1200, height: 630, alt: "Shell Sort Algorithm Visualization" }],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/array/shellsort/AlgorithmClient')),
+  },
+  "array/timsort": {
+    metadata: {
+  title: "Tim Sort Algorithm | Step-by-Step Visualization",
+  description: "Learn Tim Sort with interactive animations showing run detection, insertion sorting, and merging.",
+  robots: "index, follow",
+  openGraph: {
+    images: [{ url: "/og/visualizer.png", width: 1200, height: 630, alt: "Tim Sort Algorithm Visualization" }],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/array/timsort/AlgorithmClient')),
+  },
+  "array/selectionsort": {
+    metadata: {
+  title: "Selection Sort Algorithm | Step-by-Step Visualization",
+  description: "Learn Selection Sort with interactive animations and step-by-step visualization.",
+  robots: "index, follow",
+  openGraph: {
+    images: [{ url: "/og/visualizer.png", width: 1200, height: 630, alt: "Selection Sort Algorithm Visualization" }],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/array/selectionsort/AlgorithmClient')),
+  },
+  "array/slidingwindow": {
+    metadata: {
+  title: "Sliding Window Technique Visualizer | Array Algorithms",
+  description:
+    "Visualize the Sliding Window technique with step-by-step animations. Learn fixed-size and variable-size window patterns, view code implementations, and take an interactive quiz.",
+  keywords: [
+    "Sliding Window Visualizer",
+    "Sliding Window Technique",
+    "Two Pointers",
+    "Array Algorithms",
+    "Fixed Size Window",
+    "Variable Size Window",
+    "Longest Substring Without Repeating Characters",
+    "Maximum Sum Subarray of Size K",
+    "Algorithm Visualization",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/visualizer.png",
+        width: 1200,
+        height: 630,
+        alt: "Sliding Window Technique Visualization",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/array/slidingwindow/AlgorithmClient')),
+  },"array/twopointers": {
+    component: dynamic(() => import("@/app/visualizer/array/twopointers/AlgorithmClient")),
+    metadata: {
+      title: "Two Pointers Technique | AlgoBuddy",
+      description: "Visualize how the Two Pointers technique solves array problems like Pair Sum, Remove Duplicates, Container With Most Water, and Three Sum.",
+    },
+  },
+  "complexity-analyzer": {
+    metadata: {
+  title: "Complexity Analyzer | AlgoBuddy",
+  description:
+    "Interactive complexity analyzer for visualizing Big-O growth curves and comparing algorithm efficiency.",
+},
+    component: dynamic(() => import('@/app/visualizer/complexity-analyzer/AlgorithmClient')),
+  },
+  "dry-run": {
+    metadata: {
+  title: "Code Dry Run Visualizer | AlgoBuddy",
+  description:
+    "Paste code and inspect a safe step-by-step dry run with line highlighting, variables, console output, and data-structure snapshots.",
+  keywords: [
+    "code dry run",
+    "algorithm debugger",
+    "DSA visualizer",
+    "step by step code execution",
+    "custom code visualizer",
+  ],
+},
+    component: dynamic(() => import('@/app/visualizer/dry-run/AlgorithmClient')),
+  },
+  "hashmap/delete": {
+    metadata: {
+  title: "HashMap Delete Visualizer | Learn HashMap Operations",
+  description: "Understand HashMap Delete operation through step-by-step animations with code examples in JavaScript, Python, Java, and C.",
+},
+    component: dynamic(() => import('@/app/visualizer/hashmap/delete/AlgorithmClient')),
+  },
+  "hashmap/insert": {
+    metadata: {
+  title: "HashMap Insert Visualizer | Learn HashMap Operations",
+  description: "Understand HashMap Insert operation through step-by-step animations with code examples in JavaScript, Python, Java, and C++.",
+},
+    component: dynamic(() => import('@/app/visualizer/hashmap/insert/AlgorithmClient')),
+  },
+  "hashmap/search": {
+    metadata: {
+  title: "HashMap Search Visualizer | Learn HashMap Operations",
+  description: "Understand HashMap Search operation through step-by-step animations with code examples in JavaScript, Python, Java, and C.",
+},
+    component: dynamic(() => import('@/app/visualizer/hashmap/search/AlgorithmClient')),
+  },
+  "linkedlist/operations/comparison": {
+    metadata: {
+  title:
+    "Linked List Comparison Algorithm | Interactive Visualization & Step-by-Step Guide",
+  description:
+    "Learn how comparison works in Linked Lists with interactive animations, detailed explanations, and hands-on practice. Visualize each step of the comparison process and master linked list algorithms efficiently.",
+  keywords: [
+    "Linked List Comparison",
+    "Comparison Animation Linked List",
+    "Visualize Comparison in Linked List",
+    "Linked List Algorithm",
+    "DSA Linked List Comparison",
+    "Linked List Comparison Visualization",
+    "Interactive Linked List",
+    "Comparison Step-by-Step",
+    "Linked List Learning",
+    "Data Structures Animation",
+    "DSA Practice Linked List",
+    "Comparison Code Example",
+    "Linked List Tutorial",
+    "Comparison using C",
+    "Comparison using Java",
+    "Comparison using Javascript",
+    "Comparison using Python",
+    "Comparison using linked list",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/linkedlist/operations/comparison/AlgorithmClient')),
+  },
+  "linkedlist/operations/deletion": {
+    metadata: {
+  title:
+    "Linked List Deletion Algorithm | Interactive Visualization & Step-by-Step Guide",
+  description:
+    "Learn how deletion works in Linked Lists with interactive animations, detailed explanations, and hands-on practice. Visualize each step of the deletion process and master linked list algorithms efficiently.",
+  keywords: [
+    "Linked List Deletion",
+    "Deletion Animation Linked List",
+    "Visualize Deletion in Linked List",
+    "Linked List Algorithm",
+    "DSA Linked List Deletion",
+    "Linked List Deletion Visualization",
+    "Interactive Linked List",
+    "Deletion Step-by-Step",
+    "Linked List Learning",
+    "Data Structures Animation",
+    "DSA Practice Linked List",
+    "Deletion Code Example",
+    "Linked List Tutorial",
+    "Deletion using C",
+    "Deletion using Java",
+    "Deletion using Javascript",
+    "Deletion using Python",
+    "Deletion using linked list",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/linkedlist/operations/deletion/AlgorithmClient')),
+  },
+  "linkedlist/operations/insertion": {
+    metadata: {
+  title:
+    "Linked List Insertion Algorithm | Interactive Visualization & Step-by-Step Guide",
+  description:
+    "Learn how insertion works in Linked Lists with interactive animations, detailed explanations, and hands-on practice. Visualize each step of the insertion process and master linked list algorithms efficiently.",
+  keywords: [
+    "Linked List Insertion",
+    "Insertion Animation Linked List",
+    "Visualize Insertion in Linked List",
+    "Linked List Algorithm",
+    "DSA Linked List Insertion",
+    "Linked List Insertion Visualization",
+    "Interactive Linked List",
+    "Insertion Step-by-Step",
+    "Linked List Learning",
+    "Data Structures Animation",
+    "DSA Practice Linked List",
+    "Insertion Code Example",
+    "Linked List Tutorial",
+    "Insertion using C",
+    "Insertion using Java",
+    "Insertion using Javascript",
+    "Insertion using Python",
+    "Insertion using linked list",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/linkedlist/operations/insertion/AlgorithmClient')),
+  },
+  "linkedlist/operations/merge": {
+    metadata: {
+  title:
+    "Linked List Merge Algorithm | Interactive Visualization & Step-by-Step Guide",
+  description:
+    "Learn how merging works in Linked Lists with interactive animations, detailed explanations, and hands-on practice. Visualize each step of the merge process and master linked list algorithms efficiently.",
+  keywords: [
+    "Linked List Merge",
+    "Merge Animation Linked List",
+    "Visualize Merge in Linked List",
+    "Linked List Algorithm",
+    "DSA Linked List Merge",
+    "Linked List Merge Visualization",
+    "Interactive Linked List",
+    "Merge Step-by-Step",
+    "Linked List Learning",
+    "Data Structures Animation",
+    "DSA Practice Linked List",
+    "Merge Code Example",
+    "Linked List Tutorial",
+    "Merge using C",
+    "Merge using Java",
+    "Merge using Javascript",
+    "Merge using Python",
+    "Merge using linked list",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/linkedlist/operations/merge/AlgorithmClient')),
+  },
+  "linkedlist/operations/sorting": {
+    metadata: {
+    title:
+      "Linked List Sorting Algorithm | Interactive Visualization & Step-by-Step Guide",
+    description:
+      "Learn how linked list sorting works with interactive animations, detailed explanations, and hands-on practice. Visualize the sorting process step by step and master linked list sorting techniques.",
+    keywords: [
+      "Linked List Sorting",
+      "Merge Sort Linked List",
+      "Linked List Sort Visualization",
+      "Sorting Algorithm",
+      "Data Structures",
+      "DSA Linked List",
+      "Interactive Sorting",
+      "Linked List Tutorial",
+      "Merge Sort Visualization",
+      "Sorting Step-by-Step",
+      "Linked List Learning",
+      "Sorting using C",
+      "Sorting using Java",
+      "Sorting using JavaScript",
+      "Sorting using Python"
+    ],
+    robots: "index, follow",
+  },
+
+  component: dynamic(() =>
+    import('@/app/visualizer/linkedlist/operations/sorting/AlgorithmClient')
+  ),  
+  },
+  "linkedlist/operations/reverse": {
+    metadata: {
+  title:
+    "Linked List Reverse Algorithm | Interactive Visualization & Step-by-Step Guide",
+  description:
+    "Explore how reversing a linked list works with interactive animations, clear explanations, and hands-on practice. Visualize each step of the reverse process and master linked list algorithms efficiently.",
+  keywords: [
+    "Linked List Reverse",
+    "Reverse Animation Linked List",
+    "Visualize Reverse in Linked List",
+    "Linked List Algorithm",
+    "DSA Linked List Reverse",
+    "Linked List Reverse Visualization",
+    "Interactive Linked List",
+    "Reverse Step-by-Step",
+    "Linked List Learning",
+    "Data Structures Animation",
+    "DSA Practice Linked List",
+    "Reverse Code Example",
+    "Linked List Tutorial",
+    "Reverse using C",
+    "Reverse using Java",
+    "Reverse using Javascript",
+    "Reverse using Python",
+    "Reverse linked list",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/linkedlist/operations/reverse/AlgorithmClient')),
+  },
+  "linkedlist/operations/traversal": {
+    metadata: {
+  title:
+    "Linked List Traversal Algorithm | Interactive Visualization & Step-by-Step Guide",
+  description:
+    "Explore how traversal works in Linked Lists with interactive animations, clear explanations, and hands-on practice. Visualize each step of the traversal process and master linked list algorithms efficiently.",
+  keywords: [
+    "Linked List Traversal",
+    "Traversal Animation Linked List",
+    "Visualize Traversal in Linked List",
+    "Linked List Algorithm",
+    "DSA Linked List Traversal",
+    "Linked List Traversal Visualization",
+    "Interactive Linked List",
+    "Traversal Step-by-Step",
+    "Linked List Learning",
+    "Data Structures Animation",
+    "DSA Practice Linked List",
+    "Traversal Code Example",
+    "Linked List Tutorial",
+    "Traversal using C",
+    "Traversal using Java",
+    "Traversal using Javascript",
+    "Traversal using Python",
+    "Traversal using linked list",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/linkedlist/operations/traversal/AlgorithmClient')),
+  },
+  "linkedlist/types/circular": {
+    metadata: {
+  title:
+    "Circular Linked List Algorithm | Interactive Learning & Step-by-Step Animation",
+  description:
+    "Master Circular Linked Lists with interactive visualizations, quizzes, and implementation code. Learn insertion, deletion, and traversal through animations and practice with hands-on exercises.",
+  keywords: [
+    "Circular Linked List Visualizer",
+    "CLL Animation",
+    "Visualize Circular Linked List",
+    "Learn Circular Linked List",
+    "Circular Linked List DSA",
+    "Circular Linked List for Beginners",
+    "Insertion in Circular Linked List",
+    "Deletion in Circular Linked List",
+    "Circular Linked List Traversal",
+    "DSA Circular Linked List Visualization",
+    "DSA Quiz Circular Linked List",
+    "Circular Linked List Implementation Code",
+    "DSA Learning Platform",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/linkedlist/types/circular/AlgorithmClient')),
+  },
+  "linkedlist/types/doubly": {
+    metadata: {
+  title:
+    "Doubly Linked List Implementation | Visualize Doubly Linked List in JS, C, Python, Java",
+  description:
+    "Explore Doubly Linked List implementation with interactive animations and code examples in JavaScript, C, Python, and Java. Learn insertion, deletion, and traversal from both directions. Perfect for DSA beginners and interview preparation.",
+  keywords: [
+    "Doubly Linked List Implementation",
+    "DLL Visualization",
+    "Doubly Linked List in JavaScript",
+    "Doubly Linked List in C",
+    "Doubly Linked List in Python",
+    "Doubly Linked List in Java",
+    "DSA Doubly Linked List",
+    "Bidirectional Linked List",
+    "Insertion in DLL",
+    "Deletion in DLL",
+    "DLL Operations",
+    "Learn Doubly Linked List",
+    "DSA for Beginners",
+    "Interactive Linked List Visualizer",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/linkedlist/types/doubly/AlgorithmClient')),
+  },
+  "linkedlist/types/singly": {
+    metadata: {
+  title:
+    "Singly Linked List Implementation | Visualize Linked List in JS, C, Python, Java",
+  description:
+    "Explore Singly Linked List implementation with interactive visualizations and real-time code examples in JavaScript, C, Python, and Java. Learn insertion, deletion, and traversal with step-by-step animations. Perfect for DSA beginners and interview preparation.",
+  keywords: [
+    "Singly Linked List Implementation",
+    "Singly Linked List Visualization",
+    "Linked List in JavaScript",
+    "Linked List in C",
+    "Linked List in Python",
+    "Linked List in Java",
+    "DSA Linked List",
+    "Linked List Operations",
+    "Insertion in Linked List",
+    "Deletion in Linked List",
+    "Traverse Linked List",
+    "Learn Linked List",
+    "Visualize Linked List",
+    "DSA for Beginners",
+    "Interactive Linked List Tool",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/linkedlist/types/singly/AlgorithmClient')),
+  },
+  "queue/implementation/array": {
+    metadata: {
+  title:
+    "Queue Implementation Using Array | Visualize Queue Operations in JS, C, Python, Java",
+  description:
+    "Learn Queue implementation using arrays with real-time visualizations and code examples in JavaScript, C, Python, and Java. Understand how Enqueue and Dequeue work step-by-step without quizzes. Ideal for DSA beginners.",
+  keywords: [
+    "Queue Implementation",
+    "Queue using Array",
+    "Enqueue Dequeue Operations",
+    "Queue Data Structure",
+    "Queue Visualization",
+    "DSA Queue Tutorial",
+    "Queue in JavaScript",
+    "Queue in C",
+    "Queue in Python",
+    "Queue in Java",
+    "Learn Queue",
+    "Interactive Queue Visualizer",
+    "Array based Queue",
+    "DSA for Beginners",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/queue/queueArray.png",
+        width: 1200,
+        height: 630,
+        alt: "Implementation of Queue using Array Algorithm Visualization",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/queue/implementation/array/AlgorithmClient')),
+  },
+  "queue/implementation/linkedList": {
+    metadata: {
+  title:
+    "Queue Implementation Using Linked List | Visualize Queue in JS, C, Python, Java",
+  description:
+    "Explore Queue implementation using Linked List with real-time visualizations and code examples in JavaScript, C, Python, and Java. Understand how Enqueue and Dequeue work in a dynamic memory structure. Perfect for DSA beginners and interview prep.",
+  keywords: [
+    "Queue Implementation",
+    "Queue using Linked List",
+    "Enqueue Dequeue Operations",
+    "Queue Data Structure",
+    "Linked List Queue",
+    "Queue Visualization",
+    "DSA Queue Tutorial",
+    "Queue in JavaScript",
+    "Queue in C",
+    "Queue in Python",
+    "Queue in Java",
+    "Learn Queue",
+    "Interactive DSA Tools",
+    "DSA with Linked List",
+    "DSA for Beginners",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/queue/queueLinkedList.png",
+        width: 1200,
+        height: 630,
+        alt: "Implementation of Queue using Linked List Algorithm Visualization",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/queue/implementation/linkedList/AlgorithmClient')),
+  },
+  "queue/operations/enqueue-dequeue": {
+    metadata: {
+  title:
+    "Enqueue and Dequeue Operations in Queue | Learn Queue with JS, C, Python, Java Code",
+  description:
+    "Visualize and understand the Enqueue and Dequeue operations in a Queue with real-time animations and code examples in JavaScript, C, Python, and Java. Perfect for DSA beginners and interview preparation.",
+  keywords: [
+    "Enqueue Operation",
+    "Dequeue Operation",
+    "Queue Operations",
+    "Queue DSA",
+    "Queue Enqueue Dequeue",
+    "Learn Queue",
+    "Queue Visualization",
+    "Interactive DSA Tools",
+    "Queue Data Structure",
+    "Queue Code Examples",
+    "Enqueue Dequeue in JavaScript",
+    "Enqueue Dequeue in C",
+    "Enqueue Dequeue in Python",
+    "Enqueue Dequeue in Java",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/queue/enqueueDequeue.png",
+        width: 1200,
+        height: 630,
+        alt: "Enqueue Dequeue Algorithm Visualization",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/queue/operations/enqueue-dequeue/AlgorithmClient')),
+  },
+  "queue/operations/isempty": {
+    metadata: {
+  title: "Queue Is Empty Operation | Learn with JS, C, Python, Java Code",
+  description:
+    "Learn how to check if a Queue is empty using interactive visualizations and complete code examples in JavaScript, C, Python, and Java. Ideal for DSA beginners and interview prep.",
+  keywords: [
+    "Queue Is Empty",
+    "Is Empty Operation Queue",
+    "Queue Empty Condition",
+    "Queue Code in JavaScript",
+    "Queue Code in C",
+    "Queue Code in Python",
+    "Queue Code in Java",
+    "DSA Queue Check",
+    "Queue Operations",
+    "Visualize Queue",
+    "Learn Queue DSA",
+    "Queue Data Structure",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/queue/isEmpty.png",
+        width: 1200,
+        height: 630,
+        alt: "isEmpty Algorithm Visualization",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/queue/operations/isempty/AlgorithmClient')),
+  },
+  "queue/operations/isfull": {
+    metadata: {
+  title: "Queue Is Full Operation | Learn with JS, C, Python, Java Code",
+  description:
+    "Understand how to check if a Queue is full using interactive visualizations and detailed code examples in JavaScript, C, Python, and Java. Perfect for mastering DSA and technical interviews.",
+  keywords: [
+    "Queue Is Full",
+    "Is Full Operation Queue",
+    "Queue Full Condition",
+    "Queue Capacity Check",
+    "Queue Code in JavaScript",
+    "Queue Code in C",
+    "Queue Code in Python",
+    "Queue Code in Java",
+    "Queue DSA",
+    "Learn Queue Operations",
+    "Queue Data Structure",
+    "Visualize Queue",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/queue/isFull.png",
+        width: 1200,
+        height: 630,
+        alt: "isFull Algorithm Visualization",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/queue/operations/isfull/AlgorithmClient')),
+  },
+  "queue/operations/peek-front": {
+    metadata: {
+  title: "Queue Peek Front Operation | Learn with JS, C, Java, Python Code",
+  description:
+    "Understand the Peek Front operation in Queue with interactive animations and code examples in JavaScript, C, Python, and Java. Ideal for DSA beginners and interview preparation.",
+  keywords: [
+    "Queue Peek Front",
+    "Queue peek front Visulaization",
+    "Peek Front Operation",
+    "Queue DSA",
+    "Queue Front Element",
+    "Queue Peek in JavaScript",
+    "Queue Peek in C",
+    "Queue Peek in Python",
+    "Queue Peek in Java",
+    "Queue Data Structure",
+    "DSA Queue Operations",
+    "Peek Front Code Examples",
+    "Queue Visualization",
+    "Learn Queue DSA",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/queue/peekFront.png",
+        width: 1200,
+        height: 630,
+        alt: "Peek Front Algorithm Visualization",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/queue/operations/peek-front/AlgorithmClient')),
+  },
+  "queue/types/circular": {
+    metadata: {
+  title: "Circular Queue | Learn with JS, C, Python, Java Code",
+  description:
+    "Understand how Circular Queue works in Data Structures using animations and complete code examples in JavaScript, C, Python, and Java. Ideal for DSA beginners and interview preparation.",
+  keywords: [
+    "Circular Queue",
+    "Circular Queue Visualizer",
+    "Circular Queue DSA",
+    "Circular Queue in JavaScript",
+    "Circular Queue in C",
+    "Circular Queue in Python",
+    "Circular Queue in Java",
+    "Queue Data Structure",
+    "DSA Queue Operations",
+    "Learn Circular Queue",
+    "Circular Queue Code Examples",
+    "DSA Visualizer",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/queue/circularQueue.png",
+        width: 1200,
+        height: 630,
+        alt: "Circular Queue Algorithm Visualization",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/queue/types/circular/AlgorithmClient')),
+  },
+  "queue/types/deque": {
+    metadata: {
+  title: "Double Ended Queue (Deque) | Learn with JS, C, Python, Java Code",
+  description:
+    "Explore Double Ended Queue (Deque) in Data Structures with visual animations and full code implementations in JavaScript, C, Python, and Java. Perfect for mastering DSA concepts and interview preparation.",
+  keywords: [
+    "Double Ended Queue",
+    "Double Ended Queue Visualizer",
+    "Deque in DSA",
+    "DSA Deque",
+    "Double Ended Queue in JavaScript",
+    "Deque in C",
+    "Deque in Python",
+    "Deque in Java",
+    "DSA Queue Operations",
+    "Learn Deque DSA",
+    "Deque Code Examples",
+    "DSA Visualizer",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/queue/deque.png",
+        width: 1200,
+        height: 630,
+        alt: "Double Ended Queue Algorithm Visualization",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/queue/types/deque/AlgorithmClient')),
+  },
+  "queue/types/priority": {
+    metadata: {
+  title:
+    "Priority Queue Algorithm | Visual Guide with Code in JavaScript, C, Python, Java",
+  description:
+    "Master Priority Queue in Data Structures with easy-to-understand visualizations and complete code examples in JavaScript, C, Python, and Java. Perfect for DSA learners and coding interview prep.",
+  keywords: [
+    "Priority Queue",
+    "Priority Queue DSA",
+    "Priority Queue Data Structure",
+    "Priority Queue in JavaScript",
+    "Priority Queue in C",
+    "Priority Queue in Python",
+    "Priority Queue in Java",
+    "Priority Queue Examples",
+    "DSA Queue Operations",
+    "Learn Priority Queue",
+    "Priority Queue Code",
+    "Priority Queue Visualization",
+    "DSA Visualizer",
+    "Priority Queue for Interviews",
+    "Priority Queue Tutorial",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/queue/priorityQueue.png",
+        width: 1200,
+        height: 630,
+        alt: "Priority Queue Algorithm Visualization",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/queue/types/priority/AlgorithmClient')),
+  },
+  "queue/types/singleEnded": {
+    metadata: {
+  title: "Single Ended Queue | Learn with JS, C, Python, Java Code",
+  description:
+    "Understand Single Ended Queue in Data Structures with animations and full code examples in JavaScript, C, Python, and Java. Ideal for beginners learning queue operations and preparing for interviews.",
+  keywords: [
+    "Single Ended Queue",
+    "Single Ended Queue DSA",
+    "Queue Data Structure",
+    "Single Ended Queue in JavaScript",
+    "Single Ended Queue in C",
+    "Single Ended Queue in Python",
+    "Single Ended Queue in Java",
+    "DSA Queue Operations",
+    "Learn Queue DSA",
+    "Queue Code Examples",
+    "DSA Visualizer",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/queue/singleEnded.png",
+        width: 1200,
+        height: 630,
+        alt: "Single Ended Queue Algorithm Visualization",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/queue/types/singleEnded/AlgorithmClient')),
+  },
+  "recursion/backtracking": {
+    metadata: {
+  title: "Backtracking | AlgoBuddy",
+  description: "Visualize classical backtracking recursively through the N-Queens placement puzzle.",
+  keywords: ["Backtracking", "N-Queens", "Recursion", "DSA"],
+},
+    component: dynamic(() => import('@/app/visualizer/recursion/backtracking/AlgorithmClient')),
+  },
+  "recursion/basic-recursion": {
+    metadata: {
+  title: "Basic Recursion Roadmap | AlgoBuddy",
+  description: "Explore the basics of recursion by stepping through Print 1 to N and Print N to 1 flow animations.",
+  keywords: ["Basic Recursion", "Print 1 to N", "Print N to 1", "Recursion", "DSA"],
+},
+    component: dynamic(() => import('@/app/visualizer/recursion/basic-recursion/AlgorithmClient')),
+  },
+  "recursion/binary-search": {
+    metadata: {
+  title: "Recursive Binary Search | AlgoBuddy",
+  description: "Visualize how Binary Search operates recursively by halving search intervals.",
+  keywords: ["Recursive Binary Search", "Binary Search", "Recursion", "DSA"],
+},
+    component: dynamic(() => import('@/app/visualizer/recursion/binary-search/AlgorithmClient')),
+  },
+  "recursion/factorial": {
+    metadata: {
+  title: "Factorial Recursion Visualizer | AlgoBuddy",
+  description:
+    "Visualize the Factorial recursive algorithm step by step. Learn how stack frames are pushed and popped with animations, line-by-line trace, and conceptual quizzes.",
+  keywords: [
+    "Factorial Visualizer",
+    "Factorial Recursion",
+    "Call Stack Animation",
+    "Stack Frames",
+    "DSA Recursion",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/recursion/factorial/AlgorithmClient')),
+  },
+  "recursion/tower-of-hanoi": {
+    metadata: {
+  title: "Tower of Hanoi Recursion Visualizer | AlgoBuddy",
+  description:
+    "Visualize the Tower of Hanoi recursive algorithm step-by-step. Witness disk transfers between pegs, call stack frame updates, and line-by-line active code traces.",
+  keywords: [
+    "Tower of Hanoi Visualizer",
+    "Tower of Hanoi Recursion",
+    "Call Stack Animation",
+    "Peg Transfer",
+    "DSA Recursion",
+    "Recurrence Relation",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/recursion/tower-of-hanoi/AlgorithmClient')),
+  },
+  "recursion/fibonacci": {
+    metadata: {
+  title: "Fibonacci Tree Recursion Visualizer | AlgoBuddy",
+  description:
+    "Visualize Fibonacci tree recursion step-by-step. Witness LIFO call stack and recursion tree nodes updating dynamically, with line-by-line active code traces.",
+  keywords: [
+    "Fibonacci Visualizer",
+    "Fibonacci Recursion Tree",
+    "Tree Recursion",
+    "Call Stack Animation",
+    "DSA Recursion",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/recursion/fibonacci/AlgorithmClient')),
+  },
+  "recursion/functional-parameterized": {
+    metadata: {
+  title: "Functional & Parameterized Recursion | AlgoBuddy",
+  description: "Visualize parameter passing, return values, array reversals, and palindrome checks recursively.",
+  keywords: ["Functional Recursion", "Parameterized Recursion", "Sum of N", "Factorial", "Reverse Array", "Palindrome", "DSA"],
+},
+    component: dynamic(() => import('@/app/visualizer/recursion/functional-parameterized/AlgorithmClient')),
+  },
+  "recursion/multiple-calls": {
+    metadata: {
+  title: "Multiple Recursive Calls | AlgoBuddy",
+  description: "Visualize how functions call themselves multiple times, branching like trees and generating duplicate subproblems.",
+  keywords: ["Multiple Recursive Calls", "Fibonacci", "Recursion", "DSA"],
+},
+    component: dynamic(() => import('@/app/visualizer/recursion/multiple-calls/AlgorithmClient')),
+  },
+  "recursion/n-queens": {
+    metadata: {
+  title: "N-Queens Placement Backtracking Visualizer | AlgoBuddy",
+  description:
+    "Visualize the N-Queens backtracking recursive algorithm step-by-step. See placement, conflicts, backtracking, and solutions on a 4x4 chessboard.",
+  keywords: [
+    "N-Queens",
+    "Backtracking",
+    "Chessboard",
+    "Recursion Visualizer",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/recursion/n-queens/AlgorithmClient')),
+  },
+  "recursion/palindrome": {
+    metadata: {
+  title: "String Palindrome Check Recursion Visualizer | AlgoBuddy",
+  description:
+    "Visualize recursive palindrome checking step-by-step. Witness character comparisons and call stack trace changes.",
+  keywords: [
+    "Palindrome Check",
+    "String Recursion",
+    "Two Pointers",
+    "Call Stack",
+    "Visualizer",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/recursion/palindrome/AlgorithmClient')),
+  },
+  "recursion/print-1-to-n": {
+    metadata: {
+  title: "Print 1 to N Recursion Visualizer | AlgoBuddy",
+  description:
+    "Visualize basic recursion by printing numbers 1 to N step-by-step. Witness stack frame pushes and LIFO pops.",
+  keywords: [
+    "Print 1 to N",
+    "Basic Recursion",
+    "Call Stack",
+    "Visualizer",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/recursion/print-1-to-n/AlgorithmClient')),
+  },
+  "recursion/print-n-to-1": {
+    metadata: {
+  title: "Print N to 1 Recursion Visualizer | AlgoBuddy",
+  description:
+    "Visualize basic recursion by printing numbers N down to 1 step-by-step. Witness stack frame pushes and LIFO pops.",
+  keywords: [
+    "Print N to 1",
+    "Basic Recursion",
+    "Call Stack",
+    "Visualizer",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/recursion/print-n-to-1/AlgorithmClient')),
+  },
+  "recursion/reverse-array": {
+    metadata: {
+  title: "Reverse Array Recursion Visualizer | AlgoBuddy",
+  description:
+    "Visualize array reversing using two-pointer recursion. Witness swaps and call stack frame changes step-by-step.",
+  keywords: [
+    "Reverse Array",
+    "Array Recursion",
+    "Two Pointers",
+    "Call Stack",
+    "Visualizer",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/recursion/reverse-array/AlgorithmClient')),
+  },
+  "recursion/stack": {
+    metadata: {
+  title: "Call Stack Visualization | AlgoBuddy",
+  description: "Visualize how system stack frames are pushed and popped recursively.",
+  keywords: ["Call Stack", "Stack Frames", "Factorial Stack", "Recursion", "DSA"],
+},
+    component: dynamic(() => import('@/app/visualizer/recursion/stack/AlgorithmClient')),
+  },
+  "recursion/subsequences": {
+    metadata: {
+  title: "Subsequences Recursion Visualizer | AlgoBuddy",
+  description:
+    "Visualize recursion on subsequences step-by-step. Witness the subset decision tree (Take vs. Not Take), active stack, and generated subsets list.",
+  keywords: [
+    "Subsequences",
+    "Subset Generation",
+    "Backtracking",
+    "Recursion Tree",
+    "Visualizer",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/recursion/subsequences/AlgorithmClient')),
+  },
+  "recursion/sum-of-n": {
+    metadata: {
+  title: "Sum of N Numbers Recursion Visualizer | AlgoBuddy",
+  description:
+    "Visualize the Sum of First N Numbers recursive algorithm. See stack frames pushed and popped with animations, line trace, and conceptual quizzes.",
+  keywords: [
+    "Sum of N Numbers Visualizer",
+    "Sum Recursion",
+    "Call Stack Animation",
+    "DSA Recursion",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/recursion/sum-of-n/AlgorithmClient')),
+  },
+  "recursion/trees": {
+    metadata: {
+  title: "Recursion Trees | AlgoBuddy",
+  description: "Visualize execution branching dynamically to understand Recursion Trees.",
+  keywords: ["Recursion Trees", "Fibonacci Tree", "Recursion", "DSA"],
+},
+    component: dynamic(() => import('@/app/visualizer/recursion/trees/AlgorithmClient')),
+  },
+  "stack/implementation/usingArray": {
+    metadata: {
+  title:
+    "Stack Implementation using Array | Learn Stack in DSA with JS, C, Python, Java Code",
+  description:
+    "Understand how to implement a Stack using an Array with visual explanations, animations, and complete code examples in JavaScript, C, Python, and Java. Perfect for DSA beginners and interview prep.",
+  keywords: [
+    "Stack using Array",
+    "Stack Implementation",
+    "Stack Implementation in JavaScript",
+    "Stack Implementation in C",
+    "Stack Implementation in Python",
+    "Stack Implementation in Java",
+    "DSA Stack",
+    "Array Stack",
+    "Data Structures Stack",
+    "Stack Push Pop Array",
+    "Learn Stack DSA",
+    "Visualize Stack Implementation",
+    "Stack Code Examples",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/stack/stackArray.png",
+        width: 1200,
+        height: 630,
+        alt: "Stack Implementation using Array",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/stack/implementation/usingArray/AlgorithmClient')),
+  },
+  "stack/implementation/usingLinkedList": {
+    metadata: {
+  title:
+    "Stack Implementation using Linked List | Learn Stack in DSA with JS, C, Python, Java Code",
+  description:
+    "Explore how to implement a Stack using a Linked List with step-by-step visual explanations, animations, and complete code in JavaScript, C, Python, and Java. Ideal for DSA learners and coding interview prep.",
+  keywords: [
+    "Stack using Linked List",
+    "Stack Implementation",
+    "Stack Implementation in JavaScript",
+    "Stack Implementation in C",
+    "Stack Implementation in Python",
+    "Stack Implementation in Java",
+    "Linked List Stack",
+    "DSA Stack",
+    "Data Structures Stack",
+    "Stack Push Pop Linked List",
+    "Learn Stack DSA",
+    "Visualize Stack Implementation",
+    "Stack Code Examples",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/stack/stackLinkedList.png",
+        width: 1200,
+        height: 630,
+        alt: "Stack Implementation using Linked List",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/stack/implementation/usingLinkedList/AlgorithmClient')),
+  },
+  "stack/isempty": {
+    metadata: {
+  title:
+    "Stack is empty Visualizer | Learn Stack IsEmpty Operation in JS, C, Python, Java",
+  description:
+    "Visualize how Stack isEmpty operation works in DSA using interactive animations. Great for beginners and interview prep. Includes code examples in JavaScript, C, Python, and Java.",
+  keywords: [
+    "Stack DSA",
+    "Stack Visualizer",
+    "Learn Stack",
+    "DSA Animation",
+    "Stack isEmpty Operation",
+    "Check if Stack is Empty",
+    "Stack Implementation in JavaScript",
+    "Stack Implementation in C",
+    "Stack in Python",
+    "Stack in Java",
+    "Stack Code Examples",
+    "Interactive Stack Tool",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/stack/isEmpty.png",
+        width: 1200,
+        height: 630,
+        alt: "Stack isEmpty Visualization",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/stack/isempty/AlgorithmClient')),
+  },
+  "stack/isfull": {
+    metadata: {
+  title:
+    "Stack Is Full Visualizer | Check Full Condition in Stack with Code in JS, C, Python, Java",
+  description:
+    "Understand how to check if a Stack is full using interactive animations and code examples in JavaScript, C, Python, and Java. A simple guide for beginners and DSA interview preparation.",
+  keywords: [
+    "Stack Is Full",
+    "Is Full Operation Stack",
+    "Stack Full Condition",
+    "Stack Capacity Check",
+    "DSA Stack Animation",
+    "Learn Stack Operations",
+    "Stack in JavaScript",
+    "Stack in C",
+    "Stack in Python",
+    "Stack in Java",
+    "Stack Code Examples",
+    "Stack Overflow Condition",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/stack/isFull.png",
+        width: 1200,
+        height: 630,
+        alt: "Stack isFull Visualization",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/stack/isfull/AlgorithmClient')),
+  },
+  "stack/monotonic/largestrectangle": {
+    metadata: {
+  title:
+    "Largest Rectangle in Histogram Visualizer | Learn Monotonic Stack",
+  description:
+    "Understand the Largest Rectangle in Histogram algorithm using a Monotonic Stack through step-by-step animations.",
+  keywords: [
+    "Largest Rectangle in Histogram",
+    "Monotonic Stack",
+    "Stack Visualization",
+    "Data Structure Visualization",
+    "Learn Monotonic Stack",
+    "Interactive Algorithm Tool",
+    "Practice Stack Operations",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/stack/monotonic/largestrectangle/AlgorithmClient')),
+  },
+  "stack/peek": {
+    metadata: {
+  title:
+    "Stack Peek Visualizer | Understand Peek Operation in Stack with Code in JS, C, Python, Java",
+  description:
+    "Learn how the Peek operation works in a Stack using interactive animations and code examples in JavaScript, C, Python, and Java. Perfect for beginners and DSA interview preparation.",
+  keywords: [
+    "Stack Peek",
+    "Peek Operation Stack",
+    "Stack Top Element",
+    "Peek in DSA",
+    "DSA Stack Animation",
+    "Learn Stack Operations",
+    "Stack in JavaScript",
+    "Stack in C",
+    "Stack in Python",
+    "Stack in Java",
+    "Peek Operation Example",
+    "Stack Code Examples",
+    "Top of Stack",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/stack/peek.png",
+        width: 1200,
+        height: 630,
+        alt: "Stack Peek Visualization",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/stack/peek/AlgorithmClient')),
+  },
+  "stack/polish/postfix": {
+    metadata: {
+  title:
+    "Postfix Notation using Stack | Learn Postfix Evaluation in DSA with Code in JS, C, Python, Java",
+  description:
+    "Visualize how Postfix expressions are evaluated using a Stack through interactive animations and code examples in JavaScript, C, Python, and Java. Perfect for DSA beginners and technical interview preparation.",
+  keywords: [
+    "Postfix Notation",
+    "Postfix Evaluation Stack",
+    "Stack DSA",
+    "Postfix Expression",
+    "DSA Postfix",
+    "Evaluate Postfix using Stack",
+    "Learn Postfix Notation",
+    "Postfix Evaluation in JavaScript",
+    "Postfix Evaluation in C",
+    "Postfix Evaluation in Python",
+    "Postfix Evaluation in Java",
+    "Stack Code Examples",
+    "DSA Expression Evaluation",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/stack/postfix.png",
+        width: 1200,
+        height: 630,
+        alt: "Stack infix to postfix",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/stack/polish/postfix/AlgorithmClient')),
+  },
+  "stack/polish/prefix": {
+    metadata: {
+  title:
+    "Prefix Notation using Stack | Learn Prefix Evaluation in DSA with Code in JS, C, Python, Java",
+  description:
+    "Understand how to evaluate Prefix expressions using a Stack with interactive animations and code examples in JavaScript, C, Python, and Java. Essential for mastering DSA concepts and preparing for interviews.",
+  keywords: [
+    "Prefix Notation",
+    "Prefix Evaluation Stack",
+    "Stack DSA",
+    "Prefix Expression",
+    "DSA Prefix",
+    "Evaluate Prefix using Stack",
+    "Learn Prefix Notation",
+    "Prefix Evaluation in JavaScript",
+    "Prefix Evaluation in C",
+    "Prefix Evaluation in Python",
+    "Prefix Evaluation in Java",
+    "Stack Code Examples",
+    "DSA Expression Evaluation",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/stack/prefix.png",
+        width: 1200,
+        height: 630,
+        alt: "Stack infix to prefix",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/stack/polish/prefix/AlgorithmClient')),
+  },
+  "stack/push-pop": {
+    metadata: {
+  title:
+    "Stack Push & Pop Visualizer & Quiz | Learn Stack Operations with Code in JS, C, Python, Java",
+  description:
+    "Understand Stack Push and Pop operations through step-by-step animations and test your knowledge with an interactive quiz. Includes code examples in JavaScript, C, Python, and Java. Ideal for beginners and interview preparation to master stack-based data structures visually and through hands-on coding.",
+  keywords: [
+    "Stack Push Visualizer",
+    "Stack Pop Visualizer",
+    "Push and Pop Animation",
+    "Stack Operations",
+    "Stack Algorithm",
+    "Stack Quiz",
+    "Data Structure Visualization",
+    "Learn Stack Push",
+    "Learn Stack Pop",
+    "Interactive Stack Tool",
+    "Practice Stack Operations",
+    "Test Stack Knowledge",
+    "Stack in JavaScript",
+    "Stack in C",
+    "Stack in Python",
+    "Stack in Java",
+    "Stack Code Examples",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/stack/pushPop.png",
+        width: 1200,
+        height: 630,
+        alt: "Stack Push and Pop Visualization",
+      },
+    ],
+  },
+},
+    component: dynamic(() => import('@/app/visualizer/stack/push-pop/AlgorithmClient')),
+  },
+  "tree/advanced/b-trees": {
+    metadata: {
+  title: "B-Tree Visualizer | Interactive Key Insertion & Node Splitting | AlgoBuddy",
+  description:
+    "Explore multi-way search B-Tree structures, node insertions, splitting criteria, and search traversals with step-by-step visual modules and practice quizzes.",
+  keywords: [
+    "B-Tree",
+    "Multi-Way Search Tree",
+    "Node Splitting",
+    "Database Indexing",
+    "DSA Trees Visualizer"
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/advanced/b-trees/AlgorithmClient')),
+  },
+  "tree/advanced/dsu": {
+    metadata: {
+  title: "Disjoint Set Union (DSU) Visualizer | Interactive Union-Find Algorithm | AlgoBuddy",
+  description:
+    "Visualize the Disjoint Set Union (DSU / Union-Find) algorithm with step-by-step interactive SVG tree diagrams and parent array grids. Explore Path Compression and Union by Rank optimizations with code examples and custom operations.",
+  keywords: [
+    "DSU Visualizer",
+    "Disjoint Set Union Visualizer",
+    "Union-Find Visualizer",
+    "Union-Find Animation",
+    "Path Compression Visualizer",
+    "Union by Rank Visualizer",
+    "Learn DSU",
+    "Advanced Tree Algorithms",
+    "Amortized Complexity Alpha",
+    "DSU in JavaScript",
+    "DSU in Python",
+    "DSU in C++"
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/advanced/dsu/AlgorithmClient')),
+  },
+  "tree/advanced/fenwick": {
+    metadata: {
+  title: "Fenwick Tree (Binary Indexed Tree) Visualizer | Interactive Queries & Updates | AlgoBuddy",
+  description:
+    "Explore Fenwick Tree (Binary Indexed Tree) structures, dynamic LSB update steps, prefix sum queries, and point updates with educational modules and quizzes.",
+  keywords: [
+    "Fenwick Tree",
+    "Binary Indexed Tree",
+    "Prefix Sum Query",
+    "LSB Operations",
+    "DSA Tree Animations"
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/advanced/fenwick/AlgorithmClient')),
+  },
+  "tree/advanced/red-black": {
+    metadata: {
+  title: "Red-Black Tree Visualizer | Interactive Rotations & Recoloring | AlgoBuddy",
+  description:
+    "Visualize Red-Black Tree self-balancing operations, node insertions, left/right rotations, and color flips step-by-step with educational modules and quizzes.",
+  keywords: [
+    "Red-Black Tree",
+    "Self-Balancing Binary Tree",
+    "Tree Rotations",
+    "Color Flips",
+    "DSA Tree Animations",
+    "Learn Red-Black Tree"
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/advanced/red-black/AlgorithmClient')),
+  },
+  "tree/advanced/segment": {
+    metadata: {
+  title: "Segment Tree Visualizer | Interactive Range Query & Point Updates | AlgoBuddy",
+  description:
+    "Explore Segment Tree structures, dynamic range queries, segment builds, and point updates step-by-step with educational animations and quizzes.",
+  keywords: [
+    "Segment Tree",
+    "Range Query",
+    "Point Update",
+    "DSA Tree Animations",
+    "Interval Tree"
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/advanced/segment/AlgorithmClient')),
+  },
+  "tree/advanced/segment-2d": {
+    metadata: {
+  title: "2D Segment Tree Visualizer | Interactive Matrix Range Query & Point Updates | AlgoBuddy",
+  description:
+    "Explore 2D Segment Tree (Tree of Trees) structures, dynamic grid queries, matrix builds, and point updates step-by-step with interactive grid animations, explanations, and quizzes.",
+  keywords: [
+    "2D Segment Tree",
+    "Matrix Range Query",
+    "Grid Point Update",
+    "DSA Tree Animations",
+    "Tree of Trees"
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/advanced/segment-2d/AlgorithmClient')),
+  },
+  "tree/advanced/trie": {
+    metadata: {
+  title: "Trie (Prefix Tree) Visualizer | Interactive Word Search & Autocomplete | AlgoBuddy",
+  description:
+    "Visualize Trie (Prefix Tree) character-by-character string insertion, search, and prefix matching step-by-step with interactive SVG animations, code blocks, and quizzes.",
+  keywords: [
+    "Trie Visualizer",
+    "Prefix Tree Visualizer",
+    "Trie Animation",
+    "Trie Insertion",
+    "Trie Search",
+    "Prefix Match",
+    "DSA Word Search",
+    "Learn Tries",
+    "Autocomplete Data Structure",
+    "Trie in JavaScript",
+    "Trie in Python",
+    "Trie in C++"
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/advanced/trie/AlgorithmClient')),
+  },
+  "tree/algorithms/diameter": {
+    metadata: {
+  title: "Tree Diameter Visualizer | Tree Algorithm | AlgoBuddy",
+  description:
+    "Explore tree diameter calculation with practical examples, recursion strategies, and complexity analysis for tree algorithms.",
+  keywords: ["Tree Diameter", "Tree Algorithms", "Binary Tree", "AlgoBuddy"],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/algorithms/diameter/AlgorithmClient')),
+  },
+  "tree/algorithms/isomorphism": {
+    metadata: {
+  title: "Tree Isomorphism Visualizer | Tree Algorithm | AlgoBuddy",
+  description:
+    "Learn how to determine whether two binary trees are structurally identical using tree isomorphism checks, supported by examples and code.",
+  keywords: ["Tree Isomorphism", "Binary Tree", "AlgoBuddy"],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/algorithms/isomorphism/AlgorithmClient')),
+  },
+  "tree/algorithms/lca": {
+    metadata: {
+  title: "Lowest Common Ancestor Visualizer | Tree Algorithm | AlgoBuddy",
+  description:
+    "Learn the Lowest Common Ancestor algorithm for binary trees with clear examples, time and space complexity analysis, and implementation details.",
+  keywords: [
+    "Lowest Common Ancestor",
+    "LCA",
+    "Tree Algorithms",
+    "Binary Tree",
+    "AlgoBuddy",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/algorithms/lca/AlgorithmClient')),
+  },
+  "tree/algorithms/serialization": {
+    metadata: {
+  title: "Serialize/Deserialize Binary Tree | Tree Algorithm | AlgoBuddy",
+  description:
+    "Master binary tree serialization and deserialization with step-by-step examples and JavaScript implementation details.",
+  keywords: ["Serialize Binary Tree", "Deserialize Binary Tree", "Tree Algorithms", "AlgoBuddy"],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/algorithms/serialization/AlgorithmClient')),
+  },
+  "tree/applications/decision-trees": {
+    metadata: {
+  title: "Decision Trees Visualizer | Tree Applications | AlgoBuddy",
+  description:
+    "Learn Decision Trees, a popular machine learning algorithm. Visualize how decisions are made based on conditions and features.",
+  keywords: [
+    "Decision Trees",
+    "Machine Learning",
+    "Tree Applications",
+    "Classification",
+    "AlgoBuddy",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/applications/decision-trees/AlgorithmClient')),
+  },
+  "tree/applications/heap": {
+    metadata: {
+  title: "Heap Visualizer (Min Heap & Max Heap) | Tree Applications | AlgoBuddy",
+  description:
+    "Interactively learn Min Heap and Max Heap operations including insert, extract root, peek, and heapify with synchronized tree and array animation.",
+  keywords: ["Heap", "Min Heap", "Max Heap", "Tree Applications", "AlgoBuddy"],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/applications/heap/AlgorithmClient')),
+  },
+  "tree/applications/heapsort": {
+    metadata: {
+  title: "Heap Sort Visualizer | Tree Applications | AlgoBuddy",
+  description:
+    "Learn Heap Sort, an efficient sorting algorithm based on binary heap data structure. Visualize heap construction, heapify process, and sort arrays.",
+  keywords: [
+    "Heap Sort",
+    "Tree Applications",
+    "Sorting Algorithms",
+    "Binary Heap",
+    "AlgoBuddy",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/applications/heapsort/AlgorithmClient')),
+  },
+  "tree/applications/huffman": {
+    metadata: {
+  title: "Huffman Coding Visualizer | Tree Applications | AlgoBuddy",
+  description:
+    "Learn Huffman Coding, an efficient data compression algorithm. Visualize tree construction, encoding, and decoding processes.",
+  keywords: [
+    "Huffman Coding",
+    "Data Compression",
+    "Tree Applications",
+    "Greedy Algorithm",
+    "AlgoBuddy",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/applications/huffman/AlgorithmClient')),
+  },
+  "tree/applications/syntax-trees": {
+    metadata: {
+  title: "Syntax Trees Visualizer | Tree Applications | AlgoBuddy",
+  description:
+    "Learn Abstract Syntax Trees (ASTs), a tree representation of the abstract syntactic structure of source code. Used heavily in compilers and interpreters.",
+  keywords: [
+    "Syntax Trees",
+    "AST",
+    "Abstract Syntax Tree",
+    "Compilers",
+    "Tree Applications",
+    "AlgoBuddy",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/applications/syntax-trees/AlgorithmClient')),
+  },
+  "tree/avl/deletion": {
+    metadata: {
+  title: "AVL Deletion Visualizer | Interactive AVL Tree Operations | AlgoBuddy",
+  description: "Visualize AVL tree deletion step-by-step with balancing rotations, height updates, and interactive animations.",
+  keywords: ["AVL Deletion", "AVL Tree", "Balanced BST", "DSA Visualizations"],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/avl/deletion/AlgorithmClient')),
+  },
+  "tree/avl/insertion": {
+    metadata: {
+  title: "AVL Insertion Visualizer | Interactive AVL Tree Operations | AlgoBuddy",
+  description: "Visualize AVL tree insertion step-by-step with balancing rotations, height updates, and interactive animations.",
+  keywords: ["AVL Insertion", "AVL Tree", "Balanced BST", "DSA Visualizations"],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/avl/insertion/AlgorithmClient')),
+  },
+  "tree/binaryTree/properties": {
+    metadata: {
+  title: "Binary Tree Structure & Properties | Learn Terminology and Metrics | AlgoBuddy",
+  description:
+    "Learn about Binary Tree structure, properties, and terminology in Data Structures and Algorithms. Discover root, parent, child, sibling, leaf, and internal nodes along with height, depth, level, degrees, and common formulas with interactive animations and code examples in JavaScript, Python, Java, C, and C++.",
+  keywords: [
+    "Binary Tree",
+    "Binary Tree Structure",
+    "Binary Tree Properties",
+    "Tree Height",
+    "Tree Depth",
+    "Leaf Nodes",
+    "Binary Tree Formulas",
+    "Interactive Tree Inspector",
+    "Data Structures",
+    "Algorithms",
+    "Learn DSA",
+    "Binary Tree in C++",
+    "Binary Tree in JavaScript",
+    "Binary Tree in Python",
+    "Binary Tree in Java",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/binaryTree/properties/AlgorithmClient')),
+  },
+  "tree/binaryTree/types": {
+    metadata: {
+  title: "Binary Tree Types | Learn Full, Complete, and Degenerate Binary Trees in DSA",
+  description:
+    "Learn about Binary Tree types in Data Structures and Algorithms, including Full Binary Tree, Complete Binary Tree, and Degenerate Tree with clear visual explanations, animations, and code examples in JavaScript, C, Python, and Java.",
+  keywords: [
+    "Binary Tree",
+    "Binary Tree Types",
+    "Full Binary Tree",
+    "Complete Binary Tree",
+    "Degenerate Tree",
+    "Binary Tree Visualization",
+    "DSA Binary Trees",
+    "Binary Tree Animation",
+    "Binary Tree Implementation",
+    "Binary Tree in JavaScript",
+    "Binary Tree in C",
+    "Binary Tree in Python",
+    "Binary Tree in Java",
+    "Learn Binary Trees DSA",
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/binaryTree/types/AlgorithmClient')),
+  },
+  "tree/bst/avl": {
+    metadata: {
+  title: "AVL Tree Balancing | Self-Balancing BST | AlgoBuddy",
+  description:
+    "Learn about AVL Trees, the first self-balancing binary search trees. Explore height-balancing, single and double rotations, and complexity analysis.",
+  keywords: [
+    "AVL Tree",
+    "Self-Balancing BST",
+    "Tree Rotations",
+    "Height Balanced Tree",
+    "DSA Tree"
+  ],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/bst/avl/AlgorithmClient')),
+  },
+  "tree/bst/deletion": {
+    metadata: {
+  title: "BST Deletion Visualizer | Interactive Binary Search Tree Operations | AlgoBuddy",
+  description: "Learn how deleting nodes works in a Binary Search Tree, visualizing leaf, single-child, and two-children predecessor/successor deletions.",
+  keywords: ["BST Deletion", "Delete Node BST", "Inorder Successor Deletion", "DSA Visualizations"],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/bst/deletion/AlgorithmClient')),
+  },
+  "tree/bst/in-order": {
+    metadata: {
+  title: "BST In-Order Traversal Visualizer | Interactive Binary Search Tree Operations | AlgoBuddy",
+  description: "Visualize Binary Search Tree in-order traversal step-by-step with interactive animations, path highlighting, and quizzes.",
+  keywords: ["BST In-Order Traversal", "Binary Search Tree", "Inorder Traversal", "DSA Visualizations"],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/bst/in-order/AlgorithmClient')),
+  },
+  "tree/bst/insertion": {
+    metadata: {
+  title: "BST Insertion Visualizer | Interactive Binary Search Tree Operations | AlgoBuddy",
+  description: "Visualize Binary Search Tree element insertion step-by-step with interactive animations, path highlightings, and quizzes.",
+  keywords: ["BST Insertion", "Binary Search Tree", "Insert Node BST", "DSA Visualizations"],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/bst/insertion/AlgorithmClient')),
+  },
+  "tree/bst/post-order": {
+    metadata: {
+  title: "BST Post-Order Traversal Visualizer | Interactive Binary Search Tree Operations | AlgoBuddy",
+  description: "Visualize Binary Search Tree post-order traversal step-by-step with interactive animations, path highlighting, and quizzes.",
+  keywords: ["BST Post-Order Traversal", "Binary Search Tree", "Postorder Traversal", "DSA Visualizations"],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/bst/post-order/AlgorithmClient')),
+  },
+  "tree/bst/pre-order": {
+    metadata: {
+  title: "BST Pre-Order Traversal Visualizer | Interactive Binary Search Tree Operations | AlgoBuddy",
+  description: "Visualize Binary Search Tree pre-order traversal step-by-step with interactive animations, path highlighting, and quizzes.",
+  keywords: ["BST Pre-Order Traversal", "Binary Search Tree", "Preorder Traversal", "DSA Visualizations"],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/bst/pre-order/AlgorithmClient')),
+  },
+  "tree/bst/searching": {
+    metadata: {
+  title: "BST Search Visualizer | Interactive Binary Search Tree Operations | AlgoBuddy",
+  description: "Learn how searching works in Binary Search Trees with step-by-step interactive animations, pseudocode highlighting, and quizzes.",
+  keywords: ["BST Search", "Binary Search Tree", "BST Traversal", "DSA Visualizations"],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/bst/searching/AlgorithmClient')),
+  },
+  "tree/heap/max-heap": {
+    metadata: {
+  title: "Max Heap Visualizer | Interactive Heap Operations | AlgoBuddy",
+  description: "Visualize max-heap operations step-by-step with interactive array and tree animations.",
+  keywords: ["Max Heap", "Heap Visualizer", "DSA Visualizations"],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/heap/max-heap/AlgorithmClient')),
+  },
+  "tree/heap/min-heap": {
+    metadata: {
+  title: "Min Heap Visualizer | Interactive Heap Operations | AlgoBuddy",
+  description: "Visualize min-heap operations step-by-step with interactive array and tree animations.",
+  keywords: ["Min Heap", "Heap Visualizer", "DSA Visualizations"],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/heap/min-heap/AlgorithmClient')),
+  },
+  "tree/traversing/in-order": {
+    metadata: {
+  title: 'In-Order Traversal Visualizer | AlgoBuddy',
+  description: 'Visualize In-Order (Left → Root → Right) binary tree traversal step-by-step with interactive animations, pseudocode highlighting, and quizzes.',
+  keywords: ['In-Order Traversal', 'Binary Tree', 'BST', 'DSA Animation', 'Tree Visualizer'],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/traversing/in-order/AlgorithmClient')),
+  },
+  "tree/traversing/level-order": {
+    metadata: {
+  title: 'Level-Order (BFS) Traversal Visualizer | AlgoBuddy',
+  description: 'Visualize Level-Order (Breadth-First Search) binary tree traversal step-by-step with live queue animations, pseudocode highlighting, and quizzes.',
+  keywords: ['Level-Order Traversal', 'BFS', 'Binary Tree', 'Breadth First Search', 'DSA Animation', 'Tree Visualizer'],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/traversing/level-order/AlgorithmClient')),
+  },
+  "tree/traversing/morris": {
+    metadata: {
+  title: 'Morris Traversal Visualizer | AlgoBuddy',
+  description: 'Visualize Morris Traversal (threaded binary tree, O(1) space) step-by-step with dynamic thread link animations, pseudocode highlighting, and quizzes.',
+  keywords: ['Morris Traversal', 'Threaded Binary Tree', 'O(1) Space', 'Binary Tree', 'DSA Animation', 'Tree Visualizer'],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/traversing/morris/AlgorithmClient')),
+  },
+  "tree/traversing/post-order": {
+    metadata: {
+  title: 'Post-Order Traversal Visualizer | AlgoBuddy',
+  description: 'Visualize Post-Order (Left → Right → Root) binary tree traversal step-by-step with interactive animations, pseudocode highlighting, and quizzes.',
+  keywords: ['Post-Order Traversal', 'Binary Tree', 'BST', 'DSA Animation', 'Tree Visualizer'],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/traversing/post-order/AlgorithmClient')),
+  },
+  "tree/traversing/pre-order": {
+    metadata: {
+  title: 'Pre-Order Traversal Visualizer | AlgoBuddy',
+  description: 'Visualize Pre-Order (Root → Left → Right) binary tree traversal step-by-step with interactive animations, pseudocode highlighting, and quizzes.',
+  keywords: ['Pre-Order Traversal', 'Binary Tree', 'BST', 'DSA Animation', 'Tree Visualizer'],
+  robots: "index, follow",
+},
+    component: dynamic(() => import('@/app/visualizer/tree/traversing/pre-order/AlgorithmClient')),
+  },
+  "string/reverse-string": {
+  metadata: {
+    title: "Reverse String | AlgoBuddy",
+    description:
+      "Visualize the Reverse String algorithm with step-by-step animation.",
+    keywords: [
+      "Reverse String",
+      "String",
+      "String Visualizer",
+      "Reverse String Visualizer",
+    ],
+    robots: "index, follow",
+  },
+
+  component: dynamic(() =>
+    import("@/app/visualizer/string/reverse-string/page")
+  ),
+},
+"string/palindrome-check": {
+  metadata: {
+    title: "Palindrome Check | AlgoBuddy",
+    description:
+      "Visualize the Palindrome Check algorithm with step-by-step animation.",
+    keywords: [
+      "Palindrome Check",
+      "Palindrome",
+      "String",
+      "String Visualizer",
+    ],
+    robots: "index, follow",
+  },
+
+  component: dynamic(() =>
+    import("@/app/visualizer/string/palindrome-check/page")
+  ),
+},
+"string/character-frequency": {
+  metadata: {
+    title: "Character Frequency | AlgoBuddy",
+    description:
+      "Visualize the Character Frequency algorithm with step-by-step animation.",
+    keywords: [
+      "Character Frequency",
+      "String",
+      "HashMap",
+      "Frequency Counter",
+      "Character Frequency Visualizer",
+    ],
+    robots: "index, follow",
+  },
+
+  component: dynamic(() =>
+    import("@/app/visualizer/string/character-frequency/page")
+  ),
+},
+"string/anagram-check": {
+  metadata: {
+    title: "Anagram Check | AlgoBuddy",
+    description:
+      "Visualize the Anagram Check algorithm with step-by-step animation.",
+    keywords: [
+      "Anagram Check",
+      "String",
+      "HashMap",
+      "Anagram Visualizer",
+    ],
+    robots: "index, follow",
+  },
+
+  component: dynamic(() =>
+    import("@/app/visualizer/string/anagram-check/page")
+  ),
+},
+"string/longest-common-prefix": {
+  metadata: {
+    title: "Longest Common Prefix | AlgoBuddy",
+    description:
+      "Visualize the Longest Common Prefix algorithm with step-by-step animation.",
+    keywords: [
+      "Longest Common Prefix",
+      "LCP",
+      "String",
+      "String Visualizer",
+    ],
+    robots: "index, follow",
+  },
+
+  component: dynamic(() =>
+    import("@/app/visualizer/string/longest-common-prefix/page")
+  ),
+},
+"string/kmp-algorithm": {
+  metadata: {
+    title: "KMP Algorithm | AlgoBuddy",
+    description:
+      "Visualize the Knuth-Morris-Pratt string matching algorithm step by step.",
+    keywords: [
+      "KMP",
+      "Knuth Morris Pratt",
+      "Pattern Matching",
+      "String",
+    ],
+    robots: "index,follow",
+  },
+  component: dynamic(() =>
+    import("@/app/visualizer/string/kmp-algorithm/page")
+  ),
+},
+"string/rabin-karp": {
+  metadata: {
+    title: "Rabin-Karp Algorithm Visualizer | AlgoBuddy",
+    description:
+      "Learn and visualize the Rabin-Karp string matching algorithm step by step using rolling hash, interactive animations, code examples, and quizzes.",
+    keywords: [
+      "Rabin-Karp",
+      "String Matching",
+      "Pattern Matching",
+      "Rolling Hash",
+      "Algorithms",
+      "AlgoBuddy",
+    ],
+    category: "String",
+    difficulty: "Medium",
+  },
+},
+"string/longest-substring": {
+  metadata: {
+    title:
+      "Longest Substring Without Repeating Characters | AlgoBuddy",
+    description:
+      "Visualize the Longest Substring Without Repeating Characters algorithm using the Sliding Window technique.",
+    keywords: [
+      "Longest Substring",
+      "Sliding Window",
+      "HashMap",
+      "String Algorithms",
+      "AlgoBuddy",
+    ],
+    robots: "index, follow",
+  },
+  component: dynamic(() =>
+    import("@/app/visualizer/string/longest-substring/page")
+  ),
+},
+"string/minimum-window-substring": {
+  metadata: {
+    title: "Minimum Window Substring | AlgoBuddy",
+    description:
+      "Visualize the Minimum Window Substring algorithm using the Sliding Window technique.",
+    keywords: [
+      "Minimum Window Substring",
+      "Sliding Window",
+      "HashMap",
+      "String Algorithms",
+      "AlgoBuddy",
+    ],
+    robots: "index, follow",
+  },
+
+  component: dynamic(() =>
+    import("@/app/visualizer/string/minimum-window-substring/page")
+  ),
+},
+};
diff --git a/src/config/rateLimits.js b/src/config/rateLimits.js
new file mode 100644
index 000000000..56f3f449a
--- /dev/null
+++ b/src/config/rateLimits.js
@@ -0,0 +1,8 @@
+export const RATE_LIMITS = {
+  CONTACT_API: {
+    LIMIT: 5,
+  },
+  SMTP: {
+    DAILY_QUOTA: parseInt(process.env.SMTP_DAILY_QUOTA || "400", 10),
+  },
+};
diff --git a/src/features/algorithms/ai/alphaBetaPruningLogic.js b/src/features/algorithms/ai/alphaBetaPruningLogic.js
new file mode 100644
index 000000000..23a4ea13b
--- /dev/null
+++ b/src/features/algorithms/ai/alphaBetaPruningLogic.js
@@ -0,0 +1,105 @@
+export function* alphaBetaGenerator(initialNodes) {
+  let nodes = initialNodes.map(n => ({ ...n }));
+  let currentNodeClass = {};
+  let prunedNodes = {};
+  
+  function* evaluate(nodeIndex, depth, alpha, beta, isMax) {
+    if (depth === 3) {
+      currentNodeClass[nodeIndex] = "bg-green-500 text-white border-green-700";
+      yield {
+        treeNodes: nodes.map(n => ({ ...n })),
+        currentNodeClass: { ...currentNodeClass },
+        prunedNodes: { ...prunedNodes },
+        stepExplanation: `Evaluating leaf node: ${nodes[nodeIndex].val}`
+      };
+      return nodes[nodeIndex].val;
+    }
+    
+    currentNodeClass[nodeIndex] = "bg-yellow-300 text-black border-yellow-500 scale-110";
+    nodes[nodeIndex].alpha = alpha;
+    nodes[nodeIndex].beta = beta;
+    yield {
+      treeNodes: nodes.map(n => ({ ...n })),
+      currentNodeClass: { ...currentNodeClass },
+      prunedNodes: { ...prunedNodes },
+      stepExplanation: `Visiting ${isMax ? "Max" : "Min"} node. α=${alpha === -Infinity ? "-∞" : alpha}, β=${beta === Infinity ? "∞" : beta}`
+    };
+    
+    const leftChild = 2 * nodeIndex + 1;
+    const rightChild = 2 * nodeIndex + 2;
+    
+    let bestVal = isMax ? -Infinity : Infinity;
+    
+    // Left Child
+    const leftVal = yield* evaluate(leftChild, depth + 1, alpha, beta, !isMax);
+    if (isMax) {
+      bestVal = Math.max(bestVal, leftVal);
+      alpha = Math.max(alpha, bestVal);
+    } else {
+      bestVal = Math.min(bestVal, leftVal);
+      beta = Math.min(beta, bestVal);
+    }
+    
+    nodes[nodeIndex].val = bestVal;
+    nodes[nodeIndex].alpha = alpha;
+    nodes[nodeIndex].beta = beta;
+    yield {
+      treeNodes: nodes.map(n => ({ ...n })),
+      currentNodeClass: { ...currentNodeClass },
+      prunedNodes: { ...prunedNodes },
+      stepExplanation: `Back at ${isMax ? "Max" : "Min"} node. Updated ${isMax ? "α" : "β"} to ${isMax ? alpha : beta}. Check α=${alpha === -Infinity ? "-∞" : alpha} ≥ β=${beta === Infinity ? "∞" : beta}?`
+    };
+    
+    // Pruning check
+    if (beta <= alpha) {
+      prunedNodes[rightChild] = true;
+      const markPruned = (idx) => {
+        if (idx > 14) return;
+        prunedNodes[idx] = true;
+        markPruned(2 * idx + 1);
+        markPruned(2 * idx + 2);
+      };
+      markPruned(rightChild);
+      
+      yield {
+        treeNodes: nodes.map(n => ({ ...n })),
+        currentNodeClass: { ...currentNodeClass },
+        prunedNodes: { ...prunedNodes },
+        stepExplanation: `PRUNED! Since ${isMax ? "β (" + beta + ") <= α (" + alpha + ")" : "α (" + alpha + ") >= β (" + beta + ")"}. Ignoring right child.`
+      };
+    } else {
+      // Right Child
+      const rightVal = yield* evaluate(rightChild, depth + 1, alpha, beta, !isMax);
+      if (isMax) {
+        bestVal = Math.max(bestVal, rightVal);
+        alpha = Math.max(alpha, bestVal);
+      } else {
+        bestVal = Math.min(bestVal, rightVal);
+        beta = Math.min(beta, bestVal);
+      }
+      nodes[nodeIndex].val = bestVal;
+      nodes[nodeIndex].alpha = alpha;
+      nodes[nodeIndex].beta = beta;
+    }
+    
+    currentNodeClass[nodeIndex] = "bg-blue-500 text-white border-blue-700 scale-100";
+    yield {
+      treeNodes: nodes.map(n => ({ ...n })),
+      currentNodeClass: { ...currentNodeClass },
+      prunedNodes: { ...prunedNodes },
+      stepExplanation: `Node ${nodeIndex} completed. Value: ${bestVal}`
+    };
+    
+    return bestVal;
+  }
+  
+  const rootVal = yield* evaluate(0, 0, -Infinity, Infinity, true);
+  
+  yield {
+    treeNodes: nodes.map(n => ({ ...n })),
+    currentNodeClass: { ...currentNodeClass },
+    prunedNodes: { ...prunedNodes },
+    stepExplanation: `Algorithm finished. Optimal value: ${rootVal}`,
+    message: `Finished! Optimal value: ${rootVal}`
+  };
+}
diff --git a/src/features/algorithms/ai/astarLogic.js b/src/features/algorithms/ai/astarLogic.js
new file mode 100644
index 000000000..0ccb973e3
--- /dev/null
+++ b/src/features/algorithms/ai/astarLogic.js
@@ -0,0 +1,163 @@
+const pointKey = (row, col) => `${row},${col}`;
+const parsePointKey = (key) => {
+  const [row, col] = key.split(",").map(Number);
+  return { row, col };
+};
+
+const heuristicDistance = (a, b, heuristic) => {
+  const dr = Math.abs(a.row - b.row);
+  const dc = Math.abs(a.col - b.col);
+  if (heuristic === "euclidean") return Math.sqrt(dr * dr + dc * dc);
+  if (heuristic === "chebyshev") return Math.max(dr, dc);
+  return dr + dc;
+};
+
+const reconstructPath = (cameFrom, currentKey) => {
+  const path = [currentKey];
+  let cursor = currentKey;
+  while (cameFrom.has(cursor)) {
+    cursor = cameFrom.get(cursor);
+    path.push(cursor);
+  }
+  return path.reverse();
+};
+
+const getNeighbors = (row, col, size, allowDiagonal = false) => {
+  const neighbors = [];
+  if (row > 0) neighbors.push({ row: row - 1, col });
+  if (row < size - 1) neighbors.push({ row: row + 1, col });
+  if (col > 0) neighbors.push({ row, col: col - 1 });
+  if (col < size - 1) neighbors.push({ row, col: col + 1 });
+  
+  if (allowDiagonal) {
+    if (row > 0 && col > 0) neighbors.push({ row: row - 1, col: col - 1 });
+    if (row > 0 && col < size - 1) neighbors.push({ row: row - 1, col: col + 1 });
+    if (row < size - 1 && col > 0) neighbors.push({ row: row + 1, col: col - 1 });
+    if (row < size - 1 && col < size - 1) neighbors.push({ row: row + 1, col: col + 1 });
+  }
+  return neighbors;
+};
+
+export function* astarGenerator(start, goal, walls, gridSize, heuristic, allowDiagonal = false) {
+  const startKey = pointKey(start.row, start.col);
+  const goalKey = pointKey(goal.row, goal.col);
+  const wallSet = new Set([...walls].filter((cell) => cell !== startKey && cell !== goalKey));
+  const openSet = new Set([startKey]);
+  const closedSet = new Set();
+  const cameFrom = new Map();
+  const gScore = new Map([[startKey, 0]]);
+  const fScore = new Map([[startKey, heuristicDistance(start, goal, heuristic)]]);
+
+  const yieldState = (messageText, detailText, currentKey = null, path = [], goalReached = false) => {
+    const currentPoint = currentKey ? parsePointKey(currentKey) : null;
+    const currentG = currentKey ? gScore.get(currentKey) ?? 0 : 0;
+    const currentH = currentPoint ? heuristicDistance(currentPoint, goal, heuristic) : 0;
+    const currentF = currentKey ? fScore.get(currentKey) ?? currentG + currentH : 0;
+    
+    return {
+      message: messageText,
+      detail: detailText,
+      currentKey,
+      open: [...openSet],
+      closed: [...closedSet],
+      path,
+      g: currentG,
+      h: currentH,
+      f: currentF,
+      goalReached,
+    };
+  };
+
+  const pickNext = () => {
+    let bestKey = null;
+    for (const candidateKey of openSet) {
+      if (!bestKey) {
+        bestKey = candidateKey;
+        continue;
+      }
+
+      const candidateF = fScore.get(candidateKey) ?? Infinity;
+      const bestF = fScore.get(bestKey) ?? Infinity;
+      if (candidateF !== bestF) {
+        if (candidateF < bestF) bestKey = candidateKey;
+        continue;
+      }
+
+      const candidatePoint = parsePointKey(candidateKey);
+      const bestPoint = parsePointKey(bestKey);
+      const candidateH = heuristicDistance(candidatePoint, goal, heuristic);
+      const bestH = heuristicDistance(bestPoint, goal, heuristic);
+      if (candidateH !== bestH) {
+        if (candidateH < bestH) bestKey = candidateKey;
+        continue;
+      }
+
+      const candidateG = gScore.get(candidateKey) ?? Infinity;
+      const bestG = gScore.get(bestKey) ?? Infinity;
+      if (candidateG !== bestG) {
+        if (candidateG < bestG) bestKey = candidateKey;
+        continue;
+      }
+
+      if (candidateKey < bestKey) bestKey = candidateKey;
+    }
+    return bestKey;
+  };
+
+  yield yieldState(
+    "A* is ready. The frontier begins at the start node.",
+    "The priority of each node is computed with f = g + h.",
+    null
+  );
+
+  while (openSet.size > 0) {
+    const currentKey = pickNext();
+    const currentPoint = parsePointKey(currentKey);
+
+    if (currentKey === goalKey) {
+      const path = reconstructPath(cameFrom, currentKey);
+      yield yieldState(
+        "Goal reached. Reconstructing the shortest route.",
+        "The goal node was removed from the open set with the best score.",
+        currentKey,
+        path,
+        true
+      );
+      return;
+    }
+
+    openSet.delete(currentKey);
+    closedSet.add(currentKey);
+
+    yield yieldState(
+      `Expanding node (${currentPoint.row + 1}, ${currentPoint.col + 1}).`,
+      `Selected node has g = ${gScore.get(currentKey) ?? 0}, h = ${heuristicDistance(currentPoint, goal, heuristic).toFixed(2)}, and f = ${(fScore.get(currentKey) ?? 0).toFixed(2)}.`,
+      currentKey
+    );
+
+    for (const neighbor of getNeighbors(currentPoint.row, currentPoint.col, gridSize, allowDiagonal)) {
+      const neighborKey = pointKey(neighbor.row, neighbor.col);
+      if (wallSet.has(neighborKey) || closedSet.has(neighborKey)) continue;
+
+      const tentativeG = (gScore.get(currentKey) ?? Infinity) + 1;
+      const knownG = gScore.get(neighborKey) ?? Infinity;
+      if (tentativeG < knownG) {
+        cameFrom.set(neighborKey, currentKey);
+        gScore.set(neighborKey, tentativeG);
+        const nextH = heuristicDistance(neighbor, goal, heuristic);
+        fScore.set(neighborKey, tentativeG + nextH);
+        openSet.add(neighborKey);
+        yield yieldState(
+          `Updated neighbor (${neighbor.row + 1}, ${neighbor.col + 1}).`,
+          `New values: g = ${tentativeG}, h = ${nextH.toFixed(2)}, f = ${(tentativeG + nextH).toFixed(2)}.`,
+          currentKey
+        );
+      }
+    }
+  }
+
+  yield yieldState(
+    "No path was found.",
+    "The open set is empty, so the goal cannot be reached with the current walls."
+  );
+}
diff --git a/src/features/algorithms/ai/mctsLogic.js b/src/features/algorithms/ai/mctsLogic.js
new file mode 100644
index 000000000..9d21e242c
--- /dev/null
+++ b/src/features/algorithms/ai/mctsLogic.js
@@ -0,0 +1,64 @@
+export const makeInitialTree = () => {
+  return new Array(15).fill(null).map((_, i) => ({
+    id: i,
+    visits: 0,
+    wins: 0,
+    children: i <= 6 ? [2 * i + 1, 2 * i + 2] : [],
+  }));
+};
+
+const randOutcome = () => (Math.random() < 0.5 ? 1 : 0);
+
+export const uct = (node, parentVisits, c = 1.4) => {
+  if (node.visits === 0) return Infinity;
+  const exploitation = node.wins / node.visits;
+  const exploration = c * Math.sqrt(Math.log(parentVisits) / node.visits);
+  return exploitation + exploration;
+};
+
+const select = (nodes, exploreC) => {
+  let path = [0];
+  let cur = nodes[0];
+  while (cur.children && cur.children.length > 0) {
+    const parentVisits = cur.visits || 1;
+    const childNodes = cur.children.map((id) => nodes[id]);
+    let best = childNodes[0];
+    for (const ch of childNodes) {
+      if (uct(ch, parentVisits, exploreC) > uct(best, parentVisits, exploreC)) {
+        best = ch;
+      }
+    }
+    path.push(best.id);
+    cur = best;
+  }
+  return path;
+};
+
+export function* mctsGenerator(initialTree, exploreC = 1.4, simSize = 10, totalSteps = 100) {
+  let tree = initialTree.map(n => ({ ...n }));
+  
+  for (let count = 1; count <= totalSteps; count++) {
+    const nodes = tree.map((n) => ({ ...n }));
+    let lastPath = [];
+    
+    for (let s = 0; s < simSize; s++) {
+      const path = select(nodes, exploreC);
+      const outcome = randOutcome();
+      // Backpropagate
+      for (const id of path) {
+        nodes[id].visits += 1;
+        nodes[id].wins += outcome;
+      }
+      lastPath = path;
+    }
+    
+    tree = nodes;
+    
+    yield {
+      tree: tree.map(n => ({ ...n })),
+      highlightPath: lastPath,
+      stepCount: count,
+      stepExplanation: `Iteration #${count}: Performed ${simSize} simulations. The last path selected via UCT was: ${lastPath.join(" → ")}.`
+    };
+  }
+}
diff --git a/src/features/algorithms/ai/minmaxLogic.js b/src/features/algorithms/ai/minmaxLogic.js
new file mode 100644
index 000000000..e90803a7e
--- /dev/null
+++ b/src/features/algorithms/ai/minmaxLogic.js
@@ -0,0 +1,54 @@
+export function* minmaxGenerator(initialNodes) {
+  let nodes = initialNodes.map(n => ({ ...n }));
+  let currentNodeClass = {};
+  
+  function* evaluate(nodeIndex, depth, isMax) {
+    if (depth === 3) {
+      currentNodeClass[nodeIndex] = "bg-green-500 text-white border-green-700";
+      yield {
+        treeNodes: nodes.map(n => ({ ...n })),
+        currentNodeClass: { ...currentNodeClass },
+        stepExplanation: `Evaluating leaf node at distance ${nodeIndex - 7}, value: ${nodes[nodeIndex].val}`
+      };
+      return nodes[nodeIndex].val;
+    }
+    
+    currentNodeClass[nodeIndex] = "bg-yellow-300 text-black border-yellow-500";
+    yield {
+      treeNodes: nodes.map(n => ({ ...n })),
+      currentNodeClass: { ...currentNodeClass },
+      stepExplanation: `Visiting ${isMax ? "Max" : "Min"} node.`
+    };
+    
+    const leftChild = 2 * nodeIndex + 1;
+    const rightChild = 2 * nodeIndex + 2;
+    
+    const leftVal = yield* evaluate(leftChild, depth + 1, !isMax);
+    const rightVal = yield* evaluate(rightChild, depth + 1, !isMax);
+    
+    const bestVal = isMax ? Math.max(leftVal, rightVal) : Math.min(leftVal, rightVal);
+    
+    nodes[nodeIndex].val = bestVal;
+    
+    currentNodeClass[leftChild] = "bg-gray-300 text-black border-gray-400";
+    currentNodeClass[rightChild] = "bg-gray-300 text-black border-gray-400";
+    currentNodeClass[nodeIndex] = "bg-blue-500 text-white border-blue-700";
+    
+    yield {
+      treeNodes: nodes.map(n => ({ ...n })),
+      currentNodeClass: { ...currentNodeClass },
+      stepExplanation: `${isMax ? "Max" : "Min"} node completed. Chose ${bestVal} from (${leftVal}, ${rightVal}).`
+    };
+    
+    return bestVal;
+  }
+  
+  const rootVal = yield* evaluate(0, 0, true);
+  
+  yield {
+    treeNodes: nodes.map(n => ({ ...n })),
+    currentNodeClass: { ...currentNodeClass },
+    stepExplanation: `Algorithm finished. Optimal value is ${rootVal}.`,
+    message: `Finished! Optimal value: ${rootVal}`
+  };
+}
diff --git a/src/features/algorithms/array/binarySearchLogic.js b/src/features/algorithms/array/binarySearchLogic.js
new file mode 100644
index 000000000..67149309d
--- /dev/null
+++ b/src/features/algorithms/array/binarySearchLogic.js
@@ -0,0 +1,42 @@
+/**
+ * Pure generator function for Binary Search algorithm.
+ * Yields frames representing the state of the search.
+ * No async, no timers — timing and abort are handled by useAlgorithmPlayer.
+ *
+ * @param {number[]} arr - The sorted array to search through.
+ * @param {number} targetValue - The value to search for.
+ * @returns {Generator<{type: string, l?: number, h?: number, m?: number, step?: number, arrM?: number}, void, unknown>}
+ */
+export function* binarySearchGenerator(arr, targetValue, findFirstOccurrence = false) {
+  let l = 0;
+  let h = arr.length - 1;
+  let step = 0;
+
+  while (l <= h) {
+    const m = Math.floor((l + h) / 2);
+    step++;
+
+    yield {
+      type: 'checking',
+      l,
+      h,
+      m,
+      step,
+      arrM: arr[m]
+    };
+
+    if (arr[m] === targetValue) {
+      yield { type: 'found', m, step };
+      if (!findFirstOccurrence) return;
+      h = m - 1; // Keep searching the left half
+    } else if (arr[m] < targetValue) {
+      yield { type: 'discard_left', m, step };
+      l = m + 1;
+    } else {
+      yield { type: 'discard_right', m, step };
+      h = m - 1;
+    }
+  }
+
+  yield { type: 'not_found' };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/array/bubbleSortLogic.js b/src/features/algorithms/array/bubbleSortLogic.js
new file mode 100644
index 000000000..eed9bbee1
--- /dev/null
+++ b/src/features/algorithms/array/bubbleSortLogic.js
@@ -0,0 +1,75 @@
+/**
+ * Pure generator function for Bubble Sort algorithm.
+ * Yields frames representing the state of the sort.
+ * No async, no timers — this is deliberately pure.
+ * The caller (useAlgorithmPlayer) owns all timing and abort logic.
+ *
+ * @param {number[]} initialArray - The array to sort.
+ * @returns {Generator<{type: string, payload: any}, void, unknown>}
+ */
+export function* bubbleSortGenerator(initialArray) {
+  let arr = [...initialArray];
+  const n = arr.length;
+  let comparisons = 0;
+  let swaps = 0;
+  let step = 0;
+  const totalSteps = Math.floor((n * (n - 1)) / 2);
+
+  yield {
+    type: 'init',
+    payload: { totalSteps }
+  };
+
+  for (let i = 0; i < n - 1; i++) {
+    let swapped = false;
+
+    yield {
+      type: 'phase_start',
+      payload: { pass: i + 1, totalPasses: n - 1 }
+    };
+
+    for (let j = 0; j < n - i - 1; j++) {
+      comparisons++;
+      step++;
+
+      yield {
+        type: 'comparing',
+        payload: { j, jNext: j + 1, arr: [...arr], comparisons, swaps, step, totalSteps }
+      };
+
+      if (arr[j] > arr[j + 1]) {
+        yield {
+          type: 'swap_needed',
+          payload: { j, jNext: j + 1, arr: [...arr], comparisons, swaps, step, totalSteps }
+        };
+
+        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
+        swapped = true;
+        swaps++;
+
+        yield {
+          type: 'swapped',
+          payload: { j, jNext: j + 1, arr: [...arr], comparisons, swaps, step, totalSteps }
+        };
+      } else {
+        yield {
+          type: 'no_swap',
+          payload: { j, jNext: j + 1, arr: [...arr], comparisons, swaps, step, totalSteps }
+        };
+      }
+    }
+
+    // Mark this pass's last element as fully sorted
+    yield {
+      type: 'sorted_element',
+      payload: { index: n - 1 - i, arr: [...arr] }
+    };
+
+    if (!swapped) {
+      yield { type: 'early_completion', payload: { comparisons, swaps } };
+      break;
+    }
+  }
+
+  yield { type: 'completed', payload: { arr, comparisons, swaps } };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/array/bucketSortLogic.js b/src/features/algorithms/array/bucketSortLogic.js
new file mode 100644
index 000000000..398727c94
--- /dev/null
+++ b/src/features/algorithms/array/bucketSortLogic.js
@@ -0,0 +1,206 @@
+export function* bucketSortGenerator(inputArray) {
+    const arr = [...inputArray];
+    const n = arr.length;
+
+    let step = 0;
+    let comparisons = 0;
+    let swaps = 0;
+
+    // Rough estimation for progress bar
+    const bucketCount = Math.max(1, Math.floor(Math.sqrt(n)));
+    const totalSteps =
+        5 +
+        n + // distribute
+        bucketCount + // bucket sorting
+        n + // merging
+        bucketCount;
+
+    yield {
+        type: "init",
+        payload: { totalSteps },
+    };
+    step++;
+
+    if (n === 0) {
+        yield {
+            type: "completed",
+            payload: {
+                arr,
+                step,
+                comparisons,
+                swaps,
+                totalSteps: step,
+            },
+        };
+        return;
+    }
+
+    const min = Math.min(...arr);
+    const max = Math.max(...arr);
+
+    yield {
+        type: "find_range",
+        payload: {
+            step,
+            min,
+            max,
+            totalSteps,
+        },
+    };
+    step++;
+    
+    if (min === max) {
+        yield {
+            type: "all_elements_equal",
+            payload: {
+                step,
+                value: min,
+                message: "All elements are equal. They will all be placed in the first bucket.",
+                totalSteps,
+            }
+        };
+        step++;
+    }
+
+    const buckets = Array.from({ length: bucketCount }, () => []);
+
+    yield {
+        type: "create_buckets",
+        payload: {
+            step,
+            bucketCount,
+            buckets: buckets.map((b) => [...b]),
+            totalSteps,
+        },
+    };
+    step++;
+
+    for (let i = 0; i < n; i++) {
+        let index =
+            max === min
+                ? 0
+                : Math.floor(((arr[i] - min) / (max - min)) * (bucketCount - 1));
+
+        buckets[index].push(arr[i]);
+
+        yield {
+            type: "bucket_insert",
+            payload: {
+                step,
+                value: arr[i],
+                bucketIndex: index,
+                buckets: buckets.map((b) => [...b]),
+                totalSteps,
+            },
+        };
+        step++;
+    }
+
+    for (let b = 0; b < bucketCount; b++) {
+        yield {
+            type: "bucket_sort_start",
+            payload: {
+                step,
+                bucketIndex: b,
+                bucket: [...buckets[b]],
+                totalSteps,
+            },
+        };
+        step++;
+
+        // Insertion Sort inside bucket
+        for (let i = 1; i < buckets[b].length; i++) {
+            let key = buckets[b][i];
+            let j = i - 1;
+
+            while (j >= 0) {
+                comparisons++;
+
+                yield {
+                    type: "bucket_compare",
+                    payload: {
+                        step,
+                        bucketIndex: b,
+                        bucket: [...buckets[b]],
+                        current: j,
+                        next: j + 1,
+                        comparisons,
+                        totalSteps,
+                    },
+                };
+                step++;
+
+                if (buckets[b][j] > key) {
+                    swaps++;
+                    buckets[b][j + 1] = buckets[b][j];
+
+                    yield {
+                        type: "bucket_shift",
+                        payload: {
+                            step,
+                            bucketIndex: b,
+                            bucket: [...buckets[b]],
+                            swaps,
+                            totalSteps,
+                        },
+                    };
+                    step++;
+
+                    j--;
+                } else {
+                    break;
+                }
+            }
+
+            buckets[b][j + 1] = key;
+
+            yield {
+                type: "bucket_insert_sorted",
+                payload: {
+                    step,
+                    bucketIndex: b,
+                    bucket: [...buckets[b]],
+                    totalSteps,
+                },
+            };
+            step++;
+        }
+    }
+
+    // -----------------------------
+    // Merge Buckets
+    // -----------------------------
+    let k = 0;
+
+    for (let b = 0; b < bucketCount; b++) {
+        for (let value of buckets[b]) {
+            arr[k] = value;
+
+            yield {
+                type: "merge",
+                payload: {
+                    step,
+                    arr: [...arr],
+                    value,
+                    bucketIndex: b,
+                    index: k,
+                    totalSteps,
+                },
+            };
+            step++;
+
+            k++;
+        }
+    }
+
+    yield {
+        type: "completed",
+        payload: {
+            arr,
+            step,
+            comparisons,
+            swaps,
+            totalSteps: step,
+        },
+    };
+}
diff --git a/src/features/algorithms/array/countingSortLogic.js b/src/features/algorithms/array/countingSortLogic.js
new file mode 100644
index 000000000..0ef4251f8
--- /dev/null
+++ b/src/features/algorithms/array/countingSortLogic.js
@@ -0,0 +1,101 @@
+/**
+ * Pure generator function for Counting Sort algorithm.
+ * Yields frames representing the state of the sort.
+ * No async, no timers — timing and abort are handled by useAlgorithmPlayer.
+ *
+ * @param {number[]} initialArray - The array to sort.
+ * @returns {Generator<{type: string, payload: any}, void, unknown>}
+ */
+export function* countingSortGenerator(initialArray) {
+  const arr = [...initialArray];
+  const n = arr.length;
+  if (n === 0) return;
+
+  const maxVal = Math.max(...arr);
+  const count = new Array(maxVal + 1).fill(0);
+  const result = new Array(n).fill(null);
+
+  let comparisons = 0;
+  let swaps = 0;
+  let step = 0;
+  const totalSteps = n + maxVal + 1 + n;
+
+  yield {
+    type: 'init',
+    payload: { arr: [...arr], count: [...count], result: [...result], totalSteps }
+  };
+
+  yield {
+    type: 'counting_start',
+    payload: { arr: [...arr], count: [...count], result: [...result], comparisons, swaps, step, totalSteps }
+  };
+
+  for (let i = 0; i < n; i++) {
+    const value = arr[i];
+    comparisons++;
+    step++;
+
+    yield {
+      type: 'counting',
+      payload: { arr: [...arr], value, current: i, countIndex: value, count: [...count], result: [...result], comparisons, swaps, step, totalSteps }
+    };
+
+    count[value] += 1;
+
+    yield {
+      type: 'counted',
+      payload: { arr: [...arr], value, current: i, countIndex: value, count: [...count], result: [...result], comparisons, swaps, step, totalSteps }
+    };
+  }
+
+  yield {
+    type: 'prefix_start',
+    payload: { arr: [...arr], count: [...count], result: [...result], comparisons, swaps, step, totalSteps }
+  };
+
+  for (let i = 1; i < count.length; i++) {
+    step++;
+
+    yield {
+      type: 'prefix',
+      payload: { arr: [...arr], value: i, countIndex: i, count: [...count], prevTotal: count[i - 1], result: [...result], comparisons, swaps, step, totalSteps }
+    };
+
+    count[i] += count[i - 1];
+
+    yield {
+      type: 'prefixed',
+      payload: { arr: [...arr], value: i, countIndex: i, count: [...count], result: [...result], comparisons, swaps, step, totalSteps }
+    };
+  }
+
+  yield {
+    type: 'placement_start',
+    payload: { arr: [...arr], count: [...count], result: [...result], comparisons, swaps, step, totalSteps }
+  };
+
+  for (let i = n - 1; i >= 0; i--) {
+    const value = arr[i];
+    const position = count[value] - 1;
+    step++;
+
+    yield {
+      type: 'placement',
+      payload: { arr: [...arr], value, current: i, countIndex: value, position, count: [...count], result: [...result], comparisons, swaps, step, totalSteps }
+    };
+
+    result[position] = value;
+    count[value] -= 1;
+    swaps++;
+
+    yield {
+      type: 'placed',
+      payload: { arr: [...arr], value, current: i, countIndex: value, outputIndex: position, count: [...count], result: [...result], comparisons, swaps, step, totalSteps }
+    };
+  }
+
+  yield {
+    type: 'completed',
+    payload: { arr: [...result], count: [...count], result: [...result], comparisons, swaps, step, totalSteps }
+  };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/array/exponentialSearchLogic.js b/src/features/algorithms/array/exponentialSearchLogic.js
new file mode 100644
index 000000000..53d22286a
--- /dev/null
+++ b/src/features/algorithms/array/exponentialSearchLogic.js
@@ -0,0 +1,93 @@
+/**
+ * Pure generator function for Exponential Search.
+ * First finds the search range by doubling the index,
+ * then performs Binary Search within that range.
+ */
+
+export function* exponentialSearchGenerator(arr, target) {
+  const n = arr.length;
+
+  if (n === 0) {
+    yield { type: "not_found" };
+    return;
+  }
+
+  let step = 0;
+
+  // Check first element
+  step++;
+  yield {
+    type: "range",
+    current: 0,
+    low: 0,
+    high: 0,
+    step,
+  };
+
+  if (arr[0] === target) {
+    yield {
+      type: "found",
+      index: 0,
+      step,
+    };
+    return;
+  }
+
+  // Exponential range finding
+  let i = 1;
+
+  while (i < n && arr[i] <= target) {
+    step++;
+
+    yield {
+      type: "range",
+      current: i,
+      low: i / 2,
+      high: Math.min(i, n - 1),
+      step,
+    };
+
+    i *= 2;
+  }
+
+  let low = Math.floor(i / 2);
+  let high = Math.min(i, n - 1);
+
+  // Binary Search within the identified range
+  while (low <= high) {
+    const mid = Math.floor((low + high) / 2);
+
+    step++;
+
+    yield {
+      type: "binary",
+      low,
+      high,
+      mid,
+      step,
+    };
+
+    if (arr[mid] === target) {
+      yield {
+        type: "found",
+        index: mid,
+        low,
+        high,
+        mid,
+        step,
+      };
+      return;
+    }
+
+    if (arr[mid] < target) {
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
+  }
+
+  yield {
+    type: "not_found",
+    step,
+  };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/array/fibonacciSearchLogic.js b/src/features/algorithms/array/fibonacciSearchLogic.js
new file mode 100644
index 000000000..62fd13a85
--- /dev/null
+++ b/src/features/algorithms/array/fibonacciSearchLogic.js
@@ -0,0 +1,84 @@
+/**
+ * Fibonacci Search Generator
+ */
+export function* fibonacciSearchGenerator(arr, target) {
+  const n = arr.length;
+
+  let fibMMm2 = 0;
+  let fibMMm1 = 1;
+  let fibM = fibMMm1 + fibMMm2;
+
+  while (fibM < n) {
+    fibMMm2 = fibMMm1;
+    fibMMm1 = fibM;
+    fibM = fibMMm1 + fibMMm2;
+  }
+
+  let offset = -1;
+  let step = 0;
+
+  while (fibM > 1) {
+    const i = Math.min(offset + fibMMm2, n - 1);
+    step++;
+
+    yield {
+      type: "checking",
+      i,
+      value: arr[i],
+      offset,
+      step,
+    };
+
+    if (arr[i] < target) {
+      yield {
+        type: "move_right",
+        i,
+        offset,
+        step,
+      };
+
+      fibM = fibMMm1;
+      fibMMm1 = fibMMm2;
+      fibMMm2 = fibM - fibMMm1;
+      offset = i;
+    } else if (arr[i] > target) {
+      yield {
+        type: "move_left",
+        i,
+        offset,
+        step,
+      };
+
+      fibM = fibMMm2;
+      fibMMm1 = fibMMm1 - fibMMm2;
+      fibMMm2 = fibM - fibMMm1;
+    } else {
+      yield {
+        type: "found",
+        i,
+        offset,
+        step,
+      };
+      return;
+    }
+  }
+
+  if (
+    fibMMm1 &&
+    offset + 1 < n &&
+    arr[offset + 1] === target
+  ) {
+    yield {
+      type: "found",
+      i: offset + 1,
+      offset,
+      step: step + 1,
+    };
+    return;
+  }
+
+  yield {
+    type: "not_found",
+    step: step + 1,
+  };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/array/heapSortLogic.js b/src/features/algorithms/array/heapSortLogic.js
new file mode 100644
index 000000000..63d419540
--- /dev/null
+++ b/src/features/algorithms/array/heapSortLogic.js
@@ -0,0 +1,171 @@
+/**
+ * Pure generator function for Heap Sort algorithm.
+ * Yields frames representing the state of the sort.
+ * No async, no timers — timing and abort are handled by useAlgorithmPlayer.
+ *
+ * @param {number[]} initialArray - The array to sort.
+ * @returns {Generator<{type: string, payload: any}, void, unknown>}
+ */
+export function* heapSortGenerator(initialArray) {
+  const arr = [...initialArray];
+  let comparisons = 0;
+  let swaps = 0;
+  const sorted = [];
+
+  const yieldStep = (params) => ({
+    type: 'step',
+    payload: {
+      array: [...arr],
+      activeIndices: params.activeIndices || [],
+      compareIndices: params.compareIndices || [],
+      swapIndices: params.swapIndices || [],
+      sortedIndices: [...sorted],
+      heapSize: params.heapSize !== undefined ? params.heapSize : arr.length,
+      phase: params.phase,
+      message: params.message,
+      comparisons,
+      swaps,
+    }
+  });
+
+  function* heapify(heapSize, rootIndex, phase) {
+    let largest = rootIndex;
+    const left = 2 * rootIndex + 1;
+    const right = 2 * rootIndex + 2;
+
+    yield yieldStep({
+      phase,
+      message: `Heapify index ${rootIndex}; assume ${arr[rootIndex]} is largest.`,
+      activeIndices: [rootIndex],
+      heapSize,
+    });
+
+    if (left < heapSize) {
+      comparisons++;
+      yield yieldStep({
+        phase,
+        message: `Compare parent ${arr[largest]} with left child ${arr[left]}.`,
+        activeIndices: [rootIndex],
+        compareIndices: [largest, left],
+        heapSize,
+      });
+      if (arr[left] > arr[largest]) {
+        largest = left;
+        yield yieldStep({
+          phase,
+          message: `Left child ${arr[left]} becomes the largest candidate.`,
+          activeIndices: [largest],
+          heapSize,
+        });
+      }
+    }
+
+    if (right < heapSize) {
+      comparisons++;
+      yield yieldStep({
+        phase,
+        message: `Compare current largest ${arr[largest]} with right child ${arr[right]}.`,
+        activeIndices: [rootIndex],
+        compareIndices: [largest, right],
+        heapSize,
+      });
+      if (arr[right] > arr[largest]) {
+        largest = right;
+        yield yieldStep({
+          phase,
+          message: `Right child ${arr[right]} becomes the largest candidate.`,
+          activeIndices: [largest],
+          heapSize,
+        });
+      }
+    }
+
+    if (largest !== rootIndex) {
+      yield yieldStep({
+        phase,
+        message: `Swap ${arr[rootIndex]} with ${arr[largest]} to restore the heap property.`,
+        swapIndices: [rootIndex, largest],
+        heapSize,
+      });
+
+      const temp = arr[rootIndex];
+      arr[rootIndex] = arr[largest];
+      arr[largest] = temp;
+      swaps++;
+
+      yield yieldStep({
+        phase,
+        message: `Continue heapifying the affected subtree at index ${largest}.`,
+        activeIndices: [largest],
+        swapIndices: [rootIndex, largest],
+        heapSize,
+      });
+
+      yield* heapify(heapSize, largest, phase);
+    } else {
+      yield yieldStep({
+        phase,
+        message: `Subtree rooted at index ${rootIndex} already satisfies the max-heap rule.`,
+        activeIndices: [rootIndex],
+        heapSize,
+      });
+    }
+  }
+
+  yield yieldStep({
+    phase: 'Ready',
+    message: 'Start by treating the array as a complete binary tree.',
+  });
+
+  yield yieldStep({
+    phase: 'Build Max-Heap',
+    message: 'Build the max-heap from the last non-leaf node upward.',
+  });
+
+  for (let index = Math.floor(arr.length / 2) - 1; index >= 0; index--) {
+    yield yieldStep({
+      phase: 'Build Max-Heap',
+      message: `Heapify subtree rooted at index ${index}.`,
+      activeIndices: [index],
+    });
+    yield* heapify(arr.length, index, 'Build Max-Heap');
+  }
+
+  yield yieldStep({
+    phase: 'Extract Max',
+    message: 'The max-heap is ready. Repeatedly move the root to the sorted region.',
+  });
+
+  for (let end = arr.length - 1; end > 0; end--) {
+    yield yieldStep({
+      phase: 'Extract Max',
+      message: `Swap max ${arr[0]} with the last heap value ${arr[end]}.`,
+      swapIndices: [0, end],
+      heapSize: end + 1,
+    });
+
+    const temp = arr[0];
+    arr[0] = arr[end];
+    arr[end] = temp;
+    swaps++;
+    sorted.push(end);
+
+    yield yieldStep({
+      phase: 'Extract Max',
+      message: `${arr[end]} is fixed at index ${end}; shrink the heap.`,
+      activeIndices: [end],
+      sortedIndices: [...sorted],
+      heapSize: end,
+    });
+
+    yield* heapify(end, 0, 'Heapify Reduced Heap');
+  }
+
+  sorted.push(0);
+  yield yieldStep({
+    phase: 'Complete',
+    message: 'Heap Sort complete. Every value is in ascending order.',
+    sortedIndices: [...sorted],
+    heapSize: 0,
+  });
+}
\ No newline at end of file
diff --git a/src/features/algorithms/array/insertionSortLogic.js b/src/features/algorithms/array/insertionSortLogic.js
new file mode 100644
index 000000000..5b6e47f91
--- /dev/null
+++ b/src/features/algorithms/array/insertionSortLogic.js
@@ -0,0 +1,69 @@
+/**
+ * Pure generator function for Insertion Sort algorithm.
+ * Yields frames representing the state of the sort.
+ * No async, no timers — timing and abort are handled by useAlgorithmPlayer.
+ *
+ * @param {number[]} initialArray - The array to sort.
+ * @returns {Generator<{type: string, payload: any}, void, unknown>}
+ */
+export function* insertionSortGenerator(initialArray) {
+  const arr = [...initialArray];
+  const n = arr.length;
+  let comparisons = 0;
+  let shifts = 0;
+  let step = 0;
+  const totalSteps = Math.floor((n * (n - 1)) / 2);
+
+  yield {
+    type: 'init',
+    payload: { totalSteps }
+  };
+
+  for (let i = 1; i < n; i++) {
+    const current = arr[i];
+    let j = i - 1;
+
+    yield {
+      type: 'phase_start',
+      payload: { pass: i, totalPasses: n - 1, i, j, current, arr: [...arr] }
+    };
+
+    while (j >= 0) {
+      comparisons++;
+      step++;
+
+      yield {
+        type: 'comparing',
+        payload: { i, j, current, arr: [...arr], comparisons, shifts, step, totalSteps }
+      };
+
+      if (arr[j] > current) {
+        arr[j + 1] = arr[j];
+        shifts++;
+
+        yield {
+          type: 'shifting',
+          payload: { i, j, current, arr: [...arr], comparisons, shifts, step, totalSteps }
+        };
+
+        j--;
+      } else {
+        break;
+      }
+    }
+
+    yield {
+      type: 'found_insertion_point',
+      payload: { i, j, current, arr: [...arr], comparisons, shifts, step, totalSteps }
+    };
+
+    arr[j + 1] = current;
+
+    yield {
+      type: 'inserted',
+      payload: { i, j, current, arr: [...arr], comparisons, shifts, step, totalSteps }
+    };
+  }
+
+  yield { type: 'completed', payload: { arr, comparisons, shifts } };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/array/interpolationSearchLogic.js b/src/features/algorithms/array/interpolationSearchLogic.js
new file mode 100644
index 000000000..2f11211a5
--- /dev/null
+++ b/src/features/algorithms/array/interpolationSearchLogic.js
@@ -0,0 +1,99 @@
+/**
+ * Pure generator function for Interpolation Search.
+ * Yields frames representing each step of the search.
+ */
+
+export function* interpolationSearchGenerator(arr, target) {
+  let low = 0;
+  let high = arr.length - 1;
+  let step = 0;
+
+  while (
+    low <= high &&
+    target >= arr[low] &&
+    target <= arr[high]
+  ) {
+    step++;
+
+    if (low === high) {
+      yield {
+        type: "checking",
+        low,
+        high,
+        pos: low,
+        step,
+      };
+
+      if (arr[low] === target) {
+        yield {
+          type: "found",
+          low,
+          high,
+          pos: low,
+          step,
+        };
+      } else {
+        yield {
+          type: "not_found",
+          step,
+        };
+      }
+
+      return;
+    }
+
+    const pos =
+      low +
+      Math.floor(
+        ((target - arr[low]) * (high - low)) /
+          (arr[high] - arr[low])
+      );
+
+    yield {
+      type: "checking",
+      low,
+      high,
+      pos,
+      step,
+    };
+
+    if (arr[pos] === target) {
+      yield {
+        type: "found",
+        low,
+        high,
+        pos,
+        step,
+      };
+
+      return;
+    }
+
+    if (arr[pos] < target) {
+      yield {
+        type: "move_right",
+        low,
+        high,
+        pos,
+        step,
+      };
+
+      low = pos + 1;
+    } else {
+      yield {
+        type: "move_left",
+        low,
+        high,
+        pos,
+        step,
+      };
+
+      high = pos - 1;
+    }
+  }
+
+  yield {
+    type: "not_found",
+    step,
+  };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/array/jumpSearchLogic.js b/src/features/algorithms/array/jumpSearchLogic.js
new file mode 100644
index 000000000..baec5e726
--- /dev/null
+++ b/src/features/algorithms/array/jumpSearchLogic.js
@@ -0,0 +1,81 @@
+/**
+ * Pure generator function for Jump Search algorithm.
+ * Yields frames representing the state of the search.
+ *
+ * @param {number[]} arr
+ * @param {number} targetValue
+ */
+export function* jumpSearchGenerator(arr, targetValue) {
+  const n = arr.length;
+
+  if (n === 0) {
+    yield { type: "not_found" };
+    return;
+  }
+
+  const stepSize = Math.floor(Math.sqrt(n));
+
+  let prev = 0;
+  let step = stepSize;
+  let iteration = 0;
+
+  // Jump phase
+  while (prev < n && arr[Math.min(step, n) - 1] < targetValue) {
+    iteration++;
+
+    yield {
+      type: "jump",
+      prev,
+      step: Math.min(step, n),
+      current: Math.min(step, n) - 1,
+      iteration,
+      value: arr[Math.min(step, n) - 1],
+    };
+
+    prev = step;
+    step += stepSize;
+
+    if (prev >= n) {
+      yield { type: "out_of_bounds" };
+      yield {
+        type: "not_found",
+      };
+      return;
+    }
+  }
+
+  // Block found
+  yield {
+    type: "block_found",
+    prev,
+    step: Math.min(step, n),
+    iteration,
+  };
+
+  // Linear search phase
+  while (prev < Math.min(step, n)) {
+    iteration++;
+
+    yield {
+      type: "checking",
+      index: prev,
+      iteration,
+      value: arr[prev],
+    };
+
+    if (arr[prev] === targetValue) {
+      yield {
+        type: "found",
+        index: prev,
+        iteration,
+      };
+      return;
+    }
+
+    prev++;
+  }
+
+  yield {
+    type: "not_found",
+  };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/array/linearSearchLogic.js b/src/features/algorithms/array/linearSearchLogic.js
new file mode 100644
index 000000000..b0595496a
--- /dev/null
+++ b/src/features/algorithms/array/linearSearchLogic.js
@@ -0,0 +1,25 @@
+/**
+ * Pure generator function for Linear Search algorithm.
+ * Yields frames representing the state of the search.
+ * No async, no timers — timing and abort are handled by useAlgorithmPlayer.
+ *
+ * @param {number[]} arr - The array to search through.
+ * @param {number} targetValue - The value to search for.
+ * @returns {Generator<{type: string, index?: number}, void, unknown>}
+ */
+export function* linearSearchGenerator(arr, targetValue) {
+  if (arr.length === 0) {
+    yield { type: 'empty_array' };
+    return;
+  }
+  for (let index = 0; index < arr.length; index++) {
+    yield { type: 'checking', index };
+
+    if (arr[index] === targetValue) {
+      yield { type: 'found', index };
+      return;
+    }
+  }
+
+  yield { type: 'not_found' };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/array/mergeSortLogic.js b/src/features/algorithms/array/mergeSortLogic.js
new file mode 100644
index 000000000..3a41b1eec
--- /dev/null
+++ b/src/features/algorithms/array/mergeSortLogic.js
@@ -0,0 +1,111 @@
+/**
+ * Pure generator function for Merge Sort algorithm.
+ * Yields frames representing the state of the sort.
+ * No async, no timers — timing and abort are handled by useAlgorithmPlayer.
+ *
+ * @param {number[]} initialArray - The array to sort.
+ * @returns {Generator<{type: string, payload: any}, void, unknown>}
+ */
+export function* mergeSortGenerator(initialArray) {
+  const arr = [...initialArray];
+  const n = arr.length;
+  let comparisons = 0;
+  let merges = 0;
+  let step = 0;
+  const totalSteps = Math.floor(n * Math.ceil(Math.log2(n || 1)));
+
+  yield { type: 'init', payload: { totalSteps } };
+
+  yield* mergeSortHelper(arr, 0, n - 1, 0, []);
+
+  yield { type: 'completed', payload: { arr, comparisons, swaps: merges } };
+
+  function* mergeSortHelper(arr, l, r, level, path) {
+    if (l >= r) return;
+    const currentPath = [...path, { l, r }];
+    const m = l + Math.floor((r - l) / 2);
+
+    yield {
+      type: 'divide',
+      payload: { l, r, m, level, currentPath, arr: [...arr] }
+    };
+
+    yield* mergeSortHelper(arr, l, m, level + 1, currentPath);
+    yield* mergeSortHelper(arr, m + 1, r, level + 1, currentPath);
+    yield* merge(arr, l, m, r);
+  }
+
+  function* merge(arr, l, m, r) {
+    const n1 = m - l + 1;
+    const n2 = r - m;
+
+    const L = arr.slice(l, l + n1);
+    const R = arr.slice(m + 1, m + 1 + n2);
+
+    let i = 0, j = 0, k = l;
+
+    yield {
+      type: 'merge_start',
+      payload: { l, m, r, arr: [...arr] }
+    };
+
+    while (i < n1 && j < n2) {
+      comparisons++;
+      step++;
+
+      yield {
+        type: 'comparing',
+        payload: {
+          l, m, r, k,
+          leftCompareIdx: l + i,
+          rightCompareIdx: m + 1 + j,
+          LVal: L[i],
+          RVal: R[j],
+          arr: [...arr],
+          comparisons, merges, step, totalSteps
+        }
+      };
+
+      if (L[i] <= R[j]) {
+        arr[k] = L[i];
+        merges++;
+        yield {
+          type: 'merged',
+          payload: { l, m, r, k, val: L[i], fromLeft: true, arr: [...arr], comparisons, merges, step, totalSteps }
+        };
+        i++;
+      } else {
+        arr[k] = R[j];
+        merges++;
+        yield {
+          type: 'merged',
+          payload: { l, m, r, k, val: R[j], fromLeft: false, arr: [...arr], comparisons, merges, step, totalSteps }
+        };
+        j++;
+      }
+      k++;
+    }
+
+    while (i < n1) {
+      arr[k] = L[i];
+      merges++;
+      yield {
+        type: 'merged_remainder',
+        payload: { l, m, r, k, val: L[i], fromLeft: true, arr: [...arr], comparisons, merges, step, totalSteps }
+      };
+      i++;
+      k++;
+    }
+
+    while (j < n2) {
+      arr[k] = R[j];
+      merges++;
+      yield {
+        type: 'merged_remainder',
+        payload: { l, m, r, k, val: R[j], fromLeft: false, arr: [...arr], comparisons, merges, step, totalSteps }
+      };
+      j++;
+      k++;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/features/algorithms/array/quickSortLogic.js b/src/features/algorithms/array/quickSortLogic.js
new file mode 100644
index 000000000..88f5e5dfa
--- /dev/null
+++ b/src/features/algorithms/array/quickSortLogic.js
@@ -0,0 +1,107 @@
+/**
+ * Pure generator function for Quick Sort algorithm.
+ * Yields frames representing the state of the sort.
+ * No async, no timers — timing and abort are handled by useAlgorithmPlayer.
+ *
+ * @param {number[]} initialArray - The array to sort.
+ * @returns {Generator<{type: string, payload: any}, void, unknown>}
+ */
+export function* quickSortGenerator(initialArray) {
+  const arr = [...initialArray];
+  const n = arr.length;
+  let comparisons = 0;
+  let swaps = 0;
+  let step = 0;
+  const totalSteps = Math.floor((n * (n - 1)) / 2);
+
+  const stack = [];
+  stack.push({ low: 0, high: arr.length - 1 });
+  let partitions = [];
+
+  yield { type: 'init', payload: { totalSteps } };
+
+  while (stack.length > 0) {
+    const { low, high } = stack.pop();
+
+    if (low < high) {
+      partitions.push({ low, high });
+
+      yield {
+        type: 'partition_start',
+        payload: { low, high, stack: [...stack], partitions: [...partitions], arr: [...arr] }
+      };
+
+      const pivot = arr[high];
+      let i = low - 1;
+
+      yield {
+        type: 'pivot_chosen',
+        payload: { pivot, low, high, left: low, right: high - 1, stack: [...stack], partitions: [...partitions], arr: [...arr] }
+      };
+
+      for (let j = low; j < high; j++) {
+        comparisons++;
+        step++;
+
+        yield {
+          type: 'comparing',
+          payload: { j, i, pivot, low, high, stack: [...stack], partitions: [...partitions], arr: [...arr], comparisons, swaps, step, totalSteps }
+        };
+
+        if (arr[j] < pivot) {
+          i++;
+
+          yield {
+            type: 'swap_needed',
+            payload: { i, j, pivot, low, high, stack: [...stack], partitions: [...partitions], arr: [...arr], comparisons, swaps, step, totalSteps }
+          };
+
+          [arr[i], arr[j]] = [arr[j], arr[i]];
+          swaps++;
+
+          yield {
+            type: 'swapped',
+            payload: { i, j, pivot, low, high, stack: [...stack], partitions: [...partitions], arr: [...arr], comparisons, swaps, step, totalSteps }
+          };
+        } else {
+          yield {
+            type: 'no_swap',
+            payload: { j, i, pivot, low, high, stack: [...stack], partitions: [...partitions], arr: [...arr], comparisons, swaps, step, totalSteps }
+          };
+        }
+      }
+
+      yield {
+        type: 'pivot_swap_needed',
+        payload: { i: i + 1, high, pivot, low, stack: [...stack], partitions: [...partitions], arr: [...arr], comparisons, swaps, step, totalSteps }
+      };
+
+      [arr[i + 1], arr[high]] = [arr[high], arr[i + 1]];
+      swaps++;
+
+      yield {
+        type: 'pivot_swapped',
+        payload: { i: i + 1, high, pivot, low, stack: [...stack], partitions: [...partitions], arr: [...arr], comparisons, swaps, step, totalSteps }
+      };
+
+      const pi = i + 1;
+
+      yield {
+        type: 'partition_completed',
+        payload: { pi, stack: [...stack], partitions: [...partitions], arr: [...arr] }
+      };
+
+      stack.push({ low: pi + 1, high });
+      stack.push({ low, high: pi - 1 });
+
+      partitions = partitions.filter((p) => !(p.low === low && p.high === high));
+
+      yield {
+        type: 'stack_updated',
+        payload: { stack: [...stack], partitions: [...partitions], arr: [...arr] }
+      };
+    }
+  }
+
+  yield { type: 'completed', payload: { arr, comparisons, swaps } };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/array/radixSortLogic.js b/src/features/algorithms/array/radixSortLogic.js
new file mode 100644
index 000000000..b43a405b5
--- /dev/null
+++ b/src/features/algorithms/array/radixSortLogic.js
@@ -0,0 +1,119 @@
+export function* radixSortGenerator(initialArray) {
+  let arr = [...initialArray];
+
+  if (arr.length === 0) return;
+
+  const getDigit = (num, place) =>
+    Math.floor(Math.abs(num) / Math.pow(10, place)) % 10;
+
+  const digitCount = (num) =>
+    num === 0 ? 1 : Math.floor(Math.log10(Math.abs(num))) + 1;
+
+  const mostDigits = (nums) =>
+    Math.max(...nums.map(digitCount));
+
+  const maxDigits = mostDigits(arr);
+  const hasNegativeValues = arr.some((num) => num < 0);
+
+  let comparisons = 0;
+  let swaps = 0;
+  let step = 0;
+  const totalSteps = arr.length * maxDigits + (hasNegativeValues ? 1 : 0);
+
+  yield {
+    type: "init",
+    payload: {
+      arr: [...arr],
+      digit: 0,
+      comparisons,
+      swaps,
+      step,
+      totalSteps,
+    },
+  };
+
+  for (let k = 0; k < maxDigits; k++) {
+    yield {
+      type: "digit_start",
+      payload: {
+        arr: [...arr],
+        digit: k,
+        comparisons,
+        swaps,
+        step,
+        totalSteps,
+      },
+    };
+
+    const buckets = Array.from({ length: 10 }, () => []);
+
+    for (let i = 0; i < arr.length; i++) {
+      const digit = getDigit(arr[i], k);
+
+      comparisons++;
+      step++;
+
+      yield {
+        type: "placing",
+        payload: {
+          arr: [...arr],
+          current: i,
+          digit,
+          digitPlace: k,
+          comparisons,
+          swaps,
+          step,
+          totalSteps,
+        },
+      };
+
+      buckets[digit].push(arr[i]);
+    }
+
+    arr = [].concat(...buckets);
+
+    swaps += arr.length;
+
+    yield {
+      type: "digit_complete",
+      payload: {
+        arr: [...arr],
+        digitPlace: k,
+        comparisons,
+        swaps,
+        step,
+        totalSteps,
+      },
+    };
+  }
+
+  if (hasNegativeValues) {
+    const negatives = arr.filter((num) => num < 0).reverse();
+    const nonNegatives = arr.filter((num) => num >= 0);
+    arr = [...negatives, ...nonNegatives];
+    swaps += arr.length;
+    step++;
+
+    yield {
+      type: "sign_complete",
+      payload: {
+        arr: [...arr],
+        comparisons,
+        swaps,
+        step,
+        totalSteps,
+      },
+    };
+  }
+
+  yield {
+    type: "completed",
+    payload: {
+      arr: [...arr],
+      comparisons,
+      swaps,
+      step,
+      totalSteps,
+    },
+  };
+}
diff --git a/src/features/algorithms/array/selectionSortLogic.js b/src/features/algorithms/array/selectionSortLogic.js
new file mode 100644
index 000000000..89fc10a62
--- /dev/null
+++ b/src/features/algorithms/array/selectionSortLogic.js
@@ -0,0 +1,70 @@
+/**
+ * Pure generator function for Selection Sort algorithm.
+ * Yields frames representing the state of the sort.
+ * No async, no timers — timing and abort are handled by useAlgorithmPlayer.
+ *
+ * @param {number[]} initialArray - The array to sort.
+ * @returns {Generator<{type: string, payload: any}, void, unknown>}
+ */
+export function* selectionSortGenerator(initialArray) {
+  const arr = [...initialArray];
+  const n = arr.length;
+  let comparisons = 0;
+  let swaps = 0;
+  let step = 0;
+  const totalSteps = Math.floor((n * (n - 1)) / 2);
+
+  yield {
+    type: 'init',
+    payload: { totalSteps }
+  };
+
+  for (let i = 0; i < n - 1; i++) {
+    let minIndex = i;
+
+    yield {
+      type: 'phase_start',
+      payload: { pass: i + 1, totalPasses: n - 1, i, minIndex }
+    };
+
+    for (let j = i + 1; j < n; j++) {
+      comparisons++;
+      step++;
+
+      yield {
+        type: 'comparing',
+        payload: { i, j, minIndex, arr: [...arr], comparisons, swaps, step, totalSteps }
+      };
+
+      if (arr[j] < arr[minIndex]) {
+        minIndex = j;
+        yield {
+          type: 'new_min',
+          payload: { i, j, minIndex, arr: [...arr], comparisons, swaps, step, totalSteps }
+        };
+      }
+    }
+
+    if (minIndex !== i) {
+      yield {
+        type: 'swap_needed',
+        payload: { i, minIndex, arr: [...arr], comparisons, swaps, step, totalSteps }
+      };
+
+      [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];
+      swaps++;
+
+      yield {
+        type: 'swapped',
+        payload: { i, minIndex, arr: [...arr], comparisons, swaps, step, totalSteps }
+      };
+    } else {
+      yield {
+        type: 'no_swap',
+        payload: { i, minIndex, arr: [...arr], comparisons, swaps, step, totalSteps }
+      };
+    }
+  }
+
+  yield { type: 'completed', payload: { arr, comparisons, swaps } };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/array/shellSortLogic.js b/src/features/algorithms/array/shellSortLogic.js
new file mode 100644
index 000000000..e5079ef01
--- /dev/null
+++ b/src/features/algorithms/array/shellSortLogic.js
@@ -0,0 +1,57 @@
+export function* shellSortGenerator(inputArray) {
+    const arr = [...inputArray];
+    const n = arr.length;
+    let step = 0;
+    let comparisons = 0;
+    let swaps = 0;
+
+    // A rough estimation for total steps for the progress bar
+    let totalSteps = 0;
+    for (let gap = Math.floor(n / 2); gap > 0; gap = Math.floor(gap / 2)) {
+        totalSteps += (n - gap) * (Math.log2(n) / 2); // Approximation
+    }
+    totalSteps = Math.round(totalSteps);
+
+    yield { type: 'init', payload: { totalSteps } };
+    step++;
+
+    for (let gap = Math.floor(n / 2); gap > 0; gap = Math.floor(gap / 2)) {
+        yield { type: 'gap_start', payload: { step, gap, totalSteps } };
+        step++;
+
+        for (let i = gap; i < n; i++) {
+            let temp = arr[i];
+            yield { type: 'outer_loop', payload: { step, i, temp, gap, totalSteps } };
+            step++;
+
+            let j = i;
+            while (j >= gap) {
+                comparisons++;
+                yield { type: 'comparing', payload: { step, arr, j, gap, temp, comparisons, totalSteps } };
+                step++;
+
+                if (arr[j - gap] > temp) {
+                    swaps++;
+                    arr[j] = arr[j - gap];
+                    yield { type: 'shift', payload: { step, arr: [...arr], j: j - gap, swaps, totalSteps } };
+                    step++;
+                    j -= gap;
+                } else {
+                    break;
+                }
+            }
+
+            if (arr[j] !== temp) {
+                swaps++;
+            }
+            arr[j] = temp;
+            yield { type: 'insertion', payload: { step, arr: [...arr], j, temp, swaps, totalSteps } };
+            step++;
+        }
+    }
+
+    yield {
+        type: 'completed',
+        payload: { arr, step, comparisons, swaps, totalSteps: step }
+    };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/array/slidingWindowLogic.js b/src/features/algorithms/array/slidingWindowLogic.js
new file mode 100644
index 000000000..4e2067a18
--- /dev/null
+++ b/src/features/algorithms/array/slidingWindowLogic.js
@@ -0,0 +1,218 @@
+/**
+ * Pure generator functions for various Sliding Window algorithms.
+ * Yields state objects representing the window at each step.
+ * No async, no timers — timing and abort are handled by useAlgorithmPlayer.
+ */
+
+// ─── 1. Fixed Window — Maximum Sum ───────────────────────────────────────────
+export function* generateStatesFixedMax(arr, k) {
+  let maxSum = -Infinity;
+  let windowSum = 0;
+
+  for (let i = 0; i < k; i++) {
+    windowSum += arr[i];
+    yield {
+      left: 0, right: i,
+      current: windowSum,
+      best: maxSum === -Infinity ? 'None' : maxSum,
+      explanation: `Expanding initial window: Adding ${arr[i]} at index ${i}. Current sum: ${windowSum}.`,
+      activeWindow: [0, i]
+    };
+  }
+
+  maxSum = windowSum;
+  yield {
+    left: 0, right: k - 1,
+    current: windowSum,
+    best: maxSum,
+    explanation: `Initial window of size ${k} complete. Best sum so far: ${maxSum}.`,
+    activeWindow: [0, k - 1]
+  };
+
+  for (let i = k; i < arr.length; i++) {
+    const leftIdx = i - k;
+    yield {
+      left: leftIdx, right: i,
+      current: windowSum,
+      best: maxSum,
+      explanation: `Sliding window forward. Preparing to remove ${arr[leftIdx]} and add ${arr[i]}.`,
+      activeWindow: [leftIdx, i]
+    };
+
+    windowSum = windowSum - arr[leftIdx] + arr[i];
+    const updated = windowSum > maxSum;
+    maxSum = Math.max(maxSum, windowSum);
+
+    yield {
+      left: leftIdx + 1, right: i,
+      current: windowSum,
+      best: maxSum,
+      explanation: `Slid window: Removed ${arr[leftIdx]}, Added ${arr[i]}. New sum: ${windowSum}.${updated ? ' New maximum found!' : ''}`,
+      activeWindow: [leftIdx + 1, i]
+    };
+  }
+
+  yield {
+    left: arr.length - k, right: arr.length - 1,
+    current: windowSum,
+    best: maxSum,
+    explanation: `Finished. Maximum sum of subarray of size ${k} is ${maxSum}.`,
+    activeWindow: [arr.length - k, arr.length - 1],
+    done: true
+  };
+}
+
+// ─── 2. Fixed Window — Average ────────────────────────────────────────────────
+export function* generateStatesFixedAvg(arr, k) {
+  const result = [];
+  let windowSum = 0;
+
+  for (let i = 0; i < k; i++) {
+    windowSum += arr[i];
+    yield {
+      left: 0, right: i,
+      current: (windowSum / (i + 1)).toFixed(2),
+      best: 'N/A',
+      explanation: `Expanding initial window: Adding ${arr[i]}. Current sum: ${windowSum}.`,
+      activeWindow: [0, i]
+    };
+  }
+
+  result.push((windowSum / k).toFixed(2));
+  yield {
+    left: 0, right: k - 1,
+    current: (windowSum / k).toFixed(2),
+    best: `Averages: [${result.join(', ')}]`,
+    explanation: `Initial window complete. First average: ${(windowSum / k).toFixed(2)}.`,
+    activeWindow: [0, k - 1]
+  };
+
+  for (let i = k; i < arr.length; i++) {
+    const leftIdx = i - k;
+    windowSum = windowSum - arr[leftIdx] + arr[i];
+    result.push((windowSum / k).toFixed(2));
+
+    yield {
+      left: leftIdx + 1, right: i,
+      current: (windowSum / k).toFixed(2),
+      best: `Averages: [${result.join(', ')}]`,
+      explanation: `Slid window: Removed ${arr[leftIdx]}, Added ${arr[i]}. New average: ${(windowSum / k).toFixed(2)}.`,
+      activeWindow: [leftIdx + 1, i]
+    };
+  }
+
+  yield {
+    left: arr.length - k, right: arr.length - 1,
+    current: (windowSum / k).toFixed(2),
+    best: `Averages: [${result.join(', ')}]`,
+    explanation: `Finished calculating all averages of subarrays of size ${k}.`,
+    activeWindow: [arr.length - k, arr.length - 1],
+    done: true
+  };
+}
+
+// ─── 3. Variable Window — Longest Substring Without Repeating Characters ─────
+export function* generateStatesVarLongestSub(s) {
+  const charSet = new Set();
+  let left = 0;
+  let maxLength = 0;
+
+  for (let right = 0; right < s.length; right++) {
+    yield {
+      left, right,
+      current: Array.from(charSet).join(''),
+      best: maxLength,
+      explanation: `Right pointer at '${s[right]}'. Checking if it's already in the window.`,
+      activeWindow: [left, right]
+    };
+
+    while (charSet.has(s[right])) {
+      yield {
+        left, right,
+        current: Array.from(charSet).join(''),
+        best: maxLength,
+        explanation: `Duplicate '${s[right]}' found! Shrinking window from left to remove '${s[left]}'.`,
+        activeWindow: [left, right],
+        violation: true
+      };
+      charSet.delete(s[left]);
+      left++;
+    }
+
+    charSet.add(s[right]);
+    const updated = (right - left + 1) > maxLength;
+    maxLength = Math.max(maxLength, right - left + 1);
+
+    yield {
+      left, right,
+      current: s.substring(left, right + 1),
+      best: maxLength,
+      explanation: `Added '${s[right]}' to window. Current valid substring: "${s.substring(left, right + 1)}".${updated ? ' New max length!' : ''}`,
+      activeWindow: [left, right]
+    };
+  }
+
+  yield {
+    left, right: s.length - 1,
+    current: s.substring(left, s.length),
+    best: maxLength,
+    explanation: `Finished processing. Longest substring without repeating characters has length ${maxLength}.`,
+    activeWindow: [left, s.length - 1],
+    done: true
+  };
+}
+
+// ─── 4. Variable Window — Smallest Subarray with Sum >= Target ────────────────
+export function* generateStatesVarSmallestSub(arr, target) {
+  let left = 0;
+  let windowSum = 0;
+  let minLength = Infinity;
+
+  for (let right = 0; right < arr.length; right++) {
+    windowSum += arr[right];
+
+    yield {
+      left, right,
+      current: windowSum,
+      best: minLength === Infinity ? 'None' : minLength,
+      explanation: `Expanding right pointer: Added ${arr[right]}. Current sum: ${windowSum}.`,
+      activeWindow: [left, right]
+    };
+
+    while (windowSum >= target) {
+      const updated = (right - left + 1) < minLength;
+      minLength = Math.min(minLength, right - left + 1);
+
+      yield {
+        left, right,
+        current: windowSum,
+        best: minLength,
+        explanation: `Sum ${windowSum} >= target ${target}!${updated ? ' New minimum length found!' : ''} Shrinking from left to find smaller valid window.`,
+        activeWindow: [left, right],
+        success: true
+      };
+
+      windowSum -= arr[left];
+      left++;
+
+      if (left <= right) {
+        yield {
+          left, right,
+          current: windowSum,
+          best: minLength,
+          explanation: `Shrunk window: removed ${arr[left - 1]}. New sum: ${windowSum}.`,
+          activeWindow: [left, right]
+        };
+      }
+    }
+  }
+
+  yield {
+    left, right: arr.length - 1,
+    current: windowSum,
+    best: minLength === Infinity ? 0 : minLength,
+    explanation: `Finished. Smallest subarray with sum >= ${target} has length ${minLength === Infinity ? 0 : minLength}.`,
+    activeWindow: [Math.max(0, left - 1), arr.length - 1],
+    done: true
+  };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/array/ternarySearchLogic.js b/src/features/algorithms/array/ternarySearchLogic.js
new file mode 100644
index 000000000..5148dd1b6
--- /dev/null
+++ b/src/features/algorithms/array/ternarySearchLogic.js
@@ -0,0 +1,82 @@
+/**
+ * Pure generator function for Ternary Search algorithm.
+ * Yields frames representing the state of the search.
+ *
+ * @param {number[]} arr - Sorted array
+ * @param {number} targetValue - Value to search
+ */
+export function* ternarySearchGenerator(arr, targetValue) {
+  let l = 0;
+  let h = arr.length - 1;
+  let step = 0;
+
+  while (l <= h) {
+    step++;
+
+    const mid1 = l + Math.floor((h - l) / 3);
+    const mid2 = h - Math.floor((h - l) / 3);
+
+    yield {
+      type: "checking",
+      l,
+      h,
+      mid1,
+      mid2,
+      step,
+      arrMid1: arr[mid1],
+      arrMid2: arr[mid2],
+    };
+
+    if (arr[mid1] === targetValue) {
+      yield {
+        type: "found_mid1",
+        mid1,
+        step,
+      };
+      return;
+    }
+
+    if (arr[mid2] === targetValue) {
+      yield {
+        type: "found_mid2",
+        mid2,
+        step,
+      };
+      return;
+    }
+
+    if (targetValue < arr[mid1]) {
+      yield {
+        type: "discard_right_two_thirds",
+        mid1,
+        mid2,
+        step,
+      };
+
+      h = mid1 - 1;
+    } else if (targetValue > arr[mid2]) {
+      yield {
+        type: "discard_left_two_thirds",
+        mid1,
+        mid2,
+        step,
+      };
+
+      l = mid2 + 1;
+    } else {
+      yield {
+        type: "discard_outer_thirds",
+        mid1,
+        mid2,
+        step,
+      };
+
+      l = mid1 + 1;
+      h = mid2 - 1;
+    }
+  }
+
+  yield {
+    type: "not_found",
+  };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/array/timSortLogic.js b/src/features/algorithms/array/timSortLogic.js
new file mode 100644
index 000000000..a39a7a5ed
--- /dev/null
+++ b/src/features/algorithms/array/timSortLogic.js
@@ -0,0 +1,176 @@
+const MIN_MERGE = 32;
+
+function calcMinRun(n) {
+  let r = 0;
+  while (n >= MIN_MERGE) {
+    r |= n & 1;
+    n >>= 1;
+  }
+  return n + r;
+}
+
+function* insertionSort(arr, left, right, state) {
+  const runIndices = Array.from({ length: right - left + 1 }, (_, i) => left + i);
+  for (let i = left + 1; i <= right; i++) {
+    const key = arr[i];
+    let j = i - 1;
+
+    while (j >= left) {
+      state.comparisons++;
+      yield {
+        type: "insertion_sort_in_run",
+        payload: {
+          ...state,
+          array: [...arr],
+          run: runIndices,
+          i: i,
+          j: j,
+          step: state.step++,
+        },
+      };
+      if (arr[j] > key) {
+        arr[j + 1] = arr[j];
+        state.swaps++;
+        j--;
+      } else {
+        break;
+      }
+    }
+    arr[j + 1] = key;
+    if (j + 1 !== i) {
+      state.swaps++; // Count the final placement as a swap
+    }
+  }
+}
+
+function* merge(arr, l, m, r, state) {
+  const len1 = m - l + 1;
+  const len2 = r - m;
+  const left = new Array(len1);
+  const right = new Array(len2);
+
+  for (let i = 0; i < len1; i++) left[i] = arr[l + i];
+  for (let i = 0; i < len2; i++) right[i] = arr[m + 1 + i];
+
+  let i = 0, j = 0, k = l;
+
+  while (i < len1 && j < len2) {
+    state.comparisons++;
+    yield {
+      type: "merge_compare",
+      payload: {
+        ...state,
+        array: [...arr],
+        compare: [l + i, m + 1 + j],
+        step: state.step++,
+      },
+    };
+
+    if (left[i] <= right[j]) {
+      arr[k] = left[i];
+      i++;
+    } else {
+      arr[k] = right[j];
+      j++;
+    }
+    state.swaps++; // A copy is conceptually similar to a swap/move
+    yield {
+      type: "merge_copy",
+      payload: {
+        ...state,
+        array: [...arr],
+        writeIndex: k,
+        step: state.step++,
+      },
+    };
+    k++;
+  }
+
+  while (i < len1) {
+    arr[k] = left[i];
+    state.swaps++;
+    yield {
+      type: "merge_copy",
+      payload: { ...state, array: [...arr], writeIndex: k, step: state.step++ },
+    };
+    i++;
+    k++;
+  }
+
+  while (j < len2) {
+    arr[k] = right[j];
+    state.swaps++;
+    yield {
+      type: "merge_copy",
+      payload: { ...state, array: [...arr], writeIndex: k, step: state.step++ },
+    };
+    j++;
+    k++;
+  }
+}
+
+export function* timSortGenerator(inputArray) {
+  const n = inputArray.length;
+  if (n === 0) return;
+
+  const arr = [...inputArray];
+  const state = {
+    comparisons: 0,
+    swaps: 0,
+    step: 0,
+    totalSteps: 0, // Will be estimated later
+  };
+
+  yield { type: "init", payload: { ...state, array: arr } };
+
+  const minRun = calcMinRun(n);
+  const runs = [];
+
+  // Phase 1: Find and sort initial runs
+  for (let i = 0; i < n; i += minRun) {
+    const end = Math.min(i + minRun - 1, n - 1);
+    const runIndices = Array.from({ length: end - i + 1 }, (_, k) => i + k);
+
+    yield {
+      type: "find_run",
+      payload: { ...state, array: [...arr], run: runIndices, step: state.step++ },
+    };
+
+    yield* insertionSort(arr, i, end, state);
+
+    runs.push({ start: i, len: end - i + 1 });
+    yield {
+      type: "push_run",
+      payload: { ...state, array: [...arr], runs: [...runs], step: state.step++ },
+    };
+  }
+
+  // Phase 2: Merge runs
+  let size = minRun;
+  while (size < n) {
+    for (let left = 0; left < n; left += 2 * size) {
+      const mid = left + size - 1;
+      const right = Math.min(left + 2 * size - 1, n - 1);
+
+      if (mid < right) {
+        const run1Indices = Array.from({ length: mid - left + 1 }, (_, i) => left + i);
+        const run2Indices = Array.from({ length: right - mid }, (_, i) => mid + 1 + i);
+        
+        yield {
+          type: "start_merge",
+          payload: { ...state, array: [...arr], run1: run1Indices, run2: run2Indices, step: state.step++ },
+        };
+
+        yield* merge(arr, left, mid, right, state);
+
+        yield {
+            type: "merge_complete",
+            payload: { ...state, array: [...arr], step: state.step++ },
+        };
+      }
+    }
+    size *= 2;
+  }
+
+  yield { type: "completed", payload: { ...state, array: [...arr], step: state.step++ } };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/array/twoPointersLogic.js b/src/features/algorithms/array/twoPointersLogic.js
new file mode 100644
index 000000000..d893757f7
--- /dev/null
+++ b/src/features/algorithms/array/twoPointersLogic.js
@@ -0,0 +1,292 @@
+/**
+ * Pure generator functions for Two Pointers algorithms.
+ * Yields state objects representing pointer positions at each step.
+ * No async, no timers — timing and abort are handled by useAlgorithmPlayer.
+ */
+
+// ─── 1. Pair Sum (Sorted Array) ───────────────────────────────────────────────
+export function* generateStatesPairSum(arr, target) {
+  let left = 0;
+  let right = arr.length - 1;
+
+  yield {
+    left, right,
+    current: `arr[${left}] + arr[${right}] = ${arr[left]} + ${arr[right]}`,
+    best: 'Searching...',
+    explanation: `Initialize: left=${left} (${arr[left]}), right=${right} (${arr[right]}). Target: ${target}.`,
+    activePointers: [left, right]
+  };
+
+  while (left < right) {
+    const sum = arr[left] + arr[right];
+
+    yield {
+      left, right,
+      current: `${arr[left]} + ${arr[right]} = ${sum}`,
+      best: `Target: ${target}`,
+      explanation: `Checking arr[${left}] + arr[${right}] = ${arr[left]} + ${arr[right]} = ${sum}.`,
+      activePointers: [left, right]
+    };
+
+    if (sum === target) {
+      yield {
+        left, right,
+        current: `${arr[left]} + ${arr[right]} = ${sum}`,
+        best: `Found! Indices [${left}, ${right}]`,
+        explanation: `Pair found! arr[${left}] + arr[${right}] = ${sum} equals target ${target}.`,
+        activePointers: [left, right],
+        success: true,
+        done: true
+      };
+      return;
+    } else if (sum < target) {
+      yield {
+        left, right,
+        current: `${sum} < ${target}`,
+        best: 'Searching...',
+        explanation: `Sum ${sum} < target ${target}. Move left pointer right to increase sum.`,
+        activePointers: [left, right],
+        movingLeft: true
+      };
+      left++;
+    } else {
+      yield {
+        left, right,
+        current: `${sum} > ${target}`,
+        best: 'Searching...',
+        explanation: `Sum ${sum} > target ${target}. Move right pointer left to decrease sum.`,
+        activePointers: [left, right],
+        movingRight: true
+      };
+      right--;
+    }
+  }
+
+  yield {
+    left, right,
+    current: 'No pair found',
+    best: 'Not found',
+    explanation: `Pointers crossed. No pair with sum ${target} exists in the array.`,
+    activePointers: [left, right],
+    done: true
+  };
+}
+
+// ─── 2. Remove Duplicates (Sorted Array) ─────────────────────────────────────
+export function* generateStatesRemoveDuplicates(arr) {
+  if (arr.length === 0) return;
+
+  let slow = 0;
+
+  yield {
+    left: slow, right: 1,
+    current: `slow=${slow}, fast=1`,
+    best: 'Unique count: 1',
+    explanation: `Initialize: slow pointer at index 0 (${arr[0]}). Fast pointer will scan ahead.`,
+    activePointers: [slow, 1]
+  };
+
+  for (let fast = 1; fast < arr.length; fast++) {
+    yield {
+      left: slow, right: fast,
+      current: `arr[slow]=${arr[slow]}, arr[fast]=${arr[fast]}`,
+      best: `Unique count: ${slow + 1}`,
+      explanation: `Fast pointer at index ${fast} (${arr[fast]}). Comparing with slow at index ${slow} (${arr[slow]}).`,
+      activePointers: [slow, fast]
+    };
+
+    if (arr[fast] !== arr[slow]) {
+      slow++;
+      yield {
+        left: slow, right: fast,
+        current: `New unique: ${arr[fast]}`,
+        best: `Unique count: ${slow + 1}`,
+        explanation: `${arr[fast]} != ${arr[slow - 1]}. New unique element! Move slow to ${slow}, copy ${arr[fast]}.`,
+        activePointers: [slow, fast],
+        success: true
+      };
+    } else {
+      yield {
+        left: slow, right: fast,
+        current: `Duplicate: ${arr[fast]}`,
+        best: `Unique count: ${slow + 1}`,
+        explanation: `${arr[fast]} = ${arr[slow]}. Duplicate found. Skip — fast pointer advances.`,
+        activePointers: [slow, fast],
+        violation: true
+      };
+    }
+  }
+
+  yield {
+    left: slow, right: arr.length - 1,
+    current: 'Done',
+    best: `Unique count: ${slow + 1}`,
+    explanation: `Finished. Array has ${slow + 1} unique elements.`,
+    activePointers: [slow, arr.length - 1],
+    done: true
+  };
+}
+
+// ─── 3. Container With Most Water ────────────────────────────────────────────
+export function* generateStatesContainerWater(arr) {
+  let left = 0;
+  let right = arr.length - 1;
+  let maxWater = 0;
+
+  yield {
+    left, right,
+    current: `height[${left}]=${arr[left]}, height[${right}]=${arr[right]}`,
+    best: 'Max water: 0',
+    explanation: `Initialize: left=${left}, right=${right}. Calculate area at each step.`,
+    activePointers: [left, right]
+  };
+
+  while (left < right) {
+    const width = right - left;
+    const height = Math.min(arr[left], arr[right]);
+    const water = width * height;
+    const updated = water > maxWater;
+    maxWater = Math.max(maxWater, water);
+
+    yield {
+      left, right,
+      current: `width=${width} x height=${height} = ${water}`,
+      best: `Max water: ${maxWater}`,
+      explanation: `Area = min(${arr[left]}, ${arr[right]}) x (${right} - ${left}) = ${height} x ${width} = ${water}.${updated ? ' New maximum!' : ''}`,
+      activePointers: [left, right],
+      success: updated
+    };
+
+    if (arr[left] < arr[right]) {
+      yield {
+        left, right,
+        current: `arr[left]=${arr[left]} < arr[right]=${arr[right]}`,
+        best: `Max water: ${maxWater}`,
+        explanation: `Left height (${arr[left]}) is smaller. Move left pointer right to find taller line.`,
+        activePointers: [left, right],
+        movingLeft: true
+      };
+      left++;
+    } else {
+      yield {
+        left, right,
+        current: `arr[right]=${arr[right]} <= arr[left]=${arr[left]}`,
+        best: `Max water: ${maxWater}`,
+        explanation: `Right height (${arr[right]}) is smaller or equal. Move right pointer left to find taller line.`,
+        activePointers: [left, right],
+        movingRight: true
+      };
+      right--;
+    }
+  }
+
+  yield {
+    left, right,
+    current: 'Pointers met',
+    best: `Max water: ${maxWater}`,
+    explanation: `Finished. Maximum water container holds ${maxWater} units.`,
+    activePointers: [left, right],
+    done: true
+  };
+}
+
+// ─── 4. Three Sum ────────────────────────────────────────────────────────────
+export function* generateStatesThreeSum(arr) {
+  const sorted = [...arr].sort((a, b) => a - b);
+  const result = [];
+
+  yield {
+    left: 0, right: sorted.length - 1,
+    current: `Sorted: [${sorted.join(', ')}]`,
+    best: 'Triplets found: 0',
+    explanation: `Sort array first: [${sorted.join(', ')}]. Fix one element, use two pointers for the rest.`,
+    activePointers: [0, sorted.length - 1],
+    fixedIndex: -1
+  };
+
+  for (let i = 0; i < sorted.length - 2; i++) {
+    if (i > 0 && sorted[i] === sorted[i - 1]) {
+      yield {
+        left: i + 1, right: sorted.length - 1,
+        current: `Skip duplicate: ${sorted[i]}`,
+        best: `Triplets: [${result.map(t => `[${t}]`).join(', ')}]`,
+        explanation: `sorted[${i}]=${sorted[i]} is duplicate of previous. Skip to avoid duplicate triplets.`,
+        activePointers: [i + 1, sorted.length - 1],
+        fixedIndex: i,
+        violation: true
+      };
+      continue;
+    }
+
+    let left = i + 1;
+    let right = sorted.length - 1;
+
+    yield {
+      left, right,
+      current: `Fixed: ${sorted[i]}`,
+      best: `Triplets: ${result.length}`,
+      explanation: `Fix sorted[${i}]=${sorted[i]}. Two pointers: left=${left}, right=${right}.`,
+      activePointers: [left, right],
+      fixedIndex: i
+    };
+
+    while (left < right) {
+      const sum = sorted[i] + sorted[left] + sorted[right];
+
+      yield {
+        left, right,
+        current: `${sorted[i]} + ${sorted[left]} + ${sorted[right]} = ${sum}`,
+        best: `Triplets: ${result.length}`,
+        explanation: `Sum = ${sorted[i]} + ${sorted[left]} + ${sorted[right]} = ${sum}. Target: 0.`,
+        activePointers: [left, right],
+        fixedIndex: i
+      };
+
+      if (sum === 0) {
+        result.push([sorted[i], sorted[left], sorted[right]]);
+        yield {
+          left, right,
+          current: `Triplet: [${sorted[i]}, ${sorted[left]}, ${sorted[right]}]`,
+          best: `Triplets: [${result.map(t => `[${t}]`).join(', ')}]`,
+          explanation: `Triplet found: [${sorted[i]}, ${sorted[left]}, ${sorted[right]}]!`,
+          activePointers: [left, right],
+          fixedIndex: i,
+          success: true
+        };
+        left++;
+        right--;
+      } else if (sum < 0) {
+        yield {
+          left, right,
+          current: `${sum} < 0`,
+          best: `Triplets: ${result.length}`,
+          explanation: `Sum ${sum} < 0. Move left pointer right to increase sum.`,
+          activePointers: [left, right],
+          fixedIndex: i,
+          movingLeft: true
+        };
+        left++;
+      } else {
+        yield {
+          left, right,
+          current: `${sum} > 0`,
+          best: `Triplets: ${result.length}`,
+          explanation: `Sum ${sum} > 0. Move right pointer left to decrease sum.`,
+          activePointers: [left, right],
+          fixedIndex: i,
+          movingRight: true
+        };
+        right--;
+      }
+    }
+  }
+
+  yield {
+    left: 0, right: sorted.length - 1,
+    current: 'Done',
+    best: `Triplets: [${result.map(t => `[${t}]`).join(', ')}]`,
+    explanation: `Finished. Found ${result.length} unique triplet(s) that sum to zero.`,
+    activePointers: [0, sorted.length - 1],
+    done: true
+  };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/complexity/complexityVisualizerLogic.js b/src/features/algorithms/complexity/complexityVisualizerLogic.js
new file mode 100644
index 000000000..4c317bd22
--- /dev/null
+++ b/src/features/algorithms/complexity/complexityVisualizerLogic.js
@@ -0,0 +1,56 @@
+export const ALGORITHMS = {
+  "Bubble Sort": {
+    label: "Bubble Sort",
+    complexity: "O(n²)",
+    color: "#f87171",
+    getOps: (n) => (n * (n - 1)) / 2,
+  },
+  "Selection Sort": {
+    label: "Selection Sort",
+    complexity: "O(n²)",
+    color: "#fb923c",
+    getOps: (n) => (n * (n - 1)) / 2,
+  },
+  "Insertion Sort": {
+    label: "Insertion Sort",
+    complexity: "O(n²)",
+    color: "#facc15",
+    getOps: (n) => (n * (n - 1)) / 4,
+  },
+  "Merge Sort": {
+    label: "Merge Sort",
+    complexity: "O(n log n)",
+    color: "#34d399",
+    getOps: (n) => n * Math.log2(n || 1),
+  },
+  "Quick Sort": {
+    label: "Quick Sort",
+    complexity: "O(n log n)",
+    color: "#22d3ee",
+    getOps: (n) => n * Math.log2(n || 1),
+  },
+  "Binary Search": {
+    label: "Binary Search",
+    complexity: "O(log n)",
+    color: "#818cf8",
+    getOps: (n) => Math.log2(n || 1),
+  },
+  "Linear Search": {
+    label: "Linear Search",
+    complexity: "O(n)",
+    color: "#e879f9",
+    getOps: (n) => n,
+  },
+};
+
+export const REFERENCE_CURVES = [
+  { label: "O(1)",       color: "#94a3b8", getOps: ()  => 1 },
+  { label: "O(log n)",   color: "#818cf8", getOps: (n) => Math.log2(n || 1) },
+  { label: "O(n)",       color: "#34d399", getOps: (n) => n },
+  { label: "O(n log n)", color: "#fbbf24", getOps: (n) => n * Math.log2(n || 1) },
+  { label: "O(n²)",      color: "#f87171", getOps: (n) => n * n },
+];
+
+export function generatePoints(getOps, nValues) {
+  return nValues.map((n) => ({ n, ops: getOps(n) }));
+}
\ No newline at end of file
diff --git a/src/features/algorithms/dp/coinChangeLogic.js b/src/features/algorithms/dp/coinChangeLogic.js
new file mode 100644
index 000000000..392138ff6
--- /dev/null
+++ b/src/features/algorithms/dp/coinChangeLogic.js
@@ -0,0 +1,50 @@
+export function* coinChangeGenerator(coins, amount) {
+  const dp = Array(amount + 1).fill(Infinity);
+  dp[0] = 0;
+
+  yield {
+    dp: [...dp],
+    index: -1,
+    description: `Initialize dp array of size ${amount + 1}. dp[0]=0, others=Infinity. dp[i] = min coins to make amount i.`
+  };
+
+  for (let i = 1; i <= amount; i++) {
+    for (let coin of coins) {
+      if (i - coin >= 0) {
+        let prev = dp[i];
+        let potential = dp[i - coin] !== Infinity ? dp[i - coin] + 1 : Infinity;
+        
+        let description = `For amount ${i}, trying coin ${coin}. `;
+        if (potential < prev) {
+          dp[i] = potential;
+          description += `Found better way: dp[${i - coin}] + 1 = ${dp[i]}.`;
+        } else {
+          description += `Current dp[${i}]=${prev === Infinity ? 'Infinity' : prev} is better than or equal to ${potential === Infinity ? 'Infinity' : potential}.`;
+        }
+
+        yield {
+          dp: [...dp],
+          index: i,
+          currentCoin: coin,
+          description
+        };
+      } else {
+          yield {
+            dp: [...dp],
+            index: i,
+            currentCoin: coin,
+            description: `For amount ${i}, coin ${coin} is too large. Skip.`
+          }
+      }
+    }
+  }
+
+  yield {
+    dp: [...dp],
+    index: amount,
+    description: dp[amount] === Infinity 
+      ? `Cannot make amount ${amount} with given coins.`
+      : `Done! Minimum coins needed for ${amount} is ${dp[amount]}.`,
+    isComplete: true
+  };
+}
diff --git a/src/features/algorithms/dp/knapsackLogic.js b/src/features/algorithms/dp/knapsackLogic.js
new file mode 100644
index 000000000..5e15fdea1
--- /dev/null
+++ b/src/features/algorithms/dp/knapsackLogic.js
@@ -0,0 +1,50 @@
+export function* knapsackGenerator(weights, values, capacity) {
+  const n = weights.length;
+  // Initialize DP table: dp[i][w]
+  const dp = Array(n + 1).fill(0).map(() => Array(capacity + 1).fill(0));
+  
+  yield {
+    dp: dp.map(row => [...row]),
+    row: -1,
+    col: -1,
+    description: `Initialize a DP table of size ${(n + 1)} x ${(capacity + 1)} with 0s. dp[i][w] will store the maximum value for first i items with weight limit w.`,
+  };
+
+  for (let i = 1; i <= n; i++) {
+    for (let w = 0; w <= capacity; w++) {
+      const currentWeight = weights[i - 1];
+      const currentValue = values[i - 1];
+      
+      let description = `Evaluating item ${i} (Weight: ${currentWeight}, Value: ${currentValue}) for capacity ${w}. `;
+      
+      if (currentWeight <= w) {
+        const includeValue = currentValue + dp[i - 1][w - currentWeight];
+        const excludeValue = dp[i - 1][w];
+        
+        dp[i][w] = Math.max(includeValue, excludeValue);
+        
+        description += `We can include it. Max(exclude: ${excludeValue}, include: ${currentValue} + dp[${i-1}][${w - currentWeight}]) = ${dp[i][w]}.`;
+      } else {
+        dp[i][w] = dp[i - 1][w];
+        description += `Weight ${currentWeight} > capacity ${w}. Cannot include. Copy from above: dp[${i}][${w}] = ${dp[i][w]}.`;
+      }
+      
+      yield {
+        dp: dp.map(row => [...row]),
+        row: i,
+        col: w,
+        description,
+        currentItem: i,
+        currentCap: w
+      };
+    }
+  }
+
+  yield {
+    dp: dp.map(row => [...row]),
+    row: n,
+    col: capacity,
+    description: `Done! The maximum value is dp[${n}][${capacity}] = ${dp[n][capacity]}.`,
+    isComplete: true
+  };
+}
diff --git a/src/features/algorithms/dp/lcsLogic.js b/src/features/algorithms/dp/lcsLogic.js
new file mode 100644
index 000000000..6c8e5f26b
--- /dev/null
+++ b/src/features/algorithms/dp/lcsLogic.js
@@ -0,0 +1,41 @@
+export function* lcsGenerator(str1, str2) {
+  const n = str1.length;
+  const m = str2.length;
+  const dp = Array(n + 1).fill(0).map(() => Array(m + 1).fill(0));
+
+  yield {
+    dp: dp.map(row => [...row]),
+    row: -1, col: -1,
+    description: `Initialize DP table of size ${n+1} x ${m+1} with 0s. dp[i][j] = LCS length of str1[0..i-1] and str2[0..j-1].`
+  };
+
+  for (let i = 1; i <= n; i++) {
+    for (let j = 1; j <= m; j++) {
+      let description = `Comparing str1[${i-1}]='${str1[i-1]}' and str2[${j-1}]='${str2[j-1]}'. `;
+      if (str1[i - 1] === str2[j - 1]) {
+        dp[i][j] = dp[i - 1][j - 1] + 1;
+        description += `Match! dp[${i}][${j}] = dp[${i-1}][${j-1}] + 1 = ${dp[i][j]}.`;
+      } else {
+        dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+        description += `Mismatch. dp[${i}][${j}] = Max(dp[${i-1}][${j}], dp[${i}][${j-1}]) = ${dp[i][j]}.`;
+      }
+      
+      yield {
+        dp: dp.map(row => [...row]),
+        row: i,
+        col: j,
+        description,
+        char1: str1[i-1],
+        char2: str2[j-1]
+      };
+    }
+  }
+
+  yield {
+    dp: dp.map(row => [...row]),
+    row: n,
+    col: m,
+    description: `Done! The length of LCS is dp[${n}][${m}] = ${dp[n][m]}.`,
+    isComplete: true
+  };
+}
diff --git a/src/features/algorithms/graph/aStarLogic.js b/src/features/algorithms/graph/aStarLogic.js
new file mode 100644
index 000000000..ee0a382de
--- /dev/null
+++ b/src/features/algorithms/graph/aStarLogic.js
@@ -0,0 +1,175 @@
+/**
+ * Pure generator logic for A* Search Algorithm
+ */
+
+export function* aStarGenerator(nodeList, edgeList, startNode, goalNode) {
+  if (!startNode || !goalNode || startNode === goalNode) return;
+
+  // Build position map and weighted adjacency list (directed)
+  const pos = {};
+  nodeList.forEach((n) => { pos[n.id] = { x: n.x, y: n.y }; });
+
+  const adj = {};
+  nodeList.forEach((n) => { adj[n.id] = []; });
+  edgeList.forEach((e) => {
+    adj[e.from] = adj[e.from] || [];
+    adj[e.from].push({ node: e.to, weight: Number(e.weight) || 1 });
+  });
+
+  const heuristic = (a, b) => {
+    const pa = pos[a];
+    const pb = pos[b];
+    if (!pa || !pb) return 0;
+    return Math.sqrt(Math.pow(pa.x - pb.x, 2) + Math.pow(pa.y - pb.y, 2));
+  };
+
+  const gScore = {};
+  const fScore = {};
+  const cameFrom = {};
+  nodeList.forEach((n) => {
+    gScore[n.id] = Infinity;
+    fScore[n.id] = Infinity;
+  });
+  gScore[startNode] = 0;
+  fScore[startNode] = heuristic(startNode, goalNode);
+
+  const openSet = new Set([startNode]);
+  const closedSet = new Set();
+
+  const reconstructPath = (current) => {
+    const path = [current];
+    let c = current;
+    while (cameFrom[c]) {
+      c = cameFrom[c];
+      path.unshift(c);
+    }
+    return path;
+  };
+
+  const cloneScores = () => ({
+    gScore: { ...gScore },
+    fScore: { ...fScore },
+  });
+
+  // State maps to distances in UI
+  const buildDistances = () => {
+    const d = {};
+    for (const k in gScore) {
+      d[k] = gScore[k] === Infinity ? Infinity : Number(gScore[k].toFixed(1));
+    }
+    return d;
+  };
+
+  yield {
+    visitedNodes: new Set(closedSet),
+    visitingNodes: new Set(openSet),
+    currentNode: startNode,
+    path: [],
+    distances: buildDistances(),
+    activeEdge: null,
+    phase: "searching",
+    goalNode,
+    description: `A* initialized. Start: ${startNode}, Goal: ${goalNode}. g(${startNode})=0, f(${startNode})=${fScore[startNode].toFixed(1)}`,
+    line: 5,
+  };
+
+  while (openSet.size > 0) {
+    // Pick node with lowest fScore in open set
+    let current = null;
+    let lowestF = Infinity;
+    for (const n of openSet) {
+      if (fScore[n] < lowestF) {
+        lowestF = fScore[n];
+        current = n;
+      }
+    }
+
+    if (current === goalNode) {
+      const finalPath = reconstructPath(current);
+      yield {
+        visitedNodes: new Set(closedSet),
+        visitingNodes: new Set(openSet),
+        currentNode: current,
+        path: finalPath,
+        distances: buildDistances(),
+        activeEdge: null,
+        phase: "found",
+        goalNode,
+        result: finalPath,
+        description: `Goal ${goalNode} reached! Path: ${finalPath.join(" → ")} (cost: ${gScore[goalNode].toFixed(1)})`,
+        line: 8,
+      };
+      return;
+    }
+
+    openSet.delete(current);
+    closedSet.add(current);
+
+    yield {
+      visitedNodes: new Set(closedSet),
+      visitingNodes: new Set(openSet),
+      currentNode: current,
+      path: reconstructPath(current),
+      distances: buildDistances(),
+      activeEdge: null,
+      phase: "searching",
+      goalNode,
+      description: `Expanding node ${current} (f=${fScore[current].toFixed(1)})`,
+      line: 7,
+    };
+
+    const neighbors = adj[current] || [];
+    for (const { node: neighbor, weight } of neighbors) {
+      if (closedSet.has(neighbor)) continue;
+
+      const tentativeG = gScore[current] + weight;
+
+      yield {
+        visitedNodes: new Set(closedSet),
+        visitingNodes: new Set(openSet),
+        currentNode: current,
+        path: reconstructPath(current),
+        distances: buildDistances(),
+        activeEdge: { from: current, to: neighbor },
+        phase: "searching",
+        goalNode,
+        description: `Checking edge ${current} → ${neighbor} (weight: ${weight}, tentative g: ${tentativeG.toFixed(1)})`,
+        line: 9,
+      };
+
+      if (tentativeG < gScore[neighbor]) {
+        cameFrom[neighbor] = current;
+        gScore[neighbor] = tentativeG;
+        fScore[neighbor] = tentativeG + heuristic(neighbor, goalNode);
+        openSet.add(neighbor);
+
+        yield {
+          visitedNodes: new Set(closedSet),
+          visitingNodes: new Set(openSet),
+          currentNode: current,
+          path: reconstructPath(current),
+          distances: buildDistances(),
+          activeEdge: { from: current, to: neighbor },
+          phase: "searching",
+          goalNode,
+          description: `Updated ${neighbor}: g=${gScore[neighbor].toFixed(1)}, h=${heuristic(neighbor, goalNode).toFixed(1)}, f=${fScore[neighbor].toFixed(1)}`,
+          line: 11,
+        };
+      }
+    }
+  }
+
+  // No path found
+  yield {
+    visitedNodes: new Set(closedSet),
+    visitingNodes: new Set(),
+    currentNode: null,
+    path: [],
+    distances: buildDistances(),
+    activeEdge: null,
+    phase: "no_path",
+    goalNode,
+    description: `Target ${goalNode} is unreachable (disconnected graph).`,
+    line: 6,
+  };
+}
diff --git a/src/features/algorithms/graph/adjacencyListLogic.js b/src/features/algorithms/graph/adjacencyListLogic.js
new file mode 100644
index 000000000..a23a1a22a
--- /dev/null
+++ b/src/features/algorithms/graph/adjacencyListLogic.js
@@ -0,0 +1,42 @@
+/**
+ * Adjacency List Generator
+ * @param {Array} nodes - All nodes
+ * @param {Array} edges - All edges
+ */
+export function* adjacencyListGenerator(nodes, edges) {
+  yield {
+    visitedNodes: new Set(),
+    visitingNodes: new Set(),
+    activeEdge: null,
+    description: "Initializing Adjacency List: creating empty lists for each vertex.",
+  };
+
+  for (const node of nodes) {
+    const neighbors = edges
+      .filter(e => e.from === node.id || (!e.directed && e.to === node.id))
+      .map(e => ({ to: e.from === node.id ? e.to : e.from, edge: e }));
+
+    yield {
+      visitedNodes: new Set(),
+      visitingNodes: new Set([node.id]),
+      activeEdge: null,
+      description: `Building list for Node ${node.label || node.id}.`,
+    };
+
+    for (const { to, edge } of neighbors) {
+      yield {
+        visitedNodes: new Set(),
+        visitingNodes: new Set([node.id, to]),
+        activeEdge: { from: edge.from, to: edge.to },
+        description: `Adding neighbor ${to} to Node ${node.label || node.id}'s list.`,
+      };
+    }
+  }
+
+  yield {
+    visitedNodes: new Set(),
+    visitingNodes: new Set(),
+    activeEdge: null,
+    description: "Adjacency List construction complete.",
+  };
+}
diff --git a/src/features/algorithms/graph/adjacencyMatrixLogic.js b/src/features/algorithms/graph/adjacencyMatrixLogic.js
new file mode 100644
index 000000000..0104905b6
--- /dev/null
+++ b/src/features/algorithms/graph/adjacencyMatrixLogic.js
@@ -0,0 +1,43 @@
+/**
+ * Adjacency Matrix Generator
+ * @param {Array} nodes - All nodes
+ * @param {Array} edges - All edges
+ */
+export function* adjacencyMatrixGenerator(nodes, edges) {
+  yield {
+    visitedNodes: new Set(),
+    visitingNodes: new Set(),
+    activeEdge: null,
+    description: "Initializing Adjacency Matrix: creating V x V grid.",
+  };
+
+  for (const row of nodes) {
+    yield {
+      visitedNodes: new Set(),
+      visitingNodes: new Set([row.id]),
+      activeEdge: null,
+      description: `Checking connections for Node ${row.label || row.id} (Row ${row.label || row.id}).`,
+    };
+
+    for (const col of nodes) {
+      const edge = edges.find(e => 
+        (e.from === row.id && e.to === col.id) || 
+        (!e.directed && ((e.from === row.id && e.to === col.id) || (e.from === col.id && e.to === row.id)))
+      );
+
+      yield {
+        visitedNodes: new Set(),
+        visitingNodes: new Set([row.id, col.id]),
+        activeEdge: edge ? { from: edge.from, to: edge.to } : null,
+        description: `Checking connection between ${row.label || row.id} and ${col.label || col.id}: ${edge ? "Edge found" : "No edge"}.`,
+      };
+    }
+  }
+
+  yield {
+    visitedNodes: new Set(),
+    visitingNodes: new Set(),
+    activeEdge: null,
+    description: "Adjacency Matrix construction complete.",
+  };
+}
diff --git a/src/features/algorithms/graph/bellmanFordLogic.js b/src/features/algorithms/graph/bellmanFordLogic.js
new file mode 100644
index 000000000..dab652039
--- /dev/null
+++ b/src/features/algorithms/graph/bellmanFordLogic.js
@@ -0,0 +1,118 @@
+/**
+ * Pure generator logic for Bellman-Ford Algorithm
+ */
+
+export function* bellmanFordGenerator(nodes, edges, startNode) {
+  if (!startNode || nodes.length === 0) return;
+
+  const nodeIds = nodes.map((n) => n.id);
+  const distances = {};
+  nodeIds.forEach((id) => { distances[id] = id === startNode ? 0 : Infinity; });
+
+  yield {
+    visitedNodes: new Set(),
+    visitingNodes: new Set([startNode]),
+    activeEdge: null,
+    distances: { ...distances },
+    updatedNode: null,
+    phase: "relaxing",
+    negativeCycle: false,
+    description: `Initialize: distance to ${startNode} = 0, all others = ∞`,
+      line: 0,
+  };
+
+  const V = nodeIds.length;
+
+  for (let pass = 1; pass <= V - 1; pass++) {
+    let anyUpdate = false;
+    for (const edge of edges) {
+      const { from, to, weight } = edge;
+      const w = Number(weight) || 0;
+      
+      yield {
+        visitedNodes: new Set(),
+        visitingNodes: new Set([from, to]),
+        activeEdge: { from, to },
+        distances: { ...distances },
+        updatedNode: null,
+        phase: "relaxing",
+        negativeCycle: false,
+        description: `Pass ${pass}: checking edge ${from} → ${to} (weight: ${w})`,
+      line: 0,
+      };
+      
+      if (distances[from] !== Infinity && distances[from] + w < distances[to]) {
+        distances[to] = distances[from] + w;
+        anyUpdate = true;
+        
+        yield {
+          visitedNodes: new Set(),
+          visitingNodes: new Set([from, to]),
+          activeEdge: { from, to },
+          distances: { ...distances },
+          updatedNode: to,
+          phase: "relaxing",
+          negativeCycle: false,
+          description: `Relaxed! dist[${to}] updated to ${distances[to]} via ${from}`,
+      line: 0,
+        };
+      }
+    }
+    if (!anyUpdate) {
+      yield { 
+        visitedNodes: new Set(nodeIds), 
+        visitingNodes: new Set(), 
+        activeEdge: null, 
+        distances: { ...distances }, 
+        updatedNode: null, 
+        phase: "done", 
+        negativeCycle: false, 
+        description: `Early termination after pass ${pass} — shortest paths found.` 
+      };
+      return;
+    }
+  }
+
+  let negativeCycle = false;
+  for (const edge of edges) {
+    const { from, to, weight } = edge;
+    const w = Number(weight) || 0;
+    
+    yield { 
+      visitedNodes: new Set(), 
+      visitingNodes: new Set([from, to]), 
+      activeEdge: { from, to }, 
+      distances: { ...distances }, 
+      updatedNode: null, 
+      phase: "detecting", 
+      negativeCycle: false, 
+      description: `Negative cycle check: edge ${from} → ${to}` 
+    };
+    
+    if (distances[from] !== Infinity && distances[from] + w < distances[to]) {
+      negativeCycle = true;
+      yield { 
+        visitedNodes: new Set(), 
+        visitingNodes: new Set([from, to]), 
+        activeEdge: { from, to }, 
+        distances: { ...distances }, 
+        updatedNode: to, 
+        phase: "detecting", 
+        negativeCycle: true, 
+        description: `⚠️ Negative cycle detected! Edge ${from} → ${to} still improves distance.` 
+      };
+      break;
+    }
+  }
+
+  yield { 
+    visitedNodes: new Set(nodeIds), 
+    visitingNodes: new Set(), 
+    activeEdge: null, 
+    distances: { ...distances }, 
+    updatedNode: null, 
+    phase: "done", 
+    negativeCycle, 
+    description: negativeCycle ? "⚠️ Bellman-Ford complete — Negative cycle detected!" : "✅ Bellman-Ford complete — Shortest paths found." 
+  };
+}
diff --git a/src/features/algorithms/graph/bfsLogic.js b/src/features/algorithms/graph/bfsLogic.js
new file mode 100644
index 000000000..a85bee874
--- /dev/null
+++ b/src/features/algorithms/graph/bfsLogic.js
@@ -0,0 +1,90 @@
+/**
+ * Pure generator logic for Breadth-First Search (BFS)
+ */
+
+export function* bfsGenerator(adj, startNode) {
+  if (!startNode || !adj[startNode]) return;
+
+  const visited = new Set();
+  const queue = [startNode];
+  visited.add(startNode);
+
+  yield {
+    visitedNodes: new Set(),
+    visitingNodes: new Set([startNode]),
+    activeEdge: null,
+    queue: [...queue],
+    currentNode: startNode,
+    description: `Starting BFS from node ${startNode}`,
+    line: 0,
+  };
+
+  while (queue.length > 0) {
+    const u = queue.shift();
+    
+    yield {
+      visitedNodes: new Set(visited),
+      visitingNodes: new Set([u]),
+      activeEdge: null,
+      queue: [...queue],
+      currentNode: u,
+      description: `Exploring neighbors of node ${u}`,
+      line: 5,
+    };
+
+    const neighbors = adj[u] || [];
+    for (const v of neighbors) {
+      const neighborId = typeof v === 'object' ? v.node : v;
+      
+      if (!visited.has(neighborId)) {
+        yield {
+          visitedNodes: new Set(visited),
+          visitingNodes: new Set([u, neighborId]),
+          activeEdge: { from: u, to: neighborId },
+          queue: [...queue],
+          currentNode: u,
+          description: `Found unvisited neighbor ${neighborId}, adding to queue`,
+          line: 7,
+        };
+
+        visited.add(neighborId);
+        queue.push(neighborId);
+
+        yield {
+          visitedNodes: new Set(visited),
+          visitingNodes: new Set([u]),
+          activeEdge: null,
+          queue: [...queue],
+          currentNode: u,
+          description: `Node ${neighborId} is now in queue`,
+          line: 9,
+        };
+      }
+    }
+    
+    yield {
+      visitedNodes: new Set(visited),
+      visitingNodes: new Set(),
+      activeEdge: null,
+      queue: [...queue],
+      currentNode: u,
+      description: `Finished exploring node ${u}`,
+      line: 4,
+    };
+  }
+
+  const allNodesCount = Object.keys(adj).length;
+  const isDisconnected = visited.size < allNodesCount;
+
+  yield {
+    visitedNodes: new Set(visited),
+    visitingNodes: new Set(),
+    activeEdge: null,
+    queue: [],
+    currentNode: null,
+    description: isDisconnected 
+      ? `Queue exhausted. Graph is disconnected (${allNodesCount - visited.size} nodes unreachable).`
+      : `BFS traversal complete. All reachable nodes visited.`,
+    line: 12,
+  };
+}
diff --git a/src/features/algorithms/graph/dfsLogic.js b/src/features/algorithms/graph/dfsLogic.js
new file mode 100644
index 000000000..7bd105fd4
--- /dev/null
+++ b/src/features/algorithms/graph/dfsLogic.js
@@ -0,0 +1,62 @@
+/**
+ * Pure generator logic for Depth-First Search (DFS)
+ */
+
+export function* dfsGenerator(adj, startNode) {
+  if (!startNode || !adj[startNode]) return;
+
+  const visited = new Set();
+  const stack = [startNode];
+
+  function* runDFS(u, p = null) {
+    visited.add(u);
+    
+    yield {
+      visitedNodes: new Set(visited),
+      visitingNodes: new Set([u]),
+      activeEdge: p ? { from: p, to: u } : null,
+      stack: [...stack],
+      currentNode: u,
+      description: `Visiting node ${u}`,
+      line: 1,
+    };
+
+    const neighbors = adj[u] || [];
+    for (const v of neighbors) {
+      const neighborId = typeof v === 'object' ? v.node : v;
+      if (!visited.has(neighborId)) {
+        stack.push(neighborId);
+        yield* runDFS(neighborId, u);
+        
+        // Backtracking frame
+        yield {
+          visitedNodes: new Set(visited),
+          visitingNodes: new Set([u]),
+          activeEdge: null,
+          stack: [...stack],
+          currentNode: u,
+          description: `Backtracking to node ${u}`,
+          line: 5,
+        };
+      }
+    }
+    stack.pop();
+  }
+
+  yield* runDFS(startNode);
+  
+  const allNodesCount = Object.keys(adj).length;
+  const isDisconnected = visited.size < allNodesCount;
+
+  yield {
+    visitedNodes: new Set(visited),
+    visitingNodes: new Set(),
+    activeEdge: null,
+    stack: [...stack],
+    currentNode: null,
+    description: isDisconnected
+      ? `DFS traversal complete. Graph is disconnected (${allNodesCount - visited.size} nodes unreachable).`
+      : `DFS traversal complete. All reachable nodes visited.`,
+    line: 6,
+  };
+}
diff --git a/src/features/algorithms/graph/dijkstraLogic.js b/src/features/algorithms/graph/dijkstraLogic.js
new file mode 100644
index 000000000..eeec6172f
--- /dev/null
+++ b/src/features/algorithms/graph/dijkstraLogic.js
@@ -0,0 +1,116 @@
+/**
+ * Pure generator logic for Dijkstra's Algorithm
+ */
+
+export function* dijkstraGenerator(adj, startNode, targetNode = null) {
+  if (!startNode || !adj[startNode]) return;
+
+  const distances = {};
+  const visited = new Set();
+  const pq = [{ node: startNode, dist: 0 }];
+  
+  Object.keys(adj).forEach(node => {
+    distances[node] = Infinity;
+  });
+  distances[startNode] = 0;
+
+  yield {
+    visitedNodes: new Set(),
+    visitingNodes: new Set([startNode]),
+    activeEdge: null,
+    distances: { ...distances },
+    pq: [...pq],
+    currentNode: startNode,
+    description: `Initializing Dijkstra: start node ${startNode} distance set to 0`,
+    line: 3,
+  };
+
+  while (pq.length > 0) {
+    // Simple PQ: sort and shift
+    pq.sort((a, b) => a.dist - b.dist);
+    const { node: u, dist: d } = pq.shift();
+
+    if (visited.has(u)) continue;
+    visited.add(u);
+
+    yield {
+      visitedNodes: new Set(visited),
+      visitingNodes: new Set([u]),
+      activeEdge: null,
+      distances: { ...distances },
+      pq: [...pq],
+      currentNode: u,
+      description: `Processing node ${u} with current shortest distance ${d}`,
+      line: 6,
+    };
+
+    if (targetNode && String(u) === String(targetNode)) {
+      yield {
+        visitedNodes: new Set(visited),
+        visitingNodes: new Set(),
+        activeEdge: null,
+        distances: { ...distances },
+        pq: [...pq],
+        currentNode: u,
+        description: `Target node ${u} reached! Shortest path distance is ${d}.`,
+        line: 6,
+      };
+      return; // Early exit
+    }
+
+    const neighbors = adj[u] || [];
+    for (const edge of neighbors) {
+      const v = edge.node;
+      const weight = Number(edge.weight);
+
+      if (!visited.has(v)) {
+        const newDist = distances[u] + weight;
+        
+        yield {
+          visitedNodes: new Set(visited),
+          visitingNodes: new Set([u, v]),
+          activeEdge: { from: u, to: v },
+          distances: { ...distances },
+          pq: [...pq],
+          currentNode: u,
+          description: `Checking edge ${u} -> ${v} (weight: ${weight})`,
+          line: 8,
+        };
+
+        if (newDist < distances[v]) {
+          distances[v] = newDist;
+          pq.push({ node: v, dist: newDist });
+
+          yield {
+            visitedNodes: new Set(visited),
+            visitingNodes: new Set([u, v]),
+            activeEdge: { from: u, to: v },
+            distances: { ...distances },
+            pq: [...pq],
+            currentNode: u,
+            description: `Relaxed distance to ${v}: ${newDist}`,
+            line: 10,
+          };
+        }
+      }
+    }
+  }
+
+  const allNodesCount = Object.keys(adj).length;
+  const isDisconnected = visited.size < allNodesCount;
+
+  yield {
+    visitedNodes: new Set(visited),
+    visitingNodes: new Set(),
+    activeEdge: null,
+    distances: { ...distances },
+    pq: [],
+    currentNode: null,
+    description: (targetNode && !visited.has(targetNode))
+      ? `Target node ${targetNode} is unreachable (disconnected graph).`
+      : isDisconnected
+        ? `Queue exhausted. Graph is disconnected (${allNodesCount - visited.size} nodes unreachable).`
+        : `Dijkstra's algorithm complete`,
+    line: 5,
+  };
+}
diff --git a/src/features/algorithms/graph/floydWarshallLogic.js b/src/features/algorithms/graph/floydWarshallLogic.js
new file mode 100644
index 000000000..8166ecdf8
--- /dev/null
+++ b/src/features/algorithms/graph/floydWarshallLogic.js
@@ -0,0 +1,119 @@
+/**
+ * Pure generator logic for Floyd-Warshall Algorithm
+ */
+
+const formatDistance = (value) => (value === Infinity ? "Infinity" : value);
+
+export function* floydWarshallGenerator(nodes, edges) {
+  const ids = nodes.map((node) => node.id);
+  if (ids.length === 0) return;
+
+  const labels = Object.fromEntries(nodes.map((node) => [node.id, node.label || node.id]));
+  const dist = {};
+
+  ids.forEach((from) => {
+    dist[from] = {};
+    ids.forEach((to) => {
+      dist[from][to] = from === to ? 0 : Infinity;
+    });
+  });
+
+  const cloneMatrix = () =>
+    Object.fromEntries(ids.map((from) => [from, Object.fromEntries(ids.map((to) => [to, dist[from][to]]))]));
+
+  yield {
+    visitedNodes: new Set(),
+    visitingNodes: new Set(),
+    activeEdge: null,
+    matrix: cloneMatrix(),
+    matrixNodes: ids,
+    description: "Initialize the distance matrix with 0 on the diagonal and infinity elsewhere.",
+      line: 0,
+  };
+
+  for (const edge of edges) {
+    const weight = Number(edge.weight) || 0;
+    if (!dist[edge.from] || !(edge.to in dist[edge.from])) continue;
+    dist[edge.from][edge.to] = Math.min(dist[edge.from][edge.to], weight);
+    if (!edge.directed && dist[edge.to] && edge.from in dist[edge.to]) {
+      dist[edge.to][edge.from] = Math.min(dist[edge.to][edge.from], weight);
+    }
+
+    yield {
+      visitedNodes: new Set(),
+      visitingNodes: new Set([edge.from, edge.to]),
+      activeEdge: { from: edge.from, to: edge.to },
+      matrix: cloneMatrix(),
+      matrixNodes: ids,
+      row: edge.from,
+      col: edge.to,
+      description: `Set direct distance ${labels[edge.from]} → ${labels[edge.to]} to ${weight}.`,
+      line: 0,
+    };
+  }
+
+  for (const k of ids) {
+    yield {
+      visitedNodes: new Set(),
+      visitingNodes: new Set([k]),
+      activeEdge: null,
+      matrix: cloneMatrix(),
+      matrixNodes: ids,
+      intermediate: k,
+      description: `Allow ${labels[k]} as an intermediate vertex.`,
+      line: 0,
+    };
+
+    for (const i of ids) {
+      for (const j of ids) {
+        const viaK =
+          dist[i][k] === Infinity || dist[k][j] === Infinity
+            ? Infinity
+            : dist[i][k] + dist[k][j];
+        const current = dist[i][j];
+        const improves = viaK < current;
+
+        yield {
+          visitedNodes: new Set(),
+          visitingNodes: new Set([i, k, j]),
+          activeEdge: i !== k ? { from: i, to: k } : k !== j ? { from: k, to: j } : null,
+          matrix: cloneMatrix(),
+          matrixNodes: ids,
+          intermediate: k,
+          row: i,
+          col: j,
+          via: viaK,
+          description: `Check ${labels[i]} → ${labels[j]} through ${labels[k]}: ${formatDistance(current)} vs ${formatDistance(viaK)}.`,
+      line: 0,
+        };
+
+        if (improves) {
+          dist[i][j] = viaK;
+          yield {
+            visitedNodes: new Set(),
+            visitingNodes: new Set([i, k, j]),
+            activeEdge: k !== j ? { from: k, to: j } : null,
+            matrix: cloneMatrix(),
+            matrixNodes: ids,
+            intermediate: k,
+            row: i,
+            col: j,
+            updatedCell: { row: i, col: j },
+            description: `Update ${labels[i]} → ${labels[j]} to ${viaK} using ${labels[k]}.`,
+      line: 0,
+          };
+        }
+      }
+    }
+  }
+
+  yield {
+    visitedNodes: new Set(ids),
+    visitingNodes: new Set(),
+    activeEdge: null,
+    matrix: cloneMatrix(),
+    matrixNodes: ids,
+    description: "Floyd-Warshall complete. The matrix now contains all-pairs shortest paths.",
+      line: 0,
+  };
+}
diff --git a/src/features/algorithms/graph/fordFulkersonLogic.js b/src/features/algorithms/graph/fordFulkersonLogic.js
new file mode 100644
index 000000000..587d16328
--- /dev/null
+++ b/src/features/algorithms/graph/fordFulkersonLogic.js
@@ -0,0 +1,122 @@
+/**
+ * Pure generator logic for Ford-Fulkerson Algorithm (Edmonds-Karp using BFS)
+ */
+
+export function* fordFulkersonGenerator(nodes, edges, sourceNode, sinkNode) {
+  if (!sourceNode || !sinkNode) return;
+
+  const nodeMap = new Map(nodes.map(n => [n.id, n]));
+  const capacity = {};
+  const flow = {};
+  const adj = {};
+
+  nodes.forEach(n => {
+    capacity[n.id] = {};
+    flow[n.id] = {};
+    adj[n.id] = [];
+    nodes.forEach(m => {
+      capacity[n.id][m.id] = 0;
+      flow[n.id][m.id] = 0;
+    });
+  });
+
+  edges.forEach(e => {
+    // Treat the graph as a directed flow network
+    capacity[e.from][e.to] += (e.weight || 1);
+    
+    // Add forward and reverse edges to adjacency list for residual graph
+    if (!adj[e.from].includes(e.to)) adj[e.from].push(e.to);
+    if (!adj[e.to].includes(e.from)) adj[e.to].push(e.from);
+  });
+
+  let maxFlow = 0;
+  let pathsFound = 0;
+
+  yield {
+    visitedNodes: new Set(),
+    activePath: null,
+    flowData: { flow: JSON.parse(JSON.stringify(flow)), capacity: JSON.parse(JSON.stringify(capacity)) },
+    maxFlow,
+    description: `Initializing Ford-Fulkerson (Edmonds-Karp). Source: ${nodeMap.get(sourceNode)?.label || sourceNode}, Sink: ${nodeMap.get(sinkNode)?.label || sinkNode}`,
+      line: 0,
+  };
+
+  while (true) {
+    // BFS to find an augmenting path
+    const parent = {};
+    const visited = new Set([sourceNode]);
+    const queue = [sourceNode];
+    
+    let pathFound = false;
+
+    while (queue.length > 0 && !pathFound) {
+      const u = queue.shift();
+
+      for (const v of adj[u]) {
+        const residualCapacity = capacity[u][v] - flow[u][v];
+        if (!visited.has(v) && residualCapacity > 0) {
+          parent[v] = u;
+          visited.add(v);
+          queue.push(v);
+
+          if (v === sinkNode) {
+            pathFound = true;
+            break;
+          }
+        }
+      }
+    }
+
+    if (!pathFound) {
+      break;
+    }
+
+    // Path found, trace it back
+    let path = [];
+    let curr = sinkNode;
+    let minCapacity = Infinity;
+
+    while (curr !== sourceNode) {
+      const p = parent[curr];
+      path.unshift({ from: p, to: curr });
+      minCapacity = Math.min(minCapacity, capacity[p][curr] - flow[p][curr]);
+      curr = p;
+    }
+
+    yield {
+      visitedNodes: visited,
+      activePath: path,
+      flowData: { flow: JSON.parse(JSON.stringify(flow)), capacity: JSON.parse(JSON.stringify(capacity)) },
+      maxFlow,
+      description: `Found augmenting path with bottleneck capacity: ${minCapacity}`,
+      line: 0,
+    };
+
+    // Augment flow
+    for (const edge of path) {
+      flow[edge.from][edge.to] += minCapacity;
+      flow[edge.to][edge.from] -= minCapacity; // Residual flow
+    }
+
+    maxFlow += minCapacity;
+    pathsFound++;
+
+    yield {
+      visitedNodes: new Set(),
+      activePath: path,
+      flowData: { flow: JSON.parse(JSON.stringify(flow)), capacity: JSON.parse(JSON.stringify(capacity)) },
+      maxFlow,
+      description: `Augmented flow by ${minCapacity}. Current max flow is ${maxFlow}.`,
+      line: 0,
+    };
+  }
+
+  yield {
+    visitedNodes: new Set(),
+    activePath: null,
+    flowData: { flow, capacity },
+    maxFlow,
+    description: `No more augmenting paths. Algorithm complete. Maximum Flow = ${maxFlow} across ${pathsFound} paths.`,
+      line: 0,
+  };
+}
diff --git a/src/features/algorithms/graph/kosarajuLogic.js b/src/features/algorithms/graph/kosarajuLogic.js
new file mode 100644
index 000000000..eda06bc46
--- /dev/null
+++ b/src/features/algorithms/graph/kosarajuLogic.js
@@ -0,0 +1,173 @@
+/**
+ * Pure generator logic for Kosaraju's Algorithm (Strongly Connected Components)
+ */
+
+export function* kosarajuGenerator(adj, nodes) {
+  const nodeIds = nodes.map(n => n.id);
+  if (nodeIds.length === 0) return;
+
+  const stack = [];
+  const visited = new Set();
+  
+  // Phase 1: Standard DFS to fill the stack based on finishing times
+  yield {
+    visitedNodes: new Set(),
+    visitingNodes: new Set(),
+    activeEdge: null,
+    stack: [...stack],
+    sccs: [],
+    phase: "Pass 1: DFS",
+    description: "Phase 1: Run DFS to compute finishing times.",
+      line: 0,
+  };
+
+  function* dfs1(u) {
+    visited.add(u);
+    yield {
+      visitedNodes: new Set(visited),
+      visitingNodes: new Set([u]),
+      activeEdge: null,
+      stack: [...stack],
+      sccs: [],
+      phase: "Pass 1: DFS",
+      description: `Visiting node ${u}`,
+      line: 0,
+    };
+
+    const neighbors = adj[u] || [];
+    for (const v of neighbors) {
+      const neighborId = typeof v === 'object' ? v.node : v;
+      if (!visited.has(neighborId)) {
+        yield {
+          visitedNodes: new Set(visited),
+          visitingNodes: new Set([u, neighborId]),
+          activeEdge: { from: u, to: neighborId },
+          stack: [...stack],
+          sccs: [],
+          phase: "Pass 1: DFS",
+          description: `Traversing edge ${u} → ${neighborId}`,
+      line: 0,
+        };
+        yield* dfs1(neighborId);
+      }
+    }
+    stack.push(u);
+    yield {
+      visitedNodes: new Set(visited),
+      visitingNodes: new Set([u]),
+      activeEdge: null,
+      stack: [...stack],
+      sccs: [],
+      phase: "Pass 1: DFS",
+      description: `Finished ${u}, pushing to stack`,
+      line: 0,
+    };
+  }
+
+  for (const id of nodeIds) {
+    if (!visited.has(id)) {
+      yield* dfs1(id);
+    }
+  }
+
+  // Phase 2: Transpose the graph
+  const revAdj = {};
+  nodeIds.forEach(id => { revAdj[id] = []; });
+  
+  for (const u in adj) {
+    for (const v of adj[u]) {
+      const vId = typeof v === 'object' ? v.node : v;
+      revAdj[vId].push(u); // Reversing edge direction
+    }
+  }
+
+  yield {
+    visitedNodes: new Set(), // clear visited for phase 2
+    visitingNodes: new Set(),
+    activeEdge: null,
+    stack: [...stack],
+    sccs: [],
+    phase: "Pass 2: Transpose Graph",
+    description: "Graph edges transposed. Now popping from stack for Phase 2 DFS.",
+      line: 0,
+  };
+
+  visited.clear();
+  const sccs = [];
+
+  function* dfs2(u, currentScc) {
+    visited.add(u);
+    currentScc.push(u);
+    
+    yield {
+      visitedNodes: new Set(visited),
+      visitingNodes: new Set([u]),
+      activeEdge: null,
+      stack: [...stack],
+      sccs: [...sccs, [...currentScc]],
+      phase: "Pass 2: SCC DFS",
+      description: `Visiting ${u} in reversed graph, adding to current SCC`,
+      line: 0,
+    };
+
+    const neighbors = revAdj[u] || [];
+    for (const neighborId of neighbors) {
+      if (!visited.has(neighborId)) {
+        yield {
+          visitedNodes: new Set(visited),
+          visitingNodes: new Set([u, neighborId]),
+          activeEdge: { from: u, to: neighborId }, // active edge reversed intuitively
+          stack: [...stack],
+          sccs: [...sccs, [...currentScc]],
+          phase: "Pass 2: SCC DFS",
+          description: `Traversing reversed edge ${u} → ${neighborId}`,
+      line: 0,
+        };
+        yield* dfs2(neighborId, currentScc);
+      }
+    }
+  }
+
+  while (stack.length > 0) {
+    const u = stack.pop();
+    
+    yield {
+      visitedNodes: new Set(visited),
+      visitingNodes: new Set([u]),
+      activeEdge: null,
+      stack: [...stack],
+      sccs: [...sccs],
+      phase: "Pass 2: Pop Stack",
+      description: `Popped ${u} from stack`,
+      line: 0,
+    };
+
+    if (!visited.has(u)) {
+      const currentScc = [];
+      yield* dfs2(u, currentScc);
+      sccs.push(currentScc);
+      
+      yield {
+        visitedNodes: new Set(visited),
+        visitingNodes: new Set(),
+        activeEdge: null,
+        stack: [...stack],
+        sccs: [...sccs],
+        phase: "Pass 2: SCC Found",
+        description: `Found SCC: [${currentScc.join(', ')}]`,
+      line: 0,
+      };
+    }
+  }
+
+  yield {
+    visitedNodes: new Set(visited),
+    visitingNodes: new Set(),
+    activeEdge: null,
+    stack: [],
+    sccs: [...sccs],
+    phase: "Done",
+    description: `Kosaraju's algorithm complete. Found ${sccs.length} SCCs.`,
+      line: 0,
+  };
+}
diff --git a/src/features/algorithms/graph/kruskalLogic.js b/src/features/algorithms/graph/kruskalLogic.js
new file mode 100644
index 000000000..d7370ea28
--- /dev/null
+++ b/src/features/algorithms/graph/kruskalLogic.js
@@ -0,0 +1,77 @@
+/**
+ * Pure generator logic for Kruskal's Algorithm
+ */
+
+export function* kruskalGenerator(nodes, edges) {
+  const sortedEdges = [...edges].sort((a, b) => a.weight - b.weight);
+  const parent = {};
+  nodes.forEach(n => parent[n] = n);
+
+  const find = (i) => {
+    if (parent[i] === i) return i;
+    return find(parent[i]);
+  };
+
+  const union = (i, j) => {
+    const rootI = find(i);
+    const rootJ = find(j);
+    if (rootI !== rootJ) {
+      parent[rootI] = rootJ;
+      return true;
+    }
+    return false;
+  };
+
+  const mstEdges = [];
+
+  yield {
+    visitedNodes: new Set(),
+    visitingNodes: new Set(),
+    activeEdge: null,
+    mstEdges: [],
+    description: "Starting Kruskal's algorithm. Edges sorted by weight.",
+      line: 0,
+  };
+
+  for (const edge of sortedEdges) {
+    yield {
+      visitedNodes: new Set(),
+      visitingNodes: new Set([edge.from, edge.to]),
+      activeEdge: { from: edge.from, to: edge.to },
+      mstEdges: [...mstEdges],
+      description: `Checking smallest remaining edge: ${edge.from} — ${edge.to} (weight: ${edge.weight})`,
+      line: 0,
+    };
+
+    if (find(edge.from) !== find(edge.to)) {
+      union(edge.from, edge.to);
+      mstEdges.push({ from: edge.from, to: edge.to });
+      yield {
+        visitedNodes: new Set(),
+        visitingNodes: new Set([edge.from, edge.to]),
+        activeEdge: { from: edge.from, to: edge.to },
+        mstEdges: [...mstEdges],
+        description: `Edge ${edge.from} — ${edge.to} doesn't form a cycle. Adding to MST.`,
+      line: 0,
+      };
+    } else {
+      yield {
+        visitedNodes: new Set(),
+        visitingNodes: new Set([edge.from, edge.to]),
+        activeEdge: { from: edge.from, to: edge.to },
+        mstEdges: [...mstEdges],
+        description: `Edge ${edge.from} — ${edge.to} forms a cycle. Skipping.`,
+      line: 0,
+      };
+    }
+  }
+
+  yield {
+    visitedNodes: new Set(),
+    visitingNodes: new Set(),
+    activeEdge: null,
+    mstEdges: [...mstEdges],
+    description: "Kruskal's algorithm complete. MST constructed.",
+      line: 0,
+  };
+}
diff --git a/src/features/algorithms/graph/primLogic.js b/src/features/algorithms/graph/primLogic.js
new file mode 100644
index 000000000..211964907
--- /dev/null
+++ b/src/features/algorithms/graph/primLogic.js
@@ -0,0 +1,63 @@
+/**
+ * Pure generator logic for Prim's Algorithm
+ */
+
+export function* primGenerator(adj, startNode) {
+  if (!startNode || !adj[startNode]) return;
+
+  const visited = new Set();
+  const mstEdges = [];
+  const pq = [{ node: startNode, weight: 0, from: null }];
+
+  yield {
+    visitedNodes: new Set(),
+    visitingNodes: new Set([startNode]),
+    activeEdge: null,
+    mstEdges: [],
+    description: `Starting Prim's algorithm from node ${startNode}`,
+      line: 0,
+  };
+
+  while (pq.length > 0) {
+    pq.sort((a, b) => a.weight - b.weight);
+    const { node: u, weight: w, from: p } = pq.shift();
+
+    if (visited.has(u)) continue;
+    visited.add(u);
+    if (p !== null) mstEdges.push({ from: p, to: u });
+
+    yield {
+      visitedNodes: new Set(visited),
+      visitingNodes: new Set([u]),
+      activeEdge: p ? { from: p, to: u } : null,
+      mstEdges: [...mstEdges],
+      description: `Adding node ${u} to MST${p ? ` via edge from ${p}` : ""}`,
+      line: 0,
+    };
+
+    const neighbors = adj[u] || [];
+    for (const edge of neighbors) {
+      const v = edge.node;
+      if (!visited.has(v)) {
+        pq.push({ node: v, weight: edge.weight, from: u });
+        yield {
+          visitedNodes: new Set(visited),
+          visitingNodes: new Set([u, v]),
+          activeEdge: { from: u, to: v },
+          mstEdges: [...mstEdges],
+          description: `Considering edge ${u} → ${v} with weight ${edge.weight}`,
+      line: 0,
+        };
+      }
+    }
+  }
+
+  yield {
+    visitedNodes: new Set(visited),
+    visitingNodes: new Set(),
+    activeEdge: null,
+    mstEdges: [...mstEdges],
+    description: `Prim's algorithm complete. MST constructed.`,
+      line: 0,
+  };
+}
diff --git a/src/features/algorithms/graph/tarjanLogic.js b/src/features/algorithms/graph/tarjanLogic.js
new file mode 100644
index 000000000..59e1cc7d2
--- /dev/null
+++ b/src/features/algorithms/graph/tarjanLogic.js
@@ -0,0 +1,142 @@
+/**
+ * Pure generator logic for Tarjan's Algorithm (Strongly Connected Components)
+ */
+
+export function* tarjanGenerator(adj, nodes) {
+  const nodeIds = nodes.map(n => n.id);
+  if (nodeIds.length === 0) return;
+
+  let id = 0;
+  const ids = {};
+  const low = {};
+  const onStack = {};
+  const stack = [];
+  const sccs = [];
+
+  nodeIds.forEach(n => {
+    ids[n] = -1;
+    low[n] = -1;
+    onStack[n] = false;
+  });
+
+  yield {
+    visitedNodes: new Set(),
+    visitingNodes: new Set(),
+    activeEdge: null,
+    stack: [],
+    sccs: [],
+    ids: { ...ids },
+    low: { ...low },
+    description: "Initializing Tarjan's Algorithm: variables (id, low) set to -1.",
+      line: 0,
+  };
+
+  function* dfs(u) {
+    ids[u] = low[u] = id++;
+    stack.push(u);
+    onStack[u] = true;
+
+    yield {
+      visitedNodes: new Set(Object.keys(ids).filter(k => ids[k] !== -1)),
+      visitingNodes: new Set([u]),
+      activeEdge: null,
+      stack: [...stack],
+      sccs: [...sccs],
+      ids: { ...ids },
+      low: { ...low },
+      description: `Visiting ${u}: id=${ids[u]}, low=${low[u]}, pushed to stack.`,
+      line: 0,
+    };
+
+    const neighbors = adj[u] || [];
+    for (const v of neighbors) {
+      const neighborId = typeof v === 'object' ? v.node : v;
+      
+      yield {
+        visitedNodes: new Set(Object.keys(ids).filter(k => ids[k] !== -1)),
+        visitingNodes: new Set([u, neighborId]),
+        activeEdge: { from: u, to: neighborId },
+        stack: [...stack],
+        sccs: [...sccs],
+        ids: { ...ids },
+        low: { ...low },
+        description: `Checking edge ${u} → ${neighborId}`,
+      line: 0,
+      };
+
+      if (ids[neighborId] === -1) {
+        // Unvisited
+        yield* dfs(neighborId);
+        low[u] = Math.min(low[u], low[neighborId]);
+        yield {
+          visitedNodes: new Set(Object.keys(ids).filter(k => ids[k] !== -1)),
+          visitingNodes: new Set([u]),
+          activeEdge: null,
+          stack: [...stack],
+          sccs: [...sccs],
+          ids: { ...ids },
+          low: { ...low },
+          description: `Returned to ${u} from ${neighborId}. Updated low[${u}] = ${low[u]}.`,
+      line: 0,
+        };
+      } else if (onStack[neighborId]) {
+        // Visited and on stack (back edge)
+        low[u] = Math.min(low[u], ids[neighborId]);
+        yield {
+          visitedNodes: new Set(Object.keys(ids).filter(k => ids[k] !== -1)),
+          visitingNodes: new Set([u]),
+          activeEdge: null,
+          stack: [...stack],
+          sccs: [...sccs],
+          ids: { ...ids },
+          low: { ...low },
+          description: `Node ${neighborId} is on stack. Updated low[${u}] = ${low[u]}.`,
+      line: 0,
+        };
+      }
+    }
+
+    // After visiting all neighbors, check if we found an SCC root
+    if (ids[u] === low[u]) {
+      const currentScc = [];
+      let poppedNode;
+      do {
+        poppedNode = stack.pop();
+        onStack[poppedNode] = false;
+        currentScc.push(poppedNode);
+      } while (poppedNode !== u);
+      
+      sccs.push([...currentScc]);
+      
+      yield {
+        visitedNodes: new Set(Object.keys(ids).filter(k => ids[k] !== -1)),
+        visitingNodes: new Set(),
+        activeEdge: null,
+        stack: [...stack],
+        sccs: [...sccs],
+        ids: { ...ids },
+        low: { ...low },
+        description: `ids[${u}] == low[${u}]. Popped SCC: [${currentScc.join(', ')}]`,
+      line: 0,
+      };
+    }
+  }
+
+  for (const n of nodeIds) {
+    if (ids[n] === -1) {
+      yield* dfs(n);
+    }
+  }
+
+  yield {
+    visitedNodes: new Set(Object.keys(ids).filter(k => ids[k] !== -1)),
+    visitingNodes: new Set(),
+    activeEdge: null,
+    stack: [],
+    sccs: [...sccs],
+    ids: { ...ids },
+    low: { ...low },
+    description: `Tarjan's Algorithm complete. Found ${sccs.length} SCCs.`,
+      line: 0,
+  };
+}
diff --git a/src/features/algorithms/graph/topologicalSortLogic.js b/src/features/algorithms/graph/topologicalSortLogic.js
new file mode 100644
index 000000000..f75396de3
--- /dev/null
+++ b/src/features/algorithms/graph/topologicalSortLogic.js
@@ -0,0 +1,83 @@
+/**
+ * Pure generator logic for Topological Sort (Kahn's Algorithm)
+ */
+
+export function* topologicalSortGenerator(adj, nodes) {
+  const inDegree = {};
+  nodes.forEach(n => inDegree[n] = 0);
+
+  Object.values(adj).forEach(neighbors => {
+    neighbors.forEach(v => {
+      const vId = typeof v === 'object' ? v.node : v;
+      inDegree[vId] = (inDegree[vId] || 0) + 1;
+    });
+  });
+
+  const queue = nodes.filter(n => inDegree[n] === 0);
+  const result = [];
+
+  yield {
+    visitedNodes: new Set(),
+    visitingNodes: new Set(queue),
+    activeEdge: null,
+    queue: [...queue],
+    result: [],
+    description: "Initializing Topological Sort: computing in-degrees.",
+      line: 0,
+  };
+
+  while (queue.length > 0) {
+    const u = queue.shift();
+    result.push(u);
+
+    yield {
+      visitedNodes: new Set(result),
+      visitingNodes: new Set([u]),
+      activeEdge: null,
+      queue: [...queue],
+      result: [...result],
+      description: `Processing node ${u} (in-degree 0), adding to result.`,
+      line: 0,
+    };
+
+    const neighbors = adj[u] || [];
+    for (const v of neighbors) {
+      const vId = typeof v === 'object' ? v.node : v;
+      inDegree[vId]--;
+      
+      yield {
+        visitedNodes: new Set(result),
+        visitingNodes: new Set([u, vId]),
+        activeEdge: { from: u, to: vId },
+        queue: [...queue],
+        result: [...result],
+        description: `Decreasing in-degree of neighbor ${vId}.`,
+      line: 0,
+      };
+
+      if (inDegree[vId] === 0) {
+        queue.push(vId);
+        yield {
+          visitedNodes: new Set(result),
+          visitingNodes: new Set([vId]),
+          activeEdge: null,
+          queue: [...queue],
+          result: [...result],
+          description: `Node ${vId} now has in-degree 0, adding to queue.`,
+      line: 0,
+        };
+      }
+    }
+  }
+
+  yield {
+    visitedNodes: new Set(result),
+    visitingNodes: new Set(),
+    activeEdge: null,
+    queue: [...queue],
+    result: [...result],
+    description: result.length === nodes.length 
+      ? "Topological Sort complete. Valid ordering found."
+      : "Topological Sort complete. Cycle detected! Not all nodes are in the result.",
+  };
+}
diff --git a/src/features/algorithms/hashmap/hashmapDeleteLogic.js b/src/features/algorithms/hashmap/hashmapDeleteLogic.js
new file mode 100644
index 000000000..9b051cf98
--- /dev/null
+++ b/src/features/algorithms/hashmap/hashmapDeleteLogic.js
@@ -0,0 +1,45 @@
+/**
+ * Pure generator logic for Hash Map Chaining Delete.
+ */
+
+export function* deleteGenerator(hashMap, key, tableSize, hashFunction) {
+  const index = hashFunction(key);
+  yield { type: 'hash', index, operation: `Key "${key}" hashes to index ${index}` };
+
+  const bucket = hashMap[index] || [];
+  if (bucket.length === 0) {
+    yield { 
+      type: 'complete', 
+      found: false, 
+      operation: `Bucket ${index} is empty. Key "${key}" not found` 
+    };
+    return;
+  }
+
+  for (let i = 0; i < bucket.length; i += 1) {
+    yield { 
+      type: 'traverse', 
+      activeNode: { bucket: index, index: i }, 
+      operation: `Traversing chained bucket ${index}: checking "${bucket[i].key}"` 
+    };
+    
+    if (bucket[i].key === key) {
+      let nextHashMap = hashMap.map((b) => [...b]);
+      nextHashMap[index].splice(i, 1);
+      
+      yield { 
+        type: 'complete', 
+        found: true,
+        hashMap: nextHashMap,
+        operation: `Deleted key "${key}" from bucket ${index}` 
+      };
+      return;
+    }
+  }
+
+  yield { 
+    type: 'complete', 
+    found: false, 
+    operation: `Traversal finished. Key "${key}" not found in bucket ${index}` 
+  };
+}
diff --git a/src/features/algorithms/hashmap/hashmapInsertLogic.js b/src/features/algorithms/hashmap/hashmapInsertLogic.js
new file mode 100644
index 000000000..be79220c3
--- /dev/null
+++ b/src/features/algorithms/hashmap/hashmapInsertLogic.js
@@ -0,0 +1,45 @@
+/**
+ * Pure generator logic for Hash Map Chaining Insert.
+ */
+
+export function* insertGenerator(hashMap, key, value, tableSize, hashFunction) {
+  const index = hashFunction(key);
+  yield { type: 'hash', index, operation: `Key "${key}" hashes to index ${index}` };
+
+  const bucketBefore = hashMap[index] || [];
+  const existingIndex = bucketBefore.findIndex((pair) => pair.key === key);
+
+  if (existingIndex === -1 && bucketBefore.length > 0) {
+    yield { 
+      type: 'collision', 
+      index, 
+      operation: `Collision Detected at bucket ${index}`,
+      message: 'Collision Detected'
+    };
+    yield { 
+      type: 'resolve', 
+      operation: `Key inserted into existing bucket ${index} using separate chaining`
+    };
+  }
+
+  let nextHashMap = hashMap.map((bucket) => [...bucket]);
+  let activeNode;
+  let finalOperation;
+
+  if (existingIndex >= 0) {
+    nextHashMap[index][existingIndex] = { ...nextHashMap[index][existingIndex], value };
+    activeNode = { bucket: index, index: existingIndex };
+    finalOperation = `Updated key "${key}" in bucket ${index}`;
+  } else {
+    nextHashMap[index].push({ key, value, id: `${key}-${Date.now()}` });
+    activeNode = { bucket: index, index: bucketBefore.length };
+    finalOperation = `Inserted "${key}: ${value}" at index ${index}`;
+  }
+
+  yield { 
+    type: 'complete', 
+    hashMap: nextHashMap,
+    activeNode,
+    operation: finalOperation
+  };
+}
diff --git a/src/features/algorithms/hashmap/hashmapSearchLogic.js b/src/features/algorithms/hashmap/hashmapSearchLogic.js
new file mode 100644
index 000000000..98ca10039
--- /dev/null
+++ b/src/features/algorithms/hashmap/hashmapSearchLogic.js
@@ -0,0 +1,41 @@
+/**
+ * Pure generator logic for Hash Map Chaining Search.
+ */
+
+export function* searchGenerator(hashMap, key, tableSize, hashFunction) {
+  const index = hashFunction(key);
+  yield { type: 'hash', index, operation: `Key "${key}" hashes to index ${index}` };
+
+  const bucket = hashMap[index] || [];
+  if (bucket.length === 0) {
+    yield { 
+      type: 'complete', 
+      found: false, 
+      operation: `Bucket ${index} is empty. Key "${key}" not found` 
+    };
+    return;
+  }
+
+  for (let i = 0; i < bucket.length; i += 1) {
+    yield { 
+      type: 'traverse', 
+      activeNode: { bucket: index, index: i }, 
+      operation: `Traversing chained bucket ${index}: checking "${bucket[i].key}"` 
+    };
+    
+    if (bucket[i].key === key) {
+      yield { 
+        type: 'complete', 
+        found: true, 
+        operation: `Key "${key}" found at index ${index} with value "${bucket[i].value}"` 
+      };
+      return;
+    }
+  }
+
+  yield { 
+    type: 'complete', 
+    found: false, 
+    operation: `Traversal finished. Key "${key}" not found in bucket ${index}` 
+  };
+}
diff --git a/src/features/algorithms/hashmap/lruCache.js b/src/features/algorithms/hashmap/lruCache.js
new file mode 100644
index 000000000..f7f7320ad
--- /dev/null
+++ b/src/features/algorithms/hashmap/lruCache.js
@@ -0,0 +1,61 @@
+export const lruCacheSteps = (capacity, operations) => {
+  const steps = [];
+  const cache = new Map();
+
+  const getState = () => ({
+    cache: [...cache.entries()].map(([key, value]) => ({ key, value })),
+    size: cache.size,
+    capacity,
+  });
+
+  operations.forEach(({ type, key, value }) => {
+    if (type === "get") {
+      if (cache.has(key)) {
+        const val = cache.get(key);
+        cache.delete(key);
+        cache.set(key, val);
+        steps.push({
+          operation: `GET(${key})`,
+          result: val,
+          hit: true,
+          state: getState(),
+          message: `Cache HIT! Key ${key} found = ${val}. Moved to front.`,
+        });
+      } else {
+        steps.push({
+          operation: `GET(${key})`,
+          result: -1,
+          hit: false,
+          state: getState(),
+          message: `Cache MISS! Key ${key} not found. Return -1.`,
+        });
+      }
+    } else if (type === "put") {
+      if (cache.has(key)) {
+        cache.delete(key);
+      } else if (cache.size >= capacity) {
+        const firstKey = cache.keys().next().value;
+        cache.delete(firstKey);
+        steps.push({
+          operation: `PUT(${key}, ${value})`,
+          result: null,
+          evicted: firstKey,
+          state: getState(),
+          message: `Cache FULL! Evicted LRU key ${firstKey}. Added key ${key} = ${value}.`,
+        });
+        cache.set(key, value);
+        return;
+      }
+      cache.set(key, value);
+      steps.push({
+        operation: `PUT(${key}, ${value})`,
+        result: null,
+        evicted: null,
+        state: getState(),
+        message: `Added key ${key} = ${value} to cache.`,
+      });
+    }
+  });
+
+  return steps;
+};
\ No newline at end of file
diff --git a/src/features/algorithms/linkedlist/circularLinkedListLogic.js b/src/features/algorithms/linkedlist/circularLinkedListLogic.js
new file mode 100644
index 000000000..cd83423fa
--- /dev/null
+++ b/src/features/algorithms/linkedlist/circularLinkedListLogic.js
@@ -0,0 +1,36 @@
+/**
+ * Pure generator logic for Circular Linked List operations.
+ */
+
+// Generate random memory addresses
+const generateMemoryAddress = () => {
+  return '0x' + Math.floor(Math.random() * 0xFFFF).toString(16).padStart(4, '0');
+};
+
+export function* addNodeGenerator(currentList, inputValue, nodeIdCounter) {
+  if (!inputValue) {
+    yield { type: 'error', message: 'Please enter a value' };
+    return;
+  }
+
+  yield { type: 'start' };
+
+  const newNode = {
+    value: inputValue,
+    id: nodeIdCounter,
+    address: generateMemoryAddress(),
+  };
+
+  let nextList;
+  if (currentList.length === 0) {
+    newNode.next = newNode.address;
+    nextList = [newNode];
+  } else {
+    const updatedList = [...currentList];
+    newNode.next = updatedList[0].address;
+    updatedList[updatedList.length - 1].next = newNode.address;
+    nextList = [...updatedList, newNode];
+  }
+
+  yield { type: 'complete', list: nextList, newNodeId: newNode.id };
+}
diff --git a/src/features/algorithms/linkedlist/deletionLogic.js b/src/features/algorithms/linkedlist/deletionLogic.js
new file mode 100644
index 000000000..da076c159
--- /dev/null
+++ b/src/features/algorithms/linkedlist/deletionLogic.js
@@ -0,0 +1,177 @@
+const generateAddress = () =>
+  `0x${Math.floor(Math.random() * 0x10000)
+    .toString(16)
+    .toUpperCase()
+    .padStart(4, "0")}`;
+
+export function* deleteAtPositionGen(currentList, position) {
+  if (currentList.length === 0) {
+    yield { type: "error", message: "List is empty" };
+    return;
+  }
+
+  if (position < 0 || position >= currentList.length) {
+    yield { type: "error", message: "Invalid position" };
+    return;
+  }
+
+  // Traverse animation
+  for (let i = 0; i < position; i++) {
+    yield {
+      list: [...currentList],
+      action: "delete_position",
+      phase: "traverse",
+      currentNodeIndex: i,
+      explanation: `Traversing node "${currentList[i].value}".`
+    };
+  }
+
+  yield {
+    list: [...currentList],
+    action: "delete_position",
+    phase: "found",
+    targetNodeIndex: position,
+    explanation: `Found node "${currentList[position].value}". It will be deleted.`
+  };
+
+  const updatedList = [...currentList];
+
+  // Update previous node's next pointer
+  if (position > 0) {
+    updatedList[position - 1] = {
+      ...updatedList[position - 1],
+      next:
+        position === updatedList.length - 1
+          ? "NULL"
+          : updatedList[position + 1].address,
+    };
+  }
+
+  updatedList.splice(position, 1);
+
+  yield {
+    list: updatedList,
+    action: "delete_position",
+    phase: "complete",
+    explanation: `Deleted node at position ${position}.`
+  };
+}
+
+export function* addNodeDeletionGen(currentList, inputValue) {
+  if (!inputValue) {
+    yield { type: 'error', message: 'Value is required' };
+    return;
+  }
+  
+  const newNode = {
+    value: inputValue,
+    id: Date.now(),
+    address: generateAddress(),
+    next: "NULL",
+  };
+
+  yield {
+    list: [...currentList],
+    newNode: newNode,
+    action: 'add',
+    phase: 'start',
+    explanation: `Creating node with value "${inputValue}".`
+  };
+
+  let updatedList = [...currentList];
+  if (updatedList.length > 0) {
+    updatedList[updatedList.length - 1] = { ...updatedList[updatedList.length - 1], next: newNode.address };
+    updatedList.push(newNode);
+  } else {
+    updatedList = [newNode];
+  }
+
+  yield {
+    list: updatedList,
+    newNode: null,
+    action: 'add',
+    phase: 'complete',
+    explanation: `Added node with value "${inputValue}".`
+  };
+}
+export function* deleteFirstNodeGen(currentList) {
+  if (currentList.length === 0) {
+    yield { type: "error", message: "List is empty" };
+    return;
+  }
+
+  yield {
+    list: [...currentList],
+    action: "delete_first",
+    phase: "select_head",
+    targetNodeIndex: 0,
+    explanation: `Head node "${currentList[0].value}" will be removed.`
+  };
+
+  const updatedList = [...currentList];
+  updatedList.shift();
+
+  yield {
+    list: updatedList,
+    action: "delete_first",
+    phase: "complete",
+    targetNodeIndex: -1,
+    explanation: "First node deleted."
+  };
+}
+
+export function* deleteLastNodeGen(currentList) {
+  if (currentList.length === 0) {
+    yield { type: 'error', message: 'List is already empty' };
+    return;
+  }
+  
+  const targetIndex = currentList.length - 1;
+
+  if (currentList.length > 1) {
+    for (let i = 0; i < currentList.length - 1; i++) {
+        yield {
+            list: [...currentList],
+            action: 'delete_last',
+            phase: 'traverse',
+            currentNodeIndex: i,
+            explanation: `Traversing... currently at node with value "${currentList[i].value}". Looking for the second to last node.`
+        };
+    }
+    
+    yield {
+        list: [...currentList],
+        action: 'delete_last',
+        phase: 'found_prev',
+        currentNodeIndex: currentList.length - 2,
+        targetNodeIndex: targetIndex,
+        explanation: `Found the second to last node. Its "next" pointer will be updated to NULL.`
+    };
+  } else {
+    yield {
+        list: [...currentList],
+        action: 'delete_last',
+        phase: 'found_prev',
+        currentNodeIndex: -1,
+        targetNodeIndex: targetIndex,
+        explanation: `Only one node in the list. It will be removed.`
+    };
+  }
+
+  let updatedList = [...currentList];
+  if (updatedList.length > 1) {
+    updatedList.pop();
+    updatedList[updatedList.length - 1] = { ...updatedList[updatedList.length - 1], next: "NULL" };
+  } else {
+    updatedList = [];
+  }
+
+  yield {
+    list: updatedList,
+    action: 'delete_last',
+    phase: 'complete',
+    currentNodeIndex: -1,
+    targetNodeIndex: -1,
+    explanation: 'Deleted the last node.'
+  };
+}
diff --git a/src/features/algorithms/linkedlist/doublyLinkedListLogic.js b/src/features/algorithms/linkedlist/doublyLinkedListLogic.js
new file mode 100644
index 000000000..c55856b2a
--- /dev/null
+++ b/src/features/algorithms/linkedlist/doublyLinkedListLogic.js
@@ -0,0 +1,36 @@
+/**
+ * Pure generator function for Doubly Linked List operations.
+ * Yields frames representing the operation state.
+ */
+
+export function generateMemoryAddress() {
+  return '0x' + Math.floor(Math.random() * 0xFFFF).toString(16).padStart(4, '0');
+}
+
+export function* insertDoublyGenerator(currentList, inputValue, generateId) {
+  if (!inputValue) {
+    yield { type: 'error', message: 'Please enter a value' };
+    return;
+  }
+
+  yield { type: 'start' };
+
+  const newNode = {
+    value: inputValue,
+    id: generateId(),
+    address: generateMemoryAddress(),
+    next: null,
+    prev: currentList.length > 0 ? currentList[currentList.length - 1].address : null
+  };
+
+  let nextList;
+  if (currentList.length > 0) {
+    nextList = [...currentList];
+    nextList[nextList.length - 1].next = newNode.address;
+    nextList.push(newNode);
+  } else {
+    nextList = [newNode];
+  }
+
+  yield { type: 'complete', list: nextList, newNode };
+}
diff --git a/src/features/algorithms/linkedlist/insertionLogic.js b/src/features/algorithms/linkedlist/insertionLogic.js
new file mode 100644
index 000000000..991b88b9c
--- /dev/null
+++ b/src/features/algorithms/linkedlist/insertionLogic.js
@@ -0,0 +1,67 @@
+export function generateAddress() {
+  return `0x${Math.floor(Math.random() * 0x10000)
+    .toString(16)
+    .toUpperCase()
+    .padStart(4, "0")}`;
+}
+
+export function* insertionGenerator(currentList, inputValue) {
+  if (!inputValue) {
+    yield { type: 'error', message: 'Please enter a value' };
+    return;
+  }
+
+  const newNode = {
+    value: inputValue,
+    id: Date.now(),
+    address: generateAddress(),
+    next: "NULL",
+  };
+
+  // Step 1: Create new node
+  yield {
+    list: [...currentList],
+    newNode: newNode,
+    phase: 'create',
+    explanation: `Created a new node with value "${inputValue}".`
+  };
+
+  // Step 2: Traverse to the end (if list is not empty)
+  if (currentList.length > 0) {
+    for (let i = 0; i < currentList.length; i++) {
+      yield {
+        list: [...currentList],
+        newNode: newNode,
+        phase: 'traverse',
+        currentNodeIndex: i,
+        explanation: `Traversing... currently at node with value "${currentList[i].value}".`
+      };
+    }
+  }
+
+  // Step 3: Link and append
+  let nextList;
+  if (currentList.length > 0) {
+    nextList = [...currentList];
+    nextList[nextList.length - 1] = { ...nextList[nextList.length - 1], next: newNode.address };
+    yield {
+      list: [...nextList],
+      newNode: newNode,
+      phase: 'link',
+      currentNodeIndex: nextList.length - 1,
+      explanation: `Updated the "next" pointer of the last node to point to the new node's address (${newNode.address}).`
+    };
+    nextList.push(newNode);
+  } else {
+    nextList = [newNode];
+  }
+
+  // Step 4: Final state
+  yield {
+    list: nextList,
+    newNode: null,
+    phase: 'complete',
+    currentNodeIndex: -1,
+    explanation: `Successfully appended node with value "${inputValue}" to the linked list.`
+  };
+}
diff --git a/src/features/algorithms/linkedlist/llComparisonLogic.js b/src/features/algorithms/linkedlist/llComparisonLogic.js
new file mode 100644
index 000000000..7cb009e7b
--- /dev/null
+++ b/src/features/algorithms/linkedlist/llComparisonLogic.js
@@ -0,0 +1,64 @@
+export function* compareListsGenerator(list1, list2) {
+  if (list1.length === 0 || list2.length === 0) {
+    yield { type: 'error', message: 'Both lists must be generated.' };
+    return;
+  }
+
+  yield {
+      phase: 'start',
+      list1Index: -1,
+      list2Index: -1,
+      explanation: "Starting comparison. We will traverse both lists simultaneously."
+  };
+
+  const maxLength = Math.max(list1.length, list2.length);
+  let areSame = true;
+
+  for (let i = 0; i < maxLength; i++) {
+    const node1 = list1[i];
+    const node2 = list2[i];
+
+    // Yield the current pointers for highlighting
+    yield {
+      phase: 'compare',
+      list1Index: node1 ? i : -1,
+      list2Index: node2 ? i : -1,
+      explanation: `Comparing nodes at index ${i}...`
+    };
+
+    if (!node1 || !node2 || node1.value !== node2.value) {
+      areSame = false;
+      let reason = "";
+      if (!node1) reason = "List 1 is shorter than List 2.";
+      else if (!node2) reason = "List 2 is shorter than List 1.";
+      else reason = `Value "${node1.value}" does not match "${node2.value}".`;
+
+      yield {
+        phase: 'complete',
+        match: false,
+        list1Index: node1 ? i : -1,
+        list2Index: node2 ? i : -1,
+        errorIndex: i,
+        explanation: `Mismatch found at index ${i}! ${reason}`
+      };
+      return;
+    }
+    
+    yield {
+      phase: 'matched',
+      list1Index: i,
+      list2Index: i,
+      explanation: `Nodes at index ${i} match (value: "${node1.value}"). Moving to the next nodes.`
+    };
+  }
+
+  if (areSame) {
+    yield {
+        phase: 'complete',
+        match: true,
+        list1Index: -1,
+        list2Index: -1,
+        explanation: "All nodes match. The linked lists are identical!"
+    };
+  }
+}
diff --git a/src/features/algorithms/linkedlist/llMergeLogic.js b/src/features/algorithms/linkedlist/llMergeLogic.js
new file mode 100644
index 000000000..f334ad9bb
--- /dev/null
+++ b/src/features/algorithms/linkedlist/llMergeLogic.js
@@ -0,0 +1,89 @@
+export function* mergeListsGenerator(list1, list2) {
+  if (list1.length === 0 || list2.length === 0) {
+    yield { type: 'error', message: 'Both lists must be generated.' };
+    return;
+  }
+
+  yield { 
+      phase: 'start', 
+      list1Index: -1, 
+      list2Index: -1, 
+      mergedList: [], 
+      explanation: 'Starting merge operation.' 
+  };
+
+  const sortedList1 = [...list1].sort((a, b) => a.value - b.value);
+  const sortedList2 = [...list2].sort((a, b) => a.value - b.value);
+
+  yield {
+      phase: 'sorted',
+      list1Index: 0,
+      list2Index: 0,
+      mergedList: [],
+      list1: sortedList1,
+      list2: sortedList2,
+      explanation: 'Both lists have been sorted in ascending order for the merge operation.'
+  }
+
+  let i = 0;
+  let j = 0;
+  const result = [];
+
+  while (i < sortedList1.length || j < sortedList2.length) {
+    const val1 = i < sortedList1.length ? sortedList1[i].value : Infinity;
+    const val2 = j < sortedList2.length ? sortedList2[j].value : Infinity;
+    
+    // Yield the current pointers for highlighting
+    yield { 
+        phase: 'compare', 
+        list1Index: i < sortedList1.length ? i : -1, 
+        list2Index: j < sortedList2.length ? j : -1,
+        mergedList: [...result],
+        list1: sortedList1,
+        list2: sortedList2,
+        explanation: `Comparing ${val1 !== Infinity ? val1 : 'End of List 1'} and ${val2 !== Infinity ? val2 : 'End of List 2'}.`
+    };
+
+    let nextNode;
+    let source;
+
+    if (
+      j >= sortedList2.length ||
+      (i < sortedList1.length && sortedList1[i].value <= sortedList2[j].value)
+    ) {
+      nextNode = { ...sortedList1[i], source: "list1", next: "NULL" };
+      source = 'list1';
+      i++;
+    } else {
+      nextNode = { ...sortedList2[j], source: "list2", next: "NULL" };
+      source = 'list2';
+      j++;
+    }
+
+    if (result.length > 0) {
+        result[result.length - 1].next = nextNode.address;
+    }
+    result.push(nextNode);
+
+    // Yield the node that was added to the merged list
+    yield {
+      phase: 'add',
+      list1Index: i < sortedList1.length ? i : -1, 
+      list2Index: j < sortedList2.length ? j : -1,
+      mergedList: [...result],
+      list1: sortedList1,
+      list2: sortedList2,
+      explanation: `Added ${nextNode.value} from ${source === 'list1' ? 'List 1' : 'List 2'} to the merged list.`
+    };
+  }
+
+  yield { 
+      phase: 'complete', 
+      list1Index: -1, 
+      list2Index: -1,
+      mergedList: result, 
+      list1: sortedList1,
+      list2: sortedList2,
+      explanation: 'Merge operation complete!' 
+  };
+}
diff --git a/src/features/algorithms/linkedlist/reverseLogic.js b/src/features/algorithms/linkedlist/reverseLogic.js
new file mode 100644
index 000000000..47946dc69
--- /dev/null
+++ b/src/features/algorithms/linkedlist/reverseLogic.js
@@ -0,0 +1,67 @@
+export function* reverseGenerator(list) {
+  if (list.length === 0) return;
+
+  const nodes = list.map((node) => ({ ...node }));
+  let prevIndex = -1;
+  let currentIndex = 0;
+  let nextIndex = currentIndex < nodes.length - 1 ? currentIndex + 1 : -1;
+
+  yield {
+    phase: 'start',
+    prevIndex,
+    currentIndex,
+    nextIndex,
+    list: [...nodes],
+    explanation: 'Starting reversal. Pointers initialized: prev = NULL, current = head, next = head.next.'
+  };
+
+  while (currentIndex !== -1) {
+    yield {
+      phase: 'step_pointers',
+      prevIndex,
+      currentIndex,
+      nextIndex,
+      list: [...nodes],
+      explanation: `Current node is ${nodes[currentIndex].value}. We will change its next pointer to point to the previous node.`
+    };
+
+    const nextAddress = prevIndex === -1 ? "NULL" : nodes[prevIndex].address;
+    nodes[currentIndex] = { ...nodes[currentIndex], next: nextAddress };
+
+    yield {
+      phase: 'step_update_link',
+      prevIndex,
+      currentIndex,
+      nextIndex,
+      list: [...nodes],
+      explanation: `Updated ${nodes[currentIndex].value}'s next pointer to ${nextAddress}.`
+    };
+
+    prevIndex = currentIndex;
+    currentIndex = nextIndex;
+    nextIndex = currentIndex !== -1 && currentIndex < nodes.length - 1 ? currentIndex + 1 : -1;
+    
+    if (currentIndex !== -1) {
+        yield {
+          phase: 'advance',
+          prevIndex,
+          currentIndex,
+          nextIndex,
+          list: [...nodes],
+          explanation: `Advanced pointers. Prev is now ${nodes[prevIndex].value}, Current is ${nodes[currentIndex].value}.`
+        };
+    }
+  }
+
+  // Reverse the physical array to show the new head
+  const reversedNodes = [...nodes].reverse();
+
+  yield {
+    phase: 'complete',
+    prevIndex: -1,
+    currentIndex: -1,
+    nextIndex: -1,
+    list: reversedNodes,
+    explanation: 'Reversal complete! The list has been successfully reversed.'
+  };
+}
diff --git a/src/features/algorithms/linkedlist/singlyLinkedListLogic.js b/src/features/algorithms/linkedlist/singlyLinkedListLogic.js
new file mode 100644
index 000000000..95c35c1ff
--- /dev/null
+++ b/src/features/algorithms/linkedlist/singlyLinkedListLogic.js
@@ -0,0 +1,48 @@
+/**
+ * Pure generator logic for Singly Linked List operations.
+ */
+
+const generateMemoryAddress = () => {
+  return '0x' + Math.floor(Math.random() * 0xFFFF).toString(16).padStart(4, '0');
+};
+
+export function* addNodeGenerator(currentList, inputValue, nodeIdCounter) {
+  if (!inputValue) {
+    yield { type: 'error', message: 'Please enter a value' };
+    return;
+  }
+
+  // Step 0
+  yield { type: 'step', step: 0, message: 'Creating a new node in memory.' };
+  
+  // Step 1
+  yield { type: 'step', step: 1, message: 'Storing the input value in the node.' };
+  
+  // Step 2
+  yield { type: 'step', step: 2, message: 'Linking the previous node to the new node.' };
+
+  // Step 3 (Complete)
+  const newNode = {
+    value: inputValue,
+    id: nodeIdCounter,
+    address: generateMemoryAddress(),
+    next: null
+  };
+
+  let nextList;
+  if (currentList.length > 0) {
+    const updatedList = [...currentList];
+    updatedList[updatedList.length - 1].next = newNode.address;
+    nextList = [...updatedList, newNode];
+  } else {
+    nextList = [newNode];
+  }
+
+  yield { 
+    type: 'complete', 
+    step: 3, 
+    message: 'Node added successfully.', 
+    list: nextList,
+    newNodeId: newNode.id
+  };
+}
diff --git a/src/features/algorithms/linkedlist/sortingLogic.js b/src/features/algorithms/linkedlist/sortingLogic.js
new file mode 100644
index 000000000..1049fafaa
--- /dev/null
+++ b/src/features/algorithms/linkedlist/sortingLogic.js
@@ -0,0 +1,95 @@
+export function* sortingGenerator(list) {
+  if (list.length === 0) return;
+
+  const nodes = list.map((node) => ({ ...node }));
+
+  yield {
+    phase: "start",
+    list: [...nodes],
+    leftRange: null,
+    rightRange: null,
+    currentIndex: -1,
+    compareIndex: -1,
+    explanation: "Starting Merge Sort."
+  };
+
+  function* mergeSort(arr, start, end) {
+    if (start >= end) return;
+
+    const mid = Math.floor((start + end) / 2);
+
+    yield {
+      phase: "split",
+      list: [...nodes],
+      leftRange: [start, mid],
+      rightRange: [mid + 1, end],
+      currentIndex: -1,
+      compareIndex: -1,
+      explanation: `Splitting range ${start}-${end} into ${start}-${mid} and ${mid + 1}-${end}.`
+    };
+
+    yield* mergeSort(arr, start, mid);
+    yield* mergeSort(arr, mid + 1, end);
+
+    const temp = [];
+    let i = start;
+    let j = mid + 1;
+
+    while (i <= mid && j <= end) {
+      yield {
+        phase: "compare",
+        list: [...nodes],
+        leftRange: [start, mid],
+        rightRange: [mid + 1, end],
+        currentIndex: i,
+        compareIndex: j,
+        explanation: `Comparing ${arr[i].value} (left half) and ${arr[j].value} (right half).`
+      };
+
+      if (arr[i].value <= arr[j].value) {
+        temp.push(arr[i]);
+        i++;
+      } else {
+        temp.push(arr[j]);
+        j++;
+      }
+    }
+
+    while (i <= mid) {
+      temp.push(arr[i]);
+      i++;
+    }
+
+    while (j <= end) {
+      temp.push(arr[j]);
+      j++;
+    }
+
+    for (let k = 0; k < temp.length; k++) {
+      arr[start + k] = temp[k];
+      nodes[start + k] = temp[k];
+    }
+
+    yield {
+      phase: "merge",
+      list: [...nodes],
+      leftRange: [start, mid],
+      rightRange: [mid + 1, end],
+      currentIndex: -1,
+      compareIndex: -1,
+      explanation: `Merged elements from index ${start} to ${end} into sorted order.`
+    };
+  }
+
+  yield* mergeSort(nodes, 0, nodes.length - 1);
+
+  yield {
+    phase: "complete",
+    list: [...nodes],
+    leftRange: null,
+    rightRange: null,
+    currentIndex: -1,
+    compareIndex: -1,
+    explanation: "Merge Sort complete. List is now fully sorted."
+  };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/linkedlist/traversalLogic.js b/src/features/algorithms/linkedlist/traversalLogic.js
new file mode 100644
index 000000000..b75dcea74
--- /dev/null
+++ b/src/features/algorithms/linkedlist/traversalLogic.js
@@ -0,0 +1,48 @@
+export function generateRandomListLogic() {
+  const values = [
+    "\u{1F436}", "\u{1F431}", "\u{1F42D}", "\u{1F439}", 
+    "\u{1F430}", "\u{1F98A}", "\u{1F43B}", "\u{1F43C}",
+  ];
+  const size = Math.min(Math.floor(Math.random() * 3) + 3, values.length);
+  const shuffledValues = [...values].sort(() => 0.5 - Math.random());
+
+  // Generate stable addresses for each node.
+  const addresses = Array.from({ length: size }, () =>
+    `0x${Math.floor(Math.random() * 0x10000)
+      .toString(16)
+      .padStart(4, "0")}`
+  );
+
+  const newList = shuffledValues.slice(0, size).map((value, index) => ({
+    value,
+    id: Date.now() + index,
+    address: addresses[index],
+    next: index < size - 1 ? addresses[index + 1] : "NULL",
+  }));
+
+  return newList;
+}
+
+export function* traversalGenerator(list) {
+  if (list.length === 0) return;
+
+  yield {
+    list: [...list],
+    currentNodeIndex: -1,
+    explanation: "Starting traversal...",
+  };
+
+  for (let i = 0; i < list.length; i++) {
+    yield {
+      list: [...list],
+      currentNodeIndex: i,
+      explanation: `Visiting node at address ${list[i].address} with value ${list[i].value}.`,
+    };
+  }
+
+  yield {
+    list: [...list],
+    currentNodeIndex: list.length,
+    explanation: "Traversal complete. Reached NULL.",
+  };
+}
diff --git a/src/features/algorithms/queue/circularQueueLogic.js b/src/features/algorithms/queue/circularQueueLogic.js
new file mode 100644
index 000000000..13b4405e2
--- /dev/null
+++ b/src/features/algorithms/queue/circularQueueLogic.js
@@ -0,0 +1,72 @@
+const wrap = (idx, maxSize) => (idx + maxSize) % maxSize;
+
+export function* enqueueCircularGenerator(queue, front, rear, count, maxSize, inputValue) {
+  if (!inputValue || (typeof inputValue === 'string' && !inputValue.trim())) {
+    yield { type: 'error', message: 'Please enter a value' };
+    return;
+  }
+  if (count === maxSize) {
+    yield { phase: 'error', action: 'enqueue', message: 'Circular queue is full!' };
+    return;
+  }
+  
+  yield { 
+      phase: 'start', 
+      action: 'enqueue',
+      queue: [...queue],
+      front,
+      rear,
+      count,
+      newValue: inputValue,
+      explanation: `Enqueuing "${inputValue}" at rear...` 
+  };
+  
+  const newRear = count === 0 ? front : wrap(rear + 1, maxSize);
+  const newQ = [...queue];
+  newQ[newRear] = inputValue;
+  
+  yield { 
+    phase: 'complete', 
+    action: 'enqueue',
+    queue: newQ, 
+    front,
+    rear: newRear, 
+    count: count + 1, 
+    newValue: null,
+    explanation: `"${inputValue}" added at index ${newRear}.` 
+  };
+}
+
+export function* dequeueCircularGenerator(queue, front, rear, count, maxSize) {
+  if (count === 0) {
+    yield { type: 'error', message: 'Circular queue is empty!' };
+    return;
+  }
+
+  const item = queue[front];
+  yield { 
+      phase: 'start', 
+      action: 'dequeue',
+      queue: [...queue],
+      front,
+      rear,
+      count,
+      dequeuedItem: item,
+      explanation: `Dequeuing "${item}" from front (index ${front})...` 
+  };
+
+  const newQ = [...queue];
+  newQ[front] = null;
+  const newFront = count === 1 ? front : wrap(front + 1, maxSize);
+  
+  yield { 
+    phase: 'complete', 
+    action: 'dequeue',
+    queue: newQ, 
+    front: newFront, 
+    rear,
+    count: count - 1, 
+    dequeuedItem: null,
+    explanation: `"${item}" removed. Front moved to index ${newFront}.` 
+  };
+}
diff --git a/src/features/algorithms/queue/dequeLogic.js b/src/features/algorithms/queue/dequeLogic.js
new file mode 100644
index 000000000..216960968
--- /dev/null
+++ b/src/features/algorithms/queue/dequeLogic.js
@@ -0,0 +1,89 @@
+export function* enqueueFrontGenerator(currentDeque, value) {
+  if (!value) {
+    yield { type: 'error', message: 'Please enter a value' };
+    return;
+  }
+  yield { 
+      phase: 'start', 
+      action: 'enqueue_front', 
+      deque: [...currentDeque],
+      newValue: value,
+      explanation: `Enqueuing "${value}" at the front of the deque...` 
+  };
+  
+  yield { 
+      phase: 'complete', 
+      action: 'enqueue_front', 
+      deque: [{ id: Date.now(), value: value }, ...currentDeque], 
+      newValue: null,
+      explanation: `"${value}" added to the front.` 
+  };
+}
+
+export function* enqueueRearGenerator(currentDeque, value) {
+  if (!value) {
+    yield { type: 'error', message: 'Please enter a value' };
+    return;
+  }
+  yield { 
+      phase: 'start', 
+      action: 'enqueue_rear', 
+      deque: [...currentDeque],
+      newValue: value,
+      explanation: `Enqueuing "${value}" at the rear of the deque...` 
+  };
+  
+  yield { 
+      phase: 'complete', 
+      action: 'enqueue_rear', 
+      deque: [...currentDeque, { id: Date.now(), value: value }], 
+      newValue: null,
+      explanation: `"${value}" added to the rear.` 
+  };
+}
+
+export function* dequeueFrontGenerator(currentDeque) {
+  if (currentDeque.length === 0) {
+    yield { phase: 'error', action: 'dequeue_front', message: 'Deque is empty!' };
+    return;
+  }
+  const frontNode = currentDeque[0];
+  yield { 
+      phase: 'start', 
+      action: 'dequeue_front', 
+      deque: [...currentDeque],
+      dequeuedNode: frontNode,
+      explanation: `Dequeuing "${frontNode.value}" from the front...` 
+  };
+  
+  yield { 
+      phase: 'complete', 
+      action: 'dequeue_front', 
+      deque: currentDeque.slice(1), 
+      dequeuedNode: null,
+      explanation: `"${frontNode.value}" removed from the front.` 
+  };
+}
+
+export function* dequeueRearGenerator(currentDeque) {
+  if (currentDeque.length === 0) {
+    yield { phase: 'error', action: 'dequeue_rear', message: 'Deque is empty!' };
+    return;
+  }
+  const rearNode = currentDeque[currentDeque.length - 1];
+  yield { 
+      phase: 'start', 
+      action: 'dequeue_rear', 
+      deque: [...currentDeque],
+      dequeuedNode: rearNode,
+      explanation: `Dequeuing "${rearNode.value}" from the rear...` 
+  };
+  
+  yield { 
+      phase: 'complete', 
+      action: 'dequeue_rear', 
+      deque: currentDeque.slice(0, -1), 
+      dequeuedNode: null,
+      explanation: `"${rearNode.value}" removed from the rear.` 
+  };
+}
diff --git a/src/features/algorithms/queue/enqueueDequeueLogic.js b/src/features/algorithms/queue/enqueueDequeueLogic.js
new file mode 100644
index 000000000..996d2fd91
--- /dev/null
+++ b/src/features/algorithms/queue/enqueueDequeueLogic.js
@@ -0,0 +1,51 @@
+export function* enqueueGenerator(currentQueue, value) {
+  if (!value || (typeof value === 'string' && !value.trim())) {
+    yield { type: 'error', message: 'Please enter a value' };
+    return;
+  }
+
+  yield { 
+    phase: 'start', 
+    action: 'enqueue',
+    queue: [...currentQueue], 
+    newValue: value,
+    explanation: `Preparing to enqueue "${value}" to the rear of the queue...` 
+  };
+  
+  const nextQueue = [...currentQueue, { id: Date.now(), value }];
+  
+  yield { 
+    phase: 'complete', 
+    action: 'enqueue',
+    queue: nextQueue, 
+    newValue: null,
+    explanation: `Successfully added "${value}" to the rear.` 
+  };
+}
+
+export function* dequeueGenerator(currentQueue) {
+  if (currentQueue.length === 0) {
+    yield { type: 'error', message: 'Queue is empty!' };
+    return;
+  }
+
+  const dequeuedNode = currentQueue[0];
+  
+  yield { 
+    phase: 'start', 
+    action: 'dequeue',
+    queue: [...currentQueue], 
+    dequeuedNode: dequeuedNode,
+    explanation: `Preparing to dequeue "${dequeuedNode.value}" from the front...` 
+  };
+
+  const nextQueue = currentQueue.slice(1);
+  
+  yield { 
+    phase: 'complete', 
+    action: 'dequeue',
+    queue: nextQueue, 
+    dequeuedNode: null,
+    explanation: `Successfully removed "${dequeuedNode.value}" from the front.` 
+  };
+}
diff --git a/src/features/algorithms/queue/priorityQueueLogic.js b/src/features/algorithms/queue/priorityQueueLogic.js
new file mode 100644
index 000000000..843fc657e
--- /dev/null
+++ b/src/features/algorithms/queue/priorityQueueLogic.js
@@ -0,0 +1,67 @@
+export function* insertGenerator(currentPq, value, priorityStr) {
+  if (!value || priorityStr === "") {
+    yield { type: 'error', message: 'Please enter both value and priority' };
+    return;
+  }
+  const pri = Number(priorityStr);
+  if (isNaN(pri)) {
+    yield { type: 'error', message: 'Priority must be a number' };
+    return;
+  }
+
+  yield { 
+      phase: 'start', 
+      action: 'insert', 
+      pq: [...currentPq],
+      newValue: value,
+      newPri: pri,
+      explanation: `Inserting "${value}" with priority ${pri}...` 
+  };
+  
+  const newEl = { id: Date.now(), val: value, pri };
+  // Visualizing the insertion and sorting process step-by-step
+  let newPq = [...currentPq, newEl];
+  
+  yield {
+      phase: 'append',
+      action: 'insert',
+      pq: [...newPq],
+      newValue: value,
+      newPri: pri,
+      explanation: `Appended to the array. Now we need to sort based on priority.`
+  };
+
+  newPq.sort((a, b) => a.pri - b.pri);
+  
+  yield { 
+      phase: 'complete', 
+      action: 'insert',
+      pq: newPq, 
+      newValue: null,
+      explanation: `"${value}" inserted and queue sorted by priority.` 
+  };
+}
+
+export function* extractMinGenerator(currentPq) {
+  if (currentPq.length === 0) {
+    yield { type: 'error', message: 'Priority queue is empty!' };
+    return;
+  }
+  
+  const minEl = currentPq[0];
+  yield { 
+      phase: 'start', 
+      action: 'extract_min', 
+      pq: [...currentPq],
+      extractedNode: minEl,
+      explanation: `Extracting min element "${minEl.val}" (priority ${minEl.pri}) from the front...` 
+  };
+  
+  yield { 
+      phase: 'complete', 
+      action: 'extract_min', 
+      pq: currentPq.slice(1), 
+      extractedNode: null,
+      explanation: `"${minEl.val}" removed.` 
+  };
+}
diff --git a/src/features/algorithms/queue/queueIsEmptyLogic.js b/src/features/algorithms/queue/queueIsEmptyLogic.js
new file mode 100644
index 000000000..56f83e07a
--- /dev/null
+++ b/src/features/algorithms/queue/queueIsEmptyLogic.js
@@ -0,0 +1,70 @@
+export function* checkEmptyGenerator(queue) {
+  yield { 
+      phase: 'start', 
+      action: 'check',
+      queue: [...queue],
+      explanation: 'Checking if queue is empty... We evaluate if the length of the queue is 0.' 
+  };
+  
+  const empty = queue.length === 0;
+  
+  yield { 
+    phase: 'complete', 
+    action: 'check',
+    queue: [...queue],
+    isEmpty: empty, 
+    explanation: empty ? 'Length is 0. The Queue is empty!' : `Length is ${queue.length}. The Queue is NOT empty.` 
+  };
+}
+
+export function* enqueueGenerator(currentQueue, value) {
+  const val = typeof value === 'string' ? value.trim() : value;
+  if (!val) {
+    yield { type: 'error', message: 'Please enter a value' };
+    return;
+  }
+
+  yield { 
+      phase: 'start', 
+      action: 'enqueue',
+      queue: [...currentQueue],
+      newValue: val,
+      explanation: `Enqueuing "${val}"...` 
+  };
+  
+  const nextQueue = [...currentQueue, { id: Date.now(), value: val }];
+  
+  yield { 
+      phase: 'complete', 
+      action: 'enqueue',
+      queue: nextQueue, 
+      newValue: null,
+      explanation: `"${val}" added to rear.` 
+  };
+}
+
+export function* dequeueGenerator(currentQueue) {
+  if (currentQueue.length === 0) {
+    yield { type: 'error', message: 'Queue is empty!', isEmpty: true };
+    return;
+  }
+
+  const dequeuedNode = currentQueue[0];
+  yield { 
+      phase: 'start', 
+      action: 'dequeue',
+      queue: [...currentQueue],
+      dequeuedNode: dequeuedNode,
+      explanation: `Dequeuing "${dequeuedNode.value}" from the front...` 
+  };
+
+  const nextQueue = currentQueue.slice(1);
+  
+  yield { 
+      phase: 'complete', 
+      action: 'dequeue',
+      queue: nextQueue, 
+      dequeuedNode: null,
+      explanation: `"${dequeuedNode.value}" removed from front.` 
+  };
+}
diff --git a/src/features/algorithms/queue/queueIsFullLogic.js b/src/features/algorithms/queue/queueIsFullLogic.js
new file mode 100644
index 000000000..9dda80835
--- /dev/null
+++ b/src/features/algorithms/queue/queueIsFullLogic.js
@@ -0,0 +1,75 @@
+export function* checkFullGenerator(queue, capacity) {
+  yield { 
+      phase: 'start', 
+      action: 'check',
+      queue: [...queue],
+      explanation: `Checking if queue is full... We compare length (${queue.length}) with capacity (${capacity}).` 
+  };
+  
+  const full = queue.length >= capacity;
+  
+  yield { 
+    phase: 'complete', 
+    action: 'check',
+    queue: [...queue],
+    isFull: full, 
+    explanation: full ? `Length is ${queue.length} >= ${capacity}. The Queue is FULL.` : `Length is ${queue.length} < ${capacity}. The Queue is NOT full.` 
+  };
+}
+
+export function* enqueueGenerator(currentQueue, value, capacity) {
+  if (currentQueue.length >= capacity) {
+    yield { type: 'error', message: 'Queue is full!' };
+    return;
+  }
+
+  const val = typeof value === 'string' ? value.trim() : value;
+  if (!val) {
+    yield { type: 'error', message: 'Please enter a value' };
+    return;
+  }
+
+  yield { 
+      phase: 'start', 
+      action: 'enqueue',
+      queue: [...currentQueue],
+      newValue: val,
+      explanation: `Enqueuing "${val}"...` 
+  };
+  
+  const nextQueue = [...currentQueue, { id: Date.now(), value: val }];
+  
+  yield { 
+      phase: 'complete', 
+      action: 'enqueue',
+      queue: nextQueue, 
+      newValue: null,
+      explanation: `"${val}" added to rear.` 
+  };
+}
+
+export function* dequeueGenerator(currentQueue) {
+  if (currentQueue.length === 0) {
+    yield { type: 'error', message: 'Queue is empty!', isFull: false };
+    return;
+  }
+
+  const dequeuedNode = currentQueue[0];
+  yield { 
+      phase: 'start', 
+      action: 'dequeue',
+      queue: [...currentQueue],
+      dequeuedNode: dequeuedNode,
+      explanation: `Dequeuing "${dequeuedNode.value}" from the front...` 
+  };
+
+  const nextQueue = currentQueue.slice(1);
+  
+  yield { 
+      phase: 'complete', 
+      action: 'dequeue',
+      queue: nextQueue, 
+      dequeuedNode: null,
+      explanation: `"${dequeuedNode.value}" removed from front.` 
+  };
+}
diff --git a/src/features/algorithms/queue/queuePeekFrontLogic.js b/src/features/algorithms/queue/queuePeekFrontLogic.js
new file mode 100644
index 000000000..e994613c0
--- /dev/null
+++ b/src/features/algorithms/queue/queuePeekFrontLogic.js
@@ -0,0 +1,75 @@
+export function* peekFrontGenerator(queue) {
+  if (queue.length === 0) {
+    yield { type: 'error', message: 'Queue is empty!', isFull: false };
+    return;
+  }
+
+  const peekedNode = queue[0];
+  yield { 
+      phase: 'start', 
+      action: 'peek',
+      queue: [...queue],
+      peekedNode: peekedNode,
+      explanation: `Peeking at front element... We look at index 0.` 
+  };
+  
+  yield { 
+    phase: 'complete', 
+    action: 'peek',
+    queue: [...queue],
+    peekedNode: peekedNode,
+    explanation: `The front element is "${peekedNode.value}".` 
+  };
+}
+
+export function* enqueueGenerator(currentQueue, value) {
+  const val = typeof value === 'string' ? value.trim() : value;
+  if (!val) {
+    yield { type: 'error', message: 'Please enter a value' };
+    return;
+  }
+
+  yield { 
+      phase: 'start', 
+      action: 'enqueue',
+      queue: [...currentQueue],
+      newValue: val,
+      explanation: `Enqueuing "${val}"...` 
+  };
+  
+  const nextQueue = [...currentQueue, { id: Date.now(), value: val }];
+  
+  yield { 
+      phase: 'complete', 
+      action: 'enqueue',
+      queue: nextQueue, 
+      newValue: null,
+      explanation: `"${val}" added to rear.` 
+  };
+}
+
+export function* dequeueGenerator(currentQueue) {
+  if (currentQueue.length === 0) {
+    yield { type: 'error', message: 'Queue is empty!', isFull: false };
+    return;
+  }
+
+  const dequeuedNode = currentQueue[0];
+  yield { 
+      phase: 'start', 
+      action: 'dequeue',
+      queue: [...currentQueue],
+      dequeuedNode: dequeuedNode,
+      explanation: `Dequeuing "${dequeuedNode.value}" from the front...` 
+  };
+
+  const nextQueue = currentQueue.slice(1);
+  
+  yield { 
+      phase: 'complete', 
+      action: 'dequeue',
+      queue: nextQueue, 
+      dequeuedNode: null,
+      explanation: `"${dequeuedNode.value}" removed from front.` 
+  };
+}
diff --git a/src/features/algorithms/queue/queueSingleEndedLogic.js b/src/features/algorithms/queue/queueSingleEndedLogic.js
new file mode 100644
index 000000000..17b6e2c25
--- /dev/null
+++ b/src/features/algorithms/queue/queueSingleEndedLogic.js
@@ -0,0 +1,99 @@
+export function* enqueueRearGenerator(currentQueue, value) {
+  const val = typeof value === 'string' ? value.trim() : value;
+  if (!val) {
+    yield { type: 'error', message: 'Please enter a value' };
+    return;
+  }
+
+  yield { 
+      phase: 'start', 
+      action: 'enqueue',
+      queue: [...currentQueue],
+      newValue: val,
+      explanation: `Enqueuing "${val}" at rear...` 
+  };
+  
+  const nextQueue = [...currentQueue, { id: Date.now(), value: val }];
+  
+  yield { 
+      phase: 'complete', 
+      action: 'enqueue',
+      queue: nextQueue, 
+      newValue: null,
+      explanation: `"${val}" added to rear.` 
+  };
+}
+
+export function* dequeueFrontGenerator(currentQueue) {
+  if (currentQueue.length === 0) {
+    yield { type: 'error', message: 'Queue is empty!' };
+    return;
+  }
+
+  const dequeuedNode = currentQueue[0];
+  yield { 
+      phase: 'start', 
+      action: 'dequeue',
+      queue: [...currentQueue],
+      dequeuedNode: dequeuedNode,
+      explanation: `Dequeuing "${dequeuedNode.value}" from front...` 
+  };
+
+  const nextQueue = currentQueue.slice(1);
+  
+  yield { 
+      phase: 'complete', 
+      action: 'dequeue',
+      queue: nextQueue, 
+      dequeuedNode: null,
+      explanation: `"${dequeuedNode.value}" removed from front.` 
+  };
+}
+
+export function* peekFrontGenerator(queue) {
+  if (queue.length === 0) {
+    yield { type: 'error', message: 'Queue is empty!' };
+    return;
+  }
+
+  const peekedNode = queue[0];
+  yield { 
+      phase: 'start', 
+      action: 'peek_front',
+      queue: [...queue],
+      peekedNode: peekedNode,
+      explanation: `Peeking at front element...` 
+  };
+  
+  yield { 
+      phase: 'complete', 
+      action: 'peek_front',
+      queue: [...queue],
+      peekedNode: null,
+      explanation: `Front element: "${peekedNode.value}"` 
+  };
+}
+
+export function* peekRearGenerator(queue) {
+  if (queue.length === 0) {
+    yield { type: 'error', message: 'Queue is empty!' };
+    return;
+  }
+
+  const peekedNode = queue[queue.length - 1];
+  yield { 
+      phase: 'start', 
+      action: 'peek_rear',
+      queue: [...queue],
+      peekedNode: peekedNode,
+      explanation: `Peeking at rear element...` 
+  };
+  
+  yield { 
+      phase: 'complete', 
+      action: 'peek_rear',
+      queue: [...queue],
+      peekedNode: null,
+      explanation: `Rear element: "${peekedNode.value}"` 
+  };
+}
diff --git a/src/features/algorithms/recursion/binarySearchLogic.js b/src/features/algorithms/recursion/binarySearchLogic.js
new file mode 100644
index 000000000..730676d8f
--- /dev/null
+++ b/src/features/algorithms/recursion/binarySearchLogic.js
@@ -0,0 +1,203 @@
+export function* generateBinarySearchFrames(arr, target) {
+  const stack = [];
+  let frameIdCounter = 0;
+
+  function* run(low, high, parentId = null) {
+    const myId = ++frameIdCounter;
+    const currentFrame = {
+      id: myId,
+      name: "binarySearch",
+      low,
+      high,
+      mid: null,
+      status: "calling",
+      parentId,
+    };
+    stack.push(currentFrame);
+
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      low,
+      high,
+      mid: null,
+      activeLine: 1,
+      description: `Calling binarySearch(low = ${low}, high = ${high}). Pushing new stack frame.`,
+      activeFrameId: myId,
+    };
+
+    // Check base case: low > high
+    stack[stack.length - 1].status = "checking_base";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      low,
+      high,
+      mid: null,
+      activeLine: 2,
+      description: `Checking base case: low (${low}) > high (${high})?`,
+      activeFrameId: myId,
+    };
+
+    if (low > high) {
+      stack[stack.length - 1].status = "not_found";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        low,
+        high,
+        mid: null,
+        activeLine: 2,
+        description: `Base case met: low (${low}) > high (${high}). Target element ${target} not found!`,
+        activeFrameId: myId,
+      };
+
+      stack[stack.length - 1].status = "returning";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        low,
+        high,
+        mid: null,
+        activeLine: 2,
+        description: `Returning -1 from binarySearch(low = ${low}, high = ${high}).`,
+        activeFrameId: myId,
+      };
+
+      stack.pop();
+      return -1;
+    }
+
+    // Compute mid
+    const mid = Math.floor((low + high) / 2);
+    stack[stack.length - 1].mid = mid;
+    stack[stack.length - 1].status = "computing_mid";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      low,
+      high,
+      mid,
+      activeLine: 4,
+      description: `Computing mid index: mid = Math.floor((${low} + ${high}) / 2) = ${mid}. Element at mid is ${arr[mid]}.`,
+      activeFrameId: myId,
+    };
+
+    // Check if target found
+    stack[stack.length - 1].status = "checking_match";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      low,
+      high,
+      mid,
+      activeLine: 5,
+      description: `Checking if arr[mid] (${arr[mid]}) === target (${target})?`,
+      activeFrameId: myId,
+    };
+
+    if (arr[mid] === target) {
+      stack[stack.length - 1].status = "found";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        low,
+        high,
+        mid,
+        activeLine: 5,
+        description: `Target element found at index ${mid}!`,
+        activeFrameId: myId,
+      };
+
+      stack[stack.length - 1].status = "returning";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        low,
+        high,
+        mid,
+        activeLine: 5,
+        description: `Returning index ${mid} from binarySearch(low = ${low}, high = ${high}).`,
+        activeFrameId: myId,
+      };
+
+      stack.pop();
+      return mid;
+    }
+
+    // Check if target is smaller
+    stack[stack.length - 1].status = "checking_less";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      low,
+      high,
+      mid,
+      activeLine: 7,
+      description: `Checking if target (${target}) < arr[mid] (${arr[mid]})?`,
+      activeFrameId: myId,
+    };
+
+    if (target < arr[mid]) {
+      stack[stack.length - 1].status = "searching_left";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        low,
+        high,
+        mid,
+        activeLine: 8,
+        description: `Target ${target} is smaller than ${arr[mid]}. Searching left half: binarySearch(low = ${low}, high = ${mid - 1}).`,
+        activeFrameId: myId,
+      };
+
+      const res = yield* run(low, mid - 1, myId);
+
+      const myFrameIndex = stack.findIndex((f) => f.id === myId);
+      if (myFrameIndex !== -1) {
+        stack[myFrameIndex].status = "returning";
+        yield {
+          stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex + 1))),
+          low,
+          high,
+          mid,
+          activeLine: 8,
+          description: `Returning ${res} to caller from binarySearch(low = ${low}, high = ${high}).`,
+          activeFrameId: myId,
+        };
+        stack.pop();
+      }
+      return res;
+    } else {
+      stack[stack.length - 1].status = "searching_right";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        low,
+        high,
+        mid,
+        activeLine: 10,
+        description: `Target ${target} is greater than ${arr[mid]}. Searching right half: binarySearch(low = ${mid + 1}, high = ${high}).`,
+        activeFrameId: myId,
+      };
+
+      const res = yield* run(mid + 1, high, myId);
+
+      const myFrameIndex = stack.findIndex((f) => f.id === myId);
+      if (myFrameIndex !== -1) {
+        stack[myFrameIndex].status = "returning";
+        yield {
+          stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex + 1))),
+          low,
+          high,
+          mid,
+          activeLine: 10,
+          description: `Returning ${res} to caller from binarySearch(low = ${low}, high = ${high}).`,
+          activeFrameId: myId,
+        };
+        stack.pop();
+      }
+      return res;
+    }
+  }
+
+  const result = yield* run(0, arr.length - 1);
+  yield {
+    stack: [],
+    low: null,
+    high: null,
+    mid: null,
+    activeLine: 0,
+    description: `Recursion finished. Binary Search result index is ${result}.`,
+    activeFrameId: null,
+  };
+}
diff --git a/src/features/algorithms/recursion/factorialLogic.js b/src/features/algorithms/recursion/factorialLogic.js
new file mode 100644
index 000000000..4be85cbbe
--- /dev/null
+++ b/src/features/algorithms/recursion/factorialLogic.js
@@ -0,0 +1,103 @@
+export function* generateFactorialFrames(n) {
+  const stack = [];
+  let frameIdCounter = 0;
+
+  function* fact(val, parentId = null) {
+    const myId = ++frameIdCounter;
+    const currentFrame = {
+      id: myId,
+      name: "fact",
+      n: val,
+      status: "calling",
+      retVal: null,
+      parentId,
+    };
+    stack.push(currentFrame);
+
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      activeLine: 1,
+      description: `Calling fact(${val}). Pushing a new stack frame onto the Call Stack.`,
+      phase: "call",
+      activeFrameId: myId,
+    };
+
+    stack[stack.length - 1].status = "checking_base";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      activeLine: 2,
+      description: `Checking if base case condition is met: is n (${val}) <= 1?`,
+      phase: "call",
+      activeFrameId: myId,
+    };
+
+    if (val <= 1) {
+      stack[stack.length - 1].status = "base_case";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        activeLine: 3,
+        description: `Base case met! n (${val}) <= 1. Returning 1.`,
+        phase: "basecase",
+        activeFrameId: myId,
+      };
+
+      stack[stack.length - 1].status = "returning";
+      stack[stack.length - 1].retVal = 1;
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        activeLine: 3,
+        description: `Returning 1 from fact(${val}). Stack frame is ready to pop.`,
+        phase: "return",
+        activeFrameId: myId,
+      };
+
+      stack.pop();
+      return 1;
+    }
+
+    stack[stack.length - 1].status = "waiting";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      activeLine: 4,
+      description: `Base case not met. We need to evaluate fact(${val - 1}) first. Calling fact(${val - 1}).`,
+      phase: "call",
+      activeFrameId: myId,
+    };
+
+    const subResult = yield* fact(val - 1, myId);
+
+    const myFrameIndex = stack.findIndex((f) => f.id === myId);
+    stack[myFrameIndex].status = "calculating";
+    stack[myFrameIndex].subResult = subResult;
+    stack[myFrameIndex].retVal = val * subResult;
+
+    yield {
+      stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex + 1))),
+      activeLine: 4,
+      description: `Received return value ${subResult} from fact(${val - 1}). Calculating fact(${val}) = ${val} * fact(${val - 1}) = ${val} * ${subResult} = ${val * subResult}.`,
+      phase: "return",
+      activeFrameId: myId,
+    };
+
+    stack[myFrameIndex].status = "returning";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex + 1))),
+      activeLine: 4,
+      description: `Returning ${val * subResult} from fact(${val}). Stack frame is ready to pop.`,
+      phase: "return",
+      activeFrameId: myId,
+    };
+
+    stack.pop();
+    return val * subResult;
+  }
+
+  const finalResult = yield* fact(n);
+  yield {
+    stack: [],
+    activeLine: 0,
+    description: `Recursion finished! Final returned value is ${finalResult}.`,
+    phase: "completed",
+    activeFrameId: null,
+  };
+}
diff --git a/src/features/algorithms/recursion/fibonacciLogic.js b/src/features/algorithms/recursion/fibonacciLogic.js
new file mode 100644
index 000000000..415f3f2e1
--- /dev/null
+++ b/src/features/algorithms/recursion/fibonacciLogic.js
@@ -0,0 +1,148 @@
+export function* generateFibonacciFrames(n) {
+  const stack = [];
+  let frameIdCounter = 0;
+  const treeNodesMap = {};
+
+  function prebuildTree(val, path = "root") {
+    treeNodesMap[path] = {
+      id: path,
+      label: `fib(${val})`,
+      val,
+      status: "pending",
+      result: null,
+      parentId: path.includes("-") ? path.substring(0, path.lastIndexOf("-")) : null,
+    };
+    if (val <= 1) return;
+    prebuildTree(val - 1, path + "-L");
+    prebuildTree(val - 2, path + "-R");
+  }
+
+  prebuildTree(n);
+
+  function* fib(val, path = "root", parentId = null) {
+    const myId = ++frameIdCounter;
+    const currentFrame = {
+      id: myId,
+      name: "fib",
+      n: val,
+      status: "calling",
+      retVal: null,
+      parentId,
+      path,
+    };
+    stack.push(currentFrame);
+    treeNodesMap[path].status = "active";
+
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+      activeLine: 1,
+      description: `Calling fib(${val}). Pushing onto the call stack and activating tree node.`,
+      phase: "call",
+      activeFrameId: myId,
+    };
+
+    stack[stack.length - 1].status = "checking_base";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+      activeLine: 2,
+      description: `Checking base case condition for fib(${val}): is n <= 1?`,
+      phase: "call",
+      activeFrameId: myId,
+    };
+
+    if (val <= 1) {
+      stack[stack.length - 1].status = "base_case";
+      treeNodesMap[path].status = "base";
+      treeNodesMap[path].result = val;
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+        activeLine: 2,
+        description: `Base case met! fib(${val}) returns ${val}.`,
+        phase: "basecase",
+        activeFrameId: myId,
+      };
+
+      stack[stack.length - 1].status = "returning";
+      stack[stack.length - 1].retVal = val;
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+        activeLine: 2,
+        description: `Returning ${val} from fib(${val}). Stack frame is ready to pop.`,
+        phase: "return",
+        activeFrameId: myId,
+      };
+
+      stack.pop();
+      return val;
+    }
+
+    stack[stack.length - 1].status = "waiting_L";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+      activeLine: 3,
+      description: `fib(${val}) requires left term fib(${val - 1}). Calling fib(${val - 1}).`,
+      phase: "call",
+      activeFrameId: myId,
+    };
+
+    const leftVal = yield* fib(val - 1, path + "-L", myId);
+
+    const myFrameIndex = stack.findIndex((f) => f.id === myId);
+    stack[myFrameIndex].status = "waiting_R";
+    stack[myFrameIndex].leftVal = leftVal;
+    yield {
+      stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex + 1))),
+      treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+      activeLine: 3,
+      description: `Left child returned ${leftVal}. Now fib(${val}) requires right term fib(${val - 2}). Calling fib(${val - 2}).`,
+      phase: "call",
+      activeFrameId: myId,
+    };
+
+    const rightVal = yield* fib(val - 2, path + "-R", myId);
+
+    const myFrameIndex2 = stack.findIndex((f) => f.id === myId);
+    stack[myFrameIndex2].status = "calculating";
+    stack[myFrameIndex2].rightVal = rightVal;
+    stack[myFrameIndex2].retVal = leftVal + rightVal;
+    treeNodesMap[path].status = "returned";
+    treeNodesMap[path].result = leftVal + rightVal;
+
+    yield {
+      stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex2 + 1))),
+      treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+      activeLine: 3,
+      description: `Right child returned ${rightVal}. Calculating fib(${val}) = left (${leftVal}) + right (${rightVal}) = ${leftVal + rightVal}.`,
+      phase: "return",
+      activeFrameId: myId,
+    };
+
+    stack[myFrameIndex2].status = "returning";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex2 + 1))),
+      treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+      activeLine: 3,
+      description: `Returning ${leftVal + rightVal} from fib(${val}). Stack frame is ready to pop.`,
+      phase: "return",
+      activeFrameId: myId,
+    };
+
+    stack.pop();
+    return leftVal + rightVal;
+  }
+
+  const finalResult = yield* fib(n);
+  yield {
+    stack: [],
+    treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+    activeLine: 0,
+    description: `Recursion finished! Final returned value is ${finalResult}.`,
+    phase: "completed",
+    activeFrameId: null,
+  };
+}
diff --git a/src/features/algorithms/recursion/hanoiLogic.js b/src/features/algorithms/recursion/hanoiLogic.js
new file mode 100644
index 000000000..1bc6a0aa8
--- /dev/null
+++ b/src/features/algorithms/recursion/hanoiLogic.js
@@ -0,0 +1,145 @@
+export function* generateHanoiFrames(n) {
+  const stack = [];
+  const pegs = {
+    A: Array.from({ length: n }, (_, i) => n - i), // e.g. [3, 2, 1]
+    B: [],
+    C: []
+  };
+  let frameIdCounter = 0;
+
+  function moveDisk(disk, from, to) {
+    const diskIndex = pegs[from].indexOf(disk);
+    if (diskIndex !== -1) {
+      pegs[from].splice(diskIndex, 1);
+    }
+    pegs[to].push(disk);
+  }
+
+  function* solve(val, src, dest, aux, parentId = null) {
+    const myId = ++frameIdCounter;
+    const currentFrame = {
+      id: myId,
+      n: val,
+      src,
+      dest,
+      aux,
+      status: "calling",
+      parentId
+    };
+    stack.push(currentFrame);
+
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      pegs: JSON.parse(JSON.stringify(pegs)),
+      activeLine: "entry",
+      description: `Calling hanoi(n = ${val}, src = '${src}', dest = '${dest}', aux = '${aux}'). Pushing stack frame onto the Call Stack.`,
+      activeFrameId: myId,
+      movingDisk: null
+    };
+
+    stack[stack.length - 1].status = "checking_base";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      pegs: JSON.parse(JSON.stringify(pegs)),
+      activeLine: "check",
+      description: `Checking base case condition: is n (${val}) === 1?`,
+      activeFrameId: myId,
+      movingDisk: null
+    };
+
+    if (val === 1) {
+      stack[stack.length - 1].status = "base_case";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        pegs: JSON.parse(JSON.stringify(pegs)),
+        activeLine: "move1",
+        description: `Base case met! Moving disk 1 from peg ${src} to peg ${dest}.`,
+        activeFrameId: myId,
+        movingDisk: 1,
+        fromPeg: src,
+        toPeg: dest
+      };
+
+      moveDisk(1, src, dest);
+
+      stack[stack.length - 1].status = "returning";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        pegs: JSON.parse(JSON.stringify(pegs)),
+        activeLine: "ret1",
+        description: `Disk 1 moved. Returning from hanoi(1, '${src}', '${dest}', '${aux}').`,
+        activeFrameId: myId,
+        movingDisk: null
+      };
+
+      stack.pop();
+      return;
+    }
+
+    stack[stack.length - 1].status = "waiting_1";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      pegs: JSON.parse(JSON.stringify(pegs)),
+      activeLine: "recurse1",
+      description: `n = ${val} > 1. Recursively solve for top n - 1 (${val - 1}) disks: move from peg ${src} to peg ${aux} using peg ${dest}.`,
+      activeFrameId: myId,
+      movingDisk: null
+    };
+
+    yield* solve(val - 1, src, aux, dest, myId);
+
+    const myFrameIndex = stack.findIndex((f) => f.id === myId);
+    if (myFrameIndex !== -1) {
+      stack[myFrameIndex].status = "moving";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex + 1))),
+        pegs: JSON.parse(JSON.stringify(pegs)),
+        activeLine: "moveN",
+        description: `Recursive call returned. Move the remaining largest disk ${val} from peg ${src} to peg ${dest}.`,
+        activeFrameId: myId,
+        movingDisk: val,
+        fromPeg: src,
+        toPeg: dest
+      };
+
+      moveDisk(val, src, dest);
+
+      stack[myFrameIndex].status = "waiting_2";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex + 1))),
+        pegs: JSON.parse(JSON.stringify(pegs)),
+        activeLine: "recurse2",
+        description: `Largest disk ${val} placed on destination. Recursively solve for the n - 1 (${val - 1}) disks on peg ${aux}: move to peg ${dest} using peg ${src}.`,
+        activeFrameId: myId,
+        movingDisk: null
+      };
+
+      yield* solve(val - 1, aux, dest, src, myId);
+    }
+
+    const myFrameIndex2 = stack.findIndex((f) => f.id === myId);
+    if (myFrameIndex2 !== -1) {
+      stack[myFrameIndex2].status = "returning";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex2 + 1))),
+        pegs: JSON.parse(JSON.stringify(pegs)),
+        activeLine: "recurse2",
+        description: `Completed both recursive subproblems. Returning from hanoi(${val}, '${src}', '${dest}', '${aux}').`,
+        activeFrameId: myId,
+        movingDisk: null
+      };
+      stack.pop();
+    }
+  }
+
+  yield* solve(n, "A", "C", "B");
+
+  yield {
+    stack: [],
+    pegs: JSON.parse(JSON.stringify(pegs)),
+    activeLine: "completed",
+    description: `Tower of Hanoi solved! All ${n} disks successfully moved to peg C.`,
+    activeFrameId: null,
+    movingDisk: null
+  };
+}
diff --git a/src/features/algorithms/recursion/nQueensLogic.js b/src/features/algorithms/recursion/nQueensLogic.js
new file mode 100644
index 000000000..8f62d0c0d
--- /dev/null
+++ b/src/features/algorithms/recursion/nQueensLogic.js
@@ -0,0 +1,154 @@
+export function* generateNQueensFrames() {
+  const stack = [];
+  const board = [-1, -1, -1, -1];
+  const solutions = [];
+  let frameIdCounter = 0;
+
+  function isSafe(row, col) {
+    for (let c = 0; c < col; c++) {
+      if (board[c] === row) return false;
+    }
+    for (let r = row, c = col; r >= 0 && c >= 0; r--, c--) {
+      if (board[c] === r) return false;
+    }
+    for (let r = row, c = col; r < 4 && c >= 0; r++, c--) {
+      if (board[c] === r) return false;
+    }
+    return true;
+  }
+
+  function* solve(col, parentId = null) {
+    const myId = ++frameIdCounter;
+    const currentFrame = {
+      id: myId,
+      name: "solve",
+      col,
+      status: "trying",
+      parentId,
+    };
+    stack.push(currentFrame);
+
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      board: [...board],
+      solutions: JSON.parse(JSON.stringify(solutions)),
+      activeCell: { row: -1, col },
+      conflictCell: null,
+      activeLine: 1,
+      description: `Calling solve(col = ${col}). Searching for a safe row in this column.`,
+      activeFrameId: myId,
+    };
+
+    if (col >= 4) {
+      solutions.push([...board]);
+      stack[stack.length - 1].status = "base_case";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        board: [...board],
+        solutions: JSON.parse(JSON.stringify(solutions)),
+        activeCell: null,
+        conflictCell: null,
+        activeLine: 2,
+        description: `Base case met! All 4 queens placed safely. Solution #${solutions.length} found!`,
+        activeFrameId: myId,
+      };
+
+      stack.pop();
+      return;
+    }
+
+    for (let row = 0; row < 4; row++) {
+      board[col] = row;
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        board: [...board],
+        solutions: JSON.parse(JSON.stringify(solutions)),
+        activeCell: { row, col },
+        conflictCell: null,
+        activeLine: 5,
+        description: `Placing Queen at cell (${row}, ${col}). Checking safety...`,
+        activeFrameId: myId,
+      };
+
+      const safe = isSafe(row, col);
+      if (safe) {
+        yield {
+          stack: JSON.parse(JSON.stringify(stack)),
+          board: [...board],
+          solutions: JSON.parse(JSON.stringify(solutions)),
+          activeCell: { row, col },
+          conflictCell: null,
+          activeLine: 6,
+          description: `Position (${row}, ${col}) is SAFE. Placing queen and calling recursively...`,
+          activeFrameId: myId,
+        };
+
+        yield* solve(col + 1, myId);
+        
+        const myIndex = stack.findIndex((f) => f.id === myId);
+        if (myIndex !== -1) {
+          stack[myIndex].status = "trying";
+        }
+      } else {
+        let conflictCol = -1;
+        for (let c = 0; c < col; c++) {
+          if (board[c] === row || Math.abs(board[c] - row) === Math.abs(c - col)) {
+            conflictCol = c;
+            break;
+          }
+        }
+        yield {
+          stack: JSON.parse(JSON.stringify(stack)),
+          board: [...board],
+          solutions: JSON.parse(JSON.stringify(solutions)),
+          activeCell: { row, col },
+          conflictCell: conflictCol !== -1 ? { row: board[conflictCol], col: conflictCol } : null,
+          activeLine: 5,
+          description: `Conflict found with Queen at cell (${board[conflictCol]}, ${conflictCol}). Backtracking...`,
+          activeFrameId: myId,
+        };
+      }
+
+      board[col] = -1;
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        board: [...board],
+        solutions: JSON.parse(JSON.stringify(solutions)),
+        activeCell: { row, col },
+        conflictCell: null,
+        activeLine: 5,
+        description: `Removing Queen from cell (${row}, ${col}) to try the next row.`,
+        activeFrameId: myId,
+      };
+    }
+
+    const myFrameIndex = stack.findIndex((f) => f.id === myId);
+    if (myFrameIndex !== -1) {
+      stack[myFrameIndex].status = "returning";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex + 1))),
+        board: [...board],
+        solutions: JSON.parse(JSON.stringify(solutions)),
+        activeCell: null,
+        conflictCell: null,
+        activeLine: 9,
+        description: `All rows in column ${col} explored. Backtracking to column ${col - 1}.`,
+        activeFrameId: myId,
+      };
+    }
+
+    stack.pop();
+  }
+
+  yield* solve(0);
+  yield {
+    stack: [],
+    board: [-1, -1, -1, -1],
+    solutions: JSON.parse(JSON.stringify(solutions)),
+    activeCell: null,
+    conflictCell: null,
+    activeLine: 0,
+    description: `Backtracking completed! Total solutions found: ${solutions.length}.`,
+    activeFrameId: null,
+  };
+}
diff --git a/src/features/algorithms/recursion/palindromeLogic.js b/src/features/algorithms/recursion/palindromeLogic.js
new file mode 100644
index 000000000..8b06de761
--- /dev/null
+++ b/src/features/algorithms/recursion/palindromeLogic.js
@@ -0,0 +1,151 @@
+export function* generatePalindromeFrames(rawStr) {
+  const str = rawStr.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
+  const stack = [];
+  const len = str.length;
+  let frameIdCounter = 0;
+
+  function* run(i, parentId = null) {
+    const myId = ++frameIdCounter;
+    const currentFrame = {
+      id: myId,
+      name: "isPalindrome",
+      i,
+      status: "calling",
+      parentId,
+    };
+    stack.push(currentFrame);
+
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      activeLine: 1,
+      iIndex: i,
+      oppIndex: len - 1 - i,
+      statusType: "normal",
+      description: `Calling isPalindrome(i = ${i}). Compares characters from outer bounds inwards.`,
+      activeFrameId: myId,
+    };
+
+    stack[stack.length - 1].status = "checking_base";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      activeLine: 2,
+      iIndex: i,
+      oppIndex: len - 1 - i,
+      statusType: "normal",
+      description: `Checking base case: is pointer i (${i}) >= middle (${Math.floor(len / 2)})?`,
+      activeFrameId: myId,
+    };
+
+    if (i >= Math.floor(len / 2)) {
+      stack[stack.length - 1].status = "base_case";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        activeLine: 2,
+        iIndex: i,
+        oppIndex: len - 1 - i,
+        statusType: "success",
+        description: `Base case met! i (${i}) >= middle. Pointers crossed; all checked indices match. Returning true.`,
+        activeFrameId: myId,
+      };
+
+      stack[stack.length - 1].status = "returning";
+      stack[stack.length - 1].retVal = "true";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        activeLine: 2,
+        iIndex: i,
+        oppIndex: len - 1 - i,
+        statusType: "success",
+        description: `Returning true from isPalindrome(i = ${i}).`,
+        activeFrameId: myId,
+      };
+
+      stack.pop();
+      return true;
+    }
+
+    // Compare characters
+    const charL = str[i].toLowerCase();
+    const charR = str[len - 1 - i].toLowerCase();
+
+    stack[stack.length - 1].status = "comparing";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      activeLine: 3,
+      iIndex: i,
+      oppIndex: len - 1 - i,
+      statusType: charL === charR ? "success" : "error",
+      description: `Comparing str[${i}] ('${str[i]}') and str[${len - 1 - i}] ('${str[len - 1 - i]}').`,
+      activeFrameId: myId,
+    };
+
+    if (charL !== charR) {
+      stack[stack.length - 1].status = "mismatch";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        activeLine: 3,
+        iIndex: i,
+        oppIndex: len - 1 - i,
+        statusType: "error",
+        description: `Mismatch! '${str[i]}' !== '${str[len - 1 - i]}'. Returning false immediately.`,
+        activeFrameId: myId,
+      };
+
+      stack[stack.length - 1].status = "returning";
+      stack[stack.length - 1].retVal = "false";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        activeLine: 3,
+        iIndex: i,
+        oppIndex: len - 1 - i,
+        statusType: "error",
+        description: `Returning false from isPalindrome(i = ${i}).`,
+        activeFrameId: myId,
+      };
+
+      stack.pop();
+      return false;
+    }
+
+    stack[stack.length - 1].status = "waiting";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      activeLine: 4,
+      iIndex: i,
+      oppIndex: len - 1 - i,
+      statusType: "success",
+      description: `Characters match. Making recursive call: isPalindrome(i = ${i + 1}).`,
+      activeFrameId: myId,
+    };
+
+    const subResult = yield* run(i + 1, myId);
+
+    const myFrameIndex = stack.findIndex((f) => f.id === myId);
+    stack[myFrameIndex].status = "returning";
+    stack[myFrameIndex].retVal = String(subResult);
+
+    yield {
+      stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex + 1))),
+      activeLine: 4,
+      iIndex: i,
+      oppIndex: len - 1 - i,
+      statusType: subResult ? "success" : "error",
+      description: `Inner call returned ${subResult}. Returning ${subResult} from isPalindrome(i = ${i}).`,
+      activeFrameId: myId,
+    };
+
+    stack.pop();
+    return subResult;
+  }
+
+  const finalResult = yield* run(0);
+  yield {
+    stack: [],
+    activeLine: 0,
+    iIndex: -1,
+    oppIndex: -1,
+    statusType: finalResult ? "success" : "error",
+    description: `Recursion finished. String is${finalResult ? "" : " NOT"} a palindrome. Returns ${finalResult}.`,
+    activeFrameId: null,
+  };
+}
diff --git a/src/features/algorithms/recursion/print1ToNLogic.js b/src/features/algorithms/recursion/print1ToNLogic.js
new file mode 100644
index 000000000..67d1c0141
--- /dev/null
+++ b/src/features/algorithms/recursion/print1ToNLogic.js
@@ -0,0 +1,102 @@
+export function* generatePrint1ToNFrames(n) {
+  const stack = [];
+  const printed = [];
+  let frameIdCounter = 0;
+
+  function* run(i, maxVal, parentId = null) {
+    const myId = ++frameIdCounter;
+    const currentFrame = {
+      id: myId,
+      name: "print1ToN",
+      i,
+      n: maxVal,
+      status: "calling",
+      parentId,
+    };
+    stack.push(currentFrame);
+
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      printed: [...printed],
+      activeLine: 1,
+      description: `Calling print1ToN(i = ${i}, n = ${maxVal}). Pushing new stack frame.`,
+      activeFrameId: myId,
+    };
+
+    stack[stack.length - 1].status = "checking_base";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      printed: [...printed],
+      activeLine: 2,
+      description: `Checking base case condition: is i (${i}) > n (${maxVal})?`,
+      activeFrameId: myId,
+    };
+
+    if (i > maxVal) {
+      stack[stack.length - 1].status = "base_case";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        printed: [...printed],
+        activeLine: 2,
+        description: `Base case met! i (${i}) > n (${maxVal}). Stopping recursion.`,
+        activeFrameId: myId,
+      };
+
+      stack[stack.length - 1].status = "returning";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        printed: [...printed],
+        activeLine: 2,
+        description: `Returning from print1ToN(i = ${i}). Stack frame is ready to pop.`,
+        activeFrameId: myId,
+      };
+
+      stack.pop();
+      return;
+    }
+
+    // Print i
+    printed.push(i);
+    stack[stack.length - 1].status = "printing";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      printed: [...printed],
+      activeLine: 3,
+      description: `Printing value: ${i}. Output array is updated.`,
+      activeFrameId: myId,
+    };
+
+    stack[stack.length - 1].status = "waiting";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      printed: [...printed],
+      activeLine: 4,
+      description: `Making recursive call for next number: print1ToN(i = ${i + 1}, n = ${maxVal}).`,
+      activeFrameId: myId,
+    };
+
+    yield* run(i + 1, maxVal, myId);
+
+    const myFrameIndex = stack.findIndex((f) => f.id === myId);
+    if (myFrameIndex !== -1) {
+      stack[myFrameIndex].status = "returning";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex + 1))),
+        printed: [...printed],
+        activeLine: 4,
+        description: `Returning back to caller print1ToN(i = ${i}). Stack frame is ready to pop.`,
+        activeFrameId: myId,
+      };
+      stack.pop();
+    }
+  }
+
+  yield* run(1, n);
+  yield {
+    stack: [],
+    printed: [...printed],
+    activeLine: 0,
+    description: `Recursion finished. All numbers from 1 to ${n} have been printed.`,
+    activeFrameId: null,
+  };
+}
diff --git a/src/features/algorithms/recursion/printNTo1Logic.js b/src/features/algorithms/recursion/printNTo1Logic.js
new file mode 100644
index 000000000..cfc686b9d
--- /dev/null
+++ b/src/features/algorithms/recursion/printNTo1Logic.js
@@ -0,0 +1,113 @@
+export function* generatePrintNTo1Frames(n) {
+  if (n <= 0) {
+    yield {
+      stack: [],
+      printed: [],
+      activeLine: null,
+      statusType: 'error',
+      description: `Invalid input: N must be greater than 0 (received ${n}).`,
+      activeFrameId: null,
+    };
+    return;
+  }
+  const stack = [];
+  const printed = [];
+  let frameIdCounter = 0;
+
+  function* run(i, parentId = null) {
+    const myId = ++frameIdCounter;
+    const currentFrame = {
+      id: myId,
+      name: "printNTo1",
+      i,
+      status: "calling",
+      parentId,
+    };
+    stack.push(currentFrame);
+
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      printed: [...printed],
+      activeLine: 1,
+      description: `Calling printNTo1(i = ${i}). Pushing new stack frame.`,
+      activeFrameId: myId,
+    };
+
+    stack[stack.length - 1].status = "checking_base";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      printed: [...printed],
+      activeLine: 2,
+      description: `Checking base case condition: is i (${i}) < 1?`,
+      activeFrameId: myId,
+    };
+
+    if (i < 1) {
+      stack[stack.length - 1].status = "base_case";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        printed: [...printed],
+        activeLine: 2,
+        description: `Base case met! i (${i}) < 1. Stopping recursion.`,
+        activeFrameId: myId,
+      };
+
+      stack[stack.length - 1].status = "returning";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        printed: [...printed],
+        activeLine: 2,
+        description: `Returning from printNTo1(i = ${i}). Stack frame is ready to pop.`,
+        activeFrameId: myId,
+      };
+
+      stack.pop();
+      return;
+    }
+
+    // Print i
+    printed.push(i);
+    stack[stack.length - 1].status = "printing";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      printed: [...printed],
+      activeLine: 3,
+      description: `Printing value: ${i}. Output array is updated.`,
+      activeFrameId: myId,
+    };
+
+    stack[stack.length - 1].status = "waiting";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      printed: [...printed],
+      activeLine: 4,
+      description: `Making recursive call for next number: printNTo1(i = ${i - 1}).`,
+      activeFrameId: myId,
+    };
+
+    yield* run(i - 1, myId);
+
+    const myFrameIndex = stack.findIndex((f) => f.id === myId);
+    if (myFrameIndex !== -1) {
+      stack[myFrameIndex].status = "returning";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex + 1))),
+        printed: [...printed],
+        activeLine: 4,
+        description: `Returning back to caller printNTo1(i = ${i}). Stack frame is ready to pop.`,
+        activeFrameId: myId,
+      };
+      stack.pop();
+    }
+  }
+
+  yield* run(n);
+
+  yield {
+    stack: [],
+    printed: [...printed],
+    activeLine: null,
+    description: "Recursion tree completely unspooled. All frames popped.",
+    activeFrameId: null,
+  };
+}
diff --git a/src/features/algorithms/recursion/reverseArrayLogic.js b/src/features/algorithms/recursion/reverseArrayLogic.js
new file mode 100644
index 000000000..5343b3130
--- /dev/null
+++ b/src/features/algorithms/recursion/reverseArrayLogic.js
@@ -0,0 +1,140 @@
+export function* generateReverseFrames(initialArr) {
+  const stack = [];
+  let arr = [...initialArr];
+  let frameIdCounter = 0;
+
+  function* run(l, r, parentId = null) {
+    const myId = ++frameIdCounter;
+    const currentFrame = {
+      id: myId,
+      name: "reverse",
+      l,
+      r,
+      status: "calling",
+      parentId,
+    };
+    stack.push(currentFrame);
+
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      arr: [...arr],
+      activeLine: 1,
+      lIndex: l,
+      rIndex: r,
+      isSwapping: false,
+      description: `Calling reverse(l = ${l}, r = ${r}). Pushing stack frame.`,
+      activeFrameId: myId,
+    };
+
+    stack[stack.length - 1].status = "checking_base";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      arr: [...arr],
+      activeLine: 2,
+      lIndex: l,
+      rIndex: r,
+      isSwapping: false,
+      description: `Checking base case condition: is l (${l}) >= r (${r})?`,
+      activeFrameId: myId,
+    };
+
+    if (l >= r) {
+      stack[stack.length - 1].status = "base_case";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        arr: [...arr],
+        activeLine: 2,
+        lIndex: l,
+        rIndex: r,
+        isSwapping: false,
+        description: `Base case met! l (${l}) >= r (${r}). Stopping recursion.`,
+        activeFrameId: myId,
+      };
+
+      stack[stack.length - 1].status = "returning";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        arr: [...arr],
+        activeLine: 2,
+        lIndex: l,
+        rIndex: r,
+        isSwapping: false,
+        description: `Returning from reverse(l = ${l}, r = ${r}). Ready to pop.`,
+        activeFrameId: myId,
+      };
+
+      stack.pop();
+      return;
+    }
+
+    // Swap
+    stack[stack.length - 1].status = "swapping";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      arr: [...arr],
+      activeLine: 3,
+      lIndex: l,
+      rIndex: r,
+      isSwapping: true,
+      description: `Swapping elements at index ${l} (${arr[l]}) and index ${r} (${arr[r]}).`,
+      activeFrameId: myId,
+    };
+
+    const temp = arr[l];
+    arr[l] = arr[r];
+    arr[r] = temp;
+
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      arr: [...arr],
+      activeLine: 3,
+      lIndex: l,
+      rIndex: r,
+      isSwapping: false,
+      description: `Swap complete. Array is now: [${arr.join(", ")}].`,
+      activeFrameId: myId,
+    };
+
+    stack[stack.length - 1].status = "waiting";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      arr: [...arr],
+      activeLine: 4,
+      lIndex: l,
+      rIndex: r,
+      isSwapping: false,
+      description: `Calling recursively for inner indices: reverse(l = ${l + 1}, r = ${r - 1}).`,
+      activeFrameId: myId,
+    };
+
+    yield* run(l + 1, r - 1, myId);
+
+    const myFrameIndex = stack.findIndex((f) => f.id === myId);
+    if (myFrameIndex !== -1) {
+      stack[myFrameIndex].status = "returning";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex + 1))),
+        arr: [...arr],
+        activeLine: 4,
+        lIndex: l,
+        rIndex: r,
+        isSwapping: false,
+        description: `Returning back to caller reverse(l = ${l}, r = ${r}). Stack frame is ready to pop.`,
+        activeFrameId: myId,
+      };
+      stack.pop();
+    }
+  }
+
+  yield* run(0, arr.length - 1);
+  yield {
+    stack: [],
+    arr: [...arr],
+    activeLine: 0,
+    lIndex: -1,
+    rIndex: -1,
+    isSwapping: false,
+    description: `Recursion complete! Final reversed array is: [${arr.join(", ")}].`,
+    activeFrameId: null,
+  };
+}
diff --git a/src/features/algorithms/recursion/subsequencesLogic.js b/src/features/algorithms/recursion/subsequencesLogic.js
new file mode 100644
index 000000000..b9385b520
--- /dev/null
+++ b/src/features/algorithms/recursion/subsequencesLogic.js
@@ -0,0 +1,158 @@
+export function* generateSubsequencesFrames(arr) {
+  const stack = [];
+  const completed = [];
+  const treeNodesMap = {};
+
+  function prebuildTree(idx, currentPath = "root") {
+    treeNodesMap[currentPath] = {
+      id: currentPath,
+      label: `idx=${idx}`,
+      status: "pending",
+      sub: [],
+      parentId: currentPath.includes("-") ? currentPath.substring(0, currentPath.lastIndexOf("-")) : null,
+    };
+    if (idx === arr.length) return;
+    prebuildTree(idx + 1, currentPath + "-L"); // Take
+    prebuildTree(idx + 1, currentPath + "-R"); // Not Take
+  }
+
+  prebuildTree(0);
+
+  let frameIdCounter = 0;
+
+  function* run(idx, current, path = "root", parentId = null) {
+    const myId = ++frameIdCounter;
+    const currentFrame = {
+      id: myId,
+      name: "solve",
+      index: idx,
+      current: [...current],
+      status: "calling",
+      parentId,
+      path,
+    };
+    stack.push(currentFrame);
+    treeNodesMap[path].status = "active";
+    treeNodesMap[path].sub = [...current];
+
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+      completed: [...completed],
+      activeLine: 1,
+      description: `Calling solve(index = ${idx}, current = [${current.join(", ")}]).`,
+      activeFrameId: myId,
+    };
+
+    stack[stack.length - 1].status = "checking_base";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+      completed: [...completed],
+      activeLine: 2,
+      description: `Checking base case: is index (${idx}) == array length (${arr.length})?`,
+      activeFrameId: myId,
+    };
+
+    if (idx === arr.length) {
+      stack[stack.length - 1].status = "base_case";
+      treeNodesMap[path].status = "base";
+      completed.push([...current]);
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+        completed: [...completed],
+        activeLine: 3,
+        description: `Base case met! Adding [${current.join(", ")}] to list of subsequences.`,
+        activeFrameId: myId,
+      };
+
+      stack[stack.length - 1].status = "returning";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+        completed: [...completed],
+        activeLine: 3,
+        description: `Returning from base case call. Ready to pop stack frame.`,
+        activeFrameId: myId,
+      };
+
+      stack.pop();
+      return;
+    }
+
+    // Choice 1: Take element
+    stack[stack.length - 1].status = "taking";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+      completed: [...completed],
+      activeLine: 5,
+      description: `Choice 1: TAKE element arr[${idx}] (${arr[idx]}). Adding to current.`,
+      activeFrameId: myId,
+    };
+
+    const taken = [...current, arr[idx]];
+    
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+      completed: [...completed],
+      activeLine: 6,
+      description: `Calling solve(index = ${idx + 1}, current = [${taken.join(", ")}]).`,
+      activeFrameId: myId,
+    };
+
+    yield* run(idx + 1, taken, path + "-L", myId);
+
+    // Choice 2: Don't take element
+    const myFrameIndex = stack.findIndex((f) => f.id === myId);
+    if (myFrameIndex !== -1) {
+      stack[myFrameIndex].status = "not_taking";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex + 1))),
+        treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+        completed: [...completed],
+        activeLine: 8,
+        description: `Choice 2: BACKTRACK (remove arr[${idx}] = ${arr[idx]}) and DO NOT TAKE it.`,
+        activeFrameId: myId,
+      };
+
+      yield {
+        stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex + 1))),
+        treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+        completed: [...completed],
+        activeLine: 9,
+        description: `Calling solve(index = ${idx + 1}, current = [${current.join(", ")}]).`,
+        activeFrameId: myId,
+      };
+
+      yield* run(idx + 1, current, path + "-R", myId);
+    }
+
+    const myFrameIndex2 = stack.findIndex((f) => f.id === myId);
+    if (myFrameIndex2 !== -1) {
+      stack[myFrameIndex2].status = "returning";
+      treeNodesMap[path].status = "returned";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex2 + 1))),
+        treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+        completed: [...completed],
+        activeLine: 9,
+        description: `Both choices explored for index ${idx}. Returning.`,
+        activeFrameId: myId,
+      };
+      stack.pop();
+    }
+  }
+
+  yield* run(0, []);
+  yield {
+    stack: [],
+    treeNodes: JSON.parse(JSON.stringify(Object.values(treeNodesMap))),
+    completed: [...completed],
+    activeLine: 0,
+    description: `Subsequences generation completed! Total subsequences: ${completed.length}.`,
+    activeFrameId: null,
+  };
+}
diff --git a/src/features/algorithms/recursion/sumOfNLogic.js b/src/features/algorithms/recursion/sumOfNLogic.js
new file mode 100644
index 000000000..314777ec2
--- /dev/null
+++ b/src/features/algorithms/recursion/sumOfNLogic.js
@@ -0,0 +1,104 @@
+export function* generateSumFrames(n) {
+  const stack = [];
+  let frameIdCounter = 0;
+
+  function* sum(val, parentId = null) {
+    const myId = ++frameIdCounter;
+    const currentFrame = {
+      id: myId,
+      name: "sum",
+      n: val,
+      status: "calling",
+      retVal: null,
+      parentId,
+    };
+    stack.push(currentFrame);
+
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      activeLine: 1,
+      description: `Calling sum(${val}). Pushing a new stack frame onto the Call Stack.`,
+      phase: "call",
+      activeFrameId: myId,
+    };
+
+    stack[stack.length - 1].status = "checking_base";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      activeLine: 2,
+      description: `Checking if base case condition is met: is n (${val}) <= 0?`,
+      phase: "call",
+      activeFrameId: myId,
+    };
+
+    if (val <= 0) {
+      stack[stack.length - 1].status = "base_case";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        activeLine: 3,
+        description: `Base case met! n (${val}) <= 0. Returning 0.`,
+        phase: "basecase",
+        activeFrameId: myId,
+      };
+
+      stack[stack.length - 1].status = "returning";
+      stack[stack.length - 1].retVal = 0;
+      yield {
+        stack: JSON.parse(JSON.stringify(stack)),
+        activeLine: 3,
+        description: `Returning 0 from sum(${val}). Stack frame is ready to pop.`,
+        phase: "return",
+        activeFrameId: myId,
+      };
+
+      stack.pop();
+      return 0;
+    }
+
+    stack[stack.length - 1].status = "waiting";
+    yield {
+      stack: JSON.parse(JSON.stringify(stack)),
+      activeLine: 4,
+      description: `Base case not met. We need to evaluate sum(${val - 1}) first. Calling sum(${val - 1}).`,
+      phase: "call",
+      activeFrameId: myId,
+    };
+
+    const subResult = yield* sum(val - 1, myId);
+
+    const myFrameIndex = stack.findIndex((f) => f.id === myId);
+    if (myFrameIndex !== -1) {
+      stack[myFrameIndex].status = "calculating";
+      stack[myFrameIndex].subResult = subResult;
+      stack[myFrameIndex].retVal = val + subResult;
+
+      yield {
+        stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex + 1))),
+        activeLine: 4,
+        description: `Received return value ${subResult} from sum(${val - 1}). Calculating sum(${val}) = ${val} + sum(${val - 1}) = ${val} + ${subResult} = ${val + subResult}.`,
+        phase: "return",
+        activeFrameId: myId,
+      };
+
+      stack[myFrameIndex].status = "returning";
+      yield {
+        stack: JSON.parse(JSON.stringify(stack.slice(0, myFrameIndex + 1))),
+        activeLine: 4,
+        description: `Returning ${val + subResult} from sum(${val}). Stack frame is ready to pop.`,
+        phase: "return",
+        activeFrameId: myId,
+      };
+      stack.pop();
+    }
+    return val + subResult;
+  }
+
+  const finalResult = yield* sum(n);
+  yield {
+    stack: [],
+    activeLine: 0,
+    description: `Recursion finished! Final returned value is ${finalResult}.`,
+    phase: "completed",
+    activeFrameId: null,
+  };
+}
diff --git a/src/features/algorithms/stack/largestRectangleLogic.js b/src/features/algorithms/stack/largestRectangleLogic.js
new file mode 100644
index 000000000..7de5bb729
--- /dev/null
+++ b/src/features/algorithms/stack/largestRectangleLogic.js
@@ -0,0 +1,66 @@
+/**
+ * Pure generator function for finding the Largest Rectangle in a Histogram
+ * using a Monotonic Stack.
+ * Yields state objects representing the algorithm's progress at each step.
+ */
+
+export function* largestRectangleGenerator(arr) {
+  let stack = [];
+  let currentMaxArea = 0;
+
+  for (let i = 0; i <= arr.length; i++) {
+    const h = i === arr.length ? 0 : arr[i];
+    
+    yield {
+      currentIndex: i,
+      stack: [...stack],
+      maxArea: currentMaxArea,
+      currentRect: null,
+      explanation: i === arr.length 
+        ? `Reached end of histogram. Flushing remaining elements from stack.`
+        : `Evaluating index ${i} with height ${h}.`,
+      action: "evaluate"
+    };
+
+    while (stack.length > 0 && h < arr[stack[stack.length - 1]]) {
+      const poppedIndex = stack.pop();
+      const height = arr[poppedIndex];
+      const prevSmallerIndex = stack.length === 0 ? -1 : stack[stack.length - 1];
+      const width = i - prevSmallerIndex - 1;
+      const area = height * width;
+      
+      currentMaxArea = Math.max(currentMaxArea, area);
+
+      yield {
+        currentIndex: i,
+        stack: [...stack],
+        maxArea: currentMaxArea,
+        currentRect: { height, width, leftBoundary: prevSmallerIndex + 1, rightBoundary: i - 1, area },
+        explanation: `Height ${h} < top of stack (${height}). Popped index ${poppedIndex}. Width is ${i} - ${prevSmallerIndex} - 1 = ${width}. Area = ${height} x ${width} = ${area}. Max Area is ${currentMaxArea}.`,
+        action: "pop"
+      };
+    }
+    
+    if (i < arr.length) {
+      stack.push(i);
+      yield {
+        currentIndex: i,
+        stack: [...stack],
+        maxArea: currentMaxArea,
+        currentRect: null,
+        explanation: `Pushed index ${i} to stack. Stack maintains monotonically increasing heights.`,
+        action: "push"
+      };
+    }
+  }
+
+  yield {
+    currentIndex: arr.length,
+    stack: [],
+    maxArea: currentMaxArea,
+    currentRect: null,
+    explanation: `Finished processing. Largest Rectangle Area is ${currentMaxArea}.`,
+    action: "done",
+    done: true
+  };
+}
diff --git a/src/features/algorithms/stack/postfixLogic.js b/src/features/algorithms/stack/postfixLogic.js
new file mode 100644
index 000000000..487339f1a
--- /dev/null
+++ b/src/features/algorithms/stack/postfixLogic.js
@@ -0,0 +1,47 @@
+/**
+ * Pure generator function for converting an Infix expression to Postfix notation.
+ * Yields state objects representing the conversion progress at each step.
+ */
+
+const precedence = { "^": 4, "*": 3, "/": 3, "+": 2, "-": 2 };
+
+export function* postfixGenerator(infix) {
+  let tempStack = [];
+  let tempOutput = [];
+  
+  yield { stack:[], output:[], char:"", action:"Initialize", description:"Starting conversion process" };
+  
+  for (let i = 0; i < infix.length; i++) {
+    const char = infix[i];
+    
+    if (/[a-zA-Z0-9]/.test(char)) {
+      tempOutput.push(char);
+      yield { stack:[...tempStack], output:[...tempOutput], char, action:"Add operand", description:`Added operand "${char}" to output` };
+    } else if (char === "(") {
+      tempStack.push(char);
+      yield { stack:[...tempStack], output:[...tempOutput], char, action:"Push to stack", description:`Pushed "(" to stack` };
+    } else if (char === ")") {
+      while (tempStack.length && tempStack[tempStack.length - 1] !== "(") {
+        const popped = tempStack.pop();
+        tempOutput.push(popped);
+        yield { stack:[...tempStack], output:[...tempOutput], char:popped, action:"Pop from stack", description:`Popped operator "${popped}" from stack` };
+      }
+      tempStack.pop(); // Remove "("
+      yield { stack:[...tempStack], output:[...tempOutput], char:"(", action:"Remove from stack", description:'Removed "(" from stack' };
+    } else {
+      while (tempStack.length && tempStack[tempStack.length - 1] !== "(" && precedence[char] <= precedence[tempStack[tempStack.length - 1]]) {
+        const popped = tempStack.pop();
+        tempOutput.push(popped);
+        yield { stack:[...tempStack], output:[...tempOutput], char:popped, action:"Pop higher precedence", description:`Popped higher precedence operator "${popped}"` };
+      }
+      tempStack.push(char);
+      yield { stack:[...tempStack], output:[...tempOutput], char, action:"Push operator", description:`Pushed operator "${char}" to stack` };
+    }
+  }
+  
+  while (tempStack.length) {
+    const popped = tempStack.pop();
+    tempOutput.push(popped);
+    yield { stack:[...tempStack], output:[...tempOutput], char:popped, action:"Pop remaining", description:`Popped remaining operator "${popped}"` };
+  }
+}
diff --git a/src/features/algorithms/stack/prefixLogic.js b/src/features/algorithms/stack/prefixLogic.js
new file mode 100644
index 000000000..2ce5de470
--- /dev/null
+++ b/src/features/algorithms/stack/prefixLogic.js
@@ -0,0 +1,125 @@
+/**
+ * Pure generator/function for converting Infix to Prefix.
+ * Returns an array of frames representing the conversion state.
+ */
+export function generateInfixToPrefixSteps(infix) {
+  if (!infix || !infix.trim()) {
+    return { error: "Please enter an infix expression" };
+  }
+
+  const precedence = { "^": 4, "*": 3, "/": 3, "+": 2, "-": 2 };
+  const conversionSteps = [];
+  let tempStack = [];
+  let tempOutput = [];
+
+  /* 1. reverse */
+  const reversed = infix.split("").reverse().join("");
+  conversionSteps.push({
+    stack: [],
+    output: [],
+    char: "",
+    action: "Reverse infix",
+    description: `Reversed: ${reversed}`,
+  });
+
+  /* 2. swap parentheses */
+  const swapped = reversed.replace(/[()]/g, (c) => (c === "(" ? ")" : "("));
+  conversionSteps.push({
+    stack: [],
+    output: [],
+    char: "",
+    action: "Swap parentheses",
+    description: `Swapped: ${swapped}`,
+  });
+
+  /* 3. postfix on swapped */
+  for (const ch of swapped) {
+    if (/[a-zA-Z0-9]/.test(ch)) {
+      tempOutput.push(ch);
+      conversionSteps.push({
+        stack: [...tempStack],
+        output: [...tempOutput],
+        char: ch,
+        action: "Add operand",
+        description: `Added operand "${ch}"`,
+      });
+    } else if (ch === "(") {
+      tempStack.push(ch);
+      conversionSteps.push({
+        stack: [...tempStack],
+        output: [...tempOutput],
+        char: ch,
+        action: "Push to stack",
+        description: `Pushed "("`,
+      });
+    } else if (ch === ")") {
+      while (tempStack.length && tempStack[tempStack.length - 1] !== "(") {
+        const popped = tempStack.pop();
+        tempOutput.push(popped);
+        conversionSteps.push({
+          stack: [...tempStack],
+          output: [...tempOutput],
+          char: popped,
+          action: "Pop from stack",
+          description: `Popped "${popped}"`,
+        });
+      }
+      tempStack.pop(); // remove '('
+      conversionSteps.push({
+        stack: [...tempStack],
+        output: [...tempOutput],
+        char: "(",
+        action: "Remove from stack",
+        description: `Removed "("`,
+      });
+    } else {
+      while (
+        tempStack.length &&
+        tempStack[tempStack.length - 1] !== "(" &&
+        precedence[ch] <= precedence[tempStack[tempStack.length - 1]]
+      ) {
+        const popped = tempStack.pop();
+        tempOutput.push(popped);
+        conversionSteps.push({
+          stack: [...tempStack],
+          output: [...tempOutput],
+          char: popped,
+          action: "Pop higher precedence",
+          description: `Popped higher precedence "${popped}"`,
+        });
+      }
+      tempStack.push(ch);
+      conversionSteps.push({
+        stack: [...tempStack],
+        output: [...tempOutput],
+        char: ch,
+        action: "Push operator",
+        description: `Pushed "${ch}"`,
+      });
+    }
+  }
+
+  while (tempStack.length) {
+    const popped = tempStack.pop();
+    tempOutput.push(popped);
+    conversionSteps.push({
+      stack: [...tempStack],
+      output: [...tempOutput],
+      char: popped,
+      action: "Pop remaining",
+      description: `Popped remaining "${popped}"`,
+    });
+  }
+
+  /* 4. reverse to get prefix */
+  const prefixResult = tempOutput.reverse().join(" ");
+  conversionSteps.push({
+    stack: [],
+    output: [...tempOutput],
+    char: "",
+    action: "Reverse postfix",
+    description: `Reversed to get prefix: ${prefixResult}`,
+  });
+
+  return { steps: conversionSteps, prefixResult };
+}
diff --git a/src/features/algorithms/stack/stackIsEmptyLogic.js b/src/features/algorithms/stack/stackIsEmptyLogic.js
new file mode 100644
index 000000000..ff6a58257
--- /dev/null
+++ b/src/features/algorithms/stack/stackIsEmptyLogic.js
@@ -0,0 +1,61 @@
+/**
+ * Pure generator functions for Stack IsEmpty operation.
+ * Yields frames representing the state of the operation.
+ */
+
+export function* checkEmptyGenerator(stack) {
+  yield { type: 'start', operation: 'Checking if stack is empty…' };
+  
+  const empty = stack.length === 0;
+  
+  yield { 
+    type: 'complete', 
+    isEmpty: empty, 
+    message: empty ? 'Stack is empty!' : 'Stack is not empty' 
+  };
+}
+
+export function* pushGenerator(currentStack, value, capacity) {
+  if (capacity && currentStack.length >= capacity) {
+    yield { type: 'error', message: `Stack Overflow! Cannot push. top (${currentStack.length - 1}) >= size - 1 (${capacity - 1})` };
+    return;
+  }
+  
+  const val = typeof value === 'string' ? value.trim() : value;
+  if (!val) {
+    yield { type: 'error', message: 'Please enter a value to push' };
+    return;
+  }
+
+  yield { type: 'start', operation: `Pushing "${val}"…` };
+  
+  const nextStack = [val, ...currentStack];
+  
+  yield { type: 'complete', stack: nextStack, message: `"${val}" pushed to stack!` };
+}
+
+export function* popGenerator(currentStack) {
+  if (currentStack.length === 0) {
+    yield { type: 'error', message: 'Stack is empty!', isEmpty: true };
+    return;
+  }
+
+  const val = currentStack[0];
+  yield { type: 'start', operation: `Popping "${val}"…` };
+
+  const nextStack = currentStack.slice(1);
+  
+  yield { type: 'complete', stack: nextStack, message: `"${val}" popped from stack!` };
+}
+
+export function* peekGenerator(currentStack) {
+  if (currentStack.length === 0) {
+    yield { type: 'error', message: 'Stack is empty!', isEmpty: true };
+    return;
+  }
+
+  const val = currentStack[0];
+  yield { type: 'start', operation: 'Peeking at top element…', peekedItem: val };
+  
+  yield { type: 'complete', message: `Top element is "${val}"` };
+}
diff --git a/src/features/algorithms/stack/stackIsFullLogic.js b/src/features/algorithms/stack/stackIsFullLogic.js
new file mode 100644
index 000000000..c4e804ea7
--- /dev/null
+++ b/src/features/algorithms/stack/stackIsFullLogic.js
@@ -0,0 +1,66 @@
+/**
+ * Pure generator functions for Stack IsFull operation.
+ * Yields frames representing the state of the operation.
+ */
+
+export function* checkFullGenerator(stack, capacity) {
+  if (capacity === null) {
+    yield { type: 'error', message: 'Please set a capacity first!' };
+    return;
+  }
+  
+  yield { type: 'start', operation: 'Checking if stack is full…' };
+  
+  const full = stack.length >= capacity;
+  
+  yield { 
+    type: 'complete', 
+    isFull: full, 
+    message: full ? 'Stack is full!' : 'Stack is not full' 
+  };
+}
+
+export function* pushGenerator(currentStack, value, capacity) {
+  if (capacity && currentStack.length >= capacity) {
+    yield { type: 'error', message: `Stack Overflow! Cannot push. top (${currentStack.length - 1}) >= size - 1 (${capacity - 1})` };
+    return;
+  }
+  
+  const val = typeof value === 'string' ? value.trim() : value;
+  if (!val) {
+    yield { type: 'error', message: 'Please enter a value to push' };
+    return;
+  }
+
+  yield { type: 'start', operation: `Pushing "${val}"…` };
+  
+  const nextStack = [val, ...currentStack];
+  
+  yield { type: 'complete', stack: nextStack, message: `"${val}" pushed to stack!` };
+}
+
+export function* popGenerator(currentStack) {
+  if (currentStack.length === 0) {
+    yield { type: 'error', message: 'Stack is empty!', isFull: false };
+    return;
+  }
+
+  const val = currentStack[0];
+  yield { type: 'start', operation: `Popping "${val}"…` };
+
+  const nextStack = currentStack.slice(1);
+  
+  yield { type: 'complete', stack: nextStack, message: `"${val}" popped from stack!` };
+}
+
+export function* peekGenerator(currentStack) {
+  if (currentStack.length === 0) {
+    yield { type: 'error', message: 'Stack is empty!', isFull: false };
+    return;
+  }
+
+  const val = currentStack[0];
+  yield { type: 'start', operation: 'Peeking at top element…', peekedItem: val };
+  
+  yield { type: 'complete', message: `Top element is "${val}"` };
+}
diff --git a/src/features/algorithms/stack/stackLogic.js b/src/features/algorithms/stack/stackLogic.js
new file mode 100644
index 000000000..96a066c3d
--- /dev/null
+++ b/src/features/algorithms/stack/stackLogic.js
@@ -0,0 +1,47 @@
+/**
+ * Pure generator functions for Stack data structure operations.
+ * Yields frames representing the state of the operation.
+ */
+
+export function* pushGenerator(currentStack, value, limit) {
+  if (limit && currentStack.length >= limit) {
+    yield { type: 'error', message: `Stack Overflow! Cannot push. top (${currentStack.length - 1}) >= size - 1 (${limit - 1})` };
+    return;
+  }
+  if (!value || (typeof value === 'string' && !value.trim())) {
+    yield { type: 'error', message: 'Please enter a value' };
+    return;
+  }
+
+  yield { type: 'start', operation: `Pushing "${value}"...` };
+  
+  const nextStack = [value, ...currentStack];
+  
+  yield { type: 'complete', stack: nextStack, message: `"${value}" pushed to stack` };
+}
+
+export function* popGenerator(currentStack) {
+  if (currentStack.length === 0) {
+    yield { type: 'error', message: 'Stack is empty!' };
+    return;
+  }
+
+  const poppedValue = currentStack[0];
+  yield { type: 'start', operation: `Popping "${poppedValue}"...` };
+
+  const nextStack = currentStack.slice(1);
+  
+  yield { type: 'complete', stack: nextStack, message: `"${poppedValue}" popped from stack` };
+}
+
+export function* peekGenerator(currentStack) {
+  if (currentStack.length === 0) {
+    yield { type: 'error', message: 'Stack is empty!' };
+    return;
+  }
+
+  const topValue = currentStack[0];
+  yield { type: 'start', operation: `Peeking at "${topValue}"` };
+
+  yield { type: 'complete', stack: currentStack, message: `Top element is "${topValue}"` };
+}
diff --git a/src/features/algorithms/string/anagramCheckLogic.js b/src/features/algorithms/string/anagramCheckLogic.js
new file mode 100644
index 000000000..b8296d2bf
--- /dev/null
+++ b/src/features/algorithms/string/anagramCheckLogic.js
@@ -0,0 +1,91 @@
+const anagramCheckLogic = (first = "listen", second = "silent") => {
+  const normalize = (str) =>
+    str.toLowerCase().replace(/\s+/g, "");
+
+  const str1 = normalize(first);
+  const str2 = normalize(second);
+
+  const steps = [];
+
+  // Step 1: Check lengths
+  if (str1.length !== str2.length) {
+    steps.push({
+      step: 1,
+      description: "The strings have different lengths, so they cannot be anagrams.",
+    });
+
+    return {
+      input: { first, second },
+      result: false,
+      steps,
+      complexity: {
+        time: "O(1)",
+        space: "O(1)",
+      },
+    };
+  }
+
+  const frequency = {};
+
+  // Step 2: Count characters in first string
+  for (const ch of str1) {
+    frequency[ch] = (frequency[ch] || 0) + 1;
+
+    steps.push({
+      character: ch,
+      frequency: { ...frequency },
+      description: `Count '${ch}' in first string.`,
+    });
+  }
+
+  // Step 3: Remove characters using second string
+  for (const ch of str2) {
+    if (!frequency[ch]) {
+      steps.push({
+        character: ch,
+        frequency: { ...frequency },
+        description: `'${ch}' does not exist or count became zero.`,
+      });
+
+      return {
+        input: { first, second },
+        result: false,
+        steps,
+        complexity: {
+          time: "O(n)",
+          space: "O(n)",
+        },
+      };
+    }
+
+    frequency[ch]--;
+
+    steps.push({
+      character: ch,
+      frequency: { ...frequency },
+      description: `Decrease count of '${ch}'.`,
+    });
+  }
+
+  const isAnagram = Object.values(frequency).every(
+    (count) => count === 0
+  );
+
+  steps.push({
+    description: isAnagram
+      ? "All character counts became zero. Strings are anagrams."
+      : "Some character counts are not zero. Strings are not anagrams.",
+  });
+
+  return {
+    input: { first, second },
+    result: isAnagram,
+    steps,
+    complexity: {
+      time: "O(n)",
+      space: "O(n)",
+    },
+  };
+};
+
+export default anagramCheckLogic;
\ No newline at end of file
diff --git a/src/features/algorithms/string/characterFrequencyLogic.js b/src/features/algorithms/string/characterFrequencyLogic.js
new file mode 100644
index 000000000..a69d74fe1
--- /dev/null
+++ b/src/features/algorithms/string/characterFrequencyLogic.js
@@ -0,0 +1,33 @@
+const characterFrequencyLogic = (input = "banana") => {
+  const frequency = {};
+  const steps = [];
+
+  for (let i = 0; i < input.length; i++) {
+    const char = input[i];
+
+    if (frequency[char]) {
+      frequency[char]++;
+    } else {
+      frequency[char] = 1;
+    }
+
+    steps.push({
+      index: i,
+      character: char,
+      frequency: { ...frequency },
+      description: `Processed '${char}' → Frequency = ${frequency[char]}`,
+    });
+  }
+
+  return {
+    input,
+    result: frequency,
+    steps,
+    complexity: {
+      time: "O(n)",
+      space: "O(k)",
+    },
+  };
+};
+
+export default characterFrequencyLogic;
\ No newline at end of file
diff --git a/src/features/algorithms/string/kmpAlgorithmLogic.js b/src/features/algorithms/string/kmpAlgorithmLogic.js
new file mode 100644
index 000000000..e429d9e0b
--- /dev/null
+++ b/src/features/algorithms/string/kmpAlgorithmLogic.js
@@ -0,0 +1,51 @@
+const kmpAlgorithmLogic = {
+  name: "KMP Algorithm",
+
+  description:
+    "The Knuth-Morris-Pratt (KMP) Algorithm efficiently searches for a pattern in a text by preprocessing the pattern to build the Longest Prefix Suffix (LPS) array. This allows the algorithm to skip unnecessary comparisons after a mismatch.",
+
+  category: "String",
+
+  difficulty: "Medium",
+
+  timeComplexity: {
+    best: "O(n + m)",
+    average: "O(n + m)",
+    worst: "O(n + m)",
+  },
+
+  spaceComplexity: "O(m)",
+
+  steps: [
+    "Build the Longest Prefix Suffix (LPS) array for the pattern.",
+    "Initialize two pointers: one for the text and one for the pattern.",
+    "Compare the current characters of the text and pattern.",
+    "If the characters match, move both pointers forward.",
+    "If all pattern characters are matched, record the occurrence.",
+    "On mismatch, use the LPS array to update the pattern pointer instead of restarting.",
+    "Continue until the end of the text is reached.",
+  ],
+
+  pseudocode: [
+    "Compute the LPS array for the pattern.",
+    "Initialize text index i = 0 and pattern index j = 0.",
+    "While i < text length:",
+    "    If text[i] == pattern[j], increment both i and j.",
+    "    If j == pattern length, report a match and set j = LPS[j - 1].",
+    "    Else if mismatch occurs:",
+    "        If j != 0, set j = LPS[j - 1].",
+    "        Otherwise, increment i.",
+  ],
+
+  applications: [
+    "Text Editors (Find and Replace)",
+    "Search Engines",
+    "DNA Sequence Matching",
+    "Plagiarism Detection",
+    "Compiler Design",
+    "Bioinformatics",
+    "Pattern Matching Systems",
+  ],
+};
+
+export default kmpAlgorithmLogic;
\ No newline at end of file
diff --git a/src/features/algorithms/string/longestCommonPrefixLogic.js b/src/features/algorithms/string/longestCommonPrefixLogic.js
new file mode 100644
index 000000000..f8b88ab51
--- /dev/null
+++ b/src/features/algorithms/string/longestCommonPrefixLogic.js
@@ -0,0 +1,88 @@
+const longestCommonPrefixLogic = (
+  words = ["flower", "flow", "flight"]
+) => {
+  const steps = [];
+
+  if (!words || words.length === 0) {
+    return {
+      input: words,
+      result: "",
+      steps: [
+        {
+          description: "The input array is empty.",
+        },
+      ],
+      complexity: {
+        time: "O(1)",
+        space: "O(1)",
+      },
+    };
+  }
+
+  let prefix = words[0];
+
+  steps.push({
+    step: 1,
+    currentPrefix: prefix,
+    description: `Initial prefix is "${prefix}".`,
+  });
+
+  for (let i = 1; i < words.length; i++) {
+    const currentWord = words[i];
+
+    steps.push({
+      step: steps.length + 1,
+      currentPrefix: prefix,
+      currentWord,
+      description: `Comparing prefix "${prefix}" with "${currentWord}".`,
+    });
+
+    while (!currentWord.startsWith(prefix)) {
+      prefix = prefix.slice(0, -1);
+
+      steps.push({
+        step: steps.length + 1,
+        currentPrefix: prefix,
+        currentWord,
+        description: `Prefix does not match. Shrinking prefix to "${prefix}".`,
+      });
+
+      if (prefix === "") {
+        steps.push({
+          step: steps.length + 1,
+          currentPrefix: "",
+          description:
+            "No common prefix exists among all strings.",
+        });
+
+        return {
+          input: words,
+          result: "",
+          steps,
+          complexity: {
+            time: "O(n × m)",
+            space: "O(1)",
+          },
+        };
+      }
+    }
+  }
+
+  steps.push({
+    step: steps.length + 1,
+    currentPrefix: prefix,
+    description: `Longest Common Prefix found: "${prefix}".`,
+  });
+
+  return {
+    input: words,
+    result: prefix,
+    steps,
+    complexity: {
+      time: "O(n × m)",
+      space: "O(1)",
+    },
+  };
+};
+
+export default longestCommonPrefixLogic;
\ No newline at end of file
diff --git a/src/features/algorithms/string/longestSubstringLogic.js b/src/features/algorithms/string/longestSubstringLogic.js
new file mode 100644
index 000000000..c4e3801ef
--- /dev/null
+++ b/src/features/algorithms/string/longestSubstringLogic.js
@@ -0,0 +1,53 @@
+export function longestSubstringLogic(input) {
+  const steps = [];
+
+  const map = new Map();
+
+  let left = 0;
+  let maxLength = 0;
+  let bestSubstring = "";
+
+  for (let right = 0; right < input.length; right++) {
+    const currentChar = input[right];
+
+    let action = `Checking '${currentChar}'`;
+
+    // Duplicate found
+    if (map.has(currentChar) && map.get(currentChar) >= left) {
+      action = `Duplicate '${currentChar}' found. Move left pointer`;
+
+      left = map.get(currentChar) + 1;
+    }
+
+    // Update latest index
+    map.set(currentChar, right);
+
+    // Current window
+    const currentWindow = input.slice(left, right + 1);
+
+    // Update best substring
+    if (currentWindow.length > maxLength) {
+      maxLength = currentWindow.length;
+      bestSubstring = currentWindow;
+    }
+
+    // Save animation step
+    steps.push({
+      left,
+      right,
+      currentChar,
+      currentWindow,
+      bestSubstring,
+      currentLength: currentWindow.length,
+      maxLength,
+      action,
+      hashMap: Object.fromEntries(map),
+    });
+  }
+
+  return {
+    answer: maxLength,
+    bestSubstring,
+    steps,
+  };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/string/minimumWindowSubstringLogic.js b/src/features/algorithms/string/minimumWindowSubstringLogic.js
new file mode 100644
index 000000000..cd0c16a7c
--- /dev/null
+++ b/src/features/algorithms/string/minimumWindowSubstringLogic.js
@@ -0,0 +1,52 @@
+const minimumWindowSubstringLogic = {
+  name: "Minimum Window Substring",
+
+  description:
+    "Minimum Window Substring is a classic Sliding Window algorithm that finds the smallest substring of a given string containing all the characters of a target string, including duplicate occurrences. It efficiently expands and contracts a window while maintaining character frequencies.",
+
+  category: "String",
+
+  difficulty: "Hard",
+
+  timeComplexity: {
+    best: "O(n + m)",
+    average: "O(n + m)",
+    worst: "O(n + m)",
+  },
+
+  spaceComplexity: "O(m)",
+
+  steps: [
+    "Create a frequency map of all characters in the target string.",
+    "Initialize two pointers (left and right) representing the sliding window.",
+    "Expand the window by moving the right pointer and updating character frequencies.",
+    "When all required characters are present, attempt to shrink the window from the left.",
+    "Update the minimum window whenever a smaller valid window is found.",
+    "Continue expanding and shrinking until the right pointer reaches the end of the string.",
+    "Return the smallest valid substring if found; otherwise return an empty string.",
+  ],
+
+  pseudocode: [
+    "Create frequency map for target string.",
+    "Initialize left = 0, right = 0.",
+    "Maintain required and formed character counts.",
+    "Expand window by moving right pointer.",
+    "If window is valid, update minimum answer.",
+    "Shrink window by moving left pointer.",
+    "Repeat until right reaches end.",
+    "Return minimum window substring.",
+  ],
+
+  applications: [
+    "Pattern Matching",
+    "Search Engines",
+    "Text Processing",
+    "Natural Language Processing (NLP)",
+    "DNA Sequence Analysis",
+    "Log File Analysis",
+    "Streaming Data Processing",
+    "Coding Interview Problems",
+  ],
+};
+
+export default minimumWindowSubstringLogic;
\ No newline at end of file
diff --git a/src/features/algorithms/string/palindromeCheckLogic.js b/src/features/algorithms/string/palindromeCheckLogic.js
new file mode 100644
index 000000000..a88fb9e85
--- /dev/null
+++ b/src/features/algorithms/string/palindromeCheckLogic.js
@@ -0,0 +1,70 @@
+export function* palindromeCheckGenerator(str) {
+  let left = 0;
+  let right = str.length - 1;
+
+  const matched = [];
+
+  let step = 1;
+
+  while (left < right) {
+    yield {
+      type: "compare",
+      left,
+      right,
+      leftChar: str[left],
+      rightChar: str[right],
+      matched: [...matched],
+      mismatch: [],
+      step,
+    };
+
+    if (str[left] !== str[right]) {
+      yield {
+        type: "mismatch",
+        left,
+        right,
+        leftChar: str[left],
+        rightChar: str[right],
+        matched: [...matched],
+        mismatch: [left, right],
+        result: false,
+        step,
+      };
+
+      return;
+    }
+
+    matched.push(left);
+    matched.push(right);
+
+    yield {
+      type: "match",
+      left,
+      right,
+      leftChar: str[left],
+      rightChar: str[right],
+      matched: [...matched],
+      mismatch: [],
+      step,
+    };
+
+    left++;
+    right--;
+    step++;
+  }
+
+  // Middle character (odd-length strings)
+  if (left === right) {
+    matched.push(left);
+  }
+
+  yield {
+    type: "success",
+    left,
+    right,
+    matched: [...matched],
+    mismatch: [],
+    result: true,
+    step,
+  };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/string/rabinKarpLogic.js b/src/features/algorithms/string/rabinKarpLogic.js
new file mode 100644
index 000000000..53b0ba433
--- /dev/null
+++ b/src/features/algorithms/string/rabinKarpLogic.js
@@ -0,0 +1,51 @@
+const rabinKarpLogic = {
+  name: "Rabin-Karp Algorithm",
+
+  description:
+    "The Rabin-Karp Algorithm is an efficient string matching algorithm that uses a rolling hash function to search for a pattern within a text. It compares hash values instead of comparing every character, making it efficient for multiple pattern searches.",
+
+  category: "String",
+
+  difficulty: "Medium",
+
+  timeComplexity: {
+    best: "O(n + m)",
+    average: "O(n + m)",
+    worst: "O(n × m)",
+  },
+
+  spaceComplexity: "O(1)",
+
+  steps: [
+    "Compute the hash value of the pattern.",
+    "Compute the hash value of the first text window.",
+    "Compare both hash values.",
+    "If hashes match, verify by comparing characters.",
+    "Slide the window by one position.",
+    "Update the rolling hash efficiently.",
+    "Repeat until the end of the text.",
+  ],
+
+  pseudocode: [
+    "Compute patternHash.",
+    "Compute first windowHash.",
+    "For each window in text:",
+    "    If patternHash == windowHash:",
+    "        Compare characters.",
+    "        If matched, return index.",
+    "    Update rolling hash.",
+    "Return pattern not found.",
+  ],
+
+  applications: [
+    "Pattern Matching",
+    "Plagiarism Detection",
+    "DNA Sequence Analysis",
+    "Search Engines",
+    "Virus Signature Detection",
+    "Bioinformatics",
+    "Text Editors",
+  ],
+};
+
+export default rabinKarpLogic;
\ No newline at end of file
diff --git a/src/features/algorithms/string/reverseStringLogic.js b/src/features/algorithms/string/reverseStringLogic.js
new file mode 100644
index 000000000..968f01ab0
--- /dev/null
+++ b/src/features/algorithms/string/reverseStringLogic.js
@@ -0,0 +1,55 @@
+export function* reverseStringGenerator(input) {
+  if (!input || input.length === 0) {
+    yield {
+      type: "empty",
+      array: [],
+      left: -1,
+      right: -1,
+      explanation: "Input string is empty.",
+      step: 0,
+    };
+    return;
+  }
+
+  const arr = input.split("");
+  let left = 0;
+  let right = arr.length - 1;
+  let step = 1;
+
+  while (left < right) {
+    // Highlight current characters
+    yield {
+      type: "compare",
+      array: [...arr],
+      left,
+      right,
+      explanation: `Step ${step}: Compare '${arr[left]}' and '${arr[right]}'.`,
+      step,
+    };
+
+    // Swap characters
+    [arr[left], arr[right]] = [arr[right], arr[left]];
+
+    yield {
+      type: "swap",
+      array: [...arr],
+      left,
+      right,
+      explanation: `Step ${step}: Swapped '${arr[right]}' with '${arr[left]}'.`,
+      step,
+    };
+
+    left++;
+    right--;
+    step++;
+  }
+
+  yield {
+    type: "complete",
+    array: [...arr],
+    left: -1,
+    right: -1,
+    explanation: `Reverse completed successfully. Final string: ${arr.join("")}`,
+    step,
+  };
+}
\ No newline at end of file
diff --git a/src/features/algorithms/string/zAlgorithmLogic.js b/src/features/algorithms/string/zAlgorithmLogic.js
new file mode 100644
index 000000000..1765dcc41
--- /dev/null
+++ b/src/features/algorithms/string/zAlgorithmLogic.js
@@ -0,0 +1,53 @@
+const zAlgorithmLogic = {
+  name: "Z Algorithm",
+
+  description:
+    "The Z Algorithm is an efficient linear-time string matching algorithm that constructs a Z-array, where each element represents the length of the longest substring starting from that position that matches the prefix of the string. It is widely used for exact pattern matching and other string-processing problems.",
+
+  category: "String",
+
+  difficulty: "Medium",
+
+  timeComplexity: {
+    best: "O(n + m)",
+    average: "O(n + m)",
+    worst: "O(n + m)",
+  },
+
+  spaceComplexity: "O(n + m)",
+
+  steps: [
+    "Concatenate the pattern, a separator ('$'), and the text into a single string.",
+    "Initialize the Z-array with all zeros.",
+    "Maintain a Z-box using Left (L) and Right (R) pointers.",
+    "Reuse previously computed Z-values whenever the current index lies inside the Z-box.",
+    "Extend the current match by comparing characters outside the Z-box.",
+    "Update the Left and Right pointers if a longer Z-box is found.",
+    "Whenever a Z-value equals the pattern length, report a pattern match.",
+  ],
+
+  pseudocode: [
+    "Create S = Pattern + '$' + Text.",
+    "Initialize Z array.",
+    "Set L = R = 0.",
+    "For each index i from 1 to S.length - 1:",
+    "    If i <= R, reuse previously computed Z value.",
+    "    Extend the match while characters are equal.",
+    "    Update L and R if the current match extends further.",
+    "If Z[i] equals Pattern.length, record a match.",
+  ],
+
+  applications: [
+    "Pattern Matching",
+    "String Searching",
+    "Text Editors",
+    "Search Engines",
+    "DNA Sequence Analysis",
+    "Bioinformatics",
+    "Plagiarism Detection",
+    "Compiler Design",
+    "Data Compression",
+  ],
+};
+
+export default zAlgorithmLogic;
\ No newline at end of file
diff --git a/src/features/algorithms/tree/bTreeLogic.js b/src/features/algorithms/tree/bTreeLogic.js
new file mode 100644
index 000000000..8431ba6ea
--- /dev/null
+++ b/src/features/algorithms/tree/bTreeLogic.js
@@ -0,0 +1,170 @@
+/**
+ * Pure logic for B-Tree operations.
+ */
+
+export const T = 2; // Min degree (B-Tree of order 4)
+
+let nodeIdCounter = 0;
+export function makeNode(isLeaf = true) {
+  return { id: `btn-${++nodeIdCounter}`, keys: [], children: [], isLeaf };
+}
+
+export function cloneTree(node) {
+  if (!node) return null;
+  return {
+    id: node.id,
+    keys: [...node.keys],
+    children: node.children.map(cloneTree),
+    isLeaf: node.isLeaf
+  };
+}
+
+export class BTreeManager {
+  constructor() {
+    this.root = makeNode(true);
+  }
+
+  clone() {
+    const mgr = new BTreeManager();
+    mgr.root = cloneTree(this.root);
+    return mgr;
+  }
+
+  // Uses generators to yield steps
+  *insertGenerator(key) {
+    yield {
+      tree: cloneTree(this.root),
+      highlighted: {},
+      explanation: `Insert key ${key} into B-Tree (order ${2 * T}). Max keys per node: ${2 * T - 1}.`
+    };
+
+    if (this.root.keys.length === 2 * T - 1) {
+      const newRoot = makeNode(false);
+      newRoot.children.push(this.root);
+      this.root = newRoot;
+
+      yield {
+        tree: cloneTree(this.root),
+        highlighted: { [newRoot.id]: "visiting" },
+        explanation: `Root is full (${2 * T - 1} keys). Create a new root and split the old root.`
+      };
+
+      yield* this._splitChildGenerator(this.root, 0);
+
+      yield {
+        tree: cloneTree(this.root),
+        highlighted: { [this.root.id]: "active" },
+        explanation: `Old root split. New root created. Tree height increased by 1.`
+      };
+    }
+
+    yield* this._insertNonFullGenerator(this.root, key);
+
+    yield {
+      tree: cloneTree(this.root),
+      highlighted: {},
+      explanation: `✅ Key ${key} successfully inserted into the B-Tree!`
+    };
+  }
+
+  *_insertNonFullGenerator(node, key) {
+    let i = node.keys.length - 1;
+
+    if (node.isLeaf) {
+      node.keys.push(0);
+      while (i >= 0 && key < node.keys[i]) {
+        node.keys[i + 1] = node.keys[i];
+        i--;
+      }
+      node.keys[i + 1] = key;
+
+      yield {
+        tree: cloneTree(this.root),
+        highlighted: { [node.id]: "matched" },
+        explanation: `Reached leaf node. Insert key ${key} in sorted position. Node now has ${node.keys.length} keys.`
+      };
+    } else {
+      while (i >= 0 && key < node.keys[i]) i--;
+      i++;
+
+      yield {
+        tree: cloneTree(this.root),
+        highlighted: { [node.id]: "visiting" },
+        explanation: `Internal node: key ${key} goes into child[${i}] (between ${node.keys[i - 1] ?? "−∞"} and ${node.keys[i] ?? "+∞"}). Navigate down.`
+      };
+
+      if (node.children[i] && node.children[i].keys.length === 2 * T - 1) {
+        yield {
+          tree: cloneTree(this.root),
+          highlighted: { [node.children[i].id]: "error" },
+          explanation: `Child[${i}] is full (${2 * T - 1} keys). Must split child before descending.`
+        };
+        yield* this._splitChildGenerator(node, i);
+        if (key > node.keys[i]) i++;
+      }
+
+      yield* this._insertNonFullGenerator(node.children[i], key);
+    }
+  }
+
+  *_splitChildGenerator(parent, i) {
+    const t = T;
+    const y = parent.children[i];
+    const z = makeNode(y.isLeaf);
+
+    z.keys = y.keys.splice(t, t - 1);
+    if (!y.isLeaf) z.children = y.children.splice(t, t);
+
+    const medianKey = y.keys.pop();
+
+    parent.keys.splice(i, 0, medianKey);
+    parent.children.splice(i + 1, 0, z);
+
+    yield {
+      tree: cloneTree(this.root),
+      highlighted: { [y.id]: "active", [z.id]: "active", [parent.id]: "visiting" },
+      explanation: `Split child: median key ${medianKey} promoted to parent. Left child: [${y.keys}], Right child: [${z.keys}].`
+    };
+  }
+
+  *searchGenerator(key) {
+    yield {
+      tree: cloneTree(this.root),
+      highlighted: {},
+      explanation: `Search for key ${key} in B-Tree. Start at root.`
+    };
+    yield* this._searchDFSGenerator(this.root, key);
+  }
+
+  *_searchDFSGenerator(node, key) {
+    if (!node) return;
+    let i = 0;
+    while (i < node.keys.length && key > node.keys[i]) i++;
+
+    if (i < node.keys.length && key === node.keys[i]) {
+      yield {
+        tree: cloneTree(this.root),
+        highlighted: { [node.id]: "matched" },
+        explanation: `✅ Found key ${key} in node [${node.keys.join(", ")}]!`
+      };
+      return;
+    }
+
+    if (node.isLeaf) {
+      yield {
+        tree: cloneTree(this.root),
+        highlighted: { [node.id]: "error" },
+        explanation: `Reached leaf node [${node.keys.join(", ")}]. Key ${key} not found in B-Tree.`
+      };
+      return;
+    }
+
+    yield {
+      tree: cloneTree(this.root),
+      highlighted: { [node.id]: "visiting" },
+      explanation: `Key ${key} not in node [${node.keys.join(", ")}]. Descend into child[${i}].`
+    };
+
+    yield* this._searchDFSGenerator(node.children[i], key);
+  }
+}
diff --git a/src/features/algorithms/tree/bstDeleteLogic.js b/src/features/algorithms/tree/bstDeleteLogic.js
new file mode 100644
index 000000000..9affc8b44
--- /dev/null
+++ b/src/features/algorithms/tree/bstDeleteLogic.js
@@ -0,0 +1,192 @@
+/**
+ * Pure function to generate step-by-step frames for BST Deletion.
+ * Decoupled from React UI.
+ */
+export function generateDeleteSteps(treeRoot, val) {
+  const records = [];
+  const path = [];
+
+  const recurse = (node) => {
+    if (!node) return;
+
+    path.push(node.value);
+
+    // Line 2: if (root == null) -> false
+    records.push({
+      currentNode: node.value,
+      visited: [...path],
+      explanation: `Searching for node to delete: comparing key ${val} with Node ${node.value}.`,
+      codeLine: 1,
+      highlightedNodes: {
+        ...Object.fromEntries(path.slice(0, -1).map((v) => [v, "active"])),
+        [node.value]: "visiting",
+      },
+    });
+
+    if (val < node.value) {
+      // Line 3: if (key < root.key)
+      records.push({
+        currentNode: node.value,
+        visited: [...path],
+        explanation: `Since delete key ${val} < current node ${node.value}, delete in left subtree.`,
+        codeLine: 2,
+        highlightedNodes: {
+          ...Object.fromEntries(path.slice(0, -1).map((v) => [v, "active"])),
+          [node.value]: "visiting",
+        },
+      });
+      recurse(node.left);
+    } else if (val > node.value) {
+      // Line 4: else if (key > root.key)
+      records.push({
+        currentNode: node.value,
+        visited: [...path],
+        explanation: `Since delete key ${val} > current node ${node.value}, delete in right subtree.`,
+        codeLine: 3,
+        highlightedNodes: {
+          ...Object.fromEntries(path.slice(0, -1).map((v) => [v, "active"])),
+          [node.value]: "visiting",
+        },
+      });
+      recurse(node.right);
+    } else {
+      // Line 5: else { Node found!
+      records.push({
+        currentNode: node.value,
+        visited: [...path],
+        explanation: `Found Node ${val} to delete! Evaluating children cases.`,
+        codeLine: 4,
+        highlightedNodes: {
+          ...Object.fromEntries(path.slice(0, -1).map((v) => [v, "active"])),
+          [node.value]: "found",
+        },
+      });
+
+      // Case 1: No left child (includes Leaf node case)
+      if (!node.left) {
+        records.push({
+          currentNode: node.value,
+          visited: [...path],
+          explanation: `Left child is null. Replace target Node ${node.value} with its right child: Node ${
+            node.right?.value || "null"
+          }.`,
+          codeLine: 5,
+          highlightedNodes: {
+            ...Object.fromEntries(path.slice(0, -1).map((v) => [v, "active"])),
+            [node.value]: "deleted",
+          },
+        });
+        return;
+      }
+
+      // Case 2: No right child
+      if (!node.right) {
+        records.push({
+          currentNode: node.value,
+          visited: [...path],
+          explanation: `Right child is null. Replace target Node ${node.value} with its left child: Node ${node.left.value}.`,
+          codeLine: 6,
+          highlightedNodes: {
+            ...Object.fromEntries(path.slice(0, -1).map((v) => [v, "active"])),
+            [node.value]: "deleted",
+          },
+        });
+        return;
+      }
+
+      // Case 3: Two children. Find inorder successor (min value in right subtree)
+      records.push({
+        currentNode: node.value,
+        visited: [...path],
+        explanation: `Node ${node.value} has two children. Finding its inorder successor: leftmost node in right subtree.`,
+        codeLine: 7,
+        highlightedNodes: {
+          ...Object.fromEntries(path.slice(0, -1).map((v) => [v, "active"])),
+          [node.value]: "found",
+        },
+      });
+
+      const succPath = [];
+      let succ = node.right;
+      while (succ) {
+        succPath.push(succ.value);
+        records.push({
+          currentNode: node.value,
+          visited: [...path],
+          explanation: `Traversing successor search path: Node ${succ.value}.`,
+          codeLine: 7,
+          stepType: "find-successor",
+          highlightedNodes: {
+            ...Object.fromEntries(path.slice(0, -1).map((v) => [v, "active"])),
+            [node.value]: "found",
+            ...Object.fromEntries(succPath.slice(0, -1).map((v) => [v, "active-succ"])),
+            [succ.value]: "visiting-succ",
+          },
+        });
+        succ = succ.left;
+      }
+
+      // Leftmost found
+      let minSucc = node.right;
+      const finalSuccPath = [];
+      while (minSucc.left) {
+        finalSuccPath.push(minSucc.value);
+        minSucc = minSucc.left;
+      }
+      finalSuccPath.push(minSucc.value);
+
+      records.push({
+        currentNode: node.value,
+        visited: [...path],
+        explanation: `Inorder successor located: Node ${minSucc.value} (smallest value in right subtree).`,
+        codeLine: 7,
+        stepType: "highlight-successor",
+        highlightedNodes: {
+          ...Object.fromEntries(path.slice(0, -1).map((v) => [v, "active"])),
+          [node.value]: "found",
+          ...Object.fromEntries(finalSuccPath.slice(0, -1).map((v) => [v, "active-succ"])),
+          [minSucc.value]: "predecessor",
+        },
+      });
+
+      // Copy successor value to current node
+      records.push({
+        currentNode: node.value,
+        visited: [...path],
+        explanation: `Swap the value of Node ${node.value} with successor Node ${minSucc.value}.`,
+        codeLine: 8,
+        stepType: "swap-values",
+        swapValues: {
+          targetValue: node.value,
+          successorValue: minSucc.value,
+        },
+        highlightedNodes: {
+          ...Object.fromEntries(path.slice(0, -1).map((v) => [v, "active"])),
+          [node.value]: "inserted",
+          [minSucc.value]: "predecessor",
+        },
+      });
+
+      // Recursively delete successor
+      records.push({
+        currentNode: minSucc.value,
+        visited: [...path],
+        explanation: `Delete the old successor leaf Node ${minSucc.value} from the right subtree.`,
+        codeLine: 9,
+        stepType: "delete-successor",
+        swapValues: {
+          targetValue: node.value,
+          successorValue: minSucc.value,
+        },
+        highlightedNodes: {
+          ...Object.fromEntries(path.slice(0, -1).map((v) => [v, "active"])),
+          [node.value]: "active",
+          [minSucc.value]: "deleted",
+        },
+      });
+    }
+  };
+
+  recurse(treeRoot);
+  return records;
+}
diff --git a/src/features/algorithms/tree/bstInOrderLogic.js b/src/features/algorithms/tree/bstInOrderLogic.js
new file mode 100644
index 000000000..39f08f770
--- /dev/null
+++ b/src/features/algorithms/tree/bstInOrderLogic.js
@@ -0,0 +1,81 @@
+/**
+ * Pure generator logic for BST In-Order Traversal.
+ * Decoupled from React UI.
+ * @param {Object} treeRoot - The root of the BST
+ * @returns {Array} sequence of state events for visualization
+ */
+export function generateInOrderSteps(treeRoot) {
+  const records = [];
+  const visited = [];
+
+  const traverse = (node) => {
+    if (!node) return;
+
+    if (node.left) {
+      records.push({
+        currentNode: node.left.value,
+        visited: [...visited],
+        explanation: `Move to the left child of ${node.value} -> ${node.left.value}.`,
+        codeLine: 1,
+        highlightedNodes: { [node.value]: "active", [node.left.value]: "visiting" }
+      });
+      traverse(node.left);
+    } else {
+      records.push({
+        currentNode: node.value,
+        visited: [...visited],
+        explanation: `Node ${node.value} has no left child. Backtracking to visit it now.`,
+        codeLine: 1,
+        highlightedNodes: { [node.value]: "active" }
+      });
+    }
+
+    visited.push(node.value);
+    records.push({
+      currentNode: node.value,
+      visited: [...visited],
+      explanation: `Visit node ${node.value} and add it to the inorder result.`,
+      codeLine: 2,
+      highlightedNodes: { [node.value]: "visiting" }
+    });
+
+    if (node.right) {
+      records.push({
+        currentNode: node.right.value,
+        visited: [...visited],
+        explanation: `Move to the right child of ${node.value} -> ${node.right.value}.`,
+        codeLine: 3,
+        highlightedNodes: { [node.value]: "active", [node.right.value]: "visiting" }
+      });
+      traverse(node.right);
+    } else {
+      records.push({
+        currentNode: node.value,
+        visited: [...visited],
+        explanation: `Node ${node.value} has no right child. Backtracking...`,
+        codeLine: 3,
+        highlightedNodes: { [node.value]: "active" }
+      });
+    }
+  };
+
+  records.push({
+    currentNode: treeRoot.value,
+    visited: [],
+    explanation: `Start In-Order traversal from the root node ${treeRoot.value}.`,
+    codeLine: 0,
+    highlightedNodes: {}
+  });
+
+  traverse(treeRoot);
+
+  records.push({
+    currentNode: null,
+    visited: [...visited],
+    explanation: `In-Order traversal is complete! Visited nodes: [${visited.join(", ")}].`,
+    codeLine: 4,
+    highlightedNodes: {}
+  });
+
+  return records;
+}
diff --git a/src/features/algorithms/tree/bstInsertLogic.js b/src/features/algorithms/tree/bstInsertLogic.js
new file mode 100644
index 000000000..c2b1ba315
--- /dev/null
+++ b/src/features/algorithms/tree/bstInsertLogic.js
@@ -0,0 +1,92 @@
+/**
+ * Pure function to generate step-by-step frames for BST Insertion.
+ * Decoupled from React UI.
+ */
+export function generateInsertSteps(treeRoot, val) {
+  const records = [];
+  const path = [];
+
+  const recurse = (node) => {
+    // Line 2: if (root == null)
+    if (!node) {
+      records.push({
+        currentNode: null,
+        visited: [...path],
+        explanation: `Reached empty pointer spot. Creating new Node ${val}.`,
+        codeLine: 1,
+        highlightedNodes: Object.fromEntries(path.map((v) => [v, "active"])),
+        isNodeCreated: true,
+      });
+      // Line 3: return new Node(key)
+      records.push({
+        currentNode: val,
+        visited: [...path, val],
+        explanation: `Successfully inserted Node ${val} at its leaf position!`,
+        codeLine: 2,
+        highlightedNodes: { ...Object.fromEntries(path.map((v) => [v, "active"])), [val]: "inserted" },
+        isNodeCreated: true,
+      });
+      return;
+    }
+
+    path.push(node.value);
+
+    records.push({
+      currentNode: node.value,
+      visited: [...path],
+      explanation: `Comparing insert key ${val} with current node ${node.value}.`,
+      codeLine: 1,
+      highlightedNodes: {
+        ...Object.fromEntries(path.slice(0, -1).map((v) => [v, "active"])),
+        [node.value]: "visiting",
+      },
+    });
+
+    if (val < node.value) {
+      // Line 4: if (key < root.key) -> true
+      records.push({
+        currentNode: node.value,
+        visited: [...path],
+        explanation: `Since insert key ${val} < current node ${node.value}, traverse left.`,
+        codeLine: 3,
+        highlightedNodes: {
+          ...Object.fromEntries(path.slice(0, -1).map((v) => [v, "active"])),
+          [node.value]: "visiting",
+        },
+      });
+      // Line 5: root.left = insert(root.left, key)
+      records.push({
+        currentNode: node.value,
+        visited: [...path],
+        explanation: `Recursively insert into left child.`,
+        codeLine: 4,
+        highlightedNodes: { ...Object.fromEntries(path.map((v) => [v, "active"])) },
+      });
+      recurse(node.left);
+    } else {
+      // Line 6: else if (key > root.key) -> true
+      records.push({
+        currentNode: node.value,
+        visited: [...path],
+        explanation: `Since insert key ${val} > current node ${node.value}, traverse right.`,
+        codeLine: 5,
+        highlightedNodes: {
+          ...Object.fromEntries(path.slice(0, -1).map((v) => [v, "active"])),
+          [node.value]: "visiting",
+        },
+      });
+      // Line 7: root.right = insert(root.right, key)
+      records.push({
+        currentNode: node.value,
+        visited: [...path],
+        explanation: `Recursively insert into right child.`,
+        codeLine: 6,
+        highlightedNodes: { ...Object.fromEntries(path.map((v) => [v, "active"])) },
+      });
+      recurse(node.right);
+    }
+  };
+
+  recurse(treeRoot);
+  return records;
+}
diff --git a/src/features/algorithms/tree/bstPostOrderLogic.js b/src/features/algorithms/tree/bstPostOrderLogic.js
new file mode 100644
index 000000000..ae86dcbe0
--- /dev/null
+++ b/src/features/algorithms/tree/bstPostOrderLogic.js
@@ -0,0 +1,83 @@
+/**
+ * Pure generator logic for BST Post-Order Traversal.
+ * Decoupled from React UI.
+ * @param {Object} treeRoot - The root of the BST
+ * @returns {Array} sequence of state events for visualization
+ */
+export function generatePostOrderSteps(treeRoot) {
+  const records = [];
+  const visited = [];
+
+  const traverse = (node) => {
+    if (!node) return;
+
+    if (node.left) {
+      records.push({
+        currentNode: node.left.value,
+        visited: [...visited],
+        explanation: `Move to the left child of ${node.value} -> ${node.left.value}.`,
+        codeLine: 1,
+        highlightedNodes: { [node.value]: "active", [node.left.value]: "visiting" }
+      });
+      traverse(node.left);
+    } else {
+      records.push({
+        currentNode: node.value,
+        visited: [...visited],
+        explanation: `Node ${node.value} has no left child. Backtracking...`,
+        codeLine: 1,
+        highlightedNodes: { [node.value]: "active" }
+      });
+    }
+
+    if (node.right) {
+      records.push({
+        currentNode: node.right.value,
+        visited: [...visited],
+        explanation: `Move to the right child of ${node.value} -> ${node.right.value}.`,
+        codeLine: 2,
+        highlightedNodes: { [node.value]: "active", [node.right.value]: "visiting" }
+      });
+      traverse(node.right);
+    } else {
+      records.push({
+        currentNode: node.value,
+        visited: [...visited],
+        explanation: `Node ${node.value} has no right child. Backtracking...`,
+        codeLine: 2,
+        highlightedNodes: { [node.value]: "active" }
+      });
+    }
+
+    visited.push(node.value);
+    records.push({
+      currentNode: node.value,
+      visited: [...visited],
+      explanation: `Visit node ${node.value} after both subtrees are done.`,
+      codeLine: 4,
+      highlightedNodes: { [node.value]: "visiting" }
+    });
+  };
+
+  if (!treeRoot) return records;
+
+  records.push({
+    currentNode: treeRoot.value,
+    visited: [],
+    explanation: `Start Post-Order traversal from the root node ${treeRoot.value}.`,
+    codeLine: 0,
+    highlightedNodes: {}
+  });
+
+  traverse(treeRoot);
+
+  records.push({
+    currentNode: null,
+    visited: [...visited],
+    explanation: `Post-Order traversal is complete! Visited nodes: [${visited.join(", ")}].`,
+    codeLine: 5,
+    highlightedNodes: {}
+  });
+
+  return records;
+}
diff --git a/src/features/algorithms/tree/bstPreOrderLogic.js b/src/features/algorithms/tree/bstPreOrderLogic.js
new file mode 100644
index 000000000..5c99be0e7
--- /dev/null
+++ b/src/features/algorithms/tree/bstPreOrderLogic.js
@@ -0,0 +1,83 @@
+/**
+ * Pure generator logic for BST Pre-Order Traversal.
+ * Decoupled from React UI.
+ * @param {Object} treeRoot - The root of the BST
+ * @returns {Array} sequence of state events for visualization
+ */
+export function generatePreOrderSteps(treeRoot) {
+  const records = [];
+  const visited = [];
+
+  const traverse = (node) => {
+    if (!node) return;
+
+    visited.push(node.value);
+    records.push({
+      currentNode: node.value,
+      visited: [...visited],
+      explanation: `Visit node ${node.value} before traversing its children.`,
+      codeLine: 2,
+      highlightedNodes: { [node.value]: "visiting" }
+    });
+
+    if (node.left) {
+      records.push({
+        currentNode: node.left.value,
+        visited: [...visited],
+        explanation: `Move to the left child of ${node.value} -> ${node.left.value}.`,
+        codeLine: 3,
+        highlightedNodes: { [node.value]: "active", [node.left.value]: "visiting" }
+      });
+      traverse(node.left);
+    } else {
+      records.push({
+        currentNode: node.value,
+        visited: [...visited],
+        explanation: `Node ${node.value} has no left child. Skipping left subtree.`,
+        codeLine: 3,
+        highlightedNodes: { [node.value]: "active" }
+      });
+    }
+
+    if (node.right) {
+      records.push({
+        currentNode: node.right.value,
+        visited: [...visited],
+        explanation: `Move to the right child of ${node.value} -> ${node.right.value}.`,
+        codeLine: 4,
+        highlightedNodes: { [node.value]: "active", [node.right.value]: "visiting" }
+      });
+      traverse(node.right);
+    } else {
+      records.push({
+        currentNode: node.value,
+        visited: [...visited],
+        explanation: `Node ${node.value} has no right child. Skipping right subtree.`,
+        codeLine: 4,
+        highlightedNodes: { [node.value]: "active" }
+      });
+    }
+  };
+
+  if (!treeRoot) return records;
+
+  records.push({
+    currentNode: treeRoot.value,
+    visited: [],
+    explanation: `Start Pre-Order traversal from the root node ${treeRoot.value}.`,
+    codeLine: 0,
+    highlightedNodes: {}
+  });
+
+  traverse(treeRoot);
+
+  records.push({
+    currentNode: null,
+    visited: [...visited],
+    explanation: `Pre-Order traversal is complete! Visited nodes: [${visited.join(", ")}].`,
+    codeLine: 5,
+    highlightedNodes: {}
+  });
+
+  return records;
+}
diff --git a/src/features/algorithms/tree/bstSearchLogic.js b/src/features/algorithms/tree/bstSearchLogic.js
new file mode 100644
index 000000000..3b4546369
--- /dev/null
+++ b/src/features/algorithms/tree/bstSearchLogic.js
@@ -0,0 +1,97 @@
+/**
+ * Pure function to generate step-by-step frames for BST Search.
+ * Decoupled from React UI.
+ */
+export function generateSearchSteps(treeRoot, val) {
+  const records = [];
+  const path = [];
+
+  const recurse = (node) => {
+    // Line 1: search header
+    // Line 2: if (root == null || root.key == key)
+    if (!node) {
+      records.push({
+        currentNode: null,
+        visited: [...path],
+        explanation: `Node ${val} is not found in the BST (reached null pointer).`,
+        codeLine: 1,
+        highlightedNodes: { ...Object.fromEntries(path.map((v) => [v, "active"])) },
+      });
+      return;
+    }
+
+    path.push(node.value);
+
+    records.push({
+      currentNode: node.value,
+      visited: [...path],
+      explanation: `Comparing key ${val} with current node ${node.value}.`,
+      codeLine: 1,
+      highlightedNodes: {
+        ...Object.fromEntries(path.slice(0, -1).map((v) => [v, "active"])),
+        [node.value]: "visiting",
+      },
+    });
+
+    if (node.value === val) {
+      records.push({
+        currentNode: node.value,
+        visited: [...path],
+        explanation: `Success! Node ${val} is found in the BST.`,
+        codeLine: 2,
+        highlightedNodes: {
+          ...Object.fromEntries(path.slice(0, -1).map((v) => [v, "active"])),
+          [node.value]: "found",
+        },
+      });
+      return;
+    }
+
+    if (val < node.value) {
+      // Line 4: if (key < root.key) -> true
+      records.push({
+        currentNode: node.value,
+        visited: [...path],
+        explanation: `Since search key ${val} < current node ${node.value}, traverse to the left subtree.`,
+        codeLine: 3,
+        highlightedNodes: {
+          ...Object.fromEntries(path.slice(0, -1).map((v) => [v, "active"])),
+          [node.value]: "visiting",
+        },
+      });
+      // Line 5: return search(root.left, key)
+      records.push({
+        currentNode: node.value,
+        visited: [...path],
+        explanation: `Move to left child.`,
+        codeLine: 4,
+        highlightedNodes: { ...Object.fromEntries(path.map((v) => [v, "active"])) },
+      });
+      recurse(node.left);
+    } else {
+      // Line 4: if (key < root.key) -> false
+      records.push({
+        currentNode: node.value,
+        visited: [...path],
+        explanation: `Since search key ${val} > current node ${node.value}, traverse to the right subtree.`,
+        codeLine: 3,
+        highlightedNodes: {
+          ...Object.fromEntries(path.slice(0, -1).map((v) => [v, "active"])),
+          [node.value]: "visiting",
+        },
+      });
+      // Line 6: return search(root.right, key)
+      records.push({
+        currentNode: node.value,
+        visited: [...path],
+        explanation: `Move to right child.`,
+        codeLine: 5,
+        highlightedNodes: { ...Object.fromEntries(path.map((v) => [v, "active"])) },
+      });
+      recurse(node.right);
+    }
+  };
+
+  recurse(treeRoot);
+  return records;
+}
diff --git a/src/features/algorithms/tree/diameterLogic.js b/src/features/algorithms/tree/diameterLogic.js
new file mode 100644
index 000000000..385d04d2b
--- /dev/null
+++ b/src/features/algorithms/tree/diameterLogic.js
@@ -0,0 +1,67 @@
+/**
+ * Pure generator logic for finding the Diameter of a Tree.
+ * Decoupled from React UI.
+ * @returns {Array} sequence of state events for visualization
+ */
+export function generateDiameterSteps() {
+  const seq = [
+    {
+      msg: "Computing heights of leaves (F, G, I, C)...",
+      nodes: ["F", "G", "I", "C"],
+      heights: { F: 1, G: 1, I: 1, C: 1 },
+      maxD: 0,
+    },
+    {
+      msg: "Computing heights of H and D...",
+      nodes: ["H", "D"],
+      heights: { F: 1, G: 1, I: 1, C: 1, H: 2, D: 2 },
+      maxD: 2,
+    },
+    {
+      msg: "Computing height of E...",
+      nodes: ["E"],
+      heights: { F: 1, G: 1, I: 1, C: 1, H: 2, D: 2, E: 3 },
+      maxD: 2,
+    },
+    {
+      msg: "Computing height of B... updating Max Diameter!",
+      nodes: ["B"],
+      heights: { F: 1, G: 1, I: 1, C: 1, H: 2, D: 2, E: 3, B: 4 },
+      maxD: 5,
+    },
+    {
+      msg: "Computing height of Root A...",
+      nodes: ["A"],
+      heights: { F: 1, G: 1, I: 1, C: 1, H: 2, D: 2, E: 3, B: 4, A: 5 },
+      maxD: 5,
+    },
+  ];
+
+  const finalMaxDiameter = 5;
+  const finalDiameterNodes = ["F", "D", "B", "E", "H", "I"];
+  const finalDiameterEdges = ["D-F", "B-D", "B-E", "E-H", "H-I"];
+
+  const newSteps = [];
+
+  for (const curr of seq) {
+    newSteps.push({
+      activeNodes: curr.nodes,
+      calculatedHeights: curr.heights,
+      maxDiameter: curr.maxD,
+      message: curr.msg,
+      diameterPathEdges: [],
+      diameterPathNodes: [],
+    });
+  }
+
+  newSteps.push({
+    activeNodes: [],
+    calculatedHeights: seq[seq.length - 1].heights,
+    maxDiameter: finalMaxDiameter,
+    message: `Complete! The maximum diameter is ${finalMaxDiameter}. (Highlighted path)`,
+    diameterPathEdges: finalDiameterEdges,
+    diameterPathNodes: finalDiameterNodes,
+  });
+
+  return newSteps;
+}
diff --git a/src/features/algorithms/tree/dsuLogic.js b/src/features/algorithms/tree/dsuLogic.js
new file mode 100644
index 000000000..18f4dda9c
--- /dev/null
+++ b/src/features/algorithms/tree/dsuLogic.js
@@ -0,0 +1,344 @@
+/**
+ * Pure generator logic for Disjoint Set Union (DSU) operations.
+ */
+
+export function* findGenerator(targetId, numElements, parentArray, rankArray, sizeArray, pathCompression) {
+  if (targetId < 0 || targetId >= numElements) {
+    yield { type: 'error', message: `⚠️ Node ${targetId} is out of bounds. Element must be 0 to ${numElements - 1}.` };
+    return;
+  }
+
+  let currentParent = [...parentArray];
+  let currentRank = [...rankArray];
+  let currentSize = [...sizeArray];
+  
+  const parentBefore = [...parentArray];
+  const rankBefore = [...rankArray];
+  const sizeBefore = [...sizeArray];
+
+  const path = [];
+  let curr = targetId;
+  
+  while (true) {
+    path.push(curr);
+    const activeHighlights = {};
+    const activeEdges = {};
+    
+    path.forEach(n => { activeHighlights[n] = "active"; });
+    activeHighlights[curr] = "visiting";
+    
+    if (currentParent[curr] !== curr) {
+      activeEdges[`${curr}->${currentParent[curr]}`] = true;
+    }
+    
+    yield {
+      type: 'step',
+      highlightedNodes: { ...activeHighlights },
+      highlightedEdges: { ...activeEdges },
+      parent: [...currentParent],
+      rank: [...currentRank],
+      size: [...currentSize],
+      parentBefore,
+      rankBefore,
+      sizeBefore,
+      explanation: currentParent[curr] === curr
+        ? `Node ${curr} points to itself. Root / Representative is found at Node ${curr}!`
+        : `Check Node ${curr}. Parent is Node ${currentParent[curr]}. Traverse upward to representative...`
+    };
+
+    if (currentParent[curr] === curr) break;
+    curr = currentParent[curr];
+  }
+
+  const root = curr;
+
+  if (pathCompression && path.length > 2) {
+    yield {
+      type: 'step',
+      highlightedNodes: path.reduce((acc, el) => ({ ...acc, [el]: "active" }), {}),
+      highlightedEdges: {},
+      parent: [...currentParent],
+      rank: [...currentRank],
+      size: [...currentSize],
+      parentBefore,
+      rankBefore,
+      sizeBefore,
+      explanation: `Path Compression enabled! Now, update the parent pointer of all elements traversed: ${path.slice(0, -1).join(", ")} will point directly to Root Node ${root}.`
+    };
+
+    for (let i = 0; i < path.length - 1; i++) {
+      const nodeToCompress = path[i];
+      if (currentParent[nodeToCompress] !== root) {
+        currentParent[nodeToCompress] = root;
+        
+        const stepHighlights = { [root]: "matched", [nodeToCompress]: "visiting" };
+        const stepEdges = { [`${nodeToCompress}->${root}`]: true };
+        
+        yield {
+          type: 'step',
+          highlightedNodes: stepHighlights,
+          highlightedEdges: stepEdges,
+          parent: [...currentParent],
+          rank: [...currentRank],
+          size: [...currentSize],
+          parentBefore,
+          rankBefore,
+          sizeBefore,
+          arrayHighlight: nodeToCompress,
+          explanation: `Compressing Node ${nodeToCompress}: Update parent pointer parent[${nodeToCompress}] = Root Node ${root}.`
+        };
+      }
+    }
+  }
+
+  yield {
+    type: 'step',
+    highlightedNodes: { [root]: "matched" },
+    highlightedEdges: {},
+    parent: [...currentParent],
+    rank: [...currentRank],
+    size: [...currentSize],
+    parentBefore,
+    rankBefore,
+    sizeBefore,
+    explanation: `Operation complete. Representative of Element ${targetId} is Node ${root}.`
+  };
+}
+
+export function* unionGenerator(x, y, numElements, parentArray, rankArray, sizeArray, unionByRank) {
+  if (x < 0 || x >= numElements || y < 0 || y >= numElements) {
+    yield { type: 'error', message: `⚠️ Out of bounds. Elements must be between 0 and ${numElements - 1}` };
+    return;
+  }
+
+  let currentParent = [...parentArray];
+  let currentRank = [...rankArray];
+  let currentSize = [...sizeArray];
+  
+  const parentBefore = [...parentArray];
+  const rankBefore = [...rankArray];
+  const sizeBefore = [...sizeArray];
+
+  // Find root of X
+  let pathX = [];
+  let currX = x;
+  while (true) {
+    pathX.push(currX);
+    if (currentParent[currX] === currX) break;
+    currX = currentParent[currX];
+  }
+  const rootX = currX;
+
+  // Find root of Y
+  let pathY = [];
+  let currY = y;
+  while (true) {
+    pathY.push(currY);
+    if (currentParent[currY] === currY) break;
+    currY = currentParent[currY];
+  }
+  const rootY = currY;
+
+  yield {
+    type: 'step',
+    highlightedNodes: { [x]: "visiting" },
+    highlightedEdges: {},
+    parent: [...parentBefore],
+    rank: [...rankBefore],
+    size: [...sizeBefore],
+    parentBefore,
+    rankBefore,
+    sizeBefore,
+    explanation: `To merge sets containing Node ${x} and Node ${y}, first perform Find(${x}) to locate its root representative.`
+  };
+
+  for (let i = 0; i < pathX.length; i++) {
+    const node = pathX[i];
+    const activeHighlights = {};
+    pathX.slice(0, i + 1).forEach(n => { activeHighlights[n] = "active"; });
+    activeHighlights[node] = "visiting";
+    
+    const activeEdges = {};
+    if (currentParent[node] !== node) {
+      activeEdges[`${node}->${currentParent[node]}`] = true;
+    }
+
+    yield {
+      type: 'step',
+      highlightedNodes: activeHighlights,
+      highlightedEdges: activeEdges,
+      parent: [...parentBefore],
+      rank: [...rankBefore],
+      size: [...sizeBefore],
+      parentBefore,
+      rankBefore,
+      sizeBefore,
+      explanation: currentParent[node] === node
+        ? `Root of Node ${x} found at Node ${node}.`
+        : `Find(${x}): Checking Node ${node}. Parent is Node ${currentParent[node]}...`
+    };
+  }
+
+  yield {
+    type: 'step',
+    highlightedNodes: { [rootX]: "active", [y]: "visiting" },
+    highlightedEdges: {},
+    parent: [...parentBefore],
+    rank: [...rankBefore],
+    size: [...sizeBefore],
+    parentBefore,
+    rankBefore,
+    sizeBefore,
+    explanation: `Root of ${x} is Representative ${rootX}. Now, perform Find(${y}) to locate its representative.`
+  };
+
+  for (let i = 0; i < pathY.length; i++) {
+    const node = pathY[i];
+    const activeHighlights = { [rootX]: "active" };
+    pathY.slice(0, i + 1).forEach(n => { activeHighlights[n] = "active"; });
+    activeHighlights[node] = "visiting";
+    
+    const activeEdges = {};
+    if (currentParent[node] !== node) {
+      activeEdges[`${node}->${currentParent[node]}`] = true;
+    }
+
+    yield {
+      type: 'step',
+      highlightedNodes: activeHighlights,
+      highlightedEdges: activeEdges,
+      parent: [...parentBefore],
+      rank: [...rankBefore],
+      size: [...sizeBefore],
+      parentBefore,
+      rankBefore,
+      sizeBefore,
+      explanation: currentParent[node] === node
+        ? `Root of Node ${y} found at Node ${node}.`
+        : `Find(${y}): Checking Node ${node}. Parent is Node ${currentParent[node]}...`
+    };
+  }
+
+  yield {
+    type: 'step',
+    highlightedNodes: { [rootX]: "matched", [rootY]: "matched" },
+    highlightedEdges: {},
+    parent: [...parentBefore],
+    rank: [...rankBefore],
+    size: [...sizeBefore],
+    parentBefore,
+    rankBefore,
+    sizeBefore,
+    explanation: `Roots identified. Root of ${x} is Node ${rootX}; Root of ${y} is Node ${rootY}.`
+  };
+
+  if (rootX === rootY) {
+    yield {
+      type: 'step',
+      highlightedNodes: { [rootX]: "matched" },
+      highlightedEdges: {},
+      parent: [...parentBefore],
+      rank: [...rankBefore],
+      size: [...sizeBefore],
+      parentBefore,
+      rankBefore,
+      sizeBefore,
+      explanation: `Roots are identical: rootX (${rootX}) == rootY (${rootY}). Elements ${x} and ${y} are already in the same disjoint set. No merge necessary.`
+    };
+  } else {
+    if (unionByRank) {
+      yield {
+        type: 'step',
+        highlightedNodes: { [rootX]: "matched", [rootY]: "matched" },
+        highlightedEdges: {},
+        parent: [...parentBefore],
+        rank: [...rankBefore],
+        size: [...sizeBefore],
+        parentBefore,
+        rankBefore,
+        sizeBefore,
+        explanation: `Union by Rank enabled! Compare Rank[${rootX}] = ${currentRank[rootX]} vs Rank[${rootY}] = ${currentRank[rootY]}.`
+      };
+
+      if (currentRank[rootX] < currentRank[rootY]) {
+        currentParent[rootX] = rootY;
+        currentSize[rootY] += currentSize[rootX];
+        yield {
+          type: 'step',
+          highlightedNodes: { [rootX]: "visiting", [rootY]: "matched" },
+          highlightedEdges: { [`${rootX}->${rootY}`]: true },
+          parent: [...currentParent],
+          rank: [...currentRank],
+          size: [...currentSize],
+          parentBefore,
+          rankBefore,
+          sizeBefore,
+          arrayHighlight: rootX,
+          explanation: `Rank[${rootX}] < Rank[${rootY}]. Attach Tree ${rootX} under Root ${rootY}. Set parent[${rootX}] = ${rootY}.`
+        };
+      } else if (currentRank[rootX] > currentRank[rootY]) {
+        currentParent[rootY] = rootX;
+        currentSize[rootX] += currentSize[rootY];
+        yield {
+          type: 'step',
+          highlightedNodes: { [rootX]: "matched", [rootY]: "visiting" },
+          highlightedEdges: { [`${rootY}->${rootX}`]: true },
+          parent: [...currentParent],
+          rank: [...currentRank],
+          size: [...currentSize],
+          parentBefore,
+          rankBefore,
+          sizeBefore,
+          arrayHighlight: rootY,
+          explanation: `Rank[${rootX}] > Rank[${rootY}]. Attach Tree ${rootY} under Root ${rootX}. Set parent[${rootY}] = ${rootX}.`
+        };
+      } else {
+        currentParent[rootY] = rootX;
+        currentSize[rootX] += currentSize[rootY];
+        currentRank[rootX] += 1;
+        yield {
+          type: 'step',
+          highlightedNodes: { [rootX]: "matched", [rootY]: "visiting" },
+          highlightedEdges: { [`${rootY}->${rootX}`]: true },
+          parent: [...currentParent],
+          rank: [...currentRank],
+          size: [...currentSize],
+          parentBefore,
+          rankBefore,
+          sizeBefore,
+          arrayHighlight: rootY,
+          explanation: `Ranks are equal. Attach root ${rootY} under root ${rootX}. Increment Rank[${rootX}] to ${currentRank[rootX]}.`
+        };
+      }
+    } else {
+      currentParent[rootY] = rootX;
+      currentSize[rootX] += currentSize[rootY];
+      yield {
+        type: 'step',
+        highlightedNodes: { [rootX]: "matched", [rootY]: "visiting" },
+        highlightedEdges: { [`${rootY}->${rootX}`]: true },
+        parent: [...currentParent],
+        rank: [...currentRank],
+        size: [...currentSize],
+        parentBefore,
+        rankBefore,
+        sizeBefore,
+        arrayHighlight: rootY,
+        explanation: `Union by Rank off. Attach Tree ${rootY} under Root ${rootX} arbitrarily. Set parent[${rootY}] = ${rootX}.`
+      };
+    }
+
+    yield {
+      type: 'step',
+      highlightedNodes: { [rootX]: "matched" },
+      highlightedEdges: {},
+      parent: [...currentParent],
+      rank: [...currentRank],
+      size: [...currentSize],
+      parentBefore,
+      rankBefore,
+      sizeBefore,
+      explanation: `Sets successfully merged! Node ${x} and Node ${y} now share a single representative root.`
+    };
+  }
+}
diff --git a/src/features/algorithms/tree/fenwickTreeLogic.js b/src/features/algorithms/tree/fenwickTreeLogic.js
new file mode 100644
index 000000000..a6d4754a8
--- /dev/null
+++ b/src/features/algorithms/tree/fenwickTreeLogic.js
@@ -0,0 +1,144 @@
+/**
+ * Pure generator logic for Fenwick Tree (Binary Indexed Tree) operations.
+ */
+
+export function buildBIT(arr) {
+  const n = arr.length - 1;
+  const bit = new Array(n + 1).fill(0);
+  for (let i = 1; i <= n; i++) {
+    let j = i;
+    while (j <= n) {
+      bit[j] += arr[i];
+      j += j & -j;
+    }
+  }
+  return bit;
+}
+
+export function* updateGenerator(idx, delta, baseArray, bit, n) {
+  if (idx < 1 || idx > n || isNaN(delta)) {
+    yield { type: 'error', message: `⚠️ Please enter a valid index (1-${n}) and a numeric delta value.` };
+    return;
+  }
+
+  const newBase = [...baseArray];
+  newBase[idx] += delta;
+  
+  // Calculate new BIT manually for final state, though we also mutate tempBit
+  const newBit = buildBIT(newBase.slice(1).reduce((acc, v, i) => { acc[i + 1] = v; return acc; }, [0, ...newBase.slice(1)]));
+
+  let i = idx;
+  const tempBit = [...bit];
+
+  yield {
+    type: 'step',
+    highlightedBIT: { [idx]: "visiting" },
+    highlightedBase: { [idx]: "visiting" },
+    explanation: `Point Update: Add delta=${delta} to index ${idx}. Binary: ${idx.toString(2).padStart(4, '0')}. Start updating BIT[${idx}].`,
+    result: undefined
+  };
+
+  while (i <= n) {
+    const lsb = i & -i;
+    tempBit[i] += delta;
+
+    yield {
+      type: 'step',
+      highlightedBIT: { [i]: "active" },
+      highlightedBase: { [idx]: "active" },
+      explanation: `BIT[${i}] (binary: ${i.toString(2).padStart(4,'0')}) += ${delta}. LSB(${i}) = ${lsb}. New BIT[${i}] = ${tempBit[i]}. Next: i = ${i} + ${lsb} = ${i + lsb}.`,
+      result: undefined
+    };
+
+    i += lsb;
+    if (i <= n) {
+      yield {
+        type: 'step',
+        highlightedBIT: { [i]: "visiting" },
+        highlightedBase: { [idx]: "active" },
+        explanation: `Move to BIT[${i}] (binary: ${i.toString(2).padStart(4, '0')}). LSB propagates up the implicit tree.`,
+        result: undefined
+      };
+    }
+  }
+
+  yield {
+    type: 'complete',
+    highlightedBIT: {},
+    highlightedBase: { [idx]: "matched" },
+    explanation: `✅ Point Update complete! Index ${idx} in the source array now has value ${newBase[idx]} (was ${baseArray[idx]}). All affected BIT nodes updated.`,
+    result: `Updated index ${idx}: ${baseArray[idx]} → ${newBase[idx]}`,
+    newBase,
+    newBit
+  };
+}
+
+export function* queryGenerator(l, r, bit, n) {
+  if (isNaN(l) || isNaN(r) || l < 1 || r > n || l > r) {
+    yield { type: 'error', message: `⚠️ Please enter a valid range (1 ≤ L ≤ R ≤ ${n}).` };
+    return;
+  }
+
+  const prefixSum = (endIdx) => {
+    let sum = 0;
+    let i = endIdx;
+    const trace = [];
+    while (i > 0) {
+      trace.push({ i, val: bit[i], lsb: i & -i });
+      sum += bit[i];
+      i -= i & -i;
+    }
+    return { sum, trace };
+  };
+
+  const { sum: sumR, trace: traceR } = prefixSum(r);
+  const { sum: sumL1, trace: traceL1 } = prefixSum(l - 1);
+  const result = sumR - sumL1;
+
+  yield {
+    type: 'step',
+    highlightedBIT: {},
+    highlightedBase: Object.fromEntries(Array.from({ length: r - l + 1 }, (_, i) => [l + i, "visiting"])),
+    explanation: `Range Sum Query [${l}, ${r}]: Compute prefix(${r}) - prefix(${l - 1}). Two prefix sums are needed.`,
+    result: undefined
+  };
+
+  // Trace prefix(r)
+  for (const { i, val, lsb } of traceR) {
+    yield {
+      type: 'step',
+      highlightedBIT: { [i]: "active" },
+      highlightedBase: Object.fromEntries(Array.from({ length: r - l + 1 }, (_, k) => [l + k, "active"])),
+      explanation: `prefix(${r}) step: BIT[${i}] = ${val}. LSB(${i}) = ${lsb}. Binary: ${i.toString(2).padStart(4, '0')}. Accumulate → next: i = ${i} - ${lsb} = ${i - lsb}.`,
+      result: undefined
+    };
+  }
+
+  yield {
+    type: 'step',
+    highlightedBIT: {},
+    highlightedBase: Object.fromEntries(Array.from({ length: r - l + 1 }, (_, i) => [l + i, "active"])),
+    explanation: `prefix(${r}) = ${sumR}. Now compute prefix(${l - 1}) to subtract.`,
+    result: undefined
+  };
+
+  if (l - 1 > 0) {
+    for (const { i, val, lsb } of traceL1) {
+      yield {
+        type: 'step',
+        highlightedBIT: { [i]: "visiting" },
+        highlightedBase: Object.fromEntries(Array.from({ length: r - l + 1 }, (_, k) => [l + k, "active"])),
+        explanation: `prefix(${l - 1}) step: BIT[${i}] = ${val}. LSB(${i}) = ${lsb}. Binary: ${i.toString(2).padStart(4, '0')}. Accumulate → next: i = ${i} - ${lsb} = ${i - lsb}.`,
+        result: undefined
+      };
+    }
+  }
+
+  yield {
+    type: 'complete',
+    highlightedBIT: {},
+    highlightedBase: Object.fromEntries(Array.from({ length: r - l + 1 }, (_, i) => [l + i, "matched"])),
+    explanation: `✅ Range Sum [${l}, ${r}] = prefix(${r}) - prefix(${l - 1}) = ${sumR} - ${sumL1} = ${result}.`,
+    result: `Sum[${l}..${r}] = ${result}`
+  };
+}
diff --git a/src/features/algorithms/tree/heapLogic.js b/src/features/algorithms/tree/heapLogic.js
new file mode 100644
index 000000000..84fd35eb6
--- /dev/null
+++ b/src/features/algorithms/tree/heapLogic.js
@@ -0,0 +1,270 @@
+/**
+ * Pure generator functions for Heap operations.
+ * Yields frames representing the state of the operation.
+ */
+
+const parentIndex = (i) => Math.floor((i - 1) / 2);
+const leftChild = (i) => 2 * i + 1;
+const rightChild = (i) => 2 * i + 2;
+
+export function compare(a, b, mode) {
+  return mode === "min" ? a < b : a > b;
+}
+
+export function* buildHeapGenerator(seedHeap, mode) {
+  const arr = [...seedHeap];
+  yield {
+    heap: [...arr],
+    operation: `Switch to ${mode === "min" ? "Min Heap" : "Max Heap"}`,
+    explanation: "Rebuilding structure to satisfy the new heap property.",
+    type: "start"
+  };
+
+  const heapifyDown = function* (start, size) {
+    let i = start;
+    while (true) {
+      let target = i;
+      const l = leftChild(i);
+      const r = rightChild(i);
+
+      if (l < size) {
+        yield {
+          heap: [...arr],
+          operation: "Heapify",
+          explanation: `${mode === "min" ? "Min" : "Max"} Heap property check in progress.`,
+          comparison: `Comparing node ${arr[i]} with left child ${arr[l]}`,
+          activeIndices: [i, l],
+          type: "step"
+        };
+        if (compare(arr[l], arr[target], mode)) target = l;
+      }
+
+      if (r < size) {
+        yield {
+          heap: [...arr],
+          operation: "Heapify",
+          explanation: `${mode === "min" ? "Min" : "Max"} Heap property check in progress.`,
+          comparison: `Comparing node ${arr[target]} with right child ${arr[r]}`,
+          activeIndices: [target, r],
+          type: "step"
+        };
+        if (compare(arr[r], arr[target], mode)) target = r;
+      }
+
+      if (target === i) break;
+
+      yield {
+        heap: [...arr],
+        operation: "Heapify",
+        explanation: `Swapping nodes to restore ${mode === "min" ? "Min" : "Max"} Heap property.`,
+        comparison: `Swapping ${arr[i]} and ${arr[target]}`,
+        swappingIndices: [i, target],
+        activeIndices: [i, target],
+        type: "step"
+      };
+
+      const temp = arr[i];
+      arr[i] = arr[target];
+      arr[target] = temp;
+
+      yield {
+        heap: [...arr],
+        operation: "Heapify",
+        explanation: "Partial heap fixed. Continuing down the tree.",
+        activeIndices: [target],
+        type: "step"
+      };
+
+      i = target;
+    }
+  };
+
+  for (let i = Math.floor(arr.length / 2) - 1; i >= 0; i -= 1) {
+    yield* heapifyDown(i, arr.length);
+  }
+
+  yield {
+    heap: [...arr],
+    operation: "Heapify Complete",
+    explanation: `${mode === "min" ? "Min" : "Max"} Heap property restored for entire tree.`,
+    type: "complete"
+  };
+}
+
+export function* insertGenerator(currentHeap, value, mode) {
+  const arr = [...currentHeap, value];
+  yield {
+    heap: [...arr],
+    operation: "Insert",
+    explanation: `Inserted ${value} at the end of the heap (next available position).`,
+    activeIndices: [arr.length - 1],
+    type: "start"
+  };
+
+  let i = arr.length - 1;
+  while (i > 0) {
+    const p = parentIndex(i);
+    yield {
+      heap: [...arr],
+      operation: "Heapify Up",
+      explanation: "Checking if child violates heap property with its parent.",
+      comparison: `Comparing ${arr[i]} with parent ${arr[p]}`,
+      activeIndices: [i, p],
+      type: "step"
+    };
+
+    if (!compare(arr[i], arr[p], mode)) break;
+
+    yield {
+      heap: [...arr],
+      operation: "Heapify Up",
+      explanation: `Swapping nodes to maintain ${mode === "min" ? "Min" : "Max"} Heap property.`,
+      comparison: `Swapping ${arr[i]} and ${arr[p]}`,
+      swappingIndices: [i, p],
+      activeIndices: [i, p],
+      type: "step"
+    };
+
+    const temp = arr[i];
+    arr[i] = arr[p];
+    arr[p] = temp;
+
+    yield {
+      heap: [...arr],
+      operation: "Heapify Up",
+      explanation: "Node moved up one level.",
+      activeIndices: [p],
+      type: "step"
+    };
+
+    i = p;
+  }
+
+  yield {
+    heap: [...arr],
+    operation: "Insert Complete",
+    explanation: `${value} inserted and heap property is satisfied.`,
+    type: "complete"
+  };
+}
+
+export function* extractRootGenerator(currentHeap, mode) {
+  if (currentHeap.length === 0) {
+    yield { type: "error", explanation: "Heap is empty. Nothing to extract." };
+    return;
+  }
+
+  const arr = [...currentHeap];
+  const rootLabel = mode === "min" ? "Min" : "Max";
+  const rootValue = arr[0];
+  
+  yield {
+    heap: [...arr],
+    operation: `Extract ${rootLabel}`,
+    explanation: `Removing root value ${rootValue}.`,
+    activeIndices: [0],
+    type: "start"
+  };
+
+  if (arr.length === 1) {
+    yield {
+      heap: [],
+      operation: `Extract ${rootLabel} Complete`,
+      explanation: `Extracted ${rootValue}. Heap is now empty.`,
+      type: "complete"
+    };
+    return;
+  }
+
+  const last = arr[arr.length - 1];
+  arr[0] = last;
+  arr.pop();
+
+  yield {
+    heap: [...arr],
+    operation: "Replace Root",
+    explanation: `Replaced root with last node ${last}. Heapify Down begins.`,
+    activeIndices: [0],
+    type: "step"
+  };
+
+  let i = 0;
+  while (true) {
+    let target = i;
+    const l = leftChild(i);
+    const r = rightChild(i);
+
+    if (l < arr.length) {
+      yield {
+        heap: [...arr],
+        operation: "Heapify Down",
+        explanation: "Comparing root candidate with children.",
+        comparison: `Comparing ${arr[target]} with left child ${arr[l]}`,
+        activeIndices: [target, l],
+        type: "step"
+      };
+      if (compare(arr[l], arr[target], mode)) target = l;
+    }
+
+    if (r < arr.length) {
+      yield {
+        heap: [...arr],
+        operation: "Heapify Down",
+        explanation: "Choosing best child according to heap type.",
+        comparison: `Comparing ${arr[target]} with right child ${arr[r]}`,
+        activeIndices: [target, r],
+        type: "step"
+      };
+      if (compare(arr[r], arr[target], mode)) target = r;
+    }
+
+    if (target === i) break;
+
+    yield {
+      heap: [...arr],
+      operation: "Heapify Down",
+      explanation: "Swapping to restore heap property.",
+      comparison: `Swapping ${arr[i]} and ${arr[target]}`,
+      swappingIndices: [i, target],
+      activeIndices: [i, target],
+      type: "step"
+    };
+
+    const temp = arr[i];
+    arr[i] = arr[target];
+    arr[target] = temp;
+
+    yield {
+      heap: [...arr],
+      operation: "Heapify Down",
+      explanation: "Continuing down toward leaves.",
+      activeIndices: [target],
+      type: "step"
+    };
+
+    i = target;
+  }
+
+  yield {
+    heap: [...arr],
+    operation: `Extract ${rootLabel} Complete`,
+    explanation: `Extracted ${rootValue}. Final heap structure restored.`,
+    type: "complete"
+  };
+}
+
+export function* peekRootGenerator(currentHeap, mode) {
+  if (currentHeap.length === 0) {
+    yield { type: "error", explanation: "Heap is empty. No root to peek." };
+    return;
+  }
+
+  yield {
+    heap: [...currentHeap],
+    operation: "Peek",
+    explanation: `Root value is ${currentHeap[0]}.`,
+    comparison: `${mode === "min" ? "Min" : "Max"} element always stays at root.`,
+    activeIndices: [0],
+    type: "complete"
+  };
+}
diff --git a/src/features/algorithms/tree/inOrderLogic.js b/src/features/algorithms/tree/inOrderLogic.js
new file mode 100644
index 000000000..15e1b048b
--- /dev/null
+++ b/src/features/algorithms/tree/inOrderLogic.js
@@ -0,0 +1,103 @@
+/**
+ * Pure function to generate step-by-step frames for Tree In-Order Traversal.
+ * Decoupled from React UI.
+ */
+export function generateInOrderSteps(treeRoot) {
+  if (!treeRoot) return [];
+
+  const records = [];
+  const visited = [];
+  const stack = [];
+
+  const traverse = (node) => {
+    if (!node) return;
+
+    // Line 2: left subtree
+    if (node.left) {
+      stack.push(node);
+      records.push({
+        currentNode: node.left.value,
+        visited: [...visited],
+        explanation: `Recurse into left child of ${node.value} -> ${node.left.value}.`,
+        codeLine: 2,
+        stack: [...stack].map((n) => n.value),
+        highlightedNodes: { [node.value]: "active", [node.left.value]: "visiting" },
+        threads: [],
+      });
+      traverse(node.left);
+      stack.pop();
+    } else {
+      records.push({
+        currentNode: node.value,
+        visited: [...visited],
+        explanation: `Node ${node.value} has no left child. Backtracking...`,
+        codeLine: 2,
+        stack: [...stack].map((n) => n.value),
+        highlightedNodes: { [node.value]: "active" },
+        threads: [],
+      });
+    }
+
+    // Line 3: visit
+    visited.push(node.value);
+    records.push({
+      currentNode: node.value,
+      visited: [...visited],
+      explanation: `Visit node ${node.value} and add it to our traversal path.`,
+      codeLine: 3,
+      stack: [...stack].map((n) => n.value),
+      highlightedNodes: { [node.value]: "visiting" },
+      threads: [],
+    });
+
+    // Line 4: right subtree
+    if (node.right) {
+      stack.push(node);
+      records.push({
+        currentNode: node.right.value,
+        visited: [...visited],
+        explanation: `Recurse into right child of ${node.value} -> ${node.right.value}.`,
+        codeLine: 4,
+        stack: [...stack].map((n) => n.value),
+        highlightedNodes: { [node.value]: "active", [node.right.value]: "visiting" },
+        threads: [],
+      });
+      traverse(node.right);
+      stack.pop();
+    } else {
+      records.push({
+        currentNode: node.value,
+        visited: [...visited],
+        explanation: `Node ${node.value} has no right child. Backtracking...`,
+        codeLine: 4,
+        stack: [...stack].map((n) => n.value),
+        highlightedNodes: { [node.value]: "active" },
+        threads: [],
+      });
+    }
+  };
+
+  records.push({
+    currentNode: treeRoot.value,
+    visited: [],
+    explanation: `Start In-Order traversal from the root node ${treeRoot.value}.`,
+    codeLine: 0,
+    stack: [],
+    highlightedNodes: {},
+    threads: [],
+  });
+
+  traverse(treeRoot);
+
+  records.push({
+    currentNode: null,
+    visited: [...visited],
+    explanation: `In-Order traversal is complete! Notice that the BST values are printed in sorted order: [${visited.join(", ")}].`,
+    codeLine: 5,
+    stack: [],
+    highlightedNodes: {},
+    threads: [],
+  });
+
+  return records;
+}
diff --git a/src/features/algorithms/tree/isomorphismLogic.js b/src/features/algorithms/tree/isomorphismLogic.js
new file mode 100644
index 000000000..46ff9e95e
--- /dev/null
+++ b/src/features/algorithms/tree/isomorphismLogic.js
@@ -0,0 +1,39 @@
+/**
+ * Pure generator logic for Tree Isomorphism.
+ * Decoupled from React UI.
+ * @returns {Array} sequence of state frames
+ */
+export function generateIsomorphismSteps() {
+  const seq = [
+    { msg: "Comparing Root Nodes (1, 1). They match.", pair: ["1-1", "2-1"], status: "match" },
+    { msg: "Comparing Left(1) with Left(2): (2, 3). Mismatch. Trying swapped...", pair: ["1-2", "2-3"], status: "mismatch" },
+    { msg: "Comparing Left(1) with Right(2): (2, 2). Match! Swapped children confirmed.", pair: ["1-2", "2-2"], status: "match" },
+    { msg: "Comparing Right(1) with Left(2): (3, 3). Match!", pair: ["1-3", "2-3"], status: "match" },
+    { msg: "Comparing Left(2) with Left(5): (4, 5). Mismatch. Trying swapped...", pair: ["1-4", "2-5"], status: "mismatch" },
+    { msg: "Comparing Left(2) with Right(4): (4, 4). Match! Swapped children confirmed.", pair: ["1-4", "2-4"], status: "match" },
+    { msg: "Comparing Right(2) with Left(5): (5, 5). Match!", pair: ["1-5", "2-5"], status: "match" },
+  ];
+
+  const newSteps = [];
+  let currentMatchStatus = {};
+
+  for (const curr of seq) {
+    currentMatchStatus = { ...currentMatchStatus, [`${curr.pair[0]}_${curr.pair[1]}`]: curr.status };
+    newSteps.push({
+      activePairs: curr.pair,
+      matchStatus: currentMatchStatus,
+      message: curr.msg,
+      isomorphicResult: null
+    });
+  }
+  
+  // Add completion step
+  newSteps.push({
+    activePairs: [],
+    matchStatus: currentMatchStatus,
+    message: "Complete! The trees are isomorphic.",
+    isomorphicResult: true
+  });
+
+  return newSteps;
+}
diff --git a/src/features/algorithms/tree/lcaLogic.js b/src/features/algorithms/tree/lcaLogic.js
new file mode 100644
index 000000000..fc080d58b
--- /dev/null
+++ b/src/features/algorithms/tree/lcaLogic.js
@@ -0,0 +1,55 @@
+/**
+ * Pure generator logic for finding the Lowest Common Ancestor (LCA).
+ * Decoupled from React UI.
+ * @param {string} rootId - ID of the root node
+ * @param {string} p - ID of the first target node
+ * @param {string} q - ID of the second target node
+ * @param {Array} edges - Array of edge objects { parent, child }
+ * @returns {Array} sequence of state events for visualization
+ */
+export function generateLcaSequence(rootId, p, q, edges) {
+  const sequence = [];
+
+  const dfs = (nodeId) => {
+    if (!nodeId) return null;
+
+    sequence.push({ type: "VISIT", node: nodeId });
+
+    if (nodeId === p || nodeId === q) {
+      sequence.push({ type: "FOUND_TARGET", node: nodeId });
+      sequence.push({ type: "BACKTRACK", node: nodeId, returnValue: nodeId });
+      return nodeId;
+    }
+
+    const children = edges.filter((e) => e.parent === nodeId).map((e) => e.child);
+    const leftChild = children[0] || null;
+    const rightChild = children[1] || null;
+
+    let leftResult = null;
+    let rightResult = null;
+
+    if (leftChild) {
+      leftResult = dfs(leftChild);
+      sequence.push({ type: "RETURN_LEFT", node: nodeId, child: leftChild, val: leftResult });
+    }
+
+    if (rightChild) {
+      rightResult = dfs(rightChild);
+      sequence.push({ type: "RETURN_RIGHT", node: nodeId, child: rightChild, val: rightResult });
+    }
+
+    if (leftResult && rightResult) {
+      sequence.push({ type: "LCA_FOUND", node: nodeId });
+      sequence.push({ type: "BACKTRACK", node: nodeId, returnValue: nodeId });
+      return nodeId;
+    }
+
+    const ret = leftResult || rightResult;
+    sequence.push({ type: "BACKTRACK", node: nodeId, returnValue: ret });
+    return ret;
+  };
+
+  dfs(rootId);
+  sequence.push({ type: "FINISH" });
+  return sequence;
+}
diff --git a/src/features/algorithms/tree/levelOrderLogic.js b/src/features/algorithms/tree/levelOrderLogic.js
new file mode 100644
index 000000000..847985806
--- /dev/null
+++ b/src/features/algorithms/tree/levelOrderLogic.js
@@ -0,0 +1,112 @@
+/**
+ * Pure function to generate step-by-step frames for Tree Level-Order Traversal.
+ * Decoupled from React UI.
+ */
+export function generateLevelOrderSteps(treeRoot) {
+  const records = [];
+  const visited = [];
+  const queue = [];
+
+  if (!treeRoot) return records;
+
+  records.push({
+    currentNode: treeRoot.value,
+    visited: [],
+    queue: [treeRoot.value],
+    explanation: `Start Level-Order traversal. Enqueue root node ${treeRoot.value}.`,
+    codeLine: 2,
+    stack: [],
+    highlightedNodes: { [treeRoot.value]: "visiting" },
+    threads: [],
+  });
+
+  const runQueue = [{ node: treeRoot, path: [treeRoot.value] }];
+
+  while (runQueue.length > 0) {
+    const currentItem = runQueue.shift();
+    const node = currentItem.node;
+
+    visited.push(node.value);
+
+    const currentQueueValues = runQueue.map((q) => q.node.value);
+
+    // Line 4: Dequeue and visit
+    records.push({
+      currentNode: node.value,
+      visited: [...visited],
+      queue: [node.value, ...currentQueueValues],
+      explanation: `Dequeue node ${node.value} from the queue and visit it. Current path: [${visited.join(", ")}].`,
+      codeLine: 4,
+      stack: [],
+      highlightedNodes: { [node.value]: "visiting" },
+      threads: [],
+    });
+
+    // Line 5: Enqueue left child
+    if (node.left) {
+      currentQueueValues.push(node.left.value);
+      runQueue.push({ node: node.left, path: [...currentItem.path, node.left.value] });
+      records.push({
+        currentNode: node.value,
+        visited: [...visited],
+        queue: [...currentQueueValues],
+        explanation: `Node ${node.value} has a left child ${node.left.value}. Add it to the back of the queue.`,
+        codeLine: 5,
+        stack: [],
+        highlightedNodes: { [node.value]: "active", [node.left.value]: "visiting" },
+        threads: [],
+      });
+    } else {
+      records.push({
+        currentNode: node.value,
+        visited: [...visited],
+        queue: [...currentQueueValues],
+        explanation: `Node ${node.value} has no left child. Nothing to enqueue.`,
+        codeLine: 5,
+        stack: [],
+        highlightedNodes: { [node.value]: "active" },
+        threads: [],
+      });
+    }
+
+    // Line 6: Enqueue right child
+    if (node.right) {
+      currentQueueValues.push(node.right.value);
+      runQueue.push({ node: node.right, path: [...currentItem.path, node.right.value] });
+      records.push({
+        currentNode: node.value,
+        visited: [...visited],
+        queue: [...currentQueueValues],
+        explanation: `Node ${node.value} has a right child ${node.right.value}. Add it to the back of the queue.`,
+        codeLine: 6,
+        stack: [],
+        highlightedNodes: { [node.value]: "active", [node.right.value]: "visiting" },
+        threads: [],
+      });
+    } else {
+      records.push({
+        currentNode: node.value,
+        visited: [...visited],
+        queue: [...currentQueueValues],
+        explanation: `Node ${node.value} has no right child. Nothing to enqueue.`,
+        codeLine: 6,
+        stack: [],
+        highlightedNodes: { [node.value]: "active" },
+        threads: [],
+      });
+    }
+  }
+
+  records.push({
+    currentNode: null,
+    visited: [...visited],
+    queue: [],
+    explanation: `The queue is empty! Level-Order traversal successfully finished.`,
+    codeLine: 7,
+    stack: [],
+    highlightedNodes: {},
+    threads: [],
+  });
+
+  return records;
+}
diff --git a/src/features/algorithms/tree/morrisLogic.js b/src/features/algorithms/tree/morrisLogic.js
new file mode 100644
index 000000000..791c15a72
--- /dev/null
+++ b/src/features/algorithms/tree/morrisLogic.js
@@ -0,0 +1,167 @@
+/**
+ * Pure function to generate step-by-step frames for Tree Morris Traversal.
+ * Decoupled from React UI.
+ */
+export function generateMorrisSteps(treeRoot) {
+  const records = [];
+  const visited = [];
+  let activeThreads = [];
+
+  // Predecessor finder helper
+  const findPredecessor = (currNode, leftSubtree) => {
+    let pNode = leftSubtree;
+    while (pNode.right && pNode.right.value !== currNode.value) {
+      pNode = pNode.right;
+    }
+    return pNode;
+  };
+
+  if (!treeRoot) return records;
+
+  let curr = treeRoot;
+
+  records.push({
+    currentNode: curr.value,
+    visited: [],
+    threads: [],
+    explanation: `Initialize Morris Traversal. Set curr = root node (${curr.value}).`,
+    codeLine: 1,
+    stack: [],
+    highlightedNodes: { [curr.value]: "visiting" },
+  });
+
+  while (curr !== null) {
+    if (curr.left === null) {
+      visited.push(curr.value);
+
+      records.push({
+        currentNode: curr.value,
+        visited: [...visited],
+        threads: [...activeThreads],
+        explanation: `Node ${curr.value} has no left child. Visit node ${curr.value} and move to the right child.`,
+        codeLine: 4,
+        stack: [],
+        highlightedNodes: { [curr.value]: "visiting" },
+      });
+
+      const nextNode = curr.right;
+      curr = nextNode;
+
+      if (curr) {
+        records.push({
+          currentNode: curr.value,
+          visited: [...visited],
+          threads: [...activeThreads],
+          explanation: `Move curr to its right child pointer -> Node ${curr.value}.`,
+          codeLine: 2,
+          stack: [],
+          highlightedNodes: { [curr.value]: "visiting" },
+        });
+      }
+    } else {
+      const pred = findPredecessor(curr, curr.left);
+
+      records.push({
+        currentNode: curr.value,
+        predecessor: pred.value,
+        visited: [...visited],
+        threads: [...activeThreads],
+        explanation: `Node ${curr.value} has a left child. Search for its inorder predecessor: rightmost node in left subtree -> Node ${pred.value}.`,
+        codeLine: 6,
+        stack: [],
+        highlightedNodes: { [curr.value]: "active", [pred.value]: "predecessor" },
+      });
+
+      const threadIdx = activeThreads.findIndex(
+        (t) => t.from === pred.value && t.to === curr.value
+      );
+
+      if (threadIdx === -1) {
+        // Predecessor's right is null, establish thread
+        activeThreads.push({ from: pred.value, to: curr.value });
+
+        records.push({
+          currentNode: curr.value,
+          predecessor: pred.value,
+          visited: [...visited],
+          threads: [...activeThreads],
+          explanation: `Predecessor ${pred.value}'s right is null. Establish a temporary Thread (link) from ${pred.value} back to current node ${curr.value} to remember the return path.`,
+          codeLine: 8,
+          stack: [],
+          highlightedNodes: { [curr.value]: "active", [pred.value]: "predecessor" },
+        });
+
+        const nextNode = curr.left;
+
+        records.push({
+          currentNode: nextNode.value,
+          predecessor: pred.value,
+          visited: [...visited],
+          threads: [...activeThreads],
+          explanation: `Thread established. Now safe to move current pointer to left child: Node ${nextNode.value}.`,
+          codeLine: 9,
+          stack: [],
+          highlightedNodes: { [nextNode.value]: "visiting", [pred.value]: "predecessor" },
+        });
+
+        curr = nextNode;
+      } else {
+        // Thread already exists, clear it and visit current
+        activeThreads = activeThreads.filter(
+          (t) => !(t.from === pred.value && t.to === curr.value)
+        );
+
+        records.push({
+          currentNode: curr.value,
+          predecessor: pred.value,
+          visited: [...visited],
+          threads: [...activeThreads],
+          explanation: `Predecessor ${pred.value}'s right points to ${curr.value}. This indicates the left subtree was already traversed! Remove the temporary Thread to restore the tree.`,
+          codeLine: 11,
+          stack: [],
+          highlightedNodes: { [curr.value]: "active", [pred.value]: "predecessor" },
+        });
+
+        visited.push(curr.value);
+
+        records.push({
+          currentNode: curr.value,
+          predecessor: pred.value,
+          visited: [...visited],
+          threads: [...activeThreads],
+          explanation: `Visit node ${curr.value}. Add it to the path: [${visited.join(", ")}].`,
+          codeLine: 12,
+          stack: [],
+          highlightedNodes: { [curr.value]: "visiting" },
+        });
+
+        const nextNode = curr.right;
+        curr = nextNode;
+
+        if (curr) {
+          records.push({
+            currentNode: curr.value,
+            visited: [...visited],
+            threads: [...activeThreads],
+            explanation: `Now move current pointer to its right child: Node ${curr.value}.`,
+            codeLine: 12,
+            stack: [],
+            highlightedNodes: { [curr.value]: "visiting" },
+          });
+        }
+      }
+    }
+  }
+
+  records.push({
+    currentNode: null,
+    visited: [...visited],
+    threads: [],
+    explanation: `curr is null! Morris Traversal finished with O(1) extra space!`,
+    codeLine: 15,
+    stack: [],
+    highlightedNodes: {},
+  });
+
+  return records;
+}
diff --git a/src/features/algorithms/tree/postOrderLogic.js b/src/features/algorithms/tree/postOrderLogic.js
new file mode 100644
index 000000000..8e65e0b26
--- /dev/null
+++ b/src/features/algorithms/tree/postOrderLogic.js
@@ -0,0 +1,103 @@
+/**
+ * Pure function to generate step-by-step frames for Tree Post-Order Traversal.
+ * Decoupled from React UI.
+ */
+export function generatePostOrderSteps(treeRoot) {
+  if (!treeRoot) return [];
+
+  const records = [];
+  const visited = [];
+  const stack = [];
+
+  const traverse = (node) => {
+    if (!node) return;
+
+    // Line 2: left subtree
+    if (node.left) {
+      stack.push(node);
+      records.push({
+        currentNode: node.left.value,
+        visited: [...visited],
+        explanation: `Recurse into left child of ${node.value} -> ${node.left.value}.`,
+        codeLine: 2,
+        stack: [...stack].map((n) => n.value),
+        highlightedNodes: { [node.value]: "active", [node.left.value]: "visiting" },
+        threads: [],
+      });
+      traverse(node.left);
+      stack.pop();
+    } else {
+      records.push({
+        currentNode: node.value,
+        visited: [...visited],
+        explanation: `Node ${node.value} has no left child.`,
+        codeLine: 2,
+        stack: [...stack].map((n) => n.value),
+        highlightedNodes: { [node.value]: "active" },
+        threads: [],
+      });
+    }
+
+    // Line 3: right subtree
+    if (node.right) {
+      stack.push(node);
+      records.push({
+        currentNode: node.right.value,
+        visited: [...visited],
+        explanation: `Recurse into right child of ${node.value} -> ${node.right.value}.`,
+        codeLine: 3,
+        stack: [...stack].map((n) => n.value),
+        highlightedNodes: { [node.value]: "active", [node.right.value]: "visiting" },
+        threads: [],
+      });
+      traverse(node.right);
+      stack.pop();
+    } else {
+      records.push({
+        currentNode: node.value,
+        visited: [...visited],
+        explanation: `Node ${node.value} has no right child.`,
+        codeLine: 3,
+        stack: [...stack].map((n) => n.value),
+        highlightedNodes: { [node.value]: "active" },
+        threads: [],
+      });
+    }
+
+    // Line 4: visit
+    visited.push(node.value);
+    records.push({
+      currentNode: node.value,
+      visited: [...visited],
+      explanation: `Both subtrees of node ${node.value} are fully processed. Now we visit the parent node itself.`,
+      codeLine: 4,
+      stack: [...stack].map((n) => n.value),
+      highlightedNodes: { [node.value]: "visiting" },
+      threads: [],
+    });
+  };
+
+  records.push({
+    currentNode: treeRoot.value,
+    visited: [],
+    explanation: `Start Post-Order traversal from the root node ${treeRoot.value}.`,
+    codeLine: 0,
+    stack: [],
+    highlightedNodes: {},
+    threads: [],
+  });
+
+  traverse(treeRoot);
+
+  records.push({
+    currentNode: null,
+    visited: [...visited],
+    explanation: `Post-Order traversal is complete! Visited nodes: [${visited.join(", ")}].`,
+    codeLine: 5,
+    stack: [],
+    highlightedNodes: {},
+    threads: [],
+  });
+
+  return records;
+}
diff --git a/src/features/algorithms/tree/preOrderLogic.js b/src/features/algorithms/tree/preOrderLogic.js
new file mode 100644
index 000000000..613cdee9a
--- /dev/null
+++ b/src/features/algorithms/tree/preOrderLogic.js
@@ -0,0 +1,103 @@
+/**
+ * Pure function to generate step-by-step frames for Pre-Order Traversal.
+ * Decoupled from React UI.
+ */
+export function generatePreOrderSteps(treeRoot) {
+  const records = [];
+  const visited = [];
+  const stack = [];
+
+  const traverse = (node) => {
+    if (!node) return;
+
+    // Line 2: visit
+    visited.push(node.value);
+    records.push({
+      currentNode: node.value,
+      visited: [...visited],
+      explanation: `Visit node ${node.value} and add it to our traversal result list.`,
+      codeLine: 2,
+      stack: [...stack].map((n) => n.value),
+      highlightedNodes: { [node.value]: "visiting" },
+      threads: [],
+    });
+
+    // Line 3: left child
+    if (node.left) {
+      stack.push(node);
+      records.push({
+        currentNode: node.left.value,
+        visited: [...visited],
+        explanation: `Move to the left child of ${node.value} -> ${node.left.value}.`,
+        codeLine: 3,
+        stack: [...stack].map((n) => n.value),
+        highlightedNodes: { [node.value]: "active", [node.left.value]: "visiting" },
+        threads: [],
+      });
+      traverse(node.left);
+      stack.pop();
+    } else {
+      records.push({
+        currentNode: node.value,
+        visited: [...visited],
+        explanation: `Node ${node.value} has no left child. So we skip left subtree recursion.`,
+        codeLine: 3,
+        stack: [...stack].map((n) => n.value),
+        highlightedNodes: { [node.value]: "active" },
+        threads: [],
+      });
+    }
+
+    // Line 4: right child
+    if (node.right) {
+      stack.push(node);
+      records.push({
+        currentNode: node.right.value,
+        visited: [...visited],
+        explanation: `Move to the right child of ${node.value} -> ${node.right.value}.`,
+        codeLine: 4,
+        stack: [...stack].map((n) => n.value),
+        highlightedNodes: { [node.value]: "active", [node.right.value]: "visiting" },
+        threads: [],
+      });
+      traverse(node.right);
+      stack.pop();
+    } else {
+      records.push({
+        currentNode: node.value,
+        visited: [...visited],
+        explanation: `Node ${node.value} has no right child. So we skip right subtree recursion.`,
+        codeLine: 4,
+        stack: [...stack].map((n) => n.value),
+        highlightedNodes: { [node.value]: "active" },
+        threads: [],
+      });
+    }
+  };
+
+  if (!treeRoot) return records;
+
+  records.push({
+    currentNode: treeRoot.value,
+    visited: [],
+    explanation: `Start Pre-Order traversal from the root node ${treeRoot.value}.`,
+    codeLine: 0,
+    stack: [],
+    highlightedNodes: {},
+    threads: [],
+  });
+
+  traverse(treeRoot);
+
+  records.push({
+    currentNode: null,
+    visited: [...visited],
+    explanation: `Pre-Order traversal is complete! Visited nodes: [${visited.join(", ")}].`,
+    codeLine: 5,
+    stack: [],
+    highlightedNodes: {},
+    threads: [],
+  });
+
+  return records;
+}
diff --git a/src/features/algorithms/tree/redBlackTreeLogic.js b/src/features/algorithms/tree/redBlackTreeLogic.js
new file mode 100644
index 000000000..6c56587c5
--- /dev/null
+++ b/src/features/algorithms/tree/redBlackTreeLogic.js
@@ -0,0 +1,181 @@
+/**
+ * Pure generator logic for Red-Black Tree operations.
+ */
+
+export const RED = "RED";
+export const BLACK = "BLACK";
+
+export class RBNode {
+  constructor(value) {
+    this.value = value;
+    this.color = RED;
+    this.left = null;
+    this.right = null;
+    this.parent = null;
+    this.id = `node-${value}-${Date.now()}`;
+  }
+}
+
+export class RBTree {
+  constructor() {
+    this.NIL = new RBNode(null);
+    this.NIL.color = BLACK;
+    this.NIL.id = "NIL";
+    this.root = this.NIL;
+  }
+
+  clone() {
+    const cloneNode = (node, parent = null) => {
+      if (node === this.NIL) return newTree.NIL;
+      const n = new RBNode(node.value);
+      n.color = node.color;
+      n.id = node.id;
+      n.parent = parent;
+      n.left = cloneNode(node.left, n);
+      n.right = cloneNode(node.right, n);
+      return n;
+    };
+    const newTree = new RBTree();
+    newTree.root = cloneNode(this.root);
+    return newTree;
+  }
+
+  *insertGenerator(value) {
+    const newNode = new RBNode(value);
+    newNode.left = this.NIL;
+    newNode.right = this.NIL;
+
+    yield { tree: this.clone(), highlighted: {}, explanation: `Insert value ${value}. Color it RED (all new nodes start as RED).` };
+
+    // BST Insert
+    let y = null;
+    let x = this.root;
+
+    while (x !== this.NIL) {
+      y = x;
+      if (newNode.value < x.value) x = x.left;
+      else x = x.right;
+    }
+
+    newNode.parent = y;
+    if (y === null) this.root = newNode;
+    else if (newNode.value < y.value) y.left = newNode;
+    else y.right = newNode;
+
+    yield { tree: this.clone(), highlighted: { [newNode.id]: "visiting" }, explanation: `BST Insert: Placed ${value} in the correct position. Now fix RB violations.` };
+
+    // Fix violations
+    yield* this._fixInsertGenerator(newNode);
+
+    this.root.color = BLACK;
+    yield { tree: this.clone(), highlighted: { [this.root.id]: "matched" }, explanation: `Root is always BLACK. Recolor root to BLACK. Insertion of ${value} complete!` };
+  }
+
+  *_fixInsertGenerator(node) {
+    let z = node;
+
+    while (z.parent && z.parent.color === RED) {
+      if (z.parent === z.parent.parent?.left) {
+        const uncle = z.parent.parent.right;
+
+        if (uncle && uncle !== this.NIL && uncle.color === RED) {
+          // Case 1: Uncle is RED - Recolor
+          z.parent.color = BLACK;
+          uncle.color = BLACK;
+          z.parent.parent.color = RED;
+          yield {
+            tree: this.clone(),
+            highlighted: { [z.id]: "visiting", [z.parent.id]: "active", [uncle.id]: "active", [z.parent.parent.id]: "active" },
+            explanation: `Case 1: Uncle is RED. Recolor parent and uncle to BLACK, grandparent to RED. Move z up to grandparent.`
+          };
+          z = z.parent.parent;
+        } else {
+          if (z === z.parent.right) {
+            // Case 2: z is a right child
+            z = z.parent;
+            yield {
+              tree: this.clone(),
+              highlighted: { [z.id]: "visiting" },
+              explanation: `Case 2: Node is a right child. Move z to its parent, then LEFT ROTATE parent to move into Case 3.`
+            };
+            this._leftRotate(z);
+            yield { tree: this.clone(), highlighted: { [z.id]: "active" }, explanation: `Left rotation applied at node ${z.value}.` };
+          }
+          // Case 3: z is a left child
+          z.parent.color = BLACK;
+          z.parent.parent.color = RED;
+          yield {
+            tree: this.clone(),
+            highlighted: { [z.id]: "visiting", [z.parent?.id]: "active" },
+            explanation: `Case 3: Recolor parent to BLACK, grandparent to RED. Then RIGHT ROTATE grandparent.`
+          };
+          this._rightRotate(z.parent?.parent);
+          yield { tree: this.clone(), highlighted: { [z.id]: "matched" }, explanation: `Right rotation applied. RB violation resolved!` };
+        }
+      } else {
+        // Mirror cases
+        const uncle = z.parent.parent?.left;
+
+        if (uncle && uncle !== this.NIL && uncle.color === RED) {
+          z.parent.color = BLACK;
+          uncle.color = BLACK;
+          z.parent.parent.color = RED;
+          yield {
+            tree: this.clone(),
+            highlighted: { [z.id]: "visiting", [z.parent.id]: "active", [uncle.id]: "active", [z.parent.parent.id]: "active" },
+            explanation: `Case 1 (mirror): Uncle is RED. Recolor parent and uncle to BLACK, grandparent to RED.`
+          };
+          z = z.parent.parent;
+        } else {
+          if (z === z.parent.left) {
+            z = z.parent;
+            yield {
+              tree: this.clone(),
+              highlighted: { [z.id]: "visiting" },
+              explanation: `Case 2 (mirror): Node is a left child. RIGHT ROTATE parent.`
+            };
+            this._rightRotate(z);
+          }
+          z.parent.color = BLACK;
+          z.parent.parent.color = RED;
+          yield {
+            tree: this.clone(),
+            highlighted: { [z.id]: "visiting", [z.parent?.id]: "active" },
+            explanation: `Case 3 (mirror): Recolor, then LEFT ROTATE grandparent.`
+          };
+          this._leftRotate(z.parent?.parent);
+          yield { tree: this.clone(), highlighted: { [z.id]: "matched" }, explanation: `Left rotation applied. RB violation resolved!` };
+        }
+      }
+      if (!z.parent) break;
+    }
+
+    this.root.color = BLACK;
+  }
+
+  _leftRotate(x) {
+    if (!x || !x.right || x.right === this.NIL) return;
+    const y = x.right;
+    x.right = y.left;
+    if (y.left !== this.NIL) y.left.parent = x;
+    y.parent = x.parent;
+    if (!x.parent) this.root = y;
+    else if (x === x.parent.left) x.parent.left = y;
+    else x.parent.right = y;
+    y.left = x;
+    x.parent = y;
+  }
+
+  _rightRotate(x) {
+    if (!x || !x.left || x.left === this.NIL) return;
+    const y = x.left;
+    x.left = y.right;
+    if (y.right !== this.NIL) y.right.parent = x;
+    y.parent = x.parent;
+    if (!x.parent) this.root = y;
+    else if (x === x.parent.right) x.parent.right = y;
+    else x.parent.left = y;
+    y.right = x;
+    x.parent = y;
+  }
+}
diff --git a/src/features/algorithms/tree/segmentTreeLogic.js b/src/features/algorithms/tree/segmentTreeLogic.js
new file mode 100644
index 000000000..dce027635
--- /dev/null
+++ b/src/features/algorithms/tree/segmentTreeLogic.js
@@ -0,0 +1,139 @@
+/**
+ * Pure generator logic for Segment Tree operations.
+ */
+
+// Build segment tree (sum) over arr (0-indexed)
+// Returns tree array (1-indexed), tree[1] = root
+export function buildSegTree(arr) {
+  const n = arr.length;
+  const tree = new Array(4 * n).fill(0);
+  function build(node, start, end) {
+    if (start === end) {
+      tree[node] = arr[start];
+    } else {
+      const mid = Math.floor((start + end) / 2);
+      build(2 * node, start, mid);
+      build(2 * node + 1, mid + 1, end);
+      tree[node] = tree[2 * node] + tree[2 * node + 1];
+    }
+  }
+  build(1, 0, n - 1);
+  return tree;
+}
+
+// Collect tree nodes with positions for rendering
+export function collectNodes(tree, n) {
+  const nodes = [];
+  function dfs(node, start, end, depth, xMin, xMax) {
+    if (start > end || node >= tree.length) return;
+    const x = (xMin + xMax) / 2;
+    const y = 50 + depth * 90;
+    nodes.push({ node, start, end, x, y, value: tree[node] });
+    if (start < end) {
+      const mid = Math.floor((start + end) / 2);
+      dfs(2 * node, start, mid, depth + 1, xMin, (xMin + xMax) / 2);
+      dfs(2 * node + 1, mid + 1, end, depth + 1, (xMin + xMax) / 2, xMax);
+    }
+  }
+  dfs(1, 0, n - 1, 0, 60, 740);
+  return nodes;
+}
+
+export function* queryGenerator(l, r, tree, n) {
+  if (isNaN(l) || isNaN(r) || l < 0 || r >= n || l > r) {
+    yield { type: 'error', message: `⚠️ Enter a valid range (0 ≤ L ≤ R ≤ ${n - 1}).` };
+    return;
+  }
+
+  let totalSum = 0;
+
+  function* queryDFS(node, start, end, qL, qR) {
+    if (qR < start || end < qL) {
+      yield {
+        type: 'step',
+        highlightedNodes: { [node]: "error" },
+        highlightedArray: Object.fromEntries(Array.from({ length: r - l + 1 }, (_, i) => [l + i, "active"])),
+        explanation: `Node [${start}..${end}] is completely outside query [${qL}..${qR}]. Return 0. (Out-of-range node)`,
+        result: undefined
+      };
+      return 0;
+    }
+    if (qL <= start && end <= qR) {
+      totalSum += tree[node];
+      yield {
+        type: 'step',
+        highlightedNodes: { [node]: "matched" },
+        highlightedArray: Object.fromEntries(Array.from({ length: r - l + 1 }, (_, i) => [l + i, "active"])),
+        explanation: `Node [${start}..${end}] is completely inside query [${qL}..${qR}]. Include BIT[${node}] = ${tree[node]}.`,
+        result: undefined
+      };
+      return tree[node];
+    }
+    
+    yield {
+      type: 'step',
+      highlightedNodes: { [node]: "visiting" },
+      highlightedArray: Object.fromEntries(Array.from({ length: r - l + 1 }, (_, i) => [l + i, "active"])),
+      explanation: `Node [${start}..${end}] partially overlaps [${qL}..${qR}]. Recurse into both children.`,
+      result: undefined
+    };
+    
+    const mid = Math.floor((start + end) / 2);
+    const leftVal = yield* queryDFS(2 * node, start, mid, qL, qR);
+    const rightVal = yield* queryDFS(2 * node + 1, mid + 1, end, qL, qR);
+    return leftVal + rightVal;
+  }
+
+  const result = yield* queryDFS(1, 0, n - 1, l, r);
+
+  yield {
+    type: 'complete',
+    highlightedNodes: {},
+    highlightedArray: Object.fromEntries(Array.from({ length: r - l + 1 }, (_, i) => [l + i, "matched"])),
+    explanation: `✅ Range Sum Query [${l}, ${r}] complete. Result = ${result}.`,
+    result: `Sum[${l}..${r}] = ${result}`
+  };
+}
+
+export function* updateGenerator(idx, newVal, arr, n) {
+  if (isNaN(idx) || isNaN(newVal) || idx < 0 || idx >= n) {
+    yield { type: 'error', message: `⚠️ Enter a valid index (0-${n - 1}) and new value.` };
+    return;
+  }
+
+  const newArr = [...arr];
+  const oldVal = newArr[idx];
+  newArr[idx] = newVal;
+  const newTree = buildSegTree(newArr);
+
+  const delta = newVal - oldVal;
+
+  function* updateDFS(node, start, end, target, delta) {
+    yield {
+      type: 'step',
+      highlightedNodes: { [node]: start === end ? "matched" : "visiting" },
+      highlightedArray: { [target]: start === end ? "matched" : "active" },
+      explanation: start === end
+        ? `Leaf node [${start}]: Update value from ${oldVal} to ${newVal}. Delta = ${delta > 0 ? "+" : ""}${delta}.`
+        : `Internal node [${start}..${end}]: Recurse ${target <= Math.floor((start + end) / 2) ? "left" : "right"} toward index ${target}.`,
+      result: undefined
+    };
+
+    if (start === end) return;
+    const mid = Math.floor((start + end) / 2);
+    if (target <= mid) yield* updateDFS(2 * node, start, mid, target, delta);
+    else yield* updateDFS(2 * node + 1, mid + 1, end, target, delta);
+  }
+
+  yield* updateDFS(1, 0, n - 1, idx, delta);
+
+  yield {
+    type: 'complete',
+    highlightedNodes: {},
+    highlightedArray: { [idx]: "matched" },
+    explanation: `✅ Point Update complete. arr[${idx}] = ${oldVal} → ${newVal}. All ancestor nodes updated with delta=${delta}.`,
+    result: `Updated arr[${idx}]: ${oldVal} → ${newVal}`,
+    newArr,
+    newTree
+  };
+}
diff --git a/src/features/algorithms/tree/serializationLogic.js b/src/features/algorithms/tree/serializationLogic.js
new file mode 100644
index 000000000..6783c3b54
--- /dev/null
+++ b/src/features/algorithms/tree/serializationLogic.js
@@ -0,0 +1,74 @@
+/**
+ * Pure generator logic for Tree Serialization and Deserialization
+ * Decoupled from React UI.
+ * @param {Array} sequence - The flat representation sequence of the tree
+ * @returns {Object} object containing serializeSteps and deserializeSteps
+ */
+
+export function generateSerializationSteps(sequence) {
+  const newSteps = [];
+  
+  for (let step = 0; step < sequence.length; step++) {
+    let msg = "";
+    if (sequence[step].type === "node") {
+      msg = `Visiting Node ${sequence[step].val}. Appending to string.`;
+    } else {
+      msg = `Visiting Null child of Node ${sequence[step].parent}. Appending 'N'.`;
+    }
+    
+    newSteps.push({
+      activeStep: step,
+      message: msg,
+      serializedArray: sequence.slice(0, step + 1).map(s => s.val || "N"),
+      builtNodes: [],
+      builtEdges: []
+    });
+  }
+  
+  newSteps.push({
+    activeStep: -1,
+    message: "Serialization Complete! Click 'Deserialize' to reconstruct the tree from the string.",
+    serializedArray: sequence.map(s => s.val || "N"),
+    builtNodes: [],
+    builtEdges: []
+  });
+
+  return newSteps;
+}
+
+export function generateDeserializationSteps(sequence) {
+  const newSteps = [];
+  let bNodes = [];
+  let bEdges = [];
+
+  for (let step = 0; step < sequence.length; step++) {
+    let msg = "";
+    if (sequence[step].type === "node") {
+      msg = `Reading '${sequence[step].val}'. Creating Node ${sequence[step].val}.`;
+      bNodes = [...bNodes, sequence[step].id];
+      if (sequence[step].parent) {
+        bEdges = [...bEdges, `${sequence[step].parent}-${sequence[step].id}`];
+      }
+    } else {
+      msg = `Reading 'N'. Returning null to parent ${sequence[step].parent}.`;
+    }
+
+    newSteps.push({
+      activeStep: step,
+      message: msg,
+      serializedArray: sequence.map(s => s.val || "N"), 
+      builtNodes: [...bNodes],
+      builtEdges: [...bEdges]
+    });
+  }
+
+  newSteps.push({
+    activeStep: -1,
+    message: "Deserialization Complete! The tree has been reconstructed.",
+    serializedArray: sequence.map(s => s.val || "N"),
+    builtNodes: [...bNodes],
+    builtEdges: [...bEdges]
+  });
+
+  return newSteps;
+}
diff --git a/src/features/algorithms/tree/trieLogic.js b/src/features/algorithms/tree/trieLogic.js
new file mode 100644
index 000000000..7a5a077e7
--- /dev/null
+++ b/src/features/algorithms/tree/trieLogic.js
@@ -0,0 +1,230 @@
+export class TrieNode {
+  constructor(char = "", id = "root") {
+    this.id = id;
+    this.char = char;
+    this.children = {}; // char -> TrieNode
+    this.isEndOfWord = false;
+    this.x = 400;
+    this.y = 60;
+  }
+}
+
+export function cloneTrie(node) {
+  if (!node) return null;
+  const newNode = new TrieNode(node.char, node.id);
+  newNode.isEndOfWord = node.isEndOfWord;
+  newNode.x = node.x;
+  newNode.y = node.y;
+  for (const char in node.children) {
+    newNode.children[char] = cloneTrie(node.children[char]);
+  }
+  return newNode;
+}
+
+export function* insertGenerator(root, word, startNodeIdCounter) {
+  const newSteps = [];
+  let tempRoot = cloneTrie(root);
+
+  yield {
+    tree: cloneTrie(tempRoot),
+    highlightedNodes: { root: "visiting" },
+    highlightedEdges: {},
+    explanation: `Begin insertion of word "${word}". Start at the Root node.`
+  };
+
+  let node = tempRoot;
+  let counter = startNodeIdCounter;
+
+  for (let i = 0; i < word.length; i++) {
+    const char = word[i];
+    const isLast = i === word.length - 1;
+
+    const activeHighlights = {};
+    const activeEdges = {};
+
+    let traceNode = tempRoot;
+    activeHighlights[traceNode.id] = "active";
+    for (let j = 0; j < i; j++) {
+      const nextNode = traceNode.children[word[j]];
+      activeHighlights[nextNode.id] = "active";
+      activeEdges[`${traceNode.id}->${nextNode.id}`] = true;
+      traceNode = nextNode;
+    }
+
+    if (node.children[char]) {
+      const childNode = node.children[char];
+      activeHighlights[childNode.id] = "visiting";
+      activeEdges[`${node.id}->${childNode.id}`] = true;
+
+      yield {
+        tree: cloneTrie(tempRoot),
+        highlightedNodes: { ...activeHighlights },
+        highlightedEdges: { ...activeEdges },
+        explanation: `Character '${char}' already exists under node '${node.char || "root"}'. Follow edge to character node '${char}'.`
+      };
+
+      node = childNode;
+    } else {
+      counter++;
+      const newChild = new TrieNode(char, `node-${counter}`);
+      node.children[char] = newChild;
+
+      activeHighlights[newChild.id] = "visiting";
+      activeEdges[`${node.id}->${newChild.id}`] = true;
+
+      yield {
+        tree: cloneTrie(tempRoot),
+        highlightedNodes: { ...activeHighlights },
+        highlightedEdges: { ...activeEdges },
+        explanation: `Character '${char}' is missing under node '${node.char || "root"}'. Create a new node for '${char}' and link it.`
+      };
+
+      node = newChild;
+    }
+
+    if (isLast) {
+      node.isEndOfWord = true;
+      const finalHighlights = { ...activeHighlights };
+      finalHighlights[node.id] = "matched";
+
+      yield {
+        tree: cloneTrie(tempRoot),
+        highlightedNodes: finalHighlights,
+        highlightedEdges: { ...activeEdges },
+        explanation: `Word "${word}" insertion complete. Mark final character node '${char}' as End of Word (isEndOfWord = true).`,
+        newNodeIdCounter: counter
+      };
+    }
+  }
+}
+
+export function* searchGenerator(root, word) {
+  yield {
+    highlightedNodes: { root: "visiting" },
+    highlightedEdges: {},
+    explanation: `Search for word "${word}". Start matching characters at the Root node.`
+  };
+
+  let node = root;
+  let found = true;
+
+  for (let i = 0; i < word.length; i++) {
+    const char = word[i];
+    const isLast = i === word.length - 1;
+
+    const activeHighlights = {};
+    const activeEdges = {};
+
+    let traceNode = root;
+    activeHighlights[traceNode.id] = "active";
+    for (let j = 0; j < i; j++) {
+      const nextNode = traceNode.children[word[j]];
+      activeHighlights[nextNode.id] = "active";
+      activeEdges[`${traceNode.id}->${nextNode.id}`] = true;
+      traceNode = nextNode;
+    }
+
+    if (node.children[char]) {
+      const childNode = node.children[char];
+      activeHighlights[childNode.id] = "visiting";
+      activeEdges[`${node.id}->${childNode.id}`] = true;
+
+      yield {
+        highlightedNodes: { ...activeHighlights },
+        highlightedEdges: { ...activeEdges },
+        explanation: `Found letter '${char}' under node '${node.char || "root"}'. Matching prefix: "${word.slice(0, i + 1)}".`
+      };
+
+      node = childNode;
+    } else {
+      found = false;
+      activeHighlights[node.id] = "error";
+      yield {
+        highlightedNodes: { ...activeHighlights },
+        highlightedEdges: { ...activeEdges },
+        explanation: `Letter '${char}' is missing under node '${node.char || "root"}'. Searching failed: "${word}" is not in the Trie.`
+      };
+      break;
+    }
+
+    if (isLast && found) {
+      const finalHighlights = { ...activeHighlights };
+      if (node.isEndOfWord) {
+        finalHighlights[node.id] = "matched";
+        yield {
+          highlightedNodes: finalHighlights,
+          highlightedEdges: { ...activeEdges },
+          explanation: `Found letter '${char}' and isEndOfWord = true. Success: Word "${word}" exists in the Trie!`
+        };
+      } else {
+        finalHighlights[node.id] = "error";
+        yield {
+          highlightedNodes: finalHighlights,
+          highlightedEdges: { ...activeEdges },
+          explanation: `Traversed all letters, but isEndOfWord = false. Word "${word}" is NOT in the Trie (Prefix match only).`
+        };
+      }
+    }
+  }
+}
+
+export function* prefixSearchGenerator(root, prefix) {
+  yield {
+    highlightedNodes: { root: "visiting" },
+    highlightedEdges: {},
+    explanation: `Check startsWith prefix "${prefix}". Start at the Root node.`
+  };
+
+  let node = root;
+  let found = true;
+
+  for (let i = 0; i < prefix.length; i++) {
+    const char = prefix[i];
+    const isLast = i === prefix.length - 1;
+
+    const activeHighlights = {};
+    const activeEdges = {};
+
+    let traceNode = root;
+    activeHighlights[traceNode.id] = "active";
+    for (let j = 0; j < i; j++) {
+      const nextNode = traceNode.children[prefix[j]];
+      activeHighlights[nextNode.id] = "active";
+      activeEdges[`${traceNode.id}->${nextNode.id}`] = true;
+      traceNode = nextNode;
+    }
+
+    if (node.children[char]) {
+      const childNode = node.children[char];
+      activeHighlights[childNode.id] = "visiting";
+      activeEdges[`${node.id}->${childNode.id}`] = true;
+
+      yield {
+        highlightedNodes: { ...activeHighlights },
+        highlightedEdges: { ...activeEdges },
+        explanation: `Letter '${char}' matches. Prefix path exists for: "${prefix.slice(0, i + 1)}".`
+      };
+
+      node = childNode;
+    } else {
+      found = false;
+      activeHighlights[node.id] = "error";
+      yield {
+        highlightedNodes: { ...activeHighlights },
+        highlightedEdges: { ...activeEdges },
+        explanation: `Letter '${char}' missing under node '${node.char || "root"}'. Prefix check failed: "${prefix}" does not exist in the Trie.`
+      };
+      break;
+    }
+
+    if (isLast && found) {
+      const finalHighlights = { ...activeHighlights };
+      finalHighlights[node.id] = "matched";
+      yield {
+        highlightedNodes: finalHighlights,
+        highlightedEdges: { ...activeEdges },
+        explanation: `All letters in prefix "${prefix}" successfully traversed. Success: Prefix exists in the Trie!`
+      };
+    }
+  }
+}
diff --git a/src/features/notifications/NotificationContext.jsx b/src/features/notifications/NotificationContext.jsx
new file mode 100644
index 000000000..d2c8c051e
--- /dev/null
+++ b/src/features/notifications/NotificationContext.jsx
@@ -0,0 +1,211 @@
+"use client";
+import React, { createContext, useContext, useState, useEffect, useCallback } from "react";
+import { useUser } from "@/features/user/UserContext";
+import { useSheetProgress } from "@/app/hooks/useSheetProgress";
+import { api } from "@/lib/apiClient";
+const STREAK_MILESTONES = [3, 7, 14, 30, 60, 100];
+const SOLVED_MILESTONES = [10, 25, 50, 100, 200];
+
+const FIRED_MILESTONES_KEY = "algobuddy_fired_milestones";
+
+function readFiredMilestones() {
+  try {
+    const raw = localStorage.getItem(FIRED_MILESTONES_KEY);
+    return raw ? new Set(JSON.parse(raw)) : new Set();
+  } catch {
+    return new Set();
+  }
+}
+
+function markMilestoneFired(id) {
+  try {
+    const fired = readFiredMilestones();
+    fired.add(id);
+    localStorage.setItem(FIRED_MILESTONES_KEY, JSON.stringify([...fired]));
+  } catch {}
+}
+
+const NotificationContext = createContext();
+
+export const useNotifications = () => {
+  const context = useContext(NotificationContext);
+  if (context === undefined) {
+    throw new Error("useNotifications must be used within a NotificationProvider");
+  }
+  return context;
+};
+
+export const NotificationProvider = ({ children }) => {
+  const { user } = useUser();
+  const { streakData, progress } = useSheetProgress();
+  const [notifications, setNotifications] = useState([]);
+  const [mounted, setMounted] = useState(false);
+
+  const addNotification = useCallback((notification) => {
+    setNotifications(prev => {
+      const exists = prev.some(n => n.id === notification.id);
+      if (exists) return prev;
+      return [notification, ...prev];
+    });
+  }, []);
+
+  useEffect(() => {
+    setMounted(true);
+    try {
+      const saved = localStorage.getItem("algobuddy_notifications");
+      if (saved) {
+        // New accounts (no saved key yet) correctly start with an empty
+        // list instead of being seeded with fake achievement/streak data.
+        setNotifications(JSON.parse(saved));
+      }
+    } catch (e) {
+      console.error("Error loading notifications:", e);
+    }
+  }, []);
+
+  // Fire real streak-milestone notifications based on actual streakData,
+  // not hardcoded content. Each milestone notifies exactly once per
+  // account, even across deletes/reloads.
+  useEffect(() => {
+    if (!mounted) return;
+    const fired = readFiredMilestones();
+
+    STREAK_MILESTONES.forEach((milestone) => {
+      const id = `streak-${milestone}`;
+      if (streakData.current >= milestone && !fired.has(id)) {
+        addNotification({
+          id,
+          category: "Streak",
+          title: `🔥 ${milestone} Day Streak Achieved`,
+          message: `You've practiced for ${milestone} days in a row. Keep it up!`,
+          timestamp: new Date().toISOString(),
+          read: false,
+          priority: "high",
+          actionUrl: "/arena",
+        });
+        markMilestoneFired(id);
+      }
+    });
+  }, [mounted, streakData.current, addNotification]);
+
+  useEffect(() => {
+    if (!mounted) return;
+    const solvedCount = Object.values(progress).filter(
+      (entry) => (typeof entry === "string" ? entry : entry?.status) === "Completed"
+    ).length;
+    const fired = readFiredMilestones();
+
+    SOLVED_MILESTONES.forEach((milestone) => {
+      const id = `solved-${milestone}`;
+      if (solvedCount >= milestone && !fired.has(id)) {
+        addNotification({
+          id,
+          category: "Achievement",
+          title: "🏆 Achievement Unlocked",
+          message: `You have completed ${milestone} algorithms! Keep up the momentum.`,
+          timestamp: new Date().toISOString(),
+          read: false,
+          priority: "high",
+          actionUrl: "/profile",
+        });
+        markMilestoneFired(id);
+      }
+    });
+  }, [mounted, progress, addNotification]);
+
+  useEffect(() => {
+    if (!mounted || !user) return;
+
+    const jobIds = new Set();
+
+    async function fetchJobNotifications() {
+      try {
+        const res = await fetch("/api/notifications?limit=20");
+        if (!res.ok) return;
+        const data = await res.json();
+        (data.notifications || []).forEach((n) => {
+          const notifId = `job-${n.id}`;
+          jobIds.add(n.id);
+          addNotification({
+            id: notifId,
+            category: n.type === "application_status_update" ? "Job Application" : "Job Alert",
+            title: n.type === "application_status_update" ? "Application Status Update" : "New Job Posted",
+            message: n.message,
+            timestamp: n.created_at,
+            read: n.read,
+            priority: "medium",
+            actionUrl: n.type === "application_status_update" ? "/my-applications" : "/student-jobs",
+          });
+        });
+      } catch (e) {
+        console.error("Error fetching job notifications:", e);
+      }
+    }
+
+    fetchJobNotifications();
+  }, [mounted, user, addNotification]);
+
+  useEffect(() => {
+    if (mounted) {
+      try {
+        localStorage.setItem("algobuddy_notifications", JSON.stringify(notifications));
+      } catch (e) {
+        console.error("Error saving notifications:", e);
+      }
+    }
+  }, [notifications, mounted]);
+
+  const unreadCount = notifications.filter(n => !n.read).length;
+
+  const markAsRead = (id) => {
+    setNotifications(prev =>
+      prev.map(n => (n.id === id ? { ...n, read: true } : n))
+    );
+
+    if (id.startsWith("job-")) {
+      const realId = id.replace("job-", "");
+      api.request("/api/notifications", {
+        method: "PATCH",
+        body: { notificationIds: [realId] },
+      }).catch(() => {});
+    }
+  };
+
+  const markAllAsRead = () => {
+    setNotifications(prev => prev.map(n => ({ ...n, read: true })));
+    const jobNotifIds = notifications
+      .filter(n => n.id.startsWith("job-") && !n.read)
+      .map(n => n.id.replace("job-", ""));
+    if (jobNotifIds.length > 0) {
+      api.request("/api/notifications", {
+        method: "PATCH",
+        body: { notificationIds: jobNotifIds },
+      }).catch(() => {});
+    }
+  };
+
+  const deleteNotification = (id) => {
+    setNotifications(prev => prev.filter(n => n.id !== id));
+  };
+
+  const clearAll = () => {
+    setNotifications([]);
+    localStorage.removeItem("algobuddy_notifications");
+  };
+
+  return (
+    <NotificationContext.Provider
+      value={{
+        notifications,
+        unreadCount,
+        markAsRead,
+        markAllAsRead,
+        deleteNotification,
+        clearAll,
+        addNotification,
+      }}
+    >
+      {children}
+    </NotificationContext.Provider>
+  );
+};
diff --git a/src/features/user/UserContext.jsx b/src/features/user/UserContext.jsx
new file mode 100644
index 000000000..912552dbe
--- /dev/null
+++ b/src/features/user/UserContext.jsx
@@ -0,0 +1,58 @@
+"use client";
+import { createContext, useContext, useEffect, useState } from "react";
+import { supabase } from "@/lib/supabase";
+import { trackActivity } from "@/lib/activity";
+
+const UserContext = createContext();
+
+export const UserProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const getSessionAndUser = async () => {
+      const {
+        data: { user: currentUser },
+      } = await supabase.auth.getUser();
+      setUser(currentUser ?? null);
+      setLoading(false);
+    };
+
+    getSessionAndUser();
+
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      setUser(session?.user ?? null);
+      setLoading(false);
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  // Track daily activity when user is authenticated (debounced)
+  useEffect(() => {
+    if (!user) return;
+    const timer = setTimeout(() => {
+      trackActivity();
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, [user]);
+
+  return (
+    <UserContext.Provider value={{ user, setUser, loading }}>
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+export const useUser = () => {
+  const context = useContext(UserContext);
+
+  if (!context) {
+    console.warn("useUser used outside UserProvider");
+    return { user: null, setUser: () => {}, loading: false };
+  }
+
+  return context;
+};
diff --git a/src/instrumentation.js b/src/instrumentation.js
new file mode 100644
index 000000000..18ba604b6
--- /dev/null
+++ b/src/instrumentation.js
@@ -0,0 +1,36 @@
+export function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+    const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+    const supabaseServiceKey = process.env.SUPABASE_SERVICE_KEY || process.env.SUPABASE_SERVICE_ROLE_KEY;
+
+    function isValidSupabaseUrl(value) {
+      if (!value) return false;
+      const trimmed = String(value).trim();
+      if (trimmed.startsWith("Your ")) return false;
+      try {
+        const parsed = new URL(trimmed);
+        return parsed.protocol === "http:" || parsed.protocol === "https:";
+      } catch {
+        return false;
+      }
+    }
+
+    function isValidKey(value) {
+      if (!value) return false;
+      const trimmed = String(value).trim();
+      return trimmed && !trimmed.startsWith("Your ");
+    }
+
+    const missing = [];
+    if (!isValidSupabaseUrl(supabaseUrl)) missing.push("NEXT_PUBLIC_SUPABASE_URL");
+    if (!isValidKey(supabaseAnonKey)) missing.push("NEXT_PUBLIC_SUPABASE_ANON_KEY");
+    if (!isValidKey(supabaseServiceKey)) missing.push("SUPABASE_SERVICE_ROLE_KEY");
+
+    if (missing.length > 0) {
+      const errorMsg = `[Startup Error] Missing or invalid required authentication environment variables: ${missing.join(", ")}`;
+      console.error(`\n==================================================\n${errorMsg}\n==================================================\n`);
+      // throw new Error(errorMsg); // Commented out to allow local UI development without Supabase
+    }
+  }
+}
diff --git a/src/lib/activity.js b/src/lib/activity.js
new file mode 100644
index 000000000..75f8e65e8
--- /dev/null
+++ b/src/lib/activity.js
@@ -0,0 +1,98 @@
+import { supabase } from "@/lib/supabase";
+import { api } from "./apiClient";
+import { createLogger } from "./logger.js";
+
+const log = createLogger("activity");
+
+const trackActivity = async (type = "site_visit") => {
+  try {
+    await api.request("/api/activity", {
+      method: "POST",
+      body: { type, localDate: getLocalISODate() },
+    });
+    return { success: true };
+  } catch (e) {
+    log.error({ err: e }, "trackActivity failed.");
+    return { success: false, error: e };
+  }
+};
+
+const getLocalISODate = (date = new Date()) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+const computeStreak = (activities) => {
+  if (!activities || activities.length === 0) return 0;
+
+  const dates = activities
+    .filter(Boolean)
+    .map((a) => {
+      if (a.activity_date && /^\d{4}-\d{2}-\d{2}$/.test(a.activity_date)) {
+        return a.activity_date;
+      }
+      const d = new Date(a.activity_date || a.created_at);
+      return getLocalISODate(d);
+    })
+    .filter(Boolean)
+    .sort((a, b) => new Date(b) - new Date(a));
+
+  if (dates.length === 0) return 0;
+
+  const uniqueDates = [...new Set(dates)];
+  let streak = 1;
+  const today = getLocalISODate();
+  const yesterday = new Date();
+  yesterday.setDate(yesterday.getDate() - 1);
+  const yesterdayStr = getLocalISODate(yesterday);
+
+  // Only count streak if most recent activity is today or yesterday
+  if (uniqueDates[0] !== today && uniqueDates[0] !== yesterdayStr) return 0;
+
+  for (let i = 1; i < uniqueDates.length; i++) {
+    const curr = new Date(uniqueDates[i - 1]);
+    const prev = new Date(uniqueDates[i]);
+    const diffDays = Math.round((curr - prev) / (1000 * 60 * 60 * 24));
+    if (diffDays === 1) {
+      streak++;
+    } else {
+      break;
+    }
+  }
+
+  return streak;
+};
+
+const getStreakData = async (userId, days = 30) => {
+  if (!userId) return { streak: 0, activities: [] };
+
+  const since = new Date();
+  since.setDate(since.getDate() - days);
+  const sinceStr = since.toISOString();
+
+  try {
+    const { data, error } = await supabase
+      .from("user_activity")
+      .select("activity_date, created_at")
+      .eq("user_id", userId)
+      .gte("created_at", sinceStr)
+      .order("created_at", { ascending: false });
+
+    if (error) {
+      log.error({ err: error }, "getStreakData error.");
+      return { streak: 0, activities: [] };
+    }
+
+    return {
+      streak: computeStreak(data || []),
+      activities: data || [],
+    };
+  } catch (e) {
+    log.error({ err: e }, "getStreakData exception.");
+    return { streak: 0, activities: [] };
+  }
+};
+
+export { trackActivity, getStreakData, computeStreak, getLocalISODate };
diff --git a/src/lib/apiClient.js b/src/lib/apiClient.js
new file mode 100644
index 000000000..38efe61d8
--- /dev/null
+++ b/src/lib/apiClient.js
@@ -0,0 +1,168 @@
+import { supabase } from "@/lib/supabase";
+import { ApiError, AuthError } from "@/lib/apiErrors";
+import { CSRF_HEADER_NAME, CSRF_COOKIE_NAME } from "@/lib/csrfConstants";
+
+const STATE_CHANGING_METHODS = new Set(["POST", "PUT", "PATCH", "DELETE"]);
+const MAX_AUTH_RETRIES = 2;
+
+class ApiClient {
+  constructor() {
+    this.csrfToken = null;
+    this.csrfTokenPromise = null;
+  }
+
+  readCsrfTokenFromCookie() {
+    if (typeof document === "undefined") return null;
+
+    const match = document.cookie.match(
+      new RegExp(`(?:^|;\\s*)${CSRF_COOKIE_NAME}=([^;]*)`),
+    );
+
+    return match ? decodeURIComponent(match[1].trim()) : null;
+  }
+
+  async getCsrfToken() {
+    const fromCookie = this.readCsrfTokenFromCookie();
+    if (fromCookie) {
+      this.csrfToken = fromCookie;
+      return fromCookie;
+    }
+
+    if (this.csrfToken) return this.csrfToken;
+
+    if (typeof document !== 'undefined') {
+      const metaTag = document.querySelector('meta[name="csrf-token"]');
+      if (metaTag) {
+        this.csrfToken = metaTag.getAttribute('content');
+        return this.csrfToken;
+      }
+    }
+
+    if (!this.csrfTokenPromise) {
+      this.csrfTokenPromise = fetch("/api/csrf-token", { method: "GET" })
+        .then(async (res) => {
+          if (!res.ok) return null;
+          const data = await res.json();
+          const token = data.csrfToken || this.readCsrfTokenFromCookie();
+          this.csrfToken = token;
+          return token;
+        })
+        .catch(() => null)
+        .finally(() => {
+          this.csrfTokenPromise = null;
+        });
+    }
+
+    return this.csrfTokenPromise;
+  }
+
+  async request(path, options = {}, authRetries = 0) {
+    const { method = "GET", body, headers = {} } = options;
+
+    const extraHeaders = { ...headers };
+    delete extraHeaders[CSRF_HEADER_NAME];
+    delete extraHeaders["X-CSRF-Token"];
+
+    if (STATE_CHANGING_METHODS.has(method)) {
+      let token = this.readCsrfTokenFromCookie();
+
+      if (!token) {
+        token = await this.getCsrfToken();
+      } else {
+        this.csrfToken = token;
+      }
+
+      if (token) {
+        extraHeaders[CSRF_HEADER_NAME] = token;
+      }
+    }
+
+    const {
+      data: { session },
+    } = await supabase.auth.getSession();
+
+    const accessToken = session?.access_token;
+
+    const res = await fetch(path, {
+      method,
+      headers: {
+        "Content-Type": "application/json",
+        ...(accessToken
+          ? {
+              Authorization: `Bearer ${accessToken}`,
+            }
+          : {}),
+        ...extraHeaders,
+      },
+      body: body ? JSON.stringify(body) : undefined,
+    });
+
+    if (
+      res.status === 401 &&
+      path !== "/api/auth" &&
+      authRetries < MAX_AUTH_RETRIES
+    ) {
+      try {
+        const {
+          data: { session: newSession },
+        } = await supabase.auth.refreshSession();
+
+        if (newSession) {
+          return this.request(path, options, authRetries + 1);
+        }
+      } catch {
+        // refresh failed
+      }
+
+      try {
+        await supabase.auth.signOut({ scope: 'local' });
+      } catch {
+        // signOut failed — best-effort cleanup
+      }
+
+      if (typeof window !== "undefined") {
+        window.location.href = "/login";
+      }
+
+      throw new AuthError("Session expired");
+    }
+
+    const data = await res.json();
+
+    if (!res.ok) {
+      if (
+        res.status === 403 &&
+        data.error &&
+        data.error.includes("CSRF")
+      ) {
+        this.csrfToken = null;
+        this.csrfTokenPromise = null;
+
+        if (typeof document !== "undefined") {
+          document.cookie = `${CSRF_COOKIE_NAME}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+        }
+
+        if (!options._csrfRetried) {
+          return this.request(
+            path,
+            {
+              ...options,
+              _csrfRetried: true,
+            },
+            authRetries,
+          );
+        }
+      }
+
+      throw new ApiError(
+        data.error || data.message || "Request failed",
+        data.code || "REQUEST_ERROR",
+        res.status,
+      );
+    }
+
+    return data;
+  }
+}
+
+export const api = new ApiClient();
\ No newline at end of file
diff --git a/src/lib/apiErrors.js b/src/lib/apiErrors.js
new file mode 100644
index 000000000..501ebfe80
--- /dev/null
+++ b/src/lib/apiErrors.js
@@ -0,0 +1,36 @@
+export class ApiError extends Error {
+  constructor(message, code = 'INTERNAL_ERROR', status = 500) {
+    super(message);
+    this.name = 'ApiError';
+    this.code = code;
+    this.status = status;
+  }
+}
+
+export class AuthError extends ApiError {
+  constructor(message = 'Unauthorized') {
+    super(message, 'AUTH_ERROR', 401);
+    this.name = 'AuthError';
+  }
+}
+
+export class RateLimitError extends ApiError {
+  constructor(message = 'Too many requests') {
+    super(message, 'RATE_LIMIT', 429);
+    this.name = 'RateLimitError';
+  }
+}
+
+export class ValidationError extends ApiError {
+  constructor(message = 'Validation failed') {
+    super(message, 'VALIDATION_ERROR', 400);
+    this.name = 'ValidationError';
+  }
+}
+
+export class ConfigError extends ApiError {
+  constructor(message = 'Server configuration error') {
+    super(message, 'CONFIG_ERROR', 500);
+    this.name = 'ConfigError';
+  }
+}
diff --git a/src/lib/auth.js b/src/lib/auth.js
new file mode 100644
index 000000000..29f8babc4
--- /dev/null
+++ b/src/lib/auth.js
@@ -0,0 +1,148 @@
+import { createServerClient } from "@supabase/ssr";
+import { getSupabaseConfig as _getSupabaseConfig } from "./shared-utils.js";
+import { createLogger } from "./logger.js";
+
+const log = createLogger("auth");
+
+// For testing purposes, allow overriding the dependency functions
+let cookiesImpl = null;
+let createServerClientImpl = null;
+
+export function setMockDependencies(cookies, createServerClient) {
+  cookiesImpl = cookies;
+  createServerClientImpl = createServerClient;
+}
+
+export function getSupabaseConfig() {
+  const config = _getSupabaseConfig();
+  if (!config) return null;
+  const serviceKey = process.env.SUPABASE_SERVICE_KEY || process.env.SUPABASE_SERVICE_ROLE_KEY;
+  if (!serviceKey || String(serviceKey).trim().startsWith("Your ")) return null;
+  config.supabaseServiceKey = String(serviceKey).trim();
+  return config;
+}
+
+export async function getAuthenticatedUser() {  
+  const config = getSupabaseConfig();
+  if (!config) {
+    log.error("Config error: Missing or invalid Supabase environment variables.");
+    return { success: false, type: "CONFIG_ERROR" };
+  }
+
+  try {
+    let cookieStore;
+    if (cookiesImpl) {
+      cookieStore = await cookiesImpl();
+    } else {
+      const nextHeaders = await import("next/headers");
+      cookieStore = await nextHeaders.cookies();
+    }
+
+    const clientCreator = createServerClientImpl || createServerClient;
+    const client = clientCreator(config.supabaseUrl, config.supabaseAnonKey, {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll();
+        },
+        setAll(cookiesToSet) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) => {
+              cookieStore.set(name, value, options);
+            });
+          } catch (e) {
+            // Can happen during GET requests or rendering in Next.js, which is expected/normal.
+          }
+        },
+      },
+    });
+
+    // Race getUser() against a 5-second timeout so that network issues
+    // (ConnectTimeoutError to Supabase) fail fast instead of blocking
+    // every API route for the full 10-second fetch timeout.
+    let timeoutId;
+    // Resolve with a sentinel instead of rejecting+silencing:
+    // .catch(()=>{}) previously caused race() to return undefined,
+    // making the destructure below throw TypeError → mis-classified as AUTH_PROVIDER_ERROR.
+    const timeoutPromise = new Promise((resolve) => {
+      timeoutId = setTimeout(
+        () => resolve({ data: null, error: null, __timedOut: true }),
+        5000
+      );
+    });
+
+    let raceResult;
+    try {
+      raceResult = await Promise.race([
+        client.auth.getUser(),
+        timeoutPromise,
+      ]);
+    } finally {
+      clearTimeout(timeoutId);
+    }
+
+    if (raceResult?.__timedOut) {
+      log.warn("Auth check timed out — treating as unauthenticated.");
+      return { success: false, type: "UNAUTHENTICATED" };
+    }
+
+    const { data, error } = raceResult;
+
+    if (error) {
+      log.error({ err: error }, "Auth provider error during getUser.");
+      return { success: false, type: "AUTH_PROVIDER_ERROR" };
+    }
+
+    if (!data || !data.user) {
+      log.warn("Unauthenticated request: No user session found.");
+      return { success: false, type: "UNAUTHENTICATED" };
+    }
+
+    return { success: true, user: data.user };
+  } catch (err) {
+    // Network-level errors (e.g. UND_ERR_CONNECT_TIMEOUT) still reach here.
+    // The explicit timeout case is now handled above via the __timedOut sentinel.
+    if (err?.cause?.code === "UND_ERR_CONNECT_TIMEOUT") {
+      log.warn("Network timeout — treating as unauthenticated.");
+      return { success: false, type: "UNAUTHENTICATED" };
+    }
+    log.error({ err }, "Critical exception during authentication verification.");
+    return { success: false, type: "AUTH_PROVIDER_ERROR" };
+  }
+}
+
+/**
+ * Verifies a Supabase JWT access token directly using the Supabase admin client.
+ * Used by the WebSocket arena server and other non-HTTP contexts where
+ * cookie-based session verification is not available.
+ *
+ * @param {string} token - The Supabase access_token JWT
+ * @returns {Promise<object|null>} The verified user object, or null if invalid/expired
+ */
+export async function verifySupabaseToken(token) {
+  if (!token) return null;
+
+  const config = getSupabaseConfig();
+  if (!config) {
+    log.error("Config error: Missing Supabase environment variables.");
+    return null;
+  }
+
+  try {
+    // Use the service role client for admin-level token verification
+    const { createClient } = await import("@supabase/supabase-js");
+    const adminClient = createClient(config.supabaseUrl, config.supabaseServiceKey, {
+      auth: { autoRefreshToken: false, persistSession: false },
+    });
+
+    const { data, error } = await adminClient.auth.getUser(token);
+    if (error || !data?.user) {
+      log.warn({ reason: error?.message ?? "No user returned" }, "Token verification failed.");
+      return null;
+    }
+
+    return data.user;
+  } catch (err) {
+    log.error({ err }, "Error in verifySupabaseToken.");
+    return null;
+  }
+}
diff --git a/src/lib/collaboration/sessionTrace.js b/src/lib/collaboration/sessionTrace.js
new file mode 100644
index 000000000..56a4abf20
--- /dev/null
+++ b/src/lib/collaboration/sessionTrace.js
@@ -0,0 +1,45 @@
+export function sanitizeSessionText(text, maxLength = 200) {
+  if (typeof text !== "string") return "";
+  let clean = text.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, "");
+  clean = clean.replace(/<[^>]*>/g, "");
+  clean = clean.replace(/\s+/g, " ").trim();
+  if (maxLength > 0 && clean.length > maxLength) {
+    clean = clean.slice(0, maxLength);
+  }
+  return clean;
+}
+
+export function createSessionSnapshot({ presenterId = null } = {}) {
+  return {
+    presenterId,
+    events: [],
+    appliedEventIds: new Set(),
+  };
+}
+
+export function canApplyPrivilegedSessionEvent(snapshot, event) {
+  if (!snapshot || !event) return false;
+  const privilegedTypes = ["control:grant", "state:update"];
+  if (!privilegedTypes.includes(event.type)) return true;
+  if (snapshot.presenterId == null) return true;
+  return event.senderId === snapshot.presenterId;
+}
+
+export function applySessionEvent(snapshot, event) {
+  if (!snapshot || !event) return snapshot;
+  if (event.id && snapshot.appliedEventIds.has(event.id)) {
+    return snapshot;
+  }
+  if (!canApplyPrivilegedSessionEvent(snapshot, event)) {
+    return snapshot;
+  }
+  const next = {
+    ...snapshot,
+    events: [...snapshot.events, event],
+    appliedEventIds: new Set([...snapshot.appliedEventIds, event.id].filter(Boolean)),
+  };
+  if (event.type === "control:grant" && event.payload?.presenterId) {
+    next.presenterId = event.payload.presenterId;
+  }
+  return next;
+}
diff --git a/src/lib/cookieConsent.js b/src/lib/cookieConsent.js
new file mode 100644
index 000000000..eed1342a3
--- /dev/null
+++ b/src/lib/cookieConsent.js
@@ -0,0 +1,47 @@
+// Shared helpers for reading/writing cookie consent preferences.
+// Preferences are stored in localStorage so any part of the app
+// (including scripts injected in the root layout) can check them.
+
+export const CONSENT_STATUS_KEY = "cookieConsent";
+export const CONSENT_PREFERENCES_KEY = "cookiePreferences";
+export const CONSENT_UPDATED_EVENT = "cookiePreferencesUpdated";
+
+export const DEFAULT_PREFERENCES = {
+    essential: true,
+    analytics: false,
+    functional: false,
+    marketing: false,
+};
+
+export function getStoredPreferences() {
+    if (typeof window === "undefined") return DEFAULT_PREFERENCES;
+    try {
+    const raw = window.localStorage.getItem(CONSENT_PREFERENCES_KEY);
+    if (!raw) return DEFAULT_PREFERENCES;
+    const parsed = JSON.parse(raw);
+    return { ...DEFAULT_PREFERENCES, ...parsed, essential: true };
+    } catch {
+    return DEFAULT_PREFERENCES;
+    }
+}
+
+export function saveStoredPreferences(preferences) {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(
+    CONSENT_PREFERENCES_KEY,
+    JSON.stringify({ ...preferences, essential: true })
+    );
+    window.dispatchEvent(new Event(CONSENT_UPDATED_EVENT));
+}
+
+export function hasAnalyticsConsent() {
+    return getStoredPreferences().analytics === true;
+}
+
+export function hasMarketingConsent() {
+    return getStoredPreferences().marketing === true;
+}
+
+export function hasFunctionalConsent() {
+    return getStoredPreferences().functional === true;
+}
\ No newline at end of file
diff --git a/src/lib/csrfConstants.js b/src/lib/csrfConstants.js
new file mode 100644
index 000000000..e0e60cef8
--- /dev/null
+++ b/src/lib/csrfConstants.js
@@ -0,0 +1,53 @@
+export const CSRF_COOKIE_NAME = "csrf-token";
+export const CSRF_HEADER_NAME = "x-csrf-token";
+
+const TRUSTED_ORIGINS = (() => {
+  const appUrl = process.env.NEXT_PUBLIC_APP_URL;
+
+  const origins = new Set([
+    "http://localhost:3000",
+    "http://127.0.0.1:3000",
+    "https://algobuddy.me",
+    "https://www.algobuddy.me",
+    "https://algobuddy.vercel.app",
+  ]);
+
+  if (appUrl) origins.add(appUrl.replace(/\/+$/, ""));
+
+  return origins;
+})();
+
+const VERCEL_PREVIEW_REGEX = /^https:\/\/[a-zA-Z0-9-]+\.algobuddy\.vercel\.app$/;
+
+export function validateCsrfOrigin(request) {
+  const origin = request.headers.get("origin");
+  const referer = request.headers.get("referer");
+
+  let normalized = "";
+  if (origin) {
+    normalized = origin.replace(/\/+$/, "");
+  } else if (referer) {
+    try {
+      normalized = new URL(referer).origin;
+    } catch {}
+  }
+
+  if (TRUSTED_ORIGINS.has(normalized)) return true;
+  if (VERCEL_PREVIEW_REGEX.test(normalized)) return true;
+  return false;
+}
+
+const STATE_CHANGING_METHODS = new Set([
+  "POST",
+  "PUT",
+  "PATCH",
+  "DELETE",
+]);
+
+export function isStateChangingMethod(method) {
+  return STATE_CHANGING_METHODS.has(method);
+}
+
+export function isApiRoute(pathname) {
+  return pathname.startsWith("/api/");
+}
\ No newline at end of file
diff --git a/src/lib/csrfToken.js b/src/lib/csrfToken.js
new file mode 100644
index 000000000..95b68aa5e
--- /dev/null
+++ b/src/lib/csrfToken.js
@@ -0,0 +1,90 @@
+import { createLogger } from "./logger.js";
+
+const log = createLogger("csrf");
+
+const CSRF_TOKEN_LENGTH = 32;
+const CSRF_SECRET_ENV = "CSRF_SECRET";
+const CSRF_TOKEN_TTL_MS = 24 * 60 * 60 * 1000;
+
+let devSecret = null;
+
+function getSecret() {
+  const secret = process.env[CSRF_SECRET_ENV];
+  if (secret) return secret;
+  if (process.env.NODE_ENV === "production") {
+    throw new Error(
+      "CSRF_SECRET must be set in production for CSRF token signing.",
+    );
+  }
+  if (!devSecret) {
+    const array = new Uint8Array(32);
+    globalThis.crypto.getRandomValues(array);
+    devSecret = Array.from(array)
+      .map((b) => b.toString(16).padStart(2, "0"))
+      .join("");
+    log.warn("CSRF_SECRET not set. Using a fallback development secret. Set CSRF_SECRET in .env.local for persistence and security in production.");
+  }
+  return devSecret;
+}
+
+export async function generateCsrfToken() {
+  const secret = getSecret();
+  const array = new Uint8Array(CSRF_TOKEN_LENGTH);
+  globalThis.crypto.getRandomValues(array);
+  const randomValue = Array.from(array)
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+  const timestamp = Date.now().toString(36);
+  const encoder = new TextEncoder();
+  const key = await globalThis.crypto.subtle.importKey(
+    "raw",
+    encoder.encode(secret),
+    { name: "HMAC", hash: "SHA-256" },
+    false,
+    ["sign"],
+  );
+  const sigBytes = await globalThis.crypto.subtle.sign("HMAC", key, encoder.encode(`${randomValue}:${timestamp}`));
+  const signature = Array.from(new Uint8Array(sigBytes))
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+  return `${randomValue}.${timestamp}.${signature}`;
+}
+
+export async function validateCsrfTokenEdge(token) {
+  if (!token || typeof token !== "string") return false;
+  const parts = token.split(".");
+  if (parts.length !== 3) return false;
+  const [randomValue, timestamp, signature] = parts;
+
+  const tokenAge = Date.now() - parseInt(timestamp, 36);
+  if (tokenAge > CSRF_TOKEN_TTL_MS || tokenAge < 0) return false;
+
+  const secret = getSecret();
+  const encoder = new TextEncoder();
+  const key = await globalThis.crypto.subtle.importKey(
+    "raw",
+    encoder.encode(secret),
+    { name: "HMAC", hash: "SHA-256" },
+    false,
+    ["sign"],
+  );
+  const sigBytes = await globalThis.crypto.subtle.sign("HMAC", key, encoder.encode(`${randomValue}:${timestamp}`));
+  const expected = Array.from(new Uint8Array(sigBytes))
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+  if (signature.length !== expected.length) return false;
+  try {
+    const sigBuf = new Uint8Array(
+      signature.match(/.{1,2}/g).map((b) => parseInt(b, 16)),
+    );
+    const expBuf = new Uint8Array(
+      expected.match(/.{1,2}/g).map((b) => parseInt(b, 16)),
+    );
+    if (sigBuf.length !== expBuf.length) return false;
+    const result = sigBuf.reduce((acc, byte, i) => acc | (byte ^ expBuf[i]), 0);
+    return result === 0;
+  } catch {
+    return false;
+  }
+}
+
diff --git a/src/lib/email.js b/src/lib/email.js
new file mode 100644
index 000000000..8e75c0fcb
--- /dev/null
+++ b/src/lib/email.js
@@ -0,0 +1,39 @@
+import { createLogger } from "./logger.js";
+
+const log = createLogger("email");
+
+const RESEND_API_KEY = process.env.RESEND_API_KEY;
+
+export async function sendEmail({ to, subject, html }) {
+  if (!RESEND_API_KEY) {
+    log.warn("RESEND_API_KEY not configured. Skipping email send.");
+    return { success: false, skipped: true };
+  }
+
+  try {
+    const res = await fetch("https://api.resend.com/emails", {
+      method: "POST",
+      headers: {
+        "Authorization": `Bearer ${RESEND_API_KEY}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        from: "AlgoBuddy <notifications@algobuddy.com>",
+        to,
+        subject,
+        html,
+      }),
+    });
+
+    if (!res.ok) {
+      const err = await res.text();
+      log.error({ statusCode: res.status, resendError: err }, "Resend API error.");
+      return { success: false, error: err };
+    }
+
+    return { success: true };
+  } catch (error) {
+    log.error({ err: error }, "Failed to send email.");
+    return { success: false, error: error.message };
+  }
+}
diff --git a/src/lib/emailTransporter.js b/src/lib/emailTransporter.js
new file mode 100644
index 000000000..21101c185
--- /dev/null
+++ b/src/lib/emailTransporter.js
@@ -0,0 +1,16 @@
+import nodemailer from "nodemailer";
+
+let transporter = null;
+
+export function getTransporter() {
+  if (!transporter) {
+    transporter = nodemailer.createTransport({
+      service: "gmail",
+      auth: {
+        user: process.env.EMAIL_USER,
+        pass: process.env.EMAIL_PASSWORD,
+      },
+    });
+  }
+  return transporter;
+}
diff --git a/src/lib/getClientIp.js b/src/lib/getClientIp.js
new file mode 100644
index 000000000..4927fadb6
--- /dev/null
+++ b/src/lib/getClientIp.js
@@ -0,0 +1,15 @@
+/**
+ * Returns the verified client IP from an incoming request's headers.
+ *
+ * Only trusts x-real-ip — set by Vercel's edge infrastructure; cannot
+ * be spoofed by the client.  X-Forwarded-For is NOT used because it is
+ * fully client-controlled and would allow complete rate-limit bypass.
+ *
+ * @param {Headers} headers  The request headers object.
+ * @returns {string}  Verified IP address, or "unknown" if none can be determined.
+ */
+export function getClientIp(headers) {
+  const realIp = headers.get("x-real-ip");
+  if (realIp) return realIp.trim();
+  return "unknown";
+}
diff --git a/src/lib/gtag.js b/src/lib/gtag.js
new file mode 100644
index 000000000..41744b783
--- /dev/null
+++ b/src/lib/gtag.js
@@ -0,0 +1,19 @@
+export const GA_MEASUREMENT_ID = 'G-N8XGEXJXEM'
+
+export const pageview = (url) => {
+  if (typeof window.gtag !== 'undefined') {
+    window.gtag('config', GA_MEASUREMENT_ID, {
+      page_path: url,
+    });
+  }
+}
+
+export const event = ({ action, category, label, value }) => {
+  if (typeof window.gtag !== 'undefined') {
+    window.gtag('event', action, {
+      event_category: category,
+      event_label: label,
+      value: value,
+    });
+  }
+};
\ No newline at end of file
diff --git a/src/lib/logger.js b/src/lib/logger.js
new file mode 100644
index 000000000..7eb0b5dcf
--- /dev/null
+++ b/src/lib/logger.js
@@ -0,0 +1,157 @@
+/**
+ * logger.js
+ *
+ * Centralized structured logging utility for AlgoBuddy server-side modules.
+ * Built on top of pino for high-performance JSON-structured log output.
+ *
+ * Usage (ESM):
+ *   import logger from "@/lib/logger";
+ *   import { createLogger } from "@/lib/logger";
+ *   const log = createLogger("my-module");
+ *   log.info("Server started");
+ *   log.warn({ userId }, "Rate limit approaching");
+ *   log.error({ err }, "Unhandled exception");
+ *
+ * Usage (CJS):
+ *   const { createLogger } = require("../logger");
+ *   const log = createLogger("sandbox");
+ *
+ * Log Levels (lowest → highest severity):
+ *   trace  → very verbose debugging
+ *   debug  → debugging details (disabled in production by default)
+ *   info   → general operational events
+ *   warn   → unexpected but recoverable situations
+ *   error  → failures requiring attention
+ *   fatal  → unrecoverable crashes
+ *
+ * The active log level is controlled by the LOG_LEVEL environment variable.
+ * Defaults to "debug" in development and "info" in production.
+ *
+ * In production, logs are emitted as newline-delimited JSON (NDJSON).
+ * In development, pino-pretty formatting is applied when available,
+ * otherwise falling back to clean readable text output.
+ */
+
+import pino from "pino";
+
+// ─────────────────────────────────────────────────────────────
+// Config
+// ─────────────────────────────────────────────────────────────
+
+const IS_PRODUCTION = process.env.NODE_ENV === "production";
+
+/** Active log level — override via LOG_LEVEL env var */
+const LOG_LEVEL = process.env.LOG_LEVEL ?? (IS_PRODUCTION ? "info" : "debug");
+
+// ─────────────────────────────────────────────────────────────
+// Base logger instance
+// ─────────────────────────────────────────────────────────────
+
+function createConsoleFallbackLogger(context = {}) {
+  const log = (level, arg1, arg2, ...rest) => {
+    let bindings = {};
+    let msg = arg1;
+    if (typeof arg1 === "object" && arg1 !== null && !(arg1 instanceof Error)) {
+      bindings = arg1;
+      msg = arg2;
+    } else if (arg1 instanceof Error) {
+      bindings = { err: { message: arg1.message, name: arg1.name, stack: arg1.stack } };
+      msg = arg2 || arg1.message;
+    }
+
+    const payload = {
+      level,
+      time: new Date().toISOString(),
+      env: process.env.NODE_ENV ?? "development",
+      ...context,
+      ...bindings,
+      msg: msg ?? "",
+    };
+
+    const str = JSON.stringify(payload);
+    if (level === "error" || level === "fatal") {
+      console.error(str, ...rest);
+    } else if (level === "warn") {
+      console.warn(str, ...rest);
+    } else {
+      console.log(str, ...rest);
+    }
+  };
+
+  return {
+    level: LOG_LEVEL,
+    trace: (...args) => log("trace", ...args),
+    debug: (...args) => log("debug", ...args),
+    info: (...args) => log("info", ...args),
+    warn: (...args) => log("warn", ...args),
+    error: (...args) => log("error", ...args),
+    fatal: (...args) => log("fatal", ...args),
+    child: (bindings) => createConsoleFallbackLogger({ ...context, ...bindings }),
+  };
+}
+
+let baseLogger;
+try {
+  if (typeof pino === "function") {
+    let prettyTransport;
+    if (!IS_PRODUCTION && typeof window === "undefined") {
+      try {
+        prettyTransport = {
+          target: "pino-pretty",
+          options: {
+            colorize: true,
+            translateTime: "SYS:HH:MM:ss",
+            ignore: "pid,hostname,env",
+            messageFormat: "[{module}] {msg}",
+          },
+        };
+      } catch {
+        // pino-pretty not installed — use default NDJSON output
+      }
+    }
+
+    baseLogger = pino({
+      level: LOG_LEVEL,
+      base: {
+        env: process.env.NODE_ENV ?? "development",
+      },
+      timestamp: pino.stdTimeFunctions ? pino.stdTimeFunctions.isoTime : () => `,"time":"${new Date().toISOString()}"`,
+      serializers: pino.stdSerializers
+        ? {
+            err: pino.stdSerializers.err,
+            error: pino.stdSerializers.err,
+          }
+        : {},
+      browser: {
+        asObject: true,
+      },
+      ...(prettyTransport ? { transport: prettyTransport } : {}),
+    });
+  } else {
+    baseLogger = createConsoleFallbackLogger();
+  }
+} catch {
+  baseLogger = createConsoleFallbackLogger();
+}
+
+// ─────────────────────────────────────────────────────────────
+// Public API
+// ─────────────────────────────────────────────────────────────
+
+/**
+ * Create a child logger scoped to a specific module or subsystem.
+ * The module name is added as a permanent "module" field on every log line
+ * emitted by this child, making it easy to filter in production.
+ *
+ * @param {string} moduleName - e.g. "sandbox", "rateLimit", "auth"
+ * @returns {import("pino").Logger}
+ */
+export function createLogger(moduleName) {
+  return baseLogger.child({ module: moduleName });
+}
+
+/**
+ * Default root logger — use this when you don't need per-module scoping.
+ * Prefer createLogger() for new modules to keep logs filterable.
+ */
+export default baseLogger;
diff --git a/src/lib/modulesMap.js b/src/lib/modulesMap.js
new file mode 100644
index 000000000..7932d48bc
--- /dev/null
+++ b/src/lib/modulesMap.js
@@ -0,0 +1,78 @@
+
+export const MODULE_MAPS = {
+    linearSearch : "378adcd8-7356-4d10-84cf-1dad1cbd496a",
+    binarySearch : "e527f92a-7962-4b0b-a46a-52ecf08a73ef",
+    ternarySearch: "ternary-search-001",
+    jumpSearch: "jump-search-001",
+    exponentialSearch: "exponential-search-001",
+    fibonacciSearch: "fibonacci-search-001",
+    interpolationSearch: "interpolation-search-001",
+    bubbleSort : "b1387e6d-ebf8-4b52-9c5d-ab8c94f8eda4",
+    insertionSort : "f8ae92e2-1371-4852-a615-0354011f8f48",
+    selectionSort : "7dffce41-ff4c-4700-8cfe-04b8793cc25c",
+    mergeSort : "d6704302-d35c-4c32-a259-9518dec15920",
+    quickSort : "19ad8f43-b858-4e80-998c-49c5e0f69f8c",
+    shellSort : "shell-sort-001",
+    timSort : "tim-sort-001",
+    bucketSort: "bucket-sort-001",
+    radixSort : "radix-sort-001",
+    countingSort : "a3b0cb48-1234-4cde-8f6b-9f12a3b4c5d6",
+    reverseString: "reverse-string",
+    characterFrequencyLogic:"character-frequency",
+    anagramCheckLogic:"anagram-check",
+    pushPop : "48138388-914b-4f84-8468-683175ce1a1e",
+    peek : "fd95f8af-fb22-413f-9080-ebb558b53e70",
+    isEmpty : "05ecbddd-e3d4-4fa1-aa45-71accac97d79",
+    isFull : "54301ec9-0586-48f0-a6db-18a41adeb856",
+    postfix : "ca3daf8d-23f8-4ade-adfd-4bd0a88d3da2",
+    prefix : "a2971df4-5e48-4320-bc91-3de3242cac48",
+    stackArray : "4e0dd1e0-a8c7-4066-845c-b5917383d5c2",
+    stackLinkedList : "69ecfabf-97d3-433e-972e-54ea4c91374f",
+    enqueueDequeue : "0f8a94c9-c8e1-4407-bc03-11fac79e1331",
+    peekFront : "77ebf769-59c5-43e6-8b2a-fb8aef51a9ab",
+    queueIsEmpty : "ed561422-f566-43e8-b4fd-d73d53d9ab9a",
+    queueIsFull : "381cd781-881e-4060-a6a3-c5d58e36dffa",
+    singleEnded : "e8a2585d-5fb0-4004-bcf6-fd6ee6c4f7f2",
+    doubleEnded : "17db0a89-97ad-470e-809f-f461af6a838d",
+    circularQueue : "2cd12990-6c50-4842-b36e-f42e8b516386",
+    priorityQueue : "d4764df9-355c-4a5c-b9ff-e6f71a667396",
+    queueArray : "06ec481b-d6a7-46e9-8a74-16031d298734",
+    queueLinkedList : "b217f8ad-38e3-4f55-b066-2f5f67d7ea36",
+    trie: "5c83fa8d-b31c-4bfa-b9a3-a7ce97424de9",
+    redBlackTree: "3c988a8d-2fb3-4f9e-8c76-f831b1bfbe9d",
+    bTree: "df943bc7-3b2d-45f8-8a8b-c9dfa515cbe9",
+    segmentTree: "81e9f8ad-2df3-4eb8-bb1a-f3762bcab48e",
+    segmentTree2D: "segment-tree-2d-001",
+    fenwickTree: "28e7fa8d-56f7-43f2-8be2-723a4b92b67e",
+    heapSort: "e67a57a1-8d2a-4467-8e1f-7b1980838ea5",
+    heapVisualizer: "heap-visualizer-001",
+    huffmanCoding: "c41f714b-2403-4952-b8bb-1596f2a89078",
+    decisionTrees: "b529944a-3f19-4b2a-8c34-eb17c667462c",
+    syntaxTrees: "f19ab27b-23f2-45de-985c-4d875a6c1173",
+    hashmapInsert : "hashmap-insert-001",
+    hashmapSearch : "hashmap-search-001",
+    hashmapDelete : "hashmap-delete-001",
+    lca: "7e0dd1e0-a8c7-4066-845c-b5917383d5c3",
+    diameter: "69ecfabf-97d3-433e-972e-54ea4c91374a",
+    isomorphism: "2cd12990-6c50-4842-b36e-f42e8b516387",
+    serialization: "d4764df9-355c-4a5c-b9ff-e6f71a667397",
+    recursionFactorial: "b31cd781-881e-4060-a6a3-c5d58e36dffe",
+    recursionHanoi: "b31cd781-881e-4060-a6a3-c5d58e36dff7",
+    recursionSum: "b31cd781-881e-4060-a6a3-c5d58e36dffb",
+    recursionFibonacci: "b31cd781-881e-4060-a6a3-c5d58e36dffa",
+    recursionPrint1ToN: "b31cd781-881e-4060-a6a3-c5d58e36dff1",
+    recursionPrintNTo1: "b31cd781-881e-4060-a6a3-c5d58e36dff2",
+    recursionSubsequences: "b31cd781-881e-4060-a6a3-c5d58e36dffc",
+    recursionNQueens: "b31cd781-881e-4060-a6a3-c5d58e36dffd",
+    recursionReverseArray: "b31cd781-881e-4060-a6a3-c5d58e36dff4",
+    recursionPalindrome: "b31cd781-881e-4060-a6a3-c5d58e36dff5",
+    recursionBinarySearch: "b31cd781-881e-4060-a6a3-c5d58e36dff6",
+    minMax: "e8b23c91-b3f3-4a6c-9a4f-a9b8dc913809",
+    alphaBeta: "7f4c5e3d-b2a1-4c12-9e8d-5a6b7c8d9e0f",
+    astar: "f1a2b3c4-d5e6-4f70-8a9b-1c2d3e4f5a6b",
+    mcts: "c9f1d2a4-6b7e-4d2f-9a8c-1e2f3a4b5c6d",
+    slidingWindow: "a81d4a92-b6f1-4c22-8d7e-9a6b7c8d9e10",
+    monotonicStack: "1a2b3c4d-5e6f-7g8h-9i0j-k1l2m3n4o5p6",
+    dsu: "d9e8fa7c-6b5a-4d3c-2b1a-0f9e8d7c6b5a",
+    twoPointers: "f3a1b2c3-d4e5-4f60-a7b8-c9d0e1f2a3b4",
+}
diff --git a/src/lib/persistence.js b/src/lib/persistence.js
new file mode 100644
index 000000000..f6fcda277
--- /dev/null
+++ b/src/lib/persistence.js
@@ -0,0 +1,106 @@
+import { supabase } from "@/lib/supabase";
+import { createLogger } from "./logger.js";
+
+const log = createLogger("persistence");
+
+const STORAGE_KEYS = {
+  PRACTICE_PROGRESS: 'algobuddy_practice_progress',
+  BOOKMARKS: 'algobuddy_bookmarks',
+  PROBLEM_BOOKMARKS: 'algobuddy_problem_bookmarks',
+  RECENTLY_VIEWED: 'algobuddy_recently_viewed',
+  THEME: 'algobuddy_theme',
+};
+
+class PersistenceManager {
+  constructor() {
+    this.syncQueue = [];
+    this.syncInProgress = false;
+    this.syncTimer = null;
+  }
+
+  async get(key) {
+    const local = localStorage.getItem(STORAGE_KEYS[key]);
+    if (local) {
+      try {
+        return JSON.parse(local);
+      } catch {
+        return null;
+      }
+    }
+    return null;
+  }
+
+  set(key, value) {
+    localStorage.setItem(STORAGE_KEYS[key], JSON.stringify(value));
+  }
+
+  remove(key) {
+    localStorage.removeItem(STORAGE_KEYS[key]);
+  }
+
+  async loadFromServer(table, userId) {
+    if (!userId) return null;
+    try {
+      const { data, error } = await supabase
+        .from(table)
+        .select('*')
+        .eq('user_id', userId);
+      if (error) {
+        log.error({ table, err: error }, "Failed to load from server.");
+        return null;
+      }
+      return data;
+    } catch (e) {
+      log.error({ table, err: e }, "Error loading from server.");
+      return null;
+    }
+  }
+
+  async syncToServer(table, data, conflictColumns = ['user_id']) {
+    try {
+      const { error } = await supabase
+        .from(table)
+        .upsert(data, { onConflict: conflictColumns });
+      if (error) {
+        log.error({ table, err: error }, "Failed to sync to server.");
+      }
+    } catch (e) {
+      log.error({ table, err: e }, "Error syncing to server.");
+    }
+  }
+
+  mergeProgress(local, server, userId) {
+    const merged = { ...local };
+    if (server) {
+      server.forEach((item) => {
+        const problemId = item.problem_id;
+        const serverStatus = item.status;
+        const serverUpdated = item.updated_at ? new Date(item.updated_at).getTime() : 0;
+        const localUpdated = local[problemId]?.updatedAt
+          ? new Date(local[problemId].updatedAt).getTime()
+          : 0;
+
+        if (serverUpdated >= localUpdated) {
+          merged[problemId] = { status: serverStatus, updatedAt: item.updated_at };
+        }
+      });
+    }
+    return merged;
+  }
+
+  mergeBookmarks(localArray, serverArray, idField = 'id') {
+    const merged = {};
+    localArray.forEach((item) => {
+      merged[item[idField]] = item;
+    });
+    serverArray.forEach((item) => {
+      const key = item[idField] || item.problem_id;
+      if (key) {
+        merged[key] = item;
+      }
+    });
+    return Object.values(merged);
+  }
+}
+
+export const persistence = new PersistenceManager();
diff --git a/src/lib/practiceData.js b/src/lib/practiceData.js
new file mode 100644
index 000000000..4a6c8b6c0
--- /dev/null
+++ b/src/lib/practiceData.js
@@ -0,0 +1,956 @@
+// Curated database for the progressive DSA roadmap.
+// Structured strictly with: Beginner, Intermediate, and Advanced tiers for each topic.
+// Maps directly to visualizer pages in lib/visualizerSections.js to provide unified visual learning.
+
+export const practiceData = [
+  {
+    title: "Array",
+    slug: "array",
+    desc: "Contiguous collections of memory. Master array traversals, pointer techniques, searching, and sorting.",
+    subsections: [
+      {
+        title: "Beginner",
+        items: [
+          {
+            id: "linear-search",
+            name: "Linear Search",
+            difficulty: "Easy",
+            companies: ["tcs", "infosys", "wipro", "accenture", "amazon", "google"],
+            practiceUrl: "https://www.codechef.com/learn/course/searching-sorting/SORTSEARCH1/problems/SESO03",
+            visualizerUrl: "/visualizer/array/linearsearch",
+            theory: {
+              summary: "A simple algorithm that checks every element in the array sequentially until the target is found.",
+              steps: [
+                "Start from the first element (index 0).",
+                "Compare the current element with the target.",
+                "If matched, return the current index.",
+                "If not matched, move to the next index.",
+                "If the end of the array is reached without matching, return -1."
+              ],
+              complexity: { time: "O(N)", space: "O(1)" },
+              pitfalls: "Inefficient for large datasets. Avoid using on sorted arrays where Binary Search is available.",
+              tip: "Linear Search serves as the baseline comparison for all searching optimization algorithms."
+            }
+          },
+          {
+            id: "binary-search",
+            name: "Binary Search",
+            difficulty: "Easy",
+            companies: ["google", "microsoft", "amazon", "meta", "apple", "adobe", "qualcomm", "nvidia", "intel", "amd"],
+            practiceUrl: "https://leetcode.com/problems/binary-search/",
+            visualizerUrl: "/visualizer/array/binarysearch",
+            theory: {
+              summary: "An efficient algorithm that finds a target value within a sorted array by repeatedly dividing the search interval in half.",
+              steps: [
+                "Ensure the array is sorted.",
+                "Set low pointer to index 0, and high pointer to last index.",
+                "Calculate mid index as ⌊(low + high) / 2⌋.",
+                "If array[mid] equals target, return mid.",
+                "If array[mid] is less than target, discard left half by setting low = mid + 1.",
+                "If array[mid] is greater than target, discard right half by setting high = mid - 1.",
+                "Repeat until low pointer exceeds high pointer."
+              ],
+              complexity: { time: "O(log N)", space: "O(1)" },
+              pitfalls: "Forgetting to sort the array beforehand, or causing integer overflow when calculating mid as (low + high) / 2 instead of low + (high - low) / 2.",
+              tip: "Whenever a search problem has a sorted input or requires logarithmic time, think Binary Search."
+            }
+          }
+        ]
+      },
+      {
+        title: "Intermediate",
+        items: [
+          {
+            id: "bubble-sort",
+            name: "Bubble Sort",
+            difficulty: "Easy",
+            companies: ["tcs", "infosys", "wipro", "accenture"],
+            practiceUrl: "https://leetcode.com/problems/sort-an-array/",
+            visualizerUrl: "/visualizer/array/bubblesort",
+            theory: {
+              summary: "A simple comparison-based sorting algorithm that repeatedly steps through the list, compares adjacent elements, and swaps them if they are in the wrong order.",
+              steps: [
+                "Start at index 0.",
+                "Compare the element at index i with i + 1.",
+                "If array[i] > array[i+1], swap them.",
+                "Move index to next element and repeat until the end of the unsorted segment.",
+                "With each pass, the largest unsorted element 'bubbles up' to its correct spot.",
+                "Repeat for all elements."
+              ],
+              complexity: { time: "O(N²)", space: "O(1)" },
+              pitfalls: "Poor average and worst-case performance. Do not use for large lists.",
+              tip: "Bubble sort can be optimized by adding a 'swapped' flag. If a pass completes without any swaps, the array is sorted, and we can terminate early."
+            }
+          },
+          {
+            id: "merge-sort",
+            name: "Merge Sort",
+            difficulty: "Medium",
+            companies: ["amazon", "microsoft", "adobe", "uber", "airbnb", "atlassian"],
+            practiceUrl: "https://leetcode.com/problems/sort-an-array/",
+            visualizerUrl: "/visualizer/array/mergesort",
+            theory: {
+              summary: "A divide-and-conquer sorting algorithm that splits the array in half, sorts each half recursively, and merges the sorted halves.",
+              steps: [
+                "If array size is 1 or 0, it is already sorted. Return it.",
+                "Find the middle index of the array.",
+                "Divide the array into left and right sub-arrays.",
+                "Recursively call Merge Sort on left and right sub-arrays.",
+                "Merge the two sorted halves back into a single sorted array using pointers."
+              ],
+              complexity: { time: "O(N log N)", space: "O(N)" },
+              pitfalls: "Requires auxiliary linear memory space, making it less memory-efficient than in-place algorithms like Quick Sort.",
+              tip: "Merge Sort is highly stable (preserves original order of duplicates) and is widely used for sorting Linked Lists due to constant space merging."
+            }
+          },
+          {
+            id: "maximum-subarray",
+            name: "Maximum Subarray (Kadane's Algorithm)",
+            difficulty: "Medium",
+            companies: ["amazon", "microsoft", "google", "meta", "adobe", "flipkart", "swiggy", "zomato"],
+            practiceUrl: "https://leetcode.com/problems/maximum-subarray/",
+            visualizerUrl: "/visualizer/array/maxsubarray",
+            theory: {
+              summary: "Find the contiguous subarray within a one-dimensional array of numbers that has the largest sum, using Kadane's Algorithm for an optimal O(N) solution.",
+              steps: [
+                "Initialize currentSum = 0 and maxSum = -Infinity (or the first element).",
+                "Traverse the array from left to right.",
+                "At each element, add it to currentSum: currentSum = currentSum + array[i].",
+                "Update maxSum = max(maxSum, currentSum) to record the best sum found so far.",
+                "If currentSum becomes negative, reset it to 0, since a negative sum can never help a future subarray.",
+                "After traversing the full array, maxSum holds the answer."
+              ],
+              complexity: { time: "O(N)", space: "O(1)" },
+              pitfalls: "Resetting currentSum to 0 incorrectly when all elements are negative — in that case the answer is simply the largest (least negative) single element, not 0. Always initialize maxSum with the first element, not 0.",
+              tip: "Kadane's Algorithm is a classic example of Dynamic Programming with O(1) space: it only needs the answer 'so far', not a full DP table. It's one of the most frequently asked array problems in interviews."
+            }
+          },
+          {
+            id: "two-sum",
+            name: "Two Sum",
+            difficulty: "Easy",
+            companies: ["amazon", "google", "microsoft", "meta", "apple"],
+            practiceUrl: "https://leetcode.com/problems/two-sum/",
+            visualizerUrl: "/visualizer/array/twosum",
+            theory: {
+              summary: "Given an array of integers and a target value, find the indices of the two numbers that add up to the target, using a HashMap for an optimal one-pass solution.",
+              steps: [
+                "Create an empty HashMap to store value → index pairs.",
+                "Traverse the array from left to right with index i.",
+                "Calculate complement = target - array[i].",
+                "Check if complement already exists in the HashMap.",
+                "If it exists, return [HashMap[complement], i] as the answer.",
+                "If not, insert array[i] → i into the HashMap and continue."
+              ],
+              complexity: { time: "O(N)", space: "O(N)" },
+              pitfalls: "Using the Brute Force nested-loop approach (checking every pair) leads to O(N²) time, which is too slow for large inputs. Also, forgetting to check the HashMap before inserting the current element can cause matching an element with itself.",
+              tip: "Two Sum is the most frequently asked entry-level problem in interviews. The HashMap trick of storing 'what we need' (the complement) is a pattern reused in many other array problems."
+            }
+          },
+        ]
+      },
+      {
+        title: "Advanced",
+        items: [
+          {
+            id: "quick-sort",
+            name: "Quick Sort",
+            difficulty: "Medium",
+            companies: ["google", "microsoft", "amazon", "apple", "qualcomm", "intel"],
+            practiceUrl: "https://leetcode.com/problems/sort-an-array/",
+            visualizerUrl: "/visualizer/array/quicksort",
+            theory: {
+              summary: "An efficient in-place sorting algorithm that uses a divide-and-conquer strategy to pick a pivot element and partition the array.",
+              steps: [
+                "Choose an element from the array as the pivot (often the last element).",
+                "Partition the array: move all elements smaller than pivot to its left, and larger elements to its right.",
+                "Recursively apply Quick Sort to the left and right sub-arrays."
+              ],
+              complexity: { time: "O(N log N) average", space: "O(log N) stack recursion" },
+              pitfalls: "Can degrade to O(N²) worst-case time complexity if the pivot chosen is always the smallest or largest element.",
+              tip: "Choose a random pivot element to significantly reduce worst-case risks to a negligible probability."
+            }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    title: "Linked List",
+    slug: "linked-list",
+    desc: "Sequential node allocations chained via address pointer link references.",
+    subsections: [
+      {
+        title: "Beginner",
+        items: [
+          {
+            id: "middle-of-linked-list",
+            name: "Middle of the Linked List",
+            difficulty: "Easy",
+            companies: ["amazon", "google"],
+            practiceUrl: "https://leetcode.com/problems/middle-of-the-linked-list/",
+            visualizerUrl: "/visualizer/linkedlist/operations/traversal",
+            theory: {
+              summary: "Find the middle node of a singly linked list.",
+              steps: [
+                "Initialize two pointers, slow and fast, pointing to the head.",
+                "Move slow by one step and fast by two steps.",
+                "When fast reaches the end, slow will be at the middle."
+              ],
+              complexity: { time: "O(N)", space: "O(1)" },
+              pitfalls: "Not correctly handling the condition for even length lists.",
+              tip: "The Tortoise and Hare algorithm is standard for finding the middle node."
+            }
+          },
+          {
+  id: "linked-list-cycle",
+  name: "Linked List Cycle",
+  difficulty: "Easy",
+  companies: ["amazon", "microsoft", "apple"],
+  practiceUrl: "https://leetcode.com/problems/linked-list-cycle/",
+  visualizerUrl: "/visualizer/linkedlist/operations/traversal",
+  theory: {
+    summary: "Determine if a linked list has a cycle by checking if any node is visited more than once.",
+    steps: [
+      "Initialize two pointers, slow and fast, pointing to the head.",
+      "Move slow by one step and fast by two steps in each iteration.",
+      "If fast reaches null, there is no cycle — return false.",
+      "If slow and fast pointers ever meet, a cycle exists — return true."
+    ],
+    complexity: { time: "O(N)", space: "O(1)" },
+    pitfalls: "Not checking fast.next for null before moving fast two steps, which causes a null pointer error.",
+    tip: "This is also called Floyd's Cycle Detection Algorithm, or the Tortoise and Hare approach."
+  }
+},
+          {
+            id: "intersection-of-two-linked-lists",
+            name: "Intersection of Two Linked Lists",
+            difficulty: "Easy",
+            companies: ["amazon", "google"],
+            practiceUrl: "https://leetcode.com/problems/intersection-of-two-linked-lists/",
+            visualizerUrl: "/visualizer/linkedlist/operations/traversal",
+            theory: {
+              summary: "Find the node at which the intersection of two singly linked lists begins.",
+              steps: [
+                "Initialize two pointers, pA and pB, at the heads of the two lists.",
+                "Traverse both lists. When pA reaches the end, redirect it to the head of list B.",
+                "When pB reaches the end, redirect it to the head of list A.",
+                "If they intersect, they will meet at the intersection node. Otherwise, they will meet at null."
+              ],
+              complexity: { time: "O(N+M)", space: "O(1)" },
+              pitfalls: "Creating infinite loops if the redirect condition is not handled correctly.",
+              tip: "By swapping heads, both pointers travel the exact same distance (lengthA + lengthB)."
+            }
+          },
+          {
+            id: "palindrome-linked-list",
+            name: "Palindrome Linked List",
+            difficulty: "Easy",
+            companies: ["amazon", "google"],
+            practiceUrl: "https://leetcode.com/problems/palindrome-linked-list/",
+            visualizerUrl: "/visualizer/linkedlist/operations/reverse",
+            theory: {
+              summary: "Given the head of a singly linked list, return true if it is a palindrome.",
+              steps: [
+                "Find the middle of the linked list.",
+                "Reverse the second half of the linked list.",
+                "Compare the first half and the reversed second half.",
+                "Restore the list (optional) and return the result."
+              ],
+              complexity: { time: "O(N)", space: "O(1)" },
+              pitfalls: "Forgetting to handle odd vs even number of nodes when splitting the list.",
+              tip: "Combine the 'Middle of Linked List' and 'Reverse Linked List' algorithms."
+            }
+          },
+          {
+            id: "list-traversal",
+            name: "Singly Linked List Traversal",
+            difficulty: "Easy",
+            companies: ["amazon", "microsoft", "google", "adobe", "tcs", "accenture"],
+            practiceUrl: "https://leetcode.com/problems/reverse-linked-list/",
+            visualizerUrl: "/visualizer/linkedlist/operations/traversal",
+            theory: {
+              summary: "Traverse a singly linked list sequentially from the head node to the tail node to inspect or print values.",
+              steps: [
+                "Set a pointer curr = head.",
+                "While curr is not null, visit/inspect curr.val.",
+                "Advance curr to the next node: curr = curr.next."
+              ],
+              complexity: { time: "O(N)", space: "O(1)" },
+              pitfalls: "Attempting to read properties of null (e.g. curr.next when curr is already null).",
+              tip: "Always check if the list head is null before starting any linked list operations."
+            }
+          },
+
+          
+        ]
+      },
+      {
+        title: "Intermediate",
+        items: [
+          {
+            id: "remove-nth-node",
+            name: "Remove Nth Node From End of List",
+            difficulty: "Medium",
+            companies: ["amazon", "microsoft"],
+            practiceUrl: "https://leetcode.com/problems/remove-nth-node-from-end-of-list/",
+            visualizerUrl: "/visualizer/linkedlist/operations/deletion",
+            theory: {
+              summary: "Remove the nth node from the end of the list and return its head.",
+              steps: [
+                "Use a dummy head pointing to the actual head to handle edge cases like removing the head.",
+                "Use two pointers, fast and slow.",
+                "Advance fast pointer by n+1 steps.",
+                "Move both pointers one step at a time until fast reaches null.",
+                "Slow pointer will now be just before the node to remove.",
+                "Bypass the target node by setting slow.next = slow.next.next."
+              ],
+              complexity: { time: "O(N)", space: "O(1)" },
+              pitfalls: "Failing to handle the case where the head itself needs to be removed.",
+              tip: "A dummy head is standard practice when the head node might be modified or removed."
+            }
+          },
+          {
+            id: "lru-cache",
+            name: "LRU Cache",
+            difficulty: "Medium",
+            companies: ["amazon", "google", "microsoft"],
+            practiceUrl: "https://leetcode.com/problems/lru-cache/",
+            visualizerUrl: "/visualizer/linkedlist/operations/traversal",
+            theory: {
+              summary: "Design a data structure that follows the constraints of a Least Recently Used (LRU) cache.",
+              steps: [
+                "Use a hash map to store key-node pairs for O(1) access.",
+                "Use a doubly linked list to maintain usage order (most recently used at head, least at tail).",
+                "On get(), move the accessed node to the head.",
+                "On put(), if capacity is reached, remove the tail node and delete from hash map."
+              ],
+              complexity: { time: "O(1) for get and put", space: "O(capacity)" },
+              pitfalls: "Incorrectly updating the prev and next pointers in the doubly linked list.",
+              tip: "Dummy head and tail nodes make adding and removing nodes much easier."
+            }
+          },
+          {
+            id: "copy-list-random-pointer",
+            name: "Copy List with Random Pointer",
+            difficulty: "Medium",
+            companies: ["amazon", "microsoft"],
+            practiceUrl: "https://leetcode.com/problems/copy-list-with-random-pointer/",
+            visualizerUrl: "/visualizer/linkedlist/operations/traversal",
+            theory: {
+              summary: "Construct a deep copy of a linked list where nodes also have a random pointer.",
+              steps: [
+                "Iterate the list to create a copy of each node, interleaving them with the originals.",
+                "Iterate again to assign the random pointers of the copied nodes.",
+                "Iterate a third time to separate the original and copied lists."
+              ],
+              complexity: { time: "O(N)", space: "O(1)" },
+              pitfalls: "Modifying the original list permanently without restoring it.",
+              tip: "Interleaving the copied nodes saves O(N) space that a hash map would otherwise consume."
+            }
+          },
+          {
+            id: "add-two-numbers",
+            name: "Add Two Numbers (LL)",
+            difficulty: "Medium",
+            companies: ["amazon", "google"],
+            practiceUrl: "https://leetcode.com/problems/add-two-numbers/",
+            visualizerUrl: "/visualizer/linkedlist/operations/traversal",
+            theory: {
+              summary: "Add two numbers represented by linked lists (digits stored in reverse order).",
+              steps: [
+                "Initialize a dummy head for the result list and a carry variable to 0.",
+                "Traverse both lists, summing the values along with the carry.",
+                "Create a new node with the sum % 10, and update carry to sum / 10.",
+                "If carry remains after traversal, append a new node with its value."
+              ],
+              complexity: { time: "O(max(N,M))", space: "O(max(N,M))" },
+              pitfalls: "Forgetting to add the final carry if it's non-zero at the end.",
+              tip: "Use a dummy head to easily return the result list."
+            }
+          },
+          {
+            id: "sort-list",
+            name: "Sort List (Merge Sort on LL)",
+            difficulty: "Medium",
+            companies: ["google", "microsoft"],
+            practiceUrl: "https://leetcode.com/problems/sort-list/",
+            visualizerUrl: "/visualizer/linkedlist/operations/merge",
+            theory: {
+              summary: "Sort a linked list in O(n log n) time and O(1) memory (using bottom-up merge sort).",
+              steps: [
+                "Find the middle of the list using slow and fast pointers.",
+                "Recursively sort the left and right halves.",
+                "Merge the two sorted halves back together."
+              ],
+              complexity: { time: "O(N log N)", space: "O(1) for bottom-up, O(log N) for top-down" },
+              pitfalls: "Failing to break the link between the two halves before recursion.",
+              tip: "Merge sort is the standard algorithm for sorting linked lists because it requires no random access."
+            }
+          },
+          {
+            id: "reverse-list",
+            name: "Reverse Linked List",
+            difficulty: "Easy",
+            companies: ["amazon", "microsoft", "google", "adobe", "apple", "meta", "uber", "swiggy", "zomato"],
+            practiceUrl: "https://leetcode.com/problems/reverse-linked-list/",
+            visualizerUrl: "/visualizer/linkedlist/operations/reverse",
+            theory: {
+              summary: "Reverse the link directions in a singly linked list in-place so that the head becomes the tail.",
+              steps: [
+                "Initialize three pointers: prev = NULL, curr = head, next = NULL.",
+                "Iterate through the list while curr is not NULL.",
+                "Store the next node: next = curr.next.",
+                "Reverse curr's pointer to face backward: curr.next = prev.",
+                "Advance pointers: prev = curr, curr = next.",
+                "After the loop, update head = prev and return it."
+              ],
+              complexity: { time: "O(N)", space: "O(1)" },
+              pitfalls: "Losing reference to the rest of the list when reversing curr.next if you fail to store next first.",
+              tip: "Pointer manipulation is best checked by physically drawing nodes and links on scratch paper."
+            }
+          },
+          {
+            id: "merge-lists",
+            name: "Merge Two Sorted Lists",
+            difficulty: "Easy",
+            companies: ["amazon", "microsoft", "google", "meta", "adobe", "flipkart", "swiggy"],
+            practiceUrl: "https://leetcode.com/problems/merge-two-sorted-lists/",
+            visualizerUrl: "/visualizer/linkedlist/operations/merge",
+            theory: {
+              summary: "Combine two pre-sorted linked lists into a single sorted list by splicing their nodes.",
+              steps: [
+                "Create a dummy header node to start the merged list.",
+                "Maintain a tail pointer pointing to the last node of the merged list.",
+                "Compare elements at head of list1 and list2.",
+                "Attach the smaller node to tail.next.",
+                "Advance the pointer of the list that donated the node.",
+                "Advance tail.",
+                "If either list empties, attach the remainder of the other list directly."
+              ],
+              complexity: { time: "O(N + M)", space: "O(1)" },
+              pitfalls: "Failing to handle empty lists as inputs or forgetting to advance list pointers, which creates infinite loops.",
+              tip: "Using a dummy head node completely bypasses complex null pointer checks during initialization."
+            }
+          },
+        ]
+      },
+      {
+        title: "Advanced",
+        items: [
+          {
+            id: "merge-k-sorted-lists",
+            name: "Merge K Sorted Lists",
+            difficulty: "Hard",
+            companies: ["google", "amazon"],
+            practiceUrl: "https://leetcode.com/problems/merge-k-sorted-lists/",
+            visualizerUrl: "/visualizer/linkedlist/operations/merge",
+            theory: {
+              summary: "Merge an array of k sorted linked lists into one sorted linked list.",
+              steps: [
+                "Use a min-heap (priority queue) to keep track of the smallest current node among the k lists.",
+                "Extract the minimum node, append it to the result list, and push its next node into the heap.",
+                "Alternatively, repeatedly merge lists in pairs (Divide and Conquer)."
+              ],
+              complexity: { time: "O(N log K)", space: "O(K) for heap" },
+              pitfalls: "Pushing null nodes into the priority queue, causing crashes.",
+              tip: "Divide and Conquer merges pairs of lists until only one remains, achieving the same time complexity without a heap."
+            }
+          },
+          {
+            id: "list-cycle",
+            name: "Linked List Cycle Detection",
+            difficulty: "Easy",
+            companies: ["amazon", "microsoft", "google", "meta", "apple", "atlassian", "swiggy", "zomato"],
+            practiceUrl: "https://leetcode.com/problems/linked-list-cycle/",
+            visualizerUrl: "/visualizer/linkedlist/operations/search",
+            theory: {
+              summary: "Detect if a linked list contains a loop or cycle using Floyd's Tortoise and Hare pointer algorithm.",
+              steps: [
+                "Initialize two pointers: slow = head, fast = head.",
+                "Iterate through the list while fast and fast.next are not NULL.",
+                "Advance slow by 1 node: slow = slow.next.",
+                "Advance fast by 2 nodes: fast = fast.next.next.",
+                "If slow and fast meet, a cycle is present. Return true.",
+                "If loop terminates, no cycle exists. Return false."
+              ],
+              complexity: { time: "O(N)", space: "O(1)" },
+              pitfalls: "Accessing fast.next.next when fast.next is NULL, causing a null pointer exception.",
+              tip: "Floyd's algorithm works in constant space O(1) compared to O(N) auxiliary space hashing lookups."
+            }
+          }
+        ]
+      },
+
+    ]
+  },
+  {
+    title: "Stack & Queue",
+    slug: "stack-queue",
+    desc: "LIFO and FIFO collections. Master expression evaluation, min stacks, and deque designs.",
+    subsections: [
+      {
+        title: "Beginner",
+        items: [
+          {
+            id: "push-pop",
+            name: "Stack Push & Pop",
+            difficulty: "Easy",
+            companies: ["amazon", "microsoft", "google", "razorpay", "phonepe"],
+            practiceUrl: "https://leetcode.com/problems/min-stack/",
+            visualizerUrl: "/visualizer/stack/push-pop",
+            theory: {
+              summary: "Fundamental LIFO stack operations: Push inserts elements at the top, and Pop retrieves/removes the top element.",
+              steps: [
+                "Push: Check if stack is full (overflow). Increment top pointer and insert element.",
+                "Pop: Check if stack is empty (underflow). Retrieve element at top, decrement top pointer, and return element."
+              ],
+              complexity: { time: "O(1)", space: "O(1)" },
+              pitfalls: "Invoking pop() on an empty stack (underflow) or pushing to a fixed-size stack when full (overflow).",
+              tip: "In interviews, stacks are incredibly useful for balancing symbols, parsing expressions, and managing backtracking states."
+            }
+          },
+          {
+            id: "enqueue-dequeue",
+            name: "Queue Enqueue & Dequeue",
+            difficulty: "Easy",
+            companies: ["amazon", "microsoft", "infosys", "wipro"],
+            practiceUrl: "https://leetcode.com/problems/implement-queue-using-stacks/",
+            visualizerUrl: "/visualizer/queue/operations/enqueue-dequeue",
+            theory: {
+              summary: "Fundamental FIFO queue operations: Enqueue inserts at the rear, and Dequeue removes from the front.",
+              steps: [
+                "Enqueue: Increment rear pointer and insert item at the rear index.",
+                "Dequeue: Retrieve item from the front index and increment front pointer to delete it."
+              ],
+              complexity: { time: "O(1)", space: "O(1)" },
+              pitfalls: "Index shifts in flat array queues leading to 'false overflow' where rear index hits end of array but empty space exists at front.",
+              tip: "Use Circular Queues or dynamic Linked List nodes to prevent memory wastage in standard arrays."
+            }
+          }
+        ]
+      },
+      {
+        title: "Intermediate",
+        items: [
+          {
+            id: "postfix-eval",
+            name: "Evaluate Reverse Polish Notation",
+            difficulty: "Medium",
+            companies: ["google", "amazon", "microsoft", "netflix", "uber"],
+            practiceUrl: "https://leetcode.com/problems/evaluate-reverse-polish-notation/",
+            visualizerUrl: "/visualizer/stack/polish/postfix",
+            theory: {
+              summary: "Using a stack to evaluate arithmetic expressions written in Reverse Polish Notation (RPN), where operators follow operands.",
+              steps: [
+                "Read the expression tokens from left to right.",
+                "If the token is an operand (number), push it onto the stack.",
+                "If the token is an operator (+, -, *, /), pop the top two values off the stack.",
+                "Apply the operator (second popped operator first).",
+                "Push the resulting value back onto the stack.",
+                "After reading all tokens, the final result remains on the stack."
+              ],
+              complexity: { time: "O(N)", space: "O(N)" },
+              pitfalls: "Getting the order of operands reversed during subtraction or division operations (e.g., a / b vs b / a).",
+              tip: "Postfix notation completely eliminates the need for operator precedence rules and parentheses."
+            }
+          }
+        ]
+      },
+      {
+        title: "Advanced",
+        items: [
+          {
+            id: "min-stack",
+            name: "Min Stack",
+            difficulty: "Medium",
+            companies: ["amazon", "microsoft", "google", "meta", "apple", "adobe", "uber", "airbnb", "phonepe", "razorpay"],
+            practiceUrl: "https://leetcode.com/problems/min-stack/",
+            visualizerUrl: "/visualizer/stack/push-pop",
+            theory: {
+              summary: "Design a stack that supports push, pop, top, and retrieving the minimum element in constant O(1) time.",
+              steps: [
+                "Maintain two standard stacks: primary stack and min stack.",
+                "Push: Push the value onto primary stack. Push min(value, minStack.top()) onto min stack.",
+                "Pop: Pop off both primary stack and min stack."
+              ],
+              complexity: { time: "O(1) all operations", space: "O(N)" },
+              pitfalls: "Forgetting to sync push/pop operations between both stacks, leading to desynchronized minimums.",
+              tip: "An elegant alternative is storing the difference values between the element and the current minimum in a single stack."
+            }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    title: "Recursion",
+    slug: "recursion",
+    desc: "Understand base cases, recurrence states, call stack memory, and backtrack decision trees.",
+    subsections: [
+      {
+        title: "Beginner",
+        items: [
+          {
+            id: "basic-recursion",
+            name: "Fibonacci Number",
+            difficulty: "Easy",
+            companies: ["google", "amazon", "microsoft", "apple", "tcs", "accenture"],
+            practiceUrl: "https://leetcode.com/problems/fibonacci-number/",
+            visualizerUrl: "/visualizer/recursion/basic-recursion",
+            theory: {
+              summary: "Find the N-th Fibonacci number recursively using standard base cases.",
+              steps: [
+                "Define base cases: F(0) = 0, F(1) = 1.",
+                "Define recurrence: F(N) = F(N-1) + F(N-2).",
+                "Return recursively calculated values."
+              ],
+              complexity: { time: "O(2^N) naive recursion", space: "O(N) recursion stack" },
+              pitfalls: "Failing to optimize redundancy, leading to quadratic function frame load speeds.",
+              tip: "Utilize memoization or linear loops to reduce Fibonacci execution checks from O(2^N) down to O(N)."
+            }
+          }
+        ]
+      },
+      {
+        title: "Intermediate",
+        items: [
+          {
+            id: "recursive-binary-search",
+            name: "Recursive Binary Search",
+            difficulty: "Easy",
+            companies: ["google", "amazon", "qualcomm", "intel", "amd"],
+            practiceUrl: "https://leetcode.com/problems/binary-search/",
+            visualizerUrl: "/visualizer/recursion/binary-search",
+            theory: {
+              summary: "Search a sorted array by evaluating the mid index recursively, passing mid pointers in function arguments.",
+              steps: [
+                "Base case: If low pointer > high pointer, return -1.",
+                "Calculate mid index.",
+                "If array[mid] == target, return mid.",
+                "If array[mid] < target, recurse on right half: search(mid + 1, high).",
+                "If array[mid] > target, recurse on left half: search(low, mid - 1)."
+              ],
+              complexity: { time: "O(log N)", space: "O(log N) stack frames" },
+              pitfalls: "Failing to pass or return the results of sub-calls recursively back up to the caller.",
+              tip: "Recursive binary search is elegant, but iterative binary search is more space-efficient (O(1) auxiliary space)."
+            }
+          },
+          {
+            id: "tower-of-hanoi",
+            name: "Tower of Hanoi",
+            difficulty: "Medium",
+            companies: ["amazon", "microsoft", "google", "adobe", "oracle"],
+            practiceUrl: "https://www.geeksforgeeks.org/problems/tower-of-hanoi-1587115621/1",
+            visualizerUrl: "/visualizer/recursion/tower-of-hanoi",
+            theory: {
+              summary: "A classic mathematical puzzle where you must move N disks from a source peg to a destination peg using an auxiliary peg, following rules that no larger disk can be placed on top of a smaller one.",
+              steps: [
+                "Move top N-1 disks from Source to Auxiliary peg recursively.",
+                "Move the remaining largest N-th disk from Source to Destination peg directly.",
+                "Move the N-1 disks from Auxiliary to Destination peg recursively."
+              ],
+              complexity: { time: "O(2^N)", space: "O(N) stack frames" },
+              pitfalls: "Forgetting that the number of moves grows exponentially as 2^N - 1, which causes time limit exceeded for larger N.",
+              tip: "The recurrence relation is T(N) = 2T(N-1) + 1. Drawing the recursion tree helps visualize how the total moves double with each added disk."
+            }
+          },
+          {
+            id:"subnets",
+            name:"Subnets/PowerSet",
+            difficulty:"Medium",
+            companies:["amazon","microsoft","google","facebook"],
+            practiceUrl:"https://leetcode.com/problems/subsets/",
+            visualizerUrl:"/visualizer/recursion/subsets",
+            theory:{
+              summary:" Generate all posible subnets (the power set) of a given element.or exclude it.",
+              steps:[
+                "Start with an empty subnet and index 0.",
+                "At each index, make two recursive choices: include the current element, exclude it.",
+                "Move to the next index after each choice.",
+                "Base case: when index reaches the end of the array, add the current subnet to the result.",
+                "Backtrack by removing the last added element before trying the next choice."
+              ],
+              comlexity: { time: "0(2^N)", space:"0(N) recursion stack"},
+              pitfalls: "Forgetting to backtrack (remove the element) after the 'include' branch, which causes wrong subnets to carry over into later paths.",
+              tip:" This 'include or exclude' patter is the foundation for many backtracking problem like combination sum and permutation = master this first!"
+            }
+
+          }
+        ]
+      },
+      {
+        title: "Advanced",
+        items: [
+          {
+            id: "backtracking",
+            name: "N-Queens",
+            difficulty: "Hard",
+            companies: ["amazon", "google", "microsoft", "adobe", "meta", "airbnb", "atlassian", "swiggy", "zomato"],
+            practiceUrl: "https://leetcode.com/problems/n-queens/",
+            visualizerUrl: "/visualizer/recursion/backtracking",
+            theory: {
+              summary: "Place N chess queens on an N×N chessboard so that no two queens threaten each other using recursive backtracking.",
+              steps: [
+                "Start in the leftmost column.",
+                "If all queens are placed, return true.",
+                "Try all rows in the current column.",
+                "For each row, if placement is safe, mark row/col and place queen.",
+                "Recursively call placement on the next column.",
+                "If sub-call fails, remove queen (backtrack) and try next row."
+              ],
+              complexity: { time: "O(N!)", space: "O(N)" },
+              pitfalls: "Failing to reset safe arrays or coordinates after returning from sub-calls, poisoning adjacent search branches.",
+              tip: "Use column/row/diagonal boolean sets to check placement safety in constant O(1) time."
+            }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    title: "Tree",
+    slug: "tree",
+    desc: "Hierarchical parent-child node structures. BST operations, balanced traversals, and algorithms.",
+    subsections: [
+      {
+        title: "Beginner",
+        items: [
+          {
+            id: "inorder-traversal",
+            name: "Binary Tree Inorder Traversal",
+            difficulty: "Easy",
+            companies: ["amazon", "microsoft", "google", "adobe", "flipkart", "meesho"],
+            practiceUrl: "https://leetcode.com/problems/binary-tree-inorder-traversal/",
+            visualizerUrl: "/visualizer/tree/traversing/in-order",
+            theory: {
+              summary: "A tree traversal method that visits nodes in the order: Left Subtree, Root, Right Subtree.",
+              steps: [
+                "Recursively traverse the left subtree.",
+                "Visit/process the root node.",
+                "Recursively traverse the right subtree."
+              ],
+              complexity: { time: "O(N)", space: "O(H) recursion depth" },
+              pitfalls: "Writing recursion without checking if the current node is NULL first.",
+              tip: "In a Binary Search Tree (BST), In-order traversal always visits nodes in ascending, sorted order."
+            }
+          }
+        ]
+      },
+      {
+        title: "Intermediate",
+        items: [
+          {
+            id: "lca-tree",
+            name: "Lowest Common Ancestor",
+            difficulty: "Medium",
+            companies: ["amazon", "microsoft", "meta", "google", "apple", "adobe", "atlassian", "swiggy", "uber"],
+            practiceUrl: "https://leetcode.com/problems/lowest-common-ancestor-of-a-binary-tree/",
+            visualizerUrl: "/visualizer/tree/algorithms/lca",
+            theory: {
+              summary: "Find the deepest node in a tree that is a shared ancestor of two target nodes, p and q.",
+              steps: [
+                "If current node is NULL, return NULL.",
+                "If current node matches p or q, return current.",
+                "Recursively call LCA on left and right subtrees.",
+                "If both left and right return non-NULL values, current is the LCA.",
+                "If only one subtree returns a non-NULL value, return that value up."
+              ],
+              complexity: { time: "O(N)", space: "O(H)" },
+              pitfalls: "Confusing LCA conditions for binary trees vs binary search trees (BSTs).",
+              tip: "LCA is highly tested in advanced coding rounds. Practice both recursive and iterative approaches."
+            }
+          }
+        ]
+      },
+      {
+        title: "Advanced",
+        items: [
+          {
+            id: "max-depth",
+            name: "Maximum Depth of Binary Tree",
+            difficulty: "Easy",
+            companies: ["amazon", "google", "microsoft", "meta", "apple", "swiggy", "zomato", "phonepe"],
+            practiceUrl: "https://leetcode.com/problems/maximum-depth-of-binary-tree/",
+            visualizerUrl: "/visualizer/tree/binaryTree/properties",
+            theory: {
+              summary: "Find the number of nodes along the longest path from the root node down to the farthest leaf node.",
+              steps: [
+                "Base case: If current node is NULL, return 0.",
+                "Recursively compute depth of left subtree.",
+                "Recursively compute depth of right subtree.",
+                "Return max(leftDepth, rightDepth) + 1."
+              ],
+              complexity: { time: "O(N)", space: "O(H)" },
+              pitfalls: "Forgetting to add 1 to the final return value to account for the current root node.",
+              tip: "Maximum depth is the identical calculation as height of a tree node."
+            }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    title: "Graph",
+    slug: "graph",
+    desc: "Network vertices and edges. Master graph traversals, shortest path calculations, and topological sorting.",
+    subsections: [
+      {
+        title: "Beginner",
+        items: [
+          {
+            id: "bfs-graph",
+            name: "BFS Traversal",
+            difficulty: "Medium",
+            companies: ["amazon", "meta", "google", "microsoft", "uber", "flipkart", "swiggy", "zomato"],
+            practiceUrl: "https://leetcode.com/problems/clone-graph/",
+            visualizerUrl: "/visualizer/graph/bfs",
+            theory: {
+              summary: "Explore graph vertices level-by-level, visiting all immediate neighbors before expanding.",
+              steps: [
+                "Create an empty FIFO Queue and a 'visited' set.",
+                "Enqueue the starting node and add it to 'visited'.",
+                "While queue is not empty, dequeue current node and process it.",
+                "For each unvisited neighbor of current, mark it visited and enqueue it."
+              ],
+              complexity: { time: "O(V + E)", space: "O(V)" },
+              pitfalls: "Forgetting to mark nodes visited immediately on enqueue, causing duplicate node processing.",
+              tip: "BFS always identifies shortest paths in unweighted networks."
+            }
+          }
+        ]
+      },
+      {
+        title: "Intermediate",
+        items: [
+          {
+            id: "dfs-graph",
+            name: "DFS Traversal",
+            difficulty: "Medium",
+            companies: ["amazon", "meta", "google", "microsoft", "uber", "flipkart", "swiggy", "zomato"],
+            practiceUrl: "https://leetcode.com/problems/clone-graph/",
+            visualizerUrl: "/visualizer/graph/dfs",
+            theory: {
+              summary: "Explore graph paths as deep as possible along each branch before backtracking.",
+              steps: [
+                "Define a recursive DFS function taking node and visited set.",
+                "Mark current node as visited and process it.",
+                "For each neighbor of current, if unvisited, recursively invoke DFS."
+              ],
+              complexity: { time: "O(V + E)", space: "O(V) call stack frames" },
+              pitfalls: "Failing to pass the visited set, resulting in infinite recursion loops in cyclic graphs.",
+              tip: "DFS is excellent for pathfinding, cycles detection, and topological sorting."
+            }
+          }
+        ]
+      },
+      {
+        title: "Advanced",
+        items: [
+          {
+            id: "dijkstra-graph",
+            name: "Dijkstra's Algorithm",
+            difficulty: "Medium",
+            companies: ["google", "amazon", "microsoft", "uber", "airbnb", "swiggy", "zomato"],
+            practiceUrl: "https://leetcode.com/problems/network-delay-time/",
+            visualizerUrl: "/visualizer/graph/dijkstra",
+            theory: {
+              summary: "A greedy algorithm that finds the shortest path from a single source node to all other nodes in a weighted graph.",
+              steps: [
+                "Initialize distance array with Infinity, source distance = 0.",
+                "Create a min-priority queue storing [node, distance].",
+                "Insert [source, 0] into priority queue.",
+                "While priority queue is not empty, pop node with smallest distance, u.",
+                "For each weighted neighbor v of u, check if dist[u] + weight < dist[v].",
+                "If true (relaxation), update dist[v] = dist[u] + weight and push [v, dist[v]] to priority queue."
+              ],
+              complexity: { time: "O((V + E) log V)", space: "O(V)" },
+              pitfalls: "Attempting to run Dijkstra on a graph with negative edge weights.",
+              tip: "Use the Bellman-Ford algorithm if the graph contains negative weights."
+            }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    title: "Dynamic Programming",
+    slug: "dp",
+    desc: "Optimize recursive decisions by caching subproblems (memoization) or solving bottom-up (tabulation).",
+    subsections: [
+      {
+        title: "Beginner",
+        items: [
+          {
+            id: "climbing-stairs",
+            name: "Climbing Stairs",
+            difficulty: "Easy",
+            companies: ["google", "microsoft", "amazon", "adobe", "apple", "flipkart", "meesho", "phonepe", "razorpay"],
+            practiceUrl: "https://leetcode.com/problems/climbing-stairs/",
+            visualizerUrl: null,
+            theory: {
+              summary: "Calculate how many distinct ways you can climb N stairs when you can take either 1 or 2 steps at a time.",
+              steps: [
+                "Identify subproblem: To reach step N, you must come from N-1 or N-2.",
+                "Recurrence relation: ways(N) = ways(N-1) + ways(N-2).",
+                "Initialize base states: ways(1) = 1, ways(2) = 2.",
+                "Iteratively build states bottom-up."
+              ],
+              complexity: { time: "O(N)", space: "O(1) with pointer storage optimizations" },
+              pitfalls: "Using naive recursion without caching, causing O(2^N) exponential timeouts.",
+              tip: "Climbing Stairs is mathematically equivalent to the Fibonacci sequence!"
+            }
+          }
+        ]
+      },
+      {
+        title: "Intermediate",
+        items: [
+          {
+            id: "coin-change",
+            name: "Coin Change",
+            difficulty: "Medium",
+            companies: ["google", "microsoft", "amazon", "adobe", "netflix", "uber", "airbnb", "atlassian", "salesforce", "flipkart"],
+            practiceUrl: "https://leetcode.com/problems/coin-change/",
+            visualizerUrl: null,
+            theory: {
+              summary: "Find the minimum number of coins needed to sum to a target amount using an infinite supply of coin denominations.",
+              steps: [
+                "Initialize DP array size (amount + 1) with Infinity, DP[0] = 0.",
+                "For each amount i from 1 to target, try all coins.",
+                "If coin <= i, DP[i] = min(DP[i], DP[i - coin] + 1)."
+              ],
+              complexity: { time: "O(amount * number of coins)", space: "O(amount)" },
+              pitfalls: "Failing to check if amount can be reached (returning -1 instead of Infinity).",
+              tip: "This is a classic variation of the Knapsack optimization problem."
+            }
+          }
+        ]
+      },
+      {
+        title: "Advanced",
+        items: [
+          {
+            id: "lcs-dp",
+            name: "Longest Common Subsequence",
+            difficulty: "Medium",
+            companies: ["google", "microsoft", "amazon", "meta", "adobe", "apple", "qualcomm", "nvidia"],
+            practiceUrl: "https://leetcode.com/problems/longest-common-subsequence/",
+            visualizerUrl: null,
+            theory: {
+              summary: "Find the length of the longest subsequence common to two text strings, recursively comparing matching characters.",
+              steps: [
+                "Create a 2D grid DP of dimensions (len1+1) × (len2+1) initialized with 0.",
+                "If characters match: DP[i][j] = DP[i-1][j-1] + 1.",
+                "If mismatch: DP[i][j] = max(DP[i-1][j], DP[i][j-1])."
+              ],
+              complexity: { time: "O(N * M)", space: "O(N * M)" },
+              pitfalls: "Miscounting index bounds (always use 1-based indexing in DP grid for simple empty string edge cases).",
+              tip: "LCS is the algorithmic foundation for file comparison tools (like `git diff`) and DNA alignments."
+            }
+          }
+        ]
+      }
+    ]
+  }
+];
diff --git a/src/lib/profileUtils.js b/src/lib/profileUtils.js
new file mode 100644
index 000000000..fb02850d9
--- /dev/null
+++ b/src/lib/profileUtils.js
@@ -0,0 +1,160 @@
+export const AVATAR_BUCKET = "avatars";
+export const MAX_AVATAR_FILE_SIZE = 2 * 1024 * 1024;
+export const MAX_AVATAR_URL_LENGTH = 512;
+export const MAX_PROFILE_URL_LENGTH = 512;
+export const MAX_BIO_LENGTH = 300;
+
+export const PROFILE_URL_FIELDS = ["resume_link", "github_profile", "linkedin_profile"];
+
+export const PRESET_PROJECT_GRADIENTS = [
+  "bg-[linear-gradient(135deg,#190f4f,#25116d_45%,#5338f2)]",
+  "bg-[linear-gradient(135deg,#064e3b,#0f172a)]",
+  "bg-[linear-gradient(135deg,#312e81,#111827)]",
+  "bg-[linear-gradient(135deg,#7c2d12,#1c1917)]",
+  "bg-[linear-gradient(135deg,#134e4a,#0f172a)]",
+  "bg-[linear-gradient(135deg,#1e1b4b,#312e81)]",
+];
+
+export const EMPTY_PROJECT = {
+  title: "",
+  subtitle: "",
+  tags: "",
+  url: "",
+  preview: PRESET_PROJECT_GRADIENTS[0],
+};
+
+export const CODING_PLATFORMS = [
+  ["leetcode", "leetcode_username", "LeetCode Username", "leetcode_solved", "Solved"],
+  ["codeforces", "codeforces_username", "Codeforces Handle", "codeforces_rating", "Rating"],
+  ["codechef", "codechef_username", "CodeChef Username", "codechef_stars", "Stars"],
+  ["github", "github_username", "GitHub Username", "github_contributions", "Contributions"],
+];
+
+export const ONBOARDING_OPTIONAL_FIELDS = [
+  ["college", "College / University", "Your college name"],
+  ["branch", "Branch", "Computer Science"],
+  ["location", "Location", "City, Country"],
+  ["github_profile", "GitHub URL", "https://github.com/..."],
+  ["linkedin_profile", "LinkedIn URL", "https://linkedin.com/in/..."],
+  ["resume_link", "Portfolio URL", "https://..."],
+];
+
+export const ONBOARDING_CODING_FIELDS = CODING_PLATFORMS.map(
+  ([, usernameField, usernameLabel]) => [usernameField, usernameLabel.replace(" Username", "").replace(" Handle", ""), "username"],
+);
+
+export const ONBOARDING_REQUIRED_FIELDS = ["name", "skills"];
+
+export const EMPTY_PROFILE_FORM = {
+  name: "",
+  branch: "",
+  college: "",
+  location: "",
+  skills: "",
+  resume_link: "",
+  github_profile: "",
+  linkedin_profile: "",
+  email_notifications: true,
+  avatar_url: "",
+  leetcode_username: "",
+  leetcode_solved: 0,
+  codeforces_username: "",
+  codeforces_rating: 0,
+  codechef_username: "",
+  codechef_stars: 0,
+  github_username: "",
+  github_contributions: 0,
+  projects: [],
+};
+
+export const safeAvatarUrl = (value) => {
+  if (typeof value !== "string") return "";
+  if (value.startsWith("data:")) return "";
+  if (value.length > MAX_AVATAR_URL_LENGTH) return "";
+  return value;
+};
+
+export const safeExternalUrl = (value) => {
+  if (typeof value !== "string" || value.length > MAX_PROFILE_URL_LENGTH) return "";
+  try {
+    const parsed = new URL(value);
+    if (parsed.protocol !== "http:" && parsed.protocol !== "https:") return "";
+    return parsed.toString();
+  } catch {
+    return "";
+  }
+};
+
+export const sanitizeProfileLinks = (data) => {
+  const nextData = { ...data };
+
+  for (const field of PROFILE_URL_FIELDS) {
+    const rawValue = typeof nextData[field] === "string" ? nextData[field].trim() : nextData[field];
+    if (!rawValue) {
+      nextData[field] = "";
+      continue;
+    }
+
+    const safeUrl = safeExternalUrl(rawValue);
+    if (!safeUrl) {
+      return { error: "Please enter valid http or https URLs for profile links." };
+    }
+    nextData[field] = safeUrl;
+  }
+
+  return { data: nextData };
+};
+
+export const buildFormDataFromUser = (user) => {
+  const meta = user?.user_metadata || {};
+  return {
+    name: meta.name || "",
+    branch: meta.branch || "",
+    college: meta.college || "",
+    location: meta.location || meta.address || "",
+    skills: (meta.skills || "").slice(0, MAX_BIO_LENGTH),
+    resume_link: meta.resume_link || "",
+    github_profile: meta.github_profile || "",
+    linkedin_profile: meta.linkedin_profile || "",
+    email_notifications: meta.email_notifications !== false,
+    avatar_url: safeAvatarUrl(meta.avatar_url || meta.picture),
+    leetcode_username: meta.leetcode_username || "",
+    leetcode_solved: meta.leetcode_solved || 0,
+    codeforces_username: meta.codeforces_username || "",
+    codeforces_rating: meta.codeforces_rating || 0,
+    codechef_username: meta.codechef_username || "",
+    codechef_stars: meta.codechef_stars || 0,
+    github_username: meta.github_username || "",
+    github_contributions: meta.github_contributions || 0,
+    projects: Array.isArray(meta.projects) ? meta.projects : [],
+  };
+};
+
+export const normalizeProfilePayload = (data) => ({
+  ...data,
+  leetcode_solved: Number(data.leetcode_solved) || 0,
+  codeforces_rating: Number(data.codeforces_rating) || 0,
+  codechef_stars: Number(data.codechef_stars) || 0,
+  github_contributions: Number(data.github_contributions) || 0,
+  projects: Array.isArray(data.projects) ? data.projects : [],
+});
+
+export const validateProfileForm = (formData, mode = "edit") => {
+  if (mode !== "onboarding") return null;
+
+  for (const field of ONBOARDING_REQUIRED_FIELDS) {
+    if (!formData[field]?.trim()) {
+      return field === "name" ? "Full name is required." : "Bio is required.";
+    }
+  }
+
+  return null;
+};
+
+export const isOnboardingStep1Valid = (formData) =>
+  ONBOARDING_REQUIRED_FIELDS.every((field) => Boolean(formData[field]?.trim()));
+
+export const shouldShowProfileSetup = (user) => {
+  if (!user) return false;
+  return user.user_metadata?.hasSeenProfileSetup !== true;
+};
diff --git a/src/lib/random.js b/src/lib/random.js
new file mode 100644
index 000000000..e7d4292c9
--- /dev/null
+++ b/src/lib/random.js
@@ -0,0 +1,22 @@
+/**
+ * Generates a cryptographically secure random alphanumeric code.
+ * @param {number} length - The length of the generated code.
+ * @returns {string} - The generated secure code.
+ */
+export function generateSecureCode(length = 6) {
+  const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+  const biasLimit = Math.floor((2 ** 32 / charset.length) * charset.length);
+  const array = new Uint32Array(length);
+  let code = '';
+  let filled = 0;
+  while (filled < length) {
+    globalThis.crypto.getRandomValues(array);
+    for (let i = 0; i < array.length && filled < length; i++) {
+      if (array[i] < biasLimit) {
+        code += charset[array[i] % charset.length];
+        filled++;
+      }
+    }
+  }
+  return code;
+}
diff --git a/src/lib/rateLimit/index.js b/src/lib/rateLimit/index.js
new file mode 100644
index 000000000..2ad908fc7
--- /dev/null
+++ b/src/lib/rateLimit/index.js
@@ -0,0 +1,372 @@
+import { Redis } from "@upstash/redis";
+import { jwtVerify, createRemoteJWKSet } from "jose";
+import { getClientIp } from "../getClientIp.js";
+import { createLogger } from "../logger.js";
+
+const log = createLogger("rateLimit");
+
+const RATE_LIMIT_KEY_PREFIX = "rl";
+const MAX_IN_MEMORY_ENTRIES = 10000;
+const MEMORY_SWEEP_INTERVAL_MS = 60000;
+const stores = []; // { store: Map, keyPrefix: string }
+
+let memorySweepTimer = null;
+function startMemorySweeper() {
+  if (memorySweepTimer) return;
+  memorySweepTimer = setInterval(() => {
+    const now = Date.now();
+    for (const entry of stores) {
+      const store = entry.store;
+      let expired = 0;
+      for (const [key, bucket] of store.entries()) {
+        if (bucket.resetAt <= now) {
+          store.delete(key);
+          expired++;
+        }
+      }
+      if (store.size > MAX_IN_MEMORY_ENTRIES) {
+        const toEvict = store.size - MAX_IN_MEMORY_ENTRIES;
+        const iter = store.keys();
+        for (let i = 0; i < toEvict; i++) {
+          const k = iter.next().value;
+          if (k !== undefined) store.delete(k);
+        }
+        log.warn({ evicted: toEvict, storeSize: store.size + toEvict, expired }, "In-memory store exceeded limit; evicted entries.");
+      }
+      if (store.size > MAX_IN_MEMORY_ENTRIES * 0.9) {
+        log.warn({ storeSize: store.size, capacity: MAX_IN_MEMORY_ENTRIES }, "In-memory store near capacity.");
+      }
+    }
+  }, MEMORY_SWEEP_INTERVAL_MS);
+  if (memorySweepTimer.unref) memorySweepTimer.unref();
+}
+
+const REDIS_REQUIRED = process.env.REDIS_REQUIRED === "true";
+
+const redis =
+  process.env.UPSTASH_REDIS_REST_URL && process.env.UPSTASH_REDIS_REST_TOKEN
+    ? Redis.fromEnv()
+    : null;
+
+if (!redis && REDIS_REQUIRED) {
+  log.error("REDIS_REQUIRED is set but Redis connection variables (UPSTASH_REDIS_REST_URL/TOKEN) are missing. Rate limiting will fail requests.");
+}
+
+let isRedisOffline = false;
+let redisOfflineUntil = 0;
+const COOLDOWN_MS = 10000;
+
+function markRedisOffline(err) {
+  if (!isRedisOffline) {
+    isRedisOffline = true;
+    const msg = `Redis connection failed, activating in-memory fallback. Error: ${err.message || err}`;
+    if (REDIS_REQUIRED) {
+      log.error({ err }, `REDIS_REQUIRED=true — rate limiting will now reject requests until Redis recovers. ${msg}`);
+    } else {
+      log.error({ err }, msg);
+    }
+  }
+  redisOfflineUntil = Date.now() + COOLDOWN_MS;
+}
+
+function markRedisOnline() {
+  if (isRedisOffline) {
+    isRedisOffline = false;
+    log.info("Redis connection restored, resuming Redis-based rate limiting.");
+  }
+}
+
+function shouldTryRedis() {
+  if (!redis) return false;
+  if (!isRedisOffline) return true;
+  if (Date.now() >= redisOfflineUntil) {
+    return true;
+  }
+  return false;
+}
+
+// Lazily created and cached so we don't hit Supabase's JWKS endpoint on
+// every single request — createRemoteJWKSet() caches keys internally.
+let cachedJWKS = null;
+function getSupabaseJWKS() {
+  if (!cachedJWKS) {
+    // NOTE: this MUST match the endpoint Supabase actually serves its
+    // JWKS from (see backend/.../SecurityConfig.java#jwtDecoder for the
+    // Java side using the same URL). 
+    const jwksUrl = process.env.NEXT_PUBLIC_SUPABASE_URL + "/auth/v1/.well-known/jwks.json";
+    cachedJWKS = createRemoteJWKSet(new URL(jwksUrl));
+  }
+  return cachedJWKS;
+}
+
+async function resolveIdentityKey(request) {
+  const authHeader = request.headers.get("authorization") ?? "";
+  const token = authHeader.replace(/^Bearer\s+/i, "");
+  if (token) {
+    try {
+      const JWKS = getSupabaseJWKS();
+      const { payload } = await jwtVerify(token, JWKS);
+      if (payload && payload.sub) {
+        return `user:${payload.sub}`;
+      }
+    } catch (err) {
+      // A present-but-invalid/expired token is not the same as "no token
+      // provided" — log it distinctly so a regression here (e.g. a wrong
+      // JWKS URL) is visible instead of silently degrading every limiter
+      // to IP-based keying with no signal anywhere.
+      log.warn({ err }, "JWT verification failed, falling back to IP-based key.");
+    }
+  }
+  const ip = getClientIp(request.headers);
+  return `ip:${ip}`;
+}
+
+export function createRateLimiter(options) {
+  const { maxRequests, windowSeconds, prefix = "" } = options;
+  const store = new Map();
+  const keyPrefix = `${RATE_LIMIT_KEY_PREFIX}:${prefix}:`;
+  stores.push({ store, keyPrefix });
+
+  async function check(key) {
+    const now = Date.now();
+    const windowMs = windowSeconds * 1000;
+    const redisKey = `${keyPrefix}${key}`;
+
+    if (shouldTryRedis()) {
+      try {
+        const uuidPart = typeof globalThis !== "undefined" && globalThis.crypto?.randomUUID
+          ? globalThis.crypto.randomUUID().split("-")[0]
+          : Math.random().toString(36).substring(2, 10);
+        const uniqueMember = `${now}-${uuidPart}`;
+        const result = await redis
+          .pipeline()
+          .zadd(redisKey, { score: now, member: uniqueMember })
+          .zremrangebyscore(redisKey, 0, now - windowMs)
+          .zcard(redisKey)
+          .expire(redisKey, windowSeconds)
+          .exec();
+
+        const count = result[2];
+        if (count > maxRequests) {
+          const oldestArray = await redis.zrange(redisKey, 0, 0);
+          let oldest = now;
+          if (oldestArray?.[0]) {
+            const ts = Number(oldestArray[0].split("-")[0]);
+            if (!isNaN(ts)) oldest = ts;
+          }
+          const retryAfter = Math.ceil((oldest + windowMs - now) / 1000);
+          markRedisOnline();
+          return { allowed: false, remaining: 0, retryAfter: Math.max(1, retryAfter), resetAt: now + retryAfter * 1000 };
+        }
+        markRedisOnline();
+        return { allowed: true, remaining: Math.max(0, maxRequests - count), retryAfter: 0, resetAt: now + windowMs };
+      } catch (err) {
+        markRedisOffline(err);
+      }
+    }
+
+    if (REDIS_REQUIRED) {
+      const msg = `REDIS_REQUIRED=true and Redis is unavailable (offline=${isRedisOffline}, cooldown=${redisOfflineUntil > Date.now() ? Math.ceil((redisOfflineUntil - Date.now()) / 1000) + 's' : 'expired'}).`;
+      log.error({ isRedisOffline, cooldownSecondsLeft: redisOfflineUntil > Date.now() ? Math.ceil((redisOfflineUntil - Date.now()) / 1000) : 0 }, "REDIS_REQUIRED=true and Redis is unavailable.");
+      const retryAfter = 60;
+      return { allowed: false, remaining: 0, retryAfter, resetAt: Date.now() + retryAfter * 1000 };
+    }
+
+    if (process.env.NODE_ENV === "production" && !redis) {
+      log.warn("Redis connection variables (UPSTASH_REDIS_REST_URL/TOKEN) not configured in production. Using in-memory fallback.");
+    }
+
+    startMemorySweeper();
+
+    const isOutage = redis && (isRedisOffline || Date.now() < redisOfflineUntil);
+    const limit = isOutage ? Math.max(1, Math.floor(maxRequests * 0.5)) : maxRequests;
+
+    const bucket = store.get(key);
+    if (!bucket || bucket.resetAt <= now) {
+      const resetAt = now + windowMs;
+      store.set(key, { count: 1, resetAt });
+      return { allowed: true, remaining: limit - 1, retryAfter: 0, resetAt };
+    }
+    if (bucket.count >= limit) {
+      const retryAfter = Math.ceil((bucket.resetAt - now) / 1000);
+      return { allowed: false, remaining: 0, retryAfter: Math.max(1, retryAfter), resetAt: bucket.resetAt };
+    }
+    bucket.count += 1;
+    return { allowed: true, remaining: limit - bucket.count, retryAfter: 0, resetAt: bucket.resetAt };
+  }
+
+  async function checkRequest(request) {
+    const key = await resolveIdentityKey(request);
+    const result = await check(key);
+    if (!result.allowed) {
+      const { NextResponse } = await import("next/server");
+      return NextResponse.json(
+        {
+          error: "Too many requests",
+          message: `Rate limit exceeded. Please wait ${result.retryAfter}s.`,
+          retryAfter: result.retryAfter,
+        },
+        {
+          status: 429,
+          headers: {
+            "Retry-After": String(result.retryAfter),
+            "X-RateLimit-Limit": String(maxRequests),
+            "X-RateLimit-Remaining": "0",
+            "X-RateLimit-Reset": String(Math.floor(Date.now() / 1000) + result.retryAfter),
+          },
+        }
+      );
+    }
+    return null;
+  }
+
+  return { check, checkRequest };
+}
+
+export const authLimiter = createRateLimiter({ maxRequests: 5, windowSeconds: 60, prefix: "auth" });
+export const apiLimiter = createRateLimiter({ maxRequests: 5, windowSeconds: 60, prefix: "api" });
+export const sandboxLimiter = createRateLimiter({ maxRequests: 10, windowSeconds: 60, prefix: "sandbox" });
+export const chatbotLimiter = createRateLimiter({ maxRequests: 10, windowSeconds: 60, prefix: "chatbot" });
+
+export function shouldBypassRateLimit() {
+  return process.env.DISABLE_RATE_LIMIT === "true";
+}
+
+const dynamicLimiters = new Map();
+
+export async function checkRateLimit(key, maxRequests, windowSeconds) {
+  if (shouldBypassRateLimit()) {
+    return { allowed: true, remaining: 999, retryAfter: 0 };
+  }
+  if (maxRequests !== undefined && windowSeconds !== undefined) {
+    const cacheKey = `${maxRequests}:${windowSeconds}`;
+    if (!dynamicLimiters.has(cacheKey)) {
+      dynamicLimiters.set(cacheKey, createRateLimiter({
+        maxRequests,
+        windowSeconds,
+        prefix: `dynamic-${cacheKey}`
+      }));
+    }
+    return dynamicLimiters.get(cacheKey).check(key);
+  }
+  return apiLimiter.check(key);
+}
+
+export async function checkChatbotRateLimit(key) {
+  return chatbotLimiter.check(key);
+}
+
+export async function resetKey(key) {
+  for (const entry of stores) {
+    entry.store.delete(key);
+    if (shouldTryRedis()) {
+      try {
+        await redis.del(`${entry.keyPrefix}${key}`);
+        markRedisOnline();
+      } catch (err) {
+        markRedisOffline(err);
+      }
+    }
+  }
+}
+
+export async function resetAll({ scope = "rate-limit" } = {}) {
+  if (scope !== "rate-limit") {
+    throw new Error("Invalid scope for resetAll");
+  }
+  isRedisOffline = false;
+  redisOfflineUntil = 0;
+  if (shouldTryRedis()) {
+    try {
+      let cursor = 0;
+      const keysToDelete = [];
+      do {
+        const result = await redis.scan(cursor, {
+          match: `${RATE_LIMIT_KEY_PREFIX}:*`,
+          count: 100,
+        });
+        cursor = Number(result[0]);
+        keysToDelete.push(...result[1]);
+      } while (cursor !== 0);
+
+      if (keysToDelete.length > 0) {
+        for (let i = 0; i < keysToDelete.length; i += 100) {
+          await redis.del(...keysToDelete.slice(i, i + 100));
+        }
+      }
+      markRedisOnline();
+    } catch (err) {
+      markRedisOffline(err);
+    }
+  }
+  for (const entry of stores) {
+    entry.store.clear();
+  }
+}
+
+let localSmtpCounter = 0;
+let localSmtpDate = new Date().toISOString().split("T")[0];
+
+const ATOMIC_SMTP_QUOTA_SCRIPT = `
+  local dailyKey = KEYS[1]
+  local maxPerDay = tonumber(ARGV[1])
+  local current = redis.call('GET', dailyKey)
+  if current and tonumber(current) >= maxPerDay then
+    return 0
+  end
+  local newCount = redis.call('INCR', dailyKey)
+  if newCount == 1 then
+    redis.call('EXPIRE', dailyKey, 86400)
+  end
+  return newCount
+`;
+
+export async function checkGlobalSmtpQuota(maxPerDay = 500) {
+  if (!redis) {
+    if (process.env.NODE_ENV === "production") {
+      log.warn("Redis unavailable in production — SMTP quota not enforced across instances.");
+    }
+    const today = new Date().toISOString().split("T")[0];
+    if (localSmtpDate !== today) {
+      localSmtpCounter = 0;
+      localSmtpDate = today;
+    }
+    if (localSmtpCounter >= maxPerDay) {
+      return { allowed: false, remaining: 0 };
+    }
+    localSmtpCounter += 1;
+    const usagePercent = (localSmtpCounter / maxPerDay) * 100;
+    if (usagePercent >= 80) {
+      log.warn({ usagePercent: usagePercent.toFixed(0), used: localSmtpCounter, maxPerDay }, "Daily SMTP quota threshold reached.");
+    }
+    return {
+      allowed: true,
+      remaining: Math.max(0, maxPerDay - localSmtpCounter),
+    };
+  }
+
+  const today = new Date().toISOString().split("T")[0];
+  const dailyKey = `smtp:quota:${today}`;
+
+  try {
+    const result = await redis.eval(ATOMIC_SMTP_QUOTA_SCRIPT, [dailyKey], [maxPerDay]);
+
+    if (result === 0) {
+      return { allowed: false, remaining: 0 };
+    }
+
+    const newCount = Number(result);
+    const usagePercent = (newCount / maxPerDay) * 100;
+    if (usagePercent >= 80) {
+      log.warn({ usagePercent: usagePercent.toFixed(0), used: newCount, maxPerDay }, "Daily SMTP quota threshold reached.");
+    }
+
+    return {
+      allowed: true,
+      remaining: Math.max(0, maxPerDay - newCount),
+    };
+  } catch (err) {
+    log.error({ err }, "SMTP quota Redis error, failing open.");
+    return { allowed: true, remaining: 1, warning: "Redis error, quota not enforced" };
+  }
+}
diff --git a/src/lib/sandbox/errorCodes.js b/src/lib/sandbox/errorCodes.js
new file mode 100644
index 000000000..724a3f1a4
--- /dev/null
+++ b/src/lib/sandbox/errorCodes.js
@@ -0,0 +1,31 @@
+// lib/sandbox/errorCodes.js
+// Single source of truth for execution status strings.
+// Both server (route.js) and client (CodeLabEditor) import from here
+// so the strings never drift apart.
+
+const EXECUTION_STATUS = {
+  SUCCESS: "SUCCESS",
+
+  // User code ran longer than MAX_TIMEOUT_MS
+  TLE: "TLE", // Time Limit Exceeded
+
+  // User code allocated more heap than MAX_MEMORY_MB
+  MLE: "MLE", // Memory Limit Exceeded
+
+  // User code threw a JS runtime error (ReferenceError, TypeError, etc.)
+  RUNTIME_ERROR: "RUNTIME_ERROR",
+
+  // Something went wrong inside the sandbox itself (not user code)
+  INTERNAL_ERROR: "INTERNAL_ERROR",
+};
+
+// Human-readable messages shown in the UI
+const EXECUTION_MESSAGES = {
+  [EXECUTION_STATUS.SUCCESS]: "Ran successfully",
+  [EXECUTION_STATUS.TLE]: "Time Limit Exceeded — your code took longer than 1000 ms",
+  [EXECUTION_STATUS.MLE]: "Memory Limit Exceeded — your code used more than 32 MB",
+  [EXECUTION_STATUS.RUNTIME_ERROR]: "Runtime Error",
+  [EXECUTION_STATUS.INTERNAL_ERROR]: "Internal sandbox error — please try again",
+};
+
+module.exports = { EXECUTION_STATUS, EXECUTION_MESSAGES };
\ No newline at end of file
diff --git a/src/lib/sandbox/executor.js b/src/lib/sandbox/executor.js
new file mode 100644
index 000000000..77ddb3f81
--- /dev/null
+++ b/src/lib/sandbox/executor.js
@@ -0,0 +1,241 @@
+const ivm = require("isolated-vm");
+const pino = require("pino");
+const { EXECUTION_STATUS } = require("./errorCodes");
+const { MAX_TIMEOUT_MS, MAX_MEMORY_MB, MAX_OUTPUT_LENGTH } = require("./sandbox.config");
+
+const log = pino({ level: process.env.LOG_LEVEL ?? (process.env.NODE_ENV === "production" ? "info" : "debug") }).child({ module: "sandbox" });
+
+// Sanitize error messages to prevent information leakage
+function sanitizeError(err) {
+  let message = err.message ?? String(err);
+  
+  // Remove file paths from error messages
+  message = message.replace(/[a-zA-Z]:\\[^\\]*/g, "[path]");
+  message = message.replace(/\/[^\/]*/g, "[path]");
+  
+  // Remove internal implementation details
+  message = message.replace(/vm:\d+:\d+/g, "[internal]");
+  message = message.replace(/internal\/[^)]*/g, "[internal]");
+  message = message.replace(/node:[^)]*/g, "[internal]");
+  message = message.replace(/isolated-vm:[^)]*/g, "[internal]");
+  
+  // Remove absolute paths
+  message = message.replace(/c:\\[^\\]*/gi, "[path]");
+  message = message.replace(/\/usr\/[^)]*/g, "[path]");
+  message = message.replace(/home\/[^)]*/g, "[path]");
+  
+  return message;
+}
+
+// Producer-consumer pool for V8 isolates with proper synchronization
+const MAX_ISOLATES = 4;
+const pool = [];
+const waitQueue = [];
+let isShuttingDown = false;
+let activeIsolateCount = 0;
+
+function createIsolate() {
+  activeIsolateCount++;
+  return new ivm.Isolate({ memoryLimit: MAX_MEMORY_MB });
+}
+
+function disposeIsolate(isolate) {
+  activeIsolateCount--;
+  try { isolate.dispose(); } catch {}
+}
+
+async function acquireIsolate() {
+  if (isShuttingDown) throw new Error("Sandbox is shutting down");
+  if (pool.length > 0) return pool.shift();
+  if (activeIsolateCount < MAX_ISOLATES) return createIsolate();
+  return new Promise((resolve) => waitQueue.push(resolve));
+}
+
+function releaseIsolate(isolate) {
+  if (waitQueue.length > 0) {
+    waitQueue.shift()(isolate);
+  } else {
+    pool.push(isolate);
+  }
+}
+
+async function executeCode(code) {
+  const startTime = Date.now();
+  const uuidPart = typeof globalThis !== "undefined" && globalThis.crypto?.randomUUID
+    ? globalThis.crypto.randomUUID().split("-")[0]
+    : Math.random().toString(36).substring(2, 10);
+  const executionId = `exec_${Date.now()}_${uuidPart}`;
+  let isolate = null;
+  let context = null;
+  let isolateCorrupted = false;
+
+  try {
+    // Audit log: execution started
+    log.info({ executionId, codeLength: code.length, isolation: "isolated-vm" }, "Execution started");
+
+    // Acquire an isolate from the pool
+    isolate = await acquireIsolate();
+
+    // Create a context within the isolate
+    context = await isolate.createContext();
+
+    // Set user code as a global in the context to prevent injection and escaping issues
+    await context.global.set("__userCode__", code);
+
+    const wrappedCode = `
+      (function() {
+        const outputLines = [];
+        const console = {
+          log: (...args) => {
+            outputLines.push(args.map(String).join(" "));
+          },
+          warn: (...args) => {
+            outputLines.push("[warn] " + args.map(String).join(" "));
+          },
+          error: (...args) => {
+            outputLines.push("[error] " + args.map(String).join(" "));
+          },
+          info: (...args) => {
+            outputLines.push("[info] " + args.map(String).join(" "));
+          },
+        };
+        
+        eval(__userCode__);
+        
+        return outputLines.join("\\n");
+      })()
+    `;
+
+    // Compile and run the code
+    const script = await isolate.compileScript(wrappedCode, {
+      filename: "user-code.js",
+    });
+
+    const result = await script.run(context, {
+      timeout: MAX_TIMEOUT_MS,
+    });
+
+    // Get the captured output
+    const rawOutput = result ? result.toString() : "";
+    const output = rawOutput.length > MAX_OUTPUT_LENGTH
+      ? rawOutput.slice(0, MAX_OUTPUT_LENGTH) + "\n… (output truncated)"
+      : rawOutput;
+
+    const executionTime = Date.now() - startTime;
+
+    // Audit log: execution completed successfully
+    log.info({ executionId, status: "SUCCESS", executionTimeMs: executionTime, isolation: "isolated-vm" }, "Execution completed");
+
+    return {
+      status: EXECUTION_STATUS.SUCCESS,
+      output,
+      executionTime,
+      memoryUsed: 0, // isolated-vm doesn't provide memory usage in the same way
+    };
+
+  } catch (err) {
+    const elapsed = Date.now() - startTime;
+    const sanitizedMessage = sanitizeError(err);
+
+    // SECURITY/PERF: only genuine VM-level failures leave the isolate in a
+    // state we can no longer trust. An ordinary throw/ReferenceError/etc.
+    // from user code is caught cleanly by isolated-vm and does NOT corrupt
+    // the isolate 
+    const isTimeout = err.code === "ISOLATED_VM_SCRIPT_TIMEOUT" || err.message?.includes("timed out");
+    const isMemoryLimit = err.code === "ISOLATED_VM_MEMORY_LIMIT_EXCEEDED" || err.message?.includes("memory");
+    isolateCorrupted = isTimeout || isMemoryLimit;
+
+    // Audit log: execution failed
+    log.warn({ executionId, status: err.code ?? "ERROR", executionTimeMs: elapsed, error: sanitizedMessage, isolation: "isolated-vm", isolateCorrupted }, "Execution failed");
+
+    if (isTimeout) {
+      return {
+        status: EXECUTION_STATUS.TLE,
+        output: "",
+        error: `Your code exceeded the ${MAX_TIMEOUT_MS}ms time limit.`,
+        executionTime: elapsed,
+        memoryUsed: 0,
+      };
+    }
+
+    if (isMemoryLimit) {
+      return {
+        status: EXECUTION_STATUS.MLE,
+        output: "",
+        error: `Your code used too much memory (exceeded ${MAX_MEMORY_MB} MB).`,
+        executionTime: elapsed,
+        memoryUsed: 0,
+      };
+    }
+
+    // Ordinary runtime error from user code — the isolate itself is fine
+    // and goes back to the pool (see `finally` below); only the script
+    // execution failed.
+    let errorMessage = sanitizedMessage;
+    if (err.name && err.name !== "Error" && !errorMessage.startsWith(err.name)) {
+      errorMessage = `${err.name}: ${errorMessage}`;
+    }
+    return {
+      status: EXECUTION_STATUS.RUNTIME_ERROR,
+      output: "",
+      error: errorMessage,
+      executionTime: elapsed,
+      memoryUsed: 0,
+    };
+  } finally {
+    // Clean up context
+    if (context) {
+      try {
+        context.release();
+      } catch (e) {
+        // Ignore cleanup errors
+      }
+    }
+    // Dispose corrupted isolates; return healthy ones to pool
+    if (isolate) {
+      if (isolateCorrupted) {
+        try {
+          isolate.dispose();
+        } catch {
+          // Already disposed — don't double-dispose
+        }
+        activeIsolateCount--;
+        releaseIsolate(createIsolate());
+      } else {
+        releaseIsolate(isolate);
+      }
+    }
+  }
+}
+
+// Clean up function for graceful shutdown
+async function cleanup() {
+  isShuttingDown = true;
+  const shutdownError = new Error("Sandbox is shutting down");
+
+  // Reject all waiters
+  waitQueue.splice(0).forEach(reject => {
+    try { reject(shutdownError); } catch {}
+  });
+
+  // Wait for in-flight executions to finish before disposing isolates
+  const waitForDrain = () => new Promise(resolve => {
+    const check = () => {
+      if (activeIsolateCount <= pool.length) {
+        for (const isolate of pool) {
+          try { isolate.dispose(); } catch {}
+        }
+        pool.length = 0;
+        activeIsolateCount = 0;
+        resolve();
+      } else {
+        setTimeout(check, 50);
+      }
+    };
+    check();
+  });
+
+  await waitForDrain();
+}
+
+module.exports = { executeCode, cleanup };
diff --git a/src/lib/sandbox/sandbox.config.js b/src/lib/sandbox/sandbox.config.js
new file mode 100644
index 000000000..d3b7cf924
--- /dev/null
+++ b/src/lib/sandbox/sandbox.config.js
@@ -0,0 +1,22 @@
+// lib/sandbox/sandbox.config.js
+// Central config for all resource limits.
+// Tweak here — nothing else needs changing.
+
+const SANDBOX_CONFIG = {
+  // Hard kill after this many milliseconds (maps to isolated-vm timeout)
+  MAX_TIMEOUT_MS: 1000,
+
+  // V8 isolate heap ceiling in megabytes
+  MAX_MEMORY_MB: 32,
+
+  // Truncate stdout/stderr to this many characters before returning
+  MAX_OUTPUT_LENGTH: 8000,
+
+  // Maximum number of code-run requests per window per identity
+  RATE_LIMIT_MAX_REQUESTS: 10,
+
+  // Sliding-window length in seconds
+  RATE_LIMIT_WINDOW_SEC: 60,
+};
+
+module.exports = SANDBOX_CONFIG;
\ No newline at end of file
diff --git a/src/lib/serverApi.js b/src/lib/serverApi.js
new file mode 100644
index 000000000..aa31d2cd9
--- /dev/null
+++ b/src/lib/serverApi.js
@@ -0,0 +1,97 @@
+import { createClient } from "@supabase/supabase-js";
+import { createServerClient } from "@supabase/ssr";
+import { ApiError, AuthError, ConfigError } from "@/lib/apiErrors";
+
+let supabaseAdminInstance;
+
+export function getSupabaseAdmin() {
+  if (supabaseAdminInstance) return supabaseAdminInstance;
+  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const key = process.env.SUPABASE_SERVICE_KEY;
+  if (!url || !key) throw new ConfigError('Supabase not configured');
+  supabaseAdminInstance = createClient(url, key);
+  return supabaseAdminInstance;
+}
+
+/**
+ * Creates a Supabase server client using the anon key, which respects
+ * Row-Level Security policies defined in the database. Use this for all
+ * user-data API routes instead of getSupabaseAdmin().
+ * Requires a cookie store (from next/headers cookies()) for SSR auth.
+ */
+export function getSupabaseServerClient(cookieStore) {
+  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const anonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+  if (!url || !anonKey) throw new ConfigError('Supabase not configured');
+  return createServerClient(url, anonKey, {
+    cookies: {
+      getAll() {
+        return cookieStore.getAll();
+      },
+      setAll(cookiesToSet) {
+        cookiesToSet.forEach(({ name, value, options }) => {
+          try {
+            cookieStore.set(name, value, {
+              ...options,
+              sameSite: 'strict',
+              secure: process.env.NODE_ENV === 'production',
+            });
+          } catch {
+            // Can happen during GET requests or rendering in Next.js
+          }
+        });
+      },
+    },
+  });
+}
+
+/**
+ * Creates a Supabase server client using the anon key from request cookies.
+ * Alternative for route handlers that don't have access to next/headers cookies().
+ */
+export function getSupabaseRequestClient(request) {
+  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const anonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+  if (!url || !anonKey) throw new ConfigError('Supabase not configured');
+  return createServerClient(url, anonKey, {
+    cookies: {
+      getAll() {
+        return request.cookies.getAll();
+      },
+      setAll(cookiesToSet) {
+        cookiesToSet.forEach(({ name, value, options }) => {
+          request.cookies.set(name, value, {
+            ...options,
+            sameSite: 'lax',
+            secure: process.env.NODE_ENV === 'production',
+          });
+        });
+      },
+    },
+  });
+}
+
+/** Anonymous Supabase client for public reads (no session cookies). */
+export function getSupabaseAnonClient() {
+  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const anonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+  if (!url || !anonKey) throw new ConfigError('Supabase not configured');
+  return createClient(url, anonKey);
+}
+
+export function jsonResponse(data, status = 200, extraHeaders = {}) {
+  return Response.json(data, {
+    status,
+    headers: { 'Content-Type': 'application/json', ...extraHeaders },
+  });
+}
+
+export function errorResponse(error) {
+  const code = error.code || 'INTERNAL_ERROR';
+  const status = error.status || 500;
+  const message = error.message || 'Internal server error';
+  return Response.json(
+    { error: message, code },
+    { status, headers: { 'Content-Type': 'application/json' } },
+  );
+}
diff --git a/src/lib/shared-utils.js b/src/lib/shared-utils.js
new file mode 100644
index 000000000..19a3bd418
--- /dev/null
+++ b/src/lib/shared-utils.js
@@ -0,0 +1,44 @@
+function isValidHttpUrl(value) {
+  try {
+    const parsed = new URL(value);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+function getSupabaseConfig() {
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+  if (!supabaseUrl || !supabaseAnonKey) return null;
+  if (!isValidHttpUrl(supabaseUrl)) return null;
+
+  let finalUrl = String(supabaseUrl).trim();
+  if (finalUrl.startsWith("http://localhost:")) {
+    finalUrl = finalUrl.replace("http://localhost:", "http://127.0.0.1:");
+  }
+
+  const config = {
+    supabaseUrl: finalUrl,
+    supabaseAnonKey: String(supabaseAnonKey).trim(),
+  };
+
+  const serviceKey = process.env.SUPABASE_SERVICE_KEY || process.env.SUPABASE_SERVICE_ROLE_KEY;
+  if (serviceKey) {
+    config.supabaseServiceKey = String(serviceKey).trim();
+  }
+
+  return config;
+}
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+export { isValidHttpUrl, getSupabaseConfig, escapeHtml };
diff --git a/src/lib/supabase.js b/src/lib/supabase.js
new file mode 100644
index 000000000..7bcd8487c
--- /dev/null
+++ b/src/lib/supabase.js
@@ -0,0 +1,85 @@
+import { createBrowserClient } from "@supabase/ssr";
+import { getSupabaseConfig } from "./shared-utils.js";
+
+const SUPABASE_ENV_ERROR =
+  "Missing NEXT_PUBLIC_SUPABASE_URL and/or NEXT_PUBLIC_SUPABASE_ANON_KEY. Copy .env.example to .env.local and add your Supabase project URL and anon key.";
+
+function createMissingQueryBuilder() {
+  const result = {
+    data: null,
+    error: new Error(SUPABASE_ENV_ERROR),
+  };
+
+  const builder = {
+    then(onFulfilled, onRejected) {
+      return Promise.resolve(result).then(onFulfilled, onRejected);
+    },
+    catch(onRejected) {
+      return Promise.resolve(result).catch(onRejected);
+    },
+    finally(onFinally) {
+      return Promise.resolve(result).finally(onFinally);
+    },
+  };
+
+  return new Proxy(builder, {
+    get(target, prop) {
+      if (prop in target) return target[prop];
+      return () => builder;
+    },
+  });
+}
+
+function createMissingAuthClient() {
+  const missing = async () => ({
+    data: null,
+    error: new Error(SUPABASE_ENV_ERROR),
+  });
+
+  return {
+    getUser: async () => ({ data: { user: null }, error: new Error(SUPABASE_ENV_ERROR) }),
+    getSession: async () => ({ data: { session: null }, error: new Error(SUPABASE_ENV_ERROR) }),
+    signOut: missing,
+    signInWithOAuth: missing,
+    signInWithPassword: missing,
+    signUp: missing,
+    onAuthStateChange: () => ({
+      data: {
+        subscription: {
+          unsubscribe() {},
+        },
+      },
+    }),
+  };
+}
+
+function createMissingSupabaseClient() {
+  return {
+    auth: createMissingAuthClient(),
+    from() {
+      return createMissingQueryBuilder();
+    },
+    rpc() {
+      return createMissingQueryBuilder();
+    },
+  };
+}
+
+// Singleton browser client — stores the session in cookies (shared with the
+// server-side createServerClient) instead of localStorage.
+const globalForSupabase = globalThis;
+
+const supabaseConfig = getSupabaseConfig();
+
+export const supabase =
+  globalForSupabase.__algobuddySupabase ||
+  (supabaseConfig
+    ? createBrowserClient(
+        supabaseConfig.supabaseUrl,
+        supabaseConfig.supabaseAnonKey,
+      )
+    : createMissingSupabaseClient());
+
+if (process.env.NODE_ENV !== "production") {
+  globalForSupabase.__algobuddySupabase = supabase;
+}
diff --git a/src/lib/verifyTurnstile.js b/src/lib/verifyTurnstile.js
new file mode 100644
index 000000000..dac314c77
--- /dev/null
+++ b/src/lib/verifyTurnstile.js
@@ -0,0 +1,59 @@
+export function getCaptchaSecret() {
+  const secret = process.env.TURNSTILE_SECRET_KEY;
+  if (!secret || secret === "undefined") {
+    throw new Error('CAPTCHA_CONFIG_MISSING');
+  }
+  return secret;
+}
+
+/**
+ * Shared Cloudflare Turnstile verification helper.
+ *
+ * @param {string} captchaToken
+ * @param {{ ip?: string }} [opts]
+ * @returns {Promise<{ ok: true } | { ok: false, error: string }>}
+ */
+export async function verifyTurnstile(captchaToken, opts = {}) {
+  const secretKey = getCaptchaSecret();
+  console.error('Turnstile config valid:', !!secretKey);
+
+  const token = String(captchaToken || "").trim();
+  if (!token) {
+    return { ok: false, error: "Captcha token missing" };
+  }
+
+  const ip = String(opts.ip || "").trim();
+
+  let response;
+  try {
+    response = await fetch("https://challenges.cloudflare.com/turnstile/v0/siteverify", {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: new URLSearchParams({
+        secret: secretKey,
+        response: token,
+        ...(ip && ip !== "unknown" ? { remoteip: ip } : {}),
+      }),
+    });
+  } catch {
+    return { ok: false, error: "Captcha verification request failed" };
+  }
+
+  if (!response.ok) {
+    return { ok: false, error: "Captcha verification request failed" };
+  }
+
+  const data = await response.json().catch(() => null);
+  
+  console.error('Turnstile verify success:', !!data?.success);
+
+  if (!data?.success) {
+    const errorCodes = data?.["error-codes"] || [];
+    if (errorCodes.includes("timeout-or-duplicate")) {
+      return { ok: false, error: "Captcha token expired or was already used. Please refresh the page." };
+    }
+    return { ok: false, error: "Captcha verification failed. Please try again." };
+  }
+
+  return { ok: true };
+}
diff --git a/src/lib/visualizer/stepRunner.js b/src/lib/visualizer/stepRunner.js
new file mode 100644
index 000000000..e693d9a9e
--- /dev/null
+++ b/src/lib/visualizer/stepRunner.js
@@ -0,0 +1,65 @@
+const ALGORITHMS = new Map();
+
+export function registerAlgorithm(name, fn) {
+  ALGORITHMS.set(name, fn);
+}
+
+export async function* generateSteps(algorithmFn, input) {
+  const queue = [input];
+  while (queue.length > 0) {
+    const state = queue.shift();
+    const nextStates = algorithmFn(state);
+    for (const next of nextStates) {
+      yield next;
+      queue.push(next);
+    }
+  }
+}
+
+export function createStepWorker(algorithmName) {
+  const fn = ALGORITHMS.get(algorithmName);
+  if (!fn) {
+    throw new Error(`Unknown algorithm: "${algorithmName}". Register it with registerAlgorithm() first.`);
+  }
+
+  const fnBody = fn.toString();
+  const workerCode = `
+    const fn = ${fnBody};
+    self.onmessage = function(e) {
+      const { input } = e.data;
+      const steps = [];
+      const queue = [input];
+      while (queue.length > 0) {
+        const state = queue.shift();
+        const nextStates = fn(state);
+        for (const next of nextStates) {
+          steps.push(next);
+          queue.push(next);
+        }
+      }
+      self.postMessage({ steps });
+    };
+  `;
+  return new Worker(URL.createObjectURL(new Blob([workerCode], { type: "application/javascript" })));
+}
+
+export function buildStepRunner(stepGenerator) {
+  return async () => {
+    const steps = [];
+    for await (const step of stepGenerator) {
+      steps.push(step);
+    }
+    return steps;
+  };
+}
+
+export function createSyncStepRunner(generatorFn) {
+  return (input) => {
+    const steps = [];
+    const gen = generatorFn(input);
+    for (const step of gen) {
+      steps.push(step);
+    }
+    return steps;
+  };
+}
diff --git a/src/lib/visualizer/useAnimationEngine.js b/src/lib/visualizer/useAnimationEngine.js
new file mode 100644
index 000000000..a7bf240dc
--- /dev/null
+++ b/src/lib/visualizer/useAnimationEngine.js
@@ -0,0 +1,195 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useNarration } from "@/app/components/ui/NarrationContext";
+
+const DEFAULT_SPEED = 500;
+
+function cloneStep(step) {
+  if (step === null || typeof step !== "object") return step;
+  return JSON.parse(JSON.stringify(step));
+}
+
+export function useAnimationEngine({ steps, onStep, initialSpeed = DEFAULT_SPEED }) {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [speed, setSpeedState] = useState(initialSpeed);
+
+  // Hook must be called at the top level unconditionally
+  const narration = useNarration();
+  
+  const speakRef = useRef(narration?.speak);
+  useEffect(() => {
+    speakRef.current = narration?.speak;
+  }, [narration?.speak]);
+
+  const lastSpokenTextRef = useRef("");
+
+  const rafRef = useRef(null);
+  const lastFrameTime = useRef(0);
+  const onStepRef = useRef(onStep);
+  const isPlayingRef = useRef(false);
+  const isSpeakingRef = useRef(false);
+
+  const speedRef = useRef(initialSpeed);
+
+  const stepsLength = steps?.length ?? 0;
+
+  // Reset playback state when a new animation session (new steps array) is provided.
+  const stepsKeyRef = useRef(steps);
+  useEffect(() => {
+    if (steps !== stepsKeyRef.current) {
+      stepsKeyRef.current = steps;
+      setIsPlaying(false);
+      setCurrentStep(0);
+    }
+  }, [steps]);
+
+  useEffect(() => {
+    onStepRef.current = onStep;
+  }, [onStep]);
+
+  useEffect(() => {
+    isPlayingRef.current = isPlaying;
+  }, [isPlaying]);
+
+  // Stop automatically when the last step is reached.
+  useEffect(() => {
+    if (isPlaying && stepsLength > 0 && currentStep >= stepsLength - 1) {
+      setIsPlaying(false);
+    }
+  }, [isPlaying, currentStep, stepsLength]);
+
+  const setSpeed = useCallback((newSpeed) => {
+    speedRef.current = newSpeed;
+    setSpeedState(newSpeed);
+  }, []);
+
+  const play = useCallback(() => {
+    setCurrentStep((s) => (s >= stepsLength - 1 ? 0 : s));
+    lastFrameTime.current = 0;
+    setIsPlaying(true);
+  }, [stepsLength]);
+
+  const pause = useCallback(() => {
+    setIsPlaying(false);
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+  }, []);
+
+  const reset = useCallback(() => {
+    setIsPlaying(false);
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    setCurrentStep(0);
+    lastFrameTime.current = 0;
+  }, []);
+
+  const stepForward = useCallback(() => {
+    setCurrentStep((s) => Math.min(s + 1, stepsLength - 1));
+  }, [stepsLength]);
+
+  const stepBackward = useCallback(() => {
+    setCurrentStep((s) => Math.max(s - 1, 0));
+  }, []);
+
+  const goToStep = useCallback((step) => {
+    setCurrentStep(Math.min(Math.max(0, step), stepsLength - 1));
+  }, [stepsLength]);
+
+  // Single rAF loop.
+  useEffect(() => {
+    if (!isPlaying || stepsLength === 0) return;
+
+    const animate = (timestamp) => {
+      // If paused or actively speaking narration, keep polling but don't advance timer
+      if (!isPlayingRef.current || isSpeakingRef.current) {
+        if (isPlayingRef.current) {
+          rafRef.current = requestAnimationFrame(animate);
+        }
+        return;
+      }
+
+      if (lastFrameTime.current === 0) {
+        lastFrameTime.current = timestamp;
+      }
+
+      if (timestamp - lastFrameTime.current >= speedRef.current) {
+        setCurrentStep((s) => (s < stepsLength - 1 ? s + 1 : s));
+        lastFrameTime.current = timestamp;
+      }
+
+      if (isPlayingRef.current) {
+        rafRef.current = requestAnimationFrame(animate);
+      }
+    };
+
+    rafRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [isPlaying, stepsLength]);
+
+  // Call onStep with a deep-cloned snapshot to prevent mutation of steps.
+  useEffect(() => {
+    let cancelled = false;
+
+    if (steps && currentStep >= 0 && currentStep < stepsLength) {
+      const stepData = cloneStep(steps[currentStep]);
+      onStepRef.current?.(stepData, currentStep);
+
+      // Trigger narration if available
+      if (speakRef.current && stepData && stepData.stepExplanation) {
+        const text = stepData.stepExplanation;
+        if (text !== lastSpokenTextRef.current) {
+          // Base rate is 1.0 for a standard 500ms delay.
+          let rate = 500 / (speedRef.current || 500);
+          rate = Math.max(0.5, Math.min(rate, 3.0));
+          
+          isSpeakingRef.current = true;
+          speakRef.current(text, rate).then(() => {
+            if (!cancelled) {
+              isSpeakingRef.current = false;
+              lastFrameTime.current = 0; 
+            }
+          });
+          
+          lastSpokenTextRef.current = text;
+        }
+      }
+    }
+
+    return () => {
+      cancelled = true;
+    };
+  }, [currentStep, steps, stepsLength]);
+
+  useEffect(() => {
+    return () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, []);
+
+  return {
+    currentStep,
+    isPlaying,
+    speed,
+    setSpeed,
+    play,
+    pause,
+    reset,
+    stepForward,
+    stepBackward,
+    goToStep,
+  };
+}
\ No newline at end of file
diff --git a/src/lib/visualizerSections.js b/src/lib/visualizerSections.js
new file mode 100644
index 000000000..0324b90cf
--- /dev/null
+++ b/src/lib/visualizerSections.js
@@ -0,0 +1,401 @@
+// Shared data source for all visualizer sections.
+// Used by both /visualizer (grid) and /visualizer/[category] (module view).
+
+export const sections = [
+  {
+    title: "Code Lab",
+    slug: "code-lab",
+    desc: "Write custom code, run safe step-by-step dry runs, and analyze time & space complexity",
+    subsections: [
+      {
+        title: "Tools",
+        items: [
+          {
+            name: "Dry Run Visualizer",
+            path: "/visualizer/dry-run",
+          },
+          {
+            name: "Complexity Analyzer",
+            path: "/visualizer/complexity-analyzer",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Array",
+    slug: "array",
+    desc: "Searching & sorting algorithms on contiguous memory",
+    subsections: [
+      {
+        title: "Searching",
+        items: [
+          { name: "Linear Search", path: "/visualizer/array/linearsearch" },
+          { name: "Binary Search", path: "/visualizer/array/binarysearch" },
+          { name: "Ternary Search", path: "/visualizer/array/ternary-search" },
+          { name: "Jump Search", path: "/visualizer/array/jump-search" },
+          { name: "Fibonacci Search", path: "/visualizer/array/fibonacci-search" },
+          { name: "Exponential Search", path: "/visualizer/array/exponential-search" },
+          { name: "Interpolation Search", path: "/visualizer/array/interpolation-search"},
+        ],
+      },
+      {
+        title: "Sorting",
+        items: [
+          { name: "Bubble Sort", path: "/visualizer/array/bubblesort" },
+          { name: "Selection Sort", path: "/visualizer/array/selectionsort" },
+          { name: "Insertion Sort", path: "/visualizer/array/insertionsort" },
+          { name: "Merge Sort", path: "/visualizer/array/mergesort" },
+          { name: "Quick Sort", path: "/visualizer/array/quicksort" },
+          { name: "Shell Sort", path: "/visualizer/array/shellsort" },
+          { name: "Tim Sort", path: "/visualizer/array/timsort" },
+          { name: "Bucket Sort", path: "/visualizer/array/bucketsort" },
+          { name: "Heap Sort", path: "/visualizer/array/heapsort" },
+          { name: "Radix Sort", path: "/visualizer/array/radixsort"},
+          { name: "Counting Sort", path: "/visualizer/array/countingsort" },
+          { name: "Comparison Mode", path: "/visualizer/array/comparison" },
+        ],
+      },
+      {
+        title: "Interview Patterns",
+        items: [
+          { name: "Sliding Window", path: "/visualizer/array/slidingwindow" },
+          { name: "Two Pointers", path: "/visualizer/array/twopointers" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "String",
+    slug: "string",
+    desc: "Pattern matching, string manipulation, and interview-based string algorithms",
+    subsections: [
+      {
+        title: "Basic Operations",
+        items: [
+          {
+            name: "Reverse String",
+            path: "/visualizer/string/reverse-string",
+          },
+          {
+            name: "Palindrome Check",
+            path: "/visualizer/string/palindrome-check",
+          },
+          {
+            name: "Character Frequency",
+            path: "/visualizer/string/character-frequency",
+          },
+          {
+            name: "Anagram Check",
+            path: "/visualizer/string/anagram-check",
+          },
+          {
+            name: "Longest Common Prefix",
+            path: "/visualizer/string/longest-common-prefix",
+          },
+        ],
+      },
+      {
+        title: "Pattern Matching",
+        items: [
+          {
+            name: "KMP Algorithm",
+            path: "/visualizer/string/kmp-algorithm",
+          },
+          {
+            name: "Rabin-Karp",
+            path: "/visualizer/string/rabin-karp",
+          },
+          {
+            name: "Z Algorithm",
+            path: "/visualizer/string/z-algorithm",
+          },
+        ],
+      },
+      {
+        title: "Interview Problems",
+        items: [
+          {
+            name: "Longest Non-Repeating Substring",
+            path: "/visualizer/string/longest-substring",
+          },
+          {
+            name: "Minimum Window Substring",
+            path: "/visualizer/string/minimum-window-substring",
+          },
+        ],
+      },
+    ],
+  },  
+  {
+    title: "Recursion",
+    slug: "recursion",
+    desc: "Understand stack frames, call stacks, base cases, and tree recursion through animated execution flow",
+    subsections: [
+      {
+        title: "Recursion Topics",
+        items: [
+          { name: "Basic Recursion", path: "/visualizer/recursion/basic-recursion" },
+          { name: "Functional & Parameterized Recursion", path: "/visualizer/recursion/functional-parameterized" },
+          { name: "Multiple Recursive Calls", path: "/visualizer/recursion/multiple-calls" },
+          { name: "Recursion on Subsequences", path: "/visualizer/recursion/subsequences" },
+          { name: "Backtracking", path: "/visualizer/recursion/backtracking" },
+          { name: "Recursion Trees", path: "/visualizer/recursion/trees" },
+          { name: "Call Stack Visualization", path: "/visualizer/recursion/stack" },
+          { name: "Recursive Binary Search", path: "/visualizer/recursion/binary-search" },
+          { name: "Tower of Hanoi", path: "/visualizer/recursion/tower-of-hanoi" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Stack",
+    slug: "stack",
+    desc: "LIFO operations, polish notations & implementations",
+    subsections: [
+      {
+        title: "Operations",
+        items: [
+          { name: "Push & Pop", path: "/visualizer/stack/push-pop" },
+          { name: "Peek", path: "/visualizer/stack/peek" },
+          { name: "Is Empty", path: "/visualizer/stack/isempty" },
+          { name: "Is Full", path: "/visualizer/stack/isfull" },
+        ],
+      },
+      {
+        title: "Polish Notations Evaluation",
+        items: [
+          { name: "Postfix", path: "/visualizer/stack/polish/postfix" },
+          { name: "Prefix", path: "/visualizer/stack/polish/prefix" },
+        ],
+      },
+      {
+        title: "Implementation",
+        items: [
+          { name: "Using Array", path: "/visualizer/stack/implementation/usingArray" },
+          { name: "Using Linked List", path: "/visualizer/stack/implementation/usingLinkedList" },
+        ],
+      },
+      {
+        title: "Monotonic Stack",
+        items: [
+          { name: "Largest Rectangle in Histogram", path: "/visualizer/stack/monotonic/largestrectangle" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Queue",
+    slug: "queue",
+    desc: "FIFO operations, variants & implementations",
+    subsections: [
+      {
+        title: "Operations",
+        items: [
+          { name: "Enqueue & Dequeue", path: "/visualizer/queue/operations/enqueue-dequeue" },
+          { name: "Peek Front", path: "/visualizer/queue/operations/peek-front" },
+          { name: "Is Empty", path: "/visualizer/queue/operations/isempty" },
+          { name: "Is Full", path: "/visualizer/queue/operations/isfull" },
+        ],
+      },
+      {
+        title: "Types",
+        items: [
+          { name: "Single Ended Queue", path: "/visualizer/queue/types/singleEnded" },
+          { name: "Double Ended Queue", path: "/visualizer/queue/types/deque" },
+          { name: "Circular Queue", path: "/visualizer/queue/types/circular" },
+          { name: "Priority Queue", path: "/visualizer/queue/types/priority" },
+        ],
+      },
+      {
+        title: "Implementation",
+        items: [
+          { name: "Using Array", path: "/visualizer/queue/implementation/array" },
+          { name: "Using Linked List", path: "/visualizer/queue/implementation/linkedList" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Linked List",
+    slug: "linked-list",
+    desc: "Singly, doubly, circular — traversal to merge",
+    subsections: [
+      {
+        title: "Types",
+        items: [
+          { name: "Singly Linked List", path: "/visualizer/linkedlist/types/singly" },
+          { name: "Doubly Linked List", path: "/visualizer/linkedlist/types/doubly" },
+          { name: "Circular Linked List", path: "/visualizer/linkedlist/types/circular" },
+        ],
+      },
+      {
+        title: "Operations",
+        items: [
+          { name: "Traversal", path: "/visualizer/linkedlist/operations/traversal" },
+          { name: "Insertion", path: "/visualizer/linkedlist/operations/insertion" },
+          { name: "Deletion", path: "/visualizer/linkedlist/operations/deletion" },
+          { name: "Reverse", path: "/visualizer/linkedlist/operations/reverse" },
+          { name: "Merge", path: "/visualizer/linkedlist/operations/merge" },
+          { name: "Comparison", path: "/visualizer/linkedlist/operations/comparison" },
+          { name: "Sorting", path: "/visualizer/linkedlist/operations/sorting" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Tree",
+    slug: "tree",
+    desc: "BST, AVL, traversals, tries & advanced trees",
+    subsections: [
+      {
+        title: "Binary Tree",
+        items: [
+          { name: "Structure & Properties", path: "/visualizer/tree/binaryTree/properties" },
+          { name: "Types of Binary Trees", path: "/visualizer/tree/binaryTree/types" },
+        ],
+      },
+      {
+        title: "Binary Search Tree",
+        items: [
+          { name: "Insertion", path: "/visualizer/tree/bst/insertion" },
+          { name: "Deletion", path: "/visualizer/tree/bst/deletion" },
+          { name: "Searching", path: "/visualizer/tree/bst/searching" },
+          { name: "In-order Traversal", path: "/visualizer/tree/bst/in-order" },
+          { name: "Pre-order Traversal", path: "/visualizer/tree/bst/pre-order" },
+          { name: "Post-order Traversal", path: "/visualizer/tree/bst/post-order" },
+          { name: "Balancing (AVL)", path: "/visualizer/tree/bst/avl" },
+        ],
+      },
+      {
+        title: "Traversal",
+        items: [
+          { name: "Pre-order", path: "/visualizer/tree/traversing/pre-order" },
+          { name: "In-order", path: "/visualizer/tree/traversing/in-order" },
+          { name: "Post-order", path: "/visualizer/tree/traversing/post-order" },
+          { name: "Level-order (BFS)", path: "/visualizer/tree/traversing/level-order" },
+          { name: "Morris Traversal", path: "/visualizer/tree/traversing/morris" },
+        ],
+      },
+      {
+        title: "Advanced Trees",
+        items: [
+          { name: "Red-Black Trees", path: "/visualizer/tree/advanced/red-black" },
+          { name: "B-Trees", path: "/visualizer/tree/advanced/b-trees" },
+          { name: "AVL Tree Insertion", path: "/visualizer/tree/avl/insertion" },
+          { name: "AVL Tree Deletion", path: "/visualizer/tree/avl/deletion" },
+          { name: "Trie (Prefix Tree)", path: "/visualizer/tree/advanced/trie" },
+          { name: "Segment Trees", path: "/visualizer/tree/advanced/segment" },
+          { name: "2D Segment Trees", path: "/visualizer/tree/advanced/segment-2d" },
+          { name: "Fenwick Trees", path: "/visualizer/tree/advanced/fenwick" },
+        ],
+      },
+      {
+        title: "Algorithms",
+        items: [
+          { name: "Lowest Common Ancestor", path: "/visualizer/tree/algorithms/lca" },
+          { name: "Tree Diameter", path: "/visualizer/tree/algorithms/diameter" },
+          { name: "Tree Isomorphism", path: "/visualizer/tree/algorithms/isomorphism" },
+          { name: "Serialize/Deserialize", path: "/visualizer/tree/algorithms/serialization" },
+        ],
+      },
+      {
+        title: "Applications",
+        items: [
+          { name: "Heap (Min/Max)", path: "/visualizer/tree/heap/min-heap" },
+          { name: "Heap (Max)", path: "/visualizer/tree/heap/max-heap" },
+          { name: "Heap Sort", path: "/visualizer/tree/applications/heapsort" },
+          { name: "Huffman Coding", path: "/visualizer/tree/applications/huffman" },
+          { name: "Decision Trees", path: "/visualizer/tree/applications/decision-trees" },
+          { name: "Syntax Trees", path: "/visualizer/tree/applications/syntax-trees" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "HashMap",
+    slug: "hashmap",
+    desc: "Key-value pairs with hash function and collision handling",
+    subsections: [
+      {
+        title: "Operations",
+        items: [
+          { name: "Insert (put)", path: "/visualizer/hashmap/insert" },
+          { name: "Search (get)", path: "/visualizer/hashmap/search" },
+          { name: "Delete (remove)", path: "/visualizer/hashmap/delete" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Graph",
+    slug: "graph",
+    desc: "BFS, DFS, shortest paths, MST & topological sort",
+    subsections: [
+      {
+        title: "Representation",
+        items: [
+          { name: "Adjacency Matrix", path: "/visualizer/graph/adjacency-matrix" },
+          { name: "Adjacency List", path: "/visualizer/graph/adjacency-list" },
+        ],
+      },
+      {
+        title: "Traversal",
+        items: [
+          { name: "Breadth-First Search (BFS)", path: "/visualizer/graph/bfs" },
+          { name: "Depth-First Search (DFS)", path: "/visualizer/graph/dfs" },
+        ],
+      },
+      {
+        title: "Algorithms",
+        items: [
+          { name: "Dijkstra's Algorithm", path: "/visualizer/graph/dijkstra" },
+          { name: "Floyd-Warshall Algorithm", path: "/visualizer/graph/floyd-warshall" },
+          { name: "Prim's Algorithm", path: "/visualizer/graph/prim" },
+          { name: "Kruskal's Algorithm", path: "/visualizer/graph/kruskal" },
+          { name: "Topological Sort", path: "/visualizer/graph/topological-sort" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Dynamic Programming",
+    slug: "dp",
+    desc: "Visualized matrices for the Knapsack Problem, Longest Common Subsequence, and Coin Change",
+    subsections: [
+      {
+        title: "Algorithms",
+        items: [
+          {
+            name: "0/1 Knapsack Problem",
+            path: "/visualizer/dp/knapsack",
+          },
+          {
+            name: "Longest Common Subsequence",
+            path: "/visualizer/dp/lcs",
+          },
+          {
+            name: "Coin Change",
+            path: "/visualizer/dp/coin-change",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: "AI Algorithms",
+    slug: "ai",
+    desc: "Search algorithms used in Artificial Intelligence, heuristic pathfinding, and game tree decision making",
+    subsections: [
+      {
+        title: "Adversarial Search",
+        items: [
+          { name: "Min Max Algorithm", path: "/visualizer/ai/minmax" },
+          { name: "Alpha Beta Pruning", path: "/visualizer/ai/alpha-beta-pruning" },
+          { name: "A* Search", path: "/visualizer/ai/astar" },
+          { name: "Monte Carlo Tree Search (MCTS)", path: "/visualizer/ai/mcts" },
+        ],
+      },
+    ],
+  },
+];
diff --git a/src/lib/visualizerThemes.js b/src/lib/visualizerThemes.js
new file mode 100644
index 000000000..40e353f72
--- /dev/null
+++ b/src/lib/visualizerThemes.js
@@ -0,0 +1,206 @@
+/**
+ * Centralized Visualizer Themes Configuration
+ * Preserves unique visual identity across light and dark modes
+ * Each data structure has a distinct color palette with dark mode support
+ */
+
+export const VISUALIZER_THEMES = {
+  Array: {
+    name: "Array",
+    color: "#a435f0", // Purple
+    light: {
+      bg: "bg-purple-100",
+      surface: "bg-purple-50",
+      border: "border-purple-200",
+      text: "text-purple-900",
+      accent: "bg-purple-500",
+      iconBg: "bg-purple-100",
+    },
+    dark: {
+      bg: "dark:bg-purple-950/50", // Tinted dark background
+      surface: "dark:bg-purple-950/40",
+      border: "dark:border-purple-500/20",
+      text: "dark:text-purple-100",
+      accent: "dark:bg-purple-600",
+      iconBg: "dark:bg-purple-950/60",
+      shadow: "dark:shadow-purple-950/50",
+    },
+    border: "border-purple-500/20",
+    label: "10 algorithms",
+  },
+  Stack: {
+    name: "Stack",
+    color: "#2563eb", // Blue
+    light: {
+      bg: "bg-blue-100",
+      surface: "bg-blue-50",
+      border: "border-blue-200",
+      text: "text-blue-900",
+      accent: "bg-blue-500",
+      iconBg: "bg-blue-100",
+    },
+    dark: {
+      bg: "dark:bg-blue-950/50",
+      surface: "dark:bg-blue-950/40",
+      border: "dark:border-blue-500/20",
+      text: "dark:text-blue-100",
+      accent: "dark:bg-blue-600",
+      iconBg: "dark:bg-blue-950/60",
+      shadow: "dark:shadow-blue-950/50",
+    },
+    border: "border-blue-500/20",
+    label: "8 algorithms",
+  },
+  Queue: {
+    name: "Queue",
+    color: "#059669", // Green
+    light: {
+      bg: "bg-green-100",
+      surface: "bg-green-50",
+      border: "border-green-200",
+      text: "text-green-900",
+      accent: "bg-green-500",
+      iconBg: "bg-green-100",
+    },
+    dark: {
+      bg: "dark:bg-green-950/50",
+      surface: "dark:bg-green-950/40",
+      border: "dark:border-green-500/20",
+      text: "dark:text-green-100",
+      accent: "dark:bg-green-600",
+      iconBg: "dark:bg-green-950/60",
+      shadow: "dark:shadow-green-950/50",
+    },
+    border: "border-green-500/20",
+    label: "10 algorithms",
+  },
+  "Linked List": {
+    name: "Linked List",
+    color: "#d97706", // Orange
+    light: {
+      bg: "bg-orange-100",
+      surface: "bg-orange-50",
+      border: "border-orange-200",
+      text: "text-orange-900",
+      accent: "bg-orange-500",
+      iconBg: "bg-orange-100",
+    },
+    dark: {
+      bg: "dark:bg-orange-950/50",
+      surface: "dark:bg-orange-950/40",
+      border: "dark:border-orange-500/20",
+      text: "dark:text-orange-100",
+      accent: "dark:bg-orange-600",
+      iconBg: "dark:bg-orange-950/60",
+      shadow: "dark:shadow-orange-950/50",
+    },
+    border: "border-orange-500/20",
+    label: "10 algorithms",
+  },
+  Tree: {
+    name: "Tree",
+    color: "#7c3aed", // Violet
+    light: {
+      bg: "bg-violet-100",
+      surface: "bg-violet-50",
+      border: "border-violet-200",
+      text: "text-violet-900",
+      accent: "bg-violet-500",
+      iconBg: "bg-violet-100",
+    },
+    dark: {
+      bg: "dark:bg-violet-950/50",
+      surface: "dark:bg-violet-950/40",
+      border: "dark:border-violet-500/20",
+      text: "dark:text-violet-100",
+      accent: "dark:bg-violet-600",
+      iconBg: "dark:bg-violet-950/60",
+      shadow: "dark:shadow-violet-950/50",
+    },
+    border: "border-violet-500/20",
+    label: "20 algorithms",
+  },
+  Graph: {
+    name: "Graph",
+    color: "#dc2626", // Red
+    light: {
+      bg: "bg-red-100",
+      surface: "bg-red-50",
+      border: "border-red-200",
+      text: "text-red-900",
+      accent: "bg-red-500",
+      iconBg: "bg-red-100",
+    },
+    dark: {
+      bg: "dark:bg-red-950/50",
+      surface: "dark:bg-red-950/40",
+      border: "dark:border-red-500/20",
+      text: "dark:text-red-100",
+      accent: "dark:bg-red-600",
+      iconBg: "dark:bg-red-950/60",
+      shadow: "dark:shadow-red-950/50",
+    },
+    border: "border-red-500/20",
+    label: "8 algorithms",
+  },
+  "AI Algorithms": {
+    name: "AI Algorithms",
+    color: "#0891b2", // Cyan-600
+    light: {
+      bg: "bg-cyan-100",
+      surface: "bg-cyan-50",
+      border: "border-cyan-200",
+      text: "text-cyan-900",
+      accent: "bg-cyan-500",
+      iconBg: "bg-cyan-100",
+    },
+    dark: {
+      bg: "dark:bg-cyan-950/50",
+      surface: "dark:bg-cyan-950/40",
+      border: "dark:border-cyan-500/20",
+      text: "dark:text-cyan-100",
+      accent: "dark:bg-cyan-600",
+      iconBg: "dark:bg-cyan-950/60",
+      shadow: "dark:shadow-cyan-950/50",
+    },
+    border: "border-cyan-500/20",
+    label: "1 algorithm",
+  },
+};
+
+/**
+ * Helper to get theme by name
+ */
+export const getVisualizerTheme = (name) => {
+  return VISUALIZER_THEMES[name] || VISUALIZER_THEMES.Array;
+};
+
+/**
+ * Helper to merge light and dark theme classes
+ */
+export const getThemeClasses = (themeName, key = "bg") => {
+  const theme = getVisualizerTheme(themeName);
+  const lightClass = theme.light[key] || "";
+  const darkClass = theme.dark[key] || "";
+  return `${lightClass} ${darkClass}`.trim();
+};
+
+/**
+ * Helper to build complete card theme styles
+ */
+export const getCardTheme = (themeName) => {
+  const theme = getVisualizerTheme(themeName);
+  return {
+    color: theme.color,
+    // For backgrounds that need both light and dark
+    bgClasses: `${theme.light.bg} ${theme.dark.bg}`,
+    surfaceClasses: `${theme.light.surface} ${theme.dark.surface}`,
+    borderClasses: `${theme.light.border} ${theme.dark.border}`,
+    textClasses: `${theme.light.text} ${theme.dark.text}`,
+    // For inline styles (when classes don't work)
+    lightBg: theme.light.bg.replace("bg-", ""),
+    darkBgStyle: theme.dark.bg,
+    // Legacy compatibility
+    border: theme.border,
+  };
+};
diff --git a/src/middleware.js b/src/middleware.js
new file mode 100644
index 000000000..146a3c2d1
--- /dev/null
+++ b/src/middleware.js
@@ -0,0 +1,9 @@
+import { proxy as middleware } from "./authProxy";
+
+export { middleware };
+
+export const config = {
+  matcher: [
+    "/((?!_next/static|_next/image|favicon\\.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
+  ],
+};
diff --git a/src/utils/generateLearningReminders.js b/src/utils/generateLearningReminders.js
new file mode 100644
index 000000000..79cd0a6b9
--- /dev/null
+++ b/src/utils/generateLearningReminders.js
@@ -0,0 +1,158 @@
+/**
+ * Produce motivational reminders from dashboard metrics.
+ * The function is intentionally data-driven and returns an array of
+ * reminder objects { id, type, message, severity } derived from inputs.
+ */
+const msPerDay = 1000 * 60 * 60 * 24;
+
+function toDayIndex(val) {
+  const d = new Date(val);
+  if (typeof val === "string") {
+    const match = val.match(/^(\d{4})-(\d{2})-(\d{2})/);
+    if (match) {
+      const [_, y, m, date] = match;
+      return Math.floor(Date.UTC(Number(y), Number(m) - 1, Number(date)) / msPerDay);
+    }
+  }
+  return Math.floor(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()) / msPerDay);
+}
+
+function daysBetween(a, b) {
+  return toDayIndex(b) - toDayIndex(a);
+}
+
+export default function generateLearningReminders({
+  activityDates = [],
+  activityTypes = [],
+  modulesCount = 0,
+  completedModulesCount = 0,
+}) {
+  const reminders = [];
+  const today = new Date();
+
+  const normalizeDateString = (value) => {
+    if (typeof value !== "string") return null;
+    const candidate = value.split("T")[0];
+    return /^\d{4}-\d{2}-\d{2}$/.test(candidate) ? candidate : null;
+  };
+
+  const uniqueDates = Array.from(
+    new Set((activityDates || []).map(normalizeDateString).filter(Boolean))
+  ).sort();
+
+  const lastDate = uniqueDates.length ? new Date(uniqueDates[uniqueDates.length - 1]) : null;
+  const daysSinceLast = lastDate ? daysBetween(lastDate, today) : Infinity;
+
+  // simple current streak approximation (consecutive days ending today or yesterday)
+  let currentStreak = 0;
+  if (uniqueDates.length) {
+    const lastDiff = daysBetween(uniqueDates[uniqueDates.length - 1], today);
+    if (lastDiff <= 1) {
+      let expectedDiff = lastDiff;
+      for (let i = uniqueDates.length - 1; i >= 0; i--) {
+        const d = uniqueDates[i];
+        const diff = daysBetween(d, today);
+        if (diff === expectedDiff) {
+          currentStreak++;
+          expectedDiff++;
+        } else if (diff < expectedDiff) {
+          continue; // Ignore duplicate dates or multiple practices on same day
+        } else {
+          break; // Gap detected
+        }
+      }
+    }
+  }
+
+  // rule: no activity today
+  if (daysSinceLast > 0) {
+    reminders.push({
+      id: "practice_today",
+      type: "encouragement",
+      severity: "medium",
+      message: `🚀 You haven't practiced DSA today — try a short session to keep momentum (last activity ${daysSinceLast === Infinity ? 'ever' : daysSinceLast + ' day' + (daysSinceLast>1?'s':'') + ' ago'}).`,
+    });
+  }
+
+  // rule: streak at risk (if streak exists and last activity wasn't today)
+  if (currentStreak >= 3 && daysSinceLast >= 1) {
+    reminders.push({
+      id: "streak_risk",
+      type: "streak",
+      severity: "high",
+      message: `🔥 Your ${currentStreak}-day streak is at risk — keep it alive with today's practice!`,
+    });
+  }
+
+  // rule: inactivity warning
+  if (daysSinceLast >= 7) {
+    reminders.push({
+      id: "long_inactivity",
+      type: "warning",
+      severity: "high",
+      message: `⏳ It's been ${daysSinceLast} days since your last activity — a quick 20‑minute session will get you back on track.`,
+    });
+  } else if (daysSinceLast >= 3) {
+    reminders.push({
+      id: "mild_inactivity",
+      type: "warning",
+      severity: "medium",
+      message: `📌 You were last active ${daysSinceLast} day${daysSinceLast>1?'s':''} ago — try a short exercise today.`,
+    });
+  }
+
+  // rule: progress nudges
+  if (modulesCount > 0) {
+    const pct = Math.round((completedModulesCount / modulesCount) * 100 || 0);
+    if (pct >= 80 && pct < 100) {
+      reminders.push({
+        id: "near_completion",
+        type: "nudge",
+        severity: "low",
+        message: `🎯 You're ${pct}% through your modules — finish one more to unlock momentum!`,
+      });
+    } else if (pct > 0 && pct < 80) {
+      reminders.push({
+        id: "keep_going",
+        type: "encouragement",
+        severity: "low",
+        message: `🏆 Nice progress — ${completedModulesCount}/${modulesCount} modules done. Keep the pace with a focused topic today.`,
+      });
+    } else if (pct === 100) {
+      reminders.push({
+        id: "congratulations",
+        type: "achievement",
+        severity: "low",
+        message: `🎉 You've completed all modules — great job! Consider exploring advanced topics or revisiting weak spots.`,
+      });
+    } else if (pct === 0) {
+      reminders.push({
+        id: "start_learning",
+        type: "nudge",
+        severity: "low",
+        message: `⚡ Start with one module today — small steps add up.`,
+      });
+    }
+  }
+
+  // rule: recent visualizer usage — encourage variety
+  const recentVisualizer = (activityTypes || []).find((t) => /visualizer/i.test(t));
+  if (!recentVisualizer) {
+    reminders.push({
+      id: "try_visualizer",
+      type: "suggestion",
+      severity: "low",
+      message: `⚡ Try exploring a visualizer today to learn by example and speed up understanding.`,
+    });
+  }
+
+  // de-duplicate by id and return up to 5 reminders (most urgent first)
+  const map = new Map();
+  const priority = { high: 3, medium: 2, low: 1 };
+  reminders
+    .sort((a, b) => (priority[b.severity] || 0) - (priority[a.severity] || 0))
+    .slice(0, 5)
+    .forEach((r) => map.set(r.id, r));
+
+  return Array.from(map.values());
+}
diff --git a/src/utils/graph.js b/src/utils/graph.js
new file mode 100644
index 000000000..631f23f28
--- /dev/null
+++ b/src/utils/graph.js
@@ -0,0 +1,224 @@
+// utils/graph.js
+// Pure graph logic — no React, no DOM. Works for both directed and undirected graphs.
+
+/**
+ * Build adjacency list from edges
+ * In weighted mode, each entry is { to, weight } instead of just a node index.
+ * @param {number} nodeCount
+ * @param {Array<{from: number, to: number, weight?: number}>} edges
+ * @param {boolean} isDirected
+ * @param {boolean} isWeighted
+ * @returns {Object} adjacency list
+ */
+export function buildAdjacencyList(nodeCount, edges, isDirected, isWeighted = false) {
+  const adj = {};
+  for (let i = 0; i < nodeCount; i++) adj[i] = [];
+
+  for (const { from, to, weight = 1 } of edges) {
+    adj[from].push(isWeighted ? { to, weight } : to);
+    if (!isDirected) adj[to].push(isWeighted ? { to: from, weight } : from);
+  }
+  return adj;
+}
+
+/**
+ * Build adjacency matrix from edges
+ * In weighted mode, matrix[u][v] = weight instead of 1.
+ * @param {number} nodeCount
+ * @param {Array<{from: number, to: number, weight?: number}>} edges
+ * @param {boolean} isDirected
+ * @param {boolean} isWeighted
+ * @returns {number[][]} n×n matrix
+ */
+export function buildAdjacencyMatrix(nodeCount, edges, isDirected, isWeighted = false) {
+  const matrix = Array.from({ length: nodeCount }, () => Array(nodeCount).fill(0));
+  for (const { from, to, weight = 1 } of edges) {
+    matrix[from][to] = isWeighted ? weight : 1;
+    if (!isDirected) matrix[to][from] = isWeighted ? weight : 1;
+  }
+  return matrix;
+}
+
+/**
+ * BFS traversal — returns ordered array of step snapshots
+ * Each step: { visited: Set, current: number, queue: number[] }
+ * @param {Object} adj adjacency list
+ * @param {number} start starting node
+ * @returns {Array} steps
+ */
+export function bfsSteps(adj, start) {
+  const steps = [];
+  const visited = new Set();
+  const queue = [start];
+  visited.add(start);
+
+  while (queue.length > 0) {
+    const current = queue.shift();
+    steps.push({ current, visited: new Set(visited), queue: [...queue] });
+
+    for (const neighbor of (adj[current] || [])) {
+      const id = typeof neighbor === "object" ? neighbor.to : neighbor;
+      if (!visited.has(id)) {
+        visited.add(id);
+        queue.push(id);
+      }
+    }
+  }
+  return steps;
+}
+
+/**
+ * DFS traversal — returns ordered array of step snapshots
+ * Each step: { visited: Set, current: number, stack: number[] }
+ * @param {Object} adj adjacency list
+ * @param {number} start starting node
+ * @returns {Array} steps
+ */
+export function dfsSteps(adj, start) {
+  const steps = [];
+  const visited = new Set();
+
+  function dfs(node) {
+    visited.add(node);
+    steps.push({ current: node, visited: new Set(visited), stack: [] });
+    for (const neighbor of (adj[node] || [])) {
+      const id = typeof neighbor === "object" ? neighbor.to : neighbor;
+      if (!visited.has(id)) dfs(id);
+    }
+  }
+
+  dfs(start);
+  return steps;
+}
+
+/**
+ * Dijkstra's shortest path algorithm
+ * @param {Object} adj weighted adjacency list { to, weight }[]
+ * @param {number} start starting node
+ * @param {number} nodeCount
+ * @returns {Array} steps — each step: { current, visited: Set, distances: Object }
+ */
+export function dijkstraSteps(adj, start, nodeCount) {
+  const steps = [];
+  const distances = {};
+  const visited = new Set();
+
+  for (let i = 0; i < nodeCount; i++) distances[i] = Infinity;
+  distances[start] = 0;
+
+  for (let i = 0; i < nodeCount; i++) {
+    // Pick unvisited node with smallest distance
+    let u = -1;
+    for (let v = 0; v < nodeCount; v++) {
+      if (!visited.has(v) && (u === -1 || distances[v] < distances[u])) u = v;
+    }
+    if (u === -1 || distances[u] === Infinity) break;
+
+    visited.add(u);
+    steps.push({ current: u, visited: new Set(visited), distances: { ...distances } });
+
+    for (const { to, weight } of (adj[u] || [])) {
+      if (!visited.has(to) && distances[u] + weight < distances[to]) {
+        distances[to] = distances[u] + weight;
+      }
+    }
+  }
+  return steps;
+}
+
+/**
+ * Prim's MST algorithm
+ * @param {Object} adj weighted adjacency list { to, weight }[]
+ * @param {number} start starting node
+ * @param {number} nodeCount
+ * @returns {Array} steps — each step: { current, visited: Set, mstEdges: Array }
+ */
+export function primSteps(adj, start, nodeCount) {
+  const steps = [];
+  const visited = new Set();
+  const mstEdges = [];
+
+  visited.add(start);
+
+  while (visited.size < nodeCount) {
+    let bestEdge = null;
+    let bestWeight = Infinity;
+
+    for (const u of visited) {
+      for (const { to, weight } of (adj[u] || [])) {
+        if (!visited.has(to) && weight < bestWeight) {
+          bestWeight = weight;
+          bestEdge = { from: u, to, weight };
+        }
+      }
+    }
+
+    if (!bestEdge) break;
+
+    visited.add(bestEdge.to);
+    mstEdges.push(bestEdge);
+    steps.push({ current: bestEdge.to, visited: new Set(visited), mstEdges: [...mstEdges] });
+  }
+  return steps;
+}
+
+/**
+ * Detect cycle in a directed graph using DFS
+ * @param {number} nodeCount
+ * @param {Object} adj adjacency list
+ * @returns {boolean}
+ */
+export function hasCycleDirected(nodeCount, adj) {
+  const WHITE = 0, GRAY = 1, BLACK = 2;
+  const color = Array(nodeCount).fill(WHITE);
+
+  function dfs(u) {
+    color[u] = GRAY;
+    for (const neighbor of (adj[u] || [])) {
+      const v = typeof neighbor === "object" ? neighbor.to : neighbor;
+      if (color[v] === GRAY) return true;
+      if (color[v] === WHITE && dfs(v)) return true;
+    }
+    color[u] = BLACK;
+    return false;
+  }
+
+  for (let i = 0; i < nodeCount; i++) {
+    if (color[i] === WHITE && dfs(i)) return true;
+  }
+  return false;
+}
+
+/**
+ * Topological sort (Kahn's algorithm) — only valid for directed acyclic graphs
+ * @param {number} nodeCount
+ * @param {Object} adj adjacency list
+ * @returns {number[] | null} sorted order, or null if cycle detected
+ */
+export function topologicalSort(nodeCount, adj) {
+  const inDegree = Array(nodeCount).fill(0);
+  for (let u = 0; u < nodeCount; u++) {
+    for (const neighbor of (adj[u] || [])) {
+      const v = typeof neighbor === "object" ? neighbor.to : neighbor;
+      inDegree[v]++;
+    }
+  }
+
+  const queue = [];
+  for (let i = 0; i < nodeCount; i++) {
+    if (inDegree[i] === 0) queue.push(i);
+  }
+
+  const order = [];
+  while (queue.length > 0) {
+    const u = queue.shift();
+    order.push(u);
+    for (const neighbor of (adj[u] || [])) {
+      const v = typeof neighbor === "object" ? neighbor.to : neighbor;
+      inDegree[v]--;
+      if (inDegree[v] === 0) queue.push(v);
+    }
+  }
+
+  return order.length === nodeCount ? order : null;
+}
\ No newline at end of file
diff --git a/src/utils/sortingGenerators.js b/src/utils/sortingGenerators.js
new file mode 100644
index 000000000..ea00b9803
--- /dev/null
+++ b/src/utils/sortingGenerators.js
@@ -0,0 +1,289 @@
+/**
+ * Sorting Algorithms represented as ES6 Generator functions.
+ * They yield an object of type: { array, comparisons, swaps, currentIndices }
+ * on each state-changing visual step, decoupling the visual state from timing/react internals.
+ */
+
+// 1. Bubble Sort
+export function* bubbleSortGen(arr) {
+  let a = [...arr];
+  let n = a.length;
+  for (let i = 0; i < n - 1; i++) {
+    let swapped = false;
+    for (let j = 0; j < n - i - 1; j++) {
+      yield {
+        array: [...a],
+        comparisons: 1,
+        swaps: 0,
+        currentIndices: { comparing: [j, j + 1] }
+      };
+      if (a[j] > a[j + 1]) {
+        [a[j], a[j + 1]] = [a[j + 1], a[j]];
+        swapped = true;
+        yield {
+          array: [...a],
+          comparisons: 0,
+          swaps: 1,
+          currentIndices: { swapping: [j, j + 1] }
+        };
+      }
+    }
+    if (!swapped) break;
+  }
+}
+
+// 2. Selection Sort
+export function* selectionSortGen(arr) {
+  let a = [...arr];
+  let n = a.length;
+  for (let i = 0; i < n - 1; i++) {
+    let minIndex = i;
+    for (let j = i + 1; j < n; j++) {
+      yield {
+        array: [...a],
+        comparisons: 1,
+        swaps: 0,
+        currentIndices: { comparing: [j], min: minIndex, active: i }
+      };
+      if (a[j] < a[minIndex]) {
+        minIndex = j;
+        yield {
+          array: [...a],
+          comparisons: 0,
+          swaps: 0,
+          currentIndices: { comparing: [j], min: minIndex, active: i }
+        };
+      }
+    }
+    if (minIndex !== i) {
+      [a[i], a[minIndex]] = [a[minIndex], a[i]];
+      yield {
+        array: [...a],
+        comparisons: 0,
+        swaps: 1,
+        currentIndices: { swapping: [i, minIndex], active: i }
+      };
+    }
+  }
+}
+
+// 3. Insertion Sort
+export function* insertionSortGen(arr) {
+  let a = [...arr];
+  let n = a.length;
+  for (let i = 1; i < n; i++) {
+    let current = a[i];
+    let j = i - 1;
+    yield {
+      array: [...a],
+      comparisons: 0,
+      swaps: 0,
+      currentIndices: { key: i, comparing: [j] }
+    };
+    while (j >= 0 && a[j] > current) {
+      yield {
+        array: [...a],
+        comparisons: 1,
+        swaps: 0,
+        currentIndices: { key: i, comparing: [j] }
+      };
+      a[j + 1] = a[j];
+      yield {
+        array: [...a],
+        comparisons: 0,
+        swaps: 1,
+        currentIndices: { key: i, shifting: [j + 1] }
+      };
+      j--;
+    }
+    a[j + 1] = current;
+    yield {
+      array: [...a],
+      comparisons: 0,
+      swaps: 0,
+      currentIndices: { key: j + 1 }
+    };
+  }
+}
+
+// 4. Merge Sort
+export function* mergeSortGen(arr) {
+  let a = [...arr];
+  yield* mergeSortHelper(a, 0, a.length - 1);
+
+  function* mergeSortHelper(a, l, r) {
+    if (l >= r) return;
+    let m = l + Math.floor((r - l) / 2);
+    yield* mergeSortHelper(a, l, m);
+    yield* mergeSortHelper(a, m + 1, r);
+    yield* merge(a, l, m, r);
+  }
+
+  function* merge(a, l, m, r) {
+    let n1 = m - l + 1;
+    let n2 = r - m;
+    let L = a.slice(l, m + 1);
+    let R = a.slice(m + 1, r + 1);
+    let i = 0, j = 0, k = l;
+    while (i < n1 && j < n2) {
+      yield {
+        array: [...a],
+        comparisons: 1,
+        swaps: 0,
+        currentIndices: { range: [l, r], comparing: [l + i, m + 1 + j] }
+      };
+      if (L[i] <= R[j]) {
+        a[k] = L[i];
+        i++;
+      } else {
+        a[k] = R[j];
+        j++;
+      }
+      yield {
+        array: [...a],
+        comparisons: 0,
+        swaps: 1,
+        currentIndices: { range: [l, r], writing: [k] }
+      };
+      k++;
+    }
+    while (i < n1) {
+      a[k] = L[i];
+      i++;
+      yield {
+        array: [...a],
+        comparisons: 0,
+        swaps: 1,
+        currentIndices: { range: [l, r], writing: [k] }
+      };
+      k++;
+    }
+    while (j < n2) {
+      a[k] = R[j];
+      j++;
+      yield {
+        array: [...a],
+        comparisons: 0,
+        swaps: 1,
+        currentIndices: { range: [l, r], writing: [k] }
+      };
+      k++;
+    }
+  }
+}
+
+// 5. Quick Sort
+export function* quickSortGen(arr) {
+  let a = [...arr];
+  yield* quickSortHelper(a, 0, a.length - 1);
+
+  function* quickSortHelper(a, low, high) {
+    if (low < high) {
+      let piRef = { val: low };
+      yield* partition(a, low, high, piRef);
+      let pi = piRef.val;
+      yield* quickSortHelper(a, low, pi - 1);
+      yield* quickSortHelper(a, pi + 1, high);
+    }
+  }
+
+  function* partition(a, low, high, piRef) {
+    let pivot = a[high];
+    let i = low - 1;
+    for (let j = low; j < high; j++) {
+      yield {
+        array: [...a],
+        comparisons: 1,
+        swaps: 0,
+        currentIndices: { pivot: high, comparing: [j], boundary: i }
+      };
+      if (a[j] < pivot) {
+        i++;
+        [a[i], a[j]] = [a[j], a[i]];
+        yield {
+          array: [...a],
+          comparisons: 0,
+          swaps: 1,
+          currentIndices: { pivot: high, swapping: [i, j], boundary: i }
+        };
+      }
+    }
+    [a[i + 1], a[high]] = [a[high], a[i + 1]];
+    yield {
+      array: [...a],
+      comparisons: 0,
+      swaps: 1,
+      currentIndices: { pivot: high, swapping: [i + 1, high], boundary: i }
+    };
+    piRef.val = i + 1;
+  }
+}
+
+// 6. Heap Sort
+export function* heapSortGen(arr) {
+  const a = [...arr];
+  const n = a.length;
+
+  function* heapify(heapSize, rootIndex) {
+    let largest = rootIndex;
+    const left = 2 * rootIndex + 1;
+    const right = 2 * rootIndex + 2;
+
+    yield {
+      array: [...a],
+      comparisons: 0,
+      swaps: 0,
+      currentIndices: { active: rootIndex, heapSize },
+    };
+
+    if (left < heapSize) {
+      yield {
+        array: [...a],
+        comparisons: 1,
+        swaps: 0,
+        currentIndices: { comparing: [largest, left], active: rootIndex, heapSize },
+      };
+      if (a[left] > a[largest]) {
+        largest = left;
+      }
+    }
+
+    if (right < heapSize) {
+      yield {
+        array: [...a],
+        comparisons: 1,
+        swaps: 0,
+        currentIndices: { comparing: [largest, right], active: rootIndex, heapSize },
+      };
+      if (a[right] > a[largest]) {
+        largest = right;
+      }
+    }
+
+    if (largest !== rootIndex) {
+      [a[rootIndex], a[largest]] = [a[largest], a[rootIndex]];
+      yield {
+        array: [...a],
+        comparisons: 0,
+        swaps: 1,
+        currentIndices: { swapping: [rootIndex, largest], active: largest, heapSize },
+      };
+      yield* heapify(heapSize, largest);
+    }
+  }
+
+  for (let i = Math.floor(n / 2) - 1; i >= 0; i--) {
+    yield* heapify(n, i);
+  }
+
+  for (let end = n - 1; end > 0; end--) {
+    [a[0], a[end]] = [a[end], a[0]];
+    yield {
+      array: [...a],
+      comparisons: 0,
+      swaps: 1,
+      currentIndices: { swapping: [0, end], heapSize: end, sortedStart: end },
+    };
+    yield* heapify(end, 0);
+  }
+}
diff --git a/src/utils/sortingWorker.js b/src/utils/sortingWorker.js
new file mode 100644
index 000000000..3889359f2
--- /dev/null
+++ b/src/utils/sortingWorker.js
@@ -0,0 +1,42 @@
+import {
+  bubbleSortGen,
+  selectionSortGen,
+  insertionSortGen,
+  mergeSortGen,
+  quickSortGen,
+  heapSortGen,
+} from "./sortingGenerators";
+
+const ALGORITHMS = {
+  bubble: bubbleSortGen,
+  selection: selectionSortGen,
+  insertion: insertionSortGen,
+  merge: mergeSortGen,
+  quick: quickSortGen,
+  heap: heapSortGen,
+};
+
+self.onmessage = function (e) {
+  const { algo, array, id } = e.data;
+  
+  if (!ALGORITHMS[algo]) {
+    self.postMessage({ id, error: `Algorithm ${algo} not found` });
+    return;
+  }
+  
+  const genFunc = ALGORITHMS[algo];
+  const gen = genFunc([...array]);
+  
+  const frames = [];
+  let steps = 0;
+  
+  // We can just iterate the generator to completion
+  let res = gen.next();
+  while (!res.done) {
+    frames.push(res.value);
+    steps++;
+    res = gen.next();
+  }
+  
+  self.postMessage({ id, frames, steps });
+};
diff --git a/src/utils/storage.js b/src/utils/storage.js
new file mode 100644
index 000000000..c256ffdf8
--- /dev/null
+++ b/src/utils/storage.js
@@ -0,0 +1,27 @@
+export const saveToStorage = (key, value) => {
+  if (typeof window !== "undefined") {
+    localStorage.setItem(key, JSON.stringify(value));
+  }
+};
+
+export const loadFromStorage = (key, fallback) => {
+  if (typeof window !== "undefined") {
+    const item = localStorage.getItem(key);
+
+    if (item) {
+      try {
+        return JSON.parse(item);
+      } catch {
+        return fallback;
+      }
+    }
+  }
+
+  return fallback;
+};
+
+export const removeFromStorage = (key) => {
+  if (typeof window !== "undefined") {
+    localStorage.removeItem(key);
+  }
+};
\ No newline at end of file
diff --git a/styles/dark-mode.css b/styles/dark-mode.css
new file mode 100644
index 000000000..1bcb0a565
--- /dev/null
+++ b/styles/dark-mode.css
@@ -0,0 +1,56 @@
+/* dark-mode.css – modern palette and transitions */
+:root {
+  --bg: #ffffff;
+  --fg: #111111;
+  --accent: #0066ff;
+  --radius: 8px;
+  --transition: .3s;
+}
+[data-theme="dark"] {
+  --bg: #111111;
+  --fg: #eeeeee;
+  --accent: #66aaff;
+}
+body {
+  background: var(--bg);
+  color: var(--fg);
+  font-family: "Inter", "Roboto", sans-serif;
+  transition: var(--transition);
+}
+h1, h2, h3 { color: var(--accent); }
+a { color: var(--accent); text-decoration: none; }
+a:hover { opacity: .8; }
+button {
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius);
+  padding: .5rem 1rem;
+  cursor: pointer;
+  transition: var(--transition);
+}
+button:hover { opacity: .9; }
+input, select, textarea {
+  border: 1px solid #ccc;
+  border-radius: var(--radius);
+  padding: .5rem;
+  width: 100%;
+  box-sizing: border-box;
+  transition: var(--transition);
+}
+input:focus, select:focus, textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.toggle {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius);
+  padding: .5rem 1rem;
+  z-index: 9999;
+  cursor: pointer;
+}
diff --git a/supabase_setup.sql b/supabase_setup.sql
new file mode 100644
index 000000000..611743c7c
--- /dev/null
+++ b/supabase_setup.sql
@@ -0,0 +1,288 @@
+-- Add joined_community column to user_profiles for Join Community Button
+ALTER TABLE user_profiles ADD COLUMN IF NOT EXISTS joined_community BOOLEAN DEFAULT false;
+
+-- ── user_activity ──────────────────────────────────────────────────────
+ALTER TABLE user_activity ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Users can read own activity" ON user_activity
+  FOR SELECT
+  USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can insert own activity" ON user_activity
+  FOR INSERT
+  WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "Users can update own activity" ON user_activity
+  FOR UPDATE
+  USING (auth.uid() = user_id)
+  WITH CHECK (auth.uid() = user_id);
+
+-- ── problem_bookmarks ──────────────────────────────────────────────────
+ALTER TABLE problem_bookmarks ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Users can read own bookmarks" ON problem_bookmarks
+  FOR SELECT
+  USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can insert own bookmarks" ON problem_bookmarks
+  FOR INSERT
+  WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "Users can update own bookmarks" ON problem_bookmarks
+  FOR UPDATE
+  USING (auth.uid() = user_id)
+  WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "Users can delete own bookmarks" ON problem_bookmarks
+  FOR DELETE
+  USING (auth.uid() = user_id);
+
+-- ── user_progress ──────────────────────────────────────────────────────
+ALTER TABLE user_progress ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Users can read own progress" ON user_progress
+  FOR SELECT
+  USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can insert own progress" ON user_progress
+  FOR INSERT
+  WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "Users can update own progress" ON user_progress
+  FOR UPDATE
+  USING (auth.uid() = user_id)
+  WITH CHECK (auth.uid() = user_id);
+
+-- ── user_profiles ──────────────────────────────────────────────────────
+ALTER TABLE user_profiles ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Users can read own profile" ON user_profiles
+  FOR SELECT
+  USING (auth.uid() = id);
+
+CREATE POLICY "Users can insert own profile" ON user_profiles
+  FOR INSERT
+  WITH CHECK (auth.uid() = id);
+
+CREATE POLICY "Users can update own profile" ON user_profiles
+  FOR UPDATE
+  USING (auth.uid() = id)
+  WITH CHECK (auth.uid() = id);
+
+-- ── community_contributors (already has SELECT for public) ──────────────
+ALTER TABLE community_contributors ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Allow public read access" ON community_contributors
+  FOR SELECT
+  USING (true);
+
+-- Admin users can manage contributors (requires a custom claim or user_metadata)
+CREATE POLICY "Admins can insert contributors" ON community_contributors
+  FOR INSERT
+  WITH CHECK (
+    auth.role() = 'authenticated' AND
+    auth.jwt() -> 'app_metadata' ->> 'role' = 'admin'
+  );
+
+CREATE POLICY "Admins can update contributors" ON community_contributors
+  FOR UPDATE
+  USING (
+    auth.role() = 'authenticated' AND
+    auth.jwt() -> 'app_metadata' ->> 'role' = 'admin'
+  );
+
+CREATE POLICY "Admins can delete contributors" ON community_contributors
+  FOR DELETE
+  USING (
+    auth.role() = 'authenticated' AND
+    auth.jwt() -> 'app_metadata' ->> 'role' = 'admin'
+  );
+
+-- ====================================================================
+-- pending_messages table for SMTP quota fallback
+-- ====================================================================
+CREATE TABLE IF NOT EXISTS pending_messages (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  type TEXT NOT NULL CHECK (type IN ('contact', 'review')),
+  payload JSONB NOT NULL,
+  created_at TIMESTAMPTZ DEFAULT now(),
+  sent_at TIMESTAMPTZ
+);
+
+ALTER TABLE pending_messages ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Service role can insert pending_messages" ON pending_messages
+  FOR INSERT
+  WITH CHECK (auth.role() = 'service_role');
+
+CREATE POLICY "Service role can read pending_messages" ON pending_messages
+  FOR SELECT
+  USING (auth.role() = 'service_role');
+
+CREATE POLICY "Service role can update pending_messages" ON pending_messages
+  FOR UPDATE
+  USING (auth.role() = 'service_role');
+
+-- ====================================================================
+-- newsletter_subscriptions table for Footer Newsletter
+-- ====================================================================
+CREATE TABLE IF NOT EXISTS newsletter_subscriptions (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  email TEXT UNIQUE NOT NULL,
+  subscribed_at TIMESTAMPTZ DEFAULT now(),
+  status TEXT DEFAULT 'active'
+);
+
+ALTER TABLE newsletter_subscriptions ENABLE ROW LEVEL SECURITY;
+
+-- ====================================================================
+-- topic_comments table for visualizer discussion threads
+-- ====================================================================
+CREATE TABLE topic_comments (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  topic_id TEXT NOT NULL,
+  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+  content TEXT NOT NULL,
+  created_at TIMESTAMPTZ DEFAULT now()
+);
+
+ALTER TABLE topic_comments ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Anyone can read comments" ON topic_comments FOR SELECT USING (true);
+CREATE POLICY "Authenticated users can insert comments" ON topic_comments FOR INSERT WITH CHECK (auth.uid() = user_id);
+
+-- Atomic streak increment function (fixes TOCTOU race condition)
+-- ====================================================================
+CREATE OR REPLACE FUNCTION increment_streak_on_completion(p_user_id UUID, p_local_date DATE DEFAULT NULL)
+RETURNS TABLE (current_streak INT, longest_streak INT)
+LANGUAGE plpgsql
+AS $$
+DECLARE
+  v_current INT;
+  v_longest INT;
+  v_last_active DATE;
+  v_today DATE := COALESCE(p_local_date, CURRENT_DATE);
+  v_yesterday DATE := COALESCE(p_local_date, CURRENT_DATE) - 1;
+BEGIN
+  -- Try to select and lock the existing row
+  SELECT user_practice_stats.current_streak, user_practice_stats.longest_streak, user_practice_stats.last_active_date::DATE
+  INTO v_current, v_longest, v_last_active
+  FROM user_practice_stats
+  WHERE user_id = p_user_id
+  FOR UPDATE;
+
+  -- If not found, attempt to insert a new row
+  IF NOT FOUND THEN
+    BEGIN
+      INSERT INTO user_practice_stats (user_id, current_streak, longest_streak, last_active_date, visualized_count)
+      VALUES (p_user_id, 1, 1, v_today, 0)
+      RETURNING user_practice_stats.current_streak, user_practice_stats.longest_streak INTO v_current, v_longest;
+      RETURN QUERY SELECT v_current, v_longest;
+      RETURN;
+    EXCEPTION WHEN unique_violation THEN
+      -- If a concurrent insert succeeded, lock and select the newly inserted row
+      SELECT user_practice_stats.current_streak, user_practice_stats.longest_streak, user_practice_stats.last_active_date::DATE
+      INTO v_current, v_longest, v_last_active
+      FROM user_practice_stats
+      WHERE user_id = p_user_id
+      FOR UPDATE;
+    END;
+  END IF;
+
+  IF v_last_active > v_today THEN
+    -- Out of order update (e.g., solving problem for a past day after solving one for today/future)
+    -- Do not reset or modify current_streak, longest_streak, or last_active_date.
+    RETURN QUERY SELECT v_current, v_longest;
+    RETURN;
+  ELSIF v_last_active = v_yesterday THEN
+    v_current := v_current + 1;
+    IF v_current > v_longest THEN
+      v_longest := v_current;
+    END IF;
+  ELSIF v_last_active IS NULL OR v_last_active < v_yesterday THEN
+    v_current := 1;
+  END IF;
+
+  UPDATE user_practice_stats
+  SET current_streak = v_current, longest_streak = v_longest, last_active_date = v_today
+  WHERE user_id = p_user_id;
+
+  RETURN QUERY SELECT v_current, v_longest;
+END;
+$$;
+
+-- ====================================================================
+-- Combined function: upsert progress and update streak atomically
+-- Wraps both operations in a single transaction to prevent partial failures
+-- ====================================================================
+CREATE OR REPLACE FUNCTION upsert_progress_and_update_streak(
+  p_user_id UUID,
+  p_problem_id TEXT,
+  p_status TEXT,
+  p_updated_at TIMESTAMPTZ
+)
+RETURNS TABLE (current_streak INT, longest_streak INT)
+LANGUAGE plpgsql
+AS $$
+DECLARE
+  v_existing_status TEXT;
+  v_current INT;
+  v_longest INT;
+  v_last_active DATE;
+  v_today DATE := CURRENT_DATE;
+  v_yesterday DATE := CURRENT_DATE - 1;
+BEGIN
+  -- Get existing progress status
+  SELECT status INTO v_existing_status
+  FROM user_progress
+  WHERE user_id = p_user_id AND problem_id = p_problem_id;
+
+  -- Upsert progress
+  INSERT INTO user_progress (user_id, problem_id, status, updated_at)
+  VALUES (p_user_id, p_problem_id, p_status, p_updated_at)
+  ON CONFLICT (user_id, problem_id)
+  DO UPDATE SET status = p_status, updated_at = p_updated_at;
+
+  -- Only update streak if completed now AND was NOT completed before
+  IF p_status = 'Completed' AND COALESCE(v_existing_status, '') <> 'Completed' THEN
+    SELECT current_streak, longest_streak, last_active_date::DATE
+    INTO v_current, v_longest, v_last_active
+    FROM user_practice_stats
+    WHERE user_id = p_user_id
+    FOR UPDATE;
+
+    IF NOT FOUND THEN
+      INSERT INTO user_practice_stats (user_id, current_streak, longest_streak, last_active_date, visualized_count)
+      VALUES (p_user_id, 1, 1, v_today, 0)
+      RETURNING current_streak, longest_streak INTO v_current, v_longest;
+      RETURN QUERY SELECT v_current, v_longest;
+      RETURN;
+    END IF;
+
+    IF v_last_active > v_today THEN
+      -- Out of order update (do not modify streak)
+      RETURN QUERY SELECT v_current, v_longest;
+      RETURN;
+    ELSIF v_last_active = v_yesterday THEN
+      v_current := v_current + 1;
+      IF v_current > v_longest THEN
+        v_longest := v_current;
+      END IF;
+    ELSIF v_last_active IS NULL OR v_last_active < v_yesterday THEN
+      v_current := 1;
+    END IF;
+
+    UPDATE user_practice_stats
+    SET current_streak = v_current, longest_streak = v_longest, last_active_date = v_today
+    WHERE user_id = p_user_id;
+  ELSE
+    -- If it is already completed, or is not completed, we just get existing values
+    SELECT current_streak, longest_streak
+    INTO v_current, v_longest
+    FROM user_practice_stats
+    WHERE user_id = p_user_id;
+  END IF;
+
+  RETURN QUERY SELECT COALESCE(v_current, 0), COALESCE(v_longest, 0);
+END;
+$$;
diff --git a/tailwind.config.js b/tailwind.config.js
index 7e78ce7fc..9997ec915 100755
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,9 +2,7 @@
 module.exports = {
   darkMode: "class",
   content: [
-    "./app/**/*.{js,ts,jsx,tsx}",
-    "./pages/**/*.{js,ts,jsx,tsx}",
-    "./components/**/*.{js,ts,jsx,tsx}",
+    "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
@@ -36,6 +34,48 @@ module.exports = {
           "dark-text": "#f7f9fa",
           "dark-muted": "#9e9e9e",
         },
+        surface: {
+          50: "var(--color-neutral-50)",
+          100: "var(--color-neutral-100)",
+          200: "var(--color-neutral-200)",
+          300: "var(--color-neutral-300)",
+          400: "var(--color-neutral-400)",
+          500: "var(--color-neutral-500)",
+          600: "var(--color-neutral-600)",
+          700: "var(--color-neutral-700)",
+          800: "var(--color-neutral-800)",
+          900: "var(--color-neutral-900)",
+          950: "var(--color-neutral-950)",
+        },
+        primary: {
+          DEFAULT: "var(--color-primary)",
+          dark: "var(--color-primary-dark)",
+          light: "var(--color-primary-light)",
+        },
+        success: "var(--color-success)",
+        warning: "var(--color-warning)",
+        danger: "var(--color-danger)",
+        muted: "var(--color-muted)",
+      },
+      borderRadius: {
+        sm: "var(--radius-sm)",
+        md: "var(--radius-md)",
+        lg: "var(--radius-lg)",
+        xl: "var(--radius-xl)",
+      },
+      boxShadow: {
+        card: "var(--shadow-card)",
+        "card-hover": "var(--shadow-card-hover)",
+        btn: "var(--shadow-btn)",
+        elevated: "var(--shadow-elevated)",
+      },
+      transitionDuration: {
+        fast: "var(--motion-fast)",
+        normal: "var(--motion-normal)",
+        slow: "var(--motion-slow)",
+      },
+      transitionTimingFunction: {
+        standard: "var(--ease-standard)",
       },
     },
   },
diff --git a/utils/auth.js b/utils/auth.js
deleted file mode 100755
index d517588af..000000000
--- a/utils/auth.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { supabase } from '../lib/supabase'
-
-export async function getToken() {
-  const {
-    data: { session },
-  } = await supabase.auth.getSession()
-  return session?.access_token || null
-}
\ No newline at end of file